JSK Weekly - September 26, 2018

A very interesting article this week coming from tech-savvy chicken farmer Arseniy Tomkevich. Read more about how JavaScript saves chicken lives in "Raising Baby Chicks with JavaScript".

Joel Thoms wrote "Why async code is so damn confusing (and a how to make it easy)". Always good to refresh and update your knowledge on this topic so enjoy the reading.

Sukhjinder Arora covered one of the more very important JavaScript topics, closures. This time especially aimed at novice developers. If you are new in JavaScript world or just want to refresh your knowledge make sure to check out "A Beginner’s Guide to Closures in JavaScript".

Finally, we have a very interesting article for React developers. "Build an Autocomplete widget with React and Elastic Search" by Ramachandran (RC). We hope you'll enjoy it.


Raising Baby Chicks with JavaScript

A few years back I decided to start raising chickens. By that time I had beetles, worms, snakes, and frogs; you name it! But raising these cute yellow nuggets is a different beast altogether. At first, it sounds fun. All you do is buy a dozen online and follow the instructions.

Authored by: Arseniy Tomkevich

Why async code is so damn confusing (and a how to make it easy)

Why is asynchronous code in Javascript so complicated and confusing? There are no shortage of articles and questions from people trying to wrap their bean around it. Some handpicked questions from SO... There are literally hundreds of questions and articles about async and a lot of them sound something like this: This is a common misunderstanding of how JavaScript works.

Authored by: The Practical Dev

The Return of SharedArrayBuffers and Atomics

A common complaint of modern web apps is the concept of jank; web pages being unresponsive to user input and frame rates being low. Left unmitigated, this problem leads to a poor quality experience for end users of our web applications.

Authored by: SitePen

You don't need Array.reduce()

I was reading another dev.to post, Demystifying Array.reduce(), but I didn't fe...

Authored by: The Practical Dev

Copying Data with JavaScript

This post was first posted on my blog Hi everyone. In this article, I'll tell you how to copy something with the JavaScript. Before starting, I need to say that, there is an npm package that built with the information in this article.

Authored by: Bug Skywalker


A Beginner's Guide to Closures in JavaScript

A closure is a function that has access to its outer function scope even after the outer function has returned. This means a closure can remember and access variables and arguments of its outer function even after the function has finished. Before we dive into closures, let's first understand the lexical scope.

Authored by: Sukhjinder Arora

Finally in Promises & Try/Catch

Lately, I've been experimenting more with the async/ await keywords in JavaScript. I noticed that I sometimes struggle to reconcile the strategies I use with Promises with the way I need to write code in the newer syntax. Most recently, I was playing around with finally in some try/ catch blocks and came upon some behavior I didn't expect.

Authored by: AnnaR

Essential JavaScript String Methods

Strings are a fundamental part of every programming language, and JavaScript has many powerful built-in methods that make working with strings easy for developers. This list covers the most important string functions for you to begin utilizing in your code.

Authored by: gitconnected

What to do with lists of things in JavaScript

In JavaScript, as in most languages, we have a data structure that deals with lists of values. It's a very handy object that lets us group values together in an ordered list. But there's much more to arrays in JavaScript than just the string index and length property.

Authored by: The Practical Dev


Collect Forecast Information with Angular and the HERE Weather API

Knowing weather conditions for cities or coordinate based locations could be very important for your business. Imagine you're operating a fleet of vehicles scheduled to perform activity at a certain location. If there are severe weather conditions, you know it can affect productivity or create safety concerns.

Authored by: HERE Developers at Disrupt 🌉

Developing a Cross-Platform Desktop Maps Application with Electron, Angular, and HERE - HERE Developer

I have a Mac and every once in a while I use the Apple Maps Desktop application. There are potentially a few problems with the Apple Maps application, for example, it only works on Mac and not Windows or Linux. Also, the maps could be using a more reliable and trusted solution like HERE.

Authored by: HERE Developers at Disrupt 🌉

A simple show and hide password directive with Angular

What we want to do is to create an attribute directive to change the behaviour of password input.

