Industry News

#404 — September 21, 2018

Read on the Web

JavaScript Weekly

A surprisingly quiet week, though maybe it's due to it being issue 404 :-). Nonetheless, there have been a few major version releases, including Nuxt.js 2.0, Next.js 7, and Electron 3 — you'll find those down in the Code and Tools section.

— Peter Cooper, editor

Idle Until Urgent: A Performance Strategy — When analyzing his site’s ‘first input delay’, Phil noticed all the JavaScript functions being run as the page loaded added up to a significant amount of time. His solution? Only run code in idle periods or when it’s truly, urgently required. Here’s a look at how that works in practice.

Philip Walton

Building a PWA with Angular 6 — A step-by-step walkthrough of building a progressive Web application using the latest Angular and its CLI tools. If you’ve kept away from Angular for a while, this could be a handy reintroduction.

Ahmed Bouchefra

Real-Time Production Error Monitoring for JavaScript Apps — Rollbar automatically tracks all errors in your JavaScript apps and gives you the data & context to debug them fast. Works with Node, React, Vue, Angular, and more. Get unlimited errors during your free trial.

ROLLBAR sponsor

Array.prototype.reverse is Broken on iOS 12 — A rather sneaky bug has made it into WebKit where the reverse method doesn’t mutate an array as expected. It also affects Safari 12 on macOS.

Stack Overflow

Like JavaScript Weekly? Try Our Other Newsletters — We frequently chat with subscribers who didn’t realize we publish other newsletters. We do, over ten of them now :-) Including Frontend Focus, a serverless newsletter, MongoDB Weekly and Postgres Weekly.

Cooperpress

The Making of 'Underrun', a js13kGames Submission — Some notes on what it takes to build a WebGL shooter in just 13KB of total code and assets. Try the game here. And if you like this sort of explanation, there’s another about a game called Bellwoods by Matt DesLauriers.

Dominic Szablewski

Ruby's Hashes and Perl's Autovivification, in JavaScript — Applying concepts from Ruby, like default values, and autovivification (the automatic creation of new collections in place of undefined keys) from Perl in JavaScript.

Reginald Braithwaite

💻 Jobs

Sr. Back End Engineer - Node and Express (Orlando/San Diego/Remote) — You enjoy solving hard problems using technology and Postman is always open on your workstation. You have a GitHub repo with NPM packages.

MJD Interactive

Try Vettery — Create a profile to connect with inspiring companies seeking JavaScript devs.

Vettery

📘 Tutorials and Opinions

Three Features That Could Change the Future of JavaScript — A big ‘could’ though as the features are still being proposed and are under discussion.

Willian Martins

Ways to Think About Module Design — An excerpt from Mastering Modular JavaScript, a new book being released tomorrow.

Nicolás Bevacqua

Design a Custom Payment Form with Square's Payment Form Library

Square Developer sponsor

Build a Simple CRUD App with ASP.NET Core and Vue — If you’re on a .NET stack this might help you out.

Ibrahim Šuta

How to Build an Electron App with Okta-Powered Authentication — Electron is GitHub’s framework for building cross-platform desktop apps with Web technologies.

Matt Raible

Using Scoped Slots in Vue.js to Abstract Functionality

Mateusz Rybczonek

▶  How to Sort Your Socks using JavaScript — A look at the sorting algorithms used by different JS engines and how they vary.

Claudia Hernández

🔧 Code and Tools

worker-plugin: Adds Native Web Worker Bundling Support to Webpack — Automatically compiles modules loaded as Web Workers.

Google Chrome Labs

Build News and Activity Feeds in Days Instead of Months — Stream is an API for building scalable news feeds. Try out the API in this 5-minute interactive tutorial.

Stream sponsor

Sublime Merge: A New Git Client from the Makers of Sublime Text

Sublime HQ Pty Ltd.

Nuxt.js 2.0: Webpack 4, ESM Modules, create-nuxt-app and More — Nuxt.js is a framework for creating universal Vue.js apps.

Nuxt.js

Next.js 7: A Framework for Server-Rendered React Apps — Now a lot faster and using Webpack 4 and Babel 7.

Zeit

Electron 3.0: The Cross Platform Desktop App Framework

GitHub

T-Writer: A Native 'Typewriter Effect' Library — If you want to reproduce the effect of text being typed in real time.

Christopher Cavalea

Build Real-Time Web Experiences with a Simple but Powerful Serverless Backend

Microsoft sponsor

