Friend Links and the New Online Application System

Sat, 25 Jul 2026 16:20:00 +0200

This post introduces the site’s new friend-links feature and online application system, including how links are presented, what applicants should prepare, and which channel to use.

The Links page now includes a Web Neighbors section for independent websites and personal blogs that I read, revisit, and would happily recommend to other readers.

A Dedicated Home for Friend Links

Friend links are no longer presented as a plain list of names and URLs. Each site has its own card with a name, avatar, short description, and domain. Selecting a card takes readers directly to that website.

I have also added a dedicated Friend Link Rules page covering eligibility, required information, review, and ongoing maintenance. The application system is embedded directly in the Links page, so applicants no longer need to post a long set of details in the comments.

Why Use an Online Application System?

Applications previously arrived through comments or email, where formatting varied and important details such as an avatar, description, or reciprocal-link page could easily be omitted. Comments are public and are not a suitable place for contact details, while email mixed routine questions with complete applications.

The new system brings the process into one form with separate English and Chinese paths. It confirms the applicant’s preferred language and whether this site has already been added, then collects the website details needed for review. A consistent form reduces follow-up questions and makes it easier to assess every request against the same rules.

Open the Friend Link Application System

What to Prepare Before Applying

Friend links on this site are reciprocal. Before submitting the form, add this site to your own friend-links page and make sure that page is publicly accessible without signing in.

Please prepare:

Your website name;
Your website URL;
A one-line description;
An avatar or site-icon URL;
The public friend-links page where this site has been added;
An English name and description, if available.

If no English name or description is supplied, the English friend-links page will preserve the original wording rather than inventing a translation.

Which Websites Are a Good Fit?

The friend-links section is intended primarily for maintained personal websites and independent blogs. A site should be accessible over HTTPS, have a clear identity, and contain original content.

Your subject, technology stack, audience size, and publishing schedule do not need to resemble mine. Technology writing, personal notes, photography, reading, independent projects, and other genuinely maintained spaces are all welcome. Sites built mainly for advertising, copied content, malicious redirects, or anything that could put visitors at risk will not be accepted.

See the complete Friend Link Rules before applying. Meeting the rules does not guarantee acceptance, and there is no fixed review time.

Comments and Email Are Still Available

Comments remain open for discussion about posts and the site, but they are no longer an application channel. New friend-link requests and updates to existing entries should go through the online application system.

If you have trouble completing or submitting the form, email mr.jingyuan.zheng@gmail.com. Email is available for help with the process, not as the normal application route.

Welcoming New Web Neighbors

Links between independent websites may look simple, but they are one of the most meaningful relationships on the open web. They do not depend on a recommendation algorithm or a follower count. One person reads another person’s work and leaves a path for curious readers to discover it too.

If you maintain your own website, you are welcome to read the rules, add this site, and submit your details through the application system.

Visit the Links Page and Apply

An Apple-Style Web Clock Widget: Design Notes and Technical Details

Fri, 24 Jul 2026 20:00:00 +0200

This post explains how I designed and built the new Apple-style dual-time web clock on my homepage, from its visual decisions to the time-zone and rendering logic behind it.

The clock now sits directly below the search box on the desktop version of the homepage. It compares the visitor’s current time with “My time” using two analog dials, while deliberately avoiding a widget title, a personal name, or a country label.

It is a small addition, but it brought together more interesting problems than its size suggests: browser time zones, daylight-saving changes, analog geometry, light and dark presentation, responsive layout, bilingual text, and accessible live information.

The reusable source code is now available on GitHub: Jingyuan-Zheng/apple-style-web-clock-widget. The MIT-licensed repository includes a standalone demo, framework-free CSS and JavaScript, bilingual documentation, configuration examples, and tests for time-zone and hand-angle calculations.

A Familiar Interface Without Copying an App

The visual direction is clearly inspired by Apple’s clock interfaces: circular faces, thin hands, restrained typography, a bright orange second hand, and a rounded card with soft depth.

The goal was not to reproduce a specific Apple screen pixel for pixel. It was to borrow the qualities that make those interfaces immediately understandable:

the clock should be recognizable before any text is read;
the two time zones should feel related but remain visually distinct;
labels should explain only what the user needs;
decoration should never compete with the hands or numerals.

That is why the visible copy is reduced to “Your time” and “My time.” A heading such as “World Clock” would repeat what the two dials already communicate, while a personal name or country would add visual noise and expose more context than the widget needs.

One Instant, Two Wall Clocks

The most important technical decision is to treat both dials as two views of the same instant.

Every update starts from one Date:

`1`	`const now = new Date();`

The visitor’s zone comes from the browser:

1
2

const localZone =
    Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";

The second dial uses the time zone configured by the site. Both are passed through Intl.DateTimeFormat with formatToParts(), which gives numeric year, month, day, hour, minute, and second values for the selected IANA time zone.

