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 4:49 pm on August 28, 2011 Permalink | Reply
    Tags: , editorblockfor, editorfor, , html helper, labelfor,   

    EditorBlockFor HTML helper 

    In ASP.NET MVC, Microsoft has done a great job with the various HTML helpers that can be used in a form context, such as LabelFor, EditorFor, ValidationMessageFor etc.

    However, despite these helpers, the HTML markup still tend to become rather tedious and repetitive. For instance, this HTML generates a form that can be used t0 create groups in a web application that I am currently working on:

        @using (Html.BeginForm())
        {
            @Html.ValidationSummary(true)
    
            <div class="editor-label">
                @Html.LabelFor(model => model.Name)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.CollectionName)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.CollectionName)
                @Html.ValidationMessageFor(model => model.CollectionName)
            </div>
    
            <div class="form-buttons">
                <input type="submit" value="@this.GlobalResource(Resources.Language.Create)" />
            </div>
        }
    

    That is quite a lot of code for handling two single properties…and the two editor blocks look rather similar, don’t you think?

    I therefore decided to write a small HTML helper extension method – EditorBlockFor – that can be used to generate an editor block (label, editor and validation message).

    Using this new helper, the resulting form becomes a lot shorter and a lot easier to handle:

        @using (Html.BeginForm())
        {
            @Html.ValidationSummary(true)
            @Html.EditorBlockFor(model => model.Name);
            @Html.EditorBlockFor(model => model.CollectionName);
    
            <div class="form-buttons">
                <input type="submit" value="@this.GlobalResource(Resources.Language.Create)" />
            </div>
        }
    

    As you see, the method is only to be used if you want to follow the conventions that are used for auto-generated ASP.NET MVC form code. But if you do…you can save a lot of keystrokes.

    I am not that familiar with the MvcHtmlString type, which the native methods return, so returning an IHtmlString instead of MvcHtmlString could be a big no no that I do not know about.

    Please let me know if I have ruined the order of the universe.

     
  • danielsaidi 10:19 am on April 5, 2011 Permalink | Reply
    Tags: chrome, , ie, opera, safari,   

    fonts.com web fonts does not work with new Firefox 

    After automatically upgrading to the latest Firefox version, the fonts.com web fonts at my site have stopped working. Quite annoying!

    I guess that you really cannot expect a 3rd party plugin to work 100% with new browser updates. Still, this is not a problem at all in IE, Chrome, Safari, or Opera, where the fonts display as they should.

    Sadly, this issue is yet another annoyance in the downhill tale of Firefox. It’s slower than before, pushing out updates, asking me again again about updating my plugins etc. etc…and now this.

    Chrome has never felt closer to be my default browser.

     
    • Johan Driessen 12:58 pm on April 5, 2011 Permalink | Reply

      On the other hand, “Tabs from Other Computers” is awesome if you use multiple computers, and especially if you use firefox on your mobile phone as well. Oh, right, you’re using iPhone, Steve won’t let you… 🙂

      • danielsaidi 1:36 pm on April 5, 2011 Permalink | Reply

        Aaaaaw…but I want to 😦 No, but seriously…tabs from other computers? Call me a traditionalist, but doesn’t that seems like a weird thing to use tabs for? Why would I?

  • danielsaidi 7:54 pm on April 4, 2011 Permalink | Reply
    Tags: authentication, , facebook api, localhost   

    Running Facebook authentication on localhost 

    It has sure taken its sweet time, but I have finally started working with an ASP.NET MVC3 project that will use the Facebook API to create and login users. It’s really easy, and quite cool, and I curse myself for not having a look at this earlier.

    However, after creating a Facebook app and pasting in the short code snippet that lets you log in with your Facebook account, I noticed that I was not allowed to do so from my localhost:

       API Error Code: 191
       API Error Description: The specified URL is not owned by the application
       Error Message: redirect_uri is not owned by the application.

    Sure, you must enter an app URL when you register your app, but I really expected it to be possible to use the API while developing locally…

    …and it turned out that it is. This is how you do it:

    • Create a web site, if you do not have one already
    • Create the FB app that will be used by the web site
    • Give the FB app an URL that you can manage, e.g. http://myapp.mydomain.com/
    • Make sure that the URL exists – it can be an empty folder, but it must exist and be public
    • If you upload some of the FB code snippets to this URL, they should work.

    To enable the FB features on localhost, you must create a web site with the same binding as the URL above. I have only tried this with IIS 7 / Windows 7 – please let me know if you make it work on Apache, in OS X etc.

    That’s it. Note, however, that some FB features will not work if the live site misses certain pages. For instance, if you use the Like button to like a local page, it will not work if the URL does not exist at the live site.

     
    • kanishka 12:23 pm on April 16, 2011 Permalink | Reply

      thanks for the post.
      i am not able to bind my site on the local host in the way you specified..i am using windows 7..Can you tell what all should be mentioned for the following text boxes:–

      Site name
      Physical Path
      binding : type, ip , port
      Host name

      thanks,
      kanishka

      • danielsaidi 9:50 pm on May 1, 2011 Permalink | Reply

        Hi!

        Just go to the IIS manager, right-click the web site in the tree view and choose “Edit bindings”. There, you just have to set the host name to be the same url as the one that Facebook connect uses. Leave everything else as is, click ok, and you should be good to go…but remember to also add the url to your hosts file.

    • vidjinvideos 10:32 pm on November 27, 2011 Permalink | Reply

      Not working 😦

    • Sachin 11:04 am on July 26, 2013 Permalink | Reply

      thanks a lot.. I was not adding name in host file, finally got the clue from your article and works for me.. thanks a lot again

  • danielsaidi 3:30 pm on December 20, 2010 Permalink | Reply
    Tags: asp.net, combres, , squishIt   

    Get Combres to work with ASP.NET 

    After having some problems with getting SquishIt to work with JavaScript closures, we decided to give Combres a try. However, while SquishIt works right out of the box, Combres needs to be configured a bit. This page describes how.

    In short, you need to:

    • Create a custom Combres configuration file
    • Add the following to web.config:
      • A Combres configSection tag
      • A Combres section tag (which you point to the Combres config file)
      • Two httpModule tags
    • Add RouteTable.Routes.AddCombresRoute(“Combres Route”); to the Global.asax Application_Start method
    • Add <%= WebExtensions.CombresLink(“…”) %>wherever you want to add JS or CSS tags.

    With SquishIt, you only need to add a bundle tag to your page, which is way easier. Still, Combres is said to perform better compression…and handles JavaScript closures without any problems.

    With Combres up and running, I noticed that it does not work with IIS7 / Integrated pipeline mode. If you run into this problem, remove all mumbo jumbo content in within the Combres section tag, so that it looks like this:

    <section name=”combres” type=”Combres.ConfigSectionSetting” />

    Then, instead of:

    <httpModules>
            <add name="ScriptModule" type="System.Web.Handlers.ScriptModule,
    	System.Web.Extensions, Version=3.5.0.0, Culture=neutral,
    	PublicKeyToken=31BF3856AD364E35"/>
            <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule,
    	System.Web.Routing, Version=3.5.0.0, Culture=neutral,
    	PublicKeyToken=31BF3856AD364E35"/>
    </httpModules>

    You also need to add the modules to the system.webServer/modules tag, since that is the one used by IIS7  (keep the ones above as well, though):

    <modules>
            <add name="ScriptModule" type="System.Web.Handlers.ScriptModule,
    	System.Web.Extensions, Version=3.5.0.0, Culture=neutral,
    	PublicKeyToken=31BF3856AD364E35"/>
            <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule,
    	System.Web.Routing, Version=3.5.0.0, Culture=neutral,
    	PublicKeyToken=31BF3856AD364E35"/>
    </modules>

    If you follow these steps, Combres should work.

     
    • John 10:42 am on January 2, 2012 Permalink | Reply

      Thats great information, Thanks !

    • John 10:44 am on January 2, 2012 Permalink | Reply

      Application is working perfect on Local Development Server but after publish it’s not working if running on IIS 7 Pipeline Mode. Tested your suggestion and it’s worked, thanks.

    • Arun 7:28 am on March 24, 2013 Permalink | Reply

      I have worked in global.asax file and using Combres.The method RouteTable.Routes.AddCombresRoute() is not find.

      • danielsaidi 9:55 am on March 24, 2013 Permalink | Reply

        This is a rather old blog post, and Combres has probably changed a great deal since then. Do you mean that this solution is no longer applicable?

  • 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 10:16 pm on September 22, 2010 Permalink | Reply
    Tags: , internet explorer, ,   

    IE bug fixed for web fonts 

    Yesterday, I uploaded a demo page where I tried out the awesome fonts.com Web Fonts service…

    …however, Internet Explorer did not really like the page. Turns out

    <button onclick="$('.comic').animate({fontSize: '3em', });">Text can be resized!</button>

    was too much for Internet Explorer to handle. It should be:

    <button onclick="$('.comic').animate({fontSize: '3em' });">Text can be resized!</button>

    I rest my case. The bug is fixed. Thanks for not handling any exceptions, IE!

     
  • 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 10:52 am on August 6, 2010 Permalink | Reply
    Tags: , div, float   

    The CSS fix of the day 

    Today, my dear collegue Johan Driessen showed me a nice CSS fix.

    The fix solves the problem that div elements with nested, floating divs will not resize according to the size of its nested elements, as such:

    Default div behavior

    Default div behavior: The div does not adjust its size according to nested, floating elements.

    Well, thanks to Johan  – although he stresses the fact that he found it on the web and did not write it himself – I have now a nice little CSS class that takes care of this:

       .fc:after{content:".";clear:both;display:block;visibility:hidden;height:0;}
       * html .fc{height:1px;}

    Just add this class to the div element that contains floating elements, and the result (sorry for the poooor graphics), will be as such:

    CSS fix result

    CSS fix: The div adjusts its size according to nested, floating elements.

    Hope this helps. If so, thank Johan.

     
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