#405 — September 28, 2018

Read on the Web

JavaScript Weekly

30 Seconds of Code: A Curated Collection of Useful JavaScript Snippets— We first linked this project last year, but it’s just had a ‘1.1’ release where lots of the snippets have been updated and improved, so if you want to do lots of interesting things with arrays, math, strings, and more, check it out.

30 Seconds

Mastering Modular JavaScript— Nicolas has been working on this book about writing robust, well-tested, modular JavaScript code for some time now, and it’s finally been published as a book. You can read it online for free too, or even direct from the book’s git repo.

Nicolas Bevacqua

Burn Your Logs— Use Sentry's open source error tracking to get to the root cause of issues. Setup only takes 5 minutes.

Sentry sponsor

Parcel 1.10.0 Released: Babel 7, Flow, Elm, and More— Parcel is a really compelling zero configuration bundler and this release brings Babel 7, Flow andElm support. GitHub repo.

Devon Govett

TypeScript 3.1 Released— TypeScript brings static type-checking to the modern JavaScript party, and this latest release adds mappable tuple and array types, easier properties on function declarations, and more. Want to see what’s coming up in 3.2 and beyond? Here’s the TypeScript roadmap.

Microsoft

💻 Jobs

Mid-Level Front End Engineer @ HITRECORD (Full Time, Los Angeles)— Our small dynamic team is looking for an experienced frontend developer to help build and iterate features for an open online community for creative collaboration.

Hitrecord

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

Vettery

📘 Tutorials and Opinions

Creating Flocking Behavior with Virtual Birds— A gentle and effective walkthrough of creating and animating flocks of virtual birds.

Drew Cutchins

Rethinking JavaScript Test Coverage— The latest version of V8 offers a native code coverage reporting feature and here’s how it works with Node.

Benjamin Coe (npm, Inc.)

Getting Started with the Node-Influx Client Library— The node-influx client library features a simple API for most InfluxDB operations and is fully supported in Node and the browser, all without needing any extra dependencies.

InfluxData sponsor

How Dropbox Migrated from Underscore to Lodash

Dropbox

Create a CMS-Powered Blog with Vue.js and ButterCMS

Jake Lumetta, et al.

Understanding Type-Checking and 'typeof' in JavaScript

Glad Chinda

Airbnb's Extensive JavaScript Style Guide— Airbnb’s extremely popular guide continues to get frequent updates.

Airbnb

Webinar: Getting the Most Out of MongoDB on AWS

mongodb sponsor

16 JavaScript Podcasts to Listen To in 2018— Podcasts, like blogs, have a way of coming and going, but these are all ready to listen to now.

François Lanthier Nadeau podcast

Five Tips to Write Better Conditionals in JavaScript

Jecelyn Yeen

🔧 Code and Tools

Tabulator: A Fully Featured, Interactive Table JavaScript Library— Create interactive data tables quickly from any HTML table or JavaScript or JSON data source.

Oli Folkerd

Vandelay: Automatically Generate Import Statements in VS Code

Visual Studio Marketplace

APIs and Infrastructure for Next-Gen JavaScript Apps— Build and scale interactive, immersive apps with PubNub - chat, collaboration, geolocation, device control and gaming.

PubNub sponsor

Apify SDK: Scalable Web Crawling and Scraping from Node— Manage and scale a pool of headless Chrome instances for crawling sites.

Apify

Cloudflare Adds a Fast Distributed Key-Value Store to Its Serverless JavaScript Platform

Stephen Pinkerton and Zack Bloom (Cloudflare)

turtleDB: For Building Offline-First, Collaborative Web Apps— It uses the in-browser IndexedDB database client-side but can then use MongoDB as a back-end store for bi-directional sync.

turtle DB

An Example of a Dynamic Input Placeholder— This is a really neat effect.

Joe B. Lewis

#406 — October 5, 2018

Read on the Web

JavaScript Weekly

This past week JavaScript Weekly surpassed 150,000 subscribers. Over the past eight years it's been a pleasure to share projects, advice, and news with you, and see how JavaScript continues to grow and grow. We don't do it often, but sometimes its nice to mark such a milestone — if you're reading this I just wanted to say thanks. :-)
— Peter Cooper, editor

A Beginner's Guide to JavaScript Prototypes— It’s aimed at beginners but this guide is really extensive and packed with examples, so it’s worth a skim unless you’re Kyle Simpson or something :-)

Tyler McGinnis

Plans for the Next Iteration of Vue.js— The creator of Vue.js, a popular alternative to things like React and Angular, gives a ‘brief sneak peek’ at what’s coming in the next major version of Vue, Vue 3.0.

Evan You

Accurately Locate Users By IP Address— Use our fast IP Geolocation API to reliably locate users, personalize content, analyze traffic, enrich forms, target ads, enforce GDPR compliance, perform redirections, prevent trial abuse, block certain countries and more. Get started with a free API key.

ipdata sponsor

Create React App 2.0 Released— A significant release of a project that’s had a huge effect on the adoption of React by making it easier to get a project started. Psst.. we have a React newsletter too.

Joe Haddad and Dan Abramov

The Node.js Foundation and JS Foundation Plan to Merge— Isomorphic foundations! This could also explain why the forthcoming Node+JS Interactive conference was renamed from JS Interactive recently :-)

The Linux Foundation

'Goodbye' JavaScript, Hello WebAssembly— It’s not been pushed to its full potential yet, but WebAssembly (a binary instruction format that compilers can target to run code fast in the browser) opens up a lot of potential for the Web, though, as Ed notes, JavaScript continues to have a role to play.

Ed Charbeneau

How To Build a News App with Angular 6 and Material Design— We always love a good Smashing Magazine walkthrough - this time out, it’s about building a basic news app (for both desktop and mobile) using Angular and Google’s Material Design principles.

Rachid Sakara

Awesome VS Code: A Curated List of VS Code Packages and Resources— Yep, it’s one of those‘awesome’ lists - this time it’s a list packed with over a hundred links to themes and extensions, both language specific and general productivity ones.

Valerii Iatsko

💻 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

Mid-Level Front End Engineer @ HITRECORD (Full Time, Los Angeles)— Our small dynamic team is looking for an experienced frontend developer to help build and iterate features for an open online community for creative collaboration.

Hitrecord

Join Our Career Marketplace & Get Matched With A Job You Love— Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.

Hired

📘 Tutorials and Opinions

Building a Complex Financial Chart with D3 and d3fc— Reproducing the sort of graph you might see on Yahoo Finance, say.

Colin Eberhardt

Using React/JSX as a Server-Side Templating Language— Using React function components to render your website’s skeleton index.html

Kent C. Dodds

Barcode Detection in a Web Worker using Comlink— Comlink is a library that makes WebWorkers more transparent to work with.

Paul Kinlan

5 Reasons Why You Might Want to Join Us for SIGNAL on Oct 17 & 18

Twilio sponsor

What's New with Components as of Ember 3.4

David Tang

Working with Babel 7 and Webpack— Goes through setting up a project with Webpack and Babel 7, highlighting the basics of Babel plus some cool features of what it can do with your code.

Jan D'Hollander

Professor Frisby's Mostly Adequate Guide to Functional Programming— If you’ve got some spare time at the weekend and want to get into some FP with JS, this is a good read.

Lonsdorf, Benkort, Takle, et al.

How to Build Serverless Vue Applications with AWS Amplify— We also have a serverless newsletter if that’s your kinda thing.

Nader Dabit

A Very Basic Introduction to Custom Elements

James Robb

🔧 Code and Tools

Husky: Git Hooks Made Easy— Prevent bad commits, pushes, etc. by running tests or more automatically. 1.0, now just out, is a complete rewrite in TypeScript.

Typicode

The TDD Experience That Gives You In-Line Test Results as You Type— Wallaby catches errors in your tests and displays the results of expressions in your editor, in real-time.

Wallaby.js sponsor

Sal: Lightweight Scroll Animation Library— Coming in at just 2.8KB, this vanilla JS library is performance focused with no dependencies. GitHub repo.

Mirosław Ciastek

Highground.js: ES6-Focused Unit Testing— Highground is currently in beta and presents an alternative fast and easy way to test ES6 apps.

Daniel Stern

ekill: A Chrome Extension to 'Nuke' Annoying Elements on a Web Page— Could be useful in development as well.

René Hansen

Automated Visual Testing and Reviews on Each Commit— Replace time-consuming manual QA to catch visual UI bugs automatically and start deploying faster.

Percy sponsor

Wax: Experimental, JSX-compatible Renderer for the Web Audio API— An interesting idea that brings a JSX-style approach for managing audio nodes.

James Wright

imgToAscii: A JavaScript Image to ASCII Converter— Runs in the browser, too.

Victor Ribeiro

Fanray: A Blog System Built with ASP.NET Core and Vue.js— Runs on .NET Core 2.1 and SQL Server.

Ray Fan

#407 — October 12, 2018

Read on the Web

JavaScript Weekly

Calls Between JavaScript and WebAssembly Are Finally Fast— JavaScript is fast. WebAssembly is fast. But the interoperability between the two is where things can lag a little. In the latest Firefox, this has changed, and here’s an amazingly accessible writeup of the how and why. You will learn something here.

Lin Clark

13 Games in Under 13KB of JavaScript— A look at some of GitHub’s favorite entries to the recent js13kGames 2018 competition where you have to build a game in under 13 kilobytes, assets and all.

GitHub

Level Up Your JavaScript Error Monitoring 🚀— Identify impactful errors at a glance. Sort errors by event count or users impacted to find ones that occur most frequently or affect a large segment of users. Get to the root cause of errors quickly with automatic diagnostic collection. Try it free.

Bugsnag sponsor

Rethinking Unit Test Assertions— “Well written automated tests always act as a good bug report when they fail, but few developers spend time to think about what information a good bug report needs.”

Eric Elliott

▶  What’s New in Create React App 2.0: A Video Series— Create React App 2.0 is only a week old, but Elijah Manor has already put together a set of handy, brief videos on using it for egghead.io.

Elijah Manor

Ways to Eliminate Common React Performance Issues— A pragmatic step-by-step guide to eliminating common React-related performance issues. And if you like this, hop over to our React-specific newsletter for more :-)

Ohans Emmanuel

The ARM Instruction Set Now Includes JavaScript-Focused Optimizations— The iPhone XS is already trumping even the iMac Pro on a particular JS benchmark, and it looks set to go further.. Interesting times! (Very) technical details here.

John Gruber

💻 Jobs

Senior Full-Stack JavaScript Engineer— Small, smart teams, challenging work, modern tech, great benefits, and a carefully curated emoji library. 100% Remote.

SITEPEN

Platform Engineer - React, GraphQL & Node.js (NYC)— Bustle is seeking engineers to help us build a world-class serverless publishing platform at a mind-boggling scale.

Bustle Digital Group

Join Our Career Marketplace & Get Matched With A Job You Love— Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.

Hired

📘 Articles & Tutorials

Isaac Z. Schleuter on the Node + JS Foundation Merger— The creator of npm shares his excitement about the recently announced merger.

The npm Blog

Dockerizing Java Apps with CircleCI and Jib— The evolution of deployment platforms and orchestration engines has been a tremendous accelerant for application and infrastructure teams alike.

CircleCI sponsor

Getting Started with Nuxt.js— Nuxt.js is a framework for creating universal (both front-end and back-end) Vue.js-powered apps.

Nosa Obaseki

What You Need to Know About Vue CLI 3— Vue CLI provides a standard build toolchain for Vue.js apps.

Alex Kyriakidis

Using Nested Forms in Angular 6

Neel Bhatt

How to Create Custom Angular Pipes and Dynamic Locales

Michael Karén

Build a Text-To-Speech Chat App with Amazon Polly— Accessibility shouldn’t be overlooked. Allow chat users to play chat messages with natural language.

ChatEngine sponsor

Taming this in JavaScript with the Bind 'Operator'— A pretty complete tutorial on a JavaScript feature that doesn’t exist yet, though the author hopes it will help champion its case and hopes you’ll star its proposal. See what you think.

