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

Industry News

07/10/2024





















#​696 — July 11, 2024

Read on the Web





JavaScript Weekly








es-toolkit: A Modern JavaScript Utility Library — Think Lodash but newer, faster, smaller, and with tree shaking and built-in TypeScript support. The reference guide shows off the supported functions so far – it’s not quite as extensive as Lodash, but it’s getting there with the goal being “to achieve full feature parity with Lodash.”


Viva Republica, Inc






What's Coming Next for ESLint — At eleven years old, ESLint is preparing itself for another eleven years by continuing to evolve into a language-agnostic linter that anyone can write plugins for. The new configuration system introduced in ESLint 9.0 is “just the beginning of significant changes” on the way.


Nicholas C. Zakas






Cut Code Review Time & Bugs in Half with AI — AI-first pull request reviewer that offers context-aware, line-by-line feedback, and smart chat. Trusted by 1000's of developers, it’s the most installed AI app on GitHub and GitLab marketplaces. Start your seven-day free trial today! It's forever free for open-source projects.


CodeRabbit sponsor






Speeding up the JavaScript Ecosystem: Isolated Declarations“TypeScript’s new isolated declaration feature is a game changer for sharing code among developers.” The latest in Marvin’s fantastic series about finding performance wins in how we do things in the JS world.


Marvin Hagemeister




IN BRIEF:





RELEASES:




📒 Articles & Tutorials








Recreating the THX 'Deep Note' in JavaScript — A fun bit of sound generation with Tone.js. Note that people have reported mixed results on different browsers, but it works for me. Just be careful it doesn’t ▶️ explode your teeth.


Alexander Keliris






Introducing @let in Angular — The new @let syntax extends Angular’s built-in template syntax with a better way to define variables inside component templates.


Mark Thompson and Kristiyan Kostadinov






Building a Hybrid Sign-Up/Subscribe Form with Stripe Elements — A practical guide on how to use custom flows, webhooks, and user metadata to build a single form that automatically subscribes new users using Stripe Elements.


Clerk sponsor






Sneaky React Memory Leaks: How the React Compiler Won’t Save You — While the new and exciting React Compiler can tackle a lot of issues and make most codebases more performant, it pays to be aware of tricky edge cases.


Kevin Schiener




📄 Resizing and Transferring ArrayBuffers – Dr. Axel continues his exploration of ECMAScript 2024. Dr. Axel Rauschmayer


📄 Protecting Against Third Party Code Changes with Script Integrity Chris Coyier


📄 How to Create a Chrome Extension with Vanilla JavaScript Esther Vaati


📄 Learn React Suspense by Building a Suspense-Enabled Library Slava Knyazev


📄 Running a Successful Meetup – From the team behind Remix. Bob Ziroll


📄 Moving from Express to Fastify Tom MacWright (Val Town)



🛠 Code & Tools








React Flow 12: Create Node-Based Editors & Interactive Diagrams — Part of xyflow, this makes it easy to create node-based UIs where you have interactive components wired together however you choose. There's a Svelte version too.


Moritz Klack and John Robb






❤️ 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






Croner 8.1: 'Cron' Triggering and Evaluation — Trigger functions to the schedule of your choice using cron syntax. It can also evaluate cron expressions to give you a list of upcoming times.


Hexagon






TinyBase 5.0: A Reactive Data Store for Local-First Apps — A data store that acts as a reactive backend to your apps if you want less headache building out backends. v5.0 includes a new mergeableStore type that can wrap your data as a Conflict-Free Replicated Data Type (CRDT). Homepage.


James Pearce






PLV8: Use JavaScript Functions in PostgreSQL — Did you know you can use JavaScript within Postgres for things like stored procedures and triggers? PLV8 is the extension that makes it happen. PLV8ify adds an extra layer by converting JS/TS files into PLV8 ready SQL.


PLV8JS Development Group






😘 Kiss Bugs Goodbye — Get 80% automated E2E coverage in just 4 months with QA Wolf. With QA cycles complete in minutes (not days), bugs don’t stand a chance. Schedule a demo.


QA Wolf sponsor






  • file-type 19.1 – Detect file type from a Buffer, Uint8Array, or ArrayBuffer. It can now read from web streams too.




  • 🗓️ Schedule-X 1.50 – Material Design event calendar and date picker.




  • getJS 2.0 – Go-powered tool to grab Javascript sources/files from a site.




  • wa-sqlite 1.0 – WebAssembly SQLite with support for browser storage extensions.




  • QuickJS 1.2 – Execute JavaScript code in a WebAssembly QuickJS sandbox.




  • True Myth 7.4 – Safe, idiomatic null and error handling in TypeScript.




  • tinyqueue 3.0 – Small and simple priority queue in JavaScript.




  • MiniSearch 7.0 – In-memory fulltext search engine. (Demo.)




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




  • Eruda 3.1 – A console/devtools for mobile browsers.












