Tag Archives: project

Chrasks – Chrome plugin

During New Year holidays I wanted to learn more about creating Google Chrome plugins and using localStorage. Logical decision was to unite these two into one idea and create something useful.

Result is Chrasks Chrome plugin. A simple task managing application.

You can download packed version here. Nothing fancy, just enter a task in textbox, press “Create task” button and your task is hopefully saved. Local storage is used as persistence mechanism. You can checkout main javascript file here.

I also have to give credit to www.iconarchive.com for lovely icons.

Twitter accounts feed application

This post is a continuation of my previous post. I will explain how to implement a job interview application I was given last year. Let’s call it Twitter accounts feed. In case you missed it here are our tasks:

  • Build PHP script that will pull Twitter feeds for each selected account, merge them and sort by time of post and return as JSON.
  • Create JavaScript code that will send request to the above PHP script and print response as HTML.
  • Implement sliding functionality for switching the panels on page (existing panel moves to the left, new one arrives from the right side replacing existing one).

Clearly this application can be done without the PHP part, but the purpose of this is to also test applicant’s PHP programing skills. As you may assume I already written this application and shared it on github. You can find source code here and demo here.

Basically it goes something like this:

You have an index.html file which is the first file that is pulled when you visit demo page. Within it’s <script> tags it tells browser to load two javascript files twitter-accounts-feed.jquery.js and sliding.panels.jquery.js. First file is the main javascript file that handles the execution of this application and the second one is jQuery plugin for adding that super cool sliding effect to the panels.

First file handles the submit event of the main form. After submitting the form it pulls feeds from fetchfeeds.php script in JSON format and renders it as HTML panels. Also after html is generated the sliding effect is applied. fechfeeds.php script is using two classes TwitterFeed which represents the feed for the account and TwitterFeedCollection for representing collection of feeds.

For now you can just look at the source code and code comments on github but eventually I will write proper tutorial on specifics of each file.