surprise_girlfriend

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

surprise_girlfriend

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

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

ข้อมูลที่ผมพอรู้หลักๆที่แฟนชอบคือ ลายจุด ( 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 ผิดมันก็จะหมุนๆครับ ใครนึกภาพไม่ออกให้ดูทางนี้เลย

https://oxygenyoyo.com/demo_surprise/

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

โดยเว็บตอนแรกก็ไม่กะว่าจะทำอะไรขนาดนี้ครับแต่พอทำๆไปแล้วเวลาเหลือก็เลยใส่ๆอะไรลงไปเรื่อยๆ สนุกดี ข้ามเรื่อง 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 อย่างเดียว พวกเรามีความโรแมนติกไม่แพ้คนอื่นเช่นกันครับ :)

Loading

เป็นโปรแกรมเมอร์ที่ตามหาคุณค่าของชีวิตและความฝันในวัยเด็ก ชอบเล่นเกม เรียนรู้ทุกอย่าง ชอบเจอคนใหม่ๆ งานสังคมทุกชนิด ออกกำลังกายในวันว่าง อ่านหนังสือ มีเว็บรีวิวหนังสือด้วย www.readraide.in.th