Ei Maung eimg

CSS in Modern Web Projects

Web Project တွေအတွက် CSS ကုဒ်တွေ ရေးသားတဲ့အခါ External CSS, Internal CSS, Inline CSS စသဖြင့် ပုံစံအမျိုးမျိုး ရေးသားလို့ရတာကို သိရှိကြပြီး ဖြစ်ပါလိမ့်မယ်။ ကျွန်တော်သင်ကြားပို့ချနေတဲ့ Professional Web Developer Course မှာဆိုရင် CSS ရဲ့ အဓိကအားသာချက်ဟာ HTML Markup (Content) နဲ့ Style ကို ခွဲခြားရေးသား နိုင်ခြင်းဖြစ်ကြောင်း ထည့်သွင်း ရှင်းပြလေ့ရှိပါတယ်။ ဒီလိုခွဲခြား ရေးသားနိုင်တဲ့အတွက် Reusable ခေါ် ပြန်လည်အသုံးပြုနိုင်တဲ့ Style Sheet များနဲ့ Markup နဲ့ Style ကို သီးခြားခွဲပြီး စီမံနိုင်မှုတို့ကြောင့် ပြုပြင်ထိမ်းသိမ်းရ လွယ်တဲ့ကုဒ်ကို ရရှိစေတယ်ဆိုတာကိုလည်း ထည့်သွင်း ရှင်းပြရပါတယ်။

ဒါပေမယ့် React အပါအဝင် ခေတ်ပေါ် JavaScript Framework တွေ ထွက်ပေါ်လာခြင်းနဲ့အတူ ချည်းကပ်ပုံတွေလည်း ပြောင်းလဲလို့ လာခဲ့ပါပြီ။ အရင်က တစ်ကူးတစ်က ခွဲခြားရေးသားရတဲ့ CSS ကုဒ်တွေကို HTML တွေထဲမှာ ထည့်သွင်းရေးသားလာကြပြန်ပါပြီ။ အရင်က အထူးအလေးပေး ရှောင်ရှားရတဲ့ Inline Style ရေးထုံးကိုလည်း အခုအခါ အသုံးပြုကြဖို့ တိုက်တွန်းလာကြပြန်ပါပြီ။ ဘာကြောင့် ဒီလိုတွေ ပြောင်းလဲလာသလိုဆိုတာကို ရှင်းပြရမယ်ဆိုရင် ပေရှည်ပါလိမ့်မယ်။

အတ

ES6 - Modern JavaScript

ခြောက်ကြိမ်မြောက် တည်းဖြတ်မှုဖြစ်သည့်အတွက် ES6 ဟု အတိုကောက်ခေါ်၍ 2015 ခုနှစ်တွင် ဖန်တီးခဲ့သည့် အတွက် ECMAScript2015 ဟု ရံဖန်ရံခါ ခေါ်သည့် နည်းပညာသည် လက်ရှိ JavaScript (ES5) ကို အဆင့်မြှင့်တင်ထားသည့် နည်းပညာဖြစ်သည်။ ES6 တွင် ပါဝင်လာသည့် လုပ်ဆောင်ချက်များမှ အချို့ကို ရွေးထုတ် ဖော်ပြလိုက်ပါသည်။

Block-scope Variable

မူလ JavaScript တွင် var Keyword ကို အသုံးပြု၍ Variable များ ကြေငြာနိုင်သည်။ ထို Variable များသည် Function-scope သဘောသဘာဝ ရှိကြသည်။ ES6 တွင် let Keyword ကို အသုံးပြု၍ Block-scope Variable များ ကြေငြာအသုံးပြုနိုင်သည်။

let i = 10

JavaScript Promise & async/await

