HTML popover Attribute / / No Comments Modals have been an important part of websites for two decades. Stacking contents and using fetch to accomplish tasks are a great way to improve UX on both desktop and mobile. Unfortunately most developers don’t know that the HTML and JavaScript specs have implemented a native modal system via the popover attribute — let’s check it out! The HTML Creating a native HTML modal consists of using the popovertarget attribute as the trigger and the popover attribute, paired with an id, to identify the content element: <!-- "popovertarget" attribute will map to "id" of popover contents --> <button popovertarget="popover-contents">Open popover</button> <div... more → Posted in: JavaScript Tagged with: Attribute, HTML, popover
The AI Music Map / / No Comments Over the last few days my Twitter feed has been lit up by people sharing the songs that they have created on Udio. For the one or two cave dwellers out there who have only just installed spelunking wi-fi, Udio is an AI-powered music generation tool which allows users to create songs from a text prompt. The tool allows you to create tunes with customized lyrics, vocal styles, and musical Maps Mania… more → Posted in: Interactive Maps Tagged with: Music
Using GenAI to Help Pick Your D & D Class / / No Comments A few weeks back I wrote up my experience with generative AI as a dungeon master. That post ended up being really popular and got me thinking about other ways I could integrate D & D, or other games, with Generative AI. With Gemini 1.5 now available via API, I thought it would be good to find an excuse to hit the API in a demo. So with that in mind, I’d like to introduce you to the Class Suggester. The Application # The app begins by simply presenting some introductory text and invites you to click a button to roll for your stats. You can hit the Roll Stats button as many times as you want. It uses the standard D & D rule of rolling a six-sided dice four times and removing the... more → Posted in: JavaScript Tagged with: class, GenAI, help, Pick, using
Canada’s Hidden Subterranean Rivers / / No Comments Canadian cities, like many cities around the world, have a history of hiding waterways underground. As cities grow rivers can become obstacles to the movement of people, can be seen as wasted real-estate, and historically (when cities had poor sanitation) they often became open sewers. For these reasons cities often culvert and divert rivers underground.In Discover Where Ancient Rivers Flow CBC Maps Mania… more → Posted in: Interactive Maps Tagged with: Canada's, hidden, Rivers, Subterranean
Live from the Sundhnúkur Eruption / / No Comments The Reykjanes peninsula in Iceland has been experiencing a period of heightened volcanic activity since December 2023. This follows an increase in seismic activity that began in late 2019. The most recent eruption started on March 16th in Sundhnúkur near the town of Grindavík.You can view a live webcam of volcanic activity in Sundhnúkur on Live from Iceland. This webcam shows a live Maps Mania… more → Posted in: Interactive Maps Tagged with: Eruption, from, live, Sundhnúkur
Using Netlify Edge and Blob Support to Investigate Website Traffic / / No Comments For some time now, I’ve relied on my Netlify Analytics report to keep track of how well my site is doing, what content is popular, and so forth. I was a Google Analytics user for over ten years, but when they updated the UI, I saw red every time I tried to use it. Netlify Analytics is super simple and quick. (My only real complaint is that it’s limited to 30 days, but I’ve got free access to the feature so I’m happy to not care about that.) I complement Netlify Analytics with GoatCounter as well. Netify’s analytics show much more traffic than Goat, and I figure the truth is somewhere in the middle, and again, I’m fine with that. What’s odd though is that... more → Posted in: JavaScript Tagged with: Blob, Edge, Investigate, Netlify, Support, Traffic, using, Website
The US Foreign Assistance Map / / No Comments The US government’s Foreign Assistance website provides detailed information and data on U.S. foreign assistance programs. The website serves as a central platform for transparency and accountability in U.S. foreign aid efforts. It also provides a fascinating insight into the shifting geo-political ambitions of the United States over the last 75 years.The Foreign Assistance Dashboard reveals Maps Mania… more → Posted in: Interactive Maps Tagged with: Assistance, foreign
A Quick First Look at Amazon Bedrock (with Node.js) / / No Comments My regular readers (hello, yall rock!) know I’ve been playing with generative AI the past few months. I’m still a bit skeptical about the amount of hype involved around the space, but I’m slowly getting more excited as I see some of the interesting possibilities available with these tools. Most of my recent exploration has been on the Google Gemini side, but after hearing my buddy Todd Sharp talk about Amazon Bedrock on his stream yesterday, I figured it was time to check it out. (FYI, you should absolutely check out his weekly Twitch show on the AWS Twitch channel called "Streaming on Streaming" – Wednesdays at 3PM CST.) Getting Started # So obviously, you want... more → Posted in: JavaScript Tagged with: Amazon, Bedrock, first, Look, Node.js, Quick