Multicolor Fonts in the browser

Seemingly out of nowhere, big guys like Apple, Google, Microsoft, Mozilla and Adobe are proposing multicolor font formats, and rushing to have them implemented in browsers and OSes. This sudden interest is not so much fueled by typographers, designers or web developers, but by an unlikely group: teenagers. More specifically: teenagers who demand their communication …

Two Way data-binding using Object.observe()

Object.observe(), part of a future ECMAScript standard, is a method for asynchronously observing changes to JavaScript objects … without the need for a separate library. It allows an observer to receive a time-ordered sequence of change records which describe the set of changes which took place to the set of these objects. Essentially, the article …

Advanced Animation Path with SVG

Neat animation of a roller-coaster following the tracks underneath. Uses an SVG as the animation path. The animated object itself is animated using tween.js. Also contains some cleverness to actually make the animated object point into the direction it is moving (viz. the roller-coaster its nose points towards the direction it is going, even inside …

Responsive tables with Tablesaw

Set of jQuery plugins by the clever folks of Filament Group for responsive tables. Comes with a few solutions such as stack (picture above), Toggle (where one can choose which columns to show), and Swipe (where you can scroll horizontally through the columns). Columns can also be sorted. Just set some data-* attributes on your …

Using the :target pseudo-selector for alternative layouts

Sometimes I want to see all the images [of my site] on a grid [instead of the regular layout]. I could have created a PHP script that responded to a querystring. Or a small JavaScript. But instead I used the :target pseudo-selector. It’s very simple. Neat trick by Vasilis: give the root html element an …

CSS `will-change` Property

#header { will-change: opacity; } Modern CSS renderers perform a number of complex optimizations in order to render webpages quickly and efficiently. Unfortunately, employing these optimizations often has a non-trivial start-up cost, which can have a negative impact on the responsiveness of a page. The will-change property defined in the CSS Will Change Module allows …

How a Racoon became an Aardvark

“Sort of as a joke, I slipped in the ‘also known as the Brazilian aardvark’ [at the Wikipedia entry of the coati] and then forgot about it for awhile.” When Breves made the change, he assumed that someone would catch the lack of citation and flag his edit for removal. Over time, though, something strange …