Industry News

#​624 — February 3, 2023

Read on the Web

JavaScript Weekly

You’ve Got Options for Removing Event Listeners — Unnecessary event listeners can cause all sorts of odd problems so it’s good to clean them up when you don’t need them anymore. How? There are several approaches and Alex looks at their pros and cons. (once is a good one to consider if your use case supports it as it’s ‘set and forget.’)

Alex MacArthur

Updates from the 94th TC39 meeting — The TC39 committee that works on the ECMAScript standard met last week and progressed a few language proposals with Change Array by Copy, Intl.NumberFormat v3 and Symbols as WeakMap Keys making it to stage 4. There’s also an interesting example of a downgrade to stage 2 for import assertions.

Hemanth HM

Fast and Flexible Gantt Chart Components for Your Web App — Bryntum's suite of web components includes powerful Gantt and resource scheduling widgets used by thousands of businesses. The API is very flexible and allows you to configure everything from colors to details of the scheduling logic. Free 45-day trial.

Bryntum sponsor

Netlify Acquires Gatsby — The company behind the Gatsby React-based framework is joining Netlify with many Gatsby Cloud features expected to be integrated into Netlify’s own platform. This places Netlify more directly against Vercel who are behind Next.js (and don't forget Shopify with Remix too).

Kyle Mathews (Gatsby)

You May Not Need Lodash or Underscore — Inspired by the popular You Might Not Need jQuery, this extensive document provides plain JavaScript alternatives to almost 100 different functions you’d find in popular utility libraries like Lodash and Underscore.

You Don't Need

The Future of Create React App and Why It Exists — An extensive write up from Dan Abramov on the state of Create React App, a route to take it forwards, and how he sees React as a library working within an ecosystem of frameworks.

Dan Abramov

RELEASES:

• 
  

  Node.js v19.6.0 (Current)

  
  


• 
  

  Node.js v18.14.0 (LTS)

  
  


• 
  

  Electron 22

  
  


• 
  

  TestCafe 2.3
  
  ↳ End-to-end Web testing.

  
  


• 
  

  Docusaurus 2.3
  
  ↳ Popular documentation site generator.

  
  


• 
  

  Jotai 2.0

  
  

📒 Articles & Tutorials

How To Lose Functional Programming at Work — An amusing piece you might recognize parts of. It's certainly possible to have too much of a good thing. “If you’re looking to lose functional programming at work, here are a bunch of mistakes I’ve made on JS-heavy web teams over the years that can help you do the same.”

Robert Pearce

How Node & SWC Can Make a Lightning Fast TypeScript Runtime — If the added compilation time for TypeScript has irritated you so far, Artem has found a way to get things as fast as possible.

Artem Avetisyan

▶  Tailwind CSS, Headless UI, and Powerlifting with Adam Wathan — We talk to Adam about what motivated him to create Tailwind and why it is creating polarizing discourse among developers.

Whiskey Web and Whatnot sponsorpodcast

The Road from Ember Classic to Glimmer Components — If you’ve got a mature Ember.js project you want to modernize, this is for you.

Ignace Maes

Using JavaScript in a Swift App — One for iOS app developers. It’s not perfect but at least it’s an option.

Douglas Hill

Cleaner Unit Tests with Custom Matchers — Using custom matchers to avoid repetitive and ambiguous assertions in Jest.

Jamie King (American Express)

The Yaml Document from Hell: JS Edition — The titular problematic document was spawned in this blog post focusing on Python, but Phil looks to see if JS YAML parsers have the same problems with the much maligned format.

Phil Nash

Too Much Tech Debt and Outdated Packages? Don't Have Time to Upgrade?

UpgradeJS by OmbuLabs sponsor

On Using Playwright in GitHub Actions

Radosław Miernik

How I Made My App 2.4x Faster Switching to Svelte

Flotes Tech Blog

🛠 Code & Tools

FeedbackPlus: Add Screenshot Tools to Your Feedback Forms — Say you’ve got a form on your app to let users submit bugs or feedback and you’d like to encourage them to send a screenshot too – this makes it easier to do. Live demo.

ColonelParrot

▶  ScrollyVideo.js: Responsive 'Scrollable' Videos — It’s an interesting effect and well demonstrated here. Compatible with React, Svelte, Vue, or just plain ole’ HTML.

Daniel Kao

Stop Sweating Over Supply Chain Security with Snyk — Get the security practices and tooling to bolster your build pipeline from Snyk’s article on npm security and preventing supply chain attacks.

Snyk sponsor

depngn: Find Out if Dependencies Support a Given Node Version — A CLI tool that establishes whether dependencies in your package.json will work against a specified Node version. May be helpful during upgrades.

OmbuLabs

Eta 2.0: Embedded JS Template Engine for Node, Deno, and Browser — Boasts being lighter and faster than EJS but with many of the same features (it looks a lot like Ruby’s ERB). GitHub repo.

Ben Gubler

Swiper 9.0: Mobile Touch Slider with Accelerated Transitions — Tree shakable, library agnostic, and focused entirely on modern browsers and web APIs. RTL support too. GitHub repo.

Vladimir Kharlampidi

UUID.js: RFC-Compliant UUID Generator — Supports v1 and v4 UUIDs.

LiosK

• 
  

  ReScript 10.1
  
  ↳ OCaml-inspired compile-to-JS language.

  
  


• 
  

  OrgChart 3.4
  
  ↳ Render org charts. (Lots of demos.)

  
  


• 
  

  clipboard-polyfill 4.0
  
  ↳ 'Copy to clipboard' for older browsers and edge cases.

  
  


• 
  

  morphdom 2.7
  
  ↳ DOM diffing/patching – no VDOM needed.

  
  


• 
  

  relative-time-element 4.2
  
  ↳ GitHub's extensions for <time>

  
  


• 
  

  js-bson 5.0
  
  ↳ Binary JSON parser and serialization.

  
  


• 
  

  React Date Picker 4.10
  
  ↳ Simple date picker React component.

  
  


• 
  

  JustValidate 4.1
  
  ↳ Lightweight form validation library.

  
  

🎁 Last But Not Least

Madge 6.0: Create Graphs From Your Module Dependencies — A developer tool for generating a visual graph of your module dependencies (works with CommonJS, AMD and ES modules), finding circular dependencies, and discovering other useful info.

Patrik Henningsson

#​623 — January 27, 2023

Read on the Web

JavaScript Weekly

Astro 2.0: The Next-Gen 'Islands'-Oriented Web Framework — 2.0 includes hybrid rendering (mixing of SSR and SSG outputs), type safety for Markdown & MDX, and an upgrade to Vite 4.0. Astro is worth exploring when performance is key as it works with popular frameworks but lets you deliver the least JS possible to get pages rendered.

Fred Schott

Prefer a talk? Nate Moore's ViteConf talk ▶️ Islands Architecture, Astro, and You will bring you up to speed.

Deep Cloning Objects in JavaScript, The Modern Way — If you’ve been leaning on something like Lodash for deep cloning, you might not need to any longer. “It’s been a long time coming, but we finally now have the built-in structuredClone function to make deep cloning objects in JavaScript a breeze.”

Steve Sewell

Go From Professional Web Developer to Lead Engineer — Aspiring lead developer? Our collection of comprehensive video courses cover the fundamentals of JavaScript, TypeScript, React, web performance, and more.

Frontend Masters sponsor

Announcing TypeScript 5.0 Beta — A new major version number, but users of the popular typed JS superset will face a ‘similar upgrade experience’ to previously. Decorators make it in as a first class feature, significant performance and package size optimizations are present, export type * is supported, all enums are now union enums, and much more.

Daniel Rosenwasser (Microsoft)

AlaSQL.js 3.0: Isomorphic JavaScript SQL Database — A SQL database you can use in the browser, Node.js or mobile apps. An interesting bit of functionality is you can use SQL to query JavaScript objects – example. “The library adds the comfort of a full database engine to your JavaScript app. No, really.”

Andrey Gershun

IN BRIEF:

• 
  

  🏅 If you're really into Vue.js, you'll soon be able to become officially certified in it.

  
  


• 
  

  If you're using React, you should be using a React framework, 🐦 says Andrew Clark of the core team.

  
  


• 
  

  The creator of alternative JS runtime Bun asks: "If there's one thing missing from Bun for you to switch, what is it?" You can reply on Twitter.

  
  


• 
  

  jQAPI.com is an amazing meeting of old and new JavaScript – it's an Astro powered version of jQuery's documentation!

  
  

RELEASES:

• 
  

  Shoelace 2.0
  
  ↳ Agnostic library of web components.

  
  


• 
  

  μFuzzy 1.0
  
  ↳ Tiny fuzzy search library.

  
  


• 
  

  React Router 6.8

  
  


• 
  

  Node.js 19.5.0

  
  

📒 Articles & Tutorials

Getting Started with SvelteKit — SvelteKit only recently hit 1.0 and this is a comprehensive overview of how to build a site using the Svelte-oriented app framework. It covers topics like routing, layouts, data, props and more.

Adam Rackis

Using .NET Code from JavaScript using WebAssembly — “Starting with .NET 7, you can easily run any .NET method from JavaScript without needing the whole Blazor framework.”

Gérald Barré

JavaScript Scratchpad for VS Code (2m+ Downloads) — Quokka.js is the #1 tool for exploring/testing JavaScript with edit-continue experience to see realtime execution and runtime values.

Wallaby.js sponsor

scrollend: A New JavaScript Event — Finally an event you won’t need a hotel booking for. scrollend provides a new way to detect that a scrolling operation is complete in the browser. Is it another Chrome-only nicety? Surprisingly not – Firefox 109+ supports it too.

Adam Argyle (Chrome Team)

Packaging Rust Apps for the npm Registry — Isn’t npm just for JavaScript projects? Nope. Node is required to make this technique work, but as long as you can package and execute a binary, you’re good to go.

Orhun Parmaksız

Making Sense of TypeScript using Set Theory — This article certainly doesn’t hang around. Neat diagrams too.

Vladimir Klepov

React Authentication, Simplified

Userfront sponsor

Accessible Hamburger Buttons without JavaScript — Sometimes you need to consider if modern techniques allow you to avoid JavaScript. Here’s a CodePen if you want to play.

Pausly

While we're on the topic of less JavaScript, the latest episode of the Stack Overflow podcast ▶️ 'The less JavaScript, the better' focuses on Astro.

🛠 Code & Tools

Uppy 3.4: Powerful, Modular JavaScript File Uploader — Upload not just from local sources but even Dropbox or Instagram. Integrates with popular frameworks and supports resumable uploads. GitHub repo.

Transloadit

Nut.js 3.0: Desktop Automation from Node — Take control of your desktop (Windows, macOS or Linux) in code with control over keyboard + pointer, along with image matching functionality. GitHub repo.

Simon Hofmann

Optimize Your Systems' Performance With TelemetryHub - Real-Time Data Monitoring & Analysis — An advanced data visualization and analysis tool that can help you identify and resolve unseen issues in your environment. Try free.

TelemetryHub by Scout sponsor

Eleventy v2.0: First Beta of the Popular Site Generator — Eleventy is a popular Node.js static site generator and v2.0 includes enough major changes that a thorough beta is needed. The creator ▶️ made this quick video about the release.

Zach Leatherman

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

Artem Zakharchenko

Drift: A Self-Hostable Gist-Like / Pastebin Service — Built with Next.js 13.

Max Leiter

• 
  

  Dygraphs 2.2
  
  ↳ Interactive charts of time series data.

  
  


• 
  

  actions/github-script 6.4
  
  ↳ Write GitHub Actions workflows in JS.

  
  


• 
  

  Playwright 1.30
  
  ↳ Browser automation framework.

  
  


• 
  

  Faast.js 6.4
  
  ↳ Serverlessly call JS functions on AWS Lambda & Google Cloud Functions.

  
  


• 
  

  Cypress 12.4
  
  ↳ Testing framework for anything in a browser.

  
  


• 
  

  D3plus 2.1
  
  ↳ Extend D3.js with more visualization types.

  
  

#​622 — January 20, 2023

Read on the Web

JavaScript Weekly

Why Not document.write()? — Many moons ago, document.write was a mainstay of client-side JavaScript code, but it's long been considered a bad practice – why? Harry digs in, noting that it “guarantees both a blocking fetch and a blocking execution, which holds up the parser for far longer than necessary”.

Harry Roberts

New: The WebAssembly JavaScript Promise Integration API — A technical explanation from the V8 team on a new API to let WebAssembly apps bridge the synchronous / asynchronous gap of expectations around external functionality (consider that many apps are written synchronously, but modern Web APIs are usually asynchronous). JSPI helps bridge both worlds and can be tested via a flag in Chrome.

McCabe, Michaud, Rezvov, Dahl / V8 Team

Break the Programming Mold with Dependency Injection — Keep your code on the cutting edge with dependency injection in JavaScript. Check out Snyk’s guide that gives a breakdown of what dependency injection is, when you should use it, and what popular JavaScript frameworks it’s implemented.

Snyk sponsor

Why Is My Jest Suite So Slow? — Jest is known for its speed and simplicity so the author was surprised at how quickly his team’s test suite was slowing down. This is a write up of the ensuing investigation along with the improvements that slashed test running time.

Steven Lemon

Bun v0.5 Released — Bun is another JavaScript runtime taking the world by storm and a level of Node compatibility has been baked in from the start. v0.5 adds support for node:readline, workspaces, a node:dns shim, and network socket creation support such that more Node.js-based database libraries work out of the box.

Ashcon Partovi

IN BRIEF:

• 
  

  The ▶️ latest episode of the JS Party podcast tackles 'the rise and fall' of JavaScript frameworks and the modern trend towards smaller ones.

  
  


• 
  

  The folks at NodeSource have put together a top 10 list of Node open-source projects 'to keep an eye on' in 2023.

  
  


• 
  

  Aurelia 2 is now in beta.

  
  

RELEASES:

• 
  

  ⭐️ esbuild 0.17.0
  
  ↳ Popular bundler. Note that this is a key release with backwards incompatible changes.

  
  


• 
  

  Inertia.js 1.0
  
  ↳ Build SPAs for any backend.

  
  


• 
  

  React Native 0.71

  
  


• 
  

  Remix 1.10.0
  
  ↳ Popular full stack framework.

  
  

📒 Articles & Tutorials

🎨  Building an Accessible Theme Picker — An attractively presented, easy to follow tutorial for a handy site feature.

Sarah L. Fossheim

Fixing a Memory Leak in a Production Node.js App — Kent encountered a variety of weird memory and CPU usage spikes in his Node-powered app and decided to figure out what was going on. This post walks through his complete journey, with plenty of side problems encountered along the way, before discovering the root cause was where he least expected it.

Kent C Dodds

Build a Mobile-Responsive Telehealth Pager App Using Stream’s Chat API — Build a responsive chat app with emojis/reactions, built-in GIF support, ability to edit/delete messages, direct & group chat, and more.

Stream sponsor

📊  A Beginner’s Guide to Chrome Tracing — For when you want to go deeper than the Performance tab. With tracing, you can record what a browser is up to far behind the scenes.

Nolan Lawson

Handling Errors Like a Pro in TypeScript — “Learn the design pattern I use to handle errors and write cleaner code.”

Kolby Sisk

A Beginner's Guide to async/await with Examples

James Hibbard

10 Mistakes to Avoid When Starting with Vue 3

Fotis Adamakis

🛠 Code & Tools

RoughNotation: Cute Animated 'Rough' Text Annotations — Uses Rough.js (itself a project worth checking out) to get a hand-drawn look. Lots of nice interactive examples on the page showing a variety of annotation styles (boxes, underlines, circles..)

Preet Shihn

Free Website Speed Test: Does Your Site Meet Google's Core Web Vitals? — Get an in-depth technical analysis of your site and learn how to make it fast. Rank higher in Google & deliver great UX.

DebugBear sponsor

Modern Errors: Handle Errors in a Simple, Stable, Consistent Way — Create error classes, wrap or aggregate errors, or use one of several plugins to do things like print bug reporting info, print stack traces, or more. Happy in both Node and the browser.

ehmicky

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

Jeremy Kahn

Barba.js: For Smooth Visual Transitions Between Pages — You certainly can’t say the project’s homepage doesn’t show off all of its features! For such a dramatic set of effects, things feel smooth and.. surprisingly tolerable 😁 GitHub repo.

De Rosa, Michel, et al.

Rete.js 1.5: A Framework for Visual Programming — Create a node-based editor in the browser and apply logic. Check out these demos on CodePen. GitHub repo.

Vitaliy Stoliarov

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly Clubhouse.io) sponsor

