Què és EJS i per què el necessito?
En desenvolupament web, hi ha moltes eines disponibles per als desenvolupadors per triar. L'elecció de les eines i tecnologies adequades pot tenir un impacte significatiu en l'eficiència i la funcionalitat dels projectes. Una de les eines més populars en el desenvolupament web és EJS, que significa Embedded JavaScript . EJS és un llenguatge de plantilles JavaScript senzill que genera HTML amb JavaScript senzill. En aquest article, tractarem què és EJS, per què es necessita, les seves característiques, com instal·lar-lo i proporcionarem un exemple amb la sortida.
Què és EJS
EJS o Embedded JavaScript és un motor de plantilles per a JavaScript que s'utilitza per al desenvolupament web que permet als usuaris generar marques HTML dinàmiques mitjançant codi JavaScript dins de plantilles HTML. Està dissenyat per simplificar el procés de representació de contingut dinàmic en aplicacions web. Conté una barreja d'HTML i JavaScript que facilita la generació de contingut dinàmic basat en les dades de la vostra aplicació.
Característiques d'EJS
- Sintaxi simple: EJS ofereix una sintaxi senzilla que combina HTML i JavaScript, de manera que és fàcil d'aprendre i utilitzar.
- Contingut dinàmic: EJS permet la generació de contingut HTML i JavaScript de manera dinàmica dins de les etiquetes HTML, millorant la flexibilitat en la creació de contingut.
- Disseny i parcials: EJS admet dissenys i parcials, cosa que permet als usuaris dividir les plantilles en components reutilitzables, reduint la duplicació de codi i millorant el manteniment.
- Gestió d'errors: EJS proporciona missatges d'error que ajuden els desenvolupadors a depurar, millorant l'experiència general de desenvolupament.
Per què necessiteu EJS?
- Generació HTML dinàmica: EJS us permet generar contingut HTML dinàmic basat en variables, condicions, bucles i altres lògiques de JavaScript. Això és especialment útil per representar dades dinàmiques obtingudes de bases de dades o API.
- Reutilitzabilitat del codi: Mitjançant l'ús de plantilles EJS, podeu crear components o parcials reutilitzables que es poden incloure en diverses pàgines. Això promou la modularitat del codi i redueix la duplicació a les vostres aplicacions web.
- Representació del costat del servidor: Amb EJS, podeu realitzar la representació del costat del servidor (SSR) de pàgines web. SSR és beneficiós per a SEO (Search Engine Optimization), ja que permet als motors de cerca rastrejar i indexar el vostre contingut de manera més eficaç en comparació amb la representació del costat del client (CSR) feta per marcs com React o Angular.
- Fàcil integració amb Node.js i Express.js: EJS s'integra perfectament amb Node.js i Express.js, cosa que la converteix en una opció popular per als desenvolupadors que treballen en aplicacions JavaScript del servidor. És fàcil de configurar i utilitzar dins d'un projecte Express.js.
- Sintaxi familiar: Si ja esteu familiaritzat amb HTML i JavaScript, aprendre i utilitzar EJS és senzill. La sintaxi és similar a l'HTML amb codi JavaScript incrustat inclòs
>etiquetes, fent-lo accessible per a desenvolupadors de diferents nivells d'habilitat. - Herència de plantilles i dissenys: EJS admet l'herència i els dissenys de plantilles, cosa que us permet crear dissenys coherents per a les vostres pàgines web. Podeu definir un disseny base i ampliar-lo en altres plantilles, de manera que sigui més fàcil mantenir una aparença coherent a tota la vostra aplicació.
Com utilitzar EJS?
Pas 1: Instal·leu EJS com a dependència al vostre projecte
npm install ejs
Pas 2: Creeu una carpeta 'vistes' al directori del vostre projecte si encara no existeix. Dins de la carpeta de visualitzacions, creeu un fitxer nou amb una extensió .ejs, per exemple, index.ejs
Pas 3: Per integrar EJS amb Express en una aplicació Express.js, configureu EJS com a motor de visualització a la configuració de l'aplicació Express. Aquesta configuració permet que Express utilitzi EJS per representar vistes.
app.set('view engine', 'ejs'); Pas 4: Renderitza la plantilla EJS, als teus gestors de ruta Express fem servir la plantilla EJS 'res.render()' i proporcioneu les dades necessàries per passar a la plantilla.
res.render('hello', { name: 'Geeks' }); Estructura del projecte:
Les dependències actualitzades a package.json el fitxer tindrà aquest aspecte:
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' } Exemple: Implementació per mostrar l'ús d'ejs amb un exemple.
HTML EJS Exempletítol> cap> <body> <h1>Hola, <%= name %>!h1> cos> 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('hola', { nom: 'Geeks' }); }); app.listen(port, () => { console.log(`El servidor s'està executant a http://localhost:${port}`); });>>> </tag> <p dir='ltr'> <b> <strong>Pas per executar l'aplicació: </strong> </b> <span>Executeu l'aplicació amb l'ordre següent des del directori arrel del projecte </span> </p> <tag data-text-3='node index.js </pre> </code> <p dir='ltr'> <b> <strong>Sortida: </strong> </b> <span>El vostre projecte es mostrarà a l'URL http://localhost:3000/ </span> </p> <p dir='ltr'> <img src='//techcodeview.com/img/ejs-templating-language/39/what-is-ejs-why-do-i-need-it-2.webp' alt='sortida'> </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>
Comparteix </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Què és EJS i per què el necessito?&url=https://www.techcodeview.com/ca/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/ca/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/ca/what-is-ejs-why-do-i-need-it&title=Què és EJS i per què el necessito?"
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">
Potser T'Agradarà </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/ca/computer-graphics-programs" 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/computer-graphics/65/computer-graphics-programs.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Programes d'Informàtica Gràfica" 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="/ca/computer-graphics-programs">Programes d'Informàtica Gràfica </a>
</h4>
</div> <div class="group">
<a href="/ca/sat-1-vs-sat-2-whats-difference-131852" 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/92/sat-1-vs-sat-2-whats-difference.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="SAT 1 vs SAT 2: quina diferència hi ha?" 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="/ca/sat-1-vs-sat-2-whats-difference-131852">SAT 1 vs SAT 2: quina diferència hi ha? </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>
Articles Més Populars </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="/ca/how-long-is-act-act-expert-guide-131234">
<img src="https://techcodeview.com/img/blog/33/how-long-is-act-act-expert-guide.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Quant dura l'ACT? | Guia d'experts ACT" 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="/ca/how-long-is-act-act-expert-guide-131234" class="hover:text-tech-500 transition-colors line-clamp-3">Quant dura l'ACT? | Guia d'experts ACT </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="/ca/mysql-today">
<img src="https://techcodeview.com/img/mysql-tutorial/10/mysql-today.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="MySQL avui" 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="/ca/mysql-today" class="hover:text-tech-500 transition-colors line-clamp-3">MySQL avui </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="/ca/smallest-number-with-given-digit-count-and-sum">
<img src="https://techcodeview.com/img/greedy/73/smallest-number-with-given-digit-count-and-sum.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Nombre més petit amb un recompte i suma de dígits" 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="/ca/smallest-number-with-given-digit-count-and-sum" class="hover:text-tech-500 transition-colors line-clamp-3">Nombre més petit amb un recompte i suma de dígits </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="/ca/how-root-android-device">
<img src="https://techcodeview.com/img/android-tutorial/70/how-root-android-device.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Com arrelar el dispositiu Android?" 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="/ca/how-root-android-device" class="hover:text-tech-500 transition-colors line-clamp-3">Com arrelar el dispositiu Android? </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="/ca/mean-median-mode">
<img src="https://techcodeview.com/img/math-statistics/07/mean-median-mode.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Mitjana, Mediana i Mode" 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="/ca/mean-median-mode" class="hover:text-tech-500 transition-colors line-clamp-3">Mitjana, Mediana i Mode </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="/ca/serialization-deserialization-java-with-example">
<img src="https://techcodeview.com/img/it-problems-solutions/24/serialization-deserialization-java-with-example.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Serialització i deserialització a Java amb exemple" 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="/ca/serialization-deserialization-java-with-example" class="hover:text-tech-500 transition-colors line-clamp-3">Serialització i deserialització a Java amb exemple </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="/ca/singleton-method-design-pattern-java">
<img src="https://techcodeview.com/img/it-problems-solutions/63/singleton-method-design-pattern-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Patró de disseny del mètode Singleton a 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="/ca/singleton-method-design-pattern-java" class="hover:text-tech-500 transition-colors line-clamp-3">Patró de disseny del mètode Singleton a 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="/ca/how-read-manual-pages-linux-man-command">
<img src="https://techcodeview.com/img/linux-command/35/how-read-manual-pages-linux-man-command.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Com llegir pàgines manuals a Linux | Man Comandament" 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="/ca/how-read-manual-pages-linux-man-command" class="hover:text-tech-500 transition-colors line-clamp-3">Com llegir pàgines manuals a Linux | Man Comandament </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="/ca/difference-between-compiled">
<img src="https://techcodeview.com/img/it-problems-solutions/13/difference-between-compiled.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Diferència entre llenguatge compilat i interpretat" 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="/ca/difference-between-compiled" class="hover:text-tech-500 transition-colors line-clamp-3">Diferència entre llenguatge compilat i interpretat </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="/ca/what-are-ncaa-divisions-131390">
<img src="https://techcodeview.com/img/blog/92/what-are-ncaa-divisions.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Què són les divisions de la NCAA? Divisió 1 vs 2 vs 3" 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="/ca/what-are-ncaa-divisions-131390" class="hover:text-tech-500 transition-colors line-clamp-3">Què són les divisions de la NCAA? Divisió 1 vs 2 vs 3 </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">Categoria </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/ca/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">
Bloc
</a> <a href="/ca/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">
Conversió De Java
</a> <a href="/ca/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">
Matemàtiques
</a> <a href="/ca/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">
Col·leccions Java
</a> <a href="/ca/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">
Diferències
</a> <a href="/ca/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">
Cadena De Java
</a>
</div>
<!-- Interesting Articles Widget -->
<div class="mt-8">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Articles D'Interès </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/differences/19/difference-between-lcd.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Diferència entre LCD i LED" 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="/ca/differences/">Diferències </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/difference-between-lcd">Diferència entre LCD i LED </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/55/what-is-ap-research-should-you-take-it.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Què és AP Research? L'has de prendre?" 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="/ca/blog/">Bloc </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/what-is-ap-research-should-you-take-it-1311018">Què és AP Research? L'has de prendre? </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-tutorial/88/binary-tree-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Arbre binari 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="/ca/java-tutorial/">Tutorial De Java </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/binary-tree-java">Arbre binari 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/blog/37/20-best-graphic-design-schools-us.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Les 20 millors escoles de disseny gràfic als EUA" 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="/ca/blog/">Bloc </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/20-best-graphic-design-schools-us-131502">Les 20 millors escoles de disseny gràfic als EUA </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/64/how-prepare-psat.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Com preparar-se per al PSAT: Guia en 5 passos per a la preparació del PSAT" 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="/ca/blog/">Bloc </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/how-prepare-psat-131464">Com preparar-se per al PSAT: Guia en 5 passos per a la preparació del PSAT </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/mysql-tutorial/27/mysql-rename-column.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="MySQL Canvia el nom de la columna" 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="/ca/mysql-tutorial/">Tutorial De Mysql </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/mysql-rename-column">MySQL Canvia el nom de la columna </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 Tots Els Drets Reservats |
<a href="//www.techcodeview.com/es/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Exempció De Responsabilitat </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Sobre Nosaltres </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privadesa </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>