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

2 haftacha oldin Google dan rekruter aloqaga chiqib, intervyu belgilagandik. Har doimgidek "phone screening" intervyu belgilandi. Shu suhbatdan o'tgach ketma-ket boladigan "virtual onsite" bo'lishi kerak edi.

To'g'risi boshida "Googleda ishlab nima qilaman", "Offer olganch qanday bo'larkin, hozirgi ishim yaxshiku" degan hayollar o'tdi. Chunki oxirgi payt Googleda ishlash haqida unchalik ham ijobiy fikrlar eshitmayotgandim.

Sal oldin rekruter telefon qilib aytdi; phone- screening'dan o'tolmabman 😬.

Tanobimni tortib qo'yishdi. 👍

Boshqalar uchun ham foydali bo'lishi uchun xulosalar:

1. Algoritmik malasalar yechishni to'xtatmasligim kerak edi. Tayyorgarlik uchun vaqt kam bo'lgani uchun texnik suhbatga tayyor emas edim.

2. Masalani bir qismini noto'g'ri tushunib qo'ydim va vaqt yo'qotdim. Masalani qaytarib o'qishim va intervyuchidan ko'proq savollar so'rashim kerak edi.

3. Beriladigan masala asosan klassik masalarning sal o'zgartirilgan versiyasi bo'ladi. Yechimi esa o'sha klassik yechimdan farq qilishi mumkin. Ammo yechimga o'sha klassik yechimni to'g'ri tushunish va o'shanga asoslanish orqali yetib borsa bo'ladi.

4. Masala uchun yordam so'rashdan uyalmasligim kerak edi. Bu ham masalani tushunish uchun savol so'raganday gap o'zi.

Google intervyuda berilgan savolni ochiqlamaslik haqida hech qanday gap bo'lmadi. Shuning uchun bo'lishaman:

Valid parentheses (To'g'ri qavslar)

Bu masalani ko'pchiligimiz ishlaganmiz. LeetCodedagi "easy" masalalardan.

Masalan shunday string'lar berilganda funksiyamiz true/false qaytarishi kerak. String lar faqat "(" va ")" qavslaridan iborat.

"" // true
"()" // true
"(())" // true
"()()(())" // true

"())" // false
")()" // false

Intervyuda tushgan masala 2 qismdan iborat edi:

1. Check validity of input string.

2. Return valid string of parentheses.
You can delete, insert, flip a character. Return option with minimum number of edits!

1-qism oddiy, stack bilan ishlanadi. Tushuntirib o'tirmayman. Shunchaki o'zingiz ishlab ko'ring 😉

2-qism... uxxx... . Yaxshigina boshimni qotirib qo'ydi.
Demak, qavslarimiz to'g'ri bo'lsa stringni o'zini qaytaramiz. Agar noto'g'ri bo'lsa, to'g'rilab qaytaramiz.
Ya'ni har qanday holatda funksiyamizdan to'g'ri qavslardan iborat string qaytishi shart!

Eslataman, stringni to'g'rilash uchun 3 ta amal bajarish mumkin:
1. delete - o'chirish
2. flip - teskari o'girish
3. insert - qavs kiritish (ochuvchi yoki yopuvchi)

Xullas, misol keltiraman:

input = "()"
output = "()" // to'g'ri bo'lgani uchun o'zini qaytaramiz

input = "())" // 3 xil to'g'ri javob bor, istalganini qaytarish mumkin
output1 = "()" // oxirgi qavsni ochiramiz
output2 = "(())" // boshiga ochuvchi qavs qo'yamiz
output3 = "()()" // oxirgi qavsni teskari o'girib, oxiriga yopuvchi qavs qo'yamiz

Men flip - teskari o'girish amalini unutib qo'ydim va hayollarim boshqa taraflarga ketib vaqt yo'qotdim. 😖

Yechimni bera oldim. Kodini yozdim. Lekin uni "dry-run" qilib tekshirishga ulgurmadim.

Hozircha siz o'zingiz harakat qilib ko'ringchi. Keyinroq yechimini yozaman.