Syntax Highlighting in Markdown Content with Recarpet, Coderay and Rails Draft Hidden Sticky

Posted Sunday, 31 August 2014 | Post Comment |

I wanted Ruby and JSON code blocks ala Github’s Flavored Markdown when rendering markdown documents in doppler. The idea is that we can API documentation authored in markdown, and rendered within a Rails application.

The first, harder part, is doing markdown rendering with syntax  highlighting. You render markdown with your favorite markdown gem (eg. Redcarpet), then parse the document and replace all code divs with a syntax highlighted version produced by Coderay. I had to also do some div swapping to avoid nested <pre> and <code> blocks.

  1. require 'redcarpet'
  2. require 'coderay'
  3. module MarkdownHelper
  4.   def render_markdown(text)
  5.     renderer =, fenced_code_blocks: true)
  6.     doc = Nokogiri::HTML::DocumentFragment.parse(renderer.render(text))
  7.     doc.css('code[@class]').each do |code|
  8.       div = CodeRay.scan(code.text.rstrip, code[:class].to_sym).div
  9.       code = code.replace(div)
  10.       code.first.parent.swap(code.first)
  11.     end
  12.     doc.to_s
  13.   end
  14. end

We can use this in a controller, assuming content lives in app/voews/content. Bonus: caching.

  1. class PagesController < ApplicationController
  2.   include MarkdownHelper
  4.   def show
  5.     fail 'Invalid Id' unless params[:id] =~ /^[\w\/]*$/
  6.     filename = Rails.root.join("app/views/content/#{params[:id]}.md")
  7.     @content = Rails.cache.fetch "content/#{params[:id]}/#{File.mtime(filename)}" do
  8.       text =
  9.       render_markdown text
  10.     end
  11.   end
  12. end

The corresponding view in pages/show.html.haml is as follows.

  1. %div
  2.   != @content

You can route to one of those pages in routes.rb.

  1. get '/terms', to: 'pages#show', id: 'terms'

See for a complete pull request with the above.

And here’s a screenshot of a rendered page.



The Other Side of Your Interview Draft Hidden Sticky

Posted Tuesday, 19 August 2014 | Post Comment |

I gave a talk yesterday at the Flatiron School about the interviewing and hiring process for Engineers at Artsy and beyond. This focuses primarily on explaining to juniors, ie. engineers who are about to enter the tech job market and has some useful elements for career changers.

Video from the talk:

Screenshot 2014-08-19 14.02.00


Golden Gate Ruby Conference 2014 Draft Hidden Sticky

Posted Friday, 18 July 2014 | Post Comment |

I’m very excited to be speaking at GoGaRuCo in San Francisco in September about taking over open-source projects, along with people like @wycats, @ultrasaurus and @pat. No pressure.

I want to hear about your experiences about taking over someone else’s open-source work! Email me at dblock[at]dblock[dot]org.



Serving Hypermedia with a Grape API and Roar Draft Hidden Sticky

Posted Friday, 18 July 2014 | Post Comment |

I’ve begun experimenting with Hypermedia APIs a bit more seriously, trying to come up with a good infrastructure for the next version of the Artsy API. It might even be a public one, but I am not making any promises right now. I’ve played with serialization and attempted to use ActiveModel::Serializers with the grape-activemodel_serializers gem and HAL with Roar. It turned out that we do need a little bit of help with Roar, so I released a new gem called grape-roar, which enables using Grape’s present keyword.

Check out an example application deployed at, source code in

First, swap the JSON formatter for Grape::Formatter::Roar. It’s implementation is almost identical to the default JSON formatter, except that it passes env along to the to_json call.

  1. module Acme
  2.   module Api
  3.     class RootEndpoint < Grape::API
  4.       prefix 'api'
  5.       format :json
  6.       formatter :json, Grape::Formatter::Roar
  7.     end
  8.   end
  9. end

Implement a presenter. It will typically have a number of :properties. Include Grape::Roar::Representer to use present in your API.

  1. module Acme
  2.   module Api
  3.     module Presenters
  4.       module SplinePresenter
  5.         include Roar::Representer::JSON::HAL
  6.         include Roar::Representer::Feature::Hypermedia
  7.         include Grape::Roar::Representer
  9.         property :uuid
  10.         property :reticulated
  12.         link :self do |opts|
  13.           request =[:env])
  14.           "#{request.base_url}/api/splines/#{uuid}"
  15.         end
  16.       end
  17.     end
  18.   end
  19. end

You can now present an entity in your API implementation.

  1. module Acme
  2.   module Api
  3.     class SplinesEndpoint < Grape::API
  4.       namespace :splines do
  5.         desc 'Get a spline.'
  6.         params do
  7.           requires :id, type: String, desc: 'Spline id.'
  8.         end
  9.         get ':id' do
  10.           spline = Acme::Models::Spline.find(params[:id])
  11.           present spline, with: Acme::Api::Presenters::SplinePresenter
  12.         end
  13.       end
  14.     end
  15.   end
  16. end

