As a tribute to Eric Meyer’s daughter Rebecca, the named colour rebeccapurple has been accepted into the CSS spec. Rebecca passed away on her sixth birthday recently.
Relative Unit Based Media Queries
Based on the standard browser font-size of 16px, the following media query to have an affect on screens 160 pixels wide and up.
@media only screen and ( min-width : 10em ) {
html {
background-color: #ddd;
}
}
Now, I would expect adding the following code would cause the media query above to have an affect on screens 320 pixels wide and up.
html {
font-size: 2em;
}
Remembering the 90s
John Allsopp had a rant on Twitter recently – as is his want from time to time – he was remarking on vertical rhythm tools around the web and his point boils down to:
why do all the vertical rhythm tools for web design use pixels everywhere? I wonder if anyone paid attention at all in class.
— John Allsopp (@johnallsopp) June 6, 2014
This speaks to me of a wider problem; web developers are forgetting the 90s.
Automatically generate Pattern Lab on git pull
Pattern libraries are becoming better known as sites such as the BBC and A List Apart release their pattern libraries publicly. For the uninitiated, a pattern library is a collection of elements used on a web site. They define everything from the base font to page layouts.
Brad Frost and Dave Olsen’s Pattern Lab is one tool for creating a style guide. As the demo shows, it combines both a style guide and a method for testing the responsiveness of a web site.
When creating a style guide using Pattern Lab for your site, it’s necessary to store the /source directory in your Git repo.
Deciding to be wrong
When writing code, you don’t make a considered decision about every line you write. Much of it is instinct, you’re following your standard practises.
Standard practises are based on past decisions. As technology has improved, these decisions may no longer be valid. Without care, it’s easy to become stuck in a cycle of producing outdated code.
Moving on
After a little over two years at Floate Design Partners, I have decided that it is time to move on. On March 24, I start at Exari in the role of UI/UX Engineer. This represents a move from client services into product development.
Exari makes document assembly software that allows companies writing similar documents frequently, to streamline the process. The demo for non disclosure agreements on the Exari site will give you a good feel for the software.
Conditional IE classes
The HTML5 Boilerplate popularised the html tag conditional classes pattern. This pattern is usually some variation of:
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Optimising the Typekit Code
The Typekit kit editor provides two versions of the embed code, the default version blocks rendering and the asynchronous version which can produce a flash of unstyled content (FOUC).
In the case of Typekit, I prefer the FOUC over slowing down rendering. The asynchronous code also offers the advantage of your site staying online should Typekit go down.
I decided to spend a little time optimising the asynchronous code Typekit provides.
Avoiding the FOUC
For several years I’ve used Paul Irish’s technique for avoiding the FOUC caused by JavaScript kicking in. I’ve recently changed to a slightly improved version.
Specificity, SMACSS and WordPress
At the June WordPress Melbourne Meetup, I spoke about CSS Specificity, SMACSS and WordPress. I had a great time, the video and slides are below.