Adam.Kahtava.com / AdamDotCom

A couple years ago I tried getting a Web Developer position at Google. After a few interviews they had me complete their Web Developer exercise. I did it, and my initial submission would have made any respectable web developer ill - you can read more here: Getting a Job at Google: A Web Developer Fizzbuzz. I redid the exercise over a year ago, but today even that code stink.

I did the exercise yet again (the third time) because my last attempt needed some improvements:

• it suffered from chronic classitis and divitis (too many classes, ids, and divs were making me itchy)
• it wasn’t really using semantic / structural markup (all the extra divs etc… cluttered my markup, and some of my class names like container-borders are non-semantic altogether)
• it performed poorly and wasn’t accessible (everything was being rendered in the DOM, there was no immediate rendered markup which kind of violated the idea of unobtrusive JavaScript, nor was it screen reader friendly)
• it wasn’t making use of any JavaScript libraries to abstract browser inconsistencies out of the code
• it suffered from my software ethnocentrism (my variable and object naming like GoogleExercise was mirroring statically typed languages and not the native language they were being written in)

Here’s my latest Google Exercise (addressing all the above concerns):
View this post outside your RSS reader to see it in action or view it here.

This attempt makes use of jQuery and uses 57 lines of JavaScript (almost 200 lines less from my last one).

You can view the code for this attempt here: google.contact.widget.js, index.html, google-contact-widget.css.

You can view the old code here: GoogleExercise.js, index.html, GoogleExercise.css.

If you think I can improve on my code then let me know. Oh yeah, and if you’re a recruiter from Google then hire me! :)

Over the past couple months I had the pleasure of working in a Java shop. Up to this point I've spent most of my time in the .NET realm. Working with Java was a great chance to experience the similarities and contrasts between environments, cultures, and web application implementations. Here are a couple of my observations.

Java developers are more knowledgeable than the typical .NET developer. Java developers tend to gravitate towards complexity, Linux, UNIX, open source, and continuous learning. They are less familiar with the wizards and drag-n-drop style development that often characterize .NET development. The Java developers I worked with didn't depend on a single unified IDE (like Visual Studio), instead each developer chose their text editor / environment (Emacs, Eclipse, TextMate, E-TextEditor, and jEdit were all being used on a single project). Each developer was responsible for being productive with their editor; and took responsibility for learning shortcuts, and other performance enhancing techniques. This broad use of editors placed an emphasis on the core command line tools which ensured that developers knew how the application was put together, and cultivated broad application troubleshooting skills within the team.

Unified IDEs (like Visual Studio or Eclipse) do not result in faster development, better developers do. Developers empowered with the ability to choose their development environment / text editors / operating system resulted in more passion and responsibility. Informal friendly rivalry between editor users drove development faster while providing diversity within the work place.  

Programming languages and technology stacks don't matter to experienced software developers. As a developer it's easy to become a fanboy of languages or technologies stacks, but… they don't matter - writing good software within the bounds of our project do. There's no reason to be tied to a specific language or technology stack. Sure, languages fall into a specific category (dynamic, static, classical inherited, prototypical inherited) but programming languages are very similar.

Steve McConnell has been saying this all along:

mastering more than one language is often a watershed in the career of a professional programmer. Once a programmer realizes that programming principles transcend the syntax of any specific language, the doors swing open to knowledge that truly makes a difference in quality and productivity. - Steve McConnell, Code Complete 2nd Edition

Ruby is consistently placed as one of the ten most popular programming languages - see the TIOBE Programming Community Index for more language comparisons. Matz (the creator of Ruby) described his guiding philosophy for the language as one that’s “designed to make programmers happy”. While the Ruby language gets a lot of praise for its zen like qualities, its clarity, and terseness. The tools surrounding Ruby like the RubyGem Package Manager along with its active community and growing collection of Gems (view the list here) are often overlooked.

I like the RubyGem system just as much as Ruby, it makes a developer’s life easy.

For example, let’s say I want to design a new class:

• Install Ruby
• Install the Test-Unit Gem (along with a couple automatically installed prerequisites):

C:\>gem install test-unit
 Successfully installed test-unit-2.0.2
 Successfully installed hoe-1.8.3
 Successfully installed rubyforge-1.0.2
 Successfully installed rake-0.8.3

• Create a new test.rb file along with a new class.rb file (alternately we could have used the Interactive Ruby Shell directly from the command line)
• Run the test (test.rb):

