FOK!forum / Digital Corner / [HTML, CSS, JS] Frontend #45: topic nummer++
Catch22-zondag 15 mei 2016 @ 00:03
roEhbv3.jpg

Dit topic is bedoeld voor alle vragen m.b.t. HTML, CSS en javascript, kortom alles wat je nodig hebt om (de frontend van) een website te maken.

HTML: Hyper Text Markup Language is de structuur van een website. Door middel van verschillende html tags geef je aan welke elementen bij elkaar horen (bijv: <div>, <ul>), of wat de betekenis van deze data is (bijv. <p>, <h1>). HTML leent zich ook voor opmaak, maar het is makkelijker en verstandiger om hier CSS voor te gebruiken.
CSS: Cascading StyleSheet is de opmaak van een website. In je CSS specificeer je bijvoorbeeld welke kleur bepaalde elementen moeten hebben, hoe groot ze zijn en hoe je ze wilt rangschikken.
JS: Javascript Javascript (niet te verwarren met programmeertaal Java) is een scripttaal, waarmee het mogelijk is je website dynamisch te maken. Javascript kan bijvoorbeeld HTML-elementen aanpassen, toevoegen of verwijderen.

Vragen over PHP, SQL of andere serverside programmeertalen horen niet in dit topic. Deze kun je stellen in [PHP/MySQL] voor dummies of open zelf een topic.
Voor vragen over webhosting, domeinnamen enz. kun je terecht in Het grote (betaalde) webhosting topic
En voor Wordpress is er ook een speciaal topic, als het om meer gaat dan de HTML/CSS van een theme: [Wordpress]Algemeen topic

Code posten
Het is, als je een vraag stelt, vaak handig om hier een stukje code bij te voegen. Post niet klakkeloos je hele website, maar post alleen het stukje code waar je vraag over gaat. Gebruik bovendien de [code]-tag (code.png, zodat je HTML, CSS of Javascript code goed leesbaar is. Dus niet [quote] of [spoiler] of wat dan ook.
Nog beter is om een snippet in Codepen of JSFiddle te plakken. Hierdoor kunnen anderen je ook makkelijker helpen.

Veel voorkomende problemen
Veel problemen zijn te wijden aan het niet kloppen van HTML of CSS code. Een kleine typfout is snel gemaakt, en de webbrowser kan daar soms erg slecht mee omgaan. Om te controleren of je code technisch in orde is, kun je deze controleren met de W3 validator.
Is je code niet correct? Los dan eerst de fouten op zodat de validator geen foutmeldingen meer geeft. Dit lost niet altijd je probleem op, maar zorgt in ieder geval dat alles werkt zoals het hoort te werken, waardoor overige fouten ook veel makkelijker te achterhalen zijn.

IK SNAP ER NIETS VAN HELLEP! WAT IS CSS?
We helpen iedereen graag in dit topic, ook mensen die er helemaal niets van begrijpen. Maar we verwachten wel dat je je best doet om het wel te gaan begrijpen. Lees eens wat tutorials en probeer het altijd eerst zelf. Je krijgt hier tips waar je zelf iets mee moet doen.

Hier een paar artikelen over CSS elementen die vaak voor verwarring zorgen
CSS Floats 101
CSS Positioning 101

Heb je zin om HTML, CSS of Javascript leren, dan zijn deze video tutorials een goede plek om te beginnen
30 Days to Learn HTML & CSS
30 Days to Learn jQuery
JavaScript from null

Overige tips & tricks
jQuery Tips and Tricks
Hidden Features of JavaScript

Populaire frameworks
• [HTML/CSS] Bootstrap
• [HTML/CSS] Foundation
• [JS] jQuery
• [JS] AngularJS
• [JS] Backbone
• [JS] Ember.js
Catch22-zondag 15 mei 2016 @ 00:04
In een loopje doe ik het wel. Daarbuiten wel +=, maar niet in optellingen met meer dan 1 variabele
KomtTijd...zondag 15 mei 2016 @ 00:05
Stuk ongeduld.
Catch22-zondag 15 mei 2016 @ 00:09
quote:
7s.gif Op zondag 15 mei 2016 00:05 schreef KomtTijd... het volgende:
Stuk ongeduld.
Ik wou dat posten en anders vergeet ik het weer. Mijn garbage collector is vrij agressief
BrainOverfloWzondag 15 mei 2016 @ 10:52
Inmiddels zouden Vue en React ook wel een plekje in bij de populaire frameworks mogen krijgen denk ik.
ikbenrondzaterdag 28 mei 2016 @ 23:44
DIG / Bootstrap Studio; aan te raden?
#ANONIEMzaterdag 28 mei 2016 @ 23:55
quote:
Kijk ook hier eens naar http://pingendo.com/
ikbenrondzondag 29 mei 2016 @ 12:16
quote:
1s.gif Op zaterdag 28 mei 2016 23:55 schreef d4v1d het volgende:

[..]

Kijk ook hier eens naar http://pingendo.com/
Oh cool! Dat is wel een leuk alternatief (en gratis), thanks
#ANONIEMzondag 29 mei 2016 @ 13:57
Zat er even mee te klooien, het heeft wel een vervelende bug met de (image) paths. Op Windows pakt die dan een backslash ipv een forward slash :')
#ANONIEMzondag 29 mei 2016 @ 14:50
Wat zijn we lekker enthousiast jongens.
richoliozondag 29 mei 2016 @ 15:10
Grappig. Ik ging het ook even uitproberen, alleen werd heel Pingendo ineens wit :') Maar ik mag niet klagen over zulke bugs, het is toch gratis.

bleFMCT.png

Gebeurt dus als je de typography wil aanpassen
richoliozondag 29 mei 2016 @ 15:31
Als ze het nou nog net wat meer Sketch maken :9~
#ANONIEMzondag 29 mei 2016 @ 15:42
quote:
1s.gif Op zaterdag 28 mei 2016 23:55 schreef d4v1d het volgende:

[..]

Kijk ook hier eens naar http://pingendo.com/
Is wel heel basic zo te zien
#ANONIEMzondag 29 mei 2016 @ 15:54
quote:
0s.gif Op zondag 29 mei 2016 15:10 schreef richolio het volgende:
Grappig. Ik ging het ook even uitproberen, alleen werd heel Pingendo ineens wit :') Maar ik mag niet klagen over zulke bugs, het is toch gratis.

[ afbeelding ]

Gebeurt dus als je de typography wil aanpassen
Sylvana Simons kom d'r maar in
TwenteFCdonderdag 14 juli 2016 @ 21:36
:P Zitten hier toevallig nog freelancers die nog een klus zoeken?
#ANONIEMmaandag 7 november 2016 @ 10:55
Kick! :P.

Naar aanleiding van FB / FOK!'s User Awards-verkiezing 2016......:
Ik wil het invullen van dat vragenlijstje vergemakkelijken.

Bedoeling: users vullen de antwoorden in en de code die op het forum geplaatst kan worden, wordt geplaatst in een textarea dat kopieerbaar is.

Wat ik momenteel heb: http://fok.nfshost.com/verkiezingen/.

Is gemaakt met behulp van: https://jsfiddle.net/y55rbykv/ (ben op weg geholpen door een andere user - picodealion).

Iemand een idee hoe ik het werkend krijg?
picodealionmaandag 7 november 2016 @ 11:18
-edit-
Je moet toch wat duidelijker zijn. Wat werkt bij jou wel en niet? Je pagina doet het niet omdat je daar geen scripts in hebt zitten, alleen jQuery. De fiddle werkt hier wel gewoon in Chrome.
#ANONIEMmaandag 7 november 2016 @ 11:24
quote:
14s.gif Op maandag 7 november 2016 11:18 schreef picodealion het volgende:
-edit-
Je moet toch wat duidelijker zijn. Wat werkt bij jou wel en niet? Je pagina doet het niet omdat je daar geen scripts in hebt zitten, alleen jQuery. De fiddle werkt hier wel gewoon in Chrome.
Ik gebruik Firefox, en daar bleef de textbox in JSFiddle leeg. In Chrome werkt het wel.

Edit: nu werkt het ook in Firefox... Hm, weird.

Even verder puzzelen. Bedankt!

[ Bericht 6% gewijzigd door #ANONIEM op 07-11-2016 11:25:11 ]
#ANONIEMmaandag 7 november 2016 @ 11:30
quote:
14s.gif Op maandag 7 november 2016 11:18 schreef picodealion het volgende:
-edit-
Je moet toch wat duidelijker zijn. Wat werkt bij jou wel en niet? Je pagina doet het niet omdat je daar geen scripts in hebt zitten, alleen jQuery. De fiddle werkt hier wel gewoon in Chrome.
O+. Hij doet 't.

Is er een mogelijkheid om alleen de veranderde input-boxen mee te nemen? Dus als er maar 4 van 15 worden ingevuld, zie je ook alleen de output van die 4, zeg maar.
KomtTijd...maandag 7 november 2016 @ 11:34
iets van (psuedo code) if (textbox.value != "") inbouwen?
picodealionmaandag 7 november 2016 @ 11:37
Dat zou je dan op iedere individuele regel moeten toepassen. Het kan uiteraard wel, maar gezien je geringe ervaring met javascript zou ik daar niet aan beginnen. Of wel, maar dan moet je wel echt even wat actiever uitzoeken hoe javascript werkt en vooral hoe je met behulp van de developer tools je code kan debuggen.
#ANONIEMmaandag 7 november 2016 @ 11:40
quote:
14s.gif Op maandag 7 november 2016 11:34 schreef KomtTijd... het volgende:
iets van (psuedo code) if (textbox.value != "") inbouwen?
Zou je een voorzetje kunnen geven? :@.

Bedoel, kan zelf wel prutsen natuurlijk, maar ik denk niet ik het vlot krijg zoals ik het wil.

quote:
14s.gif Op maandag 7 november 2016 11:37 schreef picodealion het volgende:
Dat zou je dan op iedere individuele regel moeten toepassen. Het kan uiteraard wel, maar gezien je geringe ervaring met javascript zou ik daar niet aan beginnen. Of wel, maar dan moet je wel echt even wat actiever uitzoeken hoe javascript werkt en vooral hoe je met behulp van de developer tools je code kan debuggen.
Geen probleem om het per regel toe te passen...

Thanks in ieder geval, ga zo even uitzoeken of er wat 'makkelijks' voor op te verzinnen valt. Eerst het geheel maar even afmaken.
Catch22-maandag 7 november 2016 @ 11:46
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
(function($) {

  $('input').change(updateOutput);

  function updateOutput() {
      var output = "";
            $("p.item").each(function(item) {
          var text = $("span", this).text();
        var value = $("input:text", this).val();
        if(value && value.length > 0) {
        console.log("adding", value)
            output += "[b]" + text + "[/b]" + " " + value + "\n\n";
        }
      })
      console.log("Setting output", output)
      $('#output').val(output);
  }

  function getUser(award) {
    return $('input[name="' + award + '"]').val();
  }
  
})(jQuery);
1
2
3
4
5
6
7
8
<p class='item'>
  <span>Leo Blokhuis Award - Grootste muziekkenner :</span>  <input type="text" name="LeoBlokhuis">
</p>
<p class='item'>
  <span>Philippe Geubels Award - User met de meest humor :</span> <input type="text" name="PhilippeGeubels">
</p>
 
<textarea id="output" id="" cols="30" rows="10"></textarea>

https://jsfiddle.net/78825ajh/

quote:
0s.gif Op maandag 7 november 2016 11:40 schreef zarGon het volgende:
picodealionmaandag 7 november 2016 @ 11:50
Ah ja, netjes.
#ANONIEMmaandag 7 november 2016 @ 12:06
quote:
11s.gif Op maandag 7 november 2016 11:46 schreef Catch22- het volgende:

[ code verwijderd ]

[ code verwijderd ]

https://jsfiddle.net/78825ajh/

[..]

O+. O+. O+.

FB / FOK!'s User Awards-verkiezing 2016....... :P.

Hartstikke bedankt alledrie, voor het meedenken en ook daadwerkelijk meeschrijven van de code. _O_.
Catch22-maandag 7 november 2016 @ 12:35
quote:
0s.gif Op maandag 7 november 2016 12:06 schreef zarGon het volgende:

[..]

O+. O+. O+.

FB / FOK!'s User Awards-verkiezing 2016....... :P.

Hartstikke bedankt alledrie, voor het meedenken en ook daadwerkelijk meeschrijven van de code. _O_.
:)
K44Smaandag 7 november 2016 @ 12:42
Ik post hier ook maar eens.
Mijn ambitie: Websites/apps leren maken en mijn service verkopen :).

