#​548 — July 23, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

JetBrains' 2021 Developer Ecosystem Survey Results — Over 30,000 developers took the State of Developer Ecosystem 2021 survey, with 70% being JavaScript users. You can find the JavaScript-specific results here. Some interesting stats came of this:

• React is regularly used by 49% of respondents, with Vue.js at 43%.


• Go, TypeScript, and Python are the most common other languages JavaScript developers plan to learn soon.


• 42% claim to not to write unit tests regularly.


• Home working is, unsurprisingly, suddenly popular with 83% of developers WFH compared to 31% pre-pandemic.

JetBrains

💡 If you like this sort of thing, last year's State of JS results may also be of interest.

Easier Browser Debugging with Developer Tools Integration in VS Code — If you’re a VS Code user, you no longer have to use the Chrome Debugger or Edge Debugging extension as JavaScript debugging is now built in to the popular editor. Christian Heilmann has more on this here.

Microsoft Edge Blog

Locate and Resolve JavaScript Errors Instantly with Datadog — Troubleshoot user-facing incidents and resolve frontend JavaScript errors in context with the ability to correlate error logs with individual user sessions with one click. Try it yourself with a free Datadog trial.

Datadog sponsor

Plate 1.0: A Plugin Framework for Building Rich Text Editors with Slate — Slate is a framework for building rich text editor controls, and Plate abstracts things one level higher offering a plugin system for adding your own functionality. Look at the big demo on the homepage to see the benefits. GitHub repo.

Taylor, Beyens and Murray

Node-RED 2.0 Released — Node-RED is a now very mature ‘low-code’ Node.js-based programming environment, particularly aimed at connecting together services or IoT devices. The 2.0 release focuses on upgrading dependencies, dropping old Node version support, and an (optional) improved text editor.

OpenJS Foundation

QUICK BITS:

• 
  

  It's not of much use, but technically a URL can be valid JavaScript.

  
  


• 
  

  After years in beta, Fastly has launched its Compute@Edge serverless edge compute platform.

  
  


• 
  

  A beautiful example of photorealistic glass in the browser using Three.js.

  
  

RELEASES:

Hyper 3.1 – JS-powered terminal app.

RxDB 10.0 – Realtime database for JavaScript apps.

AdminJS 5.1 – Automatic admin interface for Node apps.

GoldenLayout 2.3 – Multi-screen layout manager for webapps.

flv.js 1.6 – HTML5 FLV Player.

📖 Articles, Opinions & Tutorials

Simple Monorepos via npm Workspaces and TypeScript Project References — How to set up a simple monorepo for two npm packages using just what comes with npm and TypeScript.

Dr. Axel Rauschmayer

▶  Code Zelda in JavaScript with Kaboom.js — Ania is back with another fun walkthrough. For your hour this time you get to build the bare bones of a NES-era Zelda game.

Ania Kubów

5 Reasons Not to Write Your JavaScript Data Grid from Scratch — Data grids are essential for every business app. Before you decide to roll your own, learn about these common pitfalls.

Progress Kendo UI for Angular sponsor

Trackball Rotation using Quaternions — How can you implement a 3D ‘trackball’ that you can control with a 2D interface like a typical trackpad? With Trackball.js is how.. but you can attempt to understand the math in this article if you wish.

Robert Eisele

then(f,f) vs then(f).catch(f) — A quick look at the difference between two approaches with promises.

Dmitri Pavlutin

Building a 'Typewriter Animation' That Handles Anything You Throw at It — A thorough dig into what’s involved in creating an interesting frontend effect with JavaScript. The end result looks neat.

Murtuzaali Surti

[Free Workshop] Building an IoT application with InfluxDB — Learn how to develop a JavaScript-enabled time-series-based application using Kafka queues, RabbitMQ and InfluxDB Cloud.

InfluxData sponsor

Creating a Typography Motion Trail Effect with Three.js

George Nikolov

Three Insights I Gained While Researching Vue.js Accessibility

Marcus Herrmann

Building a ‘Table Of Contents’ with Active Indicator using Intersection Observers

Ben Frain

Dinero.js: A Library for Working with Monetary Values — Express monetary values and perform mutations, conversions, comparisons, handle formatting, and generally make money manipulation easier. GitHub repo.

Sarah Dayan

Abracadabra: JS and TS Refactoring Tool for VS Code — While VS Code supports some refactoring techniques out of the box, Abracadabra magics up many more including numerous conditional logic changes, inlining, and syntax conversions. It can also suggest ‘quick fixes’ - refactorings that make sense in the current context.

