Retina sprites with SCSS and Compass

First of all, if you haven't used SCSS and Compass you have been missing out. Don't get me wrong, there's nothing wrong with CSS per se, it's only that SCSS is better. Compass adds additional yum yum to SCSS making it my (and many other way smarter peoples) preferred solution for styling web-projects.

Compass has an excellent solution for creating a so called "spritemap" - in short, it creates it for you. However, Compass does not provide an option for using "retina" or "HIDPI" sprites, which translated into human speech means images which are displayed at half their size. However, Compass gives you an insane amount of control over your sprites, so using some Compass functions I was able (with the help of the Internet) to create a simple mixin which will output a retina sprite (code below, if the gist is not showing up you can also find it here: https://gist.github.com/jornki/4034013).

To use it, simply pass the name of the sprite into the mixin. Let's say that one of the images in the "icons/" folder is named "liara.png". You want to display this image in a div called "hot-alien". The code for this would simply be "@include retina-sprite(liara);" Cool ey!?


Comments or questions? Ping me over at ADN..

Nifty stuff #1

Nifty stuff is a series of blog post delving into nifty stuff I have made and or discovered. Since I'm kinda shary I share my discoveries, for your benefit I hope..

In this first «nifty stuff» I take a look at 4 (four) quite different nifty things, this time in the world of web-development.

1. Coda 2 Web Toolkit plugin. Last month Panic released Coda 2, their all in one window web-development platform/editor. Almost instantly a flurry of plugins and syntax modes appeared for this awesome editor. One of them is "Coda PHP & Web Toolkit", which is what the name implies an extension for Coda 2 which allows you to tidy, minify and lint you HTML, CSS and JavaScript code. It can also do a bunch of crap with PHP, so I guess it would be great for that as well. I use it primarily for linting JavaScript and tidying CSS...and it's awesome!
2. jQuery ++. This is an extension to jQuery which adds some cool features like comparison helpers and better event handling. Most of all I like that the animate method will support CSS transitions after adding this library (it's not CSS animations which the doc actually say). This alone makes it worth using this if you are dependent on jQuery.
3. Printing and HTML 5 elements. Since there are a lot of old shitty browsers like Internet Explorer 8 or worse out there and these does not support HTML structural elements, we need libraries like Modernizr with HTML5Shiv. This makes it so that the older crap shit browsers don't fall over and flop around like a slimy fish on land when they encounter something groundbreaking like a "section" tag. However, the regular HTML5Shiv does not fix this issue for printing, you need to use HTML5Shiv with printshiv for this...so remember that..okay
4. Native query selectors. You have probably used jQuery to select DOM elements right? But did you know that jQuery actually uses a native (built into the browser) method for selecting the element if this method is available? There are two methods called "querySelector" and "querySelectorAll". Like jQuery, these methods take CSS style selector strings and returns either the first or all elements as a NodeList (kinda like an Array). These methods are supported in all modern browsers and even in IE 8 or newer!!! So if you're not supporting below IE 8 (which you shouldn't!) you might not need the overhead of jQuery at all.

JavaScript tap event for touch devices

JavaScript touch events are awesome and they are standardized (Candidate recommendation) by the W3C, making them safe to use for building your touch enabled web-apps. There are 4 touch events:

1. "touchstart" - When a finger in placed on the screen
2. "touchmove" - When a finger moves on the screen
3. "touchend" - When a finger is lifted from the screen
4. "touchcancel" - When touch is canceled, like when an alert appears or a call comes in.

But, what constitutes a "tap", like a "click" in the mouse model you might wonder. There a several answers to this. A tap might be simply a "touchend". But, what if the user places a finger on a button and then flicks the screen up so that the button goes off screen, now the button will fire a "touchend" when it's off screen. And what if the user holds a button for a long time and then lets go, should that fire an event?

To combat these issues I've created a Javascript library (and a jQuery plugin) which will handle all of this for you. You simply add the library or plugin to your project and then you add the spanking new "tap" event to your button or what have you. The "tap" library will then try to take care of the issues mentioned above.

Using it is simple:

 var tapHandler = function(e){  
    //Do something  
 }  
 document.getElementById('aDiv').tap(tapHandler);

Take a look at the documentation inside of the source files and of course, look at the demo.

• Get the source
• Checkout the demo

Form input placeholder shiv

As part of the HTML 5 form features, the attribute "placeholder" was introduced for input elements supporting text input (including password). This is awesome and does indeed make form input elements not only more accessible, but it also paves the way for "label less" UI on devices with no so much screen real-estate. However, as with all new things HTML 5 this too is not fully supported on every major browser. Enter the not so elegantly named "placeholderShiv".

I wrote this library to enable the "placeholder" feature in every browser. It will basically grab all the valid input elements and append to them functionality which will mimic the native placeholder feature. All you need to do is to assign values to the input elements and add the library of your choice. This value will be turned into a placeholder text. Try the demo to see it in action.

«PlaceholderShiv» comes in three versions, a Coffeescript version, a JavaScript version and a jQuery plugin. The Coffeescript and the JavaScript ones does not have any dependencies on any other libraries and they are somewhat faster than the jQuery plugin. However, the jQuery version will support browsers which does not implement "addEventListener" and it is somewhat easier to use if you're already using jQuery.

• Check out the demo
• Download the source

Extending the Modernizr.prefixed method

Starting with version 2.0 the awesome feature detection js library Modernizr includes a method called "prefixed". In short, this method will give you the correct prefixed version of a CSS 3 property which still requires this. E.g: -webkit, -moz and so on. Used in conjunction with the jQuery library you can use Modernizr.prefixed for typical tasks like adding a transition to an element in script without having to clutter up your CSS with a gazillion lines of vendor prefixes.

However, the Modernizr.prefixed method will always return the JavaScript version of the style property. Modernizr.prefixed('transform') will return "WebkitTransform" in a Webkit browser. If you are using jQuery.css() this might not be a problem as jQuery.css() understands this format as well, if it's passed as the property (first parameter). However the prefixes might also be needed as the actual value of an style property. Consider the following:

 $('#myDiv').css(Modernizr.prefixed('transition'),Modernizr.prefixed('transform') + ' 1s linear');  

This snippet will attempt to set a transition on the "myDiv" HTML element using jQuerys´ "css" method and the Modernizr.prefixed method, but it will fail to do so. Why? Well, since jQuery is awesome it will allow us to pass "WebkitTransition" or "-webkit-transition" (if in a webkit browser) as the first parameter to the "css" method. For the second parameter jQuery.css() expects a CSS formatted string «-webkit-transform 1s linear», however the code above will generate «WebkitTransform 1s linear», which is not valid CSS and hence the entire method fails. What is needed is a Modernizr method which spits out a CSS formatted and prefixed string, let's call it "Modernizr.cssprefixed". Sadly this is not a part of Modernizr as of today, but the solution is given in the Modernizr.prefixed documentation, we only need a more convenient version of the RegExp given in the docs.

 Modernizr.cssprefixed = function(str)  
 {  
      return this.prefixed(str).replace(/([A-Z])/g,function(str,m1){   
         return '-' + m1.toLowerCase();   
      }).replace(/^ms-/,'-ms-');   
 }  

Now that we have this spanking new method we can update our line of code to:

 $('#myDiv').css(Modernizr.prefixed('transition'),Modernizr.cssprefixed('transform') + ' 1s linear');  

Voila, it works!