You may have noticed that this blog has changed its look, and has migrated its comments to Disqus. You may also see at the bottom of the page something about some pie crust baking… here’s what’s happening.
I have a few websites around and most of them don’t have much in them (e.g. I use the domain name for other things). There’s clearly not enough content to use a proper CMS, but there’s a bit too much repetition for my tastes if I write HTML files by hand. Also, I wanted to take advantage of libraries like Markdown or SmartyPants to make my text look nice with no effort. Basically, I needed some micro-CMS that would handle some basic layout and formatting.
Then there was the issue of this blog. It was running with WordPress, which I’m very happy with usually, but it wasn’t geeky enough. Also, syntax highlighting for code snippets felt dirty and over-complicated. I stumbled upon the whole “static site generation” underground scene and figured I could find something in between: a micro-CMS (for my small sites) that could also bake its own contents into static HTML files (for this blog).
Enter PieCrust.
There was already a shitload of static website generators, but none that could also work as a “dynamic” micro-CMS. Also, I’m a programmer geek, so it’s kind of my duty to not be happy with existing solutions and write one myself (“this one uses curly braces, but I want to use brackets instead! Surely now I have to write my own!). Anyway, isn’t the whole point of home projects to write stuff for yourself, to learn something new or just have fun with a new subject, regardless of whether it’s productive? I was bored, too.
I ended up writing PieCrust in PHP not because I like PHP (it mostly sucks), but because it’s still the most widely used web application language out there. And also because I’ve already got other home projects aimed at having fun with Python and Ruby.
So there you have it, go check out PieCrust. The code is on BitBucket, and mirrored on GitHub.
I recently published the new version of my personal website and you’ll have no problem figuring out that I had some fun with jQuery. Probably a bit too much fun, actually, but hey, a personal website is supposed to be just usable enough that you can contact the owner without hassle.
My first approach to the website was a mix of good practices and totally blasphemous process:
- I wanted a simple website that only lists ways to get in touch with me (Facebook, LinkedIn, and all that social web stuff), and ways to follow what I’m doing online (my blogs, twitter updates, and all that other social web stuff). It would additionally have a contact form so that people could send me a quick message without any extra steps.
- I also wanted a website with some funky jQuery shit going on. I wanted to learn the API along with vanilla Javascript.
After some research about what jQuery can and cannot do, and a few sketches on my trusted notebook, I came up with a totally revolutionary (in the post-Web 2.0 / post-iPhone 21st century definition of the term) idea: the vertical “Coda” slider!
This UI pattern has been popularized by Panic’s website for their Coda software. It features a panel in which pages slide in and out when you click on their title, displayed in some kind of list or menu bar. There’s a nice tutorial on “jQuery for designers” that explains how to reimplement it. The only difference is that I wanted the pages to slide in and out vertically instead of horizontally. You may point out that the aformentioned tutorial features an option to do just that, but it’s not quite the way I wanted. I want it to look like a standard page until you click one of the navigation links, which is when it goes “shwoop” and you go “wow I did not expect that!”.
No need to go through a lengthy tutorial, as you can probably figure how it works by just looking at the code, but still, to make it easier on you I created a “demo” version of the page with placeholder content and none of the other bouncy crap going on. Go check it out if you want to steal some of it, although I still have a couple of little quirks to fix, especially with window resizing.