Willian Martins

My Serverless Adventure— A JavaScript developer shares his initial experiences, pitfalls, best practices, and tips for building serverlessly using AWS Lambda and the Serverless framework.

Mateo Karadza

🔧 Code and Tools

JavaScript Visualizer— A tool for visualizing execution contexts, hoisting, closures, and scopes in the browser.

Tyler McGinnis

InfluxDays: The Only Event Focused on the Impact of Time Series Data

InfluxData sponsor

Aurelia CLI 1.0 Beta 1: Now with an Auto-Tracing Bundler— At 4 years old, Aurelia, a next-gen client app framework, continues to innovate both with a new bundler and vNext, a raft of ideas to improve the framework under the hood.

Chunpeng Huo

Muze: Build Composable Data Visualizations for the Web— Composable, can be themed with CSS, supports dynamic binding for tooltips and other ‘reactions’, stackable layouts..

Charts.com

mb: Exception-Free Nested Nullable Attribute Accessor— It’s literally 51 bytes of code. Figure out how it works for a fun exercise.

Burak Can

Flatbush: Fast Static Spatial Index for 2D Points and Rects— We first linked this several months ago but a new version is now out.

Vladimir Agafonkin

BBob: Fast, Pure JavaScript BBCode Transforming and Parsing— BBCode is a text markup format commonly used on forums and wikis.

Nikolay Kostyurin

Walt: A JS-Like Syntax for the WebAssembly Text Format— An in-progress experiment for using a JS-inspired alternative syntax for WebAssembly to write to as ‘close to the metal’ as possible.

Arthur Buldauskas

Ember 3.4 Released

The Ember Team

#408 — October 19, 2018

Read on the Web

JavaScript Weekly

33 Concepts Every JavaScript Developer Should Know— A curated collection of links to tutorials on 33 different areas of JavaScript it’s worth understanding well, including types, closures, equality, scope, and different JavaScript engines.

Leonardo Maldonado

Angular 7 Released— A major release with upgrades for the entire Angular platform from the core framework to Angular Material and the CLI tools.

Stephen Fluin (Google)

Adopting a New Tool for Your Team - 5 Tips for Success— Bringing any new tool into an organization can feel like an uphill battle. It’s difficult to overcome inertia, even with the promise of improved workflows and happier teammates.

CircleCI sponsor

Omi: A 'Next Generation' Web Framework in 4KB of JS— Built around JSX, Web Components, and Shadow DOM. Check out the ‘one minute’ example code to see if you like their approach.

Tencent

The Ultimate Guide to Execution Contexts, Hoisting, Scopes, and Closures in JavaScript— Any article starting ‘The Ultimate Guide to..’ usually makes me raise my eyebrows, but in this case it’s Tyler so it’s OK :-)

Tyler McGinnis

Smart Bundling: How To Serve Legacy Code Only To Legacy Browsers— More browsers than ever are releasing frequent updates and supporting modern standards, so with code size rising fast, is it time to rethink asset delivery for the modern web?

Shubham Kanodia

Why Using reduce() to Sequentially Resolve Promises Works— A must read if you’re trying to sequentially resolve a bunch of promises in order, one after the other.

Alex Macarthur

💻 Jobs

Sr. Backend Engineer - Node.js / React / MongoDB (San Francisco)— We’re changing healthcare. Join us and help us scale our core Node backend platform that connects patients and doctors.

Luma Health

Distribute Systems Engineering with Node.js— If consensus algorithms and distributed systems pique your interest, join the team behind our global fault-tolerant messaging platform.

Ably Realtime

Join Our Career Marketplace & Get Matched With A Job You Love— Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.

Hired

📘 Tutorials and Opinions

How to Stop using console.log() and Start using Your Browser’s Debugger— This blew up on Twitter, emphasizing just how common console.log debugging is :-)

Parag Zaveri

Searching and Sorting Text with Diacritical Marks in JavaScript— The art of normalizing Unicode text.

Paul Springett

5 Tips to Write Better Conditionals in JavaScript

Jecelyn Yeen

How Do Top Developers Deliver Video? - Download the 2018 Video Report

Bitmovin sponsor

Ruby Gotchas for the JavaScript Developer— I’d not thought of people picking up Ruby after JavaScript, but as it appears to happen, this may be of use.

Dmitry Pashkevich

Eliminate An Entire Category of Bugs with a Few Simple Tools— Be sure to use ESLint, Prettier, and Flow or TypeScript says Kent.

Kent C. Dodds

Creating an Interactive Map with D3 and Vue.js— How to display maps using both D3 and JSX. Live demo. Source code.

Mikhail Panichev

🔧 Code and Tools

Evergreen: A React UI Framework— Polished React components from buttons and text inputs to menus, side sheets and tables.

Segment

A Much Faster Way to Debug Code Than with Breakpoints or console.log— Wallaby catches errors in your tests and displays the results of expressions right in your editor as you type.

Wallaby.js sponsor

LoopBack v4 Released: The Node.js API Framework— To create a REST API you can now just decorate classes with OpenAPI compatible metadata. Full announcement post.

IBM

graphql.js: A Simple and Isomorphic GraphQL Client

Fatih Kadir Akın

billboard.js: A Simple Chart Library Based on D3 v4+

Naver Corp

Eagle.js: A Hackable Slideshow Framework Built with Vue.js— Supports animations, themes, and interactive widgets, and makes it easy to reuse slides and styles across presentations. Demo.

Zulko

Explore the Ext JS Kitchen Sink - 115+ Components for React Apps— Ext JS provides 115+ fully supported UI components that easily integrate into React apps. See our examples.

SENCHA sponsor

Styled Map: A Simpler Way to Map Props to Styles with Styled Components

Scott Michael

Inferno: A Fast, React-like JavaScript Library for Building Modern UIs— A long-standing project but version 6 just came out.

Inferno

#409 — October 26, 2018

Read on the Web

JavaScript Weekly

Introducing React 'Hooks'— Hooks are a proposed new feature for using state and other React features without writing classes. You can try them out in an alpha build of React 16.7 and keep up with discussion in this RFC.

React

WebAssembly’s Post-MVP Future: A Cartoon Skill Tree— A fantastic guide to understanding where WebAssembly fits into the big picture, what’s yet to come, and what impact WebAssembly could have on the Web.

Mozilla Hacks

⚛️ New Course: Complete Intro to React, v4— Learn to build real-world applications in React. Much more than an intro, you’ll start from the ground up all the way to using the latest features in React 16+ like Context and Portals. We also launched a follow up course, Intermediate React.

Frontend Masters sponsor

V8 Version 7.0— A brief update on the latest beta of the V8 JavaScript engine. It goes stable when Chrome 70 comes out soon, but is also included in Node 11.0.

Michael Hablich

Playing Mortal Kombat with TensorFlow.js— A detailed walkthrough of what it took to building a posture classification algorithm using TensorFlow.js and MobileNet in order to play the ‘beat-em-up’ game Mortal Kombat.

Minko Gechev

▶  Discussing the State of JavaScript with Addy Osmani— A discussion with Addy Osmani about the state of JavaScript and his favorite performance tools. Just 13 minutes so ideal if you get a quick break.

Google Chrome Developers

LazyBrush: Smooth Canvas Drawing with Any Pointing Device— Uses a mechanism to allow users to create smooth lines and curves. Works with both mouse and touch. The demo is neat.

Jan Hug

💻 Jobs

Sr. Fullstack Engineer (Remote)— Sticker Mule is looking for passionate developers to join our remote team. Come help us become the Internet’s best place to shop and work.

Sticker Mule

ReactJS Developer at Komoot (Remote)— Millions get inspired and plan adventures with our apps. To help us make Komoot the place to go to plan outdoor adventures, we’re looking for an ambitious React developer to join our team.

Komoot

Join Our Career Marketplace & Get Matched With A Job You Love— Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.

Hired

📘 Tutorials and Opinions

The Intl.RelativeTimeFormat API— Enables localized formatting of relative times without sacrificing performance. Chrome 71+ only so far.

Google Developers

Airbnb's Extensive JavaScript Style Guide— Airbnb’s extremely popular guide continues to get frequent updates.

Airbnb

Understanding Currying in JavaScript— Currying is a way in functional programming for turning a function with multiple arguments into a chain of nested functions.

Chidume Nnamdi

The Importance of Readable and Reusable Tests: Why We Built Gauge— Strong design opinions can cause teams to over-engineer test suites, making maintenance hard. Gauge solves this, helping you to create easy to maintain tests.

Gauge sponsor

Property Order is Predictable in JavaScript Objects Since ES2015— Useful to know, I hadn’t realized this.

Stefan Judis

▶  Internationalize your Web Applications with Globalize.js

Alolita Sharma

▶  Create an Engaging Native Mobile App with Vue and NativeScript

Jen Looper

How to Create Custom HTML Markers on Google Maps

Dan Ward

Top 10 Things to Avoid When Considering Low-Code

Progress Kinvey sponsor

How to Reduce the Impact of JavaScript on Page Load Times— Lessons learned from serving billions of pageviews across thousands of sites.

GoSquared Engineering

Isoline Routing in an Angular Application using the HERE Routing API— Isoline routing is used to calculate an area that can be reached within a certain travel time or distance.

Nic Raboy

🔧 Code and Tools

A Promises and async/await Cheatsheet

Frontend Armory

clean_logs: A Better console.log for the Browser— Wraps around console.log, produces nicer output and provides logging levels.

Pablo Giani

Glean: A Refactoring Tool for React Code

Wix Engineering

What Does JSBin, Nuxt, Code Sandbox, and Material-UI Have in Common?— They all use CodeFund to provide passive income for their projects. Find out if CodeFund can help you.

CodeFund sponsor

IronDB: A 'Relentless' Key-Value Store for The Browser— Relentless in the sense that it redundantly stores data in multiple browser stores (i.e. in cookies, localStorage, sessionStorage & IndexedDB) and tries to ‘self heal’ upon data loss.

Ansgar Grunseid

React v16.6.0 Released— More about this in this week’s React newsletter.

Sebastian Markbåge

Squirrelly: A Fast, Lightweight, and Simple JS Template Engine— Only 2.6KB gzipped and supports partials, helpers, filters, and native code.

Ben Gubler

face-api.js: Face Detection and Face Recognition in the Browser— Uses TensorFlow.js.

Vincent Mühler

#410 — November 2, 2018

Read on the Web

JavaScript Weekly

An Annotated webpack 4 Config for Frontend Development— A very thorough example of a real-world production webpack 4 config that takes modules, CSS, and image optimization into account.

Andrew Welch

Storybook 4.0: The UI Component Workshop— A great tool for building UI components gets a major update which includes support for webpack 4 & Babel 7, React Native, Ember, Svelte, Riot, and more, plus improvements for existing React, Vue and Angular users. If you’re not familiar with Storybook, learn more here.

Michael Shilman

Planning an Angular Application: Whitepaper— Angular devs—take a look at this checklist of things to consider when planning your next Angular app. Make an informed decision about tooling choices during development all the way through to deployment. Get your free copy today.

Progress Kendo UI sponsor

The Evolution of Async JavaScript— A practical break down of the pros and cons of three common JavaScript mechanisms: callbacks, promises, and async/await, along with their significance and progression from a historical context.

Tyler McGinnis

Real Talk JavaScript: A New(ish) JavaScript Podcast— Now at five episodes old, we thought it was time to mention this neat podcast hosted by John Papa, Ward Bell, and Dan Wahlin. Episodes so far cover topics like thriving in OSS, scaling React, and D3.

Real Talk JavaScript

Could We Eventually Use JavaScript with AMP?— AMP (Accelerated Mobile Pages) removes the ability to use JavaScript in order to improve performance, but there’s now a project looking at a way to provide a constrained environment for JavaScript to render things like interactive UI components within an AMP page.

AMP Project

Carlo: Chrome as a 'Web Rendering Surface' for Node Apps— Uses Puppeteer to communicate between a Node app and an existing, locally installed Chrome instance.

Google Chrome Labs

💻 Jobs

Sr. Fullstack Engineer (Remote)— Sticker Mule is looking for passionate developers to join our remote team. Come help us become the Internet’s best place to shop and work.

Sticker Mule

Join Our Career Marketplace & Get Matched With A Job You Love— Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.

Hired

📘 Tutorials and Opinions

The Forgotten History of OOP

Eric Elliott

Learn to Build a Simple Progressive Web App with Angular and Lighthouse— A step-by-step guide to building a Hacker News clone PWA using Angular and Lighthouse.

Aman Mittal

Integrate Video Calling Directly in a Chat App with WebRTC— Allow users to initiate video chats right in any chat app with WebRTC and ChatEngine.

PubNub sponsor

A Simple Intro to React Hooks— Learn how React’s new Hooks feature works, and how Hooks can make your code cleaner and easier to write.

Dave Ceddia

A Look at V8 Release Version 7.1— A look at some of the highlights of the 7.1 release (in beta until Chrome 71 Stable arrives).

V8 Project

Copying Objects in JavaScript— In both shallow and deep ways.

Victor Parmar

Getting Started with Vue Plugins

Francis Cote

Navigating the Spooky World of JavaScript— With the amount of change going on in the JavaScript world, how can we navigate its ecosystem and make the best decisions on what tools to use?

Ali Spittel

A Personal Review of Automated Testing Tools in the JavaScript World

Walmyr Filho

🔧 Code and Tools

three.js r98 Released: The JavaScript 3D Library— The HTML5 Canvas renderer has been removed as WebGL support is now so widespread. There’s also lots to enjoy on the examples page.

Ricardo 'mr doob' Cabello

A Much Faster Way to Debug Code Than with Breakpoints or console.log— Wallaby catches errors in your tests and displays the results of expressions right in your editor as you type.

Wallaby.js sponsor

simple-keyboard: A Slick Virtual JavaScript Keyboard for the Web— Very smooth and easy to customize.

Francisco Hodge

Howler.js: JavaScript Audio Library for the Modern Web

James Simpson

randexp.js: Create Random Strings That Match a Given Regular Expression— For example /hello+ (world|to you)/ could generate hellooooooo world.

fent

A Minimalist Dark Design System for Vue.js— Love the description of “components designed for the insomniacs who enjoy dark interfaces as much as we do.”

Nada Rifki and Julien Le Coupanec

Easily Integrate Ext JS Components into React Apps - View Examples

SENCHA sponsor

Dinero.js: Immutable, Chainable API to Work with Monetary Values

Sarah Dayan

Ervy: ASCII Bar, Pie, and Other Charts on the Terminal

Chunqiuyiyu

simplebar: A Vanilla JavaScript Library for Custom Scrollbars

Adrien Denat

#411 — November 9, 2018

Read on the Web

JavaScript Weekly

Test262 Report: An Up-to-Date Status Report of JS Feature Support— Test262.report is a new site that shows up to date level of support and information on how different JavaScript engines support various language features based on the results of more than 68000 tests.

Rick Waldron and Boaz Sender

Going Beyond console.log()— While console.log() may form the basis of many people’s debugging strategies, the console object has a lot more to offer, as covered here. If you don’t know about console.assert or console.count, step in.

Matt Burgess

Webinar: Reducing the Cost of Enterprise-Grade Mobile Apps— Resourcing problems and changing requirements impact your cost and speed of app delivery. Newer techniques drastically reduce costs and time. Learn more about how enterprises are accelerating development, cutting expenses, and reducing IT app backlog.

Progress Kinvey sponsor

A Netflix Web Performance Case Study— Netflix boosted performance on their frontend by switching from React and other client-side libraries to vanilla JS.

Addy Osmani

JSBI: A Pure-JS Implementation of the ECMAScript BigInt Proposal— The BigInt proposal (essentially arbitrary-precision integers) is due to become an official part of ECMAScript in the near future - this lets you play with it now.

Google Chrome Labs

Glider.js: A Fast, Lightweight Carousel/Scrolling List— Small and sweet, mobile friendly, and the homepage has lots of good demos. Plus, I just noticed it mentions this newsletter 😆.

Nick Piscitelli

Aurelia's 2018 Q3 Report and New Features— Aurelia is a modern front-end framework and it has gained many enhancements recently including a new single-file build you can pull into a page with a single script tag which makes it even easier to try out.

Rob Eisenberg

💻 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

Sr. Fullstack Engineer (Remote)— Sticker Mule is looking for passionate developers to join our remote team. Come help us become the Internet’s best place to shop and work.

Sticker Mule

Join Our Career Marketplace & Get Matched With A Job You Love— Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.

Hired

📘 Tutorials and Opinions

Static Properties in JavaScript Classes with Inheritance— A look at a pattern for implementing static properties in ES6.

Valeri Karpov

Bending Jest to Our Will: Caching Modules Across Tests

Pete Corey

ES6 Proxies Now Supported in Nearly All Mainstream Browsers— Proxies (elegantly explained here) have been one of the last ES6 features to see widespread support in browsers.

Can I Use

A Code-Driven Guide to the HTML5 Canvas— A guide to the Canvas API, one of the best ways to draw graphics dynamically in the browser.

Flavio Copes

▶  Azure Tips and Tricks Video Series— Collection of short videos on using the Azure platform. New videos are released weekly. Subscribe now.

Azure sponsor

▶  How to Package a Polymer 3 App with Webpack

Daniel Persson

A Basic Guide to Getting Started with Angular Material

Rob Ferguson

Building a Donut Chart with Vue and SVG

Salomone Baquis

Patching the Vue.js Virtual DOM: The Need, the Explanation and the Solution— Your first question might well be, why would it be necessary to interfere with the Virtual DOM? Well…

Michael Gallagher

Git Aliases I Can't Live Without— A list of handy Git aliases inspired by the oh-my-zsh suite.

Michal Konarski

How Do Top Developers Deliver Video? - Download the 2018 Video Report

Bitmovin sponsor

5 Things I Didn't Know About Create React App

Blanca Mendizábal Perelló

Advanced CSS Theming with Custom Properties and JavaScript

SitePoint

🔧 Code and Tools

Webpack Bundle Optimization Helper— This online tool will analyze your bundle and give you actionable suggestions on how to reduce its size.

Jakob Lind

A Proof-of-Concept Babel Plugin to Compile React Components Into Native DOM Instructions— Very much an experiment/POC but interesting nonetheless.

Tobias Koppers

Detect JS Production Errors in Real-Time, Then Debug Them in Minutes— Practice proactive error monitoring: stop outsourcing bug discovery to users, or using logs for debugging.

Rollbar sponsor

Culori: A General-Purpose Color Manipulation Library— Supports most color spaces and formats defined in the CSS Colors Level 4 spec and can parse, convert, mix, create color differences, and more.

Moqups

vue-inter: Simple 1KB Internationalization library for Vue.js

EGOIST

Day.js: A 2KB Immutable Date Library Alternative to Moment.js— A minimalist library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API.

iamkun

#412 — November 16, 2018

Read on the Web

JavaScript Weekly

Evan You Previews Vue.js 3.0— The creator of Vue.js presented a look at the future of the popular framework at an event this week. Plenty of performance optimizations are on the cards, plus a goal of getting to just 10KB gzipped. A move from Flow to TypeScript may provoke discussion, however. Slides here.

Gregg Pollack and Adam Jahr

The Power of Web Components— ‘Web Components’ is a set of standards to enable user-defined HTML elements. This is an accessible tutorial that looks at the state of play and how to create your own components with HTML and JavaScript.

Potch (Mozilla Hacks)

How to Brand Yourself or Your Tech Business for the Most Impact— Being passionate about technology reflects in your work, ideas and imagination. But, does it reflect in your online identity too? It’s time for you to choose .TECH, a domain name that is innovative and relevant to who you are.

.TECH Domains sponsor

TNG-Hooks: React-Inspired 'Hooks' for Stand-Alone Functions— An interesting idea inspired by React’s recently proposed Hooks feature.

Kyle Simpson

Faster Async Functions and Promises for V8— A substantial and easy-to-follow exploration of how async functions and promises in V8 have been optimized and how the debugging experience for async code has been improved.

Maya Lekova and Benedikt Meurer (V8)

Slate: A Framework for Building Rich Browser-Based Text Editors— A flexible, plugin-driven framework for building rich, intuitive editors. An established project but with lots of improvements and releases since we last linked it. Play with all the live demos here.

Ian Storm Taylor

Goodbye Electron, Hello Desktop PWAs?— There’s still a long way for progressive webapps to go, but in many use cases the technology is advanced enough to displace typical ‘hybrid’ desktop apps especially when desktop PWA support lands on macOS in Chrome 72.

David Novicki

💻 Jobs

Developer Avocado 🥑 in Beautiful Norway🎉— Passion for React & GraphQL? Love tech evangelism? Join our fast growing GraphQL based e-commerce service Crystallize.

Crystallize AS

Full Stack Engineer, SEO Platform (SF)— The Uber SEO Engineering team is a full-stack team focused on improving Uber's SEO. We build tools, systems, libraries, and features to improve SEO @ scale.

Uber

Join Our Career Marketplace & Get Matched With A Job You Love— Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.

Hired

📘 Tutorials and Opinions

A Guide to Handling Errors in JavaScript

Lukas Gisder-Dubé

React Concepts You Should Know (After You Learn The Basics)— If you’re still pretty new to React, this is for you. You’ve followed some tutorials, maybe got your first React app working, but what’s worth understanding next? Context, HOCs, and lifecycle methods for starters.

Chris Chuck

Handling Complex Data Integrations in JavaScript Apps— Demand for apps is increasing, but integration challenges slow the process. Explore how to tackle complex data integrations in this webinar. Register today.

Progress Kinvey sponsor

Promise Chaining Is Dead. Long Live async/await— One developer makes the argument for stopping using promise chaining altogether and getting entirely on the async/await train.

Alberto Gimeno

Inlining or Caching? Both Please— A look at the potential for using Service Workers and the Cache API to cache inlined assets.

Scott Jehl

Building Offline-First Vue.js Apps with Hoodie & Workbox— Hoodie is a backend for ‘offline-first’ JS apps while Workbox adds offline support to web apps.

Peter Mbanugo

Common Testing Mistakes— A look at some of the common mistakes people make when testing JavaScript applications.

Kent C. Dodds

After Two Years with TypeScript - Was It Worth It?— Contrary to Betteridge’s “law of headlines”, the answer was yes in this case.

Kamil Zagrabski

🔧 Code and Tools

TensorSpace.js: A 3D Visualization Framework for Neural Networks— Provides an intuitive way to visualize and understand pre-trained models built by TensorFlow, Keras, TensorFlow.js, etc. GitHub repo.

TensorSpace Team

Create a Serverless Powered API in 10 Minutes— Use Cloudflare Workers to create and deploy a serverless API to 150+ data centers.

Cloudflare Workers sponsor

Offline PDF Documentation for Node— A handy set of PDFs (weighing in at up to 1080 pages) covering different versions of Node.

Thomas Hunter II

Visual Studio Code October 2018 Edition Released— The JS world’s most popular editor introduces multiline search and better macOS display support, amongst many improvements.

Microsoft

Tiptap: A 'Renderless', Extendable Rich-Text Editor for Vue.js

Scrumpy UG

PLV8: Write JavaScript Functions in PostgreSQL— Did you know you can use JavaScript within Postgres for things like stored procedures and triggers? We also have a Postgres newsletter if this is your sort of thing.

PLV8JS Development Group

A Much Faster Way to Debug Code Than with Breakpoints or console.log

Wallaby.js sponsor

Router: A Simple Framework-Agnostic Router

Kevin Durbin

react-beautiful-dnd: Accessible Drag and Drop for Lists— Version 10 dropped this week. See our React newsletter for more like this.

Atlassian

#413 — November 23, 2018

Read on the Web

JavaScript Weekly

