teleren/devto huggingface dataset:
Why should one write?
Tags: discuss
Published: 2022-08-20 18:54:52

**Caution**: Who should read this post? People who are wondering why should you start blogging should go ahead.

I have been thinking for a long, _**why should I write any technical blog when there is already plenty of it**_?

You know, there are several songs on the same topic "Love", "Affair", "Heartbreak" and "Life" etc. 
There are several blogs on "Java", "Threads", "Redis", "Individual contribution", "Python vs Go" and whatnot.

But why should there be several sites like medium.com, dev.to, and others? Why they are popular too? Isn’t one site enough? Isn’t one official doc enough? Why there is so much content creation on the same topics and still the world is crazy for it?

**Why is this tradition not getting old**? Why are songs with the same feeling keep publishing? Although all have the same context.

**The answer lies in the question** only. See in this world, people were attending "Satsang" and they are and they will be in the future too. And you will be surprised to know that speaker explains the same book each time.

Because Every song, every speaker, every content creator, every writer, and every philosopher has his own style. People can’t survive on one singer, one lyricist, one content creator, and one poet. And they admire a few of them as per their preferences.  

This way we have **healthy competition** too and monopoly is avoided. So keep writing, even if it is not so perfect. Why? Because doing the same habit every day will make you addicted to it. 
you should not only write to influence others or to be popular or to build your network but to better describe yourself, to improve yourself, and to learn more in new ways. The prior impacts would be on your side.
 
**Feel free to comment** to add your thoughts to this topic. I would be more happy to learn more.
How to start learning web dev?
Tags: beginners, programming, webdev
Published: 2022-08-20 18:35:00

Hello folks, I am a new developer and I really interested about web developer and full stack. 
but I’m also a little a bit confusing how to start. 

If the order that I write here is okay to do? 

1.HTML 
2.CSS 
3.js 
4.Reactjs 
5.Nodejs 
6.mongodb 

When developers start to build they  web they start from the design before the logic of the code ? 
Or the logic of the web and then the design of the web? 
 
if someone have some article how to start it’s will be great. 
And again be a excuse because I am new in this world and this community. 
 
Thanks for your help!!
PROJECT - Random Color Generator
Tags: javascript, webdev, beginners, programming
Published: 2022-08-20 18:29:14

Applications that have a client side facing front end can allow developers to create user interfaces that can be used to interact with different parts of your application. The process of taking input data and using this information to dictate parameters in the code.

We can first start by creating a variable with an array of possible characters, this array will be used to generate a HEX color code to be used in our CSS.

``` 
// Initialize Random HEX Color Code
const hexColorCode = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f" ];
``` 
In order to manipulate the CSS we need to select the different elements that we want to change, we can use the window object to select the different Elements by passing in each of their IDs.
```
// Initialize All Required DOM Elements
const mainSection = document.getElementById("mainSection");
const pickColor = document.getElementById("pickColor");
const pickButton = document.getElementById("pickButton");
// const copyButton = document.getElementById("copyButton");
``` 
To construct our HEX value for our color we can use a for loop to cycle through the hexColorCode array randomizing the selections until 6 characters are selected.
```
// Initialize the Random HEX Color Picker
pickButton.addEventListener("click", () => {
  let hexColorName = "#";
  for (let i = 0; i < 6; i++) {
    hexColorName += hexColorCode[getRandomArray()];
  }
  pickColor.style.color = hexColorName;
  pickColor.textContent = hexColorName;
  mainSection.style.backgroundColor = hexColorName;
});

const getRandomArray = () => {
  return Math.floor(Math.random() * hexColorCode.length);
};
``` 

Pressing the button repeatedly will genereate new HEX color codes from the array, and than applying it to the elements on our page to change the CSS color.



FULL CODE
``` 
// Initialize Random HEX Color Code
const hexColorCode = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f" ];

// Initialize All Required DOM Elements
const mainSection = document.getElementById("mainSection");
const pickColor = document.getElementById("pickColor");
const pickButton = document.getElementById("pickButton");
// const copyButton = document.getElementById("copyButton");

// Initialize the Random HEX Color Picker
pickButton.addEventListener("click", () => {
  let hexColorName = "#";
  for (let i = 0; i < 6; i++) {
    hexColorName += hexColorCode[getRandomArray()];
  }
  pickColor.style.color = hexColorName;
  pickColor.textContent = hexColorName;
  mainSection.style.backgroundColor = hexColorName;
});

const getRandomArray = () => {
  return Math.floor(Math.random() * hexColorCode.length);
};
```
How to call an API with fetch()
Tags: javascript, beginners, programming, api
Published: 2022-08-20 18:22:34

