#462 — November 8, 2019

Read on the Web

JavaScript Weekly

How a 3D Tunnel Effect is Implemented in 140 Characters of JavaScript— I’m always in awe of little demos like this where such a striking result is obtained from such little code. The neat part is with posts like this you can learn how they work too.

Killed By A Pixel

TypeScript 3.7 Released— Packed with ‘awesome new language, compiler, and tooling features’, the popular ‘it’s JavaScript with static type-checking’ language introduces a lot of new bits and pieces including optional chaining, nullish coalescing, and simpler error reporting. The online TypeScript playground has also gotten some updates including a ‘dark’ mode and automatic type acquisition when importing packages.

Daniel Rosenwasser

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

Frontend Masters sponsor

▶  The React Conf 2019 Videos— React Conf took place just two weeks ago and the complete, finished recordings are available for you to enjoy. Highlights include Building a Custom React Renderer with Sophie Alpert, plus the two-parter Building the New Facebook with React and Relay with Frank Yan, and then part two with Ashley Watkins.

YouTube

Snyk's JavaScript Frameworks Security Report 2019— A review of the state of the Angular and React ecosystems when it comes to security and vulnerabilities, with a brief detour into Vue, Bootstrap and jQuery at the end. PDF report here.

Liran Tal (Snyk)

💻 Jobs

Software Developer - Ruby— Join our team and help to realize international cloud-native software projects based on Ruby on Rails.

anynines

Find a Job Through Vettery— Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

📘 Articles & Tutorials

Algebraic Structures: Things I Wish Someone Had Explained About Functional Programming— The second in a four part series on functional programming covers algebraic structures. What are they and how and why would we use them in JavaScript?

James Sinclair

Understanding the delete Operator— delete is used to remove specific properties from objects.

Chidume Nnamdi

What Is A CI/CD Engineer?— This post explores the possibilities of a new role... CI/CD Engineer.

CircleCI sponsor

A Complete Guide to JavaScript Tooling— An (entry level) guide to various JavaScript tooling systems, including linters, type checkers, package managers and more.

Hoang Nguyen

How to Fully Optimize Webpack 4 Tree Shaking— “We reduced our bundle sizes by an average of 52%.”

Craig Miller

Scaling WebSocket Connections using Shared Workers

Ayush Gupta

Client-Side SQL Query Parsing with ANTLR— How a database company does basic ANTLR parsing in the browser to separate out SQL statements in a string.

Rahel Patel

Google Maps Is Now An Angular Component— The latest Angular Component release introduces a new Google Maps component. Here’s how to use it.

Tim Deschryver

Learn How to Build a Sales Dashboard with React

Progress KendoReact sponsor

How to Send Good Pull Requests on GitHub— A checklist to follow when creating a PR for your favorite project.

Eli Bendersky

Breaking Chains with Pipelines in Modern JavaScript

Dan Shappir

🔧 Code & Tools

VSCode Glean: A VS Code Extension for Refactoring React Code— Extract JSX into new components, convert functions to components (or, yes, stateful components to functional ones!), and more.

Wix

Simplur: Simple, Versatile String Pluralization— Uses ES6 template tags so you can provide quantities and singular/pluralized versions of words and terms yourself.

Robert Kieffer

TUI Chart: Attractive Charts for the Web— Cross-browser library with bar, line, area, bubble, radial, treemap, pie, heatmap, bullet, and boxplot charts out of the box.

NHN Entertainment

Top CI Pipeline Best Practices - A Developer's Guide— At the center of a good CI/CD setup is a well-designed pipeline. Check out this best practices guide for developers. 👍

Datree.io sponsor

Sharp: High Performance Image Processing from Node— Boasts that it’s ‘the fastest module to resize JPEG, PNG, WebP and TIFF images’. Uses libvips behind the scenes.

Lovell Fuller

Proton 4.0: A JavaScript Particle Animation Engine— There are lots of demos to enjoy. GitHub repo.

A Jie

Geolib: Basic Geospatial Operations with No Dependencies— Calculate the distance between geographic coordinates, the center of a set of coordinates, check whether a point is inside a polygon made up of coordinates, etc.

Manuel Bieh

Tenko: A 100% Spec Compliant ES2020 JS Parser Written in JS

Peter van der Zee

#463 — November 15, 2019

Read on the Web

JavaScript Weekly

Build Your Own React— An interestingly presented walkthrough of creating your own React-a-like from scratch. You’ll need some time (and be gentle with the scrolling) but this is an interesting way to present such a walkthrough.

Rodrigo Pombo

The Bytecode Alliance: Building A Secure-by-Default, Composable Future for WebAssembly— The Bytecode Alliance is a new industry partnership (originally between Mozilla, Fastly, Intel, and Red Hat) designed to forge WebAssembly’s ‘outside-the-browser’ future. If you’re not yet in sync with why WebAssembly outside the browser makes sense, this announcement should give you a good idea.

Mozilla Hacks

Hone Your JavaScript Skills in Just One Week— Catch up on all the JavaScript advancements and in just one week you’ll be prepared to pick up and apply whatever the web ecosystem throws at you for years to come.

Big Nerd Ranch sponsor

The Introductory Guide to AssemblyScript— AssemblyScript, a TypeScript-to-WebAssembly compiler, provides a way to get around the steep learning curve for WebAssembly and makes it easier to integrate features that need WebAssembly into typical JS projects.

Danny Guo

Results of the 2019 Front-End Tooling Survey 2019— Over 3,000 developers took part in this front-end tooling survey, answering a wide range of questions on things such as tooling and methodologies. React and Vue leapt up in popularity since last year with jQuery and Lodash dropping. Webpack dominates in the bundler space, Jest dominates the testing space, and most of us are using ESLint.

Ashley Nolan

Brendan Eich, Inventor of JavaScript, Did a Reddit AMA— He also helped co-found Mozilla and has just launched version 1.0 of Brave, a privacy-focused browser. Several of the questions are about Brendan’s work on JavaScript and may be of interest.

Reddit

30 Seconds of Code: A Curated Collection of Useful JS Snippets— We’ve linked this project a couple of times over the years, but it has continued to get lots of updates, so if you want to do lots of interesting things with arrays, math, strings, vectors, and more, check it out. A handy resource.

30 Seconds

💻 Jobs

Frontend Developer - React (Remote or UK)— Work from anywhere. Build the next generation analytic platform serving the world's leading brands.

RethinkXSocial

Senior Software Engineer at Getty (Los Angeles, CA)— Build fantastic tools and interfaces at one of the world's most prestigious cultural heritage orgs using Linked-Open-Data, Python, Structured-CMS, Vue.js.

J. Paul Getty Trust

Find a Job Through Vettery— Make a profile, name your salary, and connect with hiring managers from top employers. Vettery is completely free for job seekers.

Vettery

📘 Articles & Tutorials

Handling null and undefined in JavaScript— What are the best strategies to minimize errors caused by values that could be null, undefined, or otherwise uninitialized at runtime?

Eric Elliott

An Early Look at the Vue 3 Composition API in the Wild— A good way to see some of the benefits of the new API.

Mateusz Rybczonek

Making an Audio Waveform Visualizer with Vanilla JavaScript— A really neat tutorial that breaks down the problem well.

Matthew Ström

Why Unit Tests Aren’t ‘Tests’

Gauge sponsor

A console Cheat Sheet— An illustrated tour of the most popular console methods for debugging code from the dev tools.

Javascript Jeep

How to Add Testing to An Existing Project— Because test-driven development is often more a dream than the reality.

Kent C Dodds

Understanding Client Side Routing by Implementing a Router in Vanilla JS

Will Taylor

How Discord Achieves Native iOS Performance with React Native— Discord, the popular gamer-aimed chat system, chose React Native very early on as the basis for their iOS app, but they’ve had to invest a lot of effort in keeping it performant.

Miguel Gaeta

Top CI Pipeline Best Practices - A Developer's Guide

Datree.io sponsor

Making Instagram.com Faster: Code Size and Execution Optimizations— The latest in a series of JavaScript performance posts from the Instagram team.

Glenn Conner

How TypeScript 3.7 Helps Quality— A look at TypeScript 3.7 through the lens of how its new features impact code quality.

Matt Eland

🔧 Code & Tools