JavaScript တွင် Asynchronous process များအတွက် Callback များကို သုံးနိုင်သည်။ Asynchronous Process ဆိုသည်မှာ Synchronous Process ၏ ဆန့်ကျင်ဘက်ဖြစ်သည်။ Synchronous Process ဆိုသည်မှာ လုပ်ငန်းစဉ်များကို တစ်ခုပြီးမှသာ နောက်တစ်ခု ဆက်ခြင်းအားဖြင့် အစီအစဉ်အတိုင်း အလုပ်လုပ်သွားသည့် Process ဖြစ်သည်။ Asynchronous Process များတွင် လုပ်ငန်းစဉ်တစ်ခု ပြီးဆုံးအောင် နောက်တစ်ခုက စောင့်ရန်မလို၊ ကြိုတင်၍သော်လည်ကောင်း၊ ပြိုင်တူသော်လည်ကောင်း ဆောင်ရွက်သည့် သဘောဖြစ်သည်။

ဥပမာ - ကောင်မလေးတစ်ယောက်ကို ချဉ်းကပ်စကားပြောလိုသည့် လူငယ်တစ်ဦး ရှိသည် ဆိုကြပါစို့။ ထိုလုပ်ငန်းစဉ်အတွက် Synchronous Process ကို သုံးပါက အောက်ပါအတိုင်း ဖြစ်ပေလိမ့်မည်။

function check() {
	// walk to her
	// status = check her out

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.wrap {
	width: 800px;
	margin: 20px auto;
	position: relative;

	<?php

	$conn = mysqli_connect("localhost", "root", "");
	mysqli_select_db($conn, "test");

	$start = isset($_GET['start']) ? $_GET['start'] : 0;

	$result = mysqli_query($conn, "SELECT * FROM countries LIMIT $start, 10");

	$total = mysqli_query($conn, "SELECT * FROM countries");

	<?php
	function generate_thumb($source_image_path, $thumbnail_image_path, $result_width, $result_height) {
	if(!file_exists($source_image_path)) {
	return false;
	}

	if(!getimagesize($source_image_path)) {
	return false;;
	}

	moment.locale('my-mm', {
	months: 'ဇန်နဝါရီ_ဖေဖော်ဝါရီ_မတ်_ဧပြီ_မေ_ဇွန်_ဇူလိုင်_သြဂုတ်_စက်တင်ဘာ_အောက်တိုဘာ_နိုဝင်ဘာ_ဒီဇင်ဘာ'.split('_'),
	monthsShort: 'ဇန်နဝါရီ_ဖေဖော်ဝါရီ_မတ်_ဧပြီ_မေ_ဇွန်_ဇူလိုင်_သြဂုတ်_စက်တင်ဘာ_အောက်တိုဘာ_နိုဝင်ဘာ_ဒီဇင်ဘာ'.split('_'),
	monthsParseExact: true,
	weekdays: 'တနင်္ဂနွေ_တနင်္လာ_အင်္ဂါ_ဗုဒ္ဓဟူး_ကြာသာပတေး_သောကြာ_စနေ'.split('_'),
	weekdaysShort: 'နွေ_လာ_ဂါ_ဟူး_တေး_ကြာ_နေ'.split('_'),
	weekdaysMin: 'နွေ_လာ_ဂါ_ဟူး_တေး_ကြာ_နေ'.split('_'),
	weekdaysParseExact: true,
	longDateFormat: {
	LT: 'HH:mm',

	// INPUT: ၁၁.၁၂.၂၀၁၇
	// OUTPUT: 11.12.2017
	function mm2en(num) {
	var nums = { '၀': '0', '၁': 1, '၂': 2, '၃': 3, '၄': 4 , '၅': 5, '၆': 6, '၇':7, '၈':8, '၉':9 };
	return num.replace(/([၀-၉])/g, function(s, key) {
	return nums[key] \|\| s;
	});
	}

	// RegEx to count syllabus a string
	// with Burmese content

	"မန္တလေးမြို့မှ XYZ စတိုး (၂) ကို ဒီလမ်းအတိုင်း ဖြောင့်ဖြောင့် သွားပါ".match(
	/([က-ဪ](?!်\|္\|့်)\|[ဿ-၏]\|[!-~]\|\s)/g
	).length;

	// => 29

	#!/bin/bash
	echo "Project/DB Name: "; read -e dbname
	echo "Database User: "; read -e dbuser
	echo "Database Password: "; read -s dbpass
	echo "Run the install? (y/n)"; read -e run

	if [ "$run" == n ] ; then
	exit
	else
	wget http://wordpress.org/latest.tar.gz