teleren/devto huggingface dataset:
Why can't you land a remote job?
Tags: career, job, interview, remote
Published: 2021-02-23 02:58:19

You're a software engineer with strong technical skills and years of industry experience. But job application after job application, you just aren't landing the job. Frustrating, right? You're perfectly qualified for your dream remote job, so why aren't you getting hired?

### Here's what you're doing wrong.
You're an outstanding candidate, but the employers aren't seeing it. This is the problem. You could invent the best product of all time, but if you don't market it well, nobody will buy it. This is the same with your remote job search. *You are the product*. And employers aren't buying. So it's time to learn how to sell yourself better!

### Building your personal brand 🔥
What makes your product (you!) unique? How can you stand out from the crowd? There are people everywhere with your technical skills and experience. You need to figure out what makes you different and use it to your advantage. Are you a master problem-solver? Are you a kickass communicator? Are you exceptionally passionate and dedicated to your work?

Even if you can't think of something right now, there IS something that makes you special. And if you learn how to show this during the remote application process, you WILL get hired.

### Next steps:
Outstanding developers like you deserve better job opportunities. That's why we created the Arc Elevate program. We want to guide you in building your personal brand and taking your candidate profile to the next level. Our goal is to help you get noticed by employers and land your dream remote job!

**Grab a free spot in our new program if you want to:**
🔎 Find what makes you special and learn how to sell it
✨ Revamp your candidate profile
🧑‍💻 Get mentored by devs at notable companies
🚀 Dramatically increase your employability
🤝 Meet employers and land a remote job!

**Sign up to kick-off your dream remote career today:** [https://arc.dev/w/elevate](https://arc.dev/w/elevate)

*Note: Arc Elevate is currently only open to applicants in Latin America, but you can sign up for future updates on your region.*
Git push/pull de forma prática
Tags: git, programming, productivity
Published: 2021-02-23 02:38:33

Olá, Devs! Gostaria de compartilhar uma forma prática que encontrei para trabalhar com nomes de branches longos. Desde que a grande maioria das vezes o branch remoto a ser atualizado é o mesmo branch local, é possível substituir o nome do branch por `HEAD`, como `git push origin HEAD`, por exemplo. Mas eu queria algo que se resumisse à apenas um comando. Então, criei um alias para alvejar sempre o mesmo branch e evitar ter que escrever qualquer coisa a mais. Criei um alias nomeado `pushb` para atualizar o mesmo branch remoto e outro de nome `pullb` (não tão usado) para receber as atualizações.

alias.pushb - `!git push origin $(git branch --show-current)`
alias.pullb - `!git pull origin $(git branch --show-current)`

Se, por exemplo, o nome do branch local é `feature/validate-payment-method-schema`, ao invés de ter que digitar:

`git push origin feature/validate-payment-method-schema`

Ou

`git push origin HEAD`

Basta digitar:

`git pushb`

Bem mais simples, não? E o comando pode ser usado com qualquer outra opção do git, como `-f`, por exemplo.

Espero que essa dica possa ajudar outros tanto quanto está me ajudando :)
Fixed sidebar - scrollable content
Tags: tailwindcss, css, webdev
Published: 2021-02-23 02:35:17

A simple Tailwind layout to create a sticky sidebar and scrollable content next to it.
```
<div class="flex">
    <aside class="h-screen sticky top-0">
        // Fixed Sidebar
    </aside>

    <main>
        // Content
    </main>
</div>
```
Calcular los días entre dos fechas ingresadas Javascript
Tags: javascript, date, dev
Published: 2021-02-23 02:25:59

Me acabo de topar con este caso, tengo que calcular los días que existen entre dos fechas ingresadas por el usuario a través de un input.

