Javascript

jQueryDownload | Site | Docs | Plugins
My favorite Javascript framework with a small footprint at 20k.
SWFObject 2.1 Download | Site | FAQ
Defacto script for embedding Flash content.
OffspringDownload | Site
Auto-applies .first-child, .last-child, & .only-child classes.
Dean Edwards IE7 ScriptDownload | Site
Library makes IE5/6 behave like IE7.
NicEditDownload | Site
Turns any textarea into a WYSIWYG editor.
Reflection 2.0Download | Site
Adds a wet-floor effect to any image.
JSLintSite
Identifies problems in JavaScript programs.
Jash: Javascript ShellSite
Cross-browser Javascript command-line debugging tool.

jQuery Essential Widgets

jQuery UI 1.5.3Download | Site
Official jQuery user interface components and interactions. This makes several plugins obsolete, like Tabs and Accordion.
jdMenu 1.4.1Download | Site
Accessible, hierarchical dropdown menus.
idTabs 2.2Download | Site
Simple tab plugin.
Accordion 1.6Download | Site
ThickBox 3.1Download | Site
jQuery-compatible Lightbox clone.
Cycle 2.32 | Site
Highly configurable slideshow plugin with many options.
Easy SliderDownload | Site
Make images or content slide horizontally or vertically on click.
InnerFadeDownload | Site
Fades any set of elements like a slideshow, a news ticker etc.
jQuery FancyZoomDownload | Site
Free jQuery version of Cabel Sasser’s FancyZoom.

jQuery Specialized Widgets

Tipsy 0.1.2 Download | Site
Facebook-style tooltips utilizing anchor’s title attribute.
Auto-Grow TextareaDownload | Site
Modifies a textarea to grow vertically as it becomes full.
Input HintsDownload | Site
Displays in-field hints on text input elements.
markItUp! 1.1.5Download | Site
Turns textarea tag into a markup editor with various syntaxes.
jEditable 1.5.1Download |
Makes any element a click-to-edit, Ajaxified item.
BlockUI 2.14Download | Site
Prevents activity with the window or elements when using AJAX.
jCarousel 0.2.3Download | Site
Scroll items in horizontal or vertical order with controls.
Custom Checkboxes 1.1.0b2Download | Site
Date Picker 2.1.2Download | Site
Table Sorter 2.0.3Download | Site
Ingrid Datagrids 0.9.1 | Site
Star RatingDownload | Site
Farbtastic 1.2 Color PickerDownload | Site

jQuery “Extensions”

jQuery MetadataDownload
Embed metadata in HTML tags. See code for examples.
jQuery Easing 1.3Download | Site
jQuery library for advanced sliding-type animations.
Bgiframe 2.1.1Download | Site
Used when you show elements over a select control in IE6.
More Selectors 1.1.3.1Download | Site
Adds a plethora of interesting selector options.

PHP/MySQL

CodeIgniter 1.7.0Download | Site | Docs | Forums
Easy, documented framework by the devs of ExpressionEngine.
pChart 1.2.7Download | Site | Docs
PHP classes to render high-quality charts.
mySQLDumperDownload | Site
Quality backup solution for large mySQL databases.
PHP Development GuidelinesSite
Best practices for PHP development from the EE guys.
PHPMailer 2.3Download | Site | Tutorial
Send email with attachments, HTML and embedded images.
TAR/GZIP/BZIP2/ZIP Archives 2.1Download | Site
Builds and downloads zip+ files on the fly.
ROS PDF ClassDownload | Site
Module-free creation of PDF documents from within PHP.

Flash Components

Open Source FLV PlayerDownload | Site | Docs
“OS FLV” – Open source, embedable player for Flash video.
JW FLV Player 3.12€30 | Download | Site
SWF file that displays FLV videos. Free for personal use.
SlideShowPro$29 | Site | Wiki
Gallery and slideshow Flash component. 60 options.
MonoSlideShow | Site | Manual
Gallery and slideshow SWF file. 150 options.
XSPF Flash MP3 Music Player (Slim)Download | Site
SWF file that plays mp3 songs and playlists.
Date Slider 1.1Download | Site
SWF file that selects a date range.
amChartsFree/€85/€275 | Site
Customizable Flash charts. Free version embeds link to vendor.
TWF Flash Uploader€15/€50 | Site
Nice-looking, configurable, multi-file, Flash uploader.

