JSK Weekly - June 15, 2022

Sometimes it pays to start right at the beginning. For anyone new to JavaScript, check out Timothy Robards' "JavaScript Fundamentals: Intro & Initial Setup".

Other popular stories this week include Tulusibrahim's "How to Separate Logic & UI in React Using Custom Hook", Juan Pablo Salazar's "Local Storage vs Session Storage vs Cookies vs Redux Store" and Kavindu Gunathilake's "5 Methods to use Type Guards in TypeScript" on Bits and Pieces.


General

Addressing Micro Frontend Criticisms & Environmental Differences

Micro frontends are the wave of the future, the next big thing in website frontend development. But, that's only the case if you're using them correctly. Of course, micro frontends aren't perfect, and they also have some negative connotations connected to them.

Authored by: Rich Kurtzman

Local Storage vs Session Storage vs Cookies vs Redux Store

Recently a friend ask me about the difference between Local Storage and Session Storage, in order to answer this I made fast research, and I write here to share it with you. The first step is to understand what all those kinds of storage are and how they work.

Authored by: Jpdev

Data Structures and Algorithms: Generate Parentheses

Studying data structure and algorithm questions for job interviews can be difficult. The questions are a crap shoot so it seems random as to which kinds to be familiar with. One such question I have personally seen multiple times for different job interviews is this one: Given n pairs of parentheses, write a function to generate all combinations of well-formed parentheses.

Authored by: John Troutman


JavaScript

How to Extract Pages from a PDF and Render Them with JavaScript

PDF stands for portable document format. PDFs were designed by Adobe in the 90s for Windows. They are self-contained documents with support for nearly all major operating systems. But sometimes you'll need to modify a PDF to suit your needs and not just view it. Unfortunately, the available software

Authored by: Hrishikesh Pathak

Debouncing and Throttling in Javascript

Debouncing and throttling are both used to enhance the website performance by limiting the number of times the events are triggered. Debouncing and throttling are not provided by JavaScript. They're just concepts that can be implemented using the setTimeout web API. Let's take an example.

Authored by: Frontend Weekly

How to Create a Set from an Array in JavaScript

To create a Set from an array in JavaScript, pass the array to the Set() constructor. For example: const arr = [1, 2, 3];const set = new Set(arr); console.log(set); // Set(3) { 1, 2, 3 } console.log(set.has(2)); // true set.delete(2); console.log(set); // Set(2) { 1, 3 } A Set object only stores unique values, so it won't contain any duplicates.

Authored by: JavaScript In Plain English

Understand JavaScript's Event Loop

I recently watched Philip Roberts' and Erin Zimmer's great talks from JSConf EU on the JavaScript event loop, which inspired me to read the HTML5 spec itself and make sure I truly understand it. I now think I've got a good grasp on what the event loop is, and I'd like to summarize that here.

Authored by: JavaScript In Plain English

JavaScript Fundamentals: Intro & Initial Setup

JavaScript is the most popular programming language in the world, so it's no wonder that it's one of the most sought-after skills in the web development industry. In fact, the Devskiller IT Skills and Hiring Report (2020) reports that 72% of companies are looking to hire JavaScript experts.

Authored by: Tim Robards


TypeScript

5 Methods to use Type Guards in TypeScript

Type Guards come into the picture with the usage of TypeScript. This technique is used to identify or narrow down the type of a variable. In case the narrowing is less familiar to you, it means the...

Authored by: Bit


Angular

Create A Custom Angular Pipe

Angular offers built-in pipes to manipulate data but sometimes they are not enough and you might need to create a custom pipe with parameters

Authored by: Lorenzo Zarantonello


React

Understanding the Suspense API in React 18

When components start to get big and you have many of them on the same page, you might want to start optimizing the way and the moment they get downloaded into your client's browser. For that React provides you with the lazy method, which allows you to mark components as "lazy".

Authored by: Bit

How to Separate Logic & UI in React Using Custom Hook

In this article, I will show you how to separate the concern between logic and UI when building a React app. Let's get started. Have a look at below code example: It's a simple React counter app that works just perfectly fine. At this stage, your component will not have any problem by having two methods inside it.

Authored by: JavaScript In Plain English

React Element vs Component

React Elements, Components, and Instances are different terms in React which work closely together. This guide will walk you through all three terms and explain them step by step. We will start off with the following code snippet as example: A React component is literally the declaration of a component as we see it in the previous code snippet.

Authored by: Robin Wieruch

How to Create a Loading Animation in React from Scratch

When creating React applications that fetch content from external sources that take some time to load, it is always a good idea to provide a pleasant user experience by engaging users and keeping their attention with a loader, as this helps users understand what is going on rather than leaving them to speculate.

Authored by: StackAbuse

An Overview of React Native Mobile Application Development

React is a very popular JavaScript library from Facebook for building declarative, efficient, and flexible user interfaces. Most of the current cross-platform app development frameworks like Apache Cordova, and Ionic under the hood display web components on the top of webview which seems like a native.

Authored by: JavaScript In Plain English


Libraries and Tools

I Made 2 New Web Tools with React and Django & Here's My Experience!

I am an independent developer, and I have developed tons of web tools with my Django skills but I learnt React and Next.js, and here's my story. There are tons of reasons you should try independent development, and some reason I started independent development is:It gives you a sense of importance and belonging which is essential for building confidence and for contributing to the community.

Authored by: JavaScript In Plain English





0 comments