Front-End Bookmarks

This is a collection of essential (or just useful/inspirational) Front-End Development & Accessibility bookmarks, frequently used in our daily work.

I try to keep this list generic (with a few exceptions), focusing on higher level concepts instead, such as accessibility, architecture, performance, code quality, workflow and best practices.

This is a living document (no shit!).

Accessibility Resources

Generic

• Just Ask: Integrating Accessibility Throughout Design: http://www.uiaccess.com/JustAsk/
• The Web Accessibility Tools Consortium: http://www.wat-c.org/
• Accessible Data Tables: http://www.usability.com.au/resources/tables.cfm
• Data Table Accessibility Test Page: http://www.usability.com.au/resources/tabletest.cfm
• A recommendation for keyboard shortcuts to be used in website widgets (DHTML Style Guide): http://access.aol.com/dhtml-style-guide-working-group/
• The Paciello Group Blog: http://www.paciellogroup.com/blog/
• HTML5 Accessibility: http://html5accessibility.com/
• 7 web accessibility myths: http://www.nomensa.com/blog/2012/7-web-accessibility-myths-2/
• The Accessibility Project: http://a11yproject.com/
• BBC Accessibility Guidelines: http://www.bbc.co.uk/guidelines/futuremedia/accessibility/
• OpenAjax Accessibility Examples: http://oaa-accessibility.org/examples/
• Accessible Mega Menu (by Adobe): http://adobe-accessibility.github.io/Accessible-Mega-Menu/
• Quick Reference, Web Accessibility Principles: http://webaim.org/resources/quickref/
• Easy Checks - A First Review of Web Accessibility: https://www.w3.org/WAI/eval/preliminary
• Google Web Fundamentals - Accessibility: https://developers.google.com/web/fundamentals/accessibility/
• Deque University Accessibility Resources: https://dequeuniversity.com/resources/
• Making your service accessible: an introduction (Gov.uk): https://www.gov.uk/service-manual/helping-people-to-use-your-service/making-your-service-accessible-an-introduction
• Accessibility for Teams: https://accessibility.digital.gov/

Web Content Accessibility Guidelines (WCAG 2.0)

• Techniques for WCAG 2.0: http://www.w3.org/TR/WCAG20-TECHS/
• WebAIM's WCAG 2.0 Checklist for HTML documents: http://webaim.org/standards/wcag/checklist
• Web Content Accessibility Guidelines (WCAG) 2.0 Specification: http://www.w3.org/TR/WCAG20
• How to Meet WCAG 2.0 (A customizable quick reference to Web Content Accessibility Guidelines 2.0 requirements (success criteria) and techniques): http://www.w3.org/WAI/WCAG20/quickref/
• Accessibility Guidelines: https://accessibility.voxmedia.com/
• The Accessibility Cheatsheet: https://bitsofco.de/the-accessibility-cheatsheet/

Accessible Rich Internet Applications (WAI-ARIA)

• WAI-ARIA 1.0 Primer: http://www.w3.org/TR/wai-aria-primer/
• WAI-ARIA Best Practices: http://www.w3.org/TR/2008/WD-wai-aria-practices-20080204/
• WAI-ARIA 1.0 Authoring Practices: http://www.w3.org/TR/wai-aria-practices/
• WAI-ARIA 1.0 Specification: http://www.w3.org/WAI/PF/aria/complete
• WAI-ARIA 1.0 User Agent Implementation Guide: http://www.w3.org/TR/wai-aria-implementation/
• WAI-ARIA Roles: http://www.w3.org/TR/wai-aria/roles
• WAI-ARIA Best Practices: http://esw.w3.org/PF/ARIA/BestPractices
• WAI-ARIA Techniques for WCAG 2.0: http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/aria.html
• Code Talks: http://wiki.codetalks.org/wiki/index.php/Main_Page
• Carousels and ARIA Tabs: http://www.webaxe.org/carousels-and-aria-tabs/
• Tools & Code Examples for ARIA Development: http://www.webaxe.org/tools-code-examples-for-aria-development/
• Web Accessibility tutorial: http://itstiredinhere.com/accessibility/
• Using WAI-ARIA in HTML: http://rawgit.com/w3c/aria-in-html/master/index.html
• Accessibility: The Missing Ingredient: http://alistapart.com/article/accessibility-the-missing-ingredient
• ARIA design patterns: http://www.w3.org/WAI/PF/aria-practices/#aria_ex
• ARIA examples: http://heydonworks.com/practical_aria_examples/

Mobile Accessibility Best Practices

• Resources for Mobile Accessibility Guidelines: http://www.iheni.com/mobile-accessibility-guidelines/
• Mobile Web Best Practices 1.0: http://www.w3.org/TR/mobile-bp/
• Relationship between Mobile Web Best Practices (MWBP) and Web Content Accessibility Guidelines (WCAG): http://www.w3.org/TR/mwbp-wcag/
• BBC Mobile Accessibility Guidelines: http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile_access.shtml

Accessibility Libraries/Helpers

• Keyboard accessibility: http://davidwalsh.name/keyboard-shortcuts
• Styled accessible form controls: https://scottaohara.github.io/a11y_styled_form_controls/

Accessibility Tools

