JSK Weekly - November 8, 2017


This is the week of exciting announcements! We have a bunch of new stuff going on in JavaScript world whether you are backend, front-end or full-stack JavaScript developer. So let's get started.

The Node.js team announced that Node.js 8 Moves into Long-Term Support and Node.js 9 Becomes the New Current Release Line. Make sure to read all the details and stay up to date with latest and greatest Node.js.

Stephen Fluin announced Angular 5.0.0 on the official blog. With an emphasis on speed and ease of use, next version of Angular is definitely something you want to check out whether you are an Angular fan or not.

Halloween brings us new TypeScript 2.6 this year. You can read all about it in Daniel Rosenwasser's article on the official blog.

Last but not the least, Ben Newman announces the final release of Meteor 1.6 with a bunch of improvements.


General

5 JavaScript Style Guides - Including AirBnB, GitHub, & Google

Whether you're just starting to learn JavaScript, or getting ready for your big interview with Airbnb, here are 5 style guides that can help you write cleaner code.

Authored by: Brandon Morelli

HTML Web Component using Vanilla JS - Part 2

I've written a post before on How to Create Vanilla JS Web Components using the new API spec introduced by W3C for Custom Elements, Shadow DOM, HTML Imports, and . The previous post showed how to create a very simple and not that useful web component.

Authored by: Codementor

Creating a Star to Heart Animation with SVG and Vanilla JavaScript

In my previous article, I've shown how to smoothly transition from one state to another using vanilla JavaScript. Make sure you check that one out first because I'll be referencing some things I explained there in a lot of detail, like demos given as examples, formulas for various timing functions or how not to reverse the timing function when going back from the final state of a transition to the initial one.

Authored by: Ana Tudor

A gentle Introduction to Ajax

Imagine you’re deep into your Facebook feeds, you like a post, the page reloads and you had to start all over again. Not a quite painful right, think of how many times you must have reloaded when you like up to 5 posts.

Authored by: codeburst.io


JavaScript

JavaScript: Learn Promises

What will I learn? This tutorial will teach you the basics of Promises in JavaScript. This is not an all-inclusive article, but instead will provide you with the basic knowledge you need to understand and begin using Promises in your code. Why do we need Promises?

Authored by: Brandon Morelli

JavaScript loops - how to handle async/await

How to run async loops in sequence or in parallel? Before doing asynchronous magic with loops I want to remind you how we write classical synchronous loops. Long time ago I was writing loops like this (probably you too): It is good, it is fast, but it has many readability and maintenance issues.

Authored by: Anton Lavrenov

ES proposal: `import.meta` - module metadata

The proposal "`import.meta`" by Domenic Denicola is currently at stage 3. This blog post explains how it works.

Authored by: Axel Rauschmayer

Understanding JavaScript Closures

Closures can be quite tricky to understand especially for beginners. They are one of the most powerful features of JavaScript but they cannot be properly exploited without understanding them. Closures are objects that contain a function and a reference to the environment in which the function was created.

Authored by: Swathi Prasad

Tracing method calls via Proxies

In this blog post, I explain how you can trace method calls via ECMAScript Proxies. The techniques I show are relevant whenever you want to intercept and forward method calls via Proxies.

Authored by: Axel Rauschmayer

ES6 Promises - Quick Start Guide

Promises represent the eventual result of an asynchronous operation. They give us a way to handle asynchronous processing in a more synchronous fashion.

Authored by: Zsolt Nagy


TypeScript

Announcing TypeScript 2.6

TypeScript 2.6 is here in time for Halloween, but have no fear! We've got some great treats for you in this release. If you haven't heard of TypeScript, it's a language that builds on top of the most up-to-date versions of JavaScript by adding optional static types.

Authored by: Daniel Rosenwasser

Publishing a Typescript module to NPM

This guide aims at summarizing all aspects of publishing a Typescript module to NPM in a concise step-by-step manner while providing enough context to understand while certain things are done in one or another way. If you have never published a TypeScript module, this guide will help you.

Authored by: 60devs

TypeScript 2.6 and strict functions

TypeScript 2.6 was released on the 31st of October. It is a moderately sized release like many of the other of the more rapid releases from the TypeScript team over the past year.

Authored by: SitePen

Common TypeScript Error Messages

Whenever you start working with a new programming language or framework, you need to learn a new collection of error messages and how to resolve them. Sometimes those messages are obvious, and others only become obvious as you gain experience with the new technology.

Authored by: SitePen


Angular.js

Version 5.0.0 of Angular Now Available

We are pleased to announce version 5.0.0 of Angular, pentagonal-donut. This is a major release containing new features and bugfixes.

Authored by: Stephen Fluin

Creating A Direct-Click DOM Event Plug-in In Angular 4.4.6

Ben Nadel demonstrates how to create a custom (directclick) DOM event plug-in in Angular 4.4.6, which will invoke its handler if and only if the target of the click event is the element on which the (directclick) event-handler was bound.

