Site Moved

This site has been moved to a new location - Bin-Blog. All new post will appear at the new location.

Bin-Blog

Rest from Blogging

I was not able to blog for the last week - I even had to break my sacred 'at least one post every three days' rule. This was because I was sick - very sick as a matter of fact. I was bedridden for the last one week. Now I am alright - although a bit weak.

I will be continuing the Web Development in Linux series from the next post. I am not creating a serious post now. Although my body is alright, my brain is still unsettled.

Filed Under...

Read More...

Browsers for Web Development in Linux

A good browser is an essential component for web development. Fortunately, there is no shortage of browsers in Linux. Forbes have a list of Linux browsers in the article titled Browsing The Web On Linux. The article is so old(2002) that it don't mention my favorite browser - Firefox. Firefox is, without doubt, the browser of choice in all platforms that it supports.

But this is not a post to extol the virtues of Firefox. This is a post to explain which browsers to use when developing web sites in Linux. Let us start with Firefox

Firefox

Many people have strongly recommended using Firefox rather than IE for web development. Some of the main reasons for this are...

Standards
Firefox supports Web Standards better than most other browsers. Targeting Firefox will encourage you to use better code.
Build-in Development Tools
Some helpful tools for JavaScript/DOM development is available with Firefox - like JavaScript Console and DOM Inspector. If these are not enough for you, you can use extensions to enhance Firefox.
Extensions
The best selling point of Firefox is perhaps the availability of hundreds of free extensions. Some must-have extensions for web development...
  • Firebug - Extremely useful if you are using JavaScript. This is a more powerful JavaScript console - much better than the default one provided with Firefox. You can filter out unwanted error messages like CSS parsing errors, XML errors, errors for other domains etc. You can also inspect html elements. Also included is a JavaScript shell that executes your commands in the context of the current page.
  • Web Developer Extension - This extensions have too many features to be listed here. Some of the most useful features are...
    • Disable styles, JavaScript, Cache, Images etc.
    • Outline block elements, tables, divs...
    • Edit the CSS of the current page in real time.
    • View/Edit/Delete Cookies.
    • Add external tools - Editor/Validators etc.
    • And more..
  • Venkman JavaScript Debugger - A powerful debugger for JavaScript. Unfortunately, it is not very easy to use and require some getting used to before one can use it to its full power.

Lynx

Lynx is a text browser. Open a terminal and type the command...

lynx http://www.openjs.com/

This is how the lynx browser works - it has no graphics - the interface is completely in text - this is very useful for accessibility testing, SEO, usability testing and more.

Accessibility testing

Looking at your site with lynx browser will show you how people will lesser browsers are using your site. You will see the importance of skip links, shortcut keys etc.

SEO

Lynx shows you how a search engine like google sees your page - without the pretty graphics - without the flash animations - without javascript.

Usability

Is your site useable even without the javascript menus? Without the flash navigation interface? Take lynx for a spin and you will find out.

Read More...

Web Development in Linux

Linux is a better platform for Web Development than Windows can ever hope to be. Most of the thing you would need in a development server like a Web Server, Database Server, PHP, Perl, Python, Ruby etc. are already present on any decent distribution. Linux has browsers(Firefox,Konqueror,Lynx,etc.), design tools(Gimp), editors(Quanta Plus,Emacs), programming tools(CVS,Cervisia) - in short, everything you need for web development.

LAMP

Since I have decided to put all the JavaScript content on OpenJS, I have limited topics to chose from when I make a new post. So I have decided to write about Linux. For those who are wonder how Linux could be related to Web Development, I have just one word for you - LAMP. LAMP or Linux, Apache, MySQL, PHP/Perl/Python platform is one of the most popular platforms for web development. And as the first word in LAMP, I will talk about Linux before moving on to the rest.

My System

I have been using Linux for web developing for over an year now. Currently, I am using Fedora Core 3(yes, I know it is old), KDE with Konqueror, Apache 2 and PHP 4. I use Quanta Plus and Kwrite as my editors. Firefox is my browser - on both OS. gFTP or Konqueror could be used to upload your files(I prefer gFTP).

Editors

Quanta Plus is my favorite editor - it has all the features I look for in a editor...
  • Syntax Coloring The syntax highlight is comprehensive and understandable. Since Quanta uses the same editor component as Kwrite, both have the same syntax highlight - making it easier to switch between the two. Quanta makes it possible to have different syntax highlighting for PHP, HTML, CSS and JavaScript in the same file. Many good editors fail at that.
  • Some WYSIWYG components The editor must be able to show the file browser for link, image settings etc. in the WYSIWYG way. Quanta has WYSIWYG components for many things like images, table creation, link addition etc. which makes programming much easier.
  • Comprehensive Help Instant help is available for all HTML tags within the software. PHP functions, CSS properties and JavaScript functions are also supported.
  • Auto-Completion Shows all the variables/functions etc. declared earlier in a dropdown box when you type something. For example, if you have already used a variable called '$my_very_long_variable_name', and you type '$my', a dropdown will appear with all the variables starting with the word '$my' - with our long name. Also when you begin a tag by typing '<' a dropdown appears with all possible tags. This is a very useful feature.
  • Code Folding Saves screen real estate by allowing you to hide code inside a { } block, or hide a full table, div tag. This feature shows some random bugs on my system - but that could be fixed in the current version(I use a slightly aged version).
  • Design View I have not used this as of yet - I have a irrational hate for all things WYSIWYG ;-). Anyway, this will be useful for everyone who have been using Dreamweaver.
  • And More... Preview, DTD Chooser, Spell Checker, Integrated CVS support(Cervisia), Project Management, Customizable Keyboard Shortcuts and much more.

I use Kwrite for smaller works - ones that don't need the advanced features that are present in Quanta. I use Kwrite like I used to use notepad in Windows - for small changes. Kwrite is more useful in these cases as it has a faster loading time when compared to Quanta Plus.

Other HTML aware editors...

General Editors...

  • Eclipse
  • Emacs
  • Vim
  • Kate/Kwrite
  • Scite
  • Etc.

Browsers will be the topic for the next post about web development in linux.

Filed Under...

Read More...

OpenJS Backend

I have already talked about my new venture - OpenJS.com. I created the design and the backend myself. I thought long and hard about using third party tools like Mambo or Drupal or even WordPress. But at the end I decided to make one of my own.

My Own CMS

The advantages of using a custom CMS tool are many...

  • You are very familiar with the underling code.
  • It is easier to implement a new feature than in a third party tool.
  • Better suited for my personal use - I can create all the features that I want the most.
  • No known vulnerabilities ;-). Nobody knows the vulnerabilities of my system(not even me). They don't know where I store my configuration. They don't know where my admin area is. So there is a small security advantage.

It is the third point that convinced me to create a custom CMS tool. I could not create a page with a lot of JavaScript content in WordPress - it is primarily aimed at creating content. Yes, I know that Dustin Diaz does it. But could you include a JS file for just one post? Could you attach a CSS file to just one page? Could you write some JavaScript code in the HEAD section of a content page? I don't know - maybe you could. Maybe there is a plug-in that could do everything I said. But I know one thing - I could do it all using my system.

Another more pressing problem is content entry. I will have to depend on a Web based WYSIWYG editor to create my content. I hate WYSIWYG editors - I hate WYSIWYG editors - even if they have a lot of features. I don't have to tell you how much I hate an online WYSIWYG editors with just limited features. I don't mean that I hate using them - they are very useful for people who don't know HTML - but there are very limiting for a web developer.

Yes, I know that I can key in the HTML code from these editors - but I want more. I want my editors - I want Kwrite. I want Quanta Plus. I want syntax highlighting, auto complition and more. I want all the features available in my desktop editor.

So now I have a backend that don't store the contents of a page in the Database. All the modern CMS does that - but not mine. My CMS tool stores all the details of the page - like title, description etc., in the database but the actual content is in a file - so I could use a editor when editing the file.

