Web Dev Links

web-dev-links.md

This is my guide to web dev. There are many like it, but this one is mine.

Table of Contents

General Resources

HTML

DOM

CSS & SCSS

JS

WordPress

Tools

You'll visit these frequently

• Mozilla Developer Network Your reference manual:
  • https://developer.mozilla.org/en-US/docs/Web
• Bookmark this, you'll thank me later:
  • http://devdocs.io/
• Courses and walkthroughs:
  • http://learn.shayhowe.com/
• Sandboxes:
  • http://codepen.io/
  • https://jsfiddle.net/
• Reference Hubs
  • http://webfieldmanual.com/
  • http://thenewcode.com/
  • https://www.gitbook.com/book/frontendmasters/front-end-handbook/details
  • http://christopherpound.com/so-you-want-to-be-a-web-developer/
  • https://www.codefellows.org/blog/useful-links-for-front-end-web-development
• Guidelines / Style:
  • https://github.com/bendc/frontend-guidelines
• Cheat Sheets and Checklists:
  • https://github.com/logeshpaul/Frontend-Cheat-Sheets
  • http://webdevchecklist.com/
  • https://github.com/bayandin/awesome-awesomeness
• Later down the road:
  • https://github.com/dypsilon/frontend-dev-bookmarks
  • https://github.com/ericandrewlewis/web-dev-resources

---

HTML

• https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction

• https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list

DOM

• https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
• https://css-tricks.com/dom/

---

CSS

• https://docs.webplatform.org/wiki/guides/getting_started_with_css
• WHEN PAGES ARE NOT PAPER: THE DESIGNER'S GUIDE TO LAYOUT CODE
  • http://www.webdesignerdepot.com/2012/09/when-pages-are-not-paper-the-designers-guide-to-layout-code/
• Learn Layout
  • http://learnlayout.com/
• Positioning: http://www.alistapart.com/articles/css-positioning-101/
• Positioning: http://designshack.net/articles/css/the-lowdown-on-absolute-vs-relative-positioning/
• Z-index: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
• Framework Grids:
  • Bootsrap: http://getbootstrap.com/css/#grid
  • Foundation: http://foundation.zurb.com/docs/components/grid.html
  • Neat
    • http://thoughtbot.github.io/neat-docs/latest/
    • http://neat.bourbon.io/examples/
  • Susy: http://susydocs.oddbird.net/en/latest/
• Pre-processors: http://www.nosleepforsheep.com/development/using-a-css-preprocessor/
  • SASS: http://sass-lang.com/
    • http://thesassway.com/
    • http://sassmeister.com/
    • http://sassme.arc90.com/
    • http://jackiebalzer.com/color
    • Frameworks: as of 2016 I prefer Bourbon and Neat, but you can also use Compass, Susy, and Breakpoint. Really too many choices to list, choose best fit for project.
  • LESS http://lesscss.org/
    • http://lesscss.org/features/
• Post-processors (latest trend)
  • https://css-tricks.com/autoprefixer/
  • http://pleeease.io/ and https://github.com/postcss/postcss and

---

JS

• Core resources
  • http://eloquentjavascript.net/
  • Glossary: http://www.codecademy.com/glossary/javascript
  • A Roadmap to Learning JavaScript for Free http://sixrevisions.com/javascript/learning-javascript-for-free/
  • The JavaScript Learning Ladder http://jsforallof.us/2015/01/28/the-javascript-learning-ladder/
• Summaries and Cheat Sheets
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
  • http://flippinawesome.org/2013/10/07/javascript-fundamentals/
  • http://blog.pluralsight.com/understanding-javascript-objects-2
  • Lexical Scope
    • http://blog.pluralsight.com/understanding-javascript-objects-2
    • http://www.datchley.name/basic-scope/
  • Prototypes and Inheritance in JavaScript http://msdn.microsoft.com/en-us/magazine/ff852808.aspx
  • Objects, Functions, Scope, Prototypes and Closures http://hangar.runway7.net/javascript/guide
• Debugging
  • https://developer.chrome.com/devtools/docs/javascript-debugging
• Advice
  • Learning JavaScript - my experience and advice: http://sivers.org/learn-js
• Improve, improve, improve
  • A book series on JavaScript. https://github.com/getify/You-Dont-Know-JS
  • Learning JavaScript Design Patterns http://addyosmani.com/resources/essentialjsdesignpatterns/book/
• Angular 1.x
  • A Comprehensive 10,000 Word Guide
    • https://www.airpair.com/angularjs/posts/angularjs-tutorial
  • AngularJS Education
    • https://github.com/timjacobi/angular-education
  • The Top 10 Mistakes AngularJS Developers Make
    • https://www.airpair.com/angularjs/posts/top-10-mistakes-angularjs-developers-make
  • Factory vs Service vs Provider
    • http://tylermcginnis.com/angularjs-factory-vs-service-vs-provider/
  • REST + Factories
    • http://weblogs.asp.net/dwahlin/using-an-angularjs-factory-to-interact-with-a-restful-service
  • Directory structure
    • https://scotch.io/tutorials/angularjs-best-practices-directory-structure

