teleren/devto huggingface dataset:
Difference Between DOM and Virtual DOM
Tags: javascript, programming, mobile, react
Published: 2023-01-22 08:38:53


The main difference between the DOM and the VDOM is that the DOM represents the actual structure of the document, while the VDOM is a virtual representation of the DOM used for optimization.


**The DOM (Document Object Model)** is a tree-like structure that represents the HTML content of a web page. It is used to update the content of a web page in response to user interactions or network events. The DOM is a slow and resource-intensive process because it requires the entire page to be updated whenever there is a change.

**Virtual DOM**, on the other hand, is an in-memory representation of the real DOM. React uses virtual DOM to improve the performance of updating the real DOM. When a change occurs, React updates the virtual DOM and then calculates the difference between the virtual DOM and the real DOM. This allows React to only update the parts of the real DOM that have changed, instead of updating the entire DOM, which can be slow and resource-intensive.

The virtual DOM acts as an intermediary between the React code and the real DOM. It provides a faster and more efficient way to update the real DOM, as React only updates the parts of the real DOM that have changed, rather than updating the entire DOM.

In summary, the virtual DOM provides a lightweight, in-memory representation of the real DOM that React uses to improve the performance of updating the real DOM and provide a better user experience.
Jump on VR bandwagon, seasoned gamer!
Tags: vr, games
Published: 2023-01-22 08:38:47

Simply, it's a steal so buy now. You'll enjoy testing out possibilities and feeling limits. Spell lasts, it truly ruined 2D where it makes more sense to VR. New dimension is simply that mind-blowing. 🧠 is tricked.

## Nostalgia is included
Most of these games feels like first games of our lives. The reasoning could be that gaming studios operate with lower budgets while making world immersive and interactive is more expensive. Nothing is really set in stone yet.

Also as a bonus - no free to play games with gambling elements, no useless DLCs.

## Work stuff and other uses
I hope you are convinced _seasoned gamer_ but in the case you weren't, I'll give you few more examples of usage. 

- many more cool experiences in browser
- 3D drawing is really cool, also brainstorming on the wall is nice creative experience
- connecting to PC and working with multiple virtual desktops of any sizes and layout
- getting a little exercise

Just by putting on your headset, you are teleported to another environment and it can help with concentration or stress release.

Goodbye _seasoned gamer_.
How to merge two repositories with history?
Tags: git, fork
Published: 2023-01-22 08:16:43

## Intro
I faced a situation that I would like to merge two repositories and keep to remain these histories.

I figured out it, so I write the way down on this article so I won't forget.

I will use Fork(Git client) but it is possible command line too.

## Step1
First, I created two sample repositories and just kind of some commits.

A repository named "MergeTest1".
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwuhk426egsk47i5srj7.png)

A repository named "MergeTest2".
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2bof4pu5qbhnxwcinuo.png)

## Step2
This time, I will merge "MergeTest2" to "MergeTest1".

On the condition of what you have already had two repositories at local, a next step is add another repository as new remote repository.

And fetch all remote, checkout another repository.

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

## Step3
A final step is merge.
A base is master(MergeTest1), so checkout master(MergeTest1) and try to merge master2(MergeTest2).

This time, I deliberately prepared conflict.

A below GIF is a resolving step. 

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

If you avoid conflict, I recommned to evacuate your file at an other folder in advance.

