แชร์ประสบการณ์การพัฒนา Mourn.js
เมื่อวันพฤหัสบดีที่ 13 ตุลาคม พ.ศ. 2559 ที่ผ่านมา พวกเราต่างได้รับทราบข่าวการเสด็จสวรรคตของพระบาทสมเด็จพระเจ้าอยู่หัวในพระบรมโกศ ซึ่งเป็นพระมหากษัตริย์ผู้เป็นที่รักยิ่งของปวงชนชาวไทย ผมเองแม้จะมีโอกาสได้เห็นพระองค์ท่านทรงงานไม่มากนัก แต่ก็รู้สึกเป็นเกียรติอย่างยิ่งที่ได้เกิดมาในผืนแผ่นดินไทยที่มีประมุขของประเทศผู้มีความวิริยะอุตสาหะคอยดูแลประชาชนชาวไทยดังเช่นพระองค์ท่าน
ภายหลังจากที่มีแถลงการณ์จากพระบรมมหาราชวัง หลายเว็บไซต์ต่างทยอยกันเปลี่ยนสีของเว็บให้กลายเป็นขาว-ดำ เพื่อแสดงความไว้อาลัยต่อการสวรรคตของพระองค์ท่าน.. ผมเองในฐานะนักพัฒนาเว็บไซต์ก็ต้องเข้าไปแก้ให้หลายเว็บเลย ซึ่งการเปลี่ยนก็ดูจะไม่ได้ซับซ้อนอะไรมาก แค่เพิ่มคำสั่ง CSS เข้าไปไม่กี่บรรทัดเท่านั้น (โค้ดก็ตามนี้ครับ)
-moz-filter: grayscale(100%) !important;
-webkit-filter: grayscale(100%) !important;
filter: gray !important;
filter: grayscale(100%) !important;จนเมื่อวันเสาร์ที่ผ่านมา หลายคนคงเห็นรูปที่แชร์กันในโซเชี่ยลอย่างสนุกสนาน ซึ่งเป็นรูปหน้าจอขณะเลือกซื้อ iPhone 7 Plus แต่ไม่รู้จะเลือกสียังไง เพราะเว็บกลายเป็นขาว-ดำไปซะแล้ว / แล้วหลังจากนั้นอีกแค่ไม่กี่ชั่วโมงก็มีคนแชร์รูปเว็บขายสีทาบ้านยี่ห้อหนึ่งซึ่งก็เจอปัญหาเดียวกัน
จะเห็นว่าบางเว็บไซต์ พอถูกลดสีลงไปแล้วมันไปส่งผลต่อการใช้งาน ซึ่งไม่เป็นผลดีต่อเว็บนั้นแน่นอนครับ อาจจะมีบางคนแนะนำให้ลง Chrome Add-on ที่จะทำให้เว็บกลับมามีสีสันเหมือนเดิม แต่ผู้ใช้บางคนก็อาจจะลง Chrome Add-on ไม่เป็น.. หรือบางคนใช้งานบน smartphone, tablet ก็คงจะเอา Add-on ไปลงได้ยาก
ผมก็เลยเกิดปิ๊งไอเดียขึ้นว่า
“เห้ย! ทำไมเราไม่ทำปุ่มให้คนที่มาใช้เว็บของเราเปิด-ปิด grayscale mode ได้เลยล่ะ”
ทีนี้ก็กลัวว่ามันจะธรรมดาเกินไป เลยคิดว่ามันน่าจะใส่ feature อย่างอื่นเข้าไปได้ด้วย ก็เลยกลายมาเป็นริบบิ้นไว้อาลัยสีดำ (mourning ribbon, black ribbon) ซึ่งก็ถือว่าเป็นไปตามหลักสากล เรียกว่า library ตัวนี้เมื่อพัฒนาเสร็จแล้วจะสามารถนำไปใช้ได้ทั่วโลก
ว่าแล้วก็ไม่รอช้าครับ ทักไปสะกิดเพื่อนอีกสองคน (S.Songklod IToon กับ Phruek Kosonsuwiwat) ชวนกันมาทำ jQuery library ทันที วันนั้นวันอาทิตย์ละครับ ตอนเย็นพวกเรามีเตะบอลด้วยกัน ก็เลยได้คุยกันว่าจะเริ่มโปรเจคนี้ยังไง
กลับมาบ้านก็เริ่มลงมือกันเลยฮะ
ขั้นแรกไปสร้าง repository ใน github กันก่อน
ตอนแรกไม่รู้จะใช้ชื่ออะไรดี พอดีเห็นตามข่าว เค้าใช้คำว่า mourn ซึ่งมีความหมายว่า “เศร้าโศก, ไว้อาลัย, ไว้ทุกข์” ก็เลยเลือกเอาคำนี้มาใช้เป็นชื่อ library แล้วกัน
(มีถกกันเล็กน้อยด้วยว่าจะต้องเป็น verb หรือ noun ฮ่าๆๆ สุดท้ายก็เลยได้ข้อสรุปว่าเป็น verb แล้วกัน)
ทีนี้มาดูกันว่าข้างในมีไฟล์อะไรบ้าง
สิ่งที่เราเตรียมไว้ให้ก็จะมีไฟล์ JavaScript กับ CSS ซึ่งมีทั้งแบบธรรมดา และแบบ minify เรียบร้อย เผื่อใครอยากได้ไฟล์เล็กๆ ไปใช้
หลักๆ ก็เลยมีแค่ 4 ไฟล์ คือ
- src/css/mourn.css
- src/css/mourn.min.css
- src/js/mourn.js
- src/js/mourn.min.js
แต่ตอน develop เนี่ย.. เราเขียน SCSS แล้วค่อย compile ออกมาเป็นไฟล์ mourn.css กับ mourn.min.css ~ ดังนั้น เราจะเห็นว่าใน src/scss เนี่ย มันจะมีสองไฟล์ คือ ribbon.scss กับ switch-slider.scss
มาลองเอาไปใช้จริงกันดีกว่า
สำหรับขั้นตอนเอาไปใช้เนี่ย ใครสะดวกวิธีไหนก็เชิญตามสะดวกเลยครับ
- โหลดไฟล์ไปแปะในเว็บเอง
- clone repository จาก github
- npm install mourn.js
- bower install mourn.js
ซึ่งสองอันหลังเป็นคำแนะนำจาก
Rungsikorn Rungsikavarnich (พี่เอ็ม) ผู้คร่ำหวอดในวงการ front-end ที่บอกว่าควรจะมีนะ อิอิ
== มาเริ่มต้นใช้งานกัน ==
- เรียก CSS file | โดยเอา code ด้านล่างนี้ไปใส่ใน <head> tag
<!-- Mourn.js CSS file -->
<link rel="stylesheet" type="text/css”href="src/css/mourn.css">- เรียก JavaScript file | โดยเอา code ด้านล่างนี้ไปใส่ก่อนจะปิด <body> tag
<!-- jQuery library (served from Google) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><!-- Mourn.js Javascript file -->
<script type="text/javascript" src="src/js/mourn.js"></script>
- เรียก mourn.js ให้ทำงาน
$(document).ready(function(){
$.mourn();
});เนื่องจากอยากให้มันโคตรง่ายสำหรับนักพัฒนาเว็บไซต์ทุกคน นี่คือวิธีใช้งานที่ผมอยากเห็นมากที่สุด เพราะแค่แปะโค้ด 3 ช่องนี้ เว็บคุณก็จะมีปุ่มเปิด-ปิด grayscale mode แล้วก็มีริบบิ้นสีดำขึ้นมามุมขวา-บนของหน้าจอแล้ว โดยไม่ต้องไปทำอะไรให้ยุ่งยากเลยครับ
ตอน launch ออกไป มีหลายคนถามหาเหมือนกันว่า ถ้าเกิดเค้าอยากทำปุ่ม switch เปิด-ปิด grayscale mode เองจะได้ไหม.. ผมก็เลยบอกว่า ถ้าคุณทำปุ่มได้ขนาดนั้นแล้ว ผมว่าแค่เอา css แปะเข้าไปที่ <html> หรือ <body> คงไม่ยากเกินไปแล้วล่ะ 55555+ อันนี้คือคิดงี้จริงๆ นะ ไม่ได้กวนตีน
แต่สำหรับใครที่พอจะแก้โค้ดเป็น เราก็ทำ options ไว้ให้เซตได้เหมือนกัน เพียงแค่ตอนที่เรียก $.mourn() ก็ใส่ options ที่ต้องการเซตค่าเข้าไป
$.mourn({
// Gray Color Mode Options
gray: true, // boolean: [true|false]
grayScale: 1.0 // double: [0.0 ~ 1.0]
// Ribbon Options
ribbon: true, // boolean: [true|false]
ribbonSize: 'large', // String: [small|large]
ribbonPosition: 'top-right', // String: [top-left|top-right|bottom-left|bottom-right]
});- gray — เซตได้ครับว่าจะให้มี switch เปิด-ปิด grayscale mode หรือเปล่า
- grayScale — สามารถเซตได้ว่าอยากให้ grayscale mode กี่ % (1.0 หมายถึง 100%) เผื่อบางคนไม่อยากให้เห็นสีบ้างนิดหน่อย ก็มาปรับตรงนี้ได้
- ribbon — อันนี้เอาไว้เซตว่าจะให้มีริบบิ้นไว้อาลัยหรือเปล่า
- ribbonSize — ทำเผื่อไว้สองขนาดครับ คือไซส์ small กับ large
- ribbonPosition — สามารถกำหนดได้ด้วยครับว่าจะให้อยู่มุมไหนของหน้าจอ
เสร็จเรียบร้อยครับ เป็นประสบการณ์ไม่กี่ชั่วโมงที่ได้สร้าง jQuery library ที่เราคิดว่าจะมีประโยชน์กับทั้งนักพัฒนาเว็บไซต์ แล้วก็ผู้ใช้งานเว็บไซต์ด้วย
ถ้าสนใจใช้งาน Mourn.js ก็ตามไปได้ที่ github นี้เลยครับ
github: https://github.com/kanmanus/mourn.js
demo: http://www.kanmanus.com/mournjs/example.html
Acknowledgement
ขอบคุณพี่ๆ อีกสามท่านจากค่าย SPIDER Camp ที่อยู่เบื้องหลังคอยให้คำแนะนำ Teeradech Thanapop Nathawat Thumthiwong Suthat Ronglong
