teleren/devto huggingface dataset:
Two ways to generate random color - Daily JavaScript #5
Tags: javascript, node, webdev
Published: 2022-01-12 06:01:11

Why not make your own **color generator 🌈**?

### **Method 1** - Long method
```js
// Generate random color in hex format
const randomColor = () => {
    const letters = "0123456789ABCDEF";
    let color = "#";
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
```

### **Method  2** - Short and Best Method
```js
const randomColor = Math.floor(Math.random()*16777215).toString(16);
console.log("#" + randomColor)
```

***
Thank you for reading, have a nice day!

- Follow me on Twitter - [@codewithsnowbit](https://twitter.com/codewithsnowbit)
- Subscribe me on YouTube - [Code With SnowBit](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ?view_as=subscriber&sub_confirmation=1)
Redux Basics
Tags: redux, javascript, react, webdev
Published: 2022-01-12 05:51:48

> This is a guide to understand and use redux in your project in easiest way.

<!-- TABLE OF CONTENTS -->
<details>
  <summary>Table of Contents</summary>
  <ol>
    <li>
      <a href="#about-the-project">About Redux</a>
      <ul>
        <li><a href="#built-with">Lessons Learned</a></li>
        <li><a href="#built-with">Built With</a></li>
      </ul>
    </li>
    <li>
      <a href="#getting-started">Getting Started</a>
      <ul>
        <li><a href="#prerequisites">Prerequisites</a></li>
        <li><a href="#installation">Installation</a></li>
      </ul>
    </li>
    <li><a href="#usage">Usage</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#acknowledgments">Acknowledgments</a></li>
  </ol>
</details>



<!-- ABOUT THE PROJECT -->
## About Redux

- Centralize your application's state and logic.

### Lessons Learned

  **1. Reducer -** Function that takes current state and action (type of action + data) as an argument and return updated state.
  
  **2. Action -** Object that has type of action (basically name) and data to be passed to a reducer function.
  
  **3. Store -** Give us different methods to fetch or modify current state
  
      * getState() - Returns current state
      
      * dispatch() - call reducer function by passing action
      
      * subscribe() - listen to state change

### Built With

* [React.js](https://reactjs.org/)
* [Redux.js](https://reduxjs.org/)


<!-- GETTING STARTED -->
## Getting Started

### Prerequisites

* react
  ```javascript
  npx create-react-app app-name
  ```
  
* redux
  ```javascript
  npm install redux
  ```

<!-- USAGE EXAMPLES -->
## Usage

This is how you can use redux in your application

1. Create reducer.js file and write function that takes state and action and retuns updated state.
```javascript
function reducer(state =[], action){
  if(action.type === "type){
    <!--  Some Logic    -->
    return updatedState
  }
}
```

2. Create store.js file and export store
```javascript
import { createStore } from 'redux'

const store = createStore(reducer);

export default store;
```

3. Now you can use store variable to getState or dispatch (take action) or subscribe (listen to state change), etc
  - getState
  ```javascript
  store.getState()
  ```
  
  - dispatch
  ```javascript
  store.dispatch({
      type: "type",
      payload:{
          data: "data"
      }
  })
  ```
  
  - subscribe
  ```javascript
  store.subscribe(()=>{})
  ```


<!-- CONTACT -->
## Contact

Email - [ykumat@gmail.com](mailto:ykumat@gmail.com)
Twitter - [@yashkumat](https://twitter.com/yashkumat)
Github Profile: [https://github.com/yashkumat/](https://github.com/yashkumat)


<!-- ACKNOWLEDGMENTS -->
## Acknowledgments

* [Redux Tutorial - Learn Redux from Scratch by Prgramming with Mosh](https://youtu.be/poQXNp9ItL4)

<p align="right">(<a href="#top">back to top</a>)</p>
Polyfills made easy
Tags: javascript, webdev, beginners, programming
Published: 2022-01-12 05:41:20

Helloo, my fellow developers!!!

Let's talk about **Polyfills** today. If you are new to this terminology, I'll make sure that this will make complete sense to you.

Let's just begin...
 So, a polyfill basically is a piece of javascript code that is used to provide or fill in some functionality that one browser supports but other might not.

Lets make it easy for you to understand by taking an example.
Let us talk about **Array.prototype.forEach()**. The forEach() method executes a provided function once for each array element.

_forEach() calls a provided callbackFn function once for each element in an array in ascending index order._

```
const arr = [1, 2, 3, 4, 5]
arr.forEach(val => {
  console.log(val * 2)
})

// The above piece of code will take each element of that array/list and will multiply it by 2.
 2
 4
 6
 8
 10
```
Now lets pretend that we don't have support for _**forEach()**_.
`// Simulate browser incompatibility`
`Array.prototype.forEach = null`
 If we try to run the above code again we'll get the following error:

![Error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vf3aj346ne7z5186p15t.png)

Now let's write a very simple polyfill for forEach() .

```
if (!Array.prototype.forEach) {

  // polyfill
  Array.prototype.forEach = function (callback) {
    // callback here is the callback function
    // which actual .forEach() function accepts
    for (let value of this)
      callback(value)
  }
}
```
Now, if we re-run the forEach() method again, it will work perfectly fine.

Lets take a complete look at our code:

![polyfill of forEach()](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23x515r1tjfpbtrt5836.png)

_**Voilla**_, we just created a very very rough polyfill for forEach().
Hope you all liked it...
Book :Textbook for System Design Interviews
Tags: systems, design
Published: 2022-01-12 05:40:00

Recomendation: Textbook for System Design Interviews: https://systemdesign.org
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zv1iro58hk83vcyb31i5.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fxly9vk3d1ywgd820ud.png)
Self-Taught Developer Journal, Day 36: TOP DOM Manipulations and Events cont.
Tags: webdev, beginners, codenewbie, devjournal
Published: 2022-01-12 05:30:29

Today I learned...

## Targeting Nodes with Selectors
    
    <div id="container">
      <div class="image"></div>
      <div class="text"></div>
    </div>

Use CSS-style selectors and relationship properties.

    const container = document.querySelector('#container');

Use relationship selectors to identify a certain node based on its relationships to the other nodes around it.

    console.dir(container.firstElementChild);
    // select the first child of #container => image


## DOM methods
Used to manipulate our webpage with JavaScript. 

### Query Selectors
Used to target nodes.

* *element.querySelector(selector) returns reference to the first match of selector*
* *element.querySelectorAll(selectors) returns a “nodelist” containing references to all of the matches of the selectors*

**NOTE: For querySelectorAll, the return value is not an array, it’s really a “nodelist”. The nodelist can be converted into an array with Array.from() or the [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax).**

## Element Creation
Creates a new element into memory (**NOT INTO THE DOM**).
* *document.createElement(tagName, [options)*

The element can be configured by altering the styles, classes, etc. before being added to the webpage. For example:

### Append Elements
* *parentNode.appendChild(childNode) appends childNode as the last child of parentNode*
* *parentNode.insertBefore(newNode, referenceNode) inserts newNode into parentNode before referenceNode*

### Remove Elements
* *parentNode.removeChild(child) removes child from parentNode on the DOM and returns reference to child*

## Adding text content vs HTML content

    div.textContent = "Hello World!";
    // creates a text node and inserts it in div    

    div.innerHTML = "<span>Hello World!</span>";
    // renders the html inside div

**textContent** is preferable for adding text. **innerHTML** should be used only if necessary because it can create security risks if misused. An example would be vulnerability to JavaScript injections explained in [this video](https://www.youtube.com/watch?v=ns1LX6mEvyM&ab_channel=WebDevSimplified).

## Resources
[The Odin Project](https://www.theodinproject.com/paths/foundations/courses/foundations/)

## Additional Readings
[CSS Style Rules - Inline](http://domenlightenment.com/#6.2)
vite automatically generates type definitions for environment variables
Tags: vite, typescript
Published: 2022-01-12 04:51:51

When developing front-end web projects, we often need to use environment variables, and vite, as a very popular build tool recently, supports .env environment variable configuration files, and also supports the type of configuration environment variables. in _src/env.d.ts_ just create the interface `ImportMetaEnv`. The only bit of trouble: it's not automatic, but requires developers to manually add environment variables. -- This is why this plugin was created, it scans the environment variable configuration and automatically generates the interface `ImportMetaEnv` if it doesn't exist, or adds the missing environment variable field in the existing interface.

## design

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

## use

```sh
pnpm i -D @liuli-util/vite-plugin-env-dts-gen
```

Configure the plugin

```ts
//vite.config.ts
import { defineConfig } from 'vite'
import { envDtsGen } from '@liuli-util/vite-plugin-env-dts-gen'

export default defineConfig({
  plugins: [envDtsGen()],
})
```

> [Example](https://github.com/rxliuli/liuli-tools/tree/master/examples/vite-plugin-env-dts-gen-example)

## FAQ

### The default plugin has the following behavior

- When the `ImportMetaEnv` interface in `src/vite-env.d.ts` already contains fields, it will not be repeatedly added or replaced, but skipped. This behavior is mainly to allow users to customize environment variables
- never automatically clear an environment variable, even if it no longer exists in .env\*, for the same reason as above
- Forcibly generate an environment variable during build, even if there is no change, this behavior is to avoid building immediately after pulling the code for the first time
React is Nuking your Websites SEO Score, Here's why...
Tags: react, webdev, javascript, seo
Published: 2022-01-12 04:21:12

Compared to regular HTML/CSS based web pages, React.JS (without server-side rendering at least) is slightly worse from an SEO perspective. Although, this might change in the future.

Sure, having fast, responsive website with good url structure and all is important. But the most important thing is that search engines crawl your content in the first place.

Here’s the thing, most search engines have crawlers that first look at the HTML/CSS content to index your website. With sites developed with React, most content is generated by JavaScript code. Only HTML that the crawler can immediately see is a single div tag with nothing in it.

Sure, search engines have JS renderers too, but for them it is expensive and most search engines other than google don’t bother. (At least for now.)

So, you pretty much lose all your traffic from Bing / Yahoo / Other Search Engines to your competitors who don’t use SPA’s.

In case of google, things are a bit different. Google’s crawlers are advanced enough to be able to render the JavaScript to read and index your website’s content.

But it does that in two waves.

The first wave requests source code, crawls and indexes any present HTML and CSS, adds any present links to the crawl queue and downloads page response codes.

The second wave can occur a few hours to even a few weeks later, Google returns to the page when additional resources are available to fully render and index the JS generated content.

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

This was revealed at a 2018 Google I/O.

This means client-rendered SPA’s are definitely at a disadvantage even when it comes to search giant like google. The regular HTML content is crawled much more often that the JS-based content. Which puts your site at a certain disadvantage from an SEO perspective. Just my thoughts.
How stupid is Matlab accessing array syntax?
Tags: matlab, programming
Published: 2022-01-12 04:15:50

Here is how you define an array and print the **first** element in it
```matlab
v = [4 5 6 7];
disp(v(1));
```

Let not talk about the fact that matlab array starts with 1 for now. 

So what's the problem here? The functions also use `()` for receiving parameters. When you read this line without previous lines, `disp(v(1))` you have to ask yourself this question:
- v is a function or an array?

"I always read the previous lines" you may argue. But can you remember which one is a function, which one is an array in a long script with many functions and variables?

Now you have to remember `()` has two meanings. Well two usage of `()` near each other can create confusion.
The Passionate and Essentialist Programmer
Tags: beginners, programming, tutorial, productivity
Published: 2022-01-12 04:15:33

## Episode 1

## Title: The Beginning(A Quest For Novelty)


This is the 1st episode in my series _The Passionate and Essentialist Programmer_, in which i discuss the importance of having a purpose, becoming independent-minded and embarking on a quest for novelty in your coding career.I focused on the Why? of your journey where you'll learn how to start a quest for novelty not conformity, becoming an independent mind, not a conventional one.

I discussed in the podcast the Following Points:

- What's Your Purpose
- Think For Yourself- Becoming Independent-Minded
- A Quest For Novelty
- There Is No Rush To Learning

Listen and leave a comment please.

{% spotify spotify:episode:71SnPANJKW5HM0Ly9Binoo %}

The book of the week:
Rework: Change the way you work forever. by Jason Fried and David Heinemeier Hansson


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tiqtzkwc47u2ssuxv9f.jpeg)


### Please subscribe to the podcast, Share or tell a friend about it.
Featured in GreatLearning's CloudCast
Tags: aws, devops
Published: 2022-01-12 04:06:08

Success is not an overnight magic but an important milestone in your journey for consistently delivering quality work.


Yes, Nov 2018 to Dec 2021 (still continues..) been a great association with GreatLearning's [Post Graduate Programme in Cloud Computing](https://www.greatlearning.in/great-lakes-pgp-cloud-computing)(PGPCC) as a mentor, engaging with the learners over some weekends to share the best use cases, clarify their questions and brainstorm all about #awscloud, primarily focusing on Cloud Computing on AWS, Managed Services on AWS and CloudNative DevOps.

My passion for training and technical writing is exemplified through GreatLearnings. Good to spend some weekends engaging in tech conversations as a Mentor with diverse set of experts and pioneers, all at comfort of home. The only in-person attendee being my little boy, Yoogesh, who overhears most of the conversations and the side effect of that is [Cloud Dev at 10](https://dev.to/aws-heroes/clouddev-at-10-5dm2) 😊.

![GL Learners](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f96xx028u04oo7ksmass.png)

![GL Ratings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddmp12a3a1pe12aewa2l.png)

Thank you so much to GreatLearnings Team for featuring me as part of your CloudCast News Letter. Thats indeed a great gesture.

![Bhu NewsLetter Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ilfavvy85srujed7e2j.jpeg)

A big time fan of **Entertrainer** [Nirmala Mukherjee](https://www.linkedin.com/in/nirmallya)'s teaching and ofcourse the well thought PGPCC curriculum and delivery methodology coupled with labs and interaction with mentors.
It's pleasure to be part of the team where you have wonderful friends like [Kanchan Arora](https://www.linkedin.com/in/kanchanarora), [Shaurya Suman](https://www.linkedin.com/in/shaurya-suman-552941a1/), [Mamta Kajla](https://www.linkedin.com/in/mamta-kajla-5121bb190) to name a few. Thanks to [Deepak Shukla](https://www.linkedin.com/in/dsshkust/) and [Sathyajith Bhat](https://www.linkedin.com/in/sathyabhat/) for introducing me to GreatLearnings.

First ever alumni meet - **PGPCC Confluence** was organized by GreatLearnings team brought in a great feel to mentors and learners who have been on "virtual world".

![GL Alumnae meet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kw4r9j6k2e3ctqej5a0f.jpeg)

![GL Alumnae Meet Interaction](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0ii8dsw11f6cb5oi3sy.png)
No Code web app for front end
Tags: webdev, python, design, startup
Published: 2022-01-12 04:06:02

Hey,

My team and I are just about to launch a no code web app. Plug in your API and drag and drop to create a UI.

We'd love to hear the community's feedback and see what you will create with it.

check it out here : https://www.frontlyapp.com/

Happy Coding!
furne-store an E-Commerce Application
Tags: atlashackathon, mongodb, react, javascript
Published: 2022-01-12 03:48:38


### Overview of My Submission
[Note]: # (Please make sure the project links to the appropriate GitHub repository, and includes the [Apache-2 permissive license](https://www.apache.org/licenses/LICENSE-2.0)  and README.)
**_<u>furne-store</u>_** is an Online Furniture store. 
It is an e-commerce store. Where you can find all types of furniture all around the world. This is an STH (Shop to Home) Deliver Service. The website is built using MERN (MongoDB ExpressJs ReactJs NodeJs) stack.


### Submission Category: 

[Note]: # (E-Commerce Creation, Prime Time, Action Star, Automation Innovation, or Choose Your Own Adventure)
This Project comes under E-Commerce Creation


### Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

Live Link:
Website: https://furne-store.netlify.app/
Server: https://furne-store.herokuapp.com/

Github Links:
Frontend: https://github.com/lmas3009/furne-store
Backaned: https://github.com/lmas3009/furne-store-server

You can start collaborating this project throung clone this project.

For Frontend
```
git clone https://github.com/lmas3009/furne-store.git
```

For Backend
```
git clone https://github.com/lmas3009/furne-store-server.git
```



### Additional Resources / Info

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. Prizes for winning projects with multiple collaborators will be sent to the person who posts this submission and they will distribute the prize evenly.)


Screenshots of the Project 

This is Landing Page
![Landing Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ligrh555be3g5g68mw4n.png)


This is Home Page
![Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/it3jk2mglsdtt1bjmkol.png)


This is Items View from Home Page
![Items View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7rt2giovlzp12ybaw6g.png)


This is Cart Page
![Cart Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mv0rpm5p1q82lhkswzpy.png)


This is Invoice Page
![Invoice Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zdkelh89ni8j2ndxtus4.png)


This is Short Video on this Project

{% youtube 4QQ718MHrzI %}

#Technology Used:


##<u>Frontend</u>
1. ReactJs 
2. TailwindCSS
3. Axios


##<u>Backend</u>
1. Node Js
2. Mongoose Js
3. Express Js
4. MongoDB


For Authentication i used **oAuth** Google Sign In


This is my first time building this e-commerce website from the scratch. Feel free to post comments on this project.
Laravel 8 Image Upload And Display Example
Tags: laravel, laravel8, imageupload, fileupload
Published: 2022-01-12 03:10:11

In this article we will see laravel 8 image upload and display example. In this example you will learn about how to image upload with database store and image store in public folder.

Here we will see laravel 8 image upload and display example, In  laravel 8 image upload with preview in we will create two routes, one for get method and second for post method and also we are creating basic form with file input. 

So, you have to simple select image and then it will upload in "images" directory of public folder.

Let's see  laravel 8 image upload and preview example.

```
Step 1 : Add Routes for Laravel 8 Image Upload Example
Step 2 : Create Controller
Step 3 : Create Blade File
```

And finally you will get result like below image.


![Laravel 8 Image Upload And Display Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v19hrtuebztv2dvu6n2e.png)

---

> **_[Read More : Laravel 8 Image Upload And Display Example](https://techsolutionstuff.com/post/laravel-8-image-upload-and-display-example)_**
Coder is Github Codespaces, but for the Enterprise
Tags: productivity, cloud, vscode, development
Published: 2022-01-12 02:35:35

Part of my responsibilities as the Director of Infrastructure at [KazooHR](https://www.kazoohr.com/) is to improve the developer experience.  We have high standards with the quality of code that's shipped, so it's important that our team members are provided with tooling that makes their job both easier and enjoyable.  

After getting a taste of cloud development from [Github Codespaces](https://github.com/features/codespaces
) in the Fall of 2020, I began to search for an alternative solution that would fit KazooHR's enterprise grade requirements.  Eventually, I came across [Coder](https://coder.com/
), and in the Spring of 2021 we signed a one-year contract with the vendor to provide the solution.  Why did we pick coder?  [I talk about a lot of the benefits in a published interview](https://coder.com/blog/coder-customer-spotlight-kazoo), but strategically it boiled down to a few key points:
- **We wanted to provision instances with more than 2GB of memory.**  Github doesn't allow you to configure resources for CodeSpaces.  
- **We didn't want to make sacrifices to our cloud security.**  If the instances were hosted outside of our infrastructure, then we'd have to decide on a trade-off between security & what you could use the instance to work on.  

Nearly a year later, our experience with Coder has been great.  The implementation process was easy for my SRE team to execute, and our software engineers have adopted it en mass.  It's safe to say this point, cloud development is here to stay at KazooHR.  

Have you tried Coder, Codespaces, or a different solution for cloud development?  Share your questions & comments below!
Our first game, "Diaspora" steam demo version is released.
Tags: gamedev, indiedev, game
Published: 2022-01-12 02:18:40

Genre: side-scroll adventure game.

Background: It is a story about sheep and boy wandering to avoid constantly approaching threats against the backdrop of an extinct world.

Characteristic: 
- An adventure game centered on a story.
- Simple manipulation.
- Various stages and puzzle themes.

We've released a demo version!
We are working hard to officially release it!

Steam Link : https://store.steampowered.com/app/1821970/Diaspora/
How CallIndex incrementation works in react useState under the hood ?
Published: 2022-01-12 02:06:34

 I'm currently learning how React works under the hood and built a custom useState from scratch following the tutorials on Youtube. 
But I'm having trouble understanding how callIndex is incremented and why do I need to set currentIndex variables which basically take the callIndex value.

The code works like this - 
 Every time the useState function is called, the **callIndex** variables would be incremented by 1. 
In this code, I called useState 3 times. So, the **callIndex** value would be 3.

My misunderstanding and confusion starts here -  when I called the **setState** function, it'll first assign the newValue to the **stateValues** but in which index will it be changed.

Are there any articles or tutorials explaining how this is working ?
![how useState work under the hood](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7eybefd40o1c84dmmwf2.png)