highlighter

Thursday, 19 December 2013

So why are you not using jsfiddle?

This is a really short post, because there is not much to say, other than making you aware that you should be using jsfiddle as much as possible if you are playing around building web/mobile sites. It is a great facility and basically gives you a sandbox for trying out the javascript frameworks (like jquery), html5, css3, coffee and so on, without having to build your own websites first. Here is a very simple example, but it will give you the idea. We want to get a bit of HTML running and responding to a click of a region. So here is my jsfiddle. I am doing this in HTML:

<header>First Heading</header>
Wanna try some javascript, well how about <div class="clickable" id="clickme">Click here</div>
<footer>This is the Footer</footer>

with this Javascript:
function do_alert() {
    alert('hello!');
}

$("#clickme").click(function(){
    do_alert();
});
              
and this CSS:
header {
    font-size: 30pt;
}
footer {
    font-size: 10pt;
}
.clickable {
    width: 100px;
    cursor: pointer;
    border: 3px solid red;
}

These correspond to the three panes in jsfiddle: HTML, javascript, CSS. Click on "Run" and the Results pane then gives you the result of this: something to click on, which produces an alert box when you do.


The great thing is that you can simply share this stuff with other people, publicly, especially useful if you are trying to figure out why something isn't working, and post to stackoverflow etc: the experts will be able to see right away what is going on. They can fork your fiddle and suggest a corrected version.  What a great way to help each other!

So, if you are not yet, you really should be using this facility!


No comments:

Post a Comment

SmartaTech Blog