de toekomst ...
Het valt me op dat er steeds meer websites komen met een (in grote lijnen) uniforme look. Een grote schermvullende banner bovenin en dan daaronder dan bijvoorbeeld een lay-out gebaseerd op 3 kolommen. Vermoedelijk heeft dit te maken met Twitter Bootstrap. Zelf ben ik niet gewend om bij het ontwikkelen van sites een framework te gebruiken, maar veel sites gebruiken tegenwoordig (als ik de broncode bekijk) vele framework/libraries, zowel voor CSS en JS.
Mijn vraag ... of sowieso een interessante discussie ... is de techniek aan het veranderen? Wordt er inderdaad steeds meer gebruikgemaakt van frameworks/libraries? Kun je er niet meer omheen? Soms zie ik sites die wel 10 css bestanden en 10 js bestanden inladen. Vroeger was dat een doodzonde, maar het lijkt nu steeds normaler te worden????
En, last but not least, welke frameworks/libraries zijn het meest gangbaar? Als ik bijv. 1 library/framework voor css en 1 voor js wil gebruiken, want zijn dan de meest handige/nuttige opties?
Ben benieuwd naar de reacties ...
Gewijzigd op 16/06/2017 22:15:52 door Ozzie PHP
Ook zijn deze frameworks responsive gericht. Dit scheelt veel media-rules en hierdoor ben je dus weer een stuk sneller.
Nadeel is dus dat je er veel van niet gaat gebruiken. (veel CSS/JS links), tevens maakt iedereen gebruikt van de standaard grid, hierdoor krijg je veel 'dezelfde' websites.
Een leuke verandering voor de komende tijd is misschien wel dat er een CSS3 nu ook een gridsysteem zit. Deze word alleen nog niet ondersteund.
Gewijzigd op 19/06/2017 12:22:01 door Jan Graneker
>> In de meeste gevallen zal er worden gekozen voor Bootstrap of Foundation.
Zijn deze beide gratis, en als je er eentje zou moeten kiezen (om te gaan leren) welke zou het dan zijn?
>> tevens zitten er al goede JS modules in.
Wat bedoel je daar mee? Net zoiets als jQuery?
>> tevens maakt iedereen gebruikt van de standaard grid, hierdoor krijg je veel 'dezelfde' websites.
Dat valt mij dus inderdaad ook op. Maar als er standaard al veel functionaliteit in zit, en veel websites gebruiken die functionaliteit ook ... dan loop je dus wellicht achter als je niet zo'n framework gebruikt. Wat denk jij?
JavaScript is een heel ander punt, dan zit je veel meer met crossbrowser en verschillende Javascript engines. Dan komt een library zoals jQuery erg goed van pas (al hoewel de nieuwste jQuery versies niet alle browsers meer ondersteunen zoals de verouderde IE).
Toevoeging op 19/06/2017 14:23:04:
Jan Graneker op 19/06/2017 12:14:40:
Ook zijn deze frameworks responsive gericht. Dit scheelt veel media-rules en hierdoor ben je dus weer een stuk sneller.
Veel sneller? Vind Bootstrap of Foundation veel omslachtiger en vaak heb je meer HTML elementen en classes nodig dan nodig is.
Toevoeging op 19/06/2017 14:47:57:
Ozzie PHP op 16/06/2017 22:03:22:
Het valt me op dat er steeds meer websites komen met een (in grote lijnen) uniforme look. Een grote schermvullende banner bovenin en dan daaronder dan bijvoorbeeld een lay-out gebaseerd op 3 kolommen. Vermoedelijk heeft dit te maken met Twitter Bootstrap. Zelf ben ik niet gewend om bij het ontwikkelen van sites een framework te gebruiken, maar veel sites gebruiken tegenwoordig (als ik de broncode bekijk) vele framework/libraries, zowel voor CSS en JS.
Mijn vraag ... of sowieso een interessante discussie ... is de techniek aan het veranderen? Wordt er inderdaad steeds meer gebruikgemaakt van frameworks/libraries? Kun je er niet meer omheen? Soms zie ik sites die wel 10 css bestanden en 10 js bestanden inladen. Vroeger was dat een doodzonde, maar het lijkt nu steeds normaler te worden????
Mijn vraag ... of sowieso een interessante discussie ... is de techniek aan het veranderen? Wordt er inderdaad steeds meer gebruikgemaakt van frameworks/libraries? Kun je er niet meer omheen? Soms zie ik sites die wel 10 css bestanden en 10 js bestanden inladen. Vroeger was dat een doodzonde, maar het lijkt nu steeds normaler te worden????
Powered by WordPress :-)
Gewijzigd op 19/06/2017 14:48:20 door Joakim Broden
Ik snap wat je bedoelt, maar levert zo'n framework niet een betere "basis" dan dat je zelf zou kunnen maken? Ik was vroeger ook niet van de frameworks, maar ik zie het nu zo vaak terugkomen dat ik begin te twijfelen. En als het makkelijk responsive wordt, lijkt me dat ook wel handig.
>> Powered by WordPress :-)
Oh ja, is dat WordPress die al die bestanden inlaadt? :-s
Ozzie PHP op 19/06/2017 18:05:17:
Ik snap wat je bedoelt, maar levert zo'n framework niet een betere "basis" dan dat je zelf zou kunnen maken? Ik was vroeger ook niet van de frameworks, maar ik zie het nu zo vaak terugkomen dat ik begin te twijfelen. En als het makkelijk responsive wordt, lijkt me dat ook wel handig.
Als je gewoon de basis leert van CSS/HTML kun jezelf ook gemakkelijk even een reset CSS schrijven die je elke keer weer opnieuw kunt gebruiken zonder al die overbodige troep die je met die libraries krijgt.
Ozzie PHP op 19/06/2017 18:05:17:
Oh ja, is dat WordPress die al die bestanden inlaadt? :-s
Ja, elke plug-in laad zijn eigen CSS/JavaScript in ipv dit netjes in 1 bestand te zetten. Lang leven copy-past-install :D
Dat snap ik inderdaad ... maar ik zie veel sites die een soort van standaard menu hebben als je ze verkleint naar mobiel formaat. Dat lijkt inmiddels een soort van algemene 'afspraak' te zijn geworden.
Even zomaar een voorbeeldje gezocht van een internetbedrijf: https://www.brancom.nl/
Als je dit verkleint krijg je links bovenin zo'n menukopje, en dat zie ik tegenwoordig bij heel veel sites terugkomen. Deze site bevat daarnaast veel visuele elementen waarvan ik denk dat ze onderdeel zijn van een library/framework. Als je dat handmatig moet maken, lijkt me dat aardig pittig.
>> Ja, elke plug-in laad zijn eigen CSS/JavaScript in ipv dit netjes in 1 bestand te zetten. Lang leven copy-past-install :D
Oeiii, da's dan niet zo netjes :-s
Ozzie PHP op 20/06/2017 16:46:40:
Dat snap ik inderdaad ... maar ik zie veel sites die een soort van standaard menu hebben als je ze verkleint naar mobiel formaat. Dat lijkt inmiddels een soort van algemene 'afspraak' te zijn geworden.
Even zomaar een voorbeeldje gezocht van een internetbedrijf: https://www.brancom.nl/
Als je dit verkleint krijg je links bovenin zo'n menukopje, en dat zie ik tegenwoordig bij heel veel sites terugkomen. Deze site bevat daarnaast veel visuele elementen waarvan ik denk dat ze onderdeel zijn van een library/framework. Als je dat handmatig moet maken, lijkt me dat aardig pittig.
Even zomaar een voorbeeldje gezocht van een internetbedrijf: https://www.brancom.nl/
Als je dit verkleint krijg je links bovenin zo'n menukopje, en dat zie ik tegenwoordig bij heel veel sites terugkomen. Deze site bevat daarnaast veel visuele elementen waarvan ik denk dat ze onderdeel zijn van een library/framework. Als je dat handmatig moet maken, lijkt me dat aardig pittig.
Aardig pittig?? Ik zie hier geen pittige dingen, ik zie bijna alleen maar basis CSS/HTML vaardigheden in deze website op een aantal animaties na dan. Geef me 8 uurtjes en ik heb deze complete website in CSS/HTML nagebouwd... :-)
Dat bedoel ik, als je de basis kent kun je al heel veel. Maarja tegenwoordig met al die libraries/frameworks knippen plakken mensen alles maar in elkaar en kunnen ze zelf geen simpele CSS/HTML dingen meer fixen. Hier kun je je dus als 'front-ender' van onderscheiden met anderen.
Ozzie PHP op 20/06/2017 16:46:40:
Oeiii, da's dan niet zo netjes :-s
Als ervaren WordPresser kun je dat wel fixen en leuke websites bouwen. Maar als ik voor een opensource CMS moet kiezen zou ik MODX gebruiken..
Joakim Broden op 20/06/2017 17:01:14:
Aardig pittig?? Ik zie hier geen pittige dingen, ik zie bijna alleen maar basis CSS/HTML vaardigheden in deze website op een aantal animaties na dan. Geef me 8 uurtjes en ik heb deze complete website in CSS/HTML nagebouwd... :-)
Whahaha, zo herkenbaar! Dezer dagen verdien ik er een aardige boterham bij (dus de kaas erop, zeg maar), met het verbouwen van WordPress-maaksel met 28 CSS-bestanden en 30 JavaScript-bestanden tot AMP-pagina's die op 1 staan bij Google.
Niet dat AMP dan per se dé oplossing voor alles is. Maar de toekomst ziet er wel duidelijk anders uit dan dit gepruts waarbij iedereen die WordPress kan unzippen zich een front-end developer noemt en een simpele website alleen nog via glasvezel voor menselijke consumptie geschikt is. En de vraag ging over de toekomst immers.
Dat was eigenlijk vooral wat ik bedoelde. Komt dat ook uit zo'n css framework, of is het custom?
>> En de vraag ging over de toekomst immers.
Exact! ... maar wat is dan die toekomst? Internet wordt steeds sneller, dus van het (onnodig) inladen van veel bestanden, merkt de gebruiker steeds minder.
Wat is dan op dit moment de 'juiste' manier om een website vorm te geven? Plain html/css? Gebruik van een framework als bootstrap? Sass, LESS??
Gebruik je dat AMP eigenlijk voor je hele website, of alleen voor mobiele versies? En wat is (globaal) het verschil met normale html?
Ten eerste denk ik niet dat het de toekomst is, ik denk dat het heden nu al zo is. In veel professionele omgevingen zijn zulke frameworks niet meer weg te denken. Waarom? Nou, net als bij PHP. Maintainability en ontwikkeltijd.
Je kan er een hoop mee, veel is al bedacht dus je hoeft niet opnieuw het wiel uit vinden en als er mensen worden vervangen dan is het voor hun ook bekender terrein dan dat ze in 'framework' moeten duiken welke intern helemaal in elkaar is geknutseld.
Veel CSS en JS bestanden hoeft niet per definitie slecht te zijn. Ligt er ook aan waar ze worden gehost, als het bijvoorbeeld CDN werk is zal de gebruiker er vaak niet veel van merken als het een populair iets is. Natuurlijk is het mooist als je het minified en uglified in 1 bestand gooit. Compressie op je verbinding en gaan.
Bootstraps, sass, less, gulp, webpack. Het zijn allemaal dingen met hun eigen doel. Vergeet dat niet in deze discussie. Hier op werk doen we de front-end ook met al deze tools.
1) Bootstrap -> Handig om al veel functionaliteiten stand-by te hebben
2) Sass/Less -> Handig om je CSS files te genereren en via de variables eenduidig te beheren.
3) Gulp -> Gebruiken we om allerlei filter plugins te activeren, dingen te combineren, te minifyen en om cachebusting te hebben
4) Webpack -> Momenteel vooral voor reactJS. Maar alles wat we nu met GULP doen zou webpack ook moeten kunnen.
Er zijn een hoop tools en de markt van Front-end is een stuk bewegelijker dan die bijvoorbeeld van PHP. Ik zie een hoop frameworks ontstaan maar ook net zo hard weer verdwijnen, je moet de veranderingen een stuk beter in de gaten houden dan die bij PHP zelf.
Wat betreft Bootstrap en Sass/Less ... gebruik je dat door elkaar? Of gebruik je altijd maar een van beiden?
Over Bootstrap zeg jij: "Handig om al veel functionaliteiten stand-by te hebben"
Over wat voor functionaliteiten heb je het dan? Kun je voorbeelden geven?
Quote:
Mijn vraag ... of sowieso een interessante discussie ... is de techniek aan het veranderen?
Techniek veranderd altijd, de basis blijft hetzelfde.
Quote:
Wordt er inderdaad steeds meer gebruikgemaakt van frameworks/libraries?
Ja, maar het grote echte voordeel is dat je bijvoorbeeld makkelijk via composer kunt werken.
1 bestand inladen en je roept je classes aan wanneer je ze nodig hebt.
Quote:
Kun je er niet meer omheen?
Altijd, maar het hangt ook deels van het project af. Neemt dan als voorbeeld de Twig Template engine.
Kost even wat moeite om het te begrijpen, maar voor je het door hebt ga je je inhoud "opsplitsen", dus PHP door de Classes afhandelen en het HTML gedeelte stop je in TWIG bestanden.
De moeilijkheidsgraad zit hem er meer in: ga je netjes te werken houd je je vast aan de basis principes zoals het bedoelt is, uiteindelijk kun je er nog altijd "steeds omheen werken", maar is dit wenselijk?
Quote:
Soms zie ik sites die wel 10 css bestanden en 10 js bestanden inladen. Vroeger was dat een doodzonde, maar het lijkt nu steeds normaler te worden????
En dat is het eigenlijk nog steeds. Zeker seo technisch, het scheelt weer requests en dus laadtijd.
Zoals Remco al aangeeft:
Quote:
Bootstraps, sass, less, gulp, webpack. Het zijn allemaal dingen met hun eigen doel. Vergeet dat niet in deze discussie.....
Heeft alles een eigen doel, ik heb een tijdje geprobeerd van alles te combineren (waaronder ook bovengenoemde), maar uiteindelijk wordt je "geblokkeerd" door het uiteindelijke doel of wordt het zodanig complex, dat het eigenlijk nergens meer overgaat..(uit technisch oogpunt gezien dan).
Quote:
Wat betreft Bootstrap en Sass/Less ... gebruik je dat door elkaar?
Kan. Je moet goed begrijpen wat "bootstrap" is, en wat "sass" doet en wat "less" doet.
Meest simpele omschrijvng: Less is gewoon CSS, maar het grote voordeel hierbij is weer dat je "variabelen" kunt gebruiken.
Bootstrap is niks anders dan een GRID systeem. Het grote voordeel van dit "vrije grote pakket", is dat er eigenlijk voor alle situaties wel een oplossing is ( denk aan snel een formulier opbouwen ) maar door de juiste css classes krijg je vrij snel een oplossing voor mobile/tablet/desktops.
Ik ben afgestapt van al dat gedoe met less en sass, maar bootstrap zit er hard gebakken in.
Dit roep ik aan via een betrouwbare CDN ipv lokaal hosten ( want is gewoon sneller qua laadtijd ) .
Standaard gaat alles dus via composer, efficiënt, makkelijk en geeft voldoende vrijheid om mee te werken.
Gewijzigd op 21/06/2017 16:06:30 door E vH
Gewoon handige dingen die je niet telkens zelf wilt uitvinden.
Thanks. Ik wist niet dat bootstrap ook voor dit soort dingen werd gebruikt. Ik dacht dat het puur een grid systeem was.
Nu zie ik (via die link van jou) ook bijv. een carrousel. http://getbootstrap.com/javascript/#carousel
Lijkt bootstrap dan niet heel erg op jQuery ineens?
Quote:
Lijkt bootstrap dan niet heel erg op jQuery ineens
Ehm..
Volgens mij is jQuery onderdeel dat ingebakken zit in bootstrap.
Althans, je laad te jquery in, en vervolgens doe je daarmee de leuke dingen.
Dus op de vraag "de toekomst":
Ja, het word gemakkelijker gemaakt.
Let wel op, je moet nog steeds nadenken, en wat basics van html/javascript kennen om tot een goed resultaat te komen. Anders word het een rommeltje.
Als ik kijk naar bootstrap, dan heeft dat mij al vaak een hoop geholpen om snel iets in elkaar te zetten voor mensen. Ik ben best wel van een mooi strak design bedenken en erg creatief, maar als ik gewoon de basics kan gebruiken van bootstrap dan levert dat mij een stuk sneller resultaat op. Time is money zeg maar. :)
Dus als ik het goed begrijp, kun je bootstrap sowieso al niet gebruiken zonder jQuery?
En bootstrap heeft dan net als jQuery wat ingebakken grafische effecten zoals sliders e.d.?
Dus bootstrap is een soort combi van een grid met visuele effecten? Zoiets?
De bewering dat bootstrap zonder jquery niet werkt klopt niet.
Als je die extra componenten van javascript wil gebruiken heb je het wel nodig.
Maar om een layout in elkaar te bakken natuurlijk niet.
Gewijzigd op 22/06/2017 15:16:46 door Bart V B
>> De bewering dat bootstrap ... te bakken natuurlijk niet.
Ah oke, helder ;-)
Gewijzigd op 22/06/2017 15:19:22 door Ozzie PHP
http://getbootstrap.com/getting-started/
Als je daar nog geen simpel iets mee in elkaar bakt dan kan je beter gaan breien. ;0)
Het werkt heel gemakkelijk, en de examples geven al heel veel duidelijkheid.