Blog Archive
-
contrast-color() beyond black & white
Two techniques that bypass the black-or-white limit of contrast-color() for custom color palettes.
-
Automated accessible text with contrast-color()
Let the browser pick the most readable text color for any background with this new CSS function.
-
border-shape: the future of the non-rectangular web
Learn about new geometry capabilities with this game-changing experimental CSS feature.
-
2025 in Review
2025 in review.
-
Directional CSS with scroll-state(scrolled)
Style based on scroll direction with this new scroll-state query feature.
-
CSS Wrapped: 2025!
Sculpt a more dynamic web, and learn about the new CSS and UI features that landed in Chrome in 2025.
-
Range Syntax for Style Queries
Learn how to use the new range syntax for CSS style queries and the if() function.
-
Detect fallback positions with anchored container queries from Chrome 143
Identify and style an anchored element in a fallback anchor position.
-
Follow-the-leader pattern with CSS anchor positioning
Learn how to create a dynamically re-anchored pointer element.
-
5 Useful CSS functions using the new @function rule
CSS custom functions are a gamechanger. Here are 5 really useful examples.
-
Creating a scroll-spy with 2 lines of CSS
scroll-target-group is a new CSS feature that lets you create scroll-spy table of contents with basically 2 lines of CSS.
-
What is popover=hint?
Learn about what exactly this new popover feature does and how it relates to interest invokers.
-
New capabilities for attr()
Advanced attr() is landing in Chrome 133, and I'm really excited for this feature! Here's a bit about it and how you can use it.
-
Updates to the customizable select API
Everything that has changed since the RFC post for this feature.
-
2024 in Review
2024 in review.
-
Customizable select: request for developer feedback
Learn about the new customizable select component, and try it out today.
-
@property: Next-gen CSS variables now with universal browser support
The CSS Anchor Positioning API is a game-changer in web development because it lets you natively position elements.
-
The latest in CSS and web UI: I/O 2024 recap
The web platform is alive with innovation, with CSS and web UI features at the forefront of this exciting evolution.
-
Introducing the CSS anchor positioning API
The CSS Anchor Positioning API is a game-changer in web development because it lets you natively position elements.
-
Popover API lands in Baseline
Popover provides so many great developer affordances for building layered interfaces like tooltips, menus, teaching UIs, and more.
-
2023 in Review
Annual year in review: 2023 edition.
-
CSS Wrapped: 2023!
2023 was a huge year for CSS! Learn about all the Web UI highlights that landed in browsers this year.
-
Select element: now with horizontal rules
The select element gets a small but mighty upgrade where you can now add <hr> (horizontal rule) elements into the list of options and they will appear as separators.
-
Four new CSS features for smooth entry and exit animations
These four new features include: animating display and content-visibility on a keyframe timeline, the transition-behavior property, the @starting-style rule, and the overlay property.
-
Building a no-JS radial menu with CSS trigonometry, popover, and anchor positioning
Learn how to build a fluid, modern radial menu leveraging new and upcoming CSS capabilities.
-
2022.5 in Review
Catching up on last year's year-in-review post
-
Introducing the popover API
Popovers are everywhere on the web platform. Learn how to use the new web platform primitives to take advantage of them today.
-
What's new in CSS and UI: I/O 2023 Edition
Popovers are everywhere on the web platform. Learn how to use the new web platform primitives to take advantage of them today.
-
Using color-mix() to create opacity variants
Build an alpha color system without splitting out channels using this one neat trick.
-
Getting started with style queries
With style queries landing in stable Chrome, learn about how to use them in applications.
-
Container queries land in stable browsers
Learn about working with container queries and the polyfill.
-
Working with container queries today
Learn about working with container queries and the polyfill.
-
@container and :has(): two powerful new responsive APIs
Leverage the responsive UI power of container queries + :has().
-
Style Queries
Exploring when and how you would use style queries in your day-to-day work.
-
Cascade layers are coming to your browser
Learn about using cascade layers to control the CSS cascade for more targetted styles.
-
2021 in Review
Reviewing 2021's highs, lows, and everything in between.
-
How we Built Designcember
Behind-the-scenes of designcember.com.
-
Personalize It!
I answer the question "what is one thing you can do to make your site better?"
-
CSS for Web Vitals
CSS-related techniques for optimizing Core Web Vitals.
-
The new responsive: Web design in a component-driven world
Controlling macro and micro layout in a new era of responsive web design.
-
Next Gen CSS: @container
@container brings us the ability to style elements based on the size of their parent container.
-
Updates in hardware-accelerated animation capabilities
Learn about using cascade layers to control the CSS cascade for more targetted styles.
-
New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly
The new CSS property that helps maintain spacing in responsive layouts.
-
2020 in Review
Well this year absolutely sucked. But I'll try to take a look at the positive.
-
Cross-browser paint worklets and Houdini.how
Supercharging your CSS with Houdini paint worklets is just a few clicks away.
-
min(), max(), and clamp(): Three Logical CSS Functions to Use Today
Learn how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS functions.
-
content-visibility: the New CSS Property that Boosts your Rendering Performance
Improve initial load time by skipping the rendering of offscreen content.
-
@property: giving superpowers to CSS variables
The Houdini Properties and Values API is coming to your CSS file in Chromium 85.
-
Ten Modern Layouts in One Line of CSS
This post highlights a few powerful lines of CSS that do some serious heavy lifting and help you build robust modern layouts.
-
Web Animations API improvements in Chromium 84
Orchestrating animations with promises, performance improvements with replaceable animations, smoother animations with composite modes, and more.
-
Randomized Selective Color: A Post List Study
A study on selective color from a predefined list, using CSS custom properties, a little bit of JavaScript, and some progressively enhanced CSS Houdini.
-
The Web in 2020: On Extensibility and Interoperability
In the past few years, we’ve seen a lot of change and diversion in regard to web technologies. In 2020, I foresee us as a web community heading toward two major trends/goals: extensibility and interoperability.
-
Using Material Density on the Web
The latest update to our density guidelines includes a new systematic approach to applying density and spacing in digital products.
-
2019 in Review
2019 was a massive year for me. I like to reflect on the year and set some goals for the future.
-
Calculating Color: Dynamic Color Theming with Pure CSS
Did you know that you can build custom dynamic color themes without the use of JavaScript or a CSS preprocessor!? Read on!
-
How to Use Material Data Tables on the Web
Creative web design and systematic web design don’t need to be at arms. This post examines how to use a design system (Material) and extend it to make it your own.
-
Material Theming: Making Material Your Own!
Creative web design and systematic web design don’t need to be at arms. This post examines how to use a design system (Material) and extend it to make it your own.
-
I'm Joining Google!
Just a little writeup about what I've learned and what I'm up to next.
-
An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods
Map, reduce, and filter are three very useful array methods in JavaScript that give developers a ton of power. This post makes them a little easier to understand.
-
New horizons in CSS: Houdini and the Paint API
I wrote a blog post for LogRocket about CSS Houdini and the Paint API! Complete with demos and illustrations.
-
The Future of Responsive Design
With expanding web technoligies, we can now interpret responsive design as the way it affects a user’s context, and how we can be the most responsive to the user’s needs and experience.
-
2018 in Review
Reviewing how my 2018 went, and discussing goals for next year!
-
Solved with CSS! Logical Styling Based on the Number of Given Elements
The old-third post in my "Solved with CSS" Series, this time detailing how you can use CSS to apply logical styling based on how many elements are inside of a parent.
-
The Female Engineers of Bustle on Getting the Job Done
A feature on Bustle, sponsored by Windows, on my some of my teammates and myself, where we discuss work, the team, and falling in love with coding.
-
Solved With CSS! Dropdown Menus
A CSS Tricks post on how we can create accessible dropdowns using only vanilla CSS.
-
Solved With CSS! Colorizing SVG Backgrounds
A CSS Tricks post on how we can colorize inaccessible SVG backgrounds by using CSS filters, instead!
-
Pair Projecting
This is my second Pastry Box Project post: on why working with other people makes projects more rewarding.
-
2017 in Review
Keeping the tradition alive! My 2017 in review and 2018 goals.
-
Why Design Systems Fail
This 24-Ways post looks into why the implementation of design systems and how to ensure that yours is successful.
-
I'm Useless Without a To-Do List
It's hard to stay on task and productive — especially when we've got so much going on in our lives. This post details how I maintain a TODO list system to accomplish just that.
-
The Contrast Swap Technique: Improved Image Performance with CSS Filters
With CSS filter effects and blend modes, we can now leverage various techniques for styling images directly in the browser. However, creating aesthetic theming isn't all that filter effects are good for. You can use filters for web performance, too.
-
Locally Scoped CSS Variables: What, How, and Why
Leveraging CSS Variable scope improves the size, specificity, and semantics of our stylesheets. This article talks all about what CSS Variables are and how we can leverage scope to improve our styling.
-
VSCode Custom Workspaces
VSCode just released custom workspaces! This means you can customize your text editor layout and style for different projects within a single editor!
-
3 CSS Grid Features That Make My Heart Flutter
An awesome CSS grid tool was just released for Firefox, and the web has been buzzing about it. This is a short post about my 3 favorite features!
-
Creative Side Projects: A How-To Guide
The best way to learn any new skill is through practice. This post is about how to come up with creative and effective side projects for developers to keep up with today's ever-changing technology.
-
Interview on Shoptalk Show
I was on the Shoptalk Show (hosted by Chris Coyier and Dave Rupert) with Krystal Higgins talking about An Event Apart, speaking, and finding a "thing"
-
Implementing "Save For Offline" with Service Workers
I recently added an option to save blog posts for offline reading. This post details how I did that and how you can too.
-
2016 Year In Review + 2017 Resolutions
It's time for my annual reflection and goal resetting circa 2016
-
Simplicity in Design: Insights from an Industrial Engineer
My father, an industrial engineer with over 20 years od experience talks about interface design and the important of simplicity in programming.
-
Rethinking Responsive Design
From Google's physical web project to the emergence of more affordable virtual reality and augmented reality systems, it's time to take a serious look at how the web is changing, and the exciting possibilities for its application outside of screens.
-
Digitalocean.com on the Responsive Web Design Podcast
I was on the Responsive Web Design Podcast, co-hosted by Karen McGrane and Ethan Marcotte, with my coworker Zach Schnackel to discuss the new digitalocean.com
-
3 Years of Pattern Libraries: Lessons Learned
Component libraries can be very useful in terms of organization, unity, and ensuring performance/accessibility. Here are 3 things to understand when embarking on building your own.
-
Faster and More Accessible: The New digitalocean.com
We unified the site with our updated branding, and also focused on improving digitalocean.com's accessibility, organization, and performance.
-
3 Weird SVG Browser Inconsistencies
This post started with a simple search and turned into a trove of undocumented knowledge I discovered about finicky cross-browser SVG properties.
-
3 Easy Performance Wins for Designers
Wish media being the biggest performance bottleneck on the web, let's turn our focus to design. This post outlines 3 easy wins for more performant UI's.
-
It’s Not About Morals: Accessibility is for the Masses
Accessibility is often solely discussed in terms of people with disabilities, but in truth, it's something that benefits the majority (if not all) of your users.
-
Web Image Effects Performance Showdown
This post for Smashing Magazine looks at one of the most popular image effects, grayscale, to compare its implementation in HTML canvas, SVG, CSS filters, and CSS blend modes.
-
Setting up An Accessibility Dashboard from Scratch with Pa11y on DigitalOcean
This post will walk you through setting up an accessibility testing dashboard from A to Z. Let's make the Internet more better together.
-
Lessons Learned at IBM Design
I've learned so much during my time at IBM Design! This is a little wrap up post and an announcement about my next adventure.
-
Pure CSS Games with Counter-Increment
Did you know you can make games in CSS? This post explores a relatively obscure CSS property (counter-increment) combined with checkbox inputs to show you how.
-
Interview on The Start FM
I was interviewed for one of my favorite podcasts ever: The Start FM. The conversation is about how I got to be where I am now and what it means to be so young in the industry.
-
If You Know Sass, You Know ES2015
If you know some Sass, you're probably a lot further than you think to understanding and diving into the world of modern JavaScript. This post showcases some of the similarities.
-
Finessing < feColorMatrix >
CSS Filters are awesome, but you can't do individual channel manipulation with them. Enter: feColorMatrix, SVG filter effect method that allows for really in-depth pixel value manipulation for even better image filters.
-
A Gulp-Based External SVG Symbol Sprite Icon System
Icons are essential to most pattern libraries and web design systems. Let's take a look at a scalable approach!
-
How Did I Begin Coding?
I wrote about how I began to code for the new publishing platform SuperYesMore. TL;DR — cartoon dolls and Flash.
-
2015 Year In Review & 2016 Resolutions
It's time for my annual reflection and goal resetting! It's been a crazy year for sure.
-
Classy CSS: a Programmatic Approach to Sass Stylesheets
An opinionated Sass architecture system for writing modular and scalable libraries. Also, a case in defense of extends.
-
CSS Image Effects #6: Infrared Photography
In the final post of the CSS Image Effects series, we explore the beautiful, surreal world of infrared photography by creating our own faux effect.
-
CSS Image Effects #5: Lomography
A vibrant, unexpected, and fun effect — the Lomography Effect is an opportunity where you can really be creative and try out various CSS image techniques.
-
Introducing CSSgram: A CSS Library for Instagram Filters
CSSgram is a tiny (<1kb gzipped) library for recreating Instagram filters with CSS filters, gradients, and blend modes.
-
CSS Image Effects #4: Bokeh Textures
Bokeh textures are very popular in photography. Let's take a look at how to create our own.
-
CSS Image Effects #3: Vignettes 3 Ways
This week we'll take a look at one of the most popular photo manipulations: adding a vignette to draw attention to the center of an image.
-
CSS Image Effects #2: 3D Glasses
How do you make 3D-glasses-like graphics in the browser? We'll look at how blend modes work together to create this effect.
-
CSS Image Effects #1: Vintage Washout
The first post in a series on creating custom image effects in CSS. We'll take a look at the vintage washout effect.
-
The Internet We Know is Built on Hacks
From HTTP2, Flexbox, CSS Filters, and ES6, the Internet we know today is built on hacks. Lets explore some of those hacks and solutions.
-
CodeNewbie Podcast
I was interviewed for the CodeNewbie podcast, where I talk about life, IBM Design, open source, and personal goals.
-
How to Get Designers Involved in Your OSS Project
A journalists take on my OSCON talk — Open Source Design, A Love Story.
-
Tech Conference Travel Tips
With preparations for the fall conference season coming up, here are some travel tips to help make your life a little bit easier.
-
Opensource.com Interview
How designers can contribute to open source, an interview for the OSCon Speaker Interview Series.
-
Atomic OOBEMITSCSS
A ridiculous frankenstein of a name for a legitimate approach to CSS that pulls ideas from the most popular approaches.
-
Hacking :visited
Hacking the :visited selector to show unread posts. We'll look at the limitations and my little work-around.
-
Sass Pixel Art
Pixel art is so much fun! This blog post walks through how to read a matrix-like list with Sass and generate Mario pixel art from box shadows.
-
Embrace the Terminal
If you use a computer, you could use your terminal to make huge improvements to your work flow. This article talks about getting started and writing aliases to customize your experience.
-
Sketchnotes from SXSW 2015
Some selected sketchnotes from a few talks I went to at the SXSW Interactive 2015 Conference.
-
5 Great Uses for Sass Maps
Another blog post written for SitePoint about 5 great uses for Sass maps and other thoughts on code at the moment.
-
On Code and Community
A blog post written for SitePoint on why community is at the crux of a thriving code base.
-
The Science of Web Animations&: SPA
Neuroscience plays a big roll in our design work. This post takes a look at Sensory Memory and how animations that visually link states can improve a user's experience.
-
Sketchnotes, FTW
Sketchnotes are a great way to document a talk or event. They allow you to doodle and get a little bit creative with your content recording.
-
Sass Director and Manifest Files
I created a tool that lets you architect your Sass project in a single location (your manifest file), and it will build all of the directories and partials for you! This blog explains what a Sass manifest file is, what it does, and why you should use one.
-
2015 Resolutions
This is a personal post about my 2014 in review (because a lot happened) and my goals for 2015. Happy New Year!
-
Setting up PageSpeed Insights to test Performance Locally via Gulp
This is a walk through of how to set up Google PageSpeed Insights within your existing gulp project. This way, you can get your page speed score information within your terminal without first needing to push your site to a live server.
-
How Open Sourcing My Personal Goals Made Me Really Productive
For the past four weeks, I've been keeping a very public and open version of my personal goals on Github. Its definitely made me a lot more productive, and you should give it a try.
-
On Learning and Comprehension
I've been doing a lot of research and experimentation lately about how people learn. This post might give you some ideas to improve your own comprehension and think about your own learning style.
-
Open Source Design
When designers and developers work together from the start, it produces better outcomes. But how can we get designers involved and wanting to participate in the open source community from the start?
-
A Pretty Long List of Style Guides and Pattern Libraries
An alphabetized list of styleguides and pattern libraries and a look into the differences between those two terms.
-
ATX Sass
Our new website for Austin's Sass Meetup is live!
-
The Intimidation Barrier
A closer look at one of the reasons why designers don't participate in the open source community. (This links out to designopen.org)
-
Becoming a Keyboard Ninja: The Sticky Note Method
The keyboard, where our hands are placed most of the time (as developers), is the fastest navigation method by default. Knowing how to navigate yours system via keyboard will really optimize your workflow.
-
Media Queries of the Future!
The Media Queries 4 spec brings insight to technological capabilities that are coming up soon (this is based on the Editor’s Draft, October 10, 2014).
-
Sass Bites #33: Una Kravets
I was on Sass Bites this week!
-
Building Proofessor
A behind-the-scenes look at the making of the Proofessor app. (This links out to viget.com)