Visual Studio Marketplace

Color: A Color Conversion and Manipulation Library — Immutable color conversion and manipulation with support for CSS color strings.

Qix

Clubhouse.io - We Put the Agile in Agile and the 'Can' in Kanban

Clubhouse.io sponsor

Tangram: An Automated Machine Learning Framework — It’s not solely for Ruby – indeed, it’s written in Rust – but you can train a model from a CSV file and then make ‘predictions’ from JavaScript (or Ruby, or Python) code. GitHub repo.

Tangram

Bulletproof React: An Architecture for React Apps — Using a group chat app as the case study, the author touches on every significant aspect of building and deploying a React application which will make it “bulletproof” and therefore production ready. Note, however: "This is not supposed to be a template or a framework. It is an opinionated guide that shows how to do some things in a certain way."

Alan Alickovic

Color Thief: Grab Color Palettes from Images — Given an image, this uses canvas to return a list of the dominant colors.

Lokesh Dhakar

FZF for JavaScript: Fuzzy Finding for the Browser — fzf is a tool written in Go for ‘fuzzy finding’ files but here the idea has been adapted to JavaScript and the Web so it can be used for similar fuzzy finding in webapps.

ajit

veux-persistedstate: Persist and Rehydrate Your Vuex State Between Page Reloads

Robin van der Vleuten

#​547 — July 16, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

V8 v9.2 and the at Function — Every step forward the popular V8 JavaScript engine takes is news, but this is a relatively minor step with the biggest practical addition being the new 'at' method for Array, TypedArray and String. Oh, and Firefox 90 supports it too, plus a couple of other goodies.

Ingvar Stepanyan

The Road to Ember 4.0 — The Ember.js framework is ten years old this year and while it’s not often in the headlines, it’s one of the most solid, reliable and battle tested systems out there and a big update is on the way.

Matthew Beale

What If Your Project Management Tool Was Fast and Intuitive? — Imagine how much more you could get done if your project management tools didn't make you sigh. Clubhouse is the ideal solution for task management, bug tracking, iteration planning, and reporting. Delight the scrum gods and give us a try.

Clubhouse.io sponsor

HTM 3.1.0: A JSX Alternative using Standard Tagged Templates — This clever library has been around a few years but sees an update this week. Think JSX-style syntax but in plain JavaScript (using tagged templates) that requires no transpilation but still supports things like rest spread and referencing components.

Jason Miller

Deno 1.12 Released — The ‘server side JavaScript runtime that isn’t Node’ takes some more steps forward with TypeScript support in its REPL, improved Web Crypto support, and you can upgrade incoming HTTP requests on the (unstable) HTTP server to WebSocket connections.

Casonato and Iwańczuk

QUICK BITS:

• 
  

  Hemanth HM shares updates from the latest TC39 meeting and the proposals discussed. He's also published ▶️ a new episode of the TC39er podcast interviewing Mozilla's Yulia Startsev about work on SpiderMonkey.

  
  


• 
  

  Want to perform a card trick with some JavaScript powered 'mind reading'? ▶️ Computerphile has you covered.

  
  


• 
  

  Did you know you can get Postgres to return JSON directly?

  
  


• 
  

  Puppy is a neat minimal experimental Web browser written in Rust that supports JavaScript via V8.

  
  


• 
  

  It's not JavaScript at all but I was still blown away to learn about the almost 100 different types of DNS record that exist.

  
  

RELEASES:

Node 16.5.0 – Now with experimental support for the Web Streams API.

Turf.js 6.5 – Geospatial analysis library.

node-mongodb-native 4.0 – Big release for the official MongoDB driver.

tXml 5.0 – Fast pure JavaScript XML parser.

📖 Articles, Opinions & Tutorials

Building a Dynamic Header with Intersection Observer — Ever needed to have a component respond to elements as they’re scrolled to a certain threshold within the viewport? Attaching an event listener to constantly fire on scroll can be performance intensive, but there's a better way..

Michelle Barker

How to Convert Arrays to Human-Readable Lists — A pretty quick tip here, leaning on Intl.ListFormat which deftly takes care of formatting a list in a locally appropriate way.

Amit Merchant

▶  Information Foraging: Tricks Great Developers Use to Find Solutions — Professor Austin Henley explains the tactics veteran developers use to quickly find the best solutions.

Stack Overflow Podcast sponsor

The Ultimate Guide to Browser-Side Storage — Does a pretty good job of covering all the options, right from variables through localStorage and on up to non-standard browser APIs you probably don’t want to be using.

