#662 — November 9, 2023
JavaScript Weekly
Reintroducing Angular with Angular v17 — Angular first appeared in the shape of AngularJS in 2010 and helped launch a wave of large-scale JavaScript frameworks. Angular remains popular in many use cases but is often overlooked in favor of newer options. v17 takes a leap forward in both features and vision, with the team rebranding Angular and repositioning it as a modern solution:
Angular.dev is an all-new docs site and home for the project (the new guides look fantastic). It’s in beta till Angular v18 is released – you can learn more about it here.
Hydration is now production ready.
Vite and esbuild are the default for new projects.
Improved support for creating server side apps.
New, improved built-in control flow to make code less verbose.
Google pulled out all the stops for ▶️ the ‘Special Angular Event’ – an hour of talks, interviews and discussions to bring you up to speed.
Minko Gechev and the Angular.js Team
Bare Metal JavaScript: The JavaScript Virtual Machine with Miško Hevery — Learn how high-level JavaScript turns into low-level CPU instructions. Build up your mental model of JavaScript’s performance characteristics through understanding the JavaScript Virtual machine under the hood!
Frontend Masters sponsor
Mastering DOM Manipulation with Plain JavaScript — A mega collection of hundreds of examples of doing things like selecting text, manipulating elements, resizing things, scrolling, and such – all by using the DOM and browser APIs with no external libraries. You Might Not Need jQuery is another classic resource in a similar vein.
Phuoc Nguyen
▶ Why Signals Are Better Than React Hooks — When Preact’s Marvin Hagemeister pops up in the comments saying “this is by far the best video about signals and why they are so exciting. I love the way you demonstrate it by coding along and moving an app over to signals,” it should bump a video up to the top of the Watch Later playlist.
Web Dev Simplified
👀 Nicholas C. Zakas shares a look at what’s coming in ESLint v9.0. The first alpha is due in a month or two.
⚛️ React has landed a commit adding sourcemaps for prod build artifacts.
🆚 VS Code will soon support moving editors into floating windows.
RELEASES:
TypeScript 5.3 RC – Final due soon, but you get import attributes, resolution-mode in import types, interactive inlay hints for types, and improvements to narrowing in a few extra cases.
It’s a strong week for testing tool releases, so they’re all in one place: TestCafe v3.4.0, Cypress 13.5, Nightwatch.js 3.3, and React Testing Library 14.1.
Deno 1.38 – Many smaller improvements, including far faster JSX transformation.
Bun v1.0.10 – Faster node:http and bug fixes.
tsx 4.0 – Node.js enhanced to run TypeScript / ESM files.
📄 Articles & Tutorials
How to Do a JS to TypeScript Conversion — Chris, who led the conversion of a 150k LOC app to TypeScript, addresses a common question: do-it-as-you-go or follow the dependency graph?
Chris Krycho
Exploring the Headless Component Pattern for Composing React UIs — An engineer at Atlassian takes us on a thorough and practical journey into the concept of headless components and the pattern of having reusable logic and behavior separate from the presentation of UI elements.
Juntao Qiu
📞 Calling JavaScript Devs! Sentry Launch Week is Coming. Join Online
Sentry sponsor
▶ 8 Talks from JetBrains’ JavaScript Day 2023 — JavaScript Day is an annual virtual event featuring a handful of talks on diverse JS related topics. This year, Romulo Cintra shows us how TC39 works on language proposals, Stefan Baumgartner spoke about the lies we tell ourselves using TypeScript, and more.
JetBrains
Writing Components That Work in Any Framework — Looks at why web components can be difficult to adopt, and shows how using a higher-level library can let us “easily write components that work everywhere”.
Andrico Karoulla
Build a Lightweight Code Generator with TypeScript and JSON Imports
John Ruble
Deploying a Vue Application with Netlify and GitHub
Ezekiel Lawson (Telerik)
Don’t Disable Buttons, Do This..
Chris Ferdinandi
🛠 Code & Tools
Moveable: A Library for Dragging, Resizing, Scaling and More — If you want to offer up physical manipulation of elements (warping, pinching, rotating, etc.) this library could help. Its homepage is a fun self-demo and there are packages for integrations with common frameworks.
Younkue Choi
🔥 Need to Eliminate Tech Debt Without Falling into Dependency Hell? — Upgrade seamlessly and let us tackle tech debt with our fixed-cost, monthly maintenance service (starting at $2k/month).
UpgradeJS | Tech Debt Services sponsor
🖼 image-dimensions: Get the Dimensions of Images — Sindre’s latest creation is a simple but comprehensive one. A way to get the size (as width and height in pixels) for JPEG, PNG, APNG, and GIFs in any modern JS environment.
Sindre Sorhus
main-thread-scheduling 9.0: Consistently Responsive Apps While Staying on the Main Thread — An easier alternative to Web Workers that uses the approach of stopping heavy tasks on the main thread from executing when the user interacts with the UI. This new version adds afterFrame (like requestAnimationFrame but called after frame drawing has rendered), queueTask, and extensions to promises.
Antonio Stoilkov
React Components for the Google Maps JavaScript API — react-google-maps is the ‘first Google-sponsored library’ for integrating Google Maps JavaScript API components into a React app.
Mike Pegg (Google Cloud)
capture-website 4.0: Capture Screenshots of Websites — A Puppeteer wrapper to capture screenshots of site from Node or the command-line.
Sindre Sorhus
Never Stop Learning and Work #LikeABosch — At Bosch, you always keep growing. Upskill yourself into countless new roles, positions and opportunities. Learn more.
Bosch sponsor
⌘K-sv: A Fast, Composable, Unstyled Command Menu for Svelte — A port of ⌘K, a React-based command menu component.
huntabyte
Vuetify v3.4 – Vue component framework.
MiniSearch 6.2 – In-memory fulltext search engine. (Demo.)
TanStack Form 0.9 – Headless type-safe form state management.
Dependency Cruiser v15.2 – Tool to validate and visualize dependencies.
Valtio v1.12.0 – Proxy state made simple. Plus it has a fantastic homepage.
Helmet 7.1 – Secure Express apps with HTTP headers.
Rollup.js 4.3 – ES module bundler.
NOTABLE QUOTABLE
“The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.”
___
Tom Cargill
🚀 Everyone’s gone to the moon..
Spacekit.js: A Library for Creating 3D Space Visualizations — Not just any old 3D space, but actual space – think planets, stars, and meteors. A library like this comes, of course, with many examples to try. GitHub repo.
Ian Webster