So I have most of the advantages of storing the data in the Database - like easier retrieval of data from other page - like for creating the RSS feed for the site - and still keep the advantages of a file based content system. It is a bit clumsy - having to juggle the static files and the dynamic backend, but I got what I wanted.

Third Party Tools

But I have to admit that there is many advantages to using a third party tool...

  • You can save a lot of time by using a already existing system.
  • Bigger tools will have a huge community that will create plugins, templates etc. that you can use.
  • More quality and features - the products are the result of years of coding and upgrading.
  • More stable - most of the vulnerabilities it had have already been found and fixed.
  • And more...

Have you ever encountered a similar situation? How did you solve it? What do you think of my decision - good or bad? Why?

Filed Under...

Read More...

Default Action for an Event

There are many occasions when you have to override the default action of an event. For example, when a link is clicked, you want a popup to open(desired action) rather than going to the the page in the href attribute(default action). I will try to find the best way to do this.

Uses

This is most used in occasions like..

  • Opening a popup
  • Validating a form
  • Confirming a delete
  • And More

Solution

To see the detailed analysis of different methods to do this, take a look at the article 'Prevent the Default Action for an Event' at OpenJS.com. The final solution is given here....

if(!e) var e = window.event;

/* ... whatever ...*/

//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = false;

//e.stopPropagation works only in Firefox.
if (e.stopPropagation) {
 e.stopPropagation();
 e.preventDefault();
}

Filed Under...

Read More...

Hyperlink 2.0

The latest invention from the Web 2.0 world - Hyperlink 2.0. Some days ago, I saw a post on The Daily WTF on this topic. It was a noble attempt - but did not quite hit the target. So I decided to have a go at it myself.

See Demo

This script is sooo Web 2.0(it is so Web 2.0 that I think that it is really Web 2.5). It works perfectly if there is no javascript(Graceful degradation). As a matter of fact, it works better if there is no javascript. Can you think of another Ajax app that works better if there no javascript? I can't think of one - this script is the first in that area.

Working

When a user clicks on a link, this script finds which page linked and then load that page using AJAX internally. Then it takes the contents of the <body> tag and replace the contents of the body tag of the current page with the new content. Thus we render the new page - without changing the URL.

For example, the page 'index.html' has a link to a page called 'next_page.html'. When the users clicks on this link, our script will use ajax to load the 'next_page.html' file internally - while showing a loading message to the user. Once the loading is complete, the script will extract the data inside the <body> tag of the 'next_page.html' page. Then it replaces the contents of the body tag of the current page with the new one.

Code

See the code for hyperlink 2.0(JS File).

This script uses the JX Ajax Library and the getElementsByClassName function.

See Demo

Problems

Just in case that there is anything wrong with your sarcasm detectors, let me make myself very clear. Do not use this method. I just provided this sample to make fun of the overuse/abuse of ajax we are seeing on the web. The main reasons why you should not use this script are given below...
  • Slower than the traditional way
  • No feedback - loading bars unavailable.
  • Breaks the Back button.
  • Users have no clue on which page they actually are - so they won't be able to bookmark the page.
  • Users will think that nothing is happening - when they click on the link and nothing happens.
  • And More...

Related Scripts

Filed Under...

Read More...

Best Blog Posts of the First Century

As you probably know, I have reached the 100 posts milestone. It is traditional to make a 'Best of 100' post at this point. So here it is - 5 best content pages and 5 best scripts...

Best Content Pages

A few mini-tutorials that many found useful.

AHAH(Asynchronous HTML over HTTP) - AJAX 2.0
AHAH or Asynchronous HTML over HTTP is a much simpler version of AJAX. Using AHAH approach in JavaScript you can display external XHTML pages inside your HTML page. The beauty of the script is that it is so very simple - the underling code is just twenty lines!
CSS Shorthand
CSS Shorthand is a method to compress multiple declarations into one declaration. Two or more related declarations can be compressed to form one easily readable declaration.
A Gentle Introduction to Ajax
The First part of a three part Ajax Tutorial. Also see the second part and the third part of the tutorial.
CSS Coding Style
I don't have to tell you the effect on readability when a big CSS file is created with the first style of coding - it will be impossible to find anything without wading thru the code for some time. On the other hand, the same task will be a piece of cake if the code is in the second form. So here, I am trying to make a coding style for writing CSS code.
SiteMaps - A New Technology from Google
Google came up with something new - a method in which webmasters tell the search engines which all files must be indexed, where it can be found, and how important it is. Till date, search engines index a site by scanning the html files for links to other files.