JSON Generator: A Tool for Generating Random Data— Generate any random data you want online with agile JavaScript-powered templates. (Possibly stick with the 'old' version for now, though, the 'new' beta doesn't seem to work properly for me.)

Vazha Omanashvili

pm2 4.2 Released: The Node Production Process Manager— A very mature and widely used process manager that includes a load balancer for keeping Node apps alive forever and to reload them without downtime.

Alexandre Strzelewicz

A Much Faster Way to Debug Code Than with Breakpoints or console.log— Wallaby catches errors in your tests and code and displays them right in your editor as you type, making your development feedback loop more productive.

Wallaby.js sponsor

Ky: Tiny, Elegant Fetch-Based HTTP Client for Browsers— Makes the Fetch API tidier to use as shown here.

Sindre Sorhus

Ajv: A Fast JSON Schema Validator— Supports v5, v6, and v7 proposals and claims to be both the fastest validator for both Node and browser.

Evgeny Poberezkin

Fabric.js 3.5: A SVG-to-Canvas and Canvas-to-SVG Library— Essentially provides an interactive object model on top of an HTML5 canvas.

Fabric.js

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

Brian Vaughn

vue-spotify: A Spotify Client Built with Vue.js and Vuex

gk4m

#464 — November 22, 2019

Read on the Web

JavaScript Weekly

Postwoman: An API Request Builder and Tester— A free alternative to Postman, a popular app for debugging and testing HTTP APIs. Postwoman works in the browser and supports HTTP and WebSocket requests as well as GraphQL. Insomnia is a similar tool if you want to run something as a desktop app.

Liyas Thomas

The State of JavaScript on the Web by the HTTP Archive— The HTTP Archive has released an annual ‘state of the Web’ report focused on data collected from six million sites. There are numerous findings here, including how much JavaScript the Web uses, how long it takes browsers to parse that JavaScript, and what frameworks and libraries are most popularly used.

Houssein Djirdeh

Get Best in Class Error Reporting for Your JavaScript Apps— Time is money. Software bugs waste both. Save time with Bugsnag. Automatically detect and diagnose errors impacting your users. Get comprehensive diagnostic reports, know immediately which errors are worth fixing, and debug in minutes. Try it free.

Bugsnag sponsor

The Differences Between the Same App Created in React and Svelte— Several issues ago we linked to Sunil’s article comparing the same app written in React and Vue and now he’s back with a side by side comparison of some of the differences between an app built in React and Svelte, an increasingly popular build-time framework.

Sunil Sandhu

Node Gains Enabled-By-Default Support for ECMAScript Modules— Node.js 13.2.0 came out this week with both an upgrade to V8 and unflagged support for using ES modules. There are some rules to using them, and you might find this V8 blog entry on JavaScript modules worth revisiting to get a feel for what’s involved. Time to play!

Node.js Foundation

jQuery Core Migrating from AMD Modules to ES Modules— Before you say jQuery isn’t relevant, the HTTP Archive has revealed that it’s being used on ~85% of around 6 million sites.

jQuery

Pika Opens Its 'Write Once, Run Natively Everywhere' JavaScript Registry for Early Access— Rather than authors being responsible for formatting and configuring packages, the registry takes care of it. You write the code, they, in theory, do the rest (including creating TypeScript type declarations). Sadly it’s behind an email wall for now, so watch this space.

Pika

💻 Jobs

Full Stack Engineer— Expensify seeks a self-driven individual passionate about making code effective, with an understanding of algorithms and design patterns.

Expensify

Senior Web Frontend Engineer (CA, IL or NC)— Design what machine learning "looks" like to improve the manufacturing of millions of things. We value great tools like fast builds, simple deploys, & branch environments.

Instrumental

Find a Job Through Vettery— Make a profile, name your salary, and connect with hiring managers from top employers. Vettery is completely free for job seekers.

Vettery

📘 Articles & Tutorials

Getting Started with an Express.js and ES6+ JavaScript Stack— With typical Smashing Magazine quality, this is a thorough beginner-level walkthrough, this time covering how to get started with Node in building a web app backed by a MongoDB database. Definitely for beginners though.

Jamie Corkhill

Techniques for Instantiating Classes— Dr. Axel walks through several approaches for creating instances of classes.

Dr. Axel Rauschmayer

How To Build a Sales Dashboard with React— Improve your data visualization with JavaScript UI controls. Build interactive dashboards quickly and easily.

Wijmo by GrapeCity sponsor

▶  We Should Rebrand JavaScript. Yep? Nope?— A podcast where two pairs of JavaScript developers debate an idea that was recently floated.. should we rebrand JavaScript?

JS Party podcast

Compile-Time Immutability in TypeScript— How to achieve compile-time immutability in TypeScript with const assertions and recursive types.

James Wright

Having Fun with ES6 Proxies— Proxies aren’t going to be useful in day to day programming for most JavaScript developers, but they open up some interesting opportunities if you want more control over how objects behave and are worth understanding.

Maciej Cieślar

▶  How to Build a Budget Calculator App with Angular— A 2 hour video that walks through the entire process of building an Angular app. The gentle pace is well aimed at those new to Angular or the tooling involved.

Devstackr

Composing Angular Components with TypeScript Mixins

Giancarlo Buomprisco

Hey Node Helps You Think, Prototype, and Solve in Node.js— Transforming data, package.json, the module system and more. Bite-size, info-packed tutorials with videos and use cases.

Hey Node by Osio Labs sponsor

Cropping Images to a Specific Aspect Ratio with JavaScript— How to use the HTML canvas API and some basic math to build a tiny crop helper function, making it easy to quickly crop images in various aspect ratios.

Rik Schennink

🔧 Code & Tools

EasyDB: A 'One-Click' Server-Free Database— A quick way to provision a temporary database (that’s basically a key/value store) and use it from JavaScript. Ideal for hackathons or quick once-off scripts, perhaps.

Jake and Tyson

Nodemon: Automatically Restart a Node App When Files Are Changed— A development-time tool to monitor for any changes in your app and automatically restart the server. v2.0 has just been released with CPU and memory use improvements and far fewer dependencies.

Remy Sharp

GraphQuill: Real-Time GraphQL API Exploration in VS Code— A way to test GraphQL API endpoints from within VS Code so you don’t have to keep jumping between multiple tools.

OSLabs Beta

Open Realtime Data - A User’s Guide with Links to a Free Streaming Platform

Ably sponsor

Lambda API: A Lightweight Web Framework for Serverless Apps— A stripped down framework that takes an Express-esque approach to putting together serverless JavaScript apps to run on AWS Lambda behind API Gateway.

Jeremy Daly

ScrollTrigger: Let Your Page React to Scroll Changes— Triggers classes based on the current scroll position. So, for example, when an element enters the viewport you can fade it in.

Erik Terwan

Siriwave: The Apple Siri 'Waveform' Replicated in a JS Library

Flavio Maria De Stefano

#465 — November 29, 2019

Read on the Web

JavaScript Weekly

▶  Faster JavaScript Apps with JSON.parse()— Did you know that JSON can be parsed more quickly than JavaScript itself? Here's how and why to consider using JSON.parse instead of normal object literals.

Mathias Bynens / Bram van Damme

It's Time to Take the State of JavaScript 2019 Survey— Now in its fourth year, the popular State of JavaScript survey returns, seeking your responses to help find out “which libraries developers want to learn next, which have the best satisfaction ratings, and much more”. Of course, we’ll share the results once they’re live, as always.

Raphaël Benitte, Sacha Greif and Michael Rambeau

Getting Started Building Apps with JavaScript— CascadiaJS just wrapped up. Take a look at the collection of articles, tutorials and podcast episodes that will help you get started building web applications with JavaScript and JS-related technologies.

Heroku sponsor

ESLint 6.7 Released— The popular linting tool includes a new way for rule authors to make suggestions for non-automatic fixes, plus there are six new rules covering things like duplicate else-ifs and grouping accessor pairs. 6.7.1 quickly followed 6.7.0 fixing a regression.

ESLint

Cockatiel: A Resilience and Transient-Fault-Handling Library— This is for defining common resilience or fault handling techniques like ‘backoff’, retries, circuit breakers, timeouts, etc. and is inspired by .NET’s Polly fault handling library.

Connor Peet

The Epic List of Languages That Compile to JavaScript— JavaScript is as much a compile target as a language in its own right these days, and this extensive list on the CoffeeScript repo has been (and continues to be) updated for years. The latest addition? Fengari, a Lua VM written in JavaScript.

Jeremy Ashkenas et al.

▶  Building Promises From Scratch in a Post-Apocalyptic Future— A 20 minute screencast covering what’s involved in creating a promises implementation from scratch on top of lower level primitives (e.g. callbacks).

Low Level JavaScript

💻 Jobs

Senior Front-End Software Engineer (Vue, Nuxt, Apollo)— Join our distributed Front-End functional team in our quest to make doctors more effective using Vue, Nuxt, Apollo and Rails.

Doximity

Vue Front End Lead at Valiant Finance - Sydney, Australia— FinTech based in Surry Hills looking for an experienced Vue Front End Lead to help us build our growing financial marketplace.

Valiant Finance

Find a Job Through Vettery— Make a profile, name your salary, and connect with hiring managers from top employers. Vettery is completely free for job seekers.

Vettery

📘 Articles & Tutorials

An Official Style Guide for Writing Redux Code— Recommended patterns, best practices, and suggested approaches for writing Redux-based apps.

Redux

An Introduction to the Picture-in-Picture Web API— Chrome supports a ‘picture-in-picture’ mechanism for creating floating video windows that continue to play even if a user navigates to a different page. Firefox and Safari have support via proprietary APIs too.

Ayooluwa Isaiah

Black Friday Sale: Quokka.js - Rapid JavaScript Prototyping in Your Editor— Quokka displays execution results in your editor as you type. Get it now with a 50% Black Friday discount.

Wallaby.js sponsor

Understanding Streams in Node.js— Streams continue to be one of the fundamental concepts that power Node applications.

Liz Parody

Outside the Web: Emscripten Now Generating Standalone WebAssembly Binaries— A key part of both asm.js and Emscripten was the idea of compiling binaries for use on the Web using JavaScript, but now Emscripten has support for emitting WebAssembly without relying on JavaScript at all. You can, of course, interact with such output from your JavaScript code, though.

Alon Zakai

Building Animated Draggable Interfaces with Vue.js and Tailwind— Tailwind CSS is an increasingly popular CSS framework.

Cristi Jora

Video Developer Report - Top Trends in Video Technology 2019

Bitmovin sponsor

Using Backreferences in JavaScript Regular Expressions— Backreferences allow you to use matches already made within a regex within that same regex.

stefan judis

For the Sake of Your Event Listeners, Use Web Workers— “Start by identifying notably intense processes and spin up a small Web Worker for them.”

Alex MacArthur

🔧 Code & Tools

litegraph.js: A Graph Node Engine and Editor— This would be useful if you need to create an online system for users to create and manipulate graphs or interconnecting ‘nodes’ for things like graphics, audio or data pipelines, say. Live demo here.

Javi Agenjo

Duktape 2.5: A Compact, Embeddable JavaScript Engine— An ES5.1-compliant JavaScript engine focused on being very compact. If you have a C/C++ project that needs a JS engine, it’s worth a look as the duk binary runs only 350K.

Sami Vaarala

Automate and Standardize Code Reviews for JS and 29 Other Languages— Set standards on coverage, duplication, complexity, and style issues and see real-time feedback in your Git workflow.

Codacy sponsor

Scala.js 1.0.0-RC1: A Scala to JavaScript Compiler— A final 1.0 release is due in early 2020. If this area of using Scala to build front-end apps interests you, you might also like Slinky which makes writing React apps in Scala easier.

Scala Team

Ketting 5.0: A 'Generic' Hypermedia Client for JavaScript— Supports Hypertext Application Language, JSON:API, Siren, and HTTP link headers. Works in both the browser and Node.js.

Evert Pot

WebGLStudio.js: A 3D Graphics Editor in the Browser— It’s not new but its author says it’s now mature, ready to be extended, and can be used in production (although a 1.0 release is still a little way away).

Javi Agenjo

JSONCrush: Compresses JSON Into URI Friendly Strings— The results are shorter than standard URI encoding.

Frank Force

#466 — December 6, 2019

Read on the Web

JavaScript Weekly

JavaScript, ES6, ES7, ES10.. Where Are We?— A look at the current features within JavaScript, what got rejected, and what native support for ‘modern’ JavaScript features is like. It’s a bit of a mish-mash, but covers a lot of proposals.

Yann Stepienik

Optional Chaining Has Reached Stage 4 at TC39— Why’s that a big deal? It means it’s going to be part of ES2020, the next major ECMAScript spec. The proposal itself is here and here’s how it would work.

Rob Palmer on Twitter

Build Great Apps Faster with the New WebStorm 2019.3— With everything you need to start coding available out of the box, you can be more productive and write better code in no time. Faster startup, advanced Vue.js support, and even smarter JavaScript code completion – start your free trial today.

JetBrains sponsor

WebAssembly is Now a W3C Recommendation— This is a really big, formal step for WebAssembly and the Web as a whole, although it might ultimately lead to JavaScript becoming slightly less important as languages like Rust, Go, and C# begin to target browsers directly by compiling to WebAssembly. This press release doesn’t explain WebAssembly particularly well, so if you want to learn more about it, enjoy this illustrated guide or this if you want something more advanced.

W3C

What's New for Node.js in 2020— Node’s ten years old and continuing to develop at a rapid pace. David dusts off his crystal ball and looks at some of what’s coming.

David Neal

What People in Tech Said About JavaScript On Its Debut— Yep, it’s JavaScript’s birthday again! It was first announced this week 24 years ago, but who was singing its praises in its earliest form?

Chris Brandrick

The Advent of Code 2019— If you have a little time each day to do some programming challenges, you could do a lot worse than the Advent of Code which is now in its fifth year. I’ve really enjoyed the puzzles so far and there’s even a sub-Reddit where people discuss their solutions.

The Advent of Code

💻 Jobs

Fight Crime With Code @ Mark43 - Sr. FE Engineer (NYC/Charlotte)— Build mission critical systems for 911 Dispatch and First Responders using React, Electron and GraphQL.

Mark43

JavaScript Developer at X-Team (Remote)— Work with the world's leading brands, from anywhere. Travel the world while being part of the most energizing community of developers.

X-Team

Find a Job Through Vettery— Make a profile, name your salary, and connect with hiring managers from top employers. Vettery is completely free for job seekers.

Vettery

📘 Articles & Tutorials

Learning Modern JavaScript with Tetris— A thorough walkthrough of all the things to consider when building your own Tetris game in JavaScript. Bit of fun for the weekend, maybe?

Michael Karén

9 Questions to Test Your Knowledge of Promises— A nice way to quickly test your knowledge.

Dan Levy

Top CI Pipeline Best Practices - A Developer's Guide— At the center of a good CI/CD setup is a well-designed pipeline. Check out this best practices guide for developers. 👍

Datree.io sponsor

How I Created 488 'Live Images' with Node, Cloudinary, and Puppeteer— A neat look at stitching together a few different systems to provide reliable, hosted graphical versions of the support grids Can I Use provides.

Ire Aderinokun

An Easy Way to Build a Tree Using Object References— Building a tree structure can be easy if you think in terms of references.

Nick Scialli

The People Behind JavaScript: Allen Wirfs-Brock— Allen is an industry veteran who was editor of the ES2015 (a.k.a. ES6) spec and is a TC39 member.

Svein Petter Gjøby

🤖 NanoNeuron: 7 Simple Functions to Demo Simple Machine Learning— Some simple functions to give you a feel for how machines can ‘learn’ things, via model prediction, cost calculation, forward and backwards propagation, and training.

Oleksii Trekhleb

▶  Coding a Complete Snake Game— At almost two hours, don’t expect a tightly edited tutorial – this is more a relaxing, entertaining and realistic ‘fly on the wall’ look at building something from scratch.

Fun Fun Function

Tried & True Productivity Tips from 25 React Experts

Progress KendoReact sponsor

How ... Works in JavaScript— It plays two roles, as a rest parameter and as the spread operator.

Dag Stuan

▶  The Story of Migrating to Apollo + GraphQL at Airbnb— Covers Airbnb’s use of TypeScript, their incremental adoption of GraphQL, and what they’ve learnt along the way.

Brie Bunge

🔧 Code & Tools

noUiSlider: Lightweight Range Slider with Full Multi-Touch Support— Pretty powerful and flexible. There’s a full page of examples.

Leon Gersen

Over 100 JavaScript Algorithms and Data Structures Demonstrated— 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

The Most Complete Spreadsheet Solution for JavaScript Apps - SpreadJS— Fast enterprise JavaScript spreadsheet for delivering true Excel-like spreadsheet experiences. Download Free Eval.

SpreadJS by GrapeCity sponsor

reg: An Experimental Native ESM Package Manager— Very early days, but an interesting approach! Comes complete with a “do not use this in production” warning, so take care.

Mikeal Rogers

React View: An Interactive Playground to Show Off Your Components— React View is itself a component you can use in any React app to present your components to other developers by both showing the component and letting users edit its props or edit the code used to display it.

Vojtech Miksu

Creepyface: Makes Face Images Follow The Pointer— This is an effect I’ve seen mostly on ‘about us’ pages where faces of team members follow your pointer around. If you want to recreate that, here you go.

Alejandro Tardín

💛 Reassuringly seen on Twitter

Never forget, readers, you never need to feel alone in this :-)

#467 — December 13, 2019

Read on the Web

JavaScript Weekly

Fx 16.0: A Command-Line JSON Processing Tool— If you’ve got some files full of JSON that you want to process, Fx will slice and dice it however you want, including using JavaScript one-liners to add a bit of logic to the process.

Anton Medvedev

Preact 10.1: A Fast 3kB React Alternative with the Same API— Preact is an interesting project that often sees use in places where speed and size are of the absolute essence (Uber used it until they built their own in-house framework). New in 10.1 is support for a devtools extension and a SuspenseList component. GitHub repo.

Preact

CircleCI Config Teardown: How We Write Our Config at CircleCI— Find out how we use YAML configuration to power CircleCI - and which open source orbs (shareable packages of config) we use to speed up our pipeline.

CircleCI sponsor

20 Ways to Become a Better Node Developer in 2020— We’re rapidly coming up on the end of the year (indeed, the next issue is our last this year) so is it time to think about New Year’s resolutions already?

Yoni Goldberg

Dr Axel's 'Deep JavaScript' Now Available— The latest book from JavaScript guru Dr. Axel (of Exploring ES6 fame) is now out. It costs money, but you can read a whole 50% of it online (or grab a PDF direct).

Dr. Axel Rauschmayer

