Auto-save behavior unclear

[blaine]

How the heck doesn't editor.p5js have auto-save? I realise I should have been saving, but I just lost an entire project because the editor froze and when it recovered all my work was gone. 👎

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[catarak]

Thanks for reporting @blaine! I'm sorry that happened and that's really frustrating. The p5.js editor does have autosave, but you have to have a sketch at least once for it to turn on. The idea is that it prevents you from having lots of dummy sketches in your account that autosaved, that you didn't want. It seems like it's unclear that this is the behavior, and therefore I think the editor could do a better job of letting you know that you have unsaved changes. Open to suggestions for how to fix this!

[Swapnil-2001]

The editor does let the user know that they have unsaved changes with the help of the little circle beside the name of the sketch, but just in case the user doesn't notice it, maybe there could be an info popup right at the beginning? Saying something along the lines of "This means you have unsaved changes.." ? Just an idea, sorry if it sounds too basic. :)

[catarak]

@Swapnil-2001 this is a helpful suggestion, thank you! I think that the popup should only appear if autosave hasn't kicked in yet, like a user has just opened a sketch and has been editing it for some threshold of time (one minute? I'm not sure what this threshold should be).

[Swapnil-2001]

Yes, I suppose one minute sounds fair enough, it would be best not to delay the popup much more. And yes, it should appear only if autosave hasn't already been triggered.

[blaine]

Hi! Sorry, I was a little frustrated last night when reporting that - I did end up going back and re-implementing my code, and after signing in the autosave worked pretty well. Thanks for replying in a thoughtful and compassionate way!

The approach I've used to build autosave (I've worked on a few web-based text editors) is just to use window.localStorage as a light-weight way to save the most recent changes. In this case, I only intended to play around with the p5 editor for a quick sketch, but ended up building something a bit bigger pretty quickly. Having the code saved and recoverable in my browser would have been totally fine - I wasn't worried at that point about having it persisted to a server at all.

From my experience with localStorage, it's fast enough and easy enough to implement that it's possible to save on every keystroke if you want, and that it's local to the browser means that no sign-up is necessary.

[SundeepChand]

Hello @blaine! Thank you so much for your suggestions. Hi @catarak! It makes sense to have this feature where we can save the project data in the localStorage till the user is not logged in. Once the user logs in we can save the contents of the localStorage in the MongoDB & then clear the localStorage. In case the user doesn't log in but tries to create a new project, then we can ask them for their confirmation. If the user proceeds with project creation, then we reset the contents of the localStorage.

Would love to know your thoughts about this @blaine, @catarak, @Swapnil-2001.

[catarak]

Thanks for your thoughtful responses @blaine and @SundeepChand! I definitely see the benefit of using localStorage. If you have specific ideas about the flow of data from CodeMirror => Redux => localStorage => API/Mongo and how this affects the UI/UX, let me know! Otherwise I think it makes sense to take some time and map out how this would all work. Other folks have reporting some saving issues recently so I'd like to make this a high priority task!

[JohnyDL]

I get that you don't want people to have a million and one saves of dummy sketches in the database, perhaps have an autosave that's just the last 3 sketches in a rolling fashion (like some game autosaves) -> Autosave 1, Autosave 2 Autosave 3, Autosave 1... etc

Yes sometimes I make dummy sketches to do a singular job and don't need to save them, so I totally understand not wanting masses of storage for lots of disposable sketches (though I often don't log in for those I can't say the same is true for all users)

Then today I specifically signed in because I didn't want to lose what I was working on and assumed logging in would turn on the autosave feature. The first time I ran it without a js bug/crash I was inspecting a dom element (something that vanished when I stopped the sketch) so I had to leave the sketch running while I tried to diagnose what element had content 'undefined', it seems like there was a bug in running the code continuously though because chrome crashed.... I don't know if it was a complete crash or just a GUI crash cause all my chrome windows turned black and I had to kill it with task manager but what the specific crash was doesn't really matter.... the end result was I lost several hours of work and bug fixing since my last complete copy/paste of the code, and the associated data.json I'd been gradually building in that same sketch had no backup and will have to be rebuilt from nothing.

If there were just the last 3 sketches it'd allow for recovery of these sorts of issues and then the "oh yeah I want to save this for real" when items are recovered this way and people want to continue working on them

It might be annoying for some people but "you might want to save this sketch before you run it" especially if the sketch has been open for hours might also be a good idea.

I don't understand why this is an ongoing issue after 2.5 years.