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