Cassie Jones [Sat, 18 Jan 2020 00:44:30 +0000 (19:44 -0500)]
Hide animated GIF stamps if "reduce motion" is on
Some people have a hard time dealing with motions near text they're
reading, or just don't want to be dealing with animated content
generally. The (prefers-reduced-motion: reduce) media query is active
when the reader has enabled one of the associated accessibility features
on their device. We can use that to hide the animated "stamps" GIFs
which generally have very short, fast loops.
This code currently uses ".gif" as a proxy for "is animated", which
could be improved by having some additional metadata. Additionally, it
might be nice to have alternate still versions of the gifs displayed
when the animated ones are hidden.
Cassie Jones [Tue, 12 Nov 2019 05:06:13 +0000 (00:06 -0500)]
Add background color to images
If an image is loading on a slow connection, it displays progressively
and there's a large blank region where the image will be. Giving it a
background color makes the eventual shape of the image display more
clearly.
Cassie Jones [Tue, 12 Nov 2019 04:37:37 +0000 (23:37 -0500)]
Minify inline CSS, move syntax colors to bottom of page
This improves both maintainability and performance because the CSS
can be written out-of-line, and then get inserted and minified.
The stylesheet tag for the syntax colors got moved to the bottom of
the page, because CSS in the head tag blocks rendering until it's
loaded. Inside the body is dependent on browsers, but they all support
it and in the worst case you just get the original blocking behavior.
projects / web / blog / log