Tag Archives: javascript

Get nested object properties using string path

Another take on a minimalistic implementation to get nested object properties by using a string path in JavaScript.

Validate Swedish Personal Identity Number (personnummer) using JavaScript

Put together a function to validate Swedish Personal Identity Numbers (personnummer) using JavaScript for use in client-side form input validation.

Developing Large-Scale JavaScript Web Sites – SWDC2010 slides

Being very humbled to be part of the star struck lineup at The Scandinavian Web Developer Conference 2010 I did a talk about Developing Large-Scale JavaScript Web Sites (slides available here as PDF).

The presentation is basically a quick high-level overview of some of the main points I’ve encountered after several workshops at different clients wanting to take the step from a legacy server centric web site architecture to a modern rich client side implementation.

Ajax and REST architecture – Optimera STHLM slides

I did a presentation at Optimera STHLM entitled Faster websites with AJAX and REST architecture. The talk are more on an architecture level, rather than about implementation details.

Slides are available as PDF here (this is an english version of what was presented).

The demo I did of the Friendly Iframe ad-loading optimization by Tobias Järlund at Aftonbladet is available at the Aftonbladet dev blog (swedish).

Introduction to Google Maps API

I just did a short talk at the Google Technology User Group meetup in Stockholm this evening about the Google Maps API. The purpose of the talk was to give a quick introduction on how to get started as well as show off some of the features. I wanted to emphasize how easy, using only a few lines of code, it is to leverage power-full features like geocoding, directions and streetview in your own implementation.

Here is the presentation as pdf and the implementation examples I demonstrated.

It was great fun as always, with lots of people (apx 90). Thanks for having me!

Get selected value of radio button using YUI 3

Getting the value of a the currently selected radio button may be done in a couple of ways. This is one approach using YUI 3.

Here is the HTML:

<input type="radio" name="myoptions" value="one"> First
<input type="radio" name="myoptions" value="two"> Second
<input type="radio" name="myoptions" value="three"> Third

Get the currently selected value using only one line of code:

var value = Y.one('[name=myoptions]:checked').get('value');

Unfortunately, this does not work in Internet Explorer, so another (not as tight) approach is:

function getRadioSelectedValue(selector) {
    var tmpValue= false;
    Y.all(selector).each(function(node) {
        if (node.get('checked') tmpValue = node.get('value');
    });
    return tmpValue;
}
var value = getRadioSelectedValue('.myRadioGroupClass'); // this assumes you've set appropriate class to radio elements

Custom Modules in YUI 3

YUI 3 uses modules to group functionality and to only load what is used. This post describes how to create custom modules.

The typical way modules are used is within the use() statement:

YUI().use('node', 'event', function(Y) {
    // your stuff here
});

In the above example the modules node and event are loaded. Let’s see how custom modules may be included in the same way.

To define a new module the add() statement is used (note that it is a class and not instance method of the YUI object):

YUI.add('my_module', function(Y) {
    Y.myFunction = function() {
        var privateFunc = function() {
            // ...
        };

        return {
            publicFunc: function() {
                // ...
            }
        }
    }();
}, '0.0.1', { requires: ['node'] });

A common way to share functionality among different YUI instances is to use the YUI namespace when assigning the function. If you do not recognize the structure of the above function definition you may find out more by reading about the module pattern.

If the file containing the custom module code is loaded, the custom module may be used in any use() statements as normal YUI modules, i.e. use(‘my_module’, …).

To leverage the power of the YUI loader to dynamically load the custom module a configuration object may be created.

YUI({
    modules: {
       'my_module': {
           fullpath: &quot;http://mydomain.com/js/my_module.js&quot;,
           requires: ['node']
       }
    }
}).use('node', 'my_module, function(Y) {
    // access functionality of custom module
    Y.myFunction.publicFunc();
});

One thing to note is that YUI currently only makes one request to fetch dependencies. That is why the module’s requires array must be specified in the configuration object as well, in addition to what is in the last parameter of the add() statement.