teleren/devto huggingface dataset:
Bright Side Of Coronavirus!
Published: 2020-03-22 09:46:47

“In the middle of difficulty lies opportunity.” ,said a wise man

Is there a bright side of the Coronavirus ? 

Absolutely there is and I'm going to tell you how, but first let me fly around the world in seconds, shall we?
I am in Poland currently, the situation is like almost all European countries, everyone is being quarantined and walking for minutes to buy groceries , or got to the pharmacy or even walk your dog is under supervision, police is everywhere and ambulance sirens screaming day in night; let us jump to Moscow, Russia where my 8 years old son lives with his mother, the situation there is not pleasant like anywhere else in the world ; let us cross the sea and go to the land of Pharaohs Egypt where my parents live , schools universities theaters and museums are shut ; cafes and restaurants don't work and people are obliged to stay at home for 14 days. Churches and other religious houses are also shut, so no weddings and no funerals.
So you see, life is almost frozen, and one has the luxury of liberty to hang out or to go for shopping or whatever any time she/he wants, but in fact I have a different point of view and I think you would agree with me as you might be a developer, tech nerd and a gamer liked myself.
                        
                          /////////////////////////
                         ////Productivity Time////  
                        /////////////////////////

On March 16th, I became 37 years old [ white hair is popping-out now :)] and my girlfriend presented to me two great books which I need to finish as quickly as I can, one about HTML and CSS and the other about JavaScript and jQuery. You see if I was working at the the office, I wouldn't have too much time to sit and read and practice creating web sites and the like, but rather i would waste the time of getting dressed, going out and walking , I mean transportation time is cut now, and I have more time even if i am working from home, but I can have more time for myself and for the thing that I want to excel in [ web design and development] and I know this might take years to achieve, but things happen so fast now and I am quite confident that things that took years in the past, take months today.

Therefore, Coronavirus has a bright side : Be Home and increase your productivity, read more, practice more, learn more and even spend time with your family and you loved ones more, right? 

You can play Yoga or meditate, you can listen to music while enjoying a good book, or you can learn how to draw or to paint for instance, anything that you did not have the time to do before, now you've got the chance to do it.   

Keep Safe and Happy Coding 


And don't forget , “If a window of opportunity appears, don't pull down the shade.” said the same wise man :)
Creating block diagrams from docker-compose files
Tags: devops, docker, webdev, architecture
Published: 2020-03-22 08:56:38

A docker-compose file contains the definition of all the services that needs to run in harmony to successfully deploy an app stack.

When services and their interactions are defined clearly in a compose file manually charting a block diagram to list those services and their interaction is redundant, isn't it ? that was the thought I had when I needed to chart a block diagram for documenting my architecture.

A quick search using "tool to convert a docker compose file to a block diagram" yielded this awesome repo https://github.com/pmsipilot/docker-compose-viz

The code in this repo will help us to chart a block diagram from a docker compose file.
 
<h5>Lets create one!</h5>

* Sample docker-compose of a simple SaaS stack
{% gist https://gist.github.com/krishnakummar/bcfa822f18e9a6d8610395da2a5dfb97 %}


* Command to execute
<pre>
docker run 
--rm -it \
--name dcv \ 
-v /home/user/blog:/input pmsipilot/docker-compose-viz \
render -m image \
--force docker-compose.yml \
--output-file=topology.png \
--no-volumes \
--no-ports \
--no-networks
</pre>

* Ouptput

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

* Command - With port numbers

<pre>
docker run 
--rm -it \
--name dcv \ 
-v /home/user/blog:/input pmsipilot/docker-compose-viz \
render -m image \
--force docker-compose.yml \
--output-file=topology.png \
--no-volumes \
--no-networks
</pre>
* Ouptput - with ports
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ars9ca3tzm56qx8cafob.png)


* Command - With volumes

<pre>
docker run 
--rm -it \
--name dcv \ 
-v /home/user/blog:/input pmsipilot/docker-compose-viz \
render -m image \
--force docker-compose.yml \
--output-file=topology.png \
--no-ports \
--no-networks
</pre>
* Ouptput - with volumes
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/88z7dvfa4vzcy538k6ac.png)
To fetch or not to fetch? That should be an option.
Tags: javascript
Published: 2020-03-22 08:48:26

Here's a use case which is part of many UX designs.

**Use case**: Cancel a download.

