14 september 2023 - 3 oktober 2024

Leerdoel 1: Nieuwe frameworks leren

Competentie: Prototypen en uitwerken

Leerdoel beschrijving

Als toekomstige developer wil ik mijn development vaardigheden ontwikkelen door nieuwe programmeertalen en frameworks te leren. De competentie die ik hiervoor gaat gebruiken is prototype en uitwerken, want door nieuwe technieken en methodes te leren heb ik meerdere mogelijkheid om een design challenge op te lossen. Experimenteert met nieuwe methoden of technologieën om tot een oplossing te komen - Prototypen en uitwerken

Om dit leerdoel te bereiken heb ik tijdens mij stage verschillende programmeertalen geleerd zoals PHP, SCSS, Timber, WordPress, Twig template engine, Bootstrap 4 grid systeem en swiperJS bibliotheek voor carrousels. Vervolgens heb ik ook mijn technische vaardigheden van CMD toegepast. Hoe ik deze leerdoel heb kunnen behalen is door de nieuwe kennis toe te passen op mijn stageopdrachten.

Wat u gaat lezen in dit document is een samenvatting van de kennis die ik heb gekregen tijdens het gebruiken van de programmeertalen en de frameworks.

 Het gebruiken van Twig template engine
Figuur: Het gebruiken van Twig template engine

Hoe heb ik het leerdoel bereikt?

Bij CMD heb ik al kennis van HTML, CSS en Javascript omdat ik heb project tech gedaan en later ook Minor web gedaan dus de kennis heb ik al. Maar als frontend developer wilde ik andere technieken leren waarmee ik nog leukere dingen kunnen maken. dus ik dacht dit is een goede leerdoel waarmee ik kan groeien en dat zie je nog terug in dit stageverslag en de projecten die ik heb gemaakt

Om dit leerdoel te bereiken heb ik aan verschillende stageopdrachten gewerkt waar ik de nieuwe geleerde programmeertalen kon toepassen. De nieuwe kennis heb ik ook gebruikt voor mijn stageverslag. Hiermee kan ik mijn geschreven code bewaren en in portfolio zetten. Om te bewijzen dat ik inderdaad iets nieuws heb geleerd kun je naar de werkzaamheden gaan bekijken. Hieronder geef ik een lijst met alle opdrachten en waar ik de nieuwe programmeertalen heb toegepast. Je kan ook op de opdrachten klikken om meer te lezen over die opdrachten.

Ga naar reflectie

Opdrachten

SCSS - css preprocessor

Wat is scss? Het is een css preprocessor om de je css code wat overzichtelijke te houden. Het is wel handig wanneer je een grote stylesheet en wanneer je met verschillende programmeurs werken. Met SCSS kan je code opsplitsen en in module schrijven. Dus hiermee vermijd code wordt herhaalt. Wat ik heel fijn vind van SCSS is dat je css code kan nesten. Dus een de child elementen kunnen binnen een parent element genest worden. Verder het is ook fijn om met custom variabele te werken. Dit zorgt ervoor dat ik niet een voor een waardes moeten aanpassen. Het een punt die je moet rekening houden is dat de browser alleen css kan lezen. Dus voordat de website online wordt moet alle scss bestanden omgezet worden naar css. Dit doe je met scss compiler.

SCSS mappenstructuur

Tijdens cmd had ik wel een beetje kennis van scss maar alleen de basis. Tijdens mij stage heb ik scss gebruikt bij Stageopdracht 2. Ik heb geleerd de mappen structuur van scss bestanden in elkaar zit. Het mappenstructuur dat de programmeurs gebruiken zorgt ervoor dat de code gesplitst en georganiseerd blijft. Het structuur bestaat uit een map helpers bestandsmap. In de helper heb je de volgende soorten bestanden

  • _function.scss: Hier staan alle scss functies
  • _Variable.scss: Hier staan alle scss custom variabelen
  • _mixin: Alle blokken css code die je kan hergebruiken

Daarna heb je andere bestanden spreek voor zichzelf.

  • _comments.scss: Hier vind je alle css van de reacties onderdeel van een blog
  • _fonts.scss: Hier vind je alle lettertype die geïmporteerd worden met @font-face
  • _formulier.scss: Alle css opmaak voor formulieren
  • _nav.scss: Alle css opmaak voor het navigatiemenu bij mobiel en desktop
  • _reset.scss: Zijn voor css opmaak en die je wil resetten
  • _structure.scss: Gaat over layout componenten die je op alle pagina gaat gebruiken
  • _text.scss: Alle css opmaak voor tekst zoals kopjes, paragrafen, lijst enzovoorts

CSS SCSS
Aangepaste variable worden zo geschreven: --name-of-variable Aangepaste variable worden zo geschreven: $variable-name
Dit is het manier hoe je media queries in css gebruikt. @media (min-width: 20rem) {...} In SCSS Media queries worden als een include geschreven: @include respond-to(from-sm);
Je kan geen stylesheets binnen een andere stylesheets importeren Bij scss kan je wel stylesheets importeren met de @import functie. @import 'nav.scss'
Je kan tegenwoordig css beperkt nesten SCSS biedt meer functionaliteit als je de scs gaat nesten a
mappenstructuur
Afb: Mappenstructuur van development team go2people