• http://www.paciellogroup.com/resources/contrastAnalyser
• http://wave.webaim.org/
• http://www.colororacle.org/
• WebAIM's Color Contrast Checker: http://webaim.org/resources/contrastchecker/
• Snook's Colour Contrast Check: http://www.snook.ca/technical/colour_contrast/colour.html
• Check My Colours: http://www.checkmycolours.com/
• Accessibility Testing Tools: http://www.paciellogroup.com/blog/2010/09/accessibility-testing-tools-we-use/
• Accessibility Testing Tools – updated: http://www.paciellogroup.com/blog/2014/10/accessibility-testing-tools-updated/
• The Visual ARIA Bookmarklet: http://whatsock.com/training/matrices/visual-aria.htm
• ally.js: http://allyjs.io/
• Color Safe: http://colorsafe.co/
• Web Accessibility Evaluation Tools List (by W3C): https://www.w3.org/WAI/ER/tools/
• Funkify - disability simulator: http://www.funkify.org/

Accessibility communities

• A11y Slack: https://web-a11y.slack.com/
• A11ySlackers on Gitter: https://gitter.im/w3c/a11ySlackers

Accessibility coding exercises

• Teach Access Tutorial: https://teachaccess.github.io/tutorial/

Inclusive Design

• Inclusive Design Principles: http://inclusivedesignprinciples.org/
• Inclusive Components: https://inclusive-components.design/

HTML5 Resources (semantic markup mainly)

HTML5 Specification

• The HTML5 specification, Web Developer Edition: http://developers.whatwg.org/
• HTML Living Standard: http://www.whatwg.org/specs/web-apps/current-work/multipage/
• HTML5 differences from HTML4 (section listing the new HTML5 elements): http://dev.w3.org/html5/html4-differences/#new-elements
• W3C HTML5 Specification: http://dev.w3.org/html5/markup/spec.html

Other HTML5 Resources

• HTML5 Hub: http://html5hub.com/#i.186eh3y11z4d4q
• HTML5 Doctor: http://html5doctor.com/
• HTML5 Demos and Examples: http://html5demos.com/
• HTML5 Test: http://html5test.com/
• HTML5 Rocks: http://www.html5rocks.com/en/
• HTML5 Test Pages (Robert Nyman): http://robertnyman.com/html5/
• HTML5 Readiness: http://html5readiness.com/
• HTML5 Outliner: http://gsnedders.html5.org/outliner/
• HTML5 Outliner bookmarklet/extension (h5o): http://code.google.com/p/h5o/
• HTML5 Validator: http://html5.validator.nu/
• HTML5 form elements: http://nativeformelements.com/
• HTML5 sectioning elements, headings, and document outlines: http://www.456bereastreet.com/archive/201103/html5_sectioning_elements_headings_and_document_outlines/
• HTML5 document outline revisited: http://www.456bereastreet.com/archive/201104/html5_document_outline_revisited/
• Using HTML5 semantic elements today: http://www.nczonline.net/blog/2011/03/22/using-html5-semantic-elements-today/
• HTML5 Right Here, Right Now: http://tantek.com/presentations/2010/11/html5-now/
• hAtom 0.1 Microformat: http://microformats.org/wiki/hatom
• A collection of HTML head elements: https://github.com/joshbuchea/HEAD

HTML5 Audio & Video

• HTML5 Audio and Video: What you Must Know: http://net.tutsplus.com/tutorials/html-css-techniques/html5-audio-and-video-what-you-must-know/
• Video for Everybody: http://camendesign.com/code/video_for_everybody
• Code examples for the book "The Definitive Guide to HTML5 Video": http://www.html5videoguide.net/
• Demos of HTML5 Video and Audio Tag Accessibility: http://www.annodex.net/~silvia/itext/
• HTML5Video.org (HTML5 Video Library & Web Video Developer Community): http://www.html5video.org/
• Video.js (HTML5 video player): http://videojs.com/
• Everything you need to know about HTML5 video and audio: http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
• MediaElement.js (HTML5 video/audio player with Flash and Silverlight shims): http://mediaelementjs.com/
• Accessible HTML5 Media Players: http://www.webaxe.org/accessible-html5-media-players-and-more/
• Accessible media player resources and demos: http://www.iheni.com/accessible-media-player-resources/

CSS

Generic & Tools

• Normalize.css: http://necolas.github.io/normalize.css/
• Sass: http://sass-lang.com/
• Sass Toolkit: https://github.com/davidrapson/scss-toolkit
• Compass: http://compass-style.org/
• LESS: http://lesscss.org/
• Universal IE6 CSS: http://code.google.com/p/universal-ie6-css/
• Don't use IDs in CSS selectors?: http://oli.jp/2011/ids/
• CSS3 Patterns Gallery: http://lea.verou.me/css3patterns/
• Effeckt.css: Performant CSS transitions & animations: http://h5bp.github.io/Effeckt.css/dist/
• Absolute Centering in CSS: http://codepen.io/shshaw/full/gEiDt
• An Introduction to CSS3 Transitions: http://www.css3.info/preview/css3-transitions/
• Ceaser, CSS Easing Animation Tool: http://matthewlein.com/ceaser/
• cubic-bezier.com: http://cubic-bezier.com/
• Easing Functions Cheat Sheet: http://easings.net/
• CSS3 Transitions, Transforms, Animation, Filters and more!: http://css3.bradshawenterprises.com/
• All you need to know about CSS Transitions: http://blog.alexmaccaw.com/css-transitions
• CSS3 Animation Cheat Sheet: http://www.justinaguilar.com/animations/
• A visual guide to Sass & Compass Color Functions: http://jackiebalzer.com/color
• Introducing Scut, a new Sass utility library: http://css-tricks.com/introducing-scut-new-sass-utility-library/
• Colorpeek: http://colorpeek.com/
• Framer (prototyping tool): http://www.framerjs.com/
• CSS Gradients: http://css-tricks.com/css3-gradients/
• Two pretty-good techniques for styling tricky form elements: http://blog.cloudfour.com/styling-form-elements/
• Replacing Radio Buttons Without Replacing Radio Buttons: http://www.sitepoint.com/replacing-radio-buttons-without-replacing-radio-buttons/
• Animate.css: http://daneden.github.io/animate.css/
• Motion UI: http://zurb.com/playground/motion-ui
• Stylable: https://stylable.io/

