JSK Weekly - February 14, 2018

We have plenty of great articles this week! Starting with excellent Brandon Morelli's articles aimed mostly at novice JavaScript developers "JavaScript Functions — Understanding The Basics" and "JavaScript ES6— The Spread Syntax (…)" We believe that advanced developers can learn something new from these articles.

If you ever wanted to "Run Angular CLI repos directly in your browser" fast and easy, Eric Simons offers the solution in the form of "StackBlitz" a lightning-fast online IDE.

React fans can learn a great deal about "Infinite scroll techniques in React" written by Ogundipe Samuel.

Docker is increasingly popular these days. As a JavaScript developer, we can greatly benefit from a knowledge that will let us utilize all the benefits that Docker brings. Make sure not to miss out "An Exhaustive Guide to Writing Dockerfiles for Node.js Web Apps" by Praveen Durairaj.


JavaScript Functions - Understanding The Basics

What is a Function? A function is a subprogram designed to perform a particular task. Functions are executed when they are called. This is known as invoking a function. Values can be passed into functions and used within the function. Functions return a value.

Authored by: Brandon Morelli

A Short History of WaSP and Why Web Standards Matter

In August of 2013, Aaron Gustafson posted to the WaSP blog. He had a bittersweet message for a community that he had helped lead: Thanks to the hard work of countless WaSP members and supporters (like you), Tim Berners-Lee's vision of the web as an open, accessible, and universal community is largely the reality.

Authored by: CSS-Tricks

Async Await Saves The Day (Sort Of)

No human is an island, and no chunk of code, either. Async/Await is awesome, but it isn't going to replace JavaScript promises in our asynchronous world. Async/Await relies heavily on promises, so if you are shaky in what they are or how to use them, start by checking out my Sixteen Minute Guide to JavaScript Promises.

Authored by: codeburst.io

Evolution of Observable

Here I am not going to explain you, what is Observable and why do we need it? Instead will take you through the evolution of Observable from traditional methods and will give you an overview of Observable. If you are an ace Front-end developer you can skip this now.

Authored by: Madhankumar

Why Frameworks matter

Newcomers to web development often start out with React, Vue or Angular far too early after they have learned vanilla JavaScript.

Authored by: Robin Wieruch


JavaScript ES6- The Spread Syntax (...)

"Expand" your JavaScript knowledge with the Spread Syntax The Spread Syntax The spread syntax is simply three dots: ... It allows an iterable to expand in places where 0+ arguments are expected. Definitions are tough without context. Lets explore some different use cases to help understand what this means.

Authored by: Brandon Morelli

ES proposal: `String.prototype.matchAll`

The proposal "`String.prototype.matchAll`" by Jordan Harband is currently at stage 3. This blog post explains how it works.

Authored by: Axel Rauschmayer

Using Default Parameters in ES6

Enabling default parameter values in JavaScript functions is nothing new and ES6 now includes this as a feature. This article discusses some of the subtleties and gotchas in relation to default parameters.

Authored by: Louis Lazaris

Multiple Inheritance in JS

Instance Objects Objects created by invoking a constructor are instances of that constructor. All instances have their [[Prototype]] property set to the object pointed by the constructor's .prototype property during instantiation. This means that modifying a constructor's prototype ripple's through the instances, but overwriting the constructor's .prototype property only affects new instances.

Authored by: Shirsh Zibbu

Introduction to ES 6 Classes

In the modern age of programming, Object Oriented Programming (OOP) is everywhere. In Object Oriented Programming, paradigm class plays the most fundamental role. Classes are blueprints for objects and they describe how the object will work and behave. JavaScript is a prototype based language and thus not fully object oriented.

Authored by: DiscoverSDK

Advancing into ES6 Classes

In my previous post, I introduced you to the concept of classes in EcmaScript 6 . In this article we will dig deeper into classes to learn more. Without further ado, let's begin. In object oriented programming, getters are the methods used to retrieve value from attributes (or values generated dynamically) and setters are used to set the value of the attributes.

Authored by: DiscoverSDK


TypeScript 2.6: JSX Fragment Syntax

TypeScript 2.6 added support for JSX fragments. Within .tsx files, you can now use the new ... syntax to create a fragment.

Authored by: Marius Schulz


Run Angular CLI repos directly in your browser

Github is the source of truth for most Angular demos, examples, prototypes, and " real world" projects. However, downloading & initializing these projects locally can take a looooong time- which makes them difficult to share with others. 😞 This is precisely why we created StackBlitz, a lightning fast online IDE that allows you to live edit Angular CLI projects in-browser.

Authored by: Eric Simons

Angular 5 HTTP Form Inputs & RxJS

Angular 5 Form Inputs Whatever framework you are using, forms are a key component of any website or web application. They provide us with one of the most important aspects of user interaction.

Authored by: Gareth Dunne

