![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
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.
General
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
JavaScript
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
TypeScript
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
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
React
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
Aurelia
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
Vue
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™
Node.js
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
Testing
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
Other
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
