Archive

Archive for the ‘AJAX’ Category

The Project Badge: Show The World Your GitHub and Google Code Projects On Your Blog

February 24th, 2010

The Project Badge displays your GitHub and Google Code projects in a badge that can be displayed on your site. This widget was built on the data being returned from my Open Source Service.

View this post outside your RSS reader to see it in action or view it here.

The source for the Project Badge can be found here and the source for the accompanying service can be found here. A list of all my publicly available web services can be found here.

Using The Project Badge On Your Website or Blog

1. Add The Asset References

Add the following asset references, and a reference to jQuery (if you don't have one already).

<link rel="stylesheet" type="text/css" href="http://github.com/AdamDotCom/project-badge/raw/master/project-badge.css" />
<script type="text/javascript" src="http://github.com/AdamDotCom/project-badge/raw/master/projectBadge.js"></script>

2. Configure Your Accounts

Set your project accounts (it's OK if you only use one host) then optionally set the appropriate filters - in my case my Google Code projects were prefixed with adamdotcom and I had duplicate projects on both GitHub and Google Code. By specifying remove:adamdotcom,remove:duplicate-items in my filters I filter out the duplicates and removed adamdotcom from the project name.

<script type="text/javascript">
  projectBadge.load({
      gitHub: 'AdamDotCom',
      googleCode: 'adam.kahtava.com'
    },{
      filters: 'remove:adamdotcom,remove:duplicate-items,remove:-'
    });
</script>

3. Add The Widget Hook
Add an element to your site or blog with the id of project-badge.

<div id="project-badge">
  Loading...
</div>

That's it!
If you have any issues, use the the working example as a reference, or send me a message.

The Google Exercise Revisited: Semantic Markup with jQuery

July 9th, 2009

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! :)

Don’t Write Frameworks For Dummies

February 5th, 2009

Eric Evans offers this piece of advice:

Don't write frameworks for dummies. [Frameworks designed by organizations] that assume some developers are not smart enough ... are likely to fail because they underestimate the difficulty of ... development. ... This attitude also poisons the relationship between [the developers and framework designer]. - Eric Evans, Domain-Driven Design: Tackling Complexity in the Heart of Software

Evans goes on to make the point that there's a fine line between designing for dummies, and providing useful encapsulation / abstraction. I found this advice interesting because I had been wrestling with whether the ASP.NET AJAX Framework is for Dummies.

Author: Adam Kahtava Categories: .NET, AJAX, ASP.NET, ASP.NET AJAX, Musings Tags:

Some Design Up Front is Good

December 18th, 2008

Like a horse with blinders on, avoiding some degree of Big Design Up Front (BDUF) can force your team and project into tunnel vision, because... If you don't look at what you're building in its entirety, it is harder to see the big picture, to have to that ah-hah moment that leads to a break through, to maintain conceptual integrity, or have a successful project.

I worked on a project where we attempted evolutionary design (avoiding Big Design Up Front) while taking an Agile approach. We used Continuous Integration, and Test Driven Development. Looking back, our attempt at trying to avoid Big Design Up Front was fatal for our project's success and probably our biggest mistake. The funny thing is, the only reason we avoided BDUF was because it seemed non-Agile (note the capital 'A' in 'Agile' read Yegge's post Good Agile, Bad Agile for the reference). As a development team we were inexperienced Agile (eXtreme Programming) teenagers and somewhere along the way we exchanged our brains for dogma.

eXtreme Programming [is at odds with] "Big Design, Up Front" (BDUF) _ Because "Ya Ain't Gonna Need It" (YAGNI) ... [but this is often] taken as permission to not do any planning - Gerard Meszaros' Alberta TechFest slide deck '07

In the past Big Design Up Front (BDUF) was associated with large inflexible architectural solutions that are designed upfront (before development begins) - like the waterfall methodology. However; BDUF (like most techniques / methodologies / tools) are quite useful when used with a sprinkle of common sense and moderation. BDUF can be a productive lightweight tool for fleshing out the high level overview of a system. It is important to note that I'm not advocating Big Architectural Design Up Front which is often composed of reams of documents, UML, ERDs, diagrams, and other unneeded artifacts. Instead I'm advocating for paper based story boards, wire frames, paper prototypes, user stories - anything that is easy to create, destroy, and recreate. These techniques provide the foundation of the final product, they start to verbalize the common product goal and can start to draw out the language, metaphors, and model that will eventually compose the project.

