JSK Weekly - April 7, 2021

It's been a popular week for React, so if you're a React fan, bookmark this edition! Plenty of How to's from "How to Write Cleaner React Code" and " How to Create Time Sliders in React Native" to React Bootcamp's "How to Read React Errors (fix 'Cannot read property of undefined'!)"

Another favourite not to miss this week is Chameera Dulanga's "Using GPU to Improve JavaScript Performance" on Bits and Pieces.


Using Python for Frontend

For almost three decades, JavaScript has been the de facto language for front-end development. For the back-end, countless other languages have been created, popularized, and then left to rot in the corner of the forgotten languages. But JavaScript not only has remained as the first, second, and third front-end language, it has evolved to provide the required features for the modern web.

Authored by: Bit


Using GPU to Improve JavaScript Performance

As developers, we always seek opportunities to improve application performance. When it comes to web applications, we mainly make these improvements in code. This article will introduce you to a...

Authored by: Bit

How to Add or Remove Element Class Name using JavaScript

In this tutorial, we are going to learn about how to add or remove a class name to an html element by using JavaScript. Consider we have a div element with an id, and two button elements.

Authored by: Sai gowtham

3 Ways to Merge Arrays in JavaScript

An array is a data structure representing an ordered collection of indexed items. A common operation performed on multiple arrays is merge - when 2 or more arrays are merged to form a bigger array containing all the items of the merged arrays.

Authored by: Dmitri Pavlutin

Vanilla JavaScript Code Snippets

A guide to vanilla JavaScript code snippets - with resources and lightweight libraries to help you solve a problem without a large overhead or third-party dependencies.

Authored by: Smashing Magazine


Let's build a search bar using React Hooks

February 22, 2021 A few years ago I wrote an article called Let's build a search bar in React where I showed readers (you guessed it!) how to build a search bar in React. When I wrote that article, React Hooks didn't exist so it is written using class components.

Authored by: Tim Smith

React App Performance Optimization: The Definitive Guide

Additionally, you can visualize component lifecycles and compare them to one another. Since this feature depends on the User Timing API, it only works in Chrome, Edge and Internet Explorer. Now that we know the tools and root cause of glitching performance in React, let's understand how to optimize react app performance.

Authored by: Ayush Verma

An Overview of React Query

Any piece of data that is fetched from the server can be termed as server state. For example publications you are subscribed to, stories you have clapped for, stories that you have written are all server state. An example of client state can be the user's theme preference (light or dark).

Authored by: Abhishek Kumar

Build a Collapsible Menu in React with Intersection Observer

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. - developer.mozilla.org For our design, IntersectionObserver can be a good fit because it can provide information about menu items that are overflowing the container (i.e.

Authored by: Shubham Khatri

How to Read React Errors (fix 'Cannot read property of undefined'!)

Got an error like this in your React component? Cannot read property `map` of undefined In this post we'll talk about how to fix this one specifically, and along the way you'll learn how to approach fixing errors in general.

Authored by: Dave Ceddia

How to Write Cleaner React Code

As React developers, we all want to write cleaner code that is simpler and easier to read. In this guide, I've put together seven of the top ways that you can start writing cleaner React code today to make building React projects and reviewing your code much easier. In general,

Authored by: React Bootcamp

How to Create Time Sliders in React Native

From my recent code-read, recently I have learned how to create custom time sliders. All credit goes to my colleague. I am just sharing my learning! Let us first see what do we want to make. We want to convert a slider into time sliders where users can pick a single time or a time range.

Authored by: Saad Khan


Top-level await is available in Node.js modules

This post is part of my Today I learned series in which I share all my learnings regarding web development. Node.js is a beautiful tool to write quick utility scripts. I use it in many of my build processes. Renaming files, downloading data, image processing - Node.js scripts handle many tasks in my projects.

Authored by: stefan judis

Libraries and Tools

5 Useful Tools and Libraries for Testing VueJS Applications

Over the past few years, VueJS has become one of the most popular web application frameworks. That is no surprise given how flexible, easy to use, and productive it is. But none of these would matter if you haven't tested your application correctly. Software testing refines the whole process and ensures superior quality to the product.

Authored by: Bit


Testing React Apps that use React Router

So your React app, like a lot of modern apps, uses React Router to get users from one page to another. And you, like any thorough tester, want to account for React Router in your testing. This post will help you learn about the syntax to get you started testing React Router with your app.

Authored by: Bonnie Schulkin

A web testing deep dive: The MDN web testing report - Mozilla Hacks - the Web developer blog

For the last couple of years, we've run the MDN Web Developer Needs Assessment (DNA) Report, which aims to highlight the key issues faced by developers building web sites and applications. This has proved to be an invaluable source of data for browser vendors and other organizations to prioritize improvements to the web platform.

Authored by: Mozilla Hacks

Functional Programming

JavaScript Map - How to Use the JS .map() Function (Array Method)

Sometimes you may need to take an array and apply some procedure to its elements so that you get a new array with modified elements. Instead of manually iterating over the array using a loop, you can simply use the built-in Array.map() method. The Array.map() method allows you

Authored by: NathanSebhastian