The State of JavaScript 2018— The results of this popular annual survey are out now. React is the clear, dominant front-end framework of choice. Jest and Mocha are neck and neck in the testing space, and Python is the most common other language for JS developers to use.

Sacha Greif

Hyperscript Tagged Markup: A JSX Alternative using Standard Tagged Templates— A clever idea, this. It’s JSX-style syntax but in plain JavaScript (using tagged templates) that requires no special transpilation but still supports things like rest spread and referencing components.

Jason Miller

Create a Serverless Powered API in 10 Minutes— Use Cloudflare Workers to create and deploy a serverless API to 150+ data centers.

Cloudflare Workers sponsor

Experimenting with Brain-Computer Interfaces in JavaScript— Can you use JavaScript to analyze your brain? Yep. It’s fascinating to see the domains JS can be used with. I did something similar with an ECG (heart monitor) recently.

Charlie Gerard

WebSockets: A Conceptual Deep-Dive— An extensive look at the world of WebSockets, the browser technology that can provide a fast, full-duplex persistent connection between a server and client.

Ably

CMS.js: A Client-Side JavaScript Site Generator— A Markdown-oriented site generator in the spirit of Jekyll but with no server-side scripting at all (it simply fetches Markdown from your site and dynamically renders it).

Chris Diana

Google to Pay Frameworks to Implement 'Performance-First' Code— Google is launching a $200K fund to sponsor performance-focused development on third-party JavaScript frameworks.

ZDNet

💻 Jobs

Sr. Angular Engineer at Services/Product Firm (Toronto /Remote)— Do you love Angular and helping teams build products? Join forces with thought-leaders and Fortune 500 teams. Code, teach, speak.

NRWL.IO

Lead Front-End Developer with a Passion for UX (Remote)— Lead our front-end efforts, create tactful and experience-enhancing animations, and ultimately impact the way people learn design.

The Interaction Design Foundation

Join Our Career Marketplace & Get Matched With A Job You Love— Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.

Hired

📘 Tutorials and Opinions

Building an Interactive Infographic with Vue.js— A thorough guide to building a dynamic and interactive infographic using Vue.js, SVG and GreenSock (for animation).

Krutie Patel

Tackling UI Complexity with State Machines

Carlos Galarza

Transducers: Efficient Data Processing Pipelines in JavaScript— The latest in Eric’s series on functional programming techniques in ES6+.

Eric Elliott

Read Now: The Ultimate Guide To npm— Everything you need to know to know to use the npm CLI, from basic building blocks to time-saving tips and tricks.

NodeSource sponsor

Transpiling and Publishing ES2018 npm Modules with Babel 7— How to use the latest and greatest JavaScript features but still ensure your packages can be used by as wide an audience as possible.

Sean van Mulligen

Creating iOS 12 Shortcuts with JS and Shortcuts JS— GitHub repo.

Josh Farrant

Building Your Own Interactive JavaScript Playground— Not something many of us might think we want to do, but it’s interesting to see how we could replicate the underlying functionality of sites like JSBin or Code like CodeSandbox or CodePen if we wanted to.

Krasimir Tsonev

Dart for JavaScript Programmers— Possibly helpful advice if you want to work with Google’s Flutter mobile dev framework.

Hillel Coren

Using Azure Functions and the Marvel API to Visualize Character History— A nice collision of the worlds of Marvel, serverless, and JavaScript.

Raymond Camden

How Do Top Developers Deliver Video? - Download the 2018 Video Report

Bitmovin sponsor

How JSX is a Stellar Invention, Even with React Out of The Picture

Daniel Brain (PayPal)

🔧 Code and Tools

Demoboard: A Live Code/Demo Editor That Integrates with npm

James K Nelson

create-yo: Use Any Yeoman Generator with npm init

Christopher Hiller

Black Friday Sale: Quokka.js - Debug Without breakpoints/console.log— Quokka displays execution results in your editor as you type. Get it now with a 50% discount.

Wallaby.js sponsor

Nivo: D3.js-Powered React Data Visualization Components— Examples and code on the official homepage.

Raphaël Benitte

D3Funnel: A JavaScript Library for Rendering Funnel Charts using D3.js

Jake Zatecky

Awesome Angular GraphQL: A Curated Collection of Resources, Clients and Tools

Hasura

#414 — November 30, 2018

Read on the Web

JavaScript Weekly

How a Popular Node Package Was Compromised— We focused on this story heavily in yesterday’s Node Weekly, but long story short, a malicious developer gained access to a popular npm module and added code that could steal cryptocurrency information.

Zach Schneider

The React 16.x Roadmap— If you’ve been following the React world over the past year, you’ll have run into a variety of new concepts like hooks and ‘Suspense’ and possibly wondered how it all fits into the big picture. This tidily explains all.

Dan Abramov

New Course: Introduction to Node.js by Scott Moss ✨👀— Node.js can be used for build tools, desktop apps, mobile apps, databases, and more. Learn the foundations of Node.js so you can go forward and create fantastic JavaScript apps outside the browser.

Frontend Masters sponsor

A Vue from Ionic: Ionic Gains Support for Vue.js— Ionic is a popular collection of UI components for building high-quality, cross-platform apps both on the Web and natively. It’s historically been aimed at Angular developers but is extending support for Vue.js developers.

The Official Ionic Blog

Announcing TypeScript 3.2— TypeScript (the language that brings static type-checking to JavaScript) gets a variety of improvements here such as type-checking for BigInts, recognition of Object.defineProperty declarations, and stricter checking for bind, call, and apply.

Daniel Rosenwasser (Microsoft)

▶  A Quest to Guarantee Responsiveness: Scheduling On and Off the Main Thread— A 30 minute talk exploring two high-level strategies to improve responsiveness: main thread scheduling, and moving work into background threads (via Web Workers).

Google Chrome Developers

An Extensive Guide to Progressive Web Applications— PWAs use JavaScript and modern Web technologies to provide app-like experiences in the browser. This post wraps up all the pieces that are involved pretty well.

Ankita Masand

💻 Jobs

Sr. Angular Engineer at Services/Product Firm (Toronto /Remote)— Do you love Angular and helping teams build products? Join forces with thought-leaders and Fortune 500 teams. Code, teach, speak.

NRWL.IO

Join Our Career Marketplace & Get Matched With A Job You Love— Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.

Hired

📘 Tutorials and Opinions

Switching to Parcel from Webpack— How to take a Webpack config that handles Sass, Babel, vendor-prefixing, plus more, and do it with Parcel instead.

Sunil Sandhu

A Complete Guide To Routing in Angular— An introduction to Angular Router and using it to create client-side apps and Single Page Apps with routing and navigation.

Ahmed Bouchefra

Using Promise.prototype.finally() in TypeScript— Lets you execute a callback function once the promise that it’s called on has been settled.

Marius Schulz

The Subtle Art of Code Golf in JavaScript— Code ‘golf’ is the art/hobby of reducing code to as small a footprint as possible - usually for fun or as a challenge. Here we get to see some practical ways to do this.

Thomas Lesscake

Handling Complex Data Integrations in JavaScript Apps

Progress Kinvey sponsor

The JavaScript Object Paradigm and Prototypes Explained Simply

Sean Maxwell

▶  How Math In JavaScript Can Be Awesome— How JS is becoming a great platform for mathematics and scientific computing in areas like deep learning and numerical analysis.

Dominic Kramer

Comparing JavaScript HTTP Request Libraries— Surface level summaries of Supertest, the Fetch API, Axios, Request, and SuperAgent.

Chidume Nnamdi

A Set of Best Practices for JavaScript Projects

Elsewhen

🔧 Code and Tools

ncc: The Node.js Compiler Collection— Outputs a self-contained script that bundles all its dependencies by using webpack.

ZEIT

Spin Up a Continuous Delivery Server in Less Than 5 Minutes— Trying out CD tools can take some time, so the GoCD team created a quick start option for new users. Try now.

GoCD sponsor

Sortable: A Reorderable Drag-and-Drop List Library— Well established and happy on both desktop and mobile/touch. Live demos here.

Lebedev Konstantin

CoolTextArea: A Vue Textarea with Embedded Emoji Picker— GitHub repo.

Kevin de Faveri Aguiar

progress-estimator: A Progress Bar and Time Estimate for Promises— Tracks time between responses to make the completion time estimates more accurate.

Brian Vaughn

Become More Productive with the IDE That Understands Your Code— With smart code completion and powerful refactorings, WebStorm makes it easier to work with complex projects.

WebStorm sponsor

Vue Lazy Image Loading: Lazy Image & Background Loading Plugin

Artur Subotkevič

Cytoscape.js: Graph/Network Visualization and Analysis Library

Cytoscape Consortium

#415 — December 7, 2018

Read on the Web

JavaScript Weekly

IntelliCode for JavaScript and TypeScript in VS Code— The popular VS Code editor gains support for IntelliCode for JavaScript (and TypeScript) users. IntelliCode is a feature that recommends commonly used completion items based upon the current context in your code and is an interesting step in Microsoft’s experiments with practical ‘AI-assisted development’.

Microsoft

This Year in JavaScript: 2018 in Review and npm’s Predictions for 2019— JavaScript is the world’s most programming language, npm plays host to over 800,000 libraries, GraphQL’s popularity is booming, and the most popular other languages JavaScript developers use are Java, PHP and Python.

The npm Blog

Low-Code Platforms: What Developers Think and Why— No and low-code platforms are being touted as the solution to the increasing demand on dev teams. But how do professional developers feel about these platforms? We polled more than 5,000 devs to find out. Check out this infographic for a summary of the results.

Progress Kinvey sponsor

Bridging the Gap Between CSS & JavaScript: CSS-in-JS— As front-end components continue to be built with lashings of JS, the idea of writing CSS within that JavaScript to style things at the component level has become more popular.

Matija Marohnic

Take npm's 2018 JavaScript Ecosystem Survey— npm, Inc., the maintainers of the main Node package repository, request your input to help them improve their tools and services. While we’re at it, Vue.js is doing a State of Vue.js survey too.

npm, Inc.

Babel 7.2.0 Released with Private Instance Method Support— There’s a proposal for JavaScript to support private instance methods and variables (by prefixing their names with #) and Babel already supports it as seen here.

Nicolò Ribaudo

TUI Editor: A Markdown WYSIWYG Editor Control— An editor for working both with CommonMark and GitHub flavors of Markdown in both a Markdown-focused or WYSIWYG editor mode.

NHN Entertainment

💻 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

Angular Architect at New Service/Product Firm (Toronto /Remote)— Join forces with the highest concentration of Angular expertise outside of Google. Build products, work on OSS, teach, and speak.

NRWL.IO

Join Our Career Marketplace & Get Matched With A Job You Love— Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.

Hired

📘 Tutorials and Opinions

Modern JavaScript Explained For Dinosaurs— This article is a year old but has been doing the rounds again - it truly is a great read if you feel a little out of touch with ‘modern’ JavaScript and where things like npm and webpack fit in.

Peter Jang

Overreacted: A New Blog by React Expert Dan Abramov— There are already three great posts covering super(props), $$typeof and explaining how React tells a class from a function.

Dan Abramov

How Do Top Developers Deliver Video? - Download the 2018 Video Report— Hundreds of developers around the world reveal their preferred video streaming solutions.

Bitmovin sponsor

Should We Use JavaScript to Load Our Web Fonts?— Browser support for new and safer CSS-only font loading strategies have left some devs wondering: are JS methods to load web fonts now necessary/useful?

Zach Leatherman

Drawing Lines in HTML with JS and the Bresenham Line Algorithm— A neat way to understand a common graphics algorithm.

Greg the JavaScript Teacher

How to Install Vue and Build An SPA using Vuetify and Vue Router

Jennifer Bland

Register Today: Q&A Broadcast about Angular Ivy with Nrwl + Rob Wormald from Google

NRWL.IO sponsor

So What’s New in TypeScript 3.2?

Nwose Lotanna

🔧 Code and Tools

jsPDF: Client-Side PDF Generation for Everyone— There’s a live, interactive demo here.

James Hall

ForgJs: A Lightweight JavaScript Object Validator— You can validate data types, whether values are in certain ranges or of a certain length, etc.

oussama hamdaoui

Connect, Deliver, Control— Build and scale interactive, immersive apps with PubNub - chat, collaboration, geolocation, device control and gaming.

PubNub sponsor

chrome-aws-lambda: A Chromium Binary for AWS Lambda— A project to make it easy to use a headless Chrome instance from your AWS Lambda serverless functions.

Alix Axel

Emotion 10 Released: A CSS-in-JS Library— Project homepage.

Mitchell Hamilton

react-redux 6.0.0: Official React Bindings for Redux— Don’t forget we have a React newsletter where we focus more on things like this.

Redux

Screenshoteer: Make Web Page Screenshots from the Command Line— Controls headless Chrome with Puppeteer behind the scenes.

Vladimir Carrer

Eagle.js: A Hackable Slideshow Framework Built with Vue.js

Zulko

array-back: Takes Any Input and Guarantees An Array Back— Or an “isomorphic arrayify function” if you prefer that :-)