Dus ik zal waarschijnlijk af en toe mee lezen :)
Darkomenmaandag 7 november 2016 @ 13:35
quote:
0s.gif Op maandag 7 november 2016 12:42 schreef K44S het volgende:
Ik post hier ook maar eens.
Mijn ambitie: Websites/apps leren maken en mijn service verkopen :).

Dus ik zal waarschijnlijk af en toe mee lezen :)
Begin simpel, leer de basics en succes ^O^
K44Smaandag 7 november 2016 @ 13:35
quote:
0s.gif Op maandag 7 november 2016 13:35 schreef Darkomen het volgende:

[..]

Begin simpel, leer de basics en succes ^O^
Heb je daarin tips?
Darkomenmaandag 7 november 2016 @ 13:57
Dat waren mijn tips ;-)
K44Smaandag 7 november 2016 @ 13:58
quote:
0s.gif Op maandag 7 november 2016 13:57 schreef Darkomen het volgende:
Dat waren mijn tips ;-)
Haha, duidelijk :)
Catch22-maandag 7 november 2016 @ 14:24
quote:
0s.gif Op maandag 7 november 2016 13:58 schreef K44S het volgende:

[..]

Haha, duidelijk :)
In de OP staan een paar links. Als je die hebt gelezen (en snapt) kom je maar terug ;)
#ANONIEMmaandag 7 november 2016 @ 14:27
quote:
0s.gif Op maandag 7 november 2016 13:35 schreef K44S het volgende:

[..]

Heb je daarin tips?
http://jgthms.com/web-design-in-4-minutes/. :P.
Laser.donderdag 17 november 2016 @ 20:35
-opgelost-

[ Bericht 98% gewijzigd door Laser. op 18-11-2016 02:14:58 ]
Catch22-vrijdag 18 november 2016 @ 09:56
quote:
0s.gif Op donderdag 17 november 2016 20:35 schreef Laser. het volgende:
-opgelost-
das niet zo netjes. Zet even je oplossing er bij voor anderen.

Ik zou het overigens wat gracieuzer oplossen met een class en transition. Zoveel logica in een onscroll is een drama, performance-wise gezien #perfmatters
Tshotdonderdag 1 december 2016 @ 21:07
Ik ben bezig met het leren van HTML & CSS en wil daarna eigenlijk ook echt gaan programmeren (PHP o.i.d.), maar ik vraag me eigenlijk af hoe realistisch het is om hier nog echt goed in te worden, aangezien ik al een jaar of 10 aan het werk ben in een beroep wat niet zoveel met online te maken heeft. Daarnaast wil ik het eigenlijk doen zonder een opleiding te volgen.

Iemand die me hier advies over kan geven?
PimDdonderdag 1 december 2016 @ 21:11
Ik zou me gewoon richten op front-end en niet ook nog naar PHP gaan kijken. Front-end is zo ontzettend breed, daar ben je wel even mee bezig. En JavaScript is ook "echt" programmeren hoor :)
Tshotdonderdag 1 december 2016 @ 21:15
quote:
0s.gif Op donderdag 1 december 2016 21:11 schreef PimD het volgende:
Ik zou me gewoon richten op front-end en niet ook nog naar PHP gaan kijken. Front-end is zo ontzettend breed, daar ben je wel even mee bezig. En JavaScript is ook "echt" programmeren hoor :)
Ja klopt, dat is inderdaad ook iets waar ik in ieder geval iets vanaf wil weten. Eigenlijk is m'n doel gewoon dat ik zelf wat software kan ontwikkelen en het liefst ook alle disciplines, maar misschien is dat dus niet realistisch meer?
JeSuisDroppiedonderdag 1 december 2016 @ 21:16
quote:
5s.gif Op donderdag 1 december 2016 21:15 schreef Tshot het volgende:

[..]

Ja klopt, dat is inderdaad ook iets waar ik in ieder geval iets vanaf wil weten. Eigenlijk is m'n doel gewoon dat ik zelf wat software kan ontwikkelen en het liefst ook alle disciplines, maar misschien is dat dus niet realistisch meer?
Even 'erbij' fullstack developer zijn is er niet meer bij.
Tshotdonderdag 1 december 2016 @ 21:20
quote:
1s.gif Op donderdag 1 december 2016 21:16 schreef JeSuisDroppie het volgende:

[..]

Even 'erbij' fullstack developer zijn is er niet meer bij.
Geloof ik wel, maar ik weet nog niet zo goed wat me het beste ligt, frontend of backend. Enige manier om daar achter te komen is door het toch maar gewoon te proberen lijkt mij?
Catch22-donderdag 1 december 2016 @ 21:22
quote:
0s.gif Op donderdag 1 december 2016 21:20 schreef Tshot het volgende:

[..]

Geloof ik wel, maar ik weet nog niet zo goed wat me het beste ligt, frontend of backend. Enige manier om daar achter te komen is door het toch maar gewoon te proberen lijkt mij?
ja
Tshotdonderdag 1 december 2016 @ 21:24
quote:
1s.gif Op donderdag 1 december 2016 21:22 schreef Catch22- het volgende:

[..]

ja
Helder. En is het realistisch om het in de avonduurtjes/weekenden te moeten leren?
JeSuisDroppiedonderdag 1 december 2016 @ 21:37
quote:
14s.gif Op donderdag 1 december 2016 21:24 schreef Tshot het volgende:

[..]

Helder. En is het realistisch om het in de avonduurtjes/weekenden te moeten leren?
Als je je focust op 1 van de gebieden wel ja.
Catch22-donderdag 1 december 2016 @ 21:44
quote:
14s.gif Op donderdag 1 december 2016 21:24 schreef Tshot het volgende:

[..]

Helder. En is het realistisch om het in de avonduurtjes/weekenden te moeten leren?
Dat ligt echt volkomen aan je inzet, aanleg en toewijding
CompanionCubevrijdag 9 december 2016 @ 09:55
Met de ontwikkeling van een website ben ik nu in gesprek met de websitebouwers.

Om een logo te uploaden hebben we nu een simpel "Browse" knopje en dan in je verkenner mag je het logo opzoeken. Wij willen hier een drag and drop dingetje voor zoals op de meeste moderne websites te vinden is.

Zo ziet het er nu uit:
9X4Tpfr.png

En dit zou ik willen:
http://www.dropzonejs.com/

De vraag is: wat kost het een (ervaren) websitebouwer nou om dit te implementeren, in uren? Is dit eerder een uurtje of twee werk of twee volle dagen. We draaien op apache, jquery, php, bootstrap.
JeSuisDroppievrijdag 9 december 2016 @ 09:56
2 uur.
Catch22-vrijdag 9 december 2016 @ 12:00
1 uur en dan kan hij ook nog even lekker schijten

https://www.sitepoint.com/html5-file-drag-and-drop/
CompanionCubevrijdag 9 december 2016 @ 12:13
Helder :') Wat moet je er voor doen dan?

Bestandje van script op de server plempen en toevoegen in de broncode?
Darkomenvrijdag 9 december 2016 @ 12:34
quote:
0s.gif Op vrijdag 9 december 2016 12:13 schreef CompanionCube het volgende:
Helder :') Wat moet je er voor doen dan?

Bestandje van script op de server plempen en toevoegen in de broncode?
Tutorial volgen en aanpassen naar wensen.

Let wel even op het stukje 'Big, Bad Browser Support'.
Helaas zijn er nog browsers die dit niet ondersteunen
PimDvrijdag 9 december 2016 @ 12:44
Ligt er maar net aan wat voor implementatie je moet hebben. Ik heb dat DropZone verhaal pas een keer in een project moeten inbouwen waar de hele formulierenlogica m.b.v. FormData werd verzonden naar een webservice. Dat was toch wel even iets meer werk dan een uurtje hoor.
Skunk-mmaandag 16 januari 2017 @ 01:04
Hoe doe ik dit in hemelsnaam?

Ik heb in js een array/object of wat het dan ook is (volgens mij een object omdat in JS anders geen custom keys zijn volgens mij.

maar ik wil dit doen:

bla['cwt'][id] = Array(id, ct);

Als id bijv. 3 is dan zet ie de juiste waardes erin, maar dan maakt ie ook bla["cwt"][0] ...[1] en ...[2] aan, zonder waarde. Maar alleen [3] moet erin komen.
Als id een string is, bijv. "dfsd" dan doet ie helemaal niks, komt er niks in te staan.

Ik ga ervanuit dat dit voldoende duidelijk maakt wat mijn probleem is.

Alvast bedankt voor reacties, ik ga nu slapen.
KomtTijd...maandag 16 januari 2017 @ 09:03
quote:
0s.gif Op maandag 16 januari 2017 01:04 schreef Skunk-m het volgende:

Ik ga ervanuit dat dit voldoende duidelijk maakt wat mijn probleem is.

Alvast bedankt voor reacties, ik ga nu slapen.
Nee, je hebt alleen wat rare behaviour (wat zover mijn roestige JS kennis reikt, gewoon gedocumenteerd is) aangetoond maar vertelt nergens wat je wilt bereiken.
Skunk-mmaandag 16 januari 2017 @ 09:36
quote:
1s.gif Op maandag 16 januari 2017 09:03 schreef KomtTijd... het volgende:

[..]

Nee, je hebt alleen wat rare behaviour (wat zover mijn roestige JS kennis reikt, gewoon gedocumenteerd is) aangetoond maar vertelt nergens wat je wilt bereiken.
Wat ik wil bereiken is dat ik bla['cwt'][3] of bla['cwt']['dfgfdg'] krijg, iig een subarray met een zelf bepaalde key. nou krijg ik in het tweede geval gewoon niks en blijft bla['cwt'] leeg en in het eerste geval krijg ik bla[''cwt][0], bla[''cwt][1] en bla[''cwt][2] cadeau, wat niet de bedoeling is.
Volgens alles wat ik google doe ik het gewoon goed.
KomtTijd...maandag 16 januari 2017 @ 09:49
Volgens mij (maar nogmaals dat is roestig) wordt een array altijd gevuld tot de hoogste key, en kan een array (zoals je ook zelf al zei) geen string keys bevatten, daar moet je een object voor gebruiken.

Dus volgens mij klopt het gewoon wat er gebeurt en kan wat jij wilt niet.

Maar ik geloof nooit dat hetgeen je wilt bereiken, is dat je een "bla['cwt'][3] of bla['cwt']['dfgfdg']" array-key hebt. Dat lijkt me eerder een middel om een doel te bereiken.
Skunk-mmaandag 16 januari 2017 @ 10:54
quote:
14s.gif Op maandag 16 januari 2017 09:49 schreef KomtTijd... het volgende:
Volgens mij (maar nogmaals dat is roestig) wordt een array altijd gevuld tot de hoogste key, en kan een array (zoals je ook zelf al zei) geen string keys bevatten, daar moet je een object voor gebruiken.

Dus volgens mij klopt het gewoon wat er gebeurt en kan wat jij wilt niet.

Maar ik geloof nooit dat hetgeen je wilt bereiken, is dat je een "bla['cwt'][3] of bla['cwt']['dfgfdg']" array-key hebt. Dat lijkt me eerder een middel om een doel te bereiken.
Het is een array die in php gemaakt is cwt staat daar in als: "cwt" => array()
Deze array is daarna met json_encode() in een cookie gezet.
Die cookie word uitgelezen in javascript en geparsed met JSON.parse (nadat de slashes zijn gestript en er ge-unescaped is) (en het is dus een object anders had ik toch uberhaupt al geen associative array in js)
In javascript wil ik records of net hoe je het wil noemen toevoegen aan de cwt subarray
Als ik in php $bla['cwt'][3] = "bla"; zou doen dan zou dat gewoon werken en zou er geen 0,1 en 2 zijn.
wat ik dus wil hebben is "cwt" => array("key1" => "waarde1", "key2" = "waarde2"..

En wat ik al vermoedde als ik in php dat cookie aanmaak en ipv cwt =>array() er al een waarde in doe, dus "cwt" =>array( 3 => array( 3, 5 ) ) dan werkt het wel gewoon, dan voegt ie wel gewoon normaal waardes eraan toe in javascript, maar als ik die array leeg laat, wat in eerste instantie de bedoeling is dan doet ie wat ik eerder al gezegd heb.

EDIT: Ik kan wel als ik "cwt" =>array() achteraan heb staan kan ik nadat ik json_encode heb gedaan substr($bla, 0, -3) (laatste 3 characters verwijderen, namelijk: []} ) en dan $bla .= {}} doen, dan werkt het wel, maar dat kan nooit de normale gang van zaken zijn.
maar het is nu dus eigenlijk een php vraag geworden denk ik.

[ Bericht 3% gewijzigd door Skunk-m op 16-01-2017 11:10:28 ]
Catch22-maandag 16 januari 2017 @ 11:12
Je maakt de cruciale denkfout te denken dat in javascript arrays zo werken als in PHP.
Skunk-mmaandag 16 januari 2017 @ 12:12
quote:
11s.gif Op maandag 16 januari 2017 11:12 schreef Catch22- het volgende:
Je maakt de cruciale denkfout te denken dat in javascript arrays zo werken als in PHP.
dat doe ik niet, de vraag is alleen hoe het wel werkt. en wat ik deed klopte alleen moest ik in php zorgen dat cwt niet als lege array maar leeg object erin stond, dus {} ipv [] het is mij alleen een raadsel hoe ik dat doe in php
nou is dus de vgraag hoe ik in php een lege array (of wat dan ook) neerzet zodat ie er na json_encode zo uitziet: {} ipv zo: []
Tijnmaandag 16 januari 2017 @ 12:32
quote:
0s.gif Op maandag 16 januari 2017 12:12 schreef Skunk-m het volgende:

[..]

nou is dus de vgraag hoe ik in php een lege array (of wat dan ook) neerzet zodat ie er na json_encode zo uitziet: {} ipv zo: []
1
2
3
4
<?php
$data
['dingen'] = new stdClass();
echo 
json_encode($data);
?>

Geeft:

1{"dingen":{}}
KomtTijd...maandag 16 januari 2017 @ 13:09
quote:
0s.gif Op maandag 16 januari 2017 12:12 schreef Skunk-m het volgende:

[..]

dat doe ik niet, de vraag is alleen hoe het wel werkt. en wat ik deed klopte alleen moest ik in php zorgen dat cwt niet als lege array maar leeg object erin stond, dus {} ipv [] het is mij alleen een raadsel hoe ik dat doe in php
nou is dus de vgraag hoe ik in php een lege array (of wat dan ook) neerzet zodat ie er na json_encode zo uitziet: {} ipv zo: []
Dat is al een hele andere vraag dan waar je mee begon ;)

Naast het antwoord van Tijn zou je ook naar de JSON_FORCE_OBJECT flag kunnen kijken.

edit: of wat JS oplossingen: http://stackoverflow.com/(...)vert-array-to-object

[ Bericht 8% gewijzigd door KomtTijd... op 16-01-2017 13:21:20 ]
Skunk-mmaandag 16 januari 2017 @ 15:10
Bedankt beide, nou komt het goed.
Maydiengozaterdag 21 januari 2017 @ 12:45
Hoi allemaal,

Ik heb een vraag over de beschikbaarheid van online tutorials, maar een apart topic hiervoor openen leek me niet nodig. Hopelijk kunnen jullie me helpen. :)

Al een tijdje ben ik bezig met tutorials volgen die HTML, CSS en JS behandelen, maar ik vind het lastig om mijn nieuwe skills echt te oefenen. Kennen jullie websites waar je volgens een soort stappenplan een simpel webappje opzet, waar HTML, CSS en JS allemaal aan bod komen?
Ser_Ciappellettozaterdag 21 januari 2017 @ 12:50
quote:
7s.gif Op zaterdag 21 januari 2017 12:45 schreef Maydiengo het volgende:
Hoi allemaal,

Ik heb een vraag over de beschikbaarheid van online tutorials, maar een apart topic hiervoor openen leek me niet nodig. Hopelijk kunnen jullie me helpen. :)

Al een tijdje ben ik bezig met tutorials volgen die HTML, CSS en JS behandelen, maar ik vind het lastig om mijn nieuwe skills echt te oefenen. Kennen jullie websites waar je volgens een soort stappenplan een simpel webappje opzet, waar HTML, CSS en JS allemaal aan bod komen?
Codecademy was best prima, maar volgens mij is het tegenwoordig vernacheld. Je kunt er eens een kijkje nemen.
BrainOverfloWzaterdag 21 januari 2017 @ 15:27
quote:
7s.gif Op zaterdag 21 januari 2017 12:45 schreef Maydiengo het volgende:
Hoi allemaal,

Ik heb een vraag over de beschikbaarheid van online tutorials, maar een apart topic hiervoor openen leek me niet nodig. Hopelijk kunnen jullie me helpen. :)

Al een tijdje ben ik bezig met tutorials volgen die HTML, CSS en JS behandelen, maar ik vind het lastig om mijn nieuwe skills echt te oefenen. Kennen jullie websites waar je volgens een soort stappenplan een simpel webappje opzet, waar HTML, CSS en JS allemaal aan bod komen?
Tutorials volgens heeft zeker zijn waarde in het leren van nieuwe talen en technieken. De volgende stap om je coding skills te oefenen is om zelf dingen te bouwen.

Het process van uitzoeken wat je allemaal nodig hebt voor een pagina, hoe je je code het beste kunt organiseren en het oplossen van de problemen waar je tegen aan loopt vind je niet in tutorials waar de instructeur dit allemaal al voor je uitgezocht heeft.

Wat je bijvoorbeeld kunt doen is naar een site als Dribbble gaan en te zoeken naar termen als app design of UI kit. Zoek een design uit wat je mooi vind en waarvan je het idee het zou kunnen bouwen en probeer het design uit te programmeren.

Je zou ook eens kunnen kijken naar JavaScript 30. Daar vind je 30 video tutorials van creative, kleine projectjes die je mee kunt bouwen. Zoals de naam al zegt is de serie vooral gericht op JavaScript, maar er zit ook wel wat CSS bij in.
Maydiengozaterdag 21 januari 2017 @ 16:20
quote:
0s.gif Op zaterdag 21 januari 2017 12:50 schreef Ser_Ciappelletto het volgende:

[..]

Codecademy was best prima, maar volgens mij is het tegenwoordig vernacheld. Je kunt er eens een kijkje nemen.
Ik ben bekend met Codeacademy, en dat zijn juist de tutorials die ik nu wel heb gezien. Toch bedankt voor de tip. :)
Maydiengozaterdag 21 januari 2017 @ 16:21
quote:
0s.gif Op zaterdag 21 januari 2017 15:27 schreef BrainOverfloW het volgende:

[..]

Tutorials volgens heeft zeker zijn waarde in het leren van nieuwe talen en technieken. De volgende stap om je coding skills te oefenen is om zelf dingen te bouwen.

Het process van uitzoeken wat je allemaal nodig hebt voor een pagina, hoe je je code het beste kunt organiseren en het oplossen van de problemen waar je tegen aan loopt vind je niet in tutorials waar de instructeur dit allemaal al voor je uitgezocht heeft.

Wat je bijvoorbeeld kunt doen is naar een site als Dribbble gaan en te zoeken naar termen als app design of UI kit. Zoek een design uit wat je mooi vind en waarvan je het idee het zou kunnen bouwen en probeer het design uit te programmeren.

Je zou ook eens kunnen kijken naar JavaScript 30. Daar vind je 30 video tutorials van creative, kleine projectjes die je mee kunt bouwen. Zoals de naam al zegt is de serie vooral gericht op JavaScript, maar er zit ook wel wat CSS bij in.
Heel erg bedankt. Ik ga hier even naar kijken. ^O^ Ik realiseer me dat ik zelf dingen moet gaan bouwen, maar het probleem is een beetje dat ik geen idee heb wat ik zou moeten/kunnen bouwen.
Catch22-zaterdag 21 januari 2017 @ 16:28
Kleine tip, kopieer/plak niets, maar type het over. Als je niet precies weet wat je overtypt, zoek de functie dan op op msn (Mozilla developer network)
Tijnzaterdag 21 januari 2017 @ 16:40
quote:
0s.gif Op zaterdag 21 januari 2017 16:21 schreef Maydiengo het volgende:

[..]

het probleem is een beetje dat ik geen idee heb wat ik zou moeten/kunnen bouwen.
Een todo list!
Maydiengozaterdag 21 januari 2017 @ 16:44
quote:
14s.gif Op zaterdag 21 januari 2017 16:40 schreef Tijn het volgende:

[..]

Een todo list!
Dat is wel een goeie inderdaad. Ik denk meteen te groot, maar ik kan natuurlijk klein beginnen.
Maydiengozaterdag 21 januari 2017 @ 16:44
quote:
0s.gif Op zaterdag 21 januari 2017 16:28 schreef Catch22- het volgende:
Kleine tip, kopieer/plak niets, maar type het over. Als je niet precies weet wat je overtypt, zoek de functie dan op op msn (Mozilla developer network)
Zo wou ik het zeker gaan doen.
Catch22-zaterdag 21 januari 2017 @ 16:46
Gebruik ook een goede ide. Ik ben erg fan van visual studio code.
#ANONIEMzaterdag 21 januari 2017 @ 16:52
De IDE's van Jetbrains kan je een gratis gebruiken als student
Catch22-zaterdag 21 januari 2017 @ 16:53
quote:
1s.gif Op zaterdag 21 januari 2017 16:52 schreef JanCees het volgende:
De IDE's van Jetbrains kan je een gratis gebruiken als student
Vind ik persoonlijk vrij log voor frontend
Maydiengozondag 22 januari 2017 @ 10:45
quote:
0s.gif Op zaterdag 21 januari 2017 16:46 schreef Catch22- het volgende:
Gebruik ook een goede ide. Ik ben erg fan van visual studio code.
Heb deze gisteren gedownload. Werkt inderdaad erg lekker.
Maydiengozondag 22 januari 2017 @ 13:02
Nog een vraag, over iets anders weer. Zijn er websites/tools waar je je code doorheen kan halen, waarna je code wordt beoordeeld op juistheid en stijl, mogelijk zelfs met suggesties voor verbetering?
Tijnzondag 22 januari 2017 @ 13:08
quote:
2s.gif Op zondag 22 januari 2017 13:02 schreef Maydiengo het volgende:
Nog een vraag, over iets anders weer. Zijn er websites/tools waar je je code doorheen kan halen, waarna je code wordt beoordeeld op juistheid en stijl, mogelijk zelfs met suggesties voor verbetering?
Zoiets als W3C Validator of JSLint?
FlippingCoinzondag 22 januari 2017 @ 13:17
quote:
2s.gif Op zondag 22 januari 2017 13:02 schreef Maydiengo het volgende:
Nog een vraag, over iets anders weer. Zijn er websites/tools waar je je code doorheen kan halen, waarna je code wordt beoordeeld op juistheid en stijl, mogelijk zelfs met suggesties voor verbetering?
SonarQube kan dat redelijk uitgebreid doen, alleen is dat opzetten misschien een beetje een overkill voor hetgeen je wilt maken?
Maydiengozondag 22 januari 2017 @ 13:18
quote:
1s.gif Op zondag 22 januari 2017 13:17 schreef FlippingCoin het volgende:

[..]

SonarQube kan dat redelijk uitgebreid doen, alleen is dat opzetten misschien een beetje een overkill voor hetgeen je wilt maken?
Is SonarQube niet voor Java bedoeld?
Maydiengozondag 22 januari 2017 @ 13:19
quote:
5s.gif Op zondag 22 januari 2017 13:08 schreef Tijn het volgende:

[..]

Zoiets als W3C Validator of JSLint?
Dit inderdaad. Thanks. :)
FlippingCoinzondag 22 januari 2017 @ 13:20
quote:
0s.gif Op zondag 22 januari 2017 13:18 schreef Maydiengo het volgende:

[..]