WWWBasic: An Implementation of BASIC for the Web — As well as supporting writing BASIC directly in your HTML, it can also be used as a Node module.

Google

#403 — September 14, 2018

Read on the Web

JavaScript Weekly

Celebrating 10 Years of V8 — The V8 JavaScript engine has had a huge impact on the growth of JavaScript, taking it from being a relatively slow scripting language to something surpassing many other languages on performance. This post celebrates V8’s tenth anniversary with some details about its history and development.

Mathias Bynens

12 Things to Consider When Evaluating Any New JavaScript Library — How do you know if a new technology, tool, or library is worth investing time into? Sacha Greif considers 12 factors to consider including features, stability, community and momentum.

Sacha Greif

⭐️ Master Writing Modern, Professional JavaScript — Take your JavaScript to the next level to find out what it is fully capable of with this comprehensive learning path.

Frontend Masters sponsor

Next Generation Package Management with Tink — tink (formerly ‘crux’) is a new, experimental JavaScript package manager from the folks at npm, Inc, that aims to provoke new thoughts on how package management should be handled.

The npm Blog

You (Probably) Don't Need Moment.js — Moment.js is a popular date and time manipulation library but with some downsides around tree-shaking and mutability. But do you even need it? This repo shows off the alternatives, including many native functions that do similar things.

Various Contributors

Announcing TypeScript 3.1 RC — 3.1 two main additions are mappable tuple and array types plus properties on function declarations.

Microsoft

💻 Jobs

Senior Frontend Developer (Berlin, Germany) — The Digital Concert Hall team is looking for a passionate developer with strong focus on Javascript

Berliner Philharmoniker

Senior Software Engineer in Munich, Germany (React Native) — Build native apps for the world’s largest social network for expatriates in JavaScript. International team.

InterNations

Try Vettery — Create a profile to connect with inspiring companies seeking JavaScript devs.

Vettery

📘 Articles & Tutorials

The 100% Correct Way to Split Your Chunks with Webpack — Know what file-splitting strategy will work best for your site and your users.

David Gilbertson

How to Write 'X' in Both Python 3 and JavaScript — This cheat sheet could be useful to you in both directions, whether coming from Python or wanting to learn some.

Saya

A Conversation With Jez Humble on Accelerate — Jez covers DevOps and its culture, cynicism on teams, and how to drive change slowly through organizations.

CircleCI sponsor

How to Create a Vue.js Plugin in 1 Hour — A complete, straightforward walkthrough, with code.

Francis Cote

How to Deploy a Full-Stack Apollo App with Netlify — How to run an API using Netlify Functions (which itself uses AWS Lambda). And if you’re into serverless, check out our newsletter.

Sashko Stubailo

Sept 18th: Learn The Fastest Way to Build Mobile Apps With Cloud Data — Watch us build Angular web, native iOS and Android apps connected to Cloud Data with 70% shared code.

Progress sponsor

A Speedy Introduction to Web Workers in JavaScript — Web Workers are scripts that run in the background in separate threads and if you’ve not worked with them yet, this is a good primer.

Dan Arias

▶  Discussing Promises and async/await with Valeri Karpov — Valeri is the author of the book Mastering Async/Await.

JavaScript Jabber podcast

Updating a CSS Variable with JavaScript

Chris Coyier

The JavaScript Equality Table Game — Test your JavaScript == equality knowledge with this quirky Minesweeper-esque game.

slikts

🔧 Code and Tools

Introducing GitHub Pull Requests for Visual Studio Code — Review and manage GitHub PRs directly from within VS Code.

Kenneth Auchenberg (Microsoft)

low.js: A Node.js Port for Embedded Devices — V8 is replaced with Duktape, an embeddable JS engine with an even smaller footprint suited for small devices. GitHub repo.

neonious GmbH

Build a Netflix Style Video Delivery Infrastructure

Bitmovin sponsor

wasm-worker: Move a WebAssembly Module Into Its Own Thread

Matteo Basso

NLP.js: Natural Language Utilities for Node.js — Guess the language of a text, stemming/tokenization, sentiment analysis, etc.

AXA

WatermelonDB: A New Database for React and React Native Apps — Offers a new way to handle user data in React apps in a lazy-loading fashion.

Nozbe

d3-dag: Layout Algorithms for Visualizing Directed Acylic Graphs (DAG)

Erik Brinkman

Highway: AJAX Page Navigation with Transitions

Dogstudio