Inline Critical CSS

• criticalCSS: https://github.com/filamentgroup/criticalcss
• Critical Path CSS Generator: https://github.com/pocketjoso/penthouse

CSS Architecture

• SMACSS: http://smacss.com/
• OOCSS: http://oocss.org/
• The media object saves hundreds of lines of code: http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
• The flag object: http://csswizardry.com/2013/05/the-flag-object/
• BEM: http://bem.info/
• MindBEMding – getting your head 'round BEM syntax: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
• CSS Architecture: http://engineering.appfolio.com/2012/11/16/css-architecture/
• Decoupling Your HTML, CSS, and JavaScript: http://philipwalton.com/articles/decoupling-html-css-and-javascript/
• About HTML semantics and front-end architecture: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
• "Mobile first" CSS and getting Sass to help with legacy IE: http://nicolasgallagher.com/mobile-first-css-sass-and-ie/
• Sass with legacy IE: http://jakearchibald.github.com/sass-ie/
• inuit.css (Sass-based, BEM, OOCSS framework): http://inuitcss.com/
• Taking Sass to the Next Level with SMURF and @extend : http://railslove.com/blog/2012/11/09/taking-sass-to-the-next-level-with-smurf-and-extend
• Modular CSS, an example: http://thesassway.com/advanced/modular-css-an-example
• Objects in Space: https://medium.com/objects-in-space/f6f404727
• How to Scale and Maintain Legacy CSS with Sass and SMACSS: http://webuild.envato.com/blog/how-to-scale-and-maintain-legacy-css-with-sass-and-smacss/
• Think Modularly: http://webstandardssherpa.com/reviews/think-modularly
• Naming UI components in OOCSS: http://csswizardry.com/2014/03/naming-ui-components-in-oocss/
• Markdown based documentation system: https://github.com/trulia/hologram
• The Role of Utility Classes in Scalable CSS: http://davidtheclark.com/on-utility-classes/
• Nesting Components: http://simurai.com/blog/2015/05/11/nesting-components/
• Contextual Styling: http://csswizardry.com/2015/06/contextual-styling-ui-components-nesting-and-implementation-detail/
• CSS Modules: http://glenmaddern.com/articles/css-modules

Functional CSS

• Functional Programming, CSS, and your sanity: http://www.jon.gold/2015/07/functional-css/
• CSS and Scalability: http://mrmrs.io/writing/2016/03/24/scalable-css/

CSS Guidelines, Style Guides & Patterns

• Harry Roberts' general CSS notes, advice and guidelines: https://github.com/csswizardry/CSS-Guidelines
• Paul Robert Lloyd's Styleguide: http://paulrobertlloyd.com/about/styleguide/
• Front-end Style Guides: http://24ways.org/2011/front-end-style-guides/
• Starbucks Style Guide: http://www.starbucks.com/static/reference/styleguide/
• Barebones (an initial directory setup, style guide and pattern primer by Paul Robert Lloyd): http://barebones.paulrobertlloyd.com/
• Oli Studholme's Style Guide: http://oli.jp/2011/style-guide/
• Pears: http://pea.rs/
• Style Guide Boilerplate: http://brettjankord.com/projects/style-guide-boilerplate/
• Creating Living Style Guides to Improve Performance: http://www.stubbornella.org/content/2013/06/05/creating-living-style-guides-to-improve-performance/
• Design patterns: http://ui-patterns.com/patterns/
• A More Flexible Development Framework: http://www.colmtuite.com/a-more-flexible-development-framework
• KSS, a methodology for documenting CSS and generating styleguides: https://github.com/kneath/kss
• Website Style Guide Resources: http://styleguides.io/
• Sass Guidelines: http://sass-guidelin.es/
• Primer: http://primercss.io/
• Taking Pattern Libraries To The Next Level: https://www.smashingmagazine.com/taking-pattern-libraries-next-level/

Component style guide generators

• Fractal: https://fractal.build/

CSS Grid Layout

• CSS Grid Layout: https://gridbyexample.com/

Starter Templates, Boilerplates & Frameworks

• Grunt Frontend Workflow: https://github.com/akikoo/grunt-frontend-workflow
• HTML5 Boilerplate: http://html5boilerplate.com
• HTML5 Mobile Boilerplate: http://html5boilerplate.com/mobile
• 320AndUp: http://forabeautifulweb.com/blog/about/320_and_up/ (not maintained anymore)
• Rock Hammer: http://malarkey.github.io/Rock-Hammer/
• One Web Boilerplate: http://akikoo.github.io/one-web-boilerplate/
• Backbone Boilerplate: https://github.com/tbranyen/backbone-boilerplate
• ZURB Foundation: http://foundation.zurb.com/
• Twitter Bootstrap: http://twitter.github.com/bootstrap/
• Mezzoblue HTML5 Boilerplate: http://mezzoblue.com/archives/2011/01/31/boilerplate/
• HTML5 base template: https://gist.github.com/akikoo/f8f9ccfe149244e8e72a
• Pure: http://purecss.io/
• SouthStreet Progressive Enhancement Workflow: https://github.com/filamentgroup/southstreet
• Scut: Sass Utilities for the Frontend Laborer: http://davidtheclark.github.io/scut/
• Google Web Starter Kit: https://developers.google.com/web/starter-kit/
• Basscss, low-level CSS toolkit: http://www.basscss.com/
• Lightning Design System: https://www.lightningdesignsystem.com/
• Tachyons: http://tachyons.io/
• SUIT CSS: https://suitcss.github.io/

