--- title: "A 2022 take on TodoMVC in plain JS" publication: "JavaScript Weekly" issue: 588 published_at: "2022-05-06" canonical_url: "https://javascriptweekly.com/issues/588" --- Plus an interlude for the Pythonistas, rendering SVG to PNG, mocking WebRTC, and the ... syntax. | 🇺🇦 #​588 — May 6, 2022 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/588) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/uba1eccha06rxyixtymv.jpg)](https://www.smashingmagazine.com/2022/04/partytown-eliminates-website-bloat-third-party-apps/) [How Partytown Eliminates Website Bloat From Third-Party Scripts](https://www.smashingmagazine.com/2022/04/partytown-eliminates-website-bloat-third-party-apps/) — As well as being the name of my house, [Partytown](https://partytown.builder.io/) is also a library for moving the execution of scripts into the background via [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) thus freeing up your main thread. Why does that matter? Let Steve tell you. Steve Sewell [Ryan Dahl on 'JavaScript Containers'](https://tinyclouds.org/javascript_containers) — Ryan, originally known for Node and now [Deno](https://deno.land/), thinks about JavaScript as being a universal scripting language and how the JS sandbox acts as a sort of high level version of the traditional Linux container and will only become more important in the next few years. Ryan Dahl [![\](https://copm.s3.amazonaws.com/fc199943.png)](https://wallabyjs.com?utm_source=cooperpress&utm_medium=javascriptweekly&utm_content=javascriptweekly) [Wallaby.js: 15x Faster JavaScript/Jest Testing and Debugging](https://wallabyjs.com?utm_source=cooperpress&utm_medium=javascriptweekly&utm_content=javascriptweekly) — Wallaby runs your tests immediately as you type, with runtime values, errors and code coverage displayed in real-time right next to your code. Most popular testing frameworks are supporting, including the recently released Jest v28. Wallaby.js sponsor [Why I Don’t Miss React](https://www.jackfranklin.co.uk/blog/working-with-react-and-the-web-platform/) — _Not_ a call to drop React, a declaration of it being ‘dead’, or that all frameworks are useless, but the author went from using React every day to not using it at all, and had a more pleasant time than he was expecting. Jack Franklin But.. it's not all bad news for React, Anthony Trama and his team loved Ember but moved to React and [they're even happier](https://medium.com/ashtech/i-love-ember-our-team-decided-to-switch-to-react-and-im-ecstatic-3eef66f01bd) for it. [Babylon.js 5.0: The Powerful 3D Rendering Engine](https://babylonjs.medium.com/babylon-js-5-0-beyond-the-stars-2d11d4c3d07) — [Babylon](https://www.babylonjs.com/) is a powerful framework you can use as the basis for games, visualizations, and other 3D and AR experiences running both natively and on the Web. As usual, they have [a release video](https://www.youtube.com/watch?v=zELYw2qEUjI) showing it off or you can hit [the playground](https://playground.babylonjs.com/) to get playing with a basic example in seconds. Babylon.js Project **IN BRIEF:** - [TodoMVC](https://todomvc.com/) is a long standing project showing how a ToDo app can be built in numerous frameworks. But what about _no_ framework? Marc Grabanski [shows us TodoMVC in vanilla JS](https://github.com/1Marc/todomvc-vanillajs-2022) in 2022. - I'm seeing a _lot_ of library and tool releases explicitly dropping Node 12 support in their latest versions, so if you're still using Node 12 anywhere, upgrade ASAP (or, at least, take a lot of care when updating dependencies). - [Node 18.1.0](https://nodejs.org/en/blog/release/v18.1.0/) has been released and includes [a new test running feature](https://nodejs.org/api/test.html#running-tests-from-the-command-line) on the CLI: `node --test` _(Be sure to see [Node Weekly](https://nodeweekly.com/) for more on Node.)_ **RELEASES:** [pnpm 7.0](https://github.com/pnpm/pnpm/releases/tag/v7.0.0) – Efficiency-focused npm alternative. [Mocha 10.0](https://github.com/mochajs/mocha/releases/tag/v10.0.0) – JS test framework. [ShareDB 3.0](https://github.com/share/sharedb) – OT-based realtime JSON database. [Cucumber.js 8.2](https://github.com/cucumber/cucumber-js) – BDD / plain language testing. [npm 8.9.0](https://github.com/npm/cli/releases/tag/v8.9.0) 💻 Jobs [Frontend Developer](https://grnh.se/aab98d483us) — Konrad is hiring Frontend developers to join our team in building products for the world’s most exciting companies. Konrad Group [Director of Engineering @ ButterCMS (Remote)](https://apply.workable.com/buttercms/j/4655E2A70E/) — Working closely with our founder and CEO, you’ll own all technology, deliver on our roadmap, and most importantly, ensure that our customers are successful. ButterCMS [Senior Software Engineers at Turo (SF | Remote/Hybrid Options)](https://www.beforeyouapply.com/team/engineering-at-turo?) — The world's largest car sharing marketplace on a mission to put the world’s 1.5B cars to better use. We're hiring BE, FE, ML, iOS, Android & DevOps roles at all levels. Turo [Find JavaScript Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-javascriptweekly%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired 📒 Articles & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/edgoynd2rdocxpjlnal8.jpg)](https://hoten.cc/blog/porting-zelda-classic-to-the-web/) [Porting Zelda Classic to the Web](https://hoten.cc/blog/porting-zelda-classic-to-the-web/) — I’m unsure whether to be impressed or depressed that such a fascinating and deeply technical article about putting a game on the Web doesn’t contain a single line of JavaScript, despite JS related advanced being what made this all possible, but this is a great piece of work. If you prefer playing to reading, though, the [end result is here.](https://hoten.cc/zc/play/) Connor Clark [The Triple Dot Syntax (`...`): Rest vs. Spread](https://2ality.com/2022/05/rest-vs-spread.html) — `...` has two different, though related, use cases in JavaScript, and Dr. Axel shows off both here. Dr. Axel Rauschmayer [Integrate a Customizable Gantt Widget to Your App in Less Than a Week](https://bryntum.com/products/gantt/?aw=jswkly20220506) Bryntum sponsor [8 JavaScript Questions That May Confuse You](https://pitayan.com/posts/8-javascript-quiz-that-may-confuse-you) — A little bit of fun here. 8 quick JS snippets and you’ve got to guess the results. You can then move on to [WTFJS](https://github.com/denysdovhan/wtfjs) for the ‘full fat’ equivalent of this. Yanze Dai [How To Build a Modal Dialog as a Web Component](https://www.smashingmagazine.com/2022/04/cta-modal-build-web-component/) — _“Write once and run everywhere, so to speak, or at least that was my lofty aspiration. Good news. It is indeed possible to build a modal with rich interaction that only requires authoring HTML to use.”_ Nathan Smith [Keep Up with the Latest in Startups, Tech, & Programming in Just 5 Min](https://tldr.tech/signup?utm_source=jw0506) — TLDR is a daily newsletter with links and TLDRs of the most interesting stories in startups 🚀, tech 📱, and coding 💻 TLDR Newsletter sponsor ▶[The Stack of The Future](https://www.youtube.com/watch?v=AI-5dHnnyiA&list=PLV5CVI1eNcJgNqzNwcs4UKrlJdhfDjshf) — Considering Kent works at [Remix](https://remix.run/), you might not be surprised that Remix is at the heart of this ;-) Kent C Dodds 🛠 Code & Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/kmlimfmmgzxidhgwjizn.jpg)](https://marketplace.visualstudio.com/items?itemName=mattpocock.ts-error-translator#tserror) [TypeScript Error Translator: Make TS Errors Human Readable](https://marketplace.visualstudio.com/items?itemName=mattpocock.ts-error-translator#tserror) — If you’re a VS Code user and you find TypeScript errors to be obtuse at all, this VS Code extension wants to make your life a little easier. Matt Pocock [redaxios 0.5: The Axios API, as an 800 Byte Fetch Wrapper](https://github.com/developit/redaxios) — If you love the Axios API but want it using the Fetch API behind the scenes.. Jason Miller [resvg-js 2.0: A High-Performance SVG Renderer and Toolkit](https://github.com/yisibl/resvg-js) — Powered by Rust’s [resvg](https://github.com/RazrFalcon/resvg/) on the backend, this works in both Node _and_ the browser (via WebAssembly) for converting SVG to PNG with a high level of SVG spec support. Miscellaneous [Free Activity Feeds & Chat APIs for Qualifying Teams](https://getstream.io/maker-account/?utm_source=JavascriptWeekly&utm_medium=Newsletter_Content_Ad&utm_content=Developer&utm_campaign=JavascriptWeekly_Apr2022_MakerAccount) — Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project with the Maker Account from Stream. Stream sponsor [NodeBB 2.0 Released: Node-Powered Forum Software](https://nodebb.org/blog/nodebb-version-2-0/) — A long standing Node.js-based forum system that supports multiple data stores, real-time notificatins, has a RESTful API, and more. [GitHub repo.](https://github.com/NodeBB/NodeBB) Jay Moonah [MockRTC: A Powerful WebRTC Mock Peer and Proxy](https://github.com/httptoolkit/mockrtc/) — A tool for building automated tests for WebRTC traffic or otherwise debugging WebRTC related work you’re doing. HTTP Toolkit [React Toastify 9.0: Notification Boxes Made Easy in React Apps](https://github.com/fkhadra/react-toastify/releases/tag/v9.0.0) — Now supports ‘stacked toasts’, an elegant approach to visualizing growing numbers of notifications. There’s also `useNotificationCenter`, a new hook for letting you build a notification center on top. Fadi Khadra 🐍 We're Not _Python Weekly_ But We've Still Got Some Python Stuff for You Anyway [JSPyBridge 1.0: A Bridge Between Node and Python](https://github.com/extremeheat/JSPyBridge) — A work in progress but offers the ability to go either way - run Python from Node, or run Node from Python ‘with a native feel.’ _“Unlike other bridges, you may notice you’re not just writing Python code in JavaScript, or vice-versa. You can operate on objects on the other side of the bridge as if the objects existed on your side.”_ extremeheat [Pyscript: Run Python in Your HTML](https://pyscript.net/) — A framework for creating Python apps in the browser by way of HTML. You get bi-directional communication with JavaScript, too. Unsurprisingly, WebAssembly is what does the heavy lifting and makes this all possible. [More background here.](https://www.anaconda.com/blog/pyscript-python-in-the-browser) Anaconda Inc. Published by [Cooperpress](https://cooperpress.com/) and edited by [Peter Cooper](https://twitter.com/peterc) '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