การทำโปรเจ็คตอนเรียนมักมีข้อจำกัดคือ “เวลา” ในการปั่นมีน้อย สิ่งที่เกิดขึ้นก็คือ ต้องรีบทำให้มันเสร็จๆ ไปก่อน เราจะยัดทุกอย่างที่เรามี โค้ดทุกอย่างที่เราหาได้ เขียนเอาตามที่คิดได้ ณ ตอนนั้น ทำให้มันเสร็จเพื่อให้ทันส่ง

** ยึดจากประสบการณ์ของตัวผมเองเป็นหลักนะครับ **

1. Performance

เมื่อก่อนไม่เคยมานั่งจ้องกราฟพวกนี้เลย

ในโค้ดอาจจะมี foreach loop ซ้อนกัน 3-4 ชั้น หรือมี database query ซ้ำๆ กันหลายรอบ มีฟังก์ชั่นที่ทำงานเหมือนๆ กันอยู่เต็มไปหมด (ซึ่งเกิดจากการ copy & paste) ส่วนตอนพรีเซ้นต์นั้นก็รันบนเครื่องของเราเอง (localhost) ขอแค่มันรันได้บนเครื่องของเราก็พอ ซึ่งแน่นอนว่ามันรันได้ไว เพราะคอมเราสเป็คมันเทพ

แต่ความเป็นจริงแล้ว web server ทั่วไปไม่สเป็คเทพขนาดนั้นครับ อาจมีแรมแค่ 256 MB มี CPU รุ่นที่เราลืมชื่อไปแล้ว ยังไม่พอต้องแชร์ทรัพยากรกับชาวบ้านอีก ไหนจะฝั่งผู้ใช้ที่อาจใช้ web browser เวอร์ชั่นเก่าๆ ที่รัน JavaScript หนักๆ ไม่ค่อยไหว ก็ย่อมเกิดปัญหาในการใช้งานได้ไม่เป็นอย่างที่เรานึกไว้

การ optimize โค้ดจึงเป็นสิ่งที่สำคัญมาก ที่ตอนเรียนไม่เคยทำเลย พอส่งโปรเจ็คแล้ว น้อยมากที่จะกลับมานั่งทำต่อครับ

2. Security

นี่แหละ Top Secret!

ที่เจอบ่อยที่สุดคือการเก็บฟิลด์ password เป็น plain text (ไม่มีการเข้ารหัสก่อนเก็บลงฐานข้อมูล) มาพร้อมกับการตั้ง username เป็น admin พร้อม password  เป็น 12345 ใครใส่มั่วๆ หลุดเข้ามาถึงฐานข้อมูลได้ ก็มีเฮกันเลยทีเดียว

อีกเรื่องก็คือ file/folder permissions ครับ ตอนนั้นไม่ค่อยเข้าใจเรื่องพวกนี้ ก็ chmod 777 แม่งหมดเลยเพราะมั่นใจว่ารันได้แน่นอน ในความเป็นจริงถ้า user ดันอัพโหลด shell script ขึ้นมาแล้วรันได้ บุญบารมีที่สั่งสมมาก็อาจจะหายในพริบตาได้เหมือนกัน

3. Scalability

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

web application ที่ดี ไม่ควรจะหวั่นแม้วันมามากครับ ในขั้นตอนการออกแบบควรคิดเผื่อไว้ด้วยว่าถ้าต้องมีการขยับขยาย ควรต้องทำยังไงให้ง่ายและสิ้นเปลืองพลังน้อยที่สุด

4. Design

ฟอร์มล็อกอินแห้งๆ ขอบมนแบบไม่เนียน .. แล้วกล่องข้างล่างคืออะไรวะนั่น!

