Mikä EJS on ja miksi tarvitsen sitä?
Verkkokehityksessä on tarjolla monia työkaluja, joista kehittäjät voivat valita. Oikeiden työkalujen ja teknologioiden valinnalla voi olla merkittävä vaikutus projektien tehokkuuteen ja toimivuuteen. Yksi web-kehityksen suosituimmista työkaluista on EJS, joka tarkoittaa Embeddediä JavaScript . EJS on yksinkertainen JavaScript-mallikieli, joka luo HTML tavallisella JavaScriptillä. Tässä artikkelissa käsittelemme mitä EJS on, miksi sitä tarvitaan, sen ominaisuuksia, kuinka se asennetaan, ja annamme esimerkin tulosteesta.
Mikä on EJS
EJS tai Embedded JavaScript on web-kehitykseen käytettävä JavaScript-mallimoottori, jonka avulla käyttäjät voivat luoda dynaamisia HTML-merkintöjä JavaScript-koodilla HTML-malleissa. Se on suunniteltu yksinkertaistamaan dynaamisen sisällön renderöintiprosessia verkkosovelluksissa. Se sisältää sekoituksen HTML:ää ja JavaScriptiä, mikä tekee dynaamisen sisällön luomisesta helppoa sovelluksesi tietojen perusteella.
EJS:n ominaisuudet
- Yksinkertainen syntaksi: EJS tarjoaa suoraviivaisen syntaksin, joka yhdistää HTML:n ja JavaScriptin, mikä tekee siitä helpon oppimisen ja käytön.
- Dynaaminen sisältö: EJS mahdollistaa HTML- ja JavaScript-sisällön luomisen dynaamisesti HTML-tunnisteiden sisällä, mikä lisää sisällöntuotannon joustavuutta.
- Asettelu ja osat: EJS tukee asetteluja ja osia, jolloin käyttäjät voivat jakaa malleja uudelleenkäytettäviksi komponenteiksi, mikä vähentää koodin päällekkäisyyttä ja parantaa ylläpidettävyyttä.
- Virheiden käsittely: EJS tarjoaa virheilmoituksia, jotka auttavat kehittäjiä virheenkorjauksessa ja parantavat yleistä kehityskokemusta.
Miksi tarvitset EJS:ää?
- Dynaamisen HTML:n luominen: EJS:n avulla voit luoda dynaamista HTML-sisältöä muuttujien, ehtojen, silmukoiden ja muun JavaScript-logiikan perusteella. Tämä on erityisen hyödyllinen tietokannoista tai API:ista haetun dynaamisen tiedon renderöinnissa.
- Koodin uudelleenkäyttö: Käyttämällä EJS-malleja voit luoda uudelleenkäytettäviä komponentteja tai osia, jotka voidaan sisällyttää useille sivuille. Tämä edistää koodin modulaarisuutta ja vähentää päällekkäisyyksiä verkkosovelluksissasi.
- Palvelinpuolen renderöinti: EJS:n avulla voit suorittaa web-sivujen palvelinpuolen renderöinnin (SSR). SSR on hyödyllinen SEO:lle (Search Engine Optimization), koska sen avulla hakukoneet voivat indeksoida sisältösi tehokkaammin verrattuna Reactin tai Angularin kaltaisten kehysten suorittamaan asiakaspuolen renderöintiin (CSR).
- Helppo integrointi Node.js:n ja Express.js:n kanssa: EJS integroituu saumattomasti Node.js:n ja Express.js:n kanssa, joten se on suosittu valinta palvelinpuolen JavaScript-sovelluksia työskenteleville kehittäjille. Se on helppo asentaa ja käyttää Express.js-projektissa.
- Tuttu syntaksi: Jos olet jo perehtynyt HTML:ään ja JavaScriptiin, EJS:n oppiminen ja käyttö on yksinkertaista. Syntaksi on samanlainen kuin HTML, ja siihen on upotettu JavaScript-koodi
>tunnisteita, jolloin se on eritasoisten kehittäjien käytettävissä. - Mallin periytyminen ja asettelut: EJS tukee mallipohjan periytymistä ja asetteluja, joiden avulla voit luoda yhtenäisiä asetteluja verkkosivuillesi. Voit määrittää perusasettelun ja laajentaa sitä muihin malleihin, mikä helpottaa yhtenäisen ulkoasun ja tuntuman säilyttämistä sovelluksessasi.
Kuinka käyttää EJS:ää?
Vaihe 1: Asenna EJS riippuvuutena projektiisi
npm install ejs
Vaihe 2: Luo 'views'-kansio projektihakemistoosi, jos sitä ei vielä ole. Luo näkymät-kansioon uusi tiedosto, jonka tunniste on .ejs, esimerkiksi index.ejs
Vaihe 3: Integroidaksesi EJS:n Expressin kanssa Express.js-sovelluksessa, aseta EJS Express-sovelluksen kokoonpanon näkymämoottoriksi. Tämän kokoonpanon avulla Express voi käyttää EJS:ää näkymien renderöimiseen.
app.set('view engine', 'ejs'); Vaihe 4: Renderöi EJS-malli, Express-reitinkäsittelijöissäsi renderöimme EJS-mallin käyttämällä 'res.render()' ja anna tarvittavat tiedot välitettäväksi malliin.
res.render('hello', { name: 'Geeks' }); Hankkeen rakenne:
Päivitetyt riippuvuudet sisään package.json tiedosto näyttää tältä:
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' } Esimerkki: Toteutus ejs:n käytön esittelemiseksi esimerkin avulla.
HTML EJS Esimerkkiotsikko> head> <body> <h1>Hei, <%= name %>!h1> body> html>>> </tag>JavaScript <tag data-text-1='// index.js const express = require('express'); const app = express(); const port = 3000; app.set('view engine', 'ejs'); app.get('/', (req, res) =>{ res.render('hei', { nimi: 'Geeks' }); }); app.listen(port, () => { console.log(`Palvelin toimii osoitteessa http://localhost:${port}`); });>> </tag> <p dir='ltr'> <b> <strong>Sovelluksen suorittamisen vaihe: </strong> </b> <span>Suorita sovellus seuraavalla komennolla projektin juurihakemistosta </span> </p> <tag data-text-3='node index.js </pre> </code> <p dir='ltr'> <b> <strong>Lähtö: </strong> </b> <span>Projektisi näkyy URL-osoitteessa 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='ulostulo'> </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>
Jakaa </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Mikä EJS on ja miksi tarvitsen sitä?&url=https://www.techcodeview.com/fi/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/fi/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/fi/what-is-ejs-why-do-i-need-it&title=Mikä EJS on ja miksi tarvitsen sitä?"
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">
Saatat Pitää </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/fi/radio-receiver" 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/analog-communication/24/radio-receiver.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Radiovastaanotin" 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="/fi/radio-receiver">Radiovastaanotin </a>
</h4>
</div> <div class="group">
<a href="/fi/what-is-truncation-java" 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/java-tutorial/25/what-is-truncation-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Mikä on katkaisu Javassa?" 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="/fi/what-is-truncation-java">Mikä on katkaisu Javassa? </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 Artikkelit </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="/fi/how-find-file-linux-find-command">
<img src="https://techcodeview.com/img/linux-command/71/how-find-file-linux-find-command.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kuinka löytää tiedosto Linuxissa | Etsi komento" 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="/fi/how-find-file-linux-find-command" class="hover:text-tech-500 transition-colors line-clamp-3">Kuinka löytää tiedosto Linuxissa | Etsi komento </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="/fi/how-go-browser-settings">
<img src="https://techcodeview.com/img/computer/33/how-go-browser-settings.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kuinka siirtyä selaimen asetuksiin?" 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="/fi/how-go-browser-settings" class="hover:text-tech-500 transition-colors line-clamp-3">Kuinka siirtyä selaimen asetuksiin? </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="/fi/difference-between-row">
<img src="https://techcodeview.com/img/differences/29/difference-between-row.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ero rivin ja sarakkeen välillä" 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="/fi/difference-between-row" class="hover:text-tech-500 transition-colors line-clamp-3">Ero rivin ja sarakkeen välillä </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="/fi/machine-learning-models">
<img src="https://techcodeview.com/img/machine-learning/63/machine-learning-models.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Koneoppimismallit" 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="/fi/machine-learning-models" class="hover:text-tech-500 transition-colors line-clamp-3">Koneoppimismallit </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="/fi/python-data-structures">
<img src="https://techcodeview.com/img/it-problems-solutions/60/python-data-structures.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Python-tietorakenteet" 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="/fi/python-data-structures" class="hover:text-tech-500 transition-colors line-clamp-3">Python-tietorakenteet </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="/fi/how-access-icloud-photos-android">
<img src="https://techcodeview.com/img/android-tutorial/70/how-access-icloud-photos-android.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kuinka käyttää iCloud-kuvia Androidissa" 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="/fi/how-access-icloud-photos-android" class="hover:text-tech-500 transition-colors line-clamp-3">Kuinka käyttää iCloud-kuvia Androidissa </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="/fi/driving-ireland-s-ring-kerry-1311306">
<img src="https://techcodeview.com/img/blog/38/driving-ireland-s-ring-kerry.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ajaminen Irlannin Ring of Kerryllä: Kartat ja täydellinen opas" 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="/fi/driving-ireland-s-ring-kerry-1311306" class="hover:text-tech-500 transition-colors line-clamp-3">Ajaminen Irlannin Ring of Kerryllä: Kartat ja täydellinen opas </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="/fi/quick-access-toolbar">
<img src="https://techcodeview.com/img/ms-word-tutorial/88/quick-access-toolbar.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Pikakäyttötyökalupalkki" 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="/fi/quick-access-toolbar" class="hover:text-tech-500 transition-colors line-clamp-3">Pikakäyttötyökalupalkki </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="/fi/shift-operators-c">
<img src="https://techcodeview.com/img/c-tutorial/99/shift-operators-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Vuorooperaattorit 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="/fi/shift-operators-c" class="hover:text-tech-500 transition-colors line-clamp-3">Vuorooperaattorit 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="/fi/can-we-run-siri-android">
<img src="https://techcodeview.com/img/android-tutorial/36/can-we-run-siri-android.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Voimmeko käyttää Siriä Androidille?" 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="/fi/can-we-run-siri-android" class="hover:text-tech-500 transition-colors line-clamp-3">Voimmeko käyttää Siriä Androidille? </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">Luokka </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/fi/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">
Blogi
</a> <a href="/fi/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-Muunnos
</a> <a href="/fi/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">
Matematiikka
</a> <a href="/fi/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-Kokoelmat
</a> <a href="/fi/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">
Erot
</a> <a href="/fi/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-Merkkijono
</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">Mielenkiintoisia Artikkeleita </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/dsa-tutorials/60/what-is-memoization-complete-tutorial.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Mitä memoisointi on? Täydellinen opetusohjelma" 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="/fi/dsa-tutorials/">Dsa Opetusohjelmat </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/fi/what-is-memoization-complete-tutorial">Mitä memoisointi on? Täydellinen opetusohjelma </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/59/advantages-disadvantages-coal.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kivihiilen edut ja haitat" 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="/fi/blog/">Blogi </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/fi/advantages-disadvantages-coal">Kivihiilen edut ja haitat </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/java-string/08/java-string.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Java-merkkijono" 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="/fi/java-string/">Java-Merkkijono </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/fi/java-string">Java-merkkijono </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/svn-tutorial/05/svn-checkout.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="SVN Checkout" 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="/fi/svn-tutorial/">Svn Opetusohjelma </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/fi/svn-checkout">SVN Checkout </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-array/94/python-arrays.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Python-taulukot" 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="/fi/python-array/">Python-Taulukko </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/fi/python-arrays">Python-taulukot </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/java-misc/01/concurrentmodificationexception-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="ConcurrentModificationException Javassa" 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="/fi/java-misc/">Java Muut </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/fi/concurrentmodificationexception-java">ConcurrentModificationException Javassa </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 Kaikki Oikeudet Pidätetään |
<a href="//www.techcodeview.com/uk/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vastuuvapauslauseke </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Meistä </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Tietosuojakäytäntö </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>