Pixel Track is a prototype connected display system. The display uses a mechanical ‘scanning’ based system for updating pixels. This means that the display consumes no power while it remains static. As a side effect, the scanning technology changes the pixel form and the qualities and behaviours of the sign change. The mechanical nature of …
Adaptive Placeholders
See the Pen Adaptive Placeholder by Danny King on CodePen. We’ve seen some floated labels before: when focussing a form field the placeholder seems to move towards a spot above the field. Adaptive placeholders goes a step further by also allowing one to change the text when something was entered into the field. Makes clever …
Google’s Driverless Cars
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 …
Continue reading “Two Way data-binding using Object.observe()”
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 …
Continue reading “Using the :target pseudo-selector for alternative layouts”
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 …