Click here to see the above code in action.

Representing collections is similar, check out for a complete example with bonus pagination support.

I’d love it if someone could contribute a POST/PUT example.


Swissnex: Swiss Startup Lunch Draft Hidden Sticky

Posted Monday, 23 June 2014 | Post Comment |

I had the pleasure and privilege of talking about my startup experiences in Switzerland in the 90s and more recently at Artsy in New York at a lunch organized by Swissnex. The amount of companies solving real problems in that room was quite impressive, ranging from biotech to robotics. Not a single social network, mostly serious entrepreneurs, the real deal. I talked mostly about people, including a reference to T-Shaped skills.



Anatomy of a Ruby Gem: Grape Draft Hidden Sticky

Posted Monday, 23 June 2014 | Post Comment |

I’ve recorded a screencast during the Anatomy of a Ruby Gem meetup in New York. It’s a deep dive into Grape internals.

Screenshot 2014-06-23 10.33.03

There was also someone who recorded a video of the talk, but it may be a bit hard to read.


Tiling and Zooming ASCII Art Draft Hidden Sticky

Posted Tuesday, 10 June 2014 | Post Comment |

My slides from last night’s iOSoho talk on tiling and zooming ASCII art are here:

The demo project is on Github:


When do you need to hire a designer? Draft Hidden Sticky

Posted Tuesday, 13 May 2014 | Post Comment |

I was showing Inez & Vinoodh’s Stephanie Seymour’s photograph on Artsy to a friend. “Beautiful!”, she exclaimed and clicked on the Inez & Vinoodh artist profile. I lost her for an hour to browsing the site. She added works to favorites. And inquired for one with a gallery, which is core to our subscription business. The reason why this kind of engagement happens time-and-again is, most definitely, not an accident. It is, of course, the art, but it’s also the very deliberate work of the Artsy design team.

When do you hire your first designer and what is the most cost effective strategy around such an animal?

I think for any product that cares about user experience (all products?), the most cost-effective strategy is to have a full time designer. I don't mean the cheapest, I mean cost-effective in the medium and long term.

Let me explain. I want to build products that people love (not just use). I’ve long concluded that a designer is no different than an engineer, if not more rare and often more valuable. Designers have UI and UX skills (often non-overlapping), but also often take a lot of product ownership (but rarely project management), which is extremely powerful when you try to deliver something end-to-end. They also are flexible and can produce visual identity, stories, clarify requirements or help with wording or messaging to your users. They make systems that are easy to implement across the board and help prevent the proliferation of one-offs that are very expensive. Designers are peers to the engineering team and often have their hands dirty in the product, working through whatever issues an engineer may have, so they are helpful every day when they aren't "designing". They also do a lot of upfront work, reducing the programming cost tremendously. And a good designer will wear many hats, just like any good programmer. In sum,  I would hire a designer any time before a product specialist.

My rule of thumb: if you're hiring full time developers, hire a full time designer.

If you're not hiring full time anybody (maybe bootstrapping something yourself), I would consider a part time designer, too. Maybe pay them a retainer and have them work X hours a week. I would stay away from defining rigid requirements, much like I would stay away from defining those for an engineer. A good designer should know where to start from the "we don’t even have a logo" and will deliver all the artifacts needed for a project on an ongoing basis.


Why One Giant Source Control Repository Is Bad for You (and Facebook) Draft Hidden Sticky

Posted Monday, 28 April 2014 | Post Comment |

Facebook’s GIT repository is a single 54GB animal that builds Facebook. It’s not that big - they haven’t seen the MS Windows one! Actually, I take that back - anecdotal evidence suggests that a large number of ex-MSFT engineers are now working at Facebook. I’ve just counted a dozen people I know in my head and at least half have experienced the Windows codebase, first hand. Before I roll out my argument, I have to say that many are my good friends and awesome people. And let me also preface my post with the fact that there’re many advantages of having a single repository for those that contribute to it, and I will not discuss those here. Instead, I am going to try and offer a unique perspective from my rather unique position.

Why me?

In 2000 I started a build environment project inside Microsoft called CoreXT. I managed it for a while until a large community had formed around it inside Microsoft. I left in 2004, but CoreXT continued to be a vibrant and active project, and, from what I hear, is very much alive and evolving almost 15 years later. CoreXT was a fork of the Windows build environment, born from the desire of hundreds of non-Windows groups to break free from depending on the giant heavy hand of a single repo and infrastructure. Those groups included such massive codebases as Microsoft SQL Server and the entire MSN division with 54 products in my time. People continue working on CoreXT and putting CoreXT on their resumes. I want to think that everyone, but Windows, uses it now, but I also know that some organizations have rolled out their own versions of things, including the Developer Division, the team that ships Visual Studio. They dedicate a significant amount of effort into cloning, forking and otherwise patching Windows code, and even ship their own C runtime which is source of headache for two generations of developers. The Windows organization finds that being centralized is efficient, but they rarely discuss the cost to other dependent organizations.

