slides-cssDevConf

View Github Repository Open presentation in a new window

jota-v

See all presentation from jota-v

slides-cssDevConf

0 0

slides-cssDevConf

On Github jota-v / slides-cssDevConf

CSSDevConf

2015

Juan Vanni
Todo comenzó en octubre 2015 arriba de un...

BARCO

"Yo sé hacer layouts en flexbox"

"Te dije que no le pongas overflow auto nabo"

"Sé hacer buenos floats, voy a sobrevivir"

Empecemos con lo divertido

FRONTEND

Me gustaba lo de titanic :(

Los temas calientes:

Global styles Vs. Inline Styles SVG Design pattern libraries Adopting open source culture in a company Extras

Global stylesVs.Inline Styles

Piña va piña viene...

Global styles

Oradores: Jonathan Snook

SLIDE FALTANTE

Ya conocen todo el blah blah blah de global styles

INLINE STYLES

PE PE PE... PERO ME DIJERON QUE ESO ESTABA MAL!!!

Oradores: Alex Lande and Philip Walton

Argumentos:

  • Escalabilidad rota
  • Es ineficiente, las hojas se ponen gordas
  • SMACSS, BEM, SUIT fallan
  • Muchas formas de nombrar clases
  • Muchas sintaxis diferentes

¿Pero qué proponen?

Volver al pasado!

Formas de hacer Inline Styles

  • Radium CSS con React
  • Web components
  • Atomic CSS
  • Marionette Style (React like inline styles)

Propuestas de uso en MELI

Backbone Marionette Style

(Es todo teoría)

SVG

¿Eso ya lo podemos usar?

Oradores: Sara Soueidan

Bondades del SVG

  • Es performante
  • Se puede "spritear"
  • Es Multicolor
  • Se pueden animar sus partes por separado
  • Es accesible

¡MUCHO VERDE POR AQUI!

Design pattern libraries

¿Estamos hablando de Chico?

Oradores: Marcelo Sommers & Jina Bolton

GUIAS DE DISEÑO ZOMBIE!

Las guías se estacan en el tiempo

  • La documentación es pobre.
  • La documentación es difícil de mantener.
  • Sistemas organizacionales centralizados.
  • Empiezan a generarse inconsistencias.

Soluciones:

  • Sistemas organizacionales federados.

  • PatternPack!

¿Quieren más

terror?

(risa macabra de fondo)

Caso SalesForce

Salesforce no por favoooorrrr noooooo!

Problema

  • Muchas inconsistencias
  • Mala documentación, difícil de comprender
  • Los clientes pedían ayuda con sus diseños
  • Clientes hacían lo que les parecía
  • Costaba escalar interna y externamente

¿Que hicieron?

Lightning Design System

"Single source of truth"

Se copiaron de Bootstrap

Fostering “Open Source” culture at work

Nada que ver con CSS

Oradores: Kevin Lamping

¿De qué estás hablando willys?

¿Cuáles son los éxitos del Open source?

Seamos buenos ciudadanos del frontend

  • Escribamos buena documentación
  • Versionemos de la forma correcta y semántica (major.minor.patch)
  • Code reviews
  • Tests y linteos automáticos
  • Reducir fricciones
  • Mantener entorno limpio, estable y funcional

Embrace human culture

(No somos robots)

Evitar volverse bueno en reuniones

Se crean silos: los silos fomentan política

  • La gente trabaja mejor cuando se siente incluida y siente que participa.
  • Hacer bajada de las reuniones. No enterarse de las cosas porque lo escuchaste por ahí.
  • Usar un Chat Room público.
  • Buscar y generar feedback constante.
  • Ser agradecido a la críticas.

Extras

Lo que no entró

Animaciones

Visual regression testing

The End

Gracias!
CSSDevConf 2015 Juan Vanni