Let's say you've got to position some element at the top of a page but that its top property will have to vary depending on the existence a couple other items that might also be up there. For instance, you want to position: sticky a menu bar but you have to contend with the possible presence of an announcement banner as well as the WP admin bar.
Tag: js
You may not need to throttle your JS event handlers
Your heart may be in the right place. There's no point in thrashing the CPU for events like mousemove and scroll that are theoretically going to fire hundreds of times per second, right? But have you checked whether or not your throttling is actually necessary?
Keep on readin' on You may not need to throttle your JS event handlers⟶
Add domain name to every site's root class list
As a purveyor of userstyles, I found myself wanting to change a tiny thing here or there on various sites without giving them each their own tiny stylesheet. I also didn't want to start adding random selectors to a global stylesheet and identifying them by comment; I wanted to identify sites by their domain, e.g. html.apnews-com and keep all styles for that site nested underneath. In order to do this, I think a userscript needs to be involved.
Keep on readin' on Add domain name to every site's root class list⟶
Enqueue inline JS at the WordPress footer hook
WooCommerce has a handy function you might like to include in your toolbag even when that plugin isn't in play: wc_enqueue_js(). It takes a string of JS code, wraps it in jQuery, outputs it in the footer of your site, and runs it when the DOMContentLoaded event fires. Neat? I guess!
Keep on readin' on Enqueue inline JS at the WordPress footer hook⟶
Add a word count to Wikipedia articles
One day not too long ago I decided to read the entire list of common misconceptions on Wikipedia. Since then it has unfortunately been split up into multiple separate articles, but at the time it was one exceedingly long page that topped out around some 25,000 words and took me at least two hours to work my way through.
Extend MutationObserver replacement with promises
Remember that silly thing I did a couple posts ago to avoid looking for DOM changes properly for no particular reason other than not wanting to deal with the syntax of it? Let's take it another step by adding promises to the mix. If it's a step in the wrong direction but objectively makes it better, is it still wrong?
Keep on readin' on Extend MutationObserver replacement with promises⟶
A simpler alternative to the handy MutationObserver
Don't get me wrong: MutationObserver is a great addition to JS, but I find its API a bit clumsy and verbose. I always forget the specifics of its parameters and have to go look them up. Sometimes you just want to write simpler code without needing a reference, you know? Whenever I feel like I have a MutationObserver problem brewing, I go "Dang it!" and consider my options.
Keep on readin' on A simpler alternative to the handy MutationObserver⟶
Add the account age to Bluesky profiles
One thing you may notice after transitioning from Twitter to Bluesky is the lack of a "joined" or account-creation date on someone's profile. It's not like that data isn't tracked, but for whatever reason it's not displayed. I decided to display it.
querySelector() gotchas
There are two handy querySelector() methods in JS for digging elements out of the DOM for manipulation:
Pulling your color palette from theme.json into ACF color pickers
I'm not sure why ACF doesn't do this by default as it seems like something of a no-brainer. If a given theme has a color palette set, why wouldn't the user want that palette available in each color picker? Seems like an obvious and easy win to me.
Keep on readin' on Pulling your color palette from theme.json into ACF color pickers⟶