--- title: "Promises visualized" publication: "JavaScript Weekly" issue: 681 published_at: "2024-03-28" canonical_url: "https://javascriptweekly.com/issues/681" --- Plus Atlassian's drag and drop framework, a new Vue app scaffolding tool, and taking a 3D view of your DOM. | #​681 — March 28, 2024 [Read on the Web](https://javascriptweekly.com/issues/681) Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/courses/blazingly-fast-js/?utm_source=email&utm_medium=javascriptweekly&utm_content=blazinglyfastjs) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/zwg0bhenhu7xb8mc86uy.jpg)](https://www.lydiahallie.com/blog/promise-execution) [JavaScript Visualized: Promise Execution](https://www.lydiahallie.com/blog/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](https://www.youtube.com/watch?v=LB8KwiiUGy0) — 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 [![\](https://copm.s3.amazonaws.com/f0aaa9df.png)](https://frontendmasters.com/courses/blazingly-fast-js/?utm_source=email&utm_medium=javascriptweekly&utm_content=blazinglyfastjs) [Learn Advanced JavaScript Performance Optimization](https://frontendmasters.com/courses/blazingly-fast-js/?utm_source=email&utm_medium=javascriptweekly&utm_content=blazinglyfastjs) — 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:** - The Node.js Technical Steering Committee has [confirmed there's no intention to remove npm](https://socket.dev/blog/node-js-tsc-confirms-no-intention-to-remove-npm-from-distribution) from the main Node distribution. - [Is _Bun_ Windows Yet?](https://isbunwindowsyet.com/) No, but Bun 1.1, which _will_ support Windows, [is supposedly just four days away..](https://twitter.com/bunjavascript/status/1773040914715259270) - [An example of a simple, yet useful, Web Component](https://gist.github.com/ceving/6e65886e04563ed9e6e42cc5f8d3f656) in a single GitHub Gist. - The [RedwoodJS framework now supports React Server Components too](https://redwoodjs.com/blog/rsc-now-in-redwoodjs), as an alternative to its traditional GraphQL-based approach. - [RunJS Play](https://runjs.app/play) is a neat Web-based JavaScript playground that shows instant live feedback alongside each line. - [Vercel now fully supports Node.js 20](https://vercel.com/changelog/node-js-v20-lts-is-now-generally-available) for both builds and functions. **RELEASES:** - [VitePress 1.0](https://blog.vuejs.org/posts/vitepress-1.0) – Powerful static site generator. - [Neutralinojs 5.1](https://neutralino.js.org/docs/release-notes/framework/#v510) – Alternative cross-platform desktop app framework. - [Babylon.js 7.0](https://github.com/BabylonJS/Babylon.js/releases/tag/7.0.0) – Powerful game & 3D rendering engine. No official release post yet, but expected later today. - [Radix Themes 3.0](https://www.radix-ui.com/blog/themes-3) – Powerful frontend component library. - [Node.js v20.12.0 (LTS)](https://nodejs.org/en/blog/release/v20.12.0) and [Node v18.20.0 (LTS)](https://nodejs.org/en/blog/release/v18.20.0). - [Deno 1.42.0](https://github.com/denoland/deno/releases/tag/v1.42.0), [Vite 5.2](https://twitter.com/vite_js/status/1770455259069968837), [TypeChat 0.1](https://microsoft.github.io/TypeChat/blog/announcing-typechat-0-1-0/), [Chromatic 3](https://www.chromatic.com/blog/chromatic-3/). 📒 Articles & Tutorials [A Look at ECMAScript's Iterator Helper Methods](https://v8.dev/features/iterator-helpers) — [The proposal](https://github.com/tc39/proposal-iterator-helpers) 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”](https://waku.gg/blog/introducing-pages-router) — [Waku](https://waku.gg/) 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](https://userfront.com/?&utm_source=javascriptweekly-com&utm_medium=newsletter&utm_campaign=sponsored_link&utm_content=transformational) — 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](https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-spring-2024-edition/) — 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](https://blog.platformatic.dev/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](https://blog.angular.io/meet-angulars-new-output-api-253a41ffa13c) — Outputs allow component authors to emit values to parent components. Paul Gschwendtner (Google) [We Rewrote our React App in Svelte in Three Weeks](https://dusty.phillips.codes/2024/03/20/we-rewrote-our-react-app-in-svelte-in-three-weeks/) Dusty Phillips [How to Use the Web Bluetooth API](https://confidence.sh/blog/how-to-use-the-web-bluetooth-api/) Confidence Okoghenun 🛠 Code & Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/rr2cuhr062w6lyxc8hna.jpg)](https://trix-editor.org/) [Trix 2.1: A Clean, Rich WYSIWYG Editor for the Web](https://trix-editor.org/) — 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](https://github.com/basecamp/trix). 37signals [Meet the Future of Data Delivery with Hasura DDN](https://hasura.io/events/launch/dev-day?utm_source=newsletter&utm_medium=email&utm_campaign=javascript-weekly) — 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](https://atlassian.design/components/pragmatic-drag-and-drop/about) — 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](https://www.youtube.com/watch?v=5SQkOyzZLHM) by Alex Reardon walking through the motivations for creating it and how it works. Atlassian [Create Vue3 App: A New Vue App Scaffolding Tool](https://github.com/selemondev/create-vue3-app) — 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 [`` 4.4: Format Timestamps as Localized Relative Times](https://github.com/github/relative-time-element) — 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](https://github.github.io/relative-time-element/examples/). GitHub [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/r0yq0hl6kr0flcantu9u.jpg)](https://gist.github.com/OrionReed/4c3778ebc2b5026d2354359ca49077ca) [DOM3D.js: 3D DOM Viewer in a GitHub Gist](https://gist.github.com/OrionReed/4c3778ebc2b5026d2354359ca49077ca) — 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](https://workos.com/?utm_source=cpjava&utm_medium=newsletter&utm_campaign=q12024) — WorkOS provides easy-to-use APIs for authentication, user identity, and complex enterprise features like SSO and SCIM. WorkOS sponsor - [PGlite 0.1](https://github.com/electric-sql/pglite) – Lightweight Postgres packaged as WASM into a TypeScript library for the browser, Node.js, Bun and Deno. - [npm-publish 3.1](https://github.com/JS-DevTools/npm-publish) – GitHub Action to publish packages to npm. - [AdminJS 7.8](https://adminjs.co/) – Automatic admin interface for Node.js apps. - [Slonik 39.3](https://github.com/gajus/slonik) – Node.js Postgres client with type safety. - [react-three-fiber 8.16](https://github.com/pmndrs/react-three-fiber) – React renderer for Three.js. Published by [Cooperpress](https://cooperpress.com/) and edited by [Peter Cooper](https://twitter.com/cooperx86) 'JavaScript' is a trademark of Oracle Corporation in the US We are not endorsed by or affiliated with Oracle. [Change your email address](https://javascriptweekly.com/edit_subscription/*|UID|*) or [stop getting this newsletter](https://javascriptweekly.com/leave/*|UID|*). © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom