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: , , , ,

Working with Pasted Content in JavaScript

/ / No Comments
This began as me wanting to build an Alpine.js application that handled pasted input, but I realized before I looked into handling this with Alpine, it made sense to start with basic vanilla JavaScript at first. I’ve worked with the clipboard before, mainly storing information to it, but this was the first time I looked at handling input from the clipboard. The web platform handles it rather nicely, but as with most things, there are a few interesting things you need to be aware of. Here’s what I found. Listening To the Event # The first thing you need to do is actually listen to the event. While you probably listen on a part of a DOM, it made the most sense to me to listen at the... more →
Posted in: JavaScript Tagged with: , , ,

Storing Recipes in IndexedDB

/ / No Comments
The last two sessions of my show, <Code><Br>, were taken up talking about one of my favorite web platform features, IndexedDB. This is a topic I’ve covered many years on the blog (I even wrote a book on it back in 2016) so I thought it would be a good topic for the show. (I will include links to those episodes at the end of this post.) In the first session, Sue, one of the folks watching the live stream, suggested I use recipes as an example of data to persist in the browser. I thought this was perfect as recipe data can get quite complex. You can see an example of that in the post I wrote earlier this month on scraping recipes. For the context of the live stream, I decided... more →
Posted in: JavaScript Tagged with: , ,

Creating a Content Assistant with Gemini and GenAI

/ / No Comments
One of the use cases for generative AI that I’ve discussed before is the idea of using the tool to aid in the writing process. I’m not talking about creating content so much as creating suggestions and providing feedback about the content you yourself have created. This past weekend I worked on a "general purpose" tool with this in mind and thought I’d share it to get your feedback. ("You" being the smart readers of this blog who keep me honest when I show something stupid. 😉 The Application # The application itself is rather straightforward. It asks two questions – first, what are you trying to accomplish with your writing and what are the desired... more →
Posted in: JavaScript Tagged with: , , , ,

How to Set Date Time from Mac Command Line

/ / No Comments
Working on a web extension that ships to an app store and isn’t immediately modifiable, like a website, can be difficult. Since you cannot immediately deploy updates, you sometimes need to bake in hardcoded date-based logic. Testing future dates can be difficult if you don’t know how to quickly change the date on your local machine. To change the current date on your Mac, execute the following from command line: # Date Format: MMDDYYYY sudo date -I 06142024 This command does not modify time, only the current date. Using the same command to reset to current date is easy as well! The post How to Set Date Time from Mac Command Line appeared first on David Walsh Blog. David Walsh... more →
Posted in: JavaScript Tagged with: , , , ,

Case Insensitive CSS Attribute Selector

/ / No Comments
CSS selectors never cease to amaze me in how powerful they can be in matching complex patterns. Most of that flexibility is in parent/child/sibling relationships, very seldomly in value matching. Consider my surprise when I learned that CSS allows matching attribute values regardless off case! Adding a {space}i to the attribute selector brackets will make the attribute value search case insensitive: /* case sensitive, only matches "example" */ [class=example] { background: pink; } /* case insensitive, matches "example", "eXampLe", etc. */ [class=example i] { background: lightblue; } The use cases for this i flag are likely very limited, especially if this flag is knew knowledge for... more →
Posted in: JavaScript Tagged with: , , ,

PDF Embed Web Component Available Via NPM

/ / No Comments
Earlier this month, after being motivated by Thomas Steiner, I went through the not-really-a-hassle process of publishing <table-sort> to NPM. (Table-Sorter Available Via NPM) Today I’ve done the same for another web component, <pdf-embed>. This component wraps Adobe’s PDF Embed API, which, honestly, isn’t an API, but a JavaScript library to embed PDFs inline with the rest of your document. Given this HTML: <pdf-embed url="https://documentservices.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf" width="100%" height="500px" key="33f07f2305444579a56b088b8ac1929e"><p>Read our cool PDF <a href="https://documentservices.adobe.com/view-sdk-demo/PDFs/Bodea... more →
Posted in: JavaScript Tagged with: , ,

Adding Your Buttondown Email Stats to Your Website

/ / No Comments
I’ve been using Buttondown for almost a full year now (I blogged about the setup here). After having a few issues with Mailchimp and my newsletter, I was pleasantly surprised by how easy Buttondown was and how quick it was to set up. I ended up paying for it as I knew I’d end up paying for some solution and Buttondown worked great and wasn’t expensive. For a while now, I’ve had a custom-built stats page on my blog that’s primarily built for me. It reports on multiple different parts of my site and its biggest use is to let me quickly judge how well I’m keeping to my publishing schedule (a post a week). One stat it didn’t have that I’ve been checking... more →
Posted in: JavaScript Tagged with: , , , ,
1 … 24 25 26 27 28 … 104