https://wilmerterrero.com/blog/

1<!DOCTYPE html><html lang="en-US" class=""> <head><meta charset="utf-8"><meta content="width=device-width, initial-scale=1.0, shrink-to-fit=no" name="viewport"><meta content="IE=edge" http-equiv="X-UA-Compatible"><title>Blog • wilmerterrero</title><link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png"><link rel="manifest" href="/favicon/site.webmanifest"><link rel="preload" href="/fonts/Satoshi-Variable.ttf" as="font" type="font/ttf" crossorigin><link rel="preload" href="/fonts/Satoshi-VariableItalic.ttf" as="font" type="font/ttf" crossorigin><link rel="canonical" href="https://wilmerterrero.com/blog/"><meta content="Blog • wilmerterrero" name="title"><meta content="Posts" name="description"><meta content="Wilmer Terrero" name="author"><meta content="" name="theme-color"><meta content="website" property="og:type"><meta content="Blog" property="og:title"><meta content="Posts" property="og:description"><meta content="https://wilmerterrero.com/blog/" property="og:url"><meta content="wilmerterrero" property="og:site_name"><meta content="en_US" property="og:locale"><meta content="https://wilmerterrero.com/og_image_wilmerterrero.com.png" property="og:image"><meta content="1200" property="og:image:width"><meta content="630" property="og:image:height"><meta content="summary_large_image" property="twitter:card"><meta content="https://wilmerterrero.com/blog/" property="twitter:url"><meta content="Blog" property="twitter:title"><meta content="Posts" property="twitter:description"><meta content="https://wilmerterrero.com/og_image_wilmerterrero.com.png" property="twitter:image"><link href="/sitemap-index.xml" rel="sitemap"><link href="/rss.xml" rel="alternate" title="wilmerterrero" type="application/rss+xml"><meta content="Astro v4.4.15" name="generator"><link rel="stylesheet" href="/_astro/_slug_.Dnem6yQS.css" />

1<script type="module" src="/_astro/hoisted.BBbrKwFm.js"></script>

1

2<script type="module" src="/_astro/page.55INgWwS.js"></script>

2</head> <body class="flex justify-center bg-background"> 

2<script>
3	const lightModePref = window.matchMedia('(prefers-color-scheme: light)')
4
5	// Get user preference from local storage or from browser preference
6	function getUserPref() {
7		const storedTheme = localStorage.getItem('theme') ?? undefined
8		return storedTheme || (lightModePref.matches ? 'light' : 'dark')
9	}
10
11	function setTheme(newTheme) {
12		if (newTheme !== 'light' && newTheme !== 'dark') {
13			return console.log(`Invalid theme value '${newTheme}' received. Expected 'light' or 'dark'.`)
14		}
15
16		localStorage.setItem('theme', newTheme)
17
18		const root = document.documentElement
19
20		// if current dark theme and new theme is dark, return
21		if (newTheme === 'dark' && root.classList.contains('dark')) {
22			return
23		} else if (newTheme === 'light' && !root.classList.contains('dark')) {
24			return
25		}
26
27		root.classList.toggle('dark')
28	}
29
30	// Initial Setup
31	setTheme(getUserPref())
32
33	// View Transitions hook to restore theme
34	document.addEventListener('astro:after-swap', () => setTheme(getUserPref()))
35
36	// Listen for theme-change custom event
37	document.addEventListener('theme-change', (e) => {
38		setTheme(e.detail.theme)
39	})
40
41	// Listen for prefers-color-scheme change
42	lightModePref.addEventListener('change', (e) => setTheme(e.matches ? 'light' : 'dark'))
43</script>

