Na zoveel jaren ervaring als developer, vond ik het ook wel tijd om wat meer over mijn vak te gaan vertellen. Dus heb ik een blog opgezet. Hier ga ik bloggen over oa development, linux/unix, security en het leven als freelancer. Denk aan tutorials, tips & tricks, en gewoon dingen die me opvallen of bezighouden. Meer dan genoeg ideeën. Maar eerst iets over de opzet van mijn shiny new blog.

Onderliggende techniek¶

Ik had natuurlijk gewoon een wordpress blogje kunnen opspinnen. Dat heb ik vaker gedaan, voor veel opdrachtgevers, en ook voor mezelf. Zo heb ik jaren geleden tijdens een aantal verre reizen geblogd op farenji.net. Maar naarmate ik vaker beroepshalve in de code van wordpress heb zitten wroeten wilde ik er privé eigenlijk steeds minder mee te maken hebben. Dus besloot ik mijn eigen blog platform op te zetten. Dat is veel leuker, en natuurlijk hoef je niet overal het wiel opnieuw uit te vinden. Door handige integratie van de juiste libraries en oplossingen was het eigenlijk zo gepiept. Standing on the shoulders of giants!

Laravel Nova¶

Laravel is al jaren mijn favoriete PHP framework. Ik kan er mee lezen en schrijven. Daarnaast heb ik best goede ervaringen opgedaan met Laravel Nova. Hoewel Nova zeker wel z'n quirks en beperkingen heeft, werkt het prima, en kun je er heel snel een custom CMS mee opzetten. Nova is geen gratis product, maar ik vind het zelf de investering wel waard. Die heb je zo terugverdiend, als je ziet hoeveel tijd het je bespaart.

Markdown¶

Met zogenaamde WYSIWYG editors heb ik meestal niet echt goede ervaringen gehad. "What You See Is Almost Never What You Get". Je hebt veel verschillende implementaties die allemaal weer hun eigen beperkingen hebben en eigenlijk heb ik er nog nooit een gevonden die alles deed wat en hoe ik wilde. En de html code die gegenereerd wordt, is vaak om te huilen. Maar zelf handmatig html tikken, daar had ik ook zeker geen zin in. Dus koos ik ervoor om mijn blogs in markdown-formaat te schrijven, een ideale tussenoplossing.

Met behulp van de uitstekende library laravel-markdown in combinatie met nova-markdown had ik de basis van mijn blog binnen een paar uurtjes opgezet. De markdown wordt onder water gerenderd door league/commonmark en de rendering kun je desgewenst volledig customizen. Hierdoor was het vrij eenvoudig om de gegenereerde html mooi in de bestaande styling van mijn site te integreren.

Code syntax highlighting¶

Een blog over development gaat natuurlijk vaak over code, en dan wil je dat die er een beetje goed uitziet. In laravel-markdown wordt daar al in voorzien, door middel van integratie van Shiki. Super nice. Zelf heb ik er mbv wat simpele CSS nog automatische regelnummering in geklust, et voila:

<?php

namespace App\Http\Controllers;

use App\Models\BlogEntry;
use Artesaos\SEOTools\SEOTools;
use Illuminate\Contracts\View\View;

class BlogController extends Controller
{
    protected SEOTools $seo;

    public function __construct(SEOTools $seo)
    {
        $this->seo = $seo;
    }

    public function entry(BlogEntry $blogEntry): View
    {
        $imageUrl = url($blogEntry->image_url);
        $this->seo->setTitle($blogEntry->title);
        $this->seo->setDescription($blogEntry->excerpt);
        $this->seo->twitter()->setImage($imageUrl);
        $this->seo->opengraph()->addImage($imageUrl);
        $this->seo->opengraph()->setType('article');
        $this->seo->opengraph()->setArticle([
            'article:published_time' => $blogEntry->published_at->toIso8601String(),
        ]);

        return view('blog.entry', [
            'blogEntry' => $blogEntry,
        ]);
    }
}

De automatische regelnummering werkt trouwens zo:

code {
  counter-reset: step;
  counter-increment: step 0;
}

code .line::before {
  content: counter(step);
  counter-increment: step;
  width: 1rem;
  margin-right: 1.5rem;
  display: inline-block;
  text-align: right;
  color: rgba(135,158,168,.4)
}

SEO¶

In bovenstaand stukje PHP zag je hier al wat van terug. Ook als backend developer ontkom je natuurlijk niet meer aan wat basale SEO, of eigenlijk vooral: zorgen dat de links die je deelt op sociale netwerken er een beetje leuk uitzien. Het vervelende is dat zowat elk social network een eigen "standaard" volgt (of er eentje zelf heeft gedefinieerd). Dankzij artesaos/seotools zie je door de bomen het bos nog en is implementatie simpel.

I18N en L10N¶

Mijn site en blog is nu alleen nog in het Nederlands, maar is al wel voorbereid voor meertaligheid door middel van mcamara/laravel-localization. Uiteindelijk wil ik ook in het Engels gaan bloggen, dan heb je toch een groter bereik dan alleen die paar mensen die Nederlands spreken. Ik ben alleen nog te lui om alle teksten op mijn site te vertalen, dus dat heb ik even op de backlog geparkeerd.

Comments¶

Een blog moet interactief zijn, je moet op zijn minst kunnen reageren. Nu is dat misschien wel het meest tijdsintensieve onderdeel, als je dat helemaal zelf wil bouwen. Zeker als je het goed wil doen, met avatars, threaded discussies, single sign on, emoji, verzin het maar. Er bestaan veel kant en klare oplossingen die je veel werk uit handen nemen, waarvan Disqus misschien wel de bekendste is. Dat is wel een betaalde dienst, dat vind ik op zich geen probleem, maar ik vind het wel minder dat alle data dan bij een private partij terecht komt. En zo zijn er nog meer nadelen.

Na wat zoeken vond ik ergens een beter alternatief: utteranc.es. Het leuke hieraan is dat alle comment data opgeslagen wordt in GitHub issues. Dmv de API worden deze automatisch aangemaakt en opgehaald voor elke unieke pagina, en uiteraard kun je alle features gebruiken die je ook in GitHub issues hebt. Implementatie is vrij simpel, je hebt alleen een publieke github repo nodig, en je plaatst een stukje javascript op je pagina, en dan ben je eigenlijk al bijna klaar. Om te kunnen reageren heb je alleen wel een GitHub account nodig, maar ik gok dat vrijwel iedereen in mijn doelgroep dat wel heeft.

Tot slot¶

Deze eerste blog post is toch nog best een lang verhaal geworden. Als je het helemaal tot hier hebt volgehouden, laat dan vooral even een comment achter!