[ { "title": "Using Val Town and Gemini for Sports Ball Stuff", "date":"Mon May 04 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1777917600, "url":"https://www.raymondcamden.com/2026/05/04/using-val-town-and-gemini-for-sports-ball-stuff", "content":"This is trivial as heck as the kids say, but I really want to explore Val Town more this year and I thought of a great, and simple use for it. Both my wife and I are big Saints fans (this is their year, honest) and attend most of the games. If they're not playing at home, we're absolutely watching it on TV. We both really enjoy watching football, but honestly, not enough to watch ESPN and follow the news.\nI thought - why not simply get a summary of NFL news from the past week and build an automation of it? I had this running in less than ten minutes with Val Town.\nFirst, the code makes use of Google's Node SDK for working with Gemini. I setup my environment variable first and then used this code:\n\nThe prompt is pretty specific and grew as I tested. The final paragraph in particular was necessary as I kept getting "chat" like responses which wouldn't make sense for an email report. I also had to ask specifically for titles for the summaries which makes it easier to skip over things I don't care about. Lastly, I considered adding a note about focusing on the Saints, but I really wanted something more generic, especially as we tend to hear a lot of Saints news via local updates and such.\nAnd the last bit just sends an email to me, from Val Town, as I don't need a custom FROM/TO here, this works just fine.\nThe last, last bit was the CRON schedule which I set as the trigger and for 9AM on Mondays. Doing a quick run produces this:\n\n\n\nI've embedded the Val below - let me know if you fork it!\n\nPhoto by Dave Adamson on Unsplash\n", "tags":[ "serverless", "generative ai" ], "categories":[ "javascript" ] }, { "title": "Animated video backgrounds via a Web Component and ColorThief", "date":"Thu Apr 30 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1777572000, "url":"https://www.raymondcamden.com/2026/04/30/animated-video-backgrounds-via-a-web-component-and-colorthief", "content":"Earlier this year, the epic ColorThief library had a pretty significant update. I blogged about a simple demo I built with it but I was fascinated by one particular demo on their site.\nThe "observe" function in ColorThief lets you monitor a video source and grab the colors at a particular frame. Their demo uses this to create a lovely shadow background of the video. I believe some TVs have this feature as well, and honestly I'd worry that would get annoying, but the ColorThief demo was pretty cool, so I thought I'd try to build it with a web component.\nThe idea would be - take any basic video element and wrap it like so:\n\nThe web component would then handle:\n\nLoading the ColorThief library\nWaiting for the video to be played\nRunning the observe method and updating the CSS\n\nAll in all, this wasn't too difficult. I don't think my shadow is as good as the demo (and I'm totally open to people submitting a PR!), but it came out ok.\nI'll link to the demo below, but here's a simple example in a CodePen:\n\n See the Pen \n <video-bgshadow> by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nAlright, so here's the code:\n\nI don't think there's anything necessarily interesting in here, although I struggled quite a bit with loadCF. I didn't want to add the ColorThief library N times to the page. Checking for window.ColorThief only works if for some reason a video wrapped with the component is added to the page after the library loads. I used Claude to help me with this bit and while it "litters" the window object with a value, I think that is a fair trade off to ensure only one library is loaded. (Technically this could be further updated to first see if ColorThief exists in general as it's possible the website uses it for something else.)\nYou can see a demo with a couple of examples here: https://cfjedimaster.github.io/webdemos/video-bgshadow/\nAnd if you think this is a good start but could be so much better, I agree, help me out over at the repo: https://github.com/cfjedimaster/webdemos/tree/master/video-bgshadow\nPhoto by Matthew Ansley on Unsplash\n", "tags":[ "javascript" ], "categories":[ "development" ] }, { "title": "Links For You (4/26/26)", "date":"Sun Apr 26 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1777226400, "url":"https://www.raymondcamden.com/2026/04/26/links-for-you-42626", "content":"I was supposed to post this last week (I try to keep to a schedule of every two weeks), but I didn't get around to it because... nope, that's it. That's the reason. Because. And that's good enough, amiright!?!? The heat is slowly cranking up here in Louisiana and I'm dreading the full on summer, but things do slow down a bit when the kids aren't in school and that's something I greatly appreciate. Before getting into this weeks links, I was reminded a few weeks back that my wife actually reads my posts so... hi baby, I love you.\nSuper useful web components FTW - <form-saver>\nFirst up is a really simple and really useful web component, form-saver. You can wrap any form with the component and instantly get client-side storage of form contents until the form is submitted. This works for all types of form fields except file fields of course. (I assume folks know this but you can't use JavaScript to set the value of a file field for security reasons.)\nHere's a simple usage example from the docs:\n\nIsn't that sweet? Thanks go to Aaron Gustafson.\nAs a reminder (and I usually try to avoid linking to my own stuff in these posts, but it's definitely related), if you like this you may like my table-sorter web component as well.\nShare the Python Love\nNext up is a superb guide at packing Python code for distribution. I've written a lot of Python code, but have only created a distribution once or twice, and this guide literally walks you from the first line of code to publication.\nThanks to Stephen Funk for writing this up!\nThe Last Quiet Thing\nFinally, this essay, "The Last Quiet Thing", is a thought provoking deep look at how much of our lives are being stolen from devices that constantly, endlessly need our attention. Not only is it incredibly well written, it's also really well designed as well.\nThis was written by Terry Godier and thanks go to Salma Alam-Naylor for sharing it on her newsletter.\nJust For Fun\nI love building silly things on the web (see yesterday's post as an example), and this little toy from Wes Bos is just that. Tab Snitch does one thing - set a custom title for the web page - but does so with silly and quite embarrassing titles. Although I have to be honest - a few of the fake titles listed there are one's I've probably legitimately had on my screen at some point in time. You can guess which.\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Another Game: My Little Mortal Combat", "date":"Sat Apr 25 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1777140000, "url":"https://www.raymondcamden.com/2026/04/25/another-game-my-little-mortal-combat", "content":"Hello awesome readers! I'm happy to announce my latest web game, My Little Mortal Combat, a mashup of two epic franchises, My Little Pony and Mortal Kombat. This began as an idea, just the name, that I recorded in Microsoft To Do in September of 2019. Yes, almost seven years ago. It sat there, at the bottom of my 'idea' list, until about a month ago when in the shower (not joking), it popped up in my head along with the basic mechanics of how the game would play.\nRight now the game is just missing one feature (I'd rather not talk about until I figure out how I'm going to do it) but definitely needs some balancing work. I enjoy playing games without knowing the details of how things work, so if's that you too, head over to the game now and good luck!\nhttps://cfjedimaster.github.io/webdemos/my_little_mortal_combat/\nHow I Built It\nAs a web app, I kept it pretty simple. Just HTML, CSS, JavaScript, and Alpine.js. I used AI (Cursor's IDE specifically) to create the UI for the three phases of the game - into, main display, and combat. I also used AI to generate some of the strings used in the game. Opponents have random "evil"-ish titles and I wrote some and then asked AI to generate some more. Some examples:\n\nLife Eater\nHoof Smasher\nthe Blood Soaked\nthe Blood Drinker\n\nOpponents also have random annoying facts. Again, I wrote some, had AI generate some more.\n\ndoesn't return library books on time.\nlikes to ruin the end of movies.\nhas been known to sneeze at the buffet.\nsteals candy from babies and then throws the candy in the trash—in front of them!\nonly speaks in passive-aggressive voice.\nwill point out your least favorite body parts.\n\nThe actual names of the opponents come directly from a My Little Pony API I found that was open source.\nHere's an example of a randomly generated opponent:\n\n\n\nCombat is basic "Rock Paper Scissors" style where you have 3 choices (Attack, Defend, Vogue) and the result is based on what your opponent does.\nYour character, and the opponents, have numerical value for Attack, Defend, and Vogue. When you win a round in a fight, the damage you do is based on that skill. Your total HP is based on level.\nAs you can play, if you win or lose, you get gold and XP. Obviously you get a lot more when you win. You can use the gold to train skills. Your XP turns into your level which improves your HP.\nAs I said, I definitely think the numbers need tweaking probably, so let me know. You can check out all the code here: https://github.com/cfjedimaster/webdemos/tree/master/my_little_mortal_combat\nDon't forget, I've got this game and my others listed over on my my Stuff page. Enjoy!\nPhoto by Felis Amafeles on Unsplash\n", "tags":[ "javascript" ], "categories":[ "development", "games" ] }, { "title": "Building a Simple Markdown PWA App", "date":"Mon Apr 20 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1776708000, "url":"https://www.raymondcamden.com/2026/04/20/building-a-simple-markdown-pwa-app", "content":"While I didn't share it on the blog, last week I tasked Claude with using Electron to build a Markdown viewer app. It was part test (how well can Claude work with Electron) and part real need - I work with Markdown files all the time but didn't have a simple "view focused" application for it. I was sure there open source or paid app options out there, but I wanted my own. Claude did a pretty good job (you can see the source here) but one thing stood out to me - the size of the bundled app.\nI created both a Mac and Windows distribution and both were around 90 megs. That's not huge of course, but still felt like a lot for what could - in theory - just be a web app. But there was one crucial feature I wasn't sure I could replicate - double clicking on a MD file to have it open my app. Turns out - you certainly can do it that.\nIf you don't care how I built it, you can go to the app right now and install it: https://mdviewerpwa.netlify.app/\nAlright, let's break it down.\nThe UI\nWhen I had Claude design the application for me, it went with an incredibly simple UI. I felt no reason to add to that so when I began the web app, I copied over the generated HTML/CSS from the Electron app into my new folder. Here's an example of how it looks with no file selected:\n\n\n\nAnd here's how it looks after a Markdown file is opened:\n\n\n\nNow let's look at the code a bit.\nMarkdown Support\nThis normally would be the boring part. Just drop in marked and be done with it. But so many Markdown files I use have frontmatter I wanted to do something special for it. My fix was incredibly simple. If a file begins with three dashes and has another three dashes, replace them with backticks:\n\nHonestly most of that code is UI crap, but you can see the frontmatter support on top. I think it came out perfect - it stands out and I think most folks will recognize it for what it represents, but in theory I could possibly add a small graphical label or something to the block.\nSo again, there's UI handling code in here that's not that interesting, so let me turn to the real cool part. Yes, Virginia, a PWA can absolutely associate itself with files. I added a manifest.json and basic service worker. For bot of these I relied on Claude and it mostly did a good job, I had to tweak a few things.\nAfter the basics worked, I did some Googling and came across this excellent MDN resource: Associate files with your PWA. Adding file support took two steps.\nFirst, I added the following to my manifest:\n\nThe action step there tells my app what URL to go to when being opened via a file. As my app has one page/view, I just used /.\nThe next step was to look for this in JavaScript. My application does this when starting up:\n\nBasically, if I can use launchQueue, it will consist of a list of files, each of which is a file handle. I've used File objects in JavaScript before, but not file handles, but you can quickly go to a real file object using getFile(). Once you have that, the regular FileReader approach works to get the contents and render it.\nI deployed the app to Netlify, opened it in my browser, and clicked the install icon.\n\n\n\nAfter I confirmed I had the application, I right clicked on a MD file, used open with, navigated to my PWA, and selected it:\n\n\n\nI told it to remember my choice and that was literally it. So now I've got a web-based app I can use locally, heck even offline, to render my Markdown files in a nice reading experience. (Well, nice to me anyway. ;) Oh, and the size is about 400k, of which most is one of the icons. Significantly smaller than the Electron app. (But to be fair, Electron was overkill for what I was doing.)\nOnce again, the link to the site is here, https://mdviewerpwa.netlify.app/, and you can find all the code here: https://github.com/cfjedimaster/webdemos/tree/master/mdviewerpwa\nPhoto by Annie Spratt on Unsplash\n", "tags":[ "javascript" ], "categories":[ "development" ] } ]