Veera Sundar » Tools

Slidr – HTML5 app for making online presentations

Veera — Wed, 11 Aug 2010 20:54:15 +0000

An Event Apart + MIX is organizing a contest for implementing a cool web app, using HTML5+CSS3+JavaScript combo, with a rule that the final app size should be less than 10K. That’s the challenge.

From my side, I tweaked my earlier code and redid that as Slidr, a web app for creating online presentations. The idea is simple (or that’s what I think!) – to provide anyone the ability to easily create online presentations without the need to edit HTML/CSS code. With Slidr, the user can directly edit the content right from browser (yeah! contenteditable=true does the magic) and save their work. Slidr has a basic animated slide transition too.

Please try my app with link given below and rate it if you like the app. Because it helps the app to get more visibility.

(please use a browser which can understand HTML5, CSS3. For example, IE9 or FF 3.6+ or Chrome 5+ )

Test drive – Slidr| Rate it(thanks!)

Codered – Less SPAM, More Code!

Veera — Thu, 22 Jul 2010 12:24:46 +0000

I hardly got ay response for my question about custom search engine to search only in programming related websites. I asked this because, at times I felt that I have been spending more time in Google search result pages than in the actual pages itself.

As you must be knowing, Google relies on PageRank and people know how to play around with PageRank. So, I usually get less relevant results on top of the ones which has more authentic data. Apart from this, I also wanted to reduce the noise in Google SERPs for my programming related queries. That was the reason why I needed a custom search engine.

Since no one replied (or there was no search engines like that) to my question, I created one for myself – CODERED. It’s a Google custom search engine which will only search in programming related websites. Not anything innovative – Just added my favorite websites to Google’s list (which you can achieve it using site:yoursitename filter too, manually!).

But which websites the CODERED searches? Well, currently there are few good websites that I have added to CODERED. If you would like to add to this list (you can recommend your blog too!), please give your suggestion here. Thanks!

Of course, please let me know your thoughts about this.

CSS Sorter – Revamped

Veera — Wed, 02 Jun 2010 16:41:36 +0000

If you remember, some time back I had released a small Java application called CSS Sorter that sorts the Cascading Style Sheet rules alphabetically. That application was developed based on Google’s App Engine Java platform. I took that project as a learning exercise to know more about Google App Engine development and it served well for that purpose.

However, the CSS Sorter tool was lacking few functionality and it had some bugs too (thanks to @sonnes for reporting one). I was holding the CSS sorter revamping plan for the past few weeks, mainly because the programming in my old laptop was a pathetic experience (hope my old laptop doesn’t read this post! ). Since now I’m a proud owner of a new powerful machine, I took up the revamping and here you go – the new CSS Sorter.

What did I fix:

Fixed a bug, that removed the forward slashes in any URLs that are present in CSS.
Added new ways to input CSS files. Now you can either Copy & Paste your CSS code or Upload a CSS File or Enter an URL which contains a CSS file.
Redesigned the user interface.

I have few more plans also in my mind to develop. Hopefully I’ll release those soon.

Disclaimer: I would recommend you to take a backup of your CSS file, in case this tool mess up your CSS file after processing. But if you notice any bugs, please let me know so that I’ll fix it.

Best Linux platform for Web and Java development?

Veera — Thu, 21 Jan 2010 13:42:04 +0000

I have been a Windows user ever since I started using computers. Be it my school, college or work – I have never used Unix / Linux for actual development work. Even though I have coded few lines of Perl in Unix, I don’t consider that as actual programming. Linux – sorry I just installed one flavor in my laptop and then forgot about it!

So, why am I talking about Linux platform now? Well, I’m thinking of building a new PC some time soon and along with that I’m planning to switch to Linux. But I don’t have much knowledge about the several linux platforms, available out there. So, that’s why I’m reaching out to you.

Choosing a ‘good’ Linux distribution for Web and Java development:

Here are my requirements:

I need the LAMP environment – something like XAMPP in Linux.
I need Java Development environment – Netbeans or Eclipse or any other IDE.
I need a good light-weightText Editor - something like Notepad++.
I need Firefox – and all other web developer extensions.
I need GIMP, Subversion and a Media Player (Winamp?), a PDF reader and a FTP Client (WinSCP?).

Those are my basic set of requirements as of now. Please suggest a good Linux distribution which is capable of satisfying my needs above.

Stockr – a Firefox extension for day traders of National Stock Exchange (NSE), India.

Veera — Mon, 07 Dec 2009 18:13:42 +0000

Stockr is an Firefox extension, developed by Veera Sundar. This extension is targeted to the day traders of Indian Stock Market, NSE (a.k.a. Nifty) for helping them to keep track of their profit/loss position on a given day.

If you are more into the development and wants to know how this extension was developed, you may check my other post – Developing a Firefox Extension – The Complete Tutorial, for more details.

Can I use this extension?

If you do day trade in National Stock Exchange of India, the answer is YES! If you have a demat account with ICICIDirect.com, then you may find this extension helpful. Because this extension gets the stock prices from ICICIDirect.com website and make use of the stock codes from that site. For example, ICICIDirect.com uses the code SUZENE for Suzlon. So, its highly recommended to use the ICICIDirect.com’s code convention while using this extension. If not, this extension might not work as expected.

You can find the ICICIDirect.com’s code for all stocks here (it’s a pop-up) : Find Symbol for Stocks in ICICIDirect.com

How do I use this extension?

Download Stockr from Firefox’s Addons Gallery and install it.
After restarting Firefox, you may see a text label ‘stockr’ at the Firefox’s status bar. If yes, then the extension is ready for use.
Now right click on the stockr label and select Configure Stock.
Below dialog box will be displayed, where you can configure the stock details. Please note that the stock code in this screen is need to be get from ICICIDirect.com website. For example, here I’m entering SUZENE, which represents the Suzlon Enery.
After entering the stock details, press save and your information will be saved in the Firefox’s preferences. This ensures that even after you close and re-start Firefox, the stock details will be preserved. Click OK to close the dialog box.
That’s it. The configuration is done now. Now Stockr will fetch the latest value of SUZENE from ICICIDirect.com and will calculate the profit/loss based on the values you’d given and then updates the result in the status-bar. This process continues for every 5 seconds.
If you want to stop tracking, then right clock on the Stockr extension and then select Remove Stock.

What next for Stockr – the Road map

Here are the few things that I’m planning to do in the next few months on Stockr:

Add a proper and better error handling.
Functionality to track more than one stock at a time.
Ability to source the information from multiple websites to reduce the dependency on ICICIDirect.com.
Currently the extension uses JQuery for communication. Have to replace this with native AJAX calls, which may reduce the extension size considerably.
Some fancy, eye-catchy alerts when stock price reaches a particular value – this feature will bring back the JQuery into picture, again.

Questions/Suggestions/Complaints/Feature Requests

If you have any of the above, then don’t have it yourself. Feel free to leave a comment, so that I’ll be able to respond A.S.A.P.

Developing a Firefox Extension – the complete tutorial!

Veera — Mon, 07 Dec 2009 09:03:10 +0000

I hope that you have got a basic idea about the Firefox extension development from my previous posts. In this post, lets actually start developing a simple Firefox extension.

What are we going to build?

We are going to build a extension for helping the people who are doing the day trading in NSE of Indian Stock Market. The user can use our extension to monitor her profit/loss on a given day, after configuring the stock details that she bought. We will be using ICICIDirect.com for getting the stock prices. Lets name this extension as Stockr (sounds web2, isn’t it? ).

Important: The Firefox extension that we are going to build in this post is already uploaded to Firefox’s gallery – Stockr extension. By downloading the extension, you get to run it and you get the source code too. So, I recommend to download the extension and extract it to get the source code, which will help you in understanding this tutorial better.

Summary of steps to build a Firefox extension

Create a new Firefox profile (optional, but recommended).
Create the folder structure for the Firefox extension.
Decide on the extension name and edit the install.rdf with the extension descriotion and author information.
Create your extension user interface as a XUL file, with depended JavaScripts, if any and put them under the chrome/content/ folder.
Link your extension with the Firefox UI by editing the chrome.manifest file.
Test your extension and edit if necessary (recursive step).
Bundle your extension and distribute.

