Using Netlify Edge and Blob Support to Investigate Website Traffic

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

Adding Form Participation Support to Web Components

Many years ago when the web platform began to really improve, when everything was "HTML5 this" and "HTML5 that", I remember being particularly excited by the updates to forms. I started my web career doing a lot of form processing and have always thought it was one of the more important aspects of the platform. Anything that improved that was a good thing. In my explorations of web components, I was ecstatic to discover that web components can be participants in forms. So what do we mean by that? What’s a Form Field? # Form fields have a number of different features, including: Including a name and value as part of the overall form. This is the bare minimum thing a... more →
Posted in: JavaScript

MapLibre Adds WebGL2 Support

MapLibre GL JS v3 has been released. Version 3 of the popular mapping library includes significant improvements to Terrain 3D, support for WebGL2, new styling options and improved performance. MapLibre GL JS, a JavaScript mapping library that uses WebGL to render interactive maps from vector tiles and styles. MapLibre was founded in 2015 in reaction to the growing trend of proprietary mapping Maps Mania… more →
Posted in: Interactive Maps

Detect XR Support with JavaScript

A few years ago I wrote an article about how to detect VR support with JavaScript. Since that time, a whole lot has changed. “Augmented reality” became a thing and terminology has moved to “XR”, instead of VR or AR. As such, the API has needed to evolve. The presence of navigator.xr signals that the browser supports the WebXR API and XR devices: const supportsXR = 'xr' in window.navigator; I really like using in for feature checking rather than if(navigator.xr), as simply invoking that could cause some initialization to take place. In future posts we’ll explore identifying and connecting to different devices. The post Detect XR Support with JavaScript appeared... more →
Posted in: JavaScript

Another Update to my Slideshow Web Component – JavaScript Support

Last month I shared a simple web component I built to embed slideshows onto web pages. If you didn’t get a chance to read that, you can see it in action in this CodePen below: See the Pen Slideshow Web Component by Raymond Camden (@cfjedimaster) on CodePen. After I wrote this, Šime Vidas shared an excellent update to my component with some great modifications. I talked about this version in a blog post, and it’s the version I’ll be using for my post today. What am I covering today? When I demonstrated how to use my web component, it was done via a script include (well, it’s on CodePen, but you get the idea), and then a bit of HTML. Here’s an example. (And... more →
Posted in: JavaScript

Adding Download Support in an Eleventy Site

I was thinking recently about how I would add "Downloads" support to an Eleventy site. By that I mean, a site where you have various resources (PDFs, zip, etc) and want to provide a way to let users download them in a consistent manner, as well as how basic tracking could be done as well. I came up with a few ideas I’d like to share, but as always, please let me know what you’ve done and what you would suggest. Method 1 – Meta Refresh For my first attempt, I imagined a site where I’ve got some files up in S3 (like I do for my images here) and I’d like to take a directory and set them up as resources. So for example, imagine a _data file named downloads.json: {... more →
Posted in: JavaScript
1 2