Bookmarks

This is a running list of my favorite web design and development resource links, a (public!) replacement for browser bookmarks.

Please verify that you acquire the appropriate license for anything you use yourself.
Licensing matters.

bookmarks

Apps & Tools

  • Slack

    Slack is a real-time chat app for private groups and teams, with the greatest design/ attention to detail ever. [Referral link, we both get a credit if you sign up and pay.]

  • TimeCamp

    A nice, simple, well-designed online time tracking tool (with integrations and apps as well). [Referral link, sends us both credits if you sign up & pay.]

  • Speaker Deck

    A well-designed online tool for sharing slide presentations (no audio, just the slides).

  • Shopify Theme Gem

    A command-line tool for working with Shopify theme files (best feature is the watch command, which auto-uploads changed files).

  • Cloudup

    A quick and easy secure way to share screenshots and streaming media online. There’s currently a waitlist/ invite-only system but it’s worth it.

  • Design Quips

    A searchable repository of data, original sources, and research that backs up the things designers and developers say/ hear. Things like actual data on how video impacts email click-through rates.

  • Hackhands.io

    A free online tool that combines video chat, instant messaging, and real-time paired coding. Perfect for teaching/learning and troubleshooting.

  • tlk.io

    Free, easy-to-use, nice looking real-time web chat.

  • Tiff

    “A type diff tool that visually contrasts the differences between two fonts.” So cool.

  • Social Kit

    A free Photoshop (CS5, CS6 and CC) plugin with editable templates for common social media graphics such as Twitter backgrounds and cover images and Facebook cover images.

  • Kirby CMS

    A simple PHP based CMS. This cms uses only FTP and a good text editor. According to Maria Esther Cuan, who submitted this resource, “the file structure and the use is seamless.”

  • Every Time Zone

    A simple visual interface for at-a-glance time zone conversion. Great for working with international clients.

  • Snazzy Maps

    Style templates for custom Google maps implementations. Super, super useful.

  • ListiFy

    This web app converts a text list to an HTML list based on the parameters you set.

  • px to em

    Simple little online tool that converts px to em or vice versa. [Hat tip to Michael for the recommendation]

  • Flatdoc

    A JS library that renders Markdown files as full pages (letting you use them as documentation for a project).

  • HEX 2 RGBA Color Calculator

    Nice little tool that converts from hex color codes into RGB(A) for use in CSS.

  • PHP Live Regex

    Test out PHP regular expressions in real time. Amazing, especially since regex are so a mind-bending to deal with.

  • Gaug.es

    A subscription analytics provider. Why pay for analytics when GA does it free? For a simple, readable, intelligent UI, that’s why. You’ll actually USE your data, so in my opinion it’s worth it (I use it for my sites).

  • Am I Responsive?

    Ridiculously useful little tool to show a single site within various “devices.” Hard to describe, so just look – great for portfolios, client education, screenshots, etc.

  • Browse Happy

    A quick, easy way to check the latest version of each major browser with links to where you can download them if needed.

  • Support Details

    The easiest way to get all the info you need about OS, screen resolution, web browser, and more, from a client. Great for troubleshooting.

  • Built With

    Want to know if a site runs on WordPress or what programming languages it uses? This can tell you. (Formerly called “Under the Site.”)

  • Loads In

    Find out how fast a website loads across the world.

  • CSS3 Generator

    A quick way to test out and grab sample code for fun CSS3 effects.

  • BrowserStack

    Not free, but definitely my favorite cross-device/ browser testing tool.

  • 0 to 255 Color Variations Tool

    One of my favorite tools for finding variations on any color by hex code.