Responsive Web Design Resources

Generic

• This Is Responsive: http://bradfrost.github.com/this-is-responsive/
• Responsive Web Design and Mobile Context: http://www.cloudfour.com/weekend-reading-responsive-web-design-and-mobile-context/
• Responsive Web Design Techniques, Tools and Design Strategies: http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/
• Where are the Mobile First Responsive Web Designs?: http://www.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/
• Techniques For Gracefully Degrading Media Queries: http://coding.smashingmagazine.com/2011/08/10/techniques-for-gracefully-degrading-media-queries/
• Mobile Matrices: https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices
• Responsive Web Design: What It Is and How To Use It: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
• The ultimate responsive web design roundup: http://www.webdesignerdepot.com/2011/09/the-ultimate-responsive-web-design-roundup/
• Responsive enhancement: http://adactio.com/journal/1700/
• One web: http://adactio.com/journal/1716/
• Re-tabulate: http://adactio.com/journal/4780/
• Ethan Marcotte's 20 favourite responsive sites: http://www.netmagazine.com/features/ethan-marcottes-20-favourite-responsive-sites
• Pragmatic responsive design: http://www.slideshare.net/yiibu/pragmatic-responsive-design
• Building a Responsive, Future-Friendly Web for Everyone: http://www.webmonkey.com/2012/01/building-a-responsive-future-friendly-web-for-everyone/
• Notes to an Agency Starting Their First Responsive Web Project: http://css-tricks.com/notes-agency-starting-their-first-responsive-web-project/
• Responsive Web Design (A Book Apart book): http://www.abookapart.com/products/responsive-web-design
• Adaptive Web Design (Easy Readers book): http://easy-readers.net/
• Responsive Web Design (A List Apart article): http://www.alistapart.com/articles/responsive-web-design/
• Common Patterns in Styleguides, Boilerplates and Pattern Libraries: http://blog.cloudfour.com/common-patterns/
• Styleguide & Boilerplate Patterns (linked from the article above): https://docs.google.com/spreadsheet/ccc?key=0AiN0QfBTPpOCdDFjWlM0eU1ra21XanZkekxGbjA2WWc#gid=0
• The Pitfalls of UI Kits and Pattern Libraries: http://blog.cloudfour.com/pitfalls/
• Responsive Design Workflow (book by Stephen Hay): http://responsivedesignworkflow.com/
• Responsive Data Table Roundup: http://css-tricks.com/responsive-data-table-roundup/
• Case Study: Betting on a fully responsive web application: http://blog.14islands.com/post/52546836134/case-study-betting-on-a-fully-responsive-web
• Viewport Sizes: http://viewportsizes.com/
• Build a responsive site in a week (tutorial in five parts, this is part 1: designing responsively): http://www.netmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1
• Responsive Design Newsletter: http://responsivedesignweekly.com/
• How BBC Fell in Love with Responsive Design: http://www.lukew.com/ff/entry.asp?1637
• Responsive and Responsible: http://www.lukew.com/ff/entry.asp?1732
• Responsive Retrofitting: http://webstandardssherpa.com/reviews/responsive-retrofitting
• The top 25 responsive sites of 2012: http://www.netmagazine.com/features/top-25-responsive-sites-2012
• Responsive Web Design is Solid Gold: http://blog.cloudfour.com/responsive-web-design-is-solid-gold/

Responsive Design Methodologies

• Style Tiles: http://styletil.es/
• Atomic Design: http://bradfrostweb.com/blog/post/atomic-web-design/
• Pattern Lab: http://patternlab.bradfrostweb.com/
• Interface Inventory: http://bradfrostweb.com/blog/post/interface-inventory/
• Responsive Strategy: http://bradfrostweb.com/blog/post/responsive-strategy/
• HTML Wireframes: http://bradfrostweb.com/blog/post/html-wireframes/

Flexbox

• Building for Content Choreography using Flexbox: http://www.jordanm.co.uk/post/53179333055/building-for-content-choreography-using-flexbox
• The Ultimate Flexbox Cheat Sheet: http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
• Solved by Flexbox: http://philipwalton.github.io/solved-by-flexbox/
• A Complete Guide to Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
• A Visual Guide to CSS3 Flexbox Properties: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
• flexbugs: https://github.com/philipwalton/flexbugs

Mobile First

• Mobile First: http://www.lukew.com/ff/entry.asp?933
• Rethinking the Mobile Web: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
• Multi-Device Web Design: An Evolution: http://www.lukew.com/ff/entry.asp?1436
• The Multi-Size Web: http://bagcheck.com/bag/4986-the-multi-size-web

Media Queries (CSS)

• Essential considerations for crafting quality media queries: http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/
• Proportional leading with CSS3 Media Queries: http://stuffandnonsense.co.uk/blog/about/proportional_leading_with_css3_media_queries/
• Revisit Hardboiled CSS3 Media Queries: http://www.blog.highub.com/mobile-2/revisit-hardboiled-css3-media-queries/
• CSS Media Queries & Using Available Space: http://css-tricks.com/6731-css-media-queries/
• Using Media Queries in the Real World: http://www.broken-links.com/2011/02/21/using-media-queries-in-the-real-world/
• Windows mobile media queries: http://adactio.com/journal/4494/
• @include-media: http://include-media.com/

Media Queries (CSS + JS)

• Combining media queries and JavaScript: http://www.quirksmode.org/blog/archives/2010/08/combining_media.html
• Conditional CSS: http://adactio.com/journal/5429/
• Detect from JavaScript whether media queries have been executed in CSS: http://codepen.io/akikoo/pen/GEdex
• JavaScript Breakpoints: library that uses CSS media queries to trigger breakpoints in Javascript: https://github.com/14islands/js-breakpoints

