JSK Weekly - January 19, 2022

Are you struggling to get started this year? Get a kickstart with Reed Barger's "Get Started with Next.js – The React Library Your Project Needs" and Kelly Woo's "Getting Started with React Recoil" on Bits and Pieces.

In other news, Syncfusion are happy to introduce the new JavaScript Signature Pad control in the Essential JS 2 suite with the 2021 Volume 4 release, check out "Introducing the JavaScript Signature Pad Control in Essential JS 2" for more.


Is Vite Better than Webpack?

Webpack is a bundler-based build tool, which means that to serve your application, it needs to crawl, process, and concatenate your application's entire JavaScript file. This applies to the...

Authored by: Bit

Why is the MERN Stack Becoming Popular? Let's See in Detail

If you are a web developer, you should have heard about the MERN stack. It is built using JavaScript and is being used a lot recently. But why so? What are its features that are different from the traditional PHP or Django frameworks? Let's see in detail.

Authored by: MayhemCode

Top VS Code Extensions for Web Development

Launch a local development server with live reload feature for static & dynamic pages. A Quick Development Live Server with live browser reload. Start or Stop the server with a single click from the status bar. When you rename one HTML/XML tag, automatically rename the paired HTML/XML tag.

Authored by: Bit

15 Recommended Books For Computer Science Students

We are in the modern world where the digitization of education is already going on. Now lots of blogs and articles are there on the internet to learn from. But a book has its own value, the author puts all their knowledge experience and time to write one whole book.

Authored by: Mr. Ånand 🧬

Pixel Distortion Effect with Three.js - Codrops

From our sponsor: Looking for an intuitive whiteboard style project management tool? Give Shortcut a try for free. The creative coder's dream is to rule pixels on their screen. To arrange them in beautiful patterns and do whatever you want with them. Well, this is exactly what we are going to do with this demo.

Authored by: Codrops

API vs Microservices - Are you using 2 terms for the same concept?

Microservices and APIs are two terms that we hear quite a lot in our careers. Especially so if you're working on web development. Who hasn't interacted or even created a REST API on their project? I bet you can throw a rock into a room filled with developers, and you'd hit someone who can tell you about their experiences with APIs.

Authored by: Bit


Introducing the JavaScript Signature Pad Control in Essential JS 2

The JavaScript Signature Pad control is a graphical interface. It allows users to draw smooth signatures as vector outline strokes using variable-width Bezier curve interpolation. You can save signatures as images and vice versa. You can use your finger, pen, or mouse on desktop and mobile devices to draw the signature.

Authored by: Syncfusion

Immediately Executing setInterval with JavaScript

Employing setInterval for condition polling has really been useful over the years. Whether polling on the client or server sides, being reactive to specific conditions helps to improve user experience. One task I recently needed to complete required that my setInterval immediately execute and then continue executing.

Authored by: David Walsh

An extension to boost your VS Code JavaScript productivity

I have a few VS Code extensions installed, but I came across one that changed how I use the text editor this week. JavaScript Booster hooks into VS Code actions. What are code actions? They're automated code refactorings which you can access access by clicking the light bulb displayed on the left side of the editor window.

Authored by: stefan judis

9 JavaScript Projects You Can Build to Perfect Your Coding Skills

If you are looking for Javascript Projects to skills up your Javascript skills or you are a beginner in Javascript. In this guide, you will know a guide about lists of Javascript Projects From beginner to Advanced. Firstly to dive into the projects we will discuss what is Javascript?

Authored by: Sagar

JS Operators You Need To Start Using

