leivajd.com

Reverse interview

Tue, 03 Jan 2023 00:00:00 GMT

Reverse interview, entrevistar al entrevistador, y ver si ellos son un fit para uno. Un par de buenos recursos, y mis preguntas favoritas:

What has been a challenge for this job in the past?
Why are you looking to fill this role
What is the most important impact I can make in the 90 days
What are major trends affecting the company in the next year or two
What makes someone successful is there something I should do to be successful from day one?
What have you learned or how have you changed since working here?
What problem could I tackle for you quickly in this job?
Based on the interview, what feedback do you have for me?
What’s the employee turnover?
What's the on-call plan/schedule?
What does the onboarding look like?
How do you test code?
How do you integrate and deploy changes? Is it CI/CD?
How quickly can you setup a new local test environment for the product?
What happens when the team misses a release target?
How’s the engineering culture?
What’s the current tech stack?
Where is the engineering team located? It is fully remote?
How big is the team?
Do you have any concerns about my experience or skill set?
When was the last time you took time off? Whats the expectation when youre on vacations? expected that employees be checking emails, slack messages, etc. when OOO.

Fuentes:

No title

Mon, 28 Nov 2022 00:00:00 GMT

Empecé a leer Grokking Algorithms; lo tengo desde hace al menos 1 año en la lista de pendientes; lo compré por recomendación de Irene.

input de tipo search

Tue, 17 May 2022 00:00:00 GMT

TIL que los elementos input cuando reciben el valor de search para atributo type, nos proveen funcionalidades como autocomplete y una manera nativa de limpiar el input.

<form>
    <div>
        <input type="search" id="mySearch" name="q">
        <button>Search</button>
    </div>
</form>

Funciona similar al atributo text, pero dependiendo del browser el estilo es diferente, en Chrome muestra una X que cuando se le da click limpia el input.

Referencia: MDN <input type="search">

String.prototype.repeat()

Wed, 11 May 2022 00:00:00 GMT

TIL el objeto String tiene un método repeat()

The repeat() method constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together.

String.prototype.repeat()

No title

Wed, 09 Mar 2022 00:00:00 GMT

“You get in life what you have the courage to ask for.” ― Oprah Winfrey

Refrescando conceptos de DevOps

Mon, 21 Feb 2022 00:00:00 GMT

Encontré el canal de Youtube TechWorld with Nana y me ha ayudado a refrescar conceptos de DevOps, algunos de los que he visto en las ültimas semanas:

No title

Mon, 21 Feb 2022 00:00:00 GMT

Empecé el libro The Infinite Machine: How an Army of Crypto-hackers Is Building the Next Internet with Ethereum de Camila Russo.

No title

Sun, 13 Feb 2022 00:00:00 GMT

Terminé Calypso de Tatiana Lobo. Es un libro entretenido, me gustó la narración y como las diferentes historias se van entrelanzado a lo largo de los años. El final me pareció flojo.

Es el primer libro que inicio y termino en el 2022; me lo regaló Pri en Navidad.

React, state management

Mon, 10 Jan 2022 00:00:00 GMT

Estoy trabajando en un proyecto en el que hacer prop drilling ya se esta saliendo de control, algunas notas y links que me estan ayudando a tomar una decisión sobre como resolver el problema de state management.

State Management In Next.js: alto nivel, sirve como introducción; al final NextJS es un framework y no incluye nada que nos permita manejar el estado de la aplicacion, algunas alternativas que mencionan: prop drilling, usar Context API, Jotai. Me gusto como resume las consideraciones de client-side fetching:

When requesting data from the client-side, it is important to be mindful of a few things:

the user’s network connection: avoid re-fetching data that is already available

what to do while waiting for the server response

how to handle when data is not available (server error, or no data)

how to recover if integration breaks (endpoint unavailable, resource changed, etc)

Blogged Answers: Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux) incluye algunos buenos puntos sobre Context y Redux, que son, como se diferencia y cuando usarlos.

Comparing Context and Redux

Context
- Does not store or "manage" anything
- Only works in React components
- Passes down a single value, which could be anything (primitive, objects, classes, etc)
- Allows reading that single value
- Can be used to avoid prop-drilling
- Does show the current context value for both Provider and Consumer components in the React DevTools but does not show any history of how that value changed over time
- Updates consuming components when the context value changes, but with no way to skip updates
- Does not include any mechanism for side effects - it's purely for rendering components
React+Redux
- Stores and manages a single value (which is typically an object)
- Works with any UI, including outside of React components
- Allows reading that single value
- Can be used to avoid prop-drilling
- Can update the value via dispatching an action and running reducers
- Has DevTools that show the history of all dispatched actions and state changes over time
- Uses middleware to allow app code to trigger side effects
- Allows components to subscribe to store updates, extract specific pieces of the store state, and only re-render when those values change
Me gusto mucho esta parte sobre entender las herramientas

In order to use any tool correctly, it's critical to understand:

What its purpose is

What problems it's trying to solve

When and why it was originally created

It's also critical to understand what problems you are trying to solve in your own application right now, and pick the tools that solve your problem the best - not because someone else said you should use them, not because they’re popular, but because this is what works best for you in this particular situation.

Notas del curso React Fundamentals

Fri, 16 Jul 2021 00:00:00 GMT

Por fin me anime, e inicie con Epic React de Kent C. Dodds; siguiendo con los consejos de Kent, voy a empezar a tomar notas sobre los conceptos aprendidos, estas son del primer curso, React Fundamentals.

Imperative vs Declarative

The imperative approach is concerned with HOW you’re actually going to get [a seat]. You need to list out the steps to be able to show HOW you’re going to get [a table]. The declarative approach is more concerned with WHAT you want, [a table for two].

Imperativo: cuando declaramos instrucciones especificas, casi paso a paso, que van definiendo como vamos a obtener algo.
Declarativo: programación funcional.

Lectura recomendada:

JavaScript modules - MDN
Imperative vs Declarative Programming

JSX

Para ver como JSX se compila a JavaScript se puede usar el REPL de Babel, sirve mucho para terminar de entender lo que pasa cuando usamos JSX.

Posiblemente la definición más sencilla de qué es un componente:

Components are basically functions which return something that is “renderable” (more React elements, strings, null, numbers, etc.)

Lectura recomendada:

Responsive Image Breakpoints Generator

Fri, 09 Jul 2021 00:00:00 GMT

Responsive Image Breakpoints Generator, un tool de Cloudinary para generar variaciones de imagenes basado en breakpoints.

No title

Mon, 05 Jul 2021 00:00:00 GMT

Terminé el audiobook The Phoenix Project: A Novel about IT, DevOps, and Helping Your Business Win; me lo había recomendado Coco.

The Phoenix Project es una novela "ficticia", llena de situaciones que son muy familiares cuando una trabaja en desarrollo de software, entre los diálogos van dejando referencias a libros, charlas y practicas que pueden llevar IT a otro nivel, al nivel donde todos queremos estar.

Primera vez que consumo una novela en formato de audio; no recuerdo cuando lo inicie.

No title

Sat, 22 May 2021 00:00:00 GMT

Termine el audiobook Leading Without Authority.

No necesitamos estar en una posición de liderazgo para ser líderes, ni necesitamos tener personas a nuestro cargo.
Cualquiera con el que compartamos objetivo, es parte de nuestro equipo.
Hay que conectar a nivel personal para entender las motivaciones de los demás, y nos debe importar, cero pose ó falso interes. Care personally, challenge directly
Solos no podemos generar cambio/impacto/valor.

Camila Russo | La historia de Ethereum | DESCUBRIENDO BLOCKCHAIN

Sat, 08 May 2021 00:00:00 GMT

Camila Russo hablando sobre La historia de Ethereum; igual, todavía no entiendo nada.

No title

Sat, 17 Apr 2021 00:00:00 GMT

Empecé el audiobook Leading Without Authority de Keith Ferrazzi, patrocinado por BC Engineering leadership como parte del book club.

No title

Tue, 13 Apr 2021 00:00:00 GMT

Termine el audiobook The Culture Code: The Secrets of Highly Successful Groups.

Se repiten muchos de los "casos" ó ejemplos de libros como Miltipliers ó Grit, de lo que más me resono fue el tema de ser vulnerable, dos ejemplos:

Como lead/managers, tener una cultuta de open feedback es importante, pero se debe iniciar por uno:

What is one thing that I currently do that you’d like me to continue to do?
What is one thing that I don’t currently do frequently enough that you think I should do more often?
What can I do to make you more effective?

Para mejorar como equipo/organización, métodos como 5 Questions son una buena manera de hacer restrospectivas:

What were our intended results?
What were our actual results?
What caused our results?
What will we do the same next time?
What will we do differently?”

Moving users to Microsoft Edge from Internet Explorer

Fri, 09 Apr 2021 00:00:00 GMT

TIL, se puede hacer redirect de IE11 a Microsoft Edge, incluso es una práctica común que estan usando Facebook, Google y demás proyectos que le apuestan a los estandares modernos. BC se va a montar en ese bus.

No title

Fri, 02 Apr 2021 00:00:00 GMT

Terminé Ensayo sobre la ceguera. La narración es increible, los personajes no tienen nombre, y el país puede ser cualquiera, talvez por eso sea tan sencillo de conectar.

Mientras lo leía no dejé de pensar en la pandemia actual, Covid-19, súper fácil de sentirlo cerca. Pero el final, la idea de tener ojos y no querer ver, aplica para todo.

Curricula on Web Accessibility

Tue, 30 Mar 2021 00:00:00 GMT

La W3C publicó una guía que sirve para enseñar sobre accesibilidad web:

This resource provides teaching modules to help you create courses on digital accessibility, or to include accessibility in other courses. The modules cover accessibility foundations that apply broadly, and specific skills for developers, designers, content authors, and others.

No title

Wed, 17 Mar 2021 00:00:00 GMT

Empecé el audiobook The Culture Code: The Secrets of Highly Successful Groups, patrocinado por BC Engineering leadership como parte del book club.

No title

Tue, 23 Feb 2021 00:00:00 GMT

Empecé el audiobook Building a StoryBrand: Clarify Your Message So Customers Will Listen. La recomendación viene del curso Instagram Strategy for Business Growth de Domestika; Beelight me tiene leyendo y aprendiendo cosas que siempre he llamado vende humo, el marketing :D

No title

Mon, 01 Feb 2021 00:00:00 GMT

Hace menos de un mes lanzamos Beelight.cr, la versión 1 del sitio web es puro HTML/CSS con mínimo JavaScript, lo necesario para soportar el SDK de Shopify; hoy se hizo la primera venta directa desde el sitio web, pagaron con PayPal, good stuff.

Shopify Store Launch Checklist

Wed, 20 Jan 2021 00:00:00 GMT

Buenos tips para lanzar una tienda en línea usando Shopify; me ha servido para verificar el lanzamiento de Beelight.

Acercandome a IndieWeb

Sat, 02 Jan 2021 00:00:00 GMT

Esto lo empece a escribir en Julio, y se me ha ido quedando en draft.

Entre Abril y Mayo de 2020 migré el sitio de un Drupal 7 que estaba hospedado en un shared hosting a Gatsby hospedado en Vercel. La parte más dolorosa fue crear los archivos Markdown usando el contenido del blog y no perder las URLs.

Parte de la motivación de migrar fue aprender más de Gatsby, pero también alejarme más de Twitter e Instagram, Facebook prácticamente no lo utilizo así que, no me importa. Cuando digo "alejarme" no me refiero necesariamente a dejar de usarlas (deberia!?), sino a publicar menos ahí y más aquí, y no pensar nunca en que pasará cuando las cierren, como podré exportar el contenido que me importa y como evitar que se pierda, y claro, como dejar de usar los productos de Zuck.

Mi contenido me importa a mí.

Desde el 2009 adquirí, si se puede decir eso, el dominio leivajd.com; la primera version del sitio fue en WordPress, la segunda en Drupal y ahora Gatsby. Por una mala migración perdí todo el contenido entre 2009 y 2012, a nadie le importa, pero a mi sí. Nadie lo lee, ni yo, pero esta es mi manera de llevar un registro y documentar las cosas que voy aprendiendo, leyendo, al fin, compartiendo.

Esta necesidad de seguir publicando, no perder y controlar más mi contenido me recordó un concepto que habia leído hace un par de años en un post de Jeremy Keith, IndieWeb.

Qué es?

Definión en el sitio oficial:

The IndieWeb is a community of individual personal websites, connected by simple standards, based on the principles of owning your domain, using it as your primary identity, to publish on your own site (optionally syndicate elsewhere), and own your data.

Muchos conceptos, pero en sencillo es: tener un dominio y un sitio web. Podemos ir un poco, ó mucho, más allá usando los building blocks y convertir nuestro sitio web en una red social de la que tenemos control completo.

Estado actual

Asi estoy a Enero 2021:

Actualicé el markup siguiendo los pasos de IndieWebify.Me
Envío de Webmentions usando webmention.app
Estoy usando Bridgy cada vez que quiero publicar un tweet y manualmente agrego el link a la publicación para que quede la referencia.

Próximos proyectos

Algunos features que quiero agregar a este sitio; me falta priorizar y ver cuales se sobreponen.

Mostrar la fecha de la ultima actualización hecha a un post.
Publicar en el sitio fotos, links y notes sin necesidad de crear el markdown "manualmente", ojala tener un form o similar para publicaciones cortas.
Enviar Webmentions.
Sindicar on demand contenido a Twitter.
Publicar on demand fotos ó notas a Twitter/Instagram.
Publicar tweets desde el sitio.
Publicar respuestas a tweets desde el sitio.
Mostar en cada post el link de donde se sindico.
Crear una sección Now
Crear una con los feeds, https://adactio.com/journal/17095
Agregar un blog roll.
Recibir Webmentios (no estoy tan seguro de esto).
Migrar a Eleventy :D

No title

Fri, 01 Jan 2021 00:00:00 GMT

Empecé a leer Ensayo sobre la ceguera de José Saramago, creo que es lo primero que leo de él.

Review del 2020

Fri, 01 Jan 2021 00:00:00 GMT

A pesar de que 2020 fue un año complicado, no me puedo quejar, esperando con ganas el 2021.

Por Covid, en WFH desde Marzo.
Pri está en la casa desde Junio, ha sido una gran aportunidad para perder el miedo a emprender nuevos proyectos.
Acompañe a Pri a idear y lanzar Beelight, quiero verlo crecer en el 2021.
Termine el año sin tomar cerveza, en Octubre cumplí 1 año de no tomar; durante el año me tomé 3 tragos y el vino con mucha, mucha moderación. 2020 sóbrio.
Migré este sitio de Drupal 7 a Gatsby. Deshabilite el share hosting y me moví a Vercel.
Volví a actualizar mi blog.
Le perdí el miedo a IndieWeb, de hecho, el ser dueño de mi contenido me motivó a revivir mi sitio web y meterle tiempo a webmentions, soportar Microformats y categorizar el contenido.
Durante el año publique 71 veces: 38 links, 20 notas y 13 posts.
Cancele una deuda que venía pagando desde el 2006 ó 2007, malas decisiones que lo persiguen a uno por años.
Ahorre más que ningún otro año.
Termine el 52-week money challenge.
Me moví al rol de Tech Lead.
Empecé a registrar los libros que voy leyendo/escuchando.
Logré llevar el logbook por segundo año.
Conocí Eleventy; mi plan para 2021 es migrar de Gastby a Eleventy.
Participe en la organizacion del Drupal Camp Costa Rica 2020, primera vez que lo hacemos virtual; las charlas estan en Youtube.
Supere dos meses de desmotivación (laboral), en los que estuve a punto de renunciar.
Inicie como mentor en el programa LaunchPadCR.
Nueva generación del CETAV, desde Marzo en clases virtuales, ha sido todo un reto.
Jeff me tiro la idea de hacer un centro tipo CETAV, pensando en las zonas fuera de la GAM.
Trate de volver a correr. Cyber 5 y code freeze me pasaron la factura y perdí consistencia, esta es parte de las metas del 2021.
Entrene, tanto como pude, BJJ.
Practique yoga, a finales de noviembre perdí consistencia, pero a pesar de eso fue un win.
Isaac se fue a Portland, nació un nuevo sobrino.
Se murió Harold y don Joaquin, asesinaron a Guayo; no se podía ir a ningún entierro.
Después de Julio empecé a ver a mis papás una vez al mes, a pesar de Covid :S
Me compre de regalo de navidad mi primera parrilla nueva, la Original Kettle Premium Charcoal Grill 22".
Gracias a la receta de Matty hice muchos pancakes.
Después de ir a Plantet Hollywood reconfirme que no me gustan, y no disfruto, los hoteles grandes/todo incluido.

No title

Thu, 31 Dec 2020 00:00:00 GMT

Terminé de leer El año de la Ira.

ARIA states

Wed, 30 Dec 2020 00:00:00 GMT

Breve guia con los diferentes "estados" que se pueden tener usando ARIA.

No title

Sun, 20 Dec 2020 00:00:00 GMT

Hoy termine el último depósito del 52-week money challenge, primera vez que lo hago, ahorré $1,378 :P

No title

Wed, 16 Dec 2020 00:00:00 GMT

Leyendo El año de la Ira de Carlos Cortés. Increible cómo nos enseñan pedazos de la historia, y otras cosas se tratan de olvidar; talvez si tuvieramos conocimientos de las barbaridas que como país han, y hemos hecho(¿?), valoraríamos y protegeríamos la democracia que tenemos.

nerd-snipe

Thu, 10 Dec 2020 00:00:00 GMT

TIL un nuevo termino del internet, nerd-snipe, la definición:

To provide a problem so interesting and difficult that the target is compelled to cease whatever they are doing (eating, reading, walking) in order to think about it.

Del Twitter

If you think about it, a software engineering job is really just an indefinite series of nerd snipes from your management team.

It's Funny Because It's True :P

Better, Simpler Grid Systems

Fri, 27 Nov 2020 00:00:00 GMT

Buenos tips, y buen ejemplo, de como crear un sistema de grid usando Flexbox; especialmente útil cuando no queremos usar float ó display, y no podemos usar CSS Grid.

No title

Mon, 16 Nov 2020 00:00:00 GMT

Terminé Talking with Tech Leads; la mayoria del libro son "entrevistas" a Tech Leads, con diferentes backgrounds/experiencia, pero, creo que puede ser más corto, llega un momento en el que se vuelve repetitivo, pero incluye buenos consejos.

100DaysOfReact

Fri, 13 Nov 2020 00:00:00 GMT

Alfredo inició un 100DaysOfReact; me apunto para repasar/actualizarme.

Strangler fig application

Mon, 09 Nov 2020 00:00:00 GMT

TIL, Strangler fig application, una estrategia en la que se va "creando" una nueva aplicación en los bordes de la vieja, va creciendo lentamente hasta que estrangula la aplicación de la que se quiere salir/migrar.

...when designing a new application you should design it in such a way as to make it easier for it to be strangled in the future. Let's face it, all we are doing is writing tomorrow's legacy software today. By making it easy to add a strangler fig in the future, you are enabling the graceful fading away of today's work.

Automatically sending Webmentions from a static website

Mon, 09 Nov 2020 00:00:00 GMT

Por medio de James Mead y su post Automatically sending Webmentions from a static website descubrí webmention.app, un servicio de Remy Sharp que permite enviar webmentions, good stuff.

No title

Wed, 04 Nov 2020 00:00:00 GMT

Priscilla me recomendo que leyera sobre Philip Crosby y su principio "doing it right the first time" (DIRFT).

... "quality is free". It is less expensive to do it right the first time than to pay for rework and repairs.

Building a client side proxy

Wed, 04 Nov 2020 00:00:00 GMT

Un caso de uso de service worker diferente, client side proxy que permite acceder, sin necesidad de un VPN, a servidores que han sido bloqueados.

... ‘offline first’-solution that proxies any request to the best available mirror, preventing authorities from censoring our content.

JAMstack build, usan un WordPress headless con RESTful API, Eleventy para generar el sitio estático, con eso se aseguran no usar client side frameworks.
Usan la estragetia de cache stale-while-revalidate.
Los assets como imagenes estan hospedados en un servidor independiente, el cual es usado por los servidores "espejo", así se aseguran que, si un server es bloqueado, los otros también tengan acceso a los assets.

No title

Mon, 02 Nov 2020 00:00:00 GMT

Hoy me di cuenta que el mes pasado, especificamente el 7 de Octubre, fue mi setimo aniversario trabajando en Backcountry, y que el 5 del mismo mes inicie en mi nuevo rol de Team Lead. Jugaré el 10 en la lotería.

Accessible interactions

Sun, 01 Nov 2020 00:00:00 GMT

Jeremy Keith describe un poco su proceso mental para tomar decisiones cuado esta trabajando con elementos que sigan un patrón de progressive disclosure, como tabs, menus, modal, dialog, etc.

80% del trabajo es "sencillo", el 20% es cuando se vuelve tricky, porque entramos en áreas donde no hay reglas claras para tomar decisiones.
ARIA nos puede ayudar, pero no debemos abusar, causaria más daño que beneficio.
Se enfoca primero en cubrir que keyboard y mouse users puedan interacturar con el componente
Agregar algunos atributos extras, como aria-expanded, aria-hidden y aria-controls, para asegurarse que screen reader users no se estan quedando excluidos.

Par de preguntas que se hace cuando esta tomando decisiones:

¿Debe usar un boton ó un link en el elemento trigger?
¿Debe el elemento target recibir focus de manera automatica?

Ademas, después de haber leído un par de libros de Heydon Pickering, puedo hacer un +1 a su tercera pregunta.

And when it comes to interactive patterns like the trigger/target examples I’ve been talking about, there’s one more question I ask myself: what would Heydon do?

No title

Sun, 18 Oct 2020 00:00:00 GMT

Vuelta rápida a Santa Ana y regreso, 19.94km en 1:06:50; hice la ruta con Bren. No recuerdo la última vez que salí en bicicleta, que no fuera ir al supermercado ó a la feria.

100DaysOfCloud Ideas List

Wed, 14 Oct 2020 00:00:00 GMT

The purpose of this repo is to provide a list of micro-projects to help people with their #100DaysOfCloud Challenge.

Lo encontré gracias al video 3 Projects to get hands on with Cloud.

No title

Sun, 04 Oct 2020 00:00:00 GMT

Leyendo Talking with Tech Leads de Patrick Kua; me lo recomendó Agnes.

The Complete Guide to Next.js Authentication

Fri, 02 Oct 2020 00:00:00 GMT

The Complete Guide to Next.js Authentication por Nader Dabit.

In this guide you will learn how to implement authentication in a Next.js app. I will cover client authentication, authenticated server-rendered pages, authenticated API routes, protected routes, and redirects.

No title

Fri, 02 Oct 2020 00:00:00 GMT

Terminé Resilient Management de Lara Callender Hogan. Me gusta mucho que incluye consejos prácticos, y como los otros libros de Abookapart, va al punto pero con muy buen contenido.

No title

Wed, 30 Sep 2020 00:00:00 GMT

Hace poco más de un mes fue la primera corrida después de meses de no poder hacerlo, por dolor en la rodilla izquierda. Hoy en Liberia logré correr 4km en 22:35min sin parar.

Treinta y nueve

Mon, 28 Sep 2020 00:00:00 GMT

Hoy cumplo 39 años, ha sido un año diferente, pero la celebración no pudo estar mejor, tengo salud, trabajo y el amor de mi familia.

Queria hacer la lista de 39 cosas que he aprendido en 39 años, como lo hice cuando cumplí los 34 años, pero me siento muy cansado, lo bueno es que siempre puedo revisitar este post.

La #34 sigue estando vigente.

Sigo pensando que todo va a salir bien.

Form design

Sat, 26 Sep 2020 00:00:00 GMT

Best practice, research insights and examples

Algunas buenas practicas para el diseño de formularios, incluye enlaces y consideraciones para que seam accesibles.

npkill

Tue, 22 Sep 2020 00:00:00 GMT

TIL: como buscar y remover folders viejos de node_modules usando npkill.

Se puede correr sin instalarlo:

npx npkill

No title

Mon, 21 Sep 2020 00:00:00 GMT

Desinformación y fake news en Costa Rica, buena discusión https://youtu.be/Xch5-LV3j_Q

No title

Sat, 19 Sep 2020 00:00:00 GMT

Leyendo Resilient Management de Lara Callender Hogan. El libro lo tenía en la lista de pendientes, pero, escucharla en los episodios 67 de Presentable y 370 de Shop Talk Show, me influencio para empezar a leerlo.

Accesibilidad web de la teoría a la práctica

Thu, 17 Sep 2020 00:00:00 GMT

DrupalCR Meetup A11y

Hoy tuvimos el DrupalCR Meetup A11y y participe con la charla Accesibilidad web de la teoría a la práctica, el video ya esta disponible y estas son algunas notas.

¿Sobre qué no vamos a hablar?

La norma, WCAG 2.1.
Principios de accesibilidad.
Niveles de conformidad (A, AA, AAA).
WAI-ARIA.

Recomendada la charla Implementando Accesibilidad de Carlos Murillo, cubre varios de los puntos anteriores.

¿Qué es a11y?

A11Y significa "accessibility". A11Y es lo que se conoce como numerónimo, que es algo similar a un acrónimo; se conservan las primeras y últimas letras de accessibility, reemplazando las letras restantes con su suma total de 11.

Cuando decimos que un sitio es accesible, queremos decir que el contenido está disponible y que su funcionalidad puede ser operada, literalmente, por cualquier persona.

Principales tipos de discapacidad

Visual: ceguera, baja visión, daltonismo
Audición: sordera y problemas de audición
Motora: incapacidad para usar un mouse
Cognitivo: problemas de aprendizaje, distracción incapacidad para recordar

Tambien podemos tener discapacidades transitorias:

Temporal: accidentes, enfermedades
Contexto: contenido en otro idioma
Envejecer: nos toca, si tenemos suerte

Las "mejoras" que hacemos para que nuestra aplicación o proyecto sea accesible tiene repercusiones en todos nuestros usuarios, por ejemplo: las aplicaciones que no reproducen videos automáticamente son más fáciles de usar para personas con discapacidades cognitivas, pero también serán más amigables para los usuarios con conexiones lentas o dispositivos móviles antiguos.

¿Porqué molestarnos?

Ampliar alcance del mercado / audiencia
Responsabilidad Social Corporativa (RSC)
Superposición entre accesibilidad y usabilidad
Minimizar el riesgo legal (ADA)

The WebAIM One Million

El reporte de WebAIM One Million fue la base de la charla, recomendado leerlo y seguir los links.

Recursos:

Checklist

Checklist que presenta recomendaciones para implementar los principios y técnicas de accesibilidad. El lenguaje utilizado aquí simplifica y condensa significativamente la especificación oficial WCAG 2.1 y los materiales de apoyo para facilitar su implementación y verificación.

Sitios oficiales

Inclusive Design 24

Wed, 16 Sep 2020 00:00:00 GMT

¡@id24conf inicia hoy! La agenda https://inclusivedesign24.org/2020/schedule/, y que manera de lineup #id24

No sign-up. No registration. All sessions are streamed live and publicly on the Inclusive Design 24 YouTube channel – see the entire playlist for the event. Live captions for each session will be available.

Recuperar un Git branch eliminado

Tue, 08 Sep 2020 00:00:00 GMT

TIL como recuperar un branch local de Git que fue eliminado.

git checkout -b <branch-name> <sha>

Si no se tiene el SHA se puede hacer un reflog

git reflog --no-abbrev

Esto retorna el log de referencia completo, incluido el historico de commits para el branch que eliminamos; el SHA que nos interesa es el último commit del branch que se quiere recuperar.

No title

Sun, 06 Sep 2020 00:00:00 GMT

Terminé Trillion Dollar Coach, me recordó mucho Radical Candor.

No title

Fri, 04 Sep 2020 00:00:00 GMT

Empece el audiobook Trillion Dollar Coach: The Leadership Playbook of Silicon Valley's Bill Campbell, hace tiempo lo tenía en la lista de pendientes, me convencio este review de los autores.

Docker Tutorial for Beginners - freeCodeCamp.org

Thu, 03 Sep 2020 00:00:00 GMT

Buen tutorial de la gente de freeCodeCamp.org Docker Tutorial for Beginners - A Full DevOps Course on How to Run Applications in Containers

Reorgs Happen

Sat, 29 Aug 2020 00:00:00 GMT

Successful Companies Change As needed

Buena charla, Reorgs Happen, Dealing Eleganty with Organizational Change por Camille Fournier, la autora del libro The Manager's Path. Cae en buen momento, en Backcountry estamos teniendo nuevos C levels, nuevo manager, restructuración de equipos y nuevos roles.

Menciona un framework sobre como manejar cambios complejos, que va algo asi:

Vision + Skills + Incentives + Resources + Action plan = Change

El éxito no es asegurado si todos los criterios exiten, pero el no tener alguno de estos elemento puede llevar a problemas como confusión, ansiedad, resistencia, frustración ó falsos inicios.

No title

Thu, 27 Aug 2020 00:00:00 GMT

Tengo meses de no poder correr por dolor en la rodilla izquierda, hoy salí a las 06:33am, corrí 2.82Km en 0:20:19.5. Se sintió muy bien, y por primera vez Bruno me acompaño.

No title

Wed, 26 Aug 2020 00:00:00 GMT

En Abril 2018 compré la versión para kindle de The First 90 Days: Proven Strategies for Getting Up to Speed Faster and Smarter, lo medio leí; ayer empece a leerlo de nuevo, de manera intencional, tomando apuntes y tomando acciones sobre los puntos que cubre, ahora sí lo necesito :P

No title

Sun, 23 Aug 2020 00:00:00 GMT

El episodio de Eleventy con @zachleat y @jlengstorf fue la motivación que necesitaba para aprender; iniciando proyecto para singlefinavellanas.com usando #11ty

About Feeds

Thu, 13 Aug 2020 00:00:00 GMT

Un sitio web donde dan una introducción de qué es un feed (RSS), porqué usarlos, cómo y con qué consumirlos.

Use feeds to subscribe to websites and get the latest content in one place.

Feeds put you in control. It’s like subscribing to a podcast, or following a company on Facebook. You don’t need to pay or hand over your email address. And you get the latest content without having to visit lots of sites, and without cluttering up your inbox. Had enough? Unsubscribe from the feed.

You just need a special app called a newsreader.

This site explains how to get started.

¡Los feeds vienen de regreso!

Habilitar debug de Twig Templates en Drupal 8

Thu, 13 Aug 2020 00:00:00 GMT

TIL como habilitar el debug en los templates de Twig de Drupal 8.

Twig ofrece una herramienta para hacer debug, por defecto esta deshabilitado, y es útil para saber cuál es el template que está desplegando el markup de cierto elemento (block, region, field, etc). Los pasos para habilitarlo son:

buscar el archivo services.yml en el folder que esta en la ruta sites/default/
si el archivo no existe, se puede hacer una copia de default.services.yml y cambiarle el nombre a services.yml
buscar la opción twig.config y cambiar el valor a true
en caso de que no tengamos permisos para escribir en el folder sites/default/, este post explica como modificar los permisos
recordar cambiar la configuración cuando estemos en producción y cambiar permisos cuando terminemos con el debug.

How to Leave Facebook

Sun, 09 Aug 2020 00:00:00 GMT

How to Leave Facebook, un post detallado sobre como hacer un soft delete de la cuenta de Facebook, y sus implicaciones. Ya estoy un paso más cerca, exporte las fotos.

https://aaronparecki.com/2020/06/14/14/how-to-leave-facebook

Drupaleada y el Zoombombing

Sat, 08 Aug 2020 00:00:00 GMT

El 29 de Julio se realizó, ó tratamos de realizar, un meetup que tenía como objetivo darle seguimiento a la drupaleada de Julio, en la que se tuvieron varias charlas relacionadas con usar Drupal desacoplado; teníamos como invitado a Jesús Olivas, quien iba a compartir la charla que dió en el DrupalCon que recien paso. tl;dr, no se pudo, sufrimos un Zoombombing.

Para este evento no configuramos contraseña, a diferencia de los meetups anteriores, sólo porque me pase de confiado. Cuando Olivas iba por la mitad de la charla, la cantidad de usuarios conectados a la videollamada empezó a aumentar, y después, ruidos, usuarios escribiendo en el whiteboard, más ruidos, malas palabras, amenazas y clips de pornografía, el caos que buscan los trolls.

Por más que intentamos remover a los trolls de la llamada, no fue posible seguir. Tuve que terminar la llamada, disculparnos con los asistentes por los medios oficiales de la comunidad y reagendar el meetup. No paso nada grave.

Cuando le conte a mi esposa lo que había pasado, y como me sentía de vulnerado y violentado, su respuesta fue, así nos sentimos las mujeres desde que somos niñas cuando los hombres nos acosan. Se me hizo un nudo en la garganta y se me revolvio el estómago; hay cosas que como hombres no podemos entender porque vivimos en una posición de privilegio, el privilegio de poder salir de casa sin tener miedo.