Element Queries

• Working around a lack of element queries: http://filamentgroup.com/lab/element_query_workarounds/
• Thoughts on Media Queries for Elements: http://www.jonathantneal.com/blog/thoughts-on-media-queries-for-elements/
• MediaClass (Javascript-powered cross-browser media queries and events): https://github.com/jonathantneal/MediaClass
• Selector Queries (adjust the layout of an HTML element based on its width): https://github.com/ahume/selector-queries/
• EQCSS: http://elementqueries.com/

Fluid Grids

• On Responsive Layout and Grids: http://dbushell.com/2013/03/19/on-responsive-layout-and-grids/
• Fluid grid with Sass/LESS: http://akikoo.github.com/Fluid-Grid/
• The Semantic Grid: http://semantic.gs/
• Trevor Davis' Sass & Compass Grid: http://viget.com/inspire/building-a-nested-responsive-grid-with-sass-compass

Fluid & Responsive Images & Icons and Tools

• Filament Group's Responsive Images: Experimenting with Context-Aware Image Sizing: http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
• Responsive Images (Andy Hume's fork of Filament Group's Responsive Images): https://github.com/ahume/Responsive-Images
• Adaptive Images: http://adaptive-images.com/
• Content aware responsive images: http://blog.andyhume.net/content-aware-responsive-images
• Responsive <img> elements in HTML, for Responsive Designs: http://mattwilcox.net/archive/entry/id/1053/
• ImageAlpha: http://pngmini.com/
• ImageOptim: http://imageoptim.com/
• Grunticon: A Grunt.js plugin for managing and delivering sharp icons to all devices: http://filamentgroup.com/lab/grunticon/
• Fluid Images: http://unstoppablerobotninja.com/entry/fluid-images/
• Responsive IMGs Part 1: http://blog.cloudfour.com/responsive-imgs/
• Responsive IMGs Part 2 — In-depth Look at Techniques: http://www.cloudfour.com/responsive-imgs-part-2/
• Responsive IMGs Part 3 — Future of the IMG Tag: http://blog.cloudfour.com/responsive-imgs-part-3-future-of-the-img-tag/
• The Big List of Flat Icons & Icon Fonts: http://css-tricks.com/flat-icons-icon-fonts/
• IcoMoon: http://icomoon.io/app/
• Responsive Images Chart: https://docs.google.com/spreadsheet/ccc?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0
• Choosing A Responsive Image Solution: http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
• picturefill: https://github.com/scottjehl/picturefill
• Responsible responsive images: http://adactio.com/journal/4997/
• Simple Responsive Images With CSS Background Images: http://mobile.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-backgrounds/
• Responsive & Retina Content Images Redux using Media Queries & a base64 spacer GIF: http://mattstow.com/responsive-and-retina-content-images-redux.html
• Iconic, an open source icon set: http://somerandomdude.com/work/open-iconic/
• Image Compression for Web Developers: http://www.html5rocks.com/en/tutorials/speed/img-compression/
• Mobify.js Image Resizer: http://www.mobify.com/mobifyjs/v2/docs/image-resizer/
• Responsive Images Done Right: A guide to picture and srcset: http://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/
• Responsive Images: Use Cases and Documented Code Snippets to Get You Started: https://dev.opera.com/articles/responsive-images/
• Native Responsive Images: https://dev.opera.com/articles/native-responsive-images/
• Responsive Images 101 series: http://blog.cloudfour.com/responsive-images-101-definitions/
• Responsive Image Breakpoints Generator: http://www.responsivebreakpoints.com/

Fluid/Responsive Videos

• Creating Intrinsic Ratios for Video: http://alistapart.com/article/creating-intrinsic-ratios-for-video
• FitVids.js: http://fitvidsjs.com/
• Elastic Videos: http://webdesignerwall.com/tutorials/css-elastic-videos

Responsive Navigation

• Implementing Off-Canvas Navigation For A Responsive Website: http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/
• Responsive Nav: http://responsive-nav.com/
• Adventures in Responsive Navigation: http://responsivenavigation.net/
• Build a smart mobile navigation without hacks: http://www.netmagazine.com/tutorials/build-smart-mobile-navigation-without-hacks
• Off Canvas, A Multi-Device Web Layout Pattern: http://jasonweaver.name/lab/offcanvas/
• Responsive Navigation Patterns: http://bradfrostweb.com/blog/web/responsive-nav-patterns/

Responsive Tables

• Responsive Tables: http://blog.easy-designs.net/archives/responsive-tables/
• Picking a Responsive Tables Solution: http://blog.cloudfour.com/picking-responsive-tables-solution/

Responsive E-mail

• Responsive Email Patterns: http://responsiveemailpatterns.com/
• Can Email Be Responsive?: http://alistapart.com/article/can-email-be-responsive

Responsive Tools

