Chosen

chosen

Chosen is a library for making long, unwieldy select boxes more user friendly.

Also supports changing a multiple select list into a tag-style list, and doesn’t break keyboard functionality.

Chosen →

Elsewhere , , , , Leave a comment

Ambition

At the heart of this film is Rosetta, ESA’s real mission to rendezvous with, escort and land on a comet. A mission that began as a dream, but that after decades of planning, construction and flight through the Solar System, has arrived at its goal.

Its aim? To unlock the secrets hidden within the icy treasure chest for 4.6 billion years. To study its make-up and its history. To search for clues as to our own origins.

You might recognize Petyr Baelish ;-)

Rosetta: the ambition to turn science fiction into science fact →

Elsewhere , , Leave a comment

ScrollMe – A jQuery plugin for adding simple scrolling effects to web pages

<div class="scrollme">
    <div
        class="animateme"
        data-when="enter"
        data-from="0.5"
        data-to="0"
        data-opacity="0"
        data-translatex="-200"
        data-rotatez="90"
    >
        Yup, that's all.
    </div>
</div>

ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages. As you scroll down the page ScrollMe can scale, rotate, translate and change the opacity of elements on the page. It’s easy to set up and not a single line of javascript is required.

Must say I do like the fact that the data-when attribute accepts enter (= when the element enters the viewport), exit (= when the element exits the viewport), and span (= as long as the element is shown in the current viewport) as a value.

ScrollMe →

Elsewhere , , , , , , Leave a comment

scrollReveal.js – Easily reveal elements as they enter the viewport

<div data-sr="enter left please, and hustle 20px"> Foo </div>
<div data-sr="wait 2.5s and then ease-in-out 100px"> Bar </div>
<div data-sr="enter bottom and scale up 20% over 2s"> Baz </div>

<script src='/js/scrollReveal.min.js'></script>
<script>
  window.sr = new scrollReveal();
</script>

Just add data-sr to an element, and it will reveal as it enters the viewport. The data-sr attribute is waiting for you to describe the type of animation you want. It’s as simple as using a few keywords and natural language.

scrollReveal.js →

Related: the aforementioned Skrollr allows you to define CSS changes linked to the current scroll position. It doesn’t use natural language, but allows you to manipulate each CSS property individually. Must say I prefer that way of working more.

Elsewhere , , , , , Leave a comment

RAW – The missing link between spreadsheets and vector graphics

Just paste in some data from Excel, choose a style, map the dimensions, and you’re good to go. Built on top of D3.js

RAW →

Elsewhere , , Leave a comment

Beautiful Maps

beautifulmaps

Truly a collection of beautiful maps. A shame it’s not possible to watch the full resolution variants of the maps.

Beautiful Maps →

Elsewhere , , Leave a comment

Flexbox Cheatsheet Cheatsheet

flexboxsheet-extract

I set out to create a quick visual to summarize Flexbox when I run into these moments of pause in the future. I like to think of it as a little diagram (flow chart? decision tree-ish thing?) that is a cheatsheet…based on cheatsheets.

(That’s only an extract, shown above)

Flexbox Cheatsheet Cheatsheet →

Elsewhere , , , Leave a comment

Axiomatic CSS and Lobotomized Owls

owl_1

Despite its irreverent name and precarious form, the lobotomized owl selector is no mere thought experiment for me. It is the result of ongoing experimentation into automating the layout of flow content. The owl selector is an “axiomatic” selector with a voracious purview. As such, many will be hesitant to use it, and it will terrify some that I include it in production code. I aim to demonstrate how the selector can reduce bloat, speed up development, and help automate the styling of arbitrary, dynamic content.

An ode to the underused adjacent sibling selector (+), in combination with the universal selector (*)

Axiomatic CSS and Lobotomized Owls →

Elsewhere , Leave a comment

The end of apps as we know it

end-of-apps-6

The idea of having a screen full of icons, representing independent apps, that need to be opened to experience them, is making less and less sense. The idea that these apps sit in the background, pushing content into a central experience, is making more and more sense. That central experience may be something that looks like a notification centre today, or something similar to Google Now, or something entirely new.

The primary design pattern here is cards. Critically it’s not cards as a simple interaction design pattern for an apps content, but as containers for content that can come from any app.

The idea of cards, taken to the next level … “the notification is the interface”.

The end of apps as we know it →

Elsewhere , Leave a comment

Vertical centering is impossible in CSS lol!

JS Bin

Great JSBin by Jake Archibald, showcasing 4 ways to vertically center elements in CSS. Technique 2 has my preference:

.technique-2 {
  position: absolute;
  height: auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

The great thing about CSS transforms is that the percentages are referenced to the element’s width/height

Elsewhere , Leave a comment