--- title: "JavaScript Vocoder Puccini" publication: "JavaScript Weekly" issue: 616 published_at: "2022-11-25" canonical_url: "https://javascriptweekly.com/issues/616" --- Plus the State of JavaScript survey is open, Rails comes to JavaScript, and Firebase invests in Vue. | #​616 — November 25, 2022 [Read on the Web](https://javascriptweekly.com/issues/616) Together with [![GrapeCity\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_740,h_100/e_make_transparent/co_white,e_outline:7/rdgadhbipocykh56ysky.png)](https://www.grapecity.com/javascript-solutions?utm_source=CooperPress&utm_medium=JavaScript-Weekly&utm_campaign=JS-Grid-Spreadsheet-Sponsor-11-22) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/psljaxlcaoq2kqxjpobz.jpg)](https://survey.devographics.com/survey/state-of-js/2022?source=jsweekly) [The State of JavaScript 2022 Survey is Open](https://survey.devographics.com/survey/state-of-js/2022?source=jsweekly) — JavaScript’s most popular annual survey is open once again. The results ([2021’s](https://2021.stateofjs.com/en-US/), for example) are always fascinating to see, so go share your knowledge so we can see where JavaScript is headed. There’s a ‘guest’ mode so you can take part anonymously this year without having to sign up. Devographics 🦕 [Building Apps in Deno with Frameworks](https://deno.com/blog/frameworks-with-npm) — Deno, perhaps best known as the server-side JS runtime that _isn’t_ Node, had [a big release last week](https://deno.com/blog/v1.28) adding first-class npm package support. This opens up a lot of opportunities for more easily using Deno to create, say, React, Express or Vue apps, and this post shows off how. Andy Jiang (Deno) [![\](https://copm.s3.amazonaws.com/ff90c34d.png)](https://www.grapecity.com/javascript-solutions?utm_source=CooperPress&utm_medium=JavaScript-Weekly&utm_campaign=JS-Grid-Spreadsheet-Sponsor-11-22) [Advanced JavaScript Datagrid & Spreadsheet Components](https://www.grapecity.com/javascript-solutions?utm_source=CooperPress&utm_medium=JavaScript-Weekly&utm_campaign=JS-Grid-Spreadsheet-Sponsor-11-22) — Wijmo brings you lightweight, high-performing, framework-agnostic JavaScript components like datagrids. SpreadJS delivers a true Excel-like spreadsheet component for JS applications. Our solutions are modularized to add only what you need. GrapeCity sponsor [Script Kit: JS-Based Workflow Scripting](https://www.scriptkit.com/) — A tool for creating and running scripts (in JavaScript) that solve your daily problems, like launching things, manipulating images or text, moving apps around or, well, [hundreds of things.](https://www.scriptkit.com/scripts) It can load in npm packages on the fly, too, so you’re not restricted in what you can do. **Focused on macOS but with an alpha preview build for Windows.** John Lindquist **IN BRIEF:** - The _Syntax_ podcast featured [▶️ an interview with Ryan Dahl](https://syntax.fm/show/538/supper-club-ryan-dahl-and-deno) who spoke about all things Deno related, past, present and future. - Google's Firebase platform is [building a 'first class' experience for Vue developers](https://firebase.blog/posts/2022/11/investing-in-vuefire-nuxt-vue), including support for Nuxt. - 📗 James Sinclair has released his [_A Skeptic’s Guide to Functional Programming with JavaScript_](https://jrsinclair.com/skeptics-guide) book. It costs money but is on sale until December 9. - ESLint is [set to be (entirely) rewritten](https://github.com/eslint/eslint/discussions/16557). **RELEASES:** - [Axios 1.2](https://github.com/axios/axios) ↳ Long standing promise-based HTTP client API. - [Prettier 2.8](https://prettier.io/blog/2022/11/23/2.8.0.html) ↳ Popular code formatter. - [Opal 1.6](https://opalrb.com/blog/2022/11/24/opal-1-6-opal-rspec-1-0/) ↳ Ruby to JavaScript transpiler. - [tRPC 10](https://trpc.io/blog/announcing-trpc-10) ↳ End-to-end type-safe APIs made easy. 📒 Articles & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/y39vte12n7s9dz6pf4kr.jpg)](https://jott.live/markdown/ml_pipes) [Machine Learning with Unix Pipes and JavaScript](https://jott.live/markdown/ml_pipes) — Built on top of the [Bun runtime](https://bun.sh/), this post shows off how JavaScript and the [Shumai](https://github.com/facebookresearch/shumai) tensor library can be used in Unix-y style for ML from the command line. Love this sort of experimentation! Bram Wasti [A Guide to Keyboard Accessibility from JavaScript](https://www.smashingmagazine.com/2022/11/guide-keyboard-accessibility-javascript-part2/) — The first article in this series [looked at HTML and CSS accessibility](https://www.smashingmagazine.com/2022/11/guide-keyboard-accessibility-html-css-part1/), and this second entry focuses on what you can do in JavaScript to improve the experience for keyboard-oriented users. Cristian Diaz ▶[Your Source for Candid Chats on Product, Business & Leadership](https://postlight.com/podcast?utm_source=cooperpress&utm_medium=email&utm_campaign=editaudio) — Join Postlight leaders & guests as they discuss topics like running great meetings & creating solid product launches. The Postlight Podcast sponsor [Optimizing a Vue.js App](https://www.smashingmagazine.com/2022/11/optimizing-vue-app/) — Covers some basic ideas to keep in mind when building Vue apps. Michelle Barker [Producing Native ES Modules on Node.js with TypeScript](https://2ality.com/2021/06/typescript-esm-nodejs.html) — First appearing in 2021, this handy blog post from JavaScript’s resident doctor has undergone a 2022 update. Dr. Axel Rauschmayer [React Native in 2022 and Beyond](https://semaphoreci.com/blog/react-native) — Summarizes the latest developments in React Native and where it’s headed next. Zain Sajjad [How We Lost Our Slick New Package Name (And Then Got It Back)](https://reactflow.dev/blog/reactflow-npm-package-name/) — The developer behind ‘React Flow’ was given access to the ‘reactflow’ package on npm but when he came to publish his package things got messy due to existence of a ‘react-flow’ package. Moritz Klack [Creating a 2D Physics Engine from Scratch in JavaScript](https://ailef.tech/2022/11/12/creating-a-2d-physics-engine-from-scratch-in-javascript/) ailef [Dependency Injection in JavaScript](https://snyk.io/blog/dependency-injection-in-javascript/) Jerry Ejonavi 🛠 Code & Tools [TwClassed: Type-Safe Library for Reusable Tailwind Components](https://tw-classed.vercel.app/) — If you’d like to build components using Tailwind CSS _and_ have them be type-safe, this is for you. Happy with vanilla JS or in React (via a wrapper). [This post](https://dev.to/sannajammeh/im-merging-css-in-js-and-tailwind-c38) explains why the author created it. [GitHub repo](https://github.com/sannajammeh/tw-classed). Sanna Jammeh [JavaScript Scratchpad for VS Code (2m+ Downloads), Now Supports Vite](https://quokkajs.com/?utm_source=cooperpress&utm_medium=javascriptweekly&utm_content=javascriptweekly) — Quokka.js, the #1 tool for exploring and testing JavaScript/TypeScript. See runtime values and errors in your editor. Wallaby.js sponsor [Eruda 2.6: A Console for Mobile Browsers](https://github.com/liriliri/eruda) — If you’re in a situation where you have no access to DevTools, you can add Eruda to your page and it provides a sort of virtual devtools you can use from any browser, including on mobile. LiriLiri [Ant Design 5.0: Enterprise-Class Design Language and React UI Library](https://github.com/ant-design/ant-design/issues/38671) — New components, a calmer more modern styling, and improved dynamic theming options are now in this popular, mature UI suite. Already an Ant user? There’s a [v4 to v5 migration guide.](https://ant.design/docs/react/migration-v5) – [Official homepage](https://ant.design/). Ant Design Team [Hyperstack: A New Rails-Inspired Node.js Web Framework](https://hyperstackjs.io/) — A fresh take on the idea of bringing something like _Ruby on Rails_ into the JavaScript world. Tread carefully; the paint is still fresh. Dotan Nahum [React Authentication, Simplified](https://userfront.com/tutorials/react-authentication) Userfront sponsor [Slim Select 2.0: An Advanced Select Dropdown Control](https://slimselectjs.com/) Brian Voelker [jxl.js: A WebAssembly-based JPEG XL Decoder](https://github.com/niutech/jxl.js) niu tech - [Rollup 3.4](https://github.com/rollup/rollup) ↳ Next-generation ES module bundler. - [better-sqlite3 8.0](https://github.com/WiseLibs/better-sqlite3) ↳ Fast, simple library for SQLite on Node.js. - [NodeBB 2.6](https://github.com/NodeBB/NodeBB) ↳ Node.js based forum software. - [Shepherd 11.0](https://github.com/shipshapecode/shepherd) ↳ Guide your users through a tour of your app. ([Demo.](https://shepherdjs.dev/)) - [jest-junit 15.0](https://github.com/jest-community/jest-junit) ↳ Jest reporter that creates compatible JUnit XML files. 💻 Jobs [Software Engineer](https://www.stimulus.com/jobs/1539721e-7c7d-4f45-a5b0-17e5c02d7bd0) — [Stimulus](https://www.stimulus.com/jobs) is a social platform started by Sticker Mule to show what's possible if your mission is to increase human happiness. Join our engineering team. Stimulus [Senior Frontend Engineer (EU Remote or relocate to Berlin)](https://feather-insurance.com/careers/senior-frontend-engineer?channel_id=921909) — We’ve built a product thousands of people love (see Trustpilot if you don’t believe us). We need your help with React & TypeScript. Feather [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 🎤 And one for fun.. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ytqmiianbnh1jsvapssf.jpg)](https://dittytoy.net/ditty/6f30b0885d) [Dittytoy: JavaScript-Based Generative Music Sandbox](https://dittytoy.net/ditty/6f30b0885d) — This is a fun online, JavaScript-based audio playground of sorts. Here we begin with some vocoder Puccini, but there’s also [Super Mario](https://dittytoy.net/ditty/2a0acbb94b), [techno](https://dittytoy.net/ditty/b3585fb3a3), and [a clarinet](https://dittytoy.net/ditty/42f7d55903) to enjoy. Quirky and fun idea. Dittytoy 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