#644 — June 22, 2023
Read on the Web
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: 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.
Matt Pocock
If you’re not a TS fan, the idea behind using is also an ECMAScript proposal (currently at stage 3) called Explicit Resource Management and there’s more detail to enjoy in their examples.
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:
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!
RELEASES:
Node.js 20.3.1, 18.16.1 and 16.20.1 – Security releases.
React Native 0.72
Nest 10.0 – Popular Node.js framework for building enterprise-grade apps.
ESLint 8.43
📒 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 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.
CodeLit
A Visual Guide to Understanding Node’s Event Loop
Vishwas Gopinath
Where to Host Your Remix App in 2023
Jacob Paris
🛠 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 setTimeout or setInterval and supports cron-style scheduling.
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 text-wrap property when supported.
Shu Ding
Perspective 2.3 – Data visualization and analytics component. The core is written in C++ and compiled to WebAssembly where it can be used from JavaScript.
Tesseract.js 4.1.1 – Pure JS OCR for 100+ languages. Fixes a key bug for processing images taken with iOS devices.
Shoelace 2.5
↳ Well designed, framework agnostic UI component suite.
TestCafe 3.0
↳ Node.js tool to automated end-to-end testing.
AlaSQL 4.1
↳ JS SQL database for browser and Node.
Octokit.js 2.1
↳ GitHub SDK for browsers, Node, and Deno.
💻 Jobs
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.