• 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 »

  • Javascript on-the-fly samenvoegen, minifyen en versionen

    Het samenvoegen van meerdere javascript files, en het minifyen van dezelfde javascript is een optimalisatie die flink effect kan hebben op de performance van je website; en een standaardadvies van optimalisatietools. Vandaar hier de techniek die wij gebruiken voor onze nieuwe mobiele website om javascript samen te voegen, te minifyen met YUI compressor, en automatisch te versionen.

    Welke javascript is nodig?
    Om op een willekeurige pagina aan te geven welke javascript benodigd is, kunnen we inhaken op het 'Page_Init()' event dat nog steeds bestaat in ASP.NET MVC. Dit draait voordat de view zal worden gerenderd. De syntax hiervoor is:

    // onderaan je .aspx of .master:
    <script runat="server">
        protected void Page_Init(object sender, EventArgs e)
        {
            ScriptHelper.RegisterScript("/js/jquery.js");
            ScriptHelper.RegisterScript("/js/global.js");
        }
    </script>

    Wanneer je bovenstaande code in je masterpage zet, kan je tevens per view een zelfde blokje toevoegen. Deze scripts worden dan ná de scripts in je masterpage toegevoegd (volgorde is nogal eens belangrijk bij javascript bestanden :-)).

    Continue reading »

  • Zoekbox live!

  • Zoekscherm dat dynamisch queries maakt met Expression Trees en MVC

    Naar aanleiding van de reactie van Jogai in Coding Glamour: Route constraints op QueryString parameters in ASP.NET MVC, een post over het mappen van een MVC zoekformulier naar een echte SQL query.

    Let's get it started
    Met behulp van het volgende model wordt een view getoond met daarop een formulier:

    // model
    public class ZoekformulierModel {
        public string Plaatsnaam { get; set; }
        public int PrijsVan { get; set; }
        public int PrijsTot { get; set; }
        public bool IndTuin { get; set; }
        
        /* wat code voor de opties in de selectlist */
    }


    <!-- view -->
    <form method="post" action="">
    <h1>Zoekformulier</h1>
    <table>
        <tr><th>Plaats</th><td><%=Html.TextBoxFor(m=>m.Plaatsnaam) %></td></tr>
        <tr><th>Prijs</th>
            <td><%=Html.DropDownListFor(m=>m.PrijsVan, Model.PrijsRange) %> - <%=Html.DropDownListFor(m=>m.PrijsTot, Model.PrijsRange) %></td></tr>
        <tr><th>Tuin?</th><td><%=Html.CheckBoxFor(m=>m.IndTuin) %></td></tr>
    </table>
    <input type="submit" value="Zoeken" />
    </form>

    http://www.100procentjan.nl/tweakers/zoek1.png

    Continue reading »

  • Route constraints op QueryString parameters in ASP.NET MVC

    ASP.NET MVC kent een vrij krachtige routing-engine om URL's te routen naar de actie die daarbij hoort. Naast puur URL's mappen kan je tevens constraints toevoegen om je routings wat te finetunen. Bijvoorbeeld praktisch voor de volgende situatie:

    /koop/amsterdam/appartement-12345-straat-1/fotos/
    -> moet naar ObjectController.Detail
    
    /koop/amsterdam/appartement-12345-straat-1/reageer/
    -> moet naar ObjectController.Contact

    Door een constraint toe te voegen, kan je onderscheid maken tussen deze twee URL's:

    // bijvoorbeeld
    routes.MapRoute(
        "object-contact",
        "{aanbod}/{plaats}/{type}-{id}-{adres}/{pagina}",
        /* ... */,
        new { pagina = @"reageer|bezichtiging" });
    // als pagina iets anders is dan reageer / bezichtiging matcht de route niet

    Probleem: wanneer je URL's van binnen als volgt zijn (omdat ASP.NET voor elke URL in je website opslaat of er een fysieke file voor is, en bij miljoenen unieke URL's is dat een huge leak dat niet automatisch wordt geflusht):

    /koop/?id=12345&pagina=reageer

    zijn constraints niet meer mogelijk, want dit wordt niet ondersteunt op QueryString parameters. Daarom: de QueryStringConstraint!

    Continue reading »

  • Mobile device detection

    Belangrijk onderdeel van ons nieuwe mobiele platform is uitvogelen welk device een gebruiker op dat moment gebruikt. Ben je mobiel met een viewport-breedte van < 600 px dan willen we je doorsturen naar onze mobiele site. En dan kom je terecht in de wondere wereld van User Agent parsing.

    Continue reading »

  • Bouw eens een API met WCF, deel 4: Beschikbaar via SOAP, XML en JSON

    Een API is geen API als er niet via verschillende protocollen tegenaan gepraat kan worden; iets wat in WCF volledig in config geregeld kan worden. In Visual Studio 2008 nog iets wat haast automatisch handwerk werd: de Configuration Editor was niet alleen alles behalve intuitief, maar genereerde ook nogal eens niet werkende configs. 2010 heeft daar echter verbeteringen in aangebracht, waardoor het configureren voor meerdere endpoints een breeze is.

    Continue reading »