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.
General
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
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
Angular
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
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
Vue
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
Node.js
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
Testing
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