Lloyd Brookes

imaskjs: A Vanilla JavaScript Input Mask— Covers formats like dates and phone numbers, but also regexes. There are also plugins to use it more easily with Vue, Angular, and React.

#416 — December 14, 2018

Read on the Web

JavaScript Weekly

Pika: A Searchable Catalog of ES Module npm Packages— Most packages in the main npm repository are published as Node.js/Common.js-style modules which aren’t so good for front-end development. Pika lets you search only for fast, modern packages using the ES module syntax.

Fred K. Schott

A Guide to the CSS Object Model (CSSOM)— If you’ve written JavaScript in a front-end context, you’ve undoubtedly dealt with the DOM (Document Object Model) but there’s also the CSS Object Model, a set of APIs allowing the manipulation of CSS from JavaScript. A lot of detail and examples here.

Louis Lazaris

Level Up Your JavaScript Error Monitoring 🚀— Identify impactful errors at a glance. Sort errors by event count or users impacted to find ones that occur most frequently or affect a large segment of users. Get to the root cause of errors quickly with automatic diagnostic collection. Try it free.

Bugsnag sponsor

Quicklink: Faster Subsequent Page-Loads by Prefetching Visible Links— A new project from Google Chrome Labs that aims to make subsequent page loads quicker by prefetching links that are currently in the view point during idle time.

Google Chrome Labs

19 Ways to Become a Better Node Developer in 2019— Highlights tips, skills and strategies that may prove valuable over the coming months. This was very popular in yesterday’s Node Weekly and most of the points are applicable to all JavaScript developers.

Yoni Goldberg

A Look at Public and Private Class Fields— Several proposals expand JavaScript’s existing class syntax with new features such as public class fields in V8 v7.2 and Chrome 72, as well as private class fields later on. Here’s how it looks.

Mathias Bynens

JavaScript Growth and Third Parties— Web performance expert Steve Souders doesn’t pull any punches here: “JavaScript is the main cause for making websites slow. Ten years ago it was network bottlenecks…”* Performance budgeting and monitoring is a must.

Steve Souders

💻 Jobs

Sr. Fullstack Engineer (Remote)— Sticker Mule is looking for passionate developers to join our remote team. Come help us become the Internet’s best place to shop and work.

Sticker Mule

Sr. Back-End Developer - Node/Mongo/Angular/AWS (Atlanta)— Growing HealthIT startup with modern stack. Major focus on company culture and prof. development. Competitive comp+options.

FLORENCE

Join Our Career Marketplace & Get Matched With A Job You Love— Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.

Hired

📘 Tutorials and Opinions

Creating My First Chrome Extension— A ‘generous measure of know-how’ on the subject of creating extensions for Chrome.

Jennifer Wong

Metaprogramming, Higher-Order Components and Mixins with Angular Ivy— Ivy is the name of Angular’s forthcoming faster new renderer. Learn a few things about its new powers here.

Victor Savkin

Get the Confidence to Use Kotlin in Your Projects… in 2 Days— JetBrains Certified - Limited to 20 students - Coming to a city near you.

Big Nerd Ranch sponsor

Real-Time Object Detection in 10 Lines of Code with TensorFlow.js— Includes interactive demos. It’s amazing what you can do in the browser nowdays.

Nick Bourdakos

Why Do React Hooks Rely on Call Order?

Dan Abramov

7 Ways to Create a JavaScript Function

Nicolai August Hagen

Picking an Interactive Map Theme with Vue.js

Nic Raboy

▶  Building a Simple Virtual DOM from Scratch— The audio isn’t great but the speaker is engaging and almost everyone could get something valuable from this 40 minute talk.

Jason Yu

The Developer’s Guide to Not Losing the Metrics You Need

InfluxData sponsor

JavaScript and Civil Rights— Thoughts on the human factors side of JavaScript and “the potential impact of web interfaces on users’ civil rights.”

Marcy Sutton

Netflix's Learnings From Adopting GraphQL

Artem Shtatnov and Ravi Srinivas Ranganathan (Netflix)

thank u, next: An Introduction to Linked Lists— A creative Ariana Grande-themed post on linked lists. TBH I thought she was singing “bacon eggs” till now.. :-)

Ali Spittel

🔧 Code and Tools

JSON Generator: A Tool for Generating Random Data— Generate any random data you want online with agile JavaScript-powered templates.

Vazha Omanashvili

Deno: A Secure TypeScript Runtime On V8— Ryan Dahl’s project has made a lot of progress recently so if you want to run TypeScript outside of the browser environment and not use Node.js, give it a try.

Ryan Dahl

A Much Faster Way to Debug Code Than with Breakpoints or console.log— Wallaby catches errors in your tests and displays the results of expressions right in your editor as you type.

Wallaby.js sponsor

Rendora: A Dynamic Renderer for Zero-Conf Server-Side Rendering— It’s built in Go, but you might find this useful for using headless Chrome to do server-side rendering of client-rendered content for bots, etc.

Rendora

A Minimal Google Analytics Snippet— Forget the 73KB of code Google’s ‘Tag Manager’ and Analytics library needs and use this 1KB of code instead to track your pageviews (and only pageviews) with Google Analytics.

David Kunnen

billboard.js 1.7: A Simple Chart Library Based on D3 v4+— A new version just dropped with multiple axes support, a new theme, and TypeScript support.

Naver Corp

matchit: Quickly Parse and Match URLs

Luke Edwards

Ember 3.6 Released

Melanie Summer, Kenneth Larsen and Chris Garrett

wolkenkit 3.0: A CQRS and Event Sourcing Framework for JS and Node— A DDD (domain-driven design)-oriented foundation for apps.

Sophie van Sky

#417 — December 21, 2018

Read on the Web

JavaScript Weekly

This week we're taking a break from the usual roundup to look back at what happened in the JavaScript world in 2018, as well as the tutorials, videos, and tools you, our fantastic readers 🤗, clicked on the most.

Thanks for continuing to support us in 2018 and we'll be back on January 4th. We hope you have a fantastic holiday season, however you celebrate it. 🎄

Here's to more JavaScript developments in 2019! 🍾
— Peter Cooper, editor

🗞 JavaScript developments in 2018

• jQuery 3.3 was released, much to the relief of the majority who love jQuery but pretend they don't.
• TC39 continued to get and work upon lots of proposals on how to improve the language.
• Lin Clark helped everyone understand ES modules, which all major browsers (finally) came to support in 2018.
• Martin Fowler announced he was switching his famous Refactoring book from Java to JavaScript for its long-awaited second edition.
• webpack 4.0 came out, getting a lot faster and adopting an optional 'zero config' approach as favored by competing tools like Parcel.

Make Magic with Creative Coding in Canvas & WebGL 🎩✨— Use JavaScript to create generative art, interactive animations, 3D graphics with ThreeJS, and custom shaders in GLSL. ✨You'll learn the fundamentals for creative coding jobs like games, advertising, AR/VR and installation artwork!

Frontend Masters sponsor

• We found out that Microsoft has been rewriting Office 365 in JavaScript.
• ECMA published the official ECMAScript 2018 specification, thus ensuring all JavaScript developers had plentiful bedtime reading all summer. Dr. Axel can help if you want to understand it.
• Node 10 and npm 6 came out.
• Anil Dash asked what would happen if JavaScript became the first-ever truly dominant programming language?
• Redux 'died', then came back to life, died again, then back to life again.
• Oracle's ownership of the 'JavaScript' trademark continued to annoy developers, even prompting a suggestion to rename the language.
• 2 years of hard work translated into Babel 7 being released.
• Microsoft bought GitHub for $7.5b, then they removed jQuery from their frontend. They haven't moved to Azure as yet.
• JSConf US came back to life after a hiatus.
• The annual State of JavaScript survey ran, got over 20,000 responses, and told us React continues to flourish, everyone wants to learn Vue.js, and the use of ES6 is now very well established. Also, everyone's using VS Code now.
• Evan You gave us a preview of Vue.js 3.0.
• The V8 JavaScript engine turned 10 years old. The work on V8 over the years has been instrumental in making JavaScript as popular as it is now, IMHO.
• The React team unveiled Hooks, an experimental feature in React 16.7 that got a lot of React developers very excited and seems as if it may become a key element of React development in 2019.
• A popular npm package was exploited causing a lot of discussion about how we prevent such things in future.
• Marijn Haverbeke spent the whole year writing a third edition of Eloquent JavaScript. It's almost finished.
• Lots of versions of V8, TypeScript, Vue.js, Jest, React, Angular, Aurelia and Ember came out. We're not linking them all again 🤣

Please note, this list is just a selection and isn't exhaustive.. you've got our issue archive for that :-)

💻 Jobs

Front End Developer✌️ in Beautiful Norway🎉— Passion for React & GraphQL? Join our fast growing GraphQL based e-commerce service Crystallize.

Crystallize AS

Join Our Career Marketplace & Get Matched With A Job You Love— Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.

Hired

📘 Top tutorials of 2018

Going Beyond console.log()— While console.log() may form the basis of many people’s debugging strategies, the console object has a lot more to offer, as covered here. This was our top tutorial of the year with over 12,000 of you clicking.

Matt Burgess

33 Concepts Every JavaScript Developer Should Know— A curated collection of links to tutorials on 33 different areas of JavaScript it’s worth understanding well, and not only one of our most popular links but one of the most starred projects on GitHub too.

Leonardo Maldonado

Building Modern Apps with the MERN Stack and Google Cloud Platform— Learn about the two dominant JavaScript stacks: MEAN and MERN and how to implement these web stacks on GCP.

MongoDB sponsor

The Front-End Developer Handbook 2018 Edition— An online guide that outlines and discusses the practice of front-end engineering, how to learn it and what tools are used in the practice, as of 2018. Let's hope we see a 2019 edition!

Cody Lindley

Examples of Everything New in ES2016, 2017, and 2018— A worthwhile roundup of all the new bits and pieces in recent ECMAScript specs.

Raja Rao DV

What is Redux: A Designer’s Guide— A really neat high-level approach to explaining Redux and what it offers beyond state management. Smashing Magazine really had some amazing tutorials go out this year.

Linton Ye

Designing (Very) Large JavaScript Applications— A written version of a talk given by Google’s Malte Ubl at JSConf Australia that took a high level look at modularity, lazy loading code, and similar concepts. Video, if you prefer that.

Malte Ubl

The Cost of JavaScript in 2018— A detailed write-up of thoughts and findings on how much effect JavaScript has on page sizes and performance and some ways to improve matters.

Addy Osmani

JavaScript Fundamentals Before Learning React— A concise list of all the different JavaScript functionalities that can be used to complement a React app.

Robin Wieruch

🎬 Top videos of 2018

▶  Write Perfect Code with Standard and ESLint— An intro to getting started with linting (and why - hint: to catch errors in your code) as well as how to improve your setup if you’re already doing it.

Feross Aboukhadijeh

How Do Top Developers Deliver Video? - Download the 2018 Video Report— Hundreds of developers around the world reveal their preferred video streaming solutions.

