"Hello World" - Mad Programmer Diary

[Life Hack] P2P กับ Bittorrent โลกแห่งการแบ่งปัน (ที่มากเกินไป)

Posted by arnondora on August 31st, 2015

ในปัจจุบัน P2P ก็หลายเป็น The King ของโลก Internet ของเราซะแล้ว เรียกได้ว่าบรรดาสิงห์นักโหลดทั้งหน้าเก่า และหน้าใหม่ก็ยังต่างติดใจใช้ P2P กันอย่างเหนี่ยวแน่น จากผลสำรวจจากบรรดา ISP ทั้งหลายพบว่า Traffic มากกว่าครึ่งที่ผ่าน ISP นั้นมาจาก P2P ซึ่งเยอะกว่า www ซะอีก แม้ว่าจำนวนคนที่ใช้ P2P จะน้อยกว่า World Wide Web ซะอีก แต่ว่าแต่ P2P คืออะไรกันแน่หว่า แล้วเราใช้มันกันตอนไหน? P2P คืออะไร ? P2P มันย่อมาจาก Peer to Peer เอาง่ายๆ มันคือการเชื่อมต่อแบบที่ว่า เครื่องต่อเครื่องเลย แต่ล่ะเครื่องสามารถส่งผ่านข้อมูลให้กันได้อย่างอิสระเลย ต่างจากแบบ Client/Server (ที่นิยมใช้ในปัจจุบัน) ที่ต้องอาศัย Server เป็นตัวกระจายข้อมูลให้กับ Client ถ้าเกิดวันใดวันนึง Server […]

[Dev Tip] JPG VS PNG

Posted by arnondora on August 25th, 2015

ตอนนี้หลายๆ เว็บรวมทั้งเว็บผมด้วย กำลังมีปัญหาอันนึงที่ใหญ่มากๆ อันเนื่องมาจาก “เว็บมันใหญ่มาก!!!” คือเราพยายามจะ Optimize แล้ว ขนาดมันก็ยังใหญ่โตอลังการอยู่ เลยเข้าไปลองหาดูว่า การที่เว็บเราขนาดมันใหญ่เนี่ยมันเกิดจากอะไร ลองมาดูกันเลยดีกว่า ก่อนอื่นผมก็ลองเปิด Dev Tool ของ Google Chrome ขึ้นมาเพราะอยากรู้ว่า หน้าแรกของเรามันขนาดเท่าไหร่นะ ผลที่ได้คือถึงกับผง่ะเลยทีเดียว เพราะว่ากินไป 456 kb ในหน้าเดียว! ถ้าเรามาดูที่ตัวโค๊ตของเว็บก็จะเห็นว่า ขนาดมันเล็กมากแค่ 4.1 kb หรือคิดเป็น 0.89% เท่านั้นเอง เพราะโค๊ตทั้งหมดได้ผ่านการ Minify ให้มันเล็กลงไปแล้ว เพราะฉะนั้นตรงนี้ไม่น่าจะใช่ปัญหาที่เราหาอยู่ มาดูที่รูปภาพกันบ้าง อันนี้แหละของจริง จากที่เราเห็น แค่รูปภาพอย่างเดียวมันกินไป 438 kb หรือคิดเป็น 96.05% เลยทีเดียว ซึ่งมันเยอะมากๆ เพราะฉะนั้นถ้าการใช้รูปในเว็บจะต้องคิดดีนึดนิง เพราะว่าขนาดมันค่อนข้างเยอะ แต่วันนี้เราจะมาดูกันว่า ทำยังไงถึงขนาดรูปจะไม่อลังการงานสร้างมากนัก สกุลไฟล์ก็สำคัญนะ สกุลไฟล์ของรูปภาพที่เราใช้ในเว็บส่วนใหญ่ตอนนี้ก็คงหนีไม่พ้น .jpg และ .png แน่นอน ก่อนอื่น […]

Twitter Bootstrap Basic – All About Table! Just like old times! (EP.2)

Posted by arnondora on August 25th, 2015

กลับมาแล้วกับ EP.2 เมื่อตอนที่แล้ว เราก็ได้พูดถึงเรื่อง Grid ซึ่งเป็นอะไรที่ช่วยทำให้เราจัดหน้าเว็บของเราได้ง่าย และสวยขึ้นเยอะเลย อีกทั้งมันยังเป็น Responsive อีกด้วย แต่ในวันนี้เราจะไม่ได้มาคุยกันเรื่อง Grid อีกแล้ว แต่วันนี้เราจะมาพูดถึงกันในอีกหัวข้อนึง นั่นคือ Table ทบทวนกันหน่อย ว่าเราจะสร้าง Table กันได้ยังไง? ใน HTML เวลาเราจะสร้าง Table เราก็ต้องเรียก <table> ออกมาก่อน จากนั้นใน <table> ก็ต้องมี <tr> เพื่อบอกแถว และ <td> เพื่อบอกหลัก เช่น <table> <tr> <td>ID</td> <td>Name</td> </tr> <tr> <td>001</td> <td>Person 1</td> </tr> <tr> <td>002</td> <td>Person 2</td> </tr> </table> ผลที่ได้ก็จะออกมาเป็น ID Name […]

