Tag Archives: web development

JavaScript Patterns

Web applications these days, am I right? With all their user experience and fancy A/B tests. It’s all thanks to JavaScript, or, more correctly, browsers and developers alike finally biting the bullet, putting a paper bag over the language’s proverbial head, and getting some good use out of it.

Analogies aside, JavaScript is not so great, but the experts have found ways to reclaim their software engineering integrity. Buried under metric tonnes of “Top 43 jQuery Plugins and Extensions for the Colorblind”, you might actually find such a beacon of knowledge. One of those beacons is a new book, JavaScript Patterns, by Stoyan Stefanov.

My copy is already getting dog ears.

A little bit of personal background, a couple years back I was starting to feel pretty comfortable with jQuery and even started writing my own extensions (not for the colorblind). I was also reading a new book, JavaScript: The Good Parts, by Douglas Crockford. Even though I strongly recommend it, JS: TGP raised more issues than it clarified. Sure, don’t use this and that part of JavaScript, but is that all there is, just a minefield of features, waiting to trip me up? Furthermore, many of those antipatterns he described really only became problematic in larger projects. Shouldn’t I be more concerned about confidently architecting and building those larger projects? I was unable to convince myself that JavaScript was a safe platform on which a very small team could build a stable product. (I even have an ActionScript 3 book from those days.)

Now, end of 2010, enter JavaScript Patterns. It aims to provide insight and best practices for teams who want to create a JavaScript product that won’t be hell to develop and maintain. And for the most part, it’s successful. Stoyan is an engineer at Yahoo, working on YUI, and just off the top of my head, he’s also written Object-Oriented JavaScript and a chapter in High-Performance JavaScript.

Pros

  1. Really does deliver on holistic, well-justified JavaScript programming techniques that embrace the language.
  2. Assumes the appropriate amount of JavaScript and CS knowledge, not too much, not too little.
  3. Focuses mainly on JavaScript, not too much on the specifics of external libraries like jQuery. Libraries these days are big and numerous; a dedicated book for those would probably be more helpful. This one is library-agnostic and might even stay applicable longer.
  4. Adequate treatment of server-side JavaScript. By which I mean, almost none. Similar to the library issue above, server-side JavaScript is still JavaScript. It’s also very volatile and most of the server-side-specific stuff is not unique to JavaScript.

Cons

  1. Could give a little more focus to external libraries. I know I just got done saying that it was a good thing that it didn’t, but face it, almost everyone uses some external library. I think there’s a lot of general advice that one could give to allow developers to extract more from their library of choice while loosening any coupling that may occur along the way.
  2. Lulls a bit in Chapter 6, Code Reuse.
  3. The quote on the back of the book is probably the weakest bit.

    “Stoyan has written the go-to guide for JavaScript developers working on large-scale web applications.”

    Don’t get me wrong, it’s definitely my go-to guide (outside of good old Google), but the quote is from Ryan Grove, YUI Engineer. No offense to Ryan, but if you write a sweet book the publisher should try to hook you up with a quote from someone a little more prestigious than your own coworker.

And that’s all I have to say about that. For the time being, 8.5/10, highly recommended. It’s not very long and it really sets some precedents on which to build. For more study, I recommend you check out YUI Theater and follow some blogs. Ajaxian is great and all, but the real in-depth stuff comes out of projects and project contributors, check out Kangax’s blog (of Prototype fame) and Tim Caswell’s How to Node.

Advertisements

SILT: Canvas/SVG, jQuery, LESS update

Cover art for my latest mix on boroboro.com. Instead of just photos I'll probably do more stuff like this, as it is fun and enticing.

