JSK Weekly - December 26, 2018

Performance is always something you want to improve when building software.  This week Shalvah helps us "Understanding Throttling and Debouncing" so that we can use these techniques to improve applications performance.

Looping statements are the core of every programming language. Some of the great statements in JavaScript are often misunderstood. That's why we highly recommend checking out the excellent article "Understanding the For…of Loop In JavaScript" by Chidume Nnamdi.

One more great article we would like to recommend for Vanilla JavaScript mastering is "Understanding Scope and Scope Chain in JavaScript" by Sukhjinder Arora.

It's always a pleasure to read great articles by Eric Elliott. This week you can enjoy learning about "Lenses", Composable Getters and Setters for Functional Programming.


Understanding Throttling and Debouncing

Throttling and debouncing are two widely-used techniques to improve the performance of code that gets executed repeatedly within a period of time. In this post, we'll learn how to better use them in order to boost our app's performance and write better and faster code in JavaScript! What are they?

Authored by: some guy

19 Tips For Software Engineers In 2019

It's almost 2019 and there are some amazing things coming down the pipeline in the world of programming. But for many new developers the prospect of jumping into a career in coding can be intimidating. There are so many technologies to learn and so many languages to choose from.

Authored by: Emma Wedekind

Introducing the Async Debounce pattern

The callback hell. It's the one thing dreaded more than anything by Javascript developers. Especially when dealing with legacy APIs like jQuery or the Node standard library. Fortunately, solutions were put in place. Frameworks like Angular appeared which eased HTML rendering. Promises brought a standard and easy way to handle asynchronous functions.

Authored by: Rémy 🤖

The making of "This is your brain on JavaScript"

This is a pen that's been on my mind for a long time, ever since I started following the work of Anders Hoff that deals with natural growth patterns and emergent structures. I was fascinated by how ordered structures and interesting patterns emerge when simulating simple physical and biological rules.

Authored by: The Practical Dev

Facade pattern in JavaScript

When building an application, we often face problems with external APIs. One has simple methods, other has them very complicated. Unifying them under one common interface is one of uses of the facade pattern. Let's imagine we're building an application that displays information about movies, TV shows, music and books.

Authored by: The Practical Dev


Understanding the For...of Loop In JavaScript

In JavaScript, we have so many looping statements: All these have one basic function: they repeat until a certain condition is met. In this article, we will look into the for...of statement to see how it works and where it can be used to write better code in our JS applications.

Authored by: Chidume Nnamdi

Understanding Scope and Scope Chain in JavaScript

Scope and Scope Chain are fundamental concepts of JavaScript and other programming languages. Yet, these concepts confuse many new JavaScript developers. The knowledge of these concepts is essential in mastering JavaScript. Having a proper understanding of these concepts will help you to write better, more efficient and clean code.

Authored by: Sukhjinder Arora

Data Structures in JavaScript - Part 1

A Two-Part Series on How to Build Data Structures in JavaScript Data Structures and Algorithms! If you have studied computer science in your school/college days then you will probably know that these two are the fundamental concepts of almost every programming language. I myself did not learn to programme in the traditional method.

Authored by: Rajat S ⌨️

Javascript Array Sort Example | Array.prototype.sort() Tutorial

Get real time updates directly on you device, subscribe now. Javascript Array Sort Example | Array.prototype.sort() Tutorial is today's leading topic. The sort() method sorts all the elements of the array in place and returns that array. The javascript sort() method can also accept the parameter like function.

Authored by: KrunalDLathiya

Destructuring in JavaScript

Destructuring assignment is one of the most flexible, simplest feature in modern JavaScript. It's a JavaScript expression that makes it possible to unpack values from Arrays, properties from Objects, or even Function params, into distinct variables. We often reference to the same variable in several places in our codebase and we'd prefer to avoid declaring out the same variable over the over again.

Authored by: Mahmoud Elmahdi


TypeScript Express #4. Registering & authenticating with JWT

Today we cover an essential part of almost every application: registering users and authenticating them. To implement it, we use JSON Web Tokens (JWT). Instead of getting help from libraries like Passport, we build everything from the ground up to get the best understanding of how it works.

Authored by: Marcin Wanago


Creating A Mouse-Over Hesitation Directive In Angular 7.1.4

Ben Nadel explores the use of Directives in Angular 7.1.4 in order to implement a "hesitate" event. This event will be triggered when the user hovers into a given target and then leaves the mouse there for a configurable amount of time without clicking or leaving.

Authored by: Ben Nadel

Angular 7 Drag and Drop Tutorial With Example

Angular 7 Drag and Drop Tutorial With Example is today's leading topic. We will use Angular 7 and Angular Material 7 for this example. Angular Material is the ground running with significant, modern UI components.

Authored by: KrunalDLathiya

Angular 7 Pipes Tutorial With Example

Get real time updates directly on you device, subscribe now. Angular 7 Pipes Tutorial With Example is today's leading topic. Angular pipes are the way to write display-value transformations that you can declare in your HTML component. Angular Pipes were earlier called filters in AngularJS and called pipes from Angular 2 onwards.

Authored by: KrunalDLathiya


Build and Test Sliders with React Hooks

How to build a slider to change the size of a ball and then test it with react-testing-library. I'm sure you have heard of React Hooks by now unless you were living under a rock. They have taken the React world by storm because they offer very simple and powerful primitives for adding state and lifecycle to React functional components.

Authored by: Aditya Agarwal

React forwardRef example and why it should not be part of React API

React 16 has a forwardRef function. The function creates a new component with its ref attached to one of the child component. Why is this a big deal? In React, key and ref are special props which are not part of this.props within the component. I will explain this with a little bit of code.

