Building Code Posters with Elixir
east5th.co
east5th.co
Love the project!
Note on trust: I've shipped out hundreds of posters since 2013. BTW you can create a Gist if you want to control access exactly. Hopefully Github will allow fine grained access they are trying out in beta right now.
I'd love to send some PRs your way this weekend (I love elixir) about:
- Fonts - I've messed with so many fonts and test prints and trying hundreds of fonts. I finally settled with Fira Mono. Was probably the best that didn't bleed @ 4pt.
- Margin - I ended up having a 1/2 inch margin to allow frames to not cut off letters, I don't think you do this?
- Classification - How do you throw away vendor code? I found that most repos unfortunately have a huge amount of generated code (JQuery, assets, compressed/minified JS)
By Far the hardest thing was to:
- Launch a single use instance
- Clone a repo
- Classify and remove any "generated" and vendor code
- Create a poster (I use PDFs)
- Take a lower quality screenshot (save the user's bandwidth)
- Upload to S3 so the user can view it
- destroy single use instance
I ended up going from Ruby => Clojure => Go => Rust for the speed.
BTW if anyone just wants a poster https://commits.io/discount/10off to get 10% off. But I think you should at least try to generate it with elixir_poster first.
I looked at Rust for mainly Cargo, but ended up staying for the C interop. I was able to take PDF libraries (namely libharu and mupdf) and just link to them (after using bindgen). This gave me a really good binary that was reproducible from scratch easily.
I definitely understand about how seriously you take privacy. For a personal project, I wouldn't think twice about sending it your way.
Source Code Pro is my usual default for a good looking monospace font, but Fira looks like a good choice. How do you go about finding monospace font's width to height ratios? I had do dive into SVG versions of Source Code Pro and doing some hands-on testing to come up with a ratio of 0.6.
Yeah, I'm not doing anything with a margin. In hindsight, I probably should have.
I actually manually picked the code I wanted to include in the poster. I imagine doing this in an automated way would be a much more difficult problem... Do you just ignore certain files based on filename patterns? e.g. /node_modules/, etc...
Yeah, there are a few places where I can parallalize the process. There's definitely a lot of room there for future work.
3 to 4 seconds is _very impressive_. Congrats!
I'd definitely push others to go with your solution, if it's a possibility. The elixir_poster project is really just a hacked together project to build a one-off (two-off, I guess) poster for myself.
You could support ignoring binary/generated code with a Linguist(https://github.com/github/linguist) wrapper(ruby).
Hope it didn't sound like criticism, just wanted to talk about it. Not everyone wants to talk about generating posters :)
But serious question - is there an ideal code size that works better on a poster? My app is broken down into several sub apps - some with only a few hundred lines of code, and some with 20,000+ lines. Obviously the more the merrier, but I was wondering - could you filter out only, say, the .rb files for the poster, and ignore the billion .js library files that I didn't actually write myself?
And, final question - do you ever look at the end result poster for a customer and shake your head thinking "This guy shouldn't be allowed near a computer!"... :)
Everything is automated so I only look at the poster if someone asks me to checkout an inconsistency (was earlier, not at all now).
Take a look at some of my code (https://github.com/Ortuna) most of it is bad and hacked together. Until I find that one thing that is fun, like commits.io. Then I savor writing each line. I start sweating the little stuff because its fun. But then again some days code isn't as important as going outside.
"Your are not your code"
Determining the bounding box of SVG text is not easy even with a monospace font since you're at the mercy of the final rendering system as to which font is actually used and how the metrics are processed. It is safer to do each line as a <text> element with colors added by <tspan> segments inside. That guarantees you only have to align the left edge at the same X coordinate. You could also do multi-line text in a single <text> element but that isn't guaranteed to work in SVG 1.1.