โพสต์นี้จะไม่เน้นเรื่องวิธีการเขียน Sass แต่จะเกี่ยวกับการติดตั้งและเซ็ต environment ให้เข้าที่เข้าทางเพื่อทำงานกับ Sass มากกว่าครับผม

ติดตั้ง Sass

ขอแนะนำวิธีติดตั้งผ่าน command line นะครับ เพราะง่ายดี ในเว็บของ Sass มีวิธีติดตั้งอยู่หน้าแรกบนสุดเลย ซึ่งเราต้องติดตั้งผ่าน rubygems ครับ ใน Ubuntu (12.04) นั้นไม่มีแพ็คเกจ Ruby กับ Rubygems ติดมาด้วย ก็ต้องลงสองตัวนี้ก่อนครับ ส่วนใน OSX (Lion) นั้น มี Ruby ลงมาให้แล้ว ก็ข้ามขั้นตอนนี้และติดตั้ง Sass ได้เลย

$ sudo apt-get install ruby     # หรือ ruby1.9.1
$ sudo apt-get install rubygems

จากนั้นติดตั้ง Sass ผ่าน Rubygems ครับผม

$ sudo gem install sass

เพียงเท่านี้ Sass ก็พร้อมให้เราใช้งานได้แล้ว

เริ่มใช้งาน Sass

1. เปลี่ยนไฟล์ .css เป็น .scss (เช่น จาก style.css เป็น style.scss)
2. compile ไฟล์ .scss โดยใช้ Sass

$ sass style.scss:style.css

รูปแบบของ command นี้ก็คือ

$ sass <input_file>:<output_file>

ผลลัพธ์ที่ได้คือ ได้ไฟล์ .css ที่เหมือนเดิมทุกประการ (อ้าว!?) เพราะเรายังไม่ได้ใส่ syntax ของ Sass ลงในไฟล์ .scss ทำให้ compile ออกมาได้เหมือน CSS ของเดิม นั่นหมายความว่าในไฟล์ .scss นั้น เราสามารถเขียน Sass syntax ปนกัน CSS syntax ได้ เดี๋ยว Sass จะ compile เป็น CSS ให้เองครับ

เช่น การใช้ child selector ปกติเราจะเขียน

.parent {
  display: block;
}
.parent a {
  display: inline-block;
}
.parent a .child {
  display: none;
}

ใน Sass เขียนได้เป็น

.parent {
  display: block;
  a {
    display: inline-block;
    .child {
      display: none;
    }
  }
}

หรืออย่างการสร้างตัวแปร เอาไว้ใช้งานบ่อยๆ ก็ทำได้สะดวกดี

$bgColor : #f9f9f9;
body {
  background-color: $bgColor;
}

นอกจากนี้ยังมี syntax ของ Sass อีกมากมาย (ผมเองก็ยังใช้ไม่หมดเหมือนกัน) ลองเข้าไปอ่านได้ที่ <a title="Sass Reference" href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html" target="_blank">Sass Reference</a> ครับ</p> <h3>อัพเดทไฟล์ .css ทุกครั้งที่บันทึกไฟล์ .scss</h3> <p>แค่เพิ่มพารามิเตอร์ <code>--watch</code> ใน sass command ครับ</p> <pre class="brush: bash; gutter: true" data-language="Shell Command">$ sass --watch style.scss:style.css

มันจะขึ้นเป็น process ค้างไว้นะครับ ทุกครั้งที่เรากดเซฟไฟล์ มันก็จะอัพเดทไฟล์ CSS ให้เรา ไม่ต้องมานั่งรัน Sass ทุกครั้งไป

บีบอัด CSS หลัง compile

เพิ่มพารามิเตอร์ :style เซ็ตให้เป็น compressed ไฟล์ output ที่ได้ จะถูก compress ให้เสร็จสรรพ แหล่มแท้

$ sass --watch style.scss:style.css --style compressed

Sublime Text กับ Sass

ปกติแล้ว Sublime Text ไม่รู้จักไฟล์ .scss ครับ จะมองเป็นไฟล์ text ธรรมดา และไม่ทำ syntax highlight ให้ ซึ่งวิธีแก้ก็มีสองวิธีคือ

• ให้ Sublime Text มองเป็นไฟล์ CSS โดยไปที่เมนู View > Syntax > CSS
  
• หรือ ลง plugin ชื่อว่า Sass ผ่าน Package Manger .. ผมลองดูแล้วมันยังเอ๋อๆ กับ CSS comment แล้วก็ attribute selector ด้วย แนะนำให้ใช้แบบแรกดีกว่าครับ
  

นอกจากนี้แล้ว Sass ยังมีอะไรให้เล่นอีกเยอะมากครับ ใน Reference หน้าเดียวเอาอยู่เลย ส่วนการเริ่มใช้งาน Sass กับโปรเจ็คที่กำลังทำอยู่ ก็ไม่เป็นปัญหาครับ เพราะเราสามารถเขียน CSS พร้อมกับเรียนรู้และปรับใช้ Sass syntax ไปทีละนิดๆ ได้ ถือเป็นตัวช่วยของ web developer ที่มีประโยชน์และใช้งานสนุกอีกตัวนึงครับ

<script src="js/script.js"></script>

ซึ่งพอมาทำธีม WordPress ผมก็จะมักง่ายโดยการใช้แท็ก <script> อย่างเดิมนี่แหละ

<script src="<?php bloginfo('template_url'); ?>/js/script.js"></script>

จริงๆ แล้ว WordPress มีฟังก์ชั่นสำหรับโหลด ​JavaScript อยู่แล้วนั่นก็คือ wp_enqueue_script ที่ผลลัพธ์ก็เหมือนกัน คือได้แท็ก <script> ออกมา แต่ฟังก์ชั่นนี้มีประสิทธิภาพมากกว่า ซึ่งก็คือ

1. จะโหลด JavaScript ก็ต่อเมื่อมันยังไม่ถูกโหลดเท่านั้น ตัวอย่างเช่นเวลาเรามึนๆ ใช้แท็ก <script> โหลดไฟล์ .js เข้ามาในเพจหลายรอบ ก็จะทำให้ทั้งเสียเวลาโหลดหน้าเพจเพิ่มขึ้น เสียเวลารันไฟล์ .js ตัวนั้นอีกโดยที่ไม่จำเป็น แต่ฟังก์ชั่น wp_enqueue_script จะช่วยเช็คให้ว่าไฟล์ที่เราจะใช้นั้นถูกโหลดเข้ามาในหน้าเพจหรือยัง ถ้ามีแล้วก็ไม่ต้องโหลดเข้ามาอีก
2. เราสามารถระบุไฟล์ .js ที่จำเป็นต้องโหลดก่อนไฟล์นี้ได้ เช่นพวก jQuery Plugin ต่างๆ ต้องโหลดเข้ามาหลังจาก jQuery

ตัวอย่างการใช้งาน

ผมต้องการโหลด jQuery Colorbox ซึ่งเป็น plugin ของ jQuery เข้ามาใช้งานกับธีม Sera นี้

1. โหลด jquery.colorbox.min เข้ามาเก็บที่
   /wp-content/themes/sera/js/jquery.colorbox.min.js
2. ในไฟล์ functions.php ของธีม เรียกใช้ฟังก์ชั่น wp_enqueue_script

<?php
wp_enqueue_script(
    'colorbox',
    get_template_directory_uri() . '/js/jquery.colorbox.min.js',
    'jquery',
    '1.3.19'
);

เพียงเท่านี้ เจ้าไฟล์ jquery.colorbox.min.js ก็จะถูกโหลดเข้ามาอย่างถูกหลักอนามัย (ซึ่งก็คือหลังจากที่ jQuery ถูกโหลดเข้ามาแล้วนั่นเอง)

Parameters ของฟังก์ชั่น wp_enqueue_script

• $handle (string) ชื่อของ script ที่จะโหลดเข้ามา (lowercase เท่านั้น) WordPress จะเอาตัวนี้แหละไปเช็คว่ามันถูกโหลดเข้ามาในเพจหรือยัง อย่างของผมข้างบนก็เป็นชื่อ colorbox
• $src (string) ก็คือ path ที่เก็บไฟล์ .js ที่จะโหลดเข้ามา
• $deps (array) ไฟล์ที่จำเป็นก่อนโหลดไฟล์นี้ (dependencies) โค้ดข้างบนบอกว่าเป็น jquery ก็คือต้องโหลด jquery เข้ามาก่อน ถึงค่อยโหลดตัวนี้
• $ver (string) เวอร์ชั่นของไฟล์ .js เพื่อให้มั่นใจได้ว่าเครื่องของผู้ใช้จะได้ไฟล์เวอร์ชั่นเดียวกับบนเซิฟเวอร์ โดย WordPress จะเอาไปต่อเป็น query string ให้หลัง path ของไฟล์
• $in_footer (boolean) ถ้าต้องการใช้ script นี้โหลดที่ footer แทนที่จะเป็นในแท็ก <head> ก็เซ็ตให้เป็น true ไปครับ (การโหลด .js ไว้ท้ายๆ จะช่วยทำให้เว็บเราโหลดไวขึ้นนิดหน่อย)

ฟังก์ชั่นนี้ไม่ return ค่าอะไรออกมานะครับ ข้อมูลเพิ่มเติมดูได้ที่ WordPress Codex/wp_enqueue_script ได้เลยครับ

สำหรับผมเคยคิดว่าฟังก์ชั่นของ WordPress บางอันก็ดูใช้งานยุ่งยากเกินความจำเป็น และเคยละเลยไป แต่พอลองได้ทำเยอะๆ ก็พยายามจะใช้ตามที่ WordPress ให้มา ซึ่งบางทีก็ต้องไปอ่านเอาที่ Codex ถึงได้พบว่ามีดีกว่าเขียนแบบธรรมดา อย่างเช่นฟังก์ชั่นนี้เป็นต้นครับ

<p id="welcome" class="message">
Aloha! Welcome to Panda Empire!
</p>

เราจากสามารถหา element p ได้จาก ID โดย

var p = document.getElementById('welcome');

หรือหาจากชื่อ class

var p = document.getElementsByClassName('message')[0];

แต่ใน HTML5 มี Selectors API เกิดขึ้นมาทำให้เราสามารถใช้ CSS selector ในการหา element ได้ง่ายๆ เลย (อารมณ์เดียวกับ selector ใน jQuery) โดยใช้ method querySelector() หรือ querySelectorAll()

จากตัวอย่างข้างบน เราสามารถเขียนใหม่โดยใช้ Selectors API ได้เป็น

var p = document.querySelector('#welcome');

หรือ

var p = document.querySelector('.message');

หรือ

var p = document.querySelectorAll('.message')[0];

ข้อสังเกตคือ parameter ที่เราส่งให้ querySelector() และ querySelectorAll() นั้นเป็น string ที่เป็น CSS Selector ต่างจากเดิมที่ใช้ชื่อ ID และ class

ส่วนความแตกต่างระหว่าง querySelector() และ querySelectorAll() คือ querySelector() จะ return ค่าเป็น Node แรกที่เจอใน document ส่วน querySelectorAll() นั้น return ค่าเป็น NodeList คล้ายๆ array ของ Node ทั้งหมดใน document ที่ตรงตามที่ระบุใน selector

สามารถใช้ CSS selector ที่ซับซ้อนๆ (รวมไปถึง CSS3 selector) เป็น parameter ในการ query DOM ได้ในครั้งเดียว เช่น

var el = document.querySelector('.navigation li > a#current');

เปลี่ยน scope ของการ query DOM นอกเหนือจาก document element ก็ได้

var ul = document.querySelector('#adminmenu');
var li = ul.querySelectorAll('li');

chain ก็ยังได้

var li = document.querySelector('#adminmenu').querySelectorAll('li');

ความเห็นส่วนตัว

ผมเลือกใช้ Selectors API มากกว่า DOM API เพราะ

