annezazu 8:00 pm on February 21, 2023
Tags: ,   

Hallway Hangout: Let’s chat about using Replay.io in the FSE Outreach Program

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in!

Attendance:

@annezazu @paaljoachim @bassgang @dealbuquerque Jason from Replay.io and Dig (no further info).

Video Recording:

Notes:

For broader context, this is a hallway hangout building off of the initial effort to gather volunteers to help test Replay.io in the FSE Outreach Program as a way to consider possible ways of including the tool more broadly in the project. Replay has a big OSS commitment, including free support, which allows the FSE Outreach Program to explore using it ahead of potential broader use.

Quick introductions

We started with some quick introductions to get a sense of who was on the call, how we’re connected to the WordPress project, and what drew folks to help with testing replay.io:

  • Oliver: Sponsored by replay, been in WordPress community since 2017, used to work for Google where he worked on their first WordPress pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party (site kit).
  • Paul: from Germany, self employed web developer, passion for automation and previously led a QA team.
  • Jason: used to be the tech lead for firefox devtools, worked on etsy with a big focus on their PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. https://www.php.net/manual/en/preface.php. work, big fan of WordPress and PHP. 
  • Paal: from Norway, helps a ton with testing and design, used to be a teacher and enjoys being a regular user, looking for sponsorship.
  • Anne: sponsored by Automattic for CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. & Test teams, runs the FSE Outreach Program.

What is replay.io?

Replay,io is a “time travel debugger”. It’s just like a video where you can pause, fast forward, rewind but the entire browser session is recorded. Replay is free for open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. communities so we’re trying to see if it’ll make a difference in how the community reports bugs and maintainers solve them. Oliver and Jason shared some additional details including a case study from Pantheon.

Examples

We briefly went through some examples with TechCrunch as an initial overview followed by an example from @paaljoachim.

Feedback on Replay.io

At a high level, there have been various notes around the Site Editor loading slowly in the Replay browser from folks using the tool. Since the Replay browser isn’t something to aim to get widespread compatibility with, the Replay team is going to dig in to see what might be causing the problem and how we can resolve that in order for a better experience in testing. This will be a huge help since the Site Editor is an obvious thing we want to be testing regularly. @franz00 kindly provided some examples of this (replay recording 1, replay recording 2) while trying to replicate a current issue.

From there, @paaljoachim gave some UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. feedback around using replay and setting up bookmarks. After the call, he recorded the following video and passed along the following notes:

  • Adding a preview button/icon. To view the video before deciding to save or discard.
  • Adding all the icons for Viewer and DevTools at the same time in the left sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.. Using a separator between these. Reasoning is that the left sidebar icons are easier to notice compared to clicking the Viewer and DevTools buttons top right.
  • Editing/cutting in the video timeline. 

Oliver and Jason shared a link to Replay’s discord and GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repo for folks to continue to share feedback.

Test automation

We briefly covered test automation where you can write your playwright tests and debug with Replay. There’s an effort in the WordPress project to switch to Playwright so it would be neat to explore more once the Replay Playwright integration is in a better spot.

Next steps

  • Replay to look into slow performing replays.
  • Replay to reproduce the GitHub issue we discussed on the call.

#fse-hallway-hangout, #fse-outreach-program