Advertisement
  1. Web Design
  2. General

Conviértase en un Desarrollador Front -End Mejor y más Rápido

Scroll to top
Read Time: 18 min

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

Así que usted ya es un gran desarrollador web.

Tiene algunos fragmentos CSS matadores (incluso entre navegadores), tal vez ha sido un experto de Photoshop durante años, y tiene suficiente conocimiento jQuery para hacer que casi cualquier animación encadenada vaya sin problemas.

Pero ciertamente se pregunta, ¿que sigue ahora?

De hecho, una de las preguntas más frecuentes sobre el desarrollo web es, "¿cómo me mantengo a la vanguardia?" Chris Coyier recientemente presentó una charla fantástica sobre el tema y ​​hay sitios totalmente dedicados a estar al día en las últimas noticias de diseño web. La compilación de Addy Osmani para convertirse en un mejor ingeniero de front-end establece un gran contenido en el tablero para que usted considere el tema; innecesario decir que muchas personas inteligentes están pensando en este mismo tema, así que usted va en la dirección correcta.

better-fullbetter-fullbetter-full
Fondo de pantalla del Fantasma del Espacio por Mads Frantzen

En este artículo, vamos a hablar de una manera muy importante de diferenciarse y convertirse en un mejor desarrollador: convertirse en un desarrollador de interacción rápida eficaz.


¿Qué es "Desarrollo de Interacción Rápida"?

El desarrollo de interacción rápida es un término que utilizamos hoy para describir la práctica de crear rápidamente algo para la web con lo que un usuario puede interactuar, específicamente con la intención de repetir y pulir rápidamente la interacción. Esto no es lo mismo que diseñar documentos planos; en su lugar, esto incluye la construcción de algo que tiene uno o más argumentos de interacción.

Esto puede incluir, por ejemplo, un widget dentro del cual el usuario puede escribir y buscar o un menú desplegable que permite al usuario seleccionar un elemento del submenú. Estas piezas interactivas son los bloques de construcción de un argumento más grande de la experiencia completa del usuario al usar un sitio web y por lo tanto son increíblemente importantes para iterar a través de ellas y "sentir". Al diseñar un sitio web, estas interacciones pueden hacer o romper la experiencia del usuario y así podría hacerse o romperse la eficacia del sitio en su conjunto.

Las interacciones no siempre tienen piezas "en movimiento"; de hecho, el desarrollo de interacción rápida a menudo se basa en jerarquías de contenido e hipervínculos más que en cualquier otra cosa. El desarrollo de interacción tiene en cuenta la interacción completa del humano con la computadora, incorporando intuiciones sobre la base de usuarios, la comprensión básica de los factores humanos y el conocimiento del mensaje y la imagen de la organización o el individuo representado por la interacción.


Comprendiendo el Valor del Desarrollo de Interacción Rápida

Si estoy contratando a un desarrollador web front-end (o a cualquier persona para el caso), voy a estar pensando en cinco cosas principales.

  1. ¿Su personalidad encaja en mi equipo?
  2. ¿Son talentosos?
  3. ¿Son eficientes?
  4. ¿Son consistentes?
  5. ¿Puedo pagarles adecuadamente?

Estas preguntas son extremadamente importantes en cualquier parte del proceso de contratación. La primera pregunta se decide generalmente basada en la química de la interacción - no es algo que vamos a cubrir en este artículo. La quinta se decide generalmente caso por caso, y es también algo que está fuera del alcance de este artículo. Sin embargo, al responder a las otras tres preguntas, dos factores principales entran en el juicio: velocidad y precisión. En el caso del desarrollador web, el desarrollo de interacción rápida es una forma de probar que usted ha tomado el arte del desarrollo de interacción muy en serio.

El desarrollo de interacción rápida no viene accidentalmente sobre cuando una musa ataca (como puede ser el caso con una materia más enfocada al arte). En su lugar, el desarrollo de interacción rápida es una habilidad perfeccionada por el desarrollador. Esta habilidad demuestra eficiencia y talento y da más confianza en la capacidad de los desarrolladores de lograr consistencia. Para poder desarrollar rápidamente interacciones, el desarrollador debe tener los dos ingredientes mágicos: velocidad y precisión.

Una aclaración: Puede ser que alguien sea contratado a pesar de no ser tan talentosos como otro individuo, por ser extremadamente consistente y tener una gran personalidad. Esto de ninguna manera es una guía de "cómo conseguir un trabajo como desarrollador".


Vamos a Seguir Adelante con Esto, ¿Estamos Listos?

