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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

CSS Columns Across Browsers

What: When using CSS columns, the content doesn’t always line up at the top of each new column. The more columns you have, the more likely you are to run into this problem, especially if you’re using column-fill: balance. And the problem seems to happen in Chrome-based browsers, in Safari and in browsers on iOS.

Read more

The use of React complicates front-end build. We have very talented front-end developers, however, they are not React experts – nor should they need to be. I believe front-end should be built as standards-compliant HTML/CSS with JavaScript used to enrich functionality where necessary and appropriate.

Simon R. Jones, Studio 24 talking about developing for Gutenberg

Restricting Access to Content in WP

A few notes on how to restrict access to content in WordPress, both for anonymous visitors and logged-in visitors with a specific user role, by using wp_safe_redirect().

Read more

WP Media Library Front-end Gallery

Using a WordPress loop to pull images directly from the WordPress Media Library and displaying them with a shortcode.

A crucial part of filtering the images you want to show from the rest of what is in your media library is done by attaching a taxonomy to the media library items. This has the added benefit of creating the foundation needed to allow for filtering of the gallery on the front end as well.

Filterable Gallery that pulls images straight from the media library

Read more