QR Code
OWT Web Services       http://owtweb.com
[Skip to Content]

Industry News

03/27/2024





















#​681 — March 28, 2024

Read on the Web





JavaScript Weekly








JavaScript Visualized: Promise Execution — A helpful diagrammed and animated article, coupled with an (optional) 8-minute video, that goes into how promises work and are scheduled behind the scenes. It’s useful to have a good mental model of these mechanics, given promises form the basis of asynchronous functions in JavaScript.


Lydia Hallie






▶  Node.js: A Documentary of Its Origin Story — It's an hour long, but this documentary covers the history of Node particularly well, including how everything brewed up to the io.js fork of 2014. Easter weekend watching, perhaps?


Honeypot






Learn Advanced JavaScript Performance Optimization — Garbage collection, memory profiling, data structures like sets and arrays, and event loop management. Learn performance-driven programming, preparing you to write blazingly fast and efficient code!


Frontend Masters sponsor




IN BRIEF:



RELEASES:




📒 Articles & Tutorials





A Look at ECMAScript's Iterator Helper MethodsThe proposal is several years old, but now at stage 3 in TC39, Iterator Helpers are being implemented and ship with V8 12.2/Chrome 122. The helpers are functions like .map, .filter, .take and .forEach and are made available to any object with Iterator.prototype in its prototype chain.


Rezvan Mahdavi Hezaveh (V8)






Introducing Waku's “Pages Router”Waku is an interesting minimal server-side React framework and it’s now also bringing a minimal API to the modern React server components era: “Making a Waku site is now as simple as making a few files and folders in the ./src/pages directory”..


Sophia Andren






Transformational Auth & Identity | Userfront — Userfront is an auth & identity platform that transforms your business to serve free, freemium and enterprise customers.


Userfront sponsor






What You Need to Know About Modern CSS — A guide with a list of the newest additions to CSS (think nesting, view transitions, :has(), etc). JS plays an occasional role too, whether by enhancing or polyfilling modern CSS features.


Chris Coyier






Building a Micro HTMX SSR Framework — Matteo builds on an earlier tutorial about creating a ‘movie quotes’ app by exploring an alternative backend stack to use, based upon Fastify, Vite and HTMX.


Matteo Collina





Meet Angular’s New output() API — Outputs allow component authors to emit values to parent components.

Paul Gschwendtner (Google)





We Rewrote our React App in Svelte in Three Weeks

Dusty Phillips





How to Use the Web Bluetooth API

Confidence Okoghenun



🛠 Code & Tools








Trix 2.1: A Clean, Rich WYSIWYG Editor for the Web — A WYSIWYG editor developed by the folks at 37signals (known as the birthplace of Ruby on Rails). It’s used in their Basecamp and HEY apps, so is about as stress tested as you can get. GitHub repo.


37signals






Meet the Future of Data Delivery with Hasura DDN — Join us April 16 for the unveiling of Hasura DDN. Create a unified, composable API, instantly and with no maintenance.


Hasura sponsor






Atlassian's Pragmatic Drag and Drop Framework — A performance-focused drag-and-drop library that can be used to power experiences on any frontend stack. There’s a live demo on the page along with a recording of a talk by Alex Reardon walking through the motivations for creating it and how it works.


Atlassian






Create Vue3 App: A New Vue App Scaffolding Tool — Taking inspiration from tools like Create React App, this uses Vite to help you spin up a new Vue-based app using tools based upon answers you give to a number of questions.


Selemon Brahanu






<relative-time> 4.4: Format Timestamps as Localized Relative Times — Supply this web component with a standard formatted date and time and it’ll render the right text to suit. It's actually used all over GitHub itself (use Inspect Element on commit times). Demo.


GitHub










DOM3D.js: 3D DOM Viewer in a GitHub Gist — Some code you can copy and paste into your browser console to get a 3D view of the DOM, sort of.. (move your pointer to navigate the.. thing it creates). The effect is odd but fun to play with.


Orion Reed






