Monthly Archives: October 2009

Happy Birthday, Superdrivel!

The G20 hits 50,000 miles

Speaking of birthdays, the van turned over its 50,000th mile recently. It's doing great, though we both almost died while I took this picture.

Celebrations all around! Superdrivel turned 1 on October 24th.  Of course, I didn’t really start bloggin’ on it till January, and even then it was just to whine about blogging.

DID SOMEONE SAY PARTY FAVORS? HOW ABOUT SOME STATS?!!

  • 33 posts (prior to this one) – that’s 25% more than every other week!
  • 64 non-spam comments (almost 2 per post!)
  • 69 spam comments, all but one of them blocked automatically by Akismet.
  • Top post (by pageviews) – the iron gym is great (~1200 views)
  • Top post (by comments) – Is Gentoo dying? (14 comments)
  • Top search topics (paraphrased) – “iron gym”, “the a-team van“, “gentoo”, and “benjamins
  • 28 Google Reader subscribers – I missed the FeedBurner boat, so it might be even more.
    • I ❤ all of you. I would feel pretty silly if no one read this stuff.

Lately, I’ve also been averaging around 20 hits per day to the blog in general. Not that traffic is important, just wanted to let you know you’re not completely alone in this remote corner of the intermist.

PARTY IN THE COMMENTS! Now’s your chance to tell me how to be a better blogger/friend/person!

Advertisements

LESS and incron: CSS at its finest

less is, once again, more.

less is, once again, more.

Web development is full of challenges. That’s my nice way of saying writing CSS blows. CSS is powerful, but at the cost of being too fine grained and low level for easy development. It’s like the assembly of web design. Other developers are all-too-aware of the situation and have come up with a few solutions, including CSS frameworks, which reduce the amount of from-scratch code and provide a system (e.g., Blueprint or the 960 grid system), versus the freeform mess of raw CSS, and CSS extensions, like LESS, which is the topic of the day.

Act One: L-E-S-S spells bliss

If you aren’t using something like this yet, you might as well be punching yourself in the crotch every time you code.

I have also messed with Sass, which was not as “Syntactically Awesome” as LESS, and xCSS, which was overkill (but I might revisit it later). LESS is good because:

  • Any standard CSS file is a valid LESS file – easy to only use the features you need
  • Just as powerful as Sass, offering variables, functions, nesting, CSS-specialized math operations
  • Aptana CSS highlighting works great:
    1. Go: Window->Preferences
    2. General->Editors->File Associations
    3. Add file type: *.less
    4. Add editor: Aptana CSS Editor (right at the top)

I mean, look at this syntax:

@left_column_width: 300px;
@column_margin_width: 15px;

/** Palette **/
@light_blue: #d0dae3;
@pastel_blue: #7492ac;
@med_blue: #1e5d97;
@dark_blue: #0b3c68;

@light_orange: #f6b860;
@pastel_orange: #dfab62;
@med_orange: #e9951f;
@dark_orange: #a1630c;

/** Colors **/
@top_nav_color: @light_blue;
@top_nav_hover_color: @light_orange;
@header_color: @pastel_blue;

#header {
	clear:both;
	float:left;
	width:100%;
	border-bottom:1px solid @dark_blue - #111;
	background: @header_color;
	padding-bottom: 12px;
	margin-bottom: 7px;
	
	.page-title {
		float:left;
		clear:none;
		display:inline;
	}
}

/***** Two column layout a la   *********
****** http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm  *****/

/* column container */
.colmask {
	position:relative;
    clear:both;
    float:left;
    width:100%;			
	/*overflow:hidden;*/	
}

/* 2 column left menu settings */
.leftmenu {
    background:#fff;
	overflow:hidden;
	.colright {
	    float:left;
	    width:200%;
		position:relative;
		left: @left_column_width + (2 * @column_margin_width);
	    background:#fff;
	}
	
	.col1wrap {
	    float:right;
	    width:50%;
	    position:relative;
	    right: @left_column_width + (3 * @column_margin_width);
	    padding-bottom:1em;
	}
	
	.col1 {
	    margin:0 @column_margin_width 0 (@left_column_width + (4 * @column_margin_width));
	    position:relative;
	    right:100%;
	    /*overflow:hidden;*/
	}
	
	.col2 {
	    float:left;
	    width: @left_column_width ;
	    position:relative;
	    right: @left_column_width + @column_margin_width;
	}
}

Now you have an easily customizable two column layout and color scheme. Change your values in one place and they gracefully propagate. If you wanted to change the colors or column width before, you would have to change dozens of values. Really, stop what you’re doing, change your CSS file’s extension to .less, and become a happier person.

Act Two: Incron

So the only problem that I ran into is the bump in the workflow: compiling from LESS to CSS. This is where incron comes into play. Incron monitors files for changes and can trigger actions as specified by you with a cron-like syntax we can all love. I have a little Gentoo development box I use; I put incron on it and set it to run lessc whenever my LESS file changed. Just install/emerge incron, run incrontab -e and add one line:

	/path/to/less/files/mystyles.less IN_MODIFY lessc $@

