Pre-West Interview: Priyatam Mudivarti
Talk: Responsive Grids with Garden & Clojurescript
Priyatam Mudivarti's talk at Clojure/West is about creating responsive grids with Garden.
Background
Most web shops use a so-called CSS Preprocessor, which means a language that transpiles to CSS. These preprocessors typically add variables, rule nesting, and a few more features to fill out the holes in CSS.
Garden is a Clojure library which converts well-formed Clojure data structures into CSS. What this means is that your Clojure (and ClojureScript) code can generate the CSS dynamically, with the full richness of Clojure behind it. Variables come free, because Clojure has variables. But Clojure also has lambdas, which is not possible in any preprocessor I've ever seen.
At the same time, making a responsive grid is a huge undertaking. Lots of projects promise to do the hard work for you. If it could be done easily using a more powerful language, we would not have to rely so much on these frameworks. Priyatam Mudivarti is going to talk about how to make responsive grids using several techniques. He has created a nice repo containing an exploration of several types of grids. He recently open sourced mesh, a responsive layout grid toolkit in ClojureScript.
About Priyatam Mudivarti
Introduction
Priyatam Mudivarti was gracious enough to agree to an interview. He is giving a talk at Clojure/West about building layout grid systems using Garden in Clojure.
Interview with Priyatam Mudivarti
PF.tv: How did you get into Clojure?
Priyatam Mudivarti: I read Chris Granger's essay on LightTable in the fall of 2012. I remember that day: I got a new gig in Boston and my first task was to re-architect the ui stack using "Java" and "Responsive Design". Rewriting apps in big companies meant migrating enterprise libraries and tag soups from the server to client, and most of that failed flat on your face. I had little control over the frontend, let alone design. While I was going through this---a block of no creativity---Granger's prototypes showed an open canvas filled with code, floating around, their results shown inline, blurring the difference between an editor and a browser.
I was blown away.
What followed were his blogs, Paul Graham's essays, Rich Hickey's videos and other lispers blogging about enlightenment and such, but none of that made any sense. How can programming give you enlightenment? I believed in literature! Keep reading, I told myself, learn this language and it will change the way you think. The best writers, I believe, change the way you think of the world. Naturally, I am seduced by the same possibility with a programming language.
So I quit my job in the summer of 2013 to write my novel and teach myself Clojure and Clojurescript. I went to Clojureconj the same year and met Chris, and heard Alan Dipert, Stu, David Nolen, Rich Hickey and some of the best clojure hackers speak. After the talks I felt like one of the dumbest programmers in the room. And the more I learned about Clojure the less I knew about programming. It was an odd, beautiful feeling, something that made me a twelve-year old again.
I knew right away it was time to go into the rabbit hole.
PF.tv: Where does your interest in grids come from?
PM: Typography and Typesetting found in Fiction & Literary Magazines (print). Often I found their layouts and typography superior to that on the web, and I always wondered why their websites suck.
When I spoke at ClojureWest 2014, I did a demo of a poetry app written in five languages. It was a great learning experience, but I also knew that the app wouldn't scale and was a ticking bomb. Worse, my css was entangled in two DOMs: a virtual Dom and a real Dom, and events to change styles were bound and mounted on some lifecycle protocols of Om. One of my goals was to typeset poems and pages declaratively based on the content, and dynamically change their styles when their related 'components' mounted. I didn't know how to separate these concerns.
That led to me take a break from coding to deep dive into learning Typography. Typesetting has been around for centuries, after all. Now, design is not my core skill---I have worked in agencies and interacted with designers to understand their process. I went to TypoConf in SF and was surprised to see three hundred typographers---who don't code css---talk about Kerning and typeface design. Met a typographer (who is now a good friend) and collaborated with him on several hobby projects to understand his process. At Sumner Stone's workshop in SF, I saw one of the world's oldest and most respected Typographer speak about Typography.
What followed was a natural discovery of Grids: a visual communication framework for graphic designers and typographers. I bought half a dozen books, downloaded and worked through a several grid libraries in Sass and Less and began to get a sense of how web designers think. Most confirmed to the traditional Grid theory within the limited syntax available in CSS.
I was convinced that Garden and Clojurescript had more power to express grids (and beyond) more fluidly, and dynamically, over CSS.
PF.tv: What is Garden?
PM: Garden expresses CSS as associative data structures, the same way Hiccup expresses HTML. Vectors are used for selectors, and maps are used for declarations. They can be nested. CSS rules are simply vectors wrapping the nested vectors and maps.
Vectors can be passed around as data, composed through functions, and have the full power of Clojure/Clojurescript to express and organize stylesheets.
PF.tv: If Garden compiles to CSS, how does it have more power?
PM: Joel Holdbrooks wrote Garden in Clojurescript, a real programming language, and in order to understand the power of Garden let us revisit the notion of abstractions in CSS.
Abstraction is at the center of most work in Computer Science and User Interface Design. It encompasses finding the right interface for a system as well as finding an effective design for implementing a system. CSS is arguably a simple language. It packs power by abstracting the entire stylesheet in concise, declarative syntax of rules.
However, over the years websites and apps have grown in complexity and pre-processors have proven that programming constructs like variables, mixins, and 'pseudo' functions can help designers organize code and structure their patterns. In order to facilitate a two-way communication with Dom, designers have also started using jQuery---a good example of what happens when you provide new abstractions to interact with a page. The proliferation of frontend frameworks have paralyzed even the best designers because it's impossible to work within the same abstraction in isolation with the frontend team.
What remains is a spaghetti of Sass, client and serverside Markup, jQuery, and a dozen Javascript libraries and build tools. Designers are no longer in control of the page, and that's a shame.
It is time we bring back that control with new abstractions. Garden is just Clojurescript--- you don't even need to learn the whole language. It provides a uniform syntax to express HTML, CSS, and Javascript from a designer's point of view. It has namespaces to modularize styles, first-class functions, and sound data structures to organize them. It works on the server and client and can generate static css files. It h as the potential to go beyond pre-processors and express designs in new creative ways. I'm more excited of this possibility than anything else, because if done right, it is possible to talk to print designers and graphic designers---in a language they understand.
I'm currently working on a Garden library and plan to show a few examples in my talk at ClojureWest. I have a long way to go, but it's a start.
PF.tv: What is the most common mistake programmers can fix with their typography?
PM: Vary contrast on the page by using the CSS font-xx and text-xx properties. For instance, take a plain html of your blog and practice typesetting header, body copy, certain subheadings, blockquotes, menu, and code blocks using different font weights and sizes and variants. See what happens. And please---don't stick a default Helvetica into your body. Use a professional font, preferably in pairs. If in doubt, buy a print magazine. Steal.
PF.tv: What resources would you point someone to to learn typography, grid layouts, and CSS?
PM: There are many resources.
My favorite typography book is Mathew Butterick's Practical Typography; he's a typeface designer and a lisp hacker. Ellen Lupton's Thinking with Type is an excellent book that covers both the history and an in-depth discussion on designing with Type. Grid Systems in Graphic Design is considered a classic.
There are plenty of CSS books: HTML5 & CSS, CSS3 for web designers, and anything written by Chris Coyler at csstricks.com.
Shameless plug---I'm writing a book on UI Design from a self-taught designer and programmer's perspective, and plan to publish it this summer.
PF.tv: Where can people follow you online?
LC: If Clojure were a food, what food would it be?
PM: Clojure would be an Herb you would combine with others and drink, like good Oolong tea.
