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!).
- 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/
- 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/
- 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/
- 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
- Keyboard accessibility: http://davidwalsh.name/keyboard-shortcuts
- 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
- 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
- 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
- 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/
- 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/
- 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
- 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/
- 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/
- 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/
- 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/
- 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: 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
- 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/
- 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
- 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/
- 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
- 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/
- 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
- 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: http://blog.easy-designs.net/archives/responsive-tables/
- Picking a Responsive Tables Solution: http://blog.cloudfour.com/picking-responsive-tables-solution/
- Responsive Email Patterns: http://responsiveemailpatterns.com/
- Can Email Be Responsive?: http://alistapart.com/article/can-email-be-responsive
- 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/
- 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/
- 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/
- 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
- 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/
- 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
- Dive into HTML5: http://diveintohtml5.org/
- 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
- Getting started with ECMAScript 6: http://www.2ality.com/2015/08/getting-started-es6.html
- WebComponents.org: http://webcomponents.org/
- Web Components punch list: http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
- Architecting React.js Apps with Flux: http://tylermcginnis.com/reactjs-tutorial-pt-3-architecting-react-js-apps-with-flux/
- 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
- 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/
- 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-edit: http://code.google.com/p/svg-edit/
- Peter Collingridge's SVG Optimizer: http://petercollingridge.appspot.com/svg-editor
- Responsive Icons: http://responsiveicons.co.uk/
- Rethinking Responsive SVG: http://coding.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/
- Tips for Creating Accessible SVG: https://www.sitepoint.com/tips-accessible-svg/
- A Guide to SVG Animations: http://css-tricks.com/guide-svg-animations-smil/
- Let's Talk About RTL: http://alfy.me/2014/07/26/lets-talk-about-rtl.html
- 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/
- What forces layout/reflow: https://gist.github.com/paulirish/5d52fb081b3570c81e3a
- The offline cookbook: https://jakearchibald.com/2014/offline-cookbook/
- JSHint: http://jshint.com/
- JSLint: http://www.jslint.com/
- ESLint: https://github.com/nzakas/eslint
- CSSLint: http://csslint.net/
To connect to your local Apache virtualhost for testing on remote machines inside the same LAN, see these:
Setting that up enables you to develop locally but test on any device connected to the same network.
- 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
- 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/
- 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/
- JsFiddle: http://jsfiddle.net/
- CodeShare (live code share): http://codeshare.io/
- CodePen: http://codepen.io/
- JS Bin: http://jsbin.com/
- 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: http://pivotal.github.io/jasmine/
- 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
- Documentation Tool: http://www.dexy.it/
- Mozilla Developer Network (MDN): https://developer.mozilla.org/
- DevDocs: http://devdocs.io/
- 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/
- The top 20 web conference talks of 2012: http://www.netmagazine.com/features/top-20-web-conference-talks-2012