Archive for November, 2009

My Mac OS X Customized Settings

Friday, November 27th, 2009

The time is upon us for Black Friday sales and/or new Macs for Christmas that we’ll be disappointed with when there’s a product announcement in January.

With these new computers, we’ll want to forgo the tedium of initializing settings to remove silly restrictions meant for bumbling peasants. We’ll want to customize Mac OS X to our nerdish liking. Here is how I go about mine.

Finder

  • Set View Options in Finder to Arrange by Name
  • Turn off Spring-loaded folders in the Finder
  • Disable drives from showing up on desktop

Mail

  • Configure Rules to designate color coded message lines from family

iTunes

System Preferences

  • Keyboard & Mouse: Enable right-click on Mighty Mouse, Disable Expose, Dashboard buttons
  • Dock: Automatically hide Dock, Disable animate opening applications
  • Software Update: Disable automatic checking

Advanced Customization

  • Turn off Bluetooth and remove from Menu Bar
  • Turn off feedback for Sound controls and unnecessary notifications in iChat and Mail
  • Remove the Windows BSOD in Leopard
  • Run Terminal commands to disable unnecessary features and animations
    Change Dock to 2D Appearance
    defaults write com.apple.dock no-glass -boolean YES; killall Dock
    Disable animations in the Finder
    defaults write com.apple.finder DisableAllAnimations -bool true
    Disable ‘snap to grid’ animation
    defaults Write com.apple.Finder AnimateSnapToGrid -bool FALSE
    Disable Info pane animations
    defaults write com.apple.finder AnimateInfoPanes -bool false
    Increase the speed of the Save dialog box (Default is 0.2)
    defaults write NSGlobalDomain NSWindowResizeTime .001
    Force Mail.app to display plaintext
    defaults write com.apple.mail PreferPlainText -bool TRUE

Short URL: http://jwr.cc/x/25

Posted in Apple, favorites, iTunes, Mac OS X | No Comments »

How to Start Using Microformats

Friday, November 27th, 2009

Microformats are good, and Google recently announced they would start supporting two of them: hCard and hReview. Think of hCard like an official business card for the Web. hReviews are reviews for products, restaurants, etc., which you might find on an Amazon product page or Yelp.com. Your favorite SEO voodoo daddy will tell you that Google will shine upon your site if they find you’re using extremely semantic markup with the likes of Microformats.

Even if you’re making simple websites, they always contain contact information — why not publish it in an hCard format? Use Tantek Çelik’s easy hCard creator to start.

Don’t have any street addresses on your site? You can still sneak one in for author contact information. Any link pointing to the author can be made into a vCard like this:

<span class="vcard"><a href="http://author_domain" class="fn url">Author Name</a></span>

There are many ways to start using Microformats today and it becomes addicting. It is now impossible for me to accept br tags inside street addresses. I hope to see more uses for Microformats in the future. For example, if you visited a site that contained an hCard, the browser could facilitate a download right to your address book.

For further reading, try Andy Clarke’s article, “A tribute to Microformats“. Also, check out John Allsopp’s excellent Know Your Microformats section on his blog, Microformatique.

Short URL: http://jwr.cc/x/24

Posted in HTML and CSS, tutorial | No Comments »

Nerd Thanksgiving

Thursday, November 26th, 2009

I recently went back to The Setup to read Jeffrey Zeldman’s interview and ended up reading Khoi Vinh’s interview as well. If you’re not familiar with this website, it asks Web nerds what tools they use to get the job done.

What I read there surprised me. I realized I use the same machines at home and at work as my web design idols. Web design is not a processor intensive job–most of what you need is an Internet connection and a text editor. But for some reason I had always envisioned Jeffrey Zeldman sitting down to some monstrosity of technology like Hugh Jackman in Swordfish.

But no, they use 24″ iMacs, the same as I use at work and home.

The apologist or procrastinator in all of us would say that ambitious project “just needs to wait” until we get a maxed-out MacBook Pro or Mac Pro with dual 30″ displays. But all that separates us from our idols is good old fashioned elbow grease.

