teleren/devto huggingface dataset:
JavaScript Fundamentals
Tags: javascript, programming, tutorial, beginners
Published: 2022-10-23 11:16:26

JavaScript! you know that. I don't need to introduce this language differently. It is the most widely used language in the software industry.  JavaScript is easy to learn. Possible to develop an application without lots of effort. That's why sometimes we don't care about its fundamentals deeply. So we have some misconceptions about JavaScript fundamentals. So I am planning to write a series of blogs on its fundamentals and other features. I will write on fundamentals, DOM, client storage, asynchronous JavaScript, error handling, OOP (Object Oriented Programming), introduction of ES6 and ES10.   

### Fundamentals:

- [Introduction of compiler and interpreter](https://dev.to/beyond88/introduction-of-compiler-and-interpreter-3a21)
- Just in time compiler (JIT)
- JavaScript engine
- Compiling and polyfill
- Execution context
- JavaScript Scope
- JavaScript Hoisting
- Closures
- Callback and higher-order functions
- This (this) keyword
- Call by value and call by reference
- IIFE (immediately invoked function expression)
- Pure function
- Use strict 
- Call, bind, and apply
- Array and array methods

### Document Object Model (DOM)

- Document and window object
- Query selectors
- Difference between getElement and query selector
- DOM traverse
- Content in the element
- Update and remove DOM element
- Child element
- Event capture vs bubbles
- Event delegation and propagation
- Input element and event handling
- Form handle and validation 
 
### Client Storage

- Cookies
- Local storage
- Session

### Asynchronous 

- What is asynchronous JavaScript?
- How to handle asynchronous? 
- Ajax
- Event loop

### Error handling 

- JavaScript error handling
- Try, catch and final
- Error through

### Object Oriented Programming (OOP)

- OOP in JavaScript
- Object property and method 
- Class in JavaScript
- Constructor 
- New keyword
- Abstraction 
- Polymorphism
- Use case of getter and setter
- Prototype and prototypical inheritance
- Multilevel inheritance

### Javascript ES6

- ES6 and tooling
- Let, const, literals and destructuring
- Spread operator, rest and default parameter
- Arrow function 
- Find, fill
- For of and for in
- Class 
- Symbols
- Iterators and generators
- Promises and async/await
- Maps and sets
- Proxies and reflection
- Number and math
- Array and object
- Modules and string padding
- Exponential operator and trailing comma
- Objects.keys(), object.values() and object.entries()
- Array.prototype.includes()
- Array.flat() and Array.flatMap()
- Global this
- Optional chaining and nullish coalescing operator
02.03 React State - basic counter with page title change (class components)
Tags: javascript, react, tutorial, webdev
Published: 2022-10-23 11:00:46

App preview:
![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnvfvp3hdny45h59l3xf.gif)



Project files:
![An image of project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbx7b4xaesgca47narix.png)




<hr/>
src/App.js
```react
import Counter from "./Counter"
import React from 'react';
import "./App.css"

class App extends React.Component{
  render(){
    return (
      <div className="app">
        <Counter/>
      </div>
    );
  }
}

export default App;
```
<hr/>
src/App.css
```css
.app{
    background-color: lightskyblue;
    padding: 20px 10px;
}
```
<hr/>
<hr/>
src/Counter.jsx
```react
import React from "react";

class Counter extends React.Component{
    state = {
        count: 0
    }

    handleClick = () => {
        this.setState((prevState)=>({ count: prevState.count + 1 }))
    }

    componentDidUpdate(prevProps, prevState){
        if(prevState.count !== this.state.count){
            document.title = `You clicked ${this.state.count} times`;
        }
    }
    
    render(){
        return(
            <div>
                <button onClick={()=>{this.handleClick()}}>Push me</button>
                <div>nr: {this.state.count}</div>
            </div>
        )
    }
}

export default Counter
```
02.02 React State - basic counter (functional components)
Tags: javascript, react
Published: 2022-10-23 10:53:08

App preview:
![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ridv6tkfl9g0c5ido4y3.gif)


Project files:
![An image of project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eik7basnzm9zoi9ikzid.png)



<hr/>

```react
import Counter from './Counter'
import './App.css'

function App() {
  return (
    <div className="app">
      <Counter/>
    </div>
  );
}

export default App;
```
<hr/>
```css
.app{
    background-color: lightskyblue;
    padding: 20px 10px;
}
```
<hr/>
<hr/>

```react
import React, { useState } from "react";

function Counter(){
  const [counter, handleClick] = useState(0);

  return (
    <div>
      <button onClick={() => ( handleClick(counter + 1)) }>Increment counter</button>
      {/* <button onClick={this.handleClick}>Increment counter</button> */}
      <div>Counter value is {counter}</div>
    </div>
  );
}

export default Counter
```
02.01 React State - basic counter (class components)
Tags: javascript, react
Published: 2022-10-23 10:52:40

App preview:
![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s1ka27tswfytjk2i3jg4.gif)



Project files:
![An image of project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7c7dx8dkn21eul2jnmzk.png)



<hr/>
src/App.js
```react
import Counter from './Counter'
import React from 'react';
import './App.css'

class App extends React.Component{
  render(){
    return (
      <div className="app">
        <Counter/>
      </div>
    );
  }
}

export default App;
```
<hr/>
src/App.css
```css
.app{
    background-color: lightskyblue;
    padding: 20px 10px;
}
```
<hr/>
<hr/>
src/Counter.jsx
```react
import React from "react";

class Counter extends React.Component {
  state = {
    counter: 0
  };

  handleClick = () => {
    this.setState((prevState) => ({ counter: prevState.counter + 1 }));
  };

  render() {
    const { counter } = this.state;

    return (
      <div>
        <button onClick={this.handleClick}>Increment counter</button>
        <div>Counter value is {counter}</div>
      </div>
    );
  }
}

export default Counter
```
01.03 Multiple props through multiple components (functional components)
Tags: javascript, react, tutorial, programming
Published: 2022-10-23 10:49:49

App preview:
![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7jz2qopgzba4pvfw00h.png)


Project files:
![An image of project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uh5nnigfxpsleptrl7z8.png)


<hr/>
src/App.js
```react
import './App.css';
import ParentComponent from './components/ParentComponent';

function App() {
  return (
    <div className="App">
      <h1>App.js</h1>
      <ParentComponent favoriteBand='The Beatles' favoriteAlbum='Abbey Road' favoriteSong='Here Comes the Sun'/>
    </div>
  );
}

export default App;
```
<hr/>
src/App.css
```css
.App{
    background-color: lightskyblue;
    padding: 20px 10px;
}
```
<hr/>
<hr/>
src/components/ParentComponent.jsx
```react
import ChildComponent from "./ChildComponent";
import './ParentComponent.css'

function ParentComponent(props){
    const {favoriteBand, favoriteAlbum, favoriteSong} = props

    return(
        <div className="ParentComponent">
            <h2>ParentComponent.jsx</h2>
            <ChildComponent 
                favoriteBand={favoriteBand} 
                favoriteAlbum={favoriteAlbum} 
                favoriteSong={favoriteSong}
            />
        </div>
    )
}

export default ParentComponent;
```
<hr/>
src/components/ParentComponent.css
```css
.ParentComponent{
    background-color: lightsalmon;
    padding: 10px 10px;
}
```
<hr/>
<hr/>
src/components/ChildComponent.jsx
```react
import './ChildComponent.css'

function ChildComponent(props){
    const {favoriteBand, favoriteAlbum, favoriteSong} = props

    return(
        <div className="ChildComponent">
            <h3>ChildComponent.jsx</h3>
            <p>//the props bellow are sent from <b>App.js</b></p>
            <p><b>Favorite Band:</b> {favoriteBand} </p>
            <p><b>Favorite Album:</b> {favoriteAlbum}</p>
            <p><b>Favorite Song:</b> {favoriteSong}</p>
        </div>
    )
}

export default ChildComponent;
```
<hr/>
src/components/ChildComponent.css
```css
.ChildComponent{
    background-color: lightgreen;
    padding: 10px 10px;
}
```
01.02 Pass props through multiple components (functional components)
Tags: javascript, react, tutorial, programming
Published: 2022-10-23 10:44:46

App preview:

![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ka1t5v5nag1gqdmi6olr.png)

Project files:

![An image of project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wcj1d5p679gm0irk7sy.png)

<hr/>
src/App.js
```react
import React from 'react';
import './App.css'
import ParentComponent from './components/ParentComponent';

function App() {
  return (
    <div className="app">
      <h2>App.js</h2>
      <ParentComponent  title="This string has been passed through props from App.js"/>
    </div>
  );
}

export default App;
```
<hr/>
src/App.css
```css
.app{
    background-color: lightskyblue;
    padding: 20px 10px;
}
```
<hr/>
<hr/>
src/components/ParentComponent.jsx
```react
import React from 'react'
import ChildComponent from './ChildComponent'
import './ParentComponent.css'

function ParentComponent(props) {
  const {title} = props
  return (
    <div className='parent-component'>
        <h3>ParentComponent.jsx </h3>
        <ChildComponent title={title}/>
    </div>
  )
}

export default ParentComponent
```
<hr/>
src/components/ParentComponent.css
```css
.parent-component{
    background-color: lightsalmon;
    padding: 10px 10px;
}
```
<hr/>
<hr/>
src/components/ChildComponent.jsx
```react
import React from "react";
import "./ChildComponent.css";

function ChildComponent(props) {
  return (
    <div className="child-component">
      <h4>ChildComponent.jsx</h4>
      <p> {props.title}</p>
    </div>
  );
}

export default ChildComponent;
```
<hr/>
src/components/ChildComponent.css
```css
.child-component{
    background-color: lightgreen;
    padding: 10px 10px;
}
```
01.01 Pass props to component (functional components)
Tags: javascript, react, tutorial, programming
Published: 2022-10-23 10:44:38

App preview:

![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kct3anpbonqvjld0ctvm.png)

<hr/>

Initial setup:
```bash
npx create-react-app actual-props-example
cd actual-props-example
rm src/App.test.js src/index.css src/logo.svg src/reportWebVitals.js src/setupTests.js 
mkdir src/components
cd ./src/components 
touch ./ParentComponent.jsx ./ParentComponent.css ./ChildComponent.jsx ./ChildComponent.css 
```

<hr/>

Project files:

![An image of project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xoev4p1dxrlzqi3la2el.png)

<hr/>
src/index.js:
```react
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);
```

<hr/>
src/App.js:
```react
import React from 'react';
import CustomComponent from './components/CustomComponent';
import './App.css'

function App() {
  return (
    <div className="app">
      <h2>App.js</h2>
      <CustomComponent  
        title="This string is passed through props from App.js"
      />
    </div>
  );
}

export default App;
```
<hr/>
src/App.css:
```css
.app{
    background-color: lightskyblue;
    padding: 20px 10px;
}
```
<hr/>
src/components/CustomComponent.jsx:
```react
import React from 'react'
import './CustomComponent.css'

function CustomComponent(props) {
  return (
    <div className='custom-component'>
        <h3>CustomComponent.jsx </h3>
        <p> {props.title}</p>
    </div>
  )
}

export default CustomComponent
```
<hr/>
src/components/CustomComponent.css:
```css
.custom-component{
    background-color: lightsalmon;
    padding: 10px 10px;
}
```
All you need to know about FastCGI Process Manager (FPM)
Published: 2022-10-23 10:41:53

---
title: All you need to know about FastCGI Process Manager (FPM)
published: true
description: We look into how to set up FastCGI Process Manager (FPM). What configuration options and considerations are important.
tags:
cover_image: https://i.ytimg.com/vi/hEXBgQ71rvE/maxresdefault.jpg
---

{% youtube hEXBgQ71rvE %}

We look into how to set up FastCGI Process Manager (FPM). What configuration options and considerations are important.
AWS Lambda Price Extractor - Python Utility
Tags: python, aws, serverless
Published: 2022-10-23 10:30:36

For a tool I'm developing, I wanted lambda prices by region. My requirement is that I need lambda type, price and region code. However, obtaining the lambda price by region is not straight forward. Especially if you need region code. If you need the lambda price and the region code, you need to make two separate http requests to AWS.

I thought the code could be useful to others, so I have shared it on my [github repository](https://github.com/hseera/aws-python-utilities/blob/main/lambda_type_price_to_csv.py). The remainder of this post will explain what I'm doing in the code to get lambda price for each region. 

The code has three main functions:

- get_price_by_region

- get_region_code

- price_to_csv

## 1: get_price_by_region()
This function make an http request and gets price for each lambda type for a region and save the result as a list.

```python
def get_price_by_region ():
    resp = requests.get(PRICE_BY_REGION_URL, headers=HEADERS)

    region_price_dict = resp.json()
 
    price_list=[]

    for key, val in region_price_dict['regions'].items():
        for item_key, item_val in val.items():
            price_list.append([key, item_key, item_val['price']])
            
    return (price_list)

```

## 2: get_region_code()
This function makes another http request to fetch region code and save the result as a list.

```python
def get_region_code ():
    resp = requests.get(REGION_CODE_URL, headers=HEADERS)

    region_code_dict = resp.json()
    
    region_list =[]

    for k,v in region_code_dict.items():
        region_list.append([k,v['code']])

            
    return (region_list)

```

## 3: price_to_csv()
The first function's output does not contain region code, this function merges the two lists and constructs a new dataframe using Python's "merge" function. The produced dataframe is saved to a csv file, which I may then utilise to execute other operations if necessary.

```python
def price_to_csv (price_list,code_list):
    df_price_list = pd.DataFrame (price_list, columns = ['Region Name', 'Lambda Type', 'Price'])
    
    df_code_list = pd.DataFrame(code_list, columns = ['Region Name', 'RegionCode'])
    
    df_price_by_code = df_price_list.merge(df_code_list)
    
    df_price_by_code.to_csv('./lambda_price_by_region_code.csv',index=False)

```

When the Python script is executed, the end result is a csv file with the following information about the lambda pricing.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jts7hn4vhdota29bn4vq.png)

------------------------------------------------------------------

Thanks for reading!

If you enjoyed this article feel free to share it on social media 🙂

Say Hello on: [Linkedin](https://www.linkedin.com/in/harinderseera/) | [Twitter](https://twitter.com/harinderseera) | [Polywork](https://www.polywork.com/harinderseera) 

Blogging: [Dev](https://dev.to/harinderseera) | [Hashnode](https://harinderseera.hashnode.dev/)

Github: [hseera](https://github.com/hseera)
Day31 of #100DaysOfCode
Tags: 100daysofcode, webdev, nextjs, javascript
Published: 2022-10-23 10:28:35

I finally found a way to fix the hamburger menu issue.

So the issue (I think) is that the documentation of Flowbite is incomplete and I have to do some trial and errors before I finally got it how I want it.

Before you learning coding, you thought all libraries and frameworks are well-documented.  Nothing can be further from the truth 😂.

I now understand (and internalized) the notion that the ability to read and understand documentations is key for any software engineer.  And I think I kinda earn a small well-done badge for encountering and fixing the issue on my own 😂.

With that said, now that the bugs are all fixed, I can now focus on developing new pages for Hashing.energy.

Today I finished the wireframes for the company section of the website.  I will probably spend next week working on the frontend (exciting). However, regarding the backend, I’m still not sure if I should continue using Notion as a CMS 😂. It’s a makeshift solution at best. So I will have to figure out what I’m going to use for CMS. Currently I’m  considering Contentful and Strapi.  In my business group, we are using Strapi for one of our websites.  And we are adding a blog feature for [Cryptodrilling](cryptodrilling.com). So I’m thinking if I should wait to see how these two work out and can decide later.  I just hope that Notion (and its API) can handle my current website now 😂.

Well, something to think about 💭
Tinh dầu CBD - Mỹ Phẩm CBD nhập khẩu Châu Âu - Hemp Sapa Việt Nam
Published: 2022-10-23 10:26:01

https://hempsapa.vn/ TINH DẦU CBD - Mỹ Phẩm CBD chất lượng cao✔️ CAM KẾT giấy tờ kiểm nghiệm đầy đủ chính hãng HempSapa✔️ Tư vấn điều trị bệnh MIỄN PHÍ cùng các chuyên gia tại Canada✔️ Anh✔️ EU✔️✔️✔️
19003420
Team@hempsapa.vn
50C Hoa Cau, Phường 7, Phú Nhuận, TP Hồ Chí Minh
https://scrapbox.io/hempsapavn
https://wakelet.com/@hempsapavn
https://www.bloggang.com/mainblog.php?id=hempsapavn
https://heylink.me/hempsapavn/
https://boosty.to/hempsapavn
Thinking about Pseudo Coding on a Sunday morning
Tags: beginners
Published: 2022-10-23 10:14:52

I just woke up and instead of putting my head down to study coding I went to put away the clean laundry that's drying on a rack. But can I use these chores to train my brain in coding? Absolutely, as the lesson told my I just watched!

Decomposition/Pattern Recognition/Abstraction/Algorithm

//Decomposition: Put away the dry clothes
//Put away my own clothes
//Put away my partner's clothes (don't worry, we take turns)
//Put away socks

//Pattern Recognition:
//My clothes go into my own wardrobe
//My partners' go into his
//All socks go into a box inside my partner's wardrobe

//Abstraction
//Ignore clothes that are still a bit damp.

//Sequence:
//Put away all clothes.
//  Conditional: if(piece of clothing is not clean){ 
//               put it inthe laundry basket
//          }else if(a piece of clothing is mine){
//          put folded piece in my wardrobe
//          }else if{
//          put folded piece in my partner's wardrobe
//          }
//  Loop: (for all socks on the drying rack){
//     put in partner's wardrobe but in a separate drawer
//     }


I think this makes sense? Will try to play this through in my head of other activities. It's fun :)
🖥️ Virtual machines and general ramblings
Tags: learning, vms, ramblings, writing
Published: 2022-10-23 09:44:45

So, before I get into the topic at hand, just want to convey the "good feelings" I'm having right now. So, there are a few things that have got me in such a cheerful mood tonight.



1. **I'm getting to type on my keyboard**. As I said in a previous post, I love am in love with my current keyboard (the Akko 3068B). Every time I type on it I enjoy it. Whether it is typing code, a dev.to post, or just jotting down my thoughts, typing on this keyboard is a dream.


2. **[The Jams](https://www.youtube.com/watch?v=Rc0s9Q9WROI)**. Currently I am jamming out to Machine Heads new album "ØF KINGDØM AND CRØWN". It's pump jams are coursing through my veins and getting my hyped up. This album is super solid and I enjoy listening to it.


3. **Tea.** I love me a cup of hot tea from the [gaiwan](https://www.google.com/search?q=gaiwan&sxsrf=ALiCzsbRZfapNUDlVkBRcZTxe61L6b_Rzg:1666492177192&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjz-_eRp_X6AhVxBEQIHWe8DzwQ_AUoAnoECAMQBA&biw=1536&bih=764&dpr=1.25#imgrc=uNfrbaw1z4UxCM). I'm currently sipping on some "5 years aged Sun-Dried Pu-erh. Nothing is more calming than a hot cup of tea. Especially when I'm combining it with the other two points mentioned. But, I think it's time I got to the topic at hand:



<u>

## **Virtual Machines!**
</u>


So, here lately I have really in the mood to try out new operating systems. So I've been booting up VirtualBox, VM Ware and trying out Proxmox 7. 

I've been messing around in various Linux distros as well as a few older versions of windows. It's been super cool. I've been learning a lot about various operating systems and I got to revisit a few of the classics.

The main reason why I've been OS hopping is because I am looking for a new OS to install on my laptop. I currently have Ubuntu installed and while I like it, something seems to be missing from it and I can't quite put my finger on it. So I have been trying out other distros hoping I can find the one that will be my daily driver. So far I have about 7 or 8 distros installed. I haven't had a chance to try them all out yet but, I am thinking I want to try one a week or something? I'm not really sure. I just know there are a lot of cool distros out there I haven't tried and, much like Pokémon, I "gotta try 'em all!"

On top of all of that, it has given me more exposer to virtual machines and the various issues that come along with them and how to trouble shoot them. Maybe later I will do a first impressions distro comparison? Not really sure.

But, that's really about it. I just wanted to ramble a little bit about the stuff I've been learning and talk a little about VMs. Thanks for reading, and have a wonderful day!

![signature](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qpdvj1gteb6jqst3olw.png)