--- title: "Frontend innovation through constraints" publication: "Frontend Focus" issue: 701 published_at: "2025-07-16" canonical_url: "https://frontendfoc.us/issues/701" --- Plus Apple's continued browser engine 'ban', and the current state of WebAssembly. | Together with [![Fusion Auth\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_1280,h_316/e_make_transparent/co_white,e_outline:15/wm1gvx8cub0d4gmmabev.png)](https://fusionauth.link/4lMZHpo) 🚀 **Frontend** Focus #​701 — July 16, 2025 | [Read on the web](https://frontendfoc.us/issues/701) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1752680217/yb6qpgrwnovin7fipu1z.png)](https://medium.com/@mikehall314/im-more-proud-of-these-128-kilobytes-than-anything-i-ve-built-since-53706cfbdc18) ["I’m More Proud of These 128 Kilobytes Than Anything I’ve Built Since"](https://medium.com/@mikehall314/im-more-proud-of-these-128-kilobytes-than-anything-i-ve-built-since-53706cfbdc18) — Here’s a solid recounting of a project that highlights just how strict constraints (such as bandwidth, processing power, etc) can often result in innovation. It’s also a sound reminder to us all to consider the widest range of users and to design things accordingly. Mike Hall [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/af0dbd6e.png)](https://fusionauth.link/4lMZHpo) [Secure Your Frontend Without the Backend Complexity](https://fusionauth.link/4lMZHpo) — Add login, registration, SSO and MFA to your app with just a few lines of code. FusionAuth handles the security so you can focus on user experience. Integrates with React, Vue, Angular, and vanilla JavaScript. [Start Building for free](https://fusionauth.link/4lMZHpo). FusionAuth sponsor [Apple’s Browser Engine Ban Persists, Even Under the DMA](https://open-web-advocacy.org/blog/apples-browser-engine-ban-persists-even-under-the-dma/) — Argues that Apple is not effectively complying with the EU’s Digital Markets Act (DMA) regarding browser engine choice on iOS: “_Apple knows exactly what the barriers are, and has chosen not to remove them_”. Open Web Advocacy [WebAssembly: Yes, But for What?](https://queue.acm.org/detail.cfm?id=3746171) — Writing for _ACM Queue_, a contributor to multiple JavaScript and WASM implementations shares a good roundup of where WebAssembly is being used, both in the browser and server-side, and how it’s ultimately finding its way into seemingly everything. Andy Wingo / ACM ⚡️ IN BRIEF - 👍 After years in development, [Mozilla will finally be adding WebGPU support to Firefox 141](https://mozillagfx.wordpress.com/2025/07/15/shipping-webgpu-on-windows-in-firefox-141/) (on Windows initially, macOS and Linux to follow). - 👀 [This report looks at the impact of AI](https://metr.org/blog/2025-07-10-early-2025-ai-experienced-os-dev-study/) on open-source developer productivity. - 💬 The Firefox team [is seeking honest feedback](https://connect.mozilla.org/t5/discussions/where-s-firefox-going-next-you-tell-us/m-p/100698) on what folks _really_ want from the Mozilla browser. - ⚓️ Andy Bell shares a [quick CSS snippet that adds some much needed breathing room](https://bsky.app/profile/bell.bz/post/3ltvwqogl7k22) to anchored URLs. 📙 Articles, Opinions & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1752664284/v7elttybpzwm3ca8kobj.png)](https://css-tricks.com/setting-line-length-in-css-and-fitting-text-to-a-container/) [Setting Line Length in CSS (and Fitting Text to a Container)](https://css-tricks.com/setting-line-length-in-css-and-fitting-text-to-a-container/) — Thanks to tools like `clamp()`, `calc()`, and others it’s now much easier to set line length than it was just a few years ago. Daniel looks over the options and how to use them, along with a look ahead at what the future may have in store. Daniel Schwarz ▶[Multicol and Fragmentation](https://www.youtube.com/watch?v=NfwDP9shxNQ) — A near hour-long talk from this year's _CSS Day_ in which Rachel Andrew, an author on the spec, shares an update on the CSS [multiple-column layout specification](https://www.w3.org/TR/css-multicol-2/) — diving into columns, boxes, fragmentation, browser support, and more. Rachel Andrew [How to Build an AI Coding Rules App with Lovable](https://go.clerk.com/IyNAvyW) — Guide AI to generate a secure, full-stack app with minimal prompts—learn how to turn ideas into working software fast. Clerk sponsor [Scroll-Driven Sticky Heading](https://css-tricks.com/scroll-driven-sticky-heading/) — Amit notes that CSS scroll-driven animations are “_more than just a cool trick; they’re a game-changer that opens the door to a whole new world of web design_”. This post shares one such example of the dynamic, engaging things they make possible (_although browser support isn’t universal just yet_). Amit Sheen [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1752669169/ovy3aawj6kwkhhbvifgz.png)](https://frontendmasters.com/blog/stacked-transforms/) [Stacked Transforms](https://frontendmasters.com/blog/stacked-transforms/) — Chris takes a look over the [`animation-composition`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-composition) CSS property, detailing how it affects transforms during animations. An interesting breakdown, and something Chris notes "_will come in useful someday [..] You won’t need it until you need it_". Chris Coyier [Please, Can We Have ARIA Notify](https://www.nicchan.me/blog/please-can-we-have-aria-notify/) — “_why I’m hoping and praying with every fiber of my being that we will get the ARIA Notify API across all browsers at some point in the future_”. Nic Chan [Building a 3D Product Configurator with Babylon.js](https://spin.atomicobject.com/3d-product-babylon-js/) — Taking configurable 3D models to the Web. Josh Sanderson [Why I’m Writing Pure HTML and CSS in 2025](https://joeldare.com/why-im-writing-pure-html-and-css-in-2025) Joel Dare [How to Use ARIA Roles and Properties Effectively](https://afixt.com/how-to-use-aria-roles-and-properties-effectively/) Michael Beck [Designing Scroll Behavior: When to Save a User’s Place](https://www.nngroup.com/articles/saving-scroll-position/) Megan Chan [AI Didn’t Kill Web Design — Templates Did It First](https://webdesignerdepot.com/ai-didnt-kill-web-design-templates-did-it-first/) Noah Davis 🧰 Tools, Code & Resources [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1752667493/eqfrus9d9d4qscjblnar.png)](https://github.com/svelteplot/svelteplot) [SveltePlot: A Visualization Framework for Svelte](https://github.com/svelteplot/svelteplot) — The API is inspired by a similar plotting library by Observable and is built on top of D3. There are plenty of good [examples in the docs](https://svelteplot.dev/examples), including flow plots, scatterplots, maps, streamgraphs and more. Gregor Aisch [Eleventy LibDoc: An Eleventy Starter Project to Craft Slick Documentation](https://github.com/ita-design-system/eleventy-libdoc) — [The docs site](https://eleventy-libdoc.netlify.app/) for the project is an example of the attractive and intuitive layout it produces. It’s accessible, includes search, has syntax highlighting, among lots of other features. IT Automotive Design System [SplitThing: Upload an Image and Split It Into a Custom Grid](https://splitthing.therealflo.dev/) — A simple tool with a specific use case. You can use sliders to define the number of columns and rows for the grid, then download the sliced up images as a ZIP file. Florian Reintgen [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1752667749/znm5wktcowk9umtsnx2l.png)](https://github.com/xiangechen/chili3d) [Chili3D: A Web-Based 3D CAD App for Online Model Design and Editing](https://github.com/xiangechen/chili3d) — Impressively claims to achieve “near-native performance” which it does by compiling OpenCascade to WebAssembly and integrating with Three.js. You can judge for yourself by [trying it out](https://chili3d.com/). xiange chen [designtokens.fyi: A Glossary of Terms Related to Design Tokens](https://designtokens.fyi/) — A well-presented little info site currently with 33 terms explained including common things like “custom property”, used in CSS, and not-so-common stuff like “smedium”, a problem with maintaining scales. Design Systems House [Check Server-Side Rendering (SSR)](https://punits.dev/check-server-side-rendered/) — A straightforward tool to help check, side-by-side which page elements of a given URL are server-side rendered. Punit Sethi [FontGen: An Intelligent Font Pairing Tool](https://www.fontgen.io/) — Requires sign up to try, but has access to 1,000+ fonts across 15+ categories. FontGen [Pandabox: Lightweight Lightbox & Gallery Component for Astro](https://github.com/SaintSin/astro-pandabox) — You can [try the demo here](https://astro-lightbox.netlify.app/), complete with actual pandas. StJohn 📬 **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://bsky.app/profile/brandrick.bsky.social) & [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/701/*|UID|*?ipx=t)