With the click of a keyboard shortcut, a cropping interface appears where it is possible to:

• set the area of the screenshot
• make it fullscreen
• copy to clipboard
• upload to the net & get a link
  
• edit it on a web-based service

Most of the similar tools instantly take a screenshot of the area you selected before clicking any approve button. LightShot makes it kindly, waits for you to arrange the area, shows you the size of it & a click is required which is better to prevent wrong screenshots.

The tool can work in every computer as it comes as a Windows desktop application, a Firefox add-on & an Internet Explorer add-on.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Automated Browser Refresher For Developing Easier: XRefresh
• Windows 2008 Hosting Discount Offer: Easy CGI
• Website Reachable Alert Firefox Plugin: Mr Uptime
• Wappalyzer: Find Out Apps. Used On A Website
• Use CSS3 Pseudo Selectors With IE: ie-css3.js

It requires an installation of a plugin & can run:

• IE6-7-8
• Firefox 2-3-3.5
• Apple Safari 3-4
• Opera 9-10
• Google Chrome

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.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Photoshop Browser Templates
• Test Your Website Design In Different Browsers In Minutes
• Website Reachable Alert Firefox Plugin: Mr Uptime
• Wappalyzer: Find Out Apps. Used On A Website
• Testing And Debugging Tools For IE

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.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Website Reachable Alert Firefox Plugin: Mr Uptime
• Wappalyzer: Find Out Apps. Used On A Website
• Test Your Website Design In Different Browsers In Minutes
• Sketching And Prototyping Tool: Pencil Project
• Simple & Functional Screenshot Tool: LightShot

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.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Simple & Functional Screenshot Tool: LightShot
• Site-Specific Browsers: Turn Websites Into Desktop Applications
• Paymo: Full-Featured Time Tracking & Invoicing (20 Lifetime Invoice Accounts Giveaway)
• Fanurio Time Tracking & Billing Software Giveaway – Winners Announced
• Fanurio Time Tracking & Billing Software – 5 Licenses Giveaway

Firebug

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.

Pixel Perfect

In order to easily find out how a fresh element will look with the design in general, Pixel Perfect enables web developers and designers to overlay a web composition over top of the developed HTML.

It is possible to toggle on/off any number of design elements to see if they fit well or not. And, with the opacity option, HTML below the composition can be viewed.

CodeBurner

CodeBurner offers a reference panel with a search tool for looking up HTML elements, attributes, and CSS properties.

It also provides shortcuts to view information or code samples about a selected item.

FireUnit

FireUnit provides a simple JavaScript API for doing simple test logging – unit testing and viewing within a new tab of Firebug.

FirePHP

With the help of FirePHP, it is possible to log to the Firebug console by a simple PHP method call.

Data is sent via response headers & won’t interfere with the content on the page.

For any developer who got used to the Firebug interface , this extension is great for PHP debugging.

FireRainbow

FireRainbow adds a better syntax highlighting support to Firebug & has theming support.

FireDiff

It adds a change monitor recording every change made, by Firebug and the website itself, to CSS and the DOM.

This provides a deeper look into the functionality of the website & helps keeping a record of the changes that were required to debug and tweak the page’s display.

Jiffy Firefox Extension

Jiffy Extension, using the Jiffy-Web, adds a new panel to Firebug & generates the visual view of the JavaScript time measurements. It can also output a print-friendly version of the report.

Hammerhead

It enables you to measure the loading times of webpages.

The extension has support for multiple pages & can clear caches (disk & memory) with a click for a healthier result.

Firecookie

Firecookie, is a cookie viewer/manager that works inside Firebug.

For a faster development, when coding an application using cookies, the panel eases viewing the cookies & their values, expire dates, etc.

It is also integrated with the Net panel & displays both sent and received cookies.

Firefinder

Firefinder offers a way to quickly finding HTML elements matching mentioned CSS selector(s) or XPath expression.

It allows you to instantly test CSS selectors in the page while seeing the content at the same time, and matching elements will be highlighted.

It also shows a count of how many matches there are & lists all the matching ones in a collapsible list in the Firefinder panel.

