DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

World Clock vs. Timezone Calculator: Why Browser Extensions Win

#productivity #firefox #javascript #webdev

Every developer who works with distributed teams has felt the pain: it's 9:15am and you need to schedule a meeting. You open a timezone converter, switch between tabs, do the math, close the calculator. You do this 5 times a day.

There's a better way.

The Problem with Current Solutions

Dedicated timezone apps (like World Time Buddy, Every Time Zone) are great for scheduling, but they require navigation to a separate website. That's a context switch.

Your OS clock shows one timezone. You can add multiple clocks on macOS/Windows, but they're buried in menus.

Google's timezone tool requires typing a search. Another context switch.

Browser extension clock widgets appear every time you open a new tab. Zero navigation required.

What a New Tab Clock Should Show

Here's what I found myself actually needing:

San Francisco:  9:15 AM  Wednesday
New York:      12:15 PM  Wednesday  
London:         5:15 PM  Wednesday
Tokyo:          2:15 AM  Thursday  ← crossed midnight!
Enter fullscreen mode Exit fullscreen mode

That day-change indicator is critical. Seeing that it's Thursday in Tokyo when it's Wednesday here prevents the "oh no, they're asleep" mistake.

Technical Implementation

The JavaScript Intl API makes this surprisingly clean:

function formatClock(timezone, label) {
  const now = new Date();

  const timeFormatter = new Intl.DateTimeFormat('en-US', {
    timeZone: timezone,
    hour: 'numeric',
    minute: '2-digit',
    hour12: true
  });

  const dateFormatter = new Intl.DateTimeFormat('en-US', {
    timeZone: timezone,
    weekday: 'long',
    month: 'short',
    day: 'numeric'
  });

  return {
    label,
    time: timeFormatter.format(now),
    date: dateFormatter.format(now),
    isNextDay: isNextDay(timezone)
  };
}

function isNextDay(timezone) {
  const local = new Date();
  const remoteDate = new Date(local.toLocaleString('en-US', { timeZone: timezone }));
  const localDate = new Date(local.toLocaleString('en-US'));
  return remoteDate.getDate() !== localDate.getDate();
}
Enter fullscreen mode Exit fullscreen mode

The Intl.DateTimeFormat API handles all the timezone conversion natively. No libraries needed.

Picking Timezones

The IANA timezone database is the standard. Some common IDs:

const COMMON_ZONES = {
  'US/Pacific':  'America/Los_Angeles',
  'US/Eastern':  'America/New_York',
  'London':      'Europe/London',
  'Central EU':  'Europe/Berlin',
  'India':       'Asia/Kolkata',
  'Singapore':   'Asia/Singapore',
  'Tokyo':       'Asia/Tokyo',
  'Sydney':      'Australia/Sydney'
};
Enter fullscreen mode Exit fullscreen mode

Note that Asia/Kolkata (India Standard Time) is UTC+5:30 — a non-whole-hour offset. The Intl API handles this correctly.

Building a Searchable Timezone List

One UX challenge: letting users pick timezones. The full IANA list has 600+ entries. You need to show common ones and allow search.

// Simplified searchable timezone picker
function searchTimezones(query) {
  return Intl.supportedValuesOf('timeZone')
    .filter(tz => tz.toLowerCase().includes(query.toLowerCase()))
    .slice(0, 20); // limit results
}
Enter fullscreen mode Exit fullscreen mode

Intl.supportedValuesOf('timeZone') returns all IANA timezones supported by the browser. In modern browsers this is comprehensive.

The New Tab Advantage

The reason a clock belongs in your new tab specifically:

  1. You open a new tab naturally when starting a task
  2. The moment before you start doing something is when you're most likely to think "I should check if Tokyo is awake"
  3. Zero friction — the info is just there

Weather & Clock Dashboard implements exactly this. Multiple configurable world clocks with timezone labels, updating every minute, visible every time you open a tab.

The source code (MIT) is on GitHub. The timezone implementation is in dashboard.js if you want to see a working example.

Top comments (0)