LunaticNeko

TO SPEAKERS: If I have FACTUAL ERRORS or OFFENSIVE MATERIALS within this entry, please contact me ASAP. I will remove (or correct, at your discretion) them at the first opportunity.

กลับมาอีกครั้งสำหรับบารแคมป์บางเขน การ(อ)สัมมนานอกกรอบที่ทุกคนจะได้แลกเปลี่ยนเรียนรู้ซึ่งกันและกันอย่างเสรี แถมเสื้อฟรีให้เอาไปใส่ได้ไม่ซ้ำใครด้วยละเอ้อ!! ครั้งนี้ผมก็ไปเข้าร่วมมาด้วย และมี session น่าสนใจเยอะแยะเลยครับ มาอ่านกันว่าผมไปเข้าห้องไหนมาบ้าง!
Here we come! The third Barcamp Bangkhen, the very great unconference where people will meet and exchange, and get FREE SHIRT while we’re at it! I joined this time as well, and there are loads of great sessions! Let’s see which rooms I joined.

(หมายเหตุ ที่เรียกว่าห้อง “เด็กD” ผมจะใช้คำกลางๆ ในที่นี้ว่า “Auditorium” นะครับ // “Auditorium” will be used to refer to the “DekD” room )

Session 2 Auditorium: ทำไงให้เว็ปเร็ว ตอน เว็ปช้ามากเบยยย (Make web faster)

โดย/by @vinboxx / Download Slide

การทำเว็บให้เร็วด้วยเทคนิคต่างๆ เช่น minification, caching, การทำงานกับ query string และ unique file name, การใช้ content delivery network เช่น CloudFlare เพื่อทำให้เว็บเราเร็วขึ้น โดยเราสามารถเลือกการใช้ content delivery ของเราได้ นำเสนอฟีเจอร์ต่างๆ ว่ามีอะไรบ้าง (ผู้เขียนคิดว่า CloudFlare ก็น่าสนใจดีนะ ^ ^)
Web acceleration using techniques like minification, caching, minding query string and unique file name, using CDNs like CloudFlare to accelerate website and its customization. Features of CloudFlare are also explored.

ต่อมาก็พูดเรื่องเครื่องมือหรือ tool ต่างๆ เพื่อช่วยในการพัฒนาเว็บที่เร็วขึ้นได้ เช่น ใช้ PageSpeed Tools หรือ pingdom วิเคราะห์เวลาในการโหลดเว็บ หรือใช้ WebPagetest เพื่อวิเคราะห์เว็บอย่างละเอียดก็ได้ ว่า optimization สามารถทำให้เร็วขึ้นได้มากขนาดไหน อย่างไรบ้าง
Then the speaker talked about tools that can be used to aid web acceleration like Google PageSpeed Tools, pingdom, or WebPagetest to analyze website for possible optimizations. (i.e. where we went wrong and made the site slow)

Session 3 Auditorium: Google Student Ambassador

โดย/by GSA Thailand

แนะนำ GSA, ทริปสิงคโปร์และกิจกรรมต่างๆ แจกของ งานและหน้าที่ของ GSA
Introduction to GSA, the Singapore trip, and SWAG!

ขั้นตอนการสมัคร

1. ส่งแบบฟอร์มออนไลน์
2. สัมภาษณ์กับ Google มีการสอบข้อมูลทั่วไปเกี่ยวกับบริษัทในรอบเช้า และการสัมภาษณ์ในรอบบ่าย โดยใช้การสุ่มตอบคำถามที่กำหนดไว้ เน้นการตอบคำถามมากกว่าตัวคำตอบ
3. รอ 2 เดือน ประกาศผล ให้ส่งเอกสารต่างๆ เพิ่มเติม

Application Procedures

1. Online form submission
2. Interview with Google consisting of “examination” and “interview”. Decision is made more on presentation and delivery than the answer itself
3. Results are announced after two months. Qualified individuals will be required to submit additional documents.

การเป็น Ambassador จะมีอายุงาน 1 ปี
Ambassadors will remain in position for one year.

บทบาทและหน้าที่

• ต้องจัดกิจกรรมประชาสัมพันธ์ปีละ 5-8 กิจกรรม ตามที่เราเห็นสมควร โดยจะมีของแจกจาก Google
• เป็นช่องทางการสื่อสารระหว่างมหาวิทยาลัยกับ Google

Roles and duties

• Hold 5-8 PR events per year at their discretion. Google supplies swag.
• To be a channel of communication between the university and Google

ตัวอย่างคำถามรอบสอบ

• ผู้ก่อตั้ง Google = ไม่รู้ก็…
• ผู้ก่อตั้ง Gmail = Paul Buchheit
• Google ซื้อ Android ปีใด = 2005
• Google ประเทศไทย ตั้งอยู่ที่ใด = CentralWorld ชั้น …
• อะไรคือผลิตภัณฑ์ของ Google ที่บ่งบอกความเป็นตัวคุณ = iGoogle

Example Questions from examination round

• Google founder = (you know ‘em!)
• Gmail founder = Paul Buchheit
• The year which Google acquired Android = 2005
• Where is the Google Thailand office = Somewhere in CentralWorld
• Which Google product defines ‘you’? = iGoogle

Session 4 17304: Ruby on Rails

โดย/by Zack Siri / @artellectual

การพัฒนาเว็บด้วย Ruby on Rails การสร้างฐานข้อมูล platform ต่างๆ ที่เกี่ยวข้อง ฯลฯ Rails เป็น platform แบบ MVC (Model-View-Controller)
Web development using Ruby on Rails, database creation, platforms, etc. Rails is an MVC platform.

การสร้าง Controller จะมี convention ที่ชัดเจน คือเป็นกฎที่ชัดเจน เพื่อให้เราทำตามได้โดยง่าย โดยเราจะสร้าง Controller เองหรือจะให้ Rails ทำให้ก็ได้
Rails has specific conventions that must be followed. Controllers can be written manually or can be automatically created. Either way, they must follow the Rails conventions.

จากนั้นจะเป็นการสร้าง View ซึ่งจะบอกว่า controller นั้นจะแสดงผลออกมาอย่างไร โดย view จะต้องมีชื่อตรงกับ controller (ตรงนี้เป็น convention หนึ่งของ Rails) ทำให้การทำงานก็จะตรงไปตรงมามากขึ้น โดยเราสามารถที่จะใช้ helper method เพื่อให้เขียนเว็บได้ง่ายและเร็วขึ้นด้วยก็ได้ สำหรับตัวอย่างของ session นี้คือการสร้างเว็บฟอร์มง่ายๆ เก็บและแสดงข้อมูลได้
After creating model and controller it’s time for view. In Rails, view must have same name as controller. Helper methods can be employed for ease and speed. This session demonstrates simple case of web form creation that can collect and display data.

โดยสรุป ผู้เขียนก็ไม่ค่อยเข้าใจเท่าไหร่เหมือนเดิม เพราะไม่ค่อยคุ้นเคยกับ Ruby หรือ Rails ตั้งแต่แรก
I still don’t understand Rails much due to unfamiliarity with Ruby itself. Actually, I’m a bit familiar with Ruby, but I can’t figure out how to make websites out of them.

Session 5 17302: Methods of Payment: How we waste money on the Internet

โดย/by LunaticNeko / Download Slide

อธิบายองค์ประกอบที่จะนำไปสู่การใช้เงิน 5 ประการ (Product, Want, Money, Can Pay, Delivery) วิธีการคำนวณหาเงินที่ต้องจ่ายจริงจากราคาสินค้า ค่าส่ง อากรนำเข้า และภาษีมูลค่าเพิ่ม จากนั้นอธิบายถึงการจำหน่ายสินค้าแบบดิจิตอลและสินค้าเสมือน (digital and virtual goods) หนทางการหาเงินของเกมบน Facebook ว่ามาจาก 3 ทางหลัก ได้แก่โฆษณา โฆษณาแฝง และการจำหน่ายสินค้าเสมือนให้ผู้เล่น ต่อด้วยการแนะนำ Kickstarter ว่าเป็นแหล่งที่มาของธุรกิจที่จะนำเงินออกจากกระเป๋าเราด้วยนวัตกรรมต่างๆ มากมายในอนาคต
Describes the five components of spending (Product, Want, Money, Can Pay, Delivery), method to calculate how much one must really pay after shipping, import tariff, and VAT; describes digital and virtual goods sales. Facebook games earn money from three ways: advertisement, product placement, and virtual goods sales. Kickstarter is described as source of new businesses and innovations that can bring money out of our pockets.

ในส่วนต่อมา อธิบายการนำเงินออกจากกระเป๋าโดยใช้บัตรเครดิต หากไม่มีก็เป็นการสร้างบัตรเดบิตออนไลน์ผ่านบริการของธนาคาร หากไม่มีก็ใช้ช่องทางอื่นๆ เช่นบัตรเติมเงินของบริการต่างๆ หากไม่มีเงินจริงๆ ก็สามารถทำแบบสอบถามเพื่อแลกกับสินค้าเสมือนได้ ดังนั้น จะเห็นว่า แม้ว่าเราจะไม่มีเงิน ผู้ให้บริการก็ยังสามารถนำเงินออกจากกระเป๋าของเราได้อยู่ดี
In the next part, the presenter describes how to pay using credit cards, or debit if one does not have credit, or other payment methods like cash cards. If they really have no money, they can do surveys to earn virtual goods. This is summarized as “even if we don’t have money, they can still take it from us.”

ดังที่กล่าวไว้แล้วถึงองค์ประกอบการใช้เงิน 5 ประการ เราสามารถตัดองค์ประกอบตัวใดตัวหนึ่งเพื่อตัดการใช้จ่ายของเราได้ ทางที่ง่ายที่สุดคือใช้การควบคุมตนเองเข้ามาตัดความต้องการ (Want) ทิ้งไป โดยให้หลีกเลี่ยงการซื้อในขณะที่ความสามารถในการตัดสินใจลดลง การป้องกันไม่ให้ซื้อสินค้าในขณะที่ความสามารถในการตัดสินใจลดลง การปรับทัศนคติที่มีต่อสินค้าที่ล่อตาล่อใจ และสุดท้ายคือการลดละความต้องการทางโลก
As described earlier, if one of the five components of spending is eliminated, spending will not happen. The easiest way is to eliminate the Want by 1) avoid purchasing with impaired judgement, 2) prevent purchasing with impaired judgement, 3) change of initial attitude towards attractive items, and 4) reduce earthly desires.

