අද කාලෙ අපි Internet ගියොත් ලස්සන websites දකින්න පුළුවන්. මේව ලස්සනට හදල ගන්න ගොඩක් මහන්සි වෙන්න ඕන. හැබැයි ඒවා නිර්මාණය කරන්න භාවිතා කරන්න පුළුවන් tools ගැන හොඳ අවබෝධයක් තියෙනව නම් වෙන්න ඕන මහන්සියේ ප්‍රමාණය අඩු කරගන්න පුළුවන්. Website එකක් ගත්තොත් අපිට ඒකෙ front-end හා back-end කියල development stages දෙකක් හඳුනාගන්න පුළුවන්. මේ article එකෙන් front-end එක develop කරන්න ඕන හොඳ tools ගැන තමයි කියන්න යන්නෙ.
මුලින්ම බලමු front-end එකේ වැඩ කරන්න ඕන languages. ප්‍රධාන වශයෙන් HTML, CSS හා JavaScript තමා දැනගන්න ඕන. HTML හා CSS, markup languages විදියට සලකන අතර JS scripting language එකක් විදියට තමා සලකන්නෙ. HTML tags type කරන එක ගොඩක් වෙලාව වැය වෙන දෙයක්. ඒකට හේතුව තමයි start tag එකක් වගේම end tag එකක් අපි type කරන්න ඕන වීම. හැබැයි හොඳ text editor එකක් භාවිත කරනවනම් tags auto ලැබෙන විදියට code කරන්න පුළුවන්. Sublime Text, LightTable, WebStorm, Vim, Brackets වගේ text editors ගොඩක් developers ලා අතර ප්‍රසිද්ධයි. Sublime Text 3 කියන editor එක ගොඩක් ප්‍රසිද්ධ වෙලා තියෙන්නෙ free editor එකක් මෙන්ම user friendly බව නිසා. ඒ වගේම syntax suggestions එහෙම ලැබෙනවා ගොඩක් ඉක්මනට. Vim වගේ editor එකක් terminal එකක් තමා භාවිත කරන්න පුළුවන්. Vim editor එක නම් පුරුදු වෙන්න ටිකක් කල් යනවා.
Text editors වල suggestions සේරම නොලැබෙන්න පුළුවන්. එහෙම උනොත් tags අපි manually ලියන්න ඕන. <> දාල ලියන එක අමාරු නිසා ඒකට pre-processors වලින් ලොකු අස්වැසිල්ලක් ගන්න පුළුවන්. HTML වලට හා CSS වලට වෙනම pre-processors හදල තියෙනවා. ඉස්සෙල්ල බලමු මොකද්ද මේ pre-processors කියන්නෙ කියල. අපි <html></html> කියල ලියන්තුනැව html වචනය විතරක් type කරාම <html></html> ඉබේම ලැබෙනවා නම් කොච්චර ලේසිද? අන්න ඒ ලේසි වැඩේ කරල දෙන්න තමා pre-processors තියෙන්නේ. මේක මුලින්ම install කරන්න ඕන.
Pre-processors
HTML වලට Haml කියල pre-processor එකක් තියෙනවා. එකේ තේරුම තමයි Html Abstraction Markup Language කියන එක. Terminal එකක් තියෙන OS එකක් නම් gem install haml command එකෙන් install කරන්න පුළුවන්. හැබැයි මේකට Ruby install කරලා තියෙන්න ඕන කලින්. මොකද මේක හදල තියෙන්නේ Ruby වලින්. Haml වලින් code කරපු markup එක අපිට .haml විදියට save කරලා HTML වලට convert කරන්න, haml index.haml index.html කියන command එක use කරන්න පුළුවන්. උදාහරණයක් බැලුවොත් Haml වලින් code කරලා එක compile කරාම ලැබෙන HTML එක තම මේ තියෙන්නෙ.
CSS වලට තියෙන්නේ Sass කියන pre-processor එක. Syntactically Awesome Style Sheet කියන එක තමා තේරුම. මේකත් install කරලා තමයි use කරන්න ඕන. කලින් වගේම gem install sass command එකෙන් install කරන්න පුළුවන්. මේකටත් Ruby තියෙන්න ඕන. Sass style.sass style.css command එකෙන් .css file එකකට convert කරගන්න පුළුවන්. පහල තියෙන්නෙ මේකෙන් වෙන දේ ගැන පොඩි අදහසක් ගන්න උදාහරණයක්.
මීට අමතරව LESS, Stylus, Coffescript, typescript, codekit වගේ preprocessors ගොඩක් තියෙනවා. මේවගෙ syntax දෙන්න ඕන ආකාරය අනුව එකිනෙකට වෙනස් වෙනව.
JavaScript Frameworks
Website එකක dynamic බව එකතු කරන්න තමයි බොහෝවිට JS භාවිත කරන්නේ. ඒ කියන්නේ programming concepts භාවිත කරන්න. හැබැයි අපිට ඕන dynamic ස්වභාවය JS වලින් මුල ඉඳන්ම code කරල ගන්න සෑහෙන්න මහන්සි වෙන්න ඕන. ඒ මහන්සිය අඩු කරන්න තමයි JS frameworks හදල තියෙන්නෙ. එතකොට අපිට ඕන functions ලේසියෙන් කර ගන්න පුළුවන්. හැබැයි framework එකින් එකට වෙනස්. Framework එකක වැඩ කරන්න JS ගැන හොඳ දැනුමක් තියෙන්නත් ඕන. ඒ වගේම JS වලින් pure code කරන දෙයක් ගොඩක් කෙටියෙන්, framework එකක් භාවිත කරල කරන්න පුළුවන්.
දැනට developersල අතර ජනප්‍රිය JS frameworks තමයි AngularJS, React, Backbone, Ember, jQuery, D3, Three වගේ ඒවා. සංකීර්ණ web applications හදන්න වගේම නඩත්තු කරන්න ප්‍රධාන වශයෙන් භාවිත වෙන එකක් තමයි AngularJS කියන්නේ. ඒකෙ දෙවැනි version එකත් දැන් තියෙනව. AngularJS කියන්නේ Google විසින් හදපු MVC (Model, View & Controller) කියන ගණයට අයත් Free and Open Source framework එකක්. AngularJS යනු සංකීර්ණ front end web applications හදන්න වගේම හැම දෙයක්ම handle කරන්න පුළුවන් single modular framework එකක්.
UI එහෙම නැත්තම් User Interface එක ගැන ගොඩක් හිතල website එකක් design කරන්න හොද framework එකක් තමයි React කියන්නේ. ප්‍රධාන වශයෙන් Facebook ආයතනය තමයි මේක develop කරන්නේ. මේකත් MVC වල view කියන කොටසේ තමයි වැඩි දායකත්වයක් දෙන්නේ. Facebook හා Instagram වල user interface එක සඳහා JS framework විදියට භාවිත වෙන්නේ React framework එක තමයි. React framework එක ගොඩ නැගෙන්න හේතුවුණ මුලධර්මය තමයි Virtual DOM කියන දෙය. ගොඩක් ලොකු user interface එකක් වගේම dynamic interface එකක් හදන්න හොදම tool එක තමයි react framework එක.
Simple web application එකක් හදාගන්න ලේසිම framework එක තමයි Backbone කියන්නේ. ලොකු සංකීරණ බවක් නැතුව පහසුවෙන ඕන application එකක් ගොඩනගන්න backbone framework එක භාවිත කරන්න පුළුවන්. URL හා state management වගේම data changes වලට respond කරන්න හොඳ framework එකක් තමයි backbone කියන්නේ. Pinterest, Foursquare වගේම Wallmart websites වලත් backbone framework එක තමයි භාවිත වෙන්නෙ. lightweight full featured framework එකක් විදියට පොඩි පොඩි වැඩ කරන්න backbone framework එක ලේසියෙන් ඉගෙන ගන්නත් පුළුවන්.
JavaScript framework ගැන කතාකරනකොට නොකියම බැරි framework එකක් තමයි jQuery කියන්නේ. මේ වෙනකොට වැඩිපුරම භාවිත වෙලා තියෙන JS library එකක් තමයි jQuery කියන්නේ. ඒකෙ තියෙන සරල බව ඒකට ලොකු හේතුවක් වෙන්න ඇති. ඒ වගේම cross browser websites හදන්න හොඳ අඩිතාලමක් දාපු library එකක් තමයි jQuery. Event handling, animations හදන එක ගොඩක් ලේසි වගේම ඒවා ඕනෑම browser එකක බලන්න පුළුවන් වීම jQuery වල ලොකු වාසියක්. jQuery භාවිත කරන්න නිශ්චිත අවස්ථාවක් කියන්න අමාරු හේතුව, ඒක ඕනෑම තැනක භාවිත කරන්න පුළුවන් විදියට හදල තියෙන නිසා.
Testing your JS code
Programming නිකමට හරි කරපු කෙනෙක් දන්නව code එකක් ලිව්වම ඒකෙ වැරදි අඩුපාඩු බලන්න ඕන බව. නැත්තම් තමුන් මහන්සි වුණ දෙයින් ප්‍රතිඵලයක් නැති වෙන්න පුළුවන්. Website හදද්දි JS භාවිත කරනවානම්, JS වල වෙන වැරිදි අඩුපාඩු හොයා ගන්න එක ලේසි වැඩක් නෙමේ. මොකද JS කියන්නෙ programming language එකක් නෙමේ compile කරලා වැරදි හොයන්න. වැරද්දක් තිබ්බත් ඒක ignore කරලා ඉතුරු ටික වැඩ කරන්න තමයි web browsers හදල තියෙන්නේ. මේක නිසා JS code එකේ වැරදි හොයන්න ඕන අපිමයි. Website එකක් හෝ web application එකක් release කරන්න කලින් මේක කරන්න ඕන. ඒකට හදපු වෙනම libraries තියෙනවා. Mocha & Chai කියන්නේ එහෙම එකක්. මේ දෙක දෙකක් විදියට තිබ්බත්, වැඩ කරන්න දෙකම ඕන. Mocha test එකක් කරන්න web browser එකේ වගේම node module එකකත් පුළුවන්.
හැම web browser එකකටම වැඩ කරනවද කියල බලන්න හොඳ tool එකක් තමයි Karma කියන්නේ. විශේෂයෙන්ම Mac OS එකක් වැඩ කරනවානම් IE හෝ Edge වලදී website එකේ ක්‍රියාකාරිත්වය check කරන්න ක්‍රමයක් නෑ. ඒ වගේ අවස්ථාවලට හොඳ විසදුමක් තමයි Karma.
මිට අමතරව PhantomJS කියන්නෙත් website test run කරන්න ගන්න tool එකක්. Test run කරන්න, screenshots ගන්න, network requests monitor කරන්න JS API එක මගින් automate page browsing වගේ ගොඩක් දේවල් කරන්න පුළුවන්. වැඩි දුර testing වලට තමයි මේක ගොඩක් සුදුසු.
Automation
Web development වල හොඳ task runner එකක් විදියට හදුන්වන්න පුළුවන් grunt. මේකෙන් ප්‍රධාන වශයෙන් automation තමයි වෙන්නේ. JS code එකේ තියෙන අනවශ්‍ය හිස් ඉඩ අයින් කරලා, අනවශ්‍ය දේවල් සේරම ඉවත් කරලා functionality එකට හානි නොවෙන්න code එක minify කරන දෙය grunt විසින් අපිට auto කරලා දෙනවා. ඒ වගේම lanting කියන දෙයත් වටිනා දෙයක් grunt වලින් අපිට කරල දෙන. Unit testing වුනත් grunt වලින් කරන්න පුළුවන්. nodeJS වල තමයි grunt වැඩ කරන්නේ. උදහරණයක් විදියට අපිට ඕන නම් code එක save කරාම auto browser එක reload වෙන එක වුනත් grunt වලින් අපිට කරගන්න පුළුවන්. එකයි මේකට task runner එකක් කියන්නේ.
Making mobile responsive and attractive – Front end templates
දැන් ටික කාලෙකට කලින් ඉදන් website එකක් phone එකකින් බැලුවත් tab එකකින් බැලුවත් desktop computer එකකින් බැලුවත් ලස්සනට බලන්න පුළුවන් බව ඔබට තේරුනාද? එකට ලොකු දායකත්වයක් දුන්න framework එකක් තමයි Bootstrap කියන්නේ. Bootstrap හදල තියෙන්නේ HTML, CSS, JS තුනම එකතු කරලා. Attractive විදියට web page එකක් ලස්සන කරන්න CSS භාවිත කරලා තියෙනවා Bootstrap වලින්. Responsive විදියට හදන්න Bootstrap වල grid system එකක් හදුන්වල දීල තියෙනව. එකෙන් අපිට ඕන තැනක objects place කරන්න පුළුවන්. ලස්සන buttons, forms, tables වගේ ගොඩක් දේවල් Bootstrap වලින් දාන්න පුළුවන්. Toggle, Drop Down effects වගේ ඇහැට ලස්සනක් එන විදියට web page එක ලස්සන කරන්න Bootstrap වල JS භාවිත කරලා තියෙනව. Google, Microsoft වගේ website වලත් භාවිත වෙන්නේ මේක.
Bootstrap වගේ තව template හදන්න පුළුවන් framework එකක් තමයි HTML Boilerplate කියන්නෙ. Bootstrap තරම් දේවල් කරන්න බැරි උනත් Boilerplate කියන්නේ ගොඩක් ජනප්‍රිය වෙන framework එකක්. Boilerplate විසින් print styles කියල එකක් හඳුන්වල දීල තියෙනවා. එකෙන් save on printer link අවස්ථාවකදී background styles ඉවත් කරල font colors අලු පාට කරලා efficient විදියට print කරන්න පුළුවන් තත්වයට පත් කරනවා. මේ වගේ විශේෂ features boilerplate මගින් අත්විඳින්න පුළුවන්.
හැඩවැඩ දාල ලස්සන website එකක් හදන්න භාවිත කරන්න පුළුවන් තව framework එකක් තමයි Foundation කියන්නේ. මේකෙත් flexible grid system එකක්, JS plugins වගේම විවිධ CSS components හඳුන්වා දීල තියෙනව.
Localization
ලෝකෙම භාවිත වෙන website එකකට තමයි මේ feature එක ගොඩක් වැදගත් වෙන්නෙ. මේකෙන් වෙන්නේ region එක අනුව website එක translate කරලා පෙන්නන එක. මේ කියන්නේ browser එකෙන් translate කරන එක නෙමේ. Website එක විසින්ම ඒ දේ කරලා අපිට පෙන්නන එක. Localizejs, dakwak කියන්නේ මේවා කරන්න ප්‍රසිද්ධ frameworks. Translation විතරක් නෙමෙයි මේකෙන් කරන්න පුළුවන්. අපිට ඕන region වලට පෙන්නන images පවා customize කරන්න පුළුවන්.
Frontend එකේ වැඩ කරන්න අවශ්‍ය වෙන tools තම අද සාකච්ඡා කරේ. තවත් article එකකින් backend එකට අවශ්‍ය tools ගැන කතා කරන්න බලාපොරොත්තු වෙනවා.
good one (Y)