JSK Weekly - June 22, 2022

Everyone likes something new and shiny, don't they? Well, Syncfusion have summarised "What’s New in 2022 Volume 1: Essential JS 2" this week, check it out!

Other popular stories include "Creating e-commerce stores with Astro and Snipcart in minutes", "Debouncing in React – How to Delay a JS Function" and "6 Most Useful TypeScript Utility Types"


How to Integrate Faster with Components

Key takeaways: Components can be used to own the representation of entities in the architecture, allowing others to use them when integrating with services. Such 'Entity Component' is independent and decoupled with its own release cycle, providing a single source of truth about "what is the entity".

Authored by: Bit

What’s New in 2022 Volume 1: Essential JS 2

The Syncfusion Essential JS 2 UI controls library is the only suite you will ever need to build an application. It contains over 65 high-performance, lightweight, modular, and responsive UI components in a single package.

Authored by: Syncfusion

Alternatives to installing npm packages globally

There are two ways in which npm packages can be installed: Locally, into a node_modules directory that npm searches for (or creates) in the current directory and its ancestors: npm install some-package Globally, into a global node_modules directory: npm install --global some-package (Instead of the long version --global of this flag, we can also use the shorter -g.)

Authored by: Axel Rauschmayer

Why Microservices Should use Event Sourcing

Microservices play a vital role when migrating from monolithic applications. They help improve applications' scalability, manageability, agility, or speed of delivery. However, there are some challenges in using microservices, such as state handling. As developers, it is indispensable for us to know how to overcome these issues to get the maximum out of microservices.

Authored by: Bit

Creating e-commerce stores with Astro and Snipcart in minutes

Astro Snipcart is a free and open source ecommerce Astro integration that is built on top of the Snipcart platform. Create an e-commerce site with just a few lines of HTML and Astro components!

Authored by: Lloyd

Next.js Static Site Generation Practical Example

This article is part of an entire Next.js series of articles that I am putting together to help you become a Next.js pro and start building blazing-fast React apps. 💡 If you don't want to miss out on any of the tutorials, signup for my newsletter by clicking here or head over to DailyDev.io for more.

Authored by: Igor Silveira

How to Become a Front End Developer - Front End Web Dev Skills

Some of the highest-paid professionals in the world are front-end developers. They use their knowledge and talents to design appealing and user-friendly websites. Front-end developers do not need a degree or a school certificate to work. Rather, they must understand the fundamentals of front-end development, programming languages, and front-end development

Authored by: freeCodeCamp.org

The many definitions of Server-Side Rendering

Frameworks. What is a framework, even? "Solid start to this blog post, Zach-you're doing great." What is a JavaScript Framework, even? "Confuse them, then rescue them. This is how thought leadership works." You've almost certainly heard of JavaScript Component Frameworks (Libraries 🌶) like Vue.js, Preact, Svelte, Lit, SolidJS, and others.

Authored by: Zach Leatherman


Asynchronous JavaScript - Callbacks, Promises, and Async/Await Explained

If you've been learning JavaScript for a while now, then you've probably heard the term "asynchronous" before. This is because JavaScript is an asynchronous language...but what does that really mean? In this article, I hope to show you that the concept is not as difficult as it sounds. Synchronous

Authored by: Emy 🦄⛅

How to Create the Typewriter Animation Using JavaScript

In this blog, we will go over how to create the typewriter animation with JavaScript. Below you will find an animation of what we will be creating. Before we begin, we have to create an index.html file. I also created a styles.css file that included some basic styling.

Authored by: JavaScript In Plain English

JavaScript Object Helpers for Everyday Use

As JavaScript developers, we have to work with Object every day. An object is a kind of part of our daily development work. From API response to database row, everything is represented as an object in JavaScript. In this article, I will share some day-to-day used object helpers.

Authored by: Parvej Ahammad

How to Add or Remove Days from JavaScript Dates

Adding or removing date types from date in vanilla JavaScript. JavaScript date manipulation can be very important when you are working on a project that uses time. Simple .add() and .subtract() date manipulation is not directly implemented in JavaScript but we can achieve that through our own implementation.

Authored by: melatonin


Fix the Cannot Find Name 'require' Error in TypeScript

To fix the "cannot find name 'require'" error in TypeScript, install the @types/node package into your project by running npm i -D @types/node. This error can occur when you try to use the Node.js require() function in a TypeScript file.

Authored by: JavaScript In Plain English

6 Most Useful TypeScript Utility Types

I have been working with TypeScript for almost a year now, and I have learned and implemented a lot in this time. Among the things, I enjoy most about typescript are the utility types that allow me to write better code, so today I will discuss the 6 most useful utility types that will help you write better code.

Authored by: Sachin Chaurasiya 👨🏻‍💻

What Is TypeScript in React and How To Use It? - Upmostly

TypeScript is a programming language that expands on traditional JavaScript. It sprinkles some new syntax on top of JS to support static typing.

Authored by: Upmostly


Retrying HTTP Requests a Fixed Number of Times With a Delay in Angular

Retrying an HTTP request with a delay or retrying an HTTP request a fixed number of times without any delay is quite simple and RXJS provides us the retryWhen, delay, and retry operators to do this. But what if we want a result that takes care of the delay between the retries and also the no of retries.

Authored by: Ramya Balasubramanian

Understanding Template Variables in Angular

Template variables are a way of labeling parts of the component template so that it may be referenced in other parts of the template. They work similarly to how a variable works in JavaScript, existing only in their defined scope, and capable of referencing several types of template objects.

Authored by: JavaScript In Plain English


Building and Sharing React SVG Icon Components

All modern-day applications use image assets. For example, an application may have a logo that uses one image in various colors and dimensions in several places. In such cases, developers isolate the logo in a separate component and provide customizations to its properties. This situation increases its reusability and customizability.

Authored by: Bit

React Labs: What We've Been Working On - June 2022 - React Blog

React 18 was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights.

Authored by: React

Create Reusable React Components The Right Way

Quick question: You've just built the world's coolest FormField for the company newsletter, and your next assignment is helping out another team with a React component that's not too different from the one you just finished. Now, how do you reuse components multiple times across applications and teams? "What kind of question is that?"

Authored by: JavaScript In Plain English

React Native Animated for Beginners

Degrees/Radians-Rotation Similarly to colors you can interpolate to degrees or radians. This is how you would write animated values for rotateX, rotateY, rotate, rotateZ, skewX, skewY and or other style properties that require a string degree/radian. You can specify simple values. Or in the case maybe you want left and right rotation.

Authored by: Code Daily

What Is CORS Policy Error in React App and How To Get Rid of It? - Upmostly

CORS actually stands for Cross-Origin Resource Sharing and is a mechanism that allows services to communicate with each other. You must have come across the infamous error that bothered almost every single person dabbling with web development. I came across it as well and was utterly frustrated with it.

Authored by: Upmostly

How To Deploy React App on GitHub Pages? - Upmostly

GitHub pages is a fantastic way to quickly deploy your page so that you could share its URL with other users. Many people tend to deploy their technical assessments to GitHub pages so that your potential new company could easily interact with the project. Let's take a look at how to set everything up.

Authored by: Upmostly


Guide to Vue Props

Vue is a JavaScript framework that allows developers to create components that are used to divide the user interface into smaller pieces, rather than building the entire UI in a single file. When using components, we may want to pass data down from the parent component to the child component at some point, this is usually done with properties, also known as props.

Authored by: StackAbuse


Node Js MySQL CSV File Upload REST API Tutorial

Sometimes you manage your data in the CSV files; in a CSV (comma-separated values) file, data is kept in rows format; every row has specific values. If you want to work with CSV in Node js, this tutorial is for you. In this comprehensive tutorial, we will profoundly learn how to create CSV file upload [...]

Authored by: Digamber Singh

How to Delete Data from MySQL Database using Node Js

Node js delete data from MySQL database tutorial; Throughout this guide, you will ascertain how to remove records from MySQL database from Node js platform. To connect MySQL to Node js, we will install and use the MySQL package in the Node js app.

Authored by: Digamber Singh

Libraries and Tools

3 Lerna Alternatives for Building a JS Component Library

A component library is a collection of UI components that you'd want to use for a project. They would all make sense to be used together, either because of the design philosophy behind them, or even because of their common design rules.

Authored by: Bit

Functional Programming

Pure Functions and Side Effects In JavaScript - Common Interview Questions

Functions are the bread and butter of JavaScript programming. It gives us a way to structure larger programs by reducing the repetition of code. Functions are normally divided into three categories: A function that is called for its side effects. A function that is called for its return value.

Authored by: Yagnik Kardani

Higher Order Functions in JavaScript - Beginner's Guide

In JavaScript, functions are treated as first-class citizens. We can treat functions as values and assign them to another variable, pass them as arguments to another function, or even return them from another function. This ability of functions to act as first-class functions is what powers higher order functions in

Authored by: freeCodeCamp.org

Debouncing in React - How to Delay a JS Function

There are some heavy tasks in software development. Take calling an API, for example. Suppose we have an API that searches a list of users, and we can't afford to fire it too often. We want to search only when we have typed the whole search query. Well, debouncing

Authored by: Nishant singh