El zoombombing, por más tonto que sea, fue una buena lección para mí, y un buen recordatorio de todo el trabajo que como generación nos queda por hacer para erradicar la violencia contra las mujeres.

No title

Sat, 08 Aug 2020 00:00:00 GMT

Nueva costumbre, escuchar audiobooks/podcast mientras camino con el perro, ya van 5 meses sin manejar a la oficina y se estaban acumulando.

No title

Fri, 07 Aug 2020 00:00:00 GMT

launchpadcr.com suena como una buena iniciativa; un programa técnico, que busca proveer a estudiantes costarricenses de último año de colegio tutorías, herramientas y habilidades y que les sirva como punto de partida para desarrollar una carrera en desarrollo de software y tecnología.

Están en período de convocatoria y buscan voluntarios y voluntarias. Bonito ver más esfuerzos en la misma línea del CETAV.

podcast.smashingmagazine.com

Thu, 06 Aug 2020 00:00:00 GMT

Hoy descubrí que Smashing Magazine tiene un podcast, casi dos años tarde :D El primer episodio que escuche es What is Gatsby? con Marcy Sutton, good stuff.

Drupaleada Agosto

Wed, 05 Aug 2020 00:00:00 GMT

Hoy se realizó la Drupaleada de Agosto, lo dividimos en tres bloques:

Anthony Phillips compartió como fue su experiencia para la Acquia Certified Site Builder. Uno de los recursos que Anthony mencionó fue el post Crack your Acquia Drupal site building certification.
Jesus Manuel Olivas presentó la charla Beyond Static: Building a dynamic application with GatsbyJS, misma que habia presentado en el DrupalCon.
Alberto Rojas, Katherine Fernandez y Raúl Solano compartieron sobre su experiencia de asistir al DrupalCon 2020, el cual por primera vez se realiza de manera virtual. Estas son las tres charlas que mencionó Katherine, Webforms for Everyone, Your Component Library is not a Design System y Accessible Patterns from the Ground Up

El video del meetup esta en el canal de Youtube. Nos vemos en el próximo meetup.

No title

Wed, 05 Aug 2020 00:00:00 GMT

Terminando la drupaleada del mes. El video queda en el canal de Youtube de la comunidad; recuerden que la agenda para el próximo mes esta abierta.

No title

Tue, 28 Jul 2020 00:00:00 GMT

Primera vez que hago pancakes con buttermilk, ¡y son un éxito! Use la receta de Matty Matheson.

whatthefuck.is

Tue, 28 Jul 2020 00:00:00 GMT

Muy bueno, Dan Abramov y su glosario de JavaScript, whatthefuck.is.

3 Things I wish I knew when starting with GraphQL

Thu, 23 Jul 2020 00:00:00 GMT

Un video corto de la gente de Prismic, 3 Things I wish I knew when starting with GraphQL

Aprender sobre la especificación de GraphQL.
Tener un conocimiento general de que esta pasando en el backend ó en el frontend, aunque soólo nos encarguemos de uno, para minimizar errores y entenderse entre las partes.
¿Que librería usar? Lo más obvio es usar la más popular (Apollo), porque tiene más soporte, más documentación/tutoriales y una mayor comunidad de usuarios, lo que a un principiante le simplifica la vida.

No title

Wed, 22 Jul 2020 00:00:00 GMT

Hoy asistí, por primera vez, a un Homebrew Website Club; le puse cara y voz a un par de indieweb users, y aprendí más sobre Micropub y webmentions. Como side effect del evento, esta es mi primera nota :)

Drupaleada Julio, Drupal 9 y headless

Sat, 11 Jul 2020 00:00:00 GMT

El pasado 9 de Julio se realizó el meetup del mes, el video esta disponible en el canal de Youtube DrupalCampCostaRica.

Este mes la idea era darle seguimiento a Drupal 9, Theme UI y usar Drupal como un headless CMS, algunas notas:

Actualizando tu sitio a Drupal 9

Kevin Porras nos dió una introducción sobre como prepararnos para migrar a Drupal 9; incluyó una breve historia de las versiones, que incluye Drupal 9, y respondio las preguntas ¿debo actualizar? ¿por qué? ¿cuándo?. En su sitio personal tiene un post sobre como prepararse para la migración y los slides de la charla estan disponibles.

Embracing the modern web using a Headless CMS with GatsbyJS

La segunda parte del meetup estuvo a cargo de Jorge Valdez y Jesus Manuel Olivas de Octahedroid. Jorge hizo un show & tell sobre como estan usando Theme UI en sus proyectos, cuales son los beneficios de trabajar con Storybook y uso como ejemplo un proyecto de Prismic

Olivas hizo una breve introducción a JAMstack y cuales son sus beneficios, porque usar WordPress ó Drupal como headlessCMS y explicó en que consiste GatsbyJS y cual es su papel cuando tenemos un sitio desacoplado. El cierre de la charla fue un demo, en el que mostró como se puede tener el mismo front end, usando GatsbyJS, y diferentes data source, en este caso uso WordPress, Drupal y Airtable, good stuff.

Los próximos eventos se publican en el Meetup de Drupal Costa Rica, las fechas del DrupalCamp 2020 ya estan publicadas.

How to transfer all of your Facebook photos and videos to Google Photos

Thu, 09 Jul 2020 00:00:00 GMT

#TIL Como transferir todas las foto y videos de Facebook a Google Photos; en el artículo esta detallado, pero a alto nivel es algo como esto:

Ir a Settings
Click en Your Facebook Information
Click en Transfer a Copy of Your Photos or Videos
Click en Choose Destination, la única opción en este momento es Google Photos.

Con esto estoy un paso más cerca para borrar mi cuenta de Facebook.

Revisar paquetes globales de npm

Wed, 08 Jul 2020 00:00:00 GMT

#TIL como listar todos los paquetes de npm instalados de manera global.

Listar cada paquete global, incluidas sus dependencias:

npm list -g

Listar solo paquetes top-level:

npm list -g --depth 0

Y por supuesto, como eliminar paquetes globales:

sudo npm uninstall -g <nombre del paquete>

El artículo completo en How to Check Your Globally Installed npm Packages

Retro Feeds

Mon, 06 Jul 2020 00:00:00 GMT

Soy fan de los feeds, son una excelente manera de organizar el contenido que consumo, y me gusta como están obteniendo más atención; esta semana @adactio escribió un poco sobre esto https://adactio.com/journal/17095. Necesitamos más feeds.

“Link In Bio” is a slow knife

Sat, 04 Jul 2020 00:00:00 GMT

El "link in bio" de Instagram no solo es molesto, también es una manera de mantenernos, a nosotros los usuarios, encerrados dentro de la plataforma.

Anil Dash:

But killing off links is a strategy. It may be presented as a cost-saving measure, or as a way of reducing the sharing of untrusted links. But it is a strategy, designed to keep people from the open web, the place where they can control how, and whether, someone makes money off of an audience. The web is where we can make sites that don’t abuse data in the ways that Facebook properties do.

Glen Maddern - Styling React Apps with Styled Components

Sun, 28 Jun 2020 00:00:00 GMT

Repasando styled-components volví a ver el video de Glen Maddern, Styling React Apps with Styled Components, donde hace un show & tell de las motivaciones que llevaron a la creación de styled-components y además, repasa los diferentes features.

Es interesante volver a ver hacia atrás y ver la evolución de las herramientas que usamos y ver como algunos temas, CSS-in-JS por ejemplo, se van volviendo parte del flujo normal de trabajo; igual espero que de manera nativa podamos tener las mismas ventajas que ofrece el no tan querido CSS-in-JS.

Robustness and least power

Tue, 23 Jun 2020 00:00:00 GMT

Jeremy Keith:

As a general rule, it’s always worth asking if you can accomplish something with a less powerful technology:

Instead of using JavaScript to do animation, see if you can do it in CSS instead.

Instead of using JavaScript to do simple client-side form validation, try to use HTML input types and attributes like required.

Instead of using ARIA to give a certain role value to a div or span, try to use a more suitable HTML element instead.

Debug images without alt attribute with CSS

Sun, 21 Jun 2020 00:00:00 GMT

TIL: Pequeño tip, debuguear imagenes que no tienen el atributo alt usando CSS.

img:not([alt]) {
  outline: 2px dashed pink;
}

Drupaleada Junio, mucho CSS

Thu, 18 Jun 2020 00:00:00 GMT

Hoy tuvimos la Drupaleada de Junio, los charlistas fueron:

Felipe Calderón, habló sobre Atomic Design, Sass y BEM; los slides.
Alfredo Navas contestó la pregunta de moda, ¿qué es CSS-in-JS?.
Roberto Remedios dió una introducción a Theme UI y Tailwind CSS; los slides.

En el canal de Youtube esta disponible el video del meetup, y los próximos eventos los pueden encontrar en Meetup como Drupal Costa Rica.

Nos vemos en la Drupaleada de Julio.

Responsive Typography - Jamstack Conf

Fri, 12 Jun 2020 00:00:00 GMT

Estoy tratando de ponerme al día con CSS, y hoy me encontre con este video sobre Responsive Typography de Mandy Michael en el que explica que son Variable Fonts, algunos casos de uso y sus beneficios, y fue como WOW.

Algunos recursos:

Variable fonts guide, guía en MDN
Introduction to variable fonts on the web, post introductorio en web.dev
Mandy Michael en Twitter @mandy_kerr
Variable Fonts Experiments, demos en Codepen
variablefonts.dev, un proyecto de Mandy Michael para mostrar las posibilidades y oportunidades que variable fonts pueden ofrecer a developers y designers.
v-fonts.com, para encontrar y probar variable fonts

Mostrar las notas y highlights del Kindle

Tue, 09 Jun 2020 00:00:00 GMT

¿Cómo mostrar las notas y highlights del Kindle? He estado dandole vueltas a esta pregunta, y suena como un buen problema a resolver.

On keeping a logbook

Mon, 08 Jun 2020 00:00:00 GMT

En el 2018 leí Steal like an artist de Austin Kleon, y una de las cosas que más me gustó fue la idea de tener un logbook. En el 2019 llevé uno, y para este año tengo otro; hoy me encontre con un post de 2010, previo al libro, en donde Kleon habla un poco del concepto y la idea detrás de tener un logbook, fue bastante refrescante; conectar los puntos de por donde pasamos y recordar ...the distance the ship traveled.

Retomando los meetups de DrupalCR

Sat, 06 Jun 2020 00:00:00 GMT

Algo bueno que ha dejado la pandemia es la cantidad de meetups, conferencias y eventos que se han movido a modalidad virtual, y para la comunidad de DrupalCR no ha sido diferente. El pasado 6 de Mayo retomamos los meetups mensuales, a la fecha hemos realizado tres, y el próximo es el 18 de Junio.

Todas las charlas van a estar disponibles en el canal de Youtube de DrupalCR.

Modern CSS Solutions

Wed, 27 May 2020 00:00:00 GMT

Mantener el footer fijo al final de la pantalla y columnas de igual altura, son dos viejos problemas que son complejos de solucionar con solo CSS; en la serie de posts publicados en Modern CSS Solutions for Old CSS Problems cubren estos viejos problemas, con soluciones modernas.

Responsive web design turns ten

Mon, 25 May 2020 00:00:00 GMT

Hoy 25 de Mayo cumple 10 años de haber sido publicado el artículo “Responsive Web Design”. La frase fue usada por primera por Ethan Marcotte en la charla “A Dao of Flexibility”

En el post Responsive web design turns ten hay detalles historicos sobre el nacimiento del concepto, good stuff.

Generar slug en Gatsby

Sun, 24 May 2020 00:00:00 GMT

Hasta hace unos días, este sitio web corría sobre Drupal, por diferentes razones lo migre a Gatsby y lo moví de un servicio de hosting a Vercel, la experiencia ha sido muy buena, más que todo porque me ha permitido aprender.

Aparte del contenido, queria mantener sin varianción la URL de cada post, por la sencilla razón de que, los links a estos post continuen funcionando, como dice Chris Coyier URLs are the single greatest feature of the web.

Un pequeño problema que me encontré al migrar el contenido fue que, el slug default generado por Gatsby no se ajustaba a lo que necesitaba, porque los post los tengo agrupados por año, un folder por año, entonces las URLs me quedaban algo como <dominio>/<year>/<path> y necesitaba que fuera <dominio>/<category>/<path>

El slug

El slug ó path, es la pieza de la URL que identifica, en un formato amigable y de fácil lectura, la sección específica de un sitio web, por ejemplo, la URL completa de este post es https://leivajd.com/nota/generar-slug-gatsby, el slug es la última parte /nota/generar-slug-gatsby.

En un CMS es común poder personalizar el slug y es algo que damos por hecho. Con Gatsby, la generación del slug va a depender del data source que estemos usando, por ejemplo, si estamos usando algún tipo de headless CMS no hace falta generar el slug, como sí es necesario hacerlo cuando el contenido viene de archivos markdown.

Generar slugs

Todo el contenido de este sitio viene de archivos markdown, así que, necesite generar y personalizar los slugs de los posts para que coincidan con los originales. Un paso atrás antes de hablar más sobre slugs.

Gatsby permite generar secciones/pages de manera programatica, es decir, podemos hacer un query con GraphQL para obtener la data y relacionar esa data a un template específico, en este caso, el template de post; cómo crear páginas de manera programatica esta documentado y también es parte del tutorial paso a paso de cómo crear un sitio web con Gatsby.

El slug es fundamental, porque es la manera mediante la cual podemos acceder a ese contenido que generamos programaticamente. En la documentación se cubre el como generar slugs, y depende del plugin gatsby-source-filesystem, mismo que se usa en la configuración de consumir contenido desde archivos mardown.

Algunas opciones de como generar el slug cuando el contenido viene desde archivos mardown.

Agregar el slug en metadata

Posiblemente la manera más sencilla es, agregar el slug en la metada de cada archivo markdown, algo como:

---
slug: "/nota/generar-slug-gatsby"
date: "2020-05-24"
title: "Generar slug en Gatsby"
---

Y después consumir el slug, como se hace en la guía Adding Markdown Pages.

Usar onCreateNode para generar el slug

Podemos usar la función onCreateNode de gatsby-source-filesystem, la cual se ejecuta cuando se crea un node (en mi caso un post), y nos permite agregar un field nuevo. El ejemplo de abajo es de la documentación:

const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })

    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

El ejemplo anterior hace lo siguiente:

se condiciona a que el slug se cree solo cuando el tipo del node es MarkdownRemark
se usa la funcion createFilePath para generar el slug basado en el path (ruta) del archivo. Por ejemplo, si la ruta del archivo es 2013/intro-sass.md, el método retorna algo como /2013/intro-sass/
se usa la funcion createNodeField para agregar el field slug al nodo que se esta creando

Usar los datos del node para generar el slug

Basado en el punto anterior, y usando la función onCreateNode se puede extraer del node la informacion que se necesite para armar el slug. En mi caso, la metada del markdown se ve algo asi:

---
path: "/generar-slug-gatsby"
date: "2020-05-24"
title: "Generar slug en Gatsby"
type: "nota"
tags: ["JAMstack", "Web"]
---

Y la implementación es algo como esto:

se condiciona a que el slug se cree solo cuando el tipo del node es MarkdownRemark
se extraen los fields (type y patch)
se usa la función createNodeField para agregar el field slug al nodo que se esta creando

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    const type = node.frontmatter.type
    const path = node.frontmatter.path

    createNodeField({
      node,
      name: `slug`,
      value: `/${type}${path}`,
    })
  }
}

Para no olvidar:

JavaScript cumple 25 años

Sat, 23 May 2020 00:00:00 GMT

Este mes JavaScript cumple 25 años, y este paper JavaScript: The First 20 Years cuenta un poco sobre la historia, evolucion y diseño del lenguaje.

Google Developers: Café con Paco con Juan Pablo Buriticá

Tue, 19 May 2020 00:00:00 GMT

Juan Pablo Buriticá (@buritica), quien ha dirigido múltiples equipos distribuidos de ingeniería, habla sobre los retos y oportunidades que enfretan los equipos en estos tiempos de pandemia.

Algunas notas:

Preocuparse primero por la salud fisica y emocional de los miembros del equipo y de sus familias, si las necesidades basicas de los miembros no estan satisfechas, es imposible ser productivos.
Entender que no estamos trabajando desde casa, estamos encerrados en casa tratando de trabajar; las condiciones y distracciones son diferentes en estos tiempos de Covid-19
Redefinir que es alto rendimiento en estos tiempos de pandemia. No se puede esperar que un equipo de alto rendimiento sigue produciendo el mismo valor pre-covid19.
Tener objetivos claros y que el equipo se adueñe de ellos, si es importante en tiempos "normales", en este momento es mas relevante.
Confiar en el equipo, no hay peor cosa que micro management. Un equipo distribuido requiere que confiemos en la gente con que trabajamos, sino se confia en esa gente o no la contratemos o talvez no estemos calificados para liderar
Organizar la semana para trabajar de Lunes a Jueves, asi el Viernes se puede usar para ver todos los temas personales; hay que aceptar que el trabajo no a seguir pasando de la misma forma.
Menos reuniones, no todos vamos a poder estar presentes en el mismo momento y depender mas en comunicacion asincrona.
Hay que tomarselo con calma, no es una epoca para obsesionarnos en productividad sino en comunidad.

Imagenes decorativas

Mon, 18 May 2020 00:00:00 GMT

https://twitter.com/aardrian/status/1262060354118524931

Barreras para la accesibilidad web: degradados de color y lenguaje inclusivo

Fri, 15 May 2020 00:00:00 GMT

Vicent Sanchis: Barreras para la accesibilidad web: degradados de color y lenguaje inclusivo, una de las charlas del WordCamp España 2020, en el sitio web estan los videos de todo el evento.

Sobre el uso del atributo lang

Tue, 12 May 2020 00:00:00 GMT

El atributo de HTML lang especifica el idioma principal del contenido de un documento; para establecer el idioma que se quiere usar, se debe agregar el atributo a la etiqueta <html>:

<html lang="es">
  ...
</html>

El otro caso de uso para el atributo lang es cuando tenemos pedazos de texto que están escritos en un idioma diferente al idioma principal del documento, por ejemplo:

<html lang="en">
  ...
  <body>
    <p>This page is written in English.</p>
    <p lang="es">Pero este texto es en español.</p>
  </body>
</html>

El atributo acepta como valor, normalmente, dos letras; en el artículo ISO 2 Letter Language Codes tienen una lista de los diferentes valores. De toda esa lista los únicos que he usado son en para contenidos en ingles y es cuando es español.

Es muy fácil olvidarse de este atributo, creo que la razón es porque no tenemos claro para que sirve. En el post, ¿Por qué usar el atributo de idioma?, dan una explicación completa de los beneficios y se puede complementar con On Use of the Lang Attribute de Adrian Roselli.

Algunas razones por las que debemos usarlo:

Hyphens. Al usar lang obtenemos el beneficio de tener soporte para guiones (Hyphens). El soporte va a depender del browser que estemos usando, pero es un beneficio al fin para browsers modernos y se asume que estamos usando hyphens: auto en nuestro CSS.
Accesibilidad. Es un beneficio para usuarios de screen reader porque permite pronunciación adecuada del contenido.
Utilizar el atributo lang es un requisito nivel A de WCAG
Traducción. Abajo queda un extracto del artículo ¿Por qué usar el atributo de idioma?, vale la penar leerlo todo.

Las herramientas de traducción pueden utilizar los atributos de idioma para reconocer páginas o secciones de un texto en un idioma específico, y ajustar automáticamente el proceso de flujo de trabajo o proteger el texto de los cambios que pueda realizar el traductor en las herramientas de traducción.

Agregar DNS records en Vercel

Mon, 11 May 2020 00:00:00 GMT

Update 23/06/2020: Vercel tiene nuevo feature, actualizar DNS Records desde el UI, nice.

Hace un par de meses empece a usar Vercel.com, anteriormente llamado ZEIT, como servicio para hospedar landing pages y sitios web, el servicio esta maacute;s que recomendado.

Parte de la migración incluye actualizar los Nameservers en el proveedor de los dominios, y usar los de Vercel. Agregar un dominio a uno de los proyectos hospedados en Vercel es sencillo, esta bien documentado y se hace desde el panel de administración. El problema que encontré fue con los DNS records, al momento de escribir este post, actualizar los DNS no se puede hacer desde el panel de administración, esta es la solución:

Instalar el CLI de Vercel.
Inspeccionar que los settings del dominio sean correctos: vercel domains inspect <domain>
Agregar los DNS records usando el comando: vercel dns add

En mi caso, necesitaba agregar los registros para poder usar Gmail, fue algo como esto:

vercel dns add <domain> '@' MX ASPMX.L.GOOGLE.COM 1
vercel dns add <domain> '@' MX ALT1.ASPMX.L.GOOGLE.COM 5
vercel dns add <domain> '@' MX ALT2.ASPMX.L.GOOGLE.COM 5
vercel dns add <domain> '@' MX ALT3.ASPMX.L.GOOGLE.COM 10
vercel dns add <domain> '@' MX ALT4.ASPMX.L.GOOGLE.COM 10

Hay que reemplazar <domain> por el nombre de dominio :P

En la documentacion del CLI estan los detalles de cada comando, y la propagación de los Nameservers y los DNS records fue cuestión de un par de horas.

Entrevista a Guillermo Rauch, CEO de Vercel

Sat, 09 May 2020 00:00:00 GMT

Guillermo Rauch, CEO de Vercel, hablando sobre la inversión de US$21 millones que recibieron, de donde viene el nombre Vercel, el futuro del front end y más. Me gusta mucho como reitera la importancia de un hipervínculo.

Mobile First, gratis

Tue, 05 May 2020 00:00:00 GMT

El libro de Luke Wroblewski, Mobile First, se puede leer de manera gratuita en línea.

Gatsby JS Crash Course

Tue, 24 Sep 2019 00:00:00 GMT

Crash course de Gatsby, cubre la instalación básica y como usar markdown como fuente de los datos para un blog, ó similar.

Links accesibles y válidos

Sat, 14 Sep 2019 00:00:00 GMT

Consideraciones:

Los enlaces deben tener un atributo href que no esté vacío para que se consideren enlaces verdaderos y sean accesibles para los usuarios del teclado.
Los lectores de pantalla generalmente informan a los usuarios que un fragmento de texto (o un gráfico) es un enlace, por esta razón, los enlaces no necesitan incluir la palabra "enlace" ó "link" en el texto del enlace.
Los usuarios de lectores de pantalla a menudo navegan de un enlace a otro, saltándose el texto intermedio, los enlaces deben tener sentido fuera de contexto. Frases como "haga clic aquí", "más", "haga clic para obtener detalles", son malas prácticas.
Para que los efectos (:hover, :focus) sean independientes del dispositivo, es necesario asegurarse de que los enlaces se puedan activar con el mouse o con el teclado.
Asegúrese de que los enlaces tengan :focus

Nota:

Utilice un elemento de button si su enlace tiene:

un atributo href vacío o no
scripting ligado al elemento, por ejemplo, si se le da click ejecuta una acción en la misma página

Apariencia del enlace

El color por sí solo no se utiliza para distinguir los enlaces del texto circundante a menos que la relación de contraste entre el enlace y el texto circundante sea de al menos 3: 1 y se proporcione una distinción adicional (por ejemplo, se subraya) cuando se coloca el cursor sobre el enlace y recibe el foco.

Texto del enlace

    <a href="/products">Link text goes here</a>

Evite las frases de enlace poco informativas, como: haga clic aquí, aquí, obtenga más información, más, enlace a [algún destino de enlace], etc.
A efectos prácticos, el enlace debe ser lo suficientemente largo para transmitir el propósito del enlace y no más. Los enlaces cortos y concisos tienen menos probabilidades de frustrar a los usuarios de lectores de pantalla que los enlaces largos e imprecisos.
El texto del enlace debe tener una relación de contraste de 3:1 con respecto al texto sin enlace que lo rodea.

URL como enlaces

    <a href="https://www.backcountry.com/sc/backcountry-gearheads#section-tab2">Stoke Series Events</a>

Es mejor utilizar texto legible por humanos en lugar de la URL.
Si la URL es relativamente corta (como la página de inicio de un sitio), la URL se puede utilizar como texto del enlace. La clave es ser considerado con los usuarios de lectores de pantalla que deben escuchar las URL más largas y menos inteligibles.

Texto alternativo para imágenes utilizadas como enlaces

<a href="url/path">
    <img src="path/to/image.jpg" alt="Convey the content of the image and the function of the link">
</a>

Siempre que una imagen sea el único contenido dentro de un enlace, la imagen DEBE recibir un texto alternativo que presente la función de ese enlace.

Acerca del atributo de `title`

No se recomienda utilizar el atributo title en elementos . El atributo de title no está expuesto por todos los navegadores de forma accesible, lo que significa que las personas que usan teclados y dispositivos táctiles probablemente nunca verán esa información.

WCAG 2.0 references

Sources

Introducción a PWA

Fri, 06 Sep 2019 00:00:00 GMT

Mi charla sobre Introducción a PWA fue aceptada en el WordCamp San José 2019, evento que se realizó los días 7 y 8 de Setiembre. Si hay feedback ó sugerencias para mejorar la charla y/o mi manera de exponer, me pueden tuitear @leivajd ó escribir a leivajd [@] gmail.com.

Slides: Introducción a PWA

Introducción a PWA from Jose Leiva

Abajo quedan los recursos que he usado como base para trabajar y que son la base de la charla.

Lectura obligatoria

El punto de partida, la documentación "oficial":

Going Offline de Jeremy Keith. Posiblemente el mejor recurso para iniciar, por ser corto, fácil de seguir y práctico.
Service Workers: an Introduction. - Google
The Service Worker Lifecycle. - Google
The Web App Manifest. - Google
The Offline Cookbook. - Google

Sobre PWA

The name isn’t for you and worrying about it is distraction from just building things that work better for everyone. The name is for your boss, for your investor, for your marketeer.

La cita anterior es de Frances Berriman, de su post Naming Progressive Web Apps, buena lectura. También vale la pena leer Progressive Web Apps: Escaping Tabs Without Losing Our Soul, de Alex Russell, son lecturas que tiran una luz sobre el origen del nombre.

Getting Started with Progressive Web Apps. - Google.
Your First Progressive Web App. - Google.
Add to Home Screen. - Google. Criterios para que Chrome despliegue el prompt de Add to Home Screen.
The Building Blocks Of Progressive Web Apps. - Smashing Magazine.
Progressive Web Apps Training. - Google. Lo dejo de último porque es más largo, pero cubre las diferentes partes.

Entre más leía y probaba Services Workers, más miedo me daba quedar "atrapado" con un Service Worker defectuoso. Esto me llevo a meterle tiempo a encontrar como "matar" un Service Worker, aquí quedan algunos links interesantes:

Kill Switch; un ejemplo dentro de la especificación de Clear Site Data de la W3C
Mess up & learn: service worker caching gotchas.
Fresher service workers, by default - Google
How to Uninstall, Unregister or Remove a Service Worker.
Alexander Pope: ServiceWorkers Outbreak | JSConf EU 2017. Un buen video para subir el nivel de ansiedad :D

Publicar en Play Store

Google permite que un PWA se publique en Play Store, bajo el concepto de Trusted Web Activities (TWA).

Using Trusted Web Activities - Google.
Trusted Web Activities Quick Start Guide - Google.

Con estos post hay que validar que aún aplique, hace 3 meses eran válidos, a hoy no sé.

Herramientas

Progressive Web App Checklist - Google.
What Web Can Do Today. Util para visualizar el estado de APIs disponibles en el browser.
Serviceworke.rs. Un cookbook de MDN.
PWA Builder. Un proyecto comunitario de Microsoft.
Workbox. Es una serie de librerias y modulos de Node que nos permiten facilitan integrar la creación del Service Worker, usando Webpack ó Grunt, y crear estrategias de cache sin tanto boilerplate.

What makes someone a good front-end developer?

Thu, 31 Jan 2019 00:00:00 GMT

The least important skills for a front-end developer to have are technical ones.

La parte técnica se puede aprender, y se aprende trabajando, buen artículo.

TL;DR:

Problem-Solving: just breaking a big thing into smaller parts and tackling them one at a time
Googling: being able to craft a search term that gets to the root of what you want to do and finds valuable content online is a real, valuable skill.
Critical Thinking: sort the signal from the noise and make more informed decisions is super important. It’s also a skill that you’ll suck at at first and get better at over time as you gain more experience.
Empathy: empathetic web development means understanding that users bring many different experiences and abilities with them, and building things accordingly.
Communication: the developers who are most effective at working on teams are not always the best coders. They’re the best communicators.

Designing your website like it’s 2018

Wed, 26 Dec 2018 00:00:00 GMT

Andy Clarke:

The biggest lesson I’ve learned over the past two decades is that techniques and tools come and go with increasing regularity, but the importance of learning how to develop meaningful markup and use CSS appropriately will be as important twenty years from now as it today.

Senior Engineer - Master Brewer

Sat, 08 Dec 2018 00:00:00 GMT

Episodio del podcast FrontEnd Happy Hour sobre qué es un Senior Software Engineer.

Cognitive Biases in Programming

Sun, 12 Nov 2017 00:00:00 GMT

Hyperbolic Discounting: Going for an immediate payoff instead of a delayed larger one

IKEA Effect: Overvaluing your own solutions to a problem, and thus in contrast undervalue other solutions

Premature Optimization: Optimizing before you know that you need to

Planning Fallacy: Optimistically underestimating the time required to complete a task

Recency Bias: Placing higher value on recent events than ones that occurred further in the past

What Makes A Senior Software Engineer

Tue, 06 Jun 2017 00:00:00 GMT

...Junior Engineers are going to be building on the work already done by Senior Engineers. Senior Engineers essentially multiply the work they do by creating technologies/architectures that enable other engineers to write better code.

Ooh yeah, React

Tue, 30 May 2017 00:00:00 GMT

Actualizado 10/07/2021 JavaScript to Know for React, de Kent C. Dodds, cubre funcionalidades de JavaScript que deberíamos de saber cuando se trabaja con React. Un resumen:

Template Literals
Shorthand property names
Arrow functions
Destructuring
Parameter defaults
Spread y rest
Nullish coalescing operator
Optional chaining

Recursos
https://thinkster.io/tutorials/getting-started-with-react
The Beginner's Guide to React by Kent C. Dodds, posiblemente la mejor guía.

The Work You Do, the Person You Are

Tue, 30 May 2017 00:00:00 GMT

...I have never considered the level of labor to be the measure of myself, and I have never placed the security of a job above the value of home.

Whatever the work is, do it well—not for the boss but for yourself.

You make the job; it doesn’t make you.

Your real life is with us, your family.

You are not the work you do; you are the person you are.

Aprendiendo MongoDB

Wed, 10 May 2017 00:00:00 GMT

Recursos:

Por supuesto, MongoDB University
Conceptos Básicos 1 - Introducción a NoSQL

How to audit Drupal Sites for performance, content and best practices

Wed, 29 Mar 2017 00:00:00 GMT

Leading by Speaking

Thu, 23 Mar 2017 00:00:00 GMT

Lara Hogan at The Lead Developer New York 2017

Strategies for Cache-Busting CSS

Sat, 04 Mar 2017 00:00:00 GMT

Util:

Ahora muchos de mis assets se ven así style.20170303.css.

The world's first website went online 25 years ago today

Tue, 09 Aug 2016 00:00:00 GMT

Ya han pasado 25 años desde que el primer website se publicó. ¡Larga vida a la Web!

How to Think About Your Career

Tue, 02 Aug 2016 00:00:00 GMT

Cómo pensar sobre nuestra carrera profesional:

So don’t ask “What does it take to get a promotion?” Ask instead: “How can I be doing more to help make our customers (or would-be customers) happy?” Ask “What skills should I be developing to help me increase my impact?”

Hidden Expectations

Tue, 02 Aug 2016 00:00:00 GMT

Un post de Dave Rupert, sobre las expectativas que están ocultas.

Over the years I’ve come to realize that most difficult part of making websites isn’t the code, it’s the “hidden expectations”, the unseen aspects I didn’t know were my responsibility when I started: Accessibility, Security, Performance, and Empathy.

Typography Handbook

Thu, 14 Jul 2016 00:00:00 GMT

A concise, referential guide on best web typographic practices.

Build Your Annex

Wed, 13 Jul 2016 00:00:00 GMT

If you don’t see a path upward, make your path outward. Build your annex.

Laziness in the Time of Responsive Design

Wed, 06 Jul 2016 00:00:00 GMT

Una charla de hace 2 años, pero todos los tips siguen vigentes.

Sticky headers

Fri, 01 Jul 2016 00:00:00 GMT

Este Jeremy Keith, que cuando va a hacer algo lo piensa bien, en este caso, Sticky headers!

