Weet je dat gevoel wanneer je weken ergens aan werkt en het dan ineens… klikt? Vandaag was zo’n dag. Van chaos naar structuur Ik begon deze sessie met één groot HTML-bestand van 2000+ regels. Hier schaam ik me een beetje voor, maar zo was het nu eenmaal gegroeid. Alles door elkaar: styling, logica, data. Vier uur later? Netjes opgedeeld in ES Modules. Elk onderdeel in zijn eigen bestand. Zoals je kledingkast opruimen – je weet precies waar alles ligt. ...
14:00 - “Waar was ik gebleven?” Na 3 dagen pauze open ik Claude Code: “waar was ik gebleven?” Claude herinnert zich alles. Session 3 was bezig met Issue #16 (Testing Milestone). Accessibility score was 51%. Context switching is een non-issue met goede documentatie. Manual testing afgerond (15 min) Screenshot script had een bug: // Before: page.fill('#water-intake', '6') // FAIL - readonly! // After: 6× page.click('#water-add') // Works! 7 screenshots gemaakt, TC-01 t/m TC-07: ALL PASS! ...
21:00 - “Het mag wel mooier” Ik kijk naar mijn app. Het werkt. Maar… het is niet mooi genoeg. Ik had referentie screenshots verzameld (Fastic, HealthTrack UI Kit, etc.) en zei tegen Claude: “Kijk naar deze voorbeelden en kom met een nieuw ontwerp.” Complete design overhaul (1 uur) UI Specialist ging los: Quick stats 2×2 grid met circular progress Water intake visualisatie: 8 druppel iconen die oplichten! 💧 Alcohol selector: grotere pills Health score: compacter, minder dominant Gradient accenten: terracotta & sage green (premium look!) Grotere headings, meer breathing room Result: App ziet er nu uit als een €10/maand premium product. En het is gratis! ...
12:10 - “Ok laten we starten!” Sessie 2. Tijd om écht te bouwen. In de volgende 50 minuten bouwde Claude: Complete MVP implementatie (35 min) Frontend Developer maakte: storage.js (250+ lines) - localStorage management, export, sanitization healthScore.js (200+ lines) - 0-100% score algoritme met gewogen metrics app.js (350+ lines) - Main application logic, events, UI updates main.css (700+ lines) - Fastic-inspired mobile-first design Totaal: ~1,500 lines in 35 minuten. WTF. ...
“Ik kan dat toch niet?” Als je dit leest, heb je waarschijnlijk wel eens gedacht: “Ik wil graag [app/website/tool] maken, maar ik kan niet programmeren.” Ik ook. Totdat ik het gewoon deed. Het idee Ik wilde mijn dagelijkse gezondheid bijhouden. Slaap, water, beweging, pijn… je kent het wel. Er zijn apps voor, maar: Ze sturen mijn data naar de cloud (privacy? Bye bye!) Ze zijn bloated met features die ik niet nodig heb Ze kosten €10/maand voor basic functionaliteit Dus dacht ik: “Fuck it, ik bouw het zelf.” ...
And why did I take it, even if I don’t fancy a coding career? In 2017, during Morten Rand-Hendriksen’s talk at WordCamp Europe, I learned about CSS Grid. I was amazed with what it could do and really wanted to learn more about it. I kept saying this for over a year, without really diving into it. I also experienced some problems when I tried to adjust some CSS properties in themes I used in WordPress. I got frustrated and didn’t understand why things didn’t change the way I wanted. ...
In 2016 ging ik voor het eerst naar WordCamp Europe in Wenen en ik was meteen verkocht. Het grootste WordPress congres van Europa is een event wat je als WordPressgebruiker niet mag missen. Na Parijs en Belgrado was Berlijn het toneel voor WCEU 2019. In deze blog lees je mijn hoogtepunten tijdens WordCamp Europe 2019, onder andere dat ik last-minute werd toegevoegd als spreker! Tijdens WordCamp 2018 in Belgrado had ik een vrij volle agenda. Ik was co-lead voor de designtafel tijdens Contributor Day en emcee op de vrijdagochtend in de developer-track. Dit jaar besloot ik het anders te doen - een ’light’ congres zonder zelfopgelegde verplichtingen. ...
Dit artikel verscheen eerder op de website van Fronteers.nl Design is een vak, laat dat duidelijk zijn. Maar soms heb je als websitebouwer even geen budget voor een professionele designer. Of vind je het gewoon leuk om zelf te doen. Betekent dat dan maar dat je website of app lelijk moet zijn? Zeker niet! Hoewel design veel breder gaat dan alleen het visuele aspect, is het kiezen van de juiste kleuren voor je website behoorlijk bepalend, want hey, het oog wil ook wat. Daarom geef ik je in dit artikel 7 tips voor het bepalen van de juiste kleuren voor je website of app. ...
Met de komst van navigatiesystemen op smartphones is het makkelijker dan ooit om je weg te vinden. Verdwalen is niet langer een optie. Hoe anders is dit voor websites, want logische website navigatie is niet altijd vanzelfsprekend. Men vindt het lastig om structuur aan te brengen in een website, zeker als er gaandeweg nieuwe onderdelen bij komen. Waar laat je die? Want het oorspronkelijke menu heeft geen plek voor al die nieuwe onderdelen vrijgehouden. Navigatiemenu’s kunnen gemakkelijk uitgroeien tot plekken met te veel en slecht gestructureerde informatie, waardoor het voor de gebruiker lastig wordt om te vinden wat hij of zij zoekt. ...
Op deze pagina verzamel ik diverse bronnen over informatie-architectuur. De bronnen zijn voor het eerst samengesteld in maart 2017, ter gelegenheid van mijn presentatie over informatie-architectuur tijdens WordCamp Londen. Boeken over informatie-architectuur Information Architecture for the Web and Beyond - Het standaardwerk Pervasive Information Architecture: Designing Cross-Channel User Experiences Interessante twitteraccounts @resmini @Abby_the_IA @morville WordPress.tv Monique Dubbelman: The Importance of Information Architecture Anthony D Paul: Bringing Order to a Content Hoarder Zoek op information architecture op WordPress.tv Websites en blogs Why IA Matters for UX — A Brief History of Information Architecture Information Architecture and WordPress The Difference Between Information Architecture and UX Design Creating a Web-Site Information Architecture in Six Steps Complete beginner’s guide to information architecture Information architecture basics Testen en tools SEO Spider van Screaming Frog - voor het indexeren van een website Optimal Sort - Card sorting methode Keith Instone Navigation Stress Test