• Automatic WebAPI property casing serialization

    Automatic WebAPI property casing serialization

    If you work a lot with WebAPI’s and JavaScript and would like to follow the convention of lowerCamelCasing your JSON and UpperCamelCasing your .net model properties, you can do that by using Newtonsoft.Json CamelCasePropertyNamesContractResolver. This works for both directions “WebAPI -> client” and “client -> WebAPI” so that’s cool as well. You should simply set this up in your Global.asax and you’re good to go.

    Well that was an easy one. It was also my chance to try out the Gist GitHub ShortCode plugin. I think it works great, and it’s easier to use. I like it! And if you’re using WP, you should try it as well. Hopefully if won’t take me too long to migrate everything from the Code Colorer plugin that I’ve been using so far. :)

  • Dynamically resolving function shared arguments in JavaScript

    Dynamically resolving function shared arguments in JavaScript

    Sometimes we have functions which expect the same arguments as other functions, all fine there. Sometimes these arguments are obtained/resolved asynchronously. If there are a lot of these functions that share the same resource, we can come up with lot of unnecessary boilerplate.

    Imagine having a function like resolveMetaData() which asynchronously obtains fresh data every time it’s called (to keep the code at a very simple level, for the purpose of this post I’ll be using setTimeout() instead of something a bit more complex like an AJAX call):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function resolveMetaData(callback) {
        // for the purpose of the demo we'll simply mock the metaData object    
        var metaData = { message: "Meta message", start: new Date() };

        // async business logic example
        setTimeout(function () {
            metaData.end = new Date();
            // after metaData is ready, resolve callback
            callback(metaData);
        }, 1000);
    }

    And two functions that require a new instance of metaData upon their execution:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function fnOne(data, metaData) {
        console.log(data);
        console.log(metaData);
    }

    function fnTwo(id, data, metaData) {
        console.log(id);
        console.log(data);
        console.log(metaData);
    }

    The simplest way to provide the latest metaData to these functions would be to use callbacks like this:

    1
    2
    3
    4
    5
    6
    7
    resolveMetaData(function(metaData) {
        fnOne("fnOne", metaData);
    });

    resolveMetaData(function(metaData) {
        fnOne(1, "fnTwo", metaData);
    });

    If you had to write a lot of functions similar to fnOne() and fnTwo() (ie. 10 or more) and all of them required the latest metaData, you would most probably be tempted to somehow reduce the code and get rid of the callback boilerplate. The first two ideas that came to my mind on how to resolve this were function overloads and/or having a base function that would handle metaData resolving. Since JS doesn’t really support overloading (in the same way as say C# does), having a base function to handle metaData resolving seems like a safe bet. The only question is – how do we call a function in JS with the parameters we got and resolve the shared parameters asynchronously?

    Fortunately Function.prototype.apply() comes to the rescue! It allows us to call a function with arguments as an array which is quite handy. Since functions in JS are objects, we can now create a base function which accepts the function object of the function we wish to call, and the args we have at that point. It then resolves metaData, appends it to the arguments array and calls the passed function with these arguments. This is how the base function would look like:

    1
    2
    3
    4
    5
    6
    function fnBase(fn, args) {
        resolveMetaData(function (metaData) {
            args.push(metaData);
            fn.apply(this, args);
        });
    }

    And this is the how we can now call fnOne() and fnTwo() through the fnBase():

    1
    2
    fnBase(fnOne, ["fnOne"]);
    fnBase(fnTwo, [1, "fnTwo"]);

    It would be possible to place metaData as a first argument in fnOne() and fnTwo() signatures but that would require additional args position handling in fnBase() so it is probably best to put metaData as the last argument.

    That’s it, hope it helps. Enjoy! :)

  • autokana – jQuery plugin

    autokana – jQuery plugin

    Autokana is a jQuery plugin that automatically converts latin (roumaji) to kana (hiragana / katakana) using the auto-correct principle (keep in mind that it’s not suitable for converting copy/pasted but only typed-in text). You can check out how it works at autokana example page.

    You can also download the plugin (including a simple usage example) from github and use it for free.

    To use it, you will have to add the following somewhere at the beginning of your body tag:

    1
    2
    3
    4
    5
    6
    7
    <script type="text/javascript">
       // bind events when document is ready
       $(document).ready(function() {
          // attach auto-kana plugin with default options
          $("#kana_text_box").autokana();
       });
    </script>

    After that add the input box itself wherever you need it (make sure to use the same ID in the above part and in the input field itself):

    1
    2
    3
    4
    5
    6
    7
    <input id="kana_text_box" type="text" />
    <script type="text/javascript">
       // this part will clear and set focus on the input field on refresh
       // feel free to remove that part if you don't need it
       document.getElementById("kana_text_box").value="";
       document.getElementById("kana_text_box").focus();
    </script>

    If you have any suggestions or bug reports, feel free to leave a comment.

  • Mapping Japanese kana characters (hiragana/katakana) for use in programming

    Mapping Japanese kana characters (hiragana/katakana) for use in programming

    When I started working on Zanzou, I had to find a way to somehow map the whole kana so I could later use it in my webapp. I simply used 2D array to accomplish this. It’s no nuclear science but to save you the trouble of copying and pasting all the symbols into a single file yourself (I think it actually took me around an hour to do it :D), here is my kana.js file (note that if if you open the file itself in the browser, it will most probably display some strange characters instead of proper UTF-8 encoded kana symbols but when you open the file in your text editor, it should be usable and displayed just fine).

    I divided it into 4 major groups (arrays): monographs, digraphs, monographs with diacritics and digraphs with diacritics. Each array element (representing sound) consists of 3 subelements (roumaji record, and hiragana and katakana symbols).

    With some minor modifications, this could easily be used in any other programming language. Just make sure if you edit the file to save it in UTF-8.

    Hope it helps, がんばって!

  • 残像 – Zanzou

    残像 – Zanzou

    Zanzou is alive. =)

    Zanzou an e-learning tool I made as my computer science master’s degree thesis project at the Faculty of electrical engineering, Osijek, Croatia. Its goal is to help people memorize kana using flashcards. Based on unsuccessful answering, Zanzou will repeat certain symbols more frequently and (depending on the chosen difficulty level) it will group and present some of the similar symbols together to make it harder to “guess the answer”. Global user success statistics are also available.

    Features

    • memorize hiragana and katakana using flashcards
    • three difficulty levels
    • three types of exercises
      • kana to roumaji
      • roumaji to kana
      • voice to kana
    • customize your kana practice set
    • flashcard frequency based on correct answers
    • free

    Thanks to

    For any feedback or bug reports, feel free to contact me through email or just drop a comment bellow. =)

  • cmik.fm

    cmik.fm

    Some time ago I noticed I often fall into the habit of repeating a single song over and over – until I can’t listen to it any more that is. I have also often been wondering how much more or less do I do it compared to my friends. Curious enough to want to find out, having a few years old last.fm account, and (so it happens) being on a side-quest for finding myself a small web project to work on in my free time and learn something new, I started working on cmik.fm. Finally it’s done, I learned quite a lot in the process and it was quite a joyful experience coding it.

    So, if you ever wanted to know this useless piece of information about your life (like I did :D), you could give cmik.fm a try. If you like it, perhaps show it to your friends who use last.fm.

    Special thanks to:

    Feel free to leave a comment with your feedback, any suggestions you might have, a bug you noticed or whatever! =)

    Read more:
    cmik.fm at build.last.fm + source at github

Back to top