JSK Weekly - October 17, 2018

If you think that you need some big and fancy framework to build SPA (single page application), think again. Rishav Sharan explains a process of "Making a Single Page App in ye good olde JS (ES6)". Make sure to read it and discover the benefits of this approach and learn a few things along the way.

If you like some help with "Understanding Currying in JavaScript", don't miss this great article by Chidume Nnamdi.

React developers will surely enjoy reading about "11 React UI Component Playgrounds for 2018" by Jonathan Saring.

Finally, we highly recommend "Basic Functional Programming Patterns in JavaScript" by Nested Software. Make sure to check it out and find out why functional programming is gaining in popularity over time.


Making a Single Page App in ye good olde JS (ES6)

Guide on creating a basic blog like single page app (SPA) using no frontend frameworks but just plain javascript (ES6). You do not need React. You do not need Vue. All you need is a editor and basic knowledge of modern javascript.

Authored by: The Practical Dev

SOLID Principles every Developer Should Know

Object-Oriented type of programming brought a new design to software development. This enables developers to combine data with the same purpose/functionality in one class to deal with the sole purpose there, regardless of the entire application. But, this Object-oriented programming doesn't prevent confusing or unmaintainable programs. As such, five guidelines were developed by Robert C.

Authored by: Chidume Nnamdi

ReportingObserver: New look at your code

A new ReportingObserver API is going to help you with deprecated API on your website and also with letting you know when your code runs into a browser intervention.

Authored by: Codementor


Understanding Currying in JavaScript

