[HTML, CSS, JS] Frontend #40: De Node is hoog

maandag 28 april 2014 @ 10:07:33 #61

boem-dikkie

Jedi Mind Baby!

quote:
Op maandag 28 april 2014 10:01 schreef Catch22- het volgende:
De projecten waar ik aan werk hebben over het algemeen dusdanig veel javascript nodig dat jQuery sowieso uit kan.

En daarbij zijn dat 9 van de 10 keer webapplicaties die op desktops worden gebruikt. Dus die 95kb maakt dan ook niet uit.

jQuery ui gebruik ik trouwens bijna nooit meer. Bootstrap vind ik toch fijner

Ik heb jQuery UI serieus nog nooit gebruikt.

Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.

maandag 28 april 2014 @ 10:08:17 #62

Catch22-

Ben je Blind?!

quote:
Op maandag 28 april 2014 10:07 schreef boem-dikkie het volgende:

[..]

Ik heb jQuery UI serieus nog nooit gebruikt.

Ik vond het wel handig. Maar het was hoofdzakelijk de datepicker die ik gebruikte eigenlijk.

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

maandag 28 april 2014 @ 10:08:49 #63

Tijn

Powered by MS Paint

quote:
Op maandag 28 april 2014 10:01 schreef Catch22- het volgende:

jQuery ui gebruik ik trouwens bijna nooit meer. Bootstrap vind ik toch fijner

Ik heb jQuery UI altijd al een verschrikkelijk project gevonden. Echt niks dan lompheid.

Verberg de nieuwsticker

maandag 28 april 2014 @ 10:10:11 #64

n8n

Pragmatisch

quote:
Op maandag 28 april 2014 09:57 schreef Tijn het volgende:

[..]

Sowieso is performance niet het hoogste doel in software ontwikkeling. Maar bedoelen we hier nou dingen als jQuery? Dat is toch helemaal geen framework?

met websites is snelheid een van de belangrijkste punten.

“Specialization is for insects”.—Robert Heinlein

maandag 28 april 2014 @ 10:10:49 #65

Catch22-

Ben je Blind?!

quote:
Op maandag 28 april 2014 10:08 schreef Tijn het volgende:

[..]

Ik heb jQuery UI altijd al een verschrikkelijk project gevonden. Echt niks dan lompheid.

Het is wel wat log. Maar er zaten genoeg functies in die ik nodig had in mijn applicaties.

In websites heb je het inderdaad zelden nodig.

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

maandag 28 april 2014 @ 10:12:32 #66

Tijn

Powered by MS Paint

quote:
Op maandag 28 april 2014 10:10 schreef n8n het volgende:

[..]

met websites is snelheid een van de belangrijkste punten.

Je moet je altijd bewust blijven van de performance, maar om je nou in allerlei bochten te wringen om het includen van 30K aan code te vermijden gaat mij wat te ver.

Verberg de nieuwsticker

maandag 28 april 2014 @ 10:20:09 #67

n8n

Pragmatisch

quote:
Op maandag 28 april 2014 10:12 schreef Tijn het volgende:

[..]

Je moet je altijd bewust blijven van de performance, maar om je nou in allerlei bochten te wringen om het includen van 30K aan code te vermijden gaat mij wat te ver.

dat is waar maar daarom leek mij die component.io wel interessant omdat het eigenlijk alleen maar functies zijn die je (met node?) samenvoegt waardoor je wel alleen gebruikt wat je nodig hebt. Als zulke componenten getest zijn en je roept alleen aan wat nodig is ben je in principe net zo snel klaar of zie ik het nu verkeerd?

“Specialization is for insects”.—Robert Heinlein

maandag 28 april 2014 @ 10:23:02 #68

Tijn

Powered by MS Paint

Maar dat is conceptueel niet heel anders dan een paar jQuery plugins gebruiken, toch?

Verberg de nieuwsticker

maandag 28 april 2014 @ 10:27:27 #69

n8n

Pragmatisch

quote:
Op maandag 28 april 2014 10:23 schreef Tijn het volgende:
Maar dat is conceptueel niet heel anders dan een paar jQuery plugins gebruiken, toch?

Conceptueel niet, qua performance wellicht wel omdat de functies kleiner (en sneller) zijn

“Specialization is for insects”.—Robert Heinlein

maandag 28 april 2014 @ 10:29:46 #70

Tijn

Powered by MS Paint

quote:
Op maandag 28 april 2014 10:27 schreef n8n het volgende:

[..]

Conceptueel niet, qua performance wellicht wel omdat de functies kleiner (en sneller) zijn

Dat ligt maar net aan welke plugins je gebruikt.

Verberg de nieuwsticker

maandag 28 april 2014 @ 10:34:01 #71

