Latest "Programming Hacks Used In This Site" files
private » Programming Hacks Used In This Site
Algorithms & Old Lace: LLM Poisoning For Personal Websites

Rage Against The Machine: Algorithms & Old Lace: LLM Poisoning For Personal Websites

Private AIs: They're Watching You

Last year my friends in an Indieweb meetup began to notice that information about them was turning up in LLMs... some comically inaccurate, some uncannily personal. As a group of personal website developers, we knew that much of the information must've been scraped of our website.

It might not be apparent reading my site, but I've always been a little careful about what information I allow about myself on the web. It's near impossible to prevent personal information from leaking out, and my name is unique enough that I'm not hard to find. I had an unfortunate incident with an online stalker a number years ago and since then have always been careful. I also once had a real-life harasser who broke into my home, although that was a much different and more complex situation. But together these made me aware that…

private » Programming Hacks Used In This Site

War And Precedence: Plugin positioning of unpositioned elements that aren’t yet positioned by later-loading stylesheets: A CSS Odyssey

So, I had a crazy problem. You'll notice that there's various draggable elements on this site... such as the "Kupietools" plugin tabs seen at left, the occasional "the site is being worked on right now" notices that pop up, etc. You can drag them around with your mouse.

This is done with a plugin (also available as a standalone javascript module, a few versions behind the plugin as I write this) that retrofits code onto various HTML elements by giving the plugin the classnames it needs to make interactive.

I was doing some optimization on the site loading to speed things up, such as getting WordPress to load a lot of CSS file late so as not to interfere with initial page load stats. (This is a whole art, beyond the scope of this article.)
Suddenly…

private » Programming Hacks Used In This Site
Easily embed this site’s content on other sites

For users: Easily embed this site’s content on other sites

This site allows you to get the content of posts and pages by adding either /embed/ or ?embed to the URL, optionally including the post title, author, and/or tags.

This was inspired by a discussion in an Indieweb Homebrew Website Club Europe/London online meetup. I want to say shadowy web standards advocate Tantek Çelik brought it up, so, as these things tend to happen, I coded it up here while we were talking. It's discussed on Indieweb's wiki at https://indieweb.org/embed.

What do you mean, 'Embed'?

Well, for instance, this post's permalink is https://michaelkupietz.com/?p=10887. You can see just the text of this post's content, without the sidebar and menus and other web page "furniture", at https://michaelkupietz.com/embed/?p=10887 or https://michaelkupietz.com/embed/?p=10887&embed, so you can theoretically include this page's content on your own site (long as you…

private » Programming Hacks Used In This Site
Non-render-blocking YouTube embeds in WordPress

Video Killed The Pagespeed Score: Non-render-blocking YouTube embeds in WordPress

On this site's Music Reviews page (itself built on-the-fly by a shortcode that sorts and displays posts from a "Music Review" custom post type), most of the reviews are accompanied by YouTube video embeds from the album in question.

What I didn't realize in setting that up is that YouTube embeds use [code][/code] tags to embed videos, and [code][/code] tags block page rendering—the page's onload property, which signals that the page is fully ready to display to the viewer and to remove the spinning "page loader" image I use on this site as pages load—does not fire until every iframe on the page has fully loaded its contents. This caused that page, which currently only has a handful of videos on it, to load very slowly. What's worse, this site's custom menus parse all page contents every time the site is updated to display for word counts,…

private » Programming Hacks Used In This Site
WordPress Shortcode & Function Performance Optimization with Transients

Optimization-A-Go-Go: WordPress Shortcode & Function Performance Optimization with Transients

I suffer from that paradoxical form of laziness peculiar to computer geeks where I will save myself save myself 15 minutes of work on something by spending 4 hours creating a shortcut. As such, the menus on this site are dynamically generated by traversing the category tree in PHP and laying out menus and submenus from categories and subcategories, sparing me the trouble of updating them manually as I add new content. This took some effort.

I created a shortcode that does this (well, modified a shortcode, originally from the Hierarchical HTML Sitemap plugin, by Alexandra Vovk & WP Puzzle) and soon my site was happily generating dynamic menus on the fly and keeping up with my work as I added pages, edited titles, and rearranged categories.

And, along the way, getting slower.

And slower. And slower.

Finally the other night, due to a confluence of circumstance,…

private » Programming Hacks Used In This Site
Adding A Default Featured Image Or Thumbnail In WordPress

All Thumbs: Adding A Default Featured Image Or Thumbnail In WordPress

What's a featured image in WordPress?

WordPress, the software this site runs on, works by allowing authors to enter web page content (sometimes officially called 'posts', as in a blog post, and which I often colloquially on this site refer to as an 'article') which it then formats nicely to display in web viewers. When you enter a post, it lets you specify a bunch of other information pertaining to it: category, some additional tags, a custom summary to show search engines, etc. Among the things it allows you to specify is a 'featured image', or 'thumbnail', an image representing that post.

You see featured images all over the site: in the backgrounds of individual pages, as tiny squares next to the menu entry for a page in the menus up top, on the "Related Posts" entries at the bottom of a lot of pages, or in…

private » Programming Hacks Used In This Site
WordPress Custom “Hero Header” Modifications

Used on this site: WordPress Custom “Hero Header” Modifications

This site uses the "Sinatra" free Wordpress theme as its base. Sinatra includes a single "Hero Header" the row of 3 animated featured posts on the home page which changes background images as you mouse over post titles within it.

I wanted this to be multi-row, a grid instead of just one row. The code natively contained an option to include up to 12 featured posts, which could easily be made to wrap around to new rows, but the problem was, the background of the entire section containing all rows changed when you moused over a post, not just the single row, and I wanted not just a row-by-row background, but I wanted potentially unlimited rows.

I moved the code that generates the rows into a function, and then called it repeatedly, once for each row I want. At some point I may make it automatically add as many rows…