teleren/devto huggingface dataset:
Effects of Covid-19
Tags: healthydebate, career
Published: 2020-07-19 14:47:18

This post isn't to sound pessimistic or in the tone of doomsday like scenarios but more of an observational one collated from my experiences. With people gradually coming to terms with this pandemic being the new normal, it's also an attempt to engage with fellow developers like you to understand the mindsets, rationale, and viewpoints behind it.

Let me begin listing of the effects of the pandemic, broadly bucketed into 3 categories.

### **Ugly**
1. Many organizations simply didn't have a **[Business Continuity Plan](https://www.ibm.com/services/business-continuity/plan)** or were in no shape, or had the resources and expertise to develop one.
2. This led to inhumane pay cuts/layoffs/furloughs/no increments en masse for conglomerates with decades of industry experience and start-ups alike.
3. Even if the pandemic subsides and/or a cure is found, more of the above will be the new norm in due course of time. Additionally, it'll be cited as the reason for any & almost everything.
4. Companies eager to get back on track will resume operations on a frantic note wherein they'll have employees working long hours leading to issues like mental burnout, stress & other lifestyle disorders.
5. Military and humanitarian crises will exponentially rise if better disaster management practices are not formulated.

###  **Bad**
1. Organizations will re-think their expenditure on workspaces, leases, rents, and mortgages thus encouraging more Work from Home.
2. This will lead to severe problems for the real-estate industry due to declining revenues. Similarly, some establishments across other sectors such as travel, food, offline entertainment will be knocked offline forever.
3. Remote work as the new regular can have more occurrences of internet connectivity issues, power outages, software/hardware failures, too many meetings/calls for daily routine.
4. Thereby, work-life balance will be affected since many people tend not to adhere to a strict schedule/discipline. People in countries with strict lockdowns could start feeling isolated.
5. Economic damage across the globe has been unprecedented and may take decades to recover.

And finally like the proverbial dessert, here's the good

###  **Good**
1. Healthcare stands to be given topmost priority.
2. In crisis lie many opportunities so a multitude of ventures, start-ups & acquisitions will spring up to solve innumerable problems for the new needs of the world's population.
3. E-Commerce will boom towards newer highs since more people will now order essentials online.
4. Companies with sound principles will more likely be empathetic towards their employees to provide benefits such as remote work, flexible timings, better healthcare provisions and morale.
5. People will value blessings such as health, finances, and interpersonal relationships even more than ever before.

---

**What are some of the effects you think will this Covid pandemic have?**
How to stay DRY in redux state mapping when using reselect ?
Tags: webdev, javascript, tutorial, beginners
Published: 2020-07-19 14:34:16

So we are probably used to mapping state to props this way where the values of props are basically selectors that are defined using `createSelector` function in `reselect` library
(which is mainly used for memoizing)

```javascript

const mapStateToProps = state => ({
  itemCount: selectCartItemsCount(state),
  bagColor: selectCartColor(state),
  price: selectCartPrice(state)
});


export default connect(mapStateToProps)(MyApp);

```

The problem with this approach is we are compelled to pass in `state` as argument in every select method even though we know 
there is only 1 universal redux state

So to solve this we can 

```javascript
 import { createStructuredSelector } from 'reselect';
```

This helps us reduce our code to follows:


```javascript

const mapStateToProps = createStructuredSelector({
  itemCount: selectCartItemsCount,
  bagColor: selectCartColor,
  price: selectCartPrice
});


export default connect(mapStateToProps)(MyApp);

```

And everything else stays intact and works just fine

NOW, you might ask yourself when should we **NOT** use `createStructuredSelector` ?

Well, there is one practical case that I encountered and that is when you want to dynamically generate a `selector` based on unknown props.

I'll explain - suppose `MyApp` is rendered this way:

```javascript
<Route path='/mycart/:id' component={ MyApp } />
```

In this case Route passes down the `match` object to MyApp and if you wish to generate a selector based on the `match.params.id` then in the `mapStateToProps` function you would need the `match` props as well apart from the redux based `state`(which is universal to the whole app btw)

So the solution would be:

```javascript

const mapStateToProps = (state, ownProps) => ({
  itemCount: selectBasedOnUrl(ownProps.match.params.id)(state)
});

export default connect(mapStateToProps)(MyApp);

```