Authored by: Theophilus Omoregbee

Experimenting With Lazy Loaded Modules, Ahead Of Time (AoT) Compiling, And Webpack 4 In Angular 6.1.7

Ben Nadel shares the approach to lazy loading modules that he's finally got working with Angular 6.1.7, Webpack 4, and Ahead of Time (AoT) compiling. This approach uses symmetric loading semantics (between statically loaded and lazy loaded modules). And, allows each feature module to fully encapsulate its own router segment definitions.

Authored by: Ben Nadel

AngularJS Lazy Loading avec ocLazyLoad et UI Router

Attendez une minute, devrais-je même m'en soucier? AngularJS est mort. D'une part, vous avez raison. AngularJS a commencé le support de longue date et sera finalement fermé. D'autre part, AngularJS est utilisé dans de nombreux projets. Une quantité énorme d'entre eux ne sera pas réécrite dans un nouveau framework.

Authored by: Code d'Ivoire


Build an Autocomplete widget with React and Elastic Search

Though many of the RDBMs already support full-text search, we would prefer ElasticSearch essentially for its superior scoring algorithm and performance. There are two ways to build the ElasticSearch index to power our auto-suggest functionality: The completion suggester is a so-called prefix suggester.

Authored by: RC

React - Components with Parameters

In our last React article, we learned about creating components . But our component was a bit basic, one that doesn't take any parameters. We want a real component that takes parameters and everything! Why? Because just like how HTML elements have properties (think href or title in an a tag), React components also need parameters.

Authored by: DiscoverSDK

Reusing React Component logic with Render Props

If you have used React for some time, Reusing Components is one of the things you would always do. The most obvious way most of us do is using Higher Order Component. Having read through Chinonso Johnson 's article on Reusing React component logic with HOC.

Authored by: Codementor

React Datepicker Tutorial Example From Scratch

React Datepicker Tutorial Example From Scratch is today's leading topic. We use the package called react-datepicker for this demo. React Date Picker is a simple and reusable Datepicker component. There are many other packages available, but for this demo, we are using React Date Picker package for this example.

Authored by: KrunalDLathiya

How create-react-redux-app-structure helps you to start a project faster

I prefer to create a project from the scratch, it helps you to learn, investigate and just understand how tool which you want to add works. New tools come to life more and more often and it is not too easy and fast to start a new project.

Authored by: Vasyl Stokolosa


5 Most-Requested Features For Vue.js in 2018

Vue has a small and focused API, but users and maintainers are always thinking about potentially useful new features. Here's a breakdown of five of the most popular feature requests from Vue's GitHub issue board.

Authored by: Anthony Gore

Create a Progressive Web App using Vue, Cosmic JS, and GraphQL

This application was mainly inspired by Offerup, Letgo, and Craigslist. Like Craigslist, LetGo allows you to buy and sell items locally, which means you don't have to deal with the hassles of shipping like you would on eBay or Amazon. With 30 million users, it is more popular than OfferUp.

Authored by: Codementor

Using Scoped Slots in Vue.js to Abstract Functionality

Let's start with a short introduction to Vue.js slots concept. Slots are useful when you want to inject content in a specific place of a component. Those specific places that you can define are called slots.

Authored by: CSS-Tricks

Vue Event Handling Example

Get real time updates directly on you device, subscribe now. Vue Event Handling Example is today's leading topic. Events are typically used in combination with functions, and the function will not be executed before the event occurs. In this tutorial, we will see how to listen for DOM events that we can use to trigger methods.

Authored by: KrunalDLathiya


Create a project using the `npm init initializer` command · Manorisms

Historically, the command was soley used to create a new package.json file. However, as of version 6.1.0, you can use a new feature of npm init called the . The initializer you provide will determine how your new appilcation will be built.

Authored by: Elijah Manor

Learn Node.js: Tutorials for Programmers of All Levels

If you want to learn Node.js or improve your skills, you can find a list of the top online tutorials that will guide you through learning Node.js.

Authored by: Stackify

Basic 'express-less' Node Server - HTTP calls