07/03/2024





















#​695 — July 4, 2024

Read on the Web





JavaScript Weekly








How to Annul Promises in JavaScript — You can 'cancel' XHR and fetch requests, but can you cancel regular promises? Currently, no, but Zachary looks into doing the next best thing: telling a promise the game's up, and discarding/ignoring its eventual results.


Zachary Lee






regex 2.1: Turn JavaScript's Regular Expression Support Up to Eleven — From the co-author of O’Reilly’s High Performance JavaScript and Regular Expressions Cookbook comes an enhancement for JavaScript’s regex support. Supporting all of ES2024’s regex functionality, it adds support for free spacing and comments, atomic groups, regex subroutines, context-aware interpolation of RegExp instances, and more.


Steven Levithan




💡 The author also tells us a Babel plugin for regex is expected to be released later today.





✂️ Cut Your QA Cycles Down to Minutes with Automated Testing — Are slow test cycles bottlenecking your dev teams' release velocity? With QA Wolf
, your organization can run entire test suites in minutes, not days. Plus, get to 80% automated E2E coverage in just 4 months (zero flakes, guaranteed). Schedule a demo.


QA Wolf sponsor




IN BRIEF:





RELEASES:




📒 Articles & Tutorials








Enhancing The New York Times' Web Performance with React 18 — Last year, The New York Times set out to take full advantage of React 18 on its flagship news site. This is a tour of the challenges faced in upgrading, coupled with the significant benefits they managed to take advantage of.


Ilya Gurevich (NYT)






How to Use a Go(lang) Library from JavaScript with WebAssembly — Compiling Go code to WebAssembly opens up some interesting opportunities in the browser.


Thomas Derflinger






Inside Look: How Sentry Debugs with Sentry — Join Sentry engineer Yagiz Nizipli to learn how he optimizes tasks with Sentry, saving $160K/yr. RSVP for tips & tricks!


Sentry sponsor






How We Tamed Node.js Event Loop Lag — Node famously uses very few threads yet can handle a large number of clients performantly, as long as the work associated with each client is ‘small.’ When that work isn't 'small', as here, things can go off the rails quickly.


Eric Allam






How People with Disabilities Use the Web — Describes tools and approaches that disabled people use to interact with the Web and the barriers these people face. Of interest are the user personas that show the range of specific people’s experiences.


W3C






A Set of Modern Web Performance Guides — A helpful collection of guides, covering things such as working with the different core web vitals, JavaScript optimization, metrics, and more.


SpeedCurve




📄 Why Google Sheets Ported Its Calculation Worker from JS to WasmGC Thomas and Steiner (Google)


📄 Working with Pasted Content in JavaScript Raymond Camden


📄 How to Parse HTML Programatically in JavaScript Brian Wachira


📄 TypeScript 5.5: A Blockbuster Release Dan Vanderkam



🛠 Code & Tools








BWIP-JS: A Barcode Writer in Pure JavaScript — A library that can generate barcodes using over 100 different barcode types and standards, both single and two dimensional. There is, of course, a live demo where you, too, can discover far more types of barcodes exist than you ever imagined.


Mark Warren






Superstruct 2.0: Define Interfaces to Validate Data at Runtime — Designed for validating data at runtime with an annotation API inspired by TypeScript, Flow, Go and GraphQL. GitHub repo.


Ian Storm Taylor






Software Consultants Your Team Actually Wants to Work with 🥳 — Test Double solves tough problems from strategy to execution. Weekly rates. Open contracts. No management required.


Test Double sponsor






Termino.js 2.0: Create Terminal-Like Experiences in the Browser — No dependencies, customizable, and you can create multiple terminal instances on a single page. Demos.


Marketing Pipeline






Fabric.js 6.0: A SVG-to-Canvas and Canvas-to-SVG Library — Provides an interactive object model on top of the HTML5 canvas to make it easier to work with multiple visual elements there. The homepage is a complete live demo.


Fabric.js






Flitter: A Flutter-Like JavaScript Data Visualization Framework — Boasts a declarative syntax and support for both SVG and Canvas to allow you to build high-performance data visualizations, interactive charts, diagrams, and more. It’s also easy to integrates with React, Svelte, etc.


Flitter






SquirrellyJS 9: A Powerful Template Engine — A modern, configurable, and fast template engine promising “the power of Nunjucks” and “the simplicity of EJS”. There’s an online playground if you want to see it in action. GitHub repo.


Ben Gubler






🎁 And one for fun