C:\>ruby test.rb
 Loaded suite test
 Started
 .
 Finished in 0.001 seconds.
 1 tests, 1 assertions, 1 failures, 0 errors

• ???
• Profit! :)

Contrasting this to the Java / C# world: I’d be installing a compiler (or slower yet an IDE), then installing / configuring a testing framework. I’d also probably be installing a build process tool (like ant / nAnt), then I’d need to create a build file.

Similarly if I wanted to install Rails at the command line I specify gem install rails or if I want to use  RSpec gem install rspec.

The Ruby tools, ecosystem, and community is fantastic.

I’ve always been uncomfortable with the ASP.NET Webform / Winform metaphor - I moved to ASP.NET from ASP 3.0 / PHP with no proper Windows development experience. The Webform / Winform metaphor was alien, but the code behind model and the ability to re-use controls drew me in, while the Webform metaphor became a tolerated evil. Today ASP.NET MVC and the announcement that Microsoft has embraced jQuery keeps me interested.

As developers, limiting ourselves to a single metaphor, framework, or programming language is a liability to our career. In order to remain employable and engaged with our work, we need to understand the higher level concepts surrounding our chosen development arena - if you’re working in the webspace this means knowing CSS, JavaScript, HTML, and more than one server-side language. Then beyond technologies and languages we should be looking at transcending principals like design patterns, and good design practices.

identifying with anything so strongly that it starts to give you emotional reaction is really bad. You never know when your language is going to be obsolete or … your favorite framework is going to be replaced. … I would love to see everybody learn a bunch of languages because it does make you a better programmer. … Most people will never switch languages. - Steve Yegge, stackoverflow podcast #25 

Following a hard rule for naming conventions in software development is difficult; it’s always a compromise between how things were named in the past and where things are going in the future. Other dependencies like the size of the project, the number of developers, and the environment you’re developing in play important factors. In short, there’s never a great naming rule, but here’s my general (heuristic) approach to naming.

My heuristic approach to naming conventions:

New Development / Greenfield Work:

• Follow the conventions of the language, or the standards used within the larger community, and pay attention to the API. For example: If you’re programming in .NET follow the naming conventions outlined in MSDN, in JavaScript look at the DOM API, in CSS look at the definitions.
• If a formal naming convention exists for the organization and these conventions makes sense (they aren’t too far off the language APIs) then follow them. If it feels like the naming conventions were created in the dark ages by a very-very senior COBOL Developer then start asking questions.

Maintenance / Brownfield Work:

• Follow the conventions of the existing code if you’re modifying an existing module.
• If you’re creating new modules then consider following the conventions of the language and API.

This post was inspired by a podcast by Donald Belcham and Kyle Baley on Brownfield Applications.

Most languages and technologies used in web applications come with their own unique naming conventions - which is unfortunate, but necessary, because diversity is important. Languages like JavaScript and PHP use camelCase, CSS uses-hyphenated-delimiters, and ASP.NET / Java / and the like adhere to the conventions used in their respective libraries and frameworks. Managing the different naming conventions in a web application can be difficult, but with discipline, embracing each language’s conventions can provide some great benefits.

A common mistake I’ve made in the past, was trying to make all languages adhere to a single convention. As a budding PHP / ASP developer I took the-single-convention-for-all-languages approach. In retrospect, I used this approach because I didn’t completely understand the language I was using, and in order to compensate for this lack of knowledge, I’d try to meld the languages into the mental model I understood best. This was a mistake.

Today, I find that working with the conventions of the language facilitates re-use (experts in the language understand what I’m doing), promotes portability (modules can be used across projects regardless of server-side technologies), encourages global collaboration (open source modules and plug-ins can be easily consumed and contributed to), and helps to a nurture a more maintainable application (developers from other language domains can easily maintain the application with a relatively small learning curve). Like a carpenter working with fine material, I embrace working with the grain of each language. It’s also fair to mention that breaking free from the monocultured (one-size-fits-all) approach to naming conventions provides a broader perspective, and also makes your development skills more universal - it might even open the door to different development domains in the future.

