Design & Développement web - Le topic des canards qui mangent des cookies

**Foksadure** · 01/08/2021, 13h50

Envoyé par tenshu

l'Ajax ne doit pas se baser sur des id, c'est périmé ça.
Maintenant on a les data attribute et c'est tellement mieux.

C'est intéressant, mais pour quelqu'un comme moi qui bricole en Vanilla JS/jQuery et n'a jamais fait de web "industriel", je ne saisis pas comment l'un se substitue à l'autre.
Et en quoi mettre à jour via des requêtes ajax le contenu de balises identifiées par un id (unique donc) est devenu soudainement périmé ?

**gros_bidule** · 01/08/2021, 14h46

Pareil, pas expert mais j'ai du mal à saisir. Les data-attributes semblent bien pou stocker des infos connexes, mais les id restent utiles pour sélectionner l'élément ? Dans la négative, quel serait l'avantage du data-attribute en remplaçant de l'id ?
De plus il faut faire attention à ne pas utiliser les data-attributes pour afficher du contenu, car les navigateurs ne retranscriront pas lesdites infos si l'internaute utilise des fonctions d'accessibilité.
Il y aurait même des soucis de perf des data-attributes vs du JS classique (d'après Mozilla du moins).

**Awake** · 01/08/2021, 15h26

Je suppose qu'ils parlent d'où stocker les valeurs de la query ajax (comme les paramètres de la requête GET), pas de comment selectionner l'element qui servira au rendu. document getElementById() n'a jamais été déprécié et est très performant.

**Fastela** · 01/08/2021, 15h52

En passant absolument rien n'interdit (à part une RFC que personne ne respecte) d'avoir plusieurs fois le même ID dans un document HTML.

Le HTML c'est tellement permissif, on peut faire ce qu'on veut.

Envoyé par acdctabs

Quand j'ai commencé le HTML (vers 1999), une erreur que je faisais beaucoup c'était de fermer les balises IMG.

Je vais peut-être dire une bêtise mais IMG est une balise auto-fermante non ? Il n'y a pas besoin de la "fermer".

**acdctabs** · 01/08/2021, 18h25

Oui il n'y a pas besoin.
Pourtant j'en ai mis un paquet des </img>

Après faut bien comprendre que je "codais" au bloc-note.

Mon site c'est ça : http://acdctabs.free.fr !

Tu peux regarder les sources, c'est "old style".

-edit-
Je rajoute que je voulais faire développeur (mais pas de jeux, de logiciels bien chiant parce que j'aime ça), que je suis rentré dans l'armée pour ça, que ça ne s'est pas passé comme prévu (les besoins de la marine étant différent de mes ambitions) mais qu'au bout de 15 ans j'ai pu devenir développeur dans l'armée (bon entre temps j'avais fait du php, je donnerais pas l'adresse de mon bébé car on s'en fout) mais que maintenant je suis sur 3 projets et qu'à défaut d'être bon je m'éclate (parfois).

**Awake** · 02/08/2021, 08h31

Ça me rappelle la belle époque du XHTML où il fallait fermer toutes les balises et des tonnes de règles supplémentaires pour passer la validation. C'était carré. C'etait propre. De nos jours les jeunes font n'importe quoi avec leur HTML5 et leur DOM virtuel

**gros_bidule** · 02/08/2021, 12h20

Parfaitement ! Et on était fiers de mettre les logos "XHTML 1.0 Strict" et "CSS valid" du W3C, signés avec le sang de mille intégrateurs web

**Fastela** · 02/08/2021, 14h30

Heureusement Typescript est là pour nous sauver tous.

**Captain_Cowkill** · 03/08/2021, 17h38

Dites les canards, il y aurai des spécialistes de VueJS (et plus spécialement Vue3) ici ?

**GrandFather** · 03/08/2021, 19h09

Spécialiste, non, usager régulier, oui.

Par contre je suis encore resté sur Vue2.

**Sangoon** · 03/08/2021, 20h19

Envoyé par Captain_Cowkill

Dites les canards, il y aurai des spécialistes de VueJS (et plus spécialement Vue3) ici ?

Pas spécialiste non plus, mais utilisé récemment dans un projet interne à mon boulot, pose toujours tes questions non ? On verra qui peux y répondre ou non ?

**Getz** · 03/08/2021, 20h26

Envoyé par GrandFather

Spécialiste, non, usager régulier, oui.

Par contre je suis encore resté sur Vue2.

Tout pareil ! Donc poses directement ta question ici

**Captain_Cowkill** · 04/08/2021, 01h14

Alors c'est une question toute bête, et ça concerne Vue3. C'est pour de la syntaxe. Je suis une formation sur Udemy, et le formateur utilise une certaine syntaxe, voir l'exemple :

Code:

<script>
        const app = Vue.createApp({
            data() {
                return {
                    d: new Date()
                }
            },
            computed: {
                dateFR() {
                    return this.d.toLocaleTimeString()
                },
                dateUS() {
                    return this.d.toLocaleTimeString('en-US')
                }
            }          
        });
        app.mount('#app');
    </script>

Mais en fouinant sur le net, je trouve une autre syntaxe. Dans mon exemple, les deux fonctionnent parfaitement, mais je préfère la seconde car je la trouve plus intuitive.

Code:

<script>
        const app = Vue.createApp({
            data: function() {
                return {
                    d: new Date()
                }
            },
            computed: {
                dateFR: function() {
                    return this.d.toLocaleTimeString() 
                },
                dateUS: function() {
                    return this.d.toLocaleTimeString('en-US')
                }
            }          
        });
        app.mount('#app');
    </script>

La différence est subtile.
Du coup, je me demandais laquelle de ces 2 syntaxes vous paraissait la plus propre/logique/courante/whatever.
Pourquoi plus intuitive me direz-vous ? Parce que je trouve ça plus clair de bien voir/montrer qu'on a un objet. En regardant un peu Vue2, ça s'en rapproche un peu plus. Je sais pas si je suis clair.

Si besoin, voici le HTML influencé :

Code:

<div id="app">
        <p>Heure US : {{dateUS}}</p>
        <p>Heure FR : {{dateFR}}</p>
    </div>

**Awake** · 04/08/2021, 01h21

Le mot clé function a tendance à disparaître du JS, donc la première syntaxe semble plus moderne. Mais je n'ai jamais utilisé Vue, attends les avis des autres.

**acdctabs** · 04/08/2021, 01h49

ça revient au même que le document.ready de Jquery ? (je ne connais pas du tout Vue)

**GrandFather** · 04/08/2021, 08h31

La première syntaxe n'est pas spécifique à Vue, c'est de l'ES6, du Javascript "moderne" en fait. On peut voir ça principalement comme du "sucre syntaxique", soit une autre écriture plus concise sans que la sémantique en soit changée, mais ça permet aussi, dans le contexte de classes (un autre apport de l'ES6) d'utiliser super pour appeler la méthode de la classe parente. Personnellement je te conseillerais de l'adopter, on s'y fait très vite et c'est une forme qui va à terme remplacer l'ancienne.

@acdctabs >> Alors Vue est aux antipodes de jQuery, pour ce qui est de la philosophie et de la façon de fonctionner. Très grossièrement, jQuery permet d'écrire des instructions pour modifier directement le DOM, Vue c'est l'inverse : on définit ce qu'on veut obtenir, de manière déclarative, et c'est Vue qui se charge de la transformation du DOM de façon transparente. Et il le fait de manière réactive, si des paramètres qui servent à la transformation sont modifiés ultérieurement, la transformation est rejouée automatiquement. Au final, on arrive à un code javascript beaucoup plus clair et concis que son équivalent en jQuery.

Bon là, la particularité de Vue par rapport à jQuery n'est pas très criante dans l'exemple de Captain_Cowkill, mais sur quelque chose de moins trivial on voit tout de suite la différence.

**Getz** · 04/08/2021, 08h54

+1 GrandFather

Voilà pourquoi il vallait mieux poser ta question directement : ce que tu croyais être spécifique à une version du framework est en fait une syntaxe standard du Javascript

**Captain_Cowkill** · 04/08/2021, 09h10

Merci pour l'explication

Du coup c'est dommage je préférais la seconde

**Getz** · 04/08/2021, 09h46

Si c'est pour un projet perso (donc sans norme imposée), rien ne t'empêche de l'utiliser !
Comme dit GrandFather, ce n'est que du sucre syntaxique, cela ne rend pas ton code invalide pour autant.

**GrandFather** · 04/08/2021, 11h09

En fait cette syntaxe de définition des fonctions se rapproche de celle du C, et donc de celle des langages qui en sont des dérivés, dont le PHP très utilisé dans le développement Web côté backend. Si un jour tu passes du côté obscur, et que tu délaisses les interfaces Web sexy pour le code austère plein de rouages qui grincent du backend, tu trouveras cool d'utiliser des structures syntaxiques proches.

**Awake** · 04/08/2021, 11h20

À moins que j'ai loupé un truc, il faut utiliser le mot clé function pour déclarer une méthode en PHP.

Edit : ha ben c'est sûrement ce que tu voulais dire, j'avais compris l'inverse

**Captain_Cowkill** · 04/08/2021, 12h05

Envoyé par GrandFather

En fait cette syntaxe de définition des fonctions se rapproche de celle du C, et donc de celle des langages qui en sont des dérivés, dont le PHP très utilisé dans le développement Web côté backend. Si un jour tu passes du côté obscur, et que tu délaisses les interfaces Web sexy pour le code austère plein de rouages qui grincent du backend, tu trouveras cool d'utiliser des structures syntaxiques proches.

On parle bien de la première là ? Je suis un peu perdu

Mais oui, je préférerai prendre l'habitude de la syntaxe la plus utile et "moderne".

**Orhin** · 04/08/2021, 13h18

Envoyé par GrandFather

@acdctabs >> Alors Vue est aux antipodes de jQuery, pour ce qui est de la philosophie et de la façon de fonctionner. Très grossièrement, jQuery permet d'écrire des instructions pour modifier directement le DOM, Vue c'est l'inverse : on définit ce qu'on veut obtenir, de manière déclarative, et c'est Vue qui se charge de la transformation du DOM de façon transparente. Et il le fait de manière réactive, si des paramètres qui servent à la transformation sont modifiés ultérieurement, la transformation est rejouée automatiquement. Au final, on arrive à un code javascript beaucoup plus clair et concis que son équivalent en jQuery.

À noter que c'est le cas pour tous les framework web "moderne", React ou Angular fonctionnent aussi (globalement) comme ça.

**Fastela** · 04/08/2021, 16h45

J'arrive un peu tard, mais ça fait 3 ans que je fais du Vue, et j'ai quasi jamais vu la seconde façon d'écrire le code montré par Cowkill.

D'ailleurs si tu as d'autres questions n'hésite pas !

**Getz** · 04/08/2021, 17h04

Un peu HS, mais on regarde la série "How To Sell Drug Online (Fast)" sur Netflix en ce moment, et les mecs codent en VueJS, avec du SCSS, sur VSCode, font des tests Cypress

Souvent dans les séries/films, les mecs tapent n'importe quoi dans un truc qui ressemble à un terminal (ou genre les hackers qui écrivent du HTML

)
Du coup à chaque passage d'un écran dans la série, je regarde le code (si il y avait pas ma copine, je mettrai pause

)

