milov.nl

Interaction design • webdevelopment • web art • photography

December 2012

24 ways: Flashless Animation http://24ways.org/201206

RT @sgalineau: I had never heard of the 'all' CSS property until today http://dev.w3.org/csswg/css3-cascade/#all

RT @neave: Very silly :) http://responsiveurl.co.uk/

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) http://is.gd/gqb4U4 (media.navigator pref needs to be turned on)

StackOverflow - What was the strangest coding standard rule that you were forced to follow? http://stackoverflow.com/questions/218123/what-was-the-strangest-codin g-standard-rule-that-you-were-forced-to-follow (via http://www.reddit.com/r/programming/comments/148prj/humorous_stack_ove rflow_thread_what_was_the/ )

RT @twholman: Oooh! amazingly sexy #javascript chess - http://codepen.io/juliangarnier/full/BsIih - by @JulianGarnier

November 2012

RT @vasilis: Op zoek naar een alternatief voor een deel van de functionaliteit van Adobe Shadow? http://viljamis.com/blog/2012/remote-preview/

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: http://www.zeldman.com/2012/11/21/in-defense-of-descendant-selectors-a nd-id-elements/

RT @csswizardry: New blog post: Code smells in CSS: http://bit.ly/URRXQd cc. @chriscoyier

RT @JoelSutherland: How responsive web designers imagine user behavior: http://i.imgur.com/YkbaV.gif

RT @jedisct1: All the crypto code you’ve ever written is probably broken: http://tonyarcieri.com/all-the-crypto-code-youve-ever-written-is-proba bly-broken

RT @newsyc20: 9 ways to use cURL everyone should know http://bit.ly/WL5jEP (http://bit.ly/WL5hwB) via @KrisJordan #trending #guru

RT @ChromiumDev: DevTools: the new console.clear() and styled console logs make for a powerful combo along with console.group: http://twitter.com/ChromiumDev/status/266256400022396928/photo/1

The NYT's visual election outcome explorer - how we made the interactive D3 decision tree http://source.mozillaopennews.org/en-US/articles/nyts-512-paths-white- house/ (via http://news.ycombinator.com/item?id=4744147 )

RT @kylebarrow: My overview of mobile overflow scrolling support, including the wobbly bits: http://barrow.io/overflow-scrolling

Non-Confusing, Visually Correct Slider Toggle UI http://www.chrisnorstrom.com/2012/11/invention-multiple-choice-windowe d-slider-ui/ (via http://news.ycombinator.com/item?id=4742535 )

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 http://twitter.com/robinberjon/status/258847106423463936/photo/1

RT @paul_irish: Cool: recent StackOverflow question http://stackoverflow.com/q/12592473/89484 led to someone make a CSS Diff DevTools extension http://stackoverflow.com/q/12592473/89484

When in git - animated gifs for git users: http://wheningit.tumblr.com/

September 2012

RT @codepo8: A clever trick to sync your Sublime Text Settings across devices using Dropbox http://stackoverflow.com/questions/11365948/how-to-save-restore-sublim e-text-2-configs-plugins-to-migrate-to-another-compute

How to Choose Colours Procedurally http://devmag.org.za/2012/07/29/how-to-choose-colours-procedurally-alg 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 http://www.quirksmode.org/blog/archives/2012/09/apples_mobi_ins.html

