3 min de lecture

Hello World : Bienvenue sur mon blog

Mon premier article de blog pour me présenter et tester mes différents composants mdx.

introastroweb-dev

Bienvenue sur mon blog ! Je suis ravi d’avoir enfin un espace pour partager mes réflexions sur le développement web, mes aventures de codeur et les leçons apprises en chemin.

Apprenez le JavaScript, TypeScript et Node.js à travers différents articles et vidéos.

Pourquoi lancer un blog ?

Je construis des choses pour le web depuis un moment maintenant, et j’ai toujours trouvé que l’écriture m’aide à réfléchir. Que ce soit pour documenter un bug compliqué que j’ai résolu ou explorer une nouvelle technologie, mettre mes pensées en mots solidifie ma compréhension.

Et puis, si quelque chose m’a aidé, peut-être que ça vous aidera aussi.

Le meilleur moment pour créer un blog, c’était hier. Le deuxième meilleur moment, c’est maintenant.

Inconnu

Un petit bout de code

Puisque c’est un blog de développeur, commençons avec du code. Voici une fonction simple qui salue le monde avec style :

typescript
function greet(name: string): string {
  const greeting = `Bonjour, ${name} !`;
  console.log(greeting);
  return greeting;
}

greet('le monde');

Et voici comment vous pourriez utiliser cela dans un composant React :

tsx
import { useState } from 'react';

export function Greeter() {
  const [name, setName] = useState('le monde');

  return (
    <div className="bg-card rounded-lg p-4">
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        className="rounded border px-3 py-2"
        placeholder="Entrez votre nom"
      />
      <p className="mt-4 text-xl font-bold">Bonjour, {name} !</p>
    </div>
  );
}

Structure de projet

Voici un exemple de visualisation de la structure d’un projet avec le composant FileTree :

  • Directorysrc
    • Directorycomponents
      • Directorymdx
        • FileTree.tsx
        • Callout.tsx
        • Mermaid.tsx
      • Directoryastro
        • Figure.astro
    • Directorycontent
      • Directoryblog
        • Directoryfr
          • hello-world.mdx
        • Directoryen
          • hello-world.mdx
    • Directorylayouts
      • Layout.astro
    • Directorypages
      • index.astro

Éléments visuels

Voici un exemple d’inclusion d’images avec légendes :

Code sur un écran d'ordinateur
Écrire du code est à la fois un art et une science

Et voici un diagramme Mermaid montrant un flux git simple :

Un workflow de branches git typique

Vous pouvez également créer des organigrammes :

mermaid
La boucle de débogage du développeur

Et maintenant ?

Je vais écrire sur :

Restez connectés, et n’hésitez pas à me contacter si vous souhaitez que j’aborde un sujet en particulier.

À bientôt dans le prochain article !


Retour à tous les articles