Bitmovin sponsor

▶  10 Things Node's Inventor Regrets About Node— Original Node.js inventor Ryan Dahl reflected on what he considered to be some early design mistakes with Node.

JSConf EU

▶  Build The Future of the Web with Modern JavaScript— A Google I/O presentation presenting an overview of cutting-edge JavaScript features, plus what to expect in future versions of Chrome and Node.js (some of which we now have).

Mathias Bynens and Sathya Gunasekaran

▶  Learn RxJS in 60 Minutes for Beginners— RxJS is used for reactive programming using observable streams and this is a great ‘from scratch’ crash course.

Gary Simon

🔧 Top code and tools of 2018

30 Seconds of Code: A Curated Collection of Useful JavaScript Snippets— Our most clicked code related item this year was this ever growing collection of useful snippets.

30 Seconds

Angular 7 Released— A major release of Angular came out this year with upgrades for the Angular entire platform from the core framework to Angular Material and the CLI tools.

Stephen Fluin (Google)

Detect JS Production Errors in Real-Time, Then Debug Them in Minutes

Rollbar sponsor

JavaScript Algorithms and Data Structures— JavaScript examples of many common algorithms (e.g. bit manipulation, Pascal’s triangle, Hamming distance) and data structures (e.g. linked lists, tries, graphs) with explanations.

Oleksii Trekhleb

TUI Calendar: An Attractive, Full Featured Calendar Control— From the creators of TUI Chart comes TUI Calendar, a highly customizable JavaScript calendar widget that supports numerous view types (weekly, monthly, etc.), dragging and resizing of schedule items, and is basically like your own Google Calendar in a box. MIT licensed too.

NHN Entertainment

An Annotated webpack 4 Config for Frontend Development— A very thorough example of a real-world production webpack 4 config that takes modules, CSS, and image optimization into account.

Andrew Welch

Storybook 4.0: The UI Component Workshop— A great tool for building UI components got a major update with support for webpack 4 and Babel 7, React Native, Ember, Svelte, Riot, and more, plus improvements for existing React, Vue and Angular users. If you’re not familiar with Storybook, learn more here.

Michael Shilman

Create React App 2.0 Released— A significant release of a project that’s continued to have a huge effect on the adoption of React by making it easier to get a project started. Psst.. we have a React newsletter too.

Joe Haddad and Dan Abramov

#418 — January 4, 2019

Read on the Web

JavaScript Weekly

RunJS: A JavaScript 'Scratchpad' Tool for macOS— Write and run JavaScript instantly. Useful for learning, experimenting, or perhaps even creating screencasts, tweets, or similar educational content.

Luke Haas

FBT: An Internationalization Framework from Facebook— Facebook has open sourced an internationalization framework that they’ve used internally till now. The goal is to be ‘both powerful and intuitive’. GitHub repo. Or see example usage code.

Facebook

Top JavaScript Frameworks and Topics to Learn in 2019— We see a lot of ‘top X’ posts when editing JavaScript Weekly but this annual review of the JavaScript tech ecosystem by none other than Eric Elliott is always a crowd pleaser.

Eric Elliott

Make Magic with Creative Coding in Canvas & WebGL 🎩✨— Use JavaScript to create generative art, interactive animations, 3D graphics with ThreeJS, and custom shaders in GLSL. ✨You'll learn the fundamentals for creative coding jobs like games, advertising, AR/VR and installation artwork!

Frontend Masters sponsor

Electron 4.0 Released— Electron is a popular project from GitHub that’s heavily used to create desktop apps with modern Web technologies. 4.0 introduces some new features but notably bumps up the underlying dependencies to Chromium 69, Node 10.11, and V8 6.9.

Michelle Tilley

Artificial Intelligence in JS with TensorFlow.js— A brief, high level explanation of one of the problems a system like TensorFlow.js can solve: the recognition of written numbers. (Note: This is one of the always great JavaScript January series that runs each year.)

Seth Juarez

What Happened with Node.js in 2018— This week’s Node Weekly was dedicated to a month by month runthrough of the biggest things that happened in the world of Node.js. We also did a best frontend links of 2018 in Frontend Focus.

Node Weekly

💻 Jobs

JavaScript Developer at X-Team (Remote)— Join the most energizing community for developers. Work from anywhere with the world's leading brands.

X-Team

Find A Job Through Vettery— Vettery matches top tech talent with growing companies. Create your profile to get started.

Vettery

📘 Tutorials and Opinions

Fancy Function Parameters— The process behind making an opaque function call easier to understand using objects and optional arguments.

Jake Dohm

Creating and Filling Arrays of Arbitrary Lengths in JavaScript

Dr. Axel Rauschmayer

Creating a Reusable Accordion Component That Works Anywhere— How to make a web component using Angular Elements which can now be used with any or no framework.

Priyesh Patel

Read Now: the Ultimate Guide to Npm— Everything you need to know to know to use the npm CLI, from basic building blocks to time-saving tips and tricks.

NodeSource sponsor

Running Node.js 11 on AWS Lambda— With Lambda’s new Layers feature and custom runtimes you can now build your own custom artifacts, enabling you to share and manage common code between serverless functions.

Adnan Rahic

The Chronicles of JavaScript Objects— A back to basics tour of what objects are in JavaScript and how they behave.

Arfat Salman

Create Your First Custom Angular CLI Schematic with Nx— Nx is a toolkit for people building enterprise-grade Angular apps.

Sam Julien

Storing and Using the Last Known Route in Vue— How to keep a reference to the last known route a user visited in Vue. Also a good excuse to check out the all-new CSS Tricks redesign!

Mateusz Rybczonek

The Developer’s Guide to Not Losing the Metrics You Need

InfluxData sponsor

How Airbnb is Moving 10x Faster at Scale with GraphQL and Apollo

Adam Neary

Reluctant Gatekeeping: The Problem With 'Full Stack'— Thoughts I think a lot of us may have had but hadn’t put into words yet.

Heydon Pickering

🔧 Code and Tools

AVA 1.0: A Powerful Test Runner for Node— AVA is a test runner with a concise API, detailed error output, and process isolation that let you write tests more effectively. You may find the README more useful than these release notes if you aren’t familiar with it yet though.

Mark Wubben and Sindre Sorhus

Take the Pain Out of Acceptance Testing with Gauge by Thoughtworks

Gauge sponsor

Rollup.js 1.0: A Module Bundler for JavaScript

Low.js: A Node Port for Embedded Devices— Has far lower system requirements than standard Node and can now be flashed on to ESP32-WROVER boards. Here’s how.

neonious GmbH

string-similarity: Finds Degree of Similarity Between Two Strings— Uses the Sørensen–Dice coefficient which is better than Levenshtein distance for many use cases.

Akash K

Magic Grid: A Simple Library for Dynamic Grid Layouts— This has a slightly different use case than CSS Grids may be useful for as explained in this article

Emmanuel Olaojo

Brain.js: A Neural Network Library— If you’re looking for an excuse to play with neural networks, there’s an interactive 19 part course on using Brain.js to do just that.

Robert Plummer

#419 — January 11, 2019

Read on the Web

JavaScript Weekly

FromJS: An Experimental Data-Flow Analysis Tool for Front-End JS— An interesting tool that shows you where each value in the DOM comes from - very useful for looking at how other pages work or for certain types of debugging. There’s also a blog post and video about how it works. Note: Requires Node 9 or under for now.

Matt Zeunert

New ES2018 Features Every JavaScript Developer Should Know— ES2018 wasn’t as huge a leap forward as ES6, but this post is packed with interesting examples of spread properties within object literals, asynchronous iterators and asynchronous iterables, Promise.prototype.finally, and other new features.

Faraz Kelhini

Frontiers 2019: Explore New Ways to Build Apps on Slack— Frontiers is a Slack conference exploring the future of work. In the developer track, you'll get immersive training on new functionality and hands-on workshops for app builders at all development stages. Register today for early bird pricing.

Slack sponsor

Node and JavaScript Testing Best Practices— A well presented collection of 30 best practices for better JavaScript testing, continuous integration, and overall quality.

Yoni Goldberg

2018 JavaScript Rising Stars— An annual roundup of which JavaScript projects did well in terms of GitHub stars over the prior year in various categories. It’s a bit of a popularity contest but it’s nice to get a feel for what’s going on.

Michael Rambeau

Anime.js 3.0: A JS Animation Library for the Web— A mature and powerful animation library takes another step forward with a new site, new documentation and examples, new easings, new callbacks, and more.

Julian Garnier

GitHub Announces Unlimited Free Private Repos— A late Christmas present comes from GitHub in the shape of their free offering now including unlimited private repositories (something that previously cost $7/mo) with a limit of three collaborators per repo. For balance, GitLab’s CEO had a response.

GitHub

💻 Jobs

Senior Web Developer at Dr. Bill (Remote OK)— Dr. Bill helps Canadian doctors save time by streamlining their billing. Help lead our team into the next phase of growth.

Dr. Bill

JavaScript/Node Developer - Brighton UK— Growing new-product team, modern JavaScript tools and data-driven innovation. Flexible working and a fierce commitment to L&D.

Madgex

Find A Job Through Vettery— Vettery matches top tech talent with growing companies. Create your profile to get started.

Vettery

📘 News, Tutorials and Opinions

Defensive JavaScript— “How to write code that doesn’t do what it oughtn’t”

Mike Samuel (Google)

How Do Top Developers Deliver Video? - Download the 2018 Video Report— Hundreds of developers around the world reveal their preferred video streaming solutions.

Bitmovin sponsor

Setting a React Project From Scratch Using Babel and Webpack

Anshul Goyal

A Look at TypeScript 2.8's Conditional Types— An intro to conditional types, a powerful addition to the type system introduced in TypeScript 2.8.

Marius Schulz

10 Best Tips for Learning Vue from Vue Masters— 6 Vue experts talk about what they wish they would have known when first starting out.

Gregg Pollack

So Many Ways to Learn Kotlin - Which Is Right for You?

Big Nerd Ranch sponsor

Things Dan Abramov Doesn’t Know— React core team member and the creator of Redux wants you to realize that “even your favorite developers may not know many things that you know” and shares his own list of blind spots.

Dan Abramov

Aurelia 2018 Year in Review— Not just a look back but a look at what’s happening this year too with the component-oriented client framework.

Rob Eisenberg

🔧 Code and Tools

DoneJS 3 Released— DoneJS is a framework for building high performance, real-time web and mobile apps and version 3 aims to provide ‘best in class server-side rendering’.

Matthew Phillips

Libraries To Help You Work with WebGL— Working with WebGL directly can get very verbose and technical quickly, but luckily there are libraries and toolkits to make it easier.

Arek Nawo

A Much Faster Way to Debug Code Than with Breakpoints or console.log— Wallaby catches errors in your tests and displays the results of expressions right in your editor as you type.

Wallaby.js sponsor

music-fns: Music Notation-Related JavaScript Functions— For things like working with note names, octaves, frequency, intervals, and scales.

madewithlove

Karin: A Promise Based HTTP Client That Uses Template Literals— Currently an experiment/work in progress. Uses the Fetch API under the hood.

Vahe

HotKeys.js: A Robust Library for Capturing Keyboard Input

Kenny Wong

Vue Glide: A Vue Component for the Glide.js Slider/Carousel

Anton Reshetov

#420 — January 18, 2019

Read on the Web

JavaScript Weekly

Exploring JavaScript Modules: From IIFEs to CommonJS to ES6 Modules— A commonly 'under-learned' aspect of JavaScript is the module system, but given its unusual and varied history, that might not be a surprise. In this post (which also comes in video form), Tyler McGinnis provides a useful refresher of module approaches, both past and present.

Tyler McGinnis

Porting 30K Lines of Code From Flow to TypeScript— The story of how MemSQL ported 30 thousand lines of JavaScript from using the Flow static type checker to TypeScript. In related news, the Jest project (which is owned by Facebook, as is Flow) is also planning a switch to TypeScript.

