skipzero
1/17/2013 - 1:21 PM
Articles, tutorials and tools for modern front-end development.
Articles, tutorials and tools for modern front-end development.
Tools of the Modern Web Developer
Notes taken from the course, Tools of the Modern Web Developer.
Intro
Prerequisites
- HTML, CSS - 30 Days to Learn HTML & CSS, A Beginner's Guide to HTML & CSS and An Advanced Guide to HTML & CSS
- Command Line - The Command Line is Your Best Friend
- Text editor such as Sublime Text 2 - Perfect Workflow in Sublime Text 2
- Ruby and Rubygems
- Node and NPM
- Git and Github - Git Essentials, git ready
- CDNjs - one stop for many popular hosted libraries
Resources
- A Baseline for Front-End Developers
- Tooling For The Modern WebApp Developer by Addy Osmani
- Tooling and WebApp Development Stack by Paul Irish
- The Breakpoint Show by Google Developers
HTML5 Boilerplate
- Chrome Dev Tools: Networking and the Console
- XAMPP
- The protocol-relative URL
- Normalize.css
- Apple Touch Icons
- Humans.txt
- Robots.txt
- Cross-Domain XML
- Gitignore
- Git Attributes
- Modernizr
Twitter Bootstrap
HTML5 Resources
Hash Bang URLs are Evil
http://www.example.com/page?query#!state
Originally designed to allow Google’s spider to crawl Ajax content, hash-bang URLs have been popping up all over the web - Twitter and Facebook use them as well - but that doesn’t make them a good idea.
Problem: What does a Modern Front-End Development Workflow Look Like?
I want to start writing libraries and large applications using the JavaScript language. However, I don't know how to setup the project and which build tools to use. What I do know is that the JavaScript community has moved way beyond using browser developer tool plugins and strategically-placed console.log() statements to debug, test, and build code.
I need help.
Below, I will keep track of articles, tutorials and tools I come across as I search for a way to bring my front-end development chops up-to-date.
The Ultimate Resource
Articles
- Building a JavaScript Library with Grunt.js
- Essential Tools for a Modern Front-End Development Workflow
- Web Form Design: Showcases and Solutions
- Tooling and The Webapp Development Stack
- Why We Use Node.js and Grunt to Build JavaScript
- A Baseline for Front-End Developers
- Current Workflow: Developing, Linting, Testing and Distributing JavaScript
- Meet the New Stack, Same as the Old Stack
- High Performance Web Sites: Rule 6 - Move Scripts to the Bottom
- Yahoo Developer Network - YDN
- Top 15 Podcasts All Web Developers Should Follow
Tutorials
- Meet Grunt: The Build Tool for JavaScript
- Grunt.js Workflow
- Let's Make a Framework
- Fixing The jQuery - A Guide to Debugging
- Setting Up Sublime Text 2 for Front-End Development
- JavaScript Tutorials from Tuts+
- JavaScript Tutorials from Smashing Magazine
- Mozilla Developer Network - JavaScript
- DailyJS
- Adventures in JavaScript Development
- A successful Git branching model
Podcasts
Videos
- Paul Irish on Web Application Development Workflow
- Make JavaScript Testing Fun with Testem
- Learn to Build Web Apps using Backbone + Rails
- Front-end Tools for the Young Developer
Tools (here's a more comprehensive list)
- Ender
- Grunt
- GruntStart
- Guard
- Jasmine
- jasmine-node
- JSHint
- localtunnel
- Mocha - Mocha is a feature-rich JavaScript test framework running on node and the browser, making asynchronous testing simple and fun.
- Node.js
- Test'em Scripts - A test runner that makes JavaScript unit testing fun.
- Twitter Bower - A package manager for the web.
- UglifyJS
- Yeoman - Modern Workflows for Modern WebApps
- EditorConfig
- Travis CI