A curated list of resources and tutorials for front-end engineers

##Table of Contents

• HTML
• CSS
  • Preprocessors
• Javascript
  • Reading Material
  • Tutorials
  • Libraries
  • Frameworks
    • Angular
    • React
    • Polymer
• Node
  • Tutorials
  • Frameworks
  • MEAN Stack
  • Architecture
  • Templating
  • Testingd
• Ruby
  • Tutorials
  • Frameworks
• PHP
  • Tutorials
  • Frameworks
• Databases
• UI/UX Design
  • Inspiration
  • Reading Material
  • Resources
• Workflow
  • Sublime
  • Yeoman Generator
  • JSHint
  • Grunt
  • Bower
  • LESS
• Extra Resources
  • Reading Material

##HTML

• Semantic Markup
• Standards for flexible HTML and CSS

##CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.

• Animate.css (crossbrowser animations)
• Codrops playground (inspirational css effects)

###Preprocessors

• Less
• Sass

##Javascript JavaScript (JS) is a dynamic computer programming language.[5] It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed.

###Tutorials

• Code Academy
• Object oriented javascript (quick overview)
• Module design pattern

###Reading Material

• Professional Javascript for Web Developers (includes design patterns and best practices)
• How does Javascript prototyping work
• Prototype vs Revealing Module Pattern
• Javascript scoping and hoisting
• Structuring a complex JSON schema
• A overview of Angular, Ember and Backbone

###Libraries

• jQuery - Javascript library that makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

• YUI - open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting.

• D3.js - D3.js (or just D3 for Data-Driven Documents) is a JavaScript library that uses digital data to drive the creation and control of dynamic and interactive graphical forms which run in web browsers.

• Three.js - JavaScript 3D Library which makes WebGL simpler.

• Chart.js - Simple, clean and engaging charts for designers and developers

###Frameworks

####Angular AngularJS is an open-source web application framework, maintained by Google and community, that assists with creating single-page applications, one-page web applications that only require HTML, CSS, and JavaScript on the client side. Its goal is to augment web applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

Motivation

• Why Angular over jQuery
• From jQuery to Angular mindset

Getting Started

• Angular-cat
• AngularJS Tutorial: A Comprehensive 10,000 Word Guide
• Angular in 60-ish minutes (video)
• Scotch - AngularJS tutorials
• Egghead - AngularJS tutorials
• Year of - Moo AngularJS tutorials

Style

• AngularJS Style Guide
• Angular Styleguide

Design patterns/best practice

• Angular design patterns and best practices
• Angular best practices: I've been doing it all wrong
• Promises And Design Patterns In AngularJS
• Best Practice Recommendations for Angular App Structure (Google)

Scopes

• Understanding Scopes

Data modeling

• AngularJS Data Modeling (video series)
• AngularJS Data Models: $http VS $resource VS Restangular

Controllers

• Sharing Data Between Controllers
• The state of angularjs controllers
• Rethinking AngularJS Controllers

Directives

• A Practical Guide to Angular Directives
• Directives - difference between controller and link
• Difference between the 'controller', 'link' and 'compile' functions when defining an angular.js directive
• Angular Directive Best Practices

Services/Factories

• Angular.service vs angular.factory
• Tidy up your Angular with factories

Routing

• AngularJS Routing Using UI-Router

Authentication

• Authentication in Single Page Applications
• Cookies vs Tokens. Getting auth right with Angular.JS
• NgTokenAuth - simple, secure authentication for AngularJS
• Satellizer - simple to use, end-to-end, token-based authentication module for AngularJS

Deployment

• Setting up an Angular and Node environment for development and production
• How to use environment variables in your Angular application

Angular 2.0

• Ng-conf
• Hacker News discussion on Angular 2
• Preparing for the future of AngularJS

Testing

• Protractor (E2E testing)
• Karma

Misc

• Speeding up AngularJS apps with simple optimizations

####React React is a JavaScript library for building user interfaces. It's declarative, efficient, and extremely flexible. What's more, it works with the libraries and frameworks that you already know.

Tutorials

• Overview from Facebook
• Intro to the React Framework (great overview)
• React comment box Tutorial
• Flux ToDo MVC
• React Components
• React States
• React Properties

Reading Material

• Getting started with React
• Getting to know Flux
• Rethinking Best Practices (video)
• Hacker Way: Rethinking Web App Development at Facebook

Architecture

• Flux architecture
• Flux website (all things Flux)
• React Yeoman Generator

####Polymer Library that uses the latest web technologies to create custom HTML elements.

Tutorials

• Google's Polymer Tutorial for Beginners

Reading Materials

• Building modern apps with Polymer & Web Components
• Polymer vs Angular

##Node Node.js is a runtime environment and a library for running applications written in JavaScript outside the browser (for example, on the server). Node.js applications are designed to maximize throughput and efficiency, using non-blocking I/O and asynchronous events. Node.js applications run single-threaded, although Node.js uses multiple threads for file and network events. Node.js is commonly used for real time applications due to its asynchronous nature, allowing applications to display information faster for users without the need for refreshing.

###Tutorials

• Node for Beginners
• Node Beginner (book)
• Node School
• Node Async Tutorial
• Overview of Node with Mongo and Express
• Building a Restful API with Node and Express
• What is Node.js Exactly? - a beginners introduction to Nodejs
• Learn to Use the New Router in Express 4
• Creating a Single Page Todo App with Node and Angular
• Building a complete MVC site with node/express
• Easy Node Authentication Setup
• Blog rolling with mongoDB, express and Node
• Building an Angular and Express app
• Running Express.js in Production Mode
• Keep a node.js server up with Forever
• Running Express in production mode

Reading Material

