Brackets Color Palette Extension

Color Palette เครื่องมือจำเป็น สำหรับการดูดสี

ปกติแล้ว ก่อนที่เราจะเริ่มเขียน Code สำหรับ Website แต่ละหน้า เราะมักจะทำการออกแบบหน้าตา และสีของแต่ละหน้า บน Photoshop/Illustrator/Sketch ก่อน แต่บางทีเราก็ไม่ได้จดไว้ว่า ปุ่มที่เราออกแบบไว้สีอะไร Tab สีอะไร ครั้นจะเปิด Photoshop ขึ้นมาเพื่อเช็คสี ก็เสียเวลาอีก
Brackets มีเครื่องมือที่สามารถช่วยให้คุณเช็คสีจากรูปได้ง่ายๆ โดยการลง Extension ที่ชื่อว่า Brakcets Color Palette

เปิด file รูปที่ต้องการดูดสีขึ้นมาใน Brackets (Double Click ที่ชื่อรูปในแถบซ้ายมือครับ)
กดที่จานสี ด้านซ้าย

Brackets Color Palette จะเปิด Panel ขึ้นมาด้านล่าง เราสามารถเลื่อนรูปด้านซ้าย เพื่อดูรูป และจุดที่ต้องการเพื่อทำการดูดสีได้เลยครับ

หลังจากกดแล้ว เราก็สามถ Copy ค่าสีไปใช้งานใน Website ของเราได้เลย

สะดวก รวดเร็ว และไม่เปลือง resource เครื่องแบบนี้ ต้องลองดูนะครับ ผมใช้แล้ว ติดใจมากเลย

* ผมขอออกตัวก่อนนะครับ ว่าผมไม่ได้เก่งกาจอะไร เพียงแต่ขอนำเสนอเท่านั้นเอง

CSS Box Model ตอนที่ 1

CSS Box Model คืออะไร?

หลายๆ คน คงงง กับคำถามนี้ หรือบางคนอาจจะเคยรู้จักมาแล้วบ้าง
CSS Box Model คือการทำงานของ Browser ใช้ในการสร้างส่วนประกอบของ HTML ที่เราใช้ในหน้า web site ต่างๆ ตามปกติแล้ว Browser จะสร้างส่วนประกอบต่างๆ เป็นกล่องสี่เหลี่ยม (Box Model) และจัดเรียงกล่องต่างๆเหล่านี้ ตามส่วนประกอบของ HTML / CSS ที่เรากำหนด

จากภาพด้านบน ผมได้สร้าง <div> ไว้ภายใต้ <body> และกำหนดให้ border มีเส้นสีแดง (จะแนะนำส่วนของ code ไว้ในลำดับต่อไป) โดยจะเห็นได้ว่า มีเส้นกรอบสี่เหลี่ยมทั้งหมด 3 กรอบด้วยกัน (html, body, div ตามลำดับจากนอกเข้าใน)
สรุปง่ายๆเลยว่า ทุก html tag ที่เรามีใน html file จะถูกแปลมาเป็นกล่องสี่เหลี่ยม (Box Model) เดี๋ยวมาลองดูตัวอย่างจาก website จริงๆบ้างดีกว่า

จากรูปข้างบน ผมเอามาจาก blog นี้เองครับ Text Editor สำหรับ นักพัฒนา (Developer) ก็จะเห็นได้ว่า html tag เป็น กล่องสี่เหลี่ยมหมดเหมือนกัน ไม่มีข้อยกเว้นครับ

HTML / CSS กับ Box Model

HTML Tag ที่จะใช้เป็น Container เช่น DIV, SPAN, DT
CSS: width ใช้ในการบอกขนาดของกล่อง
CSS: padding ใช้กำหนดระยะห่างระหว่าง ขอบของกล่อง (border) กับเนื้อกหาที่อยู่ภายในกล่อง
CSS: border ใช้กำหนดขนาดของเส้นขอบ
CSS: margin ใช้กำหนดระยะห่างระหว่างกล่องนี้กับกล่องข้างๆ

ตอนนี้เอาคร่าวๆก่อนนะครับ เดี๋ยวจะมาต่อในรายละเอียดในบทความต่อไปครับ

Emmet สุดยอด Extension ที่ขาดไม่ได้

Emmet สุดยอด Extension สำหรับ Programmer

ช่วย Auto Complete HTML/CSS/JS Tag ให้เรา
พิมพ์ตัวย่อแล้วขึ้น TAG เต็มๆมาให้เรา
ใส่ Class / ID / Name / Attribute / Text ก็ยังได้