David Gomes

Swift and Straightforward Bug Fixes for Your JavaScript Apps— Automatically detect & diagnose JavaScript errors impacting your users with Bugsnag. Get comprehensive diagnostic reports, know immediately which errors are worth fixing, & debug in a fraction of the time compared to traditional tools. Try it free.

Bugsnag sponsor

Why I've Stopped Exporting Defaults From My Modules— The creator of ESLint says that after years of fighting with default exports, he’s taking a different approach. He makes a compelling argument.

Nicholas C. Zakas

Animating URLs with JavaScript and Emojis— Half fantastic and half terrifying, this is a cute look at a technique to make your location bar a lot more memorable in a variety of ways..

Matthew Rayfield

💻 Jobs

UI Engineer, Design Systems (San Francisco)— As a UI Platform Engineer at Uber, you'll be building Base UI, Uber's design language for all web applications at Uber and beyond.

Uber

Senior Frontend Engineer - Redwood City, CA— Build the platform that empowers researchers to develop high-performance materials and chemicals faster than ever before.

Citrine Informatics

Find A Job Through Vettery— Vettery specializes in developer roles and is completely free for job seekers.

Vettery

📘 Tutorials and Opinions

How to Start a Node Project— Short and sweet but there are a few neat tidbits here I wasn’t familiar with.

Phil Nash

Build an App with Everything New and Noteworthy in Angular 7

Matt Raible

Being Type Strict Without Writing TypeScript— Explains how you can write typed JSDoc annotations in comments and have type safety checked in the IDE. An interesting compromise that may suit some setups or if you want to 'try out' static typing without going all in.

Kevin Nuut

Handling Time Zones in JavaScript

Dong Woo Kim

State Management in Angular Using Firebase and RxJS— A rather extensive and practical tutorial.

Joaquin Cid

Blazing Fast GraphQL PIM & Ecommerce Service— GraphQL backend for your ecommerce with subscription management?

Crystallize sponsor

Reverse Engineering GoDaddy's Tracking Script— A developer found that GoDaddy was injecting JavaScript into sites hosted by them in order to collect metrics for performance reasons.

Joshua Small

Why GraphQL is Taking Over APIs— GraphQL continues to eat the world and is a key technology to watch in 2019.

Azat Mardan

🔧 Code and Tools

Code to Graph: Visualize JavaScript Code as a Network Diagram— Certainly an interesting idea and fun to play with. Source here.

Vincent Lecrubier

NS:IDE: A JS IDE for Accessing a Phone/Tablet's Native Runtime— Uses NativeScript’s bindings to access native functionality.

Jamie Birch

✅ ZingGrid: Web Component-Based JavaScript Data Grid & Table Library— Make responsive data grids and tables with CRUD functionality, built-in layout modes, column types and more with ZingGrid.

ZingGrid sponsor

wpk: A Friendly, Intuitive, and Unofficial CLI for webpack

Sam Gluck

jsdiff: A JavaScript Text Diffing Implementation— Can compare strings for differences in various ways including creating patches for such changes. The library is quite mature but just reached version 4.0.

Kevin Decker

AlaSQL: A JavaScript SQL Database for Browser and Node.js— Handles both traditional relational tables and nested JSON data (NoSQL). Export, store, and import data from localStorage, IndexedDB, or Excel.

Andrey Gershun

Build Enterprise-Grade Apps for Free with Ext JS Community Edition

Sencha, Inc. sponsor

Shiny: Shiny Reflections for Mobile Websites— Add shiny reflections to page elements on devices that support DeviceMotion.

Rik Schennink

SurveyJS: A JavaScript Survey and Form Builder— Can integrate with Angular, jQuery, Knockout, React and Vue.js. Live demo here.

Devsoft Baltic

Sockette: A Tiny WebSocket Wrapper— A 348 byte wrapper around WebSocket that auto reconnects when necessary.

Luke Edwards

P.S. Next Tuesday (22nd), a long-time reader and friend of JavaScript Weekly, Brian Rinaldi, is hosting two great talks in an online event called JavaScript for Enterprise Development. It's free and no strings attached so check it out.

#421 — January 25, 2019

Read on the Web

JavaScript Weekly

I posted a JSON and macOS-related tip to Twitter earlier this week that was surprisingly popular, and I was encouraged to include it here.. so if you're curious, scroll to the end of this issue 😄
— Peter Cooper, editor

The TypeScript Tax: A Cost vs Benefit Analysis— TypeScript's becoming increasingly popular, but is it worth it? Eric Elliott presents some critical, data-driven analysis to establish the viability of using TypeScript when building larger apps.

Eric Elliott

What's (Could Be) New in JavaScript for 2019— Just two weeks ago we were reflecting on what ES2018 features we should know but now we’re on to speculating on what’s coming in ES2019.

David Neal

Make a Valuable Open Source Contribution with CircleCI Orbs— CircleCI Orbs (packages of configuration) are a growing trend in open source. In this post, learn how to write your own orbs that thousands of developers can plug into their CI workflows.

CircleCI sponsor

Node Now Has Worker Threads Enabled by Default— With Node 11.7 (released last week), the new worker_threads module is now enabled by default which brings multithreading to Node. Prefer a video? This talk from Anna Henningsen is excellent.

Alberto Gimeno

The “Bug-O” Notation— Big O helps us think about the running time or memory complexity of our algorithms, but here Dan Abramov urges us to think about Bug-O (or how much an API slows you down as your codebase grows).

Dan Abramov

Yarn's Future: Looking to v2 and Beyond— Yarn is a popular JavaScript dependency management tool and an interesting alternative to npm. This update reflects on what Yarn has achieved and what’s yet to come.

Yarn

The NPM Universe, Visualized— A ‘code galaxies’ visualization of thousands of npm packages and their relationships and correlations to each other. Neat to fly around in.

Andrei Kashcha

💻 Jobs

Senior Frontend Engineer - Redwood City, CA— Build the platform that empowers researchers to develop high-performance materials and chemicals faster than ever before.

Citrine Informatics

Senior Angular / Node Engineer at eBench (Remote, Full-Time)— We are a SaaS company building a new social platform. Enjoy crafting quality code? We would love to hear from you.

eBench

Find A Job Through Vettery— Vettery specializes in developer roles and is completely free for job seekers.

Vettery

📘 Tutorials and Opinions

Convert a String to a Number in JavaScript— You might think this is a simple task and explainable in a single line of code. Au contraire.. there are some subtleties to be aware of.

Valeri Karpov

Online Info Session: Inside Big Nerd Ranch Bootcamp— Ever wondered what’s involved with a bootcamp? Sign up for this free online session.

Big Nerd Ranch sponsor

How to Stop Using Browser Dev Tools & to Debug Inside VS Code Instead— “I think that debugging your JavaScript in the Chrome developer tools is not the way our brains want to work. I would like to propose that what we really want is to debug our code in the same place that we write it.”

Burke Holland

Writing a GraphQL Client in Vanilla JS— A short tutorial on writing a GraphQL client with zero dependencies.

Shlok Desai

Building an AOT Friendly Dynamic Content Outlet in Angular

Wes Grimes

Learn Node and MongoDB by Building a URL Shortener App— Aimed at the entry level developer who wants to pick up several skills at the same time by building a single app.

Ayo Isaiah

A React Introduction For People Who Know Just Enough jQuery To Get By— A 2019 attempt at ground first covered in a similarly titled article from 2015. This is aimed at less confident developers who want a walkthrough of a basic project in order to pick up the essentials.

Julien Benchetrit

Just Announced. Serena Williams to Keynote at Frontiers 2019

Slack sponsor

15 Useful Examples of .map(), .reduce() and .filter()

Alex Permyakov

Writing Maintainable & Readable JavaScript: Some Design Patterns

Godwin Ekuna

The JSConf and CSSconf EU Finances— JSConf EU is a not-for-profit conference but that doesn’t mean it’s cheap to put on. Here are the numbers behind its success.

JSConf EU

🔧 Code and Tools

Hotkey: Trigger an Action on an Element When a Keyboard 'Hotkey' is Pressed— Binds hotkeys to any link with a data-hotkey attribute set. Developed at GitHub itself.

GitHub

Ionic 4 Released— Ionic is now distributed as a set of Web Components using the Custom Elements and Shadow DOM APIs available in all modern mobile and desktop browsers. If you’ve thought of Ionic as an Angular UI framework in the past, this is no longer true.

Max Lynch (Ionic)

Secure and Accelerate Your Cloud Storage— Use Cloudflare Workers to cache content while still preventing unwanted access with HMAC and JSON Web Tokens.

Cloudflare Workers sponsor

Redux Starter Kit: A Set of Tools to Make using Redux Easier— A toolkit in the spirit of create-react-app for making configuring and working with Redux easier. As of this week, it uses TypeScript too.

Redux

Functional TypeScript: A Standard for Solid Serverless Functions— Create type-safe serverless functions where you just write normal TypeScript functions and validation, HTTP, and other issues are handled for you. Generates docs for you and supports all major providers too.

Travis Fischer

RE:DOM: A Tiny (2KB) JS Library for Creating User Interfaces— Adds helpers to create DOM elements and keep them in sync with data, all without a virtual DOM and sticking to vanilla JavaScript.

Juha Lindstedt

Musish: It's Apple Music...ish— An attempt at building a better interface to Apple Music using JavaScript.

Musish

#422 — February 1, 2019

Read on the Web

JavaScript Weekly

Future JavaScript: What's Still Missing?— We’ve looked at ES2018 and ES2019 and it seems JavaScript is evolving at a good pace, but Dr. Axel asks.. what’s still missing?

Dr. Axel Rauschmayer

Google Play Store Now Open for Progressive Web Apps— Chrome 72 for Android shipped the Trusted Web Activity feature meaning you can now distribute PWAs in the Google Play Store - via our Mobile-focused newsletter.

Maximiliano Firtman

Swift and Straightforward Bug Fixes for Your JavaScript Apps— Identify impactful errors at a glance. Sort errors by event count or users impacted to find ones that occur most frequently or affect a large segment of users. Get to the root cause of errors quickly with automatic diagnostic collection. Try it free.

Bugsnag sponsor

FlexSearch.js: A Full Text Search Library— Claims to outperform all of the alternatives while supporting features like multi-word matching and phonetic transformations. Happy in both the browser and Node.js.

Nextapps GmbH

Jest 24 Released: The JS Testing Framework— It’s been 8 months since the last major release and it’s a big one with built-in support for TypeScript, improved assertion messages, and a fix for an annoying console.log bug, plus it gets a new Web site.

Simen Bekkhus

Severe Security Vulnerabilities Found in Bower— Bower, a popular web package manager, is vulnerable to archive extractions, so if you’re still using it, upgrade to version 1.8.8.

Liran Tal (Snyk)

📣 A Note..

If you don't always make it to the end of an issue, make this week an exception as we've interviewed Sandeep Gupta, the product manager of TensorFlow.js, an increasingly important part of the JavaScript ecosystem in the machine learning space.

💻 Jobs

React Native Developer - Remote— Join our fully remote team and help bring one of the leading recreational poker platforms to the mobile world.

Replay Gaming

Become a Part of European Remote Work Culture— We built the first Europe-focused remote jobs board. No US only positions. Work during European working hours.

Europe Remotely

Find A Job Through Vettery— Vettery specializes in developer roles and is completely free for job seekers.

Vettery

📘 Tutorials and Opinions

How to Remove Array Duplicates in ES6— A look at filtering out duplicates from an array and returning only the unique values in three ways, with Set, filter, and reduce.

Samantha Ming

Improving Code Readability With async/await

Ben McCormick

Type-Driven Development: Replacing Unit Tests with Types in TypeScript— Unit tests are great. But on TypeScript projects, many of them can be replaced with explicit type definitions..

Andy Peterson

Secure and Accelerate Your Cloud Storage— Use Cloudflare Workers to cache content while still preventing unwanted access with HMAC & JSON Web Tokens.

Cloudflare Workers sponsor

