Utilities had a lot of problems - some big, some small, so I eventually ended up making a replacement - Tools.

This post is meant to explain my thought process behind each decision and to ultimately, hopefully, be the first of many reports of old outdated projects being updated to my modern standards.

⚠️ Bit of a spoiler, but Utilities is no longer accessible as it redirects to Tools. ⚠️

Backstory

Back in late 2022 I had a problem. I was doing design work with software that didn't respect aspect ratios when resizing. It was relatively fine when I was just working with standard aspect ratios and standard resolutions (e.g. 1920x1080, 1280x720 when 16:9), but quickly became quite a large pain in the butt when working with non-standard aspect ratios or even non-standard resolutions within standard aspect ratios.

For a while I ended up either just guessing (which, of course, didn't go down that well), or calculating the missing height/width myself. It was fine for a while, but that became too tiresome as I would have to punch the formula and numbers in every time I needed to calculate it, and sometimes I even had forgotten the formula!

Now, thankfully, sometime during late 2022 I came to the realisation I am a programmer and that I can just simplify the whole thing... so I did. I made it mostly with just one category and one tool in mind, which, in hindsight, was the worst thing I could have done.

Issues

Websites have 3 categories with which we can label issues - design, performance and functionality. I will cover all 3 seperately, and then in a different section following the same format I will explain how I fixed it.

Design

The design for Utilities was very simple, childish, colourful and full with paddings. At the time I had finished making a project which had a very similar design, and, in my opinion, a design that still fits the project. However, I made the fatal mistake of taking the same design, removing key elements that made it look good (e.g. images) and forcefully cramming it into Utilities.

The result was a very big mess that wasn't optimised for mobile at all.

As you can see in the image, the titles and descriptions are way too big, leading to a lot of scrolling and a general "zoomed-in" feeling. That especially sucks when you have to quickly make changes (e.g. you have multiple coefficients to calculate, and to calculate every one you have to scroll quite a lot).

In the index page the cards didnt make good use of the space. They had a title, a big icon and... that's it. Taking up like ¼ or ⅕ of the screen just for a title and icon is actual UI horror.

Now, I'm not sure how many people were on mobile (if there were any even), but I personally ended up using Utilities mostly on mobile, so these issues were too painful to ignore.

Performance

With the increased latency of mobile data, navigating Utilities felt a bit sluggish on mobile as it was a NextJS multi-page application (MPA) rather than a single-page application (SPA). MPAs do have some benefits, especially if you have quite "light" pages (e.g. not a lot of stuff to load on each page), however due to the fact that Utilities was built with NextJS and thus with React, it did have some beefy JS to load.

Functionality

This is the most nitpicky of them all, but it does degrade the UX for mobile users - useless buttons.

Now, buttons themselves aren't useless if you have something that should only fire once and only fire when the user has inputted all of the data... however in this case it was useless.

Let's take for example the Death/Birth Coefficient Calculator. What difference does it make if the coefficient gets calculated every time you change a value, or if it gets calculated on a button press?

Simple math isn't resource intensive, so it is not that. It isn't destructive, so it also isn't that.

There's really no reason to have the button. All it does, is generate extra steps for the user. Desktop users have to pick up their mouse, drag it to the button and click it. Mobile users have to scroll down the (very badly designed and zoomed-in) UI.

The redesign

As the redesign ended up being quite professional, I ended up going with the name "Tools". It is easier to type, has less characters to read and just rolls off the tongue easier.

Design

For the design my main goal was to make it look clean, professional and tidy it up a little, a.k.a. get rid of the useless padding. For the design I ended up taking cues from shadcn/ui, which I have already used for ChromeOS Releases and although I ended up not using the library itself (due to performance considerations), I did end up copying the style a bit.

Now not only does the desktop experience get better as everything fits without having to scroll, but most importantly the mobile experience gets MUCH better.

The index page is already packed with more information (descriptions), while still showing more cards than Utilities.

The tool page now finally relegates just a relatively small amount of the page for the title and description, leaving the rest to the input fields. Words cannot describe how much better this is, so I will just show you!

As someone who really hates unnecessary actions and most importantly the "zoomed-in" feeling, the new design is just... awesome. I can't think of a better way to say it.

Performance

Remember how I talked about MPAs and SPAs? Yeah, well that's not the only thing different now.

Tools is now built with Astro and React. Astro is a very optimised and amazing framework that even, somehow, managed to optimise React. The difference between MPA performance of Astro (w/ React) and NextJS is already insane, however it gets better.

Tools as an MPA works much better already, but what if I cached the important stuff and made it into an SPA? Well, I did!

Using astro-spa I managed to (very easily!!) convert Tools from an MPA to an SPA. It doesn't really change much if you just directly go to a tool (especially because it doesn't really add that much JS), however if you go to the index and navigate to a tool, or just traverse the tools, you will immediately feel the... fastness?

⚠️ While writing this post I did end up finding a bug with the SPA. If you use Firefox the required scripts for the calculators don't load if you start on the index page, but if you start on a tool (which loads in the React scripts), everything works fine. I might end up disabling it on Firefox browsers if it keeps happening, but hopefully I can fix it

Edit: The bug affects more browsers than I thought. See: issue #3 on GitHub

Functionality

As I alluded to before, Tools now does the calculations automatically every time you input a new value into the fields. This makes the mobile experience much better, as theres no more scrolling, etc.

What now?

Now is the migratory phase to Tools. I have already set up a redirect from Utilities to Tools. I could have just added a banner with a link to Tools, however I thought that I should rather just forcefully migrate users to Tools. I am sorry for anyone affected, but I imagine the slight inconvenience will be outweighed by the massive benefits of the new redesign.

I also have some ideas of what I can put into the calculator:

• Gamepad tester
• Gradient + wave generator
• Microphone tester (spectrum analyser + spectogram)
• JSON to TS types

These are just ideas, and if you have any ideas or just wanna see the progress, or maybe even contribute, the GitHub repository is Exerra/tools :)

More information here.

If you're using Cloudflare Email Routing alongside Cloudflare Workers, you've probably noticed an issue. You can only send or forward emails to approved email addresses. Fortunately, if you want to send emails to any address you want, Cloudflare has partnered up with MailChannels to provide every Cloudflare customer free email sending through a Cloudflare Worker.

This is a complete guide for sending emails using MailChannels through Cloudflare workers.

Creating a worker

First, make sure wrangler is installed. You can use the official guide

Then, create a Cloudflare worker project. For the sake of this guide, we will be using the TypeScript template.

npm init cloudflare my-project worker-typescript
# or
yarn create cloudflare my-project worker-typescript
# or
pnpm create cloudflare my-project worker-typescript

Then navigate into the directory by doing

cd my-project

Setting up DNS records