Is SonarQube niet voor Java bedoeld?
Niet meer, heb recent nog een ontwikkelstraat opgezet voor een applicatie deels bestaand uit javascript.

Edit: niet meer als niet meer alleen voor Java.
Maydiengozondag 22 januari 2017 @ 13:21
quote:
1s.gif Op zondag 22 januari 2017 13:20 schreef FlippingCoin het volgende:

[..]

Niet meer, heb recent nog een ontwikkelstraat opgezet voor een applicatie deels bestaand uit javascript.
Oke, maar dat lijkt me inderdaad iets te uitgebreid voor hetgene wat ik wil doen (namelijk mijn eigen, simpele code reviewen).
FlippingCoinzondag 22 januari 2017 @ 13:26
quote:
0s.gif Op zondag 22 januari 2017 13:21 schreef Maydiengo het volgende:

[..]

Oke, maar dat lijkt me inderdaad iets te uitgebreid voor hetgene wat ik wil doen (namelijk mijn eigen, simpele code reviewen).
Ja voor mijn eigen projecten zou ik het ook niet zo snel opzetten, werkt wel best vet.
Maydiengozondag 22 januari 2017 @ 13:28
quote:
1s.gif Op zondag 22 januari 2017 13:26 schreef FlippingCoin het volgende:

[..]

Ja voor mijn eigen projecten zou ik het ook niet zo snel opzetten, werkt wel best vet.
Toch bedankt voor de tip. ^O^
Skunk-mzaterdag 28 januari 2017 @ 18:21
Even een onzinnig vraagje tussendoor:

Ik heb een iframe en daar heb ik sandbox met alle allow opties die er zijn behalve allow-popup.. waarom krijg ik in mn console te zien:
"Een iframe met zowel allow-scripts als allow-same-origin voor zijn sandbox-attribuut kan zijn sandboxing verwijderen."
??
want het lijkt popunders te blokkeren, wat mijn hele doel was.
mstxzaterdag 28 januari 2017 @ 19:16
quote:
0s.gif Op zaterdag 28 januari 2017 18:21 schreef Skunk-m het volgende:
Even een onzinnig vraagje tussendoor:

Ik heb een iframe en daar heb ik sandbox met alle allow opties die er zijn behalve allow-popup.. waarom krijg ik in mn console te zien:
"Een iframe met zowel allow-scripts als allow-same-origin voor zijn sandbox-attribuut kan zijn sandboxing verwijderen."
??
want het lijkt popunders te blokkeren, wat mijn hele doel was.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
quote:
When the embedded document has the same origin as the main page, it is strongly discouraged to use both allow-scripts and allow-same-origin at the same time, as that allows the embedded document to programmatically remove the sandbox attribute. Although it is accepted, this case is no more secure than not using the sandbox attribute.
Merkiezondag 29 januari 2017 @ 12:02
Jammer dat het topic beetje dood is. Maar ik wilde even zeggen dat ik afgelopen weken aan de slag ben gegaan met Vue, en dat is me uitstekend bevallen. Zeer eenvoudig in gebruik, en ook snel te leren. Als je nog veel met jQuery werkt zou ik ernstig overwegen je methodiek te herzien :).
BrainOverfloWzondag 29 januari 2017 @ 16:26
quote:
1s.gif Op zondag 29 januari 2017 12:02 schreef Merkie het volgende:
Jammer dat het topic beetje dood is. Maar ik wilde even zeggen dat ik afgelopen weken aan de slag ben gegaan met Vue, en dat is me uitstekend bevallen. Zeer eenvoudig in gebruik, en ook snel te leren. Als je nog veel met jQuery werkt zou ik ernstig overwegen je methodiek te herzien :).
Hier sluit ik me graag bij aan. Ik werk nu ruim een jaar met Vue en wil echt niet meer terug naar jQuery als basis framework voor mijn sites. Ik gebruik jQuery alleen nog voor een aantal plug-ins.

Het werkt zo veel fijner om niet voor iedere actie de DOM in te hoeven duiken en handmatig ieder DOM element aan te passen. Je hebt één centraal object waarin je de data opslaat en de pagina past zich automatisch aan bij iedere wijziging die daarin gebeurt.
Het scheelt ook een hoop ids, classes en data attributen in je HTML om je jQuery aan vast te binden.

Een simpel voorbeeldje:

Je hebt een knop op je pagina die een plaatje moet tonen/verbergen bij iedere klik.

In jQuery moet je dan die knop zoeken, bepalen wat de status van tonen is, het plaatje zoeken en aan passen, de tekst op de knop aan passen en de status wijzigen.

HTML
1
2
<button id="toggleImage" data-show-image="1">Hide image</button>
<img id="image" src="image.jpg">

JS
1
2
3
4
5
6
7
8
9
10
11
12
13
$("#toggleImage").click(function(){
    var showImage = $(this).attr("data-show-image");

  if(showImage == "0"){
        $("#image").show();
        $(this).html("Hide image");
        $(this).attr("data-show-image", "1");        
    }else{
        $("#image").hide();
        $(this).html("Show image");
        $(this).attr("data-show-image", "0");        
    }
});

In Vue draai je die denkwijze om. Je neemt een attribute om de status in op te slaan (showImage) en bepaald van daaruit hoe de pagina er uit moet zien. De knop past alleen dat attribute aan en de rest springt vanzelf in de staat waarin het moet staan.

HTML
1
2
3
4
<button @click="showImage = !showImage">
    {{ showImage ? 'Hide image' : 'Show Image'}}
</button>
<img src="image.jpg" v-show="showImage">

JS
1
2
3
data : {
  showImage : true
}

Voor wie geïnteresseerd is, Vuecasts is een goede, gratis, tutorial serie om kennis met Vue te maken.
Catch22-zondag 29 januari 2017 @ 17:00
Ik heb Vue een beetje langs me heen laten gaan. Ik zit vol in Angular2 atm.

Als je jezelf serieus wil nemen als frontender moet je angular2/vue/react tenminste kennen en je met tenminste 1 van de 3 comfortabel voelen.
#ANONIEMzondag 29 januari 2017 @ 17:45
quote:
11s.gif Op zondag 29 januari 2017 17:00 schreef Catch22- het volgende:
Ik heb Vue een beetje langs me heen laten gaan. Ik zit vol in Angular2 atm.

Als je jezelf serieus wil nemen als frontender moet je angular2/vue/react tenminste kennen en je met tenminste 1 van de 3 comfortabel voelen.
Ik ken er geen een :@
Catch22-zondag 29 januari 2017 @ 18:31
quote:
0s.gif Op zondag 29 januari 2017 17:45 schreef JanCees het volgende:

[..]

Ik ken er geen een :@
Dan zou ik toch aan de slag gaan met 1 van die drie. Al was het alleen al om de concepten te leren kennen en te weten wat ze kunnen. Dan kan je voor jezelf wel uitmaken of je het echt wil gebruiken.

Ben nu zelf bezig met een nieuwe webplatform wat we op werk gaan gebruiken. Play framework als API waar de backenders in werken, ik alles in een angular 2 app aan de voorkant.
FlippingCoinzondag 29 januari 2017 @ 22:10
quote:
1s.gif Op zondag 29 januari 2017 18:31 schreef Catch22- het volgende:

[..]

Dan zou ik toch aan de slag gaan met 1 van die drie. Al was het alleen al om de concepten te leren kennen en te weten wat ze kunnen. Dan kan je voor jezelf wel uitmaken of je het echt wil gebruiken.

Ben nu zelf bezig met een nieuwe webplatform wat we op werk gaan gebruiken. Play framework als API waar de backenders in werken, ik alles in een angular 2 app aan de voorkant.
Recent ook wat gemaakt met Angular2, werkt super chill met de CLI; alleen is heel veel documentatie online veroudert doordat het geschreven is voor oudere beta releases, was wel een struggle af en toe.
Catch22-zondag 29 januari 2017 @ 22:12
quote:
0s.gif Op zondag 29 januari 2017 22:10 schreef FlippingCoin het volgende:

[..]

Recent ook wat gemaakt met Angular2, werkt super chill met de CLI; alleen is heel veel documentatie online veroudert doordat het geschreven is voor oudere beta releases, was wel een struggle af en toe.
Je hebt de docs toch? Die zijn redelijk compleet. En de meeste artikelen zijn wel up to date, van wat ik tegen kom
FlippingCoinzondag 29 januari 2017 @ 22:24
quote:
1s.gif Op zondag 29 januari 2017 22:12 schreef Catch22- het volgende:

[..]

Je hebt de docs toch? Die zijn redelijk compleet. En de meeste artikelen zijn wel up to date, van wat ik tegen kom
Ik heb in de docs niet kunnen vinden hoe ik op de jusite manier een mock van een service maak, en ik kwam verder bijna alleen maar verouderde voorbeelden tegen helaas.
Merkiezondag 29 januari 2017 @ 22:59
quote:
11s.gif Op zondag 29 januari 2017 17:00 schreef Catch22- het volgende:
Ik heb Vue een beetje langs me heen laten gaan. Ik zit vol in Angular2 atm.

Als je jezelf serieus wil nemen als frontender moet je angular2/vue/react tenminste kennen en je met tenminste 1 van de 3 comfortabel voelen.
Ik lees veel slechte ervaringen met Angular 2, enorm bloated en veel regels code nodig om iets voor elkaar te krijgen. React heb ik ook over ingelezen (niet daadwerkelijk uitgeprobeerd), maar dat lijkt me ook een toppertje (doet ongeveer hetzelfde als Vue, alleen genereer je HTML-code met Javascript, met Vue pas je Javascript toe op HTML-code).

Voor Vue heb je ook een development template in Node, met o.a. Webpack en hot-reloading standaard ingebouwd. Dit werkt ook enorm prettig (npm run build en je hebt direct een prachtige build klaarstaan die je zo op een server kan gooien).
Catch22-zondag 29 januari 2017 @ 23:02
Angular 2 is echt een mvc framework, daardoor heb je wat meer structuur en dus overhead.

Dat tweede heb ik ook met mijn angular applicatie.

Begrijp me niet verkeerd, ik zeg niet dat je angular, react of Vue moet gebruiken, maar wel dat je moet weten wat het biedt

[ Bericht 30% gewijzigd door Catch22- op 29-01-2017 23:12:10 ]
#ANONIEMdinsdag 31 januari 2017 @ 10:31
quote:
1s.gif Op zondag 29 januari 2017 18:31 schreef Catch22- het volgende:

[..]

Dan zou ik toch aan de slag gaan met 1 van die drie. Al was het alleen al om de concepten te leren kennen en te weten wat ze kunnen. Dan kan je voor jezelf wel uitmaken of je het echt wil gebruiken.

Ben nu zelf bezig met een nieuwe webplatform wat we op werk gaan gebruiken. Play framework als API waar de backenders in werken, ik alles in een angular 2 app aan de voorkant.
Klopt, ik ga me binnenkort eens verdiepen erin.
Catch22-dinsdag 31 januari 2017 @ 11:20
quote:
0s.gif Op dinsdag 31 januari 2017 10:31 schreef JanCees het volgende:

[..]

Klopt, ik ga me binnenkort eens verdiepen erin.
Ik zou react of Vue doen, angular2 heeft nogal een steile learning curve als je het mij vraagt
Blobjedonderdag 2 februari 2017 @ 19:32
Hopelijk is dit het goede topic voor mijn vraag.

Via een affiliate programma heb ik een Javascript gekregen om te plaatsen op mijn (wordpress)site voor een banner feed. Onder internet explorer laad dit script altijd. Onder Chrome en Safari echter niet. Enkel na (force) refresh is de kans ongeveer 1 op 5 dat het script daadwerkelijk zal laden. De overige 4 van de 5 keren wordt er niks geladen.

Mocht iemand hier direct een oplossing voor weten, ik ben één en al oor. ^O^ Mocht iemand een link nodig hebben graag even dm, wil de site hier niet in dit topic plaatsen.

Edit: Opgelost

