
Sizzy:Sizzy: A tool for developing responsive websites crazy-fast - tomcam
https://github.com/kitze/sizzy
======
overshard
This is pretty cool for a basic preview but it really doesn't solve the bigger
issue of devices handling basic CSS inconsistently in many situations.

Example is sizing things using "vh" and "vw". On iOS this has been, and still
is, completely broken. It is "supported" but if you try to size something at
"100vh" it will scale multiple views without additional CSS on breakpoints or
some JavaScript hacks.

For me this is just a glorified "Responsive Design Mode" which is already
built into Chrome and Firefox dev tools.

~~~
shakna
iOS feels like the new IE when it comes to this stuff.

For example:

> iOS 7 Safari recalculates widths set in vh as vw, and heights set in vw as
> vh, when orientation changes.

If you really want iOS customers to feel at home, a lot of the time you have
no option but to specifically target all their screen sizes with media
queries.

~~~
alwillis
1\. Safari is not the new IE by a long shot:
[https://webkit.org/status/](https://webkit.org/status/)

2\. iOS 7 was released September of 2013; that's ancient history in the iOS
ecosystem

3\. the installed base of iOS 10 is a smidge under 80%; iOS 7 is likely around
1%: [https://developer.apple.com/support/app-
store/](https://developer.apple.com/support/app-store/)

~~~
shakna
> 1\. Safari is not the new IE by a long shot:
> [https://webkit.org/status/](https://webkit.org/status/)

Yes, they've made great strides with JavaScript future support... But they
still have some major issues! [0]

Let me just draw out a few from that list that are supported by Chrome, not
Safari on iOS 10.3, that really should have support:

* No public key pinning

* No paged media queries

* No ChaCha20 for TLS

* No FLAC, no Ogg Vorbis support

* No png favicons, because Apple is special and needs their own format that doesn't comply with anybody else

* No download attribute.

* No resize attribute for CSS.

[0]
[http://caniuse.com/#compare=ios_saf+10.3,and_chr+57](http://caniuse.com/#compare=ios_saf+10.3,and_chr+57)

------
cocktailpeanuts
Unless I'm missing something major, the title is false advertisement. I was
expecting some sort of next.js/netlify/etc. kind of service (or framework)

But this looks like just a way to try viewing web pages on small screens.

------
anotheryou
"A tool for previewing for responsive websites", nothing more, right?

~~~
fimdomeio
I guess so. I would say in any case that it might come handy

~~~
anotheryou
With so many devices I just check iPhones and 1366x768, the rest I don't
tailor, just make sure my CSS handles all sizes well (by dragging arround the
viewport in the chrome dev tolls device preview thingy)

------
aphextron
Slightly unrelated; can some explain "Yarn" to me? What's wrong with NPM? Is
this legitimate?

~~~
kt9
Here's a post that an engineer on my team wrote about why we switched from NPM
to Yarn

[http://www.blog.distelli.com/single-post/2016/12/14/Why-
we-s...](http://www.blog.distelli.com/single-post/2016/12/14/Why-we-switched-
from-NPM-to-Yarn)

------
borski
I wish this didn't use iframes, since so many applications set the X-Frame-
Options header. That said, if I were using this against my own sites, I
suppose I could just not serve that header.

~~~
robalfonso
Exactly - loaded it up with my site - all blank, thought about it for a second
realized we disable Frame loading. That's becoming so common now, any tool
using frames is really at a disadvantage.

~~~
Geee
Why do you disable loading in frames? Security?

~~~
makaio
Disabling embedding in frames is the default on Rails now, so that feature
would have to be specifically disabled to use with this tool.

------
brak1
whats the difference between this and using Chrome's built in responsive
tools? ([https://developers.google.com/web/tools/chrome-
devtools/devi...](https://developers.google.com/web/tools/chrome-
devtools/device-mode/emulate-mobile-viewports))

~~~
RodericDay
I use Firefox, which also has a responsive mode, but unless I'm missing
something, the built-in tools don't load multiple copies of the website in
different sizes side-by-side.

I have my own version of this tool (trivial javascript + iframes), and I use
it frequently for one-glance CSS changes.

------
tomcam
The idiot poster had a problem with mobile--sorry for the weird title :O

------
starik36
Wow, excellent. Useful right off the bat!