Craig Buckler

How To Migrate from jQuery to Next.js — The title put a confused expression on my face when I first saw it, but it’s broadly about going from a jQuery-based approach to a React-based one for common frontend tasks.

Facundo Giuliani

A Checklist for Freelance React Developers — Robin covers a variety of things to think about if you’re an independent React developer who needs to seamlessly get involved with existing teams and projects.

Robin Wieruch

How Debugging is Changing: Cut Debugging Time with New Approaches to Tracking/Dealing with Errors

Rollbar sponsorebook

Running a Next.js Site on Cloudflare Pages

Patrick Heneise

Notion API: Getting Started with Notion's JavaScript SDK

Rui Sousa

Vue 3 Migration Build: Safely Upgrade Your App to Vue 3

Andy Li

FracturedJson: A Browser-Based JSON Formatter — Produces “human-readable but fairly compact output.” I like this. It’s not your typical linter but turns big lumps of JSON into something that it’s pleasant to look through.

J Brooke

mem 9.0: Simple Memoization Library — Memoization is an optimization technique used to speed up consecutive function calls by caching the result of calls with identical arguments.

Sindre Sorhus

devcert: Development SSL/TLS Certificates Made Easy — Need a certificate for local development when using Node? This package takes an interesting approach of creating its own root authority and issuing certificates automatically against it. It’s so slick though, I was impressed by it in my tests.

Dave Wasmer

Monitor Lighthouse Scores and Core Web Vitals — DebugBear continuously monitors site speed and provides front-end developers with the data they need to improve it.

DebugBear sponsor

new-tailwind-app: A Node-based CLI to Generate Boilerplate Code for Different Tailwind Apps — Like create-react-app, but for Tailwind. Start a plain Tailwind project or generate one with based on Next.js, React, Gatsby, or Vue, with Prettier integration.

Saad Irfan

Filesize.js 7.0: A Library to Create Human Readable File Size Strings — For example: filesize(265318) returns 259.1 KB. GitHub repo.

Jason Mulligan

LiveKit: A Go-Powered Server for Real Time Audio and Video — An open source infrastructure project for building and scaling realtime WebRTC powered audio and video experiences in apps. It’s new but there are already SDKs for iOS, JavaScript in general, React, and Android.

LiveKit Team

React Virtual 2.8.0: Hooks for Virtualizing Scrollable Elements — With a single headless hook you can work with row, column and grid level virtualization, get imperative scrolling when needed, custom scrolling function support, and more. Lots of CodeSandbox demos here too.

Tanner Linsley

#​546 — July 9, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

The State of Web Workers in 2021 — The web is typically single-threaded, but two years ago Surma told us why to always use Web Workers to bring multithreading to your solutions despite the difficulties. Almost every client supports them now, so Surma makes the case again and explains why Web Workers deserve a place in your projects.

Surma

How export default thing is Different to export { thing as default } — When someone like Jake ends up having to chat to the V8 team to figure something out and then learns something, it’s worth following along. Off down the export rabbit hole we go...

Jake Archibald

Uptime Monitoring Is Now Available in AppSignal — Uptime monitoring is the first line of defense against downtime. Ping your apps every minute from 4 locations around the world and receive alerts when something is down. Now you'll know about downtime before your users do.

AppSignal sponsor

npm audit: Broken by Design — “The way npm audit works is broken. Its rollout as a default after every npm install was rushed, inconsiderate, and inadequate for the front-end tooling.” Dan adopts an untypically critical tone but does a good job of demonstrating how vulnerabilities are not all alike when it comes to whether they matter.

Dan Abramov

A Look at Building with Astro — Astro, which we featured a month ago, is a new framework for building sites where you get to use JavaScript frameworks but sites are rendered in static form.

Chris Coyier

Elementary: React-Inspired Functional, Declarative Audio Applications — Can writing audio DSP software be “simple, fast and fun”? Not up until now, but Elementary intends to change all that, and thus lowering the barriers to entry for this burgeoning field.

Nick Thompson

Quick Bits

• How about a two-player self hosted Tic-tac-toe game in 640 bytes of JavaScript?
  


• When I see someone flashing an ESP32 microcontroller from the browser, it reminds me just how far JavaScript and browsers have come.


• Did you know you can run scripts (written in JavaScript) on a schedule on your Google Sheets spreadsheets? Here's a Twitter thread explaining how.
  

Releases

Highlight.js 11.1 — Web syntax highlighter library.

