jQuery Tip: Image Preloading

Apart from using JavaScript to pre-load images, you can very easily use a little bit of jQuery to do the same:

Demo: http://jsfiddle.net/ucv4g/

If you want to use a jQuery plugin for image preloading, here are a few:

https://github.com/farinspace/jquery.imgpreload
https://github.com/dreamerslab/jquery.preload

JavaScript Testing Presentation

Ryan Anklam from Netflix does a nice presentation at this years HTML5Dev Conference on how to test your JavaScript with some of the popular testing frameworks such as Jasmine, Mocha, QUnit and others.

CSS Tip: Adjacent Sibling Selector vs nth-child

With CSS, if you need to style a specific child sibling you can use the nth-child selector:

But if you still need to support legacy browsers (IE8), you need to use a :first-child selector and an adjacent sibling selector instead:

jQuery Tip: Binding Multiple Events

When you need to have an element respond to multiple events (i.e. desktop and mobile), you can use the bind() jQuery  method.

CSS Tip: Character Encoding

The first line of your CSS file should have:

The @charset CSS at-rule specifies the character encoding used in the style sheet.

Some say it is not important anymore because  a browser user agent can easily deduce the character encoding, but I have seen on rare occasions where omitting it has produced unsupported issues on  CSS properties on older browsers (i.e. :before).

So better safe, than sorry. 

Reference: http://www.w3.org/International/questions/qa-css-charset.en.php

CSS Tip: Handling Retina Images

If you want a images on your website (especially image buttons with text) to look sharp on retina displays (iPhone 4/5/6, iPad Mini, iPad 3/4), you can create a separate image with double the pixel density.

Which only means creating a version of your images at twice the size, so a 200 x 200px image would become 400x400px. These super sized images are then displayed in the original image size dimensions, which helps create that smooth and crisp appearance on high pixel density screens.

Then just create a media query for only displays that have a pixel ratio of 2:

You should use Apple’s naming convention of @2x for retina images.

There are also JavaScript libraries such as retina.js to handle the media query aspect of it.

CSS Tools and Methodologies Presentation

Brad Westfall gave a great presentation on CSS methodologies.  If you want to learn how to write CSS the right way, you need to watch this, really.



Page 1 of 19123...10...Last »