43 <main class="flex min-h-screen w-screen max-w-[60rem] flex-col items-center px-6 pb-10 pt-7 font-satoshi text-[0.92rem] leading-relaxed sm:px-10 lg:px-10"> <header class="mb-12 flex w-full flex-wrap pb-3 text-sm sm:flex-nowrap sm:justify-start"> <nav class="relative mx-auto flex w-full items-center justify-between sm:flex sm:items-center" aria-label="global"> <a class="flex-none text-xl font-semibold" href="/" aria-label="Brand">wilmerterrero</a> <div class="flex flex-row items-center justify-center gap-x-5 sm:gap-x-7"> <a href="/blog" class="flex-none text-[1.05rem] font-medium hover:text-foreground/75" aria-label="Nav Menu Item">Blog
44</a> <a href="https://apps.apple.com/developer/wilmer-terrero/id1676150391" target="_blank" class="flex-none text-[1.05rem] font-medium hover:text-foreground/75" aria-label="Nav Menu Item">Apps
45</a> <button id="toggleDarkMode" class="relative rounded-md border border-border p-1.5 transition-all hover:bg-border"> <span class="sr-only">Dark Theme</span> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:hidden dark:-rotate-90 dark:scale-0"><path fill="currentColor" d="M12 15q1.25 0 2.125-.875T15 12q0-1.25-.875-2.125T12 9q-1.25 0-2.125.875T9 12q0 1.25.875 2.125T12 15m0 1q-1.671 0-2.836-1.164T8 12q0-1.671 1.164-2.836T12 8q1.671 0 2.836 1.164T16 12q0 1.671-1.164 2.836T12 16m-7-3.5H1.5v-1H5zm17.5 0H19v-1h3.5zM11.5 5V1.5h1V5zm0 17.5V19h1v3.5zM6.746 7.404l-2.16-2.098l.695-.744l2.111 2.134zM18.72 19.438l-2.117-2.14l.652-.702l2.16 2.098zM16.596 6.746l2.098-2.16l.744.695l-2.134 2.111zM4.562 18.72l2.14-2.117l.663.652l-2.078 2.179zM12 12"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="hidden h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:block dark:rotate-0 dark:scale-100"><path fill="currentColor" d="M12.058 20q-3.334 0-5.667-2.333Q4.058 15.333 4.058 12q0-3.038 1.98-5.27Q8.02 4.5 10.942 4.097q.081 0 .159.006t.153.017q-.506.706-.801 1.57q-.295.865-.295 1.811q0 2.667 1.866 4.533q1.867 1.867 4.534 1.867q.952 0 1.813-.295q.862-.295 1.548-.801q.012.075.018.153q.005.078.005.158q-.384 2.923-2.615 4.904T12.057 20"></path></svg> </button> </div> </nav> </header>   <div class="w-full"> <a class="inline-flex items-center gap-x-1 rounded-lg bg-primary-foreground border border-border px-2 py-1 text-sm transition-all hover:bg-input" href="/" data-astro-prefetch> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"> <path fill="currentColor" d="m6.921 12.5l5.792 5.792L12 19l-7-7l7-7l.713.708L6.921 11.5H19v1z"></path> </svg> <p>Back</p>  </a> <h1 class="mb-6 mt-5 text-2xl font-bold">Blog (Spanish)</h1>  <div class="grid gap-y-16 sm:grid-cols-[3fr_1fr] sm:gap-x-8"> <section aria-label="Blog posts list"> <ul class="flex flex-col gap-y-4 text-start"> <li class="flex flex-col gap-2 sm:flex-row sm:gap-x-4 [&_q]:basis-full"> <time datetime="2022-03-15T00:00:00.000Z" class="min-w-[120px]"> Mar 15, 2022 </time> <div><a data-astro-prefetch href="/blog/por-que-no-usar-hoc-react/" class="transition-all hover:text-muted-foreground"> ¿Por qué NO usar HOC en tus aplicaciones React? </a> <p class="line-clamp-3 block text-sm italic text-muted-foreground"> Evita usar HOCs; usa mejor render props </p></div> </li><li class="flex flex-col gap-2 sm:flex-row sm:gap-x-4 [&_q]:basis-full"> <time datetime="2021-09-06T00:00:00.000Z" class="min-w-[120px]"> Sep 6, 2021 </time> <div><a data-astro-prefetch href="/blog/html-mas-accesible-con-dl/" class="transition-all hover:text-muted-foreground"> Escribe HTML mas accesible con el elemento dl </a> <p class="line-clamp-3 block text-sm italic text-muted-foreground"> El elemento dl está infravalorado. </p></div> </li><li class="flex flex-col gap-2 sm:flex-row sm:gap-x-4 [&_q]:basis-full"> <time datetime="2021-08-13T00:00:00.000Z" class="min-w-[120px]"> Aug 13, 2021 </time> <div><a data-astro-prefetch href="/blog/docker-aumenta-eficiencia-desarrollo/" class="transition-all hover:text-muted-foreground"> Usar Docker aumenta tu eficiencia como desarrollador </a> <p class="line-clamp-3 block text-sm italic text-muted-foreground"> Uso de Docker para aumentar la eficiencia de los desarrolladores </p></div> </li><li class="flex flex-col gap-2 sm:flex-row sm:gap-x-4 [&_q]:basis-full"> <time datetime="2021-08-02T00:00:00.000Z" class="min-w-[120px]"> Aug 2, 2021 </time> <div><a data-astro-prefetch href="/blog/como-escribir-html-css-mas-rapido/" class="transition-all hover:text-muted-foreground"> Cómo escribir HTML y CSS mas rápido </a> <p class="line-clamp-3 block text-sm italic text-muted-foreground"> Mejora tu performance como desarrollador web </p></div> </li><li class="flex flex-col gap-2 sm:flex-row sm:gap-x-4 [&_q]:basis-full"> <time datetime="2021-07-29T00:00:00.000Z" class="min-w-[120px]"> Jul 29, 2021 </time> <div><a data-astro-prefetch href="/blog/como-formatear-divisas-javascript/" class="transition-all hover:text-muted-foreground"> Formatear divisas en javascript </a> <p class="line-clamp-3 block text-sm italic text-muted-foreground"> Aprende a formatear divisas para mejorar el UX </p></div> </li><li class="flex flex-col gap-2 sm:flex-row sm:gap-x-4 [&_q]:basis-full"> <time datetime="2021-07-26T00:00:00.000Z" class="min-w-[120px]"> Jul 26, 2021 </time> <div><a data-astro-prefetch href="/blog/escribe-menos-codigo-javascript-moderno/" class="transition-all hover:text-muted-foreground"> ¿Menos código con javascript moderno? </a> <p class="line-clamp-3 block text-sm italic text-muted-foreground"> Aprende cómo en este artículo </p></div> </li><li class="flex flex-col gap-2 sm:flex-row sm:gap-x-4 [&_q]:basis-full"> <time datetime="2021-07-20T00:00:00.000Z" class="min-w-[120px]"> Jul 20, 2021 </time> <div><a data-astro-prefetch href="/blog/como-formatear-fechas-javascript/" class="transition-all hover:text-muted-foreground"> Cómo formatear fechas en javascript </a> <p class="line-clamp-3 block text-sm italic text-muted-foreground"> ¡En una línea de código! </p></div> </li><li class="flex flex-col gap-2 sm:flex-row sm:gap-x-4 [&_q]:basis-full"> <time datetime="2021-06-22T00:00:00.000Z" class="min-w-[120px]"> Jun 22, 2021 </time> <div><a data-astro-prefetch href="/blog/css-grid-responsive-layout/" class="transition-all hover:text-muted-foreground"> Crea un layout responsive con CSS Grid </a> <p class="line-clamp-3 block text-sm italic text-muted-foreground"> ¡con tan solo 1 línea de código! </p></div> </li><li class="flex flex-col gap-2 sm:flex-row sm:gap-x-4 [&_q]:basis-full"> <time datetime="2020-12-25T00:00:00.000Z" class="min-w-[120px]"> Dec 25, 2020 </time> <div><a data-astro-prefetch href="/blog/como-solucionar-error-could-not-find-a-declaration-file-for-module/" class="transition-all hover:text-muted-foreground">