The Fetch API provides an interface for fetching resources using the Request and Response objects, allowing them to be used anywhere that might require you to generate a response programmatically. For making a request and fetching a resource, use the fetch() method. 

First, we would need to define that we are using the fetch() method and pass in the URL as a parameter. 

```
fetch("YOUR_URL")
``` 

After the URL is passed in, the .then() method will give you the ability to work with the data object that is returned. Use the data response to work with the data that is returned from the call.

```
    .then(response => {
        // handle the response
        console.log(data);
    })
```

In the case of errors, using the .catch() method we are able to see the output in our console, and handle any errors that are incoming during the fetch() call.

```
    .catch(error => {
        // handle the error
        console.log(error );
    });
``` 

With the basics of calling an API and dealing with the data response you can use this information to expand on the different types of data that you can work with, adding more functionality and automation to your applications.

```
fetch("YOUR_URL")
    .then(response => {
        // handle the response
        console.log(data);
    })
    .catch(error => {
        // handle the error
        console.log(error );
    });
```
Github Copilot trial ends, now what?
Tags: ai, tooling
Published: 2022-08-20 17:50:00


![Image of some aleatory code generated by copilot tool](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5nqz2gu2azxk9fg9yhm.png)

- If you’re a student or a maintainer for popular open source projects, GitHub Copilot remains free. Otherwise, pay for it!
 
### What are you planning to do? 
### Are you considering paying for this tool?
### Does your company support you on this feature?
### Do you think it worths the price?

