Flexbox Cheatsheet Cheatsheet

Handy tool to make a customizable chart.



Looks interesting.

Currently on a kickstarter-like campaign where you pre-order a year of discounted subscription for a v1 in late Spring 2015.


Tags: design AI idea

Original science infographics by a designer with a molecular biology degree.

Science illustration FTW



For exemple this:

for(i=0;A=$$("*")[i++];)"solid hsl("+(A+A).length*9+",99%,50%)1px"

will outline all elements with a 1px line in a color depending on the type of the element (provided you have the $$ alias to document.querySelectorAll).

Here is a CSS debugger bookmarklet for your convenience.


Gestalt is a term used in psychology which expresses the idea that the whole of something is more important to our understanding than the individual parts. The Gestalt principles describe the way our mind interprets visual elements.

The principles I find most helpful day-to-day are:

  • Similarity
  • Enclosure
  • Continuation
  • Closure
  • Proximity
  • Figure-Ground

We’ll look at a few examples of each principle and break down how it informs the way you interact with an interface.



Simple element queries technique by Scott Jehl.

You declare your breakpoints in CSS:

.elt:before {
    display: none;
    content: "300 410 500";

And address them with an attribute selector:

.elt[data-minwidth~="410"] { /* ... */ }

Requires javascript though. The script is quite simple:

// An element query experiment by @scottjehl
(function( w ){
    function updateModAttributes(){
        var mods = w.document.querySelectorAll( ".mod" );
        for( var m = 0; m < mods.length; m++ ){
            var mod = mods[ m ],
                breakpoints = w.getComputedStyle( mod, ":before" )
                    .getPropertyValue( "content" ),
                widths = breakpoints.replace(/[^\d ]/g,"").split( " "),
                modWidth = mod.clientWidth,
                minWidths = [];

            for( var i = 0; i < widths.length; i++ ){
                if( parseFloat( widths[ i ] ) <= modWidth ){
                    minWidths.push( widths[ i ] );
            mod.setAttribute( "data-minwidth", minWidths.join( " " ) );

    w.addEventListener( "load", updateModAttributes, false );
    w.addEventListener( "resize", updateModAttributes, false );
})( this );

An interesting case study by Luke Wroblewski on the UX of Polar.

Also available as an iBook.

Tags: ux ebook mobile

FT Labs introduces an auto-polyfill library:

Short version: drop this in the <head> of your HTML:

<script src="//"></script>

and your browser has (basic/poyfillable) support for a lot of modern features. You can also specify which feature you want…


Have I been pwned? allows you to search across multiple data breaches to see if your email addresses has been compromised.

Tags: security