Free Auth for 1 Million MAUs — WorkOS provides easy-to-use APIs for authentication, user identity, and complex enterprise features like SSO and SCIM.


WorkOS sponsor






  • PGlite 0.1 – Lightweight Postgres packaged as WASM into a TypeScript library for the browser, Node.js, Bun and Deno.




  • npm-publish 3.1 – GitHub Action to publish packages to npm.




  • AdminJS 7.8 – Automatic admin interface for Node.js apps.




  • Slonik 39.3 – Node.js Postgres client with type safety.




  • react-three-fiber 8.16 – React renderer for Three.js.












03/20/2024





















#​680 — March 21, 2024

Read on the Web





JavaScript Weekly








Runtime Compatibility Across JavaScript Runtimes — Several developers have come together to build this convenient way to visualize the compatibility of different Web APIs and JavaScript features across the ever increasing number of different runtimes (e.g. Bun, Deno, Node, LLRT..)


Tom Lienard et al.




✅ The item above reminds me of node.green, a visualization of JS feature support across versions of Node / V8, though it is nearly entirely green/Yes these days!





Introducing the Vlt (/vōlt/) Team — Last summer, Darcy Clarke (who used to work on the npm CLI team) wrote about a massive bug at the heart of the npm ecosystem around the security of manifests. Now, he’s teamed up with npm creator Isaac Z. Schlueter and fellow npm CLI team alumnus Ruy Adorno to work on… a new package manager and registry. (Yes, Brenda, ▶️ another one!)


vlt /vōlt/






Register for POST/CON 24! (April 30 - May 1, 2024) — Postman’s annual user conference will be one of 2024’s biggest developer events and a chance to network while growing your API skills! Connect with the global API community, hear from industry leaders, and take part in hands-on workshops.


Postman sponsor




IN BRIEF:



RELEASES:







Save 30% on Your POST/CON Ticket! — Time is running out to save 30% on POST/CON 24. Don't miss out on Postman’s biggest user conference ever.


Postman sponsor



📒 Articles & Tutorials





📉 Optimizing JavaScript for Fun and for Profit — A tour of several things to avoid to keep your code running fast and smooth, complete with examples. While the performance ground upon which we walk is often shifting, many of these things are good, common sense practices.


Rom Grk






Bringing require(esm) to Node.js — Joyee writes about landing experimental support for require()-ing synchronous ES modules in Node, a feature that has been a long time coming.


Joyee Cheung






FusionAuth’s New Vue, React And Angular SDKs — These JavaScript SDKs simplify authentication integration into React, Angular, or Vue apps, allowing you to focus on user features while ensuring top-tier security.


FusionAuth sponsor






How Figma Built a Custom Permissions DSL — Figma has a complex permissions setup, the implementation of which was causing tech debt, bugs, and delays. After not finding any open source answers, they built a DSL that isolated policies and data while also being cross-platform (Ruby and TypeScript.)


Jorge Silva (Figma)






Building a Node App with TypeScript — How to set up a seamless TypeScript development experience for bundling modern Node apps with pnpm and ES modules, by someone who certainly knows a few things about TypeScript.


Matt Pocock






Type Predicate Inference: The TS 5.5 Feature No One Expected — And another from Matt, who’s getting excited about the forthcoming inclusion of type predicate inference from function bodies in TypeScript 5.5.


Matt Pocock





WebSockets vs Server Sent Events vs Long-Polling vs WebRTC vs WebTransport

RxDB Docs



🛠 Code & Tools








Atrament 4.0: Library for Smooth Canvas Drawing and Handwriting — A small library for beautiful drawing and handwriting on canvas elements. It’s been around for several years but v4.0 is almost a complete rewrite. GitHub repo.


Jakub Fiala






MistCSS: Write React Components with Just CSS — Forget about CSS-in-JS.. what about JS-from-CSS? This approach provides a way to compile CSS-only React components into a TypeScript equivalent. (Code example.)


Typicode






MicroDiff: No Dependency Object and Array Comparison Library — Given two objects or arrays, it returns the differences (think diff but for JavaScript objects). Boasts high performance and TypeScript support. There’s also an article from 2022 about how it works.


