Sizzy 0.5 ๐ŸŽ‰

๐Ÿงช Alpha & Beta update channels

Now you can live on the edge and get Sizzy updates more often. If you go to Settings -> About you can switch the update channel to Alpha or Beta.

We're aiming to release alpha versions more often, and a few beta versions before the official release. The update will be automatic so you don't have to manually download or install anything.

Note: you can always switch back to a more stable channel and the update will be automatic.

image

๐Ÿ–ฅ๏ธ Add UI elements for desktop Chrome and Safari on macOS

We're making progress towards adding UI for all the devices in Sizzy. In this update we added:

  • macOS dock
  • macOS status bar

Safari browser

img

Chrome browser

img

Again, this is not only a cosmetic change. This will affect the height of each viewport, so you get a more accurate representation of what you would see on a real device.

๐Ÿ“ฒ Add DPR setting for each device

Now you can specify the Pixel Ratio for each device. We already added the correct DPR for the default devices, and you can update the custom ones that you have added manually.

Now the srcset attribute should work properly for images, yay! ๐Ÿ‘๏ธ

โœ… Detect if your app is running in Sizzy

If you want to detect if your app is running in Sizzy, you can do that by checking if the window.__sizzy object exists. It might be useful to do this check if you want to disable animations, switch a theme, do some A/B testing etc.

Sizzy adds extra info about each device to the window.__sizzy object. Here's how a sample object would look:

 {
      totalDevicesCount:8,
      device: {
            index: 3,
            name: "iPhone 7",
            id: "iphone-7"
        }
    }

This information is useful because you can use it to activate different features, themes, etc. based on the device name or the device index.

Example

Let's say that our app has 2 themes, dark and light, and we want to test both of them in Sizzy. So we want every device to have a different theme instead of switching between the two themes.

We can write this code:

    const sizzy = window.__sizzy;
    const darkTheme = sizzy.device.index % 2 === 0;

So then in our code we can easily set the theme to dark for every second device.

img

A/B testing

You can also use this information to enable/disable a feature on some of the devices. This is pretty useful for A/B testing.

Demo

We published an example here.

Try opening this url in Sizzy.


๐Ÿ›  Other improvements

  • Add Galaxy S7, S8, S8+ devices
  • Sizzy will remember the size and position when it's closed, and when it's open again it will launch with the same size and position
  • Add "Hide Application" in the menu (macOS)
  • Bug fixes and stability improvements

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy ๐Ÿ™Œ