40 Free & Useful Web Development and Designer Tools Probably You Don’t Know

web_development.jpg Nowadays web developers already know how to quickly code a menu or a layout structure, pages even a site. Because there are many available tools such as color selecting, color palette, JS Library, CSS/HTML/PHP Framework, WYSIWYG editor and more to help make web development projects quicker and more productive. Here is an collection 40 free and useful tools for web development and designers. Hope it will helpful to you!

Adobe BrowserLab


Adobe BrowserLab provides an easier, faster way to do cross-browser testing that integrates with Creative Suite 5.

Adobe BrowserLab

You can refer See BrowserLab In Action here, in this video, Adobe Product Manager Scott Fegette shows how to use Adobe® BrowserLab for testing your cross-browser layouts with Adobe Dreamweaver® CS5 software.

 

Alloy UI


Alloy is a UI metaframework that provides a consistent and simple API for building web applications across all three levels of the browser: structure, style and behavior.

Alloy UI

 

CamStudio


CamStudio is able to record all screen and audio activity on your computer and create industry-standard AVI video files and using its built-in SWF Producer can turn those AVIs into lean, mean, bandwidth-friendly Streaming Flash videos (SWFs).

CamStudio

 

Clean AJAX Framework


Clean is an open source engine for AJAX, that provides a high level interface to work with the AJAX technology. It can be plugged in any page or DHTML framework because it was designed in conformation with the separation of concerns principle, keeping focus on AJAX issues.

Clean AJAX Framework

 

CodeIgniter


CodeIgniter is a free open source PHP Framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications. If you want:

CodeIgniter-feature

CodeIgniter is right for you.

CodeIgniter

 

CodeRun Studio


CodeRun Studio is a cross-platform Integrated Development Environment (IDE), designed for the cloud. It enables you to easily develop, debug and deploy web applications using your browser. CodeRun Studio can be used instead or alongside your existing desktop IDE. You can upload existing code in order to test it in the cloud or for sharing with your peers.

CodeRun Studio

 

Color Scheme Designer


Rapidly increased precision and color space conversions, better preview, enhanced scheme creation system, unique scheme IDs and permanent URL of the scheme.

Color Scheme Designer

 

ColorZilla


With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily.

ColorZilla

 

CSS Fonts and Text Library Tool


Use this wizard to experiment with font and text styles and generate sample CSS style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page. It is cross-browser compatible with Firefox, Netscape, Internet Explorer, and other modern browsers.

CSS Fonts and Text Library Tool

 

CSS Sprite Generator


CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

CSS Sprite Generator 

 

CSS3 Button Maker


This Button Maker shows you a live working version of the button you create, complete with :hover and :active states. It is done without attaching any JavaScript events to the button itself.

Use this Button Maker thing, you just adjust the settings until you have a nice looking button, then press the button and it will give you the CSS. Copy and paste at your leisure. Now you can use the class name “button” on HTML elements to make them look like buttons.

CSS3 Button Maker

Live demo: http://css-tricks.com/examples/ButtonMaker/

 

CSS Grid Builder


CSS Grid Builder is a YUI based lightweight CSS framework developed by Yahoo!.

CSS Grid Builder

 

Dojo Toolkit


The Dojo Toolkit is an open source modular JavaScript library designed to ease the rapid development of cross platform, JavaScript/Ajax based applications and web sites.

Dojo Toolkit

 

DOMAssistant


DOMAssistant provides a simpler and more consistent way to script against the Document Object Model (DOM) in web browsers.

DOMAssistant is completely modular, in the sense that it is only dependent on one single core JavaScript file, DOMAssistant.js. All other modules are optional, and you can choose to only use the ones you find necessary in your application.

DOMAssistant

 

DooPHP


DooPHP is a rapid high performance open source development framework for PHP using commonly known design patterns like MVC and ORM, reduces development costs and helps developers write less code.

