Posts

  • Takeaways From NgConf 2015

    On March 5th and 6th I attended ng-conf 2015, which was held in Salt Lake City, Utah. It was great to meet several people building Angular apps as well as speaking first hand to the people behind Angular and TypeScript. On the technical front, I found a few resounding themes throughout the conference:

    Continue reading...

  • QuickLens - a Year in the Making

    If you see my Archive page, you will notice a complete void for 2014, a year where I did not post at all. So what happened? Well, besides taking those much needed sleep-breaks, I was busy building QuickLens: a Mac App that provides a set of tools to explore User Interfaces.

    The app was mostly built on the Nights and Weekends plan.

    Continue reading...

  • RubyMotion Features QuickLens

    It's no secret that QuickLens is built using RubyMotion.

    Continue reading...

  • More Writing on NetTuts+

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

    NetTuts+

    Continue reading...

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

    Continue reading...

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

    Continue reading...

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

    Continue reading...

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

    Continue reading...

  • 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:

    Continue reading...

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

    Continue reading...

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

    Continue reading...

  • 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:

    Continue reading...

  • Switching to the Octopress Blogging Engine

    I have been using Wordpress for few years now and have been very happy with its features. In the past year, I have tried several times to change the theme on my blog and also semantify my posts by using Markdown as my de facto style. Of course, none of it happened and I was still using a combination of HTML and Rich Text Editor for formatting my posts.The more I delayed, the more I realized that there were a lot more reasons to NOT like Wordpress:

    Continue reading...

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

    Continue reading...

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

    Continue reading...

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

    image

    Continue reading...

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

    Continue reading...

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

    image

    Continue reading...

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

    Continue reading...

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

    Continue reading...

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

    image

    Continue reading...

  • 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:

    <Border Background="#FF414141"
            Padding="3"
            Width="300"
            Height="200"
            CornerRadius="8">
        <Border Padding="3"
                CornerRadius="8">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1"
                                     StartPoint="0.5,0">
                    <GradientStop Color="#FF910000"
                                  Offset="1" />
                    <GradientStop Color="#FFAF5959" />
                </LinearGradientBrush>
            </Border.Background>
        </Border>
    </Border>
    

    image

    Continue reading...

  • 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:

    image

    Continue reading...

  • The SpiderWebControl for Silverlight

    image

    Continue reading...

  • 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

    http://sketch/

    Continue reading...

Subscribe