Qu’est-ce qu’EJS et pourquoi en ai-je besoin ?
Dans le développement Web, il existe de nombreux outils parmi lesquels les développeurs peuvent choisir. Choisir les bons outils et technologies peut avoir un impact significatif sur l’efficacité et la fonctionnalité des projets. L'un des outils les plus populaires en matière de développement Web est EJS, qui signifie Embedded Javascript . EJS est un langage de création de modèles JavaScript simple qui génère HTML avec du JavaScript simple. Dans cet article, nous expliquerons ce qu'est EJS, pourquoi il est nécessaire, ses fonctionnalités, comment l'installer et fournirons un exemple de sortie.
Qu'est-ce qu'EJS
EJS ou Embedded JavaScript est un moteur de modèles pour JavaScript utilisé pour le développement Web qui permet aux utilisateurs de générer un balisage HTML dynamique à l'aide de code JavaScript dans des modèles HTML. Il est conçu pour simplifier le processus de rendu de contenu dynamique dans les applications Web. Il contient un mélange de HTML et de JavaScript qui facilite la génération de contenu dynamique basé sur les données de votre application.
Caractéristiques d'EJS
- Syntaxe simple : EJS propose une syntaxe simple qui combine HTML et JavaScript, ce qui la rend facile à apprendre et à utiliser.
- Contenu dynamique : EJS permet la génération dynamique de contenu HTML et JavaScript au sein de balises HTML, améliorant ainsi la flexibilité dans la création de contenu.
- Mise en page et partiels : EJS prend en charge les mises en page et les partiels, permettant aux utilisateurs de diviser les modèles en composants réutilisables, réduisant ainsi la duplication de code et améliorant la maintenabilité.
- La gestion des erreurs: EJS fournit des messages d'erreur qui aident les développeurs à déboguer, améliorant ainsi l'expérience globale de développement.
Pourquoi avez-vous besoin d’EJS ?
- Génération HTML dynamique : EJS vous permet de générer du contenu HTML dynamique basé sur des variables, des conditions, des boucles et d'autres logiques JavaScript. Ceci est particulièrement utile pour restituer des données dynamiques extraites de bases de données ou d'API.
- Réutilisabilité du code : En utilisant des modèles EJS, vous pouvez créer des composants ou des partiels réutilisables pouvant être inclus dans plusieurs pages. Cela favorise la modularité du code et réduit la duplication dans vos applications Web.
- Rendu côté serveur : Avec EJS, vous pouvez effectuer un rendu côté serveur (SSR) de pages Web. Le SSR est bénéfique pour le référencement (Search Engine Optimization) car il permet aux moteurs de recherche d'explorer et d'indexer votre contenu plus efficacement par rapport au rendu côté client (CSR) effectué par des frameworks comme React ou Angular.
- Intégration facile avec Node.js et Express.js : EJS s'intègre parfaitement à Node.js et Express.js, ce qui en fait un choix populaire pour les développeurs travaillant sur des applications JavaScript côté serveur. Il est facile à configurer et à utiliser dans un projet Express.js.
- Syntaxe familière : Si vous êtes déjà familier avec HTML et JavaScript, apprendre et utiliser EJS est simple. La syntaxe est similaire au HTML avec du code JavaScript intégré entre
>balises, le rendant accessible aux développeurs de différents niveaux de compétence. - Héritage et mises en page des modèles : EJS prend en charge l'héritage de modèles et les mises en page, vous permettant de créer des mises en page cohérentes pour vos pages Web. Vous pouvez définir une présentation de base et l'étendre dans d'autres modèles, ce qui facilite le maintien d'une apparence cohérente dans votre application.
Comment utiliser EJS ?
Étape 1: Installez EJS en tant que dépendance dans votre projet
npm install ejs
Étape 2: Créez un dossier « vues » dans le répertoire de votre projet s'il n'existe pas déjà. Dans le dossier vues, créez un nouveau fichier avec une extension .ejs, par exemple, index.ejs
Étape 3: Pour intégrer EJS à Express dans une application Express.js, définissez EJS comme moteur d'affichage dans la configuration de votre application Express. Cette configuration permet à Express d'utiliser EJS pour le rendu des vues.
app.set('view engine', 'ejs'); Étape 4: Rendu du modèle EJS. Dans vos gestionnaires de routes Express, nous rendons le modèle EJS en utilisant 'res.render()' et fournissez les données nécessaires à transmettre au modèle.
res.render('hello', { name: 'Geeks' }); Structure du projet :
Les dépendances mises à jour dans package.json le fichier ressemblera à :
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' } Exemple: Implémentation pour présenter l'utilisation des ejs avec un exemple.
HTML Exemple de titre EJS> tête> <body> <h1>Bonjour, <%= name %>!h1> corps> html> </pre> </code>Javascript <code> <pre>// index.js const express = require('express'); const app = express(); const port = 3000; app.set('view engine', 'ejs'); app.get('/', (req, res) =>{ res.render('bonjour', { nom : 'Geeks' }); }); app.listen(port, () => { console.log(`Le serveur s'exécute sur http://localhost:${port}`); }); </pre> </code> <p dir='ltr'> <b> <strong>Étape pour exécuter l'application : </strong> </b> <span>Exécutez l'application à l'aide de la commande suivante à partir du répertoire racine du projet </span> </p> <pre>node index.js </pre> <p dir='ltr'> <b> <strong>Sortir: </strong> </b> <span>Votre projet sera affiché dans l'URL http://localhost:3000/ </span> </p> <p dir='ltr'> <img src='//techcodeview.com/img/ejs-templating-language/39/what-is-ejs-why-do-i-need-it-2.webp' alt='sortir'> </p> <br> <br>
</div>
<!-- Article Footer with Prominent Share Buttons -->
<div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
<div class="flex flex-col sm:flex-row items-center justify-between gap-6">
<h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
<i class="fa fa-share-alt text-tech-500"> </i>
Partager </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Qu’est-ce qu’EJS et pourquoi en ai-je besoin ?&url=https://www.techcodeview.com/what-is-ejs-why-do-i-need-it"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-twitter text-lg"> </i>
<span class="hidden sm:inline">Twitter </span>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/what-is-ejs-why-do-i-need-it"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-facebook text-lg"> </i>
<span class="hidden sm:inline">Facebook </span>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/what-is-ejs-why-do-i-need-it&title=Qu’est-ce qu’EJS et pourquoi en ai-je besoin ?"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-linkedin text-lg"> </i>
<span class="hidden sm:inline">LinkedIn </span>
</a>
</div>
</div>
</div>
</article>
<!-- Comments Placeholder / Random Articles -->
<div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
Vous Pourriez Aimer </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/equal-sum-and-xor" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/bit-magic/44/equal-sum-and-xor.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Somme égale et XOR" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/equal-sum-and-xor">Somme égale et XOR </a>
</h4>
</div> <div class="group">
<a href="/ascii-table-c" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/c-tutorial/14/ascii-table-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Tableau ASCII en C" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/ascii-table-c">Tableau ASCII en C </a>
</h4>
</div>
</div>
</div>
</div>
<!-- SECONDARY COLUMN (SIDEBAR) -->
<!-- Aside Column -->
<div class="lg:col-span-4 space-y-8">
<!-- Best Articles Widget -->
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
<span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
Top Articles </h2>
</div>
<!-- Owl Carousel Preserved Container -->
<div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
<!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/9-ways-shut-down-windows-11">
<img src="https://techcodeview.com/img/geeks-premier-league-2023/30/9-ways-shut-down-windows-11.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="9 façons d'arrêter Windows 11" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/9-ways-shut-down-windows-11" class="hover:text-tech-500 transition-colors line-clamp-3">9 façons d'arrêter Windows 11 </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/how-save-file-vi-vim-editor-quit">
<img src="https://techcodeview.com/img/geeks-premier-league-2023/29/how-save-file-vi-vim-editor-quit.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comment enregistrer un fichier dans Vi / Vim Editor et quitter" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/how-save-file-vi-vim-editor-quit" class="hover:text-tech-500 transition-colors line-clamp-3">Comment enregistrer un fichier dans Vi / Vim Editor et quitter </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/bubble-sort-algorithm">
<img src="https://techcodeview.com/img/ds-tutorial/52/bubble-sort-algorithm.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Algorithme de tri à bulles" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/bubble-sort-algorithm" class="hover:text-tech-500 transition-colors line-clamp-3">Algorithme de tri à bulles </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/matplotlib-pyplot-savefig-python">
<img src="https://techcodeview.com/img/matplotlib-pyplot-class/97/matplotlib-pyplot-savefig-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Matplotlib.pyplot.savefig() en Python" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/matplotlib-pyplot-savefig-python" class="hover:text-tech-500 transition-colors line-clamp-3">Matplotlib.pyplot.savefig() en Python </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/20-poetic-devices-you-must-know-131342">
<img src="https://techcodeview.com/img/blog/60/20-poetic-devices-you-must-know.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Les 20 dispositifs poétiques que vous devez connaître" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/20-poetic-devices-you-must-know-131342" class="hover:text-tech-500 transition-colors line-clamp-3">Les 20 dispositifs poétiques que vous devez connaître </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/is-digital-sat-easier-131484">
<img src="https://techcodeview.com/img/blog/01/is-digital-sat-easier.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Le SAT numérique est-il plus facile ou plus difficile que la version papier ?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/is-digital-sat-easier-131484" class="hover:text-tech-500 transition-colors line-clamp-3">Le SAT numérique est-il plus facile ou plus difficile que la version papier ? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/minimax-algorithm-game-theory-set-4">
<img src="https://techcodeview.com/img/it-problems-solutions/87/minimax-algorithm-game-theory-set-4.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Algorithme Minimax dans la théorie des jeux | Ensemble 4 (taille alpha-bêta)" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/minimax-algorithm-game-theory-set-4" class="hover:text-tech-500 transition-colors line-clamp-3">Algorithme Minimax dans la théorie des jeux | Ensemble 4 (taille alpha-bêta) </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/recursion-tree-method">
<img src="https://techcodeview.com/img/daa-tutorial/87/recursion-tree-method.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Méthode de l'arbre de récursion" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/recursion-tree-method" class="hover:text-tech-500 transition-colors line-clamp-3">Méthode de l'arbre de récursion </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/how-check-groups-user-belongs-linux">
<img src="https://techcodeview.com/img/geeks-premier-league-2023/60/how-check-groups-user-belongs-linux.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comment vérifier les groupes auxquels un utilisateur appartient sous Linux ?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/how-check-groups-user-belongs-linux" class="hover:text-tech-500 transition-colors line-clamp-3">Comment vérifier les groupes auxquels un utilisateur appartient sous Linux ? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/understanding-prefabs">
<img src="https://techcodeview.com/img/unity-tutorial/65/understanding-prefabs.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comprendre les préfabriqués et l'instanciation" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/understanding-prefabs" class="hover:text-tech-500 transition-colors line-clamp-3">Comprendre les préfabriqués et l'instanciation </a>
</h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
<!-- Categories -->
<div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Catégorie </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Blog
</a> <a href="/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Conversion Java
</a> <a href="/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Mathématiques
</a> <a href="/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Collections Java
</a> <a href="/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Différences
</a> <a href="/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Chaîne Java
</a>
</div>
<!-- Interesting Articles Widget -->
<div class="mt-8">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Des Articles Intéressants </h2>
</div>
<div id="owl-carousel-4" class="owl-carousel owl-theme">
<!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/python-dsa/68/queue-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="File d'attente en Python" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/python-dsa/">Python-Dsa </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/queue-python">File d'attente en Python </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/picked/46/list-countries-united-kingdom.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Liste des pays du Royaume-Uni" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/picked/">Choisi </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/list-countries-united-kingdom">Liste des pays du Royaume-Uni </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/chemistry-class-11/04/aufbau-principle.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Principe structurel" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/chemistry-class-11-cat/">Chimie-Classe-11 </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/aufbau-principle">Principe structurel </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/node-js-misc/24/how-use-ejs-javascript.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comment utiliser les Ejs en JavaScript ?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/node-js-misc/">Node.js-Divers </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/how-use-ejs-javascript">Comment utiliser les Ejs en JavaScript ? </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/base-conversion/88/java-convert-int-string-different-ways-conversion.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Java Convertir un entier en chaîne | Différentes façons de conversion" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/base-conversion/">Conversion De Base </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/java-convert-int-string-different-ways-conversion">Java Convertir un entier en chaîne | Différentes façons de conversion </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/spring-boot-tutorial/70/spring-boot-starter-actuator.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Actionneur de démarrage à ressort" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/spring-boot-tutorial/">Tutoriel Spring Boot </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/spring-boot-starter-actuator">Actionneur de démarrage à ressort </a> </h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
</div>
</div>
</div>
<!-- /Aside Column --> </div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<span class="footer-links">
Copyright ©2026 Tous Les Droits Sont Réservés |
<a href="//www.techcodeview.com/hu/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Clause De Non-Responsabilité </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">A Propos De Nous </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politique De Confidentialité </a>
</span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover { background-color: #0284c7; }
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>