24 Nov 2015
BOOTSTRAP 4 IS COMING
- Web Development
- Framework
ကျွန်တော်တို့ Boostrap ဆိုတဲ့ Frontend Framework လေးတစ်ခုနဲ့ မိတ်ဆက်ပေးချင်ပါတယ်..။ Bootstrap ကို ကျွန်တော်တို့အနေနဲ့ Projects တွေမှာ Responsive ရအောင် Mobile-First ဖြစ်အောင်လို့ အတွက် Front-End Web Development မှာသုံးပါတယ်...။ ကျွန်တော်ရဲ့ လက်ရှိ Clients တွေရဲ့ Dynamic Website တွေမှာလဲ Bootstrap ကိုသုံးနေပါတယ်...။
သူ့ကို Twitter မှာရှိတဲ့ Designer နဲ့ Developer နှစ်ယောက် ဖြစ်တဲ့ Mark Otto နဲ့ Jacob တို့ကနေ 2010 နှစ်လယ်ပိုင်းလောက်မှစတင်ဖန်တီးခဲ့ပါတယ်..။ စလုပ်တုန်းကတော့ Twitter Blueprint အနေနဲ့ လူသိများ ပါတယ်...။ Open-sourced Framework တစ်ခုပါ...။
သူတို့ Company မှာပဲ Style Guide အနေနဲ့ အသုံးချလာရင်ကနေ... တစ်နှစ်ကျော်လောက်မှာ Bootstrap 1 ကို 19-Aug-2011 မှာ Release လုပ်ခဲ့ပါတယ်..။ Version 3 ရောက်လာတဲ့အခါမှာတော့ Mobile First Approach ကို Default အနေနဲ့ Library ကိုပြန်ရေးခဲ့ပါတယ်...။ Version 3 အထိကို Less and Sass ဆိုတဲ့ Preprocessors တွေနဲ့အသုံးပြုလို့ရအောင်လုပ်ထားပါတယ်...။ လက်ရှိကတော့ Version 3.3.7 ကိုရောက်နေပါပြီ...။
နောက်ထပ် Development လုပ်နေတာကတော့ Bootstrap 4 ပါ...။ ခုလက်ရှိတော့ Alpha 5 ကိုရောက် နေပါပြီ...။ ကျွန်တော်တို့အနေနဲ့ Bootstrap 4 မှာပါလာတဲ့ Updated Features တွေကိုပဲ စိတ်လှုပ်ရှားစွာ နဲ့ ပြောပြသွားမှာဖြစ်ပါတယ်...။
(၁) New lines of code ပေါင်း 120,000 ကျော်ကို Creator နှစ်ယောက် ဖြစ်တဲ့ Mark Otto နဲ့ Jacob တို့အပြင်... Open Source Community တစ်ခုလုံးကဝင်ရေးထားပါတယ်...။ သူ့ကိုတော့ Production အတွက်အသုံးမပြုဖို့ တားမြစ်ထားပါတယ်...။ ပါတဲ့ Features တွေက အချိန်မရွေးအပြောင်းအလဲရှိနေ တဲ့အတွက်ပါ...။ ကိုယ့် Client Projects တွေမှာမသုံးပါနဲ့ဦး...။ ကိုယ့် Personal Projects တွေမှာ အသုံးပြုရင်း နဲ့ Full Launched Mode ကိုစောင့်ကြတာပေါ့ဗျာ...။
(၂) Version 4 မှာတော့ Less ကိုထားခဲ့ပြီး Sass နဲ့ပဲ သွားထားပါတယ်...။ Sass ကတော့ Front End Workflow မှာ Popular အဖြစ်ဆုံးပါ...။ သူ့ ကိုလုံးဝမသိသေးသူများ အနေနဲ့ အောက်က link မှာသွားဖတ်လို့ရပါတယ်..။ The Sass Language
(၃) Grid System - အရင် Version နဲ့ကတော့အတူတူ ပါပဲ...။ ဒါပေမယ့် Pixel , Percentage base ကနေ CSS uint တစ်ခုဖြစ်တဲ့ Rem based ကိုပြောင်းလိုက်ပါတယ်..။ Rem ဆိုတာကတော့ Html Root Document ကို based ယူထားတာပါ...။
(၄) Flexbox Support - Flexbox Layout နဲ့ပတ်သတ်ပြီး totally လေ့လာချင်ရင်တော့ CSS Tricks Founder ဖြစ်တဲ့ Chris Coyier ရေးထားတဲ့ Articles လေးမှာ အကုန်လေ့လာ လို့ရပါတယ်..။
(၅) Wells, Thumbnails တွေ Panels တွေနေရာမှာ Component အသစ်တစ်ခုဖြစ်တဲ့ Card နဲ့ အစားထိုးလိုက်ပါတယ်..။ Cards ဆိုတာကတော့ Content Blog လေးတစ်ခုဖြစ်ပြီး... သူ့မှာ Headers, Footers , Content, Background Color, Buttons တွေထည့်လို့ရတဲ့ Container တစ်ခုပါ...။
(၆) နောက်ထပ် Feature တစ်ခုက Reboot ပါ...။ ကျွန်တော်တို့ သုံးမယ့် Css Styles တွေကို Normalize Reset Css ပေါ်မှာ Based ယူထားပါတယ်...။
(၇) Sass Variables တွေအကုန်လုံးကို File တစ်ခုတည်း မှာ Customize လုပ်လို့ရသွားတဲ့အတွက်... ကျွန်တော်တို့ Project တစ်ခုလုံးမှာရှိတဲ့ CSS တွေကိုမထိဘဲနဲ့ စိတ်ကြိုက် ပြောင်းလို့ရပါတယ်..။
(၈) အခု Version 4 မှာတော့ IE8 ကိုချန်ထားခဲ့ပါပြီ...။ ကိုယ့် Client Project မှာ IE8 support လုပ်ချင်ရင် Version 3 ကိုသုံးပါ...။ ကျွန်တော်ထင်တာကတော့ Bad Browser ပဲ...။
(၉) Bootstrap နဲ့ပတ်သတ်ပြီး Updates တွေ New Features တွေကို သိချင်ရင်တော့ သူတို့ Community ရဲ့ Official Slack Room ရှိပါတယ်...။