• More Writing on NetTuts+

    Alright, this blog has been quiet for a few months. But that doesn’t mean that I have stopped writing.

  • My Key Takeaways From SMACSS

    A seemingly simple language yet a tangled mess of complexity. If you are picturing a giant CSS file from your website, you are on the right track. Yes, CSS can start out as a really simple language to learn but can be hard to master. The CSS chaos starts slowly and seems innocuous at first. Overtime as you accumulate features and more variations on your website, you see the CSS explode and you are soon fighting with the spaghetti monster.

  • Common Idioms in JavaScript Development

    These are some of the common idioms I find myself using again and again. I am going to keep this as a live document and will update as I discover more useful idioms.

  • A Simple Organization Scheme for Handling Routes in ExpressJS Apps

    The ExpressJS framework is one of the simpler yet very powerful web frameworks for NodeJS. It provides a simple way to expose GET / POST endpoints on your web application, which then serves the appropriate response. Getting started with ExpressJS is easy and the Guides on the ExpressJS website are very well written to make you effective in short order.

  • Quick Sketching Using SketchBook Pro + Wacom Intuos 4

    Its been a while since I posted anything on this blog. Thought I’ll break the calm with a quick post about my recent sketch.

  • Animating Pie Slices Using a Custom CALayer

    It’s going to be a rather long post, so if you want to jump around, here are your way points:

  • Simple Helper Method for Async Testing With Jasmine and RequireJS

    Unit testing in Javascript, especially with RequireJS can be a bit of challenge. Jasmine, which is our unit testing framework does not have any out of the box support for RequireJS. I have seen a few ways of integrating RequireJS but that requires hacking the SpecRunner.html file, the main test harness that executes all jasmine tests. That wasn’t really an option for us as we were using a ruby gem called jasmine to auto generate this html file from our spec files. There is however an experimental gem created by Brendan Jerwin that provides RequireJS integration. We did consider that option before ruling it out for lack of official support. After a bit of flailing around, we finally hit upon a little nugget in the core jasmine framework that seemed to provide a solution.

  • Using jQuery.Deferred() and RequireJS to Lazy Load Google Maps API

    In the world of jQuery or for that matter, any JavaScript library, callbacks are the norm for programming asynchronous tasks. When you have several operations dependent on the completion of some other operation, it is best to handle them as a callback. At a later point when your dependent task completes, all of the registered callbacks will be triggered.

  • Tips for Speeding Up Octopress Site Generation

    As I blogged about earlier, Octopress is a great framework for writing blog posts and packs in all the features for writing a code-centric blogs. Of course, it goes without saying that the blog also looks awesome as if designed by a true designer. Some of the nicer things about writing posts is that there are rake tasks that do most of the grunt work:

  • Switching to the Octopress Blogging Engine

  • Be Careful Declaring Properties in CoffeeScript

    In JavaScript, if you set a property on the prototype, it is like a static property that is shared by all instances of the Function. This is common knowledge in JavaScript and quite visible in the code. However if you are writing all your code in CoffeeScript, this fact gets hidden away by the way you declare properties.

  • Progressive Reveal Animations in SVG Using a <svg:clipPath>

    In the previous post on “Building a tree diagram in D3.js” we saw how the D3.js library could be used to render tree diagrams. If you haven’t read that post yet, I would encourage reading it as we will be expanding on it in this post.

  • Building a Tree Diagram in D3.js

    In the past few weeks, I have spent some time evaluating some visualization frameworks in Javascript. The most prominents ones include: Javascript InfoVis Tookit, D3 and Protovis. Each of them is feature rich and provides a varieties of configurable layouts. In particular I was impressed with D3 as it gives a nice balance of features and flexibility and allowed me to build just the visualizations I wanted. In this post, I want to take a quick dive into using D3 for building a tree diagram.

  • Complex Filtering in isotope.js

    Of late, I have been building some Html/Javascript apps and exploring a bunch of javascript libraries, including the usual suspects (jQuery, jQuery UI, jQuery template, underscore, etc). The more interesting ones are visualization libraries like d3, isotope, highcharts. In this post, I will focus on a specific scenario in the isotope.js library.

  • Blinking UI With a CaretBrush

    A few days back while I was busy designing some UI for a Silverlight app, I accidentally hit upon this fun hack.

  • Its Consulting Time!

    After having worked full-time for several years in the Corporate world, I have decided to make a career change and jump on to Consulting. I have joined my friends at
    image , where I’ll be working in the Financial district of New York, building solutions using Microsoft .Net, C\#, WPF, Silverlight, Html5 + JavaScript and others.

  • Building a CoverFlow Visualization Using Quartz Composer

    I have been playing around with Quartz Composer (included as part of the Developer tools installation on Mac OSX) for almost a year. It’s a great tool for creating screen savers, music visualizations and also for quick prototyping of some visual concepts. I personally find the patch-based approach to solving problems quite refreshing and offers a different perspective to looking at complex problems. It is very much like programming but with functional blocks (called patches) rather than real code.

  • Tokenizing Control – Convert Text to Tokens

    In this post I want to talk about some interesting ideas regarding a control called TokenizingControl? What is that you may ask, so lets start with the basics. A Tokenizing control takes in some text, delimited by some character and converts that text to a token, a token that is represented by some UI element other than the original text. For example, if you have text like “John Doe;” (note the ; acting as delimiter), then the tokenizing control will convert it to some UI Element like a Button, say.

  • A DoubleBorderDecorator to Simplify Rounded-border Decorations

    The designers in my team use a lot of nested double-Border elements to achieve a nice rounded border-effect around containers. In XAML this looks like so:

  • Simple TriggerAction for Docking Using GridSplitters

    GridSplitters work great if you want to provide a split view between two views. By dragging the GridSplitter you can adjust the space allocated to each view. As one view grows in size, the other reduces by the same size. For most cases, this is exactly what is required. In my case, this wasn’t enough. In addition to adjusting the splitter, I also wanted a way to quickly collapse one view and allocate all the space to the other view (a.k.a. Docking). The views were arranged horizontally like so:

  • The SpiderWebControl for Silverlight


  • Quick Tip About Changing SketchFlow’s Startup Page Name (Silverlight)

    When working in SketchFlow for SilverLight 3, the default file name of the test page is called TestPage.html. If this is not what you want, you can easily change it in the main SketchFlow project’s .csproj file. If you open up the <project-name\>.csproj file, at around line 27, you should see a tag called <TestPageFileName>. Change this to the filename you want. In my case I wanted index.html since I was hosting the prototypes on the intranet and wanted a simple url like

  • Chapter Excerpt in CODE Magazine

    I received a mail from my publisher stating that one of the chapters from my book: WPF Control Development Unleashed, has been published as an article in the CODE magazine. Go have a look.

  • PyBinding Now Hosted on CodePlex

    Almost a year back, I posted about an interesting project I was involved in, called PyBinding. PyBinding gives you an easy way to write IronPython snippets inside Xaml Bindings and completely do away with value converters.

  • Sketching, Painting and Figure Drawing