Know-Share: Slick Slider Implementation & Project Showcase

မင်္ဂလာပါ။ ဒီတစ်ခါမှာတော့ ပရောဂျက်တွေမှာ မကြာခဏသုံးလေ့ရှိတဲ့ Slick Slider ဆိုတဲ့ library အကြောင်းကို မျှဝေချင်ပါတယ်။ ပြီးရင်တော့ ဒီ slider ကို သုံးထားတဲ့ ပရောဂျက်တစ်ခုကိုလည်း မိတ်ဆက်ပေးသွားမှာပါ။ Slick Slider ဆိုတာဘာလဲ? Slick Slider ဆိုတာ ဝဘ်ဆိုဒ်တွေမှာ ပုံများ၊ အကြောင်းအရာများကို carousel (ဆလိုက်ရှိး) ပုံစံဖြင့် ပြသရာတွင် အသုံးပြုတဲ့ jQuery-based library တစ်ခုဖြစ်ပါတယ်။ အကျိုးကျေးဇူးများ ✅ Touch နဲ့ Mouse နှစ်မျိုးလုံးအတွက် အဆင်ပြေ ✅ အလိုအလျောက် ပြောင်းလဲနိုင် ✅ မျက်နှာပြင်အရွယ်အစားအလိုက် ပြောင်းလဲနိုင် ✅ အဆုံးမရှိ looping ✅ စိတ်ကြိုက် ပြင်ဆင်နိုင် အသုံးပြုနည်း အဆင့်ဆင့် အဆင့် ၁ – ဖိုင်များ ထည့်သွင်းခြင်း html အဆင့် ၂ – HTML ဖွဲစည်းပုံ html

