มาดูกัน
วิธีง่าย ๆ ที่มานำเสนอก็คือ การใช้สิ่งที่เรียกว่า Zero-width negative look ahead assertion ครับ แค่ชื่อก็ปวดหัวตึ้บ… เดี๋ยวก่อนครับ วิธีการใช้งานมันง่ายกว่าชื่อของมันครับ เพียงแค่เราใส่ ^(?! และ ) ครอบสิ่งที่เราไม่ต้องการให้ขึ้นต้น เท่านั้นเป็นอันจบครับ

ยกตัวอย่างเช่น เราไม่ต้องการให้ขึ้นต้นด้วย abc แต่หลังจากนั้นจะเป็นอะไรก็ได้ เราก็ใช้ pattern เป็น ^(?!abc)\w+ ครับ ทีนี้ คำที่ขึ้นต้นด้วย abc ทั้งหมด จะ fail ในการ match กับ pattern ครับ

ไอ้เจ้า Zero-width negative look ahead assertion จริง ๆ แล้วมันมีอะไรมากกว่านั้นครับ อธิบายต่ออีกหน่อยละกัน สาเหตุที่เราเรียกว่า Zero-width assertion เพราะเราไม่นับว่ามันเป็นตัวอักษร และมันจะทำหน้าที่สำหรับตรวจดูว่าจะเอาไป match ได้หรือเปล่าเท่านั้น โดยไม่เอาค่าในวงเล็บไปใส่ในผลการ match

นอกเหนือจาก negative look ahead แล้ว มันยังมีรูปแบบอื่น ๆ ที่เกี่ยวข้องด้วย รวมแล้วมี 4 แบบ คือ positive look ahead, negative look ahead, positive look behind และ negative look behind… มาดูกันทีละตัวเลยครับ

Positive Look Ahead จะใช้สำหรับการ match ที่ตามหลังกัน เขียนอยู่ในรูปแบบ q(?=u) หมายถึง จะ match กับ q ที่ตามด้วย u เท่านั้น (เราจะสังเกตได้ว่า q จะถูกนำไปใส่ในผลการ match แต่ u ไม่ถูกนำไปรวม เพราะว่ามันเป็น zero-width assertion ไงครับ)

Negative Look Ahead อันนี้พูดถึงไปแล้วตั้งแต่แรก ใช้สำหรับการ match สิ่งที่ไม่ตามกัน เขียนในรูปแบบ q(?!u) หมายถึงว่า จะ match กับ q ที่ไม่ได้ตามด้วย u (จากตัวอย่างแรกของเรา เขียนเริ่มต้นว่า ^(?!abc) นั่นคือ เริ่มต้นประโยค หรือ ^ ที่ไม่ตามด้วย abc หรือ (?!abc) นั่นเอง)

Positive Look Behind จะคล้าย ๆ กับ Positive Look Ahead ครับ แต่ทำจากด้านหลังมา เขียนอยู่ในรูปแบบ (?<=a)b จะหมายถึงว่า จะ match กับ b ที่ตามหลัง a อยู่

Negative Look Behind ก็ในทำนองเดียวกันกับ Negative Look Ahead เลยครับ ทำจากด้านหลังมา เขียนอยู่ในรูปแบบ (?<!a)b จะหมายถึงว่า จะ match กับ b ที่ไม่ได้นำหน้าด้วย a

ดังนั้น มาถึงตรงนี้แล้ว ถ้าเราอยากเขียน pattern ให้ match กับข้อความที่ไม่ได้ลงท้ายด้วยคำว่า end ล่ะ จะต้องเขียนยังไง…

เฉลย \w+(?<!end)$ ไงครับ (\w = ตัวอักษรใด ๆ ตามด้วย Negative Look Behind และปิดท้ายด้วย $ คือ สิ้นสุดประโยค)

สนุกมั๊ยครับ

แบบแรกคือ การเปรียบเทียบด้วย Binary String เช่น

mysql> SET @s = BINARY 'MySQL';
mysql> SELECT @s = 'mysql';

+--------------+
| @s = 'mysql' |
+--------------+
|            0 |
+--------------+

แบบที่สองคือ การสั่งเปลี่ยน COLLATE ให้เป็นแบบที่สนับสนุนการเปรียบเทียบแบบ case-sensitive นั่นคือ latin1_bin หรือ latin1_general_cs เช่น

