Life Stream

Driving design based on customer service

Wed, 16 Jun 2010 22:17:58 EDT

Great article that pin points crucial flaws in the design process that many web designers and developers fall victim too. Author defines clear examples we can all learn from and strategies we can implement into our workflow process. Great share! Highly recommended.

RT @avanitydesign: Learning guitar takes awesome patience and many years of on-going practice. Check out www.raemag.com

Eric A. — Wed, 16 Jun 2010 19:06:36 EDT

RT @avanitydesign: Learning guitar takes awesome patience and many years of on-going practice. Check out www.raemag.com

RT @raemag: Ladies and Gents, today is the day. The official launch of RAE Magazine Online! www.raemag.com

Eric A. — Tue, 15 Jun 2010 20:20:38 EDT

RT @raemag: Ladies and Gents, today is the day. The official launch of RAE Magazine Online! www.raemag.com

Into a World of Motion

Eric Alli — Fri, 11 Jun 2010 01:06:13 EDT

A few weeks ago, during the final stages of development for my web app, RaeMag, our company decided we needed a flashier way apart from banner ads and viral blog posts to promote the upcoming launch of our site. We're extremely excited and proud of the design, functionality and everything else we've built over the past 2 years of development and our collective idea to showcase RaeMag eventually became to make a commercial. Yes, a commercial...for a website.

I'll save my 3-week, self-taught journey into the world of After Effects, Motion Graphics and all of the technicalities that went behind producing such a commercial for another series of posts. For now...

I present to you, The Official RaeMag Commercial in HD...

Please post a comment below and let me know what you think! And stay tuned for the upcoming launch of RaeMag this week!

As a result of prolonged After Effects usage and it's effect on my CPU fan, I think my MacBook might actually achieve lift off tonight.

Eric A. — Tue, 01 Jun 2010 23:58:16 EDT

As a result of prolonged After Effects usage and it's effect on my CPU fan, I think my MacBook might actually achieve lift off tonight.

Brace yourself After Effects...I am about to make you look very silly.

Eric A. — Fri, 07 May 2010 16:31:22 EDT

Brace yourself After Effects...I am about to make you look very silly.

Moving directly from hardcore Rails development to full blown motion graphics design is not a recommended workflow. #mindexploding

Eric A. — Tue, 04 May 2010 10:48:08 EDT

Moving directly from hardcore Rails development to full blown motion graphics design is not a recommended workflow. #mindexploding

Checking out a new tool that helps web designers find variations of any color - http://0to255.com/ Nice work @shaunchapman!

Eric A. — Mon, 19 Apr 2010 14:52:17 EDT

Checking out a new tool that helps web designers find variations of any color - http://0to255.com/ Nice work @shaunchapman!

Why can’t Apple’s pro apps offer a “Framed Window” mode? http://bit.ly/9MD1NF #exposefail

Eric A. — Fri, 16 Apr 2010 13:46:04 EDT

Why can’t Apple’s pro apps offer a “Framed Window” mode? http://bit.ly/9MD1NF #exposefail

Running low on ideas for @raemag copy...Resorting to Star Wars references to stand in for lorem ipsum.

Eric A. — Thu, 15 Apr 2010 16:08:35 EDT

Running low on ideas for @raemag copy...Resorting to Star Wars references to stand in for lorem ipsum.

A Fresh Start

Eric Alli — Mon, 12 Apr 2010 04:02:16 EDT

In my 8-odd years as doing web development, design and just about everything else remotely web-related...I consider myself, to some extent, an intarwebs aficionado. Though lately, I've been increasingly becoming aware that I rarely take part in the conventional tasks that one in my position conducts daily. Tasks such as twittering, blogging, digging, facebooking, whatever-ing have never appealed to me.

This new version of my site is not exactly an attempt to rectify my lack of these certain "web-guy" characteristics, rather, it's a new avenue for my ambiguous ramblings, showcase of past and current works, and most of all, my hope for an easy outlet for future creativity of all sorts.

It's not exactly a lifestream and not quite a blog, it's simply a collective gathering of everything I'd like to share, offer as a resource, and by any chance a backdrop of inspiration for others. This my include the occasional tweet and digg link which, as mentioned before, I use sparingly (which may count for quality!).

On another note, You may have caught on to the fact that my natural writing style (yes, that includes all of these blog posts) tends to be more on the formal side (I swear I don’t talk like this in person!). So, basically...If I sound like a horse in a henhouse (which, in fact, isn’t even a real idiom as far as I can tell)...you’ll know why. However, with that said, I do plan on venturing out of my natural style, so If you come across anything genuinely peculiar...please don't hold it against me :-).

A Little Background

