Introducing Sizzy —A tool for developing responsive websites crazy-fast
So, here’s how Sizzy happened.
You know the drill. You’re developing an app for a client and you need to make every page and every component work in every variation, on every device.
I was already using react-storybook to switch between all the variations of a component, but I still had to switch between 12 devices just to see the changes in all of them. And that’s how it all started.
How about making a tool where you can preview multiple screens at once as you work? That would be neat, huh!
How it all began
The initial tweet about the idea got 200+ likes and 60+ retweets so people were definitely interested in this kind of tool.
Initially, I made it work only with react-storybook. I had some problems with css-in-js libraries when developing locally, but I found a quick workaround.
After the integration storybook, the initial prototype was finished. The next thing I needed to tackle was zooming in and out on all the screens.
Users would probably want to preview their changes of bigger screens like iPads or small laptops, and you cannot fit those in without zooming out.
After a little bit of tinkering with the width and height of the parent iframe and transform:scale(zoom*0.01) on the content, I finally got it right.
At that point I started thinking that the tool can actually be published as a standalone web app, and the storybook plugin can just be an addition. So I shifted my goal and starting working towards that.
I added few themes, polished up the UI a bit, struggled for 30 mins to come up with a name and ……. *drumroll* Sizzy it is. I setup a temporary GitHub repo for people who were interested to watch so they can know when the code is released.
I’m proud that I made Addy Osmani and Jason Miller star an empty repo 😈
I had a lot of features that I wanted to include, but I just had to finish the important ones and ship the first version by the end of the night. I added filtering by OS and device type and moved on.
I added an url bar on the top so users can play around and preview any url.
After I open sourced the code, polished up the UI, and finished bunch of other smaller things, sizzy.co was live and this was the end result:
I actually wrapped up work at 5:30 AM because I just couldn’t go to sleep without finishing *that* *one* *thing* 😅
Wrapping up
I haven’t worked on my own product for around a year, and I can tell you that it feels so, *so* good! No time trackers, no estimates, no management, organization chaos, and other stuff that kills your productivity. You just sit down, you know what you need to do, and do the work that needs to be done. That’s it!
You’re solving your own problem with the hope that you’re also gonna solve other people’s problems. The most important thing about is that in the end, you get a lot of amazing and positive feedback, which is basically the only thing that drives you to do better and more awesome work! 🎉
I want to thank everyone for your feedback and support. You can follow Sizzy on Twitter if you’re interested in future updates.
You can follow me on Twitter for more React and Javascript related stuff.
If you, or someone you know is interested in a professional React workshop, check out React Academy.
📝 EDIT 1: Sizzy has been approved on OpenCollective, so if you’re planning to use it you can consider supporting it through a small donation. Your name and image will automatically appear in the supporters section on the GitHub readme. Thanks! 👊
📝 EDIT 2: If you’re developer and you’re interested in how Sizzy is built with React, styled-components and MobX, checkout the new YouTube channel where I’m posting videos of building features for Sizzy and shipping them live.
📝 EDIT 3: The Sizzy Chrome Extension is live 🎉. Previewing any website in Sizzy is now one click away! ☝
Adios! 👋
