Building a Blog in Two Days

Karen Menezes on August 15, 2012

I needed a blog. I needed it bad.

…this was my way of giving back to the incredible online web development community and its benevolence. (I still owe a few coders some beers…)

…to write delightful CSS tutorials and invest in the pool of great CSS snippets online.

…to document my forays into all things ecological, spectacular and green.

…share a few recipes with greedy little muffins like me.

…amongst other things…

 

This was my way of tracking my line of evolution and how it crisscrossed with the lines of others.

I thought about WordPress. It would be dead easy – a great blogging software, but one with too much bloat and spaghetti code at its PHP core.

Besides, I do a lot of work with Python developers and respect their reasons for choosing the language. Clean code written in Python is code you want to lick.

 

• So we looked at two options for Python:
• - We installed Zinnia, and were close to using it, but the templating seemed kind of hard.
• - We then resorted to Mezzanine, which is this superb blog cum CMS solution built by some really cool guys. Out of the box, it came bundled with Bootstrap (Jesus, the bloat!) and TinyMCE. I don’t wish to use a rich text editor or fight with Bootstrap on my personal blog. So we dumped it. However, Mezzanine definitely seems like a great all-in-one solution (and a possible alternative to WordPress) for Python devs looking for an all-in-one solution.

My Python programmer Sanjay decided to build a basic blog in Django, the framework that sits atop Python. And then he came across Django Basic Apps.

 

Back-end for the Blog
Here’s what Django Basic Apps provides:

• - Date based archive
• - Categories
• - Tags (integrates with the Django-tagging application)
• - Rudimentary text search
• - Tease: The post blurb that shows up in the post list.
• - Post Status: Public/Draft
• - Post Publish Date: Edit
• - For uploading content, a simple text area which accepts HTML (but has no rich text editing)
• - Comments with markdown support (integrates with the Django-tagging application), option to allow or disallow comments via post
• - Blogroll
• - Inlines: This is a super flexible solution to insert content objects (like images, galleries, videos, permissions, sessions, etc.) into pieces of content like blog posts. You need to define what constitutes a type of inline (e.g. a ‘photo set’ can be a slider, carousel or slider inside a modal box) and then use a select menu on the post page to choose the one you need.

Not sure we would recommend the basic app solution to just about anyone, because there are a few bugs and it’s pretty DIY, but it definitely works for our use case.

 

• Front-end Goals
• - Incredibly clean, tight UI, with an almost barebones layout
• - Moving away from the general blog kitchen-sink interface
• - One click navigation, as far as possible
• - No images for icons or design elements; pure CSS solutions (font icons, gradients) with a touch of jQuery for click events
• - Super fast loading
• - Responsive and device-independent layout, so it works across smartphones, tablets and desktops.

 

1. UI Design Decisions
2. Persistent Navigation: Fixed the left column to the viewport, so search and filters (sorted by date, category and tags) are always visible, even on scroll. (On smaller screens, the left nav scrolls with the rest of the page.)
3. Date filter: Each year is segregated into months. The current year’s months are displayed. Previous year links can be toggled to show and hide their months
4. Categories and Tags: Placed below category and date.

 

Of course, the blog didn't happen in two days, but we achieved quite a bit in that time.

And thus, I present you with my Zen version of a blog.

• - Categories: Highly distinct and generally unrelated to each other. E.g. Code, EcoFlora, Food.
• - Tags: I took a decision not to show tags on the home page, since a user is most likely to pick a specific category of his choice before delving into the blog. Tags are shown on all other post pages.
• Post Excerpts: For the list of posts on the right, the entire block of each post excerpt is clickable.
• Highlighting Tags: As a user hovers over each post, the associated tags on the left column are highlighted and remain highlighted for each individual post page.
• Trimming: Did away with the generic links for Recent Posts, Similar Posts and Most Popular.