Front-End Developers Are Information Architects Too ◆ 24 ways

Been catching up (finally) on 2016’s 24 Ways posts. I really dig this one by Francis Storr. It touches on all the geekery I love about being a front-end dev. Things like the importance of semantic markup, figuring out the appropriate ways to code up certain patterns, and how all of this and other properly-implemented IA concepts can benefit accessibility on projects.

Accessibility Whack-A-Mole · An A List Apart Article

“How do we deal with accessibility needs for which there are no definitive answers?” asks Eleanor Ratliff. Sometimes we arrive at a fix that helps one group of people only to find that our solution undermines another group’s experience. Through the prism of typeface choice, Ratliff relates how she and her team tackled the problem of accessibility whack-a-mole for a rebranding project.

Man, accessibility can be tricky. But I think that’s one of the reasons why I love studying it so much. This is a good exploration into some of the gray areas of implementing accessible design and some of the trade-offs that must be considered.

Mac-like Special Characters in Windows, From the Notebook of Aaron Gustafson

Ever since starting my job at WVU and being required to use a Windows PC, I’ve hated not having the keyboard shortcuts for things like em dashes (—), en dashes (–), and smart quotes (“, ”, ‘, ’). This post from Aaron Gustafson introduces a Windows utility—called AutoHotkey—that allows for keyboard mappings that closely resemble those used on Macs for special characters. Nice!

CSS Architecture for Design Systems | Brad Frost

This a really cool deep-dive into how Brad Frost constructs a design system for his CSS. I’ve been following pretty much the same methodology he outlines at the end of the post in regards to utilizing Sass functionality and BEM for class name construction.

Signs You May Be A Designer, Not Just A Coder | HeydonWorks

I think I can relate to most of these eight points Heydon Pickering lists for realizing you’re likely not (just) a coder, but a designer. Design does not necessarily have to deal directly with the visual aspects of a thing. It’s how the thing works. And if you think about how the thing works, you’re probably a designer, as well as probably dozens of other virtually meaningless labels.

Thoughts On Smartphone Emergency Access

Joni Trythall takes a close look at the emergency use cases on smart phones:

The current state of making emergency calls on smartphones is unacceptably faulty and incohesive. In a moment when we need good design the most it can likely fail many of us as it is, so let’s take a quick look at some specific reasons I feel this needs more attention.

After reading the first few paragraphs of this post, I paused and reached for my iPhone, which is now running iOS 10. I knew on previous versions of the OS, I had come across the option to quickly access emergency features: the dialpad and a way to view my personal medical details. For the life of me, though, I couldn’t remember how or where. In fact, I still can’t remember. And—more alarming—I had no idea where they were in the current OS.

I think the problem with my setup lies in the fact that iOS 10 puts the emergency button (link?) on the keypad lock screen, something I rarely see on my iPhone. I have Touch ID enabled, and—unless I just recently rebooted the phone, or my fingers are damp or dirty and my prints don’t register properly—I’m hardly ever presented with this interface.

Anyway, I think Joni makes a lot of good points here, and I hope that maybe this could spur further discussions on how developers could better present these features to users.

Also, I really enjoy a good critique of common interface patterns, especially when those interfaces could have life-or-death consequences.

Why I'm Excited About Native CSS Variables — Philip Walton

I have to admit, I was one of many people who were skeptical on the concept of CSS variables (err, custom properties). This blog post has me beginning to see the practical applications for this.

(Link ℅ Charlotte Jackson)

TIL: Petrichor, or the smell of rain

Today, via Jeremy Keith, I learned of the word petrichor:

Petrichor…is the earthy scent produced when rain falls on dry soil.


I never knew such a word existed to describe that wonderful smell.

Grid layout is a much needed step-change for CSS | Matt Hinchliffe, Front-End Developer

I feel like I will be referring back to this demo and exercise pretty frequently until I get a solid grip on CSS Grids.

Grid layout has the chance to deliver a huge shift in the way we rationalise layout systems for the web. Even when approaching relatively simple components like the one above we can drastically reduce the complexity of the markup and styles currently required.

Accessible SVGs in High Contrast Mode | CSS-Tricks

I had honestly not heard of or considered Windows’s high contrast mode until I saw a talk by Adrian Roselli at Abstractions last month.

This CSS-Tricks article by Eric Bailey does a great job explaining what high contrast mode is and why it’s important for us to keep in mind when doing accessibility checks on our projects. Then, Eric teaches us some tricks for using CSS media queries to tweak the coloring of not only your SVGs (if they are embedded a certain way) and by using some CSS filters for other image types.