Rion.IO

Handy Development Tools for Assisting Others From Your Browser

Rion Williams -

While I was performing my usual duties on the forums, I received a response regarding one of the examples that I had used for an answer and I thought I would elaborate a bit more on it and some of the other tools that I find myself commonly using.

But the tool in question was SQLFiddle, which is an online tool that allows you to create databases and perform queries within the confines of a browser to share with others. The user was overjoyed at discovering the tool and several other users also chimed in, so I thought I would go over a few of the tools that I find myself commonly using to assist others online.

Tools for HTML and Javascript

Javascript and HTML are likely the easiest examples to quickly throw together when you need to help examine a user's strange CSS related issue or just to create a very simple example to demonstrate the functionality that a user is looking for. As a result, these are some of my favorite kind of questions to answer because not only can you provide the user with actual code that they can plug into their application, but they will also receive some instant feedback through an interactive demo to determine if it is exactly what they need.

Both of the following are two tools that I use all the time when helping users solve some of their Javascript and CSS-related issues as well as developing simple proof of concepts and mock-ups that involve some heavy Javascript. They are both solid tools that I would highly recommend both of them.

JSFiddle

JSFiddle was my first love when I began answering questions a few years ago on Stack Overflow. It provided a very simple four-pane system that allowed each pane to independently handle Javascript, CSS and HTML along with a single output pane so the changes that were made to any of the panes could be reflected in real-time. JSFiddle also features a bevy of available frameworks and libraries that can easily be included within your pages if you need to troubleshoot issues related to jQuery, MooTools, Knockout, jQueryUI and more! You can find some of JSFiddle's major features listed below :

  • Account Creation to monitor, save and share your existing Fiddles.
  • An extensive collection of available frameworks and extensions, which can easily be integrated.
  • Naming, Descriptions and other options for individual Fiddles.
  • Support for Javascript, CoffeeScript and SCSS.
  • Ajax Request Simulation in multiple flavors (e.g. JSON, JSONP, HTML and XML)
  • TidyUp and JSHint integration to keep your code clean.

JSFiddle is still in the alpha stage of development, where it has been for quite some time, but I think everyone that has used it can safely agree that beta and beyond should be exciting.

JSBin

JSBin is another alternative to JSFiddle that I surprisingly discovered while JSFiddle was performing a major update to their site, but that maintenance actually worked against JSFiddle. Ever since I began to use JSBin, I have found it quite difficult to part from it. I think that it provides a more bare-bones approach as opposed to JSFiddle and allows you to throw together an example much quicker in slightly simpler interface. Much like it's competitor, JSBin also features a majority of the components that assisted in making JSFiddle as successful as it is :

  • User accounts to create and manage your JSBin examples.
  • Simple, collapsible-tab interface to separate each of the major areas (e.g. Markup, CSS, Javascript, Console and Output) of your Example.
  • Easily integrate Javascript libraries and their associated CSS files such as jQuery, jQueryUI, jQuery Mobile, Bootstrap, Kendo UI, Knockout, Angular, and much more!
  • Autosaving and autorunning for your examples, which can make development much quicker.

Overall, JSBin and JSFiddle are very similar and it is ultimately up to personal preference for which one you choose to use, but I highly recommend both of them for throwing together quick examples, proof of concepts and helping troubleshoot issues.

BrowserStack

BrowserStack is an infinitely useful tool when attempting to solve very specific HTML, CSS and Javascript problems that may involve a user's environment (such as a legacy browsers) that allows you to run code in a variety of development environments from within your browser.

You may have heard of BrowserStack recently as Scott Hanselman's recent blog post discussed it being integrated into Microsoft's Visual Studio. It has full support for a huge range of different browsers, resolutions, environments and also allow you to even run code from your local machine through one of the virtual servers. You can see some of the major features below :

  • A huge assortment of environments are supported (both desktop and mobile)!
  • Operating System support includes Windows XP, Windows 7, Windows 8, OSX Snow Leopard, OSX Lion, OSX Mountain Lion and Mobile support for OSX Safari, Mobile Android and Mobile Opera.
  • Unparalleled Browser support options

Your Browser's Developer Tools (F12)

One item that must be mentioned when discussing tools that excel at troubleshooting HTML, CSS and Javascript related problems are Developer Tools. Developer Tools allow you to quickly and easily inspect, analyze and manipulate the current HTML and CSS within the page to help solve any of those pesky CSS issues that can often arise. A Javascript Console is usually available as well to help troubleshoot Javascript specific issues as well.

Tools for Server-Side Languages and SQL

Unlike the previously mentioned technologies (such as Javascript, HTML and CSS), it can be much more difficult to recreate online-accessible examples of actual server-side oriented code and languages. But fear not, as the tools are out there to allow you to not have to open up your local IDE just to throw together an example for someone and hope that things work out.

CompilR

Compilr is a cloud-based development tool that allows you to create, compile, debug, run and share applications in a wide assortment of languages and environments all from the comfort of your browser. After creating an account and logging in, it takes just a matter of seconds to actually get started in the language of your choice.

Some of the features that are included :

  • A flexible, easy-to-use interface that allows you to throw together examples and actual projects all within the comfort of your browser.
  • Tons of supported languages and environments (C, C++, C#, Fortran, Java, Javascript, Objective-C, Objective-C++, Pascal, PHP, Python, Ruby, VB and even x86 Assembly)
  • Support for creating both public and private projects to easily share your projects with others.

Compilr is still fairly young and is still continuing to grow but has proven that it can be an incredibly useful tool, especially if you aren't around a development environment and want to try something out in one of your favorite language.

SQLFiddle

SQLFiddle functions as a JSFiddle or JSBin but for the SQL world. It allows you to easily throw together and share examples using actual SQL to troubleshoot issues, compare and contrast how queries react in different environments and basically tinker with nearly anything SQL-related all from within your browser. SQLFiddle features a very simple three pane system (schema, query and output) to allow you to get things up and running very quickly. Major features include :

  • Account creation to save and manage your fiddles along with a very easy system to share them with others.
  • Simple table creation and querying using an intuitive interface.
  • Examples to help you get started working with the environment.
  • Support for a variety of SQL-oriented environments such as MySQL, Oracle, PostgreSQL, SQLite and Microsoft SQL Server.

SQLFiddle is honestly a great tool for debunking random SQL issues that a user may be encountering or if you just want to throw together a very basic proof-of-concept for an upcoming project and aren't around a full database environment. I'd highly recommend giving it a try if you know your way around SQL.

Overview

These were just a few of the tools that I find myself using often when answering questions online and even throwing together simple mock-ups for solving real-world problems of my own prior to implementing them within projects. If you have any other recommendations, please feel free to leave a comment below as I am always looking for tools to make throwing together quick prototypes and examples much easier.