Sliderland: A Minimalist Coding Playground — A slider control based visualization you can code with simple formulas. We last linked to this a few years ago, but it’s still a fun way to do some quick, visual JS math experimentation. Tixy.land is along similar lines, but based on a 2D grid.


blinry










06/26/2024





















#​694 — June 27, 2024

Read on the Web





JavaScript Weekly








A Look at JavaScript's New Set Methods — Finding the intersection, union, and difference between sets, among other set-related tasks, is now a piece of cake. Available in Node 22+, Chrome/Edge 122+, Firefox 127+, Safari 17+, and now considered a 'baseline' feature.


Brian Smith (MDN)






Ecma International Approves ECMAScript 2024: What’s New? — This week, the Ecma General Assembly approved the latest ECMAScript / JavaScript language spec, officially making it a standard. As with ECMAScript 2023, it’s a small step forward, but Dr. Axel looks at what’s new.


Dr. Axel Rauschmayer






Create Consistent UIs with Storybook — Join Steve Kinney for this extensive video course on building scalable, reusable component libraries and design systems with Storybook. Covers set up, styling, documentation, testing, and more.


Frontend Masters sponsor






Announcing TypeScript 5.5 — One of the most significant TypeScript releases in terms of features in a long time. There’s support for the new Set methods (mentioned above), regex syntax checking, isolated declarations, inferred type predicates, and more. A bumper packed release post.


Microsoft




IN BRIEF:





RELEASES:




📒 Articles & Tutorials








👑 Recreating the Queens Game in Vue — Queens is a puzzle game that combines elements of Minesweeper, chess, and Sudoku.


Fotis Adamakis






Understanding React Compiler — The new, experimental tool from the React team automates your performance tuning by rewriting your code — but should you use it, and how does it work under the hood? Tony takes a look.


Tony Alicea






Local-First Development Will Be Unlocked by Sync Engines — Sync engines are behind the amazing UX of apps like Linear and Figma. PowerSync is a plug-in sync engine for web apps.


PowerSync sponsor






Uniting Web and Native Apps with 4 Lesser-Known JavaScript APIs — Looks at some 'under-the-radar' web features, such as the Screen Orientation API and Contact Picker API, and how they can be used to create user friendly PWAs.


Juan Diego Rodríguez






Exploring Randomness in JavaScript — Specifically, Math.random() versus Crypto.getRandomValues().


Ben Nadel