Before we go any further, we need to generate DNS records for SPF and DKIM. I'll assume that Cloudflare has already auto generated the DMARC DNS record, and that you haven't touched it (since you really shouldn't!).

SPF

A Sender Policy Framework (SPF) record is a type of DNS TXT record that lists all of the servers authorised to send emails from a particular domain.

Without this record, if we try send an email through MailChannels, email servers wouldn't know if MailChannels is authorised to send emails.

(Fun fact! I spent a week troubleshooting DKIM not working, because I forgot to add this!)

If you DO NOT have an SPF DNS record already (which is unlikely), just create a new DNS TXT record, with the name being the domain you want to send emails from (if no subdomains, then just put @) and the value being:

v=spf1 a mx include:relay.mailchannels.net ~all

If you do (which you should already have if you set up Email Routing), add include:relay.mailchannels.net after the other includes. Example:

v=spf1 include:_spf.mx.cloudflare.net include:relay.mailchannels.net ~all

Pro tip: You cannot have multiple SPF TXT records, so if you have to add another include, just append it in the existing TXT record.

DKIM

DKIM ensures that emails you sent are verifiably yours. Without DKIM, people could send emails in your name, and no one would know it's not you!

This part was taken from the wonderful GitHub repository maggie-j-liu/mail

Generate the private key

To generate a private key and upload it to the worker, run the following command

openssl genrsa 2048 | tee priv_key.pem | openssl rsa -outform der | openssl base64 -A | wrangler secret put DKIM_PRIVATE_KEY

openssl genrsa 2048 generates a 2048-bit RSA key.

The output of that is then passed on to tee priv_key.pem, which writes the key to the priv_key.pem file.

Then THAT gets passed on to openssl rsa -outform der | openssl base 64 -A, which converts the key from the PEM format to the DER format, then base64 encodes it (pretty much just removes the header from the PEM formatted key).

And, finally, the output of that gets passed on to wrangler secret put DKIM_PRIVATE_KEY, which adds the base64 encoded key as a secret in the Cloudflare Worker.

Creating the DNS record

Now we need to add the public key to a TXT record. Run the following command:

echo -n "v=DKIM1;p=" > record.txt && openssl rsa -in priv_key.pem -pubout -outform der | openssl base64 -A >> record.txt

This creates a public key from the private key (openssl rsa -in priv_key.pem -pubout -outform der), encodes it in base64 (openssl base64 -A), and finally writes it to the record.txt file.

Copy the contents of record.txt file and add it as a TXT record of mailchannels._domainkey.

mailchannels._domainkey IN TXT "<content of the file record.txt>"

Domain protection

After this blog post was written, MailChannels has introduced Domain Lockdown that is MANDATORY for Cloudflare Workers users… which means yet another DNS record to add.

First you need to obtain your Workers subdomain. Go to "Workers & Pages" on your Cloudflare account, and in the right sidebar it should be there.

After that, add a TXT record _mailchannels with the value of v=mc1 cfid=<WORKERS SUBDOMAIN>

Note that it may take a while for this to update - if it doesn't work at first, wait a bit.

Also, you can add as many cfid as you want, so I would also suggest adding one for both your domain and the subdomain of the CF Worker you will be sending email from (not sure if it does something, but just in case).

Call the MailChannels API

MailChannels has created a transactional API for Cloudflare customers. This API can only be ran from Cloudflare IP addresses, so don't even try to run it from your own server (or on local mode).

// src/index.ts

interface Env {
  DKIM_PRIVATE_KEY: string;
}

export default {
    async email (message: ForwardableEmailMessage, env: Env) {
        const { DKIM_PRIVATE_KEY } = env

        let emailReq = await fetch( 'https://api.mailchannels.net/tx/v1/send', {
            method: 'POST',
            headers: {
                'content-type': 'application/json',
            },
            body: JSON.stringify( {
                personalizations: [
                    {
                        to: [ { email: "" }], // who to send the email to, add your own recipient
                        dkim_domain: '[YOUR DOMAIN]',
                        dkim_selector: 'mailchannels', // [selector]._domainkey.yourdomain.com
                        dkim_private_key: DKIM_PRIVATE_KEY,
                    },
                ],
                from: {
                    email: '' // add your FROM email here
                },
                //reply_to: { email: email.from.address },
                subject: "Subject",
                content: [
                    {
                        type: 'text/plain',
                        value: "content",
                    }
                ],
            } ),
        } );
    }
}

More documentation on the transactional API can be found here.

I made a small edit that fixed a major issue, sorry if you had any issues with what I wrote beforehand 😥

Each email sent contains headers with information about return paths, authentication results, provider info, signatures, subject, content type and etc. For replies, the ones you should care about are the headers Message-Id and References. These provide references for email providers, in order to let them determine to which email you are replying.

To make your email a reply, just return a References header with the value of the References header of the email you're replying to and the Message-Id header at the end, alongside a In-Reply-To header with the value of the Message-Id header.

CrossOver is just a wrapper for Wine, which is a free and open-source compatibility layer that allows you to run Windows applications on other operating systems. It essentially acts as a Windows environment on your Mac, making it possible to run games like Skyrim. However, it's important to note that while CrossOver may be a more polished and user-friendly option, there are other alternatives like Porting Kit that can do the same thing, but for free. Porting Kit is less sophisticated than CrossOver, but it does (basically) the same thing, just with a bit less community support.

So, let's install Skyrim (and later mod it) with Porting Kit!

Requirements

CPU

This guide is focused on installing Skyrim on an Apple Silicon computer (aka M1, M2 etc). If you own an Intel Mac, instead of doing this, you should install Windows thru Bootcamp and run Skyrim natively.

If you're not sure on which CPU you have, click the Apple logo in the top-left, then click "About This Mac" and alongside your computers name should be the CPU in brackets. If it says M1, M2 or higher, you have an Apple silicon Mac, otherwise you have an Intel Mac.

RAM

While 8 GB of RAM will work, it is strongly recommended to play Skyrim on a computer with at least 16 GB of RAM. For all SoCs (e.g Apple silicon), RAM is shared with the GPU, but with the more conventional systems (Seperate CPU, GPU, RAM, etc) RAM and VRAM (used only for the GPU) is seperate. Because of that, Skyrim expects at least 4 GB of RAM, plus a decent amount of VRAM. With only 8 GB of unified memory (aka RAM) Skyrim doesn't have enough "juice" to run very smoothly under all of the emulation layers.

Disk space

Skyrim itself is 14 GB, but I would recommend like 20 GB if you do not wish to mod Skyrim, and at least 30 GB if you wish to mod Skyrim (though I would recommend 40 GB).

It is possible to use an external drive for this, but it must be formated in APFS.

Game

This guide focuses on the latest Skyrim Special Edition version on Steam. If you own the GOG version of the game, that may also work (install steps are a bit different, mostly just selecting the GOG version in Porting Kit & downloading offline installer before clicking Install in Porting Kit).

If you own the old version of Skyrim (just named "The Elder Scrolls V: Skyrim"), you can try to follow this guide, but how well it will work I do not know. In any case, it is recommended to upgrade to the Special Edition.

Installing Porting Kit

Porting Kit is the software that makes this happen. If you already own CrossOver, skip this section.

1. Download the DMG version of Porting Kit from here. Do not download from any other sources.
2. Open the DMG and drag Porting Kit into your Applications folder.
3. Open Porting Kit and follow the initial setup

Installing Skyrim

Once Porting Kit is installed, navigate to the "Library" tab, then search for Skyrim in the port list. Click on the icon for "The Elder Scrolls V: Skyrim SE" (DO NOT click the other one), and then click "Install". It will ask you which game version you want to install (Steam or GOG). For the purposes of this guide, we will be installing the Steam version.

Once the installer has appeared, just follow what the installer says & wait until it downloads everything. If you wish to put the game in a different location, the "Destination Select" stage has a button where you can change the install location. Again, if you wish to install it on a different drive, make sure it is formatted as an APFS drive.

Once the installer is completed, go back to Porting Kit, click on Skyrim in the sidebar and launch it. After that, you will need to log into Steam and download Skyrim Special Edition in the default location.

After it has finished downloading, just launch the game!

Settings

When you arrive at the launcher, it will try to detect what settings it should run & will assign you Ultra settings. If you're playing on M1 or M2 you cannot play with those settings due to the massive overhead due to the translation layers.

First set the settings to Low, then click "Advanced" and check that everything in "Detail" is set to lowest & turned off. Then launch Skyrim, get past the tutorial and if it runs well, start tweaking settings to be higher (everything except view distance will need to be configured in the launcher).

If you wish to mod Skyrim, it is important that you do this step first, as most popular modding tools create a virtual file system that they use, and after that point the changes in the launcher won't affect the game at all (if you're launching Skyrim thru the mod manager).