Then there’s the discussion on name length, verbosity, and using meaningful names. Steve McConnell suggests that the optimum name size for a variable or function is between 8 and 20 characters (Chapter 11, Code Complete), but with tools like ReSharper (for renaming / refactoring etc…) I find myself using names well over 30 characters. So names like GetApproveeTotalFromNamedBasket are a common occurrence in my code. However, like most things, verbosity does need balance (everything in moderation right?). In the business layer, descriptive names are a godsend - they jog my memory as I rediscover what the module I wrote last month was supposed to do. But… in the presentation layer languages (like JavaScript, CSS,  ASP.NET, or XHTML) you may want to reconsider using long descriptive names. Since verbose, long running descriptive names in the presentation layer are passed over the network and can degrade performance. Often times these verbose names are combined together - throw in ASP.NET name mangeling, start hooking in verbose CSS definitions, and then start inserting JavaScript events. All this compounds quickly and result in large page payloads filled with elements like the following:

<div id="ctl00_ContentPlaceHolderForAllTheBestImprotantContent
 _PanelForTheBestReviews"> 
<a onclick="LinkButtonClick_ThankYouForTakingTheTimeToReadThis();" 
 id="ctl00_ContentPlaceHolderForAllTheBestImprotantContent_
 RepeaterForAllMyFavoriteBookReiews_ctl00_
 LinkButtonMarkReviewAsFavorite"
 class="LinkFormatingCssClass SelectedLinkFormatingCssClass" 
 href="javascript:__doPostBack( 
 ctl00$ContentPlaceHolderForAllTheBestImprotantContent$ 
 RepeaterForAllMyFavoriteBookReiews$ctl00$LinkButtonMarkReviewAsFavorite'
 ,'')">Mark As Favorite </a> 

Note: That mess of code above would fire a JavaScript event then an ASP.NET event. It’s the result of placing an ASP.NET LinkButton, inside a Repeater, inside a Panel, inside a Masterpage, and adding a JavaScript event along with some CSS. We can see that using long names in the presentation layers results in a mess of text. It’s also fair to mention that the ASP.NET MVC Framework lets developers write cleaner presentation code.
Sure, everyone cites premature optimization as the root of all evil, and we do live in a world of gzip file compression and JavaScript minifiers. But… keeping names short in CSS, ASP.NET, and XHTML isn’t hard as long as you’re mindful of the final goal. Smaller names in the presentation layer will reduce the amount of data transferred over the network which increase the performance of the application.

Joseph Smarr of Plaxo.com once said:

Web applications are only slow if you let them get slow - Douglas Crockford, Alex Russell and Joseph Smarr: On the Past, Present and Future of JavaScript [30:00]

My preference (project requirements warranting) is to keep things short and concise in the presentation languages while using longer descriptive names outside the presentation languages. What’s your preference?

#CalgaryBarCamp was swell. It was refreshing to meet such a diverse group of like minded people that all essentially do the same thing (create software), but do it in different ways using different tools, platforms, and languages. The ad-hoc discussions both in the bar and between sessions were my highlight. A reoccurring theme in our conversations was that technology, tools, and platforms don’t matter that much. What really matters is: people, communication, ideas, taking risks, and motivation.

The topic of our discussions reminded me of something David Heinemeier Hansson said when talking about software development:

You don’t need to be a f***ing genius to make any of this stuff work, it’s not rocket surgery! - David Heinemeier Hansson at Startup School 08

DeMarco and Lister also echoed this outlook back in the 80’s, and publicized: the High-Tech Illusion:

the High-Tech Illusion: [is] the widely held conviction among people who deal with any aspect of new technology … that they are in … high-tech business. [These people] are indulging in this illusion whenever they find themselves explaining at a … party, say, that that they are “in computers” … The implication is that they are part of the high-tech world. [These people] usually aren’t. The researchers who made the fundamental breakthroughs in those areas are in the high-tech business. The rest of us are appliers of their work. - Peopleware : Productive Projects and Teams

If we were in the High-Tech business, then we’d be the bottom feeders (the parasites, the grunts), because our daily activities revolve around consuming other peoples research and work (programming languages, platforms, frameworks and the like). We are consumers, we’re not on the cutting edge nor are we in the high-tech world.

Perhaps building software could be much like outfitting yourself for a day in the snow. You head off to the local shopping mall, you acquire the functional items to keep yourself warm, but brands and store choice don’t really matter. Whether we’re buying winter boots or choosing a programming language, technology doesn’t really matter. There are an infinite number of ways to solve any problem, as well as an infinite number of technical permutations to form a solution. If we can solve the problem within the constraints of our problem domain then we’ve succeeded.

The High-Tech Illusion often permeates my world - I work as a Web Developer in the Microsoft realm. I continually see the High-Tech Illusion manifests itself in these situations:

• Colleagues talking in vague opaque high-level metaphors that patronizingly shield you from the inter working of what they assume is beyond your comprehension
• Fixations on specific tools, hardware, platforms, and methodologies while the problem that needs to be solved is diluted and any combination of these items could solve the problem
• Colleagues that assume superiority and can’t acknowledge that knowledge is acquired through research and a continual efforts to improve

Pretentiousness in the software realm (in teams, organization, and so on) is usually the byproduct of someone that’s living the High-Tech Illusion.

I’ve been guilty of subscribing to the High-Tech Illusion. How does the High-Tech Illusion permeate your world? How can we get back to reality?

How old were you when you started programming?

Somewhere around the age of 8 or earlier, computers were always just there - they’d been in my life since I can begin to remember.

How did you get started in programming? What was your first language?

My dad went to College for robotics when I was around 8 years old. His robotics program involved lots of programming and together we worked through a couple BASIC programming books. I continued to mess around with BASIC and wrote scripts so I could get at my favourite games. Later I was frequenting BBSs (The Fisherman’s Scroll), and surfing the internet through lynx (a text based browser). I eventually became a Script kiddie - being a Script kiddie was what really turned me on to programming. My friends and I would write IRC war scripts, play MUDs, and try to figure out how Trumpet Winsock, networks, and HTML worked - those were the days of Netscape 1 (the version with the big glowing ‘N’). Later we tried writing our own version of NetBus with the help of C / C++ programmers on IRC - the fragments of the C language these programmers exposed to me were magical, and sparked an genuine interest in computer programming. In addition to all this my dad kept a constant supply of old and new computer parts funneling into our house, my brothers and I would build computers from the parts - today my closest brother is a Linux fanatic, evidently all this sparked his interest too.

Programming has always been a part of my life, BASIC was my first language.

What was the first real program you wrote?

I followed a couple game tutorials from my BASIC books, but my first real program would have been Pacman programmed in Turing - in my final year of high school I enrolled in a computer course, where the instructor let us write any program we wanted for half a school year I chose to write a game.

What languages have you used since you started programming?

I’ve spent most my time in C, C++, C#, JavaScript, SQL, and the mark-up languages. I primarily program for the web or at least for the network, but have used many other languages like COBOL and so on…

While using multiple languages are great, I really believe that we you should completely understand the fundamentals of at least two languages (like say a static language and a dynamic language), because:

Once a programmer realizes that programming principles transcend the syntax of any specific language, the doors swing open to knowledge that truly makes a difference in quality and productivity. - Steve McConnell, Code Complete 2nd Edition. 

What was your first professional programming gig?

I would have been 18. It was my first year of College, I needed a part-time job in order to pay rent, I initially worked on an assembly line, but would occasionally help the office workers troubleshoot their IT issues. I soon found myself working as the company’s network admin / computer gopher. I went on to develop their cataloging system and a website. At the time I was going to school for Electronic Engineering, but decided to switch to a Computer specific program. Previous to this, I had freelanced a couple websites for local businesses while in high school.

If you knew then what you know now, would you have started programming?

Absolutely! The industry continues to instill a sense of wonder in me. I can’t imagine doing anything else.

If there is one thing you learned along the way that you would tell new developers, what would it be?

• Read! You’d be surprised how little progress has been made in the software industry over the past 30 years. By reading we can learn from the mistakes others have made.
• Don’t be intimidated by code or frameworks handed down by large organizations, their code isn’t any different than yours.
• Hard work always pays off, or as Thomas Edison said: “Success is 10 percent inspiration and 90 percent perspiration.”

What’s the most fun you’ve ever had … programming?

Collaborative programming is always fun whether it be paired programming or working together on a project. It’s hard to pinpoint the most fun I’ve “ever” had, because it’s all fun. :)

This post was in response to Michael Eaton’s initial post on: How did you get started in software development?

Now it’s your turn to answer: How did you get started in software development?

Weighing in at 140+ pages of content, JavaScript: The Good Parts [Douglas Crockford] cuts through the obscurities, pleasantries, and filler found in most technical books. Instead, this book dives straight into the heart of the JavaScript language. It presents the clearest comprehensive explanation of what makes JavaScript a great programming language that I’ve encountered to date. It nails the important concepts, like JavaScript’s: object oriented nature, its classless (pseudoclassical) nature, and functional nature. While covering the fundamentals like JavaScript’s: functions, lexical scoping, lambdas, prototypal inheritance, and functional inheritance.

This book’s size makes it approachable for all audiences, its style is terse and concise. This book has the potential to do for JavaScript, what Richie’s inspirational classic the C Programming Language did for the C language.

