A blog about web development, handy tutorials, quick rants, thoughts, and everything in between.
The plan is simple: # I'll write some content ## I'll put it on the web And then I'll {% poison %} the shit out of any generative AI that tries to steal it. How to use Install the eleventy-plugin-poison with your favorite package manager. In your .eleventy.js config, add the following lines of code: const poison = require ( 'eleventy-plugin-poison' ) ; module . exports = function ( eleventyConfig…
This post is inspired by this post by Eric W. Bailey . Bad news everyone. The internet isn't dead like everyone was jokingly hoping for. It's not full of bots that post relatable content in an endless cycle until the JPEG artifacts make it either impossible to tolerate or impossible to relate to. It's not an endless money machine and it shows no signs of stopping any preexisting orphan crushing…
Imagine a world... Where the content your see... Is chosen... By you... Dramatic music montage Why is this novel? Seriously, I hate that this is actually something I'm so excited for! If you haven't seen, there is a new social media app called Cara . It is what you would expect for a volunteer based, artist oriented, clean-as-hell social media app. Similar to other microblogging services, with one…
For the longest time I wanted to be a writer. I loved reading as a kid, and I wanted to give that gift back to " the next generation " or whatever. To satisfy this dream, I started writing fan fiction (I won't link to it, but if you find it, congratulations), and it has been a joy. The site I have been posting to offers some analytics, but it is nothing deeper than a hit counter. The plan Using…
If you've ever had a client try to explain a bug, you know the inevitable and hardest question to answer is "What browser are you using?" What is navigator.userAgent ? Disclaimer I am no expert on the deep and horrid history behind the current userAgent string contents. I suggest checking out [this article by webaim to learn more.](https://webaim.org/blog/user-agent-string-history/) The User-Agent…
Just post stuff. Worst thing that's going to happen is no one reads it.
Everyone loves a good dark mode toggle, especially those of us who prefer working in the dark. When I wanted to implement this on my site, I was excited to see how simple it was to do with Edge functions. The example from the 11ty documentation had just one bummer. How do they work? Honestly? Not an expert, so take this with a grain of salt. It's like if a server only did one function when visited…
I was getting up to date on my RSS feed, and saw this post by Chris Coyier about a sticker that would mark your site as "Not By AI". Will this work? No, not really? Like there are plenty of signs in the world that people don't listen to. There isn't anything behind this other than signing up. I'm not "supporting" a sticker. Would something like this work? I mean, no. It would start an arms race.…
I posted about the tagCloud solution I coded up a little while ago, and saw some responses that were very inspiring. The main one being this one from Nicolas Hoizey . The idea of filtering tags by "must have at least x entries" was really a clever idea. Generating a component like that seems outside of the per-view of a plugin, in my opinion. So I want to give the ability to create one by exposing…
There is an update! I wrote this post on 11/16/2023, and since updated the package. To see what has been added check out the post here . I'm on a streak with creating things that I missed out on from the early Web 2.0 days. So buckle up, 'cause we're bringing back the tag cloud! This post is also available as a plugin here: npm install eleventy-plugin-tag-cloud What is it? A tag cloud is a page or…
Quick notice before you continue As of 11-1-2023 the following code seems to only work when run on local. Will update this post when I have a solution figured out. As of 11-13-2023 , it is working. I have updated the code below to match the code that is currently working. Remember Neocities? Remember Geocities ?? I missed out on that craze, but I love looking back on that style of website.…
The introduction of :has() and :where() has given CSS all of the "maybe some day" feature requests from the last 10 years (give or take). :has() is the proverbial "parent selector" and pseudo-functions like :where() and :is() make building complex selectors more concise. Use these carelessly though, and you may find yourself in a specificity pickle. What is specificity? Specificity is a concept in…
I was late to myspace, and when I got to Facebook, I was really on the cusp of it dying off. I enjoyed Tumblr, but it always felt like I wasn't contributing, only ever consuming. Twitter is was a place where you could shout into a void that would occassionally shout back. Was the shouting productive? No, but who said social media had to be. Mastodon, and other ActivityPub friends, have really…
I'm tired of writing my own front matter for my posts. It is so boring and I'm always afraid I'm going to forget an attribute. I am always a sucker for consistency. There are plenty of Content Mangement Systems (CMS) out there, especially for the JAMStack group of websites. Contentful, NetlifyCMS, others, I've set them up before and they're all good. It feels like too much when I'm the only one…
I wrote something like this the other day: const element = document . querySelector ( '#aVerySpecifcElement' ) ; element . addEventListener ( 'click' , doStuff ) ; But this wasn't enough for TypeScript. Why? Because when querySelector doesn't find anything, it returns null . That's not Element . My brain immediately went to fixing it like this: const element =…
As a kid I had anger issues, and counting to ten never really worked. I got into fights I didn't need to, and stuck my nose where it shouldn't go. The best teacher I ever had, hi Ms. Piorkowski, told me to ask myself these questions. Question 1 Does it need to be said? Cut the chaff from the wheat. Do you really, really, really need to say whatever it is you're about to say? I know you're heated,…
If you're not familiar with what an enum looks like, here you go: enum Direction { Up = 1 , Down , // 2 Left , // 3 Right , // 4 } References Enums - TypeScript Handbook They act as a collection of constants. This can be useful, especially if you are trying to have incredibly unique keys: enum DirectiveKeys { Skip = '__c_skip_me_' , Remove = '__c_remove_me_' , Add = '__c_add_me_' } const…
I was notified of this thanks to @pontus (if you are reading this, lemme know if you want better credit or whatever), apparently Feedbin's feed was rendering my posts incorrectly. In my code blocks, nothing was wrapping. All of my heading links were showing. What gives? No idea, here's how I fixed it though. First thing I had to do was make a filter, aptly named fixForFeedbin . It needs to do 2…
First thing to get out of the way is that each of these methods returns something different. .forEach only loops through the array it is called on. This means that it returns undefined . For .map , it returns a new array where each item is the result of the given callback. The much more complex method, .reduce , can return anything. The return type is determined by the second argument passed and…
It can be done. I'm calling it. This is as done as it is going to get , so I'm just calling it. "Just build websites" is the advice I'm following here. Well, that and "just press publish". I could wait, for the next framework, the next language, the next whatever. But I don't need to. 100% done? Eh, 98%? There is some performance stuff I'm not happy with (e.g. not 100's across the lighthouse…
I'm in the process of making a theme switcher for my site, this means messing with CSS custom properties. Checking and double checking contrast ratios, thinking up worth-while themes. As I was flipping through different themes though, I noticed at the very end of the inspector stylesheet a series of custom properties. :root { --arc-background-gradient-color0 : #D2F3E5FF ;…
I had a conversation with a coworker about the merits of using spread ... vs Array.from . While they look the same on the outside, they work differently. Iterable vs. Length If you want to spread something into an array, it needs to have a Symbol.iterator property. This means that the following Javascript will fail: const spreadObject = [ ... { user : 'jane' } ] ; Even though this would work:…
Plan Here's what I want from my theme switcher: Minimal Javascript CSS that is quick to update Custom Properties Local Storage How to achieve this? I have made a unilateral decision, it's going to be a web component. Why? Because they're useful, built in components, and I like them gosh darn it. Web components can get wordy though, looking at you attributeChangedCallback . Contemplating adding…
My name is Ginger, and I have problem. Anytime someone says "Do you think there is a website {x}.com?" I have to look it up. What's worse is the number I end up registering. Instead of dealing with that issue, I've decided to enable all my fellow domain addicts. So what is it? It is a list of all the active top level domains, like .com , .net , .lol . It comes with filtering and search. No more do…
For the uninitiated, a gameplay loop is a "mechanic" in video games that keeps you coming back. As a living medium they have an opportunity that books, movies, and tv shows don't get. What is Monster Hunter? Monster Hunter is like Pokemon, except instead of cute little monsters, you fight giant ones. And instead of capturing them, you hunt them. What is the gameplay loop? This is what I'm having…
I am rounding the 10 hour mark on Starfield and I'm very much enjoying it. It is definitely a Bethesda game set in space, and not "Skyrim In Space" . A well polished set of yoinks and twists from their previous games. It is going to be a major contender for GOTY 2023. Spoiler Warning I'm not going to be spoiling any of the major beats of the game that I've hit so far. To keep it as vague as…
Recently ChatGPT released an update that lets websites opt out of their crawler crawling their site. Add some simple text to your robots.txt file and when the crawler finds your site, it will stop and move onto the next site it finds. But this should not be lauded. Unfortunately we live in a where being tracked is the default. There's too many examples, and most of them go unnoticed. Take cookie…
Checking the inputs that matter I needed to check whether an input was valid. I could check only the old faithful: input . validity . valid === true Problem is I needed to check this input alongside inputs I need to ignore. Those types being hidden, password, and search. If I was using Vanilla JavaScript, I would add a property to the input element; input . __ignore = [ 'hidden' , 'search' ,…