LiveCoder

LiveCoder extends Firebug by allowing developers to look at the Firefox chrome.

It is especially valuable to developers building add-ons. LiveCoder’s GUI lets you examine and modify the DOM of any Firefox add-on.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Test Your Website Design In Different Browsers In Minutes
• What Do Visitors See? Google Browser Size
• Website Reachable Alert Firefox Plugin: Mr Uptime
• Wappalyzer: Find Out Apps. Used On A Website
• Sketching And Prototyping Tool: Pencil Project

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.

ActiWATE

A Java-based platform for easing the website test automation process.

ActiWATE emulates brower-based actions & makes it possible to create action/result based scenarios.

It supports http-https & Ajax requests.

WebDriver

WebDriver is a clean, fast framework, created by the Google team, for automated testing of web applications.

It offers a very real-like testing environment as it uses whichever mechanism is most appropriate to control the browser. For Firefox, this means that WebDriver is implemented as an extension. For IE, it makes use of IE’s automation controls.

For a full article on WebDriver, click here.

HtmlUnit

This is one of the most popular solutions that is used for testing purposes or to retrieve information from web sites.

It has a good JavaScript support (which is constantly improving) and can work with jQuery, MooTools, Prototype, Dojo, etc. too.

HtmlUnit can be configured to simulate IE or Firefox, has support for cookies, get-post requets & much more.

Sahi

Sahi is a very easy-to-use software that can record and playback scripts. And, it runs on any modern browser.

The application supports Ajax and dynamic applications. It provides logging in every step & has an automatic html reporting with error logs.

OttoMate

This is a suite of six Mac OS X Automator Actions that contains everything needed to graphically configure automated, repeatable user-acceptance tests for web-based applications.

The OttoMate Actions uses Safari, run your web application through by commanding Safari to visit your site, click links and buttons, fill out and submit web forms, etc.

IeUnit

IeUnit is a framework whic uses JavaScript to test logical behaviors of web pages.

By using only JS, test cases can be easily written for any website.

FWPTT

FWPTT is a web application tester program for load testing web applications which can record normal and Ajax requests.

Using a proxy server, the sprogram let’s user to record, playback & log the browsing actions.

Load Testing

Pylot

Pylot is an open source tool which runs HTTP load tests for testing performance and scalability of web services.

It generates concurrent load (HTTP Requests), verifies server responses, and produces reports with metrics. Tests suites are executed and monitored from a GUI or shell/console.

Tsung

Tsung can be used to stress almost any kind of server including:

• HTTP
• WebDAV
• SOAP
• PostgreSQL, MySQL
• LDAP
• Jabber/XMPP servers.

Several IP addresses can be used on a single machine using the underlying OS IP Aliasing& HTTP reports are generated during the tests.

Apache JMeter

Apache JMeter may be used to test performance both on static and dynamic resources. Besides HTTP, it can connect to databases, POP3 & more.

Siege

Siege is an http regression testing and benchmarking utility. It was designed to let web developers measure the performance of their code under duress, to see how it will stand up to load on the internet.

It supports basic authentication, cookies, HTTP and HTTPS protocols. It allows the user hit a web server with a configurable number of concurrent simulated users.

Siege was written on GNU/Linux and has been successfully ported to AIX, BSD, HP-UX and Solaris.

The Grinder

The Grinder is a Java load testing framework that makes it easy to run a distributed test using many load injector machines.

Tests are written in Jython scripting language. It has an automatic management of client connections and cookies.

Stress Tools By Microsoft

Microsoft offers 2 tools for stress testing IIS servers:

• IIS 6 Web Capacity Analysis Tool (The IIS 6.0 Resource Kit Tools include WCAT) / IIS 7.0 Web Capacity Analysis tool
• Web Application Stress Tool

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Winners Of JCODER Java IDE – 3 Pro Licenses Giveaway (And 50% Discount Is Still On)
• Website Reachable Alert Firefox Plugin: Mr Uptime
• Wappalyzer: Find Out Apps. Used On A Website
• Test Your Website Design In Different Browsers In Minutes
• Sketching And Prototyping Tool: Pencil Project

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.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Installing Popular Web Applications In Minutes With Bitnami
• FlashMint: Affordable Flash & Website Templates ($225 Credit Giveaway)
• Wordpress QuickAdmin Plugin By WRD
• WordPress Plugin For E-Commerce: GetShopped
• WooThemes Launches With New Themes

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.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Run Browsers From Web: Browser Sandbox
• Test Your Website Design In Different Browsers In Minutes
• Website Reachable Alert Firefox Plugin: Mr Uptime
• Web Elements Kit (PSD) For Designing Faster
• Web Applications Classic Button Set

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.

Design – Grid-Rule-Unit-Crosshair

Design provides a menu with 4 options:

• Grid: overlays a configurable grid.
• Rule: a ruler which can snap to block level elements.
• Unit: for measuring the differences between 2 given points.
• Crosshair: draws a crosshair cursor on the page to assist in layout alignment

Slayer Office – Favelet Suite

Several tools in one bookmarklet. All are very handy like "learning which colors are used on a website", "document trr chart" & more..

Aardvark – Display Elements & More

Aardvark enables you to view the details of the element & to do various things, such as:

• delete the selected element from the page
• isolate the element
• move the selection rectangle outward to the containing element & more.

Tip: The bookmarklet is at the right side of the website.

ReCSS – Reloads The CSS

A so simple but helpful bookmarklet.

When editing a CSS file, to see the result, all the page is generally refreshed. ReCSS only updates the CSS & the results are seen quicker.

It specially helps if you are developing an Ajax application where some content appears after sometime, you simply don’t have to wait.

Edit Any Website – Get It

Want to see how a text will look on a webpage? Or, how would it be if that image wasn’t there?

This bookmarklet makes any website editable, positions of the elements & text can be changed.

W3C Markup Validator – Get It

Check the markup validations of any web document: HTML, XHTML.. See the results & if there are any errors, find the recommendations.

W3C CSS Validator – Get It

Check CSS and (X)HTML documents with style sheets. See any possible error & get the recommendations.

Resize Browsers

When testing a design in various resolutions, these bookmarklets resizes your browser to the mentioned popular sizes.

So, rather than updating the resolution of the computer, this method is way faster.

BuiltWith – See The Ingredients Of A Website – Get It

This bookmarklet gets you to the BuiltWith website & displays various informations about a website like:

• web server it is hosted
• analytics apps. used
• scripting language
• widgets installed
• blog software
• advertising platform  & more.

Super Screenshot – Instant Screenshots – Get It

When you need to get a screenshot of a webpage, but don’t want to use an image editing or screenshot software, this bookmarklet helps alot.

It, almost instantly, presents you the full page screenshot & also you can set the size & format form the page displayed.

BrowserShots – Test Webpages In Different Browsers – Get It

This bookmarklet directly sends the URL to be tested on different browsers to the BrowserShots website & you only select the browsers /OSs.

Google Translate – Get It

Ok, this is not directly related to web design & development but it helped me so much while developing & there’ll probably be no better post to share it.

Every designer/developer searches:

• inspiration
• an answer to a problem
• resources…

And a serious part of these contents are not written in a language we know. So, this bookmarklet translates a website into English (you can update it to work in your language) & increases the possibilities to find inspiration, answers & more..

Is your favorite bookmarklet missing? Please share it in the comments. And if not subscribed to the WebResourcesDepot RSS feed, click here to subscribe & get the free web resources everyday.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Website Reachable Alert Firefox Plugin: Mr Uptime
• Wappalyzer: Find Out Apps. Used On A Website
• Test Your Website Design In Different Browsers In Minutes
• Social Bookmarking Icons Collection
• Sketching And Prototyping Tool: Pencil Project

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.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Website Reachable Alert Firefox Plugin: Mr Uptime
• Wappalyzer: Find Out Apps. Used On A Website
• Test Your Website Design In Different Browsers In Minutes
• Sketching And Prototyping Tool: Pencil Project
• Simple & Functional Screenshot Tool: LightShot