Archive

Archive for the ‘JavaScript’ Category

Getting a Job at Google: A Web Developer Fizzbuzz

May 24th, 2008

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 languagesclosures, 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.

Today I still think about Getting that job at Google, Yahoo!, Amazon, or Microsoft. How well do you know JavaScript?

Update: I redid the Google Exercise using jQuery and more semantics, you can find my latest version here: The Google Exercise Revisited: Semantic Markup with jQuery.

Book Reviewed: ASP.NET AJAX in Action by Alessandro Gallo, David Barkol, Rama Vavilala

April 20th, 2008

The authors of ASP.NET AJAX in Action did an OK (Average) job at presenting the ASP.NET AJAX Framework. However; this book lacked objectivity and suffered from hype. The authors didn't seem to have proficient experience with the JavaScript language, or enough experience with other AJAX Frameworks / Libraries, or sufficient experience using the ASP.NET AJAX Framework in real world projects. This book sadly felt like most technical books – average.

Comments like “we recommend that…”, “because it makes no sense…”, “you must rely on a special method…”, “you must understand X,Y,Z to run complex client-side code without writing a single line of JavaScript” were discouraging. Many of the “whys” were left answered and the technical inner workings of the framework often trivialized. Don't get me wrong, writing a book is incredibly time consuming, but if you're an author, presenter or the like, and you don't fully understand something then admit it. Do some research, provide some links, or move on. Consistently making comments like these bring the integrity of the whole text into question.

The ASP.NET AJAX Framework itself is technically flawed, bloated, and almost entirely impractical. I was disappointed with the server-centric approach that both the book and ASP.NET AJAX Framework takes. I was disappointed that the book continually pushed JavaScript under the carpet as magic and at the end of the book I was pleased to see the promise of making “the JavaScript code disappear” never was  fulfilled. JavaScript is the very most important part of AJAX, without the 'J' in AJAX, we're left with nothing – just 'Asynchronous', 'And', heaps of more ugly 'XML'.

When reading this book, take the contents and the ASP.NET AJAX Framework with a grain of salt, if you're really serious about learning AJAX then read JavaScript: The Definitive Guide by David Flanagan.

I typically only contribute positive reviews, but I don't agree with the majority of reviews found on Amazon and hope this review provides some objectivity. I commend the authors on their hard work, I'm probably being too harsh with this review – I know it's tough to write a book, and imagine they made many sacrifices as they worked towards tight deadlines.

View my review on Amazon.

Author: Adam Kahtava Categories: .NET, AJAX, ASP.NET, ASP.NET AJAX, Book, JavaScript, Review Tags:

Book Reviewed: JavaScript: The Definitive Guide by David Flanagan

March 26th, 2008

JavaScript: The Definitive Guide by David Flanagan is a great book! When I began reading this book I was convinced that (like many technical books) the first couple chapters would contain the important stuff and the content would slowly digress into page filler, fluff, and the book would become just another monitor stand. But not this book! After finishing the formal chapters I started reading the references – YES, this book is so good I’m reading the references! Flanagan has raised the bar for all JavaScript books – this book is in its 5th edition, and has been reviewed by a couple web Gurus (Douglas Crockford, Peter-Paul Koch).

JavaScript is the assembly language of the internet – most of the current-generation web frameworks make heavy use of JavaScript, CSS, and AJAX. If you really want to understand how ASP.NET or Ruby on Rails really works, how AJAX works, how JavaScript libraries work. If itching to push the web browser envelope, to really innovate, then this book is a required read. In addition if you’re coming from a staticly type background like Java or .NET, then JavaScript (a functional programming language) will open your eyes to a different programming model. Once you grock the fundamentals of JavaScript you’ll never be able to look at classical languages (Java, C++, .NET, …) with a straight face again. I highly recommend this book to any web developer from any web framework camp.

View my review on Amazon.

Inter / Cross Browser Window Communication Using JavaScript

March 11th, 2008

A quick search on the internet for “Inter Browser Window Communication Using JavaScript” reveals many outdated search results recommending questionable techniques. In the past I’ve fallen prey to many of these ill-advised suggestions. So… I thought, I’d start a small series on JavaScript techniques that I’ve found useful.

This post covers Inter / Cross Browser Window Communications using JavaScript.

A common scenario in web applications is: to have Page A open Page B , then have Page A communicate with Page B or vise versa.

One of the techniques floating around the internet suggests that you use Cookies and a JavaScript setTimeout function that listens for the presence of a cookie. So essentially Page A sets a cookie and Page B listens for this cookie and acts on it.

A alternate solution might be to use the JavaScript Browser window.open and window.opener methods. Using these two methods we can achieve inter / cross browser window communication as long as the Same Origin Policy is withheld – a similar approach can be taken for frame and iframe communication.

An example:

// myNewWindow stores the reference to the newly 
//   created window, this provides a handle for defining 
//   and calling methods in the New Window 
var myNewWindow = window.open('about:blank');

