JavaScript ile Çoklu Zaman Dilimi (Timezone) Yönetimi: Aklınızı Kaybetmeden Dünya Saati Yapmak

Online Alarm Clock — Fri, 03 Apr 2026 06:40:22 +0000

Frontend geliştiriciler olarak tarih ve saat işlemleriyle uğraşmak, kariyerimizin bir noktasında mutlaka başımızı ağrıtan bir konu olmuştur. Özellikle global kullanıcıları olan bir uygulama geliştiriyorsanız veya Amerika Birleşik Devletleri gibi tek bir ülke sınırları içinde bile birden fazla saat dilimi (ve eyaletlere göre değişen yaz saati uygulaması) olan bir yapıyı kurguluyorsanız, JavaScript'in standart Date objesi genellikle yetersiz kalır.

Geçtiğimiz günlerde, kullanıcıların farklı ülkelerdeki anlık saatleri takip edebileceği, tarayıcı tabanlı bir araç geliştirirken bu meşhur "Timezone" kabusuyla yüzleştim. Bu yazıda, projeyi ağırlaştıracak devasa kütüphaneler (örneğin Moment.js) yüklemeden, modern JavaScript API'leri ile bu sorunu nasıl çözdüğümü ve performansı nasıl optimize ettiğimi adım adım anlatacağım.

Problem: Neden Sadece new Date() Yetmiyor?

Eğer sadece kullanıcının yerel saatini göstermek isterseniz new Date() harika çalışır. Ancak kullanıcınız Türkiye'de yaşarken ona anlık olarak Amerika'nın farklı bölgelerindeki saati göstermek isterseniz işler anında karışır.

Çünkü bu basit görünen işlemin arkasında şu hesaplamalar yatar:

İlgili şehrin veya eyaletin UTC/GMT sapması (Offset).