n8n

Pragmatisch

quote:
Op maandag 28 april 2014 10:29 schreef Tijn het volgende:

[..]

Dat ligt maar net aan welke plugins je gebruikt.

Ok dat is waar, is niet allemaal (library-)dependency free wat ik dacht.

“Specialization is for insects”.—Robert Heinlein

vrijdag 2 mei 2014 @ 16:02:14 #72

mschol

ik ben wat aan het testen en heb de volgende CSS:

1
2
3
4
5
6
7
8

div{
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    background-color: #F50004;
    border:2px solid;
    border-radius:7px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" href="index.css" />
</head>

<body>
  <div>
    <form action="">
      <select>
          <option> </option>
          <option>optie 1</option>
      </select>
    </form>
  </div>
</body>
</html>

op Chrome werkt dit goed.
op IE10 krijg ik geen ronde hoeken, terwijl IE10 wel border-radius ondersteund (als ik de voorbeeld pagina van w3schools erbij pak werkt het wel goed)
doe ik wat verkeerd, zie ik b.v. iets over het hoofd? of moet dit gewoon werken?

mentions en alerts staan uit, pm/dm mij

vrijdag 2 mei 2014 @ 16:26:26 #73

Matty___

Konichiwa Bitches

quote:
Op vrijdag 2 mei 2014 16:02 schreef mschol het volgende:
ik ben wat aan het testen en heb de volgende CSS:
[ code verwijderd ]

[ code verwijderd ]

op Chrome werkt dit goed.
op IE10 krijg ik geen ronde hoeken, terwijl IE10 wel border-radius ondersteund (als ik de voorbeeld pagina van w3schools erbij pak werkt het wel goed)
doe ik wat verkeerd, zie ik b.v. iets over het hoofd? of moet dit gewoon werken?

Als een keer naar http://www.cssmatic.com/border-radius gekeken.

Deze muziek smaakt naar bier :)
Es bedarf keiner Psychoanalyse, um festzustellen, dass das Leben ein einziger Friedhof gescheiterter Pläne ist!

vrijdag 2 mei 2014 @ 16:48:52 #74

mschol

quote:
Op vrijdag 2 mei 2014 16:26 schreef Matty___ het volgende:

[..]

Als een keer naar http://www.cssmatic.com/border-radius gekeken.

dat werkt ook goed..

ik zie nu, in de IE developer toolbar, dat hij om de een of andere reden bij deze lokale site op quirks document mode stond..
dan gaat het niet werken nee

problem solved

mentions en alerts staan uit, pm/dm mij

zondag 4 mei 2014 @ 22:02:04 #75

Darkomen

Ik zit even vast, waarschijnlijk te lang erna gekeken,
Ik probeer een callback functie aan te roepen nav een parameter.
Maar deze geeft een foutmelding die ik niet snap:

SyntaxError: missing] after element list
handleFooReturn([object Object])

Of

SyntaxError: missing] after element list
handleBarReturn([object Object])

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
33
34
35
36
37
38
39
40
41

$(".foo").click(function(){
             var params = {
                authField: $(this)
                callBack: 'handleFooReturn'
            };
            var data = executeAjax(params);
   });

$(".bar").click(function(){
             var params = {
                authField: $(this)
                callBack: 'handleBarReturn'
            };
            var data = executeAjax(params) ;
   });

function executeAjax(params){
    $.ajax({
        type: "POST",
        url: baseUrl,
        data: $.param(params),
        dataType: "json",
        success:function(data){
            if(params.callBack){
                var callBack = ""+params.callBack+"("+data+","+params+")";
                eval(callBack);
            }
        }
    });
}

function handleFooReturn(data, params){
    console.log('Foo');
    console.log(data);
    console.log(params);
}
function handleBarReturn(data, params){
    console.log('Bar');
    console.log(data);
    console.log(params);
}

maandag 5 mei 2014 @ 02:47:11 #76

n8n

Pragmatisch

Is er iets zoals html5doctor voor JavaScript?

http://html5doctor.com

Dus een overzichtelijke documentatie met up to date best practice voorbeelden?

“Specialization is for insects”.—Robert Heinlein

maandag 5 mei 2014 @ 08:57:08 #77

Tijn

Powered by MS Paint

Qua documentatie is denk ik MDN de beste bron.

Qua best practice voorbeelden blijft de videoserie van Douglas Crockford een aanrader: http://yuiblog.com/crockford/

En verder natuurlijk de documentatie van je library/framework/wat je ook gebruikt

Verberg de nieuwsticker

maandag 5 mei 2014 @ 09:00:31 #78

Tijn

Powered by MS Paint

