Saturday, October 1, 2011

Kindle'd!!!!! FIRED up Amazon

THE tablet computer has been the most talked about piece of technology since Apple launched its iPad in March last year.

Profitable and aspirational, that device sparked a rush from rival manufacturers eager for a slice of a new market.

This week it was Amazon’s turn, and the Kindle Fire looks set to be the first gadget to have a real chance of sales on the scale of the 50m the iPad is set to sell worldwide in 2012.

In fact, however, the two tablets are very different: where Apple’s device sells from $499 in America and £399 in the UK, the Kindle Fire will be just $199 – no Asian release details have yet been made public. The difference is down to the firms’ contrasting approaches: Apple seeks some profit up front, while Amazon may be losing up to $50 per device because it sees the Fire simply as a means to the end of selling digital music, films, apps and games. Analyst Gene Munster says: “Apple is monetising the hardware up front with a 30pc-plus gross margin on the iPad.”

In short, Amazon is not suggesting its tablet is simply a device – chief executive Jeff Bezos told technology blog TechCrunch that what he was launching was in fact “an end to end ecosystem”, offering consumers the opportunity to purchase huge amounts of content. In that sense, like the original Kindle, the Fire is an old-fashioned loss-leader.

Bezos, who is also Amazon’s founder, said the full-colour, touchscreen device, would be a premium product “at a non-premium price”, and called the new Fire “an incredible achievement”.

Certainly, no rival has managed to produce a device of the quality of the iPad for significantly less than Apple’s prices. When HP, however, decided to leave the tablet market, demand for its discounted TouchPad massively outstripped supply and demonstrated a huge public appetite for tablets at the right price.

Munster claimed the Kindle Fire’s 7in screen size put it at a disadvantage to the iPad’s 10in format. Amazon, however, has seen its older Kindle sell well because its similar small size makes it more portable.

For Forrester analyst Sarah Rotman Epps, Amazon’s tablet strategy is set to succeed. She praised the company’s approach, writing that “Amazon is competing on price, content, and commerce”.

While Rotman Epps concedes that “Amazon still lacks a convincing global strategy compared with Apple”, because the Kindle Fire will only be available in the US, she believes that “Amazon will sell millions of tablets, and the rapid-fire adoption of the Kindle Fire will give app developers a reason – finally – to develop Android tablet apps.”

But the company, crucially, is doing so not by competing with Apple directly. Amazon’s ambition is mass market adoption, leaving Apple with its traditional, massively profitable niche. It will be an uphill battle.

Blog referenced by Mr. Warman, Consumer Technology Editor

Wednesday, September 14, 2011

Facebook's new feature

Hi all,
Just laid my eyes on this fantastic article, about how facebook is going to outdo Google+. So here goes.

Friend Lists, of course, have been available on Facebook for years now. But most people never bother with them because they’re a total pain — scrolling through hundreds upon hundreds of friends to compile lists is just a chore without much immediate reward. But Facebook thinks this new feature will change that, at least for some users.

The feature, which I’ve been briefed on but haven’t gotten a chance to test out myself, works much as you’d expect. First, Facebook will generate a handful of lists automatically — one for your coworkers, one for people you attended school with, and one for friends who live within the same city as you. That’s a good start, and it’s also easy to make lists of your own. Facebook says that if you create a new list and add a few friends, the site will automatically suggest additional friends that it believes belong in the same list.

Finally, there’s one list, adorned with a star, that highlights your very best friends. Facebook won’t automatically suggest anyone for this list — the company thinks users will only want to include five or ten people, and that it’s best to leave it to users to choose them. And the list has a special property: every time someone on this list of close friends makes an update or posts a photo, you’ll see it in your feed no matter how small a change it is, and you’ll (optionally) get a notification about it (notifications are those alerts marked with a red badge at the top of the screen).

And there’s a new list called Acquaintances that also has special properties, but in reverse: add someone to it, and only the most important status changes (marriages, new jobs, etc.) will appear in your News Feed; you’ll ignore their day to day posts.

Once you’ve created your new friend lists, you’ll be able to use them the same way you’ve always been able to: namely, you can selectively share content with certain groups, and you can change permissions on your profile visibility for each list.

Today’s launch will doubtless draw some comparisons to Google+, which has a strong emphasis on sorting your friends into Circles, which are analogous to Facebook’s friend lists. But despite that emphasis, Facebook has actually beaten Google+ to the punch on recommending who you put into these groups — Google+ is great at surfacing people you might be interested in following, but it doesn’t yet do much to help you sort them.

