#630 — March 17, 2023
JavaScript Weekly
???? 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.
Xenova
???? 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.
Erick Zhao
Dynaboard: A Visual Web App IDE Made for Developers — Build high performance public and private web applications in a collaborative — full-stack — development environment.
Dynaboard sponsor
Announcing TypeScript 5.0 — Note that TypeScript doesn’t follow semantic versioning, so this is as much a ‘major’ release as 4.9 was.. but 5.0 looks cool anyway. This release of the typed JavaScript superset is packed with features like decorators, improved ESM project support for Node and bundlers, const type parameters, and more.
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.
Gajus Kuizinas
IN BRIEF:
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.
Recently we linked to ???? Dittytoy, a fun online JavaScript environment for audio coding/experiments. Someone has somehow implemented an entire Commodore 64 SID synthesizer in it!
???? Developer Day: A Front-Row Seat to What’s New with Retool
Retool sponsor
RELEASES:
Jasmine 4.6
↳ Testing framework for browsers and Node.
pm2 5.3
↳ Popular Node production process manager.
Mongoose 7.0
↳ 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)
Create and Download Text Files with JavaScript — If you want your code to be able to generate a text (such as JSON) file on the fly and have it downloaded by the user’s browser, it’s reasonably easy.
Amit Merchant
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
Too Much Tech Debt in Your node_modules? Our Team of JS Devs Can Help — We are a team of senior software engineers who specialize in tech debt. Let us modernize your JavaScript stack ????
UpgradeJS.com | JavaScript Upgrade Services sponsor
Progressively Enhancing a Table with a Web Component — Building a web component wrapper to add table sorting.
Raymond Camden
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.
ehmicky
What is Vite and Why Use It Over Create React App?
Luke Twomey
Pointers on Upgrading from Cypress v9 to v12
Gleb Bahmutov
How to Use v-model with Form Inputs in Vue
Dmitri Pavlutin
How to Create and Use Path Aliases in TypeScript Imports with Vite
Hasibul Hasan
What Is Deno and How to Use Its Sandbox?
Roman Zaynetdinov
???? 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.
William Blankenship
React ProseMirror: Integrate the ProseMirror Editor with React — ProseMirror is a toolkit for building rich text editors for the Web.
The New York Times
Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log, now with support for Vitest.
Wallaby.js sponsor
Fable 4.0: F# to JavaScript Compiler — If you fancy F#’s flavor of almost-entirely-functional development, this could be for you. GitHub repo.
Fable
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.
Luca Ongaro
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.
Jan Nicklas
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.
Tremor Labs
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.
Abdullah Alfaraj
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.
Dorbus
???? Jobs
Full Stack JavaScript Engineer @ Emerging Cybersecurity Startup — Small team/big results. Fun + flexible + always interesting. Come build our award-winning, all-in-one cybersecurity platform.
Defendify
Software Engineer (Frontend) — Join our “kick ass” team. Our software team operates from 17 countries and we’re always looking for more exceptional engineers.
Sticker Mule
Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.
Hired
???????? Got a job listing to share? Here’s how.
Fuite 2.0
↳ Tool for finding memory leaks in web apps.
???? wavesurfer.js 6.6
↳ Navigable waveform built on Web Audio & canvas.
Svelte-Inview 4.0
↳ Svelte action that monitors when an element enters/leaves the viewport.
Discord.js 14.8
↳ Library for using the Discord chat API.
Plotly.js 2.20
↳ Powerful charting library. (Examples.)
Recharts 2.5
↳ React + D3 charting library. (Examples.)
deepmerge 4.3.1
↳ Merges the enumerable properties of objects.