If you're already using an ad blocker, did you know you can use it to block other elements of a page besides ads? I'll pick on Travis CI for a minute here, to show how it works. I get easily annoyed with cutesy nonsense that doesn't add value, like ascii art in log files and animated doodles in search.

Lately, I've been using Travis CI a lot, and I can't help but notice a logo that flashes between page loads that serves no purpose. The pages load so fast I just see something flash by for a fraction of a second, and it's more distracting than anything. It may seem pedantic, but there's no reason we can't modify our environment to our liking.

How do I find which elements to block?

Firefox and Chrome include some nice dev tools that can show you all kinds of information about the page your viewing, including what it's loading and what it's currently displaying. Here's the official docs for Chrome and Firefox if you're interested - there's a lot of good info in there.

Elements that appear only briefly

Let's start with resources (like images) that disappear. We can find out what they are by using the "Network" tab.

  • For Chrome on Mac, press "Cmd+Opt+I" and select the "Network" tab.
  • For Firefox on Mac, press "Cmd+Opt+E" to go directly to the "Network" tab.
  • On Windows, I don't know the shortcut so just right-click on a page and choose "Inspect" to open the tools.

Using Firefox as an example (but the process for Chrome is similar), click on the "Network" tab, open (or reload) a site and click on the "Images" subtab to see all the resources being requested. Some pages request tons of images, scripts, etc.

network-load-logo-a
network-load-logo-b

A 200 means "ok", while a 304 indicates the image was downloaded previously and hasn't changed, so there's no need to "get" it again. Using Travis as an example again, here's a list of all the images that might momentarily flit by.

https://travis-ci.com/images/logos/TravisCI-Mascot-1.svg
https://travis-ci.com/images/logos/TravisCI-Mascot-2.svg
https://travis-ci.com/images/logos/TravisCI-Mascot-3.svg
https://travis-ci.com/images/logos/TravisCI-Mascot-4.svg
https://travis-ci.com/images/logos/Tessa-1.svg
https://travis-ci.com/images/logos/Tessa-2.svg
https://travis-ci.com/images/logos/Tessa-3.svg
https://travis-ci.com/images/logos/Tessa-4.svg
https://travis-ci.com/images/logos/Tessa-pride.svg
https://travis-ci.com/images/logos/Tessa-pride-4.svg
https://travis-ci.com/images/logos/TravisCI-Mascot-pride.svg
https://travis-ci.com/images/logos/TravisCI-Mascot-pride-4.svg

Elements that stay on the page

If the element sticks around, like an annoying banner or sidebar, you can hover over the element, right-click on it, and choose "Inspect" from the popup menu. That will open the same dev tools again, this time to the "Elements" tab, and jump down to wherever the element is on the page. You can grab its ID or the full file path like above.

How do I block elements of the page?

Once you know what element you want to hide, you have a few options. You could use css properties to hide elements, like display, visibility or even opacity. You could use JavaScript to remove (or replace) elements after the page loads.

Using an ad blocker

You could also make use of an ad blocker tool like Adblock Plus. If you use a different extension, you'll probably find with a little poking around that it supports something very similar.

Open the settings, go to "Advanced" and type a URL or pattern that you'd like to block into your custom "filter list". In my case, I pasted the above logo paths. I could've just made one entry that ended in /logos but I have no idea if there's anything else in that directory that I might not want hidden.

adblock-plus-filter-logos

If you're interested, there's a lot more info on creating custom filters in the Adblock Plus official docs.

How do I know the ad blocker is working?

Just open the same "Network" tab in the developer tools again, but this time go to the "Adblock Plus" tab under it. Reload the Travis CI page and look for an entry for one of the logos. You can see where the extension is blocking the resource for you!

network-inspector-adblock-plus

Stylus

Stylus is another good option. Grab it for Chrome or Firefox, and create a new style that hides whatever element(s) you're interested in. Stylus lets you apply CSS styles to change the look and feel of any website you want.

After you install it, visit the site you're interested in, then click the extension shortcut and click on the link under "Write style for".

Now if we assume the logo image is inside an element like this (I don't know that it is) then you can simply use logo { display: none; } in Stylus to hide the element.

<div id="logo">
    <img src="/images/logos/TravisCI-Mascot-1.svg" alt="Travis CI mascot">
</div>

I think this extension is more user-friendly than adding patterns to an ad blocker, but an ad blocker will actually prevent an image from ever being downloaded, whereas Stylus simply hides it. Either way gets the job done though!