Authored by: Ben Nadel

Understanding Resolvers in Angular

Just like every important thing in angular, resolver is also a class. In fact, Resolver is a service which has to be [provided] in respective router module or main module. To understand the use of resolvers , Lets see how the flow happens, when someone clicks the link. User clicks the link.

Authored by: codeburst.io

Angular 4 Custom Validation for Template Driven forms

learned something across the weekend thought of sharing it with you, So this article is about writing your own custom validator for an input field in angular 4.

Authored by: Sajidh Zahir

Adding .delay(10) To ActivatedRoute Helps Prevent Unwanted Router Behaviors In Angular 4.4.6

Ben Nadel demonstrates some "unwanted" behaviors in the Angular 4.4.6 router; and, how adding .delay(10) to the ActivatedRoute stream can mitigate these behaviors.

Authored by: Ben Nadel

The Difference Between AngularJS, Angular 2, Angular 4

We review the similarities and differences of of three versions of the Angular framework, showing the evolution of Google's popular open source resource.

Authored by: DZone


React.js

React Native vs Real Native Apps

If you're into mobile app development, the name of React Native mustn't be new for you. The term has been trending in the world of technology for quite some time now. Since Facebook formally launched it as an open-source platform, a lot of businesses have already incorporated it into their process.

Authored by: Weblab

Introduction to React VR

What is React VR and how to start building apps with it.

Authored by: franzejr

The Children of Redux - Part 3: redux-zero, stent and choo

In the first part and the second part of the series, we talked orderly about Plait, Dutier, dva, Feeble, vdux and hyperapp which already gave a momentum in the community (not as much as Elm but) through unifying to handle state in the client-side of web applications.

Authored by: Barış Güler

Programmatic Slack invite in JavaScript and React

The article showcases how to setup an automated Slack invitation for a JavaScript and/or React application. Why would you want an automated Slack invitation in the first place? My personal motivation was it to create a like minded community of people learning React, but the idea about a Slack Channel started out on Twitter.

Authored by: Robin Wieruch

React native app with facebook sdk login and firebase storage

In the following article I will show you how I successfully managed to integrate facebook login with facebook sdk and register the user into a firebase database.

Authored by: codeburst.io

Why this React code not work in production

Today I was migrating a personal project to create-react-app, then I found my RadioButton stops working in production while it works perfectly in development. After I figured out why, I think it worth noticing people why. It's about auto-binding, where the will bind some props to its children if the child pass the following check.

Authored by: Albert Gao


Aurelia.js

Patterns for Computing Values in an Aurelia Template

GitHub and StackOverflow are full of issues and questions about the @computedFrom decorator in Aurelia. At its inception, Aurelia was clever enough to dirty check properties that it wasn't able to observe properly. However, inspired by Knockout, many people requested the ability to feed additional information about dependencies to the binding engine, and so @computedFrom was born.

Authored by: Matthew James Davis


Vue.js

Vue user permissions through directives

This guide is a post-mortem on my experiences from writing vue-browser-acl, a standalone Vue.js component that brings ACL (Access Control Layer) to the browser in the form of an easily comprehensive directive.

Authored by: Michael

Launch a Killer Vue.js Blog in Less Than 2 Hours [Live Demo]

Learn how to build a killer Vue.js blog with a full demo: custom plugin, templating, pagination, filtering, data decoupling, and more!

Authored by: Snipcart

Building your very first component with VueJs

Before we delve into the world of components in Vue, let's take a moment to understand what web components are, in application development. For instance, my house is not far from a shopping mall where I do regular shopping just like everyone.

Authored by: codeburst.io

Dynamic Modules with Vuex and Vue

Let's start from the common module: Everything looks like the same, except state . In the snippet above, we are exposing a function instead of a classic variable because we would like to create a relative state within the module's context which will differ from the other instances.

Authored by: Francesco Vitullo


Node.js

Node.js 8 Moves into Long-Term Support and Node.js 9 Becomes the New Current Release Line

We are super excited to announce that later today Node.js 8 will be ready for production as it transfers into the de facto Long-Term Support release line opening it up to a larger user base that demands stability and security (Node.js 8.9.0 is the first official Node.js 8 release to hit LTS status).

Authored by: node js

Getting Started With Node.js : A Beginners Guide

In my Node.js series of articles so far i have covered basics and some stats to put things in perspective for you about why Node.js is becoming an important career options for aspiring programmers.

Authored by: #PramodChandrayan

What's new in Node.js 9?

Node.js 8.9.0 just became the LTS (Long Term Support) version of Node.js under the codename Carbon, and it will be maintained till December 31, 2019, to align with the scheduled end-of-life of OpenSSL-1.0.2. After that, Node.js 9 will serve as the base for the next LTS release, Node.js 10, which will become the active LTS version in October 2018.