DooPHP is fast, RESTful, AJAX support, SEO friendly, well documented, easy to learn & fun to code. With such superior performance, Doo still provides a set of features that are crucial in today’s Web 2.0 development.

DooPHP

 

Dropbox


Dropbox is a Web-based file hosting service operated by Dropbox, Inc. which uses cloud computing to enable users to store and share files and folders with others across the Internet using file synchronization.

Dropbox

 

Firebug


Firebug is a tool for web development, which allows inspect, edit and monitor CSS, HTML, JavaScript and Net requests in any web page. Includes documentation, FAQs, videos etc.

Firebug

 

FireShot


FireShot is a Firefox extension that creates screenshots of web pages. This plugin provides a set of editing and annotation tools, which let users quickly modify web captures and insert text annotations and graphical annotations. Such functionality will be especially useful for web designers, testers and content reviewers.

FireShot

 

Formee CSS framework


Formee is nothing but a framework to help you develop and customize web based forms. Main features:

Formee CSS framework main features

Customizable and Flexible – The form has a structure built around percentage widths, thus allowing its inclusion in any project, adapting to the space available. Formee has its structural code independent of the style codes, facilitating the complete customization and manteinance of the form.

Semantics and Performance – The form was built with care to preserve web standards and their semantic values, working with the smallest possible amount of tags and according to the W3C rules.

Accessibility and Usability – Some elements have been inserted to add more value to your project , such as message boxes that can be shown indicating errors, warnings and success alerts. We also use the fieldset element to cluster form fields that have the same context through the legend tag.

Formee CSS framework

Live demo: http://www.formee.org/demo/index.htm

 

Google Font Directory


The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.

Google Font Directory

 

HTML5 Starter Pack


The Starter Pack is a bit different than a template. It was built with one guiding principle: scalability. As a result, you can use this to get started on your portfolio page or the next Facebook. You can download the Starter Park from here(zip).

The coding part is all HTML5, cross-browser, It’s a very basic HTML5 starter pack with a clean & ordered directory structure fit for most projects. Here’s a list of a few major features of the pack:

HTML5 Starter Pack

Here is the screenshot of the project page:

project-page-f1

And here is the URI of this project:

http://sickdesigner.com/index.php/2010/html-css/html5-starter-pack-a-sick-freebie/

 

Kodingen


Kondingen is an all-featured online web development platform that enables individuals or teams to work on projects.

Kodingen

 

Less Framework


Less Framework 2 is a CSS framework for building cross-device layouts. It uses CSS3 media-queries to switch between three grids: a five-column one for netbooks and tablets, a two-column one for smartphones, and an eight-column one for laptops and desktops. All grids share the same column width and vertical rhythm, so designing for all of them at once is a breeze.

Less Framework

 

IxEdit


IxEdit is a JavaScript-based interaction design tool for the web. With IxEdit, designers can practice DOM-scripting without coding to change, add, move, or transform elements dynamically on your web pages. Especially, IxEdit must be useful to try various interactions rapidly in the prototyping phase of your web application.

IxEdit

 

Microsoft Expression Web SuperPreview


Expression Web SuperPreview for Internet Explorer is a visual debugging tool that makes it easier to migrate your web sites from Internet Explorer 6 to Internet Explorer 7 or 8.

Microsoft Expression Web SuperPreview for Windows Internet Explorer

 

Microsoft WebsiteSpark


Microsoft WebsiteSpark is a program that offers visibility, support and software for professional Web Developers and Designers.

Microsoft WebsiteSpark

 

MochaUI


MochaUI is a web applications user interface library built on the Mootools JavaScript framework.

MochaUI

 

MooTools Canvas Library


MooTools Canvas Library provides functionality to manage and interact with the content of a html5 canvas element. It emulates layers and items that can be manipulated and managed and provides mouse-events to the items.

MooTools Canvas Library

 

PHPanywhere