Miscellaneous Tools

IETester 0.2.3Download | Site
IE8b2, IE7 IE6 and IE5.5 on Vista & XP in one browser! WOW!
IE6 & 7 on Mac IntelDownload These | Then Follow This
Run IE on Mac Intel for free with Sun’s VirtualBox.
Standalone IE6Download | Site
Download a standalone version of IE6 you can install in XP.
Create Favicons in PhotoshopMac Plugin | Win Plugin
Install this PS plugin to add ability to save in .ico format.

Bookmarkelets

Web Development BookmarkletsSite
Tools for manipulating Javascript, CSS, and DOM in browser.
Allan Jardine’s “Design” BookmarkletSite
Four overlaid tools: Grid, Guides, Measurement, Crosshair.
XRAY BookmarkletSite
Select any page element and display its style info.
Visual Event BookmarkletSite
Visually show what events are attached to DOM elements.

Grid Design

960 Grid SystemDownload | Site
Grid system based on 960px wide design in 2 column widths.
12 column – 60px wide columns, 20px gutters.
16 column – 40px wide columns, 20px gutters.
Blueprint CSS 0.8Download | Site
24 column grid with typography, utlities & reset included.
GridMaker2Rows & Columns | Columns Only | Site
Essential Photoshop script that creates custom grids.
Grid DesignGridr Buildrrr | Designer | Calculator
Tools to design and preview grid systems.

Content Generators

Preloader GraphicsAjaxLoad | LoadInfo | Preloaders.net
Online tools to customize an animated ajax/loader graphic.
Stripe GraphicsStripe Generator | Stripe Mania
Online tools to customize background stripe tiles.
Background Maker (Tiled Backgrounds)Site
Online tool to make pixel-by-pixel tiled backgrounds.
favicon.ccSite
Online tool to generate favicons.
CornerShopSite
Online tool to generate rounded corner graphics and code.
Dummy Text GeneratorSite
Best tool for generating dummy content. Highly configurable.
LipsumLipsum | Lorem2 | html-ipsum | Text
Generic lorem ipsum copy for roughing in content.

