Interaction design • webdevelopment • web art • photography

December 2012

24 ways: Flashless Animation

RT @sgalineau: I had never heard of the 'all' CSS property until today

RT @neave: Very silly :)

confusing keyboard-using readers of your blog: trigger page nav on each press of left/right arrowkey, without checking if Alt-key is pressed

RT @paulrouget: Head tracking and 3D effect with WebRTC (works in Firefox, Chrome & Opera) (media.navigator pref needs to be turned on)

StackOverflow - What was the strangest coding standard rule that you were forced to follow? g-standard-rule-that-you-were-forced-to-follow (via rflow_thread_what_was_the/ )

RT @twholman: Oooh! amazingly sexy #javascript chess - - by @JulianGarnier

November 2012

RT @vasilis: Op zoek naar een alternatief voor een deel van de functionaliteit van Adobe Shadow?

exploring the differences between android v2.3.7 and v4.1.1. glad to now play around with a mobile browser that supports 3d css transforms

RT @smashingmag: "IDs have their place in CSS as well." — In Defense of Descendant Selectors and ID Elements by @zeldman: nd-id-elements/

RT @csswizardry: New blog post: Code smells in CSS: cc. @chriscoyier

RT @JoelSutherland: How responsive web designers imagine user behavior:

RT @jedisct1: All the crypto code you’ve ever written is probably broken: bly-broken