AsyncBanana






Transformational Auth & Identity | Userfront — Userfront is an auth & identity platform that transforms your business to serve free, freemium and enterprise customers.


Userfront sponsor






oneRepo 1.0: A New Suite of Monorepo Tools for Teams — There always seems to be discontent when JS monorepo management tools get discussed, but maybe Paul’s approach could win you over?


Paul Armstrong






Eta 3.4: Embedded JS Template Engine for Node, Deno, & Browsers — Boasts being lighter and faster than EJS but with many of the same features (it looks a lot like Ruby’s ERB, if you like that vibe). GitHub repo.


Ben Gubler






TanStack Virtual 3.2: Headless UI for Virtualizing Large Element Lists — Supporting TS/JS, React, Solid, Svelte and Vue, this is a way to build 60 fps experiences even with large numbers of elements while retaining full control over markup and style.


Tanner Linsley






React Data Grid: A Fast Excel-Style Data Grid Component — A fantastic live demo shows off all of this component’s unique features, from grouping rows and columns to handling a million cells without slowdowns. Works with React 18+. GitHub repo.


Adazzle













03/13/2024





















#​679 — March 14, 2024

Read on the Web





JavaScript Weekly








Use Parcel Macros in Other Bundlers with unplugin-parcel-macrosMacros, as implemented in Parcel (and Bun!), are JS functions that run at build time whose results are inlined into a bundle in place of the original call. You can now use this feature with webpack, Vite, Rollup, esbuild, etc. Here's a quick example of how handy this can be.


Devon Govett




𝕏 Devon goes into extra detail 🐦 in this Twitter/X thread. You can also revisit the release of Parcel 2.12.0 to learn more.





How to Add an Onboarding Flow for your Application — Learn to enhance onboarding for your app with Clerk and Next.js: add custom session tokens, configure Next.js middleware for session data, and auto-update user metadata for a streamlined, code-efficient user experience with minimal code.


Clerk sponsor






Speedometer 3.0: The Best Way Yet to Measure Browser Performance — Speedometer has been around since 2014, but this new release is the first with a full collaborative approach involving each major browser engine (Blink, Gecko, WebKit). You can run the test yourself here.


Apple, Google, Microsoft, and Mozilla






WinterJS 1.0: A Fast WinterCG and WASM-Compatible JS Runtime — WinterJS initially pitched itself as a Rust and SpiderMonkey-powered ‘Service Workers server’ but now simply boasts being the fastest WinterCG-compatible JavaScript web server full stop. The ability to run JITed JS workloads entirely under WebAssembly is next on their radar.


Wasmer




IN BRIEF:



RELEASES:




📒 Articles & Tutorials








Comparing JavaScript Frameworks: Templates — A thorough comparison of the template languages used by React, Vue, Angular and Svelte. Interesting analysis and this looks set to turn into a great series.


Maarten Hus






▶  Setting up an Express.js App with TypeScript in 2024 — This hour-long video isn't about building an entire app, but getting everything set up and working in a clear, easy to follow way, including a variety of modern DX niceties.


Anson the Developer






5 Lessons Design Systems Teams Can Learn from Open-Source Maintainers — Design system teams must balance evangelism with maintenance and development. Turns out, the same is true of open source.


StackBlitz sponsor






Make Your TypeScript Functions More Reusable with Generics — Matt kicks this off with a challenge for you to consider, before showing how to make a function more flexible and type-safe by using type parameters instead of any.


Matt Pocock





How HEAD Works in Git

Julia Evans



🛠 Code & Tools








Shiki 1.0: A Powerful Syntax Highlighter — A few months ago, we linked to Shikiji, a fork of Shiki that was created to push the project forward. Happily, the creators of both libraries decided to join forces and Shiki 1.0 was born. It’s a syntax highlighter based on TextMate grammar and themes, the same engine as used by VS Code. The docs are good.


Pine Wu, Anthony Fu






