Luis Cameroon

Reading List #10

2013-11-21T05:26:00.000-08:00

Articles

Building Web Apps With Yeoman And Polymer [html5rocks.com]
Introducing a Yeoman Generator For Full-stack Angular + Express Development [tylerHenkel.com]
Column: A Yeoman Generator Built for Hackathons [movefastbreakthings.ca]
Working With Angular, Rails and Yeoman [rockyj.in]
Building Chrome Apps With Yeoman [alolo.co]
Migration to Jekyll: My Journey to Understanding Yeoman [davidCalhoun.me]
CoffeeScript Source Maps With Yeoman [mikeFowler.me]
Why I Generate My Apps With Yeoman [danRistic.com]
An Interview With The Creator Of The Hoodie Generator For Yeoman [hood.ie]
Articles In The Wiki [github.com/yeoman]

Slides

Automating Development Workflow [html5rocks.com]
Front-end Tooling Workflows [speakerdeck.com/dmosher]
Modern Workflows For Modern WebApps [slid.es/passy]

Videos

Introduction to the MEAN Stack with Yeoman, Grunt and Bower [youtube.com]
'yo dude’ a talk on Yeoman and Cordova from IBM [youtube.com]
IBM Worklight generators for Yeoman Part 1, Part 2, Part 3 [youtube.com]
Intro to Yeoman sub-generators [youtube.com]
Getting started with Yeoman and generator-webapp [youtube.com]
Yeoman generator for Twitter Bootstrap [youtube.com]

Generator updates

Bones – a Yeoman generator for basic web projects [github.com/matt-bailey]
Generator MEAN – scaffolding for Mongo, Express, Angular and Node [github.com/jrcryer]
Generator for Cordova [github.com/btholt]
Genesis Wordpress – WordPress + Vagrant + Multi-env scaffolding [github.com/genesis]
Generator for Bespoke.js [github.com/markdagleish]
Generator for Reveal [github.com/slara]
Backbone generator 0.2.1 is now out [github.com/yeoman]
AngularJS generator v0.5.0/v0.5.1 out with bugfixes, better livereloading, automatically wire up selected Angular modules [github.com/yeoman]
Another Yeoman generator for Backbone and RequireJS [github.com/reintroducing]

Reading List #9

2013-09-15T20:28:00.000-07:00

Is HTML Relevant in the Age of Web Apps? – edited transcript of John Allsopp’s Full Frontal 2012 talk

SVG Fallbacks by Chris Coyier. Good comments.

Blink: Add support for the object-fit CSS property by Opera’s Morten Stenshorne

Around the World Wide Web in Eighty Minutes – a fun look at internationalisation capabilities on the Web by Richard Ishida

Font Hacking – “primer on extracting, deconstructing, altering and replacing letterforms”. With good jokes.

W3C Launches Web and Mobile Interest Group – “that is chartered to accelerate the development of Web technology so that it becomes a compelling platform for mobile applications and the obvious choice for cross platform development” starring Jo Rabin (John Steed), Marcos Caceras (Mike Gambit), Natasha Rooney (Purdey).

Responsive Web Design is Solid Gold by Jason Grigsby – “I’m now firmly on the side that there is no mobile context. We have abundant data that shows that people use their mobile devices indoors and for a wide variety of things.”

How easy is it to hack JavaScript in a browser?

Daala video compression “Daala is the code-name for a new video compression technology.” Hooray! Another video format.

Semantic data markup: Microdata, yea nor nay? (warning: Google+)

How well do the HTML 5 replacements for table summary attribute work with current Screen Readers and Browsers?

W3C: Splash screen for native web apps

Proposed update to element definition (see my article On citing quotations. Again. for more).

Hixie on script pre-loading

“Fuck You” – Brad Frost on deliberately excluding groups of people from the Web

Mobile operators altering (and breaking) web content by Matthew Somerville

Resource Priorities – spec including groovy thangs like < img lazyload > (partially implemented in IE11 Preview) and < img postpone >

Enabling new types of web user experiences – guest W3C blog post by Scott Jenson, a well-known UX designer and creative director

port.js is a Chrome-(and-Opera!)–to–Safari porting library for extensions

proposal: replace navigator.mozPay() with primitives – Mozilla’s trying to make a low-level API for payments

Executive Class – calculating the Myers-Briggs personality type of the London Underground’s Waterloo & City Line

The Great Language Game Of thousands of languages spoken in the world, here are seventy. How many can you distinguish between? (my score: 800)

Reading List #8

2013-08-01T22:03:00.003-07:00

Web Standards

Does Flexbox Have a Performance Problem? (TL;DR old flexbox does)

uCSS crawls your website to find unused CSS, duplicate selectors (you can exclude pages/ subdomains)

From microphone to .WAV with: getUserMedia and Web Audio

List of Web Accessibility-Related Litigation and Settlements

On Mobile, Data URIs are 6x Slower than Source Linking (New Research)

AXR Project – @veosotano’s proposed replacement web stack – XML + HSS (CSS-like with extras) and 1 rendering engine to be used by all browsers (via a plugin for now)

Reading List #7

2013-07-16T23:50:00.004-07:00

Draft BBC Mobile Accessibility Standards and Guidelines – by Henny Swan
MQtest.io – A simple tool to help identify which media queries your device responds to
JavaScript Cookbook is a site for common JavaScript problems and solutions
Changes in rankings of smartphone search results – Google will spank you if you have faulty redirects (“when a desktop page redirects smartphone users to an irrelevant page on the smartphone-optimized website”) or App download interstitials
Grumpicon for SVG icons/ illustrations with PNG fallback for everbrown browsers
“Lots has happened in the world of Responsive Images since I wrote Mo’ Pixels, Mo’ Problems. And by lots, I mean nothing at all.” – a follow-up post to a 2012 article for A List Apart
W3C Pointer Events Gains Further Web Momentum with Patch For Mozilla Firefox – Micosoft also intends to implement for Blink
The problem with the ‘debate’ over online porn is the two sides aren’t even speaking the same language says the Daily Telegraph, showing that censorship proposals by Claire Perry aren’t based on fact, or understanding of the mechanics of the web
Stop Doing Internet Wrong commands Scott Hanselman
Setting a custom ghost image when using HTML5 drag and drop – vile hackery by @sil (for which I’m partially to blame)
Progressive enhancement is still important says Jake Archibald
Yehuda Katz: The Future of the Client-Side Web – 30 min video, well worth watching
Why JavaScript? – why invest loads of time and effort making JS fit the needs of the modern web, by another reformist TAG member, Alex Russell
HTML5 Doctor: The
main element
Testing the web – practical instructions by HTML5 Dr @boblet on how *you* can help interop by writing reftests
Introducing Web Animations – harmonising (some of) SVG and CSS animations. Coming soon in Blink, Firefox and Polyfill
Opt Out of Klout – Now! – “A number on a screen doesn’t control your destiny; you do” says Terence Eden
Anorak corner: Who designed the “broken image” icons? (Quora link, sorry mobile users)

A List of Programming Screencast Series

2013-07-16T23:23:00.001-07:00

Railscasts - Ruby on Rails
Destroy all Software - Ruby, Python, Unix, software design.
Code School - Ruby, Rails, iOS, JavaScript, HTML/CSS, etc.
Clean Coders - software design and discipline
PeepCode - Long-form videos on many different languages and technologies
NSScreencast - weekly bite-sized screencasts on iOS development.
Minimalist Programming - Haskell
Neckbeard Republic - Python
Backbone Rails - Rails and Backbone.js
Build Podcast - a different tool/tech every episode.
Vimcasts
Emacs Rocks
Hack Emacs
MetaCasts - EmberJS, Ruby, RubyMotion, JavaScript, etc.
Ember 101 - EmberJS
WatchMeCode - JavaScript
Must Hack - Ruby, UNIX
Programming Tutorials from William Byrd - Scheme, functional programming concepts
Egghead - AngularJS
Tekpub - .NET, Ruby, JavaScript, and more
Frontend Masters - HTML5, CSS3, JavaScript
Treehouse - Web, Adnroid, iOS, Ruby on Rails, PHP
EventedMind - NodeJS, Meteor
dot enter - d3
Let’s Code - Test-Driven JavaScript
Pluralsight - “Hardcore developer training”
Motioncasts - RubyMotion
Learning iOS Development with Azam Sharp
RubyTapas – Ruby, TDD, and OOP
EmberCasts – EmberJS

Reading List #6

2013-06-05T06:58:00.001-07:00

More than half of humanity lives within this circle – see their mobile usage and stats in mobile web atlas of Asia Pacific (July 2012)
Fighting the Space Between Inline Block Elements
Financial Times: ‘There is no drawback to working in HTML5′ – also interesting concept of “finite read”
The User is Drunk – design like the user is drunk. 5 min video.
Notes on BBC News responsive images by BBC devs
You Can’t Detect A Touchscreen – also see Modernizr issue touch class placed on all browers on windows 8 on a regualr pc with no touch support
The HTML5 outline algorithm and JAWS by Gez Lemon. So read it.
Hot in web standards: March/April 2013 by Lea Verou
Web Wishes – Unofficial Draft – Web Intents/ Web Activities part #694
Facebook Comes to Google Glass – rejoice!
IE10 and Beyond: Unifying Touch and Mouse Made Easy with Pointer Events also -ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit
Web Payments Community Group at W3C
Best Practices: Designing Touch Tablet Experiences for Preschoolers (PDF) – by Sesame Street
Facebook to Firefox: Please add WebP image support (More about WebP)
Last week in WebKit: Out of the Shadows – “Antti began ripping out parts of the Shadow DOM implementation.”
Perspectives on Encrypted Media Extension Reaching First Public Working Draft – fight about DRM at W3C. There appear to be entrenched positions, surprisingly.

Misc

fartscroll.js – You want fart noises as you scroll? We’ve got you covered.

Reading List #5

2013-04-27T23:38:00.001-07:00

Web Standards

HTML5 VIDEO bytes on iOS Mobile devices by Steve Souders: “Mobile devices ignore all values of PRELOAD in order to avoid high data plan costs, and instead only download the video when the user initiates playback … However, my testing shows that iOS downloads up to 298K of video data, resulting in unexpected costs to users.”
blink-dev: Intent to implement lazy-block layout – “Developers can page in new content while the user is scrolling without fear of making the app slow as well … Our demo has a 4 second layout that’s reduced to 32ms with lazy-block.”
Common Misconceptions About Touch – thoroughly researched, lots of references
ptb/flexgrid: a flexbox-based CSS grid in 3.6k – “The flexbox layout is supported on Chrome, all versions of iOS, Safari 3+, IE 10+, Opera 12.10+, and Firefox 22+. Other browsers get the fluid Bootstrap 3 layout, except Internet Explorer 6 and 7 which use a fixed layout.”
4 new articles about working with HTML markup in Arabic, Hebrew and Other Right-to-left Scripts by W3CInternationalisation maestro, Richard Ishida
“Right click and save as” needs to go away – just use the HTML5 download attribute users can just click the link to save it
Thank God We Have A Specification! – An excellent article by @rodneyrehm on the CSS transitions mess (how did we get here?)
Testing WebP compression for app icons – “Looking at the ratio of WebP file sizes to PNG file sizes ratio, we can see WebP constantly provides better results”
Talking of webP, Blink-dev discussion on implementing <picture> which would let devs send webP content images to capable browsers, with fallbacks.
Don’t let the myths fool you: the W3C’s plan for DRM in HTML5 is a betrayal to all Web users.
DRM at the W3C? Not such a Bad Idea – John Foliot on “The Unpopular Position”
Stop standardizing HTML says Simon St. Laurent. It’s XML again, but without draconian parsing or schemas. Essentially, every web page has its own private vocabulary.

Industry

Anarchists: We need to talk about Facebook
It’s about time: RuneScape dumps Java for HTML5 – “With more than 200 million RuneScape accounts and thousands online at the same time, RuneScape is a big reason for a lot of people not to uninstall Java”
Happy 20th birthday to Mosaic 1.0 browser

Misc

RRRRRRRROLL_gif

CSS3 Transitions: Thank God We Have A Specification!

2013-04-27T22:42:00.001-07:00

CSS3 Transitions: Thank God We Have A Specification!:

This article is packed with a number of quirks and issues you should be aware of when working with CSS3 transitions. Please note that I’m not showing any workarounds or giving advice on how to circumvent the issues discussed. Alex MacCaw has already written a very insightful and thorough article on “All You Need to Know About CSS Transitions.”
Whereas Alex wrote about achieving particular effects, I’m going to talk about the technical background, especially the JavaScript-facing side. Pitfalls — this article is all about pitfalls.

Separation of concerns is nothing new — we’ve been using template engines for years to accomplish exactly that, separating our HTML from whatever scripting language we were using. A website has three major concerns: structure (HTML), layout and style (CSS), and behavior (JavaScript). CSS crossed the line and became behavioral quite a while ago, but that’s a whole different discussion.
A couple of weeks ago, I was tasked with developing a JavaScript module that would allow for the use of CSS transitions in a way that the JavaScript side would know nothing about the transitions taking place. The actual problem is the asynchronousity of transitions. After writing a bunch of tests, I gave up on the task. It cannot be done with a reasonable amount of code and initialization time. My test results are what this article is all about.
Before getting started with transitions, we have to talk about a little, frequently used, helper function. getComputedStyle() is a JavaScript method that returns a CSS property’s value as the browser interprets it. This API goes back to “DOM Level 2: getComputedStyle()” and “CSS Level 2: Computed Values” — which basically specify that a computed style is an absolute value.
This is fine for properties such as font-size, which take only one argument and are reliably converted to pixel values. However, it doesn’t cover how browsers should handle shorthand properties, such as margin — some browsers return nothing, others something semi-useful. Then there are properties with different but equivalent values to consider, such as font-weight’s bold and 700. WebKit also has a bug that extracts the computed value of properties from pseudo-elements.
The quirks described here were identified in January 2013 using Firefox 18 (Gecko), Opera 12.12 (Presto), Internet Explorer 10 (Trident), Safari 6.0.2 (WebKit), Chrome 23 (WebKit), as well as Gecko’s and WebKit’s nightly build channels.
Without further ado, let’s dive into the specifications and implementations, a world riddled with misconceptions. Please note that in order to be concise, I’ve omitted vendor prefixes from the examples.

Not knowing is difficult to handle. It’s easier to assume.
– Dr. Axel Rauschmayer

… But assumptions are often wrong. I discovered the information in this article by creating a CSS3 Transitions Test Suite.

Specifying A Transition

Besides the shorthand transition property, the CSS3 transition specification defines the following four CSS properties for specifying an animated change of state:

transition-property,
transition-duration,
transition-delay,
transition-timing-function.

CSS Properties to Transition

The transition-property property defines the property (or properties) to animate. The default is all, meaning that all properties a browser can transition will be animated on change (if there’s a transition-duration greater than 0s). The property accepts one value or a list of comma-separated values (like all other transition-* properties).
The specification states that a browser should accept and preserve any property it doesn’t recognize. So, the following example would still run a transition on padding lasting 2 seconds:


transition-property: foobar, padding; 
transition-duration: 1s, 2s;

Contrary to the specification, WebKit parses the above to transition-property: all. Firefox and Opera parse it to transition-property: all, padding.

Duration of a Transition

The transition-duration property defines the amount of time a transition should take to get from the initial state to the target state. It accepts a <time> value in seconds or milliseconds (for example, 2.3s and 2300ms both specify 2.3 seconds).
While the specification makes it clear that values must be a positive number, Opera also accepts -5s — at least for getComputedStyle(). Opera and Internet Explorer (IE) do not accept values lower than 10ms, although the specification mentions no such limitation. In all fairness, you wouldn’t notice a transition lasting 9 milliseconds anyways. WebKit (except for the current WebKit nightly) has a bug in its getComputedStyle() implementation, returning values such as 0.009999999776482582s instead of 0.01s. At least all browsers agree on returning second-based values.

Delay of a Transition

The transition-delay property defines the time to wait before executing a transition, also using <time> values. The delay may be a negative value, which will start the transition immediately and make it appear as though the transition had started at the given offset in time — essentially starting with a jump.
As with transition-duration, IE and Opera don’t accept values between -10ms and 10ms. WebKit’s floating point issues appear here, too.

Timing Functions

The transition-timing-function property defines the mathematical function used to calculate a property’s value at time t. There are three basic types: cubic-bezier(x1, y1, x2, y2), step(<number>, start|end), and keywords that map to predefined cubic bezier curves. Most likely, you already know the keywords linear, ease, ease-in, ease-out and ease-in-out. The math behind cubic beziers gets ridiculously unimportant when using Lea Verou’s charming little Cubic Bezier Editor. While cubic bezier curves make smooth transitions, the step() functions don’t. They instead jump to the next value (i.e. the next step) at a regular interval. This allows for frame-by-frame animations; see “Pure CSS3 Typing Animation With steps()” for an example.
The computed value of linear is usually represented as cubic-bezier(0, 0, 1, 1) — except for WebKit, which actually returns linear. But not to worry: WebKit will still return cubic-bezier(0.25, 0.1, 0.25, 1) instead of ease. The current WebKit nightly returns the keyword for all defined keywords, though. Looking on the bright side, in a couple of months WebKit won’t be inconsistent with itself — only with the rest of the browser world.
The specification stipulates that the x values must be between 0 and 1, while the y values may exceed that range. Contrary to the specification, WebKit allows x to exceed the bounds, at least computationally. At the time of writing, the Android browser (version 4.0) mixes up ranges for x and y, essentially disallowing “bounce” effects.

When A Transition Is Complete

I already mentioned that CSS transitions run asynchronously. The specification provides the TransitionEnd event to allow JavaScript to synchronize with the end of a transition. Sadly, the specification isn’t very specific about this event. In fact, it simply states that an event is to be fired for every property that has undergone a transition. If you need a single word to describe the situation, “nightmare” isn’t far off.
While the specification says that shorthand properties (such as padding) should run transitions for all properties that it covers (padding-top, padding-right, etc.), it doesn’t say which property should be named in a TransitionEnd event. While Gecko, Trident and Presto agree on triggering events for the longhand sub-properties (such as padding-top), even if a transition was defined for a shorthand property (such as padding), WebKit would take the opportunity to screw things up. WebKit would trigger an event for padding if (and only if) you specified transition-property: padding, but transition-property: all would trigger the event for padding-left et al. For some reason, iPhone 6.0.1’s Safari browser might also triggers events for font-size and line-height when padding is being transitioned. Confused yet?


.example {
  padding: 1px;
  transition-property: padding;
  transition-duration: 1s;
}

.example:hover {
  padding: 10px;
}

The above CSS will trigger different TransitionEnd events across browsers:

Gecko, Trident, Presto: padding-top, padding-right, padding-bottom, padding-left
WebKit: padding


.example {
  padding: 1px;
  transition-property: all, padding;
  transition-duration: 1s;
}

.example:hover {
  padding: 10px;
}

The CSS above will trigger different TransitionEnd events across browsers:

Gecko, Trident, Presto, WebKit: padding-top, padding-right, padding-bottom, padding-left
Safari 6.0.1 on iPhone (not iPad, mind you!): padding-top, padding-right, padding-bottom, padding-left, font-size, line-height

I said that you could specify a negative transition-delay to “jumpstart” your transition. But what happens for transition-duration: 1s; transition-delay: -1s;? Gecko and WebKit immediately jump to the target value and trigger an event. Trident and Presto won’t trigger any events.
That floating point issue that WebKit experiences in getComputedStyle() is also present in TransitionEnd.elapsedTime — consistently in all browsers. Math.round(event.elapsedTime * 1000) / 1000 will “fix” that for you.
WebKit and IE have implemented an unspecified extension to background-position that causes them to trigger TransitionEnd events for background-position-x and background-position-y, instead of background-position.
So, even if you knew that a transition was taking place, you wouldn’t be able to rely on the TransitionEnd.propertyName that you’re given. While you could write loads of JavaScript to equalize the behavior, you wouldn’t be able to do this in a future-proof way without doing proper feature detection for every single property. And this could include properties you might not even know are animatable.

Transitionable Properties

The specification lists a number of CSS properties that a browser is supposed to support animated transition for. This list contains properties of CSS2.1. Any of the newer properties will be marked as animatable in their respective specifications — as order of the Flexible Box Layout shows.
The property’s value type is an important factor. The property margin-top accepts <length> and <percentage> values, but according to the list of transitionable CSS properties, only <length> is to be animated. But that didn’t keep browser vendors from implementing transitions for <percentage> values anyway. The word-spacing property is a different story, though. The specification includes <percentage> values, but at the time of writing, no browser is able to animate that.
Ignoring the (inherently unreliable) TransitionEnd events, a property is transitioned from value A to value B if its getComputedStyle() value is different from A and B at a given time during the transition. Because there is no such thing as a “CSS property value changed” event, you’re left with polling the DOM. setTimeout()’s resolution is not good enough to do this for fast transitions (a duration of less than a few hundred milliseconds). requestAnimationFrame() is your friend for this. The browser will call you before it repaints to screen, allowing you to grab a couple of intermediate values during transitions. Except for Opera, all engines have this feature already.
Instead of bloating this article with a full compatibility table, I’ve sent my results to Oli Studholme (@boblet), who has updated his list of “CSS Animatable Properties” accordingly.

Priority of Transition Properties

The specification on the transition-property property states that we’re allowed to define a property multiple times:

If a property is specified multiple times in the value of ‘transition-property’ (either on its own, via a shorthand that contains it, or via the ‘all’ value), then the transition that starts uses the duration, delay, and timing function at the index corresponding to the last item in the value of ‘transition-property’ that calls for animating that property.

So, we can make padding transition for 1 second, while making padding-left take 2 seconds; or define a default transition style using transition-property: all and overwrite that for particular properties.
In Firefox and IE, this works fine. Opera mixes up the priority order, though. Instead of simply using the last applicable property in the list, it treats padding-left as more specific than padding and all.
The real problem is WebKit. It’s somehow managed to execute a transition multiple times if a property is specified multiple times. To really freak out WebKit, try running a transition for transition-property: padding, padding-left with the very small transition-duration: 0.1s (warning: this is not a good idea for epileptics). WebKit will render the transition at least twice. But the real beauty is the TransitionEnd events, of which you could receive up to hundreds for a single transition.

Transitioning From And To `auto`

The CSS property value auto translates to “Dear browser, please calculate some reasonable value for this.” Paragraphs (<p>) and any block-level elements will be as wide as their parent if they have width: auto. There are times when you’ll change from width: auto to a specific width — and want to transition that change. The specification neither enforces nor denies the use of auto values for transitionable properties.
Firefox, IE and Opera cannot transition from or to auto values. IE makes a little exception for z-index, but that’s it. WebKit, on the other hand, is capable of transitioning from and to pretty much any CSS property that accepts the auto value. WebKit doesn’t like clip too much; for that property, it will only trigger a TransitionEnd event, without generating or showing any intermediate values or states during the transition.
For the other properties, such as width and height, WebKit’s behavior is not quite what you’d expect. If width: auto translated to a calculated width of 300px and you transitioned that to 100px, then your transition would not shrink from 300 to 100 pixels. Instead, it would grow from 0 to 100 pixels.
For a full compatibility table, have a look at “CSS Animatable Properties.”

Implicit Transitions

An “implicit transition” happens when a change to one property causes another property to be transitioned — or if you change a property on a parent element and cause a child to transition either the inherited property or a dependent property. Confused? Consider font-size: 18px; padding: 2em; — the padding is calculated as 2 × font-size, because that’s what em does, giving us 36 pixels.
There are various relative value types: <percentage>, <length>, em, rem, vh, vw, etc. Using a relative value, such as padding: 2em, makes the browser recalculate the property’s getComputedValue() every time its depending value (such as font-size) changes. That in turn triggers a transition for padding because the computed style has changed. This transition is considered to be “implicit” because the padding property was not modified explicitly.
Most browsers run these implicit transitions. The exception is IE 10, which runs them only for the line-height property. WebKit runs implicit transitions for all applicable properties except vertical-align. Besides font-relative property values, there are width-relative property values (usually <percentage>), viewport-relative property values (such as vh and vw), default initial values (such as column-gap: 1em in Opera), and then currentColor. All of these might — or might not — trigger implicit transitions.
In Firefox, these implicit transitions get particularly interesting when both the depending and the dependent properties are transitioned but their transition-duration or transition-delay do not match. While WebKit and Opera produce transitions that make sense visually, Firefox garbles things a bit. In IE, this is a non-issue because it doesn’t do implicit transitions.
Don’t forget about inheritance within the cascade. A font-size on a DOM element will be inherited by its children, as long as it’s not overwritten, potentially causing implicit transitions.

Transitions And Pseudo-Elements

Pseudo-elements (:before and :after) were introduced with CSS2 generated content. Read “Learning to Use the :before and :after Pseudo-Elements in CSS” if you’re not yet familiar with generated content. While CSS3 content defines additional pseudo-elements (::alternate, ::outside), they are not (yet) supported. All animatable CSS properties should also be animatable for pseudo-elements.
Firefox and IE 10 will transition properties on pseudo-elements. Opera, Chrome and Safari will not. WebKit added support in January 2013 — which you can already check out in WebKit nightly and Chrome Canary.
Transitions of generated content bring their own set of funky issues. TransitionEnd events aren’t fired at all. At some point in the future, they’re supposed to be triggered on the owner element and provide their pseudo-element through TransitionEnd.pseudoElement. But even the “Transition Events” section of the “CSS Transitions” editor’s draft doesn’t specify that properly yet.
There was a time when we would change the value of the content property so that IE 8 would re-render that element in certain circumstances (like when entering a :hover state). It turns out that this fix for old IE interferes with this ability for all other browsers. So, when trying to transition a property on a pseudo-element, make sure the content is not changed.
IE 10 will not run a transition for a pseudo-element’s :hover state if the owner element doesn’t have a :hover state as well:


.some-selector:before {
  content: "hello";
  color: red;
  transition: all 1s linear 0s;
}

.some-selector:hover:before {
  color: green;
}
/* This next rule is necessary for IE 10 to transition :before on hover */
.some-selector:hover {}

The weird thing about this issue isn’t that you need a (possibly empty) :hover state on the owner element. It’s that if you don’t have one, IE 10 will interpret the :hover as :active (i.e. active when you mousedown on the element). The even weirder part is that the :active state persists even after mouseup and is removed only by another click on the document.

Background Tabs

At the time of writing, IE 10 is the only browser that responds to a tab being in the background or foreground. While it will finish a running transition if the tab is pushed to the background, it won’t start any new transitions there. IE 10 will wait until the tab is pulled into the foreground before starting any new transitions. Fortunately, IE 10 already supports the Page Visibility API, allowing developers to respond to this behavior.
We can expect similar things to happen with other browsers as they continue putting background tabs to sleep.

“Invisible” Elements

So, are transitions executed for DOM elements that are not attached to the DOM? Nope, not a single browser does that — why should they? Well, then, what about hidden elements? Most browsers have figured out that there’s no need to run a transition on an invisible (i.e. not painted) element. Opera thinks differently about this — it’ll run a transition regardless of whether it is painted or not.

Transitioning Before The DOM Is Ready?

The DOMContentLoaded event is triggered when the document leaves parsing mode. If you’re into jQuery, we’re talking about jQuery.ready() right now. Transitions can be run before this event happens.

Rendering Quirks

The issues I’ve described up to this point were found by testing against the specification. The tests were run automatically. But as it turns out, quite a few more problems are visible to the eye. The following quirks have been found by various other developers and could affect your meddling with transitions just as much.
At this time, transitioning a background from gradient to gradient is not possible. Transitioning from gradient to solid color is possible — with a big caveat. If a gradient is in play, then the color transition will happen from white to the target color, appearing to quickly flash white at the beginning of the transition. This can be observed in all current browsers.
Firefox seems to be using a different algorithm for rendering (or smoothing) images as they’re being animated (see an example). Apparently, Gecko sacrifies quality for performance during animation. Note that this occurs if a low enough transform: scale() is in play.
Firefox won’t properly animate from a:visited to a:hover or vice versa. Instead, it will jump from a:visited to a:link and then transition to a:hover, as you can see in this example. This is mentioned somewhat in “Privacy and the :visited Selector” on the Mozilla Developer Network. While IE 10 agrees with Chrome, Safari and Opera on the proper transition, it also runs the transition from a:link to a:visited on page load.
Transitioning multiple properties is not synchronized in Firefox and Webkit. You can see in this example how making the border smaller by the same amount that the padding increases (and vice versa) causes the following content to shake a bit. IE 10 and Opera get this right.
Firefox won’t animate an element’s properties if one of its parent’s position is changed, as you can see. Webkit, Opera and IE 10 behave correctly.

Recommendations For The Specification

Having read the specification from top to bottom and actually tested all of the features, I think a few changes would help:

Introduce a TransitionsEnd (notice the plural), triggered once all transitions for an element have completed. It could provide a list of properties that have been animated — but I don’t see the use case for knowing what has transitioned, as long as I’m informed when all animations are done.
Introduce a TransitionStart event, triggered for every property about to be transitioned. Because DOM events don’t come cheap and the JavaScript event loop and the rendering thread are not necessarily blocking each other, a single event TransitionsStart (there is that plural again) might be the better solution. I don’t see why I should be able to cancel the event, so this would be a “fire and forget” kind of thing.
Make it clear what TransitionEnd is supposed to be triggered for. That padding versus padding-left issue in WebKit is rather annoying.
Clearly specify how “implicit transitions,” such as line-height: 1em for transition-property: font-size, are to be handled.
Add a ::transitioning pseudo-class that allows you to define pointer-events: none to prevent accidental hover states (among other things). The trick here is to prevent the application of styles that themselves would trigger a new transition or that would alter an already running transition.

In addition to these suggestions, we should be able to accomplish a number of common (simple) things without having to throw a lot of JavaScript at the problem:

Every once in a while, you’ll want to completely mute all transitions — for example, because you’re changing the layout and need to calculate dimensions and positions before unleashing your beautiful transitions upon the visitor.
Sometimes you’ll want to remove an object from the DOM and want that to be animated. Right now, you’d add a class, wait for the TransitionEnd event and then remove the element.
Just as with removing things, you’ll want to add a new element and animate its appearance. Right now, you have to insert the element, set some “invisible style,” force a repaint and then revert to the new element’s actual style.
Reordering, hiding and showing elements are common for any Web application. Giving that task a little style currently requires us to run utilities such as Isotope. A vanilla CSS solution could shave off some bytes.

Use The `delay`, Luke!

Imagine a number of elements packed together tightly. Imagine that the styles of those elements change on hover. Imagine moving your cursor (moderately quickly) over that group. What happens? Exactly: you’ll see the styles of those elements flash.
By adding a relatively short delay to your transitions, you can mitigate that effect; 20 milliseconds is undetectable to the human eye, but it’s enough for the mouse cursor to pass over small elements. The transitions won’t appear to lag because of this, and the visual distraction you might have caused just disappears. Simple trick, I know.

Conclusion

Be very careful when using transition-property: all. You will get TransitionEnd events for properties that you didn’t expect to ever transition.
Be careful when using shorthand properties, because the number of triggered events varies between browsers.
Opera and IE don’t trigger events when a negative delay cancels out the duration.
WebKit has real issues with the priority of properties such as transition-property: margin, margin-left. Avoid this for now.
IE doesn’t support implicit transitions — for example, triggered for padding: 2em when font-size changes.
Firefox and Opera cannot parse transition-property: all, width.
Opera mixes up the priority of properties.
Transitions on pseudo-elements do not trigger TransitionEnd events.
IE 10 has a weird :hover bug when transitioning pseudo-elements.
The specification leaves a lot of room for improvement.

Reading List #4

2013-04-08T06:26:00.001-07:00

HTML5, Responsive, NEWT

Opera’s WebKit patches – enhancements to WebKit’s CSS support and some housekeeping
Interview with Steve Faulkner
Design From the Inside Out With CSS Min-Content the little-known CSS min-content value
Open Web Platform Daily Digest
“Browser Versions Are Dead”- One hour talk by @getify on why feature detection is the only sensible development methodology
Media queries for multichannel audio? – suggestion by Netflix: “This would save network bandwidth as well as providing better quality (if the custom-mixed stereo audio is likely better than the end-device down-mixed version)”
Shadow DOM 201 – CSS and Styling
10 things web designers need to know about app design
JavaScript refresh – “We will cover here some of the key concepts of JavaScript to get us started.”
SlowmoJS – utility shows you step-by-step how your code is analysed and executed.
Callback Hell – A guide to writing elegant asynchronous javascript programs
Cross-Browser, Event-based, Element Resize Detection
On Responsive Layout and Grids
Preparing for the Collapse of Digital Civilization – Terence Eden on Google Reader, free web services and open-source replacements for them
Unsupportable Promises – Eric Meyer gets all negged out and totally heavy about @supports in CSS
Google fixing some WebP image format shortcomings – “Google finalizes how its image file format will handle metadata and color profiles. Also new: faster encoding and animation support.”
Shadow DOM 301: Advanced Concepts & DOM APIs
The UX drinking game

DRM corner

Encrypted Media Extensions (the official term for HTML5 DRM) – 1 hour 40 mins video presentation from John Simmons of Microsoft
The purpose of DRM by Hixie. Interesting analysis (“The purpose of DRM is not to prevent copyright violations. The purpose of DRM is to give content providers leverage against creators of playback devices”) but avoids direct question of why Google supports it.
Music sales are not affected by web piracy, study finds report published by the European Commission Joint Research Committee
Brightcove retreats from HTML5pushes refreshed SDKs for native Android, iOS apps – “native apps allow Brightcove customers to properly install digital rights management policies”
Apple’s entire product line targeted for alleged DRM patent violations – “Intertrust won $440M from Microsoft, now accuses Apple of using its patented tech.” As Robin Berjon wittily noted, this is like Alien vs Predator.

Social Meeja corner

Hyperbole corner: “websites are dead” says person employed by Asda to do social media rather than its website (which they haven’t taken offline) “while exploring ways to tie-in the mobile and social customer journey to their in-store experiences”
Rain on your ‘social customer journey’ parade corner: Buzzkill: Coca-Cola Finds No Sales Lift from Online Chatter
Will MySpace ever lose its monopoly? from 2007

Reading List #3

2013-02-22T21:02:00.001-08:00

NEWT, innit?

F**K CAPTCHA – Big site removes CRAPTCHA, sees conversion rate uplift of 33.3%
Using Flexbox: Mixing Old and New for the Best Browser Support
Microsoft’s new WebKit patch for Pointer Events – great spec; needs support for pointers from multiple simultaneous users, eg multi-player games like PS3, Wii
More on screen readers and HTML title attributes by James Craig, editor of WAI-ARIA spec (VoiceOver supports them, and in the future things may be better, he says)
A Comprehensive Guide to WebP
Manifest format should support some way of including a splash screen – discussion started by Marcos Caceres

Industry

Not just featurephones: Smartphones are 32% of Opera Mini/ Mobile installs, 8 million new users in January
Africa’s True Mobile Revolution Has Yet to Start – “The United States economy is nine times the size of Africa’s, but Africa has twice as many mobile phones.”
Google has killed Android (the brand) – “Of course, Android is dominant. So much that saying you sell an “Android phone” makes you a cheap commodity play. Nobody wants that, they all want to be cool and different … Android is now so dominant, it can be killed. Because it is just what’s inside. What matters, it is the outside.”

Misc

Guardian Truncation Team – “Celebrating the work of the tireless men & women who shorten headlines so they’ll fit on your iPhone.”
Screenshots of Despair

Reading List #2

2013-02-15T20:50:00.001-08:00

NEWT

Using WAI-ARIA Landmarks – 2013 – with video by @LeonieWatson SHOWING how useful they are to AT users
Prototype Chromium build with support for MS Pointer Events
HTML5 Doctor: The progress element by Ian Devlin
No more ‘Mobile’ – “Mobile was a useful term when it was new and niche. You could use it in a conversation to narrow things down. Now it’s so broad it’s fast becoming meaningless.”
Making elements keyboard focusable and clickable – use natively keyboard accessible elements (preferable) or make what you use instead mimic the appropriate native element as closely as possible.”

Opera/ WebKit switch

Opera (my employer) announced Opera will switch to WebKit. Here are some reaction posts – I’ve noted authors’ affiliations, as many work for browsers so are not wholly disinterested parties.

Opera and WebKit: a personal perspective – by me
Interview with me on A List Apart
Devs respond to Opera WebKit switch (.net magazine)
WebKit is the jQuery of Browser Engines by John Resig (jQuery, Mozilla)
Why Mozilla Matters – by Brendan Eich, Mozilla CTO
John Lilly’s opinion – ex-CEO of Mozilla
Hey -o-, let’s go! by David Storey, ex-devrel colleague of mine at Opera, and chum
WebKit: An Objective View by Robert Nyman and Rob Hawkes of Mozilla
Opera switching to WebKit: thoughts and guesses by PPK
Another chapter of a long goodbye? by Chaals, ex-Opera, now Yandex (which has its own Chromium-based browser)
I will miss the “Douglas Crockford of browsers” by Christian Heilmann (Mozilla)
Jake Archibald’s reaction (Google Chrome team)
300 million users strong, Opera moves to WebKit – personal post from Opera employee Haarvard
Strange day for the Open Web by Daniel Glazman, co-chair of CSS WG and authoring tool author (that embeds Mozilla’s Gecko

Industry

Journal of Economic Perspectives: The Case Against Patents (PDF) – “there is no empirical evidence that they serve to increase innovation and productivity … in spite of the enormous increase in the number of patents and in the strength of their legal protection, the US economy has seen neither a dramatic acceleration in the rate of technological progress nor a major increase in the levels of research and development expenditure.”
As well as Opera’s WebKit announcement, we also hit the 300 million user milestone. Here are the celebration cakes across the world.

Misc

Guardian comment generator – “try one of these random comments and you’ll be sure to impress the self‑proclaimed who’s who of the left‑wing internet intelligentsia.”
Ouch! ER visits due to pubic hair grooming on the rise in both men and women: study

– University of California reports five-fold increase in pubic hair removal injuries from 2002-2010
Man tried making love to an ambulance in Barnstaple bus station – “he was spotted on CCTV in a phone box setting light to a packet of peanuts while also punching them”
Deep Inside: A Study of 10,000 Porn Stars and Their Careers – what does the average porn star look like? What’s the average name and repertoire?
SETI asks Help Us Name the Moons of Pluto!
Harlem Shake Roulette – “All the best Harlem Shakers in one place.”

Reading List #1

2013-02-13T16:32:00.001-08:00

DevTools: Visually Re-engineering CSS For Faster Paint Times
Addy Osmani

Addy Osmani explains in detail how to profile your CSS and what you can do to optimize paint times of your application.

In Defense Of Rem Units

Matthew Lettini

Rem units are easier to work with than em units but just as useful. Matthew Lettini explains their pros and cons.

Articles & tutorials

CSS Regions Polyfill

Mihai Corlan & Razvan Caliman

Thanks to experimental polyfill by Mihai Corlan and Razvan Caliman CSS Regions have just came a step closer to real-world usage. The sooner we’re able to use them in our daily projects the better.

When to Avoid the Descendant Selector

Louis Lazaris

Louis Lazaris explains why should putting descendant selectors (too) high in the DOM be avoided.

Responsive grid systems; a solution?

Harry Roberts

Harry Roberts shows how he tackled the problem of grid systems in his Inuit.css framework. Quite interesting read.

How to Create Windows-8-like 3D animations with CSS3 and jQuery

Sara Soueidan

Sara Soueidan guides you through creating stunning CSS3 Windows-8-like animations.

Introduction to Animation in HTML

Kirupa Chinnathambi

Very good introduction into animations on the web. The article covers CSS transitions, WebGL and plain old JavaScript animations.

When to use Sass mixins, extends and variables

Rachel Nabors

Rachel Nabors shares a couple of short tips that you’ll find helpful, particularly,if you’re new to the whole Sass / preprocessor thingy.

Tools

Roole

Glen Huang

Roole is a brand new CSS preprocessor. It is implemented in JavaScript, it has vendor prefixing built-in and it utilizes braceless syntax. The question is if we really need another CSS preprocessor.

Reading List

2013-02-13T01:20:00.001-08:00

Ditching responsive design – why GoCardless ditched their resposive re-design
You like apples? – Ecommerce site’s sales up 112% – 333% comparing responsive and non-responsive designs
No, I’m not going to download your bullshit app – Admirable sentiment, swearing and grumpiness
Accessible HTML5 Media Players and More by Dennis Lembree of WebAxe
The real conflict behind <picture> and @srcset
Retina Revolution – technique to serve lower-bandwidth jpgs that look good on retina displays
Notes on the classList API
Balancing Text for better readability – text-wrap: balance. I’ve been sceptical of some of the Adobe CSS proposals, but I heart this
CSS background-position and percent – calc() to the rescue but background-origo property would be nice
IndexedDB, what were the issues? How do we stop it from happening again? – I thought my difficulties with IndexedDB were because I’m thick. But even clever people dislike the API. (WebSQL was simpler but was tied to a specific dialect of SQL so withered on the vine.)
You’re Missing the Point of Promises

Interoperability corner

Hello Chrome, it’s Firefox calling! – Firefox & Chrome videoconferencing in-browser via webRTC (no plugins or proprietary gronks)
Netflix to stream to Chrome O/S using Native Client plugin – presumably for “DRM”?

Differences Between CSS2.1 and CSS3+

2012-12-10T18:42:00.001-08:00

Most of us know that with the introduction of what we customarily call “CSS3″1, there have been changes and additions to CSS, compared to what we had in CSS2.1.
Putting all cross-browser issues aside, I thought it would be nice to be able to document all these changes into a single post and keep it up to date.
So if you want a list of everything that’s been introduced into the CSS spec since CSS2.1, here it is.

New Properties

Following is a list of CSS properties that were not defined in the CSS2.1 specification.
• animation (and eight associated longhand properties)
• background-clip
• background-origin
• background-size
• border-radius (and four associated longhand properties)
• border-image (and six associated longhand properties)
• box-decoration-break
• box-shadow
• box-sizing
• columns (and thirteen associated multi-column properties)
• clear-after
• flex (and eleven associated flexbox properties)
• font-stretch
• font-size-adjust
• font-synthesis
• font-kerning
• font-variant-caps
• hanging-punctuation
• hyphens
• icon
• image-resolution
• image-orientation
• line-break
• object-fit
• object-position
• opacity
• outline-offset
• overflow-wrap / word-wrap
• backface-visibility
• perspective
• perspective-origin
• pointer-events (for HTML)
• resize
• tab-size
• text-align-last
• text-decoration-line
• text-decoration-skip
• text-decoration-position
• text-decoration-style
• text-emphasis (and three associated properties)
• text-justify
• text-orientation
• text-overflow
• transform
• transform-style
• text-shadow
• transition (and four associated longhand properties)
• word-break
• word-spacing
• writing-mode

New Values

Properties from CSS2.1 have new values added to them in CSS3. Following are those new values and which property each belongs to.
• Value “local” for the background-attachment property
• Value "rgba()" for any property that accepts a color value
• Value "hsl()" for any property that accepts a color value
• Value "hsla()" for any property that accepts a color value
• Value "currentColor" for any property that accepts a color value
• Value "inset()" for the clip property
• Value "linear-gradient()" for any property that accepts an image value
• Value "radial-gradient()" for any property that accepts an image value
• Value "repeating-linear-gradient()" for any property that accepts an image value
• Value "repeating-radial-gradient()" for any property that accepts an image value
• Value "image()" for any property that accepts an image value
• Multiple comma-separated images for any property that accepts an image value
• Multiple comma-separated background-related values to match multiple background image declarations
• Value "center" for the position property
• Value "page" for the position property
• Value "space" for the background-repeat property
• Value "round" for the background-repeat property
• 15 new values for the cursor property
• Values "flex" and "inline-flex" for the display property
• Values "all-small-caps", "petite-caps", "all-petite-caps", "titling-caps", and "unicase" for the font-variant property
• Multiple, space-separated values for the letter-spacing property
• New values for the text-align property, including "<string>", "match-parent", "start", "end", and "start end"
• text-decoration is now a shorthand property
• Keywords "hanging" and "each-line" declared along with length or percentage values for the tfext-indent property
• Value "full-width" for the text-transform property
• rem units for lengths
• calc() units for lengths
• toggle() units
• Angle units (deg, grad, rad, turn)
• Time units (s, ms)

New Selectors

Following is a list of selectors introduced in CSS3.
• Substring matching attribute selectors ([att^=val], [att$=val], [att*=val])
• :target pseudo-class
• New pseudo-classes: :enabled, :disabled, :checked, and :indeterminate
• :root pseudo-class
• New expression-based structural pseudo-classes: :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type()
• Other new structural pseudo-classes: :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty
• The negation pseudo-class :not()
• Four pseudo-elements with double-colon syntax (::first-line, ::first-letter, ::before, ::after)
• The following-sibling combinator (p ~ img)
• ::selection pseudo-class (removed from the spec, but everyone uses it)

Other Miscallaneous New Features

Other new features not part of CSS2.1 include:
• @font-face
• Media Queries
• Keyframe animations using @keyframes
• Conditional styles using @supports
• Namespacing using @namespace
• Regions
• Filters

Features Still in Flux

The lists above aren't exhaustive. There's a lot that's still in major flux in the spec and that doesn't have much browser support. Below is a list of many of the new modules, which have loads of new features not mentioned above.

Counter Styles Level 3
Device Adaptation
Display Module Level 3
Line Grid
Mobile Text Size Adjustment
CSS Variables
Box Alignment
The "all" property
Exclusions and Shapes
Generated Content for Paged Media
Grid Layout
Grid Template Layout
Line Layout Module
New features in Lists and Counters
Overflow Module
New features in Paged Media
New features in CSS Sizing
Media Queries Level 4
Selectors Level 4
ch units
Viewport relative lengths
New resolution units
Compositing and Blending
New features in CSS speech
The unicode-range descriptor for @font-face
New features in CSS Images and Replaced Content

Summary

This isn't exactly the most useful post, but I kind of wanted to have a single reference that I can use to look up stuff like this, for ideas and whatnot.
In conclusion, if you don't see a CSS feature listed here, then it almost certainly belongs to CSS2.1, or else I've left it out for whatever reason.
As always, I've done what I can to ensure I've included everything, but feel free to add anything in the comments and I'll update accordingly.

Post by Louis Lazaris

Building Responsive Layouts

2012-12-05T14:15:00.001-08:00

Responsive web design link hubs

This is Responsive by R/GA
Responsive Resources by Brad Frost
Responsive WebDesign by gonzodesign for Scoop.it
Responsive web design interactive infographic by Template Monster
“50 fantastic tools for responsive web design” by Denise Jacobs and Peter Gasston for .net Magazine
“Responsive Web Design Guidelines and Tutorials” by Smashing Magazine

Responsive web design articles, tutorials, and tools

“Essential considerations for crafting quality media queries” by Zoe Gillenwater
Excerpt of Chapter 6 of Stunning CSS3 on media queries by Zoe Gillenwater
“Responsive Web Design” by Ethan Marcotte for A List Apart
“Adaptive layouts with media queries” by Aaron Gustafson for .net Magazine
“Design for a Target Experience First” by Nathan C. Ford
The Goldilocks Approach by Front design agency
“Device-Agnostic Approach To Responsive Web Design” by Theirry Koblentz for Smashing Magazine
“Why images appear blurry on mobile devices” by Christopher Cohen
“Which responsive images solution should you use?” by Chris Coyier
“RESS Multi-Device Design Resources” by Luke Wroblewski
Gridpak responsive grid generator by Erskine Design

Mobile viewports

“A pixel is not a pixel” by Peter-Paul Koch (PDF of presentation slides)
“An introduction to meta viewport and @viewport” by Andrea Bovens for Dev.Opera
iOS orientation change zoom bug
“IE10 Snap Mode and Responsive Design” by Tim Kadlec

Dealing with IE 6-8 support

Respond script for media query support by Scott Jehl
css3-mediaqueries.js script for media query support by Wouter van der Graaf
box-sizing polyfill for box-sizing support by Christian Schaefer
“Windows mobile media queries” by Jeremy Keith
“Targeting mobile-optimized CSS at Windows Phone 7” by IE Mobile Team

Fluid/liquid layout

Flexible Web Design: Creating Liquid and Elastic Layouts with CSS book by Zoe Gillenwater
“70+ essential resources for creating liquid and elastic layouts” by Zoe Gillenwater
“Pros And Cons Of 6 CSS Layout Patterns: Part 2” by Steven Bradley
“The Definitive Guide to Using Negative Margins” by John Imbong for Smashing Magazine
“Get Refreshed: Liquid Layouts With Simpler CSS and Without A Semantic Mess” by Kyle Weems
“Responsive Design’s Dirty Little Secret” by John Albin Wilkins
“Proportional Grids” by Matt Berridge
Hybrid fluid-fixed demo using display:table by Moople
“* { box-sizing: border-box } FTW” by Paul Irish

Responsive web design inspiration and design patterns

Mediaqueri.es gallery
My media query inspiration bookmarks on Gimmebar and delicious
My liquid layout inspiration bookmarks on Gimmebar and delicious
“Examples of flexible layouts with CSS3 media queries” by Zoe Gillenwater
Responsive Patterns collection by Brad Frost
“Multi-Device Layout Patterns” by Luke Wroblewski
“Responsive navigation patterns” by Brad Frost
“Complex navigation patterns for responsive design” by Brad Frost

The Code Side Of Color // Hex Colors

2012-10-04T10:09:00.001-07:00

The trouble with a color’s name is that it never really is perceived as the exact same color to two different individuals — especially if they have a stake in a website’s emotional impact. Name a color, and you’re most likely to give a misleading impression. Even something like “blue” is uncertain. To be more precise, it could be “sky blue”, “ocean blue”, “jeans blue” or even “arc welder blue”.
Descriptions vary with personal taste and in context with other colors. We label them “indigo”, “jade”, “olive”, “tangerine”, “scarlet” or “cabaret”. What exactly is “electric lime”? Names and precise shades vary — unless you’re a computer.

Code Demands Precision

When computers name a color, they use a so-called hexidecimal code that most humans gloss over: 24-bit colors. That is, 16,777,216 unique combinations of exactly seven characters made from ten numerals and six letters — preceded by a hash mark. Like any computer language, there’s a logical system at play. Designers who understand how hex colors work can treat them as tools rather than mysteries.

Breaking Hexadecimals Into Manageable Bytes

Pixels on back-lit screens are dark until lit by combinations of red, green, and blue. Hex numbers represent these combinations with a concise code. That code is easily broken. To make sense of #970515, we need to look at its structure:
The first character # declares that this “is a hex number.” The other six are really three sets of pairs: 0–9 and a–f. Each pair controls one primary additive color.

The higher the numbers are, the brighter each primary color is. In the example above, 97 overwhelms the red color, 05 the green color and 15 the blue color.
Each pair can only hold two characters, but #999999 is only medium gray. To reach colors brighter than 99 with only two characters, each of the hex numbers use letters to represent 10–16. A, B, C, D, E, and F after 0–9 makes an even 16, not unlike jacks, queens, kings and aces in cards.

Being mathematical, computer-friendly codes, hex numbers are strings full of patterns. For example, because 00 is a lack of primary and ff is the primary at full strength, #000000 is black (no primaries) and #ffffff is white (all primaries). We can build on these to find additive and subtractive colors. Starting with black, change each pair to ff:

#000000 is black, the starting point.
#ff0000 stands for the brightest red.
#00ff00 stands for the brightest green.
#0000ff stands for the brightest blue.

Subtractive colors start with white, i.e. with the help of #ffffff. To find subtractive primaries, change each pair to 00:

#ffffff is white, the starting point.
#00ffff stands for the brightest cyan.
#ff00ff stands for the brightest magenta.
#ffff00 stands for the brightest yellow.

Shortcuts In Hex

Hex numbers that use only three characters, such as #fae, imply that each ones place should match the tens place. Thus #fae expands to #ffaaee and #09b really means #0099bb. These shorthand codes provides brevity in code.
In most cases, one can read a hex number by ignoring every other character, because the difference between the tens place tells us more than the ones place. That is, it’s hard to see the difference between 41 and 42; easier to gauge is the difference between 41 and 51.

The example above has enough difference among its tens place to make the color easy to guess — lots of red, some blue, no green. This would provide us with a warm violet color. Tens in the second example (9, 9 and 8) are very similar. To judge this color, we need to examine the ones (7, 0, and 5). The closer a hex color’s tens places are, the more neutral (i.e. less saturated) it will be.

Make Hexadecimals Work For You

Understanding hex colors lets designers do more than impress co-workers and clients by saying, “Ah, good shade of burgundy there.” Hex colors let designers tweak colors on the fly to improve legibility, identify elements by color in stylesheets, and develop color schemes in ways most image editors can’t.

Keep Shades In Character

To brighten or darken a color, one’s inclination is often to adjust its brightness. This makes a color run the gamut from murky to brilliant, but loses its character on either end of the scale. For example, below a middle green becomes decidedly black when reduced to 20% brightness. Raised to 100%, the once-neutral green gains vibrancy.
A funny thing happens when we treat hex colors as if they were increments of tens. By adding one to each of the tens place, we raise a color’s brightness while lowering its saturation. This prevents shades of a given color from wandering too closely to pitch black or brilliant neon. Altering hex pairs retains the essence of a color.

In the example above, the top set of shades appears to gain yellow or fall to black, even though it’s technically the same green hue. By changing its hex pairs, the second set appears to keep more natural shades.

Faded Underlines

By default, browsers underline text to denote links. But thick underlines interfere with letters’ descenders. Designers can make underlines less obtrusive by scaling back hex colors. The idea is to make the tags closer to the background color, while the text itself gains contrast against the background.

For dark text on a bright background, we make the links brighter.
For bright text on a dark background, we make the links darker.

To make this work, every embedded link needs a <span> inside of every <a>:
a { text-decoration:underline;color:#aaaaff; }
a span { text-decoration:none;color:#0000ff; }

As you can see here, underlines in the same color as the text can interfere with parts of type that drop below the baseline. Changing the underline to resemble the background more closely makes descenders easier to read, even though most browsers place underlines above the letterforms.
Adding spans to every anchor tag can be problematic. A popular alternative is to remove underlines and add border-bottom:
a { text-decoration: none; border-bottom: 1px solid #aaaaff; }

Better Body Copy

A recurring design problem is that a specific color may be technically correct but has an unintended effect. For example, some designs call for headers and body copy to be the same color. We have to keep in mind that the thicker the strokes of large text appears, the darker the small text appears.

h1, p { color: #797979; }

h1 { color: #797979; }
p { color: #393939; }
While technically identical, the body of the copy is narrower, and more delicate letterforms make it visually brighter than the heading. Lowering the tens places will make the text easier to read.

How To Warm Up Or Cool Down A Background

Neutral backgrounds may be easy to read against, but “neutral” doesn’t have to mean “bland”. Adjusting the first and last byte can make a background subtly warmer or cooler.

#404040 — neutral
#504030 — warmer
#304050 — cooler

Is that too much? For a more subtle shift, use the ones places instead:

#404040 — neutral
#594039 — warmer
#394059 — cooler

Coordinate Colors With Copy-Paste

Recognizing the structure of a hex number’s number/letter pairs gives designers a unique tool to explore color combinations. Unlike color wheels and charts, rearranging pairs in a hex number is a simple process to change hues while keeping values similar. As a bonus, the results can be unpredictable. The simplest technique is to move one pair of characters to a different spot, which trades primary colors.
A common design technique to make text or other visual elements coordinate with a photo is to use colors from within that photo. Understanding hex colors can take that a step further, by deriving new colors that coordinate with the photo without taking directly from the photo.

Going Forward

Don’t let the code intimidate you. With a little creativity, hex colors are a tool at your disposal. If nothing else, next time someone asks if you can solve a problem with code in any language, you can simply say:

“Shouldn’t be harder than parsing hexidecimal triplets in my head.”

Perfect Workflow in Sublime Text: Free Course!

2012-09-25T10:07:00.001-07:00

Perfect Workflow in Sublime Text: Free Course!:
I’m pleased to announce that my newest course on Tuts+ Premium is out…and free to everyone! I have a confession: I’m a code editor addict, and have tried them all! I was an early adopter of Coda, a TextMate advocate, even a Vim convert. But all of that changed when I discovered Sublime Text 2, the best code editor available today.

I’ll demonstrate what I consider to be the perfect workflow.

In this free course, I’ll demonstrate what I consider to be the perfect workflow in Sublime Text 2. We’ll cover everything from the basic core features, such as multiple cursors and the command palette, to the most popular and useful plugins, to working with Sublime’s build system.
If you’re intrigued by Sublime Text, but haven’t yet dug into it, now is the perfect time. Let me convince you!

Outline

Here’s the full lesson outline for the course. You certainly don’t have to watch in order; skip around to the ones that interest you most!

Exclusively on Tuts+ Premium

Testing Websites in Game Console Browsers

2012-09-11T12:12:00.001-07:00

Testing Websites in Game Console Browsers: Today’s game consoles may offer subpar web experiences with little browser choice, but that doesn’t mean we can ignore them. More than one in eight internet users in the UK, US, and France—and nearly one in four American teens—uses a game console to get online. As more console makers offer internet-capable devices—and as smart TVs continue to enter the market—now is the time to plan how our sites will adapt to these new contexts. Learn how to test your web content on phone consoles; handheld consoles like Sony PSP and Nintendo DS; and TV consoles like Nintendo Wii, Sony PS3, and Microsoft Xbox 360.

BookBlock: A Content Flip Plugin

2012-09-06T13:37:00.001-07:00

BookBlock: A Content Flip Plugin:

View demo Download source
BookBlock is a jQuery plugin that can be used for creating booklet-like components that allow a “page flip” navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow for the pages to create more realism.
We will be using jQuery++ by Bitovi which has some add-ons for jQuery (specifically, to add the swipe event).
The following structure will allow to add custom content in a wrapper with the class “cf-item”, which represents an open page (left and right side):

<div id="bb-bookblock" class="bb-bookblock">
 <div class="bb-item">
  <!-- custom content -->
 </div>
 <div class="bb-item">
  
 </div>
 <div class="bb-item">
  <!-- ... -->
 </div>
 <div class="bb-item">
  <!-- ... -->
 </div>
 <!-- ... -->
</div>

The plugin can be called like this:

$(function() {
   
 $( '#bb-bookblock' ).bookblock();

});

You also have to include the other scripts that are needed (see one of the demo files).

Options

The following options are available:

// speed for the flip transition in ms.
speed  : 1000,

// easing for the flip transition.
easing  : 'ease-in-out',

// if set to true, both the flipping page and the sides will have an overlay to simulate shadows
shadows  : true,

// opacity value for the "shadow" on both sides (when the flipping page is over it).
// value : 0.1 - 1
shadowSides : 0.2,

// opacity value for the "shadow" on the flipping page (while it is flipping).
// value : 0.1 - 1
shadowFlip : 0.1,

// perspective value
perspective : 1300,

// if we should show the first item after reaching the end.
circular : false,

// if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'.
nextEl  : '',

// if we want to specify a selector that triggers the prev() function.
prevEl  : '',

// callback after the flip transition.
// page is the current item's index.
// isLimit is true if the current page is the last one (or the first one).
onEndFlip : function( page, isLimit ) { return false; },

// callback before the flip transition.
// page is the current item's index.
onBeforeFlip: function( page ) { return false; }

Check out the three demos with different configurations:

Find this project on Github

View demo Download source

Convert Your Photoshop Layers into CSS3 Styles

2012-08-22T05:16:00.001-07:00

CSS3Ps is free cloud based photoshop plugin that converts your layers to CSS3. You can select several layers and groups of layers and convert them in one click. Stroke is converted into CSS border property. Inner Shadow, Inner Glow, Drop Shadow, Outer Glow are converted into CSS box-shadow property.
You can see the result styles in browser and share them with other people. It works on Windows or Mac OS X and Photoshop CS3 and later. And best of all, it’s absolutely free!

Requirements: Photoshop CS3+

Demo: http://css3ps.com/

License: License Free

Convert Your Photoshop Layers into CSS3 Styles

Working with elements before the DOM is ready

2012-08-17T05:24:00.001-07:00

I’ve been looking into ways to modify elements before DOMContentLoaded so that enhancements can be made as an element is rendered to the screen allowing users to begin interacting with a page even if it hasn’t finished loading or if rendering is being blocked by 3rd party assets such as banner ads or tracking code. The most robust way to do this is to include an inline <script> directly after each element you need to enhance which calls the relevant JavaScript functions — this works, but it’s not very DRY and it’s not easy to maintain.
Recently, I stumbled across a hack in an article by David Walsh which uses a CSS animation and the animationStart event to detect when an element has been inserted into the DOM. It works by exploiting the fact that CSS animations run as soon as an element is appended to the document. Creating a simple animation that runs for a tiny duration and applying it to any elements you to want modify will fire a animationStart event for each element as it’s inserted, essentially emulating the (now defunct) DOM mutation events. What’s great about this technique is it also works during page load!

The trick

Let’s say we want to enhance all <input> fields:

<input type="text" size="50">

We’ll need to set up a CSS animation and apply it to every <input> field with CSS:

/* prefixes omitted for brevity */
input {
    animation-name: nodeReady;
    animation-duration: 0.001s;
}

@keyframes nodeReady {
    from { clip: rect(1px, auto, auto, auto); }
    to { clip: rect(0px, auto, auto, auto); }
}

Finally, we need to make our “enhancements” with JavaScript:

/* prefixed variants omitted for brevity */
document.addEventListener("animationstart", function(e) {
    if (e.animationName == "nodeReady") {
        e.target.value = new Date();
    }
}, false);

That’s it, if the browser supports CSS animations all <input> elements will be modified as the page loads.

Fallbacks

If the browser doesn’t support CSS animations we need a fallback to ensure theses elements are still modified. Handling this case is actually really simple, just use DOMContentLoaded or the window load event to fire the code you would have run in the animationStart event. In this situation things will behave the way they always have.

A demo

Here’s a simple demo of this techinque in action. I’ve used PHP buffering to simulate a slow connection.

Credit

Credit must go to David Walsh for his article and to Daniel Buchner for the original discovery. Also, James Allardice is working on wrapping this up into something easily deployable.

POST: Working with elements before the DOM is ready

Circle Hover Effects with CSS Transitions

2012-08-10T10:25:00.001-07:00

View demo Download source
In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. And because the circle is such a special shape, we are going to create some special hover effects for it!

Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties.

We will omit vendor prefixes in this tutorial. But you’ll of course find them in the files.
So, let’s get started!

The HTML

For most of the examples, we’ll be using the following structure:

<ul class="ch-grid">
 <li>
  <div class="ch-item ch-img-1">
   <div class="ch-info">
    <h3>Use what you have</h3>
    <p>by Angela Duncan <a href="http://drbl.in/eOPF">View on Dribbble</a></p>
   </div>
  </div>
 </li>
 <li>
  <div class="ch-item ch-img-2">
   <div class="ch-info">
    <h3>Common Causes of Stains</h3>
    <p>by Antonio F. Mondragon <a href="http://drbl.in/eKMi">View on Dribbble</a></p>
   </div>
  </div>
 </li>
 <li>
  <div class="ch-item ch-img-3">
   <div class="ch-info">
    <h3>Pink Lightning</h3>
    <p>by Charlie Wagers <a href="http://drbl.in/ekhp">View on Dribbble</a></p>
   </div>
  </div>
 </li>
</ul

Although we could use images here, we’ll give ourselves a bit more freedom by using background images instead. We’ll define them in the classes starting with “ch-img-”. Additionally, we’ll have a division for the description of the item with a title.
Now, let’s make some hover effects!

The CSS

Let’s define some common style for the list and the list items:

.ch-grid {
 margin: 20px 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
}

.ch-grid:after,
.ch-item:before {
 content: '';
    display: table;
}

.ch-grid:after {
 clear: both;
}

.ch-grid li {
 width: 220px;
 height: 220px;
 display: inline-block;
 margin: 20px;
}

We can center the list items by using display inline-block and setting the text-align property of its parent to center.

The clearfix hack is by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/
Some of the examples will have a different structure but we’ll look into that for each example in more detail.

Example 1

The first example is going to reveal the description by scaling it up and we will also animate the inset box shadow of the item itself. So let’s position the item and set a nice, bif inset box shadow and a transition:

.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 position: relative;
 cursor: default;
 box-shadow: 
  inset 0 0 0 16px rgba(255,255,255,0.6),
  0 1px 2px rgba(0,0,0,0.1);
 transition: all 0.4s ease-in-out;
}

As you notices before, we’ve given two classes to the item (not the list item but its child division): one is ct-item and the other one will be used to define a specific background image:

.ch-img-1 { 
 background-image: url(../images/1.jpg);
}

.ch-img-2 { 
 background-image: url(../images/2.jpg);
}

.ch-img-3 { 
 background-image: url(../images/3.jpg);
}

The description element will be positioned absolutely and we’ll give it a semi-transparent background by setting an RGBA value. It’s opacity is going to be 0 and we’ll scale it down to 0, too:

.ch-info {
 position: absolute;
 background: rgba(63,147,147, 0.8);
 width: inherit;
 height: inherit;
 border-radius: 50%;
 overflow: hidden;
 opacity: 0;
 transition: all 0.4s ease-in-out;
 transform: scale(0);
}

The title of the item will have some fitting paddings and margins and a smooth text shadow:

.ch-info h3 {
 color: #fff;
 text-transform: uppercase;
 letter-spacing: 2px;
 font-size: 22px;
 margin: 0 30px;
 padding: 45px 0 0 0;
 height: 140px;
 font-family: 'Open Sans', Arial, sans-serif;
 text-shadow: 
  0 0 1px #fff, 
  0 1px 2px rgba(0,0,0,0.3);
}

The paragraph element has 0 opacity and a transition (we want to fade it in on hover but with a delay):

.ch-info p {
 color: #fff;
 padding: 10px 5px;
 font-style: italic;
 margin: 0 30px;
 font-size: 12px;
 border-top: 1px solid rgba(255,255,255,0.5);
 opacity: 0;
 transition: all 1s ease-in-out 0.4s;
}

The link will be in uppercase letters and we’ll make the hover color yellow:

.ch-info p a {
 display: block;
 color: rgba(255,255,255,0.7);
 font-style: normal;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 9px;
 letter-spacing: 1px;
 padding-top: 4px;
 font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
 color: rgba(255,242,34, 0.8);
}

And now, the interesting hover action!

The item will animate its box shadow’s spread radius from 16px to 1px:

.ch-item:hover {
 box-shadow: 
  inset 0 0 0 1px rgba(255,255,255,0.1),
  0 1px 2px rgba(0,0,0,0.1);
}

The description will fade in and scale up to 1:

.ch-item:hover .ch-info {
 transform: scale(1);
 opacity: 1;
}

And the paragraph of the description will just fade in (with a delay):

.ch-item:hover .ch-info p {
 opacity: 1;
}

And that’s the first example! Let’s take a look at the next one.

Example 2

The HTML structure in this example is the same as the first one.
In this example we will use the box shadow of the item to fill our circle and serve as the background of the description.

So, nothing special here, just the box shadow that has one more value line:

.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow: 
  inset 0 0 0 0 rgba(200,95,66, 0.4),
  inset 0 0 0 16px rgba(255,255,255,0.6),
  0 1px 2px rgba(0,0,0,0.1);
 transition: all 0.4s ease-in-out;
}

And the background-images:

.ch-img-1 { 
 background-image: url(../images/4.jpg);
}

.ch-img-2 { 
 background-image: url(../images/5.jpg);
}

.ch-img-3 { 
 background-image: url(../images/6.jpg);
}

The description will be scaled down again:

.ch-info {
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 opacity: 0;
 transition: all 0.4s ease-in-out;
 transform: scale(0);
 backface-visibility: hidden;
}

And let’s style the typographical elements:

.ch-info h3 {
 color: #fff;
 text-transform: uppercase;
 position: relative;
 letter-spacing: 2px;
 font-size: 22px;
 margin: 0 30px;
 padding: 65px 0 0 0;
 height: 110px;
 font-family: 'Open Sans', Arial, sans-serif;
 text-shadow: 
  0 0 1px #fff, 
  0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
 color: #fff;
 padding: 10px 5px;
 font-style: italic;
 margin: 0 30px;
 font-size: 12px;
 border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
 display: block;
 color: rgba(255,255,255,0.7);
 font-style: normal;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 9px;
 letter-spacing: 1px;
 padding-top: 4px;
 font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
 color: rgba(255,242,34, 0.8);
}

On hover we’ll animate the inset box shadow (the reddish one) to 110px spread radius. This will cover all the circle:

.ch-item:hover {
 box-shadow: 
  inset 0 0 0 110px rgba(200,95,66, 0.4),
  inset 0 0 0 16px rgba(255,255,255,0.8),
  0 1px 2px rgba(0,0,0,0.1);
}

And we’ll scale up the description and fade it in:

.ch-item:hover .ch-info {
 opacity: 1;
 transform: scale(1); 
}

Example 3

In this example, we’ll play with rotation. The structure will be a bit different from the first two examples since we need to add the thumbnail as a second divison. So the list item will look as follows:

<li>
 <div class="ch-item"> 
  <div class="ch-info">
   <h3>Music poster</h3>
   <p>by Jonathan Quintin <a href="http://drbl.in/eGjw">View on Dribbble</a></p>
  </div>
  <div class="ch-thumb ch-img-1"></div>
 </div>
</li>

The item division will be styled like before (with a subtle box shadow):

.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

The thumbnail element will have a specific transform-origin (somewhere to the right middle) and a transition. This will be the element that we want to rotate down on hover so that it reveals the description element:

.ch-thumb {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 position: absolute;
 box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
 transform-origin: 95% 40%;
 transition: all 0.3s ease-in-out;
}

Using the pseudo-class :after we’ll create a little brass fastener with a radial gradient:

.ch-thumb:after {
 content: '';
 width: 8px;
 height: 8px;
 position: absolute;
 border-radius: 50%;
 top: 40%;
 left: 95%;
 margin: -4px 0 0 -4px;
 background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 box-shadow: 0 0 1px rgba(255,255,255,0.9);
}

Let’s define the background images for each thumb element:

.ch-img-1 { 
 background-image: url(../images/7.jpg);
 z-index: 12;
}

.ch-img-2 { 
 background-image: url(../images/8.jpg);
 z-index: 11;
}

.ch-img-3 { 
 background-image: url(../images/9.jpg);
 z-index: 10;
}

The desciption element will be styled as follows:

.ch-info {
 position: absolute;
 width: inherit;
 height: inherit;
 border-radius: 50%;
 overflow: hidden;
 background: #c9512e url(../images/noise.png);
 box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}

The typographical elements will be positioned and styled the following way:

.ch-info h3 {
 color: #fff;
 text-transform: uppercase;
 position: relative;
 letter-spacing: 2px;
 font-size: 18px;
 margin: 0 60px;
 padding: 22px 0 0 0;
 height: 85px;
 font-family: 'Open Sans', Arial, sans-serif;
 text-shadow: 
  0 0 1px #fff, 
  0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
 color: #fff;
 padding: 10px 5px;
 font-style: italic;
 margin: 0 30px;
 font-size: 12px;
 border-top: 1px solid rgba(255,255,255,0.5);
}

The anchor will be a little circle that should move in from the right on hover:

.ch-info p a {
 display: block;
 color: #333;
 width: 80px;
 height: 80px;
 background: rgba(255,255,255,0.3);
 border-radius: 50%;
 color: #fff;
 font-style: normal;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 9px;
 letter-spacing: 1px;
 padding-top: 24px;
 margin: 7px auto 0;
 font-family: 'Open Sans', Arial, sans-serif;
 opacity: 0;
 transition: 
  transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;
 transform: translateX(60px) rotate(90deg);
}

.ch-info p a:hover {
 background: rgba(255,255,255,0.5);
}

Since we want the movement and opacity to happen with a delay, but the background hover transition without, we’ll separate the transitions.
On hover we’ll rotate the thumb and move/rotate the link element:

.ch-item:hover .ch-thumb {
 box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
 transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
 opacity: 1;
 transform: translateX(0px) rotate(0deg);
}

Example 4

The forth example will involve some 3D rotations. So, we need to adjust the structured in order to have a container for the perspective and a front and backface. So, the list items will look as follows:

<li>
 <div class="ch-item ch-img-1">    
  <div class="ch-info-wrap">
   <div class="ch-info">
    <div class="ch-info-front ch-img-1"></div>
    <div class="ch-info-back">
     <h3>Bears Type</h3>
     <p>by Josh Schott <a href="http://drbl.in/ewUW">View on Dribbble</a></p>
    </div> 
   </div>
  </div>
 </div>
</li>

As you can see, we’ll add the background image to the item division and also to the front part of the flipping division.

The trick is to give the same background to the ch-info-wrap like the body. This will give the illusion as if our item has a hole.
The item will have the usual styling:

.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 cursor: default;
}

The extra wrapper will be used for the perspective and we’ll also add a transition for the box shadow:

.ch-info-wrap{
 position: absolute;
 width: 180px;
 height: 180px;
 border-radius: 50%;
 perspective: 800px;
 transition: all 0.4s ease-in-out;
 top: 20px;
 left: 20px;
 background: #f9f9f9 url(../images/bg.jpg);
 box-shadow: 
  0 0 0 20px rgba(255,255,255,0.2), 
  inset 0 0 3px rgba(115,114, 23, 0.8);

}

The ch-info div will need preserve-3d for the transform-style and we’ll give it a transition since this is the element we’ll rotate in 3d:

.ch-info{
 position: absolute;
 width: 180px;
 height: 180px;
 border-radius: 50%;
 transition: all 0.4s ease-in-out;
 transform-style: preserve-3d;
}

The front and the backface will have the following common styles:

.ch-info > div {
 display: block;
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 background-position: center center;
 backface-visibility: hidden;
}

The backface will be rotated so that we won’t see it initially:

.ch-info .ch-info-back {
 transform: rotate3d(0,1,0,180deg);
 background: #000;
}

And again, the background images:

.ch-img-1 { 
 background-image: url(../images/10.jpg);
}

.ch-img-2 { 
 background-image: url(../images/11.jpg);
}

.ch-img-3 { 
 background-image: url(../images/12.jpg);
}

…and the typographical elements:

.ch-info h3 {
 color: #fff;
 text-transform: uppercase;
 letter-spacing: 2px;
 font-size: 14px;
 margin: 0 15px;
 padding: 40px 0 0 0;
 height: 90px;
 font-family: 'Open Sans', Arial, sans-serif;
 text-shadow: 
  0 0 1px #fff, 
  0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
 color: #fff;
 padding: 10px 5px;
 font-style: italic;
 margin: 0 30px;
 font-size: 12px;
 border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
 display: block;
 color: rgba(255,255,255,0.7);
 font-style: normal;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 9px;
 letter-spacing: 1px;
 padding-top: 4px;
 font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
 color: rgba(255,242,34, 0.8);
}

On hover, we’ll change the box shadow of the wrapper and rotate the parent of the back and frontface so that we see the back:

.ch-item:hover .ch-info-wrap {
 box-shadow: 
  0 0 0 0 rgba(255,255,255,0.8), 
  inset 0 0 3px rgba(115,114, 23, 0.8);
}

.ch-item:hover .ch-info {
 transform: rotate3d(0,1,0,-180deg);
}

Example 5

In this example we want to scale down the inner thumbnail part to 0 and make the description element appear by fading it in and scaling it down to 1.

The structure of the fifth example will be the same as in the previous example.
The item has the usual style:

.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 cursor: default;
}

The wrapper of the description div and the info div itself will have the following common style:

.ch-info-wrap, 
.ch-info{
 position: absolute;
 width: 180px;
 height: 180px;
 border-radius: 50%;
}

Let’s do again the “hole” trick by setting the same background of the body to the wrapper:

.ch-info-wrap {
 top: 20px;
 left: 20px;
 background: #f9f9f9 url(../images/bg.jpg);
 box-shadow: 
  0 0 0 20px rgba(255,255,255,0.2), 
  inset 0 0 3px rgba(115,114, 23, 0.8);

}

The “front” and the “back” (it’s not really a front and backface anymore) common style:

.ch-info > div {
 display: block;
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 background-position: center center;
}

The “front” will have a transition (it will scale down and disappear):

.ch-info .ch-info-front {
 transition: all 0.6s ease-in-out;
}

And the back that holds the description will have 0 opacity initially and be scaled up to 1.5:

.ch-info .ch-info-back {
 opacity: 0;
 background: #223e87;
 pointer-events: none;
 transform: scale(1.5);
 transition: all 0.4s ease-in-out 0.2s;
}

We need to set the pointer-events to none since we don’t want the element to “block” everything else…remeber, it’s scaled up, we just can’t see it because of it’s opacity, but it’s still there.
Background images and typographical elements as usual, just with some different colors:

.ch-img-1 { 
 background-image: url(../images/13.jpg);
}

.ch-img-2 { 
 background-image: url(../images/14.jpg);
}

.ch-img-3 { 
 background-image: url(../images/15.jpg);
}

.ch-info h3 {
 color: #fff;
 text-transform: uppercase;
 letter-spacing: 2px;
 font-size: 18px;
 margin: 0 15px;
 padding: 40px 0 0 0;
 height: 80px;
 font-family: 'Open Sans', Arial, sans-serif;
 text-shadow: 
  0 0 1px #fff, 
  0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
 color: #fff;
 padding: 10px 5px 0;
 font-style: italic;
 margin: 0 30px;
 font-size: 12px;
 border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
 display: block;
 color: #e7615e;
 font-style: normal;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 9px;
 letter-spacing: 1px;
 padding-top: 4px;
 font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
 color: #fff;
}

On hover we’ll scale down the inner thumbnail part to 0 and set the opacity to 0. This will make it disappear into the back.

.ch-item:hover .ch-info-front {
 transform: scale(0);
 opacity: 0;
}

The part that contains the description will be scaled down to 1 and faded in. We’ll also set the pointer event to whatever they were before because now we want to be able to click on the link:

.ch-item:hover .ch-info-back {
 transform: scale(1);
 opacity: 1;
 pointer-events: auto;
}

Example 6

In this example we want to flip the inner thumbnail part down in order to reveal the description. The HTML will be the same like in the previous two examples.
The item will be styled as before:

.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 cursor: default;
}

The common style of the wrapper and the description element:

.ch-info-wrap, 
.ch-info{
 position: absolute;
 width: 180px;
 height: 180px;
 border-radius: 50%;
 transition: all 0.4s ease-in-out;
}

The wrapper will have perspective:

.ch-info-wrap {
 top: 20px;
 left: 20px;
 background: #f9f9f9 url(../images/bg.jpg);
 box-shadow: 
  0 0 0 20px rgba(255,255,255,0.2), 
  inset 0 0 3px rgba(115,114, 23, 0.8);
 perspective: 800px;
}

The info element will need the following transform style:

.ch-info {
 transform-style: preserve-3d;
}

The front and the backface will have a transition. Note that this time we’ll not set the backface-visibility to hidden, since we want the back of the inner thumbnail part to show when we flip it down:

.ch-info > div {
 display: block;
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 background-position: center center;
 transition: all 0.6s ease-in-out;
}

Let’s set the correct transform-origin so that we can open it down:

.ch-info .ch-info-front {
 transform-origin: 50% 100%; 
 z-index: 100;
 box-shadow: 
  inset 2px 1px 4px rgba(0,0,0,0.1);
}

We’ll set an RGBA value with 0 opacity to the background of the description part:

.ch-info .ch-info-back {
 background: rgba(230,132,107,0);
}

And the usual style for the other elements:

.ch-img-1 { 
 background-image: url(../images/16.jpg);
}

.ch-img-2 { 
 background-image: url(../images/17.jpg);
}

.ch-img-3 { 
 background-image: url(../images/18.jpg);
}

.ch-info h3 {
 color: #fff;
 text-transform: uppercase;
 letter-spacing: 2px;
 font-size: 14px;
 margin: 0 25px;
 padding: 40px 0 0 0;
 height: 90px;
 font-family: 'Open Sans', Arial, sans-serif;
 text-shadow: 
  0 0 1px #fff, 
  0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
 color: #fff;
 padding: 10px 5px;
 font-style: italic;
 margin: 0 30px;
 font-size: 12px;
 border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
 display: block;
 color: rgba(255,255,255,0.7);
 font-style: normal;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 9px;
 letter-spacing: 1px;
 padding-top: 4px;
 font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
 color: rgba(255,242,34, 0.8);
}

On hover, we’ll rotate the front part and animate the box shadow slightly. The back part will fade in its background color:

.ch-item:hover .ch-info-front {
 transform: rotate3d(1,0,0,-180deg);
 box-shadow: 
  inset 0 0 5px rgba(255,255,255,0.2), 
  inset 0 0 3px rgba(0,0,0,0.3);
}

.ch-item:hover .ch-info-back {
 background: rgba(230,132,107,0.6);
}

Example 7

The last example will act like a rotating cube where we reveal the description by rotating it in from the top back. Since we will rotate each of the faces, we won’t need an extra wrapper. So, our HTML will look as follows:

<li>
 <div class="ch-item">    
  <div class="ch-info">
   <div class="ch-info-front ch-img-1"></div>
   <div class="ch-info-back">
    <h3>Mouse</h3>
    <p>by Alexander Shumihin <a href="http://drbl.in/eAoj">View on Dribbble</a></p>
   </div> 
  </div>
 </div>
</li>

We’ll give a perspective value to the item itself:

.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 cursor: default;
 perspective: 900px;
}

The element with the class ch-info will need the preserve-3d:

.ch-info{
 position: absolute;
 width: 100%;
 height: 100%;
 transform-style: preserve-3d;
}

The front and backface will have a transition and the transform origin will be set to 50% 0%:

.ch-info > div {
 display: block;
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 background-position: center center;
 transition: all 0.4s linear;
 transform-origin: 50% 0%;
}

Let’s set a nice inset box shadow to the front part:

.ch-info .ch-info-front {
 box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);
}

The backface will be rotated initially in order to appear as the down face of a cube:

.ch-info .ch-info-back {
 transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
 background: #000;
 opacity: 0;
}

And the usual style for the background images and text elements:

.ch-img-1 { 
 background-image: url(../images/19.jpg);
}

.ch-img-2 { 
 background-image: url(../images/20.jpg);
}

.ch-img-3 { 
 background-image: url(../images/21.jpg);
}

.ch-info h3 {
 color: #fff;
 text-transform: uppercase;
 letter-spacing: 2px;
 font-size: 24px;
 margin: 0 15px;
 padding: 60px 0 0 0;
 height: 110px;
 font-family: 'Open Sans', Arial, sans-serif;
 text-shadow: 
  0 0 1px #fff, 
  0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
 color: #fff;
 padding: 10px 5px;
 font-style: italic;
 margin: 0 30px;
 font-size: 12px;
 border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
 display: block;
 color: rgba(255,255,255,0.7);
 font-style: normal;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 9px;
 letter-spacing: 1px;
 padding-top: 4px;
 font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
 color: rgba(255,242,34, 0.8);
}

We’ll use translate3d to move the front part on the Y axis of our 3d space and rotate3d to actually rotate it. We’ll also fade it out because we don’t want to see any part of it afterwards:

