#629 — March 10, 2023
JavaScript Weekly
JavaScript Features from the Past Few Years — Packed with examples, this post tackles the changes and tweaks to JavaScript and TypeScript over the past several years (some as far back as ES6/ES2015, like tagged template literals).
Linus Schlumberger
Astro’s 2023 Web Framework Performance Report — The folks working on Astro looked at data from thousands of sites to understand how sites built around Astro, Gatsby, Next.js, Nuxt, Remix, SvelteKit and WordPress perform on common Web performance metrics. Shipping less JS equals more performance.
Fred Schott (Astro)
In other Astro related news, Astro 2.1 has just been released with experimental automatic image optimization support, plus they’ve visually rebranded the project.
A Fresh Introduction to Next 13+ — Learn Next.js, the complete full-stack framework to create basic blog websites up to full-blown apps and APIs! Plus if you are already familiar with Next.js, we have a course building a full app on Next 13+.
Frontend Masters sponsor
TypeScript’s Migration to Modules — TypeScript has restructured its codebase to use ES modules. For this, we get smaller package sizes, quicker build times, and little disruption to end users. A CommonJS API is provided for now so that build scripts don’t break. This post goes deep in to what the move entailed.
Daniel Rosenwasser and Jake Bailey
IN BRIEF:
A quick look at the 12 most popular Node.js frameworks, as of 2023. Don’t feel left out if you prefer Deno, there’s a roundup of Deno frameworks, too.
Jest 29.5 has added a feature to randomize the order in which tests are run – why? Your tests should be isolated and not depend upon each other – this will unearth any problems.
Three things are certain: death, taxes, and jQuery. Still the most heavily deployed JS library, jQuery 3.6.4 has been released with a reversion to how it determines browser support for CSS selection features.
???? UtahJS Conf 2023 is taking place in September, and their call for speakers is open till April 3.
???? A neat approach to creating a static, password protected page with AES‑256.
The folks at Moddable went to FOSDEM to make the case for using JavaScript in embedded systems.
RELEASES:
TestCafe 2.4 – E2E web testing tool now with a visual selector debugger.
SWR 2.1 – React hooks for data fetching. Now with subscription mode.
Mantine 6.0
↳ 100+ React component library.
???? Articles & Tutorials
Common Beginner Mistakes with React — Experienced React educator Josh has seen all the problems people encounter and here he digs into “9 of the most dastardly gotchas” and how to resolve them.
Josh W Comeau
▶ Coding Kenta Toshikura’s Glass Effect with Three.js — Yet more creative noodling with Three.js and shaders that goes over my head.
Yuri Artiukh
React Authentication, Simplified — In this article, we lay out a new approach to authentication (plus access control & SSO) in React applications.
Userfront sponsor
How to Change the Favicon When Switching Browser Tabs — Originally inspired by Astro, you can see the concept at work on notepad.js.org
Amit Merchant
▶ Progressive Web Apps (PWA) for Beginners — Beginner-focused series on building PWAs, covering their capabilities, pros and cons, and more over 17 videos.
Microsoft Developer
How to Make Slow React Native Apps Faster — The folks over at Retool recently released an app to build native apps in a similar way to Web-based ones. This post covers a few optimizations they made to make it app faster.
James Lee (Retool)
Full-Stack TypeScript with tRPC and React — How to create a CRUD app with Express on the server and React on the client using tRPC to communicate between the two.
Robin Wieruch
Building an Image Recognition App with Pinecone, Hugging Face, and Vercel
Roie Schwaber-Cohen
Using Zod and TypeScript for More Than User Input Validation
Sebastien Castiel
Building Complex Forms in Vue
Olufunke Moronfolu
???? Code & Tools
HuggingFace.js: Use Lots of ML Models from JavaScript — Hugging Face is a popular online community and repository of machine learning models. The goal of this library is to open up those models more easily to JavaScript.
Hugging Face
Dynaboard: A Visual Web App IDE Made for Developers — Build high performance public and private web applications in a collaborative — full-stack — development environment.
Dynaboard sponsor
Chrono: A Natural Language Date Parser — Give it a string like “today”, “last Friday”, “2 weeks from now”, or even an entire date and time, and it’ll come up with a date object to suit.
Wanasit Tanakitrungruang
Embetty 4.0: A Privacy-Conscious Way to Show Third Party Embeds — Tweets, and Facebook, Video or YouTube thumbnails (see demo here.) The privacy comes from using a proxy server you host yourself.
heise online
Finder 3.0: CSS Selector Generator — Given an element, it produces the shortest possible selector that reaches (solely) that element.
Anton Medvedev
Tuple, a Lightning-Fast Pairing Tool Built for Remote Developers
Tuple sponsor
Feathers 5: Node.js API & Real-Time App Framework — Feathers is a great option if you want to spin up a CRUD app tied to a database and now it’s “TypeScript all the way down” too (you can choose to use JS, as you prefer). Leap into the quick start guide to see what it’s about.
David Luecke
FormKit: The Open-Source Form Framework for Vue — Ships with production-ready scaffolding like inputs, forms, submission and error handling, and validation rules.
FormKit, Inc.
???? Jobs
Software Engineer — Join our happy team. Stimulus is a social platform started by Sticker Mule to show what’s possible if your mission is to increase human happiness.
Stimulus
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.
ClearScript 7.4
↳ MS library to add JS scripting to .NET apps.
Million 2.0
↳ Fast virtual DOM that makes React faster.
Video.js 8.2
↳ Flexible media player control.
Embla Carousel 7.1
↳ Smooth carousel library. (Examples.)
Deck.gl 8.9
↳ WebGL2-powered data viz framework.
MUI X 6.0
↳ Suite of advanced React UI components.
ReacType 14.0
↳ Rapid React prototyping tool.
Lebab 3.1.2
↳ Turn ES5 into ES6. It’s Babel backwards!
Rimraf 4.4
↳ Cross platform rm -rf for Node.js.
???? A Bonus Item
Ink 4.0: Use the React Approach for Building Interactive CLI Apps — Build your command line apps using React-style components. As of v4.0, Ink is now pure ESM, requires React 18, and requires Node 14.16+.
Vadim Demedes