FireQuery is a Firefox add-on that extends Firebug with new jQuery-focused features.

It adds extra functions to the HTML tab like showing embedded data elements & event handlers inserted using jQuery.

All the jQuery expressions are presented in Firebug Console + DOM inspector and elements in jQuery collections are highlighted on hover.

Also, the jQueryify bookmarklet is integrated into FireQuery which makes injecting jQuery into any website possible.

For every web designer & developer, refreshing the browsers to see the updates we make is a very common action.

XRefresh is a solution, specifically built for easing this process, which automatically refreshes browsers once an update to a file in our project folder is done.

It comes with 2 parts: a browser plugin (both for Firefox & IE) and an application (for Windows & Mac) which watches the changes made in the folders we mentioned.

Although it is handy for systems with one monitor, the best environment will probably be two monitors where the IDE & the browsers runs on each.

P.S. For Firefox, it requires Firebug to be installed.

Firebug is probably one of the most helpful tools used when developing websites.

Specially, after JavaScript & Ajax became that much popular, it is hard to findout how we were developing & debugging without Firebug.

This great Firefox add-on, besides the ease of use & continious development by a talented team, has many features that make it a must-have like:

• working inside browser, no need to switch apps.
• being real-time, logging every request
• ability to edit code & see results instantly
• debugging JavaScript, measuring its performance & more..

It also has another feature, which is extendibility with help of Firefox add-ons.

There are various add-ons that can add more power to Firebug for creating better & faster. Here they are:

YSlow

YSlow is a Firebug add-on for analyzing web pages and getting suggestions on ways to improve the performance (parallel with the rules for high performance web pages).

YSlow grades web pages based on the predefined rulesets or a user-defined one . It also provides tools for performance analysis, including Smush.it™ and JSLint.

Page Speed

Very similar to YSlow, it is an add-on by the Google team for evaluating the performance of web pages and, best of all, getting suggestions (based on "Web Performance Best Practices") on ways to improve them.

Page Speed automatically optimizes images & provides compressed ones foruploading later.

It can also detect  JavaScript and CSS loaded that actually isn’t used for decreasing the total size of these files.

Read the rest of this entry »

Automated web application testing is done very rarely & it is generally thought as an unnecessary + hard to setup system.

Truth is, automated testing is a must, because it saves so much time during development & when the project is live. Also, with the right tools, it is generally very easy to setup.

Using testing tools, once the scenarios are created, you can:

• test every feature of the whole application with a click
• get written reports instantly with the error logs
• measure the capacity of your web application on every step
• get a continiously-watched, less-problematic web application as the result

There are 2 important web application tests to measure if everything is working (and will work) on your website:

• Functionality testing: using record-playbacks or scripting, a tool can browse your website, fill forms, click on the links you want & generate a report for you
• Load/stress testing: even if a web application is working ok with 1 or 10 users, it can show totally different attitudes (like bottlenecks in resource usage) when there are 100 or 1000 active users.

So, here is a collection of 15 Free Functionality And Load Testing Solutions For Web Applications to create better online experiences:

Functionality Testing

SeleniumHQ

Selenium has various projects that can be combined with each other to create a robust testing environment.

• Selenium IDE: a Firefox add-on to record and playback tests in Firefox.
• Selenium Remote Control: a client/server system to control web browsers locally or on other computers, using almost any programming language and testing framework.
• Selenium Grid: like Selenium Remote Control but runs tests on many servers at the same time.
• Selenium Core: Javascript-based testing system.

Also there are Selenium projects specifically for Rails, Ruby & Eclipse.

Watir

Watir is a set of Ruby libraries which drives browsers just like people. It clicks links, fills in forms, presses buttons. And, it also checks results to report back.

Watir supports:

• IE, Firefox, Chrome on Windows
• Firefox on Mac and Linux
• Safari on Mac
• Flash testing with Firefox

There is also Watij, which is an enhanced version of Watir with Java.

