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

Industry News

07/24/2024
What's new for us in ECMAScript 2024





















#​698 — July 25, 2024

Read on the Web




JavaScript Weekly








Astro 4.12: Say Hello to Server Islands — The flexible Astro framework for building modern content-based sites continues to go from strength to strength. v4.12 includes a new concept of server islands, a way to integrate static HTML and server-side generated components together.


Erika and Phillips (Astro)






What’s New for JavaScript Developers in ECMAScript 2024 — High level analysis of developments in the ECMAScript spec, with insights from Ecma vice president Daniel Ehrenberg, TC39 co-chair Rob Palmer, and developer Ashley Claymore. A good, thorough roundup of the state of play.


Mary Branscombe (The New Stack)




💡 If you want to go a step further with what's coming up next, Igalia presents a summary of the recent TC39 meeting in Helsinki with which language proposals were advanced and discussed.





Level Up Your Next.js Skills — Join Scott Moss for this detailed video course on intermediate Next.js. Learn how to build production-ready apps by diving into concepts such as server actions, data fetching, protected routes, form authentication, performance caching, and more.


Frontend Masters sponsor






A Post Mortem of What Broke Node v22.5.0 — Node's ‘Current’ release line gives access to the latest Node has to offer, at the risk of encountering troublesome bugs too – v22.5 included two, alas, with Node v22.5.1 quickly following to resolve them.


Yagiz Nizipli et al.




IN BRIEF:





RELEASES:




📒 Articles & Tutorials








So You Think You Know Box Shadows? — The author indulges his creative side with some fun experiments into what he calls “some of the worst possible things” you can do with box shadows on a DIV element, coupled with JavaScript.


David Gerrells






▶  Don't Use JS for That: Moving Features to CSS and HTML — Packed with code and examples. Some techniques aren’t universally supported yet, but there’s a lot that the browser can offer that you don’t need to reimplement yourself, like color picking, modals, and animations.


Kilian Valkhof






😘 Kiss Bugs Goodbye — Get 80% automated E2E test 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






How to Choose the Best Rendering Strategy for Your App — The differences between Static Site Generation (SSG), Server-Side Rendering (SSR), Client-Side Rendering (CSR), Incremental Static Regeneration (ISR), and Partial Prerendering (PPR).


Alice Alexandra Moore (Vercel)






A Practical Guide to Not Blocking the Event Loop — A look at the core principles of synchronous and asynchronous work in a single-threaded environment, stressing the importance of non-blocking code for efficient event loop utilization.


Slava Knyazev






Why is Spawning a New Process in Node So Slow? — The developers of the Val Town platform noticed that Node couldn’t spawn more than 40 external processes per second, whereas Deno and Bun could do a lot more..


Max McDonnell






Debugging Your Node.js Project with Sentry — Join us live today to learn all the basics to monitoring and debugging your Node.js projects with Sentry.


Sentry sponsor




📺 How to Engineer Your Developer Blog Posts to Have Bigger Impact – From a Postgres community perspective, but the advice is universal and well explained. Claire Giordano


📄 Bring Your Own API Key: Supporting User-Provided OpenAI Keys and Prompts in Browser Extensions Stephen Siegert


📄 How to Review Code Effectively: A GitHub Staff Engineer’s Philosophy Sarah Vessels (GitHub)


📄 How Airbnb Smoothly Upgrades React – It was no small task. Andre Wiggins (Airbnb)



🛠 Code & Tools








Ky: Tiny, Elegant Fetch-Based HTTP Client for Browsers — Makes the Fetch API tidier to use as shown here. If you want to tighten up your fetch calls, it's worth a look.


Sindre Sorhus






React Native Filament: A 3D Rendering Engine for React Native — Fast, native 3D rendering with a React touch. Rendering takes place on a separate thread for efficiency. GitHub repo and pretty good docs, too.


Marc Rousavy






Tests Are Dead. Meticulous Is Here — Automatically creates & maintains e2e UI tests. Zero flakes. Backed by YC, CTO of GitHub, CPO of Adobe, CEO of Vercel.


Meticulous sponsor






Git Granary: A Personal Git LFS Server — A Deno-powered (but can run under Bun and Node) Git Large File Storage (LFS) server implementation written in TypeScript for self-hosted personal use cases.


David Bushell










litegraph.js: A Graph Node Engine and Editor — Useful if you need to create a system for users to create and manipulate graphs or interconnecting ‘nodes’ for things like graphics, audio or data pipelines. Demo.


Javi Agenjo













07/17/2024
Exploring JavaScript (ES2024 Edition)





















#​697 — July 18, 2024

Read on the Web




JavaScript Weekly








Exploring JS: JavaScript Books for Programmers — You’ll know Dr. Axel from his fantastic blog posts over the years, or his once tenure as JavaScript Weekly’s editor, but he also has an impressive array of no-nonsense books that you can mostly read for free online, including the newly updated Exploring JavaScript (ES2024 Edition), Deep JavaScript, and Tackling TypeScript.


