diff options
| author | Bill <bill@billserver.senders.io> | 2022-12-31 14:23:20 -0500 |
|---|---|---|
| committer | Bill <bill@billserver.senders.io> | 2022-12-31 14:23:20 -0500 |
| commit | 44da246fa5e373c86373889b53263f52af84d525 (patch) | |
| tree | 8eed772e39a010703283726389139744978a6bfc | |
| parent | ab5ecccf0e282c9a181a8123196e42b8c7ca9009 (diff) | |
Major overhaul, markdowns + copyright notice
28 files changed, 628 insertions, 255 deletions
diff --git a/mds/blog/blog-index.md b/mds/blog/blog-index.md index 9691e42..44b9008 100644 --- a/mds/blog/blog-index.md +++ b/mds/blog/blog-index.md @@ -2,6 +2,8 @@ # Blog Index <!--NEXT--> +1. [2022-12-05 - CSS Themes Exist Now!?](/blog/2022-12-05/) +1. [2022-12-05 - # CSS Themes Exist Now!?](/blog/2022-12-05/) 1. [2022-11-06 - My Markdown -> HTML Setup](/blog/2022-11-06/) 1. [2021-01-05 - Manjaro Followup - Breaking things!](/blog/2021-01-05/) 1. [2020-12-17 - Manjaro Experiment](/blog/2020-12-17/) diff --git a/mds/blog/css-themes-exist.md b/mds/blog/css-themes-exist.md new file mode 100644 index 0000000..263db13 --- /dev/null +++ b/mds/blog/css-themes-exist.md @@ -0,0 +1,78 @@ +## CSS Themes Exist Now!? + +Yeah news to me too! Seems like according to [the MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#browser_compatibility) +it's been supported since 2019 for most browsers and supported by all by now. + +This is so wild! + +### Why is this cool? + +Well you may have noticed this is in dark mode now (if you set your preferences to dark in your OS/Browser). +But this is cool because it means we're no longer restricted to using Javascript and custom preferences for websites. + +I had assumed this existed because sites like GitHub were defaulting to darkmode despite me never setting anything in like my profile settings. But I just assumed based off of my legacy knowledge this was some custom render trick using javascript. + +#### Still no JS! + +I keep this blog JS free! While not all pages under the senders.io umbrella are javascript free - everything in www.senders.io (this blog) will always be. + +I try to keep that, not only for my sake, but for your sake too - a javascript free blog means the priority is reading. + +### Examples + +So I achieve darkmode in this blog by doing the following: + +``` +/* default / light */ +:root { + --background: white; + --font: black; + --quote: #eee; + --link: #0303ee; + --linkv: #551a8b; + --linkf: #f02727; + --articleborder: #060606; + --tableborder: #aaa; + --tablehead: #ebcfff; + --tablez: #eee; +} +@media (prefers-color-scheme: dark) { + :root { + --background: #1e1e1e; + --font: #eee; + --quote: #444; + --link: #00d3d3; + --linkv: #cd78f4; + --linkf: #f02727; + --articleborder: #23ed9b; + --tableborder: #aaa; + --tablehead: #6f5a7e; + --tablez: #313131; + } +} +``` + +Essentially, I leverage [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) to define the specific areas I set theme specific colors (my nav bar is static regardless of dark/light mode for example). + +Then if the media preference is dark - I overwrite the variables with my dark mode values! + +Whats tricky is originally most of these values didn't actually HAVE values set - I relied on the system default for things like links and the page colors in an effort to use minimum CSS as well. + +I still feel like I am honoring that since I don't have to duplicate any actual CSS this way, I just have a lookup table of color values. + +That being said my CSS file is still only about 3kB which is not so bad. And I've actually covered most themed properties already - links, tables, quotes. + +#### Toggling Themes + +Something else I found out during this experiment is you can actually toggle the themes directly in your developer tooling. By opening your devtools and going to Inspector (in firefox at least) +there are two buttons in the styles section "toggle light color scheme" and "toggle dark color scheme" using a sun and moon icon. + +This made testing VERY easy and actually is what I noticed to prompt me into looking up if this was a standard CSS thing or not. So thanks Mozilla! + +### Conclusion + +Yeah if you've never realized this check out the MDN guides on both variables (I didn't realize these got put in the standard either!) and themes! + +* CSS Variables: [https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) +* CSS Media prefers-color-scheme: [https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) + diff --git a/mds/blog/mastodon-and-twitter.md b/mds/blog/mastodon-and-twitter.md new file mode 100644 index 0000000..321fba9 --- /dev/null +++ b/mds/blog/mastodon-and-twitter.md @@ -0,0 +1,43 @@ +# Mastodon and Twitter... wow! + +So I was aware of the [Fediverse](https://en.wikipedia.org/wiki/Fediverse) quite some time ago. +[Mastodon](https://en.wikipedia.org/wiki/Mastodon_(software)) is one of the microblogging social networking services +that is.. "apart?" of the fediverse. + +[I joined mastodon](https://mastodon.online/@senders) back in 2020 when I was looking into it more and it was blowing up again on sites like Reddit. +Turns out I didn't really gel with it - primarily I realized I don't really like social media. + +## Twitter is on fire and I don't care + +So I joined Twitter sometime around 2010 because people kept talking about it and I wanted to follow some friends. +This is pre-discord and post-skype sucking ass so my friends and I were in need of some way of sharing links and media online +because SMS and MMS still and did suck back then too (TBH its the exact same). We'd DM eachother links and stuff and it was fun for a while. + +I did engage with the platform from a "I have thoughts that no one cares about, but at least I can tell Twitter" perspective. I didn't engage with it at all from: +I follow people and hashtags because I care about the discourse. This is also when I started getting more into Reddit - which was much more up my alley so it was moderated and +filtered for "higher tier content" (saying this now is like... hilarious - though as of Nov 2022, they're both just shitposts). + +In November of 2022, Twitter began to implode under god-awful leadership. And frankly, I couldn't care less... sorta. + +### The only good part about Twitter + +Apparently, Twitter is useful for distributed organization - we've seen how it works during movements to get the word out and spread the message. +Most notably in Egypt during Arab Spring. + +This can happen in Mastodon - but by its nature - Mastodon is a bit... gatekeepy. And being able to just go to Twitter.com and search #hastag is very useful for this aspect. + +### But there is no other value, and that is like... not always a good thing + +But that type of organization isn't always for _positive change_. I mean, look at JKR tweeting about trans folk and Trump. + +## Mastodon + +So I didn't want this to be some history lesson. It was mostly a post about - I started using Mastodon this morning again. I find it sits nicely in this niche of blogging +below things like Gemini or this blog - where someone would put _some effort_ into it. And mostly just get their quick thoughts out there. + +And I think that is fun. I am now more engaged with online creators than I was back in 2010 so I would probably want to have some YouTubers and bands migrate over so I could keep up-to-date on stuff. +But I bet Instagram is going to win out for those - since they are already engaged on that platform. + +### Why not Instagram + +So I honestly believe if Twitter full shuts down (hard to believe but it COULD happen at this point - or at least get ditched enough for people to move on) it will be replaced by Instagram as the platform to engage with your favorite artists, creators, celebrities etc. It already is that - but its a different type of engagement. So I am curious how this transition will occur. I don't see enough general public moving to Mastodon - as the venn diagram of "how I engage with fans on this platform" is like 2/3s for Twitter instagram and there is like 1/3 that Twitter does that Instagram doesn't - and that's diff --git a/mds/rss-a-follow-up.md b/mds/rss-a-follow-up.md new file mode 100644 index 0000000..66cd31a --- /dev/null +++ b/mds/rss-a-follow-up.md @@ -0,0 +1,108 @@ +# RSS - A Follow-up + +Get an RSS reader and connect everything to it! + +Between switching to Mastodon for my social media allowance, and using a dedicated RSS reader has really cut down my overall consumption and wasted PC time. + +> this blogpost is originally posted to my gemini gemlog: gemini://senders.io/gemlog/2022-12-31-rss-a-follow-up.gmi which is where I do most of my writing, converting some useful to share things over here. It is also where the original RSS gemlog this is a follow-up to was posted. For context, I wanted to cutback on a lot of my web consumption, wasting time and just being mindless online. So I looked to RSS to help centralize and solve this issue. + +## Recap + +So I am using [https://tt-rss.org/](https://tt-rss.org) as my RSS aggregator. It's a self-hosted RSS aggregator that, using profiles, allows you to subscribe to multiple feeds and have them "synced" between multiple devices (they're not synced, you're connecting to a central server). I like this because I don't ever have to worry about dismissing, reading, or marking anything on my phone to have it still present on my PC. And I don't have to worry about feed subscriptions or my phone pinging a bunch of feeds, or obviously, any third-party hosting. + +## How I've been using it + +So as always, please send me interesting RSS feeds! Or even your own! I am trying to read more blogs, and if you have something you enjoy drop me a DM or email! I'll share what I am following throughout this section <3 + +### Blogs + +Obviously, I am following blogs, one of the last holdouts of RSS. I have a few that I follow, mostly other transfolk on Mastodon that I found had their own blogs. Most non-trans folks I follow are using gemini and still rely on the feed aggregators for that. + +If you're interested the two main ones I am reading right now are: + +1. [Erin In The Morn (substack)](https://erininthemorn.substack.com) +2. [Selfaware Soup](https://www.selfawaresoup.com/) + +Which have been pretty insightful. Erin sharing a lot of US transgender news, which is good since I have dropped off using Reddit which is where I "got" my "news" from. + +### Podcasts + +The other mainstay in RSS is podcasts. Some even say if a podcast can't be consumed via RSS, is it even a podcast? I would agree. Everything else is just a show. I don't _need_ the content to be consumable from my reader, but I'd really appreciate it if were. I am always on the lookout for more podcasts though. With the only two consistent listens being: + +1. [The Pen Addict Podcast (relay.fm)](https://www.relay.fm/penaddict) +2. [Cortex Podcast (relay.fm)](https://www.relay.fm/cortex) + +And currently off-season: + +* [Backmarkers Podcast (relay.fm)](https://www.relay.fm/backmarkers) + +Which has a YouTube video format. Though, I honestly really don't care for Austin Evans, I just enjoy consuming some F1 content and pretending I have friends I can talk to about motor racing. + +While writing this section I added: + +* [Inside.java Podcast](https://inside.java/podcast/) + +I have yet to listen, some of the topics seem interesting and being infrequent gives me hope its quality over quantity. (And I like having podcasts for chores to distract my brain) + +### Tech News + +Right now I follow two main news sources in tech: + +1. [debian.org/news](https://www.debian.org/News/) +2. [LWN.net](https://lwn.net/) + +Running servers using stable debian - it's good to know when security updates come in, as well as distro updates. And LWN is fantastic, I've been a subscriber for many years and while sometimes (Jake) can focus a bit heavy on Python news, has been always interesting to read. + +This is the section I plan on adding more and more to. I had other tech blogs that just felt like clutter and were pushing out daily articles that I couldn't care less about (opensource.com cough cough). But that's just me. Tech news is mainly where I want to focus - since fluff blogs are rarely my cup of tea. + +LWN has some links in their weekly editions for other news feeds I might consider directly subscribing too, but for now I have these. + +### Music News + +Some folk have an RSS feed for their site updates, which I appreciate. Some use sites like Squarespace but don't properly connect up the RSS feed which I do NOT appreciate. + +So right now I have two bandsites that DO update it seems (as their site aligns with the feed) - but the only one I'll mention is: [raisedbyswans.com]( https://raisedbyswans.com/) I've spoken of this artist in my Music Spotlight MANY times and is one of my favorites. His site, while entirely simple, is setup with RSS and has been publishing his updates consistently. I appreciate this. Always a strong rec from me! + +I've been toying with Music Review sites that talk about new releases in the genres they specialize in, but I haven't settled on anything that is helping me discover new music. + +### YouTube + +This is probably where the biggest change has actually come in. Having my YouTube feed fed through RSS has been fantastic. I am able to not only refresh and not miss any updates (since YouTube sometimes likes to pull updates in out of order than I don't see it because it's buried between some other videos that I'd already seen. + +But this also allows me one further level of filtering on my YouTube subscriptions. I can stay subscribed to channels I am interested in watching _occasionally_ but not every video, and keep those off my RSS feed. And for the "I like to watch most if not all the new videos" I can subscribe to those via RSS. So it's like the "bell" but without the app basically. And since on Mobile I do NOT use the YouTube app (so I can take advantage of the Ad Blocker in Firefox) that's great! + +What sucks / is tricky is actually subscribing to the RSS feeds because YouTube buried that feature now. You just need the channel_id or the username and you can subscribe using the following URL: + +``` +https://www.youtube.com/feeds/videos.xml?channel_id={ID} +``` + +And you can obtain the channel_id either using the URL (though with aliases now (@channelname) its rare to see a channel_id in the URL) if present otherwise a little console JS can print it out: + +``` +ytInitialData.metadata.channelMetadataRenderer.externalId +``` +A note however - you'll need to clear the console if you navigate to the next channel, at least in Firefox, it caches the result otherwise and you'll print out the duplicate value. There are some tools where you can print your subscribers list into these feed URLs and bulk subscribe. I've lost the link (and it's what I did initially) but I recommend doing the manual add at least to focus on the channels you WANT in RSS, since you can always fallback to the main subscriptions page on YouTube. + +But what this has given me is the ability to effectively ignore YouTube almost entirely. Ideally, I'd script something with YouTube-dl but I don't REALLY care that much, and I've gotten into the habit of closing the tab after the video so I don't stick around and get sucked into the algorithm. + +What my morning looks like is sitting down, switching to my tt-rss tab, seeing what's fresh, and watching a video with my coffee maybe, then just moving on and doing something else. I still lurk Mastodon, or get sucked into my computer in some way or another, but it's been really positive! I can count on one hand how many times since dedicating to RSS I've just clicked around YouTube. + +### Hobby + +The last section which really is an extension of Blogs/News is "hobby" RSS feeds. These feed a bit into the consumerist side of life and why I keep them separate. Right now it's almost _entirely_ fountain pen related (Who'da thought this community would still be writing blogs :P) but since most of the blog posts are either about products or reviews in some way, I try and limit how much I expose myself to them. I have been working on a draft about consumerism for quite a while now and just haven't really worked it into a post that isn't just DAE consumerism BAD? low-effort Toot level. (But basically, I kinda hate how all my hobbies, and hobbies in general rely heavily on a consumerism mindset, GAS, and such). So I've been trying to be more appreciative of what I already have and such. + +But these blogs are nice, and often keep in the know about my hobbies and can react to anything meaningful that's being released. A good video sorta on this topic was by Adam Neely([Adam Neely - How In-Ear Monitors are Making Better Musicians](https://www.youtube.com/v/mHoljbkyAEs)), and how his band spend $6000 on gear for their tour, but what it did was eliminate stress and enable them to more easily fine tune and control how they monitor their live performance. He touches on the fact that gear videos feed into the consumerist mindset of music making, but gear is often necessary to facilitate certain things, and setting up a portable in-ear-monitor rig for their entire band is well... unavoidable. It's just a minor aside in a much deeper video about IEMs and touring and FEEL. And quite the departure from his usual music education content. But it sums up the main thesis of my consumerism gemlog quite nicely I feel (or at least I am projecting my thoughts into a brief aside he makes). + +## tt-rss - in retrospect + +So tt-rss is _fine_ honestly, I think I need to setup a better theme, something that has a bit more contrast. I don't REALLY read in it, I just use it as the aggregator and then open the links directly. I don't mind the way it renders the full articles with images, but I do mind how GREY it is by default (in "night" theme). It looks totally customizable and I bet I can download a decent theme for it if I look. But I may spend some time doing that and try and read more in application. + +But other than that it's been quite the improvement over my internet experience. More RSS!! + +## Conclusion + +I need more feeds, as I do enjoy reading. So I'm always on the look out. I hate to throw in engagement-y things like "let me know" stuff but I am genuinely looking for interesting suggestions for stuff you might subscribe to over RSS. Even if it's just "this is my webblog" :) I always like reading people's things. I should troll the aggregators and look at folks capsule landings to see what is linked! + +Anyway, you should look into getting an RSS aggregator setup. It's been really impactful on cutting down on internet scrolling and mindlessness. + diff --git a/mds/wishlist.md b/mds/wishlist.md index fe278e6..0723f8c 100644 --- a/mds/wishlist.md +++ b/mds/wishlist.md @@ -44,7 +44,8 @@ Speaking of represses, represses are always fine. If there are notoriously bad r ### Else -If you are sick of getting me records for gifts - I do need something to hold some overflow for my records like [found here on etsy](https://www.etsy.com/market/record_crate) +If you are sick of getting me records for gifts - I do need something to hold some overflow for my records like [found here on etsy](https://www.etsy.com/market/record_crate). +Ideally it would be something that can hold 10+ records for storage - but even something that displays a single record (like what is currently playing) is needed. And probably more within the price limit. Interesting Fountain Pen ink shades: [Jetpens Store](https://www.jetpens.com/Fountain-Pen-Inks/ct/3250) diff --git a/new-blog.sh b/new-blog.sh deleted file mode 100755 index 130b9a7..0000000 --- a/new-blog.sh +++ /dev/null @@ -1,24 +0,0 @@ -#!/usr/bin/env bash -set -e -# Help - -if [ "$1" == "--help" ]; then - HELP=1 -fi -if [ $# == 0 ]; then - HELP=1 -fi - -if [ "$HELP" == "1" ]; then - echo "./new-blog [iso-date]" - echo " This will create a new file in www/blog with the date sent." - echo " It will also add the necessary boilerplate to the html file." -fi - -DATE=$1 - - -# Init File -mkdir www/blog/${DATE} -cat templates/blog.html > www/blog/${DATE}/index.html - diff --git a/templates/blog-footer.html b/templates/blog-footer.html index de97660..2786723 100644 --- a/templates/blog-footer.html +++ b/templates/blog-footer.html @@ -2,5 +2,11 @@ <div id="footer"> <i>BLOG_DATE</i> </div> + <div id='copyright'> + <small>© 2023 senders dot io - + <a rel="license external noopener noreferrer" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> + unless otherwise noted. + </small> + </div> </body> </html> diff --git a/templates/page-footer.html b/templates/page-footer.html index f5471aa..78d35f6 100644 --- a/templates/page-footer.html +++ b/templates/page-footer.html @@ -1,3 +1,9 @@ </div> + <div id='copyright'> + <small>© 2023 senders dot io - + <a rel="license external noopener noreferrer" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> + unless otherwise noted. + </small> + </div> </body> </html> diff --git a/templates/rss-header.xml b/templates/rss-header.xml new file mode 100644 index 0000000..c38d6f0 --- /dev/null +++ b/templates/rss-header.xml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<rss version="2.0"> +<channel> + <title>senders.io - Blog</title> + <description>senders.io's blog feed</description> + <link>https://www.senders.io/</link> + <copyright>2023 - CC-BY-SA 4.0 - senders.io </copyright> + <lastBuildDate>Mon, 6 September 2010 00:01:00 +0000</lastBuildDate> + <pubDate>Sun, 6 September 2009 16:20:00 +0000</pubDate> + <ttl>1800</ttl> + + <item> + <title>Example entry</title> + <description>Here is some text containing an interesting description.</description> + <link>http://www.example.com/blog/post/1</link> + <guid isPermaLink="false">7bd204c6-1655-4c27-aeee-53f933c5395f</guid> + <pubDate>Sun, 6 September 2009 16:20:00 +0000</pubDate> + </item> + +</channel> +</rss> diff --git a/www/blog/2019-01-21/index.html b/www/blog/2019-01-21/index.html index 628ac41..cd76e34 100644 --- a/www/blog/2019-01-21/index.html +++ b/www/blog/2019-01-21/index.html @@ -70,6 +70,12 @@ <div id='footer'> <i>January 21, 2019</i> </div> + <div id='copyright'> + © 2023 senders dot io - <a rel="license external noopener noreferrer" + target="_blank" + href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> + unless otherwise noted. + </div> </div> </body> </html> diff --git a/www/blog/2019-02-17/index.html b/www/blog/2019-02-17/index.html index 834fa51..5284b8c 100644 --- a/www/blog/2019-02-17/index.html +++ b/www/blog/2019-02-17/index.html @@ -173,6 +173,12 @@ <div id='footer'> <i>February 17, 2019</i> </div> + <div id='copyright'> + © 2023 senders dot io - <a rel="license external noopener noreferrer" + target="_blank" + href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> + unless otherwise noted. + </div> </div> </body> </html> diff --git a/www/blog/2019-12-09/index.html b/www/blog/2019-12-09/index.html index 639ac30..ccb5d0a 100644 --- a/www/blog/2019-12-09/index.html +++ b/www/blog/2019-12-09/index.html @@ -123,6 +123,12 @@ <div id='footer'> <i>December 09, 2019</i> </div> + <div id='copyright'> + © 2023 senders dot io - <a rel="license external noopener noreferrer" + target="_blank" + href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> + unless otherwise noted. + </div> </div> </body> </html> diff --git a/www/blog/2020-01-13/index.html b/www/blog/2020-01-13/index.html index f0c2ce8..7100ff6 100644 --- a/www/blog/2020-01-13/index.html +++ b/www/blog/2020-01-13/index.html @@ -70,6 +70,12 @@ <div id='footer'> <i>Updated and finally posted February 16, 2020</i> </div> + <div id='copyright'> + © 2023 senders dot io - <a rel="license external noopener noreferrer" + target="_blank" + href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> + unless otherwise noted. + </div> </div> </body> </html> diff --git a/www/blog/2020-12-17/index.html b/www/blog/2020-12-17/index.html index 2bf9d1b..0186b8f 100644 --- a/www/blog/2020-12-17/index.html +++ b/www/blog/2020-12-17/index.html @@ -164,6 +164,12 @@ <div id='footer'> <i>Posted: Decemeber 17, 2020. Update: December 19, 2020</i> </div> + <div id='copyright'> + © 2023 senders dot io - <a rel="license external noopener noreferrer" + target="_blank" + href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> + unless otherwise noted. + </div> </div> </body> </html> diff --git a/www/blog/2021-01-05/index.html b/www/blog/2021-01-05/index.html index 97b0261..db49793 100644 --- a/www/blog/2021-01-05/index.html +++ b/www/blog/2021-01-05/index.html @@ -119,6 +119,12 @@ <div id='footer'> <i>January 5, 2021</i> </div> + <div id='copyright'> + © 2023 senders dot io - <a rel="license external noopener noreferrer" + target="_blank" + href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> + unless otherwise noted. + </div> </div> </body> </html> diff --git a/www/blog/2022-11-06/index.html b/www/blog/2022-11-06/index.html index ffe0b88..c48a37b 100644 --- a/www/blog/2022-11-06/index.html +++ b/www/blog/2022-11-06/index.html @@ -237,6 +237,12 @@ <div id="footer"> <i>November 06, 2022</i> </div> + <div id='copyright'> + © 2023 senders dot io - <a rel="license external noopener noreferrer" + target="_blank" + href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> + unless otherwise noted. + </div> </div> </body> </html> diff --git a/www/blog/2022-12-05/index.html b/www/blog/2022-12-05/index.html new file mode 100644 index 0000000..34ba409 --- /dev/null +++ b/www/blog/2022-12-05/index.html @@ -0,0 +1,143 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="generator" + content="HTML Tidy for HTML5 for Linux version 5.6.0"> + <title>senders.io - CSS Themes Exist Now!?</title> + <link rel='stylesheet' + type='text/css' + href='/index.css'> + <meta name="viewport" + content="width=device-width, initial-scale=1"> +</head> +<body> + <div id='header'> + <a class='title' + href='/'>senders.io</a> + <nav> + <a href="/blog">blog</a> <a rel="external noopener noreferrer" + target="_blank" + href="https://github.com/s3nd3r5">github</a> <a rel= + "external noopener noreferrer" + target="_blank" + href="https://git.senders.io">cgit</a> <a rel= + "me external noopener noreferrer" + target="_blank" + href="https://mastodon.online/@senders">mastodon</a> + </nav> + </div> + <div id="body"> + <article> + <h2>CSS Themes Exist Now!?</h2> + <p>Yeah news to me too! Seems like according to <a rel= + "external noopener noreferrer" + target="_blank" + href= + "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#browser_compatibility"> + the MDN</a> it’s been supported since 2019 for most browsers and + supported by all by now.</p> + <p>This is so wild!</p> + <h3>Why is this cool?</h3> + <p>Well you may have noticed this is in dark mode now (if you set your + preferences to dark in your OS/Browser). But this is cool because it + means we’re no longer restricted to using Javascript and custom + preferences for websites.</p> + <p>I had assumed this existed because sites like GitHub were defaulting + to darkmode despite me never setting anything in like my profile + settings. But I just assumed based off of my legacy knowledge this was + some custom render trick using javascript.</p> + <h4>Still no JS!</h4> + <p>I keep this blog JS free! While not all pages under the senders.io + umbrella are javascript free - everything in www.senders.io (this blog) + will always be.</p> + <p>I try to keep that, not only for my sake, but for your sake too - a + javascript free blog means the priority is reading.</p> + <h3>Examples</h3> + <p>So I achieve darkmode in this blog by doing the following:</p> + <pre><code>/* default / light */ +:root { + --background: white; + --font: black; + --quote: #eee; + --link: #0303ee; + --linkv: #551a8b; + --linkf: #f02727; + --articleborder: #060606; + --tableborder: #aaa; + --tablehead: #ebcfff; + --tablez: #eee; +} +@media (prefers-color-scheme: dark) { + :root { + --background: #1e1e1e; + --font: #eee; + --quote: #444; + --link: #00d3d3; + --linkv: #cd78f4; + --linkf: #f02727; + --articleborder: #23ed9b; + --tableborder: #aaa; + --tablehead: #6f5a7e; + --tablez: #313131; + } +} +</code></pre> + <p>Essentially, I leverage <a rel="external noopener noreferrer" + target="_blank" + href= + "https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties"> + CSS Variables</a> to define the specific areas I set theme specific + colors (my nav bar is static regardless of dark/light mode for + example).</p> + <p>Then if the media preference is dark - I overwrite the variables with + my dark mode values!</p> + <p>Whats tricky is originally most of these values didn’t actually HAVE + values set - I relied on the system default for things like links and the + page colors in an effort to use minimum CSS as well.</p> + <p>I still feel like I am honoring that since I don’t have to duplicate + any actual CSS this way, I just have a lookup table of color values.</p> + <p>That being said my CSS file is still only about 3kB which is not so + bad. And I’ve actually covered most themed properties already - links, + tables, quotes.</p> + <h4>Toggling Themes</h4> + <p>Something else I found out during this experiment is you can actually + toggle the themes directly in your developer tooling. By opening your + devtools and going to Inspector (in firefox at least) there are two + buttons in the styles section “toggle light color scheme” and “toggle + dark color scheme” using a sun and moon icon.</p> + <p>This made testing VERY easy and actually is what I noticed to prompt + me into looking up if this was a standard CSS thing or not. So thanks + Mozilla!</p> + <h3>Conclusion</h3> + <p>Yeah if you’ve never realized this check out the MDN guides on both + variables (I didn’t realize these got put in the standard either!) and + themes!</p> + <ul> + <li>CSS Variables: <a rel="external noopener noreferrer" + target="_blank" + href= + "https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties"> + https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties</a> + </li> + <li>CSS Media prefers-color-scheme: <a rel= + "external noopener noreferrer" + target="_blank" + href= + "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme"> + https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme</a> + </li> + </ul> + </article> + <div id="footer"> + <i>December 05, 2022</i> + </div> + <div id='copyright'> + © 2023 senders dot io - <a rel="license external noopener noreferrer" + target="_blank" + href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> + unless otherwise noted. + </div> + </div> +</body> +</html> diff --git a/www/blog/bread/index.css b/www/blog/bread/index.css deleted file mode 100644 index a12af0f..0000000 --- a/www/blog/bread/index.css +++ /dev/null @@ -1,11 +0,0 @@ -table.bake-info th, td { - border: 1px dotted #eee; -} - -table.bake-info th { - background: #debfff; -} - -table.bake-info td { - background: #fffdeb; -} diff --git a/www/blog/bread/index.html b/www/blog/bread/index.html index f1ae9ac..22abb8d 100644 --- a/www/blog/bread/index.html +++ b/www/blog/bread/index.html @@ -8,9 +8,6 @@ <link rel='stylesheet' type='text/css' href='/index.css'> - <link rel='stylesheet' - type='text/css' - href='/blog/bread/index.css'> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> @@ -19,8 +16,15 @@ <a class='title' href='/'>senders.io</a> <nav> - <a href="/resume">Resume</a> <a href="/blog">Blog</a> <a href= - "https://github.com/s3nd3r5">Github</a> + <a href="/blog">blog</a> <a rel="external noopener noreferrer" + target="_blank" + href="https://github.com/s3nd3r5">github</a> <a rel= + "external noopener noreferrer" + target="_blank" + href="https://git.senders.io">cgit</a> <a rel= + "me external noopener noreferrer" + target="_blank" + href="https://mastodon.online/@senders">mastodon</a> </nav> </div> <div id='body'> @@ -143,6 +147,12 @@ <div id='footer'> <i>Updated February 17, 2020</i> </div> + <div id='copyright'> + © 2023 senders dot io - <a rel="license external noopener noreferrer" + target="_blank" + href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> + unless otherwise noted. + </div> </div> </body> </html> diff --git a/www/blog/index.html b/www/blog/index.html index f2766b8..d2252ea 100644 --- a/www/blog/index.html +++ b/www/blog/index.html @@ -33,6 +33,9 @@ <h1>Blog Index</h1> <ol> <li> + <a href="/blog/2022-12-05/">2022-12-05 - CSS Themes Exist Now!?</a> + </li> + <li> <a href="/blog/2022-11-06/">2022-11-06 - My Markdown -> HTML Setup</a> </li> @@ -64,6 +67,12 @@ </li> </ol> </article> + <div id='copyright'> + © 2023 senders dot io - <a rel="license external noopener noreferrer" + target="_blank" + href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> + unless otherwise noted. + </div> </div> </body> </html> diff --git a/www/blog/movies/index.html b/www/blog/movies/index.html index be7251e..9571fa3 100644 --- a/www/blog/movies/index.html +++ b/www/blog/movies/index.html @@ -48,6 +48,12 @@ <li>Tron</li> </ul> </article> + <div id='copyright'> + © 2023 senders dot io - <a rel="license external noopener noreferrer" + target="_blank" + href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> + unless otherwise noted. + </div> </div> </body> </html> diff --git a/www/dice/index.html b/www/dice/index.html index 10dcd84..ead129d 100644 --- a/www/dice/index.html +++ b/www/dice/index.html @@ -59,6 +59,13 @@ <article class='footer'> <i>This page uses basic javascript. Nothing external.</i> </article> + <div id='copyright'> + <small>© 2023 senders dot io - <a rel= + "license external noopener noreferrer" + target="_blank" + href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> + unless otherwise noted.</small> + </div> <script> var numRolls = 0; diff --git a/www/error.html b/www/error.html index 4e3a784..276d4ef 100644 --- a/www/error.html +++ b/www/error.html @@ -16,12 +16,28 @@ <a class='title' href='/'>senders.io</a> <nav> - <a href="/resume">Resume</a> <a href="/blog">Blog</a> <a href= - "https://github.com/s3nd3r5">Github</a> + <a href="/blog">blog</a> <a rel="external noopener noreferrer" + target="_blank" + href="https://github.com/s3nd3r5">github</a> <a rel= + "external noopener noreferrer" + target="_blank" + href="https://git.senders.io">cgit</a> <a rel= + "me external noopener noreferrer" + target="_blank" + href="https://mastodon.online/@senders">mastodon</a> </nav> </div> <div id='body'> - <h1>Oops!</h1>Page requested not found. + <article> + <h1>Oops!</h1> + <p>Page requested not found.</p> + </article> + <div id='copyright'> + © 2023 senders dot io - <a rel="license external noopener noreferrer" + target="_blank" + href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> + unless otherwise noted. + </div> </div> </body> </html> diff --git a/www/index.css b/www/index.css index 73a4ae4..21baa50 100644 --- a/www/index.css +++ b/www/index.css @@ -1,14 +1,69 @@ -html,body { margin: 0; font-family: sans-serif; } -#body { margin: 16px 10%; } -#body article { border-bottom: 1px solid #060606; } +/* default / light */ +:root { + --background: white; + --font: black; + --quote: #eee; + --link: #0303ee; + --linkv: #551a8b; + --linkf: #f02727; + --articleborder: #060606; + --tableborder: #aaa; + --tablehead: #ebcfff; + --tablez: #eee; +} +@media (prefers-color-scheme: dark) { + :root { + --background: #1e1e1e; + --font: #eee; + --quote: #444; + --link: #00d3d3; + --linkv: #cd78f4; + --linkf: #f02727; + --articleborder: #23ed9b; + --tableborder: #aaa; + --tablehead: #6f5a7e; + --tablez: #313131; + } +} + +html,body { + margin: 0; + font-family: sans-serif; + background-color: var(--background); + color: var(--font); +} +a { + color: var(--link); +} +a:visited { + color: var(--linkv); +} +a:focus { + color: var(--linkf); +} +#body { + margin: 16px auto; + max-width: 700px; +} +@media only screen and (max-width: 800px) { + #body { + margin: 16px 10%; + max-width: 700px; + } +} + +#body article { + border-bottom: 1px solid var(--articleborder); +} #body article:last { border-bottom: none; } -#body table { border-collapse: collapse; border: 1px solid #aaa; } -#body table td, #body table th { border: 1px solid #aaa; padding: 2px 8px; } -#body table tr:nth-child(even) { background-color: #eee; } +#body table { border-collapse: collapse; border: 1px solid var(--tableborder); } +#body table thead tr { background-color: var(--tablehead); } +#body table td, #body table th { border: 1px solid var(--tableborder); padding: 2px 8px; } +#body table tr:nth-child(even) { background-color: var(--tablez); } #body ul.compact { columns: 2; } #body blockquote { - background-color: #eee; + background-color: var(--quote); border-radius: 2px; padding: 4px; } @@ -51,22 +106,29 @@ html,body { margin: 0; font-family: sans-serif; } color:inherit; text-decoration: none; } #footer { - font-size: 0.75em; + font-size: 0.90em; float:right; } +#copyright { + font-size: 0.80em; + float:left; +} + article .footer { - font-size: 0.75em; + font-size: 0.90em; float:right; } .footnote { + /* always shift the footnotes a bit below whats above */ + margin: 24px 0 0 0; font-size: 0.75em; } code { font-family: monospace; - background-color: #eee; + background-color: var(--quote); padding: 4px 4px; border-radius: 5px 5px; display: inline-block; @@ -88,5 +150,4 @@ code.inline { height: auto; } - #tutorial { margin: 2% } diff --git a/www/index.html b/www/index.html index c19836d..c4c1688 100644 --- a/www/index.html +++ b/www/index.html @@ -34,7 +34,31 @@ like uploading. A lot of it comes in the form of micro-blogs and stream of consciousness ramblings.</p> </article> - <article id='homepage-post'> + <article> + <h2>Recent Post - 2022-12-05</h2> + <h3>CSS Themes Exist Now!?</h3> + <p>Yeah news to me too! Seems like according to <a rel= + "external noopener noreferrer" + target="_blank" + href= + "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#browser_compatibility"> + the MDN</a> it’s been supported since 2019 for most browsers and + supported by all by now.</p> + <p>This is so wild!</p> + <h4>Why is this cool?</h4> + <p>Well you may have noticed this is in dark mode now (if you set your + preferences to dark in your OS/Browser). But this is cool because it + means we’re no longer restricted to using Javascript and custom + preferences for websites.</p> + <p>I had assumed this existed because sites like GitHub were defaulting + to darkmode despite me never setting anything in like my profile + settings. But I just assumed based off of my legacy knowledge this was + some custom render trick using javascript.</p> + <div class='footer'> + <a href='/blog/2022-12-05'>Continue reading...</a> + </div> + </article> + <article> <h2>Recent Post - 2022-11-06</h2> <h3>My Markdown -> HTML Setup</h3> <p>A common way I see a lot of people blog, especially micro-blog, is in @@ -65,22 +89,18 @@ <a href='/blog/2022-11-06'>Continue reading...</a> </div> </article> - <article> - <h2>Bread</h2> - <p><a href='/blog/bread/'>Bread blog!</a> - I started blogging about my - bakes in the hopes of learning what I did right/wrong and perfecting my - bread. This is a different format than the other blog posts, it's a - single page containing, long form, all the different entries.</p> - <div class='footer'> - <a href='/blog/bread/#2020-02-17'>Last updated - 2020-02-17</a> - </div> - </article> <div class="footnote"> <p>The site source is available at <a rel="noopener noreferrer external" target="_blank" href= "https://git.senders.io/senders/senders-io">git.senders.io/senders/senders-io</a>.</p> </div> + <div id='copyright'> + © 2023 senders dot io - <a rel="license external noopener noreferrer" + target="_blank" + href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> + unless otherwise noted. + </div> </div> </body> </html> diff --git a/www/resume/index.html b/www/resume/index.html deleted file mode 100644 index 69b2452..0000000 --- a/www/resume/index.html +++ /dev/null @@ -1,28 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <meta name="generator" - content="HTML Tidy for HTML5 for Linux version 5.6.0"> - <title>senders.io - Resume</title> - <link rel='stylesheet' - type='text/css' - href='/index.css'> - <meta name="viewport" - content="width=device-width, initial-scale=1"> -</head> -<body> - <div id='header'> - <a class='title' - href='/'>senders.io</a> - <nav> - <a href="/">Home</a> <a href="/blog">Blog</a> <a href= - "https://github.com/s3nd3r5">Github</a> - </nav> - </div> - <div id='body'> - For my resume feel free to contact me at <code class='inline'>steph AT - senders.io</code> - </div> -</body> -</html> diff --git a/www/wc3.html b/www/wc3.html deleted file mode 100644 index 2e01c97..0000000 --- a/www/wc3.html +++ /dev/null @@ -1,156 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta name="generator" - content="HTML Tidy for HTML5 for Linux version 5.6.0"> - <meta charset="utf-8"> - <link rel='stylesheet' - type='text/css' - href='/index.css'> - <meta name="viewport" - content="width=device-width, initial-scale=1"> - <title>Senders' Wishlist</title> - <style> - img { border: 2px solid #eee; } - body { - width: 800px; - } - .small { font-size: 0.75em; } - </style> -</head> -<body id='wishlist'> - <h1>Warcraft 3 Setup Guide</h1> - <h2 id='gamesetup'>Game Setup</h2> - <h3 id='download'>Downloading the game</h3>Download the <code class= - 'inline'>wc3.zip</code>. You can download it from <a href= - 'https://cdn.senders.io/blobs/wc3.zip' - target='_blank'>https://cdn.senders.io/blobs/wc3.zip</a> - <h3 id='unzip'>Extract the game contents</h3>Unzip the game contents. If you - can't unzip it you can download 7Zip from: <a href= - 'https://www.7-zip.org/a/7z1900-x64.exe'>https://www.7-zip.org/</a>. - <div> - <span class='scaled-half'><img src='/imgs/wc3/unzip.png' - alt='7Zip Context Menu'></span><br> - <i class='small'>Hover to Zoom</i> - </div> - <div> - <span class='scaled-half'><img src='/imgs/wc3/unzipped.png' - alt='Unzipped Folder Contents'></span><br> - <i class='small'>Hover to Zoom</i> - </div> - <h3 id='launch'>Launch the game</h3>Open the folder you unzipped into and - open <code class='inline'>Warcarft III 1.31.1\x86_64\Warcraft III.exe</code>. - This will launch the game. - <div> - <span class='scaled-half'><img src='/imgs/wc3/launch.png' - alt='Game Launcher Exe'></span><br> - <i class='small'>Hover to Zoom</i> - </div> - <h3 id='cdkey'>Active your CD Key</h3>The game will prompt with a launcher - for battle.net or CD Key. Choose CD Key and type in the provided CD Key. Your - CD Key can be found in <code class='inline'>CDKEYS.jpg</code> back in the - main folder. - <div> - <span class='scaled-half'><img src='/imgs/wc3/cdkey.png' - alt='CD Key file location'></span><br> - <i class='small'>Hover to Zoom</i> - </div> - <h4>Warning! Do Not Update</h4>Once you launch the game it will prompt you to - update: <strong>DO NOT UPDATE THE GAME</strong> . After clicking No it may - ask you again on launch again (sometimes). Just keep clicking NO. - <h3 id='setupdone'>Done!</h3>Now you've setup Warcraft 3. Next you need - to setup a virtual LAN - <h2 id='lansetup'>Setting up a Virtual Lan</h2>In this section I'll show - a guide for setting up <a href='https://www.zerotier.com/'>ZeroTier</a>. - <h3 id='adminnotice'>Before you continue</h3>Only one person - <strong>needs</strong> to setup a network. Everyon else can join an existing - network through the network's creator (<strong>admin</strong>). And once - you've been authorized by the admin you can join/unjoin as you please. - The admin doesn't even need to be in the same game / online. - <h3>Admin | Network Setup</h3>If you want to be the network admin you can - create a network by first creating an account with ZeroTier. You'll need - to supply a verifiable email but that is it. Here is a quick summary of how - to setup. A full guide can be found at <a href= - 'https://zerotier.atlassian.net/wiki/spaces/SD/pages/8454145/Getting+Started+with+ZeroTier'> - Zero Tiers own setup guide</a> - <div> - <span class='scaled-half'><img src='/imgs/wc3/create-network.png' - alt='Create a Network'></span><br> - <i class='small'>Hover to Zoom</i> - </div> - <h4>Your Network ID</h4>Your network ID will be present on the network page. - The example netowrk here is: <code class='inline'>17d709436c634b2b</code>. - You will share this with the members. - <h4>Admin | Network Settings</h4>You shouldn't have to do anything - custom, just authorize the users who join your network. This can be done by - either adding them directly, or checking the authorize box. You can add them - from the settings menu at the bottom: - <div> - <span class='scaled-half'><img src='/imgs/wc3/add-remove.png' - alt='Add remove users section'></span><br> - <i class='small'>Hover to Zoom</i> - </div> - <h3>Member | Download</h3><i>Note Admins must also join their own - network!</i> Member's first must download the application: <a href= - 'https://www.zerotier.com/download/'>Zero Tier 1</a>. - <h3>Member | ZeroTier UI</h3>The ZeroTier UI is just a system-tray icon. Just - right click to perfom any of the actions listed below. (It's the icon - that shares the icon from the website!) - <div> - <span class='scaled-half'><img src='/imgs/wc3/tray.png' - alt='ZeroTier Tray Icon'></span><br> - <i class='small'>Hover to Zoom</i> - </div> - <div> - <span class='scaled-half'><img src='/imgs/wc3/menu.png' - alt='ZeroTier Tray Menu'></span><br> - <i class='small'>Hover to Zoom</i> - </div>You can right click the tray-icon to open the menu. Here you will see - your Node Id. Example: <code class='inline'>Node ID: 2d213b67f2</code> - <h4>Member | Add network</h4>To join simply paste the network ID in the form. - You can get the ID from the Network Admin. - <div> - <span class='scaled-half'><img src='/imgs/wc3/join.png' - alt='Join prompt'></span><br> - <i class='small'>Hover to Zoom</i> - </div> - <h4>Admin | Authorize the Member</h4>The Admin will then need your - <strong>Node ID</strong> and will authorize you in their network settings. - <div> - <span class='scaled-half'><img src='/imgs/wc3/members-view.png' - alt='Members View'></span><br> - <i class='small'>Hover to Zoom</i> - </div> - <h3>Member | Reboot</h3>Now that you've connected and setup I recommend - rebooting here. You can also reboot upon installation too to be safe. - <h3>Member | Verify connectivity</h3>You can open the menu and click - "Show Network" which will show you your connected networks. You - should see <code class='inline'>Status: OK</code>. You can click the connect - checkbox here to connect/disconnect. Or click the network from the menu - directly. - <div> - <span class='scaled-half'><img src='/imgs/wc3/connection.png' - alt='Connection View'><br> - <i class='small'>Hover to Zoom</i></span> - </div> - <h3><span class='scaled-half'>Admin | Verify everyone is - connected</span></h3><span class='scaled-half'>You can verify the connected - nodes by looking at the network view under Members. You should see Last Seen - "ONLINE" and their Physical IP - this will mean they're - connected successfully. You can add names and descriptions to help manage who - is who in case someone loses connectivity.</span> - <h2><span class='scaled-half'>Creating a LAN Game</span></h2><span class= - 'scaled-half'>At this point you should be able to create a LAN game. It will - ask you to install Bonjour services. Click yes. The game may hang for a bit - while this happens, that is normal. Authorize the network firewall popup if - it does.</span> - <h2><span class='scaled-half'>Troubleshooting</span></h2><span class= - 'scaled-half'>The network Admin can troubleshoot any connectivity issues by - checking if the Member's are present in their network settings.</span> - <h3><span class='scaled-half'>Status: - Request_Configuration</span></h3><span class='scaled-half'>If you are stuck - in this status you can delete the network. Reboot. Then re-add the network - and have the admin re-authorize you if necessary. This may take a few minutes - before you're IP appears in the network settings for the admin.</span> -</body> -</html> diff --git a/www/wishlist.html b/www/wishlist.html index cb6fb6a..6c80cb1 100644 --- a/www/wishlist.html +++ b/www/wishlist.html @@ -16,10 +16,15 @@ <a class='title' href='/'>senders.io</a> <nav> - <a href="/resume">Resume</a> <a href="/blog">Blog</a> <a rel= - "noopener noreferrer external" + <a href="/blog">blog</a> <a rel="external noopener noreferrer" target="_blank" - href="https://github.com/s3nd3r5">Github</a> + href="https://github.com/s3nd3r5">github</a> <a rel= + "external noopener noreferrer" + target="_blank" + href="https://git.senders.io">cgit</a> <a rel= + "me external noopener noreferrer" + target="_blank" + href="https://mastodon.online/@senders">mastodon</a> </nav> </div> <div id="body" @@ -225,13 +230,21 @@ hold some overflow for my records like <a rel= "external noopener noreferrer" target="_blank" - href="https://www.etsy.com/market/record_crate">found here on - etsy</a></p> + href="https://www.etsy.com/market/record_crate">found here on etsy</a>. + Ideally it would be something that can hold 10+ records for storage - + but even something that displays a single record (like what is currently + playing) is needed. And probably more within the price limit.</p> <p>Interesting Fountain Pen ink shades: <a rel= "external noopener noreferrer" target="_blank" href="https://www.jetpens.com/Fountain-Pen-Inks/ct/3250">Jetpens Store</a></p> </div> + <div id='copyright'> + © 2023 senders dot io - <a rel="license external noopener noreferrer" + target="_blank" + href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> + unless otherwise noted. + </div> </body> </html> |