This is currently the 3rd version of this site, this time around I've expanded my original "Two2Twelve Network" of mini-sites, which is just a fancy way of centralizing my network of sites...that I made.

One of the main excuses I have for redesigning and revamping this site was my longing to experiment with the latest web technologies and techniques; including HTML5 and CSS3. Though a full blown HTML5 version of this site (as I initially wanted) didn't cut it (Yes, though it pains me to say, I DO think it's too early to cut out IE users completely...just partially), I managed to implement quite a few CSS3 techniques (that do wonders for usability and accessibility) while sticking with valid XHTML code.

What's In Store

I plan on diligently keeping this site updated with a myriad of entries including, but definitely not limited to:

Programming Tips & Tutorials (From Ruby on Rails to Javascript, and more!)
My Personal Photography Collections
New Website Themes & Templates
Web-related blogging and ramblings
General rants and reviews

I've also updated my 2 mini-sites themes and code (coming shortly!). Here you can find my selection of theme designs for sale and my collection of open-source scripts, plugins, and other programming-related resources, respectively.

Furthermore

After years of random blogging and tinkering with countless designs and concepts about what I should actually do with my personal site, and being one buggy blog engine away from going straight for a vcard-based site (joking, of course...those are silly), I've finally put together an extensive design on top the superb Firerift CMS system that I plan on building on for the foreseeable future (and by the laws of the intarwebs, that should give me roughly 4 months of usage :-/).

In any event, I do hope you plan to stick around or at the very least give my site(s) a thorough browse.

Enjoy!

The Studio

Eric Alli — Thu, 25 Feb 2010 15:44:20 EST

Matt's magic fingers from Muse band

Thu, 25 Feb 2010 10:48:20 EST

Song: New Born

I've just come to the realization that my iPhone's sole purpose has been being a super-advanced alarm clock. #technologyutilizationfail

Eric A. — Sat, 05 Sep 2009 00:47:35 EDT

I've just come to the realization that my iPhone's sole purpose has been being a super-advanced alarm clock. #technologyutilizationfail

8 Tips To Supercharge Your Rails App

Eric Alli — Mon, 31 Aug 2009 10:50:00 EDT

1. Dynamic Blocks of Code

There may be times when you'd like to include a certain javascript or css file on certain pages, but not the entire site. This is a perfect example to utilize the content_for function.

On the page or pages you'd like to include the specific javascript or CSS files. Put this block of code at the top of that template.

  
<% content_for :header do %>
  <%= javascript_include_tag "myfile.js" %>
  <%= stylesheet_link_tag "myfile.css" %>
<% end %>

Next, open your global layout and insert this right before the header tag.

 
<%= yield(:header) %>

2. Load Models From Sub-Directories

It's no fun sifting through dozens of models in order to find the one you're looking for. A great way to organize your models is to place them in sub-directories of the models folder and have your application load them from there.

In your config/environment.rb file. Add this line of code within the Rails::Initializer.run do |config| section.

Dir.glob("#{RAILS_ROOT}/app/models/*[^(.rb|.ignore)]").each{|dir| config.load_paths << dir }

Don't forget to restart your app after any config changes such as this.

3. Make Your Own YML Configuration File

Using a YML config file can enable you to keep all your application's global variables in one place and have the ability to call them from anywhere.

To get started, let's create our config file, config.yml in the config directory and add a few variables to it. You may add as many variables as you'd like.

development:
  app_name: MyApp
  support_email: support@mydomain.com

test:
  app_name: MyApp
  support_email: support@mydomain.com

production:
  app_name: MyApp
  support_email: support@mydomain.com

Next, we'll need to load this configuration into our application by adding a line to the config/initializers/configs.rb file.

MY_CONFIG = YAML.load_file("#{RAILS_ROOT}/config/config.yml")[RAILS_ENV]

Now you can call any of the variables set in config.yml by using the following.

MY_CONFIG["app_name"]

4. Parse An RSS feed in seconds

Parsing RSS feeds in rails is extremely simple, however, you may come across complicated solutions for accomplishing it. Here's a super fast way to parse any RSS feed and display it's contents in your view.

In your controller, on the first line (above everything) add:

require 'rss'

Then, add an action (or add to an existing action):

def index
  @rss = RSS::Parser.parse(open('http://weblog.xmgnetworks.com/?feed=rss2').read, false)
  @entries = @rss.items[0..4] # Limited to 5 items, remove or change as needed
end

And finally in your view, add a variation of this (customize based on the data provided in the feed).

<% @entries.each do |entry| %>
  <%= entry.title %>
  <%=entry.description %>
<% end %>

5. Use Serialized Hashes

