Fractional. — Ethan Marcotte
Ethan’s ode to the fr unit in CSS grid.
Tags: css
754
Should I try to use the IE version of Grid Layout? Revisited for 2018
Rachel follows up on my recent post about CSS grid in old IE with her thoughts.
As Jeremy notes, the usefulness of a tool like Autoprefixer is diminishing, which is a good thing. It is becoming far easier to code in a way that supports all browsers, where support means usable in an appropriate way for the technology the user has in front of them. Embrace that, and be glad for the fact that we can reduce complexity based on the increasing interoperability of CSS in our browsers.
How to build complicated grids using CSS grid
A nice walkthrough of a CSS grid in production. I was surprised to see percentages used as units—I wonder if it would feel “cleaner” if they were converted to fr units?
CSS: A New Kind Of JavaScript | HeydonWorks
A bold proposal by Heydon to make the process of styling on the web less painful and more scalable. I think it’s got legs, but do we really need another three-letter initialism?
We waste far too much time writing and maintaining styles with JavaScript, and I think it’s time for a change. Which is why it’s my pleasure to announce an emerging web standard called CSS.
Solving Sol
Browser implementations of Sol LeWitt’s conceptual and minimal art, many of which only exist as instructions like this:
Vertical lines, not straight, not touching, covering the wall evenly.
Ampersand 2018 | Rob Weychert
Rob attended the excellent Ampersand event last Friday and he’s made notes for each and every talk.
The Layouts of Tomorrow | Max Böck - Frontend Web Developer
A walkthrough of the process of creating a futuristic interface with CSS (grid and animation).
While this is just one interpretation of what’s possible, I’m sure there are countless other innovative ideas that could be realized using the tools we have today.
I Don’t Believe in Full-Stack Engineering • Robin Rendle
A good ol’ rant from Robin.
HTML and CSS and JavaScript have always been looked down upon by many engineers for their quirks. When they see a confusing and haphazardly implemented API across browsers (HTML/CSS/JS), I see a swarming, writhing, and constantly improving interface that means we can read stuff that was written fifteen years ago and our browsers can still parse it.
Before jumping to conclusions, read the whole thing. Robin isn’t having a go at people who consider themselves full-stack developers; he’s having a go at the people who are only hiring back-end developers and expecting them to automatically be “full stack.”
Resilient Web Design with Jeremy Keith | Meetup
People of Boston: I’m doing a book reading at your CSS meet-up on Wednesday, June 27th.
(Marketing genius that I am, I won’t be reading from my newest book, which is on sale now, but from the previous book, which is available for free online.)
Your Brain on Front-End Development | CSS-Tricks
I find this soooo relatable:
I know when I look at a design (heck, even if I know I’m not going to be building it), my front-end brain starts triggering all sorts of things I know will be related to the task.
Difference is, Chris comes up with some very, very clever techniques.
Resilient, Declarative, Contextual
This is really good breakdown of what’s different about CSS (compared to other languages).
These differences may feel foreign, but it’s these differences that make CSS so powerful. And it’s my suspicion that developers who embrace these things, and have fully internalized them, tend to be far more proficient in CSS.
Designing Web Content for watchOS - WWDC 2018 - Videos - Apple Developer
If you don’t fancy watching this video, Eric Runyon has written down the salient points about what it means for developers now that websites can be viewed on the Apple Watch. Basically, as long as you’re writing good, meaningful markup and you’ve got a sensible font stack, you’re all set.
Or, as Tim puts it:
When we build our sites in a way that allows people using less-capable devices, slower networks and other less than ideal circumstances, we end up better prepared for whatever crazy device or technology comes along next.
Text Effects - a Collection by Mandy Michael on CodePen
Mandy’s experiments with text effects in CSS are kinda mindblowing—I can’t wait to see her at Ampersand at the end of the month!
How to start with variable fonts on the web – Oliver Schöndorfer
A nice intro to variable fonts.
CSS Is So Overpowered It Can Deanonymize Facebook Users
First of all, don’t panic—this browser vulnerability has been fixed, so the headline is completely out of proportion to the reality. But my goodness, this was a clever technique!
The technique relies on luring users to a malicious site where the attacker embeds iframes to other sites. In their example, the two embedded iframes for one of Facebook’s social widgets, but other sites are also susceptible to this issue.
The attack consists of overlaying a huge stack of DIV layers with different blend modes on top of the iframe. These layers are all 1x1 pixel-sized, meaning they cover just one pixel of the iframe.
Habalov and Weißer say that depending on the time needed to render the entire stack of DIVs, an attacker can determine the color of that pixel shown on the user’s screen.
The researchers say that by gradually moving this DIV “scan” stack across the iframe, “it is possible to determine the iframe’s content.”
Design Patterns on CodePen
This ever-growing curated collection of interface patterns on CodePen is a reliable source of inspiration.
Solving Life’s Problems with CSS | CSS-Tricks
It turns out that Diana Smith isn’t just a genius with CSS—she’s a fantastic writer too. This post is somehow heartfelt and lighthearted at the same time. It’s also very humorous, but beneath the humour there’s an excellent point here about the rule of least power …and doing things the long, hard, stupid way.
Because something about those limitations just calls to me. I know I’m not alone when I say that a rigid set of restrictions is the best catalyst for creativity. Total artistic freedom can be a paralyzing concept.
That can sometimes be the case with programming. If you have the most powerful programming languages in the world at your disposal, it starts to seem natural that you should then have no difficulty solving any programming problem. With all these amazing tools offering countless solutions to solve the same problem, it’s no wonder that we sometimes freeze up with information overload.
CSS Grid — Responsive layouts and components – Deemaze Writing Wall – Medium
Rafaela Ferro has written a good case study on Ev’s blog of using CSS grid to build some practical image-based responsive components.
Getting Started With CSS Layout — Smashing Magazine
Rachel gives a terrific explanation of CSS layout from first principles, starting with the default normal flow within writing systems, moving on to floats, then positioning—relative, absolute, fixed, and sticky—then flexbox, and finally grid (with a coda on alignment). This is a great primer to keep bookmarked; I think I’ll find myself returning to this more than once.