gpu-io: GPU-Accelerated Computing Library — for physics simulations and other mathematical calculations. A neat look at the power of WebGL. Several examples.

Amanda Ghassaei

• 
  

  Chart.js 4.2
  
  ↳ Simple Canvas-based charts. (Samples.)

  
  


• 
  

  Serialize JavaScript 6.0.1
  
  ↳ Serialize JS to a JSON superset.

  
  


• 
  

  axios-retry 3.4
  
  ↳ Axios plugin that retries failed requests.

  
  


• 
  

  Axios 1.2.3 – Popular HTTP client library.

  
  


• 
  

  Commander.js 10.0 – Node.js CLIs made easy.

  
  


• 
  

  Mineflayer 4.7 – JS API for Minecraft bots.

  
  


• 
  

  Wretch 2.4 – Fetch API wrapper with niceties.

  
  

#​621 — January 13, 2023

Read on the Web

JavaScript Weekly

The State of JS 2022 — The State of JS is one of the JavaScript ecosystem’s most popular surveys and this time 39,471 folks took part giving us a snapshot of the tools, technologies, and language features people are using (or not using!) There’s a lot to go through, but here are some key points:

• top-level await is the most newly adopted feature recently.


• The JavaScript / TypeScript balance shows a majority of developers using TypeScript over JS.