45 Cómo solucionar el error: could not find a declaration file for module &#39;xyz&#39; </a> <p class="line-clamp-3 block text-sm italic text-muted-foreground"> Solucion practica a este error </p></div> </li><li class="flex flex-col gap-2 sm:flex-row sm:gap-x-4 [&_q]:basis-full"> <time datetime="2020-12-25T00:00:00.000Z" class="min-w-[120px]"> Dec 25, 2020 </time> <div><a data-astro-prefetch href="/blog/map-vs-foreach/" class="transition-all hover:text-muted-foreground"> Map vs ForEach </a> <p class="line-clamp-3 block text-sm italic text-muted-foreground"> Comparativa y casos de uso </p></div> </li> </ul> <nav class="mt-8 flex items-center gap-x-4"><a class="ms-auto py-2" data-astro-prefetch href="/blog/2">Next Posts →</a></nav> </section> <aside> <h2 class="mb-4 flex items-center text-lg font-semibold"> <svg aria-hidden="true" class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="none" stroke="none"></path> <path d="M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z"></path> <path d="M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116"></path> <path d="M6 9h-.01"></path> </svg>
46Tags
47</h2> <ul class="text-bgColor flex flex-wrap gap-2"> <li> <a class="inline-flex items-center gap-x-1 bg-primary-foreground border border-border px-2 py-1 text-sm transition-all hover:bg-input rounded-xl" href="/tags/react/" data-astro-prefetch>  <p>react</p>  </a> </li><li> <a class="inline-flex items-center gap-x-1 bg-primary-foreground border border-border px-2 py-1 text-sm transition-all hover:bg-input rounded-xl" href="/tags/desarrolloweb/" data-astro-prefetch>  <p>desarrolloweb</p>  </a> </li><li> <a class="inline-flex items-center gap-x-1 bg-primary-foreground border border-border px-2 py-1 text-sm transition-all hover:bg-input rounded-xl" href="/tags/javascript/" data-astro-prefetch>  <p>javascript</p>  </a> </li><li> <a class="inline-flex items-center gap-x-1 bg-primary-foreground border border-border px-2 py-1 text-sm transition-all hover:bg-input rounded-xl" href="/tags/emprendimiento/" data-astro-prefetch>  <p>emprendimiento</p>  </a> </li> </ul> <span class="mt-4 block sm:text-end"> <a aria-label="View all blog categories" class="" href="/tags/" data-astro-prefetch>
48View all →
49</a> </span> </aside> </div> </div>  <footer class="mx-auto mt-24 w-full"> <div class="border-t border-border pt-5"> <div class="flex flex-col items-center gap-y-3 sm:flex sm:flex-row sm:items-center sm:justify-between sm:gap-y-0"> <div class="flex gap-x-4 text-sm"> <!-- <a
50          class='inline-flex gap-x-2 text-gray-600 hover:text-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600'
51          href='/terms'>Terms</a
52        >
53
54        <a
55          class='inline-flex gap-x-2 text-gray-600 hover:text-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600'
56          href='/privacy'>Privacy</a
57        > --> <p class="">© 2024 wilmerterrero. All rights reserved.</p> </div> <div class="flex items-center justify-between"> <!-- Social Brands --> <div class="flex items-center gap-x-4"> <!-- Linkedin --> <a class="inline-block text-muted-foreground transition-all hover:text-muted-foreground/75" href="https://www.linkedin.com/in/wilmer-terrero/" target="_blank" aria-label="Linkedin"> <svg class="h-4 w-4 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248c-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586c.173-.431.568-.878 1.232-.878c.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252c-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"></path></svg> </a> <a class="inline-block text-muted-foreground transition-all hover:text-muted-foreground

