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 front-end 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 web designers 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 web 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 web developer 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 web 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 web design and front-end development finished for you, and a base site that looks good on a mobile web apps 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 can create 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 apps and web design tools in mind, all a web 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.