Now you’ll have a file called my_styles.css and everything will be hunky dory. Of course this could easily be extended to do more powerful things with your styles, like move them into the right place or give them fancy names or version them or whatever. The potential here is also not limited to LESS, so consider it an investment. If this intrigues you, I think this tutorial should be all you need for now.

Well, web development is a big basket of ugly and this only addresses one aspect. There’s still cross-browser grossness and JavaScript debugging horror. But LESS helps. LESS helps.

Hit and Run: Google Android

Google is awesome and Android is a great concept: a really lofty ideal that pretty much only a giant like Google could have a hope of realizing. When mobile Linux didn’t take off on its own and it started to become clear that there wasn’t going to be a large scale open-source mobile platform, they acted with insight and decisiveness, announcing Android in 2007, and first releasing it in 2008. Now here’s why I think they’re going to blow it.

I recently sat down with the 'droid for some hard-hitting back-and-forth (forever)

I recently sat down with the 'droid for some hard-hitting back-and-forth (forever)

Android is an operating system, but not generally used by manufacturers in unmodified form. That’s because manufacturers want to differentiate their hardware and first-party software offerings. If they want to compete, they pretty much have to. I would say this is akin to Linux splintering off into a million flavors; each flavor has its own App Store equivalent and its own community for making sure that App Store works. Gentoo doesn’t readily work with apt or yum, but the Gentoo community keeps Portage working. Same goes for Ubuntu or whatever. Developers don’t worry about their package working on bizarre distros because there’s a community for that.

Manufacturers mess it all up by making their own flavor and expecting developers to support it. They’ll tweak or leave out functionality and still call it an Android phone. Google wants Android to get popular like Linux (moreso, probably), but it won’t happen because everyone keeps passing the buck on keeping software running seamlessly across hardware. I don’t see how Google can regulate, or how developers can keep up, so it comes back to the manufacturers. Remember manufacturers are the ones who couldn’t afford to develop a decent operating system of their own in the first place; they’re inherently greedy and they suck at software. I foresee a rough road for our boy Android.

SILT: Fences, Pastebin gone crazy, networking gone mad edition

Augh, I battled some large networking demons today to get a Gentoo box to have multiple MACs and static IPs. Also, it would seem some .NET/Windows developers are only a few years behind my brain.

Fences in play at work

Fences in play at work

  1. Today I got around to installing Fences 1.0. It’s an application to organize your desktop by functionally giving you icon groups. It’s kind of like being able to have multiple folders open in the background. This is all relevant because this is one of the first items on my software-writing to-do list that I tried to implement.
    Actually, it was #2 after writing an online to-do list, like Remember the Milk, except theirs doesn’t integrate with Checklist for the Palm, like I had started to write (I got as far as reverse engineering and writing a parser and minimal editor for Checklist’s binary format. It’s at once freeing and frustrating that 99% of the ideas I come up with will be implemented by someone else, and a good portion of those implementations will be too good for me to challenge. I gave up on Windows desktop development after a summer of .NET gross-out.
    BTW, pretty sure KDE4 has this.
  2. This link summed up how to get multiple IPs in the best way. It’s pretty much a quick primer in using ifconfig to set up your network card in bridging mode. The link specifies ubuntu, but it worked on Gentoo (and should work on all modern distros).
  3. I installed a pastebin over the weekend for internal use at work. I used the tarball made available at pastebin.com. It took quite a bit of modification to get it working the way I wanted to, however. Most importantly when using the "file" storage engine, it actually does not run, dying with an error about follow up posts. The solution is to actually dig through the code and comment out the die() call, then set the $post["followups"] = array(); inside the isset($post["followups"]) if clause. I realize the explanation is kind of hazy, if you actually run into this problem, let me know. In pretty much all othe respects it’s a great piece of software, and the perfect balance of things I was looking for in pastebin.

Hit and Run: Django? More like DjangNO.

You bring shame to the letters D and J.
I’m not sure what deadlines these web developers have, but I wish someone would have given them some flex time when writing Django. Don’t get me wrong, I’m pretty happy to be learning a new technology for work. But, after a week of working with it, Django seems like all the bad stuff of Rails mixed with all the bad stuff of PHP, with a few extra configuration files thrown in for good measure. Django is verbose, command-line driven, has a highly suspect templating language (Separate if and ifequal statements? forloop.counter? How unintuitive are we gonna get?), fragile, and a nuisance to set up for production. Did I mention the excess configuration files?

Oh well, it’s better than straight Python for web development, provided I don’t lose too much time to studying its quirks. If I had more options, I’d go Ruby on Rails or CodeIgniter/Kohana, all of which seem to have clearer, more consistent web development philosophies and workflows. Maybe I’ll make a Mahmoudjango or something. Need to work on that name.

Three Books on Web Design

3 design booksIf college taught me anything, it’s that college can’t teach you everything. In fact, in my experience, it completely overlooks some pretty important material. Despite the ubiquitous and astoundingly revolutionary nature of the web, especially in the context of computers, my CS curriculum didn’t even include a passing reference to web design. Considering I strongly considered graphic design as a major, one might understand my disappointment.