Authored by: Vijay T

A feature-rich dual listbox for React

A feature-rich dual listbox for React. Install the library using your favorite dependency manager: yarn add react-dual-listbox Using npm: npm install react-dual-listbox --save Note - This library makes use of Font Awesome styles and expects them to be loaded in the browser.

Authored by: JavaScript Kicks

Email Verification with Firebase in React

A Firebase React tutorial on how to enable email verification. Only users that confirmed their email address with a email confirmation have access to your application. Every other user who is using a fake email is not authorized ...

Authored by: Robin Wieruch

Challenges in Server side rendering React apps (SSR)

Server side rendering (SSR) is a technique for rendering HTML with meta tags and data when the page first loads. For React apps, the HTML is usually an empty div tag. The browser downloads the JavaScript bundle and populates the div tag with HTML. Google, the most popular search engine, crawls the content after running JavaScript.

Authored by: Vijay T

Building a React Infinite Scroller Component from Scratch

We all know the great content discovery experience where we can just scroll and scroll, discovering more items, people and photos. When building our web or mobile apps, we often want to give this great experience to our users. In this tutorial, we are going to build a react infinite scroll with pure JavaScript and embed it into a ReactJS component.

Authored by: kris


Smoke House Project

Today, I'm pleased to introduce you to Daryl Cober, a member of the Aurelia community who has been building out "Smoke House Project", a skeleton framework for desktop/web/mobile deployment using Aurelia, including a node Web API and a MongoDB. I'll let him share more about what he's working on and his journey to get there.

Authored by: Aurelia


Leveraging Vue.js & GraphQL with Gridsome (Airtable Database Example)

Take a moment to look back at the advancement of modern JavaScript in the last few years. There are certainly a few specific frontend techs that pop to your mind- React, Node, Redux, etc. You can't argue that Vue.js and GraphQL also made significant waves in the ever-growing JS pond.

Authored by: Snipcart

Vue - Going Serverless with Firebase

Welcome to the first part of the series about "Vue - Going Serverless with Firebase". Some time ago not many people would have thought you could create a whole application without having your own server and back-end architecture. However, today it is a reality, and, as an example, we will use Firebase.

Authored by: Codementor

A simple vue-component for client-side image upload with resizing

A Vue.js Plugin Component for client-side image upload with optional resizing and exif-based autorotate. This plugin was created for the use in a webapp scenario where we had a large number of end users uploading camera photos from their mobile devices on partly low end data plans.

Authored by: Frank He

Simple customizable Vue.js timepicker component

Simple customizable Vue.js timepicker component.

Authored by: Frank He


Node.js Fundamentals: Web Server Without Dependencies

The blog of Seva Zaikov

Authored by: bloomca

How To Build a Node.js Application with Docker

DigitalOcean The Docker platform allows developers to package and run applications as containers. A container is an isolated process that runs on a shared operating system, offering a lighter weight alternative to virtual machines. Though containers are not new, they offer benefits - including process isolation and environment standardization - that are growing in importance as more developers use distributed application architectures.

Authored by: The Practical Dev

Libraries and Tools

AVA 1.0

Back in January we started work on the 1.0 release, taking the opportunity to upgrade to Babel 7 and follow its beta releases. It's been a year where we made massive improvements to AVA. It's also been a year with many exciting events in our personal lives.

Authored by: Mark Wubben

How to Make Your App Faster with Webpack Dynamic Imports | Jscrambler Blog

Website speed is a vital metric for user experience and SEO. This tutorial explains how to use webpack dynamic imports to make your application faster.

Authored by: Jscrambler

Pro tips for Visual Studio Code to be productive in 2018 👨🏻‍💻

Team XenoX Over the last few years, Visual Studio Code has grown very popular over the open-source IDE market. VS Code was publicly released in 2015 and now used by 35% of all developers according to 2018 Stack Overflow survey.

Authored by: The Practical Dev

What is GraphQL and how to use it

It is basically a query language for API's GraphQL shows what are the different types of data provided by the server and then the client can pick exactly what it wants. Also in GraphQL you can get multiple server resources in One call rather than making multiple REST API calls.

Authored by: Aditya Sridhar

Functional Programming


Composable Getters and Setters for Functional Programming Note: This is part of the "Composing Software" book that started life right here as a blog post series. It covers functional programming and compositional software techniques in JavaScript (ES6+) from the ground up.

Authored by: Eric Elliott


Taming Data with JavaScript

I love data. I also love JavaScript. Yet, data and client-side JavaScript are often considered mutually exclusive. The industry typically sees data processing and aggregation as a back-end function, while JavaScript is just for displaying the pre-aggregated data. Bandwidth and processing time are seen as huge bottlenecks for dealing with data on the client side.

Authored by: A List Apart

How to Send SMS from API or Backend 📲

Sending SMS is one of the essential features for any app's backend. I've recently started working on an app and I needed an SMS service to send transactional SMS After some research, I found Textlocal to be a viable option with decent pricing, automated campaigns, automated reports, and good support.

Authored by: Coding is Love

How many days until...

Time is a fun and challenging technical problem to solve, and most recently I had to answer the question: how many days is it until Christmas?This post is an over the top deep dive into the complexities of accurately answering a question, which boils down to: a ball of wibbly wobbly...

Authored by: Remy Sharp

Creating and filling Arrays of arbitrary lengths in JavaScript

Arrays without holes tend to be faster and more compact, because engines can internally store them contiguously. If you add a hole to an Array, the internal representation has to be switched to a dictionary. In some engines, such as V8, the resulting performance deoptimization is permanent - you can't go back to a contiguous representation.

Authored by: Axel Rauschmayer