Veerasundar

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!

What could go wrong with Twitter RT?

Veera — Sun, 12 Jul 2009 16:55:32 +0000

Even though I’m not a Twitter addict, I do use it sparingly for getting real time updates in the case of any breaking news. In fact, during the last Mumbai Attacks, Twitter proved to be a reliable news source by letting the people share the real time updates. Some people still believe that the Twitter updates helped the terrorists also to plan their move.

Coming to the point of this post, Twitter has a nifty feature called Re-Tweet (RT in short), where in a particular tweet from a twitter user can be repeated/quoted in your tweets. When you do a RT, the resulting twitter message may include the twitter user name of the original source of that message. The catch here is you can modify the RT message and the source twitter user name. I.e, if you are re-tweeting a message from user abcd, it is possible that you can remove @abcd from the RT message and you can put some other persons name instead of abcd. So, the RT message,

RT @abcd here is a not-so-good twitter message.

can be modified into,

RT @xyz here is a not-so-good twitter message.

So, when your twitter friends see your update, they could think that the message “here is a not-so-good twitter message” is said by @xyz but it is actually from @abcd.

What’s wrong with the RT?

So, what’s wrong with this? Well, if any one decides to damage your image, they can simply RT any spam/vulgar messages with your twitter ID included, thus creating an impression that you said that message. By any chance, if that particular twitter message gets much attention, then there is a high possibility that many people could think that you actually said that message.

And there is no way to verify the source of the information. One possible solution is to take the RT message and do a search in the twitter user’s (mentioned in RT) profile to see whether the user actually tweeted the message or not (a good idea for a twitter app. any takers!?). Again, I doubt that how many people will take this pain to verify the message source.

I feel Twitter should consider adding a message source verification to all RTed twitter messages. What is your thought?

How to show your latest tweet in your home page?

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.

Google Image search introduces searching images with Creative Commons License

Veera — Fri, 10 Jul 2009 13:44:29 +0000

I always wanted to add some images to my posts to make them eye-catchy. But searching for a properly licensed image with no restrictions for commercial use was always a pain. Even though Flickr was little helpful, sometimes it failed to give me apt images.

Recently Google has introduced a new feature to search for creative commons licensed images in it’s image search engine. Using this features, the image search results can be filtered to show only the images which are allowed for commercial reuse and licensed with creative commons. To search for creative commons licensed images, go to Advanced Image Search page and then select the various license types for the Usage Rights option. Currently it is possible to search for the images, which are:

labeled for reuse
labeled for commercial reuse
labeled for reuse with modification
labeled for commercial reuse with modification

Why waiting!? Go experiment it.

Oh yes! It’s Google OS!!

Veera — Thu, 09 Jul 2009 14:31:10 +0000

The dust is not settled yet in the blogosphere after the ‘Google Chrome OS‘ storm. In fact, Google has made just the announcement of the web centered OS development, but people already started blogging like the operating system itself has got released. I read some posts talking about the features of Chrome OS, whether the OS supports some technology or not, etc, etc. To be frank, I was confused for a while that whether it was an announcement or an OS release. But, later it is confirmed that the news was just an announcement that Chrome OS is being developed and will be released in the 2010.

To me, there is nothing to surprise about this news. In fact, I (and the world) was expecting Google to take on Microsoft on operating system market. Because, Google has already done that in Office applications. It is Google Docs which made Microsoft to re-think their strategy on web based office applications. The success of Google made Microsoft to focus more on web based solutions (even though it couldn’t beat Google, the same way how other OSs couldn’t beat Microsoft in desktop market). Google has been mimicking the desktop applications with the online counterparts.

And for a company like Google, it is an natural tendency to acquire more web market share, because ‘web’ is where Google gets most of the revenue. Getting the web market share ultimatley means that pushing it’s Chrome browser to the masses. Pushing the web browser can’t be done in a large scale without having a operating system where Chrome browser comes pre-installed. So, here comes the Google Chrome Operating System with the bundled Chrome browser.

Are you seeing something similar, here? Yes! The same old Microsoft’s tactics to push the Internet Explorer to the masses. But with a difference. Windows wasn’t (won’t be?) open-sourced, but Chrome will be. And the advantage here is, well, the world will be working on developing/fixing/improving Chrome OS, instead of just the Google employees. As it will be open sourced, Google OS will be free which is a good thing.