jQuery & JS

  • Instafeed.js

    A simple javascript plugin for including a feed of Instagram photos on a website (great for non-WordPress sites especially).

  • Magnifier.js

    A potential replacement for the ubiquitous MagicZoom (sans licensing cost), this is a javascript library for zooming in on images.

  • FitVids

    An easy-to-use jQuery plugin for responsive videos.

  • QuickSearch.js

    In-page live search for lists, tables, etc. In use on this very page!

  • FancySelect

    Streamlined, very pretty jQuery plugin for styling drop down menus. Very easy to use.

  • Scroll to Top

    Simple, concise and functional tutorial for creating a scroll-to-top button using simple jQuery.

  • Rhinoslider

    Yet another jQuery slider – this one has a nice fade effect and a generator that lets you pick your own settings before downloading the plugin.

  • jQuery Modal

    A super simple & lightweight modal for when you don’t need a ton of crazy options and features, and you do need small files and easy styling.

  • Filtrify

    The most ridiculously complete filtering functionality I’ve seen out there. Used on this site in for my current portfolio (my old portfolio used Quicksand).

  • Prism

    Syntax highlighting made pretty (and lightweight).

  • Galleriffic

    Super easy photo galleries, with available thumbnail navigation and multiple other methods of control.

  • fancyBox

    Zooming/ lightbox functionality for images, text, and other content types. I use this all the time, too many sites to list here.

  • List.js

    Gives you the ability to create searchable, filterable, sortable HTML lists and tables.

  • Picker

    Replace form checkboxes and radio buttons with nicer-looking, style-able versions.

  • jPages

    Pagination for everything! Easy-to-implement, flexible & powerful plugin for paginating any kind of content.

  • HorizontalNav

    Simple little plugin for getting horizontal navigation to fill the available space.

  • Tooltipster

    Allows you to create super flexible, customizable & easily styled tool tips. In use on this very page (hover over “Posts on this” or “Sites using this” icons).

  • Chosen

    Converts form select boxes into more user-friendly versions with search, among other features.

  • Backstretch

    Full-sized, scalable background images that keep their original aspect ratio.

  • FitText

    Flexible font sizing, useful for dynamic layouts. Meant for headlines and other display text.

  • jScrollPane

    Lets you scroll content blocks with nice-looking, customizable scroll bars from single divs to the whole page. Horizontal & vertical, and can be nested. Very flexible.

  • Quicksand

    A filtering and reordering plugin, with nice options for animation.

Reference – HTML & CSS

  • Unicode Converter

    Convert different types of unicode inputs to other types (for example HTML to CSS escapes).

  • Fix the Dropdown List Gap

    Super smart solution to fixing that problem where a dropdown disappears when you try to hover over it because you’re off the parent item.

  • Sassmeister

    Online tool that converts Sass to compiled CSS (helpful to check your Sass syntax).

  • HTML Entity Lookup

    Type in a character that looks like the entity you want and it’ll pull up a relevant list of symbols/ entity codes.

  • CSS Term Definitions

    Super helpful reference for CSS terminology, this tool shows you each term by highlighting the relevant parts of example CSS.

  • Mozilla Developer Network Web References

    Mozilla’s really well done reference site with all kinds of documentation and tutorials (basic to advanced).

  • Character-Code.com

    A reference for codes and entities for various characters, beautifully displayed in an easy-to-use format. Miraculous!

  • Clean Sticky Footer

    A CSS sticky footer demo – view the source to grab the code for your own projects.

  • Learn CSS Layout

    A nice, simple, but clearly illustrated introduction to CSS layouts.

  • Learn HTML & CSS

    This is the most well-done set of tutorials I’ve seen on HTML and CSS (there’re both beginner and advanced sections, with an intro to jQuery in the advanced section), in both content and design.

Reference - Miscellaneous

  • X Icon Editor

    Generate favicons at various sizes from an uploaded image file.

  • StackEdit

    An online markdown editor where you can preview your documents written in markdown in real time.

  • TDLR Legal

    As it says on the site, “software licenses in plain English.” Super useful reference!

  • Resources for Beginning Responsive Web Design

    An answer, with linked resources, to the “how do I get started” question by Jenn Lukas.

  • Design Quips

    A searchable repository of data, original sources, and research that backs up the things designers and developers say/ hear. Things like actual data on how video impacts email click-through rates.

  • DevDocs

    Combines documentation for a whole bunch of different languages into one easy to use interface. Genius! PHP, CSS, HTML, CSS, jQuery and many many more.

  • WebAIM

    A great organization aiming to get more websites to have content accessible to people with disabilities. Excellent resources & information.

  • Usability Checklist

    An online checklist designed to help you “catch common usability problems before user testing.”

  • Web Developer Checklist

    A suggested list of things to check before calling a project finished.

Business

  • Wistia

    Business-grade video hosting with a ton of features and flexible player styling at reasonable prices. Sold!

  • SignNow

    Another tool for sending, signing and reviewing contracts online. Lower cost than RightSignature.

  • Photoshop Etiquette

    My favorite (everyone’s favorite) guide to organizing your Photoshop web design files.

  • Name Cheap

    My preferred domain registrar, all my domains are through them.

  • Bluehost

    The low-cost hosting provider I recommend to all my clients. [Affiliate Link]

  • WP Engine

    Premium WordPress-only hosting – great security, speed and customer support. Used for this site. [Affiliate Link]

  • Docracy

    Fantastic resource for contracts and other legal documents.