This Thanksgiving I’m thankful I know that the only thing separating me from my dreams is the time and effort I’m willing to invest.

Posted in design, thoughts | No Comments »

My Preferred Image Replacement Technique

Tuesday, November 24th, 2009

There are many different kinds of image replacement techniques exhaustively detailed around the web. Many seem quite complex, and dated, and it seems that the most popular technique I see is the Farhner method, or text-indent: -9999px. However, there is a small problem with this technique: in Firefox it draws lines stretching across your screen nearly 10,000 pixels to the left.

My preferred technique for image replacement on headings or links:

#myID {
        background: url(myImage.png) no-repeat;
        height: ...;
        width: ...;
        text-indent: 150%;
       overflow: hidden;
       white-space: nowrap;
}

This works much better than the Farhner technique. It won’t draw a dotted outline all the way across the left side of your page. It’s also much more future-proof considering the vast screen dimensions we’re likely to use. (Just imagine looking at some of your websites on a display with 16,384×12,288 resolution. All those words that were pulled 9999 pixels to the left would be visible.)

Though I’m not sure what to call this method—I’ve never seen this documented any where— I remember I first learned it by studying Tim Van Damme’s CSS. Before and after examples below.

Fasturtle.com H1 image replacement using the Farhner method

Fasturtle.com H1 image replacement using the hereto for unnamed method

Short URL: http://jwr.cc/x/23

Posted in design, favorites, HTML and CSS, tutorial | No Comments »

Reminder: QuickTime Embeds

Monday, November 23rd, 2009

Okay, so you know how to make an optimized video for the Web with HandBrakeCLI, now let’s embed that bad boy into the webpage. … Oops. I always forget how to do QuickTime Embeds. They are a rather involved affair so the name is quite ironic. Anyway, this post is mostly a reminder to myself, but it pleases me if it helps you. I’ve included a .zip file at the bottom so that you may experiment on your own.

Code

First we create an object, specifying a width and height. An object looks like this:

<object width="640" height="496">
    <param name="" value="" />
</object>

In order to trick Internet Explorer into reading this correctly, we have to talk to the ActiveX controller. So we tell it our codebase and classid. Whenever you’re going to insert a QT movie, use:

codebase = "http://www.apple.com/qtactivex/qtplugin.cab"
classid  = "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"

Better browsers were designed to use the embed element for media. So we nest an embed within the object so that all browsers see the media file.

An embed can be a self closing element, or not. It doesn’t need parameters, just duplicate all your key/value pairs here as attributes (except for codebase and classid which are only for IE). Your embed may look similar:

<embed
    width       = "640"
    height      = "496"
    type        = "video/quicktime"
    pluginspage = "http://www.apple.com/quicktime/download/"
    href        = "my_video.mov"
    src         = "my_poster_image.png"
    bgcolor     = "#333"
    controller  = "false"
    autoplay    = "false"
    scale       = "aspect"
    target      = "myself">
</embed>

Conclusion

The final code will look something like this; a fine, hot mess:

<object
    width    = "640"
    height   = "496"
    codebase = "http://www.apple.com/qtactivex/qtplugin.cab"
    classid  = "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
    <param name = "href"       value = "my_video.mov" />
    <param name = "src"        value = "my_poster_image.png" />
    <param name = "controller" value = "false" />
    <param name = "autoplay"   value = "false" />
    <param name = "scale"      value = "aspect" />
    <param name = "target"     value = "myself" />
    <embed
        width       = "640"
        height      = "496"
        type        = "video/quicktime"
        pluginspage = "http://www.apple.com/quicktime/download/"
        href        = "my_video.mov"
        src         = "my_poster_image.png"
        bgcolor     = "#333"
        controller  = "false"
        autoplay    = "false"
        scale       = "aspect"
        target      = "myself">
    </embed>
</object>