This is safer than manually adding a fixed number of hours. A fixed +1 or +2 eventually becomes wrong when daylight-saving rules change. The Intl API lets the browser’s time-zone database resolve the applicable offset for the current instant.

Calculating the Time Difference

Displaying a wall-clock time is only half the job. The widget also shows the difference between the two zones.

For a target zone, the formatted wall-clock parts are reconstructed as if they were UTC:

const wallTimeAsUtc = Date.UTC(
    year,
    month - 1,
    day,
    hour,
    minute,
    second,
);

const offsetMinutes =
    Math.round((wallTimeAsUtc - currentSecond) / 60000);

The difference displayed under the second clock is then:

`1`	`targetOffsetMinutes - localOffsetMinutes`

This also handles half-hour and quarter-hour zones. The output formatter keeps one decimal place when necessary instead of assuming that every time-zone difference is a whole number.

Turning Time into Hand Angles

An analog clock is mostly geometry. A complete circle is 360 degrees, so each minute or second represents 6 degrees, and each hour represents 30 degrees.

1
2
3

const minuteAngle = minute * 6;
const hourAngle = (hour % 12) * 30 + minuteAngle / 12;
const secondAngle = second * 6;

The small minuteAngle / 12 term matters. Without it, the hour hand would jump abruptly from one number to the next. Including it makes the hour hand travel gradually as the minutes pass.

Each hand is a narrow positioned element whose transform origin sits at its bottom center:

1
2

transform: rotate(var(--clock-rotation));
transform-origin: bottom center;

JavaScript only updates the custom property. CSS remains responsible for the hand’s shape, length, color, and positioning.

The numerals use the same separation of concerns. Hugo generates twelve repeated elements, CSS rotates each one around the dial, and an inverse rotation keeps the numeral upright.

The Site Theme and the Dial Theme Are Different

The component has two independent kinds of appearance.

The outer card follows the blog’s light or dark theme so that it belongs naturally in the sidebar. The clock face, however, follows the time shown by that particular clock:

07:00–18:59 uses a light dial;
19:00–06:59 uses a dark dial.

This distinction was important. If the entire widget followed only the website theme, switching the blog to dark mode would turn a daytime clock dark as well. That would remove useful information from the visual design.

Because each dial evaluates its own zoned hour, it is possible—and intentional—for one face to be light while the other is dark.

Recalculate Instead of Counting

The widget refreshes once per second with setInterval, but it never treats the previous tick as the source of truth.

Each tick creates a fresh Date and recalculates every hand from the current system time. If the browser delays a timer because a tab is in the background, the clock corrects itself on the next update instead of accumulating drift.

This also means daylight-saving changes and system time adjustments are picked up naturally. The interval is only a request to repaint; it is not the clock’s internal timekeeper.

Hugo Integration and the Desktop-Only Decision

The widget is implemented as a local Hugo partial and registered immediately after the search widget in the homepage configuration. This keeps the structure modular: the search component remains unchanged, and the clock can be moved or removed through the widget list.

The HTML contains the semantic structure and bilingual labels. SCSS owns the card, dial, hands, numerals, and theme states. TypeScript owns time-zone conversion and live updates.

The open-source version removes the Hugo dependency and exposes the same ideas through standard data-* attributes, so it can be embedded in an ordinary webpage without a framework or build step.

The blog’s right sidebar appears only at desktop widths of 1024 pixels and above, so the clock does not consume space on phones. This is an intentional product decision rather than an unfinished responsive state. On a small screen, the article list and navigation are more important than a decorative time comparison.

Small Accessibility and Localization Details

Animated clock hands are not enough for assistive technology. Each dial therefore receives an updated accessible label containing its name, digital time, and time difference. The visible difference line is hidden from screen readers to avoid announcing the same information twice.

The labels and hour units come from the current Hugo language:

English: “Your time,” “My time,” “hour,” and “hours”;
Simplified Chinese: “你的时间,” “我的时间,” and “小时.”

Time calculations deliberately use Latin digits and a Gregorian calendar internally. Presentation text remains localized without making the numeric parsing dependent on a browser’s display language.

The main lesson was that a good widget needs boundaries more than it needs features.

I removed the title, personal name, country label, and mobile version. I separated website theming from day-and-night dial logic. I let the browser handle time-zone rules, while keeping the analog drawing in simple CSS and geometry.

The result is intentionally narrow: two clocks, one comparison, and no controls. That restraint is what lets it feel like part of the homepage instead of a miniature app competing with the rest of the site.

Small interface components are often where design and engineering meet most directly. Every extra label, timer, color rule, and breakpoint has an immediate visual consequence. Building this clock was a useful reminder that polish usually comes not from adding more, but from deciding what the component can leave out.

Site Updates on Jingyuan