---

WordPress

• General Resources and Tools
  • Codex http://codex.wordpress.org/Developer_Documentation
  • WP Tavern
  • GenerateWP
  • http://wpsettingsapi.jeroensormani.com/
  • http://www.mythemedetector.com/
• Local Dev
  • MAMP vs Vagrant (MAMP is still useful for simple and fast stuff. Vagrant is for full project builds.)
    • http://www.sitepoint.com/wordpress-meets-vagrant-vvv/
    • http://wptavern.com/13-vagrant-resources-for-wordpress-development
  • JetPack development mode
• WP Coding Standards
  • PHP https://make.wordpress.org/core/handbook/best-practices/coding-standards/php/
  • JS https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/
• Fundamentals
  • functions.php
  • The Loop
    • http://blog.teamtreehouse.com/wordpress-loop-beginners-guide
    • http://www.wpbeginner.com/glossary/loop/
  • Template Tags
  • Hooks
    • https://www.smashingmagazine.com/2016/01/get-started-with-hooks-wordpress/
  • WP_Query
    • http://premium.wpmudev.org/blog/mastering-wp-query/
  • jQuery within WordPress
  • Widgets
  • Shortcodes
  • Taxonomies
    • http://code.tutsplus.com/tutorials/the-beginners-guide-to-wordpress-taxonomies--cms-22750
  • Metadata
    • http://code.tutsplus.com/tutorials/understanding-and-working-with-metadata-in-wordpress--cms-21034
• Theme Development
  • Template Hierarchy
    • https://wphierarchy.com/
  • Custom Page templates
    • https://www.smashingmagazine.com/2015/06/wordpress-custom-page-templates/
  • Starter Themes and Frameworks
    • Underscores
    • Sage
  • Best Practices
    • http://code.tutsplus.com/articles/more-tips-for-best-practices-in-wordpress-development--cms-21013
• Plugin Development
  • Boilerplates
    • http://wppb.me/
  • Best Practices
• Cheatsheets
  • http://www.wpexplorer.com/ultimate-wordpress-cheat-sheet/
  • http://www.buildyourownblog.net/blog/time-saving-copypaste-wordpress-cheat-sheet/
• Sites to visit
  • http://wptavern.com/
  • http://code.tutsplus.com/categories/wordpress
  • https://premium.wpmudev.org/blog/
• People to follow
  • https://tommcfarlin.com/
• WP Engine Tips
  • mu-plugins and cache

---

Tools (Editors, plugins, IDEs, task runners. Mac-centric, personal recommendations)

• On OSX install: Chrome (Canary too), Firefox Dev Edition, Safari Technology Preview, IE VMs https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/mac/ , and maybe Opera :(
• Essential Chrome Extensions: JSON Formatter, Page Ruler, Postman - REST Client (Packaged App), Wappalyzer, WhatFont, ColorZilla
• Good editors: Atom, Brackets, Sublime, MacVim (my weapon of choice), NeoVim, BBedit/TextWangler. Whichever you choose also install Emmet http://emmet.io/
  • If you go with Vim, helpful plugins found at http://vimawesome.com/
    • MatchTagAlways, SyntaxComplete, ctrlp.vim, dash.vim, delimitMate, emmet-vim, javascript-libraries-syntax.vim, nerdcommenter, nerdtree, php.vim, phpcomplete.vim, syntastic, tagbar, vim-airline, vim-angular, vim-colors-solarized, vim-css-color, vim-fugitive, vim-indent-guides, vim-javascript, vim-markdown
    • My vimrc https://github.com/rampantprint/dotfiles/blob/master/vimrc
• IDEs (I prefer editors+plugins, but app devs might need an IDE): WebStorm, Visual Studio, Aptana
• Coda and Expresso are pretty apps, but I'm not sure they scale well over time. Also look at CodeKit or Prepros for frameworks and pre-processors, but you should ultimately use CLI or editor plugins.
• Misc. OS X apps: Sip, Skitch, Spectacle, iTerm, Sequel Pro, SourceTree, Cyberduck, ImageOptim, Sketch/Pixelmator or Illustrator/Photoshop, Flycut, VirtualBox, (eventually Vagrant or MAMP).
• HTML5 templates generator: http://www.initializr.com/

MISC

• Watch this: Why the web is dead | Christian Heilmann
• Panic Button
  • http://mdo.github.io/wtf-html-css/
• App vs Site - Framework vs Scratch
  • Should you use Angular, React, or a CMS? Or all? Framework or from scratch?
• CMS vs Static
  • Why are the big CMSs in PHP? What's Jekyll?