#482 — April 3, 2020

Unsubscribe  :  Read on the Web

JavaScript Weekly

ECMAScript 2020: The Final Feature Set— TC39 has just approved the ECMAScript 2020 spec(a full weekend's bedtime reading right there!) with Ecma GA approval due in a few months, but what’s new? Dr. Axel rounds it up with links to the included stage 4 proposals. If you prefer something more code-driven, Pawel Grzybek has a similar roundup.

Dr. Axel Rauschmayer

TypeScript 3.9 Beta Released— 3.9’s focus is on “performance, polish, and stability” with the most significant change you’re likely to notice being faster compile times.

Daniel Rosenwasser (Microsoft)

Building with Web Components— Web components seek to tilt the balance of web development back towards a standard that has been agreed upon by browser vendors and developers. Explore the history and current state of web components in front-end development.

Heroku sponsor

Perflink: Low Friction JS Benchmarks You Can Share via URL— Version 2 just launched, details here. Tests now run isolated in web workers, ability to save and fork to/from local storage, works cross-browser, and more.

luke jackson

Rendering Charts with OffscreenCanvas— Rendering charts can be an intensive operation for browsers, but what if you could delegate such work to a Web Worker? This post looks at what performance improvements you can realistically expect.

Chris Price

💻 Jobs

JavaScript Developer at X-Team (Remote)— Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

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

CKEditor

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

A Deep Dive into Pointer Compression in V8— A very technical post that, gladly, you don’t need to understand in order to enjoy that pointer compression lets the latest version of the V8 JavaScript engine use as much memory as if it were 32 bit while having 64 bit performance.

Igor Sheludko and Santiago Aboy Solanes

Digging Into How An Anti Ad-Blocker Script Works— A developer reverse engineered an ‘ad-blocker blocker’ and picked up some history about ad-blocking on the way.

Hugo Elhaj-Lahsen

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

Getting JavaScript to Talk to CSS and Sass— Despite being bedfellows for years, sharing data between JavaScript and CSS has not always been the simplest task.

Marko Ilic

▶  An Interview with Kyle Simpson— If you’re a fan of Kyle (long time JavaScript luminary and author of You Don’t Know JS (Yet)) you might enjoy this extensive podcast interview with him.

Leanpub Frontmatter podcast

An Introduction to Lambda Calculus, Explained Through JavaScript

Will Taylor

AppSignal Now Supports Node.js: Roadmap for the Coming Weeks

AppSignal sponsor

▶  How to Sing a Song with the Speech Synthesis API and async/await— A fun little project if you want to play along.

Jad Joubran

JavaScript Logical Operators— Covers ||, &&, and !. Part of Preston’s series on JavaScript fundamentals, so probably not a lot here for advanced devs, but there might be a few tidbits in here for everyone.

Preston Lamb

🔧 Code & Tools

Notyf: A Simple Library for 'Toast' Notifications— ‘Toast’ notifications are those non-modal, unobtrusive notifications you often get in the corner of the screen. Notyf makes them easy to produce in JavaScript too. No dependencies, good accessibility, and responsive. GitHub repo.

Carlos Roso

Rickshaw 1.7: A Toolkit for Creating Interactive Time-Series Graphs— A nice demo page here, complete with code samples. Just been updated for the first time in 2 years. From the folks at Shutterstock, who we use for all of our stock art and graphics :-)

Shutterstock

Trianglify: Algorithmically Generated Triangle Art— At first this sounds a bit like a meaningless experiment but generating such backgrounds can be a great way to bring some flavor to pages and apps.

Quinn Rohlf

Retool: Build Internal Tools a Lot Faster, with Less Maintenance— UI building blocks connect to any DB and API. Hackable by design — use JavaScript anywhere and query JSON with SQL.

Retool sponsor

Plotly.js: A Charting Library Built on D3 and Stack.gl— Amazingly, we last featured Plotly.js 5 years ago when it first launched, and now it has 11K stars but continues to pop out frequent new releases, like this week’s 1.53.0.

Plotly

simdjson 0.3: The Fastest JSON Parser in The World— An open source C++ library (sorry, it’s not JavaScript!) with one goal: parse JSON documents very fast (like 3 gigabytes per second fast.)

Daniel Lemire

Clack: A Modern Keyboard Shortcut Library Written in TypeScript— Looks like a fairly intuitive and simple API and also has a React version.

ReasonInk

TypeScript2Cxx: A TypeScript to C++ Transpiler— ts2cpp was another project in this vein.

Alex D

A React-Powered HTML5 Raycasting Demo— Very simple visually but it’s interesting how React was used for this. Play with it here.

Andrew X

Bungholio: Get Alerts When Products Become Available on Amazon— Sorry, I just had to include something lighthearted this week, and as a prolific MTV watcher in the 90s, the name got me..

John Titus

#483 — April 10, 2020

Unsubscribe  :  Read on the Web

🥚 Hi folks! This is a shorter than usual issue as we're taking a half day due to it being Easter Friday here – back to full service next week. If you celebrate Easter, happy Easter. If not, happy Friday and we hope you have a great weekend 😄

JavaScript Weekly

Some GitHub Pro-Tips Direct from GitHub— Lee Reilly is a developer and marketer at GitHub and has a whole bunch of genuinely useful GitHub power user tips here. Or if you prefer something more JavaScript-flavored, GitHub also just wrote about how they restructured GitHub's JavaScript SDK.

Lee Reilly (GitHub)

Understanding JavaScript's Various Module Formats and Tools— Straightforward example-heavy coverage of things from the IIFE pattern to CommonJS modules, the now uncommon AMD modules, ES modules, Babel modules, and more.

Dixin

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

Some of What's Coming in Vue 3— A summary of features in the next major release of Vue, still upcoming. There’s also this video from Vue.js Amsterdam 2020 on the same topic.

Parthiv Mohan

Svelte: The Framework That 'Puts Web Pages on a Diet'— It’s worth noting this is a high-level WIRED article, but it’s always nice to see some JavaScript tech getting positive mainstream attention.

Klint Finley (WIRED)

Making a 33 Line React-a-Like— React does some useful things, but you can do the same things with very little code, so.. why not? A fun experiment. Also of interest is that Hacker News had its say and the author responded.

Oliver Russell

Porting to TypeScript Solved Our API Woes— From the guy behind the (in)famous Wat video comes a tale of porting a backend from Ruby to TypeScript.

Gary Bernhardt

🔧 Code & Tools

Chocolat: A Responsive Image Lightbox Control— Seems pretty slick overall, and definitely one of the more polished project homepages I’ve seen. Note: GPL v3 licensed.

Nicolas Turlais

Winddown: A VS Code Extension That Encourages You to Take a Break— After 25 minutes of use, this extension slowly fades out your syntax highlight colors, making things just annoying enough to encourage you to take a quick break.

schneefux

Preact 10.4.0: The Fast 3KB React Alternative (With The Same API)— “This release contains some very amazing improvements to hydration and to performance when memoized vnodes are used. We recommend everyone to upgrade.”

Preact

Track JavaScript Console Logs and Errors from All Your Users— Ensure frontend issues don’t impair user experience or revenue-generating initiatives by centralizing JavaScript console logs in Datadog.

Datadog sponsor

Franc: Natural Language Detection for Text— Given some text, Franc can detect what natural language it’s written in from a set of 82, 187, or 406 languages (depending on how heavy you want the build to be). Live browser-based demo here.

Titus

emoji-regex: A Regular Expression to Match All Emoji-Only Symbols

Mathias Bynens

markmap-lib: Convert Markdown into Mindmaps— Certainly an interesting use-case for Markdown but it makes sense.

gera2ld

prerender.js: Prerender Web Pages on Hover in Any Browser— This has echoes of other projects (e.g. instant.page) but this prerenders rather than prefetches by using a hidden IFRAME.

genderev

Valtan: A Common Lisp to JavaScript Compiler

cxxxr

👾 One for Fun

QuakeJS: A Port of ioquake3 to JavaScript (via Emscripten)— A particularly cool ‘you can run a full AAA title in a browser?’ demo that has resurfaced recently. OK, the AAA title in question is 21 years old, but still.. GitHub repo.

Anthony Pesch

#484 — April 17, 2020

Unsubscribe  :  Read on the Web

🕹 If you're bored this weekend at all, consider joining the latest Ludum Dare— it's an online game jam that's been taking place for 18 years and more JavaScript entries are appreciated against all the Unity crowd 😂

JavaScript Weekly

Writing an 'Emulator' in JavaScript (and Interfacing with Multiple UIs)— This is really neat. Tania built a Chip-8 interpreter in JavaScript and has gone into quite a bit of detail about what was involved here. Lots of neat bits and pieces to pick up from this.

Tania Rascia

jQuery 3.5.0 Released— I know many of you will groan, but I’m delighted when I see a new jQuery release. It’s still so heavily used. No headline features though, this is a security fix for a cross-site scripting vulnerability, plus some tweaks and fixes in preparation for jQuery 4.0 (yes!)

Timmy Willison (jQuery Foundation)

Build a Game of Battleship with TypeScript & Java. Free Course— Join over 2000 developers creating a game of Battleship with TypeScript, Spring Cloud Stream (Java), and PubSub+. This free 30-minute course is a great way to learn the basics of messaging and event-driven architecture with the Aurelia framework.

Solace sponsor

Profiling React.js Performance— Goes into detail on aspects of the React Profiler API, React’s new experimental Interaction Tracing API, and measuring custom metrics using the User Timing API.

Addy Osmani

Userscripts are Fun and Still Very Much Relevant— ‘Userscripts’ are basically JavaScript programs that run in the context of other Web pages so you can add your own features. They were really popular for a while but still exist and are still a neat use case for using JavaScript to improve your Web experience.

Eldad Bercovici

Another Look at What's New in ECMAScript 2020— We linked to Dr Axel’s roundup recently, but here’s another take, looking at dynamic imports, nullish coalescing, optional chaining, BigInt, and more.

Ianis T.

💻 Jobs

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

X-Team

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

CKEditor

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

Vettery

📚 Tutorials

How To Create a Particle Trail Animation in JavaScript— Particle animations are particularly (sorry) striking.. and in this article, Anna Prenzel shows how to easily create your own such effects with Anime.js.

Smashing Magazine

Strategies for Migrating to TypeScript— A quick overview of some strategies for migrating code bases from JavaScript over to TypeScript.

Dr. Axel Rauschmayer

Developing in a Monorepo While Still Using Webpack— Second part in a series discussing things the team at Etsy learned during the migration of a home-grown, Require.js-based build system to webpack, which took over a year.

Salem Hilal

A More Productive Way to Build Your JavaScript Apps— Write better code, debug it, and test it – all in one place. Try WebStorm. No configuration required.

WebStorm sponsor

▶  Let's Build a Digital Circuit Simulator in JavaScript— A special episode of the Low Level JavaScript series takes us on a brief journey into the world of digital logic.

Low Level JavaScript

How To Set Up an Express API Backend Project with PostgreSQL— A pretty extensive walkthrough of creating an HTTP API using Express with Node.js and Postgres on the backend, then deploying it all on Heroku.

Chidi Orji

Speed Up Your Angular App: 14 Optimization Tips— Tips on how to make your Angular app smaller, faster, and more responsive.

Marcelo Ricardo de Oliveira

Class-Related Types in TypeScript

Dr. Axel Rauschmayer

📅▶ A Fireside Chat on the State of Microservices on April 21— We recently helped The Software House with a developer survey (thanks to those who took it!) and now they’re doing a live chat on the state of microservices next Tuesday featuring Yan Cui, Alessando Vozza, and others.

The Software House

🔧 Code & Tools

Puppeteer 3.0: It Now Supports Firefox— Best known for as a way to headlessly control Chrome from Node, Puppeteer has recently seen some competition in the form of the cross-browser Playwright recently. But, no fear, Puppeteer is stepping up and can now work cross-browser too. We also learn Puppeteer is migrating to TypeScript.

Mathias Bynens

Open-Source Serverless CMS Powered by React, Node.js and GraphQL API— Build dynamic websites and apps with Webiny. 100% powered by JavaScript. Deploy your sites to AWS Lambda.

Webiny Serverless CMS sponsor