Functional programming is a style of programming that attempts to pass functions as arguments(callbacks) and return functions without side-effects(changes to the program's state). So many languages adopted this programming style. JavaScript, Haskell, Clojure, Erlang, and Scala are the most popular among them.

Authored by: Chidume Nnamdi

ES2018 - Finally Method in Promise

You guys really don't know just how hard it was for me not to name this post " the feature you've all been waiting for" or make some other kind of dad joke along those lines. In the end though, I decided to spare us all from it.

Authored by: DiscoverSDK

JavaScript: Arrays vs Sets

In ES2015, we got a new data type Set. Most developers are quite familiar with Arrays. Therefore, in this blog post, we will take a look at the differences between Array & Set. Unique values The biggest difference between an Array & Set is that Arrays can have duplicate values

Authored by: Watandeep Sekhon

Explaining the JavaScript array. Sparse and dense arrays

The array is a popular concept across many programming languages. At first glance, arrays work in the same way, but the JavaScript array differs from languages like C++. The article explains the basics of how JavaScript arrays work under the hood. It includes what are indexes and what is a maximum size of an array.

Authored by: Marcin Wanago

Javascript Promise Example Tutorial

Get real time updates directly on you device, subscribe now. Javascript Promise Example Tutorial. JavaScript is the single-threaded scripting language. Everything happens in a sequence, it is written, line-by-line. But, in the asynchronous operations occur in the order they complete. Events are very good for things that can happen multiple times on the same object like keyup, touchstart, mouseover, etc.

Authored by: KrunalDLathiya

Understanding JavaScript Data Types and Variables

If you've ever had the pleasure(or displeasure)of sitting through an Algebra 1 class, you've probably heard about variables. You know, x + 4 = 6 and all that good stuff. Don't worry. JavaScript variables are much less scarier. You get to declare them so that you know exactly what they are.

Authored by: Codesmith


Nested Forms in Angular 6

A step-by-step guide to use nested forms within the latest version of Angular. Recently, I was working on a portal that needed to use an array within an array. For that, I decided to use the nested form structure, and it worked very well for me.

Authored by: Telerik

Playing With Recursive Ng-Template References In Angular 6.1.10

Ben Nadel explores the use of the ng-template to recursively render tree-like data structures within the boundary of a single component in Angular 6.1.10. The ng-template directive, along with other directives like ngFor that accept a TemplateRef, afford a great deal of power in component view creation.

Authored by: Ben Nadel

Updating InVision Router Experiment To Use Lazy Loading Feature Modules In Angular 6.1.9

Ben Nadel takes his experiment that recreates the InVision App user interface (UI) with the latest Angular router and revamps it to use lazy-loaded feature modules. This allows the primary bundle to contain the most important code; then, defers loading code for the secondary features of the Angular application.

Authored by: Ben Nadel

ProvidedIn FeatureModule Is A Confusing Concept For Me In Angular 6.1.9

Ben Nadel gets confused by the "providedIn: FeatureModule" semantics in the @Injectable() meta-data in Angular 6.1.9; and, discovers that you can simply use "providedIn: root" and things will "just work", even if a feature module is lazy-loaded.

Authored by: Ben Nadel

Playing With Recursive Components In Angular 6.1.10

Ben Nadel revisits his exploration of recursive view rendering in Angular 6.1.10, this time using recursive Components (element directives) instead of Ng-Template directives. Components provide a more verbose but more straightforward way to reason about recursion, allowing for simple event and data propagation.

Authored by: Ben Nadel


11 React UI Component Playgrounds for 2018

Top component playgrounds to render, view and develop React UI components online. Hot reload, simple configurations and much more. Discover React live, Codesandbox, Stackblitz, StoryBook, Styleguidist

Authored by: Bit

How to build a custom date picker with React

It is very common to see forms on the web that include one or more date fields. Whether it is a person's date of birth that is required or a flight schedule date, you always want to be sure that the...

Authored by: Glad Chinda

Fullstack React: The Fullstack Guide To What's New in Create React App 2.0

Create React App lets you quickly create React apps with little-to-no build configuration. And this new update gives your app super-powers. Create React App lets you quickly create React apps with no build configuration. The version 2.0 was recently announced and its packed with tons of new features.

Authored by: YE

Small changes can make big impacts on React

Performance is essential for every project, as we know. However, it's more important when it's a client project because you need to think about all the browsers, even internet explorer. From this point, we are working hard to increase our website performance at heycar, as our users must access the fastest website on their desktop and mobile devices.

Authored by: İlker Güller

What's New in Create React App 2

Yes!! It keeps getting better, I am as excited as you are. Create-react app is the most wildly used react boiler plate there is today, it helps you focus on writing code, and then handles the build and testing for you. It literarily does all the work for you!

Authored by: Scotch Development


How To Build Complex, Large-scale Aurelia Apps With Aurelia Store

If you're new to state management or you're familiar with it and not using Aurelia Store already (you should), today we are going to be looking at how you can integrate Aurelia Store into your Aurelia applications and make the life of your development team and yourself a lot less stressful.

Authored by: Dwayne Charrington


Using Event Bus to Share Props Between Vue Components

By default, communication between Vue components happen with the use of props. Props are properties that are passed from a parent component to a child component. For example, here's a component where title is a prop: Props are always passed from the parent component to the child component.

Authored by: CSS-Tricks

What You Need to Know about Vue CLI 3

Vue CLI, the standard build toolchain for Vue applications, got a new major release (v3) a couple of weeks ago. In this article we will review some of the major features and why it's so important. This past February, during the conference keynote at Vue.js Amsterdam, Evan You talked about Vue CLI 3 and addressed the issues of the good old Vue CLI 2.

Authored by: Telerik

Optimistic Offline-First Apps With Vuex

Let's start with the easy part, caching data for offline capability. First we need a service for handling the cache operations, let's call it Storage. It should export 3 functions for managing the state, get, set and delete.

Authored by: Ido Shamun

Use Protected Routes in Vue.js

The code is available in a Github repository In the first Post of this series, I explained how to create a Login Component with Vue CLI , SCSS , Axios and Vuex. In the previous Post, I explained how to persist the Access Token in the localStorage and retrieve it from there on the initial app load.

Authored by: The Practical Dev

How to build a Vue CLI plugin

If you're using Vue framework, you probably already know what Vue CLI is. It's a full system for rapid Vue.js development, providing project scaffolding and prototyping. An important part of the CLI are cli-plugins. They can modify the internal webpack configuration and inject commands to the vue-cli-service.

Authored by: Natalia Tepluhina

Lazy Loading Images with Vue.js Directives and Intersection Observer

When I think about web performance, the first thing that comes to my mind is how images are generally the last elements that appear on a page. Today, images can be a major issue when it comes to performance, which is unfortunate since the speed a website loads has a direct impact on users successfully doing what they came to the page to do (think conversation rates).

Authored by: CSS-Tricks


Node js File System Module Example Tutorial

successfully, then the first argument will be Node js File System Module Example Tutorial is today's leading topic. The null or undefined. Node.js file system module allows you to work with a file system on your computer. We can include the File System module by using the require() method.

Authored by: KrunalDLathiya

Use ES modules in Node without Babel/Webpack using `esm`

Node has been implementing more and more ES6+ (ESNext) features natively. One of the features that is taking the longest to implement is modules. The reason for

Authored by: Hugo Di Francesco

How To Automate Database Migrations in MongoDB Using Nodejs

Introduction As a software developer at some point, you might have to deal with database migration in one way or another and we all have to chuck it up. As Software or application evolve and improve over the time so is your database and we have to make sure data remains consistent throughout the application.

Authored by: Shailesh Shekhawat

User Authentication with Express.js

Part of making an Express.js based application is being able to authenticate users. The question after getting them authenticated is what to do with that? My current strategy is to use a client-side cookie that is encrypted with a secret hash. To create a session, I use both the cookie-parser and express-session modules.

Authored by: Joe Casabona

Top 10 Node.js Debugging Tips to Debug Like a Pro

Err-not quite. Whilst this tweet is painfully relatable, it also saddens me. This goes to show there are so many Node.js developers out there who are debugging their applications the caveman way. But debugging Node.js needn't be this hard. The more you relate to this tweet, the more you must read on.

Authored by: Stackify

Libraries and Tools

Getting Started with Nuxt.js

Nuxt.js is a universal framework created for the sole purpose of building world-class Vue.js applications that can scale. What makes Nuxt special, how do you install it, and how can you use it in your next project?

Authored by: Telerik

Meteor 1.8 erases the debts of 1.7 - Meteor Blog

Well, it's the future now, and Meteor 1.8 is the culmination of that plan. Not only have we eliminated many of the performance problems specific to Meteor 1.7, we also dug deep into the historical internals of Meteor's compiler plugin system, as far back as version 1.2 (September 2015!)

Authored by: Meteor

Build a File Metadata App in Electron

In this tutorial, we will build a simple file metadata app in Electron, covering creating the main process, browser processes and how to use inter-process communication to send data between them. Prerequisites I'm assuming you've read the previous tutorial and have a basic idea of the main process and browser processes.

Authored by: Evan


Testing React Applications with react-testing-library

A hands-on guide with live examples Have you ever had the feeling that your react component test code is just testing the UI framework and component coupling, but is no where close to mimicking the actual user behavior. If you are with me on that, read further to get introduced to another way of testing components using a library called react-testing-library.

Authored by: RC

Functional Programming

Basic Functional Programming Patterns in JavaScript

Several years ago, I found a helpful tutorial by Arnau Sanchez that showed how common procedural programming patterns could be replaced with a functional approach. The tutorial is in Ruby. Recently I was reminded of it, and I thought I'd convert some examples from that tutorial to JavaScript to help a new generation of developers starting out.

Authored by: The Practical Dev

Functional JS with ES6 - Church Booleans, Conditionals, and Operators

I'll start this article with a warning, I mention the use of Lambda Calculus, but do not let that scare you! I promise, no knowledge of λ-Calculus is required to understand or use the main concepts in this article! Phew! In my last Functional JS article, we went over recursive patterns that allow you to operate/iterate over array values.

Authored by: Casey Morris


What are Durable Functions?

Oh no! Not more jargon! What exactly does the term Durable Functions mean? Durable functions have to do with Serverless architectures. It's an extension of Azure Functions that allow you to write stateful executions in a serverless environment. Think of it this way.

Authored by: CSS-Tricks

How to find the best open source Node.js projects to study for leveling up your skills

To senior developer: "How did you get so good at programming?" "I don't know, I guess I just wrote a lot of code, and read a lot of it too..."

Authored by: Corey Cleary

5 things you can do in CSS-in-JS that you didn't know about

Some of these libraries add support for features you might find helpful in certain situations.

Authored by: Esteban Herrera

Build a Phone System for Your Company With Twilio, Okta, and JavaScript

If you've ever worked for a company with more than a few employees, you've probably seen some interesting phone systems. When I used to work at Cisco, everyone was given a dedicated Cisco desk phone that hooked up to a server somewhere in the company and each employee was assigned a unique phone number and extension.

Authored by: Scotch Development