JSK Weekly - January 12, 2022

Everyone should be nicely settled into 2022 by now, using the correct dates, getting out of bed without moaning and ... OK, maybe that's next month. Well, while you're still warming up, check out James Bryce's "4 Reasons I Love JavaScript" to jog your memory on why you love it!

Other popular stories last week include "Automate your pull requests with Mergify", "A JavaScript Crash Course — Data Types, var, let, and const" and "15 Free Hosting Providers for Web Developers" by Niemvuilaptrinh on Bits and Pieces.


15 Free Hosting Providers for Web Developers

Features of the free plan: Website may be up to 1GB in size. Bandwidth: 100Gb per month. You can set your own domain name for your website via CNAME. There is support for HTPPS for the website. Link Features of the free plan: Cons: Your code and project will automatically be displayed as public by default.

Authored by: Bit

Automate your pull requests with Mergify

Want to scale up your engineering team? Bring your pull request automation to the next level using Mergify and secure your code using a merge queue. By saving time, you can focus on projects that matter. Trusted by engineers at Amazon, Mozilla, and Airtable.

Authored by: Mergify

Is it the End of Web Developers?

Since anyone can build websites with services like Wix or Squarespace, the question is whether we still need web developers? That's a very interesting question in my opinion! Because it's true - with services like Wix or Squarespace it's very easy to build a website for your business.

Authored by: JavaScript Kicks

Filter and map Array values with a flatMap one-liner

I haven't used Array.flatMap() yet, but after reading Dmitri Pavlutin's explainer post, I got super excited about the method because it can make code shorter. Let's look at a quick numbers example: if you want to filter and map array values you'd probably approach it like the following.

Authored by: stefan judis

Getting Started with GSAP: A Practical Guide

A step by step guide in creating appealing animations in real world web apps using GSAP. In this article we will clone the Abeg website (previous website).

Authored by: Bit


4 Reasons I Love JavaScript

I love working with JavaScript. What do I mean by JavaScript? React? TypeScript? Nope. I love mainly working with vanilla JavaScript. No frameworks, libraries, etc. (at least, a minimum of them) are needed - though they are appreciated! But why do I love regular, vanilla JS so much?

Authored by: Jamey Bryce

JavaScript Hoisting in Depth

This is typically 1 tricky concept in JavaScript. Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. This means that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local.

Authored by: sumeet bhalla

How to Make a Custom Mouse Cursor with CSS and JavaScript

Have you ever visited a website and been totally blown away by its amazing features? One of them might be a cool mouse cursor that is different from the regular arrow or pointer cursors you are used to. This can really improve user experience, and lately I've been wondering how

Authored by: Frankie

JavaScript split() a String - String to Array JS Method

If you need to split up a string into an array of substrings, then you can use the JavaScript split() method. In this article, I will go over the JavaScript split() method and provide code examples. Basic Syntax of the split() methodHere is the syntax for the JavaScript split() method.

Authored by: Jessica Wilkins

JavaScript String Immutability

I see much confusion regarding string immutability, and I thought I would do my best to clarify what that means for the confused. It is often pointed out to new programmers that "strings are immutable." However, just stating this fact doesn't clarify how it applies functionally when we are writing code.

Authored by: JavaScript In Plain English

JavaScript .length Explained

In JavaScript, you can find the length of a String value by writing .length after the string variable or string literal. But examples are better than 1000 words. So let's see it in code: Code explanation: In the above code, we have two variables: 2.

Authored by: Deep Space

A JavaScript Crash Course - Data Types, var, let, and const

Below is a list of all types (aside from Symbols and Objects) in JavaScript. Numbers can be either integers or floating-point. More specifically, a Number in JavaScript is a 64-bit double-precision value. This means that a Number value occupies 8 bytes of memory and can store huge numbers (though the precision goes down after 2⁵³- 1, also known as Number.MAX_SAFE_INTEGER, or below -2⁵³ - 1, Number.MIN_SAFE_INTEGER).

Authored by: Jamey Bryce


🔥 Build a Beautiful TikTok Clone with Angular and Micro Frontend

You must be familiar with the micro frontend concept, and how to build a micro frontend app with Angular, if not, check this article first: Today we are going to raise the bar and implement something more cool and fun.

