Library
Links of things I've read and watched.
- At Last! Simple details/summary animation with pure CSS - YouTube This will be rad once the browsers catch up
- More options for styling <details> | Chrome for Developers I need to write up a post converting our FAQ component
- The Different (and Modern) Ways To Toggle Content | CSS-Tricks We recently built a state-driven accordion that could probably just be details + summary
- Beautiful focus outlines · Medienbäcker Thomas Günther What the title says
- Reimagining prototyping with AI. How generative AI tools are bringing… | by Vamsi Batchu | Nov, 2024 | UX Collective Prototyping is the best use of AI I’ve seen in web tools
- Making content-aware components using CSS :has(), grid, and quantity queries - Piccalilli Some fantastic tips
- CSS min() All The Things — Smashing Magazine Interesting dive and experiment
- Complete CSS launches on November 26 - Piccalilli Looking forward to this
- Framer Motion is now independent, introducing Motion - Motion Blog Interesting that it spun off into its own product
- pqoqubbw/icons beautifully crafted animated icons
- You can use text-wrap: balance; on icons – Terence Eden’s Blog I hadn’t thought to try this but I want this balance often
- How I write code using Cursor: A review Still learning new techniques after 36 years of coding
October 2024
- tailwindcss-highlights - Plugin Showcase
- Unleash The Power Of Scroll-Driven Animations | CSS-Tricks
- How Vercel adopted microfrontends - Vercel Wild move
- Split Effects with no Content Duplication – Frontend Masters Boost
- Building the Perfect Logo Strip - 9elements
- display:contents intro by Wes Bos
September 2024
- Animate to height: auto; (and other intrinsic sizing keywords) in CSS | CSS and UI | Chrome for Developers Nice explanation of the latest options
July 2024
- Split Effects with no Content Duplication – Frontend Masters Boost
- Building the Perfect Logo Strip - 9elements
- https://youtube.com/watch?v=vWJ95E71cow&si=o6K3cYfElPbAncvn
- Animate to height: auto; (and other intrinsic sizing keywords) in CSS | CSS and UI | Chrome for Developers Nice explanation of the latest options
- Design engineering / Blog / Chris Nager
- Tailwind CSS button collection - Click-to-copy integration
- 📅 Calendar Link | calendar-link Calendar link generator for popular services
- “Smart” design patterns with container queries Love the auto grid layouts
- CSS font-size-adjust is now in Baseline | Blog | web.dev Super handy feature for font fallbacks
July 2024
- CSS Grid Areas Awesome dive, I learned a lot
- Tailwind CSS with Intersection Observer variants Stashing in case I could use it
- Fine-tuning Text Inputs I haven’t used a few of these and maybe should
- My Top 10 Resources for Web Animations I dig this guy’s way of sharing
- @property: Next-gen CSS variables now with universal browser support | Blog | web.dev Types for CSS, ugh
- The Magic of Clip Path Awesome usage and explanation
- Inverted border-radius using CSS mask Seeing this trend a lot and I dig it
- 8 Exciting New JavaScript Concepts You Need to Know - DEV Community Well now I partially know them
- Why the with() method of JavaScript Array is a gem? Neat
- True Crime Explained - YouTube Loved this explanation and visuals
- Fluid for Tailwind CSS - Build better responsive designs in less code. Handy items for responsive text
- The 3 Types of CSS Utility Classes Utilities FTW
- Add an overlay to a background-image with one line of CSS Neat trick, but more than one line really
- Component Day | Link Pages, Uncommon Components and React Library Update Love these shares
- A guide to observability - LogRocket Blog Learned some definitions around my day-to-day work
- From Hacks to Elegance: Transforming a Card Component with Modern CSS Wizardry - 9elements Excellent walkthrough of modern CSS for an unusual layout
- Adapting typography to user preferences with CSS | Articles | web.dev Love the thought behind using a variable font for improving UX
- Popovers Work Pretty Nicely as Slide-Out Drawers – Frontend Masters Boost Really digging this series on popovers and how easy the API makes things
June 2024
- Inside the Redesigned Figma, Where Your Work Takes Center Stage | Figma Blog Awesome work
- simpleParallax.js - Easy Parallax Effect for React & JavaScript
- CSS Cap Unit Definitely going to start using this
- Web Design Engineering With the New CSS | Matthias Ott | CSS Day 2024 - YouTube So good
- Introducing Vercel AI SDK 3.2 Got a great intro to this at Render
- Single CSS Keyframe Tricks are Magic Neat trick for repeating animations
- New CSS media queries syntax Really interesting, I hadn’t heard of it and it’s succinct
- Hover Animations for Terminal-like Typography | Codrops Rad effect
- Creating a Glowing Text Marquee Animation | Codrops Digging this effect
- Capturing web page video with a couple of bookmarklets Super helpful bookmarklets
- Flow Charts with CSS Anchor Positioning
- Fluid Breakout Layout with CSS Grid | Viget Love this breakdown and I could add a few on this site
- Let’s make a floating button sign up form pattern Excellent walkthrough
- Glassmorphism: Definition and Best Practices
- One of the Boss Battles of CSS is Almost Won! Transitioning to Auto
- The Next Big Thing in CSS: margin-trim!
- Using AI to spark connections at a conference | Swizec Teller
- Component Driven User Interfaces
- Understanding React Server Components – Vercel
- How I Structured My Design System Using Figma’s New Variables | by Melissa McArthur | Jul, 2023 | Bootcamp Love seeing the dragging into other viewport sizes
- Let’s hang! An intro to CSS Anchor Positioning with basic examples | utilitybend First dive into this and it feels like it will be very useful
- CSS-only Custom Range Slider with Motion Nice little effect
May 2024
- Best Web Design Resources 2024 - YouTube - Jeremy Mura Awesome collection of resources
- I rewrote my blog! And website! They are one! Definitely going to check out Tina
- Protecting your email address via SVG instead of JS Interesting trick, but maybe just until the bots catchup?
- The age of average (encore) — Alex Murrell
- Are Inline Styles Faster than CSS?
- Creating a pointer-friendly submenu experience – React Spectrum Blog
- Are Inline Styles Faster than CSS?
March 2024
February 2024
- A better image reset for your CSS Clever items that I wouldn’t have thought of
- Event currentTarget to the rescue - Piccalilli Quick and helpful tip
- Webflow’s New Custom CSS Properties 🤯 Nice feature for expanding what can be built
- Add Dark Mode to YOUR website with a single line of code Super interesting way to handle it
- Creating Text Reveal Animation on Scroll with GSAP & SplitType Interesting to see Webflow folks use GSAP
- AI Mixologist vs. Human Bartender | WIRED - YouTube - WIRED Fun experiment
January 2024
- Accounting for Internationalization with CSS and HTML I've been using logical properties but hadn't set the dir yet
December 2023
- You don't need Storybook to make a playground Definitely need to try this
- Making noisy SVGs — Daniel Immke Cool technique and gorgeous blog post
- Quantity Queries are Very Easy with CSS :has() – Frontend Masters Boost
- No one actually wants simplicity "We think we do, but in fact every web developer will happily sacrifice simplicity to the first shiny thing promising them relief" from the mildest of ailments.
- "How does xxx compare to Panda CSS"
- AI coding is exploding
- Timed Cards Opening I want to use this for no reserv-ai-tions
- Modern Button Styles - 45 CSS Only Buttons I want to use a few of these
- CSS Media Query Support for Video source Elements - Stephanie Stimac's Blog Cool little snippet
- Teaching ChatGPT to prompt Midjourney Definitely need to make a thread or GPT of this
- You don't need JavaScript for that - HTMHell Nice roundup of UI that can be done natively now
November 2023
- CSS In Real Life | Preventing Scroll “Bounce” with CSS Neat trick that I’ll add to my stuff
- Scraping Goodreads Another good way to get your data out of Goodreads
- Headless Component: a pattern for composing React UIs Love this dive into how to think through components
October 2023
- How To Animate Along A Path In CSS — Smashing Magazine Super slick
- How Smashing Magazine Uses TinaCMS To Manage An Editorial Workflow I’ve been debating using this, I want a git-based CMS for this site
- Textareas with auto-increasing height using CSS Nice feature
August 2023
- A Future of Themes with CSS Container Style Queries | chriskirknielsen
- THE BEST SIDE DISH THAT I'VE EVER MADE (SERIOUSLY...) | SAM THE COOKING GUY Fondant potatoes that I have to make
- The Foundation of REST API: HTTP - ByteByteGo Newsletter Great explanations, I went too long without knowing any of this
- What’s the right font size in web design? - Pimp my Type I concur
- CSS only floating labels · Muffin Man Nice
- I Gave a Website Logo Superpowers Another fun walkthrough
- Why I STOPPED Using Next.js And Chose Astro Instead A personal blog is a perfect use case for Astro instead of Next
- Coding prototypes Write what you need to test a hypothesis. Then throw that code away.
- Product and Platform Engineers Another differentiation, kinda similar to what I do
- Build a thing to build the thing Valuable approach for building a design system or UI library
- The Next Generation of Web Layouts Nice, open challenge from The Godfather
- Visually hidden links with 0 dimensions Weird and helpful find
- 10 Art Styles on Midjourney V5 Prompts you must try! Worth demoing them all
- Just normal web things. Some good points on how engineers break affordances in the spirit of advancement
- Build Custom Interfaces Using CSS Open Props - YouTube - Learn With Jason Definitely going to try this for some example components that I want to build
- React Hooks Crash Course (useMemo, useCallback and more). - YouTube - developedbyed Learned some bits of how things work that Next handles
- Responding to Reddit on the Next.js App Router - YouTube - Lee Robinson Love this approach by Lee and I learned some things
- Throw away your first draft of your code | nicole@web
- Stop Conditional Rendering in React Without Knowing This (&& vs Ternary Operator) - YouTube - ByteGrad I got caught with this in the past
- Resume and pause animations in CSS animation-play-state: paused FTW
July 2023
- The key to understanding complex systems is patience. Embracing them and being resilient are the hardest parts for me
- Framer Update: Code Blocks & Inline Code - YouTube - Framer Nice way to improve usage of Framer for content sites
- How To Create This Unbelievable CSS Scroll Animation - YouTube - Web Dev Simplified Learned how to think through this animation
- Framer Tutorial: Advanced Scroll Zoom Animation - YouTube - Framer University Awesome walkthrough, learned some Framer techniques
- Top 10 CSS One Liners That Will Blow Your Mind - YouTube - developedbyed He's hilarious and informative, "bitch"
- If Web Components are so great, why am I not using them? All good points from Uncle Dave
- Scroll driven animations in CSS are a joy to play around with! | utilitybend Definitely want a progress meter for blog posts once this is at least in Chrome
- Remote Synthesis | Is Jamstack Officially Finished? RIP Jamstack
- Why Panda: CSS for RSCs is Changing the Game - YouTube - Jack Herrington I'm super excited for this, I want to see if I could revamp our whole design system with it
- Introducing React Tweet – Vercel Worth trying when I need one
- Chris Lattner: Future of Programming and AI | Lex Fridman Podcast #381 - YouTube - Lex Fridman Fantastic conversation between two humble and insanely smart programmers
- CSS-only particle animations Awesome “pairing” session on animations, lots of great tips
- How Long Should Your Midjourney Prompt Be? /Shorten Deep Dive Nice breakdown of the shorten command and experiments with it
- How to Create Brand-Consistent Background Images with Midjourney Saving to remember to try background images
- Scroll-Based Layout Animations | Codrops An exploration of different scroll based layout switch animations using GSAP's ScrollTrigger and Flip.
- The Ultimate Guide to AI Web Design 2023 | by Design Studio | Jul, 2023 | UX Planet Ultimate is strong, but a good collection of what things are being created
- htmx in 100 seconds I’m probably missing something, but seems better to use web components
- How To Become A Better Speaker At Conferences — Smashing Magazine Solid advice
- Conditional CSS with :has and :nth-last-child - Ahmad Shadeed Excellent examples
- Why engineers should focus on writing - Dmitry Kudryavtsev I agree and put it on the internet
- A case study on scroll-driven animations performance - Chrome Developers Looking forward to it getting adopted
- Scroll progress animations in CSS | MDN Blog Love the things that are coming to the platform
- The problems with viewport units - YouTube - Kevin Powell I recently ran into a few of these, excellent breakdown
- Easy and accessible pagination links for your Astro collections Still want to build something sizable with Astro
- PromptGenerator · ChatGPT Users Great prompt crafting technique
- Inspiration for Text Block Transitions | Codrops I love the UI for testing as much as I love the effect
- Fixing INP with a VIEWPORT tag Cool trick for static pages with the errors
- Tailwind CSS Tips and Tricks Worth Knowing Nice collection of tips, reminded me of group which I needed recently but wrote CSS for
- Harvard professor Avi Loeb believes he's found fragments of alien technology - CBS Boston Wild discovery, I wonder if they are really crafted bits of tech
- How to build a website without frameworks and tons of libraries | Koding Kitty Jinja to the rescue! This goes a little further than my taste but I see the value
- Headless Design Systems. Revolutionizing Front-end Development | by Matthaios Mantzios | Jun, 2023 | Bootcamp I love the premise and it solves a problem, but I want to see the dirty work involved
- Building a Sustainable Website for Dodonut Using Astro JS - Bejamas Really interesting to consider carbon emissions, beyond the the typical web perf
- They Won't Play a Lady-O on Country Radio: Examining Back-to-Back Plays by Gender, Race, & Sexual Orientation Pudding does it again, with excellent visualizations and backstory behind a problem
- localroger's home Had to read, got it from Lex Fridman chatting with George Hotz
- CSS only floating labels Nice thing to use
- Smoked Chicken Bombs Recipe...These Are AMAZING! | Ash Kickin' BBQ Really want to make these and order those pins
- This Makes State Management so Much Easier Zustand looks excellent for handling state
- Breaking Up with SVG-in-JS in 2023 Going to try the <use> approach in our next-app
- nucliweb/webperf-snippets: ⚡️ 💾 Web Performance Snippets Interesting snippets that I need to try out
June 2023
- Framer Tutorial: Advanced Scroll Animation (ZERO Code) Really enjoy his style of teaching and video production
- Framer Tutorial: No-Code Animated Curved Carousel for Your Website - YouTube - Framer University Rad animation made so easily compared to code
- Creating zooming scroll effects like Apple.com in Framer without code - YouTube - Framer I need to make this
- ImNotGoodEnough.js Love this way of breaking things down by what you know
- How we made the Awesome tutorial and dog-fooding example by Figma
- Use Next/Image with React Markdown – Amir Ardalan Extend react-markdown with metastrings.
- The BEST Secret of MidJourney V5.2 : It’s NOT “Zoom Out”… but “Create Consistent Style”! Excellent walkthrough, need to try this for a series
- Introducing AI Help: Your Trusted Companion for Web Development | MDN Blog Excellent place for AI to help with learning and finding docs
- This Website Feature Demands It Of You Short and sweet example of how to break down something complicated and recreate it
- Framer Tutorial: CMS Basics I need to give this a try
- Next.js App Router: Routing, Data Fetching, Caching Awesome intro by Lee, I want to be able to update to 13
- Porting a Next.js Site to Astro Step-by-Step Nice walkthrough, I'd love to move our marketing site
- Your next component - Dan Mall (Config 2023) Excellent talk, reminded us that every day is a chance to make things better
- Framer Updates: Mobile Navigations Need to test making a nav
- Master Carousels in Framer (Slideshow, Ticker & Carousel) Great intro and makes me wonder if you can use CMS items
- Framer Update: New Conditionals & Transforms This tool is a front-end dev and I love it
- Designing the new Dive website in Figma + Framer - YouTube - Ridd Seriously awesome walkthrough
- 6 UI Hacks I Wish I Knew As A Beginner - YouTube - Tim Gabe Standard things, explained very well
- Using Images in Next.js (next/image examples) - YouTube - Lee Robinson Nice dive into the new version of the component
- No Handoff: close the gap between product and engineering – No Handoff The dream
- Figma Dev Mode is here! Intro to the features with a nice warning about the cost
- Animating Slack reminders with the View Transitions API Nice intro to the API
- 4 Ai Personal Assistants (3 Tested) None seem great, as I’ve experienced as well
- JavaScript: Reverse Arrays use .toReversed()
- NEW Midjourney 5.2 Update: Zooming, Prompt Analyzing, and More! - YouTube - AI Foundations Good examples for the new features
- Building a line graph with CSS clip-mask Clever technique
- Building Beautiful Login Pages with Auth0 Focuses on the form, not the page
- Creating Scroll-Triggered Animations by combining Scroll-Driven Animations, Custom Properties, Style Queries, and Transitions CSS animations are getting so powerful
- When building components in Astro, you might not want to use Astro files | Zell Liew Use a language you're using, in this case Svelte
- Generating income from open source Hmm
- Before your next frontend pull request, use this checklist—Martian Chronicles, Evil Martians’ team blog More related to a general checklist than pull requests
- Rick Rubin: Legendary Music Producer | Lex Fridman Podcast #275 I just want to sit and listen to music with Rick Rubin now
- I used Framer AI to create a website… in 5 minutes Shows off all the bits quickly
- Rebuilding a comment component with modern CSS - Ahmad Shadeed Fantastic walkthrough
- Visual Studio's IntelliSense list can now steer GitHub Copilot code completions. - Visual Studio Blog I'm really loving these improvements
- Skeleton Screens 101 A definition-type article on them
- Modern CSS For Dynamic Component-Based Architecture | Modern CSS Solutions Awesome dive into using CSS for a lot of things we see in CSS-In-JS solutions
- Positioning anchored popovers It'll get better soon-ish
- How to highlight required and optional form fields tl:dr; only highlight optional fields
- 11 HTML best practices for login & sign-up forms—Martian Chronicles, Evil Martians’ team blog The kind of article to review when you’re building one
- DeepMind AI creates algorithms that sort data faster than those built by people Computers telling computers what to do better than we do
- AI Means More Developers Developers that can write code but can’t wrangle dependencies or reason about code quality or maintenance will suffer
- CSS In Real Life Reducing Complexity in Front End Development Tips, tricks and tutorials on the web’s most beautiful language.
- Are JavaScript libraries really that bad for performance? Good explanation of why JS is slower than just the kbs
- All the Hard Stuff Nobody Talks About when Building Products with LLMs Great notes and I had some similar challenges
- 48 Laws, Rules, and Principles of Web Development · Jens Oliver Meiert Collection of excellent principles
- Gooey Cursor Effect | Codrops Number 8 is so dope
- Best practices for container queries | Zell Liew Quick tip on wrapper elements like Flexbox
- CSS In Real Life | Reducing Complexity in Front End Development I could get down with committing node_modules
- 5 JavaScript Concepts You HAVE TO KNOW Checking out James’ videos
- Next.js 13 - Layouts and Pages Explained in 20 mins or so Funny and informative look at the the pages options
- (1) Midjourney Tutorial - Chaos Parameter - Prompts Included - Beginner Friendly - YouTube - A(i)rtifacts Something to play with
- (1) Midjourney 5.1 Tutorial: 10 Unique Styles for Stunning AI Art! ✨🎨 - YouTube - AI Wealth I really enjoy his dives into styles and explanations of them
- Let's Learn 11ty Part 7: Adding Tailwind Bringing it back to my personal site
- How to Use Your Domain on Bluesky Glad to be in Bluesky and have this hooked up
- This React UI Library is GAME CHANGER! Another good look at shadcn UI
- Microsoft vets lead secretive education startup using generative AI to help students learn Education is where I see this being helpful, mainly for the repetitive and "always on" features
- Train Your Own Private ChatGPT Model for the Cost of a Starbucks Coffee TIL renting a 3090
- “Artificial Intelligence & Humanity,” an article by Dan Mall Nice breakdown of the pros and cons of AI right now
May 2023
- Re-evaluating px vs em in Media Queries Seems like there’s movement but still often px
- The Fastest Google Fonts – CSS Wizardry – Web Performance Optimisation I need to set this up
- Building a design system without a design system team | by Andrea Nguyen | UX Planet We’re approaching this at work on the engineering side
- Using linear() for better animation Everything keeps getting better
- 3 ways to find your worst JavaScript offenders for page load – Performance @ Shopify Handy tips
- Complete Website in Framer: Beginner Tutorial - YouTube - Tim Gabe Seriously in awe of how this Framer handles responsive design
- Designers Are Leaving Webflow... Here's Why Seeing Framer recently has felt like a throwback to 2015, but it’s seriously impressive
- Why is THIS the Perfect Homepage? I was skeptical but I think he explained his reasoning very well
- Scientists use AI to discover new antibiotic to treat deadly superbug | Artificial intelligence (AI) | The Guardian Fascinating usage of medical learning at speed
- Next.js 13 and React Suspense: Create a loading component - LogRocket Blog Good intro
- Getting started with View Transitions on multi-page apps Looking forward to adding these, but I don't mess with Canary
- 20 Art Styles for Midjourney With Prompts and Samples. Interesting to apply it to base images
- New Strapi Starter with Next.js 13, Tailwind, and TypeScript Worth kicking the tires on, especially for how they handle the API
- The Midjourney Cheat Sheet (V5) From prompts to parameters and weights, all in one place
- Markdown images are an anti-pattern I agree on using an img tag instead
- Building a Frontend Framework; Reactivity and Composability With Zero Dependencies Excellent walkthrough
- Eleventy by Example, by Bryan Robinson A review of "Eleventy by Example", by Bryan Robinson
- I think I was wrong about Tailwind... - YouTube - James Perkins Nice breakdown on the copy/pastability
- Why the modern web loves Astro and Eleventy (11ty) – and how to choose which one to use | CloudCannon Agree with most of the points
- Best Screenflow Audio Filters To Make Your Audio Sound Amazing | Mike Hobbs - YouTube - Mike Hobbs Struggling with audio lately and this helped a lot
- 500 High Quality Prompts for Midjourney AI: Logos, Human Emotions, PowerPoint Backgrounds and more… Another example of the power of | in prompts
- Anatomy of Midjourney Promps: In-Depth Study for effective Prompting Strategies — V5.1 examples This is the first I've seen someone use pipes | for separating parts of the prompt
- I created a Zero-Runtime CSS-in-JS Library Compatible with Next.js App Router and RSC Excellent description of the issues around CSS-in-JS performance
- My AI "Second Brain" To Make Life Easier - YouTube - Matt Wolfe Fantastic breakdown of useful tools
- Designing for (Realistic) Attention - Christopher Butler I love this, but I wonder how you balance it with SEO
- What's new in CSS and UI: I/O 2023 Edition - Chrome Developers Awesome wrap-up of the latest hotness
- daisyUI — Tailwind CSS Components Nice usage of named styles and utility classes
- GitHub - smol-ai/developer: with 100k context windows on the way, it's now feasible for every dev to have their own smol developer Interesting “CLI” for creating any app
- More control over :nth-child() selections with the of S syntax - Chrome Developers CSS keeps adding things we’ve wanted forever
- 6 CSS snippets every front-end developer should know in 2023 Stuff the cool kids are doing
- Rearrange / Animate CSS Grid Layouts with the View Transition API – Bram.us My first peek at the View Transition API, which looks rad
- Can you create beautiful stroked text in CSS? - LogRocket Blog I have to use this somewhere, it’s so fun
- A Set of Useful 11ty Filters | Aleksandr Hovhannisyan Used this for the library date formatting
- Top 3 AI Website Builders: How to Create A Website in Minutes (no coding) - YouTube I’m interested in doing a comparison of some to try to build something I would at work
- The Photography Prompt that Perfectly Arranges Anything - YouTube Knolling, with some similar prompts
- Custom filters for Nunjucks templates in Eleventy — Eszter’s (mostly) frontend blog Trying to track down date format options for the library dates
- Notion API with 11ty - Constant Vallee Helpful article for getting started, but I ran into trouble getting the data into a template
- How to Edit Screen Recordings So They're Extremely Easy to Follow - Screenflow 10 Tutorial - YouTube Excellent tips that have already helped me improving screen recordings
- ONE ChatGPT Prompt to RULE THEM ALL - MidJourney/Stable Diffusion - YouTube I didn’t finish the video because someone shared an improved prompt in the comments
- Dynamic color change while scrolling with CSS Handy item, similar to an approach that I use for Gmail dark mode
- Tether elements to each other with CSS anchor positioning - Chrome Developers Interesting to see the platform to continually adapt to UI that is built on top of it