Creating a JSON Parser with JavaScript— Sure, you could just use JSON.parse but where’s the challenge in that? This is a neat step-by-step guide on implementing a JSON parser of your own.

Tan Li Hau

💻 Jobs

Software Engineers, Frontend at Fictiv (San Francisco)— We bring a user friendly experience to manufacturing, making it easy to turn designs into real products. Use the latest tech and JS to iterate quickly, ensuring a rapid feedback loop between us and our customers.

Fictiv

Senior Front-End Software Engineer (Vue, Nuxt, Apollo)— Join our distributed Front-End functional team in our quest to make doctors more effective using Vue, Nuxt, Apollo and Rails.

Doximity

Find a Job Through Vettery— Make a profile, name your salary, and connect with hiring managers from top employers. Vettery is completely free for job seekers.

Vettery

📘 Articles & Tutorials

Raw WebGL: An Illustrated Guide to Starting with WebGL— A well presented tutorial on getting started with WebGL, what key data structures you need, and what each of the main elements (of which there are quite a few when it comes to WebGL!) are and do.

Alain Galvan

Relatively Formatting Times with Intl.RelativeTimeFormat— For example: new Intl.RelativeTimeFormat('en').format(-1, 'day') returns the string "1 day ago". It’s going to be part of ES2020 but you can use it in Chrome and Firefox already.

Bram van Damme

Build a Customizable Angular Data Grid in Minutes— Create an Angular data grid in under 5 minutes. You'll also find resources for building in Vue, React, and plain JavaScript.

Wijmo by GrapeCity sponsor

JavaScript Component-Level CPU Costs— Did you know that in Chrome 78+ on Linux you can actually track how many CPU instructions are used in the rendering of your components? Interesting, though advanced, performance monitoring stuff here.

Stoyan Stefanov

▶  Angular Meetup Online: Two Angular Talks— Ryan Chenkie and Kara Erickson both gave twenty minute talks on the latest in the Angular world.

This Dot Media

How to Write Correctly Typed React Components with TypeScript— React and TypeScript make a powerful pair, but if you’re just starting out, you’ll need to understand how to write correctly typed components.

Piero Borrelli

Why Does JavaScript Have -0?— Yes, there’s -0 and normal 0. They’re equal but are different objects nonetheless.

Thomas Barrasso

Inversion of Control— A simple principle that can drastically improve your reusable code.

Kent C Dodds

Realtime ≠ Request-Response: So, Why’s Google Polling Like It’s the 90s?

Ably sponsor

Reasons To Use Aurelia in 2020— Aurelia is an interesting framework that deserves a look in a sea of competing options.

Dwayne Charrington

The npm, Yarn and Bower Timeline— The npm vs yarn story is a good demonstration of ‘competing’ tools pushing the other along.

Charlie Midtlyng

How Optional Chaining Helps to Avoid "undefined is not a function" Exceptions

Stefan Judis

🔧 Code & Tools

OpenLayers: High Performance Frontend Mapping Library— A system for putting dynamic maps onto your pages that can render map tiles pulled from various sources, vector data layers, markers, etc. Supports both Canvas and WebGL as appropriate. Examples.

OpenLayers

Visual Studio Code November 2019 Released— VS Code is perhaps the most popular editor in the JavaScript world and this release has a lot going for it, not least a new experimental WebGL renderer you can use to make the integrated terminal a lot faster. Just to show no favoritism though, Vim 8.2 just came out too ;-)

Microsoft

New Time-Travel Debugger for JavaScript and TypeScript— Move forward and backwards through your code to understand the conditions that led to a specific bug, view runtime values, edit-and-continue, and more.

Wallaby.js sponsor

simpleParallax: A Simple Way to Create Parallax Effects— A straightforward library to add parallax-style animations to any image on your page. Not always a good idea UX-wise, but the examples and code samples here certainly sell it well.

Geoffrey Signorato

5 Cloud IDEs for JavaScript Developers— I’d add Repl.it, CodeSandbox, and Glitch to this list too.

Shaumik Daityari

npkill: Find and Remove Old or Large node_modules Folders

Estefanía García Gallardo and Juan Torres Gómez

react-tabs: An Accessible and Easy Tab Component for React

React Community

#468 — December 20, 2019

Read on the Web

If you're subscribed to any of our other newsletters, you'll have seen we're doing 2019 roundups this week.. but not in JavaScript Weekly! :-) Our 2019 JavaScript roundup will be here on January 3, but today is a normal issue. Happy holidays!

JavaScript Weekly

Tesseract.js 2.0: Pure JavaScript OCR for 100 Languages— A pure JavaScript port of the popular C++ Tesseract library commonly used for visual text recognition purposes by other systems. The homepage has a neat demo where you can drop on images of your own and see how they get processed. v2.0 is now out and here's why the creator has been working on it.

Jerome Wu

V8 Release v8.0— Yes, that’s v8 of v8 – not confusing at all 😂 Nonetheless, it’s a key step forward for the most widely deployed JavaScript engine, and introduces optional chaining, nullish coalescing, and some significant performance improvements. It’ll be landing in a Chrome and Node near you soon.

Leszek Swirski

Learn the Full Stack with Jem Young, Senior Software Engineer at Netflix— Become a more well rounded engineer by understanding what is happening on the server-side.

Frontend Masters sponsor

Results from the 'State of JavaScript' 2019 Survey— While the methodology is far from perfect (for example, Angular and Angular.js seem to get lumped together as the same thing), this is nonetheless the biggest JavaScript-specific survey. There’s a lot to dig through, so you may prefer The Changelog's7 insights from the State of JS 2019 roundup post that looks at the most striking results.

Sacha Greif, Raphaël Benitte and Amelia Wattenberger

An Update on CDNJS— CDNJS is a popular content distribution network for JavaScript files but just a couple of months ago its continued development was in doubt. In this significant update we learn more about how CDNJS works and how Cloudflare want to take it forward (and they need our help).

Zack Bloom

Mastering console.log Like A Pro— This isn’t exactly new ground, but if you’re a heavy console.log user, this article deftly covers a variety of extra console methods to keep on your radar.

Harsh Makadia

💻 Jobs

Backend Engineering Position 🤘 in Beautiful Norway 🎉— Passion for JavaScript, GraphQL, Scalability and Performance? Want to move to Norway? Join our fast growing e-commerce service Crystallize.

Crystallize

Find a Job Through Vettery— Make a profile, name your salary, and connect with hiring managers from top employers. Vettery is completely free for job seekers.

Vettery

Technical Content Producer (Interim) at Ably (London, Remote OK)— Ably builds tools and cloud infrastructure for the realtime internet. They need a developer/tech writer on a temporary basis to coordinate, outsource, and review the creation of technical content for a developer audience.

Ably

📘 Articles & Tutorials

What's Coming in Angular 9.0.0 and Ivy Improvements— Angular 9.0 was due to be released this year but is being held back until next year to give the team a break. Nonetheless, it’s going to pack in some key improvements.

Mike Hartington

An Introduction to Controlling the Raspberry Pi 4's GPIO Pins from Node— If you’ve got a Raspberry Pi sat around (I have a few!) and you’re looking to have a play over the holiday season, you could start here.

Uday Hiwarale

Migrating a Distributed System from JavaScript to TypeScript— Learn how to migrate a globally-distributed system written in JavaScript over to TypeScript.

Ably sponsor

Understanding Decorators in JavaScript— Decorators are a first-class concept in some languages that can be used to quickly modify functions or classes by way of a simple directive. The idea is still merely a proposal for JavaScript, but it’s possible to adapt some of the ideas now with Babel.

Mike Green

A Case for Using void in Modern JavaScript?— Some interesting points here. I doubt they’ll take off, but I like the examples.

slikts

Writing JavaScript With Only Six Characters— A fun article like this tends to do the rounds each year and it never ceases to delight me at how quirky JavaScript can be.

Erik Wendel

Const Assertions in Literal Expressions in TypeScript

Marius Schulz

What’s New in Preact X?— Preact is a lightweight React alternative with React API compatibility.

Ogundipe Samuel

Sentiment Analysis of Your Year with TensorFlow.js— Perform sentiment analysis with TensorFlow in JavaScript to determine the positivity of text messages received via Twilio.

Lizzie Siegle

BDD vs Executable Specifications

Gauge sponsor

▶  The Design Principles of Vue 3.0— A 50 minute talk from the creator of Vue.js, Evan You, on the principles behind the changes coming in Vue 3.0.

Evan You

10 Useful Angular Features You’ve Probably Never Used— Assuming you actually use Angular in the first place, naturally.

Chidume Nnamdi

Why Svelte Won’t 'Kill' React

Kit Isaev

🔧 Code & Tools

A-Frame 1.0 Released: Framework for Building VR Experiences— A-Frame handles the 3D and WebVR boilerplate required to get running across numerous platforms quickly. Version 1 boasts full WebXR support.

A-Frame Team

Introducing Scully: The Angular Static Site Generator— The Angular community now has their very own static site generator.

Netlify

Polly.js 3.0: Record, Replay, and Stub HTTP Interactions— A library from Netflix for recording, replaying and stubbing HTTP interactions via native browser APIs. GitHub repo.

Netflix

▶  From NodeConf EU: What's Being Built and Where Node.js Is Heading

Heroku sponsor

Sarus: A Client-Side Library for WebSockets— Helps you handle situations where connections unexpectedly close.

Anephenix

Alpine.js: A Minimal Framework for Composing Behavior in Your Markup— “Think of it like Tailwind for JavaScript.”

Alpine.js

vue2-datepicker: A Date / DateTime Picker Component for Vue

xiemengxiong

If you're celebrating, we hope you have a happy holiday season and we'll see you in the new year on January 3, 2020.

#469 — January 3, 2020

Read on the Web

JavaScript Weekly

The holiday season is rapidly coming to a close and we're looking forward to not only a new year but the entirety of the Roaring Twenties. Rest assured, the JavaScript world is not going to look the same when 2030 turns up so watch this space! 😄

We'll be back as usual next week, but this week we're taking a look back at 2019 and the most popular things you clicked on. If you didn't read every issue in 2019 (we wouldn't expect you to!) you'll hopefully find a few things worth revisiting here.

Thanks for supporting us — we look forward to keeping you up-to-date in the years to come.

— Peter Cooper and the Cooperpress team

📈 Our most popular links of 2019:

1. The TypeScript Tax: A Cost vs Benefit Analysis— As much as we love JavaScript, this was really a strong year for TypeScript, with it seeming to become the de facto way to bring strong typing to JavaScript. Back in January, Eric Elliott asked "is it worth it?" and presented some critical, data-driven analysis to establish its viability. It was your most clicked link of 2019.

Eric Elliott

2. New ES2018 Features Every JavaScript Developer Should Know— We're now looking forward to ES2020 and we've had ES2019 in 2019 too, but this post remains packed with interesting examples of spread properties within object literals, asynchronous iterators and asynchronous iterables, Promise.prototype.finally, and other features that are still not exactly common to see in the wild.

Faraz Kelhini

The Complete ⚛️ React Learning Path— Take your React to the next level to find out what it is fully capable of with this comprehensive learning path.

Frontend Masters sponsor

3. 43 JavaScript Questions, With Their Answers Explained— Whether for fun or a job interview, this remains an interesting set of JavaScript-related questions, complete with explanations of the answers.

Lydia Hallie

4. I Don't Hate Arrow Functions (But..)— Arrow functions (=>), as introduced in ES6, have generally been a much welcomed addition to JavaScript but Kyle Simpson reminded us they’re not suitable in every scenario and created an ESLint plugin to help you keep a handle on their use.

Kyle Simpson

5. Responsible JavaScript: A Three Part Series— We originally only linked to part one of this great series where Jeremy Wagner plotted a course to avoid the unnecessary bloat and inaccessible patterns of modern JavaScript trends.. but now you can enjoy part 2 and part 3 too, where he went into more technical depth on bundling and handling third-party scripts.

Jeremy Wagner

6. What’s New in JavaScript— At this year’s Google I/O ’19, Mathias Bynens and Sathya Gunasekaran of the V8 team gave a fantastic 30 minute ‘state of the union’ talk on the state of JavaScript as a language and what new features are being baked in.

Google I/O video

💻 Jobs

JavaScript Developer at X-Team (Remote)— Work with the world's leading brands, from anywhere. Travel the world while being part of the most energizing community of developers.

X-Team

Senior Software Engineer, Frontend— Use the latest tech to mold an innovative, empathy-centric experience for creators to order fast, high-quality parts (forging space robots to animatronics).

Fictiv

Find a Job Through Vettery— Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.

Vettery

📘 The most popular articles & tutorials of 2019

The Cost of JavaScript in 2019— Addy Osmani presented a 2019 update to his Cost of JavaScript in 2018 article in both video and article forms. If you still want to get a feel for where the true bottlenecks are with JavaScript, this is a must read.

Addy Osmani

Should We Rebrand 'JavaScript'?— This thoughpiece provoked quite a bit of discussion in the community over the problems (or not) with ‘JavaScript’ as a name. I think we'll see more on this front in 2020.

Kieran Potts

First Online Mentored Software Bootcamp w/ Job Guarantee— Get a job or your money back with Springboard’s online bootcamp. Benefit from 1:1 mentorship, our exclusive curriculum, and top career coaching.

Springboard (Software Engineering Career Track) sponsor

When Should You Be Using Web Workers?— Web Workers provide a way to run JavaScript in background threads in the browser and you’d think using them as much as possible would be a good thing.. right? Current frameworks make this tough, says Surma, who shows us why we should be working to change this ASAP.