ไม่ค่อยใส่ใจกับรูปร่างหน้าตา แต่ไปให้ความสำคัญกับข้อมูลมากกว่า ซึ่งมันก็เวิร์กนะครัับ application มันทำงานได้ แต่หน้าตามันน่าเบื่อโคตรๆ เลย มักไม่มีอะไรมากไปว่า input form เรียงกันเป็นสิบๆ ใช้ฟอนต์มาตรฐานที่มากับ browser แสดงข้อมูลจากฐานข้อมูลก็เป็นตาราง (ที่มีเส้นขอบหนาๆ) รูปแบบเดิมๆ ไปซะหมด

จริงๆ แล้ว เรื่อง design นี่ผมว่าสำคัญนะครับ เพราะมันส่วนที่อยู่ใกล้ผู้ใช้ที่สุดแล้ว ถึงความสามารถเบื้องหลังมันจะไม่เจ๋งมาก มี bug อยู่บ้าง แต่หน้าตามันน่าใช้ ออกแบบได้สวยงาม ผู้ใช้ก็อาจจะชอบได้ครับ ถือเป็นความบันเทิงระหว่างการใช้งาน

ประสบการณ์ของผมก็มีประมาณนี้ครับ ใครมีไอเดียอื่นก็มาแชร์กันได้เด้อ  :)

Theme ใหม่

ธีมใหม่ ขาวใสสไตล์เกาหลี

ความตั้งใจแรกของผมตอนช่วงใกล้ๆ สิ้นปีของปีที่แล้ว คือการทำ WordPress theme ตัวที่ 2 ของชีวิต แต่ทำยังไม่เสร็จ เลยมาทำตัวที่ 3 ก่อน (เรื่องลายระเอียดของธีม เดี๋ยวไว้มาเขียนวันหลังครับ) คอนเซปต์ของธีมคือความ minimal ไม่รกหูรกตา และทำยังไงก็ได้ให้หน้าเพจโหลดไวที่สุด เลยได้ธีมที่ 3 ที่ชื่อว่า Sera ขึ้นมา ตอนนี้ก็ยังทำไม่เสร็จนะครับ ถ้าเจอบั๊กตรงไหนก็รบกวนแจ้งด้วยนะครับ

คอมเครื่องใหม่

โต๊ะทำงานที่บ้าน

จริงๆ จะว่าใหม่ของปีนี้ก็คงไม่เชิง เพราะซื้อมาใช้ตั้งแต่เดือนพฤศจิกายนปีที่แล้ว เป็น Mac Mini ปี 2011 รุ่นเล็กสุดครับ เหตุมาจากคอมเครื่องเดิมที่ใช้อยู่ (Sony Vaio CR25s) ซึ่งเป็นโน้ตบุ๊ค ไม่ค่อยได้ยกไปไหนมาไหนแล้ว ผมก็เลยอยากได้คอม (ที่แรงกว่า) ไว้ติดบ้านสักเครื่อง ส่วนโน้ตบุ๊คเอาไปใช้ที่ทำงานครับ เพราะว่าที่บ้านไม่มีที่เก็บ

เหตุผลที่เลือก Mac Mini คงเป็นเพราะความเล็ก + แรง + minimal (อึกแล้ว) ยังไม่ซื้อแพงกว่านี้เพราะจน เปลี่ยนมาใช้ Mac เพราะว่าอยากให้มันครบๆ ทั้ง 3 OS (ใช้ Windows มาตลอด ส่วนที่ทำงานก็ใช้แต่ Linux) ตอนนี้ก็ใช้ Mac ที่บ้านกับ Ubuntu ที่ทำงานเป็นหลักครับ ส่วน Windows ก็เอาไว้เทสต์เว็บ (ผมไม่เล่นเกมบนคอม)

แนวใหม่

กีต้าร์ไฟฟ้าของพี่

ในที่นี้หมายถึงหัดเล่นกีต้าร์แนวใหม่ คือกีต้าร์ไฟฟ้าครับ ปกติพี่ชายผมเล่นกีต้าร์ไฟฟ้าอยู่แล้ว ส่วนผมเล่นแต่กีต้าร์โปร่ง บังเอิญช่วงนี้พี่ผมไม่ค่อยว่า ผมก็เลยช่วยหยิบมาเล่นเพื่อไม่ให้มันโดนดอง การเล่นกีต้าร์ไฟฟ้าก็เป็นความรู้สึกที่แปลกใหม่ออกไปเยอะครับ ผมเองยังไม่รู้อะไรเลย (ปรับแอมป์ก็ยังไม่ค่อยเป็น) ไม่ได้จะเอาดีทางด้านนี้ครับ เพียงแต่เล่นเพื่อให้ตัวเองรู้ว่าเราจะชอบแนวนี้รึเปล่า .. ตอนนี้ก็ยังไม่รู้ครับ (อ้าว?)

Instagram

Instagram @armno

ตอนนี้ยังใช้ Instagram บน iPad ครับ จะว่าเล่นก็ไม่เชิง ออกแนวศึกษาการออกแบบตัวแอพมันมากกว่า อยากรู้ว่า Instagram นั้นมีอะไรที่ทำให้ประสบความสำเร็จได้ขนาดนั้น ส่วน account ของผมก็ armno ครับ ตอนนี้เอาแต่โพสต์อย่างเดียว เพราะว่ายังไม่ว่างพอจะไปนั่งดูรูปใครครับ คงอีกซักพักนะ

Github

ArmNo on Github

ปกติที่ทำงานใช้ Git อยู่แล้ว เพียงแต่ไม่ใช้ Github ในการเก็บโค้ด ระยะหลังมานี้เห็น Github ได้รับความนิยมขึ้นเรื่อยๆ ในแวดวง developer ก็เลยลองใช้บ้าง แต่ส่วนมากผมใช้ทำงานกับตัวเองมากกว่า ในการ sync โค้ดที่บ้านกับที่ทำงาน ยิ่งบน Mac มี Github for Mac ด้วย ยิ่งสะดวกเข้าไปใหญ่ หวังว่าอีกหน่อยคงได้ร่วม Social Coding กับเขาบ้าง หลักๆ ก็ใช้ทำธีมปัจจุบันนี่แหละครับ

มี ArmNo ตั้ง 2 คนแน่ะ

สำหรับปี 2555 นี้ ก็ขอชีวิตทุกคนมีแต่ความฮา 555 นะครับ

• ArmNo.in.th เกิดเมื่อเดือนตุลาคม 2007 ตอนนี้ก็อายุ 4 ปีหน่อยๆ
• แต่เพิ่งมีโพสต์ได้สามร้อยกว่าๆ เฉลี่ยก็ปีละไม่ถึงร้อย ถือว่าน้อยนะ
• สำหรับปีนี้ โพสต์ไปทั้งหมด 100 โพสต์พอดี (ไม่รวมโพสต์นี้)
• มันเยอะขึ้นมาก็เพราะว่ามี 365 Photo เพิ่มเข้ามาช่วงนึง
• ซึ่งตอนนี้ไม่ค่อยได้อัพเท่าไหร่ละครับ

• สถิติจาก Google Analytics ก็ประมาณนี้ครับ
• จุดเด่นของบล็อกนี้คงเป็น Bounce Rate ที่สูงมาก
• ส่วน Time on Site นั้นไม่เคยถึงนาที
•  เท่าที่สังเกต ส่วนมากคนมาจาก Google เสิชหาอะไรบางอย่าง
• เมื่อหาเจอ อ่านจบ แล้วก็ไป .. จบ
• ส่วนที่พุ่งแหลมๆ นั่น คิดว่าเป็นวันที่มี MSN Error 81000031d เยอะๆ
• โพสต์ที่ยอดวิวเยอะๆ มีไม่กี่โพสต์หรอกครับ
• ปีหน้าจะพยายามเขียนให้มีคุณภาพมากขึ้นครับผม

สำหรับผมแล้ว ปี 2011 กับบล็อกนี้ เป็นปีที่ไม่หรือหวามาก แต่ก็ยังคงจะเขียนต่อไปเรื่อยๆ ครับ

สวัสดีปีใหม่ 2012 ครับผม

ความจริง Sublime Text 2 ก็มีการตั้งค่าต่างๆ เก็บไว้เหมือนกันครับ เพียงแต่ไม่ได้มีหน้าต่าง Options ให้เราใช้งาน (ณ ตอนนี้นะ) การที่เราจะแก้การตั้งค่าต่างๆ ของ Sublime Text 2 ก็ทำได้โดย การดำดิ่งลงไปแก้ text file ที่เก็บการตั้งค่าต่างๆ โดยตรงครับ โดยเมนูจะอยู่ที่ Preference

การตั้งค่าต่างๆ จะแบ่งเป็น 3 ส่วน คือ

• File Settings เป็นการตั้งค่าต่างๆ ของตัว code editor เช่น ฟอนต์ ขนาดฟอนต์ การปิด-เปิด word-wrap
• Global Settings ก็เป็นพวก theme หรือ การจำค่าการปิด-เปิดไฟล์
• Key Bindings เป็นการตั้งค่า hotkey ต่างๆ ครับ

โดย Sublime Text 2 จะแบ่งแต่ละส่วนเป็น 2 ไฟล์อีกที คือ

• Default ของ Sublime Text 2
• User การตั้งค่าของเราเอง

ถ้าลองเปิด File Settings – Default มาก็จะเจอ JSON File ยาวๆ แบบนี้ครับ

ตัว default นี้ ก็จะมี comment บอกไว้หมดครับ ตัวไหนคือการตั้งค่าอะไร และค่า value ที่เราเปลี่ยนได้ มีอะไรบ้าง ตรงนี้เอาไว้  ”ดู” เฉยๆ ครับ ถ้าเราเกิดอยากแก้ไขอะไรขึ้นมา เราจะไม่แก้ในไฟล์นี้ แต่จะไปเขียนใหม่ที่ส่วนของ User Settings แทน

อย่างเช่น ผมต้องการเปลี่ยนฟอนต์ และขนาดของฟอนต์ ก็ทำได้โดยเปิด File Settings – User ขึ้นมา

ตอนแรกจะยังไม่มีอะไร เราก็เอาค่าที่เราต้องการเปลี่ยน มาเพิ่มตรงนี้ โดยเพิ่มเฉพาะค่าที่เราต้องการเปลี่ยนครับ

เสร็จแล้วก็ save ไฟล์นี้ การตั้งค่านี้ก็จะมีผลทันตาเห็น .. เสร็จละครับ ส่วน Global Settings นั้นก็เหมือนกันเลย

จริงๆ เราจะแก้ค่าใน Default File เลยก็ได้ มีผลเหมือนกัน แต่ไม่แนะนำครับ เพราะเราอาจเผลอทำให้โปรแกรมพังได้ ควรจะเขียนเพิ่มมากกว่า ส่วน Default เอาไว้อ้างอิงครับ ส่วน Key Bindings นั้นออกจะแปลกไปหน่อย เพราะเป็น Array ซะส่วนมาก ลองสังเกตและก็จับทางดูครับ หลักการเดียวกัน

ดูจะ Geek ไปหน่อยสำหรับการตั้งค่าของ Sublime Text 2 ลองเล่นกันดูครับ

โดยหลักการก็คือ เราจะแสดงโพสต์ที่เกี่ยวข้องโดยค้นหาจาก Tag ที่เหมือนกับเรื่องที่ดูอยู่ ซึ่งเราก็ต้องไปเพิ่มโค้ดใน WordPress Loop ของเราครับ ตรงนี้แล้วแต่ธีมที่ใช้นะครับว่าอยู่ไฟล์ไหน ของผมอยู่ที่ single.php ซึ่งทำหน้าที่แสดงโพสต์แต่ละโพสต์ ผมเพิ่มโค้ดนี้ข้างล่างเนื้อหาของโพสต์

