#630 — March 17, 2023
Read on the Web
???? Transformers.js: Running ML Models in the Browser — Transformers are a type of machine learning model often used for natural language or visual processing and while running such models directly in the browser is in its infancy, Transformers.js opens up some ML models to you with some impressive demos here.
???? Celebrating 10 Years of Electron — It feels like Electron pops up everywhere (Slack, Spotify, VS Code, and more) so it might feel surprising it’s only been with us for a decade. Slack and Electron developer Erick Zhao gives thanks to Electron’s developers, the community, gives us a bit of Electron related history, and reassures us Electron is still going strong.
Dynaboard: A Visual Web App IDE Made for Developers — Build high performance public and private web applications in a collaborative — full-stack — development environment.
Daniel Rosenwasser (Microsoft)
Turbowatch: File Change Detector and Task Orchestrator — Not just that but it claims to be extremely fast and “if you ever wanted something like Nodemon but more capable, then you are at the right place.” This looks very promising and the README is full of examples.
BREAKING NEWS: The JS Party podcast has just dropped an episode called ▶️ The Future of React – so new, we haven’t listened to it, but it features Dan Abramov and Joe Savona so may make for good weekend listening..
“The most dangerous command you run every day: npm install” says Socket, who are introducing what they call ‘safe npm’, a transparent wrapper around npm designed to, well, make it less dangerous.
CORRECTION: In issue 627 we suggested the ECMAScript 2023 spec had entered a new draft stage. TC39 member Jordan Harband pointed out to us that it has been in such a state for some time. “There’s still a stage 4 PR not yet merged,” he noted, but there will be some progress in the next month.
Defer is a new ‘zero-infrastructure’ background jobs platform for Node.js apps.
???? Developer Day: A Front-Row Seat to What’s New with Retool
Node.js v19.8.0/1 (Current)
↳ Testing framework for browsers and Node.
↳ Popular Node production process manager.
↳ Popular MongoDB ODM for Node.js.
???? Articles & Tutorials
Chrome 111 Gains a ‘View Transition’ Feature for SPAs — The View Transition API is only supported by Chrome so far, but allows easy animated page transitions within single-page apps (demo here). Luckily it suits progressive enhancement so you can start using it right now without feeling too guilty 😉 Multi-page app support is forthcoming.
Jake Archibald (Chrome Developers)
Five Mistakes I Made When Starting My First React Project — Richard shares his early React mistakes with the hope you can learn from his misfortunes. He tackles topics like using defaultProps, propTypes, and class components.
Richard Oliver Bray
Progressively Enhancing a Table with a Web Component — Building a web component wrapper to add table sorting.
Shell-Free Node.js Scripting with Execa 7.1 — Execa is a popular process execution library for Node and the latest version includes an interesting $ method feature for writing zx-style scripts with it, making it even more useful for shell scripting style usecases.
What is Vite and Why Use It Over Create React App?
Pointers on Upgrading from Cypress v9 to v12
How to Use v-model with Form Inputs in Vue
How to Create and Use Path Aliases in TypeScript Imports with Vite
What Is Deno and How to Use Its Sandbox?
???? Code & Tools
Template: A Simple Framework for Webapps — The author built it for his own projects, but notes: “It’s a joy to work in, feels “frameworky” but it’s just web standards with <100 lines of convenience JS wrapped around it. There is no magic beyond what the browser provides – I like it that way.” We do too.
React ProseMirror: Integrate the ProseMirror Editor with React — ProseMirror is a toolkit for building rich text editors for the Web.
The New York Times
MiniSearch: Small In-Memory Fulltext Search Engine for Browser and Node — The strength is that the indexed data is stored locally, allowing it to work offline and giving good performance, as seen in this demo.
css-variable: Tiny Treeshakable Library to Define CSS Custom Properties in JS — Compatible with popular CSS-in-JS libraries like Emotion, styled-components, Linaria, etc., and it boasts better CSS minification and smaller virtual DOM updates, among other features.
Tremor 2.0: The React Library to Build Dashboards Fast — Provides an array of modular components to build data-driven dashboards. v2.0 is the “first step towards a production-ready version of Tremor” and sees a full switch to Tailwind CSS. Homepage.
Stable Diffusion Plugin for Photoshop — Writing code that worked with Adobe’s weird JS variant was ghastly, but this uses their new ‘UXP’ based approach, so is interesting enough for that alone. This plugin also opens up the Stable Diffusion generative art system to Photoshop users.
Flexboard: A React Component Library for Resizable Sidebars — Try the live example. The code allows you to set min/max sizes for the resizable parts of the layout.
Software Engineer (Frontend) — Join our “kick ass” team. Our software team operates from 17 countries and we’re always looking for more exceptional engineers.
???????? Got a job listing to share? Here’s how.
↳ Tool for finding memory leaks in web apps.
???? wavesurfer.js 6.6
↳ Navigable waveform built on Web Audio & canvas.
↳ Svelte action that monitors when an element enters/leaves the viewport.
↳ Library for using the Discord chat API.
↳ Powerful charting library. (Examples.)
↳ React + D3 charting library. (Examples.)
↳ Merges the enumerable properties of objects.
Vue Testing Library 7.0
React Table Library 4.1