Web developer
» Firefox plugins | Javascript | PHP | XHTML | CSS
Firefox plugins
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page...
The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.
View HTTP headers of a page while browsing.
YSlow analyzes web pages and why they're slow based on Yahoo!'s rules for high performance web sites.
Greasemonkey is a Firefox extension that allows you to customize the way webpages look and function.
Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
This extenion is a GUI Front-end of 'about:cache'. Allows searching and sorting memory and disk cache files.
Javascript
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.
Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.
script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly.
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.
Pixastic is a JavaScript library which allows you to perform a variety of operations, filters and fancy effects on images using just a bit of JavaScript.
Reflection.js allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean.
Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element.
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics.
$fx() is a tiny, self-contained Javascript library for animating HTML elements. It doesn't require any other library to function and [should] play well with any other libraries you are using (Prototype, JQuery, MooTools, etc.).
$fx() allows you to alter any CSS property along a timeline, allowing animated effects to play in succession - i.e. in the order you want them to.
Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.
SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file.
Datejs is an open-source JavaScript Date Library. Comprehensive, yet simple, stealthy and fast. Datejs has passed all trials and is ready to strike. Datejs doesn't just parse strings, it slices them cleanly in two.
Sylvester is a JavaScript library designed to let you do mathematics with vectors and matrices without having to write lots of loops and throw piles of arrays around. It includes classes for modelling vectors and matrices in any number of dimensions, and for modelling infinite lines and planes in 3-dimensional space. It lets you write object-oriented easy-to-read code that mirrors the maths it represents.
JSMin is a filter which removes comments and unnecessary whitespace from JavaScript files. It typically reduces filesize by half, resulting in faster downloads. It also encourages a more expressive programming style because it eliminates the download cost of clean, literate self-documentation.
PHP
Although Smarty is known as a 'Template Engine', it would be more accurately described as a 'Template/Presentation Framework.'
Requires PHP Version 4.0.6 or higher.
SimplePie is a very fast and easy-to-use class, written in PHP, that puts the 'simple' back into 'really simple syndication'.
MagpieRSS provides an XML-based (expat) RSS parser in PHP. MagpieRSS is compatible with RSS 0.9 through RSS 1.0. Also parses RSS 1.0's modules, RSS 2.0, and Atom (with a few exceptions).
phpFlickr is a class written by Dan Coulter in PHP (compatible with PHP4 and PHP5) to act as a wrapper for Flickr's API. Methods process the response and return a friendly array of data to make development simple and intuitive.
PHP Twitter is (wrapper)class to communicate with the Twitter API.
Requires PHP cURL.
XHTML
This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc.
In order to check the validity of the technical reports that W3C publishes, the Systems Team has developed a link checker.
The Basics - what you should run on all your web pages.
The HiSoftware Cynthia Says portal is a web content accessibility validation solution.
When editing HTML it's easy to make mistakes. Wouldn't it be nice if there was a simple way to fix these mistakes automatically and tidy up sloppy editing into nicely layed out markup? Well now there is! Dave Raggett's HTML TIDY is a free utility for doing just that.
This specification defines the HyperText Markup Language (HTML), the publishing language of the World Wide Web. This specification defines HTML 4.01, which is a subversion of HTML 4. In addition to the text, multimedia, and hyperlink features of the previous versions of HTML (HTML 3.2 [HTML32] and HTML 2.0 [RFC1866]), HTML 4 supports more multimedia options, scripting languages, style sheets, better printing facilities, and documents that are more accessible to users with disabilities. HTML 4 also takes great strides towards the internationalization of documents, with the goal of making the Web truly World Wide.
This specification defines the Second Edition of XHTML 1.0, a reformulation of HTML 4 as an XML 1.0 application, and three DTDs corresponding to the ones defined by HTML 4. The semantics of the elements and their attributes are defined in the W3C Recommendation for HTML 4. These semantics provide the foundation for future extensibility of XHTML. Compatibility with existing HTML user agents is possible by following a small set of guidelines.
HTML5 Specification (W3C Editor's Draft)
This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.
W3C XHTML2 Working Group Home Page
The mission of the XHTML2 Working Group is to fulfill the promise of XML for applying XHTML to a wide variety of platforms with proper attention paid to internationalization, accessibility, device-independence, usability and document structuring.
CSS
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
"Yet Another Multicolumn Layout" (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.
The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.
Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets.
CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality).
CSS Sprite Generator allows you to automate the process of generating CSS sprites. Simply give it a ZIP file containing 2 or more images (GIF, PNG or JPG) and it will generate a sprite image and the corresponding CSS rules to target and display each component image.
Use this tool to find CSS selectors that aren't used by any of your HTML files and may be redundant.
Online CSS Optimizer is a web tool for reducing the file size of cascading style sheets. In order to save more space optimized files would be messy even so you may output it as a file. Non-valid or hacked (for certain browsers) CSS files may result in error.
This specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1). CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS 2.1 simplifies Web authoring and site maintenance.
