
**TLDR;** [https://github.com/vraa/css-timeline](https://github.com/vraa/css-timeline)

Just finished updating/redesigning (or messing up) [my online resume](https://veerasundar.com/resume/). For the new design, I needed a timeline like UI component to show my work history. The componenent need not to be a perfect timeline, with actual scaling and all. But it should look like one and should respond to the screen width.

Here's a screenshot of the timeline component from my resume's work history section.

<a
  href="http://www.flickr.com/photos/94921037@N05/12284453065/"
  title="timeline by v33ra, on Flickr"
>
  <img
    src="http://farm4.staticflickr.com/3786/12284453065_87e377c0e9_c.jpg"
    width="800"
    height="557"
    alt="timeline"
  />
</a>

And, here's the responsive layout of the timeline in smaller screens.

<a
  href="http://www.flickr.com/photos/94921037@N05/12284483625/"
  title="timeline-responsive by v33ra, on Flickr"
>
  <img
    src="http://farm8.staticflickr.com/7391/12284483625_0f187a5924_c.jpg"
    width="501"
    height="800"
    alt="timeline-responsive"
  />
</a>

After implementing the design, I thought of separating the timeline code alone as a re-usable component. Hence the new github repo: [https://github.com/vraa/css-timeline](https://github.com/vraa/css-timeline).

If you have a need to use something similar in your code, feel free to fork and use. Customize the variables in timeline.less file to your taste and compile it with less.js.

Fair warning: There are few limitations with the current implementation, which I'll fix in near future. If you happened to patch any bugs, please send me a pull request. TIA.


Responsive timeline with CSS and HTML


It's been few months since I started the [twikural][1] service. For the people who didn't know about Twikural;

[1]: http://twikural.veerasundar.com/ "Twikural - Daily thirukural"

[Twikural][2] is a web service that sends two couplets from the well known *[Thirukkural book][3] *everyday to its subscribers. People can subscribe to the service via either [Twitter][4] or [Facebook][5].

I have already open sourced the [code behind twikural][6]. If you like to browse the source code, you are welcomed to do so in [Github][7].

[2]: http://twikural.veerasundar.com/ "Twikural - Daily Thirukural"
[3]: http://en.wikipedia.org/wiki/TirukkuÃ¡¹€ºaÃ¡¸· "Thirukkural"
[4]: https://twitter.com/twikural "twikural"
[5]: https://www.facebook.com/twikural
[6]: https://veerasundar.com/blog/open-sourcing-twikural-an-app-engine-project "Open sourcing Twikural"
[7]: https://github.com/vraa/twikural "Twikural source code in Github"

In this post, I'm going to explain the details behind the project and how the entire thing works. Lets begin.

## The Big Picture

[![][9]][9]

[]: http://twikural.veerasundar.com

The site runs on **Google App Engine **and built using **Java 7**. The Java code does not use any fancy frameworks - it's all plain old Servlets and JSPs. But in the front end, I am using **Twitter Bootstrap** to ease the designing task and supporting different screen sizes. To interact with Twitter, I'm using **Twitter4j**.

There are two *cron jobs *that scheduled to run at 9 AM and 6PM respectively and sends out the tweets and Direct messages to the subscribed users. Then twitter takes care of updating the Facebook status of Twikural page.

As you can see in the above picture, the site talks only to Twitter, even though it supports Facebook as a subscription channel. This made possible by using the Facebook integration feature that Twitter provides. Using this, whenever there's a tweet is published, Twitter will automatically update the connected Facebook page status.

Users can subscribe via either [Twitter][9] or [Facebook][5]. The advantage of subscribing via Twitter is that the user will get an direct message (and possibly an SMS if he'd enabled it).

[9]: https://twitter.com/twikural

So that's pretty much about what's happening behind Twikural at a higher level. If you'd like to read Thirukkural everyday, you should [subscribe to Twikural][10]. And feel free to share your feedback. The comments are always welcomed.

[10]: http://twikural.veerasundar.com/subscribe.jsp "Subscribe to Twitter"


Twikural - How it works?


**tldr; **

It all started when I asked the following question to my twitter friends:

> Juts checking: If there's a service that sends you a Thirukkural every day, would you be signing up for it?
>
> '€ Veera (@vraa) [January 31, 2012][1]

[1]: https://twitter.com/vraa/status/164394058238799873

My idea was simple: to send out Thirukural poems everyday to the people that are signing up for the service. Instead of sending it to email addresses, I decided to use Twitter and Facebook as my medium since that's where most of the people are hanging out these days.

There were few tweeples responding to it positively. Even though there are already few other alternative services available, I decided to move on and build it as I thought the new service will be different and be a learning experience.

It took a weekend to code the 80% of the site and I hosted it on App Engine platform. And the site is live for the past few weeks -

[![][3]][3]

[]: http://twikural.veerasundar.com

Now, the service has [31 followers in Twitter][3] and [37 Likes in Facebook][4]. It has already sent out 120 Thirukurals till date. ![:)][5]

[3]: https://twitter.com/#!/twikural
[4]: https://www.facebook.com/twikural
[5]: https://veerasundar.com/blog/wp-includes/images/smilies/icon_smile.gif

And, I'm now open sourcing the code. The project is now [hosted @ Github][6]. You are welcomed to check it out and if you'd like to contribute, feel free to send a pull request / contact me.

[6]: https://github.com/vraa/twikural

I would like to thank my fellow tweeples - [@iGhillli][7], [@anandhame][8], [@mgobi_php][9]   for their continuous support to this project.

[7]: https://twitter.com/#!/iGhillli
[8]: https://twitter.com/#!/anandhame
[9]: https://twitter.com/#!/mgobi_php


#github (3)