#180 Diseñando con integridad, el librito de dark patterns para diseñadores con ética

Diseñando con integridad, el librito de dark patterns para diseñadores con ética

Un dark pattern, es una elección de diseño intencionalmente hecha para engañar o manipular al usuario en favor de que haga algo que no es en su mejor interés. Y quizás aquí pensaste en muchos ejemplos, como formularios para cancelar un servicio, o dejar de pagarlo, y que son muy difíciles de usar, o componentes que muestran precios que no son los precios finales. Y aunque estos parecieran ser la elección obvia para retener usuarios, la verdad es que hace lo contrario y afecta la lealtad y confianza de tus usuarios. Si quieres ganarte a los usuarios de tu servicio o producto, pensar en ellos siempre te ayudara.

Guía práctica usar Shadow DOM

Con el lanzamiento de Firefox 123, ya es oficial, todos los navegadores mayores soportan declarative Shadow DOM 🥳. Esto permitirá implementar mejor Shadow DOM en HTML, y a partir de aquí hay que subirse a la ola, porque los Web Components nativos are coming!

EL RINCÓN DE LA TIPOGRAFÍA 🔠 
El misterio de la tipografia Dune

Si tienes redes sociales, has escuchado de Dune, y si te ha interesado tal vez comenzaste a leer las novelas. Sabías que la tipografía que los fans conocen como tipografía Dune, no se llama así. Si te interesa conocer como fue que esta tipografía comenzó a ser usada en las portadas de las novelas originales, tienes que leer este artículo.

GUÍA 📖 
Utilizando localStorage en aplicaciones modernas

Si necesitas almacenamiento en tu sitio web del lado de cliente, y no es tanta información, la solución simple es localStorage, que tiene todo lo básico que necesitas para proyectos pequeños. Por eso, debes reconocer cuando sí y cuando no utilizarlo.

VIDEO 📹️ 
CSS4 ya viene

Parece que tendremos CSS4 antes que Express.js 5. Veremos si sale este año aprovechando que termina en 4.

NOTICIA 📰 
Actualizaciones de la reunión 100 del comité TC39

JavaScript, o más específicamente ECMAScript, sigue creciendo como lenguaje gracias a los esfuerzos de la comunidad. Y como muestra de que la comunidad esta en lo suyo, ésta fue la centésima reunión donde se discutieron los avances en las siguientes APIs y características del lenguaje.

LANZAMIENTO 🚀 
Apache ECharts

Apache no es un servidor http. Apache es una fundación que tiene tantos proyectos Open Source bajo su resguardo, que a veces es difícil saber cuántos son. Como en este caso con ECharts, que es una biblioteca de visualización y acaba de lanzar su versión 5.5 con soporte para ESM, Server Side Rendering y más. Si necesitas una alternativa a las tradicionales bibliotecas de visualización, aquí tienes una alternativa.

VACANTE 💼 
Desarrollador Web Full-Stack Senior

Ubicación: América Latina (Remoto)
Empresa: Defontana
Requisitos: .Net Core 3.1 o superior. Net Framework. Net6+. Entity Framework. NodeJs. Desarrollo y Administración en AWS (Lambda, API Gateway, DynamoDB, S3, EC2, Step Functions). CDK/Serverless Framework. SQL. React. Angular 2+. TypeScript, JavaScript. Conceptos de Desarrollo Web (Frontend, Backend, HTML, CSS, API RESTful, Autenticación, Requests, CORS, etc). SQL Server. Git.

Buscamos un desarrollador web Full Stack Senior con experiencia Netcore/Net 6+/NodeJs, Angular/React, SQL . También se requiere que posea experiencia en AWS. Sus funciones serán implementar nuevos productos y dar soporte a las aplicaciones solicitadas por clientes de Defontana.

Da click aquí para conocer más sobre esta vacante.

RESULTADO DEL CHALLENGE DE AYER 🧐 
¡Gracias a los que contestaron el challenge de ayer! Aquí te dejamos nuestra respuesta:

Para contar la cantidad de vocales en una cadena de texto y retornar ese número, puedes utilizar el siguiente código en JavaScript, el cual hace uso de una expresión regular para identificar las vocales en la cadena, sin importar si son mayúsculas o minúsculas:

function contarVocales(cadena) {
    // Utilizar una expresión regular para encontrar todas las vocales en la cadena
    const coincidencias = cadena.match(/[aeiou]/gi);

    // Si hay coincidencias, retornar su número, de lo contrario retornar 0
    return coincidencias ? coincidencias.length : 0;
}

// Ejemplos de uso
console.log(contarVocales("Hola Mundo")); // Debería imprimir 4
console.log(contarVocales("AEIOU")); // Debería imprimir 5
console.log(contarVocales("bcdfghjklmnpqrstvwxyz")); // Debería imprimir 0

Explicación del Código:

• La función contarVocales acepta un parámetro cadena, que es el texto en el que se contarán las vocales.

• Dentro de la función, se usa el método match junto con una expresión regular para buscar todas las ocurrencias de vocales (a, e, i, o, u) en la cadena. La expresión regular /[aeiou]/gi es insensible a mayúsculas y minúsculas debido a la bandera i, y la bandera g asegura que la búsqueda sea global en toda la cadena.

• El resultado de match es un array que contiene todas las vocales encontradas en la cadena, o null si no se encontró ninguna vocal.

• La función retorna la longitud de este array si se encontraron vocales (indicando el número total de vocales en la cadena), o 0 si match retorna null.

• Finalmente, se muestran ejemplos de llamadas a la función contarVocales con diferentes cadenas de texto para ilustrar su funcionamiento.

CHALLENGE DE HOY ⚔️ 
Escribe una función en JavaScript que elimine todos los elementos duplicados de un array y retorne un nuevo array con solo elementos únicos.

1. Implementa una función eliminarDuplicados que acepte un array como argumento.

2. La función debe crear y retornar un nuevo array que contenga solo elementos únicos del array original.

3. Asegúrate de que el orden de los elementos en el array resultante se mantenga según su primera aparición en el array original.

Ejemplo de uso:

console.log(eliminarDuplicados([1, 2, 2, 3, 4, 4, 5])); // Debería retornar [1, 2, 3, 4, 5]
console.log(eliminarDuplicados(['apple', 'banana', 'apple', 'orange', 'banana'])); // Debería retornar ['apple', 'banana', 'orange']

• Considera utilizar estructuras de datos como Set para facilitar la eliminación de duplicados, teniendo en cuenta que Set almacena solo valores únicos.

• También puedes abordar este problema mediante el uso de métodos de array como filter junto con indexOf o includes para mantener el primer elemento de cada valor encontrado y eliminar los duplicados.

Comparte tu respuesta en redes sociales y etiquétanos (@frontenderos), compartiremos nuestra respuesta en el issue de mañana. 😎 

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 👀