"Hello World" - Mad Programmer Diary

Google Web Polymer – Auto Binding-Template (EP.5)

Posted by arnondora on March 30th, 2015

เมื่อตอนที่ผ่านๆมาเราได้เรียนรู้เรื่องของการ สร้างโครงสร้างของหน้าไปบ้างแล้ว ตอนหลังนี้จะเป็นเรื่องของการผูกข้อมูล หรือเรียกดีๆว่า Data-Binding แต่ก่อนจะพูดถึงเรื่องนั้น เราต้องมาพูดถึงเรื่อง Data-Binding กันก่อน Data-Blinding คืออะไร? ภาษาไทยเราเรียกว่า การผูกข้อมูล (เรียกแล้วแปลกๆเรียก Data-Binding นี่แหละนะ) มันคือการทำให้ Content เราเป็น Dynamic คือ Content ในหน้าเว็บมันดึงหรือสร้างมาจากที่สักที่นึง ที่ไม่ใช่ข้อมูลตายตัว มันทำงานยังไง? ตามปกติแล้ว ในการสร้างเว็บที่ Dynamic หรือไม่ต้อง Refresh หน้าใหม่ Content ข้างในก็ Update ได้เองนั้น เราจะใช้สิ่งที่เรียกว่า AJAX ซึ่งวิธีการทำงานของมันก็คือ JS จะส่ง Request ไปหา Web Server Web Server ส่งข้อมูลกลับมา ลบข้อมูลของเก่าที่แสดงทิ้ง สร้างที่วางข้อมูลใหม่  เอาข้อมูลที่ได้จาก Web Server มาวางลงไปในที่วางที่พึ่งสร้าง จากที่เห็น Process […]

ทำไมต้องมีแฟนเป็นคนทำงานไอที?

Posted by arnondora on March 28th, 2015

เรื่องนี้เป็นเรื่องที่ผม “คิด” มานานมากแล้ว แต่ก็ไม่ได้เขียนสักที นึกได้แล้วก็ลืม (แย่จัง TT) เรื่องมันก็มีอยู่ว่า ผมไปสงสัยว่า คนที่ทำงานอาชีพไอทีอย่างพวกเรา มีแฟนแล้ว แฟนเราจะได้อะไรที่ต่างจากคบกับคนที่ทำงานด้านอื่น ผมเลยไปหาใน Google เพื่อศึกษาเรื่องพวกนี้ แต่ก่อนหน้านั้น เราจะมีดูลักษณะที่สำคัญของ คนที่ทำงานไอทีกันก่อน พวกเราเป็นสิ่งมีชีวิตที่เลี้ยงดูง่าย มีแค่ 3 อย่างก็อยู่ได้แล้ว นั่นคือ คอมพิวเตอร์ อินเตอร์เน็ตไวๆ และสำคัญสุด ของกิน พวกเราจะเป็นสิ่งมีชีวิตที่พูดอะไรที่คนทั่วไปมักฟังไม่รู้เรื่อง (อยู่ไปสักพัก เดี๋ยวก็เข้าใจและ) บางคน ย้ำว่าบางคน มันมี Logic กับงานมาก แต่กับคนอื่นแล้วนั่นหา Logic แทบไม่เจอเลยทีเดียว สิ่งมีชิวิตพวกนี้ บางคนจะดูแลตัวเองไม่เป็น (ต้องหาใครสักคนมาให้ดูแลแล้วสินะ) ที่ว่ามาทั้งหมดนี้ บรรทัดฐานผมล้วนๆ 5555 ตัวเองล้วนๆเลย กลับมาที่คำถามของผมครับ “มีแฟนเป็นโปรแกรมเมอร์แล้วจะได้อะไร?” คุณจะได้เรียนรู้ “ศัพท์ประหลาด” จากหัวของเขา บางครั้งมันก็เจ๋งดีนะ คุณจะได้แฟนที่ใช้ Logic ได้อย่างชำชองมาก คุณจะได้แฟนที่ไม่เรื่องมาก เพราะมันไม่เคยคิดอะไรอยู่แล้วนอกจากเรื่อง เมีย/ผัวใหญ่ของมันนั่นคือ […]

Studying In University 101: Having a f__king LECTURE. (And sleep while doing it. Just kidding)

Posted by arnondora on March 27th, 2015