mysql> SET @s1 = 'MySQL' COLLATE latin1_bin,
    ->     @s2 = 'mysql' COLLATE latin1_bin;
mysql> SELECT @s1 = @s2;
+-----------+
| @s1 = @s2 |
+-----------+
|         0 |
+-----------+

แบบที่ 3 ก็เป็นการเปลี่ยน Collation เช่นเดียวกัน แต่เป็นการไปตั้งค่าที่ field ใน table ของเราเลยครับ แค่เพียงเลือก field ที่ต้องการ และเปลี่ยน collation ให้เป็น latin1_bin หรือ latin1_general_cs ก็ใช้ได้แล้วครับ

อ้างอิง

• http://dev.mysql.com/doc/refman/5.0/en/case-sensitivity.html

function js_thai_encode($data)
{	// fix all thai elements
	if (is_array($data))
	{
		foreach($data as $a => $b)
		{
			if (is_array($data[$a]))
			{
				$data[$a] = js_thai_encode($data[$a]);
			}
			else
			{
				$data[$a] = iconv("tis-620","utf-8",$b);
			}
		}
	}
	else
	{
		$data =iconv("tis-620","utf-8",$data);
	}
	return $data;
}

ไปดู LIVE DEMO กันเลย

วิธีทำง่ายนิดเดียวครับ นั่นคือการกำหนด tag ที่ facebook มันไปดึงให้ถูกต้องครับ

tag ที่ว่านี้ facebook จะใช้อยู่ 3 tag ครับ คือ

1. ส่วนที่เป็น title จะไปดึงจาก inner-text <title>…</title> ในส่วน head ครับ
2. ส่วนที่เป็น description จะไปดึงมาจาก value ของ attribute content ใน <meta name=”description” content=”…”/> ในส่วน head เหมือนกัน
3. ส่วนสุดท้ายจะเป็นรูปที่เอาไปแสดง จะไปดึงมาจาก value ของ attribute href ใน <link rel=”image_src” href=”…” /> ในส่วน head อีกเช่นกัน

หลังจากใส่แล้วลองไป Share link ใน facebook อีกที เราก็จะเห็นข้อมูลและรูปที่เราระบุไว้ขึ้นมาอย่างสวยงามสมใจแล้วล่ะครับ

ปล.นิดนึง facebook จะ cache ข้อมูลพวกนี้ไว้นะครับ ถ้ามีการแก้ไขอะไร อาจจะต้องรอซักระยะนึง แล้วค่อย share ใหม่ถึงจะเห็นการเปลี่ยนแปลงนะครับ

ปล.อีกที ถ้าจะลอง share link แล้วไม่รู้จะลองกับเว็บอะไรดี ลอง http://www.dkote.com ก็ได้ครับ เว็บนี้มีการกำหนด 3 ข้อด้านบนเรียบร้อยแล้วครับ ฮิๆๆ

อ้างอิง

• http://www.left-click.us/blog/addthis-button-how-make-facebook-show-correct-image-and-text-blog-post

ปัญหานี้สามารถแก้ไขได้โดยการกำหนด box model ให้เหมือนกันด้วย css เพื่อให้ตัว render หน้าเว็บ ทำงานไปในทางเดียวกัน สิ่งที่ต้องเพิ่มลงไปใน style ของ object ที่เราต้องการกำหนดคือ

-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;

การกำหนดค่าแบบนี้ จะเป็นการสั่งให้ browser คำนวณความกว้างของ content จากขอบของ container เหมือนกับที่ IE ทำนั่นเอง

เพื่อให้เห็นภาพได้ชัดเจนมากขึ้น ผมว่าเราลองไปดูตัวอย่างใน LIVE DEMO กันเลยดีกว่าครับ

ใน HTML เราจะเรียกคำที่อยู่ในเครื่องหมาย <> ว่าแท็ก (เฉพาะคำแรกเท่านั้น) เช่น <A> ก็คือ A แท็ก (หรือแท็ก A แบบไทย ๆ) ส่วน ค่าที่เรากำหนดต่าง ๆ ภายในแท็ก จะเรียกว่า คุณสมบัติ หรือ Attribute เช่น <A href=”http://blog.chonla.com>ไปอ่านบล็อก</A> จะมี href เป็น attribute ของแท็ก A และมี http://blog.chonla.com เป็นค่าของ attribute href นั่นเอง ส่วนคำว่า “ไปอ่านบล็อก” จะเรียกว่า inner-text ของแท็ก A ส่วน <A href=”…”>…</A> เราจะเรียกรวม ๆ ว่า Element ครับ