Bootstrap 4 Alpha มาแล้ว!!

Posted by arnondora on August 20th, 2015

หลังจากที่เขียน Tutorial ของ Bootstrap ไปไม่กี่ตอน Boostrap ตัวใหม่ก็ออกมาจนได้ วันนี้เราจะมาดูว่า มันมีอะไรใหม่บ้าง มันมีอะไรใหม่บ้าง เป็นจาก LESS เป็น Sass – ถึงตอนนี้ใครใช้ LESS ก็ได้เวลาไปลอง Sass กันแล้วล่ะครับ จากที่เว็บของ Bootstrap บอกมา มันจะทำให้เราสามารถ Compile โค๊ตได้เร็วกว่า LESS กว่าไหน งานนี้ต้องขอบคุณ Libsass เลยที่ทำให้เรา Compile ได้เร็วขึ้น New Grid System – จากตอนแรกที่ได้เขียนเรื่องของ Grid ไป มันจะมี xs, sm, md และ lg 4 ขนาดเท่านั้น แต่พอมาในเวอร์ชั่นใหม่ เรามีทั้งหมดถึง 5 ขนาด โดยจะเพิ่มมาอีกขนาดนั่นคือ xl ซึ่งเป็นขนาดใหญ่สุดเลย เอา […]

Twitter Bootstrap Basic – Let’s Talk About Grid (EP.1)

Posted by arnondora on August 18th, 2015

ในปัจจุบันเรามีอุปกรณ์ที่สามารถเข้าถึงอินเตอร์เน็ตมากขึ้นเรื่อยๆ จากเมื่อก่อนเรามีแค่คอมพิวเตอร์อย่างเดียว ขนาดหน้าจอก็เดิมๆ ไม่ได้เปลี่ยนแปลงอะไรมา แต่พอมาในถึงยุคปัจจุบันนี้ที่มี Smart Devices เข้ามาในโลกของอินเตอร์เน็ตเยอะมากขึ้น ขนาดหน้าจอตอนนี้ก็มีตั้งแต่โทรศัพท์เครื่องโง่ๆ หน้าจอเล็กๆ ยันโทรทัศน์จอ 4k เพราะฉะนั้นเราก็ต้องออกแบบเว็บเราให้เข้ากับขนาดของหน้าจอหลายๆ แบบเพื่อให้อุปกรณ์หลายๆ แบบสามารถใช้เว็บของเราได้ ตอนนี้เขามีแนวทางการออกแบบที่เรียกว่า Mobile First ซึ่งผมเคยเขียนไปแล้ว แต่วันนี้เอามาสรุปคร่าวๆ ล่ะกัน Mobile First เป็นแนวทางในการออกแบบ โดยให้เราสนใจออกแบบตามหน้าจอที่มีขนาดเล็กก่อน แล้วค่อยขยายไปยังหน้าจอที่ใหญ่กว่า ถ้าถามว่าทำไม? ให้เราลองคิดดูเล่นๆ ว่าถ้าเราออกแบบตามหน้าจอที่ขนาดใหญ่ก่อน เวลาเราเอามาย่อ มันก็จะลำบาก เพราะว่า พื้นที่มันเล็กลง แต่ Content เราเยอะเต็มหน้าจอใหญ่เลย ย่อทีก็ต้องตัด Content ไปอีกซึ่งเป็นเรื่องที่ไม่ดีเอาซะเลย เพราะฉะนั้นการออกแบบโดยยึดหลัก Mobile First ทำให้เราออกแบบเว็บของเราได้ง่ายมากขึ้น และโค๊ตเราก็จะสะอาดยิ่งขึ้น ง่ายต่อการพัฒนาต่อ และการดูแลรักษา หลังจากเกริ่นมานาน เข้าเรื่องของวันนี้สักที เครื่องมือที่เราจะเอามาใช้ในวันนี้คือ Grid เมื่อก่อนถ้าเราจะทำเว็บที่เป็น Responsive เราก็ต้องใช้ Table หรือทำ Break […]

[Dev Tip] Getting Started with Bower

Posted by arnondora on August 16th, 2015