Después de buscar tanto encontré la siguiente solución, la adapte y realice algunas validaciones, funciono para mí así que se las comparto.
```html     
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calcular los días entre dos fechas</title>
</head>
<body>
    <label>Fecha de inicio</label>
    <input type="date" id="timeStart" class="form-control" oninput="calculardiasDiscount()">
    <label>Fecha fin</label>
    <input type="date" id="timeEnd" class="form-control" oninput="calculardiasDiscount()">
    <label>Días</label>
    <input class="form-control" id="daysDiscount">
</body>
</html>                                                                                 
```
y en el Javascript colocamos lo siguiente
```js
<script>
function calculardiasDiscount() {
        var timeStart = new Date(document.getElementById("timeStart").value);
        var timeEnd = new Date(document.getElementById("timeEnd").value);
        var actualDate = new Date();
        if (timeEnd > timeStart)
        {
            var diff = timeEnd.getTime() - timeStart.getTime();
            document.getElementById("daysDiscount").value = Math.round(diff / (1000 * 60 * 60 * 24));
        }
        else if (timeEnd != null && timeEnd < timeStart) {
            alert("La fecha final de la promoción debe ser mayor a la fecha inicial");
            document.getElementById("daysDiscount").value = 0;
        }
    }
</script>
```
Esto funcionó para mí, si tiene alguna sugerencia pueden dejarla en los comentarios para que las demás personas puedan verlo.

