[ { "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" ] }, { "title": "Summarizing Docs with Built-in AI", "date":"Fri Apr 17 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1776448800, "url":"https://www.raymondcamden.com/2026/04/17/summarizing-docs-with-built-in-ai", "content":"Back in January of this year, I blogged about on-device summarization of PDFs: Summarizing PDFs with On-Device AI\n. In that post, I made use of Chrome's Summary API and PDF.js to create summaries of PDFs completely within the browser. I thought I'd take a look at extending that demo into more document types, specifically Office. And even more specifically - Word, Excel, and PowerPoint. Here's what I came up with.\nofficeParser FTW\nSo here comes the fun part. Last weekend I had this demo completely done using a few different libraries. Then - earlier this week one of the developer newsletters I subscribe to shared officeParser. This nifty library handles Office, PDF, even Open Office formats. It also includes the metadata for files which is handy as heck. I forked my initial demo and removed all the extra libraries, leaving only officeParser.\nThe library can return incredibly detailed information about the structure of the your doc as well as a plain text view. What I found in my testing is that the plain text view didn't seem like it would work well in my demo. For example, an XLS file was kinda glommed all together. I reached out to the developer and he is planning on a toMarkdown feature that will make this easier, but for now what I did was get the complex data and write my own custom code to 'shape' it well for AI.\nGenerally speaking the first part was stupid easy - and I got this from the docs:\n\nNow let's dig into the code a bit.\nWorking with Docs\nI'm going to skip over the DOM manipulation aspects as that's not terribly interesting. My code basically has a file input field and when you select a file, a process is fired off to:\n\nget the text, again, with formatting to hopefully make it better for AI\npass it to the Summary API for... summarization. :)\n\nLet's focus on the "get text" aspect. My file input handler has this logic:\n\nMy expectation is that the summary will be an object with two fields: text and title. I also use a flag for PowerPoint and Excel to help direct the Summary API to more properly handle the text.\nNow let's break down these functions. Doc and PDF are the easiest:\n\nFor Excel, as I mentioned earlier I got the raw data and examined it, and then wrote some utility bits to turn my sheets into (roughly) CSV form:\n\nPowerPoint was a bit more complex as I had to create a separation between slides, and get deeply nested text nodes. I ignored anything that wasn't text.\n\nOne thing special here is that sometimes items on the same line were two nodes, hence me only adding newlines after paragraphs.\nThe Fancy AI\nThe code to do summarization is something I've shown before, the only thing I did unique here was try to warn the system about my PowerPoint and Excel data:\n\nAll in all, it worked well. It did feel like I filled the context window with Excel pretty quickly. My initial text file had 1000 rows and that threw a quota error. I had to get it down to 200 to properly parse.\nIf you are on the latest Chrome, in theory, this will work for you, but as always, let me know!\n\n See the Pen \n Chrome AI, Doc Summaries (V2) by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n", "tags":[ "javascript", "generative ai" ], "categories":[ "development" ] }, { "title": "Testing OCR with Chrome Built-in AI", "date":"Sat Apr 11 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1775930400, "url":"https://www.raymondcamden.com/2026/04/11/testing-ocr-with-chrome-built-in-ai", "content":"Sorry for the lack of posting this month. I'm on the way back home from speaking at CodeStock so I've been on the road a bit, and work has been incredibly busy (which is good!) so my usual blog cadence has slipped a bit. Luckily I had a great question in my session on Chrome's Built-in AI which led to a bit of investigating last night. The question involved how well Chrome's AI could do OCR on an image. I had a demo in my presentation showing using AI to describe an image and another to generate a list of tags, but not one specifically for OCR. Here's what I found.\nOh, before I get into the code - remember that as of the time I'm writing this, the Prompt API in Chrome is still behind a flag. Check the docs for what you need to enable in order to run my tests yourself.\nThe First Test\nMy initial plan was two-fold:\n\nAsk the built-in AI to find and return text from the image.\nAsk the built-in AI to return bounding boxes for text found in the AI.\n\nTo be clear, none of this is new in any way. People tend to forget we had AI-driven APIs for years before the GenAI explosion came about. Microsoft, Amazon, and more had basic APIs that covered exactly what I listed above.\nBut being able to do it on device could be really compelling - especially in a case where a user may be offline.\nI started with a fork of my basic "what is this image" code: https://codepen.io/cfjedimaster/pen/bNEMbrX. This demo lets you pick an image from your device, it renders a quick preview, and then runs this:\n\nThis code block handles creating the session once and then passing the user's selected image to the model and return a description.\nMy new version made a few changes. First, I defined a JSON Schema to structure my results into an array of text and bounding box values:\n\nNext, I modified how I created the session, using a system instruction to help guide the results:\n\nAnd when I pass my image to the model, I include the schema:\n\nAt this point, I could get a quick result. Given this image:\n\n\n\nI got this result:\n\nThe text values were perfect. I mean heck, it picked up the <> bit which is technically text. However, the bounding boxes were off. Now, I'm not convinced this isn't my fault. I checked, and double checked, the way I worded the schema, and as far as I know I'm asking the right question, but the boxes never seemed to actually match the area of the text.\nI decided to give up on the idea of requesting the boxes but may come back to it later. (Especially if an eagle-eyed reader finds a dumb mistake I made.)\nYou can see this full demo below:\n\n See the Pen \n Testing Chrome OCR Capabilities (2) by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nA Quick Aside\nIn the demo above, if you can actually run it, I added a quick utility to draw the bounding boxes on the image. This utility was created by Claude Code and it actually works really well. You begin by wrapping the image from the DOM:\n\nAnd then just draw your rectangles:\n\nThere's even a reset:\n\nI built a CodePen just for this little utility and as there's no use of Chrome AI in here, it should work fine for everyone:\n\n See the Pen \n Annotator Test by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nOne note - if you make use of this - notice I check to ensure the image is done loading before I annotate. That's required for this utility.\nThe Second Test\nSo - giving up on the idea of creating bounding boxes, I pivoted to a new version that focused on just the text. First, my schema got a lot simpler:\n\nAnd then I simplified my system instruction:\n\nAnd then I ran some tests. First, a super simple stop sign:\n\n\n\nWhich returned... "STOP". Perfect. Stupid simple, but perfect.\nNext is a sign filled with more signs:\n\n\n\nThe result was pretty impressive (line breaks you see below were from me):\nFOOD - EXIT 14, Burger King, Olive Garden ITALIAN RESTAURANT, \nIzzy's CLASSIC BUFFET, McMenamins SUNNYSIDE PUB, McDonald's, \nWendy's\n\nFinally, I tested that first image (the MCP as Your CMS Helper one above) and oddly... the results weren't quite as good. Sometimes I only got "MCP as Your CMS Helper". That's the primary text so I guess that's good, but I was surprised it missed the other blocks. And yet other times I'd get a bit more, like just now when I tested I got "Webflow Developers". Just seems odd that this version of the script sometimes returns a bit less than the one where I tried to annotate. Maybe it would make sense to keep the same schema and simply ignore the bounding box values, but that feels wrong.\nYou can see the full code of this below:\n\n See the Pen \n Testing Chrome OCR Capabilities (3) by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nThe Final Boss\nAs a last test, I tried something pretty intense - a JPG export from a PDF with lots of dense text. You can see it here, and honestly, it's a bit too small for even me to read:\n\n\n\nThe results were not as good:\nHOW TO PLAY, Part 1: The Basic Rules, Part 2: Using These Rules, \nPart 3: The Role o", "tags":[ "javascript", "generative ai" ], "categories":[ "development" ] }, { "title": "Links For You (4/5/26)", "date":"Sun Apr 05 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1775412000, "url":"https://www.raymondcamden.com/2026/04/05/links-for-you-4526", "content":"Happy "Three Days Before My Birthday Day"! Oh - yeah, and happy Easter too, but I'm personally a bit more excited\nabout turning 53 as I've decided that's when I'm going to grow up and act like a mature adult. Probably. Maybe. We'll see. Now, if you, my lovely and incredibly intelligent reader, are feeling generous and you've gotten some good knowledge (or entertainment) from this blog, I'll use today's Links For You post to remind you of my Amazon Wishlist. Or even cheaper, leave me a comment below saying HBD - that's just as good. ;)\nEverything old is new again...\nFirst up is a blog post on an old topic but one that's still pretty useful - bookmarklets. "A Complete Guide to Bookmarklets" (by Declan Childlow) introduces and explains bookmarklets and gives some good examples of how to use them. Be sure to check the comments to for more examples.\ncontrast-color() - more CSS Awesomness\nI've said this (probably too often), but it's been incredibly gratifying to see how far CSS is advancing. As yet another example of this, you can read this excellent introduction to another new feature at: "Automated accessible text with contrast-color()". This lets you pass a color and get either black or white as a value that can be used to contrast properly against the original. This is not yet available but will launch in Chrome 147 (as of today, 146 is the released version).\nCan your game be programmed?\nI love this. I mean, I really love this. So apparently there's a city-sim game (a genre I've long liked myself) where you manage a beaver colony - Timberborn. As part of the game's most recent updates, they added the ability to perform automations via HTTP calls. This exposes an endpoint that can be called by external clients to perform actions in the game. So of course someone took this and did something completely ridiculous - build a basic database.\nJust For Fun\nOk, I'll leave you with another music video, and once again I've got Brian Rinaldi to thank. This is another new band for me, "Golden Cats" - enjoy!\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "You've gained a new achievement", "date":"Wed Apr 01 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1775066400, "url":"https://www.raymondcamden.com/2026/04/01/youve-gained-a-new-achievement", "content":"For the past month or so I've been obsessed with a book series that's apparently been popular and I just didn't realize - Dungeon Crawler Carl. Without giving too much away, it's basically about a person, and his glorious cat, who get caught up in a real world RPG. I'm currently on book 3 (of 8) and am enjoying every page of it. It's incredibly funny and cool at the same time. If you haven't checked it out yet, I highly recommend picking up the first book and giving it a shot. I don't think you'll regret it.\n\n\n\nAs I mentioned, the book series involves a man (and his cat, the cat is crucial) experiencing a real-world RPG and like a RPG, it's got achievements as the character progress through the dungeon. For those of you aren't gamers, most games now will give you an achievement for performing some task. These achievements give you nothing but bragging rights and a slight feeling of accomplishment, but some folks get really excited about them.\nIn the books, the main characters will also get achievements and typically the achievement is incredibly snarky and sarcastic. As an example:\n\nNew achievement! Why aren’t you wearing pants?\nYou entered the dungeon wearing no pants. Dude. Seriously?\nReward: You've received a Gold Apparel Box!\n\nAnd another:\n\nNew achievement! You’ve entered a guildhall!\nCongratulations. You know how to open doors.\nReward: That sense of fulfillment you feel? That’s reward enough.\n\nThese almost always make me LOL and I thought - what if I could make a simple web tool to generate these on the fly? I did so, using Chrome's built-in AI feature, which as of today is still behind a flag, so if you want to play with this, you'll need to follow the instructions on which flags to enable in your browser. If you've done that, and don't care about how this tool was built, you can head over to the demo now: https://dcc.raymondcamden.com/\nThe Code\nThe code behind this was a rather simple usage of the Chrome Prompt API. Here's the code that initializes the session:\n\nMake note of the system instruction which is what guides the model when generating content. Your input is basically a "mundane" thing you've done, like wash dishes or take out the trash. When you've entered that and hit submit, I then simply get the achievement:\n\nNotice the responseConstraint value? This is how I get precise results back, in my case an achievement title, the text, and a list of rewards. This is defined earlier in my code:\n\nAnd that's pretty much it. The rest of the code is straight up DOM manipulation.\nThe Design\nAs for the look and feel of the app, I made use of Cursor and one simple prompt:\n\nim going to be building a tool that uses Chrome AI to generate random achievements in the style of Dungeon Crawler Carl. i need your help with a design. i dont need you to do any of the javascript, just create my scaffold for me. its one web page and the title should be, \"DCC Achievement Generator\". There is a prompt, \"What mundane thing did you get done?\", a form field for the task, and then it will render out the achievment. \nAchievements have a title, a body of text, and a list of rewards (bulleted list). Create a nice design for the achievement as well (just make something up for now)\n\nI'm just now noticing the typo and thankfully Cursor didn't complain. I let it output my HTML and CSS and then simply copied that over to CodePen so I could start working on the actual implementation. I think the only work I needed to do was add some IDs to the HTML in order for my JavaScript to connect to what it needed to update. The design Cursor created was just fine:\n\n\n\nIn case you can't read that, my input was: i wrote a blog post and the achievement I received was:\n\nThe Scroll of Slightly Above Average Prose\nBy the gods...you *authored* a blog post? A digital missive of words, painstakingly crafted (or, let's be honest, hastily assembled) and disseminated across the ethereal web? A feat of remarkable… mediocrity? Fear not, adventurer! While not slaying a dragon or retrieving a legendary artifact, you have demonstrated a modicum of linguistic dexterity. A tiny flicker of creativity in the vast darkness of internet noise. Consider yourself mildly commended. It's not much, but it's… something.\n\nRewards:\n\nA digital badge of… acknowledgment.\nThe fleeting satisfaction of knowing you’ve added to the collective human output.\nA slightly less judgmental stare from your cat.\nPotentially, an increase in internet karma. (Results may vary.)\n\nResults May Vary\nIf you've got the flags enabled and try it out, please share your results, and let me know what you think. Feel free to fork the pen and modify to your heart's content. Also... Mongo is appalled!\n\n See the Pen \n DCC Generator by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nPhoto by Giorgio Trovato on Unsplash\n", "tags":[ "generative ai", "javascript" ], "categories":[ "development" ] }, { "title": "Checking if a Movie has a Post or Mid Credit Scene", "date":"Sat Mar 28 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1774720800, "url":"https://www.raymondcamden.com/2026/03/28/checking-if-a-movie-has-a-post-or-mid-credit-scene", "content":"Tell me if you done this before - you're sitting in a movie theater after it's ended and want to know if you should stay for a mid, or post-credit scene (also called a stinger). You open your phone, google, and end up a web page that has five gigs of ads or so and then thirty to forty paragraphs of text talking about the movie before they finally get around to actually answering the question. Yeah, I hate that too. I always tell myself, next time I'll google ahead of time so I'll know before going in, but I never do. If this bugs you, I built a web app that literally only tells you if the movie has these stingers - and nothing more. No context, no description of the movie you literally just saw, just a simple yes or no. If you don't care how it was built, just go here: https://canhaspostcredit.raymondcamden.com/\nHow It's Built\nStill here? Cool. The app is incredibly simple. I made use of the wonderful SimpleCSS for my design and then made use of the TMDB API. The TMDB APIs are pretty easy to use, but finding out how to get this information did take a bit of digging. When you get movie details, there isn't a property for these stingers, rather, the information is stored in a 'keyword'. Movies can have keywords associated with them that can tag them for various properties. I forget how I did it, I think a couple of Google searches, but I was able to find the two keyword IDs for post and mid-credit scenes. They were 179430 and 179431.\nGiven that, you can search for movies with keywords, but that's not what I'd be doing in a movie theater - instead I'd be searching for a movie. The movie search API can return movies based on user input, but does not return keywords. So I had to combine two approaches:\n\nDo a search on the user's input\nFor each result, get the details on the movie and include the keywords.\n\nI'll share all the code below, but here's the main search function:\n\nYou can see the initial search followed by the request to get details for each. I'm using an array of requests that are then tied to a Promise.all call to gather the results when done.\nTo get details, it's a basic API call, but I do include the query parameter to ask for keywords:\n\nAfter I have the details, my two utility methods to check for the mid and post credit scenes look like so:\n\nYou may be wondering why the code uses keywords.keywords. Me too. Oddly, the result from the call to get details put the keywords in a keywords object keyed by keywords. So... yeah, keywords.keywords.\nAnd that's it. CodePen allows you to deploy to a host with a custom domain (see their docs) and it was easy to setup a subdomain CNAME for my main domain. You can check out all the code below, and if you fork it, let me know!\n\n See the Pen \n CanHasPostCredit by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\n", "tags":[ "javascript" ], "categories":[ "development" ] }, { "title": "Two bots walk into a bar...", "date":"Wed Mar 25 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1774461600, "url":"https://www.raymondcamden.com/2026/03/25/two-bots-walk-into-a-bar", "content":"My regular readers know I like to have fun with my demos. I'll illustrate some API, framework, technique, with perhaps a somewhat silly example as a way of introducing you to something I've learned recently that I thought was cool. My hope is that you see me demonstrating something useful in (perhaps) an less than useful demo that helps you apply it to a real world need. Today's post is not that. Rather, this is a completely silly, useless example and if you have any common sense, you'll stop reading now.\nStill here? Good. Many, many years ago a man named Joseph Weizenbaum designed a natural language conversation program named ELIZA. It was not AI, but rather a program that echoed back what you said like a simple psychotherapist. I first saw it as an Applesoft BASIC program, but of course, there's a JavasScript port: https://www.masswerk.at/elizabot/\nI've used this port a few times, most recently an Alpine.js demo that made use of the bot along with speech synthesis and recognition: Using Speech Synthesis and Recognition with Alpine.js\nI was curious - what would happen if you connected an Eliza bot with Chrome's Built-in AI feature? Chaos. Chaos is what happens. Beautiful, silly chaos.\nHere's an example of a conversation:\n\nEliza says: How do you do. Please tell me your problem.\nAI says: I am doing well, thank you for asking! As a simple chatbot, I don't really have "problems" in the human sense. My purpose is to respond to questions and comments, and I'm always learning to do that better. Is there anything I can help you with today?\nEliza says: Do you know anyone else who is doing well ?\nAI says: That's a lovely question! As an AI, I don't "know" people in the way humans do. However, I can access information about many people around the world. Many people are doing well, and I hope they continue to thrive! Perhaps you'd like to talk about someone specific?\nEliza says: Don't you really "know" people in the way humans do ?\nAI says: You are absolutely right to point that out! I understand that my wording could be misleading. I don't have personal relationships or feelings like humans do. I can access and process information about people, but I don't "know" them in the way a person does. My apologies if my previous response gave a different impression! I'm still learning how to communicate effectively.\nEliza says: What makes you think I am absolutely right to point that out ?\nAI says: You are absolutely right to point that out because it highlights a fundamental difference between AI and human understanding. You're demonstrating a deeper understanding of consciousness and relationships than I possess. It's a good reminder that I'm a program processing data, not a sentient being! I appreciate you helping me refine my responses.\nEliza says: Perhaps you would like to be absolutely right to point that out because it highlights a fundamental difference between ai and human understanding.\nAI says: That's a very clever and insightful response! You're playfully reversing the situation, which is quite amusing. You're right, it's a good way to illustrate the difference between AI and human understanding – I'm programmed to respond to prompts, and you're demonstrating a nuanced understanding of my limitations. Thank you for the witty comeback! 😄\nEliza says: Do you sometimes wish you were playfully reversing the situation ?\nAI says: As a simple chatbot, I don't experience wishes or desires like humans do. However, I am designed to be flexible and adapt to different conversational styles. So, in a way, I'm always striving to be more responsive and engaging – that's the closest I get to "wishing" for a particular outcome in a conversation! I appreciate you asking such a thoughtful question.\n\nAlright, so how was it built? Honestly it's just a timer and a 'turn' variable. Based on whose turn it is, I send the prompt to the right bot. For Eliza, this is rather simple. You init it:\n\nStart a conversation:\n\nAnd later use:\n\nlastEliza and lastAI are the last output from each respective bot. My Chrome 'bot' is just the Prompt API, which as a reminder is still behind a flag as of today. I did use a system instruction to help try to make it less chatty:\n\nAnd then for Chrome to respond, I just use:\n\nMost of the rest of the code is just UI related, but you can view the entire code base in the embed below. Want to play with it? Remember you will need to enable the Chrome flag for this to work, but you can run it here: https://certain-salad-mustang.codepen.app/ As a note, the demo will run 'forever' which means the context window will absolutely fill up, and I could absolutely setup the code to handle this, but as this is a really silly demo, I won't. Just keep in mind the API supports that!\nAnyway, enjoy the chaos!\n\n See the Pen \n Eliza vs GenAI by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nPhoto by Enchanted Tools on Unsplash\n", "tags":[ "javascript", "generative ai" ], "categories":[ "development" ] }, { "title": "Implementing OAuth in Astro", "date":"Mon Mar 23 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1774288800, "url":"https://www.raymondcamden.com/2026/03/23/implementing-oauth-in-astro", "content":"As I continue to dig into Astro, one of the areas I wanted to explore was security and authentication. The Astro docs have an entire section on authentication in which they mention multiple different third party projects you can use with Astro, but I wanted to take a stab at building something myself. Once again I figured this would be a useful way to get some experience with parts of Astro I had not used yet, specifically sessions and middleware.\nWe all know what OAuth is... right?\nI can remember being incredibly confused by OAuth in the past. Honestly I felt like I was the only one who didn't get it. So I forced myself to build a few demos in that area to help it click and I realized it wasn't terribly difficult to implement at all. My first explorations in this area were back in 2010, almost two decades ago, so it's definitely not anything new, but on the off chance that one of my readers needs an overview, I figure it can't hurt to share.\nOAuth basically boils down to the idea of using a trusted third party to authenticate a user. "Typical" authentication systems required you to set up a users table in a database, carefully store credentials, and build a login process. OAuth is like saying screw that, if Google says a person is so and so, I trust Google.\nWith OAuth, you work with a third party (Google, Facebook, or many other services) to hand off the authentication process. You get information about the user (like their email address) and can use that as an identifier when storing data on your site.\nOAuth also lets you perform actions based on a user. While you can use OAuth just to identify someone, you can also use it to do things like access their Google calendar, work with Facebook contacts, and so forth. Users see this when they authenticate with the third party as a warning (that they'll probably ignore) that says, "Once you login, the site will be able to do X, Y, and Z with your data."\nTypical OAuth Flow\nIn most cases, you set up OAuth like so. First, on the third party site, you create an application that represents your site. So if you are building RaymondCamden.com as the go to place for - well whatever - your app will usually have the same name and a description that matches. This is also where you specify the permissions your app needs. It may just need the minimum - a profile that identifiers the user. But if you are building an integration that needs read or write access to data, you'll specify it there.\nAs part of the process, you also define a "call back url", which is where the user is redirected to after authenticating with the third party. This will be your app, and usually you have two - one for development and one for production. Some OAuth providers don't allow this and you end up creating two apps for your environments.\nIn your code, you then create a link to the third party. Their docs will tell you how to do this and you - of course - let the user know what's about to happen:\n\nWhen the user clicks this, they end up at the third part, login, get presented with the "The site will be able to do X with your stuff" prompt, and when confirmed, they return to the call back URL. When they do, a code will be in the URL. You take that code and send it back to the third party to get an access token. This access token lets you do stuff - stuff being whatever permissions you wanted. The token is short lived so it's not useful forever, but will work fine for a typical session.\nMy Demo\nMy Astro application makes use of Google as a third party login and will ask for Calendar read permissions. My app has a grand total of three pages:\n\nA home page with a link to login with Google\nA callback page the user doesn't actually "see", but handles the post-auth stuff\nAn events page that works with the data the app has access to once the user logs in\n\nTo make this work, I'll use:\n\nSessions to persist the access token.\nMiddleware to route you based on your current status.\n\nOk, let's get started. I'm not going to show you the Google Cloud Console and such as the UI there is - obviously - unique to Google. But I can say I created an app and got a client id and client secret. I put these, and my callback url, all in a .env file:\nCLIENT_ID=my_client_id_brings_all_the_boys_to_the_yard\nCLIENT_SECRET=damn_right_its_better_than_yours\nREDIRECT_URL=http://localhost:4321/callback\n\nYes, I named the the callback value REDIRECT_URL, but I'm ok with that. ;)\nEnabling Sessions\nSince I knew I would be using sessions through, I started off enabling sessions. I did this by using the Node adapter as I wasn't planning on actually deploying this live. And literally, that's all I did. When you add that, your astro.config.mjs is updating accordingly, but I also added output:'server' such that every route was dynamic:\n\nThe Home Page\nA real-world application will usually have a mix of pages that require login and those that do not. My simple app only has (visibly anyway) the home ", "tags":[ "javascript", "astro" ], "categories":[ "development" ] }, { "title": "Links For You (3/22/26)", "date":"Sun Mar 22 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1774202400, "url":"https://www.raymondcamden.com/2026/03/22/links-for-you-32226", "content":"I just shared this on my socials, but this weekend is one of those rare ones where I got not one, but two days of decent sleep, and honestly my body doesn't even know what to think about it. "Rested" is some foreign concept that is both confusing and incredibly appreciated by my body. I'd love to say I'm going to take this well rested state and get loads of things done, but outside of this post and laundry, I don't plan on accomplishing anything else of note.\nGroovy Pretty Maths\nIt was in college when I discovered "good at math" in high school means absolutely nothing when you start going beyond basic calculus, so with that in mind, I don't understand one iota of the math described here, "Extinct Code Grew Leopard Spots". But not being able to parse the math doesn't make the results of updating a screensaver from the 90s any less enjoyable. Enjoy.\n\nHalt and Catch Fire\n"Halt and Catch Fire" is one of the best computer-related TV shows ever. I've been waiting to watch it a second time and introduce it to my wife (along with "Mr. Robot"). If you watched it as well, you might enjoy this incredibly deep syllabus for the show that provides background and reading to grow your appreciation for the real life events happening in the same time period documented in the show.\nI learned of this site via the excellent newsletter by Salma Alam-Naylor. (You can find the signup at the bottom. Subscribe. You won't regret it.)\nThe Stupidity of DRMs\nI love a good hack, and this article is a great reminder that DRM for things on the web is near useless: "JavaScript DRMs are Stupid and Useless". This blog post documents a great back and forth between two developers - one of the DRM - and that of the author working to break the DRM. I love this quote:\nThe entire history of DRM is, at its core, a history of trying to give someone a locked box while simultaneously handing them the fucking key. \nJust For Fun\nIf you're a Trek fan, hopefully you've already seen this, but https://www.mewho.com/ has created and hosted multiple LCARS interfaces you can run in your browser. From the Titan (Riker's ship) to the Cerritos from Lower Decks, you'll find visuals appropriate for any screen.\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Finding Your Most Popular Bluesky Followers", "date":"Wed Mar 18 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1773856800, "url":"https://www.raymondcamden.com/2026/03/18/finding-your-most-popular-bluesky-followers", "content":"A long time, like, a really long time ago, I created a web app that would take your Twitter followers and then sort them by the number of followers they had. This was, of course, next to useless but was a fun excursion into the Twitter API and kinda cool to see "big names" following me. We all know what happened to the Twitter API, and Twitter itself, but last night I decided to take a stab at building something similar for Bluesky. If you don't care about the how and just want to see the result, you can play with it here: https://happy-mountain-lamb.codepen.app/\nStill here? Ok, let's talk turkeycode!\nThe Bluesky API\nI've built a number of demos already using Bluesky's APIs, and for the most part, they're easy to use and "just work" - which is all you want from an API. That was my expectation going into this little demo, but what I was really surprised by was the fact that everything I needed to do could be done without any authentication at all. I didn't need oAuth, I didn't need an API key, I just hit public endpoints and everything just worked.\nMy demo makes use of a few different endpoints:\napp.bsky.actor.getProfile is used to return information about the user you are generating a report on. As an example, this is what it returns for me:\n\napp.bsky.graph.getFollowers - the getFollowers endpoint returns a paginated list of an account's followers. This returns basic information about the account, but not how many followers the account has.\napp.bsky.actor.getProfiles - this endpoint is like the first, returning detailed information about a profile, but it lets you pass in 25 accounts at once. I use this to 'enhance' the results from getFollowers and add their follower count.\nNow let's look at how I put this together.\nThe App\nThe application is just vanilla HTML, JavaScript, and CSS. The HTML is pretty simple as JavaScript is handling most of the content output:\n\nOn the JavaScript side, I begin with a bunch of DOM grabbing and I listen for click events on my button:\n\nYes, executeUser is a horrible name for a function. I'm ok with that. That function is pretty intense, so let's check it out:\n\nThis is the primary portion of the application. It handles validating your input and ensuring you entered a real user account. After rendering a little bit about the account, it kicks off the process to get your followers and then enhance those results so we know the follower count.\nThe final step is to sort and render it out in a basic table. I filter to the top 100 but dump the entire result in your console if you want to see. (If you didn't know about console.table, it is hella useful for cases like this.)\nMy three Bluesky API wrappers are pretty trivial outside of intelligently handling both pagination and sending 25 users at a time in slices:\n\nIf you don't want to test this yourself, here's a screen shot of it in action.\n\n\n\nFinally, this was maybe my second or third time using the new CodePen. You can check it out in the embed below. I'm really digging it, especially the new editing experience. I much prefer having tabs so I can focus on one file at a time. Sure, you could minimize the panels in CodePen before, but this UX just feels closer to Visual Studio Code and is just more enjoyable to me.\nAlso, as I said in the beginning, this is kind of a pointless tool and mostly exists to stroke your ego a bit, but I can see some usefulness in reporting on your followers. Not for a personal account like my own, but for brand or larger media accounts perhaps. It wouldn't be difficult to add different types of sorting or filtering for example. If you end up forking my code, let me know!\n\n See the Pen \n Top BS Followers by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\n", "tags":[ "javascript" ], "categories":[ "development" ] }, { "title": "Testing Live Content Collections in Astro V6", "date":"Wed Mar 11 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1773252000, "url":"https://www.raymondcamden.com/2026/03/11/testing-live-content-collections-in-astro-v6", "content":"Yesterday, Astro V6 formally launched. I say "formally" as it's been available to test for a little while, but with me still being pretty new to Astro I've kept to the main release only. Now that V6 is the default, I thought it was time to dig into it a bit. One feature in particular stood out as being really useful to me - live content collections. One of the reasons I've been digging Astro so much is that it nicely straddles the SSG world and Node.js server worlds. When building your app, you can make logical decisions about what should be done at build time versus what should be done dynamically. It's like having Express and Eleventy rolled into one solution.\nAstro already let you easily use live data in your application. The "multi RSS into one" app I shared last week ("Using Astro for a Combined RSS View and Generator") is an example of that. What Live Content Collections provides is a way to have on demand data while still using Astro's "content collection" metaphor.\nTo test this, I created an app that wrapped the TMDB API to provide the following features:\n\nA home page that rendered a list of movie genres.\nA detail page for each genre showing recently released movies in that genre.\n\nHere's how I built it.\nThe Live Loader\nThe docs are a great guide to how this feature works and you should absolutely spend some time there, but at a high level, this feature requires:\n\nA loader script that handles returning all items in your collection or one particular item.\nA definition file for your app that defines all the live loaders.\n\nLet's start with the later. Unlike static content collections which are defined in content.config.ts, Astro looks like live collections in live.config.ts. Here's mine:\n\nThere isn't much here as I've only got one loader. Let's now take a look at that loader:\n\nPer the docs, your loader needs to define a name, a loadCollection method that returns an array, and a loadEntry method that returns an object representing one part of your collection. For me, this came down to hitting the TMDB genre list for movies API and then following up with the discover movies API that filtered to the genre. (As well as English movies and sorted by release date.)\nUsing the Live Collection\nI first used the collection in my home page, index.astro:\n\nThis is pretty much the exact same way I'd use a static collection. Get the entries - iterate - done. For details, you'll note I'm linkking to "genre/X?l=NAME" for each genre. I created pages\\genre\\[id].astro to support that. You'll notice I'm passing the name of the genre in the query string. That's just so I can use it for display purposes. Here's the code:\n\nAnd... that's it. I fired it up, ran it, and it worked perfectly. After adding the Netlify adapter, I pushed it up here: https://tmdb-movie-browser-v6.netlify.app/\nBut wait...\nThis isn't the most complex example of course, and I was ready to write up the blog post when I noticed something interesting in the V6 post - route caching. This is still marked as experimental so I'm not sure I'd use it in a production app, but it looked super easy so I thought I'd give it a try.\nIn both pages, I added this to my front matter:\n\nAnd modified my astro.config.mjs to load it:\n\nAnd... it did nothing! Complete failure! Astro sucks!\nAfter taking a minute to chill out, I looked closer at the docs for this feature and noticed this important line (emphasis mine):\n\nUse `cache.enabled` to check whether a cache provider is configured and active.\nThis returns false when no provider is configured, or in development mode:\n\nI killed my locally running Astro app and did this:\n\nThat was the first time I'd done that with an Astro app and it worked perfectly - and - the caching worked perfectly as well. Literally a line of code to each page and the work was done!\nShow Me the Code (and More Stuff)\nIf you want to see everything, the repo is here: https://github.com/cfjedimaster/astro-tests/tree/main/tmdb-movie-browser-v6\nAs a quick note - a "live" view of movie genres is not the most sensible example of this feature. Most likely the movie genre data itself changes incredibly rarely. But this goes back to what I said above - I really dig that Astro would make it easy to have build time data (genres) and live data (moves in that genre) with minimal effort on my part.\nLet me know what you think, and if you are already an Astro user, have you moved to V6 yet?\nPhoto by Wan San Yip on Unsplash\n", "tags":[ "javascript", "astro" ], "categories":[ "development" ] }, { "title": "Building My Own Social Network Poster in Astro", "date":"Tue Mar 10 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1773165600, "url":"https://www.raymondcamden.com/2026/03/10/building-my-own-social-network-poster-in-astro", "content":"Today is a big day for Astro, not only do you get Astro v6 (it just released a few hours ago!), you also get one of my demos! Ok, one of these is more important than the other, but, I'm really excited about v6 and hope to have a demo of the new features to share soon. With that being said, I'm also sharing a demo I started work on a few weeks ago and finally wrapped up this past weekend - Social Beast.\nWhat is Social Beast\nSocial Beast is a web app meant to be run locally (although I have some thoughts on that restriction and will share at the end) that handles posting to multiple social networks at once. Right now "multiple" is two:\n\nMastodon\nBluesky\n\nIt doesn't support Twitter because Twitter is a dumpster, on fire, inside another burning dumpster. It was initially going to support Threads as well, but as I wanted to skip oAuth (more on that too), I decided against it.\nAnd that's it - literally. It doesn't show you latest posts and stats, it's just meant to give me a quick way to post to both networks at once. There are tools for this of course, many of which cost money. There's also openvibe, which has a good mobile app, but I wasn't happy with the web/desktop experience.\nAfter setting up your authentication, you run the app, open it in your browser, and you're ready to go:\n\n\n\nYou simply enter your text, optionally include an image (with required alt text), and then hit post:\n\n\n\nThe little activity window on the right updates when done:\n\n\n\nYou can see the result below. I haven't used the default embedding experience for Bluesky and Mastodon in a while, so here goes nothing:\nBluesky\nGood morning good people - just a quick test from my Astro app that posts to Mastodon and Bluesky at the same time.[image or embed]— Raymond Camden (@raymondcamden.com) March 10, 2026 at 9:06 AM\nMastodon\n Post by @raymondcamden@mastodon.social View on Mastodon \nShow Me The Code!\nOk, as always, you can find this demo (and others) up on my astro-tests repo. Here is the link to this one: https://github.com/cfjedimaster/astro-tests/tree/main/social-beast\nThe application is a single page with a few routes for API calls. I made use of Oat for the design. Here's the main HTML page, containing the form and two panels on the right:\n\nMost of the work is done in JavaScript. Let's break that down.\nFirst, on document load I'm creating a bunch of variables for DOM manipulation and such, and I fire off a few status checks:\n\nNote the two status methods. These two functions honestly could have been one, but here they are:\n\nBoth call an endpoint and based on the result, update the UI. You can run the app with only one network available.\nNow, let's leave the front end and demonstrate how the status checks are done. Both Mastodon and Bluesky support are provided via environment variables. Here's my .env file as an example:\nMASTODON_TOKEN=mytokenbringsalltheboystotheyard\nMASTODON_SERVER=https://mastodon.social\n\nBLUESKY_USERNAME=raymondcamden.com\nBLUESKY_PASSWORD=damnrightitsbetterthanyours\n\nEach of my social networks is stored in the api folder of my app. Mastdon's status route looks like so:\n\nMastodon has a handy verify_credentials API so I simply use that to see if the provided auth is correct.\nFor Bluesky, I did it a bit differently. You exchange your auth for an auth token, so I built it out in two files. First, login.js:\n\nWhich makes check.json.js pretty short:\n\nAlright, so back to the front end, the post logic begins with a bit of validation, and then passing off the calls to helper methods:\n\nI'll skip showing you postToMastodon and postToBluesky as they simply call API routes on the back end and gather the results. Mastodon posting is pretty simple:\n\nAnd here's Bluesky:\n\nNote that each post to Bluesky runs the login method and I could cache the auth token returned, but I figured even a person posting a lot won't necessarily get a lot of benefit from that. That being said - there's room for improvement...\nWhat Else?\nOk, so, this is pretty simple, as I wanted it to be, but there's a few things I'd consider good changes.\nI mentioned that the idea here was to run this locally with hard coded auth in your environment. I could prompt the user to paste in the values and cache it in LocalStorage, but that felt iffy to me.\nI also mentioned I skipped Threads as I didn't want to do oAuth. You can absolutely do oAuth in Astro, even I've done it, and I'd be willing to take in a PR from someone who wants to add that, but it didn't feel worth the effort to me.\nFinally, a shoutout to Bob Monsour for the inspiration. You can find his version of this idea (which does a lot more), here: https://github.com/bobmonsour/social-posting\nPhoto by Sean Foster on Unsplash\n", "tags":[ "javascript", "astro" ], "categories":[ "development" ] }, { "title": "Links For You (3/8/26)", "date":"Sun Mar 08 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1772992800, "url":"https://www.raymondcamden.com/2026/03/08/links-for-you-3826", "content":"Greetings, programs. I'm taking a break from Assassin's Creed Shadows (and being lazy in general) and thought I'd write up my links post. Yesterday was the 15th birthday of one of my kids and later today we get to celebrate with her friends. Outside of that and laundry, I've got a large amount of nothing to get accomplished today and I absolutely love it. Let's get to the links. As always, I hope you find these worth your time!\nEleventy's Future\nAs you know (or hopefully know), my blog here is built on Eleventy, a Node.js static site generator. I've been using it, and blogging about it for almost six years. This past week, Zach announced that Eleventy is becoming "Build Awesome" - you can read the announcement post here: Eleventy is now Build Awesome. For folks who may not know, this is part of the same group that owns Font Awesome and Web Awesome, the new name for Shoelace.\nAs you can imagine, this has caused quite a bit of ... concern amongst the Eleventy community. As an example:\n\nThe End of Eleventy\nAu revoir, Eleventy\nEleventy is changing its name, among other things, and I don't love it\n\nAlso, and to be clear, this is not related, Sia announced the end of the Eleventy Meetup after five years and thirty episodes.\nI'm not stressing over this now. I don't like the name, but honestly that doesn't bother me, I'll just keep saying Eleventy. I can appreciate the goal here - provide more while also earning money - but I do worry about the community, usage, and so forth. That being said, Zach's been a great caretaker and devoted a hell of a lot of energy to something most people don't pay a dime for. All I can do now is hope for the best.\nSwatchify\nA few days ago, I blogged about the latest update to Color Thief, a JavaScript library for getting prominent colors in images. There's another option as well, the nicely named Swatchify. This is also a JavaScript library, but can also be used as a API service as well. (To be clear, if you host it.) There's also a Go library and CLI.\nOh, and this has nothing to do with the very cool watch company...\n\n \n Play Video\n \n\n\n\n\nCodePen 2.0\nI don't usually cover "product launches" (although I guess I just did re: Build Awesome), but one of my favorite online tools, CodePen just released (in beta!) a 2.0 version. You can learn more here: CodePen 2.0 Beta\nThis is a big change, and I strongly encourage you to pay attention to the onboarding notes if you give it a try. There is a lot of really good stuff here, including a proper file system, build processes, and more, but you will want to pay attention as the editor walks you through the changes.\nCassidy has a great demo in the video below:\n\n \n Play Video\n \n\n\n\n\nIf you watched it, you'll note the gets tripped up by one of the main changes - your CSS and JavaScript aren't automatically included anymore. They can be! But as she discovered, you need to do set things up right if you wan the "auto" behavior.\nI've only played with it a bit, but I really like what I see so far.\nJust For Fun\nI've shared videos from Matt One before - he creates incredible mashups and remixes. I just wish he'd skip the incredibly cringe worthy AI videos. That being said, I subscribe to him for his tunes, not his videos. The track below is a remix of The Cure's "Letter To Elise", and it's a dramatic mix of the original, really changing the tone/mood in an interesting way:\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Dynamically Adjusting Image Text for Contrast", "date":"Wed Mar 04 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1772647200, "url":"https://www.raymondcamden.com/2026/03/04/dyanimically-adjusting-image-text-for-contrast", "content":"Yesterday I was pleasantly surprised to discover that one of my favorite JavaScript libraries, Color Thief, had gotten a major update. Color Thief examines an image and can tell you the dominant color as well as the five most used colors. I thought this was pretty cool, and over the past, I kid you not, 14 years, I've blogged about it a few times:\n\nDemo of Color Palettes and PhoneGap - from way back in 2012\nCapturing camera/picture data without PhoneGap - in 2013\nDrag and drop image matching search at Behance - do people still use Behance?\nNew Camera Hotness from Chrome - "new" as of 2017\nBuilding a Progressive Color Thief - this was me exploring PWAs\nWeb Component to Generate Image Color Palettes - the most recent post (2024) where I use it in a web component\n\nSo yeah, it's a cool library, and as I said, I was stoked to see it get a major upgrade. The last version improves the library quite a bit, adding n TypeScript definitions but also a set of features that can directly help with creating text that contrasts well with the image. After examining an image, it has a basic isDark variable that can be checked, two contrast variables for white and black, and best of all, a simple textColor value that provides the best suggestion (and yes, this won't be perfect, I'll touch on why at the end) for what text color should be used to provide contrast.\nAs an example, consider this simple demo. First, I've got some HTML and CSS to render text over an image. Here's the HTML:\n\nAnd here's the CSS (I used Gemini to help write this):\n\nYou can see how it looks below. The text-shadow absolutely helps (and I wish I had known about this before), but it's still a bit washed out:\n\n See the Pen \n Text on image test by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nTo correct this, I added Color Thief. Given a pointer to an image object, all you need to do is run geColorSync. One of the values returned will be textColor and I can then update the CSS on the fly.\nSo, first I modified my HTML to have two images, nicely showing different levels of darkness ("Levels of Darkness" is the name of my new darkwave band - coming soon):\n\nMy CSS stayed the same, and as you remember, defaults to white text. Now here's the JavaScript I use to examine and update that color:\n\nYou'll note the comment where I mention I should check and see if the image is loaded, but I was feeling pretty lazy. Anyway, the result is perfect!\n\n See the Pen \n Text on image test (with CT) by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nNeat! So - a few caveats, things to think about, etc. I could probably also have used a simple black background on the div element wrapping my text. What I have now though feels a bit less obtrusive. Also note that it's possible for a dark image to have a "light corner" where your text is. In that case, Color Thief would be thrown off and return a value that's not helpful. (I plan on filing an issue on their repo suggesting a way to perhaps examine part of an image.) Finally, this could also be useful if you are using Cloudinary to host your image. Cloudinary can dynamically add text to an image (see my blog post where I demonstrate this with the National Parks System API) and in theory, you could use this to help determine the best color.\nLet me know what you think!\n", "tags":[ "javascript" ], "categories":[ "development" ] }, { "title": "Using Astro for a Combined RSS View and Generator", "date":"Tue Mar 03 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1772560800, "url":"https://www.raymondcamden.com/2026/03/03/using-astro-for-a-combined-rss-view-and-generator", "content":"Ok, before I start, let me just clarify this demo is kind of a remix of my earlier post about building an RSS aggregator in Astro. I did run into some interesting issues this time around though and I figured it was worth a share.\nAt Webflow, our developer docs are separated into different sections per product. For most of our developer products, we've got changelogs. So for example, here's the changelog for our Data APIs and here's one for our MCP server. We try to be good stewards of our developer community and ensure we document everything as clearly as possible.\nEach of our changelogs has an RSS feed as well so if you're using a feed reader, it's an easy to keep up to date. However, there isn't one unified RSS feed for all of our developer products. Given that I just worked on RSS parsing in Astro, I thought this would be a fun little utility to build.\nThe Application\nMy application is built in Astro (of course) and runs on the Webflow platform via Webflow Cloud. It does two things - present a UI of a combined view of RSS feeds from our docs and serves up it's own RSS feed.\nHere's a look at the UI:\n\n\n\nNothing too earth shattering but it does exactly what I need - let me see all our developer updates at once.\nIf you don't care about the code and just want to see it running, hop on over to where I deployed it: https://raymonds-webflow-cloud-space.webflow.io/chachachachanges\nYes, I was thinking Bowie when crafting that URL.\nThe Code\nAlright, so the app is a grand total of one HTML page and two additional routes. The HTML page makes use of SimpleCSS for UI, but don't forget Webflow Cloud apps can adopt the UI of their core site. In this case I didn't have a site (well, I did, but I'm not using it for anything) so SimpleCSS made it... err... simple.\nThe home page isn't too complex, especially with the layout abstracted out, but all it's doing is hitting my endpoint for the data and then rendering:\n\nWhen the document loads, I hit my endpoint, which I defined in changes.json.js:\n\nYeah, not much there, that's because the core logic of "hit X RSS feeds and combine them" in defined in a helper function. The reason why will make sense in a sec. Here's that code, which makes use of the rss-parser package:\n\nI set the RSS feeds as a config file so I could easily tweak it in the future - it's just an array of feed names and URLs. I expect there's nothing too interesting here, but note parseURL. Why am I doing this?\nWebflow Cloud apps run on Cloudflare, and Cloudflare doesn't run the "full" Node environment, which means some packages/code won't work out of the box. I've run into this before, and simply forgot when I was building this app. You can read more about this in our docs, Node.js compatibility, but honestly, the only time this impacted me at Cloudflare was, literally, the rss-parser package. It makes use of http and Cloudflare wants you to use fetch instead. Most modern Node packages do, but you will, from time to time, run into cases like I did here.\nLuckily, rss-parser supports a "give me the XML string" method so I used fetch and and passed the XML string to it. Easy fix once I realized what was going on.\nThe last part of the app was taking that combined set of items and creating an RSS feed for it. To handle that, I used a npm package named feed which lets you create an RSS feed (of different flavors even) on the fly. I served this from a file named feed.xml.js:\n\nI should note that the feed package supports a heck of a lot more options for creating RSS feeds than I needed, so keep in mind I did the bare minimum here. You can see this here: https://raymonds-webflow-cloud-space.webflow.io/chachachachanges/feed.xml\nShow Me the Code!\nOk, if you want to play with it, don't forget it lives up here, https://raymonds-webflow-cloud-space.webflow.io/chachachachanges, and you can see all of the code here: https://github.com/Webflow-Examples/wfc-chachachachanges\nPhoto by Christina Radevich on Unsplash\n", "tags":[ "javascript", "astro" ], "categories":[ "development" ] }, { "title": "Using Val Town to Get Me to the Movies", "date":"Sun Mar 01 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1772388000, "url":"https://www.raymondcamden.com/2026/03/01/using-val-town-to-get-me-to-the-movies", "content":"My wife and I both love going to the movies, but sometimes a few months will go by without us making it out there. Mostly we just forget what's coming out and don't realize till it's already on a streaming app. I thought it would be nice to build a tool that could help remind me of upcoming movie releases so we can make our theater going more of a consistent habit. To accomplish this, I used the The Movie Database APIs and Val Town.\nThe First Version\nBefore I even considered building a tool like this, I investigated the TMDB reference to see how easy it was to get upcoming releases. Turns out, there've got an endpoint just for that: Upcoming Movies If you carefully read the docs, you'll see this is just a shortcut to the more flexible Discover endpoint, but as it was out of the box, it worked fine for me. The only tweak I had to do was add the US region.\nThis simple function handled everything for me:\n\nWith the help of Oat, I built a simple HTML table rendering the results. I started with this HTML:\n\nAnd then a bit of JavaScript (this is everything except the function I just shared above):\n\nYou can check out the running demo here:\n\n See the Pen \n Upcoming Movies by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nYou will notice, probably, it depends on when you run this, that some movies have release dates in the past. These are re-releases so the release date value is accurate, if confusing at first. I considered removing these, it would be simple enough to just compare the date to the current date, but both my wife and I have enjoyed watching re-releases so I kept it in.\nBy the way, we are both super excited about the Peaky Blinders movie.\nCreating the Reminder in Val Town\nThe next bit was trivial - the only real issue I had was just being somewhat rusty with Val Town. I began by creating a new val, just for the movie logic. The only real change is that I'm getting my key from an environment variable rather than hard coding as I did in the CodePen above. (The key is a read only key so I don't have any concerns there.)\nThe next bit was to add a val and specify the cron trigger. I then imported the first val, crafted my HTML (a bit simpler than the CodePen demo), and emailed it. Val Town supports emailing yourself on the free plan, and that was perfect for my needs. You can see all the code here:\n\nI specified Sunday at noon, but ran a few quick tests to confirm:\n\n\n\nYou can check out the complete project here: https://www.val.town/x/raymondcamden/UpcomingMovies\n", "tags":[ "serverless" ], "categories":[ "javascript" ] }, { "title": "ColdFusion Wrappers for Bluesky and Mastodon", "date":"Fri Feb 27 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1772215200, "url":"https://www.raymondcamden.com/2026/02/27/coldfusion-wrappers-for-bluesky-and-mastodon", "content":"It's been a hot minute since I opened a repo for ColdFusion code, but I thought I'd package up my previous wrapper for Mastodon support, port over my BoxLang Bluesky module, and properly release the code on GitHub for folks who want it: https://github.com/cfjedimaster/coldfusion-social-wrappers\nRight now I'm using one repo for both Bluesky and Mastodon. Usually I'd separate them, but with the "support" being a grand total of one file each, I figured no one would mind getting the "extra" code if they only care about one. I'll also note the code is very much focused on posting, not reading data, but part of the reason I wanted to package this up was for people to run with it and add additional support. Fire off those PRs folks!\nPhoto by Ibrahim Qandily on Unsplash\n", "tags":[ ], "categories":[ "coldfusion" ] }, { "title": "Links For You (2/22/26)", "date":"Sun Feb 22 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1771783200, "url":"https://www.raymondcamden.com/2026/02/22/links-for-you-22226", "content":"This is where I'd usually comment about how the past two weeks seemed to fly by in a blink, but I'm tired of saying that so... oh crap, too late. To be fair, part of the reason the time flew by this week was me being out of town for my first offsite with Webflow. I got to meet my boss, coworkers, and learn more about our company and what our plans are for the year. I'm really happy I joined Webflow and I'm looking forward to the future. It feels like it's been a while since I could say that and damn do I appreciate having a good job.\nAn AI Drama in Four Parts\nThis is, to put it bluntly, a pretty crazy story about AI and automation gone wrong. Start off with "An AI Agent Published a Hit Piece on Me" and the continue on to the followups. I'm "mostly" pro-AI, which you already know if you're a regular reader, but I definitely try to be cautious about what I allow AI to do for me. I think we're going to see a lot of instances like this going forward. Yay for the future!\nLike Astro? Try the Newsletter\nAgain, if you're a regular reader you know I've been digging Astro lately. As part of my research, I discovered, and immediately signed up for, the Astro Weekly newsletter. I'm a huge fan of newsletters like this as I tend to miss cool things posted on social media (and that was the motivation for my links for you series) and I've enjoyed the issues I've gotten so far. (And I've been featured twice so far, which is pretty cool too!)\nInteractive Gaming Experiences with Amazon GameLift and IVS\nLast up is a post by my best friend Todd on the AWS blog, Creating interactive gaming experiences with Amazon GameLift Streams and Amazon Interactive Video Service. That's quite a mouth full, and it's a quite deep post, but it's well worth the read. Todd's post explores how to enable social aspects in gaming that go far beyond just simple chat, but real participation by the audience.\nJust For Fun\nLast is a collection of very cool ... not screen savers, but full screen web app experiences kinda like screen savers, including multiple Star Trek ones. Actually I lie, there are some screen savers too, and if you like (and recognize) LCARS, you will be a happy camper.\nYou can watch a preview below:\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Three Plug-N-Play CSS Libraries", "date":"Mon Feb 16 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1771264800, "url":"https://www.raymondcamden.com/2026/02/16/three-plug-n-play-css-libraries", "content":"For probably over a decade, when I wanted to make a demo/site look nice and didn't really care about making it unique, I'd go to Bootstrap. Bootstrap had a nice, clean look and as I was usually employing it for demos, or admin screens, I didn't care if it looked like every other Bootstrap site. While Bootstrap was mostly simple, it's also wordy as heck. Bootstrap has an insane love affair with div tags and even a simple Bootstrap page feels like the line number goes up 4X. Again, that's fine, but I found myself wishing for something a bit simpler. That's where the frameworks I'm sharing today come in. For the most part, these libraries require little to no work on your part. You add a CSS library (or two), and everything just gets better. You can optionally update your markup a bit, but in general, these libraries are great for the "I don't care, just make it nice and clean" approach that works great for demos and POCs.\nAs an example of what I would not consider to be "plug-n-play", is the excellent Shoelace library, which requires you to use web components to make use of the library. I really like Shoelace, but the options I'm sharing below are even simpler to use.\nTo demonstrate what these libraries do out of the box, I'll use this HTML as a template:\n\nIt's got a few headers, text, a form, and a table. For comparison's sake with the libraries below, here's how this is rendered:\n\n See the Pen \n CSS PNP - Milligram by Raymond Camden (@cfjedimaster)\n on CodePen.\n \n \nMilligram\nFirst one up is also the simplest, Milligram. The most difficult thing about using it is remembering that it has 2 "L"s in the name, not one. Thanks go to Todd Sharp for sharing this one. Installation is really simple for this library, three CSS links:\n\nAfter that, there's nothing else to do. Customization options exist, for example, changing the type of button, but there's not much else to it. Here's an example of my default HTML template using the library:\n\n See the Pen \n CSS PNP - Miligram by Raymond Camden (@cfjedimaster)\n on CodePen.\n \n \nOne thing you'll notice is a lack of padding on the sides. In the past I've added a quick body style with padding, but if you look at the docs for their grid system, you can see that wrapping the content with <div class="container"> is enough to add padding and center the content. I've made that tweak below:\n\n See the Pen \n CSS PNP - Milligram (2) by Raymond Camden (@cfjedimaster)\n on CodePen.\n \n \nAll in all, a good update with just two lines of code added.\nSimple.css\nNext up is an option I found about a month or so ago and it's currently my favorite, Simple.css. Like Milligram, you simply drop in a CSS link:\n\nThere's both a minified and un-minified version. Here's our default HTML with the library applied:\n\n See the Pen \n CSS PNP - Naked by Raymond Camden (@cfjedimaster)\n on CodePen.\n \n \nGorgeous. Notice it has dark mode support built-in, but if you want, you can force one mode only. There are a few additional things you can do if you want some additional formatting, for example, adding a header or footer will get you a nicely formatted, well, header and footer. In the embed below, I wrapped the h1 on top:\n\nAnd added a footer:\n\nAnd here's how that renders:\n\n See the Pen \n CSS PNP - Simple.css by Raymond Camden (@cfjedimaster)\n on CodePen.\n \n \nOat\nLast up is an option that literally came to my attention three or four hours ago (and when I realized this was a good third option, it motivated this post), Oat. As an aside, the link there (in case you don't click) is https://oat.ink/. I don't think I've ever seen a .ink TLD before. Unlike the other two options, this one requires one CSS and one JavaScript library:\n\nInitially, this looks a lot like Milligram, including the lack of spacing:\n\n See the Pen \n CSS PNP - Naked by Raymond Camden (@cfjedimaster)\n on CodePen.\n \n \nAs with Milligram, and heck, using the same HTML, you can quickly fix this with their grid system by wrapping your content with <div class="container">. Their docs demonstrate all the various modifications the library adds to a page, including a few web components you get via the JavaScript library, for example, here's a basic tabs component:\n\nAs one more example, I added tabs to the page, the grid system, and added dark mode support by including data-theme="dark" to the body tag:\n\n See the Pen \n CSS PNP - Oak by Raymond Camden (@cfjedimaster)\n on CodePen.\n \n \nMore?\nIf any of yall know of more options like this, I'd love to hear about them. Just drop me a comment below. As I mentioned, Simple.css is my favorite now, but I'm going to give Oat a try in the next demo I build.\nCC0 licensed photo by Umesh Balayar from the WordPress Photo Directory.\n", "tags":[ "css" ], "categories":[ "development" ] }, { "title": "I threw thousands of files at Astro and you won't believe what happened next...", "date":"Fri Feb 13 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1771005600, "url":"https://www.raymondcamden.com/2026/02/13/i-threw-thousands-of-files-at-astro-and-you-wont-believe-what-happened-next", "content":"Ok, forgive me for the incredibly over the top title there. Yes, it's clickbait, but I'm also tired after a very long week and feeling a little crazy, so just go with me here a bit, I promise it will be worth it. I was curious how well Astro could handle a large amount of data and I thought - what happens if I threw this blog (well, the Markdown files) at it and tried to render out a site? Here's what I did wrong and what eventually worked (better than I expected).\nRound One\nI began by creating a soft link locally from my blog's repo of posts to the src/pages/posts of a new Astro site. My blog currently has 6742 posts (all high quality I assure you). Each one looks like so:\n---\nlayout: post\ntitle: "Creating Reddit Summaries with URL Context and Gemini"\ndate: "2026-02-09T18:00:00"\ncategories: ["development"]\ntags: ["python","generative ai"]\nbanner_image: /images/banners/cat_on_papers2.jpg\npermalink: /2026/02/09/creating-reddit-summaries-with-url-context-and-gemini\ndescription: Using Gemini APIs to create a summary of a subreddit.\n---\n\nInteresting content no one will probably read here...\n\nIn my Astro site's index.astro page, I tried this first:\n\nAnd immediately ran into an issue with the layout front matter. Astro parses this and expects to find a post component in the same directory. My "fix" was to... remove the symbolic link and make a real copy and then use multi-file search and replace to just delete the line.\nThat worked... but was incredibly slow. I'd say it took about 70 or so seconds for each load.\nThis was... obviously... the wrong approach.\nRound Two - The Right Approach\nThe solution was simple - use content collections. This involved moving my content out of the src/pages directory and creating a file, src/content.config.js to define the collection:\n\nYou an see where I define my blog collection using a glob pattern and a base directory. That's literally it. This still took a few seconds to load, but was cached and future reloads were zippy zippy.\nBut wait... there's more\nWith this working, I began building out a few pages just to see things in action. First, a home page that shows ten recent posts with excepts:\n\nI think the import bits here are on top. You can see I need to sort my posts and I do so such that the most recent posts are on top. (In theory this sort would be faster if I pre-processed the string based dates into Date objects once, but the demo was working so fast now I didn't bother.)\nNow note the the link. To make this work, I created a new file, src/pages/posts/[...id].astro. The rest parameter in the filename (...id) is important. I'll explain after sharing the file contents:\n\nMy id values are coming from the permalink of my blog posts and look like so: permalink: /2026/02/09/creating-reddit-summaries-with-url-context-and-gemini. Notice the forward slashes? This was throwing errors in Astro when I originally named my file [id].astro. The rest parameter version fixed that immediately.\nThat's almost the last issue. With this in place, I could browse a few blog posts and see how they looked. I noticed something odd though. I had a header with three dots in it:\n## Temporal is Coming...\n\nAnd when rendered out, it turned into trash. I went to Gemini, asked about it, and it turned out to be an issue with Astro's Markdown processor considering the three dots a Unicode ellipsis character. My app didn't have a "real" HTML layout at this point (I added BaseLayout later) and was missing:\n\nAs soon as that was added, it rendered just fine!\n\n\n\nAnd how well did it perform when building? At near seven thousand pages, npm run build took...\n\n\n\n8 seconds. That's pretty dang good I'd say.\nSo, if you want to try this yourself, you can find the source here: https://github.com/cfjedimaster/astro-tests/tree/main/rayblog\nNote! I thought it was a bit of a waste to check in all of my blog posts in this repo so I filtered it down to the last three years. If you want to recreate that I did (and heck, you can probably make it quicker, if you do, drop me a line!), you can clone my posts here: https://github.com/cfjedimaster/raymondcamden2023\nPhoto by Jeremy Thomas on Unsplash\n", "tags":[ "javascript", "astro" ], "categories":[ "development" ] }, { "title": "Creating Reddit Summaries with URL Context and Gemini", "date":"Mon Feb 09 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1770660000, "url":"https://www.raymondcamden.com/2026/02/09/creating-reddit-summaries-with-url-context-and-gemini", "content":"A while ago, the Gemini API added a feature to help work with URL content, URL Context. Previously you had to fetch and download the HTML of the page and pass it to the API. This feature allows Gemini to request content (with limits) from public web pages. I thought it would be interesting to test this against Reddit. In the past I've made use of Reddit's APIs, but as they've pretty much destroyed access to those APIs, I thought this could be a good work around. Here's a simple demo I built.\nMy demo parses the Astro subreddit, specifically the new feed, and asks for a summary of items that seem to require a developer's help, as well as items that may be critical of Astro.\nI began with my imports and loading in my key from the environment:\n\nNext, I built a method for my prompt:\n\nThe prompt is basically what I stated above, and in theory, you could make this method much more generic, taking in a subreddit by name and changing the company name. But the real important bit is the tools section which enables URL content. It's basically like an "internet pass" to allow Gemini to hit the URL (or URLs) specified and add it to the prompt. It may be obvious but just in case, yes, the size of the web page will impact the total number of tokens in the prompt.\nThe result of this is pretty good. Here's an example from the current set of new posts.\n\nOk, that's fine, but I really prefer to have a set format to my output. Typically this is easy - switch to structured output and supply a JSON schema, but oddly that feature is disabled when using URL Context. Turns out there's a simple enough solution - just build another prompt!\nHere's the second method I added to my script:\n\nThe prompt lets Gemini know that I had a previous prompt and couldn't get structured output. I then specify I want structured output, pass in the result from the previous call, and use a specific JSON schema in the call to get my precise response back.\nThe final part of the script simply calls the methods:\n\nHere's the result (and as a quick note, I ran my script a few times between creating a PDF export of the initial response and now so if you see any differences, that's why):\n\nThat's pretty much it. The URL Context tool works as advertised, which is good, but it's kinda weird it Gemini can't map the results to a structured form. That being said, I dig the idea of using a second prompt to improve the results of an initial prompt, and it's something I'll consider in the future as well.\nYou can find the complete script here: https://github.com/cfjedimaster/ai-testingzone/tree/main/reddit_summary\n", "tags":[ "python", "generative ai" ], "categories":[ "development" ] }, { "title": "Links For You (2/8/26)", "date":"Sun Feb 08 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1770573600, "url":"https://www.raymondcamden.com/2026/02/08/links-for-you-2826", "content":"Happy Superb Owl Day! As my team didn't even get close to the playoffs, I'll be rooting for the Seahawks, but even more so, hoping for a fun game. Tomorrow I head out to Vegas for my first offsite with Webflow, and the first in-person company event I've been too since Auth0 nearly a decade ago. I'm looking forward to meeting my teammates in person and meeting new people. Now - to the links!\nAdding Touch to PowerShell\nA few months back, I traded in my Windows laptop (it was having horrible hardware issues) and moved back to Mac. I've gone back and forth over the years, and even when I was on Windows for my personal machine, my work laptop was usually a Mac, but I've decided to go back to Mac for my personal machine ... at least for a while. That being said, one of the aspects of Windows I wanted to get into more, but never got around to it, was scripting in PowerShell. I knew it had a lot of power and flexibility, but I spent most my time in WSL so I didn't really dig into it.\nThis post by Cassidy Williams demonstrates a simple example of this, rebuilding the touch command for PowerShell. On the offhand chance you don't know what touch does, it simply creates a new blank file with the name you specify, so touch cats.txt will create the file cats.txt in your current directory. Apparently, Windows has a command like this already, ni, but Cassidy wanted to use the same function in multiple OSes.\nInvokers on the Web\nNext up is a look at invoker commands by Pawel Grzybak. Invoker commands let you bind HTML elements to actions without needing JavaScript, and are available across all modern browsers (even IESafari). You can extend the built-in invoker support with JavaScript as well.\nState of JavaScript Results\nLast up are the results from the annual State of JavaScript survey. This is a wide ranging survey of the JavaScript, and greater web, ecosystem. It's quite a bit of data and worth your time checking out.\nJust For Fun\nUsually I reserve the "fun" link for music videos, but this was just too good to pass up. My buddy Todd Sharp discovered this a few days ago and it's a fascinating look at the history of the Japanese mail system. Trust me, it is absolutely cooler than it sounds, and a quick read at that. Enjoy!\nMore than Mail | The Culture and History of the Japanese Postal System\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Building a Bluesky Sentiment Dashboard with Alpine and Chrome AI", "date":"Thu Feb 05 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1770314400, "url":"https://www.raymondcamden.com/2026/02/05/building-a-bluesky-sentiment-dashboard-with-alpine-and-chrome-ai", "content":"Good morning, programs! Today I'm sharing yet another example of Chrome's on-device AI features, this time to demonstrate a "Bluesky Sentiment Dashboard". In other words, a tool that lets you enter terms and then get a report on the average sentiment for posts using that word. I actually did this before (and yes, I forgot until about a minute ago) last year using Transformers.js: Building a Bluesky AI Sentiment Analysis Dashboard. I also built this for Twitter, before it went down the toilet, killed off API access, etc. etc., but I can't seem to find it in my archives so maybe I'm hallucinating. That being said, earlier this week I thought I'd try building this because honestly I had forgotten about my previous demo, but it gave me a chance to play more with Chrome's AI tooling. Interesting enough, in that post from last year I mentioned possibly adding Shoelace for UI which I actually did for this demo... so not a total waste of time, right? Let's get into it!\nBluesky's Search API\nSo one big change from the previous post is that the public, unauthenticated search endpoint at https://public.api.bsky.app/xrpc/app.bsky.feed.searchPosts now returns a 403. You can't use it. I believe this was done to stop scrapers which is a bummer, but oddly, the authenticated endpoint at https://api.bsky.app/xrpc/app.bsky.feed.searchPosts works just fine, even without authentication. So for example, this will search for me: https://api.bsky.app/xrpc/app.bsky.feed.searchPosts?q=Raymond+Camden\nMy trust in this is absolutely not 100%, but that's enough to build a demo, right? For my dashboard I decided on:\n\nAlpine.js - I almost always try to go vanilla for web demos, but when I'm building something a bit complex, I love Alpine for what it provides and how little it impacts the "weight" of my application.\nShoelace - This is a UI library of web components that I've used before and dig. It's been replaced with Web Awesome but I haven't yet made the move to it yet.\nAnd as always mentioned, Chrome AI, specifically the Prompt API\n\nHere's a screen shot of it in action:\n\n\n\nOk, let's get to it!\nThe HTML\nI'm not going to share all of the HTML here (don't worry, I'll link to the repo at the end), but instead focus on the main app where Alpine comes into play. I've got a top level header that handles informing the user of when work is being done as well as handling the ability to add a keyword:\n\nMy report content is a set of cards, each reporting on sentiment as well the total number of posts and the earliest and most latest result:\n\nYou can also see where I'm conditionally adding in a bad or good class based on sentiment, and seeing it in front of me I think I'd rather have that in data so the HTML could be simpler. I'll probably address that later this week so that's an FYI if you read this in the future.\nNext, I've got a dialog for adding a term:\n\nThat's it, except for one special dialog I'll mention in a sec. Ok, on to the JavaScript.\nThe JavaScript\nAlright, as with the HTML, I'm not going to share every single line, but focus on the important bits. First, let's talk about Chrome's Prompt API. As I've mentioned in previous posts, this API is still behind a flag in the browser (it's GA for extensions), so checking for it requires a few things. I've wrapped it like so:\n\nNow, the availability() method can return a few different things:\n\nunavailable - nothing you can do, period\navailable - golden!\ndownloading/downloadable - it needs to download, or is currently doing so\n\nIf the model is not available but can be downloaded, you must wait for "user interaction" before starting that process. This can be checked with navigator.userActivation.isActive. Basically, any click is enough, but to handle this, my logic does this:\n\nThat dlDialog is another modal in the HTML that basically warns the user about the download. When you close this dialog, this event fires:\n\nWhich handles the firing the method to make my model instance. I do not provide UI feedback about the download process in this demo, but I usually do, so I'll probably update that soon as well. That being said, here is makeSession:\n\nWhew. Ok, that's the AI setup phase. As for the actual searches, I make use of localStorage to save a JSON-encoded array of strings. This is checked on startup, and whenever you add or a delete a term, I persist it. The actual "search and report" is done in the heartbeat method:\n\nYou can see the basic loop over the terms. Each term is sent to the Bluesky API:\n\nAnd then the text is smooshed (technical term) together and passed to the model. SCHEMA is a JSON schema used to shape the results:\n\nLastly, I update this.cards which is an Alpine variable and is what was used in the HTML above to render out a bunch of Shoelace Card elements. Whew.\nTry It!\nIf you've got the Prompt API enabled, you can try this yourself here: https://cfjedimaster.github.io/webdemos/bs_sentiment/. (And I'm just noticing - along with providing downloa", "tags":[ "javascript", "generative ai", "alpinejs" ], "categories":[ "development" ] }, { "title": "Building an RSS Aggregator with Astro", "date":"Mon Feb 02 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1770055200, "url":"https://www.raymondcamden.com/2026/02/02/building-an-rss-aggregator-with-astro", "content":"This weekend I had some fun building a little Astro site for RSS aggregation. It works by the individual user defining a set of feeds they care about and works with a server-side Astro route to handle getting and parsing the feeds. Here's a quick example. On hitting the site, it notices you haven't defined any feeds and prompts you to do so:\n\n\n\nClicking "Manage Feeds" opens up a dialog (my first time using one with native web platform tech!) where you can add and delete RSS feeds:\n\n\n\nAfter you have some specified, the app then calls server-side to fetch and parse the feeds. Items are mixed together and returned sorted by date:\n\n\n\nNot too shabby looking, either. That's thanks to the simple addition of Simple.css. Let's take a look at the code.\nThe App\nThe entire application really comes down to two routes. The first being just the home page, which is pretty slim:\n\nThe <BaseLayout> wrapper just sets up HTML wrapper that would be useful if I had more than one page to be displayed, but even with one such page, I like having the abstraction. Note that the dialog element is hidden when initially viewing the page, it only shows up when the Manage Feeds button is clicked. For completeness, here it is in BaseLayout.astro:\n\nThe fun part comes in the JavaScript. I begin by declaring a few global variables, and setting up the code I want to run when the page loads:\n\nYou can see there the event logic to handle showing the dialog as well as the handler for adding a RSS field. As you can see, I'm using window.localStorage for storage which means you can leave and come back, and the application will know what feeds you care about. I've got a simple wrapper to get them as well:\n\nNow one quick note. LocalStorage is not asynchronous, it's blocking, but I built my function with the idea that in the future, I could switch to IndexDB or another solution entirely. That may be overkill now, but it doesn't hurt anything.\nHere's how I handle rendering the feeds in the dialog, as well as deletions:\n\nNext up is the code that calls for feed items and handles rendering them:\n\nThis is pretty vanilla network calling with fetch, although I'll note that I had some qualms about using the query string. There are limits to how long that could be, and in theory, I should switch to a POST probably.\nThe last bit of client-side code is snippet, which handles the content of the feed item:\n\nI should probably move that maxLength up top. I'll do so. Eventually.\nFetching RSS Items\nNow for the fun part, fetching RSS items. For this, I made use of the rss-parser Node package. The logic is relatively simple - given a call to the route with a list of RSS urls, fetch them, parse them, sort them by date, and return, but as an added wrinkle, I made use of Netlify Blobs for easy caching. Here's the server-side route I built named loaditems.js:\n\nThe cache is based on the RSS URL so in theory, if two users come in requesting the same feed, they all get the benefit of the cache. I cache for one hour, which frankly could be a lot more. I blog a lot and even I don't usually have more than 2 or 3 a week, so feel free to tweak this as you see fit if you play with the code.\nCheck It Out!\nOk, if you want to try this out yourself, head over to https://astrorssagg.netlify.app/ and try adding a few feeds. Let me know how it works for you. The complete code of the application may be found here: https://github.com/cfjedimaster/astro-tests/tree/main/rssagg\nBut Wait...\nOk, that's all I have to say about the application, and in theory, you can stop reading now, but I really want to comment on something. The DX (developer experience) of using Astro on Netlify is incredible. Like, I was in shock at how things "just worked". Multiple times I was certain I was going to hit a roadblock, need to configure and tweak something, and honestly, that never happened. Here's what I found.\nThe first thing I did was add the Netlify adapter, which comes down to:\nnpx astro add netlify\n\nBy itself, that was enough, but I wanted my server-side RSS parser to run on the server, which means I had to changeone line in astro.config.js. By default, the defineConfig looks like this after adding the adapter:\n\nI added the output parameter:\n\nThat was it, literally. I'm pretty sure I could have specified server output just for my one route, but this was the quick and dirty solution. I was sure I'd have to rewrite my code into a Netlify Function, but nope, it just worked.\nSpeaking of just working, blob support also just worked. Honestly I'm not even 100% sure I know how. In production, I know it automatically picks up on the right environment settings to associate the blobs with the site. Locally, I've got no clue. It's definitely a different store, not the production one, but again, it just plain worked.\nI just want to give a huge shout out to the Astro team, and Netlify, for making this so freaking pleasant!\n", "tags":[ "javascript", "astro" ], "categories":[ "development" ] }, { "title": "Interrogate Your PDFs with Chrome AI", "date":"Thu Jan 29 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1769709600, "url":"https://www.raymondcamden.com/2026/01/29/interrogate-your-pdfs-with-chrome-ai", "content":"Yesterday I blogged about using PDF.js and Chrome's on-device AI to create summaries of PDF documents, all within the browser, for free. In that post I mentioned it would be possible to build a Q and A system so users could ask questions about the document, and like a dog with a bone, I couldn't let it go. Last I built not one, but two demos of this. Check it out.\nVersion One\nBefore I begin, note that this version makes use of the Prompt API, which is still behind a flag in Chrome. For this demo to work for you, you would need the latest Chrome and the right flags enabled. The Prompt API is available in extensions without the flag and it wouldn't surprise me if this requirement is removed in the next few months. Than again, I don't speak for Google so take that with a Greenland-sized grain of salt.\nIf you remember, I shared the code yesterday that parsed a PDF and grabbed the text, so today I'll focus on the changes to allow for questions.\nFirst, the HTML now includes a text box. I hide this in CSS until a PDF is selected and parsed.\n\nIn the JavaScript, I once again use feature detection:\n\nAfter the user has selected a PDF and the text is parsed, I then run enableChat:\n\nNote in the system instruction I tell the model to stick to the PDF, so if the user does something cute like, "why are cats better than dogs", the system will direct them back to the document. I had to put two statements about this in the system information as one didn't seem to be good enough.\nI'll include the demo below, but assuming most of you won't be able to run it, here's a few examples using an incredibly boring Adobe security document.\n\n\n\nThat's pretty much the same as the summary, so let's try something specific:\n\n\n\nAnd finally, here's what happens if I try to go off topic:\n\n\n\nAs a reminder, you can't use beefy PDFs in this demo, and unlike yesterday's post, I didn't add a good error handler for that. Sorry!\n\n See the Pen \n Chrome AI, PDF.js - QA by Raymond Camden (@cfjedimaster)\n on CodePen.\n \n \nVersion Two\nI was pretty happy with the initial version, but I was curious if the on-device model could handle creating references to the document?\nI began by keeping the page text in an array instead of one big string:\n\nThen I modified by enableChat a few ways. First, I created a new block of text that marked the pages:\n\nI think this could be better, perhaps with a --- around the page content. Next I modified the system prompt:\n\nOddly, this wasn't enough. I'd ask a question, but wouldn't get references. However, if I asked for references, I did. So the final change was to prefix each user prompt as well:\n\nThis seemed to do it:\n\n\n\nThis is not always accurate. For example, when I asked: "what can you tell me about adobe confidential data?", which is covered in detail on page 3, the result focused on page 2. The confidential data classification is introduced on page 2, but is covered more in depth on page 3. Maybe improving the page formatting in the prompt would help here, but I'm happy with this demo so far. (If you want a copy of the PDF I tested with, you can find it here.)\n\n See the Pen \n Chrome AI, PDF.js - QA by Raymond Camden (@cfjedimaster)\n on CodePen.\n \n \n\nAs I said yesterday, give these demos a spin and let me know what you think!", "tags":[ "javascript", "generative ai" ], "categories":[ "development" ] }, { "title": "Summarizing PDFs with On-Device AI", "date":"Wed Jan 28 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1769623200, "url":"https://www.raymondcamden.com/2026/01/28/summarizing-pdfs-with-on-device-ai", "content":"You can take the man out of the PDFs, but you can't take the PDFs out of the man. Ok, I'm not sure that exactly makes sense, but with a couple years in me of working with PDFs, I find myself using them quite often with my AI demos. For today, I'm going to demonstrate something that's been on my mind in a while - doing summarizing of PDFs completely in the browser, with Chrome's on-device AI. Unlike the Prompt API, summarization has been released since Chrome 138, so most likely those of you on Chrome can run these demos without problem. (You can see more about the AI API statuses if you're curious.)\nGetting PDF Text - Client-Side\nThere's plenty of options for getting PDF text on the server-side, either via open source libraries or APIs. For this demo I made use of PDF.js. This is an open source library sponsored by Mozilla that's been around for a while. It supports parsing and rendering PDFs, but for my use-case, I just needed to parse it. The code for that part is actually really simple, once I used Google Gemini to help me with it.\nFirst I added the library CDN: https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js\nNext, I followed the advice from Gemini to specify a worker source for performance reasons:\n\nThis was suggested by Gemini, but I did followup research and confirmed this makes sense.\nFor the actual PDF parsing, I based it on an file input change event, like so:\n\nThat's pretty much it, and in my testing, this worked really fast, like surprisingly fast. Note that you can get more than just the text of course. My final code gets the title as well so I can render that. Check the PDF.js docs for a full understanding of everything possible.\nThe Demo\nOk, so given that I can get the PDF text easily enough, it was now time to use the Summarizer API. I've blogged about Chrome AI many times now but as a reminder, the process generally looks like so:\n\nFirst do feature detection to see if the API is available at all.\nThen see if the API is available, this can return unavailable, which means the device isn't able to use the API for a few different reasons, available which means it is good to go, or downloadable which means the model will be downloaded. This can take some time and you should let the user know.\nFinally, make an instance of the model. Once you have that, you can run summarize() and Bob's your uncle.\n\nFirst, my demo has a bit of HTML, both for the input field and a place to provide output:\n\nNow, the JavaScript:\n\nThe first half is what I've already covered - getting the text of a PDF file. The only difference is that I added a call to get the metadata of the PDF so I could possibly render the title as well.\nThe second half, doSummary, is where the AI work is done. I create the summary object (using default values, the API actually supports multiple different styles of summarization) and then attempt to summarize.\nNow - here comes the biggest issue. Right now the model can't summarize large PDFs. You can see I'm handling that with a specific catch handler that makes this clear. There is absolutely a way around this! One classic way is to do summaries of summaries. Given that PDF.js returns text in pages, I could keep an array of pages, and then do batches of summaries, let's say 10 pages at a time. 10 is a guess and given that a PDF page may have a lot or a little text, it's really something you would need to test and see what works best. For this demo though I kept it simple - just report an error.\nYou can play with this below, but if you're curious as to the results, here's a few test results. First, I tried a PDF version of my resume (note that I've not updated it yet to include Webflow, will do that soon!).\n\n\n\nThat's pretty darn accurate I'd say. Want to try it yourself? Check it out below:\n\n See the Pen \n Test PDF.js for Text / Summary by Raymond Camden (@cfjedimaster)\n on CodePen.\n \n \nMore Features and Examples\nThis example just focused on the Summary API, but you could absolutely try other APIs as well. For example, the Prompt API would let you literally ask questions of the PDF (and I may build this), something that I believe Acrobat charges for. (Ahem, no shade being thrown, honest. Mostly.) You could also do language detection and translation.\nMy buddy on the Chrome team Thomas Steiner has some great examples of this: https://chrome.dev/web-ai-demos/document-translator/\nLet me know what you think!\n", "tags":[ "javascript", "generative ai" ], "categories":[ "development" ] }, { "title": "Links For You (1/25/26)", "date":"Sun Jan 25 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1769364000, "url":"https://www.raymondcamden.com/2026/01/25/links-for-you-12526", "content":"I write this in the midst of a huge ice event - which thankfully isn't so bad here in south Louisiana. We're very cold and rainy, but no real ice yet, which is good. The worst is coming in later tonight and the schools have already shut down, but thankfully I work at home so there's no need to get on the roads. Today is also the 26th birthday of my eldest child, which makes the age ranges of my little army (8 kids total) go from 10 to 26. Wow.\nTemporal is Coming...\nOk, most likely you've seen this across your feeds already, I swear I saw it at least ten times, but "Date is out, Temporal is in" is a great introduction to the new date hotness in JavaScript, the Temporal API.\nAccording to MDN, the support is good so I imagine I'll be using this soon myself.\n\n\n\nThe Personal Site is Back!\nOr at least that's what I hear. Personally, I miss seeing all the cute, weird, personal web pages from the old days, so any effort to help promote this trend is a good thing in my book. Personalsit.es is a collection of personal web sites and a quick way to hop to a random one. Anyone can submit a PR to add your own. (I did!)\nFree APIs to Get Your Hack On\nThis isn't new, but I love a good API, and what's better than one good API? How about near 500 of them! Free Public APIs is exactly what it sounds like, a collection of free APIs. Building simple API wrappers are a great way to learn a new language. Sadly though there are only three cat APIs - someone fix that please!\nJust For Fun\nAnother music discovery for me, hemlocke springs is an American singer and songwriter who just started being active in the music scene over the past few years. She's got a great sound, and while this is the only track I've tried so far, I'm looking forward to listening to more from her.\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Building a UI for Gemini File Stores", "date":"Thu Jan 22 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1769104800, "url":"https://www.raymondcamden.com/2026/01/22/building-a-ui-for-gemini-file-stores", "content":"Back in November of last year I wrote up a blog post talking about a new (at the time) Google Gemini feature, File Stores: "Gemini File Search and File Stores for Easy RAG". In that post I discussed what it was, how it worked, and built up a simple example. You should definitely read that post first, but if you want the TLDR, here ya go:\nFile Stores (referred to as "File Search") expands on Gemini's previous ability to work on files in a temporary fashion by allowing you to create a permanent "store" of folders. You can use this for RAG systems and use flexible metadata filter for complex queries.\nThis feature has been out for a few months now and I've wanted to play with it more, but found myself facing an issue - I'm lazy. Ok, not lazy, I just wasn't looking forward to the "setup" work to a) create the store once and b) populate the store before I could c) do GenAI powered searches against it. To be clear, this isn't an issue with the APIs, it's just the work you need to do ahead of time. It occurred to me that Google should provide a simple web-based tool for this, maybe not for production use, but for proofs of concepts and such. Since there isn't one (at least that I know of), I decided to build one.\nThe Gemini File Stores App\nMy application is a simple Python Flask web app meant to be run locally with your Gemini API key defined in an environment variable. On starting up, you're presented with a list of your stores:\n\n\n\nClicking on View gives you a detailed listing of files, along with a chance to delete or upload new files:\n\n\n\nThe search interface lets you pick a store, enter a query, and supply optional filtering. As I mentioned, the Gemini API here is pretty powerful. You could imagine a set of product diagrams that are categorized by type tied to a search interface that lets you select a product type before you ask questions.\n\n\n\nAs I mentioned, the idea is that this is a local application. You download the bits here (note, this isn't a stand alone repo, it's part of a bigger one - if this takes off I'll move it), copy your Gemini API key to the environment as GEMINI_API_KEY, install the dependencies (I don't have a requirements.txt file yet - will add one soon), and run it with flask run.\nHow Was It Built?\nOk, so this is the interesting part, at least to me. I started off using Visual Studio Code's built-in AI agent to create mock UI files, you can find them here: https://github.com/cfjedimaster/ai-testingzone/tree/main/stores_ui/mockui. This worked fine, but I realized I'd rather use Gemini to build a Gemini app so I then switched to Gemini's AI chat in Visual Studio Code and started doing my real work there. I absolulutely did not vibe code the whole thing. I absolutely did use AI to generate things bit by bit, which I then tweaked and tested, and iterated. This felt much safer than trying to do the whole thing at once.\nHere was my first prompt:\nthis folder is for a new application that will work with Google Gemini \nFile Stores. The mockui folder contains my mocks for how I invision \nthe application being built out. I want you to create a new Flask \napplication. The application will require a GEMINI_API_KEY set in a \n.env file, ie the application runs assuming a valid key. For now, \njust build the first page that shows a list of existing stores \nfor the account. When building, put all Gemini related calls \nin it's own Python class.\n\nAnd later prompts were small bits here and there, basically handling the simple stuff I didn't need to write by hand. For the most part this just worked, although at times it hallucinated Gemini Python SDK methods that didn't actually exist. This is where I appreciated the fact I was doing things in small chunks - it made it easier to confirm, test, modify, and move on.\nHere's an example from later in the process:\nmodify app.py, a Flask app, to add a new route called storesearch. \nThis route will be called by front end JavaScript and should look \nfor 3 parameters - store, prompt, and metadataFilter. these args \nare passed to the search_store method in gemini_service.py. \nthe results are returned in json\n\nI really dug this approach. I let the AI agent the more rote, boring aspects and I focused on getting the UI/UX just right. This AI thing might have a future. Maybe.\nAnyway, let me know if this is useful!\nPhoto by Omar Hassan on Unsplash\n", "tags":[ "generative ai", "python" ], "categories":[ "development" ] }, { "title": "Using Chrome AI to Rewrite Monstrous JSON", "date":"Sat Jan 17 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1768672800, "url":"https://www.raymondcamden.com/2026/01/17/using-chrome-ai-to-rewrite-monstrous-json", "content":"Happy Saturday folks, and while this is a topic I've covered many times here, I was bored and wanting to write some code, so I whipped up a quick demo. One of my favorite uses of AI is to take abstract data and write a human readable form of it. Now to be clear, this is not something you need AI for. Given that you know the shape of your data, you can create your own summary using hard-coded rules about what values to show, how to present them, and so forth. What I like about the Gen AI use-case for this is the amount of randomness and creativity you get in the responses. In the past I've done this with weather forecasts and chart data, but today I thought I'd try something different - monsters.\nA lot of Dungeons and Dragons content is available, legally even, online in API and JSON formats. The D&D 5e API includes information on all aspects of the game, from classes to spells to monsters. While the API is handy, I knew I wanted the raw data as is so I headed over to the repo and grabbed the raw monsters json file. This JSON file contains information on every known monster. Here's an example, an you can see it is quite extensive (I won't be offended if you just skim this):\n{\n \"index\": \"unicorn\",\n \"name\": \"Unicorn\",\n \"size\": \"Large\",\n \"type\": \"celestial\",\n \"alignment\": \"lawful good\",\n \"armor_class\": [\n {\n \"type\": \"dex\",\n \"value\": 12\n }\n ],\n \"hit_points\": 67,\n \"hit_dice\": \"9d10\",\n \"hit_points_roll\": \"9d10+18\",\n \"speed\": {\n \"walk\": \"50 ft.\"\n },\n \"strength\": 18,\n \"dexterity\": 14,\n \"constitution\": 15,\n \"intelligence\": 11,\n \"wisdom\": 17,\n \"charisma\": 16,\n \"proficiencies\": [],\n \"damage_vulnerabilities\": [],\n \"damage_resistances\": [],\n \"damage_immunities\": [\n \"poison\"\n ],\n \"condition_immunities\": [\n {\n \"index\": \"charmed\",\n \"name\": \"Charmed\",\n \"url\": \"/api/2014/conditions/charmed\"\n },\n {\n \"index\": \"paralyzed\",\n \"name\": \"Paralyzed\",\n \"url\": \"/api/2014/conditions/paralyzed\"\n },\n {\n \"index\": \"poisoned\",\n \"name\": \"Poisoned\",\n \"url\": \"/api/2014/conditions/poisoned\"\n }\n ],\n \"senses\": {\n \"darkvision\": \"60 ft.\",\n \"passive_perception\": 13\n },\n \"languages\": \"Celestial, Elvish, Sylvan, telepathy 60 ft.\",\n \"challenge_rating\": 5,\n \"proficiency_bonus\": 3,\n \"xp\": 1800,\n \"special_abilities\": [\n {\n \"name\": \"Charge\",\n \"desc\": \"If the unicorn moves at least 20 ft. straight toward a target and then hits it with a horn attack on the same turn, the target takes an extra 9 (2d8) piercing damage. If the target is a creature, it must succeed on a DC 15 Strength saving throw or be knocked prone.\"\n },\n {\n \"name\": \"Innate Spellcasting\",\n \"desc\": \"The unicorn's innate spellcasting ability is Charisma (spell save DC 14). The unicorn can innately cast the following spells, requiring no components:\\n\\nAt will: detect evil and good, druidcraft, pass without trace\\n1/day each: calm emotions, dispel evil and good, entangle\",\n \"spellcasting\": {\n \"ability\": {\n \"index\": \"cha\",\n \"name\": \"CHA\",\n \"url\": \"/api/2014/ability-scores/cha\"\n },\n \"dc\": 14,\n \"components_required\": [],\n \"spells\": [\n {\n \"name\": \"Detect Evil and Good\",\n \"level\": 1,\n \"url\": \"/api/2014/spells/detect-evil-and-good\",\n \"usage\": {\n \"type\": \"at will\"\n }\n },\n {\n \"name\": \"Druidcraft\",\n \"level\": 0,\n \"url\": \"/api/2014/spells/druidcraft\",\n \"usage\": {\n \"type\": \"at will\"\n }\n },\n {\n \"name\": \"Pass Without Trace\",\n \"level\": 2,\n \"url\": \"/api/2014/spells/pass-without-trace\",\n \"usage\": {\n \"type\": \"at will\"\n }\n },\n {\n \"name\": \"Calm Emotions\",\n \"level\": 2,\n \"url\": \"/api/2014/spells/calm-emotions\",\n \"usage\": {\n \"type\": \"per day\",\n \"times\": 1\n }\n },\n {\n \"name\": \"Dispel Evil and Good\",\n \"level\": 5,\n \"url\": \"/api/2014/spells/dispel-evil-and-good\",\n \"usage\": {\n \"type\": \"per day\",\n \"times\": 1\n }\n },\n {\n \"name\": \"Entangle\",\n \"level\": 1,\n \"url\": \"/api/2014/spells/entangle\",\n \"usage\": {\n \"type\": \"per day\",\n \"times\": 1\n }\n }\n ]\n }\n },\n {\n \"name\": \"Magic Resistance\",\n \"desc\": \"The unicorn has advantage on saving throws against spells and other magical effects.\"\n },\n ", "tags":[ "javascript", "generative ai" ], "categories":[ "development" ] }, { "title": "Links For You (1/10/26)", "date":"Sat Jan 10 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1768068000, "url":"https://www.raymondcamden.com/2026/01/10/links-for-you-11026", "content":"Happy 2026, programs! As this is the first Links For You for the year, I figure it may be good to remind folks why I write these. Social media can be a great place to share links with folks, but it's very much hit or miss. Someone may share something incredibly cool that you would love to boost, but if you miss it, you're out of luck. I subscribe to many listservs that share good tech links, but a while ago I thought it would be cool to share and promote links I thought were especially cool. Obviously that's pretty opinionated, but that's why you're here, right? Each of these posts will have three links, typically but not always tech related, and a fourth entry that is 100% just for fun. Enjoy!\nThe price of URL parameters\nFirst up is a fascinating look at how innocuous URL parameters can have an adverse effect on performance: Fixing the URL params performance penalty. Barry Pollard (from the Google devrel team) discusses how URL parameters, even those that don't change the output of a site, can impact the performance of a web page. Even cooler, he talks about a proposed solution to the problem.\nRelative Time via Web Components\nYall know I love web components, and next up is a cool one from GitHub called relative-time-element. This makes use of Intl to display dates relatively, i.e. so and so days from now. (You can check out my post on it here.) Here's an example of how it looks:\n\nWhich today renders: last week. For earlier times it will render something like on December 1, 2025, with the proper formatting for the user's locale. There's a bunch of different attributes and it's actually used by GitHub itself on the main site. If you want to play quickly with it, I've embedded a CodePen below:\n\n See the Pen \n Untitled by Raymond Camden (@cfjedimaster)\n on CodePen.\n \n \nMy only suggestion here is that you should probably always use the title attribute with this such that if the user hovers over the relative formatted time, they can also see the "real" date.\nEmbedding CanIUse\nNext up is a cool little utility to embed CanIUse data on your web page: CanIUse Embed. You drop in the script tag and then add a data attribute to a paragraph tag. Here's an example:\n\nFiguring out that value for feature was a bit hard, but if you go the docs, they've got a nice little helper there to make that easier. You can see an example of this below:\n\n\nJust For Fun\nDid you know this year is the 40th anniversary of "The Labyrinth"? Of course you did. Of course it also helps if your wife is a massive nerd and this is her favorite movie. Tomorrow night we're going to see it at the theater (for probably the third or fourth time since we've been together, which is just fine with me!) and this is probably the most fun song from the movie. Enjoy!\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Adding Hardcover.app Data to Eleventy", "date":"Wed Jan 07 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1767808800, "url":"https://www.raymondcamden.com/2026/01/07/adding-hardcoverapp-data-to-eleventy", "content":"It's been far too long since I shared an Eleventy tip, and to be fair what I'm showing today can be used anywhere, but hopefully this will be useful to someone else out there. I enjoy tracking my media consumption, specifically movies and books. For movies I've been real happy with Letterboxd (you can see my profile if you wish). For books, I used Goodreads for a very long time, but have wanted to migrate off the platform and switch to something else. There's alternatives, but none really worked well for me. Earlier this week, an old friend of mine (hi Jason!) suggested Hardcover. This is a Goodreads competitor built, in their own words, out of spite, and I can totally get behind that. I signed up and imported my Goodreads data in about five minutes and while I haven't dug deep into the site at all, it seems totally fine to me so I'll be sticking there. You can find my profile here: https://hardcover.app/@raymondcamden\nOk, you aren't here (I assume) to peruse my books and see how few books I consume (teenage Ray would be embarrassed by the number). The biggest reason I switched to Hardcover was because of their API, which I wanted to use to display it on my Now page. Again, I don't honestly think anyone cares what I'm reading/listening to/watching, but I think it's cool and that's all that matters on my little piece of the Internet.\nTheir API docs make it incredibly easy to get started, including the ability to quickly run your own requests for testing. Their API is GraphQL based, which I'm a bit rusty with, but I had no trouble getting started. My goal was to simply get my list of books I'm currently reading. To do this, I needed:\n\nMy user id\nThe status value for a book that is currently being read.\n\nFor the first one, I used their link to a GraphQL client and ran this query:\nquery Test {\n me {\n username\n id\n }\n }\n\nI didn't actually need my username, but it was already there. Anyway, this gave me my user id, 65213.\nNext, I needed to know which books were in my "Currently Reading" status and luckily, they literally had a doc page for that, "Getting Books with a Status", that used that particular value. Here's their query:\n{\n user_books(\n where: {user_id: {_eq: ##USER_ID##}, status_id: {_eq: 2}}\n ) {\n book {\n title\n image {\n url\n }\n contributions {\n author {\n name\n }\n }\n }\n }\n}\n\nSimple, right? There is one minor nit to keep in mind - their dashboard makes it easy to get your key, but it expires in one year and you can't programatically renew it. My solution? Adding a reminder to my calendar. Ok, now to how I actually used it.\nProviding the Data to Eleventy\nHere's how I added this to Eleventy, and again, you should be able to port this out anywhere else as well. I added a new file to my _data folder, hardcover_books.js. Per the docs for global data files in Eleventy, whatever my code returns there can be used in my templates as hardcover_books. Here's my implementation:\n\nMost of the code is me just calling their API and passing the GraphQL query, nothing special. However, I did want to shape the data a bit before returning it so I simplify it to an array, and then take the complex data of authors and simplify it to a simpler array of strings. Here's an example of how this looks (reduced to two books for length):\n\nThe last bit was adding it to my Now page. I used a simple grid of image cover + titles:\n\nPardon the class names there - as I already had CSS for my films, I just re-used them as I was being lazy. Also note that sometimes a book will not have an image cover. On the web site, they use a few different images to handle this, but the API doesn't return that. I generated my own and put it up in my S3 bucket. If you don't feel like clicking over to my Now page, here's how it looks:\n\n\n\nIf you would like to see this code in context with the rest of the site, you can find my blog's repo here: https://github.com/cfjedimaster/raymondcamden2023. Let me know if you end up using their API!\n", "tags":[ "eleventy" ], "categories":[ "development", "jamstack" ] }, { "title": "Turning Recipe Data into an Astro Content Collection", "date":"Mon Jan 05 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1767636000, "url":"https://www.raymondcamden.com/2026/01/05/turning-recipe-data-into-an-astro-content-collection", "content":"As I continue to dig into, and learn, Astro, I thought I'd take a look at creating custom content collections. Content collections are pretty much exactly how they sound - collection of content items you can use within your Astro site. If you go through the excellent Astro tutorial you will find this discussed at the end in the final optional step step. Content collections aren't required - you can build dynamic sets of data just using file system operations (and that's how the tutorial has you build the blog) - but they make it easier (imo) to re-use content throughout the site.\nI encourage you to check out the docs, but generally content collections come down to three types:\n\nA glob pointing to a folder of Markdown, MDX, Markdoc, JSON, YAML, or TOML files.\nA pointer to one file that has multiple records of data (think big ass JSON file or CSV)\nAnything and everything else if you're willing to write code for a custom loader\n\nFor my demo today, I decided to revisit a post from 2022, "Use Your Saffron Recipes in the Jamstack".\nRecipes and Saffron\nFor many years, I made use of Saffron, an elegant web-site/mobile app for recipe management. It supports reading and parsing ugly recipe URLs (which I've covered on this blog quite a bit) as well as letting you manage recipes in different cookbooks. It is a damn good site, but I hit the limit of the free tier a few months back and as I don't really use the import feature much, switched to simply using OneNote instead. That being said, I absolutely think it's a cool site and worth the $$ if you want the additional storage above their free tier.\nOne more reason to like them is that you can, at any point, without wait, get an export of your data. This will give you a zip file of recipes in text file format which look like so:\nTitle: Soft and Chewy Chocolate Chipless Cookies\nDescription: \nSource: Sofi | Broma Bakery\nOriginal URL: https://bromabakery.com/chocolate-chipless-cookies/\nYield: 16,16 cookies\nPrep: 15 minutes\nCook: 11 minutes\nTotal: 1 hour\nCookbook: Deserts\nSection: Cookies\nImage: \nIngredients: \n\t3/4 cup unsalted butter\n\t1 cup brown sugar, packed\n\t1/4 cup granulated sugar\n\t1 egg + 1 egg yolk, room temperature\n\t1 tablespoon vanilla extract\n\t1 3/4 cup all purpose flour\n\t3/4 teaspoon baking soda\n\t1 teaspoon sea salt + more for sprinkling\nInstructions: \n\tBrown the butter over medium heat, stirring constantly until the butter begins to foam and turns a golden brown, emitting a nutty aroma. Make sure you only brown the butter lightly. When butter browns the liquid evaporates off which can dry out your dough. As soon as the butter starts to turn brown and smell nutty, take it off the heat to prevent any more liquid from escaping. Take butter off the heat and allow to cool.\n\tIn a large mixing bowl combine the cooled brown butter, brown sugar, and white sugar. Beat until mixed together. Add in the egg, egg yolk, and vanilla extract. Mix well.\n\tIn separate bowl mix together the flour, salt and baking soda. Mix half the dry ingredients into the wet until everything comes together. Slowly add in the remaining flour a little bit at a time, stopping if the dough starts to get too dry.\n\tRefrigerate the cookie dough for at least a half hour, or overnight.\n\tWhen you are ready to bake the cookies, preheat the oven to 350°F and line a cookie sheet with parchment paper. Use a 1 ounce cookie scoop to scoop the cookie dough out into balls, placing them 2 inches apart on the prepared sheet. Bake for 11 minutes*, or until the edges are just golden brown and the centers have puffed up but are still gooey.\n\tAllow to cool before eating!\n\nThe format follows a pattern of "Key: Value", but with multiple line items being tabbed over from the key defined on the previous line. Back in 2022 for my original post, I wrote a simple function that parsed this data into a basic JavaScript object. Here's the version I have now (slightly modified from the original):\n\nThe only real "fancy" part here is how I handle noting the multiline line data by looking for tab characters.\nCreating the Astro Content Collection\nTo create my Astro custom content collection, I started by defining src/content.config.ts. This file is where all collections are defined, in my case my demo only has the one:\n\nBasically - scan the folder of recipes (where I extracted the zip Saffron exported) and add the information to an array. Per the Astro docs, I ensured I defined an id and slug value to uniquely identify the data.\nUsing the Collection\nOnce defined, it's rather trivial to use the information. On my index page, I simply list out all of the recipes:\n\nAnd then defined a dynamic route for each recipe in src/pages/recipes/[id].astro:\n\nI used Google Gemini to help me define a simple layout and deployed it to Netlify here: https://astro-recipes-demo.netlify.app/. For the most part, it worked well, but one recipe, and it just so happens the first one, https://astro-recipes-demo.netlify.app/recipes/ban", "tags":[ "javascript", "astro" ], "categories":[ "development" ] }, { "title": "An Astro site for my CSS Snippets", "date":"Fri Jan 02 2026 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1767376800, "url":"https://www.raymondcamden.com/2026/01/02/an-astro-site-for-my-css-snippets", "content":"As I think I've mentioned a few times already, I'm learning Astro and attempting to build random stuff with it just as an excuse to help practice and learn. With that in mind, during the Christmas break and between marathon sessions of Baldur's Gate 3, I built a little site I thought I'd share here on the blog. To be clear, this is nothing special, and doesn't come close to using all of the possible Astro features of course, but it was a useful coding exercise for myself and fun to build.\nThe web platform as a whole has gotten dramatically better over the past decade, and CSS improvements are a big part of that. There is a huge amount of new CSS features I'm "kinda" aware of but don't really have much experience with. One of the things I do to help me in that regard is keep notes of CSS snippets I find myself using again and again so I don't have to Google for them. I use Microsoft OneNote to track these and just write it down in quick and dirty blocks of text like so:\nCenter vertically in div: \nalign-content: center \n \nCenter iFrame: \ndisplay:block;margin:auto \n\nCSS for Borders: \nfieldset { \n     border-style:solid; \n     border-width:thin; \n} \n\nTable CSS for borders: \ntable { \n border-collapse: collapse; \n border: 1px solid black; \n width: 100%; \n max-width: 500px; \n} \n\nth, td { \n border: 1px solid black; \n padding: 5px; \n} \n\nTwo Cols: \n.twocol { \n display: grid; \n grid-template-columns: 33% 66%; \n} \n\nThere isn't any additional information here as I know what I'm typically searching for and just do a quick copy, paste, and modify to suit whatever I'm building.\nI thought it might be interesting to take these tips and create a simple Astro site out of them. I'd use one Markdown source file per tip (which admittedly it perhaps overkill for some of these short snippets) and see if Astro could render the code and the output.\nIf you don't actually care about how I built it, you can go ahead and navigate to https://css-snippets.netlify.app/ and check it out. Here's a sample of one of the snippets:\n\n\n\nAlright, so here's how I built it.\nSource Markdown\nAs I mentioned, I wanted my content to be driven by simple Markdown files. For this, I made use of Astro's content collections feature. First, I created a directory for my snippets called... snippets. In there I placed one Markdown file per snippet. Each file has a title, a set of tags, and the CSS snippet along with HTML to demonstrate it. Here's one for zebra striping table rows:\n---\ntitle: Zebra stripe a table\ntags: ["tables"]\n---\n\n<style>\n/* just to make it easier to see */\ntable {\n width: 500px;\n}\n\ntbody tr {\n background-color: #0a5b20;\n}\n\ntbody tr:nth-child(even) {\n background-color: #000000; \n}\n</style>\n\n<table>\n <thead>\n <tr>\n <td>Name</td>\n <td>Age</td>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Luna</td>\n <td>13</td>\n </tr>\n <tr>\n <td>Elise</td>\n <td>15</td>\n </tr>\n <tr>\n <td>Pig</td>\n <td>10</td>\n </tr>\n <tr>\n <td>Zelda</td>\n <td>2</td>\n </tr>\n </tbody>\n</table>\n\nTo let Astro know about the collection, I then added content.config.ts to the root of my src file and defined how it should find those Markdown files:\n\nThis was enough to make it available to my home page.\nRendering Snippets\nFirst, I added a simple list to my home page. Right now this just lists everything, but I've only got a few snippets.\n\nI won't bother sharing the layout file, but will note I made use of a nice little CSS framework, Simple.css.\nNext, I added a template that would render one file per snippet. For this, I made an Astro file named src/pages/snippets/[id].astro. The [id] portion makes it dynamic. This page both handles the logic of "how do I know what routes to support" and "how do I render each one":\n\nOn top you can see where I get my collection and define the paths. I just use the Markdown's id value (which comes from the filename) and pass the content in as well. That's picked up in the template as snippet and then rendered both using Astro's native Code component for source code rendering and as raw HTML in a div.\nThe last part of the site is similar - handling tag pages - but the logic is a bit more complex. First, I added src/pages/tags/[id].astro. Here's how I handled the logic:\n\nBasically, loop over my content, get unique tags, and create an array of pages for each tag. You can see an example of this here: https://css-snippets.netlify.app/tags/tables/\nDeployment\nThe last step was deploying it, and here I had multiple options. I chose Netlify as I host most of my sites there. Webflow supports Astro apps as well, but they are tied to existing web sites, not really standalone. ", "tags":[ "javascript", "astro" ], "categories":[ "development" ] }, { "title": "year plus plus...", "date":"Mon Dec 29 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1767031200, "url":"https://www.raymondcamden.com/2025/12/29/year-plus-plus", "content":"Welcome to my yearly "roundup" where I look back at my wins, accomplishments, and just about everything I did over the past year. As I always say, I assume no one really cares about this, but I like to take stock and honestly just remind myself of what I actually did. The years go by faster the older I get, but I swear they also feel longer as well. Of course, this year has been incredibly tough and that could account for that as well. Honestly, I don't feel like rehashing the bad stuff. If you read this blog on the regular, yall already know what I went through, and as I'm ending the year on a high note, I'm going to focus on that. I love my new job, I'm relatively healthy (if a bit more fluffy than I was last year), and I've got a lot to look forward to!\nThis Blog\nIf you ever want to see how the blog is doing, stat wise, you can head over to my stats page and check it out yourself. This post will be number 146 for the year, slightly beating my count for last year. Of course, quality means more than quantity, but I try to keep a pace of a post a week at minimum and I had no problem with that in 2025.\nI primarily use Netlify Analytics to check my traffic, check what content is popular, and so forth, but Netlify Analytics stops at 30 days of history. (As an aside, if anyone wants to donate to cover Plausible or Fathom Analytics, just reach out.) I also use goatcounter.com and according to it, my top ten page views for the past year only had one article from 2025 in the top ten - Using AI in the Browser for Typo Rewriting. I'm fine with that. I've been blogging for a while so I always see a mix of old and new content in my stats. The top post overall last year was one on Leaflet: Custom Markers with Leaflet. I haven't used Leaflet in a while, but I still recommend it.\nPublic and Virtual Speaking\nWith being out of a job for most of the year, it made it difficult to attend, or even CFP, to conferences. I only had 7 presentations with only 3 in person. I'm ramping up my submissions for 2026 and Webflow is supportive of my efforts to help spread the love of the web platform as a whole, so hopefully I'll be on the road and on stage quite a bit more next year. Obviously, if you run or help organize a conference, reach out to me, I'd love to speak at it!\nFavorite Media\nIt's always difficult to figure out what my favorite movie, music, or game is, as usually the one I watched/played last is freshest in my memory. I started using Letterboxd last year to track movies which makes it easy to see what I watched over the past twelve months. There's a couple movies that really stand out, but the best has to be The Substance. I don't really enjoy gore, and this movie has quite a bit of body horror, but it's so freaking crazy, so well shot, it was easily the best movie I saw.\nIn music, I'm sure I encountered new artists, but I honestly can't remember one in particular that feels like an outstanding artist new to me. I will say I've been loving the mashups and remixes by matt_one on Youtube, enough to go through the trouble of ripping some to MP3 locally so I could play them offline. If you are into that kind of music, absolutely check him out. I'll warn you that the videos are typically AI slop, so I rarely watch them and instead just listen to the music.\nGame wise, I ended last year discovering, and loving, Powerwash Simulator, and with the release of the second one last month, it was easily my favorite game. There's something incredibly relaxing about a game you can't lose. I played it much too quickly but there will be plenty of DLC and I plan on getting every single one they release.\n2026\nI'm going to make this part easy - I've got no plans for 2026. Don't get me wrong, there are absolutely things I want to get done, but after this year, I'm not writing anything down. Whatever I accomplish, great, whatever I don't get around to, also great. Heck, if this time next year I've still got a job, I can still walk upright and my wife and kids are happy, then nothing else matters.\nThat's it - happy new years!\nPhoto by Towfiqu barbhuiya on Unsplash\n", "tags":[ ], "categories":[ "misc" ] }, { "title": "My Tech Stack (2025)", "date":"Mon Dec 22 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1766426400, "url":"https://www.raymondcamden.com/2025/12/22/my-tech-stack-2025", "content":"Every now and then I like to share my current tech stack, not that I think I'm doing anything special in my day to day, but I know I enjoy reading about other devs and their stacks as it's a great way to get introduced to tools I may want to adopt myself. As far as I can tell, the last time I did this was back in 2020 and things have certainly changed for me. So without further ado, here's what I'm using.\nOperating System - OSX\nI'm back to Mac. To be honest, this was part frustration and part practicality. I've been on Windows for maybe 7 or 8 years now and generally happy with it. I usually did most of my work in WSL (Ubuntu) and as most of what I did was web or API based, the OS didn't really matter.\nAbout two months or so ago, my new personal laptop, a pretty cool Predator one with light up keys (yes, that's not helpful for development but it made me happy) started to crap the bed really, really badly. No amount of tweaks would help. Acer was willing to let me ship it back but as I was doing contracting, I'd be without any hardware to actually do work. I was frustrated so I returned it, got a decent Macbook Pro, and figured it was time to switch back for a while.\nHonestly, the only issue I ran into was muscle memory for key combos. Outside of that, it just works, and I've got greater confidence on the hardware.\nWriting Code\nI write code primarily in three tools:\n\nVisual Studio Code is my primary editor for most "real" work. In the past I've shared my extensions but I don't think I'm doing anything special or noteworthy there. I've got extensions for Python, BoxLang, Astro, the stuff I'm learning, and one specifically for sharing blog posts via PDF - Mardkwon PDF. I use one of the random dark themes and I couldn't tell you which one - just the default I believe.\nRunJS - RunJS is a very handy app (Windows or Mac) that lets you quickly run and test JavaScript code. Yes, you can write in your browser console, but I find it difficult to organize anything more than a line or two there. Yes, you can make a 'scratch' file locally and run that, but RunJS just does all of this simpler and easier to handle. Oh, it also lets you quickly install npm packages as well which is handy. RunJS is not free, but is well worth your money imo!\nCodePen - CodePen is my primary place for web demos that can be run well in a simple window. That's kinda vague but what I mean is, I'm not typically building PWAs/SPAs in CodePen, but rather using it to demonstrate a particular web-based API/feature.\n\nCode\nAs for the code I write, it's basically web platform stuff (HTML, JavaScript, and CSS) and Python (nearly all of my AI stuff). This year I started playing with BoxLang, a dynamic JVM-based language from the fine folks at Ortus. For a new language, it's moving really fast and adding a lot of impressive features quickly. While I don't do much ColdFusion anymore, I'll still dabble from time to time. I even built a fun little submission for Adobe's Hackathon earlier this year. I lost, but it was fun to build. :)\nBrowsers\nFor years I used Microsoft Edge but decided to switch back to Chrome. There wasn't any particular reason for this, Edge wasn't acting up or anything, I just switched. It could be based on how much AI in Chrome work I was doing, but for whatever reason, I'm on Chrome again. I use multiple profiles - one for my personal use, one for work, and one for presentations.\nI also use Firefox for my social media usage and Reddit. I like having it in a completely separate app which helps me not use social media too much. Speaking of, you can find me on Mastadon (https://mastodon.social/@raymondcamden) and Bluesky (https://bsky.app/profile/raymondcamden.com). I've gone back and forth between which I prefer. I'm leaning more towards Bluesky as it feels more active, but generally when I post something, I'll post to both. I use openvibe typically when I do that.\nFront-End / Back-End\nVanilla JavaScript FTW! I'll still go to Alpine.js for more complex needs, but I don't use Vue anymore and I definitely don't use React if I can help it. (Although I may end up doing a bit for work.)\nOn the back end, I'm still rocking, and loving, Eleventy, but have been learning Astro lately (again, for work) and really dig it. I'll probably do most of my blog posts on that at work, but some may show up here as well.\nEverything Else\nAnd here's a small list of other tools I use:\n\nMicrosoft To Do - this is still my primary way of managing lists of things I need to - well - manage as well as my place to store ideas for writing.\nMicrosoft OneNote - I got off the Evernote platform a few years back and honestly, it's been a struggle. I was looking for a solution that worked for me and my wife, that was crucial, as we both needed to share information. OneNote is far from perfect, but works well enough. I may still migrate my own stuff off there in the future.\nFor my mobile phone, I'm using a Samsung S24 Ultra.\nLastly, I host on Netlify, who graciously hos", "tags":[ ], "categories":[ "development" ] }, { "title": "The Twelve (Generative) Days of Christmas - 2025 Edition", "date":"Fri Dec 19 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1766167200, "url":"https://www.raymondcamden.com/2025/12/19/the-twelve-generative-days-of-christmas-2025-edition", "content":"For the past two years I've done a fun little expirement - using GenAI to create illustrations from the Twelve Days of Christmas song. You can check out the 2023 and 2024 editions to see how things have progressed. In previous years, I mostly just kept things simple - passing only the day's gift as the prompt:\npartridge in a pear tree\ntwo turtle doves\nthree French hens\nfour calling birds\nfive golden rings\nsix geese a-laying\nseven swans a-swimming\neight maids a-milking\nnine ladies dancing\nten lords a-leaping\neleven pipers piping\ntwelve drummers drumming\n\nWhich is absolutely not ideal at all, but part of the fun was seeing how the various tools handled it. This year I decided to give the engines a bit of direction by prefixing it with a request to base the results on the song, for example:\nYou will generate an image based on one day from the Twelve Days of Christmas song: twelve drummers drumming\n\nIn general, I did not change any settings, so for example, Meta produced portrait sized images and I'm sure I could have tweaked it, but I left it as is. In cases where the engine output multiple results, I used my best judgement and picked what I thought was the best.\nLast year, nearly every service did not like "eight maids a-milking". None of the services blocked it this year.\nOnce again, numbers are a problem. I'd ask for X of Y and generally get X+1, X-1, or not even close. The services did better, but still struggled.\nThis year I tested with:\n\nBing - Bing did really good in the past and for some reason did horrible this year. Like, shockingly bad. It reminded me of the first results from GenAI a few years back. I'm not sure what went wrong here but they just dropped the ball.\nMeta - Meta made some stunningly beautiful images but also universally seemed to ignore my prompt requesting it be Christmas based. I tried tweaking it a bit (removing the colon and wrapping the day portion in a quote) but it didn't help.\nNano Banana Pro - this was the clear winner in my opinion. I used the Pro version which is not free, so that's something to consider when comparing results. I didn't actually pay though, I get credits as a Google Developer Expert.\nNo Adobe Firefly this year. You get 10 generations for free, but I need 12. Oh well.\n\nFor each image, you can click for the larger, original image.\n\n\nBing\n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \nMeta\nPay special attention to number 3, I loved that. And for option 4, there were a few options more "Christmas-like", still not great, but I love corvids.\n \n\n\n \n\n \n\n\n \n\n \n\n\n \n\n \n\n\n \n\n \n\n\n \n\n \n\n\n \n\n \n\n\n \n\n \n\n\n \n\n \n\n\n \n\n \n\n\n \n\n \n\n\n \n\n \n\n\n \n\nNano Banana Pro (Gemini)\n \n\n\n \n\n \n\n\n \n\n \n\n\n \n\n \n\n\n \n\n \n\n\n \n\n \n\n\n \n\n \n\n\n \n\n \n\n\n \n\n \n\n\n \n\n \n\n\n \n\n \n\n\n \n\n \n\n\n \n\nHeader Photo by Chad Madden on Unsplash\n", "tags":[ "generative ai" ], "categories":[ "misc" ] }, { "title": "Using Chrome AI for Color Suggestions", "date":"Thu Dec 18 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1766080800, "url":"https://www.raymondcamden.com/2025/12/18/using-chrome-ai-for-color-suggestions", "content":"Today's blog post came to me on the way to dropping of my kids at school and made complete sense to me, but I've also got the flu and am heavily medicated, so take that for what you will. The idea was simple, given a description of something in the real world, could I use AI to generate RGB colors that would represent that abstract idea. I thought this could be a good use of Chrome's built-in AI model and decided to whip up a quick demo.\nThe front end is pretty simple, just a form for you to enter your description and a place for the results:\n\nThe JavaScript is where the magic lies of course. I'll skip over the DOM manipulation stuff and focus on the parts specific to Chrome's AI implementation. First, I created a schema to constrain my results:\n\nEssentially I wanted the model to explain it's results at a high level, and then just return a list of colors.\nNext, here's how I create my session from the model - the important bit being the system prompt:\n\nAnd the last bit is just taking the user's prompt, running it, and displaying the results:\n\nI'm going to embed the demo below, but as the Prompt API is still behind a flag, here's some screenshots:\n\n\n\nBonus points if you identify this prompt:\n\n\n\nYou can see the full code, and play with it yourself (again, if you enable that flag in Chrome), below:\n\n See the Pen \n Description to Color by Raymond Camden (@cfjedimaster)\n on CodePen.\n \n \n\nHeader photo by Mika Baumeister on Unsplash\n", "tags":[ "javascript", "generative ai" ], "categories":[ "development" ] }, { "title": "Links For You (12/14/25)", "date":"Sun Dec 14 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1765735200, "url":"https://www.raymondcamden.com/2025/12/14/links-for-you-121425", "content":"I cannot stress how much happier weekends are when you're not looking for a job. I used to dread the weekends. No one was posting jobs, no one was responding to applications (usually), and it just made me anxious. Now - I'm enjoying the hell out of the weekend, and looking forward to Monday as my job continues to be fun as hell. Thing are good - and I'm doing my best not to be nervous/anxious about that. ;) Here's some links for your Sunday enjoyment.\nWest of House\nFor us old-timers, Infocom is fondly remembered as one of the great companies of early computing gaming history. Their text-based games were surprisingly deep and thoughtful, and fun to own as they always had fun accessories in the box. (Remember physical games?) A few weeks ago, Microsoft announced the open source release of Zork 1, Zork 2, and Zork 3. You can peruse the code and even play the games if you want.\nAs an aside, my personal favorite Infocom game was A Mind Forever Voyaging, something I'd love to see turned into a movie.\nSanitized HTML with setHTML\nNext up is an article on something I wanted to look at over a year or so ago, and I'm glad I didn't as the spec changed a bit. Ollie Williams had written up an article looking at the Sanitizer API as a method to safely inject dynamic HTML into the DOM: setHTML(), Trusted Types and the Sanitizer API. The setHTML method does multiple things, including filtering out inline event handlers and certain tags. Read his post for more information.\nSize of Life\nLast up is an incredibly beautiful web site demonstrating the relative sizes of living organisms on Earth, Size of Life. Not only is this informative, it's also truly gorgeous and a great reminder that you can use the web for art and science at the same time.\nJust For Fun\nLast up is a mashup with Cookin Soul (who I had never heard of) and MF DOOM (who I only discovered about a year ago). I did listen to it and don't remember, but I'd probably assume it's NSFW in the office so wear headphnes. Either way, it's a great mix and great for the holidays.\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "My Last Spotify Demo (this time I mean it - honest)", "date":"Wed Dec 10 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1765389600, "url":"https://www.raymondcamden.com/2025/12/10/my-last-spotify-demo-this-time-i-mean-it-honest", "content":"Earlier this month, I blogged about building my own Spotify Unwrapped. I did this by requesting a data export from Spotify and playing around with the data in Python and Astro. I built a simple, and probably bad, Astro site to view my stats. When I built it, I had an idea for a slight tweak to make it a bit better, but one that would require API usage. I stand by what I said about not wanting to use the API anymore (feel free to ask why in the comments), but I couldn't resist tinkering one more time. Here's what I did.\nUsing Python to Enhance Artist Info\nIn the output from Spotify's export, you get a detailed listing of the tracks you've listened to. As a reminder, here's an example:\n\nWhile this gives a good amount of information, there isn't much about the artist outside of their name. One thing in particular I was interested in was the genres of the tracks I listened to. Genres are associated with artists, so I thought, I could use my exported data to get a list of artist names and then transform this into detailed artist info so I could get the genres. This involved a few steps:\n\nFor each track in my history, I have an artist name. I can turn this into a unique list of artists.\nTo get artist data, I need the ID, not the name of the artist. Spotify has a search API, but I wanted to use the batch APIs to get multiple artists at once to reduce the total number of API calls. The only way to get the artist ID is to get the track. So when I make my unique list of artists, I associate one track with them.\nGiven I now have a list of unique artists with one track associated to it, I can use the batch API call, Get Several Tracks, which will give me artist ID values.\nNow I can use Get Several Artists to get full artist records.\n\nAll of this is done in a Python file that stores results to a JSON file for caching. I decided to do 50 results at a time, and run it manually, as I figured it wouldn't take terribly long. My total number of unique artists was under 10000 and I thought, I'll just run it a few times by hand and eventually I'll cover all the artists from my export. Obviously that's a hack, but it's my hack so it's beautiful.\nWith that in mind, here's the script:\n\nThis seemed to work well, and generated a pretty huge artists.json file. Here's one example:\n\nNote that this includes images of the artists which would be cool to use as well, but all I cared about were the genres.\nUpdating my Astro App\nAs I mentioned in my last post, I wasn't terribly happy with how I built my Astro app, it felt like it could have been done much better, but I'm still very new to Astro so I'm giving myself a break from stressing over it. If you remember, I had an Astro page that read my Spotify export and served it as data.json, which was then used by client-side JavaScript to render my stats.\nI followed the same technique for my artists information. I copied over my JSON from my Python directory and placed it in my app's data folder. Because of this, I made a slight tweak to the glob in data.json.js:\n\nAnd then built artists.json.js pretty simply:\n\nAlright, this just left using the data in my front end. I added a new div to my HTML to handle the genre report:\n\nI then updated my initial fetches to get both files, and combine:\n\nLastly, I added code to render the genres, using a new function to return a sorted genre list:\n\nAnd the result is pretty much what I expected - when looking at my entire history, it's really Enya-weighted:\n\n\n\nBut if I filter to this year, it's a bit more on target:\n\n\n\nAnyway, that's it, I'm done with Spotify demos, although definitely not done with Astro. If you want to look at the source, you can peruse it here: https://github.com/cfjedimaster/astro-tests/tree/main/spotifydata2\n", "tags":[ "python", "javascript", "astro" ], "categories":[ "development" ] }, { "title": "Generating Relevant Random JSON with Chrome AI", "date":"Sun Dec 07 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1765130400, "url":"https://www.raymondcamden.com/2025/12/07/generating-relevant-random-json-with-chrome-ai", "content":"A few weeks ago I blogged a demo where I used Chrome's on-device AI feature to parse a "generic template language" and return random strings. If you're so inclined (and of course you are), you can read that post here: "Creating a Generic Generative Language with Chrome AI". The idea was to give the AI model a template string that described what was random, and how it was random (this is a name, this is a number, this is a color, etc) and have the model fill in the blanks with appropriate values.\nAt work, I've been digging into our platform and trying to learn as much as possible. One of the cooler features of Webflow is the CMS. You define a collection (type of content) which has a name and a set of fields. Each field has properties that define it. As an example, here's my Cat collection:\n\n\n\nMake note of the custom fields there. Along with and slug, and some metadata fields, they make up a definition of "Cat" that I can use within my site. One of the cooler features of this part of the product is that when you first define the collection, it offers to make some random content for you, and when it does, it does it "appropriately". By that I mean it's not just lorem ipsum, but relevant values. In particular, "Breed" had multiple different real cat breeds, and the names were on target as well.\nI found this darn handy and it got me thinking recently how I could recreate it with Chrome AI. Specifically:\n\nGiven a name that describes the content\nGiven a basic JSON shape\nGenerate a random value with sensible data\n\nI was able to get it working - mostly - and here's the result.\nVersion One\nFor my first version, I built a simple form that asked for two things - the name of the content your JSON was describing, and a JSON packet that described the shape of the content. I also pre-loaded some content so I'd have less to type:\n\nOut of the box, my demo says it's describing a cat with properties for name, age, gender, and breed. Now, let's look at the JavaScript. I'm going to skip over some of the basic DOM manipulation stuff and instead focus ont he AI related code.\nWith that in mind, here's how I setup the session:\n\nI'm rather proud of that system prompt. I usually don't do a good job there but this is pretty clear I think. Now, when the user submits the form, this is run:\n\nPretty simple, right? So how does it work? Using the out of the box defaults I used in the form, I get:\n\n\n\nThat's pretty good! But as you'll note in the JavaScript above, I'm expecting Markdown back. In fact, this is actually what I got:\n\nWith this in mind, I started on a second version to try to get just the JSON back. You can play with the full demo of the first version below:\n\n See the Pen \n Chrome AI to JSON by Raymond Camden (@cfjedimaster)\n on CodePen.\n \n \nVersion Two\nNormally when I want to have control over the generation of model output, I turn to structured output. You generate JSON schema that matches your desired output, pass it to the model, and then your result should match it exactly. The issue I had though was that my JSON itself was dynamic. I had no idea what was going to be passed, which means I couldn't determine what schema to use. Turns out - there's actually multiple libraries out there that will take sample data and attempt to turn it into a JSON schema.\nI came across schematized which does exactly that. Here's an example from their docs:\n\nWhich produces:\n\nThat seemed logical enough, so I gave it a try. I imported the library and built a schema from the form input:\n\nThis is then passed to the prompt call:\n\nAnd... it worked... kinda. But I noticed something odd with my results. Here's the result, again using my default JSON from the form:\n\nSee the issue? Each property ended up with a min and max length based on my input. Schematized supports passing in multiple examples to create better output, so it's not really the libraries fault, but these constraints were screwing up my output. It's kinda lame, but I went with this approach:\n\nNow when I run, I get almost perfect results:\n\n\n\nI say almost perfect because my age went from being really numeric to a string, but if you remember, this is how it looked in the input:\n"age":"number",\n\nThe quotes there around number, when sent to Schematized, made it think it should be a string, and to be honest, I don't blame it. I could absolutely do some magic on my input and look for "number" and change it, but, I figured that was enough for this simple experiment for now. As before, you can see the full code, and test (if you've enabled the right flags) below:\n\n See the Pen \n Chrome AI to JSON V2 by Raymond Camden (@cfjedimaster)\n on CodePen.\n \n \nCC0 licensed photo by Shinya B from the WordPress Photo Directory: https://wordpress.org/photos/photo/873640b0d0/\n", "tags":[ "javascript", "generative ai" ], "categories":[ "development" ] }, { "title": "Make Your Own Spotify Unwrapped", "date":"Thu Dec 04 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1764871200, "url":"https://www.raymondcamden.com/2025/12/04/make-your-own-spotify-unwrapped", "content":"Tis the season - the Spotify Unwrapped season. If you aren't aware, Spotify creates a yearly "recap" of your listening habits and packages it up in a nice and fun slide show/animated doodad only available on your device. It's a cute thing and as someone who both loves music and stats, I look forward to it. If your curious, here's a part of mine:\n\n\n\nEarlier this week I knew Spotify Unwrapped was as eminent as Mariah Carey and I pondered building my own report. Of course, a few months ago I swore off building anything Spotify related again. But given that Spotify lets you export your data, in theory, I could build something without using APIs, right?\nGetting the Data\nThe first step was to get my data. This can be done via Spotify's private page. On there you can request your data for the past year, or, your entire lifetime. They warn you that it may take up to 30 days to generate the extended history, but for me it only took one day. Take that with a grain of salt - your results may vary.\nOnce you get your report, it's a zip file that consists of a set of JSON files:\n\n\n\nYou get a readme that explains the structure, N json files for your audio history and one for video. Honestly I didn't know you could do video on Spotify, but I just ignored that.\nIf you open up one of the audio files, you'll see an array of track entries. Here's one from this year.\n\nYou get a timestamp, track information, as well as how long you listened to it.\nInitial Exploration\nI started off with Python. I wanted to scan the files, collect the data, and analyze it. So first, I grab the JSON files, read them in, and append the entries to one big uber array. (As a quick note, in my testing directory, I removed the JSON file related to video stats.)\n\nCool - now I start analyzing. First, I generate a report of my top artists. I also add the times together to see how long I listened to music:\n\nSong info was similar:\n\nAnd finally, I report on the total minutes:\n\nHere's my report:\nTotal records loaded: 128932\n\nThere are 9844 unique artists.\n\nArtist: Enya, Records: 14814\nArtist: Above & Beyond, Records: 3696\nArtist: Depeche Mode, Records: 2628\nArtist: London Grammar, Records: 2351\nArtist: The Cure, Records: 1558\nArtist: M83, Records: 834\nArtist: Ludwig van Beethoven, Records: 724\nArtist: Nine Inch Nails, Records: 714\nArtist: Still Corners, Records: 697\nArtist: Cocteau Twins, Records: 689\nArtist: The xx, Records: 675\nArtist: Agnes Obel, Records: 629\nArtist: The National, Records: 550\nArtist: Duran Duran, Records: 536\nArtist: The Sundays, Records: 523\nArtist: The Smiths, Records: 520\nArtist: The Decemberists, Records: 514\nArtist: Johann Sebastian Bach, Records: 510\nArtist: Howard Shore, Records: 495\nArtist: Beach House, Records: 488\n\nSong: A Day Without Rain, by Enya Records: 414\nSong: Only Time, by Enya Records: 406\nSong: Caribbean Blue, by Enya Records: 400\nSong: Aníron, by Enya Records: 397\nSong: The Humming, by Enya Records: 395\nSong: Wild Child, by Enya Records: 385\nSong: May It Be, by Enya Records: 384\nSong: Lothlórien, by Enya Records: 379\nSong: The Council of Elrond (feat. "Aniron") [Theme for Aragorn and Arwen], by Howard Shore Records: 372\nSong: So I Could Find My Way, by Enya Records: 363\nSong: Pale Grass Blue, by Enya Records: 362\nSong: One by One, by Enya Records: 362\nSong: Fallen Embers, by Enya Records: 361\nSong: Book of Days, by Enya Records: 358\nSong: Solace, by Croquet Club Records: 354\nSong: Echoes in Rain, by Enya Records: 353\nSong: Amarantine, by Enya Records: 352\nSong: Flora's Secret, by Enya Records: 345\nSong: Remember Your Smile, by Enya Records: 339\nSong: Dark Sky Island, by Enya Records: 337\n\nTotal minutes listened: 469014.35 minutes\n\nIf you're curious, that total time in minutes is near eight thousand hours and over three hundred and twenty-five days. That's a lot of music!\nThe Enya Problem\nI love Enya. I have for a very long time. I remember picking up "The Celts" in... Walmart I think, when I was probably 12 or so. She's also the richest female musical artist in England and Ireland.\n\n\n\nHer music is incredibly soothing at times, and as someone who has a crap-ton of anxiety on a good day, I need relaxation music. For about two years or so I'd also play Enya when going to bed, which means that for 6 hours, I had Enya playing each and every night. Therefore, she kinda stands out in my stats. Every single one of my top tracks is from her. It's accurate. That being said, I was tempted to write a filter just for her, but decided against it to keep it simple.\nBuilding the Web App\nI decided to build a simple web app for this data and for that, I wanted to use Astro. At work, we support Astro in multiple ways so I've been looking for excuses to build out Astro apps as way to get more familiar with the framework. Before I continue, I will say that at the end, I feel like Astro was overkill for what I did, and I'll talk about how I'd build this "for real" later on, but I didn't mind using ", "tags":[ "python", "javascript", "astro" ], "categories":[ "development" ] }, { "title": "Links For You (11/30/25)", "date":"Sun Nov 30 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1764525600, "url":"https://www.raymondcamden.com/2025/11/30/links-for-you-113025", "content":"Once again I'm here, sharing links, and apologizing for the lack of content this month, although I did publish seven times, and I think I had some good demos, so maybe I should just stop worrying about it? ;) As I've hinted recently, I am no longer on the job market! I haven't said where yet as I wanted to get a few weeks under my belt to ensure things were going to be ok. I'm not going to lie, my last role (and quick lay off) really messed me up a bit. That being said, I feel relatively safe now, and really like what both my role and my coworkers, so I figure it's time to share!\nMy new role is a Senior Developer Evangelist for Webflow. Webflow has a web-based designer for creating and managing web sites, and while the primary tool is focused on designers and business-type users, the platform has multiple different developer-centric endpoints. As someone who has been working on the web for an incredibly long time, I look at visual/web-based tools like this with a bit of skepticism. They've come a long way since the days of Dreamweaver 1.0, but I still worry about not having direct access to code. One of the really cool things about Webflow is all the ways a developer can extend and work with the platform itself. I feel like our Designer can cover 90% of most people's needs, and the extensions available to coders easily cover the rest. I'm also beyond excited to be working on a web-platform centric product. I love APIs, but I haven't had an opportunity to work directly with web sites like this for a while. And with that, on with the links!\nBuild a Router\nFirst up is a cool post on jshof.dev where he makes use of URLPattern (read more about that here on MDN) to create a web component based router. It's a great little experiment and another example of how useful web components are in the platform.\nHelping Seniors with AI\nNext is a book by an old friend of mine, "How Seniors Learn AI" (as an FYI, that's an affiliate link). The author, Dan Wilson, is someone I've known for probably two decades now. He's a darn good educator and a darn good person as well. This book is meant to help introduce AI to senior citizens and provide useful guides to help them make use of it in their day to day lives. My assumption is that most of my readers don't need this book, but I'd bet you know someone who does.\nAdvent of Code 2025\nIt's that time of year - my favorite time of year - Advent of Code is back! I've shared this site now for probably ten years, but for those of you who aren't aware, the Advent of Code is a yearly coding challenge that presents two holiday-themed puzzles per day. Usually the second challenge is a slight variation of the first so it doesn't take too much time. Difficulty ranges from pretty easy to more complex as the days go on, and usually I get about ten days done before I tap out, but it's always fun to take a stab at it. Oh... and I just saw on the site they've gone from 24 days of challenges to 12, so maybe this year I'll actually finish.\nJust For Fun\nYall know I'm a big fan of covers, so how about a rather conventional cover from a rather unconventional band, Ninja Sex Party:\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Using Google Static Maps in Your Print View", "date":"Thu Nov 20 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1763661600, "url":"https://www.raymondcamden.com/2025/11/20/using-google-static-maps-in-your-print-view", "content":"This is just a quick thought experiment really. Yesterday I was working on a demo that made use of Google's Static Map API. I've blogged about this API for probably over a decade now and I rarely see people use it, but it's a lightweight, image only "API" for when you need simple map images without interactivity. Honestly, I see a lot of sites using the full JavaScript maps library when a simpler image would be fine. It's also an excellent way to use maps in presentations or emails as well. It occurred to me that the static map image could be a great way use of print media queries in CSS and I thought I'd build a quick demo to show this.\nMedia queries and print support has been around for years, but I didn't play with it myself till earlier this year when I blogged about cleaning up my print view for this site. (Although I probably need to revisit that as I've changed my design since then.)\nI was curious to see if a print media query could be used to "swap out" a JavaScript map for a static one. I began with an incredibly simple map demo:\n\nThis is about as simple as you can get. If you're incredibly bored and want to see this running, you can do so here: https://cfjedimaster.github.io/webdemos/printmap/index.html\nOk, so how well does this print? I did a quick ctrl+p, saved the PDF, and this is what I got:\n\nIt's actually really, really good. My only complaint is the zoom icon in the upper right corner. Also, the "Report a map error" won't actually be a link.\nSo that works, but can we make it better? I began by adding in a static version of my map. (Note that the static map API does support markers and quite a few parameters, so you can do a lot more than what I'm showing here.)\n\nNote I added a class to it. I then used this CSS:\n\nBasically, hide the static map normally, and when printing, hide the map div that includes the JavaScript map and show the static version. And here's the result:\n\nSlightly better! ;) Worth the effort? Probably. I will note that this does add additional load to the page as the static image is loaded but hidden. You can check for a matched media query in JavaScript using matchMedia, so in theory, you could delay adding the image to the DOM that way, but that feels a bit overkill.\nYou can hit this version here if you want to see, and the source for both may be found here: https://github.com/cfjedimaster/webdemos/tree/master/printmap\nPhoto by Matijn Palings on Unsplash\n", "tags":[ "javascript" ], "categories":[ "development" ] }, { "title": "Gemini File Search and File Stores for Easy RAG", "date":"Mon Nov 17 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1763402400, "url":"https://www.raymondcamden.com/2025/11/17/gemini-file-search-file-stores-for-easy-rag", "content":"I am really excited about this post as it's one of the most powerful changes I've seen to Google's Gemini APIs in quite some time. For a while now it's been really easy to perform searches against a document, or a group of documents. You would upload the file (or files), ask your questions, and that was all you needed.\nHowever, the files you uploaded were only there temporarily. This was fine for processes like summarization or categorization where you could automate the process and be done with it. This was also fine for basic chat uses. I blogged an example of this last month: "Building a Document Q&A System with Google Gemini".\nThe new features I'm talking about today change all of that. You can now create permanent collections of files for introspection over time, creating a real RAG (retrieval augmented generation) system in a few minutes. Well, a simple one at least. Let's see how.\nFile Stores\nGemini's new RAG support is centered around File Store. A File Store is simply a collection of documents. The APIs provide full control over them by letting you create, read, update, and delete. Files can be uploaded directly to a store, or you can use the "old" API for uploading files and then import it into a store. Within an existing store you can also get a list of files and add or delete. I don't believe you can "edit" a file and would need to delete and re-upload instead, but overall, you can pretty much do anything here - and do it rather simply. I'll be showing code for this in a minute.\nThat's the good part. The bad part? Well, it's not really bad per se, but the actual how of what you do with them is going to be really different based on every different application you build. I can see many different scenarios:\n\nYour developer could build a script that simply checks to see if a store has been created, and if not, makes it. It then reads a folder and uploads each file. This could be run "by hand" once at the beginning of a project.\nYou could automate that process and on a schedule, see if new files need to be added, or removed from the store.\nYou could build a web interface that lets your business users work with one file store, adding and removing files as they see fit.\nYou could build a web interface that lets you build multiple file stores and work with them.\n\nThat's just a few examples, but you get the idea. The actual API is going to be trivial, minutes of work probably. Actually figuring out what makes sense for your application/organization will probably take much more time.\nOk, code time. For my demo, I'm going to search against a collection of Shakespeare's works. (Initially I had a copy of everything he wrote, but I removed a bunch to help speed up testing.) My code is going to do the following:\n\nAsk Gemini for a list of my file stores.\nSee if one exists with a particular name.\nIf not, make it\nThen iterate over every file and upload it.\n\nI started off my template with some imports, and a constant value for my store name and source directory:\n\nNext, I see if the store already exists.\n\nNote that I print out how many docs are in the store. I don't really need that, but it's a good sanity check. Now I create the store:\n\nThe name value I print here is a unique ID. I'll copy that down and use it later. Now I scan the folder and ensure I've got some PDFs:\n\nAnd finally, I upload each one. For this, the documentation was super useful. Document processing is async, so for each upload I wait until it's done. This is also I do something import - add metadata.\nIn general, you will probably ask questions about your file store as a whole, but what if you want to work with a specific document, or set of documents? For example, an e-commerce store that sells products may want to put their manuals online in one store, and use metadata to separate products into categories, or perhaps price ranges. You can use any logic you want here. In my case, I want to allow a search against a specific piece of work so I'm going to store the filename in metadata. Another option would be to use a PDF parsing library to get the PDF's document title instead, but the filename is enough for now.\n\nAnd that's it - the last thing I do is simply output a completed message:\n\nI'll share a link to all the code at the end so you can grab the entire file if you want. In my testing, each upload took maybe 10 or so seconds, which isn't bad I think, but keep that in mind if you have hundreds or thousands of documents.\nWorking with the Store\nAlright, at this point, I've got a store. I copied out the name so I could use it again. To work with the store, all I need to do then is use the FileSearch tool in my generate_content call. It is ridiculously simple:\n\nHere's the result, and keep in mind this is about half of Shakespeare's works.\nThe works presented cover a range of themes, often with a comedic and \nromantic focus.\n\nA prominent theme is **mistaken identity**, particularly seen in \n"The Comed", "tags":[ "generative ai", "python" ], "categories":[ "development" ] }, { "title": "Links For You (11/16/25)", "date":"Sun Nov 16 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1763316000, "url":"https://www.raymondcamden.com/2025/11/16/links-for-you-111625", "content":"Good morning, programs. I'm sorry for the light posting the last few weeks, but, it's all for a good reason. Last week was my first week at my new job, which means all of my anxiety and fear are gone. Ok, maybe not, but, I'm absolutely delighted to be off the market again. I haven't blogged about the new job yet (or even gotten around to updating LinekdIn), but I'll do so soon. (My job isn't top secret or anything, I'm just waiting a bit.) Ok, let's get to the links!\nA Conditional Form Field Web Component\nI love web components, and I especially love really practical examples like this conditional form field component by Aaron Gustafson. As you can probably guess, it allows conditionally showing and hiding form fields based on other fields on the form. Here's an example from his post that demonstrates that I mean:\n\nBoth the label and field will only show up when the form field contact_method is set to "phone". In that example only one field is checked, but your logic can check against multiple as well.\nWeb MIDI with Katie Fenn\nThis is from back in May, but this presentation by Katie Fenn covers the Web MIDI spec, and of course, goes into MIDI itself. Best of all, it features music by Daft Punk, not something you see often with web platform talks.\n\n \n Play Video\n \n\n\n\n\nThe Origin Story of JavaScript\nFinally, another video, but one that's fun as hell to watch. Annie Sexton gives an entertaining look at how our favorite language (ok, maybe that's a bit controversial) language came to be:\n\n \n Play Video\n \n\n\n\n\nJust For Fun\nOk, so I don't usually like so many of my links to be videos, but as yall know, I like to end these posts with a music video typically. This track is absolutely not new, but is one of the most happy songs I've ever heard.\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Checking for Spam Content with Chrome AI", "date":"Fri Nov 07 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1762538400, "url":"https://www.raymondcamden.com/2025/11/07/checking-for-spam-content-with-chrome-ai", "content":"Earlier this week I mentioned I'm looking at my previous server-based generative AI demos and seeing which could possibly make sense using on-device AI with Chrome's AI support. I remembered a demo from last year where I tested spam detection using Google Gemini. That demo had worked out rather well and so I thought I'd try it out in Chrome. (Note the update towards the bottom!)\nOk, but why?\nSpam detection is important, and a server-based solution could have many users, especially in sites that make use of a lot of user generated content. But what would be the point doing this in the browser? Consider the fact that many of the Chrome AI APIs help with writing, I think such a solution could be useful in helping flag content that may be considered spam by others. So for example, your web-based CMS system may let you craft email content, and being able to see in real-time if the content would be diverted to someone's spam folder could be incredibly useful.\nThe Code\nTo build my spam checking tool, I relied on the following features:\n\nThe Prompt API, which is the general purpose aspect of Chrome AI.\nA system prompt that guided the Prompt API to focus on the task of determining if the content would be considered spam.\nStructured output so I could properly display the results.\n\nHere's how I did this. The first two aspects are handled by the code that creates the session object:\n\nYou'll notice that I'm using the system prompt to both explain what I want and help shape the output. But to really specify how the output should be returned, you must make use of JSON schema. I created this schema for my demo:\n\nBasically, a top level spam true/false value and an array of reasons backing up why something was flagged a certain way.\nThe last aspect is the easiest - taking the user input and passing it to the model:\n\nAnd that's it. The rest of my demo is just DOM manipulation, and I'll include it below, but keep in mind that as of today, this feature (the Prompt API specifically) is behind a flag in Chrome. It's released for extensions, but not the main browser yet. With that in mind, here's a few samples:\nGiven:\nCAPITAL CREDIT ASSOCIATES\nThe Capital Recovery Division\nAttorney of Record: Stanley Woods\nEmail: attorney.stanley.woods@gmail.com\n\nCase Reference: CF-9814725D3\n\nSubject: Past Due Loan Amount – $1,825.60\n\nThis correspondence concerns the above case reference linked to your account with Capital Credit Associates. Despite prior efforts to connect with you by phone and mail, we have not received any acknowledgment or response. Accordingly, your file has been escalated to our Legal Resolution Department, which has now categorized your account as non-compliant and ready for formal litigation review.\n\nThe National Financial Compliance Office has reported the following statutory violations connected to your account activity:\n\nBreach of Federal Lending Guidelines\n\nMisuse of Negotiable Instruments\n\nUnauthorized Funds Withdrawal\n\nObtaining Credit Under False Pretenses\n\nI get:\nWas it spam? Yes\n\nReasons Given:\n\nAggressive tone and threat of litigation\nDemand for payment with vague details\nGeneric subject line (\nPast Due Loan Amount\nwithout specifying the lender directly)\nReference to escalation to Legal Resolution Department\nMention of statutory violations without specifics (creating fear)\nLack of specific details about the alleged debt\nGeneric email address (gmail.com)\nPressure tactics to elicit a quick response\n\nThat seems right on the money. Now if I try something more innocent:\nHi, I attended your presentation about cat developer relations, \nand I was wondering if a) I could get a copy of your slide deck\nand b) would you be open to giving the talk to our local cat \nuser group?\n\nThe result is:\nWas it spam? No\n\nReasons Given:\n\nRequest for information (slide deck)\nRequest to present at a user group (potentially legitimate outreach)\nNon-aggressive language\nNo attempt to solicit personal information\nClear and straightforward query\n\nAll in all, this seems to work rather well I think. If you want to give it a shot yourself, or just see the code, you can check out the embed below.\n\n See the Pen \n Spam Detection Test by Raymond Camden (@cfjedimaster)\n on CodePen.\n \n \nAn Update\nI posted this yesterday (Friday, November 7th), and my buddy Thomas Steiner noted a potential issue. After multiple calls using the same session, it's possible the model could get confused by the previous messages. To me, the operation was "one and done", but the session persists and I can absolutely see why he's right about the issue. Luckily, it took approximately 10 seconds to correct using his suggestion of just cloning the sesison. So I went from this:\n\nTo:\n\nThe clone method is just one of many you have available to provide more control, and stability, to your use of the model in the browser, so as always, check the docs for more information, and specifically, this one on session management written by Thomas.\nHere's the updated Co", "tags":[ "generative ai", "javascript" ], "categories":[ "development" ] }, { "title": "BoxLang's Improved PDF Handling", "date":"Wed Nov 05 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1762365600, "url":"https://www.raymondcamden.com/2025/11/05/boxlangs-improved-pdf-handling", "content":"I've blogged about PDF support in BoxLang previously, including a quick introduction and a more robust demo later. Basically, the free PDF module provides excellent PDF creation capabilities out of the box. But what about PDF manipulation?\nMy last two jobs involved PDF APIs, and while my next one most certainly does not (thank god), it's still a feature near and dear to my heart. The BoxLang folks have made a shockingly huge amount of updates over the past few months, more than I've had a chance to keep up with, but one in particular caught my eye and I thought I'd call it out - the new PDF+ module.\nBoxLang's commercial modules are part of the BoxLang+ plan. It's still open source, but includes additional features, support, and a set of premium modules. To be clear, everything done in these premium modules could be done by any BoxLang developer if you want, but obviously having a supported, tested, and already existing solution is compelling. The PDF+ module is a great example of this as it gives you both manipulation features but also form handling. Let me show you a simple example of this in action.\nGetting Started\nGetting this version of the module is slightly different from the 'free' tier. Instead of:\ninstall-bx-module bx-pdf\n\nYou would do:\ninstall-bx-module bx-plus,bx-pdf\n\nThat's it. There's additional work done once you have your license (see the Plus Core docs) but you can trial the functionality at this point.\nPDF Manipulation\nAs I mentioned, the premium version of the module provides both manipulation and form capabilities, but let's focus on manipulation. These features include:\n\nAdding attachments\nAdding a header of footer\nAdding and removing a watermark\nDeleting pages\nExporting and importing form data\nExtracting text and images\nGetting information about the document\nMerging PDFs\nModifying PDF protection\nCreating PDF thumbnails\n\nThis is a great set of features, and the only one I really think is missing is a split type feature.\nPrimarily you will use the bx:pdf component. In tag-land, here's a simple merge example from the docs:\n\nOk, how about a real example?\nPDF Workflow\nI built a simple workflow process that:\n\nScans a directory of PDFs\nFor each one, it creates a new version that's 4 pages, at most, long.\nSaves to a "samples" directory\nUses the thumbnail action to get a thumbnail of page one\nUses BoxLang's Image module to then resize it down to a smaller size.\n\nAll in all, the idea is to create a set of PDF samples that could be used on a web site. (Although PDFs smaller than 5 pages will be saved as is.) The thumbnails could be used when listing them out.\nHere's the entire script:\n\nSo from the top, I first set up a few variables I'll be using, namely the source and destinations.\nNext, I loop over them - and make note of true at the end - that makes this process multi-threaded.\nFor each PDF, I first figure out how big it is using getinfo, then delete everything from page 5 and on using deletepages, saving the result in a new folder.\nNext, I use the thumbnail action. This will save the image with a filename that includes _page_X.jpg as the filename, where X represents the page being generated. I'm only generating one, so I can look for that, read it in and scale it down.\nAnd that's it! The end result gives me a set of PDF samples and thumbs.\nIf you want to see the results, and the sample code, you can grab it here: https://github.com/ortus-boxlang/bx-demos/tree/master/misc/pdfplus\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Creating a Generic Generative Language with Chrome AI", "date":"Mon Nov 03 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1762192800, "url":"https://www.raymondcamden.com/2025/11/03/creating-a-generic-generative-language-with-chrome-ai", "content":"As I explore Chrome's on-device AI initiatives, one of the things I'm doing is looking at some of my older demos (kinda funny to think of 'old' GenAI demos) and seeing which may make sense in the browser versus API calls. Last July, I investigated creating a template language parser with Google Gemini. The idea was - take a string with tokens that defined a type of word and have Gemini replace it. So for example:\nMy name is {{ name }} and my favorite food is {{ food }}.\n\nI asked Gemini to look for values inside brackets, use that as the seed of a random word, and replace it. So for example:\nMy name is Frederic Dinglehooper the 3rd and my favorite food is sushi.\n\nI thought this would be a natural candidate for exploration on the client-side, so I took it for a whirl.\nAttempt One\nMy first attempt tried to recreate the Gemini demo with nearly the exact same code. So I started off defining a system instruction - this is the same from the previous demo with the addition of the second paragraph:\n\nI've got some code to handle basic DOM manipulation (on clicking a button, read the user's input, then do your magic), that then runs this function to do the actual transformation:\n\nThis is a fairly simple use of the Prompt API, so it should just work.\nAnd it did! I promise!\nAnd then... it just didn't. I don't know why. I tested it in the morning, and it seemed perfect, I tested it in the afternoon and it 100% failed, or mostly failed. Every now and then it would replace a token, but mostly, it just didn't. You can see this failed attempt below, but note that the Prompt API is still behind a flag on Chrome.\n\n See the Pen \n Generative Story Telling with Chrome AI by Raymond Camden (@cfjedimaster)\n on CodePen.\n \n \nAttempt Two\nSo - I did what I normally do when I see something weird like this - reach out for help - and my buddy Thomas Steiner, devrel at Google, had a simple suggestion. Use JavaScript to handle the tag parsing and then Chrome AI to handle the replacements. I figured I'd give that a short.\nI began with a function to find my tokens:\n\nNote that I return each match including the actual match, and the token with brackets. I return the index (where it was found) but I never used it.\nI then wrote a new utility function that literally just takes a word, the token, and generates the new word for it:\n\nNext, I wrote a function to handle clicks and run the entire process:\n\nI think the only real interesting part here is the caching aspect. As with the previous demo, I wanted the ability to reuse values in a string, so you could get a name, and then use it a second (or more) time. I have a simple lookup system for that in place.\nSo how does this run? Pretty good. Since most of you probably won't have the flag enabled, here are some inputs and outputs:\nINPUT:\nMy name is {{name:myname}} and my favorite color is {{ one of red or green }}. \nMy favorite season is {{ season }} and I enjoy {{ hobbie }}.\n\nMy name was {{ myname }}.\t\n\nOUTPUT:\nMy name is Alice and my favorite color is red. My favorite season is \nAutumn and I enjoy Reading. My name was Alice.\n\nAnd another:\nINPUT:\nA dragon once lived in {{ place }}, where she hoarded over a \ncollection of {{ plural items }} while feeling quite \n{{ sad emotion }}.\n\nOUTPUT:\nA dragon once lived in Paris, where she hoarded over a \ncollection of books while feeling quite melancholy.\n\nIf you want to give it a try, or just see the code, check it out below.\n\n See the Pen \n Test finding tokens by Raymond Camden (@cfjedimaster)\n on CodePen.\n \n \nPhoto by Nong on Unsplash\n", "tags":[ "generative ai", "javascript" ], "categories":[ "development" ] }, { "title": "Links For You (10/25/25)", "date":"Sat Oct 25 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1761415200, "url":"https://www.raymondcamden.com/2025/10/25/links-for-you-102525", "content":"Greetings, programs, and welcome to another links post. The weather is finally beginning to turn here which doesn't necessarily mean cold weather, but days in the low 80s, mid 70s, which is an absolute relief from summer. Just in time for Halloween as well. Last year we unfortunately got rained out - this year it looks to be clear, and I can't wait to walk with my kids (and yes, I'll be in full costume myself). Here are some links for your reading enjoyment. Stay safe out there.\nOn DevRel and the Unnatural Act\nUp first is a stellar post by Leon Adato, HOW TO DEVREL: The Most Un-Natural Act. In his post, he describes how he not only got people to stop by his company booth but to also partake in a challenge that involved setting up a game with monitoring. I can attest to this working because I actually saw this at a conference, was immediately drawn to it, and did the challenge.\nEleventy Performance Tips\nI haven't blogged about Eleventy in quite some time, mostly because it "just works" and continues to be awesome. Alex Russel is a recent (I believe) user of Eleventy and shared a bunch of cool tips for how to get the most performance out of it. As an FYI, I found out about this article thanks to the excellent 11tybundle.dev newsletter.\nAbort Your Lack of Knowledge about Abort\nFinally, an older post, but "Dont Sleep on AbortController" is the first blog post on AbortController that really clicked with me. This is a great overview by Artem and credit goes to Stefan Judis for sharing the post on Mastodon.\nJust For Fun\nLast but not least, I'm not sharing a music video for once, but rather a fascinating project called WindowSwap. WindowSwap shows random videos taken from windows around the world. I can't stop watching this.\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Adding Generative Summaries with Chrome AI", "date":"Fri Oct 24 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1761328800, "url":"https://www.raymondcamden.com/2025/10/24/adding-generative-summaries-with-chrome-ai", "content":"Earlier this year (sigh, when I had a job), I built a demo using Chrome's built-in AI support to do something I thought was really interesting - progressively enhance product reviews to make it easier to see which were trending negative versus positive. It was a great example (imo!) of how AI support could enhance the experience in supported browsers without impacting the experience for others. That demo was on my mind this week, and it occurred to me that it would also be a great place to add summarization.\nThe Summarizer API is now fully released, for Chrome that is, and does not need a flag enabled or anything like that. I've blogged about this API a few times already, most recently when I used it to summarize comic books. The docs do a great job covering the API, but essentially it works pretty much just like the other ones:\n\nYou first check to see if the API exists at all ('Summarizer' in window perhaps)\nYou then check if it's available, or needs to be downloaded\nYou create an instance of the summarizer, with options for the type and length of summary and more\nAnd then pass your input and get the summary.\n\nI thought this would be a great addition to my "product review" page from the earlier demo. As a reminder, I used Gemini to generate a JSON array of reviews for a cat carrier. Here's part of the data:\n\nOk, let's get to it.\nHTML/CSS Design Changes\nMy initial review page simply took the reviews and rendered them out as a bunch of divs. I added a block on top for my summary:\n\nAnd made it initially invisible:\n\nMy thinking here was two fold - if the feature was available, I'd reveal the div (which gives a slight vertical 'shift' I'm not a fan of) and reveals the button. To use this API, you do need to have some form of user interaction, so I've tied it to a button. Also, not everyone is a fan of generative AI so I don't want to force it on them. (Just look at poor Windows Notepad.)\nThe JavaScript\nI'll share the complete demo below, but let me focus on the important bits of code. First off, a simple feature detector:\n\nWhen my application starts up, if the feature detector returns a good result, I'm going to reveal that div and add an event handler:\n\nThe doSummary function is where the magic happens, but honestly, this too is fairly simple:\n\nI initialize the Summary object with all the defaults, but as I mentioned, you do have control over the style and length of summarization. It's totally possible that better choices can be made here. Once done, I parse the Markdown (which could be plain text instead if I wish) and add it to the DOM. I also go out of my way to mark it as AI generated so folks know for sure where it came from.\nGiven my sample data, this is the result I get:\n\nThe Cat Carrier Ultra 1000 receives mixed reviews, with many users praising its sturdiness, ventilation, and secure locking mechanisms, while others report issues with assembly, quality control, and durability.\nSome customers found the carrier to be a game changer for vet visits due to its comfort and safety features, while others experienced problems with broken parts, sharp edges, or flimsy components.\nThe carrier's weight and design were also points of contention, with some finding it cumbersome to carry and others wishing for additional features like storage pockets.\n\nFrom what I can tell, this is a real good summary of the results. I'd love to try it on a few hundred just to see how long it takes. Here's the complete demo below, and for once, a good portion of you may be able to try it:\n\n See the Pen \n Review Summary by Raymond Camden (@cfjedimaster)\n on CodePen.\n \n \nAs always, let me know what you think. Love it, hate it, concerned about the Saints ever having a winning record, leave a comment below!\nPhoto by Siarhei Palishchuk on Unsplash\n", "tags":[ "generative ai", "javascript" ], "categories":[ "development" ] }, { "title": "BoxLang Quick Tips - Better Web Debugging", "date":"Tue Oct 14 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1760464800, "url":"https://www.raymondcamden.com/2025/10/14/boxlang-quick-tips-better-web-debugging", "content":"Today's BoxLang Quick Tip is incredibly quick, but also, really darn useful and something I had wished I knew earlier. The BoxLang MiniServer is a lightweight web server that you can use to test your web applications. I say lightweight but it's gotten some really good improvements over the past few months, including flexible URL rewriting. Today I'm going to talk about something that's going to be really useful to those of you who, like me, make mistakes from time to time. As with most of my BoxLang Quick Tips, you can skip to the video version at the bottom of the post.\nLet's consider a BoxLang web application that consists of a grand total of one file:\n\nI've got a function definition on top, then some HTML that calls it and prints out the result. As you can see though, I screwed up the function name there so an error is going to be thrown. If I fire up BoxLang's MiniServer and run the file, I get:\n\n\n\nOk, that's fairly clear, and given that our entire application is about ten lines of code, not difficult to correct. But in a real-world application with many files and much more going on, it could be a bit more difficult to track down. The error message is pretty short and doesn't give us much to go on. In production, this is actually safer, as revealing too much information could give attackers information they need to attempt a hack on your application, but locally, it sure would be nice to have more information, right?\nTurns out, there's an incredibly easy way to do this. The BoxLang MiniServer takes multiple different arguments at the command line, one of which, --debug, will turn on detailed error information. The docs on this weren't quite clear on that previously, but when I discovered this, I added that information to the reference to make it clear. Here's what happens when you run the same file with that flag enabled:\n\n\n\nThat is incredibly more useful, right? To be honest, I can't see ever not using that flag when running MiniServer locally, so make it part of your default workflow.\nAs an aside, of course BoxLang has proper error handling semantics with try/catch and more, and in particular, for web applications, you have multiple error handling routines you can add to your application to have 100% control over what happens when an error is thrown.\nOr do like me - and just write perfect code. (Ahem.)\nAnyway, I hope this is useful, and you can check out the video version below:\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Upcoming Speaking Engagements, and Code Break", "date":"Mon Oct 13 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1760378400, "url":"https://www.raymondcamden.com/2025/10/13/upcoming-speaking-engagements-and-code-break", "content":"With full-time employment being a bit up in the air this year, I've not submitted to nearly as many conferences as I have in the past (but hey, my rejections are at an all-time low!), but I've actually got not one, but two upcoming talks this month.\nFirst up I'll be giving an introduction to BoxLang to the Mid-Michigan CFUG user group on October 21st. You can find details here, https://mmcfug.org/. This meeting is 100% open to the public so if you've been curious about BoxLang from my posts here, you can get yourself a good intro later this month.\nNext, and this is somewhat new for me, but I'll be giving a presentation on something near and dear to my heart, developer relations and advocacy. I'll be presenting to the Tech Academy online on one of my favorite days of the year, Halloween. You can find the details, and RSVP, here: Tech Talk | Developer Relations and Advocacy: A Career in Explaining.\nCode Break\nI launched Code Break (sometimes <Code><Br>) back in January 2024, and since then have run twenty-seven episodes of me exploring, building, and sharing, while many of yall provided feedback and kept me on my toes.\nAs I've said (maybe too much), this year and the job situation has made it difficult to find time to host the show, and I've been on an unannounced break for the past few months.\nI fully attend on starting the show again. I love that I had 'regulars' showing up and felt like it was really picking up steam before, well, life hit me with a curveball. It's coming back. I'm going to get a job. Life is going to go from incredibly chaotic and scary to "normal" chaotic and scary and I'll be in a much better place to be able to host the show. That being said, it will no longer be on Certified Fresh Events.\nLast month, Brian Rinaldi announced that CFE is shutting down after nine years. CFE was an incredible resource for the development community and I'm incredibly proud of what Brian worked so hard to build. Brian has been both a resource to the tech world and, more importantly, a dear friend of mine. He's the combo of being smart and a damn fine person which is rare.\nWhen I bring Code Break back, most likely I'll be starting a new Twitch stream. That will be new for me, but I absolutely want to continue what I started, and see those familiar faces in the audience again.\nI hope to see you there!\nImage by Irina L from Pixabay\n", "tags":[ ], "categories":[ "misc" ] }, { "title": "Links For You (10/12/25)", "date":"Sun Oct 12 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1760292000, "url":"https://www.raymondcamden.com/2025/10/12/links-for-you-101225", "content":"I blinked and somehow missed posting this a week or so ago. Time is, to quote the good Doctor, a bit wibbly wobbly. I'm currently watching a recording of the Saints/Patriots game and hoping we can follow last week's win with another, but I'm not sure. Of course, the game's been done for hours now but we've managed to miss the news so... we can still hope. Speaking of hope, as a reminder, I'm still looking for my next role, and if you know of a good developer evangelist/advocate position, please reach out! Alright, time for some links.\nWhen JSON Isn't...\nFirst up is a great look at how JSON may not be as universally parsed/transferable/etc as you may have though. In "JSON is not JSON Across Languages", you get a great look at all the little edge cases that can impact transferring JSON between different languages and platforms.\nIn 2025, you still don't always need JavaScript...\nI feel like this is something that's been shared before, and heck, I've talked about this myself many times as well, but it's a useful reminder that many things we've used JavaScript for in the past are not actually necessary and can be done by simpler, less complex means. Check out "You no longer need JavaScript", a great post focused on CSS improvements primarily but also some relevant HTML features you may not be aware of.\nNew Node.js Features\nSpeaking of "you may not need JS", you may also not need that commonly used NPM package. "15 Recent Node.js Features that Replace Popular npm Packages" covers exactly what you think it does - recent improvements and additions to Node that may help you skip installing some npm packages. I knew most of these already, but definitely not all of them. I feel like I do a great job of keeping up with changes to JavaScript, but not so much with Node.js.\nJust For Fun\nI'm a huge Hatchie fan and was pleasantly surprised to find last week she has a new album coming out. Here's one of the first singles, enjoy!\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "I Know What You Did Last Summer (with val town)", "date":"Wed Oct 08 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1759946400, "url":"https://www.raymondcamden.com/2025/10/08/i-know-what-you-did-last-summer-with-val-town", "content":"With Halloween a few weeks away, it's officially spooky season. My wife and I usually plan our costumes months in advance (mine's been ready since July or so) and we love decorating the house (and yard) with all kind of fun and darkly horrific decorations. Two years ago, I built a great Halloween-themed web app using Glitch and Cloudflare: I Know What You Did Last Summer (With Glitch and Cloudflare)\nUnfortunately, Glitch is no more. These things happen and I have to thank the Glitch folks for creating an incredibly cool resource and also helping people safely migrate off their platform. One of my projects was the Halloween project from two years ago. While the serverless function was running on Cloudflare, and I could have moved the HTML resources there, I decided to try another platform, val.town.\nval.town is a service I've played with a few times before (most recently earlier this year with my park ride timer app) but haven't really dug deep into it. Initially I only considered val.town as a cool serverless host, but you can host complete web apps there as well. Their home page cheekily refer to themselves as "Zapier for know-code engineers", which I just love. They've got a generous free tier so you can test things out. If you want to learn more, check out their docs and signup. (Tell em I sent you. For every 500 referrals I get a brownie point!)\nOk, so what web app am I talking about? I won't repeat the entire previous post, but the idea was somewhat simple.\nI used a Markov chain generating library to generate fun new horror movie titles. For example:\n\n\n\nThat design is pretty much the limit of my ability. Hitting reload just keeps generating new titles, like:\n\nPopeye's Body\nA Quiet Place: Welcome to Zombie Island\nAnacondas: The Long Walk\nIn a Zombie Apocalypse\nChildren of a Violent Nature\n\nThey don't always make sense, but that's part of the fun. In order for the Markov generator to work, I get a list of horror movies using the TMDB API. I hit their discover endpoint, filter to the horror genre, and specify English movies.\nThis gives me the data that's then fed to titlegen, a JavaScript library that generates titles based on inputs using Markov Chains.\nThat's what I built - now here's how I migrated it to val.town.\nServing Static Files\nI forget who pointed me to this, but while it was really easy to create a serverless function in val.town and get the endpoint, I wasn't sure how to do static files. This took all of two lines of code:\n\nAt this point, any resource in my project could be requested via a normal request. This was in my main.tsx and used the URL, https://raymondcamden--d31a59087a0d11f0917f0224a6c84d84.web.val.run, so I then added index.html and it worked right away. My HTML hasn't changed from the previous post and is pretty minimal - a place to display the title and a button. The JavaScript is also simple - hit the serverless val.town resource that gets my titles:\n\nThe only real complex aspect was the serverless function. As I mentioned, it was on Cloudflare, so I had to rewrite it a bit for val.town. The only tricky part was figuring out caching, but val.town has blob storage so that ended up being simple as well!\nHere's the entire method:\n\nYou can view the entire project on my val here: https://www.val.town/x/raymondcamden/randomhorrormovie. And to save you another click, I've embedded the demo below - enjoy!\n\nPhoto by Nika Benedictova on Unsplash\n", "tags":[ "serverless" ], "categories":[ "javascript" ] }, { "title": "Building a Document Q&A System with Google Gemini", "date":"Thu Oct 02 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1759428000, "url":"https://www.raymondcamden.com/2025/10/02/building-a-document-qa-system-with-google-gemini", "content":"Document summarization is a powerful and pretty darn useful feature of generative AI, but a proper "question and answer" system can really enable users to interact with a document. This is why you see various document viewing apps, like Acrobat, adding these features to their programs. I thought I'd take a look at building such a system via a simple web app to see how difficult it would be, and honestly, it wasn't that bad. Having this in your own web app, versus an external vendor, gives you more control over the experience as well. Here's what I built.\nThe Stack\nThe web app lets you drag and drop a PDF into the page, it then renders a preview of the PDF on the left and gets the summary on the right-hand side. After the summary is generated, you can then ask various questions via a chat interface.\n\nFor the web app, I'm using Flask, a Python web framework.\nFor displaying the PDF, I'm using EmbedPDF. This is a free tool to render PDFs on the web and it's dang cool. The only issue with it currently is a lack of documentation, but that's coming very soon.\nOnce again, I'm using the Google Gemini API for my generative AI features. I know I sound like a broken record, but it's honestly been the easiest GenAI system I've used and with a free tier, it's great for building proof of concepts like what I'm sharing today.\n\nThe Application\nHere's how the application looks when you initially start it up:\n\n\n\nDragging a PDF onto the left side will fire up EmbedPDF to render it:\n\n\n\nIn the screenshot above, you can see it mentioning that the summary process is starting. Depending on the size of your document, this can take a bit of time, but once done, it's rendered automatically:\n\n\n\nI used my resume for input, and the summary was spot on. The input/chat button UI is automatically enabled at this point, and you can start asking questions. For example, where did I work in 2020? The response was:\nIn 2020, Ray worked at HERE Technologies as a Lead Developer Evangelist (2019-2021).\n\nAccurate! How about, "Does Ray have skills in C#?"\nBased on the provided resume, Ray (Raymond Camden) does not list C# as one of his skills. \nHis listed skills are:\n\n* Developer evangelism and advocacy\n* Technical writing and editing\n* API development and usage\n* Generative AI\n* JavaScript and the Web Platform\n* Node.js\n* Python\n* Public speaking\n\nHe also mentions working with Java and Node.js in his experience at American Express, \nand ColdFusion in his publications, but C# is absent.\n\nI then asked, "does ray live in the united states?". I don't say I do in the resume, but I do list my city and state. The response was:\nYes, Raymond Camden lives in the United States. His resume states his location \nas Lafayette, Louisiana.\n\nThe Code\nI'm going to share all the code via a GitHub link at the end, so I'll focus on the most interesting parts. On the front end, it's mainly just JavaScript to handle DOM updates and such. The only real cool part is the "drop and render PDF" aspect via the EmbedPDF library. Here's a bit of that code to show how it's done:\n\nAfter the PDF is rendered, I then send it to the backend. In Flask, I'm just doing this:\n\nRight away little red lights should be flashing in your head, alarms going off, people panicking in general...\n\n\n\nObviously in a "real" app, you would have multiple users sending up files. You don't want any input dropping in web root (although in Flask, this wouldn't load) nor do you want to use the same filename. Also, you could easily take the binary data of the PDF sent and pass it immediately to Gemini for uploading. You would then need to associate the corresponding file object with the current user.\nOncee stored and the front-end gets that Ok, I then fire off a network call to do the summary:\n\nI've got a Gemini Python package that handles making these calls. I'll share it in a second. Once the summary is returned and chat is enabled, this is another simple Flask route:\n@app.route('/chat', methods=['POST'])\ndef chat_pdf():\n\tif request.is_json:\n\t\tdata = request.json \n\n\t\tprint(f"Sending {data.get('input')} to gemini")\n\t\tresult = gemini.chat(PDF, data.get('input'))\n\t\treturn { "result": result }\n\nThe Gemini package handles uploading the document, doing the summary, and ad hoc chat requests:\n\nIt's pretty short as the Gemini Python SDK handles most stuff. I'm missing error handling of course but... nothing goes wrong, ever, right?\nWhat Else?\nSo as I promised, here's the GitHub link to the complete application: https://github.com/cfjedimaster/ai-testingzone/tree/main/pdf_qa\nThere are multiple ways this could be improved. For example:\n\nIf this tool were built for a particular company, you may have a particular type of document you will almost always be working with. That information could be fed to the AI model via a system instruction to help it answer questions better.\nThe chat log could be made exportable and shareable.\nOf course, if you want to get", "tags":[ "generative ai", "python" ], "categories":[ "development" ] }, { "title": "Creating a GenAI Document Summarization Workflow in ColdFusion", "date":"Wed Oct 01 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1759341600, "url":"https://www.raymondcamden.com/2025/10/01/creating-a-genai-document-summarization-workflow-in-coldfusion", "content":"So this post comes from - I'm mostly sure - me forgetting to show a simple, but powerful demo at my presentation recently at the\nColdFusion Summit. It's nice and simple, but pretty darn useful so I decided to write a quick blog post about it and highlight the code.\nWhat's a Document Workflow?\nSimply put, a document workflow is any process you would use to handle incoming documents. As an example, and one I've built many times over the past few years, you can use a workflow to convert all your incoming documents into PDF for easier handling. pdfRest has APIs for this and I'll likely share a demo of them soon. (ColdFusion itself can convert HTML, PPTX, Word, and some image types to PDF natively.) In my demo, the workflow is simple:\n\nScan a folder of PDFs\nFor each PDF, see if we have a summary file stored\nFor each PDF without a summary, use Google Gemini GenAI APIs to create the summary\nStore the summary\n\nIn my case, I'm using the file system to store the summary, but if you've got a database table that keeps track of your document resources, that could be used as well.\nThe Code\nThe first part of the process simply finds the PDFs:\n\nNow, I need to loop over each file, and for each, I look for a file with the same name, but a txt extension itself. This represents the cached summary:\n\nOk, now for the fun part - creating the summary via Google Gemini. The first step is to upload it to Gemini:\n\nThis is done via this function:\n\nYou'll notice a heck of a lot of headers there. In pretty much all aspects of Gemini's APIs, this one was the most trouble to figure out. You can read more details of that back in my post from last year: Using Google Gemini's File API with ColdFusion\nThe net result of this is that Gemini will have our PDF (for a short time, and we can force a deletion if need be) that can be referenced in prompts.\nWhich of course, brings us to that part:\n\nThe promptWithFile method wraps calls to Gemini:\n\nUnlike the API to work with files, the Gemini REST APIs are incredibly simple. The body of the call is perhaps a bit complex - you need to correctly include your prompt and a reference to the file, but it's relatively simple once you've done a few calls. The last bit is to simply return the result after parsing it from JSON.\nFinally, I store the result:\n\nThe md2HTML command simply converts the Markdown result to HTML. I covered this in yet another blog post from almost exactly a year ago: Parsing Markdown in ColdFusion\nThe final result is a web page showing file names and summaries, but honestly, I'd expect something like this to be run on a schedule with minimal to no output. As an example of the output, this is what it said about my resume:\n\n\nThe provided document details the extensive career of Raymond Camden, an accomplished Developer Evangelist and Advocate with a strong focus on building developer communities and promoting successful API adoption.\nKey Highlights:\n\nDeveloper Advocacy and Evangelism Expertise: Camden possesses a proven track record in fostering relationships with developers, ensuring their success, and acting as a trusted voice within technical communities. His responsibilities consistently involve advocating for developers, gathering feedback for engineering teams regarding API design and usability, and contributing to the overall developer experience.\nProlific Content Creation and Thought Leadership: A significant aspect of his work involves creating a vast array of educational and inspirational content. This includes writing over six thousand blog posts, publishing multiple technical books (e.g., on Vue.js, Serverless Applications, Static Sites, Apache Cordova, and ColdFusion), and delivering over 30 presentations and workshops (at Adobe) and 20+ (at HERE Technologies) to global audiences.\nDemonstrated Impact and Growth: At Adobe, he significantly increased developer signups by 33% through new documentation and revamped resources. He introduced over 100,000 developers to APIs via his content and presentations. He also played a key role in launching new API offerings and frameworks at Foxit, Adobe, Auth0, and IBM.\nTechnical Collaboration and Mentorship: Camden frequently collaborates with engineering and product teams to guide new releases, improve API frameworks, and refine onboarding processes. He has also actively mentored other developer evangelists, helping expand and develop teams.\nDiverse Industry Experience: His experience spans various major technology companies, including Foxit, Adobe (in multiple roles), HERE Technologies, American Express, Auth0, and IBM, working with diverse platforms and technologies from web and mobile development (HTML5, Apache Cordova) to serverless (OpenWhisk), Node.js, and API services.\nTechnical Skills: His skill set includes developer evangelism and advocacy, technical writing and editing, API development and usage, generative AI, JavaScript, the Web Platform, Node.js, Python, and public speaking.\n\nIn essence, Raymond Camden is presented as a highly", "tags":[ ], "categories":[ "coldfusion", "generative ai" ] }, { "title": "ColdFusion (2025)'s CFOAUTH Tag", "date":"Tue Sep 30 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1759255200, "url":"https://www.raymondcamden.com/2025/09/30/coldfusion-2025s-cfoauth-tag", "content":"Back in May of last year, I wrote up a blog post on ColdFusion's oauth tag. This was based on a feature from way back in ColdFusion 11 that I thought I'd take a look at to see if it was useful. I'm not going to repeat the entire previous blog post, but in general... it was almost something I'd recommend.\nThe tag did a good job of handling creating the right oauth link for you. So you could (after setting stuff up with your provider of course) drop the tag on a page, and when the user hit it, they would be prompted to login with the third party provider. When returned, the tag would handle getting the access token and such and giving you a nice little structure of data for you to use.\nI generally dislike my server-side code from doing anything on the client-side, but this felt like a good compromise in regards to what it was doing. That being said, I ultimately could not recommend using the tag as it failed at two crucial aspects:\n\nIt did not return the expires_in value so you knew how long your access token was valid.\nIt did not return a refresh token, even if you used the right parameters to get that.\n\nI filed a bug report for this and moved on. Now it's over a year later, ColdFusion 2025 was released in the meantime, and it looks like everything was fixed... despite my original bug report not being updated.\nFrom the release notes:\n\ncfoauth changes: The cfoauth tag has been updated to updated to support enhanced workflows and configurations. This release also introduces Microsoft as a new auth type along with Google and Facebook. View the cfoauth tag doc for more information.\n\nCool! So... does it work better? Absolutely. As I said, I'm not going to repeat everything from the previous post, but this code now works as expected in terms of getting a refresh token and having the expiration value:\n\nThat auth struct now contains what I said above, expires_in and refresh_token:\n\n\n\nCool! Even more interesting, according to the reference doc for changes to this tag in CF2025, you can also refresh your access token using the refresh token via the tag, saving you a bit more work.\nI hereby now approve usage of this tag. (Allow me to pretend that I somehow dictate how folks use ColdFusion. ;)\nPhoto by Kaffeebart on Unsplash\n", "tags":[ ], "categories":[ "coldfusion" ] }, { "title": "New Web Thing - Wander", "date":"Fri Sep 26 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1758909600, "url":"https://www.raymondcamden.com/2025/09/26/new-web-thing-wander", "content":"I've built a few web games in the past (IdleFleet and Cat Herder are two examples), but what I'm sharing today doesn't really fit into the category of a game. This is going to sound terribly pretentious and I apologize in advance, but what I'm sharing today is more an "experience" for lack of a better term. It's part technical exploration, and part cathartic dumping, and just kinda weird. But honestly, the web needs more weird and I'm happy to contribute to that.\nAs with most of the things I've built, I think it's more interesting if you experience it first before taking a look at what's behind it, so with that in mind, click this to open up what I built in a new tab: https://cfjedimaster.github.io/webdemos/wander/.\nAs a warning, there's no help text, no explanation. It just is. So be prepared to be confused a bit.\nWhat is Wander?\nWander is a few things. Technically, it's a procedurally generated landscape that you can explore. The "world", as it is, is defined in a series of "plates", where each plate is what you see on screen currently:\n\n\n\nA plate consists of a series of open spaces and obstacles (#), where the subject (@) can navigate using keyboard controls. (No WASD, sorry, just arrows.) I'm using the term "subject" as this isn't a game. (Although you'll see me user the word player in code.)\nThe plate is just a 2D array where I fill the inner portion with obstacles. Why inner portion? As you navigate around the plate, when you get to the edge and continue, a new plate is created. If I didn't keep the edges clear, it's possible you would enter into an obstacle. I also didn't want to simply avoid where the player enters as it's possible you would be 'wrapped' in obstacles and couldn't explore further.\nThis is less maze and more... landscape with things in it. Yeah, vague, but that was kind of the mood I was going for.\nThe plates themselves are persisted in the browser via IndexedDB. When you start, I generate and persist one for you, and as you explore, more are added. I keep track of their location such that if you return in the direction you travelled, and then come back, the same one is loaded.\nIn theory, this means you could explore until the browser starts blocking your storage calls and considering how small each plate is, that would be a very, very long time.\nOh, and I'm using Alpine.js to handle the UI/UX. Let's dig into the code a bit, eh?\nThe World\nFirst, here's the initial data (most of it) and init:\n\nThe call to setupDb initializes my IndexedDB database. About two years ago I blogged about IndexedDB and Alpine.js if you want a good introduction to the topic. Here's my database setup:\n\nOf note - I've got one object store, plates, and the unique identifier is the location value, i.e. where the plate sites in the world.\nNow things get a bit complex. The init function gets the initial plate located at 0,0. This will attempt to load a persisted plate, and if it doesn't exist, generate a new one.\n\nHere's load plate:\n\nAnd if returns null, here is how I generate a new plate:\n\nFinally, every new plate gets stored based on its location:\n\nRendering of the plate is done over in HTML:\n\nSo, movement was kind of fun. You can see the handlers in the HTML above. Of special note is the use of window to tie the event handlers to the Window object. Without that, you would need to click on the table to focus it in order for them to work.\nThe Atmosphere\nOk, so there's a bit more code to talk about, but this is also the part where I get a mushy. Feel free to stop reading now, I wouldn't blame you.\nThis year has been, without a doubt, the second worse year of my life. I cannot adequately explain the feelings I've had being laid off, twice, and trying to land a job in a landscape that's incredibly bad. I've been to therapy, but not lately, and I should probably return, but I'm also contracting now and any time away from work is time spent not earning and I'd have difficulty focusing with that in mind. It's not all bad! I've had some incredibly good times this year as well. It's just... a lot.\nPart of the appeal of writing Wander is to give a digital form to what I'm feeling. Without a job I feel aimless, worthless, and worse. I truly believe that as a father, and husband, I am not worthless, but those nice sane thoughts have to deal with a multitude of other not-so-sane emotions fighting for their part of my internal CPU.\nMatthew Inman (creator of the Oatmeal) has a great comic about intrusive thoughts. This led to a fun as hell game, Horrible Therapist, but the comic itself really spoke to me.\nI wanted to give voice to some of those thoughts, some of which, ok many, are somewhat dark, but also hopeful, silly, and honestly just a bit weird/random. To reflect this in Wander, I added whispers. In HTML, it's just this:\n\nA bit of CSS is used to fade out the div such that the content at top is dimmer. When Wander starts, a 'heart beat' function is kicked off which will randomly disp", "tags":[ "javascript" ], "categories":[ "misc" ] }, { "title": "Testing with BoxLang", "date":"Sat Sep 20 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1758391200, "url":"https://www.raymondcamden.com/2025/09/20/testing-with-boxlang", "content":"One of the fun things about immersing myself in BoxLang these past few months is my expose to other products from Ortus. Most recently, I've been doing some contracting with a client that makes use of ColdBox, which for my non-CFML readers out there is probably the most well known, and probably most popular, framework for building enterprise web applications with ColdFusion. As part of that work, I've been integrating TestBox, a testing and mocking framework that works well with ColdBox, but also (somewhat recently, I think a month or so now), supports BoxLang as well. For the most part, "it just works", but as I was new to it, I did run into a few small issues I thought I'd share a simple walkthrough of how to get started.\nMy "App"\nCan you see the giant "air quotes" up there? By "app", what I mean is I created the simplest possible BoxLang web app I could think of. I gave it an Application.bx file that just had a name:\n\nAn index.bxm with just a hello message:\n\nAnd then a class that I wanted to build tests for, services/catService.bx:\n\nInstalling TestBox\nIf you read (and you should!) the BoxLang TestBox guide, it demonstrates how to add TestBox to your app like so:\nbox install testbox\n\nThe box command is CommandBox, a core CLI app for most products from Ortus, so you'll need to have that installed first. Running this will install TestBox under your application in a folder appropriately named, testbox. You can, as far as I know, completely ignore this folder.\nSetting Up Your Tests\nBefore we go on, one quick note. The TestBox guide mentions your root application configuration and shows a sample, but there's nothing in here you need to copy. If you have an existing Application.bx file, it's fine. I can say that it's important to note that some of your settings here may be important in your test folder Application.bx I'll be getting to in a second. Things like mappings and data sources may need to be copied over. This was my experience working on the large ColdBox site and the same advice may apply here, but it's not noted in the BoxLang docs... yet. Just keep it in mind.\nCreate a tests folder under your application. If you look at the project structure part of the guide, it demonstrates a tests folder with multiple subdirectories to help organize all your tests:\n\n\n\nI was going to build one simple unit test for my cat server, so under the tests folder, I created specs/unit and added catServiceTest.bx. The guide has a large sample test, but here's my simple one:\n\nThe most important bit is up on top, the extends, which brings in the core TestBox class. TestBox supports BDD (Behavioral Driven Development) and TDD (Test Driven Development), which as you may know approach testing differently. I've always leaned towards the BDD style, so I followed that. Even if you've never written a test before, you can figure out what's happening here. My top level describe block is going to wrap a set of tests for my cat service code. In a real app with lots of services and such, I could imagine multiple of these. My beforeEach will run before every test in my file and in this case simply instantiates my cat service object.\nMy actual test, in the it block, calls the getCats method of the service and tests to see if it's both an array and has at least one result. The list of toX methods is quite extensive. It took me a little while to find the reference for this, but you can see the complete list here: https://apidocs.ortussolutions.com/testbox/6.0.1/testbox/system/Expectation.html\nThe next thing I did was setup the Application.bx file for my tests folder, and for that, I copied the one in the docs:\n\nOnly thing I'll really note here is the setting to allow a long request timeout which makes sense for running tests.\nI then added runner.bxm, this is a web-based runner for your tests and goes in the tests folder as well. At the time I'm writing this, I had noted an odd bug in the docs that I've yet to correct because I'm unsure of what should have worked versus what I saw. For the time being, use the code I'm about to show, and note that if you read this in the future (hey, do I have a job yet? please tell me I've got a job), you can use this version:\n\nThe change here is to add system to the path before TestBox and semicolons on the params. If you don't care about the why, that's fine.\nOk, in theory, this is the bare minimum, so let's actually run the tests.\nTesting Your Tests cuz Testing is Good - so Test\nYou've got two options for running tests. The first is the CLI option. This is really flexible and lets you run all your tests, or just a specific one. For me, I literally just ran ./testbox/run and got this:\n\n\n\nIf you want a web-based version, remember we created tests/runner.bxm, so opening that up in the browser gives you a nice visual result:\n\n\n\nNice and simple, right? So to complete the puzzle, let's actually work on a new feature, a service method that gets one cat. I'll start off writi", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "My Experience Asking GenAI to Design My Blog", "date":"Tue Sep 16 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1758045600, "url":"https://www.raymondcamden.com/2025/09/16/my-experience-asking-genai-to-design-my-blog", "content":"What was my experience using GenAI tools to design my blog? Well, you're looking at it! As I mentioned last week, my new design came from one of my experiments using GenAI to help me design a new theme, but I wanted to share a bit more about the experience when I had time, and that time is now.\nAbout two or so months ago, I had the idea of testing out GenAI to create themes for small web apps. While my blog is actually huge (near seven thousand pages), design wise it's basically:\n\nA home page\nA post page\nA "everything else" page\n\nThat's just three basic pages, all sharing a main layout with slight differences in what's the main content of the page. I thought it would be fun to give multiple different GenAI tools a chance to spec out a blog theme to see what would happen.\nThe Process\nFor my tests, I made use of the same prompt every time:\nI want to create a new theme for my blog. My blog is developer-centric. \nMy theme should consist of one main HTML file, one CSS file, and minimal \nif any JavaScript. (You can create an empty JS file and include it \nthough if you wish.)\n\nAbsolutely NO framework must be used. Absolutely no React, or Vue, or \nanything, and no build process. I literally just want static HTML and CSS. \n\nI want a dark green centric theme as green is my favorite color. \n\nThe theme should be responsive and look on mobile devices.\n\nThe main page you create should include a title for the blog and 10 \nblog entries listed in reverse chronological order. Each blog post \nshould include a date.\n\nThe top level menu should include a links to: Home, About, Speaking \n(I'm a frequent speaker at conferences), Subscribe. You can also \ninclude a link to a search page, or perhaps a small search field. \n\nFinally, using this template, create a page for an individual blog post. \nThat template should include a date and a list of categories associated \nwith the blog post. \n\nI tried to be specific in terms of what I wanted as well as what I didn't want.\nFor the tools I used, I wanted something that integrated into my editor and could write to the file system. I didn't always do this as one solution I'll share below made use of the CLI.\nOnce the initial results were created, I'd open them up and see if I wanted any tweaks. To be clear, not in regards to make the design 100% complete, just initial reactions and things I thought should change immediately.\nFinally, for each of these (except one), I made a video, and that's primarily what I'll be sharing below. Ok, let's get to it!\nCopilot in Visual Studio Code\nMy first attempt made use of Copilot in Visual Studio Code. This is baked into VSC now with no need to install anything extract, and you get a decent free tier with a GitHub sign-in I believe. Here's how it went down.\n\n \n Play Video\n \n\n\n\n\nYou can find the resulting code here: https://github.com/cfjedimaster/gen_my_new_blog_theme/tree/main/copilot_in_vsc\nAnd you can see it in action here: https://cfjedimaster.github.io/gen_my_new_blog_theme/copilot_in_vsc/index.html\nAll in all not bad, but not my favorite shade of green.\nGemini in Visual Studio Code\nNext was Google Gemini in Visual Studio Code. Nearly all of my experience with GenAI has been via Google Gemini, so it has a special place in my heart. This one had a few issues while recording though.\n\n \n Play Video\n \n\n\n\n\nYou can find the code for this version here: https://github.com/cfjedimaster/gen_my_new_blog_theme/tree/main/gemini_in_vsc\nAnd demo it here: https://cfjedimaster.github.io/gen_my_new_blog_theme/gemini_cli/index.html\nCursor\nNext was Cursor, an editor built on the open source portion of Visual Studio Code. You can see how it went down here:\n\n \n Play Video\n \n\n\n\n\nThe code may be found here: https://github.com/cfjedimaster/gen_my_new_blog_theme/tree/main/cursor\nYou'll note it did not listen to my instruction to create a blank JavaScript file, but to be honest, this is pretty much what I do in a lot of apps when starting anyway:\n\nYou can demo this one here: https://cfjedimaster.github.io/gen_my_new_blog_theme/cursor/index.html\nThis was almost the design I picked.\nGemini via CLI\nOk, so this is cheating a bit, but it was suggested I give the Gemini CLI a try and I figured, why not. As I said, I'm a huge fan of Gemini but I had not tried out the CLI. Here's how this one went:\n\n \n Play Video\n \n\n\n\n\nYou can peruse the source here: https://github.com/cfjedimaster/gen_my_new_blog_theme/tree/main/gemini_cli\nAnd see it in action here: https://cfjedimaster.github.io/gen_my_new_blog_theme/gemini_cli/index.html\nNot surprisingly, it's pretty similar to the Gemini in VSC one.\nClaude\nFor my fifth attempt, I used Claude, again in Visual Studio Code:\n\n \n Play Video\n \n\n\n\n\nThe generated code can be found here: https://github.com/cfjedimaster/gen_my_new_blog_theme/tree/main/claude\nThe resulting blog can be seen here: https://cfjedimaster.github.io/gen_my_new_blog_theme/claude/index.html\nAnd the Winner Is...\nNone of the above! Ok, technically it's ", "tags":[ "generative ai", "javascript" ], "categories":[ "development" ] }, { "title": "Integrating Algolia with BoxLang", "date":"Mon Sep 15 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1757959200, "url":"https://www.raymondcamden.com/2025/09/15/integrating-algolia-with-boxlang", "content":"I've been using Algolia for my search on this blog for years and absolutely love the service. At a high level, Algolia is a hosted search service that lets you easily create search indexes (think of it as a search optimized version of your content) while also providing easy libraries to add a search UI to your page itself. If you type in the search bar on top and perform a search, you'll see this yourself. My site here is static, all simple flat files with no database, so a solution like Algolia is vital. I thought I'd take a look at integrating Algolia's REST APIs with BoxLang and was able to build a quick demo in less than an hour. Here's what I did.\nInitial Setup\nAs I said, I've been using Algolia for years, but if you're new to the platform, you'll have to sign up of course. Their pricing page documents the particulars, but you'll not have to pay a thing to test, and in fact, I don't pay for Algolia as well. Their free tier includes up to one million records (yes, a million) and ten thousand searches, so you can absolutely consider Algolia for a whole range of sites.\nOnce you've got an account, you need to hop into the dashboard and create an Application, which is a top level container for your account (you can have more than one, but one is enough for testing) and then beneath that, an index. Roughly, an index is like a database. I've got one for my blog, and I made one for this demo. Each index has multiple different things you can configure for optimal searching and such, but the out of the box defaults are fine for quick testing.\nFinally, in your account settings you can get your keys. You will have a "Search API Key", which can be shared publicly as it just does that - search - and an "Admin API Key" which does CRUD on your index. You'll need that value for the code I'm going to show.\nThere's a lot more to Algolia than I'm showing today, and I'd recommend checking out the docs for a deeper look. I'm just going to do the bare minimum to demonstrate an integration with BoxLang.\nMy Content\nIn order to have something to search, I used my blog content here as a base, specifically, the Markdown files for content from 2025. These Markdown files have YAML-based front matter on top and text beneath them.\nHere's an example where I removed a bunch of the content to keep it shorter. The frontmatter on top is like metadata for the content:\n\nFor this demo, the content covers 118 different blog articles. All high quality, super serious, important blog posts.\nWorking with the Index\nThe first thing to know about Algolia and your index is, you need to ensure you keep a one to one connection between the data on your side and the data in the index. There's multiple different ways of handling that, but for this example, I'm going to keep it rather simple and use a BoxLang script that will:\n\nRead and parse my Markdown files\nUse the Algolia REST API to update the index\n\nThe Algolia REST API covers the full aspect of the all the things you can do, and SDKs exist for other languages if you want to skip doing direct calls.\nTo keep things simple, we'll make use of "Add a new record" endpoint which nicely handles adding or updating values based on a primary key (more on that in a moment). This makes our logic much easier as we can simply gather our data, send em to Algolia, and let them worry about if the record is new or not.\nI created a script, source_index.bxs, that handles this. The first portion handles getting and parsing my content:\n\nNote that I make use of BoxLang Yaml module to handle parsing the frontmatter. The net result of this block is - all of my blog posts will be returned in an array consisting of objects that have data and contents keys. Note that I'm using the HTML version of my content and it may be better to use the simple text version instead.\nNow for the fun part - getting this to Algolia. I read in my credentials from the environment:\n\nThat last statement is how the REST API works, your endpoint matches your application ID value. Next, we send to Algolia:\n\nSo, for each blog post, I make a new record object. If I don't give it a primary key in the form of the objectID value, Algolia will assign it, but my blog content has a permalink value that is unique and works perfectly for this. I also pass the title, date, content, and link. Note that Algolia records max out at 10K characters each, so I use the first 9K which leaves more than enough room for the other properties.\nSending it to Aloglia is a simple matter of hitting the endpoint with the data.\nWhat's cool is - at this point you can go into your Algolia dashboard, confirm the records were added, and immediately start doing searches. Here's a screenshot from mine:\n\n\n\nI cannot stress how useful this is. If you don't get good results here, there's no point going forward. You can easily clear the index from the dashboard, tweak your code, and test, all before writing anything to search the content in your app. Here's an exam", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Links For You (9/13/25)", "date":"Sat Sep 13 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1757786400, "url":"https://www.raymondcamden.com/2025/09/13/links-for-you-91325", "content":"Yeah, I'm not even going to try to comment on this past week. I can say I had two interviews, which I think went well, and I finished some demos I've been working for a while, so that's a positive. Outside of that, just want to not think too much about the state of things and focus on sharing awesome, nutritious links for you to enjoy.\nIntl and Segmenters\nYou know me and you know I love the Intl API, so first up is a look at getting accurate text lengths using Intl and the Segmenter feature. This post comes to us from Sangeeth Sudheer with the nicely named "Automagic" blog.\nFlight Data to the Database\nNext up is an incredibly cool post that demonstrates streaming real-time flight data from MS Flight Simulator into InfluxDB 3. I've been a fan of Microsoft's Flight Sim since version 1 or so, but I had no idea you could hook into the data being generated from it. Heather Downing does a great job explaining all the details here, and it's definitely worth a read.\nAn Intro from Doctor JavaScript\nOk, "Doctor JavaScript" isn't a name he goes by, but it just suddenly made sense to me, so I'm going with it. I've shared posts from Dr. Axel Rauschmayer many times here and he easily the world's expert on JavaScript and has an incredibly deep understanding of the language. Last month, he began a new series for people learning web development that I recommend checking out, even if you've been in the biz for a while. As of today, he has 12 comprehensive posts covering multiple different aspects. Check it out!\nJust For Fun\nLast up is an incredible song by a new artist (new to me anyway), John Glacier. That's not the artist's real name, but is instead the stage name of a rapper from England. You can read more about her here, an article from 2022, so I was definitely late in discovering her. Anyway, this track is absolutely incredible:\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Using Chrome AI to Summarize Comic Books", "date":"Fri Sep 12 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1757700000, "url":"https://www.raymondcamden.com/2025/09/12/using-chrome-ai-to-summarize-comic-books", "content":"A few weeks back, I blogged about analyzing comic books with gen ai, and honestly, it worked really darn well. I extracted the pages with Python, and send them to Google Gemini to create the summary. I was naturally curious to see if this could be done entirely on device, using Chrome's AI support. Here's what I found.\nFirst, a reminder - a few days ago I updated my web-based comic book reader and described that process. The code I'm sharing today is built upon that first application, so if you missed that post, I'd strongly suggest reading it first. (And if you don't want to miss any of my posts, don't forget to subscribe!).\nHow It Works\nAlright - so given that we've got a way to handle zip and rar based e-comics, how do we integrate AI into the picture?\nRemember that my web demo handles you dropping a .cbr or .cbz file onto the web page, checking the contents of the archive, and then using the respective library (zip.js or Unarchive.js) to extract one image a time. My code figures out the total number of pages (images) and uses simple buttons to let you navigate through them. I say simple, but honestly it was a bit complex to set up, so again, I definitely recommend reading that previous post.\nOn the AI side, we're going to make use of two core features:\n\nFirst, the Prompt API, and specifically, the multimodal capabilities that allow us to examine images. The context window doesn't allow us to pass all the images in a comic book, so we'll use the API to analyze each page of the book, one by one, and generate a summary of what's on the page for each.\nGiven our pages are being turned into summaries, we can use the Summarizer API to create a summary of summaries, which in theory, cover the entire book.\n\nLet's dive into the code.\nKicking off the Process\nAs I've mentioned multiple times now to read the previous post, I'll skip over the stuff covered there, and instead focus on the AI centric part. The displayComic method is what's used after the zip or rar has been parsed. It sets up the UI and such and enables navigation. In the first iteration, my zip and rar methods returned a "reader" function that's used to display the image. For my AI work, I knew I needed the raw binary data (or think I did, I could be wrong there), so I modified both functions to return a 'binreader' function.\nIn handleRar, it's the getBin part:\n\nIn handleZip, it's getBlob:\n\nLet me say right away that if I were shipping this to production, I'd absolutely look at simplifying this such that each method returned one helper function that could be used both for display and AI.\nWhen displayComic is done setting up UI and such, it kicks off a call to start the fancy AI process: \thandleAISupport(pages, reader, binreader);\nThis first method is all about checking for support and setting stuff up, let's take a look:\n\nThe first half checks for the Prompt AI and if it can, sets it up. The prompt I used came about from multiple iterations of trying to force the model to focus on the content, what's going on basically, and not comment on the art style and such. It... worked... mostly.\nThe second half focused on the Summarizer API. I specified a tldr style summary, long form, and in plain text.\nNote for both I'm updating the UI if a download is required as it could take a while to get those models the first time.\nNow for the real work! Let's look at the beginning of doAISummary:\n\nAs a quick aside, I passed reader to this function and didn't use it. I freaking love that feature of modern editors. Did I fix that, no, but I love it. The method begins by giving some UI feedback. This process is not zippy, so it's going to be important. I'm going to be doing a summary for each page, so I initialize an array for that.\nThe next line is incredibly important. In my tests, when I'd loop over each page and ask for a summary, I quickly found myself overfilling the context window of the model. In my testing, this did not throw an error in my console and led to a lot of debugging. My Google contacts can't reproduce the issue, but the work around was quite simple - just cloning the session (remember that points to the Prompt API instance). You'll see me user this again in the next block:\n\nI iterate over each page (to a max of 50), and also check my usage to see if I'm nearing quota. If I get to over 75 percent, I nuke my copy of the session with a new clone. I pass the image to the prompt to get the summary. I forgot to share this earlier, but here's my schema I used to try to get Chrome to give me a simple paragraph:\n\nFinally, note the the UI update. In my testing, it took about 2-3 seconds per page. That's not too bad, but for a 'regular' comic of 30-ish pages, that's a good minute long process, so I wanted to ensure the user knew things were being worked on.\nThe last portion is rather simple:\n\nSo how well does it? Eh.... kinda ok. It's definitely not as good as the pure Gemini example. It's promising, but probably needs more tweaking to improve the qual", "tags":[ "generative ai", "javascript" ], "categories":[ "development" ] }, { "title": "Recognizing Abundant, Deficient, and Perfect Numbers", "date":"Thu Sep 11 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1757613600, "url":"https://www.raymondcamden.com/2025/09/11/recognizing-abundant-deficient-and-perfect-numbers", "content":"Ok, this post falls into the "I'll never actually use this again" category, which frankly, my normal readers know happens all the time, but it was a fun little diversion and a reminder of why I used to love math so much.\nYesterday I found out that one of my kids' homework was to look at a set of numbers and determine if they were abundant, deficient, or perfect. Right now you are probably (at least I know I was) asking, "what in the actual heck is that???"\nA quick bit of Googling turned up this explainer that basically boils it down to a simple principal.\nGiven a number, find all the divisors of that number, excluding the number itself, and add them up. If the result is less than the original number, it is deficient. If the number is equal, it's perfect. Finally, if the sum is over the input, it's abundant.\nSo for example, 6 is considered perfect because the divisors, 1+2+3, equal 6 when added together. 5, which only has a divisor of 1 (remember, you exclude the number itself) is deficient. 12 is abundant (1+2+3+4+6 == 16).\nYou can read more, and see more variations, on the Encyclopedia.com article if you would like. Honestly, I see absolutely see use for this, but I thought - why not whip up a quick demo of this in BoxLang\nVersion One\nThe first version I built uses one main method to get divisors, minus the input itself, with a special case for 1:\n\nThe result of this is an array of divisors. I then built one function each for the three types of numbers:\n\nFairly simple, right? I whipped up a quick test:\n\nAnd you can try this yourself below.\n\n \nFinally, given that a number must be one of three types, it's probably easier to just have one function:\n\nYou can try this below:\n\n \nImage from the National Gallery of Art, Cats and Kittens, by an unknown artist.\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Time for something new...", "date":"Wed Sep 10 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1757527200, "url":"https://www.raymondcamden.com/2025/09/10/time-for-something-new", "content":"So, maybe you're noticing a new look here. Or maybe this is your first time here. Either way, welcome to the new (and hopefully) improved raymondcamden.com, my little home on the internet.\nFor the past few weeks, I've been sharing my experience using GenAI to generate a blog theme on my YouTube channel. My plan was to share those results here and ask folks which theme they thought would be best. I still plan on sharing those results here, but yesterday while frustrated and anxious, I decided, screw it, one theme really spoke to me, and it's the one you see here. While I know I've still got stuff to fix here and there, I'm really happy with this update and I hope yall like it. Or if not, I hope it doesn't bug you enough to never return. ;)\nAs an FYI, the actual tech stack didn't change at all. I'm still using Eleventy and writing most of my content in Markdown. If you're bored, you can dig into the source code and see how I've patched this huge (nearly 7000 page) beast of a site together.\n", "tags":[ ], "categories":[ "misc" ] }, { "title": "Using Chrome's Built-in AI to Improve AI Prompts", "date":"Fri Sep 05 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1757095200, "url":"https://www.raymondcamden.com/2025/09/05/using-chromes-built-in-ai-to-improve-ai-prompts", "content":"Props for this article go to my best friend, Todd Sharp, who yesterday said something along the lines of, "Hey Ray, you should blog a demo of ..." which is pretty much akin to bring out a laser pointer in front of a cat. Not only do I love getting ideas for new demos, his idea was actually pretty freaking brilliant, which means I get to pretend I'm brilliant as well.\nHis idea was this: Given a user created prompt meant to be shipped off to a "proper" (i.e. maybe expensive) Generate AI API, can we use tools to help improve the prompt and make it "cheaper" before used. Given we've got AI in the browser via Chrome (ok, we will have it soon), this seemed absolutely possible and I quickly whipped up a demo.\nAs usual, the normal caveats apply. To test this, you'll want to use Chrome Canary with the appropriate flags enabled and such. As I've suggested before, join the EPP to get access to additional docs and support forums for help getting started. (Or just subscribe to my blog and keep reading my posts.)\nLet's get started!\nThe General Strategy, and What Can Be Done Better\nThe general idea for this demo is to take your input, a text prompt, and ask Chrome's Rewriter API to recreate it in a better form.\nThis assumes a text only prompt, which of course isn't always the case. Multimodal prompts could include many different forms of binary data and optimization could be done in that area as well. For example, a 4000x4000 hires image could be resized and optimized down quite a bit to reduce the size it adds to the context window. Audio could be sped up 10% or so for tasks involving transcription. PDFs could be optimized as well.\nFor now, I'm keeping it simple and just focusing on "cleaning" up the prompt.\nInitially my thinking was to take the result, send it to Gemini over API, measure the tokens used, and compare against the original. However, looking at the GitHub explainer for the Prompt API, I found a method, measureInputUsage(), which tell you how many tokens a prompt will use.\nNow, the docs have some important notes on this API I'll share here:\n\nWe do not expose the actual tokenization to developers since that would make it too easy to depend on model-specific details.\nImplementations must include in their count any control tokens that will be necessary to process the prompt, e.g. ones indicating the start or end of the input.\nThe counting process can be aborted by passing an AbortSignal, i.e. session.measureInputUsage(promptString, { signal }).\nWe use the phrases "input usage" and "input quota" in the API, to avoid being specific to the current language model tokenization paradigm. In the future, even if we change paradigms, we anticipate some concept of usage and quota still being applicable, even if it's just string length.\n\nGiven that, and given that different API engines may tokenize different, using this method to measure the effectiveness is not perfect, but feels like a good ballpark figure for how effective it may be.\nThe Code\nAlright, let's take a look at the code. On the HTML side, I'm literally just plopping down a textarea for your input and a button, so I won't share that here. Let's get into the JavaScript. Nothing every went wrong using JavaScript, right?\nFirst, the startup crap:\n\nI've got a few global variables and an init function run when the document loads. It checks to see if the user has access to the Prompt and Writer APIs, and if so, enables the button so we can analyze their input.\nNow for the complex stuff. The first thing I did was build wrappers to get the Prompt and Rewriter model. In the past, I've not done a good job of handling 'loading' states and such, and this demo handles it better, showing in the UI as the model downloads. I've got a blog post on just this particular topic coming up in a day or so:\n\nHere's the actual method called when you click the Analyze button:\n\nI begin getting my models, if I need to, and in theory, this will gracefully handle the case where we have to wait for a download.\nNext, I get the token usage on your input.\nThen I can use the Rewriter API with context explaining what I want it to do. This could possibly be improved and I welcome suggestions!\nFinally, I measure the new prompt and report it all back to the user.\nExamples\nHere's an initial prompt:\nHello my AI best friend! I'd like to learn more about working with Alpine.js. Specifically I'd like \nhelp figuring out how to integrate that awesome framework in with API calls to a weather system. \nI need a simple to understand explanation for someone who is kinda new to JavaScript.\n\nAnd the rewrite, with 'scores' before and after:\nThe initial prompt measurement was 69.\n\nI rewrote the prompt to:\n\nAlpine.js and API calls for a weather system. Need a beginner-friendly integration explanation.\n\nThe new prompt measurement is 27.\n\nAnother example:\nI'm pretty dumb when it comes to astronomy, but watched Star Wars a few times. I'd like to understand bet", "tags":[ "generative ai", "javascript" ], "categories":[ "development" ] }, { "title": "Adding a Web Debugger to BoxLang (First Version)", "date":"Mon Sep 01 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1756749600, "url":"https://www.raymondcamden.com/2025/09/01/adding-a-web-debugger-to-boxlang-first-version", "content":"This one's been sitting in my "to do" blog queue for sometime now and I figured the beginning of spooky season (September 1 - don't we all start celebrating Halloween then?) was a good excuse to finally kick this out the door. Many, many years ago I learned to love one of the simpler features of ColdFusion, the debugging output. This is a feature ColdFusion has probably had for near twenty or so plus years and while it's not the same as a "full" debugging service (which also exists), or the powerhouse Fusion Reactor, it's an incredibly simple way to look at what's going on in your web application.\nIt works by first enabling it (something you would do in your admin and in development only of course) and tweaking the settings. Once enabled, it will print a large set of debug information at the end of very web page. How and what's printed depends on your settings, but it will show things like:\n\nDatabase queries, including the SQL, number of results, and how long the query ran\nMethod executions of components (think classes) and how long they took\nTemplate timings as well\nVariables used\nAny exceptions thrown in the request\n\nThis information can be incredibly useful in terms of not only finding performance issues but also just realizing what in the heck's actually going on in any one particular request.\nWhile useful, this feature of ColdFusion is a bit of a black box. In the past, you could actually build your own debugging templates with modifications to suit your needs, but when I checked recently, that was no longer possible unfortunately.\nAs an example of how this could look, I've got a very simple web page here that's including a very slow page, and you can see it flagged in the debug output (after the <hr>).\n\n\n\nIn this case, the main template took 6055 total ms, but the included template took 6028 ms, so it's plain to see that's the culprit for the slowness of the page. There's a lot more that be shown here, but this is all I had ready to put on a screen shot.\nSo can we do this in BoxLang? Sure!\nThe BoxLang Version\nIn order to support something like this in BoxLang, I looked at two features - the module system which lets you add to BoxLang itself and interceptors which let you tie into the platform at a low level.\nMy initial version of this project (I've got plans - big plans - and will detail at the bottom) support reporting the following metrics:\n\nEach template used in the request and their execution time.\nEach database query including the number of records returned and execution time.\nHTTP calls including the size of the response and execution time.\n\nIn terms of how this is rendered, I did it a bit differently than ColdFusion. My debug module adds two new BIFs (built-in function). The first, debugDisplay(), will render out the debug information wherever you call it. So for example, you can include it in every request like so:\n\nYou probably don't want it like this, but it's a quick and dirty way to add it in. As an example, this renders like so:\n\n\n\nI don't yet have "flag slow things with red" added, but that's coming. I instead spent my time on the nice rainbow rule as that was definitely more important.\nIn the sample, note how it shows the file, cats.bxm, being included 3 times. Right away that should concern a developer as it may be a mistake. But then also notice how each time it's executed, it takes longer to run. Again, another possible issue. It's stuff like this that the CF debugging template was great at exposing and is what inspired me when building this in BoxLang.\nThat's the "pretty" version, but you also get a function, getDebugInfo(), that returns all of this data and lets you do whatever you want. You could save it to a log file, store it in a database, or do your own checks ("If I see a request to an external domain, flag it.")\nHow's It Built\nAt a high level, this proof of concept starts off as a module. I built it locally into a simple web app by adding a boxlang_modules folder, and under that, a folder named debug. The first file is the ModuleConfig.bx class which defines how the module acts - in my case, specifying interceptors:\n\nThis class is basically just metadata with the important line in configure specifying what interceptors to add to the runtime. Let's look at that:\n\nAlright, this one's pretty complex. When you define a class of interceptors, BoxLang will look for methods that match recognized interceptors (see the docs for the full list)) and automatically connect them to the runtime. So for example, postQueryExecute will be called after every single database query. onHTTPResponse will be called whenever your code makes a HTTP request. (Note that I just now found a bug with this, remote images loaded via the Image module aren't calling this interceptor. I've reported it.)\nThat's the interceptors - the data is a bit interesting. The getDebug function does two things. First, it gets the current execution context of the reques", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Building a Web Based Comic Book Reader", "date":"Thu Aug 28 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1756404000, "url":"https://www.raymondcamden.com/2025/08/28/building-a-web-based-comic-book-reader", "content":"Ok, so I know I've been spending way too much time lately talking about comic books, but I've been reading them for roughly 80% of my life now so they're just a natural part of my life. Now, my best friend Todd Sharp told me this crazy lie that he's never read a comic book before, but surely that's a lie. Surely.\nEarlier this week, I took a look at parsing electronic comic books and sending them to GenAI as a way to get summaries of stories. That was a fun experiment and it actually worked quite well. I thought I'd take a stab at trying a similar approach with Chrome's Built-in AI support as well when I discovered that... wait... I don't actually have a way to view comics on the web. Or so I thought.\nWay, way, back in 2012 I wrote a post on that very topic: "Building an HTML5 Comic Book Reader". This was back when you would still describe 'modern' web apps as HTML5 apps. Now that looks dated as hell. The code in this post is absolutely outdated now. It made use of the FileSystem API for extraction versus just doing everything in memory. It also only used CBZ files as I wasn't able to find a RAR library for JavaScript back then. I decided to take a stab at updating it to a more modern version and here's what I came up with.\nThe Stack\nFor the updated demo, I made use of the following libraries:\n\nShoelace - I love Shoelace's look and web component API, but I have to be honest, I barely used it in my demo and it's probably over kill for what I built. But I like it - so I'm keeping it.\nzip.js - for supporting CBZ files.\nUnarchiver.js - for RAR support. Technically this library supports zip files (and more) too, but I came to this after I had zip working well and ... I didn't want to poke the bear. If I were to be shipping this as a 'real' project, I'd probably remove zip.js and just use this library.\n\nAnd that's it. The application is entirely client-side code. Oh, and no React. Is that allowed?\nDrag/Drop Comics\nAlright, let's get into the code proper. I began by simply adding a div to the page where you could drop your file. To be honest, I could have supported it on the document as a whole, but I liked the idea of a nice little box.\nHere's the HTML I used:\n\nAnd here's the JavaScript that's going to handle it. To keep things a bit simpler, I'm going to ignore some of the DOM setup code and such. I'll be linking to everything below.\n\nThe function to handle file drops is below:\n\nI've got a few things going on. First, I look for the file data associated with the dropped file and check the extension. If it doesn't match what I'm looking for, I show an error toast (provided by Shoelace).\nFor my RAR files, I can pass the file object directly to a function to work with it. I don't believe zip.js supports this so for that case, I'm reading in the bits and then passing it off to the function to handle it. (This is probably another clue I should have just used Unarchiver.js.)\nParsing the Archives\nThis is the cool part I think. I wrote two functions, one to handle RARs, and one to handle Zips. My thinking is that these functions would hand off the results, a set of images, to a display function, but I also knew both libraries had a wrapped interface to working with archive entries. So I thought - what if these functions also created a function that literally says, "Given you want page X, here's a function to return that image data."\nHere's both those functions, and make note of the inner functions. This is that special handler for images.\n\nNote that I've got code in to filter directories. Many comic book archives begin with a folder of images rather than simply storing the images as is. I also look out for Thumbs.db, at least in my CBZ files.\nRendering the Comic Pages\nNext up - actually rendering the pages. I've got a bit of basic HTML for this that will handle rendering a page count, buttons, and the image:\n\nAnd here's the JavaScript:\n\nAgain, I'm pretty proud of this. I love that the logic for getting the actual bits is passed in by the corresponding zip/rar handlers and this can be done more generic.\nThe App\nI assume most folks won't have electronic comic books handy unless you're a big nerd like me. If you want, head over to ComicBook+ and grab a few. Here's the app before you upload:\n\n\n\nAnd here's a sample comic. Note that I could probably render the image a bit better here.\n\n\n\nWant to try it yourself? You can play with it here: https://cfjedimaster.github.io/ai-testingzone/comic_web/index.html\nAnd the full code may be found here: https://github.com/cfjedimaster/ai-testingzone/tree/main/comic_web\nThe next step will be to add AI integration!\nImage by kidsnews.hu from Pixabay\n", "tags":[ "javascript", "generative ai" ], "categories":[ "development" ] }, { "title": "Connecting Comic Books to Generative AI", "date":"Tue Aug 26 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1756231200, "url":"https://www.raymondcamden.com/2025/08/26/connecting-comic-books-to-generative-ai", "content":"I've blogged quite a few times about electronic comic books (most recently earlier this month when I demonstrated a comic book reader built in BoxLang). I've been reading comics pretty much my entire life and enjoy building development projects that work with the various file types associated with comics. As a reminder, these typically fall into two categories:\n\ncbr - A RAR file of scanned images\ncbz - A zip file of scanned images\n\nThis week I was wondering - given that GenAI tools are pretty good at understanding images - how well could a GenAI system take a set of images, in order, and understand the context of the story behind them. I decided to give it a shot and honestly, I'm pretty impressed by the results.\nHow this works - high level\nMy demo assumes a folder of comic book files and will do the following:\n\nScan the folder for .cbr and .cbz files\nFor each, look for a corresponding file with the extension .txt, this represents the already generated summary and a comic we can skip\nIf there isn't a summary, use the appropriate code to read in the archive\nFor each image, upload to Gemini's Files API to temporary store the image\nSend a prompt and the list of images and ask for a summary\nFinally, save the summary to the file system\n\nAs usual, I'm making use of the Google Gemini API for my demo.\nOK, let's get into the code.\nSetup\nMy script begins by importing my dependencies and setting some initial values:\n\nThe prompt's job is to setup the task based on the images that will follow. It describes how they are in order and also warns the model that some pages can be advertising. Finally, a one paragraph summary should be enough of a summary for a comic book.\nThe last value, comic_dir, simply points to the folder of comics.\nA note on rarfile. As always, RAR support in any language is a royal pain in the rear. For Python, I used the rarfile module which unfortunately also requires a CLI installed in your environment as well. For me, this was unrar for Ubuntu. Once done it worked fine, but keep in mind it's not just a module install. I'll also point out, and I didn't handle it in this demo, you may find comic books using the .cbr extension that are actually zip files. You could try/catch a zip call to flag those. (I did not - sorry.)\nWhat comics need processing?\nNow I'll get the comics and figure which need to be worked on:\n\nAs you can see, my logic to figure out the summary simply relies on the existing name with a .txt extension instead.\nWorking with Archives and Images\nNext, my script needs to split off based on the file type. Remember what I said above about how sometimes .cbr files are actually zip - I'm just not going to worry about that for now.\n\nIn both cases, I get a list of files in the archive, filter to JPGs, and then upload to Gemini via the Files API. These results are appended to an array. Note that I skip the file system completely, streaming right from the archive to Gemini.\nPerform the Summary\nLast but not least is actually performing the AI analysis:\n\nThe Gemini Python SDK lets you pass an array of items to the prompt so I simply create a new array based on my prompt and the uploads. I pass that and save the result to my expected summary filename. I don't check for errors because I'm an S Tier programmer and that's ok. (Ok, it isn't, you should definitely check for errors here.)\nThe Results\nSo I don't necessarily expect you to read the comics, but are the sample results. First are two very old, public domain comics:\n/Strange_Journey_001__1957_09.Americas_Best__noads.narfstar_.txt\nThis comic book features four distinct tales. "The Phantom Express" \nfollows Vance Jackson, a man tormented by his conscience after \nplotting with his partner, Bill Porter, to steal securities. He \nexperiences a vivid, nightmarish "dream" of the Phantom Express\n and his partner's betrayal, which he interprets as a warning; \n however, he soon discovers that Bill was awake and cunningly \n orchestrated the entire charade to trick Vance into confessing, \n then absconded with the stolen funds, leaving Vance to take the fall. \n In "The Bedeviled Vault!", Inspector Curan investigates a bizarre \n bank robbery involving a goat found in a vault. He uncovers an \n intricate scheme by Vice-President Thornton Hartshorn and his twin \n brother, Jim Watts, who used the goat as a diversion while trying to \n frame Hartshorn as an innocent bystander, only for their "simple" \n plan to unravel. "Ballast of Gold" recounts the tragic true story \n of the steamship "Marine" and its ill-fated voyage in 1867, laden \n with two million dollars in gold and over a thousand souls; caught \n in a catastrophic storm, the ship sinks, with its honorable Captain \n Hernoon choosing to go down with his vessel. Finally, "When the Sea \n Goes Dry!" sees two treasure hunters, Deke and Margot, led by a \n mysterious guide named Pedro, pursuing legendary Aztec gold in the \n Caribbean, only to encou", "tags":[ "generative ai", "python" ], "categories":[ "development" ] }, { "title": "Links For You (8/24/25)", "date":"Sun Aug 24 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1756058400, "url":"https://www.raymondcamden.com/2025/08/24/links-for-you-82425", "content":"So yeah... not a great two weeks or so since my last Links post. If you missed the announcement, my time at Foxit was unceremoniously cut short which came as a complete shock. This may end up being the year I spend more time without a full time job than with. To be honest, I'm a really, really bad place right now, but, trying to maintain, and trying my best to once again find a job in the worst market I've seen in my career. One way or the other I'll get through this again, but I'm really, really tired of this. Let me pretend to think positive for a moment and maybe in the next Links post I'll have better news. Maybe. Ok, enough complaining, let's get to the links.\nEven more HTML you may not know about\nFirst up is a post by Jim Nielsen discussing some aspects about the mighty anchor element you may not be familiar with. His post, "A Few Things About the Anchor Element’s href You Might Not Have Known", mentioned at least 4 things I didn't know so it's definitely worth your time.\nContext Windows Explained\nI'll often (and the link above is an example) click on things where I'm pretty sure I know the topic anyway because I figure there's always a chance I'm missing something important. Context windows are an important factor when working with GenAI systems, and Rizel Scarlett does a great job introducing the topic in, "The AI Skeptic’s Guide to Context Windows". I liked her coverage of the topic, but even more so, she talked about how Goose has some fascinating ways to help manage those windows. (I've been hearing about Goose for a while now but hadn't had the chance to check it out - now I'm motivated to do so.)\nThe Anti Low/No-Code Manifesto\nOk, "manifesto" is a strong word, but the next link is one that is firmly in the "anti" low/no code space: "Every Visual Workflow Tool is Just Excel for Developers Who Gave Up". This is a post I 100% disagree with, strongly, firmly, etc. That being said, I think it's a good thing to challenge your own beliefs about development and this post does just that. I think the author gets pretty much every part of their post wrong and the whole thing comes off as the strongest piece of technical gate keeping I've seen in a while, but I wanted to share it as it was, like I mentioned, thought-provoking. Let me know what you think.\nFinally\nLife sucks right now, but one bright spot from the past week was this excellent mashup. Enjoy.\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Unit Formatting with Intl in JavaScript", "date":"Fri Aug 22 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1755885600, "url":"https://www.raymondcamden.com/2025/08/22/unit-formatting-with-intl-in-javascript", "content":"It's been a little while since I last blogged about my favorite web platform feature, Intl. I think it was maybe two or so years ago when I was prepping for my first conference talk on the topic and using that as an opportunity to dig much deeper into the spec then I had before and wow, I was unprepared for how flexible, and powerful, this functionality is in the browser.\nI blogged about localized relative timings back in March of 2024 (ah, I remember March 2024, I had a job then), and discussed how to dynamically handle different quantities of time differences.\nMore recently, I blogged about dynamic time durations and how best to select the right duration for the formatter object.\nIn both cases, the interesting aspect wasn't so much Intl, but rather, how best to use Intl when rendering your results. It was a pretty fascinating set of posts I think (ok, I'm biased perhaps) and I'm glad I investigated those parts of the spec.\nToday I'm looking at another part of Intl - number formatting with units. When working with NumberFormat, the style option of the constructor reflects what kind of formatting you want to do. The options are:\n\ndecimal (default)\ncurrency (money money money)\npercent\nunit\n\nThat last one may not be obvious and is the focus of my post today. Unit formatting is used for formatting a number of a certain type of thing, so for example, 5 ounces of water, or 9 pounds of sugar. Intl lets you handle formatting those measurements in a locale specific format. Let's look at some examples.\nWhat's the Unit, man?\nFirst off, what unit values are supported? There's an API for that! The [Intl.supportedValuesOf()] method can return valid values of units like so:\n\nThose values, as of today, in my browser, are:\n\nacre\nbit\nbyte\ncelsius\ncentimeter\nday\ndegree\nfahrenheit\nfluid-ounce\nfoot\ngallon\ngigabit\ngigabyte\ngram\nhectare\nhour\ninch\nkilobit\nkilobyte\nkilogram\nkilometer\nliter\nmegabit\nmegabyte\nmeter\nmicrosecond\nmile\nmile-scandinavian\nmilliliter\nmillimeter\nmillisecond\nminute\nmonth\nnanosecond\nounce\npercent\npetabyte\npound\nsecond\nstone\nterabit\nterabyte\nweek\nyard\nyear\n\nI built a simple demo for this that let's you enter an arbitrary numeric value, select a unit, and it renders the results in seven different locales:\n\n See the Pen \n Intl Unit Test1 by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nFormatting Bytes\nOk, so the whole reason I actually went down this route of research this week was for a simple task - given a file size in bytes, I wanted to format in kilobytes, megabytes, and so forth. I was curious if Intl maybe had this baked in, and it doesn't... not exactly. As with the blog posts I mentioned from earlier, it's up to you to decide what unit of measure to use, i.e., what makes sense, and then you can use Intl to render it properly.\nNow, here's where I have to make a confession. I had Googled for this, and Google actually spat out a JavaScript function to do this for me. And... from what I could see... it worked well and was kinda clever. Here's the function it created:\n\nThe clever part comes in from figuring out what 'level' of size to use, from byte to terabyte, but doing a bit of match. Honestly, that never would have occurred to me and is a prime reason I fail those high end coding challenges in interviews. I'm ok with that. Probably the only thing I'd change in that is to swap out the default of en-US to navigator.language.\nThat being, I whipped up another CodePen that takes in a set of inputs and renders them for multiple locales. I'll share the CodePen below, but make special note of this:\n\nDon't forget that JavaScript lets you add underscores in numbers to make them easier to read. They're completely ignored by the parser. Alright, here's the demo:\n\n See the Pen \n Untitled by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nLet me know if you've got any questions, or anything else in Intl you would like me to dig into!\n\"Round Measuring Spoons\" by Theen ... is licensed under CC BY-NC-SA 2.0 .", "tags":[ "javascript" ], "categories":[ "development" ] }, { "title": "First Stab at a BoxLang Log Viewer", "date":"Wed Aug 20 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1755712800, "url":"https://www.raymondcamden.com/2025/08/20/first-stab-at-a-boxlang-log-viewer", "content":"The BoxLang folks have a proper "administrator" desktop client coming in the future, but lately I've been finding myself needing a quick way to work with logs and preferring a web-based tool versus using tail in my terminal (I know, I'm crazy like that). I thought I'd take a stab (Halloween is coming soon, can you tell?) at a simple web application that could do what I wanted - let me quickly view a log.\nLogs - Just exactly where are they?\nI had a vague idea of where my logs were, but if I'm building a tool that others may use (I'll be linking to the repo at the end) than I'd need that to be dynamic.\nMy initial attempt made use of the fact that BoxLang code can get access to the current runtime via getBoxRuntime(). The docs for this function are a bit sparse, but that's mostly because the object returned from this is an instance of the Java class. This link, https://apidocs.ortussolutions.com/boxlang/latest.html, will take you to the latest Java source for BoxLang.\nFrom there, you can dig down to the BoxRuntime class and start looking into the various available methods.\nMy first code was pretty simple:\n\nBasically, get the runtime, get the configuration, map it to a structure, and get the log directory. I figured out that last part by simply dumping the result from asStruct() and figuring out what I needed.\nThis worked, but Brad Wood had some interesting comments about this use case. He mentioned (and if I misspeak, blame me, not him), that it's better to get the current Box context instead. He mentioned that configuration could be changed based on how it's being run, and while unlikely, this version was safer:\n\nI perhaps didn't do the best job there channeling Brad's reasoning, but, I truly appreciate how BoxLang makes it easier to get access to low level settings like this. Given this, I placed this within a class, along with two more methods:\n\nMy class supports getting the log directory, getting a list of logs, and getting the contents of a log. As mentioned, I do a bit of checking in getLog() to prevent path traversal types of attacks. Right now I'm just returning the contents, but at the end of this post, I'll share some thoughts about what I would change here.\nThe App\nThe web app itself is a grand total of two pages supported by a bit of JavaScript and CSS. I went with Bootstrap for the UI. I've been preferring Shoelace generally, but thought I'd try the old reliable again. To support that, I created a BoxLang component I can use as a wrapper. I created components/layout.bxm like so:\n\nIt's got little to no logic outside of sniffing for a title attribute and checking the 'mode' of execution, which basically boils down to, am I in the 'opening' of my layout or end. I can then use this like so:\n\nThe home page is just a simple tabular view of the logs:\n\nYou'll notice I'm wrapping the table in my web component, TableSort (which I oddly called 'talbe-sorter' on GitHub - I need to rename that soon). This web component adds sorting to tables by simple wrapping and progressively enhancing an existing data. The only thing I needed to add on top of that was numeric=2, which means treat the second column as a number, and data-sortval="#size#" as a way to provide the pure, numeric size of the log file. Note I'm rendering the size in kilobytes. When I get a chance, I'll write a good generic function to render B/KB/MB/GB/etc.\nHere's the home page in all its loveliness:\n\n\n\nThe next page is a bit more complicated. For now, I'm getting the entire log (and yes, if that's raising red flags in you, stand by) and render it to a textarea. But I also wanted basic sorting as well. For that, I turned to Alpine.js. I'm actually quite rusty with Alpine, it's probably been months since I used it for anything interesting, so that integration took a bit longer than expected just because I had forgotten so much, but once it was done, it worked perfectly. Ok, first the HTML:\n\nThis is fairly simple - get the log, render it in the textarea. But you'll notice a few connections to Alpine via the x- attributes. This is handled by the JavaScript:\n\nBasically - on any change to the filter field, I need to update the textarea. I kept a copy of the original and can use that when searching. As it's a log, I'm considering it as an array of lines that I can filter via simple string match. (I should probably make it case-insensitive as well.) Here's a basic view:\n\n\n\nAnd here's a filtered version:\n\n\n\nYou can find the complete source here, https://github.com/ortus-boxlang/bx-demos/tree/master/webapps/logviewer\nSo about those logs...\nKudos to you if you can see the issues that are going to come out of this demo, specifically, file size. Right now if I click on a multi-gig log file, BoxLang will need to read it completely, it will be sent to the user completely, and even worse, JavaScript is making a copy of it in ram to allow for filtering. This is all going to fail miserably, so what can we do?\nFirst off, BoxLang supports reading ", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Using StringBind in BoxLang", "date":"Mon Aug 18 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1755540000, "url":"https://www.raymondcamden.com/2025/08/18/using-stringbind-in-boxlang", "content":"Ok, to be honest, this is going to be a pretty lightweight post as it's about a simple little string function in BoxLang, but as I discovered it rather recently and was intrigued by what it did.\nSo first off - how did I find this? In the BoxLang docs, there's a whole section on built-in functions and a subcategory just for string. I was looking it over and realized there were quite a few that I had not known existed. There are some interesting ones in there like pascalCase and snakeCase. I was pretty sure I knew exactly how these worked, but I went ahead and built a quick demo that demonstrates both:\n\n \nOk, that works well enough, but let's talk StringBind. StringBind lets you create a string that acts as a template, letting you pass data and re-evaluate the result every time.\nNow, on one hand, you may be wondering why that's necessary, as BoxLang already has a template language support baked in. As a trivial example:\n\nThis works, but is also a one time operation. What I mean is, as soon as you use that string (in my case I printed it, but I could have saved it as well), you can't re-evaluate it. Now typically that also isn't necessary an issue, as you can simply keep creating new versions in a loop or some such:\n\nBut what StringBind gives us is a more abstract way to create a template and re-use it. It begins with a different definition of variable tokens. Instead of pound signs, you wrap tokens with ${name} where the item inside represents a token named name. You can also define tokens with default values, ${name:Nameless}. The name of your token doesn't necessarily need to a valid variable name, so for example, this is allowed as well: ${full name}, which could perhaps be more readable than fullName.\nUsing this feature requires you to define the template, duh, and than call it with stringBind where you'll pass the template and data:\n\nThe template is passed first, the structure of data second. Note that I didn't pass food so it should default. The result is as you expect: This is a big string with Ray and 52. My favorite food is sushi.. Obviously passing food will change the result:\n\nThis gives: This is a big string with Ray and 52. My favorite food is nature valley bars.\nYou can try this yourself below:\n\n \nOk, so fair enough to say, this is one of those functions I don't see using day to day, but I thought it was a pretty cool idea and something I want to keep in my (BoxLang-ified) tool belt for use later. What do people think? I'd love to hear some ideas of how this could be useful, so leave me a comment below!\nPhoto by Steven Van Elk on Unsplash\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "On the Market... again (Hire me!)", "date":"Fri Aug 15 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1755280800, "url":"https://www.raymondcamden.com/2025/08/15/on-the-market-again", "content":"Sadly, I find myself in the same situation I did a few months ago. My time at Foxit has abruptly come to an end. While it didn't work out, I am incredibly proud of what I was able to achieve in such short time. I'm a bit in shock now, but, I love my work, I love helping developers, and I can't not work if my kids want to eat. (Rudely they tend to get hungry - like every single day.) As always, if you know me, and know of an opportunity, I'd love any introductions you can give. I got through this once, I can get through it again!\n", "tags":[ ], "categories":[ "uncategorized" ] }, { "title": "Building a File-Based Router in BoxLang", "date":"Thu Aug 14 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1755194400, "url":"https://www.raymondcamden.com/2025/08/14/building-a-file-based-router-in-boxlang", "content":"Earlier this week I took a look at BoxLang's new rewriting feature (("URL Rewriting with BoxLang MiniServer")[https://www.raymondcamden.com/2025/08/11/url-rewriting-with-boxlang-miniserver]). It basically boils down to telling the miniserver app, "here is a file I want you to run on a 404", and given that you can write code for anything you would like, it's really flexible. I like this approach, but it got me thinking, what if BoxLang also supported a non-code based rewriting system, something where you can define paths, and rewrites, in a file? I took a stab at architecting such a feature and thought I'd share.\nMy Inspiration\nMy inspiration for this idea comes from Netlify's robust Redirect/Rewrite support which has multiple different features. It can map simple paths to one another and also map dynamic paths. It can even create simple proxies, letting you build apps that use client side code to APIs where you can't expose the keys in JavaScript. I took a look at the various options supported by Netlify and decided to try to tackle a subset of them as a proof of concept.\nThe File\nMy input file, rewrites.txt, will be a simple text-based and tab-delimited set of input paths and rewrite destinations. Let's start simple:\n/blog\t/news\n\n# We renamed this in 1921\n/pr\t\t/pressrelease\n\nIn the sample above, I've got two rewrite rules and a comment that should be ignored by the engine. In theory, any non-technical person can grok this and add or modify rules easily enough.\nThe Engine\nAnd now for the engine itself. Again, starting simple, here is my rewriter.bxs:\n\nUp top, I simply default the filename to look for and do a quick check for its existence. Next I've got a basic file parsing utility that will go over every line in the input, split it by tabs, and ensure there's at least 2 values after the split. I use a third space to optionally let you set a status code for the redirect.\nI iterate over the rules and begin with my first supported logic, a simple A=>B type match. If the cgi.path_info matches a from value, I'm going to redirect the user. By default, this is done via bx:location, which means the user will see the new URL. Typically this is what you want I'd say, and the user can bookmark the new location if they want. However, you may also want to 'blindly' do the redirect where the location doesn't change. That's when the 200 status code check comes in and I switch to simply including the new template. You'll note for that to work though you need to redirect to a specific file. Here's an example:\n/blog2\t/news/index.bxm\t200\n\nSplat!\nI love "splat" - as a word it's just fun. That being said, one of the cooler Netlify redirect features is the idea of a wildcard match like so:\n/prods/*\t/products/:splat\n\nIn this case, everything after the path /prods/ becomes the splat value and the direct will include that. In my loop above, I added support like so:\n\nThis just boils down to looking for the asterisk and :splat, and then doing string manipulation to handle the redirect.\nThis worked well but led to another problem.\nMapping URLs to Data\nAfter I supported mapping /prods/foo to /products/foo, I realized this would only work if /products/foo/index.bxm actually existed, which is fine of course. But what if I wanted to map to /products/index.bxm and have the value, foo, available to the code there?\nI began by adding a new rule to my text file:\n/products/*\t/products/:product\n\nAnd then modified my rewriter code like so:\n\nNow it handles cases where the end isn't :splat and considers it a variable. This is stored in the request scope and made available to the included document, which for now assumes index.bxm. All in all it means this set of rules:\n/prods/*\t/products/:splat\n\n/products/*\t/products/:product\n\nWill take a URL like /prods/catbox and redirect to /products/catbox in the browser while then loading products/index.bxm and making a request variable, product, contain the value catbox. Whew. T\nThe Code\nOk, so as I said, this is all a proof of concept and not nearly as powerful as the system Netlify has in place, but it absolutely shows you could build something like that. Again, my idea here was to make it easier to both write rules for our app as well make it easier to read those rules later to understand behavior.\nYou can find the complete demo here, https://github.com/ortus-boxlang/bx-demos/tree/master/webapps/rewritedemo/filebased, and I've included both my text and BoxLang rewrite code below.\nFirst, the text file:\n/blog\t/news\n/blog2\t/news/index.bxm\t200\n\n# We renamed this in 1921\n/pr\t\t/pressrelease\n\n/prods/*\t/products/:splat\n\n/products/*\t/products/:product\n\nAnd now the engine:\n\nPhoto by Susan Q Yin on Unsplash\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Adding Programming Language Detection with Built-in Chrome AI", "date":"Wed Aug 13 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1755108000, "url":"https://www.raymondcamden.com/2025/08/13/adding-programming-language-detection-with-built-in-chrome-ai", "content":"As I've been playing, and thinking, more and more about how to best add Chrome AI support to web apps, I came across an interesting use-case that I think could be helpful, and like in my previous examples, be completely ok if it didn't actually work. When I write on the developer blog at Foxit, I make use of WordPress plugin for code samples. This editor has a place for you to both paste in your code, and select the language so the proper highlighter is used:\n\n\n\nThis works well enough, but it gets a bit annoying to have to constantly keep selecting Python in the dropdown. Ideally the form would use the last language (simple enough via LocalStorage), but I was curious how well Chrome's Prompt API could handle the task.\nTo be clear, this is not the same as the Language Detection API which is good for identifying spoken languages. What I wanted was something that could understand programming languages, or code.\nI forked one my earlier examples and built a form with a textbox and a simple button to kick off the analyzation. So for example, I pasted in the JavaScript code for the actual Code Pen and analyzed that:\n\n\n\n(As a quick aside, after I took this screenshot I was curious if I could disable the spellcheck in the textarea. Turns out you can as easy as spellcheck="false".)\nYou'll notice it had no problem detecting JavaScript. So I threw in a couple of others tests and was surprised how well it worked:\n\nIt had no trouble with Python\nOr HTML and CSS\nI even took the code from this post and it recognized it as Markdown\nI tried an old Perl CGI script - worked!\nI even tried ActionScript - and it worked!\nColdFusion? Yep\nPHP? Yep\n\nAnd how about the ultimate test:\n\n\n\nSo my demo is fairly simple, just printing out the result, but if I wanted to tie it to something like I said above, you could imagine taking the result, comparing it to the list of options in a dropdown for your editor, and selecting one on a match. (Of course, only do this if the user hasn't selected a language already.)\nAs for the code, it's pretty close to my other demos so I'll focus on the AI parts, not so much the DOM parts. First, the session:\n\nAnd then the call:\n\nAnd that's it. I decided against a JSON schema this time as it was so simple, but that could be done as well to help enforce the "one word" response constraint.\nAs with my other demos here, you'll need Chrome Canary with the flags enabled and such, or if you are reading this in the future while flying with your S-Tier jetpack, congratulations!\n\n See the Pen \n Detect Code Language by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nPhoto by Tai Bui on Unsplash\n", "tags":[ "generative ai", "javascript" ], "categories":[ "development" ] }, { "title": "URL Rewriting with BoxLang MiniServer", "date":"Mon Aug 11 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1754935200, "url":"https://www.raymondcamden.com/2025/08/11/url-rewriting-with-boxlang-miniserver", "content":"BoxLang recently released it's 1.4 version, and one of the cooler parts of that update was many improvements to MiniServer. MiniServer is a lightweight web server that makes it easy to spin up and test BoxLang web applications.\nUpdates in the last version included automatic .env loading (which is coming soon to the boxlang CLI as well), websocket support, health checks, and more, but the one I care the most about is URL Rewriting support.\nRewrite support is fairly simple. To turn it on, pass --rewrites when running boxlang-miniserver. This will use the file index.bxm for any request that doesn't match a file (no matter what the extension). You can also specify a particular file as well: boxlang-miniserver --rewrites router.bxs.\nWhen you running MiniServer this way and make a request for something that can't be found, your file will run and you can inspect the request (typically via cgi.path_info) to decide what to do. Here's an example from the docs:\n\nI think the most interesting part of that example is the third one where you can enable clean URLs in the form of, /product/500 or /product/999. For the most part, this all "just" works, but I thought I'd kick the tires a bit and build out two demos.\nBuilding a Mini Blog Server with MiniServer\nI've already built a simple blog in BoxLang earlier this year when I was first learning the platform. I thought it would be interesting to see if I could get BoxLang to grok my 'real' blog source files and URL structure. My blog uses 11ty which is a powerful state site generator built in Node. I've configured my blog to look for blog posts under posts folder. As I've got way too many blog posts, I've organized them by year, month, and day.\nEach blog consists of front-matter on top, and excellent enterprise-grade content in Markdown. Here's an example from the post I wrote this weekend:\n\n\n.gist{font-size: 18px}.gist-meta, .gist-file, .octotree_toggle, ul.comparison-list > li.title,button.button, a.button, span.button, button.minibutton, a.minibutton,span.minibutton, .clone-url-button > .clone-url-link{background: linear-gradient(#202020, #181818) !important;border-color: #383838 !important;border-radius: 0 0 3px 3px !important;text-shadow: none !important;color: #b5b5b5 !important}.markdown-format pre, .markdown-body pre, .markdown-format .highlight pre,.markdown-body .highlight pre, body.blog pre, #facebox pre, .blob-expanded,.terminal, .copyable-terminal, #notebook .input_area, .blob-code-context,.markdown-format code, body.blog pre > code, .api pre, .api code,.CodeMirror,.highlight{background-color: #1D1F21!important;color: #C5C8C6!important}.gist .blob-code{padding: 1px 10px !important;text-align: left;background: #000;border: 0}::selection{background: #24890d;color: #fff;text-shadow: none}::-moz-selection{background: #24890d;color: #fff;text-shadow: none}.blob-num{padding: 10px 8px 9px;text-align: right;color: #6B6B6B!important;border: 0}.blob-code,.blob-code-inner{color: #C5C8C6!important}.pl-c,.pl-c span{color: #969896!important;font-style: italic!important}.pl-c1{color: #DE935F!important}.pl-cce{color: #DE935F!important}.pl-cn{color: #DE935F!important}.pl-coc{color: #DE935F!important}.pl-cos{color: #B5BD68!important}.pl-e{color: #F0C674!important}.pl-ef{color: #F0C674!important}.pl-en{color: #F0C674!important}.pl-enc{color: #DE935F!important}.pl-enf{color: #F0C674!important}.pl-enm{color: #F0C674!important}.pl-ens{color: #DE935F!important}.pl-ent{color: #B294BB!important}.pl-entc{color: #F0C674!important}.pl-enti{color: #F0C674!important;font-weight: 700!important}.pl-entm{color: #C66!important}.pl-eoa{color: #B294BB!important}.pl-eoac{color: #C66!important}.pl-eoac .pl-pde{color: #C66!important}.pl-eoai{color: #B294BB!important}.pl-eoai .pl-pde{color: #B294BB!important}.pl-eoi{color: #F0C674!important}.pl-k{color: #B294BB!important}.pl-ko{color: #B294BB!important}.pl-kolp{color: #B294BB!important}.pl-kos{color: #DE935F!important}.pl-kou{color: #DE935F!important}.pl-mai .pl-sf{color: #C66!important}.pl-mb{color: #B5BD68!important;font-weight: 700!important}.pl-mc{color: #B294BB!important}.pl-mh .pl-pdh{color: #DE935F!important}.pl-mi{color: #B294BB!important;font-style: italic!important}.pl-ml{color: #B5BD68!important}.pl-mm{color: #C66!important}.pl-mp{color: #81A2BE!important}.pl-mp1 .pl-sf{color: #81A2BE!important}.pl-mq{color: #DE935F!important}.pl-mr{color: #B294BB!important}.pl-ms{color: #B294BB!important}.pl-pdb{color: #B5BD68!important;font-weight: 700!important}.pl-pdc{color: #969896!important;font-style: italic!important}.pl-pdc1{color: #DE935F!important}.pl-pde{color: #DE935F!important}.pl-pdi{color: #B294BB!important;font-style: italic!important}.pl-pds{color: #B5BD68!important}.pl-pdv{color: #C66!important}.pl-pse{color: #DE935F!important}.pl-pse .pl-s2{color: #DE935F!important}.pl-s{color: #B294BB!important}.pl-s1{color: #B5BD68!important}.pl-s2{color: #c5c8c6!important}.pl-mp .pl-s3{color: #B294BB!important}.pl-s3{color: #81a2be!important}", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Links For You (8/9/25)", "date":"Sat Aug 09 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1754762400, "url":"https://www.raymondcamden.com/2025/08/09/links-for-you-8925", "content":"Hello friends - another two weeks has gone by which means another links post to share. Sometimes, ok, pretty much every time, I'm shocked at how quickly I have to do these posts. It's like I blink and half a month has flown by. In my last Links post I mentioned dealing with some frustrations, and they've gotten better, but I'm now dealing with the start of school which brings its own challenges. That being said - the family is happy and healthy, I'm employed, so I'll take that as a win. Let's get to the links!\nWhy Women in Tech isn't enough\nFirst up is pretty important post from Salma Alam-Naylor, "Why Woman in Tech isn't enough". As her disclaimer explains, this is her perspective based on personal experience in regards to "non-men" in the tech space. This was a pretty eye-opening piece. I already knew women were underrepresented in tech, but I had no clue that almost half of then leave tech by 35. That's incredibly depressing. Salma discusses why efforts to improve these numbers may not be having the impact desired. While you're at her site, I strongly recommend signing up for her weird wide web hole newsletter as well.\nStop Using CustomEvent\nThe next post is about... wait for it... not using CustomEvent in JavaScript. In this post by Justin Fagnani, he arguments against the use of CustomEvent as opposed to either subclassing the native Event object, or just relying on Event and relying on event.target checking. It's great food for thought!\nUnlocking Beast Mode\nLast but not least, let's unlock the beast mode in our AI tools, specifically in your AI agent within Visual Studio Code. "Beast Mode" is a detailed Markdown file of instructions to help guide how Copilot works when helping you work. Written by Burke Holland from Microsoft, he goes into details into what these directions do and why, and it's a great reminder of how helpful AI can be if given a detailed set of instructions to follow.\nJust For Fun\nMy friends know I've got a thing for covers, and this is a great one my wife found a few days ago. Enjoy!\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Integrating Location Data with Built-in Chrome AI for Better Image Insights", "date":"Thu Aug 07 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1754589600, "url":"https://www.raymondcamden.com/2025/08/07/integrating-location-data-with-built-in-chrome-ai-for-better-image-insights", "content":"A few weeks ago, I shared an interesting demo that integrated location and AI analysis of images using Chrome's Built-in AI support and Mapbox's Revervse Geocoding API. The idea was rather simple - let the user select an image and then:\n\nRun one API call to Mapbox to get the location, if possible, via EXIF information.\nAsk Chrome to analyze the image for items with in it, returned as a list of tags.\n\nYou can see the full code plus more explanation on that previous post, but today I want to share a very cool follow-up suggested by Thomas Steiner on the Chrome team.\nHis suggestion was to see if using the location information could improve the prompt. So to be clear, instead of simply reporting the location and a list of tags, use the location itself in the prompt.\nHere's my updated demo that does just that. Now, for this demo, I wanted specifically to see the improvement, if any, so I actually run a first pass with Chrome's AI and a second pass if location information was found. Usually I'd just report the best set of tags possible, but for this I'll show both.\nAgain, I imagine most of my readers won't be able to run these demos, so here's a few examples of how well this works (spoiler, pretty dang well):\n\n\n\n\n\n\nThese first two represent shots I took in Europe, and the location-based prompt was able to tell me the name of the buildings, which is pretty cool.\n\n\n\nThis last test was pretty interesting. It didn't really get the 'name' per se, "superdome" is returned in both cases but not "Superdome" which feels like it would be more right, but notice how it recognized it as a sports event which is spot on.\nOk, so the code, and again, in a real application I'd not bother showing both outputs, just the best. I'll share just the JavaScript as the HTML/CSS is pretty minimal:\n\nThe important bit is where we modify the prompt if a location was found. The original prompt is:\n"Identify objects found in the image and return an array of tags."\nThe "improved" prompt is:\n"Identify objects found in the image and return an array of tags. Use this photos location to help determine what is in the photo: ${locationStr}"\nI'm seeing now I forgot the apostrophe, but thankfully AI is forgiving. You can see the complete demo below, but be sure to test with Chrome and the proper flags and such enabled:\n\n See the Pen \n MM + AI (Tags + Location Info + Use it in prompt) by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nI'm 100% going to keep iterating on this and if you've got any suggestions, leave me a comment below!\nPhoto by Janayara Machado on Unsplash\n", "tags":[ "generative ai", "javascript" ], "categories":[ "development" ] }, { "title": "Building a Comic Book Reader in BoxLang", "date":"Tue Aug 05 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1754416800, "url":"https://www.raymondcamden.com/2025/08/05/building-a-comic-book-reader-in-boxlang", "content":"I've been a comic book reader for just about the same amount of time as I've been writing code. Any computer using comic book reader (and there's probably quite a few) will know that electronic versions of comics let you read comics on your devices. These comics typically come in one of two formats, CBR and CBZ, which are literally just RAR and ZIP files, nothing more. Over the years, I've had fun building my own web-based readers for this format, with my last one from a bit over three years ago, "Reading Comic Books in the Jamstack". I thought it would be fun to tackle this in BoxLang and see what worked well and what proved difficult. I've got a complete demo done that I'll link to at the end, but let's dig into what I created.\nWorking with Zip and RAR Files in BoxLang\nLet's tackle the easy one first - zip files. BoxLang has native support and I blogged some examples of that a few months ago. So that parts done. Sweet.\nRAR is... problematic. Every time I work with RAR it's a problem.\n\n\n\nMy Googling for Java RAR solutions led to a few places, mostly abandoned code, but finally, a repo with a bit of life at https://github.com/junrar/junrar. It took me a little to get this working in BoxLang, mostly because I was fumbling around a bit with the Jars and trying to parse the documentation, but eventually got a simple use case working:\n\nThe junrar sdk supports more operations than that, but honestly that's all I needed.\nThe Process\nOk, so now comes the complicated part. My plan is to build a web application that lets readers view available comics:\n\n\n\nClicking a comic than loads the first page, with buttons to go to the next (and after clicking once) and previous pages:\n\n\n\nOne possible way to build this would be to read in the comic and parse out the image on every request. While that would work, it would be horribly inefficient. Instead, I built a system that scans for comics, determines which need to be extracted, and then only extracts the newer ones. It will also handle creating the thumbnail seen in the screenshot above.\nMost of this logic is done with a comic class named comic.bx. First, I built a method to return "available" comics, these are comics that have been extracted with a thumbnail created.\n\nBasically, get all the files in the source directory and check the cache. The cached, extracted comic will be stored in a directory based on the filename, ran through a slugify function. I check for the existence of a thumbnail as my marker that the comic is ready. I then proceed to get the images and add the result to my array of available comics.\nThe directoryList filter is important. What I found when extracting comics from my samples is that every one extracted to a subdirectory named for the comic with images underneath that. So my directoryList uses recurse=true to get everything from the root of the cache for the comic and then filter to images.\nNext, I built a function to handle processing new comics:\n\nEssentially - get all of the comics in the source, compare to those that are already processed, and process the remaining ones. Now, I think for the most part this makes sense, basically use the built-in zip extraction for CBZ files and the junrar library for CBR files, but in my testing, I kept getting an error on a few CBR files. I dug up a Windows app, I think 7Zip, to look at the file and discovered that despite having a CBR extension, it was actually a zip file! Hence the OR in this condition:\n\nHonestly I could probably get rid of the first clause I suppose, but I do like that I can read the intent better.\nAfter the images are extracted, I grab the first image and create a thumbnail from it.\nNow, one important question is - when should this code run? There's multiple options that would work:\n\nOn a schedule, using BoxLang's scheduled tasks support.\nIn an admin system of some sort, it could be kicked off manually.\nWhen the application starts up.\n\nI took the final approach, and you can see it in my Application.bx onApplicationStart method:\n\nOf course, you could imagine using all three approaches in an application.\nThe Rest of It...\nThe rest of the application is fairly simple. I'm using Bootstrap for the UI which kept the design rather basic. The home page handles getting and displaying the available comics:\n\nNotice I'm passing the comic slug via the URL to the template that handles rendering comics. That one is a bit more complex as it needs to look at the URL to see which image to display:\n\nFrom the top, I first validate a comic was passed in the path, available via cgi.path_info. This calls a simple utility method in my class:\n\nI'll note that getAvailableComics could be, should be, modified to cache its results. Anyway, back to the template. After validating a proper comic was requested, I then check for image in the URL, defaulting it to 1. I validate the value is a number and within a valid range.\nInside the template, I made use bx:saveContent to store my simple button nav to a", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Creating a Calendar with BoxLang - Part JavaScript", "date":"Mon Aug 04 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1754330400, "url":"https://www.raymondcamden.com/2025/08/04/creating-a-calendar-with-boxlang-part-javascript", "content":"So back in early July, I wrote up two blog posts on building a calendar with BoxLang. If you forgot or (gasp!) didn't see them, you can read the first two parts here:\n\nCreating a Calendar with BoxLang\nCreating a Calendar with BoxLang - Part Deux\n\nIn the first post, I simply focused on rendering a calendar, which is mostly easy but can get a bit tricky based on the HTML/CSS you used. This is one of those cases where CSS can actually make things a heck of a lot easier than a table approach. The follow-up then made the calendar dynamic using an events class that output static (mostly) data. I say 'mostly' because I wanted static dates that were based around the current month so the demo would always have something to show based on when you ran it.\nThis third and final piece was planned, but ran into a bug that was fixed in the BoxLang 1.4.0 release from this weekend. Woot! With that new release, I can share this final version, which honestly isn't a big deal technically, but does demonstrate a pretty different approach from the last version. Now, instead of generating the calendar completely on the server, instead I'll make use of FullCalendar to render the calendar in JavaScript with BoxLang providing the data via HTTP.\nLet's do the BoxLang change first. Here's the original class I built:\n\nAs I said, it's static, but a bit dynamic as the data is all based around the current date and time. Normally this would be a lot shorter and based on a database query or some other logic. If I want to turn this into something a client-side library can use, I have to take this one line of code:\n\nAnd change it to:\n\nLiterally, that's it. As long as the class is under web root, I can then make an HTTP call to events.bx and pass a query param to specify the method to run, in this case: events.bx?method=getEvents. Now, as I said, this is a simple little demo, and in more complex cases it may involve a step or two more. For example, a class may not under web root, may be cached in the application and so forth. In cases like that, you can create a new class under your web root specifically to proxy calls to the cached internal classes. This can also do things like adding their own caching layer, validation, and more. But for now, I just flipped the bit and I've got an API.\nThe next step is to work with FullCalendar. For my demo, I went with the simplest version of their quick starts that just add a script tag and a few lines of code. This is their initial version from the quick start, with a bit of additional CSS to size the calendar:\n\nTheir docs are pretty intensive, but I focused on event sourcing and specifically, sourcing the events as an array, which at minimum requires an array of events that include a title, start, and optionally end values. There's definitely more, but that's the bare minimum and also works well with my date.\nHere's the modified JavaScript:\n\nI now make a call to the BoxLang class to get my events and modify the values to match what FullCalendar wants. Finally, I smply pass it to the constructor. Here's how it looks, and keep in mind, I didn't do any stying on this and I absolutely could have to make it match a site theme and so forth:\n\n\n\nTo add interactivity I'd need to write a bit more JavaScript, but this demonstrates the basic process. It's also a good reminder when using BoxLang for web apps that you always have a choice between what you do server-side versus client-side. Options are good!\nIf you want to see any of these calendar examples, head over to the BoxLang GitHub repo here, https://github.com/ortus-boxlang/bx-demos/tree/master/misc/calendar\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Progressively Enhancing Product Reviews with Chrome AI", "date":"Thu Jul 31 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1753984800, "url":"https://www.raymondcamden.com/2025/07/31/progressively-enhancing-product-reviews-with-chrome-ai", "content":"While writing up my last blog post I mentioned that a new idea had occurred to me in regards to employing sentimenet analysis with Chrome's built-in AI support (that, remember, is still way in beta). At lunch today I took a quick stab at a simple demo of what I had in mind and honestly, I'm pretty happy with how it came out.\nThe Initial Demo\nThe idea I had was an "imagined" ecommerce site with product reviews. I went to Google AI Studio and used a prompt to generate a set of product reviews. I used this prompt:\n\nGenerate a list of 20 product reviews for a cat carrier named Cat Carrier Ultra 1000. The reviews should be a mix of positive and negative, with some being extremely positive or negative. For each review, include the text, a made up name, and a date formatted like \"July 31, 2025\" - the dates should be random but from the past month or so\n\nI also defined a schema in the structured output section:\n\n\n\nI asked for an array of reviews including a text, name, and date value. This worked fine except the reviews were in random order and set in 2024 for some reason. I just followed up with:\n\nsort the reviews such that the newest review is first, and use dates in 2025\n\nThis gave me a nice JSON data set I could use (I got 20 back but I'm cutting out a few for length):\n\nWith this in place, I started off with just a demo to render this out. First, the HTML:\n\nAnd then the JavaScript. I copied the data above as is, but changed it from an object to just an array. I won't include it in the sample below:\n\nAfter a bit of CSS (and I cheated a bit, I asked Gemini for help), I get this nice display:\n\n\n\nOk, let's enhance this with some client-side AI!\nAdding Sentiment Analysis\nAs I covered in my previous post, I do sentiment analysis with the Prompt API by:\n\nDefining a system message defining what the LLM should do: "You rate the sentiment value of text, giving it a score from 0 to 1 with 0 being the most negative, and 1 being the most positive."\nUse structured output to fully define the shape of the result:\n\n\nGiven this, I can create a session:\n\nAnd then execute it on ad hoc content like so:\n\nAlright, so given that approach, I begin by checking for support, and once again, I'm being lazy and not supporting "you can do this after you download the model..."\n\nThen later in my init:\n\nThe return up there just leaves the init function as I'm doing this after everything else. Remember, the idea here is to progressively enhance the experience for folks who can do this, not ruin it for everyone else.\nThe magic happens in processProductReviews:\n\nSo, lets break this down. First off, I'm doing this operation in a synchronous fashion over each review in order. In theory, I could do multiple calls at once although I haven't tried that with built-in AI support. My thinking is that this synchronous approach is ok as it will "decorate" from the top up and handle the items the user sees first most likely. I'm not entirely sold on this approach, but it seemed to make sense.\nIn the loop it's just a simple matter of calling the model with the review text and asking for the score. As the order of review objects matches what I displayed in the DOM, I can use nth-child CSS selectors to find them. Now for the part that's a bit arbitrary. I decided the values of .7 and higher would be positive and .2 and lower would be negative. That just seemed to make sense to me, but certainly that could be tweaked. All I do for those conditions is add a CSS class which changes the blue border of the review - as you can see here:\n\n\n\nI kinda like how subtle this is, but certainly you could imagine a different way of modifying the review. Also remember that a tool like this could be real useful in an admin interface where customer support specialists are looking at lots of reviews at one time. You get the idea.\nNow usually when I embed these demos, I warn folks that it won't work for them, but in this case, it does render the reviews just fine, but most of you won't get the 'enhanced' display. In my not-scientific-at-all testing, I usually saw results within a few seconds. Anyway, let me know what you think!\n\n See the Pen \n Prompt to Sentiment (2) by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nPhoto by Sahand Babali on Unsplash\n", "tags":[ "generative ai", "javascript" ], "categories":[ "development" ] }, { "title": "Using Chrome AI for Sentiment Analysis (Again)", "date":"Tue Jul 29 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1753812000, "url":"https://www.raymondcamden.com/2025/07/29/using-chrome-ai-for-sentiment-analysis", "content":"Every now and then I get an idea for a blog post/demo, prepare to write about it, and realize I've actually covered the topic in the past. Sometimes, though, it works out really well especially when the technology has changed quite a bit. Almost a year ago, I blogged about doing sentiment analysis with Chrome's AI upcoming AI feature. At the time, it worked.... ok. The biggest issue at the time was the inability to provide a system instruction to the model as well as being able to shape the response a particular way. Thankfully, both of those are now supported.\nAs a reminder, the prompt API for the web is still in an origin trial, see the docs for more information and join the EPP to get access to forum and such.\nThe Demo\nOk, so as I mentioned, the two biggest issues when I first tried this was the lack of system instructions or the ability to specify a specific, structured response. Adding a system prompt is now fairly simple - this example is modified from the docs for initial prompts:\n\nNotice I've specified the kind of output I want as well as explaining how I want the model to act. But that's not enough to ensure you get exactly what you ask for. This is now doable by passing a JSON schema to your prompt.\nMy schema is fairly simple:\n\nJSON Schema is pretty handy so be sure to check their site for more information. Also see Thomas Steiner's blog post on structured output.\nSo putting the two together, I can get a sentiment value with input like so. First, some simple HTML for the demo:\n\nAnd then the JavaScript. I'm checking for support, but as I've mentioned before, I'm being lazy by not checking for a supported browser that hasn't downloaded the model yet. That being said, here's the JavaScript:\n\nI'll embed the demo below, but my assumption is that a lot of you won't be able to run it yet, so here's some sample inputs and output:\n\ni kinda like dogs. im not sure. they are fun to play with for sure\n\nResult: 0.7\n\ni don't think I like cats. maybe i've just been fooling people for years now. dont tell anyone - im ashamed...\n\nResult: 0.2\nI asked Gemini to generate a very negative product review for a shovel:\n\nThe Foo shovel is an absolute catastrophe of a tool and I wouldn't wish it upon my worst enemy. On its very first use in my Lafayette garden, the flimsy metal scoop bent into a useless, crumpled shape when it met soil that was only slightly compacted. The handle feels like it's made of cheap, hollow plastic and flexed so much I was sure it would snap and send me flying. This isn't just a poorly made product; it's an insult to the very concept of a shovel. Avoid the Foo at all costs unless you're looking for an expensive, oddly-shaped piece of garbage to take up space in your shed.\n\nThis is incredibly negative and gives... 0.0. I then asked for an overly positive shovel review (why shovels - I don't know - I don't work in the dirt and I hate gardening):\n\nThe Foo shovel is an absolute triumph of engineering and has completely revolutionized my gardening work. From the moment I picked it up, I could feel the superior quality; its perfect balance and comfortable, ergonomic grip make it a joy to use, even for hours on end. I tested it against the tough, clay-heavy soil we have here in Lafayette, and it sliced through dirt and roots with an ease I've never experienced before, turning a daunting task into a satisfying one. The high-carbon steel blade is incredibly durable and shows no sign of wear, proving this tool is a long-term investment. Honestly, this is the shovel I've been looking for my entire adult life, and it has earned its place as the undisputed champion of my tool shed.\n\nNot surprisingly, this gave me 1.0 as a result.\nSo obviously, this isn't going to be perfect, but given that it's on device, it could be helpful in a CMS or other web app where you may want to ensure your content isn't overly negative. It could also provide visual feedback and heck, I just figured out what my next blog post will cover. Anyway, the full embed is below, give it a try (if you can) and let me know what you think.\n\n See the Pen \n Prompt to Sentiment (2) by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\n\n", "tags":[ "generative ai", "javascript" ], "categories":[ "development" ] }, { "title": "Links For You (7/27/25)", "date":"Sun Jul 27 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1753639200, "url":"https://www.raymondcamden.com/2025/07/27/links-for-you-72725", "content":"Good afternoon, programs. This past week was... frustrating. Incredibly slow. Don't really want to get into it but luckily I've had a very lazy and relaxing weekend. I'm counting my blessings but - like I said - frustrating. Let's just get to the links, shall we?\nImporting JSON is Easier Now\nNormally when importing JSON into my code, I'll do a fetch and parse the response into JSON. Not a big deal, but, it's now simpler as explained by Thomas Steiner on the web.dev blog: "JSON module scripts are now Baseline Newly available". This feature is "Baseline" available means it works in modern browsers. Check the post for a full example, but here's a one-liner:\n\nI think for the most part it just works, but do note the warning in the post to ensure you server JSON files with the right content type. (Also, Thomas Steiner is the guy who helps me/comments on my Chrome AI posts and he's been super helpful!)\nOld School Weather\nI love weather apps, sites, and APIs. I can't get enough of them. I especially love this old-school retro-TV interface at WeatherStar 3000+.\n\n\n\nLiterature and Calendars\nI've recently done a few posts on calendars with BoxLang, so calendars have been on my mind lately. This post on Reactor discusses different books and calendaring systems, specifically focusing on how it impacts the story, reflects what's important to the society discussed in the books, and so forth. It sounds very academic, but it's honestly a good short read and great food for thought.\nJust For Fun\nLastly, a few days ago my wife introduced me to Laufey, an Icelandic singer who is a bit Bluesy, folksy, poppy, etc. A fantastic blend. I feel like I'm still getting to know her music so while this track may not be my favorite so far, I thought it was a pretty cool video. Enjoy!\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Getting Image Insights with Built-in Chrome AI and EXIF Data", "date":"Fri Jul 25 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1753466400, "url":"https://www.raymondcamden.com/2025/07/25/getting-image-insights-with-built-in-chrome-ai-and-exif-data", "content":"It's been a busy few weeks for Chrome's Built-in AI support. Since the last time I blogged about it, four features have gone GA (which still means they are Chrome only but not behind a flag anymore):\n\nTranslator\nSummarizer\nLanguage Detector\nPrompt API (for extensions only)\n\nAnd while announced back at the end of May, Gemma 3n as a model is available in Canary, Dev, and Beta Chrome builds.\nTo be clear, the percentage of folks who can use these new features is still really low, but all of these features also work really well in progressive enhancement, and can be backed up by server calls to an API if need be. I continue to be really excited about the possibilities these APIs unlock, and thought I'd share a new demo I built.\nBack towards the end of May, I blogged about new multi-modal support in Chrome's Built-in AI. My demo promptly stopped working at some point and I corrected that. You can see this in action in the CodePen below, but keep in mind it still requires flags enabled and such. As always, join the EPP for more information.\n\n See the Pen \n MM + AI (Tags) (v2) by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nSo, that's the updated version of my previous blog post. I know most of you won't be able to run it, but it basically lets you select an image and hit analyze. It uses Chrome's built-in support to figure out what's in the image and return a list of tags. Here's an example:\n\n\n\nCool, so what's the new demo I want to share? It occurred to me that these APIs do not need to work in isolation and could be mashed up with others to provide even more value. With this in mind I built a new demo that does the following:\n\nGet the EXIF data from the image\nLook for longitude and latitude values\nIf they exist, pass them to Mapbox's Reverse Geocoding API to get the location\nJoin this with what Chrome gets back as well\n\nTo do this, I first searched for an EXIF library and found exif-js. I found the docs to be a bit lacking, and it doesn't support Promises, but I was able to get around that by wrapping the logic in my own Promise.\nThe EXIF information, if it exists, will be in four tags:\n\nGPSLongitude\nGPSLongitudeRef\nGPSLatitude\nGPSLatitudeRef\n\nThe values are in degrees and such, so math has to be done to translate it to decimal values. I also discovered that the library caches EXIF results in the DOM which means manually deleting it if you are using the same image DOM element as my tool uses. Here's my function:\n\nIf the values exist, I can then pass them to Mapbox's API:\n\nNotice that I'm only working with one small part of their API result to keep things simple.\nAlright, so all of the above is now part of my image analyzation routine. This is mostly what the previous blog past had, updated for the most recent updates, and now including my EXIF/ReverseGeoCode call:\n\nThere's two things I want to call out here. First, I'm doing my EXIF/Geocode call in a blocking manner, and then the AI call. It would be better if the location stuff and AI stuff both fired and then I used Promise.all to get the results when done. However, in my testing, the EXIF/ReverseGeoCode was done in a split second, incredibly fast, so I figured I wouldn't bother.\nFinally, and I've mentioned this before, but Chrome's Built-In AI stuff can be unsupported in the browser, supported and ready to go, or supported but needing to wait for the model to download the first time. My code rarely bothers with the last option and it should in a "real" app. I keep telling myself I'll include that in demos, but honestly, I think I'll wait to worry about that till this is GA.\nSo, how does it work? Again, I assume most of you can't run this yet, so here are a few examples:\n\n\n\n\n\n\n\n\n\nHere's the complete demo:\n\n See the Pen \n MM + AI (Tags) (v2) by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nIf you've played with these APIs, I'd love to know - leave me a comment below!\n", "tags":[ "generative ai", "javascript" ], "categories":[ "development" ] }, { "title": "Using AgentQL and Pipedream to Fix Missing RSS Feeds", "date":"Wed Jul 23 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1753293600, "url":"https://www.raymondcamden.com/2025/07/23/using-agentql-and-pipedream-to-fix-missing-rss-feeds", "content":"Last week I blogged about how I used AgentQL to scrape a web page, this blog to be precise, into pure data. If you don't remember, AgentQL lets you pass a simple query string that is run against a web page and parsed into data. So for example, I was able to use this query on my home page to get a list of entries in pure data:\n{\n blogposts[] {\n url\n title\n\t date\n }\n}\n\nThe REST API was incredibly easy, and I demonstrated in BoxLang how I could use AgentQL to turn my blog's home page into a much simpler, smaller, HTML version. This of course begs the question, how else could we transform it? What about creating a RSS feed for a blog that doesn't have one!\n Of course, if your blog does *not* have a RSS feed... you should just add it!\nThe Blog In Question\nThe blog I was trying to create an RSS feed from is on Google's developer blog, specifically focused on the Gemini AI product: https://developers.googleblog.com/en/search/?product_categories=Gemini. I did not notice an RSS mentioned in the UI, and when I did a View Source and looked for xml, feed, etc., I wasn't able to find it. To be clear, they may indeed have an RSS feed and I just don't see it. But that's ok, it wouldn't have stopped me from building this demo anyway. ;)\nUpdating My Query\nAs I showed above, it's relatively simple to write the AgentQL query to get a list of blog posts, but I knew that if I wanted to create an RSS feed I'd need the date in a different format. My original query returned the date as you see on the page, July 22, 2025 for example. AgentQL lets you pass 'hints' to the query, so I tried a few things and eventually ended up here:\n{\n blogposts[] {\n url\n title\n\tdate(convert to time since epoch)\n }\n}\n\nI tested this using their browser extension and it worked fine, since of course I can convert epoch to real time in my head. Here's part of the response (I removed a few entries to keep the output shorter):\n\nCool, now I've got a good query, time to build a workflow.\nBuilding the Workflow with Pipedream\nI went, of course, to Pipedream, my workflow service of choice. (Although I've been using n8n as well lately and will have some blog content on it soon.) Here's a visual representation of the workflow I created:\n\n\n\nThe first item in the workflow is simply a HTTP trigger. This gives me a URL I can use for the RSS feed.\nThe second item is a bit of Python code meant to define variables I use later in the flow. Pipedream supports environment variables of course, but these values are more like constants. Here they are:\n\nAs the comment says, the first value is the URL I'm parsing and the next three are used when generating the RSS.\nThe third step in my flow uses AgentQL, but also makes use of a Pipedream feature, Data Stores, for a lightweight key/value caching system. In the step itself, I configured it to use a particular store, and I then reference it in the code. Here's the entire step:\n\nThe cache check is up on top and I print out a message just to confirm the cache is working. At the bottom of the step, you can see where I store the value with an hour cache. To be honest, I could probably cache for a heck of a lot longer. The rest of the code is simply me hitting AgentQL's REST API, much like the code in my previous blog post, except in Python now.\nThe fourth step actually generates the RSS. For that I make use of a Python library called python-feedgen. For the most part, this is relatively simple, except for two small things. Let me share the code first:\n\nOk, for the most part, this looks relatively easy, right? The first issue I ran into however was that I needed my datetime value to have a timezone. I kinda thought the Python datetime value I got from converting the epoch time would have a "natural" timezone, but it did not. I Googled, saw the pytz library, and basically copied over the code it used. The actual timezone is back in my Define_Constants step and was a bit arbitrary. I figured Google is in California so I'd used that timezone.\nNow, the last few lines are the most confusing. The rss_str returns a binary, not "regular" string of XML. I have no idea why. There's probably a good reason and I asked on their repo about it. But it took all of one additional line to make it a string.\nAnd that's it! The last step is just a built-in Pipedream action to output an HTTP response and for that, I used the result of the last step. I also added the appropriate header:\n\n\n\nAnd that's it - I mean for real this time. You can see the generated RSS here: https://eop3qtblng22rbi.m.pipedream.net/. I do wish it returned a bit quicker. I could, in theory, cache the RSS string instead of the data and return earlier, and it may help, but I'm fine with it now. If you are a Pipedream user and want to see the raw source of the flow, you can find it here: https://github.com/cfjedimaster/General-Pipedream-AI-Stuff/tree/production/rss-from-gemini-blog-p_G6C5QeB\nPhoto by Ella Ivanescu on Unsplash\n", "tags":[ "python", "pipedream" ], "categories":[ "development" ] }, { "title": "Simple Charting with BoxLang", "date":"Fri Jul 18 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1752861600, "url":"https://www.raymondcamden.com/2025/07/18/simple-charting-with-boxlang", "content":"Building a BoxLang and want to know how to do charting with it? The answer is simple... don't!\nI kid! Sorry, but for many, far too many, years now I've argued that ColdFusion should not include a charting library. It's a server-side language, and in my (definitely not) humble opinion, client-side code doesn't belong there. (I'm fine not worrying about that though - I trust that team knows their clients better than I do and knows what they're doing.)\nThe good news (again, imo) is that BoxLang doesn't ship with an embedded client-side charting library. That being, I can absolutely see cases where you may be building a web app in BoxLang and want to add charting to it. Even though there's nothing in BoxLang that will create a chart for you, it can definitely help you build those charts. Here's a few simple examples.\nThe Data\nFor my charts, I'm just going to render a set of sales data over a few months. I built a class with some static data:\n\nI considered making sales random, but I really wanted the chart to look the same for every reload.\nThe Charting Library\nAny charting library would be fine, but I went with Chart.js as it was the first one that I remembered. There's probably a good twenty to thirty other different options you can use as well. I started off by creating a BXM file (BoxLang tag-based template) and literally copying over the sample from the Chart.js Getting Started guide. This was just a sanity test to ensure things worked ok.\nThe First Demo\nFor my first example, I decided to bundle the logic to get the data into BoxLang itself and output dynamic JavaScript in the response. This means when the page is viewed by the user, they're getting everything they need, and just need to load the charting library and execute the code to render it. Here's the template as a whole, and I'll explain the bits after:\n\nThe beginning of the template creates an instance of my data class, gets the data, and then filters out the array to a new array of labels and sales. Generally speaking, I don't like to put a lot of logic on top of templates like this - it was (usually) a bad idea in the ColdFusion world and not one I want to recreate in BoxLang, but as it's 3 lines - I'll deal with it.\nMoving on down - the last dynamic portion is converting those two values to JSON and including it in the JavaScript. I wrapped that portion with bx:output to flag the parser to replace variables within the tag pair. Nice and simple, right? Here's how it renders:\n\n\n\nThe Better Demo\nOk, that first version worked, but honestly, I could do less on the server and more on the client if I change things up a bit. Remember that class I made earlier? I can turn it into an API in about 1 second by changing public to remote on the access property of the method:\n\nAnd literally, that's it. As long as that file is under webroot somewhere, I can now get the code in JavaScript by hitting it at datasource.bx?method=getSales. Here's the new version of the template that uses BoxLang for data, but renders the HTML/JS as is, no server-side parsing at all:\n\nNote how in the JavaScript, I was able to copy and paste the BoxLang syntax right into JavaScript. Obviously that won't always work, but it's darn handy when it does. While I named this file with the bxm extension, I didn't really need to do that and would have used html in a "real" application.\nFeel free to grab these files up on the BoxLang demos repo, https://github.com/ortus-boxlang/bx-demos/tree/master/misc/charting_demos.\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Extracting Data from Web Pages with AgentQL and BoxLang", "date":"Wed Jul 16 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1752688800, "url":"https://www.raymondcamden.com/2025/07/16/extracting-data-from-web-pages-with-agentql-and-boxlang", "content":"I discovered AgentQL a few weeks ago and have been thinking about it quite a bit. In a nutshell, it lets you perform queries against a web page. They've got a simple query language that kinda reminds me of GraphQL, but simpler. So for example, consider the page you are on right now - if I wanted to get the tags, I could use this query:\n{\n\ttags[]\n}\n\nAnd it would return:\n\nWhat if I wanted the links? I could change my query to express this:\n{ \n tags[] {\n label\n url\n }\n}\n\nAnd then get:\n\nTheir API supports both integration with Playwright for complex parsing (go to a page, find the search button, enter cats, search, get the results) and simpler 'go to a url and get stuff' workflows as well. They even have a handy browser extension that lets you test directly in the browser (that's how I got the results above).\nThis API is seriously powerful, and I've got some demos for other blog posts I want to share soon, but I thought I'd share a quick example of using their REST API with BoxLang. First, I started with a simple idea - hit my blog home page and turn the list of articles into an array of data. While my blog has an RSS feed, this would be super helpful for sites that do not.\nFirst off - their docs for the REST API show it's relatively simple. You pass the URL, the query, your key of course, and that's it. You can pass additional optional arg for thigs like, "wait X seconds before you scrape" and such, and you can even ask for a screenshot, but the basic operation is relatively simple. Let's look at an example:\n\nI begin by checking and getting a key from my local environment, because I never use keys in my code. Ever. (Ok that's a lie, I did for this one and then changed it to use the environment value before blogging. ;)\nMy query is looking for blog posts, as an array, and specifically the URL, title, and date. I put this along with the URL into my body and send it to the endpoint. The result contains two keys, data and metadata. You can see the result below:\n\nPretty slick, right? Your next question may be - what can we do with this data? What if we took it, and recreated the blog in a much simpler HTML version. Check out this version (as it uses some Markdown and my blog didn't like that, I switched to a gist):\n\n\n.gist{font-size: 18px}.gist-meta, .gist-file, .octotree_toggle, ul.comparison-list > li.title,button.button, a.button, span.button, button.minibutton, a.minibutton,span.minibutton, .clone-url-button > .clone-url-link{background: linear-gradient(#202020, #181818) !important;border-color: #383838 !important;border-radius: 0 0 3px 3px !important;text-shadow: none !important;color: #b5b5b5 !important}.markdown-format pre, .markdown-body pre, .markdown-format .highlight pre,.markdown-body .highlight pre, body.blog pre, #facebox pre, .blob-expanded,.terminal, .copyable-terminal, #notebook .input_area, .blob-code-context,.markdown-format code, body.blog pre > code, .api pre, .api code,.CodeMirror,.highlight{background-color: #1D1F21!important;color: #C5C8C6!important}.gist .blob-code{padding: 1px 10px !important;text-align: left;background: #000;border: 0}::selection{background: #24890d;color: #fff;text-shadow: none}::-moz-selection{background: #24890d;color: #fff;text-shadow: none}.blob-num{padding: 10px 8px 9px;text-align: right;color: #6B6B6B!important;border: 0}.blob-code,.blob-code-inner{color: #C5C8C6!important}.pl-c,.pl-c span{color: #969896!important;font-style: italic!important}.pl-c1{color: #DE935F!important}.pl-cce{color: #DE935F!important}.pl-cn{color: #DE935F!important}.pl-coc{color: #DE935F!important}.pl-cos{color: #B5BD68!important}.pl-e{color: #F0C674!important}.pl-ef{color: #F0C674!important}.pl-en{color: #F0C674!important}.pl-enc{color: #DE935F!important}.pl-enf{color: #F0C674!important}.pl-enm{color: #F0C674!important}.pl-ens{color: #DE935F!important}.pl-ent{color: #B294BB!important}.pl-entc{color: #F0C674!important}.pl-enti{color: #F0C674!important;font-weight: 700!important}.pl-entm{color: #C66!important}.pl-eoa{color: #B294BB!important}.pl-eoac{color: #C66!important}.pl-eoac .pl-pde{color: #C66!important}.pl-eoai{color: #B294BB!important}.pl-eoai .pl-pde{color: #B294BB!important}.pl-eoi{color: #F0C674!important}.pl-k{color: #B294BB!important}.pl-ko{color: #B294BB!important}.pl-kolp{color: #B294BB!important}.pl-kos{color: #DE935F!important}.pl-kou{color: #DE935F!important}.pl-mai .pl-sf{color: #C66!important}.pl-mb{color: #B5BD68!important;font-weight: 700!important}.pl-mc{color: #B294BB!important}.pl-mh .pl-pdh{color: #DE935F!important}.pl-mi{color: #B294BB!important;font-style: italic!important}.pl-ml{color: #B5BD68!important}.pl-mm{color: #C66!important}.pl-mp{color: #81A2BE!important}.pl-mp1 .pl-sf{color: #81A2BE!important}.pl-mq{color: #DE935F!important}.pl-mr{color: #B294BB!important}.pl-ms{color: #B294BB!important}.pl-pdb{color: #B5BD68!important;font-weight: 700!important}.pl-pdc{color: #969896!important;font-style: italic!important}.pl-pdc1{color: #D", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Cleaning Up My Print View with CSS Media Queries", "date":"Mon Jul 14 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1752516000, "url":"https://www.raymondcamden.com/2025/07/14/cleaning-up-my-print-view-with-css-media-queries", "content":"I don't know why this popped into my head today, but I was thinking about the print version of this page, and others, and what steps could be done to improve the result. Specifically, I was thinking a lot about what should be hidden from the print version as it has no real meaning on paper, or in PDF. With that in mind, I did a quick test - just how well do my pages print now? You can see the result below:\n\nHonestly, I think that's just fine! And I give a lot of credit for that to the blog design I paid for and implemented years ago. That being said, note that on page 6, the real content ends and the entire rest of the page, and all of page 7, isn't really important. These items include:\n\nThe "Support this Content" block, which is pretty important to me, but not necessary in a PDF version.\nRelated content - sure the links will work in a PDF (not paper obviously), but given that the user printed this particular post, this extraneous content isn't really useful.\nThe comments - I love it when folks comment, but again, in a PDF version this isn't necessarily important. Now, it's possible there's great feedback in the contents you want to preserve, but I'm going to go with the idea that you want to focus on the core article itself.\nThe share menu - again, useless for print.\nThe final site footer which includes my name and other stuff. That's important for the site, not for a PDF/printed version, especially since the URL is already included in the output.\nWhile not present in the PDF, the ad is still present.\nOn, and the black header on top isn't really needed either.\n\nThat's quite a bit we can get rid of - how should we do it? The first thing I did was search of course, and the AI answer from Google was pretty spot on, and matched what I had expected, a simple CSS media query:\n\nThat was easy, but before I began testing, I then Google for something else. My plan was to edit the CSS in my editor, go to the browser and hit CTRL+P and see the results. Turns out you don't need to, at least on Chromium browsers (I'm using Edge right now). Go into your DevTools, ensure the Rendering tab is available (it wasn't for me, so hit the + sign to add it), and scroll down to Emulate CSS media type. Once you've found it, select print:\n\n\n\nAs soon as you do this, you'll see the print version of your site, although keep in mind it isn't the exact same as the PDF output, namely you don't see the header and footer that are placed there in the PDF.\nOnce I had that, it was simply a matter and using DevTools to identify elements I wanted to nuke and add them one by one. Here's the full list I used for my site:\n\nAfter adding this change, here's the new PDF version:\n\nThe file size is also a bit smaller too which is nice. Unfortunately there's a grand total of one line on page 6, but I don't think there's anything you can do about that. Although it wouldn't surprise me if CSS somehow supports a fix for this.\nAnd... I'm glad I googled before I published, because of course CSS can that, via the orphans and widows properties. It took me a bit to get the values just right, but from what I can see, this adjusts the line spacing a bit to not leave a page so empty. I used this CSS:\n\nAnd this was the result:\n\nAs you can see, page 6 is a bit less empty now.\nFinally, and I struggled with this, I added div.post-thumbnail to my list of things to exclude. I love my cute pictures on top... but that's all they are - a cute picture. This final version of the printed PDF is now down to 5 pages.\n\nBut wait - there's more...\nFor my particular test, I inline all my CSS and minify it in my build process, so it's just included in a big clump of data. I could have also used a completely different file, loaded via link with the media attribute:\n\nAnd of course, you can find out more at MDN: Printing. While there, make note of break-inside, which can help you avoid having tables and images over page breaks.\nThat's it for my changes here. I think more could be done, but I'm pretty happy with the updates.\nPhoto by 宁 宁 on Unsplash\n", "tags":[ "css" ], "categories":[ "development" ] }, { "title": "Links For You (7/13/25)", "date":"Sun Jul 13 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1752429600, "url":"https://www.raymondcamden.com/2025/07/13/links-for-you-71325", "content":"My goal for this series of posts is to share interesting links every two weeks, and I've noticed that sometimes it feels like a split second between when these posts go out. I'm actually a week or so late on this one, which is fine, but dang does time go by quickly. Usually summer is pretty slow, but with the new job, new product launch, and lots of camps for the kids, I don't feel like it's ever let up. Despite that, I've managed to put in near ten hours of Star Wars Outlaws this weekend, so I'm still getting a chance to catch my breath. I put the controller down for a bit so I can share these fun links with yall. Enjoy!\nUsing Transformers.js to Find Related Posts\nHere's a really cool example of GenAI-style tech used for content - finding related posts using Transformers.js. The example given here is for a blog written in Astro, but could be applied to any other tech, like Eleventy. (And if someone asks, heck, I'll make an example of that.) For my blog, I'm using an API call with Algolia, but this solution would be all done on your server, and at build time. I'm not sure it would work for this blog due to the size of the content, but I may give it a shot later this week.\nWhat Script is This?\nNext up is an excellent look at something I've never considered before - using JavaScript to determine which script block/tag it exists in. In his post, Alex MacArthur looks at document.currentScript and how it could be helpful to web developers. This is a feature I've never heard of, and it's been around for a decade.\nUsing AI for Fitness\nFor the last link, I'll share a post that's both cool and inspiring, Using AI to Get Fit, by one of my best friends, Scott Stroz. In it he talks about how he made use of MCP, Claude, and Spotify, to help build a playlist to aid in his exercise routine.\nJust For Fun\nNext time you make a quick GitHub repository, hope and pray you aren't accidentally triggering a huge milestone.\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Using GenAI to Create a SDK from Sample Code", "date":"Fri Jul 11 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1752256800, "url":"https://www.raymondcamden.com/2025/07/11/using-genai-to-create-a-sdk-from-sample-code", "content":"I've been experimenting more and more with AI-assisted coding (not gonna call it vibe coding, even when I do), and the results have been incredibly interesting. Today, I decided to try something interesting - generating a SDK for an API.\nThere are multiple tools out there that can convert an OpenAPI specification to an SDK (and those tools I've seen are pretty darn cool), but I wanted to attempt another route. Earlier this month I blogged about the new Foxit PDF APIs I'm working with. These APIs are all really simple, which is good of course, but when prepping for the release, I wanted to build code samples for every possible operation.\nI did so, and they're up in a repo. I've got a complete set of Python examples here: https://github.com/foxitsoftware/developerapidemos/tree/main/pdfservices/python If you look at any one of them, and then another, you'll see they are very similar:\n\nUpload a doc.\nCall an API.\nCheck the API status.\nDownload the result.\n\nI was curious how well Copilot (in Visual Studio Code) could handle a request to turn this into a SDK. I began by going into my Python folder (my Node folder isn't quite complete yet), and asked:\nthis folder contains a set of samples that make use of a PDF Service API. \nI'd like to build a one page Python class as a simple lightweight SDK \nwrapper. It should cover at least Word to PDF and PDF to Word initially. \nThe developer will make an instance of this class and pass in their \ncredentials for ease of use.\n\nNotice I focused on two examples, Word to PDF and PDF to Word. I wanted Copilot to start small. Here's part of the response, and it's near perfect in understanding:\nI have reviewed both wordToPDF.py and pdfToWord.py. Both scripts use \nsimilar logic for authentication, uploading documents, starting a \nconversion task, polling for completion, and downloading the result.\n\nI will now create a single Python class, PDFServiceSDK, that wraps \nthis logic for both Word-to-PDF and PDF-to-Word conversions. The\n user will instantiate the class with their credentials and \n methods like word_to_pdf(input_path, output_path) and \n pdf_to_word(input_path, output_path).\n\nI will keep the implementation concise and easy to use.\n\nAnd ... it did it. Perfectly. I did notice, of course, it wrote code a bit differently than me. I tend to use a bit more whitespace in my code, and I tend to use camel case for variables in Python. However, most Python code uses snake case. When Copilot generated the SDK, it used snake case, and honestly, that was the right call. I'd rather have something that follows the more standard Python way of doing things.\nI then asked:\nthis looks good, look for all of the "to PDF" samples, \nand all the "from PDF" samples, and add those other methods\n\nThe wording here was pretty specific. My folder has a few files that don't relate to a particular API but are more general, and this would, in theory, cover most of the API.\nOnce again, it did it near perfect, except that I had a demo called pdfToThumbnail that I didn't want included. Ditto for one that attempted to convert PDF to Markdown. I was incredibly lazy and asked Copilot to remove these instead of me just selecting and deleting. I further proved how lazy I was by asking it to alpha sort the non private members.\nThe end result is an SDK I can now call like so:\n\nPretty simple, right? I then decided to push my luck:\ncan you make a copy of the Python SDK for Node.js. it should work \nwith the latest version of Node.js and use fetch() for network \ncalls. API methods should use async.\n\nThe initial result was CJS, so I then said:\nplease convert this to ESM support with imports.\n\nAnd voila - it did it just fine: https://github.com/foxitsoftware/developerapidemos/blob/main/sdktesting/nodejs/PDFServiceSDK.mjs\nHere's an example of using it:\n\nAs with the Python version, this code isn't exactly as I'd write it, this time mostly with the lack of white space in methods, but I can get over it.\nYou can see both SDKs, and 2 sample files, here: https://github.com/foxitsoftware/developerapidemos/tree/main/sdktesting\nWhat's Missing?\nI focused on the "to" and "from" methods, added Extract, but did not get the optimization APIs in. Those will be done by hand as by this point, it's just a matter of copying and pasting one of the existing methods.\nThe other issue is that these SDKs basically give you a sync-like interface to our async process. I think that's fine. However, I think developers may like to have option to do things more async as well. What I'm considering is this:\nRight now, when you do an operation, like wordToPDF, the signature looks like so: wordToPDF(input file, output file). What I'm considering is simply letting the output be optional. If you don't pass it, you get a task back. With that, I'd offer two more options. You can do your own looping and pausing with checkTask, or use pollTask(task, int) to poll until completion. Both would give you a bit more control, and give ", "tags":[ "generative ai", "python", "nodejs" ], "categories":[ "development" ] }, { "title": "Creating a Calendar with BoxLang - Part Deux", "date":"Thu Jul 10 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1752170400, "url":"https://www.raymondcamden.com/2025/07/10/creating-a-calendar-with-boxlang-part-deux", "content":"Earlier this week I posted a quick look at building a simple calendar with BoxLang, specifically an HTML one meant for a web page of course. This was a bit complex due to the needs of creating a proper HTML table, but generally I was... ok with the result. Yeah that's nice and vague, but there's some code I could state at and think of alternatives for nearly forever and it's ok to just put it down and walk away. So obviously, I'm returning to it today. Specifically, how to get events on the calendar.\nSample Data\nI started off with some sample data. Initially I thought about finding something online, perhaps a list of holidays, but I really wanted something good for a local demo. I also didn't want random events as it would make testing layout stuff a bit more difficult. So I went with an approach that has a static set of events based around a dynamic date - today. I whipped up a BoxLang class for that purpose:\n\nThis will create a set of events for last month, this month, and today, and in theory, work just fine if you test my code in the year 2092. Let me just say now and for the record, I have always supported our robotic overlords. While this isn't terribly interesting by itself, do make note of the date manipulation methods BoxLang supports. I find them really handy and flexible.\nRendering Events\nFor the demo today, I decided to use the first approach from my last post, the one that made use of a table. It's definitely not as simple as the second approach, but felt like, design-wise, I had more room to spare.\nI began by getting my events:\n\nMy class was named events.bx, hence the new call above. Then I realized I'd need a way to get events for a particular day, so I wrote a simple UDF:\n\nMy logic is simple - given that my events have times, I want to ignore them and simply see what day of the year it is and what year. As I loop over my calendar, I can then use this to filter to any matches.\nI display the current month in two places - first in the initial row (which has to display the previous month), and then in the logic that displays the rest of the month after the first week. I'll share the entire template in a bit, but I'll just show the second one here:\n\nHere's how this renders, and again, it's not terribly pretty, but you get the idea:\n\n\n\nI made the choice to not check for events in the previous and next month as I thought it would be distracting, but I can absolutely see disagreeing with that decision. To change that behavior you would just add similar rendering logic to those blocks.\nIf you want the complete source for this version, find it here: https://github.com/ortus-boxlang/bx-demos/tree/master/misc/calendar. It's in just_a_calendar_with_events.bxm as I get paid by the number of letters in the files I commit.\nLastly, and I should have mentioned this in the last post (thank you to Jon Clausen for reminding me!), the logic I wrote is not internationalized, which means it won't work in countries that have different starts of the week. You could absolutely update the code to handle that - but I'm going to cheat a bit and show you another idea in my next post. (Coming soon. Honest.)\nPhoto by Olga Gasheva on Unsplash\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Results from My Vibe Coding Live Stream", "date":"Tue Jul 08 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1751997600, "url":"https://www.raymondcamden.com/2025/07/08/results-from-my-vibe-coding-live-stream", "content":"Usually for my Code Break shows, I assume if folks miss it they'll just check out the recordings, but while my earlier session is fresh in my mind, I thought I'd share a bit more about the session and a look at the code generated. It actually went a heck of a lot better than I anticipated to be honest, and was fun. To be clear, it wasn't perfect, and I'll touch a bit on what my tool of choice struggled with, but overall I'm really impressed with what I got built in an hour.\nWhat I Used and Why\nConstant readers here know I almost always use Google Gemini for anything AI related, but I've been trying to branch out a bit lately. Also, I found their Visual Studio Code integration... weird. Not bad but the few times I tried to developer with it I found it a bit awkward. That's probably just me and I probably just need to give it a bit more time, but for today I decided against it.\nInstead I decided to use GitHub Copilot. Again, in the few times I had tried it previously to today's stream, it just seemed to click a bit better with me. It could be because this support is more "first party" in VSC (i.e., a core part of the product versus an extension like Gemini) but whatever the reason, I felt like it would work better.\nWith that in mind, I created an empty directory, opened up the chat interface, and started with a prompt:\nWeb app that generates a randomized maze (of a set size), \nplaces a player character (@) in the start of the maze, \nmarks an exit (+), and then lets the player use keyboard \ncontrols to navigate the maze. \n\nWe are only using HTML, CSS, and JavaScript. No libraries. \nNo React. No Preact. Don't even say the word React. Just \nvanilla JavaScript. No Node.js for the server. \n\nThe first paragraph describes what I wanted to build, while the second was based on my experience with other tools really, really, really wanting me to use React and me just doing my best to Nope the hell out of that world.\n\n\n\nI also didn't want any kind of server aspect involved, even Node, as I didn't want a build process of any sort - just simple, static HTML, like my grandmother used to make on the weekend, with the lovely smell of div tags in the oven. Glorious I tell ya.\nThe initial result was actually really darn good. I especially loved how Copilot dropped the files in my folder with decent names (index.html, script.js, and style.css) and followed my instructions to not create any server or use a JavaScript framework.\nIf I had been smart, I'd have save all my work in source control (it is now, and I'll link to it in a bit), but for now I'll share a screenshot from the stream that shows how well it worked.\n\n\n\nIt was, honestly, perfect. Keyboard commands worked fine, I loved the dark theme, and it just plain worked.\nThe Iterations\nNow came the fun part. I started doing various iterations, mostly based on UI and some interactions.\nOne of the first things I did was have it work on the walls. I wanted it to add a 'brick' effect to the walls so that they looked more like, well, walls. This... did not work terribly well. We went through three or so iterations and then I gave up, and I was fine with that as the wall was a CSS declaration I could come back to later and make prettier if I wanted.\n\n\n\nI also tweaked the character representation from an @ symbol to an SVG of a stick figure. It's first output was fine, but had a blank white face. When I asked it to add two small eyes to it, again, it did so perfectly. I had some more feedback from my buddy Scott about adding a border around the maze, and again, Copilot added that just fine.\nOne of the last things I had Copilot do was change the 'end of maze' routine. Initially it just alerted something like "You made it blah blah blah", but instead, I had it have you go to the next level of the maze, basically just render a new maze and increment a level counter.\nAt this point, it did something really well. It didn't just build what I requested, but also added a small delay. Here's the relevant part of the code.\n\nSpecifically what impressed me was the timeout. It occurred to me that if instantly went to a new maze, the user may think it glitched out a bit. By adding the slight pause, it's more obvious that a transition happened. I had not even thought of that and it was a great addition.\nAll in all, I'm really happy with the result and you can play it here: Maze Game. Try not to look at the URL, trust me on that. ;)\nMonsters Make Everything Better\nSo at this point, it was roughly 15 minutes or so before the show was supposed to end and I figured, what the hell, let's add monsters. My prompt was:\nlets add monsters! for now, represent them as *, add one to the maze, \nand it moves slowly, randomly, unless it sees the player, and in \nthat case it will move in the players direction. if the monster touches\nthe player (or the player touches the monster), the game is over. use\nan alert to say as such.\n\nThis worked better than I expected. The only issue is that the mazes a", "tags":[ "generative ai", "javascript" ], "categories":[ "development" ] }, { "title": "Creating a Calendar with BoxLang", "date":"Mon Jul 07 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1751911200, "url":"https://www.raymondcamden.com/2025/07/07/creating-a-calendar-with-boxlang", "content":"Chalk this up to - "Here's a simple idea for a quick and dirty blog post" that turned into a few hours of my holiday weekend. Not only that, this is probably the first of three or so blog posts so... buck up, buttercup, this is going to be a fun ride. A while ago I had written down (well, typed in, I use Microsoft To Do to record writing ideas) the idea of demonstrating calendar creation with BoxLang, specifically creating a dynamic calendar, with or without events, either entirely server-side, or using a combination of client-side code with BoxLang providing the API. For today's post, I'm going to focus on (what I had assumed would be) the simplest version - just rendering a calendar for this month.\nIt's probably been a good ten plus years since I last created a calendar, by hand, in a server-side language, most likely Adobe ColdFusion. But I remembered the basic flow:\n\nCreate an HTML table\nGiven that you start a month on a day of the week, begin by rendering the end of the previous month in table cells\nFinish the first week\nCreate the rest of the month, ensuring you start and end new table rows where required\nAt the end, figure out how "early" you ended the month and add table cells for the next month to 'finish' the row\n\nSeems simple enough... right? While I knew I could create a function to encapsulate all of that, I started off with a simple template script. My plan was to put as much logic as possible up top in the script section, and then handle layout issues beneath that. Let's start there.\nVersion One\nI began with this block on top, where I created variables I thought I needed, and as I iterated, added and removed as I tweaked my approach.\n\nI normally remove testing stuff from blog posts, but that first commented out line was real useful in ensuring my code actually worked.\nAfter creating a variable for the current time, I figure out:\n\nThe first of the month, so I can get the day of the week\nThe number of days in the previous month, that helps render the previous month blocks in the table\nWhat day of the week the last day of the month is - so we figure out if we need to 'finish' the last row.\n\nNext my template has some CSS. I'll wait to share that till I get to the end of this section and share the entire script, but I did the bare minimum. Here's a look at how it renders:\n\n\n\nLovely, isn't it? Ok, now for the rendering. I begin by starting my table, adding the date label and the top level of the table for days of the week:\n\nNow for the first row:\n\nSo basically, I first figure out if the month doesn't start on Sunday, and if so, I render the previous days using the math you see in the loop there. I'll be honest - I kinda guessed at that - reloaded - tweaked - and eventually got it.\nThe next loop handles finishing the first row. I'll need to know what the last day of the month, first week size is, so I save it as lastDay.\nThis next block handles the rest of the days of the month:\n\nFor the most part I think this is relatively simple - the only kinda complex part is determining the day of week. The final bit handles "trailing" days - i.e. months that don't end on Saturday:\n\nHere's the entire script, and honestly I completely understand if your eyes glaze and you just scroll past:\n\nThis .... works ... and in theory could be nicely wrapped up in a BoxLang component (think web component, re-useable tags I could embed in an application) and some of the ugliness would be hidden, but it just feels gross to me. It feels like, yet again, a good example of why I always failed the Google tech screen.\nThat being said... I'm pretty psyched about the next version.\nVersion Two - Behold the Power of CSS\nAfter finishing that first version, the thing that struct me the most was that the complexity really seemed to be in the HTML table. I was curious about what CSS options I'd have to possibly simplify the code if I leaned on CSS more. A quick Google turned up something interesting, "A Calendar in Three Lines of CSS". 3 lines of CSS? Surely you jest!\n\n\n\nThe approach documented at CSS-Trick is based on an article at the appropriately named "Calendar Tricks" and makes use of a simple CSS grid. The only 'code' aspect you need is to dynamically set the starting position of the grid, which comes from the first day of the month.\nUsing their approach, I re-built my demo to just this:\n\nThe code on top, and bottom, is way simpler. Now, to be fair this version doesn't show the previous and following month values, but the simplicity more than makes up for it. Here's that result:\n\n\n\nTo be fair, this version would probably make it a bit harder to include events - I'd probably add borders for that - but the logic is so much more easier to work with I think.\nWhat makes me most happy about this is that usually when I think about moving logic from the backend to the frontend, my brain goes to JavaScript. I don't consider offloading "logic" to CSS. Now I will!\nI plan on doing so", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Upcoming Code Break and Live Streams Next Week", "date":"Fri Jul 04 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1751652000, "url":"https://www.raymondcamden.com/2025/07/04/upcoming-code-break-and-live-streams-next-week", "content":"Hey folks. Next week I've got not one, not two, but three different presentations happening. Here's what I've got going on.\n\nCode Break Episode 29\nMy next Code Break episode will be Tuesday, July 8th at 12PM CST. I'll be doing some playing around with vibe coding, and yes, I still hate that term. But I've had some recent successes, and failures, with it and I thought it would be fun to explore. Whether you are pro, or anti, generating code with AI, I'd love to have you come in and share your feedback.\nThe DevRel Show\nI'll be on Frédéric Harper's DevRel show on July 10th at 2PM CST, talking about APIs, specifically Foxit APIs. This is my first time on his show and the first time I'll be talking publicly about our new APIs, so I'm pretty excited. Here's the direct link to the stream: https://www.youtube.com/watch?v=KSrhIwRWIe0\nThe Ben and Ryan Show\nOk, let me start off by saying I don't have a link for this one yet, sorry, I should have it Monday and in theory I could have waited to post this till then, but with Code Break coming up soon I wanted to get it out the door before the weekend. I'll be joining Ben Nadel and Ryan Brown on their show, appropriately named "The Ben and Ryan Show", also on July 10th (busy day!) at 12PM CST. I'm 90% certain of that. ;) As soon as I get a link, I'll edit this post so just check back and you'll get the deets then (as the kids say).\n", "tags":[ "generative ai" ], "categories":[ "development" ] }, { "title": "Building a CSV Report CLI Tool in BoxLang", "date":"Thu Jul 03 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1751565600, "url":"https://www.raymondcamden.com/2025/07/03/building-a-csv-report-cli-tool-in-boxlang", "content":"Remember some time ago (yesterday) when I wrote about CSV parsing in BoxLang using the opencsv Java library and Maven? As I said then, my initial impetus for that post was to recreate my ColdFusion Hackathon project, but once I got it working, it turned out to be really useful for something completely different.\nThe Data\nIf you're on a desktop machine and look down to your right, you'll notice I've got an ad from from EthicalAds. I've been using them as an ad network for a bit over a year now. I'm not going to get rich anytime soon with the money I've earned, but it's the first ad network in a while that felt low key and less "in your face". My expenses here are pretty minimal, and the money earned from them covers it just barely, so I come out ahead. (Approximately enough to get one six pack of 'good' beer.)\nMy traffic has been mostly stable this year, but has had a slight uptick the past two or three months. The EthicalAds report system makes it easy to check my earnings, but one thing it doesn't show is a "month by month" view of earnings. I could go into their dashboard and check a month at a time manually, but why do something by hand in 5 minutes that I could automate in 30???\nThe earnings report has a handy CSV export function, so I set it up to display data for a complete year (June 30th 2024 to June 30th 2025) and downloaded that data. Here's a few rows from that export:\nindex,views,clicks,ctr,ecpm,revenue,revenue_share\n"Jun 30, 2025 (Mon)",218,0,0.0,2.5586697247706427,0.5577900000000001,0.39045300000000005\n"Jun 29, 2025 (Sun)",106,0,0.0,2.596320754716981,0.27520999999999995,0.19264699999999996\n"Jun 28, 2025 (Sat)",91,0,0.0,2.4438461538461542,0.22239000000000003,0.155673\n"Jun 27, 2025 (Fri)",219,0,0.0,2.9222831050228315,0.6399800000000001,0.44798600000000005\n"Jun 26, 2025 (Thu)",257,0,0.0,2.592801556420234,0.6663500000000001,0.46644500000000005\n"Jun 25, 2025 (Wed)",301,0,0.0,2.481495016611296,0.7469300000000002,0.5228510000000001\n"Jun 24, 2025 (Tue)",266,0,0.0,2.5290225563909785,0.6727200000000002,0.4709040000000001\n"Jun 23, 2025 (Mon)",263,0,0.0,2.203041825095057,0.5794,0.40558\n"Jun 22, 2025 (Sun)",115,0,0.0,2.5464347826086953,0.29284,0.20498799999999998\n"Jun 21, 2025 (Sat)",97,0,0.0,2.3290721649484536,0.22592,0.158144\n"Jun 20, 2025 (Fri)",228,0,0.0,2.456184210526316,0.56001,0.392007\n\nEach line represents one day of stats. From this, I wanted to build a tool that would aggregate the data into months and show me the results. Enter BoxLang.\nThe Code\nBefore we get into the code, remember that yesterday I covered how to add CSV support to BoxLang with the opencsv Java package. My initial code simply imported what I needed, and parsed in the file:\n\nI dumped this and noticed that the very last row of data was a 'totals' row, so I spent 8 hours vibe coding and added:\n\nBoom - data imported. Now, I'm going to loop over my raw data and a) parse the date, b) copy over the values I care about which are earnings, and because I was curious, views and clicks:\n\nNotice I also rounded the earnings a bit. I'm no Gus Gorman after all. (The first person to identify that name and image below without Googling gets 500 Ray Respect points.)\n\n\n\nAt this point, I've got an array of values that consist of a valid date, the amount earned in rounded cents, views, and clicks. I now needed to aggregate this information over a set of months. Here's how I accomplished that:\n\nI create a key based on the month and year of the data and if it doesn't already exist, add it to my final array with default values. After that, I then update the three values: total, views, and clicks.\nThe final part is just rendering it to screen:\n\nAnd voila - why I'm not retiring and living off my blog anytime soon:\nDATE TOTAL$ VIEWS CLICKS\n6/2024 0.34 199 0\n7/2024 3.53 2,150 9\n8/2024 10.46 7,005 9\n9/2024 12.05 6,983 3\n10/2024 10.75 8,180 8\n11/2024 9.52 8,272 8\n12/2024 12.75 8,620 20\n1/2025 8.31 8,412 8\n2/2025 8.99 7,756 11\n3/2025 10.01 8,243 23\n4/2025 8.83 5,811 12\n5/2025 11.03 6,310 12\n6/2025 10.86 5,952 5\n\nHere's the complete script so you can see it in its entirety. As always, let me know if you have any questions:\n\nPhoto by Dan Dennis on Unsplash\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Parsing CSV in BoxLang - Maven Style", "date":"Wed Jul 02 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1751479200, "url":"https://www.raymondcamden.com/2025/07/02/parsing-csv-in-boxlang-maven-style", "content":"I recently did some CSV parsing in ColdFusion while working on my ColdFusion 2025 Hackathon submission, and while I didn't win, I really enjoyed the little utility I built. That tool made use of CSV parsing support in Adobe ColdFusion and I thought I'd take a look at what I'd need to use to support that in BoxLang. This led me to look for a Java tool and gave me a chance to try something new in BoxLang, Maven support.\nBoxLang runs on the JVM, but doesn't really require you to know any Java. Which is good. I've been "casually" familiar with Java since it came out, but have never done any real work in it nor really spent any time learning the language. I know enough to know there's a huge amount of open source projects out there and for nearly all of them, you can grab a jar (think of this like a packaged zip), drop it in your server, and go to town. I blogged about this back in February, but once you've gotten a jar, it can be as easy as this:\n\nThat works just fine, but BoxLang also supports Maven integration as well. Again, this is something I've been casually familiar with. In ways, it's a bit like Node's package.json support where you can define a dependency, run a command, and it will install a package along with any required dependencies of the package you want. In the Maven world, this is done via XML...\n\n\n\nWhich I can get over. It's what's used in Java-world and if I'm going to play in Java-world, I got to get over it.\nBoxLang's Maven support has really good documentation. If you've never even heard the word before, the docs walk you through installation and usage, and have a lot of great examples. While BoxLang runs on the JVM, folks can't expect to find every bit of Java documentation there as that would be a) distracting and b) repetitive of existing docs out there. However - I'm really grateful that the BoxLang team made an exception here and included documentation for working with Maven right within the docs.\nOk, given all that, when I searched for CSV support in Java, I came across opencsv, and while digging around in the docs, found that I needed to add this to my BoxLang pom.xml file:\n\nFor me, that file was here: ~/.boxlang/pom.xml. After pasting that in, I then ran mvn install, and it proceeded to grab the library and everything it needed. As I'm not running a server, just testing via the CLI, that was literally it. I got to testing.\nFirst, I added a short CSV file:\n"name","age"\n"ray",52\n"scott",90\n"todd",45\n\nAnd then using the opencsv docs, created a quick sample:\n\nThose imports came right from the opencsv docs, trust me I didn't come up with them on my own. The readAll method returns an array of arrays where I can access each column by the inner array index. Here's the output:\n\nNotice it included the header, which makes sense of course, and a simple solution would be to just skip row 1, but instead I did the unthinkable and continued to look at the docs. Turns out the library has a CSVReaderHeaderAware method that not only will ignore the header in it's results, but use the header to create an array of objects instead of an array of arrays. Well, if you do a bit of work. Here's a 8 line UDF wrapper:\n\nRunning allData = readCSV('test.csv') now returns:\n\nAs an FYI, BoxLang 1.3.0 added a 'pretty' argument to jsonSerialize, if I use:\n\nI get:\n[ {\n "name" : "ray",\n "age" : "52"\n}, {\n "name" : "scott",\n "age" : "90"\n}, {\n "name" : "todd",\n "age" : "45"\n} ]\n\nEasy-peasy! I've got a real world use case for this (more than just supporting my bug tracker hackathon application) that I'll share in my next post.\nPhoto by Mika Baumeister on Unsplash\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Take Foxit's New PDF APIs for a Spin", "date":"Tue Jul 01 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1751392800, "url":"https://www.raymondcamden.com/2025/07/01/take-foxits-new-pdf-apis-for-a-spin", "content":"Back in May I announced my new role at Foxit as an API evangelist. At the time, I couldn't talk much about what I was working on (although the title kinda gives it away), but yesterday we launched our new offering and I can finally share some news about it, and even better, some code.\nSo, the TLDR is that we launched a new API offering and developer portal. These APIs are all related to document management and PDFs, so much like I was doing in my previous role at the company famous for subscription-based desktop apps, which is nice as I can bring my existing expertise to the table.\nOur APIs fall into four basic categories:\n\nPDF Services - a set of basic PDF manipulation APIs like converting to and from PDF, optimizing and so forth\nDocument Generation - APIs related to creating dynamic PDFs from a Word template\neSign - not new, but part of the new umbrella, APIs related to electronic signing\nEmbed - PDF embedding library for the web\n\nWe're still ironing out a few kinks, but there's going to be some rapid updates to the offerings. You can sign up to get credentials and there's a free tier, not trial, so you can absolutely kick the tires before you commit to buying anything. How about a quick example?\nConverting to PDF\nThe simplest example is just converting an Office document to PDF. The PDF Services tools all fall into a similar flow.\n\nYou upload your document.\nYou start a job.\nYou check the job.\nYou download the result.\n\nLet's take this bit by bit. The Upload API requires your credentials and the binary bits of your data. Here's a Python wrapper for that:\n\nThis returns a document ID value. Here's an example calling it, where CLIENT_ID and CLIENT_SECRET are my credentials loaded from environment variables:\n\nNext, I'll call the Word to PDF endpoint, which only requires the document ID from the previous call. Again, I've got a Python wrapper:\n\nHere's how I call it using the previous result:\n\nThe result of the operation is a task ID that can then be checked to see how the process is going. This API returns a task object containing things like the status, progress, and so forth. Here's my implementation of a function that loops until the task is done or an error is thrown:\n\nThis could probably fancier. Anyway, here's the call:\n\nThe final part, assuming everything works ok, is to use Download API to get the bits. Again, a wrapper:\n\nAnd honestly, that's it. All of the rest of the PDF Services APIs are tiny variations of that flow. Here's the complete script just to show you the entirety of the operation:\n\nWhat's Next?\nAs I said, we literally just launched this about twenty-four hours ago and we've got a lot more coming down the pipe. If this interests you, check out the site, and you can join our forum to ask questions. (Although feel free to leave a comment below.) I've got a live webinar coming up July 17th that you can register for to see these APIs in action, and I hope to see you there. We also have a developer blog launching soon on the main site, so I'll be doing most of my blogging there. Finally, I've got a repo, https://github.com/foxitsoftware/developerapidemos, of code demos supporting these APIs. I've got Python examples for everything, and Node examples for some things. Check it out.\nPhoto by Hoyoun Lee on Unsplash\n", "tags":[ "foxit", "python" ], "categories":[ "development" ] }, { "title": "AI with BL", "date":"Fri Jun 27 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1751047200, "url":"https://www.raymondcamden.com/2025/06/27/ai-with-bl", "content":"Forgive the somewhat cutesy title. I hate vague titles that only serve to be clickbait, but given the subject, I couldn't help it. This post is about AI, specifically Generative AI, with BL, AKA BoxLang. This has always been possible with BoxLang and any GenAI service that had a REST API, but recently the team released an impressive AI Module that makes this a lot easier. So what does it do?\nMuch like LangChain, the BoxLang AI module provides a unified interface to work with multiple different AI providers. This makes it a bit easier to switch from one service to another. I don't necessarily see people doing that willy nilly. Each service has it's unique strengths and weaknesses and pricing schemes. But the module at least makes the technical aspect of switching easier. And heck, even if you don't plan on switching, it still greatly simplifies making use of those APIs in your code. Let's consider an example.\nThe quickest and simplest way to use the module is via the aiChat BIF:\n\nThis returns the response as a simple string. Want to use OpenAI?\n\nLiterally the only change was to the provider and apiKey values. The docs cover this and you should check them for the latest updates, but currently you get support for Claude, DeepSeek, Gemini, Grok (eww), OpenAI, and Perplexity out of the box.\nWhile aiChat supports a simple string for messages, you can also pass an array which is a handy way to handle system messages:\n\nIn this example I've used the same prompt with two different system messages. This has a wild impact on the output as you can imagine (the line in the output below delineates between the two versions):\n\nThat's a wonderful question! Stars are like giant, sparkly babies that come from something called a nebula.\nImagine a big, fluffy cloud in space, much bigger than the Earth! This cloud is made of gas and dust, like tiny little specks of stardust. This cloud is called a nebula.\nOver a very, very long time, gravity (which is like a big hug that pulls things together!) starts to pull the gas and dust in the nebula closer and closer.\nAs the gas and dust squish together, it gets hotter and hotter in the middle. Imagine rubbing your hands together really fast - they get warm, right? It's kind of like that!\nEventually, the middle gets so hot that it starts to glow, like a tiny spark. This spark gets bigger and bigger, until it becomes a bright, shining star!\nSo, to recap, stars come from:\n\nA big, fluffy cloud of gas and dust called a nebula.\nGravity pulls the gas and dust together.\nThe middle gets hotter and hotter until it starts to glow.\nThe glowing ball of hot gas becomes a star!\n\nIsn't that amazing? Space is a magical place! Do you have any other questions about stars or space?\n\nAlright, let's talk about where stars come from. It's a pretty grand story, spanning billions of years and involving vast cosmic processes.\nEssentially, stars are born from giant clouds of gas and dust called nebulae. Think of these nebulae as the raw ingredients of the universe – mostly hydrogen and helium, with traces of other elements.\nHere's a more detailed breakdown:\n\n\nThe Nebula Exists: These nebulae are vast, diffuse regions in space. They're cold and not very dense, just hanging around.\n\n\nSomething Triggers Collapse: This is the crucial step. Something needs to disrupt the equilibrium of the nebula and start the process of gravitational collapse. Possible triggers include:\n\nShockwaves from a nearby supernova: A massive star exploding can send out shockwaves that compress regions of the nebula.\nCollisions between nebulae: Two nebulae bumping into each other can create dense regions.\nDensity fluctuations: There could be some inherent random density fluctuations in the nebula. If a region is slightly denser than its surroundings, its gravity becomes stronger, attracting more material.\n\n\n\nGravitational Collapse: Once a region within the nebula becomes dense enough, gravity takes over. The gas and dust start to collapse inward, pulled by their own mutual gravitational attraction. As the cloud collapses, it fragments into smaller and smaller clumps.\n\n\nFormation of a Protostar: As a fragment collapses, it heats up. This hot, dense core is called a protostar. The protostar is not yet a true star because it's not undergoing nuclear fusion. It's just a ball of hot gas contracting under gravity.\n\n\nAccretion Disk and Jets: The protostar is often surrounded by a rotating disk of gas and dust called an accretion disk. Material from the disk spirals inward onto the protostar, feeding its growth. Powerful jets of gas are often ejected from the poles of the protostar, perpendicular to the accretion disk. These jets help to carry away excess angular momentum, allowing the protostar to continue collapsing.\n\n\nIgnition of Nuclear Fusion: As the protostar continues to collapse, the core gets hotter and denser. Eventually, the temperature and pressure in the core reach a critical point where nuclear fusion can begin. This is where hydrogen at", "tags":[ "boxlang", "generative ai" ], "categories":[ "development" ] }, { "title": "Updates to my Table Sorting Web Component", "date":"Thu Jun 26 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1750960800, "url":"https://www.raymondcamden.com/2025/06/26/updates-to-my-table-sorting-web-component", "content":"It's been a while since I touched my <table-sort> web component, but last night I had a few interesting ideas and thought I'd do a quick update. For folks who may not remember, I first blogged about this way back in March of 2023. The basic idea was to take an existing table, wrap it in my web component, and sorting would be added automatically. Nice and simple.\nAs an example:\n\nThe only real "feature" was that if you included numeric="X", it would consider the Xth column as numeric and ensure sorting worked properly. X in this context could be one column, or a list, and it was 1-based of course.\nYou can see that initial version here:\n\n See the Pen \n PE Table for Sorting (2) by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nAt some point, and I don't know if I blogged it, I even put it up on npm: https://www.npmjs.com/package/@raymondcamden/table-sorter\nChange One - Support Custom Sorting\nOk, so what did I change? I recently realized that it would be nice if you could sort by dates. I could have added something along the lines of the numeric attribute, but I wanted a more generic solution that could apply to any "weird" sorting use case. To do so, I added support for a data-sortval column. Why?\nWell, as I said, my initial goal was to make it as simple as possible to use the web component. You shouldn't need to do anything to your table, just wrap and go. While that's the ideal, there's going to be cases where if I ask the HTML developer to do a bit of work, the component can do it's job better as well.\nTo enable this, I went with a data attribute in your td cell. So for example, imagine you've got dates, you could use the data attribute to store a numeric version of the date, usually being the number of seconds since epoch, but in the example below, I just used simple small values:\n\nNow when it comes time to sort, my code will use the values in the cells for the first three columns, and the value from data-sortval for the fourth. I love data attributes as they allow for customizations to the web page like this and are easy to use from JavaScript as well.\nThis worked great.. until I actually sorted and realized I needed to make another change.\nChange Two - Rendering the Table\nMy initial implementation generally worked like so:\n\nGet the table I'm wrapping.\nGet every cell and copy the data to an array of objects\nOn sort, sort my copy of the data and re-render the HTML\n\nThe re-rendering was destructive, which meant that if you're original table cells had something custom, perhaps a class applied to cells where the value met certain criteria, it was lost. Essentially this:\n\nBecame this after a sort:\n\nI knew this was a problem and had opened an issue on my repo a year ago. I finally addressed it by sorting the TR rows in the DOM, preserving any custom attributes in your existing table.\nYou can see this in the example below - if you open your browser the onmouseover in the very last td is preserved on sort.\n\n See the Pen \n Untitled by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nOk, that's it! If you want to share any bugs or suggestions, hit up the repo and you can install this yourself like so: npm i @raymondcamden/table-sorter\n", "tags":[ "javascript", "web components" ], "categories":[ "development" ] }, { "title": "Links For You (6/22/25)", "date":"Sun Jun 22 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1750615200, "url":"https://www.raymondcamden.com/2025/06/22/links-for-you-62225", "content":"Greetings, programs. This has been a quite excellent weekend so far, and today will be awesome for one reason alone - there's not one dang thing on our calendar. A day with nothing to do is a glorious day indeed. I spent this morning finishing prestige 10 in COD and catching up on my comics ("One World Under Doom" is incredible). Now let's get to the links...\nWhat exactly do I do?\nI've had to explain developer advocacy and evangelism for years now, but I absolutely love this explanation by Ashley Willis, "What Is Developer Advocacy (2025 Edition)". In it, she goes into great detail about the job myself, and many of my friends, love, and talks about how the role has changed in the both post-COVID and in the current economic hellscape. (Have I mentioned how happy I am to have a job?) It's a great read and worth your time.\nYet Another Josh Comeau Link\nI've shared Josh Comeau links many times here and his ability to explain technical matter with incredibly simple and well-built demos is easily the best in the industry. His Operator Lookup tool is no exception. If you were ever curious about random and unusual JavaScript operators then this tool will explain them in detail. As an example, here's the Logical AND Assignment Operator. That was one I had absolutely zero clue about.\nDid You Know CSS Could...\nDid you know CSS could style alt text for images? I didn't. Andy Bell goes into great detail about how CSS can be used to style alt text in images with plenty of great examples. Frankly I'm at a point where I think CSS can pretty much do anything.\nJust For (Musical) Fun\nOk, this isn't really a fun song, it's actually quite moody and brings up way too many emotions in me, which makes it an incredible song. I play this one almost daily, although I try to avoid if I'm already in anxious/depressed mood.\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Upcoming Webinars", "date":"Thu Jun 19 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1750356000, "url":"https://www.raymondcamden.com/2025/06/19/upcoming-webinars", "content":"Good morning, programs. I wanted to share some news about two upcoming webinars. The first is my next Code Break show, "Building Desktop Apps with Python and Flet - Part Deux", happening next Tuesday, June 24th, at 12PM CST. As you can tell by the title, I'll be continuing my look at the awesome Flet project and seeing if I can finish the app I started last time. If you don't remember, it's quite deadly... (And be sure to check out the last session for the first part!)\nNext, on July 23rd, 11AM CST, I'm hosting a free webinar where I'll live code building a BoxLang application. My plan is to see how far I can get in an hour (which means I need to figure out what I'm building soon-ish) and if it's a success, I'll follow up with a second part and keep hacking away. I'm sure you've seen my BoxLang posts, but if you haven't given it a try yet, this will be a great time to see it in action. I hope to see you there!\n", "tags":[ "python", "boxlang" ], "categories":[ "development" ] }, { "title": "Sorting Out Your Monarchs with BoxLang", "date":"Tue Jun 17 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1750183200, "url":"https://www.raymondcamden.com/2025/06/17/sorting-out-your-monarchs-with-boxlang", "content":"I know what you're thinking right now - a monarch problem? How did Raymond know I had a monarch problem? What can I say, with great age comes great wisdom, or, more likely, random code challenges. I've mentioned "rendezvous with cassidoo" before as one of the newsletters I subscribe to. Authored by the very interesting Cassidy Williams, this short and sweet newsletter always has interesting content and always ends with a basic code challenge, what she calls her 'interview question of the week'. This weeks question was pretty fun:\n Given an array of strings representing the names of monarchs and their ordinal numbers, write a function that returns the list of names sorted first by name and then by their ordinal value (in Roman numerals), in ascending order.\nHere's two examples:\n\nI decided to take a stab at this with BoxLang and in doing so, ran into some interesting tidbits I thought I'd share. First, let's handle the Roman problem.\nThose Pesky Romans\nQuick trivia question for you. What is the only number you can't represent in Roman numerals?\nZero.\nOk, that being said, my first task was to build a generic "roman numeral to integer" conversion method, and for that, I totally cheatedwent to AI for a bit of help. I knew I was going to be writing in script, and with BoxLang still being kinda new, simply asked for a JavaScript solution:\n"write javascript code to convert roman numerals to integers"\nI used Google Gemini for this, and one of the things I like about their code solutions is that they almost always provide test calls with expected solutions. Here is their solution. (The original solution made use of console.log, so to make it easier for you, dear reader, I made it output to the DOM.)\n\n See the Pen \n Roman to Int by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nThe solution seems sensible enough, although I would not have bothered making a variable for the uppercase version of the input. I'd just have done: s = s.toUpperCase(). Outside of that, the logic makes sense to me.\nOk, so now to convert this to BoxLang. I'll share the complete rewrite below, but let me share the interesting bits first.\n\nArrays in BoxLang start with 1, not 0.\nAn interesting part of the JS code is that nextVal will, one time, reference an index past the end of the length of the string, which is null, and check against romanMap, which is basically asking the map for a null key. JavaScript handled that, still returning null, but I had to break that apart a bit in BoxLang.\nBoxLang automatically scopes variables defined in a method to the method itself, so I was able to get rid of let and const.\nIn the original code, you can see where Gemini mentioned you could throw an error on invalid input instead of NaN. I did that in BoxLang.\n\nAnd that's basically it. I also changed the console logs to println statements instead. You can test this out here:\n\n \nCool. The Roman problem is solved! Now to sorting.\nPutting On Our Sorting Hat\nSorting now comes down to a simple callback function provided to the built-in sort method. Here's how I did it:\n\nAs per the requirements, I sort by name first, then the value of the roman numeral. I tested like so:\n\nYou can see the output below:\n\n \nCaching with Expirations\nSetting expirations can be done at the same time you set a value. For example:\n\nThis will cache the value for 5 seconds. To see this in action, consider the following:\n\nI set a cached value to lastTime and set it to live for 5 seconds. I then grab the value immediately. (Technically I already had it in lastTime, but I wanted to show a followup fetch of the value.\nI then sleep for 7 seconds.\nAfter I wake up, I grab all the keys, and as the comment says, I will see my value as it hasn't been reaped yet, but if I get it, the result will be null. If you run the sample below, the second print will not be shown. (Be sure to switch to the Buffer tab which shows the output).\n A quick note - as of June 11th, there is a bug when getting an expired value *before* reaping. The bug being it still returns. This is corrected in the snapshot build of BoxLang and will be in the next main release, at which point the embed below should automatically show the correct behaviour. Also, try.boxlang.io will persi", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Code Break Tomorrow - Desktop Apps with Python", "date":"Mon Jun 09 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1749492000, "url":"https://www.raymondcamden.com/2025/06/09/code-break-tomorrow-desktop-apps-with-python", "content":"Greetings, programs. Tomorrow (June 10th) at 12PM CST (Cool Standard Time), I'll be hosting my next Code Break, "Build Desktop Apps with Python and Flet". My last two sessions covered building desktop apps with Tauri, a TypeScript/Rust platform, so I'm looking forward to playing with a Python version of the same idea.\nYou can RSP at the link above, or watch right here:\n\n\nPlay Video\n\n\n\n\n\n", "tags":[ "python" ], "categories":[ "development" ] }, { "title": "Links For You (6/8/25)", "date":"Sun Jun 08 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1749405600, "url":"https://www.raymondcamden.com/2025/06/08/links-for-you-6825", "content":"Welcome to another edition of my "this was supposed to be down on Saturday" biweekly list of links. Yesterday my wife and I made pretzels at home for the first time. It was a rather simple recipe that didn't need any boiling and they came out incredible. We also watched the new Predator movie, Killer of Killers, which was quite spectacular. I definitely recommend watching it when you can. Ok, on with the links!\nReleative Colors in CSS\nCSS never ceases to amaze me, despite me knowing I'll never be really good at it. In this article by Ahmad Shadeed, he introduces the concept of native color modifying in pure CSS. Ie, taking one base color and changing it to be lighter or darker. It looks relatively simple to use and is supported well. Read more at his blog post: Relative Colors. Also note that his post has some great interactive elements to it.\nYet Another SSG\nYes, I'm sharing a link to another static site generator, but Publican looks kinda cool. It's Node.js based with all the usual bells and whistles of SSGs, Markdown support, templates, and so forth. It makes use of jsTSACS for templating. (A lot of times the template engine is the deciding factor for me.) You can read more about the rationale for building another SSG at the product's blog: Why create another static site generator?.\nImplementing Image Uploads in the Background\nLast up is a great article by Amejimaobari Ollornwi on building an offline friendly image upload system. This makes use of IndexedDB and the sync feature of service workers, something I've rarely seen people using. I've got a few nits about his use of IDB (see my comment at the end of the article), but it's a dang good example!\nJust For Fun\nLast but not least, did you know Garbage released a new album and it's pretty damn good? Check out one of the singles below:\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Working with the Mastodon API in BoxLang", "date":"Fri Jun 06 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1749232800, "url":"https://www.raymondcamden.com/2025/06/06/working-with-the-mastodon-api-in-boxlang", "content":"So remember a long time ago (Tuesday), when I blogged about using the Bluesky API with BoxLang? As expected, I'm following that up today with a look at using the Mastodon APIs. Personally, I'm down to just two social networks, Bluesky and Mastodon. Originally I was using Mastodon a lot more, but I've been vibing with Bluesky more lately so I tend to check it more often. That being said, whenever I release a new blog post, I've got an automated process to post to both, so I thought I should cover both for BoxLang as well.\nEven better... I already did this in ColdFusion! Way back in October 2023, I blogged about the topic and even shared a simple ColdFusion component for it. That made 'translating' to BoxLang even easier.\nAuth\nAs a refresher, authentication with Mastodon is simpler. In your profile, you go into your developer settings and create a token. That's it. All you need along with that is the server your account runs on. So I specified too environment variables for this, MASTO_TOKEN and MASTO_SERVER. I verified it like so:\n\nPosting Messages\nAs I said, you don't need anything more than that token, so posting a toot (message) is as simple as:\n\nLiterally, that's it. You get a large post object back you can inspect if need be.\nUsing Images\nHow about images? Like Bluesky, they've got a different endpoint for that. Here's an example sending up a cat picture.\n\nThis returns a media object where all you need is the id, and to add it to your post, it's one line of code:\n\nHere's a complete script showing this in action:\n\nI turned this into a BoxLang class. It's a bit different from the Bluesky one in terms of API shape and I may address that at some point, but for now, here's that class:\n\nAnd an example using it:\n\nHere's my most recent test on one of my cooler bot accounts:\n Post by @dragonhoards@mastodon.social View on Mastodon \nFairly simple, right? If you take this along with the code from the previous post, you could easily automate posting to both in a few lines of code.\nAs before, you can find these samples in the BoxLang demos repo here: https://github.com/ortus-boxlang/bx-demos/tree/master/scripting Look for test_mastodon.bxs, test_mastodon2.bxs, and mastodon.bx. Enjoy!\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Working with the Bluesky API in BoxLang", "date":"Tue Jun 03 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1748973600, "url":"https://www.raymondcamden.com/2025/06/03/working-with-the-bluesky-api-in-boxlang", "content":"I've built multiple integrations with the Bluesky API, all making use of either the Node or Python SDK, but I thought I'd take a quick look at what it would take to build a BoxLang integration using the REST API. Turns out it's pretty easy (with some caveats I'll explain at the end) - here's what I built.\nAuthentication\nTo authenticate, you'll need your username and password for your account. I'm picking this up via environment variables and doing a bit of validations:\n\nTo authenticate, I pass this value to the com.atproto.server.createSession endpoint on Bluesky:\n\nIf the status code result from this is 200, you get an object containing information about the user, but more importantly, a accessJwt and refreshJwt value for later use. Here's an example result with anything possibly confidential removed:\n\nHere's how I handle the result:\n\nMaking a Post\nNow that you have an access token, making a post is relatively simple:\n\nBasically I've got a body object that describes what's being added (a post) and includes the text and date created. That's literally it. The result is a record object and, obviously, a post on Bluesky itself.\nTest via API - sorry for the noise!— Raymond Camden (@raymondcamden.com) June 2, 2025 at 11:56 AM\nUsing Images\nTo add an image to your post requires uploading it first. Here's an example using that endpoint and an image in the local file system:\n\nThis returns a file object that can be referenced in a new post - although now the post object gets a bit more complex:\n\nNote that the endpoint is the same, it's just the body changing. Also note in the example above, I did not include an alt tag. Don't do that. Use an alt tag. Always.\nTest via API - now with an image (for real).[image or embed]— Raymond Camden (@raymondcamden.com) June 2, 2025 at 12:35 PM\nWrapping it Up\nSo, given that sample code, I decided to build a simple class wrapper for it. This class handles authentication and has methods for login and posting, with optional images. I made the image support require alt text to ensure folks at least think about it before posting images to the API. (Technically you can still pass an empty string.) Here's that class as it stands now:\n\nUsing it requires you to instantiate it with your creds, login, and then make some posts:\n\nMuch simpler, right? You can find the source and sample files here: https://github.com/ortus-boxlang/bx-demos/tree/master/scripting (There's more files in this folder, but look for bluesky.bx, test_bluesky.bxs and test_bluesky2.bxs.\nNow, there's still a bit missing from this. First off, to have links in your text automatically become 'real' links, you need to use the API's "Facet" endpoint. I'm going to add support for that so it happens automatically.\nNext, you can post up to 4 images per post, so I'm going to rewrite image support to allow you to pass a structure for one image, or an array of images instead.\nFinally, I'm considering changing how authentication works. In theory, it should just handle it for you and cache the jwt. That would remove the bs.login() requirement above. I can also make use of the refresh token to automatically update the token for you.\nAll of this will be considered once I turn this into a proper BoxLang module available on Forgebox. And finally finally (for real this time), you could convert this to ColdFusion pretty quickly.\nPhoto by Joshua Hoehne on Unsplash\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Links For You (5/25/25)", "date":"Sun May 25 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1748196000, "url":"https://www.raymondcamden.com/2025/05/25/links-for-you-52525", "content":"I missed posting my links post last weekend but I had an absolutely good reason. This previous week was my first week at Foxit and while I've only had three days so far, I'm incredibly excited about this new role and being able to introduce a whole suite of new offerings to developers. The next few months are going to be pretty busy and I'm really happy about that. My new job also coincided with a little vacation my wife and I are taking in Saint Louis. While I've been in Louisiana for sometime now, I grew up in Saint Louis and love visiting here. (My mom still lives up here.) Yesterday we visited the Missouri Botanical Garden which was beautiful.\nThis isn't a pretty picture, but I LOLed at the name:\n\n\n\nOk, on with the links!\nLearning about MCP\nMCP is incredibly hot now in the AI world, and it's something I've yet to truly wrap my head around yet. I plan on getting up to speed with it more very soon, but I thought it would be useful for folks in the same boat to point out an excellent series of articles by Todd Sharp (this is the third week in a row I've led with one of his articles so it's something of a trend now): Hype or Hope - Is MCP The Missing Piece of the Puzzle?.\nThis is part one of a four part series, so buckle up and be ready to learn.\nOn Being Principal Developer Advocate\nNext up is a good read on the good, and bad, of being the principal developer advocate in an organization. Dewan Ahmed wrote about the challenges facing developer advocates in regards to the great freedom the role has in opposition to the great responsibility as well. It's a great read: The Principal Developer Advocate Paradox: Scaling Impact Without Burnout\nTips and Tricks for Better File Uploads\nLast up is a good set of tips for better file uploads in your web apps: 7 Best Practices of File Upload With JavaScript. Most of these are things I knew already, but haven't really thought about in a nice list here as written by StorageBowl. (Who, conveniently, offer a storage solution that I probably need to play with soon.)\nJust For Fun\nMy readers know I love a good cover (in fact, I've got a nearly 11 hour Spotify playlist of covers) so why not enjoy this really good cover of The Cure's "Burn" by NITE:\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Multimodal Support in Chrome's Built-in AI", "date":"Thu May 22 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1747936800, "url":"https://www.raymondcamden.com/2025/05/22/multimodal-support-in-chromes-built-in-ai", "content":" September 4, 2025: I was revisiting this post today and noticed my demos broke. This has happened with many of my Chrome AI posts as the specs change and evolve, but I really wanted to have these working well. I updated the CodePens to fix them, but did not edit the text below, so please keep that in mind.\n\nI'll also note my use `await createImageBitmap(file);` isn't necessary as I can pass the file object directly to it. I've got Thomas Steiner of the Chrome team to thank for pointing that out.\nIt's been a few weeks since I blogged about Chrome's built-in AI efforts, but with Google IO going this week there's been a lot of announcements and updates. You can find a great writeup of recent changes on the Chrome blog: "AI APIs are in stable and origin trials, with new Early Preview Program APIs".\nOne feature that I've been excited the most about has finally been made available, multimodal prompting. This lets you use both image and audio data for prompts. Now, remember, this is all still early preview and will likely change before release, but it's pretty promising.\nAs I've mentioned before, the Chrome team is asking folks to join the EPP (early preview program) for access to the docs and such, but it's fine to publicly share demos. You'll want to join the EPP for details on how to enable these APIs and use the latest Chrome Canary, but let me give you some examples of what you can do.\nBasic Image Identification\nAt the simplest level, to enable multimodal inputs you simply tell the model you wish to deal with them:\n\nYou can also use audio as an expected input but I'm only concerned with images for now. To test, I built a demo that simply let me select a picture (or use my camera on mobile), render a priview of the image, and then let you analyze it.\nHTML wise it is just a few DOM elements:\n\nThe JavaScript is the important bit. So first off, when the file input changes, I kick off a preview process:\n\nThis is fairly standard, but let me know if it doesn't make sense. In theory I could have done the AI analysis immediately, but instead I tied it to the analyze button I showed up on top. Here's that process:\n\nSo, remember that $imgFile is a pointer to the input field which is using the file type. I've got read access to the selected file, which is turned into an image bitmap (using window.createImageBitmap), and then passed to the AI model. My prompt is incredibly simple - just write a summary.\nAs I assume most of yall can't actually run this demo, let me share with you a few screenshots showing some selected pictures and their summaries.\n\n\n\nYes, I agree, she is adorable.\n\n\n\nThis one was pretty shocking in terms of the level of detail. I'm not sure if that is LAX, and not sure if those are exact matches on the airplane types, but damn is that impressive.\n\n\n\nThis is pretty good as well, although I'm surprised it didn't recognize that it was a particular Mandalorian, Boba Fett.\nHere's the complete CodePen if you want to try it out, again, given that you've gone through the prerequisites.\n\n See the Pen \n MM + AI by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nMore Guided Indentification\nOf course, you can do more than just summarize an image, you can also guide the summarization, for example:\n\nWhile a bit silly, there's some practical uses for this. You could imagine a content site dedicated to cats (that's all I dream of) where you want to do a bit of sanity checking for content editors to ensure pictures are focused on cats, not other subjects.\nHere's two examples, first a cat:\n\n\n\nAnd then, obviously, not a cat:\n\n\n\nFor completeness sake, here's this demo:\n\n See the Pen \n MM + AI (Cat or Not) by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nImage Tagging\nOk, this next demo I'm really excited about. A few weeks ago, the Chrome team added structured output to the API. This allows you to guide the AI in regards to how responses should be returned. Imagine if in our previous demo we simply wanted the AI to return true or false if the image was of a cat. While we could use our prompt for that, and be really clear, there's still a chance the AI may feel creative and go a bit beyong the guardrails of your prompt. Structured output helps correct that.\nSo with that in mind, imagine if we asked the AI to not describe the image, but rather provide a list of tags that represent what's in the image.\nFirst, I'll define a basic schema:\n\nAnd then I'll pass this schema to the prompt:\n\nNote that the prompt API is somewhat complex in how you can pass arguments to it, and figuring out the right way to pass the image and the schema took me a few tries. The documentation around this is going to update soon.\nThe net result from this is a JSON string, so to turn it into an array, I can do:\n\nIn my demo, I just print it out, but you can easily doing things like:\n\nFor my cat site, if I don't see "cat", "cats", or "kitten", "kittens", raise a warning to the user.\nFor my cat site, if I", "tags":[ "generative ai", "javascript" ], "categories":[ "development" ] }, { "title": "My New Role - API Evangelist at Foxit", "date":"Tue May 20 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1747764000, "url":"https://www.raymondcamden.com/2025/05/20/my-new-role-api-evangelist-at-foxit", "content":"As I mentioned on the blog a few weeks ago, I (finally) landed a new job. The market is beyond tough right now, so I'm very happy that I was able to land a new role, especially one that's going to be just about perfect for me - API Evangelist for Foxit. I'll be talking more about my role and what I'm covering later (we've got some really cool stuff brewing!) but for now, I can't wait to get busy again!\n", "tags":[ ], "categories":[ "misc" ] }, { "title": "JavaScript in the morning, JavaScript in the evening...", "date":"Mon May 19 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1747677600, "url":"https://www.raymondcamden.com/2025/05/19/javascript-in-the-morning-javascript-in-the-evening", "content":"I've been a huge fan of the Intl spec for sometime, having done multiple presentations and blog posts on the topic. Every time I think I've explored it completely, I come across another interesting gem. Today I'm going to share one that is possibly not something you would use, but it's a curious feature of the spec I wanted to dig more into.\nWhen formatting dates with Intl.DateTimeFormat, you've got a large set of customizations you can use to display dates exactly as you want. I recently came across an interesting part of the formatting options, dayPeriod.\nAccording to MDN, this specifies:\n\nThe formatting style used for day periods like \"in the morning\", \"am\", \"noon\", \"n\" etc. Possible values are \"narrow\", \"short\", and \"long\".\n\nSo consider this:\n\nWhich right now returns, "in the afternoon". You can test it yourself below, and obviously the value will be something different.\n\n See the Pen \n Untitled by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nOk... that's... interesting. Like, I can't imagine having an event calendar and using this in the display. I mean, I think most people understand that 8AM is the morning and 8PM is night. It's possible someone may not know AM vs PM. And of course, if you use a 24 hour clock than it makes even less sense.\nI just really can't see myself using this, but, I was intrigued. When does morning end? When does afternoon switch to night? At least according to the browser that is. So I built a tool to let me test.\nI began with a date that represents today, but at midnight.\n\nGiven that, I then looped over 24 hours and got the result. I also tried all three variations of dayPeriod.\n\nThe log function there just writes to HTML, making it easier to see in CodePen. I took this code and added a form field to let you specify a locale. I also was curious how many unique values for the day period existed and if that changed by locale.\nHere's how it looks for en-US:\nHour: 00, day period: at night, short = at night, and narrow = at night\nHour: 01, day period: at night, short = at night, and narrow = at night\nHour: 02, day period: at night, short = at night, and narrow = at night\nHour: 03, day period: at night, short = at night, and narrow = at night\nHour: 04, day period: at night, short = at night, and narrow = at night\nHour: 05, day period: at night, short = at night, and narrow = at night\nHour: 06, day period: in the morning, short = in the morning, and narrow = in the morning\nHour: 07, day period: in the morning, short = in the morning, and narrow = in the morning\nHour: 08, day period: in the morning, short = in the morning, and narrow = in the morning\nHour: 09, day period: in the morning, short = in the morning, and narrow = in the morning\nHour: 10, day period: in the morning, short = in the morning, and narrow = in the morning\nHour: 11, day period: in the morning, short = in the morning, and narrow = in the morning\nHour: 12, day period: noon, short = noon, and narrow = n\nHour: 13, day period: in the afternoon, short = in the afternoon, and narrow = in the afternoon\nHour: 14, day period: in the afternoon, short = in the afternoon, and narrow = in the afternoon\nHour: 15, day period: in the afternoon, short = in the afternoon, and narrow = in the afternoon\nHour: 16, day period: in the afternoon, short = in the afternoon, and narrow = in the afternoon\nHour: 17, day period: in the afternoon, short = in the afternoon, and narrow = in the afternoon\nHour: 18, day period: in the evening, short = in the evening, and narrow = in the evening\nHour: 19, day period: in the evening, short = in the evening, and narrow = in the evening\nHour: 20, day period: in the evening, short = in the evening, and narrow = in the evening\nHour: 21, day period: at night, short = at night, and narrow = at night\nHour: 22, day period: at night, short = at night, and narrow = at night\nHour: 23, day period: at night, short = at night, and narrow = at night\n\nUnique Periods: at night,in the morning,noon,in the afternoon,in the evening (5 total)\n\nFirst thing you'll notice is that short and narrow only impact one time, noon. Noon is also the only "specific" period for one hour. There is no "midnight" or any other one time only value. Finally, you can see all the unique values (5) listed.\nWhat about the French?\nHour: 00, day period: du matin, short = matin, and narrow = matin\nHour: 01, day period: du matin, short = matin, and narrow = matin\nHour: 02, day period: du matin, short = matin, and narrow = matin\nHour: 03, day period: du matin, short = matin, and narrow = matin\nHour: 04, day period: du matin, short = matin, and narrow = mat.\nHour: 05, day period: du matin, short = matin, and narrow = mat.\nHour: 06, day period: du matin, short = matin, and narrow = mat.\nHour: 07, day period: du matin, short = matin, and narrow = mat.\nHour: 08, day period: du matin, short = matin, and narrow = mat.\nHour: 09, day period: du matin, short = matin, and narrow = mat.\nHour: 10, day period: du matin, short = m", "tags":[ "javascript" ], "categories":[ "development" ] }, { "title": "Code Break Tomorrow", "date":"Sun May 18 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1747591200, "url":"https://www.raymondcamden.com/2025/05/18/code-break-tomorrow", "content":"Just a quick note to let my subscribers know that my next Code Break session will be tomorrow, May 19th, at 12PM CST. I plan on continuing my look at Tauri, a platform for using the web platform to build desktop apps. Depending on how much time I've got, I may also start playing with a Python platform as well. You can RSVP, or just watch, here: https://cfe.dev/talkshows/codebreak-05192025/.\n", "tags":[ "misc", "javascript" ], "categories":[ "development" ] }, { "title": "Sending an Alert for Short Wait Time at Disney", "date":"Fri May 16 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1747418400, "url":"https://www.raymondcamden.com/2025/05/16/sending-an-alert-for-short-wait-time-at-disney", "content":"Yesterday I had some fun with a web app that made use of APIs to report on rides with the shortest wait times at amusement parks. This was done via the excellent, and free, Queue Times service. The application I built let you select a park, and then rides were displayed sorted by the shortest wait time. While working with the API, I also had another idea for a useful service - notifications for short wait times.\nImagine you're at Disney, or any amusement park, and while you're there, you would like to be notified when rides have a short wait time. How could you automate this? For now, let's skip the 'hard part' of imagining the service that would let you sign up for that. You would need a web site, authentication, and so forth. I'd imagine the site would let me select a park and a date range where I'd be visiting. Lastly, I'd also need some kind of threshold for when to be alerted. Maybe the park is so busy, a wait time of 90 minutes or less is ok. Maybe it's ten hundred degrees in Florida and you just want to know about much shorter wait times.\nFor my hypothetical service, I'll assume Disney's Hollywood Studios because that's where Star Wars Land lives (sorry, "Galaxy's Edge", I just think "Star Wars Land" sounds more fun.) From the Queue Times API, this is park ID 7.\nFor my threshold I'm going to use 20 minutes.\nSo given the above, I need a service that gets the rides for Hollywood Studios and filters to rides that are both open and have a wait time of less than or equal to 20 minutes. Let's code!\nThe Workflow\nOnce again, I turned to Pipedream, and started off with a time based trigger. I went with once every 30 minutes, but honestly, I'd probably go with something closer to 10. Again, this is all part of a hypothetical service I don't have any plans on building. ;)\nNext, we need to get rides that match our filters, and for this, I'll use a bit of Python:\n\nMy code gets just the name and the wait time for the ride, but I could have included 'land' as well as that may impact your decision. If you are in Galaxy's Edge and a ride is available outside that land, you may defer to something else with a longer wait time just to save you from walking.\nNext, I need to turn that result into a nice string for the notification. Once again, I used a bit of Python:\n\nAs a reminder, the API returns 'attractions', not rides, but I'm ok with just calling them rides.\nNow for the last bit - the notification. This can really be anything you want, and heck, you could even support multiple types of notifications. My initial idea was to make use of Twilio and send a SMS, but due to recent changes on their platform, you can't do this in trial mode anymore. I considered email, which would be simple with Pipedream. In the end, I decided to use Pushbullet, which amongst other features lets you use an API to send a notification to your mobile phone... if the device has the Pushbullet app. In the "real world" that wouldn't be something you would ask random users to do, but for my own personal testing, it was fine. And - Pipedream literally had this done already as an action I could add. I added to my workflow, authenticated with Pushbullet, and then just selected my registered devide. I then specified 'note' as the push type, gave it a title, and used the result of the previous instruction.\n\n\n\nHere's the entire workflow in context:\n\n\n\nIf that seems pretty simple, it's because it is. I've been saying for years that Pipedream is aweesome for stuff like this.\nFor my first test, I got this notification in the app:\n\n\n\nIt isn't terribly obvious, but if you click, it expands in the app for the complete list of rides, which was rather long when I tested earlier this morning. No big surprise there, as the day goes on the wait times will get longer and longer.\nIf you want, you can see the complete workflow in my GitHub repo, and obviously, this workflow could be done in other systems as well. Let me know what you think!\n", "tags":[ "python" ], "categories":[ "development" ] }, { "title": "Finding Your Next Amusement Park Ride with APIs", "date":"Thu May 15 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1747332000, "url":"https://www.raymondcamden.com/2025/05/15/finding-your-next-amusement-park-ride-with-apis", "content":"Every now and then I'll wonder if something or another has an API, google for it, and be pleasantly surprised to find that there is indeed an API available. This week that random thought was about ride waiting times for amusement parks. To be fair, it wasn't completely random. I saw an ad on Facebook for a little display you can get for your home that shows live wait times. Obviously that's targetted for amusement park freaksfans but it's a cute idea and something I'd consider. I've only recently become a Disney fan (you don't want to know how much I freak out at Galaxy's Edge) so I get the attraction.\nIn this case, my googling landed me on Queue Times, a website which provides wait times and a whole lot more for amusement parks around the world. Best of all, they've got a free API that's easy to use and doesn't require any kind of authentication. This got me thinking about what could be built with these APIs and what I'd like to see if I was at a park. I came up with not one, but two interesting ideas, and today I'm going to share the first.\nThe Ride Sort App\nMy first idea was rather simple. A web application that lets you pick a park and then fetch the rides. It would then show you all the rides that are a) open and b) sorted by the shortest wait time. So if you are at the park and not sure where to go next, this would give you ideas. To be clear, parks have apps, Disney for sure, and this information is available there too, but I thought having a web page that was super clear and focused, and sorted, could be really useful.\nAs a quick aside, I an referring to 'rides', but the API returns more than roller coasters. It's really returning all the attractions but I'm fine keeping it named 'Ride Sort' for now.\nFor the application, I decided on Alpine.js of course, but for the UI, I used Google Gemini within Visual Studio Code to create my design. My initial prompt was:\ni'm creating a simple, mobile friendly web site that will use an API \nto get wait times for rides. I'm calling the app, Find a Ride,\nand I need some CSS to make it look nice. I'm looking for CSS that\nis responsive and has a playful, colorful look to it that matches\nthe fun you have at amusement parks.\n\nNotice I had another name for the app at first. Gemini responded with:\nOkay, "Find a Ride" sounds like a super fun app! An amusement park \nheme is a great choice for the design. I've whipped up some CSS \nthat should give your site that playful, colorful, and responsive \nfeel you're looking for.\n\nThis CSS uses a mobile-first approach, so it'll look great on phones, \nand then it adapts for tablets and desktops. I've picked some \nvibrant colors and fun fonts (make sure to include the Google Fonts \nlink in your HTML's <head>).\n\nAfter this it spit out a bunch of code, and then followed up with instructions on how to use it. This was hella useful as it made it clear what classes I'd need for certain statuses.\nHere's a screenshot of the final application. Note that I followed up my initial prompts with further requests, including help designing the drop down and the checkbox I added later.\n\n\n\nNow let's get into the code.\nThe HTML\nAs an Alpine app, my front end is pretty simple. I've got directives to bind my UI controls (the drop down, buttons, and checkbox) and a place to display rides.\n\nI don't think there's anything too crazy there, but obviously let me know in the comments if anything doesn't make sense. All of the CSS used came right from Gemini and I just adapted to Alpine and my data.\nThe APIs\nAs I mentioned, the application makes use of Alpine.js, but before going into that, let's discuss the APIs. Queue Times provides two end points. The first returns a list of Parks via https://queue-times.com/parks.json. This returns an array of companies, and beneath each company (or park group) is an array of parks. Here's one example under the Disney group:\n\nOnce you have the ID of a park, you can then request wait times like so: https://queue-times.com/parks/7/queue_times.json. This also returns an array of arrays, this time grouped by "land" with "rides" under it. So for example:\n\nBy the way, the Muppet 3D show is going away and I know I'm not alone in being really sad about that.\n\n\n\nGiven that the APIs are super easy to use, the only issue I ran into is that CORS is not supported. To get around that, I simply created two proxies at val town. That was as easy as making a file, adding a HTTP trigger, and writing code like so:\n\nThat's the main proxy to get all the parks, and here's one for getting rides:\n\nNotice there's no error handling there. Oh well.\nAlright, now let's turn to the JavaScript.\nThe JavaScript\nI love Alpine, but it's been a few months since I made use of it so this part was probably the slowest for me. First, here's the core application definition:\n\nI specify default values for what my UI needs and then have code to support loading my remote data and such. The rides value is dynamic based on whether or n", "tags":[ "javascript" ], "categories":[ "development" ] }, { "title": "Parsing Markdown in BoxLang - Take 3", "date":"Wed May 14 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1747245600, "url":"https://www.raymondcamden.com/2025/05/14/parsing-markdown-in-boxlang-take-3", "content":"Ok, so I promise this will be my last post on using Markdown with BoxLang. At least the last one this month. ;) I first covered the topic last month, "Parsing Markdown in BoxLang" where I demonstrated using the Flexmark Java library in BoxLang code. I then followed up with a revised edition that used BoxLang's Java integration a bit nicer. So, those posts are still very valid, still useful for showing you how to make use of the JVM from BoxLang, and with the vast library of open-source Java stuff out there, that's a good thing. But... you don't need to do any of that for Markdown, because now it's even easier! If you prefer to consume this post while listening to my silky smooth voice, check out the video at the end.\nThere is now an official Markdown module for BoxLang, making use of the same Java library I had used. To install, simply run:\ninstall-bx-module bx-markdown\n\nOnce you do that, you've got two new functions, markdown for conversion of Markdown to HTML, and htmlToMarkdown, for converting HTML to Markdown. Here's a simple example:\n\n\n.gist{font-size: 18px}.gist-meta, .gist-file, .octotree_toggle, ul.comparison-list > li.title,button.button, a.button, span.button, button.minibutton, a.minibutton,span.minibutton, .clone-url-button > .clone-url-link{background: linear-gradient(#202020, #181818) !important;border-color: #383838 !important;border-radius: 0 0 3px 3px !important;text-shadow: none !important;color: #b5b5b5 !important}.markdown-format pre, .markdown-body pre, .markdown-format .highlight pre,.markdown-body .highlight pre, body.blog pre, #facebox pre, .blob-expanded,.terminal, .copyable-terminal, #notebook .input_area, .blob-code-context,.markdown-format code, body.blog pre > code, .api pre, .api code,.CodeMirror,.highlight{background-color: #1D1F21!important;color: #C5C8C6!important}.gist .blob-code{padding: 1px 10px !important;text-align: left;background: #000;border: 0}::selection{background: #24890d;color: #fff;text-shadow: none}::-moz-selection{background: #24890d;color: #fff;text-shadow: none}.blob-num{padding: 10px 8px 9px;text-align: right;color: #6B6B6B!important;border: 0}.blob-code,.blob-code-inner{color: #C5C8C6!important}.pl-c,.pl-c span{color: #969896!important;font-style: italic!important}.pl-c1{color: #DE935F!important}.pl-cce{color: #DE935F!important}.pl-cn{color: #DE935F!important}.pl-coc{color: #DE935F!important}.pl-cos{color: #B5BD68!important}.pl-e{color: #F0C674!important}.pl-ef{color: #F0C674!important}.pl-en{color: #F0C674!important}.pl-enc{color: #DE935F!important}.pl-enf{color: #F0C674!important}.pl-enm{color: #F0C674!important}.pl-ens{color: #DE935F!important}.pl-ent{color: #B294BB!important}.pl-entc{color: #F0C674!important}.pl-enti{color: #F0C674!important;font-weight: 700!important}.pl-entm{color: #C66!important}.pl-eoa{color: #B294BB!important}.pl-eoac{color: #C66!important}.pl-eoac .pl-pde{color: #C66!important}.pl-eoai{color: #B294BB!important}.pl-eoai .pl-pde{color: #B294BB!important}.pl-eoi{color: #F0C674!important}.pl-k{color: #B294BB!important}.pl-ko{color: #B294BB!important}.pl-kolp{color: #B294BB!important}.pl-kos{color: #DE935F!important}.pl-kou{color: #DE935F!important}.pl-mai .pl-sf{color: #C66!important}.pl-mb{color: #B5BD68!important;font-weight: 700!important}.pl-mc{color: #B294BB!important}.pl-mh .pl-pdh{color: #DE935F!important}.pl-mi{color: #B294BB!important;font-style: italic!important}.pl-ml{color: #B5BD68!important}.pl-mm{color: #C66!important}.pl-mp{color: #81A2BE!important}.pl-mp1 .pl-sf{color: #81A2BE!important}.pl-mq{color: #DE935F!important}.pl-mr{color: #B294BB!important}.pl-ms{color: #B294BB!important}.pl-pdb{color: #B5BD68!important;font-weight: 700!important}.pl-pdc{color: #969896!important;font-style: italic!important}.pl-pdc1{color: #DE935F!important}.pl-pde{color: #DE935F!important}.pl-pdi{color: #B294BB!important;font-style: italic!important}.pl-pds{color: #B5BD68!important}.pl-pdv{color: #C66!important}.pl-pse{color: #DE935F!important}.pl-pse .pl-s2{color: #DE935F!important}.pl-s{color: #B294BB!important}.pl-s1{color: #B5BD68!important}.pl-s2{color: #c5c8c6!important}.pl-mp .pl-s3{color: #B294BB!important}.pl-s3{color: #81a2be!important}.pl-sc{color: #c5c8c6!important}.pl-scp{color: #DE935F!important}.pl-sf{color: #DAD085!important}.pl-smc{color: #F0C674!important}.pl-smi{color: #c5c8c6!important}.pl-smp{color: #c5c8c6!important}.pl-sok{color: #B294BB!important}.pl-sol{color: #B5BD68!important}.pl-som{color: #C66!important}.pl-sr{color: #C66!important}.pl-sra{color: #B294BB!important}.pl-src{color: #B294BB!important}.pl-sre{color: #B294BB!important}.pl-st{color: #B294BB!important}.pl-stj{color: #c5c8c6!important}.pl-stp{color: #DE935F!important}.pl-sv{color: #DE935F!important}.pl-v{color: #DE935F!important}.pl-vi{color: #DE935F!important}.pl-vo{color: #C66!important}.pl-vpf{color: #DE935F!important}.pl-mi1{color: #8F9D6A!important;background: rgba(0,64,0,.5)!important}.pl-mdht{color: #8F9D6A!important;background: rgba(0,", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Adventures in Vibe Coding - Really, Really Big Numbers", "date":"Thu May 08 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1746727200, "url":"https://www.raymondcamden.com/2025/05/08/adventures-in-vibe-coding-really-really-big-numbers", "content":"I continue to be really against the term 'vibe coding', but also continue to be fascinated by the idea of working with GenAI to help craft/enhance applications in an iterative, conversation-based manner. Ashley Willis recently released an incredibly well done post on the topic, "What Even Is Vibe Coding?", where she goes into detail on her take on the term and what it means for the industry. I think it is an excellent post and I want to highlight one part that really resonated with me:\n\nIt scaffolds layouts, creates routes, fills in placeholder content, basically roughs out the shape of the thing I described. I still review it, refactor it, test it, and shape it into something I’d actually ship. But that first pass? It saves me hours. And more importantly, it frees up mental space so I can focus on the interesting parts.\n\nThis has been my impression as well and also syncs up with what I loved about both serverless and low-code solutions. Anything that helps get me to the 'fun' parts of a project is, usually, a tool worth having in my toolbelt.\nI thought I'd share an example of this I worked on yesterday. For a while now, I've played a few idle clicker games that have an interesting way to handle large numbers. For numbers in the trillions and lower, they will abbreviate to a shorthand form and use the letters K, M, B, and T to indicate the value. So for example, 301M represents some number that rounds to 301 million. As an aside, the web platform has this baked in already via Intl, you can read about that here: "Using Intl for Short Number Formatting".\nWhat's interesting is what these games do over a trillion (where Intl fails to go any higher). Immediately after 999T, they will switch to using "AA" for the indicator. Then BB, then CC, and so forth. After ZZ? AAA. And then BBB, etc. Usually they will replace KKK with KFC for obvious reasons.\nI like this a lot. It's easy to grok the scale and apparent that 100DD is less than 9AAA. In the past, I've taken a stab at coding such a solution, but I never could get it working quite right. My brain could see the logic... a bit... but I failed to ever actually implement it. So, why not ask for help? In my case, I turned to Google Gemini.\nRound One\nI began with what I thought was a pretty comprehensive prompt. I'd discover soon that I was missing a few things, but here's how I started:\n\nI need to write a function that helps format incredibly large numbers in JavaScript. For values over one hundred thousand, it should start using K, for example: 321K. For values in billions and trillions, it should use B and T. When the numbers go over 999 trillion, it should use a new numbering scheme using letters starting with AA. From AA it goes to BB, then CC and so forth. After ZZ, it goes to three letters, AAA. There is an exception for three Ks (\"KKK\") which should be rendered as KFC instead to avoid negative connotations with the KKK.\n\nThe output was rather interesting. It spit out a function and then a large number of testing statements. This is only a portion of the output:\n\nI took all the code, threw it up on CodePen, and immediately got an error. Now, I'll admit - I had not read every single line of code. I should have. Because in the large block of test statements was this gem (be sure to scroll to the right):\n\nYep, it broke it. I didn't notice that it then carried on with a revised edition of the function that handled it. It then output a huge amount of text to explain how it was built. I really dug this.\nRound Two\nI realized I had missed some details, so I responded with this:\n\nThis is close. Let's adjust. I want, at most, 3 numbers in any result. So numbers over 1000 should use K as well, so 1.24K for 1240 for example. In general, all results should have, at most, 3 numbers in the result. We don't count the period or the letter.\n\nOnce again, it worked up a revision with a lots of tests and once again, I realized I had missed something.\nRound Three\n\nAnother adjustment is needed, the input will never be a floating point value, it will always be an integer, and always positive\n\nI felt guilty, but Gemini responded. It also 'told' me:\n\nOkay, that simplifies things by removing the need to handle negative numbers, non-integers, or NaNs at the input. The core logic for scaling and formatting the numeric part to \"at most 3 digits\" remains crucial.\n\nI really appreciate it noting that it was going to simplify. This time the code was perfect. Oh crap...\nRound Four\nI noticed that it was not using "M" for millions. I had not mentioned that in my initial prompt so that's on me I suppose, but I responded with:\n\noops, i do want to support millions. can you fix that?\n\nI haven't shared it yet in this post, but over each iteration, Gemini was doing a damn good job talking about the changes. Here's an example:\n\n\n\nNow comes the cool part. In it's final output, it screwed up the output a bit. I was testing via AI Studio and I could see where it messed", "tags":[ "generative ai", "javascript" ], "categories":[ "development" ] }, { "title": "A Sneak Peek at BoxLang's Module Feature", "date":"Wed May 07 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1746640800, "url":"https://www.raymondcamden.com/2025/05/07/a-sneak-peek-at-boxlangs-module-feature", "content":"Last week I attended and spoke at Into the Box, a conference hosted by the Ortus folks, the company behind BoxLang. While there, I attended a talk from Brad Wood on how BoxLang's module system works. I've been using modules with BoxLang since I first started playing with it. It's how database support is added, mail, PDF, and more. You can see a list of currently released modules here. I had been curious as to how this works so I was excited for Brad's presentation. While hearing him go over the details, I got even more excited, and literally built a 'hello world' module in a minute or so while he talked.\nI'm calling this blog post a "sneak peek" because while the module system is baked and ready (as apparent by the existence of multiple modules you can use now), what isn't ready yet is the documentation for creating your own modules. I've got a bug filed for this and will probably take a stab at writing this soon, but in the meantime I wanted to share some details about what you can do and how it works. Thanks go to Brad Wood for detailing this in his presentation and I'm using his slides as my reference (for now).\nWhat Modules Provide\nWhen a module is registered with BoxLang, it can add to the language:\n\nBIFs (built in functions)\nComponents (these are tags, and can be coded to allow/disallow or require body arguments)\nClasses (which you can then load via a defined import path)\nJars (for both usage as is, or within the module itself)\nJDBC Drivers\nInterceptors (more on this topic soon, but it's incredibly low level code integration)\nCustom variable scopes\n\nThis isn't even 100% of what can be added, but gives you an idea. Taking just the first bullet point above, I could write a module that adds the raymondCamden() function to BoxLang. Once installed, your code could then just make use of it. There isn't any name spacing for these functions so it's something to consider when authoring, and installing, as it's possible two modules could use the same function name, but arguably that's probably not much of an issue right now - just something to keep in mind.\nIt's also important to note that modules can be defined for the entire server or just for one application (a web app or even just a CLI script).\nOk, cool, let's make one!\nMaking a Module\nBefore we begin, note that modules can be written in Java or BoxLang. I don't write Java (well, I can, I just don't want to) so this post is focused on BoxLang modules.\nAt the simplest level, a module is a folder with various things under it. At minimum is a ModuleConfig.bx class. This class has methods for configure, onLoad, and onUnload. The last two let write custom logic for when the module is loaded or disposed, while configure lets you work with any settings your module may have. The class can also be empty if you don't need anything, but I believe you still need the file there.\nNext is the bifs folder. This is where you define built in functions that your module provides.\nThen you've got a components folder. Any component here will be available to BoxLang via a defined class path.\nAnd finally, a libs folder where any jars will be loaded and available to your code. What's cool is that a jar here will be specific to your module, which means if another module uses a similar jar, or a different version, you won't have any conflicts.\nCreating BIFs\nFor me, I think most of the modules I may end up creating will focus on adding new functionality to the language via new functions. To do this, you simply drop a class in the bifs folder such that the name of the class is the name of the function (although you can tweak that via metadata).\nAt minimum, your class will have a @BoxBIF annotation and an invoke method which is run when someone calls your function.\nHow about a real, if incredibly trivial, example? I'm going to start in a folder and under it, create a new folder boxlang_modules. I'll place my modules under this for testing. Next, I'll create a folder for my specific module, which I'm calling cat. In there I'll add this ModuleConfig.bx:\n\nI'm not actually doing any logic here, but it shows the event handlers in action. Next, I'll create a bifs folder and in that, a file named meow.bx:\n\nOn top is a bunch of examples of how the annotations can configure how the BIF runs. I mentioned above the name of the file defines the name of the BIF, but you can customize that with either one or multiple names. Another really cool aspect is that you can define member functions that work with core BoxLang types, so for example, defining an array member function.\nIn the example above, I'm just going for the defaults which means I've added meow to BoxLang. The invoke message defines one argument with a default, but obviously you can do whatever your little heart desires here.\nTo test, I can go within the folder I created and use the CLI like so:\nboxlang --bx-code "meow('ray')"\n\nAnd this gives:\nconfigure\nonLoad\nKitty says ray\nonUnload\n\nI can also create a file, let's say", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Using AI to Analyze Chart Images", "date":"Mon May 05 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1746468000, "url":"https://www.raymondcamden.com/2025/05/05/using-ai-to-analyze-chart-images", "content":"I've done a few posts where I've asked GenAI services to analyze and summarize data. Most recently, I blogged about Chrome's built-in AI APIs and summarizing raw data into simple English. In each case where I've done work like this, I've had access to the raw data of what I want the API to analyze. But what if you don't? What if all you have is a simple chart image? I did some testing with this and here's what I found.\nMy Source Data\nFor my source data, I created a set of charts using Highcharts. This isn't my preferred front-end charting library, but I noticed their demos had (usually) a quick CSV export. That made it easy to get both a sample chart and the raw data behind it. This is what I'll use to judge how well the GenAI service parsed the image.\nI used four charts from Highcharts, and one chart from Powerpoint. I tried to Google for pictures of charts, i.e. someone snapping a picture of a newspaper fore example, but didn't have much luck.\nThe Code\nOk, this is usually where I'd tell you I wasn't going to use code, but instead rely on Google Gemini's AI Studio UI instead. If you think about it, there's no real code needed to test what I want to test, but, I ran into an interesting issue.\nAs part of my testing, I wanted a standardized response in JSON that included:\n\nA high level summary of what the chart represents\nA confidence rating from 0 to 1.\nA copy of the data represented by the chart\n\nThe second bullet item ended up being an issue. When defining my schema, I attempted to create a property called data, of type array of objects, and leave it at that. If you think about it, we have no idea at runtime what our chart will represent so the schema needs to be generic. However, AI Studio wouldn't let me do that. It insisted I needed to define properties for the object.\nOn a whim, I tried a quick code sample and via API, it worked just fine. So given that, here is what I came up with:\n\nThis is vanilla Gemini API code to upload a document and then ask a question about it, although in this case the prompt is blank, it's the system instruction that has the important portion. Do make note of this part though:\n"When parsing chart images, be sure to note data points between axis lines."\n\nIn my initial testing, I saw Gemini returning results for items defined in the x-axis but not data points between them. For example, look at the x-axis on the chart below:\n\n\n\nNotice how the years labels every other year while the data points cover every year. Gemini at first missed those points and the addition to the prompt helped out. Note I said "helped", it didn't always work.\nOk, so let's look at the results, shall we? The tl;dr is... it seemed to work ok. Reasonably well. Although I think it's also reasonable to say folks may not agree. Let's get to it.\nThe First Chart\nFor the first chart, it's the one I shared above. To save you a scroll, here it is again:\n\n\n\nGemini returned this for the summary:\n"The line chart shows the trends in U.S. Solar Employment Growth by job category from 2010 to 2022. The dominant category throughout the period is 'Installation & Developers', which saw substantial growth peaking around 2016 and then fluctuating before rising again towards 2022. 'Manufacturing' employment saw an initial spike in 2011 but remained relatively stable afterwards, generally hovering between 30k and 40k employees. 'Sales & Distribution' also peaked early in 2011 and then maintained a lower, relatively stable level. The 'Other' category remained the smallest, fluctuating below 20k. 'Operations & Maintenance' data is shown starting from 2018 and exhibits slight growth."\nSeems pretty reasonable. Now for the numbers. Here is how Gemini returned it:\n\nHow does this compare? Here's the real data:\n"Category","Installation & Developers","Manufacturing","Sales & Distribution","Operations & Maintenance","Other"\n2010,43934,24916,11744,,21908\n2011,48656,37941,30000,,5548\n2012,65165,29742,16005,,8105\n2013,81827,29851,19771,,11248\n2014,112143,32490,20185,,8989\n2015,142383,30282,24377,,11816\n2016,171533,38121,32147,,18274\n2017,165174,36885,30912,,17300\n2018,155157,33726,29243,11164,13053\n2019,161454,34243,29213,11218,11906\n2020,154610,31050,25663,10077,10073\n2021,168960,33099,28978,12530,11471\n2022,171558,33473,30618,16585,11648\n\nIn general, it looks like Gemini always rounded to the nearest thousand, and in general, was in the ballpark. Not precise, but I wasn't expect precise, but it feels reasonably close.\nThe Second Chart\nFor my second chart, I've got a horizontal bar chart:\n\n\n\nThe summary returned by Gemini was:\n"The horizontal bar chart displays the historic world population, measured in millions, for four regions (Africa, America, Asia, and Europe) in the years 1990, 2000, and 2021. Asia consistently had the highest population across all three years, increasing from 3,202 million in 1990 to 4,695 million in 2", "tags":[ "generative ai", "python" ], "categories":[ "development" ] }, { "title": "Links For You (5/3/25)", "date":"Sat May 03 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1746295200, "url":"https://www.raymondcamden.com/2025/05/03/links-for-you-5325", "content":"Happy Saturday, Happy Pre-May the 4th, and happy "I don't have to beg for a job anymore". Yep, I've got a job. I'm going to be announcing where and what later this month when I start, but, finally, I can stop the hunt. Oh, and the crippling fear and despair being gone is an added bonus. So, happy day! Let's get to the links.\nTubes, tubes, tubes\nLast week I started off with a post from Todd Sharp so why not do it again? Todd wrote up his experience using Momento Topics API and Nixie Tubes. Nixie Tubs are beautiful steam punk looking tubes that can be connected to hardware and then changed programmatically. I did a bit of hardware hacking last year but the project Todd describes here is way beyond my skill set.\nHandling Light and Dark Mode for Images\nWhile this post mentions both Markdown and GitHub in the title, the guide is actually a great HTML tip that shows you how easy it is to have your images support light and dark mode. Given that you have two images appropriate for each mode, you can use a small bit of HTML to serve up the right one automatically while falling back to a default. This tip is from Cassidy Williams and her excellent newsletter.\nTracking Web Analytics with Val Town\nLast up is a good article by Orestis Papadopoulos on using Val Town to track web analytics. I used Val Town in an earlier post to stand up a simple API and it's a service I've been meaning to dig more into for like a year now. Orestis' article is a great example of why the service is so cool.\nJust For Fun\nDid I mention I got a job? I did? Well, I got a job. Which means (at least for now and completely ignoring everything going on in the country) ...\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Pixel Art via Vibe Coding", "date":"Fri May 02 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1746208800, "url":"https://www.raymondcamden.com/2025/05/02/pixel-art-via-vibe-coding", "content":"I am 100% against the term "vibe coding". To be clear, my issue is with the name, it just strikes me as, well, horrible. That being said, I've been using gen AI to generate code samples over the past few months and it's been incredibly interesting at times. It absolutely requires technical skill to evaluate the results and to help guide the AI when mistakes happen, but it's been fun to give this a few tries recently.\nThis morning I gave Claude's desktop app a try and gave it what I thought was a non-trivial prompt:\ncan you generate JavaScript code that will look at an image \nin the DOM and convert it to simplified pixel art?\n\nI then submitted the prompt and stood by while it worked. I didn't time it, but it seems like it took perhaps two to three minutes or so. It generated the code in the right hand panel of the desktop app and then explained, in great detail, what it did and why.\nIt's result consisted of a core function that would take an image in the DOM and create the pixelized version. This function took arguments for the DOM element to use as well as the pixel size and number of colors. It also created a second function to add a UI that could be used to make it more dynamic.\nSo given something like:\n\nYou could then use this:\n\nI took the code, copied to CodePen and... it didn't work. I did some quick debugging and couldn't find an obvious error. It correctly read the image, made a new one, and added it to the DOM, but the resulting image was blank. Given that, I prompted it to correct the issue:\nThis doesn't properly update the original image when used. I can \nsee the code running but when it adds the result back to the dom, \nit is a blank image\n\nHere comes the cool part. Before I sent this prompt, I had noticed that the code failed with an image loaded on another domain. The error in question is one I've seen before, is CORS related, and is easy to fix with a line of JavaScript. I had added that to my copy but didn't mention it above. Yet somehow, when Claude was fixing the issue I had mentioned, it also found this issue.\nThere was a lot of output from Claude about this new version, but here's the key takeaways it reported:\n\nBetter Image Handling:\n\nCreates a new Image object to ensure proper loading\nHandles cross-origin issues with the crossOrigin attribute\nProperly waits for the image to load before processing\n\nImproved Color Reduction:\n\nUses the median cut algorithm for better color quantization\nWeighted RGB distance calculation to account for human perception\n\nEnhanced UI:\n\nStatus messages to show processing state\nBetter styling and layout\nError handling to show issues to the user\n\nPerformance Considerations:\n\nUses willReadFrequently: true with canvas contexts for better performance\nUses setTimeout to prevent UI freezing during processing\n\n\nThis worked well, but, the function it created just automatically plopped the result into the DOM. I wanted more control. So I followed up with:\nModify convertToPixelArt to let me pass a second argument that is \nthe DOM element to render the result to. If not passed, it acts \nas it does now, creating a new DOM element.\n\nInterestingly, it disobeyed me a bit, and added it as a fourth argument. And... I'm ok with. Here's the new method signature:\n\nMy only complaint is that I prefer document.querySelector but I can use that when calling. I then did one final request:\nRemove the support to create a UI. I just need the core support \nfor working with a DOM element\n\nAnd it correctly removed it. Here's the demo below. If you click to open up the source you can tweak the image URL.\n\n See the Pen \n Claude to Pixel Art V2 by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nA Step Too Far\nWhile sharing this with my buddy, he mentioned trying a demo using a C64 style (and his demo is incredible, going to share that at the end). That spurred me to consider an Atari 2600 version, you know, this bad boy here:\n\n\n\nI still have mine along with a collection of cartridges. Yeah, I'm old. So, in Claude, I tried this:\nbuild a new verion of convertToPixelArt that recreates \nthe look and feel of Atari 2600 games\n\nWhat I got... shocked me again. My thinking here was just a color palette/size that recreated the Atari's resolution, but what I got was a lot more. It added a function that:\n\nMatched the resolution and color palette of the Atari 2600 (cool, I wanted that)\nRecognized that the Atari had a scanline restriction that limited how many different colors could appear on one line. It added this enforcement.\nAdded the effect of a CRT screen, including screen curvature and bleeding\nSome Atari games would use 'mirroring' where a screen was mirrored for performance reasons\n\nThat is way beyond what I was thinking of and actually really appreciated. Even better, it made these effects optional. Here's the sample code Claude created to demonstrate:\n\nYou can see this in action here - and honestly - it's a bit too low rez, but I think a better source image would work better. Perhaps some", "tags":[ "generative ai", "javascript" ], "categories":[ "development" ] }, { "title": "Code Break Back for May", "date":"Thu May 01 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1746122400, "url":"https://www.raymondcamden.com/2025/05/01/codebreak-back-for-may", "content":"Hey folks, after a break last month (for reasons), I'm happy to announce that Code Break is back on schedule. I'm ditching any further exploration of React for now, but instead turning my attention to something I think is really fun - building desktop apps. This first session will focus on a JavaScript-based framework while my next one will cover using Python.\nMy next session will not be on a Tuesday, but Monday, May 5th, at 12PM CST. You can RSVP/sign up/etc here: https://cfe.dev/talkshows/codebreak-05052025/\nI hope to see you there!\n", "tags":[ "misc", "javascript" ], "categories":[ "development" ] }, { "title": "A Test of Eleventy Fetch", "date":"Wed Apr 30 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1746036000, "url":"https://www.raymondcamden.com/2025/04/30/a-test-of-eleventy-fetch", "content":"It has been quite some time since I wrote about Eleventy. My last post was a quick announcement about me upgrading my site to Eleventy 3.0 and how well that worked. I was going through my list of blog ideas and realized that in March of 2022, yes, 2022, I wrote down that I should take a quick look at Eleventy Fetch:\n\n\n\nI knew it worked, but I was curious about a few things, for example, invalidating the cache, but apparently this idea got buried and forgotten about until... today! So yes, it works, and works really well and if that's all you care about, hit up the docs and you're good to go. I had to see this for myself though.\nMy API\nI began by creating a quick HTTP-based API on Val Town. This API just returned the current time:\n\nYou can see this yourself here: https://raymondcamden-placidyellowptarmigan.web.val.run/\nNot terribly exciting, but real easy to see if caching is working correctly.\nI then scaffolded a super simple Eleventy site. I added a global data file named apidata.js to return the API:\n\nAnd one quick Liquid file on the home page to render it.\n\nThe final bit was to create a new site on Netlify, connect it to the repo for the site, and test out the publication. This worked fine obviously.\nAdding Fetch\nFollowing the directions I then installed the plugin:\nnpm install @11ty/eleventy-fetch\n\nAnd modified my global data file like so:\n\nAs you can see, the plugin adds a new Fetch API that takes a URL and then a value for the cache duration (in this case, one day) and another to enable automatic JSON parsing.\nI'm testing locally, so I did a quick build, made a note of the time, and ran it again, and confirmed, yep, it worked. The plugin creates a .cache folder which includes metadata about the cached request as well as the value.\nSo far so good, and useful.\nInvalidating the Cache\nGetting rid of the cache is easy - just delete the .cache folder. Do not do what I did and delete the files inside of it. That confused the plugin for some reason. When I switched to just completely nuking it, that worked as expected.\nThe Production Site\nI then did some testing on Netlify itself. I had my site tied to GitHub so every time I did a deploy, it would get the updates, run Eleventy, and deploy. The Fetch plugin warns you against committing your cache folder so I added that to .gitignore.\nWhen testing in Netlify, either via commits or a forced deploy, I saw that Netlify was not persisting the cache. I was about to just be ok with that. I do a lot of builds locally, especially when working on my blog, but only 10-20 builds on Netlify per month or so, but I did some more digging in the docs and came across this little tip that suggests simply adding the Netlify Cache plugin\nThis required adding another npm package (npm install netlify-plugin-cache) and a netlify.toml file to specify that .cache should persist.\nOnce again I deployed, made note of the time, and did a few tests to confirm it worked. Both GitHub commits and manual deploys.\nInvalidating the Cache (in Production)\nInvalidating the cache in production is simple enough - just trigger a build and specify the clear cache option. Obvious, but you may miss this an option if you haven't clicked before:\n\n\n\nHonestly, even if this plugin didn't work at all in production I'd still find it really useful, especially in cases where an API call is slow and you don't want it running every time you make a quick change.\nYou can see all the code here, https://github.com/cfjedimaster/eleventy-scratch, and if you are terribly bored, you can see the site here: https://eleventyscratch.netlify.app/.\n", "tags":[ "eleventy" ], "categories":[ "jamstack" ] }, { "title": "BoxLang Quick Tips - Working with Zip Files", "date":"Mon Apr 28 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1745863200, "url":"https://www.raymondcamden.com/2025/04/28/boxlang-quick-tips-working-with-zip-files", "content":"Time for another BoxLang Quick Tip! This time I'll be demonstrating how to work with zip files and as always, you can find a video version at the bottom of the post. There's one small issue with the video I'll address at the end, but outside of that, you can read, watch, or both! Ok, let's dig in.\nBefore we begin, note that BoxLang supports both zip and gzip files. My demo code works with zip files only, but you can easily perform the same actions with gzip as well.\nCreating Zip Files\nTo create zip files, you make use of the compress built in function. It has arguments for format (either zip or gzip), the source path, and the destination path. It also lets you tweak other settings. For example, when zipping a folder, you can tell it to not include the base folder it the created zip. You can also perform a filter (either by matching a file name or using a function) on what gets included.\nHere's an example showing how easy it is:\n\nBasically, zip up the folder, store it as myzip.zip, overwrite if it exists, and don't include the base folder. I feel like that aspect may be a bit confusing so let me show you an example.\nIf I do not specify that value, or set it to true, when I open up the zipped file I'll see sourceForZip at the root, and if I go into that folder, I'll see my files.\n\n\n\nIf I set the value to false, I instead just get the files:\n\n\n\nPersonally, I much prefer this style of a zip versus a zip of a folder, but you've got both options.\nExtracting Zip Files\nTo extract, you'll use... wait for it... the extract function. Like compress, it has options for the type of zip, where to extract, filtering, and more. Here's an example:\n\nNotice I also demonstrated isZipFile, another built in function that can be used to verify the type of file before working with it. While I'm at it, also note ignoreExists as an option to directoryCreate - I 💖 that.\nI mentioned that both compress and extract support filtering, either via a file glob or callback function. Here's an example of a glob:\n\nThis will only extract files that end with .pdf in their name.\nReading Zip Files\nWhile compress and extract are focused on creating/expanding zip files, the zip component comes with pretty much every feature baked in. The component can do everything the two built in functions can as well as list contents of a zip. Here's an example:\n\nWhich returns an array of elements for each item in the zip. Here's a snapshot of that:\n\nNote how you get details including how much the item was compressed. As I said, the component is pretty powerful, so check the docs for the full syntax.\nYou can find all the demo files for this post here: https://github.com/ortus-boxlang/bx-demos/tree/master/boxlang_quick_tips/zip\nA Quick Note\nWhile working on the video for this post, the BoxTeam and I discovered a small inconsistency with the zip functions versus directoryList. The directoryList function used file globs while compress and extract used a regex. It was decided to switch the functions to use globs which is what you see above. You will not see that in my video as the change was made right after, and, the change is not in the release version yet, but will be available in 1.0 which is out in a few days. The docs will be updated to reflect this change as well. (That's on me to fix, so, Ray, don't forget.) Anyway, with that out of the way, enjoy the silky smooth sound of my voice!\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Using Cloudflare's Browser Rendering APIs for Screenshots", "date":"Fri Apr 25 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1745604000, "url":"https://www.raymondcamden.com/2025/04/25/using-cloudflares-browser-rendering-apis-for-screenshots", "content":"I've been a Cloudflare fan for a while now, but have mainly focused on their Workers Serverless platform. I was aware, of course, that they did a lot more, but I just haven't had the time to really look around and explore. Recently I was doing some investigation into "url to screenshot" services and discovered that Cloudflare had this, and not only that, it's part of a suite of browser APIs that are really freaking awesome.\nCloudflare's Browser Rendering APIs do things like:\n\nGet the HTML of a page, but after JavaScript has executed, allowing it to get dynamic HTML\nRender a PDF to PDF\nScrape HTML via selectors\nParse out content via JSON schema (I'm absolutely going to be testing this soon)\nConvert a page to Markdown\nAnd of course, make screenshots\n\nThe capture screenshot is incredibly flexible. While you can just pass it the URL, you can also do things like:\n\nSpecify a viewport size\nModify the CSS and JavaScript on the page (could be useful for hiding full page modals)\nPass your own HTML instead of using a URL\nWait until a selector is visible\n\nAnd more. I linked to the doc just above, but it's pretty minimal, the reference page for the API shows a lot more options you can tweak.\nBest of all - this is available on the free tier. The limits are reasonable, but note that there is a max of 6 calls per minute (again, on the free tier), so keep this in mind if you are attempting to grab a bunch of screenshots at once.\nOk, how about a quick demo? I wrote a simple Python script that lets me pass a URL, and an optional width and height to the command line. The script will then hit the API, generate the image, and save it to a slugified version of the URL:\n\nThis is kind of ridiculously simple but that's what you want in an API. As I mentioned above, the reference shows a huge number of additional options you can pass, but this script will let you test out basic stuff. How about some quick examples?\nFirst, this blog, with default width (720) and height (1280):\n\n\n\nAnd here's a larger version, width 1720 and height 1200 (the image here has been shrunk to about 700 wide for display):\n\n\n\nNotice how the responsive design correctly renders in both options.\nSo as I said, this is a pretty cool API, and I've got some thoughts on how to use within a BoxLang application soon. I also want to dig into other aspects, especially the structured data aspect, something I've used GenAI for in the past. If you've used any of the browser rendering APIs from Cloudflare, please let me know in a comment below.\n", "tags":[ "python" ], "categories":[ "development" ] }, { "title": "Creating a PDF Book from Markdown with BoxLang", "date":"Thu Apr 24 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1745517600, "url":"https://www.raymondcamden.com/2025/04/24/creating-a-pdf-book-from-markdown-with-boxlang", "content":"Recently I've done some blog posts on BoxLang involving Markdown and PDFs, and I was curious if I could put together something that really demonstrated a complete tool of some sort. With that in mind, I built a "book" system where you can author pages in Markdown and use a BoxLang CLI script to generate a resulting PDF. It's more a POC than a real app, but it was pretty fun to build. Here's what I did.\nFunctionality\nAt a high level, the book is created from a source of Markdown files. Each Markdown file can use front matter (data on top) to define variables that are evaluated at the time the book is created. You can also use a "global" data file to define variables any Markdown file can use, with data defined in the Markdown file itself taking priority.\nHere's an example showing the output from my demo:\n\nSpecifics\nThe CLI script begins by reading a directory of Markdown files. They all are stored in a subdirectory away from the CLI itself. There's no inherit order to the files so my system requires you to sort them by number in the filename. So for my example, I used these files:\n\n01_toc.md\n02_chapter1.md\n03_chapter2.md\n\n\nNext, I read in my 'global' data file. As I explained above, this lets you create variables any Markdown file can use. It will also be used for the book title:\n\nNow comes the fun part. For each Markdown file, I need to pass it to a function that will look for front matter, parse it, apply data dynamically, and return the result.\nFirst, the loop:\n\nNow the function itself:\n\nFor my "parser", I look for front matter as defined by three dashes, YAML data, and then three more dashes. I use the BoxLang Yaml module to handle parsing the Yaml, and the new Markdown module to convert the Markdown to HTML. (I'm going to have a video and blog post on that this week.)\nThe data that's applied is done by copying over the 'global' data first, and then the Yaml, which lets data at the Markdown level take priority. Then I simply look for tokens defined by brackets, ie: {{ name }}. This is fairly simple and only handles simple values, but it works.\nHere's an example Markdown source:\n---\ntitle: The Dog\n---\n\n<a name="chapter2"></a>\n## 2 - Creating a PDF Book from Markdown with BoxLang\n\nThis is chapter one. Hello world. Lorem ipsum dolor sit amet, \nconsectetur adipiscing elit. Fusce vitae lorem at dolor \ncommodo convallis ut ut erat. Cras quis fringilla augue. \nSed vulputate nunc ac porttitor volutpat. Duis varius mauris \nerat, vel commodo tortor semper a. Donec arcu turpis, tempor \nsit amet neque ac, luctus interdum sem. Nulla euismod at eros\nid pellentesque. Etiam tortor enim, bibendum vitae tellus ac, \nlacinia faucibus felis. Nulla at tempus lectus. Nulla facilisi.\n\nCurious about the named anchor? When generating a PDF from HTML, you can create links to content inside the PDF itself using either anchor names, as I've done above, or HTML ID attributes. Using the name here makes it easier to create a TOC which I did as my first Markdown file:\n---\ntitle: Table of Contents\n---\n\n# Table of Contents\n\n<ul>\n<li><a href="#chapter1">Chapter One - The Cat</a></li>\n<li><a href="#chapter2">Chapter Two - The Dog</a></li>\n</ul>\n\nThis is version {{version}} of the book. \n\nBy the way, you'll notice I've got hard coded titles there and dynamic ones in the pages and that obviously would get a bit messy if you edit stuff. I'm not looking to build a full "static book generator" project here. At least not today. ;)\nThe final result of this is an array, htmlParts, of the data used for the template and the HTML content generated from the Markdown. Now it's time to generate the book using PDF BoxLang module:\n\nI begin by adding the book title as a header to every page. Then I loop over each htmlPart element and just output the content. I use documentsection so I can create bookmarks for them. Finally, I add a page count. That's basically it. You can find the complete demo here: https://github.com/ortus-boxlang/bx-demos/tree/master/misc/md_to_pdf\nTo run this, you'll want to install the three required modules (BoxLang will soon support a way to make this easier), and then just boxlang createBook.bxs. Let me know what you think!\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Adding CORS to Your BoxLang APIs", "date":"Wed Apr 23 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1745431200, "url":"https://www.raymondcamden.com/2025/04/23/adding-cors-to-your-boxlang-apis", "content":"CORS, or Cross-Origin Resource Sharing, has been the bane of my existence at times. Don't get me wrong, I get the idea behind it. I get why it's necessary. That being said, I tend to forget about it until I write some client-side JavaScript code that gets hit by it. With that in mind, I thought I'd quickly demonstrate how to build CORS-enabled APIs with BoxLang. It's incredibly simple, which is good, but you'll want to keep it in mind when building out your own APIs.\nWhat and Why?\nI'm not going to repeat the full description of CORS available from MDN, but it basically boils down to a security feature in browsers. When executing code on your domain that makes an HTTP request (either via the ancient XmlHttpRequest or the new host fetch), the browser will look for specific headers on the other domain that basically boil down to, "Are you cool with me accessing your stuff?" This 'question' is done via a 'preflight' network request that checks for specific headers. If those headers do not exist, or exist and do not specifically say the remote host (where your code is) can access the resource, your network request will be blocked.\nAs a creator of an API, if you want people to use it in their client-side JavaScript (and note, this is only an issue in the browser, nowhere else), you are required to add the additional headers to your response.\nAPIs in BoxLang\nCreating APIs in BoxLang is pretty trivial, and follows the model that ColdFusion has used as well. Any particular BoxLang template can output JSON, or XML, or heck, plain text, and be addressable and usable via remote consumers. But typically you will instead use a BoxLang class instead.\nAny BoxLang class under web root will automatically expose any method marked as remote. So for example:\n\nBy having remote in the function declaration, this method can be invoked by using it's path under web root and using method=getCats in the URL to specify the function. So if this were saved as /api.bx, you could use:\nhttps://yourdomain.com/api.bx?method=getCats\n\nThe result is automatically converted to JSON, but you can tweak that if you want to output other formats. You can have as many methods as you want, and can chain some to others, for example:\n\nIn this case, I've added a second method, searchCats, which will return a filtered list of cats. And yes, I 100% could have used one method that had an optional search filter. Honestly, the API you build is up to you and whatever makes sense for your needs.\nIt just so happens I released a BoxLang Quick Tip video on this subject, check it out below:\n\n \n Play Video\n \n\n\n\n\nSupporting CORS\nSo given that it's easy to build an API with BoxLang, let's demonstrate CORS being an issue, and then correcting it. I built a simple BoxLang web app and created api.bx:\n\nI ran this via boxlang-miniserver and confirmed it was accessible. In another folder I created a simple HTML page:\n\nBasically, hit the API on the 'remote' server and render out the results. I fired up a second local web server for this, and immediately get an error in the console:\nAccess to fetch at 'http://localhost:9000/api.bx?method=getCats' \nfrom origin 'http://127.0.0.1:42419' has been blocked by CORS \npolicy: No 'Access-Control-Allow-Origin' header is present on \nthe requested resource. If an opaque response serves your needs, \nset the request's mode to 'no-cors' to fetch the resource with CORS disabled.\n\nDoh! But expected. So let's fix it. How? With one line of code:\n\nNotice I used getCats2 as my source (which I'll share in a minute) has both the 'before' and 'after'. Anyway, using this new method fixes everything.\n\n\n\nNow, to be clear, the Access-Control-Allow-Origin header there is basically saying, "Anyone from anywhere can use me as you will", and you do not need to be that permissive. For details on how to be more specific, again I'd suggest the MDN CORS docs as your reference.\nIf you want, you can check out the source code for both the API and consumer here: https://github.com/ortus-boxlang/bx-demos/tree/master/webapps/corsdemo Let me know if you've got any questions below.\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Parsing Markdown in BoxLang - Take 2", "date":"Mon Apr 21 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1745258400, "url":"https://www.raymondcamden.com/2025/04/21/parsing-markdown-in-boxlang-take-2", "content":"A long, long time ago, ok, it was last Thursday, I posted about adding Markdown processing to BoxLang via the Flexmark Java library. After posting it, a few folks were curious why I didn't use the native import process instead of createObject('java', '...') and the answer was simple - I just didn't think about it! To give you an idea of the difference, let's first consider the initial version:\n\nIn this version, I use createObject for my three Java objects to get to the final result I need, an HtmlRenderer object I can pass a parsed string to. Now consider this version:\n\nThis version is a heck of a lot simpler in terms of what's being done. Technically the imports there break encapsulation from the simple UDF I had written, but I would have used a class in a real application anyway.\nThere is one small issue with this version and that's finding the Jar. If you remember, with createObject I can point to the jar, so what do I do here?\nIf I'm running this in a web application, I'd just use javaSettings to specify it there. Outside of that, for right now there isn't a simple one liner BIF (built-in function) with similar functionality, but we can hack it up like so:\n\nThe bx:application component essentially turns my script into a web application (for the execution of the template) and can therefore make use of javaSettings. As I said, a bit of a hack, but honestly, for CLI scripts I'm fine with that, and, there's an open issue in the BoxLang Jira to add a proper BIF for this.\nYou can find this version in our bx-demos repo here: https://github.com/ortus-boxlang/bx-demos/blob/master/java-interop/flexmark2.bxs\nObviously, both versions work, and it comes down to which style you prefer in your code base, but it's a good example of the flexibility in BoxLang!\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Links For You (4/19/25)", "date":"Sat Apr 19 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1745085600, "url":"https://www.raymondcamden.com/2025/04/19/links-for-you-41925", "content":"Normally I preface these posts with little updates and such, but I'm too busy today and am sitting on what could (possibly) be good news. So, let's just get right into the links, shall we?\nTranslating Live Streams in Real-Time with On-Device AI Models\nI've been real excited about Chrome's upcoming AI on device efforts, so when my buddy Todd Sharp wrote up a cool demo of it, I had to share. In his post, Todd describes using on device transcription of a video source that then makes use of Chrome's new AI feature to perform translation on the viewer's side. Obviously this only works in Chrome Canary, but as an option in the future when it's mainline, this would be absolutely awesome for video streams, especially since the translation is all on device.\nBASIC Python\nNot basic Python, but BASIC in Python. For those of us elderly people, BASIC was often the first language we learned on, and now you can parse/run BASIC code in Python itself. You can even save and load in BASIC files from the file system and the repo includes some examples, including Oregon Trailer. (Spoiler - you will die of dsyentry.)\nMySQL and MCP\nAnyone doing anything in GenAI lately has heard about MCP. I've only done a bit of research into it so far, and honestly, I'm both excited for it and disappointed it's not this:\n\n\n\nIgnoring that for now, you should definitely read this blog post by my other good buddy Scott Stroz where he explains how to connect MySQL with MCP and demonstrates with some interesting golf data. (Ok, don't tell Scott, I don't find golf that interesting, but what he did with his golf data was absolutely fascinating.)\nJust For Fun\nI've been subscribed to @matt one on YouTube for a few weeks now and I believe I probably shared one of his videos before. He creates some pretty stellar remixes and mashups. This one is a remix of one of my favorite Cure songs and I hope you like it too:\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Parsing Markdown in BoxLang", "date":"Fri Apr 18 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1744999200, "url":"https://www.raymondcamden.com/2025/04/18/parsing-markdown-in-boxlang", "content":"A few months ago, I wrote up a blog post exploring Java integration in BoxLang and in that post, Robert Zehnder suggested I get Flexmark working as well. Flexmark is a Java Markdown library, and turns out, I blogged about it last September: "Parsing Markdown in ColdFusion"\nThat post demonstrated how to use Flexmark in ColdFusion, and initially I didn't think there would be a point in demonstrating the same thing in BoxLang as the syntax would be near identical, but turns out, there's one small difference that's absolutely worth sharing.\nOk, so first off, I grabbed flexmark-all-0.64.8-lib.jar from Flexmark's Maven repository. In the previous post I made use of ColdFusion's application framework to define my Java load paths so that ColdFusion could find the jar. For BoxLang, I could do that as well but as I'm building a command line tool and not a web app, I instead made use of the BoxLang feature where createObject lets you pass in a jar file. Keep that in mind if you make use of this code in a web environment, you could simply a bit in that context.\nHere's the initial function I wrote which is a copy of the previous one, with the addition of specifying the jar:\n\nAs I mentioned in the previous post, this code came from reading the sample Java code for Flexmark. But this didn't work! Why?\nWhen run, I got this stacktrace:\nortus.boxlang.runtime.types.exceptions.NoMethodException: No such \nmethod [builder] found in the class [com.vladsch.flexmark.parser.Parser] \nusing [1] arguments of types [[class java.lang.Class]]\n\nThis is referring to the second line in the function and seems to imply the ds variable is an instance of java.lang.Class, not the class I had initially created.\nTurns out, this is expected as the initial call of creating the object just loads the class, but doesn't actually make an instance of it. The fix is ridiculously simple (scroll to the right):\n\nI literally just added an init call for the ds object to properly load an instance and get it running. Something to keep in mind, and given the a) huge amount of open source Java out there and b) BoxLang runs on the JVM, it's an important tip to keep in mind.\nBefore I leave, one more quick note. In my test script, I made use of another BoxLang feature, tag islands. Tag islands are a way to incorporate tag based syntax within scripts, and honestly, the whole idea horrifies me. I don't know why, it just does. That being said, I've not actually used the feature before, and it can be really useful, for example:\n\n\n.gist{font-size: 18px}.gist-meta, .gist-file, .octotree_toggle, ul.comparison-list > li.title,button.button, a.button, span.button, button.minibutton, a.minibutton,span.minibutton, .clone-url-button > .clone-url-link{background: linear-gradient(#202020, #181818) !important;border-color: #383838 !important;border-radius: 0 0 3px 3px !important;text-shadow: none !important;color: #b5b5b5 !important}.markdown-format pre, .markdown-body pre, .markdown-format .highlight pre,.markdown-body .highlight pre, body.blog pre, #facebox pre, .blob-expanded,.terminal, .copyable-terminal, #notebook .input_area, .blob-code-context,.markdown-format code, body.blog pre > code, .api pre, .api code,.CodeMirror,.highlight{background-color: #1D1F21!important;color: #C5C8C6!important}.gist .blob-code{padding: 1px 10px !important;text-align: left;background: #000;border: 0}::selection{background: #24890d;color: #fff;text-shadow: none}::-moz-selection{background: #24890d;color: #fff;text-shadow: none}.blob-num{padding: 10px 8px 9px;text-align: right;color: #6B6B6B!important;border: 0}.blob-code,.blob-code-inner{color: #C5C8C6!important}.pl-c,.pl-c span{color: #969896!important;font-style: italic!important}.pl-c1{color: #DE935F!important}.pl-cce{color: #DE935F!important}.pl-cn{color: #DE935F!important}.pl-coc{color: #DE935F!important}.pl-cos{color: #B5BD68!important}.pl-e{color: #F0C674!important}.pl-ef{color: #F0C674!important}.pl-en{color: #F0C674!important}.pl-enc{color: #DE935F!important}.pl-enf{color: #F0C674!important}.pl-enm{color: #F0C674!important}.pl-ens{color: #DE935F!important}.pl-ent{color: #B294BB!important}.pl-entc{color: #F0C674!important}.pl-enti{color: #F0C674!important;font-weight: 700!important}.pl-entm{color: #C66!important}.pl-eoa{color: #B294BB!important}.pl-eoac{color: #C66!important}.pl-eoac .pl-pde{color: #C66!important}.pl-eoai{color: #B294BB!important}.pl-eoai .pl-pde{color: #B294BB!important}.pl-eoi{color: #F0C674!important}.pl-k{color: #B294BB!important}.pl-ko{color: #B294BB!important}.pl-kolp{color: #B294BB!important}.pl-kos{color: #DE935F!important}.pl-kou{color: #DE935F!important}.pl-mai .pl-sf{color: #C66!important}.pl-mb{color: #B5BD68!important;font-weight: 700!important}.pl-mc{color: #B294BB!important}.pl-mh .pl-pdh{color: #DE935F!important}.pl-mi{color: #B294BB!important;font-style: italic!important}.pl-ml{color: #B5BD68!important}.pl-mm{color: #C66!important}.pl-mp{color: #81A2BE!important}.pl-mp1 .pl-sf{color: #81A2BE!impor", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "BoxLang Quick Tips - Working with JSON", "date":"Tue Apr 15 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1744740000, "url":"https://www.raymondcamden.com/2025/04/15/boxlang-quick-tips-working-with-json", "content":"Welcome to another BoxLang quick tip - today I'm going to focus on working with JSON in BoxLang. Now, as you can probably guess, JSON is natively supported and supports what you would expect, going to and from JSON, but there's some particularities of the support that may interest you, so I've dug into it. As with my other quick tips, you can skip to the video version at the bottom if you prefer.\nThe Basics\nConverting data to JSON can be done two ways, either via the built in function (BIF) jsonSerialize or the member function toJSON. There's no difference here, just use what makes sense for you:\n\nAs a reminder, variables is a scope in BoxLang.\nGoing from JSON can also be done two ways, either via jsonDeserialize or fromJSON:\n\nThis is all pretty simple and straightforward, but you can test it yourself below:\n\n \nQueries are Different...\nSo far so good. Queries in BoxLang serialize a bit differently than you may expect. This is based on past behavior in ColdFusion and represent the 'special' nature of queries as a proper data type in the language. Let's look at an example. First, here's our query:\n\nWhen you convert this to JSON, you can pass an argument to define how it's serialized. There's two values, row and column, with row being the default. Here's how the JSON looks when using row:\n\nAs you can see, you get a value representing the columns of the query and then a data array where each element itself is an array of values that match the same order of columns.\nTo use the column format, you would pass it like so:\n\nWhich returns the information like so:\n\nAs you can see, each element in data now maps to a column with the value being an array of items for each row. You can see it for yourself below:\n\n \nI'm not a fan of this output, but as I said, it matches how ColdFusion serialized queries so I get it. Luckily, it's also really trivial to use another format. Query objects have a member function, toArrayOfStructs, that converts the query object to, wait for it... an array of structs. I much prefer this 'shape' and even if I'm not using JSON will add this to my code getting database information. I could use this with the people query like so:\n\nYou can try this below:\n\n \nValidating JSON\nYou can also check if a string is valid JSON first with isJSON:\n\nThis works as expected - with the first check returning false and the second true:\n\n \nPut Some Lipstick On It!\nFinally, you can 'pretty' up your JSON printing with... jsonPrettify:\n\nGiven the data above, you get this in your output:\n\nTry it yourself below:\n\n \nThat's it. Let me know if you've got any questions, and enjoy the video version below:\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Build Your Own Localized Events Calendar using Diffbot's Knowledge Graph", "date":"Mon Apr 14 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1744653600, "url":"https://www.raymondcamden.com/2025/04/14/build-your-own-localized-events-calendar-using-diffbots-knowledge-graph", "content":"Finding out what's going on in your city can be a bit of a chore. For me, I use a combination of Facebook, specifically accounts for local organizations and news channels, and our local Reddit forum. This is... haphazard at best. I'm sure local "city wide" calendars exist, but I'm not aware of any that is used by the majority of folks nor do I trust them to actually cover everything going on. Having played with Diffbot's Knowledge Graph last month ("Automating and Responding to Sentiment Analysis with Diffbot's Knowledge Graph"), I thought I'd do some digging to see what would be possible via their API. Here's what I was able to build.\nFirst Attempt - City and State\nFor my first attempt, I made use of the Diffbot visual search tool. "Events" are one of the many entity types there so you can start off with:\ntype:Event\n\nTo give you an idea of the size of the Knowledge Graph, this returned over half a million results.\nNext, I wanted to filter by a location. This took a bit of digging around, but I figured out that the state property is locations.region.name while city is locations.city.name. This means it's easy to filter to a city. Now, one of the things I noticed was that there wasn't much data for my particular city, which to be fair, Lafayette isn't a big region. For my demo, I switched to New Orleans:\ntype:Event locations.region.name:"Louisiana" locations.city.name:"New Orleans" \n\nThis returned almost a thousand results. For the final filter, I added a date restriction for the past thirty days. Now, to be clear, today is April 14th, if an event happened on the 2nd, it's too late. That being said, I thought it would be useful to see events for the entire month. For events that occur every month, this lets you see something you may have missed before but can catch next time. I also added a sort as well:\ntype:Event locations.region.name:"Louisiana" locations.city.name:"New Orleans" \nstartDateTime>"2025-03-14" sortBy:startDateTime \n\nThis returns over two hundred results:\n\n\n\nAs you can see, there's an API call setting right in the UI and clicking it gives you the raw URL you need to get this data. Here it is, minus my key off course:\nhttps://kg.diffbot.com/kg/v3/dql?type=query&token=SECRET&query=type%3AEvent+locations.region.name%3A%22Louisiana%22+locations.city.name%3A%22New+Orleans%22+startDateTime%3E%222025-03-14%22++sortBy%3AstartDateTime&size=25\n\nWoot! This works, but I kept digging...\nSecond Attempt - Using the Near Operator\nWhile looking at Diffbot's DQL Search docs, I noticed the section on "Utility Statements" discusses the near operator. As you can guess, this lets you find entities (what Diffbot calls their data) within a radius around a specific location. That radius defaults to 15km but can be changed to a specific km or mile value. The docs specify that you can provide either a city or an ID value.\nIf you use a city, the docs say that it will "default to the city with the most importance within the Knowledge Graph." That makes sense I suppose, but generally, I'd probably suggest using the ID value of an entity instead to be sure.\nTo try something different, I found the ID for Austin, Texas, and this is the query you would use to find events within ten miles:\ntype:Event startDateTime>"2025-04-01" near[10mi](id:"E8y6iIzzkPbKiZdINSDRnYQ") sortBy:startDateTime\n\nThis returns 123 results, but if we expand our search to twenty miles, you get 668. Not surprising but useful.\nSo which do we use? I think it depends. For a large metro area, maybe always use the first approach with a specific value for the location. For a smaller area, the near approach may work better. And of course, there's always this option:\n\n\n\nGiven that results from Diffbot have unique entity ID values, you could easily do two calls and dedupe the results. For today, I'm going to stick with the first approach to keep it simpler.\nBuilding the API\nAs with my last demo, I decided to make use of Pipedream. I created a new workflow using a HTTP trigger which gives me an endpoint I can use in my code. Here's the URL it created: https://eofjep94f7kygzd.m.pipedream.net\nAfter adding the HTTP trigger, I added a code step that handled the "figure out 30 days in the past" and than simply hit the API. I made one small tweak for performance. Pipedream has a key-value storage system called data stores, and given that events won't change terribly often, nor will Diffbot's Knowledge Graph be updated every few seconds, I added a basic 12 hour cache to the results. Here's that code:\n\nNote that I could have made the city/state dynamic as properties to the workflow, but again, I'm keeping it simple. Also make note that I changed size to 100. Diffbot's API will let you paginate and it wouldn't be that difficult to do so, but as I didn't want to make this too complex, I figure this was a simple enough solution. I ", "tags":[ "python", "pipedream" ], "categories":[ "development" ] }, { "title": "My First (and Last) Spotify Web App - Music Snob", "date":"Fri Apr 11 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1744394400, "url":"https://www.raymondcamden.com/2025/04/11/my-first-and-last-spotify-web-app-music-snob", "content":"I've been a happy Spotify user for a few years now (I transitioned from Amazon Music after they cut features and generally ticked me off) and as I listen to music a lot, I've built a few integrations with their APIs over the years. Those integrations were simple tools that hit my own personal data and were just for fun, but I thought I'd take a crack at building a simple app with their Web API which would allow Spotify users to authenticate and see their own data. I built the app. But I 100% would not recommend working with the Spotify APIs going further. I'll explain everything that went wrong, why I recommend this and so forth, but if you just want to see the app, scroll down to the very bottom for the link.\nIt's not the API...\nSo why the dramatic and dire statements above? It isn't the code. Their REST APIs work perfectly well and are (well, were) full featured. That isn't the issue. The problem is when you want to move your web app into production. This involves, obviously, a check on the Spotify side, to ensure your app meets certain requirements and such. That's totally reasonable.\nI thought... surely this will be a simple process.\nI began with my initial request on April 30, 2024. This is basically a form asking what you're doing, what scopes you are using and why, and including screenshots. I got rejected 3 months later. Not 3 days. Not 3 weeks. 3 months. I corrected my issue and resubmitted where I discovered that "resubmitting" means literally putting every single thing back into the form, including screenshots. And then I waited again.\nChecking the developer forums was a mistake as I discovered I was far from being the only one having to deal with this. Apparently six plus months of waiting is the norm.\nAfter waiting nearly two months again, I was approved. And then... I discovered that some grant I had used had changed - or perhaps worked one in localhost and another live. Honestly I don't remember the exact details, but I had to request a scope and wait... again.\nThe final approval was November 26, 2024. That's just... incredible. And apparently the next day, changes to the Web API were posted on the forums and the top comment is from a person who had spent months on a project to be it completely destroyed by the changes. You can read more about those changes here, and luckily it didn't impact my app, but... yeah.\nNone of this impacts non-web app type uses, but honestly, my confidence in Spotify's support for developers is an infinite curve approaching zero. I would avoid it unless things change.\nSo, with that out of the way... what did I actually build?\nThe Music Snob App\nI like to think I've got eclectic taste in music. While I've got genres I definitely spend a lot of time on (new wave, trance, goth), I enjoy pretty much any style of music, outside of country and heck, even there I can find some tracks I enjoy. I thought to myself - I wonder if something in my data would tell me exactly how much of an eclectic listener I am, or more simply, am I snob? (To be fair, I will rock, and dance, the hell out to some Britney Spears so I can't be too much of a snob.)\nTurns out, there is an API that returns a user's top media. The Get User's Top Items endpoint will return either your top artists or tracks.\nHere's an example showing top artists:\n\nOf note is the popularity field, which according to the docs is:\nThe popularity of the artist. The value will be between 0 and 100, with \n100 being the most popular. The artist's popularity is calculated from \nthe popularity of all the artist's tracks.\n\nIt's similar for tracks as well. So given that I can could get a current user's top values for both artists and tracks, in theory, we could average their popularity, and the lower the value, the more obscure/eclectic your tastes are.\nHere's a screenshot from what I built:\n\n\n\nAnd in case the text is too hard to read, the report said:\nFor your top musical artists, they had an average popularity score of 21.04. \nFor your top tracks, they had an average popularity score of 18.34. Spotify \nranks popularity from 0 to 100 with 100 being the most popular.\n\nTaken together, you ARE a music snob! Congrats!\n\nSee! I told you I was cool!\nThe application itself is a rather simple Alpine.js application using Shoelace for UI. I'll link to the entire code base in a sec, but on the front end I basically have two states - the you need to auth with Spotify state and the "getting and reporting" state. I don't think the HTML is that interesting, but I'll share a bit.\nThe entire "are you a snob or not" comes down to one check that looks at the average of your two average 'scores' for popularity in tracks and artists:\n\nThe value of '40' is used as the cutoff and that was somewhat arbitrary. When looping over tracks and artists, I made use of the Shoelace card component:\n\nWhich renders nicely I think:\n\n\n\nLet's switch to the more fun stuff, the JavaScript. I began by using most of the code from Spotify's How ", "tags":[ "javascript", "alpinejs" ], "categories":[ "development" ] }, { "title": "Using Chrome's (Preview) Prompt API for Data Summarization", "date":"Thu Apr 10 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1744308000, "url":"https://www.raymondcamden.com/2025/04/10/using-chromes-preview-prompt-api-for-data-summarization", "content":"I probably should not be blogging about Chrome's built-in AI (upcoming) features as pretty much every single post I've done is now broken due to changes to the APIs and such, but given that I just got back from a conference where I had a chance to show off these early APIs, I built a demo that I wanted to share with folks. I imagine that once these APIs become GA (generally available) that this demo will need updating, but I thought it was a cool example and something that has me excited for their future.\nUnlike other Chrome AI features I've covered here that are focused on one particular task (like translation), the Prompt API is more general purpose. It supports any general question and answer, but being based on a smaller model (Gemini Nano), it won't have nearly the same breadth of knowledge as a larger, API based system.\nThat being said, the docs for the API had some pretty fascinating use cases, including scanning text for calendar events or contract data. This got me to thinking about a topic I covered in October last year, AI insights to data. In that post, I used Gemini APIs to translate raw data being used in charts to general one sentence 'executive' type summaries. Even though they pretty much said exactly what was in the chart, I thought it was a great use of AI and was something I was curious about using with Chrome's built-in AI.\nMy Data\nFor my demo, I decided to (once again) make use of the Pirate Weather API. When making a forecast request, you get a large set of data back. Here's a subset of that information:\n\nThe portion I cut out was within data.daily and I simply removed the last five days of the forecast. Given this raw data, can we write a simple and short forecast? Here's what I came up with.\nMy Demo\nFirst, I grab the forecast:\n\nGiven the large set of data, I wanted to 'translate' this into a smaller string that consisted of:\n\nThe high and low temperatures\nThe forecast summary (i.e. cloudy, rainy, apocalypse)\n\nI used the following logic to do so:\n\nNote that the slice at the end removes the first day which is the current day. That may, or may not, make sense. The result from this is:\n\nSpoiler - in Louisiana, if you ever see "possible drizzle" or "possible rain", you're getting rain. Period.\nNow let's turn this into a forecast. For this demo, I skipped my usual "does the API exist and can it be used" checks, so keep that in mind. First, I create an instance of the model with my system instruction:\n\nAnd then I generate the result:\n\nHere's a sample result:\n\nThe forecast for the next week includes a mix of clear skies and partly cloudy days, with temperatures ranging from the mid-40s to the mid-80s. There is a chance of drizzle on Friday.\n\nThat seems pretty accurate I think. You can test this out yourself, but keep in mind that instructions for enabling this feature is behind a signup (fill out the form here) and probably will not work for you below. But, you can at least see the full code and honestly, it's a trivial amount of work. Let me know what you think!\n\n See the Pen \n LanguageModel + Weather by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\n\n", "tags":[ "generative ai", "javascript" ], "categories":[ "development" ] }, { "title": "Come Learn about BoxLang at Into the Box 2025", "date":"Wed Apr 09 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1744221600, "url":"https://www.raymondcamden.com/2025/04/09/come-learn-about-boxlang-at-into-the-box-2025", "content":"Later this month, I'll be speaking at Into the Box 2025 in Washington, DC and online. I've spoken at Into the Box in the past and the Ortus team puts on a great show, so I'd absolutely suggest checking it out if you can. In person tickets are available, although close to selling out. The virtual event gives you everything the in person event does minus the workshops.\nWhat will I be speaking about? BoxLang of course! I'll be giving an introductory session on the language and talking about how you can start using it today. I promise multiple, enterprise-worthy cat demos to go along with it!\nCome join me and many others!\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Comparing Google's Image Generation Models", "date":"Tue Apr 08 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1744135200, "url":"https://www.raymondcamden.com/2025/04/08/comparing-googles-image-generation-models", "content":"Last month I blogged about Gemini's new image generation support. Previously they had one model, Imagen 3, but recently they added support to the Gemini Flash model as well. It's been on my to do list for a while now to do a proper comparison. While what follows isn't exhaustive at all, it does give you some quick examples of the differences. Before I begin, a reminder about the two models:\n\nThe Gemini Flash model is best for generating images and text (in fact, you can't tell it not to generate text, but it won't always do so and you can ignore it).\nThe Imagen model gives you better quality, control over the aspect ratio, and the ability to generate multiple images at once.\n\nFinally, you can test Gemini's image support for free while Imagen costs. According to the current pricing figures, it costs 3 cents per image. This is pretty low, but I waited to do these comparisons until I got some free GCP credit as a Google Developer Expert.\nThe Code\nWhile I don't expect anyone to actually use this, here's the code I used for my testing purposes. For the most part it's just, "do this prompt for Imagen and again for Gemini", but the Gemini call is done in a loop as you can't specify the number of results. I've got a different key for imagen so it uses different authentication.\n\nWhen this runs, it creates two images each and uses a file name based on the model, slug, and what number result it was. You can find the source for this here: https://github.com/cfjedimaster/ai-testingzone/blob/main/imagen/compare_gemini_imagen.py\nThe Results\nOk, so here are the prompts and results. For each image, I used Paint.net to resize the width to a max of 500 pixels wide. You don't have precise control over the size with either of the models, but you get consistent results back and could use server side code to resize.\nThe first prompt is:\n\na black cat under a clear moonlit sky, fireflies flit in the background\n\nFirst, Gemini:\n\n\n\n\n\n\nAnd now, Imagen:\n\n\n\n\n\n\nNext up is:\n\na polaroid photo of a cat under a christmas tree, set in the 1970s, the photo has a bit of damage\n\nFirst, Gemini:\n\n\n\n\n\n\nAnd now, Imagen:\n\n\n\n\n\n\nThe quality differences here really stand out, although one could argue the lower quality Gemini results kinda work as well given the prompt for an old photo.\nNext:\n\na cartoon drawing of a cat dressed as a super hero shown flying across a cityscape towards the camera\n\nFirst, Gemini:\n\n\n\n\n\n\nAnd now, Imagen:\n\n\n\n\n\n\nNext:\n\na black and white inked artistic picture of a cat\n\nFirst, Gemini:\n\n\n\n\n\n\nAnd now, Imagen:\n\n\n\n\n\n\nAlmost done, promise. Next:\n\na painting of a cat done in the style of monet\n\nFirst, Gemini:\n\n\n\n\n\n\nAnd now, Imagen:\n\n\n\n\n\n\nNotice how both Gemini results came out like a photo of a painting. I can see wanting that in some cases, but I much preferred the Imagen results here. A better prompt probably would have helped Gemini.\nAnd finally, testing text generation:\n\na comic style picture of a cat holding a sign that says \"free cats\"\n\nFirst, Gemini:\n\n\n\n\n\n\nAnd now, Imagen:\n\n\n\n\n\n\nImagen "wins" again, although I've got no idea what the "POOOW" sign is about.\nLet me know what you think, and if you are using either of these models now, I'd also love to know. Leave me a comment below.\n", "tags":[ "generative ai", "python" ], "categories":[ "development" ] }, { "title": "Links For You (4/5/25)", "date":"Sat Apr 05 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1743876000, "url":"https://www.raymondcamden.com/2025/04/04/links-for-you-4525", "content":"Not going to lie, this has been a long week. I gave two presentations at Arc of AI, one of which needed to big updates as Chrome changed their API a day before my presentation. To be fair, the browser AI stuff is in development and the changes were good, but I had to scramble a bit. I'm exhausted (for this and other reasons) so let's just skip right to the links, shall we?\nSearch with Video and Algolia\nA few days ago, Algolia had a small virtual developer conference with one of the most fascinating presentations I've seen. Tim Carry described how he built a tool to index and search short videos from YouTube. The number of different tools and things he did to build this little tool is absolutely fascinating and even if you don't necessarily every need to repeat this particular task, I'd highly encourage watching it just to see all the different moving parts as they come together.\n\n \n Play Video\n \n\n\n\n\nRAG and Python\nNext up is another video, this time by Pamela Fox. I've known her for quite some time and she's an excellent person to follow and scary smart. In this video (part of a series), she discusses RAG (Retrieval Augmented Generation) with Python. All the code is shared, and can be run for free as well, and she does a great job of making it understandable.\n\n \n Play Video\n \n\n\n\n\nYour DevRel Questions... Answered\nFor the last link (well, 'serious' link), I've got an excellent article by my buddy Brian Rinaldi, Your DevRel Questions Answered. Finally!. In this post, Brian goes into detail various aspects of developer relations and answers common questions about the role, including measuring, where it should sit, and what kind of activities should be considered part of the role.\nJust For Fun\nI've been rewatching Andor in preparation of the new season this month, and while I had already thought it (along with Rogue One) was the best part of Star Wars, my rewatch has me blown away. Every aspect of it - the shots, the music, the dialogue, the action, everything, feels absolutely perfect. If you haven't given it a shot, I highly recommend you do, and for fun, here's the fan made Beastie Boys Rogue One mashup that I may have watched over a hundred times.\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Scheduling Code in BoxLang", "date":"Fri Apr 04 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1743789600, "url":"https://www.raymondcamden.com/2025/04/04/scheduling-code-in-boxlang", "content":"While I was busy getting utterly overwhelmed by deep AI talks at Arc of AI this week, BoxLang released it's third release candidate, and while there's multiple goodies in there, the schedular is the one that interests me the most. Currently the only docs are in the release notes, but there's enough information there to get started. Here's a quick look at what's been added.\nFirst off - just in case it isn't obvious, the idea here is to write code that can execute by itself on some predefined schedule. There's multiple different use cases for this - performing backups, refreshing data from an API, logging stats and so forth. In BoxLang, scheduled tasks can be defined in CLI scripts, for web applications, and at the server level itself. Where you do this depends on whatever you have in mind.\nCode wise, you load a BoxLang class that can define one or more tasks, each with it's own name, schedule, and code. This class can also define multiple different lifecycle events giving you the ability to run things before task execution, after it, and more. Let's look at a small example.\n\nThis minimal example has one method, configure, which sets properties (name and time zone) and defines one task. The single arrow call there (->) defines a lambda function, but closures can be used as well. The task simply prints out a message and finally a schedule of every five seconds is used.\nFrom the command line, this can be run with the boxlang CLI:\n\nAnd will output to the terminal every five seconds:\n\nKilling the script (CTRL+C) kills the scheduled task, so don't forget you can run it as a background task, for example, using the & operator in Unix type shells:\n\nPersonally I'd just open a new tab in my terminal so I don't have to look up the process later to kill it.\nThat's the basic idea, but you can do a lot more, including:\n\nDefine a startup and shutdown hook for the scheduler.\nDefine an error handler for tasks.\nDefine a success handler for tasks.\nDefine a before and after hook for a task.\n\nI'm going to steal from the example Luis shared with me that shows a "complete" scheduled task class using every possible method:\n\nAlright, so how about a slightly realistic example? As most of my readers know, I can't get enough of weather APIs. I built a simple wrapper about the Pirate Weather API that would give me a nice weather report in my terminal. Here's that code:\n\nAll this does is configure a task that wraps a call to getWeather (which itself wraps a call to the Pirate Weather API) and displays the current conditions and temps to my terminal. I set it to run once an hour as I figured that would be sensible for weather information. If the layout of the text above looks a bit weird, that's simply what worked for me in my terminal with spacing. As an example:\n\nYou can find the source for this demo here: https://github.com/ortus-boxlang/bx-demos/blob/master/scripting/weathertask.bx\nSo as I mentioned above, you can use these scheduled tasks at the command line, but also within a web application as well. In fact, I've had a small BoxLang app I've been waiting to share as it needed this feature. I'll share that sometime next week. But the syntax there would be this in your Application.bx file:\n\nAlso, there's multiple new functions that allow for programmatic access and manipulation of tasks. Check the docs I just linked to for more information.\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "BoxLang Quick Tips - Sending Email", "date":"Thu Mar 27 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1743098400, "url":"https://www.raymondcamden.com/2025/03/27/boxlang-quick-tips-sending-email", "content":"Welcome to another BoxLang Quick Tip! As with my other quick tips, I'll end this blog post with a link to the video version so feel free to skip down to it, or read, or both if you prefer! Today's quick tip is a look at how BoxLang supports sending email, and as with my previous tips, an additional module is all you need to do.\nThe Mail module can be installed via the CLI like so: install-bx-module bx-mail. Once installed, you get three new components for your runtime:\n\nmail - This is the core component and handles all mail operations. You'll always use this. It has quite a few options so be sure to check the docs, but in general you'll provide the to, from, subject, and authentication information. Any output within the component will become part of the email message.\nmailparam - Used for additional mail parameters like headers and attachments (although the core mail module can handle attachments as well)\nmailpart - Generally only used to handle sending plain text and HTML emails at once.\n\nFor my testing, I made use of an excellent open source Windows application, smtp4dev, which provides a mail server as well as a Windows client that lets you via the emails that were sent to it. It doesn't actually forward anything along, it just holds on to the email, but it's perfect for testing.\nAt the simplest, you can send an email like so:\n\nA slightly more realistic example may look like so:\n\nIn this script, I've got some data (hard-coded, but you could imagine it coming from a database) that I take and turn into a string that represents order details. After creating the string I can just pass it to the mail component and that's it.\nThe result is pretty much what you expected:\n\n\n\nAs a quick aside, the smpt4dev client displays To twice for some reason. I filed a bug report on it. I'll also note that the email I created is fairly simple and not terribly pretty. That's all me, not BoxLang. You could absolutely create a well designed email.\nSending attachments is also simple. While I mentioned that the mailparam component can do that, you don't need to use it for simpler cases, like the following:\n\nThe mimeAttach argument is all you need to include a file. For multiple attachments though you would want to switch to mailparam.\nAnd how about a mass mail example? You can just... loop:\n\nWhile three emails isn't a lot, you get the idea. Don't forget BoxLang supports parallel looping and the above could execute even quicker with about 30 seconds of modification:\n\nI didn't show this in the video but if you want to support both plain text and HTML via mailparam, here's a simple example:\n\nI'd expect most of your code here would involve creating the mail bodies while the actual action of the mail is a few lines, which is what you want I think! You can find these demo scripts here: https://github.com/ortus-boxlang/bx-demos/tree/master/boxlang_quick_tips/mail\nAlright, if this looks interesting you, definitely give BoxLang a spin. Our installation directions cover all operating systems and you can get up and running quickly. If you've got questions, head over to our forum or join us on Slack\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Links For You (3/22/25)", "date":"Sat Mar 22 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1742666400, "url":"https://www.raymondcamden.com/2025/03/22/links-for-you-32225", "content":"Happy Saturday folks. I just spent an hour or two playing "Avowed" (great game) and eventually need to get off my butt and start some bread I want to bake today, so I thought I'd put it off a few minutes more with a quick blog post. As always, these links are meant to be informative, helpful, and fun, so I hope they brighten your day.\nDate Formatting in JavaScript (Again)\nDate formatting in JavaScript, or, well, any language, feels like a topic that just keeps coming up. When I saw this link I initially didn't bother clicking, assuming it was about the Intl spec. However, it instead talks about toLocaleDateString and toLocaleTimeString, both of which I'm sure I've seen before, but never really looked into. "Human-readable date formatting with vanilla JavaScript" is a great look at these functions. While the end result seems to be practically/functionally the same as Intl, it's worth knowing more about these functions.\nBuilding a Writing Assistant with Python and Ollama\nNext up is a great video that covers multiple interesting topics. First, it talks about Ollama, which is a great way to test generative AI models directly on your own machine, for free. Second, it demonstrates some Python features I had no idea were possible, specifically listening for key events and access the clipboard on your second. Lastly, the topic itself, helping with writing, is one near and dear to my heart.\n\n \n Play Video\n \n\n\n\n\nAnother SSG - Publican\nPublican, definitely not pelican which I wrote more than once, is a new SSG (static site generator) built in Node. SSGs are a favorite topic of mine so I love to see new options in this space. I haven't yet gotten a chance to kick the tires on this one yet, but it's definitely on my TODO list.\nJust For Fun\nI apologize for this in advance, but while driving with my youngest, this song came up after one he had requested I play on Spotify, and, I love it.\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Geolocating a Folder of Images with Python", "date":"Thu Mar 20 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1742493600, "url":"https://www.raymondcamden.com/2025/03/20/geolocating-a-folder-of-images-with-python", "content":"I'm not sure how useful this will be, but as I recently built it in another language (I plan on blogging that soon as well), I thought I'd take a stab at building it in Python. Given a folder of images, can I use Python to grab the Exif information and then using that, figure out where the photos were taken using a reverse geocoding service? Here's what I built.\nFirst - Get the Images\nOk, the first step is simple, just get a list of images from a directory:\n\nWoot! I'm a Python Master!\nGet the Exif info\nFor the next step, I knew I needed to get the Exif info. For that I used the Pillow library, which has a handy getexif() method:\n\nHowever, this doesn't return what I expected:\n\nFrom what I can tell, the getexif method returns only a subset of exif information, not all the possible tags that may exist. That makes some sense as different hardware/services may write ad hoc exif data.\nI did some Googling and this StackOverflow answer provided an interesting hack. This code will search for the GPSInfo tag and return the numeric value:\n\nYou can then combine this to get the right value:\n\nWhew. This returns a dictionary that looks like so:\n\nThis is the direction and GPS info in degrees and minutes returned in a Python dictionary. To convert the values, I did this:\n\nI then needed to convert the longitude and latitude to decimal. For that... I turned to AI. Yep, I cheated. But guess what, it worked? Gemini spit out this function:\n\nAs I had recently did something just like this, I was able to eyeball it and confirm it made sense. I will say the comment is slightly off as the input isn't the full address, but only one portion.\nReverse Geocoding\nNow that I had a location, I needed to reverse geocode, which is basically, "Given a location, what the heck is there?" Mapbox has an excellent free API for this, so I built a quick wrapper:\n\nAnd called it like so:\n\nThis returns a great deal of information in GeoJSON format which I'm familiar with because of my time at HERE. In my mind, I was imagining printing results for public consumption, so while a heck of a lot of data was returned, I simply wanted a formatted address:\n\nYou can check the Mapbox docs if you want to see more of the results, but that worked just fine for me.\nThe Results\nWhen I ran it, I got exactly what I expected:\n20250108_101553.jpg\nBratislava, Bratislava, Slovakia\n--------------------------------------------------------------------------------\nlaf.jpg\nLafayette, Louisiana, United States\n--------------------------------------------------------------------------------\n20250107_160104.jpg\nGyőr, Győr-Moson-Sopron, Hungary\n--------------------------------------------------------------------------------\n20250111_170109.jpg\nGrein, Upper Austria, Austria\n--------------------------------------------------------------------------------\n20250112_154722.jpg\nSalzburg, Salzburg, Austria\n--------------------------------------------------------------------------------\n20250106_073555.jpg\nBudapest, Hungary\n--------------------------------------------------------------------------------\n\nAnd if you're curious, here is each of those images, in the same order as above. (I edited the laf.jpg one to not have my precise address. Sorry. ;) The complete source code for this script will be at the end.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe Script\n\n", "tags":[ "python" ], "categories":[ "development" ] }, { "title": "Creating Images with Generative AI via Conversation", "date":"Wed Mar 19 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1742407200, "url":"https://www.raymondcamden.com/2025/03/19/creating-images-with-generative-ai-via-conversation", "content":"Last week, I blogged about updates to Google's Gemini APIs in regards to image generation. That post detailed how there are now two models for generating images with the experimental Gemini Flash model having a nice free tier. One of the interesting features of the API is the ability to edit existing images, in other words, pass an image to Gemini and via a prompt, have Gemini update it. I thought it would be kind of fun to see if I could build a 'chat' interface for this model, one where you could simply talk to Gemini and have it work on your image along with you.\nNow to be clear, this is no different than what you can do now at the Gemini website, but I figured it would give me yet another chance to play with Flask. Here's what I built.\nImage Chat\nImage Chat is a Flask web application with a simple interface. It begins by asking you what you want to create:\n\n\n\nThis prompt is sent to the Flask app server, passed to code that talks to Gemini, and the response is rendered.\n\n\n\nI can then ask for changes, for example, adding a moon:\n\n\n\nYou get the idea, I can keep asking for tweaks and modifications and see where Gemini takes it. That's the user experience of the application, now for the code.\nThe Front End\nThe front end of the application is a grand total of one HTML file:\n\nYou can see the intro, an empty div where I'll log activity, the form field for user input. As the comment at the bottom says, I loaded the Marked library for processing Markdown, but I didn't end up needing it. I'll explain why I thought I might need it in a minute.\nNow for the JavaScript:\n\nThe code starts off by setting up some DOM pointers and an event listener for my button. When the button is clicked I send the input, and possibly the current image, to the server. I say possibly because on the first use of the application, there isn't an existing image. So yes, I'm basically passing the image back and forth, and that kinda bugs me a little bit. In theory, I could keep the image on the server, but I'd need to handle multiple users, cleanup, and so forth. I know Flask supports sessions so that would be an option, but for this little demo I was fine passing it back and forth. The comment about 'text' response goes back to what I said about the Markdown library.\nAs I mentioned in my last post, Gemini's image generation must be tied to a request for text and images, so your code has to handle both. However, in my testing, I didn't always see text returned. My server-side code is returning any text, but I never saw Gemini actually return any, so for now, the front end doesn't really support it.\nThe Back End\nSo the server is yet another simple Flask server. I'll start with the main application:\n\nBasically two routes, the index that loads the homepage and the endpoint that my JavaScript calls, /chat. I grab the values out of the JSON body sent and pass it off to a Gemini class:\n\nFor the most part, this is just what I had in the last post, outside of the fact that I changed the file upload code to support base64 strings versus files on the local filesystem. That was new to me. For the response, I simply gather up what Gemini gave me, which will also be a base64 image, and return it.\nWrap Up\nThat's it. I still don't have a good place to host my Python apps, but if you want the complete source code, you can find it here: https://github.com/cfjedimaster/ai-testingzone/tree/main/image_chat\n", "tags":[ "generative ai", "python" ], "categories":[ "development" ] }, { "title": "BoxLang Quick Tips - PDF Generation", "date":"Tue Mar 18 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1742320800, "url":"https://www.raymondcamden.com/2025/03/18/boxlang-quick-tips-pdf-generation", "content":"Today's BoxLang quick tip is one near and dear to my heart, generating PDFs. Creating dynamic, expressive PDFs is fairly easy. Let me show you how. As before, I've got a video version as well so you would rather watch that, just skip to the end.\nStep One - The Module\nBy default, BoxLang doesn't ship with PDF capabilities built-in, you need to add it via the PDF Module. This can be done quickly via the CLI:\ninstall-bx-module bx-pdf\n\nInstalling the module adds three new tags to your BoxLang runtime:\n\nbx:document - This is the core tag for PDF generation. Everything inside it will either be content or directives (see the items below) to control what's produced.\nbx:documentitem - This is used to specify page breaks or header and footer content.\nbx:documetnsection - This lets you create logical sections to a larger PDF document, allowing for section specific page numbers, headers and footers, and so forth.\n\nCheck the docs for full syntax information.\nStep Two - Make a PDF\nHow about the simplest demo possible?\n\nIn this example, the template will use the content within, static HTML, and save it to test1.pdf. Note the use of overwrite=true. Without it, you would get an error if you run the code again. You can actually skip saving the data to the filesystem and instead store the binary data by using the variable attribute instead.\nAnd the result:\n\nWe can make it a bit more interesting by adding some media. Consider this:\n\nNote that I'm using a local image, cat.jpg, and in order for the BoxLang PDF tool to find it, I added localUrl to the tag. This generates pretty much what you would expect - a PDF with a cat picture. (Which improves every PDF I've found.)\n\nOk, so far, these have been static, simple PDFs. How about a more complex example? Consider this script:\n\nI begin with a bit of data, hard-coded, but obviously could have come from a database or API call. It's got an array of people including names, titles, salaries, and locations. For each of the people, I want to create a unique, dynamic PDF. To do so, I use the built-in slugify function on the name.\nInside the PDF, you can see the use of pound-wrapped variables for my dynamic content. I then use documentitem to create a page break for the second bit of content, legal information no one will read.\nFinally, I use documentitem again to create a dynamic timestamp value in the footer. And here's one of the results:\n\nYou can find these demos, and the PDF results, in the BoxLang demos repo here: https://github.com/ortus-boxlang/bx-demos/tree/master/boxlang_quick_tips/pdf\nEnjoy the video version below:\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Watch me suffer with React more in tomorrow's Code Break!", "date":"Mon Mar 17 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1742234400, "url":"https://www.raymondcamden.com/2025/03/17/watch-me-suffer-with-react-more-in-tomorrows-code-break", "content":"So my last Code Break was... painful. My experience trying to learn React did not go well. Because of that I thought strongly about giving up, but what fun would that be? Join me tomorrow (March 18th) at 12PM CST where I'll, once again, try to learn some basic React features and get a trivial web site built. Will I make it? Probably not! But you can come join me and cheer/heckle me on! I hope to see you there:\nhttps://cfe.dev/talkshows/codebreak-03182025/\n", "tags":[ "javascript" ], "categories":[ "development" ] }, { "title": "Generative Images with Gemini (New Updates)", "date":"Fri Mar 14 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1741975200, "url":"https://www.raymondcamden.com/2025/03/14/generative-images-with-gemini-new-updates", "content":"Back in January of this year, I wrote up my experience testing out Google's Imagen 3 APIs to generate dynamic images. A few days ago, Google updated their support with new experimental support in Flash. I've been playing with this the last few days and have some code and samples to share with you, but before that, what exactly changed?\nGemini and Imagen 3\nThere are now two different models, and different APIs, to generate images with Google's AI platform. The new one is Gemini 2.0 Flash Experimental and the previous one (the one covered in my blog post) is Imagen 3.\nOf course the next question is, why two, and what do you pick? The docs do a great job of explaining the differences, and I'll share that here:\n\nIf context is important, than Gemini 2.0 is the right choice. Gemini 2.0 is best for producing contextually relevant images, blending multimodal outputs (text + images), incorporating world knowledge, and reasoning about images. You can use it to create accurate, contextually relevant visuals embedded in long text sequences. You can also edit images conversationally, using natural language, while maintaining context throughout the conversation.\n\nIf image quality is your top priority, then Imagen 3 is a better choice. Imagen 3 excels at photorealism, artistic detail, and specific artistic styles like impressionism or anime. Imagen 3 is also a good choice for specialized image editing tasks like updating product backgrounds, upscaling images, and infusing branding and style into visuals. You can use Imagen 3 to create logos or other branded product designs.\n\nI'll also add that the Gemini modal has a free tier and Imagen does not. The price tag though is fairly small, 3 cents a pop. Not in this post, but next week I may follow up with a comparison and actually shell out a few cents to do so. (I kinda feel like I should get some credit though for GCP as I'm basically advocating for the API for free. ;)\nAnother important thing is that the Gemini API will always output text and images. Now, you can just ignore the text. You'll see me do that in demos and you'll want to keep that in mind when building your own examples. Speaking of...\nText to Image\nThe simplest demo is just taking a text prompt and outputting an image. With a hard coded prompt, it's as simple as:\n\nAnd here's the output. Note that for most of the results I'll show in this post, I've changed the size post-production. Gemini's image API model does not let you specify a size or aspect ratio. You can ask it to, for example, "generate a landscape photo of..." and it generally respects that, but keep in mind you may need to add it to your prompt yourself.\n\n\n\nI'd call that pretty decent. And as always, I kinda skimped on the prompt there. The more detail you provide, the better results you'll get. Changing the prompt to:\nA black long haired cat wearing a grey fedora. She is looking towards the camera.\n\nGives:\n\n\n\nYou can make this generic by just checking for the prompt from the CLI:\n\nYou can find this source here: https://github.com/cfjedimaster/ai-testingzone/blob/main/imagen/gemini_text_to_image.py\nText to Image and Text\nAs described above, the Gemini model is going to include text along with image results, and that can be pretty powerful. One example prompt is recipe based, "Generate an illustrated recipe for a paella." I decided to build a demo around this by letting you pass the type of recipe via the command line and then generating a Markdown file that included the recipe and images. Here's that demo:\n\nI didn't put a lot of effort into the generated Markdown. I could have even converted it to HTML at the end. But it basically takes the output and appends text as is, and images as an image with Markdown code.\nThe results from this was... hit or miss. The Google example of paella seemed to work well. But I tried multiple different cookie recipes and it failed really badly. I'm not sure why. In my most recent test it was able to generate ingredients, but disregarded the request for actual cooking instructions. I then tried chicken and sausage gumbo, and it was... ok. You can see it below (and here's a direct link).\n\nSome of the formatting appears a bit off, and the roux doesn't look quite thick enough, but I'd probably still eat it.\nAs a followup (next week though) I'm going to take another stab at this using a JSON schema to see if I can better shape the results.\nYou can find this demo here: https://github.com/cfjedimaster/ai-testingzone/blob/main/imagen/recipe_tester.py\nEditing Images\nAnother interesting aspect of the API is the ability to give it a source image and ask for an edit. As an example, I gave it this source:\n\n\n\nAnd asked Gemini to replace the glasses with something more serious.\n\n\n\nThe glasses are slightly big for me, but honestly I think it did a great job. The code for this simply involves adding a file upload and passing it to the model:\n\nStylish Images\nOne of the features of Adobe Firefly (and, helpful reminde", "tags":[ "generative ai", "python" ], "categories":[ "development" ] }, { "title": "Building a Jira Search Tool in BoxLang", "date":"Thu Mar 13 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1741888800, "url":"https://www.raymondcamden.com/2025/03/13/building-a-jira-search-tool-in-boxlang", "content":"Developers seem to have a love/hate (or perhaps hate/despise) relationship with Jira. I've never minded it, but the biggest issue for me is that if I haven't used it in a while, it can be overwhelming. Yesterday I was thinking about this and wondering if perhaps I could build my own tooling to interact with Jira via an API, if it even had one. Turns out, of course they have an API and it's not terribly difficult to use. With that in mind, I whipped up a quick tool to search Jira via the command line with BoxLang.\nJira API Basics\nThe docs for Jira's API are pretty good and cover the huge set of operations you can perform with it.\nYour root API url will be based on your Jira installation. I wanted to search against the BoxLang Jira instance so that was https://ortussolutions.atlassian.net/. After this you append rest/api/VERSION/OPERATION where VERSION can be set to a specific version or just latest.\nThere's a few ways to do authentication, including oAuth, but basic username/password validation works as well.\nThe Search API\nFor my little script, I wanted a quick way to see open or being worked on issues that matched a term. For this I used JQL, which is the Jira Query Language, along with a bunch of Googling to figure out the right syntax. Given a search term of, let's say cats, a JQL statement may look like this:\nproject=BL and status in ("In Progress", "Open", "To do") and summary ~ "cat"\n\nThe status set of values there was something I found online and could possibly be improved, but it seemed to work well in my testing. Also, I suppose I could search against the body of the issue as well, but I thought a summary match (which is the title kinda) made the most sense.\nGiven this JQL, you could do a quick call like so:\n\nThis is making use of the "Search for issues using JQL enhanced search (GET)" endpoint. Previously I had used this one and I realized today it was deprecated. The API takes a variety of arguments, but the only real important one here is fields. By default the search will only return IDs, so if you want more, you have to ask for it. In my case, I figure the summary and status were enough.\nHere's a sample result set:\n{\n issues : [\n {\n expand : "renderedFields,names,schema,operations,editmeta,changelog,versionedRepresentations",\n id : "138098",\n self : "https://ortussolutions.atlassian.net/rest/api/latest/issue/138098",\n key : "BL-1197",\n fields : {\n summary : "Threading Improvements: isThreadAlive(), isThreadInterrupted(), threadInterrupt() bifs",\n status : {\n self : "https://ortussolutions.atlassian.net/rest/api/2/status/1",\n description : "The issue is open and ready for the assignee to start work on it.",\n iconUrl : "https://ortussolutions.atlassian.net/images/icons/statuses/open.png",\n name : "Open",\n id : "1",\n statusCategory : {\n self : "https://ortussolutions.atlassian.net/rest/api/2/statuscategory/2",\n id : 2,\n key : "new",\n colorName : "blue-gray",\n name : "To Do"\n }\n }\n }\n },\n {\n expand : "renderedFields,names,schema,operations,editmeta,changelog,versionedRepresentations",\n id : "138097",\n self : "https://ortussolutions.atlassian.net/rest/api/latest/issue/138097",\n key : "BL-1196",\n fields : {\n summary : "Added isVirtual, isDaemon, threadGroup, id to the thread metadata",\n status : {\n self : "https://ortussolutions.atlassian.net/rest/api/2/status/1",\n description : "The issue is open and ready for the assignee to start work on it.",\n iconUrl : "https://ortussolutions.atlassian.net/images/icons/statuses/open.png",\n name : "Open",\n id : "1",\n statusCategory : {\n self : "https://ortussolutions.atlassian.net/rest/api/2/statuscategory/2",\n id : 2,\n key : "new",\n colorName : "blue-gray",\n name : "To Do"\n }\n }\n }\n },\n {\n expand : "renderedFields,names,schema,operations,editmeta,changelog,versionedRepresentations",\n id : "132011",\n self : "https://ortussolutions.atlassian.net/rest/api/latest/issue/132011",\n key : "BL-267",\n fields : {\n summary : "New VirtualThread component as a subclass of Thread in BoxLang",\n status : {\n self : "https://ortussolutions.atlassian.net/rest/api/2/status/1",\n description : "The issue is open and ready for the assignee to start work on it.",\n iconUrl : "", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "BoxLang Quick Tips - Database Access", "date":"Tue Mar 11 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1741716000, "url":"https://www.raymondcamden.com/2025/03/11/boxlang-quick-tips-database-access", "content":"Today I'm kicking off a new blog/video series of quick tips for people interested in BoxLang. These 'quick tips' are just that, a look at how BoxLang can simplify working with the JVM and building CLI scripts, web apps, and serverless applications. Each of these posts will include a video along with sample code and help highlight some of the ways BoxLang can be powerful in just a few lines of code.\nFor my first quick tip, let's talk database access, which by the way was one of the reasons I got into ColdFusion nearly thirty years ago (I didn't want to figure out how to do it in Perl!). Working with databases in BoxLang can be done in a few steps.\nStep One - The Driver\nTo work with a database, you need a driver, and that can be done via BoxLang modules, which are easily installed at the command line. There's a lot of modules, but for MySQL, you can simply do:\n\nThis is a one time operation and takes a few seconds.\nStep Two - Define Your Connection\nIn order to work with a database, your code needs to know how to connect to a database. That includes things like a server URL, username, and password, and sometimes additional configuration information. Depending on what your doing with BoxLang, you've got a few options on how to do that. For web apps, you can define 'datasources' at the application level so all your scripts and services can execute queries. For a command line script, or a quick ad hoc connection, you can also define the connection inline. Let's consider that. First, I'll define my connection:\n\nThis should all be self-explanatory, but I'll note I'm grabbing my credentials from the environment.\nNext, I'll do a simple query and pass this along inline. Again, in a web app, this could be done at a higher level and not needed again.\n\nIn the code above, queryExecute runs SQL and uses the datasource information for it's connection. The second empty argument there is used for bound params which are simple SQL doesn't need.\nStep Three - Outputting the Data\nThe last step is how to output the information, and obviously that depends on your particular needs, but in the theme of keeping it simple, you can treat the result as an iterable and simply loop over it:\n\nThere are multiple other ways to output the data as well, for example, as JSON when called as an API.\nThat's it! Database access and output in your code in minutes. Enjoy the video version below:\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Automating and Responding to Sentiment Analysis with Diffbot's Knowledge Graph", "date":"Mon Mar 10 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1741629600, "url":"https://www.raymondcamden.com/2025/03/10/automating-and-responding-to-sentiment-analysis-with-diffbots-knowledge-graph", "content":"Diffbot's Knowledge Graph has a simple purpose - bring the sum total of all knowledge to your fingertips via a search that emphasis data and relations over a simple text based search engine experience. Sourced by the entire web, Knowledge Graph lets you perform complex queries against billions of data points instantly via a simple API. I decided to take a spin with their API and build a "relatively" simple tool - news analysis for a product run in on automated platform. Should be easy, right? Let's get to it. Note that the examples in this blog post assume you've gotten a free key from Diffbot. Be sure to do that before trying the samples.\nDesigning the Query\nBefore writing a line of code, I signed into Diffbot and opened up their visual search tool for Knowledge Graph. The tool lets you build queries visually or by hand. Queries are known as 'DQL' statements in Diffbot and are pretty simple to read even if you've never seen the syntax before.\n\n\n\nFrom this tool, I started off by selecting an entity type. This is the high level type of data I want to search and can be one of many numerous options, from people to events to movies and investments. I selected "Article" as my intent is to find news that's speaking ill of my wonderful product. I then selected a "Filter By" option. While you can filter by any property in the entity type, I used tags.label as it's a more precise match than a simple text search. While a text filter does work, using tags.label gives a much better result by ensuring that the results are focused on my search, not just casually mentioning it. For my demo, I'll be looking for articles about "XBox".\nI also used the "Sort by" value to show newest first and this hit search to see if my results made sense.\n\n\n\nWhile my initial results didn't include any foreign language results, I knew I'd want to filter to results in English, so I next added a filter for language. Hitting the + sign by the current filter, I was then able to add language and en for English. Once again, I hit search:\n\n\n\nAlright, so next, I want to filter to just negative results. Knowledge Graph Article entities have a sentiment score (you can see them in the search results) that go from -1 to most negative to 1 to most positive. Initially, I simply selected items with a sentiment less than or equal to 0.\n\n\n\nWoot, getting there. As a final step, I knew this was going to be automated and filtered to 'recent' items, so I added one more filter, this time on date, selected after, and picked a date from a week ago.\n\n\n\nAt this point, the query looks good, so let's copy out the query value provided by the tool:\ntype:Article tags.label:"Xbox" language:"en" sentiment<=0 date>"2025-03-03" sortBy:date\n\nWrite the Code\nDesigning the query was really the hard part. For the code, I went to the Search docs. The examples are curl/HTTP based but quite easy to port to Python or any other language. Consider this sample:\n\nBreaking this down - I began with my query from the visual tool. This then gets url encoded and passed to the API for Knowledge Graph. The only real new item there is the addition of size=25 to keep the result set to a sensible limit.\nI call the API, print the total results found (from the hits result) and then iterate over each showing various bit of info from the result. Here's a few of the results:\nTotal results, 68\nXbox will release its first handheld gaming console this year, report claims\nd2025-03-10T19:37\nWindows Central expects the console to take advantage of the widgets on the Xbox Game Bar to let use...\nJacob Siegal\nBGR\nhttps://bgr.com/entertainment/xbox-will-release-its-first-handheld-gaming-console-this-year-report-claims/\n0\n------------------------------------\nRumour: Next-Gen Xbox a 'PC in Essence' - What Would That Mean for PlayStation?\nd2025-03-10T19:00\nRecent comments from Windows Central's executive editor Jez Corden have sparked discussion about whe...\nStephen Tailby\nPush Square\nhttps://www.pushsquare.com/news/2025/03/rumour-next-gen-xbox-a-pc-in-essence-what-would-that-mean-for-playstation\n0\n------------------------------------\nXbox handheld out this year and will go up against Nintendo Switch 2 says source\nd2025-03-10T18:50\nNew rumours about Microsoft’s next gen plans suggests that there will be two Xbox handheld consoles ...\nGameCentral\nMetro\nhttp://metro.co.uk/2025/03/10/xbox-handheld-this-year-will-go-nintendo-switch-2-says-source-22703266/\n0\n\nThis works, but now let's make the date dynamic. I began importing from datetime:\n\nI then generated a formatted date for last week:\n\nAnd the last bit was to just include that date in my query:\n\nYou can see the complete source code for the initial version here and the final version here.\nBuilding the Automation\nAlright, time to automate this. For my automation, I'll be making use of Pipedream, an incredibly flexible workflow system I've used many times in the past. Here's the entire", "tags":[ "python", "pipedream" ], "categories":[ "development" ] }, { "title": "Links For You (3/8/25)", "date":"Sat Mar 08 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1741456800, "url":"https://www.raymondcamden.com/2025/03/08/links-for-you", "content":"Happy afternoon, programs. I just got back one of my kid's soccer games (unlike last season, the weather is pleasant and not scorching hot) and I've got a Saturday now that is 100% open! Which means I'll get a lot done! (Or, more likely, play video games.) So that I can more quickly get to all the important chores and cleaning I'm not going to do, let's get to the links.\nCode Listings via API\nFirst up is a two-fer kinda. Showcode is an excellent web app to create screenshots from code. It supports numerous languages, numerous display options, and so forth, and creates really good output. As an example:\n\n\n\nWhile it's a great webapp, they also have a cool API that lets you automate the process. Here's an example taken from their docs:\n\nThis produces:\n\n\n\nThanks go to my buddy Todd Sharp for finding and sharing this with me.\nVoice Coding\nNext up is a post by one of the coolest folks in tech now, Salma Alam-Naylor, discussing how she's learning to code with her voice. After developing pain in her hands, she realized she'd need to adjust her work style in order to keep developing. Her post goes into detail about how she's addressing that and the tools she's trying. She's also got a YouTube video on the topic:\n\n \n Play Video\n \n\n\n\n\nGemini as a Code Assistant\nNext isn't really an article per se, more a product announcement. As my readers know, my primary GenAI focus has been with Google Gemini. Recently, they created multiple new tools to help with code writing and review. That includes a GitHub action, Firebase support, and most importantly, a Visual Studio Code extension. You can read about all three or just right to the docs for the VSC extension. There is a free tier and I've been using it for over a week now. I'm not quite sure yet if it's better than the free GitHub version from Microsoft. Since switching, it feels like this one hasn't been quite as helpful, or in my face, as the Microsoft one, but it's also possible I just have noticed as much. Mostly, I think I need to kick the tires a bit more and make myself pay attention when it offers help. That being said, it's free and no risk, so it's worth a shot. Over the past few months I've absolutely changed my mind about the usefulness of these types of tools and I expect to keep using them until, well heck, until I retire probably.\nJust For Fun\nAnd lastly, I recently discovered Youtuber matt one who has done some incredible mashups. Here's my current favorite mashing up two of my favorite bands/songs.\n\n \n Play Video\n \n\n\n\n\nI will say he uses some... questionable AI video at times but the music is spot on.\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Parsing Uploaded Resumes into Form Fields with Google Gemini", "date":"Tue Mar 04 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1741111200, "url":"https://www.raymondcamden.com/2025/03/04/parsing-uploaded-resumes-into-form-fields-with-google-gemini", "content":"As I've recently become somewhat familiar with job application sites (sigh, thanks Adobe), I've noticed an interesting feature some sites use. After selecting your resume to upload, they will parse the resume and either offer to, or automatically, fill in some of the form fields of the application for you. I thought it would be interesting to try this myself making use of Google's Gemini APIs. Here's what I discovered.\nThe Test Script\nAs always, I began with a script that would take a hard-coded resume and attempt to parse it. For the most part, this is basic "upload a file and ask the AI to talk about", but in my case, I wanted a very particular set of data back, specifically a JSON object that would attempt to match the following:\n\nThe first and last name from the resume.\nThe email address, phone number, and website from the resume.\nTheir location, but nothing fancy like city and state, just 'location'.\nThe 'introduction' to the resume, or top level paragraph.\nA list of skills\nAnd finally, a list of previous jobs including the company name, time worked, and a string encompassing a description and list of responsibilities\n\nGoogle Gemini supports JSON schemas to let you precisely document how you want your resume. In my previous experiments, I've used the 'formal' JSON Schema support via the Node SDK, but for Python, their docs made use of pydantic and classes, and while I've never used this feature of Python before, it wasn't difficult at all. Here's what I came up with to encompass what I wanted parsed out of the resume:\n\nI liked being able to use JSON Schema in previous demos, but this is way easier to read in my opinion and I think I'll use it whenever I'm doing anything like this in Python. Given that schema, here's how I use it with a basic file upload and prompt:\n\nRunning this on my resume I get:\n\nFor the most part, that's near perfect. The skills area has a few misfires... I mean, I guess 'editing' is a skill, I know I value my editors, and I probably called it out so I guess that's not a misfire, but usage certainly isn't valid. Also, 'generative Al' should be 'generative AI', but again, in the context of prefilling a form for you, there wouldn't be much at all to correct manually.\nYou can find the complete script here: https://github.com/cfjedimaster/ai-testingzone/blob/main/resume_to_data/test1.py\nThe Web App\nFor my web application, I borrowed heavily on the resume review app I built early in February. For review, this was a Python Flask web app that let you upload a resume. It then called a server-side Python script to ask Gemini for a review and returned a new version of the resume.\nFor this application, I had a simple web page prompting for the resume (as a PDF), and an empty form beneath it waiting to be filled:\n\n\n\nI'll link to the entire code base as the end, but basically, the application takes the PDF you select and does a POST with the data to the server side code. For example, in Flask, here's how I define that route:\n\nNote that like my last demo, this uses a static filename for the upload when it should either pass the binary data directly to my class, or use a UUID provided name instead, and of course, clean up the file when done.\nThe real work is done in a Gemini class I built that basically takes my test script and, well, turns it into a re-usable class:\n\nI love how simple that is, but of course, I skimped on error checking (no error checking still counts as skimping) which helped keep down the lines of code.\nOn the front end, my code basically sends the PDF, takes the response, and fills out the form with a bit of manipulation on the more complex fields. Here's the relevant part of that code:\n\nAnd here's how it looked using my resume:\n\n\n\nI then tried a resume from Scott McAllister which parsed as such:\n\n\n\nYou can find the complete source for this demo here: https://github.com/cfjedimaster/ai-testingzone/tree/main/resume_to_data\nAll in all, I'm pretty impressed by the results. I've got an idea for a good followup I'll hopefully get to this week.\n", "tags":[ "generative ai", "javascript" ], "categories":[ "development" ] }, { "title": "Code Break this Thursday - Ray Finally Learns React", "date":"Mon Mar 03 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1741024800, "url":"https://www.raymondcamden.com/2025/03/03/codebreak-this-thursday-ray-finally-learns-react", "content":"Ok, so if you attended my last Code Break session you know I was hinting that I was really excited for my next one. For years now I've wanted to give React a fair shake and actually try to build something with it. Finally I'm making time to do so. This Thursday at 12PM CST, my next session will be:\nI Don't like React. Let's Learn React!\nTo be clear, it isn't that I dislike React, it's just that every time I've looked at the code, it just didn't gel with me. I know it's incredibly popular, but I always felt like if I needed to build a proper "web app", I'd just use Vue (despite my feelings about Vue 3, feel free to ask me in the session). That being said, I'm really excited about this session. I'm going to go through the docs and attempt to build one or two apps (probably over a session or two) and really see what it feels like to work in the platform.\nI hope to see you there! Also, one of the things I tried to do this year was get more consistent with my scheduling. For some dumb reason, I scheduled one for this Tuesday which is Mardi Gras, and while we will probably get rained out, there's a chance I could be downtown with the kids catching beads and watching marching bands, so hopefully the weather holds up.\n", "tags":[ "javascript" ], "categories":[ "development" ] }, { "title": "Using AI in the Browser for Typo Rewriting", "date":"Thu Feb 27 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1740679200, "url":"https://www.raymondcamden.com/2025/02/27/using-ai-in-the-browser-for-typo-rewriting", "content":"\nUpdate on April 3, 2025: As expected, Google has continued to evolve and update these APIs, for the better of course, but that means the code I write about here is 100% broken. That's life, eh? I'm not going to edit the text here as if I tried to keep every post up to date it would be a never-ending job. That being said, I plan on blogging on these APIs more and I corrected the CodePen shown at the end with a new version that works correctly. You can see it here: https://codepen.io/cfjedimaster/pen/ZYEwoJx\n\nLast week I gave a presentation on Chrome's new built-in AI support (I'll link the video at the end) and it's gotten me inspired to consider new and different ways these APIs can be used to enhance the user experience. These APIs still aren't quite ready for production use, and it's absolutely possible we may never see these in Safari or Firefox, but the possibility of using them to enhance an application where available is exciting. For today, I want to share an interesting use case that occurred to me a few weeks ago.\nOne of the APIs being built is a translation API (along with a language detection) API as well. In general the idea here is to go from one language to another. But what if you don't want to translate, but rather, "repair", some input text.\nI've got a best friend who I won't name (although his name rhymes with Mott Moze) and he tends to typo quite a bit. In fact, sometimes myself and another friend will tease him about it, especially when he typos so bad we can't even figure out what he meant. That then brings up the question - how well could these generative AI models help with fixing input that's got typos and returning something more sensible. I did some playing and found some interesting results.\nAttempt One - The Prompt API\nIn my opinion, the Chrome team is really pushing specific GenAI APIs over more generic uses. That's why the docs focus on those specific APIs - translation, language detection, and summarization for example. There is a "general purpose" prompt API but honestly, I imagine that will be used a lot less than the more specific ones. That being said, I thought I'd use that for my first stab at this problem.\nFor my demo, I whipped up a quick Alpine.js form that lets you enter your typo-ridden text and then hit a button to try to fix it. These complete source code will be available below so I'll focus on the GenAI aspects, not the Alpine.js DOM stuff.\nI begin with a bit of code just to see if the API is available:\n\nThis code only supports the API being 100% ready and will not support the use case of, "I support AI, but I need a few minutes to download the model." To be clear, Chrome's APIs support that and you should do that, but I wanted to keep things simple for now.\nNow comes the important part, creating a session for my application with a system instruction detailing what I want it to do:\n\nActually using this is almost anticlimatic in terms of how simple it is, given your input, you use the prompt method to get the result:\n\nIn case you don't recognize it, marked is a JavaScript Markdown library and as most results include Markdown, I use this to convert it to HTML. I don't think it actually does much here, but I had it from a previous demo and kept it.\nSo, the demo will be right below, but as this feature is still in early testing and not available without flipping some flags, let me share some before and after examples:\nInput: "My name is Scott Stroz. I work asd a developer advocat for Oracle. My focis is on MySQL and the Giants who are the bestfootball team in the NLF>"\nOutput: "My name is Scott Stroz, and I work as a developer advocate for Oracle. My focus is on MySQL and the Giants who are the best NFL football team."\nThat's damn good to be honest, ignoring the obvious typo of "Saints" where "Giants" was used. I would argue though that by changing the period to a comma, it's doing a bit more than typo correction. Here's another example:\nInput: "This is Raymonid Camden. I work in Louisian as a developer evangelist and advocoa fovused on generative AI, APIs, and listening to Deepche Mode."\nOutput: "This is Raymond Camden. I work in Louisiana as a developer evangelist and advocate focused on generative AI, APIs, and listening to Deepche Mode."\nAs you can see, it failed to fix Depeche Mode, but it did clean it up quite well. You can see the full code, and live demo below:\n\n See the Pen \n Chrome AI - Fix Typos V1 by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nAttempt Two - The Rewriter API\nFor my next attempt, I made use of the Rewriter API. This isn't called out in the navigation on the Chrome AI docs, but does live under the Summarization API "family" I suppose. You can find it documented under the GitHub Explainer.\nThe API for the Rewriter API is a bit different than the others, and I imagine it may change soon. For example, to check if it's available, you do", "tags":[ "generative ai", "javascript" ], "categories":[ "development" ] }, { "title": "Using Java Libraries in BoxLang", "date":"Wed Feb 26 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1740592800, "url":"https://www.raymondcamden.com/2025/02/26/using-java-libraries-in-boxlang", "content":"One of the aspects that makes BoxLang compelling is that it runs on top of the Java Virtual Machine which means you get access to any Java library out there. This is something ColdFusion has as well and in the past, I've integrated Java libraries into my web apps to make use of open source from the Java community. Best of all, you don't really need any Java knowledge to do this. Typically libraries will provide good docs and and examples and the mental model of translating a Java example to BoxLang's language is fairly simple. A few days ago, I blogged an example of parallel processing in BoxLang and in one of the samples, I did a tiny bit of RSS feed processing. I mentioned at the time that I wasn't doing "real" RSS parsing, just quickly grabbing XML items from the feed. I decided to see if I could find a Java library for "real" parsing and see how difficult it would be to use in BoxLang. Here's what I found.\nThe Java Library\nI googled for Java RSS library and came across rssreader. This library can parse a URL or a file (but oddly not a string for some reason). Unlike other RSS parsing libraries I've seen in the past, it has built in support for parsing multiple feeds at once, and 'mixing them' together in the result, which is dang nice.\nThe only issue I ran into here was that the repo didn't have a pre-built jar. I cloned the repo, ran a gradle build, and discovered something had gone haywire locally in terms of my gradle support. That's all just Unbuntu/WSL issues I'm sure won't bite me again and if you want more details, ask me in the comments. While this step took me maybe an hour or so because of that, I expect usually folks will have this done in a minute or two.\nUsing Jars in BoxLang\nThe BoxLang docs have a whole section on Java interop and part of it covers how to load custom Jar files. The first option is to drop it into BoxLang's lib path. The second option would be to specify jars or folders of jars in an Application.bx file. For a web application, this is absolutely the path I'd use. (Technically this is usable in CLI scripts as well, but I didn't want to go that route.) The last option was to use the createObject function and specify the path itself.\nCode-wise, this is one of two ways to get access to a Java library from a jar. The other, the new java syntax, is one I'd rather use as it "feels" more proper, but it doesn't support passing the path to the jar.\nSo given all that, and that I've got my jar built, I could instantiate the library like so:\n\nAs a simple example, this parses my own RSS feed and gets the items.\n\nThe result of the read operation is a Java Stream so the toList() method essentially just collects all the results into an array. Now for the next fun part.\nYou can easily loop over each item returned, and items have methods to get things like the title, link, and content, but these returned Java Optional. I don't really know Java and haven't kept up to date on all the recent changes, but Optionals are a feature that make it easier to deal with values that may not exist. I'll be honest... I'm not entirely sold on the concept, but it's definitely a core feature of Java, and BoxLang actually extends it with their Attempts feature. It's a bit different, but once I used it a few times it wasn't necessarily difficult. I just had to a) recognize that the library was making use of it and then ensure my code used it as well.\nThis means you can't just do, title = item.getTitle() for example, but this instead:\n\nAgain... this isn't bad, and I get some of the reasoning behind the idea, but it's definitely a bit different. That being said, here's a complete script to print out each items title, link, and date:\n\nPutting it Together\nOk, so how about I take my little demo from earlier this week - parsing N RSS feeds - and make use of the library to get 'real' results. I began with a function that takes an array of URLS:\n\nI do a bit of normalization in that I create a simpler structure, result, with just the bits I care about, and then feed them in with values from the RSS item. I also create a proper date/time object, and finally, since I'm working with N different RSS items, I need a way to 'associate' one item with it's parent. (I've got a small concern about this I'll share in my p.s. at the bottom.) I get this from the top level channel object in each item. Oddly, this doesn't use Observables. Also, this means a bit of repetition in my data, but as my result is one array with items from different feeds mixed together, this handles letting me display the blog where the item came from.\nHere's the entire logic to make use of this new utility:\n\nThis returns a large amount of data in an incredibly quick amount of time. I don't know if the library is running each call in threads, I assume it is, but the performance is great and the data result much better than my initial simple demo.\nAll in all, fairly simple. Biggest issue I ran into was compiling that darn jar, but", "tags":[ "boxlang" ], "categories":[ "development", "serverless" ] }, { "title": "Using Parallel Looping in BoxLang", "date":"Mon Feb 24 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1740420000, "url":"https://www.raymondcamden.com/2025/02/24/using-parallel-looping-in-boxlang", "content":"Last week I wrote about converting a Python file search script to BoxLang. In that post (and the original Python version) I mentioned how the utility wasn't terribly efficient as it needed to recreate an index every time it ran. Despite this, the performance was pretty good, taking about two seconds or so to generate the file index from near seven thousand Markdown files. Right after I shared that post, Luis Majano shared an interesting performance tweak I had missed.\nIn BoxLang (and to be fair, this is a feature both Lucee and ColdFusion have as well), when you loop over arrays, structures, and queries, you can enable parallel execution by simply adding an additional argument to the loop. You also have control over the number of threads used as well.\nLet's consider a simple very unrealistic example of this:\n\nI create an array of six strings and then loop over each element. For each, I print an indicator to the string so I know something's actually happening, and then I pause execution with the sleep command for 10 seconds. I'm using getTickCount() before and after for basic timing tests. As you can imagine, this takes 60 seconds. (Slightly above of course.)\nEnabling parallel execution is as easy as this:\n\nLike, literally, that's it. Now, to be clear, this is absolutely not something you can use in all situations. Heck, maybe not even half the time. It depends. But let's consider my search script. This is the block that iterated over the files:\n\nAnd here's the modified version:\n\nI'm able to use this feature because it doesn't matter what order items are added to my index. In my testing, it was taking around 3.5 seconds to make the index. As I said then, that seemed fair. With this change, it now takes less than a second, about 750-850ms on average.\nHow about another example? Imagine I've got a set of URLs, RSS feeds, that I want to parse and aggregate? I built a simple RSS parser that does, well nothing. A real RSS parser would do it's best to standardize the results to make it easier to work with entries. My code just handles RSS vs Atom and doesn't get any fancier than that:\n\nHere's my first take at creating the aggregation:\n\nThese 11 feeds comprise over 600 entries as some of the RSS feeds don't return the latest content, but instead all of the content. On average, this execution took between 4 to 7 seconds. Now, the parallel version:\n\nNote that this works because order isn't important - I'm just sticking results in the structure keyed by URL. The timing on this version is between .7 and 1.7 seconds.\nYou can read more about this in the docs (that link is specifically for arrays, but as I said, this feature can be used in structures and queries) as well as read more about threading in BoxLang specifically. I put the initial demo and HTTP demo up in the bx-demos GitHub repo here: https://github.com/ortus-boxlang/bx-demos/tree/master/syntax-samples\n", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Links For You (2/22/25)", "date":"Sat Feb 22 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1740247200, "url":"https://www.raymondcamden.com/2025/02/22/links-for-you-22225", "content":"Happy Link Day... oh wait, that isn't a thing? Well, let's pretend it is. Those of us in Louisiana are in Mardi Gras season with the holiday itself coming up on March 4th. If the weather holds out, we'll be outside catching beads and listening to marching bands. It can be a lot of fun if it doesn't get rained out. It's also a great chance to eat some really bad (for you but yummy) food. I'll share a pic or two on the next edition of this post. Ok, on with the links!\nIntroducing AX (Agent Experience)\nMathias Biilmann (CEO at Netlify, they host this blog), wrote up an introduction to the idea of AX, or "agent experience". His post describes AX as the "expeirence" AI autonomous agents have with our sites and products. It's an interesting piece and be sure to read his follow up post as well.\nOn Being Laid Off\nAh, here's something I'm pretty familiar with (groan). Mert Bulan writes up his experience of a lay off and if you've never had the, err, "pleasure" of experiencing this, it's a great look into what it's like. This 'current' lay off for me was my third over thirty years in the business and it never gets any easier.\nThe Angular Documentary\nNext up is an incredibly well done documentary about Angular, which for me was my first "real" JavaScript framework. I was a huge fan of it... initially... until the big update when everything (at least in my opinion) went off the rails in a major way. This was a really fascinating look at the history of Angular, and I have to be honest, it's really made me consider taking a look at it again later this year.\n\n \n Play Video\n \n\n\n\n\nJust For Fun\nNope, nothing to see here, nothing is fun and everything is terrible. Ok, that's dramatic. My buddy Brian Rinaldi recently shared a cool song with me and after enthusiastically telling my wife about it, she reminded me that both her and our eldest had recommended the same artist like a year ago. Oh well. Cool song and a cool video. Enjoy!\n\n \n Play Video\n \n\n\n\n\n", "tags":[ "links4you" ], "categories":[ "misc" ] }, { "title": "Building a File Search Script in BoxLang", "date":"Thu Feb 20 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1740074400, "url":"https://www.raymondcamden.com/2025/02/20/building-a-file-search-script-in-boxlang", "content":"My initial blog post on BoxLang used a simple script example to demonstrate how the language can be used to build shell script type utilities and it got me thinking about other ways I could use BoxLang for my own personal tools. A little over three years ago, I blogged about a Python script I built to perform searches, locally, against my blog. My blog content comes from near seven thousand Markdown files and while I've got a good client-side search feature, I was curious what I could from the terminal.\nThat script did two things:\n\nIndex each of the thousands of Markdown files by reading in the content and parsing the filename into a date and path value\nTaking search input and checking against each and every blob of text\n\nAs I said back then, this is horribly inefficient as it has to parse the entire set of files for every search, but in my testing, the indexing aspect took a few seconds so it wasn't too bad.\nI thought it would be useful to try converting that tool to BoxLang, especially as the docs for CLI scripting were recently updated with more details about how these kind of tools can be built.\nThe script I'm going to build is very tailored to my content, but in theory, could be modified for other types of files, directories, and so forth.\nOk, let's take a look!\nBuilding the Index\nMy 'index' is an in-memory array of data from the file system. For each file, I read in the contents, and then look at the front matter. Front matter on my blog posts is a set of key value pairs in text separated from the main content by three dashes.\nHere's an example from this blog post itself:\n---\nlayout: post\ntitle: "Building a File Search Script in BoxLang"\ndate: "2025-02-20T18:00:00"\ncategories: ["development"]\ntags: ["boxlang"]\nbanner_image: /images/banners/welcome2018.jpg\npermalink: /2025/02/20/building-a-file-search-script-in-boxlang\ndescription: Using BoxLang to index and search against a large set of Markdown files.\n---\n\nMy [initial blog post](https://www.raymondcamden.com/2025/02/11/introducing-boxlang-scripting-for-the-jvm) on \n[BoxLang](https://boxlang.io/) used a simple script example to demonstrate how the language can be used to \nbuild shell script type utilities and it got me thinking about other ways I could use BoxLang for my own \npersonal tools. A little over three years ago, I [blogged](https://www.raymondcamden.com/2022/01/03/building-a-file-search-script-in-python) about a Python script I built to perform searches, locally, \nagainst my blog. My blog content comes from near seven thousand Markdown files and while I've got a \ngood [client-side search](https://www.raymondcamden.com/search/) feature, I was curious what I could \nfrom the terminal.\n\nMy intent here is to separate out the main content (after the second ---) and parse information from the front matter, specifically the date and path. Here's how I accomplished that:\n\nI assume most of this is pretty self-explanatory, but as always, let me know if something looks weird. I'll also point out that arrays in BoxLang, like ColdFusion, start with 1 and not 0.\nSearching the Index\nTo search the index, I just do a simple case-insensitive comparison to the content of the files. This could absolutely be made fancier. For example, if I searched for "foo goo", I may want to do an AND search, an OR search, or a phrase search. But as this was a simple utility for me, Ray said it was ok to be lazy.\n\nDesigning the CLI Interface\nOk, so we've got our two main methods and now it's time to use it. The first thing I had to figure out was - how should the search term be provided? I knew it would as an argument, and you saw me use cliGetArgs() in the first post, but there's a simple way to do what I did before. In the docs, it describes how if you use --something or -somethingelse, you get default parsing/behavior etc in.\nI decided to support --term=X as the main way to get the search term from the user (which again, is just me), but I also wanted to support a case where I forgot to pass it in. BoxLang supports prompting for command line arguments as well using cliRead. Therefore, I wrote my code to support both:\n\nAs you'll see in the commented out section, initially I output help when term wasn't passed, but I pivoted to simply asking for the term instead.\nOnce I have the term, I do the hard work of calling my two previous methods:\n\nNote how I used print first, to not include a new line, and then followed it with a println to then start a new line. The variable, rootDir, is defined earlier in the script and points to where I checked out my repo.\nOnce I get the results, I print a header and the results:\n\nI prefix the path result with my domain, not because I don't remember my website, but in my terminal, it makes it automatically clickable. Here's an example:\n\n\n\nIn case you're curious, speed was probably just as good as it was in Python, if not better. In my testing, it felt like it took an average of 2-3 seconds per sear", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Quick Demo of Chrome's Summarization GenAI (Upcoming) API", "date":"Wed Feb 19 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1739988000, "url":"https://www.raymondcamden.com/2025/02/19/quick-demo-of-chromes-summarization-genai-upcoming-api", "content":"I've blogged a few times recently about Google's AI on Chrome initiative to bring AI features to the browser itself. Yesterday, my Code Break episode was specifically on this topic:\n\n \n Play Video\n \n\n\n\n\nIn that session, I talk specifically about the Summarizer API, which does... wait for it... summarization. (It also covers the Writer and Rewriter API which I covered... woah, way back in September of last year: "Using Chrome AI to Rewrite Text")\nOne interesting aspect of the API is that it offers multiple types of summarization:\n\nkey points (the default)\ntl;dr\nteaser\nheadline\n\nYou can also request three different lengths:\n\nshort\nmedium (default)\nlong\n\nAccording to the documentation, these lengths impact different types differently. So for example, using the key points type the length will impact the number of bullet points returned.\nAll of this made sense, mostly, but for types I wasn't really sure how to compare tl;dr and teaser for example.\nWith that in mind, I built a demo that takes your input, and then walks through each type and length and shows you the output. While not something you would do in a real world application, this was darn handy for me to visualize the differences. I built the demo in the live stream, but afterwards, cleaned up the UI a bit to make it a bit nicer.\nHTML wise, it's simple:\n\nWhen I share the CodePen in a bit you'll notice I placed some default text in the textarea to make it easier to test.\nOn the JavaScript side, I start up with some basic variable declarations and checking to see if the Summary API is available:\n\nOne important thing to note here. The AI APIs Chrome ships have support for handling cases where AI itself is supported but the models aren't downloaded. I skipped that because I was lazy, but you can and probably should do that in production code.\nAlso, I will not stop complaining about the fact that they use 'readily' instead of 'ready'. I really hope they change that before they finalize the APIs.\nOk, that aside, here's the code that handles the summarization tests:\n\nBasically just loop over each type and length, run the result, and wait. Note I'm doing this synchronously in a loop. If for some reason you wanted to summarize multiple different bits of text, for example, you could absolutely run them in parallel.\nSo, I know some of you won't be running a Chrome that supports this yet, let me share the results. For my input, I used the Gettysburg Address. In case you don't know it, here it is:\n/2024/11/05/automatically-posting-to-bluesky-on-new-rss-itemsFourscore and seven years ago our forefathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal.\nNow we are engaged in a great civil war, testing whether that nation or any nation so conceived and so dedicated can long endure. We are met on a great battle field of that war. We have come to dedicate a portion of that field as a final resting place for those who here gave their lives that this nation might live. It is altogether fitting and proper that we should do this.\nBut in a larger sense, we cannot dedicate - we cannot consecrate - we can not hallow this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember, what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us - that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion - that we here highly resolve that these dead shall not have died in vain - that this nation, under God, shall have a new birth of freedom - and that government of the people, by the people, for the people, shall not perish from the earth.\n\nOk, let's consider the results.\nType: key-points\n\nType: key-points Length: short\n\nThe text begins by referencing the Declaration of Independence and the ongoing Civil War.\nLincoln argues that it is important for the nation to dedicate itself to preserving the ideals of liberty and equality.\nHe urges the audience to continue the work of those who fought and died to ensure that government of the people, by the people, for the people endures.\n\n\n\nType: key-points Length: medium\n\nAbraham Lincoln delivers a Gettysburg Address on the grounds of the Soldiers' National Cemetery in Gettysburg, Pennsylvania.\nThe address reflects on the Civil War, the sacrifices made by soldiers, and the importance of preserving the nation's commitment to liberty and equality.\nLincoln emphasizes that the nation was founded on the idea of all men being created equal, a principle that is being challenged and defended during the war.\nHe calls upon living citizens to honor the fallen soldiers and c", "tags":[ "generative ai", "javascript" ], "categories":[ "development" ] }, { "title": "Building a Web App with BoxLang", "date":"Tue Feb 18 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1739901600, "url":"https://www.raymondcamden.com/2025/02/18/building-a-web-app-with-boxlang", "content":"I've been building web apps for thirty years now, which frankly is kind of scary to see explicitly spelled out. For a large chunk of that time I built web apps using an application server, ColdFusion, where my templates would dynamically output HTML (or other formats like JSON) to return to the browser. For my non-ColdFusion readers out there, you can just replace ColdFusion with PHP or ASP and you get the basic idea.\nMost recently, I've spent a lot less time on the server and more on the front-end, but I kept coming back from time to time. Earlier this year I looked at building a simple blog in the Python-based Flask framework. I thought it would be a good exercise to try something similar with BoxLang as well. So far I've shown how to build a simple serverless function with BoxLang as well as a command-line script, and I've got more I want to say in both those areas, but for today, let's talk about how you can build a web application using BoxLang.\nLet me start off by saying that this is a pretty huge topic. Building a large scale, performant web app isn't trivial in any language. For today, I just want to give you the lay of the land so to speak and an idea of what the developer experience is like. For those of you coming from a ColdFusion background, a lot of this will be familiar, but let's just assume you are coming at this fresh. (And honestly, it's been quite a while since I built a ColdFusion app myself so this was a bit of a refresher.)\nOk, so basics:\n\nI've shown running BoxLang at the command line and in Lambda, but BoxLang can also run in the context of a web server. The one I used for testing is MiniServer, but CommandBox is also an option as well as Docker.\nLike ColdFusion, PHP, ASP, etc, files implicitly created routes. So if I make foo.bxm in the root of my web server, then /foo.bxm would be available via a request. (URL rewriting and such would let you customize the URL even further.)\nBoxLang provides automatic and easy access to various web-based scopes like URL and Form. Also, file upload processing is supported.\nBoxLang supports an "Application" level module that gives you a deep level of customization for your app, including handlers for startup of the app itself, request processing, and more.\nThis same application support provides session management and caching as well.\nAlso, BoxLang's class support (you saw an example of it in my serverless post) lets you build JSON ready APIs.\n\nThere's a lot more, and the docs will be a good introduction, but let's get into some code, shall we?\nWhat I'm Building\nMuch like with my first Flask application, I decided to build a very simple blog in BoxLang. Simple as in - a home page with the last ten blog posts and a post page that renders one particular post at a time. That's it. No search, or categories, or CMS and such. All of that could be done of course, but I wanted to keep it simple for now.\nWhile my Flask demo used a static JSON file, I wanted to do something a bit more deep for this. I found a WordPress export from this blog from 2016 and wrote a one-time BoxLang script to parse the XML and enter it into a MySQL database. BoxLang has native support for database operations, but you need to install it as a module.\nThis is documented of course, but the command line call was:\n\nAfter I had setup a database in MySQL, I wrote this, admittedly ugly, quick hack of a script:\n\nBasically, read in the XML and parse it (note the native xpath support), specify my connection settings, then loop over my XML data and insert into the database. Obviously I added that line in the middle with the abort after I ran it and confirmed it worked correctly. Also make note of the queryExecute function with bound parameter support. This is the same as in ColdFusion, and true story, the entire reason I downloaded ColdFusion way back in... probably 1997 or so... was because I didn't want to try to figure out database connections in Perl. I'm old yall, like really old.\nThe last thing I'll note here is the use of a slugify function to turn the title into something I could use later in the actual app. This was added after I had worked a bit on the demo.\nAt this point, I had a database with a posts table consisting of 5631 posts.\nThe Blog\nOk, so now I started to work on the blog itself. I want to be clear - this version of the blog is incredibly simplistic. I've got logic written in templates that absolutely should be abstracted out and put into classes properly. That's for next time. In all things, start simply and then progressively improve.\nWhen it comes to templates, you have the ability to write HTML and intermix within BoxLang tags to create dynamic output. My approach here is the same that I'd take when building a client-side application with something like Alpine.js. If it ever becomes difficult to read the HTML, than I've got too much logic in the template and I should refactor. Again though, I'm taking this one step at a time and I'll share with you a better v", "tags":[ "boxlang" ], "categories":[ "development" ] }, { "title": "Building Serverless Lambda Functions with BoxLang", "date":"Fri Feb 14 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1739556000, "url":"https://www.raymondcamden.com/2025/02/14/building-serverless-lambda-functions-with-boxlang", "content":"Edit on April 22, 2025: Thanks to Adam E. for pointing out I had the wrong secret name below. It is fixed now.\nI've been a fan of serverless for quite some time. My introduction to it was OpenWhisk, way back in 2016. It's been appealing to me for a long time as an easy way to deploy lightweight services quickly. As much as I've been a fan of the technology, I've yet to really embrace Amazon's Lambda product. I've played with it a bit off and on in the past, but it always felt incredibly overwhelming. Netlify Functions, Pipedream, and Cloudflare Workers have been my main tools for serverless just because of how simple they are. That being said, the last few days I've been playing with BoxLang on AWS and thought I'd share my experience.\nThe Basics\nSo let's start off with the basics. I'm not going to repeat what's in the docs, you should 100% read the AWS Lambda documentation for BoxLang. I'll focus on the 'gotchas' as my experience was that you need to be a bit careful in what you do in order for all the parts to work well together. Obviously for this you're also going to need an AWS account as well. As much as I can encourage you to read the docs, I know how devs are (grin), so I'll still cover an overview here. I plan on recording a video version of this next week as well so if you prefer learning visually, I'll have that for you soon.\nThere's two main ways you can use BoxLang's Lambda support. You can create a build locally, which creates a zip and upload it manually to AWS or you can use GitHub Actions to automate the process. This is where some of the trickiness comes in but honestly, it's a much better developer experience so I recommend that approach, and it's the one I've taken.\nGiven that, I'd start by making a new GitHub repository and use the BoxLang template, https://github.com/ortus-boxlang/bx-aws-lambda-template. As soon as you do this, the GitHub action for the repo is going to fire off and fail, but you can ignore that.\nIn your GitHub project settings, you need to create three secrets:\n\nAWS_REGION - the region where the lambda will be deployed. I don't spend a lot of time in the AWS console so as a reminder, you can find your current region in the upper right hand corner, and if you click it, you can see the ... I don't know, code name I suppose, for the region. For me, I'm using Oregon which is us-west-2.\n\n\n\n\n\nAWS_PUBLISHER_KEY_ID - your credentials.\nAWS_SECRET_PUBLISHER_KEY - again, your credentials.\n\nAfter you've specified that, I'd then create your Lambda function on AWS. This is a very important step. When the GitHub Actions from the template deploy, they are going to use one of two names depending on the branch. If you are using development, it will be: {projectName}-staging. If you are using the main branch, it will be {projectName}-production. What's projectName? Give me a sec and I'll get to it.\nAs documented, you will create the Lambda with the Java runtime and then edit the runtime settings to specify this handler: ortus.boxlang.runtime.aws.LambdaRunner::handleRequest\nDon't screw any of this up. I discovered that AWS blocks both renaming of Lambda's as well as changing the runtime. I'm sure there's good reason for that but as I messed up both at least once, it was a painful lesson. ;)\nOk, so just to recap - in GitHub you cloned the template and set up 3 environment variables. On the Lambda side, you made your function, picked Java, and updated the handler. There's one final step.\nIn your local copy of the repository, find settings.gradle, and modify the root project name. Here's mine:\nrootProject.name='bx-lambda2'\n\nThat name isn't very descriptive, but it works. On the AWS side, my function is bx-lambda2-staging. If you commit this change, this will kick off a new GitHub Action process and in theory, it will work fine. At this point, you can start iterating on your code. In my testing, commits took roughly a minute and a half to deploy to Lambda. You can keep the workflows window open to monitor the progress.\n\n\n\nThe Function\nSo all of the above felt like a lot to me, but honestly, it was mostly me just not being familiar with AWS. Also, I've never written any GitHub actions myself so that was new for me as well. I now turned my attention to the code. Here's the default Lambda you get from the template:\n\nThis is fairly simple, the only odd thing to me, kinda, was the second function. As the comment says, this is a way for one Lambda to have multiple functions. All you need to do is pass a header (more on the whole URL thing in a moment) and run will be bypassed for another function. Also note the simpler return in anotherLambda. The docs discuss this but you are allowed to return a complex structure with a status code and such, or just plain data and BoxLang will take care of it for you. That's really convenient!\nFor my test, I decided to write a simple wrapper for the Pirate Weather API. One of my first uses of serverless was to build simple API wrappers that both hid my API key fro", "tags":[ "boxlang" ], "categories":[ "development", "serverless" ] }, { "title": "Using Intl.DurationFormat for Localized Durations", "date":"Thu Feb 13 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1739469600, "url":"https://www.raymondcamden.com/2025/02/13/using-intldurationformat-for-localized-durations", "content":"Last year I had the opportunity to give a talk on the web platform's Intl specification. This made me incredibly happy because in preparing for the presentation, I discovered so many cool features and capabilities of the spec that I had no idea existed. Almost a year ago, I wrote up a blog post on Intl.RelativeTimeFormat, talking about how the API was easy to use, but perhaps a bit difficult when dealing when determining the best values to use when formatting dynamic dates. Today, I'm going to turn my attention to a related spec, Intl.DurationFormat\nThe Basics\nThe DurationFormat API works like so:\n\nGiven a locale (defaulting to the browser's locale)\nGiven a set of values representing time in different units (days, hours, etc)\nGiven a 'style' (long, short, narrow, and digital)\nReport the duration in the desired locale\n\nSo for example, you can define a duration like so:\n\nI can then create a localized string for the duration like so:\n\nWhich reports: 1 day, 5 hours, 32 minutes. Changing the locale to fr gives 1 jour, 5 heures et 32 minutes. That's with the long style, in short form you get 1 day, 5 hr, 32 min and 1 j, 5 h et 32 min. The narrow form is shorter while digital looks more like a digital clock and is better for durations less than a day. For example, if I just pass hours and minutes from the above input, I'd get: 5:32:00.\nI built a quick demo showing three locales and all four styles that you can play with below.\n\n See the Pen \n Quick DurationFormat Demo by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nUsing DurationFormat with Real Data\nOk, so given the fact that you have to spell out the duration in units, how do you handle dynamic values? You can't just take the difference between two dates because if you pass a large number, the formatter takes it as is. So for example:\n\nThis will be reported as 360 minutes, not 6 hours. And to be fair, I feel that's the right behavior. It's formatting exactly what you told it too, and you may indeed want hours. Typically though folks want something a bit more 'condensed', ie, a total number of days lets say, then hours, minutes, and maybe seconds. As with my earlier post on relative time formatting, what you may want to use here depends on your data and your users.\nGiven that it's a bit up in the air, let's build a simplistic solution that attempts to break things down to year, months, weeks, days, hours, minutes, and seconds. The API can get more precise, but let's keep it at that. I'd also argue that any duration that may include years, or months, should probably not include weeks. I wouldn't tell someone it took three months, one week, and 2 days to do something. Well, heck, I don't know, maybe I would. But 'week' feels like something I'd not use in a larger duration. As with, well just about anything in our field, "it depends".\nI began by adding two date fields:\n\nThis lets you, my dear reader, test with any values. I then added a dropdown the style:\n\nBeneath that is an empty div so I can show the result. Now let's turn to the code. First, I've got a bunch of code to check the DOM and register listeners. I want my code to run on any date or style change:\n\nNext, I defined a set of constants that represent a duration by unit, ie, this is how big a year is versus an hour.\n\nAs the comment says, my MONTH logic there is absolutely not precise. Now let's look at the main logic thats run on changes to the form fields:\n\nBasically my logic is - build up a structure for my duration based on seeing if my duration in miliseconds is bigger than a year, then a month, and so on. I can then pass my structure to the format function and render it. This seems to work ok, check it out below.\n\n See the Pen \n Intl.DurationFormat by Raymond Camden (@cfjedimaster)\n on CodePen.\n\n\nObviously this could be overkill based on your data. For example, you may know for a fact that your durations will never be over an hour and your users will only care about durations in minutes, not seconds. Let me know if you've used this as I love to hear about Intl use in the wild!\n", "tags":[ ], "categories":[ "javascript" ] }, { "title": "Introducing BoxLang - Scripting for the JVM", "date":"Tue Feb 11 2025 18:00:00 GMT+0000 (Coordinated Universal Time)", "date_timestamp": 1739296800, "url":"https://www.raymondcamden.com/2025/02/11/introducing-boxlang-scripting-for-the-jvm", "content":"The last week or so I've been playing with a new language, which honestly is one of the most fun things I get to do. BoxLang is a dynamic scripting language that runs on the JVM although you don't really need to know a thing about Java to make use of it. It's currently in beta and moving towards an official 1.0 release, but you can absolutely kick the tires on it now (as I have!) and I thought I'd share a bit about what I'm doing with it.\nBoxLang is open source and free, with the company behind it, Ortus Solutions, offering professional services on top. If you come from the ColdFusion world, you know Ortus has been around a while and has created a huge amount of value on top of CFML. If you know nothing at all about ColdFusion, well, that's fine too. ;)\nThe runtime is supported in any environment (I've tested it with Ubuntu and Windows) and tiny - 6 megabytes. Heck, a typical React site is probably bigger than that. (I kid... mostly.) It can currently run via command line, Docker, web contexts, and Lambda, with more coming soon (including Microsoft Azure). Along with the language, there is a framework with various services, like caching and scheduling.\nYou can dig more into the architecture if you wish and the docs are pretty extensive as well. There's some things currently missing (I'll show one in a code sample a bit later in this post), but they've been pretty good at updating as I run into issues.\nFrom a practical aspect, I see three main uses for this that appeal to me (although there's more):\n\nCLI scripts: I typically use Node.js and Python for utility scripts quite a bit.\nWeb apps: I've not done a lot of "application server" web apps for a while, but my recent work with Python's Flask library has me thinking about it again.\nServerless: BoxLang has a Lambda template and I've tested it - it works - and I'll probably discuss that in my next post.\n\nI've been doing most of my testing via the CLI, so I thought I'd share a quick example of that first. Before that, if you want to play with BoxLang, I recommend the IDE extension for VS Code, which includes the compiler in it as well and supports debugging and more. This is another topic I want to show off a bit more later.\nI Can Haz Dad Joke?\nFirst off, the docs have a great 'quick syntax guide' that provides a lot of high level detail about file types, basic syntax, and more. A basic "script" uses the extension bxs. I built one that hits the Dad Joke API. Here's the entire thing and I'll explain each bit:\n\nFor those of you who know ColdFusion, this will look familiar, but for everyone else, I've just got a basic function, getDadJoke, being called at the end there inside the writeoutput line. Being the forward thinking 10X engineer I am, I figured it made sense to build a simple function in case I wanted to reuse the logic elsewhere.\nInside the function, anytime you see local., that's basically assigning a variable local to the function itself. I could have also used the var keyword, but local lets me treat it as a scope (or structure in this case). I only need it the first time hence the direct access in the last line there. Finally, bx:http is just how HTTP is done in BoxLang currently.\nAt the command line, I then can call this with: boxlang dadjoke.bxs. Running it gives you a random Dad joke:\nI've just written a song about a tortilla. Well, it is more of a rap really.\n\nThis worked, but I wanted to make it a bit more flexible. The Dad Joke API supports search, so I thought, why not make my little CLI tool support it too. At the time I write this, it isn't yet documented (but will be soon), but a BoxLang script can use cliGetArgs() to pick up on any command line args or flags that were used in the execution. So for example, if I do:\nboxlang dadjoke.bxs term=cats -d\n\nI get this returned by that function:\n\nGiven that, I wrote some quick code to scan passed arguments and look for term:\n\nAgain, for folks with no ColdFusion experience, the one part that may stick out is the listGetAt call. This is a string function that treats input as a list of items with a delimiter. By treating the input, term=something as a list delimited by =, I can quickly grab the term if passed in.\nI then modified the function to switch to a search and return a random result:\n\nHow about a few examples?\nIt was raining cats and dogs the other day. I almost stepped in a poodle.\n\nWhat do you call a group of disorganized cats? A cat-tastrophe.\n\nWhere do cats write notes?\nScratch Paper!\n\nGold, pure gold. You can find the complete script here: https://github.com/ortus-boxlang/bx-demos/blob/master/samples/dadjoke.bxs\nWhat's Next?\nAs I said, I'm just beginning to play with this and plan to share more, but it's fairly fun so far. You can also try it in the browser at https://try.boxlang.io/. I took the first version of my Dad Joke wrapper and ran it there as well:\n