• What's My Browser Size?: http://whatsmybrowsersize.com/
• MQtest.io (a tool to help identify which media queries your device responds to): http://mqtest.io/
• Media Queries Test: http://mediaqueriestest.com/
• Responsive Design bookmarklet: http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/
• Palm Reader: http://www.jordanm.co.uk/palmreader
• Viewport resizer (ish by Brad Frost): http://bradfrostweb.com/demo/ish/
• Viewport resizer (by Matt Kersley): http://mattkersley.com/responsive/
• Viewport resizer (responsivepx by Remy Sharp): http://responsivepx.com/
• Viewport resizer (screenfly by Quirktools): http://quirktools.com/screenfly/
• Viewport resizer (Responsinator): http://www.responsinator.com/
• Viewport resizer (by Malte Wassermann): http://lab.maltewassermann.com/viewport-resizer/
• Simple responsive design test page: http://bricss.net/post/16538278376/simple-responsive-design-test-page
• Pixel density tests: http://www.matanich.com/examples/pixel-density-tests/
• Embed Responsively: http://embedresponsively.com/
• Media Query bookmarklet: http://seesparkbox.com/foundry/media_query_bookmarklet
• Responsive Design Bookmarklet: http://responsive.victorcoulon.fr/
• Techniques for mobile and responsive cross-browser testing: An Envato case study.: http://webuild.envato.com/blog/techniques-for-mobile-and-responsive-cross-browser-testing/
• PhantomJS: http://phantomjs.org/
• CasperJS: http://casperjs.org/
• Automatic Responsive screenshots creation with PhantomJS and CasperJS: https://gist.github.com/akikoo/6200960
• BreakpointTester: http://breakpointtester.com/

JavaScript and Generic Development Resources

JavaScript/Generic Front-end Dev Resources

• Mozilla JavaScript Guide: https://developer.mozilla.org/en/JavaScript/Guide
• Rendering: repaint, reflow/relayout, restyle: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
• The Node Beginner Book: http://nodebeginner.org/index.html
• Unobtrusive Javascript: http://www.onlinetools.org/articles/unobtrusivejavascript/
• jQuery Fundamentals: http://jqfundamentals.com/book/index.html
• Front-end RSS feeds from Paul Irish: http://paulirish.com/2011/web-browser-frontend-and-standards-feeds-to-follow/
• What Makes a Good Front-end Engineer?: http://www.nczonline.net/blog/2007/08/15/what-makes-a-good-front-end-engineer/
• Interviewing the Front-end Engineer: http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/
• A Baseline for Front-end Developers: http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/
• Front-End Ops: http://www.smashingmagazine.com/2013/06/11/front-end-ops/
• Building Super Fast Web Apps with PJAX: http://ntotten.com/2012/04/09/building-super-fast-web-apps-with-pjax/
• How Basecamp Next got to be so damn fast without using much client-side UI: http://37signals.com/svn/posts/3112-how-basecamp-next-got-to-be-so-damn-fast-without-using-much-client-side-ui
• Common code problems solved using JavaScript: https://github.com/blakeembrey/code-problems
• JavaScript The Right Way: http://jstherightway.com/
• The JavaScript Cookbook (a site for common JavaScript problems and solutions): http://javascriptcookbook.com/
• Chrome DevTools Revolutions 2013: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/
• My workflow v3: full coding stack (Remy Sharp): http://remysharp.com/2013/07/18/my-workflow-v3-full-coding-stack/
• An Ajax-Include Pattern for Modular Content: http://filamentgroup.com/lab/ajax_includes_modular_content/
• Surefire DOM Element Insertion (Paul Irish): http://www.paulirish.com/2011/surefire-dom-element-insertion/
• Part 1: Backbone.js Deconstructed: http://tech.pro/tutorial/1367/part-1-backbonejs-deconstructed
• Part 2: Backbone.js Deconstructed: http://tech.pro/tutorial/1476/part-2-backbonejs-deconstructed
• Re-Learning Backbone.js: http://bardevblog.wordpress.com/2012/12/04/re-learning-backbone-js/
• Enough with the JavaScript already!: http://www.slideshare.net/nzakas/enough-withthejavascriptalready
• You might not need jQuery: http://youmightnotneedjquery.com/
• DOM Core: http://quirksmode.org/dom/core/

JavaScript Architecture

• Creating a REST API using Node.js, Express, and MongoDB: http://coenraets.org/blog/2012/10/creating-a-rest-api-using-node-js-express-and-mongodb/
• Develop a RESTful API Using Node.js With Express and Mongoose: http://pixelhandler.com/blog/2012/02/09/develop-a-restful-api-using-node-js-with-express-and-mongoose/
• Deploying JavaScript Applications: http://alexsexton.com/blog/2013/03/deploying-javascript-applications/

Touch

• You Can't Detect A Touchscreen: http://www.stucox.com/blog/you-cant-detect-a-touchscreen/
• Detecting touch: it’s the "why", not the "how": https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/
• Touch/pointer tests and demos: http://patrickhlauke.github.io/touch/
• What Exactly Is..... The 300ms Click Delay: http://www.icenium.com/blog/icenium-team-blog/2013/11/21/what-exactly-is.....-the-300ms-click-delay

Libraries and Polyfills

• RequireJS: http://requirejs.org/
• example.build.js: https://github.com/jrburke/r.js/blob/master/build/example.build.js
• Example RequireJS jQuery Project: https://github.com/ryanfitzer/Example-RequireJS-jQuery-Project
• almond.js (a minimal AMD API implementation for use after optimized builds): https://github.com/jrburke/almond
• fastclick (polyfill to remove click delays on browsers with touch UIs): https://github.com/ftlabs/fastclick
• microjs: http://microjs.com/
• lscache (a localStorage-based memcache-inspired client-side caching library): https://github.com/pamelafox/lscache
• Normalized address bar hiding for iOS & Android: https://github.com/scottjehl/Hide-Address-Bar
• Bonzo - library agnostic, extensible DOM utility: https://github.com/ded/bonzo
• Qwery - a compact, blazing fast CSS selector engine: https://github.com/ded/qwery
• Reqwest - browser asynchronous http requests: https://github.com/runningskull/reqwest
• Mousetrap, a library for handling keyboard shortcuts in Javascript: http://craig.is/killing/mice
• Applicative Programming In JavaScript With lodash.js: http://tech.pro/tutorial/1611/functional-javascript
• Moment.js: http://momentjs.com/

