Design Tools

Design to Code Experiments

For years we've been obsessed with finding a goldilocks solution to convert vector designs into code. These are the result of those experiments. The tools are no longer available for use, but you're welcome to take these ideas and make them your own.

Protoship Decode

Design to code for Figma. A novel and effective approach to design to code.

Protoship Codegen

Generate clean HTML & CSS from Sketch. One of the first end-to-end design to code solution that generated programmer-friendly code. Superseded by Decode.



An industry-led, fully remote programming course for Indian B.E/B.Tech degree

For the last 4 months, I've been a coach and content-creator for a course we call SaaS & Web Technologies 201. It is the first of its kind that I know of in Indian engineering education - a fully remote course, shaped and run by software industry participants, and treated as first-class citizens of the academic...

Materials for learning ReasonML

This post is a follow-up to the workshop ”Build production-ready user interfaces with ReasonML” Practicing language basics Try learn-reasonml-workshop to practice ReasonML basics including functional programming and types. It is a set of 24 exercises that you can run locally in your machine. If you get stuck somewhere,...

Rails on OCaml

I've been programming with Reason/OCaml for over a year now and have come around to the idea that typed functional programming based on the ML-family of programming languages will be the 'next big thing' in programming languages. It is in quotes because even though ML has been around for over 40 years, it is yet to find...

Consistency and drudgery in UI design

The key to good UI design is visual consistency. It is also the key to good HTML & CSS. But in practice, websites are inconsistent even in their brand colors. Their spacings will be all over the place; everyone rolls their own buttons; and text sizes will vary widely. Inspect a little, and most of these interfaces reveal...

How functional is Ruby?

The mental model for imperative programming is one of simulation. To understand such a program, one has to imagine discrete pieces of state and step through the code mentally and see how they change over time. This paradigm is formalized by the Turing machine, which in the artist's imagination looks like this

An Invitation to ReasonML

Peter Deutsch once quipped that if you get the data structures and their invariants right, most of the code will just kind of write itself. If I had to pick just one nugget of learning from my career in programming so far, that would be it. The effects of a poorly designed model cascades across the codebase, forcing us...