⚡️ Web Performance Snippets


Git fundamentals for devs • Understand SVG paths • 4 principles to avoid bad UX and more...

view in browser

Happy Wednesday 👋 Here's what we have this week:

💡 Git fundamentals for devs
🛣️ Understand SVG paths
📜 4 principles to avoid bad UX

A huge welcome to all our new subscribers this week, happy to have you onboard.

This week is absolutely jam-packed with goodies. Enjoy ✌️ - Adam at Unicorn Club.

Brought to you by FL0 Sponsor

The easiest way to deploy backend applications in minutes.

FL0 is your powerful, fully managed deployment platform. No need to understand Kubernetes, or hack together complex cloud resources on your own.

Launch your next big idea on FL0. Get started on FL0 for free.

Get Started for Free

🧑‍💻 Code

Web Performance Snippets

A curated list of snippets to get Web Performance metrics to use in the browser console or as snippets on Chrome DevTools.

Git Fundamentals for Developers

In the fast-paced world of software development, effective version control is essential for collaborative work, change tracking, and streamlined code management.

On-Scroll SVG Filter Effect

Combining GSAP’s Scroll Trigger and Flip with a SVG Filter, based on a demo by Fabio Ottaviani.

Understanding SVG Paths

If you've ever looked at the SVG code for an icon before, you might have noticed that they're usually made up of a bunch of path elements, each with a cryptic d attribute.

Faking a :snapped selector with Scroll-Driven Animations

Scroll-Driven Animations can be used well beyond its original intended use when combined with other CSS features.

🎨 Design

Design System Metrics

Don't put in metrics just because having many of them on your dashboard will look fantastic. If it's not an actionable metric, it's a vanity metric.

Design for the web without Figma

Because no matter how good Figma is, it's an intermediary abstraction, like Photoshop before it.

4 design principles to avoid bad UX

You’re designing a form but the questions are complicated. Users need a lot of guidance to understand each question. But this makes the page long and messy.