Detectar resize de un elemento

Caso de ejemplo, un widget dentro de otro widget de tipo tab. Al inicializarse, el tamaño del widget interno es 0, por lo que algunos scripts que afecten a los desplazamientos de posicionamiento no funcionarían correctamente. Para detectar y poder interactuar en casos en los que no tengamos un evento definido podemos utilizar lo siguiente:

Algunos comandos linux

Útiles para diversas situaciones, como inyecciones de código y esas cosas: Busca un texto en el contenido de ficheros:

Publicada el
Categorizado como General

Leaflet providers

Leaflet es una biblioteca de mapas ligera y fácil de usar. Los estilos en Leaflet se establecen a traves de «tiles» que van por encima de la geolocalización del mapa. Estos pueden establecerse a través de proveedores externos o con los builts-in del propio Leaflet. La empresa stamen lo explica y lo hace bastante bien… Seguir leyendo Leaflet providers

Code Patterns

A collection of code snippets to help you optimize your web projects: https://web.dev/patterns/ CSS Layout Popular layouts and patterns made with CSS https://csslayout.io/

Publicada el
Categorizado como General

Too many redirects – SSL y WordPress en infraestructuras especiales

En alguna ocasión nos ha pasado al desplegar un sitio WordPress en alguna institución que tienen una infraestructura de sistemas importante, con balanceadores de carga, sistemas de caché Varnish, esas cosas… Problema: tu web WordPress funcionaba en tu entorno Dev, pero al desplegarla correctamente en su nuevo server, haciendo «todo lo que hay que hacer»,… Seguir leyendo Too many redirects – SSL y WordPress en infraestructuras especiales

Publicada el
Categorizado como General

Saber la huella digital con la que se firmó una apk

Cito desde https://www.flipandroid.com/cmo-puedo-saber-qu-keystore-se-utiliz-para-firmar-una-aplicacin.html (muchas gracias por esa info, FlipAndroid … descomprima el APK y extraiga el archivo /META-INF/ANDROID_.RSA (este archivo también puede ser CERT.RSA, pero sólo debe haber un archivo .RSA). Entonces emita este comando: Obtendrá huellas dactilares de certificados como estas: MD5: B3:4F:BE:07:AA:78:24:DC:CA:92:36:FF:AE:8C:17:DB SHA1: 16:59:E7:E3:0C:AA:7A:0D:F2:0D:05:20:12:A8:85:0B:32:C5:4F:68 Signature algorithm name: SHA1withRSA A continuación, utilice el keytool… Seguir leyendo Saber la huella digital con la que se firmó una apk

Publicada el
Categorizado como General

Servicios AI de los grandes para proyectos más modestos