Maar kun je al programmeren? Heb je de basisprincipes door en beheers je een andere taal? Want als dat niet zo is, zou ik eerst dat leren voordat je in Javascript duikt. Er zijn tegenwoordig allerlei MOOCs waarin je bv in C of Python prima de essentie leer te begrijpen.

Verberg de nieuwsticker

maandag 5 mei 2014 @ 09:29:21 #79

picodealion

quote:
Op zondag 4 mei 2014 22:02 schreef Darkomen het volgende:
Ik zit even vast, waarschijnlijk te lang erna gekeken,
Ik probeer een callback functie aan te roepen nav een parameter.
Maar deze geeft een foutmelding die ik niet snap:

SyntaxError: missing] after element list
handleFooReturn([object Object])

Of

SyntaxError: missing] after element list
handleBarReturn([object Object])
[ code verwijderd ]

Probeer een komma tussen verschillende elementen van je object:

1
2
3
4

var params = {
                authField: $(this),
                callBack: 'handleBarReturn'
            };

Overigens is die eval echt vies. Volgens mij kan je ook gewoon dit doen in je success function:

1
2
3

    if(typeof(params.callBack) === "function") {
        params.callBack(data, params);
    }

[ Bericht 2% gewijzigd door picodealion op 05-05-2014 09:34:27 ]

maandag 5 mei 2014 @ 11:53:11 #80

Darkomen

quote:
Op maandag 5 mei 2014 09:29 schreef picodealion het volgende:

[..]

Probeer een komma tussen verschillende elementen van je object:
[ code verwijderd ]

Overigens is die eval echt vies. Volgens mij kan je ook gewoon dit doen in je success function:
[ code verwijderd ]

Ow mn komma's ware weggevallen tijdens het uitkleden van de functie, die vergeet ik gelukkig niet.
Normaal zijn de params bijvoorbeeld

1
2
3
4
5
6

            var params = {
                authField: $authType,
                authValue: authValue,
                authId: $authId,
                callBack: 'changeAuthCallback'
            };

Ik vind Eval ook vies maar wist geen andere manier, daar zat ook de echte fout, ik ga je code vanmiddag even proberen.

maandag 5 mei 2014 @ 12:00:01 #81

Tijn

Powered by MS Paint

quote:
Op maandag 5 mei 2014 11:53 schreef Darkomen het volgende:

[..]

Ik vind Eval ook vies maar wist geen andere manier

Je kunt ook .call() of .apply() gebruiken.

Verberg de nieuwsticker

maandag 5 mei 2014 @ 14:48:36 #82

n8n

Pragmatisch

quote:
Op maandag 5 mei 2014 09:00 schreef Tijn het volgende:
Maar kun je al programmeren? Heb je de basisprincipes door en beheers je een andere taal? Want als dat niet zo is, zou ik eerst dat leren voordat je in Javascript duikt. Er zijn tegenwoordig allerlei MOOCs waarin je bv in C of Python prima de essentie leer te begrijpen.

Nee. Weet de basis van php en nu dan ook js. Arrays, loops, objecten en wat principes rondom DRY/modulair te werk gaan. In principe zal ik nu wel aardig ver komen door te doen en uit te zoeken. Mijn beef met programmeren is alleen dat de voorbeelden vaak van bedroevende kwaliteit zijn. Als ik kijk naar css/html voorbeelden (zelfs van gerenommeerde websites) is het meestal om te janken.

Php voorbeelden zijn meestal volgens verouderde modellen. Javascript vind ik überhaupt lastig omdat 99,6% tegenwoordig jQuery is

zelfs hele simpele zut als een class wijzigen na input.

Wat maakt JS (en evt. php) minder geschikt dan.

En bedankt voor je resources op mdn staan er ook nog veel.

“Specialization is for insects”.—Robert Heinlein

maandag 5 mei 2014 @ 15:09:08 #83

Tijn

Powered by MS Paint

Er is niks mis met jQuery imho, maar als beginner zou ik eerst zorgen dat je Javascript zelf echt begrijpt voordat je met allerlei libraries en frameworks aan de slag gaat.

Er is idd een hoop troep te vinden op internet. Ik zou zelf ook zo 123 geen website weten waar het wel goed wordt uitgelegd.

Verberg de nieuwsticker

maandag 5 mei 2014 @ 15:13:44 #84

n8n

Pragmatisch

quote:
Op maandag 5 mei 2014 15:09 schreef Tijn het volgende:
Er is niks mis met jQuery imho, maar als beginner zou ik eerst zorgen dat je Javascript zelf echt begrijpt voordat je met allerlei libraries en frameworks aan de slag gaat.

Er is idd een hoop troep te vinden op internet. Ik zou zelf ook zo 123 geen website weten waar het wel goed wordt uitgelegd.

