#502 — August 21, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

TypeScript 4.0 Released— The latest major version of TypeScript, the increasingly popular superset of JavaScript that adds optional static typing, is here. No major breaking changes, but a laundry list of tweaks and smaller new features, including:

• variadic tuple types
• editor and editor integration improvements
• labeled tuple elements
• short circuiting assignment operators (e.g. a ||= b)
• the new TypeScript web site!

Daniel Rosenwasser and the TypeScript Team

Metaprogramming with Proxies— Dr. Axel, the author of Deep JavaScript, keeps releasing extra chapters of his book for free online, and this one goes as deep into the topic of object proxies as you could ever hope. Do you need to know all of this? No. Am I glad the knowledge exists if I ever need to know? Yes!

Dr. Axel Rauschmayer

The Definitive Introduction to Svelte with Rich Harris— Learn how the Svelte framework works, write svelte components, and take a tour through the entire Svelte API in this detailed video course.

Frontend Masters sponsor

npm v7 Now in Beta— Isaac is back bearing good news: there’s a new major beta version of npm. Run npm i -g npm@next-7 to try it now, but he notes it’s “a big one” and there are rough edges and breaking changes ahead. Trouble-free improvements are promised for most users, but this post digs into the changes.

Isaac Z. Schlueter

ts-migrate: A Tool for Migrating to TypeScript at Scale— Learn about how Airbnb used codemods to accelerate migration from JavaScript to TypeScript and how their new ts-migrate tooling (GitHub repo) can help with the process.

Sergii Rudenko

💻 Jobs

React JS Developer (Remote)— 13 million people and counting plan outdoor hiking and cycling routes with our apps. If you are smart and talented React Dev, join us to inspire more people to explore more of the great outdoors.

Komoot

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

Get Tech Interviews This Week— Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

📚 Tutorials, Opinions and Stories

▶  Let's Build a Multiplayer Battleship Game— A three part screencast series (by three different developers) that really digs deep into building a complete multiplayer game on both the front and back end. You’d need to commit some hours to getting through all of this, but it’s a neat collaboration and might inspire you to take part in Js13kGames!

Ania Kubów, Jesse Hall, and Kyle Cook

Build a Confirmation Modal in React with State Machines— React confirmation modals can be tricky, with useEffect and keeping track of shown/hidden, loading/not, and errors. State machines make it somewhat easier.

Dave Ceddia

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

Modern Ways of End-to-End Testing with Cypress— v5.0 of the popular testing system has just come out but this post gently demonstrates what end-to-end testing is, how it relates to other forms of testing, and how to write your first Cypress powered tests for a web app.

Zubair Ahmed

Understanding Destructuring, Rest Parameters, and Spread Syntax— Tania’s tutorial on understanding generators was super popular with you, so you might like this similarly deep but accessible dive into other handy features ES6/ES2015 brought us.

Tania Rascia

▶  An Overview of Higher Order Functions in JavaScript— A 10 minute screencast covering one aspect of functional programming in JavaScript.

Brodey Newman

An In-Depth Explanation of Promise.all and Comparison With Promise.allSettled— Covers both in a very gentle way – aimed at beginners.

Mateusz Podlasin

Decreasing Bundle Sizes with ES Modules in Angular 10

Wijmo, by GrapeCity, Inc. sponsor

▶  React 17’s Best New Feature: Gradual Upgrades— React 17 boasts‘no new features’, but this isn’t entirely true – what’s new is just more subtle and will still benefit you.

Harry Wolff

Six Angular Security Best Practices

Liran Tal and Natalia Venditto

🔧 Code & Tools

Cypress 5.0: Fast and Reliable Testing for Anything That Runs in a Browser— v5.0 adds support for test retries and requires Node 10+. There’s also a migration guide if you’re coming from an earlier version.

Cypress.io

Embla: An Extensible Low Level Carousel for the Web— We first came across this over a year ago, but this bare-bones carousel option is still seeing updates and remains a decent dependency-free option. Demos here.

David Cetinkaya

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

BootBot: A Facebook Messenger Bot Framework— Want to create bots that work on Facebook Messenger? BootBot gives you a modular foundation, the ability to subscribe to message events, helpers to send all supported message types, etc. See some sample code to see how easy it is.

Maxi Ferreira

Elder.js: A Svelte-Focused Framework and Static Site Generator— An opinionated static site generator and web framework for Svelte built with SEO in mind.

Elder.js

ImmortalDB: A Resilient Key-Value Store for the Browser— Data is redundantly stored in numerous places like in cookies, IndexedDB, LocalStorage, and SessionStorage, and self heals as needed. v1.1 just came out.

Ansgar Grunseid

#503 — August 28, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

ztext.js: A 3D Typography Effect for the Web— While it initially has a bit of a “WordArt” feel to it, this library actually adds a pretty neat effect to any text you can provide. This is also a good example of a project homepage, complete with demos and example code.

Bennett Feely

D3 6.0: The Data-Driven Document Library— The popular data visualization library (homepage) takes a step forward by switching out a few internal dependencies for better alternatives, adopts ES2015 (a.k.a. ES6) internally, and now passes events directly to listeners. Full list of changes. There’s also a 5.x to 6.0 migration guide for existing users.

Mike Bostock

Scout APM - A Developer’s Best Friend— Scout’s intuitive UI helps you quickly track down issues so you can get back to building your product. Rest easy knowing that Scout is tracking your app’s performance and hunting down small issues before they become large issues. Get started for free.

Scout APM sponsor

Danfo.js: A Pandas-like Library for JavaScript— An introduction to a new library (homepage) that provides high-performance, intuitive, and easy-to-use data structures for manipulating and processing structured data following a similar approach to Python’s Pandas library. GitHub repo.

Rising Odegua (Tensorflow)

Electron 10.0.0 Released— The popular cross-platform desktop app development framework reaches a big milestone, though despite hitting double digits, this isn’t really a feature packed released but more an evolution of an already winning formula. v10 steps up to Chromium 85, Node 12.1.3, and V8 8.5.

Electron Team

Debug Visualizer 2.0: Visualize Data Structures Live in VS Code— We first mentioned this a few months ago but it’s seen a lot of work and a v2.0 release since then. It provides rich visualizations of watched values and can be used to visualize ASTs, results tables, graphs, and more. VS Marketplace link.

Henning Dieterichs

💻 Jobs

Sr. Engineer @ Dutchie, Remote— Dutchie is the world's largest and fastest growing cannabis marketplace. Backed by Howard Schultz, Thrive, Gron & Casa Verde Capital.

DUTCHIE

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

Vettery

📚 Tutorials, Opinions and Stories

Minimal React: Getting Started with the Frontend Library— Dr. Axel explains how to get started with React while using as few libraries as possible, including his state management approach.

Dr. Axel Rauschmayer

A Leap of Faith: Committing to Open Source— Babel maintainer Henry Zhu talks about how he left his role at Adobe to become a full-time open source maintainer, touching upon his faith, the humanity of such a role, and the finances of making it a reality.

The ReadME Project (GitHub)

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

Buildkite sponsor

The Headless: Guides to Learning Puppeteer and Playwright— Puppeteer and Playwright are both fantastic high level browser control APIs you can use from Node, whether for testing, automating actions on the Web, scraping, or more. Code examples are always useful when working with such tools and these guides help a lot in this regard.

Checkly

How To Build Your Own Comment System Using Firebase— Runs through how to add a comments section to your blog with Firebase, while learning the basics of Firebase along the way.

Aman Thakur

A Guide to Six Commonly Used React Component Libraries

Max Rozen

Don't Trust Default Timeouts— “Modern applications don’t crash; they hang. One of the main reasons for it is the assumption that the network is reliable. It isn’t.”

Roberto Vitillo

Guide: Get Started with OpenTelemetry in Node.js

Lightstep sponsor

Deno Built-in Tools: An Overview and Usage Guide

Craig Buckler

How I Contributed to Angular Components— A developer shares his experience as an Angular Component contributor.

Milko Venkov

🔧 Code & Tools

fastest-levenshtein: Performance Oriented Levenshtein Distance Implementation— Levenshtein distance is a metric for measuring the differences between two strings (usually). This claims to be the fastest JS implementation, but we’ll let benchmarks be the judge of that :-)

ka-weihe

Yarn 2.2 (The Package Manager and npm Alternative) Released— As well as being smaller and faster, a dedupe command has been added to deduplicate dependencies with overlapping ranges.

Maël Nison

Light Date ⏰: Fast and Lightweight Date Formatting for Node and Browser— Comes in at 157 bytes, is well-tested, compliant with Unicode standards on dates, and written in TypeScript.

Antoni Kepinski

Barebackups: Super-Simple Database Backups— We automatically backup your databases on a schedule. You can use our storage or bring your own S3 account for unlimited backup storage.

Barebackups sponsor

Carbonium: A 1KB Library for Easy DOM Manipulation— Edwin submitted this himself, so I’ll let him explain it in his own words: “It’s for people who don’t want to use a JavaScript framework, but want more than native DOM. It might remind you of jQuery, but this library is only around one kilobyte and only supports native DOM functionality.”

Edwin Martin

DNJS: A JavaScript Subset for Configuration Languages— You might think that JSON can already work as a configuration language but this goes a step further by allowing various other JavaScript features in order to be more dynamic. CUE and Dhall are other compelling options in this space.

Oliver Russell

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

Adam Shaw

file-type: Detect The File Type of a Buffer, Uint8Array, or ArrayBuffer— For example, give it the raw data from a PNG file, and it’ll tell you it’s a PNG file. Usable from both Node and browser.

Sindre Sorhus

React-PDF: Display PDFs in a React App As Easily As If They Were Images

Wojciech Maj

Meteor 1.11 Released

Filipe Névola

🕰 ICYMI(Some older stuff that's worth checking out...)

• Need to get a better understanding of arrow functions? This article from Tania Rascia will help.
• Sure, strictly speaking a string in JavaScript is a sequence of UTF-16 code units... but there's more to it.
• Zara Cooper explains how to take advantage of schematics in Angular Material and ng2-charts to substantially reduce the time and work that goes into building a dashboard
• In this intro to memoizaition Hicham Benjelloun shares how you can optimize a function (by avoiding computing the same things several times).

#504 — September 4, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

Underscore.js 1.11.0: The Long Standing Functional Helper Library Goes Modular— “Underscore!?” I hear some of our longer serving readings exclaiming. Yes, it’s still around, still under active development, and still a neat project at a mere 11 years old. As of v1.11.0 every function is now in a separate module which brings treeshaking opportunities to all, but there’s also a monolithic bundle in ES module format for those who prefer that. This article goes into a lot more depth about the new modular aspects.

Jeremy Ashkenas

Mastering the Hard Parts of JavaScript— A currently 17-part blog post series written by someone taking Frontend Masters’ JavaScript: The Hard Partscourse and reflecting on the exercises that have helped them learn about callbacks, prototypes, closures, and more.

Ryan Ameri

FusionAuth Now Offers Breached Password Detection and LDAP— FusionAuth is a complete identity and access management tool that saves your team time and resources. Implement complex standards like OAuth, OpenID Connect, and SAML and build out additional login features to meet compliance requirements.

FusionAuth sponsor

How Browsers May Throttle requestAnimationFrame— requestAnimationFrame is a browser API that allows code execution to be triggered before the next available frame on the device display, but it’s not a guarantee and it can be throttled. This post looks at when and why.

Matt Perry

Brahmos: Think React, But Without the VDOM— An intriguing user interface library that supports the modern React API and native templates but with no VDOM.

Brahmos

NativeScript 7.0: Create Native iOS and Android Apps with JS— A signficant step forward for the framework by aligning with modern JS standards and bringing broad consistency across the whole stack. Supports Angular, Vue, and you can even use TypeScript if you prefer.

NativeScript

💻 Jobs

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

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— Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

📚 Tutorials, Opinions and Stories

Designing a JavaScript Plugin System— jQuery has plugins. Gatsby, Eleventy, and Vue do, too. Plugins are a common way to extend the functionality of other tools and libraries and you can roll your own plugin approach too.

Bryan Braun

▶  Making WAVs: Understanding, Parsing, and Creating Wave Files— If you’ve not watched any of the Low Level JavaScript videos yet, you’re missing a treat. But this is a good place to start, particularly if the topic of working with a data format at a low level appeals to you.

Low Level JavaScript

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

The New Logical Assignment Operators in JavaScript— Logical assignment operators combine logical operators (e.g. ||) and assignment expressions. They're currently at stage 4.

Hemanth HM

Eight Methods to Search Through JavaScript Arrays

Joel Thoms

TypeScript 4.0: What I’m Most Excited About— Fernando seems particularly enthused about the latest version of TypeScript!

Fernando Doglio

Machine Learning for JavaScript Devs in 10 Minutes— Covers the absolute basics but puts you in a position to move on elsewhere.

Allan Chua

How to Refactor a Shopify Site for JavaScript Performance

Shopify Partners sponsor

'TypeScript is Weakening the JavaScript Ecosystem'— Controversial opinion alert, but we need to balance out the TypeScript love sometime.

Tim Daubenschütz

▶  Why I’m Using Next.js in 2020— Lee makes the bold claim that he thinks “the future of React is actually Next.js”.

Lee Robinson

Building a Component Library with React and Emotion

Ademola Adegbuyi

Tackling TypeScript: Upgrading from JavaScript— You’ll know Dr. Axel from Deep JavaScript and JavaScript for Impatient Programmers.. well now he’s tackling TypeScript and you can read the first 11 chapters online.

Dr. Axel Rauschmayer

Introducing Modular Underscore— Just in case you missed it in the top feature of this issue ;-)

