Part 0: Specs

As this was a fun personal project, it wasn't formal but the idea was:

• Scrape webpage/API for info
• Send some kind of message in order to tell the user the info had changed.

Part 1: What approach?

When it comes to webscraping, I usually go with one of three things:

• A Python script using a combination of Requests and BeautifulSoup
• Web test runner such as Selenium or Playwright
• Sketchy Tampermonkey with Javascript

You can guess which we ended up using but I actually tried each one.

Part 2: What is actually available?

I spent some time looking through the network logs to see if there were any accessible REST endpoints we could just query for JSON data. There were some that were either encrypted or inaccessible from clients that weren't the website itself.

We ended up deciding we'd have to use webscraping. I was able to come up with a quick document.querySelectorAll(...).forEach hack to grab the data I wanted using the devtools console.

What does the querySelectorAll do? It allows for me to search through the page for an element with a custom attribute. I was able to find a custom attribute attached to a <tr> that contained all the data I needed. Though this was in Javascript, that selector would be useful for any other scraper/script I used.

Part 2: The approaches we ended up not using

So first I tried to use Requests and BeautifulSoup. Long story short, it became a pain in the butt because since it wasn't a JSON endpoint but an actual page that was rendered using Javascript/React, the data wasn't available on page load so we couldn't get the data this way.

So from there I tried to use Playwright since it actually uses a headless browser and user actions to run tests/scripts. Unfortunately, I was too lazy to go this direction since I anticipated test framework detection (as it's really popular) and already had the Javascript snippet so I ended up ignoring this route.

Part 3: Tampering with monkeys

I ended up using Tampermonkey to run the script on page load. To those unfamiliar with Tampermonkey, it's a browser extension where you can write custom Javascript code that runs on every page load. It's how people used to (and sometimes still) install custom themes/actions on sites like Reddit or Facebook without creating a whole extension for it.

Originally the code looked like this:

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

(async function() {
    'use strict';
    await sleep(5*1000);

    document.querySelectorAll("tr[abc]").forEach(async (row) => {
        if(row.textContent.contains("what we're looking for")) {
	    console.log("found!");
        } else {
            console.log("not found yet");
        }
    });

    setTimeout(function(){ location.reload(); }, 30*1000);
})();

Basically, we would sleep for 5s to wait for the page to load, iterate over all the <tr>s that fit our criteria, find out if we had what we were looking for, then refresh after another 30s to avoid 429 Too many requests errors.

I didn't want to mess with trying to send a message to the user because that would require 3rd party APIs which would be pretty annoying to try to use within a simple Tampermonkey script. I used a "beeping" sound that I had found on StackOverflow that would go off every time the textContent matched our criteria. It was actually pretty cool because you were able to alert a user audibly without any extra resources. It would just take the actual wav content that we provided as a string and play it.

But... my friend was adamant that he needed a way that could notify him on his phone so that he'd know while being away from his computer.

Part 4: Tele...phone? Tele...gram?

My friend had a couple options for how he wanted to receive the message:

• Email
• Text
• Some messaging platform

For me, email felt annoying since the options were to use an existing email to email things which usually require the use of a 3rd party library or have your own SMTP/script running on a server to then contact another API which I didn't want to write.

Text was under a similar boat. I've sent texts using email before (I don't know if it still works but this is how I used to) but that would require emailing. Another alternative to send a text was creating a Twilio account or something which seemed annoying too.

So I landed on messaging platforms. Again, I didn't want to have to import a library because doing that in Scriptmonkey seemed like a giant pain.

I looked around online and realized that Telegram has its own REST API that you just needed your user token/chat id to send a request to (more information here).

Luckily my friend already had a Telegram account so I had him register a bot to get an API token and chat ID. From there it was child's play.

To actually send the request, I used the fetch API. Here's the gist of the code:

// we're in the for loop

