JSK Weekly - October 31, 2018

This week we had a surge of React stories, triggered by the latest React release (16.6) and next version preview (16.7). We picked up few of them talking about new features like React.lazy(), React Suspense and React hooks. If React is your thing, make sure you take a look.

Debugging JavaScript code in the browser is a thing we were all doing at some point. Most of web developers start with simple console.log() statements in order to figure out what's wrong with their code, but today, browsers are equipped with powerful debugging tools. Parag Zaveri has an excellent story about browser debuggers and that story is our pick of the week!

Also check out the story "why branching in git is wrong" by Adrián Norte. It's a short and controversial piece that has stirred quite a bit of talk in community. Just check all the comments that the story has generated.


How to stop using console.log() and start using your browser's debugger

When I started my journey to become a software developer, I definitely ran into my fair share of bumps in the road. One of the most common struggles that most new developers face is debugging.

Authored by: Parag Zaveri

why branching on git is wrong

Lots of people often code using feature branching on git to avoid the hassle of conflicts while doing pull and/or to avoid pushing incomplete features that would break the system for all the team. I find these reasons to be baseless and some even harmful to the development cicle.

Authored by: Adrián Norte

Server to Client

Before anything can happen in a browser, it must first know where to go. There are multiple ways to get somewhere: entering a URL in the address bar, clicking (or tapping) on a link on a page or in another app, or clicking on a favorite.

Authored by: A List Apart

Are Web Components a thing?

Talking to people that are not really into Web Components I found out that they feel like Web Components are not going anywhere. This probably because there was a huge hype around them since, let's say, a year ago but not that much over the past months.

Authored by: Maurizio Mangione

The State Of JavaScript

A deep-dive into the state of JavaScript

Authored by: Addy Osmani


Lets Build Web Components! Part 3: Vanilla Components

You don't need a fancy framework or complicated tools to design components and build apps, you just need your web browser!

Authored by: Codementor

JavaScript Standardization - An Interview with Jory Burson

One of the great things about running events is that, from time to time, you get the opportunity to invite people you admire to speak. For me, that is the case with Jory Burson, who will be one of the day 2 keynote speakers at jsMobileConf in Boston this October 25-26.

Authored by: Brian Rinaldi

3 JavaScript Performance Mistakes You Should Stop Doing

What if I told you everything you knew was a lie, what will happen if you learn some of the key features our beloved ECMAScript have published over the recent years, are actually dangerous performance traps, sugar coated in a slick looking one line callback functional code?

Authored by: Yotam Kadishay

Type System in JavaScript: What It Is and Why It Matters

JavaScript has been the language of the Web for long. As more contributors enter the scene, adopting a type system becomes vital for clean, functional code.

Authored by: Jscrambler

4 Uses of JavaScript's Array.map() You Should Know

From the classic forloop to the forEach() method, various techniques and methods used to iterate through datasets abound JavaScript. However, one of the more popular methods is the .map() method. .map() creates an array from calling a specific function on each item in the parent array.

Authored by: Scotch Development


Using Create React App v2 and TypeScript

React and TypeScript are two powerful tools. Let's combine them to make an even better dev environment with Create React App v2.

Authored by: Scotch Development

TypeScript-aware React hooks for global state

React Hooks API is a new proposal for React v16.7. It enables writing all components as functions with full functionality. You can develop "custom hooks" to add a new functionality.

Authored by: Daishi Kato


Understanding Change Detection Strategies in Angular

Greatly optimize your Angular app performance using smart change detection strategies. Change Detection and its strategies ( OnPush and Default) have been written about in various articles in the web but no one have come close to provide comprehensive and in-depth information about the concepts, they mostly focus on the use cases.

Authored by: Chidume Nnamdi

Angular 7 Forms Tutorial Example

Get real time updates directly on you device, subscribe now. Angular 7 Forms Tutorial Example is today's leading topic. For this example, we will use Reactive forms. Reactive forms provide a model-driven approach to handling form inputs whose values change over time.

Authored by: KrunalDLathiya

How to Install Angular CLI for Local Development

In this tutorial, I am going to tell you how to install Angular CLI step by step and create our first Angular project. To create the development environment on your system, you need Node.js, npm package manager and typescript. We have to install these step by step.

Authored by: JavaScript Kicks

Trying To Create A Message Bus Using An RxJS Subject In Angular 6.1.10

