Figuring out my CSS workflow

Posted on December 31st, 2011 by Sacha Chua

Yesterday’s coding session with CSS was fantastic. I used WinWarden to make my browser translucent, and I overlaid it on my reference documents. This made it a breeze to check alignment, because I didn’t have to use any measuring tools. I used Chrome’s developer tools to manually adjust the stylesheets until things looked right, adding display: block to the parts I was working with. Then I copied the numbers into my SASS file so that it could generate the CSS.

I also found a GIMP script for exporting all layers as separate images. I had to rename a few layers, but the results made it much easier to flip through images instead of toggling visibility trying to find the logos I needed. (It turned out that the logos were not included, so I’ve asked the design firm to send them to me.)

I converted the complex front page into a Drupal panel layout, getting rid of thirteen regions that were cluttering up the main block management screen. This also makes it much easier to update the content, yay! I’m looking forward to converting other pages. The previous developer used multiple regions instead of controlling visibility through configuration, so there are a lot of templates and regions.

Dual-screen worked out great, too, although I still need to fiddle a little with my ergonomics to make sure everything works out.

I’m looking forward to making this even better. I’ve only got a few more weeks on this project, but I might take on more styling in the future if it turns out I can deal with the headaches associated with cross-browser styling.

After I get the rest of the basic requirements in place, I want to automate testing and screenshots, particularly for regression-checking and for cross-browser compatibility. Selenium and WebDriver look like the way to go if I want to simulate hover events. If I can’t figure out how to use WebDriver within the time I’ll set aside for learning this, I can use JQuery to fake toggling the classes. Automated screenshots + PDF Split and Merge + ImageMagick for compositing (maybe 50% opacity?) will make it easy to spot glaring errors.

That will have to wait for next week. In the meantime, there’s a three-day weekend ahead, so I’m going to make lots of progress on Quantified Awesome. Yay!

More posts about: development, geek, kaizen, work // Add Comment »

Short URL: http://sachachua.com/blog/p/23088

On This Day...

2012: Emacs Org: Display a subset of tasks by context — I wanted to get a quick preview of my top three tasks by context. Since org-tags-view didn’t seem to have a [...]
2010: Thinking about housework — I’ve been thinking about the ideas in the book “168 Hours”, which strongly recommends personal outsourcing as a way of [...]
2009: What will you stop doing? — New Year’s Day is just a day, a chronological convention. The long holiday season is a good time to reflect [...]
2008: Websites that write websites — “So nat’ralists observe, a flea Hath smaller fleas that on him prey, [...]
2006: I give up on WPA and WPC11! — After several days of compiling and recompiling kernels and tracking down HOWTOs and fiddling with configuration files, I officially give up on [...]
2005: The five-year journal — Check out Cool Tools: The 5 Year Journal for a journal that promotes seredipitous discovery and reflection. =) Maybe I [...]
2005: Fire — There was a big fire right next to our house. We all got out safely, including the pets. Fire In the meantime, [...]
2004: More open source work — sachac: you'd be remiss if you don't include pmana's work. ;) and of course, iptraf is by a pinoy.
2004: And the rest of the year passed by in a blur — August Turned 21. Threw birthday party/send-off party. Didn’t blog much; was very busy. September, 2004.10.01 Japanese language studies. Lots of lectures blogged. November Training at [...]
2004: July — 7/21 Made it to the shortlist of the AOTS program, then 7/28 finally got confirmed. 7/30 Said goodbye. 7/30 Also [...]
2004: June — Many notes on cooking and teaching. - 6/27: The start of my life as a street performer / amateur arsonist
2004: May — - 5/12: Reflections on the Getting Things Done methodology Boring month. ;)
2004: April — - 4/3: Assigned ERC copyright to GNU. Yay! - 4/8: Sand cats - 4/13: Started aikido - 4/14: Posted teaching evaluations - 4/15: 2nd [...]
2004: March — Lots of Planner hacking. - 3/7: Techie dinner with William, Miguel and Jijo. Told him about fai. It made his Shopwise [...]
2004: More Filipinos into open source development — sachac: there’s also my former work colleague – pol babao III - he’s the author of phpmylibrary.
2003: Chickened out — So much for thoughts of a hard disk transplant – I shake too much and am too uncertain about hardware to [...]
2003: Refreshing my Linux install — - Download http://http.us.debian.org/debian/dists/woody/main/disks-i386/current/images-1.44/bf2.4/root.bin - Download http://http.us.debian.org/debian/dists/woody/main/disks-i386/current/bf2.4/linux.bin - Boot grub with the following commands: kernel (hd0,2)/root/root.bin ide0=ata66 initrd=/root/root.bin initrd (hd0,2)/root/root.bin - Gleefully delete the [...]
2003: Sleepy cat — Groggily the cat stirs, curled up on the ergonomic chair. She licks herself before settling back into a comfortable position, yellow-green eyes [...]

sacha chua living an awesome life