Nate Miller » Featured Articles

The Art of Abstraction

admin — Fri, 19 Mar 2010 22:07:36 +0000

Think for a moment about the word ‘abstract’ and its definition. When you think of an object, like a table for sake of example, what image comes to your mind? Most certainly, your image is different from mine. My mental image of a table looks a lot like the dinner table I sat at while growing up, while your table may look like the one sitting in your dining room. Yet I can use the word ‘table’ in a conversation and you will instantly know what I’m referencing without knowing exactly what my version of a table looks like. We take this mental feat for granted every day as it allows us to communicate easily without getting bogged down into details.

Why am I so interested in abstraction? As I grow older, my experiences shape my own personal perspective about various activities, processes, etc. My perspective is really an abstraction – a view of reality as I see it. Being able to abstract a process or object allows me to do complex things like design a website or write software. Similarly, personal abstractions grant me the ability to see common links between seemingly disparate processes, like graphic design and software design. On the surface, graphic and software design seem very dissimilar, but the processes which lead to good software are the same that lead to good design.

Successful graphic design requires the ability to break an object into its components. As a designer, I need to prioritize the messages in my work and build common threads which unite them into a single object (a website, a poster, etc). These common threads can be elements like color, logo, typography, and any number of similar choices. When each of these elements are combined by a skilled designer, great work happens. Imagine the last time you saw graphic design that really moved you. Did it make you want to purchase something? Did it make you think fondly of the company responsible for producing the work? Did you share this work with others and if so, did they feel the same way?

In today’s socially-connected world, we are constantly barraged with things that other people think are cool. When a large group of people react in a similar way to a single input – like a music video or a tv commercial – these people share a common abstraction. While everyone’s personal interpretation may be different, the aggregate of all interpretations can often be quite similar. This abstract entity – which cannot be held or quantified – can be as simple as a positive impression of a company. When shared across a large group of people, this abstraction becomes quite powerful. This is brand. But it’s also good design, productive software, and great music.

No matter what type of thing you are trying to create, the ultimate success of that thing is comprised of the many little creative choices determining the final finished work. When these little pieces are all skillfully connected, we allow our audience to successfully abstract meaning from our work. The production of a website, for instance, can easily include thousands of minute decisions which may impede a positive impression from our audience. The graphic appearance of website can be phenomenal, but if it is not easy to use, the audience is less likely to derive a positive impression. This is the art of abstraction – creating greater meaning from thousands of tiny moving pieces which often seem trivial when viewed on a smaller scale.

Abstraction ain’t easy – it’s actually quite difficult. As an endeavor, abstraction requires removing oneself from the smaller task at hand to visualize the end product. It’s so simple to get bogged down in the details of a process, but our biggest successes often come when we’re able to objectively look at the whole and adjust our behavior accordingly. This is perhaps why many psychologists have suggested that imagining oneself succeed can greatly increase the probability of success.

The next time you run into a problem with no apparent solution, try and remove yourself from the process and focus on the end goal. There’s always a way – it just depends on your perspective abstraction.

Sync a database with Capistrano

admin — Sun, 11 Oct 2009 08:53:27 +0000

Here’s a quick capistrano task for synchronizing a remote database to your local development environment:

 
set :application, "appname"
set :application_path, "/home/someurl/apps"
set :user, "appuser"
set :password, "***********"
set :use_sudo, false
 
set :production_database,'mydb_production'
set :production_dbhost, 'localhost'
set :dbuser, 'dbadmin'
set :dbpass, '************'
 
desc "Synchronizes remote database to local development database"
task :sync_to_local, :roles => :web do
    sql_out = "#{environment_database}.sql"
    run "mysqldump --user #{dbuser} --password=#{dbpass} #{environment_database} > #{sql_out}"
    system "sftp #{user}@mywebserver.com:#{sql_out} /tmp/#{sql_out}"
    run "rm #{sql_out}"
    system "mysql -u #{dbuser} --password=#{dbpass} somedatabase_development < /tmp/#{sql_out}"
    system "rm /tmp/#{sql_out}"
end

Painless db backups in Rails

admin — Sat, 10 Oct 2009 08:00:41 +0000

Quite often in Rails projects, I need some way to backup the contents of database quickly. The script below is an easy way to backup the database of your current environment using the database.yml file already set up in your Rails project. Feel free to modify the below script to do your bidding.

/script/backup_db:

#!/usr/bin/env ruby
require File.dirname(__FILE__) + '/../config/boot'
require 'erb'
require 'yaml'
 
unless config = YAML::load(ERB.new(IO.read(RAILS_ROOT +
"/config/database.yml")).result)[RAILS_ENV]
   abort "No database found for environment '#{RAILS_ENV}'"
end
 
db_out_path = File.join(RAILS_ROOT, 'tmp', "dbdump_#{RAILS_ENV}.sql")
system "mysqldump -u #{config['username']} --password=#{config['password']}
 #{config['database']} >; #{db_out_path}"

To run your backup, just execute this from your rails root:

script/backup_db RAILS_ENV=production

Automated image sharpening

admin — Sat, 28 Feb 2009 18:41:19 +0000

The Problem

Working in an agency setting, where the crispness and clarity of your images is extremely important, writing web systems that automatically generate thumbnails can be problematic. When resizing images downwards, as is often the case in thumbnail generation, pixel values are approximated from their original size. These approximations can result in thumbnail images which are blurry and difficult to read. The bigger the change in pixel size, the more dramatic the effect. So if you resize a 900×900px image into 120×120, you will see a major difference in clarity.

Photoshop has several methods for dealing with these approximations when resizing images – namely the Bicubic Sharpening interpolation method and the Unsharp filter. Both of these methods help improve image quality when resizing downwards.

The best way to see what I’m describing is through example:

Example of image sharpening in action

If we rely on out-of-the-box image resizing methods typically available, we usually end up with thumbnails that look like the upper right photo: blurry and unclear. However, we can easily have our applications automatically apply an unsharpening mask when we generate thumbnails. For instance a common image library used in online applications is ImageMagick – which has all sorts of features which can help our images maintain quality at smaller sizes.

In a recent project, I was tasked with creating a portfolio system which would be used to showcase work. The requirements were that the system should upload an image file and automatically generate several sizes of thumbnails to be used throughout the website. However, the thumbnails need to have the same crispness of their original full-size counterparts.

The Solution

The solution is in fact amazingly simple. Here are some quick assumptions:

The platform where we’re running our web app has “ImageMagick”:http://www.imagemagick.org/script/index.php installed
We’re using the “Papercilp”:http://www.thoughtbot.com/projects/paperclip plugin to handle uploading and thumbnail processing

Here’s the code we place at the top of our model which will be responsible for accepting uploaded photos:

class Project &lt; ActiveRecord::Base
   has_attached_file :hero_shot,
     :styles => { :large =&gt; "500x500",
     :medium =>; "300x300>",
     :thumb => "100x100>" },
     :convert_options => { :all => "-unsharp 0.3x0.3+5+0" }

With the above declaration in our model, Paperclip will create 3 thumbnails in 3 different sizes. The :convert_options hash is where we define how the photo will be processed and is responsible for performing the unsharpening. Passing the :convert_options hash allows us to specify specific instructions to ImageMagick – just like if we were using the ImageMagick library from the command line. Let’s take a look at the code which provides the unsharpening:

-unsharp 0.3x0.3+5+0

So where did we come up with this strange looking command? Essentially this is the same as executing “convert -unsharp 0.3×0.3+5+0 IMAGE.jpg NEW_IMAGE.jpg” from the command line. The :convert_options hash is basically a list of parameters that Paperclip will be passing to the ImageMagick “convert” command. The command above is telling ImageMagick to unsharpen each of our photos. If you want a more detailed explanation, please see this great blog post about fine-tuning this command. As is shown here, this command is performing an unsharp mask of a radius of 0.3 pixels, with an amount of 5.0 applied to it (in relation to the Photoshop effect, this is equivalent to an amount value of 500% at 0.3 pixel radius).

That’s it – now when we upload a photo, Paperclip will automatically resize and unsharpen our photos. The result is thumbnail photos which are more clear and truer to the original image.