JSK Weekly - August 25, 2021

We're swiftly heading out of the 8th Month, into the 9th, so let's kick this week off with Mike Chen's "9 Super Useful Tricks for JavaScript Developers" on Bits and Pieces.

Some other popular reads this week include "2 Ways to Remove a Property from an Object in JavaScript" by Dmitri Pavlutin, "React Hooks: The Complete Guide" by Ayush Verma and "Build Web Back-End with Supabase" by Tulusibrahim


Jamstack CMS: The Past, The Present and The Future

The story of Jamstack CMSs goes all the way back to the 90s. In this article, we take a trip down memory lane to see how we got to the modern Jamstack CMSs we have today, and where they're heading in the next decade.

Authored by: Smashing Magazine

Build Web Back-End with Supabase

If you're a front-end web developer, you definitely don't have any difficulties while deploying a web app to hosting services like GitHub pages, Vercel, etc. Especially if it is only a static website, portfolio, or landing page. But when it comes to uploading the back-end part, I sometimes get confused about how to do it.

Authored by: JavaScript In Plain English

Useful Tips for a Successful Open-Source Project

According to Sayan Chowdhury, these are the common questions of people trying to start their open-source journey, How to get started with open source? I know x, y, z languages, which project should I contribute to? How can I filter out projects that cater to my skill level?

Authored by: Bit

Material-UI 5 is Coming: Here's What I'm Excited About

If you are excited to upgrade your Material-UI 4 implementation to this newer version, let's look at the steps we need to follow. First, upgrade React to the latest version available, React 17, as it was the minimum requirement for Material-UI 5.

Authored by: Bit

Code Principles Every Programmer Should Follow

If you ask 10 people this question, you will definitely get 10 different answers. Although the answers might be put out in different words, they would probably convey the same meaning.

Authored by: Bit

An Immortal Dinosaur and the fastest too - Hack the Dino Game !!

We are going to convert this dino into the coolest dino on the planet. Yes, the coolest, even if there are no dinos to compare with :) I don't care! First things first, opening the dino game. You need not disconnect your internet to play the game, you can just type chrome://dino in the search bar and you'll be good to go.

Authored by: You know who

Understanding Webpack's Code Splitting Feature

Although the implementation detail might vary between different front-end frameworks, the code splitting feature can be applied to any JavaScript application that uses webpack to bundle its modules. Next, let's see an example of code splitting in action using React.

Authored by: Bit


2 Ways to Remove a Property from an Object in JavaScript

A JavaScript object is a collection of properties, where each property has a name and a value. The user variable contains an object describing an employee. The object contains 2 properties that describe employee data: name and position. Sometimes, however, you need to remove properties from an object.

Authored by: Dmitri Pavlutin

Lexical Scope in JavaScript - What Exactly Is Scope in JS?

The term "lexical scope" may seem tricky to grasp at first glance. But it's helpful to understand what each word means. So this article will explain lexical scope by first examining the meaning of "lexical" and "scope". So, let's get it started by understating the term "scope". What exactly

Authored by: Oluwatobi Sofela

Everything You Should Know about Javascript Dictionaries

Learn how to build and work with this genius data structure.

Authored by: livecodestream

Native JavaScript Routing?

We can update the URL in JavaScript. We've got these APIs: // Adds to browser history history.pushState({}, "About Page", "/about"); // Doesn't history.replaceState({}, "About Page", "/about"); JavaScript is also capable of replacing any content in the DOM. // Hardcore document.body.innerHTML = ` New body who dis.

Authored by: CSS-Tricks

9 Super Useful Tricks for JavaScript Developers

As we all know, JavaScript has been changing rapidly. With the new ES2020, there are many awesome features introduced that you might want to checkout. To be honest, you can write code in many...

Authored by: Bit

JavaScript Symbols: the Most Misunderstood Feature of the Language?

"What does the Symbol has that I don't" asked the String to the developer, and he answered - "Well, it is one of a kind" It's a terrible line, I know, but stick with me for a second, would you...

Authored by: Bit

Refactoring JavaScript - 5 Common Problems to Look Out for and How to Fix Them

Refactoring is like the NeverEnding Story: you might think you're done, but as long as the plot (the project) is ongoing, there is always room for more changes. That's OK though, it's part of our job, always trying to adapt, change, tweak and finetune our code to make sure it's still maintainable and stable long after it was originally written.

Authored by: Bit


