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.
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 →
Yup, that's all.
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.
<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>
window.sr = new scrollReveal();
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.
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.
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
Truly a collection of beautiful maps. A shame it’s not possible to watch the full resolution variants of the maps.
Beautiful Maps →
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 →
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 →
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 →
Great JSBin by Jake Archibald, showcasing 4 ways to vertically center elements in CSS. Technique 2 has my preference:
The great thing about CSS transforms is that the percentages are referenced to the element’s