Friday, September 2, 2011

A 21st century blunder

With so many web designers and so called web designing companies, we are now on the verge of "Designer Explosion" somewhat similar to our very own problem of the country, "Population Explosion". Anyway, it is also heartening to know that many young and old alike, responsible citizens of our country are now channelizing their energies into designing than just waiting to vote every year and see how that plays out until next.

Now with all sincerity, these freelancers have now got to also understand that by just sitting their for years doing the same thing over and over again is not only squashing their designing world's but also making them redundant and useless. There are certain things which one needs to be aware about regarding working in a dynamic environment, where change is bound to happen one point or the other. Now you either be a part of the change or say "ta da" to your so- called profession. Many designers and sometime people themselves commit certain common errors which diminishes their power to impress prospective clients. These errors are the biggest blunders, that could tarnish your own portfolios and profiles.

Some of the things a designer has to keep in mind all the time are:

1) You create a website to engage your viewers in the content and images on your website and not to squander their patience. The imagery and content has to be relevant to the central theme of the website, making the most of USABILITY, adding confusing language and images to impress God knows whom, our so called designers make the visitors impatient, resulting in them calling these designers a few names and saying goodbye. SO STOP THIS.

2) Flash based websites- It looks good when those images are moving in a particular manner on your website and then you have flash intros and flash headers which make your website look really "Exclusive" (Yes, that is what designers have told me,Exclusive), however, how much of good are you going to get out of that, if only you can pleasure yourself out of it and no one else even sees it. Grow up! it is time we used "latest technology" (which is available freely) and use them for these similar effects rather than conning your clients out of money promising them exclusivity.

3) Using images for text- For the vast majority of basement web designers doing this for the first time, it is extremely common to pitch a site with an unsupported font for a header or body content. Come development time you realize that you can’t put that font in real text and your client absolutely loved it! In fact it’s so unique they’d never seen a site do that before (for a reason), you’re a hero! We’ll guess what ::fail::… now you have to put all that great content in an image and none of the engines will ever get to read it.. Stay away from this mistake, learn the difference between a web safe font and a non-web safe font. D'oh!

4) Check your spelling and Grammar- When I have some time to waste, I indulge myself in reading letters and articles which have spelling mistakes, and there is no shame on laughing at these errors. When there are many ways of proof reading and making sure whether your statements are grammatically correct and your words are spelled correctly, people still commit these follies, and so do our "basement designers". You give websites marvelous designs and layouts but then throughout the website, if there is one spell error, you are done for! Those hate mails, disgusted looks among fraternity and taunts from customers and the woman walking her dog would be unbearable, confining you to your basement.

5) Set your design standards as high as possible- Never refrain from learning, don't go around saying, "Oh, I know everything", people who say that, normally, are the one's living in the Ice age, because in the 21st century, technology, criteria, mechanisms etc. are changing every day, in fact every hour. So get out there read books, blogs, articles related to latest trends and keep your webbed head up to date.

Saying so, I must warn each and every one of you designers out there, We have the Chinese, American and designers all over the world to compete with and not just "Basement buddies" Pull your socks up (if you wear any) and get your designs out there. Happy Eid and Ganesh Chaturthi to all.

Thursday, September 1, 2011

Using Gmail, Calendar and Docs without an Internet connection

The great thing about web apps is that you can access all of your information on the go, and we’ve introduced ways to use Google Apps on a variety of devices like mobile phones and tablets. But it’s inevitable that you’ll occasionally find yourself in situations when you don’t have an Internet connection, like planes, trains and carpools. When we announced Chromebooks at Google I/O 2011, we talked about bringing offline access to our web apps, and now we’re taking our first steps in that direction. Gmail offline will be available today, and offline for Google Calendar and Google Docs will be rolling out over the next week, starting today.

Gmail Offline is a Chrome Web Store app that’s intended for situations when you need to read, respond to, organize and archive email without an internet connection. This HTML5-powered app is based on the Gmail web app for tablets, which was built to function with or without web access. After you install the Gmail Offline app from the Chrome Web Store, you can continue using Gmail when you lose your connection by clicking the Gmail Offline icon on Chrome’s “new tab” page.

Google Calendar and Google Docs let you seamlessly transition between on- and offline modes. When you’re offline in Google Calendar, you can view events from your calendars and RSVP to appointments. With Google Docs you can view documents and spreadsheets when you don’t have a connection. Offline editing isn’t ready yet, but we know it’s important to many of you, and we’re working hard to make it a reality. To get started using Google Calendar or Google Docs offline, just click the gear icon at the top right corner of the web app and select the option for offline access.

IT administrators can deploy Chrome Web Store apps to users en masse by setting uporganizational policies for Chrome.

Today’s world doesn’t slow down when you’re offline and it’s a great feeling to be productive from anywhere, on any device, at any time. We’re pushing the boundaries of modern browsers to make this possible, and while we hope that many users will already find today’s offline functionality useful, this is only the beginning. Support for offline document editing and customizing the amount of email to be synchronized will be coming in the future. We also look forward to making offline access more widely available when other browsers support advanced functionality (likebackground pages).

Tuesday, August 2, 2011

The Era of Online Relationships

Online presence is a must for organizations today to promote and build up their brand and also business. Read on to know how Indian SMBs should do it.

Direct i

Some 25 years ago, a tech company called Symbolics registered the first .com domain name, marking the first time that a private company had presence on the Internet. At that time, most people had no idea what a mobile phone was in India, much less a website or an email. A quarter century later, economic reforms and tectonic changes in India have opened flood gates for consumers and consequent competition among brands. Though the fundamentals of managing relationships with various stakeholders remain the same, the contours have undergone a sea change in the digital era. The traditional media is itself witnessing a major transformation as the 'giant world wide web' envelopes the world. 2011 will be remembered in history as the era of online relationships, and Indian businesses, entrepreneurs and particularly the 15 Million SMBs operating in the Indian business-scape must adopt online brand building in their strategies and adapt to this unprecedented rise of Web 2.0.

Consider some of these statistics that substantiate the need to invest in online relationships. According to industry reports there are about '1.5 billion Internet users globally', compared to an estimated '81 million users' in India. The country is projected to become the 'third largest' globally in terms of Internet users by '2013', only behind China and US, which have 300 million+ and 200 million+ users, respectively of the Internet population. The total number of domains registered in India is only about '1.5 to 2 million', viz-viz the '190 million domains registered worldwide.' There is a huge gap here, and the potential' of growth for the domain registration industry is huge, with Indian businesses getting ready to explore a whole new business dimension in the online space.

The time is ripe for small & medium businesses and entrepreneurs with large ambitions to bring their brands alive and reach out to their consumers through optimal media. The web offers an exciting opportunity to complement high-level storytelling with product related education.

Websites: Your gateways to brand popularity

So how do we do it? For the purpose of this article, let's focus on one of the most integral and effective tool of enhancing brand presence and managing online relationships – your own website. Here's a simple guide to create your website and use it for myriad purposes -- internal communication, external sales, marketing and yes, recruitment. Here goes:

Get a friendly and memorable domain name to drive competitive advantage! : Your domain name is your gateway and reflects your personality in the online world. A friendly and memorable domain name is the essential first step that should not be ignored. The choice of your domain name is often something that is not pre-thought of, but can work wonders to eventually build your brand. A domain name that is crisp, easy to remember, resonates with people and has relevance will give you that competitive edge. For e.g. if you were a professional choreographer and were to build a website that focuses on teaching the dance form of Salsa, the domain name “” would give people an idea of what your website stands for! In other words, a domain name identifies a particular site and is the most elementary and defining tool to have a powerful online presence. Do note that once a domain name has been registered, it is no longer available. In short, What's in a name... Everything.

Select your 'host': If a builder needs to build a shopping complex, he would have to buy a space first! Similarly, to create a website, you have to buy a “Hosting service” - a type of service that allows individuals and organizations to make their own website accessible via the World Wide Web.

Design it...Yourself: Many entrepreneurs and businesses miss the bull's eye due to lack of technical knowledge involved in making a website or associated costs. A good option is the 'Do-it-Yourself' services that allow you to make your own sparkling new website in just minutes, and add your personal touch without any prior HTML or coding knowledge!

Leverage SNS for promotion: People today are increasingly getting social in the virtual world! With an array of social networking sites, people are constantly sharing personal profiles, interests, socializing with like- minded individuals. With the onslaught of social media, promotions have become so easy. Apart from opening up a fan page on your favorite networking platform, and linking your website on the same, it is essential to generate traffic on your website to drive sales queries. Next, register your webpage with credible search engines / internet directories for successful rankings for one or more popular search phrases.

