JSK Weekly - January 18, 2023

If you're a beginner developer in 2023, we'd suggest checking out all the tips and tricks for beginners, starting with Shahan Chowdhury's "How to learn code faster as a beginner in 2023", to get your feet firmly planted right at the start.

Other popular stories include "7 Functional Programming Techniques for JavaScript Developers" on Syncfusion, Fernando Doglio's "How to Secure Your Site Against Web Scrapers" and Boaz Hwang's "Differences Between Unit Tests and Integration Tests In React Components" on Bits and Pieces.


Manage UI State with XState - Inspired by Finite State Machines

A UI can be tremendously complex nowadays. And the states depending on which the UI logic is changed, can be complex & hard to maintain also. An efficient way to handle the state changes can be controlled using the concept of Finite State Machine (FSM), a concept taken from a theory of core computer science, automata theory.

Authored by: Bit

fetch with Timeout

A few years back I wrote a blog post about how write a fetch Promise that times out. The function was effective but the code wasn't great, mostly because AbortController , which allows you to cancel a fetch Promise, did not yet exist.

Authored by: David Walsh

Add NextAuth to NextJS 13 and Authenticate with GitHub

NextJS 13 has come out, and with it, some minor changes to some typical things need to happen. In this article, we will add NextAuth and authenticate with Github. The first thing we will do is download the necessary packages: yarn add next-auth That's all we need for packages.

Authored by: Bit

How to learn code faster as a beginner in 2023

As a beginner, learning to code can be a daunting task. It can be difficult to know where to start and how to effectively study and practice the material. However, with the right resources and approach, it is possible to learn code faster and become proficient in a shorter amount of time.

Authored by: JavaScript Kicks

Why Is My Jest Suite So Slow?

Before we can start improving the runtime, we need to understand where Jest is spending its time. 34ms to run the test is reasonable, but it's unclear where the other 3.463 seconds are going. Without understanding what Jest is doing, we risk wasting time trying to optimize the wrong thing.

Authored by: Bit

How To Secure Your Site Against Web Scrapers - The Best Browser Fingerprinting Techniques

Browser fingerprinting is a security technique used in many different situations where you want to uniquely identify a user, no matter who the user is telling you they are. One of those situations, is of course, when they're scrapping your website.

Authored by: Bit

Release Notes for Safari Technology Preview 161

Safari Technology Preview Release 161 is now available for download for macOS Monterey 12.3 or later and macOS Ventura.

Authored by: WebKit


var, let, and const in JavaScript - the Differences Between These Keywords Explained