Whew, a little bit longer than expected between updates, but the reasons for this are soon to be told. First, some things:

  • For my next work project, I’m having to visualize and lay out semi-complex graphs (DAGs, as far as I can discern). I started looking at a Flash-based kit for a similar project in 2008, but these days Canvas-based solutions like the Javascript InfoVis Toolkit are popping up.
    But, as I soon learned, Canvas isn’t really the right tool for this job. the right way to go seems to be SVG, despite iffy browser support. This fantastic article by the Opera browser team has me thinking I’ll use Graphviz+dot+SVG+jQuery. I’m excited and I’ll probably write about it again the future.
  • Speaking of jQuery, I’m learning me all the JavaScript tricks by looking directly at the jQuery source. Nothing like a lean, mean piece of code to teach oneself The Right Way. Reminder: don’t forget to update to jQuery 1.4, which has been a dream so far.
  • LESS is still treating me right; did some rapid development recently, and it worked gloriously. Some observations:
    • One issue I had with LESS recently was getting the mixin syntax working with IE’s filter syntax. The equal signs throw the compiler off. I was doing terrible IE things because I was doing cross-browser pure CSS gradients.
    • I use the LESS –watch option to achieve incron-like effects when dealing with small CSS projects. Unfortunately the –watch option means having to start lessc before doing work (not a big deal) and having to monitor it for when you have errors in your file (it pauses and waits for a return key, kind of a big deal).
    • I just read about less.js, a javascript implentation done by the LESS dudes for on-the-fly, in-browser LESS action, and plenty of new features. Here’s the github page. It’s due the end of this month, but I’m in no hurry.

And if you’ve been missing me, listen to more mixes. Two up since the last Superdrivel edit, a downtempo one and an uptempo one.

SILT: Reverse templates, the pixels, and swig

The Final Frontier

In case you've been wondering where I've been. (space, duh.)

Wow, it has been a while. Sorry for the silent treatment, it’s been a busy time. I’ve been learning lots, so hopefully I’ll process that queue in a blaze of consistency. Bring on the MEAT:

  • Recently I had to do a whole load of data processing. Not a one-time deal, but good old XML processing for API integration. It occurred to me that just as Web 2.0 and its myriad frameworks have brought a new age of templates, it seems that there should be a complementary reverse template. As in, I specify a template, and a string, and I get a map of variables back (as opposed to template+map = string). This would seriously be the most beautiful thing.
    And as it turns out, for once, Perl schools all other languages, because it has it. Template::Extract. If someone made this happen in Python and/or PHP, I would probably engage in an illicit tryst with them.¬†Until then, I have to do xpath-style stuff. Which is fine, I guess, but you’d agree that it’s harder to read and maintain.
  • Back when I started doing serious web frontend stuff last summer, I was pretty sure the pragmatic among us were on the same page: px is the way to go for CSS. Everything pixels. em was a hack for IE6, and we’re done with that now, to the point that I’m even exasperated by dead-horse pages like this.
  • For my next project, which will be depriving y’all of blog posts soon enough, I’m planning on using the crap out of swig. Use it to call C/C++/Objective C from basically any scripting language (in my case Python, again). I’m not yet sure of its advantages with PHP as I use it, because it’s really not hard to write your own C++ PHP extension. If all goes well, I’ll be following up on this.

OK, three is good. I save the rest in drafts as they come, in case you were wondering.

SILT: Google’s Latest Gifts to Coders

This lady on the netbook is almost certainly perusing Google's coding gifts while being frustrated with Gentoo. She gets me. I took this photo at PayPal's Innovate conference a couple weeks ago and it's already my second-most popular photo on flickr. I dedicate this post to you, free netbook lady!


Work and life are trying to keep the SILT posts down, but no way, josé. Fight the power.

I don’t know if these are really the latest, but they’re pretty recent and boy are they handy.

  • I was thoroughly impressed by Google’s properties’ APIs, as demonstrated at the Google Code Playground. Seriously, there’s an incredible amount of data/functionality there.
  • I cannot wait to have something cool enough to code in Go, Google’s new programming language. It’s everything C++ could have been (in a much more perfect world). It mixes everything one could want from dynamic languages (e.g., Python) with the performance and compile-time checks of compiled languages. I’m really cheering for this one, hoping that Google’s backing brings forth a plethora of libraries and frameworks to leverage for practical purposes. Qt bindings or a web framework is what I’m seeking.
  • I’ve basically been relearning Python while using it for the biggest project I’ve done at work, yet. It’s really killing me in spots where there is some unwritten “Pythonic” way of doing something, and I’m met with implicit resistance in doing it the way I had thought made sense. Enter Google’s Style Guides (Python | All). It may not seem like much, but it really helps in those situations when the decision seems arbitrary, but somehow like you might regret making the wrong choice. The simple things, guys. Fundamentals.

As for things I am less grateful for, I am very frustrated with the fact that Gentoo is still on PHP 5.2, because 5.3 has a lot of sweet features, including much better crypto support (of which I am in dire need currently). PHP 5.3.1 is already out, and I can’t get 5.3.0? You guys call this bleeding edge?

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: 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.