Hi, I’m HenryZ.
This article discusses a pitfall that every front-end developer has encountered but often glosses over: the rel attribute of the <a> tag.
After reading this, you’ll be able to tell yourself: “From now on, whenever I use target="_blank", I’ll first write noopener and then add others as needed.”

1. Understand Two Things First

2. The Safety Duo: noopener / noreferrer

What does “cutting off window.opener” mean?
By default, the window.opener in a new tab points to the page that opened it.
With this “key to go back,” the new page can:

Hi, I’m HenryZ 👋.

In frontend development, we often encounter these requirements:

• Parent element styles depending on child element states — Such as navigation bars where parent <li> needs to highlight based on whether child <a> has .active.
• Layout changes with content — For example, CSS Grid containers switching column numbers when child elements exceed a threshold.
• Interaction-driven parent styles — During form validation, parent <form> changes state based on the validity of internal <input> elements.

Previously, these scenarios could only rely on JavaScript: traversing the DOM to query child elements, then manually adding classes to parent elements. This not only increased code volume but also scattered logic between CSS and JS, reducing maintainability.

🔍 Search Box Shortcut: Ctrl + K

Use Unix-like search command syntax.
For example, to search for articles containing both hello and world: 'hello 'world

Syntax Details:

• Space acts as a logical AND operator,
• Vertical bar (|) acts as a logical OR operator.
  To search for whitespace (escape whitespace), use double quotes. Example: '"hello world", to search for articles containing “hello world”.

Written by HenryZ