<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/907525871/?value=0&amp;guid=ON&amp;script=0">

Power Blog

    modern web development tools
    John Saunders
    by John Saunders |

    Top 5 Modern Web Development Tools That Will Improve Your Site

    Website technology must constantly evolve in order to keep up with the fast paced nature of the web. It seems like every day we are introduced to new platforms for HTML5, CSS3, and JS that sprout up as we transition into this new generation of web technology. This constant change can make it difficult for new developers to find a stable platform to build a site from, so we’ve listed five platforms that have proven themselves as big players in this new fast moving development climate. These modern web development tools can help speed up and refine your development practices, so give them a try if you aren’t using them already.

    HTML5 Boilerplate

    HTML5 Boilerplate is the go-to default template for the HTML5 development world. It’s an open source system that has combined the work of hundreds of developers into a single hyper refined system that is fast, easy to use, and easy to understand.

    Boilerplate is filled with features, but some developer favorites are:

    • Server side apache files (Like htaccess) have been refined for speed out of the box, so developers need not worry about optimizing their server configurations
    • JS extensions like JQuery and Modernizr are included out of the box using Google CDNs, with local file fallbacks
    • CSS helpers and resets (Including Normalize.css) are included with the bundle
    • Optimized for Google analytics out of the box

    HTML5 Boilerplate is a great tool for new projects, and becomes extremely powerful when used with UI based frameworks. It’s a must have for developers. You can download Boilerplate at http://html5boilerplate.com/

    Twitter’s Bootstrap

    Bootstrap is a front-end framework built by the developers at Twitter. It focuses on UI/UX and rapid development. Bootstrap is a great tool, because it automates large parts of the initial CSS/JS development phase of a site.

    Some of Bootstrap’s strong points include:

    • Responsive mobile design out of the box
    • Sleek, and powerful base CSS files & UI, including multi colored buttons, forms, notifications, and much more - all in CSS3/HTML5
    • Out of the box Javascript UI Framework including tooltips, modals, validations, rotators, tabs, and much more
    • All elements controlled through markup so you never actually have to touch the CSS/JS files if you don’t want to

    When you use Bootstrap and Boilerplate together, you end up with a huge piece of your design and development finished for you, and a base site that looks good on mobile as well as desktop devices. You can download Bootstrap at http://getbootstrap.com/.

    Underscore JS

    Underscore is a JavaScript toolkit that extends common functionality of JavaScript. Underscore describes themselves as the “Tie to JQuery’s Suit”.

    Underscore adds a large amount of functionality to vanilla JavaScript, and in doing so, automates functionality that would generally take many hours. Some core features that underscore offers are:

    • Full JS Templating system - which proves very useful for dynamic data pulled from an API
    • Advanced string functions, search functions, and JSON parsing
    • Expanded JS functions including indexOf, filter, foreach, and many more

    Underscore is a staple for new and existing projects. It is open source, and can be downloaded at http://underscorejs.org/.

    Cake PHP

    Cake PHP is a clean MVC framework and templating system that allows you to deploy and build your dynamic websites fast and efficiently. Cake’s powerhouse is its built in Database Handler and PHP security features. On top of all this, it includes a suite of extras including a localization framework, XSS/SQL Injection safeguards, and much more. Developers often times spend months developing features that Cake has out of the box.

    Cake PHP can be downloaded at http://cakephp.org/. There is a learning curve with Cake, but the website includes full documentation and beginner’s guides for newbies.

    Initializr

    Initializr is a really cool web app that automates the initial steps of a project for web developers. Earlier in the post, we went over Boilerplate and Bootstrap, and explained that when used together, they make development rapid and easy. Initializr’s web app mashes these two technologies together for you, and generates a template you can use for your website. It’s really quite amazing.

    Initializr can be downloaded at http://www.initializr.com/.

    Putting it all together

    With all the above technologies in mind, all a developer needs to do to get a fully functional high-end modern website started is generate their Bootstrap/Boilerplate template with Initializr, import Underscore JS, and then move the Initializr template into Cake PHP (Or the CMS of their choosing). Over time, these methods and technologies will save hundreds of hours for you and your clients.

    New Call-to-action