JavaScript is the programming language of the web (AJAX), and this book will guide you through the good parts of this often misunderstood language - while this book is an excellent reference, it is not intended to replace JavaScript: The Definitive Guide, you’ll do best to have both these books on hand.

If you enjoyed (or are considering) this book then you may want to learn more of what Douglas Crockford has to say, check out his great JavaScript video series on the YUI Theater.

I highly recommend this book. View my review on Amazon.

Back when the web turned 2.0, AJAX was all the rage, and gas was cheap, a Google recruiter contacted me. We worked through a couple screening interviews - I explained how I was a .NET / ASP.NET / C# developer with some experience with Java and PHP, I described how C# was somewhat similar to Java. Things went great, I moved on to the next step of the process - writing code (a JavaScript widget for Gmail) with a 2 day (weekend) hard deadline. At the time I was wearing JavaScript diapers, but tried the exercise anyways - I'm still convinced the recruiter confused my Java / C# experience with JavaScript. Anyhow…

The Google Web Developer Exercise:

Web Developer Exercise

Attached are three states of a new contacts widget. This widget will be used across Google and may be anywhere on the page. Designers will also use this in mocks for usability tests. Create the HTML, CSS, and JavaScript for the widget as described in the image. Your solution must work in Firefox v1.5+ and IE v6+. Bonus points for a solution that degrades nicely on older browsers.

After my first attempt, I concluded that:

1. My JavaScript knowledge was embarrassing
2. Dynamic programming languages like JavaScript using prototypical inheritance were awesome - as a monocultured .NET developer I had sorely been missing out
3. Framework Web Developers (ASP.NET, Ruby on Rails, and so on) aren't really Web Developers - we depend on a framework (an API) as a crutch, where the law of Leaky Abstractions is very real, and often when it rears it's head we use our golden hammer (our multipurpose language of choice), but there are better tools at hand
4. Web Developers claiming n years of experience need to at least know JavaScript, CSS, HTML / XHTML, a server-side language, and some XML / XSL - NOT just a single multipurpose language or framework
5. Innovation can only happen when you become one with the technologies surrounding your realm - for example: Jesse James Garrett probably would not have publicized AJAX had he been an exclusive ASP.NET developer. Diversity is essential for innovation

In retrospect this exercise is brilliant, it's a more complex derivation of a Fizzbuzz exercise, which effectively weeds out the knowledgeable candidates from the n00bs. JavaScript is notorious for being one of the world's most misunderstood language, many developer (and the ASP.NET Framework) still use JavaScript techniques from the old days of Netscape. For example: <a onclick=”return false;” …, or <a href=”Javascript: do something;” … are common DOM Level 0 inline techniques that should be avoided. These techniques have been replaced, but finding developer that use these JavaScript techniques can be hard.

By having a developer complete this exercise you effectively determine that the they understands these concepts:

• Cross browser compatibilities and work arounds for both JavaScript and CSS - with a preference given to feature detection (object detection) vs browser detection, an understanding of the different event handling models between browsers
• An understanding of the separation of concerns - JavaScript, markup, and CSS should be separate files, or at least separated within the document
• Event registration and listening - DOM events, the different browser event models, no inline level 0 event declarations, no pseudo JavaScript protocol inline declarations within markup
• An understanding of functional languages - closures, namespaces, lambdas, recursion where necessary
• Node manipulation - creating, swapping, removing elements
• Knowledge of non-obtrusive JavaScript techniques
• Importance of modular / compartmentalization of CSS and JavaScript - defensive programming techniques that minimize the risk of interfering with other scripts and elements within the page, part of the non-obtrusive techniques, how to avoid global variables
• An understanding on how to debug JavaScript from both IE (link) and Firefox (link)
• JavaScript code conventions - naming conventions, statement conventions
• CSS naming conventions
• General DHTML / AJAX techniques - showing and hiding elements
• A gauge on their attention to details and UI design intuition - what their gut tells them to do when things aren't spelled out

My latest crack at the Google Web Developer Exercise:

You'll have to visit my site (view this blog post outside a RSS reader) to view the code in action.

The code: GoogleExercise.js, index.html, GoogleExercise.css

Today I'm wearing JavaScript training wheels - feel free to comment on the code, I'm always looking for improvements and suggestions. I did take a couple shortcuts on the CSS / UI side of things as I was focusing more on the functionality.

Using one of the AJAX Libraries (like jQuery) we could certainly do this exercise in significantly fewer lines of code.