--- title: "Vue Components as Custom Elements with Vue 3.2" publication: "JavaScript Weekly" issue: 551 published_at: "2021-08-13" canonical_url: "https://javascriptweekly.com/issues/551" --- Plus V8 9.3, TypeScript 4.4 RC1, a MIDI library, ZIP file creation, and more. | #​551 — August 13, 2021 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/551) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/c_crop,w_1280,h_400,g_south,e_sharpen:60/rr5cainagxppwgjclthf.jpg)](https://blog.vuejs.org/posts/vue-3.2.html) [Vue 3.2 Released](https://blog.vuejs.org/posts/vue-3.2.html) — Some new features for single file components, significant perf improvements, and it’s now easy to define native custom elements with `defineCustomElement` (learn more about this in [Vue Components as Custom Elements](https://maximomussini.com/posts/vue-custom-elements/) – this could be a big deal for many). Evan You ['JavaScript Needs More Helper Functions for Iteration'](https://2ality.com/2021/08/iteration-helpers.html) — Many languages have a plethora of functions or methods for iteration, but many of JavaScript’s options came late and scoped to particular data types (such as Array's new methods in ES6) and Axel thinks we need to go a lot further while comparing a variety of approaches. Dr. Axel Rauschmayer [![\](https://copm.s3.amazonaws.com/6e8a2b2f.png)](https://www.influxdata.com/blog/getting-started-with-javascript-and-influxdb-2-0/?utm_source=vendor&utm_medium=referral&utm_campaign=2021-08-13_spnsr-nl_javascript-and-influxdb_global&utm_content=javascriptweekly) [Get Started with JavaScript and InfluxDB 2.0](https://www.influxdata.com/blog/getting-started-with-javascript-and-influxdb-2-0/?utm_source=vendor&utm_medium=referral&utm_campaign=2021-08-13_spnsr-nl_javascript-and-influxdb_global&utm_content=javascriptweekly) — How-to guide to monitor your JavaScript application performance and create beautiful web-based visualizations with InfluxDB time series platform. InfluxData sponsor [V8 Release v9.3](https://v8.dev/blog/v8-release-93) — Recent V8 releases have been reasonably lean on new features, and so it goes with 9.3 which mostly gets faster compilation, `Object.hasOwn` (an alias for `Object.prototype.hasOwnProperty.call`), and the ability to attach error ‘causes’ to `Error` instances. It’s in beta until Chrome 93 (due in the coming weeks) and will appear in Node.js soon too. Ingvar Stepanyan [Next.js 11.1 Released](https://nextjs.org/blog/next-11-1) — The popular React framework takes a few steps forward with experimental ES modules support, a new integration with [swc](https://swc.rs/) to ultimately replace JS tooling (Babel and Terser), faster data mapping and source maps, and more. Vercel **QUICK BITS:** - The [first release candidate of TypeScript 4.4](https://devblogs.microsoft.com/typescript/announcing-typescript-4-4-rc/) has been released with support for declaring types that can be keyed on arbitrary symbols, `static` blocks in classes, performance improvements, and more. - [Code House](https://codehouse.vercel.app/) claims to be the 'world's biggest storehouse' of developer cheatsheets. - [Firefox 91 has added](https://hacks.mozilla.org/2021/08/hopping-on-firefox-91/) support for the _Visual Viewport API_ by default and new formats for `Intl.DateTimeFormat`. - Developers have been sharing [the strangest domain names they've bought](https://stackoverflow.blog/2021/08/11/the-strange-domain-names-that-developers-bought/) – we all have a few domain skeletons in the closet, right? - Using JavaScript to [▶️ fly a drone with your mind.](https://www.youtube.com/watch?v=XtRcAR3f1RI) - A look at the new JavaScript and TypeScript [dev experience in Visual Studio 2022 Preview 3](https://devblogs.microsoft.com/visualstudio/the-new-javascript-typescript-experience-in-vs-2022-preview-3/) (no, not VS Code!) **RELEASES:** [Node.js 16.6.2, 14.17.5, and 12.22.5](https://nodejs.org/en/blog/vulnerability/aug-2021-security-releases/) [Solid 1.1.0](https://github.com/solidjs/solid/releases/tag/v1.1.0) – A declarative UI library worth investigating. [ws 8.1.0](https://github.com/websockets/ws) – Node WebSocket client and server library. [octokit.js 1.4.0](https://github.com/octokit/octokit.js) – GitHub SDK for Node, browsers and Deno. [React Date Picker 4.2](https://github.com/Hacker0x01/react-datepicker) – Simple date-picker component ([demo](https://reactdatepicker.com/)). [Ember.js 3.28.0](https://github.com/emberjs/ember.js/releases/tag/v3.28.0) – The long standing framework. [react-markdown 7.0](https://github.com/remarkjs/react-markdown/blob/main/changelog.md#700---2021-08-13) – Markdown component for React. [Aurelia 2 Alpha 16](http://aurelia.io/blog/2021/8/9/aurelia-2-update-alpha-16/) 💻 Jobs [Frontend Engineering Positions - Remote 🏖](https://crystallize.com/careers/front-end-developer) — Passion for React & GraphQL? Join our product team in building a super fast headless eCommerce service developer love. Crystallize [JavaScript Developer at X-Team (Remote)](https://x-team.com/remote-javascript-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-js&utm_content=js) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [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, Opinions & Tutorials [How to Build Force Directed Graphs with React and D3 v7](https://reactfordataviz.com/articles/force-directed-graphs-with-react-and-d3v7/) — A step-by-step build from no movement to the ‘full bells and whistles’ complete with code sandboxes to play with. Swizec Teller [Making a Web Worker Optional](https://itnext.io/javascript-development-making-a-web-worker-optional-f23a13490b28) — A generic approach to make the creation of an extra Web Worker _optional_ when one isn’t strictly needed. Tobias Uhlig [Improving Responsiveness in Text Inputs](https://nolanlawson.com/2021/08/08/improving-responsiveness-in-text-inputs/) — `requestIdleCallback` to the rescue in not running code immediately on every character change. Nolan Lawson [Building React Components For Any Front End](https://www.courier.com/blog/how-we-built-react-components-for-any-front-end?utm_campaign=Newsletters&utm_source=javascript-weekly&utm_medium=react-components-blog) — React might not be as widely used so we decided to create custom components that work in any frontend setup with any UI. Courier sponsor ▶[Learning MongoDB by Building a Project](https://www.youtube.com/watch?v=VEe4Axl0MSE) — This was a livestream so is slow paced but it’s also thorough and real and a nice look at how real developers approach building apps using Node, Next.js, and MongoDB’s hosted _Atlas_ service. Florin Pop and Jesse Hall [A Quick Refresher on JavaScript Callbacks and Promises](https://spin.atomicobject.com/2021/08/04/refresher-javascript-callbacks-promises/) Lydia Cupery [Choice Words about the Upcoming Deprecation of JavaScript Dialogs](https://css-tricks.com/choice-words-about-the-upcoming-deprecation-of-javascript-dialogs/) Chris Coyier [ Rendering in Vue to Improve Performance](https://medium.com/js-dojo/lazy-rendering-in-vue-to-improve-performance-dcccd445d5f) Martin Malinda [An Old Hacker's Tips on Staying Employed](https://madned.substack.com/p/an-old-hackers-tips-on-staying-employed) Mad Ned 🛠 Code & Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/vybmu741lhn9hbbwlqtp.jpg)](https://kulak.medium.com/introducing-midival-f837b2d48185) [Introducing MIDIVal: The Easiest Way to Interact with MIDI in Your Browser](https://kulak.medium.com/introducing-midival-f837b2d48185) — Despite being 40 years old, the MIDI protocol is still heavily used by, and hugely valuable to, musicians. MIDIVal is a higher level abstraction for working with MIDI from JavaScript. [Getting started tutorial.](https://midival.github.io/core/) Kacper Kula [Deno 1.13 Released](https://deno.com/blog/v1.13) — The 'server-side runtime that isn't Node' (but comes from the same initial creator!) has received a release with a ton of small enhancements, including its native HTTP server API going stable, language server improvements, more TLS customization options, and integrating V8 9.3. The Deno Team [The Data API with Native GraphQL and JavaScript Support](https://fauna.com/go/jamstack?utm_source=JavaScriptWeekly&utm_medium=Newsletter&utm_campaign=CooperPress_Newsletters_2021) — Create a document database with an API that handles scaling, sharding and other operationally intensive tasks for you. Fauna sponsor [JSZip: Create, Read and Edit .zip Archive Files](https://stuk.github.io/jszip/) — Yes, it even works in all major browsers (see the demo). [GitHub repo](https://github.com/Stuk/jszip). Stuart Knightley [styled-jsx 4.0: Full CSS Support for JSX Without Compromises](https://github.com/vercel/styled-jsx) — Full, scoped and component-friendly CSS support for JSX (rendered on the server or the client). Vercel [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/k1aserrezcxnbghtxlfs.jpg)](https://github.com/handsontable/hyperformula) [HyperFormula: An Excel-Like Calculation Engine Written in TypeScript](https://github.com/handsontable/hyperformula) — Provides a way to add spreadsheet style calculations to your webapps. Do note it’s GPLv3 licensed (or commercial) though. Handsontable [http-server: A Simple Zero-Conf Command-Line HTTP Server](https://github.com/http-party/http-server) — A lot more configurable (if you wish) than other simple command line HTTP servers. Robbins, Squires, et al. [Book a Demo. Ship Fast. Rest Easy. LaunchDarkly](https://learn.launchdarkly.com/demo/?utm_source=cooperpress&utm_medium=display&utm_campaign=21q3-cooperpress) LaunchDarkly sponsor [Hora: Efficient Approximate Nearest Neighbor Search Algorithms](https://github.com/hora-search/hora) — This _isn’t_ a JavaScript project but a Rust one. It targets WebAssembly, though, so can be used from JavaScript as seen in [the demos on the homepage.](https://horasearch.com/) Hora-Search [FormVueLate: Vue Schema-Driven Form Generation](https://formvuelate.js.org/) Marina Mosti 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