Ben Nadel experiments with TypeScript, type safety, discriminated unions, and RxJS as he tries to build a message bus using an RxJS Subject in Angular 6.1.10. What he has come up with appears to provide a good degree of type safety while also keeping the code fairly simple.

Authored by: Ben Nadel

Isoline Routing in an Angular Application using the HERE Routing API

Have you ever needed to search for locations that were in range to a starting point based on certain criteria? For example, maybe you wanted to find all the Starbucks that are within a driving distance of 5 minutes or less based on current traffic conditions.

Authored by: HERE Developers at Disrupt 🌉


What's New in React v16.6

Less than 2 months since the initial release of React v16.5, the great folks over on the React Team have bestowed upon us the 101st release of React. This latest release introduces some new API additions in React.lazy(), React.memo(), and contextType and even introduces a new life cycle method, getDerivedStateFromError.

Authored by: Josh Sherman

Silky Smooth Menu Animation in React

One of the principals of material design is Expressing Continuity, which teaches us that the motion is not just a fancy feature we add to our app or whimsical touch to the look and feel of the app.

Authored by: ahmed mahmoud

React 16.6: React.memo() for Functional Components Rendering Control

React 16.6.0 is released! With it comes a host of new features including the two big ones: React.memo() React.lazy(): Code-splitting and lazy-loading with React Suspense We'll focus on React.memo() for this article and React.lazy() and Suspense in an upcoming larger article. React.memo() is similar to PureComponent in that it will help us control when our components rerender.

Authored by: Scotch Development

Understanding React Render Props and HOC

A detailed introduction to Render Props and Higher-Order Components in React If you have been doing some React development recently, you must have come across terms like HOCs and Render Props. In this article, we'll go deep into both these pattern to understand why we need them and how we can correctly use them to build better react applications.

Authored by: Aditya Agarwal

Add a touch of Suspense to your web app with React.lazy()

We're all eagerly awaiting the arrival of React 17, which promises the much-anticipated Suspense and Time Splitting features. In the meantime, the React team have been generous enough to give us a sample of what's in store, in the latest 'minor' update.

Authored by: Andrico Karoulla

Understanding hooks in React

An introduction to React 16.7 hooks, with examples. React is the most powerful UI library. The team is improving performance and the development experience every day by adding amazing features, which ultimately help developers build amazing apps. If you scrolled twitter last few days, probably you saw most react developers are celebrating the introduction of the awesome feature called Hooks.

Authored by: Bit

What are React Hooks?

React Hooks are a way to use state and side-effects in React function components. They manage local state, fetch data from a API, interact with the DOM API and Browser API.

Authored by: Robin Wieruch


Voice-Controlled Web Visualizations with Vue.js and Machine Learning

In this tutorial, we'll pair Vue.js, three.js and LUIS (Cognitive Services) to create a voice-controlled web visualization. Why would we need to use voice recognition? What problem might something like this solve? A while ago I was getting on a bus in Chicago. The bus driver didn't see me and closed the door on my wrist.

Authored by: Sarah Drasner

Mastering Charts in VueJS

For this article, we are going to assume you have some background in Vue.js. If you do not run through some of my previous tutorials here. Let's start with a clean Vue app using the CLI. $ vue init webpack mastering-charts-vue Once you set up your app (the default values are fine) you will need to install the v-charts-plugin NPM module.

Authored by: Brian Greig

Build a Single-Page App with Go and Vue

Learn how to build comprehensive single-page apps using Go and Vue.

Authored by: Kleber Correia

Vue-native Infinite scroll

This post is aimed to show you how to implement infinite scroll in Vue-native. Without doubts, infinite scroll is your best bet when it comes to paginating large data set, especially in mobile apps. It's exciting to know that infinite scroll can be implemented in a few easy steps with Vue-native Install vue-native cli if it's not installed.

Authored by: Samuel James


Node v11.0.0 (Current)

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

Authored by: node js

Node Package Manager (NPM) Explained by Directing A Movie

Did you know that the initial version of Node.js was written by just one programmer, Ryan Dahl, in 2009? Today, in 2018, millions of developers have used Node.js to create the back-end for their web applications. But, Node has relied on an active open-source community to build out many specialized packages within the Node Package Manager, or NPM.

Authored by: Codementor

Top 10 Node JS Framework

