CSS niet genoeg: steunen op HTML of JS?

[wannesdebacker]

jayvol09 schreef op donderdag 7 september 2017 @ 14:59:
Ik ben relatief nieuw in de webtech wereld en heb het een-en-ander geleerd over H/C/J. Maar nu merk ik dat er dingen zijn die gewoon niet mogelijk zijn in CSS qua layout, en dat vroeger vooral men greep naar HTML hacks zoals <table> of <div> wrappers om een layout werkend te krijgen. Ik heb al vrij snel een gevoel van afstoting gekregen: HTML moet schoon blijven.

Een andere optie in JS. Nu sta ik voor de keuze om deels CSS en deels JS te doen, of vol in te gaan op JS (+ JQuery, react, etc.) en dat gebrekkige CSS achterwege te laten. Wat doen jullie nu, en waarom?

Voorbeelden waar ik tegen aan loop:
- Onmogelijk om bepaalde elementen te selecteren in CSS zonder een class/ID eraan te hangen.
- Onmogelijk om bepaalde elementen responsief te schalen t.o.v. van andere elementen. Er is teveel logica nodig die niet kan worden beschreven met bestaande CSS.

Een enkel goed argument dat ik gehoord heb is dat JS nog te langzaam is op mobile. Maar ja, 5G komt eraan en nu heeft chrome JS modules (caching enzo). Ben benieuwd naar jullie denkprocess.

Beste ts

Leuk dat je je wil verdiepen in web-development. Je lijkt wel niet echt te snappen hoe het web werkt, maar dit is perfect oke als dummy. We zijn immers allemaal moeten beginnen.

Als ik je code echter bekijk zou ik eerst nog een cursus HTML en CSS doen, want dit is gewoon fout. Je lijkt niet helemaal te begrijpen wat het nut is van elke taal en wat er allemaal mogelijk is. Probeer niet te snel direct naar de libraries te springen.

Het is een extreem slecht idee om styling-logica in javascript te zetten. Je moet net zo weinig mogelijk in javascript doen. 90% van alles wat je ooit wil maken kan perfect zonder Javascript.

Bovendien zou ik als ik jou was gewoon eerst heel goed javascript leren schrijven voor te beginnen om je te 'specialiseren' in libraries zoals React of zelfs jQuery (jQuery kan wel springplank zijn).
Libraries veranderen immers constant en voor hetzelfde geld horen we volgend jaar niets meer van React (React is een goed idee, maar is nog niet klaar voor echt projecten in een productie-omgeving, JS-libraries = wilde westen (natuurlijk wordt dit al op grote schaal gebruikt binnen bedrijven maar dit lijkt me meer een keuze voor een hippe technologie tov een goed schaalbaar product waar je binnen een paar jaar geen spijt van de technologiekeuze hebt)).

Wat nadelen van alles in Javascript te willen doen.

- Gebruikers zonder JS (zoals ik) of binnen bedrijven waar JS wordt geblockt is zullen op je site niets zien (maakt niet uit dat het een minderheid is, je maakt nu eenmaal producten voor 100% van je gebruikers) en meer en meer mensen zetten hun JS uit.
- Trager, flashes of ugly content
- Single point of failure
- CSS is heel sterk in styling, en CSS en JS kunnen goed samenwerken (door het zetten van classes o.a.)
- ...

Ik zou zeggen: blijf je door-ontwikkelen als Web-developer, maar begin eerst met de basis. En durf ook raad van andere (ervaren) web-developers volgen. Neem zeker niet alles over wat je online (op stackoverflow bijvoorbeeld) aan, daar staat een hoop rommelcode op, zeker op web-vlak.

Als ik je commentaar lees ben je ook best arrogant tegen mensen die je proberen helpen, terwijl zij vaak heel goede punten bovenbrengen. Let hier wat op.

[Harrie_]

