JSK Weekly - September 14, 2022

The Last Component Library You'll Ever Need: an Intro to Material UI

There is a running joke within the JavaScript community about how a new framework is released every month. Well, there should be one for how a new React component library is released every month. The number of options out there is too big and picking one is not trivial.

Authored by: Bit

Be the Master of Your Very Own Fake JSON API (Or Learn Kung-Fu!🙃)

Today, we're going to learn (hit) a new scary concept called API, aka 'Application Programming Interface' and stop assuming that it is difficult. To be honest, when I first started to learn programming, this acronym became my nightmare. It was like the devil was making fun of me.

Authored by: Phoenix

JavaScript DOM Tutorial - How to Build a Calculator App in JS

You're going to spend a lot of time working on webpages when using JavaScript. In fact, while you're using JavaScript, the webpage is where all the exciting and important stuff takes place. A webpage is one big document for a JavaScript developer since every element on the page is

Authored by: Spruce.js

Fuzzing JavaScript for DoS and uncaught exceptions using open-source fuzzer Jazzer.js (live stream)

In this live session, we will give an introduction to JavaScript fuzzing using our freshly open-sourced nodejs fuzzer Jazzer.js. Norbert, one of the maintainers, will walk you through how Jazzer.js makes it easy for every developer to set up their own JS fuzz tests and to uncover bugs and security issues.

Today at 4 PM (CEST).

Authored by: MsFrankieB

JavaScript Geolocation API Tutorial - How to Get a User's Location in JS

Some applications require you to know your user's location, like food delivery or eCommerce apps. So you'll need an efficient way to get this info. The Geolocation API, which we will look at today, is a simple solution. You can use it to determine your users' location, local currency, language,

Authored by: Mitolu

What is JavaScript? 5 Basic Features that define this Amazing Language

Yesterday I was speaking with another developer about programming languages. I told him that my company uses JavaScript for the entire tech stack. He said that he uses 4-5 different technologies in his personal project because each language and technology has a function.

Authored by: Jesús Lagares

What is JavaScript Spread Operator?

Recently I started a new job as a Backend Developer in a company. For this reason, I'm learning a lot these days about JavaScript. I want to be a master of this language and I am going from the basics to the deepest part of the language to become a great JavaScript developer.

Authored by: Jesús Lagares

2 JavaScript Projects "You" Can Easily Do

The first one is very easy to make. So, the project is that you can take a color as an input and change the background color, in this case, the body tag. The input is taken by the color picker made...

Authored by: JavaScript In Plain English

Custom Implementation of JavaScript Methods

Hi guys, today I am going to show you how to write the custom implementation for the shallow and deep copy with the use of the custom typeof operator. Let's get started. First, we need to know what are Shallow and Deep comparisons.

Authored by: Vivek Dogra

How the JavaScript DOM Works - A Practical Tutorial

If you were listening to music on an app and you wanted to pause or skip a song, you'd have to do that through the app. This process is similar to how the Document Object Model or DOM works. Here, the music app represents the DOM because it serves as

Authored by: Queen of Code

Merge two arrays without duplicates in TypeScript

In this tutorial, we are going to learn about how to merge two arrays without duplicates in TypeScript. To combine the two arrays without any duplicates, first we need to combine the arrays using the es6 spread(...) operator then pass it to the new Set() constructor to remove the duplicates.

Authored by: Sai gowtham

How to Use TypeScript in HTML

JavaScript is the most common language programmers can use on both the front-end and back-end. However, it's unclear what type the data is in plain JavaScript, as functions, parameters, and variables have no type. This makes it difficult to read and maintain projects.

Authored by: JavaScript In Plain English

useTransition and useDeferredValue in React 18

useTransition and useDeferredValue are two new hooks React introduced with React 18 earlier this year. These two hooks make use of React’s concurrent rendering to allow developers to provide a better user experience in their applications. In this article, we will be taking a good look at these two hooks.

Authored by: Bit

How To Build Future-proof React Apps Without Writing Complex Code

Writing great code doesn't have to be complex. These simple tips will help you build React apps that are very easy to test, update, and super flexible. Unfortunately, we often build apps without thinking about how they will evolve to future changes.

Authored by: JavaScript In Plain English

Understanding React’s useEffect and useState Hooks

React first introduced Hooks in version 16.8, and they have changed the way we write React code ever since. Hooks enable you to extract stateful logic from a functional component, allowing it to be reused and tested independently.

Authored by: Syncfusion

How to Validate Dynamic Routes in React Router

To illustrate the problem let's take for example users' profiles. I would define dynamic routes with a param users/:userId and would render the profile component and inside of the component I would get the userId from useParams and inside of useEffect I would make a fetch request to get the user info.

Authored by: JavaScript In Plain English

How to Use Web Components with React

Every React developer knows what JSX is and the benefits it provides. However, while it is a very spread piece of tech, it's not the standard chosen by the web. When it comes to creating custom components, Web Components are the standard that all browsers are adopting and that you, as a front-end developer, should start looking into (if you haven't already).

Authored by: Bit

Why Create React App is Outdated in 2022

Create React App is what almost every developer (including myself) learned to use first when learning the JavaScript library React and I think this has led to a couple of significant flaws.

Authored by: Collin Pfeifer

How to Use Web Components with React

Every React developer knows what JSX is and the benefits it provides. However, while it is a very spread piece of tech, it's not the standard chosen by the web. When it comes to creating custom components, Web Components are the standard that all browsers are adopting and that you, as a front-end developer, should start looking into (if you haven't already).

Authored by: Bit

Drag and Drop from Scratch with React

Drag and drop is one of the mysteries of the internet. We all used them once in our developer life but we actually never thought about how it works. Well, today, it's going to change! This article is purely informative.

Authored by: Rémy Villulles

Aurelia 2 vs Svelte - The battle of two front-end underdogs - I Like Kill Nerds

In this video, I compare some basics like reactivity, component creation and events in Aurelia 2 and Svelte. You'll notice some similarities between the two but a few differences in the approach to bindables and component creation.

Authored by: Dwayne Charrington

Zip a Folder with Node.js

Node.js (and FS in particular) doesn't ship with features to Zip/Unzip files. That means that we have to go with libraries. There are tons of them online but one, in particular, got my attention because of how easy it is to use: JSZip JSZip works with a system of instances.

Authored by: Rémy Villulles

Process Management in Node.js with PM2

Node.js is pretty good at handling I/O operations but when it comes to CPU-intensive tasks, it falls apart. You can easily stall the application by running a heavy operation and since Node.js is single-threaded, it's going to block further requests.

Authored by: ding