จากนั้นผมก็แทบจะกลับบ้านทันทีครับ เพราะการบ้านเยอะ และมีงานต้องทำอีกหลายอย่างด้วย เช่นการอัพบล็อกนี้เป็นต้น
Then I left for home almost immediately due to many things to do, including homework and blogging.

บทสรุป / Conclusion

ขอขอบพระคุณ คณาจารย์ผู้รับผิดชอบกิจกรรม คณะวิศวกรรมศาสตร์ ผู้สนับสนุนทั้งหลาย ผู้ที่เข้าฟังการบรรยายของผม ตลอดจนวิทยากรทุกท่านที่ร่วมงานในครั้งนี้ และขอขอบคุณ น้องๆ ปี 2-3 ที่ช่วยกันจัดงานนี้เป็นอย่างดีครับ ปีนี้ผมคิดว่างานประสบความสำเร็จดีมากในแง่จำนวนคน แต่ยังมีข้อจำกัดเรื่องจำนวน “เซสชั่นเกรดเอบวก” ที่ยังมีน้อยเกินไป ทำให้ Auditorium ยังเป็นที่ของวิทยากรหน้าเดิมเช่นเคย
I hereby thank the faculty, the Faculty, sponsors, my audience, and all speakers who participated today. I also thank the Juniors and Sophomores who organized this as well. I think this year is quite good in terms of participation, but there’s still a lack of “A+ sessions” which results in the Auditorium still held down by the same old speakers.

