This website runs on Jekyll and it’s deployed to Amazon S3. This is a guide on how I run development and staging environments, gzip and upload only modified files. Production and Development configs On production, I combine all my JS files into one and then minify it with Google Closure Compiler . On development, I include non-minified JS files one-by-one using plain-old script elements. I also…
Let’s build a temperature converter app in Backbone, React, Angular, Meteor and vanilla JavaScript. Vanilla JS °C ⇄ °F Vanilla JS is our baseline. Input values are synchronised using two event handlers, one on each input field. function c2f ( c ) { return 9/5 * c + 32 } function f2c ( f ) { return 5/9 * ( f - 32) } var celsius = document.getElementById ( 'celsius' ) var fahrenheit =…
On retina screens CSS pixels don’t match device (physical) pixels. A device pixel ratio of 2 means one CSS pixel equals two device pixels. Here are few ways to draw a one-device-pixel border. Half-pixel border border: 0.5px solid black; Cons: Works only in Firefox and Safari 8 (introduced in OS X Yosemite). border-image border-width: 1px; border-image: url(border.gif) 2 repeat; border.gif is a…
Playground Play Focus Snail Focus Zoom Focus Hug UI UX accessibility CSS JS SVG I performed 3 experiments to address some of the problems of Flying Focus . Focus Snail Flying Focus received good critique on Hacker News . This demo seems to move faster than eye tracking speed, and the animation appears to skip or flicker, and it go [sic] too fast to follow, especially if the widgets are far apart.…
Playground CSS JS HTML Placebo button Why? Keyboard navigation has a major downside: it’s not clear where the focus moves upon pressing the Tab key. Animation makes the transition more apparent. How? Flying Focus creates an element that is moving when the focus event happens. outline: 5px auto -webkit-focus-ring-color makes the element look like it has a focus. It only works in Safari and Chrome.…
When I develop this website locally I use n12v.dev virtual host. n12v.dev/index.html is just ~/Sites/n12v.com/public/index.html on the file system. You can achieve this by either using Pow or /etc/hosts and Apache. The easy way: Pow Install curl get.pow.cx | sh Use ln -s ~/Sites/n12v.com ~/.pow/n12v Now n12v.dev serves index.html. To serve a directory with a name different from “public”: mkdir…
None of the browsers handle CSS transition from/to auto values correctly. width: 200px width: auto CSS transitions Expected I hope one day transitions to/from auto values will work out of the box in all major browsers. Meanwhile, read on. Bug reports for WebKit and Firefox . From auto width: 200px width: auto element.style.width = getComputedStyle(element).width element.style.transition = 'width…