Moderne website maken: CMS of zelf code schrijven?

[BramCoding]

Hi allen,

Sinds kort wat meer interesse gekregen in de front-end wereld. Ikzelf werk binnen de IT-branche als Azure Consultant en heb 0,0 ervaring met het bouwen van een website.

Graag had ik wat geëxperimenteerd en mijn eerste website gemaakt start-to-end. Uiteindelijk zal dat mijn portfolio website worden.
Nu vroeg ik mij af: ik zie adverteerplaatsen vol staan met mensen die hun diensten te koop stellen om een professionele website te maken voor jou. Aangezien dit voor de eindgebruiker ook wel een kwestie is van zo weinig mogelijk te moeten betalen hiervoor, werken die mensen dat meestal met CRM's zoals bvb WordPress (of eender welke andere op de markt)?

End goal voor mij is vooral bijleren en op mijn gemak een toffe portfolio website uitbouwen. Raden jullie eerder een CRM aan, of begin ik from scratch met custom HTML, CSS, JavaScript (en PHP?)?

Wordt dit tegenwoordig nog veel custom made gedaan, simpelere sites die er gewoon fijn uit moeten zien en informatie displayen, maar weinig interactie met de gebruiker vergen, of is het simpeler om hier een CRM voor te gebruiken?

Alvast bedankt voor de input, ik kijk al eens voor een gratis webservertje!

[Toxic_Dreams]

Persoonlijk zou ik gewoon beginnen met een basis website met HTML en CSS. Wanneer je hier namelijk nog mee moet beginnen zou het voor mij persoonlijk een beetje overweldigend worden.

[eric.1]

Als je een CMS kiest ala WordPress, Drupal of Joomla, dan ben je vooral bezig om het visueel goed te krijgen. Je bent dan eigenlijk maar beperkt bezig met de onderliggende materie.

Erg simplistisch gezien; download WordPress -> log in op mijn.server.nl/wp-admin -> kies een theme, installeer wat plugins en pas je website aan. Tuurlijk kan je van alles onderliggend aanpassen, maar goed, dat houdt al snel op. Dat is wellicht niet echt het doel wat je voor ogen had.

Als je al iets van PHP af weet zou ik al snel richting een PHP Framework kijken als Laravel. Alleen is deze drempel voor een beginner wellicht wat aan de hoge kant.

Wat je ook doet; begin eerst met een lokale website.

[ Voor 4% gewijzigd door eric.1 op 07-10-2020 18:10 ]

[Ernemmer]

Als je gewoon een goed portfolio wilt moet je imo een CMS gebruiken. Wil je leren om websites te programmeren dan ga je zelf met de diverse talen aan de gang.

Eventueel als je het helemaal eenvoudig wilt zou je kunnen kijken naar wix of squarespace of zo.

[ Voor 25% gewijzigd door Ernemmer op 07-10-2020 18:17 ]

[Beyond]

Wil je iets met PHP gaan doen, kijk dan ook eens naar Laravel. Neemt je een boel werk uit handen.

[Ramon]

Lastig om hier een goed antwoord op te geven. Er zijn tientallen routes die je kan nemen afhankelijk van wat je voor elkaar wilt krijgen. Wil je interactie (formulieren e.d.) dan heb je al gauw een server-side taal nodig (zoals PHP, Ruby of Python (ook weer afhankelijk van wat voor hosting je kiest)). Heb je dat niet nodig dan kan je wel uit met een static site generator (kan met alle hosting). Er zijn tig talen, frameworks en compilers om websites te maken die allemaal HTML (en CSS) als resultaat hebben. Wil je dus rustig beginnen begin dan met het leren van HTML en CSS.

Natuurlijk heeft iemand die zijn geld verdient met het maken van websites een bepaalde toolset om sites snel te kunnen maken maar dit hoeft absoluut niet Wordpress te zijn en hoeft ook niets te zeggen over hoe jij jouw website zou moeten gaan maken.

[Hydra]

BramCoding schreef op woensdag 7 oktober 2020 @ 17:19:
End goal voor mij is vooral bijleren en op mijn gemak een toffe portfolio website uitbouwen.

Portfolio van wat? Wat wil je uitdragen?

[scosec]

CRM lijkt me niet echt de juiste keuze imo. Dat heeft een ander doel dan een portfolio laten zien.

Als je toch in de Microsoft hoek zit zou je eens kunnen naar C#. In combinatie met het Umbraco CMS bijvoorbeeld. Heb je misschien in je carrière pad ook net wat meer aan.

Wat ik begrijp ben je nog niet thuis in programmeren. Als je dingen voor productie doeleinden gaat maken zou ik oppassen met vanaf scratch werken omdat je nog niet thuis bent in sql injection etc. Een framework dekt dat veel beter voor je af.

[DJMaze]

Begin gewoon met HTML.
Wil je grafisch leren, begin met CSS, pak anders een bestaande CSS en leer een beetje.
Wil je interactie leren, begin dan met JavaScript/ECMAScript (en dus niet frameworks zoals jQuery, Vue, Angular, etc.)

Met window.fetch kan je vervolgens communiceren met bestanden op een server.
Later kan je het dynamisch maken met welke serverside code dan ook (php, asp, c#, python, node.js, perl, etc.)

[TomsDiner]

DJMaze schreef op woensdag 7 oktober 2020 @ 22:49:
Wil je interactie leren, begin dan met JavaScript/ECMAScript (en dus niet frameworks zoals jQuery, Vue, Angular, etc.)

Waarom geen jQuery? Mijn skills op het gebied van JS zijn inmiddels een stuk beter, maar eigenlijk ben ik eerst jQuery gaan gebruiken, waarna ik met JS meer de diepte in kon. De laagdrempeligheid van jQuery plus de overzichtelijker syntax vond ik wel prettig werken. En ik geloof dat een zeer groot percentage van de websites jQuery gebruikt... (gegevens van deze maand)

[DJMaze]

TomsDiner schreef op woensdag 7 oktober 2020 @ 23:01:
Waarom geen jQuery? Mijn skills op het gebied van JS zijn inmiddels een stuk beter, maar eigenlijk ben ik eerst jQuery gaan gebruiken, waarna ik met JS meer de diepte in kon. De laagdrempeligheid van jQuery plus de overzichtelijker syntax vond ik wel prettig werken. En ik geloof dat een zeer groot percentage van de websites jQuery gebruikt... (gegevens van deze maand)

Omdat een zeer groot percentage van die websites zijn gebouwd in 2005 (dat zie je aan de oude jQuery v1 80%).
We leven in 2020 en dan kan je iets nieuws prima zonder jQuery doen.
Daarnaast zeg jij dat je de jQuery syntax prettig vindt. Dat is een persoonlijke mening over een framework en niet de werkelijke techniek. Kan TS net zo goed een CMS van de plank trekken en nog meer zut leren wat niet aan de basis staat (less of scss bijvoorbeeld).

Ik heb laatst jQuery (+ aanverwante ouderdom) uit RainLoop gesloopt. De mobile response en pagespeed insights liegen er niet om.
Van 25% naar 98% performance.
Wil niet zeggen dat elke website deze helse taak uitvoert (laat staan dat een manager een budget akkoord geeft).

Idemdito voor Vue, Angular, Knockout, etc.
Die zijn ooit ontwikkeld met code om alle problemen van Internet Explorer op te lossen.
Anno 2020 hebben we Proxy() en dan hoeven de frameworks geen observables, shadow dom (obsolete nu), getter/setter en haschanged intervals te draaien om wijzigingen van een object waarde te monitoren

Oftewel, als je nu leert: is het dan nog relevant over 5 jaar?

Nog een leuke: execCommand() is obsolete en inconsistent tussen browsers. Bijna alle wysiwyg editors zijn afhankelijk van execCommand (tiny, ckeditor, etc. etc.).
Hoelang nog voordat de webwereld ontploft als webbrowsers het er uit halen?

[ Voor 20% gewijzigd door DJMaze op 07-10-2020 23:37 ]

[TomsDiner]

DJMaze schreef op woensdag 7 oktober 2020 @ 23:17:
[...]

Omdat een zeer groot percentage van die websites zijn gebouwd in 2005 (dat zie je aan de oude jQuery v1 80%).
We leven in 2020 en dan kan je iets nieuws prima zonder jQuery doen.
Daarnaast zeg jij dat je de jQuery syntax prettig vindt. Dat is een persoonlijke mening over een framework en niet de werkelijke techniek. Kan TS net zo goed een CMS van de plank trekken en nog meer zut leren wat niet aan de basis staat (less of scss bijvoorbeeld).

Ik heb laatst jQuery (+ aanverwante ouderdom) uit RainLoop gesloopt. De mobile response en pagespeed insights liegen er niet om.
Van 25% naar 98% performance.
Wil niet zeggen dat elke website deze helse taak uitvoert (laat staan dat een manager een budget akkoord geeft).

Ah! We hebben een liefhebber!

Als 97% van alle websites jQuery gebruikt, zijn dat ook HEEEEEEL VEEEEEEEL sites die wèl nieuw zijn..
En performance is -bij het leren- niet zo belangrijk. Of zo belangrijk als je zelf wilt.

Het levert in mijn beleving een laagdrempeliger manier om zaken te bereiken op, wat misschien voor starters makkelijker is. Maar het is misschien ook net waar de nadruk op gelegd wordt. Vindt je grafisch klooien belangrijker dan kennis en performance, dan zou ik zeker jQuery gebruiken. Wil je oldskool werken zonder dependancies om gewoon je skills te verbeteren, en gaat het dus meer om code/performance, dan zou ik geen hulp van frameworks zoeken.

Overigens zou ik het voor een starter nog bonter maken. Ga spelen met bootstrap (dan heb je al jQuery), omdat responsiviteit één van de eerste zaken is die je moet gaan begrijpen met een eigen layout.

[DJMaze]

@TomsDiner

offtopic:
liefhebber? Eerder een knipperlicht relatie.
Met name Joomla + theme + components laad je zo meerdere versies in 1 klap.

En bootstrap is er ook zonder jquery hoor.

jQuery.slim is wat ik gebruik waar nodig. Wordt wel tijd dat iemand jQueryUI eens update...

[knarfyboy]

Het leukste is natuurlijk alles zelf ontwikkelen en niet gaan neuzelen in een Wordpress installatie. Ikzelf heb mijn eigen websites systeem gemaakt in Laravel, met ingebouwde cms. Ben ik nu naar het omzetten naar een aparte omgeving met als front end React en Laravel als de backend api.

[mcDavid]

Leukste is idd zelf bouwen. Als je toch een CMS wilt gebruiken om een beetje een vlotte start te maken, ga dan niet voor Wordpress (daar word je echt droevig van als je zelf iets in de code wilt doen) maar voor iets als Bolt cms

[RoelZ]

Omdat er al heel wat antwoorden zijn geven denk ik niet dat je nu een eenduidig antwoord hebt gekregen en dit is eigenlijk ook niet gek gezien (zoals je ook terug kan lezen) iedereen zijn eigen voorkeuren heeft.

Mijn TL;DR antwoord
Maar als een inmiddels ervaren (front-end) developer (12+ jaar) sluit ik me aan bij @Toxic_Dreams , @Ramon en met name @DJMaze omdat dit nog altijd de (basis) fundering blijft waarom websites en een applicaties draaien.
HTML, CSS en JavaScript.

Lange antwoord
Houd er rekening mee dat er ontzettend veel technieken, talen en tooling zijn die je leven als een developer uiteindelijk stukken makkelijker maakt. Maar begin daar (imo) niet! Omdat, zoals eerder gezegd alles uiteindelijk naar HTML, CSS en JavaScript toe werkt.

1. De volgende stap zou dan kunnen zijn:
Probeer bij jezelf (zover dit mogelijk is) eens na te gaan of je meer plezier haalt uit techniek of juist design. Wordt je gelukkig van het kunnen programmeren of vindt je het belangrijk (en stukken leuker) om het visueel mooi en levendig te krijgen?

Techniek
Voor het eerste zou ik dan gaan kijken en begrijpen van Node.js. Hiermee neem je jouw basiskennis mee naar een pad dat (zover dit mogelijk is met web development) zekerheid biedt voor de toekomst.

Design
Voor het tweede zou ik Bootstrap 5 of TailwindCSS aanraden. Gebruik dan hun CDN variant en documentatie om snel te kunnen beginnen.


2. Heb je bovenstaande eens goed doorgenomen kun je je altijd nog verder ontwikkelen op elk afzonderlijk gebied.

• Voor HTML, kijk eens naar HTML5 en de DOM
• Voor CSS, kijk eens naar CSS Grid en/of Sass (SCSS)
• Voor JavaScript, kijk eens naar haar eigenaardigheden (techniek) of mogelijkheden

Als je toch sneller naar een full featured website toe wilt (aka CMS), bekijk dan eens Statamic.


Blijf weg van
Om je toch ook iets van perspectief te bieden voor iets dat imo zonde van je tijd is om je op een bepaald pad te houden, zou ik weg blijven bij het volgende.
jQuery, Grunt, Gulp, Less, Foundation, Wordpress en misschien ook nog wel PHP (dat ik het durf! )

PHP en bijvoorbeeld Laravel zijn zeker wel gefundeerde programmatuur die je een keer tot je zou moeten nemen, echter groeit het hele web imo nu toch echt richting serverside JavaScript oplossingen en zijn bewegingen zoals NoSQL onvermijdelijk.


Disclaimer
Weet dat bovenstaande geen verzekerd gouden pad naar een Pro/Expert/1337 (front-end) developer is. Maar ik hoop je hiermee toch wat meer context en richting te kunnen bieden.

Ook zijn al het bovenstaande imo de beste technieken/tooling en talen om na te streven als beginnend (front-end) developer anno 2020. Hiermee gooi ik dus doelbewust oude best practices overboord en limiteer ik het deels nog om je niet te overspoelen met allerlei keuzes.

Succes!

[ Voor 0% gewijzigd door RoelZ op 09-10-2020 23:03 . Reden: Typo² ]

[user109731]

Als je doel is om een CMS te schrijven moet je dat vooral doen, je leert er vast van. Echter IMO is het gebruik van server-side omgevingen (PHP, node.js) en een CMS overkill voor een persoonlijke blog of portfolio website.

Static site generators zijn al genoemd, zijn tegenwoordig populair en hier prima geschikt voor. Hierbij schrijf je je content in markdown ofzo en genereer je standaard HTML/CSS pagina's die je overal kunt hosten, in plaats van je pagina's in een relationele database te stoppen.

[BramCoding]

Bedankt voor de tips en hulp.
Het leerpad is even belangrijk als het resultaat (voorlopig) dus ga ik geen CMS gaan gebruiken.
Ik begin met HTML, CSS en JavaScript en pruts daar eerst wat in.

Wish me fun

[DJMaze]

@BramCoding super, succes!

Afbeeldingen: <img> is de basis <figure> wordt het leuk.
Animaties: kan met CSS

Zodra je aan CSS begint: leer de box models
Scheelt je hoofdbrekers als je een element een width meegeeft die niet klopt

Je kan dus een hoop zonder scripting tegenwoordig.

[ Voor 27% gewijzigd door DJMaze op 08-10-2020 09:30 ]

[Postman]

@RoelZ Erg nette post! Alleen een vraagje: is er een reden dat je Bootstrap 5 adviseert? Uit het verleden blijkt wel dat dingen in de alpha versie niet altijd productie halen, dus kans bestaat dat je iets leert wat uiteindelijk niet meer werkt. Plus voor versie 4 is zoveel meer documentatie en hulp te vinden online.

[RoelZ]

Postman schreef op donderdag 8 oktober 2020 @ 09:55:
@RoelZ Erg nette post! Alleen een vraagje: is er een reden dat je Bootstrap 5 adviseert? Uit het verleden blijkt wel dat dingen in de alpha versie niet altijd productie halen, dus kans bestaat dat je iets leert wat uiteindelijk niet meer werkt. Plus voor versie 4 is zoveel meer documentatie en hulp te vinden online.

Goed dat je dit even aangeeft! Zeker waar dat je een alpha versie eigenlijk nooit voor (commerciële) productie omgevingen zou moeten gebruiken.
De reden dat ik refereerde naar Bootstrap 5 is eigenlijk omdat hier duidelijk wordt dat jQuery passé is en je (als beginnend developer) niet meteen iets aanleert wat, nadat je het onder de knie hebt direct naar de volgende versie moet overstappen.

Los hiervan ben ik zelf al begonnen met v5 en zijn ze eigenlijk al heel ver. Er zullen (naar eigen zeggen) geen grote zaken meer veranderen tot aan de RC en Final. De documentatie is daarmee ook (imo meer dan) voldoende om er aan te beginnen.

Misschien als beginnend front-end developer kun je inderdaad beter Bootstrap 4 gebruiken, wetende dat 5 om de hoek staat en je bepaalde syntax anders zult moeten aanpakken. Maar allemaal niet heel spannend.

Oh, en thanks voor het compliment

[Ed Vertijsment]

Ik ben het grotendeels met @RoelZ eens met name wat hier geschreven wordt:

Omdat, zoals eerder gezegd alles uiteindelijk naar HTML, CSS en JavaScript toe werkt.

Houd dat vast, en bedenk je dat dat elke keer als je een taal, library of framework leert dit een abstractie is op een of meer van het bovenstaande. Een abstractie kan voordelen bieden, maar er zitten ook kosten aan. Zo maakt een abstractie het (bijna) altijd minder goed duidelijk wat er nou daadwerkelijk gebeurt en stelt jet het dus ook ergens minder in staat om te leren.

Dat laatste gezegd hebben kan ik mij dan ook minder vinden in het advies om in Bootstrap (welke versie dan ook) of iets als TailwindCSS te duiken. Persoonlijk vind ik de manier van schrijven van HTML/CSS wat deze frameworks promoten oerlelijk, ook zitten er fikse nadelen aan.

- Voor beginners doet het zoveel dat het onduidelijk is waar/hoe een probleem opgelost moet worden (moet een bootstrap class op of moet dit in normaal CSS, en is mijn normale CSS de reden dat het niet werkt of implementeren ik bootstrap verkeerd).
- Voor gevorderden zit het eigenlijk alleen maar in de weg met nutteloze/onjuiste formatting bij het implementeren van designs.

Bootstrap is overigens net zoals jQuery op zijn retour

EDIT: the URL formatter bugged: dit is de url: https://trends.google.com...te=all&q=jquery,bootstrap

Ik moet een beetje nadenken bij het advies voor NodeJS, maar eigenlijk maakt het wel sense. In essentie is PHP nog de taal to go voor beginners (makkelijke instroom, supersimpel te deployen, grote community). Maar als je toch al begint met JavaScript leren kan je net zo goed die kennis meenemen. En in 2020 is er ook genoeg te vinden over hoe je een NodeJS project deployed.

Mijn laatste tip, houd het leuk voor jezelf. Negeer alls wat hierboven staat als jij plezier haalt uit een andere route*, iets dat je leuk vind leer je het snelst.

*Met uitzondering van dingen die security issues geven.

Heel veel plezier gewenst!

[ Voor 3% gewijzigd door Ed Vertijsment op 08-10-2020 10:16 ]

[Tom]

TomsDiner schreef op woensdag 7 oktober 2020 @ 23:38:
[...]

Het levert in mijn beleving een laagdrempeliger manier om zaken te bereiken op, wat misschien voor starters makkelijker is. Maar het is misschien ook net waar de nadruk op gelegd wordt. Vindt je grafisch klooien belangrijker dan kennis en performance, dan zou ik zeker jQuery gebruiken. Wil je oldskool werken zonder dependancies om gewoon je skills te verbeteren, en gaat het dus meer om code/performance, dan zou ik geen hulp van frameworks zoeken.

Overigens zou ik het voor een starter nog bonter maken. Ga spelen met bootstrap (dan heb je al jQuery), omdat responsiviteit één van de eerste zaken is die je moet gaan begrijpen met een eigen layout.

Het punt is dat het een beetje achterhaald is. Vroeger kon je dingen in jQuery in één regel waar je destijds nog tien regels JavaScript (om alles ook cross-browser te laten werken) voor nodig had. Het scheelde een hoop regels code en veel tijd aan debuggen. Dat is al een hele tijd niet meer, voor de meeste functies in jQuery is er een vergelijkbaar alternatief in JavaScript dat qua complexiteit erg vergelijkbaar is en in alle browsers werkt.

Dat is wellicht ook het probleem met al die libraries. Veel gebruikers willen gemak en blijven dus bij de onderliggende techniek weg. Idem met Bootstrap, hoewel ik daar nooit fan van ben geweest, was het kennelijk makkelijk bij responsive maken van je site. Maar als je eenmaal weet hoe Flexbox en CSS Grid werken dan heb je het helemaal niet nodig.

[Postman]

RoelZ schreef op donderdag 8 oktober 2020 @ 10:11:
De reden dat ik refereerde naar Bootstrap 5 is eigenlijk omdat hier duidelijk wordt dat jQuery passé is en je (als beginnend developer) niet meteen iets aanleert wat, nadat je het onder de knie hebt direct naar de volgende versie moet overstappen.

Los hiervan ben ik zelf al begonnen met v5 en zijn ze eigenlijk al heel ver. Er zullen (naar eigen zeggen) geen grote zaken meer veranderen tot aan de RC en Final. De documentatie is daarmee ook (imo meer dan) voldoende om er aan te beginnen.

Wist niet dat ze al zo ver waren met v5, ook maar eens naar gaan kijken dan. Zeker het ontbreken van een jQuery dependency klinkt als erg interessant.

En trouwens leuk al die trends maar het zegt mij niks. Volgens die trend is namelijk Android ook op zijn retour, gaan we dan binnenkort massaal over op Symbian ofzo?

[RoelZ]

Helemaal waar, enkel Google Trends bekijken geeft geen eerlijk beeld. Daarbij zul je ook altijd rekening moeten houden met het Gartner Hype Cycle, iets wat ook duidelijk geïllustreerd wordt in het artikel dat @DJMaze linkt.

Meestal worden er meer zaken zoals repo downloads, stars, activiteit en filed issues meegenomen.

[BramCoding]

Hulpvolle tips terug en leuk om alles te lezen.

Nog een extra vraagje: PHP en JavaScript verschillen respectievelijk dat ze server side en client side zijn. Als ik dan een deeltje quote uit @Ed Vertijsment zijn post:

Ik moet een beetje nadenken bij het advies voor NodeJS, maar eigenlijk maakt het wel sense. In essentie is PHP nog de taal to go voor beginners (makkelijke instroom, supersimpel te deployen, grote community). Maar als je toch al begint met JavaScript leren kan je net zo goed die kennis meenemen. En in 2020 is er ook genoeg te vinden over hoe je een NodeJS project deployed.

Hier haal je aan dat als ik PHP zou leren dat ik evengoed JavaScript kan meenemen. Is dit eerder een of-verhaal of een en-verhaal. Daarmee bedoel ik: gebruik je meestal of PHP of JavaScript in je websiteproject, of worden die veelal naast elkaar gebruikt?

En als laatste: is het enige wat ik nodig heb om (lokaal) wat te experimenteren een webserver die lokaal draait? Deze zet dan de HTML, CSS en PHP om naar een lokale, werkende website? Als ik het goed heb duid het client side deel van JavaScript dan ook op het feit dat er geen webserver voor nodig is, maar gewoon een webbrowser?

[mr.paaJ]

PHP en Javascript is meestal side-by-side: backend/frontend.
Je kan in plaats van php ook backend javascript gebruiken die de html genereert. dat staat dan weer los van javascript voor frontend.

zoek op tutotials met LAMP, WAMP(?) of MAMP (resp: linux, windows(?) of mac) om je lokale site draaiende te krijgen.

Als je je op frontend wil focussen, pak dan een cms en bewaar dat backend onderzoek voor een andere keer. Daar komt zoveel bij kijken waar je van tevoren niet over nadenkt en er is genoeg goeds te vinden, van Wordpress (kant en klaar pluginnen met snel resultaat) tot Twill (doe verder zelf je ding met Laravel).

Wordpress als CMS en je eigen thema maken is een leuke, overzichtelijke en snelle start, naar mijn mening. Goede community en snel resultaat. Dan kun je helemaal losgaan met html templates en je eigen scss dingen maar kun je makkelijk nieuwe content maken (tien portfoliopagina's in php/html aanpassen omdat de layout net wat anders moet wordt snel vervelend)

[ Voor 93% gewijzigd door mr.paaJ op 08-10-2020 23:20 . Reden: . ]

[Postman]

BramCoding schreef op donderdag 8 oktober 2020 @ 21:07:
Hier haal je aan dat als ik PHP zou leren dat ik evengoed JavaScript kan meenemen. Is dit eerder een of-verhaal of een en-verhaal. Daarmee bedoel ik: gebruik je meestal of PHP of JavaScript in je websiteproject, of worden die veelal naast elkaar gebruikt?

Je haalt hier wat zaken door elkaar (en ja sinds server side JavaScript is dit ook verwarrend, dus logische fout). JavaScript kan zowel client als server side draaien. Client moet je het zien als een front-end taal, immers de back-end kan hier eigenlijk niet rechtstreeks bij (met goede redenen). De tussenlaag van client naar server is immers je browser.
Node.js is de server side variant van JavaScript. Ik zou dat echter even vergeten, en ook PHP nog even links laten liggen.

Zoals al meerdere malen aangeraden is het beter om je te focussen of 1 techniek. In dit geval zou ik het willen uiten als front-end en back-end. Nu is een back-end alleen vrij lastig te tonen in een showcase of demo, dus blijf in het begin aub bij front-end. Volg wat tutorials in HTML, CSS en JS. Ga hier mee door totdat je echt een site kunt maken die uit meerdere pagina's bestaat en vloeiend overgaat en er ook netjes en modern uitziet.

Kies eventueel daarna voor een framework als Bootstrap, TailwindCSS, etc. Nogmaals dit blijft allemaal front-end. Pas als je dit echt onder de knie hebt kun je overgaan naar back-end.
Mocht je echt zoiets hebben van 'ja nu ken ik het wel, en die frameworks voegen niets toe' dan kun je deze stap overslaan.

Voor tutorials is er YouTube. Ga niet code copy/pasten aub. Probeer een soort van spiergeheugen op te bouwen, ja het is vervelend om telkens alles opnieuw te typen, maar alleen zo leer je er van. Gebruik bij voorkeur Notepad++ om je code in te schrijven. Een IDE is leuk, maar code completion leert je niets. Zelf typen en fouten maken is hoe je iets leert.
Kijk ook even bij Udemy voor cursussen. Er zijn legio plaatsen waar je coupons kunt krijgen voor gratis cursussen daar, echter ze hebben een 30 dagen niet goed, geld terug beleid en dat doen ze echt netjes hoor. En zo zijn er nog wel meer plaatsen waar je cursussen kunt volgen.

En dit is een vervelende, want niemand vind het leuk zich aan de regels te houden, maar ga aub volgens code conventies te werk. Dit is niet alleen voor jezelf makkelijker, ook in het geval van problemen gaat dit je helpen. Onleesbare code kan niemand debuggen, en iets wat je nu typed ben je over 6 maanden compleet vergeten. Zonder conventie snap je er dan zelf ook niets meer van.

En als laatste: is het enige wat ik nodig heb om (lokaal) wat te experimenteren een webserver die lokaal draait? Deze zet dan de HTML, CSS en PHP om naar een lokale, werkende website? Als ik het goed heb duid het client side deel van JavaScript dan ook op het feit dat er geen webserver voor nodig is, maar gewoon een webbrowser?

Je kunt voor een lokale development server gebruik maken van de (L)AMP stack: (Linux) Apache MySQL/MariaDB PHP. XAMPP is hiervoor een veel gebruikte manier (Perl kun je ook overslaan in dat geval). PHP heb je voorlopig niet nodig, maar het is leuk dat het er al is.
Met deze setup zou je een configuratie krijgen die je bij werkelijk elke hosting provider in de wereld ook krijgt. Pas wel op dat (vooral Chrome heeft hier erg vaak last van) je met localhost (want daar draait je lokale server nu eenmaal op) nogal eens tegen CORS problemen aanloopt, ook met JavaScript. Nu verwacht ik dat je dit niet snel zult meemaken met alleen JS voor de front-end, maar toch beter gewaarschuwd dan niet.
JavaScript word in dit geval inderdaad aan de client side geparsed, een basic HTML, CSS en JS pagina kun je zelfs zonder server in je browser openen en zal werken.
Node.js is een voorbeeld van server side JavaScript, net zoals dus PHP aan de server kant alles doet.

[BramCoding]

Zeer interessante post @Postman , waarvoor dank!

Ik begin met het front-side verhaal. Ik ging er eigenlijk van uit dat je meteen front-en backend door elkaar moest nodig had, ook in de beginnende stappen.

Nog snel eens een misschien 'domme' vraag: vanaf wanneer heb je dan juist een back-end gedeelte nodig, aangezien mij nu aangeraden wordt te beginnen met front-end only?
Hiermee bedoel ik: wat kan ik bijvoorbeeld niet in front-end doen waarvoor je back-end gaat doen? Mijn eerste projectje wat ik nu zal maken zal wat verschillende pagina's hebben, informatie, foto's, ... en wil ik er wat modern uit laten zien. Maar wat zou deze niet kunnen omwille van het (voorlopig) missen van back-end technologie?

Als je zowel JavaScript kan front-enden als back-enden (via Node.JS), waar zit hem dat het verschil?

Of is dit een veel te open vraag waar moeilijk antwoord op geboden kan worden?

[mcDavid]

BramCoding schreef op vrijdag 9 oktober 2020 @ 13:15:
Zeer interessante post @Postman , waarvoor dank!

Ik begin met het front-side verhaal. Ik ging er eigenlijk van uit dat je meteen front-en backend door elkaar moest nodig had, ook in de beginnende stappen.

Nog snel eens een misschien 'domme' vraag: vanaf wanneer heb je dan juist een back-end gedeelte nodig, aangezien mij nu aangeraden wordt te beginnen met front-end only?
Hiermee bedoel ik: wat kan ik bijvoorbeeld niet in front-end doen waarvoor je back-end gaat doen? Mijn eerste projectje wat ik nu zal maken zal wat verschillende pagina's hebben, informatie, foto's, ... en wil ik er wat modern uit laten zien. Maar wat zou deze niet kunnen omwille van het (voorlopig) missen van back-end technologie?

Als je zowel JavaScript kan front-enden als back-enden (via Node.JS), waar zit hem dat het verschil?

Of is dit een veel te open vraag waar moeilijk antwoord op geboden kan worden?

Voor een website die puur informatief is, heb je in principe helemaal geen backend code nodig. Het is pas noodzakelijk als je website interactief wordt. Bijv gebruikers kunnen iets opslaan (bijv een forumpost zoals hier op tweakers), of je hebt een contactformulier, etc.

Ook als je de website vaak update, kan het gebruiksvriendelijker zijn om een CMS (= backend code) te gebruiken dan steeds handmatig de HTML-bestanden aan te passen.

[BramCoding]

mcDavid schreef op vrijdag 9 oktober 2020 @ 14:34:
[...]


Voor een website die puur informatief is, heb je in principe helemaal geen backend code nodig. Het is pas noodzakelijk als je website interactief wordt. Bijv gebruikers kunnen iets opslaan (bijv een forumpost zoals hier op tweakers), of je hebt een contactformulier, etc.

Ook als je de website vaak update, kan het gebruiksvriendelijker zijn om een CMS (= backend code) te gebruiken dan steeds handmatig de HTML-bestanden aan te passen.

Bedankt voor de informatie. CMS is op dit moment nu wel uitgesloten, aangezien bijleren hier number one goal is.
Kan je de broncode van bijvoorbeeld een WordPress verkrijgen, om daar eventueel ook iets uit te leren? Anders kan het misschien interessant zijn om eens te evalueren nadat ik mijn weg wat gevonden heb

[mcDavid]

Wordpress is open-source ja. Maar als je een goed voorbeeld zoekt om van te leren zou ik iig niet naar Wordpress kijken.

Als het je puur om front-end code gaat kun je natuurlijk op iedere website op F12 drukken.

[Postman]

Ik sluit mij aan bij @mcDavid dat je voor voorbeeld source niet bij WordPress moet zijn.

Zodra je toe bent aan back-end d.m.v. een CMS zijn er genoeg tutorials te vinden daarvoor.

Maar ik zou je nogmaals willen adviseren om niet te hard van stapel te lopen. Je kunt wel van alles tegelijk willen, uiteindelijk raak je gefrusteerd omdat het niet werkt en ook zul je merken dat het vinden van hulp steeds lastiger word. Dat laatste klinkt misschien tegenstrijdig, maar hoe breder je aanpak, hoe breder het probleem. En dan is een oplossing soms lastig te vinden (jij denkt immers dat het uit kant A of B komt, foutmeldingen hinten misschien nog op kant C, D of E, terwijl het echte probleem ergens rond K t/m Z zit).

[RoelZ]

@BramCoding hopelijk ben je inmiddels al lekker op weg met je eerste code! Ik ben benieuwd wat je huidige setup/aanpak is. Welke editor gebruik je of anders gezegd, hoe typ je jouw eerste HTML en CSS nu bijvoorbeeld?
En wie of wat begeleid je in deze eerste stappen.
Voelt het al meteen goed of juist ongemakkelijk aan?

Daarnaast wil ik de reacties/adviezen van @mcDavid en @Postman nog even versterken, gezien deze adviezen imo echt belangrijk zijn om in dit begin op te volgen.
Stoei gewoon lekker met je (waarschijnlijk) huidige aanpak en maak die website die je voor ogen hebt (zover back-end) en ben dan ook trots op wat je hebt gemaakt!

Mocht je over een ruime tijd naar mogelijkheden zoeken zoals het (voor jou als content beheerder) eenvoudiger aanmaken van een nieuwe pagina (dus geen copy/paste van je hoofdmenu en footer bv.) , het behouden van overzicht in je code, het niet moeten herhalen van vele zaken, het bieden van mooie URLs, het niet continu hoeven te uploaden van al je bestanden middels FTP naar je webhost provider, etc, etc 😉

...dan (maar alleen als je je echt lekker voelt bij je nieuw vergaarde HTML, CSS en eventueel JavaScript kennis) bekijk de mogelijkheden voor je back-end keuzes eens.

Gezien je zelf al een paar keer Wordpress noemt, zou ik toch alsnog graag willen benadrukken om hier ver weg van te blijven. Ook als je toe bent aan een back-end oplossing. Er zijn legio pro's en con's te noemen, maar imo wordt WP door zoveel mensen met verschillende achtergronden/kennis gebruikt waardoor je heel snel zoek raakt in de tal van mogelijke oplossingen voor één probleem.
Daarbij is (imo) de documentatie te onoverzichtelijk en kies je als nieuwe frontender anno 2020 voor een ouderwetse oplossing.

Nogmaals, dit is mijn mening... dus lees het ajb ook zo 😉

Mocht je jezelf ooit ready voelen voor de next step, begin dan een nieuw draadje of DM me mocht je wat opties willen afzetten tegen elkaar.


Heel veel plezier, ik ben benieuwd naar je eerste pagina('s)!

P.s. vergeet mijn eerste vragen niet 😁

P.p.s. een website een moderne look and feel geven is het eindresultaat wat voort komt uit wat jij maakt met HTML, CSS en eventueel JavaScript. Dit kan dus net zo goed zonder frameworks of backend oplossingen gerealiseerd worden.
Dit laatste kan (en zal) al je werkzaamheden versnellen, maar daardoor verlies je wel een bepaald inzicht wat je juist in het begin nodig hebt om een goede (zelfverzekerde) frontender te worden.

[ Voor 9% gewijzigd door RoelZ op 11-10-2020 20:05 . Reden: Mobile autocorrect ]

[BramCoding]

@RoelZ bedankt voor de post!

Nog niet echt begonnen, nog geen tijd gehad/vrij gemaakt. Ik gebruik om te beginnen Visual Studio Code omdat ik daar al wat ervaring mee heb en ik het prettig werken vind. Begeleid word ik door een machtig, maar soms onverstaanbaar persoon Mr Google. Ook Youtube vind ik interessant om wat dingetjes uit te pikken.

Ik ga me wel volledig focussen op HTML, CSS en JavaScript, en (nog) geen frameworks. Ik wil de basics leren en ook verstaan hoe alles werkt. Feels the right way to go.

Eenmaal ik wat gevorderd ben zal ik eens tonen wat het geworden is.

[DJMaze]

RoelZ schreef op zaterdag 10 oktober 2020 @ 07:14:
Ook als je toe bent aan een back-end oplossing. Er zijn legio pro's en con's te noemen, maar imo wordt WP door zoveel mensen met verschillende achtergronden/kennis gebruikt waardoor je heel snel zoek raakt in de tal van mogelijke oplossingen voor één probleem.
Daarbij is (imo) de documentatie te onoverzichtelijk en kies je als nieuwe frontender anno 2020 voor een ouderwetse oplossing.

Voor gevorderden: met uri hash/routering kan je 1 html pagina gebruiken met <template> elementen.
Fetch je de JSON van de server en render je via JavaScript met een template.
Dan ben je de HTML/JavaScript master, is het dynamisch en heb je nog steeds geen servertaal nodig
Nog leuker als je JavaScript objecten via Proxy gebruikt.

[ Voor 3% gewijzigd door DJMaze op 12-10-2020 20:16 ]

[armageddon_2k1]

@DJMaze Ik heb je nu al een paar keer over Proxy gehoord. Ik kende het niet dus had het even op MDN opgezocht. Gebruik je het veel en waar gebruik jij get dan voor? Het lijkt me handig, maar aan de andere kant ook wel een gevaarlijke oplossing welke debuggen erg lastig maakt waar vaak gewoon een logisch alternatief voor is.

[DJMaze]

@armageddon_2k1

offtopic:
Als je applicaties maakt in JavaScript, wil je vaak een wijziging van een object property weten.
Bij html elementen is het simpel met event listeners (oninput, onchange, etc).
Maar doe je bijvoorbeeld input.value = '' dan zijn er geen events (je programma doet het, niet de gebruiker).
In veel talen heb je dus getters en setters in veel vormen.
JavaScript heeft ook getters en setters, maar deze zijn niet altijd handig. De verbeterde versie met meer mogelijkheden is dus de Proxy. Deze gooi je gewoon 1,2,3 over je object heen zonder dat je het oorspronkelijke object verkloot/aanpast.

Ik zal binnenkort een demo online zetten waarbij ik Zope's TAL gebruik in JavaScript.

[ Voor 7% gewijzigd door DJMaze op 12-10-2020 22:00 ]

[RoelZ]

@DJMaze , ook al is dit off-topic is dit zeker interessant.

Wellicht kunnen we een apart topic beginnen om dit soort dingen te bespreken.
Als we dan wat richtlijnen aanhouden kunnen we potentieel elkaar en andere voorzien van nieuwe inzichten.

Like dit bericht maar mocht je hier animo voor hebben 👍🏼