JSK Weekly - August 29, 2018

This week we recommend you to find out "Why is a Java guy so excited about Node.js and JavaScript?" by David Herron.

If you are a novice JavaScript developer, make sure to check out "Javascript Fundamentals: `this` keyword" by Seva Zaikov.

Angular users will enjoy the first part of Rajat S's article "Building a Search-Engine Optimized PWA with Angular" while React folks can learn a great deal about project structuring in "Structuring a React Project — a Definitive Guide" by Aditya Agarwal. Of course, Vue developers are not forgotten. We are recommending "Errors handling for Vue class components" by Taras Batenkov.

Finally, we have one announcement. Babel 7 is released! You can read all about it on the official blog by Henry Zhu.


Implementing single file Web Components

Probably everyone who knows the Vue framework also heard about its single file components. This super simple idea allows web developers to define the entire code of a component in one file. It's such a useful solution that an initiative to include this mechanism in browsers has already appeared.

Authored by: CKSource

Staying on top of new Javascript features

(Cover photo by Andrew Charney) With modern JS tooling, we have an opportunity to use Javascript features before they are implemented in browsers or node. However, not all features are equal. Some are more likely than others to be integrated into the language. Some will undergo significant changes before being added, and some will be dropped altogether.

Authored by: Carl Vitullo

A native lazy load for the web platform

A new Chrome feature dubbed "Blink LazyLoad" is designed to dramatically improve performance by deferring the load of below-the-fold images and third-party s. The goals of this bold experiment are to improve the overall render speed of content that appears within a user's viewport (also known as above-the-fold), as well as, reduce network data and memory usage.

Authored by: CSS-Tricks

Reactive Streams are so simple

Let me start with a simple comparison, imagine stream as a tunnel which helps the consumer to get the data from the producer. Purpose of this article is to cover why and what is streams, whats the mechanism goes under the hood. Agenda Why Stream What is Stream Core concepts of Stream Why?

Authored by: codeburst.io

Creating a REST API: Module Based Pagination, Sorting, and Filtering

I previously demonstrated a manual approach to adding pagination, sorting, and filtering capabilities to a REST API. In this post, I'll show you how to use a module to simplify and standardize these operations. Getting started To demonstrate the use of a module, I created one called QueryWrap.

Authored by: Dan McGhan


Javascript Fundamentals: `this` keyword

The blog of Seva Zaikov

Authored by: bloomca

3 Refreshing Features in JavaScript ECMAScript 6 (ES6)

ECMAScript (or ES) is the standardized scripting language for many programming languages, including JavaScript. The previous version of the scripting language, ES5, compelled developers to include several walkarounds before delivering quality in their applications.

Authored by: codeburst.io

'this' and arrow functions

Arrow functions were introduced in ES6 as a new syntax for writing Javascript functions. Thanks to their short syntax, they encourage the use of small functions, which make code look cleaner (and () => just looks cooler 😄). As a beginner just getting to wrap my head around ES6 syntax, I began using arrow functions everywhere without really understanding how they worked.

Authored by: The Practical Dev

JavaScript - Closures and Scope

Looking at JavaScript today, it can be scary as a beginner. People talk about watching out for all the little quirks or "beginner mistakes" people can make. I think one of the most misunderstood topics, that seems to have a lot of mystery for some people, that people love to interview about, is closures and scope.

Authored by: codeburst.io

Javascript array iteration with 'some()' and 'every()'

If you're using an array in your code, chances are, you'll need to iterate over the values in the array. There's a couple of ways you can do that, some better and more efficient than others depending on what you want to accomplish. For this post, I'll focus on two ways: some() and every().

Authored by: The Practical Dev

Sorting Arrays in Javascript | Array sort() Tutorial Example

Get real time updates directly on you device, subscribe now. Sorting Arrays in Javascript | Array sort() Tutorial Example is today's leading topic. The sort() method available on the Array prototype allows you to sort the elements of an array. It accepts an optional callback function that you could use to tailor the sorting mechanism to your specific needs.

Authored by: KrunalDLathiya


Building a Search-Engine Optimized PWA with Angular - Part 1

Instead of wasting time building the layout of our app from scratch, we can just use the module ui command to tell Angular to create a basic application layout for us. This layout will consist a component for header, footer, and the body of the layout.

Authored by: Rajat S ⌨️

Defining Dynamic AJAX-Driven Service Providers Using APP_INITIALIZER In Angular 6.1.4

Ben Nadel looks at using the APP_INITIALIZER multi-provider as a means to load remote configuration data using AJAX (Asynchronous JavaScript and JSON); then, use that configuration data to dynamically define Service Providers for use in Angular's dependency-injection container.

Authored by: Ben Nadel

Building Your First Angular App

To avoid confusion, Angular 1 and all its releases are combined in a short name AngularJS, and Angular 2 and all subsequent versions are usually referred to simply as Angular. As a matter of fact, Angular 6 is already released.

Authored by: JZ's JavaScript Corner

Angular 6: "ng test" with Jest in 3 minutes

Today I'm going to show you how to setup your Angular CLI workspace to work with Jest while keeping it clear of boilerplate code. Although you run your unit tests with Jest, Protractor (e2e tests)...