my previous css-only animation (iris - http://milov.nl/e/123 ) is featured on the home page of @CodePen, neato: http://codepen.io/

RT @mathias: Detailed research on GPU acceleration and `requestAnimationFrame` across browsers by @zoltandulac: http://mths.be/bjk

css fire flower on codepen: http://codepen.io/vmilo/pen/vioHE (alternate version revealing the element/shadow structure: http://codepen.io/vmilo/full/huDKn )

my phone can't show char ✽ (HEAVY TEARDROP-SPOKED ASTERISK), so fire flower becomes fire squares http://milov.nl/e/124 http://twitter.com/milo/status/249926131267026944/photo/1

made another css-only animation, 124 - fire flower: http://milov.nl/e/124

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 http://miniqr.com/docs/demo/index.html (via http://html5weekly.com/archive/53.html )

RT @troyhunt: Reddit's response headers still crack me up: http://yfrog.com/nvidppp <- wonder if they've snared anyone?!

We Are Back http://www.wab.com - classic 90s cracktros redone in js/canvas (via @threeze, @waxpancake) #demoscene

August 2012

The Best Interface is no Interface - http://www.cooper.com/journal/2012/08/the-best-interface-is-no-interfa 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 http://www.troyhunt.com/2012/07/lessons-in-website-security-anti.html

fixed 123 http://milov.nl/e/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: http://milov.nl/e/123

pareidoloop cleverly generates "faces" by combining random polygons, mutation, face detection: http://iobound.com/pareidoloop via http://javascriptweekly.com/archive/88.html

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": http://ariya.ofilabs.com/2011/08/hall-of-api-shame-boolean-trap.html

RT @rmurphey: What's wrong with @netmag's "Optimise your JavaScript" post https://gist.github.com/3086328 (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: http://js.gd/2qa

RT @morgan3d: Article on efficient and elegant hex and triangle grids indexing http://www-cs-students.stanford.edu/~amitp/game-programming/grids/

wtf mobile web http://wtfmobileweb.com via @brad_frost

"The British Countryside Generator, as we’re calling it, is our procedural world engine for Sir You are Being Hunted." http://big-robot.com/2012/07/02/procedural-british-countryside-generat ion/

hover effects in my css-only anim 120 http://milov.nl/e/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 http://www.phoboslab.org/log/2012/06/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 http://tympanus.net/Tutorials/3DHoverEffects/ via http://html5weekly.com/archive/42.html

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

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: http://www.flickr.com/photos/subblue/

RT @mathias: TIL that WebKit supports the non-standard iframe@viewsource: http://mths.be/bhn /via @0x6D6172696F

RT @sgalineau: This is how I write test assertions #testtwf http://twitter.com/sgalineau/status/213844056608997376/photo/1

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: http://jsfiddle.net/keithclark/xhFZQ/8/embedded/result/

code.flickr: Parsing Exif client-side using JavaScript http://code.flickr.com/blog/2012/06/01/parsing-exif-client-side-using- javascript-2/

RT @fabynou: Just finished Doom3 Source Code Review: http://fabiensanglard.net/doom3/index.php

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” (http://meyerweb.com/eric/css/colors/hsl-from-rgb.html). Not sure I like this one as much, but it’ll do for now.

Creating Fast Buttons for Mobile Web Applications https://developers.google.com/mobile/articles/fast_buttons via http://news.ycombinator.com/item?id=4083357

RT @twholman: The new twitter logo with #css - http://labs.upperdog.se/twitter-logo-in-css/ - Don't forget to mouse-over!

Testing 3 million hyperlinks, lessons learned http://samsaffron.com/archive/2012/06/07/testing-3-million-hyperlinks- lessons-learned via http://news.ycombinator.com/item?id=4077891

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: http://daeken.com/superpacking-js-demos

fun with Chrome css filter: javascript:void(deg=0,setInterval(function(){document.body.style.WebkitFilter='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 http://distilledfromthehype.com/ via @distilledhype

oldskool racing game pseudo-3d rendering explained http://gorenfeld.net/lou/pseudo/ (via http://mefi.us/w/116275 )

categorizing different ways to implement 2d platform games http://higherorderfun.com/blog/2012/05/20/the-guide-to-implementing-2d -platformers/ (via http://mefi.us/w/116275 )

RT @paul_irish: A little history on three.js and @mrdoob's tale of getting into coding: https://github.com/mrdoob/three.js/issues/1960

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: http://opensourcehacker.com/2012/05/11/sublime-text-2-tips-for-python- and-web-developers/ (via @paul_irish)

RT @jordanmoore: Source shuffling - serving the right image for the right device using @adactio's Conditional CSS - http://www.jordanm.co.uk/post/22964442013/source-shuffling-responsive- images-based-on-media #rwd

RT @mathias: Why you shouldn’t serve content (e.g. html5shiv.js) directly from *.googlecode.com: http://mths.be/bgn

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

121

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 http://dcurt.is/pixel-fitting via http://news.ycombinator.com/item?id=3950740

RT @paulrouget: http://w3cmemes.tumblr.com http://mozillamemes.tumblr.com http://webkitmemes.tumblr.com

April 2012

RT @brad_frost: Use your phone to control a game played in your desktop browser! Awesome! http://jsdo.it/controller #ffly #fftweet

RT @morgan3d: Excellent random island generation algorithm, with code and derivation: http://www-cs-students.stanford.edu/~amitp/game-programming/polygon-ma p-generation/

Older posts…