จากตอนที่แล้ว ก็เล่าเรื่องการอยู่หอไปแล้ว วันนี้มาด้วยอีกเรื่องที่ มันสร้างความ ชิบหาย กับผมบ้างในบางวิชา นั่นคือการเข้าเรียนครับ การเรียนมหาลัยมันไม่เหมือนกับเรียน ม.ปลายครับ มันต่างกันเยอะมากๆเลย วิธีเรียนของที่มหาลัยมันจะเป็นวันล่ะ 1-2 วิชา เช้า บ่าย วิชาล่ะ 1.5-3 ชม แล้วแต่วิชา อ้าวอย่างงี้ก็ไม่เหนื่อยเท่า ม.ปลายสิ เราเรียนวันล่ะ 7-9 คาบต่อวันเลยนะ!! ลองมาเรียนดูสิครับ แล้วจะรู้ว่าทำไม เรียนแค่วิชาเดียวก็กระอักเลือก สำลักความรู้ตาย แล้วครับ! แต่เรื่องที่ผมจะพูดถึงในวันนี้นั่นคือ การนั่งเรียน เมื่อก่อนตอนสมัยมัธยม 1 คาบมี 50 นาที แค่เรียนวิชาเดียว 50 นาทีก็จะเอียนตายอยู่แล้ว แต่นี้โดนไปเลย 3 ชม. ระบมเลย TT นี่แหละถึงบอกว่า มหาลัยเรียนวิชาต่อวันน้อยกว่า แต่ทำไมเรียนที บางคนแทบลงไปกองกับพื้น บางวิชาซ้ำร้ายหนักเลย อาจารย์สอนไม่รู้เรื่อง เอาแล้วไงครับ! งานช้างแล้วไง เราต้องมา Self Study มากขึ้น (การ […]

Google Web Polymer – Core Drawer Panel อะไรของมันแว๊! (EP.4)

Posted by arnondora on March 27th, 2015

กลับมาอีกแล้วนะฮ่ะ ตอนที่เขียนตอนนี้ Class โดน Cancel ได้เจ็บปวดมาก เลยว่างออกมาเขียน Blog นี่แหละ มาต่อจากความที่แล้วกันเลยครับ ย้อนความแปบ! เมื่อตอนที่แล้ว เราได้สร้างหน้า Index.html ที่มี Toolbar ที่มีปุ่ม Hamburger กับ search เรียบร้อยแล้ว ด้วย core-header-panel และเติมความหวืหว่าด้วย core-header-panel ไปแล้ว แต่มันเกิดปัญหาอยู่ว่า ถ้าเราเปิดบน Smart Device มันก็แล้วไปเพราะมันโออยู่นะครับ แต่ถ้ามาเปิดใน Desktop แล้วเนี่ย มันเหมือนเอาแอฟโทรศัพท์มายืดให้เราใช้เลย มันโคตรไม่สวยเลย วันนี้เราจะทำให้มันโอ้วเย้ ขึ้นด้วย core-drawer-panel มารู้จักกับ core-drawer-panel กัน เอาง่ายๆมันก็คือแถบที่อยู่ทางซ้าย ที่เป็นเมนูเหมือนเวลาเราใช้ Application บนโทรศัพท์เลยครับ ตอนนี้กลับมาที่ไฟล์ของเมื่อ EP ที่แล้วก่อน เราจะสร้าง core-drawer-panel มาคร่อม core-header-panel อีกทีนึง (เขียนไปเยอะก็เริ่มแอบงงเหมือนกัน) […]

Google Web Polymer – Core Toolbar & Core Header Panel (EP.3)

Posted by arnondora on March 26th, 2015

เมื่อตอนก่อน เราพูดเรื่องของ Elements พื้นฐานไปบ้างและ ลงลึกเรื่องของ Icon ไปแล้ว วันนี้เราจะมาลงลึกในเรื่องของ Toolbar กันบ้าง แบบที่เราเห็นอยู่ใน Android Application ก่อนอื่นให้ลง core-toolbar, paper-icon-button, core-icon และ paper-progress ไปก่อน อย่าลืมลง platform ด้วยล่ะ ไม่งั้นรันไม่ได้เน้อ โดยใช้คำสั่งตามนี้เลย bower install –save Polymer/core-toolbar Polymer/paper-icon-button Polymer/paper-progress หลังจากที่เราได้ติดตั้ง Element ที่จำเป็นทั้งหมดในวันนี้แล้ว มาเริ่มสร้างกัน ก่อนอื่น เราจะมาสร้าง Toolbar กันก่อนโดยใช้ tag core-toolbar  และจะเพิ่มข้อความว่า My App ลงไปใน Toolbar ที่พึ่งสร้างด้วย <core-toolbar> <div>My App</div> </core-toolbar> หลังจากนั้นผมอยากได้ผม Menu เราก็เติม Button […]

Google Web Polymer – Basic Elements & Icon มหาสนุก (EP.2)

Posted by arnondora on March 25th, 2015

อย่างที่เคยบอกไปว่า Web Polymer มันคือการเอา Element มาวางต่อๆกันจนเป็น Application ขึ้นมา วันนี้เราจะมาดูต่อกันว่า เราจะเรียกใช้ Elements ได้ยังไง Google แบ่ง ตัว Build-in Elements ออกเป็น 2 ประเภท นั่นคือ Core Icons – ตรงตามชื่อเลยครับ มันคือ Icon ทั้งหลาย Core Elements – มันคือ Element ที่ใช้งานพื้นฐานเช่นพวก Layout Element, Icon หรือจะเป็นพวก Ajax calling  Paper Elements – ส่วนอันนี้จะเป็นส่วนของพวก Material Design ทั้งหมด ทั้งหมดที่ว่ามา เราสามารถเลือกติดตั้งได้ตามการใช้งานเลยนะครับ แต่วันนี้เราจะติดตั้งมันทั้ง 3 อย่างเลย แต่ก่อนจะใช้เราจะต้องติดตั้งมันเข้ามาซะก่อน  ก่อนอื่นให้ cd ไปที่ project […]

Google Web Polymer – Getting Started & Installation (EP.1)

Posted by arnondora on March 24th, 2015

Web Polymer -> ความคิดใหม่สุดแหวกแนวในการสร้าง Web Application เจ้า Web Polymer Google ได้เปิดตัวจริงๆจังๆตั้งแต่ในงาน Google I/O 2013 แล้วล่ะครับ แต่ตอนนั้นผมก็ยังเฉยๆกับมันอยู่ แต่ตอนนี้พอเข้าไปลองเล่นจริงๆแล้ว มันเจ๋งมาก หลักการทำงานของมันก็คือการแยกส่วนต่างๆของ Web Application ออกเป็นส่วนๆ แยกกันทำงานอย่างอิสระ เวลาเราใช้ก็เพียงก็นำมันมาต่อรวมกันเท่านั้นเอง (เหมือนเล่น Lego เลยเนอะ) ถามว่า Web Polymer จริงๆแล้วมันคืออะไรกันแน่ล่ะ? เอาจริงๆแล้วตามที่ Google เคยบอกไว้ มันคือ UI Library ตัวหนึ่งที่อิงหลักการของการสร้าง Web Application อย่างเต็มสตรีมกันเลยทีเดียว ซึ่งมันจะต่างกับพวก Bootstrap ที่เน้นการทำงานที่ค่อนข้างง่ายๆ ซึ่งเจ้า Polymer จะมองวัตถุทุกชิ้นเป็น HTML Tag ชนิดนึงเลย ต่างจาก UI Library เจ้าอื่นๆที่อยู่ในแท๊ค Div […]

Studying In University 101 – Dormitory

Posted by arnondora on March 24th, 2015

ตอนนี้ผมก็เป็นนักศึกษามหาลัยได้เกือบปีและ และตอนนี้ก็เห็นรุ่นน้องเข้ามาใหม่ ก็เลยอยากจะเล่าเรื่องของเมื่อปีที่แล้วให้ฟังกานน เรื่องแรกในวันนี้เป็นเรื่องของการอยู่หอครับ เมื่อปีก่อนเรื่องนี้ก็เป็นประเด็นกับพี่อยู่พักนึงเลยครับว่าจะอยู่ดีมั้ย สุดท้ายก็อยู่ ฮ่าๆๆๆ วันนี้เลยจะมาบอกว่าทำไมพี่ต้องมาอยู่หอ ก่อนอื่นเราต้องถามความจำเป็นของเราก่อนครับ ว่าทำไมต้องมาอยู่หอ แทนที่จะอยู่บ้าน เพราะการมาอยู่หอนั้นก็จะทำให้พ่อแม่เรามีค่าใช้จ่ายมากขึ้นทั้งเรื่องของ ค่าหอ ค่ากินอยู่ของเรา และต่างๆนาๆมากมาย เพราะฉะนั้นเราควรจะคิดถึง เรื่องของค่าใช้จ่าย ต่างๆนาๆก่อนที่จะคิดมาอยู่นะครับ ข้อดีของการอยู่หอคืออะไร? ข้อแรกเลยครับ พี่โคตรชอบเลย นั่นคือ ลดเวลาเดินทางครับ มันทำให้เราสามารถตื่นสายได้มากขึ้นจากบางคนอยู่บ้านเรียนต้องตื่นสัก ตี 5 แต่พี่อาจจะตื่นสัก 7 โมงยังเข้าเรียนทันเลย lol อีกเรื่องคือเรื่องของ สังคม ครับ การที่เรามาอยู่หอเนี่ย เราต้องใช้ชีวิตอยู่กับเพื่อนมากขึ้นมากเลยล่ะครับ จากเมื่อก่อน เช้าเราไป รร. อยู่กับเพื่อน เย็นกลับบ้านเราก็อยู่กับพอแม่ และมีเวลากับตัวเองเยอะมากเลยล่ะครับ แต่กลับกัน ถ้าเรามาอยู่หอแล้วเนี่ยเวลากับ พ่อแม่ และครอบครัว จะหายไปเยอะอย่างไม่น่าเชื่อเลยครับ (ตอนแรกพี่ก็ไม่เชื่อเหมือนกัน แต่พอมาอยู่เท่านั้นแหละ มันโคตรจริงเลย) ดังนั้นการอยู่หอมันสอนเราในเรื่องของการใช้ชีวิตเยอะครับ อีกเรื่องเลยคือ เรื่องของการดูแลตัวเองครับ เมื่อก่อนเราอยู่บ้าน ที่บ้านก็จะดูแลเราหมดเลย แต่ตอตนี้เรามาอยู่หอ […]

Shigatsu wa Kimi no Uso – Your Lie In April ฤดูที่ไม่มีเธอ

Posted by arnondora on March 22nd, 2015

ห่างหายกันไปนานเลยนะครัช ช่วงนี้ก็เทอม 2 แล้ว อะไรที่ยุ่งๆก็ผ่านไปบ้าง เสร็จบ้าง ทิ้งบ้าง (เฮ้ย!! ไม่ใช่และ) เลยมีเวลามานั่งดู Anime อย่างจริงจัง (แม้เกรดจะห่วย ก็ยังนั่งดู Anime ได้อย่างสบายจุย ซะที่ไหน)เรื่องที่จะยกมาในวันนี้เป็นเรื่องที่ผมโคตรชอบที่สุดใน Season นี้เลยนั่นคือ Shigatsu wa Kimi no Uso เรื่องย่อ Shigatsu wa Kimi no Uso / Your Lie In April หรือภาษาไทย “คำโกหกในเดือนเมษา” เป็น Anime แนว Romantic ปนๆ Drama (ปูเสือรอแปบๆ เดี๋ยวนะ เหมือนจะผิด)  ผลงานของคุณนาราคาวะ นาโอชิ (Arakawa Naoshi) ซึ่งตอนแรกก็ได้ถูกตีพิมพ์ตั้งแต่ปี 2011 จนถึงปัจจุบันกันเลยทีเดียว (นานสลัดผักเลยทีเดียว) เนื้อเรื่องคร่าวๆ คือ อาริมะ โคเซย์ […]

Java Class – Random Class คลาสมหาสนุก

Posted by arnondora on March 11th, 2015

กลับมาอีกแล้ว อันนี้ก็ถามกันมาเยอะ นั่นคือเรื่องของ Random Class มันใช้ยังไง ทำอะไร เรื่องที่ว่ามันเอามาทำอะไรนั้นก็ไปอ่านชื่อ Class ซะว่ามันชื่ออะไร นั่นแหละคือสิ่งที่มันทำ ใช้ยังไง? ก่อนอื่นต้อง Import มันเข้ามาก่อน import java.util.Random; ทีนี้เราจะมาลอง Random Int กันแต่ก่อนอื่นเรามาสร้าง Object จาก Class Random กันก่อน Random rand = new Random (); ในการที่เราจะ Random ค่าตัวเลขมาสักค่านึงเราจะต้องเรียก Method ชื่อ nextInt() ใน Argument จะเป็น Bound (ขอบเขต) ของมันซึ่งจะตั้งแต่ 0 ถึงที่เราป้อนลงไป แต่ถ้าไม่ใส่มันจะเอาเลขอะไรมาให้เราก็ได้ for (int i = 1;i<=20;i++) { System.out.println(rand.nextInt(20)+1); } […]

Older Entries