Web standards were developed over the course of the last two decades by the World Wide Web Consortium (W3C) and others in order to ensure that all websites displayed the same way in every major web browser. The hard work of standards governing bodies has resulted in recent developments like HTML5 and CSS 3, but it was also instrumental in creating the HTML 4.01 standard, as well as every implementation of XHTML.
Today, developers absolutely need to adhere to standards for HTML, CSS, and JavaScript development if they want to have any hope of their site enjoying widespread usage on both traditional and mobile devices. That’s why the three sites listed below are so essential to the development process. These sites validate and implement code on-the-fly, giving developers and designers an instant window into their successes and necessary alterations.
Dabblet
The Dabblet service is perhaps one of the most unique tools for writing and validating code. The service supports both HTML and CSS, and it provides a WYSIWYG view of the development as it progresses. Designers can choose between several views, including HTML and the preview, CSS and the preview, or both XHTML and CSS combined with the preview window. That allows for some pretty rapid and intense development, and it works out well for designers who need to get the job done in a hurry, while verifying that everything looks great and validates without fail.
The service also allows developers and designers to create an account with the website that enables them to save their Dabblets, as they are called, and come back to work on them at another time. That saved work is then placed in the cloud for access on any computer, rather than saved locally to the designer’s desktop. This kind of universal accessibility has yet to be achieved even by services like Adobe’s Dreamweaver desktop editor, so it’s a really nice touch that boosts the service’s usefulness.
Tinker.IO
Tinker markets itself as a social collaboration tool catering directly to web developers, and that’s a pretty unique spin on the whole situation. The site presents CSS, JavaScript, and HTML coding boxes on the righthand side of the page and then allows developers to see their code in action on the page’s righthand side. The code can be saved to the cloud and shared with others instantly, or it can be processed in the WYSIWYG window by pressing the “Run” button.
Using the “Settings” button at the top lefthand side of the development tool, designers can choose the DOCTYPE element for each page they’re designing (from HTML 4.01 Transitional right through to HTML5) and they can also select the JavaScript library that they’re coding for alongside the HTML. This will enable instant validation of elements and the creation of standards-valid code on the fly, and it’s great to see such elements in a usable, drop-down menu for selection. It’s also refreshing to see a more social spin on the development process, since so few designs actually happen in complete isolation from other developers.
JSBin
The JS Bin website focuses almost exclusively on JavaScript development, though it does pair an HTML coding box so that the code can be implemented and tested. Developers can choose to enable a live preview window that will automatically update as new code is added to either the JavaScript environment or to the HTML document itself. Keyboard shortcuts are enabled with this unique development tool, and users can get a primer on those before they begin the development process itself.
JS Bin allows files to be saved to the cloud for easy retrieval later; it also features a download option for finished scripts and a “Save as Template” option so that the code produced can be saved, well, as a template, for major content management platforms and other software solutions. All said, it’s one of the most simplistic and effective JavaScript development resources online. Any developer who routinely gets knee-deep in AJAX libraries would do well to consider JS Bin as their main development environment.
It wasn’t too long ago that creating a standards-valid website meant heading to the W3C validator and doing the process manually. Luckily, that is no longer the case. Rich web applications provide a validation service on-the-fly, allowing for the instant and intuitive creation of valid websites, stylesheets, and JavaScript routines. It’s a refreshing way to ensure that a website appears uniform between all desktop and mobile browsers currently in use.
Have any other online code tools that you use? Let us know in the comments!
Resources and reference: NiceDesign, a Graphic Design agency from Perth