Notice however that here, the `itemCount` is not memoized. If you want to learn how to memoize it, please check out my [other post](https://dev.to/tilakmaddy/how-to-memoize-correctly-using-redux-reselect-20m7) where I explain exactly that - its super important 

Anyways I hope 🤞 you enjoyed what you read,
Don't forget to ❤️ it - I need encouragement to post ! 
And also don't hesitate to drop a comment below if you have anything to say.

Thanks for reading,
✌️
Manage ssh keys for Multiple Github accounts
Tags: github, ssh, productivity, git
Published: 2020-07-19 14:19:49

Currently, I am working for a company where they create a Github account using the company’s email id and all the repository access would be given to that Github account.
But I have a personal Github account as well and I am quite active in that too.

## Problem

Now the problem is, How to manage the SSH keys for both the GitHub accounts. Git by default takes the ~/.ssh/id_rsa(.pub) keys and we can’t add the same ssh key in both the GitHub account.

## Solution
We can manage multiple Github accounts using the ssh config file.

### **Create a new ssh key pair**
Generate a new ssh key pair using the company’s email id. 

> ssh-keygen -t rsa -b 4096 -C "prasanna@his-company.com"

In the prompt, specify a different file name. 
Eg: /User/prasanna/.ssh/id_rsa_my_company

### **Add the ssh key to the ssh-agent**
Now add the generated key using the ssh-add command.

> ssh-add ~/.ssh/id_rsa_my_company
> Output:
> Identity added: /Users/prasanna/.ssh/id_rsa_my_company (prasanna@his-company.com)

Add the id_rsa_my_company.pub key to your company Github account.
> cat ~/.ssh/id_rsa_my_company.pub|pbcopy

### **Update the hosts in the ssh config file**
Update the config file (~/.ssh/config) with these values and it should have entry to for you personal Github account,
> ###### My Company Github Account
> Host github-mycompany.com
> HostName github.com
> User git
> IdentityFile ~/.ssh/id_rsa_my_company
> ###### Personal Github Account
> Host github.com
> HostName github.com
> User git
> IdentityFile ~/.ssh/id_rsa

### **Clone your personal Github and company Github projects**
You can clone your personal private projects using the command,

> git clone git@github.com:your-github-account/private-repo.git

You can clone your company ‘s private projects using the command,
> git clone git@github-mycompany.com:company-acc/private.git

That’s it. Hope it will be useful. Let me know If you have any questions in the comment section.
The Great Lexical Scope of JS?
Tags: javascript, lexical, scope, hard
Published: 2020-07-19 11:10:44

Have you ever wondered why sometimes, `this` was undefined, while you thought it was there and that sometimes your functions work in weird ways. Well, then you're at the right spot. We'll be discussing **Lexical Scopes**, in this post.

- - -

## What is Lexical Scope?

Javascript is basically a compiled language, The code you write is first compiled to AST then to a efficient binary, which is later executed by the JS Engine. All the variables and scopes are placed on their positions after declaration, So that they can be used by the engine while executing the program. All the declarations at the time of compilation are done in different scopes, For example:

```js
var call = "Mr."

const Greet = function(name){
    const greeting = "Good Morning";
    console.log(`${greeting}, ${call} ${name}`)
}

Greet("Saurav")
```

So, What is lexical scope in here! Let's break it down.

* Compiler first declares the `var call`, in global scope(No problemo).
* Compiler then, declares a `const Greet` and assigns it the func we defined, in Global scope.
* Then, Compiler goes inside the function we defined(New Scope Manager for the function), and checks(consults the global scope manager) if there is a greeting variable already defined in the upper scope(i.e, Global scope), if not, then it goes ahead and declares greeting.

  * The Compiler checks in with current Scope Manager(of function), if there is a `greeting` declaration.
  * Then, Compiler checks for call, but 

    The functions Scope Manager says: I don't know bruh, Who's this? Ask big brother global Scope Manager!

    Compiler asks global Scope manager, it replies with **Yes!, I've call already declared**.

    This is lexing, The `call` declaration is available to function's Scope Manager through `lexical scope`.
  * **Lexical Scope** is nothing too complicated(assume it!), It is just the Scope that is determined during the compilation and is available from outer to inner scopes. e.g, Global scope is available to every scope, so on and so forth.
* Compiler then comes to the `Greet("Saurav")` statement. Checks Greet, it's declared and Compilers compiles the code to AST.

**Execution takes place after this.**

There are more steps, but let's not discuss them now. I think you get what lexical scope is?

If still, You've got some doubts? Let's discuss them, Tweet [@sauravkhdoolia](https://twitter.com/sauravkhdoolia)

### Resources: 

- [Scopes](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch1.md)

---

This post first appeared on [The Vision Project](https://sauravk.vision)
If You're reading this post on The Vision project. Please report any issues [here](https://github.com/sauravkhdoolia/sauravk.vision/issues/new)
Your flexbox is actually not centered
Tags: css, webdev
Published: 2020-07-19 14:18:11

Isn't Flexbox amazing? All these years where we had to fight with floats, try `vertical-align: middle` only to get disappointed it doesn't work and so many other hacks, then flexbox comes and saves the day.

![](https://i.redd.it/i6st3acsfqk21.jpg)

Centering an element is as simple as

```css
.hey {
  display: flex;
  align-items: center;
  justify-content: center;
}
```

Awesome! What a shame if someone would come and try to mess this up right now.

![](https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTqHWyHJH2pIBq6-6I_qSbbQUbAXlM6CzjwBw&usqp=CAU)

Have you ever realized that when you have two divs (or other elements) below each other, they stick together pixel perfect? But if you have two lines of text, there is actually a little space between them to make it readable. As an example of this, just take a look at this very text right now.

So what's the issue? Well, have a look at this:

{% codesandbox your-flexbox-is-not-centered-23177 %}

Notice how the left box is not centered correctly. It uses flexbox and has both align-items and justify-content set to center, so what's going on?

If you highlight the text element using the devtools you will see how it has extra space above and below, without any margins or padding. This is line-height. The line-height is usually around 1.5 on most websites, which means it's 1.5 times the font-size. Naturally, this will ruin the vertical spacing due to the additional space the text element now takes up.

The second element in the example has the spacing fixed by explicitly setting the line-height to 1 for this text element.

Now given all of this you might have already realized that this has actually nothing to do with flexbox.

You get the same issues if the box just had `padding: 10px` for example.
It's also not limited to the combination of image + text. You will run into these alignment issues whenever two pieces of text (in a box, like in the example) have different font sizes. This is because, as shown above, line-height is calculated based on the font-size.

An example for this are the listings on [dev.to](https://dev.to) on the right side:

![dev.to example](https://dev-to-uploads.s3.amazonaws.com/i/fd2403t9by41ixunf55q.png)

But you can probably find similar examples on most websites out there.

Now, above we fixed the example by explicitly setting the line-height to 1. The example was super basic, so this worked just fine, but the technique will fall short once you deal with multi-line text. It would become unreadable.

There are some methods out there that add a negative top margin to the element to make it [behave like leading in typography](https://css-tricks.com/how-to-tame-line-height-in-css/#getting-css-to-treat-line-height-like-leading).

On top of that, there is actually a proposal to standardize this in CSS. Take a look [here](https://github.com/w3c/csswg-drafts/issues/3240).

It surprises me that with all the advancements in web development we have seen over the years, this hasn't made it in yet.
REHeader - GitHub Profile README Header Image Generator
Published: 2020-07-19 14:11:46

Project URL: https://reheader.glitch.me
Star it on GitHub: https://github.com/khalby786/reheader/
# REHeader

![](https://github.com/khalby786/khalby786/raw/master/header.png?raw=true)

Generate beautiful header images for your GitHub profile READMEs.

GitHub now allows us to add READMEs to our profile describing ourselves but what if we need a header image in the README with your name and a small greeting? This generator comes to your rescue and saves the day (well, not a big thing and not very useful and it doesn't really save the day :shrug:)

![GitHub Profile README Header Image Generator - you shouldn't be seeing this text](https://cdn.glitch.com/0a4f672e-7d5c-4254-8f5a-847c2924bdf6%2Fheader-image-readme-gen.gif?v=1594991782151)

Once you generate the image and upload it somewhere (like a CDN), you can use it in your README like this:

![Another image which is a use case of this generator - again you shouldn't be seeing this](https://cdn.glitch.com/0a4f672e-7d5c-4254-8f5a-847c2924bdf6%2FScreen%20Shot%202020-07-17%20at%205.19.18%20PM.png?v=1594991994508)

### Instructions for use

1. Go to https://reheader.glitch.me, scroll all the way down and log in with GitHub.

2. Once you login with GitHub, you'll be redirected to a page where you are able to customise your own header image.

3. Then, click on `Generate Image` and the generated image will appear. Below the image, you'll see a yellow-coloured box :sweat_smile: that says 'Add to `username`/`username`'. For this to work, you will have to create a repo and give it the name of your username. (Like `khalby786/khalby786`).

4. Click on 'Add to `username`/`username`'. Then navigate towards your profile README repo and you will see a new file created with the name of `header.png`.

5. Now to use it in your README! You *could* use `/header.png` in the README file (with Markdown) and it will work just fine **in the preview of the README in the repo page** but when you navigate back to your user page at `https://github.com/username`, you'll see a weird image which does not look anything like the header you have designed.

    ![Some image](https://cdn.glitch.com/9b54f632-359e-4267-ab89-59a5c68b6aa8%2FScreen%20Shot%202020-07-19%20at%202.55.24%20PM.png?v=1595156292938)
  
    It turns out to be some other image under the same file name and route.
    
    To solve this, navigate to the `header.png` file in the repo that you've stored it. Then, right click on the image and copy its URL. Then go back to your README and add in the URL you just copied as the source of the header image. 
    
    *At least you don't need to worry about hosting now!*

Note that `username` is your GitHub username.

---

This is literally something I created in 1 day with Vue, so you're sure to find a lot of bugs and bad code (and code practises), make sure to report them [here](https://github.com/khalby786/gh-readme-header-image-gen/issues). I also aim to make the code better and also more readable.

New features are being added whenever I can, make sure to check 'em out.
Laravel Bits [0 => "Middleware"]
Tags: laravel, beginners, todayilearned, php
Published: 2020-07-19 14:09:54

Middleware makes the process of filtering HTTP requests for applications more convenient. In the case that a user is not authenticated, middleware redirects the user to the login screen. Where a user is authenticated, the middleware gives the request more access to the application.

<a href="https://youtu.be/f6bMe9_dVlg"><img src="https://res.cloudinary.com/dbksbmf4b/image/upload/v1595170374/Screenshot_2020-07-19_at_15.52.48_wz5uup.png"></a>
<figcaption>
<i>Click image to watch video</i>
</figcaption>


<a rhef="" src="https://laravel.com/docs/7.x/middleware">Laravel, Middleware</a>
Quick one liner to purge docker containers and images
Tags: docker, containers, images, delete
Published: 2020-07-19 13:59:01

Does what it says on the tin. I'm using [fish](https://fishshell.com/) so my one liner looks like this:

```
docker rm (docker ps -a -q) && docker rmi -f (docker image ls -q)
```

If you're running a more standard shell like bash, you'll probably need some `$`s in there:

```
docker rm $(docker ps -a -q) && docker rmi -f $(docker image ls -q)
```

It's pretty simple - `docker rm` removes containers. It accepts a list of container Ids. `docker ps -a -q` lists all containers in quiet mode - so just the container Ids.

The logic is the same for removing images - I've thrown in the `f` force flag for good measure, and I've used `&&` to concatenate two commands onto one line.

This will error out if you have no containers. Be warned.
Help needed: Open source react component
Tags: help, contributorswanted, react, opensource
Published: 2020-07-19 10:22:50

Hi fellow DEVs 👋,
A while ago, I created a basic react component, a wrapper for some multi step flows. This was my first ever react component that I wrote in an effort to learn and understand react better.

## TL;DR
I ~~want~~ need some help with the functionality where user is allowed to call some custom method/actions (synchronous or asynchronous) before proceeding to the next step, and go to next step/show error based on the user method response.

## What is the component about?
It is a dynamic, multi-step progress indicator with navigation buttons to move between steps. Optionally you could have some basic validation when proceeding to the next step.
It has nice little animations and ZERO dependencies (till now).
Excited? [Go check it out](https://www.npmjs.com/package/react-step-progress)

## What I need help with?
I wanted to allow people to call their own custom methods, either synchronous or asynchronous, before proceeding to the next step. Right now, I have an optional `prop` to allow for custom validation to be performed, but that is very naive as the validation function must have a return type of boolean, and no error message is shown.
Ideally, I would like someone to help me achieve this but if you'd like to raise a PR that's fine too 😄, I can't seem to plan the whole thing very well

## How to get started?
I already have an [issue](https://github.com/saini-g/react-step-progress/issues/5) in the Github repo.
Hit me up in the DEV chat or Discord(username: saini-g#3132) if you want.

## How else can I help?
Any suggestions, PRs, ideas, help with documentation would also be nice.

Thanks.
Setup Prometheus Monitoring 🔥 in Kubernetes using Prometheus Operator
Tags: prometheus, devops, kubernetes, tutorial
Published: 2020-07-19 13:57:54

Learn how to setup Prometheus and Grafana to monitor your Kubernetes cluster.

In general there are **3 ways to do the setup**:
1. Create all the configuration files yourself 👩🏻‍💻 
2. Using Prometheus Operator 😎
3. Using Helm chart to deploy the Prometheus Operator 🚀

###1. DIY 👩🏻‍💻###
The first option includes creating all the configuration files by yourself, like Prometheus StatefulSet, Alertmanager, Grafana, all the ConfigMaps and Secrets. And then executing them in the right order. I think this way is pretty inefficient, it's a lot of effort. You need to find a good step-by-step guide and hope that each step works, which usually is not the case. 😉

###2. Prometheus Operator 😎###
In this option you would go and find an operator for Prometheus and deploy it in the cluster using the configuration files of the operator. It is more efficient.

Generally, think of an operator as a manager of all Prometheus individual components that you create. Operator will keep an eye and manage the combination of StatefulSet and Deployments and all the other stuff that comes with Prometheus deployment as 1 unit, so that you don’t have to manually manage those separate parts. 🙉

###3. Helm chart to deploy Prometheus Operator 🚀###
I think this way is the most efficient. Prometheus Operator has a Helm chart that is maintained by the Helm community. You can use this Helm chart to deploy the operator.
**So, Helm will do the initial setup. Operator will then manage the running Prometheus setup**

In the demo I show you the third way. We will easily deploy Prometheus and Grafana using Helm and I walk you through the different components, which were created. So that you have a **good understanding 💡 of what they are and what they do**. 

---
This is the first part of the demo (Setup). In the second part we will actually configure Prometheus to expose our own /metrics endpoint and configure Prometheus to scrape it. 🤓

If you missed the theoretical part, where I explain how Prometheus works and its architecture, you can check it out here: **[Prometheus Monitoring explained](https://youtu.be/h4Sl21AKiDg)**

Watch the demo video here 🙌🏼
{% youtube QoDqxm7ybLc %}

-----------------
► Get **30% off** - with this code: UDEMY_NANA_OCT2020: [Udemy course here](https://bit.ly/2IkzZez)
► **Kubernetes 101** [Compact and easy-to-read ebook bundle 🚀](https://www.techworld-with-nana.com/e-books) 
It's a handy way to quickly look something up or refresh your knowledge at work and use it as your cheatsheet  😎


**Like, share and follow me** 😍 for more content:
- [Private FB group](https://www.facebook.com/groups/techworldwithnana)
- [Twitter](https://twitter.com/Njuchi_)
- [YouTube](https://www.youtube.com/channel/UCdngmbVKX1Tgre699-XLlUA?sub_confirmation=1)
- [Instagram](https://www.instagram.com/techworld_with_nana/)
- [LinkedIn](linkedin.com/in/nana-janashia)
3 Easy Steps to deploy your Node App
Tags: github, node, devops
Published: 2020-07-19 13:50:50

Your can refer the below link of the Github Gist for whole description.

[Deploy your Node app](https://gist.github.com/talk2sohail/3105a4847aa42b9882d18817b031c06f)

Please feel free to comment here or you can reply me there on my gist for any further assistance.

[Follow me on Twitter!](https://mobile.twitter.com/home)