Browser Sandbox is an online platform which makes launching various browser versions possible.
It requires an installation of a plugin & can run:
The platform is definitely a gold mine for making cross-browser tests quickly & easily.
P.S. Spoon allows you to convert your own apps to Spoon apps & post them on the web. You can check the platform's homepage for that.
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:
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 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.
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.
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:
There are 2 important web application tests to measure if everything is working (and will work) on your website:
So, here is a collection of 15 Free Functionality And Load Testing Solutions For Web Applications to create better online experiences:
Selenium has various projects that can be combined with each other to create a robust testing environment.
Also there are Selenium projects specifically for Rails, Ruby & Eclipse.
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:
There is also Watij, which is an enhanced version of Watir with Java.
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.
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:
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).
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.
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:
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.
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.
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.
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.