แอบนอกเรื่องไปนิดนึง วกกลับมาที่ <LABEL> ดีกว่าครับ (จากนี้ ผมจะเขียนเป็นตัวเล็ก เพื่อความสะดวกนะครับ <label>) ตัว <label> เอง ความจริงแล้ว ไม่ได้ทำให้การแสดงผลมีอะไรพิเศษเลยครับ มันช่วยให้สำหรับผู้ใช้ที่ใช้ mouse สะดวกสบายมากขึ้นเท่านั้นเองครับ หน้าทีของ <label> เนี่ย จะทำหน้าที่กำหนดความสัมพันธ์ของข้อความใด ๆ ที่เป็น inner-text ของ <label> กับ input element ใน form ครับ วิธีการกำหนด ก็เพียงกำหนด id ให้กับ input element และ เพิ่ม attribute “for” ให้กับ <label> โดยมีค่าของ attribute “for” เป็น id ของ input สัมพันธ์กับ <label> นั้นครับ

หลังจากที่เรากำหนดความสัมพันธ์แล้ว อย่างที่ผมเกริ่นไว้หน่อยแล้วว่ามันเพิ่มความสะดวกให้กับผู้ใช้ที่ใช้ mouse นั่นคือ เมื่อเราคลิกข้อความที่เป็น inner-text ในหน้าเว็บ มันจะเหมือนกับการที่เราคลิกตัว input element ที่มันสัมพันธ์กันนั่นเองครับ

เอาเป็นว่า เพื่อความชัดเจนมากขึ้น เราลองไปดูตัวอย่างใน LIVE DEMO กันเลยดีกว่าครับ

อ้างอิง

• http://www.w3schools.com/tags/tag_label.asp

เมื่อวานได้ดูหนังที่โหลดมาเรื่อง Pi ชื่อไทยว่า นิพพานผ่านตัวเลข ผมเป็นคนที่ค่อนข้างชอบดูหนังประเภทนี้อยู่พอสมควรครับ (ทั้ง ๆ ที่เพิ่งได้ดูเรื่องนี้เป็นเรื่องที่ 2 เอง เรื่องแรกที่ดูคือ Beautiful mind) ในหนังจะพูดถึงค่าค่าหนึ่งที่เรียกว่า ฟี (phi) มีหนังสือหลายเรื่องที่พูดถึงค่านี้ครับ ไม่ว่าจะเป็น Da Vinci Code หรือแม้แต่การ์ตูนเรื่อง Jojo ภาค Steel ball run ก็ตาม

อัตราส่วนทองคำ (Golden Ratio) หรือ ฟี (Phi), φ
เป็นค่าคงที่ ที่มีค่า 1.618 โดยประมาณ หรือกล่าวได้ว่า เลข 2 จำนวน (คือ a และ b) จะเป็นอัตราส่วนทองคำก็ต่อเมื่อ อัตราส่วนระหว่างจำนวนที่มากกว่า (a) ต่อผลรวม (a+b) มีค่าเท่ากับอัตราส่วนระหว่างจำนวนที่น้อยกว่า (b) ต่อจำนวนที่มากกว่า (a) นั่นคือ ((a+b)/a)=(a/b) นั่นเอง

อัตราส่วนทองคำนี้ เมื่อเรานำมาเขียนในรูปแบบพีชคณิต จะได้เป็น (1+sqrt(5))/2 โดยที่ sqrt(x) หมายถึง รากที่ 2 ของ x

ความสัมพันธ์ระหว่างอัตราส่วนทองคำกับอนุกรมฟิโบนัคชี่ (Fibonacci)
อนุกรมฟิโบนัคชี่ คืออนุกรมที่มีค่าเป็นผลบวกของตัวเลขในลำดับก่อนหน้านั้น 2 จำนวน นั่นคือ 1,1,2,3,5,8,13,21,… นั่นเอง เมื่อเรานำตัวเลขที่อยู่ติดกันในอนุกรมนี้มาหารกัน (ตัวมากตั้งแล้วหารด้วยตัวน้อย) จะพบว่า มันจะมีค่าใกล้เคียงกับอัตราส่วนทองคำเสมอ และเมื่อเรานำตัวเลขที่อยู่ติดกันในอนุกรมนี้ที่มีค่ามาก ๆ มาหารกัน จะพบว่า จะมีค่าเป็น 1.618 เสมอ

สี่เหลี่ยมผืนผ้าทองคำ (Golden Rectangle)
คือ สี่เหลี่ยมผืนผ้าที่มีอัตราส่วนด้านยาวต่อด้านสั้นเป็นอัตราส่วนทองคำ เมื่อเราแบ่งสี่เหลี่ยมผืนผ้านี้ออกเป็นสองส่วน โดยส่วนแรกเป็นสี่เหลียมจตุรัสที่มีความยาวของด้านเป็นความกว้างของสี่เหลียมผืนผ้า เราจะพบว่าสี่เหลียมผืนผ้าที่เหลือจะกลายเป็นสี่เหลี่ยมผืนผ้าทองคำที่มีขนาดเล็กลง และเราสามารถแบ่งสี่เหลี่ยมผืนผ้าทองคำที่เกิดขึ้นใหม่นี้โดยวิธีการเดียวกันนี้ต่อไปเรื่อย ๆ ไม่รู้จบ

เพนทากอน (Pentagon) หรือรูปห้าเหลี่ยมด้านเท่า
จะมีอัตราส่วนระหว่างความยาวของเส้นทแยงมุมเทียบกับความยาวของด้านหนึ่ง ๆ เท่ากับอัตราส่วนทองคำเสมอ

เกลียวฟิโบนัคชี่ (Fibonacci Spiral)
เกิดจากการลากเส้นโค้งผ่านไปยังจุดแบ่งสี่เหลี่ยมผืนผ้าทองคำ เราจะได้เกลียวฟิโบนัคชี่ที่ไม่รู้จบ

อัตราส่วนทองคำในผลงานที่สร้างโดยมนุษย์
เช่น มหาวิหารพาร์ธีนอน (Parthenon) ในเอเธนส์, มหาวิหารน็อตเตอร์ดาม (NotreDame Cathedral) ในปารีส, ภาพวาดโมนาลิซ่า (Mona Lisa), ภาพเดอะวิทรูเวียนแมน (The Vitruvian Man)

อัตราส่วนทองคำในธรรมชาติ
เช่น เปลือกหอยนอติลุส (Nautilus Shell), เมล็ดดอกทานตะวัน, การแตกใบของต้นไม้ (ใบที่แตกใหม่จะทำมุม 137.5 องศา กับแนวใบเดิม ซึ่งเอา 360 องศา – 137.5 องศา จะได้ 222.5 เมื่อเอาไปหารด้วย 137.5 จะได้ค่า Phi นั่นเอง), โครงสร้างร่างกายมนุษย์ เช่น ระยะจากหัวถึงพื้น หารด้วยระยะจากสะดือถึงพื้น, ระยะจากไหลถึงปลายนิ้ว หารด้วยระยะจากข้อศอกไปถึงปลายนิ้ว, ใบหน้าของมนุษย์

อ้างอิง

• http://th.wikipedia.org/wiki/อัตราส่วนทอง
• http://th.wikipedia.org/wiki/ความสวยงาม
• http://www.vcharkarn.com/varticle/328/2#P2
• http://topicstock.pantip.com/wahkor/topicstock/X2765603/X2765603.html

Regular Expression (หรือ regex) คือ string pattern ที่ใช้แสดงรูปแบบของคำ หรือข้อความใด ๆ โดยตัว regex เองนั้นมีพื้นฐานมาจากทฤษฏีทางคณิตศาสตร์เพื่อใช้ในการเปรียบเทียบข้อความนั้น ๆ กับ pattern ที่กำหนดว่าสอดคล้องกันหรือไม่ (match)

Regular Expression Engine

Programming lanugage ปัจจุบันจะสนับสนุนการใช้งาน regex แล้ว แต่ปัญหาหนึ่งคือการเข้ากันได้ของ regex ในแต่ละภาษา ไม่ว่าจะเป็นความสามารถ และวิธีการเขียนที่แตกต่างกัน ดังนั้น regex ในภาษาหนึ่งจะไม่สามารถนำไปใช้กับอีกภาษาหนึ่งได้ทั้งหมด จะต้องมีการแก้ไขบางส่วนเพื่อให้สอดคล้องกับ engine ในภาษานั้น ๆ

เราจะใช้ Regular Expression ตอนไหน

ลองนึกถึงสถานการณ์ที่เรามีข้อความขนาดเป็นแสน ๆ ตัวอักษร และเราต้องการดูว่ามีคำซักคำในข้อความนั้นหรือไม่ บางคนอาจจะนึกถึงการใช้ strpos() แต่ลองนึกต่อไปอีกนิดว่า ถ้าคำที่เราต้องการหามันซับซ้อนกว่าที่เราจะทำแบบนั้นได้ล่ะ เช่น เราต้องการหาว่ามีคำที่ขึ้นต้นด้วย c และลงท้ายด้วย e หรือไม่ กว่าเราจะทำ strpos เช็คดูทีละคำเสร็จคงจะหมดแรงพอดี ลองพิจารณาถึง regex ต่อไปนี้ \bc\w+e\b ที่สามารถหาคำที่ต้องการได้โดยคำสั่งเดียวดูว่าชีวิตจะง่ายขึ้นขนาดไหน

Regular Expression ใน PHP

ใน PHP นั้น เราสามารถเขียน regex ได้ 2 รูปแบบ คือ POSIX และ PCRE (Perl-Compatible) โดยส่วนตัวผมแล้ว ผมนิยมเขียนแบบ PCRE มากกว่าครับ ในส่วนของ POSIX Regex นั้น คำสั่งจะขึ้นต้นด้วย ereg_ ส่วน PCRE คำสั่งจะขึ้นต้นด้วย preg_ ครับ รูปแบบการเขียนของทั้งสองแบบจะแตกต่างกันเล็กน้อย แต่เมื่อเราเลือกที่จะเขียนแบบไหนแล้ว ก็แนะนำให้เขียนไปแบบเดียวให้ชำนาญครับ ไม่งั้นเดี๋ยวจะตีกันยุ่ง

Regular Expression ใน Javascript

ใน javascript ก็สามารถเขียนได้ 2 รูปแบบเช่นกัน คือ ผ่าน RegExp Object หรือ ผ่าน literal syntax เช่น /pattern/ (ไม่ต้องมีเครื่องหมายคำพูดครอบ เพราะไม่ใช่ String) ส่วนตัวแล้วผมจะนิยมเขียนแบบหลังมากกว่าครับ

สิ่งที่จำเป็นต้องรู้ก่อนเขียน Regular Expression

Pattern Modifiers นั่นคือ option ต่าง ๆ ที่ใช้ปรับรูปแบบการค้นหาจาก pattern ที่กำหนด เช่น ใน PCRE ถ้าเราระบุ i ไว้หลัง pattern จะเป็นการเปรียบเทียบแบบไม่สนใจตัวเล็กหรือตัวใหญ่ หรือการใส่ s ไว้หลัง pattern จะหมายถึงการกำหนดให้ wild card character (.) รวมเอาอักษรขึ้นบรรทัดใหม่ไว้ด้วย (ดู modifers อื่น ๆ เพิ่มได้ที่ http://php.net/manual/en/reference.pcre.pattern.modifiers.php)

Pattern Syntax นั่นคือวิธีการเขียน regex นั่นเอง ในส่วนนี้จะรวมถึง meta-character เช่น ^ เป็นการระบุถึงต้นประโยค หรือ $ เป็นการระบุถึงท้ายประโยค หรือ . ที่จะหมายถึงตัวอักษรอะไรก็ได้ยกเว้นขึ้นบรรทัดใหม่ นอกจาก meta-character แล้ว ยังมีชุดของ character ที่ขึ้นต้นด้วย backslash อีกด้วย เช่น \d คือตัวเลข \D คืออักขระที่ไม่ใช่ตัวเลข \w คืออักขระที่นำมาใช้เป็นส่วนหนึ่งของคำได้ \W คือ อักขระที่ไม่ได้เป็นส่วนหนึ่งของคำ เป็นต้น รวมไปถึงการค้นหาตัวอักษรซ้ำ ๆ การทำ Back references การค้นหาแบบ optional ฯลฯ

Back References

ใช้สำหรับอ้างถึง subpattern ใน pattern ที่ระบุ back references ใน PHP จะขึ้นต้นด้วย backslash แล้วตามด้วยตัวเลขที่มากกว่า 0 ในขณะที่ของ javascript จะขึ้นต้นด้วย $ แล้วตามด้วยตัวเลขที่มากกว่า 0 โดย back references จะอ้างถึง subpattern เรียงตามลำดับจากตัวที่พบตัวแรก ให้เป็น 1 ตัวที่สอง ให้เป็น 2 ไปเรื่อย ๆ เช่น เรามี pattern คือ (cat) and (dog) เมื่อเรา match ได้ เราจะได้ \1 เป็น cat และ \2 เป็น dog นั่นเอง

ตัวอย่าง Regular Expression

ดูใน LIVE DEMO ได้เลยครับ (Javascript Regular Expression DEMO)

อ้างอิง

• http://www.regular-expressions.info/tutorial.html
• http://www.websiterepairguy.com/articles/re/12_re.html
• http://www.javascriptkit.com/javatutors/re.shtml
• http://php.net/manual/en/reference.pcre.pattern.modifiers.php

BBCode เราเรียกได้ว่าเป็น lightweighted markup language ใช้สำหรับจัดรูปแบบข้อความตามเว็บบอร์ดต่าง ๆ ครับ มีลักษณะของแท็กอยู่ในเครื่องหมายก้ามปู เช่น [b]ตัวหนา[/b] ครับ เจ้าตัว BBCode นี่เว็บบราวเซอร์มันไม่รู้จักครับ ต้องทำการแปลไปเป็น markup language ที่ใช้ทั่ว ๆ ไปก่อนครับ นั่นก็คือ HTML หรือ XHTML ครับ เช่น จาก [b]ตัวหนา[/b] จะถูกแปลงไปเป็น <b>ตัวหนา</b> แล้วค่อยนำไปแสดงผลครับ

จุดประสงค์หลัก ๆ ของ BBCode คือ เพื่อให้ผู้ใช้สามารถจัดรูปแบบข้อความได้ง่ายขึ้น รวมไปถึงเพื่อความปลอดภัยของการแสดงผลข้อความที่โพสโดยผู้ใช้ด้วยครับ เช่น การควบคุมการใช้งาน javascript การควบคุมให้ใช้ tag ภายในข้อกำหนด เป็นต้น

เจ้าตัว BBCode เนี่ย มันไม่มีข้อกำหนดเป็นมาตรฐาน เพียงแค่มีการใช้งานโดยทั่วไปตามเว็บบอร์ดเวอร์ชั่นใหม่ ๆ ทั่วไปครับ รายละเอียดรูปแบบคำสั่ง สามารถตามไปดูในหัวข้ออ้างอิงท้ายบทความได้เลยครับ

ทีนี้มาดูกันว่าปลั๊กอินตัวนี้จะทำงานยังไงครับ

ง่าย ๆ ครับ แค่เรียก $(<selector>).bbcode(); เท่านั้นครับ เช่น

$("div").bbcode();

ไอเดียของปลั๊กอินตัวนี้ผมได้มาจากตอนเขียนแก้บักการแสดงผล BBCode ให้เก็บเว็บไซต์หนึ่งครับ ปกติแล้วการ render จาก BBCode ไปเป็น HTML นั้น มักจะทำที่ Server และส่ง HTML ที่ได้มาให้บราวเซอร์แสดงผล แต่ผมต้องการที่จะลดโหลดฝั่ง Server ลง โดยจะย้ายการทำงานจากฝั่ง Server มาทำที่บราวเซอร์แทน

หลักการทำงานก็ไม่มีอะไรมากครับ ผมใช้วิธีการกำหนดค่า Pattern ในรูปแบบ Regular Expression และใช้ Regular Expression Engine ของ JavaScript ในการแสดงผลให้ถูกต้องเท่านั้นครับ

ลองไปดูที่ LIVE DEMO กันเลยครับ

อ้างอิง

• http://en.wikipedia.org/wiki/BBCode

จะเห็นได้ว่า มันก็ไม่เห็นมีอะไรพิเศษ ก็เป็นเว็บที่มีรูป smiley ธรรมดา แต่ถ้าลอง view source ดู จะเห็นครับ ว่ามันพิเศษยังไง

ใช่แล้วครับ ทริกของมันก็คือ เราทำการระบุ content-type และเนื้อของไฟล์ลงไปตรง ๆ ในนั้นเลยครับ รูปแบบการเขียนคือ