PHPanywhere is a web based free Integrated Development Environment or IDE for the PHP language, in other words it is an application that gives developers all the code editing capabilities they need to develop PHP applications online.

It includes a real-time syntax code editor with support for all web formats and a powerful FTP editor.

PHPanywhere

 

PHP Fat Free


FAT-FREE is a powerful yet lightweight PHP 5.3+ Web development framework designed to help you build dynamic and robust applications – fast!

Fat-Free is also packaged with optional plug-ins that extend its capabilities. There’s the Axon auto-mapping mini-ORM and the M2 MongoDB mapper to help simplify database access, plus an easy-to-use SQL handler for fine-tuning database engine interactions.

PHP Fat Free

 

PHP Template Inheritance (TI)


Template Inheritance is an extremely useful technique for making reusable HTML layouts for a site. It is much more flexible than alternative techniques, such as “including” common elements of a page (like a header and footer file). Unlike other libraries, PHP Template Inheritance lets you write everything in straight PHP. There is no need to learn another template language.

PHP Template Inheritance

 

PixelZoomer


PixelZoomer is a Firefox extension for web developers which allows for zooming into
websites. The core features are characterized by tools for pixel perfect measuring of
distances and picking colors (HEX codes) with an eye dropper. The viewable area of a web
page is being displayed in PixelZoomer through using a screenshot so that the view is based
on real pixels.

PixelZoomer

 

Simple Cloud API


Simple Cloud API is an open source project providing common PHP interfaces for File Storage, Document Storage, and Simple Queue cloud services. You can start writing scalable, highly available, and resilient cloud applications that are portable across all major cloud vendors

Simple Cloud API

 

Smokescreen


Smokescreen is a new open-source project aimed at converting Flash to JavaScript/HTML5 to run where it previously couldn’t and better interoperate with webpages where it previously could. It means that with Smokescreen you can reach new platforms without learning any new tools; your Flash is automatically converted to JavaScript/HTML5.

Smokescreen

Live demos showing Smokescreen in action:

http://smokescreen.us/demo/

 

Tiny Fluid Grid


Tiny Fluid Grid can help you build fluid grid based websites with the happy & awesome way.

Inspired by 1kbgrid.com. Developed with love by Girlfriend’s overconfident and pretty good looking team of web developers. Tiny Fluid Grid ships with a index.html with demo code, and the grid.css containing the CSS for the grid you created.

Tiny Fluid Grid

 

UKI


Uki is a fast and simple JavaScript user interface toolkit for desktop-like web applications.
It comes with a rich view-component library ranging from Slider to List and SplitPane.

UKI

 

User Agent Switcher


The User Agent Switcher extension adds a menu and a toolbar button to switch the user agent of the browser.

User Agent Switcher

 

Venkman JavaScript Debugger


Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Gecko-based browsers namely Firefox 3.x, the Netscape 7.x series of browsers, Netscape 9.x series, Mozilla Seamonkey 1.x and Mozilla Seamonkey 2.x. The debugger is available as an add-on package in XPI format.

Venkman JavaScript Debugger

 

Web Developer Toolbar


The Web Developer extension adds a menu and a toolbar with various web developer tools.

Web Developer Toolbar

 

Websecurify


Websecurify is a powerful web application security testing environment designed from the ground up to provide the best combination of automatic and manual vulnerability testing technologies.

Websecurify

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
RSS Enjoy this Post? Subscribe to Ntt.cc

RSS Feed   RSS Feed     Email Feed  Email Feed Follow us Follow us
You can leave a response, or trackback from your own site.

2 Responses to “40 Free & Useful Web Development and Designer Tools Probably You Don’t Know”

  1. Paul says:

    Those who are looking for UI library might also check dhtmlx: http://dhtmlx.com/ – very rich Ajax/JavaScript library for building desktop-like applications.

  2. Forouzani says:

    Browserlab is an excellent tool for checking rendering, too bad it doesnt work very well when testing AJAX interactions.

Leave a Reply