RSS Feed

‘JavaScript’ Category

  1. Why I didn’t use a framework for ubui

    June 2, 2012 by Dave

    Why didn’t you use a framework for ubui’s core?

    Good question buddy! So here’s the answer;

    When I was thinking about how I should build ubui I had loads of ideas (and most of them were pretty zaney!) so I prototyped most of them and left it a few days so I could come back with fresh eyes and really assess the best option.

    I prototyped with JavaScript MVC, Spine, bare JS (Using named JSON objects) and modular (kind of OOP but not quite there)

    After much deliberation and toying with the most basic part of the ubui core I settled on a mixture of named JSON objects and modular JS, and here’s why:

    I knew ubui’s core would be small and light and from the get go I didn’t want it to be big or hard to work with for extending. Once I’d sorted the auto loading of the framework and modules/dependancies I’d settled on a very small, very fast, very easy to understand structure where most of the modules are JSON objects assigned to module.exports and named in an index file for the ubuim’s (the modules are called ubuim’s) so they stay named and obvious to understand (always reference to the modules in the index file) and the framework models are generally assigned as anonymous functions to pre-process cli arguments before performing a selected action.

    Take a look at the below example of the users module to understand more about why I’d use both styles (I promise it makes sense)

    this.exec({
    	"command": command,
    	"success": function (a) {
    		console.log('success');
    		console.log(a);
    	},
    	"error": function (a, b) {
    		console.log('error');
    		console.log(a);
    	}
    }).run();

    in the above example, exec is a framework model which is an anonymous function rather than a JSON object containing functions. Its an anonymous function so I can pass it arguments to set internally without the need for another method in-between exec and run which speeds up the loading and running of commands since we’re already going to be waiting for the shell to respond to us as well as checking we’re not running anything naughty.

    The model will also return itself so its a circular reference thus making it both assignable and chain-able, you can also dump out the entire object for debugging (which was super handy)

    I know a lot of people say frameworks standardise the structure of an application but that, in my eyes, doesn’t apply here since its such a simple structure and so simple to extend I have no plans to move over to any kind of framework either as there is no need to complicate or bloat the app.

    And that my friend is why I didn’t use a framework for ubui’s core.


  2. Window load vs document ready

    March 29, 2012 by Dave

    I see this issue all the time and perhaps even more worryingly I see the use of setTimeout() in places to defer listeners.

    If you don’t need to wait for images/scripts to load use:

    (function ($) {
            $(document).ready(function () {
                    //Code here
            });
    })(jQuery);

    If you need to wait for media to load, use this:

    (function ($) {
            $(window).load(function () {
                    //Code here
            });
    })(jQuery);

    Simple as that!


  3. Javascript created form submission to iframe opens new tab IE

    September 12, 2011 by Dave

    Well; of course, Internet Explorer invents its own rules and anyone trying to create a form with JavaScript and submit it to an iframe also created with JavaScript will know that this causes Internet Explorer to submit it to a new tab..

    Very annoying, But here is a solution.

    When you’re creating your iframe, don’t create it as a DOM element, create a wrapper for it and change its innerHTML.

    See below

    var a = document.createElement('div');
    document.appendChild(a);
    a.innerHTML = '<iframe name="targetMe" id="targetMe"></iframe>'
    

    Now your form can target that iFrame! Easy!


  4. C Fakepath fix

    September 1, 2011 by Dave

    So I’m sure any developers reading this have come across the Safari, IE7+ and Opera issue where an upload field is for whatever reason filled with C:\fakepath\filename GRR! How annoying!

    But below is a really simple fix!

        //get our form field
        var a = document.getElementById('myUploadField'),
            b = encodeURI(a.value),
            c = b.replace("C:%5Cfakepath%5C","");
        //We then listen for the value changing and
        //remove the C:\fakepath\ from it! easy!
        a.onchange = function () {
            this.value = c;
        }
    

    How easy was that!