JSFiddle

  • Presto News via Pipes #11 is the latest revision

    Grab the Presto News RSS Feed via Pipes into JSONP.

    $(document).ready(function() {
        $.getJSON("http://pipes.yahoo.com/pipes/pipe.run?_id=76feb9c54bde5e60f57b81e0320d11ad&_render=json&feedcount=10&feedurl=http%3A%2F%2Fblog.presto.com.au%2Fcategory%2Fnews%2Ffeed%2F&_callback=?",
            function(data) {
              console.log(data);
            
            $.each(data.value.items, function(idx,item ...
  • Using Function.bind to explicitly set scope

    You can use the bind method of Function to explicitly set the scope of a function you are calling. This is similar to using .call and .apply but .bind create a new function with the defined scope.

    var x = 9; 
    
    var module = {
      x: 81,
      getX: function() { return this.x; }
    };
    
    alert(module.getX()); // 81
    
    var getX = module.getX ...
  • Resource Timing using window.performance #11 is the latest revision

    Did you know you can use window.performance to measure the performance of your web apps and its resources.

    function resourceTiming() {
        var resourceList = window.performance.getEntriesByType("resource");
        console.log(resourceList);
               
        for (i = 0; i < resourceList.length; i++) {
            if (resourceList ...
  • JavaScript: Playing with Object Property Attributes

    Did you know that you can change the attributes for each property in an object? e.g you can hide a certain property, or make them read only, or even provide get/set methods to modify the values etc. ECMASCRIPT 5 provides this out of the box and it's very useful for OO design.

    var console = new consoleOverride(); // overwrite console to visual console
    
    // START JSFIDDLE CODE
    
    var sampleObj = {
        name: "mark paul",
        age: 31,
        employed ...
  • Javascript's Primitive Non-Reference Based Data Types

    A demo that shows how the primitive JS data types of Number, String, Boolean, undefined and null are not reference based whilst the complete Object data type is referenced based when copied even through its properties are of a primitive type.

    var console = new consoleOverride(); // overwrite console to visual console
    
    // START JSFIDDLE DEMO
    // ** Primitive Data Types are not reference data types ...
  • CSS3 Elliptical Border

    Elliptical Border are a cool Elliptical shaped inner curve based border.

    <div class="border-hook">
    I sit inside a div with a Elleptical Border radius set    
    </div>
  • HTML5 Canvas Vs CSS3 "Loading" Widget #8 is the latest revision

    A comparison of both a HTML5 Canvas "loading" widget and a CSS3 "loading" widget.

    var canvas = null;
    var context = null;
    var rotateAngle = null;
    var showGuideGrid = false; // set to false to hide the drawing assistance ...
  • HTML5 Canvas Loading Widget #10 is the latest revision

    I used HTML5 canvas to create this loading widget that you an place on your webpages. You would usually use animated gifs for something like this but I wanted to attempt this using canvas. The end result is pretty cool and can be adjusted to dynamically change size, animation speed etc

    var canvas = null;
    var context = null;
    var rotateAngle = null;
    var showGuideGrid = true; // set to false to hide the drawing assistance ...