Best Web Development Tools & Frameworks

09 January 2013
by: Kenny
in: Blog
note: no comments

Web development has continued it's rapid progress in 2012, HTML5 showed it's advantages for cross-platforms, CSS3 is being applied to more and more real-world projects, responsive design techniques were known and used by more and more people. In this article we collected the most representative fron-end web development tools and frameworks. It's absolutely a great list of favorite tools either from full-featured IDE to small frameworks and tools, they will help reduce the development complexity and save our time greatly.

NO.01 Foundation 3
Foundation 3 is developed by ZURB corporation, known as the world's most advanced front-end frame. By using flexible grid system, developers can design the page layouts in quick time. The grid could be any size we need and easily to adapt to a variety of screen sizes.

NO.02 Proto.io
Proto.io is a new interface design tool, specially designed for mobile applications. The web based online environment let developers create all popular screen prototype projects easily such as iPhone, iPad, Android apps.

The spotlight of Proto.io is it's interactive abilities with pre-designed pages. It supports all touch gestures as well as slides, flips and fade animations etc. It's simple to use and available for free!

NO.03 Fontello
Why is it so difficult to find a group of icons that cover all basic functions? No need to confuse any more, Fontello has all our needed icons and we can choose to compile our own sets. You can download all icon set from Github. This project is opensource and highly recommended to donate if you liked!

NO.04 Bugherd
Bugherd provides a clean, well-organized approach to deal with feedback and bug fix etc. We no longer need the complex email feedback method but simply add a JS button on website so visitors be able to submit comments or suggestions efficiently. Bugherd provides us a friendly and intuitive interface to manage all stuff.

NO.05 Sencha Touch 2
There is no doubt that mobile touch-screen devices have brought great impact to Web development. Sencha Touch is an HTML5 based mobile application development framework. It's designed to attrack HTML5 developers to use this platform to develop web apps for iPhone, Android and BlackBerry such devices. The improved API, complete docs and tutorials as well as reliable local integration let Sencha Touch 2 strong competitor in Mobile frameworks.

NO.06 Dreamweaver CS6
Dreamweaver is a classic Web design software, the latest release Dreamweaver CS6 supports HTML5 and CSS3 coding. The JQuery extended support for mobile and Adobe PhoneGap framework can help you establish projects for various screens, mobile phones and tablet computers. CS6 is integrated with lots of functions including Adobe Business Catalyst, FTPS, FTPeS support, Adobe Creative Suite, Adobe BrowserLab and many other features.

NO.07 Cloud9 IDE
Cloud 9 is NodeJS based online integrated development tool. Syntax highlighting supported for C#, C++, Python, Perl, Ruby, Scala and many common development languages.

The friendly built-in Vim modes support for popular version control system, like Git,Mercurial and SVN. It also has very powerful plugin system to extend its functions, for example with CSSLint and JSBeautify, Cloud9 becomes a very useful code beautifier.

NO.08 Adobe Edge Inspect
Formerly known as Adobe Shadow, Edge Inspect is a very useful tool for mobile developers. You only need to connect your device (Android and iOS) and your computer, then your site will be displayed on each of these devices. This absolutely let debug more effectively. Developers will see how website being displayed on the different devices.

NO.09 Adobe Brackets
You might feel that all code editors are very similar and no further innovation available. Brackets let us know there're still lots of features to explore. Brackets is open source HTML, CSS and JavaScript development tool from Adobe. The core effort of bracket is to reduce duplication in development process such as browser refresh, element style editing and so on.

NO.10 Modernizr 2.6
Modernizr is an open source JavaScript library. It's used to detect users' browser compatibility over HTML5 and CSS3. By doing that, developers can make full use of the advanced features from HTML5 and CSS3 but not to worry about compatibility issues among different browsers.

NO.11 Sublime Text 2
If you want to enjoy the pleasure by fluent coding, Sublime Text 2 is absolutely something you should try out! Sublime Text comes with nice user interface and powerful functions such as code-thumbnails, multi selections, shortcut command etc. Custom key bindings, menus and toolbars are also available. The Sublime Text's main features include: spelling check, bookmarks, Python API, Goto and instant project switching, multi windows etc.