<div class="related-posts">
<?php
    $tags = wp_get_post_tags($post->ID);
    if ($tags) :
        $first_tag = $tags[0]->term_id;
        $args=array(
	    'tag__in' => array($first_tag),
	    'post__not_in' => array($post->ID),
	    'showposts'=>5,
	    'caller_get_posts'=>1
	);

	$my_query = new WP_Query($args);
	if( $my_query->have_posts() ) : ?>
	    <h4>Related Posts (beta)</h4>
	    <ul>
	    <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
	    	<li>
		    <a href="<?php the_permalink() ?>" rel="bookmark" title="
		    Permanent Link to <?php the_title_attribute(); ?>">
	            <?php the_title(); ?></a>
	        </li>
	    <?php endwhile;  ?>
	    </ul>
<?php  endif;
    endif;
    wp_reset_query();
?>
</div>

ถ้าลองอ่านโค้ดดู มันคือการเอา Tag แรกของโพสต์ที่แสดงอยู่ ไปค้นหาโพสต์ที่มี Tag นี้เหมือนกัน เราจะได้ Custom Loop ใน Main Loop อีกที เพราะฉะนั้นเมื่อเราวน Custom Loop เสร็จแล้ว ต้องเรียกใช้ฟังก์ชั่น wp_reset_query(); เพื่อเป็นการ Reset Custom Loop และกลับเข้าสู่ Loop หลักครับ .. ตรงนี้สำคัญ (และโค้ดต้นฉบับไม่ได้ใส่มาให้) เพราะถ้าเราไม่ Reset Query เวลาเรียกใช้ตัวแปร $post หลังจากนี้ มันจะเป็นของ Custom Loop แทนที่จะเป็นของ Main Loop และอาจทำให้ค่าต่างๆ เพี้ยนได้ครับ

อ่านรายละเอียดของ wp_reset_query(); ได้ ที่นี่ ครับ

อาทิตย์นี้มีรูปสองแนว แนวแรกก็ snapshot ธรรมดาๆ ถ่ายใกล้ๆ บ้านครับ ส่วนครึ่งหลังเป็นรูปพลุที่ตามไปถ่ายที่อนุสาวรีย์สามกษัตริย์ เป็นการถ่ายรูปพลุที่ไม่ค่อยได้เตรียมตัวครับ เลยขาดๆ เกินๆ

เกากลยุทธ์

โดย ดำรงค์ วงษ์โชติปิ่นทอง เห็นหน้าปกสะดุดตา แปลกดี เนื้อหาเกี่ยวกับเรื่องการตลาด เล่มนี้ผมอ่านผ่านๆ ไปรอบนึงแล้ว รู้สึกชอบวิธีการเล่าของเขาครับ

ความสำเร็จเป็นไปได้

โดย ดร. ชัยเสฏฐ์ พรหมศรี เอาไว้อ่านสร้างแรงบันดาลใจ

Happy Drawing

โดย na-ru สอนวาดรูปง่ายๆ ครับ อยากลองหัดวาดรูปดู

“ระหว่างที่รอหมูทอดที่กำลังสุกอยู่นั้น ผมพลันหยิบกล้องถ่ายรูปขึ้นมา หวังบันทึกเพียงความทรงจำกับบ้านหลังนี้ ใต้แสงไฟสว่างใส …”

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

สำหรับการเพิ่ม code snippet ให้กับ Sublime Text 2 นั้นก็ง่ายๆ เลย เริ่มจากไปที่เมนู Tools > New Snippet ก็จะเจอหน้าจอ default ตามรูปข้างล่างครับ

ดูลักษณะแล้วเป็น markup คล้ายๆ XML ประกอบด้วย 3 อวัยวะด้วยกันคือ content, tabTrigger, และก็ scope