Con la comprensión de la importancia del desarrollo de interacción rápida, ahora podemos entender cómo usted puede inmediatamente comenzar a perfeccionar esta habilidad. Algunos de estos consejos implican un cambio simple en la mentalidad, mientras que otros toman una inversión de aprendizaje o cambio de patrón. Todos estos, sin embargo, pueden ayudarle a convertirse en un desarrollador web mejor, más rápido y de más valor.


Optimice sus Patrones

¿Ha adoptado un framework CSS? Si es así, entonces entiende el valor del código reutilizable. Es probable que haya adoptado patrones sin darse cuenta. Para probar esto, pregúntese, "cuando empiezo a construir un sitio web, ¿cuál es mi primer paso?" Si su respuesta es "no sé", entonces es hora de averiguarlo. Si su respuesta es "primero abro mi editor de texto", entonces usted ha adoptado al menos un paso en un patrón.

Entonces, ¿cómo optimiza un patrón? Estos son llamados a menudo flujos de trabajo, pero eso no es una descripción adecuada, ya que el flujo de trabajo no incluye todo lo que queremos hablar aquí. Algunas herramientas comunes para ayudarle a estructurar su patrón son CSS y "frameworks" JS como Twitter Bootstrap, Foundation o Topcoat.

rapid-foundationrapid-foundationrapid-foundation

..herramientas de preprocesamiento SASS o LESS..

rapid-lessrapid-lessrapid-less

...tal vez optimización total y herramientas de procesador como CodeKit..

rapid-codekitrapid-codekitrapid-codekit