Julian Gonggrijp

🔧 Code & Tools

CindyJS: A Framework to Create Interactive Math Content for the Web— For visualizing and playing with mathematical concepts with things like mass, springs, fields, trees, etc. Lots of live examples here. The optics simulation is quite neat to play with.

CindyJS Team

Print.js: An Improved Way to Print From Your Apps and Pages— Let’s say you have a PDF file that would be better to print than the current Web page.. Print.js makes it easy to add a button to a page so users can print that PDF directly. You can also print specific elements off of the current page.

Crabbly

AppSignal Is All About Automatic Instrumentation and Ease of Use— AppSignal provides you with automatic instrumentation for Apollo, PostgreSQL, Redis, and Next.js. Try us out for free.

AppSignal sponsor

Volt: A Bootstrap 5 Admin Dashboard Using Only Vanilla JS— See a live preview here. Includes 11 example pages, 100+ components, and some plugins with no dependencies.

Themesberg

Stencil 2.0: A Web Component Compiler for Building Reusable UI Components— Stencil is a toolchain for building reusable, scalable design systems. And while this is version 2.0, there are few breaking changes.

Ionic

NgRx 10 Released: Reactive State for Angular

ngrx

#505 — September 11, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

A New Proposal for Decorators for JavaScript Classes— Currently at stage 2 in TC39’s process and due to be discussed in more depth this month, decorators provide a way to extend methods and other ‘syntax forms’ by wrapping them with other functionality. Note that this proposal differs from the decorators proposed to TC39 in 2018, that Babel 7 supports, and that inspired ‘experimental’ decorators in TypeScript.

TC39

▶  'You Really Don't Need All That JavaScript, I Promise'— If you have twenty minutes, you might enjoy this. Stuart, a long time Web standards expert, explains why we shouldn’t rely on JavaScript as much as we do and why we shouldn’t reach for a JS framework as the first, last, and only tool we use.

Stuart Langridge

New Course: 🐧 Complete Intro to Linux and the Command-Line— Gain powerful command-line skills, learn to use Ubuntu, quit VIM, handle package management, and write your own shell scripts.

Frontend Masters sponsor

Playwright 1.4: Fast and Reliable Cross-Browser Testing— Despite being 1.4, this is a pretty big release for the Puppeteer alternative. It now includes a CLI playwright-cli with which you can record user interactions and generate Playwright scripts, generate page screenshots, and more. Plus there’s experimental support for recording videos of what your scripts do with the browser.

Microsoft

JavaScript for Data Science: A Book— A book available both commercially and to read online, aimed not specifically at JavaScript developers (as it provides a neat introduction to JS in its own right) but at anyone looking to use JavaScript as a bit of a ‘Swiss Army knife’ for working with datasets. This is one of those great resources you’re likely to pass on to someone who really needs it.

Gans, Hodges and Wilson

💻 Jobs

Sr. Engineer @ Dutchie, Remote— Dutchie is the world's largest and fastest growing cannabis marketplace. Backed by Howard Schultz, Thrive, Gron & Casa Verde Capital.

DUTCHIE

Sr. Engineer (TypeScript) at Brightflow AI— We’re bringing easy, automated cash flow forecasting tools and financial insights to small and mid-sized businesses.

Brightflow AI

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

Vettery

📚 Tutorials, Opinions and Stories

Rendering React on the Edge with Flareact and Cloudflare Workers— Josh works at Vox Media, one of the Web’s biggest publishers (think The Verge) and rendering pages quickly is important for them given they sell ads. Here, he introduces Flareact, an edge-rendered React framework built for Cloudflare Workers.

Josh Larson

Sending Data From an HTML Form to a Google Sheet— By going via AWS Lambda and SQS. BTW, if serverless use cases interest you, we have a serverless newsletter for that 😁

Levi Nunnink

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

Testing an HTML Canvas with Cypress— An example of setting up basic visual regression testing with Cypress.

Valentino Gagliardi

Creating Extensions for Visual Studio Code: An Introduction— If you want to extend one of the most popular editors out there.. (Note: This tutorial uses TypeScript for the heavy lifting.)

Ganesan Rengasamy

How cdnjs Migrated to Serverless with Workers KV— cdnjs is a free CDN service that hosts almost 4,000 JavaScript libraries. Cloudflare provides the CDN services, but now it’s been remodelled to using their serverless Workers platform and Workers KV key-value data store – here’s the full story.

Tyler Caslin (Cloudflare)

A Practical Guide to the Web Cryptography API

David R. Myers

Raygun’s Guide to Debugging JavaScript in Major Browsers. Read It Here.

Raygun sponsor

Symbolic Computation in JavaScript with Math.js— Math.js is an extensive math library that can parse expressions, deal with things like complex numbers, matrices, etc. This post is really just a showcase of Klipse, a plugin for embedding interactive code snippets into blog posts, but we dig it.

Yehonathan Sharvit

Basic Procedural Texture Generation with texgen.js— Like the post above, this is really just showing off Klipse, but in a more visual way.

Yehonathan Sharvit

Learning JavaScript By Building a Snake Game— You know I like a straightforward ‘from scratch’ tutorial that gets to the core of the matter without lots of extraneous tooling.. and this ticks that box 😄

Souparno Paul

🔧 Code & Tools

Tooltip Sequence: A Simple Step by Step Tooltip Helper for Any Site— Another option, this one minimal, to add a ‘guided tour’ set of tooltips to a website or app, to point out features. Demo here.

Sooraj S Nair

Cropper.js: An Image Cropping Control— Now 5 years old but still seeing active development and available in an ES module variant. GitHub repo.

Fengyuan Chen

Try the Fastest, Most Secure Way to Test and Build Software Today 🚀— Buildkite is as fast and enjoyable to use at 500 developers as it is at 10. Self-hosted agents work with all languages.

Buildkite sponsor

edit-in-place: A Flexible Edit-in-Place Library for Angular— Try it here to check out the variety of ways you can enable this functionality.

netanel basal

vanilla-colorful: A Tiny Color Picker for Modern Web Apps— See a demo here. It’s built as a ‘custom element’ with TypeScript, framework-agnostic (indeed it’s a port of react-colorful to vanilla custom elements), no dependencies, and mobile friendly.

Serhii Kulykov

Tweakpane: A Compact GUI for Fine-Tuning Parameters and Monitoring Values— I love the interactive nature of the homepage's demo. GitHub repo.

Hiroki Kokubun

#506 — September 18, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

Vue 3.0 'One Piece' Released— Vue.js is a highly popular framework for building UIs with JavaScript, and a common alternative to things like React or Angular. Vue 3.0 has been in the pipeline for quite some time and has gone through a *lot* of beta and RC releases, but 3.0 is finally here with a new composition API, Teleport, and more. If you're coming from an earlier version of Vue, check out the migration guide. You can also watch Evan's Vue.js Amsterdam keynote where he just announced the release.

Vue.js Team

Moment.js: It's Done, Jim, But Now As We Know It— Moment.js is a hugely popular date and time manipulation library. People often find reasons not to use it, though, such as its size in app bundles, but the creators want to keep it as it is, not add new features, and keep the project alive but in a ‘done’ state.

Moment.js Team

When the Bits Hit the Fan: AppSignal— Deploys can go bad. That's when you need clear and focused insights. Stop logging into five different tools to try and connect the dots. AppSignal provides insights into errors, performance, servers and more - all in one clear and easy interface.

AppSignal sponsor

Understanding the Event Loop, Callbacks, Promises, and async/await— This isn’t new ground, but Tania always does a great job of explaining concepts from the ground up.

Tania Rascia

Node.js September 2020 Security Releases— New versions of all supported release lines are out to fix three security issues, so pick up Node 10.22.1, 12.18.4 or 14.11.0 today.

Michael Dawson

Deno 1.4 Released— Deno is a modern, security focused V8-based runtime for JS and TypeScript that hit the big 1.0 recently, but features continue to get added. In 1.4, we get support for a WebSocket API (which you can use from Deno just like you would in a browser), automatic restarts on file changes, integrated test coverage support, and more.

Bartek Iwańczuk, Ryan Dahl, and Luca Casonato

💻 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 Your Next Job Through Vettery— Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

📚 Tutorials, Opinions and Stories

Inspecting Just-in-Time Compiled JavaScript— Warning: Very technical!jsshell (js) is a CLI interactive prompt for Firefox’s JS runtime and you can now coerce it into showing you the results of JIT compilation.

Tom Ritter (Mozilla)

Rewriting Facebook's 'Recoil' React Library From Scratch in 100 Lines— Recoil is a state management library for React being built by a team at Facebook (though not the React team itself).

Bennett Hardwick

Jest Has Its Pros and Cons. There's a Way to Run It with No Cons— Wallaby runs your JavaScript and TypeScript tests immediately as you type, with results in your editor right next to your code.

Wallaby.js sponsor

From Rust to TypeScript— Alan really likes Rust, so he’s been looking at how to take some of its approaches and best practices and introduce them into his TypeScript programming.

Alan Darmasaputra

Why Next.js is My Ultimate Choice over Gatsby, Gridsome, and Nuxt— More detailed and balanced in its comparisons than the title may imply.

Ondrej Polesny

How I Built a Serverless Recipe App with FaunaDB and Vue.js— If you tend to turn to Express.js and a more traditional database for building CRUD apps, this post will present an interesting alternative approach to you.

Tom Doe

🤡  Misusing The TypeScript Type Checker As A Spell Checker— Why? Because you can. Sort of. Yes, this is purely for fun and giggles.

Kevin Kuchta

What Are the Best JavaScript Debugging Tools of 2020? Find Out in This Guide— Improve the quality of your code with these JavaScript debugging tools.

Raygun sponsor

A Hands-On Introduction to Reactive Programming with RxJS

Daniel Caldas

▶  Let's Rebuild Pac-Man with JavaScript— A well recorded 1h40m guide/tutorial to building a Pac-Man (that game from the 80s with the ghosts and pills!) clone using modern JavaScript.

Thomas Weibenfalk

Effective Limited Parallel Execution in JavaScript— Well, concurrency really, but nonetheless a short and sweet look at what using a promise pool could do for you.

Arseny Yankovsky

🔧 Code & Tools

μPlot 1.2: A Fast, Tiny Time Series Chart Library— A fast, memory efficient Canvas-based time series plotting library.

Leon Sorokin

Luxon: A Library for Working with Dates and Times— If you saw the Moment.js news (featured), you might be looking for lighter alternatives. You can think of Luxon as an ‘evolution’ of Moment, said Moment’s creators.

Isaac Cambron

Klipse: A Javacript Plugin for Embedding Interactive Code Snippets in Blog Posts— Supports many languages including JavaScript, naturally, but also uses client-side evaluators to work with languages like Ruby, C++, PHP, SQL and Python too.

Yehonathan Sharvit

ip-address: Library for Parsing and Manipulating IP Addresses— Works with both IPv4 and IPv6 addresses.

Beau Gunderson

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

Hasura sponsor

react-range: Accessible Range Input with a Slider— Accessible and customizable. Examples here.

Vojtech Miksu

Functional: Common Functional Programming Algebraic Data Types for JavaScript— Boasts compatibility with ‘most modern browsers’ and Deno.

Sebastien Filion

Gemini 4: A 'Currently Playing' Viewer for Spotify— A basic Electron app that offers an ‘easy on the eyes’ way to see what’s currently playing in Spotify.

Gabe Haarberg

#507 — September 25, 2020

Unsubscribe  |  Read on the Web

⏪ In case you missed it, last week we covered the release of Vue 3.0, a major update on the Moment.js project, and a big new Deno release. Now on to this week..

