Stack Fiddle – Now up on github

February 23, 2011 By Jonathon Bolster / 4 Comments

Having published Stack Fiddle last night at about 3:00am (GMT), I figured that it would have been a good time to go to bed. I wrote the blog post and posted it on Twitter for the whole world to see. Then it was bed time.

Now I’ve just created a Stack Fiddle project on github* with the source for all to see and play (and report issues). I’m new to git and github so if you know of anything that I could be doing better then let me know. I had a quick look at licences to try and allow something that gave the most flexibility – finally choosing the Creative Commons Attribution-ShareAlike 2.5 licence. Again, if anyone has any points to make about it then let me know.

Some of you keen eyed people will probably notice that Stack Fiddle is up to v1.0.3 from v1.0.0 last night. What’s all that about? Well, I was eager to get in some ideas that I had overnight and I just couldn’t wait. The main thing is that Stack Fiddle will now only work on a list of tags rather than every code block on the site. I’ve put in a default list for JavaScript related ones but this is customisable through the options page. So far, my mini releases have been:

  • 1.0.3: Added license and readme
  • 1.0.2: Tag restrictions – StackFiddle will only work for given tags (customisable!).
  • 1.0.1: Initial commit into git. Changed the main script to be non minified in preparation for github

So go! Play. Tell your friends about it. Tell me about it. Tell me about your holiday plans. I don’t mind. Remember to let me know of any features you want – or just fork the git repository if you think you have anything cool that can be added.

* Note: Please remember that I did say this was posted up at 3am. I wrote it and tested it and thought it was good enough to publish. The 3am time does mean a possibility of inefficient and uncommented code (we can’t be perfect all the time!). This will be tidied – I promise :)

Programming, StackFiddle

I made a Google Chrome Extension – Stack Fiddle!

By Jonathon Bolster / 6 Comments

That’s right! Today I decided to make my own Google Chrome extension – and I call it Stack Fiddle.

It’s pretty simple, really. I like answering questions on Stack Overflow – I mostly like the jQuery / JavaScript questions. One tool that I absolutely love is jsFiddle. You have three boxes (JavaScript, CSS, HTML) that you can put your code and the result appears. No faffing around with having to set up any scaffolding to get simple tests done.

So what have I done then? I’ve combined the two! A lot of helpful people put their CSS, JavaScript and HTML in separate code blocks which is great – but then I have to copy and paste them individually into jsFiddle and change the framework to jQuery. My extension gives all the code blocks a handy little header like this one:The header that StackFiddle adds to the Stack Fiddle page.

Click the HTML / JavaScript / CSS to choose the ones that you want to fiddle with and then press the ‘Send to jsFiddle’ link. Everything is sent off to jsFiddle and it’s ready to go.

This is just the first version so the feature list is pretty short:

  • Easily select code blocks to send to jsFiddle
  • Choose your default framework and version
  • Detect all the jsFiddle links and create links to display the embedded fiddle in the page

Since posting it to the Chrome extensions gallery I’ve come up with a few ideas on how to make it better (including prettifying it a little – as the logo I tried making is rubbish) but if you have any ideas then leave me a comment or send me a message on Twitter (@jbolster).

Give it a whirl and let me know if it’s useful for you :) Download it at: https://chrome.google.com/extensions/detail/loemajeogfdlphofpdfncpbbeoenmbpm

Some future features that I’m thinking of:

  • Giving it a better design/logo
  • Possibly extending to other stack exchange sites (suggestions!)
  • Displaying the Stack Fiddle header only on questions that have certain tags
  • Enabling appending of multiple code blocks
Programming

JavaScript – e.preventDefault() is NOT return false

January 17, 2011 By Jonathon Bolster / 1 Comment

I’ve seen a lot of people use return false in place of e.preventDefault. This is usually when dealing with setting the click event on a hyperlink. I can only think that this comes from the original JavaScript snippets of running code on a click by setting onclick="alert('hi'); return false".

This is wrong

Well – it might be wrong. It all depends on your application. As long as you know the differences in them, you should be fine:

  • e.preventDefault: this (aptly) prevents the default event from happening. In the case of a hyperlink that you want to assign JavaScript to, this will stop the link from going to the location of the link
  • e.stopPropagation: this stops the event from bubbling up. If you click on something that had a click event then using this will stop the event bubbling up and any click event that the parent containers might have.
  • return false: this is the same as calling both of the methods above.

I’ve done two examples for this:

  1. Showing the difference in e.preventDefault() and return false: This example works on the click event and shows that preventDefault and return false are actually different.
  2. Example of e.stopPropagation: This example shows a practical example of when you’d want to stop an event bubbling up. It uses event handlers on the mouseover event to show this.
JavaScript, Programming

Preventing accidental double clicks on links using jQuery

December 10, 2010 By Jonathon Bolster / 1 Comment

I recently answered this question on StackOverflow asking how to prevent someone from clicking a link multiple times.

This is the solution I came up with:

$("a").click(function(e) {
    e.preventDefault();

    if (!$(this).data('isClicked')) {
        var link = $(this);

        // Your code on successful click

        // Set the isClicked value and set a timer to reset in 3s
        link.data('isClicked', true);
        setTimeout(function() {
            link.removeData('isClicked')
        }, 3000);
    } else {
        // Anything you want to say 'Bad user!'
    }
});

You can use jQuery’s data storage methods to assign arbitrary bits of data to specific DOM elements. In this case, when the user clicks a link I assign a property to the element as well as setting a timer to remove it 3 seconds later. This lets me know if the specific element has already been clicked by just calling the data method.

It’s not a bullet proof solution since it’s incredibly easy to get around if you’re determined enough. However, it is a simple example of how you can use those methods.

JavaScript, Programming

Shortcut for JavaScript timestamp

November 30, 2010 By Jonathon Bolster / 0 Comments

JavaScript’s Date object provides a function for getting the milliseconds from the UNIX epoch – getTime():

var timeStamp = new Date().getTime();

However, there is a handy shortcut that gets the same thing:

var timeStamp = +new Date();

It makes me wonder if the +new shortcut can work for any other JavaScript object but I haven’t had a chance to look yet.

Update: Apparently it’s just the unary operator (http://xkr.us/articles/javascript/unary-add/). From the article:

The unary + operator, when used on types other than string, will internally attempt to call valueOf() or toString() (in that order) and then attempt to convert the result to a number. Thusly, the unary + operator can successfully convert many of the native JS types with certain restrictions.

JavaScript, Programming