teleren/devto huggingface dataset:
node: the new Node.js protocol
Tags: node, javascript, protocol, fiberx01
Published: 2022-01-20 17:54:32

## Node 

Nodejs is open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.

## node: Protocol

this amazing runtime environment just launch a new protocol which allow the coder to be more sure that he include the right library and not a fake one .

## Usage 
Usually we use  `import * as fs from 'fs/promises';` for importing a library, but the problem is that sometimes we might have two libraries with the same name, one official from **node.js** or a core library, and the other one is written by the community and hosted by **NPM**, so to make sure we're using the official library, we can now use the `node `protocol like this: 
`import * as fs from 'node:fs/promises';`

## Benefits 

It may seem simple and not very useful, but this new feature can really protect you from substitution of modules, we can find module downloaded overwrite a base module, so it may be dangerous for your code.

Another advantage is that you can clearly see which core node modules you are using in your code.

Finally, I hope this helps you coding better and thank you.
Ethernaut Level 2: Fallout Tutorial 
Tags: solidity, smartcontract, security, blockchain
Published: 2022-01-20 17:37:47

This is the second part of my series around Ethernaut Game. In this post, we will deal with Level 2: Fallout.

Our goal is to claim the ownership of a given smart contract.

If we look at the function `Fallout` we see that it suppose to be the constructor. This is due to comments and the fact that constructors always are named in the same way as the smart contract. As you know a constructor only gets executed when the contract first deploys.

After further analysis we see that this is the only place where the ownership of the smart contract is assigned. 

```
  /* constructor */
  function Fal1out() public payable {
    owner = msg.sender;
    allocations[owner] = msg.value;
  }
```

One of the recommendations was to analyse the contract in the Remix IDE. Why?

Because when you look at the constructor again you will see a typo in the name. Recall that the name of the constructor should be the same as the smart contract name, i.e. in that case `Fallout`. However the name of the constructor is `Fal1out` This means that this is not a constructor, but a normal function that we can call to claim ownership. 

So, let's give it a try. First, we call the function and after that check who is the owner of the contract.


![ethernaut level 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nocd73382ftufna1kowr.jpg)

That's it. We claimed the ownership. 


###Conclusion

The vulnerability in the smart contract was the wrong name of the constructor. It was supposed to be a constructor however, due to a type (`Fal1out` not `Fallout`) it behaves similarly to any other function.
Quantum Developers
Tags: productivity, management, agile, jokes
Published: 2022-01-20 17:14:15

Just like electrons, software developers are impossible to observe without interfering.

In the [double-slit experiment](https://en.wikipedia.org/wiki/Double-slit_experiment), zapping electrons with microwave radiation changes your results (for historical reasons, we call that zapping process "observation," because the photon-electron interaction on the human scale is called "seeing with your own eyes," but this process is slightly more destructive to the internal state of chill of an electron [this has led to a lot of metaphysical misunderstandings of the beautiful city of Copenhagen {but let's not get there &lt;yet&gt;}]).

For a long time, humanity believed that the largest beautiful quantum objects were black holes (or rainbows, depending on who you ask), but the last few centuries of corporate fashion has created a completely new phenomenon that's been appreciated infinitely more: **managers trust people for whole 2 weeks at a time without pestering them every 5 minutes: "are we there yet?"**!

Before a [Scrum Sprint](https://en.wikipedia.org/wiki/Scrum_(software_development)#Sprint) was invented, a lot of project managers tracked the tasks by percentage of completion. Centering a DIV was either 50% done or 80% done, but it wasn't acceptable *not* to know the exact internal state of every microtask. And as we all know, intellectual workers are a lazy folk who cannot be trusted (yeah yeah, a drive for the efficiency of our glucose consumption is driven by evolution, it's biologically impossible not to be lazy, whatever). What changed?

As with any improvement in life, [empirical evidence](https://en.wikipedia.org/wiki/Empiricism) came to the rescue. When asked about minute details, developers are never finished, the results are never perfect. When left alone with a bag of tasks, those tasks get done, somehow and good enough. Over time, managers of the surviving corporations  learned a magic ritual - trust the developers to do as much as possible without checking for progress too often. Sometimes, it takes 2x longer as their original estimate, other times they finish 5x faster. But somehow, when we ask about status of some particular task, the quantum state of that task collapses into a binary state "finished" or "not finished" and the latter state always takes 1 more week to finish - so asking the same question too often will make a task infinite with non-zero probability.

So here we are. Managers in 2022 trust developers. It happens by a miracle, and the spell can be broken any time they try to micromanage. The good managers just intuitively follow the *Aprillion's Law of Quantum Developers*: 

> Just like electrons, software developers are impossible to observe without interfering.

---

👋 *I am Peter, a.k.a. [Aprillion](https://github.com/Aprillion/). My strong opinions are held weakly, discussion is open here in the comments or on [Twitter](https://twitter.com/aprillion0042).*
C programming in 2022?
Tags: c, cpp, programming, beginners
Published: 2022-01-20 17:04:33

Let's get to the point is C programming language worth learning in 2022?

Simple answer: YES
Reason?

If you are getting into programming it's a good idea to start with c because this language will teach how the bare metal (computer) works.

From memory to cpu instructions, it's pretty simple language compared to c++ and c is worth learning as it would never hurt to keep this old language still alive.

After learning c you should try rust or c++
Questions to ask your client who wants an e-commerce website.
Tags: ecommerce, shopify, woocommerce, startup
Published: 2022-01-20 17:04:04

A lot of times, clients come with a vague one-line statement - I want to build an online/e-commerce store.
 
Mostly, clients themselves might not have thought about all the aspects of an e-commerce store.
 
Here’s a list of questions to ask yourself to get a clear idea of what does it mean to start an e-commerce website.

1. What products are you going to sell?
2. Who are you selling your products to? What is your target market? - countries / region.
3. Do you have the product information ready in an excel file?
 * Name of Product
 * Description
 * Price
 * Image for the product
 * This product belongs to which category/categories?
4. How many products? Rough estimate.
5. What are your main categories? Think of it as the main menu on a website.
6. Are your images ready or does it required to be resized/worked on by a graphic designer?
7. Do you have the products in stock or is it a dropshipping business?
8. Do you want your website to be in a single language or multiple languages?
9. Do you want your website to show prices in the same currency to all the users in the world? Or should it change currency based on the country of the users?
10. How are you planning to receive money? - Cash on Delivery/Card Payment/ Wallets (Payment Gateway).
11. If Payment gateway, do you have business documentation such as Trade License?
12. How are you going to ship your products?
13. Do you accept returns? What is the process if a customer wants to return your product?
14. Do you sell items as pre-orders?
15. Once the website is built, who will manage it? Do you have any technical staff or yourself?
16. Are there any particular features that you would like to have?
 
I ask these questions to all my clients as a first thing. This helps me define the scope of the project and set expectations for myself and the client right.

Are there any questions you would like to ask to further clarify the scope of the e-commerce project?
Progressive JPEG: What They Are and How They Help Improve Web Performance
Tags: webdev, javascript, webperf, beginners
Published: 2022-01-20 17:01:12


A progressive JPEG image is a JPEG image that is encoded in a different manner than a baseline JPEG. It loads in waves until a clear picture is loaded. This can improve the performance of a website as the image appears to be loading faster.

## The difference between Progressive JPEG and baseline JPEG

The differences between Progressive JPEG and baseline JPEG are mostly in the encoding and compression. And they are most visible on a slower internet connection.

The baseline format loads one line at a time, top to bottom. whereas the progressive JPEG one appears blurry and pixelated at first and then loads into a clearer image.

![](https://cdn-images-1.medium.com/max/2000/0*DdsmbU2QN3lZrP8o.jpg)

As can be seen, the user experience drastically improves with Progressive JPEGs.

## Converting images

While there are quite a lot of tools, both applications, and web-based, web developers want a CLI to be able to do so. And jpegtran is exactly that.

    $jpegtran -progressive old.jpeg > new.jpeg

There is also an [NPM package](https://www.npmjs.com/package/jpegtran) for it.

It is also worth noting that all major browsers support Progressive JPEG:

![](https://cdn-images-1.medium.com/max/2048/0*LlqKeNdujejsIlIt.png)

The exception, Safari, will render the image all at once. So progressive JPEGs work for Safari too, not how it works everywhere else. But at least it is not broken!

And that is all that there is to share about Progressive JPEGs. Start using them in your applications, now!

*Originally published at [https://www.wisdomgeek.com](https://www.wisdomgeek.com/development/web-development/progressive-jpeg-what-and-how-they-help-improve-web-performance/) on July 31, 2021.*
Building A Game Yahtzee
Tags: javascript, webdev, beginners, programming
Published: 2022-01-20 16:59:39

**This Game is a Part of the Colt Steele React Course**

Yahtzee is a chance-and-strategy dice rolling game. A game is played over 13 rounds.

Each round, the player rolls five 6-sided dice. They may click on any number of dice to “freeze” or “unfreeze” them (frozen dice are displayed in a different color). They may re-roll the unfrozen dice up to 2 times.

Each round, they must assign their dice to any unclaimed scoring category. Each category scores differently.

After 13 rounds, the game is over, and the player’s score is the total of each scoring category.

The Game Look Like This 👇

![Yahtzee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nun566ueknsu8r8eyyx.png)
 
I have not Built it from the Scratch I was provided with the Starter Code (Most of the Part was Done already).

As an Exercise I have to Fix The problem and Understand the App Flow.

Have a Look at the Code 👇

https://github.com/Developer-io-web/Yahtzee


### Things I have Learnt By Doing This Project 

**Actually This Game only test Your Knowledge of Props , State and Function But also It Forces u to be use Your Logical Ability cuz there are many things that were hard to understand and By only seeing the code u couldn't tell what a particular function is doing.**

So My advice is to take Copy and pen with you when You doing any Project or Exercise to get it done fast .

**Things I have learnt**

**1.) `Sets` = Set is a Collection of the Unique Value , Each value can only be appeared in the Set**.

- Methods of Sets 

a.) new Set() = It is used to Create New set
```jsx
const arr = [1,1,1,1,2,2,3,3,4,5,6]
const set = new Set([arr]);
//set = [1,2,3,4,5,6]
```
You can pass an Array to `new Set()` Method.

b.) add() = Adds a New element to the Set
```jsx
set.add(4);
```

c.) has() = Return true if a value exists in the Set 

```jsx
set.has(1);
//Return True
```

**And there is also a Set Property called size**
`size` = Returns the Number of elements in a set

**Also there are many Methods of Set But u can always use the Google whenever u are Stuck No need to Cram all these u will learn these as u start using them 😉**


2.) `For Each` Method 
I already knew about this method but use it very rarely .
The `forEach()` method calls a function for 
each element in an array.

For Example ->

```js
const arr = [1,2,3,4,5];
arr.forEach(ele=>{
   console.log(ele);
})
//It will console.log the whole array.
```

3.) `Array.from()` Method

The from() method creates a new array

When applied to a string, each word gets converted to an array
element in the new array.
**Syntax**
```jsx
Array.from(object);
```
It Return a newly created Array.

```jsx
let arr = Array.from("Hello How are you"); //The string will get converted to an array.  
```

You can pass in it anything , it will Created a Array for u.

```jsx
let arr = Array.from({length:10});
//Array is Defined but with undefined values u can fill the values later.
```

Happy Coding ☺️
ADV vs NVL Style in Ren'Py
Tags: gamedev, tutorial, renpy
Published: 2022-01-20 16:58:00

Renpy has two styles of presenting a visual novel: ADV and NVL. This article will compare and contrast between the two styles.

## ADV
ADV visual novel present dialouge and narration per line inside of a text box. ADV visual novels are the most common visual novel presentation. Most popular visual novels are in ADV style. 

## NVL
NVL is another style of visual novel that shows multiple lines of text in a window. While NVL is the less popular choice for visual today.Earlier visual novels used NVL before ADV was popular. Some indie developers still chose to use it for aesthetic purposes.

## Which one to use?
ADV is the most popular style of visual novel you will see. ADV visual novels are common to both indie publishers and game companies.

NVL is used for text heavy stories with more narration in the story.The text window covers most of the graphics. Think of it as a traditional novel exeperience with text across the screen. 

## Developing a ADV or NVL visual novel 
ADV is the RenPy default and makes it easy to create dialouge in script files. RenPy allows you to switch to NVL mode if you want to create a NVL style visual novel. 

Developing ADV style visual novels are straightfoward compared to NVL style where you have to make a few changes. To switch into NVL mode start by defining the characters. The only difference is adding `kind=nvl`.To define a narrator use `nvl_narrator`. Here is what it looks like:

```
define j = Character("John", kind=nvl , color = "#0E6818")

```

Another thing with NVL is pagination. Lets create a script that set up our visual novel by breaking the script into two pages. 

```
define j = Character("John", kind=nvl , color = "#0E6818")
define narrator = nvl_narrator


"I'm so glad to be back home. Last semester was so stressful."
"Deciding where to spend the summer I just wanted to relax. I rented out a cabin at a small town."

nvl clear

"The cabin is smaller than I'm used to. It has 2 bedrooms, a living room, bathroom and kitchen."
"I unpacked my things in my room."

nvl clear
```

Here what it looks like in ADV style.

```
define j = Character("John", color = "#0E6818")

"I'm so glad to be back home. Last semester was so stressful."
"Deciding where to spend the summer I just wanted to relax. I rented out a cabin at a small town."

"The cabin is smaller than I'm used to. It has 2  bedrooms, a living room, bathroom and kitchen."
"I unpacked my things in my room."

```

When using ADV default , we don't have to make as many declarations compared to NVL.

## What's next?
I would recommend ADV for most since ADV style is the default choice for many modern visual novels, and the artwork is the main focus on the screen. A downside of NVL is it requires more formatting and customization if you want to make it unique. It all comes down to which style fits your visual novel.  

### Resource
[NVL Mode documentaion](https://www.renpy.org/doc/html/nvl_mode.html)
F-Curator — A Bookmark(favorites) Manager App
Tags: electron, react, frontend, javascript
Published: 2022-01-20 16:42:47

---
title: F-Curator — A Bookmark(favorites) Manager App
published: true
description: F-Curator is an offline application that comes at you all day long and curates your own web favorites.
tags: electron, react, frontend, javascript
//cover_image: https://direct_url_to_image.jpg
---

This is an application that solves the permanent collection(bookmark, favorites) database without the network. Based on Electron and React technology.

[Official Website](https://xizon.github.io/F-Curator-Official-Website/)

[Video Overview](https://youtu.be/VYdzttKU5H0)

![quick overview](https://raw.githubusercontent.com/xizon/F-Curator/main/public/assets/images/main/preview.jpg)


Features:
- Offline support and fast speeds
- Easily achieve data persistence
- Fetch remote resources to the local database
- Category management and clear list blocks
- Drag and drop sorting
- Exporting HTML that separates APP to use favorites
- Support quick search for URL and Site Name
- Judgment of URL validity and repetitiveness
- Automatically extract resources local, such as icons

Hope this app could solve your problem, it will be updated continuously. :)
Next JS – optimize blog posts
Tags: react, javascript, nextjs, webdev
Published: 2022-01-20 16:38:06

This website is built with Next JS and WordPress. I used WP for the blog part of the website, as there is no need to reinvent the wheel when it comes to a CMS. I worked with WP long before starting with Next JS, so it was a natural choice. 

Many writers, including me, use images in blogs posts. So when you import that blog post into Next, most people use dangerouslySetInnerHTML to render all the HTML. 

`<div dangerouslySetInnerHTML={{__html: post.content}} />`

This usually works well, but it could be better. The problem here is that all of the images in the content will be in a standard <img /> tag, which is not recommended in Next JS. In Next JS, you should use the Image component from ‘next/image’, which optimizes images to make them smaller in size, therefore reducing the page size and ultimately the loading times.

**html-react-parser**

So, how can you fix this? Well, as the heading suggests, html-react-parser. The parser converts an HTML string into one or more React elements. We can use this package instead of dangerouslySetInnerHTML to parse the HTML from our post and replace content when it is being parsed. Here is how you do it:

**Install the parser**

`npm i html-react-parser`

**Import and use**

Parsing the HTML string with the parse function, which is taking in the HTML string and options as parameters.

`<div>
    {parse(blog.content, replaceImage)}
</div>`

The options I pass to the parser, to target the img tag and replace it.

`const replaceImage = {
    replace: ({ name, attribs, children }) => {
        if (name === "figure" && /wp-block-image/.test(attribs.class)) {
            return <>{domToReact(children, replaceImage)}</>;
        }
        if (name === "img") {
            return (
                <Image
                    src={attribs.src}
                    width={attribs.width}
                    height={attribs.height}
                    alt={attribs.alt ? attribs.alt : "Blog post image"}
                />
            );
        }
    }
};`

Now all inserted images in the blog post use the Image component.
[Full Gist.](https://gist.github.com/kasperaamodt/055c6203d8761b4500c5fb108f0e4f03)

**Performance**

So, why should you do this? As stated above, it will optimize all images in posts, leading to faster load times, and ultimately, better SEO. Of course, the package itself does increase the bundle size. But the slight increase that adds, compared to the savings on image sizes, is a net saving in bundle size.

Originally posted on [aamodt.xyz](https://aamodt.xyz/blog/next-js-optimize-blog-posts)
Release Notes 22.01.20 - More Stability and Performance Improvements
Tags: devops, networking, sdn, release
Published: 2022-01-20 16:32:41

We're excited to present you with the latest release of Syntropy Stack. Our team has been working on many stability and performance improvements to improve your Syntropy Stack experience today.

As we progress our technology and grow the ecosystem, we listen closely to our community to build tools that matter. If you have any feedback or ideas, let’s talk on [Discord](https://discord.gg/UYDyHwk5gN).

> **Syntropy Stack** is free to use.
> **[Access the platform here!](https://platform.syntropystack.com/?utm_source=devto&utm_medium=devto&utm_campaign=release0921)**

---

# Improvements

- Analytics batch data write.
- Increased the active area of an annotation line.
- Implemented analytics data insertion to database queue.
- Implemented multiple health checks across the platform.
- Analytics annotations aggregation algorithm improvements.


# Bug Fixes

- Fixed search by endpoint IP.
- Added validation for Threshold inputs.
- Fixed Connections table auto-updating.
- Fixed date picker issue after filter reset.
- Fixed agent token table "Notes" column.
- Fixed analytics to display data according to timezones.
- Added prevention while selecting a date in the future in the date picker.
- Fixed last date point being partially hidden in analytics latency and loss charts
- Other minor bug fixes & visual improvements.

---

# Get Started
Get started with Syntropy Stack with our three-minute [quick start video](https://vimeo.com/499558754), or follow the [documentation](https://docs.syntropystack.com) for more details. Use Syntropy Stack to streamline your container and multi-cloud deployments and automate network orchestration.

# Get Involved
Our community helps us identify the right problems to solve for our users, whether you're an active user of one of our products or just getting started [join our community on Discord](https://discord.gg/UYDyHwk5gN)! We love to foster communication among developers. Also, don't hesitate to send us a message if you have feedback or need assistance. We're happy to help!
React Basics!
Tags: react, javascript, webdev, beginners
Published: 2022-01-20 16:10:30

### 💭 What is React?

*  A UI library developed by Facebook
* creates interactive, stateful, and reusable components
*  it uses Virtual DOM
* example: Instagram .com is completely written in React

### ✨ Features is React?

*  it makes quick and responsive apps
* uses Virtual DOM
* Does Server-Side Rendering
* Single Way Data Flow
*Open Source

### 😌 Why Use React? 
 
* Simple and easy to learn
* it is fast, simple, and scalable
* it uses a component-based approach
* no need for direct DOM Manipulation 
* Increases App Performance

### 🥺 Limitations Of React 

everything has some limitations and React is not an exception! 
* it is very rapidly evolving which might get difficult for some developers to keep up.
*  Inline HTML and JSX confuses a lot of people.
* Size of the Library is quite large.


[Follow Me On Twitter](https://twitter.com/justansub)