Ten Paragraphs:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ligula nunc, pulvinar at, dictum vel, gravida et, ante. Quisque porta cursus metus. Proin imperdiet, libero id egestas auctor, nisi eros dapibus mauris, eget convallis elit ipsum eu odio. Sed purus eros, interdum ut, volutpat vel, sollicitudin quis, ante. Cras dictum, lorem vulputate adipiscing hendrerit, nisl odio feugiat nisl, feugiat euismod eros urna et dui. Nunc et elit. Fusce scelerisque risus id nunc. Vivamus nonummy placerat lacus. Vivamus vitae orci. Cras sed lacus. Suspendisse convallis ipsum et nulla. Donec felis enim, blandit vitae, tristique sit amet, accumsan eu, lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Sed mattis diam posuere neque. Cras consequat. Morbi ut nunc. Vivamus et ante vitae dui ullamcorper malesuada. Quisque tellus odio, adipiscing vel, eleifend at, luctus eu, massa. Phasellus in ligula ut elit cursus cursus. Sed felis sem, imperdiet viverra, feugiat at, rutrum sit amet, neque. Mauris malesuada nisl quis dolor. Aenean non est sit amet lacus dapibus malesuada. Duis id lorem. Quisque sed erat ut ante feugiat feugiat. Vivamus vestibulum hendrerit magna. Suspendisse ut augue nec elit mollis nonummy. Sed laoreet orci. Proin posuere, leo vel feugiat ultricies, enim enim bibendum arcu, vel semper felis ipsum pretium risus. Fusce pharetra, ligula ac tincidunt laoreet, eros lectus hendrerit ligula, at tincidunt est dolor ac enim. Nullam turpis orci, tristique eu, egestas vel, vehicula eget, elit. Quisque ac erat sed augue tempor ullamcorper. Proin ultrices. Aliquam condimentum. Ut metus lacus, ultrices id, vestibulum et, volutpat sit amet, nulla. Quisque tempor cursus lorem. Ut id nunc ut velit vestibulum auctor. Sed rhoncus pede in ante. Etiam ut lorem ac quam suscipit feugiat. Cras lorem enim, vulputate vel, auctor vitae, auctor ac, metus. Nam id odio. Curabitur pretium velit ac tellus. Sed nec tortor. Pellentesque ac tortor ac ante vestibulum dictum. Sed congue ornare ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas et turpis. Aenean vitae orci. Phasellus vel nulla quis est venenatis pulvinar. Mauris fringilla. Pellentesque arcu nisi, sagittis nec, congue eget, iaculis quis, lorem. Sed lacinia purus sed velit blandit egestas. Curabitur placerat urna a arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas urna enim, facilisis id, facilisis sed, pulvinar sed, nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus fermentum. Vivamus dictum blandit nisl. Fusce non ipsum id odio condimentum ultricies. Cras blandit gravida turpis. In hac habitasse platea dictumst. Praesent sem augue, rutrum sit amet, lacinia vitae, sodales id, pede. Vivamus enim enim, vulputate eget, mollis eget, faucibus id, turpis. Aenean tempor sollicitudin magna. Nullam quis lorem. Phasellus vitae dui. Pellentesque diam enim, consectetuer eget, iaculis quis, euismod sed, lorem. Phasellus vulputate lorem eu leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas nisi arcu, eleifend sit amet, condimentum quis, vehicula quis, lectus. Maecenas vitae magna. Pellentesque condimentum, odio quis lacinia dictum, urna ante laoreet risus, ut vulputate sapien mauris sit amet nisl. Maecenas eu justo. Quisque neque tellus, placerat vitae, tristique nec, consequat non, dui. In hac habitasse platea dictumst. Suspendisse cursus. Quisque iaculis rutrum urna. Duis vestibulum dignissim metus. Suspendisse mattis velit. Mauris lectus lacus, faucibus sed, gravida eget, ornare nec, eros. Aliquam ultrices nisi vitae lacus. Vivamus mattis mollis enim. Maecenas lacinia tincidunt erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti. Curabitur eget nulla a sapien mattis nonummy. Nam est risus, lobortis id, feugiat eget, egestas a, elit. Vivamus euismod porta nulla. Sed luctus, mauris ut imperdiet porttitor, purus pede vestibulum eros, a lobortis turpis quam eget lacus. Fusce eros orci, pellentesque ac, vulputate eu, interdum eu, magna. Praesent placerat tincidunt metus. Phasellus volutpat augue vitae orci. Fusce adipiscing elit et diam. Cras erat quam, adipiscing nec, ullamcorper at, dapibus a, dolor. Pellentesque urna. In rhoncus. Morbi diam nisl, sagittis quis, egestas in, fermentum aliquam, tellus. Etiam consectetuer massa vel odio. Vestibulum non nibh in dui fermentum venenatis. Nam et nisl. Morbi ultrices nibh. Morbi non tellus. Ut eget tortor. Proin enim leo, fermentum in, hendrerit et, commodo quis, quam. Quisque vel nibh a mi vehicula consequat. Nulla sed odio vel urna semper imperdiet. Aliquam auctor lectus vel eros. Nunc sagittis. Donec auctor faucibus odio. Quisque faucibus imperdiet neque. Suspendisse euismod. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pharetra. Duis aliquam pharetra orci. Nulla risus dolor, tristique quis, tincidunt vitae, vestibulum vel, libero. Nam venenatis ipsum ut ligula. Cras semper pretium massa. Vestibulum risus pede, sagittis eget, venenatis a, facilisis euismod, ligula. Morbi mauris ipsum, consectetuer sollicitudin, adipiscing et, tincidunt quis, nulla. Vivamus non nibh nec pede fermentum ultricies. Etiam eleifend semper magna. Mauris imperdiet consectetuer urna. Duis nec lorem in lacus convallis vestibulum. Ut laoreet mauris vel elit. Cras accumsan adipiscing nisl. Cras ornare adipiscing orci. Praesent tincidunt, arcu gravida tincidunt dignissim, lacus tellus aliquet erat, vitae consectetuer leo lacus a lacus. Quisque eu leo. Integer pede magna, ornare id, mollis elementum, bibendum vitae, felis. Integer tempor, dui eget consequat euismod, odio nisi fringilla ipsum, nec euismod metus magna in odio. Curabitur lacinia laoreet orci. Nam vitae libero eu tellus tempus pellentesque. Maecenas laoreet, risus eu ullamcorper rhoncus, massa nisi auctor quam, et dapibus quam lacus sit amet purus. Pellentesque at velit at urna mattis semper. Phasellus nec nulla ut risus facilisis imperdiet. Donec aliquam commodo mauris. Fusce a neque at dui bibendum luctus. Aliquam erat volutpat. Nam nec ante. Sed sagittis elementum urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec at diam sed augue commodo vehicula. Nunc vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi.