Dr. Axel Rauschmayer






Node.js v22.5.0 (Current) Released — A notable release for two reasons: first, the WebSocket feature in node:http is now exposed, but second, Node is embedding SQLite and now offers direct access to it via node:sqlite.


Antoine du Hamel






WorkOS: The Modern Identity Platform for B2B SaaS — Start selling to enterprise customers with just a few lines of code. WorkOS provides flexible, easy-to-use APIs to integrate SSO, SCIM, and RBAC in minutes. It's used by hundreds of high-growth startups including Perplexity, Vercel, Drata, & Webflow.


WorkOS sponsor






▶  The Talks from dotJS 2024 — dotJS 2024 took place in Paris a few months ago, and now all the talks are available on YouTube. Highlights include Lea Verou talking about the parallels between API and UI design, David Flanagan on advancements in WebAssembly, and Minko Gechev on convergence of features in modern frameworks The talks are all short, so the takeaways are quick to get.


YouTube




IN BRIEF:





RELEASES:




📒 Articles & Tutorials








How to Make Complex Chrome Extensions — Spinning up a quick, simple browser extension isn’t that big of a deal nowadays, especially with tools like Extension to kick off a project. Larger extensions are a different story, so it’s neat to learn from the experiences of a team that’s built one.


Nina Torgunakova






Build a Task Manager with Next.js, Neon, & Clerk that Isolates Tasks to Specific Teams — Learn to build a multi-tenant task manager that solves team isolation, user role management, and authentication challenges.


Clerk sponsor






A TypeScripter's Take on Zig — Rust might be the cool systems language on the block right now, but Zig has a lot going for it too (Bun, notably, is implemented in it.) A good primer from a TypeScript perspective.


Dan Vanderkam






How Fast is JavaScript? Simulating 20 Million Particles — “The challenge: simulate 1,000,000 particles in plain JavaScript at 60 FPS on a phone using only the CPU. Let’s go.” The sort of fun, detailed experimentation I’ll always support.


David Gerrells






A Guide to Reading and Writing Node.js Streams — Matteo reminds us of the benefits of using Node’s powerful streaming data features, where they make sense, and how to handle back-pressure and error management.


Matteo Collina






ViteConf Is Back! — ViteConf will be returning to the virtual stage on October 3rd. Get your tickets now.


StackBlitz sponsor






What React Devs Need to Know About React Native — While React and React Native share many similarities, they’re different under the hood. Here’s some of what you need to know to make the transition.


Kadi Kraman (Expo)




📄 NPM Supply Chain Security: Why We Can Be Optimistic About the Future Robat William


📄 How to Create Distortion and Grain Effects on Scroll with Shaders in Three.js Jan Kohlbach


📄 How to Build a JavaScript UI Component-First DevTool Startup in 2024 Corbado



🛠 Code & Tools





Poku 2.0: A Cross-Platform Test Runner for JS — Poku’s philosophy is to ‘bring the JavaScript essence back to testing.’ It runs the same way across Node, Bun and Deno, and auto-detects ESM, CommonJS and TypeScript.


Weslley Araújo






InfiniteGrid 4.12: Arrange Card Elements Infinitely in a Grid Layout — A mature and established way to create grids formed of card elements of varying sizes. Happy on both desktop and mobile and has integrations for React, Vue, Angular, Svelte, and others. GitHub repo.


NAVER






🤖 Micro Agent: An AI Agent That Writes Code for You — A Node.js-based tool that takes the approach of writing a test case first and then iterates upon a solution until the tests pass.


Builder․io






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


Render sponsor






Hyphenopoly 6.0: A Polyfill for Client-Side Hyphenation — Hyphenates text if the user agent or language doesn't support CSS hyphenation (a feature that’s part of Baseline but with widely varying support). An interesting use of WebAssembly.


Mathias Nater






simplex-noise.js: A Fast Simplex Noise Implementation — Small, self contained, and fast, and you can use it in cool demos like this or for applying convincing grain/noise to images or other data, say.


Jonas Wagner










Maska 3.0: Zero-Dependency Input Mask Library — Several demos on the homepage. Lightweight and framework independent but offers Vue 2/3, Alpine.js and Svelte integrations. GitHub repo.


Form․io






  • Wasp 0.14 – Wasp is a Rails-like framework for React, Node.js and Prisma.




  • PKI.js 3.2 – Pure JS library for working with public key oriented systems. Certificates, signing, etc.




  • 📷 Vision Camera 4.5 – Advanced camera control for React Native.




  • AlaSQL.js 4.5 – Isomorphic JavaScript SQL database.




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




  • MUI X 7.10 – Popular React component suite.












07/10/2024
Do the (ESLint) Evolution





















#​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
Breaking a promise





















#​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