DEV Community: Shane Duffy

I Built a Voice Assistant That Runs Entirely in Your Browser

Shane Duffy — Tue, 03 Mar 2026 17:00:57 +0000

Web Assembly has been touted as the next big thing in the web space for the better part of a decade now, but it seems to have struggled in finding a clear identity and purpose. Perhaps AI is just the thing to fill that role?

AI and Web Assembly

I'd like to imagine a future where we can leverage AI in a fully decentralized manner, without being compelled to rely on our new technocratic overlords. It's great to see the explosion of local AI tooling in the past few years, but for the most part, these require local installations and often require a significant degree of technical depth.

In an attempt to determine the viability of running multiple AI models on the web simultaneously, I put together a fully in-browser platform for configurable, voice-activated AI assistants. It eats more resources than a crypto miner trying to qualify for a mortgage in SF, but hell, it works.

✨ xenith.ai

🌐 GitHub Repo

The Architecture

This project takes advantage of a variety of OSS packages and frameworks to handle the heavy lifting:

Whisper for Speech-to-Text (STT)
VITS for Text-to-Speech (TTS)
Silero for Voice Activity Detection (VAD)
WebLLM for running language models directly in the browser

I configured these to run on their own independent web workers, with their own respective services to handle interaction. A global audio worklet handles microphone input and passes data to the AudioService which routes it to the respective services for handling.

The Whisper Problem

What I wanted here was an Alexa-like application but with a wake word that can be arbitrarily set by the user. Along with that, I wanted the ability to have a variety of different Assistants running different voices, configurations, and language models, where you can set a unique wake word for each one.

I had initially looked into wake word AI models and standards, notably openWakeWord. While it defines a standardized structure for wake word detection models, I realized that this route just isn't user-friendly. You can't expect people to train their own word detection models. In the current state of the technology, that is still a fairly involved process.

The only clear solution was to use OpenAI's Whisper model (compiled to WebAssembly, shoutout to Georgi Gerganov for open sourcing his work here). Whisper can perform Speech-To-Text conversion, but there were two major issues:

#1 - Whisper is a Resource Hog

The first issue is that running Whisper eats up some serious computational resources, so it's not ideal to have it running constantly. In the Whisper WASM port, there is an example of a wake word detection implementation command.wasm, which partially addresses this with VAD, only running transcription once voice activity is detected.

However it only then returns the post-command transcription once voice activity stops completely. Meaning, it won't yield a constant stream of input as the user talks once the wake word triggers.

#2 - The Whisper Model Isn't Built for "Streamed" Input

The second issue is that Whisper is a pure IO model: you give it audio, and it outputs text. So how can we provide a constant "stream" for wake word detection? The most straightforward answer is to just take 1 second slices of audio and continually feed it in. However, in this case the wake word might be cut off in-between slices. For example if we were to say...

"The development of full artificial intelligence could spell the end of the human race"

Our 1 second time slices may lead to the following:

You could extend the slices to 5 seconds to reduce that risk, but then it would take 5 seconds to activate your assistant, and nobody wants that.

The "correct" solution would probably involve modifying how the model works fundamentally, but I'm a software engineer, not an AI engineer. So, I played around a bit and put together a sliding window solution, with word de-duplication.

The Sliding Window Approach

What if we were to provide audio buffers to Whisper for transcription every 1 second, but with each buffer we prepend the prior 1 second buffer? We might get slices like so:

We can trace backwards through the current transcriptions until we find a word that matches the last valid word of the prior transcription. Then we can continue our backward trace until we find a word that doesn't match, and throw that out!

std::string deduplicate_transcription(const std::string &new_text, bool is_final) {
    std::vector new_words = split_words(new_text);

    // Remove last word from transcription to avoid cutoff words
    if (!is_final && !new_words.empty()) {
        new_words.pop_back();
    }

    if (last_transcribed.empty()) {
        last_transcribed = join_words(new_words);
        return last_transcribed;
    }

    std::vector old_words = split_words(last_transcribed);

    // Search BACKWARD for the first matching word
    size_t match_index = old_words.size();
    std::string first_new_word = new_words.empty() ? "" : new_words[0];

    for (size_t i = old_words.size(); i-- > 0;) {  // Iterate backward
        if (words_match(old_words[i], first_new_word, false)) { // Exact match only for the first word
            match_index = i;
            break;
        }
    }

    // Move FORWARD and remove overlapping words
    size_t trim_index = 0;
    while (trim_index < new_words.size() && match_index < old_words.size()) {
        if (words_match(old_words[match_index], new_words[trim_index], true)) { // Exact match or levenshtein for overlapping words after first match
            trim_index++;  // Remove this word
            match_index++;
        } else {
            break;  // Stop at first non-match
        }
    }

    // Trim overlapping words
    std::vector deduped_words(new_words.begin() + trim_index, new_words.end());

    // Store cleaned transcription & return result
    if (is_final) {
        last_transcribed.clear(); // Clear previous transcription
        g_audio_chunks.clear(); // Clear the 1-second buffer AFTER processing the final frame
    } else {
        last_transcribed = join_words(new_words);
    }
    return join_words(deduped_words);
}

Whisper can yield different words depending on the sentence context as well, so instead of direct string comparison here we can perform Levenshtein word similarity to reduce the probability of false negatives.

int levenshtein_distance(const std::string &s1, const std::string &s2) {
    const size_t len1 = s1.size(), len2 = s2.size();
    std::vector> d(len1 + 1, std::vector(len2 + 1));

    for (size_t i = 0; i <= len1; i++) d[i][0] = i;
    for (size_t j = 0; j <= len2; j++) d[0][j] = j;

    for (size_t i = 1; i <= len1; i++) {
        for (size_t j = 1; j <= len2; j++) {
            d[i][j] = std::min({
                d[i - 1][j] + 1,  // Deletion
                d[i][j - 1] + 1,  // Insertion
                d[i - 1][j - 1] + (s1[i - 1] == s2[j - 1] ? 0 : 1) // Substitution
            });
        }
    }

    return d[len1][len2];
}

It's not perfect, but it works well for the most part. You can find my modified fork of Whisper.cpp here.

The VITS Problem

LLMs take awhile to generate full responses, especially in the context of running them locally. So we probably don't want to wait until the full response is generated to start generating audio output. With that in mind, WebLLM thankfully supports a streaming response mode, where it can yield an output stream as the model generates words.

But the nature of human speech prevents us from simply converting each word to audio and stitching those pieces together. It would sound robotic and stilted, sentences are meant to flow as one. To circumvent this, we can buffer the output text until we have a full sentence, then convert that to audio and play it.

public streamToken(token: string, guid: string, voiceId: string): void {
    if (!this.vitsWorker) {
      throw new Error('TTS Worker not initialized');
    }

    if (this.currentGuid && this.currentGuid !== guid) {
      this.cancelCurrentStream();
    }
    this.currentGuid = guid;

    const cleanToken = this.filterMessage(token);
    if (!cleanToken.trim()) return;

    this.bufferString += cleanToken;

    if (/[.!?]["']?\s*$/.test(this.bufferString)) {
      const sentence = this.bufferString.trim();
      this.bufferString = '';

      this.vitsWorker.postMessage({
        messageOutput: sentence,
        voiceId,
        guid,
      });
    }
}

As the worker completes audio generation for these discretized sentences, we can add them to a queue so we can play them in sequence:

this.vitsWorker.onmessage = (event: MessageEvent) => {
    const { type, wav, error, guid } = event.data;

    if (this.currentGuid !== guid) {
        console.warn(`[TTS] Ignoring stale audio for GUID ${guid}`);
        return;
    }

    if (type === 'tts-result') {
        const audio = new Audio();
        audio.src = URL.createObjectURL(wav);
        audio.addEventListener('ended', () => {
        this.isPlaying = false;
        this.currentAudio = null;
        this.playNextAudio();
        });

        this.audioQueue.push(audio);
        if (!this.isPlaying) {
        this.playNextAudio();
        }
    } else if (type === 'tts-error') {
        console.error('TTS worker error:', error);
        this.isPlaying = false;
        this.currentAudio = null;
        this.playNextAudio(); // Skip to next
    }
};

Again, it's not perfect and definitely could use some tuning (especially since we have a single global worker, meaning multiple assistants could theoretically interleave their audio if they respond at the same time), but it works well enough for a proof of concept.

The LLM Problem

LLMs sure love to yap don't they? This is fine for a textual assistant, but nobody wants their voice assistant rambling about the nuances of the downfall of the Roman empire (well maybe some people do) for 2-3 minutes in a single audio response. With that in mind I added a custom system prompt to all assistants ensuring they have limited response sizes to keep things manageable.

const formattedMessages = lastMsg
      ? [
          {
            role: 'system' as const,
            content: 'You are a virtual assistant. Your responses should be short (2-3 sentences) and be able to be read aloud verbatim.',
          },
          {
            role:
              lastMsg.chatParticipant === this
                ? ('assistant' as const)
                : ('user' as const),
            content: lastMsg.text,
          },
        ]
: [];

Going forward, I'd like to make it so that users can set their own system prompts, and define their own context windows.

Performance, Problems, and The Future

The most obvious issue is that running these massive models locally requires capable hardware. I've got a Razer Blade with an RTX 4080, and even I can hardly run these without putting my PC into overdrive. Part of this is due to Web Assembly: accessing your GPU from the browser is a miracle, sure, but performance is still limited due to the sandboxed environment.

Along with this, your browser needs WebGPU support and must allow FP16 (half-precision) support, which mobile browsers currently don't support. Even if they did, mobile devices probably don't have the chops for this kind of processing yet anyhow.

Another major issue was that these models are huge and consume massive amounts of memory. The browser limits how much you can consume, and you probably don't want five models loaded and eating up your RAM anyway. With that in mind, I configured WebLLM to load/unload models when an Assistant with a different language model is triggered. It adds some latency on the initial request, but it'll have to do.

As it stands, this is more of a proof of concept. But as models become more efficient and hardware improves, I'd like to think that we'll be able to perform AI tasks purely in the browser at some point in the near future. This would make private, decentralized AI tools much more accessible to technical and non-technical users alike.

Credits

Major thanks to the OSS devs who made this possible:

OpenAI for the Whisper Model
Georgi Gerganov for the C++ and WebAssembly Whisper port
Alexander Veysov for Silero VAD
Diffusion Studio for the vits-web framework
MLC AI for the WebLLM engine

You Can't Set GitHub Org Location Anymore?

Shane Duffy — Thu, 04 Apr 2024 07:32:45 +0000

Ok, that's not entirely true. You can still set your org location to your country. But it used to be an open textbox where you could input anything. What was even the point of this change, GitHub?

So I recently started a new GitHub org for a platform I'm building out. While filling in the basic details and adding a location, I noticed that putting "United States of America" as the choice seemed a bit odd.

Wait... Wasn't this a free textbox input before? Oh, they probably just added this nice dropdown list of cuntries as an autocomplete feature, I'll just click enter to put "San Francisco" instead.

(clicks enter)

...

(clicks enter again)

...

What the heck GitHub. What was the point of this change. Putting an open textbox for location was fun. Remember my old Genshin Impact site with its location as the fictional location of Teyvat?

Wait a second, did they remove that location with this change?

(checks impact.moe site)

They didn't! I bet you can still freely update it with the API!

So I went ahead and made an org update request, and what do you know, it worked!

Here's the Postman collection to freely update your org location: Postman Collection

{
    "info": {
      "_postman_id": "65dfc946-726b-4a05-9a0c-03688396c1fa",
      "name": "GitHub Org Update",
      "schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
      "_exporter_id": "11762359"
    },
    "item": [
      {
        "name": "GitHub Org Update",
        "request": {
          "method": "PATCH",
          "header": [
            {
              "key": "Accept",
              "value": "application/vnd.github+json"
            },
            {
              "key": "Authorization",
              "value": ""
            }
          ],
          "body": {
            "mode": "raw",
            "raw": "{\r\n    \"location\": \"San Francisco\"\r\n}",
            "options": {
              "raw": {
                "language": "json"
              }
            }
          },
          "url": {
            "raw": "https://api.github.com/orgs/xenith-ai",
            "protocol": "https",
            "host": ["api", "github", "com"],
            "path": ["orgs", "xenith-ai"]
          }
        },
        "response": []
      }
    ]
  }

The GitHub documentation specifies this as a Patch operation. In any case, you'll need to add your own access token generated under the Authorization header.

To get a new access token, just go to your GitHub Account Settings and at the bottom of the left sidebar is "Developer Settings".

Go there and click Generate new token and generate a classic token. Just give it admin:org permissions, and you can copy and paste it into the Postman collection auth header field.

VS Code Still Doesn't Have Vertical Tabs??

Shane Duffy — Thu, 12 Oct 2023 00:17:35 +0000

I recently discovered one of my colleagues was a vertical tab zealot, running vertical tab layouts on Chrome, Visual Studio, Windows, virtually everything. It was actually kind of neat, so I started reconfiguring my layouts to emulate it, only to find out... VS Code still doesn't support it? In 2023??

I remember trying to move over to vertical tab layouts a few years ago, only to find VS Code had no support for it. And naturally, I wouldn't want to obligate my already feeble mind into constantly context-switching between horizontal and vertical tab layouts, so I just decided against it entirely.

But in my latest effort I had absolutely no doubt in my mind that VS Code had added support by now. After all, VS Code is great and they've added support for practically every popular feature request!

Why Is This Issue Still Open?

This issue that was created in 2020 has almost 400 upvotes and has had active discussion since it was opened.

I remember seeing it shortly after it was posted. And I remember seeing another issue opened for this in 2017. In fact, it might be one of the 3 other related (closed as duplicate) issues listed in this issue. What the heck Microsoft?

The problem is I'd already configured my Visual Studio and Chrome to be vertical tabs. So I looked into some alternatives.

The Most Viable Alternative

Thankfully after about 5 seconds of Googling, I came upon Dominik Weber's blog post, showing the closest thing to vertical tabs you're gonna get:

This just takes advantage of the secondary sidebar (toggled via View > Appearance > Secondary Sidebar) and the Open Editors panel.

Then you can just hide the standard horizontal tabs with the workbench.editor.showTabs setting.

It's not a bad workaround, and it should be sufficient to appease my wanting. But it isn't nearly as customizable as Visual Studio's vertical tabs, where you're able to sort items in alphabetical order or group items by their project, instead only allowing us to group by code panels.

/rant

Handling Bluetooth Programmatically on Windows

Shane Duffy — Sat, 26 Aug 2023 19:17:20 +0000

I use a command to connect to my Pixel Buds now, and switch between Bluetooth devices. It's pretty convenient, especially if you're still on Windows 10, with its buggy Bluetooth auto-connection.

Install Bluetooth Command Line Tools

This is the CLI tool provided by bluetoothinstaller.com, which has provided a humble suite of Bluetooth quality of life tools since 2009.

Connecting to a Bluetooth Device

You can connect by associating a COM service with a Bluetooth device. This is done via the btcom command.

btcom {-c|-r} {-b BluetoothAddress | -n FriendlyName} [-s {sp|dun|GUID|UUID}]

  -c  Create association between COM port and a remote service (Enable non-COM service).
  -r  Remove association between COM port and a remote service (Disable non-COM service).
  -s  Remote service to use (Default is Serial Port Service)
  -b  Bluetooth address of remote device in (XX:XX:XX:XX:XX:XX) format. 
  -n  Friendly name of remote device.
  -h  Prints this help screen.

You'll need to figure out the specific COM services that you want to hook into. Windows connects headsets via two COM services: A2DP (110b) and HFP (111e), so you may need to connect to both for it to work properly.

If you're having issues connecting (-c), try disconnecting (-r) the device first. This has worked effectively for me, although it will generally take a few seconds longer to connect.

Connect

btcom -n "Shane's Pixel Buds" -c -s110e
btcom -n "Shane's Pixel Buds" -c -s110b

Disconnect

btcom -n "Shane's Pixel Buds" -r -s110e
btcom -n "Shane's Pixel Buds" -r -s110b

What Bluetooth Devices Are Available?

The Friendly Name for my Pixel Buds is "Shane's Pixel Buds". You can list available Bluetooth devices and COM services using btdiscovery command. This will list the ID as well as the Friendly Name.

btdiscovery [-i Seconds] [-b BluetoothAddress | -n FriendlyName] [-d Format] [-s [Format]]

  -i  Set the length of inquiry to the specified number of seconds.
  -b  Bluetooth address of remote device in (XX:XX:XX:XX:XX:XX) format.
  -n  Friendly name of temote device.
  -d  Set output format for the list of discovered devices.
  -s  Make service discovery. Optionally set output format for the list of services.
  -h  Prints help screen.

Return to Office: San Francisco

Shane Duffy — Sun, 04 Jun 2023 00:30:35 +0000

It looks like the RTO saga has finally reached my company, so most of our engineering force will be coming into the office a couple a days a week, including myself.

Well, I guess it was announced a couple months ago, but it's finally taking effect as of June. Personally, I don't really mind, since I'm living downtown SF and it's only a 30 minute walk down Columbus and Montgomery to get to the office. But it seems a bit superficial, since I'll need to Zoom the vast majority of my team anyhow...

Regardless, I do see some value in having an in-person collaborative space. Especially in the context of fresh college graduates, where I feel like remote work will probably stunt their growth, to some extent. There's something to be said about being able to freely and casually interact with your team throughout the day, in little "hallway conversations."

Though, feelings aside, SF really needs this right now. In one recent study, San Francisco was determined to be in last place in covid recovery among major cities. It makes sense, given how many people here are in tech, and are really able to work remotely without issue. Or, I would have thought. lol Elon doesn't think so.

So... Are Remote Devs Less Productive?

Productivity is a tricky thing to gauge, and if you ask me, the countless cross-disciplinary social studies that have attempted to answer this question in recent years have been largely meaningless. This is probably why every week the consensus on remote productivity seems to flip. I suppose you could probably use more tangible metrics like revenue growth, but even then, since the onset of the pandemic, the US (and probably the rest of the world, too) has practically become a large scale economics experiment, so you'd be remiss if you attempted to make any conclusions of causality based on assumptions of normalcy.

But I'm not really interested in productivity across the board anyhow. I want to know if software developers, specifically, are more or less productive. But I couldn't really find anything.

Of course developers are happier working from home, and they certainly seem to self report increased productivity (myself included), but there may be more subtle productivity losses incurred due to things like reduced interaction with colleagues and collaboration. But I couldn't really find any in-depth studies attempting to objectively measure this.

It Doesn't Really Matter, I Guess

I have a feeling every software company is going to implement an RTO strategy over the next year or two, whether it's a full return or a hybrid model, regardless of the results of any studies. It has more to do with power and status, if you ask me. These companies and executives want to flex their presence in all of the major cities, but they can't do that if their developers are working comfortably every day with no pants on, in the middle of nowhere.

Framr - Give Your Demo Video a Fancy Gaussian Blur Frame

Shane Duffy — Sat, 31 Dec 2022 04:21:32 +0000

Initially I wrote an FFmpeg script to give my YouTube videos a Gaussian blur frame, but I realized FFmpeg had actually been ported to WebAssembly, so I made a little web app to do it all from the browser.

Links

Web App: framr.dev

FFmpeg Script: framr-script

Rainmeter and Background Terminal

After I built my first open source project a few years ago, Background Terminal, I wanted to post it to the Rainmeter subreddit, so that people using Rainmeter would see it. If you don't know what Rainmeter is, it's just an application for making interactive, live Windows wallpapers. Background Terminal was just an application to also allow you to overlay a terminal on your Windows wallpaper, so it worked well with Rainmeter.

Anyway, people would often post short clips their interactive wallpaper designs in the Rainmeter subreddit, and at the time I had started to see people post it with these fancy, partially opaque frames with a bit of shadow. It looked really nice, so I installed DaVinci Resolve and spent a couple days figuring out how to achieve this. And it ended up looking really good! (See the gif above)

Starting a YouTube Channel

I recently started working on a YouTube Channel, and while doing my first video I realized that it might look good to use this same technique during the sections where I'm showing my monitor, to give it a more "polished" feel. After attempting to manually do this for each clip in DaVinci, it quickly became apparent that this would be prohibitively time consuming. But perhaps I could automate it somehow? I looked into Davinci extensions or scripts, but I was still a total noob with it, and this would be far too much of a time investment.

A few months previously I had used a CLI tool, FFmpeg, to extract video frames for an AI training tool I was working on. Could it be used for something like this?

Learning FFmpeg

After scouring the web, I managed to put together the following script, achieving my desired effect:

# Create inner clip
innerClip="inner_$1"
ffmpeg -i $1 -vf scale=1800:1012 -preset slow -crf 18 $innerClip -y

# Create outer clip
outerClip="outer_$1"
ffmpeg -i $1 -vf "boxblur=30" -c:a copy $outerClip -y

# Apply shadow to outer clip
shadowClip="shadow_$1"
ffmpeg -i $outerClip -i shadow.png -filter_complex "overlay" $shadowClip -y

# Apply inner clip to shadow clip
ffmpeg -i $shadowClip -i $innerClip -filter_complex "overlay = 60:34" result.mp4 -y

It works by copying the video itself into innerClip and outerClip. Then it applies a blur effect to outerClip, and puts the innerClip on top of it, slightly shrunken down. Finally, it adds a shadow (which you must provide as a shadow PNG, I just manually created this in GIMP). Here's an example of the transformation:

Before

After

You can probably tell, based on the fixed numbers in the script, that this script only works for 1080p videos, but this was fine for my purposes.

Turning This Into a Web App: framr.dev

It wasn't long after this I happened to come across FFmpeg ported to WebAssembly! I was a bit occupied with several other projects at the time, but I knew right away that I wanted to migrate my cumbersome script into a nice and dynamic web application, so I whipped up a little prototype that night.

Generating Shadows Dynamically

After putting together a little UI with Angular, I realized that if I wanted to make this capable of working on every video size (not just 1080p) I would need a way to dynamically generate shadows of any size. So after a video is dropped into the app, I was able to use a canvas to generate a shadow with the appropriate size:

// Ensure it is large enough to contain shadow
this.context.canvas.width = video.Width;
this.context.canvas.height = video.Height;

// Clear canvas
this.context.clearRect(0, 0, video.Width, video.Height);

// Calculate shadow dimensions
let innerWidth = video.Width * this.frameRatio;
let innerHeight = video.Height * this.frameRatio;
let x = (video.Width - innerWidth) / 2;
let y = (video.Height - innerHeight) / 2;

// Create shadow
this.context.rect(x, y, innerWidth, innerHeight);
this.context.shadowColor = '#000000';
this.context.shadowBlur = 20;
this.context.shadowOffsetX = 10;
this.context.shadowOffsetY = 10;
this.context.fill();

// Load FFmpeg
if (!this.ffmpeg.isLoaded()) {
    await this.ffmpeg.load();
}

// Save canvas image to FFmpeg
var buffer = Buffer.from((this.canvasElement.toDataURL().split(';base64,')[1]), 'base64');
this.ffmpeg.FS('writeFile', 'shadow.png', buffer);

Running Our FFmpeg Script

After we write this file to our FFmpeg context, we can then call our original script:

// Save video to FFmpeg
this.ffmpeg.FS('writeFile', video.File.name, await fetchFile(video.File));

// Begin processing
let outputName = 'framed_' + video.File.name;
await this.ffmpeg.run('-i', video.File.name, '-vf', 'scale=' + innerWidth + ':' + innerHeight, '-preset', 'slow', '-crf', '18', 'inner-clip.mp4');
await this.ffmpeg.run('-i', video.File.name, '-vf', 'boxblur=30', '-c:a', 'copy', 'outer-clip.mp4');
await this.ffmpeg.run('-i', 'outer-clip.mp4', '-i', 'shadow.png', '-filter_complex', 'overlay', 'shadow-clip.mp4');
await this.ffmpeg.run('-i', 'shadow-clip.mp4', '-i', 'inner-clip.mp4', '-filter_complex', 'overlay=' + x + ':' + y, outputName);

// Download result
const data = this.ffmpeg.FS('readFile', outputName);
this.downloadBlob(new Blob([data.buffer]), outputName);

While FFmpeg has some functionality for calling some things with proper functions, I found that not everything that I needed here was supported, in which case we can just use the ffmpeg.run function to run raw FFmpeg scripts.

I fed it a few files, and it yielded exactly the result that it did when running my original script! However, it was much, much slower...

Optimizing FFmpeg

While running it on my desktop, it was so fast that I didn't really care about optimization. However, it was roughly 10x slower on WebAssembly... So I started looking into how I could make some performance improvements.

The biggest issue with my existing code was that I was applying each step, one at a time. This means that each layer of the video was individually processed and written to a file, before finally combining them all into one video. But as it turns out, we can actually use a complex filter to run all of these steps in a single go:

// Begin processing
let outputName = 'framed_' + video.File.name;
await this.ffmpeg.run('-i', video.File.name, '-i', 'shadow.png', '-filter_complex', 
'[0]boxblur=30[a];[a][1]overlay[b];[0]scale=' + innerWidth + ':' + innerHeight + '[c];[b][c]overlay=' + x + ':' + y, '-preset', 'slow', '-crf', '18', outputName);

// Download result
const data = this.ffmpeg.FS('readFile', outputName);
this.downloadBlob(new Blob([data.buffer]), outputName);

[0]boxblur=30[a] - Apply a boxblur to video input 0, define the result as a

[a][1]overlay[b] - Overlay a on top of the video input 1, define the result as b

[0]scale=innerWidth:innerHeight[c] - Scale the video input 0 to the specified dimensions, define the result as c

[b][c]overlay=x:y - Overlay b on top of c at the specified position offset, output the result

This makes it so that each step runs in memory, without writing to the disk until the final step, thus notably improving performance. It is still much slower than running the script manually, but it's pretty cool that we can run this all from the browser regardless.

Shady Marketing: APITable Is Scraping Emails From GitHub Stars

Shane Duffy — Mon, 26 Dec 2022 10:02:35 +0000

So apparently APITable is scraping emails from people that starred Bitwarden and then sending out misleading emails that appear to be from Bitwarden...

Last week I woke up to an email with big, bold text: "Are you still using Bitwarden?"

Yes, I am. I love Bitwarden. Especially considering the massive data breach LastPass announced a few days ago.

But then it reads: "I would like to recommend a very cool and productive product to you, which is called APITable"

Well naturally, my first thought was that this is probably some company partnering with Bitwarden. Okay, that's fair enough. But then I looked up APITable, and it's a no-code database platform. What the heck does that have to do with Bitwarden? So I kept reading.

"... it will be the best Airtable open-source alternative you have ever seen. I guess you will like it."

Huh...

Did Bitwarden Have a Data Breach?

This obviously wasn't coming from Bitwarden, so I started to consider the possibility that Bitwarden may have had a security breach or something. So I did some digging, and found this Reddit thread from a couple weeks ago, apparently I wasn't the only one who had received this email...

However, one commenter noted that his email address that received the email was not even affiliated with his Bitwarden account, so how could they possibly have linked the two?

So I went ahead and pinged Bitwarden on Twitter to let them know what was going on, and they replied quickly, noting that they have no affiliation with APITable and have not had any security incidents

Shady Marketing

To my surprise, APITable actually just responded to this thread a few hours ago:

"I was browsing open source products on GitHub and saw that you starred Bitwarden, and thus saw your email. Therefore I took the liberty of guessing that you would be interested in open source products, so I sent you an email"

Huh. Wait what? Huh?

Even if the email they sent wasn't blatantly trying to mislead people into assuming affiliation with Bitwarden, it would still be very creepy and spammy. There's no way APITable is a legitimate product, right? This must be some sort of scam, right?

Nope, not only are they a legit product but they are open source and have more than 800 stars on GitHub.

Marketing Advice For APITable

Hey, I get it. Everyone's just trying to get their product out there. But this kind of marketing is plain creepy. Maybe if you started the email with "Hey, we noticed that you starred Bitwarden on GitHub, and we're working on a related open source project that we think you might be interested in." Actually no, even that would be creepy. Just... stop.

You're scaring people.

Finally, a Free (and Open Source) Resume Builder Without Watermarks or Limitations

Shane Duffy — Sun, 25 Dec 2022 03:54:00 +0000

I have wasted more time than I'd like to admit looking for a resume builder. All of the "free" ones I've found end up putting some type of watermark on it (and only disclose this after you've spent an hour building your new fancy resume in an attempt to sunk-cost fallacy you into paying $30). Well, I finally found a free and open source resume builder: Reactive Resume

Back in the golden years that were the early 2000's, everyone would just use a Word template to build a simple but functional resume. It was a bit cumbersome when you had to add a new "experience" entry (and then reduce the font of the whole document so that it would fit nicely on one page), but it was reliable and straightforward.

The Era of Fancy Resumes

At some point, however, these new and fancy resumes started showing up. The ones with a sidebar that lists their programming languages, and fancy coloring and margins and headers, and even the occasional headshot (??). It was like someone printed out a little website onto a piece of paper.

Naturally, I was impressed and decided I needed one. So I started Googling around and found a plethora of "Resume Builder" websites. And what a fun experience it was! Until I got to the end and money was demanded to download it. Or worse, they put a watermark on the bottom of it...

I get it, I get it, nothing in this world is free. So I figured I'd just stick to Word documents instead, and try my best to do something similarly fancy, despite Word being very finnicky.

Reactive Resume

Then, not too long ago, I decided to check again to see if I could find anything truly free. And to my surprise, I managed to find a platform that was free and sleek: Reactive Resume. And not just that, it's open source!

It's got a really nice interface, is easy to use, and you can create an account to save any number of resumes. On top of that, you can export your resume as a JSON to backup to your own devices, which you can use to import back into Reactive Resume later.

Sure, it doesn't have a huge amount of templates to choose from. But the ones that it does have are really nice and they're extremely customizable.

Anyway, I just wanted to post this in case anyone is still using a docx resume. And give a shoutout to Amruth Pillai for building this :)

I Built an Anime Themed Pomodoro App With WebAssembly Blazor

Shane Duffy — Sat, 19 Nov 2022 19:44:52 +0000

Blazor is pretty cool, I hope Microsoft keeps investing into it.

The JavaScript Obligation

I've been consistently obligated to use JavaScript whenever I want to build a web application. Thankfully I discovered TypeScript when learning Angular a few years back which has reduced my stress levels tangibly. However, it's fundamentally just a layer on top of JavaScript and it has its own set of annoyances.

2018, Blazor

I recall reading about Blazor several years ago and how Microsoft was building a fun little framework for controlling your HTML/CSS web UI with C#. But wait, how could you possibly run C# on the browser? Would it be required for the site visitor to have .NET Runtime installed on their machine? But wait, the browser environment is sandboxed anyway, so what gives?

The trick was that you would run your C# on a server, separate from your UI, and they could interact over a SignalR connection! Pretty clever and interesting, and I'd meant to take a look at it at some point, but never got to it. After all, while something like that certainly sounds cool, I can't imagine it would ever become widespread or mainstream. It's just not pragmatic.

Blazor w/ WebAssembly

It turns out that this was all a farce, and the real goal was to compile the entire .NET Runtime into WebAssembly. And last year (or the year before maybe? idk) they released Blazor that runs on WebAssembly. When I heard about it, I knew it was going to be big. We've been hearing about WebAssembly for a decade now, and while it has certainly been useful in some targeted instances, I feel like Blazor is the first major framework pushed by a major company that is attempting to replace JavaScript from the ground up. Good luck Microsoft!

Building pomodoro.moe

I like learning new things by actually building something. But obviously I need something fairly simple since I am completely new to Blazor (and I mean, how the heck do you even control HTML/CSS with C# anyway?!). So I figured I'd make a little themed Pomodoro app. This way I'll get to test the core mechanics and get a feel for the project structure.

Starting Out

There's probably quite a bit to be said about the different components and interactions in a Blazor project, but at the base of everything is the "Razor File" which can contain both HTML and C#, interwoven into eachother. Here is the Index razor file for Moe Pomodoro that contains all of the HTML and C# for the app.

Index.razor

@page "/"
@inject IJSRuntime JSRuntime
@using SystemTimer = System.Timers.Timer;
@using Newtonsoft.Json;
<PageTitle>Moe Pomodoro</PageTitle>

<div id="background-1" style="--background-image-1:url('@_backgroundImage1');--background-z-1:@_backgroundZ1;"></div>
<div id="background-2" style="--background-image-2:url('@_backgroundImage2');--background-z-2:@_backgroundZ2;"></div>
<div class="dark-overlay"></div>
<div id="outer-container">
    <div id="inner-container">
        <h1>Moe Pomodoro</h1>
        <a class="github-button" href="https://github.com/cppshane/moe-pomodoro" data-icon="octicon-star" data-size="large" data-show-count="true">Star</a>
        <div id="clock-container" @onclick="ToggleState">
            <p id="time-text">@TimerString</p>
            <div id="clock-background" style="--clock-background-color:@_clockBackgroundColor"></div>
            <div id="clock-foreground"></div>
        </div>
        <div id="reset-container" @onclick="Reset">
            <img src="https://cdn.shaneduffy.io/moe-pomodoro/reset.webp" />
            <div id="reset-background"></div>
        </div>
        <p>(╯°□°）╯︵  <a href="https://waifu.im" target="_blank">waifu.im</a></p>
    </div>
</div>
@if (_soundPath != String.Empty) {
    <audio autoplay controls hidden><source src="@_soundPath" /></audio>
}

@code {
    private IJSObjectReference jsModule;

    private static readonly string PicEndpoint = "https://api.waifu.im/random/?is_nsfw=false";
    private static readonly string MoshiSound = "https://cdn.shaneduffy.io/moe-pomodoro/audio/moshi.mp3";

    private static readonly TimeSpan WorkTimeSpan = TimeSpan.FromMinutes(25);
    private static readonly TimeSpan BreakTimeSpan = TimeSpan.FromMinutes(5);
    private static readonly string BlackClockColor = "rgba(0, 0, 0, 0.3)";
    private static readonly string GreenClockColor = "rgba(0, 255, 20, 0.15)";
    private static readonly string BlueClockColor = "rgba(0, 184, 255, 0.1)";

    private HttpClient client = new HttpClient();
    private SystemTimer _timer = new SystemTimer(1000);

    private string _backgroundImage1 = String.Empty;
    private string _backgroundImage2 = String.Empty;
    private string _backgroundZ1 = "90";
    private string _backgroundZ2 = "89";
    private string _soundPath;
    private string _clockBackgroundColor = BlackClockColor;

    private bool _showBackground1 = true;
    private bool _workMode = true;
    private bool _timerActive = false;

    private TimeSpan _originalTimeSpan = WorkTimeSpan;
    private TimeSpan _clockTime = WorkTimeSpan;
    private DateTime _startTime;

    public string TimerString {
        get {
            return _clockTime.ToString(@"mm\:ss");
        }
    }

    public class WindowDimensions {
        public double Width { get; set; }
        public double Height { get; set; }
    }

    public Index() {
        _timer.Elapsed += (sender, e) => Tick(e.SignalTime);
    }

    private void StartTimer() {
        _startTime = DateTime.Now;
        _timer.Start();
    }

    private void PauseTimer() {
        _timer.Stop();
    }

    private void Tick(DateTime signalTime) {
        var time = _originalTimeSpan.Subtract(signalTime - _startTime).Add(TimeSpan.FromSeconds(1));
        if (_clockTime.TotalSeconds == 0) {
            PlaySound(MoshiSound);
            Reset();
        } else {
            _clockTime = time;
        }

        StateHasChanged();
    }

    private void PlaySound(string soundPath) {
        _soundPath = String.Empty;
        StateHasChanged();
        _soundPath = soundPath;
    }

    private async void RotateImage() {
        var dimensions = await jsModule.InvokeAsync("getWindowSize");
        var useLandscape = dimensions.Width / dimensions.Height > 1.2;

        var requestResult = await client.GetAsync($"{PicEndpoint}&orientation={(useLandscape ? "LANDSCAPE" : "PORTRAIT")}");
        var content = await requestResult.Content.ReadAsStringAsync();

        if (_showBackground1) {
            _backgroundImage2 = String.Empty;
            _backgroundZ1 = "89";
            _backgroundZ2 = "90";
            _backgroundImage2 = (JsonConvert.DeserializeObject(content))?.images[0].url ?? String.Empty;
        } else {
            _backgroundImage1 = String.Empty;
            _backgroundZ1 = "90";
            _backgroundZ2 = "89";
            _backgroundImage1 = (JsonConvert.DeserializeObject(content))?.images[0].url ?? String.Empty;
        }

        _showBackground1 = !_showBackground1;

        StateHasChanged();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender) {
        if (firstRender) {
            jsModule = await JSRuntime.InvokeAsync("import", "./js/get-window-size.js");
            RotateImage();
        }
    }

    private void Reset() {
        _timer.Stop();

        if (_workMode) {
            _originalTimeSpan = BreakTimeSpan;
        } else {
            _originalTimeSpan = WorkTimeSpan;
        }

        _clockBackgroundColor = BlackClockColor;
        _clockTime = _originalTimeSpan;
        _workMode = !_workMode;
        _timerActive = false;

        RotateImage();
    }

    private void ToggleState() {
        if (_timerActive) {
            _originalTimeSpan = _clockTime;
            _timer.Stop();
            _clockBackgroundColor = BlackClockColor;
        } else {
            _startTime = DateTime.Now;
            _timer.Start();
            _clockBackgroundColor = _workMode ? GreenClockColor : BlueClockColor;
        }

        _timerActive = !_timerActive;
    }
}

The @ Symbol

As you can see in the HTML, we can use @TimerString to reference our TimerString accessor. We can also use @onclick="ToggleState" and @onclick="Reset" to connect our click events to the ToggleState() and Reset() functions respectively.

We can also use this notation in conjunction with the style attribute to pass our C# variables to our CSS style:

Index.razor (truncated)

<div id="background-1" style="--background-image-1:url('@_backgroundImage1');--background-z-1:@_backgroundZ1;"></div>

Index.razor.css (truncated)

#background-1 {
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: var(--background-image-1);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: var(--background-z-1);
}

Importing JavaScript

Blazor doesn't yet support everything, so we can import JavaScript where necessary. In this case, I needed to get the current dimensions of the window so I could request either a portrait or landscape background image from the waifu.im API endpoint, however Blazor doesn't seem to have this capability. To get around this, we can can just define a JavaScript file and import it as a callable module with IJSObjectReference.

get-window-size.js

export function getWindowSize() {
    return {
        width: window.innerWidth,
        height: window.innerHeight
    };
};

Index.razor (truncated)

@inject IJSRuntime JSRuntime
private IJSObjectReference jsModule;

public class WindowDimensions {
    public double Width { get; set; }
    public double Height { get; set; }
}

private async void RotateImage() {
    var dimensions = await jsModule.InvokeAsync("getWindowSize");
    // ... truncated
}

protected override async Task OnAfterRenderAsync(bool firstRender) {
    if (firstRender) {
        jsModule = await JSRuntime.InvokeAsync("import", "./js/get-window-size.js");
        RotateImage();
    }
}

Loading External JS Libraries

I like to use buttons.js to put a link to the GitHub repo on my open source projects. However I noticed it wasn't rendering initially, and it just showed up as a regular, unformatted text link even though I included the script import in index.html. This is because it needs to load after Blazor has initialized. I figured out that I can do this with the following trick:

index.html (truncated)

<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script>
    Blazor.start().then(function () {
        var customScript = document.createElement('script');
        customScript.setAttribute('src', 'https://buttons.github.io/buttons.js');
        document.head.appendChild(customScript);
    });
</script>

We just add autostart="false" to our Blazor JS script element, and add a new script tag that manually initializes Blazor instead, while also adding a promise so we can inject a new script element to load afterward.

Performance?

I didn't do any formal testing but let's just say that it's a bit... clunky. It seems to use quite a bit of memory, presumably in order to run the full .NET Runtime. And Visual Studio's hot reload seems to be a bit fussy when it comes to Blazor, so I wouldn't trust it if I were you, it might trick you into thinking something doesn't work when you really just need a proper application restart...

In any case, I'm sure this stuff will improve over time. Don't give up Microsoft, we're all rooting for you!

VS Code PSA: You Can Autowrap Selected Text In HTML Tags

Shane Duffy — Sat, 27 Aug 2022 04:59:00 +0000

Why did I not care enough to try and optimize my experience writing HTML for the past decade?

So you can select text in VS Code, open the command palette (ctrl + shift + p) and select Emmet: Wrap with Abbreviation, which will open an input box that you can start typing your desired tag into. Then press enter and it will autowrap your selected text.

You Only Just Discovered This? Are You Stupid, Shane?

Yes, I'm sorry. This entire time I never realized I could do this. I regret all of the needless suffering my wrists have endured.

Emmet

VS Code has something called Emmet built into it, which apparently has all sorts of fun looking functionality. I only discovered it because of the HTML autowrap that I saw someone use in a YouTube video, but it looks like it even has its own integrated "language" for auto-generating HTML by defining "abbreviations".

Decentralized... Backend? Building an Angular dApp With OrbitDB and IPFS

Shane Duffy — Sun, 21 Aug 2022 15:43:00 +0000

I built a decentralized, p2p message client with no backend server that runs entirely in the browser.

So I'm a huge proponent of the decentralization of the web, and not just in the realm of cryptocurrency and NFT's. I think the future of the web is true decentralization, and while Web3 seems to have already developed a pretty bad association with gorilla profile pictures, there's more to it than just making money. Not too long ago I wrote a post about IPFS, a p2p file sharing protocol similar to torrenting. But I recently discovered a really impressive library built on top of it that I think has a lot of potential.

OrbitDB

OrbitDB is a pre-alpha library that harnesses the power of IPFS's p2p filesharing and applies it to databases.

But what does that mean exactly?

Let's say you want to create a chat application. Normally, you'd have to spin up some type of database that runs on a server, and then write an API at the client level to interact with it. But with OrbitDB, this database is serverless (No not AWS Lambda serverless. I mean real, actual, 100% browser-based, serverless).

When you send a message, it sends it to a database, and that database exists on your machine. And if other people wanted to join your "chat room," they would then download the database via IPFS, and together, everyone in the chatroom would be able to update and sync it between eachother.

It's really quite clever, and to be honest I'm surprised it hasn't got more attention.

Orbit Chat

Here's the GitHub Repository.

So I decided I wanted to get my hands dirty with this, and had a few ambitious project ideas pop in my head rather quickly, but I found there were limited sample projects or working apps I could reference. So I decided to try and build something to test the waters: a decentralized message client!

Setup

First we need to install ipfs-core and orbit-db to our Angular project.

npm install ipfs-core orbit-db --save

You'll want to add node_modules/orbit-db/dist/orbitdb.js to your scripts defined in angular.json as well.

Then may notice that you get compilation errors saying that global was not found or console messages saying that process is not defined. We can fix these by adding a custom webpack configuration, and specifying it in angular.json (see the repository for full code).

npm install @angular-builders/custom-webpack node-polyfill-webpack-plugin --save-dev

extra-webpack.config.ts

import * as NodePolyfillPlugin from 'node-polyfill-webpack-plugin';

module.exports = {
    node: { global: true },
    plugins: [new NodePolyfillPlugin()]
};

You also may need to set skipLibCheck: true in your tsconfig.json.

IPFS Service

import { Injectable } from '@angular/core';
import { IPFS, create } from 'ipfs-core';
import { BehaviorSubject, } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class IpfsService {
  private _ipfsSource = new BehaviorSubject(null);
  private _createIPFSNodePromise: Promise;

  private get LocalIPFS() {
    const getter = async () => {
      let node = this._ipfsSource.getValue();

      if (node == null) {
        console.log("Waiting for node creation...")

        node = await this._createIPFSNodePromise as IPFS
        this._ipfsSource.next(node);
      }

      return node;
    }

    return getter();
  }

  constructor() {
    const ipfsOptions = {
      repo: './ipfs',
      start: true,
      preload: {
        enabled: false
      },
      EXPERIMENTAL: {
        ipnsPubsub: true,
      },
      config: {
        Addresses: {
          Swarm: [
            '/dns4/wrtc-star1.par.dwebops.pub/tcp/443/wss/p2p-webrtc-star/',
          ]
        },
      }
    };

    this._createIPFSNodePromise = create(ipfsOptions);
  }

  async getLocalNode() {
    return await this.LocalIPFS;
  }
}

So the important part here is the ipfsOptions. Notice that we set ipnsPubsub, this is an experimental feature within ipfs.js, but it has worked without any issues for me. It is used for getting realtime updates for changes in IPFS data.

Also notice that we define a Swarm, and have a funny looking address listed there. That is the signal server that we're using. It's bit long and tricky, but essentially connecting directly to other people within a browser environment is difficult due to port accessibility, so we need a centralized signal server to tell users how to find eachother. This is a public test one, so uptime isn't guaranteed, but it's been pretty functional from my tests so far.

I know, I know. This isn't very "decentralized". But this is really only a limitation for browsers, and you're still trasmitting information directly between eachother, with no middleman. The signal server just helps you find peers. If you properly install IPFS within a desktop environment, this isn't a requirement.

OrbitDB Service

import { Injectable } from '@angular/core';

declare var OrbitDB: any;

@Injectable({
  providedIn: 'root'
})
export class OrbitdbService {
  messages = new Array();
  private _localInstance: any;
  private _database: any;

  async loadLocalInstance(IPFS: any) {
    this._localInstance = await OrbitDB.createInstance(IPFS);
  }

  async createDatabase() {
    let peerId = await this._localInstance.identity.id;
    this._database = await this._localInstance.feed("orbitchat.messages." + peerId, {
      accessController: {
        write: ["*"]
      },
      localOnly: false,
      overwrite: true,
      replicate: true
    });

    this._database.events.on('replicated', () => {
      this.updateMessages();
    });

    this._database.events.on('ready', () => {
      this.updateMessages();
    });

    this._database.events.on('write', (address: any, entry: any, heads: any) => {
      this.updateMessages();
    });

    await this._database.load();

    const address = await this._database.id;
    return address;
  }

  async connectToDatabase(address: string) {
    await this._database.close();
    this._database = await this._localInstance.open(address);

    this._database.events.on('replicated', () => {
      this.updateMessages();
    });

    this._database.events.on('ready', () => {
      this.updateMessages();
    });

    this._database.events.on('write', (address: any, entry: any, heads: any) => {
      this.updateMessages();
    });

    await this._database.load();
  }

  updateMessages() {
    const items = this._database.iterator({ limit: -1 }).collect().map((e: any) => e.payload.value);
    let i = 0;
    items.forEach((e: any) => {
      if (i < this.messages.length) {
        this.messages[i] = e;
      }
      else {
        this.messages.push(e);
      }

      i++;
    });
  }

  async sendMessage(message: string) {
    if (this._database) {
      await this._database.add(message);
    }
  }
}

Here we can initialize an OrbitDB instance by giving it the IPFS object we created from our previous service. Then all we have to do is call the feed function to initialize an OrbitDB database. There a few different types of databases you can use, but feed works in our case.

We can then instantiate listeners that will update our messages. ready is thrown when the database has loaded all local data, write is thrown when we, ourselves, add to the database, and replicated is thrown after we finish replicating the database from a peer. Here is the full list of events that can be thrown.

App Component

import { Component } from '@angular/core';
import { IpfsService } from './services/ipfs/ipfs.service';
import { OrbitdbService } from './services/orbit-db/orbitdb.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'orbit-chat';
  uri = "";
  status = "Initializing IPFS...";

  constructor(private ipfsService: IpfsService, public orbitDbService: OrbitdbService) { }

  async ngOnInit() {
    let IPFS = await this.ipfsService.getLocalNode();
    this.status = "Initializing OrbitDB...";

    await this.orbitDbService.loadLocalInstance(IPFS);
    this.status = "Creating OrbitDB database...";

    this.uri = await this.orbitDbService.createDatabase();
    this.status = "Connected!"
  }

  async connectButtonClick() {
    this.status = "Connecting to OrbitDB database...";

    await this.orbitDbService.connectToDatabase(this.uri);
    this.status = "Connected!";
  }

  messageInputEnterKeydown(event: any) {
    const inputValue = event.target.value;
    event.target.value = '';

    this.orbitDbService.sendMessage(inputValue);
  }
}

In the app component we tie it all together. And voila! We have a decentralized, serverless, p2p message client.

Forget SQL, All My Homies Use LINQ

Shane Duffy — Sat, 13 Aug 2022 14:04:00 +0000

Learning SQL is a pain. Using SQL is a pain. Be better. Choose .NET. Choose LINQPad.

Early last year I was building out a database site for a game and decided it would be a good opportunity to start playing with Entity Framework (or EF Core, as it's now called) that I'd been meaning to get into for awhile, but never got to using. I already had my database setup and some data inserted but I figured it wasn't a big deal to just re-write it with EF Core and generate a new database.

But after some digging, I discovered that EF Core actually has functionality specifically for the case of reverse engineering an existing SQL schema and generating the associated .NET models: scaffolding

Scaffolding, Yay

dotnet ef dbcontext scaffold "server=127.0.0.1;uid=root;pwd=password;database=classicmodels" Pomelo.EntityFrameworkCore.MySql

You just provide the database connection string and the SQL provider package (SqlServer, MySql, etc.), and EF Core will handle the rest. Note that you'll also need the global dotnet-ef package for this to work, which you can install with the following:

dotnet tool install --global dotnet-ef

This was brilliant, so I generated some models and I was immediately able to run LINQ queries on my database, no effort required.

But then I realized, this would be extraordinarily useful as a dedicated app: to be able to connect to a database and start manipulating it directly within your app with LINQ, rather than having to use the syntactically unappealing and generally displeasing SQL. Okay, it's not that bad, but I've always disliked the structure and semantics.

So I got to work and started building a prototype. When Monday came, and I informed one of my colleagues about my clever idea and the project I started building out, to which he replied "isn't that just LINQPad?"

LINQPad

LINQ is probably one of the most beloved aspects of .NET.

And LINQPad takes advantage of that. You can connect to a variety of SQL database flavors and it will generate the models and display a code editor within the app, and it supports all of the .NET languages (VB, C#, F#, etc), has a useful model explorer, and even has intellisense and integrated debugging. When you run your LINQ queries you can then output it in a grid format, exactly like you'd see in something like MySQL Workbench. It really was everything I wanted, and more. The only qualm I have is that it is Windows only...

LINQPad, where have you been my whole life?