teleren/devto huggingface dataset:
1 Free Server Management Slot in ServerAvatar for Free, Forever!
Published: 2022-06-16 12:53:05

## What is ServerAvatar?
ServerAvatar is a web app that allows you to automatically set up, manage and monitor your servers across all your cloud platforms.

- Automatic 5-minutes Hassle-free Set up (LAMP, LEMP, OLS).
- 5 Auto-installers including WordPress and Mautic.
- FREE Digitalocean, Vultr and AWS Lightsail Integrations.
- FREE Dropbox, Wasabi, Google Drive and AWS S3 Integrations.
- One-Click Let's Encrypt SSL Certificates.
- Powerful File Manager on Web!
- Automatic Site Migration and Cloning
- One-Click Staging Area

**Manage all your cloud servers from a single dashboard!**

## Features
###1. Quick Setup
Install LAMP/LEMP/OLS stack in 5 minutes!

###2. Multiple Sites
Feel Free to Host Multiple sites on a single server.

###3. Live Resource Usage Info
See Live Data from Server on the Server panel.

###4. PHP-CLI Versions
Update PHP-CLI version anytime you want!

###5. Manage Services
Monitor, Start, Stop or Restart services on the go.

###6. Manage Users
Manage Access and Settings for each user on the server.

###7. Log Viewer
Search and Filter in various server level log files.

###8. Manage Cronjobs
Create/Manage Cronjobs on the server with ease.

###9. Manage Databases
Manage MySQL Databases and Database users.

###10. Migrate Sites
Hassle-free migration between two servers.

###11. Disk Cleaning
Remove unwanted files from server in one-click.

###12. Server Alerts
Manage Alerts for 6 different metrics from monitor.