#402 — September 7, 2018

Read on the Web

JavaScript Weekly

Apologies if you notice today's issue is a little lower tempo than usual. We have some great things coming up, including more interviews like Dr. Axel's in issue 399, but today I've been struck by a sickness bug 😷 and have struggled to even get this far. To a better next week! 🙂

— Peter Cooper, editor

How GitHub Removed jQuery From Their Frontend — GitHub has just been able to drop jQuery as a dependency of the frontend code for GitHub.com. This transition has taken years and here’s what they’ve learnt and what libraries have replaced it.

GitHub Engineering

Ky: A Tiny, Elegant HTTP Client for Browsers Based on Fetch — A new HTTP client library for the browser from one man module machine Sindre Sorhus. This one essentially makes the Fetch API tidier to use as shown in the demo code.

Sindre Sorhus

Angular, React or Vue? — How do you choose one JavaScript framework over another for your next web application? Our new whitepaper gives insight into the current state of Angular, React and Vue and how they compare against a comprehensive set of criteria. Download now.

Progress Kendo UI sponsor

Take the 'State of JavaScript 2018' Survey — Sacha Greif’s popular survey returns, aiming to see what tools and technologies in the JavaScript space that developers are using, happy with and excited about. Results are expected in November and we’ll share them then.

Sacha Greif

A Tour of JavaScript Timers on the Web — Want to get your head around setTimeout vs setInterval vs setImmediate vs requestAnimationFrame and others? This will help.

Nolan Lawson

Sqorn: A Fast, Composable SQL Query Builder — Uses a functional style that models query compilation as a series of transformations and also uses ES6 template literals in an interesting way. Worth checking out. Full tutorial here.

Sufyan Dawoodjee

💻 Jobs

JavaScript Developer at X-Team (Remote) — We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team.

x-team

Find A JavaScript Job Through Vettery — Create a profile to connect with inspiring companies seeking JavaScript devs.

Vettery

📘 Tutorials and Opinions

Why Async: How JavaScript Interacts with the Real World — A preview of an as yet unreleased course, but even these three pages might help you out if you’re still learning how promises and async/await can improve your code.

Frontend Armory

Using the Speech Synthesis Interface of the Web Speech API — Get your browser to speak back to you.

Manuel Wieser

How to Build a Multiplayer JavaScript VR Game — Combine A-Frame, PubNub, and WebVR to launch a browser-based VR game.

PubNub sponsor

Making GraphQL Client Requests in Node (and the Browser) using graphql.js

Hugo Di Francesco

How to Use Media Queries from JavaScript — The matchMedia method is the key.

Craig Buckler

Goodbye Redux — “A complete breakdown on why we needed Redux in the past, and why we don’t any more.”

Jack Scott

Reduce JavaScript Payloads with Code Splitting

Google Developers

To Grok A Mockingbird: Using Recursive Combinators to Enhance Functional Composition — One for the functional programming fans :-)

Reg Braithwaite

Webinar: Optimizing MongoDB Performance on AWS

mongodb sponsor

Using Babel 7 and 'preset-typescript' to Compile an Angular 6 App

Hubert Zub

TypeScript with Babel: A Beautiful Marriage? — TypeScript has never been easier to adopt thanks to the new TypeScript plugin for Babel.

Matt Turnbull

How We Got a 100% Lighthouse Performance Score for a Vue.js App — Lighthouse is a performance auditing tool embedded in Chrome.

Tim Nolet

Making Calls from a Browser with Vue.js and Nexmo In-App Voice

Phil Leggetter

Building A Flexible Image Uploader Component using Vue.js 2.0

Cathy Ha

🔧 Code and Tools

date-fns: A Modern Date Utility Library — It’s “like lodash for dates” and can really get your bundle sizes down says Addy Osmani.

Sasha Koss

Taking Payments Online with Square and Vue.js — Take online payments in a custom form using Vue and the Square Payment Form.

Square Developer sponsor

Angular Fire v5.0: The Official Library for Using Firebase from Angular

Angular

React 16.5.0 Released — For more, refer to this week’s React newsletter.

React GitHub Repo

#401 — August 31, 2018

Read on the Web

JavaScript Weekly

Babel 7.0 Released: The JavaScript Transpiler — A significant release for the popular JavaScript compiler. Some links to help you navigate your way:

• If you need just one reason to upgrade, 7.0 is a lot faster.
  


• There's a new upgrade tool to help you migrate.


• TypeScript support is now baked in.