Authored by: Evgeny Barabanov


Structuring a React Project - a Definitive Guide

React's ecosystem aims to give users complete control over everything, without being tied to a any particular way of doing things. Still, while some common patterns and conventions have been established recently, one thing that the React community has stayed away from is standardizing a unified project structure.

Authored by: JavaScript Kicks

Learning React - Exercise control over your component state with Typescript

The last post left us with a bit of a problem. Although our user component retrieves and displays data from ASP.NET API, it also flashes up some hard-coded data before the real data shows up. It seems like we could just remove the hard-coded data so let's try that...

Authored by: Jon Hilton

Accessing React State right after setting it

As I have been browsing Stack Overflow questions, I've noticed that many bugs are due to trying to access a state value after setting it. An example question on Stack Overflow. I've stumbled many times for being unaware of setState being an asynchronous operation. How do we access the state value right after setting it then?

Authored by: Sung Kim

A sensible approach to Cross platform development with React and React Native

The ability to develop simultaneously for Android, iOS and recently Windows Phone is often advertised as the biggest selling point for businesses considering adopting React Native. Arguably an even bigger and often overlooked opportunity this tech stack brings is the ability to extend this cross platform ecosystem to web with React.

Authored by: The Practical Dev


Errors handling for Vue class components

In general, errors handling in JavaScript is not a very complicated topic, but it is very useful. When different errors occur during your application's life, break it and leave the user bewildered by...

Authored by: JavaScript Kicks

Vue.js SEO-Friendly SPAs: Tips, Tools & Prerender Example

Learn how to build a Vue.js SEO-friendly SPA with prerendering, server-side rendering & other general SEO tips. Live prerender demo included!

Authored by: Snipcart


Why is a Java guy so excited about Node.js and JavaScript?

Shouldn't someone who worked 10+ years in the Java SE team at Sun Microsystems bleed Java bytecodes and be instantiating abstract interfaces until the last breath? For this former Java SE team member, learning the Node.js platform in 2011 was a breath of fresh air.

Authored by: David Herron

A complete Apollo Server with GraphQL and Express Tutorial

Learn how to build a fully working GraphQL server with Apollo Server and Express with authentication, authorization, pagination, subscription, database access ...

Authored by: Robin Wieruch

Understanding a RESTful API using Node.js and TypeScript

In this post we will learn to make a simple REST API with a .json file as database. Most of the tutorials out there teach you to build a TODO app using Node.js, Express.js with JavaScript. To learn something new, we will use TypeScript and make a pokemon API to read data from json file.

Authored by: Priyesh Patel

Libraries and Tools

Babel 7 Released · Babel

After almost 2 years, 4k commits, over 50 pre-releases, and a lot of help we are excited to announce the release of Babel 7. It's been almost [3 years](https://babeljs.io/blog/2015/10/29/6.0.0) since the release of Babel 6! There's a lot of moving parts so please bear with us in the first weeks of release.

Authored by: Babel

ReasonML Standard Library

Hello again, and welcome back to another installment in our series on learning ReasonML. So far we have learned about what ReasonML is, what its place is in the developer ecosystem, and we have learned about the fundamentals of coding with the language itself.

Authored by: SmoothTerminal

Introduction to the basics of Next.js

First part to the basics of next.js

Authored by: aurel kurtula

The not fancy CLI output of pnpm

pnpm is a JavaScript package manager that differs from npm and Yarn in many ways. If you haven't heard about it yet, I recommend checking it out. In this article, I would love to write about the design system that we use to report during installation.

Authored by: Zoltan K.


Types of JavaScript tests. Basics of unit testing with Jest

1. JavaScript testing tutorial - part one. Explaining types of tests. Basics of unit testing with Jest Hello! Today we start another big series, which is about JavaScript testing. There are various different types of tests and we will start by explaining some of them.

Authored by: Marcin Wanago


How To Minify CSS, JS, and HTML?

Google is very strict when it comes to ranking websites. Not only your site should be SEO optimized, but also adhere to the strict loading times for optimal user experience. It all starts when a visitor visits your website for the first time.

Authored by: codeburst.io


I'm not sure many web developers can get away without visiting the command line. As for me, I've been using the command line since 1997, first at university when I felt both super cool l33t-hacker and simultaneously utterly out of my depth.

Authored by: JavaScript Kicks

Programmatically create images with the CSS Paint API

The CSS Paint API is a modern web platform feature to programmatically create images in JavaScript which are rendered to the page when referenced by CSS. You create images using the Canvas API, an API with which you may already be familiar. You can reference image URLs in CSS.

Authored by: SitePen

The Future Methods .then() And .error() Are Blocking In ColdFusion 2018

The other day, I read that a new version of ColdFusion has been release: ColdFusion 2018. And, while perusing the "What's New" list, I happened to see that asynchronous programming with "Futures" was one of the newly-introduced features. I've never used Futures in Java before; though, I have used Promises in JavaScript quite extensively.

Authored by: Ben Nadel

JavaScript Charts: Comparing D3 to Kendo UI for Data Visualization

A mini-tutorial to show how to create simple JavaScript bar charts using D3 vs using Kendo UI.

Authored by: Telerik