Bits of Code

It took me a while to figure out that links in the text were ALL CAPS instead of underlined and/or blue. The hover effect was so subtle that I didn't notice it at first. I ended up hovering over acronyms pretty often, as I was never sure if those were also links. That is not good design.

There's also the issue that while the site may look pretty, it requires downloading 5 megabytes of CSS.

At every job I've had, designers who talked about typography created more problems than they solved. They picked fonts that were less readable but more unique, "To emphasize our brand." They chose web fonts that hurt page load times and had kerning and hinting issues on platforms besides macOS. They chose thin font weights and gray text colors because those looked nice when viewed indoors on retina displays with young eyes.

Almost every site could be improved by doing less with fonts, not more. For long form text, use a popular serif font. For user interfaces, use the system font stack.[1] Don't ship web fonts except for icons. Most importantly: Use high contrast and normal font weights. Thin gray fonts are extremely hard to read if you're outdoors or using an older/cheaper screen.

1. https://bitsofco.de/the-new-system-font-stack/

This is some pretty powerful stuff. Here's a more information-dense and up-to-date rundown of srcset and sizes: https://bitsofco.de/the-srcset-and-sizes-attributes/

Notably, it shows how it's possible to use different images based on a portrait or landscape layout of the viewport, which OP doesn't cover. That's not always useful but it's good to know it's there when you might want to use it.

I was recently (well, several months ago) tasked with improving the Google PageSpeed scores on mobile for a site which has a lot of image-heavy pages. The end solution involved adapting all images to use a <picture> image with a WebP alternative for browsers that can show it (Google's tools like it when you use their near-proprietary image format; go figure), plus using srcset and sizes (which can be used on <source> tags inside of <picture> tags as well as <img> tags) plus a script which resizes and caches resized versions of large images based on URL parameters (basically an ersatz Glide [0]; I wish I had known it existed when I started). The end result severely reduced page weight for mobile visitors and was successful in raising our PageSpeed scores and appeasing my client.

[0]: https://glide.thephpleague.com

Yes, but grid/css is _designed_ for layout. Tables was a bastardization of markup designed for data display. (ie, a table of data, like in a spreadsheet)

Unless you have truly dug into how awesome grid is, you can't really understand what it's done for the future of web design.

I will look up a short tutorial I ran into that really showed me the power/value of grid. (fyi, I use CSS daily in my work)

Edit: Here's one example. You could use tables, but this is incredibly flexible and with media queries you can completely manipulate the layout and position of the design based on the screen size. And the markup is incredibly light, it's fabulous for those of us who want more control and less work to do, _and_ less debugging of browser quirks.

https://bitsofco.de/github-contribution-graph-css-grid/

I was thinking that a service worker could be used:

https://bitsofco.de/web-workers-vs-service-workers-vs-worklets/#service-workers

If the url returns a 404, check the internet archive, if it’s there then return that otherwise return a 404.

If CORS is an issue just proxy the requests via the server that is serving the website.