JSK Weekly - April 24, 2019

A plethora of great articles this week again, making it very difficult to pick the best ones.

Node.js released a new version so, as usual, it's good to know "What’s New in Node 12". Find out all about it with Trey Huffine. You should also check out a very interesting article by Burke Holland, "You should never ever run directly against Node.js in production. Maybe."

Next, you should definitely check out "9 Web Components UI Libraries You Should Know in 2019" by Jonathan Saring and "A RealWorld Comparison of Front-End Frameworks with Benchmarks (2019 update)" for all of you out there that loves benchmarks.

Eric Elliott wrote an excellent and inspiring article about how "TDD Changed My Life".

For Vue.js developers, we recommend a nice tutorial "Uploading Files and Images With Vue and Express" by Aayush Jaiswal and for Angular developers "Angular’s Equivalent of React’s shouldComponentUpdate" by Chidume Nnamdi.


A RealWorld Comparison of Front-End Frameworks with Benchmarks (2019 update)

Also available in Turkish - thanks to @erdenizZz For the third time, we are comparing Front-End frameworks by using the Real World example apps. RealWorld example app gives us: RealWorld App Something more than a "todo". Usually "todos" don't convey enough knowledge and perspective to actually build real applications.

Authored by: freeCodeCamp.org

How JSON Web Token (JWT) Secures Your API

You've probably heard that JSON Web Token (JWT) is the current state-of-the-art technology for securing APIs. Like most security topics, it's important to understand how it works (at least, somewhat) if you're planning to use it. The problem is that most explanations of JWT are technical and headache inducing.

Authored by: Anthony Gore

The dialog element: The way to create tomorrow's modal windows

The dialog element doesn't enjoy wide browser support today, but it will be the clear choice for creating the modal windows of tomorrow.

Authored by: LogRocket


What is a reducer in JavaScript?

A tutorial about the reducer pattern in JavaScript for beginners ..to manage state transition with functions ...

Authored by: Robin Wieruch


Interfaces in TypeScript: What are they and how do we use them

JavaScript gives developers a great deal of flexibility. A variable initialized as an integer can be assigned a function literal at run-time. Types of variables are not predictable in JavaScript.

Authored by: Ankita Masand

TypeScript 2.9: Importing JSON Modules

TypeScript 2.9 introduced a new --resolveJsonModule compiler option that lets us import JSON modules from within TypeScript modules. Let's assume we have a Node application written in TypeScript, and let's say that we want to import the following JSON file: { "server": { "nodePort": 8080 } } In Node, we can use a require call to import this JSON file like any other CommonJS module: const config = require("./config.json"); The JSON is automatically deserialized into a plain JavaScript object.

Authored by: Marius Schulz

Node.js TypeScript #10. Is Node.js single-threaded? Child processes

The Node.js environment and JavaScript is often identified with running just one task at a time, but this is not precisely the case. In this article, we go through the concept of multiple processes and spawn them using the child process module.

Authored by: Marcin Wanago


Angular's equivalent of React's shouldComponentUpdate

Sometimes earlier when I delved into React and came to know different life-cycle method hooks in React. One of the life-cycle hooks that improves performance in React is the shouldComponentUpdate. In this post, we will see the NG equivalent of React's shouldComponentUpdate in Angular and show some useful examples.

Authored by: Bit

Angular Universal On Firebase Hosting: A Tutorial

In this Angular Tutorial, I'll tell you how you can make you a normal Angular app to support Server-side rendering using angular universal and deploy it on firebase hosting with firebase functions I am assuming you already have an angular project First, you have to Add angular universal support to

Authored by: Neeraj

An Experiment In Consuming Reactive-Form Events From Template-Driven Forms In Angular 7.2.13

Historically, I've only used template-driven forms in Angular. And, to be honest, they "just work" for me. Most of the form interfaces that I create are fairly simple and usually have a very low-level of validation requirements. As such, I've never felt much friction with them.

Authored by: Ben Nadel

Using Angular Elements - Why and How? - Part 2

