Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix random frontend reloads #227

Closed
juliaogris opened this issue Dec 13, 2023 · 1 comment
Closed

Fix random frontend reloads #227

juliaogris opened this issue Dec 13, 2023 · 1 comment
Labels
🐜 bug
Milestone
🚸 Learn v0.2.0

Comments

@juliaogris
Copy link
Member

juliaogris commented Dec 13, 2023 •
edited
Loading

Fix random frontend reloads so that code does not get lost after a longer in browser session.

Copying @camh- notes from discord:

I've been thinking a little about the issue of a page reloading and losing your program. This is a poor user experience whether or not the reload is due to some buggy extension, and accidental button press or even deliberate in order to unstick something that looks stuck. So my desire for understanding why the page reloaded in the first place is not particularly useful or relevant.

I read up a little on session and local storage in the browser (my current source of info is this page: https://www.freecodecamp.org/news/web-storage-localstorage-vs-sessionstorage-in-javascript/) and it seems like session storage is what we want to use. Using the url hash is just a dodgy session storage it seems to me. The purpose of the hash was to share an evy program without us needing to set up a backend for it. It was always a little hacky and we expected i
t to be temporary so I think it best we dont use it for reload protection.

Since session storage survives a page reload and is per-origin per-instance, each concurrent tab will have its own state which is what we want. It is only cleared when the tab/window/browser is closed.

I also think we should do more to use the hash less. I think once a page is loaded from hash content, we should clear the hash and rely on session storage after that. You should only get a hash from the sharing dialog. Once cut and then pasted into a new window, after load the hash is cleared. This may even be necessary, perhaps, maybe, if the hash part of the URL is considered part of the origin. Regardless I think we should not even worry - just clear the hash and save to session storage.
@juliaogris juliaogris transferred this issue from evylang/todo Dec 13, 2023
@juliaogris juliaogris changed the title Add session storage for reload bug Fix random frontend reloads Dec 13, 2023
@juliaogris juliaogris added this to the 🚸 Learn v0.2.0 milestone Dec 13, 2023
juliaogris added a commit that referenced this issue Dec 30, 2023
@juliaogris
frontend: Save editor contents to session
1d04bfd 
Save editor contents to session storage so that accidental browser reloads to
not lose the contents. We attempt to reload the session if the URL fragment
is empty and the editor saves its content to session on every single
session.

Issue: #227
@juliaogris juliaogris mentioned this issue Dec 30, 2023
Closed
juliaogris added a commit that referenced this issue Dec 30, 2023
@juliaogris
frontend: Save editor contents to session
15fb075 
Save editor contents to session storage so that accidental browser reloads to
not lose the contents. We attempt to reload the session if the URL fragment
is empty and the editor saves its content to session on every single
session.

Issue: #227
juliaogris added a commit that referenced this issue Dec 30, 2023
@juliaogris
frontend: Save editor contents to session
56f293a 
Save editor contents to session storage so that accidental browser reloads to
not lose the contents. We attempt to reload the session if the URL fragment
is empty and the editor saves its content to session on every single
session.

Issue: #227
juliaogris added a commit that referenced this issue Dec 30, 2023
@juliaogris
frontend: Save editor contents to session
92b57dc 
Save editor contents to session storage so that accidental browser reloads to
not lose the contents. We attempt to reload the session if the URL fragment
is empty and the editor saves its content to session on every single
session.

Issue: #227
juliaogris added a commit that referenced this issue Jan 1, 2024
@juliaogris
frontend: Save editor contents to session
e8c379e 
Save editor contents to session storage so that accidental browser reloads to
not lose the contents. We attempt to reload the session if the URL fragment
is empty and the editor saves its content to session on every single
session.

Issue: #227
juliaogris added a commit that referenced this issue Jan 1, 2024
@juliaogris
frontend: Save editor contents to session
bbfd7f3 
Save editor contents to session storage so that accidental browser reloads to
not lose the contents. We attempt to reload the session if the URL fragment
is empty and the editor saves its content to session on every single
session.

Issue: #227
juliaogris added a commit that referenced this issue Jan 1, 2024
@juliaogris
frontend: Save editor contents to session
7002355 
Save editor contents to session storage so that accidental browser reloads to
not lose the contents. We attempt to reload the session if the URL fragment
is empty and the editor saves its content to session on every single
session.

Issue: #227
juliaogris added a commit that referenced this issue Jan 1, 2024
@juliaogris
frontend: Save editor contents to session
c06d693 
Save editor contents to session storage so that accidental browser reloads to
not lose the contents. We attempt to reload the session if the URL fragment
is empty and the editor saves its content to session on every single
session.

Issue: #227
juliaogris added a commit that referenced this issue Jan 1, 2024
@juliaogris
frontend: Save editor contents to session
f874921 
Save editor contents to session storage so that accidental browser reloads to
not lose the contents. We attempt to reload the session if the URL fragment
is empty and the editor saves its content to session on every single
session.

Issue: #227
juliaogris added a commit that referenced this issue Jan 2, 2024
@juliaogris
frontend: Save editor contents to session
c1275c1 
Save editor contents to session storage so that accidental browser reloads to
not lose the contents. We attempt to reload the session if the URL fragment
is empty and the editor saves its content to session on every single
session.

Remove flicker on slow networks by rearranging editor initialization and
initial source code loading: Now the editor only gets initialized when the
source code is ready which reduces its empty state.

Remove scrollbar flicker in Evy editor on Firefox. In Firefox for
`overflow:auto` with overflowing content the scrollbar is briefly showed on
load then hidden. Unfortunately we update the contents of the editor twice
when found in session storage - once as part of index.html without syntax
highlighting, once with syntax highlighting when the editor and evy.wasm are
loaded and parsed (a good while later on slow networks without caching). To
remove the flicker we add a `.noscrollbar` class during the loading phase
that gets removed when the editor is ready.

Issue: #227

frontend: Remove flicker on slow networks

frontend: Remove scrollbar flicker on Firefox

Remove scrollbar flicker in Evy editor on Firefox. This is in response to PR
feedback. I'm not sure if I could fully reproduce the issue, because in my
case I see two scrollbars flickering briefly. One of them is for the line
<pre> which should not have been there in the first place (I believe 😅). The
second one seems to be default Firefox behavior: for overflow:auto if there
is overflow the scrollbar is briefly showed then hidden. Unfortunately we
update the contents so it is showed twice which is not nice. As a workaround
we add a .noscrollbar class during the loading process that gets removed when
the editor is ready. This removes the first flicker for me on Firefox.
Hopefully this also works on Linux.
juliaogris added a commit that referenced this issue Jan 2, 2024
@juliaogris
frontend: Save editor contents to session
7210831 
Save editor contents to session storage so that accidental browser reloads to
not lose the contents. We attempt to reload the session if the URL fragment
is empty and the editor saves its content to session on every single
session.

Remove flicker on slow networks by rearranging editor initialization and
initial source code loading: Now the editor only gets initialized when the
source code is ready which reduces its empty state.

Remove scrollbar flicker in Evy editor on Firefox. In Firefox for
`overflow:auto` with overflowing content the scrollbar is briefly showed on
load then hidden. Unfortunately we update the contents of the editor twice
when found in session storage - once as part of index.html without syntax
highlighting, once with syntax highlighting when the editor and evy.wasm are
loaded and parsed (a good while later on slow networks without caching). To
remove the flicker we add a `.noscrollbar` class during the loading phase
that gets removed when the editor is ready.

Issue: #227
juliaogris added a commit that referenced this issue Jan 2, 2024
@juliaogris
🛟 frontend: Save editor contents to session storage (#230)
916bb2f 
Save editor contents to session storage so that accidental browser reloads
to not lose the contents. We attempt to reload the session if the URL
fragment is empty and the editor saves its content to session on every
single session.

In preparatory commits fix up comments and remove unused parameters. Also
refactor onHashChange function for clarity and readability and remove URL
fragment as soon as contents get edited.

Issue: #227

This merges the following commits:
* editor: Fix typo and white space
* frontend: Fix SVG attribute bug
* editor: Remove unused options and parameter types
* frontend: Check en_US spelling
* frontend: Refactor handleHashChange
* frontend: Clear URL fragment on update
* frontend: Save editor contents to session

     frontend/index.css             |   7 +-
     frontend/index.html            |  14 +++-
     frontend/index.js              | 131 +++++++++++++++++++++------------
     frontend/module/yace-editor.js |  17 +++--
     4 files changed, 111 insertions(+), 58 deletions(-)

Pull-Request: #230
@juliaogris
Copy link
Member Author

PR #230 fixed this issue. It got merged even though github claims it got closed, see 916bb2f .

@juliaogris juliaogris mentioned this issue Jan 2, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐜 bug
Projects
evy
Status: Done
Milestone
🚸 Learn v0.2.0
Development

Successfully merging a pull request may close this issue.

frontend: Save editor contents to session storage evylang/evy
1 participant
@juliaogris