• Express remains by far the most popular backend framework with Nest, Fastify, Strapi, and Koa following somewhat behind.


• Other interesting results can be found in JS pain points, what is currently missing from JS, and the 'Awards' for stand out items (complete with snazzy visual effects).

Devographics

🧈 Retire your Legacy CMS with ButterCMS — ButterCMS is your new content backend. We’re SaaS so we host, maintain, and scale the CMS. Enable your marketing team to update website + app content without needing you. Try the #1 rated SaaS Headless CMS for your JS app today. Free for 30 days.

🧈 ButterCMS sponsor

🗣 Is TypeScript Worth It? — Time saver or waste of time? The relationship between TypeScript and JavaScript remains a complex one. An extensive discussion took place on Hacker News this week and, notably, TypeScript PM Daniel Rosenwasser popped up to respond to some of the concerns.

Hacker News

IN BRIEF:

• 
  

  You'll be aware of JavaScript's strict mode but one developer thinks we need a stricter mode to fix several other syntax issues.

  
  


• 
  

  Publint is an online tool for 'linting' live npm packages to see if they are packaged correctly, as a way to ensure maximum compatibility across environments.

  
  

RELEASES:

• 
  

  Node v19.4.0 and v18.13.0 (LTS)

  
  


• 
  

  Commander.js 9.5
  
  ↳ Node.js command-line interface toolkit.

  
  