O eyaletin Yaz Saati Uygulamasına (DST - Daylight Saving Time) geçip geçmediği (örneğin Arizona'nın büyük bir kısmı DST uygulamazken, komşusu Utah uygular).

Sunucu saati ile istemci (kullanıcı) saati arasındaki uyuşmazlıklar.

Çözüm: Intl.DateTimeFormat API'sinin Gücü

Neyse ki modern tarayıcılar artık Internationalization API ile birlikte geliyor. Bu harika API, saat dilimi dönüşümlerini ve yaz saati karmaşasını bizim yerimize işletim sistemi veri tabanına (IANA timezone database) dayanarak arka planda çözüyor.

İşte belirli bir zaman dilimindeki saati en doğru şekilde almak için yazdığım temel fonksiyon:

/**
 * Belirtilen IANA zaman dilimine göre anlık saati döndürür.
 * @param {string} timeZone - Örn: 'America/New_York'
 * @returns {string} - Formatlanmış saat (Örn: "14:30:45")
 */
function getLocalizedTime(timeZone) {
  const options = {
    timeZone: timeZone,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false // 24 saat formatı kullanmak için
  };

  // Formatlayıcıyı oluştur ve mevcut anı (new Date) geçir
  const formatter = new Intl.DateTimeFormat('tr-TR', options);
  return formatter.format(new Date());
}

Örnek Uygulama: Amerika Kıtası Saatlerini Hesaplamak

Amerika, kıta içinde 4 farklı ana saat dilimi kullanıyor (Eastern, Central, Mountain ve Pacific). Yukarıdaki fonksiyonumuzu kullanarak bu bölgelerin anlık saatlerini çok rahat çekebiliriz:

// New York (Doğu Zaman Dilimi - EST)
const timeNewYork = getLocalizedTime('America/New_York');
console.log(`New York Saati: ${timeNewYork}`);

// Chicago / Texas (Merkez Zaman Dilimi - CST)
const timeChicago = getLocalizedTime('America/Chicago');
console.log(`Chicago Saati: ${timeChicago}`);

// Los Angeles (Pasifik Zaman Dilimi - PST)
const timeLosAngeles = getLocalizedTime('America/Los_Angeles');
console.log(`Los Angeles Saati: ${timeLosAngeles}`);

Performans İpucu: DOM'u Saniyede Bir Yormamak

Eğer ekranda saniyeleri de akan canlı bir saat yapıyorsanız, ilk akla gelen çözüm setInterval ile her saniye getLocalizedTime fonksiyonunu çağırmaktır. Ancak Intl.DateTimeFormat objesini her saniye yeniden oluşturmak hafıza (memory) ve işlemci açısından maliyetlidir.

Bunun yerine şu optimizasyonu kullandım:
Sayfa yüklendiğinde Intl API'si ile net saati (saat, dakika, saniye) bir kez çekiyorum. Ardından saniyeyi basit bir JavaScript değişkeni olarak her saniye 1 artırıyorum. Sadece dakika değiştiğinde (saniye 59'dan 00'a geçerken) senkronizasyon için API'yi tekrar çağırıyorum. Bu sayede tarayıcıyı hiç yormadan akıcı bir deneyim elde ediyorum.

Canlı Örnek: Bu Mantığı Nasıl Bir Ürüne Dönüştürdüm?

Öğrendiğim bu yöntemleri ve performans optimizasyonlarını sadece test etmekle kalmadım; tamamen tarayıcı tabanlı çalışan, sıfır gecikmeli bir Dünya Saati aracı geliştirdim.

Özellikle arama motorlarında sıkça aratılan anahtar kelimeleri hedefleyerek, kullanıcıların kafa karışıklığı yaşamadan anında cevap bulabileceği dinamik sayfalar oluşturdum. Eğer bu kodların canlıda nasıl çalıştığını, arayüzde (UI) nasıl render edildiğini incelemek isterseniz projeme göz atabilirsiniz:

Tüm Amerika kıtasının saat dilimi haritası ve canlı saatleri için: Amerika'da şu an saat kaç
Doğu yakası için geliştirdiğim spesifik araç: New York saat kaç
Batı yakasındaki saat farkını gösteren araç: Los Angeles saat kaç

Tarih ve saat işlemleri için dışa bağımlılığı azaltmak, uygulamanızın yüklenme süresini (bundle size) inanılmaz derecede rahatlatıyor. Siz kendi projelerinizde Timezone hesaplamaları için hangi yöntemleri veya optimizasyonları kullanıyorsunuz? Dış kütüphanelere (date-fns, dayjs vb.) hala mecbur hissediyor musunuz?

Yorumlarda buluşalım!

Building a Distraction-Free, PWA-Ready Online Alarm Clock in 2026 ⏱️

Online Alarm Clock — Tue, 24 Mar 2026 08:43:11 +0000

If you search for an "online alarm clock" or "timer" today, you'll probably land on websites that look like they were built in 2010. They are usually filled with intrusive ads, lack native dark mode, and drain your laptop battery with unoptimized scripts.

As a developer, I got tired of this. I just wanted a simple tool to set my Pomodoro timers or morning alarms without going blind from an all-white screen.

So, I decided to build my own solution: OnlineAlarmClock.io.

The Core Idea: Simplicity & Speed
When building utility apps, the most important metric is how fast a user can complete their task. I focused on three main pillars:

Native Dark Mode: A sleek, distraction-free UI that doesn't hurt your eyes, whether it's 2 PM or 2 AM.

PWA Support: You can install the site as an app on your desktop or mobile device. It works smoothly in the background.

Task-Specific Routing: Instead of forcing users to navigate a complex menu, I built specific URLs for common needs. For example, if you just want a quick focus session, you can directly go to the 25-Minute Timer page and it starts instantly.

Tech Stack & Performance
The goal was to keep the DOM incredibly light. By leveraging modern web APIs, the alarm will ring consistently even if you switch tabs. The Screen Wake Lock API ensures your device doesn't go to sleep while you are tracking your study or cooking time.

I also recently submitted a Chrome Extension to make accessing the timer even faster.

Feedback Welcome!
I'm currently treating this as an open learning project and trying to optimize its performance further. If you have a minute, check out the live site and let me know how the UI feels.

What features would you consider a "must-have" for a modern browser-based timer? Let's discuss in the comments!

DEV Community: Online Alarm Clock

JavaScript ile Çoklu Zaman Dilimi (Timezone) Yönetimi: Aklınızı Kaybetmeden Dünya Saati Yapmak

Building a Distraction-Free, PWA-Ready Online Alarm Clock in 2026 ⏱️