Fontend Web development ဆိုတာ

                                                         

Frontend web development ဆိုတာ သတင္းအခ်က္အလက္ (data) ေတြကို Graphical user interface နဲ႔ သုံးစြဲသူ(user) ေတြလြယ္ကူစြာ အသုံးျပဳႏိုင္ေအာင္ HTML, CSS, JavaScript..

အစရွိတဲ့ programming languages ေတြကိုသုံးၿပီး ေရးဆြဲရတဲ့ အလုပ္ျဖစ္တယ္။

Frontend web developer တစ္ေယာက္အေနနဲ႔ ေအာက္ပါအခ်က္မ်ားကို သိထားသင့္တယ္။

1.Visual Experiences

Website တစ္ခုမွာ visual experience ကလည္း အေရးႀကီးပါတယ္။ website ႏွစ္ခုကို ယွဥ္ၾကည့္မယ္ ဆိုရင္ visually experience (visual design) ပိုေကာင္းတာကို လူတိုင္းႀကိဳက္ၾကတယ္။

Visual design ေကာင္းရင္ First impression ေကာင္းေကာင္းရႏိုင္တယ္။ ၿပီးေတာ့ ကိုယ့္ website ရဲ႕အခ်ိဳ႕အားနည္းခ်က္ေတြကို users ေတြအေနနဲ႔ သည္းခံေပးႏိုင္တယ္

Images, colors ေတြကိုသုံးၿပီး users ေတြကို ကိုယ္ေပးခ်င္တဲ့ emotions ေတြျဖစ္လာေအာင္ ဖန္တီးႏိုင္တယ္။

2.Layouts

Website တစ္ခုရဲ layout ဆိုတာ webpage မွာပါတဲ့ paragraphs, images, videos, links, buttons အစရွိတဲ့ elements ေတြကို ဘယ္လိုေနရာခ်ထားလည္း ဆိုတာျဖစ္ပါတယ္။ website တစ္ခုမွာ layout design ကလည္း အေရးႀကီးတယ္။

Layout design အတြက္ best practices အခ်ိဳ႕ကို ေအာက္မွာေဖၚျပထားပါတယ္

website တစ္ခုမွာ pages ေတြက အခ်ိတ္အဆက္မိေနရမယ္။ ဥပမာ Logo က page ရဲ႕ အေပၚဘယ္ေထာင့္မွာ ထားရင္ page တိုင္မွာ အဲလိုျဖစ္သင့္တယ္။ page တစ္ခုမွာ ဘယ္ဘက္မွာထားၿပီး ေနာက္ page မွာ ညာဘက္ထားတာမ်ိဳး မျဖစ္သင့္ဘူး။

white space(negative space) မ်ားမ်ားသုံးပါ။ white space ဆိုတာ elements ေတြ တစ္ခုနဲ႔တစ္ခုၾကားမွာ ရွိတဲ့ ေနရာလြတ္ေတြကိုေခၚတာျဖစ္တယ္။ CSS (margin, padding, Flexbox, grid layout) ေတြသုံးၿပီး ဖန္တီးႏိုင္တယ္။ သင္ focus ထာခ်င္တဲ့ element ကို white space သုံးၿပီး ပိုထင္ရွားေအာင္ လုပ္ႏိုင္တယ္။

website တစ္ခုမွာ ေပးထားတဲ့ message, focus ေတြကို တတ္ႏိုင္သမွ် နည္းေအာင္ ေလွ်ာ့ခ်ပါ။ users အမ်ားစုဟာ websites ေတြကို အၾကမ္းဖ်င္းပဲ ၾကည့္ၿပီး သူတို႔လိုခ်င္တဲ့ အခ်က္အလက္ မေတြ႕ဘူးထင္ရင္ ခ်က္ခ်င္း ျပန္ထြက္သြားၾကတယ္။

"Rule of think" ကိုဂ႐ုစိုက္ပါ။ ဥပမာ website မွာပါတဲ့ button တစ္ခုကို user ေတြ႕ရင္ ဘာအတြက္လည္းဆိုတာ ခ်က္ခ်င္း နားလည္ႏိုင္ရမယ္။ စဥ္းစားေနရတာမ်ိဳး မျဖစ္သင့္ဘူး။

