Bits & Pieces http://prateekrungta.com/bitsnpieces Written and Coded projects by Prateek Rungta en-us Copyright 2008-11 Prateek Rungta Complaining http://prateekrungta.com/bitsnpieces/complaining-is-silly/info prateekrungta.com/bitsnpieces,13 Prateek Rungta Sat, 22 Oct 2011 22:09:44 +0530 Some call it grumbling, some perfectionism. Either way, there’s not much point unless it amounts to something.

Complaining is silly. Hence this big bold reminder:

Act or Forget

As a tribute to one of my favourite quotes:

Complaining is silly. Either act or forget.

Heard first at Stefan Sagmeister’s TED talk, which itself is an excerpt from his beautifully designed Things I have learned in my life so far book.


The one page complainingissilly.com has actually been out for quite sometime now. I’m just a few years late in documenting it here.

This project was a nice opportunity to experiment with (what were then cutting edge) CSS properties such as @font-face and CSS gradients. ‘Act’ is set in The League of Movable Type’s freely available League Gothic font, whereas that little play button on the bottom right corner activates a fun lava lamp like animation on the entire page.

Also included are desktop and smartphone wallpapers for those of you that would rather not forget.

]]>
Instagraphy http://prateekrungta.com/bitsnpieces/instagraphy/info prateekrungta.com/bitsnpieces,12 Prateek Rungta Wed, 20 Apr 2011 06:23:55 +0530 It was sometime mid-2010 I think. Photos with instagr.am links started popping up all over my twitter timeline. I was intrigued. Another app that lets you take photos and share them with your friends. How different can it really be?

Significant enough to completely change the perception of cellphone photography, as it turns out.

My iPhone has turned from a lowly 3.2 megapixel camera with an only-use-when-all-else-fails warning to an indispensable tool for documenting day-to-day life, even in situations when I might have an SLR at my disposal.

Others have written about what makes Instagram so wonderful, so I won’t repeat that here. Instead, I want to share some results.

Instagraphy

I started using Instagram in October 2010. Collected here are a few favourites from the 100 or so photos I’ve posted in the 6 months since.

Do take a look.


Instagram wouldn’t be half as interesting without the people that form it’s community. It is a social network after all. The best photos in my feed usually come from @rashmi, @rands, @rksh, @gruber, @cameronmoll and @simplebits. Go follow them if you’re on Instagram.

]]>
Not so Yellow http://prateekrungta.com/bitsnpieces/not-so-yellow/info prateekrungta.com/bitsnpieces,11 Prateek Rungta Fri, 11 Jun 2010 03:34:16 +0530 Twitter is great. Definitely my kind of social network.

As good as it is, the current web interface does not make it easy to browse historical data. Anything older than the latest 100 or so tweets requires a lot of clicking and manual scanning. Their search too, understandably, only covers updates spanning back a week or so. Anyone who’s tried to revisit their tweets from an year or a couple of months back has surely felt the pain.

There had to be a better interface for browsing tweets. What surprised me, though, was that no one had created such a service for the nostalgic folk on Twitter. I did come across a few custom solutions: Doug Bowman (the design lead at Twitter) for instance, set up a WordPress archive; Andy Graulund built a custom LAMP app.

The idea of my own Twitter archive appealed to me, didn’t sound like a massive amount of work, and out came Not so Yellow.

Not so Yellow homepage

Design

This project was the result of my grievance with browsing old tweets. Before anything else, it had to have a super easy interface for getting to tweets from any specific month or year.

I toyed with several ideas: listing all the years and months upfront; as drop–down menus / expandable lists; months from the current year upfront, with the full list on a separate page or down below; and, side by side.

Not so Yellow screenshot of tweets in the centre flanked by archive links on both sides

As you can see above, I ended up adapting the side-by-side option. This design keeps the content (tweets) centrefold and topmost in the the visual hierarchy, and the year and month links as second-class citizens. Yet these navigational links are persistent and always available as soon as they’re needed.

Short Abused URLs

URLs are important. URLs are part of a site’s design. Cool URLs don’t change. An unfortunate consequence of Twitter’s awesome 140 character limit has been the blown-out-of-context URL shortening craze. While these shorter links definitely do a great job of conserving precious tweet characters, they are usually less readable, obfuscate useful information and — as was dutifully demonstrated by tr.im — provide little guarantee against massive link rot. They should, in my opinion, be used sparingly, only when absolutely necessary.

Well, here was a chance to do something about the shortened URLs under my control. And something I did. It wasn’t as straightforward as I hoped though.

My initial plan was to simply follow and look for redirects for all incoming URLs, and replace the tweeted link with the address of the final destination. Turns out:

So, I scratched my URL replacement plan and decided to provide inline expansion, similar to the ‘(expand)’ short URL suffix on Summize (now search.twitter.com). Expanded URLs, when applicable, are added to the tweets as [+] links.

Screenshot of expanded URLs on mouseover

Tooltip via the generated CSS content:attr(href) property.
No JavaScript.

The fully expanded link addresses are displayed as tooltips when the mouse moves over [+]. Thus, a user has the option to simply click the original short URL or preview and directly click through to the final destination.

Should, Could, Would

Should

Search, obviously.

Could

As Rakesh graciously pointed out, this could be opened to support any user, and do for Twitter what Justin Ouellette’s ihardlyknowher does for Flickr. Not so Yellow does archive tweets from multiple accounts (and can support a few more), but it wasn’t built as a public service.

Would

Perhaps at a time when I haven’t got 4 other projects stretching me thin.

For now, if you’re interested in archiving and/or browsing through your own tweets, take a look at Doug Bowman’s instructions for WordPress. Alternatively, download and install Andy Graulund’s well designed, fully featured, open source LAMP project Tweet Nest. Or ask me nicely.

Credits

]]>
CodeIgniter Libraries http://prateekrungta.com/bitsnpieces/codeigniter-libraries/info prateekrungta.com/bitsnpieces,10 Prateek Rungta Sat, 13 Mar 2010 21:01:45 +0530 CodeIgniter is a great lightweight PHP framework for building MVC based web applications. It’s what powers most of my online endeavours, including this site. CodeIgniter prioritises simplicity by providing just the essentials and avoiding bloat. What it lacks in features though, it makes up in extensibility (as any good framework should).

I’ve made ample use of this extensibility to add functionality I found myself using in multiple places. I’m sharing a few of these extensions here in the hope that others might find it useful.

They’re all being used under production, with the latest version of CodeIgniter and PHP 5, so they’re hopefully bug-free.

]]>
Vector Art: Lakshmi http://prateekrungta.com/bitsnpieces/laxmi-vector/info prateekrungta.com/bitsnpieces,9 Prateek Rungta Thu, 12 Nov 2009 03:30:50 +0530 Given the popularity of Goddess Lakshmi and the fortune associated with her grace, I was a little surprised at the dearth of vector illustrations of our Hindu deity on the internet.

I needed a simple silhouette of the goddess for a design project commissioned by Dad, and had to resort to tracing one myself. I’m releasing that work here for free use under the Creative Commons Attribution license in an attempt to fill that internet void.

I’ve only just started playing around with vector graphics (courtesy of the simple and easy VectorDesigner app), so while you won’t find a professional’s polish or attention to detail, it should suffice as a useful starting point.

]]>