[HTML, CSS, JS] Frontend #43: 0 === -0

Die JavaScript voor dummies kan wel uit de OP, al ruim een jaar niet in gepost. De tutorials bestaan trouwens ook niet meer. Daar kan wat mij betreft een link naar codeacademy.com, verder zouden links naar MDN (JS), CanIUse, JSfiddle, jsperf, html5doctor, wellicht wat magazines(?) ook niet misstaan om het weer een beetje up to date te trekken.

[ Bericht 11% gewijzigd door n8n op 16-02-2015 15:12:51 ]

• jQuery Tips and Tricks
• Hidden Features of JavaScript

Owja, hoe kon ik stackoverflow nou weer vergeten

De tutorials bestaan nog steeds maar hebben een nieuw onderkomen gevonden.

30 Days to Learn HTML & CSS
30 Days to Learn jQuery

quote:

Op maandag 16 februari 2015 12:49 schreef n8n het volgende:

[..]

als je alle mieren een beetje neukt, heb je wel verdomd snelle websites. Pagina's interactief in een kwart seconde, met allemaal fancy dingen alles er op en er aan. Nou zullen wat ng-tags niet het verschil maken maar heel jquery parsen voor een toggle en input validatie wel. 5000 dom-elementen in je pagina (wat je ook 'gewoon' bij Google/Facebook ziet) slaat ook nergens op. Klakkeloos allemaal frameworks er op gooien gebeurt echt te vaak. Soms zie je 2 versies van jquery op een site (los ingeladen) omdat 1 (vaak slecht geschreven) Plug-in toevallig die dependancy heeft maar geen update.

2 versies van jQuery op 1 pagina, dat klinkt echt als een succesformule.

Overigens zie ik ook regelmatig dat er veel verschillende jQuery-objecten van een DOM-element worden gemaakt, da's ook niet handig. Je kunt beter variabelen gebruiken.

Dus niet:

En wel:

quote:

Op maandag 16 februari 2015 21:58 schreef Light het volgende:

[..]

2 versies van jQuery op 1 pagina, dat klinkt echt als een succesformule.

Overigens zie ik ook regelmatig dat er veel verschillende jQuery-objecten van een DOM-element worden gemaakt, da's ook niet handig. Je kunt beter variabelen gebruiken.

Dus niet:
[ code verwijderd ]

En wel:
[ code verwijderd ]

dat ook ja, de css-manier met eeuwige chains helpt ook niet echt, maar genoeg over jQuery. De selector engine is trouwens ook alweer een tijdje los verbrijgbaar. http://sizzlejs.com, het gemak van $() zonder de extras.

quote:

Op dinsdag 17 februari 2015 08:37 schreef mstx het volgende:
OP opgeschoond

Mooi geworden zo. Misschien een idee om bij het kopje code posten ook iets te zeggen over jsfiddle/codepen?

quote:

Op dinsdag 17 februari 2015 10:16 schreef mstx het volgende:

[..]

Done

Lekker bezig

quote:

Op dinsdag 17 februari 2015 10:17 schreef BrainOverfloW het volgende:

[..]

Lekker bezig

53S

Goeie OP zo ja

Goedemiddag. Ik ben bezig met een klein projectje. Ik heb 2 DIV's over elkaar. hoe kan ik ervoor zorgen dat de bovenste met een knop als een gordijn naar boven gaat zeg maar. (dmv jQuery) Klein zetje in de goede richting om te zoeken is ook goed. Kom er even niet uit.

quote:

Op woensdag 4 maart 2015 17:46 schreef dimmak het volgende:
Goedemiddag. Ik ben bezig met een klein projectje. Ik heb 2 DIV's over elkaar. hoe kan ik ervoor zorgen dat de bovenste met een knop als een gordijn naar boven gaat zeg maar. (dmv jQuery) Klein zetje in de goede richting om te zoeken is ook goed. Kom er even niet uit.

http://api.jquery.com/slideup/

quote:

Op woensdag 4 maart 2015 17:48 schreef Aether het volgende:

[..]

http://api.jquery.com/slideup/

Thnx! Heb HTML/CSS aardig onder de knie. Wil nu graag wat JS erbij doen.

Hello mensen, ik ben druk doende om me HTML en CSS aan te leren, maar nu vraag ik mij iets af. Veel sites zijn tegenwoordig responsive en als je echt serieus wat wilt dan zul je dus ook HTML5 moet kunnen. Kun je daar ook gewoon mee beginnen of moet je echt eerst de oude basis leren, dus gewoon HTML en CSS en pas daarna HTML 5 en CSS3?

quote:

Op woensdag 4 maart 2015 17:54 schreef dimmak het volgende:

[..]

Thnx! Heb HTML/CSS aardig onder de knie. Wil nu graag wat JS erbij doen.

Dan is het handig eerst JS te leren, wat jQuery + die plugin met duizenden regels doet kan in dit geval ook met 10 regels.

quote:

Op woensdag 4 maart 2015 18:27 schreef Tshot het volgende:
Hello mensen, ik ben druk doende om me HTML en CSS aan te leren, maar nu vraag ik mij iets af. Veel sites zijn tegenwoordig responsive en als je echt serieus wat wilt dan zul je dus ook HTML5 moet kunnen. Kun je daar ook gewoon mee beginnen of moet je echt eerst de oude basis leren, dus gewoon HTML en CSS en pas daarna HTML 5 en CSS3?

HTML5 en CSS3 zijn html en css. Voor responsive heb je in principe niks nodig, wat media-queries en meta tags maken je leven wel makkelijker.

quote:

Op woensdag 4 maart 2015 18:32 schreef n8n het volgende:

[..]

Dan is het handig eerst JS te leren, wat jQuery + die plugin met duizenden regels doet kan in dit geval ook met 10 regels.

[..]

HTML5 en CSS3 zijn html en css. Voor responsive heb je in principe niks nodig, wat media-queries en meta tags maken je leven wel makkelijker.

Ik heb ook wel een klein beetje kennis van JS. Maar ben met iets bezig waarvoor jQuery me handig lijkt. Dit zal niet het enige zijn wat ik eruit nodig heb. Spelenderwijs hoop ik met beide straks goed overweg te kunnen.

quote:

Op woensdag 4 maart 2015 18:32 schreef n8n het volgende:

[..]

Dan is het handig eerst JS te leren, wat jQuery + die plugin met duizenden regels doet kan in dit geval ook met 10 regels.

[..]

HTML5 en CSS3 zijn html en css. Voor responsive heb je in principe niks nodig, wat media-queries en meta tags maken je leven wel makkelijker.

Hm okay, thanks. Was bang dat ik me anders allemaal regels aan ging leren die later weer overbodig bleken te zijn omdat het in HTML5 heel anders gaat. Ik volg nu een boek wat al wel een paar jaar oud is, maar dat kan dus weinig kwaad begrijp ik?

quote:

Op woensdag 4 maart 2015 18:42 schreef Tshot het volgende:

[..]

Hm okay, thanks. Was bang dat ik me anders allemaal regels aan ging leren die later weer overbodig bleken te zijn omdat het in HTML5 heel anders gaat. Ik volg nu een boek wat al wel een paar jaar oud is, maar dat kan dus weinig kwaad begrijp ik?

Om de basis onder de knie te krijgen kan dat inderdaad geen kwaad. HTML5 is geen andere HTML, het is gewoon een toegevoegde set nieuwe tags die je kunt gebruiken. Zo kun je bijvoorbeeld <header> tags gebruiken in plaats van <div class="header">.
Daarmee krijg je dus iets overzichtelijkere code. Ook zijn er wat tags bij gekomen op het gebied van multimedia. Maar alles wat je qua HTML al geleerd hebt zal gewoon blijven werken. Zoals n8n al zei, het blijft uiteindelijk allemaal dezelfde HTML.

Het enige wat anders is, is de doctype declaratie. Je kunt nu
in plaats van
gebruiken.

Voor CSS3 is het hetzelfde verhaal. Een serie extra elementen om mee te werken maar al het oude blijft gewoon werken zoals het is.

quote:

Op woensdag 4 maart 2015 19:21 schreef BrainOverfloW het volgende:

[..]

Om de basis onder de knie te krijgen kan dat inderdaad geen kwaad. HTML5 is geen andere HTML, het is gewoon een toegevoegde set nieuwe tags die je kunt gebruiken. Zo kun je bijvoorbeeld <header> tags gebruiken in plaats van <div class="header">.
Daarmee krijg je dus iets overzichtelijkere code. Ook zijn er wat tags bij gekomen op het gebied van multimedia. Maar alles wat je qua HTML al geleerd hebt zal gewoon blijven werken. Zoals n8n al zei, het blijft uiteindelijk allemaal dezelfde HTML.

Het enige wat anders is, is de doctype declaratie. Je kunt nu
[ code verwijderd ]

in plaats van
[ code verwijderd ]

gebruiken.

Voor CSS3 is het hetzelfde verhaal. Een serie extra elementen om mee te werken maar al het oude blijft gewoon werken zoals het is.

Duidelijk! Kwestie van mezelf die nieuwe elementen eigen maken dus. Nog een vraag als beginneling: nu kopieer ik vaak stukjes HTML die ik dan een beetje aanpas naar mijn eigen wensen, maar hoe doen jullie dit?

Kennen jullie echt ieder element, iedere class etc uit je hoofd en typ je deze ook steeds opnieuw?

Er zijn altijd randzaken die je ff opzoekt. Voor alle tags en wanneer ze te gebruiken: html5doctor.com

Verder heb je het concept design patterns, dat is een min of meer vaste stijl die je overal op toepast.

Even een vraagje, ik ben bezig met een website en moet een tabel als dit:



Een tabel (geen td/tr shit), waarin een hele rij een <a href> link is, en ook als hele rij oplicht als je hovert. Ik krijg het maar niet voor elkaar.

quote:

<ul>
<li class="wrap">
<a href="#">

<li class="logo"><img src="img/--.png" alt="Nuon"></li>

<li class="kenmerk"> kenmerk </li>

<li class="prijs"> prijs </li>

</a>
</li>
</ul>

Dit is wat ik tot nu toe heb, de eerste li een width van 33%, tweede li 33%, derde li 33%, etc. Maar dit werkt dus niet.

Edit: dit is niet m'n eerste aanpak geweest, maar als redelijk ervaren html/css'er kwam ik er gewoon niet uit en maakte ik zoiets fout als hierboven

quote:

Op woensdag 4 maart 2015 21:02 schreef LeNick het volgende:

[..]

Dit is wat ik tot nu toe heb, de eerste li een width van 33%, tweede li 33%, derde li 33%, etc. Maar dit werkt dus niet.

Edit: dit is niet m'n eerste aanpak geweest, maar als redelijk ervaren html/css'er kwam ik er gewoon niet uit en maakte ik zoiets fout als hierboven

Zoiets? Even in 2 minuten opgezet.
http://jsfiddle.net/agjek7Lw/1/

quote:

Op woensdag 4 maart 2015 21:16 schreef donroyco het volgende:

[..]

Zoiets? Even in 2 minuten opgezet.
http://jsfiddle.net/agjek7Lw/1/

Perfect ja! Thanks

quote:

Op woensdag 4 maart 2015 20:45 schreef LeNick het volgende:
Een tabel (geen td/tr shit)

Een tabel is "td/tr shit".

Als je informatie als tabel wilt weergeven, waarom dan niet gewoon een tabel gebruiken?

quote:

Op woensdag 4 maart 2015 21:48 schreef LeNick het volgende:

[..]

Perfect ja! Thanks

Waar kan ik de factuur naartoe sturen?

quote:

Op woensdag 4 maart 2015 22:11 schreef Leshy het volgende:

[..]

Een tabel is "td/tr shit".

Als je informatie als tabel wilt weergeven, waarom dan niet gewoon een tabel gebruiken?

Le-zen.

quote:

Op woensdag 4 maart 2015 18:39 schreef dimmak het volgende:

[..]

Ik heb ook wel een klein beetje kennis van JS. Maar ben met iets bezig waarvoor jQuery me handig lijkt. Dit zal niet het enige zijn wat ik eruit nodig heb. Spelenderwijs hoop ik met beide straks goed overweg te kunnen.

Waar veel beginnende mensen juist de mist in gaan is dat ze of niet weten of vergeten dat jQuery is gebouwd op JavaScript. Het heeft (tenminste, vind ik) érg veel meerwaarde om eerst je JavaScript bij te schaven en een beetje te leren waarom dingen werken zoals ze werken voordat je je verdiept in jQuery. Dit gaat je veel bloed, zweet en tranen besparen. Niet dat je geen jQuery kan gebruiken, maar hou het feit dat jQuery uiteindelijk gewoon JavaScript is en niet andersom in je achterhoofd.

[ Bericht 1% gewijzigd door Wicketd op 04-03-2015 22:46:14 ]

quote:

Op woensdag 4 maart 2015 22:13 schreef donroyco het volgende:
Le-zen.

Hij zegt nergens waarom hij geen daadwerkelijke tabel wil gebruiken.

Je voorbeeld werkt prima, maar het enige dat je hebt gedaan is de <tr> en <td> tags vervangen door <div>s. Leuk, maar dat heeft natuurlijk geen enkel praktisch nut.

quote:

Op woensdag 4 maart 2015 19:47 schreef Tshot het volgende:

[..]

Duidelijk! Kwestie van mezelf die nieuwe elementen eigen maken dus. Nog een vraag als beginneling: nu kopieer ik vaak stukjes HTML die ik dan een beetje aanpas naar mijn eigen wensen, maar hoe doen jullie dit?

Kennen jullie echt ieder element, iedere class etc uit je hoofd en typ je deze ook steeds opnieuw?

Het kopiëren en aanpassen van code is aardig om een beetje te zien wat een stukje code doet maar als je zelf echt een website op wilt zetten is dat het beste gewoon zelf te schrijven.

Dat is ook de beste manier om het te leren. Bouw met het handje vol elementen wat je kent iets heel simpels. Zelf bedenken welke elementen het beste op elke plek in je code werken geeft je een veel beter begrip van de elementen dan afkijken bij andere sites. Als je dan iets nieuws geleerd hebt voeg je dat toe aan je pagina.
De logica van een voorbeeld van een boek/site volgen is makkelijker dan die logica zelf te gebruiken in iets nieuws. Daarom lekker zelf blijven oefenen.

Er zijn altijd wel wat elementen of attributen die je niet uit je hoofd weet, of waarvan je even vergeet hoe ze precies heten. Dan is Google je vriend. Maar het meeste van de veelgebruikte elementen leer je vanzelf uit het hoofd, simpelweg om je ze steeds blijft gebruiken.

Daarnaast zijn er wel tools die helpen te voorkomen dat je onnodig je code moet blijven herhalen.

Te beginnen bij een goede code editor. Het aanvullen van wat je typt, verschillende kleuren voor de verschillende elementen in je code, allemaal van die kleine dingen die je helpen snel en overzichtelijk te coden.

Zelf gebruik ik Sublime Text 3, die is lekker snel en heeft een uitgebreide selectie aan plug ins. Ook Brackets is naar mijn idee wel een goede editor. Die heeft een handige mogelijkheid om de veranderingen die je maakt direct op je pagina weer te geven. Als je schermgrootte het toe staat kun je dan je editor en browser naast elkaar openen en krijg je direct visuele feedback van wat je code aan het doen is. Sublime kan dat met een plug in ook.

Daarnaast heeft een beetje code editor de mogelijkheid om stukken veel gebruikte code op te slaan als zogeheten snippets. Die kun je dan later oproepen in plaats van het helemaal weer uit te typen.
Denk daarbij bijvoorbeeld aan de basis structuur van je pagina (html/head/body). Die is elke keer het zelfde dus het is handig om die snel in te kunnen laden in plaats van voor elke pagina uit te gaan typen.