ja jQuery is prima natuurlijk maar niet als je net komt kijken bij JS al zie ik meestal beginners gewoon de library inladen en vervolgens 5 scripts er bovenop gooien, dat wil ik zelf dus niet. Daardoor gaan dus ook 99% van stackoverflow vragen en artikelen over jQuery en dat is nogal irritant.

“Specialization is for insects”.—Robert Heinlein

maandag 5 mei 2014 @ 15:25:56 #85

Tijn

Powered by MS Paint

Je kunt in elk geval die video's van Douglas Crockford kijken en misschien z'n boek lezen, da's sowieso goed materiaal.

Verberg de nieuwsticker

maandag 5 mei 2014 @ 15:25:58 #86

Darkomen

quote:
Op maandag 5 mei 2014 09:29 schreef picodealion het volgende:

quote:
Op maandag 5 mei 2014 12:00 schreef Tijn het volgende:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

$(document).ready(function(){
    $(".foo").click(function(){
         var params = {
            authField: $(this),
            callBack: handleFooReturn
        };
        executeAjax(params);
    });

    $(".bar").click(function(){
         var params = {
            authField: $(this),
            callBack: handleBarReturn
        };
        executeAjax(params) ;
    });
});

function executeAjax(params){
    var data = {
        success: 'yay',
        error: 'ahw'
    };

    var returnData = {
        data: data,
        params: params
    };

    if(params.callBack){
        params.callBack.apply( returnData );
    }
}

function handleFooReturn(data, params){
    console.log('Foo');
    console.log( this );
    console.log(this.data);
    console.log(this.params);
    console.log(this.data.success);
    console.log(this.data.error);
    this.params.authField.css('border', '2px solid red');
}
function handleBarReturn(data, params){
    console.log('Bar');
    console.log( this );
    console.log(this.data);
    console.log(this.params);
    console.log(this.data.success);
    console.log(this.data.error);
    this.params.authField.css('border', '2px solid red');
}

Dit is het uiteindelijk geworden, ten eerste had ik dus quotes om mn functienaam waardoor het een string was en dus geen functie.
En ten tweede de eval ipv apply.
Die 'returnData' kan vast beter, maar het werkt iig.

Bedankt alle twee

maandag 5 mei 2014 @ 15:28:57 #87

picodealion

quote:
Op maandag 5 mei 2014 15:13 schreef n8n het volgende:

[..]

ja jQuery is prima natuurlijk maar niet als je net komt kijken bij JS al zie ik meestal beginners gewoon de library inladen en vervolgens 5 scripts er bovenop gooien, dat wil ik zelf dus niet. Daardoor gaan dus ook 99% van stackoverflow vragen en artikelen over jQuery en dat is nogal irritant.

Inderdaad, erg vervelend. Ik probeer ook standaard vragen te beantwoorden in vanilla JS, en comment vaak ook wel bij de jQuery antwoorden dat ze die alleen moeten gebruiken als jQuery sowieso al werd ingeladen. Onbegonnen werk natuurlijk, maar als ik er ook maar 1 of 2 kan laten inzien dat je lang niet altijd jQuery nodig hebt ben ik al tevreden..

maandag 5 mei 2014 @ 15:31:39 #88

Darkomen

Ps, ben het met jullie eens, eerst vanilla leren, dat maakt jquery gebruiken veel makkelijker.
Je leert ook de DOM beter kennen.

Ik schreef vroeger greasemonkey userscripts volledig in vanilla (4 jaar geleden), daarna leerde ik pas het bestaan van jquery.

maandag 5 mei 2014 @ 15:40:31 #89

n8n

Pragmatisch

quote:
Op maandag 5 mei 2014 15:25 schreef Tijn het volgende:
Je kunt in elk geval die video's van Douglas Crockford kijken en misschien z'n boek lezen, da's sowieso goed materiaal.

ja dankjewel. Sowieso altijd goed om het kaf op te zoeken. Ben somehow enthousiaster over js dan php terwijl ik er altijd (mede door jQuery

) wat afstandelijk naar was on te leren

“Specialization is for insects”.—Robert Heinlein

maandag 5 mei 2014 @ 15:41:43 #90

Tijn

Powered by MS Paint

quote:
Op maandag 5 mei 2014 15:40 schreef n8n het volgende:

[..]

ja dankjewel. Sowieso altijd goed om het kaf op te zoeken. Ben somehow enthousiaster over js dan php terwijl ik er altijd (mede door jQuery ) wat afstandelijk naar was on te leren

Javascript is echt een ontzettend toffe taal.

Verberg de nieuwsticker

Forum Opties
Forumhop:
Hop naar:	(afkorting, bv 'KLB')

» digital corner

» development

» digital corner

» development