--- title: "How to build a useful Web Component" publication: "Frontend Focus" issue: 541 published_at: "2022-05-11" canonical_url: "https://frontendfoc.us/issues/541" --- Plus why to order CSS declarations alphabetically, Babylon.js 5.0, and porting a Zelda game to the Web. | [![\](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)](https://frontendfoc.us/) Frontend Focus 🇺🇦 #​541 — May 11, 2022 | [Read on the web](https://frontendfoc.us/issues/541) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/s4uauin4kxsvvek9thtu.jpg)](https://www.smashingmagazine.com/2022/04/cta-modal-build-web-component/) [How To Build a Modal Dialog as a Web Component](https://www.smashingmagazine.com/2022/04/cta-modal-build-web-component/) — _“Write once and run everywhere, so to speak, or at least that was my lofty aspiration. Good news. It is indeed possible to build a modal with rich interaction that only requires authoring HTML to use.”_ Nathan Smith [Porting Zelda Classic to the Web](https://hoten.cc/blog/porting-zelda-classic-to-the-web/) — A fascinating write up of an amazing piece of work.. and there’s not a single line of JavaScript. It’s pretty amazing what the browser, WebAssembly, and compiler toolchains can do now and this shows it all off pretty well. If you prefer playing to reading, though, the [end result is here.](https://hoten.cc/zc/play/) Connor Clark [![\](https://copm.s3.amazonaws.com/6d87c534.jpg)](https://frontendmasters.com/courses/figma/?utm_source=frontendfocus&utm_medium=email&utm_content=figma) [Figma for Developers](https://frontendmasters.com/courses/figma/?utm_source=frontendfocus&utm_medium=email&utm_content=figma) — Join Steve Kinney to learn how to confidently use Figma for creating user interface prototypes. You’ll also learn how to create reusable styles, typography, and components to create prototypes to show colleagues or customers before you build an entire application. Frontend Masters sponsor [Babylon.js 5.0: A Powerful 3D Web Rendering Engine](https://babylonjs.medium.com/babylon-js-5-0-beyond-the-stars-2d11d4c3d07) — [Babylon](https://www.babylonjs.com/) is a powerful framework you can use as the basis for games, visualizations, and other 3D and AR experiences running both natively and on the Web. As usual, they have [a release video](https://www.youtube.com/watch?v=zELYw2qEUjI) showing it off too or hit [the playground](https://playground.babylonjs.com/) to get playing with a basic example in seconds. Babylon.js Project [Building a Musical Instrument with the Web Audio API](https://www.taniarascia.com/musical-instrument-web-audio-api/) — One of our favorite writers in the frontend space is back with an easy to follow walkthrough of how she built [Keyboard Accordion](https://www.keyboardaccordion.com/), a Web based diatonic accordion (which I struggle to play in any coherent fashion at all but it sounds great). Tania Rascia **⚡️ Quick bits:** - [@wayback_exe](https://twitter.com/wayback_exe) is a fantastic Twitter account I've been enjoying lately. It posts screenshots of (mostly) ancient Web pages each day. - [100 Days to Offload](https://100daystooffload.com/) is a group project around publishing 100 posts on your blog within the next year – something we wholeheartedly support. Let's bring blogging back! 📙 **Tutorials, Articles & Opinion** ['Please, Stop Disabling Zoom'](https://www.matuzo.at/blog/2022/please-stop-disabling-zoom/) — OK, _sometimes_ there might be a good reason, but 9 times out of 10, you’re probably going to be causing someone some accessibility problems on mobile, so don’t just do it without consideration. Manuel Matuzović [On Ordering CSS Declarations Alphabetically](https://blog.jim-nielsen.com/2022/ordering-css-delcarations/) — Jim is sold on the idea of ordering CSS declarations alphabetically, not because it’s more organized but because it actually forces you to take more care. Jim Nielsen [Free Chat/Messaging UI Kits for Your Website or App](https://getstream.io/chat/ui-kit/?utm_source=FrondendFocus&utm_medium=Newsletter_Content_Ad&utm_content=Developer&utm_campaign=FrondendFocus_May2022_ChatUIKit) — Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project with the Maker Account from Stream. Stream sponsor ['It’s Time We Fix The Unethical Design of Cookie Consent Windows'](https://uxdesign.cc/unethical-design-of-cookie-consent-windows-857ef68f1bd6) — It’s often just easier to click ‘Accept’ rather than think about the ramifications of your choices when it comes to cookie consent windows, but could we make things better? The key, says this author, is to make the absolute minimum necessary the default option. Nicat Manafov [Designing a Better Language Selector](https://www.smashingmagazine.com/2022/05/designing-better-language-selector/) — Language selectors are common on sites with worldwide audiences but there are so many different approaches. Vitaly looks at a _lot_ of options here and narrows in on what’s really essential to get right. Vitaly Friedman [A Dive into Text Wrapping and Word Breaking on the Web](https://codersblock.com/blog/deep-dive-into-text-wrapping-and-word-breaking/) — A look at ways to control how text wraps (or doesn’t wrap) on a page. Will Boyd ▶[Discussing Front-End Testing with Lucas Da Costa](https://podcast.20minjs.com/1952066/10548782-episode-9-front-end-testing-with-lucas-da-costa) — The author of _Testing JavaScript Applications_ (published by Manning) talks about the role of testing in front-end projects and what tools are at your disposal. _(38 minutes.)_ 20minJS podcast ▶[Serverless for Frontend Engineers with Swizec Teller](https://www.serverlesschats.com/135/) — Swizec does courses in using React alongside serverless technologies and speaks with Jeremy and Rebecca here about approaching serverless as a frontend engineer, JavaScript, and troublesome tutorials. Serverless Chats Podcast podcast [How To Build an Absurdly Backwards Compatible Website](https://flower.codes/2022/03/23/backwards-compatibility.html) Zachary Flower [On the Capitalization of Vendor-Prefixed CSS Property Names in JavaScript](https://alanhogan.com/code/vendor-prefixed-css-property-names-in-javascript) Alan Hogan [The Joys and Sorrows of Maintaining a Personal Website](https://cheapskatesguide.org/articles/joys-and-sorrows.html) The Cheapskate's Guide Jobs [Senior Vue.js Developer (Remote-Friendly)](https://www.monterail.com/careers/senior-frontend-developer-vue?utm_medium=email&utm_source=newsletter&utm_campaign=frontend) — Software Development Agency in Wrocław, Poland working with experts from around the globe to create meaningful software. Monterail [Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-frontend&utm_content=frontend) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [Find Frontend 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-frontendfocus%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 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/mstgdk8a4fwymoteskjm.jpg)](https://dohliam.github.io/dropin-minimal-css/) [A Drop-in Minimal CSS Framework Previewer](https://dohliam.github.io/dropin-minimal-css/) — There are a lot of ‘minimal’ CSS frameworks, such as [new.css](https://newcss.net/) and [Primer CSS](https://primer.style/css/) but it can be hard to trawl through them for something you’d like. Enter this ‘minimal CSS framework switcher’ where you get to preview lots of minimal CSS frameworks on a single page. Liam Doherty [Useful Tools for Creating AVIF Images](https://css-tricks.com/useful-tools-for-creating-avif-images/) — AVIF (AV1 Image File Format) is a modern image file format which offer space and efficiency benefits over legacy alternatives. Its [support](https://caniuse.com/avif) is good in Firefox and Chrome but Safari has yet to get on board. Sunkanmi Fafowora [Project Management for Today's (and Tomorrow's) Software Teams](https://shortcut.com/?utm_source=cooperFRONTEND&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=tomorrow) Shortcut (formerly Clubhouse.io) sponsor [CSS Gradient Generator](https://www.joshwcomeau.com/gradient-generator/) — A great web tool for creating “beautiful, lush gradients”. Nice options to play around with here, and the CSS output can be copied in one click. Josh W. Comeau [CSS Accordion Slider Generator](https://accordionslider.com/) — An online tool for creating basic collapsing content areas (a.k.a. ‘accordions’) with CSS and HTML you can copy and paste into your project. Onur Adsay [Scrollex: A Library to Build Beautiful Scroll Experiences with Minimal Code](https://github.com/malerba118/scrollex) — Definitely not for every project but you can check out some really cool examples of what’s possible [on the demo page](https://scrollex-docs.vercel.app/examples). Austin Malerba [MockRTC: A Powerful WebRTC Mock Peer and Proxy](https://github.com/httptoolkit/mockrtc/) — A tool for building automated tests for WebRTC traffic or otherwise debugging WebRTC related work you’re doing. HTTP Toolkit **🕰 ICYMI** (_Some older stuff that's still worth checking out_) - Got a new Mac? Robin Wieruch runs through [how to set up an M1 machine for web development](https://www.robinwieruch.de/mac-setup-web-development/). - This video from Maarten Van Hoof is a good look at [how container queries will help us](https://www.youtube.com/watch?v=A2dMca3WrJE) create robust, resuable components with CSS. - Why is CSS the way it is? Well, [here Jim Nielsen takes a look back](https://blog.jim-nielsen.com/2022/things-the-css-spec-folks-got-right/) to appreciate the things the original authors of CSS got right. - Use Netlify's CLI? [Here's a quick rundown](https://css-tricks.com/top-things-you-didnt-know-you-could-do-with-netlify-cli/) of things you may not know you can do with it. - [Plain Text Sports](https://plaintextsports.com/) is a simple site that does away with the typical 'cruft and complications' of the modern. So, are we about to see more of this rebeling "_[against the general overwhelm of the internet](https://www.protocol.com/newsletters/sourcecode/plain-text-sports-internet?rebelltitem=11#rebelltitem11)_"? 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)