Gatsby 3.9 — React 'dynamic site generator.'

zx 2.0 — Better scripting with Node.js.

Snowpack 3.8 — Module driven frontend build tool.

ckeditor 29.0 — Rich text editor framework.

Rollup 2.53.0 — Next-generation ES module bundler.

TIFF 5.0 — TIFF image decoder written entirely in JS.

📖 Articles, Opinions & Tutorials

TypeScript and Native ESM on Node.js — This topic comes up time and time again, and for good reason - it’s the way things are headed. Dr. Axel covers the essentials you need to know in order to use and produce native ECMAScript/ES modules on Node when using TypeScript.

Dr. Axel Rauschmayer

How to Use Promise.all() — Handle multiple promises at once, in parallel, and then get the result in a single aggregate array.

Dmitri Pavlutin

Ultimate Guide to Building a UI Library: Building Robust Components — TJ VanToll shares what he’s learned from over a decade of writing and working with UI components. Go to the blog series.

Progress KendoReact sponsor

When a Click is Not Just a Click — There are nuances to consider when listening for a click event (such as a ‘click’ sent from a keyboard versus one from a mouse). This post dives into how you can distinguish different types, and what opportunities arise from identifying them.

Travis Almand

▶  Using Deno Deploy to Release Super Fast Cloud Functions — Jack promises a look into the “potential JavaScript future” by building a chat app using Deno (a Node-a-like built by Node’s original author, no less) and deploying it on the Deno Deploy platform. This is easy to understand and follow along with, and the approach taken feels so natural.

Jack Herrington

Breaking Down Bulky Builds with Netlify and Next.js — Using Next.js’ Incremental Static Regeneration (ISR) coupled with on-demand builders and Netlify’s Next on Netlify build plugins to create a site that builds certain routes only when needed, cutting the build time down dramatically.

Átila Fassina

The Ultimate Guide to Cardinality for Observability

Lightstep sponsor

How to Structure a Large Scale Vue.js App

Daniel Kelly

What Is WebAssembly — and Why Are You Hearing So Much About It?

Mary Branscombe

html2canvas 1.0: A JavaScript HTML Renderer — Take screenshots of pages or elements of pages and render them to canvas. There’s a live demo to the bottom right of the homepage. GitHub repo.

Niklas von Hertzen

pdfmake: Client/Server Side PDF Generation in Pure JavaScript — There’s a live playground of it in action, plus lots of code examples of how to use it to various ends. Built on top of pdfkit.

Bartek Pampuch

Fuzzball: Fuzzy String Matching Library — To tackle those cases where what’s typed isn’t quite what’s indexed. There’s a neat tree-themed Web-based demo. GPL licensed.

Nolan

Understanding and Preventing Common Security Vulnerabilities — Join Buildkite on a tour of some of the most common security problems companies face, and how you can prevent them.

Buildkite sponsor

Mantine 2.0: Full Featured React Component Library — An MIT licensed, TypeScript-based collection of over 100 components and hooks with native dark theme support and a focus on usability and accessibility. Plenty of documentation and examples.

Mantine Team

imask.js: A Vanilla JavaScript Input Mask — Rather than validate the syntax of input fields, how about preventing users from even entering invalid values?

imaskjs

TypeBox: JSON Schema Type Builder with Static Type Resolution for TypeScript — A type builder library that creates in-memory JSON Schema objects that can be statically resolved to TypeScript types.

Haydn Paterson

fzstd: High Performance Zstandard Decompression in a Pure JS Package

Arjun Barrett

Johnny Five 2.1: A JavaScript Robotics and IoT Programming Framework

Rick Waldron

Vue 3 Starter: An Opinionated Starter Template for Vue.js Projects

Gentrit Abazi

#​545 — July 2, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

Temporal: Getting Started with JavaScript’s New Date and Time API — JavaScript’s Date object and API is hard work at the best of times, but a lot of work has been done on Temporal, an all new approach currently at stage 3. Dr. Axel gives us a through, practical tour. Fantastic.

Dr. Axel Rauschmayer

Solid 1.0: A Declarative JavaScript UI Library Worth Investigating — JavaScript isn’t short of good reactive frameworks (React, Svelte, Vue..) but Solid’s creator is determined and adamant to demonstrate how Solid addresses React’s shortcomings while offering Svelte-like simplicity. He makes a good case, so try and give him at least a few minutes of your time.

Ryan Carniato

Download FusionAuth Today and Get a Free T-Shirt — FusionAuth is a modern CIAM that's fully customizable for your team. Implement complex standards like OAuth, SAML, and OpenID Connect. Build out additional features like SSO, MFA, and branded login pages. Plus, it's always free for unlimited users.

FusionAuth sponsor

🎲  The 'JS is Weird' Quiz — How well do you think you know the trickiest corners of JavaScript syntax and dynamic typing? Put yourself to the test with these 25 questions. I’m not even going to share my pathetic score.. 😂

Jacob Bergdahl

Quick Bits

• Think you can make something cool happen in just 1024 bytes of JavaScript? JS1024 is for you. It's an annual contest to create the most striking thing in 1KB. Here's one of last year's winners.
  


• There are fresh security releases of each maintained Node.js branch.


• The Chrome team has unveiled the work they're doing to create the 'next generation' of rendering engine for Chrome.


• 
  Google has delayed its plans to block third-party cookies in Chrome until 2023.


• Need some weekend reading? Read this (extremely) thorough guide to JavaScript's first 20 years.
  

Releases

TypeScript 4.4 beta 1 — The JavaScript superset.

p5.js 1.4.0 — Processing-inspired creative coding library.

Stepzilla 7.0 — Form/wizard helper for React components.

web3.js 1.4 — Ethereum JS API.

Plotly.js 2.2 — Charting library.

Espree 8.0 — Esprima-compatible pure JS JavaScript parser.

📖 Articles, Opinions & Tutorials

Encoding Data for POST Requests Properly — While we’re talking Copilot, Jake noticed that an example it threw up isn’t all that great security wise, and spun it into a good lesson about creating HTTP data bodies properly, while covering things like URLSearchParams and FormData along the way.

Jake Archibald

How to Structure and Organize a React App — We've featured a variety of "how to structure React apps" pieces in the past, but it remains a perennially interesting topic as there really is no one way. Tania is always fantastic at explaining things though, so we really like this one.

Tania Rascia

Continuously Improve Your Code with Rollbar — Deploy with confidence at every development stage & set up AI-assisted workflows for fast resolution. Spend more time building. Less time fixing. Try it for free.

Rollbar sponsor

Sorting Colors in JavaScript — Sounds easy but.. there’s some nuance to doing this. An interesting exploration.

Tomek Nieżurawski

Lessons From Building a Static Site Generator — The backstory behind Elder.js and the thinking behind the biggest design decisions involved.

Nick Reese

Image To Text Conversion With React and Tesseract.js

Ayobami Ogundiran

Milkdown: A Plugin-Driven WYSIWYG Markdown Editor — Built on top of CodeMirror, the plugin system lets you easily enable or disable features like tables, LaTex support, and slash commands. Try it out here.

Saul Mirone

A Code Generator for Making HTTP Requests — A simple but sweet tool for defining what HTTP request you want to make (including headers, request body, and certain types of auth) and you can then copy/paste code for Node (Axios is used here), curl, fetch in the browser, or Google Apps Script (it’s JavaScript but very specific to Google’s environment).

Amit Agarwal

Instant GraphQL Backend for Your Apps | Get Started for Free in 30 Seconds — Point Hasura at your data & instantly get realtime GraphQL APIs without the need to build & operate a GraphQL Server.

Hasura sponsor

Slowfil.es: Deliberately Slow HTTP Resources for Testing — We’re all told to make our sites as fast as possible and there are numerous ways to improve the experience when page elements like images or fonts are slow to load, but if you want to test what happens for real.. this service could help introduce some true sluggishness into your system.

Harry Roberts and Ryan Townsend

Google's New Tool for Understanding Package Dependencies — deps.dev is an experimental project by Google that scans places like GitHub and the npm registry for package info, determines full dependency graphs, and then lets you navigate this data.

Google

Million: A Less-than-1KB Virtual DOM Implementation — Aims to fix many of the problems in other abandoned and overcomplicated solutions with a library-agnostic virtual DOM alternative. GitHub repo.

Million

Gute: A Simple JS Library for Building Web Games — Currently provides game loop, input, sounds, music, and tilesets for building simple web-based games. See an example here.

Coke And Code

Build In-App Chat Like iMessage, Telegram or Slack with Stream's React Native SDK

Stream sponsor

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

Jeff Barczewski

XO: An Opinionated but Configurable ESLint Wrapper

XO

👾 And one for fun..

A Fortnite-Inspired VS Code Theme — No, me neither, but I’ve gotta admit I really like this color scheme. Vibrant!

Sarah Drasner