Do not fill it, shut it, forget it: It's crucial to constantly monitor your website's performance in terms of bandwidth, search engine rankings, ability to generate traffic. Usually, your host provider will provide you with some of this information free of cost. You may use one of the many Analytics softwares and to ensure that you get regular traffic, you would need to invest in services like SEO. Also, it is important to secure the customer's privacy on your website. Secure your customer's identity and financial details with digital certificates that help you gain customer confidence and increase the level of security on your site.

So, go ahead and take that first crucial step in unleashing the true potential of your brand.

Author: Bhavin Turakhia, CEO and Founder of Directi and

Thursday, July 14, 2011

How to remove Malware from Your Site?

Nowadays, more and more Websites are facing online threats and being infected with viruses, injections, backdoors, malware, adware pop-ups etc. When someone opens an unsecured Website then infections gets transferred to his/her computer through cookies and cache. On detection of malware, famous search engines and security software companies can blacklist your Website. To be on safe side, you should scan your Website through online tools and take necessary steps to remove the infections. We will illustrate the ways to detect and remove virus infection through your Website in this article.

Mural Andrew Vírus atacando Célula

NOTE: We suggest you taking the backup of your Website (files & database) and scan it on following tools on weekly basis.


You can scan your Website at following famous online tools:

  1. McAfee SiteAdvisor

  2. AVG Threat Labs

  3. Sucuri Site Check

  4. Norton Safe Web

  5. Google Safe Browsing

  6. TrendMicro Site Safety

  7. Unmask Parasites

  8. Amada Malware Database

  9. URL Void

  10. VirusTotal

  11. PhishTank

  12. Online Link Scan

  13. Browser Defender

Confirming the Detection

If any one of above scanner list the infection then it is the time to trace it out. You can use the ‘Firebug’ extension for Google Chrome & Firefox to trace the culprit code. Most of the times, the infected code is hidden in the files or adds up as a redirect in the .htaccess file. Following are the steps to confirm the virus infection: -

  1. If you have a backup of Website files prior to detection of virus infection, then download all the new files from the server.

  2. Download and install WinMerge Tool to compare the files.

  3. Compare the new files with previously backed up files using WinMerge.

  4. Download Lynx, command line browser, to browse the Website and detect any hidden code.

Protection from blacklist

Do you want to save your Website from being blacklisted? Yes, then you should immediately purchase a hosting at a new Hosting Provider, which provides secured Web Hosting on daily or monthly basis. If necessary, you can also book a new domain name quite similar to your Website.

You must have a good & safe backup of your Website files and databases, dating before virus detection. Upload these previously backed up file and export database to the new hosting. Make sure to change the DNS settings in order to redirect the visitors to new safe Website. If necessary, take help of new Website Hosting Provider to configure the DNS properly. After recovery, you can change the DNS settings to redirect the visitors to the old Website.

Action Time

It is the time to remove the infections and retrieve your Website. Perform following two actions when a tool detects infection:

  1. List out the tools, which have notified your Website as unsecure and download their reports.

  2. Note down the infected links, their location, type of infection and other details mentioned in the reports.

  3. Scan the computer(s) on which you have access to the Website with a trusted antivirus and dedicated antispyware product.

  4. Erase all the login details to access your Website like that of FTP, Control Panel (cPanel), CMS Dashboard etc.

  5. Reset the browser(s) and completely delete their Browsing History.


Before proceeding to next steps, you should make sure that your computer(s) are totally secure and does not have a single infection. If necessary, you can backup your data and get formatted your computer. Now, you have to take following actions to remove infections from your Website.