...a few things to consider if you’re going to make a navigational element “sticky”:

Use min-height in your media query,

Take care of keyboard-initiated page scrolling,

Adjust the positioning of in-page links.

Spotify Engineering Culture

Tue, 23 Feb 2016 00:00:00 GMT

Dos video que muestran como Spotify aplica Scrum, y hablan mucho sobre su cultura.

Treinta y cuatro

Tue, 29 Sep 2015 00:00:00 GMT

Treinta y cuatro cosas que he aprendido en treinta y cuatro años.

El tiempo perdido no se recupera, nunca.
Necesito dormir al menos 7 horas para sentirme descansado.
Me gusta ver televisión.
Puedo pasar todo un fin de semana sin salir de mi casa viendo televisión.
La mejor decisión que pude tomar fue cancelar la televisión por cable.
Prefiero leer que ver televisión.
Me gusta releer mis libros favoritos.
Me cuesta escuchar música nueva.
Disfruto correr.
De correr, lo que más me gusta es poder pasar tiempo solo.
Puedo manejar durante horas sin decir una palabra, y no me molesta, de hecho, lo disfruto.
Prefiero escuchar que hablar.
Admiro a la gente que pueda mantener una conversación, no importa cual sea el tema.
Entrenar Jiu Jitsu ha sido la mejor decisión "deportiva" que he tomado.
Nunca se tienen suficientes kimonos.
Nunca se entrena suficiente.
Siempre hay alguien mejor que uno.
Realmente lo que importa es el proceso/esfuerzo no el resultado.
Nada que valga la pena es fácil.
Dejar de fumar no fue tan difícil como creía.
Tener un trabajo con flexibilidad de horario es lo mejor!
No puedo trabajar en algo que no me apasione.
3.75 de 4 veces los papás tienen razón.
La carne de res no me gustaba tanto como creía.
Las mejores comidas son con la gente que uno quiere.
Cocinar es una de las cosas que más me gustan y disfruto.
Me gusta ver la cara de gente cuando comen algo que cocine.
Me gusta cocinar para gente que quiero.
Pero a veces, cuando termino de cocinar me siento fuera de lugar.
Los buenos amigos son pocos.
Lo más importante es la familia, y no siempre son de sangre.
Quiero gastarme todo el dinero viajando y comiendo.
Los apretones de manos que no son firmes me generan desconfianza.
Sigo pensando que todo va a salir bien.

How to Age Gracefully

Mon, 31 Aug 2015 00:00:00 GMT

Só.li.do!

Trust Nothing, Murder Most

Fri, 28 Aug 2015 00:00:00 GMT

Mike Monteiro, sobre defender ideas solo por que sí

To design is to solve problems. To be a designer is to be driven by the need to find something that needs solving (of which there is never a shortage), and to do the work of coming up with the right solution. Knowing if it is the right solution means replacing what wasn’t working with your proposed solution and waiting to see if the situation improves.

Collaborative Development Using Github and Pantheon

Wed, 20 May 2015 00:00:00 GMT

Pantheon y y Github son cool, los dos juntos son recool :)

While Pantheon provides Git repositories for all sites on the platform, many teams need to use an external repository hosted at a provider, like Github or BitBucket, as the canonical version of the site's codebase. This guide will show you how to get up and running using a Github account as the example, although the steps should be similar for any provider.

JavaScript 101

Thu, 14 May 2015 00:00:00 GMT

Scope and `this`

Scope and this in JavaScript

Conditions

Drupaleada Febrero - Responsive en Drupal

Thu, 19 Feb 2015 00:00:00 GMT

El día de ayer se realizó la Drupaleada de Febrero en Origami. Las charlas fueron sobre Drupal Theming y Responsive en Drupal, esta última la dió Alberto Rojas de Manatí; los slides, los cuales tienen links a recursos muy buenos.

Como prefiero usar menos módulos, recomendaria no usar FitVid para videos "flexibles", y hacer la mágia con puro CSS, ejemplo en CodePen

Responsive en Drupal from Alberto Rojas

DrupalCon Latino 2015 - Bogotá

Wed, 18 Feb 2015 00:00:00 GMT

Big win for me ;)

Mi charla sobre Arquitectura y CSS fue aceptada en el DrupalCon Latino 2015. Formar parte del line up fue un gran honor, y poder compartir un poco de lo que he aprendido fue todo un gusto.

Si hay feedback ó sugerencias para mejorar la charla y/o mi manera de exponer, me pueden tuitear @leivajd ó escribir a leivajd [@] gmail.com.

Los slides y el video están disponibles.

¡Nos vamos para Colombia!

Tue, 13 Jan 2015 00:00:00 GMT

Super emocionado y nervioso, mi charla de CSS fue aceptada en el DrupalCon LatinAmerica 2015, ¡nos vemos en Bogotá!!

CSS, arquitectura y proyectos complejos

Mon, 13 Oct 2014 00:00:00 GMT

Este post es mi intento de recopilar, y tener a la mano, referencias y algunas notas sobre arquitectura de CSS/Sass y buenas prácticas, tips & tricks en proyectos complejos.

A considerar

Beware of Selector Nesting in Sass

Videos

Nicolle Sulliva, sobre CSS preprocessor performance, living style guides y tips para Sass, y unos slides (mismo tema pero no se si es de la misma charla del video)

Extras

Slides Responsive Typography

Git, cómo configurar alias

Tue, 26 Aug 2014 00:00:00 GMT

Pasos simples para usar alias en los comandos de git, por ejemplo, en lugar de escribir git status, podemos solo hacer gst:

abrir ~/.gitconfig
agregar las líneas de alias, formato [shortcut]=[original command]

Mis alias por ejemplo son:

[alias]
    st = status
    pl = pull
    co = checkout
    br = branch
    ps = push
    mdev = merge develop
    ci = commit -m

Una vez hecho el cambio, en lugar de ejecutar git status, puedo hacer git st.

Sprites en Sass & Compass

Tue, 26 Aug 2014 00:00:00 GMT

Buen artículo para iniciar a trabajar con Sprites, Spriting with Sass and Compass.

Magic Module

Thu, 24 Jul 2014 00:00:00 GMT

Magic module, pura mágia para front end. Un video del Drupal Camp Austin en el que se explica como usarlo, ventajas y ejemplos.

Behold, the Fold

Fri, 11 Jul 2014 00:00:00 GMT

The bottom of your screen may be very different than the bottom of my screen. With thousands of devices in use and all with vastly different resolution, there is no way to predict where the bottom of a viewport will fall...

We should design pages with the assumption that users are going to start at the top and work their way down, so the most important things should be at the top. The design and layout should encourage visitors to want to learn more as they move down a page.

GruntJS

Sun, 06 Jul 2014 00:00:00 GMT

Oh wow! Esa fue mi reacción la primera vez que vi como funcionaba Grunt.

La parte de "Task Runner" se refiere simplemente a automatización de tareas, y por tareas me refiero a procesos como: concatenar archivos, minificar JavaScript o CSS, optimizar imagenes o usar un lint en nuestro JavaScript. Cada una de estas tareas es manejada por un plugin de Grunt.

Como usar Grunt

La documentación es bastante completa y nos guía desde como instalarlo hasta como usar los plugins.

Instalar Node.js y nmp (Node.js package manager)
Instalar Grunt CLI globalmente con npm install -g grunt-cli (puede ser que necesitemos sudo)
Dos archivos son requeridos en nuestro proyecto, package.json & Gruntfile.js. Los cuales incluimos en el root del proyecto, o en root de nuestro theme, si estamos trabajando con Drupal.

Una vez que tenemos lo básico, podemos instalar plugins. Lo más sencillo es corriendo desde la terminal:

$ npm install [plugin] --save-dev

Donde [plugin] es el nombre del plugin que queremos instalar, el argumento --save-dev le dice a npm que instale localmente (solo para el proyecto en cuestión), y que agregue la referencia al plugin en la sección de devDependencies del archivo package.json Opciones y como configurar cada plugin se detalla en la documentación.

Despues de configurar las tareas, podemos correr Grunt, con:

$ grunt

Esto correra las tareas que tengamos en default; si tenemos un alias, que el nombre sea build y que corra tareas para cuando estamos listos para ir a produccion, podemos hacer

$ grunt build

Más información

Algunos recursos a parte de la documentación,

Un ejemplo en GitHub del theme con los plugin y configuración que estoy usando.
Grunt for People Who Think Things Like Grunt are Weird and Hard en 24Ways.
Introducción a Grunt, en 7Sabores.
Theme development with Grunt, en ChapterThree
Grunt no es el único task runner, Gulp es otra opción, al parecer un poco más sencilla de usar y configurar.
Choose: Grunt, Gulp, or npm?
DrupalCon Austin 2014: Getting started with Grunt.

Google I/O 2014 - Perf culture

Wed, 02 Jul 2014 00:00:00 GMT

Lara Swanson y Paul Lewis poniendo los puntos sobre las "i" en performance, y como tener un mejor rendimiento, es un trabajo en equipo.

Notas relacionadas:

Building a Device Lab

Drupal WYSIWYG Best Practices

Tue, 01 Jul 2014 00:00:00 GMT

Drupal WYSIWYG Best Practices, post de ChapterThree sobre una receta para instalar y cofigurar un WYSIWYG.

SMART

Mon, 12 May 2014 00:00:00 GMT

SMART, con ejemplo, lo saca de acá :)

If you don’t know what SMART criteria are, a quick reminder:

Specific – I will run a Marathon

Measurable – In 3.45 or faster

Achievable – I can dedicate between 10 to 15 hours of weekly training, half of it being focused directly on running

Realistic – I ran fresh half marathon in 1:46 and run part onf IM 70.3 in 1:55.

Time Related – North Shore Marathon takes place on 7th of September.

Progressive Disclosure

Fri, 09 May 2014 00:00:00 GMT

Viejo, pero relevante. Un artículo sobre Progressive Disclosure, en qué consiste y cómo se diferencia de Staged Disclosure; un par de conceptos que se deben manejar al momento de crear mejores experiencias de usuario.

Progressive disclosure is..

Initially, show users only a few of the most important options.

Offer a larger set of specialized options upon request. Disclose these secondary features only if a user asks for them, meaning that most users can proceed with their tasks without worrying about this added complexity.

Life Advice: How should a 22-year-old invest time?

Tue, 29 Apr 2014 00:00:00 GMT

Son seis consejos, este me gusta.

Become as independent as possible. Even if you work at a big company, constantly make small steps to reduce your dependence on your job. Write a book, build an app, or start a small business on the side. Release your inner entrepreneur. Even if you fail, you'll build skills.

Sass Bites #19 - Sass 3.3 Overview

Tue, 22 Apr 2014 00:00:00 GMT

Sass 3.3 Overview.

Who is a Good Programmer?

Tue, 22 Apr 2014 00:00:00 GMT

Ed Weissman:

To another programmer, the programmer they are most likely to want to go into battle with is a good programmer.

Introducing Typekit Practice

Sun, 20 Apr 2014 00:00:00 GMT

Tim Brown, Typekit:

Fonts are great, but using them well can be hard. Volumes have been written about typography, yet every good designer will say there are no rules; there is no magic formula for success. Typography simply takes practice. Typography is a practice.

So today, we’re launching a new website: Typekit Practice, a place where novices and experts alike can hone their typographic skills. We hope it will help students learn, help teachers teach, and help professionals stay sharp.

The Values of the Web

Mon, 07 Apr 2014 00:00:00 GMT

So true.

I don’t work in the tech industry. I work on the Web.

Quick Look plugins

Mon, 13 Jan 2014 00:00:00 GMT

Quick Look plugins for developers. Instalandolo extendemos el quick look del finder en Mac, good stuff.

How to configure git to push only your current branch

Mon, 16 Dec 2013 00:00:00 GMT

Explicación de como cambiar a cual branch se hará push cuando corremos el comando git push.

git config --global push.default current

Chrome DevTools for Mobile: Screencast and Emulation

Fri, 06 Dec 2013 00:00:00 GMT

