Pinging: Endercoil uniuniverse Waltz Yuzuriha lonelymutt @House-of-Hemingway dogstarlite Highlanderro KizunaYui purrdri CCynical Fainthed
Comment here or on the pinned thread in this forum to be added or removed!
New beta update after 3000 years 🎊
Link: https://thbeta.circlejourney.net/build_20230819/
Major change: Preview window now refreshes when user stops typing.
- Right now, I'm on a mission to tighten up the code editor's memory usage and lighten its load on browsers.
- Up till this point, the code editor checked for code updates every second and, correspondingly, could visually update every second as well.
- In this beta version, the editor waits for the user to stop typing for half a second, and only updates the preview then. This is meant to reduce the crashing, but it does mean that the preview window takes a little longer to update.
Feedback and testing I might need:
- What do you think of the delay between when you type code and when the preview window refreshes to show the change?
- Some sort of stress test could be useful, like what happens when you copy a bunch of (possibly dubious) CSS and paste it rapidly and repeatedly in the CSS section.
Major change: Add backup system and "restore backup" button.
- Quick rundown of how the backup system works: The editor saves one backup copy of each code (HTML, blurb, CSS, scratchpad) which it updates/overwrites with your working code every 5 minutes + whenever you close the window, if that panel is NOT empty. Basically, you shouldn't be able to accidentally overwrite the backup with a blank e.g. if a text field is cleared and the page refreshes.
- Normally, there's no button that lets you access the backup. This is meant to prevent you from accidentally overwriting your current work with the backup. BUT when a text field is blank, the Clear Panel button () turns into a Restore Backup button (). Clicking it should pull up the last backed up version.
- (Only for this beta version) If you open the browser console, you'll see messages that tell you when backups are being made.
Feedback and testing I might need:
- Does it work as described above? Is it intuitive to use?
- Write some junk code in any panel, and then wait five minutes (so a backup gets created). Delete the code you wrote, and refresh the editor (it should be blank now). Does the bin button turn into a restore button on startup? And, does clicking it produce the backed up code?
Other changes under the hood (let me know if you run into any bugs!)
- Moved Sass object into global namespace to reduce processing overhead (creating too many Sass objects was probably the reason CSS kept crashing)
- Restructured file upload code
- Deleted unused lorem ipsum function
- Simplified hard reset function
- Restructured blurb toggle
Thank you so much in advance!
Immediate thought: some sort of setting to establish how long the user would like the waiting period after the user stops typing to be would be amazing - love this in theory, excited to try it out later :>
Ok, reporting in!
The backup restore button works perfectly! I got the option to restore the moment I cleared the code, after clearing + refreshing the page, and after clearing + closing the tab + reopening the page. The icon feels pretty intuitive to me, too. The "undo" arrow over the trash can makes it real easy to understand, I think.
The live update delay doesn't bother me either way, tbh. Doesn't seem to be too slow, but I don't usually pay attention to that much in the first place. My laptop is fine enough to handle any load the current version brings, but I do like the idea of the delay making things a little easier on anybody who might be using an older computer/phone/etc or bad connection. :>
So far, I've had only a singular problem pop up!
I was just going about working on some basic code, to replace my old outdated playlist code that was just icons linking to Youtube, to Youtube embeds instead.
Pasting them into the editor (key binds, not mouse clicks), caused the site to completely freeze and crash for me, it continued loading, but never could even recover from the refresh button!
But it also could be, due to a Chrome update on my end. (Certain sites and Chrome itself just freeze for a brief second, due to an update lately, to a point I have to get out task manager and force-crash Chrome, to restart the program, weird bug I know..)
Of note: It happened twice, every time I was working on the embeds; Once, just pasting it normally in, the second time, I had CTRL + F enabled, so the search function, to find a certain ID + I switched to a tab inside the code preview.
^I also didn't mind it crashing in this case, because it was perfect timing to naturally test and also stress-test the backup recovery fields.
I had miiiild troubles with the restore, as I copy-pasted my code beforehand, to check and compare, if something wasn't restored- said tab I worked on 2nd attempt, wasn't changed. So on the HTML side, there might be a hiccup, but I noticed nothing else on the other ones, those had a backup restore work perfectly fine on me! :)
I hope my report hopefully helps, other than that, I had no bugs appear. And yes, I have noticed the site updating slower on code as mentioned, I find it a nice change!! I would often get lost in what I updated, then had to press CTRL Z, to see my changes, so for me with a short attention span, this is a huge bonus! Hope also the feedback helps <3
thank you! did you happen to save a copy of the code that caused the crash? I think that sometimes happens when ace editor can't parse the code and I haven't found everything that causes it to do that just yet.
Sure sure!!! I only use HTML for character codes though, so no CSS on that one. xD
It was literally just this line:
<h1 class="card-title text-secondary text-uppercase pt-2 pb-0 px-1" style="font-style:Helvetica;">~ Aesthetic/Themes ~</h1> Â
<div class="row no-gutters px-3">
<div class="col-lg-12">
<div class="row no-gutters py-0 my-0 mx-0">
<div class="col-lg-6">
<div class="container ml-0 py-4 text-center">
<p class="text-uppercase text-muted text-center mb-3">PLAYLIST</p>
<div class="overflow-auto" style="width:200px; max-height: 400px;">
<div class="container text-center py-3">
<div class="row no-gutters">
<div class="col-lg-6">
<iframe width="90" height="150" src="https://www.youtube-nocookie.com/embed/Kb-2xpEoKOk?si=_lQjP5jQ9f4kdaC3&start=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe width="90" height="150" src="https://www.youtube-nocookie.com/embed/5x_tQkuYJ5o?si=9YUfhMA-npnNhAXt&start=3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="col-lg-6 col-md-4">
<div class="container">
<iframe width="90" height="150" src="https://www.youtube-nocookie.com/embed/Qu146oLMyOc?si=QKajKq1fGVtYBf8W&start=2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="container">
<iframe width="90" height="150" src="https://www.youtube-nocookie.com/embed/EAPjA0VbjkA?si=yJvpHRMOH0uX1EPV&start=4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-8">
<div class="container py-0 my-5">
<div class="card-body mt-5 text-center">
<small>(See image credits, located in its respective tab!)</small>
<div class="container my-3">
 Â