Five Unordered Lists:

<ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Donec auctor venenatis est.</li> <li>Vivamus cursus aliquet metus.</li> <li>Sed interdum tempor mauris.</li> <li>Duis et diam at erat consectetuer tempus.</li> </ul>  <ul> <li>Cras quis mauris eget sem pharetra convallis.</li> <li>Nulla sed enim sed nunc pharetra faucibus.</li> <li>Mauris quis ante in sapien feugiat sagittis.</li> <li>Maecenas blandit dolor non ipsum tincidunt malesuada.</li> <li>Nam aliquet odio quis leo.</li> <li>Fusce at lacus vel nunc convallis feugiat.</li> </ul>  <ul> <li>Donec blandit rhoncus massa.</li> <li>Integer convallis bibendum diam.</li> <li>Morbi id nisl et eros lacinia sollicitudin.</li> <li>Phasellus fringilla sodales enim.</li> </ul>  <ul> <li>Phasellus at quam commodo odio faucibus lobortis.</li> <li>Nunc posuere sollicitudin nisi.</li> <li>Integer aliquet nunc id diam.</li> <li>Donec semper tellus ut metus.</li> <li>Pellentesque cursus suscipit purus.</li> <li>Pellentesque faucibus consectetuer tellus.</li> </ul>  <ul> <li>Sed mattis est id nulla.</li> <li>Etiam sollicitudin neque eget diam eleifend feugiat.</li> <li>Quisque vitae sapien eu velit commodo posuere.</li> <li>Aliquam ultricies diam at arcu.</li> <li>In pulvinar aliquam odio.</li> <li>Sed tristique felis sollicitudin quam.</li> <li>Nam venenatis venenatis massa.</li> </ul>

Pixel Icons

Silk IconsDownload | Site | Preview
1,000 16×16 PNG icons with transparency. A must have set.

Silk Companion IconsDownload | Site | Preview
420 Silk-style 16×16 PNG icons with transparency.

BSN Mini Icons 2 | Site | Preview
113 10×10 grayscale gif icons with transparency.

Diagona Icons$19.95 | Download | Site | Preview
400 10×10 and 16×16 PNG icons with transparency. Purchase to remove Creative Commons attribution requirement.

Fugue Icons$49.95 | Download | Site
1263 16×16 PNG icons with transparency. Includes PSDs to modify. Purchase to remove Creative Commons attribution requirement.

SizconsDownload 16×16 | 12×12 | Site | Preview
43 16×16 and 12×12 PNG icons with transparency.

Aqua Gloss IconsDownload | Site | Preview
32 128×128 PNG icons with transparency. 32px resizes shown.