Authored by: JavaScript Kicks


React the Wrong Way: 4 Anti-Patterns to Avoid

Ever wondered if you're actually using the tools at your disposal in the right way? Sometimes tool makers will give you a brief guide on what they do and how to use them, but they won't enforce a specific way to use them on you.

Authored by: Bit

Build an Ethereum Transaction App with React and Solidity

Part 1: What you'll be building. See live demo and Git Repo Here. The online demo uses the Ropsten test network. As the Web3 movement ripples throughout the world wide web, you must jump in as a developer and become one of the beneficiaries of this blockchain technology.

Authored by: Darlington Gospel

React: Event Bubbling and Capturing

A React tutorial about event bubbling and capturing. Most JavaScript developers may be already familiar with this topic, because it origins in JavaScript and its DOM API. However, in this article, I want to give some of guidance for event bubbling and capturing in React.

Authored by: Robin Wieruch

Build Powerful Tables in React with React Table

React Table is a really powerful datagrid package for React that lets you create dynamic tables. It has many use cases and the package has an extensive list of features. In this tutorial I will show you how to build a Movie Database application.

Authored by: Bit

Want to become a React expert? | Swizec Teller

Learning from tutorials is easy. You follow some steps, learn a smol lesson, and feel like you got dis 💪 Then comes the interview, a real world problem, or a question from the boss. Your mind goes blank. Shit, how does this work again ... Happens to everyone.

Authored by: Swizec

Programmatically Navigate Using React Router

Pages on modern websites, and especially Single-Page Applications (SPAs) do not follow the traditional method of loading new pages completely whenever something changes on them. Client-Side Routing is used instead - to route towards resources to load another part of the program or structurally change the application's entire view if needed, when an action (such as clicking a button or link) is performed.

Authored by: StackAbuse

Create Your Own Layout Component in React

The layout component is a component used to share a common section across multiple pages. The layout component will have the common header and footer section. First, create your new React app using create-react-app: npx create-react-app my-appcd my-appnpm start Create components and Layout folders inside the src folder.

Authored by: JavaScript In Plain English

Avoid React Re-Renders with Automatic Batching

Batching occurs in React when it groups multiple state updates into a single re-render for better performance. For example, if you have two state updates - for example, and - in the same click event handler, React will render this component only once.

Authored by: Bit

React Bootstrap Custom Dropdown List with Fetch API Tutorial

Dropdown is a valuable and prominent module, which is often used to select one option from the given list. But do you know how to build a dynamic dropdown module from scratch? This tutorial covers multiple concepts of React. In general, we will show you how to build a dropdown list in React application.

Authored by: Digamber Singh


Set up a Node.js App with ESLint and Prettier

Before building an application, we first need to prepare the development environment with tools and technologies that facilitate development and debugging. Node.js application is not an exception, so...

Authored by: Bit

Create Industry-Standard Logger for Node.js Using Pino

This article is going to cover the use of the Pino library. Pino is an industry-standard logging library that helps print your logs in a much meaningful format. These logs can contain multiple other options associated with your single log.

Authored by: JavaScript In Plain English

Build a REST API Using Node.js, Express.js, and MongoDB, and Test It on Postman

API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. Each time you use an app like Facebook, send an instant message or check the weather on your phone, you're using an API.

Authored by: Ankan Das

Libraries and Tools

What are the Challenges that You will Face When Using JavaScript Libraries in Angular

Recently, I have been posting a lot on a Facebook Group called JavaScript - Brazil, and I am quite grateful for the admins for smoothly allowing my posts! I have been also using a lot of the hashtag...

Authored by: Jorge Guerra Pires, PhD


Unit Testing Deep Dive: What are Stubs, Mocks, Spies and Dummies?

You might hate or love unit tests, that’s up to you, but the fact of the matter is that if you don’t understand the concepts behind them, you’ll be as efficient at writing test as I am at cooking and keeping a clean kitchen at the same time (spoiler alert: I make a mess every time).

Authored by: Bit

How To Tag And Run End-to-End Tests

How to tag your Cypress tests to make sure anyone can quickly test the changes. Let's say you have hundreds of end-to-end tests (this is our current situation at Mercari US). Running the tests in parallel makes the test run faster, but there is a problem.

Authored by: Gleb Bahmutov