JavaScript Style Guides

• Google JavaScript Style Guide: http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
• Idiomatic JavaScript: https://github.com/rwaldron/idiomatic.js/
• http://contribute.jquery.org/style-guide/js/
• http://dojotoolkit.org/community/styleGuide

HTML5 JavaScript APIs

• Dive into HTML5: http://diveintohtml5.org/

Promises

• Promises: http://www.promisejs.org/
• JavaScript Promises: http://www.html5rocks.com/en/tutorials/es6/promises/
• ECMAScript 6 promises (1/2) - foundations: http://www.2ality.com/2014/09/es6-promises-foundations.html
• ECMAScript 6 promises (2/2) - the API: http://www.2ality.com/2014/10/es6-promises-api.html
• We have a problem with promises: http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html

ECMAScript 6

• Getting started with ECMAScript 6: http://www.2ality.com/2015/08/getting-started-es6.html

Web Components

• WebComponents.org: http://webcomponents.org/
• Web Components punch list: http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/

ReactJS & Flux

• Architecting React.js Apps with Flux: http://tylermcginnis.com/reactjs-tutorial-pt-3-architecting-react-js-apps-with-flux/
• Creating A Simple Shopping Cart with React.js and Flux: https://scotch.io/tutorials/creating-a-simple-shopping-cart-with-react-js-and-flux
• What is the Flux Application Architecture?: https://medium.com/brigade-engineering/what-is-the-flux-application-architecture-b57ebca85b9e
• react-motion: https://github.com/chenglou/react-motion
• React boilerplate: http://reactboilerplate.com/

Service Workers

• Awesome Service Workers: https://github.com/TalAter/awesome-service-workers

SVG

SVG Specification

• An SVG Primer for Today's Browsers: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html
• Scalable Vector Graphics (SVG) 1.1 (Second Edition): http://www.w3.org/TR/SVG/single-page.html

Generic

• SVG Basics Tutorials: http://www.svgbasics.com/
• SVG Essentials: http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Preface
• A Farewell to CSS3 Gradients: http://designfestival.com/a-farewell-to-css3-gradients/
• SVG Patterns Gallery: http://philbit.com/svgpatterns/
• Using SVG: http://css-tricks.com/using-svg/
• SVG Fallbacks: http://css-tricks.com/svg-fallbacks/
• Splash Vector Graphics on your Responsive Site: http://www.html5rocks.com/en/tutorials/svg/mobile_fundamentals/
• Using SVG graphics today: http://joshemerson.co.uk/blog/using-svg-graphics-today
• SVG for Web: http://joshemerson.co.uk/blog/svg-for-web/
• SVG, Use it Already: http://dbushell.com/2012/04/03/svg-use-it-already/
• SVG and image tag tricks: http://lynn.ru/examples/svg/en.html
• Icon System with SVG Sprites: http://css-tricks.com/svg-sprites-use-better-icon-fonts/
• The Designer’s Guide to Working with SVG – Pt 1: http://www.sitepoint.com/designers-guide-working-with-svg/
• MDN's SVG Tutorial: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial
• SVG on the web - a practical guide: https://svgontheweb.com/

Libraries

• Raphaël: http://raphaeljs.com/
• gRaphaël (charts with Raphaël): http://g.raphaeljs.com/
• Cross Platform Scalable Vector Graphics with svgweb: http://www.alistapart.com/articles/cross-platform-scalable-vector-graphics-with-svgweb/
• svgweb: http://code.google.com/p/svgweb/
• SVG with a little help from Raphaël: http://www.alistapart.com/articles/svg-with-a-little-help-from-raphael/
• Convert SVG into Raphaël: http://www.atirip.com/convert-svg-into-raphael
• ScaleRaphaël: http://www.shapevent.com/scaleraphael/
• jVectorMap: http://jvectormap.owl-hollow.net/
• Snap.svg: http://snapsvg.io/
• Velocity: https://github.com/julianshapiro/velocity

SVG Editors

• svg-edit: http://code.google.com/p/svg-edit/
• Peter Collingridge's SVG Optimizer: http://petercollingridge.appspot.com/svg-editor

Responsive SVG

• Responsive Icons: http://responsiveicons.co.uk/
• Rethinking Responsive SVG: http://coding.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/

Accessible SVG

• Tips for Creating Accessible SVG: https://www.sitepoint.com/tips-accessible-svg/

SVG animations

• A Guide to SVG Animations: http://css-tricks.com/guide-svg-animations-smil/

i18n

• Let's Talk About RTL: http://alfy.me/2014/07/26/lets-talk-about-rtl.html

Design Systems

• Design Systems - A resource for learning, creating and evangelizing design systems: https://www.designsystems.com/

Performance

• Web Performance 101: http://www.webperformancetoday.com/2013/01/31/web-performance-101-developers/
• A Beginner's Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App: http://www.mobify.com/blog/beginners-guide-to-perceived-performance/
• Let's Make the Web Jank-free!: http://jankfree.org/
• Setting a Performance Budget: http://timkadlec.com/2013/01/setting-a-performance-budget/
• Front-end performance for web designers and front-end developers: http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/
• Using Web Fonts The Best Way (in 2015).: https://helloanselm.com/2015/using-webfonts-in-2015/

Reflow

• What forces layout/reflow: https://gist.github.com/paulirish/5d52fb081b3570c81e3a

Offline first

• The offline cookbook: https://jakearchibald.com/2014/offline-cookbook/

Quality Assurance & Testing

Front-end Code Quality Tools