En determinados proyectos podemos encontrar la necesidad de realizar un análisis de lenguaje natural como datos estructurados (https://wit.ai/), utilizar algoritmos de inteligencia artificial para realizar «smart matching» entre miembros de una red social propia, como un club de antiguos estudiantes o posibles partners de negocios… Todo ello hasta hace poco tiempo era inaccesible para pequeños… Seguir leyendo Servicios AI de los grandes para proyectos más modestos

Publicada el
Categorizado como AI, General, UX

Herramientas de futuro: Solidity

Blockchain, Smart Contracts,… Palabras que suenan a «brujería». Pero estamos mirando mucho ese asunto aquí en Si2. Todo nos lleva a ello. https://solidity-es.readthedocs.io/es/latest/ Cualquier tecnología lo suficientemente avanzada es totalmente indistinguible de la magia. Arthur C. Clarke

Publicada el
Categorizado como 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… Seguir leyendo wp_list_pluck: extraer array de valores desde un array de arrays.

Publicada el
Categorizado como 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… Seguir leyendo Herramientas de validación de accesibilidad

Publicada el
Categorizado como General

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… Seguir leyendo Amcharts + From data to Viz

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… Seguir leyendo Enlaces Interesantes Febrero ’19

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

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… Seguir leyendo Cargar los CSS de Elementor en header

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… Seguir leyendo unDraw: Open Source Illustrations

Publicada el
Categorizado como General, UX

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… Seguir leyendo Old Book Illustrations

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:… Seguir leyendo Ritmo vertical en tipografía web

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… Seguir leyendo Web link a un contacto de WhatsApp específico

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… Seguir leyendo Generar guías de estilo basadas en diseño atómico

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… Seguir leyendo Pequeñas cosas con WP-CLI: llamandolo desde php en línea de comandos para scrapear datos

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… Seguir leyendo Can I Use?

Pantallazos Enhanced en MAC

Aplicación muy completa para macOS que te permite manipular pantallazos al vuelo, pudiendo añadir comentarios, flechas y demás gráficos, con tan sólo arrastrar y soltar. Skitch: https://evernote.com/intl/es/products/skitch

Microformatos / Datos estructurados

Algunas referencias útiles para enriquecer la info de una web con JSON-LD https://technicalseo.com/seo-tools/schema-markup-generator/ http://schema.org/Corporation https://search.google.com/structured-data/testing-tool/u/0/ https://developers.google.com/search/docs/guides/search-gallery

Publicada el
Categorizado como General

Descubre los últimos patrones de diseño UI de iOS

Mobbin es una colección de los últimos patrones de diseño móvil de apps que representan lo mejorcito en diseño actualmente. Inspiración desde unas cien apps iOS y unos cinco mil patrones (captaruados desde un iPhone X) disponibles en la plataforma. https://mobbin.design/

Publicada el
Categorizado como General

Netiquette en #Slack

Y, generalizando, en conversaciones (semi)públicas / «virtuales»; social-media related. https://www.fastcompany.com/3054413/everything-you-are-afraid-to-ask-about-slack-etiquette Parece bastante sentido-común. Y sonreir un poco, si es posible, sumando en lugar de restando :)

Publicada el
Categorizado como General

Electron.js

Un apunte para el futuro (aunque hace siglos que no desarrollamos Apps desktop):  https://electronjs.org/ es la solución para desarrollo en escritorio (Atom, Slack,…)

Publicada el
Categorizado como General

Crear y generar una clave SSH para gitlab

1. Seguimos las siguientes instrucciones para comprobar primero si tenemos una clave ya en el equipo (nuestra o de otro usuario) y posteriormente poder generar una y guardarla en el fichero de claves: https://docs.gitlab.com/ee/ssh/README.html 2. Abrimos los Profile Settings en nuestra cuenta de Gitlab y copiamos la clave que acabamos de generar: https://gitlab.com/profile/keys 3. Es importante… Seguir leyendo Crear y generar una clave SSH para gitlab

Publicada el
Categorizado como General

Enlaces: Jupyter, Mapbox, d3js, React

En la newsletter de mapbox han anunciado soporte para visualizar datos de Jupyter Notebooks. Es código abierto y parece que se están barajando como un estándar para compartir datos y conocimiento científico. Eso lo he sabido por este post de paradigma digital, donde explican un poco en qué consiste: https://www.paradigmadigital.com/dev/jupyter-data-science-aplicada/ Básicamente son archivos (notebooks) conteniendo… Seguir leyendo Enlaces: Jupyter, Mapbox, d3js, React

Recopilación de componentes para React Native

Animaciones https://airbnb.design/lottie/ Gráficos https://github.com/indiespirit/react-native-chart-kit Navegación https://reactnavigation.org Visual https://react-native-training.github.io/react-native-elements/ https://nativebase.io/ https://moduscreate.com/blog/expanding-and-collapsing-elements-using-animations-in-react-native/ (paneles expansibles)

Publicada el
Categorizado como General

Expresiones regulares

Dos aproximaciones distintas a un mismo problema: dar con esa expresión regular que te va a quitar cien líneas de código. Potente; elegante. http://regexr.com/ https://regex101.com/

Publicada el
Categorizado como General

Ejemplos varios de react native

Web con código de ejemplos con react native https://rnplay.org — Editado por Ángel ;) para añir este referencia: https://github.com/fangwei716/30-days-of-react-native

Publicada el
Categorizado como General

Debugging API’s y HTTP connections

Cuando trabajamos con APIs desde Apps móviles a veces aparecen «brujas»: se supone que el API de servidor funciona, se supone que estamos haciendo las llamadas correctas desde nuestro código, pero la respuesta no es la esperada. Ante estos casos, lo mejor es simplificar (siempre KISS), y no dar nada por supuesto: Realizar llamadas manuales… Seguir leyendo Debugging API’s y HTTP connections

Triangulator

Aplicación en html5, disponible para su descarga (funciona en browser pero hay que descargarla) a partir de una imagen crear una ilustración vectorial a base de triángulos. Autores: http://somestuff.ru/I Enlace de descarga Gracias a la aportación de nuestra UX Designer, Luciana Laura  

Imagen principal del sitio para OpenGraph / Facebook

WordPress está cada vez más vinculado a Jetpack (no es obligatorio, pero empieza a dar cositas tan chulas como Photon que cuesta trabajo no instalarlo en casi todas las webs que sacamos). Una de las cosas que hace bien es gestionar el opengraph (resumiendo mucho, lo que se ve en Facebook cuando compartimos). Suele pasar… Seguir leyendo Imagen principal del sitio para OpenGraph / Facebook

Publicada el
Categorizado como General

React Native y su integración con App IOS

https://medium.com/@clayallsopp/2016-the-year-react-native-eats-mobile-development-83e8482f78a6#.3iibom90h Integración con App IOS existente, creando una vista: https://facebook.github.io/react-native/docs/embedded-app-ios.html#content  

Gitlab to Github

Para pasar un repositorio de gitlab a github, es necesario realizar los siguientes dos pasos:   1. Añadir la ruta remota (github) en nuestro repositorio local git remote add github https://yourLogin@github.com/yourLogin/yourRepoName.git 2. Realizar un push mirror hacia la ruta creada: git push –mirror github

Publicada el
Categorizado como General Etiquetado como

Formatear texto HTML + negrita en UILabel

Interpretar un texto con etiquetas HTML no es tarea fácil en iOS. Para interpretar las etiquetas habrá que usar el siguiente código: let textFormat = try! NSAttributedString( data: textToFormat!.dataUsingEncoding(NSUnicodeStringEncoding, allowLossyConversion: true)!, options: [ NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType], documentAttributes: nil) Si el anterior código no interpreta etiquetas <b> o <strong> (iOS 9), habrá que utilizar el siguiente código. Añadir… Seguir leyendo Formatear texto HTML + negrita en UILabel

Jugando con los permalinks de WordPress: pasar parametros en la URL

Una de las funcionalidades de Mostrosity, nuestro juego GPL, es la de compartir el personaje que el jugador va personalizando (vía Twitter, Facebook,…). Ya que tenemos una tabla en una base de datos donde vamos almacenando qué opción tiene seleccionada el usuario para cada parte del cuerpo (Brazo nº 3, Pies nº2, sonido nº5,…) nos… Seguir leyendo Jugando con los permalinks de WordPress: pasar parametros en la URL

Publicada el
Categorizado como General

D3.js para dar vida a los datos

D3 ayuda a dar vida a los datos a través de HTML, SVG, and CSS. Si te preocupan que se cumplan los estándares web, D3 da soporte para todas las capacidades de los browser modernos. Combina potentes componentes para visualización y manipulación del DOM. http://d3js.org/

Diseño de prototipos para Android Wear y Apple Watch

Prototipar una App siempre ahorra tiempo y alinea las expectativas del cliente con el trabajo a realizar. Para ello, hay que estudiar bien las directirces de diseño que Sr. Google y Sr. Apple nos facilitan. Aquí están. Recursos Android Wear: http://blog.fluidui.com/design-resources-for-android-wear/ Apple Watch: http://blog.fluidui.com/design-resources-for-apple-watch/

Publicada el
Categorizado como General

iOS – Creación de Targets

Si queremos una configuración distinta para nuestro proyecto, por ejemplo para crear la versión lite o la versión pro de nuestra aplicación, seguir los siguientes pasos para realizar una configuración personalizada: Pulsar sobre la cabecera de nuestro proyecto en la vista de carpetas, esto abrirá la configuración del proyecto (General, Build Settings, Info…) En la… Seguir leyendo iOS – Creación de Targets

Publicada el
Categorizado como General