Article Archives

How to undo (almost) anything with Git

A handy guide to fixing common mistakes with Git from Joshua Wehner:

One of the most useful features of any version control system is the ability to "undo" your mistakes. In Git, "undo" can mean many slightly different things.

When you make a new commit, Git stores a snapshot of your repository at that specific moment in time; later, you can use Git to go back to an earlier version of your project.…


Breaking Up Large Files Into Sections

It's a 2,000 line behemoth. It's hard to browse or easily find what you are looking for in there. What can be done? This article isn't about actually dismantling the file (although that would be a good one), it's mostly about what to do when you need to leave the file that way.…


Those Words Again

It's interesting to see how many people over time have come to the conclusion that certain seemingly-harmless words can be problematic while communicating:

Back to the :roots


I'll try to show a few ways how you can make the cascade be your friend and maybe reduce the need of overriding and thus encounter less fighting with specificity.…


Understanding JavaScript Constructors

The following is a guest post by Faraz Kelhini. Some of this stuff is out of my comfort zone, so I asked Kyle Simpson to tech check it for me. Kyle's answer (which we did during an Office Hours session) was very interesting. It was: 1) This article is technically sound. JavaScript doesn't really have classes in a traditional sense and this is the way most people shoehorn them in. 2) We may want to stop shoehorning them in.


How To Do Knockout Text

There are a couple of ways to do knockout text (text that appears cut out, such that you can see a background behind it) on the web. There is one fairly new way that has pretty decent browser support that is pretty interesting. But let's cover all the ground.…


Discussion Around Ad Blocking

The discussion has heated up with the drop of iOS 9 and its ability to run apps that block ads. That was just the spark for the conversation, as ad blocking isn't a new thing. Desktop browsers have had extensions that can block ads for a long time. There are ad blockers that work for Android. Not a new concept, just new to iOS.

Let's round up some news and opinion.…

Write SVG: a PostCSS plugin

Here’s a cool PostCSS plugin that lets us write SVG directly in CSS with the rest of our styles:

.arrow { @svg { polygon { fill: green; points: 50,100 0,0 0,100; } } }

These values will then be converted into a data URI, like so:

.arrow { background-image: url(data:image/svg+xml;utf8, }

Like Sara Soueidan mentions, I'd love to see this in Sass.

Update: David Khourshid has just made sass-svg which lets you write SVG inside a mixin.…


How I Live-Coded My Most-Hearted Pen

The following is a guest post by Ana Tudor. If you've seen Ana's work, perhaps you know that she uses mathematics and code together to make art. The finished pieces look like they take ages to make. But as I witness with my own eyes, Ana can think through what it takes to build something like this while doing it incredibly quickly. Here she'll explain to us the entire thought process in a step-by-step tutorial.

What Even is a Table?

Edd Sowden embarks on an epic accessibility journey where he tries to understand why changing the display property of a table has an impact on its semantic meaning.

A couple of notes that I found interesting here:

  • In the future we might be able to use <table role="table"> as a useful hack for overriding those style changes and preserving accessibility.
  • The accessibility tab in Chrome’s web inspector can be enabled with 'Developer Tools experiments' and turning on 'Accessibility Inspection'.

The @font-face dilemma

Chris Manning takes us through the weird journey that is custom fonts on the web. We started with the "Flash of Unstyled Text", which at first we didn't like because it was abrupt and felt janky and could even cause reflow, which didn't help readers focus. Browsers reacted, and started hiding text until the custom font was ready (various implementations did it differently). "Flash of Invisible Text" as it were. Times have changed such that FOUT is now preferable again, …


An Intro to CSS Testing with SonarQube

The following is a guest post by David Racodon. David contributes to this open source code quality tool he'll tell you all about. I hadn't heard of it until now, but I know there are lots of folks out there interested in tooling to help keep their CSS in check. This is a bit like CSS lint but formalized into an interface that handles code quality for a whole project.

Let’s talk about the Web Animations API

Dan Wilson has an intro article followed by a 5-part series all about the Web Animations API. If you were unaware, .animate() is a native thing now. I think there is a ton of interesting things about the Web Animations API, like:

  • Yet another great example of how a libraries pave the way, then browsers learn from that and get better. Then:

    These libraries can then focus on providing newer features, and the cycle can continue.

  • Under the browsers proverbial

The Importance of Context-Shifting in UX Patterns

Have you ever had a day at work where you were constantly put towards a new task as you were ramping up on the current one? It feels jarring at best, and completely frustrating and time-wasting at worst. In recent years, employers at big companies have begun to consider the cost of context-shifting—the time spent re-adjusting your brain to a different task adds up, causes frustration in employees, and thus: loses money. It follows that User Experience on a website …

Sponsor: An Event Apart

Set yourself apart. Get better at what you do today and find out how you’ll be doing your job in a year or two. An Event Apart—three days of design, code, and content for people who make websites—is where ideas like responsive design and mobile first were launched, and where this year’s attendees are already learning how grid layout, CSS shapes, and other advanced techniques will fundamentally change…well, everything. Don’t miss it!​​


Office Hours, Now With Themed Sessions

Our brand new Office Hours has been going great! We've gotten to meet some of you and help you out of some problems.

We've learned, though, that many of you just like to listen, talk shop, and don't necessarily have a problem you need help with right this second. So, we're going to start having a theme for our sessions. You can still ask any question you want, but during any question-free time, the session leader will show off and …

The State of Front End Tooling

Ashley Nolan gathered data on the the tools we're using these days as front end folk. Spoilers: Sass, Gulp, jQuery. But there's a lot of interesting and somewhat surprising data to explore in here. …


New Poll on Performance Culture

What's the web performance situation on your main project? For simplicity, but also wide coverage, I broke it down into five choices ranging from a nobody caring to everybody caring. This isn't about how well you're doing at performance, but how much it's a part of the culture of your project.…

Eliminating Roundtrips with Preconnect

Last week we wrote about prefetching and preloading but forgot to mention preconnect. Thankfully however, Ilya Grigorik has written a great post about this elusive resource hint:

Preconnect is an important tool in your optimization toolbox. As above examples illustrate, it can eliminate many costly roundtrips from your request path — in some cases reducing the request latency by hundreds and even thousands of milliseconds. That said, use it wisely: each open socket incurs costs both on the client …

“the movement away from symbolic representations”

Stephen Hay on the classic designers should learn to code maxim. He sets it up nicely:

One thing you notice when hanging hundreds of paintings and drawing by kids, especially the younger ones, is that many tend to draw symbols of what they see. The don’t draw the sun, they draw a circle with lines around it.

Then, maybe, you learn to draw:

Learning to look carefully at what’s really there. What’s really happening. Circles on a wine glass become …


Emoji Toggles!

Fun Friday thing! Natalya on CodePen made a super fun Pen.

You know how clicking a <label></label> with a for attribute that matches a checkbox input, it will toggle the input to checked or unchecked? That, combined with the :checked selector in CSS and the sibling combinator forms The Checkbox Hack, and you can use that to do all kinds of fun stuff. …

Sponsor: Treehouse

I'd like to specially thank Treehouse today for being such an awesome long-time sponsor of CSS-Tricks. Just imagine how many people they have helped over the years learn web and mobile design and development. It's damn impressive. I've watched Treehouse evolve over the years and you can see how their experience with students guides how they teach and how the site works. For instance, I love how there are different ways to learn: take a track toward a goal like …


Prefetching, preloading, prebrowsing

When we talk about front end performance we think things like concatenation, minification, caching, or gzipping assets on the server so that the page loads faster and users can complete their goals as quickly as possible.

Resource prefetching is another performance enhancing technique. We can use it to tell the browser which assets the user might need in the future—before they even need them.…


Gulp for Beginners

The following is a guest post by Zell Liew. I'm stoked to have Zell dishing out some Gulp 101. Zell has a comprehensive tutorial style (see his post on Susy) that lends itself well to a topic of this scope. I've also tackled Grunt in a similar fashion. I get the sense people found that pretty darn helpful, so here we go again with the equally popular Gulp!


DIY Priority+ Navigation

We've written a bit about the Priority+ pattern here before. Here's a bunch of real world examples. I needed to use it recently. I found Gijs Rogé's priority-navigation. It's pretty nice: no dependencies, clean code, fairly configurable and designable. It's not particularly small though, and there is a good amount of it defining helper functions. I was in an environment that had all that stuff available and so I figured I'd take a crack at a version. …


Six Tips for Chrome DevTools

The following is a guest post by Umar Hansa. Umar has a newsletter I'm a fan of and graciously offered to write this guest post in that style. I'll let him introduce himself.

Hey, I'm Umar. I like to share web development related tips on Twitter (@umaar) and also through Dev Tips which is a newsletter of developer tips in the form of gifs. Right now, it's all primarily Chrome DevTools related. Before we get started, thank you …

Sponsor: imgix — Real-time Image Resizing as a Service

Looking to take advantage of the srcset attribute or <picture> element, but don't want to store the different versions of each image? Looking to apply blurs to images that don't peg the browser? imgix can help.

imgix is a real-time image resizing service and CDN. Resize, crop, and process images simply by changing their URLs. Mix and match over 90 URL parameters for unlimited different ways to process images.

It's free to sign up, and every new account gets $10 …

Responsive Images 101

Jason Grigsby just wrapped up a 10-part series masterclass on responsive images. There is a table of contents at the bottom of each post for jumping around. …


Styling a Server-Generated File Directory

The following is a guest post by Keith Knittel. Keith used a tutorial on this site to build his own customized file directory. I was like, hey, that oughta be a better-explained tutorial on this site. So here we are.

“probably doesn’t do what you think it does”

An interesting post about the odd behaviour of querySelectorAll where it'll match elements that you might not expect at first glance:

I think this API is surprising, and the front end engineers I've asked seem to agree with me. This is, however, not a bug; it's definitely how the spec claims it should work, and how it works in Firefox, Chrome and Safari.…

BEMIT: Taking the BEM Naming Convention a Step Further

Harry Roberts takes a look back at his previous post on abstracting classes and expands on the idea by using the @ symbol:

The @ is a human readable and logical way of denoting conditional states. It allows developers to learn about any potential permutations or appearances that the piece of UI in question might have, just at a glance.

For instance, instead of making a class such as .is-hidden--large (where an element is only hidden on large breakpoints) we'd …


Tight Fitting SVG Shapes, the Present and Future

The following is a guest post by Ana Tudor. Ana tackles an interesting problem here: what happens when the stroke of an element grows it such that it appears cut off? Getting it to fit tightly again may seem like an exercise in guessing, checking, and magic numbers. But if you know Ana's work, you'll know she is uniquely qualified to teach us the math behind getting to the correct solution. She approaches it a number of different ways,

Bootstrap 4 Alpha

Major changes in Version 4. Some highlights:

  • Moved to Sass from LESS
  • This version of box-sizing as part of their new reset.
  • Opt-in (single variable toggle) to use flexbox on the grids/components.
  • Type set mostly in rems
  • All JavaScript in ES6

And another big move for them: monitization through purchasable themes designed by the Bootstrap team themselves.…

Zoomable UIs

Joni Korpi on the redesign of his personal website, where he describes all the issues involving "zoomable user interfaces", or ZUIs. For example, clicking on a link will zoom into that particular element rather than cause a full page refresh.

There is no home page or navigation menu. These two elements are usually among the hardest to design, so I'm glad to be rid of them. In this design, they're both replaced by the same thing: a zoomable view of …


Timber and Twig Reignited My Love for WordPress

The following is a guest post by TJ Fogarty. TJ pitched me some ideas for articles and I latched on to this one right away. I've heard this same sentiment from a few other people. Then on a bit of investigation, I can understand why. As you'll soon see, not only do you get a lovely syntax to work with while working with themes, but it separates concerns a bit better. It's almost like a normal theme file gets


Recent Conference Talks Worth Watching

These are some of my favorites from conferences I've either been to lately, have watched online, or were recommended to me (in which case they aren't always super recent). I link up the playlist of videos from the conference the talk was at where I can, as your taste in talks may be different than mine.

