September 3, 2010

Taking CSS to the next level

Steps
For a long while, I used CSS to just do little stuff. I’d change the background color of a form field, or do a fancier background image treatment. But, to get my layout right, I’d still fall back to tables. Sometimes, I’d use a hybrid table/css layout. Several layout effects were just too much bother using CSS, so I never really went all the way with it.

This summer, while programming eBookTribe, I finally took it to the next level. That site is completely laid out using semantic markup and organized, logical CSS. I’m so pleased with the result. It is much more maintainable and easily tweaked to fit my designer’s picky eye, not to mention an order of magnitude more accessible to screen readers and assistive technology.

A shot of energy

I learned tons by reading design sites on the net, but the biggest single boost of energy/knowledge was "CSS Mastery: Advanced Web Standards Solutions", by Andy Budd, Simon Collison, and Cameron Moll.

One of the most brilliant techniques, really a breakthrough for me from CSS Mastery, is the technique of highlighting the current page in the nav bar using all CSS. No more need to have the script determine the page and programatically mark the active nav button. Very slick, and very easy to do once I grasped the technique.

[tags]CSS Mastery,web design[/tags]

Converting WMA to MP3 on OSX or Linux

MusicFinding this technique took more time than I thought it should, so I thought I’d share a quick and simple music transcoding tip.

Converting WMA to MP3

1) Get mplayer and lame installed. I use the accelerated and precompiled mplayer and lame for OSX.

2) Create a simple shell script:

#! /bin/sh
set -e
F=$1
mplayer -ao pcm:file="${F%.wma}.wav" "$F"
lame --preset hifi "${F%.wma}.wav" "${F%.wma}.mp3"
rm -f "${F%.wma}.wav"

Save as “convert_wav.sh”, make executable, and run it on your wma files. An easy way to hit all of them in a directory tree is:


find . -name "*wma" -exec convert_wav.sh {} \;

Thanks to the original version, found and modified from that given on Macosxhints.com.
[tags]mp3, osx[/tags]