Note: Remember to add 16 pixels on to the height of your object and embed to accomodate the QuickTime controller. Otherwise it will be clipped off. For example, a normal 640×480 video would need to have an object and embed container height of 496 pixels. You will also need to accomodate for this in your poster image if you wish to offer a refined experience.

Not all these attributes are necessary, and in fact you can make the QT player exhibit different behavior if you experiment with it a bit. This document from Apple.com is helpful: Including QuickTime In A Web Page. Read the whole thing.

I’ve made a 1.3MB .zip file with video, poster image and code so that you may experiment. Download or see the Demo.

Short URL: http://jwr.cc/x/20

Posted in design, tutorial, video | No Comments »

Optimizing Videos for the Web with HandBrakeCLI

Sunday, November 22nd, 2009

HandBrake is an excellent application for converting your favorite Flash files, VOB folders, or almost anything else really, for use on your iPhone, iPod or AppleTV.

But it also has another great use: creating videos for the web. The GUI is a little clunky for this purpose and doesn’t even have what you need. I prefer to use the CLI, or Command Line Interface. On a Mac, use Terminal.app to access the command line.

I often use HandBrake to take client’s video files and add them to their website in a format that streams quickly and looks great. HandBrakeCLI takes a crummy Windows Media video file and turns it into something awesome for the web. Here is my command:

./HandBrakeCLI -i ~/Desktop/my_original_file.wmv -o ~/Desktop/my_new_file.mp4 --encoder x264 --vb 1800 --ab 128 --maxWidth 640 --maxHeight 480 --two-pass --optimize;

Explanation

Let’s explain this command and ease your apprehension about using the command line by breaking down each individual argument in the command, line-by-line:

 1) ./HandBrakeCLI
 2)     -i ~/Desktop/my_original_file.wmv
 3)     -o ~/Desktop/my_new_file.mp4
 4)     --encoder x264
 5)     --vb 1800
 6)     --ab 128
 7)     --maxWidth 640
 8)     --maxHeight 480
 9)     --two-pass
10)     --optimize;
  1. Before you run your command, use the Change Directory command (cd path/to/handbrakecli) to make sure you are in the same folder as the HandBrakeCLI file is located. Technically, this file path starting with ./ means to stay in the current directory.
  2. The -i means input file. The next part lists the path to your original video file you’d like to convert (I find it’s easiest to work from the Desktop).
  3. The -o means output file. The next part defines the path where you’d like to place your final converted video. Technically, this file path starting with ~/Desktop means to the Desktop folder of the current user (you!).
  4. The best codec for the web is H.264 video, using x264 encoder.
  5. Video Bit Rate is specified in kilobits per second.
  6. Audio Bit Rate is specified in kilobits per second. For most small videos, 128 is fine. If the video is mostly talking go ahead and bump it down to 96.
  7. Set the maximum width.
  8. Set the maximum height. The best part about these two lines is that the aspect ratio will not be changed! HandBrakeCLI will try to fill the larger value without exceeding the latter.
  9. Two passes over the video is better than one.
  10. Your client won’t give a jack how fancy you think you are unless you include the most important part: --optimize. Optimize means moving important data to the beginning of the file so it’s downloaded first, allowing the video to start quickly.

It’s all smooth sailing from here. If you want to process many videos in one go, just separate the commands by putting a semi-colon at the end before you start a new one.

Resources

To try this out, you’ll need to download HandBrake and the HandBrake Command Line Interface.

For a quick idea of best practices for compression, I like Vimeo’s compression guidelines. If you want to know more about codecs and video on the Web in general, check out Mark Pilgrim’s awesome overview at Dive Into HTML5.

Short URL: http://jwr.cc/x/1t

Posted in tutorial, video | 1 Comment »

Coda Emulated in WebKit

Friday, November 13th, 2009

Also featuring HTML5, CSS3 & jQuery

I got tired of the boring look of a standard Apache web directory. So instead of browsing folders the default way, I built a small index.php file in the root, grabbed all folders dynamically, injected them as HTML5 and styled them with CSS3. Since I work with Coda all day, I chose to emulate their Sites View interface. Coda is a great text editor/FTP client for Mac OS X. If you’re not familiar with Coda, check it out at Panic’s website.

