i hate ajax (but not really)
Hi, your resident ghost cat here. Y'ever notice how, like, the pages just kinda fade out and fade in, and you don't actually leave the page? that's AJAX, or "Asynchronous JavaScript and XML". Basically, by using JavaScript/JQuery, we only load what's necessary, instead of reloading the entire website for a page transition. This means less data being served by the host, and less data being downloaded by the client. We love saving bits. c:
AJAX affords us a few cool new features once integrated. Obviously there's the whole "no reloading the page" thing, which means we get cool smooth transitions (with the help of CSS transforms), but it also lets us set up persistent scripts that exist outside of the changing contents. Case in point, the SoundCloud music player nailed to the bottom of the sidebar (if you haven't tried it yet, it's nice and soothing ambient tracks). Even if you change the page, the music player still works, because we're not rewriting the DOM with a page reload. The only stuff changing is the content in the inner container; anything outside of it isn't affected.
For as neat as this whole setup is, however, it's also not without a few downsides, which I've personally found to be a pain in the butt to deal with. First off, because we're not reloading the page, things like the site title and browser history state do not update natively. This can be fixed with more JavaScript, but we're basically having to manually establish all of the changes that would occur with a normal page transition. My own page transition script works by:
1. Fading out the content by changing the opacity
2. Close the inner container by removing the class is-open and adding the class is-closed, which uses transform: ScaleX(0);
3. Change the inner container's contents via AJAX
4. Open the inner container by removing the class is-closed and adding the class is-open, which uses transform: ScaleX(1);
5. Fade in the new content by changing the opacity back to it's full value
6. Change the site title.
7. Write the state to the browser history (so you can use the back/forward arrows on your browser).
The other issue I've run into is a bit harder to deal with. Since we're not reloading the page, any new scripts introduced by the transitioned content isn't ran, because the DOM has already been written. This means that if I want to, say, use JavaScript to copy the contents of a container (like the copy button for my 88x31 on the links page), I have to set the script along with a listener event within the actual template to wait for the copy button element to appear. And I really don't feel like setting up listener events for every single script I want to use on a specific page. My solution to this issue was to create a new template/webpage that's as bare as possible, and include any JavaScript there. I then embed that page via an <iframe> element. Because the <iframe> is an entirely separate DOM, any scripts within it will run after the page transition.
Right. So, uh, needless to say, I have a hole in the wall next to my desk where I ran my face through it trying to mitigate all of these issues. There were many, many moments where I wanted to just say "screw it" and go back to normal page transitions, but overall I'm happy that I've stuck with it. The site just wouldn't have the same kind of cleanliness without it. Thanks for reading this far!
ok im off to bed, nini ❤️