// Let us call the alert method in our New Window 
//   from this window (the Original Window) 
myNewWindow.alert('Hello From Original Window');

// Let us call an alert method in our Original Window 
//   from our New Window. So.. Lets use a timer 
myNewWindow.setTimeout(
 'window.opener.alert(\'Hello From The New Window\')', 100);

Click here to run this code live in your browser window using a Bookmarklet, or copy the above code into your Firebug Command Line Console.

Author: Adam Kahtava Categories: Firebug, JavaScript, Software Tags:

Software Ethnocentrism: Staving Off Tunnel Vision

February 17th, 2008

Loosely typed / weakly languages are amazing! But… for myself, coming to this conclusion was like an acquired taste.

Many people appreciate loosely typed languages for the how expressive, elegant, simple, and Zen like they are – and I agree, but I haven’t always thought this way. You see; strictly typed (statically typed) programming languages have always been the mainstay of my programming vocabulary, C++, Java, and C# were the meat and potatoes of my programming language diet. I used these languages (strictly typed) because they were familiar, I understood how their compilers, IDEs, and comfortable class-based inheritance model worked. If someone asked me whether I liked C# (insert strict typed language) or JavaScript (insert weakly typed language) I would immediately have given preference to the strictly typed language. Why? Because that’s where I felt safe, and that’s what I understood – besides who wants to admit they prefer the “weak” language? My preference wasn’t based on knowledge or experience it was based on my familiarity with the strictly typed culture.

I was suffering from Software Ethnocentrism.

Software Ethnocentrism often entails the belief that one’s programming language or development environment is the most important and/or … are superior to those of other software developers. Within this ideology, software developers will judge other groups in relation to their own particular development environment or culture, especially with concern to programming language, methodologies, behaviour, customs, and religion.  - the derived definition (above) is based on Wikipedia’s article on Ethnocentrism

I had the tell tale signs of Software Ethnocentrism:

  • I thought strictly typed language were “the bomb”  – the only viable solution :)
  • I thought Test Driven Development (TDD) and Unit Testing was the panacea
  • I was completely obsessed with refactoring tools like ReSharper and Refactoring
  • I thought my Compiler and IDE were superior
  • and I had complete faith in multipurpose strictly typed languages like C#

Then things changed. I started diving deep into the hearts of weakly typed languages: JavaScript, Ruby, and LISP. Now today, I wonder If the time I spent hung up on strictly typed languages, TDD, and unit testing could have been better spent by expanding my programming vocabulary. If I had only delved deep into the heart of weakly typed languages (like JavaScript, 3 years ago) and grocked the fundamentals of these other languages, then I could have achieved this richer understanding of programming languages that I have today. It’s important to note, that i’m not stating that weakly typed languages are better than strictly typed languages or vise versa, only that both have their place, are equally useful, and should be used when appropriate.

Do you too suffer from Software Ethnocentrism? Try staving off this programming language tunnel vision, learn a new type of programming language. It might be a better investment in your time than becoming obsessed over a microcosm (like say unit testing and TDD).

Steve Yegge makes some humorous jabs at the static type culture:

… I think we can conclude that people who rely too much on static types, people who really love the static modeling process, are n00bs. … Hee hee. – Steve Yegge: Portrait of a N00b

… I think there’s some mystical relationship between the personality traits of “wakes up before dawn”, “likes static typing but not type inference”, “is organized to the point of being anal”, “likes team meetings”, and “likes Bad Agile”. I’m not quite sure what it is, but I see it a lot. – Steve Yegge: Good Agile, Bad Agile

