Web Developer Toolbox

This place is as good as any other to list some handy tools when developing.

Frontend tools:

• Samuel L. Ipsum: motherfucking Lorem-fucking-ipsum generator.
• The 1140px grid: fluid & responsive.
• Skeleton: barebone responsive boilerplate.
• Bootstrap, Twitter’s boilerplate. Themes available. Foundation is a good alternative.
• HTML5Boilerplate, full-on boilerplate.
• Less css with Less CSS or Compass+Sass.
• Developer tool belts like Yeoman.
• Google’s manual on Mobile-first development.
• Backbone, Ember, Angular… and more at TodoMVC.

Speed up your web:

• SmartSprites: generate CSS Sprites with PHP.
• .htaccess compression and caching (more snippets here and here).
• Test a web’s performance and speed (idem), from around the world. Google Pagespeed tools.
• Things to know about performance.
• Formalize, show your forms some manners!
• Use a CDN with Google App Engine, instant CDN on App Engine, Amazon S3 or more. And test it.
• O’Reilly’s Velocity Conference videos + Understanding and Optimizing Web Performance Metrics (1 2)

RoR tools:

Code beautifully:

• Setting Type on the Web to a Baseline Grid & Compose to a vertical rythm.
• PX to EM converter.
• JSFiddle, test html/css/js rapidly (most frameworks supported).
• Regex CSS Docs search
• Separate behaviour from presentantion from content (i.e. unobtrusive js)
• Google with “caniuse” prefix to know compatibilities. MDN FTW.
• CSS, HTML and JS docs in DocHub.
• Aggressively correct Git/Ruby/Rails/Testing style guide.
• Make pixel-fitted pixels.
• JS style guides: Airbnb, Github, Addy Osmani,

UX and design:

• Use fonts for icons.
• Critique a web in 30 sec
• See your web on different browsers (more) and on different screen sizes.
• Color contrast.
• Retinafy your website.
• Document your CSS with KSS.

Bulletproof web:

• SeleniumHQ, automate browser actions (bots doin’ the job).
• JSLint, validate your javascript and CSSLint your CSS.
• ScriptCover, what js is executing when.
• JSUnit, unit testing for JavaScript.
• Test mobile browser capabilities with Ringmark.
• Javascript unitary tests and continuous integration with Jasmine and Teamcity.
• Use Litmus to test email clients and Browserstack for browsers.
• Continuous integration with Travis.

Learn, learn, learn

Some plugins/scripts worth mentioning:

• MediaElements.js
• Use RequireJS to manage JS loading.

Market it

• Use Schema and/or microformats for SEO and other machine-machine stuff (html5 considerations here) (google test)
• Make a presentation with Deck.js, Showoff or S5.
• Cool hosting and deploying sites: Heroku, Digital Ocean, Cloud66,…

Inspirational guys in the business:

• Paul Irish: html5boilerplate starter (and more things), great family name.
• Rasmus Andersson: designer, Spotify.
• Chris Coyier: creator of css-tricks.com
• Quora: best designers under 25, best product designers in Sillicon Valley.
• Leah Buley, UX designer.
• CubanCouncil did the Facebook logo and are reference since.
• The Mill make amazing cinematics (not web related, but amazing anyway)
• Addy Osmany

Other toolboxes

• A collection of the best time-saving apps, tools, and widgets from around the web.