Rome: An Experimental JavaScript Toolchain— A compiler, linter, formatter, bundler, testing framework and more. Started by Sebastian McKenzie (of Babel and Yarn fame), Rome is now a project from the React Native team at Facebook. Related repo.

Facebook

Vime: A New, Modern Media / Video Player for the Web— Aims to be a ‘modern alternative to Video.js and Plyr’: “The idea behind Vime is we want you to control the player, not the other way around.” Modular, tree-shakable, and with potential for a plugin ecosystem. GitHub repo.

Rahim Alwer

Vuln Cost: An Open Source Security Scanner for VS Code— Free Snyk-powered VS Code extension that finds security vulnerabilities in npm packages, providing feedback in-line with your code, such as how many vulnerabilities a package has.

snyk

ip-num: A Library to Work with ASN, IPv4, and IPv6 Numbers— Happy in both Node and the browser.

dadepo

Flip: Animated Flip Counter Plugin to Add a Countdown to a Website— Adds an animated dynamic countdown timer to a page. No dependencies, responsive and mobile friendly, and fits any language, locale, or time zone.

Rik Schennink

The Perfect Partner to MongoDB Atlas. Try It for Free

Studio 3T sponsor

A JavaScript API for Controlling 'Simpsons: Hit & Run'— Including this as a bit of fun if you fancy noodling on something odd. Remote controlling games from JS seems neat, although I suspect just getting this running would take a while..

Tavis Ormandy

#485 — April 24, 2020

Unsubscribe  :  Read on the Web

JavaScript Weekly

Introducing Crank.js: A New JSX-Driven Framework— A new framework for creating JSX-driven components with functions, promises and generators. If you haven’t got time to read the creator’s lengthy (but well worth reading!) rationale for creating another framework, check out the GitHub repo or jump straight into a CodeSandbox example. I hope to see a lot more about this in the near future.

Brian Kim

The Cost of JavaScript Frameworks— Using data from the HTTP Archive, Tim explores the performance cost of using various popular frameworks as a starting point. Some good analysis here.

Tim Kadlec

You Hacked the Gibson? Yeah, They Built Their Own Login— Don't let Crash Override pwn your app. FusionAuth adds secure login, registration and user management to your app in minutes not months. Download our community edition for free.

FusionAuth sponsor

Node.js 14 Released— v14 now becomes the current ‘release’ line with it becoming a LTS (Long Term Support) release in October. Diagnostic reports are now a stable feature, it now uses V8 8.1, there's an experimental Async Local Storage API, and more.

Michael Dawson and Bethany Griggs

Vidact: A Compiler to Convert React-like Apps to Vanilla JS— Compiles pure React-compatible JavaScript (JSX) to vanilla JavaScript with no virtual DOM.. think similar to Svelte, but without introducing a new syntax. A curious idea.

Mohamad Mohebifar

Highlight.js 10.0: The Web Syntax Highlighter Library— I always laugh when I see a big release of a popular library and saw we last linked it 5 years ago😄 Nonetheless, this isa big release and Highlight.js continues to be a fantastic library for syntax highlighting code.

highlight.js

💻 Jobs

Senior Full-stack Developer (Malmö/Sweden)— Every day is different from the next. Join our upbeat Team and work on exciting, major projects using a modern JavaScript stack.

Ortelius AB

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

Vettery

📚 Tutorials

▶  React: The Basics in 20 Minutes— A well presented, up to date (yep, it covers hooks) tutorial that doesn’t hang around, whether you’re new to React or just want a refresher.

Devistry

Creating Web Apps via TypeScript and webpack— The example app doesn’t use any front-end framework, just vanilla DOM APIs. Some knowledge of TypeScript, webpack, and npm are required, but this is a neat way to bring together a bunch of tools.

Axel Rauschmayer

What Is The toJSON() Function?— If an object has a toJSON function, JSON.stringify() calls toJSON() and serializes the return value from toJSON() instead.

Valeri Karpov

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

Wallaby.js sponsor

How Does TypeScript Work? A Bird’s Eye View— Dr. Axel goes into depth on the structure of a typical TypeScript project, what gets compiled, and how can an IDE be used to write TypeScript. Aimed at people who haven’t yet picked TypeScript up.

Axel Rauschmayer

10 Lesser Known Angular Features You've Probably Never Used

W3Radar

You Might Not Need switch— Using an object of outcomes instead of switch suits many use cases, though take care over readability.

Valentino Gagliardi

🔧 Code & Tools

Phelia: A Reactive Slack Application Framework— If you think Slack apps were all about text bots, think again.. you can now create apps complete with in-app UIs. Phelia brings the React approach to the task.

Max Chehab

Marked.js 1.0: A Fast Markdown Parser and Compiler— Got Markdown to render? Marked.js to the rescue. While the project is years old, 1.0 has dropped just this week. Here’s a live demo.

Christopher Jeffrey

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

Alpine.js: A Minimal Framework for Composing JS Behavior in Your Markup— We only gave Alpine a brief link when it first dropped but with new versions coming out thick and fast, we think it’s well worth a look. Billed as “like Tailwind for JavaScript”, Alpine lets you keep the HTML you know and love and just pepper it with JavaScript as and where appropriate.

Alpine.js

enroute: A React Router with a Small Footprint for Modern Browsers

TJ Holowaychuk

Rosetta: A General Purpose Internationalization Library in 292 Bytes— Less than 300 bytes, but does have a few dependencies. Aims to be very simple and is targeted at basic string use cases.

Luke Edwards

NAB 2020 May Be Canceled, But The Full Bitmovin Experience Is Not

Bitmovin Inc. sponsor

Hotkey 1.4: Trigger an Action on an Element When a 'Hotkey' is Pressed— Use Hotkey, set the data-hotkey attribute on your elements, and you get keyboard shortcuts. GitHub built and uses it (look for the data-hotkey attributes on their pages).

GitHub

web-worker: Consistent Web Workers for the Browser and Node— In Node it works as a web-compatible Worker implementation atop worker_threads. In the browser it’s an alias for Worker.

Jason Miller

#486 — May 1, 2020

Unsubscribe  :  Read on the Web

JavaScript Weekly

🌍 I18n Ally: An All-in-One i18n Extension for VS Code— Got some internationalization work to do? I18n Ally gives you inline annotations, automated translations via Google Translate (which you can review), progress indication, etc. Supports React, Angular, Vue and other frameworks.

Anthony Fu

How a Few Lines of Code Broke Lots of Packages— Just under a week ago, people were reporting that create-react-app was broken. The culprit? A tiny change in a tiny dependency: is-promise. Luckily a fix was out very quickly and the creator of is-promise reflects on what happened here. Liran Tal also has some analysis of the situation.

Forbes Lindesay

Identify Front-End Issues Like JavaScript or Network Errors Fast— Datadog’s algorithmic alerts will proactively alert 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

Q: A JavaScript 'Quantum Circuit' Simulator— Bring quantum computing to your browser with this JavaScript simulation. If you were never quite sure what your JavaScript code was going to do, now you can formally explore the concept 😂

Stewart Smith

💻 Jobs

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

Vettery

Senior Full-Stack Developer (Malmö/Sweden)— Every day is different from the next. Join our upbeat Team and work on exciting, major projects using a modern JavaScript stack.

Ortelius AB

📚 Tutorials

A Guide to window.location— A breakdown that covers most of the methods and properties available on the DOM’s window.location object.

samantha ming

Implementing Dark Mode in React Apps Using styled-components

Blessing Krofegha

▶  Let's Build a Financial Dashboard App with React (Webinar On‑Demand)— Join TJ VanToll as he walks you through building a responsive Bootstrap-themed Stocks Portfolio app. Check it out today.

Progress KendoReact sponsor

Getting Started with NuxtJS— Learn how to create Vue.js-powered server-side rendered apps with NuxtJS including configuring an app and deploying it on Heroku.

Timi Omoyeni

▶  Learn Svelte: A 16-Part Course on Learning the Popular UI Framework— The course centers around building a chatbot, which is a nice change from the todos and other overused tutorial examples.

noah kaufman

10 Practical JavaScript Tricks— These kinds of lists are usually pretty run of the mill, but this one actually contains some lesser-known quick tips that you may not have seen before.

zander shirley

Moving TinyMCE to Modern JavaScript— The creators of TinyMCE (a popular WYSIWYG HTML editor) have been refactoring its rather legacy JavaScript (the first version came out 17 years ago!) to modern practices.

Joakim Lindkvist

7 JavaScript Design Patterns Every Developer Should Know— This is sort of like a (very) mini version of Addy Osmani’s 2017 book on JS design patterns (which is referenced at the end of the post).

deven rathore

▶  An Introduction to State Machines Using XState— XState is a neat way to work with state machines in JavaScript, Kyle is a neat teacher, and Egghead is a neat platform for unlocking these videos for us too.

Kyle Shevlin

Ride Down Into JavaScript Dependency Hell

AppSignal sponsor

A Collection of Challenging TypeScript Exercises— “The goal: Let everyone play with many different TypeScript features and get an overview of TypeScript capabilities and principles.”

Marat Dulin

A Visual Guide to React Mental Models— Different people learn in different ways but good mental models are always valuable and can be helpful if you need to juggle all of the pieces involved in a framework like React.

Obed Parlapiano

Turning Vue Components Into Reusable npm Packages— Outlines how you can reuse Vue components across your projects by automating your process to bundle, test, document, and publish your components.

Sjoerd de voorhoede

🔧 Code & Tools

jExcel v4: A Vanilla JS Interactive Table / Spreadsheet Control— 4.0 adds support for tabs/workbooks, updating a remote data source with JSON, formula support in a sheet footer, and more. There are lots of demos and examples on the official homepage.

Paul Hodel

Will It CORS?— A handy online tool/wizard for establishing how your (potential) use case will (or won’t!) operate alongside CORS (Cross-Origin Resource Sharing).

HTTP Toolkit

Get Great Visual Feedback & Bug Reports, Even from Non-Technical Folk— Simply click a page element to pin visual feedback with screenshots & metadata. BugHerd = fast and easy bug tracking.

BugHerd sponsor

utfu: Replace Busted Characters From Legacy Text with UTF-8— Useful when old content contains characters like “— in place of a single quote, and similar legacy text issues.

Daniel Sieradski

Middy 1.0: A Node Middleware Framework for AWS Lambda— Middy’s aim is to make writing serverless functions (hosted on AWS Lambda) easier by providing a familiar middleware abstraction to Node developers.

Luciano Mammino

useWorker() 3.0: A React Hook for Blocking-Free Background Tasks— Makes it easier to throw tasks off to a Web Worker in React.

Alessio Koci

webpack-blocks: Configure webpack using Functional Feature Blocks

Andy Wermke

JZZ: A MIDI Library for Node and the Browser— Send, receive and play MIDI messages from both Node and the browser on Linux, macOS and Windows.

Sema

MDX 1.6: Use JSX in Markdown Documents— This version introduces initial Vue support.

Compositor and Vercel

#487 — May 8, 2020

Unsubscribe  :  Read on the Web

JavaScript Weekly

Jest 26 Released: The Popular Testing Framework— Jest is a popular testing framework that works with pretty much everything. This release focuses on getting the dependency count and install size down (this causes some breaking changes, unsurprisingly), adds a new fake timer implementation, drops Node 8 support, and initial, experimental ESM support to play with.

Christoph Nakazawa

1LOC: A Collection of One-Line JS Snippets— A neat little collection of vanilla JavaScript one-liners divided into various categories (arrays, date/time, checking objects, DOM work, etc.) You can submit your own for inclusion too.

Nguyen Huu Phuoc

Hardcore Functional Programming in JavaScript— Brian Lonsdorf teaches you functional programming concepts in JavaScript such as pure functions, currying, composition, functors, monads and more.

Frontend Masters sponsor

Debug Anything: The Basics— A six part series (all ready to read now) on debugging your JavaScript and TypeScript code with the debugger built into Visual Studio Code.

Charles Szilagyi

Comparing Ember Octane and React— This is about as detailed a comparison as you could hope for and a demonstration of just how much Ember contributes to the JavaScript ecosystem. Octane really kicks things up a notch for Ember, too.

Chris Garrett

Deno 1.0 is Due Next Week: Here's What You Need to Know— In 2018 Node's creator Ryan Dahl told us 10 Things I Regret About Node.js and revealed a prototype of Deno, a new V8-based runtime, and here's what you need to know about it. Short of time? This two-minute video sums up the biggest wins quickly.

