<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Leifer Mendez</title>
    <description>The latest articles on DEV Community by Leifer Mendez (@leifermendez).</description>
    <link>https://dev.to/leifermendez</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F331197%2F32181b72-dc56-4818-898a-6194106badc5.jpeg</url>
      <title>DEV Community: Leifer Mendez</title>
      <link>https://dev.to/leifermendez</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/leifermendez"/>
    <language>en</language>
    <item>
      <title>SDK Y APIS </title>
      <dc:creator>Leifer Mendez</dc:creator>
      <pubDate>Fri, 11 Feb 2022 11:34:18 +0000</pubDate>
      <link>https://dev.to/leifermendez/sdk-y-apis-549i</link>
      <guid>https://dev.to/leifermendez/sdk-y-apis-549i</guid>
      <description>&lt;p&gt;En el desarrollo de software moderno, el &lt;strong&gt;&lt;a href="https://www.codigoencasa.com/ghost/#/editor/post/6202450766777004bcab96fa"&gt;SDK&lt;/a&gt;&lt;/strong&gt; y la &lt;strong&gt;&lt;a href="https://codigoencasa.com/api-con-javascript/"&gt;API&lt;/a&gt;&lt;/strong&gt; son dos herramientas principales con las que te encontrarás con frecuencia. &lt;br&gt;
Tienen mucho en común, y a veces hay confusión sobre lo que hace cada una. En esencia, tanto el SDK como la API te permiten mejorar la funcionalidad de tu aplicación con relativa facilidad. Para cumplir la promesa de cualquiera de ellas o de ambas, y mejorar la experiencia tanto interna como de los usuarios finales, es importante entender cómo funcionan ambas herramientas en el &lt;strong&gt;backend&lt;/strong&gt;, &lt;em&gt;en qué se diferencian&lt;/em&gt; y cómo contribuyen al proceso general de desarrollo.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--1rhfzcWc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kykkhrkltod0d2xmbt0g.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--1rhfzcWc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kykkhrkltod0d2xmbt0g.png" alt="Image description" width="880" height="497"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Qué es un SDK?
&lt;/h2&gt;

&lt;p&gt;SDK significa &lt;em&gt;kit de desarrollo de software.&lt;/em&gt; También conocido como &lt;strong&gt;devkit&lt;/strong&gt;.&lt;br&gt;
El SDK es un conjunto de herramientas de construcción de software para una plataforma específica, que incluye los bloques de construcción, depuradores y, a menudo, un marco o grupo de bibliotecas de código, como un conjunto de rutinas específicas de un sistema operativo (SO).&lt;/p&gt;

&lt;p&gt;Un SDK típico puede incluir &lt;strong&gt;algunos o todos estos recurso&lt;/strong&gt;s en su conjunto de herramientas:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Compilador:&lt;/strong&gt; Traduce de un lenguaje de programación al que se va a trabajar&lt;br&gt;
&lt;strong&gt;Muestras de código:&lt;/strong&gt; Ofrecen un ejemplo concreto de una aplicación o página web&lt;br&gt;
&lt;strong&gt;Bibliotecas de código &lt;em&gt;(framework)&lt;/em&gt;:&lt;/strong&gt; Proporcionan un atajo con secuencias de código que los programadores utilizarán repetidamente&lt;br&gt;
&lt;strong&gt;Herramientas de prueba y análisis:&lt;/strong&gt; Proporcionan información sobre el rendimiento de la aplicación o el producto en entornos de prueba y producción&lt;br&gt;
&lt;strong&gt;Documentación:&lt;/strong&gt; Proporciona a los desarrolladores instrucciones que pueden consultar sobre la marcha&lt;br&gt;
&lt;strong&gt;Depuradores:&lt;/strong&gt; Ayudan a los equipos a detectar errores en su código para que puedan publicar un código que funcione como se espera.&lt;br&gt;
A menudo, el &lt;strong&gt;SDK **incluye también al menos una **API&lt;/strong&gt;, ya que sin ella las aplicaciones no pueden transmitir información ni trabajar juntas.&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/ImercojO_DI"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Cómo funciona un SDK
&lt;/h2&gt;

&lt;p&gt;Los SDK proporcionan una amplia colección de herramientas que permiten a los desarrolladores de software crear aplicaciones de software más rápidamente y de forma más estandarizada.&lt;/p&gt;

&lt;p&gt;El desarrollo de aplicaciones móviles nativas en la nube, por ejemplo, aprovecha los &lt;em&gt;SDK de iOS de Apple o los SDK de Android de Google&lt;/em&gt; para esa plataforma. &lt;br&gt;
Para las aplicaciones a mayor escala, como el software como servicio (&lt;em&gt;SaaS&lt;/em&gt;) de las empresas y las aplicaciones de software de escritorio y web patentadas, Microsoft proporciona el &lt;em&gt;SDK .NET&lt;/em&gt; de código abierto que se utiliza habitualmente.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;La sencillez de un SDK es tan valiosa como las herramientas del kit. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  El funcionamiento es el siguiente:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Compre, descargue e instale el "kit" correspondiente a su plataforma (&lt;em&gt;por ejemplo, piezas prefabricadas, ejemplos e instrucciones).&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;Abre y aprovecha las API y todas las herramientas de desarrollo que necesites para crear una nueva aplicación, empezando por el entorno de desarrollo integrado (IDE). &lt;em&gt;Este es el espacio donde harás la codificación real y donde está tu compilador.&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;Utiliza las instrucciones, la documentación, los ejemplos de código y las herramientas de prueba para realizar la construcción, lo que te dará a ti y a tu equipo una buena ventaja.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Casos de uso del SDK
&lt;/h2&gt;

&lt;p&gt;Los SDK de lenguajes de programación específicos, como el &lt;strong&gt;JSON&lt;/strong&gt; y el &lt;strong&gt;Java Developer Kit (JDK)&lt;/strong&gt;, se utilizan para desarrollar programas en esos lenguajes de una manera racionalizada y estandarizada.&lt;/p&gt;

&lt;p&gt;Los SDK de análisis de Google y otros proporcionan datos sobre los comportamientos, rutas y acciones de los usuarios.&lt;/p&gt;

&lt;p&gt;Los SDK de monetización de &lt;em&gt;Google, Facebook&lt;/em&gt; y otros facilitan a los desarrolladores el despliegue de publicidad en sus aplicaciones existentes, con el objetivo de generar ingresos.&lt;/p&gt;

&lt;p&gt;Ventajas del SDK&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Proporcionan acceso a los componentes e instrucciones para el desarrollo de software:&lt;/strong&gt; &lt;br&gt;
Un SDK para comercios, por ejemplo, que recoge todo lo que se desea en la aplicación &lt;em&gt;(favoritos, carrito, guardar para más tarde, pago, etc.).&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Integraciones más rápidas y fluidas:&lt;/strong&gt; Los SDKs simplifican los procesos estándar necesarios y proporcionan un fácil acceso a la información necesaria.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Ciclo de desarrollo más corto&lt;/strong&gt;, consiguiendo que los productos se desplieguen y lleguen al mercado de forma más eficiente:  Dado que un SDK está construido para informar, equipar y proporcionar atajos para el desarrollo, los desarrolladores pueden centrarse en el desarrollo del producto que han planeado.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Asistencia y experiencia integradas:&lt;/strong&gt; No es necesario buscar respuestas o contratar a alguien para aumentar el equipo; los SDK vienen precargados con experiencia en el código ya escrito y la documentación de apoyo incluida.&lt;/p&gt;

&lt;p&gt;**Control de costes: **Todo lo anterior le permite ceñirse mejor a un presupuesto establecido durante el desarrollo y después del despliegue.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Ahora vamos a ver cómo funciona ese intermediario, la API.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;¿Qué es una API?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;API significa interfaz de programación de aplicaciones.&lt;/em&gt; Tanto si funciona como una solución independiente como si está &lt;strong&gt;incluida en un SDK&lt;/strong&gt;, una &lt;a href="https://codigoencasa.com/api-con-javascript/"&gt;API&lt;/a&gt; facilita la comunicación entre dos plataformas.&lt;/p&gt;

&lt;p&gt;Lo hace permitiendo que su software propietario sea aprovechado por desarrolladores de terceros. Los desarrolladores pueden entonces permitir a sus propios usuarios utilizar indirectamente el servicio o los servicios &lt;strong&gt;proporcionados por la solución API.&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;También se puede pensar en una API como una especie de acuerdo entre dos partes.&lt;/p&gt;
&lt;/blockquote&gt;


&lt;/blockquote&gt;

&lt;p&gt;La API no sólo permite el intercambio de información a la carta, sino que estipula cómo debe intercambiarse esa información.&lt;/p&gt;

