Media Grease

3 free Mac applications for simple web work

Chris Johnson — Fri, 11 Jul 2008 16:15:12 +0000

A colleague of mine recently asked me what software he would need to do simple updated to a web site from home on his brand new iMac. All he really needed to be able to do was update flat HTML files on an FTP server and upload an image or two. Oh, and preferably for free.

So here’s what I suggested based on my years as an avid tryer-outer of free software:

I’m not a fan of using the built in FTP support in OSX, so I suggested he use FileZilla transferring files. One great thing about FileZilla is that it’s cross platform, so you’ll get the same experience on any computer you use it on whether it’s running Windows, OSX or a flavor of Linux.
For editing HTML code you have tons of choices. None of the free ones I’ve used has a decent WYSIWG view but we’re just talking about basic updates anyways. So I have no trouble recommended Smultron for coding. It handles files in tabs, it has an extensive macro system, its got code highlighting. Consider it the closest thing to Textmate for $0.
Finally there’s the task of image editing without the vaunted Photoshop. For this one, I strayed from installable software and recommended he use the web-based Picnik for basic photo manipulation. Picnik has an easy to use interface that among other things, will let you crop, resize, and sharpen photos.

Superb web typography slideshow

Chris Johnson — Mon, 07 Jul 2008 21:25:16 +0000

Usually I despise “reading” slideshows. However, this PDF slideshow (2.4MB PDF) on elegant web typography was a joy to read and informative. Thanks to Jeff Croft for writing and posting it.

Outlook 2007 cripples HTML email design

Chris Johnson — Fri, 27 Jun 2008 18:46:19 +0000

(Update below)

This week I was tasked with creating a nice simple HTML email for UNC that was delivered to approximately 200 people.

The design wasn’t very complex. It was essentially text laid on top of this graphic background:

When I program HTML emails, I usually go back to an ancient coding style (circa 2000). This means tables instead of CSS for the layout and primitive use of CSS applied as inline styles. Unfortunately, this wasn’t enough to get my email to work properly in Microsoft Outlook 2007.

The best way to put text on top of a graphic is to use a background image on a div or a table element. For my email I put it on a table element. But of course Outlook 2007 doesn’t support background images of any kind. Anywhere. For anything.

For some crazy reason, Microsoft decided to ditch having Internet Explorer render their HTML emails in Outlook and instead switched to Word’s renderer. That means that one of the world’s most popular email programs doesn’t understand basic HTML and CSS attributes that have been in use for nearly 10 years.

You can read more about this travesty at the Campaign Monitor Blog.

Update

The Campaign Monitor blog has a post detailing a method for using tag background images in Outlook 2007. To be clear, this only works on the tag.

Setting up a Rails dev environment on Webfaction

Chris Johnson — Fri, 13 Jun 2008 18:07:01 +0000

After purchasing the 3rd edition beta PDF of Agile Web Development with Rails, I wanted to jump right in to mucking around with Ruby on Rails on Webfaction’s servers. I ran into some silly problems that took me a good bit of time to work through.

In the hopes of saving you time, here are the steps it takes to create a simple “Hello World” Rails 2.1 development site on Webfaction.

In the Webfaction Control Panel, create your Rails 2.1 application. Remember to check the box next to “Autostart.” The Mongrel server that Rails uses is not known for it’s reliability and autostart should keep you from having to restart the server manually if it goes down.
Use the Webfaction Control Panel to associate your new Rails application with a domain name/url.
Once that’s setup, go to the URL you associated with your Rails application. This will start your Mongrel server and you should see the “Welcome Aboard” message.
Rails needs to connect to a database to function correctly (unlike Django). Go ahead and create one in the Webfaction Control Panel. (You might want to create three databases depending on your needs. Rails can operate in three different modes, test, development and production. Each can and probably should have its own database.)

Our job isn’t done yet. Right now the site is in production mode, and we need to move it to development. That way we get all the lovely and informative errors while we’re building our application.

