Hva er EJS og hvorfor trenger jeg det?
Innen webutvikling er det mange verktøy tilgjengelig for utviklere å velge mellom. Å velge de riktige verktøyene og teknologiene kan ha en betydelig innvirkning på effektiviteten og funksjonaliteten til prosjekter. Et av de populære verktøyene innen webutvikling er EJS, som står for Embedded JavaScript . EJS er et enkelt JavaScript-malspråk som genererer HTML med vanlig JavaScript. I denne artikkelen vil vi dekke hva EJS er, hvorfor det er nødvendig, dets funksjoner, hvordan du installerer det, og gi et eksempel med utdata.
Hva er EJS
EJS eller Embedded JavaScript er en malmotor for JavaScript som brukes til webutvikling som lar brukere generere dynamisk HTML-oppmerking ved hjelp av JavaScript-kode i HTML-maler. Den er designet for å forenkle prosessen med å gjengi dynamisk innhold i nettapplikasjoner. Den inneholder en blanding av HTML og JavaScript som gjør det enkelt å generere dynamisk innhold basert på data fra applikasjonen din.
Egenskaper til EJS
- Enkel syntaks: EJS tilbyr en enkel syntaks som kombinerer HTML og JavaScript, noe som gjør det enkelt å lære og bruke.
- Dynamisk innhold: EJS muliggjør generering av HTML- og JavaScript-innhold dynamisk innenfor HTML-tagger, noe som øker fleksibiliteten i innholdsskaping.
- Layout og deler: EJS støtter oppsett og deler, slik at brukere kan dele opp maler i gjenbrukbare komponenter, redusere kodeduplisering og forbedre vedlikeholdsevnen.
- Feilhåndtering: EJS gir feilmeldinger som hjelper utviklere med feilsøking, og forbedrer den generelle utviklingsopplevelsen.
Hvorfor trenger du EJS?
- Dynamisk HTML-generering: EJS lar deg generere dynamisk HTML-innhold basert på variabler, betingelser, løkker og annen JavaScript-logikk. Dette er spesielt nyttig for å gjengi dynamiske data hentet fra databaser eller APIer.
- Gjenbrukbarhet av kode: Ved å bruke EJS-maler kan du lage gjenbrukbare komponenter eller deler som kan inkluderes på flere sider. Dette fremmer kodemodularitet og reduserer duplisering i webapplikasjonene dine.
- Gjengivelse på tjenersiden: Med EJS kan du utføre server-side rendering (SSR) av nettsider. SSR er gunstig for SEO (Search Engine Optimization) ettersom det lar søkemotorer gjennomsøke og indeksere innholdet ditt mer effektivt sammenlignet med klientsidegjengivelse (CSR) utført av rammeverk som React eller Angular.
- Enkel integrasjon med Node.js og Express.js: EJS integreres sømløst med Node.js og Express.js, noe som gjør det til et populært valg for utviklere som jobber med JavaScript-applikasjoner på serversiden. Det er enkelt å sette opp og bruke i et Express.js-prosjekt.
- Kjent syntaks: Hvis du allerede er kjent med HTML og JavaScript, er det enkelt å lære og bruke EJS. Syntaksen ligner HTML med innebygd JavaScript-kode omsluttet av
>koder, noe som gjør det tilgjengelig for utviklere med varierende ferdighetsnivåer. - Malarv og oppsett: EJS støtter malarv og oppsett, slik at du kan lage konsistente oppsett for nettsidene dine. Du kan definere et basisoppsett og utvide det i andre maler, noe som gjør det enklere å opprettholde et konsistent utseende og følelse på tvers av applikasjonen.
Hvordan bruke EJS?
Trinn 1: Installer EJS som en avhengighet i prosjektet ditt
npm install ejs
Steg 2: Opprett en 'visnings'-mappe i prosjektkatalogen din hvis den ikke allerede eksisterer. Inne i visningsmappen oppretter du en ny fil med filtypen .ejs, for eksempel index.ejs
Trinn 3: For å integrere EJS med Express i en Express.js-applikasjon, sett EJS som visningsmotor i Express-appkonfigurasjonen. Denne konfigurasjonen lar Express bruke EJS for å gjengi visninger.
app.set('view engine', 'ejs'); Trinn 4: Gjengi EJS-mal, I dine Express-rutebehandlere gjengir vi EJS-malen ved hjelp av 'res.render()' og gi nødvendige data som skal sendes til malen.
res.render('hello', { name: 'Geeks' }); Prosjektstruktur:
De oppdaterte avhengighetene i package.json filen vil se slik ut:
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' } Eksempel: Implementering for å vise frem bruken av ejs med et eksempel.
HTML EJS Eksempeltittel> hode> <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('hei', { navn: 'Geeks' }); }); app.listen(port, () => { console.log(`Server kjører på http://localhost:${port}`); }); </pre> </code> <p dir='ltr'> <b> <strong>Trinn for å kjøre applikasjon: </strong> </b> <span>Kjør programmet ved å bruke følgende kommando fra rotkatalogen til prosjektet </span> </p> <pre>node index.js </pre> <p dir='ltr'> <b> <strong>Produksjon: </strong> </b> <span>Prosjektet ditt vil bli vist i URLen 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='produksjon'> </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>
Dele </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Hva er EJS og hvorfor trenger jeg det?&url=https://www.techcodeview.com/no/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/no/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/no/what-is-ejs-why-do-i-need-it&title=Hva er EJS og hvorfor trenger jeg 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 Liker Kanskje </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/no/letter-recommendation-sample-131828" 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/blog/20/letter-recommendation-sample.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Eksempel på anbefaling: Nær kollega" 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="/no/letter-recommendation-sample-131828">Eksempel på anbefaling: Nær kollega </a>
</h4>
</div> <div class="group">
<a href="/no/complete-list-ncaa-division-1-colleges-131614" 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/blog/72/complete-list-ncaa-division-1-colleges.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Den komplette listen over NCAA Division 1 Colleges (siste)" 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="/no/complete-list-ncaa-division-1-colleges-131614">Den komplette listen over NCAA Division 1 Colleges (siste) </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>
Topp Artikler </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="/no/2-easy-tips-remember-reoccurring-vs-recurring-131248">
<img src="https://techcodeview.com/img/blog/85/2-easy-tips-remember-reoccurring-vs-recurring.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="2 enkle tips for å huske gjentakende vs gjentakende" 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="/no/2-easy-tips-remember-reoccurring-vs-recurring-131248" class="hover:text-tech-500 transition-colors line-clamp-3">2 enkle tips for å huske gjentakende vs gjentakende </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="/no/how-wrap-text-around-an-image-using-html">
<img src="https://techcodeview.com/img/css-misc/48/how-wrap-text-around-an-image-using-html.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Hvordan vikle teksten rundt et bilde ved hjelp av HTML og CSS?" 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="/no/how-wrap-text-around-an-image-using-html" class="hover:text-tech-500 transition-colors line-clamp-3">Hvordan vikle teksten rundt et bilde ved hjelp av HTML og CSS? </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="/no/calculator-program-c">
<img src="https://techcodeview.com/img/c-tutorial/61/calculator-program-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kalkulatorprogram i C" 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="/no/calculator-program-c" class="hover:text-tech-500 transition-colors line-clamp-3">Kalkulatorprogram i C </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="/no/difference-between-lcd">
<img src="https://techcodeview.com/img/differences/19/difference-between-lcd.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Forskjellen mellom LCD og LED" 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="/no/difference-between-lcd" class="hover:text-tech-500 transition-colors line-clamp-3">Forskjellen mellom LCD og LED </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="/no/hasse-diagrams">
<img src="https://techcodeview.com/img/discrete-mathematics/42/hasse-diagrams.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Hasse Diagrammer" 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="/no/hasse-diagrams" class="hover:text-tech-500 transition-colors line-clamp-3">Hasse Diagrammer </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="/no/sql-date-time-functions">
<img src="https://techcodeview.com/img/it-problems-solutions/57/sql-date-time-functions.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="SQL dato og klokkeslett funksjoner" 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="/no/sql-date-time-functions" class="hover:text-tech-500 transition-colors line-clamp-3">SQL dato og klokkeslett funksjoner </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="/no/what-is-alphanumeric">
<img src="https://techcodeview.com/img/computer/31/what-is-alphanumeric.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Hva er alfanumerisk?" 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="/no/what-is-alphanumeric" class="hover:text-tech-500 transition-colors line-clamp-3">Hva er alfanumerisk? </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="/no/linux-telnet-command">
<img src="https://techcodeview.com/img/linux-tutorial/26/linux-telnet-command.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Linux telnet-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="/no/linux-telnet-command" class="hover:text-tech-500 transition-colors line-clamp-3">Linux telnet-kommando </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="/no/program-decimal-binary-conversion">
<img src="https://techcodeview.com/img/base-conversion/52/program-decimal-binary-conversion.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Program for desimal til binær konvertering" 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="/no/program-decimal-binary-conversion" class="hover:text-tech-500 transition-colors line-clamp-3">Program for desimal til binær konvertering </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="/no/what-do-sat-scores-measure-1311454">
<img src="https://techcodeview.com/img/blog/44/what-do-sat-scores-measure.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Hva måler SAT-poeng? IQ? Inntekt?" 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="/no/what-do-sat-scores-measure-1311454" class="hover:text-tech-500 transition-colors line-clamp-3">Hva måler SAT-poeng? IQ? Inntekt? </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="/no/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="/no/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="/no/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="/no/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-Samlinger
</a> <a href="/no/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">
Forskjeller
</a> <a href="/no/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-Streng
</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 Artikler </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/picked/73/how-check-python-version.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Slik sjekker du Python-versjon: Windows, Linux og Mac" 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="/no/picked/">Plukket </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/no/how-check-python-version">Slik sjekker du Python-versjon: Windows, Linux og Mac </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/backtracking/75/longest-possible-route-in-a-matrix-with-hurdles.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Lengst mulig rute i en matrise med hindringer" 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="/no/backtracking/">Tilbakesporing </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/no/longest-possible-route-in-a-matrix-with-hurdles">Lengst mulig rute i en matrise med hindringer </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/css-questions/45/how-vertically-center-text-with-css.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Hvordan sentrere tekst vertikalt med CSS?" 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="/no/css-questions/">Css-Spørsmål </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/no/how-vertically-center-text-with-css">Hvordan sentrere tekst vertikalt med CSS? </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/linux-command/32/how-find-your-ip-address-linux-ifconfig-command.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Hvordan finne IP-adressen din i Linux | ifconfig kommando" 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="/no/linux-command/">Linux-Kommando </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/no/how-find-your-ip-address-linux-ifconfig-command">Hvordan finne IP-adressen din i Linux | ifconfig kommando </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/72/jdk-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="JDK i Java" 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="/no/it-problems-solutions/">It-Problemer Og Løsninger </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/no/jdk-java">JDK i Java </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/python-matplotlib/40/matplotlib-pyplot-scatter-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="matplotlib.pyplot.scatter() i 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="/no/python-matplotlib/">Python-Matplotlib </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/no/matplotlib-pyplot-scatter-python">matplotlib.pyplot.scatter() i Python </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 Rettigheter Reservert |
<a href="//www.techcodeview.com/ca/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfraskrivelse </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Personvernerklæring </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>