Did you see this Facebook crap?
"Why do I need a 4Ghz quadcore to run facebook?" This is why. A single word split up into 11 HTML DOM elements to avoid adblockers. pic.twitter.com/Zv4RfInrL0
— Mike Pan (@themikepan) February 6, 2019
I popped over to Facebook to verify that and what I saw was a different and even more nested mess:
They are trying to fight your ad blocker browser extension. Of course they are. I’m sure at their scale not doing this means losing millions of dollars. But I wonder if it’s really losing money when you factor in losing trust, and potentially losing people on the platform entirely.
It just feels so rude, doesn’t it? Like a user specifically installs technology onto their computer in order to exert some control over what they allow onto their computers and into their eyeballs. And they are saying, “No, we do not respect that choice. We are going to fight your technology with our technology and force feed this stuff onto your computer and your eyeballs.” Doesn’t sit right.
I’m not unaware that ad blockers have ad adverse effect on the ability for websites to make money. That’s quite literally how I make money. But I don’t want to do it fighting and at the expense of breaking trust. I want to do it gracefully while building trust.
Anyway.
I wonder what writing HTML to help ad blockers would look like instead:
<!-- start: advertisement -->
<div class="ad sponsor paid" id="ad-1" data-ad="true">
<div>Sponsor:</div>
<a href="https://sponsor.com" rel="nofollow">Company</span>
</div>
<!-- end: advertisement -->The good ones have been doing it for ages.
This span-based lettering stuff makes me think of libraries like Splitting.js and Lettering.js that break up text into individual <span>s for styling reasons.
Turns out that doesn’t affect on-page search (i.e. if you search for “dog,” you’ll find <span>d</span><span>o</span><span>g</span>), but it does affect some screen readers in that they will treat each letter distinctly, which can result in pretty awful audio output, like pauses between letters where you wouldn’t expect or want them.
It’s totally solvable though!
I just read about how powerful aria-label is via Web Platform News, quoting Amelia Bellamy-Royds:
An
aria-labelattribute on a button or link effectively replaces the text content of that element with the new label.
It was cool to see that’s what Lettering.js does by default! And Splitting.js is figuring out the best method for them, which involves aria-label.
Oh, and as ever, ::nth-letter() would be cool. 2018 recap of a 2011 request.
I will await Facebook’s response which will probably go something like this:
“We are sorry, we made a mistake, we broke your trust. We promise to respect users privacy, data and browser going forward.”
…for the umpteenth time…
I said good bye and good riddance to Facebook a while back. Instagram is next on the chopping block.
I am starting to feel like an ethics class should be mandatory instruction for new developers, so that developers can learn a moral code on what is morally correct to do to their user’s computer, browser and data.
Just because you technically can do something doesn’t mean you should do something.
The times are so ready to stop using Facebook forever. All the leaks. All the repeated excuses. All the privacy breaches. Never any change about it. Not only is this really bad, in fact it is a tremendous waste of energy. Instead of having 1 element there are 11 in this case. Imagine an ad with 15 words, each having about 5-8 letters, so this then would be 75 to 120 elements to download instead of just 15. Sure you might think, ah it is just a bit of HTML, think again, this over the entire network is a terrible waste of energy. Never been on FB and never will be. What seems to be so hard about stopping to use this service?
One could argue that users or tools modifying your code and lowering your standard of life (when you are a small content provider) is kind of rude, too.
I wonder if there’s any potential legal issues with what Facebook is doing.
That “Sponsored” label is a legal requirement but if it’s unreadable for users relying on screen-readers, shouldn’t that word splitting be banned for legal reasons?
Sorry, Chris, I know this is a web dev website and not a legal one but maybe you have an opinion on the subject?
It’s understandable that some people have no desire to see ads, but you need to realize that social media generate revenue through ads. Otherwise they won’t be able to carry on their businesses and let you use their services.
At the end of the day, those ads haven’t become too excessive that you have to block them.
In my opinion, using their services and blocking/blaming their reasonable ways of generating revenue is kinda rude and selfish.
Well. Until ad-blockers will start using
aria-labelinstead, which can be a thing pretty soon (if it isn’t already).Point is… Facebook isn’t using it for that mish-mash of letters, is it?
Most times I forget that i even have an adblocker running and get remembered on a news page if I could it turn it off please. I guess most users who use an adblocker is because they have no idea and someone installed it (like my on my dad’s laptop) and the other users that got frustrated about the ads that pop right in your face and you have to search the closing button or better, the closing X appears after a timeperiod …
So my tips as a user to sitehosters:
1. Make users aware they are using an adblocker
2. Tell them why you need ads on your website
3. Show them how to whitelist your site
!! Most important, don’t use pop-up ads or fullscreen ads.
This shows Facebook’s stance towards user privacy and making money off the data they harvest. It’s very bad they do this, but I can’t say I’m surprised one bit. Ad blockers are a necessity in this day and age.
I don’t understand why ads have to be embedded inside content or follow you around the page trying to get you to click. All it does is harm the user’s experience, clutter the page and make you want to leave and not come back.
I also never click ads. It’s hard to tell if they’re genuine and/or pose a security risk anymore. Relying on ad revenue to support your business means you’ll probably have to resort to these tactics at some point I’m sure.
“It just feels so rude, doesn’t it?”
To whom? Not to normal users that’s for sure. The only people who will ever see this code are people trying to write ad-blocking software, who are literally trying to take money out of the pockets of publishers like you. Screw them.
“Like a user specifically installs technology onto their computer in order to exert some control over what they allow onto their computers and into their eyeballs. And they are saying, “No, we do not respect that choice.”
Only on their own website. If you don’t like it then don’t use Facebook. Advertising is how they pay their bills, you can’t have the service without the ads.
Oh, and I have to say, I’m absolutely sick of seeing ads for monday.com and Wufoo. I know exactly what they are and have no need for them in my life but I still wouldn’t consider using an ad-blocker on CSS tricks and depriving you of your revenue stream. That would just be incredibly rude.
Please, no ::nth-letter
No one will be able to agree on what a “letter” is.
The existing :first-letter already breaks in some people’s minds because a letter is not a letter is not a letter.
They are probably not aware of
element.textContent. :DWhat an interesting age we live in with tech! With Facebook being so awful with data privacy and this invasive about stopping Ad Blockers, yet React being so big. I believe these kind of practices alone will cause Vue to takeover completely (if they haven’t already)
“But I wonder if it’s really losing money when you factor in losing trust, and potentially losing people on the platform entirely.”
The millions of people that view the ads vs the thousands of people that will even understand the issue and in some cases still choose to use the platform — not a chance.