Nos vemos en [Twitter](https://twitter.com/veronicaguamann) e [Instagram](https://www.instagram.com/veronicaguamann/) ;)
Stop overcomplicating your React components
Tags: react, javascript
Published: 2021-02-23 02:07:19

For a considerable time, I worked developing components that had unnecessary props and logic. Today I want to show you how to develop flexible and maintainable components so you don’t keep doing the same mistakes I did.
&nbsp;
## The problem

Take this Card as an example, what’s wrong with this?

{% gist https://gist.github.com/gsdeveloper/a4aa0f353b0266fe76bf0b534510b357 %}
 
&nbsp;
#### A lot of props, making the API complex
There’s a lot of props. So many that probably someone using this component will never use some of it.

#### It’s hard to maintain
For every new feature, another prop has to be passed and more logic has to be done.

#### Not flexible
Imagine if you want to change the position of any component, again you have to include one more prop and add more logic. You basically has to create a prop for every use case.
&nbsp;
## The solution is…

Composition. Breaking your components into multiple elements will make it way simpler.
{% gist https://gist.github.com/gsdeveloper/5249d5c00751fb42d7d86de3005f0099 %}
&nbsp;
#### It's flexible, customizable and maintainable
Want to change the order to have a subhead after the thumbnail? Change it. Need to customize any component inside card? Just insert a className and style it. The thing is: here you build your component the way you want, not the way the API forced you to.

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

&nbsp;
### When having that much of props is actually a good option
#### 1. You’re building a component to display some fetched data.
Spreading a object will make it's keys and values to be used as props. It's practical.
{% gist https://gist.github.com/gsdeveloper/8740b562d0bd1b76a45c65560f98be8a %}                                       
                   
#### 2. You don’t need any flexibility or customization
There’s no significant advantage to take from composition, so it’s fine to just use props in this situation.
&nbsp;

### Conclusion
When you need flexibility in your components, take advantage of component composition. Break your component into multiple components and it will be a lot simpler to work with.
MongoDB Pictures 
Tags: mongodb, react, node, help
Published: 2021-02-23 02:02:46

How do you use pictures that are in MongoDB? I’m using a CMS “Strapi” and there’s pictures that are being uploaded, but I don’t know how to access them. I have collections “fish” and “coral”, but Strapi created a collection “upload_image” but, how do I access the pictures in MongoDB, to loop through?
I'll review your code
Tags: help, beginners, javascript, go
Published: 2021-02-22 20:52:43

---
title: I'll review your code
published: true
tags: help, beginners, javascript, golang
//cover_image: https://direct_url_to_image.jpg
canonical_url: https://jordanfinners.dev/blogs/i-ll-review-your-code
---

I've seen quite a few posts about roasting/reviewing landing pages and websites recently.
{% twitter 1362705389364645890 %}
{% twitter 1235967958045908997 %}

### Which got me thinking, why not the code?! 🤔

I know from personal experience on side projects or things I'm playing around with I miss a pull request, peer review from my colleagues that I get at work.
I also think it's one of the best ways to improve as a developer, both reviewing others code and having my code reviewed.

## With that said, let me review your code!
I can do reviews in these languages: JavaScript, HTML, Golang, Python, SQL

I will be open this week, to send me your repositories and I will review the code, confidentially of course.
Either comment the GitHub repository link below, or DM me on [Twitter](https://twitter.com/JordanFinners).
If your repository is private, you'll need to [add me as a contributor](https://docs.github.com/en/github/setting-up-and-managing-your-github-user-account/inviting-collaborators-to-a-personal-repository#:~:text=1%20Ask%20for%20the%20username%20of%20the%20person,they%20will%20have%20collaborator%20access%20to%20your%20repository.), my GitHub profile is [here](https://github.com/jordanfinners) and I'll do my best to review as many as possible!
Take Control of Mouse and Touch Events to Create Your Own Gestures
Tags: webdev, javascript, ui, ux
Published: 2021-02-23 00:40:07

---
title: Take Control of Mouse and Touch Events to Create Your Own Gestures
published: true
description: How to create an API for -- tap, press, flick, swipe, scroll, pinch, spread, pan, rotate, and more.
tags: webdev, javascript, ui, ux
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47euse4snp90hxdj4e09.png
---
Developers looking for an easy way to listen for gestures will find no support from the browser. Gestures must be built from the underlying pointer events and mouse events APIs. Further complicating matters, those APIs are not symmetrical. 

Handling the raw mouse and touch events is the key to creating a gesture API.

These are the steps a developer will need to take to recognize gestures:

1. Capture the starting and ending position of each finger or mouse pointer.
2. Compute the distance and direction of each pointer’s movement.
3. Calculate the geometric relationship between multiple pointers.
4. Determine a pointer’s speed using the system clock.
5. Check whether any special touch zones should be applied.
6. Suppress any automatic browser-generated actions.
7. Discard any unwanted raw events.

The algebra for each of these is in this [full length article](https://medium.com/javascript-fanboi/2021-036-take-control-of-mouse-and-touch-events-e63c9a5a85a7).

Key points:
* Simple gestures like tap, press, and doubletap can be recognized from a single stationary pointer.
* Gestures like horizontalflick and verticalflick can be distinguished from swipeleft/swiperight and scrollup/scrolldown by monitoring the system clock.
* Two finger-gestures can recognize a change in their relative distance as a pinch or spread.
* Two fingers moving in tandem can be recognized as horizontalpan, verticalpan, or a twofingertap.
* Two fingers with a change in the sweep angle can be recognized as a clockwise or counterclockwise gesture.

For demonstration purposes, many of these have been implemented in the gesture API used by the [Simply Earth](https://simply.earth/?utm_term=devto) website. When viewed on the desktop, the mouse plus Ctrl, Alt, Shift combinations are used to initiate gestures. When viewed on mobile devices, two-fingers are used to initiate all of the same gestures.
Coming Soon Page
Tags: codenewbie, html, css, javascript
Published: 2021-02-23 00:15:25

Its been a while since I commit project frequently as I used to every week before, so I decided I am starting that again from tonight till I achieved my goal which is to master JavaScript very well and be able to apply all I know into one to build something amazing. I choose to build a coming soon page using HTML, CSS and JavaScript which was amazing from the beginning to the end. I think I'll improve the design later in the future or soon, want to add some more features to the countdown and also want to make it launch the new portfolio website I'm working on when the countdown is over. Here is the link to the codepen below, please like and share to encourage me.
{% codepen https://codepen.io/mercyharbo/pen/zYoEVxo %}
How to create and use environment variables in Nextjs?
Tags: nextjs
Published: 2021-02-23 00:00:00

---
  title: How to create and use environment variables in Nextjs?
  published: true
  tags: Nextjs
  date: Tue Feb 23 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/create-and-use-environment-variables-in-nextjs
  cover_image: https://melvingeorge.me/_next/static/images/main-3391336a5131d227171399ea18a3b45b.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/create-and-use-environment-variables-in-nextjs)
  
### Creating an environment variable in Nextjs

To create environment variables in Nextjs, you need to make a `.env` file in the root of your Next.js project folder.

For example, let's say I want to make an environment variable called `SERVER_ID` with a value of `HELLOWORLD123`.

So to do that you need to create a `.env` at the root of the Nextjs project and put the key and value separated by an equal sign (`=`).

It will look like this,

- `ENVIRONEMNT_VARIABLE=VALUE`

So from our example, the `.env` file will look like this,

**.env file**

```bash
SERVER_ID=HELLOWORLD123;
```

### Using an environment variable in Nextjs

After we have successfully defined our environment variables in the `.env` file, we can use the environment variable by calling the `process.env` inbuilt API and then using the dot operator (`.`) followed by the environment variable name.

So in our case, to call the `SERVER_ID` environment variable, we can use it like this,

```js
const serverId = process.env.SERVER_ID;

console.log(serverID); // HELLOWORLD123
```

See a working demo of the above code in [Codesandbox](https://codesandbox.io/s/create-and-use-environment-variable-in-nextjs-uhfos?file=/pages/index.js).

### NOTE: This will work only in a Nodejs environment (or a Nodejs context), so talking from the context of Nextjs this will work on server-side parts including the`getStaticProps`, `getStaticPaths`and`getServerSideProps` functions, and all other parts that are not related to browsers. We will talk about using environment variables in the browser in an upcoming blog post.

### Feel free to share if you found this useful 😃.

---
Code coverage percentage is overrated
Tags: testing
Published: 2021-02-23 11:44:16

---
title: Code coverage percentage is overrated
published: true
date: 2021-02-23 00:00:00 UTC
tags: testing
canonical_url: https://jhall.io/archive/2021/02/23/code-coverage-percentage-is-overrated/
---

“Percent code coverage” seems to get a lot of attention. A common question, anywhere programmers congregate, seems to be “What’s the ideal test coverage percentage?”

Some say 80%. Some “purists” say 100%.

What’s the right answer?

Well, what do these numbers represent? Typically (depending on the exact language/tooling you’re using) it represents the percentage of lines, conditional branches, or statements executed during the execution of a test suite. In theory, proponents say, 100% test coverage would mean that you’ve tested 100% of possible execution paths.

However, reality falls short of this theory. Here are several reasons why:

1. It’s easy to execute code in a test, that isn’t actually tested. This is in fact easy to do by accident.
2. In some languages, there are often bits of code that are entirely unreachable. This means you may see a sub-100% report that actually reflects 100% of reachable code.
3. Some will argue this is a stretch, but on a modern computer and operating system, no program executes in a completely deterministic way, meaning that no percentage of test coverage can account for all possible execution scenarios. Even the simplest “Hello world”, without any conditional logic, depends on the OS scheduler, and must wait for I/O before displaying its greeting. As such, on a multitasking OS, no two runs of “Hello world” will behave exactly the same (in particular with regard to execution time).

These caveats aside, even if you were able to achive 100% coverage, what value would it provide?

Would this number ensure that our code is ready to ship?

Would it help us find broken code if our tests ever fail?

In a word: No. 100% test coverage, by itself, isn’t valuable. It’s overrated.
How to Run Podman on Windows Subsystem for Linux (WSL2) Ubuntu 20.04
Tags: linux, windows, podman, ubuntu
Published: 2021-02-22 23:21:55

Visit https://podman.io
Click on “Get Started”
Scroll Down until you see "Installing Podman" 
Click on "Installation Instructions" 
Scroll down until you see Windows Subsystems for Linux (WSL) 2.0; Click on:
-	How to run Podman on Windows with WSL2
-	Here is the link: https://www.redhat.com/sysadmin/podman-windows-wsl2

Below where you see: “Add the Podman PPA and Install Podman”, copy and paste the entire code/command into your Ubuntu terminal. The code/command is below if you want to get it from this post:

. /etc/os-release
sudo sh -c "echo 'deb http://download.opensuse.org/repositories/devel:/kubic:/libcontainers:/stable/x${NAME}_${VERSION_ID}/ /' > /etc/apt/sources.list.d/devel:kubic:libcontainers:stable.list"
wget -nv https://download.opensuse.org/repositories/devel:kubic:libcontainers:stable/x${NAME}_${VERSION_ID}/Release.key -O Release.key
sudo apt-key add - < Release.key
sudo apt-get update -qq
sudo apt-get -qq -y install podman
sudo mkdir -p /etc/containers
echo -e "[registries.search]\nregistries = ['docker.io', 'quay.io']" | sudo tee /etc/containers/registries.conf

Use the youtube link below to help you configure your /usr/share/containers.conf file

Youtube Link: https://youtu.be/iOxILJIYsuY

You should follow the information first before you watch the video. You should only watch the video to gain a better understanding of how things work. The codes or commands in this post is more recent and updated as compared to the video.
The video will show you how to access your /usr/share/containers/containers.conf file

You must first uncomment and configure the cgroup_manager line from "systemd" to "cgroupfs"
After you do that, then uncomment: events_logger = "journald" and replace "journald" with the word "file"
So, when you are done, it will look like this: events_logger = "file"

Save and exit the file using your favorite text editor. You can use the nano editor if you’d like.
Like so: cd /usr/share/containers
Sudo nano containers.conf

You can use the Visual Studio Code editor instead of the built-in Ubuntu nano text editor if you had already link the Visual Studio Code editor to your Remote WSL2 Ubuntu 20.04 distro you downloaded from the Microsoft Store.
Binary search algorithm illustration
Tags: algorithms, data, cpp
Published: 2021-02-22 23:17:08

> "A picture is worth a thousand words"

In order to explain to a friend how **Binary search algorithm** works, I drew several pictures to show solution of a simple problem using this algorithm. Here I would like to share it in this post. 

As shown in the figure below, we are given a sorted array **v** = [1, 2, 3, 4, 5, 7, 9, 10, 12, 17], and we want to find index of the target number 9. One can see easily that the answer should be 6 (suppose index of the first element is 0).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ku0opzveuhu22j1jel8.PNG)

## Binary search algorithm illustration

In **Binary search algorithm**, we define three pointers to elements: `l`, `r` and `mid`. They point respectively to the lower (left) bound index, the upper (right) bound index and the middle index of the range for searching. We calculate `mid` as `mid = l + (r-l)/2`.

Initially, we search the entire array. So `l` = 0, `r` = 9 and `mid` = 4. Here is the first step:

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

The element pointed by `mid` is 5 and it is smaller than our target number 9. So we narrow down the searching range to the right half of the array:  `l` = `mid`+1 = 5, `r` = 9 and `mid` is updated 7:

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

Now the element pointed by `mid` is 10 and it is larger than our target number 9. So we narrow down again the searching range to its left half. 

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

We repeat the same steps until the element pointed by `mid` is equal to the target number 9. See, we find out the index of number 9 in this array is 6.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfihxwdc78nlntqrxix7.PNG)


## Binary search algorithm code

Below is the c++ code for this algorithm:
```c++
/*
* Binary search 
*/
int binSearch(vector<int>& array, int target) {

    int l = 0, r = array.size()-1;
    while (l<=r)
    {
        int mid = l + (r-l)/2;
        if(array[mid] == target)
        {
            return mid;
        }
        if(array[mid] > target)
        {
            r = mid-1;
        }
        else{
            l = mid+1;
        }
    }

    return -1;
   
}
```

## Overview

I put all the steps of this example in one figure to demonstrate overview of the **Binary search algorithm**:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqm65k7cruocxc0kxcxu.png)
 

## A similar problem

Here is a similar problem which can also be solved by varying a little the **Binary search algorithm**: in a sorted array with repeated elements, we would like to find index of the first occurrence of the target number. One can think of the solution. I will present the solution using figures in my next post. 

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