Rock ‘n’ Roll

Rock ‘n’ Roll

ถ้าใครเคยเข้าเว็บของคิวบิกครีเอทีฟ (เช่นเว็บค่าย http://cubiccreative.org/creativecamp13) จะเห็นว่าเรามีการใช้เทคนิกที่ประกอบกับการเลื่อนของหน้าจออยู่หลายจุดเหมือนกัน เช่น parallax พาราแลกซ์ หรือการ snapping เลื่อนหัวข้อตามหน้าจอไปติดที่บางจุดของเนื้อหา ซึ่งโค้ดที่ใช้หลักๆ เริ่มมาตั้งแต่เว็บค่าย Cubic Creative Camp 10 แล้วก็ก็อปปี้แก้ไขจากเว็บหนึ่งมาอีกเว็บหนึ่งไปเรื่อยๆ ไม่มีหลักแหล่ง

แต่ทีนี้เพื่อให้โค้ดเหล่านี้นำไปใช้งานในเว็บใหม่ๆ ได้ง่ายขึ้น เราเลยตัดสินใจทำเป็น framework เฟรมเวิร์กที่สมบูรณ์ในตัวเอง โดยแยกโค้ดจากของเก่าเฉพาะที่เกี่ยวกับเอฟเฟคการเลื่อนหน้าจอต่างๆ ออกมา ปรับใช้รันได้ในตัวเองโดยไม่ใช้ jQuery แล้วตั้งชื่อว่า Rock ‘n’ Roll

ในเบื้องต้นตอนนี้แยกโค้ดออกมาสำหรับเอฟเฟคหลักๆ ได้แก่ Parallax, Zoom, Blur และ Fade แล้ว เดี๋ยวในอนาคตคงจะดูดโค้ดส่วนของ Scrolled, Clipping, Snapping และ Responsive มาใส่เพิ่มอีก

ถ้าใครสนใจ (จะมีไหม) ดูตัวอย่างได้ที่นี่ หรือจะไปโหลดมาแก้มาใช้จาก GitHub ของคิวบิกครีเอทีฟก็ได้ (เป็น repository เรโปแบบ public สาธารณะอันแรกเลยนะเนี่ย)

ภาพประกอบจากคิวบิกครีเอทีฟ

Advertisements

Javascript and Circumcision

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

(ปล. ปกติตามนโยบายของคิวบิกครีเอทีฟคงจะไม่สามารถมาโพสท์เรื่องงานในที่สาธารณะแบบนี้ได้ แต่ขออนุญาต CEO เป็นกรณีพิเศษแล้วเฉพาะกรณีนี้เท่านั้น ไม่ถือเป็นบรรทัดฐานในกรณีอื่นๆ แต่อย่างใด)

Screen Shot 2013-11-21 at 20.53.52

ก่อนอื่นเลย แนวคิดเริ่มต้นที่จะทำเว็บอันนี้ ตั้งใจไว้ว่าจะเป็นการซ้อมมือเพื่อเตรียมปรับสไตล์ของเว็บคิวบิกฯ ให้ตามสมัยนิยมมากขึ้น โดยถ้าให้สรุปหลักๆ ก็จะมีแนวคิดดีไซน์แบบ Flat Design, Big Picture, Parallax และ Scrolling-sensitive Content เข้าไว้ด้วยกัน

Flat Design

อันนี้ไม่มีอะไรมาก ตามสมัยนิยมที่นำเทรนด์โดย Microsoft ก็พยายามจะลดการไล่สีลงในหลายๆ จุดที่เป็นไปได้ แต่ด้วยความที่คิวบิกฯ ยังคงต้องการดีไซน์ที่ดูหวือหวามีมิติอยู่ การจะเปลี่ยนให้แบน 100% คงจะไม่เวิร์ค เพราะฉะนั้นในหลายๆ จุดก็จะยังมีการไล่สีอยู่ (เช่นพื้นหลัง หรือแบบอักษรหัวเรื่อง)

Big Picture

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

จริงๆ แนวคิด Big Picture ของคิวบิกครีเอทีฟเริ่มต้นอันแรกกับธีมเว็บไซต์ของ Paduppa Studio (เป็นธีมสำเร็จรูป ผู้เขียนไม่ได้ออกแบบเอง) หลังจากนั้นก็เริ่มมาใส่ในดีไซน์ของเว็บคิวบิกฯ ยุคที่ 5 (เริ่มประมาณปลายปี 2012 พร้อมๆ กับการเริ่มทำ Responsive Design กับการรองรับ Retina Display) ตัวอย่างที่เห็นชัดคือหน้าเกี่ยวกับคิวบิกครีเอทีฟ ซึ่งการใช้รูปใหญ่ๆ ยังเป็นดีไซน์ที่ง่ายกับการทำเว็บ Responsive และรองรับ Retina Display

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

Screen Shot 2013-11-21 at 22.03.09

Parallax

สุดท้าย คือเรื่องของการใช้อนิเมชันแบบ Parallax ตามสมัยนิยม ซึ่งเว็บแรกที่สะดุดตาคือเว็บของ Flickr และในช่วงปีที่ผ่านมาจะเห็นได้ว่ามีการใช้ดีไซน์ในลักษณะนี้เต็มไปหมด (เช่นเว็บ Apple ในช่วง Q4 2013)

สำหรับเว็บของ Cubic Staff Program อันนี้ จะมี Scrolling Parallax ที่รูปใหญ่ๆ ที่แทรกระหว่างเนื้อหาเป็นพักๆ ซึ่งจริงๆ แล้วเดี๋ยวนี้พวก Parallax ก็มีไลบรารีสำเร็จรูปที่ใช้ได้เต็มไปหมด แต่เนื่องจากโดยส่วนตัวเป็นพวกขอบเขียนโปรแกรมแบบฮาร์ดโค้ด และดูหนังโป๊แบบฮาร์ดคอร์ เลยเขียนเองแม่งแม่ของคุณเสียเลย

วิธีการก็คือว่า เราจะแบ่งทั้งเพจนี้เป็นช่วงต่างๆ โดยแต่ละช่วงจะปรับขนาดตามหน้าต่างที่ดู แต่ไม่น้อยกว่า 800px ต่อช่วง และจะมีทั้งแบบเต็มจอ หรือครึ่งจอ โดยเราจะนับระยะสำหรับครึ่งจอเป็น 1 หน่วย และเต็มจอเป็น 2 หน่วย

หลังจากนั้นในบรรดา <div> ของแต่ละช่วงทั้งหมด เราจะกำหนด attribute พิเศษไว้ ตั้งชื่อว่า px-length โดยถ้า <div> ไหนเราอยากให้แสดงเต็มจอ ก็ตั้งเป็น px-length=”2″ ส่วนอันไหนเราอยากให้เป็นครึ่งจอก็ตั้งเป็น px-length=”1″ ซึ่งตอนโหลดหน้าครั้งแรก หรือเมื่อมีการปรับขนาดหน้าจอ Javascript ก็จะใช้ค่านี้เพื่อกำหนดความสูงของ <div> แต่ละตัวใหม่

ต่อมาในส่วนของ Parallax เนื่องจากเราต้องให้เอฟเฟคแสดงผลเมื่อผู้ใช้เลื่อนหน้าจอมาถึงแล้วเท่านั้น เราจะรู้ว่าผู้ใช้เลื่อนมาถึงแล้ว เราจำเป็นต้องรู้ว่า <div> ดังกล่าวอยู่ที่ตำแหน่งเท่าไหร่ของทั้งเพจ แต่เนื่องจากเรารู้ว่า <div> ทั้งหมดแต่ละอันมีค่า px-length เท่าไหร่บ้าง รวมกับขนาดความสูงหน้าจอ เราจึงสามารถคำนวณตำแหน่งของตัวเองได้ไปในคราวเดียวกัน แล้วก็เก็บค่านี้ไว้ที่ px-start และ px-stop เป็นระยะที่เราต้องการให้เริ่มมีเอฟเฟค Parallax และหยุดทำเมื่อใด

ต่อมาการทำให้ภาพเลื่อนอยู่ในกรอบ ก็เริ่มจากการมี <div> ครอบด้านนอกที่ตั้งสไตล์ overflow: hidden; ไว้ ส่วน <div> ข้างในก็แสดงภาพ โดยใช้สไตล์ transform: translateY(y); ในการเลื่อน เพื่อให้ได้ประสิทธิภาพที่ดีกว่า

เพื่อให้เอฟเฟคเนียนยิ่งขึ้น ต้องเพิ่มโค้ดที่หลอกให้เบราวเซอร์เปิดการใช้งาน Hardware Acceleration โดยเติม transform: translate3d(0, 0, 0); เข้าไปอีกที

ส่วนป้ายชื่อที่มีการเลื่อนที่แตกต่างกัน ก็ใช้วิธีเดียวกันกับภาพพื้นหลัง แต่ตั้งให้ป้ายชื่อแต่ละชิ้นมีอัตราส่วนในการเคลื่อนที่ตามการเลื่อนจอที่แตกต่างกัน โดยตั้งเป็น attribute ที่มีชื่อว่า px-ratio เป็นค่าไว้สำหรับให้ Javascript นำไปใช้คำนวณ

Scrolling-sensitive Content

สุดท้ายอันนี้คือการทำให้เนื้อหามีอนิเมชันที่สอดคล้องกับการเลื่อนจอของผู้ใช้ (เช่นป้ายชื่อเลื่อนเข้ามาเมื่อผู้ใช้เลื่อนหน้าจอมาถึงจุดนั้น) ซึ่งก็ใช้วิธีเดียวกันกับด้านบนในการหาตำแหน่งค่า px-start และ px-stop แล้วจึงใช้ CSS Transition / CSS Animation เพื่อทำอนิเมชันต่างๆ

Screen Shot 2013-11-21 at 21.59.46

Fallback

สำหรับในกรณีที่ผู้ใช้ไม่มี Javascript หรือเบราวเซอร์ไม่รองรับ CSS3 เราก็ให้แสดงภาพแต่แรกไปเลยดื้อๆ โดยใช้วิธีง่ายๆ คือให้แสดงอนิเมชันเฉพาะเบราวเซอร์ที่เป็น WebKit แล้วค่า CSS ทุกอย่างที่เกี่ยวกับการทำเอฟเฟคให้ขึ้นต้นด้วย -webkit- ให้หมด แม้ว่าจะเป็นค่าที่ CSS เก่าๆ มีก็ตาม (เช่นใช้ -webkit-opacity แทน opacity เฉยๆ)

วิธีนี้จริงๆ มักง่ายไปหน่อย แต่ไม่ใช่ปัญหามากนักเพราะเดี๋ยวนี้ส่วนมากก็ใช้ WebKit เยอะแล้ว และการไม่ใช้ WebKit ก็ไม่ได้ทำให้ไม่ได้รับสารใดๆ ในหน้าเว็บนี้น้อยลง

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

ซึ่งแนวทางการดีไซน์นี้คงจะมีให้เห็นในเว็บไซต์ของคิวบิกครีเอทีฟในช่วงปีสองปีนี้แน่ๆ เป็นอย่างน้อย (และประสิทธิภาพควรจะดีขึ้นเรื่อยๆ ตามประสบการณ์) นอกจากนี้เว็บใหญ่ถัดไป (Cubic Creative Camp 10) ก็มีการดีไซน์ใหม่ที่จะเริ่มใช้ด้วย แต่ยังขออุบไว้ก่อนให้รอลุ้นกันเล่นๆ

และเนื่องจากว่าเว็บนี้จะต้องมีการใช้ Javascript เยอะมาก โพสท์นี้จึงมีหัวเรื่องว่า Javascript ส่วน Circumcision ไม่มีความเกี่ยวข้องแต่อย่างใด

เย่!

Engineering on Errors

วันนี้เกิดเหตุการณ์บางอย่างขึ้นครับ

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

วันนี้ก็เช่นกันครับ ผมใช้เวลาแว้บไปแว้บมาระหว่างที่กำลังบุก Lost City of the Tol’vir สลับหน้าจอมาสั่ง KFC ผ่านเน็ต หลังจากนั้นสักเกือบหนึ่งชั่วโมง เขาก็มาส่งที่บ้าน

พอผมหยิบเข้ามาในบ้าน และรื้อๆ ออกมาเพื่อจะรับประทาน ก็พบว่าวิงซ์แซ่บที่ผมสั่งไปขาดไป 2 ชิ้น (ผมสั่งแบบ 2 ชิ้น 2 ชุด) หลังจากที่ผมลองตรวจสอบกับใบเสร็จและแน่ใจว่าเขาจัดมาให้ผมผิดแน่ๆ แล้ว ผมเลยโทรไปที่ 1150 เพื่อแจ้งว่าของของผมขาด ทาง KFC ก็ขออภัยตามปกติ และบอกว่าจะประสานงานต่อให้

หลังจากนั้นไม่นาน ทางสาขาคาร์ฟูร์รามอินทราก็โทรมาบอกว่าจะจัดส่งวิงซ์แซ่บอีก 2 ชิ้นมาให้ ผมก็ไม่ได้ต่อว่าอะไรเพราะไม่ได้คิดว่าเป็นเรื่องใหญ่อะไร แต่เรื่องราวก็เริ่มเพี้ยนๆ เมื่อหลังจากนั้น มีโทรศัพท์อีกสายที่อ้างว่าเป็นพนักงานส่งของ KFC ที่เป็นคนส่งรายการเมื่อสักครู่ โทรมาขอร้องให้ผมช่วยโทรแจ้งทาง 1150 ว่าผมเจอวิงซ์แซ่บอีก 2 ชิ้นแล้ว และไม่ได้มีความผิดพลาดใดๆ โดยที่ทางสาขาฯ จะเอาวิงซ์แซ่บที่ขาดไปให้ โดยพยายามยื่นข้อเสนอโดยถามว่าผมต้องการเมนูอะไรเพิ่มเติมอีกหรือไม่ ซึ่งผมก็ปฏิเสธข้อเสนอนี้ไป และขอแค่ให้เขาช่วยส่งวิงซ์แซ่บอีก 2 ชิ้นมา

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

สุดท้าย ทางสำนักงานใหญ่ก็โทรมาอีกครั้ง โดยผมก็ได้เล่าเหตุการณ์ทั้งหมด รวมถึงที่พนักงานขอให้ช่วยโกหกทางสำนักงานใหญ่ด้วย พนักงานสำนักงานใหญ่ก็ขอโทษขอโพยตามปกติอีกครั้ง ก่อนที่จะวางสายไป

ผมคิดว่าเหตุการณ์นี้ รวมถึงทางเลือกทั้งหมดของผมที่สามารถทำได้ คงเป็นเรื่องที่ถกเถียงกันได้พอสมควร และคงมีความคิดที่หลากหลายพอสมควร

จริงๆ ผมเองพบกับเหตุการณ์ลักษณะนี้บ่อยนะครับ ไม่ว่าจะเป็นพนักงานธนาคารขอให้เราช่วยให้คะแนนเต็มถ้ามีโทรศัพท์มาถาม หรือพนักงานเคาน์เตอร์ของทรูที่ชอบหลอกให้เรากดเบอร์ 5

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

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

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

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

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

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

ระบบนั้น ทำให้พนักงานทำงานได้อย่างมีประสิทธิภาพมากขึ้นจริงๆ หรือแค่สอนให้มนุษย์โกหกกันเก่งขึ้นก็เท่านั้น?