<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:media="http://search.yahoo.com/mrss/"><channel><title><![CDATA[Israel Castro]]></title><description><![CDATA[My path from numbers to code]]></description><link>https://isca.dev/</link><image><url>https://isca.dev/favicon.png</url><title>Israel Castro</title><link>https://isca.dev/</link></image><generator>Ghost 2.9</generator><lastBuildDate>Tue, 26 Jul 2022 16:40:15 GMT</lastBuildDate><atom:link href="https://isca.dev/rss/" rel="self" type="application/rss+xml"/><ttl>60</ttl><item><title><![CDATA[Why learn programming in 2021 is still so important?]]></title><description><![CDATA[Programming allows you to do things in seconds that would take forever by hand. It provides a new way of abstract thinking, and it can be rewarding.]]></description><link>https://isca.dev/why-learn-programming/</link><guid isPermaLink="false">Ghost__Post__609dd5e4253c7e001e005362</guid><category><![CDATA[Programming]]></category><dc:creator><![CDATA[Israel Castro]]></dc:creator><pubDate>Fri, 14 May 2021 01:55:13 GMT</pubDate><media:content url="https://images.unsplash.com/photo-1617529497471-9218633199c0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDJ8fHByb2dyYW18ZW58MHx8fHwxNjIwOTU2NzA0&ixlib=rb-1.2.1&q=80&w=2000" medium="image"/><content:encoded><![CDATA[<img src="https://images.unsplash.com/photo-1617529497471-9218633199c0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDJ8fHByb2dyYW18ZW58MHx8fHwxNjIwOTU2NzA0&ixlib=rb-1.2.1&q=80&w=2000" alt="Why learn programming in 2021 is still so important?"/><p>I remember the day I clicked on "Inspect" just for curiosity.</p><p>🤯 That made my brain blow out because of the large number of characters that appear. Since then, my curiosity for creating sites has been increasing on and on.</p><p>Fortunately, Google already existed by then, so I could research what the hell all that bunch of information meant (not so YouTube where now you can found thousands of tutorials).</p><p>I know that HTML and CSS aren't programming languages, but the way that you need to think to make your ideas come true (at least in a browser) is the easiest way to introduce yourself in this fantastic world of programming.</p><blockquote>Everybody in this country should learn how to program a computer… because it teaches you how to think".<br>– Steve Jobs.</br></blockquote><p><strong>Programming allows you to do things in seconds that would take forever by hand</strong>. It is a way to make your computer tool do things that it couldn't do before. It provides a wonderful exercise in abstract thinking, and it can be rewarding.</p><p>By the time I discovered how to create a website, I found out that the languages that I mentioned before were the visual part (HTML for the structure and CSS for the presentation), and the functionality was on charge of JavaScript (Yep, this is a programming language) and my curiosity was multiply by ten because this language is more complex and the possibilities for adding more interactivity to your sites or web applications are limitless.</p><p>Let's take a lot of steps before…</p><p>In the beginning, programming was harder because programmers didn't have visual interfaces as we do.</p><p>Now we can do it easily with all the tools that we have like code editors, IDEs (integrated development environment), or even running directly on websites like <a href="http://codepen.io/">codepen.io</a>.</p><p>A programming language is an artificially constructed language used to instruct computers. Like we have languages to communicate with each other, computer languages allow words and phrases to be combined in new ways, making it possible to express ever new concepts.</p><p>Even the field of programmings has decade within us, is still young and still developing rapidly, and it is varied enough to have room for wildly different approaches.</p><h2 id="why-do-we-need-a-programming-language">Why do we need a programming language?</h2><p>This is how programming looks at the birth of computing:</p><pre><code>00110001 00000000 00000000
00110001 00000001 00000001
00110011 00000001 00000010
01010001 00001011 00000010
00100010 00000010 00001000
01000011 00000001 00000000
01000001 00000001 00000001
00010000 00000010 00000000
01100010 00000000 00000000</code></pre><p>That is a program to add the numbers from 1 to 10 together and print out the result.</p><p>In humans words: <code>1 + 2 + … + 10 = 55</code></p><p>Now we can do the same thing with a better presentation with JavaScript.</p><pre><code class="language-JavaScript">let total = 0, count = 1;
while (count <= 10) {
total += count;
count += 1;
}
console.log(total);</code></pre><p>The code says:</p><p>Line 1: Create 2 variables with a value (total = 0; count = 1).</p><p>Line 2: Execute the code (wrapped in braces) while the condition holds (count is less than or equal to 10).</p><p>Line 3: Assing to total, the value of total plus the value of count (total = 0 + 1).</p><p>Line 4: Assing to count, the value of count plus 1.</p><p><em>Now the value of each variable has changed, but the variable count is still less than 10, so the code runs again, and again while the condition is true.</em></p><p>Line 6: show out the result in the console.</p><p>This version is more compressible and we need fewer characters to tell the computer to do the same.</p><p>That is what a programming language allows with the communication with humans and computers: <em>ordering the computer to perform on a higher level</em>.</p><p>Javascript is introduced in 1995 as a way to add programs to web pages. It has been adopted by the major graphical web browser to implement in modern web applications possible.</p><p>JavaScript is almost all devices we use day by day. If you're reading this post on a smartphone, watching your favorite shows on your TV, or even when you take out a beer from your fridge maybe JavaScript was on any of the actions that made easier your lifestyle.</p><p>Of course, JavaScript is not the only programming language but one of the most important in the labor market. Another popular (and so demanded) is Python which design philosophy emphasizes code readability.</p><h2 id="it-changes-the-way-you-think">It changes the way you think</h2><p>When you start learning to program, you will notice the way think changes completely because every time you try to solve or automate a task you need to break that problem into workable pieces and then get on it.</p><p>You <strong>develop the habit of working your way out in a very structured format</strong>, and then, without your notice, you gradually program your brain to take every problem, break it down in steps and understand it better.</p><p>Besides the way you resolve your daily problems, <strong>you develop your creative and artistic skills</strong> not only in the logical part of your program but your front end finding new solutions each time.</p><h2 id="it-gives-you-free-time">It gives you free time</h2><p>When you need to do something that requires a repetition task (like input repeatedly information on Excel/Google Sheets) you can be all day working on that. It can make you go crazy because of the manual labor it requires.</p><p>Guess what? You can write a little program to help yourself every time you need to do it in a few clicks and you will have time to do something else (like spending it with your family watching a TV show on Netflix or whatever).</p><p>In the beginning, most of the time you need to take to write this program could take 80% of your time just for thinking about how to resolve, but then, the rest of the time you just have to write down your code.</p><h2 id="it-guarantees-you-a-job">It guarantees you a job</h2><p>We have the luck of living in the era of technology, and technological growth seems to nowhere near stopping.</p><p>As I mentioned before, <strong>most of the devices we use daily need someone to program</strong> on them and this is an opportunity to be required for the companies that produce them.</p><p>These companies are considering employing people all around the world and considering that you just need the ability to program and a computer connected to the Internet, <strong>you can apply to this works no matter where you are</strong> (or you want to live in next months).</p><h2 id="it-teaches-you-persistence">It teaches you persistence</h2><p>Learning computer programming is hard, I will not lie to you. No matter what language you decide to start, but hard things are just for people who do not give up quickly.</p><p>Like learning a new language in real life, you meet a lot of situations that your brain is not used to work. But do not worry, like all things you already know, <strong>with patience and a lot of hours of practice you will transform your brain function and have better results</strong>.</p><h2 id="open-your-own-business">Open your own business</h2><p>If you are not interested to work for a company like an employee, you can <strong>create your own business solving other's problems</strong> for a fee.</p><p>Knowing how to code allows you to look into this kind of opportunity. Even if you love the most baking cakes, now you can create an online shop to distribute online and generate extra income.</p><p>Well, this situation can be from a lot of people who do not know how to program websites to offer their products and services.</p><p>The opportunities are endless.</p><h2 id="conclution">Conclution</h2><p>No matter what do you do, or what industry you are working in, every action or task you repeat constantly on a device (computer or smartphone) can be turned on in an automatic task.</p><p>Learning programming does not mean you have to create the next Google, Facebook, or the next Netflix. No.</p><p>If we rewind a little and see what was what these big companies did to get where they are now, we will discover that they just suffered from lack of something and they just tried to solve those situations.</p><p>Programming is a skill that will empower you with numerous benefits. Some of these benefits are a guaranteed job, developing problem-solving skills o simply just the opportunity to work from home.</p>]]></content:encoded></item><item><title><![CDATA[AirDrop en Windows]]></title><description><![CDATA[Una de las cosas que nos encanta del entorno iOS y que no tenemos en Windows de manera nativa es la facilidad de compartir archivos a través de AirDrop.]]></description><link>https://isca.dev/airdrop-windows/</link><guid isPermaLink="false">Ghost__Post__6015ad2040c4d3001ef75ce4</guid><category><![CDATA[Aplicaciones]]></category><dc:creator><![CDATA[Israel Castro]]></dc:creator><pubDate>Sat, 30 Jan 2021 20:23:32 GMT</pubDate><media:content url="https://images.unsplash.com/photo-1510557880182-3d4d3cba35a5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxMTc3M3wwfDF8c2VhcmNofDE4fHxpcGhvbmV8ZW58MHx8fA&ixlib=rb-1.2.1&q=80&w=2000" medium="image"/><content:encoded><![CDATA[<img src="https://images.unsplash.com/photo-1510557880182-3d4d3cba35a5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxMTc3M3wwfDF8c2VhcmNofDE4fHxpcGhvbmV8ZW58MHx8fA&ixlib=rb-1.2.1&q=80&w=2000" alt="AirDrop en Windows"/><p>Por mucho tiempo habíamos buscado la forma de compartir desde el iPhone a Windows. Para eso hacíamos cosas raras como enviárnoslo por WhatsApp o por correo electrónico, para luego descargarlo en nuestro equipo.</p><p>Hasta que llegó <a href="https://elapp.com/?utm_source=isca.dev&utm_medium=post">elapp.com</a> 🙌</p><p>Esta aplicación nos da la posibilidad de tener <strong>AirDrop en Windows</strong> y funciona exactamente de la misma manera que como lo hacemos con iPhone y un Mac.</p><p>Para ello debemos descargar la aplicación en nuestro equipo y en nuestro iPhone.</p><h2 id="compartir-archivos-desde-un-iphone-a-windows-con-airdrop">Compartir archivos desde un iPhone a Windows con AirDrop</h2><p><strong>Paso #1</strong>. Una vez instala la aplicación en ambos dispositivos, seleccionamos la opción de compartir de toda la vida en nuestro iPhone y seleccionamos <em>elapp</em>.</p><figure class="kg-card kg-image-card"><img src="https://s3-us-west-1.amazonaws.com/iscadev/2021/01/01-elapp-compartir-archivos.jpg" class="kg-image" alt="AirDrop en Windows"/></figure><p><strong>Paso #2</strong>. Seleccionamos el equipo al que queremos compartir. La primera vez que instalas la aplicación te pide que ingreses un nombre para poder identificarlos.</p><figure class="kg-card kg-image-card"><img src="https://s3-us-west-1.amazonaws.com/iscadev/2021/01/02-elapp-seleccionar-dispositivo.PNG" class="kg-image" alt="AirDrop en Windows"/></figure><p><strong>Paso #3</strong>. Aceptamos el archivo.</p><figure class="kg-card kg-image-card"><img src="https://s3-us-west-1.amazonaws.com/iscadev/2021/01/03-elapp-aceptar-archivo.png" class="kg-image" alt="AirDrop en Windows"/></figure><p><strong>Paso 4</strong>. ¡Listo! El proceso puede demorar dependiendo el tamaño pero en general es muy rápido el proceso.</p><figure class="kg-card kg-image-card"><img src="https://s3-us-west-1.amazonaws.com/iscadev/2021/01/04-elapp-archivo-completa.png" class="kg-image" alt="AirDrop en Windows"/></figure><p>Espera, ¿Creíste que eso era todo?</p><h2 id="copy-paste-en-iphone-desde-windows">Copy & paste en iPhone desde Windows</h2><p>Al igual que con el entorno iOS, podemos compartir textos que hemos copiado en Windows y pegarlos en iPhone.</p><p><strong>Paso #1</strong>. Seleccionamos y copiamos un texto en nuestra computadora.</p><p><strong>Paso #2</strong>. Seleccionamos nuestro iPhone dentro de <em>elapp</em>, damos clic derecho y 'pegar'.</p><figure class="kg-card kg-image-card"><img src="https://s3-us-west-1.amazonaws.com/iscadev/2021/01/01-elapp-pegar-texto.png" class="kg-image" alt="AirDrop en Windows"/></figure><p><strong>Paso #3</strong>. Esperamos a que <em>elapp</em> nos confirme de que el texto ha sido copiado. Lo podemos pegar donde queramos dentro del iPhone.</p><figure class="kg-card kg-image-card"><img src="https://s3-us-west-1.amazonaws.com/iscadev/2021/01/01-elapp-copiado-en-el-portapapeles.png" class="kg-image" alt="AirDrop en Windows"/></figure><p>La aplicación se encuentra en constante mantenimiento por lo que no dudo que lo incorporen en mas equipos o le agreguen mas funcionalidades.</p><figure class="kg-card kg-embed-card"><blockquote class="twitter-tweet" data-width="550"><p lang="es" dir="ltr">elapp ya está en Huawei AppGallery <a href="https://t.co/jSnNIgrcVh">pic.twitter.com/jSnNIgrcVh</a></p>— elapp (@elappHQ) <a href="https://twitter.com/elappHQ/status/1355172670296518658?ref_src=twsrc%5Etfw">January 29, 2021</a></blockquote>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"/>
</figure><p>Ya de por si el compartir en Windows como lo hacemos en un Mac a través de iPhone es una pasada 👏.</p>]]></content:encoded></item><item><title><![CDATA[Less: Preprocesador de CSS]]></title><description><![CDATA[Less es un preprocesador de CSS que nos permite elevar a nivel de lenguaje de programación nuestros estilos con el uso de variables, funciones y mixins]]></description><link>https://isca.dev/less/</link><guid isPermaLink="false">Ghost__Post__5fa3196c0aa45e001e89b195</guid><category><![CDATA[CSS]]></category><dc:creator><![CDATA[Israel Castro]]></dc:creator><pubDate>Thu, 05 Nov 2020 19:00:33 GMT</pubDate><media:content url="https://images.unsplash.com/photo-1563691067913-71b101e003d0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ" medium="image"/><content:encoded><![CDATA[<img src="https://images.unsplash.com/photo-1563691067913-71b101e003d0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ" alt="Less: Preprocesador de CSS"/><p>Less es un preprocesador para CSS que nos permite trabajar hojas de estilo con funcionales de un lenguaje de programación.</p><p>Less se parece mucho a CSS puro, por esa razón es super fácil aprender cómo usar las funcionalidades agregadas como son: el uso de variables, mixins, anidamientos y funciones.</p><p>Es precisamente por las funcionalidades que acabo de mencionar que podemos pasar de esto:</p><pre><code class="language-Less">@color-claro: #fff;
.intro {
width: 1340px;
height: 650px;
padding: 10px;
margin: 0 auto;
position: relative;
&__categorias {
color: fade(@color-claro, 50%);
}
}</code></pre><p>A esto (ya compilado)</p><pre><code class="language-CSS">.intro {
width: 1340px;
height: 650px;
padding: 10px;
margin: 0 auto;
position: relative;
}
.intro__categorias {
color: rgba(255, 255, 255, 0.5);
}</code></pre><p>Adicional a ello, podemos modular nuestro código, lo que nos permite ahorrar tiempo a la hora de estructurar nuestro diseño.</p><h2 id="instalaci-n">Instalación</h2><p>Lo primero que debemos hacer es instalar las herramientas que nos van a permitir compilar nuestro código Less a CSS y que pueda leerlo el navegador, para esto tenemos 3 opciones:</p><ol><li>Prepos: Compilador de Pug (HTML), y de Less, Sass, Stylus (CSS)</li><li>Compilar desde la terminal</li><li>Directamente en el navegador, mediante un script y la etiqueta <link></li></ol><h3 id="prepos">Prepos</h3><p>Al igual que con <a href="https://isca.dev/pug/">Pug, el preprocesador para HTML</a>, podemos utilizar Prepos para compilar, debugear y visualizar el código en tiempo real. Es multiplataforma y es completamente gratuito.</p><p>Descargar: <a href="https://prepros.io/" rel="noopener noreferrer">https://prepros.io/</a></p><p>Una alternativa a instalar prepros es compilar todo desde el terminal (esto nos permite hacer uso de los scripts en npm para agilizar nuestro flujo de trabajo).</p><h3 id="compilar-desde-la-terminal">Compilar desde la terminal</h3><p>Requerimientos: nodeJS</p><p>Para instalar Less ingresamos la siguiente línea de comandos en nuestro terminal:</p><pre><code class="language-Powershell">npm install -g less</code></pre><p>Una vez finalice, para compilar nuestro código Less ingresamos la siguiente línea de comandos, donde debemos definir el input (style.less) y el output (style.css)</p><pre><code class="language-Powershell">lessc styles.less styles.css</code></pre><h3 id="directamente-en-el-navegador">Directamente en el navegador</h3><p>Simplemente agregamos las siguientes líneas de código directamente en el documento HTML para que antes de empezar a pintar nuestro código CSS se ejecute la compilación.</p><pre><code class="language-Html"><link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="//cdn.jsdelivr.net/npm/less"></script></code></pre><h2 id="manos-a-la-obra">Manos a la obra</h2><h3 id="anidamiento">Anidamiento</h3><p>La primera funcionalidad que podemos observar claramente es la posibilidad de anidar nuestro código para que nos permita estructurar mejor nuestros estilos.</p><p>Imaginemos la siguiente estructura de código HTML:</p><pre><code class="language-Html"><div class="galeria">
<div class="galeria__imagen">
<img src="url/imagen.jpg" alt="Título de la imagen">
</div>
<div class="galeria__contenido">
<h3>Título de la imagen</h3>
<p>Título de la imagen</p>
<a class="boton">Leer más…</a>
</div>
</div></code></pre><p>De manera tradicional tendríamos que definir nuestro código CSS de la siguiente manera:</p><pre><code class="language-css">.galeria {
// ...
}
.galeria__imagen {
// ...
}
.galeria__imagen img {
// ...
}
.galeria__contenido {
// ...
}</code></pre><p>Con Less podríamos hacer un anidamiento considerando que este componente pertenece a una galería y a partir de ahí los elementos dentro de el empiezan llamándose de la misma </p><pre><code class="language-less">.galeria {
// ...
&__imagen {
// ...
img {
// ...
}
}
&__contenido {
// ...
}
}</code></pre><p>En la parte del código que incluye <code>&</code> le indica al código que el nombre padre (galeria) se va a adicionar al texto que le sigue al símbolo ampersand. De esta manera lo va a compilar como <code>.galeria</code> y <code>galeria__imagen</code> respectivamente.</p><p>En la parte de código que no lo incluye, como el caso de la etiqueta <code>img</code>, lo que va a hacer es adicionar con espacio creando <code>.galeria__imagen img</code> puesto que no contiene el <code>&</code> lo va a separar.</p><p>✨ De ahí la importancia de tener una <a href="https://isca.dev/bem/">metodología para nombrar</a> nuestros componentes HTML y tener bien en orden nuestro código.</p><h3 id="importar-varios-archivos-less">Importar varios archivos Less</h3><p>Con Less tenemos la posibilidad de poder importar archivos con la finalidad de ordenar nuestro código (modularlo).</p><pre><code class="language-Less">@import "globales.less";
@import "intros.less"</code></pre><p>Si bien es cierto que podemos trabajar todo en un mismo archivo, como lo hacemos con CSS puro, tener nuestro código separado por módulos o funciones permite tenerlo mas organizado.</p><p>📁 css<br>┖ 📄 globales.less<br>┖ 📄 intros.less<br>┖ 📄 styles.less ← Aquí importamos <em>globales</em> e <em>intros</em>.<br>┖ 📄 styles.css ← Hoja de estilos ya compilada.</br></br></br></br></p><h3 id="variables">Variables</h3><p>En una variable almacenamos datos que se puede reutilizar en todo el documento.</p><p>De esta manera evitamos tener que escribir una y otra vez cada que se realizar un cambio, ya que sólo vamos a modificar el valor de la variable y este cambio se verá reflejado en todo los lugares donde haya sido utilizada.</p><p>Generalmente, lo que almacenamos en variables son las guías de estilo de nuestro sitio: colores, fuentes, espacios, etc.</p><p>Pueden declararse en cualquier parte del documento (o documentos –módulos–) de estilos, sin embargo, por orden al trabajar es normal incluirlos dentro del módulo global (globales.less).</p><pre><code class="language-Less">@variable-fuente: "Lato", sans-serif;
@variable-color: #fff;</code></pre><p>⭐ El nombre tiene que ser genérico y que se le vincule con la propiedad a definir. De esta manera cualquier cambio que se haga no se tendrá que renombrar.</p><p>Para hacer uso de ellas, simplemente mandamos llamar la variable (incluyendo la @) dentro los valores de la propiedad.</p><pre><code class="language-Less">body {
font: @variable-fuente;
}</code></pre><h3 id="mixins">Mixins</h3><p>Su finalidad es ofrecer una funcionalidad de que se puedan <strong>reutilizar otras clases</strong> sin que se usen de forma autónoma.</p><p>Nos permite crear bloques reusables de código que cambian su resultado dependiendo de los parámetros que enviemos.</p><p>Con los mixins en Less logramos escribir menos código, produciendo un código más claro, más expresivo y sobre todo más fácil de mantener.</p><p>Siguiendo la misma idea, definimos dentro de nuestro archivo global (globales.less) estableciéndolos como si asignáramos propiedades a una clase.</p><pre><code class="language-Less">.general-box-shadow {
margin: 0 auto;
box-shadow: 0px 0px 0px 0px #333;
}</code></pre><p>Esto nos permitirá ahorrar código cada vez que utilicemos estas propiedades dentro de otras clases.</p><pre><code class="language-Less">.caja {
max-width: 430px;
padding: 25px;
.general-box-shadow; // Mixin
}</code></pre><p>Una característica muy interesante que tienen los mixins en Less, es la posibilidad de pasar parámetros para hacerlo un poco mas versatil a la hora de reutilizar el código.</p><pre><code class="language-Less">.general-box-shadow(@color) {
margin: 0 auto;
box-shadow: 0px 0px 0px 0px @color;
}</code></pre><p>De esta manera, si bien podemos utilizar el mismo código con las mismas reglas cada vez, en cada ocasión podemos pasar ciertos parámetros que nos permite personalizar cada propiedad, en este caso el color</p><pre><code class="language-Less">.caja {
max-width: 430px;
padding: 25px;
.general-box-shadow(@variable-color); // Mixin
}</code></pre><h3 id="funciones">Funciones</h3><p>Las funciones en Less, son un poco distintas de otros lenguajes de programación. Aquí ya están prediseñadas por lo que sólo podemos utilizar las que ya están definidas en el propio lenguaje.</p><p>La diferencia con los mixins y las funciones es que las funciones por lo general hacen los cálculos y regresan el resultado, que es usado como valor de alguna propiedad.</p><pre><code class="language-Less">.intro{
&__categorias {
color: fade(@color-claro, 50%);
}
}</code></pre><p>Esto transformaría el color de una forma un poco mas fácil de entender. Una opción a eso sería poner el valor en RGBA asignando un valor en el atributo alpha de los colores.</p><pre><code class="language-Less">.intro {
&__categorias {
color: rgba(255, 255, 255, 0.5);
}
}</code></pre><p>Para saber mas acerca de las funciones en Less:</p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="http://lesscss.org/functions/"><div class="kg-bookmark-content"><div class="kg-bookmark-title">Functions | Less.js</div><div class="kg-bookmark-description">Less extends CSS with dynamic behavior such as variables, mixins, operations and functions. Less runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="http://lesscss.org/public/ico/favicon.ico" alt="Less: Preprocesador de CSS"><span class="kg-bookmark-author">The Core Less Team</span></img></div></div></a></figure><p>👉 Por convención, podemos definir que las funciones y los mixins se coloquen al final de las reglas.</p><h2 id="conclusi-n">Conclusión</h2><p>Trabajar con Less te permite ahorrar código y hacerlo mas funcional gracias a todas las características que se incorporan.</p><p>Esto se traduce en ahorro de tiempo tanto para escribirlo como para mantenerlo pues en proyectos pequeños no sería relevante, pero en la medida de que vaya creciendo es posible que necesitemos una mejor forma de trabajar con nuestros estilos.</p><p>Lo siguiente que vamos a hablar será sobre Sass y Stylus, otros dos preprocesadores CSS muy potentes a la hora de trabajar.</p>]]></content:encoded></item><item><title><![CDATA[Pug: preprocesador de HTML]]></title><description><![CDATA[El preprocesador Pug extiende el poder de HTML a nivel de un lenguaje de programación volviéndolo mas potente con el uso de varibales, funciones y mixins.]]></description><link>https://isca.dev/pug/</link><guid isPermaLink="false">Ghost__Post__5f97a39d747dbe001e9abe8d</guid><category><![CDATA[HTML]]></category><dc:creator><![CDATA[Israel Castro]]></dc:creator><pubDate>Wed, 28 Oct 2020 18:01:31 GMT</pubDate><media:content url="https://images.unsplash.com/photo-1453227588063-bb302b62f50b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ" medium="image"/><content:encoded><![CDATA[<img src="https://images.unsplash.com/photo-1453227588063-bb302b62f50b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ" alt="Pug: preprocesador de HTML"/><p>Pug es un generador de templates implementado con JavaScript para Node.js y navegadores que nos permite escribir pseudo código de una forma muy limpia y fácil de leer que será compilado a HTML.</p><p>De esta forma nos olvidamos de escribir etiquetas de apertura y cierre para indicar únicamente la etiqueta de inicio seguido de un espacio y lo que vaya a continuación el preprocesador lo entenderá como contenido dentro de la etiqueta.</p><pre><code class="language-Pug">h1 Título
p Lorem, ipsum dolor sit amet consectetur adipisicing.
div.cta
span Botón</code></pre><p>Una vez procesado el archivo, esta plantilla se convertirá en:</p><pre><code class="language-Html"><h1>Título</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
<div class="cta">
<span>Botón</span>
</div></code></pre><p>Adicional a ello, podemos hacer modular nuestro código permitiéndonos ahorrar tiempo a la hora de maquetar, pero eso lo veremos mas adelante.</p><h2 id="instalaci-n">Instalación</h2><p>Lo primero que debemos hacer es instalar la herramienta que nos vaya a servir de compilador y para esto tenemos dos opciones:</p><ol><li>Prepos: Compilador de Pug (HTML), y de Less, Sass, Stylus (CSS)</li><li>Compilador desde la terminal</li></ol><h3 id="prepos">Prepos</h3><p>Una de las opciones que tenemos para compilar, debugear y visualizar el código en tiempo real. Es multiplataforma y es completamente gratuito.</p><p>Descargar: <a href="https://prepros.io/">https://prepros.io/</a></p><p>Una alternativa a instalar prepros es compilar todo desde el terminal (esto nos permite hacer uso de los scripts en npm para agilizar nuestro flujo de trabajo).</p><h3 id="compilar-pug-desde-el-terminal">Compilar Pug desde el terminal</h3><p>Requerimientos: nodeJS</p><p>Para instalar Pug ingresamos la siguiente línea de comandos en nuestro terminal:</p><pre><code class="language-PowerShell">sudo npm install pug-cli -g</code></pre><p>Una vez finalice, para compilar tenemos las siguientes opciones:</p><p>Compilar una sola vez el archivo:</p><pre><code class="language-PowerShell">pug archivo.pug</code></pre><p>Compilar cada vez que el archivo cambie:</p><pre><code class="language-PowerShell">pug -w archivo.pug</code></pre><p><code>-w</code>: watch (flag que le indica al compilador que esté observando cualquier cambio)</p><p>Compilar cada vez que el archivo cambie (en modo indentado)</p><pre><code class="language-PowerShell">pug -w --pretty archivo.pug</code></pre><p>Por defecto, el código dentro del archivo *.html vendrá optimizado en una sola línea (minificado), lo cual es bueno en términos de optimización. Sin embargo, con el flag --pretty podemos generar archivos con indentación para que sea mucho más fácil para nosotros leerlo.</p><p>Para ver todos las opciones que tenemos a la hora de compilar nuestros archivos Pug nos dirigimos a la <a href="https://github.com/pugjs/pug-cli">documentación de pug-cli</a>.</p><h2 id="manos-a-la-obra">Manos a la obra</h2><p>Como se mencionó al inicio, una de las ventajas de utilizar un preprocesador de HTML hoy en día es la posibilidad de ahorrarnos código a la hora de maquetar.</p><p>Entonces, a partir de ahí surgirán algunas dudas sobre cómo vamos a escribir nuestro código en ciertos casos como la existencia de saltos de línea (interpolación) o la designación de atributos en algunas de las etiquetas que por ejemplo no tengan etiqueta de cierre como el caso de <code><img></code>.</p><p>Al respecto te diré que la mejor recomendación es siempre acudir a la documentación:</p><figure class="kg-card kg-bookmark-card kg-card-hascaption"><a class="kg-bookmark-container" href="https://pugjs.org/api/getting-started.html"><div class="kg-bookmark-content"><div class="kg-bookmark-title">Getting Started – Pug</div><div class="kg-bookmark-description"/><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://pugjs.org/images/apple-touch-icon.png" alt="Pug: preprocesador de HTML"><span class="kg-bookmark-publisher">pug</span></img></div></div><div class="kg-bookmark-thumbnail"><img src="https://pugjs.org/images/menu-tab.svg" alt="Pug: preprocesador de HTML"/></div></a><figcaption>Documentación de Pug</figcaption></figure><h3 id="interpolaci-n">Interpolación</h3><p>Para anidar elementos dentro de otros en Pug, debemos considerar la siguiente configuración de saltos de línea.</p><pre><code>p Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, earum obcaecati. Voluptates, magni repudiandae. Asperiores labore reprehenderit cupiditate fugit atque debitis illum magni, officiis velit nobis, expedita maiores optio hic.</code></pre><p>Es lo mismo que <code>p.</code>, el hecho del punto al final de la etiqueta p le dice al preprocesador que todo lo que sigue después será parte de la misma etiqueta.</p><pre><code class="language-Pug">p.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Voluptatibus, earum obcaecati. Voluptates, magni repudiandae.
Asperiores labore reprehenderit cupiditate fugit atque
debitis illum magni, officiis velit nobis, expedita maiores optio hic.</code></pre><p>Si omitimos el punto después de la etiqueta p, debemos agregar un pipe (|) en cada salto de línea.</p><p>Incluso podemos seguir agregando mas etiquetas dentro la misma etiqueta, simplemente agregamos a la misma altura de la indentación, sólo que esta vez sin el pipe (|).</p><pre><code class="language-Pug">p
| Lorem, ipsum dolor sit amet consectetur adipisicing elit.
| Voluptatibus, earum obcaecati. Voluptates, magni repudiandae.
| Asperiores labore reprehenderit cupiditate fugit atque
| debitis illum magni, officiis velit nobis, expedita maiores optio hic.
span Lorem, ipsum dolor sit amet consectetur adipisicing elit</code></pre><p>Esto aplica aun si queremos agregar una etiqueta dentro de otra y esta se encuentra en medio del contenido (negritas, cursivas, etc.) y para ello incorporamos la etiqueta, y luego, nuevamente un salto de línea utilizando el pipe (|) para indicar que el resto del contenido sigue siendo parte de la etiqueta <code>p</code>.</p><pre><code class="language-Pug">p Lorem ipsum dolor
strong sit amet consectetur
| adipisicing elit.</code></pre><h3 id="variables">Variables</h3><p>Por defecto, HTML no incluye las variables de forma nativa y es ahí donde Pug empieza a tomar relevancia.</p><p>Una variable nos sirve para almacenar datos y reutilizarlos en todo nuestro archivo HTML evitándonos tener que escribir lo mismo una y otra vez.</p><p>Estas variables se declaran al inicio del documento y se empiezan con <code>-var</code> seguido del nombre de la variable.</p><pre><code class="language-Pug">// Declarar variables
-var titulo = "Título principal"</code></pre><p>Para hacer el llamado de la variable dentro de nuestra plantilla Pug:</p><pre><code class="language-Pug">// Primera opción
h2= titulo
// Segunda opción
h2 #{titulo}</code></pre><p>En la primera opción podemos llegar a cometer el error de separar el <code>=</code> de la variable, y entonces Pug lo tomaría como contenido dentro de la etiqueta, por esta razón <em>la segunda opción suele ser mas intuitiva de utilizar</em>.</p><p>Podemos asignar varios elementos en una variable (array)</p><pre><code class="language-Pug">-var titulos = ["Título 1", "Título 2", "Título 3"]</code></pre><p>Para hacer el llamado de la variable debemos indicar en qué posición se encuentra el valor que deseamos obtener:</p><pre><code class="language-Pug">h2 #{titulos[0]} // Título 1</code></pre><p>Las posiciones, como todo en lenguaje de programación empiezan por el cero. De esta forma las posiciones quedan así:</p><p>0 = Título 1<br>1 = Título 2<br>2 = Título 3</br></br></p><h3 id="condicionales-y-loops">Condicionales y loops</h3><p>Como se comentó al inicio, Pug eleva HTML a un lenguaje de programación en algunos aspectos. Uno de ellos es precisamente la posibilidad de utilizar condicionales y loops en código para mostrar contenido dependiendo de si se cumple la condición o no.</p><p>Un <strong>condicional</strong> nos permite evaluar cierta condición y tomar una opción entre dos caminos dependiente de si se cumple o no.</p><p>Comenzamos por la declaración de la variable:</p><pre><code class="language-Pug">-var usuario = "Israel"</code></pre><p>Al momento de hacer el llamado tendríamos la siguiente estructura lógica:</p><pre><code class="language-Pug">if usuario
a Hola #{usuario}
else
a.boton Registro</code></pre><p>Con lo anterior, si la variable <code>usuario</code> tiene valor, ya compilado nuestro código quedaría de la siguiente manera:</p><pre><code class="language-Html"><a>Hola Israel</a></code></pre><p>De lo contrario tendríamos un enlace con la clase 'boton' para el registro.</p><p>Ahora, un loop es un fragmento de código que se va a ejecutar de forma repetitiva hasta que se cumpla una condición.</p><pre><code class="language-Pug">ul
each titulo in titulos
li=titulo</code></pre><p>Esto nos arrojaría el siguiente código ya compilado:</p><pre><code class="language-Html"><ul>
<li>Título 1</li>
<li>Título 2</li>
<li>Título 3</li>
</ul></code></pre><p>Es decir, toma de la variable titulos que es de tipo arreglo y lo va recorriendo un por uno para mostrar cada elemento dentro de listado.</p><p>⚡ El each deriva de foreach. La diferencia del ciclo for es que en el for le determinar cuántas vueltas tiene que dar, mientras que foreach lee la longitud del arreglo y desde el inicio ya sabe cuántas vuelta tiene que dar.</p><h3 id="mixins">Mixins</h3><p>Otra de las ventajas que ofrece el utilizar Pug como preprocesador es la posibilidad de utilizar mixins que nos permiten reutilizar fragmentos de código que cambien su resultado dependiendo del parámetro que le enviemos.</p><p>Con esto logramos escribir menos código, haciéndolo un poco más claro, expresivo y sobre todo mucho más fácil de mantener.</p><p>La declaración de los mixins, al igual que las variables se realiza al inicio del documento.</p><p>Comenzamos designando la palabra clave mixin seguido del nombre del mixin. Lo que va entre paréntesis representa las variables o parámetros dentro de este mixin.</p><pre><code class="language-Pug">mixin galeria(imagen, titulo, descripcion)
.galeria
.galeria__imagen: img(src="imagen", alt="titulo")
.galeria__contenido:
h3=titulo
p=descripcion
a.boton Leer más…</code></pre><p>A la hora de hacer el llamado del mixin, quedaría de la siguiente manera:</p><pre><code class="language-Pug">+galeria('url/imagen.jpg', 'Título de la imagen', 'Descripción de la imagen')</code></pre><p>Esto ya compilado nos arrojaría:</p><pre><code class="language-Html"><div class="galeria">
<div class="galeria__imagen">
<img src="url/imagen.jpg" alt="Título de la imagen">
</div>
<div class="galeria__contenido">
<h3>Título de la imagen</h3>
<p>Título de la imagen</p>
<a class="boton">Leer más…</a>
</div>
</div></code></pre><h3 id="includes-y-extends">Includes y extends</h3><p>Como Pug funciona como un generador de plantillas, dos de sus principales características para aprovechar esta funcionalidad es haciendo uso de los includes y extends.</p><p>Los <strong>includes</strong> sirven para incluir un archivo de extensión *.pug dentro de otro.</p><p>Esto permite modularizar nuestro proyecto quedando de la siguiente manera:</p><pre><code class="language-Pug">html
include ./head.pug
body</code></pre><p>De esta manera, al momento de compilar nuestro archivo Pug tomará el head que puede estar en la misma carpeta (o en otra) y nos ahorra el tener que incorporar la misma información cada vez.</p><p>Mas información acerca de los includes en Pug:</p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://pugjs.org/language/includes.html"><div class="kg-bookmark-content"><div class="kg-bookmark-title">Includes – Pug</div><div class="kg-bookmark-description"/><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://pugjs.org/images/apple-touch-icon.png" alt="Pug: preprocesador de HTML"><span class="kg-bookmark-publisher">pug</span></img></div></div><div class="kg-bookmark-thumbnail"><img src="https://pugjs.org/images/menu-tab.svg" alt="Pug: preprocesador de HTML"/></div></a></figure><p>Por otro lado, los <strong>extends</strong> te permiten adicionar bloques de código a una página. A través de ellos podemos <em>seguir agregando contenido a partir de dónde se crearon los demás templates</em>.</p><p>Imaginemos la siguiente estructura:</p><p>📁 components<br> ┖ 🐶 template.pug<br>📄 post.pug</br></br></p><p>Dentro del archivo template.pug definimos la estructura de nuestra plantilla incorporando las variables, mixinis, head, etc. y justo donde queramos que vaya el contenido del post.pug debemos hacer el llamado con <code>block posts</code> o <code>block contenidos</code> si queremos darle un poco mas de dinamismo.</p><p>Luego, en nuestro archivo pug debemos hacer el extend de la plantilla.</p><pre><code class="language-Pug">extend ./components/template.pug
block contenidos
// A partir de aquí ponemos todo el código que queramos que se incluya</code></pre><p>Mas información acerca de los extends en Pug:</p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://pugjs.org/language/inheritance.html"><div class="kg-bookmark-content"><div class="kg-bookmark-title">Template Inheritance – Pug</div><div class="kg-bookmark-description"/><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://pugjs.org/images/apple-touch-icon.png" alt="Pug: preprocesador de HTML"><span class="kg-bookmark-publisher">pug</span></img></div></div><div class="kg-bookmark-thumbnail"><img src="https://pugjs.org/images/menu-tab.svg" alt="Pug: preprocesador de HTML"/></div></a></figure><h2 id="conclusi-n">Conclusión</h2><p>Aunque puede parecer un engorroso aprender una nueva sintaxis, te aseguro que en la medida que tus proyectos vayan creciendo te será mucho mas útil contar con herramientas que te permitan escalar tu código a través de todas las bondades que nos otorga Pug.</p><p>Adicional a ello te recomiendo que consideres adoptar alguna metodología que te permita organizar tu código como <a href="https://isca.dev/bem/">BEM</a>, esto hará que la estructura y nomenclatura con las clases sea mucho más fácil de definir.</p>]]></content:encoded></item><item><title><![CDATA[Metología BEM]]></title><description><![CDATA[BEM es una metodología ágil de desarrollo web para nombrar las clases de los componentes HTML, haciendo tu código fácil de leer y entender.]]></description><link>https://isca.dev/bem/</link><guid isPermaLink="false">Ghost__Post__5f8e45b2e47d58001e455d22</guid><category><![CDATA[CSS]]></category><dc:creator><![CDATA[Israel Castro]]></dc:creator><pubDate>Wed, 21 Oct 2020 18:13:00 GMT</pubDate><media:content url="https://images.unsplash.com/photo-1533234427049-9e9bb093186d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ" medium="image"/><content:encoded><![CDATA[<img src="https://images.unsplash.com/photo-1533234427049-9e9bb093186d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ" alt="Metología BEM"/><p>BEM es una de las metodologías mas utilizadas actualmente debido su practicidad frente a otras metodologías y por su capacidad para crear componentes reutilizables y compartir código en el desarrollo web.</p><p>Nace de la necesidad de <strong>nombrar los elementos</strong> a la hora de maquetar un sitio web, estableciendo una convención super fácil, poderosa y simple que permite que tu código sea mucho más fácil de leer y entender.</p><h2 id="bem-bloque-elemento-modificador">BEM: Bloque, Elemento, Modificador</h2><p>BEM es el acrónimo de <em>Block Element Modifier</em> y aunque es bastante simple de implementar, hacerlo te <strong>permitirá escalar y mantener grandes proyectos de desarrollo web</strong>.</p><p>Dentro de un Bloque puedes tener múltiples Elementos que conforman todo un componente, a su vez cada elemento puede necesitar alguna Modificación de si misma dependiendo su funcionalidad.</p><p>Esta metodología permite ahorrar tiempo a la hora de nombrar las partes de nuestros componentes y la forma en la que debemos hacerlo es separando cada una de las partes mediante el uso de '__' entre bloque/elemento y de '--' entre bloque/modificador o elemento/modificador.</p><p><strong>Bloque</strong></p><p>Los nombres de los bloques se pueden nombrar con caracteres alfanuméricos y se recomienda que sea un nombre corto (lo mas corto posible) que te permite identificar qué información/elementos contendrá dicho bloque.</p><pre><code class="language-Html"><div class="bloque">…</div></code></pre><p><strong>Elemento</strong></p><p>Sigue las mismas reglas de nombramiento de los bloques, y heredan el prefijo separado por un doble guion bajo "__".</p><p>Aplica para títulos, logos, menús, formularios, inputs, botones etc.</p><pre><code class="language-Html"><div class="bloque">
<span class="bloque__elemento">…</span>
</div></code></pre><p><strong>Modificador</strong></p><p>Sigue las mismas reglas de nombramiento de los anteriores, heredan el prefijo del bloque o elemento que modifican separado por doble guion medio "--".</p><pre><code class="language-Html"><div class="bloque">
<span class="bloque__elemento">
<button class="bloque__button--active"></button>
</span>
</div></code></pre><p>Si el nombre del modificador es demasiado largo puedes hacer la separación utilizando un sólo guion: <code>bloque__elemento--modificador-largo</code>.</p><h2 id="ejemplo">Ejemplo</h2><p>Veamos una calculadora que bien podría ser un widget en una aplicación. La aplicación es bastante simple, la idea es que el usuario incorpore una cantidad en dólares y esta la convertirá a la moneda local.</p><p>En HTML simple y plano quedaría de la siguiente manera…</p><pre><code class="language-Html"><section>
<h1>Calculadora de divisas</h1>
<form action="calcular.php" method="post">
<p>Ingrese una cantidad: (Ej. 1USD, $25.00USD)</p>
<p>
<input name="cantidad">
<input type="submit" value="Calcular">
</p>
</form>
</section></code></pre><p>Ahora agreguemos nuestras clases para poder dar estilos a este widget.</p><pre><code class="language-Html"><section class="widget">
<h1 class="widget__header">Calculadora de divisas</h1>
<form class="widget__form" action="calcular.php" method="post">
<p>Ingrese una cantidad: (Ej. 1USD, $25.00USD)</p>
<p>
<input name="cantidad" class="widget__input widget__input--amount">
<input type="submit" value="Calcular" class="widget__input widget__input--submit">
</p>
</form>
</section></code></pre><p>Lo primero que notamos es la asignación de mas alto nivel <code>section</code> la cual será nuestro 'Bloque'. A este bloque le hemos asignado la clase de <code>wigdet</code> y será este el prefijo de los elementos dentro de el.</p><p>Lo puedes nombrar como gustes, aunque se busca que sea un nombre que pueda ser identificable (te dice de que va a tratar el contenido dentro) o bien, que puedas identificar su ubicación dentro del documento HTML.</p><p>Los elementos que le siguen como lo son el título <code>header</code>, el formulario <code>form</code> y los elementos del formulario <code>input</code> se nombrarán tomando en cuenta el bloque que los contiene.</p><p>De esta manera tendríamos los siguiente elementos:</p><ul><li>widget</li><li>widget__header</li><li>widget__form</li><li>widget__input</li></ul><p>Importante notar que el rol de los 'modificadores' cae en los elementos de tipo input y hemos utilizado: <code>widget__input--amount</code> y <code>widget__input--submit</code>.</p><p>Estos modifican el estado o apariencia de nuestros elementos.</p><p>Se recomienda utilizar una clase general que permita estilizar ambos elementos (ambos tiene la misma estructura), pero a su vez tienen pequeñas diferencias que nos evitarán repetir código y tener estilos únicos para cada uno al mismo tiempo.</p><p>Establecido todo lo anterior, nuestro código CSS se vería mas o menos así:</p><pre><code class="language-Css">.widget {
background-color: #FC3;
}
.widget__header {
color: #930;
font-size: 3em;
margin-bottom: 0.3em;
text-shadow: #FFF 1px 1px 2px;
}
.widget__input {
border-radius: 5px;
font-size: 0.9em;
line-height: 1.3;
padding: 0.4em 0.7em;
}
.widget__input--amount {
border: 1px solid #930;
}
.widget__input--submit {
background-color: #EEE;
border: 0;
}</code></pre><h2 id="conclusi-n">Conclusión</h2><p>Nombrar los componentes o establecer comentarios claros en el desarrollo web es una de las cosas que mas quiebran la cabeza cuando vamos empezando.</p><p>Muchos cometemos el error que nombrarlos directamente con la funcionalidad y esto impide tomar el mismo componente para otras partes de la aplicación o para otros proyectos.</p><p>BEM te permite nombrar los componentes sin tener que complicarte o perder demasiado tiempo en ello. Y una vez lo hemos hecho el trabajo de darle estilos será mucho mas eficiente a la par de que un mismo componente se puede reutilizar en cualquier parte de tu aplicación.</p>]]></content:encoded></item><item><title><![CDATA[Estructuras de datos inmutables]]></title><description><![CDATA[Las estructuras de datos inmutables forman parte de los principios de la programación funcional y nos permite deshacernos del efecto de lado (side effect).]]></description><link>https://isca.dev/estructuras-datos-inmutables/</link><guid isPermaLink="false">Ghost__Post__5f5d17fbd471b7001ed1fc55</guid><category><![CDATA[JavaScript]]></category><dc:creator><![CDATA[Israel Castro]]></dc:creator><pubDate>Sat, 12 Sep 2020 19:42:16 GMT</pubDate><media:content url="https://images.unsplash.com/photo-1489875347897-49f64b51c1f8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ" medium="image"/><content:encoded><![CDATA[<img src="https://images.unsplash.com/photo-1489875347897-49f64b51c1f8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ" alt="Estructuras de datos inmutables"/><p>Las estructuras de datos inmutables forman parte de los principios de la programación funcional y nos permite deshacernos del efecto de lado (side effect).</p><p>Es decir, nos <strong>evita que las variables</strong> (sobre todo las de tipo objeto) <strong>se modifiquen sin nuestro consentimiento</strong> evitándonos un montón de bugs al momento de desarrollar.</p><p>Llamamos una función que está relacionada con un objeto, y esta función modifica ese objeto.</p><pre><code class="language-JavaScript">const isca = {
nombre: 'Israel',
apellido: 'Castro',
edad: 30
}
const cumple = persona => persona.edad++</code></pre><p>Si ejecutamos <code>cumple(isca)</code>, al valor de la edad se le sumará 1 y así tantas veces como lo hagamos.</p><p>Esto se debe evitar, o al menos en la mayoría de las ocasiones queremos hacerlo.</p><h2 id="funciones-inmutables">Funciones inmutables</h2><p>Para solucionarlo debemos definir una función inmutable, creando un nuevo objeto en memoria.</p><pre><code class="language-JavaScript">const isca = {
nombre: 'Israel',
apellido: 'Castro',
edad: 30
}
const cumpleInmutable = persona => ({
...persona,
edad: persona.edad + 1
})</code></pre><p>El <code>...persona</code> desglosa cada uno de los atributos (nombre, apellido, edad, …) y lo coloca en nuevo objeto.</p><p>De esta manera el objeto original (isca) sigue teniendo 30, puesto que nunca fue modificado y el nuevo objeto tendrá 31.</p><p>El único detalle es que para poder acceder a estos cambios, se deben guardar en otra variable, de lo contrario sólo se mostrarán en pantalla y no podremos acceder a este nuevo objeto.</p><pre><code class="language-JavaScript">const isca2 = cumpleInmutable(isca)</code></pre><p>Ahora que lo pienso 🤔, ojalá así fuera en la vida real respecto a nuestra edad.</p>]]></content:encoded></item></channel></rss>