<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Blog on Eric Murphy</title>
    <link>https://ericmurphy.xyz/blog/</link>
    <description>Recent content in Blog on Eric Murphy's website</description>
    <generator>Hugo -- gohugo.io</generator>
    
    <lastBuildDate>Mon, 21 Aug 2023 19:41:57 +0700</lastBuildDate><atom:link href="https://ericmurphy.xyz/blog/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>Why I&#39;m Uncopyrighting All of My Videos</title>
      <link>https://ericmurphy.xyz/blog/copyright/</link>
      <pubDate>Mon, 21 Aug 2023 19:41:57 +0700</pubDate>
      
      <guid>https://ericmurphy.xyz/blog/copyright/</guid>
      <description>&lt;p&gt;I recently received an email asking for permission to react to one of my YouTube videos and offer his own perspective on it. Of course, I said yes, but I was a bit confused why he even asked in the first place.&lt;/p&gt;
&lt;p&gt;I can understand his apprehension due to how bad the copyright system is. Especially on YouTube, many creators fear for their lives, as if you say one bad thing about someone, they can take away your entire livelihood just by filing a few copyright strikes.&lt;/p&gt;
&lt;p&gt;As you may have seen, all the content on this website is &lt;a href=&#34;https://ericmurphy.xyz/uncopyright&#34;&gt;uncopyrighted&lt;/a&gt;. That means you can do whatever you want with the content here. You can copy it, you can redistribute it, you can react to it, you can even stick it behind a paywall if you really want to (good luck making any money from it though). Of course, I would appreciate you give me credit and leave a link back to my work, but it&amp;rsquo;s not required.&lt;/p&gt;
&lt;p&gt;I don&amp;rsquo;t see my work as wholly original and something that I alone came up with. All of my ideas are built on top of other ideas that inspired me, either directly or indirectly.&lt;/p&gt;
&lt;p&gt;The uncopyright also applies to the website itself. The &lt;a href=&#34;https://github.com/ericmurphyxyz/ericmurphy.xyz&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;entire website code&lt;/a&gt; is available on GitHub, and you can feel free to use any Hugo code or CSS that you find useful. I stole a lot of code snippets and the colors for this website, anyway, so it can barely even be called &amp;ldquo;my work&amp;rdquo;.&lt;/p&gt;
&lt;p&gt;Besides that, I think that the current copyright system in the US is broken. Companies like Disney milk their IPs to death with them &lt;a href=&#34;https://www.wionews.com/opinions-blogs/how-disney-routinely-exerted-influence-on-the-us-copyright-law-to-keep-its-greatest-asset-mickey-mouse-549141&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;lobbying to keep copyrights&lt;/a&gt; for 95 years after a work is published, even though their entire business was built on the public domain. If you share copyrighted work online, big business exacts &lt;a href=&#34;https://www.videogameschronicle.com/news/switch-hacker-gary-bowser-released-from-jail-will-pay-nintendo-25-30-income-for-the-rest-of-his-life/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;extreme punishments&lt;/a&gt; to make an example out of anyone who might cause billion-dollar companies to &amp;ldquo;lose profits&amp;rdquo;. Won&amp;rsquo;t anyone think of the &lt;strong&gt;poor megacorporations&lt;/strong&gt;!? So I guess this is my small (ineffectual) way of &amp;ldquo;protesting&amp;rdquo; against the system.&lt;/p&gt;
&lt;p&gt;Of course I understand the reasoning behind the idea of copyright, but the current implementation of it, at least in the US, is completely draconian. Rather than sitting on my &amp;ldquo;intellectual property&amp;rdquo; like a dragon for eons, I&amp;rsquo;d rather let it go. &lt;em&gt;If only&lt;/em&gt; I should be so lucky that my work is valuable enough to others that they would want to copy or remix it! That would be a great honor to me, not an insult.&lt;/p&gt;
&lt;p&gt;But after receiving this email, I realized that all of my videos on YouTube are under the standard YouTube License. Going forward, all of my videos will be under &lt;a href=&#34;https://creativecommons.org/licenses/by/4.0/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;&lt;strong&gt;Creative Commons - Attribution&lt;/strong&gt;&lt;/a&gt;, which is the most permissive license available on YouTube. Essentially, this allows you to do anything you want with my videos, but you must give credit. But like how the content on this site is uncopyrighted, I don&amp;rsquo;t particularly care if you &lt;em&gt;don&amp;rsquo;t&lt;/em&gt; give credit.&lt;/p&gt;
&lt;p&gt;The hard part is going back through all my old videos and changing their license. Maybe someday when I have an afternoon&amp;rsquo;s worth of spare time, but until then you can take this as permission to do whatever you want with anything I&amp;rsquo;ve made, on this website or on YouTube.&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>Obsessing Over Optimizing Web Images</title>
      <link>https://ericmurphy.xyz/blog/images/</link>
      <pubDate>Thu, 27 Jul 2023 00:00:00 +0000</pubDate>
      
      <guid>https://ericmurphy.xyz/blog/images/</guid>
      <description>&lt;p&gt;I have a confession to make. I&amp;rsquo;m obsessed with optimizing images. Images are the biggest oversight for a lot of websites. I&amp;rsquo;ll see blogs that obsess about minimalism and using as little JavaScript as possible, only to have huge, uncompressed images served in outdated formats. It&amp;rsquo;s very common to see images that are 300 KB that could be reduced to 100 KB or less with no quality loss.&lt;/p&gt;
