Frameworks, Template Engines, Shorthand Coding, and Other Tools

[Mark]

After finding the previously mentioned web development tools, I spent some time over the weekend looking at other techniques people have been using, a lot of which seem to be shorthand techniques to speed up development. One thing led to the other and down the rabbit hole I went. Lots of different things going on that I knew nothing about. Here's a small sample of what I came across.

HTML
Jade - jade-lang.com
HAML - haml-lang.com
HTML-Ipsum - html-ipsum.com (Quickly copy and paste HTML formatted ipsum into your templates)

CSS
LESS - lesscss.org
SASS - sass-lang.com (Same people who made HAML, therefor same stuff just for CSS)
Bless - blesscss.com (For massive websites that intend to serve up mostly IE users, but keep CSS files to a minimum)
Stylus - learnboost.github.com/stylus/

JavaScript
CoffeeScript - coffeescript.org
JSHint - jshint.com
JSLint - jslint.com
Modernizr - modernizr.com
jQuery - jquery.com (Everyone should know this one, but just in case)
jQuery UI - jqueryui.com (UI elements for jQuery, pro-tip: only use the underlying JS for your design, make it look unique)
RegEx Library - regexlib.com (Because it's ludicrous to write them on your own lol)

Frameworks/All-in-one
Compass - compass-style.org
Bootstrap - twitter.github.com/bootstrap/
HTML5 Boilerplate - html5boilerplate.com
960.gs - 960.gs
Pure - purecss.io

Extras
GLYPHICONS - glyphicons.com (Author tweeted an update saying he's adding a web font version!)
FontSquirrel - www.fontsquirrel.com (Free commercial use web fonts)
Google Web Fonts - www.google.com/webfonts (Google hosted web fonts)

Repository Hosting
GitHub - github.com
Beanstalk - beanstalkapp.com

Other Tools
BrowserStack - www.browserstack.com (Live, web-based browser testing for various browser and OS combinations)
jsFiddle - jsfiddle.net (For testing code snippets, and isolating display issues, really great!)
MAMP - www.mamp.info (Mac, Apache, MySQL, PHP)
WAMP - www.wampserver.com (Windows, Apache, MySQL, PHP)
Brackets - brackets.io (A lightweight, but expandable, cross platform code editor developed with HTML and JS!)
Sublime Text - www.sublimetext.com (Awesome cross platform text/code editor)
Less App - incident57.com/less/ (For compiling Less files so it's just a regular CSS file)
Prepros - alphapixels.com/prepros/ (Compiles LESS, SASS, and everything in between. Will also also minify and uglify JS)
CodeKit - incident57.com/codekit/ (Same as above, but Mac only and is a paid app)
CodePen - codepen.io (Create, test, and share bits of code)

[Jason]

Thanks! 

More stuff to add to my "to browse" list...   

[Garrett]

I downloaded the HTML5 Boilerplate, however I don't know how to use it. The instructions in YouTube are confusing.

[Mark]

I added a lot of new stuff to my original post, specifically, gave it a new section called 'other tools'. Enjoy.

[Jason]

I added a lot of new stuff to my original post, specifically, gave it a new section called 'other tools'. Enjoy.

Thank you sir!

[Mark]

Another link dump.

Specifically - HTML-Ipsum, jQuery, jQuery UI, RegEx Library, GLYPHICONS, FontSquirrel, GitHub, Beanstalk, and CodePen.

A note on repository hosting, if you're developing websites for clients (or even for yourself) where there's a lot of work involved, start using version control! I've been using Git for about 6 months now (I had only used SVN when working with a piece of software that was a community effort before) and I'll never not use it again.

[Mark]

Expanded the list yet again!

Added - Pure, Brackets, BrowserStack, and Prepros