Wat is EJS en waarom heb ik het nodig?
Bij webontwikkeling zijn er veel tools beschikbaar waaruit ontwikkelaars kunnen kiezen. Het kiezen van de juiste tools en technologieën kan een aanzienlijke impact hebben op de efficiëntie en functionaliteit van projecten. Een van de populaire tools bij webontwikkeling is EJS, wat staat voor Embedded JavaScript . EJS is een eenvoudige JavaScript-sjabloontaal die HTML met gewoon JavaScript. In dit artikel bespreken we wat EJS is, waarom het nodig is, de functies ervan, hoe het te installeren, en geven we een voorbeeld met uitvoer.
Wat is EJS
EJS of Embedded JavaScript is een sjabloonengine voor JavaScript die wordt gebruikt voor webontwikkeling waarmee gebruikers dynamische HTML-opmaak kunnen genereren met behulp van JavaScript-code binnen HTML-sjablonen. Het is ontworpen om het proces van het weergeven van dynamische inhoud in webapplicaties te vereenvoudigen. Het bevat een combinatie van HTML en JavaScript waarmee u eenvoudig dynamische inhoud kunt genereren op basis van gegevens uit uw applicatie.
Kenmerken van EJS
- Eenvoudige syntaxis: EJS biedt een eenvoudige syntaxis die HTML en JavaScript combineert, waardoor het gemakkelijk te leren en te gebruiken is.
- Dynamische inhoud: EJS maakt het dynamisch genereren van HTML- en JavaScript-inhoud binnen HTML-tags mogelijk, waardoor de flexibiliteit bij het maken van inhoud wordt vergroot.
- Lay-out en gedeeltelijke delen: EJS ondersteunt lay-outs en gedeeltelijke indelingen, waardoor gebruikers sjablonen kunnen opsplitsen in herbruikbare componenten, waardoor duplicatie van code wordt verminderd en de onderhoudbaarheid wordt verbeterd.
- Foutafhandeling: EJS biedt foutmeldingen die ontwikkelaars helpen bij het opsporen van fouten, waardoor de algehele ontwikkelingservaring wordt verbeterd.
Waarom heb je EJS nodig?
- Dynamische HTML-generatie: Met EJS kunt u dynamische HTML-inhoud genereren op basis van variabelen, voorwaarden, lussen en andere JavaScript-logica. Dit is met name handig voor het weergeven van dynamische gegevens die zijn opgehaald uit databases of API's.
- Herbruikbaarheid van code: Door EJS-sjablonen te gebruiken, kunt u herbruikbare componenten of gedeeltelijke onderdelen maken die op meerdere pagina's kunnen worden opgenomen. Dit bevordert de modulariteit van de code en vermindert duplicatie in uw webapplicaties.
- Rendering op de server: Met EJS kunt u server-side rendering (SSR) van webpagina's uitvoeren. SSR is gunstig voor SEO (Search Engine Optimization), omdat zoekmachines uw inhoud effectiever kunnen crawlen en indexeren in vergelijking met client-side rendering (CSR) van frameworks als React of Angular.
- Eenvoudige integratie met Node.js en Express.js: EJS integreert naadloos met Node.js en Express.js, waardoor het een populaire keuze is voor ontwikkelaars die werken aan JavaScript-applicaties op de server. Het is eenvoudig in te stellen en te gebruiken binnen een Express.js-project.
- Bekende syntaxis: Als u al bekend bent met HTML en JavaScript, is het leren en gebruiken van EJS eenvoudig. De syntaxis is vergelijkbaar met HTML, met daarin ingesloten JavaScript-code
>tags, waardoor het toegankelijk wordt voor ontwikkelaars met verschillende vaardigheidsniveaus. - Sjabloonovererving en lay-outs: EJS ondersteunt sjabloonovererving en lay-outs, zodat u consistente lay-outs voor uw webpagina's kunt maken. U kunt een basislay-out definiëren en deze uitbreiden in andere sjablonen, waardoor het gemakkelijker wordt om een consistente look en feel in uw hele applicatie te behouden.
Hoe gebruik je EJS?
Stap 1: Installeer EJS als afhankelijkheid in uw project
npm install ejs
Stap 2: Maak een map ‘views’ in uw projectmap als deze nog niet bestaat. Maak in de map views een nieuw bestand met de extensie .ejs, bijvoorbeeld index.ejs
Stap 3: Om EJS met Express te integreren in een Express.js-toepassing, stelt u EJS in als de weergave-engine in uw Express-app-configuratie. Met deze configuratie kan Express EJS gebruiken voor het renderen van weergaven.
app.set('view engine', 'ejs'); Stap 4: Render EJS-sjabloon, in uw Express-routehandlers renderen we de EJS-sjabloon met behulp van ‘res.render()’ en geef de benodigde gegevens op die aan de sjabloon moeten worden doorgegeven.
res.render('hello', { name: 'Geeks' }); Projectstructuur:
De bijgewerkte afhankelijkheden in pakket.json bestand zal er als volgt uitzien:
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' } Voorbeeld: Implementatie om het gebruik van ejs te demonstreren met een voorbeeld.
HTML EJS Voorbeeldtitel> hoofd> <body> <h1>Hallo, <%= name %>!h1> body> 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('hallo', { naam: 'Geeks' }); }); app.listen(port, () => { console.log(`Server draait op http://localhost:${port}`); }); </pre> </code> <p dir='ltr'> <b> <strong>Stap om de applicatie uit te voeren: </strong> </b> <span>Voer de toepassing uit met behulp van de volgende opdracht vanuit de hoofdmap van het project </span> </p> <pre>node index.js </pre> <p dir='ltr'> <b> <strong>Uitgang: </strong> </b> <span>Uw project wordt weergegeven op de 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='uitgang'> </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>
Deel </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Wat is EJS en waarom heb ik het nodig?&url=https://www.techcodeview.com/nl/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/nl/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/nl/what-is-ejs-why-do-i-need-it&title=Wat is EJS en waarom heb ik het nodig?"
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">
Dit Vind Je Misschien Leuk </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/nl/reverse-string-javascript" 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/javascript-dsa/77/reverse-string-javascript.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Keer een string om in JavaScript" 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="/nl/reverse-string-javascript">Keer een string om in JavaScript </a>
</h4>
</div> <div class="group">
<a href="/nl/how-pass-parse-linux-bash-script-arguments" 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/picked/73/how-pass-parse-linux-bash-script-arguments.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Hoe u Linux Bash-scriptargumenten en -parameters kunt doorgeven en parseren" 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="/nl/how-pass-parse-linux-bash-script-arguments">Hoe u Linux Bash-scriptargumenten en -parameters kunt doorgeven en parseren </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 Artikelen </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="/nl/what-is-enter">
<img src="https://techcodeview.com/img/computer/68/what-is-enter.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Wat is Enter?" 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="/nl/what-is-enter" class="hover:text-tech-500 transition-colors line-clamp-3">Wat is Enter? </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="/nl/mysql-change-column-type">
<img src="https://techcodeview.com/img/mysql-tutorial/17/mysql-change-column-type.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="MySQL Kolomtype wijzigen" 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="/nl/mysql-change-column-type" class="hover:text-tech-500 transition-colors line-clamp-3">MySQL Kolomtype wijzigen </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="/nl/python-program-breadth-first-search">
<img src="https://techcodeview.com/img/it-problems-solutions/67/python-program-breadth-first-search.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Python-programma voor Breadth First Search of BFS voor een grafiek" 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="/nl/python-program-breadth-first-search" class="hover:text-tech-500 transition-colors line-clamp-3">Python-programma voor Breadth First Search of BFS voor een grafiek </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="/nl/webcam-blackmail-advice-24248">
<img src="https://techcodeview.com/img/get-advice/32/webcam-blackmail-advice.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Webcamchantage – Advies voor ouders" 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="/nl/webcam-blackmail-advice-24248" class="hover:text-tech-500 transition-colors line-clamp-3">Webcamchantage – Advies voor ouders </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="/nl/what-is-rational-number-1311164">
<img src="https://techcodeview.com/img/blog/00/what-is-rational-number.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Wat is een rationeel getal? Definitie en voorbeelden" 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="/nl/what-is-rational-number-1311164" class="hover:text-tech-500 transition-colors line-clamp-3">Wat is een rationeel getal? Definitie en voorbeelden </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="/nl/bfs-algorithm">
<img src="https://techcodeview.com/img/ds-tutorial/64/bfs-algorithm.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="BFS-algoritme" 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="/nl/bfs-algorithm" class="hover:text-tech-500 transition-colors line-clamp-3">BFS-algoritme </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="/nl/best-rebecca-nurse-analysis-crucible-131504">
<img src="https://techcodeview.com/img/blog/27/best-rebecca-nurse-analysis-crucible.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Beste Rebecca Nurse-analyse - The Crucible" 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="/nl/best-rebecca-nurse-analysis-crucible-131504" class="hover:text-tech-500 transition-colors line-clamp-3">Beste Rebecca Nurse-analyse - The Crucible </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="/nl/java-convert-int-long">
<img src="https://techcodeview.com/img/java-conversion/51/java-convert-int-long.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Java Converteer naar lang" 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="/nl/java-convert-int-long" class="hover:text-tech-500 transition-colors line-clamp-3">Java Converteer naar lang </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="/nl/boxplots-r-language">
<img src="https://techcodeview.com/img/picked/37/boxplots-r-language.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Boxplots in R-taal" 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="/nl/boxplots-r-language" class="hover:text-tech-500 transition-colors line-clamp-3">Boxplots in R-taal </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="/nl/factory-method-design-pattern-java">
<img src="https://techcodeview.com/img/it-problems-solutions/76/factory-method-design-pattern-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Fabrieksmethode ontwerppatroon in Java" 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="/nl/factory-method-design-pattern-java" class="hover:text-tech-500 transition-colors line-clamp-3">Fabrieksmethode ontwerppatroon in Java </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">Categorie </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/nl/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">
Bloggen
</a> <a href="/nl/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">
Java-Conversie
</a> <a href="/nl/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">
Wiskunde
</a> <a href="/nl/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">
Java-Collecties
</a> <a href="/nl/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">
Verschillen
</a> <a href="/nl/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">
Java-Reeks
</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">Interessante Artikelen </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/blog/95/advantages-disadvantages-lemon-water-with-honey.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Voor- en nadelen van citroenwater met honing" 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="/nl/blog/">Bloggen </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/advantages-disadvantages-lemon-water-with-honey">Voor- en nadelen van citroenwater met honing </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/it-problems-solutions/13/sql-group.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="SQL | GROEP DOOR" 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="/nl/it-problems-solutions/">It-Problemen En Oplossingen </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/sql-group">SQL | GROEP DOOR </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/kali-linux-tutorial/01/kali-linux-basic-commands.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kali Linux basisopdrachten" 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="/nl/kali-linux-tutorial/">Kali Linux-Zelfstudie </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/kali-linux-basic-commands">Kali Linux basisopdrachten </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/computer-network/99/star-topology-advantages.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Voor- en nadelen van stertopologie" 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="/nl/computer-network/">Computer Netwerk </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/star-topology-advantages">Voor- en nadelen van stertopologie </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/geeks-premier-league-2023/83/sql-server-row_number-function-with-partition.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="SQL Server Row_Number-functie met PARTITIE DOOR" 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="/nl/geeks-premier-league-2023-cat/">Geeks Premier League 2023 </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/sql-server-row_number-function-with-partition">SQL Server Row_Number-functie met PARTITIE DOOR </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/blog/19/how-download-youtube-video-vlc-media-player.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Hoe YouTube-video te downloaden in VLC Media Player" 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="/nl/blog/">Bloggen </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/how-download-youtube-video-vlc-media-player">Hoe YouTube-video te downloaden in VLC Media Player </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 Alle Rechten Voorbehouden |
<a href="//www.techcodeview.com/ca/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vrijwaring </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Wie Zijn Wij? </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privacybeleid </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>