Creative Coder Myanmar pinned «https://t.me/+5bIwAl8hF6IzMGM9 Come & Join Our Discussion Group Guys🚀 စာမေးချင်တာ တွေ အခက်ခဲတခုခုရှိရင် ဒီကနေ မေးလို့ရပါတယ်ခင်ဗျာ။🚀»
ကျွန်တော်တို့ တခါတလေ HTML code တွေရေးတဲ့ အခါ A tag တွေ ထဲ A Tag တွေပြန်ရေးရရင် ထိန်းရတာ တော်တော် လက်ပေါက်ကပ်ပါတယ်။ ဥပမာ - card design တခုလုံးကို နှိပ်လို့ရအောင် လုပ်ထား ပြီး အဲ့ card ထဲမှာ ရှိတဲ့ တချို့ nested a tag လေးတွေကိုနှိပ်ရင် တော့ မတူညီတဲ့ Link တွေကို သွားတာမျိုးကိုပြောတာဖြစ်ပါတယ်။
အဲ့လ်ို အခြေနေကျရင် ဖြေရှင်းနည်း အမျိုးမျိုး သုံးကြပေမဲ့ ဒီနည်းလေးက တော်တော်လေး လွယ်ပြီး အလုပ်ဖြစ်လို့ Gist လေးထုတ်ပြီး တခါတည်း စမ်းကြည့်လို့ရအောင် sharing လုပ်ပေးလိုက်ပါတယ်။
https://gist.github.com/HlaingMinThan/945d4d2906c175e82986cfc7c20a3127?fbclid=IwZXh0bgNhZW0CMTEAAR3N8CmuOQ7atchTrKv9rDaxDWpYGusIT7wirF5cyRxH4YY-5IoUTVKy3Pc_aem_AdrNOxevPVSskb23i0-bWXQCjpsiUhGtDN0IPvFBsf3CA9Zf_iZTIR4C_wKACpcIOpebfH1JFKZTmzhN3dNnBiNe
အဲ့လ်ို အခြေနေကျရင် ဖြေရှင်းနည်း အမျိုးမျိုး သုံးကြပေမဲ့ ဒီနည်းလေးက တော်တော်လေး လွယ်ပြီး အလုပ်ဖြစ်လို့ Gist လေးထုတ်ပြီး တခါတည်း စမ်းကြည့်လို့ရအောင် sharing လုပ်ပေးလိုက်ပါတယ်။
https://gist.github.com/HlaingMinThan/945d4d2906c175e82986cfc7c20a3127?fbclid=IwZXh0bgNhZW0CMTEAAR3N8CmuOQ7atchTrKv9rDaxDWpYGusIT7wirF5cyRxH4YY-5IoUTVKy3Pc_aem_AdrNOxevPVSskb23i0-bWXQCjpsiUhGtDN0IPvFBsf3CA9Zf_iZTIR4C_wKACpcIOpebfH1JFKZTmzhN3dNnBiNe
Gist
Handling Nested a tag in smooth way
Handling Nested a tag in smooth way. GitHub Gist: instantly share code, notes, and snippets.
Data Scientist တစ်ဦးအဖြစ် အသက်မွေးဝမ်းကြောင်းပြုလိုသူများအတွက် 👇
Data Scientist Career ဟာ အခုအချိန်မှာ လူကြိုက်အများဆုံး career ထဲမှာတစ်ခုအဖြစ်ပါဝင်နေပါတယ်။
ဒါကြောင့် data science ကိုလေ့လာတော့မယ်ဆိုရင် ဘယ်ကနေစပြီး လေ့လာသင့်လဲဆိုတာ ကြည့်လိုက်ရအောင် 👀
👉 လိုအပ်တဲ့အခြေခံ skill တွေကိုအရင်ဖြည့်ပါ။
Mathematics နဲ့ Statistics ကတော့ အခြေခံကျတဲ့ သိထားသင့်တဲ့အရာတွေဖြစ်ပါတယ်။
Math မှာဆိုရင် Linear Algebra နဲ့ calculus တွေကို လေ့လာထားသင့်ပြီး statistics မှာဆိုရင်တော့ descriptive နဲ့ inferential statistics တွေကို လေ့လာထားသင့်ပါတယ်။
Programming အပိုင်းမှာတော့ Python ဒါမှမဟုတ် R ကလေ့လာထားသင့်တဲ့ programming language တွေဖြစ်ပါတယ်။
SQL ကတော့ real world data တွေနဲ့ အလုပ်လုပ်တဲ့နေရာမှာ သိထားသင့်တာဖြစ်တဲ့အတွက် လေ့လာထားဖို့လိုအပ်ပါတယ်။
👉 Data Science ရဲ့ အဓိက concept တွေကိုဆက်လေ့လာပါ
Data Manipulation နဲ့ Cleaning ကလည်း core concept ထဲမှာပါ၀င်ပါတယ်။
ဒါ့အပြင် data တွေကိုသိမ်းတာ ၊ analyze လုပ်တာတွေကိုလည်း လေ့ထာထားသင့်ပါတယ်။
ဒီမှာဖော်ပြခဲ့တာက ယေဘုယျ အချက်အလတ်တွေပဲရှိပါသေးတယ်။
Data Science နယ်ပယ်ကလည်း ကျယ်ပြန့်တဲ့အတွက် အခြေခံတွေ လေ့လာပြီးပြီဆိုရင်
ကိုယ်စိတ်ပါတဲ့နယ်ပယ်ကို ဆက်လက်လေ့လာထားသင့်ပါတယ်။
Online Courses တွေအနေနဲ့တော့ Coursera , edX နဲ့ Udacity တို့မှာသွားရောက်လေ့လာနိုင်ပါတယ်။
စာအုပ်အနေနဲ့ဆိုရင်တော့ "Hands-On Machine Learning with Scikit-Learn, Keras & TensorFlow" by Aurélien Géron ကိုဖတ်ဖို့ အကြံပြုချင်ပါတယ်။
Data camp နဲ့ Kaggle တို့ကနေလည်း tutorial တွေနဲ့ပြုလုပ်လေ့လာနိုင်ပါတယ်။
Data Science ကိုစိတ်ပါ၀င်စားတဲ့သူငယ်ချင်းတွေရှိရင်လည်း အချင်းချင်းသိရအောင် share ပေးသွားကြပါဦးနော် 👀
#creative_coder_myanmar
Data Scientist Career ဟာ အခုအချိန်မှာ လူကြိုက်အများဆုံး career ထဲမှာတစ်ခုအဖြစ်ပါဝင်နေပါတယ်။
ဒါကြောင့် data science ကိုလေ့လာတော့မယ်ဆိုရင် ဘယ်ကနေစပြီး လေ့လာသင့်လဲဆိုတာ ကြည့်လိုက်ရအောင် 👀
👉 လိုအပ်တဲ့အခြေခံ skill တွေကိုအရင်ဖြည့်ပါ။
Mathematics နဲ့ Statistics ကတော့ အခြေခံကျတဲ့ သိထားသင့်တဲ့အရာတွေဖြစ်ပါတယ်။
Math မှာဆိုရင် Linear Algebra နဲ့ calculus တွေကို လေ့လာထားသင့်ပြီး statistics မှာဆိုရင်တော့ descriptive နဲ့ inferential statistics တွေကို လေ့လာထားသင့်ပါတယ်။
Programming အပိုင်းမှာတော့ Python ဒါမှမဟုတ် R ကလေ့လာထားသင့်တဲ့ programming language တွေဖြစ်ပါတယ်။
SQL ကတော့ real world data တွေနဲ့ အလုပ်လုပ်တဲ့နေရာမှာ သိထားသင့်တာဖြစ်တဲ့အတွက် လေ့လာထားဖို့လိုအပ်ပါတယ်။
👉 Data Science ရဲ့ အဓိက concept တွေကိုဆက်လေ့လာပါ
Data Manipulation နဲ့ Cleaning ကလည်း core concept ထဲမှာပါ၀င်ပါတယ်။
ဒါ့အပြင် data တွေကိုသိမ်းတာ ၊ analyze လုပ်တာတွေကိုလည်း လေ့ထာထားသင့်ပါတယ်။
ဒီမှာဖော်ပြခဲ့တာက ယေဘုယျ အချက်အလတ်တွေပဲရှိပါသေးတယ်။
Data Science နယ်ပယ်ကလည်း ကျယ်ပြန့်တဲ့အတွက် အခြေခံတွေ လေ့လာပြီးပြီဆိုရင်
ကိုယ်စိတ်ပါတဲ့နယ်ပယ်ကို ဆက်လက်လေ့လာထားသင့်ပါတယ်။
Online Courses တွေအနေနဲ့တော့ Coursera , edX နဲ့ Udacity တို့မှာသွားရောက်လေ့လာနိုင်ပါတယ်။
စာအုပ်အနေနဲ့ဆိုရင်တော့ "Hands-On Machine Learning with Scikit-Learn, Keras & TensorFlow" by Aurélien Géron ကိုဖတ်ဖို့ အကြံပြုချင်ပါတယ်။
Data camp နဲ့ Kaggle တို့ကနေလည်း tutorial တွေနဲ့ပြုလုပ်လေ့လာနိုင်ပါတယ်။
Data Science ကိုစိတ်ပါ၀င်စားတဲ့သူငယ်ချင်းတွေရှိရင်လည်း အချင်းချင်းသိရအောင် share ပေးသွားကြပါဦးနော် 👀
#creative_coder_myanmar
မရွေးမုန့် Developer လေးများ Rejection တွေနဲ့ကြုံတွေ့ရတဲ့အခါ ⛈️⛈️
ဒီအလုပ်လျှောက်ထားတာလေးတော့ မပါလိုက်ဘူး…
ဟို internship လေးကတော့ငါ့ကိုမရွေးသွားဘူး..
ဒီကောင်မလေး/ကောင်လေး ကတော့ငါ့ကို ငြင်းလိုက်တယ်…
စတဲ့ စတဲ့ rejection တွေ Developer တော်တော်များများရဲ့ဘ၀မှာ ကြုံတွေ့ဖူးကြမယ်ထင်ပါတယ်။
ဒီလို rejection တွေနဲ့ကြုံတွေ့တဲ့အခါ ဘယ်လိုရင်ဆိုင်ကြမလဲ? အသစ်ပြန်လည်စတင်ဖို့အတွက် ဘယ်လိုအားမွေးကြမလဲဆိုတာကြည့်လိုက်ရအောင် 👀
Reject ခံရတဲ့အခါ
ကိုယ်က သူတို့လိုအပ်တဲ့အရည်အချင်းတွေ မရှိသေးလို့ဆိုတာလည်းဖြစ်နိုင်သလို အခြားဖြစ်နိုင်ခြေတွေကိုလည်း စဉ်းစားရပါမယ်။
တစ်ခါတစ်လေ ကိုယ်က အဲ့အလုပ်ကို တကယ် လိုအပ်နေတာမျိုးမဟုတ်ပဲ ကိုယ်နဲ့ မကိုက်ညီနေတာလို့ အရွေးမခံရတာလည်း ဖြစ်တတ်ပါတယ်။
📝 ပထမဆုံးလက်ခံတတ်အောင် ကြိုးစားပါ။
Rejection ကိုလက်ခံတတ်အောင်စဉ်းစားပါ။ ရလာတဲ့ result ကိုကြည့်ပြီး နောင်တမရပါနဲ့။ အတွေးမလွန်ပါနဲ့။ ငါကတော့ အခု ဒီ result ရခဲ့ပြီး ဆိုတာကို လက်ခံနိုင်အောင်ကြိုးစားပါ။
📝ကိုယ့်ကိုယ်ကိုယ် reflect လုပ်ပါ။
ဘယ်အချက်လေးတွေလိုအပ်နေလဲ? ဘာတွေပြင်ဆင်ရမလဲဆိုတာကို ပြန်လည်စဉ်းစားကြည့်ပါ။
📝 ကြိုးစားမှုတွေကို မရပ်တန့်လိုက်ပါနဲ့။
လဲကျတိုင်း ပြန်ထ၊ လိုအပ်ချက်တွေကို ပြန်လည်ပြင်ဆင်ပြီး ပြန်လည်ကြိုးစားကြည့်ပါ။
Developer ကြီးတို့ကရော Rejection တွေကို ဘယ်လိုမျိုးကျော်ဖြတ်လေ့ရှိကြလဲ ?
သူငယ်ချင်း မရွေးမုန့် Developer လေးတွေကိုလည်း mention ပြီးပြောလိုက်ကြပါဉီးနော် 👀
Web Development နဲ့သက်ဆိုင်တဲ့ အကြောင်းအရာတွေနဲ့၊ video content တွေကို အောက်ပါ social media platform တွေကနေလည်းမျှဝေပေးနေတာကြောင့် follow လုပ်ထားပေးကြပါဦးနော်
Creative Coder ကို Facebook ကနေ ရှာရတာခက်ခဲလာရင် ဒီနေရာတွေမှာ ကျွန်တော်တို့ရှိပါတယ်။
Tiktok
https://www.tiktok.com/@creativecodermm?_t=8mufG7lMQiY&_r=1
Telegram
https://t.me/creativecodermm
Youtube
https://youtube.com/c/CreativeCoderMyanmar
Linkedin
https://www.linkedin.com/company/creative-coder-myanmar/
Facebook
https://www.facebook.com/creativecodermm
CreativeCoder Learning Platform
http://creativecodermm.com
#creative_coder_myanmar
ဒီအလုပ်လျှောက်ထားတာလေးတော့ မပါလိုက်ဘူး…
ဟို internship လေးကတော့ငါ့ကိုမရွေးသွားဘူး..
ဒီကောင်မလေး/ကောင်လေး ကတော့ငါ့ကို ငြင်းလိုက်တယ်…
စတဲ့ စတဲ့ rejection တွေ Developer တော်တော်များများရဲ့ဘ၀မှာ ကြုံတွေ့ဖူးကြမယ်ထင်ပါတယ်။
ဒီလို rejection တွေနဲ့ကြုံတွေ့တဲ့အခါ ဘယ်လိုရင်ဆိုင်ကြမလဲ? အသစ်ပြန်လည်စတင်ဖို့အတွက် ဘယ်လိုအားမွေးကြမလဲဆိုတာကြည့်လိုက်ရအောင် 👀
Reject ခံရတဲ့အခါ
ကိုယ်က သူတို့လိုအပ်တဲ့အရည်အချင်းတွေ မရှိသေးလို့ဆိုတာလည်းဖြစ်နိုင်သလို အခြားဖြစ်နိုင်ခြေတွေကိုလည်း စဉ်းစားရပါမယ်။
တစ်ခါတစ်လေ ကိုယ်က အဲ့အလုပ်ကို တကယ် လိုအပ်နေတာမျိုးမဟုတ်ပဲ ကိုယ်နဲ့ မကိုက်ညီနေတာလို့ အရွေးမခံရတာလည်း ဖြစ်တတ်ပါတယ်။
📝 ပထမဆုံးလက်ခံတတ်အောင် ကြိုးစားပါ။
Rejection ကိုလက်ခံတတ်အောင်စဉ်းစားပါ။ ရလာတဲ့ result ကိုကြည့်ပြီး နောင်တမရပါနဲ့။ အတွေးမလွန်ပါနဲ့။ ငါကတော့ အခု ဒီ result ရခဲ့ပြီး ဆိုတာကို လက်ခံနိုင်အောင်ကြိုးစားပါ။
📝ကိုယ့်ကိုယ်ကိုယ် reflect လုပ်ပါ။
ဘယ်အချက်လေးတွေလိုအပ်နေလဲ? ဘာတွေပြင်ဆင်ရမလဲဆိုတာကို ပြန်လည်စဉ်းစားကြည့်ပါ။
📝 ကြိုးစားမှုတွေကို မရပ်တန့်လိုက်ပါနဲ့။
လဲကျတိုင်း ပြန်ထ၊ လိုအပ်ချက်တွေကို ပြန်လည်ပြင်ဆင်ပြီး ပြန်လည်ကြိုးစားကြည့်ပါ။
Developer ကြီးတို့ကရော Rejection တွေကို ဘယ်လိုမျိုးကျော်ဖြတ်လေ့ရှိကြလဲ ?
သူငယ်ချင်း မရွေးမုန့် Developer လေးတွေကိုလည်း mention ပြီးပြောလိုက်ကြပါဉီးနော် 👀
Web Development နဲ့သက်ဆိုင်တဲ့ အကြောင်းအရာတွေနဲ့၊ video content တွေကို အောက်ပါ social media platform တွေကနေလည်းမျှဝေပေးနေတာကြောင့် follow လုပ်ထားပေးကြပါဦးနော်
Creative Coder ကို Facebook ကနေ ရှာရတာခက်ခဲလာရင် ဒီနေရာတွေမှာ ကျွန်တော်တို့ရှိပါတယ်။
Tiktok
https://www.tiktok.com/@creativecodermm?_t=8mufG7lMQiY&_r=1
Telegram
https://t.me/creativecodermm
Youtube
https://youtube.com/c/CreativeCoderMyanmar
https://www.linkedin.com/company/creative-coder-myanmar/
https://www.facebook.com/creativecodermm
CreativeCoder Learning Platform
http://creativecodermm.com
#creative_coder_myanmar
TikTok
Creative Coder Myanmar on TikTok
@creativecodermm 351 Followers, 2 Following, 686 Likes - Watch awesome short videos created by Creative Coder Myanmar
https://www.facebook.com/100064708297617/posts/pfbid0QQCVVwZgwQVsoSWSeLuQy596CqzPnNdH6XGvZvRhDBudpRvEUxKRDWWY4xPqCKhol/
PHP Laravel Zoom Class လေး ကျောင်းသား ၁၀ ယောက်ကျော်ထိ ရှိလာပြီဖြစ်ပါတယ်ခင်ဗျာ။🥰 ဒီ batch လေးပြီးရင် ကျွန်တော် Laravel Zoom class လေး ခဏနားပြီး တခြားအတန်း အသစ်လေး ဖွင့်ဖြစ်သွားမှာမို့ စိတ်ဝင်စားသူများ ဒီ batch နောက်မကျစေရအောင် အသိလေးပေးလိုက်ပါတယ်ခင်ဗျာ။
PHP Laravel Zoom Class လေး ကျောင်းသား ၁၀ ယောက်ကျော်ထိ ရှိလာပြီဖြစ်ပါတယ်ခင်ဗျာ။🥰 ဒီ batch လေးပြီးရင် ကျွန်တော် Laravel Zoom class လေး ခဏနားပြီး တခြားအတန်း အသစ်လေး ဖွင့်ဖြစ်သွားမှာမို့ စိတ်ဝင်စားသူများ ဒီ batch နောက်မကျစေရအောင် အသိလေးပေးလိုက်ပါတယ်ခင်ဗျာ။
Facebook
Creative Coder Myanmar
Web Development With PHP + Laravel (Batch-7)
Web Application တစ်ခုကို အခြေခံ အကျဆုံးကနေ အစဆုံး ဖန်တီးတတ်လိုပါသလား ? ဒါဆိုရင် ဒီ Zoom အတန်းလေးက သင့်အတွက်ပါပဲ။ ဒီအတန်းမှာ
✅ PHP...
Web Application တစ်ခုကို အခြေခံ အကျဆုံးကနေ အစဆုံး ဖန်တီးတတ်လိုပါသလား ? ဒါဆိုရင် ဒီ Zoom အတန်းလေးက သင့်အတွက်ပါပဲ။ ဒီအတန်းမှာ
✅ PHP...
Telegram နဲ့ TikTok မှာ Creative Coder ရှိနေတာ သိပြီးကြပြီလား?
=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°
Creative Coder ရဲ့ အတန်းတွေအကြောင်း၊ စဉ်ဆက်မပြတ်တင်ဆက်ပေးနေတဲ့ web development နဲ့ပတ်သက်တဲ့ knowledge sharing တွေအကြောင်း အချိန်နဲ့ တစ်ပြေးညီသိရှိနိုင်ဖို့ Telegram နဲ့ TikTok မှာ Creative Coder ရှိနေပါပြီ။
Tips and Tricks တွေကို sharing လုပ်ပေးနေတာဖြစ်လို့ follow ထားပြီးစောင့်ကြည့်ကြဖို့လည်း မမေ့နဲ့နော် 👀
Tiktok
https://www.tiktok.com/@creativecodermm?_t=8mufG7lMQiY&_r=1
Telegram
https://t.me/creativecodermm
Youtube
https://youtube.com/c/CreativeCoderMyanmar
Linkedin
https://www.linkedin.com/company/creative-coder-myanmar/
Facebook
https://www.facebook.com/creativecodermm
CreativeCoder Learning Platform
http://creativecodermm.com
#creative_coder_myanmar
#creative_coder_myanmar
=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°
Creative Coder ရဲ့ အတန်းတွေအကြောင်း၊ စဉ်ဆက်မပြတ်တင်ဆက်ပေးနေတဲ့ web development နဲ့ပတ်သက်တဲ့ knowledge sharing တွေအကြောင်း အချိန်နဲ့ တစ်ပြေးညီသိရှိနိုင်ဖို့ Telegram နဲ့ TikTok မှာ Creative Coder ရှိနေပါပြီ။
Tips and Tricks တွေကို sharing လုပ်ပေးနေတာဖြစ်လို့ follow ထားပြီးစောင့်ကြည့်ကြဖို့လည်း မမေ့နဲ့နော် 👀
Tiktok
https://www.tiktok.com/@creativecodermm?_t=8mufG7lMQiY&_r=1
Telegram
https://t.me/creativecodermm
Youtube
https://youtube.com/c/CreativeCoderMyanmar
https://www.linkedin.com/company/creative-coder-myanmar/
https://www.facebook.com/creativecodermm
CreativeCoder Learning Platform
http://creativecodermm.com
#creative_coder_myanmar
#creative_coder_myanmar
TikTok
Creative Coder Myanmar on TikTok
@creativecodermm 351 Followers, 2 Following, 686 Likes - Watch awesome short videos created by Creative Coder Myanmar
Visibility နဲ့ပတ်သက်ပြီး ကောင်းမွန်စွာကိုင်တွယ်နိုင်တဲ့ isInViewpoint Function 🧑💻
=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°
Web Development ပိုင်း မှာ visibility နဲ့ပတ်သက်တဲ့ element တွေကို ကိုင်တွယ်နိုင်ဖို့ function လေးနဲ့မိတ်ဆက်ပေးပါရစေ။
isInViewPort function ကို များသောအားဖြင့် lazy loading, infinite scroll, animation လုပ်တဲ့နေရာတေွမှာ အသုံးဝင်တဲ့ function လေးဖြစ်ပါတယ်.
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth document.documentElement.clientWidth)
);
}
// Usage
const element = document.querySelector('#myElement');
if (isInViewport(element)) {
console.log('Element is in viewport');
}
Code example မှာဆိုရင် ပထမဆုံး isInViewpoint Function ကနေပြီးတော့ <div> <img> စတဲ့ element တစ်ခုကို select လုပ်ပါတယ်။
ပြီးရင်တော့ const rect = element.getBoundingClientRect(); ဆိုတဲ့ line လေးကနေတစ်ဆင့် html web page မှာရှိတဲ့
element ရဲ့ position ကို ယူပြီး rect လို့ခေါ်တဲ့ variable ထဲမှာသိမ်းပေးထားပါတယ်။
ဒီ function ရဲ့အရေးအကြီးဆုံးအပိုင်းအနေနဲ့ကတော့ rect object ရဲ့ properties ကိုအသုံးပြုပြီး condition (4) ခု စစ်ပေးပါတယ်။ element ကိုမြင်ရတယ်ဆိုရင် true လို့ return ပြန်ပေးပြီး မမြင်ရဘူးဆိုရင်တော့ false ကို return ပြန်ပေးပါတယ်။
👉rect.top >= 0
ဒါကတော့ element ရဲ့ထိပ်ပိုင်းက viewpoint ရဲ့ ထိပ်ဆုံးမှာရောက်နေလားဆိုတာကို စစ်တာပါ။
👉rect.left >= 0
ဒါကတော့ element ရဲ့ ဘယ်ဘက်ခြမ်းက viewpoint ရဲ့ ဘယ်ဘက်ခြမ်းမှာ ရောက်နေလားဆိုတာကိုစစ်တာပါ
👉rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
ကတော့ element ရဲ့အောက်ခြေအတိုင်းအတာက viewpoint ရဲ့ height အတွင်းမှာ ၀င်နေလားဆိုတာစစ်တာပဲဖြစ်ပါတယ်။
👉rect.right <= (window.innerWidth || document.documentElement.clientWidth)
ဒါကလည်း bottom check နဲ့အလုပ်လုပ်တဲ့ပုံစံတူပါတယ်။ element ရဲ့ညာဘက်ခြမ်းက viewpoint ရဲ့အကျယ်အတွင်းမှာရှိနေလားဆိုတာစစ်ပေးတာပါ။
ဒီနည်းလမ်းလေးက web page တွေမှာ element တစ်ခုကို screen အတွင်းမှာ သေချာမြင်ရလားဆိုတာကို စစ်ဆေးပေးနိုင်တဲ့ အရိုးရှင်းဆုံးနည်းလမ်းလေးပဲဖြစ်ပါတယ်။
Creative Coder ရဲ့ အတန်းတွေအကြောင်း၊ စဉ်ဆက်မပြတ်တင်ဆက်ပေးနေတဲ့ web development နဲ့ပတ်သက်တဲ့ knowledge sharing တွေအကြောင်း အချိန်နဲ့ တစ်ပြေးညီသိရှိနိုင်ဖို့ Telegram နဲ့ TikTok မှာ Creative Coder ရှိနေပါပြီ။
Tips and Tricks တွေကို sharing လုပ်ပေးနေတာဖြစ်လို့ follow ထားပြီးစောင့်ကြည့်ကြဖို့လည်း မမေ့နဲ့နော် 👀
Tiktok
https://www.tiktok.com/@creativecodermm?_t=8mufG7lMQiY&_r=1
Telegram
https://t.me/creativecodermm
Youtube
https://youtube.com/c/CreativeCoderMyanmar
Linkedin
https://www.linkedin.com/company/creative-coder-myanmar/
Facebook
https://www.facebook.com/creativecodermm
CreativeCoder Learning Platform
http://creativecodermm.com
#creative_coder_myanmar
=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°
Web Development ပိုင်း မှာ visibility နဲ့ပတ်သက်တဲ့ element တွေကို ကိုင်တွယ်နိုင်ဖို့ function လေးနဲ့မိတ်ဆက်ပေးပါရစေ။
isInViewPort function ကို များသောအားဖြင့် lazy loading, infinite scroll, animation လုပ်တဲ့နေရာတေွမှာ အသုံးဝင်တဲ့ function လေးဖြစ်ပါတယ်.
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth document.documentElement.clientWidth)
);
}
// Usage
const element = document.querySelector('#myElement');
if (isInViewport(element)) {
console.log('Element is in viewport');
}
Code example မှာဆိုရင် ပထမဆုံး isInViewpoint Function ကနေပြီးတော့ <div> <img> စတဲ့ element တစ်ခုကို select လုပ်ပါတယ်။
ပြီးရင်တော့ const rect = element.getBoundingClientRect(); ဆိုတဲ့ line လေးကနေတစ်ဆင့် html web page မှာရှိတဲ့
element ရဲ့ position ကို ယူပြီး rect လို့ခေါ်တဲ့ variable ထဲမှာသိမ်းပေးထားပါတယ်။
ဒီ function ရဲ့အရေးအကြီးဆုံးအပိုင်းအနေနဲ့ကတော့ rect object ရဲ့ properties ကိုအသုံးပြုပြီး condition (4) ခု စစ်ပေးပါတယ်။ element ကိုမြင်ရတယ်ဆိုရင် true လို့ return ပြန်ပေးပြီး မမြင်ရဘူးဆိုရင်တော့ false ကို return ပြန်ပေးပါတယ်။
👉rect.top >= 0
ဒါကတော့ element ရဲ့ထိပ်ပိုင်းက viewpoint ရဲ့ ထိပ်ဆုံးမှာရောက်နေလားဆိုတာကို စစ်တာပါ။
👉rect.left >= 0
ဒါကတော့ element ရဲ့ ဘယ်ဘက်ခြမ်းက viewpoint ရဲ့ ဘယ်ဘက်ခြမ်းမှာ ရောက်နေလားဆိုတာကိုစစ်တာပါ
👉rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
ကတော့ element ရဲ့အောက်ခြေအတိုင်းအတာက viewpoint ရဲ့ height အတွင်းမှာ ၀င်နေလားဆိုတာစစ်တာပဲဖြစ်ပါတယ်။
👉rect.right <= (window.innerWidth || document.documentElement.clientWidth)
ဒါကလည်း bottom check နဲ့အလုပ်လုပ်တဲ့ပုံစံတူပါတယ်။ element ရဲ့ညာဘက်ခြမ်းက viewpoint ရဲ့အကျယ်အတွင်းမှာရှိနေလားဆိုတာစစ်ပေးတာပါ။
ဒီနည်းလမ်းလေးက web page တွေမှာ element တစ်ခုကို screen အတွင်းမှာ သေချာမြင်ရလားဆိုတာကို စစ်ဆေးပေးနိုင်တဲ့ အရိုးရှင်းဆုံးနည်းလမ်းလေးပဲဖြစ်ပါတယ်။
Creative Coder ရဲ့ အတန်းတွေအကြောင်း၊ စဉ်ဆက်မပြတ်တင်ဆက်ပေးနေတဲ့ web development နဲ့ပတ်သက်တဲ့ knowledge sharing တွေအကြောင်း အချိန်နဲ့ တစ်ပြေးညီသိရှိနိုင်ဖို့ Telegram နဲ့ TikTok မှာ Creative Coder ရှိနေပါပြီ။
Tips and Tricks တွေကို sharing လုပ်ပေးနေတာဖြစ်လို့ follow ထားပြီးစောင့်ကြည့်ကြဖို့လည်း မမေ့နဲ့နော် 👀
Tiktok
https://www.tiktok.com/@creativecodermm?_t=8mufG7lMQiY&_r=1
Telegram
https://t.me/creativecodermm
Youtube
https://youtube.com/c/CreativeCoderMyanmar
https://www.linkedin.com/company/creative-coder-myanmar/
https://www.facebook.com/creativecodermm
CreativeCoder Learning Platform
http://creativecodermm.com
#creative_coder_myanmar
TikTok
Creative Coder Myanmar on TikTok
@creativecodermm 351 Followers, 2 Following, 686 Likes - Watch awesome short videos created by Creative Coder Myanmar
https://www.facebook.com/100064708297617/posts/pfbid02U5VCPUDmyJB67dqPP5DhCnfLB5GPqhb3WuPJMpD7gZYHBx7qYDCHg36d2HFHDkjZl/
Course Outline အသစ်နဲ့ PHP Laravel Zoom Class လေး Discount နဲ့အပ်နိုင်မို့ ကျောင်းသား ၃ ယောက်သာလိုပါတော့မယ်ခင်ဗျာ။🚀
ဒီ batch မှာ Project အသစ် တူတူရှယ်ရေးချင်ပါတယ်ဗျို့။
Course Outline အသစ်နဲ့ PHP Laravel Zoom Class လေး Discount နဲ့အပ်နိုင်မို့ ကျောင်းသား ၃ ယောက်သာလိုပါတော့မယ်ခင်ဗျာ။🚀
ဒီ batch မှာ Project အသစ် တူတူရှယ်ရေးချင်ပါတယ်ဗျို့။
Facebook
Creative Coder Myanmar
Web Development With PHP + Laravel (Batch-7)
Web Application တစ်ခုကို အခြေခံ အကျဆုံးကနေ အစဆုံး ဖန်တီးတတ်လိုပါသလား ? ဒါဆိုရင် ဒီ Zoom အတန်းလေးက သင့်အတွက်ပါပဲ။ ဒီအတန်းမှာ
✅ PHP...
Web Application တစ်ခုကို အခြေခံ အကျဆုံးကနေ အစဆုံး ဖန်တီးတတ်လိုပါသလား ? ဒါဆိုရင် ဒီ Zoom အတန်းလေးက သင့်အတွက်ပါပဲ။ ဒီအတန်းမှာ
✅ PHP...
Vscode မှာ တစ်ခါတည်း Chatting ရိုက်မေးနိုင်မဲ့ AI Coding Assistant🚀
ကျွန်တော်တော့ တော်တော်လေး သဘောကျမိပါတယ်။ မိတ်ဆွေတို့ရော စမ်းပြီးကြပြီလားဗျ👀 👇👇👇
https://vt.tiktok.com/ZSYUC992X/
ကျွန်တော်တော့ တော်တော်လေး သဘောကျမိပါတယ်။ မိတ်ဆွေတို့ရော စမ်းပြီးကြပြီလားဗျ👀 👇👇👇
https://vt.tiktok.com/ZSYUC992X/
TikTok
TikTok · Creative Coder Myanmar
Check out Creative Coder Myanmar’s video.