--- title: "None of the top 100 sites uses fully conformant HTML?" publication: "Frontend Focus" issue: 616 published_at: "2023-11-01" canonical_url: "https://frontendfoc.us/issues/616" --- Plus how to interpret page speed reports, and what can we change about browsers to make them more modern? | Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/courses/getting-a-job-v2/?utm_source=email&utm_medium=frontendfocus&utm_content=gettingajobv2) 🚀 Frontend **Focus** #​616 — November 1, 2023 | [Read on the web](https://frontendfoc.us/issues/616) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/qguvwbwgxarm7fgpvp2p.jpg)](https://www.zachleat.com/web/browser-window/) [``: A Web Component to Create Pretend Browser Windows on the Web](https://www.zachleat.com/web/browser-window/) — Initially built to use within a slide deck (for [this talk](https://www.zachleat.com/web/this-website-is-a-tech-talk/)), `browser-window` is a lightweight themed zero-dependency web component wrapper to emulate a Safari-like browser window within a Web page. The [page full of demos](https://zachleat.github.io/browser-window/demo.html) might give you some ideas for its use. Zach Leatherman [Reality Check #1: Building Out a Furniture Site from Dribbble](https://set.studio/reality-check-1-building-out-a-furniture-site-from-dribbble/) — This is a fun new experimental blog series where a visually stunning design is taken from Dribbble and then recreated by a professional Web developer to see how well it might function in practice. This first one is for a furniture site. Andy Bell [![\](https://copm.s3.amazonaws.com/43529d66.png)](https://frontendmasters.com/courses/getting-a-job-v2/?utm_source=email&utm_medium=frontendfocus&utm_content=gettingajobv2) [Free Course: Land a Software Engineering Role](https://frontendmasters.com/courses/getting-a-job-v2/?utm_source=email&utm_medium=frontendfocus&utm_content=gettingajobv2) — Jerome Hardaway has helps over 300 folks get a software development job — now he shares his advice in this video course — featuring resume tips, networking advice, how to optimize your GitHub profile for technical scrutiny, and more. Frontend Masters sponsor [Answering Common Questions About Interpreting Page Speed Reports](https://www.smashingmagazine.com/2023/10/answering-questions-interpreting-page-speed-reports/) — This post takes a closer look at how various performance tools both audit and report on various performance metrics (such as core web vitals), and then answers some common questions that arise from running such audits. Geoff Graham [You're Gonna Need A Bigger Browser](https://berjon.com/bigger-browser/) — Yes, browsers are hugely load-bearing in the web’s architecture, and Robin notes they haven’t really changed all that much. As such this post questions some aspects that seem worthy candidates for change to best serve the user going forward. Robin Berjon [WebKit Features in Safari 17.1](https://webkit.org/blog/14735/webkit-features-in-safari-17-1/) — Here’s a rundown of what’s new. Oh, and [17.2 is already in beta](https://developer.apple.com/documentation/safari-release-notes/safari-17_2-release-notes). WebKit **⚡️ IN BRIEF** - ⭐️ Yikes. [None of the 100 most-visited websites globally](https://meiert.com/en/blog/html-conformance-2023/) uses HTML in _full_ conformance with the HTML spec, though a few get very close. - The first ever [State of React survey](https://survey.devographics.com/en-US/survey/state-of-react/2023) is now live and invites you to both test your React knowledge and share your thoughts on the React ecosystem. - Google's journey to [mobile-first indexing](https://developers.google.com/search/blog/2023/10/mobile-first-is-here) is now complete. - Mozilla shares some details on how [improvements have been made to the speed of Firefox](https://hacks.mozilla.org/2023/10/down-and-to-the-right-firefox-got-faster-for-real-users-in-2023/) this year. - In other Mozilla news, folks using Debian-based Linux distros are now [being provided with Firefox Nightly `.deb` packages.](https://blog.nightly.mozilla.org/2023/10/30/introducing-mozillas-firefox-nightly-deb-packages-for-debian-based-linux-distributions/) - Automattic's WooCommerce is [rebranding as just 'Woo'](https://wptavern.com/woocommerce-rebrands-as-woo). 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1698846059/hiil1qamu6x6vm7i451y.png)](https://danielcwilson.com/posts/mathematicss-rem-mod/) [The New CSS Math: `rem()` and `mod()`](https://danielcwilson.com/posts/mathematicss-rem-mod/) — Runs through the basics of these two new math functions and highlights some use cases. Dan notes that “_the nuance in how they work is not always clear from the start_” — so this quick overview should prove handy. Dan Wilson ▶[Your Website Does Not _Need_ JavaScript](https://www.youtube.com/watch?v=wKU65gV6FSA) — An hour long talk in which Amy builds a completely static website — using a collection of HTML and CSS files with no tracking, no scripting, no servers, and no third-party resources. Amy Kapernick ['Let’s Reinvent the Wheel'](https://vasilis.nl/nerd/lets-reinvent-the-wheel/) — Musing on how we approach designing the web, highlighting some pain points with current methods, issues with design tools, and what role CSS can play in creating our sites. Vasilis van Gemert [Naming Variables in CSS](https://jwdallas.com/posts/namingcssvariables/) — Some conventions that you may want to consider when it comes to naming your CSS variables. Jonathan Dallas [Stick to Your True Love and Work #LikeABosch](https://www.bosch.com/careers/why-bosch/collaboration-and-leadership/?utm_campaignid=frontend&utm_source=cooperpress&utm_medium=cpc&utm_campaign=wlab&utm_term=secondary&utm_content=sticker) — You're the perfect link between code & car? Then you’re perfect for us. Show your skills & join our team. [Learn more](https://www.bosch.com/careers/why-bosch/collaboration-and-leadership/?utm_campaignid=frontend&utm_source=cooperpress&utm_medium=cpc&utm_campaign=wlab&utm_term=secondary&utm_content=sticker). Bosch sponsor [Exit Animations](https://chriscoyier.net/2023/10/30/exit-animations/) — Animating an element as it _leaves_ the DOM isn’t something that’s particularly straightforward. Here Chris shares some options, before commenting that he hopes something like “`@exit-style` or `@exiting-style` or `@outgoing-style` or `::outgoing`” lands in CSS eventually. Chris Coyier [How Blogging Platform _Bear_ Does Analytics with CSS](https://herman.bearblog.dev/how-bear-does-analytics-with-css/) — Instead of using server logs this “_slightly boutique_” analytics system triggers a read with a `body:hover` CSS declaration. Herman Martinus [Making Music with Google Sheets and Web MIDI API](https://www.asepbagja.com/programming/making-music-with-google-sheets/) — A fun curio this — with the help of Web MIDI API, we can use Google Sheets as a music sequencer. Asep Bagja [Passkeys: A No-Frills Explainer on the Future of Password-Less Authentication](https://www.smashingmagazine.com/2023/10/passkeys-explainer-future-password-less-authentication/) Neal Fennimore [The UK Online Safety Bill Becomes Law, What Does It Mean?](https://hackaday.com/2023/10/29/the-uk-online-safety-bill-becomes-law-what-does-it-mean/) Jenny List ▶[Why Passkeys are the Future](https://www.youtube.com/watch?v=aaPvZq2KyTE) Siegfried, deploy! 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/fmeccwkhhsnsyh4z8dvp.jpg)](https://docusaurus.io/blog/releases/3.0) [Docusaurus 3.0: The Elegant Static Site Generator](https://docusaurus.io/blog/releases/3.0) — [Docusaurus](https://docusaurus.io/) is a popular React-powered tool aimed at building documentation sites in particular, though it can handle more general sites too. Folks like Supabase, Redux and Temporal use it for their doc sites. v3 features an upgrade to MDX v3, React 18, Mermaid v10, and essentially modernizes everything. Sébastien Lorber [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1698846414/e6xr8x1gzm2pmrsxt98x.jpg)](https://tiny-helpers.dev/) [Tiny Helpers: Online Tools for Web Developers](https://tiny-helpers.dev/) — We first featured this now sizeable collection of single-purpose online tools around three years ago, and it has since grown to over 500 resources. It has plenty of tools aimed at developers of all types — think things like color management, favicon generators, accessibility tools, and more. Stefan Judis [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1698835203/qqxcovgf58pn4m3eyvl4.png)](https://nightwindcss.com/) [Nightwind: Automatic Dark Mode for Tailwind Sites](https://nightwindcss.com/) — An innovative and customizable Tailwind plugin that takes your current color choices into consideration when constructing a dark mode theme for your site. Try it out directly on the page. Nightwind [TailwindMate: Convert CSS Colors to and from Tailwind Format](https://tailwindmate.jaleelbennett.com/) — Enter any CSS color (RGBA, HSLA, hex) and this tool will convert the color to the closest [Tailwind named equivalent.](https://tailwindcss.com/docs/customizing-colors) You can also switch to “from Tailwind” mode. Jaleel Bennett [SiriWave: The Apple Siri Waveform Replicated in Pure JS](https://github.com/kopiro/siriwave) — If you need an effect that implies sound is playing or being recorded, perhaps. Flavio Maria De Stefano [FormsLab: An Open-Source Form Builder Toolkit for Creating Surveys, Polls, and More](https://github.com/Ryczko/FormsLab) Konrad Ryczko 📬 **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://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/616/*|UID|*?ipx=t)