https://twitter.com/Gonzalo2683/stat...594752/photo/1

**acdctabs** · 04/08/2021, 17h32

Il y a 2 fois orderthismonth alors que le deuxième ça devrait être orderthisyear (ligne 12).
Faut debug !

**Captain_Cowkill** · 04/08/2021, 18h22

Envoyé par Fastela

J'arrive un peu tard, mais ça fait 3 ans que je fais du Vue, et j'ai quasi jamais vu la seconde façon d'écrire le code montré par Cowkill.

D'ailleurs si tu as d'autres questions n'hésite pas !

Merci

La seconde je l'ai trouvé sur des forums et dans une formation (dans une démo).
Mais oui, du coup c'est pas du best practice alors je l'ai effacé de ma mémoire

**Sangoon** · 04/08/2021, 21h25

Envoyé par Captain_Cowkill

Merci

La seconde je l'ai trouvé sur des forums et dans une formation (dans une démo).
Mais oui, du coup c'est pas du best practice alors je l'ai effacé de ma mémoire

Désolé pour la réponse ultra tardive mais du coup tu vois en posant ta question directement plein de canards ont été content de pouvoir t'aider.
Je rajouterais aussi que MDN est une mine d'or pour lever les doutes sur les syntaxes et/ou usage de fonction JS Vanilla, par exemple pour ton problème : https://developer.mozilla.org/fr/doc...od_definitions

**Captain_Cowkill** · 04/08/2021, 21h50

Oui, j'ai été voir là-bas. C'est sur ce site que j'ai suivi ma formation HTML et CSS.

**vv221** · 07/08/2021, 19h39

Envoyé par hijopr

Ça me rappelle la belle époque du XHTML où il fallait fermer toutes les balises et des tonnes de règles supplémentaires pour passer la validation. C'était carré. C'etait propre. De nos jours les jeunes font n'importe quoi avec leur HTML5 et leur DOM virtuel

Vu le puits de fange qu’est le développement Web "moderne", avec ses trouze-mille étapes de transpilation et ses 800 Mio de dépendances JS pour afficher un pauvre bouton sur une page vide, je suis bien tenté par un retour à XHTML pour mes prochains développements à destination du Web.

Discussion: Design & Développement web - Le topic des canards qui mangent des cookies

Outils de la discussion

Règles de messages