This is a gauge (well kind of) made with Ember Components and CSS3 transforms. The pointer angle is bound to those 2 inputs (see the jsbin just bellow) in which you can define either the pointer current value and the whole gauge maximum value.
The main idea of having a gauge component is that you can use and re-use it anywhere in your Ember app(s), and its main purpose is to indicate a current value relative to a maximum value. So, if it could have 2 attributes value and maxValue that would be perfect.
On mobile phones / tablets, where touch gestures comes into place, it’s sometimes hard to target little links with your finger. Mostly because it was primarily designed for a desktop use. Jacob Rossi, an Internet Explorer 10 engineer who worked on the awesome Microsoft’s pointer API (yeah true story man), said at the 2013 W3Conf that every touch oriented elements should be at least 40×40 pixels wide, to ensure the best user experience.
I was struggling trying to animate the width of a <div> from a fixed px width to a 100% (or auto) width. The idea was to have a completely fluid 2 columns layout. A main col taking all the space and a right col with a fixed width. Then, on a particular user action, the right col animates until taking all the remaining space (overlapping the main col). I needed to achieve the effect only with css transitions.
I recently had to reproduce a fancy “kinda separator” and I gave it a try in pure css. The result is quite cool. It works like a charm in ie9, Chrome, Safari, Opera and Firefox.
If you’re using Firefox you’ll notice (or not) that the dashed rounded border is “solid” rather than being “dashed” (inside the white circle)… Well there’s a bug about it in Firefox opened since 2007… dashed border simply doesn’t work when a border-radius is applied to it. Too bad… Well the guys at Webkit’s have the solution, wonder why Firefox didn’t implemented it jet.
Anyway the :after shadow border works great every where I tested it so it’s a quite robust ie9+ technique. I need to apply a degraded version for ie8, maybe just a simple grey border.
Here’s the Codepen version. You can play with the tabs to see how it works underhood.
As a front end developer I’m sometimes confront to projects where I need to deal with only static HTML files. Being able to use inclusions in PHP makes it so much easier to maintain.
I’m a Git fan and I usually use Github as remote repository, it allows the creation of a gh-page branch. Basically it means you can have a static web page for your Github project for free. Really it’s easy here’s the Github doc.
Github pages are awesome but it’s then impossible to use php includes in them…