Javascript

  • jQuery 1.2.3 Download | Site | Docs | Plugins
    My favorite Javascript framework with a small footprint at 20k.
  • SWFObject 1.5 Download | Site
    Defacto script for embedding Flash content.
  • OffspringDownload | Site
    Automatically applies .first-child, .last-child, .only-child classes to DOM elements.
  • Dean Edwards IE7 ScriptDownload | Site
    Library makes IE5/6 behave like IE7.
  • NicEditDownload | Site
    Turns any textarea into a WYSIWYG editor.
  • Reflection 1.7Download | Site
    Adds a wet-floor effect to any image.

jQuery Essential Widgets

jQuery Specialized Widgets

  • jQuery Custom Checkbox 1.0Download | Site
    Easily replace checkboxes and radios with custom graphics.
  • jTagEditor 1.1.1Download | 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.
  • Date Picker 2.0Download | Site
    Creates a popup date picker to easily fill in forms.
  • Table Sorter 2.0.1Download | Site
  • Ingrid DatagridsDownload | Site
  • Star RatingDownload | Site
    Creates a star rating interface based on a simple form.
  • jMedia 1.01Download | Site
    Flexible multi-media embedding. Supports: Flash, QT, Real, +.
  • BlockUI 1.33Download | Site
    Prevents activity with the window or elements when using AJAX.
  • jCarousel 0.2.2Download | Site
    Scroll items in horizontal or vertical order with controls.
  • Farbtastic 1.2 Color PickerDownload | Site
    HSL color picker widget.

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.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.6.0Download | Site | Docs | Forums
    Easy, documented framework by the devs of ExpressionEngine.
  • mySQLDumperDownload | Site
    Quality backup solution for large mySQL databases.
  • PHP Development GuidelinesSite
    Best practices for PHP development from the EE guys.
  • PHPMailer 2.0Download | 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.

Flash Components

  • JW FLV Player 3.12€15 | Download | Site
    SWF file that displays FLV videos. Free for personal use.
  • SlideShowPro 1.6.7$25 | Site | Manual | Adv Guide
    Gallery and slideshow Flash component. 60 options.
  • MonoSlideShow$19.95 | Site | Manual
    Gallery and slideshow SWF file. 150 options.
  • photoFLIP$34.90 | Site
    Customizable iTunes Coverflow clone.
  • 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€10/€20/€50/€75 | Site
    Nice-looking, configurable, multi-file, Flash uploader.

Miscellaneous Tools

  • Standalone IE6Download | Site
    Download a standalone version of IE6 you can install in XP.
  • Allan Jardine's "Design" BookmarkletSite
    Four overlay tools: Grid, Ruler/Guides, Measurement, Crosshair.
  • XRAY BookmarkletSite
    Select any page element and display its style info.
  • SpriteNavi Menu Tool for FireworksSite
    Takes the work out of creating sprite-based horizontal menus.

Grid Design

  • Blueprint CSS 0.6Download | Site
    Stylesheet set that combines some of the best thinking on css design. Grids, typography, reset included.
  • GridMaker2 for Photshop CS2+Download | Site
    Photoshop script that creates custom grids.
  • GridMaker2 (columns only)Download
    A modified version that only outputs columns.
  • Grid DesignerSite
    Online tool to design and preview a grid system. This one also includes side margins.
  • Grid CalculatorSite
    Online tool to design and preview a grid system.
  • Syncotype BookmarkletSite
    Overlays a customizable baseline grid on your web page.

Content Generators

  • Ajax Loading GraphicsSite
    Online tool to customize an animated loading graphic.
  • Loader GeneratorSite
    Another tool to customize one of 99 different loading graphics.
  • Stripe GeneratorSite
    Online tool to customize background stripe tiles. Also Stripe Mania.
  • Background Maker (Tiled Backgrounds)Site
    Online tool to make pixel-by-pixel tiled backgrounds.
  • CornerShopSite
    Online tool to generate rounded corner graphics and code.
  • LipsumSite | Copyable Text
    Generic lorem ipsum copy for roughing in content.
    Ten Paragraphs: Five Unordered Lists:

Pixel Icons

Vector Icons

  • ClickBits$49 | Site
    792 arrows and web-related icons 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

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

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("csshover.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.

    /* 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;
    }

Must-Know CSS 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 ResetSite
    Several variations exist here. Resetting all the styles to a baseline helps a lot in styling websites. Season to taste.
    Yahoo YUI Reset | Eric Meyer's Reset | rikrikrik Reset
  • Clearing Floats without Extra MarkupSite | Code
    Avoid adding extra markup to your documents using this method to clear floats.

    .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.*/

General HTML Techniques

  • Resize a Popup to Fit an Image's SizeSite | Code
    Make a popup window resize perfectly to the image.
    Parent Window code:
    Popup Window code:

Typography

  • 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

  • FirebugInstall | 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 SelectorsInstall | 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.

Mac Software

  • MAMP 1.7Download | Site
    Installs a self-contained local hosting environment on your Mac. (M)ac, (A)pache, (M)ySQL, (P)HP.
  • Headdress 1.3.8$14.99 | Download | Site
    Host multiple sites on your Mac. 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. Beats BBedit hands down.

Services

  • Vector MagicSite
    The best bitmap to vector converter out there. Free.
  • Bulk Email with Campaign MonitorSite
    Campaign Monitor is an email newsletter sending service geared towards designers. $5 + 1¢ per address per mailing.
  • Domain Names by PickyDomainsSite
    PickyDomains will help you come up with a good/available domain name for only $50.
  • Bust A Name Domain SearchSite
    Two-word combination searches and quick lookups.
  • NameBoy Domain SearchSite
    Good name suggestor tool.
  • Add This Social Bookmarking WidgetSite
    Widget helps visitors bookmark your page on social media sites.

Cheat Sheets