Angular + Material-UI : Using mat-icon with matInput

The only attribute to be considered here is to use matPrefix on the mat-icon. This will appear as Here, giving color="primary" adds the primary color of your material theme to the icon. Similarly, you can use accent, warn, error, etc., for the color.

Authored by: Rucha Deshpande

Brute-Force Refreshing View-Data In The Background In Angular 11.0.5

At InVision, my team - the team that works on the legacy platform - continues to shrink as more resources are dedicated to the new platform. Which means, I continually need to do more with less. As such, I'm always looking for ways to simplify my coding techniques in order to move more Product.

Authored by: Ben Nadel


How to Include Spotify Authorization in Your React App

So, you want data from Spotify, be it data from a specific user or a Spotify procured playlist. Before you can do any of that, you have to go to https://developer.spotify.com/ and register yourself as a user/your app.

Authored by: JavaScript In Plain English

React Styling: CSS vs. JSS

First thing's first - If you haven't already, install Material-UI and get familiar with their components and features. Once you're ready, we'll create our Theme Object. Material-UI provides a default theme object, but we'll usually want to override it with our own colors and styles.

Authored by: JavaScript In Plain English

Why React Native Is The Right Solution For Enterprise Mobile App Development

Planning to migrate your business to digital platforms? Typically, there are hundreds of options available to build enterprise applications. But in recent years, why has React Native become the most favourable framework for developing enterprise mobile applications? Before we get straight into the reasons, it is important to understand the basic need of the organisations while aiming to build a mobile application.

Authored by: Sophia Martin

Style a React app using Theme UI (theme-ui) package - Vijay Thirugnanam

Theme UI (theme-ui) is a library for styling React components using a customisable theme object. It is easier to get started with theme-ui rather than explaining it. In this article, we will cover the following topics: Getting started with theme-ui Defining fonts and colors Variants for heading, button, etc Responsive breakpoints and Media queries Dark mode We will build a sample app using theme-ui.

Authored by: Vijay T

React Hooks: The Complete Guide

React Hooks came into production with React v16.8 and it has completely changed the way we were thinking and using React. React Hooks enables us to build components using the functional approach instead of an object-oriented (classes) approach. "React Hooks let you use state and other React features without writing a class."

Authored by: Ayush Verma

16 Conceptual React Questions to Stand Out in Your Next Interview

Answering a conceptual question in an interview doesn't mean you will be better than others on the job, but it surely means you have the time and interest to understand the deep concepts in a framework. One's understanding of documentation separates a good developer from a great developer.

Authored by: Mohammad Faisal

How to Use 'useReducer' and 'useContext': React Hooks Tutorial

I have been searching for a perfect tutorial or material for learning React hooks, i.e., useReducer and useContext. But I found nothing useful. So I worked for some time and created the content for all of you.

Authored by: JavaScript In Plain English

React usePrevious Hook

Hooks are essential for the functional component pattern in React. One frequent logic comparison with class components was comparing a previous prop value with a current prop value via lifecycle methods. So what's an easy pattern for duplicating previous value comparisons in functional components?

Authored by: David Walsh

Manage Dynamic and Custom Subdomains in React

How do websites such as hashnode.com give a separate and custom domain for every user? For example, https://parth2412.hashnode.dev. This question has always dazzled me. The way they do it seems like magic. Or at least that's what I thought. This article guides you through managing dynamic and custom subdomains in a react app.

Authored by: Parth2412


Automate all the things with Node.js featuring Ahmad Awais (JS Party #189)

Ahmad Awais joins Amal, Amelia, and Jerod to discuss scripting, automation, and building CLIs with Node! We hear Ahmad's back story, learn the ABC's of mastering Node automation tooling, and share automation wins from all of our lives (and Twitter too).

Authored by: JS Party

Libraries and Tools

5 Useful User Interface Libraries for React Native Developers

The User Interface libraries are the reusable building blocks that are well tested, maintained, and used by the developers to attain a specific functional requirement. Here we are going to look deeply into five different kinds of libraries that are widely used by the React Native community to develop elegant user interfaces.

Authored by: JavaScript In Plain English


Unit Test your Mongoose Model using Jest

Oftentimes, we create mongoose models, start-up our servers, and never bother to test if the models actually work independently from the server as they should. This article will show how to unit test your Mongoose model using Jest. We would set up a basic project containing our model and test files.

Authored by: JavaScript In Plain English