1. Create a Firefox profile

By creating a new Firefox profile, we are making sure that the default Firefox profile is not affected due to our development activities. At any time we can switch back to the default profile, if we want to use Firefox for just browsing. Off course, you can continue the extension development with out creating a new Firefox profile. It will do no harm. But it is recommended to have a development profile. You can check my last article to know more about Firefox profiles and how to create a new one.

2. Firefox extension – Folder Structure

If you are familiar with Java web applications, you must be knowing that each application follows a certain folder structure. Similar to that, there is a folder structure for the Firefox extension also which tells about how things are organized and what are all the mandatory files to be present in an extension. You can create these files anywhere in your system (C:\dev\ff\stockr, for example). For our Stockr extension, the folder structure looks like:

stockr\
        install.rdf
        chrome.manifest
        chrome\
                  content\

3. Edit install.rdf for extension description and installation info

This is an important step. By editing install.rdf file, you are telling the Firefox about the name of your extension, a description, upto what Firefox versions your extension is compatible, who developed it, etc, etc. If there are any errors in this file, then there are chances that your extension will not be properly installed. Now open your install.rdf file, and copy the below lines into it.



  
    stockr@veerasundar.com
    1.0
    2

    
    
      
        {ec8030f7-c20a-464f-9b0e-13a3a9e97384}
        1.5
        3.5.*
      
    

    
    Stockr
    NSE (India) Stock price tracking extension.
    Veerasundar
    http://www.veerasundar.com

Important: For your extension, be sure to change the value stockr@veerasundar.com to a different one. This is the unique id for each Firefox extension and it should be in the form of an email address (need not to be a real address). And you can edit the other information like extension description, etc. I hope no explanation is needed there.

Another notable setting here is the which tells the maxium version of Firefox compatible with your extension. I’ve set it as 3.5.* so, my extension is compatible with Firefox 3.5.1, 3.5.2, …

4. Create the extension UI using XUL

Now create a new file stockr-ui.xul isnide the directory stockr/chrome/content/ and copy the below lines into it.




	
	

	
		
			Stockr

As you can see in the code above, we are creating a overlay element. You can place the overlay element over the top of Firefox UI. Then inside, we are defining a statusbar element with the id = “status-bar”. This is the ID of Firefox’s statusbar. So our extension UI will be attached to the standard statusbar.

You can modify these elements in a similar way you modify any other HTML elements using JavaScript. For example, we have defined a element with an ID stockr-display. So, from my JavaScript, I would be getting this element as document.getElementByID and then I’ll be modifying the content the usual way as how I do it for a HTML element. To make things clear, lets look at the JavaScript code, too. Blow are the contents of the stockr/chrome/content/stockr-script.js, which we had already included in our stockr-ui.xul file.

var DO_STOCK_TRACKING = true;
var tickerTimer;

function Transaction(stockCode, boughtPrice, numOfShares){

	// attributes
	this.stockCode = stockCode;
	this.boughtPrice = boughtPrice;
	this.numOfShares = numOfShares;

	// methods

	// fetch the latest price of this stock from ICICI site and returns it.
	this.getStockCurrentPrice = function(){

	},

	// return the profit/loss position as a formatted string
	this.refreshTransactionPosition = function(){

		if(!DO_STOCK_TRACKING){
			return;
		}

		var SRC_URL = "http://getquote.icicidirect.com/trading/equity/trading_stock_quote.asp?Symbol=";
		var queryString = SRC_URL + this.stockCode;

		var panel = document.getElementById('stockr-display');
		var statusImage = document.getElementById('status-image');
		statusImage.src = "chrome://stockr/content/ajax-loader.gif";

		$.get(queryString, function(data){

			var filteredData = data.substr(data.indexOf("PRICE"), 120);
			var currentPrice = parseFloat(filteredData.match(/[\d\.\d]+/));

			var priceDiff = (currentPrice - boughtPrice)*numOfShares;

			// now round the price difference
			priceDiff = Math.round(priceDiff * 100)/100;

			var position = "";
			if(priceDiff < 0){
				position = stockCode + " : " + priceDiff;
				statusImage.src = "chrome://stockr/content/down.png";

			}else{
				position =  stockCode + " : " + priceDiff;
				statusImage.src = "chrome://stockr/content/up.png";
			}
			panel.value = position;

			// set the timeout for next data refresh
			tickerTimer = setTimeout("stockr.refresh()", 10*1000);
		});

	}
}

