Rapid Web Development Prototyping - JSFiddle

Introduction

This short article describes a free online tool that will accelerate your web dev ideas / projects - JSFiddle. 

JSFiddle is an online tool that has four equally splitted windows. Three Input windows: HTML Source Window, JavaScript Source Code Window, CSS Input. A one result window.

 

Here you can rapidly explore CSS Frameworks (like Bootstrap) or JavaScript Frameworks like VueJS, Express or ReactJS. The best part is, that you need no local development environment. 

Choose a JavaScript Library / Framework

In the bottom left window you have a dropdown option where you can choose from a variety of Frameworks and Libraries. In the example below we chose Vue 2.2.1 as our Library. We also wrote some basic HTML and create a simple Vue Instance.

The best part of JSFiddle is, you get all the warning and error messages from the Library in your Browser console (right part in screenshot above). Which will make you debugging even more easier.

In the final screenshot we fixed our syntax error and we can see a successfully generated static HTML Page from our HTML, CSS and JavaScript Vue Source code. JSFiddle is an integral of quickly trying our new framework or ideas and sharing code snippets.

Leave a comment

Please note, comments must be approved before they are published