GitLab Create Editor Group, 6 Jul 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Exploring issues with "Live Preview" feature

Description

In this session we explore the critical usability issues with the "Live Preview" feature and discuss feasible improvements.

A

All right so david and I are going to take a look at our live preview feature um and see how well behaved it is so I created this project or I updated it yesterday to match the code sandbox template when you start a react project, they have an initial template that works nicely out of the box and everything code. Sandbox is what powers our live preview feature in the web id.

A

I had to make a few changes to the project, because when I tried to run it, it wasn't picking up on jsx files correctly. um It wasn't transpiling those so already from the code. Sandbox template that, uh let me just open up code sandbox uh and let's see, if we can, uh how do we start a thing start coding for free? Oh man, I didn't know you could code for free david.

A

I cannot so here we go so this is code stamp box, it's lovely yeah.

B

So I can edit.

A

I can start editing things: here's an edit.

A

uh This is all nice. I'm using. These are jsx files, because you see we're doing the um that jsx syntax here, and so, when I cloned this into git lab and open the web id, this didn't work. The jsx files didn't work and I had to tweak them already so after tweaking them uh hoping that this will work, let's see if it works.

A

So I'm going to open up the network here and just we'll see if there's any issues going on. So I open up the live preview and it's loading things.

A

All right, sometimes sometimes it just sits here and we'll see, we'll give it five seconds.

A

It shouldn't take five seconds.

B

A

Gonna close, it.

B

What is that? What's that first error? I don't know if you scroll back open your console, what happened there? What was that? First, there?

B

A

Yeah, so this so the way this works is this frame has to be on a different domain, because we don't want the iframe to be accessing uh cookies and special information from here, so the iframe assets are hosted in this static site.

A

um For some reason, I guess it's trying to register service worker.

B

Settings or private.

A

Browsing mode, I'm not in a private browsing mode, okay, but this just isn't starting. Oh now it started all right all right there we go so.

B

Okay, announcements: all right.

A

That's great uh so yeah now once it started, it's uh it's pretty good. uh I work.

A

B

This is right, that's.

A

Great all right, and so that's a nice when this actually loads- that's great yep, but um there's many a times when it just doesn't load and that's one of the most frustrating things about it.

A

I think there's also you can create, um so let's also try something else out. So if I go while this is loading, um let me go to create uh from a template, I'll, create a new project, and I'm going to create a plain html project will use this as a template.

A

Oh, no, I'm not in my gdk.

B

A

Html all right: let's do it public visibility. This is still loading.

B

Yeah, I think it's safe to say that one's not gonna load. This time I mean, maybe if you refreshed it enough, that's not flashes something anyway,.

A

Yeah, if you open this on chrome, you get the nice little window. That says transpiling modules, but it's still just stuck right.

A

So sometimes it decides to work. Sometimes it doesn't. Okay, it doesn't that's really frustrating uh okay, so we ordered our html thing, and so, if I'm familiar with the live preview feature, I may feel like. Oh, I can just get started, but this tab actually isn't show up. Yeah.

B

Because we need to create.

A

A package json needs to exist, yeah, and so I create the package.json and it needs to have a um name going to public. I'm pretty sure we just have an index yep that html okay.

A

Okay, so I had to commit, because now I need to refresh it for it to pick up that we can do this. Let's see.

B

A

A

Maybe maybe it wants us to have a name for a package json.

A

So it's sandbox example.html version.

A

Okay, so maybe he wants it to be a little bit more valid. Let me go ahead and commit this, because I'll need to redo it or whatever, uh let's check on over here, oh there, we go all right that one's ready, all right.

B

That react one works. Does the html won't work.

A

Okay cool, so it does need this name and version. I guess, uh and so now this is working and that's that's nice. um Let's see, if uh can I get.

A

Do these work, let's see, uh let's find out, so that should change everything to red.

A

And let me re, let's redo it.

A

Yeah, so one of the critical issues with this is it can't respect um relative paths, because this is written to an iframe hosted on a separate source. So it's trying to find stuff on a separate source and it's not actually reading things through the file resolver. When you're doing this html way.

B

A

um So those are the main ways I see the live preview being used. You have the static html version, uh and then you have where you're actually doing like a react. App packet json has to be very specific um uh when I say specific, it's looking for these specific keywords which you may not actually want in your package, json to say that this is the main, because sometimes this is actually the source and the main is going to be the compiled file which we won't actually have in a real project so like.

A

If I was doing tsx, I would say my source is going to be source index.tsx. My main would be lib index js or something like that. um But it is you know when this thing does work. It is cool to kind of play around with uh and get the instant feedback, but already from react like I had to add, um I had to add some lines to make it behave.

A

uh So you see here it doesn't need to import react from react.

B

So that's I mean straight away from a usability perspective. If it was me, I would just click into code sandbox. If I wanted that feedback, because I don't have this extra overhead- and this has now caused me to leave gitlab.com you.

A

Bring up a fantastic example, and so here's an interesting idea we have this opening. I was.

B

Literally, just thinking that why don't we replace that button with we.

A

At how it works, look at how it works. ah You bring up such a good idea. Why don't we just that's.

B

What most people.

A

B

Probably doing, let's just replace that button with a link out to code sandbox and just respect that as opposed to bundling all of this extra overhead, because the first thing I would do if I wrote that that background read and it didn't change, I'd click on the open and sandbox to see what's going on and then, as soon as I saw the tool working in the way it's supposed to work. Why would why would you navigate back into this view? You just.

A

B

A

Yeah that with prob, because of how difficult this can be to test and we've noticed some ways, this can be exploited in bad ways. Yeah, it's very interesting. um I suggest it is.

B

It's a link. We just create a link that links out to us.

A

I think it'd be cool to make it a tab. That has this kind of view and it has a button that says open and code sandbox and then that's that's just what we do.

B

What do you think that's a very easy change for us to make. I think that's perfectly fine. I think let's ask.

B

The ux experience in both kit and it'll help us reduce our vulnerability surface.

A

Yeah yeah, I I think so that's a that's cool idiom, um so this is like this is working already way more favorable than it was working for me yesterday, but you've already seen like it's it's hard to tell if it's working and I can attest to there's. Sometimes it's just does not load, and it is not a favorable experience. So well, thanks thanks for watching us bash gitlab.com's live preview.