Fotoblog mijnrealiteit.nl vernieuwd

You’ve found a dinosaur, this post is only here for archiving purposes. The content is outdated and is not applicable anymore.

Ik heb onlangs mijn fotoblog mijnrealiteit vernieuwd. Ik heb de website ontworpen met de simpliciteit van een aantal tumblr blogs in mijn achterhoofd. Op de site plaats ik foto’s die ik zelf maak (voornamelijk met mijn iPhone). Van opvallende dingen tot instagram achtige foto’s.

Ik heb bij het ontwerpen van de website zoveel mogelijk rekening gehouden met verschillende platformen (eerlijk gezegd alleen met PC, iPad en iPhone) door gebruik te maken van media queries.

De website draait op WordPress, dit lijkt misschien onnodig in verband met de enorm simpele website maar heeft voor mij een groot voordeel: Je kan publishen op een wordpress site door gebruik te maken van de native iPhone app. Dit kan ik niet alleen ter plekke gelijk na het maken van de foto, ook wordt de geolocatie gelijk opgeslagen.

Alle code van het wordpress thema staat op github.

Mijn eigen jQuery tutorials

Ik heb de laatste tijd al een aantal keer vragen over jQuery gekregen. Om hier meer duidelijkheid over te verschaffen ga ik een serie screencasts (video’s) opnemen waarin ik uitleg hoe een aantal basis dingen werken.

In mijn eerste tutorial ga ik in op hoe je met een snelle pageload in gedachte javascript kan koppelen aan een webpagina:

In de video komt de volgende code aan bod:

html

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery demo 1 - askmike</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    <body>
        <h1>Hello world</h1>
        <p>This is a test page.</p>
        <p>This is the end of the html content.</p>
        <script src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

css

body {
    width:660px;
    margin:auto;
    background-color:#c2c2c2;
    font-family:sans-serif;
}

h1 {
    color:blue;
    padding:10px 0;
}

jQuery

$(document).ready(function(){
    var html = '<p class="dynamic">this content is automatically inserted using javascript.</p>';
    $('body').append(html);
});

In de de tweede tutorial laat ik zien hoe je smooth pagina transities kan maken met jQuery.

Posted at October 25, 2011, under jQuery.

Extreem simplistische contactpagina

Ik zat al een tijdje met het idee in mijn hoofd om een extreem simplistische / strakke / contrasterende website te designen. En dit is het resultaat:

Check de live website, of download de PSD.

Ik ben benieuwd wat jullie ervan vinden.

Posted at September 17, 2011, under design.

Nieuw WordPress Theme: mijnrealiteit

You’ve found a dinosaur, this post is only here for archiving purposes. The content is outdated and is not applicable anymore.

Vorige week heb ik snel een nieuw WordPress thema gemaakt voor mijn fotoblog mijnrealiteit.nl. Ik maakte al een tijdje gebruik van een verouderd thema waar ik eigenlijk nooit tevreden over ben geweest. Vorige week had ik eindelijk tijd om hier eens voor te zitten.

In plaats van om van scratch te beginnen leek het me slim om een boilerplate te gebruiken (zoals de html 5 boilerplate). Dit is een html reset (lege pagina) waarin een hele hoop al voor je geregeld is, er zitten ook scriptjes bij die automatisch alles voor je minify’en en je plaatjes comprimeren. Kortom een perfect startpunt.

Ik kwam er al snel achter dat iemand deze boilerplate al had ingebakken in een leeg wordpress thema. Vanwege het enorm simplistische thema en de html5 boilerplate als startpunt was ik ook bijzonder snel met het complete thema klaar, compleet HTML5.

Ik gebruik redelijk wat jQuery voor wat animatie effectjes (niet te fancy) om bijvoorbeeld als je ergens overheen hovert al het overige uit te faden en te blenden. Ook gebruik ik de google maps API om foto’s aan geo locatie’s te koppelen.

Hier is het eindresultaat en je kan alle code bekijken op github.

Binnekort zal ik een korte tutorial schrijven over hoe je dit thema zelf kan gebruiken (inclusief de ingebakken koppeling met google Maps).

Twitter stijl reactie

You’ve found a dinosaur, this post is only here for archiving purposes. The content is outdated and is not applicable anymore.

Bloggen draait om communiceren, reactie’s spelen hier dan ook een grote rol bij. Zonder een reactie formulier onderaan je blogposts hoor je er al jaren niet meer bij, maar “threaded comments” (ofwel geneste reactie’s ala youtube) wordt toch ook steeds vaker verwacht.

Zelf vind ik twitter stijl reactie’s heel gaaf en beter bij dit blog passen: Je kan reageren op een post door gewoon het formulier te gebruiken, als je wilt reageren op iemand anders reactie klik je op reageer en wordt er automatisch een link naar die reactie toegevoegd met @[naam van poster] (test het hieronder uit op een reactie).

Ik gebruik PHP (en WordPress) om een reactie link te maken bij elke reactie, deze link krijgt een id mee die de gegevens bevat die ik nodig heb (comment id zodat ik ernaar toe kan linken en de naam van de poster). Dit id lees ik uit met jQuery en maak hier een link van en stop hem in het formulier.

PHP Elke link krijgt de klasse comment-reply-link en een uniek id mee.


    Reageer

Javascript Ik maak de link stuk (preventDefault) en gebruik de focus functie zodat je gelijk kan typen. (Op deze manier werkt alles ook zonder Javascript). Ik lees het id uit en stop de naam en het comment nummer in een string die ik vervolgens in het formulier (id#comment) stop.

$(document).ready(function() {
    $('a.comment-reply-link').click(function(event) {
        event.preventDefault();
        var str = $(this).attr('id').slice(6);
        var id =  str.slice(0,str.indexOf('-'));
        var name = str.slice((str.indexOf('-'))+1);
        $('#comment').val('+ id + '">@' + name + ' ' + $('#comment').val()).focus();
    });
});
« NewerNext page »

contact me