Web Tooling & Automation

Introduction

Learn how to protect yourself from micro and over-optimization.

• Being pragmatic vs. idealistic when choosing tools
• Identify the real value of the tool (is it well maintained? Does it have a large community? Is it documented?)
• Keep things modular and replaceable
• Staying away from micro-optimizations

Lesson 1: Productive Editing

Learn how to setup the very core of your development environment, namely your editor.

• From Notepad to IDE
• Set up your editor
• Install Sublime Text
• Install Plugins

Lesson 2: Powerful Builds

Learn about build tools and why you should use them.

• Overview of build tools
• Getting started with Gulp
• Install gulp plugins
• Create gulp tasks

Lesson 3: Expressive Live Editing

Learn how to reduce context switch with live editing.

• Why live edit?
• Approaches for live editing
• Browser Sync

Lesson 4: How to Prevent Disasters

Learn how to use tools to automate a few alarms and safety nets that will make our lives much easier.

• Why rely on tools to prevent bad things from happening?
• Linting
• ESLint
• Unit Testing in Gulp

Lesson 5: Awesome Optimizations

Learn how to polish your project for production

• CSS Concatenation
• JS Concatenation and Minification
• Writing Future Proof Code
• Sourcemaps
• Optmization