แล้วพบกันใหม่ที่บาร์แคมป์ที่ไหนอีกซักแห่งครับ สวัสดี
See you again in the next Barcamp … somewhere! KTHXBAI!

อ้อ ขอบคุณ GSA Thailand สำหรับ Swag ด้วยครับ แต่ผมก็ยังไม่รู้ว่าจะเอามันเข้ามาใช้ในชีวิตประจำวันยังไง ขอใช้ขวดเก่าไปพลางๆ ก่อนนะครับ
Before I go, thanks GSA Thailand for the Swag. I still don’t know how to use this bottle so I’ll use the old one for a while. Thanks again!

(Photo: A gift from Symphony, and my faculty-paper)

สำหรับตอนนี้เป็นตอนสุดท้ายของซีรี่ส์ฝึกงานแล้วนะครับ ขออภัยที่มาช้าไปเล็กน้อย เริ่มกันเลยดีกว่า

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

ผมก็คิดว่าใช้เวลาไม่น่านาน แต่ด้วยความที่ใกล้จบฝึกงาน ผมต้องเตรียมนำเสนอการฝึกงานทั้งหมด และต้องเตรียมเอกสารที่จะต้องส่งด้วย ไม่ว่าจะส่งไปที่ใดก็ตาม เช่น ใบเวลาทำงาน ฯลฯ จากนี้ผมขอแบ่งเป็นส่วนๆ ดีกว่า โดยแต่ละส่วนก็จะเป็นไทยอังกฤษสลับกันจะได้ตามง่ายๆ ครับ

This is the last episode in the internship series. Sorry for being late, let’s begin anyway.

During the three days I spent time with the new task analyzing data from emails. The emails have network data as <field> : <value> lines, which are easy to extract.

I didn’t think it would take time, but as the end of internship nears, I have to prepare the presentation as well as the papers to submit to matter where they are such as time record, etc. For this entry I’ll split into multiple parts, with Thai and English interleaving for easy reading.

งานชิ้นสุดท้าย / Last Task

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

ปัญหาจากงานนับอีเมล์ก็จะตามมาด้วย ก็คือฐานข้อมูลที่ไม่มีคีย์หลัก เป็นต้น ซึ่งผมแก้ปัญหาโดยการสร้าง log มาเก็บไว้ว่าระบบของเราตรวจเมล์ไปแล้วกี่ฉบับบ้าง โดยจะไม่มีการตรวจอีเมล์ซ้ำไม่ว่าในกรณีใดๆ ก็ตาม ตรงนี้ทำให้เกิดข้อจำกัดมากมาย เช่น การไม่มีผลย้อนหลังของการตั้งค่า เป็นต้น แต่ช่วยให้เราตรวจสอบเฉพาะอีเมล์ใหม่เท่านั้น จึงไม่น่าช้าจนเกินไป

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

As introduced earlier, the last task consists of email data extraction which works on the same system as mail alerts, but on a different context. The emails will come from the same source, but processing will be separated so we do not need to build another database-inbox.

The no-primary-key problem from email counting task also carries over, which I fixed by building an execution log which keeps track of the last time we checked emails, and will never revisit older emails no matter the reason. While this makes the system relatively faster, it suffers from the non-retroactiveness of email inspection, i.e. if you change the email definition midway, old and new data won’t be consistent. (So it might be better to delete the definition entirely)

Email definition can only be done on a per-sender basis without per-subject separation. The work is not done, but I will try to finish if possible, as it only benefits everyone.

การนำเสนองาน / Presentation

วันที่ 7 เป็นวันที่นิสิตนักศึกษาฝึกงานจะต้องนำเสนอผลงาน ด้วยความที่ผมคุยกับพี่เลี้ยงไว้ว่าอธิบายงานตั้งแต่ต้นจนจบ (ความเป็นมา ความต้องการ โครงสร้าง กระบวนการ แสดงโปรแกรมถ้าเป็นไปได้ สรุปและข้อเสนอแนะ) และงานผมมีถึงสี่งาน (จริงๆ คือห้า ได้แก่ ติดตั้งเซิร์ฟเวอร์ ตัวเล่นวิดีโอ นับอีเมล์ ระบบ IDC และดึงข้อมูลอีเมล์ แต่อันแรกไม่นับ) ผมก็เลยกดไป 43 สไลด์ เวลาอีกเกินครึ่งชั่วโมง ในขณะที่คนอื่นใช้เวลาน้อยกว่ามาก โดยที่ผมแทบจะไม่ได้อธิบายความรู้อะไรเลย (ผมมองว่ามันเป็นแค่งานโปรแกรมมิ่งธรรมดาๆ คิดว่ากระบวนการสร้างโปรแกรมน่าสนใจกว่า) แต่คนอื่นๆ ก็มีพูดเรื่องความรู้ที่ได้ออกมาด้วย ผมก็รู้สึกแปลกๆ กับงานตัวเอง แต่ก็ดีใจที่ได้พูดออกไปว่าทำอะไรบ้าง

