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

Industry News

04/17/2024





















#​684 — April 18, 2024

Read on the Web





JavaScript Weekly








Quill 2.0: A Powerful Rich Text Editor for the Web — A major release and significant modernization for the open source WYSIWYG editor. In Announcing Quill 2.0, we learn about Quill’s transition to TypeScript and improved use of modern browser features, but there’s more going on too, such as its ESM packaging. Want to play with some code? There’s a playground.


Slab Inc.






Airbnb's Extensive JavaScript Style Guide — It’s been years since we mentioned this popular, opinionated style guide, but it keeps getting little tweaks and repairs and remains a handy resource nonetheless.


Airbnb






WorkOS: Enterprise-Grade Auth for Modern SaaS Apps — WorkOS supports both the foundational auth and complex enterprise features like SSO. It provides flexible and easy-to-use APIs, helping companies like Vercel, Loom, and Webflow become Enterprise Ready. Best of all, WorkOS User Management supports up to 1 million MAUs for free.


WorkOS sponsor






Upgrading jQuery: Working Towards a Healthy Web — jQuery remains all over the Web, and the jQuery team and OpenJS Foundation have joined forces to make sure sites get up to date. Their 'Healthy Web Checkup' tool can tell you if the version of jQuery on a site is outdated (.. most likely 'yes' 😅).


Timmy Willison (jQuery)






Biome v1.7: Faster Formatting and Linting, Now Even Easier to Migrate ToBiome is an increasingly compelling, all-in-one JavaScript, TypeScript and JSX Prettier-compatible formatter and linter. v1.7 makes it easier to migrate to from ESLint and Prettier, can emit machine-readable JSON reports, and has some rule updates.


Biome Core Team




IN BRIEF:




📒 Articles & Tutorials








Building a CLI from Scratch with TypeScript and oclifoclif is a mature CLI tool development framework maintained by Salesforce. This tutorial goes from zero to something that works.


Josh Cunningham






Qwik vs. Next.js: Which is Right for Your Next Web Project? — A point by point faceoff between Qwik vs Next.js and why the author thinks Qwik takes the gold medal.


Samuel Mendenhall (Cisco)






RAG to Riches Developer Quest — Interact with AI-enhanced bots and learn to build your own RAG chatbot with Atlas Vector Search and Node.js.


MongoDB sponsor






CSS in React Server Components — An exploration of compatibility issues between React Server Components and CSS-in-JS libraries like styled-components.


Josh W Comeau