&lt;p&gt;If you&amp;rsquo;ve ever thought about resizing and optimizing images for your website manually, it sounds like an impossible task. Thankfully, with modern web frameworks, you don&amp;rsquo;t need to. You can write some code to automate it once and never think about it again.&lt;/p&gt;
&lt;p&gt;For perfect images, there are a few things we need to get right.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Size them correctly.&lt;/strong&gt; If the &lt;code&gt;max-width&lt;/code&gt; of your website is &lt;code&gt;960px&lt;/code&gt;, then there&amp;rsquo;s no reason to serve images with a width larger than that. Similarly, if it&amp;rsquo;s a thumbnail, serve a thumbnail-sized image.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Serve them in modern formats.&lt;/strong&gt; The WebP image format has been around forever, and is &lt;a href=&#34;https://caniuse.com/webp&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;supported by every modern browser&lt;/a&gt;. It can often cut in half the file size of a JPEG or PNG image with no discernible quality loss. You can also add a fallback to a JPEG or PNG image for the few ancient browsers that don&amp;rsquo;t support WebP.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Lazy load them.&lt;/strong&gt; This is a new feature that was recently added natively to HTML, but it makes a huge difference if you have a ton of images on one page that don&amp;rsquo;t need to be loaded immediately. As the user scrolls down the page, they will be loaded in as they scroll into view.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Set the correct width and height.&lt;/strong&gt; If you don&amp;rsquo;t set these, when the image loads &lt;a href=&#34;https://web.dev/optimize-cls/#images-without-dimensions&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;it will shift the surrounding content&lt;/a&gt;, resulting in an annoying, jerky experience for users.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Set the &lt;code&gt;alt&lt;/code&gt; text.&lt;/strong&gt; This is just common courtesy for users who use a screen reader. Even for purely selfish reasons, it can help you rank higher in search results. It will also be displayed if, for whatever reason, the image doesn&amp;rsquo;t load. It&amp;rsquo;s really very little work and just requires you to write a sentence describing the image.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;That sounds like a lot to worry about, but we can automate most of these so that loading optimized images is a no-brainer.&lt;/p&gt;
&lt;h2 id=&#34;writing-the-code&#34;&gt;Writing the Code&lt;/h2&gt;
&lt;p&gt;I personally use Hugo as the framework for this website. With Hugo, I&amp;rsquo;m able to do all of this automatically.&lt;/p&gt;
&lt;p&gt;But of course, this isn&amp;rsquo;t exclusive to Hugo. As an example, &lt;a href=&#34;https://astro.build/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;Astro&lt;/a&gt; comes with a component that does a lot of the same optimization for you. You&amp;rsquo;ll need to adjust the code to the framework you&amp;rsquo;re using, but the principles remain the same.&lt;/p&gt;
&lt;p&gt;For Hugo, this is the code that I use that does all the magic:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#cad3f5;background-color:#24273a;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; $src &lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;:=&lt;/span&gt; &lt;span style=&#34;color:#8aadf4&#34;&gt;.Page.Resources.GetMatch&lt;/span&gt; &lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#c6a0f6&#34;&gt;printf&lt;/span&gt; &lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;%s&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#8aadf4&#34;&gt;.Destination&lt;/span&gt; &lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;|&lt;/span&gt; safeURL&lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;))&lt;/span&gt; &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&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:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; &lt;span style=&#34;color:#c6a0f6&#34;&gt;if&lt;/span&gt; $src &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;&lt;span style=&#34;color:#c6a0f6&#34;&gt;figure&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; $data &lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;:=&lt;/span&gt; newScratch &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&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:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; &lt;span style=&#34;color:#c6a0f6&#34;&gt;if&lt;/span&gt; &lt;span style=&#34;color:#c6a0f6&#34;&gt;gt&lt;/span&gt; $src&lt;span style=&#34;color:#8aadf4&#34;&gt;.Width&lt;/span&gt; 1100 &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&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:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; $data&lt;span style=&#34;color:#8aadf4&#34;&gt;.Set&lt;/span&gt; &lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;webp&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;(&lt;/span&gt;$src&lt;span style=&#34;color:#8aadf4&#34;&gt;.Resize&lt;/span&gt; &lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;960x webp q90&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;)&lt;/span&gt; &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&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:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; $data&lt;span style=&#34;color:#8aadf4&#34;&gt;.Set&lt;/span&gt; &lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;fallback&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;(&lt;/span&gt;$src&lt;span style=&#34;color:#8aadf4&#34;&gt;.Resize&lt;/span&gt; &lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;960x q90&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;)&lt;/span&gt; &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&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:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; &lt;span style=&#34;color:#c6a0f6&#34;&gt;else&lt;/span&gt; &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&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:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; $data&lt;span style=&#34;color:#8aadf4&#34;&gt;.Set&lt;/span&gt; &lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;webp&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;(&lt;/span&gt;$src&lt;span style=&#34;color:#8aadf4&#34;&gt;.Resize&lt;/span&gt; &lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#c6a0f6&#34;&gt;printf&lt;/span&gt; &lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;%dx%d webp q90&amp;#34;&lt;/span&gt; $src&lt;span style=&#34;color:#8aadf4&#34;&gt;.Width&lt;/span&gt; $src&lt;span style=&#34;color:#8aadf4&#34;&gt;.Height&lt;/span&gt;&lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;))&lt;/span&gt; &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&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:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; $data&lt;span style=&#34;color:#8aadf4&#34;&gt;.Set&lt;/span&gt; &lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;fallback&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;(&lt;/span&gt;$src&lt;span style=&#34;color:#8aadf4&#34;&gt;.Resize&lt;/span&gt; &lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#c6a0f6&#34;&gt;printf&lt;/span&gt; &lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;%dx%d q90&amp;#34;&lt;/span&gt; $src&lt;span style=&#34;color:#8aadf4&#34;&gt;.Width&lt;/span&gt; $src&lt;span style=&#34;color:#8aadf4&#34;&gt;.Height&lt;/span&gt;&lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;))&lt;/span&gt; &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&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:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; &lt;span style=&#34;color:#c6a0f6&#34;&gt;end&lt;/span&gt; &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&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:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; $webp &lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;:=&lt;/span&gt; $data&lt;span style=&#34;color:#8aadf4&#34;&gt;.Get&lt;/span&gt; &lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;webp&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&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:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; $fallback &lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;:=&lt;/span&gt; $data&lt;span style=&#34;color:#8aadf4&#34;&gt;.Get&lt;/span&gt; &lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;fallback&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &amp;lt;&lt;span style=&#34;color:#c6a0f6&#34;&gt;a&lt;/span&gt; &lt;span style=&#34;color:#8aadf4&#34;&gt;href&lt;/span&gt;&lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; $src &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&lt;/span&gt;&lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &amp;lt;&lt;span style=&#34;color:#c6a0f6&#34;&gt;picture&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;      &amp;lt;&lt;span style=&#34;color:#c6a0f6&#34;&gt;source&lt;/span&gt; &lt;span style=&#34;color:#8aadf4&#34;&gt;srcset&lt;/span&gt;&lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; $webp&lt;span style=&#34;color:#8aadf4&#34;&gt;.RelPermalink&lt;/span&gt; &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&lt;/span&gt;&lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#8aadf4&#34;&gt;type&lt;/span&gt;&lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;image/webp&amp;#34;&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;      &amp;lt;&lt;span style=&#34;color:#c6a0f6&#34;&gt;img&lt;/span&gt; &lt;span style=&#34;color:#8aadf4&#34;&gt;src&lt;/span&gt;&lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; $fallback&lt;span style=&#34;color:#8aadf4&#34;&gt;.RelPermalink&lt;/span&gt; &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&lt;/span&gt;&lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#8aadf4&#34;&gt;alt&lt;/span&gt;&lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; &lt;span style=&#34;color:#8aadf4&#34;&gt;.Text&lt;/span&gt; &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&lt;/span&gt;&lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#8aadf4&#34;&gt;loading&lt;/span&gt;&lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;lazy&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#8aadf4&#34;&gt;decoding&lt;/span&gt;&lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;async&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#8aadf4&#34;&gt;width&lt;/span&gt;&lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; $src&lt;span style=&#34;color:#8aadf4&#34;&gt;.Width&lt;/span&gt; &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&lt;/span&gt;&lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#8aadf4&#34;&gt;height&lt;/span&gt;&lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; $src&lt;span style=&#34;color:#8aadf4&#34;&gt;.Height&lt;/span&gt; &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&lt;/span&gt;&lt;span style=&#34;color:#a6da95&#34;&gt;&amp;#34;&lt;/span&gt; /&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &amp;lt;/&lt;span style=&#34;color:#c6a0f6&#34;&gt;picture&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &amp;lt;/&lt;span style=&#34;color:#c6a0f6&#34;&gt;a&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; &lt;span style=&#34;color:#c6a0f6&#34;&gt;with&lt;/span&gt; &lt;span style=&#34;color:#8aadf4&#34;&gt;.Title&lt;/span&gt; &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&lt;/span&gt;&amp;lt;&lt;span style=&#34;color:#c6a0f6&#34;&gt;figcaption&lt;/span&gt;&amp;gt;&lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; &lt;span style=&#34;color:#8aadf4&#34;&gt;.&lt;/span&gt; &lt;span style=&#34;color:#91d7e3;font-weight:bold&#34;&gt;|&lt;/span&gt; markdownify &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&lt;/span&gt;&amp;lt;/&lt;span style=&#34;color:#c6a0f6&#34;&gt;figcaption&lt;/span&gt;&amp;gt;&lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt; &lt;span style=&#34;color:#c6a0f6&#34;&gt;end&lt;/span&gt; &lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;/&lt;span style=&#34;color:#c6a0f6&#34;&gt;figure&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;{{&lt;/span&gt;&lt;span style=&#34;color:#c6a0f6&#34;&gt;end&lt;/span&gt;&lt;span style=&#34;color:#6e738d;font-style:italic&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;If you&amp;rsquo;re using Hugo, you can save this under &lt;code&gt;/layouts/_default/_markup/render-image.html&lt;/code&gt; and it will automatically optimize every image in any Markdown file. It&amp;rsquo;s that easy! Of course, you could also adapt this to a shortcode or a partial as well.&lt;/p&gt;
&lt;p&gt;This code is doing a lot for us, but let&amp;rsquo;s break it down.&lt;/p&gt;
&lt;p&gt;First, it reads the image from the page&amp;rsquo;s resources. You&amp;rsquo;ll need to &lt;a href=&#34;https://gohugo.io/content-management/page-bundles/#leaf-bundles&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;keep your images in the same directory as the post&lt;/a&gt; for this to work.&lt;/p&gt;
&lt;p&gt;If the image is wider than &lt;code&gt;960px&lt;/code&gt;, it will resize it to &lt;code&gt;960px&lt;/code&gt;. Otherwise, it will keep the image size the same and just convert it to WebP. (It will also optimize the fallback image for browsers that don&amp;rsquo;t support WebP a bit.)&lt;/p&gt;
&lt;p&gt;I also wrap the image in a link to the original, unoptimized version of the image. Some people &lt;em&gt;absolutely hate&lt;/em&gt; WebP images because they aren&amp;rsquo;t well-supported in editing software, so if they want to download them, it&amp;rsquo;s better to let them use the original photo.&lt;/p&gt;
&lt;p&gt;It&amp;rsquo;s using &lt;code&gt;loading=&amp;quot;lazy&amp;quot;&lt;/code&gt; to only load the image if it&amp;rsquo;s inside the viewport. This works in &lt;a href=&#34;https://caniuse.com/loading-lazy-attr&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;all modern browsers&lt;/a&gt;, but will just load like a normal image tag if not supported. This is only needed for images that are off-screen when the page loads.&lt;/p&gt;
&lt;p&gt;&lt;code&gt;decoding=&amp;quot;async&amp;quot;&lt;/code&gt; should give you a small performance boost &lt;a href=&#34;https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding#usage_notes&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;for off-screen images&lt;/a&gt;, so use this for images you lazy load. I&amp;rsquo;m not sure if it makes a big difference, but it might help a bit. It&amp;rsquo;s supported in &lt;a href=&#34;https://caniuse.com/mdn-html_elements_img_decoding&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;all modern browsers&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;The width and height is automatically set as well. To keep the image&amp;rsquo;s aspect ratio on smaller screens, set &lt;code&gt;max-width: 100%&lt;/code&gt; and &lt;code&gt;height: auto&lt;/code&gt; in your CSS.&lt;/p&gt;
&lt;p&gt;Finally, I add the alt text and (optionally) a caption underneath.&lt;/p&gt;
&lt;p&gt;You can then just write images like normal in your markdown:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#cad3f5;background-color:#24273a;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;![&lt;span style=&#34;color:#c6a0f6&#34;&gt;An orange tabby cat lying on the floor&lt;/span&gt;](&lt;span style=&#34;color:#8aadf4&#34;&gt;cat.jpg &amp;#34;Photo by Michael Sum on Unsplash.&amp;#34;&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;All said and done, the image will look like this:&lt;/p&gt;



&lt;figure class=&#34;full-width&#34;&gt;
  

  
    
    
  

  
  

  &lt;a href=&#34;cat.jpg&#34;&gt;
    &lt;picture&gt;
      &lt;source srcset=&#34;https://ericmurphy.xyz/blog/images/cat_hu3d03a01dcc18bc5be0e67db3d8d209a6_279464_960x0_resize_q90_h2_box.webp&#34; type=&#34;image/webp&#34;&gt;
      &lt;img src=&#34;https://ericmurphy.xyz/blog/images/cat_hu3d03a01dcc18bc5be0e67db3d8d209a6_279464_960x0_resize_q90_box.jpg&#34; alt=&#34;An orange tabby cat lying on the floor&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34; width=&#34;1920&#34; height=&#34;1280&#34; /&gt;
    &lt;/picture&gt;
  &lt;/a&gt;
  &lt;figcaption&gt;Photo by &lt;a href=&#34;https://unsplash.com/@michaelsum1228&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;Michael Sum&lt;/a&gt; on &lt;a href=&#34;https://unsplash.com/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;Unsplash&lt;/a&gt;.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;This image is only 71 KB, compared to the original, unoptimized, 279 KB image.&lt;/p&gt;
&lt;h2 id=&#34;do-you-really-need-a-fallback&#34;&gt;Do you really need a fallback?&lt;/h2&gt;
&lt;p&gt;For simplicity&amp;rsquo;s sake, I considered leaving out the fallback JPEG/PNG image and only serving WebP images. &lt;a href=&#34;https://caniuse.com/webp&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;Every modern browser&lt;/a&gt; has supported WebP for ages, and if you have a blog like this with a technical audience, I can guarantee that 99.9% of your visitors will be able to display WebP images in their browser.&lt;/p&gt;
&lt;p&gt;At the same time, including a fallback image is trivial, and I would recommend it unless, for some reason, your server is really low on disk space. I like the idea that my website can be accessible to everyone, even if they&amp;rsquo;re using an old version of Safari on an ancient Mac.&lt;/p&gt;
&lt;p&gt;But if you want to make things simple and only serve WebP images, you&amp;rsquo;ll probably be fine.&lt;/p&gt;
&lt;h2 id=&#34;but-you-can-optimize-it-even-more&#34;&gt;But you can optimize it &lt;em&gt;even more!&lt;/em&gt;&lt;/h2&gt;
&lt;p&gt;I&amp;rsquo;ve tried out additional optimizations, like also serving images in the &lt;a href=&#34;https://www.youtube.com/watch?v=5eGN_94zbKo&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;AVIF format&lt;/a&gt; for even more file size savings. But the image format is just too new and the tooling is not there. There&amp;rsquo;s no way for me to have Hugo automatically generate AVIF images or any other next-gen format. Plus, these next-gen formats like AVIF currently still have &lt;a href=&#34;http://caniuse.com/avif&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;spotty browser support&lt;/a&gt;. There are some people who have written a Bash script that will automatically generate all of your website&amp;rsquo;s images in AVIF since Hugo won&amp;rsquo;t do it for you, but for me, this is getting too complex. It&amp;rsquo;s just not worth the hassle, in my opinion. Maybe in the future, but for now, I think we can skip these.&lt;/p&gt;
&lt;p&gt;You can also &lt;a href=&#34;https://www.youtube.com/watch?v=7ZxhLpTVI24&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;generate an array of different sizes&lt;/a&gt; for the same image. For example, instead of just having one &lt;code&gt;960px&lt;/code&gt; wide image, you can also have a &lt;code&gt;360x&lt;/code&gt; wide image that loads on mobile-sized screens. You can even make one for tablets, for retina screens, and so on and so forth, but again, this is getting too complex for me. If you have a significant amount of mobile traffic, it may be worth it, but it&amp;rsquo;s not for me.&lt;/p&gt;
&lt;p&gt;My solution gets me 90% of the way there, and to me, that&amp;rsquo;s already quite far. I don&amp;rsquo;t think it&amp;rsquo;s really worth it to try to wring out the last few drops of optimization.&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>The Problem with the Minimalist Web</title>
      <link>https://ericmurphy.xyz/blog/minimalist-web/</link>
      <pubDate>Tue, 18 Jul 2023 13:04:46 +0700</pubDate>
      
      <guid>https://ericmurphy.xyz/blog/minimalist-web/</guid>
      <description>&lt;p&gt;There&amp;rsquo;s a growing subculture on the internet dubbed by some as the &amp;ldquo;minimalist web&amp;rdquo;. It&amp;rsquo;s a group of people with websites that have grown tired and disillusioned with the slow, bloated state of the modern web. Instead of building websites with the next big JavaScript framework, loading in a carousel on the home page powered by jQuery, or bringing in a 500KB image just as a background image, the minimalist web is the internet equivalent of the saying &amp;ldquo;less is more&amp;rdquo;.&lt;/p&gt;
&lt;p&gt;You&amp;rsquo;ve probably seen plenty of these sites before in the wild. These are the text-only blogs and simple, artisanal websites. You may have seen them showcased in something like the &lt;a href=&#34;https://512kb.club/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;512KB Club&lt;/a&gt;, a showcase of websites with a total page size of less than 512KB.&lt;/p&gt;
&lt;p&gt;Don&amp;rsquo;t get me wrong, I love the concept. This website can also be considered part of the &amp;ldquo;minimalist web&amp;rdquo;.&lt;/p&gt;
&lt;p&gt;But you can take the minimalist spirit too far. Some websites, in their quest for website purity, end up with ugly or even unusable websites.&lt;/p&gt;
&lt;p&gt;What am I talking about?&lt;/p&gt;
&lt;p&gt;I think the issue can best be understood by taking a look at &lt;a href=&#34;https://motherfuckingwebsite.com/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;this classic website&lt;/a&gt; (warning, strong language). This is one of the most commonly cited inspirations for a lot of personal websites I see in the wild.&lt;/p&gt;



&lt;figure class=&#34;full-width&#34;&gt;
  

  
    
    
  

  
  

  &lt;a href=&#34;mfwebsite.png&#34;&gt;
    &lt;picture&gt;
      &lt;source srcset=&#34;https://ericmurphy.xyz/blog/minimalist-web/mfwebsite_hub83c6ec343c0c7581ab6ef813aabf0d5_174031_960x0_resize_q90_h2_box_3.webp&#34; type=&#34;image/webp&#34;&gt;
      &lt;img src=&#34;https://ericmurphy.xyz/blog/minimalist-web/mfwebsite_hub83c6ec343c0c7581ab6ef813aabf0d5_174031_960x0_resize_q90_box_3.png&#34; alt=&#34;A website with no styling.&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34; width=&#34;1920&#34; height=&#34;610&#34; /&gt;
    &lt;/picture&gt;
  &lt;/a&gt;
  &lt;figcaption&gt;More bad words = more funny, am I right?&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;If you haven&amp;rsquo;t experienced this website before, this is a tongue-in-cheek screed against the modern web. This website was created in the days when every website was using a bloated WordPress theme with jQuery animations and five different webfonts. (It&amp;rsquo;s only grown more relevant over time.) It&amp;rsquo;s meant to be the complete antithesis to the websites of its time. There&amp;rsquo;s no styling, it&amp;rsquo;s a simple HTML page because &lt;em&gt;that&amp;rsquo;s all you really need to build a website!&lt;/em&gt; From one extreme to the other, this hyper-minimalist website got as much attention as it did because it did the complete opposite of the rest of the maximalist web.&lt;/p&gt;
&lt;p&gt;The problem is when people take this website too seriously. It&amp;rsquo;s meant to be a &lt;em&gt;satire&lt;/em&gt;&amp;ndash;it even says as much right on the website!&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&amp;ldquo;I&amp;rsquo;m not actually saying your shitty site should look like this. What I&amp;rsquo;m saying is that all the problems we have with websites are ones we create ourselves. Websites aren&amp;rsquo;t broken by default, they are functional, high-performing, and accessible. You break them.&amp;rdquo;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;But I think a lot of people have taken away the wrong message from this site. The point is &lt;em&gt;not&lt;/em&gt; to make your website as minimal as possible. It&amp;rsquo;s that all of the problems with the modern web are self-created. If your website is slow, inaccessible, and broken, it&amp;rsquo;s because of something &lt;em&gt;you&lt;/em&gt; did wrong. Take responsibility.&lt;/p&gt;
&lt;p&gt;But in the name of minimalism, I&amp;rsquo;ve seen a lot of atrocious websites being created based on the misunderstanding of the philosophy of this website. If you try to simply make your website as &lt;em&gt;minimal as possible&lt;/em&gt;, you usually end up with an ugly, unreadable, and unappealing website.&lt;/p&gt;
&lt;h2 id=&#34;minimalist-websites-dont-have-to-be-unreadable&#34;&gt;Minimalist websites don&amp;rsquo;t have to be unreadable&lt;/h2&gt;
&lt;p&gt;I understand the nostalgia for the 90s internet. The web was more fun and creative back then. So oftentimes you&amp;rsquo;ll see some spartan web design meant to invoke some feeling of the &amp;ldquo;good old days&amp;rdquo;.&lt;/p&gt;
&lt;p&gt;But can we please at least put to rest the terrible typography of the &amp;ldquo;good old days&amp;rdquo;?&lt;/p&gt;
&lt;p&gt;I see so many websites that are just painful to read. I&amp;rsquo;m talking about &lt;code&gt;16px&lt;/code&gt; font size and lines of text that are at the same time both too scrunched together and too wide. Reading these websites is an absolute chore. If your website is this difficult to read, how long do you think I&amp;rsquo;m going to spend reading it? Not long.&lt;/p&gt;
&lt;p&gt;I get it, we&amp;rsquo;re not all designers, nor do we all want to be. But you need to have some design sense just to make the website pleasant enough for anyone to actually want to read it.&lt;/p&gt;
&lt;p&gt;We don&amp;rsquo;t have 800x600 resolution monitors anymore. So why are we still using the web design of websites that were designed for these monitors?&lt;/p&gt;
&lt;p&gt;I don&amp;rsquo;t want to have to squint or strain to read your website. And I have 20/20 vision! Imagine all of your users that &lt;em&gt;don&amp;rsquo;t&lt;/em&gt; have perfect vision. (It&amp;rsquo;s more than you might think.)&lt;/p&gt;
&lt;p&gt;It&amp;rsquo;s really not that difficult to make your website more readable. Just add more white space, increase the &lt;code&gt;font-size&lt;/code&gt; to something like &lt;code&gt;18px&lt;/code&gt; (or even &lt;code&gt;20px&lt;/code&gt; if you&amp;rsquo;re feeling crazy), and keep the length of the lines reasonable (something like 80 characters wide or less is often recommended).&lt;/p&gt;
&lt;h2 id=&#34;minimalist-websites-dont-have-to-be-ugly&#34;&gt;Minimalist websites don&amp;rsquo;t have to be ugly&lt;/h2&gt;
&lt;p&gt;I personally don&amp;rsquo;t get the obsession with text-only websites. I get it, you like the minimalist aesthetic. Maybe you don&amp;rsquo;t want to show your face online. I understand. But the internet is inherently a visual medium, so why not take advantage of it?&lt;/p&gt;
&lt;p&gt;I can understand if you don&amp;rsquo;t want to put irrelevant images just for the sake of putting images on your website. Have you ever seen these coding blogs that put the most random images from &lt;a href=&#34;https://unsplash.com&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;Unsplash&lt;/a&gt; next to some technical tutorial just to have something to look at?&lt;/p&gt;



&lt;figure class=&#34;full-width&#34;&gt;
  

  
    
    
  

  
  

  &lt;a href=&#34;typescript.png&#34;&gt;
    &lt;picture&gt;
      &lt;source srcset=&#34;https://ericmurphy.xyz/blog/minimalist-web/typescript_hu8a976e72718add1a64300054353a5297_383183_960x0_resize_q90_h2_box_3.webp&#34; type=&#34;image/webp&#34;&gt;
      &lt;img src=&#34;https://ericmurphy.xyz/blog/minimalist-web/typescript_hu8a976e72718add1a64300054353a5297_383183_960x0_resize_q90_box_3.png&#34; alt=&#34;A blog post about TypeScript with an image of a cat as the featured image.&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34; width=&#34;1538&#34; height=&#34;471&#34; /&gt;
    &lt;/picture&gt;
  &lt;/a&gt;
  &lt;figcaption&gt;What does this cat have to do with TypeScript? Your guess is as good as mine.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;But if you&amp;rsquo;re deliberately not putting images in places where it serves your content? I think you&amp;rsquo;re doing a disservice to your readers. Is it really worth the 50-100KB you&amp;rsquo;ve saved not including an image to make your content clearer and more visually appealing? We&amp;rsquo;re humans; we&amp;rsquo;re hard-wired to like pretty things. Why not make your website look nice?&lt;/p&gt;
