the.remaking.of
July 8, 2022
Wow, it's been a while since I posted, hold on let me just check how long... IT'S BEEN OVER A YEAR?! I guess time flies when you're not writing a blog. Well, there's a very good reason why I haven't posted in so long, I'M OUT OF IDEAS! Oh and I'm out of toilet paper, I should go get some when I'm out picking up some ideas. Time to do the oldest trick in the book... REMAKE!
Remakes are all the rage these days. The Lion King was remade in 2019. GhostBusters was remade in 2016 and then rebooted in 2021. Even The Lake House was a remake, yes the movie where Keanu Reeves and Sandra Bullock send love letters through time was actually a remake of a Korean movie made in 2000 called Il Mare. Why does a Korean movie have an Italian name? Who cares! With a plot this good they could have called it Puddle Shack, have it star Nick Cage and Adam Sandler in wig and have it be directed by M. Night Shamawhatever and it would still make a million dollars... Wait, is that alot? Doesn't matter, they did it for the art. Let's watch the trailer for that shall we...
Surely a love story for the ages. Why did I decide to put on mascara before I watched the trailer? Well, if the it works for The Lake House, it will work for me too. The only question now is what's my gimmick?
list.of.gimmicks
- Replace me with someone younger and better looking.
- Rewrite the same articles, but in Korean. A reverse The Lake House!
- Replace me with someone who is female. This would really piss off Reddit, Extra points!
- Cast people as my children who continue my legacy of writing articles about trivial things that no one reads.
- Replace me with a dog, people like dogs. Woof!
- Start writing in an accent.
still.starving
In the end I decided to try using Svelte, Still means starving, still super cool! something I've gushed at length about before. Specifically I decided to use an SSR framework powered by Svelte called SvelteKit. That statement might leave you with a few questions, like
- What’s an “SSR framework”?
- Why does “tech” have so many “acronyms”?
- “WHY” “DON’T” “PEOPLE” “USE” “MORE” “QUOTATION” “MARKS”?
First off, calm down. We all love quotation marks, but we should do everything in moderation. You wouldn't eat too much ice cream would you? My stomach hurts. Second, you have to learn yet another acronym. Oh God no, not another acronym!
Acronyms are just like scoops of ice cream, one more wont hurt! Why?! No more, I'm gonna vommit! The technology that my blog uses is called SSR, but before we try and understand that, we'll have to understand a bit about how websites work.
¿what.is.a.website?
You ever hear of a little something called "the internet"? Gah! No more quotes, not even for sarcasm. Give the reader some credit! The internet, in simplest terms, is a way to access files on computers that aren't yours. If you want to see watch a person open boxes, read some erotic Harry Potter fanfiction, or look at some cat pictures from some weirdo, the internet has it all. In reality, all of these are just files from computers somewhere out there in the world, be it text, pictures or videos.
But not every computer can be accessed by the internet, for that you have to open the door to the internet. It's like the door to Hell, if Hell was filled with annoying jerks who do things like harass women on Twitter, and Instagram, and Facebook, and Reddit and... oh my God, the internet sucks. This is not something that happens with normal computers, instead programmers use special computers called servers. A server just waits around for someone on the internet to ask a file. Then the server "serves" Why did I do that? You had to have understood the connection there, right? RIGHT?!... I think I have a problem. And the solution? More quotation marks! Here, enjoy: """"""""""""""" the file to the requester. These requests can come from any sort of application, but in the case of a website, it most often comes from your browser.
But websites aren't just text, pictures and videos, that are on can have cool features like dark mode. Remember this, we'll get back to it later. That's where your web browser comes in. Your web browser downloads some files, interprets them to displays a website.
okay.so.what’s.the.acronym
Okay now that we understand the internet and browsers, let's try a hypothetical. Let's say you're an intrepid young-ish blogger Somewhere between 30 and 80 years old. and you wanted to make a blog from scratch, what are your options. The main options you'd have to choose from are these:
- Client side rendering: This is where your web browser takes code from a server and then generates a website before your very eyes.
- Server side rendering: SSR for those of you that like acronyms, this is where your website is generated on server and then sent to your browser.
- Static site generation: Which I wrote another blog entry about, is where all the pages on a website are pre-generated and are sent from a server to your web browser.
- Ask someone younger for help While you're at it, might as well ask them how to log into your email. Don't forget to forget your password!
Some of you may be thinking, why would I ever not pre-generate all of my site, And why aren't my children answering my calls, I've unplugged my router again and for some reason Netflix isn't working. it sounds faster. Well, you're right, it certainly would be faster to not have to generate a page when a user asks for it. It is in fact how I originally made my blog, but there was only one issue with that... dark mode.
let.there.be.dark
So what was the issue with my beloved dark mode on my old website? Well, if you were to go to my old website and turn on dark mode and reload the page, what would you see?
Did you see it? Dear God, THE HORROR! But seriously, did you see it? People keep telling me "It's no big deal" and "I'm crazy" and I keep telling them STOP USING QUOTATION MARKS! YOU'RE WORSE THAN THE SLIGHT FLICKER ON MY OLD WEBSITE! What was happening there to cause that awful flicker? For this we're going to need some arrows.
So what's the issue here? The issue is that the website is showing up before we have what's necessary to show the page in dark mode. So instead of going directly to dark mode, we end up having to use this in-between state. It's like whatever the evolutionary step is between the Pokémon Squirtle and Blastoise. I don't know and I don't want to know... Seriously don't tell me, I will be physically and purposefully ill.
How do we fix this egregious error? One way is to know what mode you’re in before you send the files from the server to the browser, like some sort of computer Nostradamus. And how do we know this?
c.is.for.tracking
What I use to make dark mode work in this website is the same technology that Facebook uses to track all of your internet browsing, and it's called a cookie. What is a cookie you might ask? It's a bit of text that is saved in you browser and is used to communicate with servers to let them know you're logged in, and in this website's case it's used to save if you're using dark mode. Our new arrow diagram looks like this:
Even though there are more steps now, it doesn’t take significantly longer for the website to show up.
conclusion
By switching to using SSR instead of pre-generating my site I have fixed the problem of having light mode show up briefly on refresh, and it only took over a year to make! Well, at least we learned something. Oh my god, a Squirtle evolves into a Wartortle? Why not Warturtle? It sounds like the way a walrus walks into battle. What a terrible name! If you'll excuse me, I need to be purposefully sick now...