JSK Weekly - December 19, 2018

As New Year is getting closer, we are all somehow interested in recaps. Trey Huffine had a great, although a bit early, "A Recap of Frontend Development in 2018" this week.

Arrow functions are a relatively new thing in JavaScript. It's a very handy feature but also pretty misunderstood one. That's why we recommend digging into "A Practical Guide to ES6 Arrow Functions" by Arfat Salman.

Angular developers are going to enjoy "Boost Angular’s Performance by Lazy Loading your Modules" by Chidume Nnamdi while their React colleagues can learn a lot about "Managing Derived State from Props in React" by "RC".


A Recap of Frontend Development in 2018

The world of frontend development moves fast. Very fast. This article will recap the most important frontend news, notable events, and trends in JavaScript for 2018. WebAssembly is often regarded as...

Authored by: Trey Huffine

Elegant error handling with the JavaScript Either Monad

Let's talk about how we handle errors. JavaScript provides us with a built-in language feature for handling exceptions. We wrap problematic code in try...catch statements. This lets us write the 'happy path' in the try section, and then deal with any exceptions in the catch section. This is not a bad thing.

Authored by: LogRocket


A Practical Guide to ES6 Arrow Functions

A tale of two functions... with examples. In Arrow functions, the parameter list and the function body is separated by a => symbol. That is, the function keyword is effectively replaced by =>. The parameters come first, and then the => symbol, which is then proceeded by the function body.

Authored by: Arfat Salman

Understanding Javascript Closures

It was really a hard concept to understand and it took me a while to comprehend what closures are.

Authored by: yaminmhd

Javascript Array Concat Example

Get real time updates directly on you device, subscribe now. Javascript Array Concat Example | Array.prototype.concat() Tutorial is today's leading topic. The concat() method is used to merge the two or more arrays. Concat() function does not modify the existing array but instead returns the new array.

Authored by: KrunalDLathiya


TypeScript: The Hard(er) Parts: Part 1

This series assumes that the reader has a reasonable understanding of JavaScript ES2015 (Learn ES2015) and a minimal understanding of TypeScript (TypeScript on 5 Minutes). If you are interested in...

Authored by: codeburst.io

TypeScript: The Hard(er) Parts: Part 2

Wrapping-up an on-boarding guide to using TypeScript for JavaScript developers. This is the second and last part of a series starting with, TypeScript: The Hard(er) Parts: Part 1 . Type Assertions Sometimes you'll end up in a situation where you'll know more about a value than TypeScript does.

Authored by: codeburst.io

TypeScript Express tutorial #3. Express error handling & validating data

Since not always everything goes perfectly, you need to expect the unexpected. To prepare for that, we cover TypeScript Express error handling and incoming data validation. Just as before, the repository for the tutorial is mwanago/express-typescript. If you find it helpful, feel free to give it a star.

Authored by: Marcin Wanago


Using Magic Email Links To Authenticate Users With Firebase 5.7.0 In Angular 7.1.2

Ben Nadel explores magic email link / passwordless authentication with Firebase. This feature leverages Firebase user management; and, allows people to authenticate in an Angular application without having to create or remember a password.

Authored by: Ben Nadel

Enabling The Second-Click Of A RouterLink Fragment Using onSameUrlNavigation Reload In Angular 7.1.3

Ben Nadel implements Vasiliy Mazhekin's advice regarding RouterLink fragments and demonstrates that the second-click of a fragment doesn't have to be polyfilled in Angular 7.1.3. Instead, you can just set the "onSameUrlNavigation" option to be "reload". This will re-trigger all the Navigation Events, which is what drives the viewport-scrolling of anchor tags.

Authored by: Ben Nadel

Boost Angular's Performance by Lazy Loading your Modules

In this article, we will talk about lazy loading in Angular. At the end of this article, we will gain a valuable insight into how to boost the performance of our Angular apps by loading our ngModules on demand. We will need several tools in this article, Node.js and NPM.

Authored by: Chidume Nnamdi


8 React Application Deployment and Hosting Options for 2019

After working in your development environment and playing around with localhost, you most likely would need to build out your react application to become production ready and deploy it for everyone to experience the react goodness in their local machines too.

Authored by: Viclotana™

React Redux Tutorial for Beginners [2018]

