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.

Advertisement

SILT: Reverse templates, the pixels, and swig

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.

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.

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

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.

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.

SILT: Aptana SFTP and symbolic links edition

The van and some wind power

Short post today because I’m too tired to think at the moment. Something I learned just now is that Aptana Studio, my web development editor of choice, does not follow symbolic links when you’re syncing through SFTP (ftp over ssh). Furthermore, Dreamhost, my general-purpose host because I got 2 years for 20 bucks, doesn’t support FTPS (ftp with ssl). So Aptana will hang while it tries to connect (and there’s no cancel button). And now I have to use FTP, which is of course insecure. Edit: And FTP doesn’t work either. I will have to think about/research this more later.

And don’t even get me started on Django and WSGI. On the brighter side of things, Dreamhost has git, yay.

SILT: bcrypt, IZZE, and burp edition

Delicious drank

• For all password storage, use bcrypt. Don’t use salted md5, definitely don’t use plain text. Also, don’t email users their passwords. The crypt() function in PHP actually has the blowfish algorithm alternative built in for versions >5.3.0, though you may want to set up the system libraries yourself, to allow for updates.
• I recently invested in some IZZE sparkling juice. It’s pretty much carbonated juice cocktails. There are a few flavors and I’ve tried the Pomegranate, Clementine, and Grapefruit. Cranberry’s cranberry, Clementine is ok, Pomegranate could taste more like pomegranate, but is still good, and Grapefruit is probably the best. Grapefruit’s a little too sweet, so I like to add some tonic water. For drinkers, these would probably be great mixers. I get mine on Amazon, where they go on sale every once in a while for like $15 for 24.
• Speaking of security and carbonated things, you’ve got to check out Burp Suite. It is an amazing application for security testing web applications. It automatically fuzzes apps. For the click-lazy, fuzzing is just providing wildly invalid data where only a computer could think to put it. As soon as I develop something security-sensitive, ya’ll know I’m buying this.

Cloudkick is awesome

Oh man, cloud computing. It gets talked about a lot, and usually in a really fluffy, “it’s-the-future” sort of way. I’m not sure if we’re all going to have a unified online OS by 2011, but cloud computing is serious business for Internet startups. The ability to lease and scale in smaller and smaller units means a lot for reducing initial costs and maintaining a high level of service for your growing product.

Of course, using cloud-hosting services like Amazon EC2 leads to a different flavor of complexity compared to a considerably more traditional/less scalable/more expensive solution like a dedicated server. So, what can one do to keep it simple while taking advantage of the features offered by cloud computing?

If you haven’t seen it on TechCrunch already, Cloudkick is a free service that can help you do just that. I got a chance to use it a bit during private beta and was very impressed. Alex Polvi and friends at y-combinator have put together a very simple, responsive, and aesthetically pleasing way to monitor and manage all manner of nodes, all from within your browser. Really, some of the stuff these guys do with JavaScript is amazing. (It’s got a sweet in-browser console and it introduced me to the Orbited JavaScript networking library.)

Anyway, if you’ve already got some nodes of your own, or even if you’re just a startup hopeful like myself, I recommend letting the site speak for itself. It’s free, it’s public now, and it’s growing fast.