htmx in 100 seconds

#​647 — July 13, 2023

Read on the Web

JavaScript Weekly

Driver.js: Create On-Page Tours, Highlights, and Contextual Help— A no-dependency, vanilla JavaScript library for putting together page tours and contextual help systems. The project is a few years old but has just been entirely rewritten and gained numerous enhancements, plus a huge lick of paint. There are lots of examples to check out.

Kamran Ahmed

Component Party: A Rosetta Stone of UI Library Code Examples— A comparison of different frameworks (like React, Vue, Svelte, Angular, Ember, etc.) by way of simple code snippets covering various tasks.

Mathieu Schimmerling

Test and Validate APIs Effectively and Efficiently— Gain access to several API testing tools and features that help you automate repetitive tasks, stay organized, and build robust workflows to ensure your APIs remain reliable and performant.

Postman sponsor

Prettier 3.0: Now Powered by ES Modules— The popular multi-language code formatter gets a big upgrade with a refactoring to ES modules making up the biggest change (though it can still be used as a library via CommonJS). One side effect is Prettier now supports ESM-based plugins and async parsers which means some necessary changes for Prettier plugin developers.

Sosuke Suzuki

Crockford on Plain Old JavaScript and the DOM— Over the years, Douglas has asked us to only use the good parts of JavaScript, to ▶️ stop using JavaScript, and now he suggests abandoning “the libraries” to instead work with the DOM directly. Lea Verou 🐦 picked up on this story and said this suggestion still isn't very practical for most web apps as of 2023.

Douglas Crockford

🎉 RELEASES:

• Ember 5.1– The ambitious JS framework that'll never give up takes a big step into the TypeScript world with stable TypeScript support and types-a-plenty.

• p5.js 1.7– Processing-inspired JavaScript library for creative coding. v1.7 introduces WebGL 2 and frame buffer support.

• Prisma 5.0– A popular ORM for Node.js and TypeScript. 5.0 boasts significant performance improvements.

• typescript-eslint 6.0

⚡️ IN BRIEF:

• obj?.prop = value; The optional chaining assignment proposal advanced to stage 1 at TC39 this week. (Explanatory slidedeck.)

• Popular YouTube channel Fireship explains ▶️ htmx in 100 seconds– well timed, since htmx is seeing a huge amount of fresh interest. And if you're wondering who the mastermind behind Fireship is, Honeypot has put up ▶️ a short documentary about him.

• The folks at Sandworm have shared a look at the state of the npm registry including lots of trivia, history, and stats on how many packages there are, as well as the most commonly used keywords in packages.

• Google shares a case study on performance of scroll-driven animations using its new browser based API versus 'classical JavaScript techniques.' Unsurprisingly it's much faster running away from the main thread, and the spec remains in draft for now.

• npm will now check the linked source commit and repo when you view a package's provenance information on npmjs.com and warn you when said provenance cannot be established.

• GitHub is rolling out a beta of passwordless, passkey based authentication on GitHub․com.

📒 Articles & Tutorials

Useful Functions for a (Deno) HTTP Server— You could think of HTTP in a functional way with requests going in and responses/results going out. The author explores Deno’s new Deno.serve function and how both it and the /x/http_fns functions can provide a more functional approach to common HTTP tasks.

Jollytoad

Testing the Dark Scenarios of a Node.js App— Several examples of often overlooked things you should be testing. What happens when a service times out, code is mutating things it shouldn’t, or you have zombie processes milling around? These are some of the ‘dark scenarios’ it's not too difficult to prepare for.

Yoni Goldberg and Raz Luvaton

The 2023 State of the API Report Is Here— The State of the API is the world's largest survey and report on APIs, with findings from over 40K developers and API professionals.

Postman sponsor

Creating Randomized Zelda: Tears of the Kingdom Patterns— Nintendo's new Zelda game uses repeated, geometric patterns as part of its aesthetic. This post looks at how to recreate such motifs with SVG and JavaScript.

Paul Hebert

5 TS Compiler Flags You Should Include in Your Project's Config
Igor Konovalov

Deploying a Fastify and Vue 3 Static Site to Heroku
Liran Tal

Getting Started with Vector Databases in Node.js
Valeri Karpov

🛠 Code & Tools

MDX Editor: A Rich Markdown Editor React Component— A Lexical-powered Markdown editor for React apps that supports code blocks, tables, and more. The live demo shows off most of what you need to see.

Petyo Ivanov

Meet Your New Favorite Teammate: Cody, the AI Coding Assistant— Code faster with Cody, the only code AI that knows your entire codebase, like the pair programmer you always wanted.

Sourcegraph sponsor

electron-vite: Next Generation Electron Build Tooling— Fish and chips, Bert and Ernie.. some things are just better together, and so it goes with the Electron desktop app framework and the Vite frontend toolkit. There’s also an Electron Vite Boilerplate app to kick off a new app with.

Alex Wei

📊  Vizzu 0.8: A Library for Animated Data Visualizations— Making data visualizations is reasonably easy, but animating them is harder. Vizzu steps in to help you create animated data stories and explorations. There are lots of showcases and examples to peruse.

Vizzu Inc.

🐊  Putout: A Configurable, Babel-Based Linter and Code Transformer— Provides typical linting functionality with ESLint and code transformation with Babel, but distinguishes itself by being prepared to make “more drastic code transformations” than other tools. It’s not the most popular option but it makes a good case for itself in its thorough README.

coderaiser

Standardized Audio Context: Cross-Browser Web Audio API Wrapper— A side effect-free abstraction over a subset of the Web Audio API that works reliably across all mainstream browsers.

Christoph Guttandin

Kanel: Generate TypeScript Types from Postgres— It works by inspecting a live database and outputs code you can add to a TypeScript project and use with something like Knex– GitHub repo.

Kristian Dupont

React Authentication — Without Complexity

Userfront sponsor

• Boa 0.17– An experimental Javascript lexer, parser and compiler written in Rust that can be embedded into other projects – it now has a module system.

• Octokit.js 3.0
  ↳ Official GitHub SDK for browsers, Node, and Deno.

• Release It! 16.1
  ↳ Automate npm package publishing and versioning.

• zlFetch 6.0
  ↳ Convenience wrapper around the Fetch API.

• Terminalizer 0.10
  ↳ Record your terminal and generate animated GIFs.

• eslint-plugin-prettier 5.0
  ↳ Prettier, but as an ESLint rule.

• Preact 10.16– 3KB React compatible alternative.

🍩 Homer would approve

donut.js: donut.c, But in JavaScript— donut.c, dating from 2006, is a donut-shaped C program that, when run, animates a spinning ASCII text donut on the screen. Here’s a fresh and hot JavaScript variant!

Evan Zhou