teleren/devto huggingface dataset:
A great component library to boost your performance and speed: Chakra UI
Tags: javascript, react, webdev, devjournal
Published: 2022-06-17 13:05:22

When I started learning ReactJS it was quite complicated. The official documentation was explaining stuff with class components while I was learning React with functional components. While struggling with creating basically anything I looked up for premade components that I could use. That way I could read and inspect an existing code and also learn from that.

## Chakra UI was a lifesaver

While searching online, and visiting an impressive amount of websites, I found Chakra UI. It was a mindblowing experience. It was simple, easy to use and most importantly easy to understand what was going on. It's modularity helped me understand React even more! I immediately copied a few components and tweaked it on my own [website](https://cins-react-webshop.netlify.app/). The more I used it, the more I liked using it. This library helped me a lot and I want to share it with everyone out there hoping it will be helpful and useful for you too ;-)

## How to use it?

Let's dive in right now and start using modular components to build your own great website! First, go to [this](https://chakra-ui.com/guides/first-steps) website and follow the correct guide based on your own framework. After correctly installing it, it's time to use the beautiful components. Go to [this](https://chakra-ui.com/docs/components/overview) page and grab whatever you need and start creating and building awesome webpages with React using Chakra UI components!

Good luck and have fun :P
GetBlock to Attend Nervos' BlockJam 2022 Hackathon and Conference
Tags: hackathon, digitalevent, blockchain, web3
Published: 2022-06-17 13:04:42

Top-ranked on-chain gaming heavyweights and promising early-stage teams are coming to Nervos’ BlockJam to discuss latest trends of GameFi and share their vision on Web3 prospects. 
GetBlock joins BlockJam conference and hackathon for game developers

According to the official statement shared by the representatives of the GetBlock team, it is exciting to join BlockJam, a GameFi and Play-to-Earn hackathon organized by Nervos Network ecosystem.

BlockJam, an online forum and hackathon, kicks off on June 17, 2022. Its main purpose is to educate and excite traditional game developers about the opportunities blockchains can unlock for their products.

During the GameJam hackathon, leading blockchain-focused game developers will demonstrate their skills to peers, enthusiasts and crypto experts. The $50,000 prize pool will be distributed between the winners of various GameFi and Play-to-Earn tracks.

BlockJam’s participants will be able to create amazing new user experiences with blockchain tools and pioneer exciting on-chain gaming tokenomic models.

GetBlock representatives will be attending talks and educational sessions with top-tier web and blockchain experts. Also, our very own Maria Key will demonstrate key benefits of deploying decentralized applications to GetBlock’s shared and dedicated nodes.
GetBlock provides high-performance nodes for GameFi and Play-to-Earn ecosystems

For GetBlock this event is one of the crucial marketing milestones of 2022 as GameFi and Play-to-Earn segments are in the spotlight of its adoption strategy. GetBlock supercharges with its APIs various on-chain gaming ecosystems on Ethereum, BNB Chain, and Polygon.

Also, [GetBlock](https://getblock.io/) rolled out shared and dedicated nodes for Nervos Network, and, most recently, its second-layer solution Godwoken. GetBlock is more than happy to fuel the next phase of the on-chain gaming revolution that is happening on Nervos right now.

For further information about Nervos’ BlockJam event, please, don’t hesitate to sign up on [https://globalblockjam.com/](https://globalblockjam.com/).
01 Matrix
Tags: leetcode, dsa, theabbie
Published: 2022-06-17 13:00:45

Given an `m x n` binary matrix `mat`, return _the distance of the nearest_ `0` _for each cell_.

The distance between two adjacent cells is `1`.

**Example 1:**

![](https://assets.leetcode.com/uploads/2021/04/24/01-1-grid.jpg)

**Input:** mat = \[\[0,0,0\],\[0,1,0\],\[0,0,0\]\]
**Output:** \[\[0,0,0\],\[0,1,0\],\[0,0,0\]\]

**Example 2:**

![](https://assets.leetcode.com/uploads/2021/04/24/01-2-grid.jpg)

**Input:** mat = \[\[0,0,0\],\[0,1,0\],\[1,1,1\]\]
**Output:** \[\[0,0,0\],\[0,1,0\],\[1,2,1\]\]

**Constraints:**

*   `m == mat.length`
*   `n == mat[i].length`
*   `1 <= m, n <= 104`
*   `1 <= m * n <= 104`
*   `mat[i][j]` is either `0` or `1`.
*   There is at least one `0` in `mat`.

**SOLUTION:**

    import heapq
    from collections import defaultdict
    
    class Solution:
        def updateMatrix(self, mat: List[List[int]]) -> List[List[int]]:
            dist = [[0 if cell == 0 else float('inf') for cell in row] for row in mat]
            heap = []
            deleted = defaultdict(int)
            m = len(mat)
            n = len(mat[0])
            for i in range(m):
                for j in range(n):
                    heapq.heappush(heap, (dist[i][j], i, j))
            while len(heap) > 0:
                currdist, i, j = heapq.heappop(heap)
                while (currdist, i, j) in deleted and len(heap) > 0:
                    deleted[(currdist, i, j)] -= 1
                    if deleted[(currdist, i, j)] == 0:
                        del deleted[(currdist, i, j)]
                    currdist, i, j = heapq.heappop(heap)
                adj = []
                if i > 0:
                    adj.append((i - 1, j))
                if i < m - 1:
                    adj.append((i + 1, j))
                if j > 0:
                    adj.append((i, j - 1))
                if j < n - 1:
                    adj.append((i, j + 1))
                for a, b in adj:
                    if dist[a][b] > 1 + currdist:
                        deleted[(dist[a][b], a, b)] += 1
                        dist[a][b] = 1 + currdist
                        heapq.heappush(heap, (1 + currdist, a, b))
            return dist
How to workaround RAM-leaking libraries like Puppeteer
Tags: puppeteer, leak
Published: 2022-06-17 12:50:28

Motivated by this issue https://github.com/puppeteer/puppeteer/issues/5893

Hope this can help you to workaround your RAM issues one time:
https://devforth.io/blog/how-to-workaround-ram-leaking-libraries-like-puppeteer-easily-universal-way-to-fix-ram-leaks-once-and-forever/
What is your morning routine?
Tags: productivity, programming, discuss, webdev
Published: 2022-06-17 12:48:57

Some people wake up at 4am, workout, meditate, eat, coffee repeat.

Some people wake up at 11am - roll onto a Teams call and then do their morning routine.

Mine? - 8AM Wake up, coffee, stretch & then jump on for my 9am meeting!

**So what is your daily morning routine?**
Testing Your Email Sending in .NET with Ethereal
Tags: dotnet, tutorial, beginners
Published: 2022-06-17 12:32:11

## Preparation

For the previous part, you may need to visit the post [here](https://dev.to/berviantoleo/email-testing-using-ethereal-inb).

Alright, let's get started from scratch. Firstly, I will generate my project. Secondly, I will give a simple example code to send emails using SMTP server. Lastly, I will add the repository link, and you can test the code.

**Note**: You will need to create the Ethereal Account first. If you want to create an account, please visit [here](https://ethereal.email/login).

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

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

Please make sure you have .NET SDK Installation. Don't have it yet? Download [here](https://dotnet.microsoft.com/en-us/download). Anyway, I use .NET 6.

### Create .NET Project
 
1. Generate the project using this command: `dotnet new console -o MailExample`.
2. I also generate `.gitignore` and `sln` files. Using these commands: `dotnet new gitignore` and `dotnet new sln`. After that connect sln file with the project file, using this command: `dotnet sln add .\MailExample\`.
3. Finally, try to build your project using `dotnet build`.

### Coding Time

1. Update `MailExample/Program.cs` file.

```csharp
using System.Net;
using System.Net.Mail;
using System.Net.Mime;
using System.Text;
using System.Text.Json;

var smtpClient = new SmtpClient("smtp.ethereal.email")
{
    Port = 587,
    Credentials = new NetworkCredential("<update your username here>", "<update your user here>"),
    EnableSsl = true,
};

var attachment = Attachment.CreateAttachmentFromString(JsonSerializer.Serialize(new
{
    Message = "Hello World!"
}), "helloworld.json", Encoding.UTF8, MediaTypeNames.Application.Json);

var message = new MailMessage("fromtest@test.com", "sendertest@test.com")
{
    Subject = "Test Email! Hello World!",
    Body = "<p>Test Email</p><b>Hello World!</b>",
    IsBodyHtml = true,
};

message.Attachments.Add(attachment);

try
{
    smtpClient.Send(message);
}
catch (SmtpException ex)
{
    Console.WriteLine(ex.ToString());
}
```

2. Run the project. Using this command: `dotnet run --project .\MailExample\`.

3. Check your account inbox (the Ethereal account, not your `To` inbox).

![Inbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47rxbtspxc8el0c8pz87.png)

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

{% github berviantoleo/dotnetemailexample %}

### Some Notes

* Anyway, I have little concern about privacy. So, if you have private projects, I don't recommend using this. I recommend using this if you have a public personal project or another project that it's okay if you disclose the information.
* For the alternative, you may use [Mailtrap](https://mailtrap.io/) or other email testing providers.

### Thank you

Thanks for reading.
 
![Thanks](https://media.giphy.com/media/3oEjHWXddcCOGZNmFO/giphy.gif)
Distribute Candies
Tags: leetcode, dsa, theabbie
Published: 2022-06-17 12:30:41

Alice has `n` candies, where the `ith` candy is of type `candyType[i]`. Alice noticed that she started to gain weight, so she visited a doctor.

The doctor advised Alice to only eat `n / 2` of the candies she has (`n` is always even). Alice likes her candies very much, and she wants to eat the maximum number of different types of candies while still following the doctor's advice.

Given the integer array `candyType` of length `n`, return _the **maximum** number of different types of candies she can eat if she only eats_ `n / 2` _of them_.

**Example 1:**

**Input:** candyType = \[1,1,2,2,3,3\]
**Output:** 3
**Explanation:** Alice can only eat 6 / 2 = 3 candies. Since there are only 3 types, she can eat one of each type.

**Example 2:**

**Input:** candyType = \[1,1,2,3\]
**Output:** 2
**Explanation:** Alice can only eat 4 / 2 = 2 candies. Whether she eats types \[1,2\], \[1,3\], or \[2,3\], she still can only eat 2 different types.

**Example 3:**

**Input:** candyType = \[6,6,6,6\]
**Output:** 1
**Explanation:** Alice can only eat 4 / 2 = 2 candies. Even though she can eat 2 candies, she only has 1 type.

**Constraints:**

*   `n == candyType.length`
*   `2 <= n <= 104`
*   `n` is even.
*   `-105 <= candyType[i] <= 105`

**SOLUTION:**

    class Solution:
        def distributeCandies(self, candyType: List[int]) -> int:
            return min(len(candyType) // 2, len(set(candyType)))
The power of useContext hook
Published: 2022-06-17 12:28:30

##Did you know that useContext can make your life easier?

For those who are not familiar with [useContext](https://reactjs.org/docs/context.html), this is one of the magic wonders of React. This hook allows to share data (state) in any component of our app without using props. Basically it will re-render the state with the new update that was implemented.

![Surprise reaction](https://i.gifer.com/5e1.gif)

###How did it made my life easier?

I created recently a website where my components need to pass state between them and update the rendering. As you can imagine, this isn't code efficient because it can get messy.

For this, I created a file where all my data was implemented and I could pass a value to the context that is used in all my components. This is done by giving a value to the context as it shows in the example below:

```html
import { createContext } from 'react';

const PizzaContext = createContext();

export function PizzaProvider({ children }){
    const [pizzas, setPizzas] = useState({
     pizza-ingredient-1: true
     pizza-ingredient-2: false
     pizza-ingredient-3: false
     pizza-ingredient-4: true
     pizza-ingredient-5: false
     ...
});

return (
        <PizzaContext.Provider value={{ pizzas }}>
            { children }
        </PizzaContext.Provider>
    )
}

export default PizzaContext;
```

Then, in my App.js file I passed the context so it can render the new state every time it is updated. 

```html
import { PizzaProvider } from './PizzaContext';

const App = () => {

  return (
    <>
      <Header />
      <PizzaProvider>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/base" element={<Base />}/>
          <Route path="/sauce" element={<Sauce />} />
          <Route path="/topping" element={<Topping />} />
          ...
        </Routes>
      </PizzaProvider>
      <Footer />
    </>
  );
}

export default App;
```

Thanks to this, the user will be able to update the state of every component and pass it to the following step with the item selected. 

This is one of the many implementations that useContext can help us achieve the desired goal. 

If you'd like to see the final result of the website, please be my guest and have a look [here](https://pizzaverse.netlify.app/).
Network Information API In JavaScript
Tags: javascript, webdev, programming, tutorial
Published: 2022-06-17 12:28:29

Hello everyone! I hope everyone has a fantastic day. Today i'm here to teach you the Network Information API.

It is still an experimental feature, which does not really work on some browsers very well for now, check out the [browser support](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API#browser_compatibility).

The Network Information API basically provides information about the system's connection, in terms of general connection type, like **cellular**, **wifi**, etc..

We can use this API to show users high quality of low quality content depending on their connection, for example a different image, or a different video.

You cannot really instantiate the NetworkInformation object, which contains all the info. So, how do we reach and use it? With the **navigator.connection** variable of course!

For example:

```javascript
const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection; // We can use prefixes here

console.log(conn.effectiveType); // This should log the type of your connection
```

We can also listen to events on the NetworkInformation object, events like connection changes, like the example below:

```javascript
const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
let connType = conn.effectiveType;

function logConnectionChange() {
  console.log(`The connection type before: ${connType}`);
  console.log(`The connection type now: ${conn.effectiveType}`);

  connType = conn.effectiveType;
}

conn.addEventListener("change", logConnectionChange);
```

We can also use it to preload videos or large amounts of information depending on the user's connection type, like the example below:

```javascript
let preloadVideo = true;
const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

if (conn) {
  switch(conn.effectiveType) {
    case "cellular":
      preloadVideo = false;
    case "bluetooth":
      preloadVideo = false;
    case "slow-2g":
      preloadVideo = false;
    case "slow-3g":
      preloadVideo = false;
  }
}
```

It is still an experimental feature but i really like it, because the ways we can use it are very flexible and immense. And this API will definetly help us use our resources in a better and more user friendly manner.

If you want to know more about the API, definetly check out the [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API) of it.

Thank you for reading the article! If you think there are any mistakes, don't forget to comment it so i can check it out, and i most definetly do!
Can Make Arithmetic Progression From Sequence
Tags: leetcode, dsa, theabbie
Published: 2022-06-17 12:00:44

A sequence of numbers is called an **arithmetic progression** if the difference between any two consecutive elements is the same.

Given an array of numbers `arr`, return `true` _if the array can be rearranged to form an **arithmetic progression**. Otherwise, return_ `false`.

**Example 1:**

**Input:** arr = \[3,5,1\]
**Output:** true
**Explanation:** We can reorder the elements as \[1,3,5\] or \[5,3,1\] with differences 2 and -2 respectively, between each consecutive elements.

**Example 2:**

**Input:** arr = \[1,2,4\]
**Output:** false
**Explanation:** There is no way to reorder the elements to obtain an arithmetic progression.

**Constraints:**

*   `2 <= arr.length <= 1000`
*   `-106 <= arr[i] <= 106`

**SOLUTION:**

    from collections import Counter
    
    class Solution:
        def canMakeArithmeticProgression(self, arr: List[int]) -> bool:
            n = len(arr)
            if n == 1:
                return True
            arr = Counter(arr)
            a = min(arr)
            b = max(arr)
            d = (b - a) // (n - 1)
            if d == 0 and len(arr) == 1:
                return True
            for i in range(n):
                if arr[a + i * d] != 1:
                    return False
            return True
Create a Web API backend in seconds - No coding required
Tags: webdev, angular, react, swift
Published: 2022-06-17 11:59:39

If you're an Angular, React, Vue, iPhone, or Android developer, you'll need a backend at some point. Unless you're one of those who knows PHP, Python, or C# to the core, this is obviously a problem for you, especially if you want to focus only on your frontend skills.

We solved the problem for you by allowing you to [create a Web API backend wrapping your database in seconds](https://aista.com?secret=devto), and we'll even _host your backend for free_, giving you the opportunity to test our system for 90 days. This allows you to generate a backend in some few seconds, not worrying about hosting it, such that you can focus only on the frontend parts of your problem. 3 clicks and you've got your backend, literally. Below are screenshots of the process.


![Generate a backend CRUD API in seconds](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1crnz7g048pgqxqa2qm.png)

Then as you've created your backend, you'll need a database. You can either connect to your existing database, or use one of our free and open source databases found in our plugins section. Below is a screenshot of installing the _"Chinook"_ SQLite database into your backend.

![Low-Code CRUD database API generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1sosk8w04uhdocdmamvp.png)

At this point all you need to do is to generate a CRUD API wrapping your database.


![Generating a CRUD API wrapping your database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sui0q7u8rt5w71symbvo.png)

And literally, _you are done_! Now you can play around with your newly generated CRUD API using the _"Endpoints"_ menu item.

![Invoking your newly generated CRUD endpoints](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1yf3g0bw4vmua9a7c0vc.png)

All in all the process takes about 1 minute before you've got your HTTP Web API, allowing you to focus on the Angular, React, Vue, iPhone, or Android development parts. Let me know in the comments what you think, and please have in mind that we released our hub yesterday and things are a little bit in the BETA stages yet. Below you can see me walking you through the entire process. If you want to try it out for yourself there's a link below where you can create your backend.

* [Create a CRUD backend in seconds](https://aista.com?secret=devto)

{% embed https://www.youtube.com/watch?v=ffWsG0_Hpuo %}
Remote API | Made with Next JS
Published: 2022-06-17 11:48:40

![Remote API | Made with Javascript | Next JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1654097984/large_remote_api_made_with_next_js_619e22b4cd.png "Remote API | Made with Javascript | Next JS")


### The Remote API empowers our customers and partners to easily consolidate and share global employee data across platforms.

> Offer global payroll, benefits, employer of record services in the entire world, directly from your own platform. Surface people and payroll data anywhere, process payments in almost any currency and allow anyone to work from anywhere without leaving your app
> 
> ### Remote API
> Whether you’re looking to offer new solutions to your customers or building a more seamless process for your own team, our powerful API empowers you to easily consolidate and share global employee data across platforms.
> 
> #### Grow Your Business
> Leverage Remote's API to enable global employment services directly within your platform and offer new solutions to your customers.
> 
> #### Drive Team Productivity
> Customize the API to fit your HR team’s needs, create bespoke reports, and build new workflows for more efficient internal processes.
> 
> #### Build Customer Loyalty
> Make your platform where customers engage most throughout the day by showing their people and payroll data pulled from our system.

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [Remote API on Twitter](https://twitter.com/withjavascript/status/1537762874684219392?s=20&t=eqvpUcGvzKiQ-l8JHcHNhw)
 |
| Medium | [Remote API on Medium](https://medium.com/@madewithjavascript/remote-api-made-with-next-js-9cd0d8b95d10)
 |
| Facebook | [Remote API on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid02Zne2si5qi8CSbysoau621VeAYe3vYbeb9MMbjZFr7mvz5LQk6UJ7yiEuFZvbcRjXl)
 |
| Tumblr | [Remote API on Tumblr](https://www.tumblr.com/blog/view/madewithjavascript/687306261702885376?source=share)
 |
| LinkedIn | [Remote API on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6943528767885639680)
 |
| Pinterest | [Remote API on Pinterest](https://pin.it/sKNEqj4)
 |


Filled Under:
 - [Made with Javascript](https://madewithjavascript.club)
 - [Made with Next JS](https://madewithjavascript.club/categories/next-js)

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!