Facebook’s central repository is the new Windows. The team that supports it is the new Microsoft Build Lab.

How bad is it? Lets draw a parallel between a central repository and a network of experts. I used to work on some security-related code for Microsoft Billing. I would walk to building 41 and consult the world’s best experts on cryptography and key management. I could open the source code for the Windows SSPI and dig through it when my SSPI provider wasn’t cooperating and spitting returning back E_INVALIDARG. I cannot do this now, even if I wanted to. When I left, it felt like a huge void. I had to reinvent a lot of wheels in every single one of my subsequent jobs, but have learned my lesson since. My current knowledge network consists exclusively of open-source contributors and their code, Q&A sites, Twitter, and personal connections. In such a network, knowledge isn’t hidden and is always evolving. People move around cities and companies, and even die, but their work is preserved for the public and projects get taken over by new contributors all the time. It’s a living, collective consciousness, a naturally self-selecting organism. It’s a powerful form of freedom.

If you start centralizing your development you’re killing any type of collaboration with the outside world and discouraging such collaboration between your own teams. You’re improving efficiency by creating shorter paths, but you also create lock-in and create no place for healthy competition amongst multiple solutions to the same problem. You’re probably making your own workflow more efficient, but you’re subtracting from everybody else’s. Eventually, as you grow big enough, you start subtracting from your own, entire organization’s capacity.

Kill your giant central repo. Distribute everything. Small is nimble. Small is creative. Fast forward.


Hex, Crayola and iOS7 Colors with EDColor Draft Hidden Sticky

Posted Saturday, 26 April 2014 | Post Comment |

If you are in the market for a color library, you’ll find many. I needed to convert a hex color into a UIColor. Lets try with Artsy purple. Rumor is that it was inspired by Kenny Scharf's "Purple".

  1. + (UIColor *)artsyPurple
  2. {
  3.     return [UIColor colorWithRed:106/255.f green:11/255.f blue:193/255.f alpha:1];
  4. }

Gross. One of the bigger problems with this code is that it creates a different color on 32-bit vs. 64-bit as a result of a non-integer division. Yes, we do write tests that compare snapshot images with ios-snapshot-testcase and those created on 32-bit simulators will fail on 64-bit ones. Also, someone with good vision will notice that our brand purple isn’t quite the same purple :)

What we want is to convert the color from its hex color.

  1. + (UIColor *)artsyPurple
  2. {
  3.     return [UIColor colorWithHex:0x6a0bc1];
  4. }

What happens in every developer’s mind is a mystery to me: seems like everyone has rolled out their own conversion macro or library. I have counted no less than twelve implementations, two in our own codebase. This is why I personally don’t like the approach taken by the Apple and Microsoft, which only expose the lowest level API possible as a general rule.

The library to end this madness is EDColor. It also supports HSL, HSB, CIELAB and even Crayola crayon colors.

  1. // UIColor+HSB
  2. UIColor *red = [UIColor colorWithRed:1.0f green:0.0f blue:0.0f alpha:1.0f];
  3. UIColor *blue = [red offsetWithHue:-0.56f saturation:0.0f brightness:0.0f alpha:0.0f];
  5. // UIColor+HSL
  6. UIColor *red = [UIColor colorWithRed:1.0f green:0.0f blue:0.0f alpha:1.0f];
  7. UIColor *pink = [red offsetWithHue:0.0f saturation:0.0f lightness:0.82f alpha:0.0f];
  9. // UIColor+CIELAB
  10. UIColor *red = [UIColor colorWithRed:1.0f green:0.0f blue:0.0f alpha:1.0f];
  11. UIColor *brighterRed = [red offsetWithLightness:15.0f a:0.0f b:0.0f alpha:0.0f];
  13. // UIColor+Crayola
  14. UIColor *mint    = [UIColor colorWithCrayola:@"Magic Mint"];
  15. UIColor *blue    = [UIColor colorWithCrayola:@"Midnight Blue"];
  16. UIColor *rorange = [UIColor colorWithCrayola:@"Orange Red"];
  18. // UIColor+iOS7
  19. UIColor *yellow    = [UIColor iOS7yellowColor];
  20. UIColor *greenGradientStart = [UIColor iOS7greenGradientStartColor];
  21. UIColor *greenGradientEnd = [UIColor iOS7greenGradientEndColor];

I contributed the iOS7 colors implementation from here, and found two bugs while writing tests. So, if you find another color library, you should merge it in as well. I reached out to Caran d’Ache to get their color palette, but didn’t get a reply.

< | 1  2  3  4  5  6  7  8  9  10  11  ... >