Use Angular To Create A Cross-Platform Stellar XLM Desktop Wallet

With Android and iOS so obtainable and development so easy, people often forget the importance of desktop applications. I have a phone and tablet, but I depend on my desktop applications much more. However, the development of these applications are not difficult. With frameworks like Electron, developers can create cross-platform desktop applications with JavaScript and HTML.

Authored by: Nic Raboy

Creating A Dynamic Favicon Service In Angular 5.2.4

Ben Nadel looks at how you might implement a Favicons service in your Angular 5.2.4 application that allows different components to activate different favicons in the browser. And, do so in a way that doesn't tightly couple the components to the implementation details of the favicon's injected Link element.

Authored by: Ben Nadel

Creating Your First Simple Angular Application

In the previous article I covered how to create a new project with Angular CLI and start a very simple Angular web application. We did not write a single line of code and did not modify anything. In this article we will start modifying our very minimal Angular application and make an application of our own.

Authored by: DiscoverSDK

Testing Reducers in NGRX Store

Next in this series, we're going to learn how to test Reducers in NGRX Store. In the previous testing post we explored Testing Actions. As we know, Reducers are just pure functions. This makes it extremely easy to test your reducers - which control state changes - and respond to actions accordingly.

Authored by: Todd Motto


Infinite scroll techniques In React

Infinite scrolling is a web design technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination. Content is often loaded asynchronously by making a request to the server. Often times this can improve the user experience on a website. But not always.

Authored by: Ogundipe Samuel Ayo

Simple Authorization with React-Native StackNavigator using React Navigation

Ok, making sense so far? Good.Time to create some views for our Sign In / Logout so we can show how this Stack Navigator really works. An easy Sign-In form can be made using the package "tcomb-form-native". npm install --save tcomb-form-native They have great documentation on how to use the package and customize it to your needs.

Authored by: Ricky Peters

Bringing the blockchain to React Native

TLDR: Despite the fact of the non existence of an Ethereum Wallet or Browser for React Native to interact with cross platform decentralized mobile apps, it’s possible bring the blockchain to React Native.

Authored by: locropulenton

Get started with React Native and Expo in minutes

Expo claims to be the fastest way to build an app. In conjunction with React Native's flexibility and extensibility it creates a great toolkit for mobile app developers. In the one of the previous articles I have answered the question "Why is React Native worth learning?"

Authored by: Mateusz Sojda

Getting started with React and Parcel - RWieruch

This guide helps you to setup React with Parcel from 0 to 1. Learn how to use Parcel and Babel in React.js with zero-configuration. Setup your own boilerplate application ...

Authored by: Robin Wieruch

React Architecture Confessions

Ben McCormick's blog on JavaScript and Web Development

Authored by: Ben McCormick


Aurelia Users Community Space Guides

Today, I'd like to invite a long-time Aurelia Community Member, Nikolaj Ivancic, to share a little bit about the "AUCS" community project that he's leading to help improve Aurelia's documentation. Take it away Nik! The Aurelia Users Community Space (AUCS) Guides Project is the result of an effort by the Aurelia Users Community to address several important issues.

Authored by: Rob Eisenberg


Drupal & Vue.js: how to work without jQuery

Starting with the 5th version, Drupal has jQuery out of the box. It was an awesome tool for developers. But nowadays we face completely different problems that this library can not solve. Why do I suggest you paying attention to Vue.js? I believe it is not another framework.

Authored by: ADCI Solutions

Using Vue as an Angular alternative for Ionic: Parent-Children Communication

Follow @MatthieuDrula Modern JavaScript applications are generally composed of Nested Components . It's generally one Parent Component at the top delegating the work to its . They get some properties from the parent, do some work, notify the parent that something changed, which in turn updates the properties accordingly and finally updates the children.

Authored by: Matthieu Drula


An Exhaustive Guide to Writing Dockerfiles for Node.js Web Apps

This post is filled with examples ranging from a simple Dockerfile to multistage production builds for Node.js web apps. Here's a quick summary of what this guide covers: Using an appropriate base image (carbon for dev, alpine for production). Using nodemon for hot reloading during development.

Authored by: Praveen Durairaj

Use OpenWhisk for FaaS with Node.js and Couchbase NoSQL

If you've been keeping up with my content, you'll remember that I had written an article titled, Use AWS Lambda and API Gateway with Node.js and Couchbase NoSQL. In this article we had explored using Amazon's Serverless services to create Lambda functions that interact with Couchbase, our NoSQL database.

Authored by: Nic Raboy

Localhost Explained By Starting A Microbrewery

If you can understand the path from brewing beer in your kitchen to starting your very own microbrewery, then you can understand the basics of web servers. When I got started with learning web development, I first learned how to use HTML, CSS and JavaScript on the front-end.

Authored by: CodeAnalogies

A Simple Node App to Generate Random Addresses and Geocode Them - Geocoding Results with the Google Maps API

Our address-generator CLI app is now capable of grabbing a random US address. We just need to geocode that address. In this post, we'll leverage the Google Map Geocoding API to do exactly that! If you're just jumping on, you can check out the previous parts here: Part 1, Part 2, and Part 3.

Authored by: Matt Honeycutt

Libraries and Tools

CanJS 4.0

If you are brand new to CanJS, we suggest reading its technology overview for background information on what CanJS does and how it works. Dear JavaScript Community, The humble DoneJS core team is proud to present CanJS 4.0. Like previous major releases, it represents a unique enrichment of CanJS's vision.

Authored by: Bitovi

New in Galaxy: custom base images and custom logging!

We're excited to announce new Galaxy features and docs which provide more flexibility for our advanced users. Galaxy provides a zero-configuration way to deploy your Meteor apps to the cloud. But sometimes you need a little configuration.

Authored by: Meteor

Debugging a Create React App with VS Code

In this post (and the above 4 minute embedded video) we'll look at how to configure Visual Studio Code to debug React Components and Jest Unit Tests inside a web application that was created by create-react-app .

Authored by: Elijah Manor

3 key insights that make D3.js easy to learn

The other day somebody asked me how to learn D3.js from scratch. I quipped that it took me writing a book to really learn it. It's one hell ofa library. Most people don't go that far. They don't have to.

Authored by: Swizec

How to solve the required module not found error in flow.js

I love typescript. But after I gave flow a try, it really makes things easier in terms of react related thing. It could handle the redux immutable check and easy to start. But one problem is that sometimes you just can't find type definition for the 3rd party libs as oppose to typescript, which is already widely adopted nowadays.

Authored by: Albert Gao


UI Test Automation Frameworks Showdown: TestCafé versus Nightwatch.js

By Christine Zierold, Freelance QA Engineer Want to learn a little more about TestCafé and Nightwatch.js? Christine Zierold compares and contrasts the two UI Test Automation frameworks to help explain the benefits and drawbacks of each. What is TestCafé? TestCafé is an end-to-end testing framework, written in JavaScript (JS) or Typescript.

Authored by: PQA Testing

Property Based Testing in Angular with jsVerify

Several weeks ago, I mentioned that I've been playing around with Property Based Testing. In particular, I've been using it with my Angular code. The framework I've chosen is jsVerify because it seemed like the most straight forward of the available tools and it has a documented way of integrating with Jasmine, which Angular test use by default.

Authored by: Dave Bush

Testing TypeScript with Intern 4

Intern is a popular JavaScript testing framework with an extensive feature set. While Intern has traditionally been focused on testing applications written in standard JavaScript, it has also had great support for TypeScript.

Authored by: SitePen

Functional Programming

The faux fears of Functional Programming

Ahhhh I can already hear you screaming and sighing: " More post about Functional Programming, what is the big deal about it? Why should I change my way of thinking, now? " Try to turn those questions around and ask yourself : we are talking about programming here, maybe because it will help you?

Authored by: JS-Republic

Use function composition in JavaScript

Prerequisite: I use currying in this post, so if you don't know about that, I encourage you to read my previous post: Currying in Javascript Function composition is a mechanism of combining multiple simple functions to build a more complicated one. The result of each function is passed to the next one.

Authored by: Codementor


Shipping vs. Fiddling

I've recently switched to a new computer and did a clean setup. A few days ago I needed to do a tiny update to my home page which is built with Jekyll. Jekyll is a static site generator built with Ruby, so had to install all required dependencies before I could change anything.

Authored by: codeburst.io

Create An Email Subscription Popup With jQuery

As you'll recall, The Polyglot Developer was once using WordPress. Back when I was using WordPress, I was using a plugin called Icegram, which is similar to SumoMe and OptinMonster, but it allowed me to present popups after a period of time to prompt users to subscribe to my newsletter.

Authored by: Nic Raboy

Direction Aware Hover Effects

This is a particular design trick that never fails to catch people's eye! I don't know the exact history of who-thought-of-what first and all that, but I know I have seen a number of implementations of it over the years. I figured I'd round a few of them up here.

Authored by: Chris Coyier

Journey to create a web-app to load under 50KB on first-load: Roadblocks and Plans

So after the mini-success of having a less than 5KB library to allow easier creation of web components without much overhead, I have stumbled upon a roadblock. But before that roadblock, I want to tell you my plan The plan is to create a working complex, mobile-responsive, offline-ready Single-Page-App that uses a mixture of re-usable and project-only web components that will load under 50KB using the PRPL pattern.

Authored by: tjmonsi

Building WebApp for the future - codeburst

Ever since the inception of Progressive Web App (PWA), I was obsessed with building a super fast webapp, after few months of rigorous development we launched our company's first ever mobile webapp, LifCare Lite, so I would like to share some of my experience while building it.

Authored by: codeburst.io