teleren/devto huggingface dataset:
Double Click: Discover or Be Discovered with Coding Exercises from CodeSignal
Published: 2021-09-23 16:20:04

---
title: Double Click: Discover or Be Discovered with Coding Exercises from CodeSignal
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Welcome to the Double Click! This is the weekly blog series that shines a spotlight on emerging technologies, technological concepts, and community projects that enrich the JavaScript Ecosystem!

This week, I wanted to feature a fun web platform that I have just become aware of that offers coding skills tests and assessments, and also allows developers to make their results available to potential employers: [CodeSignal](https://codesignal.com/?gclid=CjwKCAjwj8eJBhA5EiwAg3z0m977_EBR5TDAnmWV4T92CI33VaL99ao8R2cI3XhGLfGztM54yMiPRhoCdtIQAvD_BwE).

Of course, the latter feature is optional, so developers don’t need to worry about endless recruiting e-mails just because they want to test out their skills.  

But I think this offers a unique opportunity for junior developers to experience what a code exercise can feel like- and perhaps what questions they might expect to see on a future skills assessment.

While poking through the site, I also learned that the platform offers several unique features for partnered companies aside from connecting with qualified candidates.  The platform can also facilitate live, remote skills interviews with questions, features a plagiarism checker, and registers keystrokes to understand the extent to which a developer individually coded their solutions.

For companies with a large hiring program, this can be a fantastic way not only to identify potential candidates, but to increase visibility for their brand among developers working to improve their skills, and manage expectations for candidates across different teams within the same company.

Developers interested in improving their chops, or getting discovered by their next employer should sign up for a free [interview practice account](https://codesignal.com/developers/interview-practice/), and dev team leaders interested in using Codesignal as part of their hiring program can request a demo [here](https://codesignal.com/demo/).

---

_This Dot Labs is a modern web consultancy focused on helping companies realize their digital transformation efforts. For expert architectural guidance, training, or consulting in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, or Polymer, visit [thisdotlabs.com](https://www.thisdotlabs.com)._

_This Dot Media is focused on creating an inclusive and educational web for all. We keep you up to date with advancements in the modern web through events, podcasts, and free content. To learn more, visit [thisdot.co](https://www.thisdot.co)._
Double Click: Vue 3.2 packs stable features & performance improvements!
Published: 2021-09-23 16:16:44

---
title: Double Click: Vue 3.2 packs stable features & performance improvements!
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Welcome to the Double Click! This is the weekly blog series that shines a spotlight on emerging technologies, technological concepts, and community projects that enrich the JavaScript Ecosystem!

This week, we turn our attention to the wonderful Vue Core Team, who very recently released Vue 3.2.  

According to this statement by VueJS creator,  Evan You, this release does include significant performance improvements without subjecting devs to any breaking changes. 

New features include stable releases for < script setup > and ‘< style > v-bind ’, which both have use when working with Single File Components.  According to the official announcement:

“‘< script setup >’ is a compile-time syntactic sugar that greatly improves the ergonomics when using Composition API inside SFCs.”

This feature will feel very familiar for Svelte users as it allows developers to export individual variables or functions, within their script setup, to their templates, instead of entire objects.

'< style > v-bind' enables component state-driven dynamic CSS values in SFC < style > tags.

This ‘< style > v-bind’ feature automatically passes any value defined in the code directly to the CSS as a binding.

The latest release of Vue 3 also allows expanded options for creating web components using the Vue CLI.  

To permit this, the team created a new ‘defineCustomElement’ method which gives developers the ability to create and consume custom web components that can be used across the JavaScript ecosystem, using Vue.

Of course, even if developers are not interested in using one of the handful of new features offered with this 3.2 release, there are still a number of reasons to be excited.  This release includes a number of performance enhancements, including (from official announcement):

More efficient ref implementation (~260% faster read / ~50% faster write)
~40% faster dependency tracking
~17% less memory usage

So what are you waiting for? Be sure to update to the latest version of Vue 3, and try out these new features yourself!

---

*This Dot Labs is a development consultancy focused on providing staff augmentation, architectural guidance, and consulting to companies.*

*We help implement and teach modern web best practices with technologies such as React, Angular, Vue, Web Components, GraphQL, Node, and more.*
Installing Python3 Virtual Environment on Ubuntu 20.04
Published: 2021-09-23 15:57:46

If you are interested, you can also watch the video version of this article: 
{% youtube ZlFt_ewyqQQ %}

Outline:

1. What is a virtual environment?
2. How to install a Python3 virtual environment?
3. How to use the virtual environment?

---

# 1. What is a virtual environment?

According to an explanation by [linuxize.com](https://linuxize.com/post/how-to-create-python-virtual-environments-on-ubuntu-18-04/), Python virtual environment is a self-contained directory tree that includes a Python installation and number of additional packages. The main purpose of Python virtual environments is to create an isolated environment for different Python projects. This way you can install a specific version of a module on a per project basis without worrying that it will affect your other Python projects.

# 2. How to install a Python3 virtual environment?

- Before installing the virtual environment, we need to make sure that Python3 is already installed on the machine. On ubuntu, you can open the terminal and type:

```
python3 -V
```

The output should be like this:

```
Python 3.8.10
```

- In Python itself, there are several ways to install the virtual environment. Currently, the recomended way to install the virtual environment is by using `venv` module.

You can install that module by type this command on the terminal:

```
sudo apt install python3-venv
```

# 3. How to use the virtual environment?

- To use the virtual environment, you can type this in your terminal:

```
python3 -m venv my-project-env
```

The above command will create a directory called `my-project-env` which contains a copy of the python supporting files for the virtual environment.

- In order to use the virtual environment, you have to activate it first. In order to activate it, you can type the following on your terminal:

```
source my-project-env/bin/activate
```

After that, you might notice that there is something unique in your terminal. And if it do so, then your virtual environment is ready to go.

To test it, you can type the following command in the terminal:

```
pip install numpy
```

The above command will install python numpy package and the above package can only used if you activate the virtual environment.

---

There you go, that was a simple explanation about a virtual environment in python. Thank you for reading this article, inputs and comments are very appreciated.

---

### Sources and Images:

- https://picsum.photos/seed/2021-09-23T19:42:39+07:00/2983/1206
- https://linuxize.com/post/how-to-create-python-virtual-environments-on-ubuntu-18-04/
Using clamp() for responsiveness
Published: 2021-09-23 15:54:25

---
canonical_url: https://abhinavvp.com/posts/using-clamp-for-responsiveness/
---

**Clamp()** is one of the most useful yet underrated functions in CSS to ensure responsiveness in web design.
Web pages can be viewed from multiple platforms, and you will have to ensure that the design won't break in any of the viewports.

---

Consider an id 'text' with font-size as 3rem.


```
#text{
  font-size:3rem;
}
``` 

The problem is that irrespective of the viewport, font size remains constant. One way to deal with this is to replace rem with % or vw so that the font size becomes relative to the viewport.
```
#text{
  font-size:7vw;
}
```
The issue that one could face with the above method is that there are no minimum and maximum limits. The text could get incredibly bigger or smaller depending upon the viewport.
This is where Clamp() comes to the rescue.
```
#text {
  font-size:clamp(2rem,7vw,4rem);
}
```
Clamp() is a combination of min() and max(). It takes 3 arguments: the lower limit, the variable, and the upper limit. It clamps a value between the provided lower and upper limit. This ensures that the width remains relative to the viewport at the same time with a lower and upper bound.
New WebDataRocks 1.4 release is out!
Tags: vue, angular, react, webdev
Published: 2021-09-23 15:53:38

Just a short notice about the free javascript data visualization library my team & I are working on. 

We made a few new improvements in [WebDataRocks Pivot Table] (https://www.webdatarocks.com/?r=dt4) release 1.4 that I want to share with the community. 

This time, we added: 

☑️ An easy way to integrate pivot grid with [Angular](https://www.webdatarocks.com/doc/integration-with-angular/?r=dt4), [Vue](https://www.webdatarocks.com/doc/integration-with-vue/?r=dt4) & [React](https://www.webdatarocks.com/doc/integration-with-react/?r=dt4), just using npm. 

*Before starting, make sure that Node.js and npm are installed on your machine as well as the CLI of the corresponding framework*

Then just one command and you have the needed module installed:

⚫ for Vue
```
npm install vue-webdatarocks
```
⚫ for React
```
npm install react-webdatarocks
```
⚫ for Angular
```
npm install ng-webdatarocks
```

Now you have ready-to-use wrappers for the most popular frameworks to save time and effort on embedding them with our product. But still, our pivot tool can be integrated with any other framework, the [available tutorials](https://www.webdatarocks.com/doc/available-tutorials/?r=dt4) you can find in our documentation.


☑️ New predefined pivot grid skins: beautify your report with stylish themes by choosing any of the 8 themes or create your own one with our new [custom theme builder](https://www.webdatarocks.com/doc/custom-report-themes/?r=dt4).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cupolf5e7sccoxddg5bt.gif)


There were also a few minor changes we made that you can find in our [release notes](https://www.webdatarocks.com/blog/webdatarocks-1-4-release-new-long-awaited-features/?r=dt4).

I hope that you have already tried or used our free pivot grid component in your project. We made it for developers to save their time, so we hopefully achieve our goal and will value any feedback from the dev community!
Someone solve this
Tags: python, discuss, help
Published: 2021-09-23 15:51:43

Take a number "N" from the user and let the user enter a set of numbers exactly equal to N, as
"input_array". Form a list from the given set of array elements. With that list, write a program to
print this list after removing all duplicate values with original order reserved.
a. Create a class for performing the operations. Getting the input, printing outputs can be
done outside the class.
b. If any duplicates are found, raise a user-defined exception. Catch this exception from the
main function and print "Duplicate found at index 1".
c. Make sure that no matter what input is given the program doesn't throw any runtime
Errors.
d. You can get the input from stdin or you can use argparse. Bonus points for using
argparse.
Input 1:
N = 5, input_array = [2,2,3,4,5]
Output 1:
Duplicate found at index 1
Input 2:
N = 5, input_array = [2,3,4,5]
Output 2:
[5,4,3,2]
ShowDEV: Guess CSS! HTML+CSS puzzler game
Tags: showdev, html, css, react
Published: 2021-09-23 15:51:42

https://guess-css.app/

Have you ever struggled with CSS? I used to! Let's struggle together. Try yourself in these exercises!

## What's this?
It's HTML and CSS learning game. You are given a rendered example, three CSS fragments and HTML layout, and your task is to guess which CSS renders this example.

## CSS parts covered
* Grid
* Selectors and their specificity
* Flexbox
* Position
* Display

## How it works
We are all developers, so if you are interested in app internals, I'm glad to disclose them!

The code is [here](https://github.com/aleksei-berezkin/guess-css/). It's typical React app written on TypeScript. There's a [global store](https://github.com/aleksei-berezkin/guess-css/blob/master/src/store/store.ts) but it's not Redux or MobX: there's an easy way to [write your own](https://dev.to/alekseiberezkin/no-library-react-store-with-useselector-action-thunks-and-ssr-36bn) and keep your bundle small 😉 Interface components are created with [Material UI](https://mui.com/).

## How does it create puzzlers
It generates them [here](https://github.com/aleksei-berezkin/guess-css/tree/master/src/model/gen). There's a script for each topic which combines random elements into an exercise. Because there are a lot of moving parts in one puzzler, the result is likely to be different each time.

For each task 3 similar CSS fragments are generated. One is picked to be correct.

## What I've learned doing this project
* CSS basics
* React and TypeScript — I practiced them a lot
* I played also with Redux and SSR but then removed both for simplicity
* Material UI and CSS-in-JS
* Responsive, mobile-first layout
* A bit of design. It was quite challenging to make exercises look clear; if it looks simple for you — yeah, I'm glad I managed to!

## Did I enjoy working on the project?
Yes! Doing pet projects is very fun and useful.

____
*Thanks for reading the post. Here's the link again: https://guess-css.app/. What is your score?*
What is DevOps?
Tags: devops, help, software
Published: 2021-09-23 15:51:22

<b>Last year when I heard the term DevOps, I thought it would be any technology and trust me not only me but many of us think it as of a certain technology at first.</b>

>If not technology what is it then?
You must have come across various **SDLC** methodologies from waterfall to agile.
**DevOps** too is a methodology but it is not technically the **SDLC** methodology, but its goal is similar to that of the **SDLC** methodologies and that is to maximize the software project success.

**DevOps is a software development strategy, which bridges the gap between the development part and the operations part.**
>It has agile inspired concepts.
It has various stages that altogether helps in maintaining a well tested and high quality product running.

**The stages of DevOps are:-**
* Version Control
* Continuous Integration
* Continuous Delivery
* continuous Deployment

Once the application is live that is deployed on the prod server, it is continuously monitored.
>To execute these above mentioned stages various different tools are used and that **we will discuss in the next post.**




Let's Connect on [linkedin] (https://www.linkedin.com/in/yellowgem/)

Stay Kind.
How to use npm instead of yarn with the “expo init” cli (react native tip)
Tags: reactnative, react, javascript
Published: 2021-09-23 15:48:31

###### tl:dr  —  run expo init ‘project_name’ --npm
<br />
In this guide, I’ll show you how to use npm instead of yarn to create a new react native project while working with the expo cli.  [React Native](https://reactnative.dev/)  combines the best parts of native development(Android, IOS) with React, a best-in-class JavaScript library for building user interfaces.  [Expo](https://expo.dev/)  on the other hand makes this process super easy.

#### Prerequisites
This guide assumes that you have already installed the expo cli globally. You can find a comprehensive guide on how to set that up on the  [official expo documentation](https://docs.expo.dev/get-started/installation/) 

#### The Problem
You might have at one point installed yarn on your machine to follow along with a coding tutorial or as a requirement on a past project you were working on. You now have both yarn and npm installed on your machine and you don't want to uninstall either of them(for whatever technical 'it depends' reason). By default expo cli falls back to yarn when it is available but due to preference you want to use npm.

#### The Solution
The solution in this case is to use the `--npm` flag when initializing a new expo react native project. The cli hints at what you should use but doesn't explicitly describe where it should be used. This is done by typing `expo init project-name` with the `--npm` flag.

e.g 
```cli
expo init unicornfinder --npm
``` 

With the `expo init 'project-name' --npm` statement, you can now initialize your application with npm as its default package manager. Remember that you will have to run the `expo init` command with the `--npm` flag everytime you want a new project to use npm as your preferred package manager.

Thanks for reading and Happy coding!!
How to not become a better developer
Published: 2021-09-23 15:20:44

---
canonical_url: https://blog.avneesh.tech/how-to-not-become-a-better-developer
---


The world has plenty of good programmers. So how can you stand out and be the worst one? 

![different](https://c.tenor.com/JxRanFvDRd8AAAAC/im-different-2chainz.gif)

So here are some points on how ***not *** to become a better developer

### Learn multiple programming languages at once
Good programmers focus only on one language and try to learn it properly. Learning one language at once helps you focus on it properly and know what exactly is going on.

### Shoot first, think later
Why think about the problem, solve it, and then type the code, when you can type gibberish again and again and pray it works the nth time?

### Watching tutorials than doing Projects
Do you know how fun it is to just watch countless tutorials on a sofa, without taking notes? 

### Stay in your cocoon 
Socializing, building networks, joining communities? NAH. Better stay in my cocoon and game all day. Just never touch social media platforms like discord, Instagram, Twitter for good use.

### Don’t Accept Feedback
Only good programmers ask others from various communities, to give feedback on what they made. This is precisely what you should avoid!

### Think you know everything
Always think you know everything and never Google a problem or try to research about it. You know it, spend 10 days on a bug instead of getting the answer in 10 minutes.

### Don't contribute to open source
Why contribute to the open-source projects and have a look at how their code? Just look at your code and follow your code practice!

### Don't document your journey
A great thing that good devs do is documenting their journey.

> Teaching is a great way to keep learning.

But this is what are we are trying not to do!


Finally,
**Don't follow me for more awesome tips and tutorials**


**Useful links -**

[Join the Byteslash Community](https://discord.gg/gnBPzpNF)

[All socials](https://avneesh-links.vercel.app/)
Eleventy: Create "View all posts in collection" link
Tags: help, eleventy
Published: 2021-09-23 15:20:10



I'm trying to build a site in Eleventy. The site has blog posts in two collections: A and B. When I'm reading a post in the collection A, I'd like to have a link after the post content that says, "View all A posts". And when I'm reading a post in collection B, I'd like to see a "View all B posts" link.

The blog posts share the same _includes template post.html. In that template, I should be able to create an if statement in nunjucks that goes something like this:

```
{% if post in collections.A %}<a href="/a">View all A posts</a>
{% elif post in collections.B %}<a href="/b">View all B posts</a>
{% endif %}
```

That code snippet doesn't work though. Any ideas?
OSD600 - Week 3 - Lab 2
Tags: open
Published: 2021-09-23 15:11:40

This week, I have an interesting lab based on project I did last week, which is a program converting .txt files to .html files. I need to review and change my partner code in order to implement a feature that supports converting .md files to .html files. Same as last week, I worked with Thanh Van.

It was hard for me at first because I work in C++ environment and my partner works in JS environment. It takes me some time to understand how his code works and how I would be going to write code in JS language. I made a small change in his structure. If the files go in is a markdown file, it will go into a separate function to handle. Also, I have a small function using expression to convert all heading 1 in the file to h1 tag in html. At first, I imported library 'marked' and use it to convert. My partner said I need to change in order to implement 1 feature for this lab only. So I went back, changed the code, cleaned it up and requested for the second pull requests.

You can take a look at the following tasks I have done on my partner's project: 
- Project Repo: https://github.com/tcvan0707/txt2html
- Issue: https://github.com/tcvan0707/txt2html/issues/2
- Pull Request: https://github.com/tcvan0707/txt2html/pull/8

In contrast, Thanh also had hard time to figure out how to write code C++. He also wanted to add a heading 1 feature to my program as well as accepting Markdown input files. I refused his first pull request because he misunderstood how each variable in my program works. We had a call for an hour to discuss how the program works. It was interesting for both of us to talk to each other nicely. I reviewed his code carefully and he did a great job on the second pull request. You can take a look at the following task he has done on my repo:
- Project Repo: https://github.com/kiennguyenchi/potato-generator
- Issue: https://github.com/kiennguyenchi/potato-generator/issues/2
- Pull Request: https://github.com/kiennguyenchi/potato-generator/pull/4

Overall, it is interesting to go over and change the code that I haven't write it from scratch. This is a difficulty to me at first and also an experience to me. Also, it is amazing that someone can be able to change my code and make it works.
using axios in nodejs
Tags: node, javascript
Published: 2021-09-23 15:06:59

<p>axios is Promise based Http Client for the browser and node.js</p>
<p>install axios into your nodejs project using below command.</p>
<code>
    npm install axios
</code>

<p>import axios using below statement.</p>

<code>
     const axios = require('axios');
</code>
<p>Below sample code to shows how to use axios. since axios returns promise object handle success and error data with then() and catch() callback functions.</p>
<code>
app.get("/yourapi", function(req, res, next) => {
    axios.get("https://replace/your/url/here")
    .then(function (response) {
        // handle success
        return res.send(response.data);
    })
    .catch(function (error) {
        // handle error
        console.log(error);
        // return res.send(error["message"]); // send response or 
        next(error); // pass error to global error handler
  })
})
</code>

<p>global error handler example. make sure you use error handler middleware at the end of entry script file(index/server.js file).</p>
<code>
    app.use(function (err, req, res, next) {
      res.status(500).send(err["message");
    })
</code>

<b>References</b>
<ul><li><a href="https://www.npmjs.com/package/axios">axios</a></li>
<li><a href="https://expressjs.com/en/guide/error-handling.html">error handler</a></li>