And Google OS is going to be based on the Linux kernel, the chances of viruse threats will be minimal, which is a great thing. As Chrome browser has already proved it’s ability to use minimal resources and run fast, there is no doubt that Chrome OS also will repeat the history. But, I’m not an astrologer, I can’t guess how well the Google OS performance will be when it is released after one year.

But, still there are some concerns/open questions with a web centered operating system like Google Chrome OS.

How comfortable are you to keep your confidential information in a system which is going to be mostly coupled with te un-safe web out there?
will I be able to use the OS, even if I’m not connected to Internet?
How well the Google OS will be received in places such as India, where the bandwidth is still a major concern.
Do you trust Google with your information!?

Even though the secuirty measures will be there to ensure data protection in Google OS, still there may be some loop holes. And, data privacy will also be a big concern. Why go for the future !? Now itself Google is being questioned for it’s control of world’s data. With the introduction of yet another Google product to get more user’s data, I suppose data privacy may become a big issue.

It’s just the start. Lets wait and watch whether Google operating system lives up to the expectation or not. Do comment your thoughts about Google’s new Chrome OS.

How to change XAMPP server port?

Veera — Wed, 08 Jul 2009 12:22:04 +0000

These days, it is a common scenario that a web developer needs to use multiple web servers, all running at the same time. For example, an XAMPP server can be used to run the local Wordpress blog, while a JBoss server also needs to be up for testing a java web application or IIS server for serving your .Net app. In such scenarios, if two or more servers are trying to use the same port number, then the late comer will fail to get the port.

Take the case of XAMPP server. By default, XAMPP runs at the port 80, and IIS also use the port 80. So, you cannot run these two server at the same time. In order to avoid this issue, the XAMPP port can be modified to use a different number other the default 80.

Follow these steps to change the XAMPP server port number:

Stop the XAMPP server, if it is running already.
Open the file [XAMPP Installation Folder]/apache/conf/httpd.conf. As the names suggests, httpd.conf is the file which defines the properties of the Apache server, which the XAMPP is using.
Now search for the string Listen 80 (I’m assuming that your XAMPP was using the port 80. Otherwise, just search for the string Listen). This is the port number which XAMPP uses. Change this 80 to any other number which you prefer. (Sorry, you can’t use billion here, as only 65536 ports are supported by computers).
There is one more step to do. In the same file, search for the string ServerName. This options defines the server name of the XAMPP server, which includes the port number also. So, it is important to update this port number also.
Now save and re-start XAMPP server and you are done.

A Simple Web Quiz

Veera — Tue, 07 Jul 2009 14:18:14 +0000

Try this simple web quiz. I hope most of the questions are easy to answer. Anyway, I’ll be publishing the answer soon.

1. What is the name of the popular technique used by many websites/blogs in order to stop the automated access (or spam) to the web services?

2. Who invented XMLHttpRequest object (the basis for the AJAX communication), but not benefited from it (at least not as much as the other competitor)?

3. say true/false: Acid test is performed on browsers in order to measure the amount of frustration they cause to the end user.

4. web -1 is ‘Connection not available’; Web 1 is ‘Static pages’ ; Web 2 is ‘Dynamic pages (user genrated)’ ; Web 3 is going to be what ?

5. Name the indian startup (product name or company name ) which is emerging as an alternative to Google web office suite.

6. What advantage does the HTTPS provide over the HTTP?

7. Name the process which involves optimizing the websites for getting a better rank in search engines.

8. Which technology enables you to use a single identity across the internet? (For example, you can use your Google account to login to no-where-exists.com, if no-where-exists.com supports the above technology)

9. How does Google earn a lot of money (name the product) !? (what’s a web quiz, if it is not invloving a question about Google! )

10. Name the term which is used to refer the people who fund the startups?

Please leave your answers in comments.

– Image credit: http://www.flickr.com/photos/-bast-/

Are you following these simple best practices in your web design? [part 1]

Veera — Mon, 06 Jul 2009 17:07:26 +0000

From my work experience and from reviewing other developer’s HTML mark-ups, I’ve seen many good as well as bad code. Most of the code I reviewed was written by Java developers, because of which the code may not confirm to the standards/best practices in HTML coding. Since the Java developers are very good at server side programming, but do not have much awareness about HTML good practices. In this post (and the forthcoming posts), I tried to summarize some of the simple to follow good practices, that if followed can really improve the quality of your HTML code. I’ll be happy if you can share your comments/tips/best practices via comments.

Stop Using Tables for Page Layout:

This is the mistake I’ve seen many developers make (even the designers who are starting with web designing). They simply create a BIG table with three rows to contain the header, content and the footer. And then, according to the page layout, either they will have inner tables, or they will use the combination of colspan and rowspan. If you are auto generating the HTML code from a WYSIWYG editor, then it is most likey that your HTML code is bloated with table based design and unnecessary HTML tags. But this style of design is so old and not recommended.

Tables should be used only for presenting tabular data. After all, that’s why the tables are for. For page layout, instead of tables, HTML DIV tags and CSS can and should be used. What ever we can do using table based design can be achieved using DIV+CSS combo and in a cleaner and better way.

If you look at the modern web sites, most of them has the almost similar structure – header, content, side bar and a footer. This structure can be easily constructed using a simle HTML and CSS combination.

Above code is just the barebone structure of a website. As you can see, we’ve defined the page sections such as header and content using HTML DIV tag. Now, lets apply the formatting for these tags using CSS styles.

The positioning and the height properties for our page are now defined thru the CSS. This approach gives us the following advantages.

The content is separated from the presentation.
The code is cleaner and more semantic.
It confirms to the web standards.
Maintaining this code is easy.
Site will render perfectly even in mobile browsers which may have limited support for tables.

I hope now you know the good things of table-less design. In my next post, I’ll exploring some other good practices also.

– Image credit : http://www.flickr.com/photos/eelkedekker/

20+ Firefox Add-ons for web developers

Veera — Sun, 05 Jul 2009 11:03:42 +0000

It is no doubt that Firefox is the best browser for web development. Thanks to the developer community around the world who develop the most useful, innovative Firefox add-ons. With add-ons, testing and debugging your web application is just swift. The one reason which keeps me sticking to Firefox browser is the different kind of web developer add-ons that are available. Below is a list of 20+ add-ons that every web developer must have in their Firefox browser.

Firefox add-ons that helps you design your pages better:

A list of widely used add-ons that can dramatically improve your designing productivity.

#	Add-on	How this Add-on can help you
1	Pencil	Pencil is a free and opensource tool for making diagrams and GUI prototyping that everyone can use. Built-in stencils for diagraming and prototyping Multi-page document with background page On-screen text editing with rich-text supports Undo/redo supports
2	MeasureIt	Draw out a ruler to get the pixel width and height of any elements on a webpage.
3	Colorzilla	This is one of my all time favorite. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. Also it has the built-in color palatte for selecting to choose color themes for our websites.
4	Stylish	Stylish allows easy management of user styles. With Stylish, you can define your own styles for the websites you use. Even there is a repository userstyles.org available where you can download the pre-built styles.
5	Pixel Perfect	Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML. By toggling the composition on and off, the developer can visually see how many pixels they are off in development.

Add-ons for your web application development/debugging:

#	Add-on	How this Add-on can help you
1	Firebug	One of the popular add-on among the web developer community. Let’s you to debug javascript, analyze DOM, edit and live preview your changes and lot more.
2	Web Developer	Similar to Firebug in popularity and usability, The Web Developer extension adds a menu and a toolbar with various web developer tools. .
3	JavaScript Debugger	A powerful JavaScript debugging environment for Mozilla based browsers.
4	Live HTTP Headers	Lets you to view the data that are sent in HTTP headers.
5	Tamper Data	Allows you to view/modify HTTP/HTTPS header data. Could be really useful for the AJAX developers.
6	Foxy Proxy	FoxyProxy is a Firefox extension which automatically switches an internet connection across one or more proxy servers based on URL patterns. Put simply, FoxyProxy automates the manual process of editing Firefox’s Connection Settings dialog. Proxy server switching occurs based on the loading URL and the switching rules you define.

Add-ons for validating your page:

#	Add-on	How this Add-on can help you
1	HTML Validator	As a Tidy based tool, HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The extension can validate the HTML sent by the server or the HTML in the memory (after Ajax execution).
2	Page Validator	Validates a page using the W3C Markup Validation Service. Adds an option to the right-click context menu and to the Tools menu to allow for easy validation of the current page. Opens the results in a new tab.
3	CSS Validator	Validates a page using the W3C CSS Validator. Adds an option to the right-click context menu and to the Tools menu to allow for easy validation of the CSS of the current page. Opens the results in a new tab. Will only work on pages that have a CSS file associated. For example it will work with http://www.w3.org/ as the URL has a CSS file.
4	Total Validator	Provides true HTML validation (HTML 2.0 to XHTML 1.1) using the official DTDs, plus added attribute checking. So you no longer have to put up with the limitations of the W3C validator (no type checking) and tools like HTML Tidy which interpret the standards incorrectly (they don’t use the official DTDs).
5	Coral IE Tab	This is an enhanced version of IE Tab which enables you to use the embedded IE engine within Mozilla/Firefox. It is not only a great tool for web developers, like the old IE Tab, but also an useful tool for normal users, since you can easily switch to IE when you meet incorrectly rendered web pages in Firefox.