---
[duar.ch](https://duar.ch)
Flood Fill - using Recursion - Backtracking
Tags: javascript, leetcode
Published: 2022-08-20 17:34:00

Solution 1 - Keeping track of row & column indices to avoid undefined case
```
var floodFill = function(image, sr, sc, color) {
    const fill = (i, j, val) => {
        image[i][j] = color;
        if (i > 0 && val == image[i - 1][j]) fill(i - 1, j, val);
        if (j > 0 && val == image[i][j - 1]) fill(i, j - 1, val);
        if (i < image.length - 1  && val == image[i + 1][j]) fill(i + 1, j, val);
        if (j < image[0].length - 1 && val == image[i][j + 1]) fill(i, j + 1, val);
    }
    if (image[sr][sc] == color) return image;
    fill(sr, sc, image[sr][sc]);
    return image;
};
```
Solution 2 - Not Keeping track of rows & column but handling undefined condition
```
/**
 * @param {number[][]} image
 * @param {number} sr
 * @param {number} sc
 * @param {number} color
 * @return {number[][]}
 */
var floodFill = function(image, sr, sc, color) {
    const startingColor = image[sr][sc];

  if (startingColor === color) return image;

  return fillColor(image, sr, sc, color, startingColor);
};

const fillColor = (image, sr, sc, color, startingColor) => {
  if (image?.[sr]?.[sc] === undefined || image[sr][sc] !== startingColor) {
    return image;
  }


  if (image[sr][sc] === color) {
    return image;
  }

  image[sr][sc] = color;
  fillColor(image, sr, sc - 1, color, startingColor);
  fillColor(image, sr + 1, sc, color,  startingColor);
  fillColor(image, sr, sc + 1, color, startingColor);
  fillColor(image, sr - 1, sc, color, startingColor);


  return image;
};
```
NextJs Job Board with Airtable as CMS
Tags: nextjs, beginners, programming, tutorial
Published: 2022-08-20 17:06:35

Just made the source code for dynolist public.

It's a #NextJs based job board that uses #airtable as CMS built with #TypeScript #tailwindcss

Demo Site: https://dynolist.vercel.app
Airtable Base: https://airtable.com/shrYry2CNtlBV2Cgx
Source Code: https://github.com/ri5h/dynolist

#buildinpublic


![Job Expanded](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhvuzadm0vomu1hcnoyh.png)


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


If you like this and would love to hear more from me, you can connect with me on https://twitter.com/ri5hirajp
Using JavaScript in JupyterLab
Published: 2022-09-19 15:03:09

---
title: Using JavaScript in JupyterLab
published: true
date: 2022-08-20 17:04:44 UTC
tags: 
canonical_url: https://chrisdevcode.hashnode.dev/using-javascript-in-jupyterlab
---

> **TL;DR** This post will take you through installing JupyterLabs and how to add a NodeJS kernel to it in Ubuntu.

## Installing JupyterLabs

For a better experience, you should install Jupyter Lab inside a virtual environment.

```
sudo apt install python3-venv

```

After the installation is complete, create a new environment:

```
python3 -m venv jlab

```

> _Note that you can replace the `jlab` with any name of your choice._

Now activate the environment:

```
. jlab/bin/activate

```

![Activating a virtual environment](https://cdn.hashnode.com/res/hashnode/image/upload/v1661010372178/3i2YxqlrG.png)

Now install Jupyter Lab in Ubuntu:

```
pip install jupyterlab

```

Once the installation is complete, you can start Jupyter lab by running:

```
jupyter lab

```

Jupyter Labs runs locally on port 8888: http://localhost:8888/

## Installing Javascript Kernel

Inside the activated virtual environment, install the javascript kernel by running:

```
npm install -g ijavascript

```

To activate the kernel, run:

```
ijsinstall

```

Re-start Jupyter lab:

```
jupyter lab

```

![Javascript in jupyter lab](https://cdn.hashnode.com/res/hashnode/image/upload/v1661014401573/qPeHpGSzM.png)

To test it out, click on the `NodeJS` logo to start a Javascript lab:

![Srunning javascript on jupyter lab](https://cdn.hashnode.com/res/hashnode/image/upload/v1661014803723/WNqhjI01M.png)

## Conclusion

The article demonstrates how to install Jupyter labs in a virtual environment and add a JavaScript kernel.

## Resources

[https://www.youtube.com/watch?v=gkeh9phGgYo&list=PL1ROSNerT41L9l0-es4HFXyEyEmKwSya4&index=20&t=81s](https://www.youtube.com/watch?v=gkeh9phGgYo&list=PL1ROSNerT41L9l0-es4HFXyEyEmKwSya4&index=20&t=81s)
Auto Github Commiter
Tags: programming, python, github, linux
Published: 2022-08-20 16:49:00

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

With this project, you can automatically commit changes to your project as many times as you want🥳!

my project link is https://github.com/Armanebtekari/Auto-Commiter-GitHub😉👊🏼

My Github account👊🏼 https://github.com/Armanebtekari 👨‍💻😉
#1 initialize git repository
Tags: git, tutorial, programming, productivity
Published: 2022-08-20 16:46:40

google search **youtube@letsprogramit**.

![initialize git repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhtxy7bc0wli1w8lh9uk.jpeg)

![git init](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwbyxnsg2hickeccd0u7.jpeg)

![git add .](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bal6vtmo59f81tmwgodm.jpeg)

![git commit -m 'your message'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crjukusmc565tfprigpa.jpeg)

![git status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qrjdwnvuyct33grxwo3j.jpeg)


![learn more](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ormhow6ow4rqo6k85xh.jpeg)
Valid Paranthesis
Tags: javascript
Published: 2022-08-20 16:24:54

Given a string s containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid.

An input string is valid if:

Open brackets must be closed by the same type of brackets.
Open brackets must be closed in the correct order.
Every close bracket has a corresponding open bracket of the same type.
 

Example 1:

Input: s = "()"
Output: true

```js
var isValid = function(s) {
     const map = {
        '(':')',
        '{':'}',
        '[':']',        
    }
    let stack = []
    for (let c of s) {
        if (c in map){ 
            stack.push(c)
        } else if (map[stack.pop()] !== c) {
            return false
        }
    }
    return !stack.length
};
```
Rat In a Maze - Get All Possible Paths
Tags: javascript, leetcode
Published: 2022-08-20 16:16:08

```
let inputMatrix = [
  [1, 0, 0, 0],
  [1, 1, 0, 1],
  [1, 1, 0, 0],
  [0, 1, 1, 1],
];

let visitedArray = [
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0],
];

const pathsArray = [];

const solveMaze = (n, inputMatrix) => {
  if (inputMatrix[0][0] === 0) {
    return pathsArray;
  }
  if (inputMatrix[n - 1][n - 1] === 0) {
    return pathsArray;
  }
  solveMazeRun(0, 0, (pathMap = ""), visitedArray, n, inputMatrix);
  console.log(pathsArray);
};

const solveMazeRun = (i, j, path, visitedArray, n, inputMatrix) => {
  if (!isSafeToMove(i, j, n)) {
    return false;
  }
  if (inputMatrix[i][j] === 0) {
    return false;
  }
  if (visitedArray[i][j] === 1) {
    return false;
  }

  if (n - 1 === i && n - 1 === j) {
    pathsArray.push(path);
    return false;
  }

  visitedArray[i][j] = 1;
  solveMazeRun(i + 1, j, path + "D", visitedArray, n, inputMatrix);
  solveMazeRun(i - 1, j, path + "L", visitedArray, n, inputMatrix);
  solveMazeRun(i, j + 1, path + "R", visitedArray, n, inputMatrix);
  solveMazeRun(i, j - 1, path + "U", visitedArray, n, inputMatrix);
  visitedArray[i][j] = 0;
};

const isSafeToMove = (i, j, n) => {
  if (i >= n || j >= n || i < 0 || j < 0) {
    return false;
  }
  return true;
};

console.log(solveMaze(4, inputMatrix));

```
What personal projects have you been working on recently?
Published: 2022-08-20 16:02:27

For a while now, having focused more on work and personal life, spending time learning new languages was put on the back-burner for me. It's easy to change your priorities and push back pursuing the curiosity you may have in learning new languages or technologies.

I've recently had a change in location and it's given me the  opportunity I needed to hone in and focus on learning a few technologies that I've wanted to for a while now.

This time has reminded me that exploring new technologies is an integral part of my growth as a software developer. Once again, after spending time delving deep in to a technology I don't use so frequently is when I notice my overall confidence as a developer rise.

Learning should be fun, and building small projects to address gaps in your workflow or anything you see a need for is all part of it.

My most recent project has been a small CLI built in rust to make my interactions with Todoist easier, what have you built recently?

{% github haydenrou/todoist_helper %}
Certificate Renewal with Ansible on Multiple Linux Server
Tags: linux, ansible, bash
Published: 2022-08-20 15:54:01

Hi,

I'm wirting a playbook in which i want to update Certificate used with websites but now i'm stuck on Debug out how i can fiter desired output.

```
---
- hosts: repo1
  become: true
  tasks:
    - name: Papulate Service Facts
      service_facts:
    - name: See the Service <httpd> facts as they are"
      debug:
        msg: "{{ ansible_facts.services['httpd.service'].state }}"
      register: http_service_status
    - name: Debug output
      debug:
        var: http_service_status
    - name: Check website path details
      shell: httpd -S | grep -e "port 443" | awk '{print $NF}' | awk -F ":" '{print $1}' | tr "(" " " |  awk '{ gsub(/ /,""); print }'
      register: path_output
      when: http_service_status.msg == "running"
    - name: Print path details
      debug:
        var: path_output.stdout_lines
    - name: Fetch SSL certificate path details
      shell: |
        grep -i -r SSLCertificate "{{ item }}" | grep '.crt' | awk '{print $NF}'
      with_items: "{{ path_output.stdout_lines }}"
      ignore_errors: true
      register: cert_path
    - name: Print path details
      debug:
        var: cert_path
    - name: Get subject of SSL
      shell: openssl x509 -noout -subject -in "{{ item.stdout_lines }}"
      with_items: "{{ cert_path.results }}"
      loop_control:
        label: "{{ item.stdout_lines }}"
```
My rainbow language user trophy is whoooshed from mmyh profile😭😭😭😭😭😭
Published: 2022-08-20 15:42:34


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


#github
I am Angry on You github😡😡😡😡😡😡
You stole my trophy
#cheater
#scoundrel
#villain
github/chiki1601


Check out my this video
And see my rainbow trophy #github #cheater
https://www.youtube.com/watch?v=xP4aKQEinZY
Coding Period GSoC'22 | Week 7 + 8 + 9
Tags: gsoc, opensource, career, productivity
Published: 2022-08-20 15:34:20

I will share my progress for Weeks 7, 8 and 9 in this blog.

### Journey so far

For me, GSoC'22 journey is going smoothly. Everything was easy to understand and my mentor helped me in every way possible. The community was a great support in the whole process. 

I also passed my [mid-term evaluation](https://blog.circuitverse.org/posts/pulkitgupta_phase_1_report/) 🥳.

![success-meme-gif](https://media0.giphy.com/media/a0h7sAqON67nO/200.gif)

**Completed Tasks**

By now, we have completed `Simulator Testing` and [Importing and Exporting of circuit Files](https://github.com/CircuitVerse/CircuitVerse/pull/3222) tasks and working on other tasks as well.

### Future Plan

We are working on Mobile Touch Compatibility Task and started working on Custom Dialog Box task 🚀. Hopefully we will complete Touch Compatibility Task by the next week 🥳.

**Pull Requests**

- [Mobile Touch compatibility](https://github.com/CircuitVerse/CircuitVerse/pull/3236)

That's all for now; stay tuned for more updates😉.

Thank You
Singeltons in JavaScript not needed?
Tags: javascript, singelton, module
Published: 2022-08-20 15:33:00

Yes you can implement the singelton pattern in JavaScript with a class, but is it useful or do we need it?

I don't think so, because simply using an object literal is sufficient and always a singelton, if you place it in his own file.

This little example shows it.

```
console.log('A imported')

const state = {
  isLoading: false,
  hasError: false
}

export default state
```

```
import state from './A.js'
console.log('B imported')

const api = {
  getData () {
    state.isLoading = true
  }
}

export default api

```

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <script type="module">
    import state from './A.js'
    import api from './B.js'
    console.log(state)
    api.getData()
    console.log(state)
  </script>
</body>
</html>
```

The console shows only one A imported and the state is shared.

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

The reason is, JavaScript imports each file/module only once and modules are singletons per definition. If a module is imported multiple times, only a single instance of it exists and it is evaluated only once after load.
Career goals
Tags: outreachy, gnome
Published: 2022-08-20 15:23:33

> For this blog post , I will be using blog prompt from outreachy .

---

<br/>

 - **Are you looking for a job, internship, a grant, a volunteer position, or some type of other opportunity?**

<br/>

I am fine with internship, job, type of positions .

<br/>

 - **What types of work would you like to contribute to?**

<br/>

Being a computer science student , I would like to contribute to technical/development work . Although I am interested in learning AI/ML technologies , so I am comfortable with contributing to AI/ML too.

<br/>

 - **What tools or skills do you have that would help you with that work?**

<br/>

For development work , I am comfortable with web developement in mern stack as well as working in java and c (GTK+) . For AI/ML , I am learning tech stuffs

<br/>

 - **What tools or skills would you like to learn?**
<br/>

 I want to learn AI/ML tech stuffs . I am also fine learning stuffs related to linux ( for example linux desktops) or may be kernel too .

<br/>

 - **What interpersonal skills make you a collaborative team member?**

<br/>

I am comfortable in communication with other team-mates , I can upscale or downscale my efforts for matching my output with my team's expectation

<br/>

 - **What languages do you speak?**

<br/>

Well I am comfortable with english and hindi.

<br/>

 - **Are you able to move, and if so, which countries/regions are you willing to move to?**
 
<br/>

If I need to permanantly shift then I am only open to saudi-arabia country ( and it depends ) besides this, I am willing to be in India. If I need to occasionally move then , I am open to other locations ( but here is also it depeneds on the frequency and duration ) 

<br/> 

- **Are you looking for a remote job?**

<br/>

Yeah , remote jobs are best suited to me !

<br/>

 - **Are you looking for a full-time or part-time paid position?**

<br/>

I am fine in both

---
visibility : hidden vs display : none
Tags: css, webdev, beginners, productivity
Published: 2022-08-20 15:16:08

##visibility : hidden 
When applied to HTML element, it will not be visible in the page. But, the HTML element is still in the DOM. The element will not be seen but it does takes up space.

##display : none
When applied to HTML element, it will not be visible in the page. The element has no affect on the DOM. The element will not be seen as well as does not takes up space.

A simple HTML layout
```html
<body>
<h1>CSS Properties</h1>
<div></div>
</body>
```
```css
div {
height: 100px;
width: 100px;
background-color: black;
```

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

Applying `visibility: hidden` to div element

![Visiblity Hidden BhavShashank](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdnexh0dkw1cvtpf081f.png)

Applying `display:none` to div element


![Display None BhavShashank](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fdoobxv1kviuk6biltqo.png)

{% codepen https://codepen.io/bhavshashank/pen/PoRVdOa %}

To Conclude
With `visibility:hidden`, the element takes up space but `display: none`, it is removed from the DOM and does not takes up space.

Thank you for reading.