Surma

Practical Ways to Write Better JavaScript— You’re not necessarily going to agree with all of them (e.g. “Use TypeScript”!) but this is a reasonably solid batch of points to think about overall.

Ryland Goldstein

JavaScript Symbols: But Why?— Not played with symbols (a new data type introduced with ES6) yet? This is a gentle way to get up to speed with not only what they are but why you might use them.

Thomas Hunter II

Make 2020 the Year to Master MongoDB. Try Studio 3T Today— Generate driver code for JavaScript, Python, Ruby and more? Build queries fast with our drag & drop editor? Of course.

Studio 3T sponsor

Using Native JavaScript Modules in Production Today— “now, thanks to some recent advances in bundler technology, it’s possible to deploy your production code as ES2015 modules—with both static and dynamic imports—and get better performance than all non-module options currently available.”

Philip Walton

7 Tricks with Resting and Spreading JavaScript Objects— Using modern JS features to merge objects, organize properties, and more.

Joel Thoms

📺 The most popular videos of 2019

▶  Why I Was Wrong About TypeScript— Smells like an opinion-driven talk, but actually covers the history behind compile-to-JS languages, how we got to a point where interest in TypeScript is growing strongly, and why it’s worth taking seriously.

TJ VanToll

▶  Why 0.1 + 0.2 === 0.30000000000000004: Implementing IEEE 754 in JS— Head to your node CLI right now and type in 0.1 + 0.2. If the answer confuses you, this is the video for you. And even if you know why, working with the building blocks behind floating point representations is just cool anyway.

Low Level JavaScript

Video Developer Report - Top Trends in Video Technology 2019

Bitmovin sponsor

▶  Keep Betting on JavaScript— Kyle Simpson presents a history lesson of JavaScript, looks at how a variety of features were (or weren’t) introduced, and compels us to think about the future of the Web and JavaScript as we contribute and ‘place bets’ on technologies.

Kyle Simpson

▶  A Look at Deno: A New(ish!) JavaScript Runtime— Ryan originally created Node about ten years ago but over the past couple of years he’s been working on Deno, a non-Node compatible, TypeScript-focused runtime with some interesting features. (Note: Poor audio until a few minutes in.) I suspect we'll hear a lot more about this in 2020.

Ryan Dahl

🔧 The most popular code & tool releases of 2019

Svelte 3 Released: Rethinking Reactivity— Svelte is one of the most interesting UI frameworks out there as it’s not scared of taking a unique approach. Rather than running in the browser, Svelte runs at build time, compiling your app into more efficient runtime JavaScript. Svelte 3 took some major steps forward, particularly in helping you write less code.

Rich Harris

Mithril.js 2: A JavaScript Framework for Building Brilliant Applications— Mithril is a really neat alternative to things like Vue, React or Angular. It’s very compact and fast (so ideal for mobile), runs a bit closer to vanilla JS than the alternatives, and is great for tying together vanilla JS libraries rather than needing its own alternatives.

Mithril

RunJS: A JavaScript 'Scratchpad' Tool for the Desktop— Write and run JavaScript instantly. Useful for learning, experimenting, or perhaps even creating screencasts, tweets, or similar educational content. Originally macOS only but now supports Windows and Linux too.

Luke Haas

Pixi.js 5: Create Beautiful 2D Web Experiences— Boasts the ‘fastest, most flexible 2D WebGL renderer’ to let you take advantage of hardware acceleration without getting involved in WebGL or 3D concerns. Check out demos for what the code looks like and what you’d use it for. There’s also a Pixi Playground for quickly crafting your own experiments.

PixiJS

Babylon.js 4.0: The (Very) Powerful WebGL Graphics Engine— Such a significant release that they released a 2 minute video trailer for it! Want to play? Enjoy this editable live demo.

Microsoft

Postwoman: An API Request Builder and Tester— A free alternative to Postman, a popular app for debugging and testing HTTP APIs. Postwoman works in the browser and supports HTTP and WebSocket requests as well as GraphQL. Insomnia is a similar tool if you want to run something as a desktop app.

Liyas Thomas

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

Just: A JavaScript Task Library from Microsoft— If you’re familiar with Ruby’s rake, it’s a bit like that. Define tasks in JavaScript, run them with just (which works fine without installation using npx) and you get a bunch of nice features like logging and task composition.

Microsoft

Node-RED 1.0 Released— Node RED is a flow-based, visual programming tool (aimed primarily at hardware automation) that’s built on top of Node.js. Despite only reaching 1.0 in 2019, it’s a mature project used in numerous real world IoT projects.

Nick O'Leary

#470 — January 10, 2020

Read on the Web

JavaScript Weekly

Snowpack: A 'Run Once' Dependency Builder/Modularizer— An interesting project (formerly known as pika/web) from the folks behind Pika. The idea is that you run Snowpack once after npm install and it prepares your dependencies as ES modules that can be loaded dynamically by the browser so you don’t need to rebundle on every code change you make. This isn’t good if you want to target old browsers, but for the 90% of cases, this could change your dev process.

Fred K. Schott

2019's JavaScript 'Rising Stars'— If you don’t like popularity contests, skip this one, but it’s the latest annual roundup of which JavaScript projects did well in terms of gaining GitHub stars in 2019. Vue took the top spot for the 4th year in a row, but the subcategories are more interesting.

Michael Rambeau and Sacha Greif

Get Best in Class Error Reporting for Your JavaScript Apps— Time is money. Software bugs waste both. Save time with Bugsnag. Automatically detect and diagnose errors impacting your users. Get comprehensive diagnostic reports, know immediately which errors are worth fixing, and debug in minutes. Try it free.

Bugsnag sponsor

Dan Abramov on What JavaScript Is Made Up Of— Dan (of React core team and Redux fame) reflects on his mental model of what JavaScript is in terms of raw concepts.

Dan Abramov

How to Move a Project to TypeScript - At Your Own Pace— We’ve recently commented how 2019 seemed to be the year of many people ‘switching’ to TypeScript.. but if you’re intimidated, you might like this guide to moving an existing project in a gradual way.

Dominik Kundel

The State of Storybook at the End of 2019— Storybook is a popular tool for developing and showcasing UI components (originally just for React, but now supporting Angular, Vue, and more). 2019 saw even more growth for Storybook’s ecosystem and community.

Michael Shilman

💻 Jobs

Full-Stack or Front-End Engineer - Rails/React (Remote/NYC)— Got 2+ years of experience? Come help build the next iteration of our growing digital recovery platform centered providing alcohol abuse treatment.

TEMPEST

Find a Job Through Vettery— Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.

Vettery

📘 Articles & Tutorials

An Abbreviated History of JavaScript Package Managers— This post explains why npm, Yarn and pnpm were created and the problems they’ve set out to solve over time.

Matt Goldwater

Understanding Async/Await— A straightforward and easily accessible tutorial on using promises and how async and await can make the resulting code more straightforward.

Sarah Drasner

CFP for ForwardJS San Francisco and Ottawa now OPEN— Submit your proposal to speak at ForwardJS Ottawa (May 26-29) or San Francisco (July 20-24) Ticket sales begin Jan 15.

ForwardJS sponsor

Off Main Thread Architecture with Vuex— Inspired by Surma’s articles on using Web Workers to take work off of the main thread, Abdelrahman was inspired to see how this could help with Vue and Vuex.

Abdelrahman Awad

How To Create And Deploy an Angular Material App— This article will help you get started with a new Angular project from just a thought to deployment (on Netlify, in this case).

Shubham

Things I've Learnt Optimizing My Build Time— Things a developer has learnt implementing some build time optimization techniques at the company he works for.

Eldad Bercovici

Why I Avoid Nesting Closures— “A little tendency I have to reduce cognitive load for readers of my code.”

Kent C Dodds

A Basic Example of the Web Share API— The Web Share API enables native sharing (via other apps/social networks) on pages.

Dillion Megida

Breaking Chains with Pipelines in Modern JavaScript

Dan Shappir

Comparing the Different Types of Native JavaScript 'Popups'— window.confirm, window.onbeforeunload, etc.

Elliot Goldman

Top GitHub Best Practices for Developers - Expanded Guide— Implementing these best practices could save you time, improve code maintainability, and prevent security risks.

Datree.io sponsor

▶  Why GitHub Actions Is One Developer's New Favorite Programming Tool— While Github Actions is commonly associated with deployment and pipelines, it’s ultimately an engine for running JavaScript in the cloud, and that opens up some neat use cases as demonstrated here. 17 minutes.

Kristian Freeman

🔧 Code & Tools

Craft.js: A React Framework for Building Drag and Drop Page Editors— It’s a bold move to make the landing page for your project be a text editor itself, but I like it :-)

Prev Wong

Code to Graph: Visualize JavaScript Code as a Network Diagram— An interesting idea and fun to play with.

Vincent Lecrubier

Faster CI/CD for All Your Software Projects Using Buildkite

Buildkite sponsor

Mocha 7.0 Released: The Popular JavaScript Test Framework— Mocha has been a popular go-to test framework for both Node and the browser for years now. 7.0.0 isn’t a huge release but drops Node 6 support and makes enough changes and deprecations to warrant the version update.

Mocha

Postgres.js: A Fast, Full-Featured Postgres Client for Node— Claims to be the fastest even (at 2-10x faster than the popular pg module) but we’ll let you be the judge of that :-)

Rasmus Porsager

scalajs-react: React, but for Scala.JS— Feeling brave? Scala.js provides a way to build front-end apps using Scala (which is then compiled into JavaScript) and scalajs-react brings React into the mix too.

David Barri

😂 Last but not least..

The Size of a node_modules Folder When Installing The Top 100 Packages— We’ve all heard the jokes about the size of node_modules directories, but I found it neat that someone’s actually tracking this on an ongoing basis. And if you really want to clean up those folders, check out npkill.

Koen van Gilst

#471 — January 17, 2020

Read on the Web

JavaScript Weekly

Babel 7.8.0 Released— The popular JavaScript transpiler now supports ECMAScript 2020 features by default with no plugins needed for nullish coalescing (??), optional chaining (?.) and dynamic import(). Work is also underway on Babel 8 with two upcoming issues outlined in this post too.

Nicolò Ribaudo

Goodbye, Clean Code— Much as Donald Knuth warned us away from premature optimization, here React expert Dan Abramov tells us to beware of premature refactoring and de-duplication. A well put and interesting argument you might appreciate here.

Dan Abramov

Faster CI/CD for All Your Software Projects Using Buildkite— See how Shopify scaled from 300 to 1500 engineers while keeping their build times under 5 minutes.

Buildkite sponsor

Native Web Components Come to Microsoft Edge— As featured in our Frontend Focus newsletter earlier this week, Microsoft’s Chromium-based version of Edge is now out and this also means “all major evergreen browsers now support Web Components natively.”

Polymer Project

What to Pay JavaScript Developers in 2020?— I think this is one of those “how long is a piece of string?” type questions but nonetheless Eric Elliott has brought together a variety of interesting stats.

Eric Elliott

The ECMAScript Archives— A collection of documents spanning from 1996 to 2015 relating to the activities of Ecma TC39 as the standards behind JavaScript were crafted over the years. Useful? Not really. Interesting? Depends how much of a geek you are, but the “issues list” in the first TC39 meeting’s minutes is kinda fun. “Why reserve Java keywords?”.. quite!

ECMA

Announcing TypeScript 3.8 Beta— Type-Only imports and export, top-level await and ECMAScript Private Fields all.. await you :-) TypeScript has a way of dropping a final release just after we publish, so watch this space!

Daniel Rosenwasser (Microsoft)

💻 Jobs

Senior Frontend-Focused Engineer in Munich— Do you love working with React, TypeScript, GraphQL, and working in a user-centred team? Then you're in for a treat 🍪 Let's protect some businesses together. 🙌

Finanzchef24

Find a Job Through Vettery— Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.

Vettery

📘 Articles & Tutorials

A Class-Based enum Pattern for JavaScript— Always a pleasure to see Dr. Axel writing. This time he looks at a way to implement enums (as available in other languages) in pure JavaScript before showing off enumify, a library he’s created for the task.

Dr. Axel Rauschmayer

How to Build a D3 and Cube.js Powered Data Dashboard— Cube.js provides the analytics framework, D3 provides the visualizations.

Artyom Keydunov

The Fastest Way to Get Great Bug Reports from Non-Technical Folk
Get less “the link is broken”, get great bug reports (with screenshot and browser data) from non-tech clients with BugHerd.

BugHerd sponsor

A Good VSCode Linting and Formatting Setup for TypeScript Projects— There’s a GitHub repo with the actual configs and rules.

Andréas Hanss

Letting Tools Make Choices— We used to link to tutorials by Jack quite often back in the day so it’s great to see him blogging again. Now, Jack is thinking about the process of working out which tools to use, why, and letting tools carry the ‘burden’ of choices you’d otherwise have to make yourself.

Jack Franklin

Working with Raw WebGPU— An overview on how to write a WebGPU application, where WebGPU is an under development W3C spec on bringing modern 3D graphics and compute capabilities to the Web (and JavaScript).

Alain Galvan

Understanding npm Filesystem Takeover Vulnerabilities— Last month, a security vulnerability affecting all JS package managers (npm, yarn and pnpm) was disclosed which allows malicious actors to use various arbitrary file overwrite tactics. Here’s what that means and why it matters.

Liran Tal

