36 lines
4.1 KiB
Markdown
36 lines
4.1 KiB
Markdown
---
|
|
title: "Site Update: Welcome to the Grid!"
|
|
content_type: journal
|
|
date_pub: 2024-04-09T22:17:45.000-04:00
|
|
description: Some details around the recent addition of a scrolling background grid to the site.
|
|
tags: cyberpunk code interwebs WebDev
|
|
---
|
|
|
|
Recently, I decided to try my hand at some CSS shenanigans, and spent a few hours replacing this site's long-serving background image with a scrolling grid background.
|
|
|
|
I've been obsessed with digital grids ever since I first saw the movie [Tron](https://en.wikipedia.org/wiki/Tron) (presumably during its initial HBO release, when I was around 6). Tron and Flynn were some of my first heroes (they fought for the users), and I remember being blown away not just by the movie, but by being able to play the _same game they play in the movie_ via the incredible Tron arcade cabinet. I distinctly remember going to the Chuck E. Cheese's near our house and playing it, complete with the special blue joystick, and just like the movie, it was _amazing_. And it was all grids.
|
|
|
|
](/images/updates/tron-arcade-machine.jpg "Tron arcade machine")
|
|
|
|
|
|
|
|
So that's the "why", as for the "how"...
|
|
|
|
The capabilities of #web rendering engines (AKA #browsers) have improved immensely over the last few years, particularly in the area of CSS effects. A link to a link to a link lead me to a couple of [stack exchange](https://stackoverflow.com/questions/44793453/how-do-i-add-a-top-and-bottom-shadow-while-scrolling-but-only-when-needed) [questions](https://stackoverflow.com/questions/63874053/any-way-to-line-up-the-end-of-tron-legacy-style-grid-half-way-between-top-and-bo) and a [collection of fantastic synthwave-inspired CSS effects](https://speckyboy.com/css-javascript-snippets-synthwave/). The next thing I know, I've replaced the site's static background image with a scrolling one.
|
|
|
|
Except... I know that not everyone _likes_ moving background effects, so the only responsible way to add an effect like that is with a toggle that allows the site visitor to turn it on and off at will. And the only responsible way to add an interactive toggle like that is via [progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement): visitors without JS enabled (or those whose browsers don't support [`<script type="modules">`](https://caniuse.com/es6-module)) will get just a static background grid, but those who do have JS get both the scrolling grid _AND_ the toggle, tying the presence of the feature to the ability to disable it.
|
|
|
|
If you want to know more specifics, check out the [commit](https://git.itsericwoodward.com/eric/itsericwoodward-site-v2/commit/b2d2fb6d34f1ec14c3c9b7349b87559eddb8f880) on my [self-hosted git server](https://git.itsericwoodward.com/eric/), in particular the changes to the [`scripts.js`](https://git.itsericwoodward.com/eric/itsericwoodward-site-v2/commit/b2d2fb6d34f1ec14c3c9b7349b87559eddb8f880#diff-295d89f33ba7c5c5879162f1cd37fd4c2a68c7d1) and [`styles.css`](https://git.itsericwoodward.com/eric/itsericwoodward-site-v2/commit/b2d2fb6d34f1ec14c3c9b7349b87559eddb8f880#diff-e5a74efc37d0925d2ad32f86388d0229678ed49f) files.
|
|
|
|
Because I, too, fight for the users.
|
|
|
|
---
|
|
|
|
_Update: 2024-04-27_
|
|
|
|
Since posting this, I've come to realize that the CSS-based grid solution I described above had some problems - most notably, the scrolling-performance hit, particularly on long pages. The simple presence of the affect was causing clipping issues and serious scroll-lag _all over the site_ (really, any page longer than one vertical screen). Plus, the animations themselves had a tendency to get super-janky the longer they went.
|
|
|
|
Not as "user"-empowering as I'd hoped. :(
|
|
|
|
In the end, I wound up trading out my pure CSS solution for an implementation that uses a [tiny SVG file](/images/grid.svg), as it is _much_ more performant, while still allowing for color customization (I wonder why... :thinking:). It's a little bit "flashy", but it's still a decided improvement.
|