Building Code Posters with Elixir

http://www.east5th.co/blog/2017/02/13/build-your-own-code-poster-with-elixir/

by pcorey • 9 years ago

206 21 9 years ago

east5th.co

perfmode• 9 years ago

This is excellent work.

madebysquares• 9 years ago

very cool

ortuna5• 9 years ago

Creator of Commits.io(https://commits.io) here.

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)

One final note, since each :text element has an x and y couldn't you create all the elements in parallel and collect them at the end? That'll probably save you a lot of time on the generation time.

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

all within 3 to 4 seconds

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.

tchadwick• 9 years ago

I'm the creater of codeposters.io (https://codeposters.io). It's cool seeing everyone's take on this. I have a python script that consumes an image and text file of code and produces an output text file. Then I bring that output text into Illustrator and fine tune it.

ortuna5• 9 years ago

Nice! Maybe we all should come together and make a singular thing :D

networked• 9 years ago

Do you mean the development speed or the execution speed? I assume the latter (edit: oops, I missed a big chunk of your comment that makes it clear this is the case) but I'd love to hear more about how going from Clojure to Go and from Go to Rust affected both.

ortuna5• 9 years ago

Execution. I'm a total language nut. So learning each was fun on it's own. Go's package management was a heart breaker for me (at the time). Coming back and fixing an issue in Go was ok until my build machine on EC2 messed up for one reason or another. I had to redo it and took so long to get everything compiling again.

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.

pcorey• 9 years ago

Thanks!

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.

ortuna5• 9 years ago

The PDF library I use gives you the dimensions of a certain letter (via FreeType I believe). I just plot 'X' (or any char for monospace) and get it's width, height.

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 :)

cyberferret• 9 years ago

I've always thought about sending one of my larger projects to commits.io so I could frame it for rememberance. Privacy is not the main reason I hesitate - it is the fact that other ruby programmers will look at my code and laugh at how 'Pascal' I make it look (I cut my teeth in Pascal >30 years ago).

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!"... :)

ortuna5• 9 years ago

You can select the language on the poster page. It'll let you select any/all languages it detects.

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"

nickpeterson• 9 years ago

The apl guys are going to need Lorem Ipsum to get a picture made.

hartator• 9 years ago

I think it's awesome how you take it. I would definitely check put you guys out for a poster.

kevin_thibedeau• 9 years ago

couldn't you create all the elements in parallel and collect them at the end?

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.

empath75• 9 years ago

This is great until you notice someone committed your aws access keys to source :(

zem• 9 years ago

well, then, you'd be the poster child for not doing that!

Exuma• 9 years ago

Great work, I'm learning elixir as well. Very cool

arcaster• 9 years ago

Hey Pete, I was an intern at AdmitHub a while back! Really cool to see some momentum behind a weird language Ive been a huge fan of for a few years.

microcolonel• 9 years ago

Not to be that guy; but it is silly that the page functions just fine until the CSS loads and hides the content. This is a blog post, it's not going to take 30 seconds to load, and even if it did it would still be better to watch the page fill in while listening to the dulcet tones of the modem.

om_henners• 9 years ago

Really cool! Inspired by this I created a quick and dirty inkscape plugin as a gist here (https://gist.github.com/om-henners/8c642c87b71daa3ea68222d40...) that drops source code matching some file extension pattern as a flowing text object on the page.

Building Code Posters with Elixir

Related Stories