• 
  

  Angular 15.1

  
  


• 
  

  Pixi.js 7.1 – Fast 2D on WebGL engine.

  
  

📒 Articles & Tutorials

The Gotcha of Unhandled Promise Rejections — A rough edge with promises that can sneak up on you. Jake looks at a ‘gotcha’ around unhandled promise rejections and how to work around it.

Jake Archibald

HTML with Superpowers: The Guidebook — A free resource introducing Web Components, what they are, and what problems they’re trying to solve. You can see the Guidebook directly here.

Dave Rupert

With Retool You Ship Apps Fast with 100+ Perfectly Crafted UI Components — The fast way for devs to build and share internal tools. Teams at companies like Amazon, DoorDash & NBC collaborate around custom-built Retool apps to solve internal workflows.

Retool sponsor

Everything About React's 'Concurrent Mode' Features — An in-depth, example-led exploration of Concurrent Mode (now more a set of features integrated into React 18 than a distinct 'mode').

Henrique Yuji

Using GitHub Copilot for Unit Testing? — Even if you find the idea of a AI tool like Copilot writing production code distasteful, it may have a place in speeding up writing tests.

Ianis Triandafilov

How to Destructure Props in Vue (Composition API) — How to correctly destructure props object in a Vue component while maintaining the reactivity.