Hello people. This is a comprehensive post to learn javascript, for those people who have got stuck in the front-end, and haven't been able to experience much of the server side, and crave to look inside the obscure console.

Authored by: Codementor

File watcher with Node.js

In this article I am going to explain how to create a file watcher in Node.js that constantly check a source folder content file and moves the content in a destination folder lowering case the name. It is a great way to understand how listeners and callbacks interact to each other and how to work with asynchronous logic!

Authored by: Codementor

Private NPM Registry Simplified with Bit

Setting up a Node.js package registry is often the first step towards scaling code-sharing and making life a little bit easier for your team. Sharing more modules means duplicating less code. It also helps in building more modular and maintainable software. However, the overhead around setting up and maintaining a private NPM registry can be massive.

Authored by: Hacker Noon

Nodejs Event Loop System: A Hand's On Approach - Part 1

IO refers to interaction with the OS disk and network. In blocking IO programming, a function call that accesses an IO in the OS blocks the execution of the thread and leaves the system resources idle, until the IO operation completes. This code.

Authored by: Bit

Libraries and Tools

Demystifying Webpack

All of us would've definitely used webpack at one point of time. It is by far the most popular bundler due to the endless amount of loaders and customisability it brings to the bundling process. In one way webpack has influenced the growth of certain JavaScript ecosystems. But how often we have thought of opening that bundled file and understand what has happened while bundling.

Authored by: The Practical Dev

Use Your Web Dev Skills to Build a Desktop App with Electron

This article was originally published on the Okta developer blog. Thank you for supporting the partners who make SitePoint possible. Electron is a framework for building cross-platform desktop applications with web technologies like JavaScript, HTML, and CSS. It was created for GitHub's Atom editor and has achieved widespread adoption since.

Authored by: Matt Raible

5 reasons you shouldn't be using GraphQL

GraphQL is great, it allows you to work in a declarative style by enabling you to select only the information or operations that you need. However, just like any other tool, it's not a silver bullet.

Authored by: Esteban Herrera


Rethinking JavaScript Test Coverage

This blog was written by Benjamin Coe, Product Manager at npm, Inc. and lead maintainer of yargs and Istanbul. It covers work that has gone into introducing native code coverage support to Node.js...

Authored by: Benjamin Coe

Unit Testing Sequelize 4 ES6 class models

A simple Hugo blog setup The story of getting codewithhugo.com up and running. The tl;dr is the following: I always rave about my blog setup, it's simple, fast and just works I used Hugo, "The world's fastest framework for building websites", a static site generator I used a theme, casper-two, which is a Hugo port of the https://ghost.org/ default theme I deployed to GitHub pages behind Cloudflare.

Authored by: Hugo Di Francesco


The web app prelaunch checklist: 8 things to consider

In this article, I'll try to summarize some of the things that seem to be required to launch a web app (presumably in a business context) these days. I cannot give you any guarantee on completeness, so if you see anything missing from the lists below (or have some suggestions) please use the comments.

Authored by: JavaScript Kicks

How browser rendering works - behind the scenes

This is not supposed to be a computer science networks class, but you may remember that data is sent over the internet as "packets" sized in bytes. The point I'm trying to make is that when you write some HTML, CSS and JS, and attempt to open the HTML file in your browser, the browser reads the raw bytes of HTML from your hard disk (or network).

Authored by: Ohans Emmanuel

Idle Until Urgent

A few weeks ago I was looking at some of the performance metrics for my site. Specifically, I wanted to see how I was doing on our newest metric, first input delay (FID). My site is just a blog (and doesn't run much JavaScript), so I expected to see pretty good results.

Authored by: Phil Walton

Improving DataView performance in V8

A blog by the V8 team for JavaScript enthusiast that want to get a glimpse 'under the hood' of Chrome's JavaScript engine.

Authored by: Camillo Bruni

Demystifying The Service Worker Lifecycle

In this article, we'll be demystifying the service worker lifecycle and what can be done at each stage of the lifecycle.

Authored by: Scotch Development