Daarnaast is het een erg fijne toevoeging om Emmet te gebruiken. Dat is een plug in waarmee je met minder typ werk dezelfde code neer te zetten.
Wil je bijvoorbeeld een div maken om je pagina mee in te pakken dan typ je
en druk je op Tab en Emmet maakt er

Als je de regels van Emmet kent en weet wat de structuur van je code moet zijn kun je een serie elementen aan elkaar plakken en sneller dingen die in je hoofd zitten uit typen.


Het zijn kleine dingetjes maar op de grote hoeveelheid code die gaat schrijven in de tijd dat je hier mee bezig bent scheelt het toch een hoop tijd. Tijd die beter besteed is aan het nadenken over wat je wilt bouwen en hoe je dat gaat doen.

quote:

Op woensdag 4 maart 2015 22:22 schreef Wicketd het volgende:

[..]

Waar veel beginnende mensen juist de mist in gaan is dat ze of niet weten of vergeten dat jQuery is gebouwd op JavaScript. Het heeft (tenminste, vind ik) érg veel meerwaarde om eerst je JavaScript bij te schaven en een beetje te leren waarom dingen werken zoals ze werken voordat je je verdiept in jQuery. Dit gaat je veel bloed, zweet en tranen besparen. Niet dat je geen jQuery kan gebruiken, maar hou het feit dat jQuery uiteindelijk gewoon JavaScript is en niet andersom in je achterhoofd.

Daar ben ik me volledig van bewust. Net zoals ik zeg, ik weet wel wat van JS. Heb er jaren geleden wel mee gewerkt maar de kennis moet bijgeschaafd worden. Dat hoop ik spelenderwijs te doen.

Echt goed JavaScript leren doe je door artikelen te lezen. En niet alleen over de taal zelf, maar ook over debuggen. Je devtools goed kennen is de sleutel.

quote:

Op donderdag 5 maart 2015 02:28 schreef BrainOverfloW het volgende:
Daarnaast is het een erg fijne toevoeging om Emmet te gebruiken. Dat is een plug in waarmee je met minder typ werk dezelfde code neer te zetten.

Prachtig, ik werk zelf met notepad++ maar zie dat het daar ook beschikbaar voor is, pfff dat gaat een hoop typen schelen!!!

quote:

Op donderdag 5 maart 2015 08:22 schreef Catch22- het volgende:
Echt goed JavaScript leren doe je door artikelen te lezen. En niet alleen over de taal zelf, maar ook over debuggen. Je devtools goed kennen is de sleutel.

Met codecademy schiet ik wel een stuk op toch?

quote:

Op donderdag 5 maart 2015 09:22 schreef dimmak het volgende:

[..]

Met codecademy schiet ik wel een stuk op toch?

Geen idee, ken ik niet A List Apart is bijvoorbeeld wel een goeie. Ik had "vroeger" een feed in Google Reader met allerhande gerelateerde sites waaruit ik veel heb geleerd. Nu lees ik artikelen uit mijn twitterfeed van een aantal vooraanstaande frontend devs (Christian Heilman en Paul Irish (re)tweeten veel handige artikelen)

quote:

Op donderdag 5 maart 2015 09:22 schreef dimmak het volgende:

[..]

Met codecademy schiet ik wel een stuk op toch?

Dé site voor mij wat betreft front-end is voor mij in het begin altijd Smashing Magazine geweest. Ik kijk er nog steeds regelmatig op. Zeker een aanradertje.

Smashing is wel vrij conceptueel en soms een beetje html/css, weinig JS.

quote:

Op donderdag 5 maart 2015 08:44 schreef Chandler het volgende:

[..]

Prachtig, ik werk zelf met notepad++ maar zie dat het daar ook beschikbaar voor is, pfff dat gaat een hoop typen schelen!!!

Emmet heeft inderdaad support voor aardig wat van de populaire editors. Het zit zelfs in Codepen en JSFiddle ingebouwd. Het werkt overigens ook voor CSS. "w100" wordt bijvoorbeeld "width: 100px;" Ook heeft het wat extra functionaliteiten rondom text selecteren e.d.