Fonts

  • Mono Social Icons Font

    Another option for social media icons via web fonts.

  • Fontello

    Mix your own web font from a bunch of available icon web fonts.

  • Lost Type Co-op

    Pay-what-you-want approach to licensing, nice if sometimes trendy fonts.

  • Fontspring

    My favorite place to buy fonts, with solid, clear licensing terms & a nice selection.

  • Font Squirrel

    Free-for-commercial web fonts + a great converter tool.

  • Font Awesome

    An extensive icon web font, originally created for use with Twitter Bootstrap.

  • Beautiful Web Type

    This site shows off some of the nicer fonts available through Google Web Fonts.

Stock – Textures, Graphics, Patterns & Icons

  • All the Free Stock

    A single site linking out to a ton of places for free stock images, videos, and icons.

  • The Ink Nest

    Awesome, non-cheesy clip art (high res EPS and/or PNG) from talented illustrators. A lot of it is done with bloggers in mind, and it’s all beautiful.

  • CG Textures

    Huge repository of photos and textures, including odd but wonderful things like paint splatters and ink-in-water images.

  • Lost & Taken

    Collection of various textures, free for personal and commercial use.

  • Subtle Patterns

    Repeating background patterns. Available as PSDs as well.

  • The Haystack Dept.

    “A curation of usable, high resolution, found and original graphics, textures, type and patterns.” Low-cost but not free.

  • The Noun Project

    Large directory of icons for all sorts of concepts. Not all free, but reasonably priced and usually well done.

Learning the Basics

Dummy Content

  • WP Test

    A “fantastically exhaustive” set of importable posts, pages, and other content for testing your WordPress themes and plugins.

  • Random User Generator

    Like Lorem Ipsum, but for people, RandomUser provides you with a randomly generated user for use in web mockups. [Thanks to Angee Maree for sending this one in.]

  • Placebear

    In case you get tired of using kitten photos as placeholders, this site provides bears.

  • Placehold.it

    A quick and simple image placeholder service. [Thanks to Annalyn for the recommendation]

  • Blank Video Placeholder

    Just what it sounds like – a blank Vimeo video that you can use as a placeholder when working on a site that doesn’t have their video ready yet.

  • Blind Text Generator

    One of many resources for dummy text, this is a favorite because it has more options than most.

Reference – WordPress

  • Hookr.io

    Super useful searchable reference for WordPress hooks, classes, functions, and so on.

  • Tidy Repo

    A selection of well maintained and reliable WordPress plugin (since we all know not everything in the main repository meets those criteria).

  • PDF WordPress User Guide

    If you’re looking for a written introduction to WordPress, this guide is a great source. It seems to be updated regularly and is very thorough. Available in free and premium versions.

  • List of WordPress Utility Functions

    This isn’t an all-encompassing list but it’s a great start for learning some of the things WordPress can help you do using built-in functions.

Reference - Shopify

  • Shopify Theme Gem

    A command-line tool for working with Shopify theme files (best feature is the watch command, which auto-uploads changed files).

  • Shopify Documentation

    The official Shopify documentation – super useful and getting even better constantly.

  • Shopify Theme Guidlines

    Get the details on Shopify’s extensive theme guidelines right from the source.

  • Shopify Cheat Sheet

    In-browser reference for Shopify coding. Amazing.

Inspiration

  • Agile Designers

    Resources collected from all over. Icons, textures, brushes, all kinds of stuff really.

  • Media Queries

    Shows screenshots of responsive sites at different breakpoints.

  • 52 Weeks of UX

    A series of thoughtful articles on designing for user experience.

Reference – JS & jQuery

Client Education

  • WP101 Video Series

    This is a great free series of videos showing the basics of using WordPress. Still useful, although getting a bit outdated.

  • How to give web design feedback

    An interesting article aimed at helping designers teach their clients to give useful, workable feedback that doesn’t lead to a creative dead end.

  • Saving Images for the Web

    Nice short intro to the differences between GIF, JPEG, and PNG and when you’d use each when saving graphics for the web.

Reference – PHP & MySQL

  • PHP: The Right Way

    “An easy-to-read, quick reference for PHP popular coding standards…” – also includes links to tutorials and suggestions for best practices.