อย่างที่รู้กันว่า ตอนนี้ผมกำลังเขียน Tutorial ของ Bootstrap อยู่ มันเลยทำให้ผมนึงถึงของสิ่งนึงที่ทำให้เรา Install Bootstrap หรือ Web Components อื่นๆ ได้ง่ายขึ้นเพียงแค่ Enter เดียว นั่นคือ Bower นั่นเอง Bower คืออะไร ? มันเหมือนกับ Package Manager ตัวนึงเลย เราสามารถโหลดของพวก Web Components เช่น Bootstrap, jquery เข้ามาได้ง่ายมาก โดยที่เราไม่ต้องเข้าไปโหลดมันมาจากทีล่ะเว็บเหมือนเมื่อก่อน การติดตั้ง Bower Bower เป็น Package นึงใน Node.js เพราะฉะนั้นเราจะต้องลง Node.js กันก่อน ให้เราเข้าไปโหลดและติดตั้งตัว Node.js มาก่อน หลังจากที่เราได้ Node.js มาแล้ว เราก็จะมา Install Bower กันโดยผ่าน Command Line […]

Twitter Bootstrap Basic – What is Bootstrap? (EP.0)

Posted by arnondora on August 15th, 2015

หลังจากที่หายไปจากการเขียน Tutorial มานาน วันนี้กลับมาแล้ว กับหัวข้อที่หลายๆ คน Request เข้ามา ว่าอยากจะสร้างเว็บที่เป็น Responsive ง่ายๆ โดยที่ไม่ต้องเขียน Breakpoint เลยมีคนแนะนำให้เขียน Tutorial ของ Bootstrap ขึ้นมานั่นเอง Twitter Bootstrap คืออะไร ? นั่นดิ มันคืออะไร ? เอาจริงๆ ใช้มาตั้งนานก็ยังไม่รู้เลยว่า สรุปแล้ว เราจะให้คำนิยามว่ามันเป็นอะไรดี แต่ถ้าเอาตามที่เจ้าของเขียนไว้ในเว็บว่ามันเป็น HTML, CSS, JS Framework หรือเรียกอีกอย่างว่า Front end Framework Front end Framework คืออะไร ? เราจับมันแยกทีล่ะคำเลยดีกว่า ก่อนอื่นคำว่า Front end มันคือส่วนหน้าบ้านของเรา หรือว่า เป็นส่วนที่ User ของเราจะมองเห็นนั่นเอง ส่วนอีกคำ Framework มันเหมือนกับกรอบการทำงาน […]

โลกของคนถนัดซ้าย ที่คนถนัดขวาไม่เข้าใจ

Posted by arnondora on August 14th, 2015

ก็เมื่อวานของวันที่เขียนเป็นวันที่ 13 สิงหาคม ซึ่งเขากำหนดให้เป็นวันของคนถนัดซ้ายสากล จากการสำรวจพบว่า คนที่ถนัดซ้ายมีอยู่ประมาณ 15% ของคนบนโลกเท่านั้นเอง ซึ่งผมก็เป็นหนึ่งใน 15% เช่นกัน คนสมัยก่อนโดยเฉพาะชาวเอเชีย เชื่อว่าการที่คนเกิดมาถนัดมือซ้ายถือเป็นความพบพร่องบ้าง นำความโชคร้ายมาให้บ้าง เขาเลยบังคับให้ใช้มือขวาแทน เนื่องจากความเข้าใจผิดแบบนี้ ทำให้หลายๆ คนที่ถนัดมือซ้ายหายไปเยอะอยู่เหมือนกัน ซึ่งแน่นอนว่า เราเป็นชนกลุ่มน้อย เพราะฉะนั้นสิ่งของหลายๆ อย่างจึงถูกออกแบบมาเพื่อคนส่วนใหญ่ที่ถนัดขวากันหมด วันคนถนัดซ้ายสากลจึงเกิดขึ้น เพื่อแสดงให้เห็นว่า ไม่ว่าเราจะถนัดมือไหน เราก็มีศักยภาพเท่าเทียมกัน และได้เห็นว่าพวกเรานั้นมีกลไกการทำงานของร่างกายที่เป็นเอกลักษณ์ และแน่นอนว่า วันนี้เราจะมาดูปัญหาอันโคตรจะปวดจิตของคนถนัดซ้ายกัน โต๊ะ Lecture ที่น่าปวดจิต หลายๆ คนน่าจะเคยได้ใช้เจ้าโต๊ะ Lecture กัน ถ้าใครยังไม่เคยมันคือ เก้าอี้ที่มีโต๊ะเล็กๆ โง่ๆ ที่สามารถพับได้ ซึ่งแน่นอนว่า มันจะพับเข้าออก ทางด้านขวาของเรา ที่วางแขนเวลาเราเขียนมันก็จะอยู่ทางด้านขวาเช่นกัน เวลาใช้ในคณะแล้วมันช่างเหมื่อยมากเวลาเขียนอะไรเยอะๆ รอยหมึกและดินสอที่มือ วิธีสังเกตคนถนัดซ้าย หรือขวา ถ้าอยู่ในห้องเรียนดูไม่ยากเลย ถ้าคนไหนมีรอยเปื้อนอยู่ที่ขอบของมือซ้าย ก็ใช่เลยคุณคือพวกเรา เรื่องเวลาเขียนแล้วมี ดินสอหรือหมึกติดมาเป็นเรื่องที่น่ารำคาญมากของคนที่ถนัดมือซ้าย แต่ก็ไม่รู้จะแก้ปัญหายังไงดีเหมือนกัน ยกเว้นเปลี่ยนไปใช้มือขวาเขียน […]

[Dev Tip] Package Control + แนะนำ Package เจ๋งๆ ใน Sublime Text!!

Posted by arnondora on August 12th, 2015

Sublime Text ก็เป็น Editor ตัวหนึ่งที่หลายๆ คนเลือกใช้กันเพราะว่า มันค่อนข้างที่จะทำอะไรได้หลายอย่าง และก็ใช้ง่ายด้วย ตอนแรกผมก็เฉยๆ นะแต่พอมาลองเล่นดูจริงๆ มันทำอะไรได้เยอะมากๆ เมื่อก่อน ก่อนที่ผมจะมาใช้ Sublime ส่วนใหญ่จะใช้ Vim เป็น Editor ตัวหลักๆ เพราะมันสามารถปรับอะไรได้เยอะมากๆ และอีกอย่างมันก็มี Plugin ให้เราเลือกเล่นเยอะมากๆ ตอนนั้นเลยติดใจมาก และวันนึงก็มาเจอเจ้า Sublime Text นี่แหละ มันทำได้คล้ายๆ Vim เลยแล้วมันเป็น GUI ด้วยเลยมาลองเล่นดู ปรากฏว่า มันส์มาก ถึงจะมันส์ไม่เท่า Vim แต่ก็ทำงานได้เร็วขึ้นเยอะเลย แต่โดยปกติแล้ว ถ้าเราติดตั้ง Sublime Text มาเพียวๆ เลยการติดตั้ง Plugin จะค่อนข้างยากสักหน่อย เลยมีคนทำ Package Control มาให้เราใช้ การติดตั้ง Package Control ก่อนอื่นให้เรากดเปิดหน้า Console ขึ้นมาก่อน (View […]

[Life Hack] รู้จักกับ TRIM บน SSD กันเถอะ

Posted by arnondora on August 9th, 2015

ตอนนี้ถ้าใครหลายๆ คนที่ซื้อคอมใหม่ หรือกำลังจะซื้อคอมใหม่น่าจะเคยได้ยินคำว่า SSD กันมาบ้างแล้ว เมื่อก่อน เราอาจจะมองว่า SSD มันราคาแพงมากคนทั่วๆ ไปมักจะเอื้อมไม่ค่อยถึงกัน แต่ตอนนี้เวลาผ่านไป SSD ราคาถูกลงอย่างเหลือเชื่อ (ก็เวอร์ไป) จนทำให้ผู้ใช้ทั่วไปสามารถเข้าถึงได้แล้ว SSD คืออะไร ? มันก็เป็นอุปกรณ์ที่ใช้ในการเก็บข้อมูลในคอมพิวเตอร์อีกแบบหนึ่ง อารมณ์เหมือน Harddisk จานหมุนๆ ที่เรากำลังใช้กันตอนนี้เลยล่ะ แต่เจ้านี่จะไม่ได้ใช้จานแม่เหล็กหมุนๆ แล้ว แต่จะใช้ Flash Memory แทน ถ้านึกภาพไม่ออกให้นึกถึง Flash Drive ที่เราใช้กันอยู่ทุกวันนี้ เหมือนกันเลย แต่แค่จุข้อมูลได้เยอะกว่า ขนาดใหญ่กว่า เร็วกว่าเท่านั้นเอง ข้อดีและข้อเสียของ SSD เนื่องจากที่มันใช้ Flash Memory ทำให้มันไม่มีชิ้นส่วนที่ต้องเคลื่อนไหว ทำให้มันทนทานและเงียบกว่า Harddisk จานหมุนที่เราใช้อยู่เยอะมาก (เอาจริงๆ Flash Drive ที่ผมลืมไว้ในกระเป๋ากางเกง เอาไปซัก เอาไปตาก ไปเจอลองเอามาเสียบ ก็ยังใช้ได้ข้อมูลอยู่ครบ จนถึงตอนนี้มันก็ยังใช้ได้อยู่เลย) […]

Older Entries