I like the idea of popping stuff like this on the ol' TV at night sometimes rather than whatever mindless garbage I normally watch. …

MailChimp Style Guide

Interesting that it's not about code or design (in a traditional sense). It's about writing and copy and tone and and that kind of thing. Distinctly different from their Patterns. Makes sense to me. There doesn't seem to be much consistency with naming on these things though. Looking through here, it seems most people think of "style guide" as a visual thing.

Also, Facebook.…

Sponsor: MakerSquare (Immersive JavaScript Courses in Austin, San Francisco and LA)

Start your career as a Software Engineer by joining an exceptional community of passionate learners. MakerSquare's 12-week immersive coding school is currently accepting applications for classes beginning September 14th, October 5th and November 2nd.

With a JavaScript-based curriculum built in partnership with Hack Reactor and an API development sprint supported by Uber Engineers, MakerSquare's course has never offered more opportunity for growth. Reach your potential with the help of a renowned team - apply today for courses beginning every 7 …


David Merfield:

There are lots of clever one-liners for generating random colors:

'#' + Math.floor(Math.random()*16777215).toString(16);

Unfortunately, this code naturally produces lots of greys and browns and murky greens.

randomColor generates attractive colors by default. More specifically, randomColor produces bright colors with a reasonably high saturation. This makes randomColor particularly useful for data visualizations and generative art.…


First Impression of GitHub Desktop

GitHub Desktop was released late last week.

Wait, doesn't GitHub already have two desktop apps? If the same question crossed your mind when you first read that, then you are not alone. Yes, GitHub did have two desktop apps—one for Mac OS and one for Windows—but decided to unify them into a single app. Instead of GitHub for Mac and GitHub for Windows, we are now left with just GitHub Desktop.

I was planning to write up a …


Making Charts with CSS

There are many ways to make visual representations of data: bar charts, line graphs, scatter diagrams, sparklines... not to mention the many ways in which you can implement them on the web. In this post I'll be looking at plain CSS methods for styling data. …

We have a pretty good* newsletter.