Back in Part 1, you saw how to use Angular Elements in order to turn a regular Angular Component into a standalone element. This means that I don't need to import that component inside the Angular App, I can just add it anywhere I want as a single script file, and it would still work.

Authored by: Bit


Getting 60fps Animations in React

In this article, learn some CSS "hacks" to get 60fps animations in React.js. If you haven't been using them already, you might kick yourself once you see they can be the difference between jittery and silky smooth animations. Since 2012, every major browser vendor (Safari/Chrome/Firefox/Edge) implemented something called "hardware acceleration".

Authored by: Alligator

React Hooks cheat sheet: Unlock solutions to common problems

While Hooks may have been the talk of the community for a while now, beyond the fuss, they do have a very simple API. This article will highlight examples and use cases, from simple to advanced. I've also built an accompanying web app for live interaction with the examples herein.

Authored by: Ohans Emmanuel

Using JWT in Your React+Redux App for Authorization

"How does Auth work with Redux and JWT ?" The general idea is that you will save the current user's information to the Redux store for easy access across your app. You will also save the JWT (JSON Web Token) associated with the user to localStorage so that their login can persist between sessions unless they explicitly logout.

Authored by: gitconnected

How to Use Recompose to Streamline React Development

Check this tutorial to learn how to use Recompose to create reusable code and share functionality between React components.

Authored by: Anadea

useReducer vs useState in React

Comparing useState and useReducer in React, when to use them for different use cases, and their benefits in a growing React application ...

Authored by: Robin Wieruch

Improve React App Performance Through Memoization

I have spent a lot of time learning how to improve the workflow around building JavaScript applications. I've shared my experience on how different techniques like Memoization can vastly boost performance, how to adopt great engineering practices and design patterns, and how to leverage tools like Bit to build modular and maintainable apps with components.

Authored by: Bit


Case Study: Stellarport

Today, I'm pleased to introduce Ishai Strauss from Stellarport to talk about how they've built their product with Aurelia. Read on to hear from Ishai about Stellarport's experiences integrating Redux with Aurelia and leveraging decorator-based composition with Aurelia's Fetch client.

Authored by: Aurelia


Uploading files and images with Vue and Express

We will be using Vue CLI, so if you have not installed it then do install it. npm i -g @vue/cli #OR yarn global add @vue/cli Now we need to create the project: vue create vue-uploader Once done, we have to start our Vue application using, cd vue-uploaderyarn serve The first thing to do is to create a component that is responsible for all the file uploading.

Authored by: Bit

How to build a large Vue application

The MVVM of the Observable model gives Vue a natural advantage in small and medium-sized Web applications, but with the growing popularity of Vue, Vue's use in large projects is slightly awkward. Obviously, in high complexity projects, type checking has become a required feature, and Vue2's type checking support in TypeScript is not good enough, and importantly the modular design of Vuex's state logic is lacking.

Authored by: gitconnected

Add Authentication and Personalization to VuePress

There are several advantages to using a static site generator such as VuePress. With VuePress, you can focus on writing content using markdown, and the VuePress application generates static HTML files. VuePress also turns your content into a single-page application (SPA), so transitions between pages seem instant and seamless.

Authored by: Scotch Development

Getting started with the new Vue CLI 3

TL;DR: This article will take you through all of the steps required to use Vue CLI 3, the new graphical user interface and the instant prototyping feature. Vue JS, created by Evan You and 234+ open source community lovers with more than 121,000 stars on GitHub, is a very progressive framework for building user interfaces.

Authored by: Viclotana™


You should never ever run directly against Node.js in production

Sometimes I wonder if I know much of anything at all. Just a few weeks ago I was talking to a friend who mentioned off-hand, "you would never run an application directly against Node in production". I nodded vigorously to signal that I also would never ever run against Node in production because...hahaha....everyone knows that.

Authored by: Burke H✪lland

What's New in Node 12

Node.js continues its yearly release cycle with version 12 (codenamed Erbium). Since this is as even-numbered version, it will go into Long Term Support (LTS) beginning on October 2019 which and...