• 
  Stage presets were removed. Here's why and how to deal with it.


• 
  Planning for 7.0 and Nearing the 7.0 Release will bring you up to date with what it's taken to get this far.

Cheat Sheet: Functional Programming with JavaScript — JavaScript developers, here’s a handy resource for your reference stack. This cheat sheet structures some of the language features most commonly used by JavaScript developers interested in writing functional style code. Check it out.

Progress Kendo UI sponsor

This Week's Node Weekly Newsletter — If you’ve ever wondered why there isn’t a lot of Node stuff in JavaScript Weekly, it’s because we have a separate newsletter for that! This week we covered a V8 vulnerability and how to use Docker for Node.js development.

Cooperpress

v86: x86 Virtualization in JavaScript — Works in both the browser and Node. Check out the demos running Windows 98, Linux, and other operating systems.

Fabian Hemmer

What's Coming Up in 'JavaScript 2018' — The latest annual ECMAScript update, published in June 2018, is the largest yearly release so far, although still far smaller than ECMAScript 6 with its backlog of already common features.

Mary Branscombe

Lerna Added (Then Removed) A License Term Blocking Some Companies From Using It — If you’re not on social media, you may have missed this story which has since concluded. Lerna, a popular tool for working with monorepos, relicensed itself to block its use at a variety of companies (including Microsoft) but after a lot of discussion and community feedback, this was reverted.

Lerna

💻 Jobs

Senior Front End Engineer at External Data Systems, Netflix — Help build a world class user interface for the platform that collects data to drive business insights for our teams.

Netflix

Find A JavaScript Job Through Vettery — Create a profile to connect with inspiring companies seeking JavaScript devs.

Vettery

Place your own job listing in a future issue

📘 Tutorials and Opinions

▶  Creating Electronic Dance Music with JavaScript

Walmik Deshpande

Serverless Machine Learning with TensorFlow.js — A thorough look at getting Tensorflow, a flexible machine learning framework, to work properly in a serverless environment.

James Thomas

Building a Serverless App with MongoDB Stitch — MongoDB Stitch is a MongoDB-based serverless platform that can make it quicker to build apps in the cloud. This tutorial is a practical demonstration of using it to build a stock price monitoring app.

Valeri Karpov

Build a Netflix Style Video Delivery Platform — SDKs for all platforms - Play videos at the same quality & speed as Netflix & YouTube.

Bitmovin sponsor

An Introduction to React and How To Build Your First App — Not just a ‘Hello World’ example but an app that uses a router, components, and even does auth with Auth0’s service. Subscribe to our React newsletter if you get a taste for React after this ;-)

Bruno Krebs

Using Cloudflare Workers To Make Static Sites Dynamic — Cloudflare Workers places a serverless JS environment in front of your ordinary site so you can perform various tasks before a request even hits your server.

Paddy Sherry

Dynamic App Themes with CSS Variables and JavaScript

Mike Wilcox

▶  Through the Open Source Looking Glass — A non-technical talk by Babel maintainer Henry Zhu about what it’s like and what it means to be the maintainer of popular open source projects.

Henry Zhu

Why is a 'Java Guy' So Excited About Node.js? — Interesting to hear from someone who worked on the Java team at Sun wax lyrical about JavaScript.

David Herron

Create A Short Digital Address for Any Location w/ AngularJS

DigitalOcean sponsor

Why You Should replace forEach with 'map' and 'filter'

Roope Hakulinen

🔧 Code and Tools

Making a Progressive Web App with Webpack Just Got Easier — webpack-web-app-manifest-plugins generates a PWA manifest and integrates with the assets JSON.

Tumblr

babel-upgrade: A New Tool for Automtically Upgrading Projects to Babel 7 — In case you missed it at the top of the issue!

Babel

Catch JavaScript Errors Before Users Do — Detect JavaScript errors in real-time, then debug them in minutes. Works with Node, React, Angular, and more.

ROLLBAR sponsor

goodshare.js: A Vue.js Component for Social Sharing Buttons — Full example here.

Vic Shóstak

Wexond: A 'Web Browser' Built on Electron and React — An interesting idea. Being Electron-based, it’s using Chromium for rendering, but the UI/chrome is React and styled-components.

Wexond

Code Surfer: A React Component for Scrolling, Zooming and Highlighting Code Samples

Rodrigo Pombo

size-plugin: Track Compressed Webpack Asset Sizes Over Time

Google Chrome Labs