--- title: "Web Components forever?" publication: "JavaScript Weekly" issue: 660 published_at: "2023-10-26" canonical_url: "https://javascriptweekly.com/issues/660" --- Plus Yarn 4, ditching Buffer in Node.js, and getting prepared for Angular 17. | #​660 — October 26, 2023 [Read on the Web](https://javascriptweekly.com/issues/660) Together with [![Crunchydata\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_430,h_100/e_make_transparent/co_white,e_outline:7/xyflkz7n00elwtgja9ne.png)](https://www.crunchydata.com/products/crunchy-bridge?utm_source=cpjs-prim-1026) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ta5dzthcqp5viil5xwyd.jpg)](https://github.com/xenova/transformers.js/releases/tag/2.7.0) [Transformers.js 2.7: ML for the Web, Now with Text-to-Speech](https://github.com/xenova/transformers.js/releases/tag/2.7.0) — [Transformers.js](https://github.com/xenova/transformers.js) provides access to machine learning models directly in the browser for [all sorts of tasks](https://github.com/xenova/transformers.js#natural-language-processing) and v2.7 introduces audio generation ([live demo.](https://huggingface.co/spaces/Xenova/text-to-speech-client)) The [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API) remains the natural choice for this task _for now,_ but the ML approach will only continue to offer greater opportunities over time. Joshua Lochner 🔥 [Web Components Will Outlive Your JavaScript Framework](https://jakelazaroff.com/words/web-components-will-outlive-your-javascript-framework/) — It’s a spicy opinion piece but I think Jake has earned the right after his [fantastic posts on CRDTs](https://jakelazaroff.com/words/an-interactive-intro-to-crdts/) in which he focused on using vanilla JS web components rather than a system like React. Here, he explains why. Jake Lazaroff 🗣 Jake's post fuelled [an extensive Hacker News discussion](https://news.ycombinator.com/item?id=38012662) touching on everything from MDX and [htmx](https://htmx.org/)'s role, to state management and the 'shallow' nature of the Web Components API as-is. [![\](https://copm.s3.amazonaws.com/228965be.png)](https://www.crunchydata.com/products/crunchy-bridge?utm_source=cpjs-prim-1026) [Production Ready Postgres at Your Fingertips](https://www.crunchydata.com/products/crunchy-bridge?utm_source=cpjs-prim-1026) — Deploy a faster and more reliable Postgres cluster. Run in the cloud of your choice with management, backups, and production features handled for you. Get started with less than 5 minutes. [Try it today](https://www.crunchydata.com/products/crunchy-bridge?utm_source=cpjs-prim-1026). Crunchy Bridge sponsor [Yarn 4.0 Released](https://yarnpkg.com/blog/release/4.0) — Starting life as an `npm` alternative that resolved several of its major pain points, Yarn remains a popular choice and v4 introduces a new ‘hardened mode’ to protect you from various security issues, boasts an improved constraints engine, and has [performance (almost) on par with`pnpm`.](https://yarnpkg.com/features/performances) Maël Nison [Node v21.1 (Current) Released with ESM Detection Feature](https://nodejs.org/en/blog/release/v21.1.0) — _“The new flag `--experimental-detect-module` can be used to automatically run ES modules when their syntax can be detected. … We hope to make detection enabled by default in a future version..”_ Michaël Zasso - 🐦 [The React team has announced](https://twitter.com/reactjs/status/1716573234160967762) the much anticipated [Server Actions](https://react.dev/reference/react/use-server) and [Client Actions](https://codesandbox.io/s/react-client-actions-l5729f?file=/App.js) features are now available in [React Canary.](https://react.dev/community/versioning-policy#canary-channel) - 📣 The Angular team is cooking up something big with Angular 17. Minko Gechev has [teased a long, forthcoming release post](https://twitter.com/mgechev/status/1716953443406164439) and they're encouraging us all to set a notification for Nov 6's [▶️ live streamed 'Special Angular Event' on YouTube.](https://www.youtube.com/watch?v=Wq6GpTZ7AX0) - 🎨 [Photopea](https://www.photopea.com/) is a neat online image editor, but there's now [Vectorpea](https://www.vectorpea.com/), a browser-based _vector_ editor, a la _Illustrator._ - 🤗 If you want to take initial steps into contributing to open source JavaScript projects on GitHub, [verto.sh has curated a collection of projects](https://www.verto.sh/language/javascript) to check out. **RELEASES:** - [p5.js 1.8](https://github.com/processing/p5.js/releases/tag/v1.8.0) – Processing-inspired creative coding environment. v1.8 has some WebGL related improvements. - [Node v20.9.0 (LTS)](https://nodejs.org/en/blog/release/v20.9.0) – Node v20 finally becomes the newest 'active LTS' release and has the codename_'Iron.'_ - [Billboard.js 3.10](https://netil.medium.com/billboard-js-3-10-release-point-radialgradient-new-theme-and-improved-stability-0f6b8054ef33) – Rich charting library. - [Bun 1.0.7](https://bun.sh/blog/bun-v1.0.7) 📒 Articles & Tutorials [Svelte by Example: A Gentle Introduction](https://sveltebyexample.com/) — A succinct, gentle, and code-focused introduction to Svelte _and_ SvelteKit. Sebastian De Deyne ['Why I Won't Use Next.js'](https://www.epicweb.dev/why-i-wont-use-nextjs) — From the perspective of web standards to concerns about increasing complexity, Kent C. Dodds shares his opinions on why he _won’t_ use Next.js. It’s spicy and opinionated, but always thoughtful. _(In other Kent news, he’s just launched [Epic Web](https://www.epicweb.dev/), his new full-stack webapp development course.)_ Kent C. Dodds [Product for Engineers: A Newsletter Helping Flex Your Product Muscle](https://newsletter.posthog.com/) — Subscribe to get curated advice on building great products, lessons from PostHog, and best practices of top startups. PostHog sponsor [Goodbye, Node.js `Buffer`](https://sindresorhus.com/blog/goodbye-nodejs-buffer) — Given Sindre's gigantic number of libraries, he could possibly migrate half the ecosystem solo.. 😏 but he sets out a case for discouraging the use of `Buffer` in favor of the cross-platform `Uint8Array`, and explains how to make the move. Sindre Sorhus [Changing Colors in an SVG Element with CSS and JavaScript](https://kirupa.com/web/changing_colors_svg_css_javascript.htm) — Almost everything inside an inline SVG image is up for modification using CSS and JS. Kirupa Chinnathambi [ES Module Imports in Node.js and the Browser](https://eli.thegreenplace.net/2023/es-module-imports-in-nodejs-and-the-browser/) — Just a quick example/handy recap of the basic setup. Eli Bendersky [Playing with the Gamepad API](https://alvaromontoro.com/blog/68044/playing-with-the-gamepad-api) — One developer’s attempt to get JavaScript games ready to use controllers in the browser. Alvaro Montoro [Using Cloudflare's AI Workers to Add Translations to PDFs](https://www.raymondcamden.com/2023/10/24/using-cloudflare-ai-workers-to-add-translations-to-pdfs) Raymond Camden ▶[My Problem with Using TypeScript in 2023](https://www.youtube.com/watch?v=W2BBskCCk8o) James Q Quick ▶[Vue 3 for Beginners](https://www.youtube.com/watch?v=0AARuXJFB2o) — A mega three hour workshop on YouTube. Allan Jeremy 🛠 Code & Tools [Radix Vue 1.0: Unstyled, Accessible Components for Vue.js](https://www.radix-vue.com/) — An unofficial Vue port of the popular [Radix UI](https://www.radix-ui.com/) component library. [GitHub repo.](https://github.com/radix-vue/radix-vue) zernonia et al. [React Magic Motion: Automagical Animation for Components](https://www.react-magic-motion.com/) — Built on top of [Framer Motion](https://www.framer.com/motion/) so you get all of its features, but with opinionated, default transitions for child components. Etesam Ansari [No-Code Machine Learning on the Simplest Development Platform ‑ Catalyst](https://zoho.to/jsc) QuickML – Catalyst by Zoho sponsor [background-removal: Remove Image Backgrounds in JS](https://github.com/imgly/background-removal-js) — Wipe away backgrounds in both Node and the browser (so there’s [a live demo](https://img.ly/showcases/cesdk/background-removal/web)) without relying on third party services. It does use a large pre-trained model to do this, however, and is GPL licensed, so your mileage may vary. img․ly [Wireit: Makes npm/Yarn Scripts Smarter, More Efficient](https://github.com/google/wireit) — Working _with_ `npm run` and not replacing it, Wireit extends your scripts with features like result caching, parallelization, and re-running on changes. Google [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/yaklmimzcqs5zq4ur8lt.jpg)](https://perspective.finos.org/) - 📈 [Perspective 2.6](https://perspective.finos.org/) – Data visualization and analytics component, suited for streaming or large dataset use cases, with a mildly hypnotic, rapidly updating homepage _(above)_ – [GitHub repo.](https://github.com/finos/perspective) - 📋 [Clipboardy 4.0](https://github.com/sindresorhus/clipboardy) – Access the system clipboard from Node _and_ browsers. - [npm-publish 3.0](https://github.com/JS-DevTools/npm-publish) – GitHub Action to publish packages to npm. - [http-fake-backend 5.0](https://github.com/micromata/http-fake-backend) – Build a fake backend by providing JSON. - [Opal 1.8](https://github.com/opal/opal) – Ruby to JavaScript transpiler. [Never Stop Learning and Work #LikeABosch](https://www.bosch.com/careers/why-bosch/growth-and-development/?utm_campaignid=javascript&utm_source=cooperpress&utm_medium=cpc&utm_campaign=wlab&utm_term=secondary&utm_content=learning) — At Bosch, you always keep growing. Upskill yourself into countless new roles, positions and opportunities. [Learn more](https://www.bosch.com/careers/why-bosch/growth-and-development/?utm_campaignid=javascript&utm_source=cooperpress&utm_medium=cpc&utm_campaign=wlab&utm_term=secondary&utm_content=learning). Bosch sponsor - [MDX 3.0](https://mdxjs.com/blog/v3/) – Use JSX in Markdown documents. - [Size Limit 10](https://github.com/ai/size-limit) – Performance budget tool for JavaScript. - [Jotai 2.5](https://github.com/pmndrs/jotai/releases/tag/v2.5.0) – Atomic global React state management. - [Protobuf-ES 1.4](https://github.com/bufbuild/protobuf-es) – Protocol Buffers for JS/TS. - [NodeBB 3.5](https://github.com/NodeBB/NodeBB) – Node.js-powered forum system. _QUOTABLE:_ “There are two methods in software design. One is to make the program so simple, there are obviously no errors. The other is to make it so complicated, there are no obvious errors.” ___ [Tony Hoare](https://en.wikipedia.org/wiki/Tony_Hoare), inventor of the [quicksort algorithm.](https://en.wikipedia.org/wiki/Quicksort) Published by [Cooperpress](https://cooperpress.com/) and edited by [Peter Cooper](https://twitter.com/cooperx86) 'JavaScript' is a trademark of Oracle Corporation in the US We are not endorsed by or affiliated with Oracle. [Change your email address](https://javascriptweekly.com/edit_subscription/*|UID|*) or [stop getting this newsletter](https://javascriptweekly.com/leave/*|UID|*). © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom