--- title: "A new browser engine enters the ring" publication: "Frontend Focus" issue: 650 published_at: "2024-07-03" canonical_url: "https://frontendfoc.us/issues/650" --- Plus the origin story of Mosaic and Netscape, and how people with disabilities use the Web. | Together with [![Posthog\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_2303,h_420/e_make_transparent/co_white,e_outline:12/i4lkeq9vxu5ccjyxdkep.png)](https://newsletter.posthog.com/?utm_source=focus&utm_campaign=focus) 🚀 **Frontend** Focus #​650 — July 3, 2024 | [Read on the web](https://frontendfoc.us/issues/650) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1720008146/dz96xudhba7rkqgqlzws.png)](https://www.speedcurve.com/web-performance-guide/) [Web Performance Guide](https://www.speedcurve.com/web-performance-guide/) — A helpful collection of over 20 plain language guides, covering things such as working with the different core web vitals, optimization techniques, critical CSS, metrics, user monitoring, and more. You’re bound to find some worthwhile advice here. SpeedCurve [![\](https://copm.s3.amazonaws.com/d9958ffc.png)](https://newsletter.posthog.com/?utm_source=focus&utm_campaign=focus) [Product for Engineers: A Newsletter Helping Flex Your Product Muscle](https://newsletter.posthog.com/?utm_source=focus&utm_campaign=focus) — Product for Engineers is PostHog’s newsletter helping engineers improve their product skills. Subscribe to get curated advice on building great products, lessons (and mistakes) from building PostHog, and dives into the strategies of top startups. PostHog sponsor ▶[Layout and Reading Order](https://www.youtube.com/watch?v=X6azWrtHS-k) — This talk gets into the nitty gritty of layout options with CSS (think `grid`, `subgrid`, `gap` etc) — with a particular focus on the proposed, new [CSS masonry method](https://developer.chrome.com/blog/masonry), what it aims to fix and the prototyping currently underway in Chrome. A good overview of where we are, and where things are heading in terms of laying out our pages. [Slides here](https://noti.st/rachelandrew/AoKXhe). Rachel Andrew [🐞 Announcing the Ladybird Browser Initiative](https://ladybird.org/announcement.html) — Ladybird is an in-development browser ([forked from SerenityOS](https://awesomekling.substack.com/p/forking-ladybird-and-stepping-down-serenityos)) that uses a brand new engine based on web standards, without borrowing _any_ code from other browsers. It’s targeting an alpha release for both Linux and macOS in the summer of 2026 —_so is some ways off_. GitHub co-founder Chris Wanstrath shares [his thoughts on why the project matters](https://ladybird.org/why-ladybird.html). Ladybird Browser Initiative ⚡️ Quick Links - 🧑‍💻 Rachel Andrew is back with another round-up of [what new features landed across the web platform last month](https://web.dev/blog/web-platform-06-2024?hl=en), including JavaScript `Set` methods, and broader Clipboard API support. - 🔭 Popular web security tool '[HTTP Observatory](https://developer.mozilla.org/en-US/observatory)' now has [a new home at MDN](https://developer.mozilla.org/en-US/blog/mdn-http-observatory-launch/). - 🎟️ Tickets for this year's web performance focused _performance․now_ conference, taking place in Amsterdam this Novemeber, [are now available](https://perfnow.nl). - ▶️ Web pioneer Marc Andreessen tells the story (as best he can remember) of [the origin of Mosaic and Netscape.](https://pmarca.substack.com/p/the-true-story-as-best-i-can-remember) 📙 **Tutorials, Articles & Opinion** [How People with Disabilities Use the Web](https://www.w3.org/WAI/people-use-web/) — Describes tools and approaches that disabled people use to interact with technology and the barriers that people experience when accessibility is lacking. Of particular interest are the [user personas](https://www.w3.org/WAI/people-use-web/user-stories/) which show some of the range of people’s experiences. W3C [How to Use Container Queries Now](https://web.dev/blog/how-to-use-container-queries-now) — Makes pragmatic recommendations on how we can use container queries _now_ (whilst still supporting older browsers). Philip Walton ▶[Collaboration, the Future of CSS, Sass, and the Web with Miriam Suzanne](https://www.oddbird.net/2024/06/10/mechanical-ink/) — Schalk Neethling sits down with Miriam Suzanne, a multifaceted expert in web development, and an invited expert to the CSS Working Group. Mechanical Ink podcast [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1720006727/rgyibxnn02klggxi6tzl.png)](https://alvaromontoro.com/blog/68054/css-manga-lines) [CSS 'Surprise Manga Lines'](https://alvaromontoro.com/blog/68054/css-manga-lines) — When a manga or anime character is surprised, lines often focus on and highlight their face. This post looks at how to create a similar effect with HTML and CSS. Alvaro Montoro [Four Reasons An Overlay Widget Will Not Solve Your Accessibility Woes](https://litzdigital.com/blog/4-reasons-an-overlay-widget-will-not-solve-your-accessibility-woes/) — Thoughts on why web accessibility overlays are “_not a reliable solution for fixing accessibility issues_”, along with some cost-effective alternatives to improve accessibility on your site. Matt Litzinger [Checkboxes: Design Guidelines](https://www.nngroup.com/articles/checkboxes-design-guidelines/) — When to use them, what alternative input fields to consider, and usability guidelines to keep in mind. Maddie Brown ['Blazing Fast' Websites with Speculation Rules](https://www.debugbear.com/blog/speculation-rules) — A look at how to pre-render pages on your site. There’s a demo included to so you can get a feel for how it works. Umar Hansa [Text-Reveal Effect Using `conic-gradient()` in CSS](https://frontendmasters.com/blog/text-reveal-with-conic-gradient/) — A thorough explanation of a neat CSS technique for revealing text. Preethi Sam [Do Grayscale Images Take Less Space?](https://lu.sagebl.eu/notes/can-i-save-space-with-grayscale-jpegs/) Lu Calamia 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1719996649/mrjhdimxy7qfwieqrrwq.png)](https://flitter.pages.dev/) [Flitter: A Flutter-Like JavaScript Data Visualization Framework](https://flitter.pages.dev/) — Boasts a declarative syntax and support for both SVG and Canvas to allow you to build high-performance data visualizations, interactive charts, diagrams, and more. It’s also easy to integrates with React, Svelte, etc. Flitter [STRICH: Fast and Reliable 1D/2D JS Barcode Scanning in Your Browser](https://strich.io/?ref=frontend-focus) — You don’t need a native app to scan barcodes! Try the free demo app or sign up for the free, full-featured 30-day trial. STRICH sponsor [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1719996770/jrvf5mvnl2lxg7rog4hp.png)](https://www.mshr.app/) [MSHR: A Gallery of 200+ Static and Animated CSS Mesh Gradients](https://www.mshr.app/) — You can browse existing gradients or create your own using the online playground, which lets you “show points” for a more visual understanding of the gradients, among other customization features. mshr [Fabric.js 6.0: A SVG-to-Canvas and Canvas-to-SVG Library](https://github.com/fabricjs/fabric.js) — Provides an interactive object model on top of the HTML5 canvas to make it easier to work with multiple visual elements there. [The homepage](http://fabricjs.com/) is a complete live demo. Fabric.js [Deblank Colors: An AI-Powered Color Palette Generator](https://deblank.com/colors) — Enter a description of the project you’re working on to generate a color palette with options to add a preferred color or an image for a more customized result. Envato 📬 **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/650/*|UID|*?ipx=t)