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.

I needed a quick script which could rip through a list of hundreds of urls and evaluate each url for an expected ‘200′ response value indicating that the website was ‘ok.’ If something other than a 200 was returned, I wanted to know about it. Performance speed was not a concern.

The solution was a dead simple Ruby program. Using a single .txt file, you can define all the people who need to receive notification, and all the URLs that need to be checked. You can easily automate the process by running the script as a cron task. That solved my problem and killed some time.

PulseCheck on GitHub

/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

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 < ActiveRecord::Base
   has_attached_file :hero_shot,
     :styles => { :large => "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.

Resources

• Paperclip plugin/gem
• Railscasts – Paperclip
• Unsharpening with ImageMagick

Before going much further, I should state that I enjoy programming just about anything and in about any language. A good weekend for me almost always includes compilation of source code and a strong beer–the order and frequency of the two being highly dependent on the preceding 5 days. But take my opinions with a grain of salt. These opinions are from a geek working in the ad world where development cycles are extremely tiny and our requirement list is often very different from software development studios.

1. Rails deployment are now almost as easy as PHP deployments

It used to be that Rails’ biggest hurdle was deployment. Having set up many mongrel-based deployment schemes, I can understand why Rails scared away a lot of people. However, with stability of “Phusion Passenger”:http://www.modrails.com/, setting up a Rails app is now just as trivial as PHP. If you’re worried about stability, it may be worth it to know there are a handful of large websites now using Passenger, including “Shopify”:http://www.shopify.com and even “NY Times”:http://www.nytimes.com. We deploy all of our Rails sites through Passenger and have not had one major problem yet.

2. Test like a pro

If you enjoy working within the MVC paradigm and you feel guilty about writing code before you write a test, Rails provides a wealth of features proven in the .NET and Java enterprise landscape, and adapts them to the flexible Ruby language. Test and Behavior driven development approaches are easy to follow in Rails.

3. You want easy object relational mapping

ActiveRecord is a thing of beauty. Does it work for every possible situation? Nope, but it gets you pretty darn close. The first time I made a database query in Rails, my jaw dropped.

User.find(:all, :conditions => [ 'created_at < ?', Time.now - 1.days])

Even if you haven’t used Rails before, what that tiny command does is probably pretty obvious. While ActiveRecord is not an excuse for any developer to forget SQL entirely, it helps us with the low hanging fruit in our systems and lets us spend more time where we should really be using our brains.

4. You’re really tired of FTP

I have a confession – you don’t need to use Rails to take advantage of automated deployments with the amazing “Capistrano”:http://www.capify.org/ tool. Launching new deployments of client websites is now as easy as executing the following command from the command line:

cap production deploy

This line, after some configuration of course, will completely deploy my application from a repository, run any database migrations, reset my daemons, and keep a copy of the last version in case something is botched. Rolling back is easy:

cap production deploy:rollback

Boom! I’m right back to the last version before the client even saw the nasty 500 error header on their contact page. Whew! (Not that this ever happens of course…eh-hem).

5. You want easier maintainability

There is no such thing as a sealed class in Ruby. That means if I don’t like Ruby’s String class, I can easily rewrite it to suit my needs (otherwise known as *monkey-patching*) at any time throughout a program’s execution. This is both very dangerous and a very awesome for some fairly obvious reasons. If we have interoperability between 2 different software libraries, we can easily patch the deficiencies ourselves while keeping the original libraries intact. If you don’t like how Rails handles error messages, you can easily override the offending method or patch the functionality how you see fit.

Is this approach to software development raising some red flags? It should, but there’s a way to make ourselves feel better. With a strong system of unit tests in place, we give ourselves an easy way to assure that functionality remains unchanged when software updates roll out, or requirements of a component change. While the dynamic aspects of Ruby can cause us some serious headaches if we abuse this power, we can save ourselves significant work by writing small patches instead of modifying many different source files.

Conclusion

I talked about a lot of different things, and admittedly, didn’t go into a lot of depth. But if you’re curious about what it’s like to develop in Rails, check out some of the things I’ve pointed out above. For me, these 5 points have made Rails my preferred web platform of choice for small to medium-sized, database driven websites.5

Slimserver is an open source music server which allows you to do this with very little fuss or configuration. Now I can stream music from natemiller.org in my neighborhood coffee shop or at work.

Gotchas

Just like anything worth doing, it requires a little leg work to get off the ground (depending on your server’s platform and your network configuration). Also, I’ve found that it doesn’t always play nicely with Apple encoded music files (mp4’s) which run rampant in today’s age of electronics. But if you’re handy with the command line and some conversion tools, you’ll be able to fix this relatively easily.

Our Requirements

To accomplish browser based scrolling in Flash, I surmised the following as benchmarks for success:

• Devise way to control page height _dynamically_ through my Flash website’s shell .swf
• Provide a method for any .swf file loaded into the shell to resize the HTML window at will (e.g. user clicks on accordian element in child movie, the page height will adjust accordingly)
• Show HTML scrollbars any time a user’s browser window dropped below the defined minimum for that page
• Hide HTML scrollbars and act like a normal full-flash website once the user’s minimum height requirement has been met

Our assumptions:

• Accepted browsers are the usual suspects: IE6+, Firefox 2+, Safari 2+
• It works with Flash 9 (it’ll work in 8, too)

h2. How it works

To make our solution, there are a couple key ingredients we need:

• Simple Javascript function which will handle events in the Flash file
• Resize logic in the Flash movie which will react to window resizing
• A commonly used JavaScript library called Prototype (but many others would work, too) to help access page properties

Starting off, we’ll set up our Flash movie and make sure that our movie is set to scale properly. For this example, we’re using top left stage registration, but you can use whatever you’d like. The code below are small sections of the complete code base which can be downloaded here: source files.

import flash.external.ExternalInterface;

public function Shell(){
   stage.scaleMode = StageScaleMode.NO_SCALE;
   stage.align = StageAlign.TOP_LEFT;
   stage.addEventListener(Event.RESIZE, onResize);
}

Once we know that this is in place, we can next write our resize logic, which will execute each time the Flash movie is resized
Actionscript 3

/**
* Handles screen resize
*/
private function onResize(e:Event = null) : void {
        // This function simply sets the
        // height and width of the background to stage
	resizeScreen(); 

	// Tell the outside world that the screen size has changed
	if(ExternalInterface.available) {
		ExternalInterface.call("onFlashResize", minHeight);
	}
} // end onResize

What’s going on here is that we’re simply saying “If Javascript is available, make an outside call to the Javascript function called _onFlashResize_”. We also pass it a variable called _minHeight_ which allows us to define the minimum height allowed by our Flash application. So if users on a 500px tall screen view our movie which has set a 600px minimum height, there will be an HTML scroll bar allowing users to view the rest of the content.

Now let’s take a look at the Javascript which will make this all possible:
Javascript

/**
* Called when the Flash has been resized. Triggered by the Flash movie
*/
function onFlashResize(height) {
	var newHeight = Math.max(height, document.viewport.getHeight());
	$('wrapper').setStyle({height: height + 'px'});
}

With this function, we find out the highest of these two values: our movie’s minimum height and the total height of the user’s browser. Using the largest of these two values, we set the Flash container div (called _wrapper_) to this new height. This ensures that if the user’s browser window goes below the minimum height, the browser’s scroll bars will appear.

What’s cool about this trick is that it makes it extremely easy to create multi-paged Flash movies that react to user interaction without having to rely on Flash based navigation techniques that many people dislike. For instance, this technique can be used in an accordian menu to easily display content and resize the page accordingly. The end result is an experience which is more like other websites and doesn’t require your users to learn an additional way of accessing content.

“Download Source”:http://www.natemiller.org/examples/flash_vertical_scrolling/source.zip