Building a General Purpose GeoJSON Viewer with Leaflet / / No Comments Last week I shared my initial experiences with Leaflet and I thought I’d share a small demo I built with it – a general purpose GeoJSON viewer. GeoJSON and Leaflet As I mentioned at the end of my last post, GeoJSON is a specification for encoding ad hoc geographic data. Here’s an example: { "type": "FeatureCollection", "features": [ { "type": "Feature", "id": 0, "properties": { "Code": "FRLA", "Name": "Frederick Law Olmsted National Historic Site" }, "geometry":... more → Posted in: JavaScript Tagged with: building, General, GeoJSON, Leaflet, Purpose, Viewer
Building a CRUD Web App with Alpine.js / / No Comments One of the things I try to encourage here is for my readers to reach out with their questions. That rarely happens, but when it does, I try my best to answer as soon as possible. In this case, I got a great question from a reader back in May and then… life happened. Sorry, Nicholas, but hopefully this isn’t too late. His question was pretty simple – could I build an example of using Alpine.js for a CRUD interface? For folks who may not know the term, CRUD refers to: (C)reate (R)read (U)pdate (D)elete You’ve probably seen a hundred interfaces like this. You have a list of content with links to edit one, delete one, and a link to add a new instance of that content. When... more → Posted in: JavaScript Tagged with: Alpine.js, building, CRUD
Building a Web Version of Your Mastodon Archive with Eleventy / / No Comments A couple of days ago Fedi.Tips, an account that shares Mastodon tips, asked about how non-technical users could make use of their Mastodon archive. Mastodon makes this fairly easy (see this guide for more information), and spurred by that, I actually started work on a simple(ish) client-side application to support that. (You can see it here: https://tootviewer.netlify.app) This post isn’t about that, but rather, a look at how you can turn your archive into a web site using Eleventy. This is rather rough and ugly, but I figure it may help others. Here’s what I built. Start with a Fresh Eleventy Site # To begin, I just created a folder and npm installed Eleventy. I’m using the... more → Posted in: JavaScript Tagged with: Archive, building, Eleventy, Mastodon, version
Building a Chat Integration with Google Gemini / / No Comments It’s been on my queue to investigate how to use Generative AI in a ‘chat’ interface versus "one prompt and answer" mode for some time and today I finally got a chance to check it out. I’ll share my thoughts below, but once again I want to thank Allen Firstenberg for his help while I worked through some issues. As always, take what I’m sharing as the opinion of a developer still very new to this space. Any mistakes are my fault! What is GenAI chat? # Specifically, what is chat when it comes to generative AI? Nothing. Seriously. All ‘chat’ is taking your initial prompt, getting the result, then taking your next prompt and appending it. So for... more → Posted in: JavaScript Tagged with: building, Chat, Gemini, Google, integration
Building a Generic RSS Parser Service with Cloudflare Workers / / No Comments About once every three months I’ll write a quick JavaScript demo and attempt to fetch someone’s RSS feed… and then remember that the vast majority of RSS feeds don’t specify a CORS header to allow remote scripts to load them. I know this – and yet I still tend to forget. I thought it would be kind of fun to build a serverless API via Cloudflare Workers to handle loading, parsing, and returning a RSS feed with CORS allowed. I figured this would be pretty easy, but I ran into a snag right away. Workers and NPM Modules # Cloudflare Workers is Node.js compatible… with some issues. Cloudflare has a documentation page on it addressing what you may run into, and for... more → Posted in: JavaScript Tagged with: building, Cloudflare, Generic, Parser, service, workers
Building an API to List Cloudinary Images in a Folder / / No Comments I was preparing to work on a Cloudinary and Apline post when I realized I needed something before I could build that demo – a list of images in a Cloudinary folder. While this is directly supported by their SDKs and REST APIs, I needed something that could be used in a public-facing web application. So with that in mind, I turned to Pipedream to build a serverless endpoint. Here’s how I did it. Raymond Camden… more → Posted in: JavaScript Tagged with: building, Cloudinary, Folder, images, List
Building a Placeholder Web Component with No External Dependencies / / No Comments As my readers can tell, I’m on something of a web component kick, and while I’m enjoying building silly examples, today I wanted to share one I thought might actually be useful – a placeholder component that doesn’t use any external services. Raymond Camden… more → Posted in: JavaScript Tagged with: building, Component, Dependencies, External, Placeholder
Building a Web View of a Public Google Drive Folder / / No Comments I’m working on a project to help with local initiatives and as part of that effort, I needed to look into creating a nice way to display, make available, etc., files stored in Google Drive. Google Drive lets you make a folder public, and to be honest, the interface isn’t too hard to use. I’ve got a folder you can open yourself at https://drive.google.com/drive/folders/1FYLaoscxWBV_BU5sFouf7XCrv7cKktBY?usp=sharing. Here’s how it looks if you don’t want to click. Raymond Camden… more → Posted in: JavaScript Tagged with: building, Drive, Folder, Google, public, View