Background

I’ve technically been designing websites since 6th grade. Oh yes, by 10th grade I could have told you all about framesets, Dreamweaver, tables, and spacer.gif. Thankfully none of those sites are up anymore and we can all put that age behind us. The polish of Web 2.0 is all around us now.
A few years ago I had that first observation: site after site seemed to bring new degrees of attractiveness and usability. Yet, there was an underlying degree of uniformity that made it seem like the respective designers had all read some book I had yet to discover. More recently (maybe 6 months back), I decided that long before the web, let alone blog posts titled “620 Web 2.0 links to turn you into a Web 2.0 guru”, there was design. That was the inspiration behind my search for literature.

Motivation

Like I alluded to above, I’ve got a respectable understanding of code principles, so I was looking for intermediate to advanced level books. And if I was looking for a code reference I would look online for something more up-to-date and complete. Also, due to the fast-paced nature of web technologies, I looked for books that 1) were recently published and 2) emphasized design techniques with modern web technologies. These two got me these three:

  1. Web Standards Solutions: The Markup and Style HandbookDan Cederholm
  2. Five Simple Steps: A Practical Guide to Designing for the WebMark Boulton
  3. Transcending CSS: The Fine Art of Web DesignAndy Clark

1. Web Standards Solutions: The Markup and Style Handbook3.5/5

Pros:

  • Clean, reads well
  • Good overview of the basics

Cons:

  • Code-centric (somewhat to be expected, given the title)
  • Proscribes against some coding practices that should be common sense for any web developer conscious of coding standards. Spends too long on obvious examples of bad web development.
  • After reading the other books, it’s clear that it could have gone a lot farther in some design principles
  • Focuses on accessibility, but not enough on how design can affect accessibility for the average user
  • Despite being new, it didn’t cover much that wasn’t in Transcending CSS (see below), a book from 2007

Published just a few months ago, this book ended up being a very short and smooth read. It had a heavy code emphasis, but did very concisely explain a large chunk of standards used in modern websites. Clean explanations and just the right amount of background for someone looking for a quick primer on modern code solutions. Still, the focus is purely on web standards and accessibility; very little design input here.

2. Transcending CSS: The Fine Art of Web Design4.5/5

Pros:

  • Most rounded, comprehensive
  • Design-centric, but with a good measure of advanced coding advice
  • Has held stood the test of time very well
  • High measure of rereadability (plus great references to other designers)

Cons:

  • Examples + code not accessible online
  • Some parts of the book felt disjoint
  • Missing out on a few newer technologies (barely worth mentioning)

This is the oldest of the books listed, published all the way back in 2007. Suffice to say it’s aged well. This might be attributed to the theme of the book satisfying my design over code criterion perfectly. It strikes a very strong balance between design instruction and actual code. The book makes a very solid attempt at complete workflow explanation and covers a surprisingly relevant range of topics for its age.
It did strike me as a bit denser reading than the aforementioned Web Standards book, partially due to the design emphasis and partially seemingly due to the less explicit writing style, in my opinion. The format is a bit nonstandard, as well; it’s a square book and a good 1/3rd of it is somewhat aesthetically refreshing photography and topical illustration. Overall, in the face of its shortcomings, if you need a design guide to the web, I highly recommend this still-relevant and balanced read.

Designing for the Web

3. Five Simple Steps: A Practical Guide to Designing for the Web4.5/5

Pros:

  • Current (name drops: Twitter and Blueprint CSS framework)
  • Very engaging
  • Design-centric
  • Beautiful book (physically)
  • Covers business side of design

Cons:

  • Pricey, low US availability
  • Despite a whole unit dedicated to typography, could have used more font case studies/examples.
  • Could use better copy editing (a few spelling errors).
  • No colophon or index

Definitely the book I was most excited about. I read the inspiring Five Simple Steps blog posts about grid design a while back and was enthralled to hear a book of similar nature was in the works. Mark Boulton, the author, also edited the Transcending CSS book above. His entire philosophy behind writing the book revolves around design over code.
Of course I should also mention that the book still isn’t available in the US, but you can order from the Five Simple Steps website to get a copy from the UK. Also exciting: Mark plans to write/publish two more “Practical Guide” books in the same vein.

Conclusion

Anyway, all three of these books have their merits. I can strongly recommend the second two to everyone with experience and a desire to grow as a web designer. I would very mildly recommend the first to someone looking for lighter, more novice reading (it’s not purely beginner’s material, but it’s not very advanced either). There are probably better books out there.
Lastly, I’d like to thank my work for giving me the opportunity to learn from these books on their dime. I really want to emphasize that asking your manager for reading material relevant to your work both gets you a free book and shows your desire to grow as an employee. From the other angle, it is your workplace’s responsibility to keep their workforce informed regarding current technologies. A few books here and there are a pittance in comparison to the knowledge and inspiration they can bring.