Homepage Technology
Do you hate it? Do you love it? Are you just interested by how it works? I'm talking about this homepage. Or better: about the technology behind it. What makes it tick, how does it work? What allows me to do crazy stuff while still being simple and flexible? The solution is a combination of various useful technologies.
So the stuff you see is all, as far as possible, POSH, styled with CSS. I uses Sass (specifically SCSS) to generate the CSS, because it simplifies the process of authoring CSS, providing some features and some syntactic sugar that are missing from the w3c spec. I try to stick to the standards as far as possible, and since this is my personal homepage (my house, my rules), I made the decision that I honestly don't care about backwards-compatibility, and I prefer using he the newset tools we have. Yes, I have a few browser-specific hacks (transition, I'm looking at you), but mostly I write standard code, fix the most glaring bugs, and that's it. This has the downside that I may loose a few readers, but if you let me know, I'll try to fix bugs you're experiencing too.
So that's the frontend, the stuff you're currently reading. But where does this stuff come from? Well, it's just a bunch of static files. That's the easiest way to make homepages, the way they originally were built and still the technically fastest thing. Also less headaches with databases, caching, authentication and so on. "But ramses, that's really shitty, especially if you want to change the layout!" you say. And you're right! That's the reason we have helper tools, in this case, jekyll. Jekyll is a very simple tool that allows me to define a layout, and have posts rendered in that layout, as well as generating indexes and pagination. That's more or less it. It would have more possibilities, but that's how I use it. You can write posts in html, or you can also write them in various markdown or textile dialects, and have them converted to html. Anyway, jekyll then takes all this stuff and converts it to a bunch of loose HTML files (and the Sass becomes CSS), and those are then rendered.
You may wonder where this stuff is hosted, how I edit, what my workflow is. Wonder no more, I'm going to tell you! So the homepage is hosted on GitHub, a site which I can only endorse. If you're in any way interested in software, development, or even just like open source software, and you don't have an account on github, what are you waiting for? Anyway, on GitHub there is a nice feature called "GitHub Pages", which allows you to host static homepages both generally for your account and then also for everyone of your projects. I think it's awesome, and very glad to use it. (Seriously, GitHub rocks). That means I make my homepage locally, and then use Git to uplaod it. That's already part of my workflow. I can do part of the changes through GitHub's online editor, if I'm not at the computer and have to fix a quick typo or something. Else I can just create the pages with any editor on any computer that has soem way of using git. As an editor I use Sublime Text (hands down the best editor, IMHO) if possible, else whatever's available.
The comments are provided by disqus (I had to go with some outside source, since github pags are just static, and I wanted to avoid having to do server-side stuff, focus my already lacking productivity on actually making the site), and I have to say I'm pleasantly surprised by them, works great. I have a few other scripts running: clearly I have analytics set up, and just in case I have to do soem JS I included jQuery (only jQuery, no jQuery UI, I prefer doing UI stuff myself most of the time), but only from the Google CDN, so you probably have it cached already and it won't take up loading time. On the Homepage I also (mis)use Masonry to place the single boxes. I also use various public apis and a tiny bit of Javascript I hacked together at 4AM to read my stuff from flickr (love their api), last.fm (nice api too, but kinda unstable), Instagram (the API is ok, but the images take FOREVER to load), GitHub itself (okay API. It's great for making apps, but for just showing public activity it sucks), twitter (their api SUCKS BALLS, and having only the includable widget, with so little customization, and even less possibility of accessing it on my end, gave me a ton of headaches), with more to come (youtube history, I'm looking at you...). I also use Google Fonts and Font Awesome to pull in fonts.
That's a nice overview of the technologies I used, I might do detail posts or tutorials on specific parts in the future. Everything written here wil probably change sooner or later, but for now, this is the situration. And if you're reading it, I haven't completely screwed up!