users ရင္းႏွီးၿပီးသား ျဖစ္တဲ့ layout, patterns ေတြကို သုံးပါ။

images ေတြရဲ႕ size ကို တတ္ႏိုင္သမွ် အနည္းဆုံးျဖစ္ေအာင္ ေလွ်ာ့ခ်ပါ။ JPEGmini, Shrink O’Matic အစရွိတဲ့ tools ေတြသုံးၿပီး image ရဲ႕ quality ကို မထိခိုက္ပဲ size ကို ေလွ်ာ့ခ်ႏိုင္တယ္။

အမ်ိဳးအစားတူတဲ့ elements ေတြကို တူရာတူရာစုထားပါ။

...

3.Animation

Users က button တစ္ခုကိုႏွိပ္လိုက္တဲ့ အခ်ိန္မွာ view တစ္ခုကေန ေနာက္တစ္ခုကို ခ်က္ခ်င္း ေျပာင္းသြားတာမ်ိဳး မဟုတ္ပဲ ဆက္စပ္မႈရွိေၾကာင္း သိႏိုင္မယ္ meaningful animation ေတြထည့္လိုက္ျခင္းအားျဖင့္ users အေနနဲ႔ website ရဲ႕ အလုပ္လုပ္ပုံကို ပိုၿပီး နားလည္ႏိုင္တယ္။

4.Responsive Design

Response design ဆိုတာ users အသုံးျပဳတဲ့ devices, operating systems, screen sizes ေပၚမူတည္ၿပီး website ရဲ႕ layout ကို လိုသလိုေျပာင္းလည္းေပးတာပဲ ျဖစ္တယ္။

ယေန႔ေခတ္မွာ websites ေတြကို desktop, laptop ေတြမွာထက္ mobile phones ေတြေပၚကေန ၾကည့္ရႈတဲ့သူ ပိုမ်ားလာတယ္။ အဲဒါေၾကာင့္ mobile first approach ဆိုတာ ေခတ္စားလာတယ္။ Mobile phone လို screen အေသးေတြမွာ အဆင္ေျပေအာင္ အရင္ေရးၿပီး မွ က်န္တဲ့ screens ေတြမွာ လိုအပ္သလိုလိုက္ၿပီး ျပင္ဆင္တဲ့ နည္းလမ္းျဖစ္တယ္။ Mobile first approach ကလည္း အၿမဲတမ္းေတာ့ အဆင္မေျပႏိုင္ဘူး။ ကိုယ့္ website ရဲ႕ လုပ္ေဆာင္ခ်က္ေပၚ မူတည္ၿပီး functions ကိုအဓိကထားတဲ့ function first approach ဆိုတဲ့ idea ကို ပိုၿပီး သေဘာၾကတယ္။ watch, tv ေတြေပၚကေန အသုံးျပဳတဲ့ users ေတြရွိလာတာကိုလည္း သတိျပဳရမယ္။

Responsive design ကို CSS ရဲ႕ Media Query ကို အဓိက အသုံးျပဳၿပီး ဖန္တီးၾကတယ္။ calc(), Flexbox, Grid layout ေတြကို သုံးၿပီးလည္ ဖန္တီးႏိုင္တယ္။

5.Testing

Website testing ဆိုတာ website(web application) တစ္ခု production environment မေရာက္ခင္ bugs, errors ေတြကို ႀကိဳတင္စစ္ေဆးျခင္းျဖစ္တယ္။

Website တစ္ခုဟာ informative, accessibility and user friendly ျဖစ္သင့္တယ္။ အဲလို အခ်က္ေတြနဲ႔ ျပည့္စုံဖို႔ testing ေကာင္းေကာင္း လုပ္ရမယ္။

ေအာက္မွာေဖၚျပထာတဲ့ နည္းလမ္းေတြကို website တစ္ခုရဲ႕ လိုအပ္ခ်က္ေပၚမူတည္ၿပီး အသုံးျပဳသင့္တယ္။