JavaScript Weekly

Feature Watch: ECMAScript 2021— Dr. Axel always keeps tabs on the new features coming to future versions of ECMAScript and he’s now started to do the same for the forthcoming ES2021.

Related to this TC39 has advanced a number of proposals this week (though they're not all guaranteed for ES2021 by any means):

• Class static initialization blocks to stage 2
• .item() for indexables to stage 3 (more on this by Dr. Axel.)
• Import Assertions to stage 3
• Intl.DisplayNames to stage 4
• Intl.Enumeration to stage 2
• and a few others..

Dr. Axel Rauschmayer

billboard.js 2.1.0: A D3-Based Chart Library— Supporting over 10 different chart types or a combination of such, Billboard is a powerful option for rendering attractive charts – check out the demos here. v2.1 increases performance for larger datasets both during rendering and resizing – there’s a new theme available too.

Jae Sung Park

Scout APM - A Developer’s Best Friend— Scout’s intuitive UI helps you quickly track down issues so you can get back to building your product. Rest easy knowing that Scout is tracking your app’s performance and hunting down small issues before they become large issues. Get started for free.

Scout APM sponsor

Vime: A Customizable Media Player Built with Web Components— If you need to put together a standards compliant media player and just want a single API to worry about while supporting numerous video providers, this is for you. Frameworks like React, Vue, Angular and Svelte have also been thought about and it integrates with them too.

Rahim Alwer

V8 Release 8.6— The latest version of the V8 JavaScript engine is now in beta until its eventual release with Chrome 86 (and, eventually, a future version of Node). The codebase is now more respectful, there are speedups in Number.prototype.toString, and a JavaScript fuzzer called js-fuzzer has been open sourced.

Ingvar Stepanyan (V8 Team)

💻 Jobs

Senior Software Engineer (Remote within U.S.)— Understand and enjoy working on the full stack? If you've got a proven track record of building user-oriented software we want to hear from you.

Reforge

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

Vettery

📚 Tutorials, Opinions and Stories

How to Visualize Data Structures in VS Code— VSCode Debug Visualizer is a handy VS Code extension for visualizing data structures – we’ve linked it before, but Addy does a great job of showing off the benefits here. JavaScript and related languages have the best support.

Addy Osmani

▶  Building a Netflix Clone with React, Styled Components and Firebase— A rather epic 10 hour tutorial covering almost everything you’d need to know to build the frontend for your own Netflix-a-like.

Karl Hadwen

Decreasing Bundle Sizes with ES Modules in Angular 10— Does your module formatting choice affect bundling size, CommonJS, and ES modules? Get answers in this review.

Wijmo by GrapeCity, Inc. sponsor

A Look at Textures.js, a Way to Add Textured Styles to d3 Visualizations— It’s nice that it’s so simple, but beware that adding such features to charts can sometimes impede usability(!) GitHub repo.

Brady Dowling

VS Code Tips for Power Users— I remember when Vim tutorials were all the rage, but now it’s Visual Studio Code, so here are some tips and techniques to help you make the most of it.

Boris Yordanov

▶  Discussing TypeScript and Svelte— Orta Therox, who works on the TypeScript compiler, talks about how TypeScript works with Svelte, what the latest news is, and more. Definitely worth a listen if you’re exploring Svelte.

Real Talk JavaScript Podcast podcast

Learn How Devs are Helping 👨🏾‍🎨👩🏻‍🔧👨🏽‍🌾 Adapt to 2020

Square UnBoxed - Free Virtual Event sponsor

Running Go in the Browser with WASM and Web Workers— Qvault (interactive coding courses in the browser) started using Web Workers and WASM in order to stream output from a program. This post shows off the JavaScript needed to bring it all together.

Lane Wagner

Learn date-fns: A Lightweight JavaScript Date Library

James Hibbard

🔧 Code & Tools

urlcat: A URL Builder Library for JavaScript— “makes building URLs very convenient and prevents common mistakes.”

Botond Balázs

fflate: High Performance Compression and Decompression in 8KB— The README has a comparison table against pako, tiny-inflate, and UZIP.js and promises to offer the best of all worlds across performance, size, and ES module support.

Arjun Barrett

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

big.js: A Small Library for Arbitrary-Precision Decimal Arithmetic— 0.1 + 0.2 doesn’t equal 0.30000000000000004 here. v6.0 just came out.

Michael M

Crossfilter: Fast N-Dimensional Filtering and Grouping of Records— For exploring large multivariate datasets in the browser. Supports fast (<30ms) interaction with coordinated views, even with datasets containing a million or more records.

Square and the community

Importabular: A 5KB JavaScript Spreadsheet Component— There are certainly lots of options available for an Excel-like JS component but this super light alternative, which is mobile friendly, might also be worth a look. GitHub repo.

Renan Le Caro

tinyhttp 0.4: A Lightweight and Modular Express-Like Web Framework— Written in TypeScript and claims to be faster than Express but with full Express middleware support. GitHub repo and 0.4 release notes.

Paul Losev

11 Top Node ORMs, Query Builders and Database Libraries in 2020— A roundup of the most popular options including Mongoose, Knex.js, Sequelize and, yes, Prisma.

Prisma

ts-sql: A SQL 'Database' Implemented Purely in TypeScript Type Annotations— Last week we saw a spell checker built with TypeScript types and the tomfoolery continues here!

codemix

#508 — October 2, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

Bringing the Mona Lisa Effect to Life with TensorFlow.js— Do the Mona Lisa’s eyes follow you as you move around the room? Even if the real painting’s eyes and head don’t move, you can make it happen on the screen with this simultaneously unsettling and exciting use of TensorFlow.js.

Emily Xie

esbuild: A Super Fast JavaScript Bundler and Minifier— It’s common for us to link to a new library or tool and it doesn’t get any further development. Built in Go to be the fastest JS and TS bundler going, this felt experimental at first, but has seen significant development over the past year and is well worth a try if you’re running into bundling performance issues.

Evan Wallace

The Most Complete Spreadsheet Solution for JavaScript Apps— Fast enterprise JavaScript spreadsheet for delivering true Excel-like spreadsheet experiences. Download for a free evaluation.

SpreadJS by GrapeCity, Inc sponsor

Announcing MobX 6— MobX is a popular and long standing state management system that lets you manage state with relatively little magic and outside of any particular UI framework (the homepage has a good demo of it living alongside React).

Michel Weststrate

💻 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— Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

📚 Tutorials, Opinions and Stories

Detached Window Memory Leaks— If code causes a popup window to appear but then retains a reference to such a window, a memory leak can occur. This thorough post looks at why, when they occur, and how to solve the problem in your own code.

Jason Miller and Bartek Nowierski

▶  Learn How to Recreate Flappy Bird and Doodle Jump— Ania has really been knocking these fun, accessible and no-nonsense JavaScript tutorials / code-alongs out of the park lately and this time she tackles some recently popular game mechanisms.

Ania Kubow

Getting Started with OpenTelemetry in JavaScript— OpenTelemetry is an open source framework that provides a single set of APIs, libraries and instrumentation to capture traces and metrics.

Lightstep sponsor

Building Scalable GraphQL APIs on AWS with CDK, TypeScript, AppSync, DynamoDB, and Lambda— AWS AppSync is a managed serverless GraphQL service and you can bring it together with numerous other technologies to create powerful solutions like a real-time GraphQL API as here.

Nader Dabit

Eleventy and Vue Components - Behind the New Netlify.com— An interesting look at how the new Netlify site that launched in May was built using Vue as the templating tool via a plugin, allowing the site to built based on components.

Zach Leatherman

Creating Mirrors in React-Three-Fiber and Three.js— A brief walk-through of how to create a mirror scene. This is for you if you like creating striking visual effects with JavaScript.

Gianmarco Simone and Marco Ludovico Perego

Data Visualization: Interpreting Uncertainty in Product Design

Shopify Partners sponsor

A React Cheatsheet for 2020— We somehow missed this when it came out earlier this year but it’s a handy resource for those who prefer just-in-time learning or want even more prep for nailing that interview.

Reed Barger

🔧 Code & Tools

react-chrono: A Modern Timeline Component for React— Render a themeable timeline in 3 unique modes (vertical/horizontal, tree, or auto-playing slideshow). Also includes keyboard navigation support. Try it here.

Prabhu Murthy

Duet Date Picker: An Accessible WCAG-Compliant Date Picker— Has an elegant default design with lots of ways to customize it (e.g. min/max ranges, changing first day of the week, localization, etc). Try different examples here. No specific frameworks needed.

Duet Design System

Elder.js: A Svelte Framework and Static Site Generator— An opinionated static site generator designed for building SEO-friendly sites at scale (it comes from a project to build a 18,000 page site for its creators). GitHub repo.

Elder.js Team

Wallaby.js Introduces Free Plan For Open Source Projects— Continuous in-editor test runner that allows you to view runtime values, edit-and-continue, perform time-travel debugging, and more.

Wallaby.JS sponsor

smolpxl: Write Retro Pixelated Games in JavaScript— There’s a variety of example games here. The source for the Snake clone shows off how simple it makes things.

Andy Balham

visx: Visualization Primitives for React from Airbnb— Formerly known simply as vx, browse the gallery and see if you’re not inspired. GitHub repo.

Williams and Shoff (Airbnb)

Elsa: A Minimal, Secure Runtime for JavaScript and TypeScript Written in Go— Joining Deno in the land of new JS runtimes this year comes the Go-powered Elsa which uses QuickJS rather than V8. It feels somewhat more experimental, but it’s always fun to see such projects, and if you don’t like it.. you can 🎵 let it go… let it go… 🎵

Elsaland Team

Parsel: A Tiny, Permissive CSS Selector Parser— This is an ES module with a simple API that lets you parse and traverse CSS selectors, calculating specificity. Supports the full Selectors 4 syntax and no dependencies.

Lea Verou

q5xjs: A Small and Fast Alternative Implementation of p5.js— It’s described an experimental version of the well known ‘accessible creative coding’ library. Lots of examples here.

Lingdong Huang

#509 — October 9, 2020

Unsubscribe  |  Read on the Web

⚙️ So many Rust-powered JavaScript tools came across our path this week that there's definitely a bit of a theme in this issue! Both Rust and Go seem particularly suited to the JS tools space, so it'll be neat to see further developments.

JavaScript Weekly

ZzFXM: A Tiny JavaScipt Music Generator— Built for ‘size-limited productions’, ZzFX lets you create a wide array of sounds with very little code. Enjoy some examples. Even more impressively there’s a tracker system for creating songs for it.

Keith Clark and Frank Force

RSLint: A Super Fast JS Linter Written in Rust— Last week we mentioned the Go-powered esbuild bundler but now Rust wants a turn at creating performance-focused JavaScript tooling. This seems to be a bit of a trend as Dr. Axel mentions next..

Riccardo D'Ambrosio

Writing JavaScript Tools in Other Languages – A New Trend?— Given what we just said about the item above, we think there’s something to Dr. Axel’s observation and are happy to see more of it.

Dr. Axel Rauschmayer

16 JavaScript Debugging Tips You Probably Didn’t Know— Debug your JavaScript with greater speed and accuracy using these lesser-known tips and tricks.

Raygun sponsor

Bringing the Browser DevTools to VS Code— Microsoft has released a Edge Tools for VS Code extension which takes the usual DevTools directly into the popular editor (including the Network pane).

Chris Heilmann (Microsoft)

💻 Jobs

Full-stack Engineer (React + Rails) [remote]— Reform professional education. We're bootstrapped/very profitable, are led by 3x successful founder, and we tell a lot of dad jokes.

Reforge

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

Vettery

📚 Tutorials, Opinions and Stories

The File System Access API: Simplifying Access to Local Files— You can now read files and save changes directly to those same files directly from JavaScript in the browser. It’s an open standard but not widely implemented yet except in Chrome 86.

Pete LePage and Thomas Steiner

jQuery to React: How Dropbox Rewrote the HelloSign Editor— A case study of how Dropbox went about modernizing its HelloSign e-signature acquisition by replacing 12,000 lines of jQuery-based code.

Asa Ayers

20 JavaScript and Node Experts to Follow in 2020— New Relic presents a roundup of some of our favorite JavaScript developers. Come learn what they've been up to online.

New Relic sponsor

Understanding TypeScript Generics— An introduction to the use of generics in TypeScript with examples grounded in real-world use cases. This is a long article that goes into a lot of depth.

Jamie Corkhill

Using WebXR with Babylon.js— Another indepth tutorial from Smashing Magazine covering WebXR at a high level before digging into creating immersive experiences with the Babylon.js framework.

Preston So

Go, WebAssembly, HTTP Requests and Promises— A guide to interacting with JavaScript from Go delivered in a WebAssembly context.

Alessando Segala

JavaScript's Event Loop And Call Stack Explained— What do you do when you keep learning something then forget it? Felix turns it into a blog post. Jack Archibald’s In The Loop talk also remains a fantastic resource on this front if you have 30 minutes to spare.

Felix Gerschau

Getting Started with OpenTelemetry and Distributed Tracing in Node.js

Lightstep sponsor

Redux In Web Workers? Off-Main-Thread Redux Reducers and Middleware— Several experiments to off load Redux, often used with React, from the main thread, and run some or all of Redux store in Web Workers.

Daishi Kato

Comparing the Type Safety of 8 TypeScript ORMs and Database Libraries

Prisma

🔧 Code & Tools

Volta: Install and Run JavaScript Tools Quickly— “No matter the package manager, Node runtime, or OS, one command is all you need:volta install.” It’s a bold claim, but this tool provides a way both to manage tools like node, npm and yarn but also switch versions when projects require it.

Volta

Boa v0.10: An Experimental JS Lexer, Parser and Compiler in Rust— A Rust implementation of the ECMAScript specification being worked on by a TC39 delegate. You can play with online here. Want to get more background? There’s a talk from 2019 about what’s involved.

Boa Developers

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

Library Detector: A Chrome Extension That Detects JavaScript Libraries— A browser extension that detects a variety of different frontend libraries and frameworks and displays their icons for you. Open source or installable here.

John Michel

tsParticles 1.18.0: Particle Features for the Web— Bounce, spray, and generally throw things around visually. Enjoy the live demos here.

Matteo Bruni

Ego: A Lightweight Decision Making/State Library— A state library aimed at building game AI but you could use it for other things. XState is another more established state machine library.

Oğuz Eroğlu

ml.js 5.3: Machine Learning Tools in JavaScript— A compilation of machine learning and numerical analysis tools.

ml.js

#510 — October 16, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

webpack 5 Released— webpack is arguably the most popular bundler right now and this is the first major release in over two years. We get big improvements to caching (and therefore performance), reduced bundle sizes with better tree shaking, and a variety of breaking changes to prepare for the future (automatic Node polyfills are gone, for one).

webpack

• Tania Rascia has a fantastic How to Set Up webpack 5 from Scratch tutorial to get you up and running ASAP. She also has a useful webpack boilerplate project.

npm 7.0 Released— With millions of users, resulting in 75 billion package downloads per month, npm has undoubtedly been a huge success and npm 7 is now here (and will also come with Node.js 15.0 next week). Key features include workspaces, installation of peer dependencies, and support for yarn.lock.

Myles Borins

Monitor Frontend Performance With User-Centric Metrics— Page load time isn't enough to guarantee you're providing a solid user experience; your users care about perceived performance. Learn to track interactivity metrics like `firstInteraction` so you can build for impact. Your users will thank you.

New Relic sponsor

Rust Meets the Web - A Clash of Programming Paradigms?— There’s a lot to enjoy here about how Rust is taking steps into the browser via WebAssembly and how its approaches ‘clash’ with the Web and JS ways of doing things: “JavaScript was not built in one day. And just like JavaScript evolved to fit the browser, Rust will need to grow, too. I am optimistic that we, the communities of Rust and JavaScript, will come up with great solutions.”

Jakob Meier

Babel 7.12.0 Released with TypeScript 4.1 Beta Support and More— It’s a minor version but Babel is such a part of the fabric of the JavaScript ecosystem that any new features can have a big impact. 7.12 adds support for webpack 5, template literal types, class static blocks, and more.

Nicolò Ribaudo

💻 Jobs

Senior Software Engineer, Front-End (Fully Remote/UK)— We're looking for exceptional engineers to join our remote dev team and help us revolutionise dental practices the world over.

Dentally

Front End JavaScript Product Engineer (Remote within Australia)— JavaScript Product Developer - Build exceptional next-gen products using THE latest technology. $120-140k + Super + Equity + Benefits.

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

Vettery

📚 Tutorials, Opinions and Stories

Create TypeScript Declarations from JavaScript and JSDoc— Even if you don’t write your code in TypeScript you can still generate .d.ts files to provide more information to developer tools.

Nicholas C. Zakas

▶  Microsoft's Node.js for Beginners Series— If you or someone you know needs to step onto the Node.js train or just revise what you already know, this up to date series of brief screencasts from Microsoft could fit the bill.

Microsoft

Don't Copy Paste Into A Shell – Here's Why— As well as being merely good advice, this demo shows how the Clipboard API can be used to maliciously change what users copy and paste from a page. (Luckily some terminals – such as Windows Terminal – can mitigate the problem.)

Brian Tracy

Build an Authenticated JAMstack App with Next.js, Airtable, Tailwind CSS, and Auth0— A detailed guide to building a Jamstack application with authentication features using Next.js. Be sure to check out the accompanying video tutorial series. (Via our Jamstack newsletter)

James Quick

Passwordless Authentication with Next.js, Prisma, and Next-Auth— How to add passwordless authentication to a Next.js app, so users can log in with GitHub or a Slack-styled magic link.

Prisma sponsor

▶  Setting Up Automatic Deployment with GitHub Actions— A 40-minute screencast that goes through setting up a GitHub Actions powered flow for deploying an app.

Anson the Developer

Testing Non-Exported Functions— To test an exported function, just import it. But what about non-exported functions?

Samantha Ming

A Webpack 5 Headache— Node’s most prolific module creator reflects on the issues webpack 5 raises for Node module maintainers after its decision to remove automatic Node API polyfills.

Sindre Sorhus

How to Make a First Contribution to an Open Source Project— If you’re looking to break into making open source contributions but the process seems a bit intimidating, this handy Twitter thread should provide some reassurance.

Simon Høiberg on Twitter

TypeScript: Stop Using `any`, There's a Type For That

Applying React Component Patterns in Ember.js

▶  7 Ways Angular Components Can Share Data

🔧 Code & Tools

Detect GPU: Determine What Tier of Graphics Performance Users Have— Imagine user agent capability detection but for the GPU. This returns information about the user’s graphics capabilities including a simple 0-3 score as to the level of rendering power available which you could use to turn on/off extraneous visual effects. Demo here.

Tim van Scherpenzeel

Wallaby.js: 15x Faster JavaScript/Jest Testing and Debugging— Forget about breakpoints and `console.log`, test stories and time travel debugging is the future.

Wallaby.js sponsor

essentia.js: Music and Audio Signal Analysis and Processing— Targeting both real-time and offline use cases, essentia.js is powered by the eponymous C++ library via WebAssembly.

essentia.js

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

iamkun

VueTailwind: Responsive HTML Components Made with Vue and Tailwind— Many of the components are “coming soon” but there’s enough here to poke around. Each component gives you a mobile and desktop view and some are CSS-only.

Saleh Mir

Human Interval: Human Readable Time Distance Parser— Rather than turn times into English (e.g. ‘two minutes’), this does the opposite.

Agenda

Introducing Repluggable: Solving The Dependency Model Challenge with Micro Frontends & Contracts

Wix Engineering sponsor

dragmove.js: A Tiny Library to Make DOM Elements Draggable— Comes in at just 500 bytes with no dependencies and touch support. Demo here.

Kailash Nadh

Bueno: A Tiny, Composable Validation Library in TypeScript— Aims to improve on other form validation libraries and can also be used as a lightweight API validation library.

Philip Nilsson

vue-speedometer: Speedometer-Style Gauges for Vue
Arun Kumar

Reveal.js 4.1: An HTML Presentation Framework— The 4.1.0 release notes.
Hakim El Hattab

ReactGrid: Add Spreadsheet-Like Behavior to a React App
Silevis Software

#511 — October 23, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

React 17.0 Released— The focus in React 17 is peace, harmony, and gentle progression, with subtle changes, making apps easier to upgrade gradually in future, and also to make it easier to embed React apps into apps built with other technologies.

Dan Abramov and Rachel Nabors

Node 15 Released— The new ‘release’ line (the one that gets all the new features first) of Node is here. Two key features:

• An upgrade to the V8 8.6 engine (from 8.4) adding various JS features like Promise.any(), logical assignment operators, and String.prototype.replaceAll()
• Unhandled rejections are now raised as exceptions by default. If there's any one change that'll cause you some head scratching, it's this.

For more, check this week's Node Weekly ;-)

New Course: Introduction to Next.js, The Full-Stack React Framework— Next.js is a complete framework built on top of React.js. You'll learn server-side rendering, static site generation, data fetching, code API endpoints, creating pages with the file system, add CSS modules, and more.

Frontend Masters sponsor

What Vue.js Does Better Than React— “I love and use React daily but was curious if there’s anything from Vue that React could learn from. Turns out there is! This post collects my findings.”

Harry Wolff

Skypack Discover: A Way to Discover and Test Recommended JS Packages— From the same folks as the Snowpack build tool, Skypack is basically a search engine for npm packages, but it’s added a ‘Discover’ feature which helps you pick the best options for you. You can then import them ES module style.

Fred K. Schott

💻 Jobs

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

Komoot

JavaScript/TypeScript Architect + Developer Advocate, London UK— It’s time to build your masterpiece – can you design a platform and a framework used by the NHS, HMRC, Valve, and Microsoft?

CareersJS

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

Vettery

📚 Tutorials, Opinions and Stories

Dissecting A Dweet: City Sunset— A fascinating exploration of how a mere 140 characters of JavaScript can produce beautiful procedurally generated cityscapes. You can play with/tweak the code here. Fun!

Killed By A Pixel

'Basic Authentication' with Lambda@Edge— An interesting way to use Lambda@Edge (lets you run code in front of a Cloudfront distribution) to add a rather old-school way of securing access to a static site. But does it work? Yes.

Sebastian Petterson

All the Canaries Lived: It’s Time to Adopt Progressive Delivery

LaunchDarkly sponsor

Getting Started with Next.js— Next.js is a React-based framework focused on providing a good developer experience for building complete, production-bound apps covering both backend and frontend.

Adebiyi Adedotun

Introducing the Async Cookie Store API (in Chrome 87)— A look at a new API that exposes cookies to service workers and provides an async alternative to document.cookie that also lets you react to cookie changes in real time.

Matan Borenkraout

Getting Started with OpenTelemetry in JavaScript and Node.js

OpenTelemetry sponsor

Managing Side Effects with Monads

Why `flatMap` Is So Great

JSDB 1.0: An In-Memory, Streaming Write-on-Update Node.js Database— An easy-to-use, in-memory database that persists to a JavaScript transaction log and aimed at small scale (though Small Web is more nuanced than that as a concept) cases.

Aral Balkan

Pikaday: A Mature Date Picker with No Dependencies— This is an old project that has recently sprung back into life and gotten a release. I just love the name of it and its simple old-school nature. Demo here.

Bushell, Rikkert et al.

NSFW JS: TensorFlow-Powered Client Side Indecent Content Checking— Would it be helpful for you to detect.. ‘unseemly’ images on the client side? Enter NSFW JS. We first featured this over a year ago but it’s just had a significant performance-oriented update.

Infinite Red, Inc.

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

JZZ: A MIDI Library for Node and the Browser— Brings the Web MIDI API to Node so you can send, receive and play MIDI messages from both Node and the browser on Linux, macOS and Windows. (Click on the logo on the official home page for a bit of fun.)

Jazz Soft

Fingerprint JS 3.0: Modern and Flexible Browser Fingerprinting Library— With v3 it’s become completely modular and has been rewritten in TypeScript. Definitely one of those ‘please use this for good, not evil’ type projects though.

FingerprintJS

73 Awesome NPM Packages for Productivity— This is one of those ‘grab bag’ list style posts we used to include a lot more several years ago, but it’s a reasonably good one if you fancy a quick browse.

Madza

🔗 From the queue..

We don't ever get to use all of the great links we have because we don't want to overwhelm you each week, but we thought it'd be neat to quickly feature some of them in case the titles jump out at you – so we'll be including this special section from time to time for you to skim through:

Enjoy!

The Flavors of Object-Oriented Programming (in JavaScript)
Zell Liew

An Introduction To Running Lighthouse Programmatically
Katy Bowman

Understanding Reduce in JavaScript
Monica Powell

Working with JavaScript Media Queries
Marko Ilic

Supercharge Testing React Applications With Wallaby.js
Kelvin Omereshone

Three Approaches for Implementing Nested Forms in Angular
Latish Sehgal

#512 — October 30, 2020

Unsubscribe  |  Read on the Web

🎉 512 issues.. we're half way to 1 kibi-issue? 😄 Powers of 2 are much more fun to celebrate than hundreds or thousands, right? Thank you for all your ongoing support.
__
Peter Cooper, your editor

JavaScript Weekly

What It's Like Being a jQuery Maintainer— Michał Gołębiowski-Owczarek is one of those heroes who drives and maintains a library that can seem either essential or unnecessary, depending on what company you keep: jQuery. Here’s a look at how he approaches this responsibility.

GitHub ReadME

Create React App 4.0 Released— It's over a year since the last major release of create-react-app, a popular way to quickly spin up a new React app, but with v4 we get support for Fast Refresh (a modern alternative to hot reloading), plus React 17 and TypeScript 4 support.

Facebook React Team

How to Build Forms With React the Easy Way— The challenges inherent to building forms with React, such as state management and validation, can be tackled with finesse. Read TJ VanToll’s blog to find out how to solve them quickly with the KendoReact Form component. Check it out.

Progress KendoReact sponsor

StandardJS 16: An Attempt at a Standardized JavaScript Style— StandardJS isn’t a formal standard but is nonetheless widely used to enforce consistency. v16 promises better performance and improved JSX, React and Next.js support.

Feross Aboukhadijeh et al.

esbuild: An Extremely Fast JavaScript Bundler— “You featured this last month,” I hear you say. True, but it now has an all new homepage complete with extra useful documentation and it continues to be a project I’m seeing a lot of buzz around. Next time you have ten minutes to play with a new tool, check it out.

Evan Weaver

💻 Jobs

Senior Web Developer (Node/ReactJS) - Remote— Millions get inspired and plan adventures with our apps. To help us make komoot.com the place to go to plan outdoor adventures, we’re looking for a one of a kind Web Developer to join our team.

Komoot

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 Your Next Job Through Vettery— Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

📚 Tutorials, Opinions and Stories

If Not Single Page Apps (SPAs) Then What?— If you’re not a fan of the SPA approach, what else can you do? Turns out there are numerous modern alternatives from Stimulus to RedwoodJS.

Tom MacWright

Running Node on iOS and iPadOS via iSH— iSH provides a Linux shell on iOS devices and with the most minor of fiddling you can get Node running on it too.

Dr. Axel Rauschmayer

Getting Audio Visualizations Working with Web Audio API— A developer works through the trickiness of cross-browser issues around the Web Audio API and comes up with a neat visualization for his audio chat system.

Dwayne Harris

Logi Composer: An Out-of-the-Box Development Platform for Analytics— See how easy it is to build, customize, and embed analytics in your application. Download a free 14-day trial here.

Logi Analytics sponsor

JavaScript's Memory Management Explained— A summary of the core concepts of memory management as it relates to JavaScript.

Felix Gerschau

How to Use Sharp for Image Processing in Node.js— Sharp is a high-performance module for resizing and formatting images (it uses libvips behind the scenes) and here’s how to get started with it.

Indrek Lasn

▶  Learn About Angular's Site Generator Scully— Scully is the most prominent Angular-based static site generator and its v1 release dropped recently.

Tara Manicsic

Curve Modifiers in Three.js— Three.js makes it easier to work with WebGL and 3D in general from JavaScript and Ada has added a neat new feature to bend models around curves.

Ada Rose Cannon

Angular Security Best Practices

Snyk.io sponsor

When (and When Not) to Reach for Redux— Redux is a very generic state management tool that can be used for a broad array of use cases and while it might not be the absolute best at any of them, it offers a lot of opportunities.

Mark Erikson

Deno 1.5 Released: The Security-Focused JS Runtime— Now with improved bundling (deno bundle now does tree shaking and is up to 15x faster), REPL improvements, and support for alert, confirm and prompt for user interactions.

Deno Team

Next.js 10 Released: Image Optimization, Internationalized Routing, React 17 Support— Next.js gains a new built in image component and image optimization, Analytics (incorporating Web Vitals) as well as Next.js Commerce which is a collaboration with BigCommerce.

Vercel

XRegExp 4.4.0: Extended JavaScript Regular Expressions— I enjoy looking up if we linked something before and we did.. 1862 days ago! XRegExp is for you if you want to spice up normal regular expressions – see the examples.

Steven Levithan

Square Terminal API— Connect your app to the all-in-one payments device merchants love with a simple REST API. Learn more.

Square sponsor

Lucia: A Tiny (Vue-Inspired) Library for Tiny Web Apps— A library trying to bridge the divide between moving from jQuery to more modern systems. It provides directives you can use in HTML markup for adding bindings, handlers, etc.

Aiden Bai

sql.js 1.4: A Library to Run SQLite on the Web

SQL.JS

csprng: Isomorphic Wrapper for crypto.randomBytes in Node and Browser
Luke Edwards

#513 — November 6, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

What's the Deal with Svelte and SvelteKit?— Two weeks ago we linked to a video where Svelte’s creator pondered the future of Web development. Now here’s a more definitive writeup of what you need to know about how Svelte is progressing.

Rich Harris (Svelte)

BTW, if Svelte is your thing, Svelte Radio is a frequent podcast covering developments in the space. There's also an official Svelte November 2020 update.

WTFJS: A List of Funny and Tricky JavaScript Examples— This has been around for a few years but continues to get tweaks and adjustments and if you’ve not seen it, it’s worth a look to get a deeper look into some of the more “uh, what?” corners of JavaScript.

Denys Dovhan

Vue 3 Is Out! Jump into Vue 3 Quickly in This New Course by Sarah Drasner— Learn fundamental concepts in Vue, such as directives, methods, and computed watchers. You’ll learn Vue’s reactivity system and the new Composition API in Vue 3.

Frontend Masters sponsor

New, Core 'Redux Fundamentals' Tutorial— A complete rewrite of the official Redux introductory tutorial that covers both how Redux works and how to use it. Say goodbye to outdated terminology and hello to modern practices and code sandbox demos. Easy to skim even if Redux isn’t your cup of tea.

Redux Core Team

Socket.io 3.0 Released: A Realtime Framework for Node and Browser— We’re awaiting a full blog post on this release, but Socket·io has been around many years and was once the ‘go to’ system for bidirectional browser/server communications that worked in almost every browser.

Socket·IO Project

📚 Tutorials, Opinions and Stories

An Introduction to Data Visualization with ApexCharts— ApexCharts is an MIT-licensed interactive JavaScript charting library.

Nefe Emadamerho-Atori

Clickjacking Attacks and How to Prevent Them— A look at both client-side and server-side approaches to mitigating clickjacking attacks including some approaches for Express.js-based apps.

Andrea Chiarelli

ES Modules in Depth— An exploration of the different ways you can export and import values using ES Modules (now broadly supported in most places, even if you’re not using extra tools).

R. Alex Anderson

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

An Introduction to FFmpeg.wasm, a WebAssembly / JS Port of FFmpeg— I think WebAssembly is going to have a huge impact over the next few years and this project, despite being in the early stages, shows off a few reasons why. Project homepage.

Jerome Wu

The JavaScript 'Self-Profiling' API— The JS Self-Profiling API is a proposed API (supported only in Canary builds of Chrome for now) for letting developers control a sampling profiler for measuring client JavaScript execution times.

Addy Osmani

Build a 'Remaining Character Count' Component with Alpine.js— Alpine.js bills itself as ‘like Tailwind for JavaScript.’

Ryan Chandler

How to Organize a Large React Application and Make It Scale
Jack Franklin

Building a Type-Checked URL Router From Scratch with TypeScript 4.1+
Jan Sommer

How to Localize a Vue App with vue-i18n and Localazy
Václav Hodek

▶  Fancy TypeScript Features for the Everyday Developer
George Kosmidis

Top Problems I Encountered Switching from Vue 2 to Vue 3
Ghiura Alexandru

🛠 Code & Tools

SpaceTime: A Lightweight Timezone Library— Use this to calculate times in other timezones. Has a Moment-esque API but is immutable. No dependencies. We last linked this years ago but it’s still under active development. It has a neat interactive demo too.

Spencer Kelly

Graphery SVG: A Library for SVG Creation and Management— This well-documented library is good for creating and manipulating SVG in JavaScript. Offers a simple API, that’s said to be very close to the native structure of SVG.

Graphery

Square Terminal API— Connect your app to the all-in-one payments device merchants love with a simple REST API. Learn more.

Square sponsor

Dojo3D: A Library for Simple 3D Interactive Story Telling— Aimed at ‘all ages of coder’, Dojo3D tries to make creating interactive 3D stories a smooth process. There’s an online sandbox example you can play with.

Webprofusion

gron: Make JSON Greppable— A tool written in Go that transforms JSON into more easily greppable assignments, so you can use grep and see the context/path of the result. Useful.

Tom Hudson

SpanTree: Adds Tree-Based File Navigation to GitLab— A browser extension you may find useful if you browse GitLab-hosted repositories often.

Taveesh Anand

Marked: A Fast Markdown Parser and Compiler— Works in the browser or server-side. Demo here.

Christopher Jeffrey

Measure What Matters to Users, Browsers Don't Have Feelings

New Relic sponsor

μPlot 1.3: Fast, Tiny, Canvas-Based Time Series Chart Library
Leon Sorokin

Fetch 3.5: A `window.fetch` Polyfill
GitHub

💻 Jobs

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

Vettery

#514 — November 13, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

10 Insights From Adopting TypeScript At Scale— A fantastic writeup (from a TC39 member, no less) of how Bloomberg (the financial media company) adopted TypeScript and now has 2,000 full-time JavaScript engineers. Curiously we also learn that Bloomberg also have their own JavaScript runtime built around the V8 engine.

Rob Palmer (TC39 and Bloomberg)

A Way to Look Up JavaScript Operators— Quick, name as many operators as you can! Got to about ten or so? This site covers about fifty with a quick explanation of each (well, except the bitwise ones).

Josh W Comeau

The Most Complete Spreadsheet Solution for JavaScript Apps— New Release: Fast enterprise JavaScript spreadsheet for delivering true spreadsheet experiences. Learn more about SpreadJS v14 including native Excel I/O, Calc Engine with 450+ functions and more. Download a free trial or view the online demos.

SpreadJS by GrapeCity, Inc. sponsor

Angular 11 Released— Are you one of the allegedly1.7 million developers using Angular? Maybe experimental webpack 5 support, faster builds, improved hot module replacement support, and automatic inlining of fonts can tempt you onto the latest version.

Mark Techson (Google)

Babylon.js 4.2 Released: Powerful 3D Rendering Engine— Babylon.js is a particularly powerful 3D rendering engine aimed at artists, game developers, and anyone with 3D ideas to explore. New to 4.2 is a new particle editor, sprite editor, texture inspector, and more. See the playground if you want a quick play.

Babylon.js

'No More Free Work from Marak'— The creator of faker.js (a library for creating dummy data) pushing back against supporting businesses for free with his open source work has become a cause célèbre in the past week. “Pay me or fork this,” he says. Whatever your take, the topic of work vs reward in open source will remain both important and divisive.

Marak X

📚 Tutorials, Opinions and Stories

Rethinking the JavaScript Pipeline Operator— Dan concludes “I hope that TC39 decides to reject this proposal” but it’s interesting to see how he reaches that conclusion.

Dan Shappir

Understanding Modules and import and export Statements— Modular programming demands, well, modules, and JavaScript now has built-in support for these and here’s the basics of their operation.

Tania Rascia

Is Your JavaScript Testing Stack Holding You Back?— Learn how to boost your productivity with the ultimate development workflow.

Wallaby.js sponsor

Things I Don’t Like About Vue.js (as a React Engineer)— Well, we love Vue, but to be fair to Harry, he did write What Vue.js Does Better Than React recently too ;-)

