background
E
v
O
f
r
v
}
$
9
m
A
{
3
J
p
5
o
H
;
n
6
X
}
Y
C
U
W
v
1
x
T
L

favicon
favicon
Reverier's Blog
 

A Few Frontend Web Development Principles

Reverier-Xu at 2022-12-12 02:59:46 Web Development CC-BY-NC-SA 4.0

Some quick notes. I will keep updating this over time.

Follow the system theme by default

If a web app offers theme switching, the default theme should follow the system or browser preference.

You can detect the browser or system preference with a snippet like this:

const isDarkMode =
  window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: dark)").matches;
// ...

Keep language usage consistent

Good i18n support matters, but do not translate established terminology or domain-specific conventions just for the sake of translating everything.

It is common to restyle links so they stand out better against the page theme, but people often forget to style visited and unvisited links differently. That hurts accessibility.

a {
  color: #0078d6;
}
 
a:visited {
  color: purple;
}

Preserve outlines for interactive elements

When a user tabs to an element with the keyboard, there should be an outline or some other clear visual cue showing that the element is focused.

Content pages need stable URLs

Some single-page applications switch between screens without updating the URL. That makes refreshes, bookmarking, and link sharing much worse than they need to be.

Do not gate the site by User-Agent

If other browsers can render the page just fine, do not block them anyway. Looking at you, certain campus portals.

Change the cursor for interactive elements

Not everything clickable should look like a static arrow.

Browsers support hover previews, middle-click to open in a new tab, and plenty of other built-in navigation affordances. Do not replace ordinary links with piles of divs and JavaScript location rewrites everywhere. Looking at you, Bilibili.

Let users select content text, but not control labels

Text that exists to present content should generally be selectable with the mouse. Looking at you, Chaoxing. But text inside action controls usually should not be selectable, because selection there tends to make the UI look broken.

Put submit actions inside actual HTML forms

For form-based pages, the submit button should be part of the form so keyboard navigation with Tab works naturally.

If the implementation supports it, pressing Enter to submit once the form is complete can be a good experience. But do not allow Enter to submit half-finished forms, because that tends to be frustrating rather than helpful.

More later…

If I think of more, I will add them here.