teleren/devto huggingface dataset:
The problem of singletons
Tags: javascript, pattern, singeltons
Published: 2022-12-22 08:09:29

Singletons are a design pattern in which a class is designed to have only one instance and provides a global point of access to that instance. In JavaScript, singletons can be implemented using a variety of techniques. 

For example, the browser itself provides a number of singleton objects and functions that are available globally, such as the window object and the console object. These objects and functions provide access to various browser APIs and features, such as the DOM, the JavaScript runtime, and the browser console.

The use of singletons can be controversial in software development because they can make it difficult to reason about the state of an application and can create tight coupling between components. In addition, singletons can make it difficult to test and maintain code because they can introduce two major problems:

1. global state

   Global state refers to state that is shared across multiple components or modules in an application and is not localized to a specific component or module. This can make it difficult to understand the behavior of the code because the state of the application can be affected by many different components, and it can be difficult to determine which components are responsible for specific changes to the state.

2. dependencies that are not explicit.
 it is not clear which components or modules depend on a singleton or how the singleton is used. This can make it difficult to understand the relationships between components and to modify the code without breaking existing functionality.

For example, consider the following code that defines a singleton class:

```javascript
class Singleton {
  private static instance: Singleton;

  private constructor() {}

  static getInstance() {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

```

This singleton class is designed to have only one instance and provides a global point of access to that instance through the `getInstance` method. If this singleton class is used in multiple places in an application, it is not clear which components or modules depend on the singleton or how the singleton is being used. This can make it difficult to understand the relationships between components and to modify the code without breaking existing functionality.

For example, if you wanted to modify the behavior of the singleton, you might not know which components or modules are using the singleton and how they are using it. This can make it difficult to test and maintain the code, as you might have to modify or update many different components or modules that are using the singleton in order to make the desired changes.
Difference between Internal and External IP address
Tags: networking, googlecloud
Published: 2022-12-22 08:07:11

Assume that you have deployed a Virtual Machine in GCP and now, you can see 2 IP address. One is for the internal usages (Internal IP) another is to expose to the world (External IP address). 

Using the External IP address, one can see changes to your Virtual machine or server.



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

These are the few thing you need to remember regarding them:

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


Internal IP address remains despite you stop the Virtual Machine.

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

But External IP address gets generated when you create a Virtual machine or run a stopped Virtual Machine.

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


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


Summary:
Internal IP address is created to work for internal purposes where External IP address is created to show the world your works 😉.
5 hour coding hackathon
Tags: webdev, programming, tutorial, showdev
Published: 2022-12-22 08:01:09

Hi, developers, we often get confused about which platform should I use to get our next job, I have the solution, watch the video till the end

So, last Sunday, I have the idea to create a dedicated page to search for job portals around the world. I come up with a solution called **FindJobsPortals** -A platform to refer all kinds of portals that can help you to get your next job. 

Since I didn’t have much time so I’ve decided to take this project into a hackathon, a 5 hours hackathon. 

### Heres how I did my 5 hours coding hackathon
- First I jot down the extensive list of 40-50 portals around the world
- Followed by pushing the entire collection into the Supabase database
- Then I create a frontend repository using Next.js
- Now we need some data to show the jobs portals which I fetch from the supabase database using the npm module
- Lastly, I render the list in one table containing the link name and domain of the portals.

### Some showoffs
{% youtube 8AJfSdfLnBw %}


The current image you are seeing is the upgraded version of the website. In the last few days, I’ve used this URL-metadata npm module to scrap the meta tags from all portals such as description, icon, image, keywords, Twitter and so on. 

### The tech stack I’ve used
- Next.js as a frontend framework
- Supabase as Database
- Mantine.dev as UI library
- Tailwind CSS as a styling library
- Vercel for hosting
- Github as version control

It’s quite a good project to learn different tech stacks as well as to test your idea in the market, I’ve also launched the product on a product hunt to get the people’s opinion and it was quite good. 

### Conclusion
It's quite a simple process how to start with the project. 
Follow the process
- Organise personal hackathons 👩🏻‍💻
- Start by solving your own problem using code 😌
- Meet deadlines as if 5 hours or 2 weeks 🎬
- Launch project 🧨
- Market project 🏪
- Grow your project 🚀