After performing each step, you should open your Website in the browser to check the symptoms and test at the listed tools of Step 1.

  1. Check the .htaccess file and remove any suspicious code. Not sure which one is the suspicious code then replace it with the default .htaccess file. If you do not have the backup of default .htaccess file then visit CoolTips htaccess Generator, configure the options and generate a new .htaccess file for you. If you are using a CMS then visit their support/forum section and get a default .htaccess file.

  2. Visit and generate the code to apply username and password to access .htaccess file. Insert this code inside the .htaccess file.

  3. If you have not booked a new domain and hosting then create a Site Maintenance page specifying that ‘Your Website is under maintenance for NN hours/minutes.”

  4. Add a redirect in the .htaccess file to redirect all of the visitors to a Site Maintenance Page.

  5. You can also email the registered users or subscribers about the downtime with a request not to browse your Website in prescribed timings with a genuine reason like “to avoid load shedding” or “to help in quick maintenance”. After the recovery process, you can email them again specifying that your Website is up and running.

  6. Immediately remove the identified suspicious code from each location of your Website.

  7. If you using a CMS then disable all the plug-ins or extensions, themes etc. one by one. We suggest you to disable one at a time until you identify the main culprit extension. If you do not find any conflicting plugin or theme, then do not enable the plugins/themes back.

  8. Remove each additional code from your Website, which you have added for extra features like social sharing options, analytics code, license code, banners etc.

  9. Test your Website now with above tools. If they do not find any infection then it is good to go else continue to perform steps.

  10. Most of the Website Hosting companies provide the options to scan the file system and database through trusted antivirus on demand. Contact your host and check whether they provide such service or not.

  11. If your Web Host do not provide scanning services then download all the files to your computer through FTP or SFTP.

  12. Take back up of the downloaded files at a safe location.

  13. Scan the files with trusted antivirus.

  14. Remove infections, if detected. If not then skip step 15 to 17.

  15. Remove all the files from the File System of your Website and upload the scanned files through FTP or SFTP.

  16. Try to open your Website and check whether it opens up or not.

  17. If the Website does not open then remove the files at your server and upload the backup taken in Step 9.

  18. If above steps does not work then take services of experienced security professionals to recover your Website.

Still no help after performing each step then it is the time to reinstall or re-setup your Website from scratch. Backup all the files & databases; remove them from server, and then setup from the beginning of the time. If you are using a CMS then reinstall it from starting and re-tailor it according to your need.


It is the best practice to backup your Website and scan it using above listed tools on weekly basis. In addition, you should perform above steps to recover your Website from the infections. We invite our readers to provide feedback and suggestions through their valuable comments. You can list your experience with virus detection and removal at your Website.

Tuesday, July 12, 2011

CTRL+F5 RethinkingWeb

Hi followers,

With the monsoon living up to its expectations (not in the case of some people like my partners), anyway, I am enjoying the monsoons and also the fact that it is now more than a year that RethinkingWeb has been in operations and thanks to all you well-wishers and a larger share of thanks (if there was any) to our esteemed clients and partners, who have made this a convenient journey and helped RethinkingWeb up its scale of operations and go big!

We have just recently revamped our website and have also started our full scale operations from Mulund. It has been an excellent journey so far and we have met some fantastic people throughout this journey, we have added a few new team members and are expecting a few more in. A lot of time and energy has been spent behind designing the new look for our website, we have tried to keep information which is most relevant on there for you and have taken careful steps to make sure that the navigation and visual characteristics appeal to our visitors, so do make sure you visit our website and give us a feedback on what you liked there and what you would like to see. We thought of adding a lot more to our site, however, are contemplating on different ideas. We are also planning on adding new content every now and then to help our visitors with new information, and not just data. Our designers are trying to work out the best possible designs and by incorporating latest technology and concepts.

While on our website do not forget to browse through our portfolio to witness some amazing works through us. Some of our clients have said some wonderful things about us and we shall soon post them on the website. All of this trust and adulation has been promising sign and hence we have now set up our new office in Mulund to be there for you all the time.

We will also be available on chat at all times on our website, so if you want to chat to any of our Rethinkers just log on to our website and chat with us about any questions you have. We will be integrating voice chat options soon, stay tuned to know more.

Do make an appointment and visit our new office at Mulund and we shall be happy to discuss business and weather with you (We form strong opinions on weather). Otherwise if you have something in mind and want us to sort it out for you, just give us a call and we shall pay you a visit. As it is, monsoons have given us a reason to launch our new office and website, we are also offering a 25 % discount on new websites and web designing projects.

As mentioned earlier we will make changes to our content and designs from time to time, we will also change our offers every month and will keep updating you via blogs and mailers. So stay tuned for what’s to follow.

Thank you all, it is a pleasure sharing all of this with you, we hope you enjoy prosperity this monsoon.

Bye for now.

Thursday, June 2, 2011

Firebug Tutorial – Using Commandline API in Firebug

Section 1: Console Tab : Using Commandline API in Firebug


Commandline is one of the most useful features of Firebug. If you have some experiences in using Microsoft Visual Studio, you may know the usefulness of “Immediate window” and “Watch window” of VS while you are debugging.

Firebug’s commandline is like the “immediate window” from Visual Studio. You can inspect the value of a particular object at anytime. One better thing with firebug’s commandline is that it can be used at design-time also. ( Note: “Immediate” window from VS can be used at debugging-time only). And, another advantage is that you can write the Javascript Code in commandline and execute those codes on the fly.