Building a Virtualized List From Scratch— Understanding a powerful tool for improving UI render performance.

Mark Jordan

6 Useful Decorators to Use in Angular Projects

Chidume Nnamdi

▶  How to Improve Error Handling in Your Node.js Apps

Heroku sponsorpodcast

How to Support IE 11 with Angular— Might be relevant if you’re targeting enterprise users.

Colum Ferry

Is TypeScript Worth It?— “I would like the jury to know that I am, for the most part, a TypeScript fan but I do have some nagging doubts that I would like to discuss in this post..”

Paul Cowan

🔧 Code & Tools

Next.js 9.2 Released— The popular React-meets-server framework gains improved code splitting, CSS modularity, and new ‘catch-all’ dynamic routes.

Neutkens, Haddad, Kasper and Alvarez

uuid: Generate RFC-Compliant UUIDs in JavaScript— Seems very complete and covers UUID v1, v3, v4 and v5. Includes support for namespaces too.

UUID

Villus: A Tiny and Fast GraphQL Client for Vue 3— An interesting writeup of how the creator approached the problem, too. Vue 3.0.0 alpha 2 is also out, BTW.

Abdelrahman Awad

FeathersJS/Hooks: Async Middleware for JavaScript and TypeScript— Koa-style middleware for any async functions for creating composable and reusable workflows and adding functionality without having to change a function or class’s original code.

Feathers

react-email-editor— A drag-n-drop component that makes it easy to add a solid email editor to your React apps. Designs are saved in JSON & can be exported as HTML.

Unlayer on GitHub sponsor

Styled-Components 5.0: Faster CSS Styling for React Components— Styled Components is a popular way to bring CSS and JavaScript together for styling components and 5.0.0 officially dropped this week :-)

Evan Jacobs

Spectacle: A React and JSX-Based Presentation Library— Got a presentation coming up? Build your decks with JSX! The best way to get a feel for what it can do is via this live slide deck.

Formidable

❓ The Coding Sans Software Development Survey

Each year we help out (for free – this isn't a sponsored thing) Coding Sans by linking to their State of Software Development survey. The latest one is out now, and if you're able to fill it out, that would be awesome :-) They release the results each time, so if you're intrigued what sort of things it covers and uncovers, this PDF of the 2019 results may be of interest.

You can take the 2020 survey here— thanks!

#472 — January 24, 2020

Read on the Web

JavaScript Weekly

▶  A Look at Deno: Could It Supplant Node (One Day)?— Over the past couple of years, we’ve mentioned Deno a few times. It’s a 'new' JavaScript and TypeScript runtime initially created by Ryan Dahl, the creator of Node, so it’s interesting to see how he thinks things should be done nowadays. Version 1.0 is due soon and we'll feature it in more detail then.

Bert Belder

A Guide to ESLint Configuration and Best Practices— A start-to-finish walkthrough aimed at beginners or anyone who usually just copy/pastes settings until things work. This will help you really understand what’s going on.

Lucas Santoni

React Hooks Guide: See the In-Depth Tutorials with Examples— This guide serves as an exhaustive resource for learning the built-in Hooks that are now part of React. Learn all about them as we comprehensively cover: State and Effects, Context, Reducers, and Custom React Hooks. Start learning today.

Progress KendoReact sponsor

TypeOfNaN JavaScript Quiz Questions— A set of 72 (so far) multiple choice questions to test out your JavaScript knowledge. Give it a try over the weekend :-)

Nick Scialli

Playwright: A Node Library to Automate Chromium, Firefox and WebKit— If you’re familiar with Puppeteer for automating Chrome/Chromium, this is in a similar vein for multiple browsers and is being worked on by some of the same contributors. The goal? To be vendor-neutral and to make the APIs more testing-friendly than Puppeteer.

Microsoft

💻 Jobs

Full Stack Engineer— Expensify seeks a self-driven individual passionate about making code effective, with an understanding of algorithms and design patterns.

Expensify

Programmer — Basecamp (Remote)— Join our Research & Fidelity team and help shape the front end of our Rails apps and expand our suite of open-source JavaScript frameworks.

Basecamp

Find a Job Through Vettery— Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.

Vettery

📘 Articles & Tutorials

JavaScript Visualized: Generators and Iterators— An easily accessible introduction to generator functions with code and animated examples.

Lydia Hallie

How to Pass Data Between Components in Vue.js— With several ways to share data across components, it’s worth spending some time to reflect on what best suits your situation.

Matt Maribojoc

Writing Dependency-Free JavaScript— If you really need to have no dependencies at all, these tips may help.

Magnus Hovland Hoff

▶  Scaling Telecommunications Data with a Service Mesh— Luca Maraschi, a TELUS Digital chief architect, shares how they serve massive volumes of data to millions of customers.

Heroku sponsorpodcast

JavaScript Tree Shaking, Like A Pro— Eliminating dead code is becoming an essential practice, to avoid large bundle sizes and improve performance. But “as a general rule of thumb: predicting how Webpack will behave for a given module, is not easy to do by eye.”

Daniel Brain

The Best Way to Build Reactive Sub-Forms with Angular— Learn how to extract repetitive sub-form implementations into standalone, robust and type safe components.

Tomas Trajan

How We Do Efficient TDD with Karma and Webpack— How Bamboo has made the act of writing a unit test, running the test and seeing feedback into a fast, iterative process for their developers.

Josh Hale

TypeScript's Secret Parallel Universe— How TypeScript handles name clashes between types and variables.

Florian Reuschel

A Basic Introduction to 'Big O' Notation via JS— This article won’t get you through a CS degree(!) but if you’ve heard people talking about things like “O(n) complexity”, it’ll help.

Joshua Hall

The 10 Most Important JavaScript Frameworks of The Past Decade?— It’s a bit of a listicle by definition, but covers frontend, backend, and native and broadly matches up with our experiences. Where’s Ember though?

Ovie Okeh

How We Replaced Mocha with Jest

Ákos K

🔧 Code & Tools

React Nice Dates: Responsive, Touch-Friendly Modular Date Picker— Another month, another date picker, but this seems to be a pretty good one. Lots of demos and code examples and the control itself feels good.

Hernán Sartorio

Time-Travel Debugger for JavaScript and TypeScript— Move forward and backwards through your code to understand the conditions that led to a specific bug, view runtime values, edit-and-continue, and more.

Wallaby.js sponsor

Panzoom: A Universal Panning and Zooming Library— Here’s a live demo.

Andrei Kashcha

Ava 3.0 Released: The Popular Test Runner— A popular test runner for Node with a concise API, detailed error output, etc. 3.0 drops built-in Babel support due to advancements in Node’s native modern JavaScript support and this has some implications for how you’ll write your tests so take care with this upgrade and read this post first.

AVA

Proton Native V2: React, but for Desktop Apps— Make cross-platform desktop apps with React without using Electron or a browser by using Qt (or, as of v2, wxWidgets) for rendering native interfaces.

Gustav Hansen

BLAKE3 Hashing for JavaScript: Native Node Binding and WebAssembly— BLAKE3 is a Merkle-tree based cryptographic hash function (originally implemented in Rust) that’s fast, secure, and highly parallelizable.

Connor Peet

Axe Pro: Free Accessibility Testing Tool Created for Development Teams

Deque sponsor

EPANET-JS: Model A Water Distribution Network in JavaScript— This certainly seems like the real deal, but the creator is quick to note that it’s “extremely niche as I don’t suspect there will be many engineers simulating water networks”. Hmm.

Luke Butler

A Big List of HTTP Static Server One-liners— Want to spin up a quick HTTP server locally? There’s a lot of ways to do it.

William Bowers

#473 — January 31, 2020

Read on the Web

JavaScript Weekly

Popper 2.0: Tooltip & Popover Positioning Engine— This popular tooltip and popover library just hit version 2.0. You can read the blog post detailing what’s changed and what’s new here.

Federico Zivolo

JavaScript Libraries Are Almost Never Updated Once Installed— An analysis, based on CDNJS data, of when and if JavaScript libraries are updated after being installed onto websites (the headline kinda gives this one away😉).

Zack Bloom (Cloudflare)

Fast, Easy, JavaScript-Based Testing for Any Web App— Cypress is the new standard for front-end testing that every web developer and QA engineer needs. Debug, hot reload, and record video of your end-to-end tests—using 100% JavaScript. Get started today with our free, open-source Test Runner.

Cypress.io sponsor

Introducing Yarn 2: It's All Change for the Popular Package Manager— The first stable release of Yarn 2 is now available, it contains quite a few fundamental changes (in the migration guide it’s called “very different software” to v1) and new features borne from the team’s own usage. Yarn 1.22 will be released next week and then enter maintenance mode, so if you’re a Yarn user, consider upgrading.

Maël Nison

Puppeteer 2.1: The Headless Chrome Node.js API— Last week we featured Playwright, a new multi-browser alternative to Puppeteer, but now Puppeteer is back with support for working with a standard, unpatched version of Firefox.

Puppeteer

💻 Jobs

Frontend Developer Needed in Beautiful Norway— Are you a senior frontend developer with an eye for great UI and bragging rights about your full-stack abilities?

Snowball Digital

Find a Job Through Vettery— Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.

Vettery

📘 Articles & Tutorials

An In-Depth Look at TypeScript's enums— enum lets you define types that have a specific number of values, a.k.a. an enumerated type. Here’s how they work and some use cases.

Dr. Axel Rauschmayer

▶  Google Sheets for Node Developers— A look at some of the cool things you can do with Google Sheets from Node. This is a nice, practical introduction and they show off all the parts involved in putting a real app together. 35 minutes.

Franziska Hinkelmann and Anu Srivastava

Introduction to Machine Learning with Tensorflow.js and IBM Watson— RSVP for this online workshop on open source Machine Learning from the browser to the cloud by IBMer David Nugent.

IBM Developer sponsor

Memory Management in the V8 Engine— You don’t need to know this stuff to use Node effectively, but if you’re intrigued what’s going on under the covers, enjoy this.

Deepu K Sasidharan

5 Best Practices to Write Quality Arrow Functions

Dmitri Pavlutin

Typing Objects in TypeScript— Dr. Axel continues his spelunking into the world of TypeScript with a look at how objects and properties are typed.

Dr. Axel Rauschmayer

Building a Reusable Dialog Module with Angular Material

Vassiliki Dalakiari

Let It Crash: Handling Node.js Errors on Shutdown

Heroku sponsor

Why The TypeScript Team is using Gatsby for Its New Site— Discover why the TypeScript team uses Gatsby (a React powered site generator) and what constraints they use to make it work for their team.

Orta Therox

🔧 Code & Tools

Rough.js 4.0: Draw Web Graphics with a Hand-Drawn Appearance— You can now pass in seed values to seed the randomness of Rough’s scribbling which could help your graphics look more.. predictably rough :-) There are also numerous other visual improvements including support for no-stroke fills.

Preet Shihn

Size Limit 4.0: A Performance Budgeting Tool for JavaScript— Calculate the real cost to run your JS app or lib to keep good performance. Integrates with your CI process.

Andrey Sitnik

LInQer: C# Language Integrated Queries (LINQ) but for JavaScript— Use fluent, chainable methods like where, select, and groupBy to work with data.

Costin Manda

Axe Pro: Free Accessibility Testing Tool Created for Development Teams— Unique mix of guided and automated tests. Manage multiple tests, limit the scope of your testing, export results, and more.

Deque sponsor

Meteor 1.9 Released— It’s been a while since Meteor, a once hyped but now mature JS development platform, has come up on our radar, but it’s now gained Node 12 support.

Filipe Névola

Phoenix: A JS-Scriptable macOS Window and App Manager— If you want full control over your window management and you know JavaScript, this is for you. Here’s an example script to give you a taster.

Kasper Hirvikoski

OctoLinker: Links Together, on GitHub, What Belongs Together— A browser extension for GitHub power users that turns import and require sources into links to the original source. Here’s a demo to see if you like the effect. Supports many other languages than JavaScript too. A new release is just out and it's faster than before.

OctoLinker

#474 — February 7, 2020

Read on the Web

JavaScript Weekly

Understanding the ECMAScript Spec— The meaty first post in a series looking at how to read parts of the formal ECMAScript spec that forms the basis for JavaScript and turns its formal notation into something you can learn from.

Marja Hölttä

Angular 9 Released: Project Ivy Has Arrived— A major release for Angular that includes an all new compilation and rendering pipeline (called Ivy) as well as updates across the entire framework including the CLI tools and Angular Material. “This is one of the biggest updates to Angular we’ve made in the past 3 years.”

Stephen Fluin

Locate Front-End Issues Like JavaScript or Network Errors Instantly— Get proactively alerted on any client-side issues such as JavaScript and network errors, optimize the load time of your front-end resources, and detect any UI issues that affect critical user journeys. Try it free with Datadog Synthetics.

Datadog sponsor

Electron 8.0.0 Released— The popular cross-platform desktop app development toolkit takes more steps forward, mostly in the area of dependencies, by moving to Chrome 80 (which only came out this week itself), V8 8.0, and Node 12.13. IPC communication now uses a new algorithm which is a lot faster for large and complex objects too. Offscreen rendering is currently disabled, however, so don’t upgrade if you depend on it.

Electron Project

A Proposal for a Built-In Decimal Datatype— An investigation into adding a built-in data type in JavaScript to represent base-10 decimal numbers that’s being presented to TC39. BTW, you may find this slidedeck to be more accessible.

Daniel Ehrenberg

💻 Jobs

