Javascript

  • jQueryDownload | Site | Cheat Sheet | 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 Specialized Widgets

  • Tipsy 0.1.2Download | 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 | Site
    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.1Download | 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$19.95 | 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.
  • Javascript Email Enkoder (Spam protection)Site
    Protect email addresses by converting into encrypted JavaScript.

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.
  • Syncotype BookmarkletSite
    Overlays a customizable baseline grid on your web page.

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: Five Unordered Lists:

Pixel Icons

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.
    165 Vectoricons Preview

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.

Hosting

  • ServInt - Current host of choice$49 | Site | Review
    Solid virtual private server host. Have many sites with them.

    I am currently hosting 20 domains on their cheapest VPS option called the Essential. You have complete control, can have your own DNS servers and includes 4 IPs. Most of these sites are fairly low traffic, but at times the server was getting hammered and it remained responsive. One particularly complex site that has a lot of MySQL queries and a lot of traffic did overload the system. But implementing a simple caching system on that site completely relieved the problem. (Also optimizing some of the tables/queries helped too :-)

    Anyway, I love the flexibility and guaranteed resources of a VPS compared to a shared host. This is especially important if you are hosting a site that has the possibility of consuming a lot of CPU. Shared hosts will shut your site down completely if you go over their quota. At least with a VPS you can tweak things to throttle resources yourself without being at the mercy of the hosting provider. And of course with guaranteed resources, you know that your site will not be at the mercy of the other hundreds of sites competing for resources on a shared host.

    Customer support has been awesome. Everytime I've called, there has been NO hold time and the staff knew what to do. Their online ticket system was equally responsive. I'd say, besides performance, having quality support is what makes or breaks a host. Sounds like I work for them, right?

  • BlueHost - Decent shared host$7 | Site | Review
    Am currently hosting some small to medium sites here.

    Bluehost is a good choice to park your web clients. They completely oversell (bandwidth, domains, email etc are all "unlimited") but performance is decent for a shared host. The CEO maintains a blog and is fairly transparent with what is happening with the company and service issues. I've had sites with them since 2004 and never had a bad experience. I've hosted most of my previous client work with them.

    Customer support is very good. They work hard to minimize hold times and staff is knowledgeable. Never had a problem they couldn't address.

    It feels like shared hosts are all pretty much reached parity nowadays, but Bluehost has been around a long time and has quite a large hunk of the market. They know it and (at least from what I read from the CEO) they work hard to own the shared hosting category.

  • DreamHost - Another low-cost host$6 | Site
    Many colleagues have small to medium sites hosted here.

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:

  • 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:
  • 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.3Install | Site
    Edit, debug, and monitor CSS, HTML, and JavaScript live.
  • Web Developer's ToolbarInstall | Site
    Adds a menu and a toolbar with various developer tools.
  • View Formatted SourceInstall | Site
    Displays formatted source and CSS info for each element.
  • YSlowInstall | 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.
  • Sequel Pro 0.9.3Download | Site
    Successor to invaluable CocoaMySQL. Gives direct access to MySQL databases on local and remote servers. Donationware.
  • 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

  • DNSstuffSite
    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 ManagmentFREE/$12/$40/$90 | Site
    Very good service for tracking time, logging expenses, invoicing clients, etc...
  • Etherpad - Collaboration ToolSite
    Collaborate on any text programming document.
  • Campaign Monitor - Bulk EmailSite
    Email sending for designers. $5 + 1¢ per address per mailing.
  • Web Development Project EstimatorSite
    Estimate time & materials required for a web project.

Cheat Sheets