I "vibed" a chat-bridge app to sync across multiple platforms (think Discord, Telegram, Slack, Teams, etc). All in all it did pretty good. Enough Interface scaffolding for testability. Good enough DI to make testing feasible, and It made some tests.

The good stuff:

1. It was handy to boilerplate stuff, many tab-completion ideas were perfect, but far from all.

2. It was super effective when using it as a research assistant and not in agent mode.

3. Copilot was quite nice to be able to flip between different models including most of the time ones that didn't cost me anything. Those free models were quite good for trivial tasks like refactoring and research.

4. Anything where a close-to-default config or implementation was involved was great. This included setting up my nearly default CI/CD with GitHub actions. I didn't do anything weird or custom and used a very well documented pattern building a docker image and publishing that to my private ghcr so I can run it on my home lab.

Of those, my favorite usage was asking it for alternate design patterns or implementations for some ideas and then being able to jump from there to the actual documentation because… I don't trust AI summaries. I do like them for a summary where I don’t care if some of the details are possibly not 100% correct. Summarizing an news story, article or blog that I don't care about every detail being correct would count here.

There's some stuff I don't like or was outright terrible:

1. It got application logic just straight up wrong, attempting to store a channel-id not a message-id.

2. Smells

   1. Inconsistency. There was some worse than other. Some things were implemented in different ways or using different patterns. Sometimes this made sense for example when Adapters for different platforms must target different API paradigms. Other times it was just a smell like when completely different patterns were used to integrate those adapters with the core of the app.

   2. Duplicate implementations where a refactor to abstract a function or use an overload is just far better

   3. Excessive safety. Really loved putting try-catch blocks EVERYWHERE. Especially bad for something like "no logger configured." when it is required or simply defaults to console and can never be null.

3. Hallucinations

   1. APIs that simply don't exist

   2. Trouble with current vs legacy things like trying to use deprecated API methods

4. Workflow issues

   1. None of the models seemed to want to even attempt to use the PowerShell console properly. This was out of safety because it didn't want to risk any potential profile configurations it didn't know about but no models ever managed to properly escape quotes or special characters when using the console to debug. Most of them managed to work around the issue by writing .ps1 scripts and executing those.

   2. When debugging issues the agents almost never cleaned up leftover scripts or comments or commented out sections once they resolved a bug. Even after prompting them to.

5. More trivial things

   1. Naming. I guess this could be called a nit, but it came up with "EfBridgeMappingStore" for the repository… which is weird. I changed it to "BridgeRepository"

   2. Adding non-current packages. I have no idea why it liked doing this but… it did.

I think I saved the most time and credit AI the most in… research. I didn't have to dig through volumes of extensive documentation or details to find the information I was looking for. I could ask for a link to the specific information I needed and I could have it dismiss the things that I knew did not apply or were irrelevant without having to go through them all myself.

Others have said this in less words, but it's the same theme as many have adopted. Use AI as a tool, not a solution. Treat it like a junior engineer and check the work it does. Like a junior it absolutely can offer some great ideas, but also it is often eager to provide solutions that add smell or at worse are simply broken or wrong.

So I've been playing with gpt5 for a bit now and asked it to take a look at my DX. I should have known this was an option, but never got around to actually looking into it. Nice suggested change to wrap all my dev tasks into one since they've grown a bit now.

		{
			"label": "Start Dev Stack",
			"type": "shell",
			"command": "echo Starting Dev Stack...",
			"group": "build",
			"problemMatcher": [],
			"dependsOn": [
				"Start Backend (.NET)",
				"Run React Router v7 App (Dev)",
				"tailwind watch",
				"Start MCP Proxy"
			],
			"dependsOrder": "parallel",
			"runOptions": { "runOn": "folderOpen" }
		}
	]

Been wanting to dip into it for a while, but finally did. You can see it over at https://www.slipsec.dev/react. I watched a few courses on https://frontendmasters.com/ and did some vibe coding to boilerplate some things. As expected the agents were... not great.

Sonnet 4 and o4-mini both tried to use create-react-app even though it's been deprecated for quite a while now, and wasn't able to follow the tailwind upgrade guide even with the page added to the context. I'd say maybe 5/10, can't troubleshoot well at all past some many of the basic compile issues and type errors.

All in all my opinion remains the same: AI is still an eager intern, and you probably shouldn't trust them with architecture, and really need someone to be able to review what they do. For example when I asked it to port from ASP MVC and JavaScript, it still did some dumb things like making calls to the backend to find filtered posts because that's how I did it there. That's not very react-like, with it's own client side data, it could just filter them and update the DOM.

But I'm still happy with all this. I feel like I'm learning good practices in react for the most part, I'm learning js/ts stuff I haven't used as much and making sure I review all the edits and look deeper into anything that I'm not already understanding (mostly just framework stuff and a touch of syntax I'm not used to as a backend-first guy.) All in all I feel like I'm doing pretty good at making sure it's not doing really dumb things and spotting when it does.

Even way back in college I barely touched C, it was only C++. But trying to figure out how to get these little $6 guys running I managed to compile enough to make a LED blinker and flash it with freeRTOS to the chip. I used used the ESP-IDF plugin for Visual Studio Code Then I found out about ESPHome. Wow, it's just write some yaml and do a (very long) build from Home Assistant and flash your chip. Above is the LED blinker and the DHT11 temp/humidity sensor that provide the data to Home Assistant and with the MCP extension to Copilot who I can now ask what the temp is in my office. It's in the basement it gets kinda chilly sometimes.

esphome:
  name: esphome-web-b30688
  friendly_name: Office
  min_version: 2025.5.0
  name_add_mac_suffix: false

esp32:
  board: esp32dev
  framework:
    type: esp-idf

# Enable logging
logger:

# Enable Home Assistant API
api:

# Allow Over-The-Air updates
ota:
- platform: esphome

wifi:
  networks:
  - ssid: "MySSID"
  password: !secret wifi_pw

sensor:
  - platform: dht
    pin: GPIO15
    temperature:
      name: "Temperature"
    humidity:
      name: "Humidity"
    update_interval: 5min

I've been playing with Visual Studio Code more lately just because I want to check out some of the new AI stuff and Visual Studio just lags on the new features. So in addition to getting comfortable with the nuances in things like launch profiles I started taking a look at the Agent Mode copilot. As an AI skeptic with how bad it was ever getting it to one-shot anything for me Agent Mode has really turned me around. It still hallucinates all over the place and often makes code that doesn't even run, but now it fixes it without intervention.

So what else can I do? First thing to come to mind was talking to Home Assistant. There's no instructions for VSC yet from Home Assistant (I should push a PR huh?) https://www.home-assistant.io/integrations/mcp_server. Also this actually only started working just now with the very latest VSC insider build (1.101.0) because they bumped the MCP library https://github.com/modelcontextprotocol/csharp-sdk/pull/377 that added auth support.

There still isn't support for SSE in VSC but I expect it quite soon. It's coming in ASP.NET 10 too https://learn.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-10.0?view=aspnetcore-9.0#support-for-server-sent-events-sse.

So we need a SSE proxy server and setup copilot to use stdio. Won't lie, I totally vibe-coded one in node and it would have taken me WAY longer if I had to research all the proper Curl commands I needed. Copilot (running Claude Sonnet 4 preview) was able to come up with all that, generate some tests and while it needed to iterate multiple times to figure out the proper auth settings I was able to watch every step. It's getting it wrong but fixing it. It's able to come up with Curl tests, run them, and see what it did wrong. This is the real game changer if you ask me. Of course there are a couple existing SSE proxies in a few languages out there on Github if you don't want to roll your own.

I'll probably next play with the https://github.com/modelcontextprotocol/csharp-sdk package and roll my own and get off the node version but for now it's a functional POC and Home assistant can turn off my lights and open my garage door.

The settings are pretty trivial in VSC.

    "mcp": {
        "servers": {            
            "mcp-home-assistant": {
                "type": "stdio",
                "command": "node",
                "args": ["C:\\Users\\john\\source\\mcp-proxy\\proxy.js"],                
                "env": {
                    "SSE_URL": "http://x.x.x.x:8123/mcp_server/sse",
                    "API_ACCESS_TOKEN": "generated from home assistant UI"
                }
            }
        }
    }

Decided to make proper changes when adding tags so I can actually test some things. I pulled out the DB and entity framework stuff into a proper repository with interface. Not sure what all there is to say about it but I'm happy enough that I have proper tags. A splash of .js to just to do some crud stuff for adding tags to a post and to make the drawer properly work and filter based on tags.

So it came together like this with a controller:

        public async Task<IActionResult> GetBlogPostsByTags([FromBody] List<string> tags)
        {
            List<BlogPost> posts = await _context.GetBlogPostsByTagsAsync(tags);
            MarkdownPipeline pipeline = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build();
            posts.ForEach(post => { post.Body = Markdown.ToHtml(post.Body, pipeline); });
            return PartialView("_PostsPartial", posts);
        }

Repository now properly separated:

        public async Task<List<BlogPost>> GetBlogPostsByTagsAsync(List<string> tags)
        {
            var posts = await _context.Posts
                .Include(x => x.Tags)
                .Where(x => x.Tags.Any(tag => tags.Contains(tag.DisplayName)))
                .OrderByDescending(x => x.PostTime)
                .ToListAsync();
            return posts;
        }

And the splash of frontend. I think I like how I have the close button, but I haven't seen many done this way before. Fun to learn about stopPropagation because the click event was bubbling up to the tag from the close/remove "x".

       document.querySelectorAll('.remove-tag').forEach(tag => {
            tag.addEventListener('click', async function(e) {
                e.stopPropagation();
                tag.parentElement.classList.remove('dark:bg-blue-800');
                tag.parentElement.classList.add('dark:bg-blue-950');
                await refreshPosts();
            });
        });

        async function refreshPosts(){
            const selectedTags = [];
            document.querySelectorAll('.category-tag').forEach(tag => {
                if (tag.classList.contains('dark:bg-blue-800')) {
                    selectedTags.push(tag.getAttribute('name'));
                }
            });
            const response = await fetch('/Blog/GetBlogPostsByTags', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]')?.value
                },
                body: JSON.stringify(selectedTags)
            });
            if (response.ok) {
                const postsHtml = await response.text();
                const mainContent = document.querySelector('main[role="main"]');
                if (mainContent) {
                    mainContent.innerHTML = postsHtml;
                }
            } else {
                console.error('Failed to fetch blog posts:', response.statusText);
            }
        }

Added a View Component for Tags. Just because I've never used them before, it's not a great idea because I added a nav-drawer with them that's in _Layout.cshtml so the advantage of re-use is kind of lost, but hey... tried something new- maybe I'll find somewhere to re-use it later.

Class is simple enough:

    public class TagsViewComponent : ViewComponent
    {
        private readonly IRepositoryService _context;

        public TagsViewComponent(IRepositoryService context)
        {
            _context = context;
        }

        public async Task<IViewComponentResult> InvokeAsync()
        {
            var tags = await _context.GetAllTagsAsync();
            return View(tags);
        }

    }

   <div id="nav-drawer" class="fixed top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white w-64 dark:bg-[#0c142c] shadow-lg">
       <div class="flex justify-between items-center mb-4">
           <h5 class="text-lg font-semibold text-gray-800 dark:text-white">Tags Tags Tags</h5>
           <button id="drawer-close" class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-white">
               <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
               </svg>
           </button>
       </div>
       <div class="py-4 overflow-y-auto">
           <ul class="space-y-2">
               @if (User.Identity?.IsAuthenticated == true)
               {
                   <li>
                       <a asp-area="" asp-controller="Blog" asp-action="Create" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-blue-900">
                           <span class="ml-3">Create Post</span>
                       </a>
                   </li>

                   <li>
                       <a asp-controller="Ocr" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-blue-900 group">
                           <span class="ml-3">OCR</span>
                       </a>
                   </li>
               }
               @await Component.InvokeAsync("Tags")
           </ul>
       </div>

And a bit of vanilla javascript to toggle:

            const drawerToggle = document.getElementById('drawer-toggle');
            const drawerClose = document.getElementById('drawer-close');
            const drawer = document.getElementById('nav-drawer');
            const contentWrapper = document.getElementById('content-wrapper');

            // hamburger button
            if (drawerToggle) {
                drawerToggle.addEventListener('click', function() {
                    drawer.classList.toggle('-translate-x-full');
                    contentWrapper.classList.toggle('ml-64'); // Shift content by drawer width
                });
            }

            // X button 
            if (drawerClose) {
                drawerClose.addEventListener('click', function() {
                    drawer.classList.add('-translate-x-full');
                    contentWrapper.classList.remove('ml-64');
                });
            }

AI helped me out here and I'm happy with using it like this!

1. It thought I might have been injecting with the wrong scope (I was not, but a nice refresher)

2. It suggested some logging things (which did not help, but a nice refresher, and sure... I'll go ahead and put that in)

3. It thought my tests might be causing issues (they were not, but thanks for confirming how I was using an in-memory DB)

4. It hallucinated that I had Blazor involved (It was not)

5. It confirmed that I didn't need logging for `DbContextFactory : IDesignTimeDbContextFactory<BlogContext>` (for migrations) so I'd be fine overloading BlogContext. And yeah... I should really split out identity here for cleaner debugging. I'll take out this stacktrace now, but it was able to confirm that my context init was happening 2x, once for identity.

       public class BlogContext : IdentityDbContext<User>
       {
           private readonly ILogger<BlogContext>? _logger;
           public BlogContext(DbContextOptions<BlogContext> options, ILogger<BlogContext> logger)
               : base(options)
           {
               _logger = logger;
               Guid _instanceId = Guid.NewGuid();
               _logger.LogInformation($"BlogContext created Instance ID: {_instanceId}");
               _logger.LogInformation($"Creation Stack Trace:\n\n{Environment.StackTrace}");
           }
   
           //This allows DbContextFactory to avoid injecting an ILogger because it doesn't need to.
           public BlogContext(DbContextOptions<BlogContext> options) : base(options)
           {}
           public DbSet<BlogPost> Posts { get; set; } = default!;
   

6. It did eventually notice an obvious missing await that was actually the issue here.

I really like AI as a context specific summary and reminder of stuff I already know and it's OK-ish at troubleshooting 20% of the time even if it might take the LONG way to get there. Since I've been on legacy apps for a long while I'm really enjoying using it as a KB refresh coach.

Yup. I forgot about people using light mode. I'll style that later. For now I'll just force Tailwind.

<html lang="en" class="dark">

and tailwind.config.js

module.exports = {     
content: ["./Views/**/*.{cshtml, js}"],     
darkMode: 'class',

Config bites again (And AI was actually helpful resolving!)

The short version is I had a config setup where docker-compose.override.yml in my solution root defining DB host/port/name. This was fine to debug locally but when I tried to add a migration it obviously had issues since the cmdlets don't know anything about the container at all. This was certainly a good idea I had at one point because something like

DB__HOST=host.docker.internal
DB__PORT=5432
DB__DATABASE=blog

Well that makes sense. I'd put that into some Environment variables, and put the Secrets (username/password) into something more secure like (whatever) Vault. But while this works just fine for debugging locally trying to make/run DB migrations doesn't know about the containers. Don't do this I guess.

Copilot was actually helpful tracking down why Entity Frameworks weren't working for me by offering not much actual help, but some good logging spots helped. I actually appreciate this very much as the 2nd good way to use AI (first being "make me this pile of boilerplate code so I don't have to type and copy-pasta it).

Anyway - Config is weird in apps and it's really great when it works like you expect, but there's sneaky stuff in CI/CD (always has been) because there's SO MANY ways to do Environment based config. I've hit many of them before but the config builder in ASP MVC core is crazy in the places it looks. When you add containers on top of this (especially when debugging locally) it can be hard to see where config is coming from because it does its best to look everywhere. Is that a bad thing? Probably not, but it would be nice if there was a quick way to just dump WHERE the config came from.

In order to create DB migrations and update the actual database with the Entity Framework tools or cmdlets I had to add a class that implements IDesignTimeDbContextFactory so the tools can setup the context. This is done the same as it is in program.cs with the builder. I'm only using .AddEnvironmentVariables() and .AddUserSecrets<Program>() but they seemed interesting to add just in case I wanted to handle config differently in the future. Copilot suggested I might want to throw some exceptions with more info which since this took a bit to track down seemed like a fine idea.

    public class DbContextFactory : IDesignTimeDbContextFactory<BlogContext>
    {
        public BlogContext CreateDbContext(string[] args)
        {
            // Determine the path to your project's root directory
            var basePath = Directory.GetParent(Directory.GetCurrentDirectory()).FullName;

            IConfigurationRoot conf = new ConfigurationBuilder()
                .SetBasePath(basePath)  // Use the project's root directory
                .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
                .AddEnvironmentVariables()
                .AddUserSecrets<Program>() 
                .Build();

            NpgsqlConnectionStringBuilder csBuilder = new();

            csBuilder.Host = conf["DB:host"] ?? throw new InvalidOperationException("DB:host is not configured.");
            csBuilder.Port = int.Parse(conf["DB:port"] ?? throw new InvalidOperationException("DB:port is not configured."));
            csBuilder.Database = conf["DB:database"] ?? throw new InvalidOperationException("DB:database is not configured.");
            csBuilder.Username = conf["DB:username"] ?? throw new InvalidOperationException("DB:username is not configured.");
            csBuilder.Password = conf["DB:password"] ?? throw new InvalidOperationException("DB:password is not configured.");
            
            var optionsBuilder = new DbContextOptionsBuilder<BlogContext>();
            optionsBuilder.UseNpgsql(csBuilder.ConnectionString);

            return new BlogContext(optionsBuilder.Options);

Configuration providers
ASP and User Secrets

Markdown code blocks in prose are ugly.

So let's grab highlight.js and make them pretty! A bit in tailwind.config.js here to make the weird background gone. It's the darker color behind the highlighted code

    theme: {
        extend: {
            typography: (theme) => ({
                DEFAULT: {
                    css: {
                        // Reset code block styles
                        'code': {
                            'background-color': 'transparent',
                            'padding': '0',                        },
                        'pre': {
                            'background-color': 'transparent',
                            'padding': '0',
                        },
                        'pre code': {
                            'background-color': 'transparent',
                            'padding': '0',
                        },
                    },
                },
            }),
        },
    },

And moved my styles into _Layout.cshtml (kind of)

    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/css/tailwind.css" asp-append-version="true" />
    @RenderSection("Styles", required: false)
</head>

Just to make sure the order is correct so tailwind doesn't override.

Finally on the page:

@section Styles {
    <link rel="stylesheet" href="https://unpkg.com/@@highlightjs/cdn-assets@@11.11.1/styles/base16/dracula.css">
}
@section Scripts {
    <script src="https://unpkg.com/@@highlightjs/cdn-assets@@11.11.1/highlight.min.js"></script>

    <script src="https://unpkg.com/@@highlightjs/cdn-assets@@11.11.1/languages/csharp.min.js"></script>
    <script src="https://unpkg.com/@@highlightjs/cdn-assets@@11.11.1/languages/json.min.js"></script>
    <script src="https://unpkg.com/@@highlightjs/cdn-assets@@11.11.1/languages/javascript.min.js"></script>
    <script src="https://unpkg.com/@@highlightjs/cdn-assets@@11.11.1/languages/http.min.js"></script>
    <script src="https://unpkg.com/@@highlightjs/cdn-assets@@11.11.1/languages/typescript.min.js"></script>
    <script>
        hljs.highlightAll();
    </script>

I think that's enough support for now to keep it smaller.

The Service is pretty straight forward, it's nearly exactly the sample code from MS.

using Microsoft.Azure.CognitiveServices.Vision.ComputerVision;
using Microsoft.Azure.CognitiveServices.Vision.ComputerVision.Models;

namespace slipsec.dev.Services
{
    public class OcrService : IOcrService
    {
        private readonly string _endpoint;
        private readonly string _key;
        public OcrService(string endpoint, string key)
        {
            _endpoint = endpoint;
            _key = key;
        }
        public async Task<List<string>> ProcessImageAsync(Stream fStream)
        {
            ComputerVisionClient client = Authenticate(_endpoint, _key);
            List<string> results = await AnalyzeImage(client, fStream);
            return results;
        }
        public static ComputerVisionClient Authenticate(string endpoint, string key)
        {
            ComputerVisionClient client =
              new ComputerVisionClient(new ApiKeyServiceClientCredentials(key))
              { Endpoint = endpoint };
            return client;
        }

        public static async Task<List<string>> AnalyzeImage(ComputerVisionClient client, Stream fileStream)
        {
            string operationLocation = String.Empty;

            /*           using (FileStream stream = new FileStream(file, FileMode.Open))
                       {
                           var x = await client.ReadInStreamAsync(stream);
                           operationLocation = x.OperationLocation;
                       }
            */

            var x = await client.ReadInStreamAsync(fileStream);
            operationLocation = x.OperationLocation;

            // Retrieve the URI where the extracted text will be stored from the Operation-Location header.
            // We only need the ID and not the full URL
            string operationId = operationLocation.Substring(operationLocation.Length - 36);
            ReadOperationResult results;

            do
            {
                results = await client.GetReadResultAsync(Guid.Parse(operationId));
            }

            while ((results.Status == OperationStatusCodes.Running ||
                results.Status == OperationStatusCodes.NotStarted));
            return ExtractText(results);
        }

        public static List<string> ExtractText(ReadOperationResult results)
        {
            List<string> lines = new List<string>();
            IList<ReadResult> rResults = results.AnalyzeResult.ReadResults;
            foreach (ReadResult rResult in rResults)
            {
                foreach (var line in rResult.Lines)
                {
                    lines.Add(line.Text);
                }
            }
            return lines;
        }
    }
}

From here it is just a matter of adding an interface:

namespace slipsec.dev.Services
{
    public interface IOcrService
    {
        /// <summary>
        /// 
        /// </summary>
        /// <param name="imageData"></param>
        /// <returns>A list of the lines found by the OCR</returns>
        Task<List<string>> ProcessImageAsync(Stream imageData);
    }
}

And then handling the injection in Program.cs:

builder.Services.AddScoped<IOcrService, OcrService>(provider=>
    new OcrService(conf["OCR:AzureVisionEndpoint"], conf["OCR:AzureVisionKey"])
);

There's a ton of ways to to config in .NET but I like this one. I'm just doing environment variables in docker for deploy and for dev using the secrets manager.

I didn't use JSON for now but have grouping for things if I decide to move that direction.

  "DB:username": "redacted",
  "DB:password": "redacted",
  "OCR:AzureVisionEndpoint": "https:redacted//r/",
  "OCR:AzureVisionKey": "redacted",
  "Authentication:Google:ClientId": "redacted.apps.googleusercontent.com",
  "Authentication:Google:ClientSecret": "redacted"

I should have gone full TDD and put in some tests first but better late than never. I have yet to refactor the repository.

        [Fact]
        public async Task ShouldProcessImageAndReturnPlaylistEntries()
        {
            // Arrange
            _ocrServiceMock.Setup(x => x.ProcessImageAsync(It.IsAny<Stream>())).ReturnsAsync(new List<string> {
                "https://youtu.be/testUrl1", 
                "https://youtu.be/testUrl2" 
            });
            var controller = new OcrController(_context, _ocrServiceMock.Object);
            var stream = new MemoryStream();
            var testFile = new FormFile(stream, 0, stream.Length, "file", "file.jpg");

            // Act
            var result = await controller.ProcessImage(testFile, new OcrModel()) as ViewResult;

            // Assert
            var returnValue = Assert.IsType<OcrModel>(result?.Model);
            Assert.Equal(2, returnValue.PlaylistEntries.Count);
            Assert.Equal("https://youtu.be/testUrl1", returnValue.PlaylistEntries[0]);
            Assert.Equal("https://youtu.be/testUrl2", returnValue.PlaylistEntries[1]);
        }

And of course the controller:

        [HttpPost]
        public async Task<IActionResult> ProcessImage(IFormFile img, OcrModel model)
        {
            var filePath = Path.GetTempFileName();
//TODO: multiple files?
            Stream stream = img.OpenReadStream();
            List<string> lines = await _ocrService.ProcessImageAsync(stream);
            foreach (string line in lines)
            {
                model.PlaylistEntries.AddRange(
                    line.Split()
                    .Where(x => x.Contains("youtu")) //Business logic in the controller because this is only my personal blog.
                    );
            }
            using (MemoryStream ms = new MemoryStream())
            {
                await img.CopyToAsync(ms);
                model.Image = ms.ToArray();
            }
            return View("Index", model);
        }

This is a very MVC way of doing things and there's really no need to pass the images back and forth like this when it should really be a fetch() and just update what's needed not the whole page. That's a good future refactor but here's to delivering working software today.

My kids have a homeschool curriculum and it includes a bunch of links to educational videos on youtube. Typing these in by hand is a pain. I tried a couple popular OCR Nuget packages like IronOcr and Tesseract, but they didn't work very well only managing to correctly identify maybe 2/3 of the links at best.

I finally setup and tried MS Azure Computer Vision (their AI OCR product) and it worked flawlessly even on less-than-great quality photos of the page from the book.

So I got to do some refresher stuff:

1. Working with images

2. Dependency injection for Services (Azure AI and YouTube )

3. Unit Testing

I will detail how I did everything in future posts but here's what it came out like for now:

My home stack? Nothing too fancy.

My old desktop is my only server, and has backup storage connected. It runs Home Assistant in a KVM/QEMU VM, and my website in docker. MQTT in another container to allow it to talk with my ratgdo. Tailscale to allow my phone to VPN home so I can connect to HA. VLAN to add some semblance of security to IoT.

Some Raspberry Pis Docker to run some chat bots for a Discord group or two, and random projects.

I don't have much installed on my workstation but often open are: OneNote, Visual Studio, Visual Studio Code, pgAdmin, Docker Desktop, Firefox, Chrome, Bitwarden, Discord, Signal, Telegram, maybe Spotify. I exist on Xitter, Bluesky, and Mastodon, but not frequently.

My website runs on docker as well but I moved it off of the Pi. The rest of the stack is:

1. Backend

   1. Fronted by CloudFlare

   2. Served by Kestrel

   3. Standard dotnet docker images so based on Alpine

   4. Markdig for markdown->html rendering

   5. PostgreSQL database

   6. SSO via ASP.NET Core Identity

2. Frontend

   1. Stacks Edit (From StackExchange) for client side markdown editor.

   2. Tailwindcss (and PostCSS) for styling

   3. Webpack, but likely soon moving to Vite for build.

   4. asp-client-validation so I could remove jQuery entirely.

When I was working to replace Bootstrap and remove jQuery from my blog here (ASP MVC). My motivation was to get back up to speed on what's going on in the frontend world and wow is it wild! I've never thought of myself as a front-end dev, but that that doesn't mean I haven't touched it. Mostly to support some legacy applications that used jQuery, Bootstrap, or plain javascript and CSS.

So, at the very least… I wanted to get my feet into some TypeScript. So that's what I'm doing to load StacksEditor (the markdown editor StackOverflow and friends use) and also the replacement for jQuery unobtrusive validation.

But the real jungle of frontend stuff is the tools and frameworks. When I last traveled here it was Grunt and Gulp, maybe Browserify and webpack. My how things have exploded in this space.

Bundlers and builders:

Webpack is still going strong. Huge community, huge number of places it's being used. It has a million plugins that can do just about anything you could ever want in a build. But… like other bundlers and tools written in javascript, it's not going to be the FASTEST dog in the race.

Speaking of fast, Parcel is written in Rust so it's… Fast.

Snowpack is dead, and suggests moving to Vite. It seems to have the same idea with unbundled for dev much like esbuild.

esbuild is up next. It's written in Go and is faster than parcel. It's NOT a bundler though, it's just a transpiler.

Turbopack is basically just webpack but in Rust. It seems to be slowly getting there.

Rollup is what Vite uses for dev serving. It's fast, and does good for prod builds because it's a capable bundler, with tree-shaking, code splitting and the other goodies you'd expect.

Vite is seemingly the newest kid on the block, and it uses 2 transpilers- esbuild for dev (FAST), and Rollup for prod. That's great for productivity but bad for the obvious reason that dev is not the same as prod, and prod builds aren't fast like dev. It's also the bundler for React so it's everywhere and has tons of traction.

Rolldown looks like it's getting close, and likely the path forward for Vite replacing both esbuild and rollup to be the best of both worlds. Of course it's written in Rust.

Since I'm writing typescript now I have to use some sort of tool. For the time being I've… done some research obviously, and settled on good old webpack. I'm a small app, and it's most likely what I'll encounter at job[next] so it's probably the best to brush up on, but I will be exploring Vite soon.

But wait there's more!

Runtimes:

Node.js isn't alone anymore as a javascript runtime, and that's probably good. It's mostly C++ and that's not sexy anymore. Now there's also:

Dino: by the same author addressing things he wished were done differently and lessons learned, still runs on V8.

Bun: using JavaScriptCore from Webkit not V8, and written in Zig instead of Rust. What's Zig? Oh it's kind of like Rust but not. It offers some of the direct memory control like C/C++ and some of the type checking of Rust. One key point is it only checks libs with generics against stuff using them for type safety where Rust proves function taking a generic is safe for any value passed. Oh and now it's turning into a bundler too. Because of course there's overlap in all these things.

And I still need to take a closer look at the css (transpiler?) tools and linters, but first I'm moving my site to Tailwindcss so… more on that next. It's basically a big postCSS plugin so all the other bundlers and builders can work well with it.

I love OSS, but this is why I love dotnet... The MS option has the weight of MS behind it and it might take a hot second longer to do the latest thing, but at least you don't have to fight with a whole new build process every time you turn around. Speaking of that, create-react-app is an excellent example. Top google answer for how to get started with React. Top AI answer too. FINALLY it's been updated so that it tells you that this isn't the way things are done anymore, and hasn't been for quite a while. The entire reason it existed in the first place is because it's PAINFUL to get through this jungle of options just to get started. I plan to update this with the inevitable new things that will be the new front-end hotness.

I switched from front-end markdown rendering with markdown-it to markdig and the typography plugin for tailwind.

Install the npm package, update tailwind.config.js to add it.

    plugins: [
        require('@tailwindcss/typography'),

Then I used markdig to convert it.

            MarkdownPipeline pipeline = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build();
            posts.ForEach(post => {post.Body = Markdown.ToHtml(post.Body, pipeline); });

The advanced extensions covered everything I needed for bold strikethrough and the like. I'm still using stacks-editor for writing but I don't think I'll keep it for too long. The preview is great, but I'm not sure I like the way it has to be styled and couples the css. I do like the image upload too but we'll see. Here's a bunch of what it looks like:

asdf

asdf

asdf

bold

ital

striike

sdf is inline code

link

This 
is
a
code block

1. numlist
2. two
3. three

• ul:
• two
• three-

your text

Not too much to say here, I moved from a docker Home Assistant to HAOS. Mostly because of the things you just can't do with HA on a container (add-ons). So if I don't want to run another container for Mosquitto to use MQTT so my ratgdo can talk to Home Assistant and would rather just have it as a HA Add-on. Well now I can.

1. Create a VM (I just used the GUI tool for KVM/QEMU

2. Set the disk to the latest qcow2 disk image from found here.

3. Make sure to set the bios to UEFI

4. Onboard HA as usual (or restore the backup from the docker version I made)

I ran this in bridged mode just so I didn't have to worry about port forwarding, so here's a bunch on that, and some for KVM/qemu. It sure has been a while since I dug much into Linux back in my gentoo days. Had to brush up on some systemd, but happy to avoid iptables port forwarding which I haven't touched since FreeBSD. There sure is a lot of ways to do network config now.

https://fabianlee.org/2022/09/20/kvm-creating-a-bridged-network-with-netplan-on-ubuntu-22-04/
https://netplan.readthedocs.io/en/latest/netplan-yaml/
https://ubuntu.com/server/docs/configuring-networks
https://docs.oracle.com/en/learn/ol-nmcli-bond/#objectives
https://drewdevault.com/2018/09/10/Getting-started-with-qemu.html
https://github.com/zjagust/kvm-qemu-install-script
https://zacks.eu/kvm-qemu-installation-configuration/#default-net
https://ubuntu.com/blog/kvm-hyphervisor
https://blog.mzfr.me/posts/2019-11-16-interface-names/
https://askubuntu.com/questions/704361/why-is-my-network-interface-named-enp0s25-instead-of-eth0
https://people.ubuntu.com/~slyon/netplan-docs/examples/

I tried to run on an old pi, and while it works fine it's just overloaded with 3 apps and Home Assistant. Caveat is that it does need to be built for arm64.

dotnet publish --os linux --arch arm64 -c Release /t:PublishContainer /p:PublishProfile=./slipsec.dev/Properties/PublishProfiles/ghcr.io.pubxml .\slipsec.dev\slipsec.dev.csproj