Hawk's By Design

Advertisements…a user’s worse enemy.

Nothing ruins your perfect experience on a website more than a filthy advertisement in your face. Now, I understand the need to pay bills, thus justifying ads, but I still hate them.

So what can users do to fight websites that get money hungry and start plastering ads all over the place?

Enter AdBlock.

AdBlock

AdBlock is a browser plugin that…blocks ads. I use it with my Google Chrome browser, and it does its job quite well.

Whenever a page loads, AdBlock will have a number notification over it’s plugin symbol to tell you just how many ads it blocked on the page.

For example…let’s look as kissanime.ru with and without Adblock.

First…without.

A screenshot of KissAnime.ru without AdBlock

Yikes. That’s scary.

Now…witness the magic of AdBlock.

A screenshot of KissAnime.ru with AdBlock

That’s better.

Now, AdBlock will catch 95%, I’d say, of ads on any given page. However, it can miss some particularly crafty ads. No problem, AdBlock has a built in system that, with your assistance, will help it find and block any ads that get through the cracks.

Manually blocking an ad with Adblock on KissAnime.ru

Easy, right?

Well…some websites don’t like it when you block ads. For example, thechive.com really hates it. They hate it so much that they interrupt your entire experience to tell you they hate it. The only way they allow you to continue is to either pay them, or turn off your ad blocker.

Get AdBlock for Chrome here.

User CSS

This is where User CSS comes in. Now, if you aren’t in the web development field, you probably have no idea what this plugin does. So, let me try to quickly explain.

CSS is a web language responsible for all of the styling on the entire internet. All the pretty colors and shapes? CSS. Cool fonts? CSS. Showing and hiding stuff? CSS.

This plugin lets you write custom CSS that gets injected into the page you visit.

So…how does that help?

Well. With some very basic CSS knowledge we can, for example, get rid of that pesky modal.

Let’s do it.

So here is thechive.com’s page with AdBlock enabled…we get the mean modal.

TheChive homepage with modal, if viewed with an AdBlock

Now, after looking through the website, I found the selectors that handle that modal, and also the scrolling on the page. The CSS looks like this.

.body.tp-modal-open {
    overflow-y: auto !important;
}
.tp-modal, .tp-backdrop {
    display: none !important;
}

All we have to do is add that CSS to User CSS for the website thechive.com and, bam, problem solved.

TheChive homepage without the modal, thanks to UserCSS

Get User CSS for Chrome here.

Final Thoughts

It takes a little bit more work to get around websites that are becoming more and more greedy with advertisements, but we can still fight back. AdBlock and User CSS are just two simple tools that you can use.

Or…you can either support the site, which if you like the site you may consider doing, or just avoid the site altogether.

Personally, I love the fun cat and mouse game.

Happy web surfing.

Some more articles for you

Coding

February 16, 2021

Toggling Element’s Focus Outline Based On User Interaction

The focus outline adopted by every browser is a powerful tool for keyboard accessibility. It also, however, can be kind of annoying.

View post

Coding

August 20, 2019

Command Line Git: Init and Add Remote Repo

I'm a noob at command line git. So, here is how to initialize a local repo, add a remote repo, and push to that repo, all in command line.

View post