[ Bericht 1% gewijzigd door Blobje op 02-02-2017 23:54:04 ]
Qunixdonderdag 2 februari 2017 @ 19:55
Ik wil even hier klagen dat clip-path en box-shadow niet met elkaar samengaan, net als mask en box-shadow }:|
Qunixdonderdag 2 februari 2017 @ 19:58
Over de posts hierboven.. Het gaat niet om de framework zelf, maar om de gedachtegang. De oplossing voor problemen die er zijn, bijvoorbeeld 2-way-bindings... Dat lossen de genoemde frameworks op. Zelf vind ik tot nu toe Vue wel lekker.
TwenteFCdonderdag 2 februari 2017 @ 21:27
Een vraag waar ik eigenlijk al een tijd over twijfel en nu het toch over Vue gaat.

Situatie; Een ecommerce website met aan de linkerkant verschillende facetten die je kan aanklikken waarna de de content aan de rechterkant verandert en de overgebleven producten in beeld staan.

Welke oplossing zouden jullie kiezen en waarom als het gaat om het ophalen en tonen van die content? JSON, of direct html terugkrijgen van je backend?

Mijn developer gevoel zegt in eerste instantie json, maar gewoon direct een HTML view erin pompen werkt ook gewoon praktisch en snel.

Wanneer ik even snel langs de grote websites ga dan zie ik dat Coolblue gewoon een HTML response opvraagt. Tweakers daarentegen kiest een middenweg JSON met daarin HTML. Maar Bol.com doet alles met een JSON response die daarna verwerkt wordt.

:P Een van die situaties waar ik gewoon links of rechtsom geen voorkeur heb omdat ik niet weet wat ik ervan moet vinden.
PimDdonderdag 2 februari 2017 @ 21:32
Ik zou kijken of je dezelfde views kunt gebruiken aan de backend en aan de front-end. Aantal jaren geleden gedaan voor een hybride app en dat werkte prima. Van Mustache zijn er bijv. .NET implementaties te vinden, Zelf krijg ik altijd jeuk als ik zo'n hele lap HTML uitgespuwd zie worden, maar het is wel verdomd makkelijk :)
Catch22-donderdag 2 februari 2017 @ 21:36
Je kan serverside renderen, maar ik krijg jeuk van HTML op de backend. Ik zou react of angular gebruiken met json denk ik.
KomtTijd...donderdag 2 februari 2017 @ 23:22
Voordeel van JSON is dat je backend lekker clean blijft, en je hebt gelijk een API waar je eventueel een app of 3rd party software tegenaan kunt (laten) timmeren.
Tweakers stuurt natuurlijk de (opgemaakte) inhoud van een post door, dat is gewoon opgeslagen als HTML. Daar lijkt me niet zoveel mis mee. Ik denk ook dat je daar de grens moet trekken: objecten e.d. netjes JSON encoden, maar eventuele html-content daarin gewoon doorsturen zoals het opgeslagen staat.
Catch22-vrijdag 3 februari 2017 @ 00:01
quote:
14s.gif Op donderdag 2 februari 2017 23:22 schreef KomtTijd... het volgende:
Voordeel van JSON is dat je backend lekker clean blijft, en je hebt gelijk een API waar je eventueel een app of 3rd party software tegenaan kunt (laten) timmeren.
Tweakers stuurt natuurlijk de (opgemaakte) inhoud van een post door, dat is gewoon opgeslagen als HTML. Daar lijkt me niet zoveel mis mee. Ik denk ook dat je daar de grens moet trekken: objecten e.d. netjes JSON encoden, maar eventuele html-content daarin gewoon doorsturen zoals het opgeslagen staat.
Dat komt uit een editor. Dat is anders dan een template parsen
Merkievrijdag 3 februari 2017 @ 00:09
quote:
0s.gif Op donderdag 2 februari 2017 21:36 schreef Catch22- het volgende:
Je kan serverside renderen, maar ik krijg jeuk van HTML op de backend. Ik zou react of angular gebruiken met json denk ik.
Waarom? Ik vind het persoonlijk ook prettig om de layout in de client te renderen, maar het is wel een relatief zware belasting voor de client. En SEO.
quote:
19s.gif Op donderdag 2 februari 2017 21:27 schreef TwenteFC het volgende:
Een vraag waar ik eigenlijk al een tijd over twijfel en nu het toch over Vue gaat.

Situatie; Een ecommerce website met aan de linkerkant verschillende facetten die je kan aanklikken waarna de de content aan de rechterkant verandert en de overgebleven producten in beeld staan.

Welke oplossing zouden jullie kiezen en waarom als het gaat om het ophalen en tonen van die content? JSON, of direct html terugkrijgen van je backend?

Mijn developer gevoel zegt in eerste instantie json, maar gewoon direct een HTML view erin pompen werkt ook gewoon praktisch en snel.

Wanneer ik even snel langs de grote websites ga dan zie ik dat Coolblue gewoon een HTML response opvraagt. Tweakers daarentegen kiest een middenweg JSON met daarin HTML. Maar Bol.com doet alles met een JSON response die daarna verwerkt wordt.

:P Een van die situaties waar ik gewoon links of rechtsom geen voorkeur heb omdat ik niet weet wat ik ervan moet vinden.
Ik zou voor JSON kiezen.
Qunixvrijdag 3 februari 2017 @ 08:47
Het verschil zit hem in het maken van HTML door JavaScript (bijvoorbeeld een Vue of Angular, of zelfs native) of dat het al reeds gemaakt is door de backend. Het genereren van elementen (document.createElement) kost tijd (in millisecondes) en browser geheugen, en kan een vertragende factor zijn (performance) als het gaat om het maken van enorm veel DOMelementen. Dan is zelfs een Angular of een Vue niet voldoende en wil je HTML terugkrijgen van de backend. Juist daarvoor is paginering uitgevonden (of lazyload). Dus de vraag is meer, hoeveel product tiles wil ik tonen en ga ik paginering/lazyload implementeren? Zo nee, gebruik HTML van de backend. Anders is het prima om JSON te gebruiken. Zo bepaalt de frontender hoe de HTML eruit gaat zien en is de JSON het contract tussen de backend (met zijn model) en de frontend.
KomtTijd...vrijdag 3 februari 2017 @ 15:44
quote:
7s.gif Op vrijdag 3 februari 2017 08:47 schreef Qunix het volgende:
Het verschil zit hem in het maken van HTML door JavaScript (bijvoorbeeld een Vue of Angular, of zelfs native) of dat het al reeds gemaakt is door de backend. Het genereren van elementen (document.createElement) kost tijd (in millisecondes) en browser geheugen, en kan een vertragende factor zijn (performance) als het gaat om het maken van enorm veel DOMelementen.
...Maar die tijd is gratis. Twig renderen kost jóúw cpu cycles 7.gif
Catch22-vrijdag 3 februari 2017 @ 15:48
quote:
0s.gif Op vrijdag 3 februari 2017 00:09 schreef Merkie het volgende:
Waarom? Ik vind het persoonlijk ook prettig om de layout in de client te renderen, maar het is wel een relatief zware belasting voor de client. En SEO.
omdat ik het dan zelf onder controle heb. Wij hebben hier op de zaak een heel stricte scheiding van front en back. En ik wil niet in de backend klooien, of developers hoeven storen voor een classname.

SEO is voor mij een non-issue want we bouwen enkel afgeschermde applicaties. Google indexeert javascriptgenerated content overigens wel
Skunk-mzondag 5 februari 2017 @ 00:12
Vraagje..

Met window.screenY krijg ik de afstand tussen de bovenkant van het scherm en de bovenkant van de browser (de titelbalk zeg maar of net hoe dat heet) in pixels..
Maar hoe krijg ik de afstand van de bovenkant van het scherm tot de bovenkant van het vak waar de website in is? dus onder de titelbalk, tabs, urlbalk, bladwijzers etc. gewoon het vak waar de webpagina te zien is.
BrainOverfloWzondag 5 februari 2017 @ 00:26
quote:
0s.gif Op zondag 5 februari 2017 00:12 schreef Skunk-m het volgende:
Vraagje..

Met window.screenY krijg ik de afstand tussen de bovenkant van het scherm en de bovenkant van de browser (de titelbalk zeg maar of net hoe dat heet) in pixels..
Maar hoe krijg ik de afstand van de bovenkant van het scherm tot de bovenkant van het vak waar de website in is? dus onder de titelbalk, tabs, urlbalk, bladwijzers etc. gewoon het vak waar de webpagina te zien is.
Volgens mij zoek je Window.innerHeight
Skunk-mzondag 5 februari 2017 @ 00:41
quote:
0s.gif Op zondag 5 februari 2017 00:26 schreef BrainOverfloW het volgende:

[..]

Volgens mij zoek je Window.innerHeight
Dat is niet wat ik zoek...

Ik dacht misschien kan ik window.outerHeight-window.innerHeight en dat optellen bij window.screenY , maar dat is ook geen optie, want sommige browsers hebben ook onderaan een balk zitten en bovendien klopt het resultaat niet als ik hier in firefox window.outerHeight-window.innerHeight doe.. op het oog lijkt het dat hij de titelbalk niet meepakt met outerheight..
terwijl dat volgens deze afbeelding wel zou moeten:

=FirefoxInnerVsOuterHeight2.png

Maar wat ik dus wil is de afstand tussen de bovenkant van het scherm, de monitor, de screen tot de bovenkant van wat in die afbeelding is aangegeven als de bovenkant van innerheight.
BrainOverfloWzondag 5 februari 2017 @ 00:52
quote:
0s.gif Op zondag 5 februari 2017 00:41 schreef Skunk-m het volgende:

[..]

Dat is niet wat ik zoek...

Ik dacht misschien kan ik window.outerHeight-window.innerHeight en dat optellen bij window.screenY , maar dat is ook geen optie, want sommige browsers hebben ook onderaan een balk zitten en bovendien klopt het resultaat niet als ik hier in firefox window.outerHeight-window.innerHeight doe.. op het oog lijkt het dat hij de titelbalk niet meepakt met outerheight..
terwijl dat volgens deze afbeelding wel zou moeten:

[ afbeelding ]

Maar wat ik dus wil is de afstand tussen de bovenkant van het scherm, de monitor, de screen tot de bovenkant van wat in die afbeelding is aangegeven als de bovenkant van innerheight.
Dat zal lastig worden om voor elkaar te krijgen denk ik. Naast eventuele extra balken aan de onderkant van de browser kun je er ook niet vanuit gaan dat de gebruiker zijn scherm gemaximaliseerd heeft staan. En de positie van het browserscherm t.o.v. de hoeken van de monitor is bij mijn weten niet iets wat je op kunt vragen.

Wat is de reden dat je dit zou willen weten?
Skunk-mzondag 5 februari 2017 @ 01:07
quote:
0s.gif Op zondag 5 februari 2017 00:52 schreef BrainOverfloW het volgende:

[..]

Dat zal lastig worden om voor elkaar te krijgen denk ik. Naast eventuele extra balken aan de onderkant van de browser kun je er ook niet vanuit gaan dat de gebruiker zijn scherm gemaximaliseerd heeft staan. En de positie van het browserscherm t.o.v. de hoeken van de monitor is bij mijn weten niet iets wat je op kunt vragen.

Wat is de reden dat je dit zou willen weten?
hoezo is dat niet iets dat je op kunt vragen, window.screenY geeft je die waarde.

Maar ik heb nou iig een mogelijkheid gevonden al is het misschien een omslachtige en er is een event voor nodig..

Met event.screenY-event.clientY krijg ik het juiste antwoord, maar daar moet ik toch zonder event voor te gebruiken gewoon kunnen..?
Skunk-mzondag 5 februari 2017 @ 22:48
Heeft er iemand enig idee hoe ik dit kan doen zonder dat ik er een muisknop voor nodig heb? ik moet het bij het laden van de pagina kunnen weten.
Tijnzondag 5 februari 2017 @ 22:53
quote:
0s.gif Op zondag 5 februari 2017 22:48 schreef Skunk-m het volgende:
Heeft er iemand enig idee hoe ik dit kan doen zonder dat ik er een muisknop voor nodig heb? ik moet het bij het laden van de pagina kunnen weten.
Dan gebruik je het DOMContentLoaded event.
Skunk-mzondag 5 februari 2017 @ 23:34
quote:
14s.gif Op zondag 5 februari 2017 22:53 schreef Tijn het volgende:

[..]

