Harry clearly outlines the performance problems of Base64 encoding images in stylesheets. He’s got a follow-up post with sample data.
A sweet CSS tutorial that Cassie put together for the Valentine’s Day Codebar.
A new media query that will help prevent you making your users hurl.
A nice straightforward introduction to web development for anyone starting from scratch.
The (literally) hidden dangers of copying code snippets from the web and pasting them into the command line.
This cautionary tale backs up a small tip I heard for getting to understand how found code works: deliberately type it out instead of copying and pasting.
A look at the technical details behind Firefly’s pattern library. The tech stack includes Less, BEM, and some React, but it’s Anna and Danielle that really made it work.
Grid is only a replacement for float-based layout, where float-based layout it being used to try and create a two-dimensional grid. If you want to wrap text around an image, I’d suggest floating it.
Grid is only a replacement for flexbox if you have been trying to make flexbox into a two-dimensional grid. If you want to take a bunch of items and space them out evenly in a single row, use flexbox.
bastianallgeier/letter: Letter is a simple, highly customizable tool to create letters in your browser.
A nice little use of print (and screen) styles from Bastian—compose letters in a web browser.
Instead of messing around in Word, Pages or even Indesign, you can write your letters in the browser, export them as HTML or PDF (via Apple Preview).
A nice and clear description of how browsers parse and render web pages.
Oh, how I wished everyone approached building for the web the way that Rachel does. Smart, sensible, pragmatic, and exciting!
A wonderfully thoughtful piece from Robin, ranging from the printing technologies of the 15th century right up to the latest web technologies. It’s got all my favourite things in there: typography, digital preservation, and service workers. Marvellous!
Chris redesigned CSS Tricks and it’s got some really nice touches. I particularly like the stacked card view on mobile.
I understand how bloated and non-reusable code can get when a dozen people who don’t talk to each other work on it over a period of years. I don’t believe the problem is the principle of semantic markup or the cascade in CSS. I believe the problem is a dozen people working on something without talking to each other.
A very very in-depth look at fluid typography in CSS using
This is a clever technique by Dave—use viewport units to make a lightweight lightbox.
CSS Shorthand Syntax Considered an Anti-Pattern – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts
Sensible advice from Harry—only style what you mean to style.
Some really great CSS tips from Rich on sizing display text for multiple viewports.
This philosophy doesn’t apply to every website out there, but it sure as hell applies to a lot of them.
Eric is excited about the imminent arrival of grid layout in browsers. And after reading the answers to these sure-to-be-frequently asked questions, you’ll be excited too!