• The Common Patterns of React

    The React framework has been used by a wide variety of teams and several folks have written about their own experiences using React. This post compiles a list of the various design patterns that have been observed while building React Components.

    React itself allows you to shape the Component Tree the way you want, but certain recurring patterns have made this an easier and more manageable task. The overarching principles are around:

    • Separation of concerns between components
    • Uni-directional data flow
    • Crisp communication via callbacks.

    Continue reading...

  • Effective MobX Patterns (Part 3)

    The previous two parts (Part 1, Part 2) focused on the fundamental building blocks of MobX. With those blocks in hand we can now start solving some real-world scenarios through the lens of MobX. This post is going to be a series of examples that applies the concepts we have seen so far.

    Of course, this is not an exhaustive list but should give you a taste of the kind of mental-shift you have to make to apply the MobX lens. All of the examples have been created without the @decorator syntax. This allows you to try this out inside Chrome Console, Node REPL or in an IDE like WebStorm that supports scratch files.

    Continue reading...

  • Effective MobX Patterns (Part 2)

    In the previous part we looked at how you can setup a MobX state tree and make it observable. With that in place, the next step is to start reacting to changes. Frankly this is where the fun begins!

    Continue reading...

  • Effective MobX patterns (Part 1)

    MobX provides a simple and powerful approach to managing client side state. It uses a technique called Transparent Functional Reactive Programming (TFRP) wherein it automatically computes a derived value if any of the dependent values change. This is done by setting up a dependency graph that tracks the value changes.

    MobX causes a shift in mindset (for the better) and changes your mental model around managing client side state.

    After having used it for more than 6+ months on multiple React projects, I find certain patterns of usage recurring very frequently. This series of posts is a compilation of various techniques I’ve been using to manage client state with MobX.

    Continue reading...

  • Unit Testing on any UI Project

    Unit Testing is one of those aspects of a UI project that is often ignored. Not because nobody wants to do it, just that the cost of setup and maintenance can be taxing for a small team. Even on a large team, it can be ignored during those looming deadlines. Testing takes far greater discipline and rigor to do it right and to keep doing it right.

    This post is not a panacea for Unit Testing but rather distilling the process of Unit Testing to a few key areas. Also, note that we are just focusing on Unit Testing and not on other kinds of testing like Integration (aka end-to-end), Acceptance, Stress/Chaos testing, etc. I’ll also limit myself to Web UI but the ideas are applicable to other UI platforms.

    Continue reading...

  • Patterns of Higher-Order-Components (HOC) in React

    Higher Order Components (HOC) are a direct translation of Higher Order Functions from functional languages. A HOC extends the state / behavior of the inner component in a composable way, so you can add many more extensions without the knowledge of the inner component.

    React is particularly suited to support this with minimum friction. The tag structure of JSX also helps in visualizing this in text.

    In this blog post, we’ll take a look at many of the use-cases for HOCs. They are all from real projects so you are assured of its practicality!

    Continue reading...

  • Consuming Browserify bundles with Webpack

    If you are only using Browserify or only Webpack in your project, you don’t have to worry about consuming external bundles. Either of them will take care of it for you. However if you are in a situation like mine where you have legacy code in the application, bundled by Browserify and newer shiny code bundled with Webpack, then this post is all for you!

    In Short: We will consume the Browserify-bundled code as externals within Webpack.

    Continue reading...

  • Building Courses for Tuts+

    Over the past few months I’ve spent a lot of time building video courses. It’s actually quite a long process given my client commitments but the end results are rewarding.

    Continue reading...

  • Communication Strategies in AngularJS 1.x

    As the application scales in size, controlling communication between components requires enough thought to ensure there isn’t too much or too little of it. In this post we will look at the various ways of communicating in AngularJS 1.x. Some of these techniques may still apply in the Angular 2 world (eg: Events), however the actual mechanics will be different.

    Continue reading...

  • Using Angular as a Template expander

    Now we all know AngularJS is an awesome framework to build large Single Page Applications. At the core of angular is a little thing called the HTML Compiler. It takes text as input (most likely from your templates) and transforms it into DOM elements. In the process it also does a bunch of things like:

    • Directive detection
    • Expression interpolation
    • Template expansion
    • Setting up data-bindings, etc.

    Let me drive your attention to one area: Template Expansion. I was curious to know if AngularJS could be used purely as a template expander. Something akin to Handlebars or Underscore templates. Is it possible? Can we take that aspect of Angular and use it independently?

    Continue reading...

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


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