#644 — June 22, 2023 |
|
JavaScript Weekly |
UnsuckJS: Comparing Lightweight JavaScript Options — "No build tools, no compilers, and no hassle." It’s a table of frontend JavaScript libraries on a simple page – that’s it! But it’s a handy table, letting you see the relative popularity, size, and latest versions of libraries as diverse as Preact, bau, htmx, Hyperapp, and Mithril. Adam Hill |
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. Bryntum sponsor |
A Look at TypeScript 5.2's New Keyword: Matt Pocock |
If you're not a TS fan, the idea behind |
The 'Getting Started with AI' Stack — Andreessen Horowitz (a.k.a. a16z) is a well known VC firm, but they also have an engineering team of their own that has come up with a “getting started with AI” template for JavaScript devs who want to play with modern ML technologies without too much thinking about tooling. Li, Li, and Casado (Andreessen Horowitz) |
⚡️ IN BRIEF:
|
RELEASES:
|
📒 Articles & Tutorials |
Synchronizing Videos or 3D Model Rotations to Scroll Driven Animations — With just a little JavaScript, you can control 3D models and/or videos using scroll-driven animations. It’s a common effect seen on modern fashion sites. Bramus van Damme |
▶ Recreating a JS Runtime to Understand Node's Magic — Popular speaker, educator, Microsoft MVP and Node.js core team member Erick gives a very enthusiastic talk on the latest ‘hello world’ in the JavaScript world: building a runtime 😏 Somehow, Erick manages to run through the key concepts involved in just 20 minutes. Erick Wendel |
E-Commerce Simplified — A practical guide to building your Store with Storyblok, Commercetools, and React.js. Storyblok sponsor |
Positioning Anchored Popovers — Popovers are commonly positioned relative to their invoker — but when using the new 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. CodeLit |
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. Tuple sponsor |
AutoAnimate: Add Motion to Your Apps with a Single Line of Code — You can view some nice examples on the page and this can be used with React, Vue, Svelte, or just plain JavaScript. FormKit |
Toad Scheduler: In-Memory Node and Browser Job Scheduler — Provides more structure than Igor Savin |
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. Sami Koskimäki |
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. Fixie.ai |
Generate SBOMs Effortlessly with Snyk Snyk sponsor |
💡 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. Segun Adebayo |
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 Shu Ding |
|
|