Building a CRUD Web App with Alpine.js

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

The US Road Fatality Map

Last week I posted a link to the NYC Congestion Zone Live Crash Tracker, an interactive map of car crashes in New York City. If you live outside of New York then you might prefer Roadway Report instead, which is a visualization of American roadway fatalities in the 21st Century.The Roadway Report map uses road traffic accident data from the National Highway Traffic Safety Administration’s Maps Mania… more →
Posted in: Interactive Maps

Your Daily Map Trivia Game

TripGeo Trivia is a new daily geography quiz which requires you to identify ten cities based on a number of clues. Every day ten new random cities from around the world need to be identified. To help you in this task you can view three clues as to the identity of each city.Every day you get to identify ten new cities. For each city you get three clues and a choice of possible answers. Using the Maps Mania… more →
Posted in: Interactive Maps

Add Squirrelly Support to Eleventy

I’m supposed to be on vacation but writing about Eleventy two days ago has got it fresh on my mind, also, I can’t pass up an opportunity to use "squirrelly" in a blog title. I subscribe to three or four different email newsletters related to web development. It’s fairly normal to see the same link shared among a few of them. Most recently an example of this was the Squirrelly library. This is, yet another, JavaScript template language and I thought I’d take a look at it in my spare time. Given that Eleventy makes it easy to add other template languages, how long does it take you to add support for it? Step One – Make Your Eleventy project # Technically... more →
Posted in: JavaScript

Virtual Reality OpenStreetMap

osm4vr is a virtual reality world built using OpenStreetMap map tiles and building footprints. Using osm4vr with a VR headset you can explore the world in virtual reality. Alternatively, if you don’t have access to a headset you can simply fly around the world in your browser instead.Most of the 3d buildings are created using OSM building footprints with building heights, so the graphics can be Maps Mania… more →
Posted in: Interactive Maps

An Online Mastodon Archive Viewer

Here’s a quick write-up of something I actually built a week or so ago… and forgot to share on the blog. Instead, I shared a way to integrate your Mastodon with Eleventy. In that post, I mentioned how the account Fedi.Tips was looking for ways to let people view their archived Mastodon data. I followed their guide on getting my export and started work on a simple viewer. If you don’t care about the "how", and have your archive ready, just head on over to https://tootviewer.netlify.app and upload your zip. The Archive # When you get your Mastodon archive, it will be a zip file containing the following: actor.json: A file related to the user, yourself probably. avatar.jpg:... more →
Posted in: JavaScript

30 Days of Crashes in New York City

Between June 16th and July 15th, 149 people were injured by cars in the planned New York congestion zone and 4 people were killed.At the beginning of June New York Governor Kathy Hochul canceled New York City’s planned congestion zone. Under the planned congestion zone vehicles traveling into or within the central business district of Manhattan would have been charged a fee. In response to Maps Mania… more →
Posted in: Interactive Maps

Caching Input with Google Gemini

A little over a month ago, Google announced multiple updates to their GenAI platform. I made a note of it for research later and finally got time to look at one aspect – context caching. When you send prompts to a GenAI system, your input is tokenized for analysis. While not a "one token per word" relation, basically the bigger the input (context) the more the cost (tokens). The process of converting your input into tokens takes time, especially when dealing with large media, for example, a video. Google introduced a "Context caching" system that helps improve the performance of your queries. As the docs suggest, this is really suited for cases where you’ve got... more →
Posted in: JavaScript
1 10 11 12 13 14 190