nadavspi/guide

Front end resources

A running list of resources I consider valuable for being a responsible, well-rounded front end developer & designer. Reflects my work and interests, which lean heavily toward HTML and CSS, rather than including everything but the kitchen sink.

Sysadmin

• https://sysadmincasts.com/episode-guide
• Good list of useful commands: http://linoxide.com/guide/linux-command-shelf.html

SSH

• SSH login without password
• Using ssh-agent with ssh
• On Mac OS X, ssh-add -K ~/.ssh/id_dsa loads the key into Keychain so you never have to launch the agent again.

Git

• For beginners: https://try.github.io
• The Simple Guide: http://rogerdudler.github.io/git-guide/
• The Book: http://git-scm.com/book
• How to Write a Git Commit Message: http://chris.beams.io/posts/git-commit/
• Workflow: http://nvie.com/posts/a-successful-git-branching-model/
• Workflow tool: https://github.com/nvie/gitflow

HTML

• http://diveintohtml5.info/semantics.html
• http://html5doctor.com/lets-talk-about-semantics/
• http://diveintohtml5.info/forms.html

CSS

• http://learnlayout.com/
• http://adamschwartz.co/magic-of-css/
• http://modernweb.com/2013/08/12/writing-better-css/
• http://keithwyland.com/2014/02/04/css-selectors.html
• http://csswizardry.com/2012/11/code-smells-in-css/
• http://www.heydonworks.com/article/tetris-and-the-power-of-css
• http://css-tricks.com/

Architecture

• http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
• http://philbaker.me/blog/2014/02/css-class-naming-and-bem-contemporary-practice/
• http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
• Scalable and Modular Architecture for CSS (SMACSS)
• Jonathan Snook, "CSS is a Mess": http://vimeo.com/99877232
• Heydon Pickering, "Effortless Style": http://vimeo.com/101718785

Sass

• http://nadav.is/sassy

Grid systems

• http://neat.bourbon.io/
• http://susy.oddbird.net/

SVG

• Icon System with SVG Sprites
• SVG symbol a Good Choice for Icons
• Tips for Creating Accessible SVG

Responsive design

• Where to Start by Trent Walton
• Device-Agnostic by Trent Walton
• http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/
• http://bradfrost.github.io/this-is-responsive/
• http://blog.cloudfour.com/dont-use-picture-most-of-the-time/

Coding style guides

• http://codeguide.co/
• http://sass-guidelin.es/
• https://github.com/airbnb/javascript

Accessibility

• On img alt text: http://www.w3.org/WAI/tutorials/images/
• http://heydonworks.com/practical_aria_examples/
• http://www.w3.org/TR/aria-in-html/
• Bulletproof Accessible Icon Fonts

Workflow

• Learning Gulp: http://hmphry.com/articles/learning-gulp
• Front-end Tooling Workflows by Addy Osmani

Libraries/scripts

• html5shiv
• Respond.js
• Picturefill
• FitVids
• Tablesaw
• Anything from Filament Group, really