Brauzer yozib ko'rishim kerak. Noldan. Chromium yoki tayyor engine'larsiz. Zamonaviy brauzerlardek bo'lishi shart emas. Berilgan URLni ochsa, ma'lum bir sodda HTML, CSS, JS opereratsiyalarini baraja olsa bo'ldi.
Zo'r pet-project bo'lardida o'ziyam.

P. S. Albatta o'rganish maqsadida. For educational purposes.

CSS prefers-reduced-motion

Agar kompyuteringizda yoki telefoningizda Reduce Motion (Harakatni Kamaytirish) yoqilgan bo'lsa, UI ortiqcha animatsiyalarsiz ishlashni boshlaydi.
Masalan, tugmacha odatda bosilganda kichrayib-kattalashsa, Reduce Motion holatida faqat rangi o'zgaradi va hech qanday animatsiya ko'rmaysiz.

Bu sozlama nega kerak:
1. "Accessibility", ya'ni ko'rish bog'liq nuqsoni bor odamlar uchun.
2. dastur tezroq ishlashi uchun
3. kamroq energiya sarfi uchun va h.k.

Veb-saytingiz yoki veb-dasturingiz "Accessible" bo'lishi uchun sistema sozlamalari bilan mos ishlashi zarur. Agar sistemada Reduced Motion yoqilgan bo'lsa animatsiyalarni o'chirishingiz yoki kamaytirishingiz kerak.

CSS da bu quyidagicha qilinadi:

div {
  transition: transform 1s;
  animation: fadeIn 2s;
}

@media (prefers-reduced-motion) {
  div {
    transition: none;
    animation: none;
  }
  
/* yoki boshqa juda oddiy 
  animatsiya bilan almashtiriladi*/
}

Reduced motion GIF

Jamoamizda "Accessiblity" bo'yicha mutaxassis bor. Kecha dizayn sistemamiz veb-saytiga GIF lari bor sahifa qo'shgandim. Keyin yozib qoldi:

- Diyorbek, animatsiya qoidalari bo'yicha sahifani qo'shibsiz-u, sahifani o'zida qoidalarni ishlatmabsiz! 😬

- 😐🤦‍♂️

Profilimdagi "seniOr" degan yozuvdan uyalib ketdim. 😄️️️️️️

Xullas, Reduce Motion bo'lganda GIFlar to'xtatish kerak ekan. Chunki GIF rasmlar ham sahifaning harakatlanuvchi elementlaridan biri.

Reduce Motion bo'lganida GIF ni statik rasm bilan almashtirilsa, masala hal. Buni qilish uchun esa shunchaki HTML ni yaxshi bilish yetarli! JavaScript kerakmas.

Mana:

<picture>
  <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)">
  <img src="animated.gif">
</picture>

<picture> tegini ishlatishni bilarmidingiz? Masalan men <source> tegida "media" atributi borligini bilmasdim! 😬

Accessibility Tree

Chrome'da sahifaning "accessibility tree"sini ko'rish mumkin. Assisstiv texnologiylar (ko'zi ojizlar uchun ovozli yordamchilar, screen reader'lar) aynan shu "accessibility tree" orqali sahifangizni o'qishadi.

