Semantic HTML
Web dasturlarning strukturasini yasayotganda muhim qadamlardan biri to’gri elementlarni tanlash hisoblanadi.
Bazi saytlarga kirib devtoolsni ochib qaralsa asosan
Semantic HTML deb “content parcha”si bilan birga faqat funksionalning ozi emas balki unga tegishli mano/mohiyat (bu yerda osha “content parcha”sining mazkur documentga nisbatan munosabati nazar tutilgan) ham birga kelishiga aytiladi. Aytaylik documentga “Hello World” degan matn bor, agar uni
Shu o’rinda aytib o’tishimiz kerak, tag elementlar hech qachon browser ularga bergan default “style”lar bilan tanlanmaydi, chunki “style”lar istalgan vaqtda istalgan shaklda “override” qilinishi mumkin.
Semantic elementlar ishlatishning quyidagi afzalliklari bor:
- Functionality. Togri element bilan togri funksional keladi. Masalan
- Accessibility. Bazi elementlarda imkoniyatlari cheklangan foydalanuvchilar uchun qulayliklar bor. O’rniga
- SEO. Search enginelar togri semantika bilan tuzilgan saytlarni yuqoriroq baholaydi(
- Easy testing. Semantic elementlarni ishlatish elementlarni testlarda togri topib olishni osonlashtiradi va test id (darvoqe, test idlarni ishlatish antipatternligini bilarmidingiz?) larga ehtiyojlarni keskin kamaytiradi.
Savol: ohirgi marta
@dev_thinking_loud
Web dasturlarning strukturasini yasayotganda muhim qadamlardan biri to’gri elementlarni tanlash hisoblanadi.
Bazi saytlarga kirib devtoolsni ochib qaralsa asosan
div
va span
elementlardan tashkil topgan bo’ladi. Balki muallifi HTML semantikasini yaxshi bilmas, balki unga bunday talab ham qoyilmagandir(o’zi bunaqa talab qoyilishiga ehtiyoj bormikin?), lekin bu tashlab o’tib ketiladigan mavzu emas, menimcha.Semantic HTML deb “content parcha”si bilan birga faqat funksionalning ozi emas balki unga tegishli mano/mohiyat (bu yerda osha “content parcha”sining mazkur documentga nisbatan munosabati nazar tutilgan) ham birga kelishiga aytiladi. Aytaylik documentga “Hello World” degan matn bor, agar uni
h1
elementga o’rasak u content bu document uchun birlamchi heading vazifasini bajaradi (Headinglarga tegishli qoidalar bor). Agar bu contentni div
elementga o’rasak, bu shunchaki manosiz content bo’ladi.Shu o’rinda aytib o’tishimiz kerak, tag elementlar hech qachon browser ularga bergan default “style”lar bilan tanlanmaydi, chunki “style”lar istalgan vaqtda istalgan shaklda “override” qilinishi mumkin.
Semantic elementlar ishlatishning quyidagi afzalliklari bor:
- Functionality. Togri element bilan togri funksional keladi. Masalan
div
yoki span
dan to’laqonli button
yoki a
yasashning imkoni yoq.- Accessibility. Bazi elementlarda imkoniyatlari cheklangan foydalanuvchilar uchun qulayliklar bor. O’rniga
div
va span
ishlatish ularning sayt bilan muloqotini qiyinlashtiradi.- SEO. Search enginelar togri semantika bilan tuzilgan saytlarni yuqoriroq baholaydi(
div
lar o’rniga main
, section
, aside
, nav
, header
, footer
…)- Easy testing. Semantic elementlarni ishlatish elementlarni testlarda togri topib olishni osonlashtiradi va test id (darvoqe, test idlarni ishlatish antipatternligini bilarmidingiz?) larga ehtiyojlarni keskin kamaytiradi.
Savol: ohirgi marta
ul
(unordered list) o'rniga qachon ol
(ordered list) elementini ishlatgansiz va ularning qanday farqi bor?@dev_thinking_loud
👍34❤2
Utilise it as much as it does not hurt you!
Bugun bitta postga ko’zim tushib qoldi. TypeScriptni qanchalik chuqur va murakkab ishlatish haqida. Muallif hammaga ma’lum Evan You. Yuqoridagi maslahatni bergan.
Men odatda bu maslahatni testing uchun berardim. Chunki “qancha test yozish kerak?” (qanchasi sizni qoniqtirsa), “code coverage threshold qancha bo’lishi kerak?” (o’zi kim o’ylab topgan bunaqa talab bo’lishi kerakligini?) yoki “qaysi tur testlarni ko’proq yozish foydali?” (uzun mavzu, umumiy qilib aytganda hammasini yozib koring, qaysi kamroq resurs olsa oshani ko’proq) kabi ko’p tabiiy savollar uchrab turadi. Men odatda bitta implementation uchun eng kamida bitta case (happy path) ko’rilishi kerak deb aytardim.
Masalan React component implement qilinsa oshani hech bolmasa render test yozish kerak. Bu narsani odat qilgandan keyin bir muddat o’tib sal murakkabroq holatni test qilish ishtiyoqi paydo bo’ladi. Nega deysiz mi? Chunki bu muddat ichida basic component render testlar qanaqadir natija berishga ulgurgan bo’ladi, bazi regressionlarni oldini olganiga dasturchi guvoh bo’lgan bo’ladi. Keyin qiziqish paydo bo’ladi, sal murakkabroqroq va hosroq holatlarni ham test qila olaman mi degan savol paydo bo’ladi. Orqasidan izlanish, o’rganish, eksperiment, tatbiq qilish, odatga aylantirish, tdd va hk… Undan keyin esa test yozmasdan commit qila olmaslik “kasalligi” paydo bo’ladi, peerlar review request qilishganda ozgargan filelar ichidan birinchi test filelarni qidirish odati chiqadi.
Hammasi esa eng birinchi qadamdan boshlangan edi: utilise it as much as it does not hurt you…
@dev_thinking_loud
Bugun bitta postga ko’zim tushib qoldi. TypeScriptni qanchalik chuqur va murakkab ishlatish haqida. Muallif hammaga ma’lum Evan You. Yuqoridagi maslahatni bergan.
Men odatda bu maslahatni testing uchun berardim. Chunki “qancha test yozish kerak?” (qanchasi sizni qoniqtirsa), “code coverage threshold qancha bo’lishi kerak?” (o’zi kim o’ylab topgan bunaqa talab bo’lishi kerakligini?) yoki “qaysi tur testlarni ko’proq yozish foydali?” (uzun mavzu, umumiy qilib aytganda hammasini yozib koring, qaysi kamroq resurs olsa oshani ko’proq) kabi ko’p tabiiy savollar uchrab turadi. Men odatda bitta implementation uchun eng kamida bitta case (happy path) ko’rilishi kerak deb aytardim.
Masalan React component implement qilinsa oshani hech bolmasa render test yozish kerak. Bu narsani odat qilgandan keyin bir muddat o’tib sal murakkabroq holatni test qilish ishtiyoqi paydo bo’ladi. Nega deysiz mi? Chunki bu muddat ichida basic component render testlar qanaqadir natija berishga ulgurgan bo’ladi, bazi regressionlarni oldini olganiga dasturchi guvoh bo’lgan bo’ladi. Keyin qiziqish paydo bo’ladi, sal murakkabroqroq va hosroq holatlarni ham test qila olaman mi degan savol paydo bo’ladi. Orqasidan izlanish, o’rganish, eksperiment, tatbiq qilish, odatga aylantirish, tdd va hk… Undan keyin esa test yozmasdan commit qila olmaslik “kasalligi” paydo bo’ladi, peerlar review request qilishganda ozgargan filelar ichidan birinchi test filelarni qidirish odati chiqadi.
Hammasi esa eng birinchi qadamdan boshlangan edi: utilise it as much as it does not hurt you…
@dev_thinking_loud
👍24🤩1
Forwarded from MJ
Media is too big
VIEW IN TELEGRAM
Frontend dasturlash ish o'rni uchun mock intervyu
🔥16👍5
Forwarded from MJ
Media is too big
VIEW IN TELEGRAM
Mock intervyu va umumiy frontendga oid savollar muhokamasi suhbati
🔥27👍5
JavaScript boyicha interview savol va javoblar ro'yhati. Foydali bo'ladi degan umiddamiz
https://github.com/sudheerj/javascript-interview-questions
https://github.com/sudheerj/javascript-interview-questions
GitHub
GitHub - sudheerj/javascript-interview-questions: List of 1000 JavaScript Interview Questions
List of 1000 JavaScript Interview Questions. Contribute to sudheerj/javascript-interview-questions development by creating an account on GitHub.
👍32❤1
React boyicha interview savol va javoblar ro'yhati:
https://github.com/sudheerj/reactjs-interview-questions
https://github.com/sudheerj/reactjs-interview-questions
GitHub
GitHub - sudheerj/reactjs-interview-questions: List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions…
List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!! - sudheerj/reactjs-interview-questions
👍24
ES6(ES2015) va undan keyin qoshilgan ES "proposal"larni yillik "specification"lar tasnifida qayta ko'rib chiqamiz (balki esimizdan ko'tarilganlari bordir)
https://github.com/sudheerj/ECMAScript-features
https://github.com/sudheerj/ECMAScript-features
GitHub
GitHub - sudheerj/ECMAScript-features: ECMAScript features cheatsheet
ECMAScript features cheatsheet. Contribute to sudheerj/ECMAScript-features development by creating an account on GitHub.
👍16
Mana nima sababdan JavaScriptda hamma o'zgaruvchilar heapda saqlanadi: chunki stackdagi joy function tugashi bilan tozalanadi (function ozi stackdan "pop" bo'ladi), closuredagi functionga esa u joy keyin ham kerak.
Manba:
https://exploringjs.com/deep-js/ch_environments.html#recursion-via-environments
Manba:
https://exploringjs.com/deep-js/ch_environments.html#recursion-via-environments
👍22🔥3💯2⚡1👏1
Forwarded from Jakhongir Rakhmonov - IT
👍45👀4👎2🤔2
CSS Box Model visual korinishda
Box-sizing: content-box (default) holatda, total size = margin + border + padding + size(width/height)
Box-sizing: border-box holatda, total size = margin + size(width/height)
Box-sizing: content-box (default) holatda, total size = margin + border + padding + size(width/height)
Box-sizing: border-box holatda, total size = margin + size(width/height)
👍44