How To Improve Your Workplace Efficiency

Working with many people on a big project can be though. Asana solves this problem for you. The startup founded by Facebook co-founder Dustin Moskovitz and fellow-Facebooker Justin Rosenstein, develops collaborative task and project management software and managed to do what many others have unsuccessfully tried and spent millions of dollars on: They improved the way how people collaborate on projects and work in teams.

Asana Screenshot

Contrary to other big group collaboration tools for enterprises, Asana is free and will stay free of charge. It reduces the amount of work you have to do in order to keep everyone on the same project status. The app makes it extremely easy to add new tasks to a project for example. Everything you have to do is simply typing in the text on a blank canvas and hitting return on your keyboard. After that you get the chance to assign this task to certain people, add notes, set a due date or attach a file. After that you and your assigned co-workers are able to comment on this task. This way you’ll keep updated on the progress of your colleagues without having to bother them by asking about it.

Opposed to many other collaboration tools, Asana is purpose-built for the web and is very well structured so that you’ll still be able to keep up with the developments of the projects if they grow and you have many comments under the various tasks. Your news feed will notify you, when a task you’re involved with is completed, without someone needing to separately remember you by email. Working with Asana will decrease your email usage and save you a lot of time. Besides of that, it is actually quite fun to work with.

You’ll find two videos with a quick tour trough Asana right here:

Intro to Asana
Using Asana for Individual Task Management

Small Mootools Twitter Class

For a current project, we had to implement a custom Twitter widget. After some time searching the web, I found this article on David Walsh’s Blog. Even if its a bit outdated, it did the trick.

Based on the old class, I present the updated and extendend version!

var TwitterWidget = new Class({

	Implements: [Options, Events],

	options: {
		count: 3,
		insertElement: null,
		actionSeparator: '<span class=\"tweet_actions_separator\">.</span>',
		dateFormat: '%e %b'
	},

	initialize: function(username, options) {
		this.setOptions(options);
		this.username = username;
	},

	getTweets: function() {
		new Request.JSONP({
			url: 'http://api.twitter.com/1/statuses/user_timeline.json',
			data: {
				screen_name: this.username,
				count: this.options.count
			},
			onComplete: function(data) {
				data.each(function(tweet) {
					tweet.text = this.linkify(tweet.text);
				}, this);
				this.fireEvent('fetchComplete', [data]);
				this.insertTweets(data, this.options.insertElement);
			}.bind(this)
		}).send();
		return this;
	},

	linkify: function(tweet) {
		//totally stolen from Jeremy Parrish / David Walsh
		return tweet.replace(/(https?:\/\/\S+)/gi,'<a href="$1">$1</a>')
					.replace(/(^|\s)@(\w+)/g,'$1<a href="https://twitter.com/$2">@$2</a>')
					.replace(/(^|\s)#(\w+)/g,'$1<a href="https://search.twitter.com/search?q=%23$2">#$2</a>');
	},

	insertTweets: function(tweets, element) {
		if (element == null) {return;}
		tweets.each(function(tweet) {
			var tweetDate = Date.parse(tweet.created_at)
			var tweetContainer = new Element('div', {
				html: '<span>' + tweet.text + '</span>',
				'class': 'tweet'
			});
			new Element('div', {
				html: '<a href=\"https://twitter.com/' + this.username + '/status/' + tweet.id_str + '\">' +
					 tweetDate.format(this.options.dateFormat) + '</a>' +
					 this.options.actionSeparator +
					 '<a href=\"https://twitter.com/intent/tweet?in_reply_to=' + tweet.id_str + '\">reply</a>' +
					 this.options.actionSeparator +
					 '<a href=\"https://twitter.com/intent/retweet?tweet_id=' + tweet.id_str + '\">retweet</a>' +
					 this.options.actionSeparator +
					 '<a href=\"https://twitter.com/intent/favorite?tweet_id=' + tweet.id_str + '\">favorite</a>',
				'class': 'tweet_actions'
			}).inject(tweetContainer);
			tweetContainer.inject(element);
		}, this);
		this.fireEvent('insertComplete');
	}

});

Usage

Let’s say you have the following HTML snippet,

<div id="twitter_container">
</div>

and you want your recent 5 tweets in this container, then simply use the following code:

var widget = new TwitterWidget('yourveryownusername', {
    insertElement: $('twitter_container'),
    count: 5
}).getTweets();

But what if you don’t like the date format and want an other separator between reply, retweet and so on? No problem.

var widget = new TwitterWidget('yourveryownusername', {
    insertElement: $('twitter_container'),
    count: 5,
    dateFormat: '%B-%d-%Y',
    actionSeparator: '|'
}).getTweets();

(for the date format options head over to http://mootools.net/docs/more/Types/Date#Date:format)

That’s it! Simple.
But be aware that you need to add the Request.JSONP and the Date module if you are using Contao. These two things are not included in the Mootools-More pack by default.

On this page, you can see how it could look like on your website.

Have fun, and oh, please let me know if this could come in quite handy on any project you’re working on.