JSK Weekly - September 08, 2021

New Book: CI/CD for Monorepos

Monorepo is a new name for an old idea — place many software projects in the same code repository. Big companies like Google, Facebook, Twitter, and Airbnb have been utilizing monorepos for years. Today, we see a growing number of smaller teams adopting monorepos as their way of coding.

To help everyone stay afloat on this topic, we have created a book "CI/CD for Monorepos." This book is intended for software engineers who are either exploring the monorepo way of software development or looking to optimize the CI/CD process for their monorepo.

By showing what it takes to build a monorepo-first CI/CD pipeline that saves time and speeds up software development cycles, we hope that CTOs and other engineering leaders will gain insight into deciding if monorepos are the way forward for their companies and teams.

Authored by: Semaphore

Common NPM Mistakes Every Developer Should Avoid

NPM is the world's largest package manager, and using it in practice is relatively straightforward. However, when adding custom configurations or using its advanced features, many things could go wrong. So, in this article, I will discuss seven common mistakes you should avoid when using NPM.

Authored by: Bit

State Management In Next.js

By combining some React APIs, we can accurately manage "simple" states. With Next.js though, we can quickly find situations where we need to accommodate many other requirements, such as isolating state between pages or routes, and managing our data both in the server and client while bringing things in from third-party services.

Authored by: Smashing Magazine

ES2022 feature: class static initialization blocks

The ECMAScript proposal "Class static initialization blocks" by Ron Buckton is at stage 4 and scheduled to be included in ECMAScript 2022. For setting up an instance of a class, we have two constructs in JavaScript: Field: Create (and optionally initialize) instance properties. Constructor: A block of code that is executed before setup is finished.

Authored by: Axel Rauschmayer

Using the Platform Instead of Frameworks

I recently came across a series of articles by Daniel Kehoe introducing The Stackless Way, an optimistic take on web development that proposes we "use the platform" (modern features built into the...

Authored by: Elise Hein

Integrating MongoDB to Next.js

We will go through the process of integrating MongoDB to your Next.js web application step by step. If you are working on a fullstack project, sooner or later you probably will get into the situation where you need to connect your web app to a database. In this blog post I will use MongoDB.

Authored by: JavaScript In Plain English

Leetcode Algorithm Series: Valid Parentheses

Hello! Let's dive into another algorithm problem. Today's problem comes from Leetcode's Top Interview Questions - Easy under the Others chapter. In Valid Parentheses: Given a string s containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid.

Authored by: JavaScript In Plain English

Threats of Using Regular Expressions in JavaScript

There are two regular expression algorithms out there, Deterministic Finite Automaton (DFA) - Checks a character in a string only once. Nondeterministic Finite Automaton (NFA) - Checks a character multiple times until the best match is found. JavaScript uses the NFA approach in its regex engine, and this NFA behavior causes catastrophic backtracking.

Authored by: Bit

Code Kata: Water Breathing Exercise In JavaScript

Yesterday, I happened upon a TED Talk by Lucas Rockwood on the power of breathing. In his talk, Rockwood covered three different types of breathing: Water, Whiskey, and Coffee, each with different inhale, exhale, and pause tempos.

Authored by: Ben Nadel

JavaScript Array.find() Tutorial - How to Iterate Through Elements in an Array

When you're working with an array collection, sometimes you'll only need to find out if an item exists in the array so you can retrieve it. And you won't care how many other items (if any) exist within the same array. Well, we can use the find() method to do

Authored by: Kingsley Ubah

How to Update Data Without Rerendering an Entire Grid in Angular

Rerendering an entire Angular grid to updating a single record is very inefficient, and at times it can cause glitches due to the memory consumed. The best way to handle this is to find a way to rerender just that particular record.

Authored by: Syncfusion

Angular 10 Digit Mobile Number Validation Tutorial Example - positronX.io

This comprehensive guide will teach you how to implement 10 digits mobile number validation in the angular app using the angular phone number validation pattern. In this angular phone number validation tutorial, you will learn mobile number validation in angular with reactive forms. Reactive forms offer a model-driven path for managing form inputs whose values [...]

Authored by: Digamber Singh

How To Use Background Images in React (With Example Code) - Upmostly

While basic text, shapes, and colors are great, we often need more in our web apps. Images are much more complex arrangements of text, shapes, and color, and can add a lot to your React app. In this article, we'll learn how to use them.

Authored by: Upmostly

React-Query: You may not need state management🤷🏽‍♂️

react-query is often called "the missing data fetching library". It's server-state, able to manage cache data, asynchronously update stale data in the background. It might be a good replacement for global state management library such as Redux or MobX to handle the data. The core of this story is in the "Basic Usage" section.

Authored by: Rauf Pratama

(Launched) Courier’s React Toast and Inbox Components

Courier is a notification management platform and API that enables multi-channel notifications at scale. Our new toast and inbox components are now able to be targeted by our Courier Push Provider WebSocket.

Authored by: Courier

Accessing Your Data With Netlify Functions and React

Static site generators are popular for their speed, security, and user experience. However, sometimes your application needs data that is not available

Authored by: CSS-Tricks

A Guide on React Context and useContext() Hook

The context can help you to provide data to components no matter how deep they are in the components hierarchy. It is used to access global data like global state, theme, services. In this post, you'll learn how to use the context concept in React.

Authored by: Dmitri Pavlutin

How to Use React-Native-Image-Picker

Picking images from gallery or camera is one of the most popular and basic tasks to develop an app with React native. How we can do that? Today I am back to talk about how we can easily select images...

Authored by: Gapur Kassym

How to Reduce HTTP Calls From 15 Lines to 2 Lines Using React SWR

If you are a React developer, you must have wished of having a library for managing all the API calls. I am not talking about fetch or Axios. Rather a library to manage all the loading state, prefetching, caching, pagination, validation, etc. Well, I have good news for you.

Authored by: Mohammad Faisal

Event Loops in NodeJS - Beginner's Guide to Synchronous and Asynchronous Code

NodeJS is an asynchronous event-driven JavaScript runtime environment designed to build scalable network applications. Asynchronous here refers to all those functions in JavaScript that are processed in the background without blocking any other request. In this article, you will learn and understand how NodeJS works and handles all functions or

Authored by: Tejan Singh

Setup Node.js, EJS with TypeScript using Gulp and Webpack

This post assumes that you want to use TypeScript for the backend as well as frontend (using EJS template) in Node.js, but are struggling to set up a system to transpile the TypeScript code to JavaScript for the backend as well as frontend which a browser can understand.

Authored by: JavaScript In Plain English

Skip Cypress Install On CI

How to add Cypress to an existing large project without slowing down the continuous integration step. Let's say you want to introduce Cypress End-to-End tests in your company. You probably already have a repository with lots of tests, and the CI build script is ... complicated.

Authored by: Gleb Bahmutov

How to Structure a Unit Test

Most developers don't enjoy it either, but software development is not about likes and dislikes. It involves building the best possible products. A lot is at stake - business, money, reputation, and in some cases, life, too. According to Forte group: Unit testing ensures that all code meets quality standards before it's deployed.

Authored by: Chinedu Ikechi

JavaScript Arrow functions: What they are and how to use them

In this article we are going to see what they are and how to use JavaScript Arrow Functions, a new... | 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

Difference between arrow and normal functions in JavaScript

In this tutorial we are going to see how arrow functions differ from normal JavaScript functions. We will also see... | 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