JSK Weekly - November 10, 2021

React is a really hot topic this week, so if you're a fan or thinking of becoming one, bookmark this edition!

Some of the more popular stories this week include "React Router 6 Tutorial" by Robin Wieruch, "Top 7 React Developer Tools to Use in 2021 (With Bonus!)" by Sunil Joshi and Indrajith's "Axios Mocking with ReactJS" on Bits and Pieces.


Angular vs React vs Vue: Finding Value in Each

Between these three, there's no clear winner that should be most definitely used in your next project to achieve mind-blowing success. If you've already settled on one framework or a library - as a...

Authored by: JavaScript In Plain English

RxJs Challenge: Spot the Mistake

Our team works in Angular + Node.js. We use proper OO with heavy Reactive influence (RxJs) when it's applicable. We're pragmatic programmers: get stuff done fast, keep it short and maintainable, we don't believe in silver bullets: always try to use the best fitting solution. We're making the backend logic of a game.

Authored by: Imre Gábor

Debug like a pro

Being a web developer one must be aware of some awesome debugging techniques. To be honest I have been using console.log() along with debugger to debug my code, but debugging is not limited to these two. I have came across some great articles informing there is so much more.

Authored by: Amnah Khatun


Working with arrays is an essential skill in any programming language, especially JavaScript, as we continue to rely on external data APIs. JavaScript has added methods like find and ` findIndex recently, but one syntax I love from languages like Python is retrieving values by negative indexes.

Authored by: David Walsh

Introducing Svelte, and Comparing Svelte with React and Vue

Josh Collingsworth is clearly a big fan of Svelte, so while this is a fun and useful comparison article, it's here to crown Svelte the winner all the way through. A few things I find compelling: One of the things I like most about Svelte is its HTML-first philosophy.

Authored by: CSS-Tricks

Let's build our own Redux

I coded in Java/Kotlin for most of my college life, and hence, followed the MVC pattern mostly for projects. Ironically, my first job right after college was as a ReactJS developer. Now that I had to shift my paradigm from that to the functional approach of modeling data, Redux, it wasn't easy for me and, I had my share of tough times getting my head around.

Authored by: Shivam Bhasin

Svelte and Elder.js with Nick Reese on Web Rush #158

Nick Reese chats with us about what Elder.js is and why would someone use it for development? What are short codes and how do they benefit development in Svelte? How does Elder.js fit alongside Sveltekit? And how does hydration work with Elder.js?

Authored by: John Papa

The Developer's Guide To Building A Notifications Systems: Part 1 - User Requirements

Before building a notification system, you should know the requirements for your internal users who will be creating the notifications for your end-users.

Authored by: Courier

The Solution to Npm Package Hijacks & Malware Is Deno - I Like Kill Nerds

I think it has become abundantly clear that Node.js and how it deals with dependencies is flawed and has become a total liability now. On October 22, 2021, a popular Npm package was hijacked and exposed to anyone who downloaded it to a password harvester and cryptocurrency miner for 4 hours.

Authored by: Dwayne Charrington


Finding unresolved promises in JavaScript | Swizec Teller

JavaScript is a fantastic server-side language because it's async. That also makes it tricky. 💩 Async means you can write code that doesn't hit the usual thread-safety problems and lets you run multiple tasks in "parallel". Like waiting for a file read without blocking computation.

Authored by: Swizec

The Best JavaScript Interview Question I've Ever Come Across

We are calling the SayHi() function calling in its body the sayBye() function. The sayHi() function enters the stack and immediately after that, the sayBye() function is stacked upon it. When sayBye() finishes executing, it will exit the call stack and after that, the sayHi() exists as well.

Authored by: JavaScript In Plain English

Responsible JavaScript

High five to Jeremy on the big release of Responsible JavaScript on A Book Apart. There is a lot of talk about how the proliferation of JavaScript has had a negative impact on the web, but now we have the canonical reference tome.

Authored by: CSS-Tricks

Atomized Transactions of Web Assets: JavaScript's Role in the Web3 Internet Economy

Immutable, transferable, and trackable links will play a major role in the web3-driven internet that is coming. Because if you know a bit about how the internet works, you can see that a link between two web pages is a relation like a liaison between two blocks of a chain, like a contract between two parties - here, two pages.

Authored by: Makhtar Diop


Using Firestore with TypeScript in the v9 SDK

So I've been playing with the new Firebase/Firestore V9 SDK recently and have come up with a very simple and very minimal way to make it play nice with TypeScript. The only thing we're going to do is to create an abstraction that maps all of the possible collections in our DB, and returns a typed Firestore collection reference.

Authored by: GuardLine VPN

A Deep Dive Into Serverless UI With TypeScript

Serverless UI is simply a free, open-source command-line utility for quickly building and deploying serverless applications on the AWS platform. In this article, we will learn and cover everything needed on using Serverless UI to deploy our projects or serverless applications to cloud services providers.

Authored by: Smashing Magazine


Axios Mocking with ReactJS

When it comes to mocking Axios, it all starts with the Mock Adapter. It's a different NPM library that provides the additional capabilities to Mock the API requests. You can install it using the command npm install --save-dev axios-mock-adapter. Then, you need to create an Axios instance and pass it to the Axio adapter.

Authored by: Bit

Common React Hooks Mistakes You Should Avoid

React Hook feature was first introduced on React 16.8 update and became immensely popular among developers due to its capabilities. It allows you to hook into React state and lifecycle features. And, sometimes, it could be challenging when using it for advanced use cases.

Authored by: Bit

React Router 6 Tutorial

A React tutorial which teaches you how to use React Router 6. In order to get you started, create a new React project (e.g. create-react-app). Afterward, install React Router by following the official instructions from their documentation. The first implementation detail will be telling our React application that we want to use React Router.

Authored by: Robin Wieruch

You can use React Query for slow computation, not just API | Swizec Teller

React Query brings the ergonomics of GraphQL clients to RESTful APIs. It scratched my itch. Getting a whole company onto a new way of writing the API layer is hard and there's real work to do. React Query offers the perfect middle ground.

Authored by: Swizec

GraphQL On The Front-End (React And Apollo)

Quick summary ↬ Within the last decade, technologies like GraphQL have changed how we build web apps and how they communicate with each other. GraphQL provides certain benefits over REST APIs - let's find out what they are.

Authored by: Smashing Magazine

Teaful: tiny, easy and powerful React state management

Teaful is a new npm package where you can manage your stores with less than 1kb without the need of boilerplate: reducers, actions, selectors, connect, etc. And without unnecessary rerenders! It subscribes only to the changes of the used properties.

Authored by: Aral Roca

Build a Simple React Login Form using Event Handlers and React Hook

I think many people face difficulties at the beginning of learning React. In my perspective, one has to try to build simple projects along with the concepts, so that we can understand clearly. So, here I am to help you out by building a simple login form using React and boosting your React knowledge This is another super duper simple project.

Authored by: K Hemanth Raju

Implementing a timer using React

Implementing a timer using React might seem straightforward until you actually try to implement one. This seemingly run-of-the-mill task can put your React knowledge to a stern test. First, let us try the obvious way-creating a state and incrementing it using setInterval.

Authored by: Frontend Weekly

Why I'm excited about React 18 - talk | Swizec Teller

React 18 is coming soon. I hope 🤞 React 18 is the one with Suspense. The major refactor that enables transparent asynchronous rendering. Yes that means you can load data without async functions and draw large animations that skip frames without UI blocking.

Authored by: Swizec


How to Get the Viewmodel Instance From the Aurelia 2 Au-Compose Element - I Like Kill Nerds

Dynamic composition is a crucial part of developing robust user interfaces in Aurelia. If you worked with the compose element in Aurelia 1, you might (or might not have) needed to obtain a reference to the composed view-model itself. While Aurelia 2 keeps many things the same, how dynamic composition works is a little different.

Authored by: Dwayne Charrington


How to Show/Hide Elements in Vue

Hiding and showing elements on a web page is an often occuring UI-related task. You might want to toggle the visibility of some detail sections, tooltips, and more.

Authored by: Dmitri Pavlutin


Node.js and npm: introductory tutorial

In this tutorial we will see how to install and use both Node.js and the npm package manager. In addition,... | Web design web development news, website design and online marketing. Web design, development, javascript, angular, react, vue, php, SEO, SEM, web hosting, e-commerce, website development and search engine optimization, social media management.

Authored by: MA-NO WebDesign&Dev

Deploy a Node.js App to Oracle Cloud

I'll assume you have the private key given by Oracle cloud when you create your instance (in my case it will be acecom-server-3), and you have it store it somewhere on your PC.

Authored by: JavaScript In Plain English

Libraries and Tools

Top 7 React Developer Tools to Use in 2021 (With Bonus!)

Whether you are just starting to learn React or you're already full-time working professionally in it, there are many tools (both free and paid) that you can use in your personal or professional projects. They are always beneficial as they help speed up the workflow or get things done quickly.

Authored by: JavaScript In Plain English


Getting Started With Testing In React - Upmostly

In this tutorial I will be giving an introduction to testing in React.

Authored by: Upmostly

Faster test execution with cypress-grep

How to run filtered specs and tests faster using cypress-grep plugin. Recently I have written the cypress-grep that can be useful to run the tests selectively by part of the title, or by using tags.

Authored by: Gleb Bahmutov

Functional Programming

React Error: "this.setstate is not a function" - How to Fix - Upmostly

By Jesse Ryan Shue "this.setstate is not a function" is a common error message that comes up in React. In this article, we'll learn how to fix it. As a reminder, we use this.setstate in React class components. If you're using functional components, you'll likely use the useState hook instead.

Authored by: Upmostly