We’re taking a few weeks off, but..

#​652 — August 17, 2023

Read on the Web

🏝️ I’m taking two weeks off and will be back on Thursday, September 7. So if you don’t see the newsletter turn up for a while, it’s our fault 😉 As I’ve had to produce much of this issue a few days in advance, I’m mixing in some ‘golden oldies’ and popular items from earlier this year to keep things interesting, so this is a less newsy issue than usual. See you again in September! 👋
__
Peter Cooper, your editor

JavaScript Weekly

How Dropbox Reduced the Size of Its JavaScript Bundles by 33% — The folks at Dropbox realize that when you’re operating at scale, small annoyances and delays add up, and their web perf team narrowed down some of Dropbox’s perf issues to their module bundling process.

Nadeem and Hong (Dropbox)

htmx is Part of the GitHub Acceleratorhtmx is a perfect example of a library that isn’t brand new, but one that becomes popular once the time is right. Its success is only continuing following acceptance into the first class of GitHub’s open-source Accelerator initiative, an opportunity that will enable the development of htmx 2.0. GitHub repo.

Big Sky Software

You Might Not Need a Framework — Maximiliano Firtman shares the vanilla approach in this video course on building rich web apps and sites without depending on libraries of frameworks. It covers the DOM, event handling, routing, web components, and more.

Frontend Masters sponsor

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

You Don’t Need

⚡️ IN BRIEF:

It’s still a few weeks away, but we’re told Bun 1.0 is almost here” and there’s 📅 a live presentation by Bun’s creator, Jarred Sumner, on September 7 you can sign up for now.

If you like to keep up with other languages than JavaScript, renowned C++ expert Herb Sutter recently ▶️ gave a fantastic talk about modernizing and improving C++ more quickly by creating a Typescript-esque superset with better abstractions and features.

🕹 React Jam was a React-oriented gamejam that took place last week and here are the winning games.

👾 Talking of gaming, the annual js13kGames JS coding competition has just started. You can join in the fun, though, as it doesn’t end till September 13.

Robin Wieruch shared his 10 Web development trends in 2023 back in January – how are they shaping up so far? As Larry David might say.. pretty, pretty good.

In “The “Skeleton Squad” is now targeting NPM“, the team at Socket take a look at how a group is attacking the npm package ecosystem.

🐦▶️ Playing with the earliest JavaScript in Netscape 2.0.

🎉 RELEASES:

Fresh 1.4
↳ The Deno-powered web framework.

jest-dom 6.0
↳ Custom matchers to test the state of the DOM.

NodeBB 3.3 – Node.js-powered forum software.

Electron 26.0

Angular 16.2

Playwright 1.37.0

📒 Articles & Tutorials

Discover three.js: A Complete Guide to Creating 3D Web Experiences — The breadth of the content on offer here had me looking for the price, but it’s all online and free. There’s a lot to dig through here if you want to get started (or just get better) at using three.js. If you’re already familiar with three.js, you may enjoy the three.js tips and tricks page.

Lewy Blue

JSX Without React — Exploring a new tool called NakedJSX that will allow you to render JSX without the need for the full React framework.

Chris Coyier

React Authentication — Without Complexity — Userfront streamlines authentication & access control so engineers can focus on their core business. Read the docs now.

Userfront sponsor

You’ve Got Options for Removing Event Listeners — Reviewing some of the most common approaches available to remove event listeners in JavaScript.

Alex MacArthur

Prepare Your Firefox Desktop Extension for the Upcoming Android Release“Firefox will become the only major Android browser to support an open extension ecosystem.”

Scott DeVaney (Mozilla)

Application State Management with Angular Signals

Yevgeny / Oz

▶  Six (or so) New Approved and Proposed JavaScript APIs

Syntax Pocast podcast

The Importance of Verifying Webhook Signatures

Marcelo Oliveira (Snyk)

Writing JavaScript Without a Build System

Julia Evans

🛠 Code & Tools

Croner 7.0: Cron for JavaScript and TypeScript — Trigger functions upon the schedule of your choice using the classic cron syntax. Works in Node, Deno, Bun and the browser, across time zones, offers error handling and overrun protection, and more. There’s an live demo on JSFiddle. v7.0 adds support for specifying the n-th weekday.

Hexagon

Linkify 4.1: Link Up URLs, Email Addresses, and More in Plain Text — Given some plain text containing things like links and emails, Linkify will generate the correct code to display it on the Web. Not just URLs or emails, but hashtags, @mentions, IP addresses, and more – see the homepage for examples. GitHub repo.

Hypercontext

🦘JavaScript Scratchpad for VS Code: New Logpoints Feature! — Seeing runtime values has never been so easy. Simply place a breakpoint on a line, no debugger required: zero setup/configuration.

Wallaby.js sponsor

deno_python: Python Interpreter Bindings for Deno — A seamless Deno-Python integration via the Python/C API. The latest release supports installing and importing pip packages. This feature has been described as “slightly cursed” but it’s certainly interesting.

Denosaurs

Tagger: A Zero Dependency, Vanilla JavaScript Tagging Library — You can play with a live demo here.

Jakub T. Jankiewicz

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

Deliver Interactive Real-Time Live Streams with Amazon IVS

Amazon Web Services (AWS) sponsor

Proto Tree: A Way to Observe the JS Prototype Chain — Gal explains the motivation for this tool in 🐦 this Twitter thread.

Gal Weizman

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 nice 😁 GitHub repo.

De Rosa, Michel, et al.

Stritch: A JavaScript Barcode Scanning Library — It’s a commercial library, but featureful and well presented with support for a variety of 1D and 2D barcode types.

Pixelverse LLC

#Script: A JS-Inspired Scripting Language for .NET — An embeddable scripting language mostly targeting template use cases. It can also be used in a Lisp style.

ServiceStack

💻 Jobs

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

🧑‍💻 Got a job listing to share? Here’s how.

ngraph.path: Path Finding Through Graphs — There’s a live demo if you want to see how it tackles the road network of several global cities.

Andrei Kashcha

SVGR 8.1
↳ Transform SVGs into React components.

BlockNote 0.9
↳ “Notion-style” block-based editor built atop Prosemirror. (Demo)

React Number Format 5.3
↳ Input formatter library for numbers.

Tinypool 0.8
↳ Minimal/tiny Node.js worker thread pool.

melonJS 15.9 – Lightweight HTML5 game engine.

Sortable 2.3 – Vanilla JS table sort. (Demo)

Preact 10.17.0

😭 Last week I promised a JavaScript AI/ML feature, but time hasn’t worked out in my favor (note to self: don’t send an issue while on vacation 😆). Keep your fingers crossed and it’ll be in one of the next issues. So much has been happening in the JavaScript AI/ML space that we want to shine a spotlight on it sooner than later.

👋 We’ll be back in three weeks on September 7, 2023. See you soon! If you have anything to submit for the next issue, hit reply and let us know (but appreciate we may be slow to reply since we’ll be on vacation 😉).

A new jQuery release for Xmas

#​619 — December 16, 2022

Read on the Web

🎄 This is the final issue of the year – we’ll be back on January 6, 2023. We hope you have a fantastic holiday season, whether or not you are celebrating, and we’ll see you for a look back at 2022 in the first week of January 🙂
__
Peter Cooper and the Cooperpress team

JavaScript Weekly

Announcing SvelteKit 1.0Svelte is a virtual DOM-free, compiled ahead of time, frontend UI framework with many fans. SvelteKit introduces a framework and tooling around Svelte to build complete webapps. This release post explains some of its approach and how it differs to other systems.

The Svelte Team

Dr. Axel Tackles Two Proposals: Iterator Helpers and Set Methods — Here’s something to get your teeth into! Dr. Axel takes on two promising ECMAScript proposals and breaks down what they’re about and why they’ll (hopefully) become useful to JavaScript developers. The first tackles iterator helpers (new utility methods for working with iterable data) and the second tackles Set methods which will extend ES6’s Set object.

Dr. Axel Rauschmayer

🧈 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

🏆  The Best of Node Weekly in 2022 — In this week’s issue of Node Weekly (our Node.js-focused sister newsletter) we looked back at the most popular items of the year, including the Tao of Node, an array of JavaScript testing best practices, and the most popular Node.js frameworks in 2022.

Node Weekly Newsletter

jQuery 3.6.2 Released — Humor me. You might not be using jQuery anymore, but it’s (still) the most widely deployed JavaScript library and it’s fantastic to see it being maintained.

jQuery Foundation

IN BRIEF:

Node 19.3.0 (Current) has been released to bring npm up to v9.2. Breaking changes in v9.x warrant this update and the release post explains the current policy around npm’s ongoing inclusion in Node.

ƛ The Glasgow Haskell Compiler (GHC) has gained a new JavaScript backend meaning the reference Haskell compiler can now emit JavaScript and be used more easily to build front-end apps.

GitHub is rolling out secrets scanning to all public repos for free.

The New Stack reflects on 2022 as a ‘golden year’ for JavaScript and some of the developments we’ve seen. We’ll be doing our own such roundup in the next issue.

RELEASES:

Node.js 16.19.0 (LTS) and 14.21.2 (LTS)

Chart.js 4
↳ Canvas-based chart library. (Samples.)

PouchDB 8.0
↳ CouchDB-inspired syncing database.

SWR 2.0 – React data-fetching library.

📒 Articles & Tutorials

Why Cypress v12 is a Big Deal — A practical example-led love letter of sorts to how the latest version of the popular Cypress ‘test anything that runs in a browser’ library makes testing frontend apps smoother than before.

Gleb Bahmutov

Five Challenges to Building an Isomorphic JS Library — When it comes to JavaScript, “isomorphic” means code or libraries that run both on client and server runtimes with minimal adaptations.

Nick Fahrenkrog (Doordash)

▶  A Podcast for Candid Chats on Product, Business & Leadership — Join Postlight leaders & guests as they discuss topics like running great meetings & creating solid product launches.

The Postlight Podcast sponsor

Next, Nest, Nuxt… Nust?“This blog post is for everyone looking for their new favorite JavaScript backend framework.” If the names of frameworks are all starting to blur together in your head, this is for you. Marius explains just what systems like Next and Gatsby do and touches on a few differences.

Marius Obert (Twilio)

Calculating the Maximum Diagonal Distance in a Given Collection of GeoJSON Features using Turf.js — This is cool. Turf.js is a geospatial analysis library, by the way.

Piotr Jaworski

Optimize Interaction to Next Paint — How to optimize for the experimental Interaction to Next Paint (INP) metric — a way to assess a page’s overall responsiveness to user interactions.

Jeremy Wagner & Philip Walton (Google)

Need to Upgrade to React 18.2? Don’t Have Time? Our Experts Can Help — Stuck in dependency hell? We’ve been there. Hire our team of experts to upgrade deps, gradually paying off tech debt.

UpgradeJS.com – JavaScript Upgrade Services by OmbuLabs sponsor

How We Configured pnpm and Turborepo for Our Monorepo

Pierre-Louis Mercereau (NHost)

Rendering Emails with Svelte

Gautier Ben Aim

🛠 Code & Tools

Wretch 2.3: A Wrapper Around fetch with an Intuitive Syntax — A long standing, mature library that makes fetch a little more extensible with a fluent API. Check the examples.

Julien Elbaz

SWR 2.0: Improved React Hooks for Data Fetching — The second major release of SWR (Stale-While-Revalidate) includes new mutation APIs, new developer tools, as well as improved support for concurrent rendering.

Ding, Liu, Kobayashi, and Xu

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

Shortcut (formerly Clubhouse.io) sponsor

vanilla-tilt.js 1.8: A Smooth 3D Tilting Effect Library — No dependencies and simple to use and customize. GitHub repo.

Șandor Sergiu

visx: Airbnb’s Low Level Visualization React Components — Bring your own state management, animation library, or CSS-in-JS.. visx can slot into any React setup. Demos.

Airbnb

Scene.js 1.7: A CSS Timeline-Based Animation Library — Plenty of examples on the site. Has components for React, Vue and Svelte.

Daybrush

PortalVue 3.0
↳ Feature-rich portal plugin for Vue 3.

Kea 3.1
↳ Composable state management for React.

jest-puppeteer 6.2
↳ Run tests using Jest + Puppeteer.

NodeBB 2.7 – Node.js based forum software.

Pino 8.8 – Fast JSON-oriented logger.

💻 Jobs

Software Engineer — Join our “kick ass” team. Our software team operates from 17 countries and we’re always looking for more exceptional engineers.

Stickermule

Developer Relations Manager — Join the CKEditor team to build community around an Open Source project used by millions of users around the world 🚀

CKEditor

Find JavaScript Jobs with 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

🎁 And one for fun

Snow.js: Add a Snow Effect to a Web Page — Well, it’s that time of the year (in some parts of the world!) If you’re more interested in how the effect is made, it’s inspired by this CodePen example built around some fancy CSS.

Or if you’re a bit more childish, you could always put Fart.js on your site.. 🙈

Merry Christmas to you all and we’ll see you again in 2023!