57/75" href="https://github.com/wilmerterrero" target="_blank" aria-label="Github"> <svg viewBox="0 0 128 128" slot="icon" class="h-5 w-5"> <g fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"></path><path d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.

5718-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"></path></g> </svg> </a> <a class="inline-block text-muted-foreground transition-all hover:text-muted-foreground/75" href="https://twitter.com/wilterrero" target="_blank" aria-label="Twitter"> <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" slot="icon"> <path d="M75.916 54.2 122.542 0h-11.05L71.008 47.06 38.672 0H1.376l48.898 71.164L1.376 128h11.05L55.18 78.303 89.328 128h37.296L75.913 54.2ZM60.782 71.79l-4.955-7.086-39.42-56.386h16.972L65.19 53.824l4.954 7.086 41.353 59.15h-16.97L60.782 71.793Z" fill="currentColor" style="stroke-width:.104373"></path> </svg> </a> </div> <!-- End Social Brands --> </div> </div> </div> </footer> </main> <!-- 100% privacy-first analytics --> 

57<script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>

57 <noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt="" referrerpolicy="no-referrer-when-downgrade"></noscript> <!-- Deactivate service worker -->  

57<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"bfd29c61709644dd9505f334723097d0","r":1,"spa":2}' crossorigin="anonymous"></script>

57
58</body> </html>