This is an archived copy of all my blog posts which is irregularly updated. For my latest blog posts see the Mbed Developer Blog.
  • OAuth provider in .NET

    Om maar eens met een auto-analogie te komen: wanneer je (iets te onbetrouwbare) neefje iets uit de kofferbak van je auto moet halen, kan het een onveilig gevoel geven om hem direct de sleutel van je nieuwe A4 te overhandigen. Hij kan immers met die sleutel de auto starten, wegrijden en je no-claim om zeep helpen. En doet hij het niet nu, dan kan hij de sleutel kopiëren en het morgen proberen. Zou het niet mooi zijn om een sleutel te geven die alleen werkt op de kofferbak?

    Zelfde geldt voor 3rd parties die bij jouw data willen. Wanneer een applicatie alleen een lijstje met de huizen die jij bewaard op funda wil tonen, waarom zou je dan je gebruikersnaam en wachtwoord moeten geven? Daar kan de applicatie immers álles mee. Daarom: OAuth.

    An open protocol to allow secure API authorization in a simple and standard method from desktop and web applications.
    "If you're storing protected data on your users' behalf, they shouldn't be spreading their passwords around the web to get access to it. Use OAuth to give your users access to their data while protecting their account credentials."

    OAuth is dus een open protocol waarmee je 3rd parties toegang kan geven tot data van je gebruikers, zonder dat de gebruiker zijn wachtwoord met de 3rd party hoeft te delen.

    Continue reading »

  • Google Analytics in MVC

    Wanneer je iets in je MVC applicatie wil implementeren dat op (bijna) elke pagina terug moet komen, zoals Google Analytics, is dat een probleem dat lastig te tackelen is. Tactieken die ik in de praktijk heb gezien:

    • 1. Een baseclass maken met daarop de property 'GoogleAnalyticsTag', en alle Masterpages van dit model laten overerven. In de masterpage vervolgens <%= Model.GoogleAnalyticsTag %> doen.
    • 2. In je action 'ViewData["GoogleAnalyticsTag"]' zetten, om geen afhankelijkheid op alle modellen te hebben.
    • 3. Een losse action maken, en in je masterpage '<%=Html.RenderAction("GoogleAnalytics", "SomeController")%>'.
    3 is op zich de 'way-to-go' wat mij betreft, maar in tegenstelling tot 1. en 2. waar je in je action (of model) de GA tag zet heb je hier geen action context meer. En dus zag de code er in een van onze applicaties uit als:

    var url = HttpContext.Current.Request.Url.PathAndQuery;
    var tag = "";
    if (url.StartsWith("/koop/")) tag += "koop/";
    if (url.StartsWith("/huur/")) tag += "huur/";
    if (new Regex(@"/(koop|huur)/[\w-]+/\w+-\d+-[\w-]+/").Match(url).Success) {
        if (url.Contains("omschrijving")) tag += "object-omschrijving";
        if (url.Contains("fotos")) tag += "object-fotos";
    }
    // etc. etc. etc.

    Ononderhoudbaar, buggevoelig, en super hacky. Dat kan mooier!

    Continue reading »

  • iOS like Javascript photo gallery breakdown

    Vandaag een breakdown van de swipe-events in de photo gallery die we op onze mobiele website gebruiken. Verwacht niet een line-to-line breakdown, maar alleen de wijzigingen die hebben moeten doen om van onze more-or-less statische versie een versie te maken die swipe events ondersteunt.

    Let's get it started
    Omdat we gebruik willen maken van de 'touchmove' events gebruiken we een zelfgeschreven jQuery plugin die de interface iets handiger maakt: jquery.(s)wipe.js. De syntax voor deze plugin is:

    $('#een-element').wipe({
        wipeStart: /* */,
        wipe: /* */,
        wipeEnd: /* */
    });

    We kunnen aan deze events functies koppelen waardoor we alle logica voor het swipen op één plaats hebben.

    Continue reading »

  • Mobiele website live

    Voor een ieder die benieuwd was naar de touch-photogallery in deze post: we zijn live!
    http://100procentjan.nl/tweakers/mobiellive.png

    Beschikbaar op m.funda.nl, als je op je desktop kijkt is het aan te raden Chrome of een andere Webkit browser te gebruiken.

    Continue reading »

  • MIX Rollup, deel 1

    http://100procentjan.nl/tweakers/mix1.jpg
    Vorige week gespendeerd in Las Vegas voor de jaarlijkse Microsoft conferentie over User Interaction & Development: MIX. Hier een quick rollup van deze week!

    Zondag
    Aankomst, en een dag voor de conferentie het schokkende bedrag van $20.75 uit de 5-card poker machine gehaald met 4 azen!
    http://100procentjan.nl/tweakers/mix2.png

    Continue reading »

  • Output Cache Substitution (Donut Caching) in ASP.NET MVC 2 en 3

    Dynamische pagina's, of het nou in PHP, CGI of .NET is, hebben het internet gemaakt tot wat het nu is; maar hebben één groot nadeel. Voor elk request dient de pagina opnieuw te worden gegenereerd. Oplossing: cachen. Nu hebben we hiervoor in ASP.NET MVC het 'OutputCache' attribuut, dat je op elke Action kan zetten:

    // cache voor 1 minuut
    [OutputCache(Duration = 60, VaryByParam = "id")]
    public ActionResult Detail(int id) {
        // haal model op
        return View();
    }


    Probleem
    Iedereen die deze pagina de komende minuut opvraagt krijgt dezelfde versie te zien. Geen probleem voor pagina's die more-or-less statisch zijn, maar funest wanneer je bijvoorbeeld login informatie toont! Voeg je bijvoorbeeld Output caching toe aan het standaard ASP.NET MVC 2 project (In VS 2010 -> New Project -> ASP.NET MVC 2 Web Application) dan krijg je de volgende situatie:
    http://www.100procentjan.nl/tweakers/cache1.png
    Overzichtspagina, je ziet de 'last update' datum ter referentie

    http://www.100procentjan.nl/tweakers/cache2.png
    Nu loggen we in

    http://www.100procentjan.nl/tweakers/cache3.png
    De pagina wordt uit cache geladen (zie 'last update') maar er staat nog steeds een 'Log on' knop ipv. 'Logged in as jan'.

    Continue reading »

  • Validatie zoals UX het wil, met ASP.NET MVC 2

    De standaard validatie in MVC 2 gaat er vanuit dat je werkt met 'Validation messages' achter je tekstvelden, en een 'Validation summary' bovenaan je scherm. Dit werkt snel en out-of-the box, inclusief javascript validatie via jQuery Validate, en ook server side wanneer er geen javascript beschikbaar is (pic via).
    http://100procentjan.nl/tweakers/validationsummary.jpg
    Maar... wat als je UX-afdeling dit spuuglelijk vindt? Vandaar dat we bovenstaande gaan transformeren naar:
    http://100procentjan.nl/tweakers/validationnew.png

    Continue reading »

  • Video! Preview van touch-based mobile photo gallery

    Continue reading »

  • MapReduceJS: Een educatief map/reduce framework

    Downloadlink: MapReduceJS, an educational MapReduce framework implemented in Javascript.

    MapReduce is een door Google ontwikkeld framework waarmee bewerkingen in twee stappen op grote sets data kunnen worden uitgevoerd. Elke bewerking is compleet onafhankelijk van andere bewerkingen en ze kunnen daarom eenvoudig worden verspreid over meerdere machines. Standaard voorbeeld hierin is bijvoorbeeld het tellen van woorden in documenten:

    • 1. Input: een lijst met documenten
    • 2. Map-stap: je krijgt een document binnen, en split deze op spaties. Je retouneert een array met alle losse woorden
    • 3. Reduce-stap: je krijgt binnen: het woord, en een array met alle keren dat deze voorkwam in álle documenten. Deze kan je tellen en teruggeven als output.
    Dit is goed distribueerbaar omdat stap 2 op een oneinding aantal machines kan draaien. Het splitten van een document is immers een volledig losse stap. Hetzelfde geld voor 3. aangezien je hier alleen hoeft op te tellen en geen andere info nodig hebt.

    Maar...
    Het testen van MapReduce kan je bijvoorbeeld in Hadoop of MongoDB heeft een aantal nadelen: je moet de software aan de praat krijgen en je data importeren. Vanwege het distributed idee achter MapReduce is het bovendien lastig om te debuggen. Daarom...

    Continue reading »

  • Developer Summit: los met pipes en map/reduce

    Het Tweakers Developer Summit was weer een mooie gelegenheid als web-nerd om he-le-maal los te gaan. Als eerst, mijn implementatie:

    • Klop ID's van de pricewatch in, komma seperated
    • Hit de button
    • Je krijgt een lijst met shops waar alle producten te koop zijn, met de totaalprijs
    http://100procentjan.nl/files/rerhm4ywk1cqad519zx38yi5x.PNG
    Plaatje klikken is spelen. Let op! Er is geen visuele feedback, gebruik de Firebug / Chrome Console om in de gaten te houden wat er gebeurt.

    Continue reading »