In some cases you may want to store multiple pieces of data and associate it with a model. For instance, if you have a users table and would like have the ability to store preferences for each user. One way this could be done would be to create a table called user_preferences and link them with a basic Rails association. But, a much simpler way to do this without the need to create more tables or files, is by using the "serialize" function provided by Rails.

To get started, we'll first need to add a column to our existing users table called preferences, you can do this with a simple rails migration.

script/generate migration add_preferences_to_users
add_column :users, :preferences, :text

Then, we'll need to add a serialize function to our users model, near the top in order to activate serialization for the preferences column.

serialize :preferences

That's all! To add preferences for a user you can use the following function.

@user.update_attributes(:preferences => { "hide_age" => "true" })

6. Use Helpers with Blocks of Code

Helpers are an integral part of rails, but using them strictly inline can limit their potential. Here's how you can pass a block of code from your views into a helper method.

In this example, we'll be generating boxes for a sidebar on the fly. This way, instead of repeating all the styling of our box each time we use one in our views, we'll just need to add the content for them.

Let's start with the view. In the template where we'd like our box, add the following snippet of code. Repeat this snippet for multiple boxes.

<% sidebar_box("My Box Title") do %>
	Content for my box.
<% end %>

The line "sidebar_box("my_box_id") do" will call a helper function called "sidebar_box" and pass a variable to it called "My Box Title" that we'll use for the title of our box.

Next, we add our helper function by opening application_helper.rb and adding the following function.

def sidebar_box(title, &block)
 data = capture(&block)
 content =
    '<div class="sidebar_box">
      <h4>'+title+'
         '+data+'
    </div>'
 concat(content)
end

The first line in this function, data = capture(&block), will capture everything contained within the sidebar_box block in your view. Next, in the content = line, we add the hardcoded HTML each box will have and the dynamic content we captured from the block in our view, here you can freely add any HTML you wish.

Lastly, we use the concat(content) function to bind everything together and send it back to your view.

7. Loading dynamic stylesheets

Splitting your stylesheet into several smaller stylesheets is a great organizational practice, especially if you find your stylesheet growing over the 1000-line mark. In rails, a great naming convention for your stylesheets is to name them after each of your controller's and then load them into your pages dynamically.

A simple way to do this, is to open your application.rb controller and add the following snippets of code.

First, we'll add a method to find stylesheets to load into your pages depending on what controller the user is on. If no stylesheet for the controller is found, it simply does nothing.

def find_stylesheets
  @stylesheets = [] # A new empty array
  stylesheets_path = "#{RAILS_ROOT}/public/stylesheets/" # The path to our stlesheets folder

  candidates = [ "#{controller_name}" ] # Use the controller name for the stylesheet to search for
 
  candidates.inject("") do |buf, css|
    if FileTest.exist?("#{stylesheets_path}/#{css}.css") # Search for a matching stylsheet
      @stylesheets << css # Add it to our array
    else
      @stylehseets = [] # If no matches, add nothing to our array
    end
  end
end

Next, add a before_filter near the top of your application controller to call this method before each page load.

before_filter :find_stylesheets

Lastly, we'll add a styleshet_link_tag into the section of our global layout template that will be populated with the stylesheets found in the above method.

<%= stylesheet_link_tag "#{@stylesheets.to_s}.css" unless @stylesheets.empty? %>

8. Quickly Aggregate and Display Data from Multiple Model's

Displaying information from multiple models, that each have different field names can be a challenge. But Rails makes it easy to do this in a few simple steps.

A common example would be creating an activity stream for your users that displays their activity throughout your application.

First, we'll need to construct a controller method to fetch all of the information we want to display. Here's an example.

def activity_stream
  blog_posts = BlogPost.find(:all, :conditions => ["user_id = ?", @user.id])
  comments = Comment.find(:all, :conditions => ["user_id = ?", @user.id])
  # Add any models you wish to add to the stream
  @activity_stream = blog_posts + photos
end

Next, we'll add the activity to our view and call a helper method to sort through each type of activity.

<% @activity_stream.each do |item| %>
	<%= activity_item_for(item) %>
<% end %>

Lastly, we add our helper method that will allow you to customize what information appears for each type of activity item. This can be customized with HTML styling and any other fields from your model that you'd like to display.

def activity_item_for(item)
  case item.class.name
  when 'BlogPost'
    "#{item.title}"
  when 'Comment'
   "#{item.body]"
  end
end

Battling against color profiles and missing thumbs on the eve of the @raemag beta launch.

Eric A. — Mon, 24 Aug 2009 23:58:02 EDT

Battling against color profiles and missing thumbs on the eve of the @raemag beta launch.

Quickly finding that some things should never be in a tree structure...Task lists being the first among them.

Eric A. — Tue, 11 Aug 2009 13:03:24 EDT

Quickly finding that some things should never be in a tree structure...Task lists being the first among them.

