▶ Los 6 mejores proyectos de nuestro hackathon

El 4 y 5 de octubre de 2021, el equipo de diseño y web organizó un hackathon remoto. El tema era desarrollar herramientas que nos hicieran la vida más fácil en Canonical.

La creatividad y la colaboración están en el corazón de cada hackathon. 26 diseñadores visuales y UX, desarrolladores y gerentes de proyectos, divididos en 6 grupos, participaron en esta aventura. Aquí hay un punto destacado de lo que se construyó en el transcurso de esos dos días.

Tabla de Contenidos

Google Meet para Webbot

Como equipo distribuido por todo el mundo, hacemos un uso extensivo del chat y las videollamadas; la mayoría de nosotros hacemos llamadas varias veces al día.

Organizar llamadas ad hoc puede ser caótico y, a menudo, es así:

Will: Quick call to discuss the thing?
Ana: Sure? Which Meet?
Will: Standup?
Ana: https://meet.google.com/….
Will: Oh I’m in Standup
Ana: Ok I’ll join
Will: Oh, I left Standup
Ana: So which Meet?

Nuestro objetivo era crear un comando simple para Mattermost (nuestro sistema de chat) que permitiera a los usuarios generar instantáneamente una nueva URL de encuentro y publicar el enlace al canal. Sin ida y vuelta y sin confusión sobre a qué reunión unirse.

Hemos agregado un nuevo comando ‘meet’ al webbot, el código fuente está aquí.

Ahora nuestros usuarios pueden escribir /meet seguido de algunos nombres de usuario y verá algo así en Mattermost

Esperamos que esto ahorre tiempo a todos nuestros usuarios para organizar reuniones con colegas.

¿Dónde está el calendario de vacaciones?

Uno de los desafíos de un equipo remoto es tener una idea tangible de quién está y quién no. No sabía que era una fiesta nacional en Polonia. Martin está en el dentista y Jeff se ha tomado un día libre.

Las ausencias se marcan en un calendario del equipo de diseño centralizado que debe actualizarse manualmente, un calendario de RR.HH. que mantiene los registros oficiales de vacaciones, días de enfermedad, baja por maternidad y conoce los feriados nacionales, así como calendarios individuales de Google que el OOO-E – Procesar rebotes de correo y cancelaciones de reuniones.

Nuestro truco consideró en primer lugar si toda esta información podría recuperarse de forma sistémica y, en segundo lugar, dónde podría mostrarse de manera significativa.

Nuestro prototipo de prueba de concepto mencionado anteriormente le otorga al webbot la dónde está Mando. @webbot ¿dónde está toto? donde esta beth dónde está ¡alguien!

Realizamos una encuesta a los usuarios para comprender el problema. El equipo es definitivamente un poco gruñón Búsqueda de información de presencia en varios lugares, la falta de fiabilidad de algunos datos y el esfuerzo manual necesario para mantenerlos.

Técnicamente, necesitaríamos claves para el sistema de recursos humanos, una forma segura y ética de presentar esta información, acceso de lectura a calendarios individuales para obtener información de ausencias y acceso de escritura para crear un calendario de disponibilidad del equipo sin cortar y pegar, desafortunadamente más allá del panorama del tiempo. de este día del truco.

Nuestro prototipo de UX aprovecha el conocimiento de que el chat más importante es exactamente donde las personas buscan a sus colegas por primera vez, y que sería valioso enseñarle al webbot dónde están todos. El proyecto ha entrado provisionalmente en la cartera de trabajos de ingeniería del lugar de trabajo. Webbot quiere un día libre ahora.

Selector de presentador Canonicool

Cada semana, los viernes por la tarde, el equipo de Web & Design organiza una pequeña y divertida reunión llamada Canonicool, donde todos nos reunimos y escuchamos a tres colegas seleccionados al azar dando una breve charla sobre lo que les gusta.

Solíamos seleccionar a estos tres compañeros de forma completamente aleatoria, hacerlo con unos meses de antelación y registrarlos en una tabla. Esto quedó obsoleto muy rápidamente a medida que los miembros del equipo iban y venían y podría significar pedirle a la misma persona que se presente dos semanas seguidas.