Announcing a 100% Remote Opportunity as a Sr. Fullstack Dev (Node/React)— We’re passionate about giving developers the chance to do meaningful work by building transformational technology solutions.

Clevertech

JavaScript Developer at X-Team (Remote)— Work with the world's leading brands, from anywhere. Travel the world while being part of the most energizing community of developers.

X-Team

Find a Dev Job Through Vettery— Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.

Vettery

📘 Articles & Tutorials

Getting Acquainted With Svelte, the New Framework on the Block— We’ve mentioned Svelte, an interesting compile-time 'framework', a few times in the last year – here’s another take on why to consider it.

Tristram Tolliday

Formatting Dates with Intl.DateTimeFormat— A good demonstration of a modern way to format dates in a region friendly way using native APIs, as now supported in both Node and all major browsers.

Valentino Gagliardi

Top GitHub Best Practices for Developers - Expanded Guide— Implementing these best practices could save you time, improve code maintainability, and prevent security risks.

Datree.io sponsor

Adding a F#-Style Pipeline Operator to Your JavaScript with Babel— Using Babel’s custom transpilation powers to try out an alternative to the proposed pipeline operator.

George Dyrrachitis

Building an Accessible Autocomplete Control— Learn how to design and build an accessible autocomplete control from scratch.

Adam Silver

You (Possibly) Don't Need Moment.js— Moment.js is a popular date and time manipulation library but this repo shows off alternative approaches, including many native functions that do similar things. At the very least, this is a neat ‘cheat sheet’ for date and time manipulation :-)

Various Contributors

Implementing Basic 2D Physics in JavaScript— If you’ve ever seen a physics simulation on the Web and wondered about the basic math to pull it off, this will get you started.

Martin Heinz

▶  Building a Vue 3 Testing Framework from Scratch— This is not a guide to Vue testing but a look behind what’s necessary to implement your own testing framework for a framework like Vue.

Lachlan

How to Use Cloudflare JavaScript Workers to Deploy a Statically Generated Site

Ernesto Freyre

Debug JS Errors in Real-Time and Optimize Your Front-End Performance

Site24x7 sponsor

How To Create A Headless WordPress Site On The JAMstack

Sarah Drasner & Geoff Graham

3 Ways To Access Object Properties in JavaScript

Dmitri Pavlutin

10 Array Methods You Should Know— One for the beginners among you :-)

Rebecca Uranga

🔧 Code & Tools

CheerpJ 2.0 Released: A Java to WASM and JS Compiler— This is a commercial tool (though free for non-commercial purposes) but as someone who started on the Web in the 90s, the idea of Java being compiled to JavaScript continues to tickle me :-) Interesting tech.

Stefano De Rossi

vue-cli v4.2 Released— The latest release of the popular tools is fully baked with ESLint 6, optional chaining and nullish coalescing support, plus better Yarn 2 support if you’re using that.

Haoqun Jiang

Sharect: A Library to Let Users Share Text Selections to Social Networks— If you’ve seen how Medium lets readers select text and share it, it’s like that, but lighter.

Estevan Maito

New Time-Travel Debugger for JavaScript and TypeScript— Move forward and backwards through your code to understand the conditions that led to a specific bug, view runtime values, edit-and-continue, and more.

Wallaby.js sponsor

GLTFJSX 1.0: Turns GLTFs Into JSX Components— Turns GLTF (GL Transmission Format) files (as used for 3D models and scenes) into re-usable Three.js components.

Paul Henschel

Baretest: An 'Extremely Minimalistic' Alternative to Jest— A fast and simple JavaScript test runner that boasts a ‘brainless’ API. The motivation? Runniing tests as fast as possible.

volument

Vendure: A Headless GraphQL E-commerce Framework— Built on Node, Nest and TypeScript. The idea is you’d use this for the backend, then implement the front-end of your store however you prefer.

Vendure

defu: Recursively Assign Default Properties— In short, merge two objects together without the properties overwriting each other, as you might want to do when handling options and default settings on entry to a function.

JSLess

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

myliang

#475 — February 14, 2020

Unsubscribe  :  Read on the Web

An oddly quiet week in terms of big, timely news, but yet again there's so much generally going on that I think we've got a good issue here :-) Till next week!

JavaScript Weekly

FullCalendar: A Full Sized JavaScript Calendar Control— An interesting option if you want a Google Calendar style control for your own apps. Has connectors for React, Vue and Angular. The base version is MIT licensed, but there’s a ‘premium’ version too.

Adam Shaw

How to Make a WebGL-Powered US Counties Map with D3 and Three.js— Creating a simple SVG-based map is one thing, but if you want the best performance, leaning on WebGL and your GPU is a good option. This tutorial covers how to approach moving from SVG to WebGL by way of Three.js.

Mika Iriarte

New: Our 'Most Loved' JavaScript Course 🧡 Gets Updated— Take your JavaScript to the next level. Gain an understanding of callbacks, higher order functions, closure, asynchronous and object-oriented JavaScript.

Frontend Masters sponsor

On the Maintenance of Large Open-Source Projects— A written-up group chat with former Node core team member Bert Belder (of libuv fame) and Leaflet creator Vladimir Agafonkin about what it takes to maintain large open source projects.

Anne-Laure Civeyrac

Tiny Helpers: Single Purpose Online Tools for Web Developers— A growing collection of single-purpose online tools aimed at developers of all types. Covers things like base64 conversion, color management, favicon generators, exploring JavaScript ASTs, key codes..

Stefan Judis

7 (Possibly) Good Reasons Not to Use TypeScript— Hang on.. did you read that headline right? Why not to use TypeScript? Yes, despite all the buzz around TypeScript, you don’t have to use it and there might be good reasons not to (although the reasons presented are highly opinionated and you’re free to disagree too).

Michael Krasnov

💻 Jobs

Find a Dev Job Through Vettery— Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.

Vettery

Announcing a 100% Remote Opportunity as a Sr. Fullstack Dev (Node/React)— We’re passionate about giving developers the chance to do meaningful work by building transformational technology solutions.

Clevertech

📘 Articles & Tutorials

Why JavaScript is Eating HTML— The idea of JavaScript and HTML remaining separate and never the twain shall meet is now decidedly old-school and HTML-in-JS (a la JSX) is definitely A Thing™. Here’s a tour of all the parts involved.

Mike Turley

Building a Continuous Integration and Deployment Pipeline Using Docker— A really sweet, well paced tutorial that almost anyone would be able to follow to set up a basic CI/CD process for a Node app.

Tania Rascia

A Pool Table-Style 'Bouncing Balls' Simulation in Plain JS— It’s mostly code but included in tutorials as it’s designed to be a learning experience. Here’s a demo of the end result.

Meto Trajkovski

Optimize the Performance of Single Page Applications Using RUM

Site24x7 sponsor

How to Publish an Updated Version of an npm Package— If you release your own npm packages, or if you’ve inherited packages from your team, this is a nice guide that covers many of the challenges with getting a new version out.

Scott Vandehey

70 JavaScript Interview Questions— You’re never going to get a list like this that’s perfect but it’s a pretty solid list of the sorts of questions (and answers) you could get thrown at an interview, so if you’re in that position..

Mark Abeto

4 Methods to Search Through Arrays— includes, find, indexOf, and filter.

Stephen Hartfield

▶  Fast by Default: Algorithmic Performance Optimization in Practice— A talk from dotJS 2019.

Vladimir Agafonkin

ForwardJS Ottawa (May 26-29) Speakers Announced— Topics include React/Redux, TypeScript, containers, design systems, static sites, scaling teams and monorepos. Join us.

ForwardJS sponsor

Building Bridges with Other Departments in Developer Relations— If you've been in the JavaScript world a while, you might be familiar with Estelle Weyl and her insights will interest you if a career in developer relations has ever intrigued you.

Dave Nugent and Estelle Weyl

How To Create Maps with React and Leaflet

Shajia Abidi

Building a 'Grouper' Component for Svelte— Mat Ryer shows how you can build a Grouper component in Svelte to neatly group up lists into meaningful sections.

Mat Ryer

🔧 Code & Tools

Debug Visualizer: Visualize Data While Debugging in VS Code— An interesting looking VS Code extension that lets you visualize the result of an repeatedly evaluated expression. An intriguing idea, though I think you’d need to fiddle a bit to get the results you want.

Henning Dieterichs

plink-plonk.js: Listen to Web Pages As Their DOM Changes— This is really cool. Run this code at a console on a ‘busy’ Web page with lots of DOM changes and updates and you’ll be able to ‘hear’ them taking place.

Tom Hicks

Stream Chat API & JavaScript SDK for Custom Chat Apps— Build real-time chat in less time. Rapidly ship in-app messaging with our highly reliable chat infrastructure.

Stream sponsor

Type Route: A Flexible, Type-Safe Routing Library— A flexible routing library with TypeScript support, designed with React integration in mind (indeed, it’s used in React Router), but can be used with any framework (Vue, Angular, etc).

type-route

Ionic 5 Released: A Popular Webapp + Native Framework— Ionic’s goal is to get you an app you can put on an app store and the Web with a single shared code base, yet with adaptive styling to look native in each case. It was originally focused on Angular but now has an official React integration.

Brandy Carney

esbuild: An Extremely Fast JavaScript Bundler and Minifier, But...— An experiment in proving that tools for bundling JavaScript can actually be very fast.. though in this case by implementing one in Go ;-)

Evan Wallace

LegraJS: Render Lego Brick Graphics to a Canvas— A small library for drawing LEGO style brick shapes on to a canvas.

Preet Shihn

#476 — February 21, 2020

Unsubscribe  :  Read on the Web

JavaScript Weekly

Fixing Memory Leaks in Web Applications— When the front-end became more dynamic, part of the bargain was that front-end developers would have to deal with “a new class of problems that don’t really exist in the server-rendered world”.. including avoiding memory leaks on 101 different types of client device. Here’s an introduction to client-side memory leaks and how to begin investigating them.

Nolan Lawson

TypeScript 3.8 Released— The latest version of TypeScript (the JS ‘superset’ with static type support) is with us and introduces support for ES private fields, export * as .., top-level await, and more, all demonstrated in detail in this release post.

Daniel Rosenwasser (Microsoft)

Get Best in Class Error Reporting for Your JavaScript Apps— Time is money. Software bugs waste both. Save time with Bugsnag. Automatically detect and diagnose errors impacting your users. Get comprehensive diagnostic reports, know immediately which errors are worth fixing, and debug in minutes. Try it free.

Bugsnag sponsor

A Guide to console Commands— Yes, this topic has been done before, but this is truly the most thorough article I’ve seen on the topic. If console.log is as far as you’ve gone before, this is quite the journey.

Travis Almand

▶  9 Talks from the WebAssembly Summit 2020— WebAssembly is undoubtedly going to become a more significant technology this decade and these talks provide a glimpse at the cutting edge of WASM with Lin Clark’s talk providing perhaps the best overview of the space.

YouTube

▶  Wes Bos Demonstrates Cloudflare Workers— Workers is Cloudflare’s ‘run JavaScript code at the edge’ service (though it also supports Rust, C and C++ now). This is a good, practical introduction to a common use case and worth watching if you want to use JavaScript to process in-flight HTTP requests.

Wes Bos

💻 Jobs

Lead Server-Side Developer (Sydney or Remote across AUS/NZ)— Build back-end frameworks server side software (Express.js + MongoDB + GraphQL) and write server-side code (JavaScript, Node.js).

Compono

Find a Dev Job Through Vettery— Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.

Vettery

📘 Articles & Tutorials

What’s Actually New in Angular 9?— We featured the release of Angular 9 a couple of weeks ago – this post digests the release.

John Papa and Kapehe Jorgenson

Aborting a Fetch API Request— The Fetch API didn’t have the ability to abort a request in its early days (unlike XMLHttpRequest) but AbortController and AbortSignal can help you get the job done on all modern browsers.

Ganapati V S

How To Use The HTML Drag-And-Drop API in React— How to use the useReducer hook for managing state in a React functional component.

Chidi Orji

The Ultimate Guide to Container Formats: Decrypting Video Technologies— This is a comprehensive guide of the definitions & processes that you must know when working with back-end video stacks.

Bitmovin Inc. sponsor

An Introduction to Set Objects— A brief introduction to a handy type that was introduced with ES6/ES2015.

Nick Scialli

Make Your Own DevTools?— How creating DevTools specific for your own app can be a way to improve your productivity. I could see this catching on!

Kent C Dodds

Introducing the Page Visibility API— Modern browers generally handle page visibility stuff on their own nowadays, but you can do a little more with the API, which has excellent browser support.

John Au-Yeung

Building an Image Gallery using PixiJS and WebGL— This goes beyond your typical image gallery with an interesting 3D effect. Lots of bits and pieces here to learn.

Luis Torres

Reactivity in Vue 2 vs Vue 3— This goes into quite some depth though it’s only for Vue developers or anyone generally curious about how to implement reactivity in JavaScript.

Marina Mosti

How to Make a Simple JavaScript Quiz— Although there are tools available to do this sort of thing, this raw step-by-step process might be a way to learn a variety of coding techniques.

Yaphi Berhanu & James Hibbard

Build a Game of Battleship with TypeScript & Spring Cloud. Free Course

Solace sponsor

Moving from React to Ember in 2020— There’s not a lot of detail here but it’s interesting to see someone make this choice and the reasons for it. Despite a lack of React-level buzz, Ember remains a solid choice for building apps if you lean into its advantages.

John Rodkey