Object.assign vs Object Spread in Node— The Object spread operator {...obj} is similar to Object.assign(), so which should you use?

Valeri Karpov

What Is 'Tree Shaking' and How Does It Work?— Ire is great at explaining concepts in a way anyone can understand.

Ire Aderinokun

Building an Image Recognition App using ONNX.js— ONNX.js is a JavaScript library by Microsoft for running ONNX (Open Neural Network Exchange) models in browsers and on Node.

Zain Sajjad

Creating Container and Presentational Components in Angular

Latish Sehgal

A Year on TC39: Going from Oblivious to Co-Chair in 14 Months— You’ll enjoy this story if you’re interested in the way the standards behind JavaScript come together and get discussed.

Aki Rose (Braintree)

🔧 Code and Tools

Babel 7.3.0 Released— Includes support for named capturing groups in regular expressions, private instance accessors, and the smart pipeline operator.

Nicolò Ribaudo

A Much Faster Way to Debug Code Than with Breakpoints or console.log— Wallaby catches errors in your tests and displays the results of expressions right in your editor as you type.

Wallaby.js sponsor

Finance.js: A Library for Common Financial Calculations— Covers several things like amortization, compound interest, ROI..

Essam Brady-Jobory

TypeScript 3.3 Released— A smaller than usual release with no breaking changes.

Microsoft

Relay: A Framework for Building Data-driven React Applications— Version 2 just came out and now uses the new Context API rather than the legacy one. It also steps up to React 16.

Facebook

Readability.js: Extract the Readable Content from an HTML Document— A standalone version of the library used to power Firefox’s Reader View.

Mozilla

Improve Video Quality with Per-Title and 3-Pass Encoding

Bitmovin sponsor

Nuxt.js 2.4: Framework for Server-Rendered Vue.js Apps— 2.4 introduces smart prefetching, TypeScript support (seems to be the fashion!), and more. Plus a formal release schedule has been adopted.

Chopin, Chopin, et al.

A Vue.js Declarative Animations Library— A declarative Vue template wrapper around Velocity.js.

Brian Rosamilia

The Lounge: A Modern, Self Hosted Web-Based IRC Client— Version 3 is a major release with lots of updates.

The Lounge

#423 — February 7, 2019

Read on the Web

JavaScript Weekly

New JavaScript Features That Will Change How You Write Regular Expressions— ES2018 introduced some new features for regular expressions that will come in handy if you’re doing certain types of text processing and manipulation, such as lookbehind assertions and named capture groups.

Faraz Kelhini

React v16.8 Released: It's The One With Hooks— While hooks have been in React in an experimental form for a few months, they’re now truly official. Hooks, you say? Here’s a great ‘at a glance’ view of what they’re about.

Dan Abramov

Learn a Thing or Two (Or Three) About Building Apps on Slack— Whether you’re new to Slack or an expert app builder, there’s something for everyone at Frontiers. New this year: 3 tracks filled with speakers, sessions and workshops — including one designed just for you. Register today to reserve your spot.

Slack sponsor

What Hooks Mean for Vue— Hooks aren’t just for React users, you know. Vue got its own proof of concept equivalent quickly thereafter (a final version is due in Vue 3.0) - here’s why, and how they work.

Sarah Drasner

Pika/Pack: A New Approach to npm Package Building— Pack connects pre-configured plugins (e.g. Babel and Rollup) to build and optimize your package for you. It’s a bit like a webpack or Parcel but specifically for building npm packages.

Fred K. Schott

Vue 2.6 Released— Also known as “Macross”, Vue 2.6 includes new syntax for scoped slots, improved error handling, and more.

Evan You

What's Coming in V8 Release v7.3— Coming to future releases of Node and Chrome near you, the latest version of the popular JavaScript engine includes async stack tracks by default, improved performance for await, and some new ES2019 features including Object.fromEntries and String.prototype.matchAll.

Clemens Hammacher

▶  A Node.js Crash Course in 90 Minutes— An up to date ‘crash course’ covering Node fundamentals including several core modules, building an HTTP server, deployment, etc. Even if this isn’t useful for you, it could be handy to pass on to anyone ready to learn Node in one hit.

Traversy Media

💻 Jobs

JavaScript Developer at X-Team (Remote)— Join the most energizing community for developers. Work from anywhere with the world's leading brands.

X-Team

Sr. Fullstack Engineer (Remote)— Sticker Mule is looking for passionate developers to join our remote team. Come help us become the Internet’s best place to shop and work.

Sticker Mule

Try Vettery— Vettery specializes in developer roles and is completely free for job seekers.

Vettery

📘 Articles, Tutorials and Opinions

A One-Page Guide to Regular Expression Techniques in JavaScript— Dr. Axel has opened up another chapter of his JavaScript for Impatient Programmers book.

Dr. Axel Rauschmayer

Seven Problems You Can Avoid by using Nuxt.js for Your Next Vue App— Nuxt.js is a framework for building universal Vue.js apps.

Gregg Pollack

Certified Kotlin Training— Spots remain for New York and Chicago classes.

Big Nerd Ranch sponsor

Diving Deeper into JavaScript Objects

Arfat Salman

Using TensorFlow.js to Automate the Chrome Dinosaur Game— A two-part (so far) series on using machine learning techniques to play the dinosaur jumping game Chrome shows when you’re offline. Part 2, just out, leans on genetic algorithms instead.

Aayush Arora

First Thoughts on Deno, the JavaScript/TypeScript Runtime— Deno is an interesting alternative runtime for V8 created by the original creator of Node - it’s worth keeping trying or at least keeping an eye on.

James Garbutt

Deobfuscating a Scammer's Naughty JavaScript— The rather lengthy, but interesting, tale of a scam email and one developer’s quest to deobfuscate the scammer’s JavaScript.

JonLuca DeCaro

The Evolution of Testing: Live Broadcast with Gleb Bahmutov of Cypress

Nrwl.io sponsor

JavaScript Regular Expressions for Regular People— Our third and final regex-related link of the issue - promise! - is aimed more at beginners or for if regex prove a little intimidating.

Aaron Arney

Garbage Collection in Redux Applications— This won’t apply to most of you, but SoundCloud’s Xbox (yes, Xbox) app is a React and Redux app that runs in a native web view wrapper and due to Xbox related limitations a ‘memory leak’ (of sorts) was causing issues.

Jan Monschke (SoundCloud)

🔧 Code and Tools

TypeIt: A Versatile Fake-Typing Effect— Bills itself as ‘the most versatile JavaScript typewriter utility on the planet’. The demo on the homepage is pretty versatile, that’s for sure.

Alex MacArthur

ImmortalDB: A 'Relentless' Key-Value Store for The Browser— Data is redundantly stored in cookies, IndexedDB, LocalStorage, and SessionStorage, and 'self heals' as needed.

Ansgar Grunseid

Shop Like a Developer – Discover and Experiment with Hot New Cloud Services 🔥— Start building your application with Manifold and save time integrating and deploying cloud native applications.

Manifold sponsor

Uppy: A Next-Gen File Uploader for Web Browsers

Transloadit

x-spreadsheet: A JS and Canvas-Powered Spreadsheet Control

myliang

timetable-fns: Fast Date and Time Utility Functions— aimed specifically for working with timetables.

Flightplan

#424 — February 15, 2019

Read on the Web

JavaScript Weekly

Replacing a 'Hot Path' in Your App's JavaScript with WebAssembly— One benefit that WebAssembly offers is predictable performance across browsers. But how do you turn a hot path written in JavaScript into WebAssembly? This is a technical piece, but there's lot of interesting stuff, including an introduction to AssemblyScript.(It also provoked an interesting discussion on Hacker News.)

Surma

Resource Prioritization – Getting the Browser to Help You— Consider using <link rel=preload> to load your key scripts at a higher priority. It’s improved Twitter Lite’s time to interactive by 36% says Addy Osmani.

Sérgio Gomes (Google)

Design for Developers ✨ New Course by Sarah Drasner— Become more self-sufficient for the entire process for execution, from concept to design to implementation. Understand the rules for designing and learn to create complex and beautiful front-end experiences.

Frontend Masters sponsor

Funding ESLint's Future— ESLint, a linter tool for JavaScript, is a key part of our ecosystem, and now there’s a plan to fund its continuing maintenance and growth. If you use ESLint at work, consider speaking to your company about helping their cause.

ESLint

▶  Ember.js: The Documentary— Whether or not you’ve used Ember or not, this is a beautifully shot mini documentary (25 minutes) and it’d be great to see more for other projects.

HoneyPot

Bluetooth Anywhere: Experimenting with Bluetooth from JS— Some fun experimenting with interacting with a Bluetooth device (a Nordic Thingy:52) in JS on various setups (desktop browser, Cordova app, and a React Native app).

Peter and Anand

Will It finally: A try/catch Quiz— You probably know how try and catch work, but how well do you know finally? Find out with 4 live examples. You’ll almost certainly learn something here.

James K Nelson

💻 Jobs

Front End Developer✌️ in Beautiful Norway🎉— Passion for React and GraphQL? Want to move to Norway?

Crystallize

Senior Full Stack JavaScript Developer - Atlanta, GA (Full-Time)— Join our talented team building a cloud-based platform that’s helping some of America’s largest companies track things with RFID.

Strategic Systems

Try Vettery— Vettery specializes in developer roles and is completely free for job seekers.

Vettery

📘 Articles, Tutorials and Opinions

ECMAScript 2019: The Final Feature Set— A concise, factual overview.

Dr. Axel Rauschmayer

Building a Beautiful Animated News App with Vue.js and Vuetify— Vuetify is a Material Design component framework for Vue.

Rachid Sakara

What We've Learned About Hiring Engineering Managers— Over the last year, we have made some critical shifts in our understanding of what we believe makes a great engineering manager at CircleCI.

CircleCI sponsor

Managing Image Breakpoints with Angular— Angular has a built-in feature called BreakPoint Observer that evaluates media queries and reacts to the changing environment.

Tamas Piros

'Trusted Types' To Help Prevent Cross-Site Scripting?— A look at an experimental, Chrome-only API that aims to prevent DOM-based cross-site scripting by only letting special typed objects to make certain types of changes to the page.

Krzysztof Kotowicz (Google)

Simulating Blobs of Fluid with JavaScript and Three.js— A well presented explanation of an area where physics, programming and creativity meet.

Peeke Kuepers

How Has Testing Evolved? - Register for a Live Broadcast with Our Panel to Hear

Nrwl.io sponsor

▶  Discussing the Current State of Service Workers— Google’s Rick Viscomi and Jeff Posnick discuss where service workers are at right now.

Google Chrome Developers

▶  Discussing Maintaining Babel with Henry Zhu— Henry Zhu chats about his role maintaining Babel, the JavaScript compiler.

ShopTalk Podcast podcast

🔧 Code and Tools

Make Your Site’s Pages 'Instant' in 1 Minute— This is a neat little project, and surprisingly simple. Include a small piece of JavaScript on your pag to add just-in-time prefetching of links on your site when people hover over where they intend to go next. It's open source if you want to use the code directly.

Alexandre Dieulot

Fuse.js: A Lightweight Fuzzy-Search Library— A mature library but it’s had some key releases recently. GitHub repo.

Kirollos Risk

Backend, Frontend, Backend, and Side-to-Side— Honeybadger has your monitoring covered. We are the UGK of error, uptime, and check-in monitoring for JavaScript.

Honeybadger sponsor

Mercury Parser: Extract Content From the 'Chaos' of the Web— Extracts the useful parts from Web pages, such as titles, authors, the main content, etc.

Postlight

Next.js 8 Released: Universal React App Framework— Commonly used to build React apps that are happy server-side. Serverless support is the big feature here.

Neutkens, Davis and Ding

Split.js: Create Resizable Split Views / Panes / Frames— There’s a React component variant too.

Nathan Cahill

Three.js Ballooning Demo— A beautiful little demo of a hot air balloon flying over a 3D landscape. It’s open source, too, if you want to play with the code yourself.

Alexander Perrin