if(row.textContent.contains("what we're looking for")) {
    const regex = /(custom.regex)/;
    const match = row.textContent.match(regex);

    const data = {
        "chat_id": "1234567890",
        "text": match[0] + " " + match[1]
    };

    await fetch("https://api.telegram.org/bot<BOT_TOKEN>/sendMessage", {
        headers: {
            "content-type": "application/json"
        },
        method: 'POST',
        body: JSON.stringify(data)
    });
} else {
    console.log("not found yet");
}

Pretty simple right? All I needed to do was POST an endpoint with the token in the URI and send a stringified object with the chat_id and my parsed message! Super easy and super fast.

Part 5: Did it work?

Yeah it worked.

We're still getting rate-limited though so we might have to tweak the sleep time.

Could we have made it smarter with backoffs or used an actual API? Sure. But this was fast, easy, and hacky. Which is my favorite part of software engineering.

Hopefully this is helpful for someone who just needs a quick bot to help with notifying you of website changes!

Good luck hacking!

I'm not a huge Java guy but I wanted to write something cool to show how to setup a Java environment with dependencies.

What did I come up with to connect with you? I created another Discord Minecraft bot. yay...

I'll go through both thought-processes for the project and also technical aspects to give a rundown of how I approached an idea and turned it into reality.

Before we get to that, please download this zip file:
https://files.orewa.pw/src.zip

It contains all my Java source folder with all the code we go over today.

Step 0: What should it/I do?

I start every software project by considering what I specifically want it to do.

Some of y'all talk pretty loud and always about Minecraft and Discord (or at least some of you) so it was a pretty easy launch point.

Originally, my idea was I wanted users to be able to see a log of all actions taken in Minecraft easily from Discord.

Step ½: Is this even possible?

This comes with experience/knowing what you're working on. I run a Minecraft server and just starting digging through logs. In another application, we might go through a website's API (such as Yahoo! Finance) but here we can just force our bot to dig through logs.

I couldn't actually find a log of all user actions. It looks like there are plugins for it but I don't have it installed. What I could find was the user connect/disconnect logs. When Minecraft runs, it automatically puts out logs that have sections that look like this:

[2024-01-26 15:38:26:863 INFO] Player connected: playerA, xuid: 1234567890123456
[2024-01-26 15:38:52:103 INFO] Player disconnected: playerA, xuid: 1234567890123456, pfid: ef03492acfbb3a21
[2024-01-26 15:41:50:593 INFO] Player connected: playerA, xuid: 1234567890123456
[2024-01-26 15:42:08:686 INFO] Player disconnected: playerA, xuid: 1234567890123456, pfid: ef03492acfbb3a21
[2024-01-26 15:46:59:125 INFO] Player connected: playerA, xuid: 1234567890123456
[2024-01-26 15:51:24:630 INFO] Player disconnected: playerA, xuid: 1234567890123456, pfid: ef03492acfbb3a21
[2024-01-26 15:56:33:223 INFO] Player connected: playerA, xuid: 1234567890123456
[2024-01-26 15:57:10:434 INFO] Player disconnected: playerA, xuid: 1234567890123456, pfid: ef03492acfbb3a21
[2024-01-26 16:00:25:129 INFO] Player connected: playerA, xuid: 1234567890123456
[2024-01-26 16:03:51:543 INFO] Player disconnected: playerA, xuid: 1234567890123456, pfid: ef03492asscfbb3a21
[2024-01-30 23:08:22:835 INFO] Player connected: player B, xuid: 1234567890123457
[2024-01-30 23:08:40:168 INFO] Player disconnected: player B, xuid: 1234567890123457, pfid: a67b4794acb35809
[2024-01-30 23:11:22:968 INFO] Player connected: player B, xuid: 1234567890123457
[2024-01-30 23:11:34:061 INFO] Player disconnected: player B, xuid: 1234567890123457, pfid: a67b4794acb35809
[2024-01-31 01:06:37:799 INFO] Player connected: playerA, xuid: 1234567890123456
[2024-01-31 01:07:13:208 INFO] Player connected: player B, xuid: 1234567890123457
[2024-01-31 01:07:21:413 INFO] Player connected: Player C, xuid: 1234567890123458
[2024-01-31 01:08:44:975 INFO] Player connected: Player D, xuid: 1234567890123459
[2024-01-31 02:28:38:116 INFO] Player disconnected: playerA, xuid: 1234567890123456, pfid: ef03492acfbb3a21
[2024-01-31 02:28:38:254 INFO] Player disconnected: Player D, xuid: 1234567890123459, pfid: 4b6be430457f31d
[2024-01-31 02:28:58:691 INFO] Player disconnected: Player C, xuid: 1234567890123458, pfid: b3d2cb5372fe5cfd
[2024-01-31 02:28:59:476 INFO] Player disconnected: player B, xuid: 1234567890123457, pfid: a67b4794acb35809