Hapi.js is a Node.js web framework used to build application program interfaces. The framework has a solid plugin system. Some of its features include: Socket.io is a Node.js server framework used to...

Authored by: IssueHunt

Build Secure Node Authentication with Passport.js & OpenID Connect

We walk through using an identity provider with the generic passport-openidconnect package to build secure Node authentication and user management.

Authored by: leebrandt

Use GitHub instead of NPM

How to require private NPM modules straight from GitHub without publishing them to NPM. Let's say you have some JavaScript code you want to share among several projects, but you don't want to create a private NPM package yet. Maybe you are just experimenting, and setting things up takes effort.

Authored by: Gleb Bahmutov

Libraries and Tools

Hand roll charts with D3 like you actually know what you're doing

Charts! My least favorite subject besides Social Studies. But you just won't get very far in this industry before someone wants you to make a chart. I don't know what it is with people and charts, but apparently we can't have a civilization without a bar chart showing Maggie's sales for last month so by ALL MEANS - let's make a chart.

Authored by: Burke H✪lland

9 Bootstrap UI Component Libraries for 2018

Best UI component libraries and frameworks implementing Bootstrap's CSS framework in React, Vue and Angular. Discover React bootstrap, reactstrap, vuestrap, vue-bootstrap, NG-bootsrap and much more...

Authored by: Bit

Storybook 4.0 is here!

Users and addon authors now have a standard format to configure a story thanks to the new parameters API by Tom Coleman.

Authored by: Norbert de Langen


Walkthrough: Create and Run API Automation Script with Cucumber

During this walkthrough, you will create a BDD automation script with Node.js and Cucumber.js, and the script is used to test RESTful API services.

Authored by: Codementor

Functional Programming

Understanding Higher-Order Functions in JavaScript

Learn What Higher-Order Functions are and how to use them in JavaScript If you are learning JavaScript, you must have come across the term Higher-Order Functions. A lthoughit may sound complicated, it isn't. What makes JavaScript suitable for functional programming is that it accepts Higher-Order Functions. Higher-Order Functions are extensively used in JavaScript.

Authored by: Sukhjinder Arora

Functional React. Is it possible?

Here is our Farm Component, written as a class. I've exaggerated a bit to prove a point - how often are you actually implementing shouldComponentUpdate ?- but otherwise it's a pretty typical component. And this is the same component, written functionally. Note that I use some helpers from the aforementioned library, recompose.

Authored by: James Adams

Pure functional components in React

This article focuses on the new experimental React.pure() API, which has the likelihood of being part of the next stable release of the React framework.

Authored by: Glad Chinda


Google Chrome Desktop Progressive Web App Add to Homescreen Capabilities

Users can be prompted to add Progressive Web Apps to their desktop homescreens. What are the benefits? How can your PWA qualifiy to prompt the user? How does the desktop experience differ from Windows applications and mobile add to homescreen?

Authored by: Chris Love

Firefox 63 - Tricks and Treats!

It's that time of the year again- when we put on costumes and pass out goodies to all. It's Firefox release week! Join me for a spook-tacular look at the latest goodies shipping this release. After a rather long gestation, I'm pleased to announce that support for modern Web Components APIs has shipped in Firefox!

Authored by: pumpkin potch

Durable Functions: Fan Out Fan In Patterns

This post is a collaboration between myself and my awesome coworker, Maxime Rouiller. Durable Functions? Wat. If you're new to Durable, I suggest you start here with this post that covers all the essentials so that you can properly dive in.

Authored by: Sarah Drasner

The Web Accessibility Introduction I Wish I Had

Hello again, past self. I'm sending you another message from a future where it's finally getting colder, you got the guts to go to therapy, and that thing under the floorboards somehow escaped. Most importantly, your future job responsibilities focus much more focus on web accessibility.

Authored by: Max Antonucci

Dweb: Identity for the Decentralized Web with IndieAuth

In the Dweb series, we are covering projects that explore what is possible when the web becomes decentralized or distributed. These projects aren't affiliated with Mozilla, and some of them rewrite the rules of how we think about a web browser.

Authored by: Aaron Parecki

Understanding JSON Web Token Authentication

A hands-on guide to JSON Web Token Authentications In this article, we will take a look at what JSON Web Token is all about. We will start with a basic explanation of JWT, then look at its structure, and finally create a simple server that will take some data and insert it into a JWT.

Authored by: Rajat S ⌨️