In my free time I play with all kinds of stuff, and I try to write down what I learn on this website. Hopefully you’ll find something interesting!
- Daniel Perez Alvarez
About The Site’s Style
There’s a sort of style guide with building blocks and patterns used on this site. It not only allows me to quickly see the effect of any changes I make, but also forces me to define and refine the style of what I’m building.
I use the following typefaces from Google Fonts:
I use a few icons here and there. Some are amateurishly created by me, while the rest are taken from the beautiful set at Typicons.
About The Site’s Tech Stack
After having tried static site generators like nanoc, Middleman and Jekyll, and spending countless hours writing plugins to get them to do what I needed, I decided to throw it all away and use… Ruby on Rails. Don’t give me that stare, I feel guilty enough already!
Anyways, the process looks like this:
- Take the bunch of Markdown files that make up the contents of my site, and transform them in various ways (Kramdown, Pygments, etc.).
- Load the results into a SQLite database.
- Start a Rails app that serves everything with the proper layouts and styles.
wget -mto mirror everything into a folder.
rsync -ato push it all to my web host.
All these steps are wrapped in a Rake task, so I only have to run one command to generate and publish the site.
It’s pretty common for me to browse sites on a mobile phone with a crappy connection, and I’m tired of having to wait until a certain site’s fonts finish downloading to read its content. That’s why I’ve decided to load the fonts on this site asynchronously, using the awesome Web Font Loader library. The downside to this approach is that you will see a flash of unstyled text from time to time.
I put all of my vector icons together into a single font file using the Font Custom gem, which relies on the FontForge and FreeType’s ttfautohint libraries to do its thing. The result is not perfect, but it’s good enough for my untrained eye.