7th was the day the intern students present their works. Since I’ve talked to my supervisor that I will be explaining the work “from beginning to end” (reasons, requirements, architecture, implementation, demonstration, conclusion and suggestion) and I have four tasks to do (five actually: server installation, “vplay” video player, email counting, IDC system, and email data extraction but I won’t count the first)  and I ended up with 43 slides taking up more than half-hour while others used much less time; and I did it all without telling any kind of knowledge at all (I see my work as ordinary programming tasks so the process is more interesting than the code) while others presented more content and knowledge than I did. I felt awkward afterwards, but still happy being able to tell others what I do.

งานเลี้ยงส่ง / Farewell Party

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

The party was hosted at MK Restaurants, Robinson Ratchada. This was one of the few moments I get to talk to many friends and seniors at once. Thank you very much, and sorry for over(-the-budget)eating.

เคลียร์เอกสาร / Final Paperwork

การจัดการเอกสารทั้งหมด

• ลอกข้อมูลเวลาจากตารางเวลาทำงานของบริษัทลงใบเวลาของคณะ ให้พี่เลี้ยงลงนามรับรอง
• ถ่ายเอกสารทั้งหมดที่ต้องมีการส่งคณะหรือบริษัท ยกเว้นความลับองค์กร (ซึ่งไม่ถึงมือผมอยู่แล้ว สบายใจได้)
• เขียน TODO ในส่วนที่ยังไม่ได้ทำ และอธิบายโครงสร้างงานของเราไว้สำหรับคนต่อไป
• ส่งรายงานของบริษัทฉบับสุดท้ายให้ HR
• คืนบัตรพนักงานและบัตรลิฟท์อาคาร

Just do all the paper.

• Copy the times from company log to faculty log, have supervisor sign it.
• Photocopy everything that need to be submitted, except corporate secrets (which I don’t have.)
• Write TODOs where needed, and document as much as possible
• Submit last weekly report to HR
• Return employee and lift cards

ขอขอบคุณ / Thanks to:

พี่ๆ ที่บริษัท CS LOXINFO ทุกคน

• พี่แพท (เพ็ญโสภา กมลนาวิน) พี่เลี้ยงผู้ควบคุมการฝึกงาน
• พี่กี (กีรติพงศ์ อุกะโชค) นับว่าเป็นพี่เลี้ยงอีกคน แม้ว่าจะไม่ได้อยู่ตลอดการฝึกงานก็ตาม
• พี่หนุ่ย (สุรศักดิ์ อุทโยภาศ) หัวหน้าฝ่าย
• พี่ติ๊ก (กัญญ์ชิสา ดันไหม) ฝ่ายทรัพยากรบุคคล
• พี่ยอด แต่จะขอบคุณมากกว่านี้ถ้าพี่ซื้อ Diablo III ให้ผมด้วย (อิอิ)
• และพี่ๆ ทุกคนในบริษัทที่เป็นบรรยากาศและชีวิตในการทำงานของผมด้วย

Thanks to all CS LOXINFO employees!

• P’Pat (Pensopha Kamolnawin), internship supervisor
• P’Gee (Keeratipong Ukachoke), technical advisor
• P’Nui (Surasak Uthayopas), head of technical & operation department
• P’Tik (Kanchisar Dunmai), HR
• P’Yod (I don’t know your name), but more thanks if you actually buy me Diablo III instead of bragging how you earn so much from Auction House out loud :)
• And everyone for providing me with enjoyable work environment and experience!

Finally, thanks to all friends in the same internship program, even though we don’t get to see each other much.

สำหรับผู้ที่ต้องการเนื้อหาหรือข้อมูลจากการฝึกงาน หากสามารถให้ได้จะให้นะครับ ติดต่อมาได้

For those who need content or data from internship, I will provide them if possible so feel free to contact.

Some more pics

At presentation, my two friends preparing

ASCII Art of company name, limited to 80 characters wide

Phase I of MK Pot

Phase II, and we ate them all.

You can view all internship posts here: http://lunaticneko.com/blog/?tag=school-internship

(Photo: Guess where we had our lunch today!)

วันนี้กลายเป็นว่างานไม่ค่อยเดินเท่าไหร่ เนื่องจากผมพยายามสร้าง Task List ที่เอาไว้เก็บว่าลูกค้าแต่ละคนเข้ามาทำอะไรบ้าง ความซับซ้อนมันอยู่ที่การสร้างระบบฐานข้อมูลที่รองรับรายการหลายๆ ชนิดได้ ซึ่งตรงนี้ผมก็ทำโดยใช้ generalization และ specialization และหลังจากที่นั่งมั่วกับโค้ดเป็นเวลานาน ในที่สุดผมก็เริ่มเขียน PHP แบบ MVC เป็นขึ้นมาบ้าง แต่ก็ยังไม่ค่อยเข้าใจเท่าไหร่ ที่บอกว่างานไม่เดินเป็นเพราะว่าที่ทำลงไปจริงๆ ไม่ต้องทำก็ได้ เพราะโค้ดที่มีมามันก็มี Task List อยู่แล้ว แค่เก็บไว้อีกที่นึง อ้อ วันนี้พี่พาไปเลี้ยงมือเที่ยงด้วย ขอบพระคุณมากครับ (ถ้าพี่ตามมาอ่านในนี้นะ ^ ^”)

