JSK Weekly - September 01, 2021

A pinch and a punch for the first of the month! We hope it's going to be an epic one for everyone! Speaking of Epic ... Have you heard of Epic React? We believe it's, well, Epic. Check out Sujata Gunale's "Epic React — React Hooks" for more.

Other must reads this week is Anjalee Sudasinghe's "Everything You Should Know about Comparing Dates in Javascript" and Nishu_Dissanayake's "Top 5 Frontend Hosting Platforms in 2021" on Bits and Pieces.


Don't Let Carousels Kill Your Application

Today, carousels are widely used in web applications as a slideshow component, cycling through a collection of elements. So, in this article, I will discuss the negative impacts of using carousels...

Authored by: Bit

jq for JSON

I old enough to remember when we thought XML was going to change the programming world...then JSON saved us from that hell. Parsing and querying JSON data is fundamental task we've all coded for, but sometimes I just want to get some data locally with minimal fuss.

Authored by: David Walsh

Async/Await: The Easy Way to Fetch

To understand Async/Await you first have to understand what promises are and how they work: JavaScript is single threaded, meaning that two bits of script cannot run at the same time; they have to run one after another. A Promise is an object that represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

Authored by: JavaScript In Plain English

Top 5 Frontend Hosting Platforms in 2021

In modern web hosting, the frontend requires special attention. It's pretty common to optimize the frontend and deliver using CDNs to reduce latency. And some platforms handle most of the complexities. However, choosing a platform isn't easy since each one brings in different capabilities.

Authored by: Bit


Deeper Look into Parsing Strings into Numbers in JavaScript

In a Javascript application, the input data we accept from users are often in string format. Forms and input fields are the biggest examples of this. But our application can't always process all these data as strings themselves. Especially when it comes to inputs like age, price, or quantity, the application might need to convert them to "number" type before processing.

Authored by: livecodestream

JavaScript setTimeout() - JS Timer to Delay N Seconds

Have you ever wondered if there is a method to delay your JavaScript code by a few seconds? In this article, I will explain what the setTimeout() method is with code examples and how it differs from setInterval(). What is setTimeout() in JavaScript?setTimeout() is a method that will execute

Authored by: Jessica Wilkins

Learn JavaScript in Spanish - Full Course for Beginners

Welcome! If you speak Spanish and you want you learn JavaScript, you're in the right place. freeCodeCamp just published a free 9-hour JavaScript course for beginners. You will learn everything you need to know to get started with JavaScript, a key programming language for web development and many other applications.

Authored by: Estefania Cassingena Navone

What is JavaScript? JavaScript Code Explained in Plain English

JavaScript was created over 26 years ago and is currently one of the most popular programming languages. But what is JavaScript? JavaScript is used with HTML and CSS to create dynamic and interactive web pages and mobile applications. We often call it one of the building blocks of web development.

Authored by: Jessica Wilkins

Everything You Should Know about Comparing Dates in Javascript

Dates are hard, let's learn how to compare them.

Authored by: livecodestream

What is Hoisting in JavaScript?

Hoisting. It is the word everyone throws around when talking about JavaScript, yet no one takes the time to actually explain what hoisting is, how it works, and why it is important. In this article, I will be explaining everything you need to know about hoisting so next time someone mentions it you can understand exactly what they mean.

Authored by: JavaScript In Plain English


Type Guards and Control Flow Analysis in TypeScript 4.4

In celebration of the release of TypeScript 4.4, I explore Type Unions in TypeScript and how the language uses Type Guards and Control Flow Analysis to automatically refine a variable's type. I've...

Authored by: Eamonn Boyle

Five useful syntaxes in TypeScript - Vijay Thirugnanam

TypeScript allows developers to write code that gets compiled to JavaScript. The output JavaScript code runs in browsers and anywhere where JavaScript runs. TypeScript is around since 2012. So, it is not something new. Most developers with JavaScript background use TypeScript these days as it is very convenient as well as very safe.

Authored by: Vijay T


Tracking User Interactions And Analytics With Small Abstractions In AngularJS

In order to get a sense of how people are using our JavaScript applications at InVision, it's important to track various user interactions. Doing so can expose popular workflows, usability issues, and blind-spots; and, in general, allow us to make future decisions based on actual data.

Authored by: Ben Nadel

Jasmine Unit Testing for Angular 12

Jasmine is the most popular JavaScript library for unit testing web apps. It's used by default as the default testing framework in Angular projects generated using Angular CLI. In this tutorial, designed for beginners we'll help you to easily get started with unit testing using Jasmine in Angular 12.

Authored by: Ahmed Bouchefra

Angular 12 Display JSON Data in Table Tutorial - positronX.io

Angular 12 Display JSON File Data in Table. A JSON file is a useful file that helps to store simple data structures and objects in JSON format, typically known as JavaScript Object Notation. Ideally, it is a common data interchange format, basically used for transferring data between a web application and a server.

Authored by: Digamber Singh


Introduction to Atomic Layout for React Applications

Atomic Layout is a lightweight React library that allows you to generate a grid-based responsive layout for your components. Modern CSS libraries like styled-components and emotion are incredibly useful because they allow you to create isolated, local CSS that applies only to the intended specific components.

Authored by: Bit

Drag and Drop example using plain React - Vijay Thirugnanam

In this tutorial, we will learn how to implement drag and drop using plain React. The example app that we are going to build is very simple, almost trivial. My objective is to document the steps in plain React. Those steps are going to mimic the steps that we need to setup drag and drop using vanilla JavaScript.

Authored by: Vijay T

Compound Components In React

Compound components help developers build more expressive and flexible APIs to share state and logic within components. This tutorial explains how this can be achieved with the help of using the Context API and React to build components by using this advanced pattern.

Authored by: Smashing Magazine

Build a Cryptocurrency Returns Calculator with React + CoinGecko API

Building your own cryptocurrency returns calculator is an awesome addition to any developer's portfolio, especially if you're a cryptocurrency enthusiast. If you're a developer in training and have #Bitcoin in your Twitter bio, this article is written for you. This tutorial is totally suitable for beginner and intermediate React learners!

Authored by: Adam Shinder

Epic React - React Hooks

The first and foremost of Hooks. A special hook - used to store any piece of data. Similar to what you do in class components - this.state Key Points - Argument - Accepts a single argument Returns - An array containing the initial value passed ( that single argument ) and an updater function to alter the value.

Authored by: Tidbits JS


Vue Js Download File with Axios Example Tutorial - positronX.io

Vue JS Axios File Download tutorial; In this tutorial, we will help you learn how to download the file in the vue js application using the Axios package. We will show you how to build a file downloading feature from scratch. After going through this tutorial, you will be able to download a PDF document [...]

Authored by: Digamber Singh


Promises-based timer functions are supported in Node.js 16

When writing Node.js automation/build scripts, I occasionally need "sleep" functionality to wait for other tasks to finish. It's not great to implement "sleeps and waits", but sometimes there's no other way than waiting for another system to finish what it's doing. I often use the following snippet in a Node.js module script.

Authored by: stefan judis

Libraries and Tools

5 String Manipulation Libraries for JavaScript

Working with strings can be a cumbersome task as there are many different use cases. For example, a simple task like converting a string to camel case can require several lines of code to achieve the...

Authored by: Bit

Introduction to the Solid JavaScript Library

Solid is a reactive JavaScript library for creating user interfaces without a virtual DOM. It compiles templates down to real DOM nodes once and wraps

Authored by: CSS-Tricks