--- title: "ES2021 approved by Ecma" publication: "JavaScript Weekly" issue: 544 published_at: "2021-06-25" canonical_url: "https://javascriptweekly.com/issues/544" --- Plus more tutorials, releases, and a fancy JavaScript iPod.. | #​544 — June 25, 2021 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/544) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ovoikgkvyj3ifxz8moio.jpg)](https://h3manth.com/ES2021/) [ES2021 Now Approved; Here's the Features (Quickly)](https://h3manth.com/ES2021/) — We’ve linked to a short and sweet code-based summary of the big new features, but the actual news is that the Ecma General Assembly [has approved ES2021](https://twitter.com/robpalmer2/status/1407335682406760452). Work continues with [ECMAScript 2022 already having a draft spec](https://tc39.es/ecma262/). The [FinalizationRegistry](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry) is an interesting addition for requesting a callback for when an object is garbage collected. Hemanth HM ▶[Coding Up a Mario Game in JavaScript with Kaboom.js](https://www.youtube.com/watch?v=2nucjefSr6I) — Ania is back showing us how to create a basic platformer in the course of an hour in her typically breezy, easy to follow manner. Watch this if you want to reignite that coding spark. Ania Kubów [![\](https://copm.s3.amazonaws.com/cb348d69.png)](https://about.sourcegraph.com/blog/better-onboarding-how-to-prevent-codebase-overwhelm/?utm_source=jsweekly&utm_medium=text&utm_campaign=blog-better-onboarding&utm_content=blog-text) [Better Onboarding: How to Prevent Codebase Overwhelm](https://about.sourcegraph.com/blog/better-onboarding-how-to-prevent-codebase-overwhelm/?utm_source=jsweekly&utm_medium=text&utm_campaign=blog-better-onboarding&utm_content=blog-text) — Code complexity is increasing, and for new developers joining a team or project, the steep learning curve can be intimidating, confusing, even demoralizing. Learn more about best practices for onboarding and how to get up to speed fast. Sourcegraph sponsor [Parsing in JavaScript: The Tools and Libraries You Can Use](https://tomassetti.me/parsing-in-javascript/) — From libraries to parser generators, a look at a variety of options for parsing languages (existing or perhaps of your own creation) in JavaScript. Gabriele Tomassetti Quick Bits - Vercel, formerly ZEIT, is a popular deployment platform in the JavaScript world and they maintain Next.js. They've just [raised $102M](https://rauchg.com/2021/making-the-web-faster) which will partly go to pushing Next.js forward. - In a space running somewhat parallel to ours, you may find the [State of WebAssembly 2021](https://blog.scottlogic.com/2021/06/21/state-of-wasm.html) insights useful. Releases [Billboard.js 3.1](https://netil.medium.com/billboard-js-3-1-release-subchart-data-loading-enhancements-e98be5eebdcb) — Magnificent D3-based charting library. [Storybook 6.3](https://storybook.js.org/blog/storybook-6-3/) — UI component development environment. [Commander.js 8.0](https://github.com/tj/commander.js/releases/tag/v8.0.0) — Node.js CLI tools made easy. [Cypress 7.6.0](https://github.com/cypress-io/cypress) — The testing system. [pnpm 6.9.0](https://github.com/pnpm/pnpm/releases/tag/v6.9.0) — Alternative package manager. [FingerprintJS 3.2.0](https://github.com/fingerprintjs/fingerprintjs) — Browser fingerprinting library. 💻 Jobs [JavaScript Developer @ Kinsta](https://jobs.lever.co/kinsta/a3fe724e-65de-424c-8c07-541b15a5390a?lever-origin=applied&lever-source%5B%5D=JS%20Newsletters) — Join our ownership-embracing team of JS developers in a relaxed environment where culture is as important as technical excellence. Kinsta [Nodejs + Fintech + FullStack == You](https://angel.co/company/startuplandia/jobs/1387196-nodejs-fullstack-engineer) — Product Engineering Artists Seek Senior Level JS Devs Interested in Creator Economy Fintech Project. startuplandia.io [Find Software Engineering 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) — Take 5 minutes to build your free profile & start getting interviews for your next job. Companies on Hired are actively hiring right now. Hired 📖 Articles, Opinions & Tutorials [A Surprising Feature of JavaScript Optional Chaining](https://swizec.com/blog/a-surprising-feature-of-javascript-optional-chaining/) — `const greeting = object?.deepProp?.deeperProp?.greet` is one thing, but the final example Swizec comes up with is.. perhaps not such a great idea 😆 Swizec Teller [Demystifying `styled-components`](https://www.joshwcomeau.com/react/demystifying-styled-components/) — If anything ever seems ‘magical’, it might be time to dig in and figure out how things work. Josh ‘pops the hood’ on the popular [Styled Components](https://styled-components.com/) component styling system. Josh W Comeau [The Serverless Data API for JavaScript Apps, with Built-In GraphQL](https://fauna.com/go/jamstack?utm_source=JavaScriptWeekly&utm_medium=Newsletter&utm_campaign=CooperPress_Newsletters_2021) — Fauna is a flexible, developer-friendly, transactional database available as a secure, cloud API with native GraphQL. Fauna sponsor ▶[Ship Less JavaScript with Astro](https://www.learnwithjason.dev/ship-less-javascript-with-astro) — An interview with one of the creators of [Astro](https://astro.build/) talking about how its approach is different from other SSGs. Both a practical 90 minute video and a full transcript. Learn with Jason Show [Read and Render Markdown Files with Next.js and Nx](https://juristr.com/blog/2021/06/read-render-markdown-nextjs-and-nx/) — Part of a series about creating your own blog with Nx, Next.js and Tailwind. Juri Strumpflohner ▶[How a Streamer Uses JavaScript to Create an Interactive Livestream](https://www.youtube.com/watch?v=qzaX3y52VdY) — I’m not into livestreaming but it’s neat to see how many parts you can automate. A story rather than a tutorial. Vig [Cypress or How I Learned to Stop Worrying and Love E2E](https://madewithlove.com/blog/software-engineering/cypress-or-how-i-learned-to-stop-worrying-and-love-e2e/) — This looks like a good high level intro but I only just saw it at the last minute before sending.. :-) Emma Fabre [Building Interactive Bar Charts with D3.js](https://blog.risingstack.com/d3-js-tutorial-bar-charts-with-javascript/) Máté Huszárik 🛠 Code & Tools supported by [![Okta\](https://res.cloudinary.com/cpress/image/upload/v1602154330/de7dtktheistsfpqdem4.png)](https://developer.okta.com/?utm_campaign=newsletter_cooperpress_all_multiple_inc_dev_sponsored-section_null&utm_source=cooperpress&utm_medium=cpc) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/skpo77vvlfwyyrft8zfb.jpg)](https://indiepen.tech/) [Indiepen: A Privacy-Friendly Way to Embed HTML, CSS and JS Examples](https://indiepen.tech/) — A privacy-friendly solution to embed HTML, CSS and JS code examples on your site, blog, etc. with no cookies or tracking. Does require some fiddling in hosting your code though. Henrik and André [RunJS 2.0: A Desktop Playground for JavaScript and TypeScript](https://runjs.app/) — First appearing 2½ years ago, this cross-platform desktop tool has just had a major update with support for multiple tabs, autocomplete, type checking, and installing npm packages direct from the editor (for anyone willing to buy a licence, at least). If you want a quick, handy JavaScript ‘sandbox’ on your desktop, it’s worth checking out. Luke Haas [[Download\] Forrester New Wave: Feature Management and Experimentation](https://learn.launchdarkly.com/forrester-wave/?utm_source=cooperpress&utm_medium=display&utm_campaign=21q1-cooperpress&utm_content=ebook_forrester_wave) — Learn how LaunchDarkly helps development teams reduce software release headaches & enable true testing in production. LaunchDarkly sponsor [Quasar Framework 2.0: A Way to Build Vue.js 3-based UIs Quickly](https://quasar.dev/) — A framework built on top of Vue.js, webpack, and Node for building a wide variety of things like SSR apps, SPAs, and even Electron apps from the same codebase. Quasar Framework [ApostropheCMS 3.0 Released](https://apostrophecms.com/blog/apostrophe-3-release) — The latest release of a fully featured MIT-licensed Node.js-based CMS. It’s now powered by headless RESTful APIs from the ground up, has a new visual editing experience (powered by Vue.js), and improved modularity for extending it. [GitHub repo](https://github.com/apostrophecms/apostrophe). Alex Gilbert [Resemble.js 4.0: Image Analysis and Comparison Library](https://github.com/rsmbl/Resemble.js) — A Canvas-based approach for performing basic color/brightness analysis of images or to test how two images ‘resemble’ each other. Here’s [a live demo](http://rsmbl.github.io/Resemble.js/). Resemble [AdminJS 5.0: An Admin Panel for Node Apps](https://github.com/SoftwareBrothers/adminjs) — Formerly known as [AdminBro](https://adminbro.com/), this is an ‘automatic’ admin interface you introduce to existing apps, wire up to your ODM/ORM, and off you go. [Demo](https://admin-bro-example-app-staging.herokuapp.com/admin/login). Software Brothers [Pica: Fast, High Quality Image Resizing in the Browser](https://github.com/nodeca/pica) — For when you want to resize images yourself (from JavaScript code) and not lean on the browser’s own engine. For example, for reducing images prior to upload. [Live demo](http://nodeca.github.io/pica/demo/). Nodeca [ip-address 8.0: Library for Parsing and Manipulating IP Addresses](https://github.com/beaugunderson/ip-address) — Works with both IPv4 and IPv6 addresses. Beau Gunderson [Free Chat & Activity Feed APIs for Qualifying Teams](https://getstream.io/blog/maker-account/?utm_source=javascript_weekly&utm_medium=promoted_newsletter&utm_content=developer&utm_campaign=06_23_21) Stream sponsor ⏳ ICYMI (_Older stuff that's still worth checking out_) - Stefan Judis looks at [some lesser-known frontend auditing tools](https://www.smashingmagazine.com/2021/06/three-frontend-auditing-tools/) to help you acheive a faster website. - Here's a look at how you can [get started with canvas animations](https://medium.com/dailyjs/how-to-get-started-with-canvas-animations-in-javascript-cb2ccf37515c?source=friends_link&sk=ba4f1d57510286fed910533620fe8b06) in JavaScript — baby steps here, but well explained with examples. - Cristian Salcescu runs through [ten utility functions to use](https://medium.com/dailyjs/10-utility-functions-for-working-with-objects-in-javascript-a5ee53ef8809?source=friends_link&sk=f78654452a181650da2e48d09c997743) when working with objects. - [Here are some useful TypeScript patterns](https://spin.atomicobject.com/2021/05/11/3-useful-typescript-patterns/) to "keep in your back pocket" when solving a difficult problem or two. 🎵 And one for fun.. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/kp65ps1tbdwx9obyd6g0.jpg)](https://tannerv.com/ipod/) [iPod.js: A Web-Based JavaScript-Powered 'iPod'](https://tannerv.com/ipod/) — It’s not just a fun UI experiment.. it can connect to Apple Music and Spotify to actually play tracks too. [Source here](https://github.com/tvillarete/ipod-classic-js). And yes, I'm listening to Linda Ronstadt. Tanner Villarete 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