Buenas prácticas de programación en BigPink

La mayoría hemos escuchado sobre la importancia del trabajo en equipo, cómo aumenta la eficacia y calidad de los resultados, cuando trabajas en equipo con programadores que tienen distintas habilidades y talentos, es de suma importancia buscar que la forma de programar se estandarice y no se convierta en una complicación innecesaria; para ello, es recomendable establecer y seguir una serie de buenas prácticas.

A continuación, te platicaré algunas de las buenas prácticas que implementamos en BigPink.

  • Legibilidad en el código.

La legibilidad es muy importante, debes escribir tu código, pensando que cualquier programador lo pueda comprender, además, ten en cuenta que entre más complejo sea tu código, más difícil resultara dar mantenimiento en el futuro.

  • Leer código fuente.

Escribir código fuente es mas fácil que entender el código escrito por otros, muchas veces nos encontramos con código desordenado, o con la documentación de código incompleta, por eso, leer código fuente te ayudará a entender la diferencia entre código de buena o mala calidad, también, te ayudará a mejorar tus habilidades de programación.

  • Estructuras de control e indentado.

Con tu equipo de trabajo, deberán acordar un estilo de sangría en su código, para tabular o delimitar bloques de código, con esto harán que su código sea más fácil de leer.

  • Valores fijos.

Cada vez que tengas un valor concreto en tu código, el valor debe ser almacenado en una constante, así, ayudarás a reducir el mantenimiento ante cualquier modificación que afecte la estructura.

  • Comentarios en el código.

Los comentarios en el código, deben ser para favorecer la comprensión del código y no para introducir mayor complejidad en su entendimiento, realiza los comentarios por bloques, cuando consideres importante reflejar la importancia de alguna línea en tu código, puedes agregar comentarios al final de esta.

  • Caracteres únicos del español.

Procura escribir código en inglés y que tu teclado esté configurado en este idioma, ya que caracteres como la ñ o las tildes pueden generar errores al no ser caracteres ASCII.

  • Testear el código.

Siempre debes estar realizando este paso, incluso, después de haber realizado un pequeño cambio en tu código, de esta manera, evitarás frustraciones futuras al momento buscar un error.

  • Tamaño del código.

La longitud de un método no debe exceder 100 líneas de código sin causa justificada, recuerda que siempre puedes hacer uso de un método dentro de otro. Por línea, evita la incorporación de más de una instrucción que rebase los 80 caracteres.

  • Compartir.

Compartir conocimientos ya sean técnicos o profesionales con tus compañeros, motiva a que se puedan ayudar mutuamente a mejorar y logra que el trabajo en equipo funcione mejor.

  • Investigar cosas nuevas.

Es muy importante que te intereses en los temas a aprender, que tengas inquietudes al respecto y que, fundamentalmente disfrutes programando. Existen muchas herramientas y plataformas que te pueden ayudar a expandir y mejorar tus conocimientos, siendo productivo(a) y de una forma divertida, sin generar estrés y aburrimiento.

La programación requiere de paciencia y resistencia a la frustración, tal vez, el trabajar con código ajeno o tratar con datos desactualizados puede dificultar tus tareas asignadas, pero debes perseverar y seguir adelante.

Andrea Adriana Hernández
www.girasolo.com
www.ThinkBigPink.com

Importancia de GIT

Dentro del desarrollo de software existen distintos tipos de herramientas que nos ayudan a solventar alguna necesidades específicas, las cuales facilitan la parte de desarrollo, implementación, despliegue, documentación, o testing. El día de hoy yo les hablaré de una herramienta para desarrollo de software profesional que nosotros internamente usamos en cada uno de nuestros proyectos, GIT.

Pero para poder hablar de git, primero tenemos que saber qué es, de dónde surge y cuál es su función.

Git es un sistema de control de versiones, el cual es distribuido, es decir, que bajo un mismo proyecto múltiples programadores pueden trabajar y desarrollar en conjunto. Es de código abierto así que es totalmente gratuito, se puede adaptar fácilmente a un proyecto pequeño así como a uno grande, cuenta con una gran documentación en la web y es muy usado por los programadores, es una herramienta muy útil a la hora de hacer correcciones a bugs y documentación de proyecto ya que cuenta con una línea del tiempo de desarrollo.

Git es un sistema multiplataforma, lo que quiere decir que podemos usarlo con Windows, Linux o Mac OS. Git también cuenta con plataformas de desarrollo colaborativo, o también llamadas red social de los desarrolladores, donde se alojan los repositorios, el código se almacena de forma pública pero se puede hacer privado con una cuenta de pago, algunos ejemplos de esto son github.com o gitlab.com.

En el caso de nuestra empresa, nosotros usamos git y lo combinamos con el uso de gitlab ya que este nos ayuda a hacer CI/CD (continuous integration / continuous delivery) que son terminos muy utilizados en el DevOps.

Para ponerlos un poco más en contexto CI es un proceso en donde cada cambio que realizamos en nuestro código debe ser testeado y verificado por las pruebas que hemos escrito con anterioridad.

CD es el mismo proceso anterior, solo que de una manera más automatizada y además nuestros tests de aceptación o acceptance tests deben ser de una gran calidad. Porque Continuous Delivery se asegura de que cada cambio realizado esté listo para ser lanzado a producción.

Para trabajar eficientemente con git es necesario tener un gitflow eficiente pero, ¿qué es un gitflow?, según la pagina oficial de Github https://github.com/doapps/software/wiki/Gitflow.

Gitflow es un flujo de trabajo de basado en git que fue publicado y popularizado por Vincent Driessen. El flujo de trabajo de Gitflow define un modelo de ramificación estricto, diseñado en torno a la versión del proyecto. Esto proporciona un marco robusto para la gestión de proyectos grandes.

¿Por qué usar Gitflow?

Por los siguientes motivos:

  1. Desarrollo Paralelo
  2. Colaboración
  3. Área de puesta en escena de la versión
  4. Soporte para reparaciones de emergencia

Nuestro gitflow es uno de los más estándares, comenzamos con dos ramas principales que son máster y develop, la rama máster está protegida y nunca se sube nada directamente a ninguna de estas cuando se va a realizar una nueva funcionalidad. Nunca se trabaja sobre ninguna de ellas lo que se hace es posicionarse en develop, actualizar con el repo remoto y después crear otra rama en la que se trabajará con el prefijo feature, una vez terminas la funcionalidad se sube esa nueva rama al repo remoto para ser revisada por medio de pipelines, y de ser aprobada, se integra con develop.

Cuando se va a corregir un bug el proceso es bastante parecido, solo que en lugar de feature se usa el prefijo Hot-fix, cuando el proyecto esté listo para mandarse a producción se hace un merge entre develop y máster para crear la primer versión o relace esto se repite conforme a los relace que son lanzados.

Como pueden ver, git es una herramienta muy útil para los desarrolladores que cuando es manejada debidamente, acorta tiempos de desarrollo y ayuda con la gestión de software, en el siguiente enlace les dejaré algunos de los comandos que son más usados en git por si les interesa.

https://github.com/miguel199529/Notas/blob/master/GIT.md

Miguel Ángel López
www.girasolo.com
www.ThinkBigPink.com

¿Qué es DevOps?

¿Alguna vez has escuchado hablar sobre DevOps? existen varios puntos de vista sobre el término DevOps ( Develop / Operations ), pero la gran mayoría coinciden en que es una cultura que promueve la comunicación entre el departamento de desarrollo (Development) y el departamento de Administración de sistemas (Operations). 

La cultura DevOps tiene como objetivo acelerar la entrega de software de manera ágil asegurando la calidad del software, todo esto, por medio de buenas prácticas, herramientas de integración de código, pruebas automatizadas, administración de infraestructura, etc.

Las prácticas más populares de la cultura DevOps son las siguientes:

Infraestructura como código: Infraestructura como código es un método de automatización que está basada en prácticas de desarrollo de software. Los cambios realizados a los sistemas y sus configuraciones específicas son bien definidas y capturadas en archivos de configuración (scripts, playbooks, manifests, módulos).

Integración continua ( CI ): La integración continua es una práctica de desarrollo de software mediante la cual los desarrolladores combinan los cambios en el código en un repositorio central de forma periódica, tras lo cual se ejecutan versiones y pruebas automáticas.

