Web Development – Some ‘Good To Great’ Tools

I’ve started to create a list of some great online tools that will help you (and me) in the next project. Some of the tools are helping to achive a certain effect (=gradients) while others are more a ‘hello world’ examples to hack around it in order to understand a new HTML5 API (e.g. HTML5 File API) and then harness it to your next web app. You might say it’s not a tool and you might be right. I guess it is more a list of resources that might help you get better at what you do.

If you got some other good sources please let me know… Here is the list:

Browser capability

Before you start your project you need to check what is the set of features and which browser will support them. There are few sites that will give you good answers. The lastest one is: html5please.us and other good sources are caniuse.com which include mobile browsers as well and mobilehtml5.org that is all about capability for mobile browsers.

JavaScript MVC frameworks

There is a new kid on the block – Thorax I like that fact that it is an opinionated backbone application framework. It is a combination of several tools:

• Backbone – the core framework
• Underscore – JavaScript utility belt with you
• Zepto – jQuery DOM goodness for mobile
• Handlebars – mustache for movember
• Stylus – Good and clean CSS experience
• Lumbar – packaging utility

Another framework that is worth the time to look into is: emberjs and Trello tech stack that is coming from the great dudes of ‘Fog Creek’.

If you wish to check what other options you have today – I would go to this site and check some of the most popular MVC framework that are out there.

Work and share javascript online

• Jsbin.com
• jsfiddle.net
• Google code playground – which include some good examples of Google and JavaScript APIs.

I also found myself using Simple JSON viewer in cases you wish to find out a specific parameter in a large JSON object.

Playing with CSS3

• Nice html5 app to play with gradients and of course http://css3please.com that let you tune your styles online.
• http://westciv.com/tools/ – Great collection of tools to improve your CSS/CSS3 capabilities.
• http://pageblox.com/ – A tool to help you build your next grid online.
• Examples for CSS3 usage: CSS3 Patterns Gallery
• CSS3 Gradient Generator – The CSS3 Gradient Generator is a showcase for the power of CSS gradients.
• CSS Gradient Generator – a powerful Photoshop-like CSS gradient editor from ColorZilla.

Libraries for Fonts

• Google Web Fonts API – Google Web Fonts makes web fonts quick and easy to use for everyone, including professional designers and developers. We believe that there should not be any barriers to making great websites.
• TypeKit – Simple, bulletproof, standards compliant, accessible, and totally legal fonts for the web.

Offline Libraries & Frameworks

• ManifestR – a bookmarklet for creating an AppCache manifest file.
• LawnChair – a library that provides a lightweight, adaptive, simple and elegant persistence solution.

For Mac Web Developers

• LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. When you change a CSS file or an image, the browser is updated instantly without reloading the page.
• CodeKit automatically compiles Less, Sass, Stylus & CoffeeScript files. It effortlessly combines, minifies and error-checks Javascript. It even optimizes images, auto-reloads your browser and lets you use the same files across many projects.

Mobile web development – Some good reads

• The mobile web application tech stack – Good post by @borismus on the best tools today for developing mobile web app.
• Rethinking the mobile web:  a good presentation which take a slightly different slant on the responsive web design ethos for mobile devices.
• CSS media query for mobile is fool’s gold – Cloud Four’s article sets the record straight regarding claims that responsive web design is perfect for producing mobile-optimised websites.

It is far from being a full list – just a beach-head to start have a source for some tools that will make you more productive.