David Else

💻 Jobs

JavaScript Developer at X-Team (Remote)— Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

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

Vettery

📚 Tutorials

How To Build a Vue Survey App Using Firebase— A step-by-step guide to building a functional survey app using Vue.js and Firebase for both authentication and as a database.

David Atanda

A Brief Look at ES2020's Promise.any— When you need to know when at least 1 promise got resolved among an iterable of Promise objects, Promise.any() is the solution.

Marios Fakiolas

ES2020: Everything You Need to Know— An ES2020 roundup!

Martin McKeaveney

Building a Crossword Puzzle Generator— As a NY Times crossword addict, I love a good crossword, but if you’d rather figure out how to make your computer solve them, be my guest 😄 This post guides you on how to approach the problem.

Mitchum

Git Best Practices for SOC 2 Compliance Quick Wins— Get quick wins for your SOC 2 compliance audit, and raise developer productivity at the same time.

Datree.io sponsor

Getting Started with Sapper and Svelte— Sapper is a Svelte-powered framework.

Chris Boakes

A ES2015+ Cheatsheet— A one-page guide to ES2015+ features based around brief example snippets.

Devhints.io

How to Fix ESLint Errors Upon Save in VS Code— A quick-fire tip.

David Walsh

How to Build a Blog with Next 9.3, Netlify, and Markdown— Learn how to build a Next.js-powered Markdown blog and deploy it to the Netlify platform.

Cassidy Williams

A Canvas Engine Comparison: PixiJS vs Two.js vs Paper.js— A benchmark of three popular 2D rendering engines/drawing APIs. Note: This will tax your system.

SlayLines

🎉 BTW, if you like videos, we need to shout out Florin Pop's YouTube channel as he's just passed 20k subscribers by posting neat JavaScript videos and live streams nearly every day for the past six months! 😁 Lots of great stuff on there for JavaScript developers of all skill levels.

🔧 Code & Tools

Selecto.js: Make Elements Selectable Within an Area— Let’s say you have a number of elements that represent choices, data, whatever, and you want users to be able to select a subset of them by clicking/pointing and dragging. That’s what this does. Live examples here.

Daybrush (Younkue Choi)

Visual Studio Code April 2020 Released— Probably the most widely used editor in the JavaScript space now and April brings some neat new features like being able to work on GitHub issues within the editor.

Microsoft

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

Majestic 1.7: A Zero Config GUI for Jest— A tool to help make your JavaScript testing life a little easier. Run npx majestic in the folder of any project that uses Jest to give it a quick try.

Raathi Kugarajan

Pico: Take Browser Screenshots Client-Side with JavaScript— Different from capturing a webpage using Puppeteer or a similar tool in that the screenshot taking happens entirely client side.

Gripeless

React Flow: A Library for Rendering Interactive Graphs— If you have a need to lay out graphs in a visual way and be able to smoothly pan and zoom around such graphs, this is an interesting new library. Live demo here.

Moritz Klack

MongoDB Is Easy. Now Make It Powerful. Free Download for 30 Days.

Studio 3T sponsor

NeutralinoJS: Build Cross-Platform Apps Using JS, HTML and CSS— Sounds just like Electron, right? Not quite. NeutralinoJS use less memory and are smaller as they don’t ship a full browser inside. 1.4.0 just dropped.

Neutralinojs

Slugify 1.0: Simply Turns Strings into URL/Filename-Friendly 'Slugs'— e.g. ‘I ♥ Dogs’ becomes ‘i-love-dogs’

Sindre Sorhus

RxJS Primitives: A Set of Libraries That Provide Operators for RxJS

Tane Piper

#488 — May 15, 2020

Unsubscribe  :  Read on the Web

JavaScript Weekly

Deno 1.0 Released— Two years ago, Ryan Dahl, the creator of Node.js, gave a talk about the 10 things he regretted about Node.js. At the same time, he introduced Deno, a prototype of a new, security-first, npm-less JavaScript runtime — now it's considered ready for the big time and, at a minimum, is worth having a quick play with. If you want to do a walkthrough tutorial to see if it’s to your taste or not, this is a good one by Flavio Copes.

Ryan Dahl, Bert Belder, and Bartek Iwańczuk

Psst.. we launched Deno Weekly as a way to stay up to date with Deno. We'll only feature it from time to time in JavaScript Weekly.

JavaScript Features To Forget— It’d be easy to say.. that's just, like, your opinion, man.. but when it’s the author of about 73 (slight exaggeration) JavaScript books including JavaScript: The Definitive Guide, it’s worth listening.

David Flanagan

Don’t Build Auth From Scratch. Focus On Your App— Spend less time on authentication and authorization and more time developing your awesome app. Auth built for <devs>. Download our community edition for free.

FusionAuth sponsor

Playwright 1.0: Fast and Reliable Cross-Browser Testing— We first featured Playwright, Microsoft’s take on a cross-browser alternative to Puppeteer, a few months ago, but it’s already at 1.0. This post does a good job on selling it.

Arjun Attam (Microsoft)

Announcing TypeScript 3.9— You know it's JavaScript plus syntax for type declarations and annotations by now, right? 3.9 gains a variety of editor improvements, performance improvements, and tweaks to inference and Promise.all. No awaited just yet though.

Daniel Rosenwasser (Microsoft)

Recoil: An Exprimental State Management Library for React— Interesting not only because it comes from Facebook, but because there’s a pretty good 23 minute talk about it and it follows the latest React standards.

Facebook

💻 Jobs

Senior Software Engineer — Save Lives & Make an Impact— We use Node/TS/React & ML to provide crisis support via SMS. Help us scale globally with a focus on privacy and security.

Crisis Text Line

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

Vettery

📚 Tutorials and Opinions

▶  Tom Preston-Werner Talks About Redwood.js— GitHub co-founder Tom Preston-Werner talks about Redwood.js, a new full-stack JavaScript framework built around React, GraphQL, and Prisma.

Full Stack Radio podcast

Standard IO: Under the Hood— What really happens behind the scenes when you call console.log?

Vladimir Keleshev

An Initial Introduction to npm v7— If you thought the npm blog would fade away after the GitHub acquisition, you thought wrong! Isaac Schlueter is back with a status update on what the next major version of npm will offer and is promising a series of posts to come going into more detail. We'll probably focus more on this in Node Weekly in coming weeks.

The npm Blog

Now Up to 4GB of Memory in WebAssembly Applications on V8— It’s 4GB because WebAssembly currently uses 32 bit pointers but till now WebAssembly apps in Chrome and Emscripten have been limited to 2GB for.. reasons.

Andreas Haas, Jakob Kummerow, and Alon Zakai

Connect Users to Vital Business Data with NodeRun (Webinar On‑Demand)

Profound Logic sponsor

Why We Made a New Component Library Instead of Buying One— It principally came down to the company involved preferring to have total control but they also felt Vue.js was well suited to the task.

Alessandro Grosselle

Second-Guessing the Modern Web— What if everyone’s wrong? Can we solve things in a better way that single page applications? Interesting thought piece and Rich Harris replied with In Defense of the Modern Web.

Tom MacWright

John Conway's FRACTRAN, A Ridiculous, Yet Surprisingly Deep Language— A beautiful JavaScript-heavy tribute to John Conway (of Game of Life fame) by trying to reimplement his esoteric FRACTRAN language.

Reg Braithwaite

What Every Developer Should Know About TCP— You’re every developer! And so am I!

Roberto Vitillo

🔧 Code & Tools

ESLint v7.0.0 Released— The popular pluggable and configurable linter tool for identifying and reporting on patterns in your code. Node 8 support is dropped.

ESLint

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

Wallaby.js sponsor

Next.js 9.4 Released: The React Powered Site Building Framework— Just two months after 9.3 (which was already an exciting release) comes the even more significant 9.4 which includes Fast Refresh, a new “instantaneous” hot reloading experience, plus incremental static generation where static pages can be generated or re-rendered in the background as traffic comes in.

Vercel

Fuse.js 6.0: Lightweight Fuzzy-Search Without Dependencies— Want a simple search feature without a dedicated backend? This could help. It’s been around for years but 6.0.0 has just dropped with more new goodies like logical query operators. - GitHub repo.

Kiro Risk

Perfume.js 5.0: A Web Performance Library for Measuring User-Centric Perf Metrics— Only 2KB when gzipped, supports the latest browser performance APIs for precise metrics on things like first paint, first input delay, total blocking time, etc.

Leonardo Zizzamia

Shifty: A Teeny Tiny Tweening Engine— All it does is tweening. It’s a low level animation solution that you can integrate into any rendering mechanism of your choice. The examples here demonstrate it well as it can be used for ‘animating’ things in an unconventional sense. GitHub repo.

Jeremy Kahn

MongoDB Is Easy. Now Make It Powerful. Free Download for 30 Days.— Using MongoDB Atlas? Studio 3T is the professional GUI and IDE that unlocks the power you need.

Studio 3T sponsor

Color2K: A Color Parsing and Manipulation Library in 2KB or Less— A key goal here was to be a lot smaller than the competition “while still satisfying all of your color manipulation needs in an sRGB space”.

Rico Kahler

#489 — May 22, 2020

Unsubscribe  :  Read on the Web

JavaScript Weekly

A Complete Walkthrough to Using WebGL— A really thorough walkthrough of getting started with WebGL at the low level, complete with integrated, editable examples and coverage of the math behind 3D rendering. If you’ve ever wondered what libraries like Three.js are using behind the scenes, it’s all here.

Maxime Euzière

Microsoft Unveils 'Azure Static Web Apps'— Azure Static Web Apps brings modern static site deployment to Azure and integrates with GitHub and Visual Studio Code too. Want to see more? Here’s a 6 minute screencast demo. Yet another way to deploy those static single page apps :-)

Microsoft

The Most Complete Spreadsheet for JavaScript Apps – SpreadJS— Deliver true Excel-like experiences with this fast JavaScript enterprise spreadsheet solution. Build FinTech, analysis, budgeting, and forecasting apps. Featuring an Excel I/O, 450+ functions, tables, charts, sparklines, and more. View the latest demo.

SpreadJS by GrapeCity sponsor

The Unreasonable Effectiveness of Declarative Programming— Siddharth shows off his single file animation library by way of showing off the benefits of doing things in an (arguably) declarative style. A nifty post, this, which encourages you to interact with the code yourself.

Siddharth Bhat

The Third Age of JavaScript?— Yes, purely an opinion piece but he might have a point. “Every 10 years there is a changing of the guard in JavaScript. I think we have just started a period of accelerated change that could in future be regarded as the Third Age of JavaScript.”

Shawn Wang

Electron 9.0.0 Released— The popular cross platform desktop app framework gets more dependency bumps and is now running on Chromium 83, V8 8.3, and Node.js 12.14. There’s an integrated PDF viewer now, if you need that.

GitHub Inc.

💻 Jobs

Senior Software Engineer — Save Lives & Make an Impact— We use Node/TS/React & ML to provide crisis support via SMS. Help us scale globally with a focus on privacy and security.

Crisis Text Line

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

Vettery

📚 Tutorials and Opinions

▶  (Re)-Implementing The Easiest JavaScript Game Ever— Have you ever played the ‘running dinosaur’ game in Chrome when your connection goes down? This is a fun 8 minutes spent reimplementing the basic mechanic. It’s scrappy, but that’s kinda the point. If you like his style, he’s done a 2 minute video flying through the development of another arcadey game.

KnifeCircus

The Architecture of a Serverless, Vue.js-Powered Content Management System— Not only does this outline the AWS infrastructural architecture pretty well, there’s code for you to use for your own setup if you wish.

Dan Bartlett

Understanding Lazy-Loading in Popular Frontend Frameworks— How Angular, React, and Vue handle on-demand loading of components.

tamos piros

▶  One Developer's Five Most Used JavaScript 'Tricks'— If you’re more at the beginner end of the scale, you might appreciate six minutes spent here. Well presented.

Aaron Jack beginner

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

5 Differences Between Arrow and Regular Functions— A nice detailed look, with examples, of the differences between arrow and regular functions in JavaScript. I’m sure one or two of these will be new to many of you.

dmitri pavlutin