Avoiding some Design Up Front was a mistake for our project. As a team we were trying to cope with the complexities of our domain under very tight deadlines. Our code became increasingly brittle, we had overlooked obvious shared functionality that a high level overview would have fleshed out. At the same time we had segregated our application into sprint sized silos with no clear relationships - each sprint was essentially a two week tunnel, and disconnected.

Without some form of BDUF it was difficult to:

  • maintain conceptual integrity, a common goal, a consistent user interface
  • estimate the whole product cost
  • have a successful project

We should have headed Steve McConnell's words:

people were claiming,  "I don't have to do requirements or design because I'm using object-oriented programming." That was just an excuse. Most of those people weren't really doing object-oriented programming-they were hacking, and the results were predictable, and poor. Right now, people are saying "I don't have to do requirements or design because I'm doing agile development." Again, the results are easy to predict, and poor - Steve McConnell, Code Complete

Or perhaps Martin Fowler's suggestion:

the planned design approach has been around since the 70s, and lots of people have used it. It is better in many ways than code and fix evolutionary design. But it has some faults. - Martin Fowler, Is Design Dead?

Not doing some Design Up Front is probably another excuse for being sloppy, but what do you think?

Author: Adam Kahtava Categories: AJAX, ASP.NET, Musings, Personal Tags:

Microsoft and jQuery Finally: Thank-You!

September 28th, 2008

Microsoft is looking to make jQuery part of their official development platform ... jQuery will be distributed with Visual Studio
- jQuery, Microsoft, and Nokia

Other links of interest:

I was completely blindsided by this decision.

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

Transparency: Considerations For Choosing a JavaScript / AJAX Framework

September 20th, 2008

A growing number of development teams are given the opportunity to choose their JavaScript / AJAX Frameworks. This choice is often thrown to the development team because the Architects are more concerned with the bigger picture, and the technical details are over the manager's head. Letting the development team decide on the JavaScript / AJAX framework produces some great benefits: it gels the team, fosters project buy-in, and creates project excitement.

Now, developers can be pretty skeptical, and getting them to agree has been likened to herding cats, but a couple core considerations / values seem to surface when the decision is being made.

Considerations for choosing a JavaScript / AJAX Framework:

  • Transparency - Who are the framework's development team and why should we trust them? Do these developers blog? Attend conferences? Are they featured on podcasts / videos? Is there a high or low turnover within the team? What are their passions? Is this just a job, do they like what they're doing, are they a cog on a wheel? Are they experts in their field?
  • Competency - Based on the information gathered in the consideration above (transparency), how competent do we feel the development team is?
  • Community Support - How well is the framework supported on forums and blogs? If something were to go wrong can we gain access to the framework's development team? Are there widespread experts using this framework readily available?
  • Reputation - How popular is the framework in the industry? Who uses it? Are there any white papers, success stories, case studies available?

One of the easiest ways for a developer to choose a framework is by looking at the developers that built it (and talking with those that are using it). As developers our day job will be stepping into someone else's code for the duration of the project, working with a framework created by competent developers makes our jobs easy. Frameworks without transparency don't allow us to gauge the competency of the developers or the framework.

Transparency is essential for JavaScript / AJAX Framework teams, JavaScript itself is open and transparent (not compiled yet), it follows that JavaScript / AJAX Framework along with their teams should also be transparent. When the decision for choosing a JavaScript / AJAX Framework is placed in the hands of developers the frameworks that don't meet the above criteria sink to the bottom of the list.

The only way to succeed now is to be completely transparent, everything is exposed, everything you do - Gary Vaynerchuk 

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

Book Reviewed: JavaScript: The Good Parts by Douglas Crockford

June 7th, 2008

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.

Writing a Control for the AJAX Control Toolkit: How ASP.NET AJAX Failed

June 7th, 2008

One of my resolutions this year was to contribute to the AJAX Control Toolkit for the ASP.NET AJAX Framework. I began my AJAX Control Toolkit development quest by digging into the online resources, reading ASP.NET AJAX in Action, and decomposing the AJAX Control Toolkit. I noted the huge learning curve required to developing a control, and continued to dig deeper. Once mired in ASP.NET AJAX a bad smell kept wafting by. Since then I've been trying to distinguish this smell.

