12 files changed, 96 insertions(+), 22 deletions(-)

M _config.yml
A _drafts/2022-01-20-xbox-remote-play-macos.md
M _posts/2017-11-20-chasing-performance.md
M _posts/2019-06-08-html-like-1999.md
M _posts/2019-06-11-responsive-tables.md
M index.html
A public/images/look-at-me.jpeg
A public/images/utm-1.webp
A public/images/utm-2.webp
A public/images/utm-3.webp
M style.css
M uses.md

@@ 3,7 3,7 @@ permalink:           pretty
 
 # Setup
 title: tdarb.org
-description: User interface designer, developer and hardware tinkerer
+description: User interface designer. Developer. Hardware tinkerer. Minimalist.
 tagline: Shouting out into the dark void of the perilous internet
 authorname: Bradley Taunt
 email: hello@tdarb.org

@@ 0,0 1,82 @@
+---
+title: "Xbox Remote Play on the M1 MacBook Air"
+layout: post
+summary: "A step-by-step tutorial on how to get Xbox Remote Play working on the M1 MacBook Air"
+---
+
+I'm a pretty big fan of all things Xbox and recently snagged an excellent deal of upgrading my current 3 years worth of Xbox Gold membership to Game Pass Ultimate for just $1. That's a lot of games to keep my busy for the next 1,095 days. So, although I have the Series S console sitting in my living room, I would still like the option to utilize Microsoft's [Remote Play feature](https://www.xbox.com/en-CA/consoles/remote-play). 
+
+## Xbox Remote Play
+
+Xbox Remote Play gives users the ability to "stream" their Xbox to another device on the same local network. This feature is great for instances when another family member wants to use the TV for something other than gaming - you still have the ability to play your games elsewhere. This includes devices running Windows 10/11, Android and iOS respectively.
+
+But wait a second - why isn't **macOS** listed there? Ah crap. Microsoft doesn't support us Mac geeks[^1].
+
+So I started to do some digging to see if anyone had figured out a way to get things working smoothly between an M1 MacBook Air and Xbox Remote Play.
+
+## Initial Research
+
+I found some older tutorials and articles mentioning the ability to sideload iOS apps onto the Mac with the latest version of macOS, but these workarounds no longer work (as of this time of writing). The two "best" options I found were:
+
+1. Installing Parallels and using the Xbox Windows app directly
+2. Download the iOS Xbox app and Screen Mirror the contents to the MacBook
+
+Parallels runs a trial for 14 days and then costs $99 CDN. Hardly worth dropping that kind of money for *one* Windows app. Surely there is an open source way to do something like this...(hint, hint)
+
+As for the iOS screen mirroring "hack"... it's not *great*. Quality can be spotty and prone to lag. Most of all it just really irks me to see Xbox Remote Play running perfectly fine on my iPhone but still having no ability to run natively on my Mac. Why Microsoft? Why?!
+
+## "I Have Become Linux, Destroyer of Worlds"
+
+![Look at me meme](/public/images/look-at-me.jpeg)
+
+I had enough of these *ugly* hacks - it was time for a solid one. It was time to run **Linux** on the M1 MacBook Air *without* dumping loads of cash into something like Parallels.
+
+What I ended up doing was using UTM (open source FTW!) to run Debian XFCE in a virtual machine.
+
+And you know what? It works **almost perfectly**. (I can't say 100% perfect because that would be statistically inaccurate). Now, let's breakdown how to do this for those wishing to do the same!
+
+## Required Hardware
+
+Before we get into it, we need to go over all the hardware items that **you will need** in order to accomplish this:
+
+1. An M1 iMac or MacBook device (Air or otherwise) running `12.1` or later
+
+That's it!
+
+## Required Software
+
+The next step is to download the following items on your MacBook device:
+
+1. [UTM for Mac](https://mac.getutm.app)
+2. [Debian XFCE](https://mac.getutm.app/gallery/debian-10-4-xfce)
+
+Download and install UTM first, then continue to the next steps.
+
+{% include promo.html %}
+
+## Running UTM & Setting Up Debian
+
+After installing and launching UTM you will be greeted with a simple screen:
+
+![UTM initial screen](/public/images/utm-1.webp)
+
+Next you'll want to navigate to the main [Debian 10.4 (Xfce) gallery page](https://mac.getutm.app/gallery/debian-10-4-xfce) and click the `Open in UTM` button. The file will begin to download directly in the UTM application:
+
+![UTM naming the VM](/public/images/utm-2.webp)
+
+
+## A Note to Microsoft (and Apple)
+
+Stop hurting your users. There is **zero** reason for Microsoft not to allow their official iOS Xbox app to run on a macOS device. We are customers paying you *money* for your services and you are limiting our ways of interacting with said product. It's idiotic.
+
+And Apple, you're no better. We all understand how you operate. Locking everything down, trying to obtain complete control over every inch of the operating system. Relax. People just want to play games (aside from Apple Arcade nonsense) on devices they already own.
+
+Let people enjoy the tech they have without made-up restrictions. What's the benefit?
+
+## Closing Thoughts
+
+---
+
+### Footnotes
+
+[^1]: To be fair, Apple would do the *exact* same thing if the shoe was on the other foot...<
\ No newline at end of file

@@ 23,7 23,7 @@ I will be using both my homepage and the image-heavy article I recently wrote, <
 
 ### Lighthouse Score - Homepage
 
-<a href="https://bradleytaunt.com/images/articles/lighthouse-homepage-original.webp">Full source original stats</a> // <a href="https://bradleytaunt.com/images/articles/lighthouse-homepage-updated.webp">Full source updated stats</a>
+<a href="/public/images/lighthouse-homepage-original.webp">Full source original stats</a> // <a href="/public/images/lighthouse-homepage-updated.webp">Full source updated stats</a>
 
 <table>
     <thead>


@@ 54,7 54,7 @@ I will be using both my homepage and the image-heavy article I recently wrote, <
 
 ### Lighthouse Score - Article Page
 
-<a href="https://bradleytaunt.com/images/articles/lighthouse-article-original.webp">Full source original stats</a> // <a href="https://bradleytaunt.com/images/articles/lighthouse-article-updated.webp">Full source updated stats</a>
+<a href="public/images/lighthouse-article-original.webp">Full source original stats</a> // <a href="public/images/lighthouse-article-updated.webp">Full source updated stats</a>
 
 <table>
     <thead>


@@ 85,7 85,7 @@ I will be using both my homepage and the image-heavy article I recently wrote, <
 
 ### Web Page Test - Homepage
 
-<a href="https://bradleytaunt.com/images/articles/webpagetest-homepage-original.webp">Full source original stats</a> // <a href="https://bradleytaunt.com/images/articles/webpagetest-homepage-updated.webp">Full source updated stats</a>
+<a href="/public/images/webpagetest-homepage-original.webp">Full source original stats</a> // <a href="/public/images/webpagetest-homepage-updated.webp">Full source updated stats</a>
 
 <table>
     <thead>


@@ 116,7 116,7 @@ I will be using both my homepage and the image-heavy article I recently wrote, <
 
 ### Web Page Test - Article Page
 
-<a href="https://bradleytaunt.com/images/articles/webpagetest-article-original.webp">Full source original stats</a> // <a href="https://bradleytaunt.com/images/articles/webpagetest-article-updated.webp">Full source updated stats</a>
+<a href="/public/images/webpagetest-article-original.webp">Full source original stats</a> // <a href="/public/images/webpagetest-article-updated.webp">Full source updated stats</a>
 
 <table>
     <thead>

@@ 68,7 68,7 @@ Since this post received [so much more attention](https://news.ycombinator.com/i
     - Accessibility. Programs like screen readers are built around the foundation of proper HTML hierarchy. I highly recommend testing all your projects with a screen reader - it will open your eyes to a lot of issues users with disabilities suffer through.
 
 2. **Tables not being responsive**
-    - This simply isn't true. It is much more semantic to layout your tables as you would normally, then for mobile devices you can target specific inner elements and alter them with `flexbox` etc. (You can see responsive tables in action [here](https://bradleytaunt.com/2019/06/11/responsive-tables/))
+    - This simply isn't true. It is much more semantic to layout your tables as you would normally, then for mobile devices you can target specific inner elements and alter them with `flexbox` etc. (You can see responsive tables in action [here](/responsive-tables))
 
 3. **Instead of the CSS one-liner, simply use Firefox debugger**
     - Fair point. Firefox is great!

@@ 18,7 18,7 @@ featured: true
 
 *I find that the need to create responsive table layouts* pops up far more often than most developers would expect. The gut reaction might to be implement some sort of custom grid-system or pull in a pre-built library. Don't do this - just use tables and some simple CSS.
 
-My recent article, [Write HTML Like It's 1999](https://bradleytaunt.com/2019/06/08/html-like-1999/), received far more attention than I ever expected on HackerNews. With this attention came a few comments mentioning how `table` elements don't play nice with mobile devices or that it's not possible to have a useable layout on smaller screens. *This simply isn't true*.
+My recent article, [Write HTML Like It's 1999](/html-like-1999), received far more attention than I ever expected on HackerNews. With this attention came a few comments mentioning how `table` elements don't play nice with mobile devices or that it's not possible to have a useable layout on smaller screens. *This simply isn't true*.
 
 Included below are two separate demos showing how to optimize `table` HTML for mobile devices using only a minimal amount of CSS. These implementations may not be perfect, but they are far superior to injecting a bunch of custom `div` elements to *look* like tables.
 

@@ 7,5 7,6 @@ description: The personal blog of Bradley Taunt
 {% for post in site.posts %}
   <article>
     <p><small><time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %d, %Y" }}</time></small><br><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></p>
+    <span><small>{{ post.summary }}</small></span>
   </article>
 {% endfor %}

@@ 1,16 1,18 @@
 *{box-sizing:border-box;}
-body{font-family:sans-serif;line-height:1.3;margin:auto;max-width:920px;padding:10px;}
+body{color:#333;font: 16px/1.4 SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;margin:auto;max-width:920px;padding:10px;}
 dl{font-size:90%;}
 dt{font-weight:bold;}
-h1,h2,h3,h4,h5,h6{margin:2.5rem 0 0;}
+h1,h2,h3,h4,h5,h6{font-family:SF Pro Display,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:500;line-height:1.2;margin:2.5rem 0 0;}
 h1{font-size:1.5rem;margin:0;}
 h1 + span{display:block;margin:0 0 1rem;}
 img{max-width:100%;}
 pre{background:#f9f9f9;overflow:auto;padding:10px;}
 figure{border:1px solid;margin:2rem 0;max-width:800px;padding:10px;text-align:center;}
-code{font-size:16px;}
+code{font-size:14px;}
 body.index{display:flex;flex-wrap:wrap;justify-content:space-between;}
 body.index main{width:calc(100% - 300px);}
+article{margin-bottom:2rem;}
+article p {margin-bottom: 0;}
 aside{width:280px;}
 aside img{border-radius:8px;display:block;margin:1rem auto;max-width:150px;}
 .single, section{margin:0 auto;max-width:720px;}

@@ 9,24 9,13 @@ This page contains a *somewhat* up-to-date listing of all hardware and software 
 
 ![My workstation](/public/images/workstation.webp)
 
-## Work Hardware
+## Hardware
 
 **MacBook Air (M1, 2020)**
 - RAM: 16GB
 - Storage: 256GB SSD
 - OS: MacOS
 
----
-
-## Personal Hardware
-
-**Lenovo M73 Tiny**
-- RAM: 8GB
-- Storage: 128GB
-- OS: Windows 11
-
-**Lenovo full-size Keyboard**
-
 **Logitech iPebble Wireless Mouse**
 
 **Samsung 27" 4K Monitor**