Episode 3: Rails 4 and OS X Mountain Lion

spin.js

http://fgnass.github.io/spin.js/ for spinning pictures using pure css, no images in sight

Sprite Cow

Instead of serving multiple images, it is better to combine all images into one big image, which only requires one http request and then show define images as part of the overall sprite map using starting coordinates and length / height. http://www.spritecow.com/

UICloud

Lots of UI elements etc for inspiration, use http://ui-cloud.com/

IconMonstr

Lots of free icons http://iconmonstr.com/

Episode 2: Retinafy your website

RetinaJS

Swaps out images using javascript if you are on a retina device by looking for images and then looking for corresponding images on the server with the additional '@2x' naming convention. e.g. images/star.png for the normal image and images/star@2x.png for the retina image. Download at http://retinajs.com/.

Sublime Text tips

Some great short cuts for sublime text at http://blog.alainmeier.com/post/27255145114/some-things-beginners-might-not-know-about-sublime-text.

Episode 1: CSS and JavaScript Tools

Caesar

Calculate more complex animation curves http://matthewlein.com/ceaser/

Scrollorama

Some cool effects as you scroll down the page with the scrollorama javascript library at http://johnpolacek.github.io/superscrollorama/

Meteor

Meteor is a javascript framework which:

  • can run a local webserver to server your html, css and javascript files
  • updates your browser automatically when a file is updated and saved
  • insert into a database (e.g. mongo) and the screen will also update
  • mongo api calls possible on a client (not just the server)
  • doesn't lose state of the application when javascript is updated / redeployed

CSS Responsive Frameworks