&lt;p&gt;Dado que algunas API proporcionan la interfaz directamente, los términos &lt;strong&gt;"API" e "interfaz"&lt;/strong&gt; se utilizan a veces de forma intercambiable.&lt;/p&gt;

&lt;p&gt;Para desglosarlo, una API puede constar de dos cosas:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Las especificaciones técnicas y la documentación:&lt;/strong&gt; Esta información explica cómo tendrá que integrar la API para utilizarla eficazmente.&lt;/p&gt;

&lt;p&gt;**La interfaz propiamente dicha: **Puedes acceder a ella directamente a través de una palabra clave (en el caso de una API web) o indirectamente desde una interfaz independiente (en el caso de una API REST).&lt;/p&gt;

&lt;p&gt;Algunas de las API más populares son las siguientes&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;APIs web&lt;/strong&gt;, que se utilizan para llegar a los navegadores y dispositivos web o como una aplicación propia de servicios web.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;APIs SOAP&lt;/strong&gt;, que son una opción popular en casos de mayor privacidad y seguridad de los datos.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;APIs abiertas&lt;/strong&gt; (o APIs públicas) y APIs REST (o RESTful), que son una opción popular por su facilidad de uso y para maximizar el ancho de banda.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;JSON-RPC&lt;/strong&gt;, una opción para los casos en los que se necesitan llamadas asíncronas al servidor.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;APIs personalizadas&lt;/strong&gt;, para conseguir la máxima agilidad con todas las partes móviles del desarrollo de software.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;🤔 Quieres más contenido!&lt;/strong&gt;&lt;br&gt;
Aquí te dejo algunos enlaces donde comparto el contenido:&lt;br&gt;
&lt;a href="https://www.youtube.com/channel/UCgrIGp5QAnC0J8LfNJxDRDw?sub_confirmation=1"&gt;Youtube&lt;/a&gt;: Todo sobre Angular, Node, JS y mucho más&lt;br&gt;
&lt;a href="https://t.me/leifermendez"&gt;Telegram&lt;/a&gt;: Canal donde compartimos dudas y complementamos nuestros conocimientos&lt;br&gt;
&lt;a href="https://github.com/leifermendez"&gt;Github&lt;/a&gt;: Todo el código libre de los proyectos&lt;br&gt;
&lt;a href="https://codigoencasa.com/"&gt;Blog&lt;/a&gt;: Escribo cosas con más frecuencia cada semana!&lt;br&gt;
&lt;a href="https://www.linkedin.com/in/leifermendez/"&gt;Linkedin:&lt;/a&gt; El canal profesional&lt;/p&gt;

</description>
    </item>
    <item>
      <title>JavaScript y sus Métodos </title>
      <dc:creator>Leifer Mendez</dc:creator>
      <pubDate>Tue, 25 Jan 2022 12:24:40 +0000</pubDate>
      <link>https://dev.to/leifermendez/javascript-y-sus-metodos-123a</link>
      <guid>https://dev.to/leifermendez/javascript-y-sus-metodos-123a</guid>
      <description></description>
    </item>
    <item>
      <title>CSS en Angular NUEVO estado</title>
      <dc:creator>Leifer Mendez</dc:creator>
      <pubDate>Mon, 24 Jan 2022 08:26:31 +0000</pubDate>
      <link>https://dev.to/leifermendez/css-en-angular-nuevo-estado-986</link>
      <guid>https://dev.to/leifermendez/css-en-angular-nuevo-estado-986</guid>
      <description>&lt;p&gt;Han pasado algunos años desde la última vez que se supo algo sobre &lt;strong&gt;CSS en angular&lt;/strong&gt;-&lt;br&gt;
&lt;em&gt;¡y han pasado muchas cosas desde entonces!&lt;/em&gt; En este post, vamos a echar un vistazo a las nuevas características de la web que impactan en cómo definimos el estilo en nuestras aplicaciones &lt;a href="https://codigoencasa.com/angular-13/"&gt;Angular&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;
  
  
  &lt;strong&gt;Cómo utilizar @use en lugar de @import&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;En 2019, &lt;strong&gt;Sass&lt;/strong&gt; introdujo un nuevo sistema de módulos, incluyendo una migración de &lt;strong&gt;@import&lt;/strong&gt;  a &lt;strong&gt;@use&lt;/strong&gt;. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Al cambiar a la sintaxis @use, podemos determinar más fácilmente qué &lt;strong&gt;CSS&lt;/strong&gt; no se utiliza, y reducir el tamaño de la salida CSS compilada. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Esto hace que sea imposible introducir inadvertidamente dependencias transitivas. Cada módulo se incluye sólo una vez, sin importar cuántas veces se carguen esos estilos.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;**Angular Material v12 **incluyó una migración del uso de @import a @use para todas las importaciones en los estilos Sass de Angular Material. &lt;br&gt;