Harry Wolff

Back to Basics: Event Delegation— Events don’t just occur on the element you apply them to. Instead they go all the way down the DOM tree to the event and back up again. Christian demonstrates where this can help you out.

Christian Heilmann

How to Detect When a Sticky Element Gets Pinned— …thanks to the IntersectionObserver API.

David Walsh

Live Workshop: Getting Started with OpenTelemetry in Node.js

Lightstep sponsor

▶  How to Recreate Tic Tac Toe with HTML, CSS, and JavaScript
James Q Quick

You're Probably Not Using Promise.All Enough
Sam Jarman

How to Create a Commenting Engine with Next.js and Sanity
Bryan Robinson

▶  My VS Code Setup: Must Have Configurations and Shortcuts
James Q Quick

🛠 Code & Tools

Mermaid: Markdown-'ish' Syntax for Generating Flowcharts, Sequence Diagrams, and More— Being able to ‘draw’ diagrams in a structured, text-based and have them render into something presentable is pretty appealing.

Knut Sveidqvist

jsdiff: A JavaScript Text Diffing Implementation— Can compare strings for differences in various ways including creating patches for the changes. The library is quite mature but just reached version 5.0. There’s an online demo too.

Kevin Decker

core-js 3.7.0: A Modular Standard Library and Polyfills for JS— A popular collection of polyfills covering ECMAScript features up to ES2021 level. The project has had some interesting problems recently, but releases are now flowing again.