Entrega continua ( CD ): La entrega continua es una práctica de desarrollo de software mediante la cual se preparan automáticamente los cambios en el código y se entregan a la fase de producción.

Herramientas DevOps más populares: Red Hat Ansible, Jenkins,Terraform, Chef, Docker, GIt, GitLab, Kubernetes, Nagios, Puppet.

DevOps en BigPink

Nosotros en BigPink adoptamos una cultura DevOps que va desde la configuración de los proyectos, testing y pruebas de integración de código hasta entornos automatizados con despliegue continuo ( continuous delivery ), para ello, implementamos las siguientes practicas y herramientas:

Configuración de proyectos: Todos los proyectos son configurados con GIT como sistema de control de versiones de software, así como el uso estricto de linters para detectar errores de estilo y mantener el código limpio.

Infraestructura como código (IaC): Toda la infraestructura la manejamos como código por medio de configuración de plantillas cloud formation para Amazon Web Services. 

Integración continua (CI): Para la integración del código utilizamos GitLab como plataforma de repositorios privados en donde por medio de Pipelines ejecutamos varias pruebas (build, linters, testing, etc.) para asegurar la calidad antes de que el código sea integrado en el repositorio central.


Entrega continua (CD): Para lograr la entrega continua se automatiza el despliegue de nuestros proyectos por medio de Pipelines programadas en GitLab que se conectan a nuestra infraestructura previamente montada en Amazon Web Services, una vez pasadas las pruebas de integración del código.

Edgar Leyva
www.girasolo.com
www.ThinkBigPink.com

Big Pink

Branding por Girasolo.

Hola soy Edith y hoy te voy a platicar de cómo fue crear la identidad visual de Big Pink, recuerdo que todo empezó cuando Chen nos habló de la nueva idea que tenía en mente y no pude evitar comenzar a bocetar el logo justo en ese momento, llegó repentinamente la idea, lo primero que me di cuenta era que necesitábamos algo muy fuerte, en cuanto a tipografía, pues el nombre conllevaba todo un reto: hacer que no luciera femenino, ya que Big Pink se podría asociar a eso, también que proyectará que se trataba de algo digital y de tecnología, sin quitar toda la parte formal que se necesitaba para que el futuro cliente sintiera esa confianza y seguridad de confiarnos su proyecto.

A partir del aquel primer boceto, comencé a trabajar mi idea, como ya he mencionado antes me gusta crear tipografías desde cero, Big Pink no podría ser la excepción, también tenía claro que tenía que evitar lo orgánico o lo delicado, ya que se necesitaba dar contraste a lo que podías llegar a pensar de primera impresión del nombre, mi inspiración fue a partir de líneas rectas, en concreto de los rectángulos, también quería que el logotipo fuera de fácil visualización en diferentes tamaños y que no se perdiera su legibilidad . Hice énfasis en la palabra Big fuera precisamente eso y la coloque de manera superior, por otra parte Pink estaría en la parte inferior con un tamaño más reducido y así al agruparse forman un rectángulo hecho de mayúsculas dando la sensación de fortaleza sin dejar de lado el toque jovial, algo también que quisiera mencionar son las i que lleva,  están formadas por dos cuadrados que a su vez puedes interpretar por “dos puntos” algo que es muy usado en el lenguaje de los desarrolladores.

A la hora de aplicar el color, ya tenía previsto la inspiración del CMYK, una idea que tuvo Chen y quise implementar, pues concuerdo con lo que él menciona antes, si bien Big Pink trabaja en lo digital nació a partir de una empresa de diseño, el protagonista principal sería el rosa o magenta y acompañándolo el amarillo como contraste, no sólo para hacer alusión a la parte de Pink, también porque quería que en un futuro Big Pink  se destacará de la competencia, ya que previo a esto, hice una investigación y note que había un gran número de empresas que se dedicaban a lo mismo y hacían mayor uso de tonos azules o grises, por lo que jugar con una paleta diferente a lo usual, se haría notar y aportaría una sensación fresca.

