teleren/devto huggingface dataset:
How to upgrade to React 18
Tags: javascript, typescript, webdev, react
Published: 2022-04-16 14:59:31

With new react version things like concurrent rendering, automatic batching, transitions and suspense on the server are introduced you can use this only after upgrading to react 18. so less go!

Install React 18 and React DOM from npm or yarn, like this:

**npm install react react-dom**

Then, you'll want to use **createRoot** instead of **render**.

In your index.js, update **ReactDOM.render** to **ReactDOM.createRoot** to create a root, and render your app using root

Here's what it would look like in React 17:

```
import { render } from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

render(<App />, container);
```

And here's what it looks like in React 18:

```
import { createRoot } from 'react-dom/client';
import App from 'App';
const container = document.getElementById('app');

// create a root
const root = createRoot(container);

//render app to root
root.render(<App />);
```

And you are now upgraded to React 18! enjoy! 
Complete update guide is available [here](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html)


Sources:
1. https://reactjs.org/blog/2022/03/29/react-v18.html
2. https://www-freecodecamp-org.cdn.ampproject.org/c/s/www.freecodecamp.org/news/react-18-new-features/amp/
A New portfolio Template
Tags: javascript, webdev, nextjs, opensource
Published: 2022-04-16 14:57:12

Hey guys I have just added new Template to [DEV.UI](https://dev-ui.vercel.app/)
Check out this [New Portfolio Template](https://dev-ui.vercel.app/templates/portfolio)

[Github Link](https://github.com/kumard3/dev-ui-templates/tree/main/template-8)
[Deployed Link](https://portfolio-templte.pages.dev/)
Markdown
Tags: wecoded, biolog, it, computerscience
Published: 2022-04-16 14:54:52

# My name is Kumush
## My surname is Aliyeva
### I am 25.
#### I am biolog.
##### Now I am working as junior researcher.
###### I live in Tashkent.

- Today I learned 3 websites:
* websites:
  - github.com
  - dev.to
  - typing.com

In **my work** I usually use *computer* in order to make `phylogenetic tree`.
```cpp
My lab is <<"Molecular phylogeny and biogeography">>.  
```
[our team] (https://t.me/foudation_ladies)

{% embed https://www.youtube.com/watch?v=jWWXURf1zWw %}
Day 11: Finished Redux
Tags: 100daysofcode, beginners, javascript, redux
Published: 2022-04-16 14:24:19

*The Fyeamn tehcinuqe syas taht taecinhg a sbujcet makes you better at it, which is what I'm trying to do here. You may correct me if you saw mistakes in this post*

## Asynchronous Data

Handling data that don't come on time is annoying (much like that one friend who's always late). Redux can't handle asynchronous data by itself. Instead you need yet *another* software to achieve this, the aptly named *middleware*.

Here, we will use Redux Thunk:
```js
let store = Redux.createStore(reducerFunction, ReduxThunk.default);
```
This is to include Redux Thunk into our project.

To update states asynchronously, we need to design a special action creator:
```js
const actionCreator = () => {
  return function(dispatch) => {
    // You can dispatch loading action here
    // Here you can get the data
    // And then call an action, updating the state with the data
  }
};
```
Note that the `dispatch` argument is mandatory.

## State immutability

Redux DON'T force you to make the state immutable. However, you should.

Keep this in mind when you are working with arrays or objects.

## Afterwords

I'm writing this during a very heavy rain, and I panicked a bit when the internet dropped 😵. Luckily it came back (Well, you won't be seeing this post if doesn't). 

I didn't learn a lot today, the circumstances of today really took a hit on my energy. Anyway, good luck to other people going through this challenge 😇. I need to catch my sleep 😴.

Follow me on [Github](https://github.com/Kemystra)!
Also on [Twitter](https://twitter.com/kemystra)!
Python: Installation
Tags: python, beginners, programming, tutorial
Published: 2022-04-16 14:14:20

Welcome to this "episode" of a tutorial series;
Today we are here to understand how to install Python and understand what Python is:

> Python is a "high level" programming language, object oriented, suitable, among other uses, for developing distributed applications, scripting, numerical computing and system testing.

But now, let's begin the installation

1. Go on [Python.org](https://www.python.org) and Click on "Download"
![Example Imaage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7wbwv03qgnt16tj98ua.jpg)
2. Click on the Python + Python Current version ( in this case 3.10.4 )
3. Open the installer and make sure you have clicked the PATH pin
4. Verify if all are correct opening your cmd and type `python`

![Example image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7u77vnuhbhr0ai9onoe.jpg)
 
Now we are ready to installing an IDE 
The Default IDE is IDLE ( you can check it typing IDLE on your search in the os ) 
but there are thousands of IDEs these are the best known:
1: PyCharm.
2: Visual Studio Code.
3: Sublime Text.
4: Vim.
5: Atom.
6:Jupyter Notebook.
7: Eclipse + PyDev + LiClipse.
8: GNU Emacs.

I (via my experiences)
I recommend using [Visual Studio code](https://code.visualstudio.com/)
( For install it follow the enstructions )
It's really easy to setup and confortable.

After this now, we can start programming clicking on "file" -> "new File" and calling the the file "main.py"
now you will find an interface where you can write everything
![Ex](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2agop6g7sd3kq0pfzlsv.jpg)
## At the next episode we will do our first program!
github of the project: https://github.com/moonl1ght01Dev/Python-Tutorial
Do you use caching in your CI/CD pipelines?
Tags: discuss, ci, cd, devops
Published: 2022-04-16 14:14:14

---
title: Do you use caching in your CI/CD pipelines?
published: true
description: Only 20% of GitHub Actions use caching according to study.
tags: discuss, ci, cd, devops
//cover_image: https://direct_url_to_image.jpg
---

According to [this study](https://mairieli.com/files/papers/MSR2021.pdf) only ~20% of GitHub actions use caching to speed up builds! 🤯

![Only 1729 out of 7962 projects use caching](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b7yyj6nituj5aibecyhc.jpeg)

Seems incredibly low and wasteful to me, so I was wondering. How many of you don’t use caching in their projects? And what are the reasons why not?
Web 3.0
Tags: web3, discuss, webdev
Published: 2022-04-16 14:11:45

**What is Web 3.0?**
Web3 is the name some technologists have given to the idea of a new kind of internet service that is built using decentralized blockchains — the shared ledger systems used by cryptocurrencies like Bitcoin and Ethereum, and many other decentralized applications.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nguauqfw0iwyciw9ufg9.png)
_
Proponents envision web3 taking many forms, including decentralized social networks, “play to earn” video games that reward players with crypto tokens, and NFT platforms that allow people to buy and sell fragments of digital culture. The more idealistic ones say that web3 will transform the internet as we know it, upending traditional gatekeepers and ushering in a new, middleman-free digital economy._

But some critics believe that web3 is little more than a rebranding effort for crypto, with the aim of shedding some of the industry’s cultural baggage and convincing people that blockchains are the natural next phase of computing. Others believe it’s a dystopian vision of a pay-to-play internet, in which every activity and social interaction becomes a financial instrument to be bought and sold.
But the web3 boom also reflects the amount of capital, talent and energy pouring into crypto startups on the heels of a years long crypto bull market.

**How is Web3.0 different from Web1.0 and Web 2.0?**
Web1, in the traditional telling, refers to the internet of the 1990s and early 2000s. It was the internet of blogs, message boards, and early portals like AOL and CompuServe. Most of what people did on web1 was passively read static webpages, and much of it was built using “open protocols” like HTTP, SMTP and FTP.

Web2, was the next phase of the internet, starting around 2005 or so — the one characterized by social media behemoths like Facebook, Twitter and YouTube. In web2 (or Web 2.0, as it was usually called then), people began creating and posting their own content, actively participating in the internet rather than passively reading it. But most of that activity ended up being distributed and monetized by big companies, which kept most of the money and control for themselves.

Web3,will replace these centralized, corporate platforms with open protocols and decentralized, community-run networks, combining the open infrastructure of web1 with the public participation of web2.

**What’s an example of a web3 app that exists today?**

An oft-cited example is_ Axie Infinity_, a video game developed by Vietnamese game studio Sky Mavis, which uses NFTs and Ethereum-based cryptocurrencies to reward players with real money for achieving in-game objectives.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eecifpr48y3l9vlkgfwg.png)
How to correctly close files in Python
Tags: python, beginners, programming
Published: 2022-04-16 13:55:13

When working with files in Python, it's quite common to explicitly invoke the `close()` method after processing the file. This might work fine in a lot of cases, however it's a common pitfall for beginners and developers coming from other languages.

Take for example the following code. If an exception is thrown before calling the `close()` method, the file would remain open. In such a scenario, the code would stop executing before `close()` is called, leaving the file open after the program crashes.

```py
f = open('filename', 'w')
f.write('Hello world!')
f.close()
```

One way to mitigate this problem is to encapsulate the `write()` call in a `try` statement. This way, you can handle any exceptions and you can use `finally` to ensure the file gets closed.

```py
f = open('filename', 'w')
try:
  f.write('Hello world!')
finally:
  f.close()
```

Another option offered by Python is to use a `with` statement which will ensure the file is closed when the code that uses it finishes running. This holds true even if an exception is thrown.

```py
with open('filename', 'w') as f:
  f.write('Hello world!')
```

---

_Do you like short, high-quality code snippets and articles? So do we! Visit [30 seconds of code](https://www.30secondsofcode.org/) for more articles like this one or follow us on [Twitter](https://twitter.com/30secondsofcode) for daily JavaScript, React and Python snippets!_ 👨‍💻
Upgradable contracts (part-1)
Tags: solidity, smartcontract, ethereum, web3
Published: 2022-04-16 13:49:30

### In Part-1, We will see what is Upgradable contract

One of the basic rules of EVM is that once a contract is deployed, it cannot be changed. Instead, an upgradable smart contract uses a special proxy pattern. The latter involves deploying proxy contracts and implementation contracts (logic contracts).

- User interacts with proxy contract that intiates fallback function that deligates call to contract implementation(V1).
- Proxy contract has upgrade function to deligate call to new contract implementation(V2).
- For security purpose, upgrade function should be invoked by only Admin.
- Admin interacts with proxy admin contract which interm calls upgrade function of the proxy

![image 1](https://raw.githubusercontent.com/chandrakumarreddy/upgradeable--smart-contract/master/images/Screenshot%202022-04-16%20at%207.09.59%20PM.png)

![image 2](https://i0.wp.com/blog.openzeppelin.com/wp-content/uploads/2020/09/graph-04.png?resize=840%2C420&ssl=1)

![image3](https://res.cloudinary.com/practicaldev/image/fetch/s--nGhnsYS9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84bmjpjdb8d7rbc4szqc.png)

### what is the need to upgrade our smart contracts ?

- fix vulnerability
- update bussiness logic
- add new functionality
Close to the end
Tags: opensource
Published: 2022-04-16 13:17:39

This weeks blog marks the second last blog I will be doing for this course. It's been a pretty wild ride, but I will do a proper reflection on the course for my last blog coming up next week. For now, as usual, let's talk about the week that was.

### Octokit

In last weeks [blog](https://dev.to/tddr/second-to-none-2145) I had mentioned that I did some R&D into adding Octokit to the dependency discovery service, but needed to follow up with Jerry to clarify some things. After following up with Jerry, I figured out we just wanted to update the usage of `octokit/request` to be from `octokit` instead. This would give us more options later in the future. 

After a couple of iterations, I was able to put up a [PR](https://github.com/Seneca-CDOT/telescope/pull/3485) for the issue. All I had to do was get ride of any references to `octokit/request` in the `pnpm-lock.yaml` and then do a `pnpm install octokit`. From there I just imported Octokit, assigned it to a variable and used the code as is, but just added the variable in front of the existing request like so. 
![Octokit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upig40wbb5se09lo6rib.png)
 
During the triage meeting, we had some more discussion arise about the PR. We decided that it would be best to also update the usage of some other octokit stuff we have going on in our `status` microservice. 
![Other](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wugqcd1nxw6k8t2h7rbj.png)

I ran into some issues trying to implement this so I switched my PR to a draft and am currently still troubleshooting. Should be able to get this in for 3.0.

### Migrating with Prisma
I unintentionally ended up being the tester for the new Prisma migrations Duc had set up. During the planning meeting we had decided to meet at 2pm to properly triage some of the remaining issues for integrating the `parser` service. 2pm roles around and I notice that there is still a meeting going on that started at 1pm about the prisma migrations. When I joined the meeting they where just finishing up writing the documentation for performing a migration.

The professor then called me out to test it, which made sense because he wanted to see if the instructions they just made where clear enough for someone to successfully do a migration by just reading the documentation. Considering I had never even visited the Portainer site before, I was a great candidate. There where only a couple of things missing from the documentation, and a few of the steps needed to be rearranged to be in the proper order of operations, but I was able to successfully migrate! (Should have saved a screen grab of it)

### Closing

So that was my week 13/14 for this course. As mentioned earlier, my last blog coming up next week will be a recap of the week that was, and then a overall reflection of how the course was and what I took away from it.
Day 1: Setting up for participation in the Appwrite hackathon
Tags: appwritehack
Published: 2022-04-16 13:10:27


I'm probably too late to the party lol.




I just finished up UX design of the app, and might not do too much in UI design (maybe just colors) to save time. 

The app idea is a multiplayer game where players compete to form a name off a letter. I want to reveal the details about the game but I'm not sure if it's a good, please let me know if it's okay to reveal, I will do that on Day2 update.




**What is in Appwrite that I'm going to utilize?**

Obviously **Database** is the most important thing for the app to perform CRUD operation, there will be no "Read" operation though, because, coming from Firebase I think it is costly (this is my thought before reading the docs).

The initial idea was to allow players to create "Room" then the created room will be available for every players in the app, but to cut down the cost I thought to allow players make "Private Room" then invite friends. I think there will be "Read" operation after all! cause "Friends List" lol :).

other stuff to utilize is **Authentication** at least for the sake of creating the "Rooms" under unique IDs (users Token, ID, etc...) and prevent crashes and awkward moments.

probably **Storage** to allow users upload their photo to replace an avatar. The game has flashing card with design, so I might utilize the storage even more by allowing users upload and use their custom design or a store for card design, it will be great if I'm able to do all that before the deadline, if not, maybe when I'm going to scale the app further.

And **other things that I'm going to find out that I need when I actually start to develop** will be included in the coming series



Tomorrow is Sunday! so I will try to finish the UI in Flutter to be able to focus on the backend throughout the week while my 9 - 5 job.

although I'm native Android dev, I chose to make it in Flutter because I'm fairly new to Flutter, and at the time of this post, I'm using Flutter for 2 months and 16 days, because my job requires it. Also it is a good opportunity to sharpen my newborn skill, and to explore other backend services (I'm familiar with Firebase and phpMyAdmin).


26 days left, maybe I'm not too late to the party
How to make change to VSCode extension like this
Tags: vscode, opensource, tutorial, beginners
Published: 2022-04-16 12:52:22

## Extension are something what makes vscode different from other editor

> and something better is that you can make change to those extension according to your own style/ needs

### use make changes to any extension from extensions tab.

**press** <kbd>Ctrl</kbd> + <kbd>,</kbd> to open setting in **VSCode**.


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

### Type the name of extension you want to make changes to (e.g. better-comments)


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

### Click on <kbd>Edit in settings.json</kbd>

### Yeap!, now you can access the code of extension.

## Lets 🤫 make changes.

```json
// add this extra code to the end of the file

    {
        "tag": "update",
        "color": "#8C3FE2",
        "strikethrough": false,
        "underline": false,
        "backgroundColor": "transparent",
        "bold": false,
        "italic": false
    },
    // best color for check
    {
        "tag": "check",
        "color": "#00FF00",
        "strikethrough": false,
        "underline": false,
        "backgroundColor": "transparent",
        "bold": false,
        "italic": false
    },

```

### This will make sure that when ever you type ***check*** or *update* in you comments, it will be highlighted in *green* and ***purple***


## 🤪 Make sure to reload the vscode, only then it will work



# 👏🏾Clap for your self, you have successfully made changes to vscode extension


**🤝🏾Connect me on:**
**Twitter**: 🕊️[`@Abhayprajapati_`](https://twitter.com/Abhayprajapati_)
**Github**: 🐧[`@theabhayprajapati`](https://github.com/theabhayprajapati)
**Linkedin**: 📌[`@abhayprajaapati`](https://www.linkedin.com/in/abhayprajaapati/)
**Youtube**: 📺[`@Abhayprajapati`](https://www.youtube.com/channel/UCUrQHSjXEAyboKLN_M0w0Mg)
How to study CCIE and get certified?
Tags: ccie, cisco, network
Published: 2022-04-16 12:49:04

Hey guys, do you have a technical explanation video about VLANs? I am preparing for the CCIE EI exam！
I'm not familiar with the technology in this area, and would like to ask if you have any recommended videos?
And, if there are friends who have taken the test, can you give some tips or help? Thank you in advance!
My Whatsapp: +8617622932186
chet tilini o`rganish va hobbilar
Tags: hobby, programming
Published: 2022-04-16 12:35:23

# Hobbyning to'g'ri tanlanishi
at first we should know why we need hobbies:
- provent time wasting
  - saving time
- relaxing
* feeling thanksfullness
## so let`s talk about why you have to learn programming?!

first of all everything is depended on money

{% embed https://www.youtube.com/watch?v=yQirjU2wCws %}

in case of easiest way of 'earning money from home'
and the first way to enter programming is learning c++
it is connected with such keywords:
```cpp
cout<<"My first project"<<endl:
```
it is easy, isn't it?
now start learning)))
Diffk Solution - Interviewbit
Tags: cpp, dsa, twopointer, interviewbit
Published: 2022-04-16 12:28:59

Hi Devs, Happy Coding 
I am planning to revise Data Structure and Algorithms Concepts so I will be sharing my approach as well as a full solution for problems I solve. This is my first attempt at writing a dev blog, yeah I am a bit nervous. Hope you like it and Your valuable feedback and contributions are always welcome.

Today I am going to solve a coding problem [Diffk](https://www.interviewbit.com/problems/diffk/) which is based on the Two Pointer concept.

**Asked In - Facebook Interview**
> Problem Statement - Given an array ‘A’ of sorted integers and another non negative integer k, find if there exists 2 indices i and j such that A[i] - A[j] = k, i != j.

**Time and Space Complexity Constraint**   
    1. Try doing this in less than linear space complexity.

**Example** 

```
Input :
  A : [1 3 5] 
  k : 4
Output : YES
Explanation : as 5 - 1 = 4
```

**Brute Force Approach -** we use two loop for two indices i,j  and iterate if we find any A[j]-A[i] = k and i!=j then return 1 else 0.

```
int diffPossible(vector<int> &A, int k) {
  int N= A.size();
  for (int i = 0; i < N; i++) {
    for (int j = i + 1; j < N; j++) {
      if (A[j] - A[i] > k) break; // No need check forward because Array is sorted so the difference is going to increase even further because A[I] is going to increase or remain same.
      if (A[j] - A[i] == k) return 1; 
    }
  }
  return 0;
}
```
The Time Complexity of this approach is O(N*N). 

**Observation**
Let's check the above approach when we have `i = I` and find `j=J` ,`Diff_1 =(A[J-1]-A[I])` such that `Diff_1 <k` and `A[J]-A[I] >k`

- 
This means that for `i =I` and `j> J` we are not going to find our solution because `A[j]` will be increasing(Array is sorted) so will `A[j]-A[I]`.

- 
when `i` increase then `A[i]` will increase too then `A[J]- A[i]` will decrease so till `j =J-1` our `A[j] -A[i]` will be less than `Diff_1` which is also less than `k`( Observation 1 ) So we will not find our solution till `j =J-1`. So Efficient Approach will be when we don’t start `j` every time with `I+1` but start with j=J.

**New Approach Code (Time Complexity:  O(n))**
```
int diffPossible(vector<int> &A, int k) {
    int N = A.size();
    int j = 0; 
    for (int i = 0; i < N; i++) {
        j = max(j, i+1);
        while (j < N && (A[j] - A[i] < B)) {
            j += 1;
        }
        if (A[j] - A[i] == B) return 1;
    }
    return 0;
}
```

[Github Solution Link](https://github.com/vpsinghg/DSA/blob/master/InterviewBit/Two-Pointer/Diffk.cpp)
My job
Published: 2022-04-16 12:27:03

# My ideal job is IT specialist 
## Why I've chosen this job 
### what benefits I can get from this 
Honestly, I'm quite interested in this field because working with computer and programming are the things which I quite enjoy. The other main reason for choosing this field is flexible time working as l am able to work remote or any part of the day. If you need any IT course, you can contact me via [ telegram ](t.me/senorita_0901)
Nilufar
Tags: beginners, dasturlash
Published: 2022-04-16 12:26:46

# Alphabet of korean language
### by Nilufar Bukhorova

- Korean language devided into two parts:
  - simple letters
  - diphthongs
All of them are 40. Nowadays it is easy to learn, because as the past. there are not any hieroglyphs. If you have any other questions, please apply this account:

[Here](https://t.me/nilufar_bukhorova)

**and you can learn this from online videos in youtube**

{% embed https://youtu.be/0ZhOeA0RD9o %}