Juda yaxshi savollar va javoblar berildi. 👍

https://t.iss.one/dev_thinking_loud/290

Bugun bir odamdan habar keldi:

"Ko'p dasturchi insonlar aynan Web development dan uyog'iga o'tishmasligi(u xoh O'zbekistondagi katta kompaniya bo'lsin) meni hayron qoldiradi."

"Uyog'iga o'tish" jumlasi - habar muallifining Web ni boshlang'ich level deb tushunishlarini isbot qiladi. Huddi Web dan keyin albatta nimagadir o'tmasangiz - siz hechkim emassiz.

Bir narsani aniqlashtirib olaylik.

World Wide Web (www) ga aloqador hamma ishni qiladiganlar avvallari "Veb dasturchi" deyilgan. Server bilan ishlashda PHP dominantlik qilgan. Shuning uchunmi bilmadim, hozir ham veb dasturchi deganda PHP chilarni tushunishadi. Ammo bu notog'ri.

Web - Bu fokusini Browser ga qaratgan har qanday built-in va embedded interfeysdir. Masalan, avval Bluetooth texnologiyasi kashf etiladi. So'ngra Browser'larda ishlashi uchun interfeys qilinadi. Shu kabi boshqa texnologiyalar ham bir joyga to'planadi va o'sha iterfeyslar to'plami - WebAPI deyiladi. Masalan, WebSocket - bu siz bilan socket programming ni Web da qo'llanilishi. Shu va shunga o'xshash boshqa ko'plab texnologiyalar, allaqachon Web da mavjud.

WebAPI ga aloqador embedded texnologiyalarni Browser'larsiz ham ishlatish mumkin. Shaxsan o'zim WebGPU ni Browser dan tashqarida - GPU Computing uchun ham ishlataman.

Shunday ekan Web ham - Desktop/Mobile/VR/Console lar qatorida turadigan raqobatdosh alohida soha. Mensilmaydigan, kamsitiladigan, boshida o'rganib, keyin boshqasiga o'tiladigan emas.

Har qanday soha vakili bilan muloqot qilar ekansiz, ehtiyotkor bo'ling. Hali chuqurroq kirib ko'rmagan narsangizni yaxshi bilmasligingiz - o'sha soha yoki texnologiya tufta degani emas. Haddingizni biling! Sochingizga ehtiyot bo'ling! (Soch masalasini keyin tushunasiz).

Hozir sohalar Frontend, Backend, DevOps vahokazolarga bo'linib ketgan. Har birining ohiriga yetishni baribir iloji yo'q. "Frontendni mukammaliga yetdim, endi Professional Backendchi bo'laman" deya olmaysiz.

Undan ko'ra o'z sohangizda samuray bo'ling! Masalan men hayolimga nima ish qilish kelsa - o'shani Web'da qilish haqida o'ylayman. Chunki fokusimni Browser'larga qaratgamman va asosiysi ishimmi yaxshi ko'raman. Browser'da hamma narsa qila olishni hohlayman. Bu narsa Desktop da yoki Mobile'da qilinadi deb o'tirymayman. Bazi texnologiyalar hos ishlar uchun ishlatiladi. Bular bundan mustasno.

Maqolani Ibrohim Kadirovning ajoyib fikri bilan yakunlayman:

Samuray (さむらい) sartarosh emas, ammo u qilichdan shunday ustalik bilan foydalana oladiki - qilichi bilan sochingizni ham kesib qo'ya oladi.

Web Animations API

Shu paytgacha CSS animatsiyalarni JS orqali ham yozsa, boshqarsa bo'lishini bilmagan ekanman!
CSS dagi animatsiyalarni JS orqali boshqarish desa faqat ular bo'glangan klasslarni elementga biriktirish/o'chirishni tushunardim.

Masalan, g'oyib bo'lish animatsiyasini solishtirsak bo'ladi:

CSS

#element {  
  animation: fade 3s ease forwards;  
}  
  
@keyframes fade {
  from { opacity: 1; }  
  to { opacity: 0; }
}  

JS

const element = document.getElementById('element');  
  
const keyframes = [  
  { opacity: 0 },
  { opacity: 1 }
];  
 
const options = {  
  duration: 3000,
  easing: 'ease',
  fill: 'forwards',
};  