The list of Commandline APIs for Firebug are available in the official website of Firebug. [ link:]. What I’m going here is that I’m gonna write about all Commandline APIs with examples in this tutorial. I hope that you will find it useful.

Types of CommandLine

There are two types of Commandline in Console panel.

  • One-line Commandline
  • Multi-lines Commandline

One-line Commandline

This one is the default one for Console panel of Firebug. It allows you to write one line at a time. The advantage of one-line commandline is that it supports autocomplete feature.

What is Autocomplete?(Ref:

Using the tab key you can autocomplete the name of variables and object properties. Keep hitting it to cycle through the complete set of possibilities, and use shift-tab to go backwards.

Autocomplete works at many levels. You can start hitting tab before you type anything to cycle through global variables. You can hit tab after typing “document.b” to cycle thorugh all properties that start with “b”. You can even hit tab after a complex expression like “document.getElementsByTagName(‘a’)[0].” to see all properties of the first link in the document.

Plus, You can also use “Up” or “Down” keys to get the command that you typed earlier.


Multi-lines Commandline

The multi-lines commandline is the enhancement version of one-line commandline. It allows you to type the Javascript code more than one time. And you can execute the code on the fly.


Both one-line commandline and multi-lines commandline have their own advantages. So, you can use either one based on what you wanna do with Firebug. For me, I used to use one-line commandline at the most of the time.

CommandLine API with example

Before start reading the tutorials, note that all of those APIs can be used both design time or run-time. However, those are more useful while you are in debugging mode. I’m telling you this because you may wonder why you need those APIs. :)

Download ~ Demo Zip File

List of APIs

  1. $(id)
  2. $$(selector)
  3. $x(xpath)
  4. dir(object)
  5. dirxml(node)
  6. cd(window)
  7. clear()
  8. inspect(object[, tabName])
  9. keys(object)
  10. values(object)
  11. debug(fn) & undebug(fn)
  12. monitor(fn) & unmonitor(fn)
  13. monitorEvents(object[, types]) & unmonitorEvents(object[, types])
  14. profile([title]) & profileEnd()

#1. $(id)

Returns a single element with the given id.

This is the shortcode for document.getElementById(”) in Javascript.

Example ( 1.0 )~

Name : <input id="nameTextBox" class="normalText" type="text" />

How-to ~

  • Paste the code above in blank HTML file and open it in Firebug.
  • Open the Firebug console and click “Console” tab.
  • Type $(‘nameTextBox’) in CommandLine and Press Enter Key

Output ~


It seems very simple (and looks like not very useful) but I would say that it is useful while you are debugging the code or writing the script in multi-lines commandline.

Let’s see how to use multi-lines commandline, how to execute the Javascript on the fly.

  • Click “Options > Larger Command Line”
  • Copy the code below and paste them in multi-lines commandline (larger commandline).
  • Click “Run”
var txt = $('nameTextBox'); 
txt.value = 'Michael Sync';
txt.textAlign = 'center'; = 'blue'; = 'double'; = 'pink';

Output ~


#2. $$(selector)

Returns an array of elements that match the given CSS selector.

Note: Check the link here if you don’t know what CSS selector is.

Example ( 1.1 )~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" >
<style type="text/css">
div{ background-color:Black;color:White; border: solid 1px grey; }
<div id='div1'>This is DIV1.</div>
<br />
<div id='div2'>Here is one more.</div>

Note: I’m using “Type CSS selector” in this sample.

How-to ~

  • Type $$(‘div’) in CommandLine and Press Enter Key (You will get both div objects (div1 and div2) as an array. )

#3. $x(xpath)

Returns an array of elements that match the given XPath expression.

Note: If you have no idea about XPath, you may check the XPath tutorial here [^].

Example ( 1.2 )~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" >
<title>CommandLine -
<div id='container' style="width:800px">
<div id='leftsidebar' style="width:100px; background-color:Gray;min-height:400px;float:left;"> </div>
<div id='content' style="width:600px;min-height:400px; background-color:ThreeDShadow;float:left;">
<div id='content-header' style="padding:2px;font-family:Calibri,Trebuchet MS;">
<h2>All about Firebug</h2> </div>
<div id='content-body' style="padding:2px;font-family:Calibri,Trebuchet MS;">
<p>Firebug is the most popular tool in web revolution.</p>
<div id='rightsidebar' style="width:100px; background-color:Gray;height:400px;float:right;"></div>

We will test this API in multi-lines commandline.

Paste the code below in multi-lines commandline.