RT @newsyc20: 9 ways to use cURL everyone should know ( via @KrisJordan #trending #guru

RT @ChromiumDev: DevTools: the new console.clear() and styled console logs make for a powerful combo along with

The NYT's visual election outcome explorer - how we made the interactive D3 decision tree house/ (via )

RT @kylebarrow: My overview of mobile overflow scrolling support, including the wobbly bits:

Non-Confusing, Visually Correct Slider Toggle UI d-slider-ui/ (via )

October 2012

RT @cubiq: once we recreated all possible objects with CSS can we start using SVG?

RT @robinberjon: The famously interoperable Device Orientation API #parisweb

RT @paul_irish: Cool: recent StackOverflow question led to someone make a CSS Diff DevTools extension

When in git - animated gifs for git users:

September 2012

RT @codepo8: A clever trick to sync your Sublime Text Settings across devices using Dropbox e-text-2-configs-plugins-to-migrate-to-another-compute

How to Choose Colours Procedurally orithms/ (via @JoshuaDavis )

1.notice IE jQuery error; 2. dl slightly newer unminimized jQuery simply to debug specific line; 3. find bug has disappeared like magic, yay

RT @ppk: New blog post: Apple’s .mobi insanity

my previous css-only animation (iris - ) is featured on the home page of @CodePen, neato:

RT @mathias: Detailed research on GPU acceleration and `requestAnimationFrame` across browsers by @zoltandulac:

css fire flower on codepen: (alternate version revealing the element/shadow structure: )

my phone can't show char ✽ (HEAVY TEARDROP-SPOKED ASTERISK), so fire flower becomes fire squares

made another css-only animation, 124 - fire flower:

remarkable how much faster it is to run js at bottom of body instead of on document.ready, especially with 3rd party adservers in the mix

100% Client Side QR Code Reader using getUserMedia() + Webcam (via )

RT @troyhunt: Reddit's response headers still crack me up: <- wonder if they've snared anyone?!

We Are Back - classic 90s cracktros redone in js/canvas (via @threeze, @waxpancake) #demoscene

August 2012

The Best Interface is no Interface - ce.html/ (via @EduardoMorais )

RT @rtfeldman: "You spent all this time coming up with ten lines of code?" "No, I spent all this time *getting it down to* ten lines of ...

RT @thomasfuchs: Responsive websites are really hard to use when you are used to the desktop version. No zooming means no non-linear access.

July 2012

RT @troyhunt: Just blogged: Lessons in website security anti-patterns by Tesco

fixed 123 counter-rotation on ipad by replacing (unsupported?) animation-direction:reverse with separate animation rule

highlight images with missing width/height params

A bit of jQuery I used recently for debbugging, to highlight all img-tags with missing width/height params:
$('img:not([width]),img:not([height])').css({border: '3px dashed red'})

Here's a plain js version that works without jQuery: document.styleSheets[0].insertRule('img:not([width]),img:not([height]){border: 3px dashed red}')

123 (css animation) - combined my old fave, border-style dashed, w/ border-radius 50%. Only works in Chrome, it seems:

pareidoloop cleverly generates "faces" by combining random polygons, mutation, face detection: via

RT @ID_AA_Carmack: I was going to comment on use of booleans in API, and I found that it has an idiomatic name: "boolean trap":

RT @rmurphey: What's wrong with @netmag's "Optimise your JavaScript" post (with thanks to @cowboy @rwaldron & everyone else)

RT @Glinner: “I’d LOVE to download your app instead of going to the webpage I just tried to visit!”— No-one, ever. No-one in the future either.

RT @jsgoodies: 2d visibility; various algorithms to determine visibility in 2d games, includes live demos:

RT @morgan3d: Article on efficient and elegant hex and triangle grids indexing

wtf mobile web via @brad_frost

"The British Countryside Generator, as we’re calling it, is our procedural world engine for Sir You are Being Hunted." ion/

hover effects in my css-only anim 120 now also triggered on ipad touch events, thanks to replacing div's with a's

June 2012

RT @mahemoff: WordPress is so much the general-purpose CMS these days, I have to specify "blog" when searching for themes

RT @phoboslab: X-Type - Making Of

js screen.width/height on secondary displays

Just noticed a curious Javascript bug in Internet Explorer 9: the screen.width/height properties always return the dimensions of the main monitor, even when the active browser window is on the second monitor.

Upon further testing, it turns out Safari for Windows has the same problem. Chrome, Opera and Firefox all report the correct dimensions, however.

3D Thumbnail Hover Effects via

RT @attasi: I built a CSS 3D lighting engine. It's called Photon. What do think?

RT @mrtnkl: You can webkit-inspect the webkit inspector! Hit F12, click "undock into separate window" (bottom-left button), then hit F12 again. #yodawg

RT @subblue: Just uploaded a bunch of test scenes from my WebGL 3d renderer:

RT @mathias: TIL that WebKit supports the non-standard iframe@viewsource: /via @0x6D6172696F

RT @sgalineau: This is how I write test assertions #testtwf

RT @JSProfessor: Say goodbye to the pesky ternary operator: "[myResult1, myResult2][+myCondition];" #youreWelcome #greatForNesting

RT @keithclarkcouk: Just to see what it would look like: A 3D logo with lighting using webkit CSS masks, gradients and 3D transforms: Parsing Exif client-side using JavaScript javascript-2/

RT @fabynou: Just finished Doom3 Source Code Review:

RT @0xabad1dea: New rule: every website must disclose their password storage format on the signup page. Scared to disclose? It’s too weak.

RT @meyerweb: Another color visualization: “Getting HSL From RGB” ( Not sure I like this one as much, but it’ll do for now.

Creating Fast Buttons for Mobile Web Applications via

RT @twholman: The new twitter logo with #css - - Don't forget to mouse-over!

Testing 3 million hyperlinks, lessons learned lessons-learned via

RT @ngauthier: needed: `console.console()` which would have the browser console print out a message comforting the developer.

RT @schill: @meyerweb Also for fun, see encoding JavaScript into PNG data:

fun with Chrome css filter: javascript:void(deg=0,setInterval(function(){'hue-rotate('+(++deg)+'deg)'},55))

RT @grumpygamer: Crap. I just generated a GUID I didn't end up using. I feel bad.

RT @kissane: No other professional sector of the web breaks old URLs like newspapers. Just tried to read reviews of a 12-year-old movie. Zero for six.

May 2012

Distilled from the hype - hyperlinks for front-end developers via @distilledhype

oldskool racing game pseudo-3d rendering explained (via )

categorizing different ways to implement 2d platform games -platformers/ (via )

RT @paul_irish: A little history on three.js and @mrdoob's tale of getting into coding:

RT @schill: How I used Lynx to illustrate the importance of code to designers, circa 2004

RT @sgalineau: This srcset thing has certainly made a lot of people very responsive #seewhatididthere

RT @sgalineau: Making Sublime Text more awesome: and-web-developers/ (via @paul_irish)

RT @jordanmoore: Source shuffling - serving the right image for the right device using @adactio's Conditional CSS - images-based-on-media #rwd

RT @mathias: Why you shouldn’t serve content (e.g. html5shiv.js) directly from *

those js let's-fade-out-the-entire-page lightbox overlays and touch browsers continue to be an awkward annoying mix


Another css-only animation. Move mouse around to see the effect (works best in WebKit and Opera browsers)

Pixel-fitting – how antialiasing can ruin your logos and icons via

RT @paulrouget:

April 2012

RT @brad_frost: Use your phone to control a game played in your desktop browser! Awesome! #ffly #fftweet

RT @morgan3d: Excellent random island generation algorithm, with code and derivation: p-generation/

Older posts…