In JavaScript, you can declare variables with the var, let, and const keywords. But what are the differences between them? That's what I'll explain in this tutorial. I have a video version of this topic [https://youtu.be/Gd_JG3e1g4A] you can check out as well. 😇 If you're just starting out using JavaScript,

Authored by: Dillion Megida 🚀

JavaScript Performance - How to Improve Page Speed with async and defer

In web programming, JavaScript brings interactiveness and dynamic behaviour to your web pages. While HTML and CSS take care of the structure and aesthetics of the pages, they will be merely usable without JavaScript doing its job in the background. You can include JavaScript code in the HTML file in

Authored by: Tapas Adhikary

5 Reasons Why You Should be Using Lodash in Your JavaScript Projects

Are you tired of writing repetitive and verbose code in JavaScript? Well, let me introduce you to Lodash, a popular JavaScript library that can help you with that. Lodash provides a wide range of utility functions that makes working with arrays, objects, and functions a breeze.

Authored by: JavaScript In Plain English

How to Build a Grid to List Toggle using CSS Grid and JavaScript

In this article, I will show you how to create a toggle to display items in a grid from a list. This will be using basic JavaScript skills with no external code or libraries. We will be using CSS Grid. What We Will Be Creating How to Create Our Starter

Authored by: Jennifer Bland

How to Create a Grid-to-List Layout Toggle using Flexbox and JavaScript

In this article, I will show you how to create a toggle to display items in a grid from a list. We'll do this using basic JavaScript skills with no external code or libraries. We will be using Flexbox to help us accomplish this. What We Will Be Creating Here's

Authored by: Jennifer Bland

How to Simulate a Mouse Click With JavaScript

In this article, we'll learn multiple ways to easily simulate a mouse click or tap on an element in the HTML DOM, using JavaScript. This is the easiest and most basic method to simulate a mouse click on an element. Every HTMLElement has a method that can be used to simulate clicks on it.

Authored by: Coding Beauty


10 Things You Should Know About Zone.js in Angular

Ah, Zone.js! If you've been using Angular for a while, chances are that you've encountered Zone.js. Maybe during one of your debugging sessions? In this article, we will explore Zone.js and its role in Angular. We will do this in a Q&A style, answering questions like what Zone.js is, how Angular uses it to trigger change detection, and what else we can use it for.

Authored by: Vasileios Kagklis


7 Must-Know React Hooks for Improved Efficiency and Maintainability

My Go-To React Hooks for Everyday Development As a software engineer, I've found React Hooks to be a game-changing tool for adding state and other React features to functional components. In this blog post, I'll share the seven React Hooks that I think every developer should be familiar with.

Authored by: JavaScript In Plain English

Easily Build a Modern Job Listing Website with React, Vite, and Tailwind CSS

Creating a modern, efficient and effective job listing website requires the use of up-to-date technology, such as React, Vite, and Tailwind CSS. In this article, we will guide you through setting up the development environment and creating a job listing website using these technologies.

Authored by: JavaScript In Plain English


Why You Should Avoid Mutating or Reassigning Props in Vue

Props are a powerful feature in Vue 3 that allows you to pass data from a parent component to a child component. They are a one-way flow of data, meaning that the parent component can pass data to the child, but the child cannot modify the data passed to it via props.

Authored by: Bit

Intro to Vue.JS Props with examples

In this tutorial, we are going to learn about props in vue.js apps with the help of examples. In Vue.js props helps us to pass the data from parent components to its child components. To use the props in Vue components first we need to register the props.

Authored by: Sai gowtham


Exploring the Core: A Series on Understanding the Root of a Node Project - env

Diving Deeper: Uncovering the Fundamentals of Node.js Project Configuration with env Variables In this series, we will explore the core of a Node.js project and delve deeper into the inner workings of one of the most popular JavaScript runtime environments.

Authored by: JavaScript In Plain English

Send Emails for your Node.js Application using Nodemailer + Express

nodemailer is a simple module that has zero dependencies, designed specifically for sending emails. Follow along with this tutorial of a simple business scenario: a website sends a thank you email to new subscribers. Nodemailer supports sending emails using Gmail. We do this by registering a Gmail account that uses two-factor authentication.

Authored by: JavaScript In Plain English

A Comprehensive Guide to NodeJS Security Best Practices

Today we will see how we can improve the security of a NodeJS application. There are lots of aspects to security in the NodeJS application. We will get familiar with many of the concepts and see how we can prevent unwanted attacks on our application. Nothing is bulletproof, but being safe doesn't hurt.

Authored by: Mohammad Faisal


Differences Between Unit Tests and Integration Tests In React Components

Testing is a crucial part of software development that helps ensure that an application is functioning correctly and is free of bugs. There are many different types of tests that can be performed on an application, and two of the most important are unit tests and integration tests.

Authored by: Bit

Functional Programming

7 Functional Programming Techniques for JavaScript Developers

Functional programming is a trending topic in modern web development. It is all about designing the application architecture as a combination of simple functions to write more extensible code. It allows you to simply swap any function without breaking another part of the program and makes it easier to understand and debug the program.

Authored by: Syncfusion

TypeError:$(document).ready is not a function in jQuery [Solved]

In this tutorial, we are going to learn about how to solve the TypeError: $(document).ready is not a function in jQuery. The "TypeError: $(document).ready is not a function" in jQuery error occurs one of the following reasons: Initializing the jQuery library after the JavaScript code. Using the jQuery library without adding to the HTML file.

Authored by: Sai gowtham

Functions & Objects in JavaScript

In JavaScript, a function is a block of code that can be reusable. Functions can accept input (called parameters) and return output (called return value). To define a function in JavaScript, you use the function keyword, followed by the name of the function, a list of parameters (enclosed in parentheses), and the function body (enclosed in curly braces).

Authored by: Abdulazeez Sherif