Modding Skyrim

There are multiple ways to mod Skyrim if you're on the Steam version. You could either use the built-in mod downloader, or download & install mods yourself with a mod manager. Granted, you could also just drag the files into the filesystem manually, but that presents large issues with safety. Most modern mod managers (e.g Mod Organizer 2 & Vortex) use virtual filesystems in order to not mess up your install of the game. With virtual filesystems, your mods are stored in a different folder than your game installation (and each mod is stored in a seperate folder even), and thus let you easily add/remove/toggle mods without messing anything up.

Another reason to go with a mod manager is that the GOG version of the game has been stripped of any DRM. That means that there is no Creation Club (basically paid mods) and no built-in mod downloader.

If you wish to mod Skyrim only with the built-in mod downloader, you can stop reading. From now on, everything will be focused only on how to mod Skyrim with a mod manager.

To follow this guide you will need a Nexus Mods account. If you do not already have one, go here and create one.

Installing SKSE

This step is tehnically optional, but strongly recommended. SKSE is a script extender for Skyrim and is a required dependency of many mods.

First, go to the page for The Unarchiver, then download, install and open it (you can close it later). This app is required to extract 7z files.

When that is done, navigate to the official page for SKSE. Then look for the appropriate version for your install (Anniversary Edition for Steam, GOG Anniversary Edition build for GOG) and download it. While it is downloading, navigate to the place where you installed Skyrim on your Mac, right click it and press "Show Package Contents", open the drive_c folder and find your Skyrim install. For Steam users, it should be in Program Files (x86)/Steam/steamapps/common/Skyrim Special Edition/. Make sure that folder contains SkyrimSE.exe.

After that, open a new tab (or window) in Finder (the MacOS file manager), go to your Downloads folder and open the downloaded 7z file with The Unarchiver. Then, open the newly created folder, copy the Data folder alongside all DLL and EXE files (hold down ⌘ to be able to select multiple files), and paste it into the folder where SkyrimSE.exe is located.

And now SKSE is installed!

Installing Mod Organizer 2

Mod Organizer 2 is one of those mod managers I talked about. As of writing, Mod Organizer 2 is the best mod manager for a lot of games (notably the Fallout and Elder Scrolls series), and, fortunately, works well thru Wine.

First, go to its Nexus Mods page and download the latest main file. When that is done, go to Porting Kit, right click Skyrim in the sidebar, hover over "Advanced Tools" and click "Launch Wineskin app". Make sure all wine processes are closed (you can go to Porting Kit, right click Skyrim and press "Force close" to make sure).

In the Wineskin app, click "Install software", then click "Choose Setup Executable" and select the Mod Organizer 2 setup EXE in the file picker.

When that is done, right click Skyrim again, hover over "Advanced Tools" and press "Add shortcut to EXE". That will open up a new window where you can write the name for the shortcut (just name it "Mod Organizer 2") and afterwards a file picker where you have to select the EXE. If you didn't change the install path, it should be Modding/MO2/ModOrganizer.exe.

When that is done, launch Mod Organizer 2 through the shortcut you just made and follow the setup. If it doesn't launch, restart your Mac. Also, if it throws a warning about not being able to load a plugin, either click ignore, or blacklist the plugin.

Double-check that Mod Organizer 2 has detected all of the launchable EXEs. It always detects Skyrim Special Edition and the Launcher, but sometimes it fails to detect SKSE. If it hasn't detected SKSE, click "<Edit...>" and create a new empty executable with this path C:\Program Files (x86)\Steam\steamapps\common\Skyrim Special Edition\skse64_loader.exe

Installing mods