var obj = $x('html/body/div/div');

Output ~

#4. dir(object)

Prints an interactive listing of all properties of the object. This looks identical to the view that you would see in the DOM tab.

It is like console.dir() that I already mentioned in Part I. So, I think you already have some idea about what console.dir is and how to use. I’m not going to write the new HTML code for this example. Instead, I will use the previous example (eg 1.2) and I will change the Javascript code that I wrote in multi-lines commandline.
var obj = $x('html/body/div/div');

The result will be like the pic below. You will get all properties and methods of those three DIV objects (leftsidebar, content, rightsidebar).


#5. dirxml(note)

Prints the XML source tree of an HTML or XML element. This looks identical to the view that you would see in the HTML tab. You can click on any node to inspect it in the HTML tab.

I already showed you how to use console.dirxml() in this tutorial. Only one thing is different. You can type dirxml() (eg: dirxml(‘container’) with the example 1.2.) in commandline instead of writing in HTML file.

#6. cd(window)

By default, command line expressions are relative to the top-level window of the page. cd() allows you to use the window of a frame in the page instead.

Note: This API seems doesn’t work properly. I will inform to Firebug team and will let you know the result.

#7. clear()

Clears the console. If you wanna clear the console, just type this “clear()” in commandline and press “Enter” key. You can also use “console.clear()” in Javascript Code.

#8. inspect(object[,tabName])

Inspects an object in the most suitable tab, or the tab identified by the optional argument tabName.

The available tab names are “html”, “css”, “script”, and “dom”.

How-to ~

  • Open “example 1.2″ in firefox.
  • Type inspect($(‘content-header’),’html’) in one-line commandline.
  • The HTML tab will be opened and the DIV called “content-header” will be selected. (check the pic below)

#9. keys(object)

Returns an array containing the names of all properties of the object. The object can be either Javascript object ( eg: var objCar = new Car() ) or HTML element (eg: document.getElementById(‘table1′)).

Example 1.4 ~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" >
<title>Keys and Values</title>
<table id="tbl1" cellpadding="0" cellspacing="0" border="0">
<script language="javascript" type="text/javascript">
function Car(){
this.Model = "Old Model";
this.getManufactor = new function(){ return "Toyota"; } }

How-to ~

  • Open “Example 1.4″ in firefox
  • Open the “console” tab.
  • Go to multi-lines commandline by clicking “Larger Command Line” in Option menu
  • Write the following code in commandline
    var o = new Car();  keys(o);
  • You will get the names of all properties of this JS class called “Car”.

Note: If you wanna practice this API, try to get the names of all properties of the HTML table called ‘tbl1′ by using this API. Let me know what result you get. :)

#10. values(object)

Returns an array containing the values of all properties of the object.

Example : Ref: to example 1.4.

How-to ~

  • Open “Example 1.4″ in firefox
  • Open the “console” tab.
  • Go to multi-lines commandline by clicking “Larger Command Line” in Option menu
  • Write the following code in commandline
    var o = new Car();  <strong>values(o);</strong>
  • You will get the values of all properties of this JS class called “Car”.

Note: As the getManufactor of Car() class is a function, it shows “Object” (green link) instead of the value “Toyota”.

#11. debug(fn) and undebug(fu)

Adds or removes a breakpoint on the first line of a function.

Note: I’m not going to cover about this API in this tutorial. Please read more about this in next section.

#12. monitor(functionName) and unmonitor(functionName)

Turns on/off logging for all calls to a function.

Normally, If we want to know whether a particular function is invoked or not, we used to put “alert()”or “console.log()” in that function. It’s too much work if we are working on large script files because we need to find that function in all script files and put “alert()” or “console.log” in that function. and save that file again and run on the browser. With firebug, you don’t need to do those things. You only need to know the function and you can trace how many time that function is invoked. You will get the notification in console when that function that you monitored is invoked. Plus, it will give you a link that is pointing the function in script.