When we start learning a new language, the operators are something which is kinda standard syntax like for and( &&), or (||), less than (= 1//typo moo => noo console.log(obj.noo?.val) => undefined Note: if the optional chaining is removed from obj.noo.val you will get: Cannot read properties of undefined (reading

Authored by: JavaScript In Plain English

Canceling API Requests Using fetch() And AbortController In JavaScript

The other day, I looked at using fetch() to build an opinionated API client as a replacement for the jQuery.ajax() function. When using jQuery to initiate an AJAX call, the return value is Promise-like, and has an injected .abort() method for canceling the underlying request.

Authored by: Ben Nadel

How to Use Event Listeners in JavaScript

Many web applications rely on some form of event to carry out their functions. At some point, a human interacts with their interface, which generates an event. These human-driven events typically...

Authored by: JavaScript In Plain English


Angular Material Menu: Nested Menu using Dynamic Data

The Angular Material Menu is a floating panel containing a list of options. In this tutorial, we will learn how we can create nested menus from dynamic data. We will first learn the basics of Angular Material Menu and how to render a nested menu with a static HTML template.

Authored by: Dharmen Shah 😎


5 Ways to Avoid React Component Re-Renderings

React components have evolved a long way from their inception. Still, many developers find it hard to fix unnecessary re-renderings. However, there are many approaches out there to avoid this issue. In this article, I will discuss 5 methods to avoid unnecessary re-renderings in React components.

Authored by: Bit

React Hook Form 7 Required Checkbox Validation Tutorial

Creating checkboxes in React is not so difficult, especially when you are using React Hook Form library. Even the checkbox validation is also simplistic with a Yup JavaScript schema builder. This guide will ensure how to include required validation in React checkboxes components.

Authored by: Digamber Singh

Create Dynamic Form Fields in React

A few days ago I needed to implement dynamic form fields for a project in React. I thought it would be good to make a quick tutorial on this, so here it is! Now to create a team, users can add/delete...

Authored by: Bit

Which is Better? Class Components Or Functional Component in React?

When I start my React project, my first question is whether to use class components or functional components. Another option is to use both on the project. I hope everyone uses both components on their projects. React lets you define components as classes or functions.

Authored by: JavaScript In Plain English

How to Programmatically Navigate with React Router

With react-router I can use the Link element to create links which are natively handled by react router. I see internally it calls this.context.transitionTo(...). I want to do a navigation. Not from a link, but from a dropdown selection (as an example). How can I do this in code?

Authored by: Bit

Getting Started with React Recoil

Docs: https://recoiljs.org/docs/introduction/getting-started#recoilroot Docs: https://recoiljs.org/docs/introduction/core-concepts What caught my eyes is how easy it is to get started with Recoil. No configuration, no complicated implementation, you just wrap your app with RootRecoil, that's it: Atoms are units of state. They're updatable and can be subscribed to.

Authored by: Bit

5 Best Practices for Handling State Structure in React

When we write a component in React that holds some state, we will have to make choices about how many state variables we want, and how to structure it. Although it's possible to write working code even with a standard state structure, here are a few steps to help you make better choices.

Authored by: Bit

Libraries and Tools

5 Free JavaScript Chart Libraries to Make Your Data Pop

"A picture is worth a thousand words" Charts help you to visually compare sets of data. They help people better understand and remember information. Get the experience from Google to create similar charts that Google uses. Simple yet flexible JavaScript charting for designers & developers Includes Green squares grid-like in GitHub, and other charts to use.

Authored by: Abhiraj Bhowmick

Top JavaScript Frameworks and Libraries That Will Rule in 2022

When it comes to robust development solutions, JavaScript is one such multi-paradigm programming language that sticks to your mind. Since now this programming language is used for both client-side and server-side programming languages. Therefore, it has quickly become a developer's favorite language.

Authored by: Sophia Martin

Get Started with Next.js - The React Library Your Project Needs

I've composed this guide to give you a practical overview of perhaps the most important React library you will use to build 90% of your projects: Next.js. The goal of this tutorial is to get you started using Next.js as easily as possible. This is not a complete

Authored by: freeCodeCamp.org


Know Your Tests

If you have a repository with large number of Cypress specs, pretty soon they get out of control. What if you have 200 tests, how do you find which tests cover what feature? How do you run all the tes

Authored by: Gleb Bahmutov

Writing better tests for Angular with Angular Testing Library

Some evangelicals say that before code ever exists, there always needs to be a test to know how the code should be written. That frankly isn't true. A test isn't strictly needed to determine how to code.

Authored by: Unicorn Utterances