• JSHint: http://jshint.com/
• JSLint: http://www.jslint.com/
• ESLint: https://github.com/nzakas/eslint
• CSSLint: http://csslint.net/
• JSCS (JavaScript Code Style): http://jscs.info/
• stylelint (modern CSS linter): http://stylelint.io/

Cross-Device Testing

To connect to your local Apache virtualhost for testing on remote machines inside the same LAN, see these:

• http://viget.com/extend/device-testing-local-virtual-hosts
• http://xip.io/

Setting that up enables you to develop locally but test on any device connected to the same network.

Mobile Emulator Testing

• Testing on mobile devices without the hardware: http://www.456bereastreet.com/archive/201108/testing_on_mobile_devices_without_the_hardware/
• Mobile Emulators & Simulators: The Ultimate Guide: http://www.mobilexweb.com/emulators

Various Other Testing Tools

• Remote Preview: http://viljamis.com/blog/2012/remote-preview/
• Akamai Mobitest (Mobile Performance Testing): http://mobitest.akamai.com/m/index.cgi
• Mobile Perf bookmarklet: http://stevesouders.com/mobileperf/mobileperfbkm.php
• WebPagetest (Website Performance and Optimization Test): http://www.webpagetest.org/
• 8 Popular online apps to test the mobile version of your site: http://www.webdesignerdepot.com/2011/10/8-popular-online-apps-to-test-the-mobile-version-of-your-site/
• Opera Mini simulator: http://www.opera.com/developer/opera-mini-simulator
• Phantom Limb: http://www.vodori.com/blog/phantom-limb.html
• Ghostlab (synchronized testing for web and mobile): http://vanamco.com/ghostlab/
• modern.IE: http://www.modern.ie/
• Analyze your website speed and performance: http://www.sitespeed.io/

What's Supported? (Compatibility Tables)

• Can I use: http://caniuse.com/
• I want to use (powered by data from caniuse.com): http://onmobile.iwanttouse.com/
• Mobile Frameworks Comparison Chart: http://www.markus-falk.com/mobile-frameworks-comparison-chart/
• HTML5 Please: http://html5please.com/
• HTML5 compatibility on mobile and tablet browsers: http://mobilehtml5.org/
• Event compatibility tables: http://www.quirksmode.org/dom/events/
• IE Platform Status: http://status.modern.ie/

Code Sharing Tools

• JsFiddle: http://jsfiddle.net/
• CodeShare (live code share): http://codeshare.io/
• CodePen: http://codepen.io/
• JS Bin: http://jsbin.com/

Workflow and Automated Unit Testing

• Grunt task runner: http://gruntjs.com/
• Testing Require.js code with Karma: https://github.com/kjbekkelund/karma-requirejs
• Karma test runner for JavaScript: http://karma-runner.github.io/
• Jasmine: https://jasmine.github.io/
• Testing Backbone applications with Jasmine and Sinon: http://tinnedfruit.com/2011/03/03/testing-backbone-apps-with-jasmine-sinon.html
• gulp.js: http://gulpjs.com/
• webpack: https://github.com/webpack/webpack
• Accessibility engine for automated Web UI testing: https://github.com/dequelabs/axe-core

npm scripts

• How to use npm as a build tool: http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/
• Using npm as a task runner: http://paulcpederson.com/articles/npm-run/
• Using npm as a build system for your next project: https://drublic.de/blog/npm-builds/

Sequential or parallel npm-scripts

• parallelshell: https://github.com/keithamus/parallelshell
• npm-run-all: https://github.com/mysticatea/npm-run-all

Documentation

• Documentation Tool: http://www.dexy.it/
• Mozilla Developer Network (MDN): https://developer.mozilla.org/
• DevDocs: http://devdocs.io/

Miscellaneous:

• Hello, Adobe Edge!: http://www.brucelawson.co.uk/2011/hello-adobe-edge/
• Apps vs the Web: http://mattgemmell.com/2011/07/22/apps-vs-the-web
• Responsive Web Design or Separate Mobile Site? Eh. It Depends: http://globalmoxie.com/blog/mobile-web-responsive-design.shtml
• There is no Mobile Web: http://www.the-haystack.com/2011/01/07/there-is-no-mobile-web/
• I don't care about Accessibility: http://www.veen.com/jeff/archives/000503.html
• I don't care about User Experience: http://www.andybudd.com/archives/2011/05/i_dont_care_about_user_experience/. The way all good websites are built these days!
• Progressive enhancement is still important: http://jakearchibald.com/2013/progressive-enhancement-still-important/
• How Developers Stop Learning: Rise of the Expert Beginner: http://www.daedtech.com/how-developers-stop-learning-rise-of-the-expert-beginner
• Burnout: http://www.onishiweb.co.uk/2012/09/burnout/
• Job Titles in the Web Industry: http://css-tricks.com/job-titles-in-the-web-industry/
• Webapp: https://twitter.com/wilto/status/372080088898367488 ;)
• By any other name: http://adactio.com/journal/6246/
• Favicon cheat sheet: https://github.com/audreyr/favicon-cheat-sheet
• Why Talented Creatives Are Leaving Your Shitty Agency: http://www.mobileinc.co.uk/2013/09/why-talented-creatives-are-leaving-your-shitty-agency/
• On Progressive Enhancement: http://bradfrostweb.com/blog/post/on-progressive-enhancement/
• WebPlatform.org: http://www.webplatform.org/
• Chrome DevTools documentation: https://developers.google.com/chrome-developer-tools/
• Front-end Handbook: https://www.gitbook.com/book/frontendmasters/front-end-handbook/details

Inspiring Conference Talks

• The top 20 web conference talks of 2012: http://www.netmagazine.com/features/top-20-web-conference-talks-2012