Plus the state of Vue and Vite, a tour of JavaScript changes, and Biome is the Prettier-est of them all. |

#​665 — November 30, 2023

Read on the Web

Together with  Bosch

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:

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

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

n