I’ve come to mostly enjoy the block editor in WordPress but it has a steep learning curve, in my opinion, for two main reasons, one of which is greatly helped by using the Wayfinder plugin.
Little bit of software for images
Christopher Murphy has this sweet little project, called Optimus, that works very well for certain use cases. You can find more information about it on his website christophermurphy.dev.
When position: sticky doesn’t work
I’m just adding this link here so I’ll be able to find it again.
https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working
A very good list of reasons why position: sticky might not be working, with explanations.
Grid With Columns of Equal Width
What:
I had a CSS grid with 5 columns that were supposed to all be the same width, except that one of them was bigger and I couldn’t figure out why.
The CSS I was using for the items in my grid was grid-template-columns: repeat(5, 1fr) and it clearly wasn’t working. Why not? And what to do about it?
robots.txt and AI web crawlers
An interesting article from The Verge on robots.txt and AI web crawlers and who is still respecting robots.txt. The comment section I thought was interesting too.
https://www.theverge.com/24067997/robots-txt-ai-text-file-web-crawlers-spiders
pointer-events
What
How to click, tap or select one HTML object through another.
For example: I had an image and I wanted to show a caption and a link to the photographer on hover, but I also wanted the image to be clickable to open a bigger version in a modal/lightbox. pointer-events makes that possible.
Setting localStorage to Control Pop-ups
I added a simple pop-up to every page of a website but I didn’t want to bother visitors who had already seen it, so I used localStorage to prevent the pop-up from showing again if people closed the pop-up.
Adding a Block Template to a CPT
If you have a WordPress website with an existing custom post type and you want to add a Gutenberg block template to be used for every new post of this custom post type there are two ways of doing this.
Background positioning
What:
How to position a background image relative to the bottom or right side of the screen
How:
.bgimg {
background-image: url('img.jpeg');
background-position: right 10% bottom 76px;
}The 10% is relative to the right of the screen, the 76px is relative to the bottom.
Reviving Flash (AS2) with Ruffle
In February of 2020 I started the cleanup and revival of an old website (read more about that in Joy, visit please-transfer.us) and all the way at the end of December I did a lot more cleaning up still. I removed old dead links, added some new treasures and cleaned up more old code.
What: I had come across an article on archive.org about reviving old Flash animations and games (AS2) with ruffle.rs and the process seemed simple and easy enough to be very tempting. I couldn’t resist.