teleren/devto huggingface dataset:
Get Started With Node.Js
Tags: node, javascript, beginners, divuzki
Published: 2022-08-16 19:06:00

**TLDR**: In this article you will learn how to get started with node.js and use http module to create a server

##What's Node.js
Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on a JavaScript Engine and executes JavaScript code outside a web browser, which was designed to build scalable network applications.

To access web pages of any web application, you need a web server. The web server will handle all the http requests for the web application e.g IIS is a web server for ASP.NET web applications and Apache is a web server for PHP or Java web applications.

Node.js provides capabilities to create your own web server which will handle HTTP requests asynchronously. You can use IIS or Apache to run Node.js web application but it is recommended to use Node.js web server

###Installation
Download Node.js from the official website [https://nodejs.org/en/download](https://nodejs.org/en/download/)

> When you install node.js `node` `npm` and `npx` will be added to your [Environment Variable](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjDk5rLgMz5AhUCGewKHZYHAu8QFnoECAMQAQ&url=https%3A%2F%2Fwww.tutorialspoint.com%2Fnodejs%2Fnodejs_environment_setup.htm&usg=AOvVaw3pllfadOZBlF1liplqothm) automatically

####Writing your first Node.js Program
Create a folder then type `npm init -y` to create a packages.json where all your dependencies you install will be saved. Node have some already installed dependencies, and **`http`** is part of them.

In your folder create a file named index.js
```javascript
var http = require('http'); // 1 - Import Node.js core module

var server = http.createServer(function (req, res) {   // 2 - creating server

    //handle incomming requests here..

});

server.listen(5000); //3 - listen for any incoming requests

console.log('Node.js web server at port 5000 is running..')
```

In the above example, we import the http module using **require()** function. The http module is a core module of Node.js, so no need to install it using NPM. The next step is to call **createServer()** method of http and specify callback function with request and response parameter. Finally, call **listen()** method of server object which was returned from **createServer()** method with port number, to start listening to incoming requests on port 5000. You can specify any unused port here.

Run the above web server by writing `node server.js` command in command prompt or terminal window and it will display message as shown below:
```
$ node server.js
Node.js web server at port 5000 is running...
```
This is how you create a Node.js web server using simple steps.

> Check out my github [Divuzki](https://github.com/Divuzki/)
Gif Widget : "Paint it Black"
Tags: template, tool, gif, javascript
Published: 2022-08-16 19:02:01


---
title: Gif Widget : "Paint it Black"
published: true
description: A batteries included starter kit to create a toolbar app in gif.com.ai.
tags: template, tool, gif, js
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdv1wkvammu85r3joqjq.png
# Use a ratio of 100:42 for best results.
---

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8hrgyy96afd5ysf8314.png">
  <figcaption>The template includes everything you need to create a  toolbar app in [gif.com.ai](https://gif.com.ai)</figcaption>
</figure>

Today we will do a teardown of the "Paint it Black" widget. This is a very basic widget that you pin to your toolbar. The template to the "Paint it Black" widget is included at the bottom of this post.

____
<center>Comes in two parts:</center>
____

##__1) JS Context__##

The JS consists of a single jquery selector. 

Every time the toolbar button is clicked the code is executed, resulting in everything in the canvas turning grayscale.

```javascript 
$('#gifcanvas > *').css('filter', 'grayscale(1)');
```

##__2) Settings Context__##

We included the `title`, `description` and `mode` properties in settings. The title and description are straight forward additions.

Note the special `mode` property with the value of `pin`. Including this property and setting the value to `pin` tells our gif webtop that this item belongs in the toolbar.

```json
{
    title: "Paint it BLACK",
    description: "No colors anymore I want them to turn black. Turns everything in the gif canvas grayscale.",
    mode: "pin"
}
```

Check out "Paint it Black" with our starter template below.

#### [Open template](https://gif.com.ai?id=QmPd9kxXj6MjaVR9S7dzdLAt7Q2AjScHKa7gDm771xk16S)
Deep cloning of an object in JavaScript...
Tags: javascript, webdev, programming, learn
Published: 2022-08-16 19:00:00

As JavaScript developers, we most often than not come across a situation where we want to clone an object and reuse it to perform some operations.

And we usually follow well-known approaches to deep clone the object:-

- `lodash's cloneDeep method`
- `JSON.parse(JSON.stringify(object))`

What if I say that you are not supposed to use the above two approaches and you should create your custom method to deep clone the object?

I have an answer for that. Let's write a utility method that would help us in achieving the deep cloning of an object.

## Example

Let us say that I have a nested object as below

```
let emptyStack = {
  feTools: 'JS, React, NextJS, Tailwindcss, Netlify',
  react: {
    baseConcepts: 'props, states, hooks',
    advancedConcepts: {
      hoc: 'composition of the functions',
      contextApi: 'Sharing the data without prop drilling'
    }
  }
}
```

So in the above, as you can see we have the nested objects inside `emptyStack`. Let us try to understand and evaluate what all steps are required to be executed to achieve the deep cloning of an object.

## Pseudo code

Steps:

1. Initialize a new empty object
2. Iterate over the keys of an object and check if the key-value pair is an object
3. And based on the result of Step#2 update the empty object with the new properties.
4. Repeat the Step#2 and #3 till the last element of an object is evaluated.

## The ultimate utility method

```
function deepCopy(currentObj) {
  let newObj = Array.isArray(currentObj) ? [] : {}; //Step#1
  for (let key in currentObj) { //Step#2
    let property = currentObj[key];
    if (typeof property === "object") {
      newObj[key] = deepCopy(property); //Step#3
    } else {
      newObj[key] = property; //Step#3
    }
  }
  return newObj;
}
```

## Usage

```
let deepClonedObject = deepCopy(emptyStack)

console.log(`${JSON.stringify(deepClonedObject)}`)
/** Output
{"feTools":"JS, React, NextJS, Tailwindcss, Netlify","react":{"baseConcepts":"props, states, hooks","advancedConcepts":{"hoc":"composition of the functions","contextApi":"Sharing the data without prop drilling"}}} */
```

## What all concepts are used in the above method?
- Recursive function
- Object keys iteration

![Recursive function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tumwsya4lp2a77f7gy1h.png)

## Conclusion

Deep cloning an object is really useful in the scenarios where you want the back referencing to happen for a cloned object.
There are more posts on the way related to the lists...So keep reading.

Thanks in advance for reading this article...🚀

*I am more than happy to connect with you on*

- [@twitter](https://twitter.com/_nitinreddy3)
- [@LinkedIn](https://www.linkedin.com/in/nitinreddy3/)

*You can also find me on*

- [@Github](https://github.com/nitinreddy3)
- [@DEV](https://dev.to/nitinreddy3)
- [@Medium](https://medium.com/@nitinreddy3)
Quarto Challenge
Tags: programming, python, aws, datascience
Published: 2022-08-16 18:37:50

Quatro is a 2 player game invented by Blaies Müller.

It is played on a 4 X 4 board with 16 pieces each of which is either

Red or Blue
Short or Tall
Hollow or Solid
Circular or Square
The game begins with one player choosing the piece and the other placing it on the board. A player wins by placing 4 pieces on the board horizontally, vertically or diagonally all of which have a common attribute ( red or tall or hollow etc ).

In this game, each of the 16 pieces are represented using 4 bits.

Red or Blue ( 0 or 1 respectively forming the most significant bit )
Short or Tall ( 0 or 1 respectively forming the 3rd bit )
Hollow or Solid ( 0 or 1 respectively forming the 2nd bit )
Circular or Square ( 0 or 1 respectively forming the least significant bit )
So, a Red Tall Hollow Circular piece is represented by ( 0100 = 4 )

Input Format
The first line of the input contains the player id 1 or 2. The second line of the input is a string PICK or PLACE indicating whether a player has to pick a piece or place an already picked piece on the board. 4 lines follow, each line containing 4 space separated integers ( -1 indicating an empty slot on the board and a positive number indicating a piece ).
Next line contains N, total number of pieces left to be placed on the board.
N lines follow each line containing the decimal representation of the piece.
An optional next line contains an integer indicating the piece to be placed on the board if the move is PLACE.

Board is indexed according to Matrix Convention

Output Format

If the input is PICK, out of the available pieces, pick one to be placed by our opponent on the board and print its number to STDOUT.
If the input is PLACE, print 2 space separated integers indicating the row and column where the piece has to be placed.

Sample Input #00

> 2
> PICK
> -1 -1 1 -1
> -1 -1 -1 -1
> 10 0 14 15
> 9 -1 -1 12
> 9
> 2
> 3
> 4
> 5
> 6
> 7
> 8
> 11
> 13
Sample Output #00

> 7
Explanation #00

Here, the 2nd player on receiving the input, PICKs 7 ( Red Tall Hollow Circular ) piece to be placed on the board whose position is decided by the opponent.

Sample Input #01

> 1
> PLACE
> -1 -1 1 -1
> -1 -1 -1 -1
> 10 0 14 15
> 9 -1 -1 12
> 8
> 2
> 3
> 4
> 5
> 6
> 8
> 11
> 13
> 7
Sample Output #01

> 1 1
Explanation #01

On receiving this input, the 1st player decides to place 7 ( the last integer in input ) at the position 1 1.

Sample Input #02

> 2
> PLACE
> 2 -1 1 -1
> -1 -1 -1 -1
> 10 0 14 15
> 9 -1 -1 12
> 7
> 4
> 5
> 6
> 7
> 8
> 11
> 13
> 3
Sample Output #02
> 1 0
Explanation #02

After placing 3 at 1 0, the 2nd player wins the game as

2 3 10 9 ( the first column ) all share the same 2nd most significant bit which is 0.

0010 0011 1010 1001

as you can see, the 2nd most significant bit is all 0 and therefore, all the pieces have the common attribute of being SHORT.

* > Submit your code down below
How to convert an int type value to a string type value in Go or Golang?
Tags: go
Published: 2022-08-16 18:37:30

---
  title: How to convert an int type value to a string type value in Go or Golang?
  published: true
  tags: Go
  date: Wed Aug 17 2022 00:07:30 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/convert-int-type-value-to-string-type-value-go-golang
  cover_image: https://melvingeorge.me/_next/static/images/main-af391c9695a4c0d3f3eeaf7c45194cfc.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/convert-int-type-value-to-string-type-value-go-golang)
  
To convert an `int` type value to a `string` type value, you can use the `Sprint()` method from the `fmt` standard package in Go or Golang.

The `Sprint()` method accepts a value of any type and returns the corresponding `string` type version of the value.

For example, let's say we need to convert an `int` type value of `9000` to its `string` type value. To do that we can use the `Sprint()` method like this,

```go
package main

import "fmt"

func main() {
    // an `int` type value
    intNum := 9000

    // convert the `intNum` value to a `string` type value
    // using the `Sprint()` method from the `fmt` package
    strNum := fmt.Sprint(intNum)

    // log to console
    fmt.Println(strNum) // "9000"
}
```

As you can see from the above code that the `int` type is successfully converted to its corresponding `string` type. Yay 🥳.

See the above code live in [The Go Playground](https://go.dev/play/p/euVN-LDI0VU).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
Crie sua página de perfil hoje sem nenhum esforço e de graça! 🤑
Tags: webdev, programming, beginners, python
Published: 2022-08-16 18:33:00

Já pensou em criar sua página de perfil para mostrar seus projetos do GitHub sem nenhum esforço? E o melhor, de graça?!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rp0yjtjzicoft237bnh.gif)

O [projeto](https://github.com/rafaelbmateus/me) pega as informações do utilizando a [api pública do github](https://docs.github.com/en/rest) e monta uma página de perfil para expor os seus repositórios, sem precisar alterar nada no código.

A pipeline do github actions vai gerar uma página estática usando python com suas informações. Você vai poder usar o link para compartilhar com as suas próprias meta tags SEO's.

Para criar a sua própria página, basta [fazer um fork do repositório](https://github.com/rafaelbmateus/me/fork) e shazam... estará tudo pronto. Você não precisará fazer mais nada, nem mesmo alterar uma linha de código (a menos que queira).

Para mostrar os seus repositórios no catálogo de projetos basta adicionar a tag "me" em cada repositório, e eles apareceram na sua página.

Repositório: https://lnkd.in/eBGgrmQF
Demo: https://lnkd.in/eRDgpSJP
forEach() in JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2022-08-16 18:18:00

The forEach() method in JavaScript does not have a built-in return value like methods such as map() and filter() do but its generic properties make it very flexible as whatever callback function is passed in can have whatever functionality we want it to have. 

The forEach() method will execute a given function for each array item in an ascending index order.  

The callback function for forEach() will be invoked with three given arguments: 

- The **value** of the element 
- The **index** of the element 
- The **array** object being traversed 


You can print values of an array to the console for visualization of the functionality. 

e.g.
const numbers = [1, 2, 3, 4, 5]
numbers.forEach(itemLog);

function itemLog(item, index, array) {
   console.log(item);
}

1
2
3
4
5

This example shows the numbers in the array are simply being printed to the console. 

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

forEach() also allows the user to display the position, or index, of each value in the array. 

e.g.

const numbers = [1, 2, 3, 4, 5]
numbers.forEach(itemLog);

function itemLog(item, index, array) {
   console.log('a[' + index + '] = ' + item);
}

a[0] = 1
a[1] = 2
a[2] = 3
a[3] = 4
a[4] = 5

This example displays the index position of each value in the array.

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

const numbers = [1, 2, 3, 4, 5]
numbers.forEach(itemLog);

function itemLog(item, index, array) {
   console.log(array)

[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5]

This example displays the array being printed as called. 

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

If given an array of numbers, forEach() can also be used to provide the sum of those values in the array. 

For this example, I will use an arrow function to show how the code written above can be condensed. 

const numbers = [1, 2, 3, 4, 5]

let sum = 0
// To return the sum of an array, it must first start at 0 so, let sum = 0

numbers.forEach(item => {
   sum += item
)}

console.log(sum); 

15

The value of 15 will be printed to the console as it is the sum of the values provided in the array. 

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

forEach() is not the most useful of the JavaScript array methods but it offers a good alternative to writing lengthy for loops and provides a good visualization of the nature and behavior of arrays when they are being targeted with different methods. 

Resources:

https://www.youtube.com/watch?v=SXb5LN_opbA&ab_channel=FlorinPop

https://www.w3schools.com/jsref/jsref_forEach.asp 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
Angular: Design Pop Over
Tags: javascript, typescript, angular, css
Published: 2022-08-16 18:11:45

In almost every SPA, popover is very much used component in Angular. 

Here, I am going to design simple pop over. Someone, who are going to make use of this can improve further based on your requirements. 

Here is the code:

```html
<!--component.html-->
<p (mouseover)="showPopOver = true" (mouseleave)="showPopOver = false">
  Show Pop Over!
</p>

<div *ngIf="showPopOver" class="pop-over">
  <p>It's a pop-over</p>
</div>
```
```ts
//component.ts
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  showPopOver = false;
}
```

```scss
//component.scss
p {
  cursor: pointer;
}

.pop-over {
  position: absolute;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  border-radius: 10px;
  width: 16rem;
  padding: 8rem;
  z-index: 1;
  box-shadow: 5px 10px grey;
}

.pop-over::before {
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent grey transparent;
  top: -20px;
  left: 4px;
  content: '';
  position: absolute;
}
```
Here you can see the same in live:

Hover over `Show Pop over!` and observe pop over being shown. 

{% embed https://angular-ivy-hnuxva.stackblitz.io/ %}

You can follow me here: https://twitter.com/urstrulyvishwak

Thanks.
Certificate Watch
Published: 2022-08-16 17:49:17

---
title: Certificate Watch
published: true
description: 
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbv0wl9erjtfe3tprjnv.png
# Use a ratio of 100:42 for best results.
---
Your business depends on online assets:


- Applications
- Website
- Company Email
- Chat/Messaging Service

They all need to be secure and use TLS.


As such, they all make use of certificates.


Certificates have a validity range, that means that they expire, with all the issues and disruptions  that it brings with it.


You either keep watch on that or have a partner that does that for you.


If you think we can be that partner for you, don't hesitate to get in touch:


https://kevwe.com/message
Package.json not showing installed packages in Dependencies
Tags: npm, packagejson, not, displaying
Published: 2022-08-16 17:37:28

I’ve been Installing react-router-dom and other sorts of packages more than couple times but after successful Installation I won’t find them in dependencies in Package.json….
I’ve tried some way to make them appear like using —-save but unfortunately still the same 
Anyone With a Solution to this 🙏
@devtonight 
@dev_frustrated
[Redis Hackathon Submission Post Placeholder Title]
Tags: redishackathon
Published: 2022-08-16 17:20:05

[Instructions]: # (To submit to the Redis Hackathon on DEV, please fill out all sections. DELETE ALL NOTES, reminders, and guidelines before publishing.)


### Overview of My Submission
[Note]: # (Share what you built, how you built it, and the inspiration behind the idea! Please make sure the project links to the appropriate GitHub repository, and includes the [MIT](https://choosealicense.com/licenses/mit/), [Apache](https://www.apache.org/licenses/), [BSD-2](https://opensource.org/licenses/BSD-2-Clause), [BSD-3](https://opensource.org/licenses/BSD-3-Clause), or [Commons Clause](https://commonsclause.com/) license and a README.)


### Submission Category: 

[Note]: # (Select between Minimalism Magicians, Microservice Mavens, MEAN/MERN Mavericks, Wacky Wildcards – Descriptions of requirements listed in the announcement post.)

### [Optional: Video Explainer of My Project]

[Note]: # (This is where you can embed the optional bonus video you created to accompany your submission. Ensure your video is published publicly to YouTube and you’ve used the embed tag here to share it with us. By opting to include a video, you will be eligible for BONUS prizes. Learn more in the announcement post.)

### Language Used
[Note]: # (Select the language you used for your project – must be one of the following: C#/ASP.NET Core, Java/Spring, JS/TS/Node.js, Python)


### Link to Code

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

BTW, your Github code’s README file should contain the details as [per this template](https://github.com/redis-developer/hackathon-docs/blob/main/README.md).

### Additional Resources / Info

[Note:] # (Be sure to link to any open source projects that are using your workflow!)

[Note:] # Screenshots/demo videos are encouraged!

### Collaborators

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

[Note]: # (All collaborators with DEV profiles listed here will receive a badge, however, prizes including sticker packs will only be sent to the member who publishes the post, with the person expected to distribute the prizes evenly amongst their collaborators.)

[Reminder]: # (Submissions are due on August 29th, 2022 @ 11:59 PM UTC).

- - - 

[Note]: # (Please ensure  that the footer content below is part of your post when publishing. Please delete this note in parentheses but do not delete the content below.)


* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._
I wrote a state management npm - Any State
Tags: typescrpit, react, solidjs, statemanagement
Published: 2022-08-16 17:15:27

---
title: I wrote a state management npm - Any State
published: true
description: 
tags: typescrpit, reactjs, solidjs, statemanagement
---
### Features:
Lightweight object state management
Open Source Project
Small App Size (~2Kb)
Easy to use with nay framework, just a callback on change

### About:
AnyState is an open source programs built using Typescript (for a more secure environment).

### Usage

Initialize anyState object with createStore()
```javascript
  const anyState =  createStore({
    name: 'John',
    age: 30,
    children: [{
      name: 'Bob',
      age: 5,
    }]
  });
```

Set state
```javascript
  anyState.setState({
    name: 'John',
    age: 30,
    children: [{
      name: 'Bob',
      age: 5,
    }]
  });
```
Get state
```javascript
  const state = anyState.getState();
```

Set item
```javascript
  // const path = 'name';
  const path = 'children[0].name'; // the path to the item
  anyState.setItem(path, 'Jane');
```

Get item
```javascript
  const path = 'children[0]';
  const child = anyState.getItem(path);
```

Watch onChange
```javascript
  const path = 'name'; // path to item
  anyState.watch(path, (nextState, prevState) => {
     // do anything
  });
```
### Examples
[React Todo](https://github.com/vyquocvu/anystate/blob/main/examples/todo-react)

[Solid Todo](https://github.com/vyquocvu/anystate/blob/main/examples/todo-solid)


### Links:
GitHub: https://github.com/vyquocvu/anystate
Npm: https://www.npmjs.com/package/anystate
MySite: https://vyquocvu.co/

Happy coding! 🎉
Accepted any advices.