Sublime Text is a cross-platform editor, while supporting Windows, Linux, Mac OS x and other operating systems, it is commercial software but available with endless trial period.

NO.12 PhoneGap 2.0
PhoneGap is a free and open source development framework, allowing web developers to use our familiared HTML,CSS and JavaScript to build cross-platform mobile applications locally. PhoneGap support iOS, Android, Palm WebOS, Symbian, Blackberry, Windows Phone and Bada platforms.

NO.13 Emmet
Emmet is formerly known as Zen Coding, provides a quick way to write HTML/CSS codes. Emmet uses dynamic CSS expression-like syntax to generate code, it means that you do not need to edit and create your own fixed code fragment. Emmet greatly improves our coding efficiency.

Using Emmet with excellent editor will make your code fly! Supported editors include:

NO.14 Yeoman
Yeoman provides a powerful set of tools, libraries and the workflow that can help developers to quickly build a beautiful, compelling Web applications. The Yeoman main features include:

Build framework in light speed(Support custom templates including HTML5 Boilerplate, Twitter Bootstrap etc).
Auto compile CoffeeScrip & Compass – While editing source codes, Yeoman LiveReload monitoring process will auto compile codes and refresh your browser. Developers don't have to do it manually.
Code Auto checking – It will auto run jshint cheker to make sure the codes are following the best language practice.
Build-in preview server – Developers don't have to start their own http server, the build in server can be started with a single command.
Efficient picture optimization – Yeoman uses OptPNG and JPEGTran to optimize all pictures to reduce load waiting.
Generate Appcache list – Yeoman will generate appcache manifest as you build the application.
Killer level construction – Yeoman will auto complete most of the work and save us lots of time and efforts.
Package management – Developers can easily find new packages or update via command lines without opening explorer.
ES6 module syntax support – You can compile modules using the latest ECMAScript 6 syntax.
PhantomJS unit testing – Run unit testing easily with PhamtomJS. When creating new applications, it will also automatically create a test framework for you.

NO.15 TypeCast
With TypeCast, developers can choose word fonts from Fonts.com, TypeKit, FontDeck and google. We can easily compare the actual results. Website layouts becomes more and more essential part in development due to the great improvements on fonts. TypeCast is to simplify the process in choosing the perfect font for your website.

NO.16 Gridset
Gridset lets us easily add columns, define set etc without knowing the underlying mathematical calculations.

Grid systems are becoming the focus of Web design. Web page grid system needs to be more flexible, more responsive. Gridset allows us to use a grid system pretty simple.

NO.17 Microsoft WebMatrix 2
WebMatrix is a new Web development platform, it's featured by one-stop and simplified development process, providing developers a simple, integrated web solution.

WebMatrix provides all the tools required for Web site: Web Server, database, Web frameworks, and development environment including: IIS Developer Express, SQL Server Compact Edition, asp.net "Razor".

NO.18 Trello
Trello is a team collaboration platform that was developed by Joel Spolsky, It's officially released at the TechCrunch Disrupt Conference 2012. Trello is designed to track everyone's working situation in a team. Trello team work system can be used by anyone in any industry. It can be used as a corporate collaboration tools, or as a list of personal management tool.

NO.19 Firefox 18
Firefox has many powerful development tools plug-ins and many of them are must-have debugging tools for developers. Starting from Firefox 18, Mozilla will officially open the next-generation JavaScript engine – IonMonkey. It will significantly improve Firefox's JavaScript performance and improve browser security.

Latest version added support for OSX 10.7+ and WebRTC. It introduced the new HTML stretch algorithm to improve the picture quality. Achieved the CSS3 Flexbox and the touch implementation of W3C standards. Startup speed is improved by intelligent processing signatures.

NO.20 Photon
Photon is a very interesting project. Add lighting effects to DOM element in solid space by JavaScript libraries, and CSS3 transforms.

Author Tom Giannattasio provided three examples, including the effect of a very good paper cranes, you can move the mouse to rotate, the Photon switching button provided below allows us to feel the differences between the two states.