Authored by: JavaScript Kicks

Experimental Node.js: testing the new performance hooks

Performance monitoring is a very important topic for any application that expects to be deployed into a production environment. Performance monitoring is not something you should start considering once you start seeing performance issues, but rather, it should be part of your development process in order to detect possible problems before they are visible in production.

Authored by: Fernando Doglio

How To Build Android Apps With Node JS Using Android JS

Built android apps with JavaScript, HTML and CSS based on Node JS In this tutorial we'll learn about how to build a simple story Android App with Node JS using Android JS Android JS is an open-source framework developed and maintained on GitHub.

Authored by: JavaScript Kicks

Query GPS Coordinates within a Radius using KnexJS, Postgres and the PostGIS Extension

In this lesson we'll show how to enable the PostGIS extension on RDS. We'll then walk through using Knex to create a table to store gps coordinates. Then we'll construct queries for saving, updating, and querying for coordinates within a radius. Finally we'll use knex-postgis plugin for Knex to generate queries from helper functions.

Authored by: Code Daily

The new ECMAScript module support in Node.js 12

Node.js 12 (which was released on 2019-04-23) brings improved support for ECMAScript modules. It implements phase 2 of the plan that was released late last year. For now, this support is available behind the usual flag `--experimental-modules`. Read on to find out how exactly this new support for ECMAScript modules works.

Authored by: Axel Rauschmayer

Libraries and Tools

9 Web Component UI Libraries You Should Know in 2019

Usually, the title "Material-UI" positions a UI component library right at the top of the star-count and downloads count. Google's Material-components-web library is the web-component version of the Material-UI library. While still a work in progress, these Web Components can be incorporated into a wide range of contexts and frameworks.

Authored by: Bit

10 Best JavaScript Charting Libraries for Any Data Visualization Need

A developer evaluates then different data visualization libraries for the JavaScript language, exploring the situations in which each library works best.

Authored by: DZone

Jolly Roger - a 2KB micro-framework based on React hooks API

The hooks API is a wonderful idea. There are some slick patterns involved which pushes the React development to a more functional approach. I was really interesting to try that new API and decided to use it for my latest project. It looked like I can't build my app only with hooks.

Authored by: Krasimir Tsonev


TDD Changed My Life

It's 7:15 am and customer support is swamped. We just got featured on Good Morning America, and a whole bunch of first time customers are bumping into bugs. It's all-hands-on-deck. We're going to ship a hot fix NOW before the opportunity to convert more new users is gone.

Authored by: Eric Elliott

Real-world Units Tests in React with Jest and Enzyme

In our previous articles on React, we talked about unit testing. One of the things that disappoints me a bit with these articles is that I'm forced to make the examples quite simple-pretty much Hello World level kind of stuff.

Authored by: DiscoverSDK

Disguise Driven Testing: Jest Mocks In Depth - Part 2

Suppose you have an application that manages employees or users. You need to make a simple function that will create a new employee, but you want to make sure that the employee always contains certain fields and will have a unique id.

Authored by: Pony Foo


What's what? - Package.json cheatsheet!

Recently I started a series about Node.js and its built-in API. There, as I said, we'll be exploring every single Node.js API in-depth (or at least that's the plan). But, talking about Node.js without mentioning the famous package.json 🗄 would be a sign of big ignorance of the importance of this file.

Authored by: areknawo

How to Get a Progressive Web App into the Google Play Store

PWA (Progressive Web Apps) have been with us for some time now. Yet, each time I try explaining it to clients, the same question pops up: "Will my users be able to install the app using app stores?" The answer has traditionally been no, but this changed with Chrome 72 which shipped a new feature called TWA (Trusted Web Activities).

Authored by: CSS-Tricks

How to Create and Animate Rotated Overlays

A tutorial on how to create and animate rotated overlays, or "reveal" elements, for interesting page transition effects. From our monthly sponsor: monday.com, a new way to manage your work! Meet the new visual project management tool. Today we'd like to explore a specific reveal effect with you.

Authored by: Manoela Ilic