Categorías
React Native

Animaciones y contenido de precarga para React

A lo facebook Componente que carga un SVG para crear loaders mientras la API nos da una respuesta. : https://github.com/danilowoz/react-content-loader Y no hay que diseñarlos, ni crear los SVGs si no quieres, existe una extensa galería con varios formatos: items, cards, imágenes, tablas, etc. Y una herramienta de creación rápida: https://skeletonreact.com/ Para leer más del […]

Categorías
General

Añadir espacio de disco en un CENTOS (y otros)

Unas anotaciones a modo de chuleta, más info en las referencias de abajo. Cuando ampliamos espacio en una máquina virtual hay que tocar cositas en el LVM ( Logical Volume Manager ) para que tu linux sepa que tiene ese disco, y lo puedas usar. fdisk -l te mostrará el espacio nuevo que has añadido […]

Categorías
iOS Mobile React Native

Explorar posibilidades de integración contínua para publicar Apps iOS

https://medium.com/@karaiskc/archive-and-export-ios-app-with-github-actions-b44f676e4bf9

Categorías
Android Mobile React Native

Como exportar SVG limpios desde Illustrator para Android Studio

Esto es un repost sobre configuración de exportación de SVGs para Adobe Illustrator. Traduzco literalmente el título del artículo original de Medium, es sencillo pero realmente útil. Dejo enlace: https://medium.com/@irynasahaidak/how-to-export-clean-svg-from-adobe-illustrator-for-android-studio-6ff542658956

Categorías
General

Incidencias al subir por primera vez a la App Store

Con Apple a veces «suceden cosas». Problema: No existe el App ID (o bundle… o Id del Pack) al intentar subir la primera BuildIr a xCode > Seleccionar Proyecto… Tab Signing & Capabilities y AÑADIR una capability (Push). Luego si no la utilizas se puede quitar. Con esto, se crea correctamente (si el usuario tiene […]

Categorías
General

wp_list_pluck: extraer array de valores desde un array de arrays.

No es un traba lenguas, paso a explicarlo: Imagina que tienes un array que a su vez contiene otros arrays, que todos tienen las mismas propiedades. Ej: Y nosotros buscamos tener todos los nombres de las recetas que contiene el array, tal que así: Para ello podemos usar la función de WordPress wp_list_pluck pasando como […]

Categorías
WordPress

Expresiones regulares recurrentes

Listado de expresiones regulares que se irá completando con el tiempo. Eliminar párrafos que sólo contienen una imagen en html

Categorías
React Native

React Native: Cheatsheet para desarrolladores novatos

Chuleta —Cheatsheet— en permanente actualización Navegación React Navigation Entender los stacks de navegación Estados Get pro with React SetState in 10 minutes Fuentes customizadas Ultimate guide Sonido The State of Audio Libraries in React Native Debug en dispositivo Running on device Android: Borrar bundle y generar uno nuevo VSCode Preparar VSCode como IDE para React […]

Categorías
General

Herramientas de validación de accesibilidad

Si bien la accesibilidad web no se limita (o no debería) a realizar tests automáticos, sino a la incorporación de buenas prácticas desde el inicio de la vida de un proyecto (en la fase de evaluación de viabilidad, toma de requisitos…), hay herramientas que permiten ayudar en proyectos ya construidos para tomar decisiones. Quizá WAVE […]

Categorías
React Native

Maldito error de autolink en iOS de react-native-vector-icons

Para resolver el error de Build de iOS 11 una vez que hemos instalado la librería React Native Vector Icons, hay que eliminar las entradas duplicadas en Copy Bundle Resources desde Xcode : https://github.com/oblador/react-native-vector-icons/issues/1074 «So to fix the problem, just remove the font files from Copy Bundle Resources, so that they are only in [CP] Copy […]

Categorías
React Native

React Navigation Stacks

Dos ejemplos combinando pilas de navegación para comprender como montarlas correctamente, incluyendo Stacks, Drawers, Tabs… sin volvernos demasiado locos. Cierto código es antiguo, ya sabes, RN está en constante actualización, pero nos servirá igualmente para entender la lógica que deben seguir las navegaciones más comunes en el ecosistema móvil. A la hora de llevarlo a […]

Categorías
Recursos

Videoconferencias seguras y libres

https://jitsi.org/ Multiplataforma, mantenido por la comunidad. Puedes crear una sala aquí: https://meet.jit.si/ o usar las Apps móviles. Es el sustituto perfecto para Skype, Hangouts, incluso appear.in, por su simplicidad (no requiere registro) Además, para desarrolladores, tiene un API que puedes usar para embeber la vídeo en tu web o App… ¿Qué más?

Categorías
React Native

Preparar VSCode para React Native

Hay otros IDE dedicados al desarrollo en esta tecnología, como Nuclide o DECO pero pensando en una solución más global, acostumbrarse a trabajar con VSCode puede ser una elección más acertada. Dejo un enlace con los pasos a llevar a cabo para facilitar el desarrollo en React Native con Visual Studio Code. https://medium.com/react-native-training/vscode-for-react-native-526ec4a368ce El mismo […]

Categorías
Recursos

GeoJSON de países por continente

Aplicación web para descargar GeoJSON de países por continente.

Categorías
UX

From Data to Viz

Un excelente recurso para llegar a ejemplos reales y representar datos con D3.JS , ayudantote a elegir el gráfico apropiado para tus datos. https://www.data-to-viz.com/ Tras la elección y navegación, te lleva a https://www.d3-graph-gallery.com/ para el código.

Categorías
WordPress

Grids para Gutenberg

De los plugins más intuitivos y menos pesados para gestionar columnas y crear sistemas de cuadrícula para Gutenberg.

Categorías
UX

El contraste correcto

Una forma de identificar si el texto sobre el color de fondo es legible y accesible.https://color.review/

Categorías
General WordPress

Amcharts + From data to Viz

Amcharts Librería de visualización de datos + plugin de WordPress, unos efectos muy bien conseguidos, con una intro bastante currada en su web, hecha a base de sus propias herramientas de visualización. AmCharts 4 incluye gráficos y mapas de geolocalización. From data to Viz Es una web donde te guían hacia el gráfico más apropiado […]

Categorías
UX

Techna Sans

Techna Sans is a bold, semi-geometric sans-serif typeface. With its low contrast and sharp stroke endings, it has an authentic and modern look, making it perfect for branding and headlines. The typeface has very tight spacing, intended mainly for big text. Licensed under the SIL Open Font License, Techna Sans is free both for personal […]

Categorías
UX

UXcellence

Compilación de artículos, libros y otros materiales para una UX excelente, muy destacable la sección destinada a accesibilidad:https://uxcellence.com/

Categorías
WordPress

Accesibility First

PUXL is a free and open-source and eco-friendly library to create front-end Web interfaces. It helps you build accessible and responsive sites with lightweight HTML. Live accessibility errors detection: mark the elements that fail and include the solution ready to copy, paste and solve. Automatically calculates the perfect color tone that passes the accessible contrast tests. […]

Categorías
WordPress

Max Mega Menu para WordPress

Este plugin resuelve de manera bastante eficaz la creación de un menú WP como ‘mega menu’. Permite habilitar o deshabilitarlo, agregar widgets al menú y personalizar el comportamiento con CSS y sus propios ajustes. No tenemos porqué preocuparnos por los móviles porque está contemplada la versión responsive. Eso sí si queremos opciones avanzadas en un […]

Categorías
UX

ETC Triespace fuente variable gratuita

La función ETC pone a disposición gratuita –que no libre– la fuente monoespaciada Triespace en su versión variable que ellos mismos están utlizando en su web. Aunque es monospaciada de aspecto, tiene caracteres algo más estrechos y otros más anchos para mejorar la legibilidad. La fuente variable está disponible en 9 pesos y 5 anchos. […]

Categorías
UX

Mapas con grandes conjuntos de datos

kepler.gl es una herramienta código abierto de análisis de datos geo–espacial que permite la carga y filtrado de datos a gran escala que destaca por una experiencia y diseño muy trabajado. Utilizada por Uber y adaptada por organizaciones como UNICEF y RedHat bajo el nombre de proyecto Magic Box. Un artículo para leer más sobre […]

Categorías
UX

Storytelling + d3js

Recursos interesante para hacer diseño orientado a datos. Utilización del gráfico de cuerdas d3js para ir representado datos paso a paso, a la vez que se le da contexto a los datos. https://www.visualcinnamon.com/2014/12/using-data-storytelling-with-chord.html Un ejemplo representando datos de refugiados: https://blog.csaladen.es/refugees/ Uso de otros gráficos En este ejemplo vemos como a lo largo de la página […]

Categorías
General Recursos

Enlaces Interesantes Febrero ’19

Librería de patrones para productos de salud mental (y salud en general): https://www.designpatternsformentalhealth.org/ Leyes de la UX: https://lawsofux.com/ Icon Jar para recoger todos tus iconos: https://geticonjar.com/Unicons, es una colección de más de 1000 line-icons con un estilo rounded en svg perfectos para UI.: https://iconscout.com/unicons Para generar fuentes de iconos: http://fontello.com/ IBM Design Language, merece la […]

Categorías
Recursos UX

Colección Tipográfica Febrero ’19

A typeface designed to mimic the national park service signs that are carved using a router bit.: https://nationalparktypeface.com/ Fundición con bonitas fuentes a buen precio incluso algunas gratuitas http://atipofoundry.com/ Slab Zilla Zilla Slab is Mozilla’s core typeface, used for the Mozilla wordmark, headlines and throughout their designs. A contemporary slab serif, based on Typotheque’s Tesla, […]

Categorías
WordPress

Optimizar imágenes en WordPress

Vale que hoy día hay como una obsesión por el WPO (Web Performance Optimization), porque la gente tiene que vender su película y eso. Y sí, está bien que una página cargue los más rápido posible, pero sin obsesionarse… Sin embargo, hay casos clarísimos en los que hay que hacer algo: si por ejemplo tienes […]

Categorías
Recursos

GeoJSON con los polígonos de continentes, países, comunidades autónomas y provincias

Repositorio GitHub que contiene los poligonos en coordenadas de todos los países, continentes, provincias… https://github.com/deldersveld/topojson/

Categorías
Recursos UX

Colección tipográfica Enero ’19

Open-source Bodoni Revival Majör Mono Display is a monospaced geometric sans serif all-uppercase typeface which also has a complete set of constructivist display characters with a playful attitude. Baskervville is a revival of Jacob’s revival of Baskerville’s typeface PT Root UI is a special part of the PT Root typeface family. It consists of four […]

Categorías
UX

Buenas prácticas user onboarding y estados vacíos

Enlazo un artículo de James Gill sobre cómo diseñar procesos de onboarding y estados vacíos para hacer más fácil al usuario la andadura por el producto digital en el que estamos trabajando. https://www.gosquared.com/blog/user-onboarding-best-practices

Categorías
WordPress

Wooprice Calculator Pro

Creo que es la primera vez que recomiendo un plugin de pago para WordPress, pero es que este me resultó casi magia cuando entendí como funciona. Hay versión free, pero no es nada espectacular, lo increíble es la versión pro (unos 50$ para 3 sites, que es decente): tienes un producto con tarifas megacomplejas en […]

Categorías
Recursos

Open Street Maps Frameworks

Además de Mapbox y GoogleMaps qxisten alternativas para trabajar con mapas muy flexibles basadas en JavaScript. OpenLayers librería muy interesante para crear todo tipo de mapas: https://openlayers.org Maptalks permite trabajar con mapas en 2D y 3D: https://maptalks.org/. Cuenta con plugins desarrollados por usuarios para interacción con D3js: https://maptalks.org/plugins.html. Leaflet con layers, markers e infowindows personalizables: […]

Categorías
General

Remove Image Background…Aumático

….y funciona bastante bien con la mayoría de las fotos. Es mágico. https://www.remove.bg/

Categorías
General UX

Archia de atipo

Hace tiempo que seguimos los trabajos de atipo foundry y su formato de distribución de fuentes. Archia es una slab con serifas y partes de tipo curiosamente combinadas en formas curvas y rectas. http://atipofoundry.com/fonts/archia

Categorías
General WordPress

Cargar los CSS de Elementor en header

Cuando usamos bloques de Elementor como templates (headers o footers) y los cargamos con actions desde nuestro functions.php, los estilos personalizados son encolados por Elementor en el footer, esto produce flickerings y cargas de elementos css con lag. Para solucionarlo y llevarnos todos los estilos CSS producidos por Elementor a la cabecera tendremos que encolar […]

Categorías
General UX

unDraw: Open Source Illustrations

Un proyecto open source de la ilustradora Katerina Limpitsouni que por el nombre parece pretender ser el unsplash de las ilustraciones rollo flat que se lleva ahora en todas las compañías de seguros médicos y startups. Parece que está bien mantenido, actualizado y que tiene un buscador que funciona bastante bien. Se pueden usar en […]

Categorías
General

Old Book Illustrations

Recurso para ilustrar o aplicaciones gráficas. Se trata de ilustraciones y grabados antiguos: https://www.oldbookillustrations.com/ Sobre los derechos de uso esto es lo que comentan desde la webOld Books Illustrations We don’t limit the use of the illustrations available on our site, but we accept no responsibility regarding any problem, legal or otherwise, which might result […]

Categorías
UX

El Arte del DataVisualization

Referencias de auténticos currazos a todos los niveles en webs de visualización de datos. https://districtmobility.org/ http://www.okela.org/es/red https://hellosunapp.com/ http://histography.io/ http://rhythm-of-food.net/ http://nycfoodiverse.com/ http://www.brandlovescore.com/ http://beta.wind-and-words.com/ https://searchingforsyria.org/es/ https://datadesign.studio/ https://pudding.cool/ (The Pudding explains ideas debated in culture with visual essays.) https://labs.strava.com/ Más Referencias Awwwards: https://www.awwwards.com/websites/data-visualization/?page=1 10 Websites with Data Visualization Driving User Experience: https://designmodo.com/data-visualization/ AnimeJS, librería javascript para dar vida […]

Categorías
Android

Realm y las migraciones forzosas

Se ha dado la incidencia de que en algunos dispositivos físicos, una versión de la base de datos Realm de una aplicación se ha mantenido al desinstalarla. De este modo, al volver a instalar la aplicación, si la base de datos tiene algún elemento nuevo o modifica en algo a la anteriormente creada, no llega […]

Categorías
General UX

Ritmo vertical en tipografía web

Artículo para calcular correctamente un buen ritmo vertical en la tipografía de nuestra web: https://24ways.org/2006/compose-to-a-vertical-rhythm/ Herramientas Calcula la escala de tamaños tipográficos según el ratio y tamaño base de tu texto: Modular Scale. Herramienta similar a la anterior en la que puedes cargar tipografías de Google Fonts: Type Scale Cálculo del grid para ritmo vertical: […]

Categorías
Android

Cuando las APKs de Android no actualizan los cambios

Recientemente nos hemos encontrado con un problema en las actualizaciones del código en las APKs extraídas. Este problema reside en que existen dos archivos (index.android.bundle y index.android.bundle.meta) en la carpeta .android/app/src/main/assets que tenemos que eliminar y volver a crear cada vez que queramos sacar una APK nueva para Android. Con la terminal abierta en el directorio […]

Categorías
Recursos

Variables en Postman

El uso de variables en Postman nos sirve para no tener que repetir o cambiar los datos de referencia para todos los endpoints que tengamos. Para datos de usuario, tokens, etc. https://www.getpostman.com/docs/v6/postman/environments_and_globals/variables

Categorías
General

Web link a un contacto de WhatsApp específico

Para crear un enlace en nuestra web que nos abra la aplicación WhatsApp y una ventana de chat con el contacto o número de teléfono especificado. En otras palabras poner un enlace estilo Contáctame por WhatsApp (Es un enlace de prueba con un teléfono ficticio). Para añadir un prefijo, por ejemlo de país simplemente ponedlo […]

Categorías
General Recursos UX

Generar guías de estilo basadas en diseño atómico

Generador de Guías de estilos basada en PHP y NODE para crear guías de estilos fundamentadas en los elementos del diseño atómico: átomos, moléculas, organismos… https://patternlab.io/ Demo: http://demo.patternlab.io/ Sobre Atomic Design (Autor Brad Frost): http://bradfrost.com/blog/post/atomic-web-design/ Más referencias, la alabada guía de estilo de MailChimp cuenta con bastantes enlaces a recursos interesantes: https://ux.mailchimp.com/patterns/about Style Guide Podcast […]

Categorías
General Recursos UX

Recursos Tipográficos

Matej Latin está elaborando una muy buena lista de recursos de tipografía web basados en apps, herramientas, plugins and otros recursos para web designers y web developers. https://betterwebtype.com/web-typography-resources

Categorías
General WordPress

Pequeñas cosas con WP-CLI: llamandolo desde php en línea de comandos para scrapear datos

WP-CLI es la caña, y muy útil para casos como éste: tenemos unos 11.000 usuarios en una instalación WordPress, sin avatar. Este caso es un poco particular, porque el avatar lo vamos a sacar de una plataforma privada, sin API… pero el mismo modelo es aplicable, por ejemplo, si tenemos usuarios de twitter para cada […]

Categorías
General Recursos

Can I Use?

Herramienta web de cabecera, para saber si una propiedad, tecnología o formato está soportado por los navegadores y en qué versiones no lo está. Por ejemplo, necesitábamos conocer si object-fit —maravillosa propiedad CSS3 para recortar imágenes— estaba soportado por la mayoría de los navegadores. Con regocijo Can I Use nos confirma que podemos usarlo con […]

Categorías
General WordPress

Formatear salida de cantidades

Con esta función podremos mostrar grandes cantidades con un formato más legible y cómodo. Ejemplo: 11259 –> 11.3 K Fuente: https://gist.github.com/RadGH/84edff0cc81e6326029c

Categorías
WordPress

¡No hagas esto! Borrados masivos en WordPress directamente desde la BD

No lo hagas,.. pero alguna vez puede ser necesario (por ejemplo, una importación fallida de algunos cientos de miles de registros). Este ejemplo elimina los posts que están en la papelera. Con cambiar el WHERE a post_type=’tu_post_type’ ya puedes liarla parda :) DELETE wp_posts,wp_term_relationships,wp_postmeta,wp_term_taxonomy FROM wp_posts LEFT JOIN wp_term_relationships ON ( wp_posts.ID = wp_term_relationships.object_id ) […]