• content คือ โค้ดส่วนที่ต้องการให้มัน expand ออกมาเมื่อเรากด tab
• tabTrigger คือ คำที่เราต้องการพิมพ์แล้วให้มันยืดออกเป็น content ข้างบน
• scope เป็นตัวบอกว่า snippet นี้ให้มีผลเฉพาะกับโค้ดภาษาใดภาษาหนึ่งเท่านั้น (ก็ได้) เช่น ถ้าเรากำหนด scope ให้เป็น php ตัว snippet นี้ก็จะไม่ทำงานตอนเราเขียน javascript เป็นต้น

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

สมมุติว่าผมไปเจอตัวสร้าง dummy text น่ารักๆ อย่าง CupcakeIpsum แล้วถูกใจ อยากสร้าง snippet เก็บไว้ใช้เอง ผมก็ไปสร้าง dummy text จากในเว็บ แล้วก็ก๊อปปี้มาวางอย่างในรูป พร้อมกำหนด tabTricker ให้เป็นคำว่า cupsum .. นั่นหมายความว่า ถ้าผมพิมพ์แค่ cupsum แล้วกด tab มันก็จะยืดๆ เป็นข้อความยาวๆ ให้อัตโนมัติ .. สำคัญก็คือ วางข้อความระหว่าง <![CDATA[ กับ ]] นะครับ

จากนั้นก็เซฟ (Ctrl + s) ตั้งชื่อไฟล์เป็นอะไรก็ได้ แต่นามสกุลไฟล์ต้องเป็น .sublime-snippet นะครับ

เรียบร้อยแล้ว เพียงเท่านี้เราก็จะมี snippet ประจำตัวอย่างง่ายๆ กับเขาแล้ว

ใส่ตัวแปรให้กับ snippet

ในส่วน content นอกจากเราจะใส่เป็นข้อความธรรมดาได้แล้ว เรายังสามารถกำหนดให้มันรับค่าจากเราได้อีกตัว (เหมือนเป็นตัวแปร) ส่วนนี้ก็คล้ายๆ แบบที่ Netbeans ทำได้ครับ .. ตัวอย่างเช่นผมอยากได้ snippet สำหรับเป็นเมนู navigation ในเว็บไซต์ง่ายๆ (จริงๆ โค้ดแบบนี้ใช้ Zen Coding น่าจะไวกว่า)

ตัวแปรใน content จะมี pattern เป็นแบบ ${ตัวเลข:ข้อความ default} โดยที่เรากด tab ตัว cursor มันก็จะเลื่อนไปเรื่อยๆ ตามตัวเลขครับ .. นอกจากนี้ เรายังใส่ตัวแปรซ้ำกันหลายๆ ที่ เพื่อให้ไม่ต้องพิมพ์หลายครั้งก็ได้นะครับ

แค่นี้เราก็จะได้ code snippet มาช่วยให้เราเขียนโค้ดไวขึ้นแล้วล่ะครับ

เพิ่มเติม

• snippet ที่เซฟไว้ เราสามารถเปิดขึ้นมาแก้ไขได้ โดยไม่ต้องสร้างใหม่
• เซฟแล้วใช้งานได้ทันที ไม่ต้อง restart โปรแกรม
• ถ้ายังงงๆ ลองดูวิดีโอตอน How to Create Snippets นี้ได้ครับ

วันหยุดวันเสาร์ ได้ออกไปถ่ายรูปแถวๆ บ้าน ได้รูปมานิดหน่อยครับ

Weekend No. XX ของผมคือรูปถ่ายที่ผมถ่ายช่วงสุดสัปดาห์ และแชร์ใน Facebook ของผมในวันเสาร์-อาทิตย์ครับ (เพื่อนๆ ใน Facebook จะรู้จักดี) เริ่มมาตั้งแต่ No. 34 มีข้ามไปบ้าง (แต่หลังๆ ไม่ข้ามแล้ว) ตอนนี้ถึง No.80 แล้วครับ .. เพิ่งนึงขึ้นได้ว่าน่าจะทำเป็น Set ใน Flickr แล้วมาอัพที่บล็อกนี้ด้วย

เดี๋ยวจะหาว่าผมขี้เกียจถ่ายรูป ^^”