frontend-dev-bookmarks

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

frontend-dev-bookmarks

(★ 77)

My collection of essential Front-End resources, focusing on accessibility, architecture, performance, code quality, workflow and best practices.

frontend-dev-bookmarks 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Front-End Bookmarks
===================

This is a collection of essential (or just useful/inspirational) Front-End
Development &amp; 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 &lt;img&gt; 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

frontend-dev-bookmarks

frontend-dev-bookmarks 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

frontend-dev-bookmarks

frontend-dev-bookmarks 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README