SSH into your Webfaction server. Find your way the Rails application directory /webapps/
Update your /config/database.yml file so that under “development” it points to the database you created earlier. Your username will be the same as your database name.
Update your /config/environment.rb file so that in the Rails::Initializer.run do |config| block you set a secret hash key. The line should look like this: config.action_controller.session = { :session_key => “_myapp_session”, :secret => “some secret phrase of at least 30 characters” }
Open the autostart.cgi file. Near the end you’ll find a command that looks like this: os.system(’/usr/local/bin/mongrel_rails start -d -e production -P /home2//webapps//log/mongrel.pid -p ’)
To restart the server in development mode, you’re first going to stop the server by running mongrel_rails stop and then take that command from the autostart.cgi file and run it without the os.system part, the full path, and with production changed to development. Like this, mongrel_rails start -d -e development -P /home2//webapps//log/mongrel.pid -p

Now it’s time to create our hello world application.

While SSH’ed into the Webfaction server and in your app directory, run ruby script/generate controller Hello This will create the various files necessary for your Hello controller.
Open the newly created “controllers/hello_controll.rb” file and define the world function:
class HelloController < ApplicationController
def world
end
end
Now we need to associate a template with our exciting new controller and function. Under “views/hello/” create a file named “world.html.erb” and put your hello world message in it as regular HTML: hello world
Hello world!

Rails automatically maps your controllers and functions/actions to URLs. So point your browser to /hello/world and you should see the excessively simple HTML file you just created. Your Webfaction development environment is ready to play with. Enjoy.

Learning Ruby the crazy way

Chris Johnson — Wed, 11 Jun 2008 19:15:40 +0000

As I noted in my last post, I’m learning Ruby on Rails and Django. That means I’m also being forced to learn Ruby and Python.

The Python resource I’ve been going through is a free book called Dive into Python which can be read for free. It’s written in a very clear and concise manner and has been an excellent resource so far. The author assumes you have some knowledge of programming concepts.

I’m not sure what to make of the free Ruby book I’ve been reading, Why’s (Poignant) Guide to Ruby. But it’s pretty funny so far.

How many programming books have cartoons like this?

Learning web application frameworks

Chris Johnson — Mon, 09 Jun 2008 21:34:11 +0000

Lately I’ve been exploring different web application frameworks for creating websites that don’t fit neatly into the paradigm of content management systems. Generally that means websites that aren’t driven by traditional posts or pages, like news sites or blogs.

I’ve settled on learning what I can about three major players in the framework market: Django, Ruby on Rails and Code Igniter.

Each has their own advantages and disadvantages, but I chose those three for a few basic reasons.

Django has a great built-in administrative interface for data stored in your database. Think about it as production ready version of Phpmyadmin. Django is also written in Python, which is easy to read and understand. Another strength is that Django’s performance is better than its primary competitor, Ruby on Rails.

One frustrating part of working in Django that I’d like to note is that official releases have basically stopped. Work on the framework continues, but none of it has been officially sanctioned since March 2007. The community suggests you install the development version. That’s not something I’m too keen on doing with a production website. Read Christian Joergensen for more on Django’s release problems.

Ruby on Rails is currently the rockstar of the framework scene. It’s written in the cool by cryptic Ruby programming language (that’s my impression coming from a C style language background). Rails has an active community with a large plugin repository and lots of great documentation. The big downside to Rails seems to be the complexity of deployment and sluggish overall performance.

Code Igniter’s main strength is that it’s written in the ubiquitous PHP. That means that deployment is a snap and your site can be hosted just about anywhere. The other big PHP frameworks are Symfony and Cake PHP but their documentation is just completely blown away by Code Igniter’s. Right now, the big downside to Code Igniter is that its database models implementation isn’t as strong as any of the other frameworks. So if you’re afraid of the nitty gritty database stuff, stay away from Code Igniter for now.

A better meta menu widget

Chris Johnson — Wed, 28 May 2008 04:00:41 +0000

Recently I’ve been customizing the Media Grease sidebar. I’ve added a tag cloud widget, a recent comments widget and a manually updated “greatest hits” list. Ultimately, my plan is to move the recent comments, recent posts and greatest hits list to the top of the site using Javascript and CSS.

But I digress.

One of the things I don’t like about the default Wordpress setup is the RSS menu. It has two links, one for the post feed and one for the comments feed. It seems like an incredible waste of space. I’d much rather those links be rolled into the meta menu. Unfortunately the default meta widget is severely limited. Enter the MiniMeta widget. It’s highly customizable, and best of all it has two little checkboxes to add the RSS feed links.

Using Sifr for nice fonts

Chris Johnson — Sat, 24 May 2008 05:14:11 +0000

There are just sometimes when you want to use a nice font on your website. Unfortunately, there is no easy way embed custom fonts using HTML/CSS. That generally means you’re stuck using ‘core’ fonts like Arial, Times, Verdana, Georgia, etc.

You could use images, or Flash movies, but both are labor intensive and break accessibility. With images you also lose the ability to select and copy the text. That means images and Flash are best reserved for text that won’t be changing, like the title of a website.

For Media Grease, I wanted to use Gotham, the font I’m using in the logotype, for headlines of posts. Instead of wasting my time creating images for each headline, I’m using Sifr. Once sIFR is setup on your website, it automatically replaces text areas you choose with lightweight flash movies that display a custom font. It degrades gracefully for people without Flash or Javascript and doesn’t hurt accessibility and preserves the ability for people to select and copy your text. Sifr is pretty much the best option we have at this point.

If you want to install Sifr on your website, you can read this great tutorial at Design Intellection.

If you’re a Jquery fan – like me – you can take advantage of a Jquery plugin that makes Sifr deployment a snap.

Post title without Sifr:

Post title with Sifr:

Also, with the Jquery plugin, here’s all the Javascript I needed to Sifr’ize my titles:
$('h2.entry-title').sifr({path: themepath + 'scripts/', font: 'gotham'});

The other cool thing is that Sifr takes the color, size, margins, etc. from your CSS and applies it to the Sifr’ized text. You can override that those settings in the Javascript, but I’m not sure when that’d be necessary.

Media Grease: Moving from images to reality

Chris Johnson — Wed, 14 May 2008 02:03:49 +0000

Since I finished the design comps last Thursday, I’ve been working on moving from my Adobe Illustrator files to the actual WordPress theme based on Sandbox.

With the help of Adobe Photoshop, some hand coded HTML and CSS, and the jQuery javascript framework, I’ve programmed approximately 20% of the theme. That includes the basic layout, the header and the footer.

The site now looks like this:

I’ve got a lot of work left to do, but it’s coming along nicely and Sandbox has been a joy to work with so far.

Media Grease design ideas, Part 3

Chris Johnson — Sun, 11 May 2008 03:53:36 +0000

I’ve had the chance to refine the design direction I wrote about last weekend:

The most important thing was deciding the design and typographic direction for the posts themselves. I wanted to match the overall tone of the rest of the look while being as legible as possible.

I don’t know if I’ll actually use the sidebar on the left, but if I need it, at least there will space for it. I’ve had the unfortunate experience of not leaving space for a sidebar in a few of my past designs and then finding I needed it after the site was practically done. I won’t be making that mistake again.

At this point I will start slicing up this design and turning it into HTML and CSS that I can apply to a WordPress theme.