wannesdebacker schreef op dinsdag 3 oktober 2017 @ 13:57:
[...]
Wat nadelen van alles in Javascript te willen doen.
- Gebruikers zonder JS (zoals ik) of binnen bedrijven waar JS wordt geblockt is zullen op je site niets zien (maakt niet uit dat het een minderheid is, je maakt nu eenmaal producten voor 100% van je gebruikers) en meer en meer mensen zetten hun JS uit.

Eens met @wannesdebacker m.u.v. bovenstaande quote.

Anno 2017 hoort JS gewoon bij de standaard toolkit (HTML/CSS/JS). Het is inderdaad geen goed idee om 30 JS-libraries te gaan gebruiken maar om nou helemaal vrij te sturen van JS lijkt me ook niet echt de oplossing.

'Vroeger' was het inderdaad bij JS standaard-advies om hiermee op te passen omdat het weleens uit kon staan bij de client, maar dat is wel heel erg achterhaald. Als je tegenwoordig het web op wilt zonder JS dan blijven er nog maar weinig sites over die je normaal kunt viewen/gebruiken....

[Caelorum]

Harrie_ schreef op woensdag 4 oktober 2017 @ 13:32:
[...]
Eens met @wannesdebacker m.u.v. bovenstaande quote.

Anno 2017 hoort JS gewoon bij de standaard toolkit (HTML/CSS/JS). Het is inderdaad geen goed idee om 30 JS-libraries te gaan gebruiken maar om nou helemaal vrij te sturen van JS lijkt me ook niet echt de oplossing. [...]

Sturen op een javascriptloze pagina is zeker wel goed. Dat het niet gaat lukken is niet erg, maar zo min mogelijk javascript is gewoon common-sense. Vaak gaat het er ook gewoon beter van performen.

[Ramon]

@Caelorum Er zijn anders tegenwoordig hele volksstammen developers die React of gelijkwaardige javascript frameworks gebruiken en daarmee dus een afhankelijkheid van javascript introduceren. Waarmee ik maar wil zeggen dat de regels niet vast liggen en dat iedereen z'n eigen keuzes maakt op basis van zijn eigen variabelen en daarom is een theoretische discussie over html nogal nutteloos is wat mij betreft.

[Caelorum]

@Ramon nergens zeg ik niet doen, maar doe het zo min mogelijk. JavaScript engines zijn stukken sneller geworden, maar dan nog is niet js gebruiken sneller. Als jij een super fancy applicatie maakt in de browser dan leef je uit op react oid, maar als je een website maakt voor de bakker heb je het echt bijna niet nodig. En toch zie je ook bij die websites dat soms alles in elkaar is gehacked met js.

[Verwijderd]

ik heb dit topic gelezen en heb het gevoel dat ik terug moet komen op de topic start:

in html5 heb je sections, deze moet je 1 of meerdere classes geven.
in sections kan je het simpel houden (een sectie bestaat bijvoorbeeld uit een titel en een paragraaf en een lijst)

in CSS moet je selecteren om te stijlen:

Cascading Stylesheet:

section.class1.class2 p {
}

(dit selecteerd de paragraph uit section)

in js moet je selecteren om te triggerren:

JavaScript:

$.select('section.class.class2 p').on('load', function(){});

Dit kan natuurlijk ook op id basis. zonder id, of zonder class kom je er gewoon niet in een groot document. Geef het beestje een naam of id indien nodig.

als je dan met jezelf afspreekt dat sections classes gebruikt voor css en element classes voor js kom je een heel eind en gebruik het style attribuut van een element alleen via js. Wat jij wil (ts) is textnodes selecteren in een dom document. geeft het een tagname is de algemene regel om er css aan te hangen, z werkt het nu eenmaal.

[Verwijderd]

Ramon schreef op woensdag 4 oktober 2017 @ 21:36:
@Caelorum Er zijn anders tegenwoordig hele volksstammen developers die React of gelijkwaardige javascript frameworks gebruiken en daarmee dus een afhankelijkheid van javascript introduceren. Waarmee ik maar wil zeggen dat de regels niet vast liggen en dat iedereen z'n eigen keuzes maakt op basis van zijn eigen variabelen en daarom is een theoretische discussie over html nogal nutteloos is wat mij betreft.