Remote debugging y mobile emulation, dos de las nuevas funcionalidades de Chrome DevTools, en html5Rocks los detalles. Lo único "malo", para usar el remote debugging es necesario hacerlo con 'Android' things :(

Advanced JavaScript Debugging with console.table()

Thu, 05 Dec 2013 00:00:00 GMT

Los devTools de Chrome nos trae una nueva funcionalidad para debuguear JavaScript, la function console.table(), good stuff.

Why you should move that button 3px to the left

Wed, 04 Dec 2013 00:00:00 GMT

Una buena lectura, algunos tips sobre como convencer a los ingenieros y gente de negocios del equipo para que se preocupen por los detalles del diseño, buenos tips.

Right click, open with Sublime Text 2

Mon, 04 Nov 2013 00:00:00 GMT

Tip para Mac users; creando un nuevo service con Automator podemos abrir, directamente en Sublime Text 2, folders y files con click derecho. Sólido!

Emmet

Sat, 26 Oct 2013 00:00:00 GMT

Emmet es un plugin que nos ayuda a mejorar nuestro flujo de trabajo. Una vez instalado en nuestro editor, yo uso Sublime Text, hace que escribir HTML y CSS sea mucho más rápido, esto gracias a las abreviaciones y sintaxis que pone a nuestra disposición.

La sintaxis es muy fácil de usar, si sabes CSS la curva de aprendizaje se simplifica aún más, ya que, esta inspirado en los selectores de CSS, y su uso esta muy bien documentado en el sitio web de Emmet.

Instalar Emmet en Sublime Text usando Package Control:

Abrir “Package Control: Install Package”, buscar e instalar Emmet plugin.
Reiniciar ST

En Emmet, algo como esto: div.wrap>(header.header>nav.menu>ul>li*2>a{Item})+div.main>div.content+div.sidebar^footer.footer

Se convierte en:

<div class="wrap">
  <header class="header">
    <nav class="menu">
      <ul>
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
      </ul>
    </nav>
  </header>
  <div class="main">
    <div class="content"></div>
    <div class="sidebar"></div>
  </div>
  <footer class="footer"></foote>
</div>

Good stuff!!

JavaScript for Designers - Rachel Nabors

Thu, 17 Oct 2013 00:00:00 GMT

Rachel Nabors explicando los principios básicos de JavaScript, enfoca en diseñadores, so much fun. Acá están los slides, y un post en su blog con más detalles, donde se pueden seguir los ejemplos y los links recomendados.

Do

Wed, 25 Sep 2013 00:00:00 GMT

La receta personal de Dustin Curtis para el éxito y la felicidad:

Wake up early. Show up. Learn how to think. Be genuine, but appear nice. Use envy for motivation instead of destruction. Do what you say you’re going to do. Ensure balance in every area of your life. Confront repressed thoughts immediately. Surround yourself with people who are better than you (but remember the thing about envy). Work out every day. Be good at what you do. Make money doing what you love. Have good friends. Never settle.

DrupalCon Prague 2013

Wed, 25 Sep 2013 00:00:00 GMT

El DrupalCon Prague 2013 se esta llevando a cabo este mes, los videos de las charlas se van publicando super rápido en el canal de Youtube de la Asociación, mucho que ver y aprender.

Do

Wed, 25 Sep 2013 00:00:00 GMT

CSS module system in Google+ por Shubhie Panicker en CSSconf.eu 2013, enfoque modular para trabajar con CSS, el caso práctico es Google+.

Apuntes DrupalCamp Costa Rica 2013

Thu, 19 Sep 2013 00:00:00 GMT

Hace una semana estabamos terminando de afinar detalles para lo que fue el mejor evento, a la fecha, sobre Drupal en el país, el DrupalCamp Costa Rica 2013. Fue un evento de dos días en el que tuvimos talleres y charlas de diferentes niveles, las cuales fueron impartidas por gente que sabe de Drupal y gente que hace Drupal, como Crell, lo que elevo por mucho el nivel de las charlas; la asistencia al evento fue de alrededor de 310 personas, con visitantes de lugares como Israel, México, Guatemala, Panamá y los Estados Unidos.

El cuidado en los detalles, como las camisetas y tener un barista durante el evento, así como el nivel técnico de las charlas y expositores, son elementos que han marcado este DrupalCamp y nos pone un nuevo punto de referencia para ir pensando en el evento del próximo año.

Quick Links

Links a charlas:

Be a Hero - Drupal Performance por David Flores.

Notas relacionadas con el evento:

Nota en Semanario Unversidad sobre el evento: Costa Rica se abre espacio en el mercado del Drupal
Post en el blog de Anexus IT: Drupal Camp Costa Rica 2013 Insight

Los amigos del Drupodcast, David Flores y Jesús Manuel Olivas dedicaron un episodio de su show para hablar sobre el Camp, su experiencia como expositores y elementos destacables del evento.

Como parte de la organización del evento, me siento muy feliz por el producto final que tuvimos, el tiempo y recursos que todos dedicamos valieron la pena. Gracias a los asistentes, al equipo organizador, staff, charlistas y patrocinadores, sin su participación el DrupalCamp Costa Rica 2013 no hubiera sido una realidad. Nos vemos en el siguiente DrupalCamp!

Best Practices for building Big Drupal

Wed, 18 Sep 2013 00:00:00 GMT

Un post resumen de la charla Best Practices for building Big Drupal de John Robert Wilson, Software Architect de Phase2, la cual impartió en el DrupalCamp Costa Rica 2013.

Creating an Environment for Creativity and Empowerment

Mon, 16 Sep 2013 00:00:00 GMT

Ben Chestnut, de Mailchimp, habla sobre como crear espacios que fomenten la creatividad, y todo con solo un slide.

Sass & Compass - DrupalCamp CR

Sat, 14 Sep 2013 00:00:00 GMT

Slides de mi charla Sass & Compass.

Designers, know your medium

Mon, 26 Aug 2013 00:00:00 GMT

Scott Kellum lo deja muy claro, si sos diseñador web, tenés que conocer tu medio.

Code is the language of the medium and without knowing it you are going to end up frustrated and unable to communicate clearly with your team. Learn code and you will be able to execute better ideas faster.

Responsive Web Design is Solid Gold

Mon, 26 Aug 2013 00:00:00 GMT

Hace unos años Jason Grigsby siempre utilizaba device detection para crear un sitio móvil, a menos que no hubiera razón para hacerlo, pero cambió de opinión al respecto. En este momento él siempre crea un sitio web responsive, a menos que haya una buena razón para no hacerlo.

En este artículo explica por qué cambió de opinión. Gran lectura. Asegúrense de leer también los comentarios.

How to Display Maps using GMap, Views and Location in Drupal 7

Fri, 23 Aug 2013 00:00:00 GMT

Un tutorial sobre como desplegar mapas usando los módulos GMap, Views y Location.

Extra tip: Comparison of mapping modules

Multilingual CSS generated content in Drupal

Fri, 23 Aug 2013 00:00:00 GMT

Contenido generado desde CSS, con un toque de jQuery, traducible, vale la pena leer el post.

Mixins, extends & placeholders

Fri, 16 Aug 2013 00:00:00 GMT

Mixins, extends y placeholders son de las features más robustas que tiene Sass, pero a veces la diferencia entre uno y otro puede ser poco clara cuando queremos decidir cuando usarlos, acá algunos links para que nos iluminen el camino:

High Performance Drupal

Thu, 08 Aug 2013 00:00:00 GMT

High Performance Drupal, se puede leer en línea, preview del libro que está pronto a ser publicado.

Mobilism 2013

Thu, 08 Aug 2013 00:00:00 GMT

Mobilism es una conferencia sobre desarrollo web, enfocado en móviles. Los videos de las charlas están disponibles, hay mucho material y los speakers son de primer nivel.

In Between, o como los detalles importan

Thu, 01 Aug 2013 00:00:00 GMT

Tres charlas sobre Responsive Web Design, David Bushell en unos 20 minutos muestra ejemplos y patrones en Responsive Navigation, Paul Robert Lloyd, en The edge of the Web habla sobre como los diseñadores web debemos entender la naturaleza de nuestro medio y Mark Boulton en In Between, habla sobre los "límites", o falta de ellos, en web; como complemento a la charla Boulton, está este post en su blog, en el que habla un poco más sobre macro y micro breakpoints.

Detalles y decisiones que debemos tomar, cuando trabajamos para la web. Estos videos son de la conferencia Responsive Day Out, hay otros videos en Besquare, un privilegio tener acceso a este tipo de contenido y speakers.

DrupalCamp Twin Cities

Thu, 01 Aug 2013 00:00:00 GMT

El DrupalCamp Twin Cities se realizó en mes pasado, y en el canal de Youtube de la comunidad ya están disponibles los videos de las charlas.

Modificando el despliegue de resultados, Taxonomy page

Tue, 30 Jul 2013 00:00:00 GMT

Como siempre, en Drupal hay 189 maneras(??!!) de resolver un problema. Para este caso, mi necesidad era modificar el despliegue, estructura y orden, de los resultados de la página general de taxonomías, digamos lo que obtendría como resultado al entrar a una sección como esta /taxonomy/term/9.

El camino fácil, habilitar el display por default que tiene Views, y desde la configuración del View podemos modificar los fields que queremos mostrar y su estructura. Para casos más complejos, se puede utilizar el módulo Taxonomy Display, que nos ofrece mayor control al momento de configurar como queremos que se despliegue un page de taxonomís.

Style Placeholder Text

Tue, 30 Jul 2013 00:00:00 GMT

Snippet recomendado, darle estilo a placeholder.

::-webkit-input-placeholder {
  color: #333;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #333;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #333;
}

:-ms-input-placeholder {
  color: #333;
}

Jeffrey Zeldman – Content First

Fri, 26 Jul 2013 00:00:00 GMT

Zeldman con su charla Content First en An Event Apart, habla sobre lo importante que es el contenido, como no tenemos control sobre el diseño y deja muy claro que, si el diseño no sirve a los usuarios, tampoco le sirve al negocio.

Introducción a Sass

Thu, 18 Jul 2013 00:00:00 GMT

Mi presentacion, Introducción a Sass, en la Drupaleaa de este mes. Recursos recomendados:

Por donde empezar

Libros

The main element

Fri, 12 Jul 2013 00:00:00 GMT

Tenemos nuevo elemento en el spec de W3C HTML , <main>. En html5 Doctor hacen todo un recorrido sobre la historia, lo que dice la especificación y como implementar el elemento en nuestros proyectos.

10 Ways to Be Your Own Boss

Thu, 11 Jul 2013 00:00:00 GMT

Fred Wilson, venture capitalist de Union Square Ventures, quienes han invertido en Twitter y Foursquare, habla sobre 10 maneras de ser nuestro propio jefe, con ejemplos cercanos a él. La charla es parte de 99U, esfuerzo de Behance en la que comparten insights que nunca estudiamos en la universidad; vale la pena sumergirse en el archivo de videos y artículos.

BIF-7: Dan Pink

Wed, 10 Jul 2013 00:00:00 GMT

Dan Pink narrando una historia sobre como los side projects sí funcionan, pero para encontrar aquellos proyectos viables necesitamos fracasar muchas veces.

Ouch!

Tue, 09 Jul 2013 00:00:00 GMT

Tip rápido, escribir variables de una manera modular.

$color-border;
$color-border-dark;
$color-border-light;
$color-highlight;
$color-link;
$color-link-dark;
$color-link-light;
$color-text;
$color-text-light;
$color-text-lightest;

Una lectura un poco más larga sobre el tema, Thoughts For Better Variable Organization In SASS.

Ouch!

Tue, 09 Jul 2013 00:00:00 GMT

Tina Roth Eisenberg, sobre como debemos cuidar hasta el último detalle, siempre:

Don’t slam the door into a former customer’s face. Just don’t. Be thoughtful, courteous and graceful until the very end. Please.

OOCSS + Sass

Tue, 09 Jul 2013 00:00:00 GMT

Dos charlas de Nicole Sullivan (@stubbornella) sobre OOCSS y Sass:

Sass Style Guide

Fri, 05 Jul 2013 00:00:00 GMT

Una excelente idea de Chris Coyier de css-tricks.com, desarrollar nuestro propia guía de como escribir Sass en nuestros proyectos, muy útil cuando trabajamos en equipo ó para tener estandar si trabajamos solos.

Wences Casares: Teach Your Children to be Doers

Fri, 05 Jul 2013 00:00:00 GMT

Wences Casares en The Accelerators, de lo mejor que he leído sobre emprendedores:

Entrepreneur is a fancy word for “doer.” Some people are good at thinking, analyzing, observing, describing or expressing. But entrepreneurs are great at getting things done.

Airbnb Design Talk with Luke Wroblewski

Thu, 27 Jun 2013 00:00:00 GMT

Charla de Luke Wroblewski en Airbnb; habla desde Mass Media hasta como podemos simplificarle el trabajo a los usuarios cuando usan nuestras aplicaciones ó sitios web.

Talking Drupal

Wed, 26 Jun 2013 00:00:00 GMT

Me están gustando estos podcast/Hangouts/grabaciones/charlas/tertulias que andan dando vueltas por la red, recien encontre Talking Drupal. Claro, hay que recomendar en español el Drupodcast.

Como desinstalar packages de Sublime Text 2

Mon, 17 Jun 2013 00:00:00 GMT

Abrir packages, en Win con teclas CTRL + SHIFT + P, en Mac Command + SHIFT + P
Digitar Remove Package en la barra.
Seleccionar el paquete que se desea remover y presionar enter

Setting Up Sass on Windows

Mon, 17 Jun 2013 00:00:00 GMT

Hay muchos post y tutoriales sobre Sass, y CSS preprocessors, y la gran mayoría esta enfocado en usuarios de Mac. Este tutorial sobre como instalar Sass en Windows me ha servido como referencia, ya que trabajo tanto con Mac como en Windows.

A handful of tools

Fri, 14 Jun 2013 00:00:00 GMT

Como me siento ante themes de terceros:

I would recommend staying away from frameworks until you really have a grasp on what you are doing. Learn it on your own before you rely on someone else’s code to do your work for you. - Noah Stokes

A handful of tools

Fri, 14 Jun 2013 00:00:00 GMT

I like having a service I can pay for, because when you buy something, you're the customer, not the product. - Seth Godin

Views Responsive Grid

Sun, 09 Jun 2013 00:00:00 GMT

Views es uno de los modúlos más famosos y poderosos de Drupal. A pesar de que en funcionalidad ha ido escalando, el display en formaro grid se mantiene igual, en formato de table, lo que dificulta nuestra labor cuando queremos crear grids, peor aún si lo hacemos bajo un enfoque de responsive web design.

Al instalar el modúlo Views Responsive Grid, agregamos un plugin nuevo para Views, y vamos a tener la opción de desplegar información en un formato responsive friendly cuando seleccionemos la opción de Grid, es decir, en lugar de un table, vamos a tener una serie de div a los que les podemos agregar clases personalizadas.

Everything you always wanted to know about touch icons

Thu, 06 Jun 2013 00:00:00 GMT

“Touch icons” are the favicons of mobile devices and tablets.

Vía @betovarg.

You become who you pretend to be

Thu, 06 Jun 2013 00:00:00 GMT

James Victore es un badass, y desde hace un rato soy fan de sus series de video, la nueva se llama Burning Questions. En el episodio Serious about Pretending, da algunos tips sobre como creernosla, y así llegar a ser quienes queremos ser.

Sobre el mismo tema, TedTalk - Your body language shapes who you are, recomendado.

Just One of Those Weird Things About CSS: Background on

Tue, 04 Jun 2013 00:00:00 GMT

Una situación con el que me he topado muchas veces, en CSS-Tricks la respuesta:

In the absence of a background on the html element, the body background will cover the page. If there is a background on the html element, the body background behaves just like any other element.

Rise Alarm Clock

Mon, 03 Jun 2013 00:00:00 GMT

Rise, app-reloj-alarma minimalista y sencilla de usar, que tiene entre sus funcionalidades la opción de crear listas de canciones para dormir; tengo un mes de usarla y soy fan.

Become a Better Designer with Side Projects

Tue, 28 May 2013 00:00:00 GMT

Soy un fiel creyente de que, para aprender es necesario poner las manos a la obra, y para eso los Side Projects son la mejor opción. En este video, Tim Smith explica los beneficios que él ha obtenido de sus side projects, y como lo han ayudado a ser un mejor diseñador. Los slides se pueden ver en speakerdeck.

Don't waste time. Spend it on Things that are worth it.

Como generar clases personalizadas de css en Drupal 7

Tue, 28 May 2013 00:00:00 GMT

En 7sabores, 4 maneras mediante las cuales podemos agregar nuestras clases de CSS a bloques, menus, nodos, views y por browser.

Twitter Module

Mon, 27 May 2013 00:00:00 GMT

Twitter Module, provee integración con el API de Twitter, con solo instalarlo nos permite asociar una, o más cuentas, de Twitter con su cuenta de usuario de Drupal, listar tweets de diferentes maneras (usando Views) e iniciar sesión en su sitio de Drupal a través de Twitter.

DrupalCon Portland 2013

Tue, 21 May 2013 00:00:00 GMT

Hoy se inaguró el DrupalCon Portland 2013, segundo Con del año. Estoy impresionado por la rápido que se esta publicando los videos de las sesiones, los cuales se pueden ver en el canal de Youtube de la DA.

Algunos de los temas que se cubren en este Con son Drupal 8, mobile y Content Strategy, para lo que invitan a Karen McGrane, abajo esta el video de su keynote, el cual vale la pena ver un par de veces, da buenos tips, ejemplos y casos de éxito. Espero ver la sesión de Jonathan Snook sobre SMACSS, ver que hay de nuevo en Drupal 8, específicamente Twig, y que tips puedo aprender sobre Site Building y Responsive.

Sesiones y notas

Ya he tenido tiempo de ir viendo algunas de las sesiones que me interesan, acá los links y recursos que voy recopilando por sesión.

Mistakes Agencies Make

Notas. Tips de como manejar una agencia, Drupal Shop. Cuando crecer, o no, lo importante de ahorrar con cada pago que recibimos, máximo tres proyectos por miembro del equipo, uno es lo ideal, no apostar a un solo proyecto/cliente.
Post: Mistakes Agencies Make: A Story in Three Acts

Theming for Site Builders - Getting Started The Drupal Way

Notas. Interesante tema, theming para site builders, la sesión muestra como podemos usar diferentes módulos y opciones de la configuración para, bueno, themear un sitio. Me gusta el tema de las responsabilidades del themer: accesibilidad, SEO, UI/UX y seguridad; no es solo hacer que un sitio web se vea bonito. Planear es una de las fases má importantes. Si no se esta trabajando con un themer, o no se tienen conocimientos en CSS/PHP, se puede iniciar con un theme como Omega o Fusion, o una distro como Panopoly.
Módulos recomendados. HTML Purifier, Display Suite, SEO Checklist, Menu block, Image Caption Formatter, Chosen y Views Slideshow.

UX Spaces: A new approach to site building and front-end design for Drupal

Notas. Drupal will push you around, por eso lo importante de entender como funciona, conocer a la audiencia y los objetivos. Se habla sobre los problemas que tiene Drupal a nivel de UX, y en la sesión se plantea un enfoque denominado "User Experience Spaces" para construir sitios web en Drupal.
Libro recomendado The Elements of User Experience

Making Drupal Meetups and Events Rock.

Notas. Un panel en el que varios organizadores de meetups y Camps comparten tips que nos puede ayudar a tener mejores reuniones, atraer más usuarios y ser mejores evangelizadores. Tips: hacerlo al menos una vez al mes, es la frecuencia más común, realizar presentaciones cortas, casos de estudio, y siempre tener al menos una presentación para principiantes; importante que siempre la reunión gire alrededor de Drupal, aunque sea en un bar o restaurante. Hay que hacer todo lo posible para que los nuevos asistentes se sientan cómodos, máxime si llegan solos; hay que ser consistentes con las reuniones, lo ideal, agendar las próximas 6 reuniones, con fecha, hora y temas a tocar, no recomiendan publicar los eventos en un sitio web especifico de la comunidad, sino usar GDO.

Charting a New Direction: Why the CEO Matters More than the Developer.

Notas. Fuerte y claro el mensaje, vender CMS's cada vez es más dificil, el hacer un demo ya no es solo mostrar como pueden crear/editar contenido, si nuestro pitch de venta se basa en eso, estamos muertos. Hay que dejar de pensar en el CMS developer-centric, y pensar más en el usuario, el creador de contenido y los stakeholders, para el que lo más importante es el ROI. Features que nos ayudan a vender mejor, y lo que debemos buscar: Reducir costos, aumentar resultados, reducir riesgo e incrementar la moral (no hay nada peor para la moral del equipo que una pésima implementación de un CMS). Dejar de vender Drupal como CMS y vender la integración de Customer Experience Management (CXM) a Drupal, el futuro(!!??). Hay que dejar de desarrollar features para developers e iniciar a con features post-publish/post-build world.

Dapper Drupal - Custom Tailored Themes

Notas. Una de las preguntas más frecuentes, What base theme do you use? Respuesta, depende. Del tipo de proyecto que se esta construyendo, quién lo va mantener después, que se puede reutilizar y flexibilidad. Un acercamiento interesante, trabajar en el markup/CSS y después usar Display Suite o Panels para crear la estructura en Drupal, Death of a Themer. Recomendado, construir nuestro propio base theme, que se ajuste a nuestro proceso, mejorarlo de manera progresiva con cada proyecto en que lo usemos.
Módulos recomendados. Panopoly *Theme recomendados. Kalatheme, usarlo en conjunto con Panopoly y Twitter Bootstrap; Pure; Center y Prototype, ambos en sanbox pero ya los han usado los presentadores en proyectos, los usan como un punto de partida.
Ejemplos de sitios web, Examiner

Meet the Modernizr module.

Notas. Partimos del principio que todos los browsers son diferentes, incluso entre versiones del mismo browser, hay que ajustar la experiencia a las capacidades de cada browser. User-agent sniffing no es una práctica recomendada, es mejor detectar features individuales por browser usando JavaScript, Modernizr. Can I use y HTML5 Please, nos sirven como referencia para saber cuales features soportan los browsers . No siempre debemos usar Modernizr, hay propiedades de CSS que tienen fallback natural, ejem: border-radius o gradientes. Cuando sí usarlo, con geolocalización, CSS transitions, HTML5 video o audio, SVG, o cualquier cosa que sea vital, que pueda romper el UI y que no este presente en el browser. En el video hay varios ejemplos de como implementar el Conditional Loading. Buen consejo, olvidarse de ofrecer soporte a versiones de browsers, en lugar, establecer que features va a soportar el sitio web, tomar esos requerimientos y revisar Can I Use (con el cliente) y llegar a un porcentaje de compatibilidad, ejem: IE8 va a soportar el 83% de las features.
Módulos recomendados. Modernizr
Slides de la sesión, vale la pena seguir los links incluidos.

Managing Responsive Web Design with Sass and Breakpoint.

Notas. Una de las mejoras charlas que he visto sobre Responsive Web y Sass. La charla gira alrededor de un par de extensión de Sass, llamadas Breakpoint y Singularity, la primera nos permite trabajar con media queries, le mete como esteroides, y la segunda nos facilita el trabajo con Grids.

Algunas charlas que me han gustado, son más de procesos así que no las resumo acá:

Sass – The Logical Step Forward

Mon, 20 May 2013 00:00:00 GMT

Sass – The Logical Step Forward, es un artículo que cubre las bases de Sass, como instalarlo y como usarlo. Es bastante sencillo, pero me gusta el orden lógico que tiene, útil cuando uno esta iniciando.

Magic: Frontend Performance

Thu, 16 May 2013 00:00:00 GMT

Post de los WebChefs sobre Magic, un modulo que mejora el performance de cualquier tema, mediante opciones que nos permiten agregar/excluir archivos CSS y mover archivos JavaScript al final, entre otras. También tenemos la opción de exportar los setting de un theme a otro. Recien lo instale, en este mismo sitio, así que quedan pendientes los detalles.

Panels Series - Code Karate

Tue, 07 May 2013 00:00:00 GMT

En Code Karate están publicando una serie de videos, a la fecha van 7, sobre el módulo Panels, el cual nos permite crear layouts personalizados. Nunca lo he usado, así que esta es una buena oportunidad para aprender.

Git Comandos básicos

Mon, 06 May 2013 00:00:00 GMT

Lista de comandos básicos para Git; para seguir aprendiendo, algunos post relacionados con Git en 7sabores.

Drush cheat sheets

Fri, 26 Apr 2013 00:00:00 GMT

Estoy aprendiendo Drush, y estos cheat sheets están bastante completos.

If you use Drupal and not Drush, shame on you, why are you wasting your time?

Applying SMACSS to Drupal

Fri, 26 Apr 2013 00:00:00 GMT

Algunas ideas desde el blog de Aten Design Group para aplicar SMACSS, el CSS style guide de Jonathan Snook, en proyectos Drupal.

Don't Get Lost in Translation: Multilingual Site Building with Drupal 7

Tue, 23 Apr 2013 00:00:00 GMT

Sesión en la que se abarca como construir un sitio multilinguaje, Don't Get Lost in Translation

No más curva. Drupal Camp Puebla

Sat, 20 Apr 2013 00:00:00 GMT

Gracias a todos los que asistieron a esta sesión. La presentación de mi charla está disponible para descargar, la cual tambien pueden ver acá.

La sesión se pensó para usuarios que tengan conocimiento de HTML/CSS, los cuales se han visto frustrados ó detenidos, por la curva de aprendizaje de Drupal.

Durante la sesión se cubrieron puntos que repetidamente hacen que los usuarios, no-programadores, prefieran usar otro CMS en lugar de Drupal:

Terminología básica
Primeros pasos en construir nuestro sitio, planeación y estrategia.
Como pasar del diseño al código, nuestro primer theme!
Administrar el markup generado por Drupal, manteniendo código semantico y limpio.
Buenas prácticas, como no volver loco a nuestro buen amigo programador :)