.ch-item:hover .ch-info-front {
 transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
 opacity: 0;
}

The backface will be rotated “back” to 0 degrees (remember, initially it was rotated downwards):

.ch-item:hover .ch-info-back {
 transform: rotate3d(1,0,0,0deg);
 opacity: 1;
}

And that’s it! A whole bunch of hover effects that allow for many different variations, just try it out and play with it!

Hope you enjoyed these effects and find them inspiring!
View demo Download source

Credits: Featured image illustration from Arnel Baluyot’s Stay Foxy.

CSS Style Guides

2012-08-10T10:24:00.001-07:00

As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides. Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming is a part of it. Sectioning is a part of it. Commenting, indentation, overall file structure... it all makes up a complete CSS style guide.
Let's round up some existing ones.

But first... Not Pattern Libraries.

I love pattern libraries. Think Twitter Bootstrap or GEL. I think they are a fantastic way to work particularly in large sites and web apps. This post isn't about those. We'll do a roundup of those some time, because I think that would be valuable too. This is about style guides for CSS itself.

The List

I'll list some excerpts from each that I like below.

GitHub

GitHub CSS Style Guide →

As a rule of thumb, don't nest further than 3 levels deep. If you find yourself going further, think about reorganizing your rules (either the specificity needed, or the layout of the nesting).

Unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size.

Google

Use ID and class names that are as short as possible but as long as necessary.

E.g. #nav not #navigation, .author not .atr

Do not concatenate words and abbreviations in selectors by any characters (including none at all) other than hyphens, in order to improve understanding and scannability.

E.g. .demo-image not .demoimage or .demo_image

Idiomatic CSS

Nicolas Gallagher's Idiomatic CSS →

Configure your editor to "show invisibles". This will allow you to eliminate end of line whitespace, eliminate unintended blank line whitespace, and avoid polluting commits.

Long, comma-separated property values - such as collections of gradients or shadows - can be arranged across multiple lines in an effort to improve readability and produce more useful diffs.

Use separate files (concatenated by a build step) to help break up code for distinct components.

CSS Wizardry

Harry Robert's CSS Style →

I have a blanket-ban on IDs in CSS. There is literally no point in them, and they only ever cause harm.

This section heading is also prepended with a $. This is so that—when I do a find for a section—I actually do a find for $MAIN and not MAIN.

In situations where it would be useful for a developer to know exactly how a chunk of CSS applies to some HTML, I often include a snippet of HTML in a CSS comment.

Smashing Magazine

Vitaly Friedman's "Improving Code Readability With CSS Styleguides" →

For large projects or large development team it is also useful to have a brief update log.