အဆင့် ၃ – Slider ကို စတင်အသုံးပြုခြင်း javascript $(\'.slider\').slick({ slidesToShow: 3, autoplay: true, dots: true, responsive: [{ breakpoint: 768, settings: { slidesToShow: 1 } }] }); demos and other usage https://kenwheeler.github.io/slick/ ဒီ Slick Slider ကို ကျွန်တော်တိုရဲ့ ပရောဂျက်တစ်ခုဖြစ်တဲ့ JMA Group サービス付き高齢者向け住宅 カサボニータ海老名 [ JMA Group Service Casabonita Ebina\\ မှာ သုံးထားပါတယ်။ What\'s included: ???? Room photos in a slider ???? Medical service details ???? Mobile-friendly design ???? Clear navigation ???? Live Site ကိုကြည့်ရန် – https://www.jinai.jp/casabonita/ Spiceworks Myaanmar ရဲ့ ပရောဂျက်အားလုံးကို အောက်ပါ link မှာ ကြည့်ရှုနိုင်ပါတယ်။ ???? https://www.spiceworksmyanmar.com/project မိမိတိုရဲ့ Project အတွက် Web Development အကူအညီလိုရင် Spiceworks Myanmar ကို အခမဲ့ ဆက်သွယ်နိုင်ပါတယ်။ ???? ဖုန်း – 09-979 771 059, 09-450 278 133 (Viber) ???? အီးမေးလ် – enquiry@spiceworksmyanmar.com ???? Website – https://www.spiceworksmyanmar.com/contact

Web Accessibility အတွက် ဂျပန်နိုင်ငံရဲ့ စံသတ်မှတ်ချက်ဖြစ်တဲ့ miChecker အကြောင်း လေ့လာကြရအောင်။

ဂျပန်နိုင်ငံမှာ website တွေတည်ဆောက်တဲ့အခါ သေချာပေါက် ကြုံတွေ့ရမယ့် အကြောင်းအရာတစ်ခုရှိပါတယ်။ အဲ့ဒါကတော့ Web Accessibility ပါ။ အထူးသဖြင့် ဂျပန်အစိုးရဌာနတွေ၊ အများပြည်သူသုံး website တွေမှာ JIS X 8341-3 ဆိုတဲ့ စံသတ်မှတ်ချက်အတိုင်း လိုက်နာရပါတယ်။ ဒီလို စစ်ဆေးရာမှာ MIC (Ministry of Internal Affairs and Communications) က တရားဝင် အခမဲ့ ထုတ်ပေးထားတဲ့ tool တစ်ခုရှိပါတယ်။ အဲ့ဒါကတော့ miChecker ပါ။ ဒီ blog မှာ အောက်ပါအချက်တွေကို အသေးစိတ် ရှင်းပြထားပါတယ်။ ????miChecker ဆိုတာဘာလဲ၊ ဘာကြောင့် အရေးကြီးတာလဲ ????Download လုပ်ပြီး ဘယ်လို Install လုပ်ရမလဲ ????Page တစ်ခုကို ဘယ်လို Scan လုပ်ပြီး Result ကို ဘယ်လိုဖတ်ရမလဲ ????Developer, Tester, Project Manager အားလုံးသိထားသင့်တဲ့ အဖြစ်များတဲ့ Error တွေ ????သတိထားရမယ့် အချက်တွေနဲ့ လက်တွေ့အသုံးပြုနည်းတွေ ဒီ tool ဟာ WCAG 2.0 စံနှုန်းကို အခြေခံပြီး accessibility ပြဿနာတွေကို အလိုအလျောက် စက္ကန့်ပိုင်းအတွင်း ရှာဖွေပေးနိုင်ပါတယ်။ Web accessibility ဟာ မသန်စွမ်းသူတွေအတွက်သာမက SEO နဲ့ AI engine တွေအတွက်ပါ အကျိုးပြုတဲ့ good design practice တစ်ခုဖြစ်ပါတယ်။ miChecker အကြောင်း အသေးစိတ်ကို အောက်ပါ link မှာ ဖတ်ရှုနိုင်ပါတယ်။ ???? https://www.spiceworksmyanmar.com/blog/michecker-web-accessibility/ မိမိတိုရဲ့ Project အတွက် Web Accessibility အကူအညီ လိုအပ်ရင်လည်း Spiceworks Myanmar ကို အခမဲ့ consultation ရယူနိုင်ပါတယ်။ ???? ဖုန်း – 09-979 771 059, 09-450 278 133 (Viber) ???? အီးမေးလ် – enquiry@spiceworksmyanmar.com ???? Website – https://www.spiceworksmyanmar.com/contact

How We Did It: CSS Gradients for JMA Resident Site

One of the highlights of our new project for JMA was creating a vibrant, immersive background for the Ebina General Hospital recruitment site.???? Live Project: https://job.jinai.jp/resident/ ဒီ website ရဲ့ ထင်ရှားတဲ့ အချက်တစ်ခုက CSS gradient ကို အသုံးပြုထားတာပါ။ JMA project မှာသုံးခဲ့တဲ့ CSS gradient code လေးကို မျှဝေချင်ပါတယ်။ Tech Highlight: The CSS Gradient ဒါကတော့ ခေတ်မီပြီး လှပမယ့် gradient အတွက် အခြေခံ code ပါ။ CSS Gradient Code .hero-background { background: linear-gradient(135deg, #your-primary-color 0%, #your-secondary-color 50%, #your-tertiary-color 100%); } ဒီ code ရဲ့ အလုပ်လုပ်ပုံ - linear-gradient(135deg, ...): gradient က အောက်ဘယ်ဘက်ကနေ အပေါ်ညာဘက်ကို ထောင့်ဖြတ်သွားပါတယ်။ color-stop: ပထမအရောင်ကို 0% မှာ၊ ဒုတိယအရောင်ကို 50% မှာ၊ နောက်ဆုံးအရောင်ကို 100% မှာ သတ်မှတ်ထားပြီး browser က အရောင်တွေကို ချောမွေ့စွာ ပြောင်းလဲပေးပါတယ်။ အကြံပြုချက်: gradient ကို မထောက်ပံ့တဲ့ browser အဟောင်းတွေအတွက် background-color ကိုပါ သတ်မှတ်ပေးထားဖို အရေးကြီးပါတယ်။ ဒါမှ ဘယ် browser မှာဖွင့်ဖွင့် content ကို ဖတ်လိုရမှာပါ။ color gradient ကိုအသုံးပြုထားတဲ့ ဒီဇိုင်းက user experience ကို ပိုမိုကောင်းမွန်စေပြီး ဒီသေးငယ်တဲ့ အသေးစိတ်လေးက website ရဲ့ အလုံးစုံအသွင်အပြင်ကို သိသိသာသာ ပြောင်းလဲစေနိုင်ပါတယ်။#webdevelopmentt #css #gradients #UIUX #spiceworksmyanmar ✨ We can build a custom website for you! ✨ Whether you need a research lab site, company page, or any custom CMS solution — we create beautiful, fast, easy-to-manage WordPress websites tailored just for you. ???? See more of our work https://www.spiceworksmyanmar.com/project ???? Ready to transform your website? Book a free, no-obligation consultation with our experts: https://www.spiceworksmyanmar.com/contact

Daily Dose of Design EP-1

မင်္ဂလာပါ။ ဒီနေ့မှာတော့ Daily Dose of Design ဆိုတဲ့ခေါင်းစဉ်နဲ့ Figma နဲ့ Canva မှာ Blur-Glass (Frosted Glass) Effect ကို ဘယ်လိုဖန်တီးရမယ်ဆိုတာ အဆင့်ဆင့်sharing လုပ်ပေးသွားမှာဖြစ်ပါတယ်။ ✨ ဒီ Tutorial မှာ ဘာတွေပါလဲ ・Blur-glass effect ပြုလုပ်နည်း ・Figma နဲ့ Canva အတွက် အဆင့်လိုက် ညွှန်ကြားချက်များ ・Background, border radius, transparency နဲ့ drop shadow အကြောင်း အကြံပြုချက်များ UI/UX ဒီဇိုင်နာများနဲ့ ဒီဇိုင်းဝါသနာရှင်များအတွက် အထူးသင့်တော်ပါတယ် အခုမှစလေ့လာသူဖြစ်ဖြစ်၊ ကျွမ်းကျင်သူဖြစ်ဖြစ် သိသင့်တဲ့ ဒီဇိုင်းနည်းလမ်းကောင်းလေးပါ။ ????အသေးစိတ်အပြည့်အစုံဖတ်ရန် https://www.spiceworksmyanmar.com/blog/daily-dose-of-design-ep-1/

20th General Assembly of SPWM

၂၀၂၆ ခုနှစ်၊ မေလ ၂၉ ရက်နေ့က ကျင်းပခဲ့တဲ့ Spiceworks Myanmar ရဲ့ (၂၀) ကြိမ်မြောက် General Assembly အစည်းအဝေး မှာ ပါဝင်အားပေးကြတဲ့ အားလုံးကို ကျေးဇူးအထူးတင်ရှိပါတယ်။ We laughed, we learned, and we made great memories together – even from our own screens ????????❤️ Though we were apart, we were united as one team. Thank you for being part of this milestone. Until the next GA! ????