--- title: "The amazingly versatile conic-gradient()" publication: "Frontend Focus" issue: 752 published_at: "2026-07-29" canonical_url: "https://frontendfoc.us/issues/752" --- Plus killing cookie banners, the Web Locks API, and swiping buttons from websites. Together with [![Tiger Data logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_1280,h_282/e_make_transparent/co_white,e_outline:30/px1u7kjyvz7xnbm6ytir.png)](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter) πŸš€ **Frontend** Focus #​752 β€” July 29, 2026 | [Read on the web](https://frontendfoc.us/issues/752) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ji7rmtbohbrobihlbmmq.jpg)](https://www.w3.org/blog/2026/woff-1-0-a-milestone-on-w3cs-journey-of-fonts-on-the-web/) [WOFF 1.0 at 16: The Format That Made Web Fonts Work](https://www.w3.org/blog/2026/woff-1-0-a-milestone-on-w3cs-journey-of-fonts-on-the-web/) β€” Did you know `@font-face` was adopted into CSS2 in _1998_? But it sat largely unused amid fights over licensing, obfuscation and DRM. Chris Lilley, PNG co-author and author of [W3C's 1996 case for fonts on the web](https://www.w3.org/TR/font-rationale/), explains how the deadlock broke with the _β€œentirely DRM-free”_ format we know and love. Chris Lilley (W3C) [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/901a5173.png)](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter) [Your Chart is Waiting on the Database, Not the DOM](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter) β€” The render is instant. The query behind it isn't. TimescaleDB extends Postgres so dashboards query live data at scale, no pipeline to keep in sync. Hypertables, columnar compression, continuous aggregates. [Get $1000 credit to start](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter). Tiger Data (creators of TimescaleDB) sponsor ∞ [To `infinity` and Beyond, in CSS](https://nerdy.dev/css-infinity-use-cases) β€” `e`, `pi`, `infinity`, and `NaN` are all [widely supported](https://caniuse.com/wf-calc-constants) constants accepted in CSS math functions, and Adam runs through several ways going to `infinity` can improve your designs. Adam Argyle [The Launch of CodePen 2.0](https://blog.codepen.io/2026/07/23/two-point-oh/) β€” [CodePen](https://codepen.io/) has been a reliable piece of web development infrastructure for 14 years and now the experience has gone 2.0 with an all-new editor, and lots of goodies for paid users like the ability to quickly deploy pens to a CodePen subdomain. Chris Coyier ⚑️ IN BRIEF - πŸͺ [Kill the Cookie Banner](https://killthecookiebanner.eu/) is a campaign from [NOYB](https://noyb.eu/en), EFF and others backing an EU proposal to replace cookie banners with a browser privacy signal. - 🦊 First [teased](https://blog.mozilla.org/en/firefox/new-firefox-design/) a couple of months ago, [Firefox's new design](https://blog.nightly.mozilla.org/2026/07/27/new-firefox-design/) is now ready to try out in [Nightly](https://www.firefox.com/en-GB/channel/desktop/#nightly)builds. - πŸ”΅ [Safari 26.6 has been released](https://webkit.org/blog/18178/webkit-features-for-safari-26-6/) with several bug fixes and refinements. - πŸ“° [Chrome has finally come to Linux on ARM64](https://www.omgubuntu.co.uk/2026/07/chrome-arm64-linux-available), complete with Widevine DRM. - πŸ€” Joost de Valk ponders [the future of the website](https://joost.blog/future-of-the-website/). πŸ“™ Articles, Opinions & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/bhdcsf1wb2njno2mhf3s.jpg)](https://master.dev/blog/when-you-need-to-make-a-triangle-think-conic-gradients/) [When You Need To Make a Triangle, Think Conic Gradients](https://master.dev/blog/when-you-need-to-make-a-triangle-think-conic-gradients/) β€” `conic-gradient()` is more flexible than you might imagine! You can make pie segments, ray bursts, or triangles, and use transitions on them too. Chris Coyier [Measuring Component Performance with the Container Timing API](https://csswizardry.com/2026/07/meaasuring-component-performance-with-the-container-timing-api/) β€” Chrome's [origin trial](https://developer.chrome.com/blog/container-timing-origin-trial) for the [Container Timing API](https://github.com/WICG/container-timing) lets you tag a DOM region with a `containertiming` attribute and track each contentful part as it paints. It won't tell you when a component is _finished_, though. Harry Roberts [When and What Should You Actually Log?](https://blog.sentry.io/logging-best-practices/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=logs-fy27q2-evergreen&utm_content=newsletter-sponsored-link-logging-blog-learnmore) β€” The difference between logs that help you debug and logs that just cost you. [Get tips here](https://blog.sentry.io/logging-best-practices/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=logs-fy27q2-evergreen&utm_content=newsletter-sponsored-link-logging-blog-learnmore). Sentry sponsor [Paint the Static Image First, Fetch the Animation After](https://stuffandnonsense.co.uk/blog/swapping-a-lightweight-image-for-an-animated-svg/) β€” Andy's elaborate animated banner weighs half a megabyte, so now a static AVIF paints first with the animated SVG only fetched on screens big enough to do it justice. Andy Clarke [Handling Concurrency on the Web with Web Locks API](https://tech.olx.com/handling-concurrency-on-the-web-with-web-locks-api-163b7e07eddd) β€” A practical walkthrough of stopping multiple tabs from racing each other, thanks to the widely available [Web Locks API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API). Cesar Contreras [The Core Web Vitals Thresholds You Trust Might Be Wrong](https://embrace.io/blog/research-core-web-vitals/) β€” RUM data from ten retailers suggests Google's 2.5s 'good' LCP threshold is too lenient, with optimal engagement arriving between 100ms and 1 second. Tammy Everts [In-N-Out Animation Using `sibling-index()`](https://master.dev/blog/in-n-out-animation-using-sibling-index/) β€” A neat technique for improving animations when adding/removing elements. Temani Afif [SVG Filter Text Effects: Letterpress, Ink Gain, Woodtype](https://www.carmenansio.com/articles/svg-filters-on-type/) β€” Practical examples, with code, of what SVG can do. Carmen Ansio [Rendering OKLCH Color Space in Real Time with WebGL](https://dkryaklin.com/blog/colordx-gpu) Dima Kryaklin 🧰 Tools, Code & Resources [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/q5oxzy3squcgvinlpyje.jpg)](https://anatolyzenkov.com/stolen-buttons) [Stolen Buttons](https://anatolyzenkov.com/stolen-buttons) β€” One designer's hobby is 'stealing' buttons from the sites they visit. It's quite the collection and certainly reflects the current design zeitgeist. There's [a browser extension](https://anatolyzenkov.com/stolen-buttons/button-stealer) if you want to make your own similar hoard. Anatoly Zenkov [Canvas UI: A Creative Canvas and WebGL Component Library](https://canvasui.dev/) β€” An open source, framework agnostic library of cutting edge HTML-in-Canvas and WebGL components you can copy and paste. This has received a lot of kudos on social media this week. David Haz [Building an AI Workflow UI in React? Start With JointJS](https://www.jointjs.com/ai-workflow-builders?utm_source=frontend-focus&utm_medium=sponzored-ad) β€” A real data model, polished UX, and performance that scales with your canvas. Skip months of building. JointJS sponsor 🌐 [MapLibre GL JS 6.0: Interactive Vector Maps for the Web](https://maplibre.org/maplibre-gl-js/docs/) β€” A WebGL-powered library for rendering interactive vector tile maps. Version 6 goes ESM-only, requires WebGL 2, and lands broad performance gains. [Release notes](https://github.com/maplibre/maplibre-gl-js/releases/tag/v6.0.0) and a [v5 to v6 migration guide](https://github.com/maplibre/maplibre-gl-js/blob/main/docs/guides/v5-to-v6-migration-guide.md). MapLibre [Markdy: Like Mermaid but for Animations and Motion](https://markdy.com/) β€” Instead of writing animations in CSS or JavaScript, you use a simpler language focused on core animation concepts (akin to [Mermaid](https://mermaid.ai/open-source/) with diagrams). The examples are neat. Hoang Yell [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/prkxys3mvd2rulfbdb5p.jpg)](https://katex.org/) [KaTeX: Fast Math to HTML Typesetting for the Web](https://katex.org/) β€” Based on Donald Knuth’s TeX, KaTeX provides a no-dependency way to rapidly render TeX math expressions in a predictable manner, regardless of environment. The [sandbox demo page](https://katex.org/#demo) shows off how smooth it is. Emily Eisenberg and Sophie Alpert 🎁 And finally… [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/tjojfquvpybuz9ijfw9v.jpg)](https://ditherit.com/) [Dither It: An Online Image Dithering Tool](https://ditherit.com/) β€” Drag in an image and play around with settings, palettes, and more to get the vibe you want. Josh W. Comeau recommended this tool on Bluesky recently, and [his thread](https://bsky.app/profile/joshwcomeau.com/post/3mralqfq3m22n) has much better examples than my attempt above… πŸ˜… Alex Harris πŸ“¬ **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|*)