save state / versioning

[thundernixon]

I was searching for this one. This would be super helpful! To add my thoughts on what this might mean:

I love the browser extension Stylus, which allows me to use custom CSS on websites I frequent.

I use it to constrain the central column and override fonts on Gmail. In the past, I have customized headers on Dropbox Paper to help me navigate long documents more quickly. Currently, I'm enjoying a pleasantly-thorough GitHub dark theme, powered by a community of people.

The great thing about Stylus is that I can actively use and navigate a website without even thinking about Stylus, but then I can edit a style if I want to, and it will be preserved as I continue to use the web.

If a designer could do this while navigating their product or website, it would make VisBug a sort of "interaction design tool" of a new and very useful kind. They could try a new typeface globally on their site, or edit the type scale, change the background, etc – and then experience how it feels to use it.

---

That may all be exactly what you had in mind. Just wanted to share how I would hope to use it!

[argyleink]

i pitched a visbug feature just like how Stylus works, really early on, and i still think it tells a great story and has a nice use case! i wanted to use "local overrides" in chrome, a way you can already persist changes and have them automatically applied to a page (no extension required!). essentially the story can be summed up as "make any webpage your own."

have you seen this tool, it's a new and nice stylus https://www.styleurl.app. i have an opinion, that i'm waiting to be replaced with something better, which is that.. while this feature idea is awesome and tells a very compelling ux story, i gotta wonder why designers arent rockin stylus, recss, or styleurl today? why why why right? seems like tons of value, but apparently not? that logic path alone has halted me really attacking the "patch some css onto this page after load" story. have thoughts on this?

and yeah, overrides are different then versioning/saving state.. but they are related in many ways. perhaps i should break this out into 2 tickets?

[thundernixon]

Ohhh awesome, thanks for recommending styleURL – it seems quite promising!

why designers aren't rockin stylus, recss, or styleurl today

I think this comes down to a few reasons:

1. Many designers are able to visually design the web in tools like Sketch, but may not be as proficient with code/CSS, and so they may not be comfortable with "hacking" the UI of websites with these extensions. Designers who are good with CSS may be using these tools in slightly bigger numbers. It would be interesting to see some data around this. This is the same overall reason that relatively few designers use GitHub, even though it's an amazing tool (though, I'm guessing GitHub's usage is growing fast).
2. The extensions are all a bit tricky to use. Beyond just requiring CSS knowledge, they each have wacky UX flaws, and are a challenge to get up and running with. Style URL may be the nicest experience I've had so far – I love that it detects my devtools edits, and allows me to download them! However, I'm so far unable to figure out how to directly add CSS edits, or use import my existing Gists (like this Gmail readability update made for Stylus) to styleURL.
3. I also wonder if some designers feel like they want to experience products as the original designers intended. I do feel a slight twinge of guilt for overriding Gmail and inserting my own choice of fonts and layout adjustments. This is probably not a very common reason, as I hope most designers have an urge to make things better. Probably, though, this urge is overridden by a desire to not waste effort editing pages that could ultimately change at any time. Not sure.

---

Holy crap, local overrides is amazing! I'm learning all sorts of new things, here. I'll have to try that out soon.

[swyxio]

hi Adam,

i am trying to make a "Save to Netlify" feature but am a bit lost about how to hack this together. i edit using visbug and the dom changes in the dev tools, but when i run document.documentElement.outerHTML or document.body.innerHTML i still see the old (original) DOM printed out. is there somewhere i can just "download" all the post edited HTML/CSS?

thanks Shawn

[argyleink]

@sw-yx interesting! that's so sneaky/fishy sounding, i love it. i haven't tried what you're doing, lemme see if I can reproduce that. that's a cool feature idea though, treating visbug modified pages as an immutable state of the page (if i'm understanding your plan correctly)

[argyleink]

works for me (from dev console). where are you running document.documentElement.outerHTML from?

[swyxio]

yes that is exactly the plan. save to an immutable deployment. its free on netlify so why not lol. part of me is also wary that youve probably got something similar cooking so i also wanted to post incase this was unnecessary work

i was running it in console. it definitely did not work, i tried quite a few different ways. im on vacation now but i’ll record a video sometime to demonstrate what i tried. anyway, if theres a button or method you wanna expose that just dumps all the html/css, then its a simple process of sending it to the Netlify drop api for saving/sharable deployment and i figure thatd be great for your users

[argyleink]

yep, an idea like this would be great, like a netlify plugin that lets you sign in and use an auth key to push builds. i'm not working on anything like this 👍

i don't know of any easy ways to get work out, but there might be helpful stuff with the extension api's? it's a tough one i think tho, dependencies need crawled and stuff? or urls need changed? i think the immutable visbug version deployment idea is a good one, but i dont have too many answers yet!

[swyxio]

well there wouldnt even need to be authentication :) netlify is set up for anonymous deploys

and we dont need dependencies either if we’re just taking a literal snapshot of the visbugged DOM...

[Rafi993]

There might a way to solve this similar was draft-js has done rich text editing. We create a model (a JS object representation) of the changes or just the current snapshot added to the DOM and store it so that it can be applied again.

[Rafi993]

Having a JS model will open up whole world of feature set like building additional plugins for this and undo redo downloading the changes and sharing them playing these changes as a timeline, collab editing..... But also will make codebase easier to manage but it may require some work.

[swyxio]

update - i'll own up that i just never got time to do this and am working on other projects now. i'll happily answer qtns for anyone interested in working on this.

[argyleink]

@Rafi993 i'd love to hear more about the strategy ya'll used, VisBug will need to eventually move to an abstraction of the nodes, where right now it works right against the DOM

i stumbled upon this tool recently and while it does similar things to Styleurl.app and others, I found it interesting that it uses your google account to stash the changes. I mean, most folks installing extensions probably are signed into Chrome. could be a clever way for VisBug to store state too, stash it onto a google account, and let it follow you that way.

https://aminoeditor.com

[argyleink]

Still thinking about this, there's so many fun ways to share the work, it's hard to pick one:

1. diff to gist
2. dump current static state to netlify
3. export diff as zip
4. export page as site
5. your idea here

Here's the values I'm thinking should help guide us on our 1st solution:

1. doesnt require auth
2. can handle text edits / DOM changes
3. best if it can support toggling the style diff (think show/hide changes with 1 button)

your thoughts!?

[Rafi993]

Ramdajs does awesome work on this https://ramdajs.com/repl/ they encode everything in url and you can share the shortened url to others. I built something similar to that too https://cp.js.org/ for my personal use.

[Rafi993]

But still need to check if there is any max length that url.

[CodyEakins]

@argyleink I like like idea of saving VisBug content changes to a gist, or as regular changes to a local git repository.

But how would you correctly save state when working with dynamic pages?

Take Youtube's homepage as an example. On their homepage, the featured videos are different for each user and they can change on each page request/refresh. Obviously, if you tried to make changes to such a page, and compare the resulting HTML using Git, you'd get a bunch of false positives on which areas of the page have actually changed...

So, it seems to me that the only way to incorporate a git diff-like feature would be to version each page request. Like, give the user an option to "lock" the base page before beginning design work with VisBug.

That way, you have a static version of the page that can be used to compare new content and code changes against.

---

Side-note: I wonder if the native "Save Page As..." (or .mhtml) features of Chrome can be extended to help save VisBug pages and their state?

[argyleink]

But how would you correctly save state when working with dynamic pages?

we could host the state of the static document when the save button is hit. the changes wont apply to the existing app's dynamic state, we'd be sharing the modified static document edited in a browser. at least, that's one way to "share or save your work." this method is specifically advantageous when showing DOM changes made, not just CSS changes.

So, it seems to me that the only way to incorporate a git diff-like feature would be to version each page request.

i've got a branch where visbug can pass around an object between instances and re-apply them in order. this could let us store changes in the url or in a gist, and then reapply them to the page using a visbug plugin or command. in this case, it's less about a diff, and more about latest computed styles being reapplied to their target nodes.

side note i think this very much could be used, but no one has prototyped it yet 😉

hard to pick a strategy, they all have tradeoffs! 🙂 thanks for spinning up conversation about it 👍

[CodyEakins]

@argyleink

I think we're on the same page then. Especially when you mention:

we'd be sharing the modified static document edited in a browser

Creating that static document, however, seems rather tricky... That's why I mentioned things like Save Page As... and .mhtml -- they're both ways to copy a web page.

They feel unreliable though... Could it be considered impossible to save pages through the plugin if the browser itself cannot do it consistently?

We're only concerned with saving a page's HTML and CSS, right? Media and scripts do not matter?

---

I'm interested in that branch you mentioned. Rather than store state exclusively with code (.html and .css), did you have some sort of "action" system in mind? Like some kind of logger(?):

VisBug added CSS rule to DOM node with ID: e9cb3fy5
VisBug added CSS rule to DOM node with ID: ah63cPw3
... // etc

What you describe makes me think of Redux's time travel feature (undo and redo features too).

---

I want to help implement this feature, I just don't know where to start...

Should I look into how to accurately save a page using Chrome? Or like make PR to add logging of VisBug actions to a file? Build something to compare VisBug static documents?

[Rafi993]