… you have your slob type systems and your neat-freak type systems, and it comes down to personal preference. The neat freaks (Java, C#, C++, Pascal) know damn well that the slobs (Perl, Python, Ruby, JavaScript) are just as productive. Maybe even more so. – Steve Yegge: Egomania Itself

Cartoon Notes: I took this cartoon from Steve Yegge’s blog titled Egomania Itself. It represents the irony of static type languages where everything is a named type – presumably the owner of the property is naming all his objects so he can remember what they are, but in loosely type languages, If it walks like a dog and barks like a dog, I would call it a dog. Read more about Dog Typing er… Duck Typing.

How Well Do You Know JavaScript?

January 13th, 2008

JavaScript is probably the world’s most popular and misunderstood programming languages and for good reason.
When a developer claims to know JavaScript this generally equates to one or all of the following:

  • “I know what JavaScript is, I can learn JavaScript in 30 minutes
  • “JavaScript is for kids, it’s a toy language, it’s easy”
  • “I just copy and paste my JavaScript snippets / scripts from the internet”
  • “JavaScript is just another programming language like C++, C#, VB.NET, or Java”

If thoughts similar to these have crossed your mind when sizing up your JavaScript knowledge, then you probably don’t know JavaScript.

I would argue that if you’ve never programmed in a functional programming language (like: Lisp, Scheme, F#), never read a GOOD book on JavaScript, or never watched a video on JavaScript, then you probably don’t understand JavaScript at all. JavaScript is starkly different than any other mainstream programming language.

When it comes to JavaScript, if you don’t understand the fundamentals then you’re only punishing yourself.

Here are some things every JavaScript developer should probably understand:

  • JavaScript, Mocha, LiveScript, JScript, and ECMAScript are all essentially the same.
  • JavaScript is a prototypically inherited (prototype-based programming) language which is very different than the classically inherited (class-based programming) languages like C++, Java, and most of the .NET languages – you know the difference between a prototype-based programming and class-based programming language.
  • JavaScript is a loosely typed language – you know the difference between strongly-typed programming languages and weak-typed or loosely typed languages.
  • JavaScript is a functional lambda language – you understand lambdas and that functions in JavaScript can be lambdas.
  • JavaScript functions can be defined inside functions, inside functions, inside functions, and so on – you can demonstrate this.
  • JavaScript uses function scope, has no curly brace ‘{}’ block scope – you understand that this is common attribute of most functional programming languages.
  • JavaScript has no private, public, protected assessors, no classes, no enums, no structs – you understand that all these language features can be achieved through objects and function closures.
  • JavaScript is classless, but instead it uses objects as general containers.
  • JavaScript makes use of garbage collection.
  • JavaScript uses truthy and falsy values – you understand which values are truth and falsy.
  • JavaScript makes use of the ‘nan’ (not a number) and ‘undefined’ values – you understand the difference between these values.
  • JavaScript has pretty good debuggers – you understand how to debug JavaScript from both IE (link) and Firefox (link).
  • You appreciate recursion, and understand that recursion is a useful technique in JavaScript.
  • You understand that JavaScript Namespaces should be used – you understand the importance of namespaces, and know how to create one (Namespacing Your JavaScript).
  • You know how to avoid the JavaScript pseudo-protocol (<a href=”Javascript:alert(‘hello’);”), and appreciate avoiding it.
  • You know how to avoid embedding DOM Level 0 JavaScript events (<a onclick=”alert(‘hello’);”) in your mark-up / document structure, and appreciate this technique.
  • You know that JavaScript can make use of two different event models (event capturing and bubbling), but we should only ever make use of bubbling.
  • You understand what JSON is and how it’s used.
  • You know how to keep you JavaScript, CSS, document structure separate, and appreciate non obtrusive JavaScript.

If any of these points seem foreign, then it may be time to learn JavaScript. With all the hype and buzz around Web 2.0 and AJAX it could be a great way to augment your career while broadening your programming language vocabulary.

Great resources for learning more about JavaScript:

Videos:

Books:

Links:

Author: Adam Kahtava Categories: .NET, AJAX, ASP.NET, CSS, DOM, Firefox, IE, JavaScript, Software, Videos Tags:

My first Greasemonkey Script: Goodbye ASP.NET Forum Ads

November 21st, 2007

Greasemonkey is an add-on for Firefox. Through JavaScript it allows anyone the ability to dynamically modify a page as, or after it’s being rendered in the browser. This lets anyone trim the DOM, remove ads, and modify page in anyway they see fit (it also opens up some serious privacy concerns with XSS). Anyhow, I spend a fair time on the ASP.NET forums, but the advertisements have always made for a somewhat negative, but tolerable user experience.

Today I finally broke down and wrote my own Greasemonkey script – now formally known as “The ASP.NET Forums Beautifier” for lack of a better name.

The Script Before and After:

Before – usually the ASP.NET Forums look like this:

After – with my script running in Greasemonkey we get this:

note: the greasemonkey icon, and complete lack of fluff / advertisements on the second screenshot.

Creating this script was simpler than I expected. It was a matter of skimming through an article on How to write Greasemonkey scripts, using Firebug’s JavaScript Console and Firefox’s Error Console to test my code (after all, Firefox is the new IDE, Firefox as an IDE), and an hour later, Viola! No more ads.

The YUI blog and Douglas Crockford in particular, have inspired my JavaScript renaissance. JavaScript is really interesting, it’s a functional, loosely typed programming language that uses prototype-base inheritance. Developing in JavaScript is a real treat from some of the more statically typed languages.

Download Greasemonkey and “The ASP.NET Forums Beautifier” for yourself. :)

Author: Adam Kahtava Categories: CSS, DOM, Firebug, Firefox, JavaScript, greasemonkey Tags:

JavaScript is awesome: I want to work with Douglas Crockford!

September 16th, 2007

Watch these amazing videos on JavaScript by Douglas Crockford (a senior JavaScript Architect at Yahoo!). I wish I could program in JavaScript all day.

Links to Crockford's great JavaScript videos:

You might want to download YSlow for Firebug while your at it too… :)

Author: Adam Kahtava Categories: Firebug, JavaScript, Videos Tags: