--- title: "An HTML element reunion" publication: "Frontend Focus" issue: 605 published_at: "2023-08-09" canonical_url: "https://frontendfoc.us/issues/605" --- Plus WordPress hits 6.3, and Chrome is speeding up in more ways than one. | 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/css-layouts/?utm_source=email&utm_medium=frontendfocus&utm_content=csslayouts) 🚀 Frontend Focus #​605 — August 9, 2023 | [Read on the web](https://frontendfoc.us/issues/605) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/lysbu7mugytaaegtbpny.jpg)](https://www.patrickweaver.net/blog/a-blog-post-with-every-html-element/) [A Blog Post with Every HTML Element?_Almost._](https://www.patrickweaver.net/blog/a-blog-post-with-every-html-element/) — Taking 18 months to come together, this post makes a brave attempt to squeeze every HTML element (including some _former_ elements like `` and ``) into a single place. It’s a fantastically retro-feeling reunion that starts off feeling a little dull but rapidly picks up the pace, even if poor `` doesn't make the cut.. Patrick Weaver [![\](https://copm.s3.amazonaws.com/2b348ac6.png)](https://frontendmasters.com/courses/css-layouts/?utm_source=email&utm_medium=frontendfocus&utm_content=csslayouts) [Practical CSS Layouts with Jen Kramer](https://frontendmasters.com/courses/css-layouts/?utm_source=email&utm_medium=frontendfocus&utm_content=csslayouts) — Join Jen for this extensive video course and learn to code complex layouts using CSS Grid and Flexbox. The course covers responsive design, handling images, styling, navigation and more via a series of exercises. Frontend Masters sponsor [WordPress 6.3 “Lionel” Released](https://wordpress.org/news/2023/08/lionel/) — Hailed as a “momentous release”, the universally popular CMS includes a new _Site Editor_ experience, the ability to create and sync block ‘patterns’, new design tools, keyboard shortcut changes, style revision tracking, along with performance and accessibility improvements. Matías Ventura (WordPress) [An Update on Chrome Security Updates: Shipping Security Fixes to You Faster](https://security.googleblog.com/2023/08/an-update-on-chrome-security-updates.html) — In an effort to reduce the “patch gap” and get security fixes out faster, Chrome is now shipping _weekly_ Stable channel updates. This doesn't affect the cadence of _milestone_ updates, though, so Chrome 200 is still some way off. 🤭 Amy Ressler (Google) **⚡️ IN BRIEF** - You may start to see OpenAI's 'GPTBot' in your logs, as the company recently launched its own web crawler — which in turn [sparked blocking efforts by website owners](https://venturebeat.com/ai/openai-launches-web-crawling-gptbot-sparking-blocking-effort-by-website-owners-and-creators/) and creators. - François Beaufort shares [what's new in WebGPU in Chrome](https://developer.chrome.com/blog/new-in-webgpu-116/), including WebCodecs integration, video playback improvements, and more. - What's the biggest, valid `z-index` value you can specify in CSS? It may be [▶️ larger than you think](https://www.youtube.com/shorts/7s0POgLzASY). - The way in which [downloads appear in Chrome](https://blog.chromium.org/2023/08/redesigning-chrome-downloads-to-keep.html) has changed. - A request has been made for the Chromium project to [reconsider JPEG-XL support](https://bugs.chromium.org/p/chromium/issues/detail?id=1451807) (which it had sought to not support). Lots of [related chatter on Hacker News](https://news.ycombinator.com/item?id=37034912) about this one. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1691588497/a6qrvgrz7deygige4ijb.png)](https://developers.googleblog.com/2023/08/introducing-project-idx-experiment-to-improve-full-stack-multiplatform-app-development.html) [Introducing Project IDX: An Experiment to Improve Full-Stack, Multiplatform App Development](https://developers.googleblog.com/2023/08/introducing-project-idx-experiment-to-improve-full-stack-multiplatform-app-development.html) — A new project from Google — it’s a full browser-based IDE (built atop the same tech as VS Code) that includes support for most full-stack JavaScript frameworks, cross-platform previews, and deploying to Firebase. You can sign up for the waitlist. Google [An Introduction to htmx, the HTML-Oriented Dynamic UI Library](https://www.sitepoint.com/htmx-introduction/) — A look at what [htmx](https://htmx.org/) is, how it aims to simplify dynamic web development, and how you can harness its potential to enhance your web development process. James Hibbard [Join the React Native EU Conference with a 10% Discount Ticket 🔥](https://ti.to/react-native-eu/2023/discount/frontendfocus10) — Sign up for the biggest React Native conf in Europe. Check the agenda to see what’s awaiting you on Sept 7-8 in Wrocław! Callstack sponsor ✨ [Coding the Stars: An Interactive Constellation with _React Three Fiber_](https://supabase.com/blog/interactive-constellation-threejs-react-three-fiber) — The Supabase team built a Web-based visualization in the form of an animated sky filled with stars, where each star represented a user signup. If you’ve never experimented with React Three Fiber or creating visual effects before, this is a good introduction walking through the key parts of their approach. Francesco Sansalvadore (Supabase) [What Does It Mean for Web Browsers to Have a 'Baseline'](https://thenewstack.io/what-does-it-mean-for-web-browsers-to-have-a-baseline/) — Back in May we [shared news on Baseline](https://web.dev/introducing-baseline/), a new project that aims to clarify what developers can rely on across browsers and the web platform in general. Mary recaps why it matters, how it will hopefully work, and even touches upon the browser politics of the new project. Mary Branscombe (The New Stack) [Smoothing Out the Scrolling Experience in Chrome on Android](https://blog.chromium.org/2023/08/smoothing-out-scrolling-experience-in.html) — A look at how the scrolling experience on Chrome for Android has been improved, reducing slow scrolling jank by 2x. The post shares how the Chromium team discovered and evaluated the problem, and how that helped them “_design a better browser experience going forward_”. Stephen Nusko (Google) [Optimizing Speed on eBay](https://medium.com/@addyosmani/shopping-for-speed-on-ebay-com-6229711d7573) — “_For every 100 milliseconds improvement in search page loading time, eBay saw a 0.5% increase in ‘Add to Cart’ count._” — This perfectly highlights how important performance can be at such huge scale. Addy runs through just how the performance of eBay’s sites and apps were optimized for a faster overall user experience. Addy Osmani Addy didn't just stop with looking at eBay, he also took a look at [YouTube's efforts to increase their Core Web Vitals pass rates.](https://medium.com/@addyosmani/building-a-better-web-a-faster-youtube-on-web-24b1dc03716) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1691587791/qpdzbm2bcjd2ieb393va.png)](https://www.smashingmagazine.com/2023/08/designing-accessible-text-over-images-part1/) [Designing Accessible Text Over Images: Best Practices, Techniques, And Resources](https://www.smashingmagazine.com/2023/08/designing-accessible-text-over-images-part1/) — The first in a two-part series in which Hannah Milan covers best practices when using various 'text over image' techniques. Lots of visuals here to help make the point. Smashing Magazine [The Future of Open Source: SaaS, the Final Frontier](https://sentry.io/resources/the-future-of-open-source-saas-the-final-frontier/?utm_medium=paid-community&utm_source=frontendfocus&utm_campaign=future-of-oss-fy24q3&utm_content=newsletter-future-of-oss-register) — Software has moved to the cloud … and open source is moving with it. Join SaaS leaders for the discussion on Sept 7. Sentry sponsor ▶[Beyond The Hype: WebAssembly – From the Browser to Beyond](https://blog.scottlogic.com/2023/08/04/beyond-the-hype-webassembly.html) Colin Eberhardt podcast [Assistive Technology Shouldn’t Be a 'Mystery Box'](https://christianheilmann.com/2023/08/05/assistive-technology-shouldnt-be-a-mystery-box/) Christian Heilmann [UX is Not Dead, It’s Just Misunderstood](https://uxmag.com/articles/ux-is-not-dead-its-just-misunderstood) Nate Schloesser 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/zjnunfhhg1w6xfgttrvw.jpg)](https://google.github.io/typograms/) [Typograms: A Way to Render ASCII Diagrams More Elegantly](https://google.github.io/typograms/) — An intriguing project out of Google that lets you ‘draw’ diagrams in plain ASCII text within special `script` tags and these will then be rendered into nicer looking versions in the browser. An interesting approach if [Mermaid](https://mermaid.js.org/) is too full on for your needs. Sam Goto / Google 💡 [Monodraw](https://monodraw.helftone.com/) is a neat macOS app for drawing similar ASCII-based digrams. [![\](https://res.cloudinary.com/cpress/image/upload/v1691589116/m1v8layifqklponf3rbd.gif)](https://draw.oooo.so/) [svg-drawing: A Simple Canvas to Draw, "Replay", and Export SVG Line Art](https://draw.oooo.so/) — You can deep link to any drawing, adjust some draw settings, and even change the options for playing back the drawing by animating the lines. _Please excuse my shoddy rocket drawing_. catsjuice [OGL 1.0: A Minimal WebGL Framework](https://github.com/oframe/ogl) — WebGL is far from the easiest technology to use on its own, so libraries like [Three.js](https://threejs.org/) are often used to make it more accessible. OGL has a similar motive while sticking closer to the WebGL metal. Nathan Gordon et al. [Vaul: An Unstyled Drawer Component for React](https://github.com/emilkowalski/vaul) — Also referred to as a “bottom sheet”, useful for mobile interfaces as a replacement for a dialog element and it’s powered by Radix UI’s dialog component. Emil Kowalski 🧑‍💻 JOBS [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) — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now. Hired [Mobile FIRST: A Browser Extension to Simulate Different Mobile Devices](https://www.webmobilefirst.com/en/) — Available for Chrome and Firefox, it’s useful for responsive testing and taking screenshots and GIFs for mockups and presentations. Mobile FIRST [MyTailwind: Interactively Customize Tailwind Components](https://mytailwind.xyz/) — Gives you a simple visual editor where you can customize styles for about 11 different components (button, navbar, card, sidebar, alert, etc.), then copy the HTML with the Tailwind classes. Ashraful Malik [Maily: An Editor for Creating Beautiful, Pre-Designed, Mobile-Ready Emails](https://maily.to/) Arik Chakma 🎮 **_...and finally_** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1691581064/itymsutxfekqphhb2wyz.png)](https://noclip.website/#) [noclip — A Digital Web-Based Museum of Video Game Levels](https://noclip.website/#) — This neat site is a browser-based way to explore levels from a variety of classic games. I’ve just been exploring the castle grounds of _Super Mario 64_ and the streets of _GTA III_’s Liberty City. A cool nostalgia trip if nothing else. [Repo here](https://github.com/magcius/noclip.website). _Three cheers for WebGL!_ Jasper St. Pierre 📬 **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/605/*|UID|*?ipx=t)