When we make changes using Visbug we can start recording changes in array of objects and when user opens up the web page again we apply those changes again to the page. For this to happen each operation that is possible using Visbug should probably be represented using action type and payload (like redux) with the payload being the location on which change was made and the change made (like text that was added).

[Rafi993]

So if user edits a text and then replaces image using visbug this local array would be

[{
  type: "EDIT_TEXT",
  location: "xyz",
  diff: "this is new text"
}, {
  type: "EDIT_IMAGE",
  location: "abc",
  diff: "imageURL"
}]

as a bonus we also get ability to undo and redo too.

[CodyEakins]

@Rafi993

I think having some sort of state store would be great while working on a site. Keep things fast and in memory.

However, when saving a file, I think the file itself is the stateful object. I think teams would rather pass around a HTML and CSS file rather than a JSON file... Well it depends, really, if you want multiple export formats?

Again, I don't think its possible to reliably recreate a document without versioning (making a copy of) the original page itself.

[Rafi993]

@Rafi993

I think having some sort of state store would be great while working on a site. Keep things fast and in memory.

However, when saving a file, I think the file itself is the stateful object. I think teams would rather pass around a HTML and CSS file rather than a JSON file... Well it depends, really, if you want multiple export formats?

Again, I don't think its possible to reliably recreate a document without versioning (making a copy of) the original page itself.

What I was essentially proposing was something similar to this https://youtu.be/feUYwoLhE_4

[Rafi993]

For storing state

[argyleink]

Here's a link to #371 which started work on a few things and is a good place to check what changed so all messages passed through a central location. by doing this we can get a visbug api to:

• publish node(s) selection
• publish node(s) is/was mutation payload
• set selection via payload
• mutate selection via payload

a few goals out of it:

• undo/redo via payloads
• allow external tools to leverage visbug mutation functionality
• allow external tools to "do something smart" with the diff/mutation
• allow a parent/child relationship to exist, where 1 central visbug could sync with others
• etc

it's pretty half baked at the moment, but does prove the concept. sounds like y'all have a good grip on the array of patterns to choose from to solve this, redux style payloads and the idea of time travel is along the lines of where the PR intend to head. what kind of questions does all this raise for you?

[swyxio]

i have left netlify but this may be a good one for @shortdiv or @tzmanics to pick up on in future if they so wish.

[CodyEakins]

@argyleink

I'm game if you want to incorporate Redux or Flux-style architecture into this project. It's definitely useful for keeping state organized, and it would make features like undo/redo possible...

---

Regarding state, however, I am more concerned about creating "savable" projects.

If I am a designer, and I start tinkering with a page, I want to be able to come back to it the next day (after closing my browser window)... It has to be stable and portable.

This is why I think I'm going to look into things like versioning pages, saving pages, and common file formats (export to .html/.css, .pdf, .doc, .json, etc.). Something I could git diff.

Hopefully I'm not alone in wanting this feature.

I consider runtime state management and resting state management (data storage) as separate issues. In fact, if it makes things easier to discuss, I can create a new issue or thread for this.

[argyleink]

Yes, cool, thanks for bringing it back to this issue topic again, was veering off a little bit there into undo/redo and friends. If you've got ideas for stashing the current page state, go nuts. @sw-yx was hoping to just grab outer html, zip and push to netlify, which could easily be a plugin and a pretty blunt force way to do it, but potentially quite effective.

the most promising idea i've heard, especially for designers, is revisiting old tech that allowed saving a webpage as a png, which i believe is similar or the same as the .mhtml stuff we talked about earlier. then the redesign can go right into a cloud folder for sharing with others (it could be pretty big though, remember big pngs?). also sounds like a potentially entirely other extension?

so yes, savable changes, in any form, would be awesome. let me know how you're most comfy attacking this feature and i'll share details about execution if i have any.

[CodyEakins]

@argyleink

That sounds good. Makes sense to me.

The .png idea is interesting. In my use case, having the source code is more beneficial, but I could see some teams liking image exports better.

And yeah, I do want to attack this one. Let me know if you're available on a chat platform (such as Discord). I'd love to bounce some ideas off you in a more rapid-fire/spit-balling manner.

[argyleink]

fun fact, the .png is so large because it holds all the source code 😏

best place to chat for me is gitter or twitter, or start a PR?

stoked you're attackin it! everything you need is sitting right there in the browser page right?! modifications are inline on that markup, excited to hash this out more with you. being able to share changes not as a screenshot would be really nice in many cases. thanks! 🙏

[CodyEakins]

Oh, really? I had no idea about that aspect of .png files.

I'll follow you on Gitter and Twitter then. Let's get after it!

[argyleink]

going to play around with this as a companion plugin https://github.com/gildas-lormeau/SingleFile