Vous êtes simplement en train de commencer le développement Web? Voici exactement par où commencer

Il est difficile de savoir où commencer à apprendre le développement Web. Les suggestions habituelles de React, Svelte, NPM, etc., vous ont probablement laissé confondu et embourbé dans la complexité. Vous devez minimiser consciemment cela. Permettez-moi de vous aider à vous opérer, moins les bagages.

Utilisez le principe du baiser, toujours

Lorsque vous commencez, vous ne voulez pas vous envelopper avec une complexité inutile. Au lieu de cela, vous voulez qu'il y ait aussi peu entre votre code et le navigateur que possible. Vous voulez vous concentrer uniquement sur les fondamentaux. Vous voulez vous embrasser – maintenez-le simple, stupide. Suivre ce principe vous permet d'apporter des modifications rapidement, de voir leur effet et de les comprendre.

Je me concentrerai sur la façon de réaliser cette simplicité. Je recommande également notre guide pour éviter les pièges courants d'apprendre à coder.

Oubliez les cadres, car ils ajoutent simplement de la complexité

Le moyen le plus simple de s'enliser est d'installer les outils et les cadres souvent recommandés (NPM, fil, PNPM, Nodejs, React, etc.). Les gens les recommandent parce qu'ils sont populaires et plus souhaitables professionnellement que JavaScript (JS). Ces recommandations conviennent à leurs exigences, pas aux vôtres.

Des outils complexes ajoutent des couches supplémentaires à votre code, ce qui obscurcit la façon dont la magie se produit. Résistez à ces couches. Restez concentré sur les principes fondamentaux: quelles sont les choses, à quoi elles elles sont pour et comment vous pouvez les utiliser. Testez tout ce que vous apprenez et gardez des notes simples.

En bref, éloignez-vous des outils et des cadres pour l'instant. Vous pouvez apprendre le NPM dans quelques semaines. Peut-être que dans quelques mois, vous pouvez apprendre React ou Svelte.

Le code lisible réduit le fardeau cognitif

La simplicité (AKA Licevabilité) est l'un des principes directeurs du code propre. Je réécrit souvent des parties fantaisistes de mon code pour la rendre plus stupide et plus facile à lire. Votre code doit exprimer sa signification à travers des noms de variables et sa structure.

Utiliser les noms comme panneaux de signalisation

Par exemple, commencez les noms de fonction avec des mots d'action courts et simples:

        function fetchUserAccount() {...}
    

Vous ne comprenez peut-être pas encore entièrement ce code, mais vous pouvez comprendre son intention: il récupère un compte utilisateur. Si cela vous est clair, alors c'est un bon nom.

Jetez un œil à ce qui suit. Même si vous faire Comprenez le code, il n'est pas immédiatement clair ce qu'il fait.

        function evaluateDimensions(b) {
  return b.x > 10 && b.z > 5 && b.y > 7
}

    

Regardez maintenant ce code, qui fait la même chose mais a une intention beaucoup plus claire:

        function boxWillFit(box) {
  const isDeepEnough = box.depth > 5
  const isWideEnough = box.width > 10
  const isLongEnough = box.length > 7
  return isDeepEnough && isWideEnough && isLongEnough
}
    

Encore une fois, vous ne comprenez peut-être pas le code, mais son intention est clair à voir en un coup d'œil. Vous jetterez un coup d'œil sur votre code des centaines de fois, alors faites-vous une faveur, rendez-vous stupidement de traiter rapidement et utilisez des noms pour les panneaux.

Les choses liées au groupe ensemble en utilisant Newlines comme limites

Lorsque nous regroupons les choses, ils forment des associations naturelles dans nos esprits. Vous devez utiliser les lignes vides comme limites pour regrouper les blocs de code liés ensemble. L'utilisation de Whitespace de cette façon est une pratique courante dans la conception de l'expérience utilisateur (UX).

Les commentaires aident également à tracer ces limites. Les commentaires ne sont pas vos notes; Ce sont des étiquettes et des informations pour les futurs programmeurs (qui vous incluent). Utilisez-les pour aider les autres, mais aussi embrasser. Moins vous écrivez, mieux c'est. Affiner l'art de la concision. Inclure uniquement des commentaires utiles et des étiquettes claires.

Dans l'exemple suivant, les commentaires commencent par une slash avant (/):

        function boxWillFit(box) {
  
  
  if (!isBox(box)) return false
  
  
  const isDeepEnough = box.depth > 5
  const isWideEnough = box.width > 10
  const isLongEnough = box.length > 7
  return isDeepEnough && isWideEnough && isLongEnough
}
    

Remarquez la cohérence. La cohérence rend votre code lisible et plus facile à traiter. Vous devriez fournir juste assez de contexte dans vos commentaires pour être utile.

Le code se complique, alors vous facilitez la tâche

L'une des plus grandes victoires pour la lisibilité est la cohérence. La cohérence avec la disposition, la dénomination et le regroupement vous soulage du fardeau stressant de la transformation de chaque ligne, encore et encore. L'objectif est de regarder un bloc de code et de savoir ce qu'il fait sans réfléchir.

Suivre des pratiques de lisibilité raisonnables vous aidera à comprendre votre code pendant que vous apprenez. Les choses deviendront complexes et vous avez besoin de panneaux clairs. Cela vous fera économiser beaucoup de stress et d'efforts mentaux.

Servir le contenu localement avec un serveur HTTP simple

Pour adhérer au principe du baiser, gardez votre outillage simple. Il n'est pas difficile de servir du contenu Web, et en fait vous pouvez le faire avec une seule commande.

Créez un répertoire et placez-le un fichier index.html avec le contenu suivant:

        html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World!title>
  <link rel="stylesheet" href="/style.css">
