diff options
Diffstat (limited to 'mds/blog')
| -rw-r--r-- | mds/blog/blog-index.md | 2 | ||||
| -rw-r--r-- | mds/blog/css-themes-exist.md | 78 | ||||
| -rw-r--r-- | mds/blog/mastodon-and-twitter.md | 43 |
3 files changed, 123 insertions, 0 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 |