Have begun the proverbial IE testing phase... #raemag

Eric A. — Thu, 06 Aug 2009 15:53:23 EDT

Have begun the proverbial IE testing phase... #raemag

Is currently experiencing #tscc withdrawal symptoms.

Eric A. — Sat, 01 Aug 2009 01:08:23 EDT

Is currently experiencing #tscc withdrawal symptoms.

HOW TO: CSS Sprites (Background Image Arrays)

Eric Alli — Thu, 09 Jul 2009 23:44:00 EDT

This Series

CSS Sprites have a countless number of possible implementations, I've chosen to cover three of what I've seen to be the most common uses.

These uses include:

An SEO-friendly page-title replacement sprite
A menu / navigation sprite
An icon / button sprite

Each of these sprite implementations have their own unique advantages and challenges that result in an ultimate benefit for your website.

In every part of this tutorial series we will cover the following process for each of the three sprite uses:

The slicing and preparing of graphics for use in a sprite
Programming the XHTML/CSS for a sprite
Extending and updating a sprite

In this first installment of the series we'll be integrating sprites to create SEO-friendly page title image replacements. The end result will be pretty, image-based page headers for your website without giving up the SEO benefits of header tags and text.

Step 1: Slicing and Preparing Graphics

First, we'll design and prepare the graphic for our page headers.

Next, we want to create additional page title graphics for our other website pages. Now, instead of creating a new file with the graphic for each page title, we're going to implement the sprite technique into this single image by positioning our first graphic to touch the top and left edges of the canvas. Then, for each subsequent graphic (or page title) you require, duplicate that initial graphic and place it around 10px directly under the previous graphic (you can use the ruler tool and guides to measure the spaces). Here are some notes:

Next, we'll crop the extraneous whitespace off the canvas using the crop tool. Finally, we should end up with a completed graphic that looks similar to this:

Step 2: Integrating A Sprite via XHTML/CSS

Now that we've constructed a sprite, we can move on to integrating it into our website.

Here is the XHTML code we'll be using on each page to display it's corresponding graphic from the sprite:


    Home

As you may notice, this greatly resembles a normal looking page header without the use of a sprite, keeping our titles valid and SEO-friendly. Repeat this code on each page of your website that you have a title for and edit the h1's id and text to correspond with the name of the page (Ex:

About Us

for your about us page).

The CSS for this sprite consists of three element styles:

div#page_title {
    display:block;
    height:40px;   <-- The height of each sprite + the whitespace below it
    margin:0 0 0px;
}
    div#page_title h1 {
      width: 215px;   <-- The width of your sprite image
      height: 30px;   <-- The exact height of each sprite
      text-indent: -7777px;
      background-image: url('../images/sprite.jpg'); <-- The image file
      background-repeat: no-repeat;
    }
    h1#home_title { background-position: left top; }   
    h1#about_us_title { background-position: left -30px; }

The first element: div#page_title, defines the container that encompasses the page title. Here is where you can add padding and margins that will affect the overall style and positioning of the sprite.

The next element: div#page_title h1, defines the properties of each sprite, such as the height, width and the location of the sprite image. The "text-indent" property is used in this element to hide the text within the h1 tag, but still keeping it visible to search engines by not removing it completely.

The last elements h1#home_title and h1#about_us_title, define the position of the background image in relation to the sprite image. For the sprite used in this example, each page title graphic is 30px in height with 10px of whitespace below it. The first title graphic in our sprite is for our home page, this means, for our h1#home_title element we can simply set the background-position to left and top. Next, our about page graphic is placed under our homepage graphic making things a bit tricky. To position this title and subsequent titles, we'll note the height of each graphic from our CSS (30px) then set the background position to left and -30px to move the background image up by 30px, as a result, displaying the portion of the graphic with our about title instead of the homepage title.

Now, if you have another graphic in the sprite under about us, for example, named contact us, simply duplicate the HTML above, fill in the h1's details and create a new element with the name h1#contact_us_title and set it's background position to left and -60px in your CSS file and repeat as necessary.

Tip: To get the exact dimensions for the sprites used in the CSS, use the ruler tool in Photoshop (command + i (mac) / ctrl + i (windows)).

Here's an example of an implemented page title sprite.

View This Theme on ThemeForest

Step 3: Extending and Updating A Sprite

When it comes time to update your website's look, sprites make is extremely painless. Simply, open your sprite image file, update each graphic title with your new styles and save this over your old sprite file. Congratulations! You've just updated all your websites page titles by editing one file and without changing any code.

Now that we've covered the basic concept of creating and implementing a sprite for our page titles, in the next tutorial, we'll create a multiple-state menu / navigation system using the CSS Sprite technique.