// the stock variable
var tx;

var stockr = function(){
	return{
		init: function(){
			var panel = document.getElementById('stockr-display');
			panel.value = 'Stockr';
			panel.tooltiptext = "Right click and add stock to start monitoring";
		},

		addStockCode: function(){

			var stockCode = prompt("Enter the stock code: (from ICICIDirect.com) ");
			stockCode = stockCode.toUpperCase();
			var stockPrice = prompt("At what price did you buy " + stockCode + " ?");
			var numOfStocks = prompt ("How many " + stockCode + " did you buy?");

			tx = new Transaction(stockCode, stockPrice, numOfStocks);
			DO_STOCK_TRACKING = true;
			this.refresh();
		},

		clear: function(){

			DO_STOCK_TRACKING = false;
			clearTimeout(tickerTimer);

			var panel = document.getElementById('stockr-display');
			var statusImage = document.getElementById('status-image');
			statusImage.src = "chrome://stockr/content/none.gif";
			panel.value = 'Stockr - NSE Stock Tracker';

		},

		refresh: function(){
			tx.refreshTransactionPosition();
		}

	};
}();

window.addEventListener("load", stockr.init, false);

A lot of code, isn’t it? Anyway, I’m not going to explain it line by line, since mostly it is the business logic. Just go through the function refreshTransactionPosition() as it contains core logic of fecthing new stock values and updating it on the UI. If you have any doubts/questions, ask it in the comments. I’ll try to clarify.

Important: My JavaScript code make use of the JQuery library. So, in order to run this script, you may need to place the JQuery libary under the folder stockr/chrome/content/.

5. Linking our extension with Firefox UI

Now we are so close to complete. In this step, we will link our extension UI with the Firefox UI so that when Firefox loads, it will also show our extension over the status-bar (remember stockr-ui.xul, where we attached our panel to status-bar?). Now open the chrome.manifest and copy the below lines into it.

content stockr chrome/content/
overlay chrome://browser/content/browser.xul chrome://stockr/content/stockr-ui.xul

Whoa! Finally, a file with just two lines in it!! Okay, Jokes apart.What we are doing in this file is we are informing the Firefox to draw our extension UI over the browser UI. In our stockr-ui.xul, we have attached the extension to the status-bar. So, when Firefox loads, our extension UI will be sitting quitely on the Firefox’s status-bar.

6. Testing our extension

The next step is to, obviously, testing our extension. We need to tell Firefox to load/install our extension. To do that, follow these steps:

In Windows, navigate to your Firefox’s profile directory. In its a default profile, then usually it is : C:\Documents and Settings\user_name\Application Data\Mozilla\Firefox\Profiles\e7rhpqb4.default\
Now open the extensions folder (create one, if there is none!).
Create a text file in the name of your extension unique id (which we gave it while editing install.rdf file). So, for our extension, it will be stockr@veerasundar.com.
Now enter the full path of your extension location. i.e. C:\dev\ff\stockr inside the file and save it. This acts like a shortcut for the Firefox to navigate to this folder and load the extension.

After done the above, re-start the Firefox and Bingo! There is our first extension running successfully (if you did every thing right!).

7. Bundle and Distribute

The FINAL step. Bundle your extension files, which is under C:\dev\ff\stockr\and save it as a zip file – stockr.zip. This is our final deleivarable. You can distribute this to any person who is using Firefox. You can even upload it to Firefox’s extension gallery, to share it with the world!

Important: The Stockr extension is already uploaded to Firefox’s galley and available for download.

