JSK Weekly - January 05, 2022

A very happy and healthy New Year to all our readers! We hope 2022 will be prosperous for you all!

Some popular stories from this first week of 2022 are Dmitri Pavlutin's "A Smarter JavaScript Mapper: array.flatMap()", Seth Lutske's "How to Automate Performance Profiling in Node.js" and Fernando Doglio's "I Tried Uber’s React Web Components Library" on Bits and Pieces.


The Efficient Way to Create a MERN App

Whether you are a newbie or an expert in the programming space, you've probably wondered how others developers set up and configure their starting project application. This article tackles an...

Authored by: Bit

Create a Beautiful To-Do List App With Vuetify: Deleting Tasks

Welcome back to our ongoing tutorial series, in which we're going to build a great-looking to-do list app from start to finish using Vuetify and Vue JS. Last time we learned how to use FABs, dialogs, and form controls to give users the ability to create new tasks in the app.

Authored by: JavaScript In Plain English

How to Get Started As a Front-end Web Developer in 2022 (Complete Roadmap with Free Resources)

What started as a Medium publication by Quincy Larson is one of the go-to destinations for web developers today. And whatever you can think of, they pretty much have courses for that. If you want to walk fast, walk alone. But if you want to walk far, walk together.

Authored by: Salvor Pirenne

How to Make Your First Open Source Contribution

In this post, you will be taken through how to make your very first open-source contribution. This article is for developers of all levels who are yet to make their first pull request. It is also for designers, technical writers, translators, and all other people in tech who need to collaborate and do so using open source technology like GitHub.

Authored by: Bit

How to create an Animated Sea using CSS & HTML

It is beneficial to your mental health to be exposed to the sun and ocean air. "Surf therapy" has been demonstrated to improve your mood. Getting in the water and moving about helps you to be more conscious while also getting some exercise. It helps to relieve tension.

Authored by: JavaScript In Plain English

Beyond JSON Performance

Despite being likely the most deployed data exchange format in the software industry to date, and beside the existing competing implementations chasing the best way to stringify or parse faster than a speeding bullet, there are still various "gotchas" around this standard that most developers are un

Authored by: Andrea Giammarchi


JavaScript S

Replacing a substring of text within a larger string has always been misleading in JavaScript. I wrote Replace All Occurrences of a String in JavaScript years ago and it's still one of my most read articles. The confusion lies in that replace only replaces the first occurrence of a substring, not all occurrences.

Authored by: David Walsh

JavaScript Frontend Speed is the Next Big Thing

Faster and lighter web experiences are the next big things and teams of developers are reengineering their solutions to make them faster not only because speed metrics are being taken into consideration by search engines but because of the value of time for customers.

Authored by: Makhtar Diop

How Web Workers Work in JavaScript - With a Practical JS Example

In this article, I will walk you through an example that will show you how web workers function in JavaScript with the help of WebSockets. I think it's helpful to work with a practical use case because it is much simpler to understand the concepts when you can relate them

Authored by: keyur paralkar

A Smarter JavaScript Mapper: array.flatMap()

array.map() is a very useful mapper function: it takes an array and a mapper function, then returns a new mapped array. But in this post you'll read about an alternative to array.map(): the array.flatMap() (available starting ES2019). This method gives you the ability to map, but also to remove or even add new items in the resulting mapped array.

Authored by: Dmitri Pavlutin

Create a PWA from Scratch with Vanilla JavaScript

When COVID started spreading in China in January 2020, I took it upon myself to build The Coronavirus App. That simple PWA has since been used by more than 15 million individual users.

Authored by: JavaScript In Plain English

Why Choose Next.js Over Other JavaScript Frameworks in 2022

Which is better, React or Vue? Which is the best JavaScript framework? Is NextJS better than ReactJS? Which JavaScript framework should I learn first? Should I learn React or Vue? Frame the question whichever way you want, the reality is - among developers, these questions pop up quite often.

Authored by: Salvor Pirenne

How to Reverse a String in JavaScript

Reversing a string isn't uncommon in development, and fairly popular for entry-level interview questions. With JavaScript, we have many ways to reverse a string. We can use a combination of string's split() method as well as array's reverse() and join() methods (since strings are ultimately arrays of characters).

Authored by: StackAbuse


Angular - Getting Started!

Hello, there! It's me, your friendly neighborhood Angular guy! So let's address the elephant in the room. Angular! The framework which everyone is scared of (well, yeah). You must have heard these phrases out there, in the wild that Angular is "tough", "you can't learn Angular", "it's not fun to learn Angular" (oof).

Authored by: Sujay Das


React Show Loading Spinner on Submit Click Tutorial

You click on the submit button, form is processed, but nothing is being shown to you. Such a type of negligence leads to a bad user experience. To tackle this problem, in this tutorial, we will show you how to show loader or spinner in submit button while the form is processing.

Authored by: Digamber Singh

Code Splitting in React -  All You Need to Know

Many JavaScript frameworks bundle all dependencies into one large file. This makes it easy to add your JavaScript to an HTML page. The bundle requires only one link tag, and there are fewer calls needed to set up the page since all the JavaScript is in one place.

Authored by: sumeet bhalla

Create A Real-Time Medical App With React Native

In today's tech-driven world, people have adopted their habit of solving the majority of their problems simply by using mobile apps. And healthcare has not left an exception. In addition, with the growing prevalence of chronic health issues and the rising usage of wearables, undoubtedly the health tech industry is thriving and making a strong future of healthcare apps.

Authored by: Sophia Martin


How to Automate Performance Profiling in Node.js

Performance profiling is very useful for finding out where your application is slow, and how you can make it more efficient. With the right tools, profiling a Node.js application can be fairly straightforward. But the experience described by many tutorials is so involved, and requires the developer to walk through the profiling process step by step, every time.

Authored by: Bit

How to Use MySQL with Node.js

Open up your MySQL workbench and log in with the password that you used during the installation process. After logging in, use this command to get a list of all the databases that exist in your MySQL local instance: show databases; After typing the command use the thunder icon at the top to execute the query: You will get a list of databases that exists on your machine.

Authored by: Tirlochan Arora

Libraries and Tools

Create Your Own Angular Component Library

Reusing frontend components across different projects is a neat little trick that only a few developers have. It makes your code more readable(if done correctly) and in general keeps it pleasantly organized. Your applications look more consistent and coherent when you reuse your components.

Authored by: ding

5 Awesome Libraries To Use In Your Next ReactJs Project

We all know Reactjs is a UI library using which we can build user interfaces rapidly. but Reactjs ecosystem is so rich that you can build dynamic interactive web applications just by using some...

Authored by: Sachin Chaurasiya 👨🏻‍💻

I Tried Uber's React Web Components Library

To show you something practical, instead of going over a list of features, I'm going to build a very basic password generator app. I'm taking the cue from their own documentation, but I'm just going with a very simplistic version of it, to show you how easy it is to get started.

Authored by: Bit


Cypress JSON Test Results

How to save the test results as a JSON file using a reporter or a plugin. Sometimes you want to run the Cypress tests and do something based on the number of tests passed or failed. You need the test results in a JSON format, maybe saved as a text file.

Authored by: Gleb Bahmutov

Get Started with React Testing Library and Jest

React testing library has become the most popular option to write test cases for React applications. These test cases resemble how a user would use your application. If you are using the latest version of the create-react-app tool then you already have Jest and Testing Library already installed for you.

Authored by: JavaScript In Plain English