![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
JSK is Proud to Announce the Launch of Ramp Receipts
This week we had a lot more great stories than usual, especially for React, making it hard to choose the best ones for the newsletter. Eventually, we had to cut down few of them from the issue.
Brandom Morelli analyzes O'Reilly developer survey results about the developer earnings. As expected, US developers are making the most, but the earnings are different across the US.
Are chat bots the future of web development? Abhimanyu Godara writes about the impact chat bots are making to web development. Kit Kelly continues his analysis of web frameworks, talking about the core features of various frameworks.
John Hannah responds to our article on learning Node.js and React with his excellent article "How to Learn React: A Five-Step Plan". Make sure you check it out.
Both Aurelia and Ember had smaller releases. For those wanting to learn more about Aurelia's Binding Engine, Ashley Grant has an article "Getting My Hands Dirty with Aurelia's Binding Engine, Part One".
General
How Much Do Software Developers Make in 2017?
Each year, O'Reilly releases the results of its annual developer survey. The survey covered nearly 7,000 programmers from 110 countries across the world.
Authored by: Brandon Morelli
Chat Bots and the Future of Web Development
Since Facebook launched their annual F8 conference for bot developers in 2016 and Microsoft followed suit, there's been a lot of hype, excitement and speculation around chatbots. Satya Nadella, CEO of Microsoft, has stated that chatbots will "fundamentally revolutionize how computing is experienced", altering the way content and services are created and consumed on the web.
Authored by: Abhimanyu Godara
Web Frameworks:Foundational Technologies
We have previously discussed the look and feel of web frameworks. While we often become interested in a framework based on the stylishness of the widgets and applications it can create, this may lead to a similar approach to how we have historically selected music.
Authored by: SitePen
Building efficient web components
First of all I would like to say how thankful I am to creators of libraries we use everyday in our apps. Pioneers explore new ways of developing for Web. It often comes with extra costs. But at the same time I think our building blocks need to be as efficient as possible.
Authored by: codeburst.io
How to make universal JavaScript applications - Part 1
You've probably heard the terms "Server Side Rendering" or "Progressive Enhancement" floating around before and perhaps even got excited about them. This is especially true if you are in the React scene.
Authored by: Dylan Piercey
JavaScript
How to follow the JavaScript roadmap
It can be difficult to keep up with all the things going on in web development, especially since the JavaScript language itself has been changing over the last several years. After several years of relative stability1, the ECMAScript spec has changed quite a bit over the last 3 years, with more changes on the way.
Authored by: Ben McCormick
Hoisting
When Javascript engine builds code, it uses a technique called Hoisting which divides the execution into 2 passes: The first pass is called declaration where it scans for all variables and function declarations and creates identifiers for all of them. Then the second pass is the execution pass.
Authored by: codeburst.io
Template Literals like ABC
Let's talk about joining! Ever got tired of using quotes " and " while concatenating or felt clumsy along with your code? With the usual + to add an expression and \n to get your point across clearly? To that, we bring you Template literals!
Authored by: William
Learn and Understand Recursion in JavaScript
Recursion is simply when a function calls itself. Let's jump right in and take a look at probably the most famous recursion example - the factorial of a supplied integer.
Authored by: Brandon Morelli
TypeScript
Pattern Matching with TypeScript
TypeScript does not have any pattern matching functionality built in. This article shows several ways how you can replicate the core of a simple pattern matcher using a few simple structures and functions within TypeScript.
Authored by: Manuel Alabor
Typesafety with TypeScript and Live-Coding
In this talk: static types in a JavaScript app using TypeScript and companion tools. Live coding done with Angular 2 / Spring.
Authored by: Pusher
Angular.js
Why Angular 2/4 Is Too Little, Too Late
TL;DR - AngularJS was a decent idea in 2012 but in 2017, the JS ecosystem has surged past Angular in maturity, flexibility, and productivity.
Authored by: Chris Cordle
A Taste From The New Angular HTTP Client
Yesterday Angular version 4.3.0-rc.0 has been released. I want to give you a taste of an exciting feature that we all waited for - an improved version of the HTTP client. HttpClient is an evolution of the existing Angular HTTP API, which existsalongside of it in a separate package, @angular/common/http.
Authored by: Netanel Basal
Async data in a form with Angular
I recently noticed that if you want to reuse this example for an update form with data coming from a server (which is pretty common), it’s not that easy.
Authored by: codeburst.io
👂 Listening for Actions in @ngrx/store 👂
You need to run some code after a particular action has been fired. For example, you want to reset a form after the ADD_STORY_SUCCESS action has been fired. 🤖 Add New Key Add one more key to your state.
Authored by: netanel basal
Everything You Need to Know on Securing Your Angular 2+ SPA
We are going to build an application to help prevent some routes based on user role and uses jwt that last for xmins before the x mins expires we use the token to request for the next one before the route is opened, so when idle we log the person out storing the last url or attempted url so after authentication we can return the user to the attempted url.
Authored by: Theophilus Omoregbee
React.js
How to Learn React: A Five-Step Plan
I was going through my email recently when I came across an article that caught my attention. It was about a team of .NET developers that learned Node.js and React while building a product.
Authored by: John Hannah
Modals in React
Modals in React are much like Icons in React. There’s plenty of ways to implement them, and there is no single correct way.
Authored by: David Gilbertson
Integrating React and Redux Into an Existing Backbone App
I've mentioned a few times that my project team works on an app that uses ES5 and Backbone, but that we built our latest couple features using React + Redux. I was asked to give more info on how we did that, and wanted to write it up as a post for easier reading.
Authored by: Mark Erikson
Redux-First Router lookin Sexy on Code Sandbox
This article could have just as accurately been titled: "How to use Redux-First Router on Code Sandbox," but hey, when something is sexy, flaunt it. First off, the response to Redux-First Router has been overwhelmingly "that's how it's supposed to be!"
Authored by: James Gillmore
Passing Functions as React Props
I recently had a discussion with a coworker about the naming of a function property that will be passed to a React component. It got me thinking more thoroughly about the role of functions as properties. I find that they usually fall into one of two camps.
Authored by: Ryan Duffy
React Ecosystem Setup - Step-By-Step Walkthrough
React is arguably the hottest framework currently used by the web development community at this point. Unfortunately, for newcomers and even more seasoned developers, setting up the industry-standard React development environment for the first time is difficult, daunting, and frustrating.
Authored by: Codementor
Aurelia.js
Aurelia Release Notes - Early July 2017
The Aurelia Team continues to iterate and improve all aspects of the framework. Below you can find details on our recent minor release of aurelia-validation along with our patch releases of the aurelia-cli and aurelia-polyfills.
Authored by: Aurelia
Getting My Hands Dirty with Aurelia's Binding Engine, Part One
Last year, I was preparing for a talk on extending Aurelia. The talk would look at how Value Converters, Custom Attributes, Custom Elements, and Binding Behaviors can be used to extend Aurelia's binding engine. I was well versed in building the first three, as I expect most experienced Aurelia users would be.
Authored by: Ashley Grant
Aurelia Routing + Switching Root Using setRoot
In your Aurelia applications, you might have two or more roots defining different entry points into your application. I personally create a public facing root which has public routes and an auth protected shell which has routes for logged in users only. Let's say for this example you have two roots: publicRoot and privateRoot.
Authored by: Dwayne Charrington
Vue.js
Vue.js, a JS framework for humans
I didn't believe that I would say that one day, but Vue.js proved me wrong. I have finally switched from jQuery for all my new projects and I am not looking back. I don't even remember how many years before I decided that I needed to become proficient in a JS framework and move away from the simple but also lazy and problematic approach of jQuery.
Authored by: codeburst.io
3 Code Splitting Patterns For VueJS and Webpack
Code splitting an app is a great way to improve its initial loading speed and can easily be achieved with Webpack. But where and when do you split your code? In this article I'll present three patterns for code splitting a Vue.js app: by page, by page fold and by condition.
Authored by: Anthony Gore
Using Vue.js components in PHP applications
A practical guide to bundling Vue.js components with webpack for use in PHP applications. It's often thought that Vue.js is only used in large single-page applications, written entirely in JavaScript. However, that's not the only way it can be used.
Authored by: Michał Męciński
Pre-Render A Vue.js App (With Node Or Laravel)
Server-side rendering is all the rage right now. But it's not without its downsides. Pre-rendering is an alternative approach that may even be better in some circumstances. In this article we'll explore how pre-rendering works with Vue.js and look at two examples; one with a Node.js project, one with a Laravel project.
Authored by: Anthony Gore
Ember.js
Ember.js: Ember 2.14 and 2.15 Beta Released
Today the Ember project is releasing version 2.14.0 of Ember.js, Ember Data, and Ember CLI. You may have noticed we're a few weeks late on this release, as the start of summer may have left us a little distracted.
Authored by: EmberJS
Node.js
KeystoneJS: The Best Node.js Alternative to WordPress
KeystoneJS is a content management system and framework to build server applications that interact with a database. It is based on the Express framework for Node.js and uses MongoDB for data storage. It represents a CMS alternative for web developers who want to build a data-driven website but don't want to get into the PHP platform or large systems like WordPress.
Authored by: James Kolce
Setting up 2FA for Node.js Applications
Let's take a look at how we can quickly hash out a correct two-factor authentication (2FA) solution for our web applications. First off, let's work out the required flow. 2FA relies on unique shared secrets we'll give our users.
Authored by: Nicolas Bevacqua
Package a module for npm in CommonJS/ES2015/UMD with babel and rollup
About a year ago, I started the rxjs-experiments project. Aside of rxjs, it is all vanilla JS. I needed a simple frontend router with at least a deferred mounting feature (only mount a route when a promise is resolved). After some research on npm and github, I choose to write it myself.
Authored by: Tophe
Building A Circuit Breaker For Node.js
For the last few weeks, I've been trying to build a Circuit Breaker for Node.js. The core concept is based on the Circuit Breaker that I built for ColdFusion; but, given the fact that Node.js / JavaScript is a different language with a very different non-blocking paradigm, the code is similar in intent but different in execution.
Authored by: Ben Nadel
Understanding Routes in an Express App
Routes were one of the difficult things to wrap my head around in the first week or two of back end programming. But, for anyone who is also struggling with app.get and app.post and routes, I’ve made a few visuals, to show how they all work together.
Authored by: Ethan Jarrell
Libraries and Tools
Webpack's import() will soon fetch JS + CSS- Here's how you do it today
A month ago Webpack’s creator, Tobias Koppers, unleashed “The big plan” for CSS in Webpack in his article “The new CSS workflow (step1).” The primary takeaway — mine at least — was that code-splitting for CSS would become a first class priority.
Authored by: James Gillmore
The Options for Programmatically Documenting CSS
I strongly believe that the documentation should be kept as close to the code as possible. Based on my experience, that's the only option that works well in the long term. External documents, notes, and wikis all eventually get outdated, forgotten, and lost. Documentation is a topic that always bugs me.
Authored by: Kaloyan Kosev
Introduction to date-fns - a Lightweight JavaScript Date Library
Working with dates in JavaScript is a pain. Native date methods are often verbose and occasionally inconsistent - something which also makes them error-prone. But good news is at hand. There are several libraries that exist to take the pain out of date manipulation.
Authored by: Edwin Reynoso
Make Linting Great Again
Watch how you can create fewer bugs and make the code more readable with linting tools. But does #linting really make code reviews faster? If so, how?
Authored by: Pusher
Using Normalizr to organize data in stores - practical guide
A React application usually needs some data from the server to be stored locally for immediate use, mainly to be shown on the page. If the application works with a complex relational database, this may be a bit of a problem.
Authored by: DashBouquet
Testing
Unit Testing Beginners Guide - Part 2 - Spying and fake timers
Before we start, and if you are not familiar with Jest testing basics already, please make sure to cover the first part of this series, on testing functions with Jest. Expanding on the previous tutorial, please make sure that you've created the unit-testing-functions directory and you have all the needed dependencies installed( NodeJS & Jest ).
Authored by: JavaScript Kicks
Unit Testing Beginners Guide - Part 3 - Mock Http And Files access
We've all encountered at some point code that needs to do some API calls or read from the file system. It's a super bad idea to actually let the code make the real http requests or read from the file system during unit test.
Authored by: JSTwister
Functional Programming
Recompose to Simplicity and Beyond
An overview of higher order components and how they're built. Plus, find out what Recompose is and what interesting stuff you can do with it.
Authored by: Pusher
Other
From Idea To Reality in Under 50 Minutes (Mostly)
This is the fourth and final part of the super series on Angular and Firebase. Welcome back! For the last article of this series we're going to do something really cool, we're going to transform baby-gotchi into a Progressive Web App.
Authored by: Jaime González
Repeatable, Staggered Animation Three Ways: Sass, GSAP and Web Animations API
Staggered animation, also known as "follow through" or "overlapping action" is one of the twelve Disney principles of animation as defined by Ollie Johnston and Frank Thomas in their 1981 book "The Illusion of Life". At its core, the concept deals with animating objects in delayed succession to produce fluid motion.
Authored by: Opher Vishnia
JavaScript Optimization Patterns (Part 2)
Following up on part one of this series last week, here’s another (hopefully interesting) episode about optimization patterns for JavaScript (based on my background working on the V8 engine for more than four years).
Authored by: Benedikt Meurer
Micro frontends-a microservice approach to front-end web development
Having a monolithic approach to a large front-end app becomes unwieldly. There needs to be a way of breaking it up into smaller modules that can act independently.
Authored by: Tom Söderlund
Clearing your Front End Job Interview
Unlike typical software engineer job interviews, front end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the domain — HTML, CSS, JavaScript, just to name a few areas.
Authored by: Yang Shun
