session-wide client object caching; Jammit; PNG compressions; Image Maps;

Gemfile

@@ -12,6 +12,7 @@ gem 'sqlite3-ruby', :require => 'sqlite3'
 gem 'haml-rails'
 gem "sass"
 
+# for searching youtube
 gem "youtube_it"
 
 # for using last.fm api
@@ -24,6 +25,11 @@ gem 'redis-namespace'
 # for using 7digital api
 gem '7digital'
 
+# for asset packaging
+gem 'jammit'
+gem 'win32-open3-19' # win32-open3 in order to use POpen4 on Win32 (dependency of jammit)
+
+
 # for converting json/xml to object
 gem 'json'
 gem 'hashie'

Gemfile.lock

@@ -4,6 +4,10 @@ GEM
     7digital (0.0.6)
       peachy (>= 0.3.5)
       will_paginate (>= 2.3.15)
+    POpen4 (0.1.4)
+      Platform (>= 0.4.0)
+      open4
+    Platform (0.4.0)
     abstract (1.0.0)
     actionmailer (3.0.5)
       actionpack (= 3.0.5)
@@ -46,7 +50,7 @@ GEM
     faraday (0.6.1)
       addressable (~> 2.2.4)
       multipart-post (~> 1.1.0)
-      rack (< 2, >= 1.1.0)
+      rack (>= 1.1.0, < 2)
     gem_plugin (0.2.3)
     haml (3.1.2)
     haml-rails (0.3.4)
@@ -56,6 +60,8 @@ GEM
       railties (~> 3.0)
     hashie (1.0.0)
     i18n (0.6.0)
+    jammit (0.6.3)
+      yui-compressor (>= 0.9.3)
     jquery-rails (1.0.9)
       railties (~> 3.0)
       thor (~> 0.14)
@@ -90,6 +96,7 @@ GEM
     oauth2 (0.4.1)
       faraday (~> 0.6.1)
       multi_json (>= 0.0.5)
+    open4 (1.0.1)
     orm_adapter (0.0.5)
     paperclip (2.3.11)
       activerecord (>= 2.3.0)
@@ -142,9 +149,12 @@ GEM
     warden (1.0.4)
       rack (>= 1.0)
     will_paginate (2.3.15)
+    win32-open3-19 (0.0.1)
     youtube_it (1.4.3)
       builder
       oauth (>= 0.4.4)
+    yui-compressor (0.9.6)
+      POpen4 (>= 0.1.4)
 
 PLATFORMS
   ruby
@@ -155,6 +165,7 @@ DEPENDENCIES
   devise
   haml-rails
   hashie
+  jammit
   jquery-rails (>= 0.2.6)
   json
   mongrel (= 1.2.0.pre2)
@@ -170,4 +181,5 @@ DEPENDENCIES
   sqlite3
   sqlite3-ruby
   typhoeus
+  win32-open3-19
   youtube_it

app/controllers/application_controller.rb

@@ -1,5 +1,9 @@
+require 'jammit'
+
 class ApplicationController < ActionController::Base
   protect_from_forgery
   
+  #Jammit.package!
+
   before_filter { |c| @youtube_client = YouTubeIt::Client.new(:dev_key=>"AI39si600H1fRQ6HW1pHG89e-23Uxf44YHu5TsCJMhNf5hFaYWSSSyyrOIEcOX451sFeh_OZdbbA48_g6OInfTv042-Id163tg") }
 end

app/controllers/charts_controller.rb

@@ -1,4 +1,5 @@
 class ChartsController < ApplicationController
+  
   def index
     @charts = LastFM::Chart.getTopArtists 20
     LastFM::Request.run_queue!

app/views/layouts/application.html.haml

@@ -2,9 +2,9 @@
 %html
   %head
     %title Nineminutes
-    = stylesheet_link_tag "9minutes"
+    = include_stylesheets :common, :media=>'all'
     = javascript_include_tag "http://www.google.com/jsapi"
-    = javascript_include_tag :defaults
+    = include_javascripts :jquery, :plugins, :common
     
     = csrf_meta_tag
   %body
@@ -46,27 +46,27 @@
     #fullscreen
       %h2 Avril Lavigne
       %h1 Alice (In Wonderland)
-      #video Loading
+      #video= image_tag "examples/video-big.jpg"
       .sidebar
         .top
           = render :partial=>"layouts/player"
         %ul.play_list
+          %li
+            %h3
+              %div= "Alice"
+              %span= "Avril Lavigne"
           %li
             %h3
               %div= "Firework"
               %span= "Katie Perry"
-          %li
-            %h3
-              %div= "Firework"
-              %span= "Katie Perry"
-          %li
-            %h3
-              %div= "Firework"
-              %span= "Katie Perry"
-          %li
-            %h3
-              %div= "Firework"
-              %span= "Katie Perry"
+          %li
+            %h3
+              %div= "What the Hell"
+              %span= "Avril Lavigne"
+          %li
+            %h3
+              %div= "Not Enough"
+              %span= "Avril Lavigne"
           %li
             %h3
               %div= "Firework"

config/application.rb

@@ -1,67 +1,23 @@
 require File.expand_path('../boot', __FILE__)
-
 require 'rails/all'
 
-# If you have a Gemfile, require the gems listed there, including any gems
-# you've limited to :test, :development, or :production.
 Bundler.require(:default, Rails.env) if defined?(Bundler)
 
 module Nineminutes
   class Application < Rails::Application
-    # Settings in config/environments/* take precedence over those specified here.
-    # Application configuration should go into files in config/initializers
-    # -- all .rb files in that directory are automatically loaded.
-
-    # Custom directories with classes and modules you want to be autoloadable.
     config.autoload_paths += %W(#{config.root}/lib)
-    # config.autoload_paths += Dir["#{config.root}/lib/LastFM/"]
-    # config.autoload_paths << config.root.join('lib')
     
-    # Only load the plugins named here, in the order given (default is alphabetical).
-    # :all can be used as a placeholder for all plugins not explicitly named.
-    # config.plugins = [ :exception_notification, :ssl_requirement, :all ]
+    # enable caching in development mode
+    config.action_controller.perform_caching = true
+    
+    config.action_controller.page_cache_directory = RAILS_ROOT+"/public/cache/"
 
-    # Activate observers that should always be running.
-    # config.active_record.observers = :cacher, :garbage_collector, :forum_observer
+    # asset packaging
+    config.gem "jammit"
+    config.serve_static_assets = true
 
-    # Set Time.zone default to the specified zone and make Active Record auto-convert to this zone.
-    # Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC.
-    # config.time_zone = 'Central Time (US & Canada)'
-
-    # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
-    # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
-    # config.i18n.default_locale = :de
-
-    # JavaScript files you want as :defaults (application.js is always included).
-    config.action_view.javascript_expansions[:defaults] = 
-    %w(
-      jquery
-      plugins/rails
-      config
-      plugins/path
-      ajax/requests
-      ajax/routes
-      store
-      plugins/bing 
-      plugins/coloranimations
-      plugins/nivoslider 
-      plugins/imageresize 
-      plugins/autocomplete
-      plugins/scrolling
-      plugins/player
-      animations/animations
-      animations/fullscreen
-      layout
-      player
-      ajax/loadmore
-      ajax/album
-      search
-    )
-
-    # Configure the default encoding used in templates for Ruby 1.9.
     config.encoding = "utf-8"
 
-    # Configure sensitive parameters which will be filtered from the log file.
     config.filter_parameters += [:password]
   end
 end

config/assets.yml

@@ -0,0 +1,18 @@
+javascripts:
+  jquery:
+    - public/javascripts/jquery.js
+  plugins:
+    - public/javascripts/plugins/*.js
+  common:
+    - public/javascripts/config.js
+    - public/javascripts/player.js
+    - public/javascripts/search.js
+    - public/javascripts/store.js
+    - public/javascripts/caching.js
+    - public/javascripts/ajax/*.js
+    - public/javascripts/animations/*.js
+    - public/javascripts/helper/*.js
+    - public/javascripts/layout.js
+stylesheets:
+  common:
+    - public/stylesheets/9minutes.css

lib/last_fm/request.rb

@@ -29,9 +29,9 @@ module LastFM
     end
 
     def self.run_queue!
-      puts "<< ----------- started request queue ---------"
+      puts "=> lastfm: Started request queue"
       @@hydra.run
-      puts "<< -------------- queue finished -------------"
+      puts "=> lastfm: Queue finished"
     end
 
     def self.artist_request method, node, q, limit = nil, page = nil, &block
@@ -57,7 +57,7 @@ module LastFM
     protected
 
     def self.update_results keys, hash
-      puts "updated"
+      puts "=> lastfm: Updated"
       @@results[("#{keys[0]}_#{keys[1]}".to_sym)].update hash
     end
 
@@ -70,15 +70,15 @@ module LastFM
     def self.create_and_queue_request method, node, block, request_params
       request = Typhoeus::Request.new(base_uri, :params => request_params) # :timeout => APP_CONFIG["request_timeout"],
       handle_response request, method, node, block
-      
-      puts ">> ---- '#{current_class_name}.#{method}' request is queued ----" if @@hydra.queue request
+
+      puts "=> lastfm: '#{current_class_name}.#{method}' request is queued" if @@hydra.queue request
       @@results["#{current_class_name}_#{method}".to_sym] = Hashie::Mash.new
     end
 
     def self.handle_response request, method, node, block
       request.on_complete do |response|
         if response.success?
-          puts "<< ---- '#{current_class_name}.#{method}' -- TIME: #{response.time} ----"
+          puts "=> lastfm: '#{current_class_name}.#{method}' (#{response.time}s)"
           
           hash = Hashie::Mash.new(JSON.parse(response.body))
           hash = method.to_s == "search" ? hash.results.send(node.to_sym) : hash.send(node.to_sym)
@@ -87,7 +87,7 @@ module LastFM
           block.call( hash ) unless block.nil?
           
         elsif response.timed_out?
-          puts ">> -- '#{current_class_name}.#{method}' -- TIMED OUT -- <<"
+          puts "=> lastfm: '#{current_class_name}.#{method}' timed out"
         end
       end
     end

public/javascripts/ajax/requests.js

@@ -1,39 +1,65 @@
 function load_more_request(link, params){
-  $.ajax({
-    type: "GET",
-    dataType: "html",
-    url: link,
-    data: params,
-    error: function(){
-      hide_flash(false);
-      show_flash(true);
-      enable_more_button();
-    },
-    success: function(data){
-      append_to_list(data);
-    }
-  });
+  cacheResponse = cacheRequest(link+params);
+  if(!cacheResponse)
+  {
+    console.info("=> Request to server");
+    $.ajax({
+      type: "GET",
+      dataType: "html",
+      url: link,
+      data: params,
+      error: function(){
+        hide_flash(false);
+        show_flash(true);
+        enable_more_button();
+      },
+      success: function(data){
+        cacheRequest(link+params, data);
+        append_to_list(data);
+      }
+    });
+  }
+  else 
+  {
+    console.info("=> Request to jQuery Object");
+    append_to_list(cacheResponse);
+  }
 }
 
 function load_site_request(link, params){
+  cacheResponse = cacheRequest(link+params);
   hide_flash(true);
-  $.ajax({
-    type:"GET",
-    dataType:"html",
-    url: link + params,
-    error: function(){
-      hide_flash(false);
-      show_flash(true);
-      enable_more_button();
-    },
-    success: function(data){
-      $("#content").html(data);
-      $("#content").ready(function(){
+  if(!cacheResponse)
+  {
+    console.info("=> Request to server");
+    $.ajax({
+      type:"GET",
+      dataType:"html",
+      url: link + params,
+      error: function(){
         hide_flash(false);
-        init_site(link);
-      });
-    }
-  });
+        show_flash(true);
+        enable_more_button();
+      },
+      success: function(data){
+        cacheRequest(link+params, data);
+        $("#content").html(data);
+        $("#content").ready(function(){
+          hide_flash(false);
+          init_site(link);
+        });
+      }
+    });
+  }
+  else 
+  {
+    console.info("=> Request to jQuery Object");
+    $("#content").html(cacheResponse);
+    $("#content").ready(function(){
+      hide_flash(false);
+      init_site(link);
+    });
+  }
 }
 
 function album_request(link, params, obj){

public/javascripts/caching.js

@@ -0,0 +1,9 @@
+function cacheRequest(key, value)
+{
+  value = (typeof value == "undefined" || typeof value == "boolean") ? false : value;
+  
+  if(!value)
+    return (jQuery.data(document.body, key) == null) ? false : jQuery.data(document.body, key);
+  else
+    return jQuery.data(document.body, key, value);
+}

public/stylesheets/sass/_layout.scss

@@ -25,10 +25,10 @@ $place-url: "#{$base-url}/placeholder";
   margin: 0 auto;
 }
 @mixin stripe-bg() {
-  background: transparent url('#{$bg-url}/stripe.png') repeat;
+  background: transparent url('#{$bg-url}/dark.png') repeat;
 }
 @mixin stripe-dark-bg() {
-  background: transparent url('#{$bg-url}/stripe-dark.png') repeat;
+  background: transparent url('#{$bg-url}/darker.png') repeat;
 }
 
 @mixin rounded($radius) {
@@ -64,7 +64,7 @@ a { cursor: pointer; }
 
 /* OVERALL */
 body { 
-  background: #05070a url('#{$bg-url}/overall.png') no-repeat center top;
+  background: #05070a url('#{$bg-url}/overallcrush.png') no-repeat center top;
   color: $content-black;
   font-size: 12px;
   @include medium-font()
@@ -100,7 +100,7 @@ body {
 
   li {
     float: left;
-    &.active { background: url('#{$bg-url}/navi-hover.png') }
+    &.active { background: url('#{$bg-url}/fuse.png') 0 -127px }
     &.search {
       $top: 21px;
       width: 200px;

public/stylesheets/sass/_lists.scss

@@ -65,7 +65,7 @@
       position: relative;
       float: left;
       overflow: hidden;
-      background: url('#{$bg-url}/album.png') 0 6px no-repeat; 
+      background: url('#{$bg-url}/fuse.png') 0 6px no-repeat; 
       width: 90px;
       height: 74px;
       .cover { 

public/stylesheets/sass/_reset.scss

@@ -1 +1 @@
-body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}