Matt Ball’s Developer Icons | Preview
44 32×32 TIFF toolbar-style icons with transparency.

Danish Royalty Free IconsDownload | Site | Preview
96 32×32 PNG toolbar-style icons with transparency.

Sekkyumu Developpers Icons [sic]Download | Site | Preview
105 32×32 PNG/.ico toolbar-style icons with transparency.

Quality Royalty Free Icons
IconDrawer – 140 icons for $84 plus 48 add-ons for $29.
IconShoppe – 56 Stockholm icons for $45 with free minis.
MicroIco – 64 mini 8×8 icons for $6.
N.Design – 175 12×12 plus 82 8×8 for $30.

Vector Icons

ClickBits$49 | Site
792 arrows & web-related icons in OpenType font format.
InfoBits$29 | Site
188 web-related icons & dingbats in OpenType font format.
165 Vector Icons by GoSquaredSite | Preview
Free, useful icons in SVG, JPG and Illustrator CS2 format.

Backgrounds & Styles

Illustrator – Basic Gradients by GoSquaredSite
Free, Web2.0-style gradients in SVG or Illustrator CS2 format.
Illustrator – Web 2.0 Gradients by dezinerfolioSite
130 Illustrator gradients. Matches PS gradients below.
Photoshop – Web 2.0 Gradients by dezinerfolioSite
130 Photoshop gradients.
Photoshop – Web 2.0 Layer StylesSite
131 Photoshop layer styles by deszinerfolio.com.
Photoshop – Web 2.0 Gradients by EuphorishSite
70 Photoshop gradients.

Browser Compatibility

PNG Support in IEDownload | Site | Code
Enable transparent PNG support in IE.

blank.gif:
You must put the included blank.gif file in the /root of your website.

CSS File:
img { behavior: url(/css/iepngfix.htc);
/* Note that the url MUST be from the root or IE won’t find it. */}

.htaccess File (or Apache MIME Type):
AddType text/x-component .htc
PNG Support in IE (CSS Only)Site | Code
Enable transparent PNG support in IE6 using only CSS.

blank.gif:
You must put a blank.gif file in the /root of your website.

CSS Code:

* html img, * html .png{ azimuth: expression( this.pngSet?this.pngSet=true:(this.nodeName == “IMG” && this.src.toLowerCase().indexOf(‘.png’)>-1?(this.runtimeStyle.backgroundImage = “none”, this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src='” + this.src + “‘, sizingMethod=’image’)”, this.src = “/blank.gif”):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace(‘url(“‘,”).replace(‘”)’,”), this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src='” + this.origBg + “‘, sizingMethod=’crop’)”, this.runtimeStyle.backgroundImage = “none”)),this.pngSet=true ); }
Whatever:hover in IEDownload | Site | Code
Enables css :hover support in IE.

body{behavior:url(“csshover3.htc”);}
IE Browser Filtering/TargetingSite | Code
Some hacks to target different browsers.

border:1px solid green; /* works in all */

*border:1px solid red; /* targets IE6 and 7 */

_border:1px solid blue; /* targets IE6 */
Misc Browser WorkaroundsCode
Click the code link to see some collected browser workarounds.

/* Remove field focus highlight
in Safari & Opera */
input, textarea {
outline-style:none;
}

/* max-width */
.selector {
max-width:XXXpx; /* For modern browsers */
width: expression(this.width > XXX ? ‘XXXpx’ :
true); /* For IE 6 */
}

/* min-height */
.selector {
min-height:XXXpx; /* For modern browsers */
height: auto !important;
height: XXXpx; /* For IE 6 */
}

/* min-width */
.selector {
min-width:XXXpx; /* For modern browsers */
width: auto !important;
width: XXXpx; /* For IE 6 */
}

/* inline-block for Firefox */
.selector {
display: -moz-inline-box;
display: inline-block;
}

CSS & HTML Techniques