So I didn’t progress much today. I tried to build a Task List system which keeps track of what each customer does at a particular time. The complexity lies within the database code that needs to support multiple types of entries for the Task List, which can be accomplished using generalization and specialization techniques. After messing around for some time, I started to grasp the concepts of PHP and MVC and can now code a bit more properly. The lack of progress was due to the fact that there’s already a Task List system in place. I was reinventing the wheel all along. Finally, special thanks to the senior that treated me lunch!

The Wheel I did reinvent

Note: Tables authorized_on_customer and equipment and column data in temp_equipment shown here are simplified versions of the “real thing” on the live server.

No photo today. Sorry. Read on.

เนื่องจากมีการแก้บั๊กขนานใหญ่เกิดขึ้นซึ่งใช้เวลาสองวัน ผมก็ขออัพรวมไปเลยนะครับ ส่วนที่เป็นสีแดงคือส่วนที่มีการแก้ไขในวันที่สองนะครับ จะได้เห็นว่ามีอะไรเปลี่ยนไปยังไงบ้าง

งานที่ผมทำช่วงสองวันนี้มีสองส่วน ส่วนแรกคือเตรียมเอกสารนำเสนอเรื่อง vCloud Director (vCD) แต่ปัญหาคือผมยังไม่ค่อยเข้าใจสถาปัตยกรรมโดยรวมของ VMware เท่าไหร่ เลยต้องไปอ่านใหม่หมดตั้งแต่ VMware Workstation, VMware ESXi, ฯลฯ จนกระทั่งอ่านไปถึงหัวเรื่องของ vCloud Director เท่านั้น เท่าที่สรุปได้คือ (ไม่ได้บอกว่ารู้แค่นี้นะครับ)

• ESXi เป็น Hypervisor ที่ติดตั้งลงบนฮาร์ดแวร์โดยตรง ไม่ขึ้นกับ OS ใดๆ
• vCenter เป็นระบบควบคุมเครื่องที่ทำ virtualization อีกที
• vSphere Client เป็นตัวที่ต่อไปยัง vCenter หรือโฮสแต่ละเครื่อง
• vCloud Director เป็นตัวที่มา abstract หรือมาครอบ vCenter ตัวหนึ่งหรือหลายตัวอีกที
• vMotion คือระบบและกระบวนการย้าย VM จากเครื่องหนึ่งไปอีกเครื่องหนึ่งโดยไม่มี downtime

จากนั้นพี่ก็มาสับงานผมอีกรอบ โดยต้องแก้ไขตัวเล่นวิดีโออีกหลายอย่าง

• วิดีโอไม่เล่นอัตโนมัติบน iPad สาเหตุเป็นเพราะผมเอาโค้ดที่เคยใช้งานได้ออก แล้วไม่ได้ใส่กลับเข้าไปใหม่ แก้ไขโดยการสั่ง videotag.load(); videotag.get(0).play(); ตามอ้างอิง [1] , [2]   ทั้งนี้ iOS เวอร์ชันใหม่ๆ มีการป้องกัน autoplay ที่แข็งแกร่งขึ้นเรื่อยๆ จนวิธีนี้ใช้ไม่ได้ผล
• ผลการค้นหาวิดีโอแสดงแค่คอลัมน์เดียว ไม่สะดวกและไม่สวยด้วย แก้โดยการลดขนาดใน CSS (สิ)
• ลากวัตถุ (object) ไม่สะดวกเมื่อต้องเลื่อนจอไปมา คิดว่าต้องหาพวก autoscroll มาใส่ แต่บั๊กมันเยอะ ต้องค่อยๆ ดูไป ตอนนี้ทำได้แล้ว แต่ถึกมาก ใช้ global เก็บสถานะ แล้วใช้ event ในการ set สถานะของตัวแปรใน global
• การเปิดปิดเสียง พี่ต้องการให้ no mute ตั้งแต่แรก ในขณะที่ผมไปทำ default mute ไว้เพราะรำคาญเสียงในคลิป (นิดเดียวแต่ก็ยังไม่ได้ทำ) (ตอนนี้ทำแล้ว)
• พฤติกรรมของกล่อง drop-down ที่มันจะคอยเลือก default playlist ขึ้นมาตลอด ซึ่งแม้ว่าผมจะเซฟไฟล์ชื่ออื่นไปมันก็ยังเด้งกลับมาเป็น default playlist ทุกครั้ง อันนี้แก้ที่ฟังก์ชันสำหรับ rebuild drop-down list ไปเลย โดยถ้าเป็นการเซฟให้ set ชื่อใน drop-down list กลับมาเป็นชื่อที่เพิ่งเซฟไป ทำเสร็จแล้ว ไม่ค่อยยากเท่าไหร่
• โปรแกรมขาดคำอธิบาย เช่น สัญลักษณ์ที่ใช้บอกว่าวิดีโอ (ทั้งข้อมูลและไฟล์) มาจากฐานข้อมูลหรือจาก YouTube ก็เลยใส่สัญลักษณ์ลงไป
• ให้คลิกบนวิดีโอ MP4 แล้ว play/pause ได้เหมือนกับบน YouTube (ทำแล้ว)