[You can check the portals over here 👉🏻](https://findjobsportals.vercel.app/)

If you want the Notion template to track you job and get this extensive list on your desktop 👉🏻 [get it from here](https://shreyvijayvargiya.gumroad.com/l/job-tracker-portals-lists?_gl=1*96ms9h*_ga*MjUyOTc2NzAwLjE2NjkyODQzNjE.*_ga_6LJN6D94N6*MTY3MTY5NTczMy4xMTkuMS4xNjcxNjk1NzU2LjAuMC4w)

Please do subscribe to the youtube channel, would be more than appreciated. 

[Do subscribe](https://www.youtube.com/@shreyvijay/)

**Until next time, have a good day.
Keep developing
Shrey**
Today's Fun Joke For Developers - Daily Developer Jokes
Tags: jokes, dailydeveloperjokes
Published: 2022-12-22 08:00:04

---
title: "Today's Fun Joke For Developers - Daily Developer Jokes"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258b057385.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ Why did the functions stop calling each other?

___A:___ Because they had constant arguments.
 -->
How to Create TO-DO list with Node and React simple steps.
Tags: todo, node, javascript, react
Published: 2022-12-22 07:58:59


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74t2j245ej492gqd8x7c.jpeg)Here is some code and detailed steps that you can follow to create a to-do list with Node.js and React:

**1. Set up a Node.js server:**

1. Install Node.js on your system if it is not already installed.
2. Create a new directory for your project and navigate to it in the terminal.
3. Run npm init to create a package.json file for your project.
4. Create a file called "server.js" in the root directory of your project and add the following code to set up a simple server:

```
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();
app.use(cors());
app.use(bodyParser.json());

const port = process.env.PORT || 5000;

app.listen(port, () => console.log(`Server started on port ${port}`));

```
5. Install the necessary dependencies by running npm install express cors body-parser. These packages will allow you to set up a simple server and handle HTTP requests and responses.

**Now let's setup React framework**
1. Install the create-react-app tool by running npm install -g create-react-app.
2. Use the create-react-app tool to create a new React app in the same directory as your Node.js server by running create-react-app client. This will create a new subdirectory called "client" with a basic React app set up.

**Now Create a to-do list component in React:**
1. In the "client" directory, open the file "src/App.js" and replace the contents with a new functional component called "ToDoList".

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

function ToDoList() {
  const [items, setItems] = useState([]);

  return (
    <div>
      <form>
        <input type="text" />
        <button type="submit">Add</button>
      </form>
      <ul>
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default ToDoList;

```
2. In the "ToDoList" component, create a state variable called "items" to store the to-do list items. Use the "useState" hook to create the state variable and a function to update it.
3. Add a form with an input field and a submit button to the component. The form should allow the user to add new items to the list. You can use the "onSubmit" event of the form to handle the submission of the form.
4. Display the list of items in the component using a "ul" element. Use the "map" function to render a list item for each item in the "items" state variable.

**Finally let's Connect the React frontend to the Node.js backend:**
Connect the React frontend to the Node.js backend:

```
const baseUrl = 'http://localhost:5000';

export const getItems = async () => {
  const res = await fetch(`${baseUrl}/

```
Roadmap To Becoming A Full Stack Web Developer :
Tags: webdev, react, productivity, career
Published: 2022-12-22 07:54:42

## **1. Choose a Technology**

Full-stack development comprises **front-end, back-end and database management.**

Few technologies on which you can work and are trending:

- MERN Stack

- MEAN Stack

## **2. Frontend Development**

Front-End is the User Interface, it deals with the website's overall appearance & how interactive it is.

Mastering the elements of **HTML, CSS & JavaScript** is essential.

## **2.1 Frontend Development**

**HTML**: Start with creating a small webpage. Include; tables, images & links to make it more eye-catching.

**CSS**: Add colors, borders, build the navigation bar, play with the icons, font and text.

**JavaScript**: Learn about DOM and API.

## **3. Backend Development**

Ace these skills:

**Coding Languages:** Python, Java and JavaScript
**Frameworks:** Express JS, Django and Ruby on Rails
**Database Management Systems:** MongoDB, MySQL
**API:** Application Programming Interface
**Client-Server Architecture** 

## **4. Version Control**

Using Git is very good practice if you are working on applications. It is an open-source platform where the entire code exists from the initial stage.

Some of them are:
**GitHub, GitLab, Beanstalk, Mercurial**

## **5. Build Projects**

Post mastering the theory, the final stage is practicing and application of the knowledge acquired.

**Practice, practice and practice more 👩‍💻**
Uncaught TypeError: dispatcher.useInsertionEffect is not a function at useInsertionEffect
Tags: react
Published: 2022-12-22 07:45:39

I tried to upgrade to react 18.2.0 from 17.0.2
Im getting the below error in console after running my application

`Uncaught TypeError: dispatcher.useInsertionEffect is not a function
    at useInsertionEffect (react.development.js:1638:1)
    at emotion-react.browser.esm.js:179:39
    at emotion-element-6a883da9.browser.esm.js:36:1`

Can someone please help?
Want a Career in Sy0-601 PDF? Make This Your Secret Weapon
Published: 2022-12-22 07:32:19

Get ninety Days Free Latest CompTIA SY0-601 Dumps Updates:
Always maintains applicants updated with the CompTIA Security+ examination syllabus. Anyone who has registered with CompTIA SY0-601 examination questions receives one-of-a-kind get admission to to the up-to-date model of all of the legitimate SY0-601 dumps. Free updates for up to a few months.

Free CompTIA SY0-601 Dumps Demo Available:
**SY0-601 PDF** It is continually higher to get a risk to look part of the cloth earlier than shopping the whole package deal. This CompTIA SY0-601 examination dumps demo allows applicants to determine in the event that they need to head for that CompTIA SY0-601 questions pdf or now no longer. A unfastened up to date SY0-601 examination questions demo presented via way of means of affords a bird's eye view of all of the capabilities of CompTIA Security+ examination.

Offer Now: https://dumpsarena.com/comptia-dumps/sy0-601/
How to find all processes with a specific string in their name and kill them all (in linux command line using ps, grep and awk)
Tags: awk, commandline, grep, howto
Published: 2022-12-24 19:23:57

---
title: How to find all processes with a specific string in their name and kill them all (in linux command line using ps, grep and awk)
published: true
date: 2022-12-22 07:30:00 UTC
tags: awk,commandline,grep,howto
canonical_url: https://diegocarrasco.com/how-to-find-all-processes-with-a-specific-string-in-their-name-and-kill-them-all-in-linux-command-line-using-ps-grep-and-awk/
---

<section id="context">
<h2>Context</h2>
<p>You want to find all the processes of, for example, visual studio code, and kill them all for the command line in linux.</p>
<p>To find all the processes ids for a particular app you can use the following:</p>
</section><section id="find-all-the-processes-for-a-particular-app">
<h2>Find all the processes for a particular app</h2>
<div><pre><a id="rest_code_f0f3777e58574bf5b9eca8cd0514a34e-1" name="rest_code_f0f3777e58574bf5b9eca8cd0514a34e-1" href="https://diegocarrasco.com/how-to-find-all-processes-with-a-specific-string-in-their-name-and-kill-them-all-in-linux-command-line-using-ps-grep-and-awk/#rest_code_f0f3777e58574bf5b9eca8cd0514a34e-1"></a>ps -d <span>|</span> grep app_name <span>|</span> awk <span>'{print $1}'</span>
</pre></div>
<p>For example to find all the processes for visual studio code (process name is <cite>code</cite>, you would type</p>
<div><pre><a id="rest_code_3b9aa0b56f69457f95e1a41d7fac24be-1" name="rest_code_3b9aa0b56f69457f95e1a41d7fac24be-1" href="https://diegocarrasco.com/how-to-find-all-processes-with-a-specific-string-in-their-name-and-kill-them-all-in-linux-command-line-using-ps-grep-and-awk/#rest_code_3b9aa0b56f69457f95e1a41d7fac24be-1"></a>ps -d <span>|</span> grep code <span>|</span> awk <span>'{print $1}'</span>
</pre></div>
</section><section id="kill-all-the-processes-for-that-particular-app">
<h2>Kill all the processes for that particular app</h2>
<p>If you want to kill all those processes, just prepend kill and use the ids as arguments</p>
<div><pre><a id="rest_code_a0a3fc48892e4317b819792a84cb96ee-1" name="rest_code_a0a3fc48892e4317b819792a84cb96ee-1" href="https://diegocarrasco.com/how-to-find-all-processes-with-a-specific-string-in-their-name-and-kill-them-all-in-linux-command-line-using-ps-grep-and-awk/#rest_code_a0a3fc48892e4317b819792a84cb96ee-1"></a><span>kill</span> <span>$(</span>ps -d <span>|</span> grep code <span>|</span> awk <span>'{print $1}'</span><span>)</span>
</pre></div>
</section><section id="references">
<h2>References</h2>
<ul>
<li><p><a href="https://stackoverflow.com/questions/3510673/find-and-kill-a-process-in-one-line-using-bash-and-regex">https://stackoverflow.com/questions/3510673/find-and-kill-a-process-in-one-line-using-bash-and-regex</a></p></li>
</ul>
</section>
No-Code, Low-Code, Full-Code: What Is The Trade-Off? [Infographic]
Tags: programming, webdev, lowcode, discuss
Published: 2022-12-22 07:21:44

No-Code, Low-Code, and Full-Code are three distinct approaches to building software applications. And each one of them has its own advantages and disadvantages.

Check out our infographic below to better understand the trade-offs involved in choosing a no-code, low-code, or full-code approach to your next software engineering project.


![Five.Co - No-Code, Low-Code, Full-Code: What Is The Trade-Off?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7cfp6fhwv0shv159eycj.png)

![Five.Co - No-Code, Low-Code, Full-Code: What Is The Trade-Off?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnjda3ud7dsclqnntv2a.png)

![Five.Co - No-Code, Low-Code, Full-Code: What Is The Trade-Off?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5bwshq4a8vps2jibn0p.png)

![Five.Co - No-Code, Low-Code, Full-Code: What Is The Trade-Off?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvye1f9vsvzf6f97yrir.png)

![Five.Co - No-Code, Low-Code, Full-Code: What Is The Trade-Off?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6i6ltbw2wy86f7n4yqv.png)

![Five.Co - No-Code, Low-Code, Full-Code: What Is The Trade-Off?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1by8wfc9jrl09s29wac.png)

![Five.Co - No-Code, Low-Code, Full-Code: What Is The Trade-Off?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aw01ltw7a55ztzqrmnha.png)

![Five.Co - No-Code, Low-Code, Full-Code: What Is The Trade-Off?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5mv922s1ae1yet2byl5.png)

![Five.Co - No-Code, Low-Code, Full-Code: What Is The Trade-Off?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rvnkd01nisuqkfy1rie1.png)

To download this infographic as a pdf document, [simply visit our website](https://five.co/no-code-low-code-full-code-what-is-the-trade-off-infographic/).
Hex To RGB Online and Hex to RGB online
Tags: webdev, rgb, rgbtohex, hextorgb
Published: 2022-12-22 07:18:03

[Read More](https://easydevelopertools.com/hex-to-rgb-online/)
About RGB to Hex
What is RGB? rgb stands for red, green and blue. Red, green and blue are the primary colors of light and they are the RGB color model. The RGB color model is an additive color system in which red, green and blue light are all added together in different proportions to produce a vast array of colors. RGB values ​​typically range from 0 to 255 and often look like this: rgb(0, 74, 255). And on the other hand, a hex color code is a way to specify a color using hexadecimal values. The code itself is a hex triplet, meaning that it represents three (separate) values ​​that indicate the levels of the component colors. A HEX color value is composed of a string of 6 or 3 characters preceded by a hash. Strings often contain numbers 0 – 9 and characters A – F.

Example: #0000FF this is the hex color code for blue and #808080 for black. While the RGB color model is primarily used to represent or display graphics in electronic systems such as televisions, printers, and computers, hex is often used to specify colors in HTML and CSS code driven elements such as web pages or pages. is done for. It’s about the clear differences between the two color systems. RGB and HEX are two different ways of expressing the same thing (color): red, green, and blue color values.

[Read More](https://easydevelopertools.com/hex-to-rgb-online/)
Flutter Barrel file
Tags: flutter, dart, mobile
Published: 2022-12-22 06:46:06

In the Flutter framework, a barrel file is a way to organize and export a group of related classes, functions, and variables from a single file, making it easier to access and use them in other parts of your code.

![Barrel File cover image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewwpjkfemadgcp12yv1j.png)
Barrel files are typically used to improve the organization and readability of a large codebase. Instead of having to import multiple files or search through different files to find the code that you need, you can use a barrel file to export all of the relevant code in a single place. This makes it easier to locate and use the code that you need, without having to worry about the specific file locations or dependencies.
For example, imagine you have a project with three source files: 

> file_a.dart
> file_b.dart
> file_c.dart

To use the classes and functions from these files in another part of your code, you would normally have to import each file individually, like this:

![an ordinary way of importing files.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8kmq5za0by4rj6l5e5gw.png)
This can become cumbersome and unwieldy, especially as the number of files grows. To simplify this process, you can create a barrel file, _barrel.dart_, that exports all of the classes and functions from the other files in a single import.

To create a barrel file in Flutter, you can create a new file and name it "_index.dart_" or "_barrel.dart_". Then, you can export the classes, functions, and variables that you want to make available from this file by using the "_export_" keyword. For example:

![barrel.dart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rthbfnjayctejulh1198.png)

Then, in other parts of your code, you can import the barrel file and access the exported code as if it were all in the same file. For example:

![index.dart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zo0cnyi1vjt7fx69ztkh.png)
I hope this helps to give you a better understanding of barrel files in Flutter. If you have any further questions, feel free to ask!
AWS: S3 Bucket access IAM policy example
Published: 2022-12-22 06:43:54

Here is an easy way to grant all access to an S3 bucket and its objects to a specific user or group, you can use an S3 bucket policy similar to the following:


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


This policy grants all access (indicated by the "Action": "s3:*" line) to the user or group identified by the "Principal" field (in this case, the user "**demoteam**" with the AWS account number **123456789012**) for all objects in the bucket (indicated by the "Resource": "arn:aws:s3:::my-bucket/*" line).

It's important to note that this policy grants the specified user or group full access to the bucket and its objects, which may not be appropriate in all cases. 

Always customize the policy to grant less access to users and just based on your specific needs.