Sliding DoorsSite
Not just for tabs, this technique is by far the most useful of all.
Taming ListsSite
Transform the meager list into something useful.
CSS ResetEric Meyer’s | Yahoo YUI Reset
Reset all CSS styles to a baseline. Season to taste.
Clearing Floats without Extra MarkupSite | Code
My method of choice for clean float clearing.

.clearfix:after {content: “.”; display: block; height: 0; clear: both; visibility: hidden;}

.clearfix {*zoom: 1;/*for ie 5.5-7*/}

/*Note these must be in this order, next to each other to work.*/
Resize a Popup to Fit an Image’s SizeSite | Code
Make a popup window resize perfectly to the image.

Parent Window code: <HTML> <HEAD> <TITLE>The Image Gallery</TITLE> <script language=”Javascript”> function PopupPic(sPicURL) { window.open( “popup.htm?”+sPicURL, “”, “resizable=1,HEIGHT=200,WIDTH=200″); } </script> </HEAD> <BODY bgcolor=”#FFFFFF”> <a href=”javascript:PopupPic(‘Image1.gif’)”>Image 1</a><br> <a href=”javascript:PopupPic(‘Image2.gif’)”>Image 2</a><br> <a href=”javascript:PopupPic(‘Image3.gif’)”>Image 3</a><br> </BODY> </HTML></textarea><br /> Popup Window code:<textarea style=”width:298px;font-size:9px;” name=”popup” rows=”10″> <HTML> <HEAD> <TITLE>Fit the Pic Script</TITLE> <script language=’javascript’> var arrTemp=self.location.href.split(“?”); var picUrl = (arrTemp.length>0)?arrTemp[1]:””; var NS = (navigator.appName==”Netscape”)?true:false; function FitPic() { iWidth = (NS)?window.innerWidth:document.body.clientWidth; iHeight = (NS)?window.innerHeight:document.body.clientHeight; iWidth = document.images[0].width – iWidth; iHeight = document.images[0].height – iHeight; window.resizeBy(iWidth, iHeight); self.focus(); }; </script> </HEAD> <BODY bgcolor=”#000000″ onload=’FitPic();’ topmargin=”0″ marginheight=”0″ leftmargin=”0″ marginwidth=”0″> <script language=’javascript’> document.write( “<img src='” + picUrl + “‘ border=0 />” ); </script> </BODY> </HTML>
Sticky FootersBest method | Alt Method
Tested cross-browser solution for sticky footers.

Typography

FontSquirrel – High Quality FREE FontsSite
Free, hand-picked, licensed-for-commercial-use fonts.
Facelift Image ReplacementDownload | Site
Dynamically generate text in custom fonts with PHP/JS combo.
Typical Cross-Browser Font CascadesSite | Sample
Use these fonts lists when specifiying fonts in your css.

Arial, Helvetica, sans-serif

Arial Black, sans-serif

Comic Sans MS, cursive

Courier New, Courier, monospace

Georgia, serif

Impact, sans-serif

Lucida Console, Monaco, monospace

Lucida Sans Unicode, Lucida Grande, sans-serif

Palatino Linotype, Book Antiqua, Palatino, serif

Tahoma, Geneva, sans-serif

Times New Roman, Times, serif

Trebuchet MS, Helvetica, sans-serif

Verdana, Bitstream Vera Sans, tahoma, sans-serif
Alternative Font CascadesSample
Interesting alternative cascades.

Gill Sans, Gill Sans MT, Verdana, sans-serif

Consolas, Bitstream Vera Sans Mono, Monaco, monospace
Default Mac FontsSite | Show

AmericanTypewriter

Andale Mono

Apple Chancery

Apple Symbols

Arial

Arial Black

Arial Narrow

Arial Rounded Bold

Baskerville

BigCaslon

Brush Script

Chalkboard

ChalkboardBold

Cochin

Comic Sans MS

Copperplate

Courier New

Courier

Didot

Futura

Geneva

Georgia

GillSans

Helvetica

HelveticaNeue

Herculanum

Hoefler Text

Impact

LucidaGrande

MarkerFelt

Monaco

Optima

Papyrus

Skia