Denis Pushkarev

CodeFix - Automatically Clean Up Technical Debt

CodeFix sponsor

React Frontload 2.0: Simple Full-Stack Data Loading for React— Do full stack data loading and state management inline in React components by writing a data loader in your component (with a hook) and it ‘just works’ with SSR and in the browser.

David Nicholas Williams

Running Vue.js in a Web Worker?— A promising prototype of running Vue.js in a Web Worker so that work is offloaded to a background thread with updates being sent back to the main thread asynchronously.

Jerzy Głowacki

Dexie.js: A Minimalistic IndexedDB Wrapper— IndexedDB is a widely supported browser API for data storage and Dexie aims to make it simpler to use (and will offer an approach for server syncing too.)

David Fahlander

Microsoft Edge Tools for VS Code— Use the Microsoft Edge Tools from within VS Code to see your site’s runtime HTML structure, alter its layout, fix styling issues as well as see your site’s network requests.

Visual Studio Marketplace

ShareDB 1.5: Realtime Database Backend Based on Operational Transformation— For when you need real time synchronization of JSON documents (such as for behind a real time collaboration app).

ShareJS

💻 Jobs

Senior / Intermediate Full Stack Developers (Sydney or Brisbane)— A SaaS business with phenomenal growth. True flexible working. You’ll have 5+ years in JavaScript / TypeScript, as well as production experience with AWS/Serverless.

