JSK Weekly - August 03, 2022

Hello August! We could all do with a good list of libraries, can't we? Well Nipuni Arunodi has given an easy to consume "Top 10 Angular Component Libraries for 2022" on Syncfusion.

Other popular stories include Angela Wong's "5 VS Code Extensions Every JavaScript Developer Needs in 2022", Bytefer's "Use TypeScript Mapped Types Like a Pro" and Fernando Doglio's "Web Components are Dead: Long Live Web Components" on Bits and Pieces.


Web Components are Dead: Long Live Web Components

Until recently I thought Web Components were a failed attempt by the industry to develop a new technology that had failed years ago. I've been working on web-related projects for almost 20 years now, in different roles, companies and with different technologies, and I remember reading about them years ago, and then nothing.

Authored by: Bit


11 Powerful JavaScript One-Liners Worth Knowing

Getting the count of characters is a useful utility in many cases, we can use it to get the number of spaces followed by words, or this can be used to get the count of a certain delimiter in a...

Authored by: Bit

How to Inspect Websites on Mobile Devices with Chrome DevTools

I was recently designing a website and testing it on my mobile device. I wanted to inspect an element but there is no way to do that, Yes, of course, there are few applications in the market who provided services to inspect your website on various mobile and different browsers, but yeah it is obvious we have to pay for this services to use.

Authored by: Bit

How To Implement Concurrency Control in JavaScript?

In daily development, you may encounter scenarios of concurrency control, such as controlling the number of concurrent requests. So how to implement concurrency control in JavaScript? Before answering this question, let's briefly introduce concurrency control.

Authored by: JavaScript In Plain English

Sort Alphabetically in JavaScript - How to Order by Name in JS

Sometimes you might have an array of words where you want to sort each word alphabetically (from a-z). Or you might have an array of objects containing user information including names, for example, where you want to sort the users by their names. We can do this in JavaScript by

Authored by: Joel πŸ¦Έβ€β™€οΈ

Learn Game Development with JavaScript

JavaScript can be used to develop a bunch of different types of games. And games created with JavaScript can run on almost any device with a web browser. We just published a 10-hour JavaScript game development course on the freeCodeCamp.org YouTube channel. You will learn to make 2D games with

Authored by: Beau Carnes

Implement Concurrent Download of Large Files in JavaScript

You may already know the solution for uploading large files. When uploading large files, in order to improve the efficiency of uploading, we generally use the Blob.slice method to slice the large file into chunks, and notify the server to merge the chunks after all the chunks are uploaded successfully.

Authored by: Bit

5 VS Code Extensions Every JavaScript Developer Needs in 2022

VS Code is probably the best and most popular code editor in recent years. This editor developed by Microsoft is open-source and received 13k stars on GitHub! The reason why it is so popular is due...

Authored by: JavaScript In Plain English


TypeScript: React useState Hook

When using React's useState Hook in TypeScript, the method usually infers the implicit type for the returned state from the provided argument automatically. In the following example, React's useState Hook in a function component knows that it deals with a number type.

Authored by: Robin Wieruch

Using TypeScript Mapped Types Like a Pro

Have you used the Partial, Required, Readonly, and Pick utility types? Do you know how they work internally? If you want to master them thoroughly and create your own utility types, don't miss the content covered in this article. User registration is a widespread scenario in daily work.

Authored by: JavaScript In Plain English

TypeScript: checking at compile time if an Array lists all property keys

Consider the following TypeScript code: personKeys lists the property keys of Person. Can we check at compile time if this list is correct? import {assert as tsafeAssert, Equals} from 'tsafe'; tsafeAssert >(); Library tsafe enables us to check if two types are equal.

Authored by: Axel Rauschmayer


Architecting React Apps Like it's 2030

There is one problem that every React Developer falls into during his journey. This is how to structure a good app architecture. This article will help you avoid some common errors that most of us make architecting react applications, and will give you the right way to structure your directories.

Authored by: Renato Pozzi | Building In Public πŸ‘‹

Everything You Should Know About Effects in React

This is not a tutorial about how React effects work under the hood. The primary purpose of this paper is to describe best practices, tips, and tricks concisely. If you need detailed information on how React Effects/Hooks work under the hood, you may find the following links useful: You maybe already seen discussions about whether React follows Reactive Programming principles or not.

Authored by: Balov Bohdan πŸ‡ΊπŸ‡¦

State Management with Context API & Custom MultiSelect Hook in React

Create a custom multi-select hook Create a Context and use the multi-select hook inside it Create a demo to test state management using React hooks and context API The name of the custom hook is useSelection We initially declare a useState for our selection. Inside this hook we have three functions : addSelection, addMultipleSelection, and clearSelection.

Authored by: JavaScript In Plain English


How I Wrote a Lightning-Fast Image Server in Node.js

Some time ago I received a great assignment from a client I had worked with before, they had a requirement for an image server for their high-traffic newspaper website and mobile applications. The service needed to crop, resize and recompress JPGs, PNGs and GIFs in real-time and on-demand.

Authored by: Bit

Return the Sum of All Node Depths in a Binary Tree

Is everyone ready for more recursive, binary tree fun? Today's problem is AlgoExpert's "Node Depths". As previously mentioned, I really enjoy any opportunity to use recursion to traverse binary trees. It's clean and simple and the two seem like they were almost made for each other.

Authored by: JavaScript In Plain English

How to Schedule and Run Recurring Cron Jobs in Node.js

It's a common requirement in programming to have to set something up to run at certain intervals. For example, you might want to process a database every 30 minutes, or you might want to send an email once a week. The way we typically do this is with cron jobs.

Authored by: JavaScript Kicks

Node.js: creating ESM-based shell scripts for Unix and Windows

In this blog post, we learn how to implement shell scripts via Node.js ESM modules. There are two common ways of doing so: We can write a stand-alone script and install it ourselves. We can put our script in an npm package and use a package manager to install it.

Authored by: Axel Rauschmayer

Libraries and Tools

Top 10 Angular Component Libraries for 2022

Angular is a component-based, front-end development framework. As a result, there are many component libraries specialized for Angular. As developers, it is essential to be aware of them to choose the best one for our Angular projects.

Authored by: Syncfusion

3 Tools to Document Your React Components Like a Pro

Chances are, if you're a developer you hate documenting your code. I'm not talking about the classic //This function saves the user to the database comment on top of the saveUser function. Instead, I'm talking about writing useful, lengthy and detailed documentation about your work.

Authored by: Bit

7 Useful React Libraries You Should Use in Your Next Project

Use these React libraries to speed up your development.

Authored by: JavaScript Kicks