Door
Ozzie PHP
op 16-06-2017 22:03
gewijzigd op 16-06-2017 22:15
4.983 views
Hey allemaal,
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?
Ik zie deze verschuiving ook steeds meer. Ik denk dat je het moet zien als het snel omzetten van een website naar HTML/CSS dan is de makkelijkste stap om een framework te kiezen. In de meeste gevallen zal er worden gekozen voor Bootstrap of Foundation. Dit werkt lekker snel en er zijn goede documentaties beschikbaar, tevens zitten er al goede JS modules in.
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.
>> 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?
Ik heb het gebruik van een CSS library nog nooit gesnapt. Ik zie het zo: diegene die een CSS library zoals Bootstrap of Foundation heeft gewoon te weinig verstand van CSS/HTML. Nu wordt er een beetje gekopieerd en geplakt, en leren mensen niet eens de basis van CSS/HTML. Hoe vaak zie je hier wel niet 'noob' vragen over CSS/HTML terwijl het vaak basis dingen zijn.
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).
[size=xsmall]Toevoeging op 19/06/2017 14:23:04:[/size]
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.
[size=xsmall]Toevoeging op 19/06/2017 14:47:57:[/size]
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????
>> Ik heb het gebruik van een CSS library nog nooit gesnapt. Ik zie het zo: diegene die een CSS library zoals Bootstrap of Foundation heeft gewoon te weinig verstand van CSS/HTML.
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
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
>> 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
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
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.
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..
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.
>> ik zie bijna alleen maar basis CSS/HTML vaardigheden in deze website op een aantal animaties na dan.
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?
Ik vind dat er allerlei zaken door elkaar worden gehaald hier en in 1 topic worden gestopt.
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.