Example 1.5 ~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 
<html xmlns="" >
<title>Monitor and Profiler</title>
<script type="text/javascript">
function func1(){ //doSomething }
function func2(){ //doSomething }
function func3(){ //doSomething }
<input id="btn1" type="button" value="Invoke func1()" onclick="func1();"/>
<input id="btn2" type="button" value="Invoke func2()" onclick="func2();"/>
<input id="btn3" type="button" value="Invoke func3()" onclick="func3();"/>

How-to ~

  • type “monitor(func1) ” in one-line commandline (wait a few seconds until “>>> monitor(func)” is shown in commandline)
  • then, you can click any of those buttons to invoke the function that you like.
  • Since we are monitoring the function called “func1()”, we get the link ( check-out the picture below) as a notification whenever you click the button “Invoke func1()”. But you won’t get anything when you click other buttons. This is how the monitor API works in Firebug. You will get the notification when the functions that you are monitoring are invoked.
  • Type “unmonitor(func1)” to remove monitoring the func1();

Output ~


#13. monitorEvents(object[, types]) and unmonitorEvents(object[, types])

Turns on/off logging for all events dispatched to an object.

The optional argument “types” may specify a specific family of events to log. The most commonly used values for types are “mouse” and “key”.

The full list of available types includes “composition”, “contextmenu”, “drag”, “focus”, “form”, “key”, “load”, “mouse”, “mutation”, “paint”, “scroll”, “text”, “ui”, and “xul”

Note: Unfortunately, this API doesn’t work propertly. I will contact with Firebug Team and will update about that later. Sorry.

#14. profile([title]) and profileEnd()

Turns on/off the JavaScript profiler. The optional argument title would contain the text to be printed in the header of the profile report.

There are three ways to start Javascript Profiler in Firebug.

Javascript Profiler can be started ~

  1. by clicking “Profile” button in Console Toolbar.
  2. by using console.profile(‘My Profiler Title’) from Javascript Code
  3. by using profile(‘My Profiler Title’) from commandline

If you wanna know more about Javascript Profiler in Firebug, please read my previous tutorial (Firebug Tutorial – Logging, Profiling and CommandLine (Part II)).


This is all about console tab. Even thought it is just a tab, I have to divide my tutorials into three parts (part 1, part 2 and this one). Now, I have covered everything about console tab and its functionalities. I hope you will find it useful.

Sunday, February 13, 2011

Useful Tips for Effective Web Design

Listed below are some useful and rather important tips for designing a professional and high quality web site:
  • Neat and Easy Navigation: Navigation of links on your site plays a big role in determining the stickiness of your site (how long your visitor stays and explores your site). Ask yourself this, what do visitors do as soon as they open your site? They would probably read the content of the present page and then look around to find any other page that interests them. Read our article on Web site Navigation Tips.
  • Clean Layout Design: A clean layout that uses a lot of white space enhances a site's looks. Try to keep the focus on your content, use dreamweaver templates for this. Use fonts that will be available on all computers to prevent your site looking messed up.
  • Program using pure CSS: The world is moving away from table based websites to pure CSS websites because it offers accessibility, reusability and considerably reduces file size apart from giving greater control over the look of your website. The single most important skill you can learn today to become a quality web designer is CSS programming! Even if you are not an expert at CSS you can learn to use the following simple CSS Styles Effects to enhance your website:
    1. Cool Text Effects using CSS Styles: Text Links Rollover, Text Case Setting, Text Spacing and Line-through Effect
    2. Bullets in HTML or Deamweaver: Using CSS Styles with bullets (shapes, decimal, roman-numerals, images, etc.)
    3. Links without Underline: Use CSS Styles to display links without the appearance of the underline.
  • Optimum Load Time: Make sure your load time is low. For this you must: 
    Minimize Graphics, Flash and scripts: 
    They hugely increase your file size. 
    Optimize your HTML & script code:
     Make sure that your site doesn't have any unwanted tags or unused scripts.
    Use Server Side Include (SSI) files where ever possible. SSI files once called from the web server reside in its cache so on subsequent requests they load faster.
    Read our article Tips for a Fast Loading Site for more.
  • Design for all Screen Resolutions: A site that is easy-to-use always encourages visitors to stay and read your content. For site with long pages of content this is very crucial as the amount of scrolling required is reduced. Suppose your site doesn't look good for a particular resolution it is very probable that the visitor will close the browser window feeling that the web page is not for their viewing. Designing stretch layouts that fit any screen resolution ensures that you know all your visitors see a visually appealing and professional site.
    Read our article Designing for all Screen Resolutions for more.
  • Ensure Web site scalability: Make sure your code and design is scalable. As technology advances and configuration of computers & their monitors keep increasing and varying it is impossible to test your site in all screen sizes and platforms.
  • Cross Browser Compatible: Make sure you check your site for Internet Explorer 5+, Mozilla Firefox 1+, Opera 7+, Safari 3+ and Netscape Navigator 6+ as they constitute 95% of the world's browsers.

  • Courtesy: