I am one of the geeks behind Alertle. Its a web based RSS Reader. I am responsible for a good amount of the JavaScript areas of this app

Features

Single Page Application

The entire application is contained in a single page - everything is done through Ajax. I will not advice that you make something like this(its a maintenance nightmare) but I can say one thing about it - its Cool. With a capital ‘C’.

Keyboard Shortcuts

I got the idea of creating a Keyboard Shortcut Library for JavaScript when I was working on this feature.

Autoplay

You can view articles as you are viewing a slideshow if you enable this.

Feedpacks

You can bunch a group of feeds together into a feedpack - and see all the posts from such a group together.

Sharing

You can share your feedpacks with other users

Perfect for High Volume Feeds

There is one major feature that sets Alertle appart from other RSS readers - it does not tell you if a post is read or not. Yeah, first you will think its a missing feature - but its not. I have used a lot of feed readers - once you subscribe to a couple of high volume feed - like say, BoingBoing or Slashdot or something, you can say goodbye to your sanity. It creates so many new items that the only way of staying away the mess is to click on the ‘Mark all as read’ button once every four seconds. You know what I mean - I am sure you have unsubscribed from many feeds for this reason.

With alertle, you can subscribe all these high volume feeds. And there is no pressure to view all the posts.

If you are an info junkie, I can guaranty that your will get lost for hours in Alertle.

Problems

IE is not Supported

We are still working on this - and due to deadline constraints, we decided to release Alertle without IE support. So if you are an IE user, I am sorry - but What in the World are you Doing? Ditch that terrible browser and get a real browser right now!

If we can get a few people to switch to firefox before we add support for IE, I will say that Alertle gone beyond and above the call of duty to make the web a better place!

Posts don’t have a Read Flag (pun unintended)

Um., yeah, I know - this is both an advantage and a disadvantage. This will prevent me from using Alertle for all my feeds. For my must-read feeds, I will still be using Google Reader. For the high volume stuff, I will use Alertle.

Getting to Know Alertle

So, what are you waiting for? Head over to Alertle and sign up for an account. Its FREE!

But if you are still unconvinced, here is a demo…

Links

• Alertle
• Masable’s take on Alertle
• Alertle Blog
• Alertle Docs

Web 2.0 - almost everyone have heard the term - but few are sure about its meaning. Unfortunately, it cannot be defined easily. People in different fields have their own unique definitions for the term. In this article, I will attempt to define the term at three different level - the Philosophy, the Technology and the Design.

Disclaimer: Before anyone reacts violently to the term Web 2.0, let me make myself very clear…
Web 2.0 is an ambiguous buzz word. It has been used and abused so many times that it does not have a consistent meaning - so people are free to interpret it as they see fit. And this is how I interpret it.

Philosophy

The design philosophy of a web site can make it a Web 2.0 site. This is perhaps the key difference between a Web 1.0 site and a Web 2.0 site…

Web 1.0 is a web site where there is a one way communication between the web master to the visitor. A Web 2.0 site is a site where the visitors can communicate with each other.

For example, compare the Encyclopedia Britannica to Wikipedia. In Encyclopedia Britannica, the web master creates the content and gives it to the visitor - the visitor has no way of talking back. But in Wikipedia, the visitor create the content for other visitors.

Technology

The keyword here is “Internet as a platform”. In Web 2.0, the net became the platform rather than just a data transfer mechanism. For a simple example, when you visit a site, the videos in it come from YouTube, the images from Flickr, the search is done using Google API and you can bookmark pages using the API from del.icio.us.

Some technologies that are described as Web 2.0…

• Ajax
• Valid Markup
• Microformats
• Tagging, Tag Clouds
• APIs
• Feeds
• Mashups

Some features that makes a technology Web 2.0…

Speed

For example, Ajax makes simple tasks much faster.

Ease of Use

A good example of this is Tagging. It is a much easier approach when compared to hierarchies.

Enabling Mashups

APIs, Feeds, etc. makes this possible.

Bringing Web Apps closer to the Desktop

Ajax, AIR, etc.

Design

This is perhaps the only area where the term Web 2.0 can be defined with a reasonable level of accuracy. A site with a Web 2.0 design is one that has at least some of these elements…

Simple Design

Lots of white space

Nice Icons

Violators/Badges/Star Flashes

Big Fonts

Gradients

Reflections

Shadows

And More…

Web 2.0 Design Style Guide

For More Information

• Web 2.0 Wikipedia
• Web 2.0
• What Is Web 2.0
• Not 2.0?
• Web 2.0 Design Style Guide

You don’t have to write a lot of code to get tagging support in your Ruby on Rails application - you just have to install a plugin. This is how you install the ‘acts_as_taggable’ plugin…

First go to the Ruby on Rails application folder and open a terminal at that location. Now run this commad…

ruby script/plugin install acts_as_taggable

If your have previously installed some plugins from the same repository, that command will work. If not, you will get this error…

Plugin not found: ["acts_as_taggable"]

This is because the ‘acts_as_taggable’ plugin is not in any of the repositories you check. To see the all the repositories on your check list, run this command…

ruby script/plugin list #Shows the list of all the repositories you check.

To add new repositories to your list, you have to run this command…

ruby script/plugin discover

This will shows a list of repositories - just press ‘y’ to select all the repositories you need. I added every repository in the list.

Now run the first command again…

ruby script/plugin install acts_as_taggable

Installing the Gem

The above instructions are for installing the acts_as_taggable plugin - not the acts_as_taggable gem. To install the gem run the command…

gem install acts_as_taggable

Related Links

• Acts As Taggable Plugin Howto
• The Complete Guide to Rails Plugins

Desktop and Web application needs icons. Icons make the app more usable than an all-text application. If you are building a desktop application, your framework may provide some stock icons. But if you are making a web application, you will need external icons.

I have seen a lot of pages that lists many icon sets…

• Icons For Your Desktop and Icons For Your Web Designs
• Quality mini icons
• 90 Free Vector Icons Set
• The Top 50 Sources for Free Designer Icons
• Top 50 Supercool Free Icon Sets
• Symbols, Buttons and Icons For Free
• More Symbols, Buttons and Icons For Free
• Free Tiny Small Mini Icons Bullets
• Icon Finder - a search engine for icons

But when I want some icons I have a better place to look.

KDE and Gnome Icon themes.

I prefer using these icons because of the following reasons…

Multiple Size Icons

Most themes provide the same icon in various sizes. The available sizes are 128×128, 64×64, 48×48, 32×32, 24×24, 22×22, 16×16 and sometimes even a scalable SVG set. Not all themes have all the sizes - but most have. I don’t have to tell you how useful this is.

Lots of Choice

KDE Look Icons page have 86 pages with 15 icon themes per page. That makes a total of 1290 icon sets. And I am not counting the Gnome Look Icons.

That’s a lot of choice. Granted, not all will be good. Not all will have the icon I am searching for. Not all have the size I way want. There will be some duplication. But its still a lot.

Free - in both sense of the word

Most of these icons uses GPL and LGPL licenses. So you can use if for your application without paying for them. You can modify them. You can share it with others. You can… you get the idea. The point is there are no restrictions.

Even if you are building a proprietary application, I think you can use the icons because you are not compiling it into the application. But I am not sure about that - if anyone reading this knows, please leave a comment.

I have to warn you that not all icons sets use these licenses - so make sure you look at the license of an icon set before using it.

Great Icons

Most of the icons are created by professional designers. Sure there are some duds among the collection - but the majority of them are good.

Some Recommended Icon Sets

Crystal Project

Nuvola

Crystal Diamond

black + white icons

Crystal Clear

And there are hundreds more for you to find out…

I have created the second version of the JavaScript Shortcut Library. It is one of my more popular scripts. This script eases the work involved in making shortcuts in JavaScript.

Despite the many JavaScript libraries that are available today, I cannot find one that makes it easy to add keyboard shortcuts(or accelerators) to your javascript app. This is because keyboard shortcuts where only used in JavaScript games - no serious web application used keyboard shortcuts to navigate around its interface. But Google apps like Google Reader and Gmail changed that. So, I have created a function to make adding shortcuts to your application much easier.

Changelog

• The single function method was abandoned for an object with two functions
• Shortcut Remove function added
• New option to disable shortcuts in textarea, input fields.

If you are using this script in any of your projects, please switch to the latest version.

Previous Version Documentation

Almost all distributed web applications has an installer - it makes installation process easier for the end user. I will try to outline some of the most important things to look out for when creating an installer.

Examples of Web Installers

WordPress

Joomla

Nexty