[More Features](https://serveravatar.com/features)

[Participate in 1 Free Server, Forever! Giveaway](https://bit.ly/3aSAafp)
The big secret of React
Tags: javascript, react, webdev, webperf
Published: 2022-06-16 12:50:49

---
title: The big secret of React
published: true
description: What is behind the deps array used by the hooks?
tags: 'javascript, react, webdev, webperf'
cover_image: 'https://raw.githubusercontent.com/cloudx-labs/posts/main/posts/navarroaxel/assets/the-secret-of-react.jpg'
id: 741290
---

Have you thought about how React compares the `deps` array used by the hooks in every render? Let's check the magic that decides when to run the `useEffect` hook.

## Introduction

As a curious developer, I was wondering how React checks the dependencies array -called `deps`- that is passed to the `useEffect`, `useCallback` and `useMemo` hooks. I didn't find the answer anywhere.

```javascript
useEffect(() => {
  console.log('someValue has changed:', someValue);
}, [someValue]);
```

So, my only option was to check the React's code itself to find the magic, and I found more than I expected.

## The comparison

React doesn't use `==` or `===` operators, it uses the [`Object.is()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) method. This method provides the [`SameValue` algorithm](https://262.ecma-international.org/5.1/#sec-9.12) since ES2015.

We all know the difference between Abstract Equality Comparison (`==`) and Strict Equality Comparison (`===`), but what comes with this new comparison?

💡 You can quickly check the differences between these equality algorithms in [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#a_model_for_understanding_equality_comparisons).

We can affirm that the differences between `===` and `Object.is` are:

1. `+0`, `-0` and `0` result in the same value for `===`, but different for `Object.is`. «And that's a point to `is` for being mathematically correct.» ✅
2. `NaN === NaN` is `false` for `===` 😒, but `true` for the SameValue algorithm. «Another point to `Object.is`.»

I think now it's clearer why React choses a little-known comparison method.

## Show me the code

If you're a developer, I guess you want to see where is the code for `Object.is` 😁. The answer is in a function called `areHookInputsEqual` in the `ReactFiberHooks.new.js` file: <https://github.com/facebook/react/blob/v18.1.0/packages/react-reconciler/src/ReactFiberHooks.new.js#L323>.

💡 I used the latest tag because the code changes continuously.

It's cool to see how this check is completely ignored if you're in a hot reload process, and how the checks for the programmer are removed in the `production` build of React.

## Conclusion

IMO the most important issue here is that React doesn't make a deep comparison between objects, it only checks if they're the same object.

💡 If you don't know what this means check this Redux page about [the benefits of immutability](https://redux.js.org/faq/immutable-data#what-are-the-benefits-of-immutability).

🧠 Remember that an object variable is just a memory reference (pointer) to where the object is, that's what `===` and `Object.is` use when you compare two objects.

I hope you enjoyed this dive into the React's source code. 🤿
Invert Binary Tree - JS
Published: 2022-06-16 12:49:54

```javascript
/**
 * Definition for a binary tree node.
 * function TreeNode(val, left, right) {
 *     this.val = (val===undefined ? 0 : val)
 *     this.left = (left===undefined ? null : left)
 *     this.right = (right===undefined ? null : right)
 * }
 */
/**
 * @param {TreeNode} root
 * @return {TreeNode}
 */
// DFS
function invertTree(root) {
    if (root === null) return root
  var temp = root.left;
  root.left = root.right;
  root.right = temp;
  invertTree(root.left);
  invertTree(root.right);
  return root;
}

```
Image Smoother
Tags: leetcode, dsa, theabbie
Published: 2022-06-16 12:31:31

An **image smoother** is a filter of the size `3 x 3` that can be applied to each cell of an image by rounding down the average of the cell and the eight surrounding cells (i.e., the average of the nine cells in the blue smoother). If one or more of the surrounding cells of a cell is not present, we do not consider it in the average (i.e., the average of the four cells in the red smoother).

![](https://assets.leetcode.com/uploads/2021/05/03/smoother-grid.jpg)

Given an `m x n` integer matrix `img` representing the grayscale of an image, return _the image after applying the smoother on each cell of it_.

**Example 1:**

![](https://assets.leetcode.com/uploads/2021/05/03/smooth-grid.jpg)

**Input:** img = \[\[1,1,1\],\[1,0,1\],\[1,1,1\]\]
**Output:** \[\[0,0,0\],\[0,0,0\],\[0,0,0\]\]
**Explanation:**
For the points (0,0), (0,2), (2,0), (2,2): floor(3/4) = floor(0.75) = 0
For the points (0,1), (1,0), (1,2), (2,1): floor(5/6) = floor(0.83333333) = 0
For the point (1,1): floor(8/9) = floor(0.88888889) = 0

**Example 2:**

![](https://assets.leetcode.com/uploads/2021/05/03/smooth2-grid.jpg)

**Input:** img = \[\[100,200,100\],\[200,50,200\],\[100,200,100\]\]
**Output:** \[\[137,141,137\],\[141,138,141\],\[137,141,137\]\]
**Explanation:**
For the points (0,0), (0,2), (2,0), (2,2): floor((100+200+200+50)/4) = floor(137.5) = 137
For the points (0,1), (1,0), (1,2), (2,1): floor((200+200+50+200+100+100)/6) = floor(141.666667) = 141
For the point (1,1): floor((50+200+200+200+200+100+100+100+100)/9) = floor(138.888889) = 138

**Constraints:**

*   `m == img.length`
*   `n == img[i].length`
*   `1 <= m, n <= 200`
*   `0 <= img[i][j] <= 255`

**SOLUTION:**

    class Solution:
        def getNeighbors(self, row, col, m, n):
            neighbors = []
            for i in range(row - 1, row + 2):
                for j in range(col - 1, col + 2):
                    if i == row and j == col:
                        continue
                    if i < 0 or i >= m:
                        continue
                    if j < 0 or j >= n:
                        continue
                    neighbors.append((i, j))
            return neighbors
        
        def imageSmoother(self, img: List[List[int]]) -> List[List[int]]:
            imgcp = [row[:] for row in img]
            m = len(img)
            n = len(img[0])
            for i in range(m):
                for j in range(n):
                    nb = self.getNeighbors(i, j, m, n)
                    total = sum([imgcp[a][b] for a, b in nb]) + imgcp[i][j]
                    num = len(nb) + 1
                    img[i][j] = int(total/num)
            return img
Add a playbook to your contextual sidebar in a Workspace
Tags: servicenow, uibuilder, workspace
Published: 2022-06-16 12:17:21

If you want to add your playbook to your contextual sidebar on a workspace, the following steps should help you achieve that. I always create my configurable workspaces via AppEngine Studio, which makes my life much easier. :)

1. Open your Workspace in UI Builder and go to your record page 
2. In the content tree click on the 'Contextual sidebar' component.
3. Click on the little plus sign '+ Add' to add a new tab, give tab a name and an icon.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76slq0md1yw2afxuddy6.png)
4. Add the playbook component to your tab page
5. Now we need to add two properties to your page configuration so we can use it in our playbook component. 
Click the edit button on the body page configuration
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d05sd0a110sst7pobwaq.png)
6. Add two properties called something like "parentTable" and "parentSysId"
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gux2cxsuq6dz34o9eopk.png)
7. Now you can add the gform data properties to those new page properties as data bindings
parentSysId --> @data.gform.nowRecordFormBlob.sysId
parentTable --> @data.gform.nowRecordFormBlob.table
8. Last step is to bind those page properties to our playbook component
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kkrpf5y8tw4q8r2u5hkm.png)
International Shipping Delivery From USA To Australia
Tags: shipping, australia, usa, worldwide
Published: 2022-06-16 12:11:09

<p align="justify">At present, the majority of the people worldwide depend on international shipping and delivery companies. They want their goods and belongings to be transported on time and safely. This is how the role of international shipping companies comes into the picture. Like, we are going to talk about what to do when you want to do international shipping or Delivery from the USA to Australia. It is important to take care of many factors.</p>
<p align="justify">If you are an eCommerce business owner, expanding your exports globally is one of the best ways to scale. The Australian market has a lot to offer for businesses regardless of the size and type. The economy of the country ranks the 13<sup>th</sup> largest in the world. By shipping to Australia, you can also get a chance to break into other global markets. Now, what you should consider while choosing <a title="Express Shipping to Australia" href="https://ship2anywhere.com/" target="_blank">Express Shipping to Australia</a> from the USA or any other form of shipping.</p>
<p align="justify">You will need to comprehend different kinds of shipping methods and their delivery times. This is how you can choose the best shipping method to ship your product to Australia from the USA. Custom guidelines are another thing you should not miss.</p>
<p align="justify"><strong>What is the cost of shipping to Australia?</strong></p>
<p align="justify">It depends on various forms of taxes. Make sure you are familiar with Australian customs laws. The cost of shipping is divided into the cost of importing products to Australia. These are:</p>
<ul>
<li>The cost of freight</li>
<li>Value of Goods</li>
<li>Import VAT or GST</li>
<li>Import Duty and Tariffs</li>
</ul>
<p align="justify">The cost of insurance is also important to add, which may differ according to the type of product and the location where you want to deliver or ship. With the shipping insurance, you can also add assurance to your packages that they may remain delivered and intact. The rate of shipping insurance varies according to the services shipping companies offer.</p>
<p align="justify">The price of a product may change according to how Australian customs value it. When it comes to freight costs, these are expenses linked to transportation. Different freight options have different rates and reliability. Each method of shipping considers the price based on the weight and size of packages. Apart from that, some value-added taxes are applicable. These are some factors, which are important to keep in mind while selecting any form of shipping to Australia from the USA like you are going to choose <a title="Express Delivery Worldwide" href="https://ship2anywhere.com/" target="_blank">Express Delivery Worldwide</a>.</p>
<p align="justify">There is nothing to worry about the shipping at all if you have a reliable international shipping company in your hands like Ship2Anywhere. For Express Delivery USA, you can go with this company as they have affordable packages to choose from.</p>
Binary tree - js
Published: 2022-06-16 12:06:27

Depth First Values
```javascript

const depthFirstValues = (root) => {
    
    if (root === null) return [];

    const stack = [root];

    const result = [];

    while (stack.length > 0) {
        const current = stack.pop();

        result.push(current.val);

        if (current.right) stack.push(current.right);
        if (current.left) stack.push(current.left);

    }
    
    return result;

}


```
Screenshot with WEB Canvas, Blob, ZIP
Published: 2022-06-16 12:03:50

## 1. Screenshot HTML CANVAS element

Libraries like threejs, pixijs, p5js and others that implement web graphics draw something on HTML CANVAS (either WEBGL mode or not). 

There are 2 ways to take screenshots of the canvas

### 1-1. toDataURL() API

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

You may capture the canvas element with this function.

If you also want to download that element, make it `<a href>` tagged, download it like the examples here: https://stackoverflow.com/questions/10673122/how-to-save-canvas-as-an-image-with-canvas-todataurl


### 1-2. Blob API

If you're sending your screenshots to server or backend, then Blob would be better than simply capture via toDataURL() API.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob

## 2. Download Blob

If you captured the canvas element using Blob, you can save or download the file with FileSaver js library.

https://github.com/eligrey/FileSaver.js/

## 3. Download ZIP

If you want to capture multiple images and download a zip of those (on client side), JSZip library is very helpful.

https://github.com/Stuk/jszip

One minor issue I had was that there's no 'image' type in `generateAsync()` option. So I had to capture screenshots via Blob in previous steps, save them in JSZip instance, and download the zip. 

When I saved screenshots via `toDataURL()`, add those image into JSZip instance, download the zip, the images wouldn't open and showed error.  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6ay69ztjmzrszthxdrd.png)
Understanding Debounce by building an awesome search filter in NEXT JS
Published: 2022-06-16 12:01:37

Hello friends, today in this post we will understand one of the important concepts of Javascript Debounceby creating a search filter using NEXT JS. I have implemented a search filter for my blog posts on our CodeWithMarish website using debounce concept. Let's get started by understanding what Debounce means.

Debouncing is one of the best practices followed when we have a time-consuming function and we want to limit the number of execution. Since javascript is a single-threaded function if we run these heavy functions then it will slow down our app and negatively impact the application performance. So Debouncing will delay the function execution and executing only after a delay. Let's get started with the implementation.

You can see the live demo on our website homepage by searching for a post.

[CodeWithMarish | Become a FullStack Developer](https://codewithmarish.com/)

If you liked this please visit our website for reading this post
[Understanding Debounce by building an awesome search filter in NEXT JS](https://codewithmarish.com/post/understanding-debounce-buiding-search-filter-in-nextjs)

Also please don’t forget to subscribe to our youtube channel codewithmarish for all web development-related challenges.

[Code With Marish | Youtube](https://www.youtube.com/channel/UCkPYmdVz8aGRH6qCdKMRYpA)

Posted with ❤️ from somewhere on the Earth
Validate IP Address
Tags: leetcode, dsa, theabbie
Published: 2022-06-16 12:00:44

Given a string `queryIP`, return `"IPv4"` if IP is a valid IPv4 address, `"IPv6"` if IP is a valid IPv6 address or `"Neither"` if IP is not a correct IP of any type.

**A valid IPv4** address is an IP in the form `"x1.x2.x3.x4"` where `0 <= xi <= 255` and `xi` **cannot contain** leading zeros. For example, `"192.168.1.1"` and `"192.168.1.0"` are valid IPv4 addresses while `"192.168.01.1"`, `"192.168.1.00"`, and `"192.168@1.1"` are invalid IPv4 addresses.

**A valid IPv6** address is an IP in the form `"x1:x2:x3:x4:x5:x6:x7:x8"` where:

*   `1 <= xi.length <= 4`
*   `xi` is a **hexadecimal string** which may contain digits, lowercase English letter (`'a'` to `'f'`) and upper-case English letters (`'A'` to `'F'`).
*   Leading zeros are allowed in `xi`.

For example, "`2001:0db8:85a3:0000:0000:8a2e:0370:7334"` and "`2001:db8:85a3:0:0:8A2E:0370:7334"` are valid IPv6 addresses, while "`2001:0db8:85a3::8A2E:037j:7334"` and "`02001:0db8:85a3:0000:0000:8a2e:0370:7334"` are invalid IPv6 addresses.

**Example 1:**

**Input:** queryIP = "172.16.254.1"
**Output:** "IPv4"
**Explanation:** This is a valid IPv4 address, return "IPv4".

**Example 2:**

**Input:** queryIP = "2001:0db8:85a3:0:0:8A2E:0370:7334"
**Output:** "IPv6"
**Explanation:** This is a valid IPv6 address, return "IPv6".

**Example 3:**

**Input:** queryIP = "256.256.256.256"
**Output:** "Neither"
**Explanation:** This is neither a IPv4 address nor a IPv6 address.

**Constraints:**

*   `queryIP` consists only of English letters, digits and the characters `'.'` and `':'`.

**SOLUTION:**

    class Solution:
        def validIPAddress(self, queryIP: str) -> str:
            isv4 = True
            isv6 = True
            if "." in queryIP:
                isv6 = False
                queryIP = queryIP.split(".")
                if len(queryIP) != 4:
                    isv4 = False
            else:
                isv4 = False
            if ":" in queryIP:
                isv4 = False
                queryIP = queryIP.split(":")
                if len(queryIP) != 8:
                    isv6 = False
            else:
                isv6 = False
            if isv4:
                for x in queryIP:
                    if not x.isnumeric() or (len(x) > 1 and x[0] == "0") or not 0 <= int(x) < 256:
                        isv4 = False
                        break
            if isv6:
                for x in queryIP:
                    try:
                        int(x, 16)
                        if len(x) > 4:
                            raise
                    except:
                        isv6 = False
                        break
            if isv4:
                return "IPv4"
            if isv6:
                return "IPv6"
            return "Neither"
How to override prose class in Tailwind CSS?
Tags: tailwindcss, webdev, react, nextjs
Published: 2022-06-16 11:57:27


When it comes to styling articles, I love working with [@tailwindcss/typography](https://github.com/tailwindlabs/tailwindcss-typography) 
plugin. 🤩 By simply adding `.prose` to an HTML element it styles the inner HTML elements by itself. 

```html
<article class="prose">
  <h1>Title</h2>
  <p>Some text</p>

  <h2>Subtitle</h2>
  <p>Some text</p>

  <ul>
   <li>item 1</li>
   <li>item 2</li>
  </ul>
</article>
```

While working with MDX components it makes a bit challenging if you want to style inner components.

## The problem
For example you want style a `<Warning />` component inside an MDX article. You would create something like this.

```jsx
export default function Warning({ children }) {
  return (
    <section
      className="px-8 py-4 my-10 text-lg rounded bg-red-100 text-red-500"
    >
      {children}
    </section>
  );
}
```

The component will be added to the article in this manner.

```mdx
---
title: Very important article
---

Some text

<Warning>
  <p>Be careful!</p>
</Warning>
```

This will yield:

```html
<article class="prose">
  <p>Some text</p>

  <section className="px-8 py-4 my-10 text-lg rounded bg-red-100 text-red-500">
    <p>Be careful!</p>
  </section>;
</article>

```

Even though `.text-red-500` is applied on the warning section, the text will inherit the styles from the `.prose`. Yikes... 😬

## The solution
The solution is actually quite simple.

By adding `.not-prose` to the section element the `.prose` styles will be ignored.

```jsx
export default function Warning({ children }) {
  return (
    <section
      // Adding .not-prose here! 🏗
      className="not-prose px-8 py-4 my-10 text-lg rounded bg-red-100 text-red-500"
    >
      {children}
    </section>
  );
}
```
Create a NEWS App using Next JS and React Query
Published: 2022-06-16 11:56:29

Hello Friends, Today in this post we will learn how to create a news app using NEXT JS and a popular react package react-query. So we will use newsapi.org and the react-query package for fetching this data. By doing this project you will learn about API fetching in NEXT JS and some basic usage of react-query package. Also, we have implemented pagination while fetching API. So let's get started.

React Query provides state management for the synchronous data. It provides features such as caching, background fetching, etc. It also helps us in configuring the number of unsuccessful retries in fetching API. You can refer react-query documentation for more information.

Please visit this post in our website. 
[Create a NEWS App using Next JS and React Query](https://codewithmarish.com/post/create-a-news-app-using-nextjs-and-react-query)

Also please don’t forget to subscribe to our youtube channel codewithmarish for all web development-related challenges.

[Code With Marish | Youtube](https://www.youtube.com/channel/UCkPYmdVz8aGRH6qCdKMRYpA)

Posted with ❤️ from somewhere on the Earth
Summon The JSON status update
Tags: webdev, javascript, beginners, programming
Published: 2022-06-16 11:56:29

As you may know for almost over two years I am working on a project called Summon The JSON. The project main goal is to create flashcards for programmers.

It started as a fun way to memorize Javascript. I have found a manufacturer that can handle printing flashcards in small quantities. I have also acquired fantasy illustrations to spice up things.

Than I have started the process of designing 65 cards that combine Javascript functions with fantasy creature.

I thought also it would be nice to be able to play the game like Stoneheart or Magic The Gathering. So I have added a game mode that can be played by up to four people with one deck.

I was considering at a time to start a Kickstarter or sell on Amazon. But both require too much time to set everything up. So I have created my own [store](https://summonthejson.com/).

Got first orders and amazing response from programming community. The community gave me also ideas for approximately thirty other decks they’d love to buy.

Up to this point I managed to create nine decks. For Javascript, Python, React, PHP, Java, C#, HTML, Typescript and C++.

Soon a deck for Git will also be released. A SQL deck is also on it’s way soon to be announced. Approximately I am able to release one deck per month because I do it after hours of my day job.

Now it is the time, when I want to go next level with the project. By the end of the year I want to sell six decks per day. That is 2190 decks per year.

It does not seem to be much. But when I meet that goal, I will be able to focus full time on this project and many, many ideas I want to realize to provide the community with fun ways to interact with programming and technology.

I have always relied on the community, and the community made it possible to go so far. So now, in the face of the new, exciting and ambitious goal I also turn myself to you.

If you find the project idea interesting, spread the word. I never thought I’ll go so far, and now I believe the dream may come true!