The Power of HTML5 & CSS3

thechangelog:

Ron DeVera reached out to us a few weeks back to let us know about a new project he’s working on at Mint Digital called AssetHat.

AssetHat is a Rails gem that hopes to make the web a little bit quicker by making front-end assets (CSS, JS and images) load faster (especially on mobile devices). It does the usual magnification and concatenation, but unlike others, AssetHat automatically takes advantage of Google’s CDN and cdnJS for loading common third-party libraries. There’s even a little switch to enable LABjs mode, so you can quickly A/B test to see whether LABjs is right for their site.

Google said it best, “Every millisecond counts. Nothing is more valuable than people’s time.” So do what you can to save your users some time and make your project faster.

Example usage

AssetHat is super-easy to set up for Rails 3 (or even Rails 2.3 with Bundler):

Before AssetHat

app/views/layouts/application.html.erb:

<%= stylesheet_link_tag 'reset', 'application', :cache => 'application' %>
<%= javascript_include_tag Rails.env.production? ?
      'http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js' :
      'jquery-1.6.0' %>
<%= javascript_include_tag 'plugin1', 'plugin2', :cache => 'plugins' %>
<%= javascript_include_tag 'application' %>

app/views/layouts/admin.html.erb:

<%= stylesheet_link_tag 'reset', 'admin', :cache => 'admin' %>
<%= javascript_include_tag Rails.env.production? ?
      'http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js' :
      'jquery-1.6.0' %>
<%= javascript_include_tag 'plugin1', 'plugin2', :cache => 'plugins' %>
<%= javascript_include_tag 'admin' %>

After AssetHat

app/views/layouts/application.html.erb:

<%= include_css :bundle => 'application' %>
<%= include_js  :jquery, :bundles => ['plugins', 'application'] %>

app/views/layouts/admin.html.erb:

<%= include_css :bundle => 'admin' %>
<%= include_js  :jquery, :bundles => ['plugins', 'admin'] %>

Use a config file to keep your layouts lightweight config/assets.yml:

css:
  bundles:
    application: ['reset', 'application']
    admin:       ['reset', 'admin']
js:
  vendors:
    jquery:
      version: 1.6.0
  bundles:
    plugins:     ['plugin1', 'plugin2']
    application: ['application']
    admin:       ['admin']

Installation

Installation and configuration is easy, read the details at their site, or check out the readme for full details.

Learn more

• Read Mint Digital’s initial blog post for AssetHat with some nice performance stats from a bunch of production sites
• Check out the readme for a walkthrough on configuring and integrating AssetHat
• Read the Rdoc’s for deeper details of how AssetHat works

[Source on GitHub] [Homepage]

Adding interactivity and animations to a design doesn’t have to be complicated or make the website inaccessible when you use modern Web standards. In this article, we’ll explore several examples and theories that employ CSS, HTML, SVG, the canvas element and JavaScript. Some of these techniques you’ll know, others you may not have considered. Let’s start with the basics.

thechangelog:

Thomas Fuchs, JavaScript pro featured recently on Episode 0.3.9 has teamed up with his wife Amy Hoy to bring you the DOM Monster, a cross-browser bookmarklet that analyzes your markup and offers tips to improve page performance.

Other tools such as Y! Slow provide similar analysis and integrate with Firebug, but the DOM Monster aims to be a cross-browser solution. Got ideas to improve the project? Check out the project source and submit a patch.

[Source on GitHub] [Homepage]