I have created an installer for Nexty - I used the same installer for Jus5 as well. Here’s a screenshot…

Functions of an Installer

Check Requirements

If you software needs the GD PHP extension, check for it - it it is not present, show an error. If any folder must be writable, check for that. Make sure that the user cannot go to the next page without solving all the problems.

Make sure you have provided clear instructions on how to solve the problems - changing the permission might be easy for you and me - but the average user will find it very hard.

Database Connection Details

The user have to provide this data if our system uses a database.

• Host
• User
• Password
• Database

In some applications, the user must manually enter these data into the config file(for eg. WordPress). In other software, the user have to enter it at the time of installation. For example, Joomla uses this method - as does my application, Nexty.

Create tables and insert initial data

Check for existing data first - you don’t want to delete the existing data when reinstalling the software. This step is necessary only if you are using a Database in your application.

Save the inputted data

The user inputted data must be saved - in my application I just write it to the config file. But for that to work, the config file must have write permission. I also give the user an option to copy the code and place it in the config file themself.

Joomla also writes the values to a config file. However, WordPress inserts the data into the database. The only thing in the config file in wordpress is the database connection details - which the user must enter manually.

Disable the Installer

Make sure that the installer cannot be run after the installation is successfully compleated. This is important for the security of the application. You really don’t want any Yahoos opening up the install URL of your application and resetting all the data!

The easiest way of doing this is just deleting the installation script/folder. Joomla insists that you remove the installation folder before letting you use the application. In Nexty, removing the installation directory is recommended - but not enforced.

More on Web Installers in the next post.

In Nexty I used CSS to create a inexpensive templating system. You can see it in action in the settings page of Nexty. Currently I use it only for changing the icon sets. But you can change the colors and the layout using this system.

Before starting, I must say that CSS is not the most powerful solution for templating. Using a server side solution is much more recommended. But for my purposes, CSS was good enough.

(X)HTML Code

If you want to use CSS templating, your app must be semantically valid. In other words, there is no way you can theme a tag soup.

Make sure that the stylesheet used for templating appears at the last. This will make sure that all the rules in the above stylesheets can be overwritten easily. In Nexty, I have a base stylesheet, then the theme stylesheet and at the end the hacks stylesheet…

<link href="css/style.css” rel=”stylesheet” type=”text/css” />
<link href=”images/themes/crystal/theme.css” rel=”stylesheet” type=”text/css” />
<!–[if IE]>
<link rel=”stylesheet” href=”css/style_ie.css” type=”text/css” media=”all” />
<![endif]–>

PHP Code

Very little PHP is involved to creating this system - I depend on it just to change the path of the CSS Stylesheet. The code used is…

<link href="images/themes/<?=$theme?>/theme.css" rel="stylesheet" type="text/css" />

The $theme variable will change if the user changes the theme.

Using icons is a must for all Web 2.0 apps. I have used this principle liberally in Nexty. When I was creating Nexty, I learned a simple trick that made using icons with CSS much easier.

Go to Nexty to see the icons

3 Types of Icons

I used 3 different classes for showing icons. They are..

icon

This class removes the text of the link and put the icon in its place. The icon is clickable.

You can see this technique used in the Projects page. See that ‘Edit’(Pencil) and ‘Delete’ icons? They use this class.

XHTML code

<a class="icon edit" href="edit.php?project=6">Rename<a>

CSS Code

.icon {
	font-size:0px; /*Hides the text*/
	padding:6px 8px;
}
.edit {
	background:url(edit.png) no-repeat left center;
}

with-icon

This class shows the icon left of the link text. Both the icon and the text are clickable.

The ‘Create new task’ link in the home page is an example of this.

XHTML code

<a class="with-icon tasks" href="tasks/new.php">Create New Task...</a>

CSS Code

.with-icon {
	padding-left:18px;
}
.tasks {
	background:url(tasks.png) no-repeat left center;
}

list-with-icon

This will insert the icon in every item for the given list.

The drop down menus - Sections, Projects and Contexts are created using this technique.

XHTML code

<ul class="menu-with-icon projects">
<li>...</li>
<li>...</li>
</ul>

CSS Code

.list-with-icon li,.list-with-icon dt {
	padding-left:18px;
}
.projects li {
	background:url(projects.png) no-repeat left center;
}

Icon Size

My icons were 16×16 pixels - if you are using icons with a different size, you will have to change the amount accordingly.