Rolldown: A Rust-Powered Bundler for JavaScript — A new entry to an increasingly crowded market, but they explain why they’re building it here – it’s intended to underpin a future bundler to be used in Vite, rather than esbuild and Rollup. GitHub repo.


Rolldown






Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log, supports Vitest, jest, karma, jasmine, and more.


Wallaby Team sponsor






Storybook 8 Released — The popular front-end component workshop introduces built-in visual testing, support for React Server Components, up to 50% faster start times, Vite 5 support, and upgraded Vue and React control auto-generation. There’s also ▶️ a launch video to enjoy.


Michael Shilman (Storybook)










The Playwright Test Generator — I don't know why I’ve not linked this before, as it’s so useful. Playwright isn’t just a library for controlling browsers from JavaScript, but also includes a tool for generating tests and page navigation code from your own interactions. Hit record, do stuff, and code is written.


Microsoft






Managed Reliability & Observability for Webhooks & Asynchronous Messaging — Send, receive, authenticate, transform, filter, & route events between 3rd-party APIs (Stripe, Shopify, Twilio, etc.) & serverless functions.


Hookdeck sponsor






TinyBase 4.7: A Reactive Data Store for Local-First Apps — If you want a bit more database-esque structure around the management of state in your apps, this is worth a try. The demos show it off well. v4.7 adds support for Turso’s LibSQL (a fork of SQLite).


James Pearce et al.






⌘K 1.0: A Composable, Unstyled 'Command Menu' for React Apps — The home page includes some neat examples in a variety of styles. GitHub repo.


Paco Coursey






webtoon/PSD: Zero-Dependency PSD Parser for Browsers and Node — PSD (Photoshop Document) is the format used by Photoshop and this library lets you dig into metadata and pixels on each image layer.


webtoon inc













03/12/2024

Snapchat driving spend growth at higher efficiency Nutrimuscle is a fast-growing sports supplement brand that started using Fospha in June 2023. Their goal was to grow by increasing conversions and effectively allocating spend, but like many businesses, one of the primary challenges they faced was the inability to track key metrics (i.e. Cost of Acquiring Customers) […]


The post Nutrimuscle: Scaling spend and growing ROAS through better measurement appeared first on Search Engine Watch.


03/06/2024





















#​678 — March 7, 2024

Read on the Web





JavaScript Weekly








📒  Eloquent JavaScript Goes Fourth — Coming several years after the third edition, the latest version of, perhaps, the best ‘all rounder’ book for learning JavaScript is here: “adjusted to the realities of 2024 and generally touched up.” You can read it on the Web, but it’ll be available in print later on too.


Marijn Haverbeke






Deno Introduces JSR: A New JavaScript Registry — The JavaScript Registry (a.k.a. JSR) is a new TypeScript-first, ESM-only module registry designed for the entire JavaScript ecosystem. This post digs into what it’s all about and how it builds upon the success of npm.


Dahl, Casonato, and Whinnery






Advanced JavaScript Tools to Empower Your Applications — Build better web applications with powerful JavaScript developer tools including: SpreadJS Excel-like spreadsheet components, ActiveReportsJS reporting tools, Wijmo UI component suite, and Document Solutions viewers for PDF, Excel, Image, and more.


MESCIUS inc sponsor






'Apple Backs Off Killing Web Apps, But The Fight Continues' — Last week, we linked to an open letter imploring Apple to reverse its moves around breaking PWAs.. and it worked? Whatever the case, Apple continues to seem hostile to developers, and there's more to be tackled in this area.


Open Web Advocacy




IN BRIEF:



RELEASES:








Sentry Launch Week: Making Debugging Fun — We’ll be making debugging fun, raffling swag and talking about all things developer, every. single. day. (For one week.)


Sentry sponsor



📒 Articles & Tutorials





Ultimate Guide to Visual Testing with Playwright — ‘Ultimate’ is always a gamble in a title, but this tutorial is pretty thorough and will get you several steps down the road of fetching pages and making comparisons, all from JavaScript.


Mike Stop Continues (BrowserCat)