About the Coda-fied web directory — my code is completely self-contained and portable. It also uses no images for style. All gradients are generated with the CSS3 gradient proposal, best supported by WebKit. The screenshot thumbnails can be generated dynamically. Below is a preview, and a few notes on how it’s made, and a link to the working demo.

Plain old web directoryHover for alternate view.

Let’s get started.

  1. First we need to write the PHP grab all folders in the directory and create links from them. (Notice it ignores those pesky ‘.’ and ‘..’ folders that show up in all directories by default.) The unflappable Paul Redmond helped me with the PHP code.
  2. Next, style them with CSS3 and beautiful, beautiful WebKit properties. I commented my code so that you may find it helpful.
  3. Use the WebKit2PNG shell script to make background images for all folders in the directory. This has to be done manually, but a smarter person could probably set this up to automate by porting the code from Python to PHP or other language.
  4. Add jQuery slider to adjust height and width.

Before you jump right to the demo, remember that it works best in the latest version of Safari or WebKit Nightly, and works pretty well in FireFox 3.5 or greater. Thanks for taking a look. I hope you enjoyed it as much as I did.

View the working demo.

Short URL: http://jwr.cc/x/1i

Posted in design, HTML and CSS, JavaScript, PHP, tutorial, WebKit | 4 Comments »

Jay’s WordPress Admin Plugin

Wednesday, November 11th, 2009

Jay's WordPress Admin Plugin

I’ve created a WordPress plugin to fix an issue I have with the WordPress Dashboard: the HTML editor is not a monospaced font. I don’t like reading code in 13px Lucida Grande, so I wrote a plugin to add a stylesheet with 12px Monaco.

As with all WordPress Plugins, it is available with an open GNU General Public License, so you are free to modify and distribute as you see fit.

I may add more in the future. More info on the plugin page.

Short URL: http://jwr.cc/x/1h

Posted in design, HTML and CSS, Plugins, WordPress | No Comments »

Defining Focus Styles for Web Accessibility

Monday, November 9th, 2009

Most CSS hackers are familiar with Eric Meyer’s CSS Reset. Most are also familiar with Zeldman’s “LoVe? HA!” mnemonic to remember the pseudo-classes for anchors, :link, :visited, :hover, and :active.

But what you might not be familiar with is the comment at the bottom of Meyer’s Reset block: “Remember to define focus styles!” Of course, you never remember. But you should, and you should do it like this:

a:hover,
a:focus,
a:active {
  ...
{

Now you’ll also need to change the mnemonic to “LoVe? H-Fa!” as if burping while laughing. And when screen readers target your anchors they light up as if the mouse was hovered. For a great example, implement this setting in Safari Preferences > Advanced > “Press tab to highlight each item on a webpage.”; then take a look at Roger Johansson’s website and use Tab to reach every corner of his website.

Web Accessibility, yo. Because it makes you seem like a frickin’ ninja.

Safari Preferences Advanced

Short URL: http://jwr.cc/x/1f

Posted in design, tutorial | No Comments »

Create Your Own WordPress Fail Whale

Saturday, November 7th, 2009

For WordPress sites, the equivalent of Twitter’s Fail Whale is this plain looking screen:

WordPress: Error establishing database connection.

This page shows up when WordPress cannot connect to your MySQL database. The entire page, complete with head and body, is written into the code, so the good news is we can put whatever we want here.

To get started, go to your WordPress folder and dive into /wp-includes/functions.php. Around line 2818 you’ll find the complete HTML content of the database connection error page. If it is no longer located on this line, perform a search for “Error establishing a database connection”.

Your web hosting still works, so you can reference static content, images and CSS files. I recommend copying the source of your Home or 404 page and adding a helpful error message letting customers know you’re site will be up shortly.

Let me know what you come up with!

Short URL: http://jwr.cc/x/1d

Posted in design, tutorial, WordPress | 1 Comment »