What's really wrong with ASP.NET AJAX?

  • It doesn't plan for performance from day one
  • It treats AJAX as a classic computer science problem
  • It tries to turn JavaScript into a classical language which works against JavaScript's dynamic, prototypical nature
  • It feels like a framework that was written for dummies (Don't Write Frameworks For Dummies)

A Case Study: Why Plaxo.com Almost Failed

In the video: High-performance JavaScript: Why Everything You've Been Taught is Wrong (YUI Theater) Joseph Smarr discusses the challenges and lessons learned while developing Plaxo.com. While developing this AJAX centric application, the Plaxo team decided to include everything they could think of into their application. They created a framework to treat JavaScript as a classical language, they gave priority to features over performance, and... the project ALMOST FAILED. They were able to salvage their application by diverting their development efforts, making performance one of their top priorities, by unlearning everything they'd been taught about classical applications (instead embracing JavaScript), jettisoning unneeded framework bloat, and more.

Some of the points made in this video were:

  • Plan for performance from day one
  • AJAX is not a classic problem
  • JavaScript is not a classical programming language
  • User experience and a responsive application can make or break an application
  • Unneeded bloat in a framework, and an obtuse approach to using AJAX (treating AJAX and JavaScript as a classical language or classic computer science problem) has the potential to cripple your application

This Channel 9 video also mirrors these sentiments: Douglas Crockford, Alex Russell and Joseph Smarr: On the Past, Present and Future of JavaScript

How ASP.NET AJAX Failed: What can we learn from Plaxo?

The way the Plaxo team approached their application development is similar to how the ASP.NET AJAX Framework has been designed. Like Plaxo's initial attempt ASP.NET AJAX attempts to mold JavaScript into a classical language, and attempts to treat JavaScript and AJAX as a classic computer science problem by heaping on more abstractions. Like Plaxo's initial attempt ASP.NET AJAX also gives a low priority to performance. Plaxo was able to change their direction and salvaged their application, but the ASP.NET AJAX Framework is not in a position to make any sweeping changes - ASP.NET AJAX is going down the wrong path and it's too late.

The ASP.NET AJAX Framework is probably another exercise in Framework Architecture (demoware) and a failure in practice. Its lack of use in the wild attests to these shortcomings - contrast the sites using ASP.NET AJAX with the sites using jQuery (Actions Speak Louder Than Words). Furthermore the places that ASP.NET AJAX does thrive (the small internal ASP.NET business apps that need some bling-bling) will also be the areas that Silverlight shines - Silverlight offers a better Microsoft centric programming model (less leaky Win Form / Web Form abstractions) that most Microsoft developers will embrace. Silverlight will probably divert the developers that currently embrace ASP.NET AJAX.

I don't recommend the ASP.NET AJAX Framework and won't be contributing to the AJAX Control Toolkit. My time is better spent elsewhere.

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

More on the perils of The ASP.NET AJAX Framework

June 3rd, 2008

There's no need to whip a dead horse (I've probably been griping about the ASP.NET AJAX Framework for too long), but... Jon Galloway and a group of other notable gurus (K. Scott Allen, Scott Koon, and Kevin Dente) have started a podcast, their latest segment sparked my interest since it covered ASP.NET AJAX and AJAX Libraries / Frameworks in general.

I share their sentiments so I thought I'd post a brief but choppy transcript:

[ASP.NET AJAX] ... does offer some some nice features, they did try to take some of the common pieces of the CLR that [.NET Developers are] used to working with and move that down into a JavaScript library. So you get classes like a WebRequest class that wraps the XMLHttpRequest ... and they have a StringBuilder, and they added methods that we're more accustom with ...

that's wonderful, but I don't find myself needing those extensions all that often. If you want to do strictly client-side programming then something like jQuery offers you a lot more capabilities to do things that you really want to do client-side like sorting and CSS selectors. ... That stuff is easy to do with an Update Panel and ASP.NET, but Update Panels aren't always the best solution to use. ...

the goals with ASP.NET AJAX was to integrate into the ASP.NET server-side model ... that's great for ASP.NET, but it needs more client-side features. ... It works if your thinking from the ASP.NET control perspective, but if you look at it outside the ASP.NET model there are a lot easier ways to do it. ...

ASP.NET AJAX [development] seems to have come to a standstill I'm not seeing a lot of development in that area and the rest of these [AJAX] Frameworks are doing monthly releases. Every month that goes by [the ASP.NET AJAX Framework] falls further and further behind ... it needs to evolve.

Listen to this podcast here: Technology Round Table Podcast #2 - AJAX Frameworks

Author: Adam Kahtava Categories: .NET, AJAX, ASP.NET, ASP.NET AJAX, CSS, DOM, JavaScript Tags:

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

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.