1. ใช้ CSS Selector จำง่าย คล้าย jQuery
2. ไม่ว่าจะหาจาก ID หรือ class ก็ใช้ method เดียวกันได้
3. ประหยัดเวลาเขียน code ไม่ต้อง query DOM หลายๆ ครั้ง
4. ใช้งานได้กับ browser รุ่นใหม่ทั่วไป (ได้ถึง IE8) ส่วน getElementsByClassName() นั้นต้อง IE9 ขึ้นไป (แต่ IE8 จะใช้ CSS3 selector ไม่ได้นะ)

ส่วนใครจะใช้แบบไหน ก็แล้วแต่ถนัด แล้วแต่ว่าจะรองรับ browser เก่าๆ ด้วยหรือเปล่า ถ้าต้องทำให้รองรับตั้งแต่ IE6 แล้วล่ะก็ Selectors API ก็อาจจะไม่ใช่คำตอบครับ เพราะ 2 method นี้ ใช้กับ IE6 IE7 ไม่ได้เด้อ

อ่านรายละเอียดเพิ่มเติม เกี่ยวกับ Selectors API ได้ที่

• querySelector และ querySelectorAll จาก MDN
• Selectors API Specifications จาก W3
• Can I use ดูการ support ของแต่ละ browser

.box_gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
  background-image: -webkit-linear-gradient(top, #444444, #999999);
  background-image:    -moz-linear-gradient(top, #444444, #999999);
  background-image:     -ms-linear-gradient(top, #444444, #999999);
  background-image:      -o-linear-gradient(top, #444444, #999999);
  background-image:         linear-gradient(to bottom, #444444, #999999);
}

เห็นโค้ดแล้วเหนื่อย Lea Verou เจ้าของเดียวกับ dabblet เลยทำ prefixfree.js ขึ้นมาเพื่อเป็นตัวจัดการกับ prefix ต่างๆ ให้ โดยที่เราเขียนแค่เวอร์ชั่น W3C standards ตัว prefixfree.js ก็จะใส่ prefix ให้เท่าที่จำเป็น ขึ้นอยู่กับ browser ที่ใช้ครับ

วิธีใช้ก็แค่เรียกใช้ prefixfree.js ในหน้าที่เราต้องการครับ

<script src="js/prefixfree.min.js"></script>

เวลาเขียน CSS ก็เขียนแค่เวอร์ชั่นธรรมดา

.box_gradient {
  background-image: linear-gradient(to bottom, #444444, #999999);
}

พอไปรันใน browser ตัว prefixfree.js ก็จะเติม prefix ให้อัตโนมัติ ข้อดีก็คือ เราไม่ต้องไปจำ vendor prefix ที่ไม่ใช่มาตรฐานของ CSS3 ไม่ต้องเขียนให้เสียเวลา โค้ด CSS เราก็จะสั้นลงนิดหน่อย อีกอย่างก็คือ ดูไม่รกรุงรังเมื่อใช้ developer tools inspect ดูใน browser ครับ

ข้อมูลอื่นๆ อ่านได้จาก http://leaverou.github.com/prefixfree/ ครับ ลองใช้กันดูนะ

ในส่วนที่เป็น value ต่างๆ นั้น เมื่อเอาเมาส์ไปชี้ก็จะมี live preview งอกออกมาเหมือนกัน preview ดูได้แทบจะทุกอย่างกันเลยทีเดียว ลองพิมพ์เล่นแล้วเอาเมาส์ไปจิ้มๆ ดูได้ครับ

ถ้าอยากเก็บโค้ดที่เราเล่นๆ นี้ไว้เพื่อใช้ต่อ ก็ Log in โดยใช้ account ของ Github ได้ครับ โดยที่เมื่อเรากด save โค้ดก็จะถูกสร้างเป็น Gist บน gist.github.com ให้โดยอัตโนมัติ ครั้งต่อไปที่ save ก็จะถูกทำเป็น revision ไว้ให้ด้วยครับ สะดวกดี

dabblet ถูกพัฒนาโดย Lea Verou (คนนี้เก่งครับ แนะนำให้ตาม) เพิ่งเปิดตัวได้ไม่นาน ยังมีบั๊กอยู่บ้าง เอาไว้เล่นสนุกๆ (เพราะวึบวับน่ารักดี) หรือเอาไว้ใช้งานจริงจัง (เก็บ snippet เป็นเรื่องเป็นราว) ก็เหมาะทั้งนั้นครับผม

ปล. รูป screenshot เน่าไปหน่อย ขออภัยครับ ใครใช้ Skitch เป็นช่วยสอนหน่อยว่าจะ capture อะไรแบบนี้ได้ยังไง

ความแตกต่างระหว่าง CSS Reset กับ Normalize.css

อ้างอิงจาก เว็บของผู้พัฒนา นะครับ

• Normalize.css รักษา style ปกติของ browser ไว้ โดยที่เราไม่จำเป็นต้องกำหนด style ใหม่ให้กับทุกๆ element อีกครั้งหนึ่ง
• Normalize.css แก้บั๊กหลายๆ อย่างที่อยู่นอกเหนือ CSS Reset เช่น HTML5 search form หรือ การแสดงผล SVG เป็นต้น
• Normalize.css ดูไม่รกรุงรังเมื่อดูจาก developer tools ทั้งหลาย  ที่เจอบ่อยๆ เวลา inspect element ดู เมื่อใช้ reset
  
• Normalize.css แยกเป็นส่วนๆ ชัดเจน เช่น form, typography ส่วนไหนที่เราไม่ต้องการ ก็ลบออกไปได้
• Normalize.css มี document ที่ดีกว่า CSS Reset .. ที่เห็นได้ชัดก็คือมีอธิบายในตัวโค้ดเลย ส่วน CSS Reset มักจะมาแบบแห้งๆ ไม่มีอธิบายอะไร นอกจากนี้ Normalize.css ยังมี document บน Github ที่ละเอียดดีอีกด้วย

ควรเลือกใช้ CSS Reset หรือ Normalize.css ?

แล้วแต่สไตล์ครับ CSS Reset กับ Normalize.css มันตอบโจทย์คนละอย่างกัน อยู่ที่ว่าเราอยากเริ่มโปรเจ็คต์แบบไหน แบบแห้งๆ ดิบๆ เราเขียนเองใหม่หมดทุกอย่าง ก็ใช้ reset ได้ แต่ถ้าเบื่อที่จะต้องมากำหนด style ใหม่ให้กับแต่ละ element ก็ใช้ Normalize.css ดีกว่า

ผมว่า reset เหมาะกับคนที่วางโครงสร้าง CSS ดีๆ รอบคอบๆ หน่อย สามารถเขียนกำหนด style ให้กับทุก element ที่ถูก reset ได้ครบ (คนพวกนี้ บางคนก็มี reset เป็นของตัวเองด้วยซ้ำ) ส่วน Normalize.css นั้นน่าจะเหมาะกับคนที่ชอบเขียน CSS เท่าที่จำเป็น หรือไม่ชอบเขียนอะไรซ้ำซ้อนครับ

ระยะหลังมานี้ผมเลือกใช้ Normalize.css มากกว่า CSS Reset ครับผม

อ่านเพิ่มเติม What is the different between Normalize.css and Reset CSS? (StackOverflow)

ผมไม่เคยใช้ SVN ในการทำงานจริง (แบบที่มีทีมหลายๆ คน) เพราะฉะนั้นเรื่องลึกๆ ของ SVN ผมจะไม่ค่อยรู้นะครับ

ไม่ขอลงรายละเอียดว่า Git หรือ SVN คืออะไรนะครับ ลองตามไปอ่านได้ที่ เว็บไซต์ของ Git และ ​SVN ได้เลยครับผม

Distributed vs. Centralized

เต็มๆ ก็คือ Git เป็น distributed version control system ที่เราสามารถแยก version control ออกเป็น repo ย่อยๆ ได้ แต่ละ repo ย่อยก็สามารถทำ versioning ของตัวเองได้อีกที (เป็น local repo ที่ไม่เกี่ยวกับ remote repo เลย) ส่วน SVN นั้นเป็น centralized version control system คือ version ทั้งหมดจะถูกเก็บที่ remote repo ดังนั้น version ของทุกคนในทีมก็จะตรงกันทั้งหมด ไม่มี local repo ครับ

ประเด็นนี้ก็เลยทำให้ Git สามารถทำงานแบบ offline ได้ คือ clone repo มาแล้วจะแก้ไขโค้ดแล้ว commit ไปยัง local repo ก่อนได้ ส่วน SVN นั้น ทุกครั้งที่ commit นั้นต้องไปอัพเดท version กับ server (commit ไปยัง SVN server) ถ้า offline อยู่ หรือเชื่อมต่อกับ server ไม่ได้ ก็จะไม่สามารถ commit ได้ครับ

การรันเลข revision

Git ใช้รันเลข revision ด้วย hashed string เช่น 247ece...8a8572 ส่วน SVN นั้นรันเป็นเลข integer ธรรมดา เหตุผลที่เป็นแบบนี้เพราะถ้า Git ใช้ integer ก็อาจจะทำให้ revision number ของเราใน local repo ไปชนกับของคนอื่นได้ (เช่น version 3 ใน repo ของเรา อาจไม่เหมือนกัน version 3 ในเครื่องของเพื่อน ซึ่งเกิดขึ้นได้เพราะมันเป็น distributed นี่แหละ) สำหรับ SVN รันเป็น integer ได้เพราะทุกครั้งที่ commit การ commit นั้นก็จะพุ่งไปยัง SVN server เลย และเลข revision ก็จะถูกเพิ่มไปอีก 1 ดังนั้นเลข revision ต้องตรงกันทุกคนอยู่แล้ว

revision number ของ Git

การทำ Branch

ก็คือการแตกหน่อ repo ออกมาเป็นอีกหน่อนึง ก็ต่อเนื่องมาจากข้อแรกครับ การที่ Git เป็น distributed ทำให้เราสามารถสร้าง local branch ที่ไม่เกี่ยวของกับชาวบ้านได้ไม่จำกัด (ในกรณีที่เราต้องการทำอะไรแปลกๆ แต่ไม่อยากให้กระทบกับคนในทีมด้วย) ส่วน SVN นั้น branch ต่างๆ ก็ต้องอยู่ที่ SVN server ด้วย ดังนั้นถ้ามี branch ใหม่งอกออกมา ทุกคนในทีมก็จะได้เหมือนๆ กันครับ

แต่ Git ก็ยังสามารถทำ remote branch ได้โดยการ push local branch ไปยัง remote repo ได้ครับ

ประเด็นสำคัญๆ ก็คงประมาณนี้ครับ จะเห็นได้ว่าทุกอย่างล้วนต่อมาจากข้อแรก (distributed & centralized) ซึ่งต่างกันตั้งแต่ออกแบบแล้ว นอกจากนี้ก็ยังมีประเด็นยิบย่อยอีกมากมาย (ขนาด repo, ความเร็ว, ฯลฯ) ลองตามไปอ่านต่อได้ที่

• 5 Fundamental differences between GIT & SVN
• Git SVN Crash Course
• Git As A Subversion Replacement (Slide) (แนะนำ)

ใครใช้งานตัวไหน คล่องตัวไหน ก็มาแชร์ไอเดียกันได้ครับผม

Icon ใหม่

Sublime Text 2 Build 2181 New Icon

จากเดิมที่เป็นกรอบสี่เหลี่ยมเทาๆ ถึงเวอร์ชั่นนี้มีไอคอนสวยๆ กับเขาเสียทีครับ เป็นรูปปุ่ม S บนคีย์บอร์ด

ปรับปรุงการ render text

ระยะห่างระหว่างตัวอักษร กับระยะบรรทัดเปลี่ยนไปนิดหน่อย ผมลองเทียบกับดูระหว่าง build นี้กับ build ก่อนหน้า (2165) ใช้ฟอนต์ Droid Sans Mono ขนาด 11 รันบน Ubuntu 10.10 ครับ (จริงๆ ผมชอบแบบเก่ามากกว่านะ)

ฺBuild 2165

Build 2181

เมนู Settings ใหม่

จากเดิมที่มี Global Settings กับ File Settings แยกกัน ตอนนี้ถูกยุบรวมกันเหลือเพียง Settings อย่างเดียว ง่ายดี ไม่งง (อ่าน วิธีตั้งค่าต่างๆ ใน Sublime Text 2)

เพิ่ม Word Highlighing

ความสามารถนี้มีไว้ highlight ตำแหน่งของคำที่เราเลือกในไฟล์นั้นครับ จากเดิมต้องลง package ชื่อว่า WordHighlighter จาก Package Control แต่ตอนนี้ติดมากับ Sublime Text 2 แล้ว ไม่ต้องลง Plugin เพิ่ม

Sublime Text 2 Build 2181 Word Highlighter

นอกจากนี้ก็ยังมีฟีเจอร์อื่นอีกมากมาย ตามไปอ่านทั้งหมดได้ ที่นี่ ครับ

ข้อดีของ newsletter พวกนี้ก็คือ เราไม่ต้องไปหาให้เสียเวลา มีคนสรุปมาให้เราแล้วครับว่า ในรอบสัปดาห์ที่ผ่านมานั้น มีอะไรเกิดขึ้นในแวดวงบ้าง เราแค่ทิ้ง email ไว้จากนั้นก็จะมีข่าวคราวมาอัพเดททุกสัปดาห์ ส่วนข้อเสียก็คืออาจจะช้าไปบ้างเมื่อเทียบกับ Twitter ครับผม

ที่ผมรับ newsletter และอ่านประจำก็มีอยู่ 3 เว็บด้วยกันครับ

1. JavaScript Weekly

ทุกอย่างที่เกียวกับ JavaScript ไม่ว่าจะเป็น framework/library ต่างๆ เทคนิค บทความวิเคราะห์วิจารณ์ มีทุกรูปแบบ

2. HTML5 Weekly

เพิ่งจะเกิดได้ไม่นานนัก (ปัจจุบัน issue 10) แต่คุณภาพก็คับแก้ว เนื้อหาเกี่ยวกับเทคโนโลยี HTML5 ทุกอย่าง รวมไปถึง CSS3 ด้วยบางส่วน

3. Web Design Weekly

ส่วนมากจะเกี่ยวกับ CSS ครับ และก็มี UX design บ้างนิดหน่อย แต่ไม่ค่อยมีเรื่อง graphic design หรือ web design แบบที่เราเข้าใจกันซักเท่าไหร่ครับ

แถมอีกอันสำหรับชาว Ruby (แต่ผมไม่ได้รับนะ เพราะว่าไม่ได้เขียน Ruby)

4. Ruby Weekly

มีทั้ง Ruby, Rails รวมไปถึงฝั่ง front-end อย่าง CoffeeScript หรือ Haml

นอกจากนี้ยังมีอีกเยอะแยะมากมาย (และคงเพิ่มขึ้นเรื่อยๆ) ชอบอันไหน สนใจเรื่องอะไรก็ลองไปสมัครรับ newsletter กันดูครับ

ปล. JavaScript Weekly, HTML5 Weekly, กับ Ruby Weekly มาจากทีมสร้างเดียวกันครับ

สั่งซื้อ

ผมใช้บัตรเดบิต Be1st ในการสั่งซื้อครับ (เนื่องจากไม่มีบัตรเครดิต) ตอนแรกนั้นไม่สามารถจบการสั่งซื้อได้ ไปติดขั้นตอนสุดท้ายตรงที่การตัดเงินจากบัตร คุยกับทาง call center ของธนาคารได้ความว่า บัตรอาจกำหนดวงเงินต่อวันไว้ต่ำเกินไป ผมเช็คใน internet banking ดูแล้ว วงเงินต่อวันอยู่ที่ 50,000 บาท แต่ทาง call center ก็แจ้งมาว่าวงเงินใน internet banking นั้นเฉพาะกับการใช้จ่ายใน internet banking ไม่เกี่ยวกับช่องทางอื่น ผมจึงเปลี่ยนวงเงินบัตรผ่านระบบโทรศัพท์อัตโนมัติ และก็สามารถสั่งซื้อ iPhone 4S ได้ครับ เมื่อสั่งซื้อเสร็จแล้ว Apple ก็ส่งอีเมลมาให้ครับว่าได้รับออร์เดอร์แล้ว

รอ ..

ผมสั่งซื้อไปในช่วงบ่ายของวันที่ 31 มกราคม หลังจากนั้นก็รออย่างเดียวเลย ในระหว่างนี้ก็เช็คทางเว็บไซต์ทุกวันครับ ยังอยู่ในขั้นตอน processing item

ส่งของ 6/2/2012

ประมาณบ่ายๆ ของวันที่ 6 กุมภาพันธ์ ก็ได้รับอีเมลฉบับที่สองจาก Apple แจ้งว่า iPhone นั้นได้ถูกส่งออกมาแล้ว จากกำหนดส่งจริงวันที่ 10 ก็เท่ากับว่าส่งมาก่อนกำหนดประมาณ 4 วันครับผม ในอีเมลมีลิงก์ให้ track shipment ดูได้ว่าของของเราตอนนี้อยู่ที่ไหนแล้ว ปกติผมก็เช็คจากลิงก์ที่อยู่ในอีเมลครับ แต่พอของมาถึงไทย จะมีอยู่สถานะนึงเป็น Please Contact DHL BKK ผมไม่แน่ใจว่าติดปัญหาอะไรรึเปล่า เลยโทรไปถาม DHL ที่กรุงเทพครับ ได้ความว่าการส่งไม่ติดปัญหาอะไร (ขอแอบชม call center ของ  DHL หน่อยครับ บริการดีมาก ตรงประเด็น กระชับดี พูดเพราะอีกด้วย)

หลังจากที่ของมาถึงเมืองไทยแล้ว หากใครอยากเช็คสถานะการส่งของต่อ แนะนำว่าเอาเลขใบนำส่งสินค้าไปเช็คที่ dhl.co.th ได้เลยครับ เป็นภาษาไทยด้วยนะ

ได้รับของแล้ว 8/2/2012

เจ้าหน้าที่จาก DHL โทรหาผมตั้งแต่ 9 โมงเพื่อเช็คที่อยู่ จากนั้นของก็มาถึงมือผมในเวลาประมาณ 11 โมงครับ (สงสัยไปมาหลายที่) ผมก็จัดการเปิดเครื่องเพื่อที่จะลองใช้เลย ปรากฏว่า activate ไม่ได้เพราะไม่มีซิม (ไม่รู้นะเนี่ย) ผมเลยเอา micro sim ที่ดองค้างไว้ใน iPad (แต่ไม่ได้ใช้) ลองใส่ดูและก็ใช้ activate ได้ถึงแม้ว่าซิมโดนปิดไปนานแล้ว

เปลี่ยนซิมการ์ดเป็น Micro Sim

เอาซิมการ์ดไปเปลี่ยนเป็น Micro Sim เพื่อมาใช้กับ iPhone 4S ที่ศูนย์บริการ AIS ครับ (เนื่องจากต้องการใช้เบอร์เดิม) ที่เชียงใหม่ ศูนย์ฯ จะอยู่ที่ถนนท่าแพ เข้าไปมีพนักงานบริการดีครับ รอคิวประมาณ 5 นาที ส่วนขั้นตอนเปลี่ยนซิมการ์ด ก็ใช้เวลาราวๆ 2-3 นาที และก็ไม่เสียค่าบริการด้วยครับผม

ทดลองใช้

กินแบตเก่งสมคำร่ำลือ ส่วนการใช้งานอื่นๆ ยังไม่พบปัญหาอะไร เอาเป็นว่า การสั่งซื้อของจาก Apple Online Store ครั้งแรก ผ่านไปได้ด้วยดีครับ รวมเวลาทั้งสิ้นก็ประมาณ 9 วันหลังจากสั่งซื้อครับผม