Bookmarklet compiler

I think I should bookmark this one.

It's a very useful compiler for creating bookmarklets.

I could roll my own, but it's good that there is one already available.

Here is the link. It has source on github.

Unfortunately, it has some problems. It does little or nothing to reduce your script in size, which is a major issue in IE browsers. It apparently should remove comments, but that does not seem to work.

I think I will check out its license, and fork it. I have created good comment-matching regexes for my interesting-c project.

Add christmas to any page

I have devised a simple manner to get christmas on any page! Isn't jQuery animation awesome?

You can look at it here: http://jsfiddle.net/fabiosantoscode/Jw7Hs/

Getting your own (IP) address and port in a javascript web app

While hacking something up using socket.io I needed to know the IP of the server, so I could connect a socket back to it. localhost was the solution at first, but I wanted to access it from other machines in my network.

I didn't want to get the local IP using node. I might want to serve the application from a server with more than one network card. I needed to have the IP fixed.

But I often develop the app while commuting, on my EEEPC. When I get home, I sync my code as I turn on my desktop computer to proceed work.

So I found myself needing to have a fixed IP over two different machines: my desktop PC, and my EEEPC. A fixed IP was clearly not an option.

I had the idea of using window.location. I used window.location.hostname to get the IP address or domain name of any server I was connected to. It was such a simple solution I was very positively surprised.

All uses of window.location:

example url: http://192.168.1.7:8080/chat?nickname=F%C3%A1bio#fragment

• hash (#fragment)
• host (192.168.1.7:8080)
• hostname (192.168.1.7)
• href (http://192.168.1.7:8080/chat?nickname=F%C3%A1bio#fragment)
• pathname (/chat)
• protocol (http:)
• search (?nickname=F%C3%A1bio)

Valilang

I have started a new project. Its name is valilang.

Create validation rules in a single format, meant to be used in both client and server sides.

Although I have given up my first plan of making valilang a minimal imperative programming language, the name still has the suffix "lang". I have opted to base the language syntax upon JSON, so it will be easier to learn and use.

The format is very easy to write. There are :

• fields, which correspond to form fields, and
• rules, which are (mostly premade) short functions taking a value argument and doing an assertion upon that value.

A valilang file will have an object with these keys:

• fields, a list of fields.
• fieldValidation, an object mapping field names to a list of rules applied sequentially to these fields.

Here is an example valilang file, for a form with a single field:

    {
        "fields": ["name"],
        "fieldValidation": {
            "name": [
                "required",
                "min-10",
                "max-50"
            ]
        }
    }

In the above object, we can see we have a single field name which has the following rules:

• It's a required field
• It takes at least ten characters (min-10)
• and at most 50 characters (max-50).

These rules (which are actually functions) are executed sequentially, until any function returns null, in which case the validation fails.

Notice how arguments are handled. They are extracted from after the dash in each of the rule strings, provided these strings have a dash.

On the client side, you just have to include a valilang file and valilang.js.

    <script type="text/x-valilang">
        {
            "fields": ["name"],
            "fieldValidation": {
                "name": [
                    "required",
                    "min-10",
                    "max-50"
                ]
            }
        }
    </script>
    <script type="text/javascript" src="valilang.js"></script>

On the server side, you will load the valilang library for your framework or language, and ask it to validate your fields.

Of course this is all when both the client side and the server side are implemented. Remote loading of scripts is not yet supported. The server side hasn't been prepared for any language except for javascript (by requireing valilang.js in node and using its API), and there are too few validators (validation functions). Also unit testing is not done for the client or the server.

However, valilang.js is definitely compact, under 5 kb minified, and it is in a nearly usable state. Care to try it out and maybe contribute to its development? Report bugs and fork the github repository.

Timetable selection snippet.

I have put together a simple timetable snippet for helping keep track of time, or to do time allocation of some resource.

Check it out on jsfiddle:

This is a jQuery plugin. It works by converting a table with checkboxes inside each td into a time planner. It does this by moving the checkboxes away from their td containers into a div inserted below the table.

Here is that DIV's HTML. As you can see it has all the checkboxes from every cell.

    <div style="display: none;" class="timeplanner-checkbox-dump">
        <input type="checkbox" checked="checked" name="0-0">
        <input type="checkbox" name="1-0">
        <input type="checkbox" name="2-0">
        <input type="checkbox" che...

Then it routes the events of each td into its containee checkbox. This is done by using an annonymous function for each td. In a jQuery.each loop I declare var checkbox_here, (so it is different for every closure) and then just do $(checkbox_here)-click() in the click event handler for the td.

jQuery.showWhen

I've created a small jQuery plugin to allow for more responsive forms. Sometimes you only want to show parts of a form when other parts are complete. This helps you simplify forms and only go into detail when the user has already filled in some field. Here is an example, and an example with a checkbox instead
Think about a survey:

1. Do you smoke?
   1. Yes
   2. No (skip to 4.)
2. How often do you smoke?
   1. Every hour
   2. Every two hours
3. Do you realize ...
   1. Not really
4. Is question four a question?
   1. Yes
   2. No

In this survey, we could have tried to follow the standard of interactive and intuitive forms to hide questions number 3. and 4.
This could be done in a non-obstrusive way: If the "(skip to 4.)" text was inside its own span with its own CSS class, it would be trivial to add data-skip-questions to that span, and have jQuery look for span[data-skip-questions], and use String.split with jQuery.add to register with this plugin.
html code:

<ol class="questions">
    <li>Do you smoke?
        <ol>
            <li><input type="radio" name="q1" value="y" />Yes</li>
            <li><input type="radio" name="q1" value="n" />No <span data-skip-questions="2 3">(skip to 4.)</span></li>
        </ol>
    </li>
    <li>How often do you smoke?
        <ol>
            <li><input type="radio" name="q2" value="1" /> Every hour</li>
            <li><input type="radio" name="q2" value="2" /> Every two hours</li>
        </ol>
    </li>
    <li>Do you realize ...
        <ol>
            <li><input type="radio" name="q3" value="n" /> Not really...</li>
        </ol>
    </li>
    <li>Is question four a question?
        <ol>
            <li><input type="radio" name="q4" value="y" /> Yes</li>
            <li><input type="radio" name="q4" value="n" /> No</li>
        </ol>
    </li>
</ol>

javascript code:

$('span[data-skip-questions]').each(function() {
    var questionsToSkip = $(this).data('skip-questions').split(' '),
        q = $(null),
        watchedInput = $(this).parents('li:first').find('input[type="radio"]');

    $.each(questionsToSkip, function(i, val) {
        q = q.add($('ol.questions > li')
              .eq(val - 1));
    });

    $(q).hide().showWhen(watchedInput, true);

})
// Hide the span, since the user doesn't have to skip the questions snymore.
.hide();

Here's a fiddle for the survey example.

Edit:
The plugin is now on github. It was released under the WTFPL. Feel free to fork and use!