ภาพประกอบ : bootstrap

มองข้าม bootstrap ไปบ้างก็ดีเหมือนกัน

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

ภาพประกอบ : bootstrap

ภาพประกอบ : bootstrap

มองข้าม bootstrap ไปบ้างก็ดีเหมือนกัน

มีหลายครั้งนะครับที่เราอาจจะเห็นข้อความประมาณว่า “หยุดใช้ bootstrap กันได้แล้ว” หรือประมาณว่า “หน้าตาเหมือนกันหมดเลย” ข้อความพวกนี้อาจจะทำให้เราหยุดคิดได้บ้าง (ถ้าเป็นคนคิดมากแบบผมอ่ะนะ) คืออันที่จริงแล้วแม้แต่ตัวผมเองก็ยังทำงานด้วยเครื่องมือเหล่านี้อยู่ในชีวิตจริงตลอดเลยนะครับ แม้ว่าจะพยายามดิ้นรนหนีมันออกมาเท่าไหร่ก็ตามแต่

ด้วยความที่เวลาผมได้งานทำ ถ้าเป็นเว็บไซต์ ผมจะเลือกการทำงานผ่านทาง CMS อย่าง wordpress เป็นหลักเพราะคิดว่าสะดวก รวดเร็ว ขึ้นเว็บได้ไว แก้ไขง่ายเพราะส่วนใหญ่จะได้งานแบบเว็บไซต์ขนาดไซส์เล็กๆ ทำให้ wordpress ตอบโจทย์ได้ดีจบงานได้ไว บางงานซื้อ theme มานั่งปรับนิดหน่อยก็ยิ่งไว้เข้าไปอีก แต่บางงานที่ทำเป็นโปรแกรมบนเว็บหรือที่เรียกว่า web application อันนี้ไปซื้อ theme ต้นแบบมาก็แปลงเนื้อหาด้านในเอา แต่หลักๆจะเลือกที่พัฒนาขึ้นมาด้วย bootstrap เพราะจะทำให้งานเสร็จเร็ว

ทีนี้เวลาผมทำเสร็จแล้วผมจะมองย้อนหลังกลับไปดูแล้วเห็นว่า งานของผมส่วนใหญ่ “หนักมาก” ตามน้ำหนักตัวของคนทำกันเลยทีเดียว ปัญหามันก็มาจากการที่ผมมักยัดเครื่องมือต่างๆเข้าไปใน web ทั้งหมด ทั้งที่ใช้และไม่ได้ใช้งานนั้นแหละ วันก่อนลองเปิดงานของตัวเองด้วย helium css ถึงกลับตกใจด้วยความที่พบเห็น css จำนวนมากที่เราไม่ได้ใช้งาน ถึงแม้ว่าตอนทำเว็บเราจะตรวจสุขภาพของการ load แล้วใช้ plugin ต่างๆช่วยให้ load เร็วขึ้นไปแล้ว พยายาม optimize ภาพต่างๆแล้ว พยายามใช้ data uri แล้วมันก็ยังมีสิ่งที่ผมเองเรียกว่า “ขยะ” เยอะอยู่เหมือนเดิม

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

ทีนี้ถ้าพูดถึงความจำเป็นในการใช้งานจริงๆที่ผมเลือกเครื่องมือแบบ css framework มาใช้งานคืออะไร

  1. grid system เพราะมันง่ายเหลือเกินในการใช้งานเส้นแบ่งหน้าเว็บต่างๆ
  2. form การสร้างกล่องรับข้อมูลต่างๆที่เร็วขึ้น ดูดีอยู่
  3. button ปุ่มมันสวยดี เห็นแล้วรู้สึกน่ากดจริงๆ
  4. panel ใช้บ่อยมากเวลาทำ web application มันดูเป็นส่วนๆดี

เอ่อ….อันที่จริงหลักๆที่ใช้แทบทุกครั้งก็มีประมาณนี้ละครับ ที่เหลือมันก็ลูกเล่น แต่งเสริม เติมไปเรื่อยว่างๆไง งานมันจะได้ดู coolๆ แต่ทีนี้ผมต้องแลกไปด้วยอะไรกันบ้าง เพียงเพื่อ 4 อย่างที่ผมต้องการ

ภาพตัวอย่าง : pageload

ภาพตัวอย่าง : page load

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

  1. bootstrap.css: 84% is not used by the current page.
  2. font-awesome.css: 95% is not used by the current page.