Dropbox's Great CoffeeScript to TypeScript Migration of 2017— A deep retrospective from the Dropbox team on migrating hundreds of thousands of lines of CoffeeScript to TypeScript, sharing details on why they chose TypeScript and the challenges faced. “Fast forward to 2020, we now have over two million lines of TypeScript at Dropbox.”

David Goldstein

Promise.all vs Promise.allSettled— “I was reading the MDN docs on JavaScript promises and realized that the difference between Promise.all and Promise.allSettled wasn’t immediately obvious.”

JonLuca DeCaro

Growing Pains: From 0 to 13,000 Dependencies— Find out how your project can go from 0 to 13,000 dependencies in just a few steps.

Nikola Đuza

Error Handling in RxJS

Eugene Ghanizadeh Khoub

A (Mostly) Complete Guide to React Rendering Behavior

Mark Erikson

How to Use Object Destructuring in JavaScript— A code-heavy tutorial looking at object destructuring, a feature introduced in ES6 that allows you to extract properties from objects and bind them to variables.

dmitri pavlutin

🔧 Code & Tools

Reveal.js 4.0: An HTML Presentation Framework— A mature library takes another step forward. The homepage itself is, cleverly, a live demo (use the arrow keys). v4 adds several new features. Just want the code? Here’s the GitHub repo.

Hakim El Hattab

ac-colors: A Reactive Color Conversion and Generation Library— A lot of power under the hood here being able to convert between RGB, HSL, HEX, XYZ, LAB, and LCHab, as well as handle random color generation and contrast ratio calculation.

Vinay

MongoDB Is Easy. Now Make It Powerful. Free Download for 30 Days.— Using MongoDB Atlas? Studio 3T is the professional GUI and IDE that unlocks the power you need.

Studio 3T sponsor

umi-request: A Modern HTTP Request Tool Based on Fetch— An attempt at combining some of the niceties of Axios with the modernity of the Fetch API to get the best of both worlds.

UmiJS

Howler.js: An Audio Library for The Modern Web— Makes things easier cross-platform. Uses the Web Audio API but can fall back to HTML5 Audio.

James Simpson

Vue Class Store: Universal Vue Stores You Write Once and Use Anywhere— We’ll let it speak for itself: “I’ll give you reactivity, computed properties and watches, written in standard JavaScript or TypeScript, with no setup or boilerplate, and you can use me anywhere.”

Dave Stewart

New Integration: PostgreSQL Instrumented for Node.js

AppSignal sponsor

Vue Formulate: The Easy Way to Build Forms with Vue.js— First linked a few months ago, this has come on leaps and bounds since with grouped fields, a way to stop validation, slots for customization, and more.

Braid LLC

NanoPop: A Minimalistic Positioning Engine— In a race to do things in as few bytes as possible, NanoPop aims to be much smaller than even PopperJS for positioning things like tooltips and popovers.

Simon R.

#490 — May 29, 2020

Unsubscribe  :  Read on the Web

👀 This week we have a fun bit of bonus content at the end of the issue — an interview with David Flanagan, someone who's written more JavaScript books than I've had hot dinners. 😆

JavaScript Weekly

Snowpack 2.0: A Build System for the Modern Web— Say bye-bye to your bundler and let modern browsers’ ES module support do the heavy lifting with Snowpack. Or if you need to target more than just modern browsers, you can always just use it to speed things up in development. This talk by Ryan Lanciaux introduces the idea of escaping using bundlers, if you’re new to this area.

Fred K. Schott

The Process of Making Vue 3— We know a lot of you are excited about the next major version of Vue.js– the final release is due soon (betas available here) and here Evan talks about the process and how it differs from Vue 2 at a high level.

Evan You / Increment

New Course: Design Systems with Storybook & React— Learn to create a design system from scratch using React, and document the design system to share with your team using Storybook.

Frontend Masters sponsor

A First Look at Records and Tuples— An introductory look at two new compound primitive value types in the ECMAScript spec: Records and Tuples.

Axel Rauschmayer

▶  What's New in TypeScript— You might know Daniel better from all his TypeScript release posts, but here he is in video form with a brief TypeScript introduction followed by essentially a code and example-heavy ‘state of the union’ about where TypeScript is at and where it’s headed.

Daniel Rosenwasser (Microsoft)

htmx: Build Dynamic Pages Using HTML Attributes— Billed as the ‘successor to intercooler.js’, htmx lets you add dynamic Ajax-y elements, Server Sent Events (SSE), WebSockets and more to a site using just HTML attributes.

Big Sky Software

💻 Jobs

JavaScript Developer at X-Team (Remote)— Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

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

Vettery

📚 Tutorials and Opinions

Analyzing the Performance of Notion's Electron App— I was going to save this for our React newsletter but it’s too good! A real deep dive into analyzing the performance of a desktop JavaScript app for a popular note taking service and some basic optimizations that can be done.

Ivan Akulov

ECMAScript 4: The Missing Version— If you were around the JavaScript world in the early 2000s, you might recall how long discussion around ES4 rumbled on before it ultimately fizzled out. Some of the ideas were picked up by ActionScript, as used by Flash, but it felt like we lost a lot of potential progress in that decade.

Evert Pot

3 Hacks to Level Up Your Dashboards— Watch this webinar to learn about three elements that will help you build better dashboards for your application.

Logi Analytics sponsor

Some Causes of Memory Leaks in JavaScript and How to Avoid Them— A primer on the basic ideas.

Ekaterina Vujasinović

How To Create Better Angular Templates with Pug— Pug is a template engine that allows you to write cleaner templates with less repetition.

Zara Cooper

A (Mostly) Complete Guide to React Rendering Behavior— Details on how React rendering behaves, and how use of Context and React-Redux affect rendering. There are a lot of concepts compressed into this article.

Mark Erikson

▶  A 50 Minute Deno Crash Course— A lot of people are cranking out Deno videos right now, but Traversy Media has a solid reputation for getting these things right. In 50 minutes we get a nice, balanced approach to Deno’s plus points, tooling, building an API, etc.

Traversy Media

Today’s JavaScript, From An Outsider’s Perspective— Lea is a JavaScript expert, of course, but she was trying to help a computer scientist friend work with JS and commented on the frustrations along the way.

Lea Verou

10 JavaScript Quiz Questions and Answers to Sharpen Your Skills— Lots of tidbits here to sharpen your skills and understanding, but keep in mind that not all JavaScript interviews will be like this(!)

Nick Scialli

🔧 Code & Tools

RoughNotation: A Small Library to Create and Animate Rough Annotations— Uses Rough.js for the handdrawn look. Lots of nice interactive examples on the page showing the diversity of annotation types.

Preet Shihn

AudioMass: A Full-Featured Web Audio Editing Tool in JavaScript— Runs entirely in the browser with no backend or plugins required. Impressive. Source here.

Pantelis Kalogiros

See Runtime Values Right in Your Editor as You Type— Quokka.js is a rapid prototyping playground for JavaScript & TypeScript. Code runs immediately as you type and results display in your editor. Discounted by 40% for the next few days.

Wallaby.js sponsor

Fluor.js: A High Level Way to Add Interactions and Effects to Pages— Think a modern jQuery-lite. Pretty short and sweet for what it is.

François Vaux

Angelfire: Add Custom Context Menus to Any Page Element— Hands up if the name of this project takes you on a nostalgia trip to the 90s.. 🙋‍♀️

Rishabh Anand

number-precision: Tiny Library for Basic but Precise Arithemetic— For when you don’t want 0.1 + 0.2 to equal 0.30000000000000004 😏

NEFE

Perspective: Streaming Pivot Visualization Via WebAssembly— An interesting use for WebAssembly here. Originally built for J P Morgan, Perspective is for building real-time high performance interactive visualizations, powered by a C++ engine compiled to WASM under the hood.

The Fintech Open Source Foundation

AppSignal Adds Next.js Integration - Automatically Adds Web Vitals Monitoring

AppSignal sponsor

Autopilot: A Cross-Platform Desktop Automation Library for Deno— Another example of where using Rust for dependencies opens up some fun options to Deno. If you’re using Deno, don’t forget our Deno Weekly newsletter where we’ll be focusing on things like this :-)

Divy Srivastava

vue-list-scroller: A Vue Component for Efficiently Rendering Large Lists— Uses the ResizeObserver API to help with creating a Twitter-like feed that has thousands of items, and supports infinite scroll.

Ivan Safonov

Notable Improvements to the Profiler in React DevTools 4.7.0— This tweet thread from Facebook developer Brian Vaughn distills out the highlights from the changelog.

Facebook

#491 — June 5, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

Grid.js: An Advanced Table Library— A lightweight, advanced table plugin that can work alongside React, Angular, Vue, or, well, nothing. Check out some of the examples for more on how to use it. It uses Preact under the hood.

Afshin Mehrabani

The Rise of React (And Its Growing Pervasiveness)— In the most recent issue of Increment, a noted journalist (for WIRED and The Economist) takes a wide-angle look at how React came to be one of the predominant frontend frameworks powering today’s web and the attendant implications ― both positive and negative ― for the future.

Chris Stokel-Walker (Increment)

Does a Serverless Headless CMS Exist? It Does Now— The first headless CMS built for serverless infrastructure. Forget about scaling problems, flash crowds, setting up and managing servers and stop overpaying for resources you don't use. It's free and open-source, check it out.

Webiny sponsor

Babel 7.10.0 Released— The hugely popular JavaScript transpiler got more tweaks than you’d expect for a minor point release including an experimental version of a new polyfills compatability architecture, improvements to optional chaining and private fields support, and better tree-shaking for React code.

Nicolò Ribaudo

💻 Jobs

JavaScript Developer at X-Team (Remote)— Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

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

Vettery

Senior Software Engineer — Save Lives & Make an Impact— We use Node/TS/React & ML to provide crisis support via SMS. Help us scale globally with a focus on privacy and security.

Crisis Text Line

📚 Tutorials and Opinions

Reusing UI Components at Enterprise Level— An engineer at PayPal explains how they share UI components across their various products.

Dong Chen (PayPal)

The 'Top Types' any and unknown in TypeScript— They’re not top types because they’re the best types 😂 .. but they’re essentially ‘universal’ types that can contain all values (in opposition to the never type which is the empty set).

Dr. Axel Rauschmayer

One Cool Trick to Simplify Reducer Functions— An introduction to the Immer immutable state library as a way to reduce the complexity of Redux reducers.

Eric Elliott

Getting Started With OpenTelemetry In Node.js

Lightstep sponsor

How-to Normalize Home Volume Levels with Node-RED— Node-RED is a JavaScript-powered ‘low code’ visual programming environment frequently used with hardware/IoT use cases. I rarely see tutorials about it, so this is pretty neat.

Blake Niemyjski

The Service Worker Lifecycle Explained— Explaining the lifecycle of Service Workers in PWAs and how to update them as fast as possible.

Felix Gerschau

Track Your (Android) Smartphone in Physical Space with JavaScript— Leans on the Generic Sensor APIs so you’re limited to Android for now, but it’s fun to see the potential.

Sanjeet Chatterjee

Some Reminders of Good GitHub Etiquette— Basic things, but sometimes easily forgotten, from one of the date-fns maintainers.

Sasha Koss

MongoDB Is Easy. Now Make It Powerful. Free Download for 30 Days.

Studio 3T sponsor

▶  Inside Vue 3 with Gregg Pollack— An hour long podcast chat with Gregg Pollack of Vue Mastery about Vue 3 reactivity model course and when and where the new Composition API is worth using.

Views on Vue Podcast podcast

How to Create a Web Worker-Driven Multithreaded Frontend App— It leans on an under-development Web Worker-driven framework called neo.mjs that promises “a new era of making better Web-based user interfaces.”

Tobias Uhlig

Stranger Things, JavaScript Edition— This is mostly a bit of fun mixed with a little bit of Wat picking on some JavaScript oddities. If the quirks of equality and NaN are familiar to you, move on.

Live Code Stream

Using Git to Run ESLint on Changed Files in a Feature Branch

Jeffrey Auriemma

🔧 Code & Tools

TUI Editor 2.1: A Powerful Markdown WYSIWYG Editor— You get the Markdown on the left, output on the right. The latest release added much better syntax highlighting for the Markdown source (if you want it) and ‘preview highlighting’ where the output of the code you’re working on is highlighted in the preview pane.

NHN

redaxios: The Axios API, as an 800 Byte Fetch Wrapper— If you love the Axios API but want to get it in a lighter way..

Jason Miller

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

Wallaby.js sponsor

React Date Picker 3.0: A Simple and Reusable Date-Picker Component— A mature option that continues to get frequent updates. Demo here.

HackerOne

Frappe Charts 1.5: Responsive, Zero Dependency SVG Charts— Here’s are some examples (with code) to explore.

Prateeksha Singh

ms: Tiny Milisecond Conversion Utility— For example: ms('2.5 hrs') becomes 9000000 .. or ms(2 * 60000) becomes ‘2m’.

Vercel

#492 — June 12, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

153 JavaScript Questions (With Their Answers Explained)— Want to test your JavaScript knowledge? Whether for fun or a job interview, this is an interesting set of questions, complete with explanations of the answers. We first linked to this a year ago when it only had about 40 questions, so it’s grown a lot!

Lydia Hallie

An ECMAScript Proposal: Logical Assignment Operators— Dr. Axel covers another proposal in the pipeline for the language that would let us do things like a ||= b or a &&= b as you might in, say, Ruby or Perl.

Dr. Axel Rauschmayer

New Course: React Native— Leverage your JavaScript and React skills for mobile iOS and Android platforms using React Native – ship your very own native mobile applications.

Frontend Masters sponsor

Node Weekly: Our Sister Newsletter for Node Developers— Earlier this week I was speaking with a long time JavaScript Weekly subscriber who hadn’t heard of Node Weekly, our Node-focused weekly newsletter, so I thought I should invite you all to check out the latest issue as we cover a lot of Node things there that we don’t include in JSW :-) Be sure to check out the “7 Interesting Node Modules and Tools” section at the bottom!

Cooperpress

💻 Jobs

JavaScript Developer at X-Team (Remote)— Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

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

Vettery

📚 Tutorials, Opinions and Stories

An Old School Doom Clone (in 13KB of JavaScript)— I have no idea how we missed this last year, but wow, what a neat piece of work. You can even grab it and play with the code yourself.

Nicholas Carlini

Type Assertions in TypeScript— A way to temporarily override a type, a little like lightweight casting.

Dr. Axel Rauschmayer

How to Deploy a Gridsome App on Azure Static Web Apps— Brings together the Gridsome Vue.js site generator with Azure’s new static app deployment service.

Gift Egwuenu

Bitmovin Magazine 5th Edition: Shaping the Future of Video— Get the latest overview of our products, recent feature releases, current video trends, and customer case studies.

Bitmovin Inc. sponsor

Using Higher-Order Components in React— Learn about higher-order components, the syntax of higher-order components, as well as use cases for them.

Shedrack Akintayo

How to Compare Objects in JavaScript— Compares a few different levels of what ‘equality’ actually is when it comes to JS objects.

Dmitri Pavlutin

Svelte, Why So Much Hype?— A closer look at the component-based library.

Anthony Le Goas

Improving the Rendering Performance of a Large List View in AngularJS 1.2.22— You’re probably not doing this, but this is a pretty neat look at approaching performance issues in legacy apps.

Ben Nadel

🔧 Code & Tools

njt (npm jump to): A Quick Navigation Tool for npm Packages— njt is a tool you can either use locally (npm install njt first) or on the Web site and it acts as a way to quickly reach a package’s issues, homepage, pull request, and numerous other things. Clever idea.

Alexander Kachkaev

Math.js 7.0: An Extensive Math Library for Node.js and Browser— Work with complex numbers, fractions, units, matrices, symbolic computation, etc.

Jos de Jong

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

Quotebacks: Embed Quotes Without Losing Context— This is a small library that can embed a quote in an attractive format within the source context. Can also be used as a Chrome extension that saves to local storage.

Tom Critchlow and Toby Shorin

Johnny Five 2.0: A JavaScript Robotics and IoT Programming Framework— If you’d wondered why you haven’t seen much about Johnny Five lately, don’t fear, because… Five is Alive! v2.0 is primarily an internal rewrite release rather than boasting lots of new features, though.

Rick Waldron

Karma 5: A Multiple Real Browser Test Runner for JavaScript— A popular way to test your code in multiple, real browsers at once. GitHub repo.

Karma

React Date Picker 3.0: A Simple and Reusable Date-Picker Component— A mature option that continues to get frequent updates. Demo here.

HackerOne

ModJS: A JavaScript Module for KeyDB and Redis— This isn’t for using Redis (or the KeyDB fork) from JavaScript but for taking JavaScript into the popular data structure server in case you prefer JavaScript to Lua for scripting it.

John Sully

Getting Started With OpenTelemetry In Node.js

Lightstep sponsor

Lightweight Charts 3.0: Canvas-Powered Financial Charts

TradingView, Inc.

tsParticles v1.15.0: A TypeScript Library for Particle Effects— Lots of neat demos in this announcement post. It’s basically Particles.js, but ported to TypeScript. GitHub repo.

Matteo Bruni

Josh.js: A Library to Animate Content on Page Scroll— This effect feels a little overdone nowadays, but this library is small, efficient, and it feels performant to me too.

Al Mamun

SVGuitar: Create SVG-Based Guitar Chord Charts— Very flexible and customizable and you can have a hand-drawn effect as well.

Raphael Voellmy

#493 — June 19, 2020

Unsubscribe  |  Read on the Web

✍️ It's been surprisingly quiet, we thought, out in JavaScript land this week, but we've been doing this for a while so we still have lots of neat bits and pieces for you to enjoy :-) Thanks for reading and continuing to support us! 😁

JavaScript Weekly

GitHub Unveils Its 'Super Linter': One Linter to Rule Them All?— Setting up the right linters for the various types of code in your projects can be… a bit of a pain. So GitHub has unveiled Super Linter, a combination of linters you can use with your repos via GitHub Actions. And, yes, we get ESLint and StandardJS.. plus things like markdownlint too.

GitHub

keen-slider: An Agnostic Touch Slider— Think ‘carousels’ but comfortable and smooth when using touch. They work with the mouse and touchpads as well, of course, and there are no dependencies. Live examples here.

Eric Beyer

Identify Front-End Issues Like JavaScript or Network Errors Fast— Datadog’s algorithmic alerts will proactively alert 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

▶  Compiler Compiler: A Video Series About Working on a JavaScript Engine— This gets very technical fast :-) Follow a JavaScript engineer on Firefox’s SpiderMonkey team as she gives an inside look at SpiderMoney and the art of compilation.

Yulia Startsev

Puppeteer v4.0.0 Released: The Node API for Chrome— The popular way to remotely control a headless Chrome instance gets a major version bump with the main breaking change being that Puppeteer no longer uses Node’s EventEmitter library in order to make it more environment agnostic. It’s also now “much better at killing lingering browser processes.”GitHub repo.

Puppeteer Team

💻 Jobs

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

Vettery

JavaScript Developer at X-Team (Remote)— Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

📚 Tutorials, Opinions and Stories

Why We Switched From Yarn to pnpm— Yarn and pnpm are both popular alternatives to npm but why would you switch from one to the other? Improved performance in a monorepo situation.

Andrew Sprouse

How to Run an Online Dev Conference / Event— An experienced developer event organizer took their All Day Hey event online at a rapid pace this year due to the pandemic. This extensive writeup covers how all the main pieces came together.

Josh Nesbitt

Stop Mocking fetch— Why you shouldn’t mock fetch or your API clients in your tests and what to consider instead.

Kent C Dodds

▶  Creative Coding in p5.js— A practical talk from GitHub Satellite 2020 demonstrating using the Processing-influenced p5.js creative coding library and editor for creating art with JavaScript.

Cassie Tarakajian

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

Tips for End to End Testing with Puppeteer— Some tips and tricks from someone who’s used Puppeteer a lot.

Daniel Caldas

Going Async in Vue 3 with Suspense— A practical example of a new feature coming to Vue 3 for rendering fallback content until a condition is met (e.g. the real component is ready).

Vinicius Kiatkoski

What JavaScript Developers Should Know About curl— curl is a fantastic (and borderline universal) command line HTTP client that lets you test, tweak, and manipulate requests both targeting your own apps and APIs as well as those of others.

Valeri Karpov

Computing with Types in TypeScript

Dr. Axel Rauschmayer

Several Ways to Clean Up Vue.js Components— Opinionated, so don’t expect to agree with them all.

Michael Zanggl

🔧 Code & Tools

Code Notes: A Gatsby Theme for Publishing Code-Related Notes and Snippets— If you’ve got a bunch of code snippets you want to keep collected together and present in an attractive fashion, this is a neat Gatsby and Markdown/MDX powered approach. Here’s an example site (which has lots of great JavaScript snippets on it – bonus!)

Zander Martineau

Breakpoints and console.log Is the Past, Time Travel Is the Future— 15x faster JavaScript debugging than with breakpoints and console.log.

Wallaby.js sponsor

TOAST UI Grid: A Customizable Grid Control for the Web— First featured a year ago, TUI Grid is a powerful grid control for the display, editing, and management of data. It comes from the same folks as TUI Editor and TUI Calendar.

NHN

DOCX: A Declarative API to Generate .docx Files— .docx files being more commonly known as modern Microsoft Word documents. This library works in both Node and the browser and there’s a live demo here.

Dolan

Midori: A Library for Animated Image Backgrounds— Built with three.js, provides support for animated transition, a configurable dynamic “camera”, and post-processing effects.

Benjamin Pang

🕰 Tzdb: A Simplified and Grouped List of Time Zones and Offsets— The official IANA time zone list has over 500 entries but you can simplify this substantially, as done here.

Vincent Voyer

Save Your Sprints. Build Tools 5x Faster

Retool sponsor

Helipopper: A Powerful Tooltip and Popover Library for Angular— A lighweight wrapper for Tippy.js for use in Angular. Lots of examples demonstrating the flexibility of it on the demo page.

netanel basal

#494 — June 26, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

Lessons Learned Refactoring Optional Chaining Into a Large Codebase— Lea Verou, creator of Mavo, decided to refactor Mavo to use optional chaining (?.) and here’s some of what she discovered along the way. (As an aside, Lea was the subject of a neat 10 minute programming documentary recently – worth a watch!)

Lea Verou

A Little Bit of Plain JavaScript Can Do A Lot— For anyone more than happy to dive in and write JavaScript without dragging in an entire framework and tooling to manage it, there will be no surprises here, but this is a nice reminder otherwise. Do you always need a 'framework'? No.

Julia Evans

Creating a Voting App with Firestore and Wijmo— Learn how to build a realtime voting app quickly and easily with the Firestore database and Wijmo components. The app uses OAuth for authentication and allows users to submit and vote for ideas.

Wijmo by GrapeCity sponsor

Angular 10 Released— A major release for the popular Google-led framework, though smaller in scope than usual as Angular 9 only came out in February ;-) 10 gains a new date range picker, optional stricter settings, and an upgrade to TypeScript 3.9.

Stephen Fluin (Google)

What's Coming in TypeScript 4?— The first beta of TypeScript 4 is due any moment with a final release due in August. New bits and pieces include variadic tuple types, labelled tuples, short-cut assignment operators (e.g. ||=) and more.

Tim Perry

💻 Jobs

JavaScript Developer at X-Team (Remote)— Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

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

Vettery

📚 Tutorials, Opinions and Stories

ECMAScript Proposal: Private Static Methods and Accessors in Classes— Dr. Axel takes a look at another forthcoming language feature (in this case being at stage 3 and already supported by Babel and elsewhere).

Dr. Axel Rauschmayer

npm v7 Series: Why Keep package-lock.json?— If npm v7 is going to support yarn.lock files, then why keep package-lock.json around as well? Isaac goes into some depth as to how yarn.lock works and why it doesn’t quite suit every npm use case.

Isaac Z. Schlueter

How to Dynamically Get All CSS Custom Properties on a Page— Some fun DOM and stylesheet wrangling on display here.

Tyler Gaw

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

Getting Started with Oak for Building HTTP Services in Deno— A comprehensive Oak with Deno tutorial for beginners (which, I guess, we all are when it comes to Deno). Oak is essentially the most popular option for building HTTP-based apps in Deno right now.

Robin Wieruch

Understanding Generators in JavaScript— Generator functions can be paused and resumed and yield multiple values over time and were introduced in ES6/ES2015.

Tania Rascia

Build a CRUD App with Vue.js, Spring Boot, and Kotlin— It’s a fact of life that not everyone is building apps with JavaScript at every level of the stack. Sometimes.. people use Java too 🤫

Andrew Hughes

▶  Creating a Basic Implemention of 'Subway Surfers'— No modules, webpack or such-like here.. just exploring the joy of throwing a game mechanic together quickly using rough and ready JavaScript. Love it.

Shawn Beaton

Rubber Duck Debugging for JavaScript Developers— When you’re stuck with something, why not talk to a rubber duck?

Valeri Karpov

🔧 Code & Tools

Tabulator 4.7: An Interactive Table and Data Grid Library— Supports all major browsers and can be used with Angular, Vue, and React if you wish. 4.7 is a substantial release. Among other things is a new layout mode that resizes the table container to fit the data (example).

Oli Folkerd

Tragopan: A Minimal Dependency-Free Pan/Zoom Library— Try it out here. Claims to work faster due to use of native browser scrolling for panning (left/right/up/down) and transform/scale for zooming.

team.video

Builds Run Faster on Buildkite 🏃‍♀️— Build times <5 mins at any scale. Self-hosted agents work with all languages, source control tools & platforms.

Buildkite sponsor

React Query 2: Hooks for Fetching, Caching and Updating Async Data— React Query is well worth checking out and has extensive documentation and even its own devtools.Main repo.

Tanner Linsley

Rando.js: A Helper for Making Randomness Easier— The rando function lets you get random integers in a range, floats in a range, pick between multiple items, return a random element from an array, and more. There’s also randosequence for a more shuffle-like experience.

nastyox

jinabox.js: A Customizable Omnibox for AI Powered Searching— Designed to be used with a Jina back-end. It’s all open source, but will take some digging around to understand fully.

Jina AI

MongoDB Is Easy. Now Make It Powerful. Free Download for 30 Days.

Studio 3T sponsor

IntersectionObserver Visualizer— If you’re new to using the IntersectionObserver API, this useful interactive demo might help you comprehend it a little better.

michelle barker

Polly.js 5.0: Record, Replay, and Stub HTTP Interactions

Netflix

Vest: Effortless Validations Inspired by Testing Frameworks— If you’re used to unit testing, the syntax used here will be familiar.

Evyatar

👻 Scary Item of the Week

Checkboxland: Render 'Anything' as HTML Checkboxes— This frivolous experiment is equal parts terrifying and impressive. It’s a JS library that displays animations, text, and arbitrary data using nothing but HTML checkboxes and, to be fair, they’ve presented it really well!

Bryan Braun

#495 — July 3, 2020

Unsubscribe  |  Read on the Web

👴🏻 Just because I know you're not all as ancient as me, the subject line is a reference to an old Gershwin song🎵😄

JS Weekly

JavaScript's Creator Recommends We Call JavaScript 'JS'— In response to a lively Twitter thread this week posing the question “If you were given the chance to rename JavaScript, what would you call it?” Brendan Eich wisely suggested, nay declared, we go with JS. While there’s an aspect of fun around this whole debate, it seems a sensible idea given JS has no relation to Java at all, although it might take us a while to rebrand ;-)

Twitter

A Brief Status Update on Vue 3.0— The 18th beta of Vue 3.0 is out. Amongst other things, they’re targeting mid July for the first release candidate, then early August for the final Vue 3.0 release. You’re encouraged to start using it already though.

Evan You

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

▶  What’s New in V8 and JavaScript— A 20-minute talk from this week’s web.dev LIVE event that Google put on. The speakers cover a variety of new features and improvements to JavaScript generally as well as in V8 and Chrome.

Shu-yu Guo and Leszek Swirski (Google)

Announcing TypeScript 4.0 Beta— Last week we said the TS 4 beta was “due any moment” and last thing on a Friday was clearly the time to shine 😂 4.0 has no substantial breaking changes but there are lots of bits and pieces to play with including variadic tuple types, short-circuiting assignment operators, and editor improvements.

Daniel Rosenwasser (Microsoft)

V8 Release V8.4— The next release of V8 (due to come out in coordinate with Chrome 84) boasts improved startup time, support for weak references and finalizers (worth seeing the code examples for these advanced features), and private methods and accessors.

Camillo Bruni

💻 Jobs

JavaScript Developer at X-Team (Remote)— Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find a Job Through Vettery— Use Vettery to connect with growing tech teams at startups and Fortune 500 companies.

Vettery

📚 Tutorials, Opinions and Stories

Understanding Template Literals— I really like Tania’s tutorials as they are both straightforward and thorough. Template literals are a piece of syntax (introduced in ES6/ES2015) worth understanding if you don’t use them yet.

Tania Rascia

The !! Operator and a Misunderstanding of How JS Handles Truthy / Falsy Values— Ben Nadel has noticed developers using the double-bang (!!) operator far more often in their JavaScript code than they have to. As such, he provides a series of unnecessary examples followed by cleaner, more intuitive examples.

Ben Nadel

CascadiaJS 2020 - An Online Conf for Web Devs That’s Actually Fun 🎉— More than just a live stream, network and socialize with 1000+ fellow JS devs. Save 20% off with promo code JSWEEKLY.

CascadiaJS sponsor

▶  Low Code for the Node.js Developer with Node-RED— The project lead of Node-RED, a visual, Node-based ‘low code’ programming tool, talks about the concepts of ‘low code’ in the Node space and how Node-RED works.

Nick O Leary (IBM)

▶  The Bits And Bytes of Binary— Do you need to know the ins and outs of messing with binary in order to build a web app? No. But binary nonetheless runs the show at the low level, including in many algorithms, and this series from Low Level JavaScript covers the basics well.

Low Level JavaScript

Tips for Golfing in JavaScript— If you're thinking of entering JS1024 or otherwise want to take pleasure in crushing your JavaScript into as few bytes as possible, this collection of tips and tricks is for you. (Golfing is the art of representing an idea in as little code as possible.)

Stack Exchange

Continuous Deployment of Gatsby Apps to Heroku

CircleCI sponsor

An In-Depth Beginner's Guide to Testing React Apps— A lot of posts will say ‘in-depth’ and be 500 words long – this isn’t one of those! If you’re a beginner to testing, there’s a lot to chew on here but it stays accessible throughout.

Johannes Kettmann

Exploring the Web Speech API— One of those APIs I keep forgetting exists but with which you can do some pretty cool stuff.

James at De Voorhoede

TodoMVC Implemented Using a Game Architecture: ECS— Can you build more traditional GUIs with the Entity Component System as popular in game development? An interesting idea.

Andy Bulka

Getting Started with the Vue 3 Composition API

Joel Parks

🔧 Code & Tools

Vest: Effortless Validations Inspired by Testing Frameworks— If you’re used to unit testing, the syntax used here will be familiar.

Evyatar

React Hook Form 6.0: Simple, Extensible React Form Validation— Now with better TypeScript support, a smaller package size, and numerous refinements and improvements, RHF is certainly worth a look if you’re building or refactoring forms. GitHub repo.

Blue Bill

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

Hyperapp: (Another) Tiny Framework for Building Web Interfaces— Claims to be 2x faster than React and comes in at less than 2KB.

Jorge Bucaran

Textures.js: SVG Textures for Data Visualization— Built on top of d3.js, this lets you bring together patterns and colors in an elegant and, dare we say, old school manner.

Riccardo Scalco

emoji-picker-element: A Lightweight Emoji Picker for the Modern Web— See a live demo here. Some cool performance advantages for this: It’s a web component and it’s built on Svelte and IndexedDB.

Nolan Lawson

🎨 Creative Corner

24a2: An Ultra-Minimalist Dot Matrix-Based Game Engine— What makes this different is that it has a limited set of features so you can build a game in a few hours. Here’s an example.

James Routley

PHONK: A Creative Scripting Toolbox for Android Devices— If you’ve got any old Android devices sat around, this could be a way to have some fun with them. It’s based around JavaScript.

Victor Diaz

parallax-effect: Parallax Effect in JavaScript using Face Tracking— A lot of designers seem to love parallax effects, whereas a lot of us end users aren’t so keen. But if you’re going to do it, do it in an over the top creative way like this 😂

munrocket

#496 — July 10, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

Temporal, a Future API for Dates and Times in JavaScript— TC39 seeks your help with the future of JavaScript! They’re working on a proposal for a modern date/time API for ECMAScript/JS. Check out these examples for a feel of what the API would give us. You’re encouraged to have a play and fill out this survey.

The Temporal Champions Group on TC39

Perf Track: Tracking the Performance of Sites Using Popular JS Frameworks— Aiming to ‘track framework performance at scale’, Perf Track lets you get answers to questions like how many Vue apps use compression (and what type), how big React apps tend to be, or how many Ember apps have a good first contentful paint time.

Google Chrome Labs

How to Communicate on a Remote Team: Tools and Templates— Learn how to overcome the two biggest challenges of remote communication: understanding tone and upholding a collaboration framework.

CircleCI sponsor

Creating Tiny Desktop Apps with Tauri and Vue.js— Tauri is a toolkit (built in Rust) for building cross platform, JavaScript and CSS powered desktop apps, and the eventual app size can be pretty small (under a megabyte).

Kelvin Omereshone

Malina.js: A Front-End Compiler Inspired by Svelte— A tool similar to Svelte that pre-compiles an app (think a compile-time framework, rather than a runtime one) for better performance. See examples on the REPL. One developer created the same app with Svelte and Malina and has things to say, too.

Oleg Nechaev

💻 Jobs

Find a Job Through Vettery— Use Vettery to connect with growing tech teams at startups and Fortune 500 companies.

Vettery

JavaScript Developer at X-Team (Remote)— Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

📚 Tutorials, Opinions and Stories

A Case Study of Moving a Three.js WebXR App Off the Main Thread— You can’t argue about Surma’s dedication to Web Workers and here we get a practical demonstration of how they can help to improve performance.

Surma

Moving from TypeScript to Rust and WebAssembly— There’s not a lot to this quick writeup, but it’s interesting that this sort of move is now at least possible and it may well suit your use case too.

Nicolo Davis

Four Ways to Fetch Data in React— It’s really three ways you perhaps don’t want to fetch data, building towards a solid case for the best approach. But we like the logical progression through the alternatives.

Cory House

Breakpoints and console.log Is the Past, Time Travel Is the Future— 15x faster JavaScript debugging than with breakpoints and console.log.

Wallaby.js sponsor

Debounce Explained: How to Make Your Code Wait For Your User To Finish Typing— Debounce functions are higher-order functions that limit the rate at which another function can be run.

Juan Vega

Flattening Arrays with Array.flat()— Knowing about flat() is useful enough, but did you know you can flatten an array of any depth with .flat(Infinity)?

Samantha Ming

Barebones WebGL in 75 Lines of Code— WebGL is pretty intimidating but this boils it down to the bare essentials. And if you want to go further, I still think this thorough guide is one of the best. Of course, you may see all of the boilerplate needed and just use Three.js instead, which is fine too! 😄

Avik Das

Automated Code Reviews for JavaScript, Directly from Your Git Workflow

Codacy sponsor

▶  Learn Next.js: A Video Course— A free video course on how to build both Jamstack and SSR sites using React and Next.js. No signing up needed either.

Lee Robinson

Khan Academy's Transition to React Native— The tale of the multi-year project to move both the iOS and Android apps of the popular education platform over to using React Native.

Khan Academy

🔧 Code & Tools

shareon: Simple and Stylish 'Share Buttons'— They also boast good ethics as there’s no tracking code involved.

Nikita Karamov

Financial: A Zero-Dependency Financial Calculations Library— Based on numpy-financial but aimed at Node, Deno, and browser alike, Financial gives you functions for calculating things like future values, repayments, interest rates, etc.

Luciano Mammino

Serverless Headless CMS - OpenSource, Powered by React and Node— Scale up and down in milliseconds with your demand. Stop paying for servers and resources you are not using.

Webiny sponsor

useWebAnimations: React Hook for Flexible Web Animations API Animations— While still badged an ‘experimental technology’ by MDN, the Web Animinations API provides an approach for describing animations on DOM elements.

Welly Shen

Puppeteer 5.0 Released: The Headless Chrome Control Library— Puppeteer 4.0 was only three weeks ago but there are breaking changes here and work on making Puppeteer environment agnostic is in full flow.

Puppeteer

N3.js: Fast, Spec-Compatible, Streaming RDF Library— If you need/use RDF you’ll know, but basically it’s a format for modeling and specifying Web resources and this library works in Node and browser alike.

RDF JavaScript Libraries

🎨 Creative Corner

jsplot: A Quick Way to Plot the Results of a Function— It’s really quick and minimal but this basic Web tool does a quick plot from the results of the JavaScript you supply.

Fredrik Norén

▶  The Easiest Flappy Bird Tutorial Ever?— A 13-minute YouTube video on how to create your own Flappy Bird clone using straight up HTML, JS, and CSS. No framework, no build tools, the code isn’t perfect, but that’s not the point :-)

Shawn Beaton

#497 — July 17, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

Super Expressive: Build Regexes in (Almost) Natural Language— A library for building regular expressions (something many developers have a problem with in their native format) using an ‘almost natural language’ approach. It’s not for me but the code examples look interesting.

Francis Stokes

📊 Billboard.js 2.0: D3.js-Powered Charts Library— Billboard.js is a chart library built on top of d3.js that supports a wide variety of chart types in all modern browsers. 2.0 is a rewrite into TypeScript plus a lot of refactoring and performance improvements.

Jae Sung Park

Get a Free T-Shirt. It Doesn’t Cost Anything to Get Started— FusionAuth provides authentication, authorization, and user management for any app: deploy anywhere, integrate with anything, in minutes. Download and Install today and we'll send you a free t-shirt.

FusionAuth sponsor

Apollo Client 3.0 Released: The Full Featured GraphQL Client— Apollo Client is commonly associated with React but it can also be used with Angular or on its own. GitHub repo.

Ben Newman (Apollo)

💻 Jobs

JavaScript Developer at X-Team (Remote)— Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find a Job Through Vettery— Use Vettery to connect with growing tech teams at startups and Fortune 500 companies.

Vettery

📚 Tutorials, Opinions and Stories

What The Fork is a Closure?— A sanitized fork of a new project from React’s Dan Abramov that sets out to explain what different development concepts mean, and he has started with closures.

Dan Abramov

How To Create a GitHub Profile README— Did you know you can now create a document that’s shown on your main GitHub profile page? It’s not JavaScript specific but I imagine a lot of you would find this neat to do!

Monica Powell

How to Build Forms With React the Easy Way— Building forms with React can be frustrating. TJ VanToll suggests one way to tackle this challenge with ease. Read more.

Progress KendoReact sponsor

A Simple Explanation of Event Delegation— A useful pattern when listening for events on multiple elements using just one event handler.

Dmitri Pavlutin

Generating UUIDs at Scale on the Web— Can you trust every browser to generate globally unique identifiers at scale? Apparently yes. This sounds boring but the technicalities are more interesting than you’d initially think!

Matthieu Wipliez

Building SVG Components in React— When building responsive web apps it makes nothing but sense to use SVG as opposed to more traditional image formats. SVG stores an XML-based description of the image which can be progammatically manipulated similar to HTML. It’s tailor made to be incorporated into components.

Maciek Sakrejda

CSS Transitions in Vue.js and Nuxt.js— For when you want a little visual pizazz when data changes or is added/removed.

Timi Omoyeni

Building Strong Distributed Teams, One Pixel at a Time— Learn how eng. managers can improve teams based on three key “C” pillars: connection, communication, and collaboration.

CircleCI sponsor

Type Safe JavaScript with JSDoc— If TypeScript just isn’t your cup of tea but you see the value in types, what can you do? Remy reminds us of a popular post from 2018 with a JSDoc-based approach.

Remy Sharp

How You Might Not Need Vuex with Vue 3

Gábor Soós

🔧 Code & Tools

React Native 0.63 Released— The latest version of React Native ships with LogBox, a totally new way to monitor errors and warnings raised in development.

Mike Grabowski

Inclusive Dates: A Human-Friendly Date Picker— You can try it here. The user can type natural language phrases like “Next Friday” or “in 30 days” and the picker will move to the correct date(!)

Tommy Feldt

Hukum: Display GitHub Action Progress in the Terminal— If you’re using GitHub’s Actions CI/CD feature and want to keep a real-time eye on it, this will help. Built in Node.

abskmj

wait-on: A CLI and Node Library to Wait for Ports, Files, Sockets, etc.— For when you need to wait until files, ports, sockets, and similar resources become available (or the opposite).

Jeff Barczewski

currency.js 2.0: A Library for Handling Currencies— Built to work around floating point issues, currency.js provides a variety of useful methods and formatters for working with monetary values.

Jason Wilson

xmlbuilder2: An XML Builder Library— Convert JS objects into XML, parse and serialize XML documents, or create XML documents using chained function calls. Aimed at Node but can be used in the browser too.

Ozgur Ozcitak

Help Shape the Future of Video, Fill Out the 2020/21 Video Dev Survey

Bitmovin Inc. sponsor

vue-flux: A Responsive Image Slider with 20 Cool Transitions— See the transitions in action on the demo page. Mobile-friendly, usable via arrow keys, and includes an optional parallax component.

oscar deulos

dequal: A Tiny (305B) Utility for Check for Deep Equality

Luke Edwards

Jaxcore Bumblebee: A JavaScript Voice Application Framework— For building ‘conversational voice assistants’ (so think Alexa, Cortana, Siri, etc.)

Jaxcore Software Inc

🎨 Creative Corner

WebGazer.js: Webcam Eye Tracking in the Browser— I’m going to file this under “fun, but..” The examples are certainly neat and moderately accurate for me. A fun demo and a neat piece of work but with limited use cases, IMHO.

Brown HCI Group

#498 — July 24, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

Several New Features Promoted to Stage 4 at TC39— If you’re interested in the future of JavaScript, several features have been promoted to stage 4 which, in TC39 parlance, means they are ‘finished’ and ready for inclusion in the formal ECMAScript standard. They include:

• Promise.any and AggregateError
• Number separator support (e.g. 1_000_000)
• Weak references
• Improvements to Intl.DateTimeFormat
• ..and more, naturally 😄

Hemanth HM

Vue 3 Now in Release Candidate Stage— The final Vue 3.0 release isn’t due till sometime next month, but the API and implementation are now considered ‘stabilized’ with no new major features or breaking changes expected. There’s also a beta of the devtools with 3.0 support and a new v3 focused documentation site. Also here's some of what's new in Vue 3.

Evan You

Learn State Machines from the Creator of XState, David Khourshid— By modeling the state in your application with state machines and statecharts, you will spend less time debugging edge cases and more time modeling complex application logic in a visually clear and robust way.

Frontend Masters sponsor

Svelte 💛 TypeScript— Svelte, a popular compile-time JavaScript framework, now supports TypeScript too. Here’s how it works and how the current approach makes a previously difficult task a lot easier.

Orta Therox

V8 Version 8.5 Now in Beta— Coming soon to a Node.js near you (not to mention Chrome 85), the latest branch of the V8 JavaScript engine boasts Promise.any, String.prototype.replaceAll (no regex needed!) and support for logical assignment operators (like ||=).

Zeynep Cankara (Google)

What The Heck Is.. Memoization?— Dan Abramov is back tackling the topic of memoization– when you can optimize a function by caching results that are ‘expensive’ (in terms of time or memory) to calculate numerous times.

Dan Abramov

💻 Jobs

Senior Full-Stack Engineer to Join Growing Team (React, Node.js) - London or Remote— Build our mental health platform for psychedelic therapy. Core tech is evidence-based generative music for therapists, care seekers and physical spaces.

Wavepaths

Senior Front-End Systems Architect (Remote, Western Hemisphere)— Got experience architecting and implementing front-end systems? Join us (in this fully remote role) and help us define best-in-class experience managers, site generators, UI and conversation frameworks.

MyPlanet

One Application, Hundreds of Hiring Managers— Use Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

📚 Tutorials, Opinions and Stories

The Official Redux Essentials Tutorial.. Redux— A redevelopment of the basic Redux introduction that focuses on teaching you how to use the popular state container the right way with best practices. It’s practicality first and then digs into ‘how it works’ later on.

Redux Team

A Gentle Introduction to Webpack— No violence here, just why webpack exists, what problems it solves, and how to use it. Tyler has a good reputation as a teacher in the JavaScript space, so enjoy.

Tyler McGinnis

Eliminating Duplicate Objects from Arrays: Three Approaches

Dr. Axel Rauschmayer

Serverless Rendering with Cloudflare Workers— How to do server-side rendering ‘at the edge’ using Workers Sites, Wrangler, HTMLRewriter, and tools from the broader Workers platform.

Kabir Sikand

A Deep Dive Into V8— Dive into V8's internal functioning, compilation and garbage collection processes, single-threaded nature, and more.

AppSignal sponsor

▶  New Course: Build JavaScript Applications with Node.js— Microsoft has released a video course covering Node from the very start through to setting up a project, debugging, using VS Code, and building an Express-based API.

Microsoft

An Introduction to Stimulus.js— Released by Basecamp a year or two ago now, Stimulus is a very light library to add behavior to your HTML elements without going full-on with a framework. Commonly used in the Ruby on Rails world, but worth checking out in its own right.

Mike Rogers

Your Blog Doesn’t Need a JavaScript Framework— Perhaps controversial, but, in explaining why he chose Eleventy over Gatsby, Iain argues that developers often overcomplicate sites, adding heavy frameworks where none is needed?

Iain Bean

How to Create a Dynamic Rick and Morty Wiki Web App with Next.js— A good tutorial for getting started with Next.js and deploying to Vercel by building a fun wiki site.

Colby Fayock

A Mental Model to Think in TypeScript— If you’re new to TypeScript and struggling with how to ‘think more in types.’

TK

🔧 Code & Tools

Perfect Arrows: A Minimal Way to Draw 'Perfect' Arrows Between Points and Shapes— Here’s a live demo.

Steve Ruiz

🎸 React Guitar: A Flexible 'Guitar Neck' Component for React— You’d use this to render things like chord positions, say. But, even better, you can ‘play’ it too 😁

React Guitar

Breakpoints and console.log Is the Past, Time Travel Is the Future— 15x faster JavaScript debugging than with breakpoints and console.log.

Wallaby.js sponsor

Handsontable: A Mature Data Grid That Feels Like a Spreadsheet— Somehow it’s been six years since we linked this last, but it’s still being updated and works with Vue, React, and Angular too. The only downside is it’s dual licensed, so it’s only free for evaluation or non-commercial use. GitHub repo.

Handsoncode

🎨 Creative Corner

Over the past few years Elijah Manor has been penning a few frontend developer jokes. Now, he's converted one such joke into a comic strip using the TypeScript-powered Excalidraw web-tool. Take a look:

#499 — July 31, 2020

Unsubscribe  |  Read on the Web

This felt like a really quiet week in the JavaScript space, so I was a bit worried about finding enough cool things to include.. but we did 😄 Turns out if you scratch around a bit, there's a lot of great work going on – be sure to take a good skim through. Oh, and next week is.. ISSUE 500! 🎉

JavaScript Weekly

I Created The Exact Same App in React and Vue And..— Two years ago, the author built the same app in React and Vue to see the differences between the two. Since then, both have changed, so he’s back with a 2020 edition bringing hooks and Vue 3 into play.

Sunil Sandhu

Speculation in JavaScriptCore— A long, technical post about speculative compilation and how it makes a dynamic language like JavaScript a lot faster than it might otherwise be (or was, pre V8!) You’ll need some experience with how compilation works to get much out of this, but if you want to know how modern JavaScript VMs can run JavaScript so quickly, it’s an epic resource.

Filip Pizlo (WebKit)

Build Full-Stack Serverless Web Apps with This JS Framework— If you are looking to build full-stack serverless web apps, then Webiny is the perfect solution for you. It's open-source, it uses React, Node, GraphQL and TypeScript. It deploys your apps to your AWS cloud and runs on top of Lambda functions.

Webiny sponsor

Next.js 9.5 Released— Vercel CEO Guillermo Rauch is excited about the new release: incremental static regeneration, custom base paths, rewrites and redirects, webpack 5 support, and much more.

Next.js

tinykeys: A Tiny, Modern Library for Keybindings— Has a reallly simple API and the page includes live use of some specific bindings that you can try out.

Jamie Kyle

💻 Jobs

Engineering Manager Frontend (f/m/x)— Grow and work with our frontend team in an amazing environment, providing personal educational budget and 30d of vacation.

HOMEDAY

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

CKEDITOR

One Application, Hundreds of Hiring Managers— Use Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

📚 Tutorials, Opinions and Stories

Natively Formatting JavaScript Dates and Times— Using Date.prototype.toLocaleDateString() and related methods. There's a handy graphic that works as a sort of cheat sheet too.

Elijah Manor

What The... is 'Composition'?— Dan is back with another entry in his JavaScript glossary digging into the art of bringing numerous things together to make other or bigger things.

Dan Abramov

This Is How Top Engineering Teams Build and Maintain Design Systems— A practical deep dive into building, scaling and maintaining high-quality design systems - for software engineers.

Frantz Kati sponsor

Convert an Array into an Object in JavaScript— Arrays are already objects of course, but..

Mastering JS

Simulating Object Collisions on a Canvas— A gentle post walking through what’s involved creating a basic physics simulation using JavaScript and HTML canvas.

Josh Bradley

What 'Polymorphism' Means in JavaScript

Zell Liew

Getting Started with OpenTelemetry in Node.js

Lightstep sponsor

My Favorite JavaScript Tips and Tricks— A real grab bag of bits and pieces.

Tapas Adhikary

🔧 Code & Tools

Ink 3: Build JavaScript-Powered CLI Apps with React— If you love the terminal and you love React, you’ll love Ink– it lets you get the same component-based UI approach but at the command line.

Vadim Demedes

moment-guess: A Utility Package for Guessing a Date's Format— Try it right now with npx like so: npx moment-guess --date 'Fri, January 30th 2020, 10:00 AM'– the output is then suitable to use with Moment.js.

Apoorv Mishra

Get Rid of BUGS with the BEST JavaScript Code Analyzer – DeepCode— DeepCode is an AI-based Sematic Code Analysis. Scan your code in seconds and get the best coverage on the market - Free.

DeepCode AI sponsor

Release: Generate Changelogs with a Single Command— When run, this command line interface automatically generates a new GitHub Release and populates it with the changes (commits) made since the last release.

Vercel

Waypoint: A VS Code Extension for Navigating JS Codebases— Makes navigating functions, classes, variables, etc. in your JavaScript codebases easier via fast search, filters, bookmarking, importing, and more. GitHub repo.

Raathi Kugarajan

Aeon: A Lightweight Date Picker Built with Web Components

Chris Haynes

🎨 Creative Corner

macintosh.js: A Virtual Macintosh Running in Electron— A working (mostly) virtual machine, emulating a 1991 Macintosh Quadra 900 with System 8, all running in Electron.

Felix Rieseberg

NSFW-Filter: A Browser Extension That Blocks NSFW Images Locally— Regardless of your stance on the matter, what’s interesting here is that TensorFlow.js is being used to locally screen out ‘NSFW’ images without any data being sent to a third party. How reliable that is remains to be seen.

Navendu Pottekkat

#500 — August 7, 2020

Unsubscribe  |  Read on the Web

It's issue 500! Thanks for your support over the years, we're not too far away from our 10th anniversary which we'll cover separately. But do I think issue 512 will be even cooler to celebrate? Yes.. 🤓

JavaScript Weekly

1Keys: How I Made a Piano in Only 1KB of JavaScript— A month ago we promoted JS1024, a contest to build the coolest thing possible in just 1024 bytes of JavaScript. It’s well worth looking at all the winners/results, but one winner has put together a fantastic writeup of how he went about the task. If this genius seems familiar, he also did a writeup about implementing a 3D racing game in 2KB of JavaScript recently, and more besides.

Killed By A Pixel

Announcing the New TypeScript Website— The official TypeScript site at typescriptlang.org is looking fresh. Learn about the updates here or just go and enjoy it for yourself.

Orta Therox (Microsoft)

Get a Free T-Shirt. It Doesn’t Cost Anything to Get Started— FusionAuth provides authentication, authorization, and user management for any app: deploy anywhere, integrate with anything, in minutes. Download and install today and we'll send you a free t-shirt.

FusionAuth sponsor

A Roadmap for the Future of Angular— The Angular project now has an official roadmap outlining what they’re looking to bring to future versions of the popular framework.

Jules Kremer (Google)

You May Finally Use JSHint for 'Evil'(!)— JSHint is a long standing tool for detecting errors and problems in JavaScript code (it inspired ESLint). A curious feature of JSHint’s license is that the tool couldn’t be used for “evil” – this has now changed with a switch to the MIT license(!)

Mike Pennisi

💻 Jobs

Backend Engineering Position in Beautiful Norway— Passion for building fast and globally scalable eCommerce APIs with GraphQL using Node.js? 😎 Join our engineering team - remote friendly.

Crystallize

JavaScript Developer at X-Team (Remote)— Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

One Application, Hundreds of Hiring Managers— Use Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

📚 Tutorials, Opinions and Stories

How Different Versions of Your Site Can Be 'Running' At The Same Time— You might think that the version of your site or app that’s ‘live’ and in production is the version everyone’s using.. but it’s not necessarily the case and you need to be prepared.

Jake Archibald

Let's Debug a Node Application— A brief, high level look at some ways to step beyond the console.log approach, by using Node Inspect, ndb, llnode, or other modules.

Julián Duque (Heroku)

3 Common Mistakes When Using Promises— Spoiler: Wrapping everything in a Promise constructor, consecutive vs parallel thens, and executing promises immediately after creation.

Mateusz Podlasin

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

Matching Accented Letters in Regular Expressions— A quick tip for when a range like A-z doesn’t quite work..

David Walsh

Setting Up Redux For Use in a Real-World Application— For state management there’s Redux in theory and then there is Redux in practice. This is the tutorial you need to get over the hump from one to the other.

Jerry Navi

Reviewing The 'Worst Piece of Code Ever'— I don’t think it really is but it’s not great and it’s allegedly in production. Hopefully you will read this for entertainment purposes only.

Michele Riva

Get an Instant GraphQL API with Hasura to Build Fullstack Apps, Fast

Hasura sponsor

The 10 Best Angular Tips Selected by The Community— Well, the Angular tips by one person that were liked the most on Twitter, at least :-)

Roman Sedov

Node Modules at 'War': Why CommonJS and ES Modules Can’t Get Along— No, it’s not really a ‘war’, but it’s a worthwhile reflection on the differences between the two module types from the Node perspective.

Dan Fabulich

Four Ways to Combine Strings in JavaScript

Samantha Ming

🔧 Code & Tools

GPU.js: GPU Accelerated JavaScript— It’s been a while since we linked to this project but it continues to get frequent updates. It’s compiles JavaScript functions into shader language so they can run on GPUs (via WebGL or HeadlessGL). This has a lot of use cases (and there are plenty of demos here) but if you need to do lots of math in parallel.. you need to check this out.

gpu.js Team

Moveable: A Library to Make Elements Easier to Manipulate— Add moving, dragging, resizing, and rotation functionality to elements with this. GitHub repo.

Daybrush (Younkue Choi)

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

react-digraph 7.0: A Library for Creating Directed Graph Editors— Create a directed graph editor without implementing SVG drawing or event handling logic yourself.

Uber Open Source

JSchallenger: Learn JavaScript by Solving Coding Exercises— I like that the home page shows the “most failed” challenges, which can give you an idea of the kind of thing other developers are having trouble with.

Erik Kückelheim

JSON Schema Store: Schemas for All Commonly Known JSON File Formats

SchemaStore

WordSafety: Check a Name for Unwanted Meanings in Other Languages— A neat idea. Rather than name your next project something that offends half of a continent, run it through this to pick up any glaring issues.

Pauli Olavi Ojala

#501 — August 14, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

Rome: Unifying The Frontend Development Toolchain— We first casually mentioned this in-beta tool, dubbed the “spiritual successor of Babel”, back in April, but things have come a long way since then. Rome aims to replace Babel, ESLint, Webpack, Prettier, Jest, and more, to ostensibly simplify the frontend workflow. We’re all for it if it works. Here’s the introductory blog post.

Sebastian McKenzie

React 17.0 Release Candidate: No New Features but Still Lots That's Interesting— When a new major release comes along after two-and-a-half years the absence of new features is going to disappoint many. However, the ability to incrementally upgrade React sites both now and in the future is welcome news. There's still lots about which to be excited, so definitely have a skim at the least.

Dan Abramov and Rachel Nabors

Quickly Find Front-End Issues Like JavaScript or Network Errors— 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

Tabris.js 3.6 Released with Support for Redux, PDFs and More— Tabris is a toolkit for building native mobile apps with JavaScript (including iOS apps without having a Mac). 3.6 adds support for building apps based on Redux.

Tim Buschtoens

💻 Jobs

Full Stack Developer @ Huckberry (Columbus, Ohio)— We're striving to build the most beloved men's retail site on the planet, with React / Redux / Ruby on Rails.

Huckberry

Find a Job Through Vettery— Use Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

📚 Tutorials, Opinions and Stories

Natively Formatting JavaScript Numbers— Leverage native formatting capabilities such as locale, currency, units, compact mode, etc…

Elijah Manor

▶  A 30 Minute Chat with Allen Wirfs-Brock— Allen is a true JavaScript expert and has a wealth of programming experience dating from the 60s as well as through working on the ECMAScript spec.

TC39er Podcast podcast

Become a Node.js Cloud Developer - Free Book and Video Course— Learn how to deploy, manage, secure and ship Node.js applications like a pro with this practical, hands-on course.

Kati Frantz sponsor

Supercharging <input type=number> with JavaScript— The number input type provides a nice control for working with numbers on most platforms, with min and max bounds, stepping up and down, etc. But what if you want to add more power to it with custom stepping types and controls? Kilian has a go at this here.

Kilian Valkhof

Building Single Page Applications Using Rust— WebAssembly continues to throw up all sorts of interesting options for the future development of Web applications. This isn't about JavaScript at all, but shows how Rust could perhaps act as, conceptually, a successor to it (or things like Elm) in some domains.

Sheshbabu Chinnakonda

Using Node Modules in Deno— Ada calls this ‘a bad practice’ but notes that ‘sometimes there is no alternative’ especially considering how huge the npm ecosystem is compared to Deno’s nascent one.

Ada Rose Cannon

Building a Programming Language in JavaScript From Scratch

Dmitry Soshnikov Education sponsor

How I Became A Senior JS Developer with Personal Projects— An inspiring tale. “One of the best decisions in my developer career was to go beyond just using tools, I decided to create them.”

Afonso Pacifer

Using ESLint to Improve Your App’s Performance

Pawel Wolak

🔧 Code & Tools

Mock Service Worker: API Mocking Library for Browser and Node— Interestingly uses the Service Worker API to intercept requests which you can then mock. Capture outgoing requests using an Express-like routing syntax, complete with parameters, wildcards, and regexes. GitHub repo.

Artem Zakharchenko

Deno 1.3.0 Released— Deno 1.0 came out in May and work has continued on the Rust and V8-based JavaScript/TypeScript runtime. We’re still publishing Deno Weekly too – here’s the latest issue.

Deno Land

omg-curry: A Feature Complete JavaScript Currying Library

Debdut Karmakar

Vest: Validations Library Inspired by Testing Frameworks— If you’re used to unit testing, the syntax will be familiar. We linked this quite recently but the author has added a variety of new features since.

Evyatar

AppSignal Automatically Instruments Apollo for Node.js Applications— With AppSignal’s automatic instrumentation, you get to debug GraphQL queries that seem to take a long time with ease.

AppSignal sponsor

React Sortable Tree: Maintain Your Trees Intuitively— Dragging-and-dropping is what many users expect of apps these days. Why not give them what they want? The gif demo illlustrates the promise of this hierarchy maintenance component.

Frontend Collective

crypto-hash: A Hashing Module Using the Native Crypto API in Node and Browser— Get the same hashing API in both environments. Uses the crypto module on Node and window.crypto in the browser.

Sindre Sorhus

babel-plugin-native-error-extend: Babel Plugin for Native Error Extending

Ivan Nikolić