Every once in a while, folks would drop a comment or two on how they do not really understand what’s different (or particularly special) about my new website, as opposed to the old one. In fact, a lot of them outright felt that the old one was better in a lot of ways.
Sadly, some of these folks even happen to be CS geeks, which makes it all the worse. So, in the spirit of answering a lot of unasked questions, I just figured I’d tell folks what on Earth is different (and special, if that) about the new Metlin.org.
To begin with, all earlier iterations of my website were in hand-written HTML. That’s right, folks. Every one page was hand-written, every line was hand-edited HTML. You all can imagine how tedious that could become. Not only was this stupid, it was also not the most efficient way to do things.
Somewhere along the way, I finally got around separating the presentation and content and started using stylesheets. While this was a good step in the right direction, it was still what Prasenjeet termed, “Cmdr-Taco-Style-Markup.” To be fair, though, even Slashdot has moved beyond the classic CTSM, but I digress.
Either way, while the content and presentation were separated, I still had to work manually to update the content. For instance, if I added a new page to my ever-increasing list of pages, I’d have to add the reference to that page by hand to all the other pages. There was a time when Metlin.org had around 60-80 pages, all of which needed to be edited everytime I added a major section or made significant changes to the way things were organized. Of course, somewhere along the line, I’d automated this with a Perl script, but it was still a hack at the end of the day.
Amidst all this, I also had a blog, which was growing and I wasn’t quite happy keeping my blog and my personal pages separate. Of course, I always had something of a blog, just that it wasn’t called that back in the day — it was just a simple page called Notes & Updates which contained periodic updates to the site, and occasionally, my life and my thougts. Back then, they were part of the same thing (i.e. my website and my blog), so you can see why I didn’t like separation. The other problem was that I wasn’t happy keeping my blog with a free provider, like Blogspot, either. Now don’t get me wrong, Blogspot is fantastic and they are great for bloggers that are starting out — but somewhere along the line, you need more.
So, I needed an elegant solution, and one that would not complicate my life all that much.
Now, the ideal software-engineering way of doing things would dictate that you should dump all the content and hierarchy into a database, separate the design and leave the HTML and code-generation to a program that could combine the two. However this is easier said than done.
I had considered a few other alternatives — open source, free-as-in-beer and paid ones. Of paticular mention is CityDesk, which I’d considered using if WordPress didn’t work out. The idea behind all these were to make it possible to generate all the code for my website from a database, to put almost all my content into a database and render the presentation however I felt.
But I also needed this to be something which could also function as a blog, which I guess made things a tad complicated.
So, I decided to give WordPress a go. There were several reasons why WordPress was my first choice:
- WordPress’ UI (you can see it when you sign up for an account on WordPress.com) is very nice.
- The way WordPress separates content and presentation is a lot more elegant than, say, Blogspot.
- WordPress was a Content Management System that also allowed blogging — i.e. pages + blogs.
- WordPress seemed to have a lot of plugins and add-ons, which was a very big plus. It also seemed fairly easily extensible.
- WordPress also seemed to have a fairly sizeable and active community, which is always a good thing if you hit roadblocks.
- It’s also Open Source, which would mean that I get to hack around if I needed a few feature, or needed to customize something.
- It also seemed really easy to setup and get going.
- And of course, other things, such as WordPress having a plethora of really cool themes, RSS feeds for both entries and comments and the like were the icing on the cake.
The install was surprisingly simple, and after a few edits to the configuration setup, I had it up and running. The next step was to create the database tables, and before I knew, WP was good to go. Once WP was up and running, my next problem was finding a theme that I liked. I didn’t have the patience to write one from scratch, so I went ahead and used one of the default recommended ones and started editing it to suit my taste.
The next moment of truth was to test a sample blog entry, and a sample page. After all these years of doing things by hand, this was almost like the best thing since sliced bread. It was so easy, and everything flowed so well that I was delighted. Ironically, my next problem was not one of technology — it was one of laziness. I still had to convert all my old HTML pages into the new one.
The one fault of WordPress is that it does not seem to have a way of storing BLOBs — Binary Large Objects — i.e., images, videos and the like. These were not stored in the database, only the text was. So, converting formatted text was not a problem, however I had to upload images, videos, documents and the like to a content directory and reference them from within the pages (WP has its own upload tool, but I found it to be a lot less organized for my liking).
This was a one-time task, but it was still a task and one that takes time. Funnily enough, I still haven’t finished converting all the pages yet — mostly because I realize that I might not do this ever again (at least not for a while), and I want to do it right the first time and be done with it, rather than give myself a lot of pain over the years.
I also took this up as an opportunity to do some cleaning-up that was long due. I removed a lot of stuff that was ancient and pointless, and thinned down the content to the bare minimum — there isn’t a lot there, but what is there is what I consider relevant and useful. I also had a lot of artifacts from a much younger-me (who, looking back, had a lot to learn but had a lot more to say than would be deemed appropriate). These were also unceremoniously sent to the bit-bucket, and I finally decided to run a lean, mean website where simplicity and elegance were the rule.
It almost seemed an impossible task, for the longest time. However, the end result was something that I was amazingly pleased with:
- All the non-binary and formatting content is stored in a MySQL database, including the pages and the blog entries.
- All the binary data is stored in a contents directory.
- The pages are created dynamically, from the hierarchy — i.e., all I need to do is add a new page under the Technology section called Linux and viola! — the page is up, and all other pages have a reference to the new page and it magically appears in the right spot. Even though the page is created from the database, all you need to do is type the relative path — http://www.metlin.org/technology/linux — and there it is. Do you see how awesome this is? This has the added advantage of pleasing the Search-Engine Gods.
- The presentation layer is totally separate. If I do not like the way my website looks, all I need to do is add a new theme and activate it. Bingo! The content is still the same, and is magically formatted according to my theme (think Stylesheets on steroids).
- I can now work independently on my content and design, and not worry about integrating the two. Code generation is no longer my problem.
So, folks, that’s what’s special about the new Metlin.org. Nothing out of ordinary, but it definitely has made my life easier.
(On that note, I’d definitely like to holler a big thanks to Prasenjeet for helping me in this endeavour! 
)
« Hide
RSS 2.0
Add to Technorati
Save to Del.icio.us
Take it back
![\Large\hspace{5}\unitlength{1} \picture(175,100){~(50,50){\circle(100)} (1,50){\overbrace{\line(46)}^{4$\;\;a}} (52,50){\line(125)}~(50,52;115;2){\mid}~(52,55){\longleftar[60]} (130,56){\longrightar[35]}~(116,58){r}~(c85,50;80;2){\bullet} (c85,36){3$-q}~(c165,36){3$q} (42,29){\underbrace{\line(32)}_{1$a^2/r\;\;\;}}~}](http://metlin.org/blog/wp-content/plugins/latexrender/pictures/6762edfa23409956605a07256c3bfc88.gif "\Large\hspace{5}\unitlength{1} \picture(175,100){~(50,50){\circle(100)} (1,50){\overbrace{\line(46)}^{4$\;\;a}} (52,50){\line(125)}~(50,52;115;2){\mid}~(52,55){\longleftar[60]} (130,56){\longrightar[35]}~(116,58){r}~(c85,50;80;2){\bullet} (c85,36){3$-q}~(c165,36){3$q} (42,29){\underbrace{\line(32)}_{1$a^2/r\;\;\;}}~}")
