teleren/devto huggingface dataset:
Read File & Write JSON content from / To File in Nodejs | File System Module in NodeJS
Tags: java, beginners
Published: 2021-09-19 08:19:55

Read File & Write JSON content from / To File in  Nodejs | File System Module in NodeJS

Explained in detail about

Timeline  🔥 🔥 🔥 🔥 
00:00: Introduction to Video
01:30 Read content from JSON file
06:50 Using Callback functions
09:00 Using Promise
11:50 Write JSON content to File
17:20 Export read and write as services

{% youtube fLFM9v7iVh4 %}
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 55
Tags: php, javascript, webdev, tutorial
Published: 2021-09-19 08:17:52

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.


In this video,we will be  Creating the Video Class
{% youtube zZgORqJHILo  %}



If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
Hoisting in JavaScript
Tags: javascript, webdev
Published: 2021-09-19 08:08:16

Hoisting is the default behavior of JavaScript where all the variable and function declarations are moved on top. 🔼

Points ↖️ to Remember :

👉JavaScript compiler moves 🚵 variables and function declaration to the 🤘 top🔼 and this is called hoisting.

👉Only variable declarations move 🚴 to the 🤘 top, ⤴️ not the 🤘 initialization.

👉Functions definition moves 🚵🚶 first 🌓 before variables.

👉This means 😏 that irrespective of where the variables and functions are declared, they 💁 are moved on top ⬆️ of the scope.
The 🤘 scope can be both local and global.

##Why does JavaScript hoist variables?

when you run your js code :
global execution context(just a wrapper) is created

It is created in 2 phases
1) creation phase
2)Execution phase

In the creation phase **javascript engine** allocates memory to all variables and function in the code and important thing is entire function(fun body) will sit in that memory block and coming to variables in the creation engine don't know what the variable value is going to be by the end because we can manipulate it later
**in the code right ?**

So in the creation phase instead of storing actul value it will undefined(a placeholder or a sticker)
`ex = myName : undefined`

##Hoisting in Function checked variable
We should figure out how Hoisting of capacity checked factors happens with the accompanying model:

`//function scoped
function myFunc(){
console.log(car);
var vehicle = 'Lamborgini';
}
myFunc(); //undefined`

##How is hoisting related with scoping in JavaScript?

The **scope manages the accessibility of variables.** The Scope decides how far the JavaScript will go to look 🧐 for a variable. In the event that it's doesn't exist in the current extension, 🤪 it'll look 👀 in the external Scope .

Scope in JavaScript is the area where we have 😒 Correct ✅ access to a variable / function.

## Hopefully, my post has helped you understand the hoisting better!
Visualising the simplest Math problem no one can solve using React.js
Tags: react, webdev, visualisation, programming
Published: 2021-09-19 08:03:08

Hello, amazing reader,   
Hope you are doing fine in your life. I wanted to share some interesting insights I had after watching the 3x+1 problem on Veritasium last week:-

{% youtube 094y1Z2wpJg %}

## Series Explanation
The rules of the series are as follows:-
 - Start with any positive integer n.    

 - Then each term is obtained from the previous term as follows: 
     - If the previous term is even, the next term is one half of the previous term. 
     - If the previous term is odd, the next term is 3 times the previous term plus 1.           


- The conjecture is that, no matter what value of n, the sequence will always reach 1.   


![Example.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632038198074/kKasVp3b_.png)

Although the explanation is surprisingly easy to follow from the Youtube video above, no one has been able to prove the series yet.

## Visualisation using react.js
The problem in itself is really interesting to watch, but I personally found the practical examples and visualisations used in explaining the problem quite fascinating. 

Therefore I wanted to see if I can replicate a few of the visualisations of the series which is popularly known as collatz conjecture using react.js this week. I was successful in building a basic graph of the first 10 numbers in the series as shown below:

![Screenshot 2021-09-17 at 7.51.14 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1631888484109/Vc04Phv99.png)

