--- title: "Dub Dub Safari" publication: "Frontend Focus" issue: 545 published_at: "2022-06-08" canonical_url: "https://frontendfoc.us/issues/545" --- Plus a11y™, HTTP/3, and are third party resources sinking your website? | #​545 — June 8, 2022 | [Read on the web](https://frontendfoc.us/issues/545) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1654686425/rv7uijtepx94cjo0zay2.png)](https://webkit.org/blog/12824/news-from-wwdc-webkit-features-in-safari-16-beta/) [WebKit Features in Safari 16 Beta](https://webkit.org/blog/12824/news-from-wwdc-webkit-features-in-safari-16-beta/) — Plenty of updates to Safari ([Beta release notes here](https://developer.apple.com/documentation/safari-release-notes/safari-16-release-notes)) on the way, several of which were announced at Apple's WWDC developer event earlier this week. This post looks over the highlights of improvements shipping in WebKit browsers (_such as animation improvements, Web Push - more on that below - Subgrid, and container queries_). [Here's a video presentation from WWDC](https://developer.apple.com/videos/play/wwdc2022/10048/) that goes into more depth. Jen Simmons (WebKit) [![\](https://copm.s3.amazonaws.com/1a015797.png)](https://frontendmasters.com/courses/web-components/?utm_source=frontendfocus&utm_medium=email&utm_content=webcomponents) [Learn More About Web Components](https://frontendmasters.com/courses/web-components/?utm_source=frontendfocus&utm_medium=email&utm_content=webcomponents) — Web Components are used to define custom, reusable HTML elements. Join Dave Rupert for this extensive video course on both using and creating your own Web Components to build robust web apps. Frontend Masters sponsor [Meet _Web Push_](https://webkit.org/blog/12945/meet-web-push/) — “_Websites have many reasons to notify their users of time-sensitive or high-priority events_” — as such, Web Push Notifications are coming to Safari 16 in macOS Ventura (in 2023, anyway). Here’s a look at how they are being implemented in WebKit from one of the engineers who’s working on it. Brady Eidson (WebKit) [Simplify Your Color Palette with CSS `color-mix()`](https://www.smashingmagazine.com/2022/06/simplify-color-palette-css-color-mix/) — CSS color-mix is an experimental function that blends two colors and can be used to simplify color palettes. You can define a color palette and theme without too much effort using CSS `color-mix()`. Here’s how. Daniel Yuschick **⚡️ Quick bits:** - 😮 Did you know the accessibility shorthand 'a11y' [is a registered trademark?](https://adrianroselli.com/2016/11/a11y-accessibility.html#Update04) Here's [a related Twitter thread](https://twitter.com/aardrian/status/1533847990334529542) where some ponder what this means for the term's usage. - HTTP/3 has finally been published as a proposed standard in the shape of [RFC9114.](https://www.rfc-editor.org/info/rfc9114) _The Register_ has [the full story.](https://www.theregister.com/2022/06/07/http3_rfc_9114_published/) - As WWDC is taking place this week, there are [plenty of web tech video sessions](https://webkit.org/blog/12840/web-platform-and-web-extensions-features-highlighted-at-wwdc22/) being added here by the WebKit team. - Apple has also used WWDC as an opportunity to debut its new Human Interface Guidelines (HIG) — the refreshed [guidance/best practices are here.](https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/) - WebContainers (a way to run Node.js natively in the browser) are now [officially supported in Firefox](https://blog.stackblitz.com/posts/webcontainers-are-now-supported-on-firefox/). - 📆 Bekah Hawrot Weigel is hosting a free session this Thursday (June 9) on [browser testing with Cypress](https://cfe.dev/events/mission-impossible-testing-cypress/). - It looks like the popular _San Francisco_ font used on macOS is [getting some added enhancements](https://developer.apple.com/videos/play/wwdc2022/110381/) in the shape of condensed, compressed, and expanded widths, plus two Arabic variants. 📙 **Tutorials, Articles & Opinion** [Don’t Sink Your Website with Third Parties](https://www.smashingmagazine.com/2022/06/dont-sink-website-third-parties/) — An explainer as to what third-party resource requests really are and which common optimization strategies can help reduce their impact on the user experience. Ken Harker [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1654694672/wscbpa33qvs7k9b8dneb.png)](https://uk.pcmag.com/security/140796/with-some-help-apple-passkeys-could-finally-kill-the-password) [With Some Help, Apple Passkeys Could Finally Kill the Password](https://uk.pcmag.com/security/140796/with-some-help-apple-passkeys-could-finally-kill-the-password) — “_Apple’s passwordless scheme looks intriguing, but its real strength lies in the other companies working to end the password for good_”. [Here's the related video](https://developer.apple.com/videos/play/wwdc2022/10092/) on the matter from Apple. Max Eddy ▶[The History API is Dead. Long Live the Navigation API](https://www.youtube.com/watch?v=cgKUMRPAliw) — A ~15 minute chat about the new [Navigation API](https://developer.chrome.com/docs/web-platform/navigation-api/), which replaced “the old and busted” History API. Google Chrome Developers [What’s the Best Lossless Image Format? PNG, WebP, AVIF, and JPEG XL Compared](https://siipo.la/blog/whats-the-best-lossless-image-format-comparing-png-webp-avif-and-jpeg-xl) — A comparison of lossless image formats and how they stack up. Johannes Siipola [Keep Up with the Latest in Startups, Tech, & Programming in Just 5 Min](https://tldr.tech/signup?utm_source=fef0608) — TLDR is a daily newsletter with links and TLDRs of the most interesting stories in startups 🚀, tech 📱, and coding 💻 TLDR Newsletter sponsor [How to Synchronize Audio and Video Playback on the Web](https://web.dev/audio-output-latency/) — The [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) makes it possible to properly achieve AV synchronization. [Here’s a quick demo](https://wc-talk.netlify.app/simple_video_player.html). François Beaufort [How to Animate SVG Shapes on Scroll](https://tympanus.net/codrops/2022/06/08/how-to-animate-svg-shapes-on-scroll/) — A look at animating SVG paths while smooth scrolling a web page using Lenis and GSAP’s ScrollTrigger plugin. Mary Lou [The Browser Company Wants You to Build Your Own Internet Home](https://www.inputmag.com/design/the-browser-company-arc-design-interview) — A chat with three of [the startup’s](https://thebrowser.company) product designers about how their upcoming browser ‘Arc’ is aiming to be “_the future of web browsing_”. Matt Wille [Why Most Design Systems Implode](https://storybook.js.org/blog/why-most-design-systems-implode/) Michael Chan [Web Typography: Establishing a Strong Typographic System](https://www.sitepoint.com/web-typography-establishing-a-strong-typographic-system/?utm_source=rss) Alex Walker Jobs [Senior Software Engineer at This Dot Labs (Remote, Worldwide)](https://www.thisdot.co/job/senior-software-engineer-javascript-remote) — Great benefits working in modern tech stacks and amazing clients such as Google, Meta, Twilio, Cloudinary, Roblox, and more. This Dot Labs [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 & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/eoeiyws4bdmd53oglubc.jpg)](https://toolcool.org/random-favicon-generator/) [Random Favicon Generator](https://toolcool.org/random-favicon-generator/) — Need a favicon quick but not overly fussed about what it looks like? This tool can generate one for you. The level of customization is quite good and it uses the MIT-licensed Tabler icons under the hood. May be worth trying if even just for some inspiration. Tool Cool [The Best JavaScript and CSS Animation Libraries for UI Designers](https://www.sitepoint.com/our-top-9-animation-libraries/) — Runs through nine free, well-coded animation libraries best-suited to UI design work — covering their strengths and weaknesses, and when to choose each one. Alex Walker [Issue Tracking Has Never Been Easier with Shortcut](https://shortcut.com/?utm_source=cooperFRONTEND&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=issuetrack) Shortcut (formerly Clubhouse.io) sponsor [Clipdrop Remove Background: Online Tool to Remove the Background From Any Image](https://clipdrop.co/remove-background) — Works nicely and gives you a nice before/after slider to compare. The service also includes an API you can request access to. clipdrop [Symbols to Copy: A One-Stop Location for Copying Special Characters and Symbols](https://symbols.wentin.net/) — Lets you easily find HTML symbols, entities, and characters in ASCII, HEX, CSS, and Unicode formats. Wenting Zhang [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/a6nxd8rxx77rzlj51vyo.jpg)](https://github.com/clhenrick/color-legend-element) [Color Legend Element: A Web Component Providing a Legend for Data Visualizations](https://github.com/clhenrick/color-legend-element) — Built with Lit/Lit-Element and D3.js. You can see various examples [here](https://clhenrick.github.io/color-legend-element/). It’s legen.. wait for it.. dary. Chris Henrick 📬 **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|*)