## Other Resources
[Gitで2つのリポジトリを履歴を残したままマージする方法](https://teratail.com/questions/228020)
[Git MergeでConflictが発生したときの対処 - プログラミング初心者がアーキテクトっぽく語る](https://architecting.hateblo.jp/entry/2020/08/28/152612)
Creating github pages is easy!
Published: 2023-01-22 08:13:08

I am taking [Open Source Development Course] (https://github.com/OSDC-Code-Maven/osdc-2023-01-public) given by [Gabor Szabo](https://github.com/szabgab) in order to gain a better understanding of this field.
In the second session we learned about [github pages](https://pages.github.com/) which is an easy way for building a website. Anyone can do it, even if they don't have programming experience. **All you need is a github account!**

_Here are the two websites that I'm currently working on (still under construction):_
* https://cohenoa.github.io/
* https://cohenoa-lab.github.io/

Note that you can you an existing design theme, here are [some examples](https://pages.github.com/themes/).
Here's a few examples of features from ECMAScript 2021(ES11):
Tags: javascript, webdev, programming, tutorial
Published: 2023-01-22 08:11:55

- `Object.fromEntries()` method:
    This method creates an object from a given list of key-value pairs.

```
const entries - [['foo', 1], ['bar', 2]];
const obj = Object.fromEntries(entries);
console.log(obj);
// {foo: 1, bar: 2}
```
- `String.prototype.matchAll()` method:
    This methods returns an iterator containing all the matches of a regular expression in a string.
```
const str = 'Hello, world!';
const regex = /\w+/g;
const matches = str.matchAll(regex);
console.log(matches);
//Iterator { 'h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd'}
```

- `Promise.any()` method:
This method returns a promise that is fulfilled with the first fulfilled promise in an iterable of promises.

```
const p1 = new Promise((resolve) => setTimeout(() => resolve('p1'), 100));

const p2 = new Promise((resolve) => setTimeout(() => resolve('p2'), 200));

const p3 = new Promise((resolve) => setTimeout(() => resolve('p3'), 300));

Promise.any([p1, p2, p3]).then(result => console.log(result));
// 'p1'
```

- `globalThis` property:
This property provides a way to access the global object in a consistent way, regardless of the environment (browser or Node.js).

```
console.log(globalThis);
// Window {...} in browser, global in Node.js
```

- `Optional chaining`: 
This operator allows you to access a property of an object, even if the object or any of its preceding objects in the chain are null or undefined.
 
```
let obj = { a: { b: { c: "hello" } } };
console.log(obj?.a?.b?.c);  // prints "hello"
```
- `Nullish coalescing`: 
This operator allows you to provide a default value for a variable only if it is null or undefined.

```
let x = null;
console.log(x ?? "default"); // prints "default"
```
- `Dynamic import()`:
This method allows you to dynamically load modules at runtime, instead of loading all modules at the start of the program. 

```
async function loadModule() {
  const module = await import('./module.js');
  // Use the module
}
```
- `WeakRef and FinalizationRegistry`: 
These are two new types that allow you to create weak references to objects, and to register callbacks to be called when an object is garbage collected.

```
const obj = {};
const weakRef = new WeakRef(obj);
console.log(weakRef.deref()); // prints the object
```
- `Private methods and fields`:
ECMAScript 2021 introduces syntax for declaring private methods and fields in classes. Private methods and fields can only be accessed within the class.

```
class MyClass {
  #privateField = "I am private";

  #privateMethod() {
    console.log("I am a private method");
  }

  publicMethod() {
    console.log(this.#privateField);
    this.#privateMethod();
  }
}

```

These are additional features that ECMAScript 2021 introduces, it's important to note that some of them may not be supported on all JavaScript engines yet. Follow official documents for more features [ECMAScript](https://262.ecma-international.org/6.0/).
A Quick 10-Second Programming Joke For Today
Tags: jokes, dailydeveloperjokes
Published: 2023-01-22 08:00:00

---
title: "A Quick 10-Second Programming Joke For Today"
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/5e12588a43d6b.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:___ What do you call an idle server?

___A:___ A waiter.
 -->
What is the Role of a Developer Now?
Tags: chagpt, codequality, develo, futu
Published: 2023-01-22 07:59:17


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


I'm linking to an article I wrote on HashNode (messed up the numbering though):

https://thomascherickal.hashnode.dev/series/automate-programming 

That contained multiple ways to create code using ChatGPT. 

The more precise I was, the better the code.

So my question is:

What jobs will developers hold now?

Please comment articles, links, commments below! This is a very important discussion!
3 years into coding
Tags: webdev, programming, beginners, python
Published: 2023-01-22 07:56:50

About 3 years ago, when I was going to turn 11, I joined a coding club to learn Scratch.
Upon arriving there, I realised that we weren’t learning Scratch, but instead learning Python.
Since then, I’ve been learning Python and coding in it. Now 3 years later, I want to celebrate all the things I have achieved while coding.

- I started by making text based games. My game series - [The Hollow](https://replit.com/talk/share/Hollow-Season-1/37901) (which was was on a TV show) got popular within the Replit Community
- I made a game called [Diamond Risk](https://replit.com/talk/share/Diamond-Risk/40235) (which I believed to be the best game I had ever made)
- Then I started making console animations using Python, and make an animation series called [Upside Down](https://replit.com/talk/share/Upside-Down-Episode-1/40760)
- After that I started getting interested in HTML, so I learnt a bit of HTML, CSS and JS. I then made my first front end game called [Click Click](https://replit.com/talk/share/Click-Click/48271)
- All throughout learning HTML, I was also working on improving my Python by making Discord bots 

## THEN A YEAR AFTER STARTING CODING, I DISCOVERED FLASK AND MONGODB

- I honestly fell in love with Flask and started working on my first frontend and backend project, in which I used my favourite database MongoDB. It was a simple website where you could send emails to users within the website: [FRANK](https://replit.com/talk/share/FRANK/54322)
- At that time, I didn’t know how to implement cookies in Flask, so the website required you to sign in every time
- After a few months, I could easily make a social media website, with average CSS, connected to a nice database with cookies

## Now
- After 3 years, I started learning Kaboom.JS and started making 2D games with some backend related to Express.JS
- I can use Python to make automated email senders and use GMAIL API to get stats on who you have emailed in the past year
- I have improved a lot in CSS (as you can see in my [portfolio](https://vulcanwm.is-a.dev))
- And of course I can use Flask like a pro to make fun websites!

Follow me to continue seeing my coding journey!
I hope you see my story and get inspired to code!
Query Selectors ...
Published: 2023-01-22 07:45:25

I am now on week 6 of my boot camp and we are making a multi choice quiz using query selectors in java script.  I am struggling to get started because I cannot create a function that shows the questions and answers when the start button is clicked. I've spent hours trawling videos and trying different methods to link the text and my head is spinning.

#feeling overwhelmed

I have programmed in python for a few years now but am finding that there is too much information and too many tasks to produce which may be easier if I wasn't working full time so only the weekends to work on things and try and meet the 20 hour a week recommendation. I usually put in 20 hours plus the 11 hours of live sessions.

I have just hit a brick wall at the moment. I hope things get easier as I really want to be a front end developer but cannot seem to find enough hours in the week to learn everything over night!!!
The way we store state globally in react
Tags: react, webdev, reactive, rxjs
Published: 2023-01-22 07:43:58

## Oden Reactive Store


To leverage the power of reactive programming, we need to be able to store data in a reactive way.
This lib provides a simple way to define a reactive store for your micro-frontend application.

## Installation

```bash
npm i oden-reactive-store
```

## Usage

Define a store which will global accessible and reactive in your application which means when you change state in
another
component it will be updated in all other components which are using the same store.

```javascript
import {defineStore} from "oden-reactive-store";

export const useCounterStore = defineStore(0)
```

Now you can use the store in your components like this.
You can use the store via custom hook `useCounterStore` which will return the current state and a function to update the
state like `useState`.

```javascript
import {useCounterStore} from "../store/useCounterStore";

const Counter = () => {
    const [count, setCount] = useCounterStore();

    return (
        <div className="card">
            <button onClick={() => setCount((count) => count + 1)}>
                count is {count}
            </button>
        </div>
    );
};

export default Counter;
```

And you can use your component like this.
When you click the counter button it will be updated in all other components which are using the same store.

```javascript
function App() {

    return (
        <div className="App">
            <h1>Reactive Store</h1>
            <Counter/>
            <Counter/>
            <div>
                Counter value will change across all components due to reactive store behavior
            </div>
        </div>
    )
}
```
Essential Tools Every programmer must know
Tags: webdev, beginners, programming, javascript
Published: 2023-01-22 07:35:40

**Text editor:** A basic text editor is essential for writing and editing code. Examples include Sublime Text, Atom, and Visual Studio Code.

**Version control software:** Version control software, such as Git, allows programmers to track changes in their code and collaborate with others on projects.

**Debugging tools:** Debugging tools, such as GDB or LLDB, are used to identify and fix errors in code.

**Integrated Development Environment (IDE):** An IDE, such as Eclipse or Visual Studio, provides a comprehensive environment for code development, including editing, debugging, and project management tools.

**Build and dependency management tools:** Build tools, such as Make or Gradle, automate the process of compiling and packaging code, while dependency management tools, such as Maven or npm, manage the libraries and frameworks required for a project.

**Terminal:** A terminal is a command-line interface, used for running commands and interacting with the file system.

**Collaboration tools:** Collaboration tools, such as GitHub, GitLab, or Trello, help programmers to work together on projects, and share code, ideas and bugs.
Astro / DevTo RestAPI - Solving the Unexpected Token R Error in JSON"
Tags: astro, javascript, webdev
Published: 2023-01-22 07:32:13

In my personal website
- I Fetch markdown files from this account using Dev.To Rest API
- Pre render the pages on my personal website ( Astro )

Everytime during the building process ( vercel/astro ) this error comes in.

![JSON Token R Error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70ykerr58sxtnjiyfanm.png)
This is usually because the request failed.

I tried adding a 1 second delay using
```js
// 1 Sec Delay
await new Promise((res, rej) => {
  setTimeout(() => {
    res("");
  }, 1000);
});
```
and it worked!

Conclusion:
Maybe adding a delay will sometimes solve a failed request for SSG pages
HOW TO USE JAVASCRIPT IN YOUR IDE WITHOUT BROWSER
Tags: webdev, beginners, javascript, tutorial
Published: 2023-01-22 07:09:27

## JavaScript in IDE
Some time ago it was not possible to use JavaScript without a web browser but, now with the help of Node.js it is possible to use JavaScript inside any IDE or code editor without touching your Web Browser.


![Node.js + JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9lb8f6wrkiohrv8xe42d.png)

## Node.js and JavaScript
In order to use JavaScript in your code editor or IDE we have to initialise a npm package which can be done by following command in your terminal.

```
npm init
```
After executing this command you will be prompted several questions in your terminal where you have to press enter after specifying the answer.

**Note:**
You can leave the prompt empty and press enter. The terminal will feed the default value as input.

![Prompted inputs in the terminal after npm init](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4m2mjarzurntw847ieu.png)

Doing so will initialise a package.json file in your folder. which will have all the necessary details of the your package.

![package.json after npm init](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmmb657z0xfkm35ktnln.png)

## Using Node.js Packages
In order to use various Node.js Packages you will need to install them first with the following command:

**With NPM**

```
npm install <package-name> --save
```

**With Yarn**

```
yarn add <package-name>
```
After this you need to declare the packages inside your JS file to access all it's features.


For Example let us use the prompt-sync package inside our JS file:
**1.Installing the package** with Node Package Manager (npm)

```
npm install prompt-sync --save
```

**2.Declaring a variable** to use package's properties

```
const prompt = require("prompt-sync")();
let name = prompt("Enter Your Name");
console.log(name)
```

**Notes:**
1. **require** fetches the package from node modules.
2. **prompt** takes input from user.
3. **console.log(name)** prints the entered value.

**Congrats !!** you've learnt how to use JavaScript without browser inside your favourite code editor or IDE.

Drop a like if you found this blog helpful and follow me for more of such blogs. 😄😄
What is AWS?
Published: 2023-01-22 06:40:33

Hey Folks,
Have you ever wondered what is Amazon Web Services (AWS)?
Why is it so popular?

Let's understand it...

**Amazon Web Services (AWS)** is a collection of remote computing services (also called web services) that make up a cloud computing platform, offered by Amazon. These services operate from 12 geographical regions across the world. They provide a variety of services such as **storage, networking, database**, and **application services** that enable users to deploy applications and store data in the cloud.

AWS offers a wide range of services that can be used to build and run applications in the cloud. Some of the most popular services include:

1. **Elastic Compute Cloud (EC2)**: This service allows users to rent virtual machines (VMs) on which they can run their own applications.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ql83xu89m66ehlnnb2n.png)
2. **Simple Storage Service (S3)**: This service provides scalable and secure storage for data in the cloud.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwlj2vfc5gmjffirfvok.png)
3. **Relational Database Service (RDS)**: This service allows users to easily set up, operate, and scale a relational database in the cloud.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmsbej3g9kb0ffrh02q8.png)
4. **CloudFront**: A content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to customers globally with low latency, and high transfer speeds.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmx35lyng4ydl14mhw5p.png)
5. **Elastic Container Service (ECS)**: A highly scalable, high-performance container orchestration service that supports Docker containers and allows you to easily run and scale containerized applications.

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

AWS also provides a variety of tools and services for monitoring, logging, and securing your applications. These include services such as **CloudWatch, CloudTrail, and Identity and Access Management (IAM)**.

AWS also has several pricing options to choose from. There are **pay-as-you-go** options, which allow you to pay only for the resources you use, as well as reserved instances and spot instances, which allow you to save money by committing to using a certain amount of resources over a longer period of time.

AWS has a vast ecosystem of partners, including independent software vendors, system integrators, and managed service providers that can help you with various aspects of your cloud journey, from migration to operation and optimization.

Overall, AWS is a comprehensive, reliable, and flexible cloud platform that can be used to build and run a wide variety of applications. Its services and tools can help organizations of all sizes to improve the scalability, availability, and security of their applications.