Misc Add-ons for enhancing and improving your website:

#	Add-on	How this Add-on can help you
1	Page Speed	Page Speed is a Firefox plug-in, integrated with Firebug. After installing Page Speed, the tools adds two menus to the Firebug window – Page Speed and Page Speed Activity. Page Speed tool gives you several suggestions on how to speed up the page loading time and Page Speed Activity acts as a recording tool for the network activity of your web pages.
2	YSlow	YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.
3	Greasemonkey	Allows you to customize the way a webpage displays using small bits of JavaScript. Hundreds of scripts, for a wide variety of popular sites, are already available at http://userscripts.org.
4	FireFTP	Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SFTP, SSL encryption, search/filtering, integrity checks, remote editing, drag & drop, file hashing, and much more!
5	Screengrab	It will capture what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images – either to a file, or to the clipboard.

** Please check the add-ons compatibility with the currest version of Firefox you have, in the respective add-on’s home pages.

Downloadable fonts in Firefox 3.5

Veera — Sat, 04 Jul 2009 18:59:46 +0000

With the release of Firefox 3.5, Mozilla has brought lot more cool stuffs to both the web developers and end users. For the end user it’s faster and cleaner browser. For the web developer, a improved JavaScript engine, HTML 5 supports and few more. One of which is the download-able fonts support, introduced by Firefox 3.5.

The background:

One of the challenge the web developers around the world often face is the availability of the custom fonts that they use in their websites. Usually, the end user may not have installed any fonts other than the default/standard fonts provided by their operating system. This restrict the web designers to use only the standard fonts in their web sites.

Firefox 3.5 brings in a cool stuff that enables the web designers to use whatever font they wish to use. Now the fonts used in a website need not to be installed on the client/end user’s system. The browser will just make a request to the remote site that hosts that custom font, download it and it will use that font.

Specifying download-able fonts in your style sheet – @font-face:

The CSS tag you use to specify the remote font is @font-face. This takes two parameters: font-family: the font name and src: the remote URL where the font is hosted. See below for a sample use of this tag.

@font-face {
font-family: "MyCustomFont";
src: url("http://mysite.com/fonts/MyCustomeFont.ttf");
}
p { font-family: "MyCustomFont", verdana }

Above code specifies a remote fonr named MyCustomFont and the URL to find that custom font. Then it uses the downloaded font in other style definitions.

Local fonts also can be used along with Remote fonts:

It is possible to use both local fonts that are installed in user’s computer and the remote fonts that are downloaded via @font-face tag.

@font-face {
font-family: SomeFont;
src: local("SomeFont"),
url(http://somesite.com/SomeFont.ttf);
}

The above code first looks for the SomeFont in user’s computer. If not found, it will then make a request to the URL given in the @font-face’s url option and will download the font for further use.

With the availability of this downloadable font feature, it’ll be sure that website typography will improve a lot. Please feel free share your thoughts on the @font-face tag support in Firefox 3.5

Veerasundar

A Wiki in just one page

TiddlyWiki – Single HTML page for organizing notes

Related Articles

What could go wrong with Twitter RT?

What’s wrong with the RT?

Related Articles

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

XAMPP – the development environment for developers

Watch out for security in XAMPP

Related Articles

Google Image search introduces searching images with Creative Commons License

Related Articles

Oh yes! It’s Google OS!!

Related Articles

How to change XAMPP server port?

Follow these steps to change the XAMPP server port number:

Related Articles

A Simple Web Quiz

Related Articles

Are you following these simple best practices in your web design? [part 1]

Stop Using Tables for Page Layout:

Related Articles

20+ Firefox Add-ons for web developers

Firefox add-ons that helps you design your pages better:

Add-ons for your web application development/debugging:

Add-ons for validating your page:

Misc Add-ons for enhancing and improving your website:

Related Articles

Downloadable fonts in Firefox 3.5

The background:

Specifying download-able fonts in your style sheet – @font-face:

Local fonts also can be used along with Remote fonts:

Related Articles