Nieuw thema voor Rules by Rosita

De afgelopen maanden ben ik bezig geweest met het bouwen van mijn eigen op maat gemaakte thema. Ik wilde dit graag doen omdat ik ervan wilde leren, om mijn vaardigheden als front-enddeveloper te vergroten. Ik was er al lange tijd over aan het nadenken, maar het kwam er maar niet van. Tot ik in maart van dit jaar heel spontaan begon met het downloaden van de hele blog, zodat ik het thema op mijn eigen laptop kon bouwen.

Motivatie

Toen ik begon met leren coderen in 2020, heb ik dat maar liefst 969 dagen volgehouden. Daarna lukte het me niet meer om er dagelijks mee bezig te zijn, onder andere ook omdat ik inmiddels ook een baan had.

Maar toen ik begon met het bouwen van dit thema was mijn motivatie helemaal terug. In mijn hoofd was ik er ook de hele tijd mee bezig.

Mijn eigen thema!

Ik was overigens heel erg tevreden over het vorige thema, GeneratePress. Het werkte altijd goed en ik had nauwelijks problemen ermee. Toch wilde ik mijn eigen thema bouwen, voornamelijk om ervan te leren en te blijven coderen. Dat vind ik heel belangrijk in mijn werk. Maar ook om mijn eigen vaardigheden te tonen.

Het nieuwe thema moest aan een aantal dingen voldoen:

• Goed toegankelijk zijn, iedereen met of zonder beperking,
• Op verschillende schermen goed te gebruiken zijn,
• Een darkmode hebben,
• en nog meer dingen waar ik nu niet op kom

Bovendien moest ik nu ook dingen bouwen die ik nog nooit had gebouwd. Zo had ik nog nooit een menu gebouwd met een submenu, dat ook nog goed te bedienen is op je mobiel of je tablet. Heel erg leerzaam allemaal. En ik kan nu flink uitweiden over alle technische dingen, dat ga ik niet doen, dan wordt het een heel lang en saai verhaal.

Het is nog niet af, er zitten hier en daar nog wat kleine foutjes in, die ik nog moet oppakken, maar dat komt helemaal goed.

Het ontwerp

Het ontwerp van het thema vond ik een van de moeilijkste dingen. Ik ben geen ontwerper, ik bouw het liefst een ontwerp, die mijn collega voor mij heeft gemaakt. Ik ben dan ook begonnen zonder ontwerp en al doende en met veel proberen en adviezen van anderen is het goed gekomen. Een aantal dingen zag je ook terug in het vorige thema, zelfs de kleuren komen overeen, al zijn ze net anders of anders gebruikt.

Het rood een van de belangrijkste kleuren op mijn website is gebleven, al is het wel een iets andere tint geworden, wat niet opvalt. (ik weet dat het een andere tint is), maar wat is dat een moeilijke kleur om goed te combineren met een darkmode. Uiteindelijk heb ik daar ook een goede vervanger voor gevonden. Alle kleuren hebben een andere tint in de darkmode.

Functies

Mijn blog is maar een simpele blog. Het is een typische WordPress blog, niet ingewikkeld in tegenstelling tot andere websites die ik maak tijdens mijn werk. Mooi om daar een leerproject van te maken en proberen mijn eigen thema te bouwen.

Darkmode

Zoals ik eerder schreef, wilde ik graag een darkmode maken, dat mensen de keuze hebben om de website te bekijken in lichte of donkere kleuren. Ik wilde dat al heel lang eens bouwen, dus bij deze heb ik dat ook gedaan. Persoonlijk vind ik het zelf heel fijn om overdag de website in lichte kleuren te bekijken en ’s avonds in donkere kleuren. Rechts bovenaan zit een knop om te wisselen van licht naar donker en andersom, maar het werkt ook met de instellingen op je systeem.

Toegankelijkheid

Als developer met cerebrale parese, vind ik het heel belangrijk dat websites en apps goed toegankelijk zijn. Ik vind het raar als ik daar geen rekening mee zou houden. Dus deze website moest ook goed toegankelijk worden. Dat betekent:

• Genoeg contrast, tussen alle donkere en lichte kleuren,
• De hele website is met het toetsenbord te bedienen,
• De hele website is goed te bedienen met een schermlezer,

Als extra heb ik ook een toegankelijkheidsinstellingen menu gemaakt. Dit is niet noodzakelijk voor een toegankelijke website, maar het kan handig zijn. Ik heb het voornamelijk gebouwd om te leren hoe zoiets in elkaar zit en werkt.

Het zit rechts onderin en bevat de volgende functies:

• Leesbaar letertype: Hiermee wordt gewisseld naar een lettertype die makkelijker te lezen is voor mensen met dyslexie. Het lettertype heet: Atkinson Hyperlegible.
• Grotere tekst: Hiermee wordt de tekst (en eigenlijk de hele website) met 25% vergroot.
• Hoog contrast: Hiermee wordt de website in hoog contrast kleuren weergegeven. De optie om te wisselen tussen donker en licht thema wordt hiermee uitgeschakeld.
• Animaties uitschakelen: De website heeft een aantal kleine animaties, die worden met deze functie uitgeschakeld voor mensen die dat niet prettig vinden. Ook dit werkt met je systeem.

Daarnaast is de website nog steeds goed te gebruiken als je javascript uit hebt staan.

Hoewel het thema goed toegankelijk is, geldt dit niet voor alle blogberichten omdat ik tijdens het schrijven ervan nog niet de kennis had, die ik nu wel heb.

Zoeken

Ook is er een zoekfunctie aanwezig op de website.

Trots op mijn eigen thema

Ik ben trots op wat ik heb gemaakt. Hoewel er nog een aantal dingen moeten gebeuren en ik ook nog een aantal ideeën heb voor aanpassingen, ben ik blij met het resultaat. Ik heb er voor gekozen om het thema vanaf de grond af op te bouwen, dus geen basisthema of iets dergelijks gebruikt.

Ik heb ChatGPT gebruikt om mij te helpen en te leren. Hierbij heb ik ook ontdekt dat je echt wel even moet weten wat je aan het doen bent en vooral zelf moet blijven nadenken over het hele proces en de code die je schrijft. Klakkeloos dingen overnemen werkte voor mij niet. Ik moest mezelf echt verdiepen in wat ik deed.

Iets waar ChatGPT niet tegenop kan is de hulp van mensen. Ik heb hulp en advies gehad van zoveel fijne mensen om mij heen, zoals mijn vriend, mijn zoon, mijn collega’s, vriendinnen, de mensen in de Fronteers Slack en de WordPress Nederland Slack. Bij deze heel erg bedankt voor alle hulp en advies.

Ik ben benieuwd wat jullie ervan vinden. Mocht je meer willen weten: Bekijk de code op GitHub en het voorbeeld op GitHub Pages.

Foto door ThisIsEngineering via Pexels.