A complete React Redux tutorial for beginners: Learn how to build React Redux applications from scratch by following this step by step implementation of an example application ...

Authored by: Robin Wieruch

Managing Derived State from Props in React

Patterns and Anti-patterns for managing states based on Props From the React docs, the general consensus when it comes to Props vs State is as follows: Props: (short for properties) are a Component's configuration. They are received from above and immutable. State: starts with a default value when a Component mounts and then suffers from mutations in time.

Authored by: RC

Exposing a Promise-Based API from a Reactive Core (v3.0 Journal)

The whole team here is going through very rewarding times lately. Since we've started working on our new shopping cart's frontend stack, we've had the chance to dive deeper into some awesome modern techs. This rewrite is entirely done in TypeScript, decoupling the theming from a freshly baked SDK.

Authored by: Snipcart

9 React Static Site Generators for 2019

Choosing a next-generation static site generator for React! Static sites are a relic of the past originally introduced before CMSs took over the web. Today, they enjoy a successful reincarnation with static-site generators and modern frameworks such as React, Vue and Angular.

Authored by: Bit


Hosting an Aurelia App in Azure Storage Static websites

I always use ASP.NET Core to host my Aurelia apps, just in case I should need any server side functionality. In reality I often end up separating any serious API's or back-end functionality in to other Web Apps or other Function Apps.

Authored by: Andreas Wänqvist


Picking an Interactive Map Theme with Vue.js

A few weeks ago Jayson Delancey had written an awesome tutorial around switching between visual themes for a map on demand using React. This is useful when it comes to scenarios such as switching between day and night mode on a map depending on the local time or similar.

Authored by: HERE Developers at Disrupt 🌉

How to Setup, Build and Deploy Native Apps with Vue

Vue-Native is a framework written by GeekyAnts, it is a framework built to deliver cross platform mobile native applications. It is inspired by the React-native API, hence it gives a developer the ability to build cross platform applications in Vue.js using React Native's robust system.

Authored by: Scotch Development


The latest npm breach...or is it?

TL;DR: Some dude gave away his popular Node.js repo to a hacker, and that hacker added code to it that can steal your bitcoin wallet! Wanna know how that happened? Keep reading.... Short of a month ago, something quite impactful happened for the Node.js community, you might've missed it since it only affected some projects related to crypto-currency.

Authored by: Fernando Doglio

Build a Secure Node.js Application with JavaScript Async Await Using Hapi

Use Okta to store your user accounts and handle authentication, authorization, social login, SSO and more. Free developer accounts.

Authored by: Scotch Development

Libraries and Tools

5 key Redux libraries to improve code reuse

Redux is a very popular state container used in so many modern frontend JavaScript applications. It is framework agnostic and can be used in apps built either with vanilla JavaScript or any of the modern JavaScript frameworks like React, Angular, VueJS, etc.

Authored by: Glad Chinda

Speed up your MERN workflow in Atom with these Packages and Snippets

Below are a number of my favorite Atom packages and snippets that I use to speed up my workflow when programming. Since I primarily program in the MERN stack ( MongoDB, Express.js, React.js, Node.js), a few of these packages are specific to JavaScript/React development.

Authored by: Bit

5 Ways To Improve Development With Visual Studio Code

Visual Studio Code is extremely flexible and powerful. By learning the ins and outs, you can greatly improve your speed, efficiency, and process as a developer. In this article, we'll look at the top 5 ways to do so! Check out Learn Visual Studio Code to learn everything you need to know about Visual Studio Code!

Authored by: Scotch Development

Build a Beautiful Website with VuePress and Tailwind.css

Vue Vixens Recently I've been working on web sites. Big deal, right? As a web developer, it's kind of my thing. For me, though, this is a change in direction.

Authored by: The Practical Dev


The Definitive Guide To Protecting Your Eyes For Developers👀

Around this time 2 years ago, I was working day and night with my team to release a product. We used to sit more than 12 hours in front of a screen. The whole thing was quite exciting for us. But when you are young, you often neglect your health to seek thrill.

Authored by: sarthakSharma

Cache API 101

A cache is a form of storage for "requests" and "responses". When you visited this page, you made a request for /cache-api-101. The response to that request was the HTML document you are viewing in your browser right now. The cache API allows us to store these requests and responses

Authored by: Ire Aderinokun