Every week(ish) we publish the newsletter which contains the best links, tips, and tricks about web design and development. At the end, we typically write about something we’ve learned in the week. That might not be directly related to CSS or front-end development at all, but they’re a lot of fun to share. Here’s an example of one those segments from the newsletter where I ramble on about code quality and dive into what I think should be considered a …
Last night I was rooting around in the cellars of a particularly large codebase and stumbled upon our
normalize.css which makes sure that all of our markup renders in a similar way across different browsers. I gave it a quick skim and found styles for a rather peculiar element called
<output> that I’d never seen or even heard of before.
According to MDN, it “represents the result of a calculation or user action” typically used in forms. And rather …
For the last two weeks, I’ve been working on a really large refactor project at Gusto and I realize that this is the first time that a project like this has gone smoothly for me. There haven’t been any kinks in the process, it took about as much time as I thought it would, and no-one appears to be mad at me. In fact, things have gone almost suspiciously well. How did this happen and what was the issue?
Kelly Sutton writes about programming, working with teams and the relationship to the Greek word Mētis:
Mētis is typically translated into English as “cunning” or “cunning intelligence.” While not wrong, this translation fails to do justice to the range of knowledge and skills represented by mētis. Broadly understood, mētis represents a wide array of practical skills and acquired intelligence in responding to a constantly changing natural and human environment.
In some ways, mētis is at direct odds with …
From small caps and ligatures to oldstyle and ordinal figures, the
font-variant-* CSS properties give us much finer control over the OpenType features in our fonts. Chris Lewis has made a tool to help us see which of those
font-variant features are supported in our browser of choice and I could definitely see this helpful for debugging in the future.
I was rooting around in the settings for iOS Safari the other day and stumbled upon its “Experimental Features” which act just like feature flags in any other desktop browser. This is a new feature in iOS 11 and you can find it at:
Settings > Safari > Advanced > Experimental Features
Here’s what it looks like today:
Marvin Visions is a new typeface designed in the spirit of those letters you’d see in scruffy old 80’s sci-fi books. This specimen site has a really beautiful layout that’s worth exploring and reading about the design process behind the work.
We’ve already covered “The Notch” and the options for dealing with it from an HTML and CSS perspective. There is a bit more detail available now, straight from the horse’s mouth:
Safe area insets are not a replacement for margins.
… we want to specify that our padding should be the default padding or the safe area inset, whichever is greater. This can be achieved with the brand-new CSS functions
max() which will be available in a future …
This little website pulls in all the main stories from CNN and strips almost everything from the design; styles, images, fonts, ads, colors. Nada, zilch, gone. At first it looks like nothing but hypertext and it feels like an extraordinary improvement but Sam Saccone made a thread about potential improvements that the team could use to make that experience even faster such as server side rendering and replacing the React framework with something smaller, like Preact.
Either way this …
I often see a lot of questions from folks asking about fallbacks in CSS Grid and how we can design for browsers that just don’t support these new-fangled techniques yet. But from now on I’ll be sending them this post by HJ Chen. It digs into how we can use
@supports and how we ought to ensure that our layouts don’t break in any browser.
Basic grid layout with fallbacks using feature queries is a post from CSS-Tricks