head>
<body>
  <main>
    <p>Hello From HTML!p>
  main>
  <script type="module" src="/index.js">script>
body>
html>
    

Placez vos fichiers JS et CSS dans le même répertoire, modifiez-le, puis exécutez le serveur avec la commande suivante:

        python -m http.server 8080
    

J'ai supposé que Python 3 a installé. Maintenant, visitez simplement LocalHost: 8080 dans votre navigateur, et vous verrez votre page.

Si vous voulez que votre page ressemble exactement à la mienne, définissez ce qui suit dans votre fichier JS:

        const main = document.querySelector("main");
const p = document.createElement("p");
p.textContent = "..and from JS.."
main.appendChild(p);
    

Et mettez ce qui suit dans votre fichier CSS:

        p {
  font-weight: bold;
  color: rgba(5, 5, 5, 0.75);
  font-size: 4em;
  font-family: sans;
  margin: 0px;
}
p:nth-child(2) {
  font-size: 1em;
}
main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
    

Vous excluant, éditeur, ceci est toute votre pile technologique. Comme vous pouvez le voir, c'est simple et rien n'obscurcit votre code. C'est le petit écrans parfait pour commencer votre métier.

Pour voir les modifications, actualisez la page du navigateur après les avoir effectuées.

Méfiez-vous des différentes façons d'importer des fichiers JS

L'écosystème JS est un gâchis. En fait, l'ensemble de l'écosystème du développement Web frontal est un gâchis. En tant que débutant, j'étais souvent confus par les multiples façons d'atteindre le même objectif. Un domaine de confusion particulier est la syntaxe d'importation. Pour vous épargner les détails, il y a 4 approches différentes, mais la plus récente (ESM) est la plus facile à utiliser.

Pour utiliser la nouvelle méthode, définissez taper égal au module dans toutes vos balises de script:

        <script type="module" src="/index.js">script>
    

À l'intérieur de l'index.js, importez un autre fichier JS en plaçant une instruction d'importation en haut du fichier:

        
import { something } from "/bar.js"

    

La barre oblique dans « /bar.js » fait référence au chemin sur localhost: 8080 /, et il pointe vers le répertoire que nous servons; L'importation « /bar.js » importera un fichier appelé bar.js à partir de ce répertoire. Il importe également «quelque chose», qui est une fonction ou un nom de variable, à partir de Bar.js.

Sur cette note, méfiez-vous que vous ne mélangez pas non plus CommonJS avec JS ordinaire. NodeJS utilise CommonJS, qui nécessite des outils de construction spéciaux pour le faire fonctionner dans le navigateur. Ils se ressemblent, avec de légères différences. Si vous voyez une instruction comme celle suivante, cela ne fonctionne que pour NodeJS et non directement pour le navigateur:

        const foo = require("bar");
    

C'est la manière (plus ancienne) que NodeJS importe des fichiers.

Choisissez un éditeur qui a au moins la mise en évidence de la syntaxe

La mise en évidence de la syntaxe est essentiellement des couleurs pour votre code. Si je pouvais choisir une seule technologie pour mon éditeur, ce serait une mise en évidence de la syntaxe. Encore une fois, c'est une chose visuelle; Nos cerveaux ont évolué pour traiter visuellement des informations sur des millions d'années, et je crois que tirer parti de nos sens visuels est l'un de nos outils les plus puissants pour comprendre le code rapidement. Les couleurs sont le meilleur moyen de puiser dans cette puissance.

Choisissez un éditeur qui fait la mise en évidence de la syntaxe. Si vous avez des problèmes en choisissant un, vous pouvez être intéressé par les raisons pour lesquelles j'ai choisi Neovim comme éditeur de texte. Cependant, les choix populaires sont VScode, Emacs, Notepad ++ et même Nano.

Trouvez une suite de bonnes ressources car ce sont votre Bible

Vous avez besoin de réponses, de conseils, de matériel de référence, de tutoriels, d'idées et, surtout, de patience. Je ne les ai pas enlevés sans raison; Chacun d'eux est crucial.

• Matériel de référence: le site Web de Mozilla Developer (MDN), qui est la ressource incontournable.

• Tutoriels: vous pouvez les trouver n'importe où, mais les utiliser uniquement comme roues de formation.

• Réponses: Il est préférable de définir une IA en mode conversationnel bref et de l'interroger de manière critique – ne copiez pas et ne codez pas de code. Stack Overflow est fiable pour le moment où AI déraille de la réalité.

• Guidance: les vraies personnes sont la meilleure ressource. IRC et Discord ont des communautés actives, bien que je n'utilise pas non plus.

• Idées: Utilisez des livres et YouTube. Les livres présenteront les fondamentaux et YouTube regorge de nouvelles idées.

• Patience: reportez-vous à votre zen intérieur.

Si vous utilisez correctement l'IA, ils ne devraient pas générer de code pour vous. Vous devriez poser les bonnes questions et obtenir de brèves réponses en anglais simple. Lorsque l'IA écrit tout le code pour vous, cela ne fait que nuire à votre développement.

---

L'idée dominante est de rester simple. Cela signifie éviter les outils complexes, disposer de votre code de manière cohérente et utiliser des noms sensés pour le rendre lisible en un coup d'œil.

Pour servir le contenu, créez un répertoire, placez-y les fichiers source et exécutez le serveur. De là, vous pouvez modifier les fichiers de code et actualiser le navigateur.

Les ressources que vous rassemblez sont à vous. Cependant, MDN est le meilleur sur le Web, et la série Tutorial MDN a fière allure pour les débutants absolus. Vous pouvez également suivre notre tutoriel pour créer votre première application Web.