**Use case description**: The title of this use case is simply an analogy for a process which uses [fetch] (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) and a process which can be cancelled using the [AbortController] (https://developer.mozilla.org/en-US/docs/Web/API/AbortController).

Let us define the abort controller
> The AbortController interface represents a controller object that allows you to abort one or more Web requests as and when desired. You can create a new AbortController object using the AbortController. ... Communicating with a DOM request is done using an AbortSignal object.

And a code example which can be copied into the console and executed.
```
// declare the variables and a dummy URI
let controller, signal, url = "https://raw.githubusercontent.com/BuzzFeedNews/nics-firearm-background-checks/master/data/nics-firearm-background-checks.csv";

// initialise the abort controller and store a signal
controller = new AbortController();
signal = controller.signal;

// a form upload function
const download = async () => {
    let data, response;
    try {
      data = await fetch(url, {signal});
      response = await data.text();
      console.log(response);
    } catch(e) {
      console.log(e);
    }
}

setTimeout( () => {
    controller.abort();
}, 500);

download();

```

So there you have it. Downloads can now be cancelled 🦄
Day 10 [D&D Character Sheets]
Tags: 100daysofcode
Published: 2020-03-22 08:46:15

# Report

A small update today, I mainly developed my 'characters/new' route.

```js
// routes/characters/index.js
router.post("/new", bodyParser.json(), (req, res) => {
    // Check if the body is formed correctly
	if (
		!req.body || 
		!req.body.data || 
        // I check for longname because it's the only field
        // where I didn't define an alternative assignment.
		!req.body.data.longName
	) {
		res.statusCode = 400,
		res.json({error: "Bad Request"})
		return false
	}
	let data = req.body.data
	let abilityScoreDefault = 8
	req.context.db.models.Character.create({
		shortName: data.shortName || data.longName,
		longName: data.longName,
        // I changed some of these fields to be nullable for testing purposes
        // race and class will remain nullable while player won't be.
        // I'll have to set up authentication to grab the right user for the player field.
		race: data.raceId || null,
		class: data.classId || null,
		player: data.playerId || null,
		description: data.description || "",
		age: data.age || "",
		urlSlug: data.urlSlug || "",
		stats: {
			abilities: {
                // I should ensure that the 'abilities' key exists.
				strength: data.stats.abilities.strength || abilityScoreDefault,
				dexterity: data.stats.abilities.dexterity || abilityScoreDefault,
				constitution: data.stats.abilities.constitution || abilityScoreDefault,
				intelligence: data.stats.abilities.intelligence || abilityScoreDefault,
				wisdom: data.stats.abilities.wisdom || abilityScoreDefault,
				charisma: data.stats.abilities.charisma || abilityScoreDefault
			}
		}
	})
	.then(result => res.json(result))
});
```

# Project

{% github ApproachingApathy/100days-dnd-character-sheets %}

The First project will be an app to keep D&D character sheets.

## Stack

I'll be using Node.js and building a full-stack Express app with MongoDB.
### Requirements
#### Minimum Viable 

- [ ] Investigate automating or finding a source of info for the data in the SRD.
- [ ] Present a D&D Character Sheet
    - [ ] The sheet should display all the same info as the first page of the 5e Official sheet.
- [ ] Users should be able to log in and create player-characters.
- [ ] Users should be able to edit character sheets.
- [ ] Users should be able to organize character sheets into groups (parties/tables)
- [ ] Sheets should auto calculate basic stats like ability modifiers.
    - [ ] Support Proficiency Bonuses 

### Cake
- [ ] Extend character creation to allow the user to use any of the three common stat gen methods.
    - [ ] Point Buy
    - [ ] Standard Array
    - [ ] Roll
- [ ] Extend the character sheet to all the info in the 5e official sheet.
- [ ] Allow for image uploads for character portraits.
- [ ] Allow for extended descriptions/backstories.
    - [ ] Characters should have nice full page backstories.
    - [ ] Preferably use a markdown editor.
The elegance of bash chaining operators
Tags: bash
Published: 2020-03-22 08:41:53

I am new to bash scripting. 

In my quest to pick it up, I begin to heartily appreciate chaining operators. With the help of chaining operators, I may not need `if` conditional check in bash as often as other programming languages, i.e. Java or PHP. 

Furthermore, to my surprise, lesser `if` does not degrade the expressiveness of the script. Instead, it is more elegant and concise once I understand the quirk of it. 

Let's see what do I mean by looking at the following example.

I need to write a bash script that make sure at any instance of time there is only a maximum of 10 certain files in a directory. 

My first version of the script goes like this:

```bash
#!/bin/bash
set -u

##### Variable declaration #####

MY_DIR=~/rotateLog
MAX_FILE_COUNT=10

##### Method definition #####

_delete_oldest_file() {
    ls -1tr $MY_DIR/temp.log.* | head -1 | xargs rm -f
}

##### Main #####

while true
do
    FILE_COUNT=`ls -1tr $MY_DIR/temp.log.* | wc -l`

    if [ $FILE_COUNT -gt $MAX_FILE_COUNT ]; then
        _delete_oldest_file
    fi
done
```

Program flow is pretty straight forward, described below:
1. Check current file count in the directory
2. Remove the oldest file from directory if there is more than what is needed

`if` conditional check is always the de facto approach to tackle any sort of decision making problem. This script is okay.

Then, as I learn about chaining operators, i.e. `&&`, `||`, `;`, etc, which are used to chain commands together, I think the script could be rewritten in a more concise manner. Let's focus on `&&` for the moment being. 

`&&` is used to chain commands together, such that the next commands is run **if and only if** the preceding command exited without error (exit code of `0`).

Coupled with the fact that bash numeric comparison operators observe following behavior:

If numeric comparison is satisfied, exit code shall be `0`. Else, exit code shall be `1`. To illustrate:

```console
$ [ 1 -gt 10 ]; echo $?
1
$ [ 11 -gt 10 ]; echo $?
0
```

Therefore, the original script could be revised to:

```bash
while true
do
    FILE_COUNT=`ls -1tr $MY_DIR/temp.log.* | wc -l`

    [ $FILE_COUNT -gt $MAX_FILE_COUNT ] && _delete_oldest_file
done
```

This is especially helpful if I have a flow involving many steps. Let's consider I have a 3 steps flow such that:

1. Run `_do_A()`
2. Run `_do_B()` if `_do_A()` is successfully executed
3. Run `_do_C()` if `_do_B()` failed to execute

Without the help of chaining operators, I likely need 3 `if` checking to deliver the flow. But with the help of chaining operators:

```bash
_do_A() && _do_B() || _do_C()
```

Elegant. Isn't it? 😎 

Now, let's imagine we have a 10 steps flow. Isn't that chaining operators a life savior?
Why to use a Front end framework/library for your application
Tags: javascript, architecture
Published: 2020-03-22 08:10:13


###1. Code management
Be it a simple Todo list or a Nuclear science project you are working on, your code will get messy. You don't know where the URL came from and how it's handled after a point of time. Eventually you'll end up having **yelling WTF is happening here syndrome**. But if you are stubborn on not using a framework, use ES Modules to segregate your code module wise.⚡️[Give this amazing article a read](https://www.freecodecamp.org/news/how-to-use-es6-modules-and-why-theyre-important-a9b20b480773/)
![screaming](https://media.giphy.com/media/xUOwGfp1V1YzLeGZHO/giphy.gif)

###2. We don't know to use DOM operations
Yes. DOM operations are costly and pretty much differs from browser to browser. Manipulating and updating the DOM tree efficiently is not a piece of cake. And if your application is going to be big enough, you'll end up thinking about performance and scratch your heads.🤢

###3. Direct access to DOM
It ain't a good thing to go and touch the DOM directly. So this depends on the scale of your project. If it's a smol news site which just displays the article from a CMS, cool. It's a one time change. If it's a social network where people fight their ass off and end up having millions of comments,🤕Oh boi don't touch the DOM with bare hands.
![don-touch](https://media.giphy.com/media/3o7TKSK8Qc7qKgehRm/giphy.gif)
Because **DOM updation is costly** and only the specific DIV or a SPAN has to be updated. That's why libraries like React, Vue and so on make you create the document on their virtual DOM and they do the hard work for you using DOM diff techniques to calculate the dynamic parts of your views. At the end they too are going to query the DOM by using _document.getElementById_ and create elements with _document.createElement_. So trust a framework on this.

###4. You'll end up building your own framework.
When your application grows, it suffers from scalability. So you'll start building custom solutions for the problems and end up developing a half baked framework which might not work for the future cases coming to you.

Let's say you have a templating engine like EJS and got to put the data in a bucket store. First you'll start building a data store and then it requires a middleware rendering engine to get the data efficiently to EJS. So you'll build a rendering engine. Then the routing problem comes and so on. You'll end up investing most of your time reinventing the wheel and in building the infrastructure than the application you want to build. Picking a framework that already has solved the problem you have would be a smart choice.
![unnecessary efforts](https://media.giphy.com/media/2kZ94kR8yDKmYbHhQ1/giphy-downsized-large.gif) 
###Conclusion

So plan your architecture and the frameworks you want to use before starting building the application. If you are like if the application grows I'll use a framework, you might suffer from scaling.

**Happy hacking 🚀**
Bright Side Of Coronavirus!
Published: 2020-03-22 07:21:14

“In the middle of difficulty lies opportunity.” ,said a wise man

Is there a bright side of the Coronavirus ? 

Absolutely there is and I'm going to tell you how, but first let me take you and fly around the world for a few seconds, shall we?

I am in Poland currently, the situation is like almost all European countries, everyone is being quarantined and walking for minutes to buy groceries , or got to the pharmacy or even walk your dog is under supervision, police is everywhere and ambulance sirens screaming day in night; let us jump to Moscow, Russia where my 8 years old son lives with his mother, the situation there is not pleasant like anywhere else in the world ; let us cross the sea and go to the land of Pharaohs Egypt where my parents live , schools universities theaters and museums are shut ; cafes and restaurants don't work and people are obliged to stay at home for 14 days. Churches and other religious houses are also shut, so no weddings no funerals. 

So you see, life is almost frozen, and no one possess the luxury of liberty to hang out with friends or to go for shopping or to do whatever any time she/he wants. 

But in fact I have a different point of view and I think you would agree with me as you might be a developer, tech nerd and a gamer liked myself.
                        
                                /////////////////////////
                               ////Productivity Time////  
                              /////////////////////////

On March 16th, I turned 37  [ Yes , white hair is popping up now :)] and I received two great books as a birthday present- which I need to finish as quickly as I can - one of the books is  about HTML and CSS and the other book is about JavaScript and jQuery. You see if I was working at the the office, I wouldn't have too much time to sit and read and practice creating web sites and the like, but rather i would waste the time of getting dressed, going out and walking , I mean transportation time is cut now, and I have more time even if i am working from home, but I can have more time for myself and for the thing that I want to excel in [ web design and development] and I know this might take years to achieve, but things happen so fast now and I am quite confident that things that took years in the past, take months today.

Therefore, the COVID-19 pandemic has a bright side : Be Home and increase your productivity, read more, practice more, learn more and even spend time with your family and you loved ones more, right? 

You can play Yoga or meditate, you can listen to music while enjoying a good book, or you can learn how to draw or to paint for instance, anything that you did not have the time to do before, now you've got the chance to do it.   

Keep Safe and Happy Coding 


And don't forget , “If a window of opportunity appears, don't pull down the shade.” said the same wise man :)
Stackbit, the Game Changer
Tags: stackbit, netlify, github, sanity
Published: 2020-03-22 05:51:32

---
title: Stackbit, the Game Changer
published: true
description: You can launch a powerful and beautiful static site in just under 10 minutes and at super low-cost.
tags: Stackbit, Netlify, Github, Sanity
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/h0by35x00oeg8t9v7k90.png
---
*by the time I wrote this post, Stackbit is still at Beta.*

Have you ever thought of launching a landing page or a blog with the technology of your choice in just under 10 minutes? Since [JAMStack](https://jamstack.wtf/#meaning) is getting more popular these days, more sites are being developed this way. Building it from scratch is also not too hard. But the problem is sometimes the initialization of the project or the deployment process can spend more time than you think. Not to mention if you are someone who just want to get a little grasp of what all this about without getting your hands dirty and spending some hours just to know what are you actually trying to do. Or if you are a first-timer who needs a step-by-step guide.

Yes, this is for you if you want to get a taste of what is JAMStack site about, how does it work in general, but you don't want to build it from scratch just to know it. This is for you if you are someone who are very familiar with building JAMStack sites, having multiple and upcoming clients who requests high performance yet low-cost site. Well, this is where [Stackbit](https://www.stackbit.com/) plays the role for you.

You can call Stackbit as your smart-assistant who helps you to start your JAMStack site. It's very easy to use, you just need to prepare your [GitHub](https://www.github.com) account ([GitLab](https://gitlab.com) and [BitBucket](https://bitbucket.com) support coming soon) and a [Netlify](https://netlify.com) account. The next thing is just register yourself into Stackbit (you can even register using your GitHub account so it's more convenient) and you can start to Build a Project. You gonna choose the site theme, the site generator framework, CMS, then you can deploy it. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cnssp8ul8ti64bky4ftq.png)
All of it are done just by picking, doing some clicks, and voila. Yeah, all of the process involve no code. But if you want to develop and customize the project further, that's where your hands start getting dirty.

So, what are you waiting for? Don't just read this post, it won't bring you anywhere. *[Try it now](https://www.stackbit.com/)* and you will know what I'm talking about 😂.
Difference between == and === in JS
Tags: javascript
Published: 2020-03-22 04:36:58

Anyone new to Javascript can at one point find themselves asking this very question when dealing with these comparison operators. This short answer is this: `==` requires that the variables on either side are of the same value, while `===` requires both variables to be of the same value AND the same variable type. 

For `==`, type coercion is performed. Type coercion is when the variable types for both variables are set to the same type before the values are compared. Here is an example of all this:

```javascript
const variable = '3'
const variable2 = 3

console.log(variable == variable2)
// true
console.log(variable === variable2) 
// false 
```

In this code, the first console log statement returns `true`. This is because type coercion makes both variables to have the same type. The second console log statement returns false because although both variables have the same value, `variable` is a string, while `variable2` is a number.