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! 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. Let’s watch the trailer for that shall we…

Surely a love story for the ages. 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

1. Replace me with someone younger and better looking.
2. Rewrite the same articles, but in Korean.
3. Replace me with someone who is female.
4. Cast people as my children who continue my legacy of writing articles about trivial things that no one reads.
5. Replace me with a dog, people like dogs.
6. Start writing in an accent.

still.starving

In the end I decided to try using Svelte, 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? Second, you have to learn yet another acronym.

Acronyms are just like scoops of ice cream, one more wont hurt! 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"? 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. 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" 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. 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 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

Some of you may be thinking, why would I ever not pre-generate all of my site, 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! 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.

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.