• Why use Node
• Node explained (video)
• Node Control Flow
• Why use closures
• Node Best Practices
• Error Handling in Node
• Awesome Node resources
• Node.js async in practice: When to use what?
• Using $scope.$watch and $scope.$apply
• Felix's Node.js Style Guide
• Real Time Web Analytics with Node.js and Socket.IO
• Node RESTful API Authentication
• Projects, Applications, and Companies Using Node (great reference material)
• Full stack javascript with MEAN and Yeoman
• MEAN.js
• RisingStack Node.js Style Guide
• Node.js Best Practices

###Frameworks

• Express

###MEAN Stack

• Introduction to MEAN
• Creating an RSS feed reader with the MEAN stack

###Architecture

• Hackathon Starter
• Boilerplate (barebones)

###Templating

• Dust templating
• Jade templating

###Testing

• Mocha
• Arrow

##Ruby A dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.

###Tutorials

• Code Academy
• Ruby for Newbies (series)

###Frameworks

####Rails

Tutorials

• Rails for Zombies (game)
• Ruby on Rails Tutorial by Michael Hartl (book)

##PHP PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language.

###Tutorials

• Code Academy
• Object Oriented PHP (quick overview)
• The MVC Pattern and PHP

###Frameworks

• Laravel (MVC based framework)

##Databases

####MySQL MySQL is the most popular database system used with PHP.

####MongoDB MongoDB (from "humongous") is an open-source document database, and the leading NoSQL database.

• Introduction to MongoDB
• Data Modeling
• Designing MongoDB Schemas with Embedded, Non-Embedded and Bucket Structures
• MongoDB Schema Design Basics (video)
• MongoDB relationships: embed or reference
• Example and use of Mongoose virtual attributes

####CouchDB CouchDB is a database that completely embraces the web. Store your data with JSON documents. Access your documents and query your indexes with your web browser, via HTTP. Index, combine, and transform your documents with JavaScript. Tutorials

• Overview

##UI/UX Design

###Inspiration

• Pttrns (A curated library of iPhone and iPad user interface patterns)

• Dribbble (Show and tell for designers)

• Behance (Showcase and discover creative work)

• http://drp.io/aee/bKd/-/+

Data visualization

• Nicholas Felton
• 2013: The Year in Interactive Storytelling (New York Times)

###Reading Material

• Designing Design (book)
• Recommended design books
• Thoughts on Design (book)
• Apple's Human Interface Guidelines
• Google's Material Design Guidelines
• My Dream Design Curriculum
• The Z-Axis: Designing for the Future
• UX crash course - 31 fundementals
• ElemantaryOS Human Interface Guidelines
• Maintain Consistency With a Website Style Guide

###Resources

• Coolors - Color generator
• Subtle Patterns (Free textures for your next web project)
• Google Fonts
• Font Awesome (Font Awesome gives you scalable vector icons that can instantly be customized)
• Free HD videos loops for awesome landing pages
• Little Big Details - Your daily dose of design inspiration.
• Font Awesome for Illustrator
• Brand Colors
• All your free stock images in one place

####Stock Images

• Unsplash (Free stock images)
• Unsplash with search and filtering
• Aggregate of stock images
• Jaymantri (Free stock images)
• The Stocks (Free stock images)
• Travel Coffeebook (Free stock images)
• Pexels

##Workflow

####Sublime Sublime Text is a sophisticated text editor for code, markup and prose.

• Best of Sublime Text 3: Features, Plugins, and Settings
• AngularJS - AngularJS code completion, snippets, go to definition, quick panel search, and more.
• Docblockr - Simplifies writing DocBlock comments in Javascript, PHP, CoffeeScript, Actionscript, C & C++
• HTMLBeautify - A plugin for Sublime Text that formats (indents) HTML source code. It makes code easier for humans to read.
• JavascriptBeautify - js-beautify for sublime
• JSX - Language Definitions for JSX files.
• LESS - LESS syntax highlighting for Sublime Text.
• NodeJS - nodejs snippets and bindings for Sublime Text 2
• Package Control - A full-featured package manager
• Predawn - Predawn is a dark interface and syntax theme for Sublime Text.
• Sublime Linter - Interactive code linting framework for Sublime Text 3
  • SublimeLinter-javac - SublimeLinter 3 plugin for Java, using javac -Xlint.
  • SublimeLinter-jshint - SublimeLinter plugin for JavaScript, using jshint.
  • SublimeLinter-jsxhint - SublimeLinter 3 plugin for JSX (React.js), using jsxhint.
• Setting up the .subl command in terminal

####Deployment

• 5 Common Server Setups For Your Web Application
• Setting Up A Staging Environment
• How To Set Up and Test DNS Subdomains with DigitalOcean's DNS Panel
• How To Set Up HTTP Authentication With Nginx On Ubuntu 12.10

####Yeoman Generator Yeoman helps you kickstart new projects, prescribing best practices and tools to help you stay productive.

####JS Hint JSHint is a program that flags suspicious usage in programs written in JavaScript. The core project consists of a library itself as well as a CLI program distributed as a Node module.

####Grunt Automation, performing repetitive tasks like minification, compilation, unit testing and linting.

• Writing an awesome build script with Grunt
• Making your AngularJS application grunt
• How to use environment variables in your Angular application
• Get more with LESS using Grunt

####Postman Postman helps you be more efficient while working with APIs

####Bower A package manager for the web

####Passport Simple, unobtrusive authentication for Node.js

####LESS Less extends CSS with dynamic behavior such as variables, mixins, operations and functions.

• LESS in Practice (shameless plug)
• Medium’s CSS is actually pretty fucking good

####SASS Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

##Extra Resources

###Reading Material

• Hammock driven development (video)
• How to be a great software developer