For better overview of your code you might consider using one-liners for brief fragments of code.

ThinkUp

ThinkUp CSS Style Guide →

If the value of the width or height is 0, do not specify units.

Comments that refer to selector blocks should be on a separate line immediately before the block to which they refer.

More?

Does your organization maintain and use a public style guide? Post it!
CSS Style Guides is a post from CSS-Tricks

Coding guidelines for HTML and CSS

2012-05-02T09:26:00.001-07:00

Coding guidelines for HTML and CSS: Webmaster level: All

Great code has many attributes. It’s effective, efficient, maintainable, elegant. When working on code with many developers and teams and maybe even companies, great code needs to also be consistent and easy to understand. For that purpose there are style guides. We use style guides for a lot of languages, and our newest public style guide is the Google HTML and CSS Style Guide.

Our HTML and CSS Style Guide, just like other Google style guides, deals with a lot of formatting-related matters. It also hints at best practices so to encourage developers to go beyond indentation. Many style guide authors know the underlying motivation from the question whether to describe the code they write—or to prescribe what code they want to write. Not surprisingly then, in our HTML and CSS style guide you’ll find both (as much as you’ll still find a lot of different development styles in our not entirely small code base).

At this time we only want to introduce you to this new style guide. We hope to share more about its design decisions and future updates with you. In the meantime please share your thoughts and experiences, and as with the other style guides, feel free to use our style guide for your own projects, as you see fit.

Written by Jens O. Meiert, Senior Web Architect, Google Webmaster Team

Frontend SPOF in Beijing

2012-04-02T16:44:00.001-07:00

Frontend SPOF in Beijing:
This past December I contributed an article called Frontend SPOF in Beijing to PerfPlanet’s Performance Calendar. I hope that everyone who reads my blog also read the Performance Calendar – it’s an amazing collection of web performance articles and gurus. But in case you don’t I’m cross-posting it here. I saw a great presentation from Pat Meenan about frontend SPOF and want to raise awareness around this issue. This post contains some good insights.
Make sure to read PerfPlanet – it’s a great aggregator of WPO blog posts.
Now – flash back to December 2011…

I’m at Velocity China in Beijing as I write this article for the Performance Calendar. Since this is my second time to Beijing I was better prepared for the challenges of being behind the Great Firewall. I knew I couldn’t access popular US websites like Google, Facebook, and Twitter, but as I did my typical surfing I was surprised at how many other websites seemed to be blocked.

Business Insider

It didn’t take me long to realize the problem was frontend SPOF – when a frontend resource (script, stylesheet, or font file) causes a page to be unusable. Some pages were completely blank, such as Business Insider:

figure 1: The dreaded “blank white screen” due to a blocking Twitter script.

Firebug’s Net Panel shows that anywhere.js is taking a long time to download because it’s coming from platform.twitter.com – which is blocked by the firewall. Knowing that scripts block rendering of all subsequent DOM elements, we form the hypothesis that anywhere.js is being loaded in blocking mode in the HEAD. Looking at the HTML source we see that’s exactly what is happening:

<head>
...
<!-- Twitter Anywhere -->
<script src="https://platform.twitter.com/anywhere.js?id=ZV0...&v=1" type="text/javascript"></script>
<!-- / Twitter Anywhere -->
...
</head>
...
<body>

If anywhere.js had been loaded asynchronously this wouldn’t happen. Instead, since anywhere.js is loaded the old way with <SCRIPT SRC=..., it blocks all the DOM elements that follow which in this case is the entire BODY of the page. If we wait long enough the request for anywhere.js times out and the page begins to render. How long does it take for the request to timeout? Looking at the “after” screenshot of Business Insider we see it takes 1 minute and 15 seconds for the request to timeout. That’s 1 minute and 15 seconds that the user is left staring at a blank white screen waiting for the Twitter script!

figure 2: Business Insider finally renders after 1 minute 15 seconds.

CNET

CNET has a slightly different experience; the navigation header is displayed but the rest of the page is blocked from rendering:

figure 3: CNET rendering is blocked by ads from eyewonder.com.

Looking in Firebug we see that wrapper.js from cdn.eyewonder.com is “pending” – this must be another domain that’s blocked by the firewall. Based on where the rendering stops our guess is that the wrapper.js SCRIPT tag is immediately after the navigation header and is loaded in blocking mode thus preventing the rest of the page from rendering. The HTML confirms that this is indeed what’s happening:

<header>
...
</header>
<script src="http://cdn.eyewonder.com/100125/771933/1592365/wrapper.js"></script>
<div id="rb_wrap">
<div id="rb_content"> <div id="contentMain">

O’Reilly Radar

Everyday I visit O’Reilly Radar to read Nat Torkington’s Four Short Links. Normally Nat’s is one of many stories on the Radar front page, but going there from Beijing shows a page with only one story:

figure 4: O’Reilly Radar rendering is blocked by Twitter widget.

At the bottom of this first story there’s supposed to be a Tweet button. This button is added by the widgets.js script fetched from platform.twitter.com which is blocked by the Great Firewall. This wouldn’t be an issue if widgets.js was fetched asynchronously, but sadly a peek at the HTML shows that’s not the case:

<a href="...">Comment</a>
&nbsp;|&nbsp;
<span class="social-counters">
<span class="retweet">
<a href="http://twitter.com/share" class="twitter-share-button"
   data-count="horizontal"
   data-url="http://radar.oreilly.com/2011/12/four-short-links-6-december-20-1.html"
   data-text="Four short links: 6 December 2011" data-via="radar"
   data-related="oreillymedia:oreilly.com">Tweet</a>
<script src="http://platform.twitter.com/widgets.js"
   type="text/javascript"></script>
</span>

The cause of frontend SPOF

One possible takeaway from these examples might be that frontend SPOF is specific to Twitter and eyewonder and a few other 3rd party widgets. Sadly, frontend SPOF can be caused by any 3rd party widget, and even from the main website’s own scripts, stylesheets, or font files.
Another possible takeaway from these examples might be to avoid 3rd party widgets that are blocked by the Great Firewall. But the Great Firewall isn’t the only cause of frontend SPOF – it just makes it easier to reproduce. Any script, stylesheet, or font file that takes a long time to return has the potential to cause frontend SPOF. This typically happens when there’s an outage or some other type of failure, such as an overloaded server where the HTTP request languishes in the server’s queue for so long the browser times out.
The true cause of frontend SPOF is loading a script, stylesheet, or font file in a blocking manner. The table in my frontend SPOF blog post shows when this happens. It’s really the website owner who controls whether or not their site is vulnerable to frontend SPOF. So what’s a website owner to do?

Avoiding frontend SPOF

The best way to avoid frontend SPOF is to load scripts asynchronously. Many popular 3rd party widgets do this by default, such as Google Analytics, Facebook, and Meebo. Twitter also has an async snippet for the Tweet button that O’Reilly Radar should use. If the widgets you use don’t offer an async version you can try Stoyan’s Social button BFFs async pattern.
Another solution is to wrap your widgets in an iframe. This isn’t always possible, but in two of the examples above the widget is eventually served in an iframe. Putting them in an iframe from the start would have avoided the frontend SPOF problems.
For the sake of brevity I’ve focused on solutions for scripts. Solutions for font files can be found in my @font-face and performance blog post. I’m not aware of much research on loading stylesheets asynchronously. Causing too many reflows and FOUC are concerns that need to be addressed.

Call to action

Business Insider, CNET, and O’Reilly Radar all have visitors from China, and yet the way their pages are constructed delivers a bad user experience where most if not all of the page is blocked for more than a minute. This isn’t a P2 frontend JavaScript issue. This is an outage. If the backend servers for these websites took 1 minute to send back a response, you can bet the DevOps teams at Business Insider, CNET, and O’Reilly wouldn’t sleep until the problem was fixed. So why is there so little concern about frontend SPOF?
Frontend SPOF doesn’t get much attention – it definitely doesn’t get the attention it deserves given how easily it can bring down a website. One reason is it’s hard to diagnose. There are a lot of monitors that will start going off if a server response time exceeds 60 seconds. And since all that activity is on the backend it’s easier to isolate the cause. Is it that pagers don’t go off when clientside page load times exceed 60 seconds? That’s hard to believe, but perhaps that’s the case.
Perhaps it’s the way page load times are tracked. If you’re looking at worldwide medians, or even averages, and China isn’t a major audience your page load time stats might not exceed alert levels when frontend SPOF happens. Or maybe page load times are mostly tracked using synthetic testing, and those user agents aren’t subjected to real world issues like the Great Firewall.
One thing website owners can do is ignore frontend SPOF until it’s triggered by some future outage. A quick calculation shows this is a scary choice. If a 3rd party widget has a 99.99% uptime and a website has five widgets that aren’t async, the probability of frontend SPOF is 0.05%. If we drop uptime to 99.9% the probability of frontend SPOF climbs to 0.5%. Five widgets might be high, but remember that “third party widget” includes ads and metrics. Also, the website’s own resources can cause frontend SPOF which brings the number even higher. The average website today contains 14 scripts any of which could cause frontend SPOF if they’re not loaded async.
Frontend SPOF is a real problem that needs more attention. Website owners should use async snippets and patterns, monitor real user page load times, and look beyond averages to 95th percentiles and standard deviations. Doing these things will mitigate the risk of subjecting users to the dreaded blank white page. A chain is only as strong as its weakest link. What’s your website’s weakest link? There’s a lot of focus on backend resiliency. I’ll wager your weakest link is on the frontend.

[Originally posted as part of PerfPlanet's Performance Calendar 2011.]

Luis Cameroon

Reading List #10

Articles

Slides

Videos

Generator updates

Reading List #9

Reading List #8

Web Standards

Reading List #7

A List of Programming Screencast Series

Reading List #6

Misc

Reading List #5

Web Standards

Industry

Misc

CSS3 Transitions: Thank God We Have A Specification!

Table of Contents

Specifying A Transition

CSS Properties to Transition

Duration of a Transition

Delay of a Transition

Timing Functions

When A Transition Is Complete

Transitionable Properties

Priority of Transition Properties

Transitioning From And To auto

Implicit Transitions

Transitions And Pseudo-Elements

Background Tabs

“Invisible” Elements

Transitioning Before The DOM Is Ready?

Rendering Quirks

Recommendations For The Specification

Use The delay, Luke!

Conclusion

Related Content

Reading List #4

HTML5, Responsive, NEWT

DRM corner

Social Meeja corner

Reading List #3

NEWT, innit?

Industry

Misc

Reading List #2

NEWT

Opera/ WebKit switch

Industry

Misc

Reading List #1

Articles & tutorials

Tools

Reading List

Interoperability corner

Differences Between CSS2.1 and CSS3+

New Properties

New Values

New Selectors

Other Miscallaneous New Features

Features Still in Flux

Summary

Building Responsive Layouts

Responsive web design link hubs

Responsive web design articles, tutorials, and tools

Mobile viewports

Dealing with IE 6-8 support

Fluid/liquid layout

Responsive web design inspiration and design patterns

Related Posts by Zoe Gillenwater:

The Code Side Of Color // Hex Colors

Code Demands Precision

Breaking Hexadecimals Into Manageable Bytes

Shortcuts In Hex

Make Hexadecimals Work For You

Keep Shades In Character

Faded Underlines

Better Body Copy

How To Warm Up Or Cool Down A Background

Transitioning From And To `auto`

Use The `delay`, Luke!