Since there’s a big chunk of bug hunt which spanned two days, I decided to group them into one entry. The red bits indicate changes made during the second day.

I’ve done parts of two jobs during the two days. The first one is vCloud Director (vCD) presentation preparation. Since I did not really understand much about the entire VMware architecture, I had to read everything from start: Workstation, ESXi, etc., until the introduction to vCloud Director (where I left off) and here’s the summary (not “what I know” though)

• ESXi is a Hypervisor installed on top of hardware (bare-metal), which is not OS-dependent
• vCenter controls the virtualization host machines
• vSphere Client connects to vCenter or individual hosts
• vCloud Director abstracts one or more vCenters
• vMotion is the thing that lets you move VM from one host to another without downtime

Click-to-dismiss (requires jQuery)

Purpose: Ideal for simple message boxes, alert messages, etc.

Syntax: click_to_dismiss(what_to_dismiss [, where_to_click] );
(where_to_click defaults to “document”, which means “anywhere”)

 function click_to_dismiss(what_to_dismiss, where_to_click){
  if(where_to_click == undefined){
    where_to_click = document;
  }
  $(document).bind('click', function(){
    $(what_to_dismiss).hide();
    $(what_to_dismiss).unbind();
  });
} 

Limitation: This function also unbinds everything attached to what_to_dismiss, which is usually not a problem for me because my message boxes don’t have any other bindings attached. Please respond if you manage to make it work better (while readable by beginner because that’s what I am!)
Recommendation for Improvement: Overcome the limitation

Autoscroll page when dragging some element (requires jQuery. VERY BAD CASE OF KLUDGE!)

Purpose: Allows page to scroll up or down when you drag an element near the top or bottom edge of the browser.