Para este día del truco, ¡decidimos hacer el proceso un poco más inteligente! Escribimos un script que se ejecuta una vez a la semana y obtiene la lista más actualizada de miembros del equipo, verifica su disponibilidad, se asegura de que no se hayan presentado recientemente y los agrega a una tabla.

Una vez que tuvimos la fórmula para elegir oradores, queríamos presentar la información de una manera más agradable que solo otra fila en una tabla, por lo que creamos una API para entregar los datos e hicimos una página atractiva con información sobre la sesión de Canonicool de la semana actual, las sesiones durante las próximas tres semanas y una lista paginada de sesiones anteriores. ¡Y voilá!

Una bola 8 mágica

Al final de cada iteración, tenemos una reunión en la que cada equipo demuestra en qué han estado trabajando durante las últimas dos semanas. Por lo general, el anfitrión simplemente llama escuadrones al azar, pero pensamos que podríamos hacer que este momento sea más divertido e interactivo.

¡Presentamos Canoniball!

Con esta aplicación puedes crear tus propias ocho bolas mágicas para responder a todas tus preguntas.

Las bolas creadas se pueden compartir y marcar fácilmente para uso futuro. También agregamos una opción para respuestas no repetitivas para que un equipo no se quede atascado en un ciclo interminable de presentaciones.

Si bien este proyecto es un poco más simple (¡y más tonto!) Que los demás, tiene el tamaño perfecto para probar un nuevo marco de Javascript: Svelte. También nos vuelve locos y ejercita nuestro músculo de animación CSS.

Extensión de código Vanilla VS

Vanilla Framework es una biblioteca CSS que se utiliza en todos los proyectos web de Canonical. La idea de la extensión VS Code es proporcionar una serie de funciones para ayudar a los desarrolladores durante sus sesiones de codificación.

Sabíamos que este proyecto tomaría más de dos días, así que comenzamos a trabajar en una extensión de base que incluye todas las piezas necesarias. En el día de la piratería, teníamos una extensión de trabajo que permite completar automáticamente las clases en archivos HTML. Aquí está la lista de las nuevas funciones que agregamos durante el hackathon:

Insertar recortes: La idea es proporcionar fragmentos basados en los ejemplos mantenidos por el equipo de Vanilla. Rastrearemos todos los ejemplos de la página de documentación y los mostraremos como fragmentos.

Soporte de respuesta: El equipo de Vanilla mantiene una biblioteca de componentes de reacción que se utilizan en nuestros sitios web. Queríamos ayudar a los desarrolladores que contribuyen agregando también soporte para React autocomplete (.jsx, .tsx).

Variables SCSS: Vanilla Framework se envía con variables SCSS personalizables con valores predeterminados. Agregamos soporte para variables de autocompletar en un archivo de estilo (.scss). Esto facilita encontrar la variable que desea ajustar y obtener una vista previa del valor predeterminado de la variable.

Enlace a los documentos: Cuando abre la descripción del nombre de una clase en un archivo React o HTML, encontrará un enlace a la página de documentación que explica cómo funciona esa clase y algunas de las mejores prácticas que debe seguir.

Gracias a las grandes ideas y al gran trabajo del equipo, logramos producir muchas funciones interesantes durante el día del hack. Todavía hay margen de mejora y, por supuesto, otras características que se pueden agregar. ¡Puede probar la extensión en Visual Studio Marketplace!

Zona horaria en mattermost

Nuestro equipo está distribuido en varios continentes y zonas horarias. Por lo tanto, saber si es por la mañana, por la tarde o por la noche para otra persona cuando necesita enviar un mensaje o programar una reunión a veces puede ser un problema. Decidimos escribir un bot más importante (en realidad dos bots) para solucionar este problema.

Muchos de nosotros usamos el directorio interno de Canonical para encontrar rápidamente información de contacto y zona horaria de colegas. El comando / dir de nuestro webbot genera una URL de directorio basada en un nombre o una consulta de búsqueda. Correr /dir mrgnr y /dir name Morgan genera los siguientes enlaces