Functional testing

Usability testing

Interface testing

Compatibility testing

Performance testing

Security testing

6.Tooling

Website တစ္ခုဖန္တီးဖို႔အတြက္ အေျခခံက်တဲ့ tools ေတြက text editor နဲ႔ browser ပဲျဖစ္တယ္။

Sublime text, Visual studio code, Atom တို႔က လူသုံးမ်ားတဲ့ text editors ေတြျဖစ္တယ္။

Chrome developer tool နဲ႔ Firefox developer tool တို႔ကိုလည္း အသုံးခ်တတ္ေအာင္ ေလ့လာထားသင့္တယ္။

Git လို version control system ေတြကလည္း development ပိုင္မွာ အမ်ားႀကီး ေထာက္အကူေပးတယ္။

website ကို users ေတြဘယ္လို အသုံးျပဳတယ္ဆိုတာ ေစာင့္ၾကည့္ႏိုင္တဲ့ tools ေတြသုံးပါ။ အဲလို tools ေတြသုံးျခင္းအားျဖင့္ website မွာ users ေတြဘယ္ေနရာမွာ အခက္အခဲျဖစ္ေနတယ္၊ ဘယ္ section ကိုပိုၿပီးစိတ္ဝင္စားတယ္ ဆိုတာ ျပန္သုံးသပ္ၿပီး ျပင္ဆင္စရာရွိတာ ျပင္ဆင္ႏိုင္တယ္။

7.Frameworks/Libraries

ယခင္က jQuery နဲ႔ bootstrap က လူသုံးမ်ားတဲ့ library ေတြျဖစ္တယ္။

အခုေနာက္ပိုင္း Angular, React, Vue တို႔လို modern JavaScript frameworks ေတြေခတ္စားလာတယ္။

Git, Yarn လို package manager ကို သုံးၿပီး အျခား developer ေတြ ေရးထားတဲ့ solutions ေတြကို အလြယ္တကူ ယူသုံးႏိုင္တယ္။ ကိုယ္ပိုင္ package ေတြေရးၿပီး လိုအပ္တဲ့အခ်ိန္ ျပန္လည္ အသုံးျပဳႏိုင္တယ္။

SCSS, SASS လို CSS preprocessor ေတြက CSS ေရးရာမွာ ပိုမိုလြယ္ကူေစၿပီး well organized ျဖစ္တယ္။

8.Progressive Web Applications(PWAs)

PWA ဆိုတာ web technologies ေတြကိုသုံးၿပီး offline, push notification, device hardware access, home screen app icon,... အစရွိတဲ့ "app like features" ေတြကို website တစ္ခုမွာ ရေအာင္ ဖန္တီးေရးဆြဲတဲ့ နည္းပညာျဖစ္တယ္။

9.Web APIs

အသုံးမ်ားတဲ့ web API ေတြကေတာ့

DOM (Document Object Model)

XMLHttpRequest

Fetch

Canvas

WebGL

HTMLMediaElement

Web Audio

WebRTC

Notification

Web Storage

IndexedDB

...

10.Third-party APIs

Twitter API

Google Map API

Facebook suite of APIs

YouTube API

...

အထက္မွာ ေဖၚျပထားတဲ့ အေၾကာင္းအရာေတြကေတာ့ frontend web development နဲ႔ ပတ္သက္ၿပီး ကြၽန္ေတာ္သိသေလာက္ ေျပာျပထားျခင္းျဖစ္ပါတယ္။ ျဖည့္စြက္ေျပာၾကားလိုတာ၊ အမွားေထာက္ျပလိုတာရွိရင္ comment မွာေရးသားႏိုင္ပါတယ္။ ေက်းဇူးတင္ပါတယ္ 😀😀။

Admin youtube channel:https://www.youtube.com/channel/UCuDwXphjhSSN69yxW_KzVqg?view_as=subscriber

Comming Soon channel:https://www.youtube.com/channel/UCr00kO06-4QbyZhgKkzsKvQ?view_as=subscriber

Blogger: Nyinyi_Khant