#91 Tus URLs pueden ser hermosas

Tus URLs pueden ser hermosas

Y lo sabes. 😏 ¿Qué es eso de misitioweb.tld/p/123123? No lo hagas por el SEO, hazlo por los usuarios que pueden ver las URLs y se sienten seguros. Lo sentimos usuarios de Safari. 🤷‍♂️ Hazlo por la personalización y, bueno sí, también hazlo por el SEO.

Un sitio web accesible, no puede ser hermoso

Falso. 👎️ Un sitio web puede ser accesible y estéticamente agradable. 👍️ Pero involucra retos, involucra comunicación entre los equipos de diseño, ingeniería y stakeholders o management. Involucra buena planeación y quizás por eso, es difícil. Pero los frontenderos vivimos de retos 💪 y aquí te dejamos los pasos para que empieces a resolverlo.

HERRAMIENTA 🛠️ 
Syntax.js

SI tienes un blog o sitio que muestras código, por favor, ponle una buena biblioteca de coloreado de sintaxis, la gente que lo lee te lo agradecerá, y tu yo de 3 meses en el futuro, también.

Animotion

Puedes construir CSS animaciones con herramientas no-code. Y puedes hacer eso con esta herramienta que te hará la vida más fácil, nada mas que, toma en cuenta que sigue en fase beta, pero puedes usarla y dar feedback para mejorarla.

EL RINCÓN DE CSS 👨‍💻 
La propiedad CSS que no sabias que necesitabas

Hay una nueva propiedad que no conocíamos 🤯 y pinta que puede ser muy útil, pero no nos creas a nosotros, créele a Francesco y este articulo que compartió.

TIPOGRAFÍA 🔠 
Berkeley Mon Typeface

Se honesta u honesto, ¿te ha gustado la sección de tipografías que estamos incluyendo? 🥺🙏🏻 Porque queremos seguir compartiendo contigo las tipografías que nos gustan y nos inspiran, y queremos que también a ti te inspiren.

NOTICIA 📰 
Resultados del UX tools survey 2023

Hace poco, compartimos esta encuesta para que la llenaras, si tu también hacías diseño tanto como parte de tu trabajo, como por hobby, y ya están los resultados. Y si no la llenaste, esto te puede animar a que comiences a diseñar utilizando algunas de las herramientas mas populares que hay en el mercado y veas hacia donde se mueven las tendencias.

VIDEO 📹️ 
¿Que es HRM?

¿Te cuesta entender conceptos leyendo artículos?, aquí te compartimos un link para que lo veas en video. 👀 

UN DÍA COMO HOY 🗓️ 

El 11 de diciembre de 2008, La Fundación para el Software Libre (FSF ) anuncia que presentó  una demanda por violación de derechos de autor contra Cisco Systems. Cisco utilizó programas como: GCC, binutils, y la Biblioteca de C de GNU y al hacerlo no facilitó a sus usuarios el código fuente negando a sus usuarios su derecho a compartir y modificar el software. 😎

El 11 de diciembre de 2008, Google lanza al público general la primera versión estable e Google Chrome para el sistema operativo Windows. Esto significa que Google considera que el navegador se encuentra lo suficientemente completo y que se ha sometido a suficientes pruebas, como para pasar de la última versión beta a una versión estable. El primer lanzamiento de Google Chrome fue el 02 de septiembre de 2008 y es lanzado como versión beta únicamente para Microsoft Windows.

VACANTE 💼 
Desarrollador React Native

Ubicación: Argentina (Remoto)
Empresa: SOOFT Technology
Requisitos: Formación académica en Ingeniería en Sistemas, Ciencias de la Computación, o carreras afines.Experiencia sólida en el desarrollo de aplicaciones móviles utilizando React Native y familiaridad con las diferencias específicas de las plataformas iOS y Android. Amplio conocimiento de JavaScript, ES6+ y la arquitectura de componentes de React Native y tecnologías relacionadas como Redux, React Navigation, Axios, entre otros.

Postúlate aquí. 🤞 

CHALLENGE ⚔️ 

Markdown es un lenguaje de marcado ligero que se ha vuelto popular debido a su simplicidad y legibilidad. Su capacidad para convertirse fácilmente en HTML lo hace útil en muchas aplicaciones web. Tu tarea es crear una función que tome una cadena de texto en Markdown y la convierta en HTML correspondiente.

Descripción del Reto:

• La función debe aceptar una cadena de texto en Markdown.

• Debe manejar al menos los siguientes elementos de Markdown: encabezados (#), énfasis (* o _), y enlaces ([texto](URL)).

• Debe devolver una cadena de texto que represente el HTML equivalente.

Ejemplo: La cadena en Markdown:

# Encabezado
Este es un texto con *énfasis* y un [enlace](http://ejemplo.com).

Debería convertirse en:

<h1>Encabezado</h1>
<p>Este es un texto con <em>énfasis</em> y un <a href="http://ejemplo.com">enlace</a>.</p>

Consejos:

• Puedes utilizar expresiones regulares para identificar los diferentes elementos de Markdown.

• Utiliza el método replace de las cadenas para transformar el Markdown en HTML.

Este desafío evalúa tu habilidad para trabajar con cadenas y expresiones regulares en JavaScript, así como tu comprensión de cómo se pueden manipular y convertir los formatos de datos.

Ver el resultado 👀

RESULTADO 🧐 

function markdownAHtml(markdown) {
    // Convertir encabezados
    markdown = markdown.replace(/^# (.*$)/gim, '<h1>$1</h1>');
    markdown = markdown.replace(/^## (.*$)/gim, '<h2>$1</h2>');
    markdown = markdown.replace(/^### (.*$)/gim, '<h3>$1</h3>');

    // Convertir énfasis
    markdown = markdown.replace(/\*([^\*]+)\*/g, '<em>$1</em>');
    markdown = markdown.replace(/_([^_]+)_/g, '<em>$1</em>');

    // Convertir enlaces
    markdown = markdown.replace(/\[([^\]]+)\]\(([^\)]+)\)/g, '<a href="$2">$1</a>');

    // Convertir párrafos
    markdown = markdown.replace(/^([^\n]+)$/gim, '<p>$1</p>');

    // Eliminar saltos de línea adicionales
    markdown = markdown.replace(/\n$/g, '');

    return markdown;
}

// Ejemplo de uso
const markdownTexto = `
# Encabezado
Este es un texto con *énfasis* y un [enlace](http://ejemplo.com).
`;

console.log(markdownAHtml(markdownTexto));

Tu feedback nos ayuda a mejorar

Por favor elige una opción y dinos lo que te gustó y lo que no. Leemos todas las respuestas 👀