Thoughts and Best Practices on Building Apps with Vue and TypeScript

Stefan Bauer

Lazy Loading Components in Angular 9— Have you ever wanted to lazy load an Angular component? Here is a technique you can use with Angular 9.

John Papa

What is Type Coercion in Vanilla JavaScript?— Not particularly for those already advanced with JavaScript, but this is a pretty detailed look at type coercion and includes lots of demos.

Chris Ferdinandi

How to Build a Tinder-esque Carousel with Vanilla JS

Simone Manzi

🔧 Code & Tools

Paged.js: Formats HTML Content Suitably for Creating PDF Output— I think this project’s site could win an award for sheer elegance, but it’s not just elegant, there’s tons of well formatted documentation too. Or.. if you prefer, the GitHub repo.

Cabbage Tree Labs

Hex Engine: A Modern 2D Game Engine for the Browser— Still in early development. A TypeScipt- and Canvas-based game engine designed to feel similar to React.

Lily Scott

A Much Faster Way to Debug Code Than with Breakpoints or console.log— Wallaby catches errors in your tests and code and displays them right in your editor as you type, making your development feedback loop more productive.

Wallaby.js sponsor

Serialize JavaScript 3.0: Serialize Objects to a Superset of JSON— Why? So you can serialize regular expressions, dates, functions, and (as of this week) Infinity, as well as the usual things JSON can handle.

Yahoo

Destiny: A 'Prettier' for File Structures— Scans a folder’s contents, creating a graph based on how the JS/TS files import each other, moving files as needed, then builds a “prettified” file structure. Not sure I’m a fan but it’s an interesting idea.

Ben Awad

Chardin.js: Simple Overlay Instructions for Your Pages/Apps— It’s not every week we get to announce a library’s new release after six years, but Pablo has taken over this classic library. Demo.

Pablo Fernandez

The Official Redux Template for Create React App v1.0— There’s now an official Redux template for Create React App to quickly set up a React app with Redux Toolkit and a Redux store ready to go.

Mark Erikson

Micromodal: A Tiny JavaScript Library for Creating Accessible Modal Dialogs

Indrashish Ghosh

Panolens.js: A Panorama Viewer Control— A striking full-page demo is on display here, or you can jump straight to GitHub.

Ray Chen

Nano Events: A Tiny (78 Bytes) Event Emitter Library

Andrey Sitnik

#477 — February 28, 2020

Unsubscribe  :  Read on the Web

JavaScript Weekly

▶  Vue.js: The Documentary— A well produced 30 minute documentary (from the creators of the previously popular Ember.js documentary) focused on Evan You, the development of Vue.js, its position in our ecosystem, and the userbase.

Honeypot

Rome: A New Experimental JavaScript Toolchain from Facebook— Includes a compiler, linter, formatter, bundler, and testing framework (these are all new and not existing tools) and aims to be a comprehensive tool for anything related to the processing of JavaScript code. It comes from Sebastian McKenzie, one of the creators of both Babel and Yarn.

Facebook Experimental

Master State Management with Redux & Typescript at ForwardJS— Join us for a full day in-depth React workshop at ForwardJS Ottawa. Further talks touch on TypeScript, containers, design systems, static sites, scaling teams and monorepos.

ForwardJS sponsor

How Autotracking Works— This is really interesting! It’s a truly deep dive into Ember’s new reactivity system but is applicable to your thinking as a JavaScript developer generally. Autotracking, at its core, is about tracking the values that are used during a computation so that computation can be memoized. Lots to learn here.

Chris Garrett

V8 v8.1's Intl.DisplayNames— Another six weeks have passed so there’s another version of the V8 JavaScript engine that underpins Chrome and Node. In 8.1 we gain a Intl.DisplayNames method for displaying translated names of languages, regions, written scripts and currencies. More detail here.

Dominik Inführ

React v16.13.0 Released— Mostly a release for bugfixes and new deprecation warnings to help prepare for a future major release.

💻 Jobs

Find a Dev Job Through Vettery— Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.

Vettery

Lead Server-Side Developer (Sydney or Remote across AUS/NZ)— Build back-end frameworks server side software (Express.js + MongoDB + GraphQL) and write server-side code (JavaScript, Node.js).

Compono

📘 Articles & Tutorials

Metrics, Logs, and Traces in JavaScript Tools— A look at the different types of useful metrics available to JavaScript developers.

Shawn Wang

You've Got to Make Your Test Fail— Tests are great, but they need to (initially) fail! “If you’re not careful you can write a test that’s worse than having not tests at all.”

Kent C Dodds

Interactive Lab: Build a JS+Python Serverless Application— Join IBM's Upkar Lidder and learn how to build a cloud-native Visual Recognition service.

IBM Developer sponsor

How to Use requestAnimationFrame() with Vanilla JS— If you’ve never really had a use for this feature, but want to know how it works, this is easy to follow with some simple demos.

Chris Ferdinandi

Getting Started with Ember Octane: Building a Blog— We haven’t linked an Ember framework tutorial for a while and this is a neat one.

Frank Treacy

Automated Headless Browser Scripts in Node with Puppeteer— A walk-through on how to use Puppeteer to write scripts to interact with web pages programmatically. The example project is based on a native lands location API.

Sam Agnew

The Mindset of Component Composition in Vue— A step-by-step tutorial building a search bar component. Good for those already familiar with Vue but maybe want to see another developer’s perspective on component composition.

Marina Mosti

Getting Started with Vuex: A Beginners Guide— This claims to be a “brief” tutorial, but there’s lots of meat here for those looking to understand Vuex, the state management solution for Vue.js apps.

codesource.io

Web Rebels Conference - CFP Ends 1st of March— Web Rebels is back on the 14-15th of May 2020 in Oslo, Norway. Submit to our CFP or get a ticket and join us for two days of JS.

Web Rebels Conference sponsor

What is a Type in TypeScript? Two Perspectives— Describes two perspectives (types as sets of values and type compatibility relationships) to help understand types in TypeScript.

Axel Rauschmayer

▶  Building a Reusable Pagination Component in Vue.js

Jeffrey Biles

How to Quickly Scaffold and Architect A New Angular App

Tomas Trajan

🔧 Code & Tools

Scala.js 1.0: A Scala to JavaScript Transpiler— An alternative way to build robust front-end web applications in Scala.

Scala.js

exifr: A Fast, Versatile JS EXIF Reading Library— Exif (EXchangeable Image File Format) is a common metadata format embedded into image and other media files. More here, including examples.

Mike Kovařík

React Query 1.0: Hooks for Fetching, Caching and Updating Data— Hooks that help you keep your server cache state separate from your global state and let you read and update everything asynchronously. There’s a lot to enjoy here.

Tanner Linsley

Electron React Boilerplate 1.0: A Foundation for Scalable Cross-Platform Apps— Brings together Electron (the popular cross-platform desktop app development toolkit) with React, Redux, React Router, webpack and React Hot Loader. v1.0 completes its migration to TypeScript.

Electron React Boilerplate

Optimize End User Experience in Real Time with Real User Monitoring

Site24x7 sponsor

date-fns 2.10: It's Like lodash But For Dates— A popular date utility library that provides an extensive and consistent API for manipulating dates. v2.10.0 has just dropped.

date-fns

Panolens.js: A JavaScript Panorama Viewer Based on Three.js— View examples here. This is a lightweight, flexible, WebGL-based panorama viewer built on top of Three.js.

Ray Chen

Git for Node and the Browser using libgit Compiled to WASM— Naturally, this is a rather experimental idea(!) There is a browser based demo if you’re interested though.

Peter Salomonsen

#478 — March 6, 2020

Unsubscribe  :  Read on the Web

JavaScript Weekly

An Interactive Introduction to D3— D3, the JavaScript library for producing interactive data visualizations, has just turned 9 years old so you’re probably familiar with it by now.. but this introduction is particularly neat as it’s an example of a live, interactive ‘notebook’ style tutorial.

MIT Visualization Group

Understanding the ECMAScript Spec, Part 2— Part 1 looked at how to understand a single (and simple) method by reading the official ECMAScript specs. Part 2 goes into a trickier domain, understanding how ES interpreters do prototype lookups.

Marja Hölttä

🐋 Learn Docker in the New, 'Complete Intro to Containers'— Learn to create containers from scratch and with Dockerfiles, run containers from Docker Hub, and learn best practices are for front-end and Node.js code in containers.

Frontend Masters sponsor

p5.js 1.0: The 'Creative Coding' Libary— A major milestone for a long-standing JavaScript library that builds upon Processing, a popular creative coding environment (which also inspired the Arduino IDE). p5 is a bit hard to explain succinctly, so definitely check it out.

lauren mccarthy

Rollup 2.0 Released: The ES Module Bundler— Write your code using ES modules and get tree-shaking/dead code elimination and bundling to the format you require. v2 gets rid of lots of deprecated stuff, goes zero-dependency, and includes chokidar to improve its ‘watch’ mode’.

Lukas Taegert-Atkinson

A Growing Collection of 86 Node.js Best Practices— An in-depth guide for Node devs, available in multiple languages. Divided into 7 sections and updated regularly.

Yoni Goldberg

💻 Jobs

Senior JavaScript Developer (Warsaw, Relocation Package)— Open source project used by millions of users around the world. Strong focus on code quality. Join us.

CKEditor

JavaScript Developer at X-Team (Remote)— Work with the world's leading brands, from anywhere. Travel the world while being part of the most energizing community of developers.

X-Team

Find a Dev Job Through Vettery— Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.

Vettery

📘 Articles & Tutorials

4 Best Practices To Writing Quality ES Modules— Principally these ideas are around organizing modules you create: prefer named exports, do no work during import, favor high cohesion and avoid long relative paths.

Dmitri Pavlutin

The Perils of Rehydration: An Eye-Opening Realization about Gatsby and React— We love how the author explains this piece himself: “Last week, I learned a whole lot about how React’s rehydration works. Wrote up those findings in a blog post!”

Josh W Comeau

Top GitHub Best Practices for Developers — Expanded Guide— Implementing these best practices could save you time, improve code maintainability, and prevent security risks.

Datree sponsor

7 Types of Native Errors in JavaScript You Should Know— A beginner’s level introduction to understanding the meaning behind errors like RangeError, ReferenceError and URIError.

Chidume Nnamdi

▶  Discussing JavaScript Deployments with Brian LeRoux— Brian is well known as an expert in the JavaScript space and is working on a serverless based platform for deploying JavaScript-powered APIs so it’s neat to hear what he thinks.

Software Engineering Daily podcast

▶  Building an Animated Counter with JavaScript— JavaScript has just gotten so serious nowadays, so I like to frequently link to tutorials like this that cover building neat Web page effects.. like we used JavaScript for back in the 90s 😄 18 minutes.

Traversy Media

3 Ways to Render Large Lists in Angular— An overview of the available techniques to render large lists of items with Angular.

Giancarlo Buomprisco

CES, Viacom & Intel Use .Tech Domains. What About You? Search Now

.TECH domains sponsor

In Favor of Small Modules and Plumbing— “This post examines how I used to be of the mindset that publishing a plethora of “focused” modules is a waste of time but now think is a fantastic idea.”

Paul Anthony Webb

An Introduction to Vue.js Computed Properties and Watchers

John Au-Yeung

🔧 Code & Tools

Stryker: Test Your Tests with Mutation Testing— Stryker fiddles with your tests (in a large and complicated number of ways) and expects this to break them. If it doesn’t, your tests are too brittle and therefore failed the test. This is not something to run frequently (as it can be very slow) but is an interesting way to stress test your tests, if you will.

Jansen, de Lang, et al.

Immer 6.0: The Popular Immutable State Library— Immer only continues to get better over time but take note of the breaking changes.

immer

A Much Faster Way to Debug Code Than with Breakpoints or console.log— Move forward and backwards through your code to understand the conditions that led to a specific bug, view runtime values, edit-and-continue, and more.

Wallaby.JS sponsor

Vue Formulate: The Easy Way to Build Forms with Vue.js— A well presented library that brings a lot of simple form-building power to Vue apps.

Braid LLC

Goxygen: Quickly Generate a Go and MongoDB-Backend for a JS Project— We first linked this opinionated full stack app generator only a few weeks ago, but since then it’s had a 0.2 version that extends its support from React to Angular and Vue.js too.

Sasha Shpota

ls-lint: A Fast File and Directory Name Linter— Written in Go but clearly aimed at JS/front-end dev use cases. ls-lint provides a way to enforce rules for file naming and directory structures.

Lucas Löffel

isomorphic-git 1.0: It's git but in Pure JavaScript— A pure JavaScript implementation of git for both Node and the browser.

isomorphic git team

Bootstrap Treeview: A Simple Plugin to Build A Treeview with Bootstrap 4— Here’s a live demo.

Sami Chniter

🎧 Something for the weekend..

▶  'Somebody Somewhere Is Generating JS From Fortran..'— This is more a fun podcast listen for the weekend if you have the time. Brian Leroux (yes, again!) and Kevin Ball tackle all sorts of JavaScript topics from modules and progressive bundling to building infrastructure as code and the future of ‘JAMstack’.

JS Party Podcast podcast

#479 — March 13, 2020

Unsubscribe  :  Read on the Web

JavaScript Weekly

JavaScript: The First 20 Years— Allen Wirfs-Brock and Brendan Eich (the creator of JavaScript) have written a paper for the forthcoming History of Programming Languages Conference about how our favorite ‘sidekick scripting language for Java’ was built and has grown. It’s long, goes deep into the tech and syntax development side of things, and is sure to be my main weekend reading.

