<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Pascal Riesinger</title>
    <link>https://riesinger.dev/</link>
    <description>Recent content on Pascal Riesinger</description>
    <generator>Hugo</generator>
    <language>en-US</language>
    <lastBuildDate>Sun, 12 Jan 2025 15:47:47 +0100</lastBuildDate>
    <atom:link href="https://riesinger.dev/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>Building a RatRig V-Core 4</title>
      <link>https://riesinger.dev/posts/building-ratrig-v-core-4/</link>
      <pubDate>Sun, 12 Jan 2025 15:47:47 +0100</pubDate>
      <guid>https://riesinger.dev/posts/building-ratrig-v-core-4/</guid>
      <description>&lt;p&gt;This is my build log for the &lt;a href=&#34;https://ratrig.com/3d-printers/rat-rig-v-core-4.html&#34;&gt;RatRig V-Core 4&lt;/a&gt;, a high-end IDEX CoreXY 3D printer that I&amp;rsquo;ve been wanting to build for a while. I&amp;rsquo;m documenting the experience while it&amp;rsquo;s still fresh in my mind, since there are definitely some things that could be improved in the build process.&lt;/p&gt;&#xA;&lt;p&gt;Overall, I really like both the printer and the build experience. The engineering is solid and the end result is impressive, especially if you&amp;rsquo;re coming from an Ender 3 S1 Pro like me. However, there are some issues with the instruction ordering and clarity that RatRig could address. The good news is that they actively listen to feedback and update their documentation regularly.&lt;/p&gt;</description>
    </item>
    <item>
      <title>Cheapshot</title>
      <link>https://riesinger.dev/projects/cheapshot/</link>
      <pubDate>Wed, 04 Dec 2024 00:00:00 +0000</pubDate>
      <guid>https://riesinger.dev/projects/cheapshot/</guid>
      <description>A &amp;ldquo;cheap&amp;rdquo; but fun camera rig</description>
    </item>
    <item>
      <title>Exploring Notion&#39;s API</title>
      <link>https://riesinger.dev/posts/exploring-notions-api/</link>
      <pubDate>Fri, 04 Aug 2023 17:52:00 +0200</pubDate>
      <guid>https://riesinger.dev/posts/exploring-notions-api/</guid>
      <description>&lt;p&gt;You can consider this post as sort of a public notebook. I started this since&#xA;I&amp;rsquo;ve recently started dabbling with &lt;a href=&#34;https://notion.so&#34;&gt;Notion&lt;/a&gt;&amp;rsquo;s API and&#xA;stumbled across some things I wanted to take note of, should I ever run into&#xA;them again.&lt;/p&gt;&#xA;&lt;h2 id=&#34;content-type-is-important&#34;&gt;&lt;code&gt;Content-Type&lt;/code&gt; is important&lt;/h2&gt;&#xA;&lt;p&gt;If you interact with Notion&amp;rsquo;s API, &lt;strong&gt;never&lt;/strong&gt; forget to set the &lt;code&gt;Content-Type&lt;/code&gt;&#xA;header to &lt;code&gt;application/json&lt;/code&gt;. Otherwise you&amp;rsquo;ll get errors that you&amp;rsquo;ll spend&#xA;hours debugging. I, for example called the&#xA;&lt;code&gt;https://api.notion.com/v1/oauth/token&lt;/code&gt; endpoint to exchange an auth code for a&#xA;more permanent OAuth token.&lt;/p&gt;</description>
    </item>
    <item>
      <title>plausible-exporter</title>
      <link>https://riesinger.dev/projects/plausible-exporter/</link>
      <pubDate>Tue, 01 Aug 2023 00:00:00 +0000</pubDate>
      <guid>https://riesinger.dev/projects/plausible-exporter/</guid>
      <description>A prometheus metrics exporter for Plausible Analytics</description>
    </item>
    <item>
      <title>Clearing the DNS cache on macOS</title>
      <link>https://riesinger.dev/posts/clearing-dns-cache-macos/</link>
      <pubDate>Sun, 24 Jul 2022 16:10:07 +0200</pubDate>
      <guid>https://riesinger.dev/posts/clearing-dns-cache-macos/</guid>
      <description>&lt;p&gt;You&amp;rsquo;re debugging some DNS changes in your network and Safari (or &lt;code&gt;curl&lt;/code&gt; / any other tool) keeps sending requests to an old DNS entry?&#xA;With these commands, you can clear your system&amp;rsquo;s DNS cache:&lt;/p&gt;&#xA;&lt;table&gt;&#xA;  &lt;thead&gt;&#xA;      &lt;tr&gt;&#xA;          &lt;th&gt;macOS version&lt;/th&gt;&#xA;          &lt;th&gt;command&lt;/th&gt;&#xA;      &lt;/tr&gt;&#xA;  &lt;/thead&gt;&#xA;  &lt;tbody&gt;&#xA;      &lt;tr&gt;&#xA;          &lt;td&gt;12 (Monterey)&lt;/td&gt;&#xA;          &lt;td&gt;&lt;code&gt;sudo dscacheutil -flushcache; sudo killall -HUP mDNSResponder&lt;/code&gt;&lt;/td&gt;&#xA;      &lt;/tr&gt;&#xA;      &lt;tr&gt;&#xA;          &lt;td&gt;11 (Big Sur)&lt;/td&gt;&#xA;          &lt;td&gt;&lt;code&gt;sudo dscacheutil -flushcache; sudo killall -HUP mDNSResponder&lt;/code&gt;&lt;/td&gt;&#xA;      &lt;/tr&gt;&#xA;      &lt;tr&gt;&#xA;          &lt;td&gt;10.15 (Catalina)&lt;/td&gt;&#xA;          &lt;td&gt;&lt;code&gt;sudo dscacheutil -flushcache; sudo killall -HUP mDNSResponder&lt;/code&gt;&lt;/td&gt;&#xA;      &lt;/tr&gt;&#xA;      &lt;tr&gt;&#xA;          &lt;td&gt;10.14 (Mojave)&lt;/td&gt;&#xA;          &lt;td&gt;&lt;code&gt;sudo killall -HUP mDNSResponder&lt;/code&gt;&lt;/td&gt;&#xA;      &lt;/tr&gt;&#xA;      &lt;tr&gt;&#xA;          &lt;td&gt;10.13 (High Sierra)&lt;/td&gt;&#xA;          &lt;td&gt;&lt;code&gt;sudo killall -HUP mDNSResponder&lt;/code&gt;&lt;/td&gt;&#xA;      &lt;/tr&gt;&#xA;      &lt;tr&gt;&#xA;          &lt;td&gt;10.12 (Sierra)&lt;/td&gt;&#xA;          &lt;td&gt;&lt;code&gt;sudo killall -HUP mDNSResponder&lt;/code&gt;&lt;/td&gt;&#xA;      &lt;/tr&gt;&#xA;  &lt;/tbody&gt;&#xA;&lt;/table&gt;&#xA;&lt;p&gt;I hope this helps 🙂&lt;/p&gt;</description>
    </item>
    <item>
      <title>My Highly Available DNS setup with Blocky</title>
      <link>https://riesinger.dev/posts/ha-dns-adblocking-with-blocky/</link>
      <pubDate>Sun, 01 May 2022 15:30:04 +0000</pubDate>
      <guid>https://riesinger.dev/posts/ha-dns-adblocking-with-blocky/</guid>
      <description>&lt;p&gt;We live in a world where everything is connected to the internet. And I like that wold. For the most part.&#xA;There are some thing that have been going in the wrong direction in the last few years, namely online advertisement and tracking.&#xA;Luckily, there are ways to improve that situation, if you get a little crafty and craft a blocking DNS server.&lt;/p&gt;&#xA;&lt;h2 id=&#34;pi-hole-the-good-the-bad-the-ugly&#34;&gt;Pi-hole: the good, the bad, the ugly&lt;/h2&gt;&#xA;&lt;p&gt;You might have heard of the Pi-hole project already. According to &lt;a href=&#34;https://pi-hole.net&#34;&gt;their website&lt;/a&gt;, it is used for “&lt;strong&gt;Network-wide Ad Blocking&lt;/strong&gt;”&lt;strong&gt;.&lt;/strong&gt; It was the first major project which made it easy to run a custom DNS server (NOT resolver; I might get into that topic in another post) and add block lists to it. It is a great project: There is &lt;em&gt;lots&lt;/em&gt; of documentation, it&amp;rsquo;s super simple to setup (it&amp;rsquo;s literally just one script), it works perfectly fine most of the time and has an active community.&lt;/p&gt;</description>
    </item>
    <item>
      <title>Silencing your Fyrtur blinds with custom firmware</title>
      <link>https://riesinger.dev/posts/silencing-fyrtur-blinds-with-custom-firmware/</link>
      <pubDate>Fri, 04 Feb 2022 20:50:43 +0000</pubDate>
      <guid>https://riesinger.dev/posts/silencing-fyrtur-blinds-with-custom-firmware/</guid>
      <description>&lt;p&gt;I have IKEA Fyrtur blinds in my bedroom, as you might know if you’ve previously read &lt;a href=&#34;https://riesinger.dev/posts/ikea-fyrtur-homeassistant-deconz/&#34;&gt;this&lt;/a&gt; article of mine on how to connect your Fyrtur to deCONZ.&lt;/p&gt;&#xA;&lt;p&gt;Now, automatically opening your shades some time before you want to wake up to get some natural light in would be a great idea&amp;hellip; if the Fyrtur blinds weren’t so loud.&lt;/p&gt;&#xA;&lt;p&gt;In my search on how to make the blinds a bit more quiet, so I can actually open them &lt;em&gt;before&lt;/em&gt; I wake up, I found the following project:&lt;/p&gt;</description>
    </item>
    <item>
      <title>Using Unmanic with VA-API in Docker</title>
      <link>https://riesinger.dev/posts/unmanic-with-vaapi-in-docker/</link>
      <pubDate>Sun, 30 Jan 2022 19:14:52 +0100</pubDate>
      <guid>https://riesinger.dev/posts/unmanic-with-vaapi-in-docker/</guid>
      <description>&lt;p&gt;I &lt;strong&gt;love&lt;/strong&gt; offline media. I&amp;rsquo;ve always had issues with streaming services and linear television. For&#xA;example, you&amp;rsquo;re watching a show, get to the third season and boom, the show is removed from Amazon&#xA;Prime, Netflix or your favorite service. And don&amp;rsquo;t get me started with TV, where you have to adjust&#xA;your schedule around the program, if you want to watch a specific movie or follow a show.&lt;/p&gt;&#xA;&lt;p&gt;So what&amp;rsquo;s the solution? Keeping your media offline and hosting your own media server. Now, aside&#xA;from the effort of hosting the server (which is actually quite minimal), there&amp;rsquo;s another issue:&#xA;storage space.&lt;/p&gt;</description>
    </item>
    <item>
      <title>Paper Tracker</title>
      <link>https://riesinger.dev/projects/paper-tracker/</link>
      <pubDate>Sat, 01 Jan 2022 00:00:00 +0000</pubDate>
      <guid>https://riesinger.dev/projects/paper-tracker/</guid>
      <description>A system for tracking the location and workflow of documents</description>
    </item>
    <item>
      <title>Samsung SSDs with ZFS</title>
      <link>https://riesinger.dev/posts/samsung-ssds-with-zfs/</link>
      <pubDate>Fri, 12 Nov 2021 12:04:50 +0100</pubDate>
      <guid>https://riesinger.dev/posts/samsung-ssds-with-zfs/</guid>
      <description>&lt;p&gt;This post is mainly a summary of &lt;a href=&#34;https://blog.cavelab.dev/2021/02/zfs-ssd-pool-problems/&#34;&gt;this post by Thomas&lt;/a&gt;,&#xA;because I know that I&amp;rsquo;ll loose that link at some point but I&amp;rsquo;ll likely need the solution mentioned in the post again at some point.&lt;/p&gt;&#xA;&lt;p&gt;I have two 500 GB Samsung 870 Evo SSDs in my home server, being used in a ZFS mirror for &amp;ldquo;fast&amp;rdquo; storage.&#xA;Now, the pool was working fine for a while, but at one point, I ran &lt;code&gt;zpool status&lt;/code&gt; and it gave me the following output:&lt;/p&gt;</description>
    </item>
    <item>
      <title>Why I moved my site to Next.JS</title>
      <link>https://riesinger.dev/posts/why-i-moved-my-site-to-nextjs/</link>
      <pubDate>Wed, 10 Nov 2021 21:13:57 +0100</pubDate>
      <guid>https://riesinger.dev/posts/why-i-moved-my-site-to-nextjs/</guid>
      <description>&lt;p&gt;import RandomColorButton from &amp;ldquo;@/components/RandomColorButton&amp;rdquo;;&lt;/p&gt;&#xA;&lt;p&gt;Since &lt;a href=&#34;https://github.com/riesinger/website/commit/e68fa40e57fad4c3cd93fb5fb9b4d53c6aae6a35&#34;&gt;November of 2019&lt;/a&gt;, my website has been powered by &lt;a href=&#34;https://gohugo.io&#34;&gt;Hugo&lt;/a&gt;.&#xA;For those who haven&amp;rsquo;t heard of it yet; Hugo is a fantastic static-site generator written in &lt;a href=&#34;https://go.dev&#34;&gt;Go&lt;/a&gt;, which is blazingly fast, has lots of pre-built templates available and is reasonably easy to use.&lt;/p&gt;&#xA;&lt;p&gt;I was quite happy with Hugo, after I switched themes a few times to find the right one.&#xA;It was quite nice: Write posts in Markdown, have an automatic RSS feed generated, have the site built and deployed in less than a minute.&lt;/p&gt;</description>
    </item>
    <item>
      <title>IKEA Fyrtur smart blinds with Home Assistant and deCONZ</title>
      <link>https://riesinger.dev/posts/ikea-fyrtur-homeassistant-deconz/</link>
      <pubDate>Tue, 18 May 2021 20:00:00 +0100</pubDate>
      <guid>https://riesinger.dev/posts/ikea-fyrtur-homeassistant-deconz/</guid>
      <description>&lt;p&gt;When searching the web for blackout blinds, I came across the IKEA Fyrtur line of ZigBee-controlled &amp;ldquo;smart blinds&amp;rdquo;.&#xA;Since I&amp;rsquo;ve had a great exprience with IKEA smart home products, mostly from the Tradfri line, I was instantly intrigued.&lt;/p&gt;&#xA;&lt;p&gt;I like Tradfri products, since they are controlled via &lt;a href=&#34;https://en.wikipedia.org/wiki/Zigbee&#34;&gt;ZigBee&lt;/a&gt;, which integrates nicely into my existing Home Assistant and ConBee/deCONZ setup and they usually are at a great balance between quality and price.&lt;/p&gt;</description>
    </item>
    <item>
      <title>Checking Out SerenityOS</title>
      <link>https://riesinger.dev/posts/checking-out-serenity-os/</link>
      <pubDate>Wed, 13 May 2020 15:55:44 +0200</pubDate>
      <guid>https://riesinger.dev/posts/checking-out-serenity-os/</guid>
      <description>&lt;p&gt;Have you heard of SerenityOS yet? It&amp;rsquo;s a free and open-source operating system whose development was&#xA;initiated by &lt;a href=&#34;https://twitter.com/awesomekling&#34;&gt;Andreas Kling&lt;/a&gt; (also known as &lt;em&gt;awesomekling&lt;/em&gt;) in&#xA;October 2018 and now developed by over 140 contributers&lt;sup id=&#34;fnref:1&#34;&gt;&lt;a href=&#34;#fn:1&#34; class=&#34;footnote-ref&#34; role=&#34;doc-noteref&#34;&gt;1&lt;/a&gt;&lt;/sup&gt;. Now, don&amp;rsquo;t be fooled: This is not your&#xA;typical &amp;ldquo;it can boot into a text console and has ls and mkdir&amp;rdquo;-toy-operating-system. SerenityOS has&#xA;a full GUI with a whole suite of GUI and console applications to handle day-to-day tasks (a&#xA;calculator, text editor, even a &lt;strong&gt;Browser&lt;/strong&gt;), to entertain you (Snake, Doom, Minesweeper) and for&#xA;hacking on the OS itself (an IDE with a visual debugger, &lt;code&gt;git&lt;/code&gt;, &amp;hellip;).&lt;/p&gt;</description>
    </item>
    <item>
      <title>React Hooks with Typescript</title>
      <link>https://riesinger.dev/posts/react-hooks-typescript/</link>
      <pubDate>Thu, 09 Apr 2020 12:55:10 +0200</pubDate>
      <guid>https://riesinger.dev/posts/react-hooks-typescript/</guid>
      <description>&lt;p&gt;This post is just a list of snippets for using React hooks with TypeScript (since I always forget).&lt;/p&gt;&#xA;&lt;h2 id=&#34;usestate&#34;&gt;&lt;code&gt;useState&lt;/code&gt;&lt;/h2&gt;&#xA;&lt;p&gt;&lt;code&gt;useState&lt;/code&gt; equals &lt;code&gt;this.state&lt;/code&gt; for class components. It makes it super simple to add state to a&#xA;function component by returning a variable and its associated setter function.&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-tsx&#34; data-lang=&#34;tsx&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#66d9ef&#34;&gt;import&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;React&lt;/span&gt;, { &lt;span style=&#34;color:#a6e22e&#34;&gt;useState&lt;/span&gt; } &lt;span style=&#34;color:#66d9ef&#34;&gt;from&lt;/span&gt; &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;react&amp;#34;&lt;/span&gt;;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;// our components props accept a number for the initial value&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#66d9ef&#34;&gt;const&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;Counter&lt;/span&gt;: &lt;span style=&#34;color:#66d9ef&#34;&gt;React.FC&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;&amp;lt;&lt;/span&gt;{}&lt;span style=&#34;color:#f92672&#34;&gt;&amp;gt;&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt; () &lt;span style=&#34;color:#f92672&#34;&gt;=&amp;gt;&lt;/span&gt; {&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#75715e&#34;&gt;// since we pass a number here, clicks is going to be a number.&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;&lt;/span&gt;  &lt;span style=&#34;color:#75715e&#34;&gt;// setClicks is a function that accepts either a number or a function&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;&lt;/span&gt;  &lt;span style=&#34;color:#75715e&#34;&gt;// returning a number&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;&lt;/span&gt;  &lt;span style=&#34;color:#66d9ef&#34;&gt;const&lt;/span&gt; [&lt;span style=&#34;color:#a6e22e&#34;&gt;clicks&lt;/span&gt;, &lt;span style=&#34;color:#a6e22e&#34;&gt;setClicks&lt;/span&gt;] &lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;useState&lt;/span&gt;(&lt;span style=&#34;color:#ae81ff&#34;&gt;0&lt;/span&gt;);&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#66d9ef&#34;&gt;return&lt;/span&gt; (&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &amp;lt;&amp;gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;      &amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;p&lt;/span&gt;&amp;gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;Clicks&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt; {&lt;span style=&#34;color:#a6e22e&#34;&gt;clicks&lt;/span&gt;}&amp;lt;/&lt;span style=&#34;color:#f92672&#34;&gt;p&lt;/span&gt;&amp;gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;      &amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;button&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;onClick&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;{() &lt;span style=&#34;color:#f92672&#34;&gt;=&amp;gt;&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;setClicks&lt;/span&gt;(&lt;span style=&#34;color:#a6e22e&#34;&gt;clicks&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;+&lt;/span&gt; &lt;span style=&#34;color:#ae81ff&#34;&gt;1&lt;/span&gt;)}&amp;gt;&lt;span style=&#34;color:#f92672&#34;&gt;+&lt;/span&gt;&amp;lt;/&lt;span style=&#34;color:#f92672&#34;&gt;button&lt;/span&gt;&amp;gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;      &amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;button&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;onClick&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;{() &lt;span style=&#34;color:#f92672&#34;&gt;=&amp;gt;&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;setClicks&lt;/span&gt;(&lt;span style=&#34;color:#a6e22e&#34;&gt;clicks&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;-&lt;/span&gt; &lt;span style=&#34;color:#ae81ff&#34;&gt;1&lt;/span&gt;)}&amp;gt;&lt;span style=&#34;color:#f92672&#34;&gt;-&lt;/span&gt;&amp;lt;/&lt;span style=&#34;color:#f92672&#34;&gt;button&lt;/span&gt;&amp;gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &amp;lt;/&amp;gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  );&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;};&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;useeffect&#34;&gt;&lt;code&gt;useEffect&lt;/code&gt;&lt;/h2&gt;&#xA;&lt;p&gt;For creating side effects in function components, the React developers created the appropriately&#xA;named &lt;code&gt;useEffect&lt;/code&gt; function. It can be used for adding event listeners, fetching data, you name it.&#xA;It replaces class component&amp;rsquo;s lifecycle methods &lt;code&gt;componentDidUpdate&lt;/code&gt;, &lt;code&gt;componentDidMount&lt;/code&gt; and&#xA;&lt;code&gt;componentWillUnmount&lt;/code&gt;.&#xA;The function accepts two parameters:&lt;/p&gt;</description>
    </item>
    <item>
      <title>Shucking Seagate Expansion Desktop Drives</title>
      <link>https://riesinger.dev/posts/shucking-seagate-expansion-desktop-drives/</link>
      <pubDate>Thu, 20 Feb 2020 09:51:11 +0100</pubDate>
      <guid>https://riesinger.dev/posts/shucking-seagate-expansion-desktop-drives/</guid>
      <description>&lt;p&gt;In this post, I will share my experience &amp;ldquo;shucking&amp;rdquo; Seagate Expansion Desktop drives for putting&#xA;them in my home server. But, before we get to the actual post: a word of caution.&lt;/p&gt;&#xA;&lt;Callout variant=&#34;danger&#34;&gt;&#xA;  Shucking your drive will likely void your warranty. You could damage or&#xA;  potentially destroy your drive while shucking it. I am not responsible for any&#xA;  damage done.&#xA;&lt;/Callout&gt;&#xA;&lt;h2 id=&#34;but-what-is-shucking&#34;&gt;But what is shucking?&lt;/h2&gt;&#xA;&lt;p&gt;Shucking means removing a harddrive (HDD) from any sort of casing, mostly USB adaptors. It is a very&#xA;popular thing to do for home servers, since (for some reason), USB drives are often times &lt;strong&gt;way&lt;/strong&gt;&#xA;cheaper than internal drives without USB adaptors.&lt;/p&gt;</description>
    </item>
    <item>
      <title>Hosting Static Files for Free</title>
      <link>https://riesinger.dev/posts/hosting-static-files-for-free/</link>
      <pubDate>Fri, 08 Nov 2019 14:52:46 +0100</pubDate>
      <guid>https://riesinger.dev/posts/hosting-static-files-for-free/</guid>
      <description>&lt;p&gt;As the title might suggest, in this post I will show you how I host static files for free (or at&#xA;least for cheap, if you want to host lots of files) with Backblaze B2 and Cloudflare.&lt;/p&gt;&#xA;&lt;h2 id=&#34;backblaze-b2&#34;&gt;Backblaze B2&lt;/h2&gt;&#xA;&lt;p&gt;B2 is a service from &lt;a href=&#34;https://backblaze.com&#34;&gt;Backblaze&lt;/a&gt; providing object storage, similar to S3 from&#xA;Amazon. However, it is way cheaper than S3 and B2 even allows you to host up to 10GB for &lt;strong&gt;free&lt;/strong&gt;,&#xA;and after that it&amp;rsquo;s $0.005 per GB and Month. Downloads cost $0.01 per GB, but I&amp;rsquo;ll show you a way to&#xA;work around that 😉&lt;/p&gt;</description>
    </item>
    <item>
      <title>8051 Connect Four</title>
      <link>https://riesinger.dev/projects/8051-connect-four/</link>
      <pubDate>Sat, 08 Dec 2018 00:00:00 +0000</pubDate>
      <guid>https://riesinger.dev/projects/8051-connect-four/</guid>
      <description>Connect Four implemented on a 8051 microprocessor</description>
    </item>
    <item>
      <title>Pure CSS Tooltips</title>
      <link>https://riesinger.dev/posts/pure-css-tooltips/</link>
      <pubDate>Thu, 11 May 2017 11:17:08 +0100</pubDate>
      <guid>https://riesinger.dev/posts/pure-css-tooltips/</guid>
      <description>&lt;Callout variant=&#34;danger&#34;&gt;&#xA;  I don&#39;t recommend this method of creating tooltips anymore, since it&#39;s not&#xA;  accessible to screen readers and other assistive technology. Also, tooltips&#xA;  don&#39;t work on mobile devices, which comprise most web page visits these days,&#xA;  so keep that in mind!&#xA;&lt;/Callout&gt;&#xA;&lt;p&gt;&lt;img src=&#34;done.png&#34; alt=&#34;Example of the finished project&#34;&gt;&lt;/p&gt;&#xA;&lt;p&gt;There are many JQuery, Angular, React and VueJS plugins for doing tooltips, but sometimes, the&#xA;simplest solution is the best. That’s why I am showing you how to implement great looking tooltips&#xA;purely in CSS. Let’s get started by downloading my &lt;a href=&#34;https://github.com/riesinger/pure-css-tooltips-tutorial&#34;&gt;boilerplate from&#xA;Github&lt;/a&gt;. Jump into the folder and&#xA;open the &lt;code&gt;index.html&lt;/code&gt; file. You should see the following:&lt;/p&gt;</description>
    </item>
    <item>
      <title>Transitions in CSS</title>
      <link>https://riesinger.dev/posts/transitions-in-css/</link>
      <pubDate>Sat, 29 Apr 2017 14:09:54 +0100</pubDate>
      <guid>https://riesinger.dev/posts/transitions-in-css/</guid>
      <description>&lt;p&gt;Movement and transitions are very important design aspects. They can guide your user through the&#xA;application and help them understand states. If you are like me, you may have found yourself&#xA;clicking some button over-and-over in an app with beautiful transitions, admiring the amazing work&#xA;of designers and developers.&lt;/p&gt;&#xA;&lt;figure&gt;&#xA;  &lt;video controls&gt;&#xA;    &lt;source src=&#34;guide.mp4&#34; type=&#34;video/mp4&#34; /&gt;&#xA;  &lt;/video&gt;&#xA;  &lt;figcaption&gt;&#xA;    A good example for motion in an app. Source:{&#34; &#34;}&#xA;    &lt;a href=&#34;https://material.uplabls.com/posts/music-player-transition&#34;&gt;&#xA;      Uplabs&#xA;    &lt;/a&gt;&#xA;  &lt;/figcaption&gt;&#xA;&lt;/figure&gt;&#xA;&lt;p&gt;So you know a bit about HTML, CSS and JavaScript and did some basic websites? But you want to&#xA;improve state transitions with some animation? Look no further, the following guide will walk you&#xA;from basic transitions to more complex animations using keyframes 🚀&lt;/p&gt;</description>
    </item>
    <item>
      <title>ACRISS Car Codes</title>
      <link>https://riesinger.dev/acriss/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://riesinger.dev/acriss/</guid>
      <description>&lt;style&gt;&#xA;table, tr, td {&#xA;    border: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.5));&#xA;    border-collapse: collapse;&#xA;}&#xA;&#xA;td {&#xA;    padding: 0.25rem 0.5rem;&#xA;&#xA;    &amp;.highlight {&#xA;        background: yellow;&#xA;        color: rgba(0, 0, 0, 0.95);&#xA;    }&#xA;}&#xA;&#xA;table {&#xA;    width: 950px;&#xA;    max-width: 95vw;&#xA;    transform: translateX(-50%);&#xA;    position: relative;&#xA;    left: 50%;&#xA;    font-family: monospace;&#xA;}&#xA;&#xA;tr:nth-child(2n) {&#xA;    background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.15));&#xA;}&#xA;&#xA;input {&#xA;    padding: 0.25rem;&#xA;    width: 100%;&#xA;    margin-bottom: 2rem;&#xA;}&#xA;&#xA;&lt;/style&gt;&#xA;&lt;p&gt;This is a mirror of the data on &lt;a href=&#34;https://acriss.org/car-codes/&#34;&gt;https://acriss.org/car-codes/&lt;/a&gt;, since it&amp;rsquo;s too slow of a site for my tastes.&lt;/p&gt;</description>
    </item>
    <item>
      <title>🦷 Mama&#39;s ORAL-B SERIES 6 Guide! 🦷</title>
      <link>https://riesinger.dev/oral-b-series-6/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://riesinger.dev/oral-b-series-6/</guid>
      <description>&lt;style&gt;&#xA;@keyframes neon-glow {&#xA;    0%, 100% { text-shadow: 0 0 10px #ff00de, 0 0 20px #ff00de, 0 0 30px #ff00de; }&#xA;    50% { text-shadow: 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff; }&#xA;}&#xA;&#xA;@keyframes slide-in {&#xA;    from { transform: translateX(-100%); opacity: 0; }&#xA;    to { transform: translateX(0); opacity: 1; }&#xA;}&#xA;&#xA;@keyframes rainbow {&#xA;    0% { border-color: #ff0000; }&#xA;    16% { border-color: #ff8800; }&#xA;    33% { border-color: #ffff00; }&#xA;    50% { border-color: #00ff00; }&#xA;    66% { border-color: #0088ff; }&#xA;    83% { border-color: #8800ff; }&#xA;    100% { border-color: #ff0000; }&#xA;}&#xA;&#xA;@keyframes gradient-shift {&#xA;    0% { background-position: 0% 50%; }&#xA;    50% { background-position: 100% 50%; }&#xA;    100% { background-position: 0% 50%; }&#xA;}&#xA;&#xA;body {&#xA;    background: linear-gradient(45deg, #1a0033, #330066, #660099, #330066, #1a0033);&#xA;    background-size: 400% 400%;&#xA;    animation: gradient-shift 15s ease infinite;&#xA;}&#xA;&#xA;.page-background {&#xA;    background: linear-gradient(180deg, &#xA;        rgba(255, 0, 222, 0.2) 0%, &#xA;        rgba(0, 255, 255, 0.2) 25%,&#xA;        rgba(255, 255, 0, 0.2) 50%,&#xA;        rgba(0, 255, 0, 0.2) 75%,&#xA;        rgba(255, 0, 222, 0.2) 100%&#xA;    );&#xA;    padding: 2rem;&#xA;    border-radius: 20px;&#xA;}&#xA;&#xA;.retro-container {&#xA;    background: linear-gradient(45deg, #ff00de, #00ffff, #ffff00, #ff00de);&#xA;    background-size: 300% 300%;&#xA;    animation: gradient-shift 3s ease infinite;&#xA;    padding: 3px;&#xA;    margin: 2rem 0;&#xA;    border: 3px solid #fff;&#xA;}&#xA;&#xA;.retro-content {&#xA;    background: linear-gradient(135deg, #000033, #000066);&#xA;    padding: 2rem;&#xA;    color: #00ff00;&#xA;    font-family: &#39;Courier New&#39;, monospace;&#xA;}&#xA;&#xA;.header-90s {&#xA;    text-align: center;&#xA;    font-size: 2.5rem;&#xA;    font-weight: bold;&#xA;    background: linear-gradient(45deg, #ff00de, #00ffff, #ffff00, #ff00de);&#xA;    background-size: 200% 200%;&#xA;    -webkit-background-clip: text;&#xA;    -webkit-text-fill-color: transparent;&#xA;    animation: neon-glow 2s ease-in-out infinite;&#xA;    margin: 2rem 0;&#xA;    text-transform: uppercase;&#xA;}&#xA;&#xA;.comparison-table {&#xA;    width: 100%;&#xA;    border-collapse: separate;&#xA;    border-spacing: 0;&#xA;    margin: 2rem 0;&#xA;    box-shadow: 0 0 30px rgba(255, 0, 222, 0.8);&#xA;    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(51, 0, 102, 0.9));&#xA;}&#xA;&#xA;.comparison-table th {&#xA;    background: linear-gradient(180deg, #ff00de, #8800ff);&#xA;    color: #fff;&#xA;    padding: 1rem;&#xA;    font-size: 1.2rem;&#xA;    text-transform: uppercase;&#xA;    border: 3px solid #00ffff;&#xA;    font-weight: bold;&#xA;}&#xA;&#xA;.comparison-table td {&#xA;    padding: 1rem;&#xA;    border: 2px solid #00ffff;&#xA;    background: rgba(0, 0, 0, 0.7);&#xA;    color: #fff;&#xA;}&#xA;&#xA;.comparison-table tr:nth-child(even) td {&#xA;    background: rgba(136, 0, 255, 0.3);&#xA;}&#xA;&#xA;.winner-cell {&#xA;    background: linear-gradient(45deg, #ffff00, #ff8800) !important;&#xA;    color: #000 !important;&#xA;    font-weight: bold;&#xA;    text-align: center;&#xA;    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);&#xA;}&#xA;&#xA;.loser-cell {&#xA;    background: linear-gradient(135deg, rgba(255, 0, 0, 0.5), rgba(139, 0, 0, 0.5)) !important;&#xA;    text-align: center;&#xA;}&#xA;&#xA;.neutral-cell {&#xA;    background: linear-gradient(135deg, rgba(0, 255, 0, 0.3), rgba(0, 139, 0, 0.3)) !important;&#xA;    text-align: center;&#xA;}&#xA;&#xA;.radical-banner {&#xA;    background: linear-gradient(90deg, #ff00de, #00ffff, #ffff00, #ff00de);&#xA;    background-size: 200% 100%;&#xA;    animation: gradient-shift 3s linear infinite;&#xA;    padding: 1.5rem;&#xA;    text-align: center;&#xA;    font-size: 1.8rem;&#xA;    font-weight: bold;&#xA;    color: #fff;&#xA;    text-shadow: 2px 2px 4px #000, -1px -1px 2px #000;&#xA;    margin: 2rem 0;&#xA;    border: 5px solid #fff;&#xA;    box-shadow: 0 0 30px rgba(255, 0, 222, 0.8);&#xA;    text-transform: uppercase;&#xA;}&#xA;&#xA;.pros-cons {&#xA;    display: grid;&#xA;    grid-template-columns: 1fr 1fr;&#xA;    gap: 2rem;&#xA;    margin: 2rem 0;&#xA;}&#xA;&#xA;.pros-box, .cons-box {&#xA;    border: 3px solid;&#xA;    padding: 1.5rem;&#xA;    border-radius: 10px;&#xA;}&#xA;&#xA;.pros-box {&#xA;    border-color: #00ff00;&#xA;    background: linear-gradient(135deg, rgba(0, 255, 0, 0.2), rgba(0, 100, 0, 0.4));&#xA;    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);&#xA;}&#xA;&#xA;.cons-box {&#xA;    border-color: #ff0000;&#xA;    background: linear-gradient(135deg, rgba(255, 0, 0, 0.2), rgba(139, 0, 0, 0.4));&#xA;    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);&#xA;}&#xA;&#xA;.pros-box h3, .cons-box h3 {&#xA;    margin-top: 0;&#xA;    font-size: 1.5rem;&#xA;    text-transform: uppercase;&#xA;}&#xA;&#xA;.pros-box h3 {&#xA;    color: #00ff00;&#xA;    text-shadow: 0 0 10px #00ff00;&#xA;}&#xA;&#xA;.cons-box h3 {&#xA;    color: #ff0000;&#xA;    text-shadow: 0 0 10px #ff0000;&#xA;}&#xA;&#xA;.pros-box ul, .cons-box ul {&#xA;    color: #fff;&#xA;}&#xA;&#xA;.verdict-box {&#xA;    background: linear-gradient(135deg, #ff00de, #00ffff, #ffff00);&#xA;    background-size: 200% 200%;&#xA;    animation: gradient-shift 5s ease infinite;&#xA;    padding: 3px;&#xA;    margin: 3rem 0;&#xA;}&#xA;&#xA;.verdict-content {&#xA;    background: linear-gradient(135deg, #000, #1a0033);&#xA;    padding: 2rem;&#xA;    color: #ffff00;&#xA;    font-size: 1.3rem;&#xA;    text-align: center;&#xA;    font-weight: bold;&#xA;    text-shadow: 0 0 10px #ffff00, 2px 2px 4px #000;&#xA;}&#xA;&#xA;.blink-border {&#xA;    position: relative;&#xA;}&#xA;&#xA;.blink-border::before,&#xA;.blink-border::after {&#xA;    content: &#39;&#39;;&#xA;    position: absolute;&#xA;    width: 10px;&#xA;    height: 100%;&#xA;    top: 0;&#xA;    animation: blink 1s step-start infinite;&#xA;    background: linear-gradient(180deg, #ff00de, #00ffff, #ffff00);&#xA;}&#xA;&#xA;.blink-border::before {&#xA;    left: -15px;&#xA;}&#xA;&#xA;.blink-border::after {&#xA;    right: -15px;&#xA;}&#xA;&#xA;@keyframes blink {&#xA;    50% { opacity: 0; }&#xA;}&#xA;&#xA;.page-edge-blink {&#xA;    position: fixed;&#xA;    width: 5px;&#xA;    height: 100vh;&#xA;    top: 0;&#xA;    z-index: 1000;&#xA;    animation: blink 1.5s step-start infinite;&#xA;    pointer-events: none;&#xA;}&#xA;&#xA;.page-edge-blink.left {&#xA;    left: 0;&#xA;    background: linear-gradient(180deg, #ff00de, #00ffff);&#xA;}&#xA;&#xA;.page-edge-blink.right {&#xA;    right: 0;&#xA;    background: linear-gradient(180deg, #ffff00, #ff00de);&#xA;}&#xA;&#xA;.model-name {&#xA;    font-weight: bold;&#xA;    color: #00ffff;&#xA;    text-shadow: 0 0 5px #00ffff;&#xA;}&#xA;&#xA;.section-colorful {&#xA;    background: linear-gradient(90deg, &#xA;        rgba(255, 0, 222, 0.15),&#xA;        rgba(0, 255, 255, 0.15),&#xA;        rgba(255, 255, 0, 0.15)&#xA;    );&#xA;    background-size: 200% 100%;&#xA;    animation: gradient-shift 8s linear infinite;&#xA;    padding: 2rem;&#xA;    margin: 2rem 0;&#xA;    border-radius: 15px;&#xA;    border: 2px solid rgba(255, 0, 222, 0.5);&#xA;}&#xA;&#xA;.matchup-section {&#xA;    background: linear-gradient(135deg, &#xA;        rgba(136, 0, 255, 0.3),&#xA;        rgba(255, 0, 139, 0.3)&#xA;    );&#xA;    padding: 1.5rem;&#xA;    margin: 1.5rem 0;&#xA;    border-radius: 10px;&#xA;    border-left: 5px solid #ff00de;&#xA;}&#xA;&#xA;ul {&#xA;    list-style: none;&#xA;    padding-left: 0;&#xA;}&#xA;&#xA;ul li:before {&#xA;    content: &#34;▶ &#34;;&#xA;    color: #ff00de;&#xA;    font-weight: bold;&#xA;}&#xA;&#xA;h2 {&#xA;    color: #00ffff;&#xA;    text-shadow: 0 0 10px #00ffff, 2px 2px 4px #000;&#xA;    background: linear-gradient(90deg, rgba(0, 255, 255, 0.3), rgba(0, 100, 100, 0.2));&#xA;    padding: 1rem;&#xA;    border-left: 5px solid #00ffff;&#xA;}&#xA;&#xA;h3 {&#xA;    color: #ffff00;&#xA;    text-shadow: 0 0 8px #ffff00, 2px 2px 4px #000;&#xA;}&#xA;&#xA;p, li, td {&#xA;    color: #f0f0f0;&#xA;}&#xA;&#xA;strong {&#xA;    color: #fff;&#xA;}&#xA;&#xA;@media (max-width: 768px) {&#xA;    .pros-cons {&#xA;        grid-template-columns: 1fr;&#xA;    }&#xA;    &#xA;    .header-90s {&#xA;        font-size: 1.8rem;&#xA;    }&#xA;    &#xA;    .radical-banner {&#xA;        font-size: 1.3rem;&#xA;    }&#xA;}&#xA;&lt;/style&gt;&#xA;&lt;audio id=&#34;background-music&#34; loop&gt;&#xA;    &lt;source src=&#34;https://riesinger.dev/music/oralb-song.mp3&#34; type=&#34;audio/mpeg&#34;&gt;&#xA;&lt;/audio&gt;&#xA;&lt;script&gt;&#xA;document.addEventListener(&#39;DOMContentLoaded&#39;, function() {&#xA;    const audio = document.getElementById(&#39;background-music&#39;);&#xA;    // Try to play automatically&#xA;    audio.play().catch(function(error) {&#xA;        // If autoplay is blocked, add a click listener to play on first interaction&#xA;        console.log(&#39;Autoplay blocked, will play on first click&#39;);&#xA;        document.body.addEventListener(&#39;click&#39;, function playOnce() {&#xA;            audio.play();&#xA;            document.body.removeEventListener(&#39;click&#39;, playOnce);&#xA;        }, { once: true });&#xA;    });&#xA;});&#xA;&lt;/script&gt;&#xA;&lt;div class=&#34;page-edge-blink left&#34;&gt;&lt;/div&gt;&#xA;&lt;div class=&#34;page-edge-blink right&#34;&gt;&lt;/div&gt;&#xA;&lt;div class=&#34;page-background&#34;&gt;&#xA;&lt;div class=&#34;radical-banner&#34;&gt;&#xA;⚡ TOTAL ABGEFAHRENE ZAHNBÜRSTEN-TECHNOLOGIE ⚡&#xA;&lt;/div&gt;&#xA;&lt;h1 class=&#34;header-90s&#34;&gt;&#xA;Hey Mama! Zeit für die BESTE Zahnbürste!&#xA;&lt;/h1&gt;&#xA;&lt;div class=&#34;retro-container blink-border&#34;&gt;&#xA;    &lt;div class=&#34;retro-content&#34;&gt;&#xA;        &lt;p style=&#34;text-align: center; font-size: 1.2rem;&#34;&gt;&#xA;        &gt;&gt;&gt; PASCALS ZAHNBÜRSTEN-RECHERCHE FÜR KERSTIN... █&lt;br&gt;&#xA;        &gt;&gt;&gt; STATUS: MEGA AUSFÜHRLICH&lt;br&gt;&#xA;        &gt;&gt;&gt; EMPFEHLUNGS-LEVEL: MAXIMUM&#xA;        &lt;/p&gt;</description>
    </item>
  </channel>
</rss>
