social.tchncs.de is one of the many independent Mastodon servers you can use to participate in the fediverse.
A friendly server from Germany – which tends to attract techy people, but welcomes everybody. This is one of the oldest Mastodon instances.

Administered by:

Server stats:

3.9K
active users

Beko Pharm (deprecated)

Nothing warms my heart more than another website picking up the idea "Detect Missing Ad-blocker" of stefanbohacek.com/project/dete (after seeing it on mine in action).

It's made for WordPress but the idea is so dead simple that it can be integrated in almost anything with some work (if nobody else did that work already :D)

Edith says: This is blowing up. I have no Soundcloud (:P) but @stefan has a Support My Work page at stefanbohacek.com/support-my-w suggesting organizations to donate to 🫡

@bekopharm Oh wow, I had heard of this, but did not realize it actually works without JS – so it's feasible for my site, too! *_*

@bekopharm I'm probably gonna be super obnoxious about it tho and make it an unclosable overlay obscuring the entire page like I did back in the day when my site detected IE6. 😈

@phryk it does. JS is optional but there is no way to make it go away by saving a (functional) cookie so it does not show again and again.

That may not matter depending on your layout, of course 🙃

Keep in mind that website previews will start rendering that too.

@bekopharm That's awesome, thank you for spreading the word!

@n8chz @JonTheNiceGuy @bekopharm It's always fascinating (and very rewarding!) when one of my many niche and highly specific projects catches some attention.

@stefan @bekopharm Thanks, what a great idea!

In the CSS blocking test, shouldn't the `.ftf-dma-note.d-none` use `display:block`, so that if the CSS file isn't blocked, the div is visible?

Right now it would be hidden if the css file loads.

@billiam @bekopharm Thank you!

And yes, you are right, good catch! I fixed the blog post, and I'll also review the plugin version to make sure everything works fine there as well.

Really appreciate it!

@billiam @bekopharm So I had another look at this, and it's actually a bit trickier.

When the note initially loads, it has both the ftf-dma-note and d-none classes, and should be only visible if the external CSS file doesn't load, *unless* a cookie, which indicates that the visitor dismissed the notification during an earlier visit, is present.

The d-none class is removed if that cookie is not found, as seen here: github.com/stefanbohacek/detec.

GitHubdetect-missing-adblocker/src/scripts/detect.js at master · stefanbohacek/detect-missing-adblockerProvide a more secure experience to your website’s visitors. - stefanbohacek/detect-missing-adblocker

@billiam I think I figured out the correct order of styles rules now. (Not asking for you to review this, but feel free, if you find yourself bored!)

@stefan

Ahh I see. I think in the current implementation, the javascript is non-optional.

The block will always have the `d-none` class, and the priority of the inline style will win out, and the block will be displayed, regardless of whether the `nativeads.js.css` file loads.

For a javascript-less approach, you could:

Remove the default `d-none` class. Hide the block by default with the inline style, show the block with the external CSS.

@stefan Then for the JS file, you'd instead add `d-none` if the cookie exists, or the close button is clicked.

So the only changes are: Removing the `d-none` class in the markup, and adding via javascript (instead of removing).

@macdonst @bekopharm Nice! I'll be sure to link to it when it's published. Thank you for the heads-up!