You can directly check out the code for this graph here on Codesandbox:-
[3x+1 in React.js](https://codesandbox.io/s/3x-1-problem-yvd7s?file=/src/components/seriesGeneration.js)

{% codesandbox 3x-1-problem-yvd7s %}

There is a utility function in the code to generate the series for a particular number:-


```javascript
export default function generateSeries(x) {
  const series = [x];
  let n = x;
  while (n !== 1) {
    if (n % 2 === 0) {
      n = n / 2;
    } else {
      n = 3 * n + 1;
    }
    series.push(n);
  }
  return series;
}
``` 

We then use this function in `seriesGeneration` component to create series for the first 10 numbers. The numbers are then visualised using  [recharts](https://recharts.org/) library.

I am planning to build a few more visualisations on the same number series, so stay tuned for upcoming articles.

Connect with me on:
[Twitter](https://twitter.com/saurabhnative)
TaskForce week 3
Published: 2021-09-19 07:32:12

This week was a very disturbing week, I had very pressing things that I had to finish off. But thanks to my teammates I have been brought up to speed.
In this journal we are going to discuss the outcomes of this week experience to working with UX designers.

**Developer Basics**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mux0mpu6lkmcv08opo5.png)
As a frontend developer when you have a good UX designer then you can develop best and beautiful sites or apps we have been challenged to use vanilla javascript, HTML and CSS. using Frameworks speeds up your work but I have been reminded not to forget some basics.

**Fast Learning and Flexibility**


Let's come back to frameworks, There are many frameworks out there and you can not know every single one of them this week I have been introduced to a framework that is the first time to use and I had to learn it faster and use it as it was required in the assignment. The take away here is that as Developers we should be fast learners and flexible to what a clients want you to use or your supervisor.

**Professional Skills are Critical**

Professional skills are the very crucial things and without them you are not well equipped. You can have all the required technical skills but without professional skills you can not be able to work with a team, your team may have teammates whom you do not share expertise and with professional skills you will be able to communicate and work with them well.

**Conclusion**

Foundation is what makes you standout and frameworks makes your life easier but you can't know them all you need to be a fast learner all in all professional skills always comes first and then your technical skills and without them not many doors are going to open for you.
Animated Tab Bar
Tags: codepen
Published: 2021-09-19 08:00:17

---
title: Animated Tab Bar
published: true
tags: codepen
---

<p>Designed by:  Mauricio Bucardo</p>

<p>Original image:
<a href="https://dribbble.com/shots/5619509-Animated-Tab-Bar" target="_blank">https://dribbble.com/shots/5619509-Animated-Tab-Bar</a></p>

<p>You can use this menu in your projects.
It also works with 100% width and reacts to changing the size of the window :)</p>

{% codepen https://codepen.io/kay1975ger/pen/wvemqMg %}
Enabling Service Worker with Vue 2 and Vue 3
Published: 2021-09-19 07:51:39

While Vue users await release of Workbox 5, I crawled the entire internet for solutions to integrating Service Worker with Vue 2 and Vue 3. By actually trying different configurations, I've finally laid out the exact steps for you to rightly configure Service Worker with your Vue app.

To add service worker (app created with vue create <project-name>), run the following in your project:

```bash
npm install register-service-worker workbox-webpack-plugin
```

Create `service-worker.js` at the root of your project with the following:
```js
// Insert your service worker code here
```

To register the service worker, first create `registerServiceWorker.js` in the `src` folder:
```js
/* eslint-disable no-console */

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {

  register(`${process.env.BASE_URL}service-worker.js`, {

    ready () {

      console.log(

        'App is being served from cache by a service worker.\n' +

        'For more details, visit https://goo.gl/AFskqB'

      )

    },

    registered () {

      console.log('Service worker has been registered.')

    },

    cached () {

      console.log('Content has been cached for offline use.')

    },

    updatefound () {

      console.log('New content is downloading.')

    },

    updated () {

      console.log('New content is available; please refresh.')

    },

    offline () {

      console.log('No internet connection found. App is running in offline mode.')

    },

    error (error) {

      console.error('Error during service worker registration:', error)

    }

  })

}
```

and to include the service worker in the app, edit `main.js` (in the `src` folder) as follows:
```js
import { createApp } from 'vue'

import App from './App.vue'

+ import './registerServiceWorker'

createApp(App).mount('#app')
```

Now, create `vue.config.js` at the root of your project with the following config:
```js
const { InjectManifest } = require("workbox-webpack-plugin")

const config = {}

if (process.env.NODE_ENV === "production") {

  config["configureWebpack"] = {

    plugins: [

      new InjectManifest({

        swSrc: "./service-worker.js",

      }),

    ],

  }

}

module.exports = config
```

You're good to go ✨, now create a build of your app (npm run build) and celebrate! 🎉
TF-IDF FROM SCRATCH
Tags: tfidf, nlp, featureengineering
Published: 2021-09-19 07:48:16


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

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


https://github.com/Wittline/tf-idf
DevBox Showcase: QR Code Generator
Tags: productivity, tutorial, qrcode, generator
Published: 2021-09-19 07:34:11

Hi 👋,

This is the second post in the series showcasing tools from [DevBox](https://www.dev-box.app) 🎉, a desktop application or browser extension packed with everything that every developer should have.

-------

DevBox has a **QR Code Generator tool**, once opened, click on it's card: 

![QR Code Generator Card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwlvwzepcypgofsxynu0.png)

It will show you the default QR Code which points to https://www.dev-box.app

![Default View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8ko688q4sku2ky9y82j.png)

At this point, you can edit the parameters on the right:

- The first one is the value - usually a URL
- The second one is the size - can be up 5000px
- The next two are the colors
- The last one is [error correction](https://en.wikipedia.org/wiki/QR_code#Error_correction)

Once you are happy with your QR Code, you can click on **Download Image** button to save it to your computer.

---------

You can still buy DevBox [here](https://gdotdesign.gumroad.com/l/devbox/earlybird) for **a lifetime price of ~~$25~~ $20 💰**, get it while it's available!

More DevBox showcases are coming, so follow me here if you want to be notified!
Lirik Mahalul Qiyam
Published: 2021-09-19 07:29:47

Jika anda sering menghadiri masjlis sholawat pada peringatan Maulid Nabi, pastilah pernah melihat satu momen saat seluruh jamaah berdiri bersamaan sambil membaca shalawat.

Bacaan sholawat saat berdiri itu dinamakan dengan “Mahalul Qiyam”.

Aktifitas bacaan sholawat Mahalul Qiyam merupakan tradisi mayoritas umat Islam seluruh dunia saat membaca Kitab kitab Maulid Nabi Muhammad.

Di antara Kitab kitab Maulid yang populer di Indonesia adalah maulid Ad-Dhiba’, maulid, Al-Barzanji, maulid Simtuddhurar, maulid Adh-Dhiya’ullaami’.

Baca Selengkapnya: <a href="https://ahmadalfajri.com/lirik-mahalul-qiyam-habib-syech/">Lirik Mahalul Qiyam</a>
What's your monthly AWS bill?
Tags: watercooler, aws, business
Published: 2021-09-19 07:24:08

---
title: What's your monthly AWS bill?
published: true
description: 
tags: watercooler, aws, business
cover_image: https://etpib3nj7v23mjy9920r2tvr-wpengine.netdna-ssl.com/wp-content/uploads/2020/05/aws_logo_smile_1200x630.png
---
AWS provides a service for just about anything you would ever need as a developer. Some of the most popular services include EC2, RDS, S3, Lambda, DynamoDB, CloudFront, Glacier, VPC, Lightsail, Sagemaker, etc.   

The full list of their products can be found [here](https://aws.amazon.com/products/).

What services do you use and what are your monthly bill from them?
How to setup ECS logging with Cloudwatch
Tags: ecs, cloudwatch, aws, ec2
Published: 2021-09-19 07:04:14

---
title: How to setup ECS logging with Cloudwatch
published: true
description: Learn how you can push your system logs from ECS containers running on Amazon EC2 instances, to the Cloudwatch
tags: ECS, Cloudwatch, AWS, EC2
//cover_image: https://direct_url_to_image.jpg
---
It is not uncommon for developers to be tasked with setting up monitoring for their applications. One of the most popular tools is Cloudwatch, which allows you to monitor your app's logs and metrics. This blog post will cover how to set up Cloudwatch log streaming from your ECS container - it's easy! 

In your ECS task definition you can easily configure the log. I have added an example json to add logs as follows so that they are viewable in Cloudwatch:

    { 
       "taskDefinition":{
          "taskDefinitionArn":"ECR_name_goes_here",
          "containerDefinitions":[
             {
                "logConfiguration":{
                   "logDriver":"awslogs",
                   "options":{
                      "awslogs-group":"/test/group",
                      "awslogs-region":"us-west-1",
                      "awslogs-stream-prefix":"ecs"
                   }
                }
             }
          ]
       }
    }

You'll find a list with all supported parameter for this link
https://docs.aws.amazon.com/AmazonECS/latest/developerguide/task_definition_parameters.html 

The **logConfiguration** object contains all settings for logging. After running the service under this task definition any STDOUT to system should be logged into Cloudwatch and can be checked from there as well!
Why Proxy ? And Best proxy services for Automation and Scraping?
Tags: sneakers, amazon, walmart, scraping
Published: 2021-09-19 06:57:31

#What is Proxy ?
We hear the words "**proxy**" during the automation process, web scraping job etc

Before we can talk about what a proxy is, we need to know what an IP address is and how it works.

An IP address is a numerical address that is allocated to each device that connects to an Internet Protocol network, such as the internet, and gives each device a distinct identity. The majority of IP addresses look something like this:

192.168.2.xx

A proxy server is a third-party server that allows you to route your request through their servers while also using their IP address. When you use a proxy, the website you're requesting no longer sees your IP address, but rather the proxy's, allowing you to scrape the web anonymously if you want to.


However, there are 3 main types of IPs to choose from. Each type has its own set of advantages and disadvantages.

**Datacenter IPs**
The most prevalent sort of proxy IP is a datacenter IP. They're the IP addresses of servers in data centers. These IPs are the most frequent and the least expensive to purchase. You may construct a very comprehensive web crawling solution for your organization with the correct proxy management solution.

**Residential IPs**
A residential proxy network is made up of real residential IP addresses that are leased or purchased for commercial use straight from Internet Service Providers (ISPs). In every country and city around the world, the Residential Network is made up of actual real household Wi-Fi-based IPs. These IPs allow your data collecting requests to be recognized and treated as requests from real-world addresses, making them more effective.

**Mobile IPs**
A Mobile proxy network consists of real 3G/4G connections assigned to individuals by their mobile carrier. Mobile proxies are the IPs of real-user devices, making them undetectable when used correctly.

#Best Proxy
For Web Scraping / Data Collection jobs for websites like Amazon, Walmart, eBay, BestBuy, Homedepot, canadiantire.ca and other sneakers websites like Stockx, Footlocker etc, you might need clean proxies with less fraud score. The fraud score should be between 0-25, its it goes above the antibot firewalls like Akamai, PerimeterX, Incapsula will block the scrapers and throws captchas. So try to go with good proxy services like [Bright Proxy](https://brightdata.grsm.io/create) (Free Trial)

Not only for the data collection or scraping jobs. But also you can use the [proxy](https://brightdata.grsm.io/create) for the automation jobs like bidding applications(example opensea automation), Product Carting, Stock Checking, etc.

#Advantages of Proxy
* Less chance of Blocking
* Unblocking or Bypassing Captchas
* Anonymity

Actually by using these [proxies](https://brightdata.grsm.io/create) which have less fraud score can help you to resolve answers for multiple questions in stack overflow like below.

* Why amazon blocking me ?
* Am getting 403 in Walmart  ?
* Stockx unable to get product details ?
* How to unblock captcha in scraping?
* Web scraping blocked ?
How to convert Java code snippet to Javascript
Tags: javascript, java, interview, leetcode
Published: 2021-09-19 06:30:56

---
title: How to convert Java code snippet to Javascript
published: true
description: In this example you will see the difference between Java and Javascript code.
tags: javascript,java, interview, leetcode
//cover_image: https://direct_url_to_image.jpg
---
Given a signed 32-bit integer x, return x with its digits reversed. If reversing x causes the value to go outside the signed 32-bit integer range [-231, 231 - 1], then return 0.

Assume the environment does not allow you to store 64-bit integers (signed or unsigned).

These are two different languages. In order to convert the Java code to Javascript we must to bit of extra work.

Here is the java code:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trmb3v1r1xv5hlpm3pqq.png)

Here is the javascript code:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4y21bf4ipnu1urkw4i6.png)
Awesome 3D Buttons using Pure HTML & CSS.
Tags: html, css, button, 3d
Published: 2021-09-19 06:28:49

3D buttons using HTML & CSS.
##Source Code:
<br><br>
#HTML CODE:
```html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Buttons</title>
</head>
<body>
    <ul>
        <li>
            <span><i class="fa fa-thumbs-o-up"></i></span>
            <a href="#">Like</a>
        </li>
        <li>
            <span><i class="fa fa-share"></i></span>
            <a href="#">Share</a>
        </li>
        <li>
            <span><i class="fa fa-heart"></i></span>
            <a href="#">Subscribe</a>
        </li>
    </ul>
    
</body>

</html>
```
<br><br>
#CSS CODE:
```css
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: #ccc;

}
ul{
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
ul li{
    list-style: none;
    height: 65px;
    width: 235px;
    border: 1px solid black;
    margin: 30px;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 35px;
    transform: rotate(-30deg) skewX(25deg) translate(0, 0);
    transition: 1s;
    box-shadow: -30px 30px 60px rgb(0, 45, 0.5);
}

ul li::before{
    content: '';
    position: absolute;
    top: 10px;
    height: 100%;
    width: 20px;
    left: -20px;
    background: #ffffff;
    transform: rotate(0deg) skewY(-45deg);
    transition: 1s;
}

ul li::after{
    content: '';
    position: absolute;
    bottom: -20px;
    height: 20px;
    width: 100%;
    left: -10px;
    background: #ffffff;
    transform: rotate(0deg) skewX(-45deg);
    transition: 1s;
}
ul li a{
    margin: 15px;
    text-decoration: none;
    color: black;
}
ul li:hover{
    background-color: black;
    color: white;
    margin-top: -20px;
}

ul li a:hover{
    color: white;
}
ul li:hover::after{
    box-shadow: -10px 10px 10px rgb(65, 85, 15);
    background-color: aqua;
}
ul li:hover::before{
    box-shadow: -10px 10px 10px rgb(65, 85, 15);

    background-color: aqua;
}
```

<br><br>
##Find Me On:
<br>
<a href="https://www.facebook.com/technicalvandar" terget="_blank">Facebook</a>
<a href="https://www.youtube.com/technicalvandar" terget="_blank">Youtube</a>
<a href="https://github.com/Technical-Vandar-885/" terget="_blank">Github</a>
System Design - 101
Tags: systems, webdev, tutorial, computerscience
Published: 2021-09-19 06:05:59

Hey There!!
Welcome to System Design 101
![6f860f7a55059d942cbf0ccadf68ca36](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzw9vbeiw2usx2z27m4h.gif)

Find Your way to the topic which excites the most!!!
NOTE: *It is recommended to follow the topics in order if you have no prior knowledge in system design*