Introduktion af Sizzy - Et værktøj til at udvikle responsive websteder vanvittigt hurtigt

Så her skete Sizzy.

Du kender boret. Du udvikler en app til en klient, og du er nødt til at få hver side og enhver komponent til at fungere i enhver variation på alle enheder.

Jeg brugte allerede react-storybook til at skifte mellem alle variationer af en komponent, men jeg var stadig nødt til at skifte mellem 12 enheder bare for at se ændringerne i dem alle. Og sådan begyndte det hele.

Hvad med at lave et værktøj, hvor du kan få vist flere skærme på én gang, mens du arbejder? Det ville være pænt, he!

Hvordan det hele begyndte

Den første tweet om ideen fik 200+ likes og 60+ retweets, så folk var bestemt interesseret i denne form for værktøj.

Til at begynde med fik jeg det til kun at arbejde med react-storybook. Jeg havde nogle problemer med css-in-js-biblioteker, når jeg udviklede lokalt, men jeg fandt en hurtig løsning.

Efter integrationshistorikbogen var den oprindelige prototype færdig. Den næste ting, jeg havde brug for at tackle, var at zoome ind og ud på alle skærme.

Brugere vil sandsynligvis have et eksempel på deres ændringer af større skærme som iPads eller små laptops, og du kan ikke få dem ind uden at zoome ud.

Efter lidt forvirring med bredden og højden på den overordnede iframe og transformation: skala (zoom * 0,01) på indholdet, fik jeg det endelig korrekt.

På det tidspunkt begyndte jeg at tænke, at værktøjet rent faktisk kan offentliggøres som en uafhængig webapp, og storybook-pluginet kan bare være en tilføjelse. Så jeg flyttede mit mål og begyndte at arbejde mod det.

Jeg tilføjede få temaer, polerede op UI'en lidt, kæmpede i 30 minutter for at komme med et navn og ……. * trommetroll * Sjovt er det. Jeg opretter en midlertidig GitHub-repo for folk, der var interesseret i at se, så de kan vide, hvornår koden frigives.

Jeg er stolt over, at jeg fik Addy Osmani og Jason Miller til at spille en tom repo

Jeg havde en masse funktioner, som jeg ønskede at inkludere, men jeg var bare nødt til at afslutte de vigtige og sende den første version ved udgangen af ​​natten. Jeg tilføjede filtrering efter OS og enhedstype og gik videre.

Jeg tilføjede en url-bar øverst, så brugerne kan lege rundt og få vist en hvilken som helst url.

Efter at jeg åbnede koden, polerede UI'en og færdig med en masse andre mindre ting, var sizzy.co live, og dette blev slutresultatet:

Jeg indpakket faktisk kl. 05:30, fordi jeg bare ikke kunne sove uden at afslutte * den * * en * * ting *

Afslutter

Jeg har ikke arbejdet på mit eget produkt i omkring et år, og jeg kan fortælle dig, at det føles så, * så * godt! Ingen tidsporere, ingen estimater, ingen styring, organisationskaos og andre ting, der dræber din produktivitet. Du skal bare sætte dig ned, du ved, hvad du skal gøre, og gør det arbejde, der skal gøres. Det er det!

Du løser dit eget problem med håb om, at du også vil løse andre menneskers problemer. Det vigtigste ved, er, at i sidste ende får du en masse fantastiske og positive feedback, som stort set er det eneste, der får dig til at udføre et bedre og mere fantastisk arbejde!

Jeg vil gerne takke alle for din feedback og støtte. Du kan følge Sizzy på Twitter, hvis du er interesseret i fremtidige opdateringer.

Du kan følge mig på Twitter for flere React- og Javascript-relaterede ting.

Hvis du eller nogen, du kender, er interesseret i et professionelt React-værksted, så tjek React Academy.

EDIT 1: Sizzy er godkendt på OpenCollective, så hvis du planlægger at bruge det, kan du overveje at støtte det gennem en lille donation. Dit navn og billede vises automatisk i tilhængersektionen på GitHub-readme. Tak!

EDIT 2: Hvis du er udvikler, og du er interesseret i, hvordan Sizzy er bygget med React, stylede komponenter og MobX, skal du tjekke den nye YouTube-kanal, hvor jeg lægger videoer af bygningsfunktioner til Sizzy og sende dem live.

EDIT 3: Sizzy Chrome Extension er live . Forhåndsvisning af ethvert websted i Sizzy er nu ét klik væk!

Adios!