ใครว่า โปรแกรมเมอร์ โรแมนติกไม่เป็น

กระทู้สนทนา

แชร์วิธี Surprise วันเกิดแฟนแบบโปรแกรมเมอร์

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

เตรียมของและขั้นตอน

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

- การ์ดวันเกิดดีๆซักใบและซอง
- ถุงน่ารักๆที่มีรูปแมวหรือลายจุด หากมีทั้งสองอย่างได้นั้นก็ยิ่งดี
- กระดาษเขียนข้อความเล็กๆ หลายๆแผ่น ( อันนี้ทีเด็ด )
- เว็บสำหรับ Surprise

ไปเดินซีคอนแล้วเข้าร้านที่ผมพึ่งพาตั้งแต่เรียน ม ปลายคือ ร้าน 555paper+ ซึ่งมีของน่ารักๆให้ผมได้เลือกหาได้แน่ๆ ถ้าไม่มีก็คงร้านอื่นแต่นึกไม่ออก โอเค ! เดินๆหา วนอยู่หลายรอบจนตัดสินใจแล้วได้ของครบตามต้องการ ไปดูกันเลย ของมีดังนี้ที่หามาได้

ฮ่าๆ น่ารักมุ้งมิ้งแบบที่อยากได้เลย ผมจำราคาไม่ได้นะแต่อุปกรณ์ทั้งหมดไม่เกิน 200 บาทชัวร์ๆ ได้ถุงต่อไปก็ Card วันเกิด เดินหาเอาธีมชมพูๆเดียวกันก็มีเยอะนะ สุดท้ายได้ใบนี้มา

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

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

- คบกันวันแรกวันอะไร
- นิสัยน่ารักๆของเธอ
- สถานที่ ที่เราไปด้วยกัน
- ความรู้สึก >///<
- ฯลฯ

โดยจะมีกระดาษเพียงบางแผ่นเท่านั้นที่จะอ่านแล้ว งงๆ ไม่มีความหมายหรือมีความหมายแต่ไม่ได้เกี่ยวกับเรื่องของเราครับ Puzzle ที่ผมเตรียมไว้คือคำว่า style ทำไมต้องเป็นคำนี้ เพราะว่าตอนนั้นผมถามเพลงเธอ ฟังจากในห้างแล้วเธอก็หาชื่อเพลงนี้ให้ครับ แม่นมาก เพลงของ Taylor Swift

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

S = 19

T = 20

Y = 25

L = 12

E = 5

ก็จะได้เท่ากับ 81 พอดี

ตอนแรกกะเอาแค่คำว่า style แต่กลัวแฟนรู้เร็วไม่สนุกเลยให้กลับเป็นเลขต่อด้วย โดยกระดาษที่มีคำใบ้ทั้งหมดมีดังนี้ครับ

- ทุกอย่าง ล้วนมีความหมาย
- รวมกัน เราอยู่
- ไม่ว่าหน้าหรือหลังก็มีความหมาย
- อักษรคือตัวเลข ตัวเลขคืออักษร
- อักษรตัวแรกของชื่อเล่นผม ( T )
- อักษรตัวแรกของชื่อเล่นเธอ ( Y )
- ระยะห่างระหว่างวันเกิดแฟนและผม บวกด้วย 9 ( 19 = s )
- ส่วนตัว E ผมเอามาเขียนพวกแผ่นด้านหลังให้ต่อกันเป็นภาพตัว E แบบใหญ่ๆอ่ะครับ เหมือนภาพต่อๆกันครับ

โอเคเมื่อของที่เตรียมครบก็เก็บใส่ถุงสุดมุ้งมิ้งแล้วก็เหลือเรื่องทำเว็บ

ทำเว็บกันเถอะ ( ^o^ )/

เว็บผมกะไว้ว่าจะเป็นแบบหน้าเว็บเดียวมีให้กรอก password เป็นตัวเลข 2 ตัวจากการหาตัวเลขที่ผมเตรียมไว้ให้แฟนจากที่กล่าวมาข้างต้นครับ โดยตอนแรกหน้าเว็บจะไม่มีอะไรเลยให้กรอกเลขอย่างเดียว สิ่งที่ผมเตรียมไว้ตอนกรอกผิดคือ Feature slotmachine แบบเป็นรูป sticker ที่แฟนผมชอบใช้ครับ เวลาใส่ตัว code ผิดมันก็จะหมุนๆครับ ใครนึกภาพไม่ออกให้ดูทางนี้เลย