```
!
```
จะได้โครงการ HTML5 ออกมาเลยทั้งยวง ตามข้างล่างนี้เลยครับ
```
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 
</body>
</html>
    
```
```
p
```
จะได้ TAG ออกมาตามนี้ครับ
```
<P></P>
```
เป็นการทำ Auto Complete TAG ให้ครับ
```
ul>li
```
จะได้ผลลัพธ์ตามนี้ครับ
```
<ul>
 <li></li>
</ul>
     
```
เป็นการสร้าง TAG ul และ li ให้ตามลำดับ
```
ul>li{number $}*4
```
ผลลัพธ์ที่ได้
```
<ul>
 <li>number 1</li>
 <li>number 2</li>
 <li>number 3</li>
 <li>number 4</li>
</ul>
     
```
เป็นการสร้าง TAG ul และ li ให้ li มีข้อความว่า number ตามด้วยตัวเลข 1 หลัก หากต้องการ 2 หลักให้เปลี่ยนจาก $ เป็น $$ และมี li ทั้งหมด 4 คู่ด้วยกัน หากต้องการให้มี 10 คู่ ให้เปลี่ยนจาก *4 เป็น *10
```
.className
```
จะได้
```
<div class="className"></div>
```
เป็นการสร้าง TAG div ขึ้นมา โดยให้มี class="className" ชื่อ class จะตามหลัง . (จุดเสมอ)
```
span.className#idName
```
จะได้เป็น
```
<span class="className" id="idName"></span>
```
จะสร้าง tag span ขึ้นมาโดยมี class="className" id="idName"ชื่อของ id จะตามหลัง # เสมอครับ

เสริมความสามารถให้กับ Brackets

มาเสริมความสามารถให้กับ Brackets กันเถอะ

อันดับแรกไปที่ File --> Extension Manager... จะได้หน้าต่างออกมาตามรูปด้านล่างครับ

พิมพ์ชื่อ Extension ในช่อง Search
อยากลงตัวไหน กดปุ่ม install ด้านขวาได้เลย หรือถ้าต้องการอ่านรายละเอียดและวิธีการใช้ ให้กดไปที่ More info... ของแต่ละตัวได้เลยครับ

Emmet: ตัวนี้ห้ามขาดเลยโดยเด็ดขาด เพราะว่าจะช่วยให้เราทำงานได้เร็วขึ้น ลองลงก่อน แล้วพิมพ์ตามนี้นะครับ ul>li*4
แล้วกด TAB นะครับ แล้วลองดูผลครับ จะรู้ว่าทำไมถึงบอกว่าห้ามพลาดครับ
Beautify: ตัวนี้จะช่วยจัด indent ให้กับ Code ที่เละเทะของเราครับ เพียงแค่เลือก code ที่ต้องการจะ indent แล้วกด Ctrl+Shift+L
Indent Guides: อันนี้จะช่วยให้เราเห็นเส้นว่ากด TAB ไปแล้วกี่ทีครับ
Brackets Color Palette: ใช้จิ้มที่รูป เพื่อดึงค่า HEX ของสีออกมาใช้ครับ ไว้จะอธิบายเพิ่มเติมในอีกบทความนึงนะครับ
Autoprefixer: เวลาเราเขียน CSS บางทีเราจำเป็นต้องใส่ prefixer ด้วย Extension ตัวนี้จะช่วยใส่ให้เราอัตโนมัติเวลา SAVE ครับ ช่วยงานเราได้เลยทีเดียว
W3C Validation: บางคนจะเคร่ง W3C มาก แต่ก็ไม่รู้ว่าจะแก้ไขยังไง ให้ตรงกับ W3C เพียงแค่ลง Extension ตัวนี้ คุณจะตรวจ HTML Tag ของคุณได้ในพริบตา

Text Editor for Programmer/Developer

Text Editor สำหรับ นักพัฒนา (Developer)

การหา Text Editor ดีๆสักตัวสำหรับการเขียนโปรแกรมนั้น อาจจะเป็นปัญหาโลกแตกสำหรับนักพัฒนา (Developer/Programmer) หลายๆคน เพราะว่ามีเยอะไปหมด แต่ละคนก็จะชอบ Text Editor แต่ละค่ายไม่เหมือนกัน
ในบทความนี้ ผมจะขอแนะนำ Text Editor ที่ผมเคยใช้ และเห็นว่าดีนะครับ จะมีทั้งฟรี และไม่ฟรี หลายๆตัวด้วยกันครับ

EditPlus: สุดยอดแห่งความคลาสสิกครับ ผมคิดว่าใครที่อายุเกิน 30 ปี จะต้องเคยใช้แน่นอน ตัวนี้ไม่ฟรีนะครับ

NotePad++: เจอกันครั้งแรกตอนผมไปอินเดียเมือ 13 ปีที่แล้วครับ เพื่อนชาวอินเดียเป็นคนแนะนำให้ใช้ครับ ตัวนี้ฟรีและดีในระดับหนึงครับ

Sublime: สุดยอดแห่ง Text Editor ตัวหนึ่งเท่าที่เคยใช้ครับ ไม่เคยทำให้เสียใจเลย ทำงานได้ไว เร็ว มีให้ใช้ทั้งบน Windows และ Mac ครับ มี Package เสริมให้ใช้งานได้ฟรีๆ อีกต่างหาก ตัวนี้ไม่ฟรีครับ

Brackets: ตัวใหม่สุดที่ผมกำลังหัดใช้ครับ สะดวก รวดเร็ว มี Extension เพียบเลย ไว้จะแนะนำเพิ่มเติมในบทความต่อๆ ไปครับ ตัวนี้ฟรี และเก่งครับ ใช้แทน Sublime ได้เลยทีเดียว

Atom: ตัวนี้มาแรงครับ ผมไม่เคยใช้เหมือนกัน เห็นว่าพัฒนาโดย GitHub ครับ