Mouvement lent

Il était une fois, j'ai été confus par le développement rapide de la technologie du réseau. Il semble que de nouveaux plug-ins, cadres, technologies ou fonctionnalités linguistiques soient publiés chaque jour. Je crois fermement que pour survivre et pour concurrencer les pigistes, je dois apprendre tout le reste de : WebPack, React, Angular, SVGS, Houdini, CSS Grid Layout, ES6, etc. Être actif sur Twitter et assister à diverses réunions ne m'a pas aidé avec ce problème parce que je suis constamment exposé à tout ce qui est nouveau .

Ralentir

À un moment donné, j'ai abandonné. J'ai décidé que je ne pouvais pas suivre le rythme. Du point de vue de la carrière, cela n'a rien changé de moi, car en fait, personne ne s'attend à ce que je sache tout, et ce sentiment que j'avais auparavant était uniquement dans ma perception personnelle. Le ralentir a été une décision sage car elle a non seulement soulagé mon stress mental, mais cela m'a également aidé à me concentrer sur ce que je voulais vraiment apprendre. Je lis toujours les newsletters, les blogs et Twitter et je passe encore du temps à essayer de nouvelles choses à l'occasion, mais je ne me mets pas de pression. J'essaie de rester à jour, mais je ne ressens pas le besoin de maîtriser toutes les connaissances.

C'est ainsi que j'ai eu affaire au développement de la technologie du réseau depuis quelques années, mais récemment, surtout cette année, j'ai appris quelque chose de nouveau. Ce n'est pas un cadre ou un langage - c'est un aperçu que dans notre désir d'innovation et de progrès, nous ignorons les nombreuses fonctionnalités qui exploitent aujourd'hui HTML, CSS et JavaScript. En d'autres termes: si nous regardons le passé plutôt que de regarder vers l'avenir, nous pouvons apprendre beaucoup.

Ne chassez pas la cascade

Je dis que cela ignore parce que je crois qu'il y a un énorme écart entre les connaissances en langue frontale que nous pensons que nous connaissons et les connaissances que nous devrions réellement connaître.

Html

Vérifier le site Web et évaluer sa qualité frontale fait partie de mon travail et de mon passe-temps. J'ai examiné le code sous-jacent pour de nombreux sites Web et je ne peux que confirmer les experts en accessibilité du Web tous les jours: la plupart des documents HTML sont en mauvais état. Si vous ne me croyez pas, regardez ces données:

• Sur les 1 000 000 pages d'accueil les plus élevés, 98,1% des erreurs détectables WCAG 2 existent.
• Des milliers de sites Web contiennent<h7></h7> et<h8></h8> élément.
• Après les titres et les métadonnées, Div est l'élément le plus populaire.
• En moyenne, nous n'avons utilisé que 30 des 110+ éléments disponibles.

Il existe une énorme différence entre comprendre la syntaxe HTML et savoir comment l'utiliser correctement. Nous pouvons tous passer en revue certaines choses lors de l'écriture de documents HTML bien structurés et sémantiques. En 2020, j'ai passé beaucoup de temps à apprendre HTML et j'espère que les utilisateurs du site Web que j'ai construits bénéficieront de mes idées.

Deux de mes choses préférées sur HTML que j'ai apprises en 2020:

Vous pouvez modifier le nom du fichier téléchargeable en définissant une valeur dans download .

 <a download="report.pdf" href="https://www.php.cn/link/4bf2689c42aae35e6924a432e435e0b1">Télécharger (2 Mo)</a>

Vous pouvez utiliser value pour modifier le nombre dans la liste commandée.

<ol>
<li value="3"> C</li>
  <li value="2">B</li>
  <li value="1">UN</li>
</ol>

CSS

Presque chaque fois que je recherche les propriétés CSS sur MDN ou CSS-Tricks, je trouve quelque chose de nouveau. Essayez-le vous-même. Recherchez margin , list-style-type ou color . Je suis sûr que vous apprendrez quelque chose.

La liste du contenu que j'ai appris sur CSS en 2020 est longue, voici deux de mes points préférés.

Vous pouvez utiliser url() comme (partie de) la valeur de content .

 div :: avant {
  Contenu: URL ('Marker-icon.png');
}

Vous pouvez implémenter un défilement lisse natif dans CSS.

 / * Anime défilement uniquement si l'utilisateur ne préfère pas réduire le mouvement * /
@Media (préfert-réduction du mouvement: sans préférence) {
  html {
    Faites défiler-behavior: lisse;
  }

  / * Ajoutez un espacement entre la cible et le haut de la fenêtre * /
  :cible {
    Scroll-margin-top: 0.8EM;
  }
}

Javascrip

J'écris beaucoup JavaScript, mais ce n'est pas ma force fondamentale, donc j'ai appris de nouvelles choses à ce sujet. Voici deux de mes points préférés cette année:

Vous pouvez utiliser la propriété nomodule pour exécuter le code JavaScript uniquement dans les navigateurs qui ne prennent pas en charge les modules JavaScript.

 // nomodule.js
  Console.log («Ce navigateur ne prend pas en charge les modules JS.»);

// module.js
  Console.log («Ce navigateur prend en charge les modules JS.»);

en conclusion

HTML est l'épine dorsale de chaque site Web; Savoir rédiger des documents sémantisés devrait être la priorité absolue pour chaque développeur Web. CSS est très complexe dans une certaine mesure, et pour apprendre de nouveaux concepts, nous devons comprendre leur comparaison avec les anciennes technologies et les problèmes qu'ils résolvent. Les frameworks et bibliothèques JavaScript émergent dans un flux sans fin, mais ils ont tous une chose en commun, c'est-à-dire qu'ils sont écrits en javascript natif.

En 2020, j'ai réapproché ce que j'ai oublié et découvert de nouvelles connaissances sur les éléments et les attributs établis. Si vous ne le cherchez que, vous trouverez beaucoup de connaissances cachées. Je vais développer ce sujet plus loin en 2021 car il y a encore beaucoup de grandes choses à explorer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!