JSK Weekly - November 17, 2021

As we creep closer to 2022, have you started thinking about what it might be like? We imagine a world where the one of the most common words used isn't Sanitizer! Except of course if it's the API kind, we fully endorse that. Check out Piumi Liyana Gunawardhana's "JavaScript Sanitizer API: The Modern Way to Safe DOM Manipulation" on Bits and Pieces.

Other popular stories this week include "Array vs Object Destructuring in JavaScript – What’s the Difference? and "4 Easy Steps to Embed a JavaScript Control into a Blazor App" on Syncfusion.


What is Chrome Scripting API?

Although the Scripting API was introduced to move features from Tab API, we can see several major feature improvements. So, I will take some example usage from both chrome.tabs.executeScript and chrome.scripting.executeScript functions and highlight the differences for you. In Manifest V2, developers were only allowed to target all the frames in a tab or a single specific tab.

Authored by: Bit

Which Framework to Consider: Angular or Vue.js for your Next Project?

The web and mobile industry is booming rapidly. With the advent of modern technologies, high-performance-based solutions are offering next-generation experiences to users. The new technologies have...

Authored by: JavaScript In Plain English

5 Common Mistakes in Using Promises

Promises provide an elegant way to handle asynchronous operations in JavaScript. Once, it was the breakthrough solution to avoid callback hell. However, not many developers understand what's going inside them. As a result, many tend to make mistakes in using Promises in practice.

Authored by: Bit


JavaScript Sanitizer API: The Modern Way to Safe DOM Manipulation

Using the Sanitizer API is pretty straightforward. All you need to do is instantiate the Sanitizer class using the Sanitizer() constructor and configure the instance. For sanitizing data, the API provides three basic methods. Let's see how and when we should use them. is used to parse and sanitize strings and immediately insert them into the DOM.

Authored by: Bit

Create a Squid Game JavaScript Game with Three.js

Would you survive the TV show Squid Game? Would you survive coding the TV show Squid Game? Time to find out. We just published a JavaScript course on the freeCodeCamp.org YouTube channel that will teach you how to create the Red Light / Green Light game from Squid Game. You

Authored by: Beau Carnes

What is Hoisting in JavaScript?

In JavaScript, hoisting allows you to use functions and variables before they're declared. In this post, we'll learn what hoisting is and how it works. What is hoisting?Take a look at the code below and guess what happens when it runs: console.log(foo); var foo = 'foo'; It might

Authored by: Zach Snoek

Writing Clean Code in JavaScript

Writing clean code improves the maintainability of the application and make developers productive. However, some developers are unaware of the language features available to further enhance the code. In this article, I will discuss how we can utilize the features of JavaScript to write clean code.

Authored by: Bit

Array vs Object Destructuring in JavaScript - What's the Difference?

The destructuring assignment in JavaScript provides a neat and DRY way to extract values from your arrays and objects. This article aims to show you exactly how array and object destructuring assignments work in JavaScript. So, without any further ado, let's get started with array destructuring. What Is Array

Authored by: Oluwatobi Sofela

Use Python or JavaScript to Send Your Events and Logs to Telegram via their Chatbot API

In my opinion, Telegram has one of the best, if not the best, chatbot API. What they have created is extremely easy to use, yet it is unbelievably powerful. And I have used it for dozens of small projects over the years.

Authored by: JavaScript In Plain English

Don't write Javascript

Yes, I've written a lot of Javascript. But it's honestly an accident that we're using it for such large, complex applications. It's not a good language. We need to move on. Let's talk about how you...

Authored by: Scott Nonnenberg

An Introduction to Data Structures with JavaScript

Hi folks! In this read, we are going to look into simple ways to implement data structures (DS) using JavaScript. These implementations are intended to provide the essence of DS thus helping us explore the basic idea behind a data structure using JS.

Authored by: JavaScript In Plain English

4 Easy Steps to Embed a JavaScript Control into a Blazor App

Blazor is an open-source, single-page web application development framework developed by Microsoft. Even though it depends on NuGet packages, it also supports the use of npm packages.

Authored by: Syncfusion


How to Build a Checkbox Tree with Angular FormArray

If you would like to know how a radio button tree can be implemented, you can check out the link below: Implementing a checkbox tree is very similar to a radio button tree but with slight differences. Below is the data that we are going to use.

Authored by: JavaScript In Plain English


React Suspense: Lessons Learned While Loading Data

Suspense is React's forthcoming feature that helps coordinate asynchronous actions-like data loading-allowing you to easily prevent inconsistent state in your UI. I'll provide a better explanation of what exactly that means, along with a quick introduction of Suspense, and then go over a somewhat realistic use case, and cover some lessons learned.

Authored by: CSS-Tricks

How to: React Table with Filter

In this tutorial, I want to show you how to use React Table Library with a feature. In the previous example, you have already installed React Table Library to create a table component. Now, we will enable users to filter data in the table.

Authored by: Robin Wieruch

Design Extensible React Application Architecture

In the digital garden ( https://onurdayibasi.dev/), I build different UI experiments and improve in time. How are experiments (plants) will independent and expandable? Before telling architecture, I want to explain some terms; Digital Garden The phrase "digital garden" is a metaphor for thinking about writing and creating that focuses less on the resulting "showpiece" and more on the process, care, and craft it takes to get there.

Authored by: Onur Dayibasi


How to Debounce and Throttle Callbacks in Vue

Listening for often occurring events like user typing into the input field, window resize, scroll, intersection observer events etc. requires precaution. These events could occur so often, e.g. a few times per second, that invoking an action like a fetch request on every event isn't a wise approach.

Authored by: Dmitri Pavlutin


Google API authentication using OAuth2.0 and Passport.js in Nodejs

OAuth is an authorization protocol and it stands for Open Authorization. Many sites including Medium use it to directly log into another third-party application without filling a separate form. Now, users don't need to remember passwords separately for different applications.

Authored by: Ishu Khanchi


How to use Playwright and Benchmark.js to test JavaScript performance across browsers

Benchmark.js is a useful library for testing the performance of JavaScript code. We look at using Playwright to run tests across browsers.

Authored by: JavaScript In Plain English

Test your sitemap using Cypress

How to load and parse sitemap XML resource and then confirm each page loads using the Cypress.io test runner. Sometimes people ask me how to verify their sitemap.xml files using Cypress tests. While Cypress test runner is not meant for crawling website, it is pretty capable of quickly checking your pages against silly "404: page not found" errors after the deployment.

Authored by: Gleb Bahmutov

How to get started with property-basted testing in JavaScript with fast-check

Property-based testing helps us write better tests, with less code, and greater coverage. This leads to more confidence in our code, and fewer bugs in our applications. But, as always, there's a price. Property tests take more effort to write, and they take longer to run.

Authored by: James Sinclair