#644 — June 22, 2023
Svelte 4 Released — Four years on from Svelte 3.0 comes the latest major release of the popular compile-time framework that isn’t afraid to do things its own way. If you’re new to it, hit the interactive tutorial to get a feel for things, or if you’re already a user, enjoy the v3 to v4 migration guide, overhauled site, and extra performance on offer.
Rich Harris and the Svelte Team
🤔 Claudio Holanda’s ‘Thoughts on Svelte(Kit), one year and 3 billion requests later‘ provides some interesting balance to our cheerleading.
The Complete UI Component Library For Enterprise Web Apps — A professional UI component library with power widgets like data grid, calendar, scheduler & Gantt charts. Includes API docs, guides and an unreasonable amount of demos to play with. Seamlessly integrates with React, Angular, Vue & Salesforce apps.
A Look at TypeScript 5.2’s New Keyword: using — using brings something akin to Python’s with context management into TypeScript by providing a way to automatically run a Symbol.dispose function when an object leaves scope. You could use this to shut down database connections, close file handles, etc.
Li, Li, and Casado (Andreessen Horowitz)
⚡️ IN BRIEF:
The Register reports malicious actors are exploiting expired S3 buckets to inject harmful code into legitimate npm packages without needing to modify existing code.
Fresh, a Deno-first full-stack Web framework, has a new release in the shape of Fresh 1.2. There have been some concerns over its maintenance, but now there’s a new full-time maintainer, Marvin Hagemeister, and a lot of promise on the horizon. Welcome Marvin!
Node.js 20.3.1, 18.16.1 and 16.20.1 – Security releases.
Nest 10.0 – Popular Node.js framework for building enterprise-grade apps.
📒 Articles & Tutorials
Bramus van Damme
E-Commerce Simplified — A practical guide to building your Store with Storyblok, Commercetools, and React.js.
Positioning Anchored Popovers — Popovers are commonly positioned relative to their invoker — but when using the new popover attribute, anchoring can be tricky as these popovers are placed in the top layer, away from the context of their invoker. Hidde looks at options to resolve this.
Hidde de Vries
▶ React Server Components in Under Seven Minutes — Looking to quickly get a basic handle on RSCs? This fast-paced video tries to bootstrap you on the subject.
A Visual Guide to Understanding Node’s Event Loop
Where to Host Your Remix App in 2023
🛠 Code & Tools
Selecto.js: Make Elements Selectable Within a Drag Area — Let’s say you have a number of elements that represent choices, data, whatever, and you want users to be able to select a subset of them by clicking/pointing and dragging. That’s what this does. Live examples here.
Daybrush (Younkue Choi)
Tuple – The Fastest Way to Onboard New Devs — Waste hours verbally steering on Zoom? New hires learn your codebase faster with Tuple. Trusted by over 40,000 devs.
Toad Scheduler: In-Memory Node and Browser Job Scheduler — Provides more structure than setTimeout or setInterval and supports cron-style scheduling.
Kysely: A Fluent, Type-Safe SQL Query Builder — Inspired by Knex and targeting Node, it also works in Deno and the browser and boasts a good autocompletion experience thanks to its fluent API. GitHub repo.
AI.JSX: A JSX-Powered AI App Framework — It’s not React, but gives a React-like feel to letting you specify how large language models, such as ChatGPT, should integrate with your app. Luckily there’s a set of tutorials.
💡 An SBOM is a “software bill of materials” – essentially an inventory of dependencies and components that make up an application, as Liran Tal explains.
🐼 Panda CSS: Modern, Build-Time, Type-Safe CSS-in-JS — A new DX-focused CSS-in-JS approach boasting build-time generated styles and type safety out of the box. It works with Remix, Vite, Next.js, Astro, and server components.
React Wrap Balancer 1.0: A Component for Better Displayed Title Text — A component that improves the rendering of titles by avoiding overhanging words. v1.0 is a key release that lets the component use the native CSS text-wrap property when supported.
↳ Well designed, framework agnostic UI component suite.
↳ Node.js tool to automated end-to-end testing.
↳ JS SQL database for browser and Node.
↳ GitHub SDK for browsers, Node, and Deno.
🧑💻 Got a job listing to share? Here’s how.