Compono

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 Your Next Job Through Vettery— Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

👀 A Correction

The File System Access API: Simplifying Access to Local Files— Several issues ago we mistakenly referred to this API’s spec as an ‘open standard’ when it's just a spec. It's Chrome only (for now), not a W3C standard, though it remains an interesting idea. (Thanks to reader Šime Vidas for noting our mistake and noting that the path from the WICG to a W3C standard is a long one indeed!)

Pete LePage and Thomas Steiner

#515 — November 20, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

TypeScript 4.1 Released— The ever popular ‘JavaScript with types’ takes more steps forward with template literal types, key remapping in mapped types, recursive conditional types, and support for React 17’s upcoming jsx and jsxs factory functions. If you’re a Create React App user though, don’t rush to upgrade just yet as some problems have been reported.

Daniel Rosenwasser (Microsoft)

A Tale of Going from JavaScript to WebAssembly— A developer of a ‘ultra resolution’ storytelling platform tells the tale of upgrading their Web client’s performance by moving from a pure JavaScript approach to one turbocharged with WebAssembly. There’s a lot to learn here.

Marcel Duin

Monitor Frontend Performance With User-Centric Metrics— Traditional metrics like page load aren’t enough to guarantee that you're providing a solid user experience. Learn to track interactivity metrics like “firstInteraction” so you can build for better impact, and keep users coming back.

New Relic sponsor

Prettier 2.2 Released— The popular opinionated code formatter gains TypeScript 4.1 support, comes as ES modules so you can use it directly within the browser, and supports two new JavaScript parsers: espress and meriyah.

Sosuke Suzuki

Electron 11 Released with Experimental Apple Silicon Support— The popular cross platform desktop app environment upgrades its dependencies across the board (hi Chromium 87!) and begins to take steps into the Darwin arm64 world.

GitHub / OpenJS Foundation

📚 Tutorials, Opinions and Stories

The Case for Weak Dependencies in JS— If you’re using ES modules and want to check if one is present before using it in some optional way, what do you do? Lea explains why this would be useful and shares some ideas with how it could be implemented.

Lea Verou

The Most Accurate Way to Schedule a Function in the Browser— A detailed analysis of three JavaScript timeout strategies and how they perform in thousands of web contexts. A bit of a micro-optimization for sure, but it’s interesting to dig into the weeds like this.

Benoit Ruiz

10 React Security Best Practices— A checklist to help you and your team find and fix security issues in your React applications.

Snyk sponsor

Importing React Through the Ages— Kent looks at the wide variety of ways you can import React now and why he prefers a specific one.

Kent C. Dodds

Creating WebGL Effects with CurtainsJS— A way to add neat WebGL effects to <image> and <video> elements of an already “completed” web page.

Zach Saucier

What’s New In Vue 3?— Vue 3 has already been out for two months, but if you’ve not tried it out or just want to see some practical examples of its changes, this is for you.

Timi Omoyeni

A Super Simple Start to Firebase Functions— I find Google’s cloud services hard to navigate at the best of times so this sort of introduction is always much welcomed.

Kent C Dodds

Introduction to Fullstack, Type-Safe GraphQL— This tutorial teaches you how to build from scratch an entirely type-safe, fullstack web app, using GraphQL with a database attached.

Prisma sponsor

The Difference Between Event Handlers and addEventListener— Let’s say you have a button element. You can assign a function to button.onclick to catch click events or use button.addEventListener("click", ...)– how do they differ?

Twan Mulder beginner

Integrating Cobol(!) with JavaScript— Run COBOL applications and modify them with JavaScript on GraalVM. Not likely to be something many of you will want or need to do, but it’s interesting!

Christoph Schobesberger

We Chose Ember in 2015 and It's Still A Good Decision in 2020
Tomek Nieżurawski

Building Modern Native Add-ons for Node in 2020
Wu, Schulhof, Schlight, Eady, Dawson, and Del Gobbo

Angular CLI: Three Options You Didn't Know About the Component Schematic
Amadou Sall

🛠 Code & Tools

How Skypack Lets You Use npm Packages on CodePen— I’m a huge fan of CodePen for throwing together quick Web and JavaScript experiments, but loading dependencies has always been a bit old-school. No more. Skypack and ES6 imports now let you bring in whatever npm packages you need.

CodePen Blog

jose: Universal 'JSON Web Almost Everything'— Did you know there were so many “JSON Web” specs? JSON Web Signature, JSON Web Tokens, JSON Web Encryption, and more. This library aims to tackle most of them in both Node and browser. JWA, JWS, JWE, JWT, JWK and more are here.

Filip Skokan

Momoa JSON: A JSON Parser, Tokenizer, Traverser, and Printer— Useful for a more fine-grained approach to parsing JSON data that’s not covered by JSON.parse()

Nicholas C. Zakas

Building the Best Web Gallery, and Why the Heck It Was So Hard

Wix Engineering sponsor

A One Line Function to Generate a Unique String ID— For when a UUID is overkill.

Simon Høiberg

Harold: A CLI Tool That Compares Frontend Project Bundles in Size— This tool makes it easier to compare bundle sizes by taking snapshots that you can then review to manage how a project’s size is changing.

FunBox

Immer 8.0: The Popular Immutable State Library

Cosha 1.1: Add Colorful Shadows to Web Images

VeeValidate: Template Based Validation for Vue.js

vue-use-infinite-scroll: A Vue Composition Function to Make Infinite Scroll Simple

Ditox: 'Detoxed' Dependency Injection for JS, TypeScript and Flow

💻 Jobs

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

Vettery

🎵 A brief musical aside..

Hit play to start the beat and then jam along on the blues guitar to express yourself. This is a fantastic little CodePen demo (written in JavaScript, naturally) and should put a smile on your face 😁 Thanks to Greg Hovanesyan for this!

#516 — November 27, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

Flash Animations Live Forever at the Internet Archive— I know that many readers built Flash powered sites and used JavaScript’s ActionScript cousin before coming to JavaScript. If so, this may be a walk down memory lane. The Internet archive are now archiving and emulating Flash animations (using Ruffle, a Rust powered Flash emulator) in the browser thanks to WebAssembly.

Jason Scott

🎁  Some Black Friday Things We Found for JavaScript Developers— Rather than clutter up the newsletter with the various offers going on, we’ve collected together all the ones we’ve found (or from people we know) and put them on one page 😄 Enjoy!

Superhighway

▶  How to Build a React Form Without the Hassle— Building React forms from scratch can be messy. How do you deal with form validation or styling, for example? An efficient and easier way is to use the React form library in KendoReact, a professional UI component library. Learn more in the video.

Progress KendoReact sponsor

TypeScript Performance Tips— This wiki page has been around a while but blew up on social media this week. Its original author stresses the points covered are guidance rather than indisputable fact, and many of the tips improve other forms of performance than just execution speed.

Microsoft

TypeScriptToLua: Write Lua with TypeScript— Lua is embedded in all sorts of places (games, Redis, NGINX..) so being able to write JavaScript and have it converted could open up some extra opportunities.

TypeScriptToLua Contributors

• Electron is often criticized for its weight, but the creator of an SVG animation tool has written a love letter to it because of how it makes his side business possible.
• TypeScript 4.1 came out last week, and Tomek Sułkowski is particularly excited for what it means for his Tailwind CSS productivity ;-)
• Henri Helvetica celebrates the 25th anniversary of the IMG tag with links to a collection of talks on modern Web image formats and tooling.

📚 Tutorials, Opinions and Stories

Boop! A Whimsical Twist on Hover Transitions— We love a bit of whimsy and this is a fantastic tutorial (aimed at intermediate React developers) for creating UI elements with a pleasant, animated feel.

Josh W Comeau

Optimizing Your Pages for the Back/Forward Cache— Firefox and Safari cache the state of entire pages (rather than just the underlying assets) so if you go back or forward, pages can be restored instantly. Chrome is gradually adopting similar features and there are some things you should take into account.

Philip Walton (Google)

Use console.log() Like a Pro— I can already hear people arguing pros don’t use console.log, but the polls usually say otherwise ;-) Nonetheless, some nicely demonstrated tips here.

Marko Denic

Stream Announced the Public v2.0 Availability of Their React Native SDK— The React Native SDK is now rewritten in TypeScript to ensure type safety for easier-to-read code and debugging.

Stream sponsor

What is Static Site Generation? How Next.js Uses SSG for Dynamic Web Apps— A good walkthrough on the differences between SSR and static generation and the basics of building a statically rendered site using Next.js.

Colby Fayock

How I Built and Deployed a Fun Serverless Machine Learning App— A thorough examination, including code examples, of how a developer built a complete and fun image filter app with React, JavaScript, and got it running on Netlify and S3.

Ahmed Besbes

Adding Video to Your App with Vime.js— Vime.js is a modern framework-agnostic media player that can support services like YouTube and Vimeo.

Lawrence Oputa

▶  Automating the YouTube Upload Process Using Node— OK, most of us probably don't need to do this, but I appreciated how the creator walked through designing the feature. Definitely a tight screencast at only 10 minutes.

QuanticDev

OpenTelemetry 101 Technical Guide

Lightstep sponsor

▶  React, jQuery, Vue: What's Your Favorite Flavor of Vanilla JS?

The Stack Overflow Podcast podcast

How to Authenticate Django REST Framework API Calls from a Vue.js Client App

List.js 2.3.0: Add Search, Sort, Filters, and More to Tables and Lists— A long standing library with no dependencies that lets you give a bit more dynamism to HTML elements (though lists and tables are the obvious candidates) by adding search, sort, and filter features. Example.

Jonny Strömberg

Limited-Time Sale: 25% off Wallaby.js (First Time in 6 Years) and 50% off Quokka.js— Breakpoints and console.log is the past, real-time feedback without leaving your editor is the future.

Wallaby.js sponsor

uvu: A Fast and Lightweight Test Runner— Aimed at both Node and the browser, uvu is for anyone who likes things light. The output is nice too and as of this week’s 0.5.0 release, it has native ES module support too.

Luke Edwards

reading-time: Medium-Like Reading Time Estimation— Feed it some text and it’ll give you some basic estimates (e.g. ‘7 min read’).

Nicolas Gryman

vue-dock-menu: A Dockable Vue.js Menu Bar— Certainly an interesting UI concept here. It’s a menu bar, until you drag it to be a sidebar!

Prabhu Murthy

Zettlr: A Modern Markdown Editor— A rather attractive editor. Bear in mind it’s GPL licensed if you want to integrate it anywhere, but you may find it useful just as a personal editor.

Zettlr

web-ext: Command Line Tool to Help Build, Run, and Test Web Extensions
Mozilla

Reactochart: Good Looking Chart Components from Spotify

RxJS Ninja Template Library: A Starter Project for Building TypeScript Libaries with the NX Monorepo Approach

💻 Jobs

