teleren/devto huggingface dataset:
HTML Document, b. 2020, Looking for HTML Minimalist and Craftsperson
Tags: html, webdev, minimalism, codequality
Published: 2020-11-22 15:21:32

HTML needs more attention.

[We know that.](https://almanac.httparchive.org/en/2020/markup)

You know that.

What’s there to help with that?

I wanted to point to [my latest booklet](https://meiert.com/en/blog/upgrade-your-html-2/), which is part of [a series](https://leanpub.com/b/upgrade-your-html-1-2).

But I don’t want to point there anymore.

So what _is_ there to help with HTML needing more attention?

_You._

If you work with HTML, that is.

Then this really is on you.

Can I make more comments like this?

Yes, but then this post would lose all its appeal.

If you _are_ interested in paying more attention to HTML—paying it the attention it needs—, then there are two specific things you can do.

1. Validate your HTML code. There is [the W3C validator](https://validator.w3.org/), there are [validation packages](https://www.npmjs.com/search?q=html%20validator), there are validation plugins for your editor.

2. Learn what markup you can leave out. Make your life easier, and that of HTML better! Consider becoming an HTML minimalist: It starts with learning what [25 tags to safely omit](https://twitter.com/j9t/status/1311333220579934208).

That’s a botched post from what I thought about writing. But it’s not a bad one. HTML needs more attention. ☮
TwitterFOMO—Open-Source Website Showing Most Liked Tweets in WebDev
Tags: opensource, showdev, react, discuss
Published: 2020-11-22 15:13:27

You can find the source on https://github.com/tomdohnal/twitter-fomo. The website is on https://twitterfomo.dev

The app is built in Next.js. Components are created using ChakraUI. I used react-spring for the animations. The SVG images are from undraw.co.

(Also started a YouTube channel where I explain how I did the SVG animations! You can check it out on https://www.youtube.com/channel/UCE7h4of6ywpAG87KXHV6UrQ)

I use a simple cron job on Heroku which is run every hour to fetch the most-liked tweets and upload them to a Postgres DB using Prisma. The app itself is hosted on Vercel.com.

I'd love to hear your feedback! Especially, I'd like to hear what you'd suggest doing to filter out "off-topic" tweets so that only the webdev related ones are shown.
Unexpected Behavior of React DOM Modification
Tags: react, javascript, dom, treeview
Published: 2020-11-22 14:52:35

## Hello developers 🙂
I need help in understanding a piece of code that I developed recently. 
My goal is to display a full binary tree (0 or 2 children allowed) which gives the user the ability to interact only with the leaves. The user can either split or remove a specific leaf.

1. Upon split: set the splitted node as the left child of a 
   new parent node.
   ![Example - split(1)](https://i.stack.imgur.com/Nqnfp.png)
2. Upon remove: find the node's parent and replace it with 
   node's sibling subtree.
   ![Example - remove(3)](https://i.stack.imgur.com/8gwCa.png)
   
Implementation details:

####**Node class**
Represents the structure of the tree and supports:
   * split()
   * remove()

````javascript
let id = 0

class Node {
  constructor(parent, children){
    this.id = id++
    this.children = children? children : null
    this.parent = parent? parent : null
 }

  split(){
    const node = new Node(this.parent)
    node.children = [this, new Node(node)]
    this.parent = node
    if (node.parent) {
      // Replace parent's child (this) with node
    }
    return node
  }

  remove(){
    const parent = this.parent
    if (!parent) {
        return this
    }
    const sibling = parent.children.find((child) => child !== this)
    sibling.parent = parent.parent
    if (parent.parent) {
      // Replace grandparent's child (this.parent) with sibling
    }
    return sibling
  }
}
```

####**TreeNode**
Recursive component which contains node as a state 
   and renders the node's subtree.

````javascript
function TreeNode(props) {
  const [node, setNode] = useState(props.node)

  useEffect(() => {
    setNode(props.node)
    return () => {  
    };
  }, [props.node]);

  const onRemove = () => {
      const newNode = node.remove()
      props.onRemove(newNode)
  }

  const onSplit = () => {
      setNode(node.split())
  }

  return (
    <div>
      {
        node.children? 
        <div>
          <label>{node.id}</label>
          <div>
            <TreeNode node={node.children[0]} onRemove={setNode}/>
            <TreeNode node={node.children[1]} onRemove={setNode}/>
          </div>
        </div>: 
        <div>
          <button onClick={onRemove}>remove</button>
          <button onClick={onSplit}>split</button>
          <label>{node.id}</label>
      </div>
      }

    </div>
  )
}
```

####**The problem**
Consider the tree I showed above (example - remove(3)), the actual result is:
![Actual result - remove(3)](https://i.stack.imgur.com/PXi3o.png)

Although the tree structure is correct.

**So here is my question - why React doesn't change the DOM as I expected (as I showed in the above)?**

I also noticed that React does change the DOM as I expected for this case:
![Actual result - remove(1)](https://i.stack.imgur.com/5mE0x.png)

Here is a full example in Sandbox: https://codesandbox.io/embed/full-binary-tree-react-21r77

Thanks in advance 🙏
What is BLOCKCHAIN?
Tags: blockchain, beginners
Published: 2020-11-22 14:52:19

So in simple words, a blockchain can be compared to a train. The way that a  train has bogies connect to each other in the same way there are blocks connect to each other, once a boogie is disconnected from the main train, all bogies after that are left behind, and in the same way if a certain block has been tampered all the blocks after that block become useless and corrupt!
This is what a blockchain is in layman language!
Here is the main definition of the blockchain:-
##*A blockchain is, an immutable time-stamped series record of data that is distributed and managed by a cluster of computers*
 Blockchains can be a very useful way of storing information because of its decentralized approach! By using this kind of approach no can really remove any data or add any data, this can help us in storing many confidential data without having a fear of it being tampered with
One of the very positive sides of the blockchain is its decentralized approach, this kind of approach keeps the data in the blockchain away from a single entity and we can rest assured that the data safe!

![CyberPunks](https://i.pinimg.com/originals/13/dc/1f/13dc1f9bd046a5c7825397eaebe1f852.gif)

## So there are mainly 3 types of Blockchain:
### 1. Public Blockchains:
#### **They allow anyone to participate as users, miners, developers, or community members. All transactions that take place on public blockchains are fully transparent, meaning that anyone can examine the transaction details.**
### 2. Private Blockchains:
#### **Another type of chain is private blockchains, also known as permission blockchains, which possess a number of notable differences from public blockchains.**
### 3. Hybrid Blockchains:
#### **This means that it combines the privacy benefits of permission and private blockchain with the security and transparency benefits of a public blockchain. That gives businesses significant flexibility to choose what data they want to make public and transparent and what data they want to keep private.**

Privacy is one of the most important things in a human's day to day life if your data is not secure/accessible by others then it is a very concerning thing for you as a human being in this digital age. And to tackle this thing there is a new technology called blockchain it keeps your data secure and the best of all none governs it so your data is completely anonymous.

For more detailed info
[What Different Types of Blockchains are There?](https://dragonchain.com/blog/differences-between-public-private-blockchains)

![Quotes](https://dev-to-uploads.s3.amazonaws.com/i/42d3i51olv4fzgbl7iyy.jpg)
Create a new node js project in typescript (for beginners)
Tags: typescript, node
Published: 2020-11-22 14:51:11

I used to work on traditional plain javascript code while working on node js. It caused a lot of problems as 
1. Forget how to use the methods, classes or objects that we built into a module long time ago
2. When a project becomes larger, bugs mostly comes from a minor mistake which typescript helps eliminating

So, I learned how to setup typescript project from scratch

## Create a node project using npm
```bash
PROJECT_NAME = <project name>
mkdir $PROJECT_NAME && cd $PROJECT_NAME
npm init -y
```

## Install typescript dependencies
```bash
npm i --save-dev typescript ts-node nodemon
```
- *typescript is for typescript language itself and compiling tool*
- *ts-node is used to run typescript without compiling*
- *nodemon is used to run/restart node automatically when files changed*

## Initialize tsconfig.json
```bash
npx tsc --init
```
This creates a tsconfig.json in your project folder. This controls the strictness/settings in typescript files

## Adjust tsconfig [optional]
Some basic settings in `tsconfig.json` that are recommended are
```json
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "declaration": true,
    "sourceMap": true,
    "outDir": "dist",
    "rootDir": "./",
    "strict": true,
    "esModuleInterop": true
  }
}
```
- setting `target` as es6 helps to support es6 code
- setting `declaration` true generates corresponding '.d.ts' file
- setting `sourceMap` true generates corresponding '.map' file
- `outDir` redirects output structure to the directory
- `rootDir` specifies the root directory of input files
- setting `strict` true enables all strict type-checking options


## Add program for testing
```bash
echo "console.log('Hello typescript !')" > index.ts
```

## Add scripts to package.json
```json
{
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "start": "ts-node index.ts",
    "build": "tsc"
  },
}
```
- execute `npm run start` to start application without compile
- execute `npm run build` then `node dist/index.js` to compile and run applcation as javascript
3 Tips for better WFH productivity
Tags: productivity, career
Published: 2020-11-22 14:41:34

Due to the unfortunate situation with COVID-19, lots of jobs have turned remote, while that is a great thing for some, others are struggling to maintain productivity and focus.

I've been working from home for around 2 years now, full time, 8 hours, in an enterprise company as a software engineer, here are some of the tips I think can prove quite useful if utilized correctly.

## **1. Create a strict schedule**
Consistency is one of the fastest ways to build discipline, and great discipline results in focus and productivity. So, how do we build consistency when no one is forcing us to? Create strict schedules.

The hardest part of this task, at least for me, is the sleep cycle consistency, so that is what I would focus on the most. If you can make yourself go to sleep at a consistent time, and wake up early to get the morning boost - you're back on the horse!

Other things to watch out for regarding scheduling, is anything which can break your focus in those 8 working hours, which brings us to lunch and rest times. Having rest (and lunch of course) is extremely important, which goes without saying - what is more important in a WFH environment is keeping it consistent, so it does not surprise you and breaks your focus.


## **2. Do not rely on your willpower**
While I have no doubt that some of you have great willpower and self-control to not watch Netflix, surf social media, or play video games, it is much easier to not use your willpower at all. What exactly do I mean by that?

Imagine your willpower as a muscle. You can use it for plenty of things, but eventually - it gets tired. A more concrete example would be working for 8 hours with your phone on the table, while you have the willpower not to surf social media, once you finish working, instead of working out, you will find it irresistible to watch Netflix or any quick gratification service. How do we prevent that?

Instead of resisting, completely remove it as an option.
- Turn off your phone (or put it in airplane mode)
- Use applications to block websites & addicting apps
- Lock your joystick in a time-locked box

While this might sound trivial, if you 100% block access to something, you are no longer using your precious willpower to resist it, thus resulting in further productivity in the day.

[Source](https://www.youtube.com/watch?v=k2Wcu6aGyz8)

One of the best (and free) apps for restricting access to addicting applications and websites I know are:

- [ColdTurkey](https://getcoldturkey.com/) (Windows & Mac)
- [SelfControl](https://selfcontrolapp.com/) (Mac only)

Keep in mind, you cannot fool these apps easily, when they restrict, they restrict for good.

## **3. Dress as you would for work**
While I am in no way a psychologist, I can 100% tell you that this works for me. If I feel like I am dressed to work, I will work. It is that simple.

## **Conclusion**

Work from home offers you many privileges, such as working in your pajamas, watching Netflix whenever you wish to do so, playing games, but sometimes it is good to avoid some of them in order to increase your productivity & focus.
Unix commands cheat sheet
Published: 2020-11-22 14:37:18

### Kill all jMeter (or any processes) executions

```
ps -ef | grep jmeter | awk '{print $2}' | xargs kill -9
```

This can be applied to any other processes running to. Just replace `grep jmeter` to `grep your-process-name`

---

### Stop a service running on a specified port

```
netstat -vanp tcp | grep <port> | awk '{print $9}' | xargs kill -9
```

### Remove docker images according to a pattern

```
docker images -a | grep <pattern> | awk '{print $3}' | xargs docker rmi -f
```
Summon The JSON: PHP is coming!
Tags: php
Published: 2020-11-22 14:36:44

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

Given an excellent development of new PHP versions third deck of Summon The JSON will be for that language.

Early preview:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0a07k3mniau22y4qx6u1.jpg)

Stay tuned!
What about Docker ?
Tags: docker, devops
Published: 2020-11-22 14:35:13

I'm currently learning about Docker and i wanted to write a little article to share some information.
First of all, let me explain what is Docker ? 
Well, it's the most popular and used container platform.

###But, what is exactly a Container ? 
Before tackling Docker, it is essential to remember what a container is. It is a lightweight, independent set of software processes, including all the files needed to run the processes: code, runtime, system tools, library, and settings. 

###Why do we have to containerize ?

Let's say we want to develop an application and move it to another machine. The main problem is that we can have some bugs on one of the machines and we may not know exactly why.. this can be caused by some processes interfacing with each other.
Some resources may touch other resources and that can causes **bugs**. 

That's why we use containers.

Two containerized processes can run side by side on the same computer but they cannot interfere with each other. They are fully and effectively isolated from each other.

###Why Docker ?

Basically, Docker is an **open source software platform** for creating, deploying and managing application containers on an operating system, virtually.

Well, the purpose of using Docker is to maintain an application and its environment on a virtual machine isolated from other processes.  

Docker can manage a large number of containers and ensure the communication between them (by manipulating ports).

###Some main commands
   * docker pull : Pull an image or a repository from a registry
   * docker run : Run a command in a new container
   * docker ps : List containers
   * docker stop : Stop one or more running containers
   * docker start : Start one or more stopped containers
   * docker ports, docker port mapping : List port mappings or a specific mapping for the container

These are some advantages :
>A high degree of portability
>Develop applications more efficiently
>Ease of use

Docker is now facilitating work for developers and Dev-ops engineers.
Read/Write Files In NodeJS
Tags: javascript
Published: 2020-10-27 12:09:10

---
title: Read/Write Files In NodeJS
published: true
description: Code (with explanation) to read from a file and write to a file in Node JS
tags: JavaScript
---
Hello fellow devs :wave:! I am sure like me you find yourself in a position where you need to read from a file or write to a file in your day to day work.

In this post, we will understand and see the code snippets for these two tasks.

But how will we do that, you ask :thinking:? Luckily for us, we have a ***File System ([fs](https://nodejs.org/api/fs.html))*** module which is a part of the code library of Node JS.

One important thing, since it is a core module, we don’t have to install it explicitly. Cool, eh :smile:?

## Read From File
Reading from files is one of the most common things we do when we build an application using Node JS. 

We can read files in two ways - *asynchronous (non-blocking)* and *synchronous (blocking)*. Usually, the preferable way is non-blocking i.e., ask node to read a file, and then to get a callback when reading is finished.

Let's look at the code
```javascript
// Import the module
const fs = require('fs');

// This function reads the file and prints the data on the
// console using the callback function
const readFile = () => {
    fs.readFile('files/sample-text-file.txt', 'utf8',
        (err, data) => {
            if (err) {
                return console.log(err);
            }
            console.log(data);
        });
}

module.exports = {
    readFile
};
```
Here, we are passing the path of the file to be read and the type of encoding.

If we wish to read the file synchronously then we can use the function `readFileSync` instead of `readFile`.

## Write To File
Like reading from a file, a common use case is to write into a file. We can leverage the core File System (fs) Node JS module.

Here also, like reading, we have two ways - *asynchronous (non-blocking)* and *synchronous (blocking)*.

Let's see the code for writing to a file asynchronously.

```javascript
// Import the core node js fs module
const fs = require('fs');
// The content to be written into the file
const content = 'This content will be written into the file';

const writeFile = () => {
    fs.writeFile('files/sample-file-to-write.txt', content,
        (err) => {
            if (err) {
                throw err;
            }
            console.log('File is saved!');
        });
}

module.exports = {
    writeFile
};
```

## Conclusion
And that's it! We are done with reading and writing files in NodeJS. Easy peasy, right?

You can find the complete code on my [GitHub](https://github.com/ani03sha/RedQuarkTutorials/tree/master/Snippets/JavaScript). If you find it useful, consider giving it a star ⭐.

Also, you can read more such handy posts on my [personal blog](https://redquark.org).

Happy Learning 😊 and Namaste 🙏.
DIV with ANIMATION - HTML and CSS
Tags: html, css, cssanimation, divanimation
Published: 2020-11-22 14:14:51

A DIV ANIMATION is a animation made with HTML and CSS. They are usually used to highlight something. Div Animation gives your site a professional look and you can also announce something by using it. 
<a href="http://www.codewithbishal.com/post-3">View it on our website</a>

At first, on our webpage, there is our Div with animation. I also added comments on the css code so you can modify my code for your own use. When you click on view code after visiting our website the whole code will appear, there is a also a button to copy the codes (HTML and CSS).

You can view and copy the source code files through the link given below. <a href="http://www.codewithbishal.com/post-3">View and Copy Source Code</a>
Laravel website
Published: 2020-11-22 14:05:46

While im learning laravel,im create funny website.I think its cool idea and it can grows up and become functional website.I need some people to be an admin on website.Leave comment if you are interesting and rate how its looks ^_^ p.s. im learning laravel for 3 weeks!
Visit website here : http://myconfession.tk/

feel free to post your confession ,give some angels/devils or leave comment on any confession.
[Video] Postman API Testing
Tags: postman, javascript, php, beginners
Published: 2020-11-22 13:50:43

Hello there 🤓, this is the video upload of an earlier post which can be found [here](https://dev.to/clonne101/beginners-guide-to-writing-postman-api-tests-32a4).

🐱‍💻 Happy Testing!
My #100daysOfCode Challenge - Python 100 projects in 100 days - Journal Entries - Day 6
Tags: python, 100daysofcode, programming, codenewbie
Published: 2020-11-22 13:42:21

Day 6— Reeborg’s World maze game

This project we used Reeborg's world to learn about function

Instructions:

Reeborg was exploring a dark maze and the battery in its flashlight ran out.
Write a program using an if/elif/else statement so Reeborg can find the exit. The secret is to have Reeborg follow along the right edge of the maze, turning right if it can, going straight ahead if it can’t turn right, or turning left as a last resort.


What you need to know:


* The functions move() and turn_left().
* Either the test front_is_clear() or wall_in_front(), 
  right_is_clear() or wall_on_right(), and at_goal().
* How to use a while loop and if/elif/else statements.
* It might be useful to know how to use the negation of a test (not in Python).
* A robot located at (x, y) = (6, 4) carries no objects.

Goal to achieve:

The final position of the robot must be (x, y) = (6, 4)

def turn_right():
    turn_left()
    turn_left()
    turn_left()
while not at_goal():    
    if right_is_clear():
        turn_right()
        move()
    elif front_is_clear():
        move()
    else:
        turn_left()

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aligewp23yg2ffmb7fty.png)
Daily Developer Jokes - Sunday, Nov 22, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-11-22 13:00:18

---
title: "Daily Developer Jokes - Sunday, Nov 22, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Nov%2022%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125905d1ad3.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why do programmers always mix up Halloween and Christmas?

___A:___ Because 31 OCT == 25 DEC
 -->