Handige scss tips

Toen ik voor het eerst ben begonnen met de scss, heb verschillende handige tips gekregen van de frontend developer die mij kun helpen wanneer ik werkt met andere developers. Hieronder heb ik een lijst geschreven met tips die ik voor toekomstige projecten kan gebruiken.

  • Je SCSS code splitsten en in de juiste bestand toevoegen
  • Gebruik classes om de code te structureren en begrijpelijk te maken
  • Bij classes, variabelen duidelijk maar abstracte namen ( bijv. $primary en niet $color-blue)
  • Code consistent houden met de juiste ruimte
  • Comments plaatsen boven stukje code voor korte uitleg

Bootstrap

Wat is Bootstrap? Bootstrap 4 is een front-end css framework die wordt gebruikt om mobielvriendelijk website te maken. Het bevat een flexibel en responsief grid-systeem dat de basis vormt voor het opzetten van de lay-out van een webpagina. Het grid-systeem is gebaseerd op een 12-kolommenstructuur, waardoor ontwikkelaars de breedte van de content kunnen verdelen over maximaal 12 kolommen op een rij. Met behulp van klassen zoals class="col-md-6" kan men bijvoorbeeld aangeven dat een bepaald element op middelgrote schermen de helft van de beschikbare breedte moet innemen. Dit bevordert de consistentie en maakt het eenvoudig om responsieve ontwerpen te creëren die zich aanpassen aan verschillende schermgroottes.

Als frontend developer bij go2people, heb ik Bootstrap gebruikt bij verschillende projecten en ook mijn stageverslag. Ik heb wel ervan gehoord toen ik ben gestart bij CMD. Maar het was afgeraden om frameworks te gebruiken. Want we moest eerst flexbox en css grid leren. Ik ben wel dankbaar voor want met die voorkennis kon ik Bootstrap begrijpen. Wat ik fijn vind van Bootstrap is dat je gewoon met een class ervoor zorgen dat de content in bepaalde content kan positioneren en je hoeft niet na te denken over css properties die je nodige hebt om bepaalde layout te creëren. En het is ook volledige responsive dus je kan de website of projecten ook op mobiel gebruiken. Ik zet hieronder de link van de documentatie.

Documentatie

Hoe werkt het?

  1. Je maak een container element aan door de html element een class container te geven
  2. Je maak een row wrapper aan door de html element een class row te geven
  3. Daarna geef je aan hoeveel kolommen wil je toevoegen voor de inhoud. Bij de class geeft hoeveel kolommen de grid heeft standaard is 12. Dus zet de class als "col-12".
  4. Daarna geef je aan hoe je de content wil verdelen tussen de 12 kolommen. De class naam die je hiervoor geeft is col-md-6. Dit betekent dat de inhoud de helft van de beschikbare breedte middelgrote schermen in nemen op. Het 'col-md' gedeelte staat voor "column" en "medium", wat aangeeft dat deze opmaak van toepassing is op middelgrote schermen. De '6' geeft aan dat de betreffende kolom 6 van de 12 beschikbare kolommen in beslag neemt.

Handige tips

Ook voor Bootstrap heb ik twee tips gekregen

  • Als je een library of framework wil installeren doet dat niet via een cdn link maar installeer in je lokale computer. Dan voorkomt je dat je project stuk gaat als de cdn link niet werkt.
  • Je hoeft alles met Bootstrap oplossen, je kan ook css flexbox en grid gebruiken
  • Als je iets niet snap, lees de documentatie

PHP

Wat is PHP? PHP staat voor hypertext preprocessor. Het is een server side scripttaal waarin je vanuit de server dynamische webpagina's kan creëren. PHP wordt meestal gebruikt voor social media platforms of een blog site. PHP is ook de basis van wordPress. Met PHP kan je verschillende dingen doen onder andere, bestanden vanuit de server bewerken, data vanuit formulieren verzamelen, data vanuit de database bewerken en nog heel veel meer.


Ik heb ooit met wordPress gewerkt, bij het vak webapplicatie maar ik snapte helemaal niks van dus je kan zeggen dat alles met PHP nieuw zijn. Bij go2people wordt er wordPress websites gemaakt voor klanten. En PHP heb je nodig om aan de websites te kunnen werken. Het is wel een beetje spannend om een nieuwe programmeertaal te leren want er is zoveel die je moet weten.Om PHP goed onder de knie te hebben ging ik op zoek naar verschillende bronnen zoals w3school, freecodecamp en stackoverflow. Tussendoor heb ik wat aantekeningen gemaakt in mijn logboek, waar ik ze later kan gebruiken.


Gebruikte bronnen

Het gebruiken van Twig template engine
Notities over PHP in logboek

SwiperJS

SwiperJS is een javascript bibliotheek waar je carrousel kan maken. Het is een hele simpele bibliotheek waar je met javascript object verschillende functionaliteiten kan toevoegen aan het carrousel. Ik heb dit library kunnen gebruiken bij verschillende stageopdrachten maar ook bij 4stagiairs mijn eigen websites. Ook in mijn stageverslag heb ik een carrousel kunnen bouwen met die library.

Hoe werkt het?

  1. Je moet eerste de library lokaal installeren of via een cdn link en in het project koppelen.
  2. Dan moet je de HTML layout vanuit de documentatie met de juiste classes toevoegen
  3. Als laatste moet je de javascript toevoegen met de benodigde functionaliteiten die je bij de slideshow wil toevoegen.
Carrousel in 4stagiairs website
Carrousel in 4stagiairs website
Carrousel in Frankrijk.nl homepagina
Carrousel in Frankrijk.nl homepagina
Swiper HTML layout
Swiper HTML layout
Swiper Javascript layout
Swiper Javascript layout

WordPress, Timber en Twig

WordPress

WordPress is een open-source content management systeem (CMS) waarmee gebruikers websites kunnen maken en beheren zonder veel technische kennis. WordPress biedt een gebruiksvriendelijke interface, thema's voor het ontwerp van de site en plugins voor extra functionaliteit. Het wordt veel gebruikt voor blogs, zakelijke websites, online winkels en meer. De developers van go2people ontwikkelen zelf de wordPress thema's voor de websites die ze voor klanten bouwen zoals Trees for all en Frankrijk.nl Ik heb voor mijn eigen website 4stagiairs ook zelf een thema kunnen ontwerpen met scss en niet alleen content vullen. En hiermee heb ik van alles die ik heb geleerd in mijn website kunnen toepassen.


Timber

Timber is een plugin voor WordPress die Twig integreert in het thema-ontwikkelingsproces. Het helpt programmeurs bij het bouwen van thema's met behulp van Twig templates in plaats van de standaard PHP templates van WordPress. Timber verbetert de scheiding de PHP code en de HTML elementen, waardoor het gemakkelijker wordt om de presentatielaag te beheren. Ik heb Timber gebruikt toen ik mijn website 4stagiairs aan het bouwen was. Het is bedoeld om de data van de content vanuit de wordPress backend op te halen in de php bestanden. En de data zet ik in een variabele in de Twig bestanden. Hiermee wordt de content dynamisch. Het is hetzelfde wat ik heb geleerd bij Project Tech en Minor Web

                                
                                    // Get the blog posts
                                    $context['informative_blogs'] = Timber::get_posts([
                                        'post_type' => 'post',
                                        'orderby' => 'post__in', // Include only published pages
                                        'post__in' => $context['fields']['selected_informative_articles'],
                                        'posts_per_page' => -1,
                                    ]);

                                
                            

Twig

Twig is een template engine voor het maken van dynamische pagina's in webapplicaties. Het wordt vaak gebruikt in combinatie met PHP en biedt een gestructureerde manier om HTML- en andere code te genereren. Twig is ontworpen om de scheiding tussen de presentatielaag (hoe gegevens worden weergegeven) en de logica van de applicatie te bevorderen. Het maakt het gemakkelijker voor ontwikkelaars om schone, leesbare code te schrijven en te onderhouden. Twig bestanden lijken als een gewone HTML pagina pagina alleen heb je twee nieuwe syntax die je kan gebruiken om de content dynamisch te maken.

Syntax

  • {{ }} : Dubbele curly brackets om variabele te roepen met de data
  • {% %} :Curly brackets en percentage om functies, if statements, loops en includes te openen en sluiten
  • {# #} : Curly brackets en hash kan je commentaar kunnen plaatsen.
Screenshot van wordPress website 4stagiair
Screenshot van wordPress backend website 4stagiair
Twig bestand waar ik data ophaalt
Twig bestand waar ik data ophaalt

Reflectie op het leerdoel

Ten slotte heb ik nieuwe technieken geleerd met al hun uitdagingen die je meekrijgt. Ik vond het in het begin best wel lastig want ik moest veel informatie in keer verwerken en ook de opdrachten kunnen maken. Ik denk dat ik ben ontwikkeld want ik zie een verschil in werkwijze en kennis. Uiteindelijk weet ik nu meer dan ik toen ik begon vijf maanden geleden dus dat vind ik fijn.


Ik heb geleerd hoe ik bibliotheken en moet kunne installeren in je eigen werk en hoe je ervoor zorgen dat het werkt. Want meestal blijf ik mijn comfort zone en gebruik ik dingen die ik al kent. Ik durfde niet andere programmeertalen te leren, dus met deze leerdoel heb ik mezelf open gesteld om nieuwe dingen te proberen.


Verder heb ik ook geleerd, hoe ik moet onderzoeken wanneer ik iets snap, chatgpt is wel handig maar ik heb mezelf uitgedaagd om de documentatie van de frameworks en programmeertalen door te nemen en de code proberen te begrijpen en durf experimenteren. Daardoor heb ik vaak gebruikt gemaakt van bronnen zoals YouTube, Codepen, stackoverflow, github wanneer ik vastliep.