Player names and xuids (Xbox user IDs) have been modified for privacy's sake. They're also formatted differently so we can take care of edge cases such as whitespace in the logs. I manually grabbed these logs but I could probably quickly put these logs in an updating file for my bot to see. But for building the bot, I just put this in an input.txt file to test with.

From here I decided to write a bot that took a username or xuid and returned the amount of time they've spent playing on my server.

Step 1: Setup 🪦

This took me forever. I hate this. Let me explain what I have as my dev setup.
The underlined title of the bullet is a link for installation on Windows. I use Debian Linux but if you need help installing, let me know.

• Visual Studio Code: This is one of the defacto text editors today with many extensions to make it very powerful. I do all my coding here. For this project I also installed the Java extension just for some nice-to-have quality of life stuff like better autocomplete.
• JDK (Java Development Kit): I know this part has been confusing to some people so I'll clarify the different downloads a bit (I'm slightly summarizing this article):
  • JVM - Java Virtual Machine: A program that's able to translate bytecode into machine code. We don't need to download/run this at all individually
  • JRE - Java Runtime Environment: This is an environment that you can download to run Java programs. JVM is a part of the JRE. If you download this, you can run java commands in the command line to run compiled Java programs.
  • JDK- Java Development Kit: This is what we actually want to install and comes with a compilers, tools, etc. It also comes with JRE so you'll be able to run what you make.
  • OpenJDK: OpenJDK is a community/open-source version of JDK. I use this personally because I think I found a tutorial to install it for Linux but should work exactly the same as Oracle's JDK.
• Maven: This is a build tool that also helps you manage dependencies. If you don't have dependencies on outside libraries/packages, you probably don't need this. Since we're going to be using an external library to package our program into a .jar (Java ARchive file/executable) and use a Java-based Discord package, it will be helpful in this instance. There are other alternatives that can do similar things such as Ant or Gradle but I remember hearing someone talk about Maven and I didn't feel like learning the other two so here we are.
• JDA (Java Discord API): This is the library I use for communicating/building my Java bot. They have a couple good examples I based my code off of, especially the SlashBotExample. They also have a decent wiki with helpful visual examples. It's an open-source library so you can see how they implemented it but my quick overview is that it's a wrapper library that basically abstracts API calls to Discord servers so we can easily use pretty objects and methods.

NOTE about PATH/environment variables: So in operating systems when you go into a command line and try to execute something, there is a set amount of places it checks for an executable that's getting called. If you don't put your executable in the right place or add the executable's location to your PATH, when you run java in the command line, it won't do anything.

Step 1½: Sanity checking

After installing, we should make sure that everything works.

• JDK: If running java --version or javac --version gives you something, we're in business.
• Maven: If running mvn --version gives you something, we're good.

Don't worry about JDA for now. VSCode should be a normal application so I trust you can find it.

Step 2: Creating the project/pom.xml

Not gonna lie, it took me a solid hour to get it installed even to this point. Luckily for you, I took many hours getting dependencies and builds to work but now you get to shortcut it while I explain it. But I will force you to read about all the mistakes I made so you can work through my thought process.

First I just tried to create a "hello world" project. I was able to do that pretty easily and compile it with javac and run it with java (and some code I took from the internet).

I just created a "hello world" class and function, ran javac hello.java and then java HelloWorld to run the program.

class HelloWorld { 
    // Your program begins with a call to main(). 
    // Prints "Hello, World" to the terminal window. 
    public static void main(String args[]) 
    { 
        System.out.println("Hello, World"); 
    } 
}

At this point I realized I had no idea how dependency management/importing libraries worked for Java. That's when I finally realized that was what Maven was for.

I tried some dumb things like trying to create my own pom.xml and using it with Maven. What is pom.xml? I'm glad you asked, I have such a great segue.

pom.xml is a file that tells Maven what to build, what dependencies we have, and some other metadata (random info).

I then found this handy-dandy Maven in 5 Minutes article by the Maven creators themselves. By using deductive reasoning, I ended up modifying their command to something I wanted:

mvn archetype:generate -DgroupId=com.patrick.app -DartifactId=mcbot -DarchetypeArtifactId=maven-archetype-quickstart -DarchetypeVersion=1.4 -DinteractiveMode=false

Realistically, all I changed was the groupId and artifactId to be less generic. Everything else was default.

In the end it gave me the folder structure as shown in the article. Now I had a project! I ran mvn package and java -cp target/mcbot-1.0-SNAPSHOT.jar com.patrick.app.App and I saw hello world! Very cool. At this point, I was still just doing tutorial stuff.

Step 3: Writing a bunch of code without knowing if it would work

NOTE: This is where I go through most of the code in the aforementioned zip file. It should be in the src folder. Follow along with the files to read more notes on decision making and to look at the actual code/logic.

I didn't know how to get dependencies to work and I was starting to get annoyed trying random stuff so I just started writing code. I'm at the point where I can mostly sus out my code from my initial idea and debug it later. I just used a bunch of the example code as a jumping off point. With a lot of Googling and decision making, I was able to come up with the following files:

• App.java: this is just the main file. Most of this is based off JDA's SlashBotExample I linked above. I also use a FileReader object here to read my input text file.
• LogParser.java: This holds the LogParser class which has a static function that can parse a single line of my log into a ConnectionLog object.
• ConnectionLog.java: This is the actual object class for ConnectionLog. It's pretty basic and stores the following members:
  • public enum ConnectionStatus: Enums are basically just ways to have some special variables map to specific values, usually numbers starting from 0. Here's an article about them. Hilariously, I don't even use this right now with the code but could be used later.
  • A constructor that takes in and stores:
    • String name: The user's IGN.
    • String xuid: The user's Xbox ID. This is part of the log and I wanted to give the option to lookup by this since it's unique, unlike usernames.
    • ConnectionStatus status: Whether the log was for CONNECTED or DISCONNECTED. (Ends up being unused).
    • LocalDateTime time: The timestamp for the log.
  • All the members are set to private with public get methods and no set methods. I wanted the constructor to be the only way to set the values and only cared about getting the values later.
• CollectionLogAggregator.java: This file might sound really verbose but Java is notorious for having a data structure for everything. I found out an Aggregator is a class that has functions that act on a Collection (or in my case a List). It has:
  • A constructor that takes in a List<ConnectionLog> where the list is all the ConnectionLogs we parsed from the file.
  • public getTimePlayedByName/Xuid: These are 2 functions that basically do the same thing. They get their matched ConnectionLogs and pass them into a function that gives back the Duration based on that.
• private getConnectionLogsByName/Xuid: These 2 functions filter through all the logs and find the specific logs that are associated with the name/xuid.
• private getTimePlayedFromLogs: Takes in any List<ConnectionLog> and gives you a Duration object sum of all the differences between CONNECTED and DISCONNECTED.
• I originally also had a CollectionLogBuilder class that would be able to give you an object based on if you had the username or xuid but I realized later that every log literally had both so I would never have the chance to use this. So I deleted the file 😦

I have left extensive comments in the code so you can see my thought process/understand what the code does.

Step 4: Now I have this code... now what?

This is where a LOT of Googling happened. I know how to write code but I didn't know how to compile it or run it. I also hadn't installed the dependency.

I found some random stuff on Google that told me to add this code to my pom.xml to pull in/install the JDA library during the packaging process:

  <repositories>
    <repository>
      <id>jitpack.io</id>
      <url>https://jitpack.io</url>
    </repository>
  </repositories>

<!-- AND -->

    <dependency>
      <groupId>com.github.discord-jda</groupId>
      <artifactId>JDA</artifactId>
      <version>v5.0.0-beta.20</version>
      <exclusions>
          <exclusion>
              <groupId>club.minnced</groupId>
              <artifactId>opus-java</artifactId>
          </exclusion>
      </exclusions>
    </dependency>

Then I tried ye old faithful mvn package then ran java -jar <filename>.jar and lo and behold I got a bunch of errors that basically amounted to "You don't have JDA installed". At this point I just banged my head against a wall a bunch of times, tried compiling it and rerunning to no avail.

Then I found an article that said that I needed to use some random "shade" plugin. I haven't really needed to use something like this in other projects but apparently this was a thing in Java. It adds the dependency library's code into the jar I had so I can run just one jar file with java simply. So I stole borrowed some code snippets and ended up with this snippet in my pom.xml:

        <plugin>
            <artifactId>maven-shade-plugin</artifactId>
            <version>3.2.1</version>
            <executions>
                <execution>
                    <phase>package</phase>
                        <goals>
                            <goal>shade</goal>
                        </goals>
                        <configuration>
                <transformers>
                    <transformer implementation="org.apache.maven.plugins.shade.resource.ManifestResourceTransformer">
                        <mainClass>com.patrick.app.App</mainClass> <!-- You have to replace this with a path to your main class like my.path.Main -->
                    </transformer>
                </transformers>
                <createDependencyReducedPom>false</createDependencyReducedPom>
            </configuration>
                </execution>
            </executions>
        </plugin>

You may be getting the gist that I have no idea what I'm doing. This is true. I was cobbling a bunch of code together. But in software engineering you learn by trying things out, reading other people's code, and other people telling you your way sucks.

I'm sure that my code and configurations suck in someone else's eyes but as one engineer to another they'll at least somewhat respect that it works. Try to remember this when you worry about having perfect code. I'll dive more into my philosophical take on being a software engineer later.

But after these changes I was finally able to package it with mvn package and run it using java -jar <my-api-key>!

Step 5: Man, it didn't work 😦

Ah yes, we were able to package it and it actually connected to Discord!
But whenever I ran the command, it broke or didn't give me the right answer. And I would fix something and it would break again.

So I started debugging. I can go further into detail but this is the list of things I had to fix that I can remember:

• My regex wasn't working for lines that ended with the pfid (which also wasn't used) so I was getting 106 hours of gameplay since it would skip a couple logs and calculate the time between the 5 days of me logging out and logging back in.

• I also got 0 hours because I accidentally put the name and xuid options on the wrong slash command so it wasn't actually getting anything as an input.
• I got the filtering function wrong so it was also giving me 0 hours after I fixed the previous bug.
• I didn't find out that my timestamp from the Minecraft wasn't in the format needed by the LocalDateTime.parse() function so I had to reformat it.

You may be asking, "Hey, how the heck did you figure out what was wrong and how to fix it?" My answer is it is the combination of:

• I've seen similar-ish errors.
• I had a lot of System.out.println statements to help me figure out what was happening at different parts of the application/if I was even reaching certain places.
• A lot of Googling.

But in the end, after tons of debugging...

Step 6: Profit!

Here's a screenshot of it working:

Step 7: You thought I was done?

Now that I was done, I'm done right?
... not really.

So that previous screenshot was kind of a lie. I figured out how to get it to work if I DM'd the bot directly but I haven't figured out how to do it so I can call it from any server it's invited to and from any random channel.

So the previous paragraph was also kind of a lie. After eating dinner and coming back to my computer, it turns out the channel was finally able to pick up the commands and work on a server channel and not just through DMs! Success!

But that functionality aside, I also wanted to refactor the code. Refactoring is the act of taking your code and cleaning it up. It can be renaming variables, making duplicate code into functions, etc.

There's no such thing as perfect code but it's a good learning opportunity of looking through your first (or fiftieth) draft and trying to improve it to a "final" draft.

A couple examples of the refactors I did:

• I removed a bunch of unused code lol
• In ConnectionLogAggregator, the getTimePlayedByXuid and getTimePlayedByName were both kind of big and had a lot of duplicate code. I decided to move the duplicate code out into its own function which ended up being getTimePlayedFromLogs

This isn't a huge project and I'm not doing it professionally but there's definitely more refactors I could do and cleaner code I could have wrote but this was my approach.

Conclusion

There we go! That was my adventure learning how to set up Java, Maven, and an external library! It was hard but I figured it out and hopefully you got a glimpse of how a software engineer might think. But we all think differently so I guess you only saw how I think.

But I want you to hopefully have the following takeaways (if I did a bad job explaining, I will try to make edits here or explain to you directly):

• How to set up Java locally (and Maven if needed) so you can run stuff at home.
• No one knows everything and have to Google a LOT of stuff. With repetition and pattern recognition, you might be able to not Google as much but sometimes I still need to remember how to get the length of a list/string.
• There is no one or perfect solution to any software problem. There are better and worse ones but I can guarantee you'll be hard pressed to do it the first time too. Write something that works and then you can work on making it better.
• Speaking of making things better, learn early how to write code that works and refactor it. Getting it working first is important for learning and then try to clean it up later.
• Going into a project with some kind of high-level idea of how you want it laid out will help you save time. I spent some time thinking about what my application needed to do and was able to glue them all together rather than just randomly typing. Learning how to lay things out comes with experience.
• Making mistakes and writing extra stuff that is unnecessary is natural. I wasted so much time writing random code and trying random stuff that didn't actually do anything. I've learned from many mistakes and detours and make less of those mistakes and waste less time since I can see further out that something isn't going to work. But I still waste time because I'm not perfect 🤠
• Software engineering is built on the shoulders of giants and they're so giant we can't always see everything they saw. What I mean is for me, one of the beautiful parts of software engineering is I can do awesome things without knowing exactly what everything does. This can be dangerous but also can help you do a lot of things quickly. As long as you trust where the code comes from, that's the best we can ask for.

This is over 3,400 words. I haven't written this much since college. Hope you enjoyed 😃

Good luck hacking!

Editors note: Big thanks to TH for editing/reading over this. Couldn't have done this without your help, bud!

Just kidding.

But I will be writing about my thoughts on the Apple Vision Pro. There will be spoilers about the experience so if you care about that, I guess don't read this.

Part 1: Signup

I went to the Apple store on whim since I saw they were advertising the Apple Vision Pro. I thought it was a walk-in and try type deal but you actually have to sign up for a guided tour.

I used a in-store QR code to sign up for a time that was only 30 minutes later, lucky me. I think this link and the "Book a demo" up top will help you do that if you wanna try.

Part 2: I don't wear my glasses?

Apparently they partnered with Zeiss lenses to build custom lenses for the Apple Vision Pro. They took my glasses and gave me close to my prescription lenses based of a reading. It was pretty close. 85-90% clarity. They said they have 1000 lenses to match most prescriptions.

When you buy an Apple Vision Pro, you can buy a pair for $200 I think is what they said.

Part 3: Setup

Setup was pretty easy. A quick hand scan then you do eye-tracking scanning by looking at 6 dots in a circle 3 times in different lighting while tapping your fingers to "click".

Part 4: First look

Now we get to the actual "demo-y" part. After greeting you with floating text around your area, it drops you into a home screen with "low immersion".

The "immersion" is how much you get rid of your background. At lowest, I saw everything in the Apple store and at highest I saw a background of Mt. Hood.

The screens are like 95% of the way there. The fidelity was close enough to almost trick you it was real but just blurry/off-colored for you to realize it isn't real. This comes up with some of their demos and my overall experience.

Part 5: Demo 1, Photos

First demo was the photos app. You could zoom in and out, scroll, and go to different albums. I jumped around and didn't listen to instructions but the gist of the guided tour was:

• First photo: a normal photo where you can just zoom in, pan, etc.
• Second photo: immersive photo that looks pretty 3D.
• Third was a video recorded on Apple Vision Pro of a birthday cake getting blown out by some kids and an adult. It was pretty wild how realistic it was. The depth perception of the video really takes it from "I'm watching a video recording" to "I'm in the video recording". The slightest blur and how weird my hand looked when I held it up to the video brought me back to reality.
• Fourth was a video recorded on an iPhone 15 Pro Max. It was cool but not as good as the Apple Vision Pro video.

I asked about how large the video files were and the Apple Genius said "large" alluding to the fact iPhone 15 Pro Max and Apple Vision Pro minimum storage was 256gb.

I also learned about moving apps around (there's a iPhone home-bar-esque bar that you can select to drag around) and close apps with a small x.

It was cool to move apps around and just leave them there to do other things. I've seen tech demos of this but I wasn't allowed to do too much and push it.

Part 6: Demo 2, Videos

I was then guided to the Apple TV app to watch some movie trailers. It was cool! You could choose your background or go into a "cinema" view. It was somewhat similar to other VR headsets that I've used (albeit clearer with tech that's 5 years newer). It had some cool options I hadn't seen before. You were able to choose "where" in the theater you wanted to sit. Up front, middle, back and balcony were options. I liked it.

Then I got to watch their "Immersive Experience" video which was obviously tailored to show off the max 3D ability of the Apple Vision Pro and I must say it did a great job. The videos were super immersive and at times the animals shown made me back up from how close they felt they got. There were some sports scenes that were shown where it really did feel like I was behind the soccer goal or next to first base.

Though as a techy nerd, I know that it's just not feasible live (I think) with the sheer quantity of data and resolution needed to do it for every sporting event but we're getting pretty darned close.

Part 7: Messing around while they're trying to sell me the Vision Pro

I then tried to mess around while the Apple Genius wasn't paying attention/busy typing on her iPad.

I opened up the Notes App and tried to have multiple instances open but couldn't figure it out.

Typing on the Apple Vision Pro is definitely clunky. I'd just look at different letters and click one at a time. I'd love to either have a portable keyboard OR for touch typers to calibrate how we'd type and make a best guess at what we're typing based on where I put my fingers. That's the dream.

Then I had to end the demo 😦

Conclusion

I think the videos and demos are great but it's very tech demo-y. It's 180deg 8k video footage which is HUGE and most people and media won't have access to. I think it's a great window into what tech might look like and what consumer tech can accomplish in the next 3, 5, or 10 years. So I DON'T think I'd buy one at $3,500 right now but maybe cheaper and better in the future 😀

Some things I wanted to try but couldn't:

• Connecting it to a Macbook to use it as extended monitors and use an actual keyboard with it.
• Seeing what apps exist and if there are any cool IDEs.

The coolest things I liked about it:

• I love the eye-tracking. With better calibration, it'd be awesome and super intuitive.
• The hand-tracking is also pretty cool and felt really natural. A lot of other VR headsets make me hold up my hands and I'm lazy and get tired. So this is a really cool change.
• The feel of the headset. Fitting and not wearing glasses and the weight were all great and very comfy.

Some other cons I've heard/experienced:

• Bad-ish battery life esp if you're consuming a lot of content
• The battery is a bit unwieldy still even though it's a significant improvement over a lot of older VR sets.
• The resolution is ALMOST there. Still just a wee bit blurry. Cameras/data transfer speeds will only continue to get better.

I feel like for now the Meta Quest 3 or something would scratch the VR itch until we all get there later.

Unfortunately, I'm still learning a lot so parts of these instructions may be extraneous and I welcome everyone smarter than me to help me learn!

Here's how I got it from ground zero:

Step 1: Get a VPS and a domain