Dmitri Pavlutin

Using Inline JavaScript Modules to Prevent CSS Blockage

Stoyan Stefanov

How to Build a GraphQL Server with Deno

Andy Jiang

🛠 Code & Tools

Gluon: Framework for Creating Desktop Apps from Sites — A new approach for building desktop apps on Windows and Linux from Web sites using Node (or Deno) and already installed browsers (Chromium or Firefox). Initial macOS support has just been added too.

Gluon

Structura.js: Lightweight Library for Immutable State Management — ” It is based on the idea of structural sharing. The library is very similar to Immer.js, but it has some advantages over it.”

Giuseppe Raso

Tuple, a Lightning-Fast Pairing Tool Built for Remote Developers — High-resolution, crystal-clear screen sharing, low-latency remote control, and less CPU usage than you'd think possible.

Tuple sponsor

Bay.js: A Lightweight Library for Web Components — Makes it easy to create web components that can be reused across projects. It also boasts performant state changes and secure event binding.

Ian Dunkerley

Twify: Scaffold a Tailwind CSS Project with a Single Command — You can use your preferred package manager and it supports creating projects with Next.js, Nuxt 2/3, SvelteKit, Remix, Angular, and more.

Kazi Ahmed

Lazy Brush 2.0: A Library for Smooth Pointer Drawing — Allow your users to draw smooth curves and straight lines with your mouse, finger or any pointing device. This long standing library has just migrated to TypeScript and gained a new ‘friction’ option to customize the feel. GitHub repo.

Jan Hug

➗ Mafs: React Components for Interactive Math — Build interactive, animated visualizations using declarative code with illustrative demos like bezier curves. The documentation is fantastic – check out how easy it is to make plots. Or just head to the GitHub repo.

Steven Petryk

Are You Looking for a New Observability Tool?

TelemetryHub by Scout sponsor

Hyphenopoly 5.0: A Polyfill for Client-Side Hyphenation — An interesting use of WebAssembly here.

Mathias Nater

• 
  

  visx 3.0
  
  ↳ D3-powered visualization React components.

  
  


• 
  

  Atrament 3.0
  
  ↳ Library for drawing and handwriting on a canvas element.

  
  


• 
  

  HLS.js 1.3
  
  ↳ Library to play HLS (HTTP Live Streaming) in browsers, with MSE support.

  
  

🎶 Écoute la musique..

Oxygene Pt 4, as Performed by JavaScript — This is fun. Dittytoy is a simple, JavaScript-powered online generative music tool and someone has put together a surprisingly faithful rendition of perhaps one of the best known instrumental synth songs ever, all the way from 1976.

Dittytoy