ฉบับที่ 4

ในโลกของ React ไลบรารี่อย่าง Styled Components เป็นที่นิยมในการสร้างคอมโพแนนท์พร้อมจัด stylesheet ไปในตัว Tailwind เป็นหนึ่งใน CSS ที่ได้รับความนิยมสูงมากในปัจจุบัน ด้วยการใช้งานที่ง่ายทำให้สามารถพัฒนาโปรเจคได้ไว

ทำไมเราถึงไม่รวม Styled Components เข้ากับ Tailwind ซะเลยละ? นั่นจึงทำให้เกิดโปรเจคอย่าง Styled wind

1import styled from 'styled-wind';
2
3const StyledContainer = styled.div`
4  background: red;
5  margin-top: 10px;
6
7  # กำหนดข้อความให้เป็นสีน้ำเงินโทน 600
8  .text-blue-600;
9
10  # แต่หากหน้าจอมีขนาดใหญ่ (ไซต์ lg ขึ้นไป) ให้ข้อความเป็นสีเขียนโทน 600 แทน
11  .lg:text-green-600;
12
13  # เมื่อทำการ hover ให้สีพื้นหลังเป็นสีเหลือง
14  .hover:bg-yellow;
15
16  # กำหนดค่า padding-top
17  .pt-10;
18  border: 1px solid {props => props.isError ? 'red' : 'green' }
19`

กำเนิดแล้ว Bootstrap 5 (แต่ยังเป็นทารกรุ่น alpha อยู่นะ)

หลังจากที่ Bootstrap 4 ถูกเปิดตัว หลายอสงไขยถัดมาจึงได้ฤกษ์กำเนิดเป็น Bootstrap 5 ที่มีฟีเจอร์สำคัญดังนี้

• ที่เห็นชัด ๆ เลยก็คือโลโก้ใหม่ที่มองแล้วก็ดูน่ารักดีนะ

• เลิกใช้ jQuery ในโค้ด JavaScript ของ Bootstrap แล้ว

• ไม่สนับสนุนการใช้งานบน Internet Explorer

• มีค่าตัวแปรสำหรับชุดสีต่าง ๆ ให้เลือกใช้อย่างมากมาก

• ปรับปรุงการใช้งาน form และ form controls เช่น checkbox radio select เป็นต้น ให้แสดงผลเหมือนกันทุก OS และ browser

• เพิ่ม Utitily API ให้เราสามารถสร้าง class ตามความต้องการของเราได้ เช่น ต้องการให้มีคลาส w-25 เพื่อแทน width: 25% หรือ w-50 เพื่อแทน width: 50% ก็สามารถเขียนเป็นโค้ดได้ดังนี้

  SASS

  1$utilities: (
  2  "width": (
  3    property: width,
  4    class: w,
  5    values: (
  6      25: 25%,
  7      50: 50%,
  8      75: 75%,
  9      100: 100%,
  10      auto: auto
  11    )
  12  )
  13)

• ปรับปรุงการใช้งาน Grid เช่น เพิ่ม breakpoint ใหม่สำหรับหน้าจอขนาดใหญ่มาก ๆ (Extra extra large) คือ xxl

Bootstrap 5 จะดีงามแค่ไหนอ่านต่อได้ใน Bootstrap Website ครับ

สไลด์สรุปการใช้ :is ที่เคยลงไว้ใน Facebook ครับ

จะกำหนดตัวแปรให้สีเหลืองแบบหลาย ๆ สี เหลืองอ่อนมาก เหลืองอ่อนน้อย เหลืองปกติ เหลืองทอง ซึ่งมันมีหลายเหลือง แ้ลก็ไม่รู้จะตั้งชื่อตัวแปรให้กับแต่ละเหลืองว่าอะไรดี อยากได้เครื่องมือไว้ตั้งชื่อให้ค่าสีใช่ไหม? นี่เลย Sorted CSS Colors

เมื่อพูดถึง Next.js สิ่งแรกที่มักเข้ามาในหัวคือการทำ Server-Side Rendering (SSR) ซึ่งช่วยทำให้การโหลดหน้าเพจนั้นเร็วขึ้น แต่... ช้าก่อน นี่มันปี 2020 แล้วนะ SSR ยังมีความจำเป็นอยู่อีกไหม?

SSR ใช้ทรัพยากรฝั่งเซิฟเวอร์ในการสร้าง HTML พอสมควรอาจส่งผลให้เกิดความล่าช้าในการส่งหน้าเพจสู่ client หากเพียงอยากทำ SSR เพื่อให้บอทของ Google เข้าใจบอกเลยว่าคิดผิด เพราะแอพแบบ client-side ก็สามารถเข้าใจได้โดย Google เช่นกัน

ทว่าโลกนี้ยังมีบอทหน่อมแน้มแบบ Facebook หรือ Twitter อยู่ หากเราอยากทำ SEO กับบอทเหล่านี้ SSR ก็ยังเป็นคำตอบอยู่นะ

เรายังมีวิธีการสร้าง dynamic pages ให้โหลดหน้าเพจเร็ว ๆ ด้วยการแสดงผลส่วน header (หรือ footer) ของเพจก่อน แล้วส่วนเนื้อหาอื่นค่อยดึงมาแสดงผลทีหลัง โดยอาศัยกลไกของ client-side ก็ย่อมได้

ฟัง ๆ ดูแล้วก็เหมือน SSR จะถูกชำแหละซะไม่เหลือชิ้นดี?

• แต่... SSR ก็ยังช่วยให้เราสร้างเนื้อหาที่บอทอย่าง Facebook หรือ Twitter เข้าใจได้
• และ... เรายังใช้ SSR เพื่อเลือกแสดงผลเนื้อหาบางส่วน เช่น header ที่มีข้อมูลของผู้ใช้งานติดไปด้วยได้
• อีกทั้ง... ยังทำให้เกิดฟีเจอร์หลากหลายบนการใช้งานของ Next.js เช่น CMS preview