Engineering Manager (San Francisco)— Familiar with current web application frameworks? Got a solid understanding of agile methodologies? Join us and help lead a team, as we build the future of software engineer hiring.

Triplebyte

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 Your Next Job Through Vettery— Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

#517 — December 4, 2020

Unsubscribe  |  Read on the Web

✍️ Sometimes we have weak issues, sometimes we have strong issues.. I think this is one of the latter! Lots of both fun and useful stuff here, from a JavaScript driven mannequin(!) to a fantastic serverless use case many of us could benefit from. Enjoy!
__
Peter Cooper, your editor

JavaScript Weekly

WMR: A Tiny All-in-One Development Tool for Modern Web Apps— From the Preact team comes an interesting ‘everything you need in a single box’ tool for putting together webapps with bundling, JSX, CSS modules support, and more. Get started with npm init wmr projectname if you dare or see this Twitter thread for just why this is exciting.

Preact

What People in Tech Had to Say About JavaScript When It Debuted in 1995— It’s 25 years (today!) since a press release went out from Netscape and Sun Microsystems heralding the arrival of JavaScript. 28 then industry leaders chimed in with what they thought. We’re giving Bud Colligan a C- and Rose Ann Giordano an A+ for their comments.

Chris Brandrick

New Course: Production-Grade TypeScript— Use the TypeScript language at scale to increase the developer experience and productivity of your teams. Learn to manage even the most ambitious TypeScript projects with confidence and ease.

Frontend Masters sponsor

▶  Vue vs. Svelte with Evan You and Rich Harris— Evan You, the creator of Vue.js, and Rich Harris, creator of Svelte, both got on the same podcast to talk about the future of frontend development. (Note: There is cursing.)

The Undefined Podcast podcast

• The first release candidate of Snowpack v3.0 is out and there's a new way to load npm imports on-demand.. no more npm install step needed! We'll feature this again when it's released in January.
• Chrome 88 is in beta but lots of changes are forthcoming, including Atomics, SharedArrayBuffer (gated), the Digital Goods API, and the removal of Web Components v0 support.
• AWS Lambda (the serverless platform you can throw JavaScript - and more - at to have it run at your beck and call) now supports up to 10GB of memory and 6 vCPUS, 1ms billing granularity, and functions in containers.

• PWAdvent is an advent calendar covering progressive browser API techniques, like the Web Share API, manifests, and service workers.

📚 Tutorials, Opinions and Stories

Dynamically Generating Social Share Images Serverlessly— This is a perfect use case for a serverless function and a great example of post that pulls together a variety of ideas for a creative end result.

Ryan Filler

Puppeteer vs Selenium vs Playwright, A Browser Automation Speed Comparison— Spoiler: There are differences in microbenchmarks but in real world scenarios it’s basically a wash. Use whichever suits your use case.

Giovanni Rago (Checkly)

AngularJS Security Fundamentals— A collection of AngularJS security fundamentals for web developers.

Snyk sponsor

Lots of Ways to Use Math.random() in JavaScript— I’m digging the level of creativity being shown in these examples. Lots to play with, perfect for learners.

Jwahir Sundai

▶  Building a Svelte Static Website with Smooth Page Transitions— An 80-minute live coding session walking through building a site with Svelte.js with Three.js and GSAP-powered smooth page transitions.

Yuriy Artyukh

How to Understand the reduce Function in 5 Examples— Summing, seeking, chaining, and generally bringing things together.

Valeri Karpov

▶  Converting an Old jQuery Plugin to Vanilla JS— Lettering.js is a neat jQuery plugin for getting ‘letter level’ control over Web typography. It hasn’t been updated for three years, but here’s a screencast showing an attempt at removing the jQuery dependency.

Chris Ferdinandi

Introducing Repluggable: Solving The Dependency Model Challenge with Micro Frontends & Contracts

Wix Engineering sponsor

Reading John Resig's 'Pro JavaScript Techniques' 14 Years Later— Is anything still relevant from a popular book written by jQuery’s creator back in 2006? Mark thinks so.

Mark Reyes

10 JavaScript Array Methods to Simplify Your Code

A Grab Bag of Handy JavaScript 'Tricks'

JSON Formatter Live: A Minimalist JSON Formatter & Minifier, Installable as a PWA— Doesn’t store any data, is keyboard friendly, and will give you live inline error messages when you add any code.

Alexandru Năstase

JSONEditor: A Component for Viewing and Editing JSON— If your app needs to let users work with JSON, this is worth a look. It supports several models (including a tree view) and is cross browser compatible. Live demo.

Jos de Jong

Stream Chat React Native v2.0.0 Released— The official React Native and Expo library of components for Stream Chat (a service for building chat apps) is now rewritten in TypeScript to ensure type safety for easier-to-read code/debugging.

Stream sponsor

JsDiff: A Visual Comparison of JavaScript Library Metrics— NPM downloads, Google Trends, GitHub stars, open issue count, etc.

Alexey Antipov

Over 100 JavaScript Algorithms and Data Structures Demonstrated— Examples of many common algorithms (e.g. bit manipulation, Pascal’s triangle, Hamming distance) and data structures (e.g. linked lists, tries, graphs) with explanations. Available in other languages too like Chinese, Korean, French, and Spanish.

Oleksii Trekhleb et al.

Mannequin.js: A Library to Render and Manipulate a Mannequin Figure— I can’t think of any use I’d have for a animated human figure, but this is nonetheless a neat piece of work. GitHub repo.

Pavel Boytchev

Compressor.js: Client-Side Image Compressor— The idea is you’d use this if you want to compress supplied images before uploading them, say. GitHub repo.

Chen Fengyuan

noUiSlider: Lightweight Range Slider with Full Multi-Touch Support— No dependency. Fits into wherever you need it. Great homepage too. GitHub repo.

Leon Gersen

auth.js 3.0: GitHub API Authentication Library for Node and Browser— An official library, no less, and it supports four auth strategies.

GitHub

vue-select: Everything You Wish <select> Could Be, as a Vue.js Component
Jeff Sagal

💻 Jobs

Software Developer (Austin, TX)— We're a largely ex-Pivotal tech team looking for developers with all levels of experience. If you enjoy learning, collaborating, and creative problem solving then let's talk.

Stronghold Resource Partners

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— Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

#518 — December 11, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

The 'Import on Interaction' Pattern— You know what’s faster than loading lots of front-end code? Not loading it. You can then ‘lazy-load’ non-critical resources when the user needs to actually use them. Addy Osmani digs in deep as to how this can work here.

Addy Osmani

The JavaScript Christmas Advent Calendar 2020— Bekk has run these advent calendars on a variety of topics for a few years now and they’re a good source of bite size articles, tips, etc. You might enjoy The Three Ways of Fetching, What’s New in ES2021 or Machine Learning with JavaScript so far this year.

Bekk

The Easiest Way to Monitor Node: Automatic Instrumentation— Monitoring your Node.js apps can be hard. You need to understand what you need to monitor, instrument code, and then make sense of all the data. Automatic instrumentation makes that whole process easier and streamlined. Find out how you can do it.

AppSignal sponsor

Get Ready to Up Your (Google) Apps Script— Google introduced Apps Script over ten years ago as a powerful, JavaScript-powered way to script its various services (e.g. Gmail, Sheets..) Rather than shutting it down, Google has unveiled a new online IDE to make the development process far smoother.

Google

Deno 1.6 Released: You Can Now Build Executables— Perhaps the biggest post-1.0 release for the security-oriented TypeScript-leaning JavaScript runtime as it can now build self contained, standalone binaries though there are limitations and drawbacks (one being the file sizes). A promising step forward for JS tooling, though? Certainly.

Iwańczuk, Casonato, and Dahl

• The State of JavaScript 2020 Survey is back again for another year. The results of this survey are always fascinating and there's been a lot of buzz on social media about the questions this year.
• Sebastian McKenzie, the creator of the Rome toolkit, needs your help in funding the project now he's working on it full time. He also shares a lot of updates on what he's working on.
• The November 2020 update of VS Code is out — you can now set default locations of Node.js and Chrome binaries if you want to debug with different versions.
• If you didn't hear, GitHub has an optional 'dark mode' theme now.
• Someone who was only 1 year old when Brendan Eich first developed JavaScript has gone back and compiled an early JavaScript engine and put it online for you to play with. Trés cool.
• NativeScript has joined the OpenJS Foundation.
• A fantastic gist and comment thread of people code-golfing a Flappy Bird implementation down to under 200 bytes. Playable here.

📚 Tutorials, Opinions and Stories

A Deep Dive Into Rome: Linting, Compiling, and Bundling— We featured Rome’s fundraising request above, but what is it like to actually use and can it really replace tools like Prettier and Babel? Not yet, but it’s promising.

Julio Sampaio

How to Create a 'Client-Serverless' JAMstack App with Netlify, Gatsby and Fauna— This is for you if you want a complete walkthrough of building a JAMstack app with Fauna providing data over GraphQL, functions hosted by Netlify, and a Gatsby powered client side app.

Tapas Adhikary

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

Sticky Table Headers with React Hooks— For tabular data presentation, flexbox is often chosen over the seemingly old-fashioned and much maligned <table> element. But the latter can still be a good choice when aided by these techniques.

Miroslav Nikolov

'No One Ever Got Fired for Choosing React'— A modern frontend riff on the old saying about IBM. Maybe there is safety in numbers. It provoked a bit of a discussion on Hacker News too.

Jake Lazaroff

How to Create a Favicon That Changes Automatically— It doesn’t take a lot of JavaScript to make this trick happen. We also get to see how to wrap it up into a React component.

Carlo Martinucci

Node.js + Express: An OpenTelemetry Deep Dive

Lightstep sponsor

▶  A Chat with RedwoodJS's Tom Preston-Werner— A new podcast featuring Anthony Campolo and Christopher Burns that covers “fullstack jamstack”, a space that RedwoodJS is pioneering in. BTW, if Tom's name seems familiar, he was one of GitHub's founders!

FSJam Podcast podcast

From Callback Hell to Callback Heaven— ‘Reflecting back’ on the days of heavy use of callbacks.. although this is still the daily reality for many of us! :-)

Eugene Ghanizadeh

The 'Async Disposer' Pattern in JavaScript— How to automatically close and cleanup resources.

Tamás Sallai

Electron React Boilerplate 2.0: A Foundation for Scalable Cross-Platform Apps— Brings together Electron (the popular cross-platform desktop app development toolkit) with React, React Router, webpack and React Fast Refresh. 2.0 waves goodbye to Redux and upgrades to Electron 11 and webpack 5.

Electron React Boilerplate

htmlparser2 6.0.0: A Forgiving HTML and XML Parser— Consumes documents and calls callbacks, but it can generate a DOM as well. There’s a live demo here.

Felix Böhm

Announcing Prisma Migrate Preview - Simplified Database Migrations— Prisma is a Node and TypeScript ORM. Learn more about Migrate in their announcement blog post.

Prisma sponsor

SiriWave: The Apple Siri Waveform Replicated in Pure JavaScript— If you need an effect that implies sound is playing or being recorded, perhaps.

Flavio Maria De Stefano

eslint-config-prettier 7.0: Turns Off ESLint Rules That Might Conflict with Prettier

Prettier

Markdown Editor 2.0: A Simple, React-Powered Markdown Editor with Preview

Sniffer 4.0: Isomorphic Browser, Engine, OS and Device Detection
Oleg Korsunskiy

💻 Jobs

Software Developer (Austin, TX)— We're a largely ex-Pivotal tech team looking for developers with all levels of experience. If you enjoy learning, collaborating, and creative problem solving then let's talk.

Stronghold Resource Partners

Senior Web Developer (Node/ReactJS) - Remote— Millions get inspired and plan adventures with our apps. To help us make komoot.com the place to go to plan outdoor adventures, we’re looking for a one of a kind Web Developer to join our team.

Komoot

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

Vettery

#519 — December 18, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

JavaScriptLandia: The OpenJS Foundation's 'Individual Supporter Program'— A new initiative launched by the OpenJS Foundation and several prominent JavaScript community members which lets you express your support for the JavaScript ecosystem. Jory Burson and Myles Borins went on Stack Overflow’s podcast to explain what it’s all about.

Sara Chipps

A Growing Collection of 100+ Node.js Best Practices— This in-depth guide for Node developers came in as the most clicked link in Node Weekly this year and since it has continued to be updated regularly, we thought it was time to link it here too.

Yoni Goldberg

💡 Check out the top Node links of 2020 in this week's issue of Node Weekly.

10 React Security Best Practices— A checklist to help you and your team find and fix security issues in your React applications.

Snyk sponsor