Esta refactorización de la superficie de la API de tematización es más fácil de entender y leer, ayudando a los desarrolladores a aprovechar mejor este nuevo sistema de módulos. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Esta migración tiene lugar en los &lt;em&gt;scripts&lt;/em&gt; incluidos en la actualización ng. Un ejemplo de este cambio está en cómo definimos un tema de Angular Material:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// Angular Material Styling is imported as 'mat'.
@use '@angular/material' as mat; 

//'mat' namespace is referenced.
$my-primary: mat.define-palette (mat.$pink-palette,500);
$my-accent: mat.define-palette (mat.$pink-palette, A200, A100, A400);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Ahora hacemos uso de la introducción de espacios de nombres para definir el núcleo &lt;strong&gt;'@angular/material'&lt;/strong&gt; como mat, y luego acceder a variables como mat.$indigo-palette. Si investigas en el código fuente, somos más intencionales sobre qué variables son @forwarded para el acceso público para guiar a los usuarios hacia un estilo más limpio.&lt;/p&gt;

&lt;p&gt;Sugerencia: Echa un vistazo a la nueva documentación de tematización de Angular Material para ver cómo @use y esta migración simplifican la tematización de tus componentes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Habilitación de conceptos modernos de CSS
&lt;/h2&gt;

&lt;p&gt;¡&lt;a href="https://codigoencasa.com/los-comandos-de-angular-mas-usados/"&gt;Angular v13&lt;/a&gt; eliminó el soporte para &lt;strong&gt;IE11&lt;/strong&gt; después de una exitosa solicitud de comentarios  haciendo posible que Angular adopte estilos web modernos como &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;CSS Grid. &lt;/li&gt;
&lt;li&gt;Propiedades lógicas CSS.&lt;/li&gt;
&lt;li&gt;CSS calc(), &lt;/li&gt;
&lt;li&gt;::hover y más! &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Es por ello que considero que más de uno estamos ansiosos y a la espera que la librería Material de Angular comience a utilizar estas características, para desde ya hacer uso de ella. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Jj2QnpiU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brdxnnu416cut9glg4b2.JPG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Jj2QnpiU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brdxnnu416cut9glg4b2.JPG" alt="CSS en Angular " width="880" height="602"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Empieza a usar las variables CSS&lt;/p&gt;

&lt;p&gt;La eliminación de la compatibilidad con &lt;strong&gt;IE11&lt;/strong&gt; allana el camino para algo que me entusiasma: las variables CSS, también conocidas como propiedades personalizadas CSS. &lt;/p&gt;

&lt;p&gt;Piensa en ello como la definición de una superficie **API **que los desarrolladores pueden utilizar para personalizar los estilos. Puedes proporcionar un conjunto de propiedades abiertas para orientar el tamaño de los márgenes o una gama de variables de color y permitir a los desarrolladores consumirlas y anularlas.&lt;/p&gt;

&lt;p&gt;Imagina que una biblioteca incluye un botón de compartir con un estilo personalizado:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;:root {
    --primary: pink;
    --accent: blue;
}

