---
title: "Apple's proposed new HTML element for 3D models"
publication: "Frontend Focus"
issue: 506
published_at: "2021-09-01"
canonical_url: "https://frontendfoc.us/issues/506"
---
Plus why are hyperlinks blue, and a look at what's new in Chrome DevTools. | [Unsubscribe](https://frontendfoc.us/leave/*|UID|*)
[](https://frontendfoc.us/)
Frontend Focus
#506 — September 1, 2021 | [Read on the web](https://frontendfoc.us/issues/506)
[](https://blog.mozilla.org/en/internet-culture/deep-dives/why-are-hyperlinks-blue/)
Image via: [Mozilla](https://blog.mozilla.org/en/internet-culture/deep-dives/why-are-hyperlinks-blue/)
[Why _Are_ Hyperlinks Blue?](https://blog.mozilla.org/en/internet-culture/deep-dives/why-are-hyperlinks-blue/) — A deep dive into the history of interfaces and link designs over the years to track down the origin of the blue link we know today — lots of nostalgic interface design here.
Elise Blanchard
[An Introduction to the Solid JavaScript Library](https://css-tricks.com/introduction-to-the-solid-javascript-library/) — [Solid](https://www.solidjs.com/) is a reactive library for creating user interfaces _without_ a virtual DOM, instead compiling templates down to real DOM nodes with fine-grained updates then doing as little as is necessary to reflect state updates.
Charlie Gerard [](https://www.telerik.com/blogs/generating-charts-based-on-data-in-your-kendo-ui-grid?utm_medium=cpm&utm_source=fefocus&utm_campaign=kendo-ui-grid-chart-blog)
[Dynamic Charts Based on Data Selection in Angular](https://www.telerik.com/blogs/generating-charts-based-on-data-in-your-kendo-ui-grid?utm_medium=cpm&utm_source=fefocus&utm_campaign=kendo-ui-grid-chart-blog) — Ever had users asking to be able to generate their own charts? This tutorial shows you how easy it can be with Kendo UI for Angular. All users can select data in the grid and then your app will generate a chart to visualize it.
Progress Kendo UI for Angular sponsor
[You Want _Enabling_ CSS Selectors, Not _Disabling_ Ones](https://www.silvestar.codes/articles/you-want-a-single-enabling-selector-not-the-one-that-disables-the-rule-of-the-previous-one/) — “_An enabling selector is what I call a selector that does a job without disabling the particular rule_”. Chris Coyier [distills down the core of this idea here](https://css-tricks.com/you-want-enabling-css-selectors-not-disabling-ones/).
Silvestar Bistrović
[What's New In DevTools for Chrome 94](https://developer.chrome.com/blog/new-in-devtools-94/) — Including using DevTools in your preferred language, new CSS container queries badge, a checkbox to invert network filters, and more.
Jecelyn Yeen (Google)
**⚡️ Quick bits:**
- Apple has [proposed adding a `` element to HTML to display 3D content in the browser](https://github.com/WebKit/explainers/tree/main/model) using a built-in renderer. Handy for AR no doubt. Older developers amongst us might be getting flash backs to[VRML..!](https://en.wikipedia.org/wiki/VRML)
- [Here's the first public working draft](https://www.w3.org/blog/news/archives/9236) of the CSS Nesting Module.
- Google has changed how it displays title tags in search results, [here's what you need to know](https://developers.google.com/search/blog/2021/08/update-to-generating-page-titles).
- Frontity, the [React framework for WordPress](https://frontity.org/learn/) has [joined Automattic](https://frontity.org/blog/frontity-is-joining-automattic/). [Here's Matt Mullenweg's post](https://ma.tt/2021/08/frontity-to-join-automattic/) on the news.
- Google will [reportedly pay Apple](https://9to5mac.com/2021/08/25/analysts-google-to-pay-apple-15-billion-to-remain-default-safari-search-engine-in-2021/) $15 billion to remain the default Safari search engine for another year.
📙 **Tutorials, Articles & Opinion**
[](https://ishadeed.com/article/stepper-component-html-css/)
[Building a Responsive Stepper Component](https://ishadeed.com/article/stepper-component-html-css/) — Runs through creating a horizontal and vertical stepper component with CSS flexbox. This is fabulously detailed and educational. 👍
Ahmad Shadeed
[Pushing Back Against Privacy Infringement on the Web](https://www.smashingmagazine.com/2021/08/against-privacy-infringement-web/) — “_The Web is still wrestling with issues we take for granted offline, privacy chief among them_”. This article outlines the steps taken at The New York Times to protect user data, and how you can do similar.
Robin Berjon
[Accessibility from the Ground Up](https://kittygiraudel.com/2021/08/20/accessibility-from-the-ground-up/) — Some sound pointers for getting started with accessibility.
Kitty Giraudel
[Why Use a Time Series Platform for Application Performance Monitoring](https://www.influxdata.com/application-performance-monitoring-technical-paper/?utm_source=vendor&utm_medium=referral&utm_campaign=2021-09-01_spnsr-nl_apm-tp_global&utm_content=frontendfocus)
InfluxData sponsor
[Scrollbar Reflowing](https://css-tricks.com/scrollbar-reflowing/) — Something worth knowing about scrollbars, viewport units and overflow, and a note about an incoming spec-based solution.
Chris Coyier
[On The `‹dl›`](https://benmyers.dev/blog/on-the-dl/) — A look at the often forgotten `` element, highlighting its versatility and how to best make use of it.
Ben Myers
[How to Use Puppeteer to Automate Chrome in an API with Netlify Serverless Functions](https://spacejelly.dev/posts/how-to-use-puppeteer-to-automate-chrome-in-an-api-with-netlify-serverless-functions/)
Colby Fayock
[A Step-By-Step Process for Turning Designs Into Code](https://css-tricks.com/a-step-by-step-process-for-turning-designs-into-code/)
Mark Noonan
[Using SVG with Media Queries](https://www.sitepoint.com/using-svg-with-media-queries/)
Tiffany Brown
Jobs
[Frontend Developer](https://careers.viaeurope.com/o/frontend-developer-berlin) — We’re seeking an experienced Frontend dev strong in JavaScript to join our small team. We offer a flexible work environment in a company that believes in sustainable growth and a good work balance.
ViaEurope
[Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-frontend&utm_content=frontend) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.
X-Team
[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) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.
Hired
🔧 **Code, Tools and Resources**
[](https://markodenic.com/tools/buttons-generator/)
[Buttons Generator](https://markodenic.com/tools/buttons-generator/) — Over 100 buttons you can use in your project, just tap to copy the code.
Marko Denic
[Assembler CSS: A Just-in-Time CSS UI Framework](https://asmcss.com/) — Has some similarities to Tailwind and includes states, scopes, and mixins, and custom elements for a more programmatic experience. Still in early development, but worth keeping an eye on.
Assembler CSS
[(Launched) Courier’s React Toast and Inbox Components](https://www.courier.com/blog/inbox-toast-notifications?utm_campaign=newsletters&utm_source=frontend-focus&utm_medium=toast-inbox-blog) — Courier is a notification management API and UI that enables sending notifications at scale from your app to your user.
Courier sponsor
[Stitches 1.0: The Modern Styling Library](https://stitches.dev/) — Annother CSS-in-JS solution, this one offering high performance, SSR, theming, critical path CSS, an intuitive API, and lots more.
Modulz
[Bioicons: High Quality Science Illustrations](https://bioicons.com/) — A niche set admittedly, but there’s a sizeable collection here (about 1700 icons) that are filterable by category and downloadable as SVG files or SVG code. Free, but many seem to require attribution.
Simon Duerr
[tailwind-merge: A Utility Function to Efficiently Merge Tailwind CSS Classes in JS Without Style Conflicts](https://github.com/dcastil/tailwind-merge)
Dany Castillo
[LaTeX Tailwind: An Almost-Class-less CSS Library to Style HTML like a LaTeX Document](https://github.com/samrobbins85/latex-tailwind) — If you like that academic look.
Sam Robbins
📬
**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://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc).
Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom
[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)