Life Calendar — hayot to'ri haftalarda
Tug'ilgan sanangizni kiriting va hayotingizni haftalar to'ri ko'rinishida ko'ring: yashalgan, shu hafta va 90 yilgacha oldinda turgani.
Menda shu g'oyali Telegram-bot bor, lekin chatdagi matn 4680 ta kvadrat kabi ta'sir qilmaydi. Shu hissiyotni brauzerga — backendsiz, bir zumda — ko'chirmoqchi edim.
90 yil — bu atigi ~4680 hafta. Ularni bitta to'r ko'rinishida ko'rsangiz, kalendar mavhumlikdan chiqadi. Canvas esa minglab DOM elementidan ancha tez ishladi.
Birinchi variant 4680 ta <div> chizardi. Mobil qurilmada layout bo'g'ilib qoldi. Bitta <canvas> va resize-observer'ga ko'chirdim — zaif telefonlarda ham silliq ishladi.
Nega kerak
G'oya yangi emas — uni Tim Urban "Your Life in Weeks" bilan ommalashtirgan. Lekin maqola o'qish boshqa, o'z sanangizni kiritib o'z to'ringizni ko'rish boshqa. Quyida — Telegram-botimdagi "Life Calendar"ning ishlaydigan mini versiyasi.
Qanday ishlaydi
Bir qator = bir yil (52 hafta + qisqa "dum"). Tug'ilgan sanadan bugungacha bo'lgan to'liq haftalarni sanaymiz, ularni yashalgan deb bo'yaymiz, joriy haftani yoritamiz, 90 yilgacha qolganini kontur qilib qoldiramiz.
Butun chizma <canvas>da: minglab to'rtburchak bitta o'tishda chiziladi, DOM'ga yuk yo'q. To'r chapdan o'ngga to'lqin bo'lib paydo bo'ladi, lekin tizimda prefers-reduced-motion yoqilgan bo'lsa — to'r shunchaki butunligicha chiqadi.