Hier een screencast van Chris Coyer (van CSS-Tricks en Codepen) die een aardig overzicht geeft van wat Emmet zoal kan.

Hij heeft ook wel een interessant verhaal over wat een goede workflow is voor het bouwen van een website. Gaat over dingen als Git, Sublime, Emmet, Sass. Handige dingen om van op de hoogte te zijn.

Thanks, heb er al even mee gespeeld maar idd scheelt me aardig wat typen!!

quote:

Op donderdag 5 maart 2015 16:00 schreef Chandler het volgende:
Thanks, heb er al even mee gespeeld maar idd scheelt me aardig wat typen!!

doe jezelf een lol en kies een goede editor

quote:

Op donderdag 5 maart 2015 16:07 schreef Catch22- het volgende:
doe jezelf een lol en kies een goede editor

Precies, dat heb ik dus ook gedaan. Notepad++ voldoet aan al mijn eisen, is lightweight, typt precies zoals ik wil en heeft bergen met plugins die mij het leven gemakkelijker maken. Er zullen ongetwijfeld genoeg IDE's zijn die beter zijn, maar het blijft toch de voorkeur van de gebruiker Catch !:)
Ik schrijf al jaren mijn programeersels met notepad++ en zal niet weten waarom ik voor een andere editor zou moeten gaan, ik koop toch ook geen nieuwe auto omdat die beter is terwijl ik zeer tevreden ben met mijn huidige auto? (heb helemaal geen auto, dat terzijde )

quote:

Op donderdag 5 maart 2015 16:09 schreef Chandler het volgende:

[..]

Precies, dat heb ik dus ook gedaan. Notepad++ voldoet aan al mijn eisen, is lightweight, typt precies zoals ik wil en heeft bergen met plugins die mij het leven gemakkelijker maken. Er zullen ongetwijfeld genoeg IDE's zijn die beter zijn, maar het blijft toch de voorkeur van de gebruiker !:)
Ik schrijf al jaren mijn programeersels met notepad++ en zal niet weten waarom ik voor een andere editor zou moeten gaan, ik koop toch ook geen nieuwe auto omdat die beter is terwijl ik zeer tevreden ben met mijn huidige auto? (heb helemaal geen auto, dat terzijde )

Omdat je dan betere code-completion en docs hebt. Scheelt een hoop werk

quote:

Op donderdag 5 maart 2015 16:10 schreef Catch22- het volgende:
Omdat je dan betere code-completion en docs hebt. Scheelt een hoop werk

Beter wil niet altijd zeggen fijner, werk met heel veel plezier met deze editor..
Maar wil best een keer met je mee kijken hoe fijn andere IDE's werken!

quote:

Op donderdag 5 maart 2015 16:13 schreef Chandler het volgende:

[..]

Beter wil niet altijd zeggen fijner, werk met heel veel plezier met deze editor..
Maar wil best een keer met je mee kijken hoe fijn andere IDE's werken!

Nouja, hoe meer code er completed wordt, hoe minder je fout kan doen natuurlijk. Je moet uiteindelijk kiezen wat je fijner vindt, maar er zijn IDE's die je leven makkelijker maken.

Misschien is het gebrek aan ervaring van IDE's wel mijn probleem hoor heb je een voorbeeld wat voor mij een leuke zou zijn? je hebt namelijk zo ontiegelijk veel... ennuh moet wel portable zijn

quote:

Op donderdag 5 maart 2015 16:26 schreef Chandler het volgende:
Misschien is het gebrek aan ervaring van IDE's wel mijn probleem hoor heb je een voorbeeld wat voor mij een leuke zou zijn? je hebt namelijk zo ontiegelijk veel... ennuh moet wel portable zijn

portable als in je wil niet betalen?

Ik gebruik zelf Netbeans (want dat gebruiken mijn backenders ook en anders kan ik de Java projecten niet draaien), maar eclipse is ook fijn. Voor MacOSX zijn er een aantal andere prettige (SublimeText et al)