Ik heb dit semester een aantal dingen geprogrammeerd.

Zo heb ik uitgezocht hoe het delen van een pagina werkt via Facebook. Ik heb hiervoor gebruik gemaakt van de Facebook JavaScript SDK.
Voor mijn eigen programmeerwerk heb ik code geschreven met JQuery. Voor het gebruik van JQuery maak ik gebruik van het CDN van Google: Hosted Libraries. 
Zoals hierboven te zien heb ik een fallback geïmplementeerd. Als om de een of andere reden JQuery niet geladen kan worden in verband met blokkades of downtime van Google (erg onwaarschijnlijk), heb ik nog altijd de mogelijkheid om op een, misschien slomere manier, alsnog JQuery te laden.

Aanroepen van de Facebook SDK
Gebruik van de SDK van Facebook bleek niet al te lastig te zijn. Via een stukje code (natuurlijk aangeleverd door Facebook). Wat dit stuk code doet is het laden van de SDK op een asynchrone manier, hierdoor wordt het laden van andere elementen niet vertraagd.
De uiteindelijke button is feitelijk een div. Deze krijgt natuurlijk van de SDK allerlei eigenschappen e.d. mee. Zo moest ik zelf de te delen pagina invoeren. Ik dacht echter een probleem te hebben, want de URL moet natuurlijk dynamisch zijn. Na wat forums doorgekeken te hebben, en dus wat kennis verzameld te hebben, heb ik uiteindelijk het volgende gemaakt:
Bij het testen van mijn functie ben ik erachter gekomen dat data-href schijnbaar helemaal niet zo'n belangrijke functie heeft, want toen ik mijn alternatief had geïmplementeerd, werkte de code. Toen ik het totaal eruit had gehaald werkte de code nog steeds.
Random font
Ik heb als leuke gimmick (of waardevolle toevoeging) voor de website ook nog een mooi stukje code geschreven dat een willekeurig font kiest uit een array. Feitelijk kan het zo geschreven worden dat het per element dat aangemaakt wordt, voor dat element een willekeurig font kiest.
Het bouwen van een eigen library
Op de code van de random font generator heb ik feedback gevraagd aan Mijke, en uit deze feedback kwam voort dat ik mijn code om moest zetten in de library structuur. De reden hiervoor is simpel: een library is private, en kan dus niet zomaar per ongeluk 'gesloopt' worden door andere code in het project.

Ik heb gebruik gemaakt van deze tutorial, die ik van een medestudent heb gekregen. Deze tutorial legt uit hoe het JavaScript Module Pattern toegepast wordt.

Good authors divide their books into chapters and sections; good programmers divide their programs into modules.
Ik heb mijn code dus omgezet naar de juiste structuur. Nu werkt mijn code als volgt:
De functie generate (wat nu feitelijk gezien de enige mogelijkheid is) wordt opgeroepen vanuit een los script. De code van mijn library ziet er als volgt uit:
De instellingen zijn te configureren vanuit een extern bestand, zodra hier settings gedefinieerd worden zullen de defaulSettings overschreven worden. Ook wordt gecheckt of de userSettings überhaupt wel bestaan. Dit controleer ik met een if-statement die nagaat of een typeof userSettings bestaat.
Iteratie: ombouwen settings
Bij het vragen van feedback heeft Mijke me nog een stapje op weg geholpen door me te helpen van het implementeren van mijn settings in het externe script.js bestand dat ik zelf gebruikte, in plaats van een los bestand.
Het werkt middels een variabele die met een init-functie meegestuurd wordt, waar de instellingen aan gekoppeld zijn. Het voordeel hiervan is dat gebruikers nu zelf een naam kunnen kiezen voor hun settings-functie.
Laatste toevoeging: intervals
Als laatste toevoeging heb ik nog onderzocht hoe ik losse elementen elke x periode van tijd kan laten updaten. Mijke heeft me hiervoor een voorzetje gegeven door "data-updateFont="3000" aan mijn HTML element toe te voegen.
Ik ben wat rond gaan zoeken en heb de volgende losse functie ontwikkeld. Deze functie kijkt of een bepaald attribuut is toegevoegd aan het HTML element, haalt hier vervolgens de data uit en voert de functie generate uit. Ik ben er echter nog niet aan toe gekomen om het zo te bouwen dat het ook alleen de fonts zijn.
Het inzichtelijk maken van mijn code
Ik heb mijn code zo goed mogelijk inzichtelijk gemaakt voor de andere leden uit mijn team door het gebruik van comments. Ook heb ik voor mijn eigen code documentatie geschreven in de vorm van een README.md, meer informatie hierover is te vinden 
typey.min.js
Mijn laatste stap was het minifyen van mijn code, dit heb ik gedaan om de code zo licht mogelijk te maken om in te laden. Ik heb gebruik gemaakt van een online tool en ben zo van 2KB naar 904 bytes gegaan (wow!)

Reflectie
Ik heb me deze periode denk ik erg goed ontwikkeld in JavaScript, als ik terugkijk op wat ik allemaal kon vóór dit semester, en wat ik nu allemaal begrijp.
Wat ik goed vond gaan: Ik heb nette code geschreven vind ik zelf, voorzien van code en heb meerdere iteraties uitgevoerd om de code efficiënter te maken.
Wat kan beter: Mijn basiskennis van JavaScript, ik denk dat er nog een flinke stap gemaakt kan worden, om een snellere programmeur te worden.


Back to Top