Anno 2017 is js echt wel veilig, het enige wat kan gebeuren is dat de browser vast loopt of crashed. ja je kan er coins mee minen, maar of dat de reden moet zijn om anno 2017 javascript onafhankelijk te maken van browsen, elke moderne browser ondersteund het standaard. je moet er moeite voor doen om het uit te schakelen. je moet je goed afvragen wat je doelgroep is en daar kun je veel beter de moeite in stoppen dan de uitzonderingen < 3 %

[Harrie_]

Caelorum schreef op woensdag 4 oktober 2017 @ 21:25:
Sturen op een javascriptloze pagina is zeker wel goed. Dat het niet gaat lukken is niet erg, maar zo min mogelijk javascript is gewoon common-sense. Vaak gaat het er ook gewoon beter van performen.

Caelorum schreef op woensdag 4 oktober 2017 @ 21:45:
@Ramon nergens zeg ik niet doen, maar doe het zo min mogelijk. JavaScript engines zijn stukken sneller geworden, maar dan nog is niet js gebruiken sneller. Als jij een super fancy applicatie maakt in de browser dan leef je uit op react oid, maar als je een website maakt voor de bakker heb je het echt bijna niet nodig. En toch zie je ook bij die websites dat soms alles in elkaar is gehacked met js.

Daar heb je helemaal gelijk in. Ik was wellicht ook niet helemaal duidelijk maar met deze zinsnede

Harrie_ schreef op woensdag 4 oktober 2017 @ 13:32: Het is inderdaad geen goed idee om 30 JS-libraries te gaan gebruiken maar om nou helemaal vrij te sturen van JS lijkt me ook niet echt de oplossing.

impliciet te zeggen dat een pagina bestaat uit HTML + CSS en waar nodig / functionieel je dus JS kunt gebruiken. Bij een website voor de bakker is dat inderdaad wellicht 1 scriptje om een image scroller in de header te tonen...

[Harrie_]

Verwijderd schreef op woensdag 4 oktober 2017 @ 22:45:

in js moet je selecteren om te triggerren:

JavaScript:

$.select('section.class.class2 p').on('load', function(){});

No offense maar je begint met 'in JS' en vervolgens plak je er wat jQuery neer. Ik vind het persoonlijk erg vervelend dat die twee tegenwoordig door elkaar gebruikt worden en dat zoeken naar "howto ... in JS" steeds vaker jQuery-resultaten oplevert...

jQuery != JS

[Verwijderd]

Harrie_ schreef op donderdag 5 oktober 2017 @ 17:01:
[...]


No offense maar je begint met 'in JS' en vervolgens plak je er wat jQuery neer. Ik vind het persoonlijk erg vervelend dat die twee tegenwoordig door elkaar gebruikt worden en dat zoeken naar "howto ... in JS" steeds vaker jQuery-resultaten oplevert...

jQuery != JS

dit is ook geen jquery, maar priya see github.com/like-it/ en dat is trouwens eigen gemaakte code, vind ik persoonlijk mooier dat document.queryselectorall blah blah... geef het maar een naam, zou ik zeggen, nu is die ineens mooi gemaakt ?

[Verwijderd]

Verwijderd schreef op donderdag 5 oktober 2017 @ 19:51:
dit is ook geen jquery, maar priya see github.com/like-it/ en dat is trouwens eigen gemaakte code, vind ik persoonlijk mooier dat document.queryselectorall blah blah... geef het maar een naam, zou ik zeggen, nu is die ineens mooi gemaakt ?

Ik snap echt niet wat je hier probeert te zeggen...het is een beetje onsamenhangend.

[Verwijderd]

oh, dat gaat over dit :

JavaScript:

priya.prototype.select = function(selector){
   return document.querySelectorAll(selector);
}

[jayvol09]

Verwijderd schreef op woensdag 4 oktober 2017 @ 22:45:
...

in CSS moet je selecteren om te stijlen:
...
Dit kan natuurlijk ook op id basis. zonder id, of zonder class kom je er gewoon niet in een groot document. Geef het beestje een naam of id indien nodig.

...
Wat jij wil (ts) is textnodes selecteren in een dom document. geeft het een tagname is de algemene regel om er css aan te hangen, z werkt het nu eenmaal.

Klopt, ik ben gewend aan scripten waar een 'loop' over een brede selectie tot een specifieke selectie kan leiden. Ik ben ook gewend om GUIs programatisch te schrijven dus vandaar de aantrekking voor JS. Ik heb verder niets tegen tags, maar wat zou de wereld mooi zijn als ik rules met regexes kon maken.

[Harrie_]

jayvol09 schreef op vrijdag 6 oktober 2017 @ 04:04:
[...] maar wat zou de wereld mooi zijn als ik rules met regexes kon maken.

Moeten we die quote er weer ingooien over regexes?

Verwijderd schreef op donderdag 5 oktober 2017 @ 19:51:
dit is ook geen jquery, maar priya see github.com/like-it/ en dat is trouwens eigen gemaakte code, vind ik persoonlijk mooier dat document.queryselectorall blah blah... geef het maar een naam, zou ik zeggen, nu is die ineens mooi gemaakt ?

Verwijderd schreef op donderdag 5 oktober 2017 @ 21:19:
Ik snap echt niet wat je hier probeert te zeggen...het is een beetje onsamenhangend.

Verwijderd schreef op donderdag 5 oktober 2017 @ 23:00:
oh, dat gaat over dit :

JavaScript:

priya.prototype.select = function(selector){
   return document.querySelectorAll(selector);
}

Het wordt er niet heel veel duidelijker op. Maar als ik even je verhaal extrapoleer (los van het feit dat het hier gewoon ging over 'jQuery is niet hetzelfde als JS') dan bedoel je dus te zeggen dat je kennelijk gebruik maakt van een framework maar omdat je de JS syntax niet mooi vind gooi je er nog een keer jQuery overheen. Ik heb medelijden met de dev die in de toekomst aan jouw 'legacy-code' mag gaan sleutelen.

Misschien ook deze post teruglezen en de posts van @Caelorum voorafgaand

[ Voor 76% gewijzigd door Harrie_ op 06-10-2017 10:19 ]

[Caelorum]

@Harrie_ hij heeft een js framework gemaakt dat lijkt op jQuery zonder dat waar jQuery voor is gemaakt (werking over alle gangbare browsers gelijk)

[Harrie_]

@Caelorum Ik begrijp er niet zoveel van. Als ik die git-repo's van die link bekijk dan kom ik trouwens ook nergens JS tegen.

[Caelorum]

Harrie_ schreef op vrijdag 6 oktober 2017 @ 10:20:
@Caelorum Ik begrijp er niet zoveel van. Als ik die git-repo's van die link bekijk dan kom ik trouwens ook nergens JS tegen.

https://github.com/like-i.../Priya/Priya.prototype.js maar dit gaat wel erg offtopic zo

[incaz]

jayvol09 schreef op vrijdag 6 oktober 2017 @ 04:04:
Ik ben ook gewend om GUIs programatisch te schrijven dus vandaar de aantrekking voor JS. Ik heb verder niets tegen tags, maar wat zou de wereld mooi zijn als ik rules met regexes kon maken.

Ten eerste vind ik het wel wonderlijk dat je, na je vrij bevlogen pleidooi om echt absoluut geen onnodige dingen in de html te stoppen, nu uit zou gaan van wat makkelijk voor jou is en niet wat principieel de juistere methode is.

Daarnaast ben ik benieuwd welk probleem je met regexes denkt op te lossen, want die neiging heb ik in 15 jaar websites bouwen echt nog nooit gehad (en al helemaal niet nu je de data-* attributes hebt die zowel via css als via jquery makkelijk te benaderen zijn. JS misschien ook maar omdat we JQuery al hadden ben ik daar niet veel verder in gedoken.)