So, with that we come to the end of this tutorial. I hope that you liked it, as I did. Do share your thoughts and questions (if any). I’ll try to clarify it.

Join the professional testking 642-812 web development course to become expert web developer. Download testking 642-902 tutorials and testking 220-701 study guides to learn how to develop firefox extensions using java script technologies.

Notepad or IDE – What’s your preference?

Veera — Mon, 30 Nov 2009 17:56:04 +0000

Lately, I read an article, which talked about Microsoft developers preferring text editors for application development, instead of an visual IDE. It’s surprising to see this kind of statement coming from developers, whose company is in the business of making Visual IDEs for years. Anyway, its personal preference, rather than the company’s.

If you ask about my preference, I would say that I prefer both an Text Editor and an Visual IDE. Since I code in HTML/CSS and the Java Servlets/JSPs, its needed to have both versions of development tools at my system. For HTML/CSS, I can’t trust an IDE, since it will bloat my source code with unwanted tags and styles. And for Servlets/JSPs, I can’t risk my productivity with an text editor.

But that scenario applies only when I’m at my office. At home, I’ll always prefer to use an text code editor, such as Notepad++. The advantages, if you ask, text editor saves me lots of computer memory, allowing me to remember the Java API/CSS style properties at my finger tips, allow me to focus only on the coding and nothing else, etc, etc. Even my Editor Notepad++ comes with an Compile/Run option, so I don’t even need to use command line for running my applications.

Its time to hear from you!

Note: There is a poll embedded within this post, please visit the site to participate in this post's poll.

Good news for GIMP users : GIMP 2.8 supports single window mode!

Veera — Mon, 21 Sep 2009 01:49:28 +0000

I’ve been using the GIMP application for more than 4 years now. GIMP is the best free alternative for the commercial Photoshop that I could find in the market.GIMP provides more or less the same feature that Photoshop provides, but free of cost. Even though I’m highly satisfied with GIMP, the one concern I’d was that the GIMP user interface can’t support single window mode. I.e. if you open GIMP application, the Toolbox will be in it’s own window, the main workspace will be in it’s own window and the every other dialog box you open in GIMP will take it’s own window, thus resulting cluttered taskbar and hard to manage multiple windows. The current GIMP UI looks something similar like this.

Clustered user interface of GIMP

But, here’s the good news for the GIMP users who are fed up with the non-convenient UI – GIMP 2.8 comes with the support for single window mode. Yes! you can switch between multi and single window menu easily in GIMP 2.8. The prototype of GIMP 2.8 single window mode can be seen below:

Single window mode enabled in GIMP 2.8 : Screenshot

Apart from the single window mode, there are several other user interface enhancements also planned for the next version of GIMP. Some features include comparing multiple images, thumbnail of opened images, improved pan and zoom. It is expected that all these features will be part of the GIMP 2.8 version. Even though the release dates for 2.8 version is not known yet, I hope that the GIMP team will release it soon.

A Wiki in just one page

Veera — Mon, 13 Jul 2009 18:14:39 +0000

What do you do for organizing your notes? Do you use Notepad? Or OneNote? Or even the physical sticky notes !? What ever mehod you follow, it is always tough to effectively manage the bits and pieces of information. If you google for a tool to manage your notes, you will be flooded with the n-number of tools out there in the web. If you are smart enough, you can even build your own tool for notes organization (I tried to build one, which is still in the development stage).

Recently I came to know about an interesting tool to manage/organize the notes. The best part is that the tool is just a single HTML page.

TiddlyWiki – Single HTML page for organizing notes

As taken from TiddlyWiki’s home page:

TiddlyWiki is a single html file which has all the characteristics of a wiki – including all of the content, the functionality (including editing, saving, tagging and searching) and the style sheet. Because it’s a single file, it’s very portable – you can email it, put it on a web server or share it via a USB stick.

Yup. TiddlyWiki is a single HTML file with all the Wiki-like features in-built. You can open a TiddlyWiki HTML file in any web browsers and you can work on it.

