WebKit Features in Safari 16 Beta — Plenty of updates to Safari (Beta release notes here) 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 that goes into more depth.

Jen Simmons (WebKit)

Learn More About Web Components — 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 — “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() — 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

Don’t Sink Your Website with 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

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 on the matter from Apple.

Max Eddy

What’s the Best Lossless Image Format? PNG, WebP, AVIF, and JPEG XL Compared — 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 — 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 — The Web Audio API makes it possible to properly achieve AV synchronization. Here’s a quick demo.

François Beaufort

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 — A chat with three of the startup’s product designers about how their upcoming browser ‘Arc’ is aiming to be “the future of web browsing”.

Matt Wille

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 — 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

Shortcut (formerly Clubhouse.io) sponsor

Clipdrop Remove Background: Online Tool to Remove the Background From Any Image — 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 — Lets you easily find HTML symbols, entities, and characters in ASCII, HEX, CSS, and Unicode formats.

Wenting Zhang

Color Legend Element: A Web Component Providing a Legend for Data Visualizations — Built with Lit/Lit-Element and D3.js. You can see various examples here. It’s legen.. wait for it.. dary.

Chris Henrick