This week we look at the danger of KOSA, a new dark matter telescope, and the dangers of climate change.
<h2>Link Blast</h2>
<h3>👨🏼‍💻 Software Development &amp; Design</h3>
<a href="https://heather-buchel.com/blog/2023/07/just-normal-web-things/">Just normal web things.</a> - Heather Buchel
<a href="https://catskull.net/html.html">I&#39;m betting on HTML</a> - catskull.net
<a href="https://blog.scottlogic.com/2023/07/21/seven-things-i-wish-i-knew-when-i-started-as-a-software-developer.html">Seven Things I Wish I Knew When I Started as a Software Developer</a> - Beth Pritchard
<a href="https://www.builder.io/blog/tailwind-css-tips-and-tricks">Tailwind CSS Tips and Tricks Worth Knowing</a> - Yoav Ganbar
<a href="https://github.blog/2023-07-24-github-repository-rules-are-now-generally-available/">GitHub Repository Rules are now generally available</a> - Patrick Knight
<a href="https://code.visualstudio.com/blogs/2023/07/20/mangling-vscode">Shrinking VS Code with name mangling</a> - Matt Bierner
<hr>
<h3>🖥 Technology &amp; the Internet</h3>
<a href="https://www.theverge.com/2023/8/4/23819578/kosa-kids-online-safety-act-privacy-danger">How the Kids Online Safety Act puts us all at risk</a> - Casey Newton
<hr>
<h3>🔬 Science</h3>
<a href="https://www.politico.eu/article/ai-improves-breast-cancer-detection-rate-20-percent-swedish-study/">AI improves breast cancer detection rate by 20 percent</a> - Ashleigh Furlong
<a href="https://ntrs.nasa.gov/api/citations/20230003852/downloads/NEA_HSF_2023_PDC.pdf">Prospects for Future Human Space Flight Missions to Near-Earth Asteroids</a> - NASA
<a href="https://www.theverge.com/2023/7/31/23814266/euclid-space-telescope-dark-matter-energy-european-space-agency-nasa-max-planck-institute">Europe’s dark matter-hunting space telescope nabs its first test images</a> - Wes Davis
<a href="https://www.theverge.com/2023/7/31/23814003/ocean-heatwave-florida-keys-coral-reef-rescue">A killer ocean heatwave is decimating Florida’s corals</a> - Justine Calma
<a href="https://www.theregister.com/2023/07/31/nasa_mistakenly_disconnects_voyager_2/">NASA mistakenly severs communication to Voyager 2</a> - Laura Dobberstein
<a href="https://www.scientificamerican.com/article/how-we-can-adapt-to-live-with-extreme-heat/">How We Can Adapt to Live with Extreme Heat</a> - Daniel Cusick
<hr>
<h3>🎮 Gaming</h3>
<a href="https://arstechnica.com/gaming/2023/08/microsoft-now-offers-xbox-controller-parts-manuals-and-video-repair-guides/">Microsoft keeps pushing toward repairability, now with Xbox controller parts</a> - Kevin Purdy
<a href="https://arstechnica.com/gaming/2023/07/report-nintendos-next-console-ships-late-2024-still-supports-cartridges/">Nintendo’s Switch successor is already in third-party devs’ hands, report claims</a> - Samuel Axon
<hr>
<h3>📈 Business &amp; Finance</h3>
<a href="https://fortune.com/2023/08/01/research-damaging-results-mandated-return-to-office-worse-than-we-thought-rto-remote-work-careers-leadership-gleb-tsipursky/">We’re now finding out the damaging results of the mandated return to the office–and it’s worse than we thought</a> - Gleb Tsipursky
<a href="https://www.economist.com/business/2023/07/20/startups-are-producing-real-dairy-without-a-cow-in-sight">Startups are producing real dairy without a cow in sight</a> - The Economist
<a href="https://www.marketplace.org/2023/07/31/new-georgia-reactor-nuclear-power/">New Georgia reactor is a test case for nuclear power</a> - Kimberly Adams
<hr>
<h3>🎧 Podcasts</h3>
<a href="https://www.dancarlin.com/product/hardcore-history-69-twilight-of-the-aesir/">Hardcore History #69: Twilight of the Æsir</a>
<a href="https://shoptalkshow.com/553/">ShopTalk #553: TypeScript, DX, GripeScript, and Astro v2 with Fred Schott</a>
<a href="http://www.wtfpod.com/podcast/episode-1411-michelle-yeoh">WTF with Marc Maron #1411: Michelle Yeoh</a>
<a href="https://www.radiolab.org/podcast/golden-goose">Radiolab: Golden Goose</a>
<a href="https://www.techdirt.com/2023/08/01/techdirt-podcast-episode-360-can-interoperability-be-mandated/">Techdirt Podcast #360: Can Interoperability Be Mandated?</a>
<a href="https://99percentinvisible.org/episode/the-chinatown-punk-wars/">99% Invisible #525: The Chinatown Punk Wars</a>
<a href="https://www.techdirt.com/2023/07/18/techdirt-podcast-episode-358-social-media-in-chaos/">Techdirt Podcast #358: Social Media In Chaos</a>
<hr>
🎵 A Song to Leave You With
<h4>The Wonder Years - You In January (Acoustic)</h4>
<YouTubeEmbed id="vC_XwwhLC0Q" title="The Wonder Years - You In January (Acoustic)" />

This week we look at the danger of KOSA, a new dark matter telescope, and the dangers of climate change.

Reading Log - August 4, 2023 (#38)

In case you haven&#39;t noticed, I decided to add some color and font themes to my blog.
If you click the little gear icon in the header, a bar will drop down where you&#39;ll be given the choice to choose the accent color and the font to use. I decided to add this to be a little whimsical as well as to play around with my site because it&#39;s my site and I can.
To accomplish this, I take advantage of CSS variables and local storage. By default when you first come to my site it sets the light/dark theme based on your system/browser light dark preference. I think it&#39;s important for the user to be able to decide whether they want light or dark outside just their system settings, so I also offer the ability to override it by saving the value in local storage to retrieve the next time they visit. Local storage will always override system settings. I did the same thing for colors and fonts except I default them to green and a sans-serif font.
I have 2 helper functions to help me to do this.
<pre><code class="language-typescript">export const saveToLocalStorage = (key: string, value: string): void =&gt; {
 if (typeof window !== &#39;undefined&#39;) {
 window.localStorage.setItem(key, value);
 }
};

export const retrieveFromLocalStorage = (key: string, isJson = false): string|unknown =&gt; {
 if (typeof window !== &#39;undefined&#39;) {
 const value = window.localStorage.getItem(key);

 if (value) {
 return isJson ? JSON.parse(value) : value;
 }
 }

 return null;
};
</code></pre>
Since my blog runs on Next.js, server side rendering does not contain the <code>window</code> object so I have to first check to make sure the <code>window</code> object exists. Other than that, the functions are simply wrappers for the localStorage object. The only slight enhancement is the ability to tell the retriever to parse the return as JSON if the expected value is JSON.
When you click one of the color or font buttons, the code will save the value chosen to local storage for retrieval the next time you visit the site.
In terms of the CSS, I take advantage of CSS variables
<pre><code class="language-css">:root {
 --primary-color-1: hsl(144, 100%, 15%);
 --primary-color-2: hsl(142, 68%, 29%);
 --primary-color-3: hsl(124, 95%, 32%);
 --sans-serif: WorkSans, Helvetica, Arial, sans-serif;
 --serif: Petrona, Georgia, &#39;Times New Roman&#39;, serif;
 --monospaced: SourceCodePro, &#39;Courier New&#39;;
 --font: var(--sans-serif);
}
</code></pre>
This sets the 3 primary colors to the greens for the default view as well as the default font. To go along with saving to local storage, I also add a custom data attribute <code>data-color-theme</code> and <code>data-font-theme</code> to the <code>html</code> element on the page. That allows me to override the root CSS variables based on what the attributes are
<pre><code class="language-css">[data-color-theme*=&#39;purple&#39;] {
 --primary-color-1: hsl(301, 91%, 40%);
 --primary-color-2: hsl(301, 77%, 46%);
 --primary-color-3: hsl(298, 100%, 36%);
}

[data-font-theme*=&#39;serif&#39;] {
 --font: var(--serif);
}
</code></pre>
The above CSS sets the primary colors to purple when the <code>data-color-theme</code> attribute is set to purple and sets the font to use the serif font if the <code>data-font-theme</code> attribute is set to serif.
Now the one thing I ran into with the colors is contrast. Colors that contrast well on a light background don&#39;t always look good on a dark background. So I also take into account the color theme attribute as well.
<pre><code class="language-css">[data-color-theme*=&#39;purple&#39;] {
 --primary-color-1: hsl(301, 91%, 40%);
 --primary-color-2: hsl(301, 77%, 46%);
 --primary-color-3: hsl(298, 100%, 36%);
}

[data-theme*=&#39;dark&#39;][data-color-theme*=&#39;purple&#39;] {
 --primary-color-1: hsl(301, 99%, 65%);
 --primary-color-2: hsl(301 72% 61%);
 --primary-color-3: hsl(298 100% 79%);
}
</code></pre>
The top block is exactly the same as the previous CSS block, but the bottom is different. The bottom will also look to see if the <code>data-theme</code> attribute is set to <code>dark</code>, then it should override the top block in favor of the colors that will contrast better on a black background. Accessibility is important!
You can view the full CSS file <a href="https://github.com/kpwags/kpwags.com/blob/main/styles/kpwags.css">here</a>.
The final piece tying it all together is my <code>useTheme</code> hook.
<pre><code class="language-typescript">interface UseThemeReturn {
 theme: Theme;
 color: ColorTheme;
 font: FontTheme;
 themeLoaded: boolean;
 getCurrentTheme: () =&gt; Theme;
 getCurrentColor: () =&gt; ColorTheme;
 getCurrentFont: () =&gt; FontTheme;
 changeTheme: (t: Theme) =&gt; void;
 changeColor: (c: ColorTheme) =&gt; void;
 changeFont: (f: FontTheme) =&gt; void;
}

export const useTheme = (): UseThemeReturn =&gt; {
 const [theme, setTheme] = useState&lt;Theme&gt;(&#39;light&#39;);
 const [color, setColor] = useState&lt;ColorTheme&gt;(&#39;green&#39;);
 const [font, setFont] = useState&lt;FontTheme&gt;(&#39;sans&#39;);
 const [themeLoaded, setThemeLoaded] = useState(false);

 const getPreferredColorMode = (): Theme =&gt; {
 if (typeof window !== &#39;undefined&#39;) {
 const prefferredMode = window.matchMedia(&#39;(prefers-color-scheme: dark)&#39;);

 if (prefferredMode.matches) {
 return &#39;dark&#39;;
 }
 }

 return &#39;light&#39;;
 };

 const changeTheme = (t: Theme) =&gt; {
 saveToLocalStorage(&#39;theme&#39;, t);
 document.documentElement.setAttribute(&#39;data-theme&#39;, t);
 setTheme(t);
 };

 const changeColor = (c: ColorTheme) =&gt; {
 saveToLocalStorage(&#39;color&#39;, c);
 document.documentElement.setAttribute(&#39;data-color-theme&#39;, c);
 setColor(c);
 };

 const changeFont = (f: FontTheme) =&gt; {
 saveToLocalStorage(&#39;font&#39;, f);
 document.documentElement.setAttribute(&#39;data-font-theme&#39;, f);
 setFont(f);
 };

 const getCurrentTheme = (): Theme =&gt; {
 const localTheme = retrieveFromLocalStorage(&#39;theme&#39;) as Theme;

 if (localTheme) {
 return localTheme;
 }

 return getPreferredColorMode();
 };

 const getCurrentColor = (): ColorTheme =&gt; {
 const localStorageColor = retrieveFromLocalStorage(&#39;color&#39;) as ColorTheme;

 if (localStorageColor) {
 return localStorageColor;
 }

 return color;
 };

 const getCurrentFont = (): FontTheme =&gt; {
 const localStorageFont = retrieveFromLocalStorage(&#39;font&#39;) as FontTheme;

 if (localStorageFont) {
 return localStorageFont;
 }

 return font;
 };

 useEffect(() =&gt; {
 const localTheme = retrieveFromLocalStorage(&#39;theme&#39;) as Theme;
 const selectedColor = retrieveFromLocalStorage(&#39;color&#39;) as ColorTheme;
 const selectedFont = retrieveFromLocalStorage(&#39;font&#39;) as FontTheme;

 if (localTheme) {
 setTheme(localTheme);
 document.documentElement.setAttribute(&#39;data-theme&#39;, localTheme);
 } else {
 setTheme(getPreferredColorMode());
 document.documentElement.setAttribute(&#39;data-theme&#39;, getPreferredColorMode());
 }

 if (selectedColor) {
 setColor(selectedColor);
 document.documentElement.setAttribute(&#39;data-color-theme&#39;, selectedColor);
 } else {
 setColor(&#39;green&#39;);
 document.documentElement.setAttribute(&#39;data-color-theme&#39;, &#39;green&#39;);
 }

 if (selectedFont) {
 setFont(selectedFont);
 document.documentElement.setAttribute(&#39;data-font-theme&#39;, selectedFont);
 } else {
 setFont(&#39;sans&#39;);
 document.documentElement.setAttribute(&#39;data-font-theme&#39;, &#39;sans&#39;);
 }

 setThemeLoaded(true);
 }, []);

 return {
 theme,
 color,
 font,
 themeLoaded,
 getCurrentTheme,
 getCurrentColor,
 getCurrentFont,
 changeTheme,
 changeColor,
 changeFont,
 };
};
</code></pre>
Don&#39;t let all the code scare you. This code is run when the site is loaded and will look at local storage for light and dark, color, and font and then apply the appropriate themes. You can view the full source code for the <code>useTheme</code> Hook <a href="https://github.com/kpwags/kpwags.com/blob/main/hooks/useTheme.ts">here</a>
So that&#39;s basically how I went about adding themes. It wasn&#39;t super difficult and I&#39;m happy with the results.

RSS Feeds

Everything

Blog Posts

Reading Logs

Book Notes

Choose Color

Posts Tagged
HTML

Reading Log - August 4, 2023 (#38)

Adding Themes

RSS Feeds

Everything

Blog Posts

Reading Logs

Book Notes

Choose Color

Posts TaggedHTML

Reading Log - August 4, 2023 (#38)

Adding Themes

Posts Tagged
HTML