View source tool

Het idee voor deze tool is gekomen toen ik een website had gemaakt, maar bedacht dat men eigenlijk alleen maar het uiteindelijke resultaat op een intuïtieve manier kan bekijken via de browser. Als de gebruiker echter geïnteresseerd is in de broncode van de pagina, is het altijd even werk om de juiste bestanden te vinden, en zodra die bestanden dan uiteindelijk worden weergegeven in de browser krijgt de gebruiker een lelijk tekstbestand te zien.

Door deze tool te ontwikkelen is het voor geïnteresseerden een kwestie van klikken om de bronbestanden te zien in een mooie omgeving en in relatie tot elkaar. Daarbij is de broncode ook prachtig opgemaakt met behulp van het Google Prettify-project.

Bekijk de code van dit project in de tool



Het uiteindelijke resultaat


Een makkelijk bereikbare code-kiezer


De taak die voor handen lag

Om tot een goed resultaat te komen begin ik altijd met het maken van een snelle schets in Balsamiq. Dit helpt om de gedachten te ordenen, is mijn ervaring.

Verder was het natuurlijk de bedoeling om PHP (en dus ook HTML) te schrijven en daarna CSS toe te voegen. Dit doe ik altijd in deze volgorde omdat de markup van de pagina het meeste denkwerk vereist.
Na de pagina visueel op orde te hebben is het dan nodig om JavaScript toe te voegen om het werkzaam te maken.



Het wireframe/low-fidelity prototype



Uitgevoerde activiteiten

Mijn eerste idee was om via PHP er achter te komen waarvandaan de gebruiker kwam en aan de hand daarvan die bewuste website te bevragen waar de bestanden stonden. Zoals veel oplossingen bleek dit onnodig ingewikkeld en uitgebreid, en na een kopje koffie en een korte wandeling (die doen het hem vaak, hè) bedacht ik dat het beter zou zijn om het simpelweg in de URI mee te geven. De bedachte manier was de manier die nu ook gebruikt wordt. Een URI zou er dan als volgt uit kunnen zien: https://aartdenbraber.nl/view-source/?baseUrl=https://aartdenbraber.nl/the-minimalist-portfolio&css=style.css&html=index.html&js=js/scripts.js#show-HTML

De URL is opgedeeld in een aantal onderdelen:

  • Het pad naar de pagina zelf ( https://aartdenbraber.nl/view-source/ ),
  • de base-url die naar het doel verwijst ( baseUrl=https://aartdenbraber.nl/the-minimalist-portfolio ),
  • de CSS-locatie ten opzichte van de base-url ( &css=style.css ),
  • de HTML-locatie ( &html=index.html ),
  • de JavaScript-locatie ( &js=js/scripts.js )
  • de op dit moment bekeken code ( #show-HTML )

De manier van ophalen

Om de broncode te kunnen weergeven was het vanzelfsprekend nodig om die broncode op te halen. Eerst werd dit gedaan met PHP, maar omdat ik niet wilde dat de volledige pagina steeds herladen moest worden wilde ik AJAX gebruiken. De manier om het nu op te halen was door met JavaScript een hashchange-event (puntje 6 in het lijstje hierboven) waar te nemen, en aan de hand van die waarde de bijbehorende code op te halen. Op deze manier kan er ook gelinkt worden naar een bepaalde code, maar is het even makkelijk om die weer te wijzigen.

Resultaat

Door deze tool gemaakt te hebben heb ik weer meer geleerd van ontwerpen en UX, aangezien ik alles op één pagina wilde hebben en de interactie zo intuïtief mogelijk wilde ontwerpen. Helaas heb ik in het begin meer werk gedaan dan nodig was door eerst met PHP een systeem te maken om de code op te halen. Dat werkte prima, maar moest de pagina verversen om te kunnen werken. Echter legde dat wel de basis voor het uiteindelijke systeem, dus het was niet compleet tevergeefs.

Bekijk de code van dit project in de tool

(toolception?)