Library
Links of things I've read and watched.
- 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