Vad är EJS och varför behöver jag det?
Inom webbutveckling finns det många verktyg tillgängliga för utvecklare att välja mellan. Att välja rätt verktyg och teknik kan ha en betydande inverkan på projektens effektivitet och funktionalitet. Ett av de populära verktygen inom webbutveckling är EJS, som står för Embedded JavaScript . EJS är ett enkelt JavaScript-mallspråk som genererar HTML med vanlig JavaScript. I den här artikeln kommer vi att täcka vad EJS är, varför det behövs, dess funktioner, hur man installerar det och ge ett exempel med utdata.
Vad är EJS
EJS eller Embedded JavaScript är en mallmotor för JavaScript som används för webbutveckling som tillåter användare att generera dynamisk HTML-uppmärkning med hjälp av JavaScript-kod i HTML-mallar. Den är utformad för att förenkla processen att rendera dynamiskt innehåll i webbapplikationer. Den innehåller en blandning av HTML och JavaScript som gör det enkelt att generera dynamiskt innehåll baserat på data från din applikation.
Funktioner hos EJS
- Enkel syntax: EJS erbjuder en enkel syntax som kombinerar HTML och JavaScript, vilket gör det enkelt att lära sig och använda.
- Dynamiskt innehåll: EJS möjliggör generering av HTML- och JavaScript-innehåll dynamiskt inom HTML-taggar, vilket ökar flexibiliteten vid skapande av innehåll.
- Layout och delar: EJS stöder layouter och delar, vilket gör att användare kan dela upp mallar i återanvändbara komponenter, vilket minskar kodduplicering och förbättrar underhållsbarheten.
- Felhantering: EJS tillhandahåller felmeddelanden som hjälper utvecklare att felsöka, vilket förbättrar den övergripande utvecklingsupplevelsen.
Varför behöver du EJS?
- Dynamisk HTML-generering: EJS låter dig generera dynamiskt HTML-innehåll baserat på variabler, villkor, loopar och annan JavaScript-logik. Detta är särskilt användbart för att rendera dynamisk data som hämtas från databaser eller API:er.
- Kodåteranvändbarhet: Genom att använda EJS-mallar kan du skapa återanvändbara komponenter eller delar som kan inkluderas på flera sidor. Detta främjar kodmodularitet och minskar dubbelarbete i dina webbapplikationer.
- Rendering på serversidan: Med EJS kan du utföra server-side rendering (SSR) av webbsidor. SSR är fördelaktigt för SEO (Search Engine Optimization) eftersom det tillåter sökmotorer att genomsöka och indexera ditt innehåll mer effektivt jämfört med rendering på klientsidan (CSR) som görs av ramverk som React eller Angular.
- Enkel integration med Node.js och Express.js: EJS integreras sömlöst med Node.js och Express.js, vilket gör det till ett populärt val för utvecklare som arbetar med JavaScript-applikationer på serversidan. Det är lätt att ställa in och använda i ett Express.js-projekt.
- Bekant syntax: Om du redan är bekant med HTML och JavaScript är det enkelt att lära sig och använda EJS. Syntaxen liknar HTML med inbäddad JavaScript-kod innesluten i
>taggar, vilket gör det tillgängligt för utvecklare med olika kompetensnivåer. - Mallarv och layouter: EJS stöder mallarv och layouter, så att du kan skapa konsekventa layouter för dina webbsidor. Du kan definiera en baslayout och utöka den i andra mallar, vilket gör det lättare att upprätthålla ett konsekvent utseende och känsla i hela din applikation.
Hur använder man EJS?
Steg 1: Installera EJS som ett beroende i ditt projekt
npm install ejs
Steg 2: Skapa en 'vyer'-mapp i din projektkatalog om den inte redan finns. Skapa en ny fil med filtillägget .ejs i mappen vyer, till exempel index.ejs
Steg 3: För att integrera EJS med Express i en Express.js-applikation, ställ in EJS som visningsmotor i din Express-appkonfiguration. Denna konfiguration tillåter Express att använda EJS för att rendera vyer.
app.set('view engine', 'ejs'); Steg 4: Rendera EJS-mall, i dina Express-rutthanterare renderar vi EJS-mallen med hjälp av 'res.render()' och tillhandahålla nödvändiga data som ska skickas till mallen.
res.render('hello', { name: 'Geeks' }); Projektets struktur:
De uppdaterade beroendena i package.json filen kommer att se ut så här:
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' } Exempel: Implementering för att visa upp användningen av ejs med ett exempel.
HTML EJS Exempeltitel> huvud> <body> <h1>Hallå, <%= 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('hej', { namn: 'Geeks' }); }); app.listen(port, () => { console.log(`Server körs på http://localhost:${port}`); }); </pre> </code> <p dir='ltr'> <b> <strong>Steg för att köra applikation: </strong> </b> <span>Kör programmet med följande kommando från projektets rotkatalog </span> </p> <pre>node index.js </pre> <p dir='ltr'> <b> <strong>Produktion: </strong> </b> <span>Ditt projekt kommer att visas i URL:en 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='produktion'> </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>
Dela </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Vad är EJS och varför behöver jag det?&url=https://www.techcodeview.com/sv/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/sv/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/sv/what-is-ejs-why-do-i-need-it&title=Vad är EJS och varför behöver jag det?"
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">
Du Kanske Gillar </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/sv/how-access-android-settings-menu" 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/android-tutorial/69/how-access-android-settings-menu.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Hur man får åtkomst till Android-inställningsmenyn" 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="/sv/how-access-android-settings-menu">Hur man får åtkomst till Android-inställningsmenyn </a>
</h4>
</div> <div class="group">
<a href="/sv/features-tabs-excel" 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/ms-excel-tutorial/83/features-tabs-excel.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Funktioner för flikar i Excel" 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="/sv/features-tabs-excel">Funktioner för flikar i Excel </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 Artiklar </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="/sv/pell-number">
<img src="https://techcodeview.com/img/dsa/35/pell-number.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Pell nummer" 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="/sv/pell-number" class="hover:text-tech-500 transition-colors line-clamp-3">Pell nummer </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="/sv/dont-take-teva-3109-before-reading-this-131928">
<img src="https://techcodeview.com/img/blog/24/dont-take-teva-3109-before-reading-this.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ta inte TEVA 3109 innan du läser detta" 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="/sv/dont-take-teva-3109-before-reading-this-131928" class="hover:text-tech-500 transition-colors line-clamp-3">Ta inte TEVA 3109 innan du läser detta </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="/sv/python-arrays">
<img src="https://techcodeview.com/img/python-array/94/python-arrays.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Python Arrays" 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="/sv/python-arrays" class="hover:text-tech-500 transition-colors line-clamp-3">Python Arrays </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="/sv/what-is-full-form-jbl">
<img src="https://techcodeview.com/img/category/05/what-is-full-form-jbl.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Vad är den fullständiga formen av JBL" 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="/sv/what-is-full-form-jbl" class="hover:text-tech-500 transition-colors line-clamp-3">Vad är den fullständiga formen av JBL </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="/sv/javascript-form">
<img src="https://techcodeview.com/img/javascript-tutorial/97/javascript-form.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="JavaScript-formulär" 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="/sv/javascript-form" class="hover:text-tech-500 transition-colors line-clamp-3">JavaScript-formulär </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="/sv/data-types-java">
<img src="https://techcodeview.com/img/java-tutorial/18/data-types-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Datatyper i 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="/sv/data-types-java" class="hover:text-tech-500 transition-colors line-clamp-3">Datatyper i Java </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="/sv/whats-sat-out-131764">
<img src="https://techcodeview.com/img/blog/28/whats-sat-out.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Vad är det för SAT?" 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="/sv/whats-sat-out-131764" class="hover:text-tech-500 transition-colors line-clamp-3">Vad är det för SAT? </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="/sv/area-rhombus-formula">
<img src="https://techcodeview.com/img/maths-formulas/93/area-rhombus-formula.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Område av Rhombus: formel, härledning och exempel" 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="/sv/area-rhombus-formula" class="hover:text-tech-500 transition-colors line-clamp-3">Område av Rhombus: formel, härledning och exempel </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="/sv/discrete-mathematics-tutorial">
<img src="https://techcodeview.com/img/discrete-mathematics/73/discrete-mathematics-tutorial.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Handledning för diskret matematik" 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="/sv/discrete-mathematics-tutorial" class="hover:text-tech-500 transition-colors line-clamp-3">Handledning för diskret matematik </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="/sv/linux-unix-chroot-command">
<img src="https://techcodeview.com/img/linux-tutorial/84/linux-unix-chroot-command.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Linux/Unix: chroot-kommando" 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="/sv/linux-unix-chroot-command" class="hover:text-tech-500 transition-colors line-clamp-3">Linux/Unix: chroot-kommando </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">Kategori </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/sv/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">
Blogg
</a> <a href="/sv/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-Konvertering
</a> <a href="/sv/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">
Matte
</a> <a href="/sv/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-Samlingar
</a> <a href="/sv/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">
Skillnader
</a> <a href="/sv/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-Sträng
</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">Intressanta Artiklar </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/ds-tutorial/14/circular-queue.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cirkulär kö" 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="/sv/ds-tutorial/">Handledning För Ds </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sv/circular-queue">Cirkulär kö </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/97/sat-analogies-comparisons.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="SAT-analogier och jämförelser: varför togs de bort och vad ersatte dem?" 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="/sv/blog/">Blogg </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sv/sat-analogies-comparisons-1311132">SAT-analogier och jämförelser: varför togs de bort och vad ersatte dem? </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/08/advanced-master-theorem.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Avancerat masterteorem för upprepning av dividera och erövra" 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="/sv/it-problems-solutions/">It-Problem Och Lösningar </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sv/advanced-master-theorem">Avancerat masterteorem för upprepning av dividera och erövra </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/dbms-sql/07/sql-server-substring-function.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="SQL Server SUBSTRING()-funktion" 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="/sv/dbms-sql/">Dbms-Sql </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sv/sql-server-substring-function">SQL Server SUBSTRING()-funktion </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/dsa/68/peterson-s-algorithm-for-mutual-exclusion-set-2-cpu-cycles-and-memory-fence.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Petersons algoritm för ömsesidig uteslutning | Set 2 (CPU -cykler och minnesstaket)" 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="/sv/dsa/">DSA </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sv/peterson-s-algorithm-for-mutual-exclusion-set-2-cpu-cycles-and-memory-fence">Petersons algoritm för ömsesidig uteslutning | Set 2 (CPU -cykler och minnesstaket) </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/14/is-every-rectangle-rhombus.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Är varje rektangel en romb?" 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="/sv/picked/">Plockad </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sv/is-every-rectangle-rhombus">Är varje rektangel en romb? </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 Alla Rättigheter Förbehållna |
<a href="//www.techcodeview.com/it/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfriskrivning </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Sekretesspolicy </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>