Allen Wirfs-Brock

How I Made a '3D' Game in Only 2KB of JavaScript— This is one of those detailed, fun, ‘learn a few tricks’ type walkthroughs. I’ve always been fascinated how people pull off various effects in games and how they get their code down to such small sizes. A fun read.

Frank Force

Faster CI/CD for All Your Software Projects Using Buildkite— See how Shopify scaled from 300 to 1500 engineers while keeping their build times under 5 minutes.

Buildkite sponsor

RedwoodJS: Bringing Full-Stack to the JAMstack— A new, opinionated framework that combines React, GraphQL, Prisma2, and lots more out of the box. Notably it comes from Tom Preston-Werner, one of the original founders of GitHub and the creator of Gravatar.

RedwoodJS

Why Svelte Is Our Choice for a Large Web Project in 2020— A thorough analysis of the pros and cons of picking Svelte over, say, React or Vue.js right now.

Ryan Atkinson

Next.js 9.3 Released: The React Powered Site Building Framework— A minor point release of the popular Next framework can’t be a big deal, right? Wrong – the all new ‘Preview Mode’ (which is a game changer), smaller runtime, and new static site generation options really take things up a notch while still not introducing any breaking changes.

Next Team

💻 Jobs

UX/Frontend Engineer @ Siteline— Join the founding engineering team at Siteline and help us revolutionize the payments process for construction.

Siteline

React + Rails Experts — Join Our Bootsrapped Remote Team— Aha! is primarily a Rails application, but we are using React to make excellent interactive experiences on top of Rails.

Aha!

Find a Dev Job Through Vettery— Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.

Vettery

📘 Articles & Tutorials

Aborting a Signal: How to Cancel an Asynchronous Task— Cancelling asynchronous tasks has always been tricky and while there’s now an official way to do so, it’s still not entirely straightforward. You might like Kyle Simpson’s CAF (Cancellable Async Flows) library to make the process easier.

Tomasz Jakut

Demystifying Async Programming in JavaScript— A lot to learn from this exploration for beginner and intermediate developers.

Yunchi Luo

Building with Web Components— The history and current state of Web Components in 2020.

Heroku sponsor

Designing the Perfect Typescript Schema Validation Library— Which, spoiler alert, has resulted in the creation of Zod, a schema validation library with static type inference.

Colin McDonnell

What is a Higher-Order Function?— You might have heard the term “higher-order function” thrown around in JS circles. This post uses some examples to attempt to define this concept.

Nick Scialli

Angular 9's Best Hidden Feature: Strict Template Checking— A lesser-known feature of Angular 9’s Ivy compiler: Find and report more errors than ever using something called ‘strict template checking.’

John Papa

How to Build a Native Desktop GIF Search App with NodeGui— Atul Ramachandran demonstrates how to install NodeGui (a Qt-driven desktop app library) and use it to build a “meme searcher.”

Atul Ramachandran

Don’t Build Your Own Analytics: Try Logi, The Only Developer-Grade Embedded Analytics Platform

Logi Analytics sponsor

Slow Code 'Hates Him'.. Optimizing a Web App from 1 to 60 FPS

Steven Waterman

Why I Don't Use Classes— “Instead of classes, I prefer modules that expose groups of functions that accept state and other dependencies.” This is a popular attitude in the JS space, to be fair.

Andy Peterson

Understanding Vue's Deep CSS Selector— Demonstrates how to use the ‘deep’ selector in Vue, a powerful tool for resolving certain CSS issues.

Marina Mosti

🔧 Code & Tools

Future-Proofing Firefox’s JavaScript Debugger Implementation— A run through some of the major improvements made to JavaScript debugging in the Firefox DevTools, including garbage collection, compartments, forced returns and exceptions.

Jim Blandy and Harald Kirschner (Mozilla)

Turndown 6.0: An HTML to Markdown Conversion Library— Used to be called to-markdown. Available in both Node and browser packageable forms.

Dom Christie

Gain Real-Time Insights in Your Front-End Performance with Site24x7

Site24x7 sponsor

Code Tour: VS Code Extension to Record and Playback Guided Code Walkthroughs— This looks really promising for teams that want to help new hires get familiar with certain features of a codebase, essentially replacing actual training sessions.

VS Live Share Contrib

sort-isostring: A Tiny Utility to Sort ISO 8601 Date Strings

Luke Edwards

Uid: A Tiny Utility to Generate Random IDs of Fixed Length— Generate randomized output strings of fixed length using lowercase alphanumeric characters, for Node and the browser.

Luke Edwards

on-change: Watch an Object or Array for Changes

Sindre Sorhus

#480 — March 20, 2020

Unsubscribe  :  Read on the Web

✍️ We hope you're doing okay in these unusual times. We'll be publishing JavaScript Weekly as usual, but you may notice some changes as we adapt – please hang in there with us 🙂

If you have anything to share that would help the community, virtual events, etc. you can reply to any issue to let us know and we'll try to share what we can :-)
— Peter C, your humble editor.

JavaScript Weekly

μPlot 1.0: A Fast, Tiny Time Series Chart Library— A fast, memory efficient Canvas-based time series plotting library. How fast? Try 150,000 data points in 60ms fast. Lots of demos here.

Leon Sorokin

npm is Joining GitHub— This is perhaps the biggest Node news of the year! npm Inc. (including the public repository) is being acquired by GitHub (who you might recall launched their own package registry less than a year ago). Fingers crossed this only means good things for npm. If you want more background, Isaac Z. Schlueter tells his side of the story here.

GitHub

Optimize Your Front-End Performance in Real-Time— Identify JS errors, errors in AJAX calls, page load time with Site24x7 Real User Monitoring. You can also track your CDN performance, analyze user sessions, measure and reduce resource load time. Sign Up.

Site24x7 sponsor

Wikimedia (The Folks Behind Wikipedia) Are Adopting Vue.js— Wikimedia will be using Vue for their future front-end development, but no, Wikipedia is not becoming an SPA! This post digs into the how and why of the decision, while on Twitter, Vue.js creator Evan You explains more from his side. Hacker News had a very busy thread on the topic too.

Wikimedia Foundation

▶  16 Hand-Picked JavaScript Podcasts Still Running in 2020— This is an update of a list originally made in 2018. If you do, somehow, have spare time to listen to podcasts now, this up to date list may be useful.

Mathieu Dionne podcast

Babel 7.9.0 Released— A new minor release for the popular JavaScript compiler which includes updates related to @babel/preset-env, TypeScript 3.8, Flow, and JSX.

Nicolò Ribaudo

💻 Jobs

UX/Frontend Engineer @ Siteline— Join the founding engineering team at Siteline and help us revolutionize the payments process for construction.

Siteline

Find a Dev Job Through Vettery— Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.

Vettery

📘 Articles & Tutorials

An Interactive Introduction to AntV— We recently linked to a neat interactive introduction to D3, here’s something similar for AntV, a data visualization toolset originally built for financial data. Worth a play.

Jiazhe Wang

Implementing Infinite Scroll And Image Lazy Loading— A tutorial on using the Intersection Observer API to implement infinite scrolling and image lazy loading in a functional React component.

Chidi Orji

A Much Faster Way to Debug Code Than with Breakpoints or console.log— Move forward and backwards through your code to understand the conditions that led to a specific bug, view runtime values, edit-and-continue, and more.

Wallaby.js sponsor

Some Real World Use Cases for JS Proxies— Proxies are far from a universally understood concept in the JavaScript world, so it might help to think about them in a context where you might use them.

Arbaz Siddiqui

How to Cancel a Fetch Request— This looks at the new AbortController API which can help with one of the shortcomings of promises: That you can’t cancel a fetch request.

David Walsh

Five Practical Tips When Using React Hooks in Production

Tobias Deekens

Faster CI/CD for All Your Software Projects Using Buildkite

Buildkite sponsor

Using Watchers for Form Input Validation in Vue.js— The watch option in Vue.js offers a way to respond to data changes in a given element and perform form input validation.

Nwose Lotanna

🔧 Code & Tools

Uppload: A 'Better' JavaScript Image Uploader— Open source, highly customizable with 30+ plugins and can be used with any file uploading backend.

El Niño

Heapify: The 'Fastest JavaScript Priority Queue Out There'— It’s a bold claim, but there are some benchmarks, plus no dependencies and it’s well explained and documented too.

Lucio Paiva

Introducing Gretchen: Making fetch Happen in TypeScript— An introduction to Gretchen, a modern, TypeScript-focused Fetch API abstraction.

Eric Bailey

Stream Chat API & JavaScript SDK for Custom Chat Apps— Build real-time chat in less time. Rapidly ship in-app messaging with our highly reliable chat infrastructure.

Stream sponsor

Tippy.js 6.1: Highly Customizable Tooltip and Popover Library— Accessible, easy to theme, fast on low-end devices, and TypeScript ready. Also a great example of a good project site/homepage. GitHub repo.

atomiks

Seafox: A Fast Spec-Compliant JavaScript Parser Written in Typescript— Generates AST according to the ESTree AST format, and can be used to perform syntactic analysis of JavaScript code.

Kenny Flash

#481 — March 27, 2020

Unsubscribe  :  Read on the Web

JavaScript Weekly

Prettier 2.0 “2020” Released— The popular code formatter now adds better defaults, a better CLI, TypeScript 3.8 feature support (e.g. export * as ns), and lots more. Project homepage.

prettier

What Happens When the Maintainer of a Major JS Library Goes to Jail?— The maintainer of the popular core-js library (very commonly used alongside Babel) lost an appeal to overturn an 18-month prison sentence.

Thomas Claburn (The Register)

Online Lab: Build a Blockchain App with JavaScript— Learn how to build a distributed ledger into your JavaScript application using open source tools and best practices in this interactive lab from IBMers Lennart Frantzell and Dave Nugent.

IBM Developer sponsor

HTML DOM: A Resource for Solving DOM Problems with Native APIs— A guide with a list of different things we might normally do with a JavaScript library, but can now be done using native APIs.

Nguyen Huu Phuoc

Angular 9.1 Released: TypeScript 3.8 and Faster Builds— A minor Angular release that acts as a ‘drop-in replacement’ for 9.0 and brings concurrent package compilation for faster build times. A few other niceties too, all covered here.

Stephen Fluin

💻 Jobs

React JS Developer (Remote)— 9+ million people plan outdoor adventures with our apps every day. If you are smart and ambitious, join us to inspire people to explore more of the great outdoors.

Komoot

Principal UI Engineer— Join a tech team based in the heart of NYC and work on a data-driven, cloud solution for the world's leading entertainment brands.

Whip Media Group

Find a Dev Job Through Vettery— Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.

Vettery

📘 Articles & Tutorials

Measuring the Performance of JavaScript Functions— “In this article I will explain how you can measure the performance of your functions and what to do with the results you get from them.”

Felix Gerschau

Building a Code Editor with CodeMirror— CodeMirror is an open source project that makes it easy to build advanced text editors into your frontend apps. Here’s how to build a code editor with it and how to connect together all the pieces.

Valeri Karpov

Top GitHub Best Practices for Developers - Expanded Guide— Implementing these best practices could save you time, improve code maintainability, and prevent security risks.

Datree.io sponsor

Deleting Scrobbles on last.fm En Masse with a JS One Liner— A reminder, if you needed one, that running quick, scrappy JavaScript one liners in the devtools can help you gain some serious power over the pages you’re navigating.

Charlie Ritter

How to Use the Web Storage API— An introductory guide to localStorage and sessionStorage.

Chidume Nnamdi

Optimizing JS for Native-Like Webviews— Serving web pages fast enough to feel native.

Leo Jiang

Register for the Free ForwardJS May 2020 Livestream

ForwardJS sponsor

How To Make Life Easier When Using Git— Lots of useful bits and pieces in here.

Shane Hudson

How to Use the URL API with Vanilla JavaScript— A simple look at a lesser-known Web API, which lets you grab various bits including the hash, hostname, pathname, protocol, etc.

Chris Ferdinandi

🔧 Code & Tools

TOAST UI Editor 2.0: A Powerful WYSIWYG Markdown Editor— Two years in comes version 2.0, along with 10K GitHub stars to boot. v2.0 has a new Markdown parser, better syntax highlighting, improved scroll syncing and live previews, and more. GitHub repo.

NHN

match-sorter: Deterministic Best-Match Array Sorting— If you have an array full of items that you want to filter and sort ‘intelligently’ and deterministically, check this out.

Kent C. Dodds

Nano ID 3.0: A Unique String ID Generator— Tiny (108 bytes), secure, and URL-friendly. 3.0 requires changes to your code if you’re already using it.

Andrey Sitnik

jsSHA: Pure JS Implementations of SHA-1, SHA-256, SHA3-512, Etc.— If there’s a SHA hash, this library probably covers it.

Brian Turek

Analyze Page Load Time and Optimize Your Front-End Performance

Site24x7 sponsor

Rsup Progress: A Simple Progress Bar with Promises Support

skt-t1-byungi

ElectronCGI 1.0: Build Cross-Platform GUIs for .NET Core— Lets you invoke .NET Core code from Node and vice versa so you can use Electron to build a UI for an app otherwise based on a .NET Core language.

Rui Figueiredo

Dinero.js: A Library for Working with Monetary Values— GitHub repo.

Sarah Dayan

jest-dom: Custom Jest Matchers to Test the State of the DOM— So you want to use Jest to write tests that assert various things about the state of a DOM..

Testing Library