Syntax: set_item_detect_drag(selector);
Selector is jQuery element like $(‘img’), $(‘.items’) or $(‘#namebox’)

 var autoscroll_mouse_item;
var autoscroll_click_item;
var autoscroll_drag_item;

function set_item_detect_drag(sel){
  sel.mouseenter(function(){
    autoscroll_mouse_item=this;
    set_drag_status();
  });
  sel.mouseleave(function(){
    autoscroll_mouse_item=undefined;
    set_drag_status();
  });
  sel.mousedown(function(){
    autoscroll_click_item=this
    set_drag_status();
  });
  sel.mouseup(function(){
    autoscroll_click_item=undefined
    set_drag_status();
  });
}

// Set detection vars
function set_drag_status(){
  if(autoscroll_mouse_item==autoscroll_click_item&&autoscroll_mouse_item!=undefined){
    autoscroll_drag_item = autoscroll_mouse_item;
  } else {
    autoscroll_drag_item = undefined;
  }
}

$(document).mousemove(function(e){
  //if drag_item is acquired and mouse is near edge, scroll.
  if(autoscroll_drag_item!=undefined){
    //mouse near top
    if(e.pageY - $(window).scrollTop() < 40)
    {
      //scroll a bit up
      $(window).scrollTop($(window).scrollTop()-5);
    }
    else if($(window).scrollTop()+parseInt(window.height)-e.pageY < 40)
    {
      //scroll a bit down
      $(window).scrollTop($(window).scrollTop()+5);
    }
  }
}); 

Limitation: Lots.
Recommendation: Use OO, extending jQuery and make it a full-blown plugin instead of a global-var-ridden kludge. Another: Variable, smooth scrolling speed (slow when not very close to edge, for example)

(Photo: Getting from second floor to first, duh. I don’t know the subject.)

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

อย่าลืมว่าการใส่ $.each ให้ ajax (หรือ get หรือ getJSON หรือ post) ไม่ใช่การทำ ajax ทีละอัน แต่เป็นการสร้าง ajax หลายๆ อันทำขนานกัน

อย่า “โยง” ajax เข้าด้วยกันถ้าไม่รู้ว่ากำลังทำอะไรอยู่

เพราะ…

“a” ใน “a”-jax ย่อมาจาก “asynchronous”

วันนี้ผมเขียนระบบเล่นไฟล์สองรูปแบบ (double-format) โดยจะเป็น MP4 (ด้วย <video> tag) กับ YouTube (ด้วย YouTube API) ก็เล่นได้ เพื่อบรรเทาปัญหาที่ว่า Aruba บล็อกการส่งคำขอไปยังเครืองอื่นที่ไม่ใช่ตัวมันเอง แต่ข้อเสียที่สะท้อนกลับมาคือมันใช้พื้นที่มหาศาล และบริหารจัดการได้ยากมาก โดยเฉพาะเวลาสภาพความสอดคล้อง (consistency) เสียไปเนื่องจากเพิ่มวิดีโอใหม่เข้าไปใน playlist ที่เป็นแบบ MP4 แล้ว (อย่าลืมว่า ระบบไฟล์ใหม่ของผมจะกำหนด format ในระดับ playlist ไม่ใช่ระดับไฟล์) จึงใช้วิธีแก้ง่ายๆ ที่อาจฟังดูโหด คือ หากมีการเซฟ playlist ไม่ว่าจะไปแก้ไขมันหรือไม่ ผมจะตีความว่าเป็นการ downgrade playlist จากแบบ MP4 กลับไปเป็น YouTube อัตโนมัติ แต่สามารถ upgrade กลับมาเป็น MP4 ได้ทุกเมื่อเช่นกัน

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

และแน่นอน ปัญหา Aruba จะไม่จบ ถ้าไม่สามารถอัพโหลดงานของผมขึ้นไปไว้ในที่ๆ มัน whitelist ได้

Tiring morning. I had to do everything quickly because I have two jobs to do now. While working on a JavaScript bug I realized that …

$.each over ajax calls don’t do each one after another, but AT THE SAME TIME

Don’t chain ajax calls if you don’t know what you’re doing

because …

The first “a” in “a”-jax means “asynchronous”

Today I finish building the double-format (MP4 using <video> tag & YouTube using YouTube API) player in order to mitigate the Aruba problem, which prevented requests to other servers (i.e. my own media server) from working. The downside of this approach is the immense disk space requirement, and difficult management especially when the playlist is not consistent with the files after new files are added to the playlist. A bit harsh, but I fixed by forcing a “downgrade” (from MP4 to YouTube) upon saving for every playlist, however an “upgrade” is sill one click away so that’s not much of a problem.

Tomorrow, I will rebuild the file cleanup system to reduce space waste. Another thing I will do is to make an easy-to-read manual because my program uses lots of coloring (you only need to watch out for red or orange however, for they represent “error occurred”) and the final one is to test installation on a new machine. Then I can read vCloud. In. Peace.

Certainly, the Aruba problem will not end if I cannot get my work into its “whitelisted zone”. I don’t know how to do that or any kind of help is possible.

วันนี้ผมไปทำงานก็เจอดีแต่เช้าเลย เพราะหัวหน้าฝ่ายเรียกให้ไปคุยงานนิดหน่อย สรุปได้ใจความว่าผมต้องอ่านเรื่อง vCloud Director แล้วทำสไลด์ไปอธิบายให้ฟัง

ต่อมา ผมก็ทำงานต่อ แต่ไม่ทันไรพี่เลี้ยงก็มาคุยเรื่องการอัพโหลดไฟล์ขึ้น Aruba Captive Portal ซึ่งอัพไปแล้วมันใช้งานไม่ได้ด้วยเหตุผลบางประการ คือ พออัพไปแล้ว (หน้า video player ของผมเป็น iframe) มันพยายามที่จะเรียก iframe ขึ้นมาแต่ทำไม่ได้ โดยไม่ว่าจะ request ไปกี่ครั้งก็ได้ HTTP 302 กลับมาตลอด (ควรเป็น 200) และติดลูปอยู่อย่างนั้นจนเบราเซอร์หยุดการทำงานให้เอง อาการนี้ไม่รู้จะแก้ยังไง แถมไฟล์ที่จะเล่นอยู่บน YouTube ยิ่งยากเข้าไปใหญ่ เลยตัดสินใจเอาระบบโหลดไฟล์กลับมาอีกครั้ง แต่มาในร่างใหม่ที่บริหารในระดับ playlist แทน นั่นคือ ทั้ง playlist จะต้องเป็น YouTube หรือเป็น MP4 อย่างใดอย่างหนึ่ง (แต่ต้นกำเนิดมาจาก YouTube เหมือนกัน คือ สร้าง YouTube playlist ก่อน แล้วค่อยโหลดไฟล์มาลงเครื่องอีกทีด้วย youtube-dl)

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

Today I was summoned to the Department and he assigned me to read vCloud Director, then make a presentation to explain to him.

Then I continued my work for a bit before supervisor discussed uploading the file to Aruba Captive Portal, which failed. For some reasons after uploading (the video player which uses an iframe), the iframe (stored on “media server” separate from Aruba) cannot be loaded and the browser always gets HTTP 302, instead of 200, over and over until browser killed the tab. I don’t know how to fix it yet, but the fact that the files are on YouTube will make it all worse so we decided to bring back the file download system, in a new form that it is managed at playlist level instead, downloading entire playlists at a time. All or nothing. First, the user would create a YouTube playlist, then “convert” it to MP4.

I spent the rest of the day implementing all that, but did not progress much due to wrestling with the old code. It can now load files, but cannot play them yet.

(Photo: Can I leave work on 17? DAT ANNOYING ALARM!)
(Sorry for late upload)

วันนี้เช้าผมเข้าไปทำงาน กำลังทดสอบงานเตรียมส่ง ปรากฏว่าพี่เอางานมาเพิ่ม โดยให้

• เลือก default playlist จากเมนูได้เลย
• ปรับ interface ให้ใช้ง่ายขึ้น
• ทำให้ embed ได้ง่ายๆ
• ทำให้เรียกไฟล์จากที่อื่นได้

ถึงกับอึ้งรับประทานไปเลยทีเดียว แถมทำแทบตายกว่าจะได้ เพราะต้องเพิ่มฟังก์ชันให้เก็บ default playlist ได้ ต้องทำ iframe interface มาครอบ ไม่งั้นก็ embed ยาก (การทำ iframe ครอบจะทำให้ออกมาคล้ายๆ YouTube iframe API อีกที) สรุปว่าวันนี้ทำงานแบบรีบๆ มึนๆ ก็เลยจบแบบงงๆ ว่าทำอะไรลงไปบ้าง กลับมาก็น็อกอีก เลยเขียนได้แค่นี้ครับ :(

I was testing my work when the senior got more tasks for the job.

• “Select Default Playlist” menu which affects all player instances without further configuration
• Easier-to-use UI, and optimize for mobile use
• Easier embedding
• Call the player from foreign domain

Yeah, I got stunned, and it was a hell a lot of work in one day just to store default playlist. There’s also iframe interface (not unlike YouTube iframe API) so all in all it was pretty confusing and ended up very confusing. I got sick after work so this is all I remembered.

NOTE: There will NOT be an Internship Day 18. It’s skipped.

(Photo: This is Madness! Madness? THIS. IS. ALAINAAAAAA!!!!)

ผมติดบั๊กค้างมาแต่เมื่อวาน ปรากฏว่าเป็นปัญหาการเปิดวิดีโออะไรบางอย่างของ Chrome 18 (ตั้งแต่เมื่อไหร่เนี่ย!) เอง ไม่เกี่ยวกับสคริปต์แต่อย่างใด จึงได้แต่ภาวนาขอให้ Google แก้ไวๆ (แต่เล่นบน IE และ Firefox ได้ตามปกติ)

อีกอย่างที่ทำในวันนี้คือลอง optimize ในรูปแบบต่างๆ แต่เนื่องจาก JavaScript มันเป็นภาษาระดับสูงที่ใช้คำสั่งจำนวนน้อยๆ เลยไม่รู้จะไปลดตรงไหน ก็เลยได้แค่เปลี่ยนกระบวนการเปลี่ยนวิดีโอ จากการแก้ tag โดยตรงเปลี่ยนมาใช้ API เปลี่ยนไฟล์แทน (จริงๆ API สามารถโหลด playlist เป็นสตริง เช่น “vid1,vid2,vid3″ มาเลยก็ได้ แต่มันมึนๆ เลยใช้เปลี่ยนไฟล์เองดีกว่า) คิดว่าน่าจะเสถียรมากขึ้น ไม่รู้เหมือนกัน

ต่อจากนี้ก็ไม่มีอะไรแล้วครับ เหลือแต่เก็บรายละเอียดเล็กๆ น้อยๆ เวลาที่เหลือก็หยิบความรู้ CSS มาปัดฝุ่นบ้าง นั่งทบทวนนิดๆ หน่อยๆ

The bug that persisted from yesterday turned out to be some kind of video problem in Chrome 18 (since when?!) and not the script error. The only thing I can do right now is to pray that Google fixes it. (No problem in IE and Firefox)

Another thing I did was optimizing the code, but there wasn’t much to do because JavaScript is already high-level and there’s nothing to optimize “code-wise” so I changed the video change method from tag editing to using API. (Actually, the API can load comma-separated strings like “vid1,vid2,vid3″ as playlist but it seemed problematic so I ditched that idea) It might be more stable now, I don’t know.

There’s not much other than fine details. I spent some time revising my CSS knowledge and techniques.

(Photo: From skywalk in front of Cyber World Tower, looking at Robinson Dept. Store)

วันนี้ไม่ค่อยมีงานแล้ว เนื่องจากทุกอย่างเกี่ยวกับโปรแกรมวิดีโอใกล้เสร็จ จึงใช้เวลาส่วนใหญ่เขียนรายงานมากกว่า แต่เมื่อตอนบ่ายมาเจอปัญหาว่า เมื่อกำลังจะเล่นวิดีโอบางตัว ระบบจะไม่สามารถโหลดไฟล์ได้ โดยตัดเป็นจอดำๆ ที่ไม่สามารถทำอะไรได้อีกเลย อาการนี้เป็นเฉพาะใน Chrome เท่านั้น (ใน IE และ Firefox ปกติดี) จึงไม่แน่ใจว่าเป็นที่ Chrome หรือไม่ เพราะไม่ได้แก้ไขโค้ดใดๆ จากเมื่อวาน

I had almost no work today because the video player is almost done, so I spent more time writing reports. In the afternoon however I found out that some videos cannot be played and causes the YouTube screen to black out. This happens only in Chrome (and not in IE or Firefox) so I’m not sure if it’s the browser’s fault, because the code wasn’t changed.

Follow-up: It’s problem with only one instance of Chrome, too. I’m trying to isolate that to extensions.

(Photo: That awkward moment when it took one photo and five minutes to realize there’s a … YAKINIKU!)

วันนี้งานเริ่มหมด หนักไปทางเก็บรายละเอียดและทำ installer ให้เสร็จ จะได้ปิดงานได้ซักที งานที่ทำจึงไม่ค่อยมีอะไรโดดเด่นเป็นสาระเท่าไหร่เช่นกัน โดยเริ่มจากการล็อกปุ่ม Load ตอนที่เพิ่งกดไปใหม่ๆ เพื่อไม่ให้เกิดภาระงานมากจนเกินไป ทำ embed code ให้ update ทุกอักขระที่พิมพ์ (โดยไม่มีการ ช้าไปหนึ่งจังหวะ ) รวมไปถึงการปรับโค้ดของการโหลดวิดีโอจากฐานข้อมูลเพื่อให้ระบบตอบสนองได้ไวขึ้น

ที่เหลือก็ไม่ค่อยมีอะไรมากแล้ว อาจมีการปรับ CSS บ้างอะไรบ้างไปตามเรื่อง รวมไปถึงการอธิบายโค้ดให้เรียบร้อย (กว่าเดิมนิดนึง) เพื่อให้กลับมาพัฒนาต่อในภายหลังได้ง่ายขึ้น

There’s not many things to do left. I spent most time creating installer and polishing old code, such as locking the Load button while loading data from database, as well as updating embed code more rapidly (without ” falling one character behind “), and making the database loading process more responsive.

Then I adjusted some of the CSS, and documented the entire job for easier development in the future.