<img style="rounded" class="my-3 py-0" src="https://i.imgur.com/A60WUmW.png" alt="A60WUmW.png">
 </div>
 </div>
 </div>
 </div>
 </div>
       </div>  Â
      </div>
Hopefully that ancient advice I've seen, on how to display code via spoilers still works dfklsdg, but yeah!! It were just embeds in columns! I had to paste it thrice, as I had AU tabs, I replaced the code with as well! ((also please forgive the rats nest, my codes are very messy, unlike your spotless and labelled ones. x"D))
I wasn't sure, what to exactly take a cap of, so I just made a video, opening some elements, that are part of the HTML console! I hope the video helps at all somehow. After a few freezes though from my end, it ran just fine again, before I recorded, just to see again, if it's on my end, but for sure on my end, nothing to do seemingly with your helpful website at all! (I have no clue why Chrome freezes and crashes so much lately FYI, like I said, after an update Chrome just continues to slow down and make my PC combust, even though it's a little higher-end than most default PCs for work sdsdklfgdsg)
Just a warning ahead, I used a discord link, so you can get the raw video, as I know YT compression is terrible on text on my channel for some reason, if I were to upload it.
(It'll prompt a download window, I tested it on incognito, just to see if the video works!)
I do apologize for any trouble that I might've caused, as I cannot be sure exactly, why or when Chrome does these freezes! (and I checked on my extensions, they're also not reason for said issues, it's the same extensions I've had for years.) <:O