I did this recently for my new personal website! It's quite easy and really satisfying. I love doing as much as possible in stateless CSS instead of JavaScript.
Did this about six months ago over at my site. Was annoying to get it right but glad I did.
Some people find these kinds of sites pointless these days, but I enjoy keeping one even if I rarely update it anymore. Spirit of the web and all that.
Nice site, it works well on mobile, which is a bit of a pleasant surprise when it happens from personal blogs etc.!
FWIW the Twitter feed from, I assume, people you follow is a little odd though - it's not immediately clear that it's not you, nor about the article being viewed, which it doesn't necessarily have anything to do with, and it includes replies to threads. At the time of writing the top one is recommended reading that's 'racist from the start'.
Yeah, it bleeds a bit too much on mobile - younger brother passed away recently and I shoved the site out the door before heading back home to be with him. Desktop view has it more marked as separate content - e.g, that tweet is actually a Retweet with a comment, which is kind of a pain in the ass to handle from Twitter's API. Should find time to clear it up a bit I guess.
Site works well on mobile because I cannot stand sites that don't load quick + layout well on mobile, and considering the general content I post, I'd expect the audience to have the (relatively) same pet peeve.
Looking at the feed you should see if it's possible to exclude any tweets that begin with "RT" (retweets) or the "@" (replies). This way only posts you write should show in the feed, would make it much cleaner as without the full conversation contexts those other messages make no sense.
The GitHub activity feed is pulling in every comment you make, see if you can filter that to only show pull requests you've created to showcase your work. Maybe also include commits to your own projects if the commit length is more than a certain number of characters to filter out the small updates.
Heh, I should be clear: I consider the aforementioned Tweet/RT issue a UI/UX thing, it's otherwise working as designed.
I'm perfectly happy showing my @replies, rando GitHub activity, etc. Nobody is actually reading that sidebar, short of a select few - I like having that junk indexed in search engines attributed to my own domain.
Irrelevant but I wanted to thank you for the Old Reddit extension for Safari. That makes Reddit somewhat bearable again, although it still seems to lag while it loads their stupid new UI before doing the redirect (not sure if there's any way to avoid that).
Glad it helps! I hate when extensions aren't ported to Safari, so I just decided I'd do it myself. shrug
Sadly Safari's API isn't that great compared to those found in Chrome/Firefox; there's no way to catch the url before the page actually loads. I inject some JS to catch and redirect as fast as possible, but sometimes you'll see a flash of the new Reddit experience. If a better API becomes available at some point I'd gladly swap it out. :)
Mine too! Finally put up a personal site last month after not touching any web projects for a long while. I've checked out of a lot of social media and wanted my own place to put stuff and to poke around with javascript and web graphics.
One of the upcoming posts is going to cover handling dark mode for <canvas> content. So far I've just used transparent backgrounds with no black or white drawing so that it's visible either way.
Not much on it yet, just been slowly working through the setup for doing a canvas with a responsive site.
Neat tidbit - the logo image is a single SVG in shades of dark gray, which doesn't work well on a dark background. You can apply image transformations in CSS under the dark mode media query to adapt things like this:
This is the same tool that the linked post uses for desaturating images, but adding that invert is a useful tool for dark mode. Personally I wouldn't recommend general image desaturation, photos taking more focus against a dark background is a good look if you ask me. At least consider making it an opt-in setting instead of the default.
What I did for my SVGs was use CSS to actually change the internal fill/stroke colors directly. Unfortunately you can only do this if the SVG is inlined as markup (as opposed to shown in an <img> tag), but it's computationally much cheaper than using filters, because the latter operate on the image as a set of pixels rather than a set of shapes.
Ooh, that's an interesting idea that I hadn't considered! My page is pretty computationally lightweight to start with (no 3rd party javascript) but if I'm ever in the mood for some unnecessary optimization that sounds like a fun one to experiment with.
Trade-off is slightly more data to send with each page, since you have to inline the SVG rather than having it cached after the first load. But it's a whole 2kb and could probably be smaller if I wanted to look into SVG optimization.
I've had CSS filters alone cause noticeable lag on certain machines in the past; they can really pound the GPU. That was a few years ago though, and on a bigger image. Also, I think I was using a blur filter, which is much more intensive than a simple color filter. So probably still not worth worrying about :)
I've been using it for a few months on my personal site as well.
It defaults to the light version and then switches to the dark them on request.
This is so people who don't care or aren't good with computers get the light version and those that can set the system theme have the option of getting the dark version.
I've used CSS variables though, which make it even simpler. E.g. I have `--page-background-color` and `--text-color-primary` that are set to a certain default value. In dark mode, these variables are set to other values, removing the need to redefine the actual selectors.
I like that you're using CSS variables to achieve this. I had to look up support for this , and it seems fairly decent. https://caniuse.com/#feat=css-variables
Some people find these kinds of sites pointless these days, but I enjoy keeping one even if I rarely update it anymore. Spirit of the web and all that.
https://rymc.io/