You gotta keep ’em separated

Folks, the monolith is gone. For a few days, we gazed upon its 3-sided shiny metal, but in the darkness of night, someone or something removed it. I don’t know about you, but I was thankful for the mysterious distraction during the horror show known as the year 2020. Now we must once again persevere, monolith-less.

This week’s newsletter highlights the importance of language separation for the web, how to protect WordPress from bad actors, more than you probably wanted to know about jump links and margins, and some other random stuff. Enjoy!

Why it’s good that HTML, CSS, and JavaScript are separate

HTML CSS and JavaScript logos

This past week someone proposed the unification of HTML, CSS, and JavaScript. It didn’t go well and for good reasons. Hidde de Vries wrote about why it’s good for users that HTML, CSS, and JS are separate languages.

At the core of the issue is the need to keep structure, style, and interactivity separate. It’s been that way since the beginning of the web, and it must remain that way. The article is short and informative. I encourage you to take the time to read it.

How to protect WordPress with Cloudflare’s Firewall

Cloudflare Firewall Rules
Cloudflare Firewall IP Access Rules

A few months ago, I noticed my Coywolf News articles were being translated into French and republished by a French news site. I saw it because their versions were competing with my original versions in Google News. Fortunately, I was able to put a stop to it using Cloudflare’s Firewall.

That process inevitably sent me down the rabbit hole of what else I could find and stop with their service, and what I found surprised me. In every case, including the recent site I set up on my home network to test out Cloudflare’s Automatic Platform Optimization, I discovered nefarious traffic that was up to no good.

After learning how to find bad traffic and permanently stop it, I wrote a Coywolf Pro article on how to protect WordPress with Cloudflare’s Firewall.

WebKit gets closer to supporting CSS margin spacing for jump links

I’m a big fan of jump (aka “anchor”) links. If you’re not familiar with them, it’s when you assign a unique ID to an element, like a heading.

<h2 id="bluecarrots">What's the deal with blue carrots?</h2>

You can then link to that element on the page by prepending the value with a hashtag.

<a href="#bluecarrots">Blue Carrots</a>

Jump links are most commonly used with a table of contents. For example, when I write lengthy articles, like my WordPress Performance and Speed Optimization Guide, I use the Yoast SEO Table of Contents block to automatically create a table of contents with links to the headings in the article. Not only does this make it possible for visitors to jump to the section they’re most interested in, but it also makes the article eligible for jump links in a Google snippet.

Jump links in Google search snippet
Jump links in a Google search result snippet

If your site has a heading or top bar that remains fixed when a visitor scrolls, it will cover up the element it jumps to. To fix this, it requires JavaScript or using CSS pseudo-elements to push the target element below the fixed area. The CSS I use is a hack, but it works.

article :target:before { content:"";display:block;height:7rem;margin:-7rem 0 0; }

Josh W. Comeau recently shared a standard CSS declaration that will accomplish the same thing.

h2 { scroll-margin-top: 7rem; }

Unfortunately, WebKit doesn’t support it. That means it won’t work on Macs, iPads, or iPhones. The good news is that it’s been added to the WebKit Nightly Build and should be supported the next time Apple releases a Safari update to all its users. When it is released, you still may want to wait at least a year before using the new declaration because it will take time for everyone to update their software.

Favorite tweet of the week

The tweet I liked the best this week was from The A11Y Project. They quoted Kim Krause Berg’s article discussing the absurdity of adding one line of code to magically make your site accessible and avoid ADA-related lawsuits. While she doesn’t mention the company providing that special line of code by name, it’s accessiBe.

The A11Y Project tweet

I liked the tweet because web developers should be striving to make their sites as accessible as possible, not slapping a temporary layer onto their site so they can kick the can down the road even further. Accessibility is an area where we all need to become better, especially me. But the way forward is prioritization and best practices, not dropping in a line of code and forgetting about it.

Unreal real landscape photographs

Landscape Photo
Miller Yao, International Landscape Photographer of the Year

Lastly, here’s something random but interesting that caught my attention this past week. The above photo, which I was initially convinced was an illustration or painting, was taken by Miller Yao, one of the top finalists for the International Landscape Photographer of the Year contest. New Atlas published 32 of the best images from the contest, and I think they’re breathtaking.