.share-button {
    background-color: var(---primary);
    color: var (---accent);
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Un usuario puede entonces implementar un estilo limpio utilizando variables CSS en el ámbito en que se utiliza este componente de la biblioteca para reasignar los colores primarios y de acento, y ver estos cambios visuales reflejados en su uso del botón de compartir:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;:root {
    --primary: green;
    --accent: purple; 
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  El futuro de la anulación de estilos
&lt;/h2&gt;

&lt;p&gt;Las Variables CSS abren la puerta a &lt;strong&gt;APIs&lt;/strong&gt; bien soportadas para la personalización de componentes, permitiendo a los desarrolladores alejarse de los &lt;strong&gt;overrides CSS&lt;/strong&gt; y de los ::ng-deep.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Es recomendable la introducción de variables personalizadas en las bibliotecas y dependencias para crear una superficie de API para la personalización de las bibliotecas sin la necesidad de &lt;strong&gt;::ng-&lt;/strong&gt;deep. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;La implementación de variables personalizadas permite a los desarrolladores tener un mayor control sobre su estilo y proporcionar un camino lejos de las anulaciones de CSS y ::ng-deep.&lt;/p&gt;

&lt;h2&gt;
  
  
  Variables CSS en Angular Material
&lt;/h2&gt;

&lt;p&gt;Estamos explorando las Variables CSS para abrir la superficie de la API de la tematización de Material y apoyar una mayor individualización de los componentes de Material Angular como parte de la expansión de los sistemas de personalización de Material Design.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;¿Acostumbra a personalizar Material de Angular en su proyecto? &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  La CLI de Angular puede ayudarte a estilizar Sass en línea en los componentes
&lt;/h2&gt;

&lt;p&gt;La v12 introdujo la opción de usar &lt;strong&gt;Sass inline&lt;/strong&gt; en tus componentes de Angular. &lt;br&gt;
La CLI ahora tiene una opción para proporcionar un &lt;strong&gt;inlineStyleLanguage&lt;/strong&gt; y compila Sass directamente desde tus componentes de Angular en el estilo.&lt;/p&gt;

&lt;p&gt;Esto es útil para los desarrolladores que utilizan componentes de un solo archivo o que quieren añadir pequeñas cantidades de estilo dentro de sus archivos de componentes.&lt;/p&gt;

&lt;p&gt;Para usar Sass, necesitarás especificar el lenguaje en tus configuraciones de construcción angular.json:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{ "projects": {
    "architect": {
        "build": {
            "options": {
                "styles": [
                    "src/styles.scss"
                    *
                ],
                "inlineStyleLanguage": "scss",
                ...
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Ahora puedes escribir Sass en tus @Componentes&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { component } from '@angular/core';

@component ({
    selector: 'app-root',
    template: '&amp;lt;h1&amp;gt;v12 has inline Sass!&amp;lt;/h1&amp;gt;',
    styles: [`
    $neon: #cf0;
    @mixin background ($color: #fff) {
        background: $color;
    }
    h1 {@incluide background (neon)} 
    `]
}) export class Appcomponent {}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Tailwind y otros PostCSS
&lt;/h2&gt;

&lt;p&gt;Angular v11.2 añadió soporte nativo para ejecutar TailwindCSS PostCSS con el CLI de Angular.Para habilitar TailwindCSS, ng actualizar a v11.2+ y luego:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Instala con yarn add -D tailwindcss&lt;/li&gt;
&lt;li&gt;Crea un archivo de configuración de TailwindCSS en el espacio de trabajo o en la raíz del proyecto
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// tailwind.config.js

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Inlining de CSS crítico
&lt;/h2&gt;

&lt;p&gt;Angular v12 también introdujo Critical CSS &lt;strong&gt;Inlining&lt;/strong&gt; para ayudar a garantizar que las aplicaciones de Angular ofrezcan las mejores métricas posibles de Core Web Vital. &lt;/p&gt;

&lt;p&gt;**&lt;br&gt;
¿Y a ti que tal te va con la implementación de estilos?**&lt;/p&gt;

</description>
    </item>
    <item>
      <title>¿Serán estas las 5 principales tendencias del desarrollo de software 2022?</title>
      <dc:creator>Leifer Mendez</dc:creator>
      <pubDate>Sun, 02 Jan 2022 10:59:29 +0000</pubDate>
      <link>https://dev.to/leifermendez/seran-estas-las-5-principales-tendencias-del-desarrollo-de-software-2021-369</link>
      <guid>https://dev.to/leifermendez/seran-estas-las-5-principales-tendencias-del-desarrollo-de-software-2021-369</guid>
      <description>&lt;p&gt;El año &lt;strong&gt;2022&lt;/strong&gt; viene con innovaciones y formas de utilizar la tecnología para obtener resultados positivos. Las necesidades tecnológicas y sociales están motivadas por las carreteras que veremos pronto. Muchas empresas se adaptan a la aceleración digital, que es una forma de pensar en nuevas formas de promover sus operaciones con excelentes resultados.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://codigoencasa.com/tag/cursos-gratis-programacion/"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FC25Ry9X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fa9zjpyp1xit23c5kode.gif" alt="Cursos gratis de programacion" width="480" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Algunas de las principales tendencias de desarrollo de software&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Blockchain
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;¿Qué es Blockchain?&lt;/strong&gt; Entre otras cosas, es una de las últimas palabras de moda. Blockchain también es un concepto que representa una gran revolución no solo en nuestra economía, sino en todo tipo de campos.&lt;/p&gt;

&lt;p&gt;Comprender lo que este bloque de bloques no es muy difícil, y como este concepto se usa cada vez más, queríamos hacer una especie de rápida introducción al Blockchain, para explicar lo que es, cómo funciona y qué es esta revolución. Ve delante del bloque de bloques.&lt;/p&gt;

&lt;p&gt;Aunque su uso está estrechamente vinculado a la tecnología &lt;a href="https://codigoencasa.com/criptomonedas-que-es-ventajas-riesgos-y-mas/"&gt;Crypto&lt;/a&gt;, se puede usar para otros tipos de actividades numéricas, como los contratos de NFT y más. Este bloque de bloques nos permite registrar transacciones y seguir los recursos en la red sin la necesidad de un intermediario para miles o millones de nodos que conforman la red (grupos distribuidos) son responsables de la verificación y la red. Autenticación. procedimiento. Es decir, se registrarán en un bloque nuevo que se agregará a la cadena.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--B150AUT2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://images.unsplash.com/photo-1561451213-d5c9f0951fdf%3Fcrop%3Dentropy%26cs%3Dtinysrgb%26fit%3Dmax%26fm%3Djpg%26ixid%3DMnwxMTc3M3wwfDF8c2VhcmNofDJ8fGJsb2NrY2hhaW58ZW58MHx8fHwxNjQxMDQ2MjE1%26ixlib%3Drb-1.2.1%26q%3D80%26w%3D2000" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--B150AUT2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://images.unsplash.com/photo-1561451213-d5c9f0951fdf%3Fcrop%3Dentropy%26cs%3Dtinysrgb%26fit%3Dmax%26fm%3Djpg%26ixid%3DMnwxMTc3M3wwfDF8c2VhcmNofDJ8fGJsb2NrY2hhaW58ZW58MHx8fHwxNjQxMDQ2MjE1%26ixlib%3Drb-1.2.1%26q%3D80%26w%3D2000" alt="Leifer Mendez Blockchain" width="880" height="495"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Evolución de la inteligencia artificial
&lt;/h2&gt;

&lt;p&gt;No hay una definición aceptada universalmente de qué medios de inteligencia artificial. En primer lugar, porque es una nueva ciencia cambiante y experimental. Y en consecuencia, porque no podemos definir exactamente qué es la inteligencia humana.&lt;/p&gt;

&lt;p&gt;En su forma más sencilla, AI es un intento de imitar la inteligencia humana utilizando la inteligencia de un bot o software. Pero es un concepto muy vago porque tiene muchas ramificaciones. Stuart Russell y Peter Norbig son cuatro tipos en 2009.&lt;/p&gt;

&lt;p&gt;En el campo Procesamiento de Lenguaje Natural (PNL), permite que las computadoras escriban programas de texto y software. AI le permite asegurar a los ingenieros de software para planificar las máquinas para hacer lo correcto y contratar otras funciones.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--t1FxD-K1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://images.unsplash.com/photo-1535378917042-10a22c95931a%3Fcrop%3Dentropy%26cs%3Dtinysrgb%26fit%3Dmax%26fm%3Djpg%26ixid%3DMnwxMTc3M3wwfDF8c2VhcmNofDEwfHxhcnRpZmljaWFsJTIwaW50ZWxpZ2VuY2V8ZW58MHx8fHwxNjQxMDQ2MjM4%26ixlib%3Drb-1.2.1%26q%3D80%26w%3D2000" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--t1FxD-K1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://images.unsplash.com/photo-1535378917042-10a22c95931a%3Fcrop%3Dentropy%26cs%3Dtinysrgb%26fit%3Dmax%26fm%3Djpg%26ixid%3DMnwxMTc3M3wwfDF8c2VhcmNofDEwfHxhcnRpZmljaWFsJTIwaW50ZWxpZ2VuY2V8ZW58MHx8fHwxNjQxMDQ2MjM4%26ixlib%3Drb-1.2.1%26q%3D80%26w%3D2000" alt="Leifer Mendez Inteligencia Artificial" width="880" height="602"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Ascendencia del JavaScript y TypeScript
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://codigoencasa.com/tag/nodejs/"&gt;JavaScript y TS&lt;/a&gt; son los idiomas más fáciles y usados ​​de la programación. En 2021 se estima que se mantendrá más solicitado en los lenguajes de programación web.&lt;/p&gt;

&lt;p&gt;Destino (TS) es un lenguaje de programación creado en un nivel anterior a JavaScript (JS). Esto significa que TyPeScript proporciona el idioma algunas funciones adicionales para escribir el código con errores menos simples y más fáciles para probar más ágil en síntesis y más fuertes.&lt;/p&gt;

&lt;p&gt;En nuestra comunidad, el objetivo es crear varios cursos estándar y proporcionar la posibilidad de que más personas puedan aprender a integrar este idioma en sus proyectos.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9I8sHVOr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://images.unsplash.com/photo-1552308995-2baac1ad5490%3Fcrop%3Dentropy%26cs%3Dtinysrgb%26fit%3Dmax%26fm%3Djpg%26ixid%3DMnwxMTc3M3wwfDF8c2VhcmNofDY0fHxkZXZlbG9wZXJ8ZW58MHx8fHwxNjQxMDQ2MzA5%26ixlib%3Drb-1.2.1%26q%3D80%26w%3D2000" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9I8sHVOr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://images.unsplash.com/photo-1552308995-2baac1ad5490%3Fcrop%3Dentropy%26cs%3Dtinysrgb%26fit%3Dmax%26fm%3Djpg%26ixid%3DMnwxMTc3M3wwfDF8c2VhcmNofDY0fHxkZXZlbG9wZXJ8ZW58MHx8fHwxNjQxMDQ2MzA5%26ixlib%3Drb-1.2.1%26q%3D80%26w%3D2000" alt="Leifer Mendez Blockchain" width="880" height="587"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Aprende de CI y CD
&lt;/h2&gt;

&lt;p&gt;CI/CD es una de las mejores prácticas que puede implementar un equipo de desarrollo. Esta también es una práctica recomendada  ágil ya que permite a los equipos de desarrollo de software concentrarse en cumplir con los requisitos comerciales de calidad del código y de seguridad ya que los pasos de implementación están automatizados.&lt;/p&gt;

&lt;p&gt;Integración continua (CI) es una filosofía de codificación y un conjunto de métodos que motivan a los equipos de desarrollo a realizar pequeños cambios y probar el código con regularidad en  repositorios de control de versiones. Dado que la mayoría de las aplicaciones modernas requieren el desarrollo de código en diferentes plataformas y herramientas el equipo necesita un mecanismo para integrar y validar los camios.&lt;/p&gt;

&lt;p&gt;El objetivo técnico de CI es establecer un método consistente y automatizado para crear empaquetar y probar aplicaciones. Con la coherencia del proceso de integración es más probable que los equipos realicen cambios de código con más frecuencia lo que conduce a una mejor colaboración y una mejor calidad del software.&lt;br&gt;
La entrega continua (CD) comienza cuando finaliza la integración continua. Los CD transfieren automáticamente las aplicaciones a  entornos de infraestructura específicos. La mayoría de los equipos trabajan con varios entornos fuera de la producción como los  de desarrollo y pruebas y los CD garantizan que exista una forma automatizada de enviarles  camios de código.&lt;/p&gt;

&lt;p&gt;La herramienta CI  CD ayuda a almacenar configuraciones específicas del entorno que deben enviarse con cada versión. CI/CD Automación realiza las llamadas de servicio necesarias a  servidores de datos y otros servicios que pueden requerir reinicios u otros procesos a seguir  cuando se implementa la aplicación.&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/RC896DmNV-s"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  UI/UX y su importancia
&lt;/h2&gt;

&lt;p&gt;UX Design también conocido como (Diseño de experiencia de usuario) tiene como objetivo crear productos que satisfagan las necesidades del consumidor o usuario final.&lt;/p&gt;

&lt;p&gt;En pocas palabras se espera que UX obtenga las calificaciones más altas de satisfacción en la experiencia del usuario. Implementa todo tipo de estrategias  donde cada decisión que se tome debe basarse en las necesidades propósitos motivos expectativas y capacidades del usuario.&lt;/p&gt;

&lt;p&gt;UI Interfaz de usuario (sus siglas en inglés User Interface) o en español User Interface es una vista que permite al usuario interactuar de manera efectiva con el sistema. Es la síntesis de elementos visuales de modelos interactivos de arquitectura de información.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Pm_56Fmo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://codigoencasa.com/content/images/2022/01/UI-vs-UX-ketchup_2017_02.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Pm_56Fmo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://codigoencasa.com/content/images/2022/01/UI-vs-UX-ketchup_2017_02.jpg" alt="Leifer Mendez UX/UI" width="880" height="880"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Recuerda que si quieres aprender programación y tener cursos gratis de programación puedes visitar el canal de youtube&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/51c5eK4reU0"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>angular</category>
      <category>javascript</category>
      <category>programming</category>
      <category>typescript</category>
    </item>
    <item>
      <title>🤔 My repo is valid for Hacktoberfest?</title>
      <dc:creator>Leifer Mendez</dc:creator>
      <pubDate>Tue, 29 Sep 2020 07:37:31 +0000</pubDate>
      <link>https://dev.to/leifermendez/my-repo-is-valid-for-hacktoberfest-4219</link>
      <guid>https://dev.to/leifermendez/my-repo-is-valid-for-hacktoberfest-4219</guid>
      <description>&lt;p&gt;Hello, everybody!&lt;/p&gt;

&lt;p&gt;I'm new in the world of events 😀 and I'm seeing that very soon there is the Hacktoberfest event where OpenSource participation is encouraged. I'm very excited to participate in open source projects or create those I can to improve the community. I currently have some projects that have been useful to a part of the community and I would like to know if these projects are valid for the Hacktoberfest.&lt;/p&gt;

&lt;p&gt;My repos:&lt;br&gt;
&lt;a href="https://github.com/leifermendez/ngx-copilot"&gt;https://github.com/leifermendez/ngx-copilot&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/leifermendez/swipe-angular-list"&gt;https://github.com/leifermendez/swipe-angular-list&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/leifermendez/twitch-login-sdk"&gt;https://github.com/leifermendez/twitch-login-sdk&lt;/a&gt;&lt;/p&gt;

</description>
      <category>hacktoberfest</category>
      <category>angular</category>
      <category>github</category>
      <category>opensource</category>
    </item>
    <item>
      <title>TOOL How to improve the UX in our projects.</title>
      <dc:creator>Leifer Mendez</dc:creator>
      <pubDate>Wed, 29 Jul 2020 17:47:41 +0000</pubDate>
      <link>https://dev.to/leifermendez/tool-how-to-improve-the-ux-in-our-projects-4kpj</link>
      <guid>https://dev.to/leifermendez/tool-how-to-improve-the-ux-in-our-projects-4kpj</guid>
      <description>&lt;p&gt;If you have developed projects that go out to the public, surely in many occasions you found yourself with the problem that no matter how easy you thought you made your interface the users still don't understand. 😒&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/y1WDIwAZRSmru/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/y1WDIwAZRSmru/giphy.gif" alt="alt text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It can be quite frustrating and can even discourage you as a developer.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Hey, wait&lt;/strong&gt;,😁 everything is solved and we just have to make it easy for the user to get started and show him the way. &lt;/p&gt;

&lt;p&gt;I bring you a tool that I developed for the developers of Angular Front which I currently keep in use in 4 public projects and the rating of the users regarding the performance increased significantly.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://camo.githubusercontent.com/76d7c5d2ee25df570445a8f7f8a7c4085c06ae99/68747470733a2f2f692e696d6775722e636f6d2f6d4d644d566a712e676966" class="article-body-image-wrapper"&gt;&lt;img src="https://camo.githubusercontent.com/76d7c5d2ee25df570445a8f7f8a7c4085c06ae99/68747470733a2f2f692e696d6775722e636f6d2f6d4d644d566a712e676966" alt=""&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://camo.githubusercontent.com/d28172b6c86e08330f1e4201ef51c036291a597e/68747470733a2f2f692e696d6775722e636f6d2f485357546746712e676966" class="article-body-image-wrapper"&gt;&lt;img src="https://camo.githubusercontent.com/d28172b6c86e08330f1e4201ef51c036291a597e/68747470733a2f2f692e696d6775722e636f6d2f485357546746712e676966" alt=""&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you want to collaborate in the project you are welcome, I wait for your comments to improve.&lt;/p&gt;

&lt;p&gt;I hope it will be useful to other people, then I will leave the repository and a demo. Remember to leave a star ⭐ if you like it&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://github.com/leifermendez/ngx-copilot"&gt;https://github.com/leifermendez/ngx-copilot&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://stackblitz.com/edit/ngx-copilot"&gt;Demo live&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>angular</category>
      <category>ux</category>
      <category>design</category>
    </item>
  </channel>
</rss>