A TiddlyWiki page is made up of tiddlers which is nothing but the note that you want to save. You can add as many tiddlers as you want, edit existing tiddlers or delete them. TiddlyWiki provides an save option too for saving your modifications.

Since TiddlyWiki is free and Open source (the single HTML file has all the CSS/JavaScript), by using TiddlyWiki, you get to learn some good JavaScript coding and you get a free one page Wiki too! Download and experience TiddlyWiki and let me know what do you think about TiddlyWiki!

XAMPP – Apache, MySQL, PHP, Perl environment in Windows

Veera — Sat, 11 Jul 2009 17:46:52 +0000

Its kinda weird that I’e already blogged about changing the MySQL root password in XAMPP and changing Apache’s port number in XAMPP, but not a single post about what the XAMPP is. Well, this post will answer the question of what is XAMPP and why should we care about it.

XAMPP – the development environment for developers

To put it short – XAMPP is a easy to use web server package that comes bundled with Apache, MySQL, PHP and Perl. XAMPP helps the developer to easily setup the PHP/Perl development environment. So, when you download and install XAMPP in your Windows machine, XAMPP installs all the above mentioned packages and configures them properly, so that you can start using the server packages out of the box. As taken from the XAMPP’s home page, the application supports following feature.

Apache HTTPD 2.2.11 + Openssl 0.9.8i
MySQL 5.1.33
PHP 5.2.9
phpMyAdmin 3.1.3.1
XAMPP CLI Bundle 1.3
FileZilla FTP Server 0.9.31

I came to know about XAMPP when I started learning PHP. That time, I was not comfortable with setting up a PHP development environment. So, I needed a out of a box solution which XAMPP fits perfectly. Within the minutes after the XMAPP installation, I could run my Apache server and MySQL database with a sample website. As XAMPP provides a control panel window, starting/stopping services are just a matter of mouse click. Since then, I’m using XAMPP for all my web developments. I used XAMPP to develop Timelinr and using it for hosting my wordpress blog locally.

Watch out for security in XAMPP

And one important point about XAMPP is the security. Basically XAMPP is intended for development purpose, means that many security features are disable by default. For example, the XAMPP MySQL ‘root’ user do not have any password. So, if you are planning to use XAMPP in production environment, it is important that you fix all the disabled security features in XAMPP. Do not worry, XAMPP provides a tool for fixing the security, which I’ll be explaining in my next post. Meanwhile, you can check ouy my earlier articles How to change MySQL ‘root’ user password in XAMPP and How to change XAMPP server port which explains tightening XAMPP security.

Please do share your experiences with XAMPP, if you’ve already used it. If not, you can download XAMPP here and experience it.

Veera Sundar » Tools

Slidr – HTML5 app for making online presentations

Related Articles (System generated)

Codered – Less SPAM, More Code!

Related Articles (System generated)

CSS Sorter – Revamped

What did I fix:

Related Articles (System generated)

Best Linux platform for Web and Java development?

Choosing a ‘good’ Linux distribution for Web and Java development:

Most Popular Posts (User generated)

Stockr – a Firefox extension for day traders of National Stock Exchange (NSE), India.

Can I use this extension?

How do I use this extension?

What next for Stockr – the Road map

Questions/Suggestions/Complaints/Feature Requests

Related Articles (System generated)

Developing a Firefox Extension – the complete tutorial!

What are we going to build?

Summary of steps to build a Firefox extension

1. Create a Firefox profile

2. Firefox extension – Folder Structure

3. Edit install.rdf for extension description and installation info

4. Create the extension UI using XUL

5. Linking our extension with Firefox UI

6. Testing our extension

7. Bundle and Distribute

Related Articles (System generated)

Notepad or IDE – What’s your preference?

Its time to hear from you!

Related Articles (System generated)

Good news for GIMP users : GIMP 2.8 supports single window mode!

Related Articles (System generated)

A Wiki in just one page

TiddlyWiki – Single HTML page for organizing notes

Related Articles (System generated)

XAMPP – Apache, MySQL, PHP, Perl environment in Windows

XAMPP – the development environment for developers

Watch out for security in XAMPP

Related Articles (System generated)