I used Vultr as my VPS but you could use DigitalOcean, etc. I personally have grown to like Debian as my Linux distro of choice so I'll be using that.
Blogs use very little resources so if you're only doing this, you could get away with the lowest amount of stuff.

I used Namecheap but you can use Google Domains, etc.

Step 2: Point your domain at your VPS

Namecheap makes it pretty easy to add DNS records so you just have to add 2 A records:

• One with a host of * to pick up all the subdomains
• another with a host of @ to pick up the www and domain.tld versions of your URL.

They'll both use your VPS's IP address in the value section.

Step 3: Installing Docker

I just used this set of instructions from Docker to install it. The gist is:

• apt update
• Add their repo
• Install Docker and its dependencies

Most likely, you'll be root in your VPS but if you made a user, feel free to add yourself to the docker group so you don't have to sudo every time.

The command would be /usr/sbin/usermod -aG docker <username>.

Step 4: Installing Portainer

I personally really enjoy using Portainer since it simplifies doing a lot actions in Docker. To install it is pretty straightforward.

Following these instructions, just creating a volume and the container is enough. Once it's ready, we'll be doing stuff in Portainer.

Go to https://<your-ip>:9443 and finish the initial setup.

To be safe, we should be setting up the VPS with a VPN and connecting through there but for speed just have a good username/password.

Step 5: Installing Caddy

Once we have Portainer installed, the rest is pretty straightforward! I was pleasantly surprised about how fluid setting up environments and such are these days.

First, make sure that you have the configs/caddy folder set up. Then we can create a Caddyfile there already or else it will be angry and say you're trying to map a file to a directory.

Here's a sample one that I used:

<REDACTED>.orewa.pw {
	reverse_proxy http://172.17.0.2:9000
}

blog.orewa.pw {
	reverse_proxy ghost:2368
	header {
		header_up Strict-Transport-Security max-age=31536000; includeSubDomains; preload
		header_up X-Forwarded-Proto {scheme}
		header_up X-Forwarded-For {remote}
		header_up X-Real-IP {remote}
	}
}

The first entry is for the Portainer instance. I think (?) I could probably use the container name instead of the Docker IP but it works... This way I don't have to go to a port, just a nice ole subdomain.

The second entry has some settings that I saw help with reverse proxying for this Ghost blog.

I love docker compose (especially coming from typing hundreds of docker commands), it simplifies and speeds up the process for me.

In Portainer, they're called stacks. Here's the one I used:

version: "3.9"

services:
  caddy:
    image: caddy:latest
    container_name: caddy
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
      - "443:443/udp"
    volumes:
      - /root/configs/caddy/Caddyfile:/etc/caddy/Caddyfile
      - /root/configs/caddy/site:/srv
      - caddy_data:/data
      - caddy_config:/config
    network_mode: bridge

volumes:
  caddy_data:
  caddy_config:

Once you run the stack, Caddy should be up and running!

Step 6: Setting up Ghost

Now that we're more acclimated with Portainer stacks, here's the one for Ghost! It sets up the Ghost and the MySQL containers. You just have to set the root password as the same thing for both and your URL.

version: '3.1'

services:
  ghost:
    container_name: ghost
    image: ghost:5-alpine
    restart: always
    ports:
      - 2368:2368
    environment:
      database__client: mysql
      database__connection__host: db
      database__connection__user: root
      database__connection__password: <PASSWORD>
      database__connection__database: ghost
      url: https://<your-url>
      NODE_ENV: development
    volumes:
      - ghost:/var/lib/ghost/content

  db:
    image: mysql:8.0
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: <PASSWORD>
    volumes:
      - db:/var/lib/mysql

volumes:
  ghost:
  db:

Badabing badaboom, your Ghost stack is up.

Once it's up, you can go to https://<YOUR-URL>/ghost and set up your blog! You don't have to use a real email if you don't want.

Conclusion

Now you have Portainer and a blog running! The cool part is you can extrapolate from the Caddyfile and Portainer stacks to spin up as many containers you want! Very exciting stuff.

Good luck hacking!