Responsive mode

Responsive Mode

Test out your website in various device dimensions on FeaturePeek by using our new Responsive Mode feature. You can select between common phone and tablet sizes, and toggle between portrait and landscape mode.

When you send someone a FeaturePeek link, the device dimensions will be saved in the URL, so your reviewer will look at the page at the same size and orientation that you had set.

Of course, nothing beats testing on a real device. That's why we also added a QR Code popover, so you can quickly open whichever page you're looking at on your personal device just by scanning a QR code.

QR Code

Crop and annotate screenshots

A picture's worth a thousand words — how many is an annotated picture worth?

Now when you take screenshots on FeaturePeek, you'll get the opportunity to edit and mark up your screenshot before you compose your comment.

annotate.png

You can do this just by clicking a few buttons in our UI. Much easier than juggling image editing programs!

Clubhouse integration

Attention Clubhouse users! With our new Clubhouse integration, you can easily save stories to your Clubhouse projects, epics, and iterations directly from a FeaturePeek deloyment.

clubhouse4.png

You can add screenshot and screen recording attachments, assign story owners, and your browser metadata will be sent along automatically too. It's a great way to encourage everyone on your team to follow the same bug report template when creating new stories.

Head over to your integrations page to securely authenticate with Clubhouse.

Redesigned drawer

We're proud to release a completely redesigned FeaturePeek drawer! The unified drawer brings new functionality and improved UX.

drawer5.gif

Comments, page views, issues, and more are all presented together in a timeline view, giving you a clearer overview of the progress of your branch's changes. You can file tickets to your connected integrations here too.

Click the FeaturePeek button in the bottom left-hand corner of your deployment previews to open up the new drawer.

Trello integration

With our new Trello integration, you can create and save cards to your Trello boards directly from FeaturePeek.

trello.gif

You can add screenshot and screen recording attachments, and your browser metadata will be sent along automatically too. It's a great way to have everyone on your team follow the same bug report template when filing new cards.

Head over to your integrations page to securely authenticate with Trello.

Persistent logins across environments

If your front-end app uses any authentication mechanism like Auth0, you might have noticed that you get logged out when jumping from one FeaturePeek environment to another. That's no longer the case!

Your app's sessions will now persist across FeaturePeek environments.

Previously, every environment spawned as a host with a uniquely random origin. Now, every project lives on a consistent subdomain, so your cookies and local storage values are shared between them automatically. The intended environment gets routed to automagically – for example, loading a relative asset (like /cat.jpg) will still work as expected, even if the contents of the file differ across pull requests. Keep an eye out for an upcoming article on our new blog that will dive into further technical details about how we did this.

No action is required by you to enable this functionality. If you encounter any unexpected behavior, please drop us a note at support@featurepeek.com.

Streaming status

FeaturePeek now exposes more information about the status of your environments while they spin up and tear down. As they start up, you'll see a progress bar detailing the current step of the boot process in real-time. When it's ready, the screen will lift upwards, revealing your front-end's latest changes.

curtain.gif

This enables you to share FeaturePeek links before your environments have fully spun up. You don't have to wait for your CI to finish before asking for feedback from your reviewers. In the case of a boot error, you'll have more insight into what step went wrong and how you can fix it.

The progress bars also overlay the thumbnails of each card on your team's dashboard page. When an environment is ready to be viewed, a screenshot of your app replaces the progress bar.

Screen Shot 2019-11-22 at 12.00.27 PM.png

These statuses are sent to GitHub too, so you can view the current status right on your pull request. Clicking on the Details link will go straight to the FeaturePeek environment.

Screen Shot 2019-11-22 at 11.51.28 AM.png

📐 Measure distance between elements

Try holding down the ⌥ Option key (Alt key on Windows) within a FeaturePeek environment – you'll notice that a bounding box appears around any DOM element you hover your mouse cursor over.

measure-2.gif

By Option-clicking an element, you can compare its distance to the elements that surround it, just like in Figma.

Try it out on your own environments, or any available within our demo!

Create new issues

Sometimes you'll find a bug unrelated to the pull request that you're reviewing. Instead of leaving a comment inline on the PR, you can now create a new issue on the repo itself – directly from the running FeaturePeek environment.

Screen Shot 2019-10-18 at 10.34.01 AM.png

You can assign members of your org, apply labels, and attach screenshots and screen recordings to your issue.

If you have created an issue template for your repository, it'll appear as the initial value of the issue description.

As always, browser metadata is included by default, so key information like the reviewer's browser version and page URL get included in the issue description automatically to help you triage issues faster.

🎬 Record your screen, post as a gif in PR

Sometimes a screenshot alone just doesn't cut it. It's so much easier to communicate the minutiae of animations, CSS transitions, and UX flows by having a video recording in addition to your feedback.

Recording your screen is now just a click away. Click the new Record Screen button located in the bottom left-hand corner of any running environment. Once you give your browser permission to record your tab, window, or screen, the recording will begin.

recording.gif

When you stop the recording, you'll be presented with a preview of what the video looks like, and a text area to write a supplemental comment. When you submit the form, a comment with your newly created animated gif will be posted in the pull request. Just like with taking screenshots, your browser metadata will be included automatically.

Browser support

Screen recording is supported in the latest desktop versions of Chrome and Firefox, and in Safari if you enable some experimental settings.

To enable support in Safari:

  • Go to the Advanced tab in Safari Preferences.
  • Make sure "Show Develop menu in menu bar" is ticked.
  • In the Develop > Experimental Features submenu, enable both MediaRecorder and ScreenCapture.