Presentamos Sizzy: una herramienta para desarrollar sitios web receptivos a toda velocidad

Entonces, así es como sucedió Sizzy.

Ya sabes que hacer. Está desarrollando una aplicación para un cliente y necesita hacer que cada página y cada componente funcionen en cada variación, en cada dispositivo.

Ya estaba usando react-storybook para cambiar entre todas las variaciones de un componente, pero aún tenía que cambiar entre 12 dispositivos solo para ver los cambios en todos ellos. Y así empezó todo.

¿Qué tal hacer una herramienta en la que puedas previsualizar varias pantallas a la vez mientras trabajas? Eso sería genial, ¿eh?

Cómo todo empezó

El tweet inicial sobre la idea obtuvo más de 200 me gusta y más de 60 retweets, por lo que la gente definitivamente estaba interesada en este tipo de herramienta.

Inicialmente, lo hice funcionar solo con react-storybook. Tuve algunos problemas con las bibliotecas css-in-js cuando desarrollé localmente, pero encontré una solución rápida.

Después del libro de cuentos de integración, se terminó el prototipo inicial. Lo siguiente que necesitaba abordar era acercar y alejar todas las pantallas.

Los usuarios probablemente deseen obtener una vista previa de sus cambios de pantallas más grandes como iPads o computadoras portátiles pequeñas, y no puede encajarlas sin alejarse.

Después de un poco de ajustes con el ancho y la altura del iframe principal y transform: scale (zoom * 0.01) en el contenido, finalmente lo entendí bien.

En ese momento, comencé a pensar que la herramienta en realidad se puede publicar como una aplicación web independiente, y el complemento del libro de cuentos puede ser solo una adición. Así que cambié mi objetivo y comencé a trabajar para lograrlo.

Agregué algunos temas, pulí un poco la interfaz de usuario, luché durante 30 minutos para encontrar un nombre y ... * redoble de tambores * Sizzy es. Configuré un repositorio temporal de GitHub para las personas que estaban interesadas en ver para que puedan saber cuándo se publica el código.

Estoy orgulloso de haber convertido a Addy Osmani y Jason Miller en un repositorio vacío

Tenía muchas características que quería incluir, pero solo tenía que terminar las importantes y enviar la primera versión al final de la noche. Agregué filtros por sistema operativo y tipo de dispositivo y seguí adelante.

Agregué una barra de URL en la parte superior para que los usuarios puedan jugar y obtener una vista previa de cualquier URL.

Después de abrir el código, pulir la interfaz de usuario y terminar muchas otras cosas más pequeñas, sizzy.co fue en vivo y este fue el resultado final:

En realidad terminé el trabajo a las 5:30 a.m. porque no podía dormir sin terminar * esa * * una * * cosa *

Terminando

No he trabajado en mi propio producto por alrededor de un año, y puedo decirte que se siente tan, * tan * ¡bien! Sin rastreadores de tiempo, sin estimaciones, sin gestión, caos organizacional y otras cosas que matan su productividad. Simplemente te sientas, sabes lo que tienes que hacer y haces el trabajo que hay que hacer. ¡Eso es!

Estás resolviendo tu propio problema con la esperanza de que también puedas resolver los problemas de otras personas. Lo más importante es que al final, obtienes muchos comentarios sorprendentes y positivos, ¡que es básicamente lo único que te impulsa a hacer un trabajo mejor y más increíble!

Quiero agradecer a todos por sus comentarios y apoyo. Puedes seguir a Sizzy en Twitter si estás interesado en futuras actualizaciones.

Puedes seguirme en Twitter para más cosas relacionadas con React y Javascript.

Si usted o alguien que conoce está interesado en un taller profesional de React, consulte React Academy.

EDITAR 1: Sizzy ha sido aprobado en OpenCollective, por lo que si planea usarlo puede considerar apoyarlo a través de una pequeña donación. Su nombre e imagen aparecerán automáticamente en la sección de seguidores en el archivo Léame de GitHub. ¡Gracias!

EDITAR 2: si eres desarrollador y estás interesado en cómo se construye Sizzy con React, componentes con estilo y MobX, revisa el nuevo canal de YouTube donde publico videos de características de construcción para Sizzy y los envío en vivo.

EDITAR 3: La extensión Sizzy Chrome está activa . ¡La vista previa de cualquier sitio web en Sizzy está ahora a un clic de distancia!

Adios!