AEA Video: Scott Berkun The Five Most Dangerous Ideas

Mon, 15 Apr 2013 00:00:00 GMT

Scott Berkun en AEA The Five Most Dangerous Ideas:

Whoever uses the most jargon has the least confidence in their ideas

ModuleNotes

Fri, 12 Apr 2013 00:00:00 GMT

ModuleNotes, buen lugar para que usuarios no-técnicos entiendan para que sirven modulo complejos.

ModuleNotes is intended to give designers a way to learn about useful modules with descriptions tailored for non-developers.

Perfect Workflow in Sublime Text 2

Tue, 09 Apr 2013 00:00:00 GMT

Perfect Workflow in Sublime Text 2, un poco más de 2 horas de video, en el que se cubre mucho sobre Sublime Text, recomendado.

Algunos tips:

Theming main menu

Mon, 08 Apr 2013 00:00:00 GMT

Desde hace un tiempo, cada vez que construyo un tema, trato de usar elementos de HTML5, header, aside, footer y nav, por citar algunos. De esta manera puedo ir aclarando dudas que tengo entre la especificación y la implementación de estos elementos, y así termino de entender cuando sí, y cuando no, se usa cada elemento.

Tricky, tricky, nav

Usar el elemento nav es uno de esos que me dio un poco de trabajo al inicio, porque, a pesar de tener un archivo tpl.php para los bloques tipo menu, block--menu.tpl.php, el main menu no aplicaba este template, solo lo aplicaba en custom menus, aquellos que construía para secciones/usos específicos.

Luego de revisar un poco la documentación, recorde que, el main menu sale de system module, por lo que, el template debe tener el nombre block--system--main-menu.tpl.php para poder sobreescribir la estructura default.

The new face of Omega 4

Fri, 05 Apr 2013 00:00:00 GMT

Omega, Omega, Omega, lo quieres, o no. Un post sobre los cambios en la última versión, parece que se los Themer purists van a estar más felices, a darle una probada.

Responsive Day Out

Thu, 04 Apr 2013 00:00:00 GMT

Responsive Day Out es una de esas conferencias a las que me encantaría asistir, organizada por una de mis empresas favoritas, Clearleft, y con un lineup de speakers de lujo. Para suerte de todos, están compartiendo el audio y slides, así como algunos videos y posts.

This could be most essential CSS3 media query you’ll need today

Tue, 02 Apr 2013 00:00:00 GMT

Palabra que sí!

@media only screen and (min-width: 960px) and (max-width: 970px) {
  body {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

Getting started in the issue queue

Thu, 14 Mar 2013 00:00:00 GMT

Otra vez Drupalize.Me libera una serie de videos super útiles llamada The Learn Drupal Ladder, serie que abarca desde un overview de la iniciativa Learn Drupal Ladder hasta como escribir un patch.

Image Lazyloader

Thu, 14 Mar 2013 00:00:00 GMT

Image Lazyloader, módulo para hacer lazyload de manera automática de todas las imágenes de un sitio, lo que, en teoría, nos beneficia en performance.

Display Suite for Drupal 7

Tue, 12 Mar 2013 00:00:00 GMT

Drupalize.Me tiene una serie de videos que nos permiten iniciar con Display Suite, un link más para la colección.

Dropbucket.org

Thu, 07 Mar 2013 00:00:00 GMT

DropBucket, es un repositorio para snippets, específicamente, Drupal Snippets. El sitio se lanzó la semana pasada y en la web del creador hay un post explicando detalles del proyecto.

Dropbucket.org a place to share and discover Drupal snippets

The State of Drupal 8: After Feature Freeze

Thu, 07 Mar 2013 00:00:00 GMT

Si trabajas con Drupal, obviamente estas enterado que el Feature Freeze para la versió 8 ya llegó. En el post The State of Drupal 8: After Feature Freeze nos dan un resumen del estado en el que se encuentra Drupal 8, yay!

Some things beginners might not know about Sublime Text

Thu, 07 Mar 2013 00:00:00 GMT

Desde hace un tiempo, muy poco, adopte Sublime Text como mi editor diario, y me arrepiento de no haberlo conocido antes.

Para referencia personal, y para cualquier otro que encuentre este, y próximos post sobre el tema, voy a iniciar a recopilar tips, tutoriales y cualquier elemento que me permita mejorar mi flujo de trabajo y sacarle el mejor provecho a la herramienta, iniciando con este mismo link, Some things beginners might not know about Sublime Text.

Daily Dose of Drupal - Drupal 7 Fences Module

Wed, 06 Mar 2013 00:00:00 GMT

Una de las cosas que siempre me ha molestado de Drupal es el exceso de div's y clases en el markup; ese código tan cargado y "sucio" haría que el tío Zeldman se ponga a llorar en el momento que lo vea. Para suerte de todos los puristas hay maneras de modificar el output default de Drupal, una de esas maneras es usando el módulo Fences, el cual nos permite elegir la estructura para los fields de nuestro sitio, lo que nos da la posibilidad de utilizar elementos de HTML semanticos para cada field que se despliegue.

En Code Karate hay un excelente video tutorial para iniciar con Fences; de paso, hay que seguir Daily Dose of Drupal, casi todos los días hay un video tutorial relacionado con algo puntual de Drupal.

Formula for Entrepreneurial Succes

Wed, 06 Mar 2013 00:00:00 GMT

Un puntaso para Ev Williams:

Failure of your company is not failure in life. Failure in your relationships is.

All New CSS coding standards up for discussion!

Fri, 01 Mar 2013 00:00:00 GMT

Ideas y discusiones relacionadas con el estandar que se debe seguir con el CSS en Drupal, a leer.

W3Conf

Thu, 28 Feb 2013 00:00:00 GMT

Hace un par de días se realizo la W3Conf, la conferencia anual de la W3C para profesionales de la web, y los videos ya están disponibles en el canal Youtube.com/W3Conf

Module Filter

Wed, 27 Feb 2013 00:00:00 GMT

Cuando tenemos varios módulos instalados, ya sea en un sitio en desarrollo o producción, la lista de opciones se puede volver inmanejable. Una manera rápida para encontrar ese módulo nuevo que se debe instalar, o deshabilitar si ya no se necesita, es usar el buscador del browser. Con Module Filter vamos a poder encontrar de manera rápida los módulos, gracias al filtro que agrega, además de que, crea un tab para cada paquete de módulos.

Primer taller Intro Drupal 2013

Mon, 25 Feb 2013 00:00:00 GMT

El sábado pasado, realizamos entre Estudio Manatí, Max Mendez y yo, nuestro primer taller Introducción a Drupal del año. Durante el día cubrimos:

Una visión general y los antecedentes del proyecto Drupal.
Consideraciones para iniciar un proyecto Drupal.
Terminología básica
Drupal API (por qué es importante)
Módulos más importantes.
Como construir sitios web con Drupal.
Cómo obtener ayuda de la increíble comunidad de Drupal.
Bases para theming, que es y como iniciar.

Para este taller aplicamos lo aprendido, y el feedback que recibimos, en las dos ediciones anteriores, las cuales realizamos en Setiembre y Diciembre 2012; básicamente, se redujo la parte teórica y ampliamos en lo práctico: site building, planear un sitio en Drupal, mucho trabajo con Views y como construir un sub-theme.

La experiencia.

Para nosotros la experiencia fue muy rica, tuvimos un público muy amplio y de diferentes campos, lo que nos permitió aprender y entender más sobre las barreras y ventajas que presentan otros CMS's, lo que nos da una visión más amplia de cuales son las ventajas y desventajas de usar Drupal.

Al final de un día con mucho trabajo, logramos nuestro objetivo, presentar Drupal a nuevos usuarios y enseñarles como vencer la curva de aprendizaje, de premio se llevaron un sitio web funcionando ;)

Como siempre, cuando compartimos conocimiento es cuando más aprendemos.

Huffduffer

Tue, 19 Feb 2013 00:00:00 GMT

Soy fan de los podcast, sigo al menos 50 diferentes y iTunes es donde normalmente voy armando mi colección, pero siempre tengo el problema de que, sino tengo mi computadora cerca, revisar, compartir o guardar uno nuevo no es tan fácil como debería, hasta que di con Huffduffer:

Have you ever wanted to put together a podcast of audio files that you’ve discovered on the web? It isn’t as easy as it should be. A podcast is an RSS file and making an RSS feed by hand is a pain. Huffduffer takes the pain out of podcasting found sounds.

DrupalCon Video

Thu, 07 Feb 2013 00:00:00 GMT

En el canal de Youtube de DrupalCon ya están los videos de las charlas y keynote del DrupalCon Sydney, deep in!

Update 21/feb. Instrucciones para descargar los videos del DrupalCon Sydney.

Sub-themes y la herencia de tpl's

Wed, 06 Feb 2013 00:00:00 GMT

Estoy creando un sub-theme, usando Drupal 6, y durante el proceso es necesario crear un template .tpl.php para un page específico, hasta aquí cero complicaciones.

Después de limpiar cache y revisar que todo ande como se espera, me di cuenta que, el nuevo page-nombre-especifico.tpl.php no estaba funcionando. Limpio cache de nuevo, reviso archivos, y nada, no funciona. Antes de perder más tiempo abro la documentación de sub-themes y veo un detalle que me estaba pasando por alto, todos los archivos .tpl.php son heredados del base theme, pero si queremos algo específico en el sub-theme, también debemos agregar el template general, que en mi caso era el page.tpl.php.

De la documentación:

Drupal 6: Any .tpl.php files from the parent theme will be inherited. However, to add template files with more specificity, you must also copy over the more general template file from the parent theme manually. For instance, to add a node-blog.tpl.php template in a sub-theme, you must also copy over node.tpl.php from the parent theme. This bug has been fixed in Drupal 7 but will not be fixed in Drupal 6.

Context Block Info

Tue, 05 Feb 2013 00:00:00 GMT

Context Block Info, es un módulo que nos simplifica la vida cuando trabajamos con Context, ya que, provee una página desde donde podemos administrar de manera fácil y rápida los bloques y contextos que se están utilizado, muy útil cuando tenemos un sitio grande con muchos contextos activos.

Responsive web design

Tue, 05 Feb 2013 00:00:00 GMT

Responsive web design es el título de uno de los apartados en la documentación sobre Mobile en Drupal.org. La sección cuenta con una lista de links a documentación, módulos, themes y posibles soluciones (desde un punto de vista drupalero) a problemas que podemos encontrar cuando se desarrolla un sitio responsive. Si tenemos rato leyendo y buscando información sobre responsive, los links no aportan mucho, pero la lista de modulos y themes es un buen punto de partida para nuestros proyectos; tengo muchas ganas de probar el theme Bolierplate.

The main issue

Mon, 04 Feb 2013 00:00:00 GMT

El link al que apunto es una muestra de lo cerca que casi todo se vuelve con el acceso a internet. Hace un par años atrás, como progresaba la especificación de HTML ó CSS era un misterio para muchos, y poder aportar feedback u opiniones estaba reservado para pocos.

En el post, Jeremy Keith le expone algunas de sus dudas al HTML working group sobre la inclusión del elemento main, vale la pena leer el post apuntado y darle seguimiento al tema.

No, I'm not going to download your bullshit app

Mon, 04 Feb 2013 00:00:00 GMT

En el punto de la guerra “web vs. apps”:

I wouldn’t download a BBC app or an NPR app for my computer. Why would I want one on my phone? Do I buy a separate radio to listen to different stations? No. The functionality is the same, the only thing that differs is the content. Apps ought to provide some actual functionality, not just blobs of content wrapped up in binary files.

DrupalCamp24x7

Wed, 30 Jan 2013 00:00:00 GMT

Como un Drupal Camp, pero online, muchos videos y recursos organizados por nivel de conocimiento, versión de Drupal o track.

DrupalCamp24x7.org is an community effort to help Drupal beginners to learn Drupal online. It also tries to help drupalites from all over the world to share and communicate among themselves in a way Drupal.org suggests for DrupalCamp but in an online mode.

Becoming a Drupal Code Contributor

Tue, 29 Jan 2013 00:00:00 GMT

Drupal es comunidad. La comunidad es la que mueve y mantiene vivo el proyecto, pero para que esto se de, es necesario que devolvamos un poco de lo mucho que tomamos, y una manera de hacerlo es mediante contribuciones al proyecto, específicamente, contribuciones de código. En el episodio #10 del podcast de Lullabot, el cual hay que seguir sí o sí, nos dan una guía de como podemos desarmar esa excusa que tanto escuchamos, "no se como ayudar".

Responsive Tables In Drupal 7 With FooTable

Wed, 23 Jan 2013 00:00:00 GMT

Un pequeño tutorial para iniciar con el módulo FooTable, el cual nos permite crear responsive tables.

Core Security - Understanding Text Formats

Mon, 14 Jan 2013 00:00:00 GMT

El Security team nos provee una pequeña guía de buenas prácticas sobre Text Formats.

BarCamp Costa Rica

Sat, 12 Jan 2013 00:00:00 GMT

Un evento sin expositores pre-definidos, en el que voluntarios que deseen exponer, anotan su nombre y el título de su ponencia en cualquiera de los espacios disponibles en la agenda, eso es un BarCamp, y el 1 de febrero vamos a tener el primero en Costa Rica, WIN!! Los ejes temáticos del evento van a ser: Startups, Social Media, Diseño Web, Desarrollo de aplicaciones móviles, Tecnología y Programación; aún quedan espacios y el registro es gratuito.

The Content Editors Are Your Most Important Users

Fri, 28 Dec 2012 00:00:00 GMT

Uno de los mayores retos que tenemos como sitebuilders es toda la parte relacionada con UX y la usabilidad, temas que Jeff Eaton cubre en su keynote, base del artículo enlazado.

Practical Website Security

Fri, 28 Dec 2012 00:00:00 GMT

Lo más básico:

Before you can even think of keeping a website secure, you need to make sure your personal affairs are in order. NEVER reuse a password.

SeeD Theme

Thu, 27 Dec 2012 00:00:00 GMT

SeeD Theme, un base theme por los colombianos de SeeD. Me gusto mucho la filosofia detrás de la decisión de crear el theme y el llamado a contribuir.

Build!

Wed, 26 Dec 2012 00:00:00 GMT

Build Podcast es un show sobre tecnología que recien descubrí, no relacionado con Drupal, en el que cada semana publican un screencast en el que explican paso a paso como usar una herramienta, ya sea SublimeText, SASS o Git, para desarrollar un proyecto. Linda manera de compartir y aprendar.

Creating A Drupal 7 Sub Theme

Wed, 26 Dec 2012 00:00:00 GMT

Un screencast de 12 minutos, en los que recorren aspectos básicos para la contrucción de sub-themes en Drupal 7.

CSS Injector

Wed, 26 Dec 2012 00:00:00 GMT

Hay varias maneras de incluir CSS en un page o node específico, usando el default Drupal theme system o mediante el módulo Context. Una opción más para la lista, usar el módulo CSS Injector, el cual permite a un administrador inyectar CSS en el output de la página basado en reglas, a diferencia de Context, no crea clases y es más flexible que el theme system.

Drupal SEO Checklist for 2013

Wed, 26 Dec 2012 00:00:00 GMT

Siguiendo los tip de la lista en el desarrollo de la versión 3 de PYMESdotcom.

Using Display Suite in Drupal 7

Wed, 26 Dec 2012 00:00:00 GMT

Serie de tutoriales sobre Display Suite 7.x-2.x en Drupal 7, van dos entregas y se ve que pinta bien.

Drupal Camp Videos

Wed, 19 Dec 2012 00:00:00 GMT

Una de las cosas más cool de Drupal es su comunidad, y como tratamos de compartir todo lo que podamos, ejemplo claro de estos, cada Drupal Camp que tiene los recursos para compartir las sesiones, lo hace, graban video y lo publican en la Web, detallaso porque es una manera de estar al día con los cambios, funcionalidades y tips que otros van encontrando. Sobre el tema, videos en Vimeo de algunos de los Camps recientes:

5 cool modules to help you with your nodes in Drupal

Mon, 17 Dec 2012 00:00:00 GMT

Una pequeña lista de 5 modules que nos permiten jugar con nodos, Node Class y Node access user reference se ven bastante prometedores.

Cambiar el idioma en Drupal 7

Wed, 28 Nov 2012 00:00:00 GMT

Como cambiar el idioma de una instalación de Drupal 7, al punto y muy fácil de seguir; este es un poco más extenso.

Chrome Developer Tools: Search or navigate to files, methods or line numbers. Shortcuts for text search and beyond

Fri, 02 Nov 2012 00:00:00 GMT

No relacionado con Drupal directamente, pero quien no usa Chrome y sus Developer Tools.

De-Drupalizing The Login Form

Fri, 19 Oct 2012 00:00:00 GMT

Morten, el papá de Mothership, escribe en DruplWatchdog un artículo sobre cémo des-drupalizar un formulario, sencillo y al grano.

Broken on Purpose: Why Getting It Wrong Pays More Than Getting It Right

Tue, 11 Sep 2012 00:00:00 GMT

De como Facebook nos está jodiendo, a todos, y como el comportamiento se está volviendo tendencia. Los contenidos cada vez llegan a menos gente (seguidores) y la "solucié" propuesta por Facebook son los post patrocinados, nada tontos.

Being broken pays off, so social media is often deliberately broken.

Propone una sesión en el Frontend track

Mon, 10 Sep 2012 00:00:00 GMT

Estoy colaborando como Local Track Chair del DrupalCon Sao Paulo 2012, y como parte de mis tareas está el invitar a la Comunidad Drupalera a proponer una sesión (o dos!) en el Frontend track, bueno, aquí queda mi invitación :)