Authored by: Gergely Nemeth

Handling CORS Related Issues In An Express Framework Node.js Web Application

Proper cross-origin resource sharing (CORS) configuration is one of those things that is completely necessary when building a RESTful API, but also one of those things that is a total pain in the butt when it comes to prototyping an application.

Authored by: Nic Raboy

How to Deploy Node Applications: Heroku vs Now.sh

As Node.js continues to gain in popularity, new tutorials pop up teaching you to write server-side JavaScript apps and APIs. Once you've built your shiny new Node app, though, what then? In this article, I'm going to take a look at a couple of options for deploying your Node applications.

Authored by: SitePoint

Build a "Serverless" Reddit Bot in 3 Steps with Node.js and StdLib Sourcecode

Here at StdLib, we're big fans of Reddit. If you spend any time browsing Reddit, you will without a doubt encounter a few bots. They have many different purposes, from moderating subreddits to summarizing articles. Regardless of their goal, many of these bots perform just two basic tasks: reading comments and replying to ones that match certain criteria.

Authored by: Steve Meyer


Libraries and Tools

Announcing Meteor 1.6 - Meteor Blog

Node.js 8, npm 5, native debugging, 64-bit Windows binaries, and more Today we're thrilled to announce the final release of Meteor 1.6, which brings the latest stable version of Node.js, an amazing new debugging experience, npm 5, 64-bit Windows support, and countless other improvements to the Meteor platform - all without wavering from our commitment to backwards compatibility and a smooth meteor update experience.

Authored by: Meteor

Using Facebook/Twitter Authentication in Adonis 4.0

In this tutorial, we are building an authentication system using Adonis-ally. I know the question on your mind, "what's adonis-ally?". Adonis-ally package makes it easier to authenticate your user via Facebook, Github, Google, LinkedIn, Twitter, Instagram, Foursquare and Bitbucket(Coming Soon). For this particular blog, we will be talking about authentication via Facebook and Twitter.

Authored by: Ayeni Olusegun

Turning VS Code Into A Killer MongoDB Admin Tool

Flying blind with a database is everyone's least favorite part of development since the invention of computers. This is why we have database admin tools for MongoDB. However, jumping between your text editor and your database admin tool is a tad disruptive.

Authored by: Burke H✪lland

Put Your Webpack Bundle On A Diet - Part 3

Now it's all about the specifics. This week, we'll tackle more detailed optimizations related to common modules like Moment.js, Babel, and Lodash.

Authored by: Benedikt Rötsch

Easier Asynchronous requests with jQuery

Imagine the amount of the web that consists of repeated code. It's not too much of a bad idea to let computers do the work you know ?

Authored by: codeburst.io

Server.js

Flexible and powerful server for Node.js

Authored by: JavaScript Kicks


Testing

UI testing with Jest and Puppeteer: an introduction

I started to consider testing with Jest and Puppeteer right after the library came out. Puppeteer has quite an interesting API. In the following post I'll introduce you to a basic UI test for a contact form. We will testing with Jest and Puppeteer.

Authored by: Valentino Gagliardi


Functional Programming

Functional Programming inside your SPA

Functional programming is one of the hottest topics in the JavaScript community these days. It is used by notable libraries, and numerous articles are published each month. This hype helps developers expand their knowledge of the paradigm. Knowing FP is becoming a standard requirement among developers.

Authored by: Eliran Levi


Other

Isolating memory leaks with Chrome’s Allocation Timeline

Memory leaks happen from time to time. The next time you encounter one, remember that the Allocation Timeline is your friend.

Authored by: LogRocket

React / Angular / Vue - another point of view

Lets start with a comment - i hate to read a full comparison and in the end i don't know what to choose because the writer can't tell exactly whats the best option. We are all reading about the frameworks war between Angular/React/Vue.

Authored by: codeburst.io

Reverse Proxying an angular-cli SPA with Apache and Tomcat

It's always beneficial to have your development environment closely mirror your production one, and thanks to tools like Docker it's quite easy to set it up nowadays. In this post we will learn how to set up a dev environment for an Angular 4 application, backed by an api served with Tomcat fronted by Apache.

Authored by: Abou Kone

2 cases where Babel fixes your code but it shouldn't

How turning off transpilations messes up the codebase

Authored by: advancedweb.hu

Polymer Skeleton: Webpack, PostCSS, Service Workers and the future.

Finally Polymer 3 and finally the compatibility layer we needed to use Webpack and modern web development tools. We tried to build up a simple (but really accurate) skeleton for Polymer and Webpack...

Authored by: Alessio Occhipinti

Workbox, the easier way of adding a service worker to your web app.

Workbox combines a set of well trusted build tools and libraries to help you generate the right Service Worker for your web app. If you don't already know what it is, a service worker is a Javascript...

Authored by: Bakani Zie Pilime





0 comments