Read the rest of this entry »

Sometimes we wonder which web applications are used on a website. Is it built with Wordpress or Drupal, does it prefer JQuery or MooTools & so..

Wappalyzer is a Firefox add-on that automatically displays these for you.

Logos of the applications used on a website are displayed at the toolbar of the browser.

And, it displays the usage statistics on its website which will probably be a great statistical resource once the add-on is used widely.

Every web designer tries to create a draft of the design that the client can easily imagine "how it will be after it is online".

This is a set of Photoshop templates of Firefox (Mac & PC) & IE to help this process.

Every browser template has 3 resolutions ready:

• 1280*1024
• 1024*768
• 800*600

Title, address bar, scrollbar & favicon spots are also easily editable for a better presentation.

Bookmarklets are a great way of saving time when used regularly. With just a click, they can provide so much information / help.

Here is a list of 15 very handy web designer / developer bookmarklets which includes:

• learning the colors used
• inserting a ruler on a webpage
• reloading CSS without reloading the whole site & more..

To use them, bookmark the "Get It" links. If no "Get It" link is provided, than they can be bookmarked from the author’s websites or:

Click here to download all the bookmarklets mentioned as a Firefox bookmark folder (can be added from bookmarks>organize bookmarks>import&backup>import HTML menu at Firefox).

Note: If you’re not using it already, Firefox web developer extension is strongly adviced for developing faster besides using these bookmarklets (few of the bookmarklets mentioned are already in the extension).

WTFramework – Learn JavaScript Framework Used

When you wonder which JavaScript framework is used on a website, rather than checking the source, simply click to this bookmarklet & it will display the framework(s) used.

XRAY – See Details Of Any Web Element

It lets you see the box model in action for any element, all the details of it.

Just click the XRAY button to instantly get the answers of:

• where is the top and left of this element?
• how big is each margin? how big is the padding?
• how wide and high is the content box?

MRI

A free cross browser tool that lets you test selectors with any web page. Selectors, particularly complex ones can be difficult to get exactly right – MRI lets you experiment with them on any web page.

Read the rest of this entry »

It is a known fact that browser-based geolocation is very close with the new W3C Geolocation Specification.

Firefox will be implementing this feature in its future releases but now has an add-on, named Geode, that enables users/developers to taste it.

The add-on currently uses Skyhook’s Loki technology to map the WIFi signals.

To be more specific about what can be done via Geode:

• Create a login page which can be browsed from specific locations, like your house
• An RSS reader that realizes whether you’re at work or at home & acts accordingly
• And many more..

Using Geode in websites is very easy:

navigator.geolocation.getCurrentPosition(function(pos) {
  alert( pos.latitude + ", " + pos.longitude );
})

Pownce & Yahoo! Fire Eagle already implemented this feature.

DevBoi is a Firefox add-on that adds a sidebar with web-development references and documentations for HTML, JavaScript, CSS, PHP, Ruby on Rails & Prototype.

The sidebar is very handy for any developer as you can reach it with a simple "CTRL+F9", find any function or property, see the browsers it supports & more.

Standard installation supports:

• HTML 4.01/XHTML 1.0,
• CSS 2.1,
• DOM 2,
• JavaScript 1.3

Support for other languages can be downloaded from here.

You can also go the original website for the add-on for downloading it without registering.

Optimizing images is a "must" when serving them over the net for faster browsing experiences, lower bandwidth & diskspace usage.

Smush-it is a free online service for compressing your images by offering different techniques than Photoshop, Fireworks, etc. & creates non-quality-loss output.

It offers several ways for easier usage:

• Web based uploader that supports unlimited file uploads & optimized images can be downloaded as a .zip file. Images can be uploaded from URLs too.
• Firefox plugin & a bookmarklet for 1-click optimizing for the images exists on that webpage.
• Wordpress plugin for automated usage for the uploaded images.

Anyone, who wants to get more bytes out of their images, should take a look at Smush-it.