#665 — November 30, 2023
JavaScript Weekly
Eliminating JS Framework Lock-in with Web Components? — Can you build an app where each component is using a different framework? Amazingly, yes. Web components aren’t new but are ‘having a moment’ and Jake demos an interesting, if contrived, use case. He explains: “Say you’re writing a Vue app and you really want to use a library that’s only available as a React component. You can wrap that library in a web component and use it in your Vue app…”
Jake Lazaroff
Announcing Deno Cron — Deno adds a cron-style feature to run code on a pre-defined schedule using Deno.cron. This works locally (behind –unstable) in a long-running process, but on Deno Deploy it analyzes the definition and runs the code on time, as you’d expect, with no extra work needed.
Zinkovsky and Jiang (Deno)
Feel the Power of More Than 420,000 Teammates and Work #LikeABosch — At Bosch, we shape the future with high-quality technologies and services to inspire people and improve their lives. And it’s our people who make us remarkable. Our success is your success. Let’s celebrate together. Learn more.
Bosch sponsor
The Biome Formatter Wins the ‘Prettier Challenge’ — Two weeks ago, the creator of Prettier put up a $10k bounty for a Rust-powered code formatter that could pass over 95% of Prettier’s tests. Biome, the toolchain forked from Rome, has already managed to claim the prize, topped up by further contributors.
Biome
🤔 There’s a post from the Prettier POV where @vjeux explains why he offered the bounty: he felt a ‘a lack of competition’ was holding Prettier back.
IN BRIEF:
📺 Evan You, creator of Vue.js, presented an update on the state of Vue and Vite for VueConf Toronto attendees. (48 minutes.)
🟩 The two LTS Node.js branches have received releases backporting features from newer versions: Node v20.10.0 (LTS) gains WebSocket and an experimental flag to auto-detect ESM code. Node v18.19.0 (LTS) gets npm 10 and tweaks for customization hooks and loaders.
🎙️ Off The Main Thread is a new podcast featuring Jake Archibald and Surma (both formerly of Google / HTTP 203).
🎂 Not to do with JS – though some of you may use it – but Notepad++ is 20 years old. It’s a popular open source code editor and Notepad replacement for Windows.
🙋 The State of JavaScript 2023 survey is still open to take.
RELEASES:
Passport 0.7 – Popular authentication middleware for Express-based apps.
eta (η) 3.2 – Embedded JS template engine for Node, Deno, and browsers.
Fable 4.6 – F# to JavaScript transpiler.
📄 Articles & Tutorials
▶ 10 JavaScript Changes You (May Have) Missed in 2023 — We’ve covered most of these, but this is still a productive refresher in just six minutes, covering things like toSorted(), iOS Web Push, Next.js updates, Angular 17, and the rapid rise of Bun.
Fireship on YouTube
Fireship is a great channel for these sort of quick-fire roundups, and if you want more 100+ JavaScript Concepts You Need to Know is a fun one.
Tracking Frontend JS Exceptions with Playwright Fixtures — Playwright is commonly used to test frontend apps and ensure they’re rendering and behaving correctly, but what if you want to be sure the underlying JavaScript is working as expected too? Stefan has some tips.
Stefan Judis
Lesser Spotted React Mistakes and How to Avoid Them — Read about common pitfalls that occur when writing React code. Cut, paste, & try the included examples in your own code.
Sonar sponsor
A Deep Dive into CheerpJ 3.0: A WASM JVM for the Browser — A look at an interesting WebAssembly-based Java Virtual Machine that runs client side in the browser, opening up bidirectional Java-JavaScript interop, if you need it. Note that it’s commercial, but can be used free for personal projects and evaluation.
Pignotti, Bates, and De Rossi
A Simple WebSocket Benchmark: Node vs Bun — Using as ‘textbook’ an example of WebSocket communication as possible, the author pits Node and Bun against each other.
Daniel Lemire
Svelte Through the Eyes of a React Developer
Ido Shamun
🛠 Code & Tools
FullCalendar: A Full Sized JavaScript Calendar Control — An interesting option if you want a Google Calendar style experience for your own apps. Has connectors for React, Vue and Angular. The base version is MIT licensed, but there’s a commercial version too with extra features.
Adam Shaw
Knip 3.3: Find Unused Files, Dependencies and Exports — Finds unused files, dependencies and exports in your projects and lets you cut/knip them away.
Lars Kappert
😍 Knip has continued to evolve a lot this year, and now also has a snazzy new homepage. You can also learn more about what’s new in 3.x.
Inline REPL Anywhere in Your Code — Execute context aware code snippets directly in your editor, anywhere in your project, even if your application/tests are not working.
Wallaby Team sponsor
Syntax.js: Code Syntax Highlighting Library — There are many long standing options in this area, such as Prism and highlight.js, but it’s interesting to see a fresh and lightweight take.
William Troup
ai2html: Turn Adobe Illustrator Files into HTML — We noticed this tool being used by the Financial Times to share graphs they’ve designed, and the result is really good. This project isn’t new, but we haven’t shared it before, it’s well maintained, and there are lots of examples.
The New York Times Company
aws-lite: A New Node.js-Powered AWS API Client — AWS does a good job with its APIs and tooling, but sometimes their approach is a little heavyweight. aws-lite provides a simpler, faster option. “You can think of it as a community-driven alternative to AWS’s JavaScript SDK.”
Begin
Hire Vetted Developers in US Time Zones, Fast
Revelo sponsor
Neutralinojs 4.15.0 – Cross-platform desktop app framework – lighter than Electron as it uses the locally available browser engine.
jest-image-snapshot 6.3 – Jest matcher for image comparisons.
Mongoose 8.0 – MongoDB object modelling approach.
edit-in-place 1.9 – Edit in place library for Angular apps.
Jotai 2.6 – Simple, flexible state management for React.
sql.js 1.9 – SQLite 3.44 compiled to JavaScript.
React Share 5.0 – Social media sharing buttons.
np 9.0 – A better npm publish.
pnpm 8.11 – Fast, disk space efficient package manager.
NOTABLE QUOTABLE
“As a principal engineer, I view it as my role to keep us off the bleeding edge as much as possible. That way, when we really do need to innovate, we have the capacity to do so. And when we don’t need to, we can go really freaking fast.”
___
Nicole Tietz