JSitor: Another JavaScript, HTML and CSS Online Editor/Sandbox— I’m a big fan of tools like JSBin and CodePen for throwing together quick experiments or testing out a bit of code. This is a new alternative which has numerous layouts, very responsive autocomplete, and iOS and Android apps too.

JSitor

• Node.js has a full suite of security releases coming in the week of January 4, 2021 due to some newly discovered security issues.
• The npm registry now displays when packages have bundled TypeScript declarations. See Fastify's package page for an example.
• GitHub has got rid of its cookie banners— how? By ceasing to use all non-essential cookies. Fantastic!
• The State of JS Survey is still open if you haven't taken it yet, but probably not for long!

📚 Tutorials, Opinions and Stories

Styling console.log() Output Formatting with CSS— Like most of us (probably?) Ben forgets console.log output can be styled with CSS, so he sat down to write out a bunch of increasingly elaborate examples to make it stick.

Ben Nadel

▶  What Is GraphQL?— Drew McLellan (of Perch and 24ways fame) and Eve Porcello (co-author of Learning GraphQL) discuss GraphQL and how it can solve common API problems. (41 minutes.)

Smashing Magazine podcast

Improve Serverless Observability With AWS Lambda Extensions Integration— Learn how New Relic is integrating with the Extensions API to make monitoring your AWS Lambda functions even easier.

New Relic sponsor

Using Airtable as a Database to Store Realtime Messages— Learn how to use Airtable to store realtime messages using a group chat app built with Vue.js as an example.

Srushtika Neelakantam

An Engineering Leader’s Guide to OpenTelemetry

Lightstep sponsor

Things I Wished More Developers Knew About Databases— Our most popular link this year from Database Weekly and one I think most developers will benefit from - hence, it's here too!

Jaana Dogan

How to Create Animated, 'Apple Music' Style Cards with WebGL and Three.js
Johnny Simpson

How Redux Reducers Work
Fortune Ikechi

Moiva.io: A JavaScript Library Comparison Tool— The output is quite simple, but it plots some charts of downloads, bundle sizes, and various GitHub statistics, giving you a way to make basic comparisons. The developer has written about his motivations for building it too.

Alexey Antipov

AWS SDK for JavaScript Version 3 Now Generally Available— The next major version of AWS’s JavaScript SDK is now available and it has a new modular architecture with a separate package for each service.. so if you want to just use SQS, say, you just pull in the package for that. Browsers, Node.js and React Native are all catered for.

Trivikram Kamat (AWS)

Stream Chat React Native v2.0.0 Released— The official React Native and Expo library of components for Stream Chat (a service for building chat apps) is now rewritten in TypeScript to ensure type safety for easier-to-read code/debugging.

Stream sponsor

JSweet 3.0: A Java to JavaScript Transpiler— Java programs are transpiled to TypeScript and JavaScript for use in browsers, mobile Web views, or Node.js. BTW, if you don't like Java, the final code sample here may give you the shivers.

Cinchéo

tiny-swiper: An 'Ingenious' JavaScript Carousel— A free carousel offering a ‘native-like experience’ for the web. Zero dependencies, written in TypeScript, no attribution required. Demos here.

Joe Harris

Dynamoose 2.5.0: A Modeling Tool for Amazon's DynamoDB— As Mongoose is to MongoDB, Dynamoose hopes to be to Amazon’s DynamoDB.

Dynamoose

💻 Jobs

Full Stack Senior JavaScript/Node.js Developer - Video Platform— Melbourne based, remote friendly role, working on exciting AI powered video creation SAAS product. Apply here.

Vidnami

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— Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

#520 — January 8, 2021

Unsubscribe  |  Read on the Web

👋 We're back! Usually we end the year by looking back at the biggest items of the year, but December was so busy that we've decided to leave it till now :-) If you didn't see every issue last year (and you probably didn't!) you should find a few things in this issue that will catch your imagination.
__
Peter Cooper, your editor

JavaScript Weekly

Our most clicked links of 2020

1.  ECMAScript 2020: The Final Feature Set— TC39 (and then Ecma) approved the ECMAScript 2020 spec in early 2020, but what was new? Dr. Axel rounded it up succinctly with links to the various proposals. We also now have a draft of ECMAScript 2021 with us if you want to get prepared.. :-)

Dr. Axel Rauschmayer

2.  150+ JavaScript Questions (With Their Answers Explained)— Want to test your JavaScript knowledge? Whether for fun or a job interview, this remains an interesting set of questions, complete with explanations of the answers.

Lydia Hallie

3.  ▶️ A Look at Deno: A (Then-)New JavaScript Runtime— Deno is a new(ish) JavaScript/TypeScript runtime created by Ryan Dahl, the creator of Node.js, and it was interesting to see his second take on a similar idea. 1.0 dropped in May with later releases adding cool things like being able to create standalone executables. Will Deno continue to grow in 2021? Let's see.

Bert Belder

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

Nolan Lawson

5.  WTFJS: A List of Funny and 'Tricky' JavaScript Examples— This has been around for years but continues to resonate with developers and gets various tweaks and adjustments. Worth it if you want to take a look into some of the more “uh, what?” corners of JS.

Denys Dovhan

6.  I Created The Exact Same App in React and Vue And..— If anything is guaranteed for 2021, React and Vue will continue to push and inspire each other. The author of this post built the same app in React and Vue in both 2018 (the pre-hooks era!) and 2020 to see the differences between the two.

Sunil Sandhu

Runners up:

1. What to Pay JavaScript Developers in 2020? from Eric Elliott. Or, perhaps, what you could be earning?
2. ▶️ You Really Don't Need All That JavaScript, I Promise was a fantastic 20 minute talk on why we shouldn't rely on JavaScript as much as we often do.
3. In Goodbye, Clean Code, Dan Abramov told us to beware of premature refactoring and de-duplication.
4. JavaScript Features To Forget by David Flanagan (who's written more JavaScript books than I've had hot dinners).

🛠 Top Code & Tools of 2020

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 continued to 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 an introductory blog post.

Sebastian McKenzie

1loc: A Collection of One-line JS Snippets— A neat little collection of vanilla JavaScript one-liners divided into various categories (arrays, date/time, DOM, etc).

Nguyen Huu Phuoc

Snowpack: 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. A Snowpack 3.0 release candidate came out at the end of 2020 with the final 3.0 release due... any day now.

Fred K. Schott

Grid.js: An Advanced Table Control— 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

33 Line 'React'— Sure, React does some useful things, but you can do the same things with very little code, so.. why not? A fun experiment that was rather unlikely to replace React ;-) Also of interest was that Hacker News had its say and the author responded.

Oliver Russell

GitHub Unveiled 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 unveiled Super Linter, a combination of linters you could use with your repos via GitHub Actions for a variety of different languages.

GitHub

Vue 3.0 'One Piece' Released— Vue.js is a highly popular framework for building UIs with JavaScript, and a common alternative to things like React or Angular. Vue 3.0 was in the pipeline for so long that its eventual release post actually got relatively few clicks, but it's a huge release nonetheless with a new composition API, Teleport, and more.

Vue.js Team

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

lauren mccarthy

💻 Jobs

Senior UI/Front-End Developer— Help power the world’s largest online design school and help students worldwide learn design and improve their careers.

Interaction Design Foundation

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 Your Next Job Through Vettery— Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

#521 — January 15, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

The State of JS 2020 Survey Results— 23,765 people from 137 countries took part in the recent State of JS survey and while there are some common criticisms of the project, the results are nonetheless interesting and we’ll be digging into some in forthcoming issues. Standouts include:

• Svelte took the top frontend framework crown from React for developer satisfaction.
• Testing Library jumped straight to #1 for testing libraries.
• More developers than ever are producing PWAs or using WebAssembly.
• 86% of respondents are using VS Code to work on their code.

State of JS

Announcing TypeScript 4.2 Beta— What’s new? Leading/middle rest elements in tuple types (e.g. let bar: [boolean, ...string[], boolean]), smarter type alias preservation, stricter checks for the in operator, and more.

Daniel Rosenwasser (Microsoft)

⭐️ Professional JavaScript Learning Path— From JavaScript foundations, all the way to Hardcore Functional JavaScript, find out how far you can go with your JavaScript abilities in this comprehensive learning path.

Frontend Masters sponsor

Snowpack v3.0: Reimagining Web Development with ESM— You can now import any npm package on demand (with streaming imports), and there’s a new native JavaScript API. Oh, and it’s the one year anniversary of Snowpack’s 1.0 release! 🎉

Fred K. Schott

Node Package Maintainers, Get Ready For ES Modules— ES modules are rapidly becoming a day to day reality for Node.js package maintainers, so spare a thought for Sindre who has about 20 million packages (slight exaggeration) to his name. Sindre shares some basics on why it’s important and what his plans are.

Sindre Sorhus

📖 Articles, Opinion & Tutorials

Advanced Promise Patterns: Promise Memoization— Memoizing async methods to simplify caching and avoid common race conditions. An interesting example of memoization 👍

Jon Mellman

▶  Building FPGA Hardware Using TypeScript: Driving an RGB LED Panel— Most people aren’t likely to play with FPGAs rather than cheaper microcontrollers but this is a wonderful detailed JS-flavored look into that world.

Low Level JavaScript

How to Implement An Exponential Backoff Retry Strategy— Automatically retry an async operation in an efficient way

Tamás Sallai

The Effortless Backend for JavaScript Applications with GraphQL— Add state to your JavaScript apps effortlessly with Fauna - the secure and operations-free data API for Jamstack.

Fauna sponsor

10 Best Practices to Containerize Node Webapps with Docker— Production-grade guidelines for building optimized and secure Node-based Docker images whether for microservices, server-side rendering, or stand alone apps.

Liran Tal and Yoni Goldberg

The navigator.clipboard API— A look at async read and write methods for managing clipboard data.

David Walsh

▶  Working with WebSockets on AWS— A 30 minute screencast focusing on using API Gateway as a WebSocket endpoint to talk with a serverless Lambda function. Both the client and the serverless function are written in JavaScript, of course.

Ryan H Lewis

▶  Building Your Own E-commerce System in 25 Days— 25 videos covering 25 days of using Next.js, Netlify and Stripe to build an e-commerce system.

Jon Meyers

OpenTelemetry and Observability: Achieving Full System Visibility

Lightstep sponsor

Deploying a Serverless Jamstack Site with RedwoodJS, Fauna, and Vercel— A neat combination of ideas and technologies here. RedwoodJS is a ‘full stack Jamstack’ framework (created by one of the co-founders of GitHub), Vercel provides the deployment and hosting, and Fauna is a serverless database/data API.

Anthony Campolo

▶  Publishing a Vue.js 3 Component on npm

Lachlan Miller

Altair: A Feature-Rich Cross Platform GraphQL GUI Client— A tool clearly written using Web technologies but available for macOS, Windows, Linux, etc. for testing and working with GraphQL and GraphQL APIs.

Sir Muel

Merge Chance: Will Your Pull Request Get Merged?— A very bare bones, but interesting, tool for seeing what percentage of a project’s pull requests from outsiders get merged in. For example, 83% do for Redis whereas only 23% do for Vue.js.

Piotr Zakrzewski

Cheerful, Collaborative Project Management— Some PM tools are too simple. Others, unwieldy and unpleasant. Clubhouse is nothing but good adjectives. Give us a try.

Clubhouse.io sponsor

Compiled: Build Time Atomic CSS-in-JS— Write your styles in JavaScript with the full power of CSS then have them compiled ahead of time. GitHub repo.

Atlassian

svelte-dnd-action: An Action-Based Drag and Drop Container for Svelte— Makes the bold claim that it “supports almost every imaginable drag and drop use-case, any input device and is fully accessible.”

Isaac Hagoel

Handtrack.js: Realtime Hand Detection in the Browser— Of course, there’s a demo. It seems to work pretty well.

Victor Dibia

vno: A Vue / Deno Love Story?— The first native build tool for compiling and bundling Vue single-file components in a Deno runtime.

Andrew Rehrig

Announcing Scala.js 1.4.0— Build robust front-end web applications in Scala with Scala.js

Scala.js

💻 Jobs

Senior JavaScript Engineer - Platform Engineering (Berlin, DE)— Help us improve our web performance & frontend infrastructure with actionable feedback, scalable workflows & tools our devs love to use.

ResearchGate

Senior Frontend Developer (m/f/d)— We’re looking for talented React / React Native devs to join our InsureTech-Team and help us shape the insurance world of tomorrow. Offering responsibility, ownership and growth possibilities.

Getsafe Digital GmbH

Find Your Next Job Through Hired— Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

Hired