12 Lessons Steve Jobs Taught Guy Kawasaki

Fri, 07 Sep 2012 00:00:00 GMT

"Experts" are clueless

Al grano, aplica para todos los auto proclamados expertos, Socia Media Gurus, Startups Gurus, etc. Nunca hay que escucharlos, escuche a sus clientes.

Steve Blank, The Startup Owner's Manual

Fri, 07 Sep 2012 00:00:00 GMT

Video en Youtube en el que Steve Blank habla sobre su libro The Startup Owner's Manual; recomendado para cualquiera que tenga la más mínima idea o ganas de iniciar un negocio. Nota para mí, el libro lo tengo en mi lista de pendientes.

Performance tips for Drupal theming

Tue, 28 Aug 2012 00:00:00 GMT

Lista de tips para mejorar el performance, un buen punto de partida.

Download DrupalCon Session Videos

Thu, 23 Aug 2012 00:00:00 GMT

Esta fue semana del DrupalCon Munich 2012, mucha información y muchos videos que ver; sobre esto último, hoy encontre uno de los mejores tweets, cargar todos los videos en iTunes para verlos en cualquier momento, simplemente:

Abrir iTunes
Click "Advanced > Subscribe to Podcast"
Ingresar "blip.tv/drupalcon/rss/itunes
Click "OK", y listo, descarga todos los videos

Drupical - Find Drupal Events with Ease!

Mon, 20 Aug 2012 00:00:00 GMT

Tal y como lo indica, un agregador de eventos de Drupal a nivel mundial, cool!

The Weekly Drop

Mon, 20 Aug 2012 00:00:00 GMT

Newsletter con las últimas noticias y links, obvio, sobre Drupal, suscríbanse pero ya!

DrupalCon Sao Paulo 2012 Scholarship

Mon, 13 Aug 2012 00:00:00 GMT

Este año Brasil, además de samba, futbol y carnaval, va a tener mucho geekp0rn y Drupal love, porque en Diciembre se va a realizar el DrupalCon Sao Paulo 2012. Este es el primer DrupalCon que se realiza en latinoamerica, lo que hace que el evento sea doblemente importante.

Si están cortos de fondos, como yo, y no se quieren perder el evento, la Drupal Association da becas que cubren desde el tiquete al evento hasta el pasaje de avión; la beca se solicita llenando este formulario y cierran la recepción de solicitudes el 14 de setiembre.

ALA Summer Reading Issue

Fri, 13 Jul 2012 00:00:00 GMT

A List Apart es posiblemente uno de los online magazine mejor posicionados, y con mejor contenido que existen, lo sigo desde que la web se volvío uno de mis pasatiempos. El último issue es toda una joya, una lista de los artículos favoritos del staff de ALA.

Presenting the ALA Summer Reading Issue—our favorite articles from 355 issues of A List Apart.

So, you’ve been invited to speak

Fri, 06 Jul 2012 00:00:00 GMT

Estos conceptos de Lea Verou aplican para todo nivel, y son relevantes cuando presentamos código:

Do something unique
Never show a lot of code on a slide
IDEs are not good presentation tools
Don’t aim to beginners (only)
Eat your own dog food
Involve the audience

How much does a responsive web design cost

Tue, 26 Jun 2012 00:00:00 GMT

Answer: $13.47.

Learn Drupal 7 with NodeOne

Mon, 25 Jun 2012 00:00:00 GMT

La agencia NodeOne tiene un screencast llamado Learn Drupal 7 with NodeOne, en el que nos introducen en los cambios y funcionalidades básicas de Drupal 7. La serie completa es en inglés, pero bastante fácil de seguir, muy bueno para cuando uno está iniciando con D7, como yo :)

Fluid Type

Wed, 20 Jun 2012 00:00:00 GMT

En este momento estoy dedicando tiempo a escoger las fuentes a utilizar en el blog, con el detalle que quiero que sea Responsive, y bueno, los tips de Trent Walton en el post Fluid Type me cayeron del cielo, el trick de "two asteriks" esta bien cool, y me gusta mucho su idea de lo que es RWD y como ve la Web.

...“ideal” on the web isn’t about pixel-perfection anymore, but about seeking the most pragmatic approach to balancing different kinds of content with an ever-increasing number of screen sizes and resolutions.

Esto, sumado a otros recursos que ya tenía, los estoy usando como una guía en la toma de decisiones, y justificación de estas. Por ejemplo, sobre como escoger una medida confortable para el ancho de las líneas:

The 66-character line (counting both letters and spaces) is widely regarded as ideal.

Además, Tim Brown tiene una lista de recursos y conceptos relacionados con Responsive Typography, en sus palabras:

Its purpose is to help us understand the relationship between web design’s fundamentally fluid nature and the typographic standards of construction that have served us heretofore.

Y este es uno de los consejos que más he escuchado/leído últimamente,

Let the content, not device widths, determine breakpoints.

Responsive Web Design: preserving images’ aspect ratio

Tue, 19 Jun 2012 00:00:00 GMT

Ni tan obvio, una rápida solución para mantener el aspect ratio cuando las imagenes tienen los atributos height y width en el HTML.

img {
    max-width: 100%;
    height: auto;
}

Git Best Practices: Workflow Guidelines

Mon, 18 Jun 2012 00:00:00 GMT

Buena lista de do's / don'ts en el uso de Git, aka pain in da a$$.

Small, logical commits
Always review code before committing it
Never rebase shared commits
Never delete unmerged remote branches
Make your Git toolbox your own

Sonambulo

Wed, 13 Jun 2012 00:00:00 GMT

Buenas noticias para mí, hoy aprobaron para Full Project mi theme en Drupal.org, mi primer theme contribuido, nice :)

Contributing 101

Tue, 12 Jun 2012 00:00:00 GMT

He estado trabajando en un theme, con la idea de contribuirlo en Drupal.org, lo que ha significado todo un proceso de aprendizaje, proceso que se ha movido entre interesante y frustrante; interesante porque he aprendido bastante y frustrante por la cantidad de documentación que he tenido que leer, no solo para poder construir mi theme, sino también para poder revisar issues que se encuentran en estado de need review, con el fin de obtener un Review Bonus.

Al final de esto, me he dado cuenta de lo poco que he devuelto a la comunidad en todo este tiempo, y de lo mucho que se necesita de voluntarios, porque al final, el éxito de Drupal depende de la comunidad. Sobre el tema, un artículo que hoy leí en Drupal Watchdog, Contributing 101

Drupal's continued success depends heavily on all of our contributions, and when it comes to giving back, as they say, every little bit helps.

The Power of Side Projects and Eccentric Aunts

Fri, 08 Jun 2012 00:00:00 GMT

Charla de swissmiss en FOWD, sumamente inspiradora; las reglas que tiene son para incluirlas en el mantra de vida, la número 3 la asumo de una:

Rule #3 If an apportunity scare you, you need to take it

Drupal Podcasts

Wed, 30 May 2012 00:00:00 GMT

Una recopilación de feeds de podcasts que tienen Drupal como tema central. Algunos son conocidos, como el de Lullabot, y otros ya no están siendo actualizados, pero todos con buenos recursos.

Five responsive web design pitfalls to avoid

Wed, 23 May 2012 00:00:00 GMT

Brad Frost comenta 5 obstáculos a evitar cuando se desarrolla un sitio bajo "responsive web design" (RWD), y los consejos que da aplican para sitios Drupal, o no Drupal, porque se centra en conceptos, y como la mala aplicación de estos nos puede llevar a perder tiempo y recursos, o lo que es peor, darle una "mala" experiencia a los usuarios.

Tal y como lo plantea Frost, RWD es más que pensar en media queries o medidas de dispositivos.

320px. 480px. 768px. 1024px. The fold. Oh God, the fold.

Comparison of image cropping and resizing modules

Mon, 21 May 2012 00:00:00 GMT

Cuadro comparativo de módulos que nos permiten ajustar una imagen después de haberla subido, ya sea para crear un estilo diferente de la misma imagen (por ejemplo, una vista en miniatura) o simplemente para cambiar el tamaño.

Extra tip para seguir: que tan cool la iniciativa de Implement face-detection, awesome!

D4D Boston Drupal Design

Wed, 16 May 2012 00:00:00 GMT

D4D Boston Drupa Design es un Drupal Camp dedicado al diseño y front end; a pesar de que el tema del sitio no está muy sexy, hay charlas bastante buenas e interesantes. La lista de las charlas que estoy viendo o tengo pendientes de ver:

Incremental leading

Wed, 16 May 2012 00:00:00 GMT

Lectura recomendada. Mark Boulton da buenos tips sobre Vertical Rhythm

Jeffrey Zeldman on his inspiration and the point of having web standards

Wed, 16 May 2012 00:00:00 GMT

...if you’re complaining about IE in 2012, the problem isn’t Internet Explorer … it’s your job.

leivajd.com

Reverse interview

No title

input de tipo search

String.prototype.repeat()

No title

Refrescando conceptos de DevOps

No title

No title

React, state management

Notas del curso React Fundamentals

Imperative vs Declarative

Lectura recomendada:

JSX

Lectura recomendada:

Responsive Image Breakpoints Generator

No title

No title

Camila Russo | La historia de Ethereum | DESCUBRIENDO BLOCKCHAIN

No title

No title

Moving users to Microsoft Edge from Internet Explorer

No title

Curricula on Web Accessibility

No title

No title

No title

Shopify Store Launch Checklist

Acercandome a IndieWeb

Mi contenido me importa a mí.

Qué es?

Estado actual

Próximos proyectos

No title

Review del 2020

No title

ARIA states

No title

No title

nerd-snipe

Better, Simpler Grid Systems

No title

100DaysOfReact

Strangler fig application

Automatically sending Webmentions from a static website

No title

Building a client side proxy

No title

Accessible interactions

No title

100DaysOfCloud Ideas List

No title

The Complete Guide to Next.js Authentication

No title

No title

Treinta y nueve

Form design

npkill

No title

No title

Accesibilidad web de la teoría a la práctica

DrupalCR Meetup A11y

¿Sobre qué no vamos a hablar?

¿Qué es a11y?

Principales tipos de discapacidad

¿Porqué molestarnos?

The WebAIM One Million

Recursos:

Checklist

Sitios oficiales

Inclusive Design 24

Recuperar un Git branch eliminado

No title

No title

Docker Tutorial for Beginners - freeCodeCamp.org

Reorgs Happen

No title

No title

No title

About Feeds

Acerca del atributo de `title`