Drawing the Auth Owl at Userfront | Transformational Auth & Identity — Read the story behind Userfront. Including the vision behind the company and what auth should (and shouldn't) have.


Userfront sponsor




📄 Slack's AI-Powered Conversion from Enzyme to React Testing Library – If the robots are taking jobs, at least they're the jobs that we often don't want to do.. Sergii Gorbachov (Slack)


📄 How to Mock a Child Component When Writing Angular Tests Casey Falkowski


📄 Morphing Arbitrary Paths in SVG Alexandru-Gabriel Ică



🛠 Code & Tools








Node-RED 4.0 ReleasedNode-RED is a popular ‘low code’ event-driven app development environment that uses Node.js behind the scenes. v4.0 requires Node 18 or up, improves its ‘multiplayer’ support (when multiple users are working on the same system), faster deploys, and other all-round improvements.


OpenJS Foundation






React-Admin v5 — A MIT-licensed framework for building React apps on top of REST or GraphQL APIs. You get some added structure and numerous building blocks out of the box. GitHub repo.


François Zaninotto






Deploy Your SSR Apps on AWS, Fast — Deploy any frontend framework quickly with AWS Amplify hosting. Scale to millions? ✅ Branch deployment? ✅ PR previews? ✅


AWS Amplify sponsor






wavesurfer.js: Audio Waveform Player Library — Get responsive and customizable waveforms that provide a visual impression of audio. There are plugins for working with timelines, recording, rendering spectrograms, and more. Many examples here.


katspaugh










PixelMatch 6.0: A Fast Pixel-Level Image Comparison Library — Give it two images, it’ll highlight the differences. Now distributed as a ES module.


Mapbox






📄 PDFSlick: View and Interact with PDFs — An interesting PDF viewer for React, Solid, Svelte and other JavaScript apps. Built on top of PDF.js, it uses Zustand to provide a reactive store for loaded documents. Live demos.


Vancho Stojkov













06/19/2024





















#​693 — June 20, 2024

Read on the Web





JavaScript Weekly








The Results of the State of JavaScript 2023 Survey — It feels odd including something about 2023 in June 2024, but the results of the major annual JavaScript developer survey are now out. It’s interesting to see what features JS devs do and don’t use, changes in library popularity over time, what build tools people are using, the divide between JavaScript and TypeScript usage, and much more besides.


Devographics






How JavaScript is Finally Improving the Module Experience — Multiple long-term proposals collectively known as “module harmony” will complete the features lost as developers move away from CommonJS.


Mary Branscombe / The New Stack






Simplify Your Data Collection with a Fully Integrated Form Management Platform — SurveyJS is an open-source JavaScript library suite for secure form creation and data collection in your app. Build JSON-driven surveys/forms quickly, without manual coding. Integrate with any backend system, gather and store responses while retaining full control over your data.


SurveyJS sponsor






How React 19 (Almost) Made the Internet Slower — Even changes that are planned in advance can have big effects on the developer experience if people aren’t aware of them. A change to Suspense in React 19 led to much confusion and surprise, but the story has a happy ending with the React team ready to listen to end users more closely.


Henrique Yuji




IN BRIEF:





RELEASES:




  • htmx 2.0 – The popular 'access lots of JS and Web API features via special HTML attributes' library gets a new major version mainly to remove deprecations and drop IE support.




  • Electron 31 – The cross-platform desktop app framework steps up to Chromium 126, Node 20.14, and V8 12.6.




  • Relay 17 – Facebook's declaritive GraphQL client for React.




  • ESLint 9.5, Serverless Framework v4, pnpm 9.4








Your Fastest Path to Production — Build, deploy, and scale your apps with unparalleled ease – from your first user to your billionth.


Render sponsor



📒 Articles & Tutorials








▶  3D in TypeScript with Raycasting — Raycasting is a somewhat old fashioned technique to render 3D environments (you may have seen it in 1992’s Wolfenstein 3D) but it’s easy to understand and worth implementing at least once.


Tsoding Daily






Live Types in a TypeScript Monorepo — Several strategies to make a TypeScript monorepo feel more “alive” in the sense of the propagation of changes.


Colin McDonnell






Intro to Sentry & Codecov: Live Demo — From pre to post-release, learn how Sentry help developers find and fix errors and slowdowns and deploy with confidence.


Sentry sponsor






What Happens When a Major npm Library Goes Commercial? — The ua-parser-js library is commonly used to parse user agent strings and gets over 12 million downloads a month, but it has recently switched to AGPL+commercial licensing.


Matteo Collina






Dual Publishing ESM and CJS Modules with tsup and 'Are the Types Wrong'tsup makes it easy to bundle TypeScript libraries and 'Are the Types Wrong?' analyzes packages for issues with their types.


John Reilly




📄 How to Use Google Sheets as a 'Database' from React Paul Scanlon


📺 How Svelte and RSCs are Changing Web Development – A group discussion including Svelte’s Rich Harris, Tracy Lee, Ben Lesh, and Adam Rackis. This Dot Media


📄 Mastering Date Formatting using Intl.DateTimeFormat Rafael Camargo


📄 MobX Memoizes Components (You Don't Need React Compiler) – If you’re actually using MobX, that is. Mike Johnson


📄 Refactoring a Scroll-Driven Animation from JavaScript to CSS Andrico Karoulla


📄 UUIDv7 Implemented in 20 Languages – Surprisingly short and sweet. Anton Zhiyanov



🛠 Code & Tools








Phoenix: A macOS Window Manager You Can Script with JS — macOS is set to adding more window management features in Sequoia, but how about something you can script entirely with JavaScript right now? GitHub repo.


Kasper Hirvikoski






JSONEditor: A Component for Viewing and Editing JSON — If your app needs to let users work with JSON directly, this is worth a look. It supports both text and tree views and is cross browser compatible. Live demo.


Jos de Jong






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






Rooster v9.6: Microsoft's Framework-Independent Rich Text Editor — A rich-text editor control neatly nested inside a single div element (demo). Several years old, but still maintained.


Microsoft






NLUX: A Library for Rendering Conversational AI Experiences — If you want to spin up a ChatGPT-style conversational experience on top of your own services or third party AI backends, this provides the pieces needed to get an interface up quickly. GitHub repo.


Salmen Hichri





⚙︎ NodeSwift – Bridges Node.js and Swift so you can write Swift code that talks to Node and vice versa. Kabir Oberai


⚙︎ Vuesion – Boilerplate for Next/Vue app development. Werner-Most Ideen GmbH


⚙︎ Kitbag Router – Type safe router for Vue.js. Craig Harshbarger




QUICK RELEASES:






🤖 QUICK NOTE


Next week, I'm attending the AI Engineer World's Fair. If you happen to be there, come and say hi!


It might be a bit late to attend in person unless you're based in SF, but you can subscribe to the AI Engineer YouTube channel to be notified when the livestreams go live next Wednesday and Thursday if you'd like to see what's going on.


— Peter Cooper, your editor