Yuqorida Wikipedia sahifasining "accessibility tree"sini ko'rishingiz mumkin. Deyarli har bir DOM element ma'noli izohlangan. Bu izohlar asosan "aria-*" atributlari orqali beriladi.
Screen reader (ekranni o'quvchi dastur) lar aynan shu izohlarni o'qishadi.

Chrome DevTools orqali shu usulda elementlarning maxsus izohlarini tekshirish juda qulay. Chunki DOM ning o'zida ularni ko'rish/topish qiyin.

Aytgancha,

JavaScript ni zo'r o'rganmoqchi bo'lsangiz C++ ni o'rganing.

Nega?

1. JavaScript ostida C++ da yozilgan kodlar yotadi.

Hech o’ylab ko’rganmisiz, “setTimeout” o’zi qanday ishlaydi? Uning kodi qanday yozilgan?
Yoki “addEventListener” aslida signalni qayerda oladi?
Yoki oddiy “<button>” HTML tegi qanday qilib ekranga tugmacha chiqaradi?
“Event loop” o’z nomi bilan oddiy “while loop” asosida ishlashini bilarmidingiz?

O’ylab ko’rmagan bo’lsangiz, endi o’ylab ko’ring!

2. Xotirani boshqarish (Memory management)

JavaScript da bu narsani siz qilmaysiz. Sahna ortidagi JS engine bu ishlarni siz uchun qiladi. Uning qanday ishlashini tushunsangiz, quyidagi JS ko’nikmalaringiz rivojlanadi:
a. kod optimizatsiyasi
b. katta ma’lumotlar bilan ishlash
c. “memory-leak“larni payqay olish (ha JS da ham bo’ladi)

3. Multithreading

Bu ham JS da yo’q - desam xato gapirgan bo’laman. Shunchaki JS da boshqacha konstruksiya bor xolos (WebWorker lar). Undan tashqari “event-listener”lar va shu kabi brauzerning asinxron API lari boshqa thread da ishlaydi. Ularni yaxshi tushunish uchun “multithreading” qanday ishlashini bilish foydali.

4. Har bir texnologiya aslida sodda texnologiyalar jamlanmasi ekanini tushunish

Ularning murakkabligi o’sha jamlanmaning kattaligida, ko’pligida. Lupa ostiga olib qarasangiz ularning qanchalik sodda ekanligini ko’rasiz.

P.S. C++ dan tashqari Go, Rust kabi tillarni ham misol qilsam bo’lardi. Lekin ularda memory management bo’yicha qo’shimcha konstruksiyalar kiritilgan. Shu sabab "memory-management"ni yaxshi tushunish uchun C/C++ ga teng kelolmaydi (IMHO).

Undan tashqari eng kuchli JS engine bo’lmish V8 C++ da yozilgan. Chrome ustiga qurilgan har bir brauzerda V8 ishlaydi. NodeJS va Deno ham. Bun ham ancha-muncha C++ kodga ega.

Shu gapga bir maqtanib qo'yay aytib ketay. 1.5 yilcha oldin Samsung kompaniyasiga C++ dasturchi bo'lib ishga kiryotgandim. Lekin oxirida oyligini kelisholmadik shekilli keyin qaytib chiqishmadi. 😬

Tasavvur qilyapsizmi?

Mem idea kelib qoldi

Overton oynasi

Jamiyatdagi ko'p narsa mana shu bosqichlardan o'tadi:

1. Aqlga sig'mas
2. Radikal
3. Qabul qilsa bo'ladigan
4. Ma'noli/asosli
5. Ommabop
6. Qonun
7. Ommabop
8. Ma'noli/asosli
9. Qabul qilsa bo'ladigan
10. Radikal
11. Aqlga sig'mas

IT dunyosidan tortib siyosatgacha, barcha jabhalarda nimalar shu bosqichlardan o'tmadi deysiz. Hozir ham nimalardir shu oynaning qaysidir bosqichida.

Siyosatdan gapirmayman. Chunki hammaning o'z qarashlari bor. Ammo shu usuldan foydalanib jamiyatni tubanlikka olib borayotgan harkatlar yo'q emas. Shuning uchun ham himoyalashing kerak bo'lgan eng birinchi narsa onging deb bejiz aytilmagan.

Endi menga bu yo'qotgan umrimni kim qaytarib beradi? 😫😩😩

Pinterest dizayn sistemasi uchun animatsiyalar qo'shyotganimni aytgandim. Animatsiyalar funksiyalari va davomiyligi tokenlarda, ma'lum bir strukturada o'zgaruvchilar sifatida saqlanadi.

Bu tokenlarni qanday saqlash haqida o'ylayapmiz. Chunki animatsiyalar implementatsiyasi veb, iOS va Android platformalarida bir-biridan yaxshigina farq qiladi. Masalan davomiylik CSS da sekundlarda bo'lsa, Kotlinda millisekundlarda.

Animatsiya "easing" funksiyalari esa tubdan farq qiladi.
CSS da keyframe yoki cubic-bezier() bo'lsa, iOS va Android uchun bilmadim nima. 🤷‍♂️

Menejerim bir safar, testing qilish va integratsiya ham seni bo'yninga tushadi, shuning uchun Swift bilan Kotlinni o'rgansang-chi? - degandi. Men, yo'g'e ja unchalikmasdir ba'zi joylarini ko'rib o'shanga qarab qilaveraman - degandim.

Lekin hozir menga kelayotgan vazifalar va rejalarga qaraganda busiz ish bitmaydiganday ko'rinyapti.
Baribir o'rganaman shekilli Swift va Kontlinda native mobile app qilishni. 😶‍🌫

yaramas

CSS da matematik funksiyalar borligini bugun bildim.

Lekin meni qiynayotgan narsa: Bular o'zi nega kerak? 🤔

Undan ko'ra normalniy narsalar qo'shishmaydimi, masalan parent-selector.

CSS ni Turing-complete dasturlash tili qilishga harakat qilishyotgandek go'yo. Lekin hozir ham Turing-complete deb hisoblasa bo'ladi CSS ni.

Buvim kasbimni tushunmaydilar. Hech tushuntirmagan ekanman ham. Ammo bir marta ishlab o'tirganimni ko'rib, "Dokument yozib jo'natasanmi?" degandilar.

🤔

Aslini olganda to'g'ri aytdilar. Rostdan ham kompyuterimda "dokument" ya'ni hujjat yozib jo'nataman. Bu hujjat "Design Doc", kod, yoki updatelar bo'lishi mumkin. Hamma ishimiz internet orqali. Yozganlarimizni boshqalarga jo'natamiz. Kamiga deyarli hamma ma'lumotlarimiz HTTP protokoli orqali internetda borib kelib turadi. HTTP request/response'lar hammasi bir hujjat xolos. Xullas, ...

"Ha, shuday. Dokument yozib jo'nataman" - degandim.

Stop trying to see the whole staircase

You won't be able to see step 2 until you're on step 1.

I hope this idea frees you from trying to analyse and overthink the path you want to take in life.

The truth, is you will never know what the exact path looks like.

Even if you spend days and weeks planning it, you won't truly know where it'll lead until you take one step at a time.

More action creates more clarity.
Thinking and planning only creates more thinking and planning.

Chrome brauzeriga Gemini AI modelini qo'shib, unga JavaScript API chiqarishyotgan ekan.

2 qator kod bilan o'z sahifangizda INTERNETSIZ ishlaydigan ChatGPT degani bu!

Mana JavaScript API qanday ishlaydi.

Bu yerda to'liqroq ma'lumot berilgan:

https://developer.chrome.com/docs/ai/built-in#get_an_early_preview

*INTERNETSIZ