a-modern-frontend-dev.md

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

• Superhero.js
• JSDB.io - The Database of JavaScript Libraries

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

• Single Page Applications
• Upfront Podcast

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

Miscellaneous Links

• How to Lose Weight in the Browser
• Browser Hacks
• Web Standards Sherpa
• Pineapple Wiki

hash-bang-urls-evil.md

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.

• Gawker Learns the Hard Way - Why 'Hash-Bang' URLs are Evil
• Breaking the Web with hansh-bangs
• A proposal for making AJAX crawlable
• Broken Links
• Fragment Identifier

html5.md

HTML5 Resources

• HTML5 Please
• HTML5 Cross Browser Polyfills
• Can I Use

testing.md

Testing

• BrowserStack - Live, Web-Based Browser Testing.
• ScreenCheck
• Lab Up!