Dan gebruik je het DOMContentLoaded event.
wat moet ik daarmee doen dan, hoe krijg ik daarmee de afstand van de bovenkant van het scherm tot de bovenkant van de pagina/viewport?
Tijnzondag 5 februari 2017 @ 23:36
quote:
0s.gif Op zondag 5 februari 2017 23:34 schreef Skunk-m het volgende:

[..]

wat moet ik daarmee doen dan, hoe krijg ik daarmee de afstand van de bovenkant van het scherm tot de bovenkant van de pagina/viewport?
Er staat een voorbeeld in de link :)
Skunk-mzondag 5 februari 2017 @ 23:44
quote:
2s.gif Op zondag 5 februari 2017 23:36 schreef Tijn het volgende:

[..]

Er staat een voorbeeld in de link :)
maar er staat geen voorbeeld van wat ik moet hebben, hoe heb jij in gedachten dat ik daarmee de afstand van de bovenkant van het scherm tot de bovenkant van de viewport kan krijgen?
Enige manier die ik zelf op creatieve wijze heb gevonden is door een muisklik te egebruiken en dan de positie van de muis binnen de viewport (clientY) af te trekken van de positie van de muis op het scherm (screenY), maar hoe krijg ik die afstand zonder muisklik (dus op een totaal andere manier, want voor zover ik weet moet je op zn minst een mouseover hebben om wat ik nu doe te doen en die heb je niet bij het laden van de pagina.
Tijnmaandag 6 februari 2017 @ 09:05
quote:
0s.gif Op zondag 5 februari 2017 23:44 schreef Skunk-m het volgende:

[..]

maar er staat geen voorbeeld van wat ik moet hebben, hoe heb jij in gedachten dat ik daarmee de afstand van de bovenkant van het scherm tot de bovenkant van de viewport kan krijgen?
Enige manier die ik zelf op creatieve wijze heb gevonden is door een muisklik te egebruiken en dan de positie van de muis binnen de viewport (clientY) af te trekken van de positie van de muis op het scherm (screenY), maar hoe krijg ik die afstand zonder muisklik (dus op een totaal andere manier, want voor zover ik weet moet je op zn minst een mouseover hebben om wat ik nu doe te doen en die heb je niet bij het laden van de pagina.
Ah zo, dus je moet een mouse event hebben. Mousemove een optie?
Skunk-mmaandag 6 februari 2017 @ 20:41
quote:
2s.gif Op maandag 6 februari 2017 09:05 schreef Tijn het volgende:

[..]

Ah zo, dus je moet een mouse event hebben. Mousemove een optie?
Nee ik moet eigenlijk een oplossing hebben zonder mouse event, ik moet die afstand weten bij het laden van de pagina.
Tijnmaandag 6 februari 2017 @ 20:44
quote:
0s.gif Op maandag 6 februari 2017 20:41 schreef Skunk-m het volgende:

[..]

Nee ik moet eigenlijk een oplossing hebben zonder mouse event, ik moet die afstand weten bij het laden van de pagina.
Mmmm, ik weet niet of dat kan. Sowieso gaat het eigenlijk buiten de scope van waar een webpagina zich mee bezig houdt.
mstxvrijdag 19 mei 2017 @ 22:21
dimmakwoensdag 15 november 2017 @ 08:53
Back in the days van WMCity was ik goed in HTML/CSS. De laatste jaren is die kennis wel wat verwaterd maar de basis is er nog, daarbij komt dat er nu ook gewerkt wordt met HTML5.

Kunnen jullie mij een boek aanraden die niets voor beginners is, maar de nieuwe technieken aanpakt? En eventueel een boek over Bootstrap?
Crutchdinsdag 28 november 2017 @ 12:10
quote:
0s.gif Op woensdag 15 november 2017 08:53 schreef dimmak het volgende:
Back in the days van WMCity was ik goed in HTML/CSS. De laatste jaren is die kennis wel wat verwaterd maar de basis is er nog, daarbij komt dat er nu ook gewerkt wordt met HTML5.

Kunnen jullie mij een boek aanraden die niets voor beginners is, maar de nieuwe technieken aanpakt? En eventueel een boek over Bootstrap?
Het hele internet staat vol met dat soort dingen. Begin bijvoorbeeld eens de documentatie van Bootstrap te lezen.

Boeken zijn wmb zeer achterhaald en zeker m.b.t voorbeelden zijn er online veel betere voorbeelden en zogenaamde (interactieve) tutorials te vinden.
dimmakdinsdag 28 november 2017 @ 12:15
quote:
0s.gif Op dinsdag 28 november 2017 12:10 schreef Crutch het volgende:

[..]

Het hele internet staat vol met dat soort dingen. Begin bijvoorbeeld eens de documentatie van Bootstrap te lezen.

Boeken zijn wmb zeer achterhaald en zeker m.b.t voorbeelden zijn er online veel betere voorbeelden en zogenaamde (interactieve) tutorials te vinden.
Daar ben ik al aan begonnen. Ik kwam eigenlijk tot de conclusie dat Bootstrap een beetje overbodig is voor een layout en ik beter from scratch kun schrijven. Of zie ik dat verkeerd?
mstxdinsdag 28 november 2017 @ 12:25
quote:
0s.gif Op dinsdag 28 november 2017 12:15 schreef dimmak het volgende:

[..]

Daar ben ik al aan begonnen. Ik kwam eigenlijk tot de conclusie dat Bootstrap een beetje overbodig is voor een layout en ik beter from scratch kun schrijven. Of zie ik dat verkeerd?
Als je alles handmatig wil doen (incl responsive maken etc), veel plezier maar mij niet gezien hoor. Als het meer dan een simpele pagina is gebruik ik gewoon een framework, dat scheelt veel kostbare ontwikkeltijd doordat je zelf niet steeds het wiel opnieuw hoeft uit te vinden.
Crutchdinsdag 28 november 2017 @ 12:27
quote:
0s.gif Op dinsdag 28 november 2017 12:15 schreef dimmak het volgende:

[..]

Daar ben ik al aan begonnen. Ik kwam eigenlijk tot de conclusie dat Bootstrap een beetje overbodig is voor een layout en ik beter from scratch kun schrijven. Of zie ik dat verkeerd?
Dat hangt af van wat je wil maken.
Overigens is bootstrap niet één vast pakket. Je er bijvoorbeeld voor kiezen alleen het grid-systeem te gebruiken. Daarmee bespaar je jezelf al een hoop gedoe met het plaatsen en responsive maken van je layout.
dimmakdinsdag 28 november 2017 @ 12:35
quote:
1s.gif Op dinsdag 28 november 2017 12:25 schreef mstx het volgende:

[..]

Als je alles handmatig wil doen (incl responsive maken etc), veel plezier maar mij niet gezien hoor. Als het meer dan een simpele pagina is gebruik ik gewoon een framework, dat scheelt veel kostbare ontwikkeltijd doordat je zelf niet steeds het wiel opnieuw hoeft uit te vinden.
quote:
0s.gif Op dinsdag 28 november 2017 12:27 schreef Crutch het volgende:

[..]

Dat hangt af van wat je wil maken.
Overigens is bootstrap niet één vast pakket. Je er bijvoorbeeld voor kiezen alleen het grid-systeem te gebruiken. Daarmee bespaar je jezelf al een hoop gedoe met het plaatsen en responsive maken van je layout.
Ok. Ja het hele framework leek mij een beetje te veel van het goede om te gebruiken. Ik ga eerst wel aan de slag met HTML5, CSS en JS om dat bij te spijkeren.
_--_vrijdag 29 december 2017 @ 18:18
Ik heb dus de volgende site: http://themuurtje.me en wil er graag een tijdlimiet op zetten van 30 seconden, anders wordt er enorm gespammed. :')

edit: trek je niets aan van die scripts, ik hem mensen gevraagd om te injecteren om veiligheid te testen.
Lightzaterdag 30 december 2017 @ 01:03
quote:
10s.gif Op vrijdag 29 december 2017 18:18 schreef _--_ het volgende:
Ik heb dus de volgende site: http://themuurtje.me en wil er graag een tijdlimiet op zetten van 30 seconden, anders wordt er enorm gespammed. :')
Hoe precies denk je dat spammen tegen te gaan door een tijdlimiet in te stellen? (En wat voor limiet moet dat dan zijn?)
_--_dinsdag 2 januari 2018 @ 00:55
quote:
0s.gif Op zaterdag 30 december 2017 01:03 schreef Light het volgende:

[..]

Hoe precies denk je dat spammen tegen te gaan door een tijdlimiet in te stellen? (En wat voor limiet moet dat dan zijn?)
Mensen hebben dus blijkbaar zin om achterelkaar berichten te schrijven. Als je er een tijdslimiet opzet moeten ze steeds 30 seconden wachten voordat ze weer een bericht kunnen versturen. Hierdoor verminderd de drang tot spammen. (tenzij je diehard bent :P )
#ANONIEMdinsdag 2 januari 2018 @ 08:26
quote:
10s.gif Op dinsdag 2 januari 2018 00:55 schreef _--_ het volgende:

[..]

Mensen hebben dus blijkbaar zin om achterelkaar berichten te schrijven. Als je er een tijdslimiet opzet moeten ze steeds 30 seconden wachten voordat ze weer een bericht kunnen versturen. Hierdoor verminderd de drang tot spammen. (tenzij je diehard bent :P )
Maar dit ga je niet oplossen met Javascript, en al helemaal niet met HTML of CSS. Hiervoor moet je server-side zijn.
vallisarosadinsdag 2 januari 2018 @ 10:40
quote:
14s.gif Op dinsdag 2 januari 2018 08:26 schreef d4v1d het volgende:

[..]

Maar dit ga je niet oplossen met Javascript, en al helemaal niet met HTML of CSS. Hiervoor moet je server-side zijn.
Dit, net als de validatie van je patterns en required velden
Crutchwoensdag 3 januari 2018 @ 20:45
quote:
14s.gif Op dinsdag 2 januari 2018 08:26 schreef d4v1d het volgende:

[..]

Maar dit ga je niet oplossen met Javascript, en al helemaal niet met HTML of CSS. Hiervoor moet je server-side zijn.
Kan heus wel.
Als het puur om te snel berichten achter elkaar te sturen te doen is dan kan je er redelijk gemakkelijk mee weg komen om wat timestamps in je localStorage op te slaan.
Crutchwoensdag 3 januari 2018 @ 20:46
quote:
0s.gif Op dinsdag 2 januari 2018 10:40 schreef vallisarosa het volgende:

[..]

Dit, net als de validatie van je patterns en required velden
Dat lijkt me op z'n minst een vereiste.
Lightwoensdag 3 januari 2018 @ 23:56
quote:
0s.gif Op woensdag 3 januari 2018 20:46 schreef Crutch het volgende:

[..]

Dat lijkt me op z'n minst een vereiste.
Yep. En die ontbreekt volledig. Validatie in de browser is prima met het oog op user experience, en op de server is nodig voor de veiligheid/correctheid van de data.
Lightdonderdag 4 januari 2018 @ 00:09
En een POST to GET redirect voorkomt dat het formulier meerdere keren verzonden kan worden. (In ieder geval voorkomt het dat F5 meerdere keren het formulier verstuurt.)
FlippingCoinzondag 29 september 2019 @ 13:24
Hier misschien mensen met react ervaring die mij misschien wat zou kunnen uitleggen?

DIG / [es6 React]React Render vraag
FlippingCoinzondag 13 oktober 2019 @ 17:13
http://latentflip.com/loupe/

Erg coole website gevonden om meer inzicht te krijgen in hoe de executie van javascript onder de motorkap werkt. :o
FlippingCoinzondag 13 oktober 2019 @ 17:20
Mijn mind is een beetje blown, maar begrijp ik het goed als ik stel dat je zonder de web api's geen asynchrone code kan schrijven in javascript? Of zelfs nog dat je geen asynchrone javascript kan schrijven, maar dat je daar functies als setTimeout uit de host environment voor nodig hebt?
ralfiemaandag 14 oktober 2019 @ 15:41
quote:
16s.gif Op zondag 13 oktober 2019 17:20 schreef FlippingCoin het volgende:
Mijn mind is een beetje blown, maar begrijp ik het goed als ik stel dat je zonder de web api's geen asynchrone code kan schrijven in javascript? Of zelfs nog dat je geen asynchrone javascript kan schrijven, maar dat je daar functies als setTimeout uit de host environment voor nodig hebt?
sec synchroon/asynchrone javascript code bestaat niet. Code kan synchroon of asynchroon uitgevoerd worden, maar of dat gebeurt of niet is afhankelijk van de engine die de code uitvoert, niet de code zelf. Je kunt wel met keywords aangeven of code mogelijk asynchroon uitgevoerd kan worden (async/await) maar eigenlijk zijn dat gewoon wrappers rond code die gebruik maakt van functies die vaak (maar niet noodzakelijk!) als asynchroon bekend zijn, zoals settimeout. Dit garandeert echter geen asynchrone uitvoering, dat is aan de engine die de code compileert en uitvoert.

Wanneer code gecompileerd wordt, wordt je javascript code in een rits van cpu-instrucies omgezet. Dit gebeurt niet per regel, dat is te inefficient. De javascript engine bekijkt je code van begin tot eind (of een deel in geval van Just-in-time compilation), de functies en de functies die die weer aanroepen (ad infinitum), en maakt daar één rits instructies van. Dit werkt prima, totdat code als asynchroon aangemerkt wordt. Immers, deze code wordt uitgevoerd nav een trigger en zal dus de huidige cpu-thread moeten blocken totdat dat event getriggerd wordt, en dat is dan weer inefficient. In dit geval zal de compiler de code die VOLGT op de asynchrone code als een aparte rits instructies moeten compileren, zodat de cpu-thread, na het uitvoeren van de synchrone code, ondertussen eventueel andere code kan uitvoeren. Ook 'synchrone' code die volgt op een asynchrone code wordt als apart blok (en dus asynchroon) uitgevoerd. De enige reden waarom code asynchroon uitgevoerd moet worden is wanneer er externe triggers zijn, zoals bij settimeout of httprequests of filesystem events (triggers vanuit host omgeving). In alle andere gevallen is je code in principe gewoon één lange lijst van instructies en dus niet asynchroon. Feitelijk heb je dus wel gelijk (je hebt speciale functies uit je host omgeving nodig om code asynchroon te maken), maar het gaat dan om de uitvoering, niet de code definitie.

Ter verduidelijking (en naar ik aanneem overbodigheid) asynchrone code is niet multithreaded code. Asynchrone code stelt je in staat stukjes code uit te voeren in kleinere blokjes die door de host/compiler zodanig uitgevoerd wordt dat een enkele thread meerdere taken efficient en snel tegelijkertijd (eigenlijk omstebeurt) uit kan voeren zonder dat je als programmeur overal lastige mulithread functies moet toevoegen om onnodig wachten tussendoor te voorkomen. Dit maakt asynchrone code extreem efficient in webserver achtige functies, waar vaak behoefte is aan simpele stukjes code die vaak en snel uitgevoerd moeten worden met soms wachttijd tussendoor, zoals ophalen bestanden of database records (verklaart deels populariteit node.js). Om code multithreaded te krijgen heb je in javascript web workers (althans in browsers), die stellen je in staat over meerdere threads code te laten lopen.

hoop dat dit eea verduidelijkt
FlippingCoinmaandag 14 oktober 2019 @ 15:56
quote:
0s.gif Op maandag 14 oktober 2019 15:41 schreef ralfie het volgende:

[..]

sec synchroon/asynchrone javascript code bestaat niet. Code kan synchroon of asynchroon uitgevoerd worden, maar of dat gebeurt of niet is afhankelijk van de engine die de code uitvoert, niet de code zelf. Je kunt wel met keywords aangeven of code mogelijk asynchroon uitgevoerd kan worden (async/await) maar eigenlijk zijn dat gewoon wrappers rond code die gebruik maakt van functies die vaak (maar niet noodzakelijk!) als asynchroon bekend zijn, zoals settimeout. Dit garandeert echter geen asynchrone uitvoering, dat is aan de engine die de code compileert en uitvoert.

Wanneer code gecompileerd wordt, wordt je javascript code in een rits van cpu-instrucies omgezet. Dit gebeurt niet per regel, dat is te inefficient. De javascript engine bekijkt je code van begin tot eind (of een deel in geval van Just-in-time compilation), de functies en de functies die die weer aanroepen (ad infinitum), en maakt daar één rits instructies van. Dit werkt prima, totdat code als asynchroon aangemerkt wordt. Immers, deze code wordt uitgevoerd nav een trigger en zal dus de huidige cpu-thread moeten blocken totdat dat event getriggerd wordt, en dat is dan weer inefficient. In dit geval zal de compiler de code die VOLGT op de asynchrone code als een aparte rits instructies moeten compileren, zodat de cpu-thread, na het uitvoeren van de synchrone code, ondertussen eventueel andere code kan uitvoeren. Ook 'synchrone' code die volgt op een asynchrone code wordt als apart blok (en dus asynchroon) uitgevoerd. De enige reden waarom code asynchroon uitgevoerd moet worden is wanneer er externe triggers zijn, zoals bij settimeout of httprequests of filesystem events (triggers vanuit host omgeving). In alle andere gevallen is je code in principe gewoon één lange lijst van instructies en dus niet asynchroon. Feitelijk heb je dus wel gelijk (je hebt speciale functies uit je host omgeving nodig om code asynchroon te maken), maar het gaat dan om de uitvoering, niet de code definitie.

Ter verduidelijking (en naar ik aanneem overbodigheid) asynchrone code is niet multithreaded code. Asynchrone code stelt je in staat stukjes code uit te voeren in kleinere blokjes die door de host/compiler zodanig uitgevoerd wordt dat een enkele thread meerdere taken efficient en snel tegelijkertijd (eigenlijk omstebeurt) uit kan voeren zonder dat je als programmeur overal lastige mulithread functies moet toevoegen om onnodig wachten tussendoor te voorkomen. Dit maakt asynchrone code extreem efficient in webserver achtige functies, waar vaak behoefte is aan simpele stukjes code die vaak en snel uitgevoerd moeten worden met soms wachttijd tussendoor, zoals ophalen bestanden of database records (verklaart deels populariteit node.js). Om code multithreaded te krijgen heb je in javascript web workers (althans in browsers), die stellen je in staat over meerdere threads code te laten lopen.

hoop dat dit eea verduidelijkt
Flinke post. ^O^

Ik zit alleen nog een beetje in de knoop met een ding, je hebt dus een stack en een queue, en als je stack leeg is kunnen er dingen van de queue gepakt worden toch? Maar wanneer je in een loop zit is de stack nooit leeg toch, dan zou er nooit tijd zijn voor de queue of begrijp ik dit verkeerd?
ralfiemaandag 14 oktober 2019 @ 17:03
quote:
16s.gif Op maandag 14 oktober 2019 15:56 schreef FlippingCoin het volgende:

[..]

Flinke post. ^O^

Ik zit alleen nog een beetje in de knoop met een ding, je hebt dus een stack en een queue, en als je stack leeg is kunnen er dingen van de queue gepakt worden toch? Maar wanneer je in een loop zit is de stack nooit leeg toch, dan zou er nooit tijd zijn voor de queue of begrijp ik dit verkeerd?
Nu verlies je me een beetje. Heb je het over geheugen (stack and heap) ? heb je met js toch niet mee te maken?
FlippingCoinmaandag 14 oktober 2019 @ 17:11
y7DQuMG.png
https://medium.com/@gaura(...)-part-1-5683dea1f5ec

Volgens dit artikel komt wanneer je een web API functie aanroept deze op de message queue te liggen, en wordt wanneer de stack leeg is een item van de queue gepakt.
ralfiemaandag 14 oktober 2019 @ 17:37
quote:
16s.gif Op maandag 14 oktober 2019 15:56 schreef FlippingCoin het volgende:

[..]

Flinke post. ^O^

Ik zit alleen nog een beetje in de knoop met een ding, je hebt dus een stack en een queue, en als je stack leeg is kunnen er dingen van de queue gepakt worden toch? Maar wanneer je in een loop zit is de stack nooit leeg toch, dan zou er nooit tijd zijn voor de queue of begrijp ik dit verkeerd?
quote:
16s.gif Op maandag 14 oktober 2019 17:11 schreef FlippingCoin het volgende:
[ afbeelding ]
https://medium.com/@:gaur(...)-part-1-5683dea1f5ec

Volgens dit artikel komt wanneer je een web API functie aanroept deze op de message queue te liggen, en wordt wanneer de stack leeg is een item van de queue gepakt.
ah zo. Ja, dat klopt, wanneer je in een loop zit heeft het systeem geen tijd om messages te behandelen en zal de boel dus vastlopen, tenzij de host iets ingebouwd heeft (biiv max elke seconde de behandeling van de stack onderbreken om een message te lezen en indien deze prio heeft te behandelen. Denk bijv aan een ctr+alt+del commando. om die reden wordt geadviseerd om zware, langdraaiende javascript taken naar een andere worker over te hevelen zodat de primare thread tijd vrij heeft om messages (of events) te behandelen.
FlippingCoinmaandag 14 oktober 2019 @ 17:41
quote:
0s.gif Op maandag 14 oktober 2019 17:37 schreef ralfie het volgende:

[..]


[..]

ah zo. Ja, dat klopt, wanneer je in een loop zit heeft het systeem geen tijd om messages te behandelen en zal de boel dus vastlopen, tenzij de host iets ingebouwd heeft (biiv max elke seconde de behandeling van de stack onderbreken om een message te lezen en indien deze prio heeft te behandelen. Denk bijv aan een ctr+alt+del commando. om die reden wordt geadviseerd om zware, langdraaiende javascript taken naar een andere worker over te hevelen zodat de primare thread tijd vrij heeft om messages (of events) te behandelen.
En die zware taak moet je dan mbv een web worker overhevelen?
ralfiemaandag 14 oktober 2019 @ 17:44
ja: https://medium.com/young-(...)ascript-b3504f9d9d1c
FlippingCoinmaandag 14 oktober 2019 @ 17:52
quote:
Oke top dankjewel! :7
dimmakdinsdag 9 maart 2021 @ 10:20
Een kick met een vraagje. Ik ben wat aan het hobbyen met bootstrap. Ik heb een pagina met een aantal kolommen en die wil ik mooi elkaar laten opvolgen. Dit heb ik voor elkaar gekregen met Masonry alleen mobiel is het geen porum. Het mooist zou zijn als ik mobiel alles onder elkaar zou komen te zien ipv 2 naast elkaar. Krijg ik dat met Masonry nog voor elkaar, of moet ik het dan over een andere boeg gooien?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php
<div class="album py-5 bg-light">
<
div class="container">
<
div class="row row-cols-2" data-masonry='{"percentPosition": true }'>
<
div class="col">
<
div class="card">
1
</div>
</
div>
<
div class="col">
<
div class="card">
2
</div>
</
div>
<
div class="col">
<
div class="card">
3
</div>
</
div>
<
div class="col">
<
div class="card">
4
</div>
</
div>
<
div class="col">
<
div class="card">
5
</div>
</
div>
</
div>
</
div>
?>

Dit is mijn opbouw. (PHP tags gebruikt want code tags zijn kapot met deze code)
Black-Holedinsdag 9 maart 2021 @ 12:19
quote:
0s.gif Op dinsdag 9 maart 2021 10:20 schreef dimmak het volgende:
Een kick met een vraagje. Ik ben wat aan het hobbyen met bootstrap. Ik heb een pagina met een aantal kolommen en die wil ik mooi elkaar laten opvolgen. Dit heb ik voor elkaar gekregen met Masonry alleen mobiel is het geen porum. Het mooist zou zijn als ik mobiel alles onder elkaar zou komen te zien ipv 2 naast elkaar. Krijg ik dat met Masonry nog voor elkaar, of moet ik het dan over een andere boeg gooien?
[ code verwijderd ]

Dit is mijn opbouw. (PHP tags gebruikt want code tags zijn kapot met deze code)
Als je de broncode van het voorbeeld bekijkt dan zie je dat ze extra classes toevoegen aan de
1
2
3
<?php
<div class="col">
?>
Bijvoorbeeld
1
2
3
<?php
<div class="col-sm-6 col-lg-4 mb-4">
?>
Met deze classes definieer je hoe breed de elementen worden voor bepaalde breakpoints, zie https://getbootstrap.com/docs/5.0/layout/columns/ voor meer info.
dimmakdinsdag 9 maart 2021 @ 15:37
quote:
0s.gif Op dinsdag 9 maart 2021 12:19 schreef Black-Hole het volgende:

[..]

Als je de broncode van het voorbeeld bekijkt dan zie je dat ze extra classes toevoegen aan de
[ code verwijderd ]

Bijvoorbeeld
[ code verwijderd ]

Met deze classes definieer je hoe breed de elementen worden voor bepaalde breakpoints, zie https://getbootstrap.com/docs/5.0/layout/columns/ voor meer info.
Thanks, daar had ik al mee zitten spelen, maar ik kwam erachter dat ik in mijn "row" div ook nog een minimale "col" waarde had staan. ;(

1row-cols-2
FlippingCoinvrijdag 12 maart 2021 @ 09:53
quote:
0s.gif Op dinsdag 9 maart 2021 10:20 schreef dimmak het volgende:
Een kick met een vraagje. Ik ben wat aan het hobbyen met bootstrap. Ik heb een pagina met een aantal kolommen en die wil ik mooi elkaar laten opvolgen. Dit heb ik voor elkaar gekregen met Masonry alleen mobiel is het geen porum. Het mooist zou zijn als ik mobiel alles onder elkaar zou komen te zien ipv 2 naast elkaar. Krijg ik dat met Masonry nog voor elkaar, of moet ik het dan over een andere boeg gooien?
[ code verwijderd ]

Dit is mijn opbouw. (PHP tags gebruikt want code tags zijn kapot met deze code)
Als je eens tijd en interesse hebt:

https://www.youtube.com/p(...)_-1ytlVMT0AMwADlWtc1

Deze vrouw is (of was, ik weet niet zeker of ze dat nog steeds is) een van van de ontwikkelaars van CSS en kan dit erg prettig uitleggen; a.d.h.v. deze playlist zou je wat je beschrijft aardig kunnen bereiken met puur CSS. En de video's zijn ook geen uren lang. :)
Black-Holevrijdag 12 maart 2021 @ 11:07
quote:
16s.gif Op vrijdag 12 maart 2021 09:53 schreef FlippingCoin het volgende:

[..]

Als je eens tijd en interesse hebt:

https://www.youtube.com/p(...)_-1ytlVMT0AMwADlWtc1

Deze vrouw is (of was, ik weet niet zeker of ze dat nog steeds is) een van van de ontwikkelaars van CSS en kan dit erg prettig uitleggen; a.d.h.v. deze playlist zou je wat je beschrijft aardig kunnen bereiken met puur CSS. En de video's zijn ook geen uren lang. :)
Hmz, weet niet hoor maar CSS-Grid gebruiken voor een masonary layout.... Grid is echt fantastisch maar zou het zelf nooit voor masonary gebruiken en daar echt een JS oplossing voor gebruiken voor het beste resultaat.

Ben heel erg voorstander om zo veel mogelijk met CSS op te lossen in plaats van JS maar in dit geval zou ik dat niet doen
FlippingCoinvrijdag 12 maart 2021 @ 11:24
quote:
0s.gif Op vrijdag 12 maart 2021 11:07 schreef Black-Hole het volgende:

[..]

Hmz, weet niet hoor maar CSS-Grid gebruiken voor een masonary layout.... Grid is echt fantastisch maar zou het zelf nooit voor masonary gebruiken en daar echt een JS oplossing voor gebruiken voor het beste resultaat.

Ben heel erg voorstander om zo veel mogelijk met CSS op te lossen in plaats van JS maar in dit geval zou ik dat niet doen
En waarom niet dan?
Black-Holevrijdag 12 maart 2021 @ 11:49
quote:
16s.gif Op vrijdag 12 maart 2021 11:24 schreef FlippingCoin het volgende:

[..]

En waarom niet dan?
Je loopt tegen issues aan qua ordering van de items. Dit hoeft overigens geen issue te zijn, ligt maar net aan de case waarvoor je het gebruikt. Verder is de browser support van grid-template-rows: masonry zeer minimaal.

Zie ook dit artikel wat er verder op ingaat en alle issues bespreekt: https://www.smashingmagaz(...)nry-layout-css-grid/
FlippingCoinvrijdag 12 maart 2021 @ 12:27
quote:
14s.gif Op vrijdag 12 maart 2021 11:49 schreef Black-Hole het volgende:

[..]

Je loopt tegen issues aan qua ordering van de items. Dit hoeft overigens geen issue te zijn, ligt maar net aan de case waarvoor je het gebruikt. Verder is de browser support van grid-template-rows: masonry zeer minimaal.

Zie ook dit artikel wat er verder op ingaat en alle issues bespreekt: https://www.smashingmagaz(...)nry-layout-css-grid/
Maar als je de video's bekijkt zie je dat ze bereikt wat dimmak vraagt zonder de experimentele Masonry attribuut van grid. Dus ja het is soms nodig om javascript te gebruiken bijvoorbeeld met het sortering van items op bepaalde wijze, maar je kan met native CSS wel bereiken wat er gevraagd wordt; ik denk dat het sowieso goed is om het bestaan van grid te kennen. :)
Black-Holevrijdag 12 maart 2021 @ 12:32
quote:
16s.gif Op vrijdag 12 maart 2021 12:27 schreef FlippingCoin het volgende:

[..]

Maar als je de video's bekijkt zie je dat ze bereikt wat dimmak vraagt zonder de experimentele Masonry attribuut van grid. Dus ja het is soms nodig om javascript te gebruiken bijvoorbeeld met het sortering van items op bepaalde wijze, maar je kan met native CSS wel bereiken wat er gevraagd wordt; ik denk dat het sowieso goed is om het bestaan van grid te kennen. :)
Moet bekennen dat ik je video niet had bekeken. Verder helemaal met je eens, CSS-Grid is zo fijn om mee te werken. Beter dan Flexbox wat mij betreft al hebben beide ook weer hun voors en tegen en ook weer ieder zo z'n eigen toepassingen.
FlippingCoinvrijdag 12 maart 2021 @ 12:37
quote:
0s.gif Op vrijdag 12 maart 2021 12:32 schreef Black-Hole het volgende:

[..]

Moet bekennen dat ik je video niet had bekeken. Verder helemaal met je eens, CSS-Grid is zo fijn om mee te werken. Beter dan Flexbox wat mij betreft al hebben beide ook weer hun voors en tegen en ook weer ieder zo z'n eigen toepassingen.
Ik gebruik flexobox vaker, en ook vaak samen met grid. :P Grid als basis, en flexbox om bijvoorbeeld de items van een menu uit te lijnen en zo in een cel.
TargaFloriodonderdag 28 oktober 2021 @ 19:22
Kan ik in dit topic ook terecht met vragen over React en dan specifiek over useRef ?
FlippingCoinvrijdag 29 oktober 2021 @ 09:55
quote:
0s.gif Op donderdag 28 oktober 2021 19:22 schreef TargaFlorio het volgende:
Kan ik in dit topic ook terecht met vragen over React en dan specifiek over useRef ?
Hm misschien zitten hier wel mensen die met react werken, zelf werk ik met Angular dus veel verder dan de basis omtrent hooks kom ik niet. Maar zou het gewoon vragen. :)
TargaFloriovrijdag 29 oktober 2021 @ 10:02
quote:
16s.gif Op vrijdag 29 oktober 2021 09:55 schreef FlippingCoin het volgende:

[..]
Hm misschien zitten hier wel mensen die met react werken, zelf werk ik met Angular dus veel verder dan de basis omtrent hooks kom ik niet. Maar zou het gewoon vragen. :)
Ga zelf nog even kijken of ik het opgelost krijg, anders stel ik komend weekend even een vraagje.
TargaFloriomaandag 1 november 2021 @ 13:09
Inmiddels opgelost via een React hook.
Aetherzondag 29 mei 2022 @ 16:29
twitter
Pilesdonderdag 4 augustus 2022 @ 20:56
Ik kom in een stukje Javascript dit tegen:
1var_x = (var_y == 'true');
Wat doet dit in godsnaam? :?
Aetherdonderdag 4 augustus 2022 @ 21:11
quote:
0s.gif Op donderdag 4 augustus 2022 20:56 schreef Piles het volgende:
Ik kom in een stukje Javascript dit tegen:
[ code verwijderd ]

Wat doet dit in godsnaam? :?
Als de variabele var_y de tekst "true" bevat zal var_x gelijk zijn aan true en anders false.
Pilesdonderdag 4 augustus 2022 @ 21:28
quote:
7s.gif Op donderdag 4 augustus 2022 21:11 schreef Aether het volgende:

[..]
Als de variabele var_y de tekst "true" bevat zal var_x gelijk zijn aan true en anders false.
Ahh dat had ik kunnen gokken. Thanks, kan ik verder debuggen morgen ^O^
FlippingCoindonderdag 4 augustus 2022 @ 21:30
quote:
0s.gif Op donderdag 4 augustus 2022 20:56 schreef Piles het volgende:
Ik kom in een stukje Javascript dit tegen:
[ code verwijderd ]

Wat doet dit in godsnaam? :?
Waar ben je dat tegengekomen... :{

P.s. https://developer.mozilla(...)/Operator_Precedence
Pilesdonderdag 4 augustus 2022 @ 21:35
quote:
16s.gif Op donderdag 4 augustus 2022 21:30 schreef FlippingCoin het volgende:

[..]
Waar ben je dat tegengekomen... :{
In de code van een professioneel programmeur... :X
Dus debuggen kost wat moeite zeg maar :')
quote:
Ga ik morgen eens rustig bekijken :)
FlippingCoindonderdag 4 augustus 2022 @ 21:38
quote:
1s.gif Op donderdag 4 augustus 2022 21:35 schreef Piles het volgende:

[..]
In de code van een professioneel programmeur... :X
Dus debuggen kost wat moeite zeg maar :')
[..]
Ga ik morgen eens rustig bekijken :)
Pffff wow. :+


Gl. :D
ralfievrijdag 5 augustus 2022 @ 10:28
quote:
16s.gif Op donderdag 4 augustus 2022 21:30 schreef FlippingCoin het volgende:

[..]
Waar ben je dat tegengekomen... :{

P.s. https://developer.mozilla(...)/Operator_Precedence
Hoewel de haakjes niet nodig zijn vind ik het in dit voorbeeld wel de leesbaarheid van de code ten goede komen.
Tenzij je valt over == ipv ===, case sensitivity of niet-boolean tekst zie ik niet zoveel problemen met deze code?
FlippingCoinvrijdag 5 augustus 2022 @ 10:59
quote:
0s.gif Op vrijdag 5 augustus 2022 10:28 schreef ralfie het volgende:

[..]
Hoewel de haakjes niet nodig zijn vind ik het in dit voorbeeld wel de leesbaarheid van de code ten goede komen.
Tenzij je valt over == ipv ===, case sensitivity of niet-boolean tekst zie ik niet zoveel problemen met deze code?
Benaming van de variabelen, true in een string value, vergelijken met een string literal, het niet gebruiken van strict equal comparison, sowieso kan ik geen logische casus om dit uit te voeren op deze manier bedenken. Ziet eruit alsof dit al meerdere keren refactored had moeten worden.

Maar als iemand een goede casus weet ben ik wel benieuwd verder, ik weet ook niet alles. :+
FlippingCoinvrijdag 5 augustus 2022 @ 11:04
De OP mag ook wel een likje verf gebruiken bij het volgende deel. :P
Pilesvrijdag 5 augustus 2022 @ 12:05
quote:
16s.gif Op vrijdag 5 augustus 2022 10:59 schreef FlippingCoin het volgende:
Benaming van de variabelen,
Dat heb ik gedaan, om herkenning te voorkomen ;)
Maar eens met de rest. Je zou de rest van de code / applicatie eens moeten zien :D
FlippingCoinvrijdag 5 augustus 2022 @ 12:13
quote:
0s.gif Op vrijdag 5 augustus 2022 12:05 schreef Piles het volgende:

[..]
Dat heb ik gedaan, om herkenning te voorkomen ;)
Maar eens met de rest. Je zou de rest van de code / applicatie eens moeten zien :D
Ah oke gelukkig maar. :+