const animation = new Animation(new KeyframeEffect(element, keyframes, options));

animation.play()
animation.pause()
animation.finish()
animation.cancel()

Qachon qaysi birini ishlatamiz?

Animatsiyalar uchun requestAnimationFrame() dan foydalanish ham mumkin. Faqat u CPU dan foydalanadi. CSS animatsiylar esa GPU dan.

Web Animations API

1. bizga aynan CSS dagi animatsiyalarni boshqarish imkonini KENGAYTIRADI.

2. lekin baribir aslida siz CSS animatsiyalarni ishlatayotgan bo'lasiz.

3. piksellarning hisob kitobi "main thread"dan tashqarida bo'ladi.

4. UI komponentlar yaratish uchun juda mos.

5. Deklarativ


requestAnimationFrame()

1. animatsiyani kardma-kadr yartish imkonini beradi.

2. animatsiyani boshqarish to'laqonli JS kodga bog'liq boladi.

3. shu sabab, har bir kard uchun piksellarni hisoblash "main thread" da amalga oshadi.

4. O'yinlar va o'ta murakkab, sinxron harakat qiluvchi elementlardan iborat animatsiyalar uchun mos.

5. Imperativ

Bu narsalarni kovlayotganim, yaqinda Pinterest dizayn sistemasiga animatsiya qo'shish ishlarini boshladik.

Boshladim deyishim kerak, chunki animation library ustida faqat men ishlayman. 😬
Reja bo'yicha keyingi 1 yil shu proyekt bilan shug'ullanamizman.

TransitionEvent

Animatsiya bilan bir qatorda transition'lar haqida ham gaplashsak.

Buni qarangki, CSS orqali boshqariladigan transition'larni JS bilan kuzatish imkoni ham bor ekan.
Buni ham yaqinda bilib qoldim. 🤯

Masalan, ":hover" qilganda kengayadigan elementni olaylik:

#box {
  width: 50px;
  transition: 2s;
  transition-dalay: .5s;

  &:hover {
    width: 100px;
  }
}

Aytaylik, keygayib kichrayyotgan paytda, element ichidagi tugmacha yoki linklar "disabled" bo'lishi kerak (JS bilan). Buni qanday qilardingiz?

Misol uchun men "mouseenter", "mouseleave" event'laridan foydalanib, "setTimeout" orqali transition tugashini kuzatardim. Bunda albatta "timeout" vaqti "transition-duration" + "delay" ga teng bo'ladi.
Tepadagi misolga ko'ra 2 + 0.5 = 2.5 sekund.

Bu usul ishlaydi. Lekin ikkovi bir-biriga bog'liq bo'magan parallel operatsiyalar hisoblanadi. Chunki sinxronizatsiyani "qo'lda" qilyapmiz.

TransitionEvent bilan esa buni qilish ancha sodda:

const box = document.getElementById('#box');

box.addEventListener('transitionstart', () => button.disabled = true)
box.addEventListener('transitionend', () => button.disabled = false)

TransitionEvent o'zi 4 ta event'dan iborat:

1. transitionrun - transition'ni boshlovchi even sodir bo'lganda (hover, focus, click, v.h.k.) va "delay" taymeri boshalanganda.

2. transitionstart - aynan transition boshlangada, ya'ni o'zgarish boshlanganda; "delay" taymeri tugagadan keyin.

3. transitionend - transition tugaganda, ya'ni element o'zgarishi tugagach.

4. transitioncancel - transition paytida uni bekor qiladigan event sodir bo'lganda, ya'ni `transitionrun`'dan keyin, `transitionend`'dan oldin.

ReactJS ni noldan yozib ko'rishim kerak o'zim. Albatta o'rganish maqsadida.

1 yilcha oldin React'ni jQuery'ga o'xshatib ishlatsa bo'ladigan experimental library yozgandim. O'shani topolmayapman. Menimcha eski noutbukimda qolib ketgan. 😕

Mana shunaqa jinnicha sintaksis edi 🥶️️️️️️

function Component(props) {
  return (
    $('div').css('display', 'flex')
      .children(
        $(Button)
          .label('Print')
          .click(props.onClick)
      )
  )
}

React state'ni DOM boshqarganda