With Mod Organizer 2 set up, all that is left is actually installing the mods. First, you need to locate mods. A great website where you can find mods for games is Nexus Mods (don't browse it while family is around, the Skyrim community is really horny...). If we were on Windows, we could just click the "Mod manager download" button in Nexus Mods, but because Mod Organizer 2 is run thru wine, the browser has no way to communicate with it, so click "Manual download" on a mod you want.

Once you have downloaded a mod, I would recommend putting it in the Documents folder for easy access (the wine file explorer has the Documents folder bookmarked). After that, go to Mod Organizer 2, and click the icon with a Disc at the top left. That will open a file picker, where you can quickly go to Documents and select the mod archive.

When a mod is installed, make sure to enable it by toggling the checkbox next to its name.

Installing an ENB

Warning: Only use an ENB if you have really good performance in Skyrim.

Installing an ENB is a bit more of a hands-on process.

First, download the latest version of the ENB engine from the official website.

Then, unzip it, go into the unzipped folder and open the "LinuxVersion" folder. That folder contains a DLL that you have to paste into the Skyrim installation folder. In case you have forgot how to go there, refer back to the Installing SKSE section.

After that, locate an ENB on Nexus Mods, download it and follow the instructions in the README (if there are any). If there are no instructions, just copy the following items into the Skyrim installation folder: enbcache, enblocal.ini, enbseries, enbseries.ini.

Mod incompatibility

I have set up a document where I will track mod incompatibility on Apple silicon. You can view it here. It will most likely not get updated often, as I do not mod Skyrim so often where I can find a lot of incompatible mods.

Creating mods

It is possible to create mods for Skyrim on a Mac using the Creation Kit! I do advise you to first follow the "Modding Skyrim" section as the experience will be better with it.

Issues

It doesn't work fully, though; most stuff works, but the toolbar does not show up on Mac.

Windows:

Mac:

I'm not sure how bad that is, pretty sure some stuff is available in the menus anyway, but I wouldn't count on the experience being even close to the Windows one.

Installing the Creation Kit

Whether you have an ambitious mod idea, a simple fix idea or just want to fool around, you'll need to install the Creation Kit first. You can download the Creation Kit directly to your game folder from Steam (first, add it to your library here). I'm not sure about the GOG version, but I assume it either comes bundled-in or is downloadable from the extras.

After that, launch it and it should work basically out-of-the-box. If it does not launch, restart your computer.

Using the Creation Kit

If you don't know how to use the Creation Kit, you can follow the tutorials here.

It is possible to use the Creation Kit through Steam or through a mod manager. If you wish to use the Creation Kit through Steam, which is recommended for mods that don't have external dependencies, all you have to do is click Play on Steam.

If you wish to create mods with external dependencies, you have to launch the Creation Kit through a mod manager. Assuming that you chose Mod Organizer 2, all you have to do is close it (if it was open) and open it again. MO2 should automatically see the Creation Kit and add it to the launchable EXE dropdown.

To test a mod, all you have to do is launch Skyrim through Mod Organiser 2 with the mod enabled.

Publishing mods

First you have to save the file as as an ESP with the name of your mod.

Then you have to extract it. If you launched the Creation Kit through Steam, it will be in the Program Files (x86)/Steam/steamapps/common/Skyrim Special Edition/Data/ directory (if you're unsure on how to get there using Finder, refer to the "Installing SKSE" section). If you launched it through Mod Organizer 2, it should be somewhere in users/<your_user>/AppData/Local/ModOrganizer/Skyrim Special Edition/mods/ (though I might be wrong, I haven't worked with MO2 + CK in a while).

And now comes the fun part - publishing the mod on Nexus Mods. You could distribute the mod on different websites (and it is actually preferred for a lot of NSFW mods), but Nexus Mods is by far the most popular website where people get mods, and thus will probably be the best choice for your mod.

It is actually quite simple, all you have to do is go here while logged in, fill out the form and boom you're a mod author! Also if you ever reach like 1000 unique downloads (if my memory is correct) and you join the Nexus Mods Mod Author discord server, make sure to ping me! 👀

A few notes

The team behind Asahi Linux recently improved their GPU drivers to be faster than Apple’s (in some cases). Currently they are experimenting with Proton, a Windows app emulation software by Valve. If they succeed, all of this could become irrelevant. If they do succeed in running Proton, I will update this blog post with a new section about running it under Asahi Linux.

And this is the end. If you have any questions or feedback, please reach out to me. You can find my contacts in my website.

If I find any issues, I will update this post to warn about it, and if it is fixable I will also include a guide on how to fix it.

If Arc was just what it is at face value, I wouldn't be writing a blog post. So far from what I've seen nobody is talking about this, so I feel obligated to write an analysis on Arc by Browser company.

In order to understand what Arc is about and be able to check network logs, all of the research was done on Arc.

Arc's gimmick

The Browser Company invisions Arc as a revolution; as a browser that will change the way you use the internet. Arc does have unique features that other browsers don't, such as:

• A command bar
• Split view
• Boosts (extension maker for non-coders)
• Notes
• A whiteboard feature
• Previews on pinned tabs (only have gotten it to work with Google Calendar though)

While these features are nice-to-haves, I do not believe that they are must-haves. If you become proficient with them, sure they can be must-haves, but using the browser is weird at first and you have to re-learn how to browse the web (large friction points are never good). And there are a few features which already exist on some browsers, but not others. For example: Spaces.

Spaces is an organisational tool which lets you split your tabs, pinned tabs, bookmarks and notes into seperate screens. Normally this would work with user profiles and multiple windows on most of the other browsers, but Safari already has such a feature, and considering that Arc is (currently) only available on macOS, you have to wonder if the high friction point and loss of some Apple ecosystem exclusive features is worth it.

The bad side of Arc

Arc, like many apps, sends analytics. Normally that isn't an issue, but in Arc's case a number of factors make this, in my opinion, pretty shady.

While poking around in my proxy with Arc open, I noticed the analytics. I thought nothing of it until I saw just how frequently it got sent, so I decided to investigate. Arc features analytics by Segment and monitoring by Sentry.

Sentry is a performance and error monitoring service. It is built for developers to monitor any issues with their code, and is nothing to worry about. Normally it doesn't send anything unless an error has occured.

This is where it gets shady. Segment is a customer data platform by Twilio. It can build a profile on you across all platforms and channels and is most often used to deliver personalised experiences (mostly in commerce). There are plenty of analytics services that anonymise data and don't track users, but Segment is not one of them. Each request that gets sent includes a unique user ID for each user, so they can see exactly how you are using a service. Furthermore, the analytics that Arc sends includes the screen size, OS, locale, device (type, model, manufacturer), timezone and network connectivity.

Every time Arc is put into the foreground/background, it sends an analytic. Every time you open a URL, it sends an analytic. Hovering over the top bar? Arc sends an analytic. Dismissing a pop-up that Arc throws at you? Also sends an analytic. Most of what you do sends over an analytic to Segment's servers, where it then can be routed to different Analytics services & be used to build a profile of how you use Arc and what devices you own.

Let's not pretend that this isn't common, though. The most popular browser currently (and on whose engine Arc is based on) sends web usage data to Google, which includes the URLs you go to and more, but Arc doesn't send the URL you have visited. At this point you must be wondering why Arc sending analytics data is so blasphemous when Google sends more data. Well, you can disable the Google Web Usage data collection in your Google account settings, but you cannot disable Arc analytics, which also build up a profile on you that can be used to target ads (Segment is actually built for that, from what I can see). Google also lets you export your data easily and check what data it has collected on you, but Arc has no such feature. Furthermore with Google there is only one privacy policy, but with Segment that data can be routed to many different services, each with their own privacy policies that can change. Remember, if a tech company starts out with a strong privacy policy, that doesn't mean that they will never sell your data, as privacy policies can always change to allow more and more data harvesting and selling. Currently the privacy policy for The Browser Company seems to be fine, but you can never trust tech companies.

In summary...

Arc is an app that sends analytics data to Segment, a customer data platform by Twilio, and Sentry, a performance and error monitoring service. Segment's analytics service is not anonymous and includes a unique user ID for each user, as well as information about their device and usage of the app. This data is used to build profiles of users' app usage and can be routed to other analytics services for targeted advertising. Google's Chrome browser also collects data on users' web usage, but this data collection can be disabled in the user's account settings and the collected data can be exported and reviewed. In contrast, Arc does not have a feature to disable analytics collection or review collected data, and the data collected by Segment can be routed to multiple services with potentially changing privacy policies.

If you are fine with that level of analytics, Arc is a great (but hard to get into) browser with interesting features that you could find useful, not to mention the unique (and nice) style. But if you are concerned about your privacy and the potential for your data to be used for targeted advertising, you may want to consider using a different browser that offers more control over data collection and usage.

2022 has been an amazing year for me, and I hope 2023 is even better. I've made a bunch of amazing projects, and I have won something (read on to find out where). It hasn't been without it's downsides, for example I caught Covid-19 in september, and that was horrible, but overall it has been great (except Apple releasing AirPods Pro gen 2 a few months after I get the gen 1 :c).

Exerra API v2

I have spent a while remaking the Exerra API. It is redesigned from the ground up to be more modular, secure and user-friendly. The original API wasn't very modular; everything was in one file (as it started in very humble roots) and thus was a nightmare to develop in. Alongside that, due to the nature of the API, it was saving a lot of files which meant it wasn't really git-ready. And to top it all off, it had Basic auth meaning it was insecure and wasn't really built to handle a dynamic user system.

... v2 changes all of that. Starting with the core structure - it has been built to be as modular as it can be, and it doesn't store any files which lets it be nicely stored on git. Auth has been built using the Identity backbone, which let me implement OAuth2 (more info about how it works later). Some small extras include: a single response system for the entire API, improvements to the Phishing API, powerful validation and more.

OAuth2

By using the Identity system, it is possible to create OAuth2 that lets users interact with the API in a safe way. Identity has been expanded to include another record: auth. In it, there will be the users OAuth2 secret, which when coupled with the users ID can be used to generate OAuth2 tokens. With a token you won't be able to access everything though, as the auth record also will contain scopes the user has access to, and if the user doesn't have a scope needed for a route, then the request will be denied with a 401. Alongside that, if you want to have some particular scopes (provided you have access to them), you can include them in the "scopes" field when creating an OAuth2 token, which in turn will create a token with only the scopes you've asked for.

This system will satisfy everyone and let users interact with the Exerra API in ways they couldn't before.

Response system

A large problem v1 of the API had, was that there was no single response system. Every endpoint could spit out data in its own structure. With v2 of the API, that is no more. Every single route (except the OAuth2 token issuer route) uses the same custom response function, which formats the data in this schema:

{
    status: HTTPStatusCode,
    data: object
}

I know, it isn't much, but when writing applications that use the API, a unified response system goes a long way in ensuring a good development experience (DX).

Validation

With v2 of the API, a clear focus has been set on ensuring safety. Whether it be Auth safety, or parameter safety, v2 has been built with that in mind. And so because of that, v2 of the API features strong validation of the query parameters, route parameters and body for endpoints that need it. If you have made a mistake, the API will return an error clearly stating what has went wrong. I hope the DX improvement this has is immeasurable (not only for you, but also for me 😅).

Phishing API

The original API was... fine. It certainly wasn't bad, but developing in it wasn't nice and it was lacking crucial features. For example, v1 of the API only grabbed domains, and it saved those in a JSON file. V2 of the API grabs both domains and URLs, and it saves them in memory, which should improve speeds + make the API more git-friendly. Along with that, the "Get all" endpoint has been modified a bit to allow you to grab either all domains or all links (I seperated them because both of them are >14 MB in size), and the "Check a URL" endpoint has been modified to check against URLs first, and then domains. The response for "Check a URL" also indicates whether the URL was checked against URLs or domains. API docs for v2 are coming soon, when they are done I will update this blog post with a URL to them.

And the best part? V2 of the Phishing API brings 130k more flagged domains, and, of course, also includes the 830k!! new flagged URLs.

Identity API

The Identity API is now live! It isn't complete, but it does have the most necessary endpoints for 3rd party users. Currently finished endpoints include:

• Get self (Uses OAuth2 to return a (nearly complete) database record of you)
• Get user by ID (Public endpoint for getting info about an Identity user by their Identity ID. The response contains their ID, username, profile data, socials and picture)
• Find user by platform (OAuth2-protected endpoint for finding a user by a platform and their ID (only works if the user has linked that platform to their account))
• Patch profile (Uses OAuth2 to update the profile record of you)

API docs are coming soon. More info down below.

API docs

A crucial part of every API are the docs, and sadly the release of v2 doesn't come with them. I will be working on the docs soon, I first have to fully finish the API with mostly QOL features like:

• each module of the API defining which env variables they need, and if they aren't provided then not loading those modules
• improved error handling (if a module cannot load, the API cannot load)
• speed improvements (the speed is better than v1, but I imagine there is still more stuff to be done)

When all of that is finished, I will focus more on the API docs, which should help a ton with developers adopting the API. If you want to use it now, and have any questions, go to my website as it contains social links where you can contact me (Discord is recommended).

Shortener

After the last blog update, I have launched Exerra Shortener. It is a URL shortener that incorporates the Phishing API for unparalleled phishing protection. Alongside that, it is one of the many (upcoming) projects in the Identity ecosystem. Sadly, the dashboard for Identity isn't done yet, but you can already sign up for an Identity account in any project using Identity.

I am looking for beta-testers, so if you want to help test Exerra Shortener (or any of my projects), then please go to my website and contact me on any of the platforms listed there.

CDN

I have added Twemoji to the CDN. If you want to use Twemoji without self-hosting it on your own CDN or using the Twemoji JS library, you can use my CDN alongside my new extract-unicode package. It extracts all unicode codepoints for a given symbol, which is perfect for custom emoji libraries.

I would suggest using Twemoji for flags, as Windows 11 has completely removed country flags from its emojis, which leads to flags appearing as the country code (which is why you can see a Twemoji flag on my blog and my website).

Blog

There is a new website for the blog! The file paths have changed a bit, sorry about that, but the new version features a sitemap, RSS and a nicer design! + it is built with Astro 🚀

The RSS feed puts the parsed HTML code in the description part, so you don't have to leave the RSS reader!

Benchmarks

Unfortunately, I haven't had time to benchmark a lot of games, so the Benchmarks project has kind of died. I plan on soon giving it a fresh coat of paint (remake the design), and add info about how games run on the Apple M1 as well! I have been playing a few games on my M1 mac, like The Witcher 3: Wild Hunt and some Nintendo Switch games thru Ryujinx. I haven't yet uploaded the benchmarks as I havent updated to macOS Ventura, which features an FPS counter for games running on Metal. Once I upgrade to macOS Ventura, I will have the ability to write benchmarks for a bunch of games for Apple M1.

Personal news

My blog up until now has been mostly acting as a DevLog, but I want to change things up a bit. In the previous update I mentioned that I want to start writing more technological articles which critique a technology, point out their flaws and upsides. That hasn't changed, but, sadly, I haven't yet figured out what to write about. I have a few ideas, but I haven't been able to come up with a solid article for them. What I haven't mentioned, though, is that I want to start writing more about my personal life, but my life is kinda boring and currently I want to stay a bit anonymous, so that is kind of hard to do.

There are a few news which aren't linked to me, or which can be anonymised a bit, so here we go.

iPhone 14

I have gotten a new phone! I upgraded from the royal blue iPhone 12 to the purple iPhone 14 and, to be honest, the difference is underwhelming, yet nice.

The battery on my old phone already had started to degrade, and with my (usually) long days the better battery in the iPhone 14 is great. And the colour? Much better. When the iPhone 12 released I grabbed the royal blue version, which was quite nice... until the lavander colour dropped. I wanted it so bad as it is my favourite colour, but I already had bought the royal blue one. With the iPhone 14, I finally got the chance to get a purple phone, and while the colour on the 14 is a very white-ish purple, it is still a shade of purple.

The notch took some time to get used to, but in the end I preferred the smaller notch and the bolder time + connectivity icons. I read about how the notch cut into the content on the newer iPhones, but to be honest on the regular version the notch cuts in by like 1px, which is barely noticeable (I had to LOOK for it). My friends on larger models, though, are saying that it cuts in way more on a larger screen, so if you're worried about that, then pick the regular model.

I haven't yet had the time to test the cameras, as I have been sick a lot lately, but once I get a chance I will test it and include the results in a new blog post (or update this one, who knows). I mainly want to test the action mode, the cinematic mode and the filters. I've heard that cinematic mode has improved a bunch, so I am excited to test that one out.

Connectivity is a strange one. For some reason my iPhone 14 likes to switch to 3G, even when there is an LTE signal. I don't know why that is happening, but I didn't have that issue on my iPhone 12. I hope this is just some weird software issue, and will wait until the next iOS update to truly judge if it's a product defect or a software issue.

Overall, it isn't a large upgrade, but it is a solid update. Not much has changed, but the features that have been here have been polished and improved, which is something I like more than Android. A lot of Android phones add a bunch of gimmicks that aren't fully fleshed-out and get abandoned after a year or two, with Apple it is overall much more underwhelming, but the features that already have been added get perfected, and if there is a new feature then you can be sure that it will last and only get better.

Hackathon

For anonymity purposes I won't reveal which hackathon it was, but I have won first place in a nation-wide hackathon! 🥳

The prize sum was definitely nice, and I've already bought a few tech products with it. I haven't yet gotten a Raspberry Pi, which was one of the things I wanted to indulge in, but the prices have been actually insane! Old models are selling for 100 €, and newer models aren't in a better state! 130 € for a 2gb version of the Raspberry Pi 4 Model B is insane, and the larger RAM models are even more expensive. Sadly, an Arduino isn't going to cut it for me, so I am now waiting for a good deal, which seems to only exist on eBay (not even in local stores 😕).

Nevertheless, I have bought a few goodies and have saved the rest for a good deal on a Raspberry Pi and some more items I am currently checking out (like a desk mat! I am torn between leather and the other material, so if you have a preference please tweet at me!).

And with that, the blog post comes to a close. I hope that 2023 can bring great projects to you all, and I may even start making SaaS projects (something I've been putting off for a while). I wish you all a happy 2023.

Benchmarks

For the past few weeks, I have been building a platform for benchmarks 📊. The platform focuses on GPU benchmarks for games, with integrated GPUs being the main focus as they often are underrepresented and need the benchmarks more than dedicated GPUs. It is already live and you can check it out by clicking here!

How it works

The obvious choice would be to create a statically generated website with frameworks like Hugo or even NextJS (hey, that's what the blog runs on!), but that would mean that I have to re-build the website every time content changes; which isn't necessarily bad, but if Cloudflare ever decides to add build minutes for Pages, I would be kinda screwed.

So what did I do? I made the website with Remix & TailwindCSS (which is what I have been using for everything lately, gotta 💜 Remix & TailwindCSS) and the "backend" is AWS S3. S3 offers a great API for listing, which is critical for the search feature and I can add new benchmarks without rebuilding the entire website (which can start becoming quite long with large sites).

3rd party benchmark support

I am thinking of letting people submit their own benchmarks, but currently I do not want to deal with validating that data so instead if people want me to cover a certain game they can send an email (exerra@exerra.xyz).

Identity

I am actively working on a new identity system for all of my projects. It is not done yet, but I am almost finished writing the code for it and I hope to release it within the next 2 months (yes, it is quite long, but we are talking about an identity system here 😅). I have made sure to make the system flexible so I can slap on new projects willy-nilly.

As this is a sensitive project, I cannot elaborate that much on what is going on in the background as that will expose the project to attacks, but I will tell you about the surface-level stuff and be transparent about the data stored.

Data stored

To make this make sense, I will have to introduce 2 new terms: "Fixed data" & "Dynamic data". Fixed data is key/value storage where the fields cannot be removed (such as user info, username, socials, etc). To be clear, the value of those fields can be changed or even set to "", but the field itself cannot be deleted. Dynamic data is data that gets generated on-demand and the fields can be safely removed without breaking anything (such as info from various services, etc).

With that out of the way, let me talk about the data stored.

User info (Fixed)

In this category, Identity will store information about the users' username, profile picture, legal name, country, email, and possibly phone number (it is there in case I need it, but currently I have no plans on using it so it will not be required).

Socials (Fixed)

In this category, Identity will store information about the users' socials. None of the fields are required, but if you try to use a service that is associated with a social (for example Karen Bot dashboard which is associated with Discord), you will need to link that social to your account in order to use the service.

Services (Dynamic)

So this is where I can give a less detailed explanation due to the nature of the data. This is where services can add their own data for whatever purpose they might have. There are a few shared fields that I can elaborate on, but the rest is entirely up to the service.

The shared fields are metadata about when the user has first accessed the service, when they have last accessed the service and, lastly, if they even have used the service (more of a fail-safe since there shouldn't be any data on a service if it hasn't been used)

The dynamic nature of this category will really help me create better websites with a centralised identity service while still letting me be flexible on the data, which is the main reason why I went with this approach.

Data removal

As I live in the European Union, I am subject to its data protection laws and therefore have to have a way to fully remove the data stored. Even if I wasn't subject to those laws, I would still offer a way to do it, but since I am subject to those laws you can rest assured knowing that such functionality will not be removed.

As of writing, there is no way to fully remove the data stored, but it is in the pipeline and will be there when Identity is going to be available to the public.

How it works

As I said before, I cannot talk much about what is going on in the background, but I can say that it uses Auth0 for the actual login/signup and user management.

CDN

In the previous blog post, I mentioned how I was going to move to S3. This is the update to that.

What has happened

After I published the blog post, I created a bucket in S3, moved all the files over to there, and started trying to make it work. At first, it didn't quite succeed, and the way S3 works is that I had to change the DNS records to S3 for it to even have a chance to work, so for a bit of time the CDN was down on 2022-08-18.

Eventually, I got everything figured out and it worked, but I had an issue where I no longer could browse the files as before, so I added AWS S3 Bucket Browser by qoomon. I had to change a few settings, so the CDN was down on 2022-08-19 for a few minutes as well.

I am sorry about the CDN being down, after this the CDN should have a >99,9% uptime.

Before the move

Before I moved to S3, the "CDN" was an express server using the serve-index package to serve files. Because of that, the reliability wasn't that great as I was hosting it on a very cheap VPS with 1GB of RAM and a 1 core shared CPU. I did that when I had a decent VPS and didn't need the CDN beyond my profile picture and a few other things, but now with it growing in scale and needing the uptime, I have finally made the switch to S3. Best part? My API that was hosted on the same VPS is now more stable as well, and the CDN costs me like 0,25 € a month!

Future plans

And with this blog post coming to an end, I want to just talk a bit about what I have planned for the future.

In terms of projects, I plan on finally creating the Karen Bot dashboard. The main reason why I haven't done it yet is simply that I had an idea for the Identity system and didn't want to create it before the Identity system. I also plan to create new bots and start separating from the Karen Bot umbrella as the bot has become too old for me to update. I could redesign Karen Bot, but I have no real motivation and time to do it.

Another idea I have been exploring is paid APIs. I know, I know, they kinda suck from a development POV, but infrastructure costs money and I need to start subsidising the projects I am hosting right now.

Beyond projects, I want to start creating blog posts about languages, technologies (like this example) and other more technical subjects. I also want to start making guides, which could go either on the blog or my docs (which is more likely). I could also start tinkering with real hardware, which seems like it would be a really fun side hobby that I could document on my blog 😄.

P.S: I totally didn't write this blog post on the same day my benchmark website released just so google could see it and display it on search results 👀👀👀

react-fingerprint

I have created a package for generating a fingerprint in React. As far as I've tested the fingerprints are unique, have the same result for incognito mode and so on. Usage is very simple and if you are interested, check out the docs.

It is made in Typescript so if you are using Typescript (you should if you aren't) then types are already built in. No reason to install a seperate @types package 😊

Website overhaul

If you have visited my website in the past few months, you would have noticed that my website is different from the one before. Lemme tell you a few of the things changed

Framework

I have recently fallen in love 💜 with Remix. I quite like the versatility of it and the SSR aspect. Because of that, I have made the website in Remix and TailwindCSS. I much prefer Tailwind over CSS because I find CSS files to generally be a mess of "where is this colour defined".

Beforehand, I was using a flavour of Vue that could be added to static HTML files to make them interactive. I had a mock "api" (and I am using that term very loosly) to fetch data about me client-side and then fill that data in. That proved to be quite a good method for easily changing the content of stuff, but was quite inefficient due to having quite a bunch of requests. Now the data sits in the loader function of the page which means that no API calls have to be done for them, not even server-side.

Design

I could've went with the old design, but I thought that something more fun would be better, so I overhauled the design to be bright, colourful and card-shaped.

Each little piece of info is in its own card which makes it pop out more against the background.

Last.fm

I have also added a Last.fm widget in the "About me" section. I spent quite a while figuring out how to do it. On one hand, if I only render it server-side it will not update when I start playing a different song, but if I only render it client-side then the user may not see it due to having JS be blocked (and Remix is about working without JS).

So I went with a hybrid approach. The server fetches the info and renders it onto the page, then sends it out to the client. When the client has received it, provided they have JS on, React starts a 10 second interval where it checks for changes and updates the widget accordingly.

Positives are that it works both with and without JS (and even updates!), but the negatives are that due to the server making an API call the time to first byte (TTFB) is quite larger. Ultimately, I have decided that the TTFB isnt large enough to go full client-side rendering for the widget.

18 Nov 2022 update: The widget is now entirely client-side for better SEO.

Docs

As you might've seen, I have a docs website. It's purpose is to serve as a unified documentation system on all of my projects. It is built with Docusaurus which means that it is pretty, fast and customisable. I have already put my API docs, package docs and bot docs there and if I ever create a new type of project that needs docs, it will be there.

Why are some CDN links broken?

Back when it was created, my CDN was meant as a quick way of storing files useful for my projects. It still is like that, though I have added stuff for the general public (Beta profiles of Apple OS's and so on). Eventually it grew into what I consider to be critical infrastructure

... and as with all critical infrastructure, eventually something goes wrong.

What happened

I was clearing out some temporary files and accidentally forgot to add the file to the rm command. What should've been rm -Rf cdn/file.zip turned out to be rm -Rf cdn/. Thankfully, I had a backup, but it was quite old and so a bunch of additions were missing.

CDN imperfections

As you can see, a quick command can wipe out an entire CDN used by a lot of projects. So, what exactly is the issue and are there any other future problems?

Hosting

The CDN is hosted on a single server along with the API. As it is not the best server, if it gets overloaded for any reason (DDoS (which shouldn't happen due to Cloudflare but whatever), API overloaded, etc) then the CDN gets shut down as well. I have an idea on how to solve this, so keep on reading.

Backups

A single command wiped out my entire CDN, but what saved me? A backup!

Unfortunately, it was quite old and thus a bunch of stuff was missing.

Backups for the CDN are done on Google Drive using rclone. Unfortunately, I am not in the habit of subscribing to every thing I see so I am limited to 15gb which is not ideal for a CDN of around 30gb.

What can be done?

I am looking into moving the CDN to AWS (S3 + CloudFront) in order to have reliability, idiot-proofing (can't accidentally rm -Rf the CDN) and easier backups.

Pricing is quite good as well for (what I think) is usual usage.

Tiered price for: 50 GB

50 GB x 0.0240000000 USD = 1.20 USD

Total tier cost = 1.2000 USD (S3 Standard storage cost)

50,000 GET requests in a month x 0.00000042 USD per request = 0.021 USD (S3 Standard GET requests cost)

200 GB x 0.0008 USD = 0.16 USD (S3 select returned cost)

1.20 USD + 0.021 USD + 0.16 USD = 1.38 USD (Total S3 Standard Storage, data requests, S3 select cost)

S3 Standard cost (monthly): 1.38 USD

I will experiment with that in the coming months and if it works good, I will switch the CDN to it while preserving the same URL structure (if even possible 😵‍💫)

There's a little app I'm making. Now, I won't spoil it because it is not nearly done (still working on iCloud stuff), but what I can say is that it is sweet, will be 1,99$ and will only be on iOS (possibly on M1 too if it works well there). My goal is to make it be iOS 14 and up, but supporting 14 is quite difficult and if the market share is big enough I may go with iOS 15 and up (it will upset my jailbroken friends, but just don't jailbreak :fr:).

node-musickit-api

A month(?) ago I released node-musickit-api. It is a simple to use and elegant wrapper for the Apple Music API. Currently it supports both catalogue and personalized routes. The package also handles authentification, but for personalized routes you will need to somehow obtain a user token because Apple doesn't have any methods for that in the documentation. If that seems like something you're interested in you can check out the documentation.

Karen Bot

This section focuses on various things that have happened to Karen Bot

Twitter

Karen has a twitter now! It just informs about status updates for now, but it may do even more in the future :eyes:

Code updates

Karen Bot has not been receiving that many code updates. I've only committed these things to the repo:

1. Changed some outdated images that returned a 404 (now hosted on my CDN)
2. Changed some embed colours
3. Added a self-hosted GitHub runner that along with a GitHub action automatically deploys code

The GitHub runner was a bit interesting to set up, which I had done because I wanted to change hosting from Heroku to my own VPS. First I needed to create a relatively safe environment for Karen Bot to run in; I accomplished it by creating a new user with barely any permissions that can't do anything crazy. Then, I had to create a script to launch Karen Bot which was super easy to do with GitHub runners and only took me about 20 mins to create and iron out the imperfections. With this new switch of hosting providers I can ensure that Karen Bot has minimal downtime which most likely only will be due to deploying code. Sadly, though, during the whole process Karen Bot was down for which I apologize, From now on Karen Bot will have minimal downtime.

API

For those who don't know, my API handles most of Karen Bot's tasks alongside with some other comparatively insignificant things.

Switch from IPv4 to IPv6

During 2021-11-01 I decided to switch the API to IPv6. In theory it should make speeds faster

.. in theory

You see, IPv6 transmits larger packets, which for small requests isn't ideal. Along that, many ISPs have terrible support for IPv6 resulting in some peoples speeds dropping to a halt. Previously the response time for a request made in the US from my monitoring software was roughly 200, maybe 250 ms; after adding IPv6 it doubled to around 500ms

Because of all of this, I will schedule API maintenance on 2021-11-09 to go back to IPv4. During that the API will be down.

Possible future of the API

Websockets

Currently the API only supports HTTPS endpoints, but I am exploring the idea of having certain things be websockets. I may rewrite Karen Bot and it's segment of the API to use websockets allowing the server to send events as soon as they happen (e.g guild settings changed and stuff). It's not a guarantee, and profiles definitely won't be rewritten, but for some aspects websockets make way more sense than webhooks.

Streaming platform

This one will be purely for fun, but I am thinking of creating something similar to Twitch to stream/record gameplay. It is not intended for a lot of people to use, mostly just me doing it for fun, but if I do manage to make it I will definitely write a guide :)

Mail server

I am thinking of making a mail server (mostly for myself) because I don't want to pay Zoho (my current mail provider). Unfortunately, I haven't had that much luck seeing any good mail servers with relatively simple install steps, so if you have any please send it to exerra@exerra.xyz :)

I can also offer a service to have @exerra.xyz emails if people really want it

A few ending statements

Congratulations, you made it to the end. I hope you liked my blog post, I spent all of my free time writing it haha

If you want to support me or the work I do, you can always donate either on Kofi, LiberaPay or directly thru Paypal

If you're thinking of using DigitalOcean, you can use my promo code to get credits worth 100 USD for 60 days and when you spend 25 USD I will get 25 USD in credits! It is a mutually benefitial deal

Subscribe UI

So, I will plaster it accross my blog and probably use cookies to hide it if a person is already subscribed. I imagine it to be a small modal, not a big popup but something like a snackbar.

Source: Material.io

It will have a brief intro about what the newsletter does, a text field to input the email, a subscribe button and of course a close button.

Unsubscribe UI

So, currently on subscribtion emails you get sent a link to unsubscribe, which is pretty easy to do since the email is sent only to you. BUT the newsletter updates that get sent, get sent using BCC which means that there is no personalization. To combat this, I will make a probably simple and not elegant UI which lets you input the email address and unsubscribe.

Muh spam

Yeah... no spam here. I don't write constant blog updates and you only get emails when a new blog entry is created or updated :)

Fin

So this is the end. I hope you liked the idea, if not then give me feedback wherever you can. Also please do subscribe (when the option is available) if you like my blog. Reaching out to people is hard, especially if a lot of people accidentally stumble unto this because of a google search or something :)

For users

So, don't worry it won't be so severe as Google or something. It will just interact with the Spotify commands and display your most searched for artists and their genres. None of the data will be exported to 3rd parties and it will be opt-in only.

So how will it work

As mentioned before, it will interact with the Spotify commands to get your searched artists and their genres (e.g if you search for "Boyshit" it will send that you searched for a song by Madison Beer, and then send Madison Beer's genres) and after a while it could develop an understanding for what artists and genres you like and display them in your profile.

What about my privacy

Data is not shared with 3rd parties. It stays safe in my servers. It will be opt-in only and you will be able to delete that data if need arises. I am actually wondering if I should implement a super easy way or data erasure only by contacting me thru email, send me feedback wherever you can about that, please.

What will be the benefit

A nicer and more feature-rich profile command that can display data based on how you use Karen Bot.

More advanced stuff

How will it work

All profile related things stay on my servers. When you use profile commands it takes data from my central server. What I want to do here is that when Karen Bot's Spotify features get triggered, it fetches the Spotify API, then gets the artist and then fetches data for the artist, and then gets their genres (because Spotify API doesn't display genres for albums or songs) and sends that data over to my server which then processes it and saves it in the database. It won't immediately display that stuff in the profile, instead it will wait for enough data to accumulate so it can understand what the user likes and then display it.

Opt-in system

I actually haven't decided how the opt-in will work. I am wondering if I should make the Spotify and Profile features just not work unless the user has opted in, or, limit their functionality. Again, please send me feedback everywhere you can.