El logo y los complementos al ser tan versátiles se prestan para hacer diversas variaciones, según sea necesario, ahora sí, para hablar de lleno en los complementos de esta imagen, quería formas bastante sencillas, buscaba la limpieza y claridad en el diseño, usando rectángulos y cuadrados, como plastas de color sin ningún orden en específico, pero si buscando siempre un equilibrio visualmente, en la parte donde predominan imágenes o poco texto el uso de colores y formas se usa bastante, mientras que para documentos o presentaciones que implican más texto el diseño se hace más discreto, procurando el fondo blanco para descansar la vista y sólo dar un pop de color, en la tipografía o en algún un gráfico.

Usos, colores y formas para la imagen de Big Pink

Como tipografía complementaría, se decidió por una san serif, llamada Hack que fue creada para desarrolladores y su función principal es lucir bien siempre en pantalla, al implementarla nosotros en nuestros textos da la sensación de que estas escribiendo algún código,  esto también ayuda a la comunicación que estamos utilizando, que es el uso de algunos elementos propios del lenguaje de los desarrolladores en los textos, no sólo en el uso de algunos signos, como: las comillas, las diagonales, las llaves o paréntesis, también en el uso de los colores para destacar algunas palabras.

Una vez teniendo como base estos elementos , se empezó la creación de diferentes materiales de apoyo, como plantillas para presentaciones, tarjetas, hojas membretadas y la página web que ya esta vigente, también se hicieron algunas fotografías a cargo del equipo de multimedia donde se capturaron algunas escenas de un día laboral y como transcurr.

La imagen de Big Pink se sigue construyendo hasta la fecha, personalmente me ha gustado mucho el resultado que estamos teniendo, los invito a visitar la página web que próximamente se estarán subiendo proyectos  en los que han trabajado mis compañeros.

@edithcd9269f173
www.girasolo.com
www.ThinkBigPink.com

Páginas con React.

Construye páginas, más rápidas y con mejor experiencia de usuario gracias a React y su virtual dom.

React es una biblioteca de JavaScript para construir interfaces de usuario basada en la creación de componentes; su principal característica es el Virtual DOM que es una copia en memoria del DOM real, este Virtual DOM se encarga de hacer actualizaciones hacia el DOM real (La interfaz gráfica que ve el usuario) de manera atómica gracias a su librería diferencial capaz de detectar los cambios que existen en ambos DOM y poder renderizar solo los elementos que han cambiado.

Funcionamiento del Virtual DOM de Reactjs

Con este render atómico react proporciona una UX superior a cualquier Framework o librería para front, asi como un mejor performance al solo renderizar los cambios y no el componente entero dando una sensación de fluidez en tiempo real de la aplicación web.

En Girasolo buscamos la innovación en la tecnología para ofrecer mejores resultados en todos nuestros proyectos, por ello esta vez decidimos implementar react en uno de los nuevos proyectos del área: la página oficial de BigPink(nuestro spin off).

Inicio Página Big Pink
Extracto de la página en su versión Inglés.

Obteniendo como resultado un sitio web ligero para el usuario, que renderiza al instante la información además de ofrecer otras características atractivas para el cliente como: el intercambio de props con lo cual se puede reducir considerablemente el código ya que los componentes son reutilizables, el multilenguaje en la aplicación con lo cual tu sitio web esta un escalón más arriba en los estándares de Ux, además, react es isomorfico lo que significa que: con el mismo código, somos capaces de renderizar tanto en el cliente como el servidor. Por tanto, cuando llega un buscador como Google, con la misma base de código se le puede entregar el HTML con el contenido ya renderizado, lo que lleva a que una aplicación React sea capaz de posicionarse tan bien como una aplicación web tradicional que renderice del lado del servidor, como es el caso de un desarrollo tradicional o un desarrollo basado en un CMS como WordPress, todo esto gracias a Nodejs.

Extracto de la página en su versión Español.

En conclusion React nos permite un desarrollo ágil, ordenado y con una arquitectura mantenible, focalizada en componentes y que nos ofrece un gran performance.

A continuación, se muestra un poco de lo que se logró realizar con ente framework.

Conoce nuestro sitio web: https://www.thinkbigpink.com/

Si quieres conocer por qué nos llamamos BigPink conoce la histora en nuestra entrada anterior.

Cecy Pérez
cecy@girasolo.com
www.girasolo.com
www.ThinkBigPink.com