..temas de inicio en Wordpress como Bones e incluso la opción de la construcción de scripts personalizados impulsados ​​por una línea de comandos. Si usted es un desarrollador de JavaScript más avanzado y busca moverse a un nuevo espacio, debería considerar la posibilidad de consultar Backbone, Ember y otros (frameworks JavaScript orientados a MVC) [http://todomvc.com/]; también sería aconsejable revisar Node, que habilita JavaScript en el servidor. Puede tomarle algún tiempo, pero recoger y aprender algunas de estas herramientas sin duda aumenta la productividad en el largo plazo.

Recomendación: decidir sobre algún tipo de documento plantilla HTML reutilizable "index.html" y una estructura de archivos asociados que siga las convenciones comúnmente aceptadas, se construye con marcado semántico y da una "pizarra en blanco" para trabajar (piense en: HTML5 Boilerplate). Tal vez si usted trabaja principalmente con Wordpress u otra herramienta, querrá encontrar una plantilla similar con la funcionalidad de nivel básico para esa herramienta.

Si usted está un poco más avanzado, tome algunas habilidades de Yeoman para el prototipado rápido de proyectos rápidos y la generación de plantillas basada en asistente. Decida sobre un framework de CSS y/o JS (Bootstrap, Foundation, Topcoat) y comience a usar un preprocesador para CSS más temprano que tarde. Vale la pena invertir tiempo en aprender un preprocesador y no reducirá la productividad, ya que tanto LESS como SASS pueden manejar CSS convencional. Trate de construir un bosquejo completo de un diseño básico completamente con las clases incorporadas de un framework. Probablemente se sorprenderá de qué tan poco código necesita escribir para formar un diseño funcional muy rápidamente. Esto reduce la sobrecarga de la escritura de código repetitivo y también tiene el beneficio añadido de aprovechar las pruebas mucho más extensas y consideraciones para múltiples navegadores que una persona puede hacer por su cuenta.


Trabaje con lo que Sabe; Intencionalmente Aprenda lo que no.

Es absolutamente importante adoptar un estilo de vida de aprendizaje como desarrollador.  La adopción de nuevas herramientas y habilidades como las mencionadas anteriormente es una parte esencial de cualquier desarrollador exitoso. La tecnología que estamos utilizando cada día está cambiando más rápido que cualquier otra cosa; con el fin de permanecer en nuestro lugar actual en la industria o por encima de él, es imperativo que aprendamos continuamente.

Pero - también es importante comprender que el aprendizaje de nuevas tecnologías lo retrasará - al principio. Por esta razón, cuando usted está practicando el cambio de interacción rápida, tampoco debería aprender un nuevo framework. En su lugar, intencionalmente tome algún tiempo fuera de su semana y dedíquelo a aprender ese framework a través de un proyecto de mascotas, noche de fin de semana, o mediante la implementación de piezas de la nueva herramienta en un proyecto que absolutamente necesita las nuevas funcionalidades proporcionadas por esa solución. Esto le permitirá mantener su impulso, y resolver problemas con fluidez en lugar de en una bacanal de ida y vuelta en Google y StackOverflow. Más importante aún, esta segregación intencional le permite centrarse en lo que importa: resolver problemas de diseño en lugar de errores de código.

Como nota secundaria, cuando usted está aprendiendo intencionalmente, también ayuda a resolver problemas que ya tienen soluciones bien conocidas y bien documentadas; por supuesto, el mundo no necesita otra aplicación fácil de hacer. Sin embargo, la creación de una aplicación de tareas puede ayudarle a comprender JavaScript mucho más y puede ayudarle en el futuro cuando está sintetizando información para resolver nuevos problemas. Construir soluciones para problemas que ya cuentan con soluciones bien documentadas le ayuda a comparar y contrastar su solución y facilita la búsqueda de ayuda cuando se quede atascado. Si usted está en un territorio inexplorado e intenta aprender al mismo tiempo, perderse es mucho más probable, y le apartará de la meta del proceso de aprendizaje.


Adopte Mini-Sprints Sobreenfocados

Si usted ha oído el término "ágil", usted puede tener alguna idea de lo que es un sprint. Los sprints son períodos de trabajo cortos y predefinidos en los que los desarrolladores deciden un conjunto de objetivos y "corren" para terminar los objetivos dentro de la cantidad de tiempo asignada. Debido a que estamos hablando de desarrollo de interacción rápida, un sprint es muy adecuado para esta discusión. Aquí están los conceptos básicos.

  1. Definir

    Priorizar tareas/objetivos, defina la longitud del sprint, eliminar o agregar tareas hasta que la cantidad estimada de tiempo para completar las tareas coincida con la longitud predefinida del sprint
  2. Corra

    Este es el momento en que usted está "en la zona" - cero distracciones, etc.
  3. Refleje

    Una vez que el sprint esté completo, compruebe su progreso. ¿Alcanzó o superó sus metas? ¿Qué causó la mayor parte del retraso?
  4. Adapte

    Aprenda acerca de lo que reflexionó, y ponga los sistemas en su lugar para ayudar a evitar los reatrasos.

En el enfoque tradicional ágil, los sprints se basan en ayudar con la colaboración en equipo y generalmente duran varios días o incluso semanas. Aquí, estamos hablando de autogestión y mini-sprints sobreenfocados. Estos mini-sprints podrían incluso centrarse simplemente en una sola tarea o interacción y sus objetivos asociados. El proceso de definir y priorizar la tarea o sus subtareas antes de sumergirse en el trabajo y posteriormente tomar tiempo para reflexionar sobre el proceso y adaptar su flujo de trabajo o patrones (recuerde, es importante optimizar sus patrones) le ayudará a ser más objetivamente consciente de su velocidad y productividad y le permitirá ser más consciente de lo que podría necesitar una mejora a un nivel micro.

Recomendación: defina dos sprints de 3 horas para un día, cada uno con una tarea primaria. El propósito del sprint (como con un sprint físico) es conducir su cerebro tan fuerte como usted pueda por esas 3 horas. Después de esas 3 horas, necesitará una interrupción cerebral; tal vez esta sea su hora de almuerzo, o tal vez usted ha optado por adoptar un horario alternativo para permitir un bloque de tiempo ininterrumpido sobreenfocado (más sobre eso más adelante). Cualquiera sea el caso, la planificación de estos sprints separados entre ellos le ayudará a recargar su cerebro. Vale la pena intentar tipos completamente opuestos de actividad (como caminar o leer ficción) o incluso una siesta - más sobre eso aquí. Si trabaja para una agencia, tal vez la interrupción entre sprints sea el tiempo que reserve para reuniones, tareas administrativas o tareas de desarrollo menos exigentes. Algunas personas consideran que esta es la mejor manera de trabajar todos los días, y algunos pueden optar por hacer este tipo de "entrenamiento de intervalos de sprint" esporádicamente; elija lo que termina haciéndole más productivo y aumentando la rapidez de desarrollo de interacción.


Bloquee Temporalmente los Sitios Web que Visita

Si usted es como la mayoría de la gente, sus dedos tienen memoria muscular; cuando abre un navegador, ¿es instintivo escribir inmediatamente Hacker News, Tuts+ o Twitter? ¿Cuáles son los sitios que le hacen dejar las cosas para después?

rapid-let_gorapid-let_gorapid-let_go

Hacker News ha atacado este problema de una manera específica, ofreciendo a los usuarios registrados la posibilidad de establecer una restricción "para no perder el tiempo". Hay algunas herramientas interesantes que también ofrecen este tipo de restricciones, pero ¿por qué no hacerlo usted mismo? En un Mac, ejecute los siguientes comandos desde el terminal:

rapid-consolerapid-consolerapid-console

Puede editar el mismo archivo en Windows (vea esta explicación).

Esto le impedirá utilizar Twitter o Facebook, y en su lugar le redireccionará a su localhost (0.0.0.0 es un acceso directo a su máquina). Para volver a la tierra de las redes sociales, sólo tiene que seguir los mismos pasos, pero eliminar las líneas que agregó.

Recomendación: ¿Deberías bloquear Facebook y Twitter todo el tiempo mientras está trabajando? Nosotros decimos que no. Tiene sentido ser capaz de tomar pequeñas pausas entre las tareas para evitar quemarse. Sin embargo, durante un sprint, si estos sitios están evidentemente están causando que usted pierda el tiempo, es importante (al menos hasta romper el hábito impulsado por la memoria del músculo) ponerlos en pausa. La nota importante aquí es, el control de su tardanza, incluso si eso significa programar tiempo para perder. Estar consciente del tiempo que está poniendo en una actividad determinada le ayudará a ser más consciente de si ese tiempo se está escapando de su control o no.


Minimice la Interrupción

Desde hace tiempo se sabe que las interrupciones disminuyen la productividad de los trabajadores del conocimiento. (Vea aquí, aquí, aquí, aquí - y hay mucho más disponible mediante una búsqueda rápida de Google.) Los programadores (y, por lo tanto, los diseñadores web) son susceptibles de potencialmente sólo obtener una sesión ininterrumpida de 2 horas en un día. En la metodología ágil, existe el concepto de horas centrales que sostiene que se debe mantener un enfoque fuerte durante 5 horas totales por día. Este es un salto muy lejano de las dos horas que los programadores pueden esperar lograr en una oficina normal.

La Anatomía de una Interrupción

Hay muchos tipos de interrupciones, pero hoy vamos a ver dos aspectos específicos de la interrupción. Las primeras son interrupciones bienvenidas o "auto-infligidas", las segundas son interrupciones externas o "intrusivas". Ambos tipos son perjudiciales para la productividad y ambos tipos pueden ser casi que manejadas de diferentes maneras.

Las interrupciones autoinfligidas ocurren porque usted de alguna manera ha creado el espacio para que ocurran. Estas suelen venir en forma de notificaciones programables (teléfono, computadora, etc).

rapid-pushrapid-pushrapid-push

Las interrupciones intrusivas ocurren porque otros seres humanos necesitan que usted les preste atención. La desconexión es el momento y la sensación de urgencia. Usted debe manejar su propio tiempo, y usted debe poner en su lugar las maneras de hacerlo de tal manera que se eviten los efectos negativos de la interrupción tanto como sea posible.

Entonces, ¿qué hacer para paliar las interrupciones? ¿Cómo se logra la Zona de Tiempo Zen? Estas son algunas de nuestras recomendaciones.

  1. Minimice o desactive completamente las notificaciones

    Esto incluye notificaciones telefónicas como textos, correo electrónico, Twitter e incluso "chat". Oculte sus ventanas de chat, y atiéndalas como parte de su flujo de trabajo, en lugar de una respuesta basada en la "demanda". Esto puede parecer que va a perjudicar su productividad al principio, pero puede que usted se sorprenda al ver cómo la gente está dispuesta a esperar si es realmente importante y qué tan probable es que resuelvan el problema por sí mismos si usted está demasiado ocupado para romper con lo que está haciendo.
  2. Pida a su gerencia que lea esto: adopte un respeto organizacional por la Zona.

    Cree reglas en la organización sobre "tiempo de zona" o "tiempo de creación". Esto significa que hay límites específicos para cuando, dónde y cómo puede interrumpir a alguien cuando están en la zona. Establezca maneras específicas de significar que usted está "debajo de la zona", como ponerse los auriculares o trabajar en una parte específica de su oficina. Este también es el propósito de los mensajes "ausentes" en el chat. ¡La gerencia debe reservar tiempo para el cultivo del desarrollo de interacción rápida!
    Gerentes - esto puede parecer una amenaza potencial a la oficina, pero como cualquier cosa, usted puede intentar esto por un corto tiempo para ver qué piezas fallan y qué piezas tienen éxito. Probablemente verá aumentos de productividad inmediatamente.
  3. Aíslese a sí mismo

    Quizás la solución más efectiva, aislarse a sí mismo hace que usted sea el controlador de su espacio. Esto puede suceder en muchos formatos diferentes; por ejemplo, muchos diseñadores y desarrolladores web trabajan desde cafeterías para sumergirse en el aislamiento. Esto evitará las interrupciones que ocurren como resultado de la proximidad física. Sin embargo el aislamiento no siempre significa ubicación, si la mayoría de la oficina trabaja de 9-5, tal vez usted trabaja de 6AM a 2PM o de 12PM a 8PM. Esto le dará espacio y tiempo para pensar y trabajar sin interrupción. Tal vez usted puede trabajar remotamente uno o dos días a la semana? Tal vez es mucho más simple que eso para usted, sobre todo si usted es un freelancer.
  4. Sea diligente con la comunicación programada

    Si usted va a poner las barreras a su alrededor, también debe estar dispuesto a cumplir con su palabra y responder a los mensajes cuando sale de debajo de la zona. No deje que esto se le resblae o de lo contrario los aspectos productivos de su zona de tiempo se reducirá por los aspectos negativos de sus hábitos de comunicación. Ah, ¡y no se olvide de llamar a su madre!

Empezando el Juego: Competición y Recompensa

¿Qué hace que los eventos "hackathon" sean tan productivos? ¿Cómo elaboran las personas productos viables en 48 horas? Tal vez es una mezcla de características.
1. Tiempo previsto, protegido y planificado para un rápido desarrollo enfocado

2. Competencia con otros

3. Recompensas en efectivo

Las Hackathons rompen con el "flujo normal" de cada día de trabajo. Ciertamente, no quisiéramos trabajar 48 horas seguidas todo el tiempo. Pero las mentalidades de productividad que surgen de esto son extremadamente importantes. Ya hemos hecho alusión a lo importante que es el enfoque y el tiempo ininterrumpido. Sin embargo, es un esfuerzo digno de considerar cómo crear algunos sistemas personales de competencia y recompensa pueden ayudar a aumentar su eficacia en el desarrollo. Esto ayuda a establecer puntos de referencia y naturalmente entrena su cerebro para adaptarse a los comportamientos que son gratificantes.

Recomendación: si trabaja con otro desarrollador, decida sobre una competencia con objetivos claros y haga que esté orientada al tiempo. Realmente no importa cuáles son esos objetivos. Tómese un tiempo para trabajar a través de ellos. Quizás pueda competir contra sí mismo; practique mediante el uso de los sprints como su competencia, y establezca sus objetivos para aumentar su eficiencia en una cierta cantidad de tiempo. Establezca recompensas tanto para cuando usted está en un modo competitivo, así como para cuando complete cualquier sprint centrado en el trabajo. Esto le ayudará a mantenerse enfocado durante el sprint en sí. Una recompensa puede ser una cosa física (como una taza de café) o algo menos concreto (como un estacionamiento VIP durante una semana o "tiempo libre").


Sumérjase en la Comunidad de Código Abierto

Vamos a mantener este consejo corto, porque los beneficios aquí serán obvios. El Mundo de Código Abierto está lleno de gente increíble y talentosa que construye cosas que ayudan a otros a hacer mejor su trabajo cada día. Ejemplos como los frameworks que mencionamos anteriormente apenas rayan la superficie. Estos son algunos de los beneficios de trabajar y comunicarse con la comunidad de código abierto.

  1. Exposición a nuevas herramientas
  2. Soluciones gratuitas a problemas comunes
  3. Nuevas soluciones a los problemas emergentes
  4. Una mejor comprensión de problemas que usted puede no saber que existen
  5. Oportunidad de contribuir y formar parte del ciclo dar/recibir
  6. Osmosis del Pensamiento: aprendizaje por repetición y exposición

Sumergirse en la comunidad de código abierto y aprender a usar las herramientas que se ofrecen puede aumentar inmediatamente la productividad, pero también hace que sea mucho más probable que otra persona pueda recoger su proyecto y continuar desarrollando ese proyecto. El código abierto permite a las personas colaborar en torno a un estándar decidido y la documentación preexistente. Esto reduce la sobrecarga cognitiva para la transferencia de proyectos y le hace un desarrollador mucho más letrado; esto se traduce inmediatamente en una mayor eficiencia.

Recomendación: Obtenga una cuenta de GitHub y comience a construir cosas con las herramientas disponibles en GitHub.

rapid-ghrapid-ghrapid-gh

Esto es algo así como una reiteración de lo que dijimos anteriormente - utilice frameworks de código abierto para resolver problemas de manera predecible y modelada y participe en la comunidad de otras personas que lo están haciendo de esa forma. La colaboración y la discusión son claves muy importantes para el aprendizaje.


Conclusión

Esto de ninguna manera es una lista completa de cosas que puede hacer para convertirse en un desarrollador de interacción rápida. ¡Deje algunas notas en los comentarios de las cosas que ha probado que han funcionado, fallado, o han tenido poco o ningún efecto!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.