Building Code Posters with Elixir(east5th.co)
east5th.co
Building Code Posters with Elixir
http://www.east5th.co/blog/2017/02/13/build-your-own-code-poster-with-elixir/
21 comments
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.
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.
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 :)
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 :)
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.
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!"... :)
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!"... :)
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"
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"
The apl guys are going to need Lorem Ipsum to get a picture made.
> 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.
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.
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.
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.
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 think it's awesome how you take it. I would definitely check put you guys out for a poster.
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.
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.
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.
This is excellent work.
Great work, I'm learning elixir as well. Very cool
very cool
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:
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:
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.