&lt;p&gt;I&amp;rsquo;m also tired of the boring white text on an off-black background with a fixed-width minimalist web design. Every blog looks the same. It&amp;rsquo;s &lt;em&gt;boring&lt;/em&gt;. I know this website isn&amp;rsquo;t winning any design awards either, but I try to make it a little more visually interesting than most websites. I understand a lot of people in the minimalist web space (including myself) aren&amp;rsquo;t exactly designers or don&amp;rsquo;t like working in CSS. That&amp;rsquo;s fine. But there are plenty of themes for almost any framework you could be using for your website. (&lt;a href=&#34;https://themes.gohugo.io/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;Hugo&lt;/a&gt;? &lt;a href=&#34;https://astro.build/themes/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;Astro&lt;/a&gt;?) From there, you can tweak as much or as little as you want, once you find something that looks good.&lt;/p&gt;
&lt;p&gt;You can also take advantage of minimal CSS frameworks. I personally really like &lt;a href=&#34;https://simplecss.org/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;Simple.css&lt;/a&gt;, which is basically a pre-made, customizable CSS theme for your website, if you want your website to look good without thinking too much about it. This is just one example, though; there are &lt;a href=&#34;https://github.com/dbohdan/classless-css&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;hundreds of similar&lt;/a&gt; &amp;ldquo;minimal CSS frameworks&amp;rdquo; you can find that might suit your tastes more.&lt;/p&gt;
&lt;p&gt;But of course, the best way to make your site look good is to &lt;em&gt;steal&lt;/em&gt; your CSS. My website&amp;rsquo;s CSS is hand-crafted, but there are a lot of snippets in there from various different websites and frameworks. If you find a website that you really like the design or typography from, all you have to do is open up the dev tools in your browser and find the CSS that makes something look so good. As long as you don&amp;rsquo;t completely rip off someone else&amp;rsquo;s website design, it&amp;rsquo;s perfectly fine to take little snippets from various websites and build sort of a Franken-design. &lt;a href=&#34;https://www.youtube.com/watch?v=0VkrUG3OrPc&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;&lt;em&gt;It&amp;rsquo;s alive!&lt;/em&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&#34;minimalist-websites-dont-have-to-be-anti-javascript&#34;&gt;Minimalist websites don&amp;rsquo;t have to be anti-JavaScript&lt;/h2&gt;
&lt;p&gt;To some developers, JavaScript is the devil. With all the abuse of JavaScript, it&amp;rsquo;s easy to see why it has its reputation. But there&amp;rsquo;s nothing wrong with using some JavaScript, and there&amp;rsquo;s a good chance using a bit of JavaScript will make your website even better.&lt;/p&gt;
&lt;p&gt;Have a gigantic list of blog posts or something similar on your website? Give your visitors the ability to sort it with JavaScript. Take &lt;a href=&#34;https://sive.rs/book&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;Derek Sivers&amp;rsquo;s book list&lt;/a&gt;. You can instantly sort this massive list by date, by rating, or alphabetically. How much less usable would this list be if it wasn&amp;rsquo;t for JavaScript?&lt;/p&gt;
&lt;p&gt;I even like &lt;a href=&#34;https://marcjenkins.co.uk/bookshelf/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;this more complex version of the same thing by Marc Jenkins&lt;/a&gt;. It even loads a &lt;em&gt;JavaScript library&lt;/em&gt; to provide cool animations! And yet, I think it adds a lot to the website. The script only loads in on one page and it&amp;rsquo;s only 23KB over the wire. I would still consider this a minimalist website and it still respects the user. (Although I would recommend adding &lt;code&gt;loading=&amp;quot;lazy&amp;quot;&lt;/code&gt; to the images.)&lt;/p&gt;
&lt;p&gt;If JavaScript is disabled, these sorting features don&amp;rsquo;t work, but the list of books remains. I would avoid using JavaScript for any critical features of your website, for example, a hamburger menu that won&amp;rsquo;t open without JavaScript. But when JavaScript is used to &amp;ldquo;enhance&amp;rdquo; a website or a webpage that already works fine without it, I think it can add a lot to a website.&lt;/p&gt;
&lt;p&gt;Want to include JavaScript-powered analytics on your website? Go ahead! (But please use &lt;a href=&#34;https://www.youtube.com/watch?v=9x8w9igz7Ew&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;something privacy-respecting&lt;/a&gt;.) I&amp;rsquo;ve written &lt;a href=&#34;https://ericmurphy.xyz/blog/no-analytics&#34;&gt;why I don&amp;rsquo;t use analytics on this website&lt;/a&gt;, but I&amp;rsquo;ve seen some weird web purists decry the practice outright. If you find analytics useful, use them! You&amp;rsquo;re not going to be deemed unworthy by some imagined anti-JavaScript police for using them.&lt;/p&gt;
&lt;h2 id=&#34;make-the-web-better&#34;&gt;Make the web better&lt;/h2&gt;
&lt;p&gt;I realize this list might be common sense to a lot of people, but I wanted to offer a different perspective than a lot of the dogmatism I see on some websites. Too often I see a lot of websites that are little more than a measuring contest to see who can get the smallest page bundle. But for me, one of the most interesting things about the independent web is that you have so much creative freedom to show off what the web is capable of. Use it!&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>The Vault</title>
      <link>https://ericmurphy.xyz/blog/vault/</link>
      <pubDate>Tue, 18 Jul 2023 00:00:00 +0000</pubDate>
      
      <guid>https://ericmurphy.xyz/blog/vault/</guid>
      <description>&lt;p&gt;I used to have a blog back in 2018 about web development. I ended up writing seven posts and even getting a decent amount of traction, but I ultimately stopped writing and decided to delete all the old posts from my website after I redesigned my site. Since then, I&amp;rsquo;ve put most of my effort into my &lt;a href=&#34;https://youtube.com/@ericmurphyxyz&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;YouTube channel&lt;/a&gt; instead.&lt;/p&gt;
&lt;p&gt;It&amp;rsquo;s been a while since I&amp;rsquo;ve thought about these long-forgotten posts, but I was recently inspired after reading a blog and finding content dating back years. (I don&amp;rsquo;t remember which blog specifically inspired me, but I&amp;rsquo;ll let you know if I remember.) With it, there was a notice saying that the old posts are kept up to show how the author&amp;rsquo;s writing has progressed over the years. Even though the old posts were outdated, filled with old ideas the author doesn&amp;rsquo;t necessarily agree with anymore, and filled with amateurish writing, they were all there.&lt;/p&gt;
&lt;p&gt;With this in mind, I&amp;rsquo;ve decided to bring back my old posts in a page titled &lt;strong&gt;&lt;a href=&#34;https://ericmurphy.xyz/vault&#34;&gt;The Vault&lt;/a&gt;&lt;/strong&gt;. These posts aren&amp;rsquo;t up to my current quality standards, so I&amp;rsquo;m not putting them under the main blog, but they&amp;rsquo;re there if you want to travel back in time and see my old writing.&lt;/p&gt;
&lt;p&gt;Let it be known that &lt;strong&gt;I certainly do not recommend reading these&lt;/strong&gt;&amp;ndash;I no longer believe some of the same things I did when I wrote them, the writing is terrible, and they&amp;rsquo;re filled with curse words (which I thought was really cool and gave a level of authenticity back then). But for archival reasons, I&amp;rsquo;m putting them back up on the website. Maybe you&amp;rsquo;ll find some entertainment from them, or at least see how my writing has changed over the years (hopefully for the better).&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>Independent Websites and Where to Find Them</title>
      <link>https://ericmurphy.xyz/blog/discoverability/</link>
      <pubDate>Thu, 29 Jun 2023 19:08:00 +0700</pubDate>
      
      <guid>https://ericmurphy.xyz/blog/discoverability/</guid>
      <description>&lt;p&gt;I (and many others) have done a lot of complaining about the modern web. &lt;a href=&#34;https://www.youtube.com/watch?v=1iOVatAR-bU&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;I&amp;rsquo;ve made videos in the past&lt;/a&gt; talking about how I miss the old, independent web when everyone had their own website and there was always a cool, new, unique website that you could find and explore.&lt;/p&gt;
&lt;p&gt;But the independent web is &lt;strong&gt;alive and well&lt;/strong&gt;! I just didn&amp;rsquo;t know about it.&lt;/p&gt;
&lt;p&gt;But you can&amp;rsquo;t really blame me. Websites these days are hard to find. At least, the actually &lt;em&gt;interesting&lt;/em&gt; ones are. &lt;a href=&#34;https://www.currentaffairs.org/2020/12/how-seo-is-gentrifying-the-internet&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;It&amp;rsquo;s almost impossible to find anything of value these days on any search engine&lt;/a&gt;, because they&amp;rsquo;re so filled with terrible SEO-spam websites that offer no value besides knowing how to game the search engine system.&lt;/p&gt;
&lt;p&gt;But at the same time, I&amp;rsquo;ve managed to find hundreds of interesting websites over the past few weeks by taking a look under the surface.&lt;/p&gt;
&lt;p&gt;So let&amp;rsquo;s find out how to find these websites.&lt;/p&gt;
&lt;h2 id=&#34;webrings-are-back&#34;&gt;Webrings are back?&lt;/h2&gt;



&lt;figure class=&#34;full-width&#34;&gt;
  

  
    
    
  

  
  

  &lt;a href=&#34;webrings.png&#34;&gt;
    &lt;picture&gt;
      &lt;source srcset=&#34;https://ericmurphy.xyz/blog/discoverability/webrings_huece34bf7e0a38a5f2dc5c4463e9462cd_78400_960x0_resize_q90_h2_box_3.webp&#34; type=&#34;image/webp&#34;&gt;
      &lt;img src=&#34;https://ericmurphy.xyz/blog/discoverability/webrings_huece34bf7e0a38a5f2dc5c4463e9462cd_78400_960x0_resize_q90_box_3.png&#34; alt=&#34;A website with links to three different webrings&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34; width=&#34;1920&#34; height=&#34;670&#34; /&gt;
    &lt;/picture&gt;
  &lt;/a&gt;
  &lt;figcaption&gt;The more webrings you&amp;rsquo;re in, the cooler you are.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;If you&amp;rsquo;re not aware of this ancient technology, you&amp;rsquo;re probably not old enough to remember. But in the early days of the internet, this was a way of finding new websites in a similar niche.&lt;/p&gt;
&lt;p&gt;The idea is simple&amp;ndash;you join a webring, usually by emailing the owner and asking to be included&amp;ndash;and you then add a widget to your website with a &amp;ldquo;previous&amp;rdquo; and &amp;ldquo;next&amp;rdquo; button. Users can then cycle through all of the different websites in the webring and (hopefully) find other interesting websites.&lt;/p&gt;
&lt;p&gt;But they&amp;rsquo;re making a comeback. Most of them have some sort of nostalgia for the &amp;ldquo;good ol&amp;rsquo; days&amp;rdquo; of the internet and have a certain level of kitsch, but depending on the webring, you can find some good sites.&lt;/p&gt;
&lt;p&gt;Some webrings that you may (or may not) have heard of:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&#34;https://hotlinewebring.club/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;Hotline Webring&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;https://xn--sr8hvo.ws/directory&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;IndieWeb Webring&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;https://foreverliketh.is/#2-lainchan-webring&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;LainChan Webring&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;I like the idea, but not so much the execution.&lt;/p&gt;
&lt;p&gt;One of the biggest issues that a lot of webrings have is that &lt;strong&gt;they&amp;rsquo;re just not niche enough&lt;/strong&gt;. When you have a webring of &amp;ldquo;anybody that has an independent website&amp;rdquo;, you get a lot of websites, but not a lot of cohesion between any of them. On the &lt;a href=&#34;https://hotlinewebring.club/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;Hotline Webring&lt;/a&gt;, on one website, you&amp;rsquo;ll find Vim tips and tricks, and on the next, you&amp;rsquo;ll find the ramblings of an autistic gay furry. Some webrings are more niche and don&amp;rsquo;t just accept everyone, but they&amp;rsquo;re not the majority. One of the biggest active webrings, the &lt;a href=&#34;https://forum.yesterweb.org/viewtopic.php?p=4611#p4611&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;Yesterweb Ring&lt;/a&gt;, which had &lt;em&gt;over 800 websites&lt;/em&gt; was recently shut down because there&amp;rsquo;s no way to have any sort of community with &lt;em&gt;over 800 websites&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;Another issue is that the &lt;a href=&#34;https://www.bikobatanari.art/posts/2023/personal-link-directories-are-better&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;quality of websites in a webring can vary &lt;em&gt;vastly&lt;/em&gt;&lt;/a&gt;. One website might be a carefully crafted, hand-coded website with years of content. The next is a blank page saying &lt;em&gt;&amp;ldquo;I&amp;rsquo;ll update this someday lol.&amp;rdquo;&lt;/em&gt; Some websites have been abandoned for years. Some are just broken links. Many don&amp;rsquo;t inlude the webring widget so there&amp;rsquo;s no way to go to the next website.&lt;/p&gt;
&lt;p&gt;There are a lot of issues with webrings, but there are some that manage to do it right. Still, there aren&amp;rsquo;t a lot of great ones out there. If someone can find a &lt;em&gt;well-curated webring that makes sure all the websites are quality and actively maintained, in a specific enough niche&lt;/em&gt;, let me know!&lt;/p&gt;
&lt;p&gt;But due to all of these issues, I can&amp;rsquo;t really recommend any webrings as a good way of website discoverability. You will definitely find &lt;em&gt;some&lt;/em&gt; websites, that&amp;rsquo;s for sure, but they&amp;rsquo;re probably not what you&amp;rsquo;re looking for.&lt;/p&gt;
&lt;h2 id=&#34;search-engines-but-not-the-ones-youre-thinking-of&#34;&gt;Search engines (but not the ones you&amp;rsquo;re thinking of)&lt;/h2&gt;



&lt;figure class=&#34;full-width&#34;&gt;
  

  
    
    
  

  
  

  &lt;a href=&#34;wiby.png&#34;&gt;
    &lt;picture&gt;
      &lt;source srcset=&#34;https://ericmurphy.xyz/blog/discoverability/wiby_hu5358ba6b3df798c6a2979909d3f7ee17_49869_960x0_resize_q90_h2_box_3.webp&#34; type=&#34;image/webp&#34;&gt;
      &lt;img src=&#34;https://ericmurphy.xyz/blog/discoverability/wiby_hu5358ba6b3df798c6a2979909d3f7ee17_49869_960x0_resize_q90_box_3.png&#34; alt=&#34;Wiby search engine&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34; width=&#34;1920&#34; height=&#34;851&#34; /&gt;
    &lt;/picture&gt;
  &lt;/a&gt;
  &lt;figcaption&gt;&amp;quot;A search engine for the classic web.&amp;quot;&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Obviously, I&amp;rsquo;m not talking about search engines like Google here. Nor am I talking about DuckDuckGo, Brave, or any others, becaues they all have the same issue of being completely unable to surface any small, independent websites.&lt;/p&gt;
&lt;p&gt;What I &lt;em&gt;am&lt;/em&gt; talking about is &lt;a href=&#34;https://wiby.org&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;Wiby&lt;/a&gt;. Wiby is a search engine for the &amp;ldquo;classic web&amp;rdquo; that only indexes small, minimal websites. Just like the old days of Google when you could find anything on there, right?&lt;/p&gt;
&lt;p&gt;The way Wiby works is that if you want your site to be indexed, you have to manually submit it via a form. Apparently, someone has already submitted my site, which I learned of by searching for myself like a massive narcissist. Thanks!&lt;/p&gt;
&lt;p&gt;However, the biggest issue with Wiby is that &lt;em&gt;it&amp;rsquo;s very difficult to actually find anything relevant&lt;/em&gt;. This is because whenever you submit a page to Wiby, most of the time, &lt;a href=&#34;https://wiby.org/submit/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;it only indexes that specific page&lt;/a&gt; and not any other pages on that website. That means that when you search for my website, you will only find the home page, not any other page or post. In fact, it is discouraged to submit more than one page of the same website! That means you can find my website, but none of what I&amp;rsquo;ve written, which is, of course, the most interesting part. Most websites indexed by Wiby have the same problem. Some, notably, have multiple pages indexed, but these are the minority. I&amp;rsquo;d be interested to know what the requirement is for a website to have multiple pages crawled.&lt;/p&gt;
&lt;p&gt;But as a result, I find it difficult to find much of value on Wiby. If you&amp;rsquo;re looking for a site about a general topic, you might find it, but if you&amp;rsquo;re looking for, say, blog posts on a topic from independent websites, they&amp;rsquo;re going to be difficult to find.&lt;/p&gt;
&lt;p&gt;If you just want to &amp;ldquo;surf the web&amp;rdquo;, you might find the &amp;ldquo;surprise me&amp;rdquo; link on the home page entertaining. Click it and you&amp;rsquo;ll be taken to a random page that they index. Most of the time, this will be a website about something you have absolutely no interest in that hasn&amp;rsquo;t been updated in 20 years, but it&amp;rsquo;s at least a good way to kill some time if you&amp;rsquo;re procrastinating on something.&lt;/p&gt;
&lt;p&gt;There are some other &amp;ldquo;indie&amp;rdquo; search engines out there, but at least in my experience, I find them all to be the same or worse than Wiby in terms of quality, so I don&amp;rsquo;t think they&amp;rsquo;re worth mentioning.&lt;/p&gt;
&lt;h2 id=&#34;curated-lists&#34;&gt;Curated lists&lt;/h2&gt;



&lt;figure class=&#34;full-width&#34;&gt;
  

  
    
    
  

  
  

  &lt;a href=&#34;cozylinks.png&#34;&gt;
    &lt;picture&gt;
      &lt;source srcset=&#34;https://ericmurphy.xyz/blog/discoverability/cozylinks_hu72df804ae6d038e0c51c1a7a92f05c91_1783778_960x0_resize_q90_h2_box_3.webp&#34; type=&#34;image/webp&#34;&gt;
      &lt;img src=&#34;https://ericmurphy.xyz/blog/discoverability/cozylinks_hu72df804ae6d038e0c51c1a7a92f05c91_1783778_960x0_resize_q90_box_3.png&#34; alt=&#34;A cozy links page&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34; width=&#34;1920&#34; height=&#34;984&#34; /&gt;
    &lt;/picture&gt;
  &lt;/a&gt;
  &lt;figcaption&gt;88x31 site banners are optional.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;The last, and in my opinion, the best, way of finding independent websites is the classic &amp;ldquo;&lt;a href=&#34;https://ericmurphy.xyz/links&#34;&gt;Links&lt;/a&gt;&amp;rdquo; page.&lt;/p&gt;
&lt;p&gt;Back in the day, I had a website and linked to other websites. That&amp;rsquo;s just what you did whenever you found an interesting-looking website in the same niche as yours. You didn&amp;rsquo;t post a link to Twitter, you posted it on your website. Some websites would let you email them requesting to be put on their Links page. When you got a bigger site to link to you, that&amp;rsquo;s how you know you made it!&lt;/p&gt;
&lt;p&gt;Thankfully, more and more personal websites are starting to catch on to this trend again. You can find these sometimes called a &lt;a href=&#34;https://maya.land/blogroll.opml&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;blogroll&lt;/a&gt;, sometimes called &lt;a href=&#34;https://cheapskatesguide.org/resources.html&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;resources&lt;/a&gt; or &lt;a href=&#34;https://www.kooslooijesteijn.net/bookmarks&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;bookmarks&lt;/a&gt;. Whatever the page is called, it&amp;rsquo;s a portal to other indie websites. Some might be in the same niche as you&amp;ndash;for example, I link to lots of others in the &amp;ldquo;computers&amp;rdquo; space&amp;ndash;but you can really link to whatever random website you want. Some websites even link to interesting articles, which can be even more fun to explore.&lt;/p&gt;
&lt;p&gt;There are also more general lists of &lt;a href=&#34;http://biglist.terraaeon.com/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;personal websites&lt;/a&gt; and &lt;a href=&#34;https://blogroll.org/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;blogs&lt;/a&gt; if you want more variety. These can be useful, but I prefer those curated to a specific person&amp;rsquo;s interest. Curated links from a website I already enjoy reading mean a lot more than just a giant list of &amp;ldquo;every&amp;rdquo; personal website.&lt;/p&gt;
&lt;p&gt;At this point, I think that every personal website should have a Links page, and I almost see it as selfish if they don&amp;rsquo;t. If you complain about how hard it is to find indie websites and you &lt;em&gt;don&amp;rsquo;t&lt;/em&gt; have some kind of Links page showcasing other websites you enjoy, I find it almost hypocritical.&lt;/p&gt;
&lt;p&gt;Besides having your own links page, you can also link to other websites in your content. In this article, I&amp;rsquo;ve already linked to a handful of other interesting websites that you can explore. I resonated with &lt;a href=&#34;https://manuelmoreale.com/i-hate-internal-linking&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;a post I recently read&lt;/a&gt; about how websites need more links to other websites, not just to other pages on the website. I don&amp;rsquo;t entirely agree with the article, but I think the more you can link to others&amp;rsquo; websites, the easier it is for your users to find great content.&lt;/p&gt;


&lt;aside class=&#34;note&#34;&gt;
    &lt;strong class=&#34;note-header&#34;&gt;Wondering where to start?&lt;/strong&gt;
    Of course, I have a &lt;a href=&#34;https://ericmurphy.xyz/links&#34;&gt;Links&lt;/a&gt; page as well. Browse through some of the links and see how many other Links pages you can find!
&lt;/aside&gt;

</description>
    </item>
    
    <item>
      <title>Why I Stopped Using Analytics on My Website</title>
      <link>https://ericmurphy.xyz/blog/no-analytics/</link>
      <pubDate>Mon, 19 Jun 2023 00:00:00 +0000</pubDate>
      
      <guid>https://ericmurphy.xyz/blog/no-analytics/</guid>
      <description>


&lt;figure class=&#34;full-width&#34;&gt;
  

  
    
    
  

  
  

  &lt;a href=&#34;analytics.png&#34;&gt;
    &lt;picture&gt;
      &lt;source srcset=&#34;https://ericmurphy.xyz/blog/no-analytics/analytics_hu9d1f36042cb5274221cfbf2c15294411_62037_960x0_resize_q90_h2_box_3.webp&#34; type=&#34;image/webp&#34;&gt;
      &lt;img src=&#34;https://ericmurphy.xyz/blog/no-analytics/analytics_hu9d1f36042cb5274221cfbf2c15294411_62037_960x0_resize_q90_box_3.png&#34; alt=&#34;An analytics dashboard&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34; width=&#34;1781&#34; height=&#34;757&#34; /&gt;
    &lt;/picture&gt;
  &lt;/a&gt;
  
&lt;/figure&gt;
&lt;p&gt;This website is &lt;strong&gt;analytics-free&lt;/strong&gt;!&lt;/p&gt;
&lt;p&gt;If you know me, I&amp;rsquo;m sure you understand &lt;a href=&#34;https://www.youtube.com/watch?v=NJmtkh-3LBw&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;why I don&amp;rsquo;t use Google Analytics&lt;/a&gt;. But there are lots of other good, privacy-respecting analytics services and softwares out there. I&amp;rsquo;ve even done &lt;a href=&#34;https://www.youtube.com/watch?v=9x8w9igz7Ew&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;several&lt;/a&gt; &lt;a href=&#34;https://www.youtube.com/watch?v=qKSqTPY-qV8&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;videos&lt;/a&gt; about privacy-respecting web analytics. They&amp;rsquo;re very good, and I still recommend them to this day. I&amp;rsquo;ve also used these services in the past on my website.&lt;/p&gt;
&lt;p&gt;However, &lt;strong&gt;I&amp;rsquo;ve still chosen to not use analytics at all for this website.&lt;/strong&gt;&lt;/p&gt;
&lt;h2 id=&#34;why-not&#34;&gt;Why not?&lt;/h2&gt;
&lt;p&gt;This may seem somewhat hypocritical, as I use a service that collects &lt;strong&gt;a metric-ton of analytics&lt;/strong&gt;. It&amp;rsquo;s called &lt;a href=&#34;https://youtube.com/@ericmurphyxyz/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;YouTube&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;But analytics for a website makes less sense. If one of my blog posts &amp;ldquo;goes viral&amp;rdquo;, it doesn&amp;rsquo;t really impact my life at all. What if I were to see that a blog post went viral on Reddit and got 10 times the traffic that I normally do?&lt;/p&gt;
&lt;p&gt;Well, it would be exciting, but that&amp;rsquo;s about it. It doesn&amp;rsquo;t really translate to me making more money or my life materially getting better at all.&lt;/p&gt;
&lt;p&gt;But if it did really help someone, they might send me an email telling me how it helped them, or changed their mind about something. To me, a single email like that is much more impactful than thousands of &amp;ldquo;views&amp;rdquo;.&lt;/p&gt;
&lt;h2 id=&#34;they-dont-even-work&#34;&gt;They don&amp;rsquo;t even work&lt;/h2&gt;
&lt;p&gt;Not to mention that web analytics aren&amp;rsquo;t even accurate. &lt;a href=&#34;https://plausible.io/blog/google-analytics-adblockers-missing-data&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;Especially with a more technical audience&lt;/a&gt;, like I have, a good portion of people visiting my website are probably using some form of an ad or tracker blocker. This also blocks analytics, which leads to very skewed results. When using Google Analytics, it&amp;rsquo;s very common that your numbers will be vastly off from the actual number of visitors.&lt;/p&gt;
&lt;p&gt;Even with a self-hosted or privacy-respecting option, it usually involves loading in a small JavaScript file that most blockers are smart enough to block. Back when I used analytics for my site, every browser that I used blocked my own script. &lt;a href=&#34;https://www.youtube.com/watch?v=Fr8UFJzpNls&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;Firefox&lt;/a&gt; with uBlock Origin blocked it, as did &lt;a href=&#34;https://www.youtube.com/watch?v=uB845Elrds0&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;Brave&lt;/a&gt;. So I&amp;rsquo;m still getting the same, skewed results that I would get with Google Analytics.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;I&lt;/em&gt; didn&amp;rsquo;t even want to get my own analytics script. That&amp;rsquo;s why I had my browser configured to block scripts like it. So why was I pushing something to my visitors that not even I would accept?&lt;/p&gt;
&lt;h2 id=&#34;other-reasons&#34;&gt;Other reasons&lt;/h2&gt;
&lt;p&gt;I like my website to be fast, like the old days of the internet, which were ironically faster than the internet these days. Google Analytics is notoriously bloated, but even simpler analytics services can still bring in a lot of unnecessary JavaScript. Without analytics, my site is just that much more performant. Does a few kilobytes of JavaScript &lt;em&gt;really&lt;/em&gt; make a big difference? Probably not, but I like the feeling of optimizing my website as much as possible.&lt;/p&gt;
&lt;p&gt;Plus, with no tracking, you never have to include any stupid GDPR or cookie consent pop-ups. Isn&amp;rsquo;t everyone tired of clicking on the annoying cookie banners on every website?&lt;/p&gt;
&lt;p&gt;If you still want some kind of analytics, you can check your server logs. I&amp;rsquo;ve played around with a tool called &lt;a href=&#34;https://goaccess.io/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;GoAccess&lt;/a&gt; in the past that gives you a report similar to a lot of analytics services. Best of all, there&amp;rsquo;s no performance loss because you&amp;rsquo;re not loading in any additional scripts.&lt;/p&gt;
&lt;h2 id=&#34;im-not-against-analytics&#34;&gt;I&amp;rsquo;m not against analytics&lt;/h2&gt;
&lt;p&gt;Now, I&amp;rsquo;m really not against the concept of analytics where they are necessary. If, for example, you&amp;rsquo;re running an ad campaign for your website, you most definitely do want to see if your money is being well-spent or not. A lot of people in the &amp;ldquo;web minimalism&amp;rdquo; space are very all-or-nothing, where your site must contain zero JavaScript and look like it&amp;rsquo;s still the 90&amp;rsquo;s, or else it&amp;rsquo;s &lt;strong&gt;bloated&lt;/strong&gt;. Of course, I don&amp;rsquo;t think you need to go to such extremes, but I very much think that JavaScript should only be used if it&amp;rsquo;s really necessary. A lot of times analytics just are not needed, and the common wisdom that you need to install Google Analytics &lt;em&gt;on every new website you make&lt;/em&gt; just doesn&amp;rsquo;t make sense.&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>Welcome to My “New” Website</title>
      <link>https://ericmurphy.xyz/blog/new-website/</link>
      <pubDate>Thu, 08 Jun 2023 00:00:00 +0000</pubDate>
      
      <guid>https://ericmurphy.xyz/blog/new-website/</guid>
      <description>&lt;p&gt;It&amp;rsquo;s time for a new website, and &lt;strong&gt;a new philosophy behind my website&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Functionally, the website isn&amp;rsquo;t much different from the previous iteration. The styles are a little bit different and things are a little bit better organized. But under the hood, I&amp;rsquo;m still using &lt;a href=&#34;https://gohugo.io&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;Hugo&lt;/a&gt;, my favorite static site generator. There isn&amp;rsquo;t some crazy technological change or a massive, ground-up redesign.&lt;/p&gt;
&lt;p&gt;But my approach to the website is going to be very different. A kind of sad realization I recently made is that &lt;strong&gt;the personal website is just about dead&lt;/strong&gt;. You&amp;rsquo;ve probably seen these kinds of websites a lot&amp;ndash;if you visit someone&amp;rsquo;s website these days, most of the time it will be a blank white (sometimes black) page with a photo of them, one sentence about them, and 3-5 links to their social media accounts. Sometimes, if you&amp;rsquo;re really lucky, you&amp;rsquo;ll get a handful of blog posts (with the last one written three years ago).&lt;/p&gt;



&lt;figure class=&#34;full-width&#34;&gt;
  

  
    
    
  

  
  

  &lt;a href=&#34;old-website.png&#34;&gt;
    &lt;picture&gt;
      &lt;source srcset=&#34;https://ericmurphy.xyz/blog/new-website/old-website_hu74badd1b84da8b0b416575d2457ccdb5_346791_960x0_resize_q90_h2_box_3.webp&#34; type=&#34;image/webp&#34;&gt;
      &lt;img src=&#34;https://ericmurphy.xyz/blog/new-website/old-website_hu74badd1b84da8b0b416575d2457ccdb5_346791_960x0_resize_q90_box_3.png&#34; alt=&#34;My old website with only a few links to my social media and nothing else&amp;amp;quot;&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34; width=&#34;1876&#34; height=&#34;829&#34; /&gt;
    &lt;/picture&gt;
  &lt;/a&gt;
  &lt;figcaption&gt;My old website. Yes, this was the only page on the website.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Personal websites are dead because all of the actual important content anyone posts is on a different website. You don&amp;rsquo;t upload photos to your website any more; you upload them to Instagram. Random thoughts? Twitter. Your resume? LinkedIn. Some personal websites have taken this to its logical conclusion and now just redirect straight to their Twitter or LinkedIn account.&lt;/p&gt;
&lt;p&gt;At the same time, some of the most fun I have on the internet these days is exploring the few personal websites still out there. Usually these are websites that have been around for ages and have so much random content you can spend days reading it all. My favorites are the ones that aren&amp;rsquo;t just a list of technical blog posts they&amp;rsquo;ve written. Instead of just talking about their career, the best are those that share about their life, their weird hobbies, their philosophical musings, books they like, or the random black-and-white photographs they&amp;rsquo;ve taken.&lt;/p&gt;
&lt;p&gt;I get it&amp;ndash;it&amp;rsquo;s more gratifying to post on a social media where you can immediately see how many people &amp;ldquo;like&amp;rdquo; or &amp;ldquo;view&amp;rdquo; your content. I&amp;rsquo;ve definitely done the same with my &lt;a href=&#34;https://youtube.com/@ericmurphyxyz&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;YouTube&lt;/a&gt;. But there&amp;rsquo;s something about having a personal website that you own and control and can present however you like that seems so much freer than any other social media.&lt;/p&gt;
&lt;h2 id=&#34;what-to-expect&#34;&gt;What to expect&lt;/h2&gt;
&lt;p&gt;So going forward, I&amp;rsquo;m going to start to fill out my website. In the past, I&amp;rsquo;ve done the same thing as others and basically used my website as just a &amp;ldquo;Linktree&amp;rdquo; clone for people to find my various presences online. But I&amp;rsquo;d like others to do the same as me and actually have an interesting place to call home on the web. So I&amp;rsquo;d better start by &amp;ldquo;leading the way&amp;rdquo;, in a way.&lt;/p&gt;
&lt;p&gt;I know, this is getting to be a cliché of the personal website&amp;ndash;a redesign and a commitment to start &amp;ldquo;posting more&amp;rdquo; only to never touch it again for the next year. But I&amp;rsquo;ve grown so disillusioned with the modern web that I want to contribute to actually making it better instead of just complaining about it.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;There&amp;rsquo;s a lot of people lamenting the state of the web, but not a lot actively participating in making it better.&lt;/strong&gt; So hopefully, in some small way, I can help to break the cycle.&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>Why I Will Never Join Mastodon (or the rest of the Fediverse)</title>
      <link>https://ericmurphy.xyz/blog/mastodon/</link>
      <pubDate>Tue, 15 Nov 2022 00:00:00 +0000</pubDate>
      
      <guid>https://ericmurphy.xyz/blog/mastodon/</guid>
      <description>&lt;p&gt;Mastodon is in the news again after Elon Musk&amp;rsquo;s takeover of Twitter. Twitter users are up in arms about how they think that Twitter is doomed due to the change in management. Since everyone is predicting this as &amp;ldquo;the end&amp;rdquo; of Twitter, they&amp;rsquo;re looking for an alternative.&lt;/p&gt;
&lt;p&gt;Mastodon has been a popular alternative that&amp;rsquo;s been around for several years already. Mastodon is part of the &amp;ldquo;fediverse&amp;rdquo;, which is social media without the centralized companies. With the fediverse, you can enjoy a Twitter-like platform while allowing anyone to host their own instance of it on their own server.&lt;/p&gt;
&lt;p&gt;The problems of social media are no secret. You got banned from Twitter? You can create your own Mastodon server where you can say whatever you want. Don&amp;rsquo;t like the creepy tracking and selling of your user data? Mastodon is free and open-source, so you can verify that it&amp;rsquo;s not collecting your personal data.&lt;/p&gt;
&lt;p&gt;When Mastodon was new, everyone inside the free and open-source software community was going crazy over the new alternative to social media. Social media without all the bad stuff? Sign me up! Masses of FOSS enthusiasts defiantly deleted their Twitter account and joined Mastodon.&lt;/p&gt;
&lt;p&gt;There&amp;rsquo;s just one problem with the entire idea, and the reason why I never signed up.&lt;/p&gt;
&lt;p&gt;Mastodon is &lt;strong&gt;still&lt;/strong&gt; social media!&lt;/p&gt;
&lt;p&gt;A lot of people seem to think that the main problem with these platforms is the fact that they&amp;rsquo;re &amp;ldquo;centralized&amp;rdquo;. While it seems like a good thing that these self-hosted social media platforms don&amp;rsquo;t treat their users as products to be sold to companies for advertising, it doesn&amp;rsquo;t capture the bigger picture in my opinion. &lt;strong&gt;Social media is useless at best and actively harmful at its worst.&lt;/strong&gt; In my opinion, there has &lt;em&gt;never&lt;/em&gt; been anything of value to be found on social media. I know, because I used to use Twitter before I finally closed my account—but not before wasting countless hours scrolling through it.&lt;/p&gt;
&lt;p&gt;Specifically, I&amp;rsquo;m going to be talking about Mastodon and Twitter in this post, but much of it applies to other fediverse social media. I don&amp;rsquo;t care about Facebook or Instagram fediverse alternatives, either. But since everyone&amp;rsquo;s talking about Mastodon, let&amp;rsquo;s talk about Mastodon.&lt;/p&gt;
&lt;h2 id=&#34;the-dark-patterns-are-still-there&#34;&gt;The dark patterns are still there&lt;/h2&gt;
&lt;p&gt;Probably the most common complaint about social media is how addictive it is. In the past few years, more and more people have come to realize how difficult it is to simply not compulsively check social media. This is no accident. Social media companies like Twitter have a very real financial incentive to keep you on their platform for as long as possible. The longer you stare at their website or app, the more advertising dollars they get. The designers that work at these companies know this, and they intentionally make these platforms as addictive as they can.&lt;/p&gt;
&lt;p&gt;Features that are now ubiquitous on the web, like infinite scrolling or notifications with a bright red badge were specifically created to make users spend as much time as possible on the app. Despite this, Mastodon copies the vast majority of their UI from Twitter, keeping the addictive dark patterns for without even thinking about it—there are no advertisers to sell to, but the site is still designed to keep you on it as long as possible!&lt;/p&gt;
&lt;h2 id=&#34;social-media-isnt-social&#34;&gt;Social media isn&amp;rsquo;t &amp;ldquo;social&amp;rdquo;&lt;/h2&gt;
&lt;p&gt;It&amp;rsquo;s become almost a meme at this point, Mark Zuckerburg getting up on stage to tell everyone how his product is &amp;ldquo;bringing people together&amp;rdquo;. Everyone knows it&amp;rsquo;s a lie, but he still likes to pretend this is true.&lt;/p&gt;
&lt;p&gt;Social media has never done anything but bring people further apart. Now you can get the dopamine of social interaction without actually going out in real life and talking to anyone. It feels good at the moment but you end up even more socially isolated and depressed in the end. The people who spend the most time on social media should be the most &amp;ldquo;connected&amp;rdquo;, but everyone knows these people are the most neurotic and anti-social in real life.&lt;/p&gt;
&lt;p&gt;Even getting a surface-level update about someone in your life pales in comparison to the smallest &amp;ldquo;real&amp;rdquo; action. Actually calling a friend or relative on the phone is so much more meaningful than &amp;ldquo;liking&amp;rdquo; a baby photo.&lt;/p&gt;
&lt;p&gt;Mastodon doesn&amp;rsquo;t solve this problem.&lt;/p&gt;
&lt;h2 id=&#34;the-medium-is-the-message&#34;&gt;The medium is the message&lt;/h2&gt;
&lt;p&gt;Twitter makes minutiae the method of communication. Twitter is exclusively for short-form content, and makes it nearly impossible to publish any meaningful content. There&amp;rsquo;s a reason why Twitter and, by extent, Mastodon,
is constantly obsessed with current events. Suddenly, political drama and celebrity gossip become the most important things in the world. Everyone has an opinion, and you can share it with just a &amp;ldquo;tweet&amp;rdquo; (or in Mastodon&amp;rsquo;s case, a &amp;ldquo;toot&amp;rdquo;). These insignificant issues simply aren&amp;rsquo;t important enough to turn into a full-length idea (for example, with a full blog post). The Twitter format removes the need for the type of critical thinking required to convert a fleeting thought into something more substantive.&lt;/p&gt;
&lt;p&gt;Due to the nature of the platform, Twitter don&amp;rsquo;t reward insightful takes. Since you&amp;rsquo;re forced to write short-form content, the most reductive posts are the majority and clear-headed thoughts are few. Mastodon doesn&amp;rsquo;t solve this problem. Pleroma, another fediverse Twitter clone removes the character limit, but since the layout is the same as Twitter, the short-form medium remains the same.&lt;/p&gt;
&lt;h2 id=&#34;the-network-effect-makes-everything-seem-more-important&#34;&gt;The network effect makes everything seem more important&lt;/h2&gt;
&lt;p&gt;Twitter has a way of making the smallest things seem like life-and-death issues.But the fact is that if most thoughts posted to Twitter were posted somewhere other than Twitter, no one would care. The only reason posts on Twitter matter is because likes and retweets artificially give these thoughts more importance than they really deserve.&lt;/p&gt;
&lt;p&gt;As an example, look at anyone who has ever left Twitter (or been kicked off) and then gone on to create their own microblog on their own website. Donald Trump tried it and instantly realized that nobody cares about the short-form content he writes on his own website. That&amp;rsquo;s because most content written on Twitter is complete nonsense. The only reason people read it is because Twitter gives you an endless stream of nonsense that serves as a way to pass the time. If Donald Trump really had anything of value to say via microblogging, the deplatforming wouldn&amp;rsquo;t have hurt nearly as badly as it did.&lt;/p&gt;
&lt;p&gt;I&amp;rsquo;ve seen other public figures &amp;ldquo;get fed up&amp;rdquo; with Twitter, make an angry blog post about it, create their own &amp;ldquo;microblog&amp;rdquo; website, make a few posts on it, and then give up and go back to Twitter, because nobody cares about their own microblog.&lt;/p&gt;
&lt;p&gt;Every once in a while, there&amp;rsquo;s someone who almost manages to use Twitter for good. A while back, the Twitter user Naval Ravikant got Twitter-famous as a &amp;ldquo;guru&amp;rdquo;. He created a huge tweet thread on &amp;ldquo;How to Get Rich&amp;rdquo;. This was a first for Twitter—actually useful information in tweet format! It was a little pithy, but it had some good advice. This tweet thread gathered a lot of attention, and over the next few months and years, he published a podcast, gave interviews on a lot of popular podcasts, and even had a book published compiling his tweets and essays. The thing is, &lt;em&gt;all&lt;/em&gt; of these mediums are better ways to consume his information! In his podcast, he goes over all of his &amp;ldquo;How to Get Rich&amp;rdquo; tweets in much more detail. I learned &lt;strong&gt;much&lt;/strong&gt; more listening to a single podcast interview he gave than I ever learned from reading his tweets, even if his tweets are more thoughtful than most. These days, he has some pretty good &amp;ldquo;quotables&amp;rdquo; on his Twitter but not much more.&lt;/p&gt;
&lt;p&gt;Mastodon doesn&amp;rsquo;t solve this problem.&lt;/p&gt;
&lt;h2 id=&#34;you-dont-have-anything-important-to-say&#34;&gt;You don&amp;rsquo;t have anything important to say.&lt;/h2&gt;
&lt;p&gt;Sorry to be the bearer of bad news, but most people don&amp;rsquo;t have anything important to say. And Twitter, rather than &amp;ldquo;democratizing&amp;rdquo; media by giving anyone a voice, just gives a platform for people to blurt out the first thing that pops into their mind. Since most people don&amp;rsquo;t have any unique or interesting thoughts, they just end up repeating what the crowd says. There&amp;rsquo;s a reason why the &amp;ldquo;NPC&amp;rdquo; meme originated from Twitter. By lowering the barrier to entry for people who want a platform, you&amp;rsquo;d think that it would allow everyone to share their own unique voice. But as it turns out, most people don&amp;rsquo;t have anything unique to say. So most people end up just &amp;ldquo;going with the flow&amp;rdquo; all while deluding themselves into thinking they have something important to say.&lt;/p&gt;
&lt;p&gt;Mastodon doesn&amp;rsquo;t solve this problem.&lt;/p&gt;
&lt;h2 id=&#34;so-what-do-we-use-instead&#34;&gt;So what do we use instead?&lt;/h2&gt;
&lt;p&gt;If you really wanted a good &amp;ldquo;decentralized platform&amp;rdquo;, the best way is to create your own website. That&amp;rsquo;s why I have my own website, so I can write my own thoughts the way I want to.&lt;/p&gt;
&lt;p&gt;Social media forces you to think in a very specific way, and has ultimately been a total failure at doing everything it set out to do. And no, creating endless &amp;ldquo;new&amp;rdquo; social media platforms won&amp;rsquo;t fix the problem because the very idea has been bad from the start.&lt;/p&gt;
&lt;p&gt;That&amp;rsquo;s why I&amp;rsquo;ve never cared about decentralized social media, because it has never addressed my main issues with the entire idea. Most of the people who have been around since the early days of the internet know that the internet these days is much worse than it used to be, but they&amp;rsquo;re still trying to &amp;ldquo;fix&amp;rdquo; social media instead of jettisoning the entire concept.&lt;/p&gt;
&lt;p&gt;Miss the old internet? Create your own website, create content that &lt;strong&gt;you&lt;/strong&gt; would like to read, and amplify others who are doing the same. It&amp;rsquo;s that easy! The real &amp;ldquo;decentralized&amp;rdquo; internet will be around long after every social media disappears.&lt;/p&gt;
</description>
    </item>
    
  </channel>
</rss>