Profiling Node.js Performance with Chrome's Performance Panel — Learn how to profile Node performance with Chrome's Performance panel. (The JS Profiler is going away in Chrome 124, so you'll need to become familiar with the newer approach.)


Chrome for Developers




📄 Keeping Up with the Node-ish Ecosystem – How Mux updated its legacy Node SDK to work with new JS runtimes. Dylan Jhaveri (Mux)


📄 Building an Interactive 3D Event Badge with React Three Fiber Paul Henschel (Vercel)


📄 A Deep Dive into Rspack and Webpack Tree Shaking hardfist


📄 Things I Like Better in Vue Than in React Jaydev Mahadevan


📄 Converting Plain Text To Encoded HTML With Vanilla JS Alexis Kypridemos



🛠 Code & Tools








TresJS: Build 3D Experiences with Vue.js — Create 3D scenes with Vue components and Three.js. Think React-three-fiber but more.. Vue flavored. There’s an online playground if you want to give it a quick spin (literally).


Alvaro Sabu






Next.js 14.2 Released — Approaching its eighth birthday, Next.js has passed 1 million monthly active developers and landed a release with support for using Turbopack to improve local development, memory usage, CSS and caching optimizations, improved error messages, and more.


Delba de Oliveira and Tim Neutkens






Porkbun — The Best Domain Registrar for JavaScript Developers — JavaScript developers choose Porkbun to register their domains. Get .dev, .app, or .foo for just $5 from Porkbun now.


Porkbun sponsor






Otto 0.4: A JavaScript Parser and Interpreter in Go — A JavaScript parser and interpreter written natively in Go (yes, we have a newsletter for that) which could be of interest if you want to add scripting to Go apps.


Robert Krimen






Wedges: A Collection of UI Components for React — Built and used by the folks at Lemon Squeezy, this is a well thought, aesthetically pleasing set of Radix UI and Tailwind CSS based components. You can also download a Figma file of them to use when mocking up layouts. GitHub repo.


Lemon Squeezy






HyperFormula: A Headless Spreadsheet System — A headless spreadsheet system – it provides the parsing, evaluation and representation of a spreadsheet, with you providing the UI, if you need one. Boasts ‘nearly full compatibility’ with Excel. Note the dual GPLv3 and commercial licensing.


Handsoncode






svelte-dnd-action: An Action-Based Drag and Drop Container for Svelte — Makes the bold claim that it “supports almost every imaginable drag and drop use-case, any input device and is fully accessible.”


Isaac Hagoel




⚙️ Zoompinch: A Natural Feeling 'Pinch to Zoom' for Vue 3 – Expected to come in React and Web Component variants in time. Maurice Conrad


⚙️ Craft.js – A React framework for building drag and drop page editors. Prev Wong


⚙️ Kotekan – A simple React framework built on Bun and supporting React Server Components. Benedikt Müller


⚙️ Cytoscape.js 3.29 – Graph theory/network visualization and analysis library.


⚙️ Tailwind Next.js Starter Blog 2.2 – A blogging starter template.


⚙️ RxDB 15.18 – Offline-first, reactive database for JS apps.


⚙️ JZZ 1.8.2 – MIDI library for Node and browsers.


⚙️ Ember.js 5.8



⏳ A Blast from the Past








Visualizing Algorithms — This fantastic post is now ten years old, but I revisited it recently and it’s such a joy. Mike Bostock (of D3.js fame) visually guides us through some algorithms using both demos and code.


Mike Bostock










04/10/2024





















#​683 — April 11, 2024

Read on the Web





JavaScript Weekly








Frontend Development Beyond React: Svelte — A surprisingly thorough article going deep into one developer’s research into using Svelte to build modern front-end apps. If you’ve never experimented with Svelte, this is a good primer to the key concepts, tradeoffs, and techniques involved.


Héla Ben Khalfallah






🛠 A JS Bin to Play with the TC39 Signals Proposal — Last week, we featured the proposal to add signals to JavaScript and by way of a polyfill, you can get experimenting with it right now.


NullVoxPopuli






Add Excel-Like Spreadsheet Functionality to Your JavaScript Apps — SpreadJS is the industry-leading JavaScript spreadsheet for adding advanced spreadsheet features to your enterprise apps. Build finance, analysis, budget, and other apps. Excel I/O, 500+ calc functions, tables, charts, and more. View demos now.


SpreadJS from MESCIUS inc sponsor






zx v8.0: Write Better Shell Scripts with Node — A popular way to make shell scripting a more pleasant experience in Node with useful wrappers around child_process, argument escaping, and sensible defaults. v8.0 makes zx 20x smaller, faster, makes it easier to kill processes, pass input to commands & more.


Google




IN BRIEF:



RELEASES:




📒 Articles & Tutorials





On Developing Figma Plugins — Some interesting observations on the experience of creating Figma plugins in JavaScript, including how they’re sandboxed and some implementation details of the author’s own plugin.


Tom MacWright






React Server Components in a Nutshell — A quick overview of RSCs not all about Next.js, comparing the approach taken by several frameworks before sharing thoughts on the tech and why the smaller Waku framework is worth a look.


Paul Scanlon (The New Stack)






Using AI-Powered Autofix to Fix Your Broken Code — Join Sentry live on April 25th, to preview Autofix and learn how we are using ML to prioritize issues and alerts.


Sentry sponsor






Some DevTools Tips and Tricks — Most developers barely scratch the surface of what DevTools can accomplish, says the author, who shares ten tips here.


Pankaj Parashar




📄 Object Structure in JavaScript Engines – You rarely need to know how objects are internally represented in JavaScript engines, but if you want to.. Frontend Almanac


📄 The Easiest Way to Build Reactive Local-First Apps, with TinyBase and PowerSync Benedikt Müller


📄 Building an Article Recommendation System with Upstash, Fly and OpenAI Rishi Raj Jain


📄 Browser Security Bugs That Aren’t: JavaScript in PDFs ericlaw


📄 Exploring Authentication in Next.js Robin Wieruch



🛠 Code & Tools








Madge 7.0: Create Graphs From Your Module Dependencies — A tool for generating a visual graph of module dependencies, finding circular dependencies, and discovering other useful info.


Patrik Henningsson






PythonMonkey: A JavaScript Engine in the Python VM — If you need to use Python but also want to run JavaScript, this gives you a way to do it with the Mozilla SpiderMonkey JS engine embedded into the Python runtime with Python providing the host environment.


Distributive






❤️ Loving console.log Is Easy, but Hate 😡 Losing Context to View Messy Output — Developer productivity tools Wallaby.js, Quokka.js and Console Ninja show console.log values and errors right next to your code.


Wallaby Team sponsor






Faces.js: A Library for Generating Vector-Based Cartoon Faces — The end results are somewhat reminiscent of how the Nintendo Wii generates random Miis. Faces are drawn as SVGs with each also represented by a JavaScript object so you can draw them again later.


ZenGM










Color.js 0.5: 'Let’s Get Serious About Color' — A fantastic library for working with colors in the browser, following the latest specs. It’s even been used by browsers to test their CSS Color 4/5 implementations.


Lea Verou and Chris Lilley






Preview.js: Preview UI Components Instantly in Your IDE — Namely, VS Code or JetBrain IDEs, out of the box. Compatible with components built for React, Vue, Svelte and Solid.


Zenc Labs Pty






Kosko: Organize Kubernetes Manifests in JavaScriptVersion 4.1 has just been released with a new plugin system.


Tommy Chen






Transformational Auth & Identity | Userfront — "Compared to our previous experiences in the security/auth space, Userfront is an order of magnitude simpler to use."


Userfront sponsor






  • Mikro ORM 6.2 – TypeScript ORM for Node.js based on Data Mapper. SQL Server and libSQL/Turso join the list of supported databases.




  • Rspack 0.6 – Fast Rust-based web bundler.




  • Pixi.js 8.1 – The fast WebGL and WebGPU 2D graphics engine switches back to WebGL by default due to immature browser support.




  • Jotai 2.8 – Simple, flexible state management for React.




  • DOMPurify 2.5 – Fast, tolerant XSS sanitizer for HTML and SVG.




  • Reveal.js 5.1 – Framework for building presentations in HTML.




  • Xterm.js 5.5 – Create terminal experiences on the Web.




  • TIFF 6.0 – Pure JS TIFF image decoder.




  • Shiki 1.3 – Powerful syntax highlighter.





🛞 It's wheely good..






Remember the iPod's click wheel? It's back. In JavaScript form!










04/03/2024





















#​682 — April 4, 2024

Read on the Web





JavaScript Weekly








A Proposal to Add Signals to JavaScript — A (very) early stage proposal for bringing a new feature to ECMAScript/JavaScript: signals! The proposal brings aboard ideas from a swathe of popular frameworks and aims to align everyone and get us on the same page when it comes to working with state and making updates based upon changes to state. Rob writes more about the proposal here.


Rob Eisenberg and Daniel Ehrenberg






Build a RAG Chatbot App with MongoDB and Node.js — Embark on the RAG to Riches Developer Quest — a month of innovation, learning, and exclusive rewards awaits you. You’ll interact with AI-enhanced bots and learn how to build your own with Atlas Vector Search and Node.js. Register now!


MongoDB sponsor






JS-Torch: A PyTorch-Like Library for JavaScript — Python’s PyTorch is one of the gold standards amongst machine learning libraries, but this project brings some of its features directly into the JavaScript world. Here’s a live browser-based demo. Early days but this could become a big deal.


Eduardo Leao






Bun 1.1 Released: Now Supports Windows Too — With the lighthearted codename of Bundows, the alternative server side runtime now runs directly on Windows 10 and up (plus WSL, macOS and Linux, of course). This is a key step in its adoption, with even features like Bun Shell happy on Windows out of the box. Node compatibility continues to improve with support for node:http2 and IPC support between Bun and Node processes.


The Entire Bun Team




IN BRIEF:




  • Samuel Groß of the V8 team explains the V8 Sandbox, a security mechanism designed to prevent memory corruption in the V8 engine impacting other memory in the process.




  • Dexie.js is a popular wrapper for IndexedDB and its creator has launched Dexie Cloud, a platform to store and synchronize data between apps.




  • Svelte's Rich Harris is 'shaken up' after a misunderstanding around 'self-closing' HTML tags and their effect on Svelte.




  • 🤡 There was a curious JS-themed April Fools prank where a .js TLD for domain names was 'announced'. Sadly, it's not true, but there is js.org if you want something vaguely similar.




  • An official update on the merging of Angular and Wiz.




RELEASES:




📒 Articles & Tutorials








What Even Is a JSON Number? — Despite the presence of standards around JSON, the answer is more complicated than you’d think, particularly when it comes to interfacing with other ecosystems and languages that aren’t JavaScript.


Brian Terlson






The History of JS Interop in Dart — About twelve years ago, Google introduced Dart, a language which initially seemed set to take over a lot of JavaScript’s use cases, but which eventually found its own niche (notably with Flutter). JS interoperability has remained important, though, and with Dart 3.3 has gotten significantly better.


Sigmund Cherem (Google)






Everything I've Learned About Scaling Designs Systems (With Examples) — I've learned a lot about what it takes to build, maintain, and scale design systems initiatives at large companies.


StackBlitz sponsor






The BFCache Explained — The back/forward cache (‘bfcache’) is a browser optimization that makes going back and forward in the browser a faster experience – it’s been present for years and usually leaves you alone as a JavaScript developer, but there are things worth being aware of.


Sabatino Masala






Running OCR Against PDFs and Images Directly in the Browser — A look behind the scenes at creating a simple tool using JavaScript to perform OCR against images and PDFs dragged on to the page.


Simon Willison





The Easy Way to Access the Last Array Element

Ignace Maes





A Comparison of JavaScript CRDTs

Alexis Métaireau



🛠 Code & Tools








Cally: Small, Feature-Rich Calendar Components — A collection of open-source calendar components for selecting single dates or date ranges. Framework-agnostic, themeable, localizable, and accessible (it even has an accessibility statement showing its commitment to this area).


Nick Williams






📊 Counterscale: Scalable Web Analytics You Can Run on Cloudflare — A simple web analytics tracker and dashboard that’s designed to be easy to deploy and maintain by hosting it on Cloudflare (for free too, up to a certain level).


Ben Vinegar






Product for Engineers: A Newsletter Helping Flex Your Product Muscle — Subscribe for free to get curated advice on building great products and best practices of top startups.


PostHog sponsor






🎵 Tonal.js: A Music Theory Library — Packed with functions to manipulate tonal elements of music like notes, intervals, chords, scales, modes, and keys, and used as the basis of other music related projects. GitHub repo.


danigb






Fancy-ANSI: Convert ANSI Text to HTML — If, for some reason, you want to convert text with ANSI escape codes into HTML.. Lots of examples on the homepage. GitHub repo.


Andres Morey






Dioma: Dependency Injection Container for Vanilla JS and TS — No decorators, no annotations, no magic, no dependencies – you just add the static scope property to your class and use inject to get an instance.


Eugene Daragan










svelte-zoomable-circles: Svelte Component for Browsing Hierarchical Data — A Svelte component for displaying and browsing hierarchical data using zoomable circles. Live demo.


Tyler Berbert






  • VineJS 2.0 – Form data validation library for Node.js.




  • PGlite 0.1.1 – Lightweight Postgres packaged as WASM into a TypeScript library for the browser, Node.js, Bun and Deno. Now supports Postgres array types.




  • TS-Pattern 5.1 – Pattern matching library with smart type inference.




  • ical.js 2.0 – Parser for ICS (RFC5545) and vCard (RFC6350) data.




  • Minimatch 9.0.4 – Glob matching function – used by npm itself.




  • vue-tel-input 9.0 – Telephone number input for Vue. (Demo.)




  • OverlayScrollbars 2.7 – JS custom scrollbar plugin.




  • Octokit.js 3.2 – 'Batteries-included' GitHub SDK.












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.