O'zi TransitionEvent haqida yozganimning sababi, uni noto‘g‘ri usulda ishlatib qo'yganimni aytish edi. Hozir shu haqida aytib beraman.

Bu API haqida o'qiganimdan keyin, transitionstart va transitionend bilan komponent state'ni boshqarmoqchi bo'ldim.

Kursor komponent ustida borganda, ya'ni "mouseover" bo'lganida, u animatsiya bilan ochilishi kerak. Komponent ichidagi tugma bosilganda esa komponent yopilishi kerak edi.

// pseudo kod
<Component
  ref={compRef}
  onMouseOver={() => {
    if (disabled) return;

    startTimer({ disabled: true });
    setOpen(true);
  }}
  onButtonClick={() => {
    if (disabled) return;

     startTimer({ disabled: true });
     setOpen(false);
  }}
  style={{ transition: "1s" }}
/>

Ochilish va yopilish animatsiyasi vaqtida event listener'lar ishlamasligi kerak, ya'ni "disabled" bo'lishi kerak. Chunki unday qilmasangiz "mouseover" ishga tushib komponent yana ochilib, animatsiya ishga tushib ketishi mumkin. "disabled" bu yerda React state.

Buning uchun men setTimeout'da foydalanyotgandim. Transition boshlanganda disabled===true bo'lib, taymerni ishlatib, tugaganda disabled===false bo'lishi kerak edi.

// pseudo kod
function startTimer({ disabled }) {
  setDisabled(true);
  setTimeout(() => setDisabled(false), 1000);
}

Shu yerda taymerni butunlay o'chirib tashlab, o'rniga transitionstart va transitionend dan foydalanib ko'rdim. Chunki taymer bilan ishlash murakkab va ko'pincha "bug"larga sabab bo'ladi.

// pseudo kod
<Component
  onMouseOver={() => {
    if (!disabled) setOpen(true);
  }}
  onButtonClick={() => {
    if (!disabled) setOpen(false);
  }}
  onTransitionStart={() => setDisabled(true)}
  onTransitionEnd={() => setDisabled(false)}
  style={{ transition: "1s" }}
/>

Refaktor qilganimdan so'ng, kod ancha soddalashdi va endi "transitionstart"da disabled===true, "transitionend"da esa disabled===false bo'lishi kerak edi. Lekin endi komponent "lipirlay" boshladi. 🤔

Nega? Axir "transitionstart"da event listener'lar "disabled===true" bo'lishi kerak edi-ku?

Biroz mulohazadan keyin tushundimki, "React falsafasi"ga qarshi ish qilib qo'yibman. 😕

Komponent tugmasi bosilganda "transition" ishga tushadi. Bu payda kursor hali komponent ustida turgan bo'ladi-ku, to'g'rimi? Shuning uchun "mouseover" ishga tushib komponentni yana ochib yuboradi (yani ochilish animatsiyasi ishlab ketadi).
Undan KEYINGINA "disabled===true" bo'ladi --- deb o'ylasangiz yanglishasiz. 😄
Chunki endi "transitionend" ishlab "disabled===false" bo'lib qoladi!

Mana sizga chigallik!

React har bir (sinxron) state'lar zanjiri to'liq o'zgarib, virtual DOM "pishgandan" keyin haqiqiy DOM ga o'zgarishlarni kiritadi.
Ya'ni event loop bir marta aylanishiga bitta render bo'ladi!!! (Har holda shunga harakat qiladi. Xato aytgan bo'lsam to'g'irlanglar)

Sichqoncha bilan bog'liq har bir event/hodisa event loop'gai bitta aylanish vazifasini yuklaydi. Komponentimizdagi "onButtonClick" listeneri "disabled" state'ini o'zgartirmaydi. "Disabled" o'zgarishi keyingi event loop'da sodir bo'ladi. Shuning uchun orada undan oldin "mouseenter" tiqilib olishga ulguradi.

Xullas kalom, bu yerdagi eng katta xato shuki, men state'ni DOM dan o'qiganim bo'ladi. Chunki "transitionstart" bu DOM o'zgarishi orqali sodir bo'luvchi event!
React'da state DOM'ni boshqaradi, DOM state'ni emas!!!
Buni React'ni endi o'rganayotgan paytimda o'qiganman.

Shuning uchun e'tiborli bo'linglar. 🙂

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.