อืมอันนี้คือแค่จาก bootstrap กับ font-awesome นะครับจัดหนักไปเกือบ 100 แล้วที่ไม่ได้ใช้ แล้วลองดูเวลา load bootstrap กันบ้าง

ภาพประกอบ load page

ภาพประกอบ load page

ตามเจ้ากรอบสีแดงที่ผมวงเอาไว้ให้ดูกันเลยนะครับ

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

คือ..คำตอบมันอาจจะฟังดูแย่ อะไรกันเราจะเขียนเองเข้าไปได้อย่างไร เยอะขนาดไหน…เยอะอะไร ขนาดไหน ก็ในเมื่อมันมีแค่ 4 อย่างที่เราต้องการใช้งาน ก็ให้คุณเพ่งไปที่สิ่งที่คุณจำเป็นก็พอแล้วคุณก็ไปพัฒนาเทคนิคการเขียน css แบบ SASS หรือแบบ LESS ซะ ไอ้ CSS ธรรมดามันไม่เพียงพอต่อยุคสมัยนี้แล้วละครับ อย่างเช่นคุณบอกอยากได้ grid มาใช้อันนี้คุณก็ดูตัวอย่างจาก framework มาเลยครับ เค้ามีการแบ่งขนาด media เท่าไหร่เราก็แบ่งตามเค้าไปเลย แบ่งช่องตามเค้าก็ได้ ลองดูในหน้า customize ของเค้าก็มีรายละเอียดบอกหมดว่าอะไรใช้เท่าไหร่ เวลาจะทำงานแบบเป็น responsive ก็เขียนเยอะหน่อยถ้าไม่ได้ใช้มากนักเอาแค่เปิดบน pc จอขนาดต่างๆก็ง่ายหน่อย

ส่วน form ก็เอาแบบง่ายๆ มันก็ใช้งานได้อยู่นะ

input[type="text"] {
 border: 1px solid #DADADA;
 color: #888;
 height: 30px;
 margin-bottom: 16px;
 margin-right: 6px;
 margin-top: 2px;
 outline: 0 none;
 padding: 3px 3px 3px 5px;
 width: 70%;
 font-size: 12px;
 line-height:15px;
 box-shadow: inset 0px 1px 4px #ECECEC;
 -moz-box-shadow: inset 0px 1px 4px #ECECEC;
 -webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}

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

แต่ถ้าใครมองว่ามันก็ไม่ได้นะพี่ ยังไงคนเค้าก็ต้องการให้ใช้ framework ไม่ใช่มานั่งเขียนเอง ใครจะไปแก้กันถูก เขียน code มั่วๆมาทำไงล่ะ เราอาจจะเลือกเป็นใช้งาน Tab Customize ของ bootstrap แล้วเลือกมาเฉพาะที่จำเป็นต้องใช้ก็จะเบาขึ้นเยอะและลดความไม่จำเป็นออกไปได้ แต่เราต้องคิดก่อนนะครับว่าเราจะใช้อะไรบ้างแล้วค่อยดึงลงมาใช้งาน เราต้องรู้ก่อนว่าเราจะใช้ความสามารถอะไรของเค้าในโปรเจคนี้บ้าง หรือถ้าอยากได้ประสบการณ์ใหม่ๆให้กับชีวิตไปเลยลอง css framework ตัวอื่นๆบ้างดีไหมครับ ที่มันเล็ก เร็ว แรง ยังมีอีกตั้งเยอะนี่น่า

ตัวเลือกเพิ่มเติม

simple grid

simple grid

Simple grid นี่มีแค่ grid อย่างเดียวจริงๆไฟล์เล็กนิดเดียวแค่ 3.5 KB เองอาจจะพอลดลงไปได้บ้าง

load simple grid

load simple grid

หรือไม่ก็ยังมี pocket grid ที่เร็ว แรง เล็ก จิ๋วอยู่อีกตัว

pocket grid

pocket grid

ตัวนี้นี่มีการออกแบบเป็น mobile-first ด้วยแถมคนที่ใช้บูธมาก่อนน่าจะใช้งานได้ง่ายด้วย

อีกตัวก็คือ ice cream ที่ตอนนี้มีคนใช้งานกันเยอะขึ้นไม่น้อยเลย

icecream

icecream

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

ดูบทความที่ผม update ใหม่เพิ่มเติมเกี่ยวกับ css ค่ายอื่นๆได้อีกที่ blog ใหม่นะครับ
http://teerapuch.com/2016/coding/html-css/responsive-framework-lists/