Times New Roman

Times

Trebuchet MS

Verdana

Webdings

ZapfDingbats

Zapfino
Default Windows FontsSite | Show

Arial

Arial Black

Arial Bold

Arial Bold Italic

Arial Italic

Comic Sans MS

Comic Sans MS Bold

Courier New

Courier New Bold

Courier New Bold Italic

Courier New Italic

Franklin Gothic Medium

Franklin Gothic Medium Italic

Impact

Georgia

Georgia Bold

Georgia Bold Italic

Georgia Italic

Lucida Console

Lucida Sans Unicode

Palatino Linotype

Palatino Linotype Bold

Palatino Linotype Bold Italic

Palatino Linotype Italic

Symbol

Tahoma

Tahoma Bold

Times New Roman

Times New Roman Bold

Times New Roman Bold Italic

Times New Roman Italic

Trebuchet MS

Trebuchet MS Bold

Trebuchet MS Bold Italic

Trebuchet MS Italic

Tunga

Verdana

Verdana Bold

Verdana Bold Italic

Verdana Italic

Webdings

Wingdings

Firefox Extensions

Firebug 1.3 Install | Site
Edit, debug, and monitor CSS, HTML, and JavaScript live.
Web Developer’s Toolbar | Site
Adds a menu and a toolbar with various developer tools.
View Formatted Source Install | Site
Displays formatted source and CSS info for each element.
YSlow Install | Site
Analyzes pages and tells why they’re slow. REQUIRES FIREBUG.
Dust-Me Selectors 2.11Install | Site
Dust-Me Selectors finds unused CSS selectors in your site.
UrlParamsInstall | Site
Displays the GET and POST parameters of a web page.
Link CheckerInstall | Site
Checks all links on a webpage and reports broken ones.

Essential Mac Software

MAMP 1.7.2Download | Site
Self-contained local hosting. (M)ac, (A)pache, (M)ySQL, (P)HP.
VirtualHostX 1.1.1$9 | Download | Site | Tutorial
Host multiple sites on your Mac. Extremely useful with MAMP.
CSSEdit 2.6€29.95 | Download | Site
The best CSS editor on the market. An absolute must-have.
TextMate 1.5.7€39 | Download | Site
The best text editor ever.
Coda 1.6$99 | Download | Site
Popular all-in-one web development application.

SEO / Site Evaluation

Social BookmarkingAddThis | ShareThis | Tell a Friend
Widgets helps visitors post bookmarks to social media sites.
Website GraderSite
Measures effectiveness of a site based on SEO, traffic, etc.
W3C ToolsMarkup Validator | Link Checker | CSS Validator
Tools to check the validity and accuracy of your site.
Keyword Suggestion ToolSite
Meta tool that helps you research keywords a variety of ways.

Domains

DNSstuff Site
Configure, monitor & fix problems with your domain & email.
PickyDomains – Custom Domain Names$50 | Site
Creates a good/available domain name for only $50.
Domain Searchesbustaname.com | nameboy.com
Domain name searches and combination helpers.
SSLmatic – Cheap SSL Certificates$19.99 | Site
Discounted SSL certs from RapidSSL, GeoTrust and Verisign.

Analytics, Monitoring & Testing

Google AnalyticsSite
Free and full-featured analytics engine.
Mint$30 | Site
Popular self-hosted analytics app by Shaun Inman.
userflySite
Run instant usability studies using your real users.
Are My Sites Up?Site
Keeps an eye on your sites and warns you if they go down.

Services

Harvest – Biz Managment FREE/$12/$40/$90 | Site
Very good service for tracking time, logging expenses, invoicing clients, etc…
Etherpad – Collaboration ToolSite
Collaborate on any text programming document.
Mail Chimp – Bulk Email Site
Email sending for designers.
Web Development Project Estimator Site
Estimate time & materials required for a web project.

Cheat Sheets

Web Technologies.htaccess | mod_rewrite | PHP | MySQL
RelatedRegex

Web Design Tools

Web design tools and resources I use