--- title: "Safari 17 is here" publication: "Frontend Focus" issue: 610 published_at: "2023-09-20" canonical_url: "https://frontendfoc.us/issues/610" --- Plus imagining a future where AI builds your frontend components, and Ahmad Shadeed shares his frontend picks. | 👋 **Hello!** This week we've asked Ahmad Shadeed to share a few of his favorite frontend tools. Be sure to scroll down and see them. __ _[Chris Brandrick](https://twitter.com/chrisbrandrick), Editor_ Together with [![Bryntum\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_560,h_100/e_make_transparent/co_white,e_outline:7/hs9vs3jkbbbrfz0twgvk.png)](https://bryntum.com/?utm_source=newsletter&utm_medium=email&utm_id=frontendfocus-primary-20230920) 🚀 Frontend **Focus** #​610 — September 20, 2023 | [Read on the web](https://frontendfoc.us/issues/610) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1695213586/ljarxqjder752bhtm8ad.png)](https://webkit.org/blog/14445/webkit-features-in-safari-17-0/) [WebKit Features in Safari 17.0](https://webkit.org/blog/14445/webkit-features-in-safari-17-0/) — Safari 17.0 is now available for both iOS 17 and iPadOS 17, it will arrive on macOS a little later this month. This release is packed, and includes support for the `` element, the `popover` attribute, the CSS `font-size-adjust` property, the Storage API, JPEG XL, and much more. _Big release!_ Jen Simmons and the WebKit team [v0: Using AI to Build Frontend Components?](https://v0.dev/) — An interesting experiment from Vercel where you submit prompts like “a country selection field” or “a contact form” and it returns copy/paste-able [shadcn/ui](https://ui.shadcn.com/) + Tailwind CSS code. It’s in “private alpha” for now, but you can take a good look at how it works here. A sign of the future? Vercel Labs [![\](https://copm.s3.amazonaws.com/7e4a0f93.png)](https://bryntum.com/?utm_source=newsletter&utm_medium=email&utm_id=frontendfocus-primary-20230920) [The Complete UI Component Library For Enterprise Web Apps](https://bryntum.com/?utm_source=newsletter&utm_medium=email&utm_id=frontendfocus-primary-20230920) — A professional UI component library with power widgets like data grid, calendar, scheduler & Gantt charts. Includes API docs, guides and an unreasonable amount of demos to play with. Seamlessly integrates with React, Angular, Vue & Salesforce apps. Bryntum sponsor [free-for.dev: A Bumper List of Stuff That's 'Free' for Developers](https://free-for.dev/) — An interesting and extensive list of hosted services or otherwise paid-for products that have free tiers or options for developers. We linked to this a couple of years ago but it has been updated a lot since. R.I.Pienaar [A (More) Modern CSS Reset](https://andy-bell.co.uk/a-more-modern-css-reset/) — Andy created a modern CSS reset almost four years ago, but it’s time for an update to, well, _keep_ it modern. Andy Bell **⚡️ IN BRIEF** - WordPress blogs can [now be followed in the fediverse](https://techcrunch.com/2023/09/14/wordpress-blogs-can-now-be-followed-in-the-fediverse-including-mastodon/). - 📅 [CodeWord is an upcoming free online event](https://cfe.dev/events/codeword-conf-2023/) (_tomorrow_) looking at how developers interact with content in their code. Speakers include Chris Coyier, Cassisy Williams, Miriam Schwab, and others. - Browser company Vivaldi has [penned an open letter to the EU Commission](https://vivaldi.com/blog/vivaldis-open-letter-microsoft-dma-compliance/) to express "_concerns over Microsoft’s anti-competitive practices_" in regards to Edge. - Figma-friendly design tool [Anima now has Tailwind CSS support](https://www.animaapp.com/blog/product-updates/introducing-tailwind-css-support-in-anima/). - ♖ Opera is releasing a 'special edition' of their browser, with [built-in.._chess_?](https://blogs.opera.com/news/2023/09/opera-launches-custom-chess-browser/) 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/cl9mkko4nhsu8zj91zwk.jpg)](https://www.macarthur.me/posts/priority-hints) [Get All That Network Activity Under Control with Priority Hints](https://www.macarthur.me/posts/priority-hints) — Alex notes how the browser is pretty good at prioritizing resources requests on its own, but it’s not perfect. He shows us how priority hints makes it easy to provide _explicit_ instructions, and just what scenarios they’re most helpful in. Alex MacArthur [More CSS Findings from the _Threads_ App](https://ishadeed.com/article/threads-app-css-part-2/) — Ahmad continues his spelunking into Meta’s new social network, revealing a few interesting CSS findings from the Threads web app. Ahmad Shadeed [How to Adjust Image Size Without Distortion | AI-Powered Smart Resize](https://uploadcare.com/blog/smart-image-resize-by-uploadcare/?utm_source=newsletter&utm_medium=banner&utm_campaign=frontend) — This feature allows you to automate image resizing without losing quality or distorting objects in a picture. Uploadcare sponsor [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1695212505/djxo0tf5sfyoo55bohja.png)](https://www.smashingmagazine.com/2023/09/revealing-images-css-mask-animations/) [Revealing Images with CSS Mask Animations](https://www.smashingmagazine.com/2023/09/revealing-images-css-mask-animations/) — A look at combining various CSS masks to create fancy image hover transitions/reveals. There's lots of visual demos and code examples here. Temani Afif [A Beginner’s Guide to Using Pico CSS](https://www.makeuseof.com/pico-css-beginners-guide/) — An overview of getting started with this [slimline framework](https://picocss.com). David Uzondu [Counting Ghosts: A Case for Abandoning Web Analytics](https://pcmaffey.com/counting-ghosts) P.C. Maffey [Web Apps are Better Than _No_ Apps](https://molodtsov.me/2023/08/web-apps-are-better-than-no-apps/) Yury Molodtsov 🔎 FIVE IN FOCUS _with Ahmad Shadeed_ ![](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1694520870/opkfw9rwyiponysq3gwb.png) Five frontend recommendations from Ahmad Shadeed, design engineer, writer at [ishadeed.com](https://ishadeed.com/), and author of [Debugging CSS](https://debuggingcss.com). 1. [Stylelint](https://stylelint.io) This is a CSS linter that helps me avoid CSS mistakes upfront. 2. [Open Props](https://open-props.style) I like this a lot because it gives us the power of Tailwind, but with pure CSS variables. 3. [Browser DevTools](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) This is my most used tool while building stuff, it's opened by default. 4. [Responsive Viewer Extension](https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb) Adds responsive testing in the browser (Chrome) with a click of a button. 5. [Codepen](https://codepen.io) I don't think twice when I need to try something in the browser. I type pen.new and go from there. 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/msbdxsonmpeqsuru4hxh.jpg)](https://mdxeditor.dev/) [MDX Editor 1.0: A Rich Markdown Editor Component](https://mdxeditor.dev/) — Best known for the [React Virtuoso](https://virtuoso.dev/) virtualized rendering components, Petyo has unveiled a [Lexical](https://lexical.dev/)-powered Markdown editor for React apps that supports code blocks, tables, and more. [The live demo](https://mdxeditor.dev/editor/demo) shows off most of what you need to see. Petyo Ivanov [Nue: An Alternative to React, Vue, and Svelte to Build UIs with Cleaner Code](https://nuejs.org/) — Planned to be part of a full [tooling ecosystem](https://nuejs.org/tools/) similar to Vite, Astro, etc., this library has no hooks, effects, props, or other abstractions and is based on a developer-friendly HTML-based template syntax. nue [FusionAuth - It’s Your Auth, We Just Built It](https://fusionauth.io/download?utm_source=frontendfocus&utm_medium=newsletter&utm_campaign=awareness) — Get fully-featured CIAM, customized to your unique requirements. Start with FusionAuth in just five minutes, for free. FusionAuth sponsor [Plotteus: A JavaScript Library for Data Storytelling](https://www.plotteus.dev/) — Looks to be a powerful solution not just for creating static visualizations (graphs, plots, etc.) but interactive ones that visualize data changes via scrolling, UI controls, or other user interactions. Bartosz Prusinowski [Create Chrome Extension: A Scaffolding Tool for Your Next Chrome Extension](https://github.com/guocaoyi/create-chrome-ext) — Similar to create-react-app or Yeoman, this one is specifically for starting extension development, with support for 9+ frameworks, TS/JS, HMR, and light/dark modes. Yalda 🧑‍💻 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 📬 **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/610/*|UID|*?ipx=t)