Best Scripts

I created many small functions - JavaScript, PHP, CSS, Perl and published it in this blog so that others could use it too. The best among these are given below...

XML Parser function for JavaScript - xml2array()
I have created a small function called 'xml2array()' that will take an XML document as the argument, parse it and return an associative array as the result. This array will contain the data of the XML file - which can be easily accessed.
sql2json() - Converts SQL Results to JSON String
sql2json() converts the result of the given SQL query to its equivalent JSON string.
Creating DOM in a much easier way
Everyone who have tried their hand at creating a DOM structure using the W3C method knows that it is not easy. It is a piece of cake using innerHTML. But when we try it using W3C methods like document.createElement, we will find that it takes ten times more time.
Dump() Function - Javascript equivalent of PHP's print_r()
The moment I saw the print_r() function of PHP, I fell in love with it. It is a very necessary function and I can't understand why no other language supports it. So I have ported the print_r function to javascript.
My Custom JavaScript Functions
Dustin Diaz have recently written an article on Top 10 custom JavaScript functions of all time. So I thought that I would write about all the functions on my common.js file.

Filed Under...

Read More...

100th Post

100th Post

An year after the first post, I have reached the 100th post milestone. So a best of 100 post is traditional - that will be my next post. But before that, my experiences with blogging...

My Reasons for Blogging

I listed number of reasons on why I started a blog in the first post. Over the course of time, the list was improved - some reasons were removed and some were added. This is the new list(in no particular order)...

Encouragement to create content
The blogger calender script was created for this purpose - to force me to sit down and write content. It succeeded it that goal - I am creating enough content to make a new site from it.
Improve my English
If you have been reading my blog for some time, you probably noticed that my English have a lot room for improvement ;-).
Help Others
I have received letters from many people saying that some of my posts were of great help for them - JSMin Compression, JavaScript Functions etc. are great examples.
Bring Traffic to my other sites
This blog is a great success in this field - whenever I added a new page to my main site, I announce it here. As a result, over 15% of vistors to Bin-Co comes from here.
Make Money
Unfortunately, this is one of the areas where I failed. Don't get me wrong - I make a good amount of money through AdSense - but very little of that comes from the blog. I am hoping this trend will end soon.

Some Stats

Some of the statstics associated with this blog...

Number of Posts
100 - but you already know that.
Average vistors per day
Around 50 - on Monday through Friday.
AdSense Money from the Blog till date
Very low - less than 5$ for the full one year.
Time Since starting the blog.
I started the blog on 31st March 2005 - that would make it 1 year and 1 month old.
Subscribers
17 Readers for my feed - data from FeedBurner.
Most Popular Post
I think it is AHAH(Asynchronous HTML over HTTP) - AJAX 2.0 - based on how many times this page was bookmarked in del.icio.us.
Regular Readers
No Idea - my guess is at least 17 - based on the feed Subscribers number. Google Analytics says that 30% of my visits are repeat visitors. If you are a regular reader, please leave a comment so I could have a rough estimate. It is a great encouragement to know that others are reading the blog.
Influence
Very Low - I have a 6 digit technorati rank. Must get this number up... eh, I mean down somehow.

Bottom Line

In the last year, I did something right and some things wrong. I have learned a lot on what to do - and even more on what not to do. I am hoping to reach the 200 post milestone using the lessons learned in this year - maybe my figures will be better then.

Till then, keep reading the blog and writing down a few comments(another area in which this blog is lagging).

Filed Under...

Read More...

Subscribe to : Posts