http://oxygenyoyo.com/demo_surprise/

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

โดยเว็บตอนแรกก็ไม่กะว่าจะทำอะไรขนาดนี้ครับแต่พอทำๆไปแล้วเวลาเหลือก็เลยใส่ๆอะไรลงไปเรื่อยๆ สนุกดี ข้ามเรื่อง Code ไปดีกว่าแล้วเราเอาไปให้แฟนกัน เย้ !

ส่งให้แฟน

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

ก็เปิดไปตามที่ผมคิดแหละ เปิดซอง Card วันเกิดก่อนอ่านๆ แล้วก็ขอบคุณ >///< บางทีก็แบบว่า อยากเห็นว่าแฟนจะเปิดอะไรยังไงก่อน พอตอนแฟนเปิดมาเจอกล่องข้อความ แฟนบอกว่า สงสัยต้องหยิบมาอ่านทีละใบ ทีละวันจะได้หมด ผมก็บอกไปเลยว่า สงสัยว่าวันนี้ต้องอ่านหลายรอบแน่ๆ 555555

พอแฟนอ่านจบผมก็ส่ง Link เว็บให้ครับ พอเข้าไปแฟนก็งงเจอแค่ให้ใส่ code ผมก็บอกว่า ตัว code ก็หาเอาจากในกล่องข้อความ ฮ่าๆ สนุกดีเหมือนเราทำเกมแล้วอยากรู้ว่าคนเล่นเป็นไงครับ แฟนก็อ่านอีกรอบ ค่อยๆเจอทีละใบ ค่อยๆหา

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

19 T Y L E

แฟนผมนึกไม่ออกว่า 19 มาจากไหน แต่เขาค่อนข้างมั่นใจว่าเป็นเพลง ที่ผมถามเธอแน่ๆ ผมก็ใบ้ๆต่อว่าแล้วเราจะ เอาเลข 19 มาเป็นคำว่า style ได้ยังไง ขาดตัวไรไปทำนองนี้ สุดท้ายก็แก้ไขได้ ฮ่าๆ สนุกดี แฟนบอกว่าไม่เคยเจออะไรอย่างนี้มาก่อน ก็นี้แหละข้อดีของ โปรแกรมเมอร์ครับ อยากสร้างอะไรก็ทำได้

ข้อมูลทำเว็บ

ส่วนนี้สำหรับคนที่อยากรู้ว่าใช้อะไรบ้าง และอยากได้ชุดโค้ดไปทำต่อครับ หากบางคนไม่ใช่ Programmer ก็ข้ามๆไปเลยก็ได้นะครับ เทคโนโลยีที่ใช้ก็ทั่วๆไปที่ใช้กันบ่อยๆครับมีดังนี้

- หน้า Layout ใช้ Foundation ครับ
- Js ใช้ jQuery เป็นหลักๆ
- มี jQuery Slot Machine
- รูปที่เหมือนโพลารอยด์ใช้ตัวนี้ครับ http://codepen.io/martijndevalk/pen/EFCLz
- ใช้ google font playball ครับ
- effect ตอนทำ slide แบบ fadeIn ใช้ wow.js

หมดแหละครับ ด้านล่างเป็น Link สำหรับ Git เอาไปลองใช้ได้นะครับ

https://github.com/oxygenyoyo/surpirse_girlfriend

สุดท้าย

หากใครเอาไปลองแล้วงงสามารถถามได้ด้านล่างนะครับ หากใครมีไอเดีย surprise แฟนก็มาแบ่งปันกันได้นะครับ ถ้าหากชอบก็อย่าลืมแชร์ไปให้คนรอบๆตัวคุณนะครับ มาทำให้คนอื่นๆรู้ดีกว่าว่า Programmer ไม่ได้ Geek อย่างเดียว พวกเรามีความโรแมนติกไม่แพ้คนอื่นเช่นกันครับ