Servage Magazine

Speed of development is a crucial factor for web projects. Especially commercial projects need to stay on top of the development workflow all the time, so new and improved features can be released often and successfully. There is a plethora of tools available to help coding, but many smaller groups work just fine with a basic local development setup and some simple project management. Furthermore mockup and prototyping tools are really helping you speed up development. Therefore consider using the tools below when you need to test solutions for smaller problems or quickly get an overview of an idea.

Test Javascript, HTML and CSS online with JsFiddle

Using JsFiddle you get a simple web interface where you can test your code instantly online. Furthermore JsFiddle allows you to share code snippets, so you can use it to share and show code examples. This is especially useful if you struggle with a problem and need to show an example of the issue to someone else remotely. You can then get help by someone actually editing in a copy of your code example. This process is extremely useful, because you can solve problems and get help quicker. It really speeds up your development process.

The interface is structured in four areas. The top left area provides an input for your HTML code. The top right one provides and input for your CSS styling. The bottom left is for your Javascript. Finally the bottom right area is showing a preview of the code. All areas provide nice syntax highlighting and generally enough space to overview and solve problems with small amounts of code. Unfortunately you may have a tendency to loose the good overview when the amount of code involved in the fiddle gets too large. However, JsFiddle was never designed to solve problems with large codebases, rather small fiddles, hence the name.

Build and test Bootstrap-styled content online with Bootply

Bootply enables you to quickly build sample HTML code with Bootstrap-styling. The editor has standard drag and drop elements, so you can quickly mockup the element you are working on. Bootply automatically adds all the relevant Bootstrap classes to the HTML tags and you can preview the content using Bootstrap CSS instantly.

The structure of the interface is similar, but yet different in comparison to JsFiddle. Bootply has the preview area in full width in the lower half of the window, which makes the editor areas above awkwardly positioned. Generally coding with the Bootply tool does not seem as smooth as JsFiddle, but still it works really great to quickly test some Bootstrap elements.

One great advantage of Bootply is that you can quickly build a single element, and test the behavior of it – without needing to setup a sample boilerplate HTML page locally, include all the Bootstrap files, and then some time later actually start building your test. So the swiftness is particularly useful in the phase where you are exploring different element options to solve a specific issue in your web interface.