Streaming HTML Out of Order Without JavaScript? — An interesting, yet short and sweet, demo of a browser feature that enables a technique you may not have imagined possible without JavaScript – note that support is still rather fresh in Firefox.


Chris Haynes






Effortless GraphQL with Hasura and TypeScript Functions — Connect to your data sources, generate a GraphQL API, and deploy globally — instantly. Want to write and use TypesScript functions directly in your GraphQL API? With Hasura, you can. Check it out.


Hasura sponsor






▶  Drizzle ORM Explained in 100 Seconds — The latest bitesize video from the always educational Fireship channel covers Drizzle ORM, a fast, TypeScript-based way to work with a variety of database systems across numerous JavaScript platforms, from Node to Bun, Deno Deploy, Supabase Functions, Cloudflare Workers, and more. If you need more, there’s ▶️ a 13 minute ‘crash course’ to learning Drizzle, too.


Fireship




Fireship has a ▶️ Expo in 100 seconds video out too, providing a rapid explanation of what the React Native-based toolkit is about.





JavaScript Bloat in 2024 — What’s the average size of JavaScript code downloaded per website? Spoiler alert: it’s a lot and will make anyone from the 56k dialup days cry.


Nikita Prokopov






Tiny Predictive Text — Using 2MB of JavaScript with no AI or LLMs in sight (but using a variant of a Markov chain).


Adam Grant






Coroutines and Web Components“We will see how coroutines can be used to model web components in a different way, and why you might like it.”


Laurent Renard





Using Web Bluetooth to Read BBQ Temperature Sensor Data

Rik Schennink



🛠 Code & Tools








Million Lint: A Linter for React PerformanceMillion’s mission is to make React apps faster and the new VS Code extension Million Lint takes a new approach: imagine ESLint but for suggesting performance improvements.


Aiden Bai






Your Google Translate for UI ↔️ Code — Don’t get lost in translation. Build UI with code and copy clean JSX off your design.


UXPin Merge sponsor






BlockNote 0.12: A 'Notion-Like' Block-Based Text Editor0.12.0 is a significant release for this ProseMirror and TipTap-based editor that lets you drag and drop blocks, add real-time collaboration, add customizable ‘slash command’ menus, and more. It has an all new homepage, too, along with new examples.


TypeCell






PixiJS v8: Build Striking 2D WebGL ExperiencesPixiJS is a very mature, long standing rendering library that abstracts away all the pain of building fast 2D graphical experiences for the Web. v8 boasts significant performance improvements, a WebGPU-backed renderer, and a variety of API improvements. If you’re new to Pixi, there’s an interactive tutorial to show you the ropes.


PixiJS Team






NSFW JS 4.1: Client-Side Indecent Content Checking — A client-side TensorFlow.js-powered option for detecting potentially indecent images before they even go over the wire. It’s not fool proof but may help as another layer of protection for both you and your users. GitHub repo.


Infinite Red, Inc.










Plotly 2.30: A JavaScript Graphing Library — A high-level, declarative charting library, built on top of D3 and stack.gl, with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.


Plotly, Inc.






ONBOARDING_LIB: A Headless Onboarding Library — An onboarding library for building accessible, customizable and persisted onboarding flows in React apps. The site itself is an example of such a flow.


Neftic Oy






Finder 3.2: CSS Selector Generator — Given an element, it produces the shortest possible, but precise, selector that reaches that element.


Anton Medvedev






Set Your JavaScript Job Hunt on Autopilot — First 2 Apply automatically monitors most popular job sites and sends you instant notifications for new listings. Try it for free.


First2Apply sponsor






  • Partytown 0.10.0 – Move intensive third-party scripts off the main thread and into a web worker.




  • AdminJS 7.7 – Automatic admin interface for Node.js apps.




  • visx 3.9 – Airbnb's React-based visualization primitives.




  • NVM Desktop 3.2 – GUI for Node Version Manager.




  • melonJS 17.0 – Browser-based 2D game engine.




  • NodeBB 3.7 – Node.js based forum system.