Category Archives: web

Command-line base64 encoding of file into clipboard

Often I find myself in the need to base64 encode a file. Typically an image to inline in a CSS file. I added the following to my ~/.bash_profile (OSX) for convenience:

function base64() {
openssl base64 < $1 | tr -d '\n' | pbcopy
}

Now I simply run base64 <filename> from the terminal to get the base64 encoded file in the clipboard for easy pasting into wherever I want to.

Simple Mantis JSON API

Mantis has a SOAP API, but I wanted JSON to display the most recent tickets on a web page using JavaScript. Hence I wrote a simple wrapper in PHP that does a SOAP call and returns the result as JSON to be conveniently digested by JavaScript.

Put the mantisconnect_json.php file wherever you want, it doesn’t need to be on the same server or have the same domain as the Mantis installation. Edit the MANTISCONNECT_URL and your Mantis username and password.

The query string parameter name defines what SOAP action to call, the rest of the query string parameters are passed as arguments in the SOAP call. Note that the Mantis username/password is inserted automatically as arguments by the PHP code to avoid having you expose it publicly in JavaScript (but they may be overridden if desired).

Please note that this is a very simple wrapper for read-only purpose (e.g. it will not work to create new issues).

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.