Updates from January, 2011 Toggle Comment Threads | Keyboard Shortcuts

  • danielsaidi 3:53 pm on January 27, 2011 Permalink | Reply
    Tags: filter, , , , httpmodule   

    Automatically convert HTML5 to HTML4 

    I just love HTML5 and how easy things will become once it breaks through. However, until so is the case, the HTML code we write must be supported by older browsers as well.

    Still, we want to write HTML5 code…not old one. So, how to solve this little nugget of dilemma?

    Well, to make it possible to write HTML5 and still support older browsers, I and a collegue have created a class that automatically converts HTML5 elements to div and span elements when the response is sent to the client. For instance, <nav>…</nav> is translated to

    for IE8, while Chrome and Firefox will receive the original HTML5 code.

    The basic implementation

    First of all, HTML support is determined by one class, which implements a small interface. If the browser is considered to not support HTML5, the HTML5 code is converted to HTML4 with another small class, which implements an even smaller interface.

    Note: when we developed this, we tested it in an MVC application. However, it seems like there are some problems in web forms applications, where the output gets rendered multiple times. I will look into this and update the filter.

    This interface/implementation pattern is, if you are used to working with it, great if you use IoC/DI and later on feels that these quick implementations are insufficient. For instance, maybe you want to use a complete list of non-HTML5 browsers (we only consider IE8 and below not to have HTML5 support) and also do not want the class name to be applied to the end tag (which our class will add).

    If you feel like improving these classes, feel free to provide us with any updated, improved versions 🙂

    The ugly test hack

    When we finally went out to try the classes in action, we applied them in the Render event of a web form master page.

    It worked like a charm. When browsing the site with Firefox, Chrome etc. we received the HTML5 code…

    Firefox HTML code

    When viewing the site in Firefox, we get the original HTML5 code.

    …but in IE8, we were served the converted HTML4 code.

    IE HTML code

    When viewing the site in IE8, we get the converted HTML4 code.

    Well, isn’t this marvelous?

    But…wait a minute…applying it in the Render event of the master page? That feels…well, really, really bad.

    Yes, you are absolutely right. As I wrote, we were just trying it out. Relax…then read on for information about how to do it right 🙂

    The pretty final solution

    I guess that we can all agree that we want to make this conversion independent of our code. The solution above (applying it in the Render event), for instance, only works for Web Forms-based solutions. What if we want to automatically convert HTML5 to HTML 4 in an ASP.NET MVC-based web site?

    We need to find a better way of triggering the HTML5 conversion. So, how to do it “right”?

    We decided to create an HttpModule that applies a HTML5 conversion filter to the outgoing response. This will automatically handle all outgoing responses, provided that the module is registered in web.config.

    To enable the module, it depends which IIS setup you are using:

    • If you are using IIS 7.0 running in Integrated mode, add the following to the web.config system.webServer modules section:
             <add name="NExtra.Web.HttpModules.Html5ElementConvertHttpModule"
                  type="NExtra.Web.HttpModules.Html5ElementConvertHttpModule, NExtra, Version=, Culture=neutral" />
    • If you are using IIS 6.0 or IIS 7.0 running in Classic mode (including the development server), add the following to the web.config system.web httpModules section instead:
             <add name="NExtra.Web.HttpModules.Html5ElementConvertHttpModule"
                  type="NExtra.Web.HttpModules.Html5ElementConvertHttpModule, NExtra, Version=, Culture=neutral" />

    That should be all you need to do to enable the automatic HTML5 to HTML4 conversion.

    • Matthew Blackmon 5:20 pm on May 30, 2011 Permalink | Reply

      If I have an apache based server, how would I enable this module?

      • danielsaidi 9:42 pm on July 2, 2011 Permalink | Reply

        I’m not sure…I have never tried running .NET with Apache. Did you manage to solve it?

    • Katie 12:35 pm on July 1, 2011 Permalink | Reply

      Hi. I just got a temate off template monster and it was html5 and got my developer to spend ages doing it, not knowing it would not work on older browsers. I need help desperately as I néed to launch Wednesday and it’s a commercial site that needs to work on all browsers. How quick/ easy is it to fix? What do I tell my .net developers???

      • danielsaidi 9:46 pm on July 2, 2011 Permalink | Reply

        The module should work more or less by just registering it in web.config, but it may behave unsatisfactory with web forms, like when I tried using it together with EPiServer. In MVC, however, it should work right away.

    • venu 2:15 pm on September 13, 2011 Permalink | Reply

      Hi saidi,

      How to convert HTML4 to HTMl5

      • danielsaidi 8:55 pm on September 15, 2011 Permalink | Reply

        Well, it would be possible to create an inverted variant of this implementation. Just convert all tags with the class “nav” to a nav element and so on. Good idea – I will build one! 🙂

    • Sharon O'sullivan 11:18 pm on November 15, 2011 Permalink | Reply

      Hello Daniel

      I am considering buying an LG 3D TV for my family this Christmas (model LG47LW5700). But this tv model does not currently support HTML5, and a tech rep at LG said it was “not possible” to upgrade the firmware (perhaps he was misinformed)?. But now I hear LG and Google TV are thinking of collaborating for 2012 tv’s. I bet those 2012 tv’s will be a lot more expensive than the one I can buy now. So I’m wondering: If I bought this 2011 model, will you or anyone else create an LG “app” that would allow people like me to view HTML5 web sites by downconverting to HTML4 as you described above? (Please note, I’m not a techie! I was once, but that’s not my area anymore 🙂

      • danielsaidi 11:35 pm on November 15, 2011 Permalink | Reply

        Hi Sharon,

        Thank you for your comment, and thank you for telling me about this. I am also looking at buying a new TV, and I have not even considered this fact. HTML5 support (together with support for keyboard and mouse) would be a blast, so I will consider it when comparing prices and models from now on.

        However, the stuff I describe in this blog post are just meant to help developers adjust their web sites so that visitors with older browsers can design their web sites in HTML5, with automatic fallback to HTML4 if the browser does not support HTML5. The approach can be ported to any language, although it would have to be adjusted to fit the technology of choice.

        With that said – if you browse a HTML5 web site that uses this technique in your LG TV, the HTML5 code would automatically be converted to HTML4…but I really doubt that even 0.01% of the web sites in the world will…at least not my approach 😉 And, even if the HTML would be converted, you would still miss out on several HTML5 features, since the HTML5 standard is still a work in progress.

        So, I guess that the question we have to ask ourselves is whether or not the TV should be the device used to surf the web. Maybe a better approach is to stream the image/sound from your computer to the TV?

        • Sharon O'sullivan 1:06 am on November 16, 2011 Permalink

          Thanks for your reply, Daniel. That’s very, very helpful to hear that the HTML5 standard is still just a work in progress….Your reply made me re-assess the basics that I would really need from our tv.

          Really, I wanted to get a ‘smart tv’ not so much for general surfing of the web (because you’re right we have computers at home that can do google searches for us for that purpose), but mainly so that our tv would enable us to both:

          (a) view films from sites such as Netflix, YouTube (and other emerging web film channels like Cinema now), which the smart tv’s can do, so that we don’t have to head out on cold winter evenings to rent a dvd, and

          (b) access videos from news websites (eg BBC or CTV etc)

          The thing is, for some of these film services, you’d need an “app” to view their videos on the tv. And I was just concerned that if their videos are on their website courtesy of html5 (or if they upgrade their websites to html5 in the future), then I would no longer have access to their apps via our tv (and only newer html-5 compatible tv’s would). But perhaps, given the current state of development of html5, that problem would be a couple of years away still.

          Regarding your suggestion of streaming from the computer to the tv, that would work if my laptop was compatible with an HDMI cable, but it’s not (my laptop is about 2 yrs old). And although it would be nice to stream it to the tv wirelessly via our home router, I’m told that you can’t stream wirelessly from your computer desktop to your tv. The only way to stream wirelessly from your computer to your tv is via the DLNA (digital network living alliance) convention is by storing your digital films on the “shared documents” part of your computer, and then having your tv recognize it from their using the tv’s “media sharing” app feature. And, by definition, streaming (as I understand it) involves only downloading bits of the file at a time, it’s not the same as downloading the entire digital film to a shared documents folder, which is why it won’t work to wirelessly stream from your computer screen to your tv screen unless the whole digital file is there.

          But now that I think of it, another possibility would be to get a $45 cable from Apple to adapt our ipad to the HDMI plug on our tv, and the ipad supports html5 if I’m not mistaken.

          Bottom line is I really would like to get this LG tv because it’s got the passive 3D (much more sensible for kids than the $$$ active glasses), and a really neat motion-sensitive tv remote (like the nintendo wii). For your own shopping info, I think Sony supports Google tv (and html), but they use the active 3d glasses (not practical in my household), as does Samsung. I also want to have the skype video feature, which Samsung and LG 3d tv’s offer, but I don’t think Sony does (you might want to double check that).

          Anyway, hope all this info made some sense…I typed it quickly because I have to run. But thanks for sharing your thoughts on this.

        • danielsaidi 7:55 pm on November 17, 2011 Permalink

          Thank you for all the great advice! You have considered a lot of things that I have not. This will be very helpful for me when we get around to purchasing a new TV. 🙂 There are a lot(!) of options, and I am sure that you will select the option that suits you best, considering all the information you have provided me with.

          Regarding HTML5 support…as long as you find a TV that supports HTML5 (even if the firmware will not be upgradable), the audio and video specs of HTML5 are rather well-defined now, so I doubt that we will se any major changes in the final specs. So, if you find a TV that supports today’s HTML5 video/audio format, chances are probably big that they will continue to support the final format as well.

        • Sharon O'Sullivan 11:33 pm on November 17, 2011 Permalink

          Agreed! Which is why I did a turnaround on the LG and switched to the Samsung Smarthub. Cheers, and best of luck with your own tv purchase.

        • Sharon O'sullivan 1:20 am on November 16, 2011 Permalink

    • Pranav 9:50 am on May 24, 2013 Permalink | Reply

      I have made a browser in java but it does not support html5. How do I make it support html5

  • danielsaidi 6:28 pm on January 21, 2011 Permalink | Reply
    Tags: , multitasking, spotify   

    Spotify background playback problem on iOS 

    This is not a development issue, but well worth mentioning to all of you who have problem playing audio when the Spotify app for iOS enters the background.

    It turns out that (for me) this happens when there are to many (many!) active programs. If so, Spotify is not added to the background process an can thus not continue to play.

    Solve this by killing a few apps, then restart Spotify. Background playback should now work again.

    • Tero 6:25 pm on May 24, 2011 Permalink | Reply

      Thanks. Got an iPhone a month ago and I didn’t even know that you can kill apps from running in the background. I had a few dozen of them open ie. all the apps I have ever used and this was the first time I encountered any problems. Excellent phone!

    • Anonymous 1:35 am on June 8, 2011 Permalink | Reply

      That’s great!
      Thank you, I didn’t realise that was the problem. I thought that there was something wrong with the app or I had don something wrong. Glad it was such a simple fix 🙂

      • danielsaidi 11:11 pm on June 9, 2011 Permalink | Reply

        Ah, glad to help! 🙂 I was so frustrated before I found out what was causing it.

    • Shaz 10:03 am on June 14, 2011 Permalink | Reply

      Thanks ever so much!!!

    • Maryann 5:50 pm on August 11, 2011 Permalink | Reply

      Hi there,

      I’m having a different Spotify-iPhone problem. Seems to be a common one but still hoping for advice…

      Spotify works great on my Mac laptop. But it refuses to synch to iPhone. I’ve tried everything I’ve read – reinstalling app & application, triple checking wi-fi connections, crazy pushing of buttons…

      Am I just doomed? Is there no hope? I was really hoping to use Spotify on iphone. Any thoughts, links, etc are very appreciated. Big thanks.

    • Jay 6:33 am on March 17, 2012 Permalink | Reply

      Thank you sooo much for this write up! I’m rather embarrassed to admit how many apps were running and it didn’t dawn on me.

    • Joachim Bengtsson 2:32 pm on November 5, 2013 Permalink | Reply

      The problem was actually me not understanding the problem. I talk about the technical solution to the problem here: http://overooped.com/post/46426447128/continuously-playing-music-in-the-background-on-ios

      As a user, you cannot determine if an app is actually running in the background, neither should you have to care. If a problem in an app is fixed by killing background apps, that is a fault in the original app, not something the background apps nor the user has done wrong.

      • danielsaidi 2:43 pm on November 5, 2013 Permalink | Reply

        Good stuff! Is this still a problem? I have not experienced it for a long time, but then again I kill background apps every now and then, since they actually do affect appearance.

        I have noticed that many apps behave strange when I on purpose open up a large amount of memory hungry apps. Infinity Blade II, for instance, creeps to a crawl, displays the menu for a looong time, then eventually shuts down. My own app, that I am currently developing, seems to drop the main storyboard, which makes no segues work.

        I totally agree that the app should handle these kinds of situations, perhaps by notifying the user that memory is low. Then again, when memory and available storage (my iPad 1 got a lot faster after I removed some large apps to free storage) runs low, is there anything the app can do, or does the user have to kill background apps to free memory?

        Are there some good examples around of apps that handle this in a nice way? I will read your blog post after work. Thanks a bunch for posting your comment.

    • will 4:24 pm on May 27, 2015 Permalink | Reply

      This isn’t the problem, at least not for me.

  • danielsaidi 10:56 am on January 14, 2011 Permalink | Reply
    Tags: , project template,   

    Flush the Visual Studio Template Cache 

    After my last blog post about adding Spark to an ASP.NET MVC 2 project, I decided to create a project template that uses Spark instead of the default Web Forms view engine.

    However, even though I added my new template to the Visual Studio project template folder, it still did not turn up in the project list when I wanted to create a new project.

    What you have to do is to flush the Visual Studio Template Cache, which will make Visual Studio update the list of project templates that are available. It is really easy to do.

    In the command prompt, just execute the following:

       devenv /installvstemplates

    If your command prompt does not find devenv, just navigate to the .exe file, for instance:

       C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE>

    After doing so, just choose to create a new project in Visual Studio and the template should appear in the list.

  • danielsaidi 12:58 pm on January 13, 2011 Permalink | Reply
    Tags: , , razor, , , validationsummary   

    Adding Spark to ASP.NET MVC 2.0 

    After almost a year’s curiosity, with other stuff stealing my time, I have finally some time to have a look at the Spark View Engine. Since the Razor View Engine will be shipped together with ASP.NET MVC 3.0, I decided to give Spark a shot before Razor.

    I will not go into detail about what Spark is, what it does etc. etc. The official web site has some good info and this blog helped me get started. I will just describe how to get Spark up and running and get it to play alongside a default ASP.NET MVC application.

    Get Spark up and running

    The first thing we have to do is to add Spark to our application. Visit the Spark web site, download and unzip the latest release, add it to your solution and add references to Spark.dll and Spark.Web.Mvc.dll.

    Of course, if you use NuGet, just right-click the references folder and choose Add package reference…

    …then search for spark and install sparkmvc.

    This will automatically add most of what you need. Really convenient!

    However, for Spark to work, we need to register it when the application starts. Do this by adding the following to Application_Start in global.asax.cs:

       ViewEngines.Engines.Add(new SparkViewFactory());

    Finally, I recommend adding the following to web.config, although it is optional:

          <section name="spark" type="Spark.Configuration.SparkSectionHandler, Spark"/>
          <compilation debug="true" />
          <pages automaticEncoding="true" />

    That’s it – Spark is now added to your app and runs alongside the default Web Forms view engine. Any views not using Spark will still work.

    Converting views to Spark

    In short, all you have to do to convert your views (master pages, user controls and pages) to spark is to:

    • Rename Site.master to Application.spark
    • Rename all user controls to _NAME.spark (the underline makes it possible to add user controls as HTML elements)
    • Rename all pages to NAME.spark
    • In all master page, user control and page files, remove the topmost tag
    • In Application.spark, replace all ContentPlaceHolders tags with use spark tags
    • In all pages, replace all Content tags with contentspark tags

    You also have to replace:

       <%   =>   ${

    For strongly types views,you can type ViewData and the Model like this:

       <viewdata Message="string" model="SparkTemplate.Models.LogOnModel" />

    Note that the name of the ViewData key is defined as is while the model tag is defined in lower-case. You can then access the model like this:


    Other than that, everything just seem to work.

    Worth noticing is that you should use ! instead of $ for ValidationSummary and ValidationMessageFor – otherwise, empty strings will render the full Spark expression.

Compose new post
Next post/Next comment
Previous post/Previous comment
Show/Hide comments
Go to top
Go to login
Show/Hide help
shift + esc