Updates from October, 2011 Toggle Comment Threads | Keyboard Shortcuts

  • danielsaidi 9:51 pm on October 5, 2011 Permalink | Reply
    Tags: branch, , github api, , tag   

    Grab the latest version number from a GitHub repository 

    I am currently hosting several repositories at GitHub. For each, I have also created a GitHub gh-pages branch, so that I have a public site for the project (the gh-pages branch), as well as a project site (the main repository page).

    The goal of the public site is to present the repository and make it easy to download the latest release, while the goal of the project web site is to provide people who have already begun using the repository with information, code etc.

    One example where I do this is at the public Cloney web site:

    As you can see, each web site features a Download button. Before tonight, none featured a version number. So, my thought was “how do I grab the latest version number from the GitHub repository”. The answer is really simple – use the GitHub API.

    First – publish new versions as tags

    For the example in this post to work, each version must be pushed as a tag to the GitHub repository. This is really easy to do.

    Let’s say that you have a new version (let’s say..hmmmm….2.1.0.5) of your great project and the master branch has been pushed to your GitHub repo. Now, just type the following (provided that you call the GitHub remote origin):

       git tag 2.1.0.5
       git push origin 2.1.0.5

    This will create a new tag with the version number and push it to the GitHub repository.

    Also worth mentioning is that this method requires that each new tag name have a string value that is greater than one preceding it. If you name one tag “release 0.1.0.0” and another “2.1.5.0”, the first will be returned…and you do not want that, do you?

    Then – use the GitHub API to grab all tags

    The GitHub API is really slick, and let’s you do most anything possible. You can find all the info you need at http://develop.github.com/p/repo.html. However, instead of jQuerying the API directly, I decided to try fitzgen’s JavaScript github-api library.

    To grab all tags for a certain repository, you just have write the following:

       var repo = new gh.repo("danielsaidi", "Facadebook");
       repo.tags(function(result){ alert(JSON.stringify(result)); });

    Wow, that was easy! Now, how do I grab the latest version number from the result?

    Finally – add some candy ontop

    Since I will use this solution for all my GitHub repo web sites, I decided to package my custom script according to the rest of the JavaScript library.

    I therefore created another async method for the gh.repo prototype, as such:

       gh.repo.prototype.getLatestRelease = function(callback) {
          this.tags(function(result) {
             var latest = "";
             for (var prop in result.tags) {
                if (prop > latest) {
                   latest = prop;
                }
             }
             callback(latest);
          });
       }

    On each web site, I have a span with the id “version”.

    At the end of the github.js file, I finally added the following snippet:

       $(document).ready(function() {
          var repo = new gh.repo("danielsaidi", "Facadebook");
          var tags = repo.getLatestRelease(function(result){ $("#version").html(result); });
       });

    That is is! When the page loads, I load all available repository tags, iterate over them and grab the “highest” tag name (version number) available.

    The result is rather nice:

    Version number is now displayed within the download button

    Hope this helps!

     
  • danielsaidi 11:57 pm on December 9, 2010 Permalink | Reply
    Tags: , localstorage   

    HTML5 localstorage 

    I have spend some time experimenting with the new HTML5 localStorage feature. It is a new feature that makes it easy to store data in the web browser, using JavaScript.

    Local storage does NOT replace a real database, since it is unique for the browser and cannot hold that large amounts of data,  but it is a really great tool for many smaller tasks.

    For instance, say that you have an iPhone web application that needs to uniquely identify the mobile device. The device itself does not send any such information (like the MAC address, phone number etc.) so, you’re at a loss…

    …but with localStorage, you can easily create a unique ID (e.g. a GUID) and store it in the local storage. The browser can then use that ID to identify itself to the system.

    For instance, this is all you need to store a small string into the localStorage:

    function hasLocalStorage() {
       return !typeof(localStorage) == "undefined";
    }
    localStorage.setItem("name", "Daniel");
    var name = localStorage.getItem("name");
    localStorage.removeItem("name");

    As you can see, it’s really easy and really powerful.

     
    • Johan 4:04 pm on December 10, 2010 Permalink | Reply

      Isn’t that almost exactly what cookies are? I assume that you can store more in the localStorage than in cookies, but since it still is open to manipulation by the user, may not be there the next time, etc, it still seems to have all the disadvantages of using cookies.

      Do you see any advantages with localStorage compared to storing an identifier in a cookie and the rest server side (except for the coolness of something new)?

      • danielsaidi 11:48 pm on December 10, 2010 Permalink | Reply

        Well, having an ID in cookie and using it to retrieve more data server-side works as well, but for the AJAX-based iPhone web app that I am working on now (for which I know that localStorage will work), the localStorage approach simplifies the data handling a lot.

        Have you had a look at globalStorage and sessionStorage?

  • danielsaidi 11:38 am on October 7, 2010 Permalink | Reply
    Tags: jqgrid, , onselectrow   

    onSelectRow fix for jqGrid 

    I just love the jqGrid jQuery plugin. If you haven’t tried it out yet, perhaps you should?

    Still, if you look up the online demos that describe how to edit a row, you may discover that the onSelectRow method used in the demos is not quite perfect. After editing a row, you must select a new one before you can edit the first one again.

    I replaced the original onSelectRow method…

    onSelectRow: function(id) {
       if (id && id!==lastsel) {
          jQuery('#rowed3').jqGrid('restoreRow',lastsel)
          jQuery('#rowed3').jqGrid('editRow',id,true);
          lastsel=id;
       }
    }

    …with this one…

    onSelectRow: function(id) {
       if (id) {
          if (id !== lastsel) {
             articleGrid.jqGrid('restoreRow', lastsel);
             articleGrid.jqGrid('editRow', id, true);
             lastsel = id;
          } else {
             articleGrid.jqGrid('restoreRow', lastsel);
             lastsel = "";
          }
       }
    }

    …and now, the grid behaves a lot more like I want it to.

     
  • danielsaidi 9:47 pm on September 21, 2010 Permalink | Reply
    Tags: , fonts,   

    fonts.com web fonts 

    The time has finally come to throw Arial and Verdana into the trash bin (Helvetica…you can stay for a while), since Monotype, Linotype and ITC (and others) have teamed up and developed a really cool service – webfonts.fonts.com.

    Web fonts lets you use more than 7,500 fonts on your sites. The result is not an image, but markable, search engine friendly and editable text.

    Just visit webfonts.fonts.com and register as a user. Then, you’ll be able to create projects to which you can add custom fonts. After that, bind the selected fonts to your CSS elements, classes and id:s and paste the generated JavaScript snippet to your site.

    Web fonts is free up to a certain amount of page hits, but the free account will not give you access to all the fonts. Still, 1.500 free fonts is a great thing, so make sure to try it out!

     
  • danielsaidi 12:30 am on August 19, 2010 Permalink | Reply
    Tags: , bundle,   

    Bundle JavaScript and CSS files with full file paths 

    I have been looking at the great PHP CSS/JavaScript bundling approach that is presented at rakaz.nl. The suggested approach is great…and works great, but has a small drawback.

    The downloaded combine.php must be adjusted and all combined files must exist in the same folder.

    Not a big problem, I know, but since I have a structure where css/js files may exist in sub folders, I want to be able to provide the bundle URL with full paths to the files I want to bundle.

    Since the original solution is so slick, this is quite easy to achieve. I will not upload my solution for download, since I want you to grab the original code from rakaz.nl so that it receives the visitors it deserves 🙂

    Well, let’s get started:

    • In your project root, create a folder called bundle (or whatever you want, it is not that important)
    • In the bundle folder, create an .htaccess file and add the following code:
              RewriteEngine On
              RewriteBase /
              RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1
              RewriteRule ^javascript/(.*\.js) /combine.php?type=javascript&files=$1
    • In the bundle folder, create a combine.php file and add this content to it.

    Well, now you’re practically where the original approach tells you to adjust the PHP code a bit. Instead, do this:

    In the combine.php file, replace

              $path = realpath($base . '/' . $element);
    

    with:

              $path = "../" . $element

    The code has to be replaced at two places in the PHP file.

    That’s it!

    The only thing you have to consider now is to use application root relative paths when calling the bundle URL. This will cause your bundle URL to become quiiiite complex, but it works 🙂

    For instance, I have my main JavaScript folder in the application root folder content/js. Let’s say that I have the files a.js and b.js (great naming convention, ey?). The bundle URL would then be:

              bundle/javascript/content/js/a.js,content/js/b.js

    To bundle CSS files, the corresponding code would look like:

              bundle/css/content/css/a.css,content/css/b.css

    Well, you get the point 🙂

    The newly added code will add a ../ to each link before attempting to parse the file, which will work great since the combine.php file is placed one level down from the application root…to which the links have to be relative, remember?

    The great thing now is that I can bundle any JavaScript/CSS files (they still have to be bundled separately) regardless of their physical location (as long as they exist anywhere within the application root folder).

    Another great thing is that the .htaccess file is placed inside the bundle folder, which means that you can just copy the bundle folder if you want to use it in another project.

    Hope this helps!

     
  • danielsaidi 12:29 pm on June 12, 2010 Permalink | Reply
    Tags: equals, , same,   

    Equals vs. same in QUnit 

    When asserting whether or not two associative arrays (or objects) are identical, I first tried to use equals:

       equals({"foo":"bar"}, {"foo":"bar"}, "");

    Turns out, this does not work (see the assertEquals definition). Instead, use same:

       same({"foo":"bar"}, {"foo":"bar"}, "");

    Still, I like the error message you reveice when using equals:

    failed, expected: { “foo”: “bar” } result: { “foo”: “bar” }

     
  • danielsaidi 5:55 pm on June 10, 2010 Permalink | Reply
    Tags: inheritance, , json,   

    jQuery, object inheritance and JSON 

    When developing a hobby project of mine, I previously used both MooTools and jQuery as embedded toolkits. Now, however, I have decided to exclude MooTools and only keep jQuery.

    MooTools have some really nice features, but since i only used its object inheritance and JSON implementation, I decided to exclude it in the upcoming 1.0 release. The less 3rd part components, the better.

    Class inheritance

    When I no longer have the MooTools Object class, I use the jQuery extend function to create inheriting classes, as such:

    function InheritingClass() {
       $.extend(this, new BaseClass("optional parameters"));
    };

    while the MooTools Object class required a syntax like this:

    var InheritingClass = Class({
       Extends: BaseClass,
       initialize: function() { this.parent("optional parameters"); }
    });
    

    The later example requires knowledge about the MooTools object model, while the first only requires that developers know how to use the extend method.

    JSON encoding/decoding

    MooTools features a nice JSON encode/decode implementation, which I will thus not be able to use anymore, so I had to find an alternative.

    jQuery contains (at least) two functions that can be used to handle JSON – parseJSON and serializeArray. However, the later only works with DOM elements, so it is not really what I was after.

    After doing some reading, it seems like the official json.org JSON JavaScript implementation is the best around, while a jQuery plugin that I found had quite an extensive issue list.

    So, although it makes me depend on yet another 3rd part component, I chose this nice little class, which I have used before. MooTools is hereby completely replaced with jQuery (and the small JSON class).

     
  • danielsaidi 6:45 pm on June 3, 2010 Permalink | Reply
    Tags: , , , ,   

    Hide successful QUnit tests 

    I am now rolling with QUnit as TDD framework for my JavaScript development. It’s not as sophisticated as say NUnit for .NET or SimpleTest for PHP, but it’s reaaally easy to get started with.

    However, a strange way of designing the test result presentation is that QUnit lists all tests, not just the ones that fails. With just a few executing tests, the resulting page looks like this:

    QUnit - Full test result presentation

    By default, QUnit lists all executing tests in a test suite

    The test suite above only includes 14 tests – imagine having maybe a hundred or so! In my opinion, this way of presenting the test result hides the essence of testing – to discover tests that fail.

    I understand that one must be able to confirm that all tests are executed, but the number of executed tests are listed in the result footer. So, I would prefer to only list the tests that fail.

    If anyone knows a built-in way of achieving this, please let me know. I chose the following approach (applies to jQuery 1.4.2 – let me know if this is out-of date):

    1. Open the qunit.js file
    2. Find the block that begins with the line:
      var li = document.createElement("li");
    3. Wrap the entire block within:
      if (bad) { ... }

    This will make QUnit only append the list element if the test is “bad”, that is if it failed. The result will look like this:

    After fiddling with the code, QUnit only lists failing tests

    Maybe there is a built-in way of making QUnit behave like this. If you know how, please leave a comment.

     
  • danielsaidi 11:53 am on May 28, 2010 Permalink | Reply
    Tags: , jsunit, , ,   

    JsUnit vs. QUnit 

    I am rewriting an old JavaScript project and will apply TDD principles when developing the new version. When browsing for various JavaScript TDD frameworks, JsUnit and QUnit seem like the two most promising candidates.

    JsUnit uses a syntax that appeals to me, as an NUnit lover. However, since I am also a big fan of jQuery, QUnit could be a better alternative, although the framework seems quite small (yet, ok, equals and same are maybe sufficient?).

    Has anyone any experience of these two frameworks and could recommend either?

     
    • Raj 1:31 am on September 26, 2010 Permalink | Reply

      Hi Daniel
      I had the same question for my self. Which one is better? I haven’t tried JsUnit much but I have used QUnit. It seems to me that QUnit is easy to use than JSUnit. Please see the below post for some info.

      http://blog.goneopen.com/2008/11/jquery-and-testing-jsunit-qunit-jsspec-part-2/

      • danielsaidi 7:40 pm on October 3, 2010 Permalink | Reply

        Well, as I wrote, I think that the JsUnit syntax feels more “for real”, but I decided to go with QUnit and I have only had good experiences with it. I think that the ok key word – ok(shouldBeTrue) and ok(!shouldBeFalse) – is a bit cheesy, but it really does the job with minimum setup. Also, it makes testing async functionality really smooth. However, I decided to tweak QUnit a bit, so that it only displays failing tests…a loooong list with everything that went ok is really not that informative to me 🙂

      • danielsaidi 7:41 pm on October 3, 2010 Permalink | Reply

        By the way, what did you think of JsSpec? Have you had the time to try it out?

c
Compose new post
j
Next post/Next comment
k
Previous post/Previous comment
r
Reply
e
Edit
o
Show/Hide comments
t
Go to top
l
Go to login
h
Show/Hide help
shift + esc
Cancel