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:
- Grape (Video) and Acts As API (API Gems for Rails)
- Grape + Goliath REST API Example (Goliath video)
- Compass + SASS + Zurb Foundation (or LESS + Bootstrap Gems or SASS Bootstrap Gem)
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.