พื้นฐาน CSS อยากแน่นๆ มาชวนคุยเรื่องนี้กันดีกว่า

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

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

ทำไมถึงบอกว่าพื้นฐานของ css นั้นสำคัญ ก็น่าจะเป็นเพราะว่า

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

ไม่ใช่ว่าไม่ดีนะครับ มันดีมากเลย 555 เพียงแต่ยังไงพื้นฐานก็โคตรจะสำคัญอ่ะทีนี้ แล้วเรื่องของ CSS มันมีอะไรที่เราต้องรู้จักบ้างละ ก็ในเมื่อมันง่ายซะขนาดนั้นแล้ว

อืม…อันนี้เริ่มยากแล้ว เพราะถ้ามองในมุมของผม ทุกอย่างก็สำคัญหมดละมีทั้ง Syntax, comment, browser, selector, color, font, border,

margin, padding ต่างๆพวกนี้ หรือจะเป็น form, layout, positionน่าสนใจทั้งนั้นเลยครับ แล้วยังมีเรื่องของ animation เล็กๆกับ css3 อีกด้วย

แล้ว… ถ้าเรารู้จักพื้นฐาน css แล้ว เราจะเอาไปใช้ทำประโยชน์อะไรได้บ้างละถ้าสำหรับคนที่ไม่ใช่ฝั่ง Dev คุณก็สามารถ ปรับแต่งเนื้อหา content ของคุณให้สวยงาม และมีความแตกต่าง ได้อย่างน่าสนใจ

ไม่ว่าจะเป็นการตกแต่ง Email เพื่อส่งไปหาลูกค้าผ่านทาง Email เค้าก็ยังคงใช้ความเป็น css แบบ inline กันอยู่ หรือจะเป็น ปรับแต่ง wordpress site ของคุณก็เห็นมีให้แก้ไขได้เองง่ายๆ จะได้ไม่ต้องไปจ้างนักพัฒนาราคาสูงๆมาทำให้

ส่วนคนที่เป็นฝั่ง Dev ก็แน่นอนว่ายังไงซะ คุณจะได้รู้จักกับโครงสร้าง และเครื่องมือต่างๆ ที่คุณเลือกใช้งานเป็นอยู่ดี ว่าแต่ละ library หรือ framework มันมีการทำงานอย่างไร หรือว่าเราจะปรับแต่งหน้าตาของมัน จะต้องทำอย่างไร

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

อ่อ!! แล้วในส่วนของ CSS Preprocessors นี่ยิ่งร้ายกาจ มีคนใช้กันเพียบ แถมเครื่องมือที่เราไปหยิบมา ดันใช้งาน SCSS กันซะเยอะ แล้วเราจะปรับยังไง ถ้าเราไม่รู้จักมัน ซึ่งมันไม่ธรรมดานะครับ เพราะว่ามันทำให้จาก CSS เดิมๆให้กลายเป็น การสร้างตัวแปร การสืบทอดพลังจักรวาล การแจกจ่ายพันธุกรรมต่างๆได้ และยังสามารถใช้งาน Loop หรือพวก if / else ได้อีก แน่ะไม่เบาจริงๆ

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

Photo by Jelleke Vanooteghem
https://unsplash.com/photos/chuzevDl4qM

ขอบคุณที่ติดตามกันครับ

เมื่อนักพัฒนายุคใหม่ไม่ค่อยสนใจพื้นฐาน FUNDAMENTAL

ทุกวันนี้มีเว็บไซต์และเว็บแอพลิเคชั่นมากมายเปิดใช้บริการบนอินเตอร์เน็ต ซึ่งล้วนแล้วแต่เต็มไปด้วยความสวยงาม ความน่าตื่นตาตื่นใจ ลูกเล่นที่แพรวพราว นั้นน่าจะนับว่าเป็นข่าวดีจริงๆที่บน Browser ของคุณเต็มไปด้วย User-interface ล้ำๆ ดูดี แต่ข้างในส่วนของ Back-end กลับแฝงไปด้วยความลึกลับเพราะนักพัฒนาขาดความเข้าใจอย่างลึกซึ้งในเรื่องของพื้นฐาน Fundamental

ทุกวันนี้มีเว็บไซต์และเว็บแอพลิเคชั่นมากมายเปิดใช้บริการบนอินเตอร์เน็ต ซึ่งล้วนแล้วแต่เต็มไปด้วยความสวยงาม ความน่าตื่นตาตื่นใจ ลูกเล่นที่แพรวพราว นั้นน่าจะนับว่าเป็นข่าวดีจริงๆที่บน Browser ของคุณเต็มไปด้วย User-interface ล้ำๆ ดูดี แต่ข้างในส่วนของ Back-end กลับแฝงไปด้วยความลึกลับเพราะนักพัฒนาขาดความเข้าใจอย่างลึกซึ้งในเรื่องของพื้นฐาน Fundamental

When new developer doesn’t care fundamental

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

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

ทำไมถึงเป็นแบบนั้น เพราะว่าพวกเค้าไม่ได้สนใจเรียนรู้หรือพัฒนาตัวเองเพื่อที่จะทำความเข้าใจกับสิ่งที่เรียกว่า พื้นฐานหรือแก่นสารของมันอย่างจริงจัง แต่พวกเค้าเล็งไปยังจุดหมายปลายทางที่เป็นภาพฝันที่ชัดเจน ‘หิวแล้วอ่ะ กินเลยได้ไหม‘ นั้นเป็นเหตุผลให้คุณเห็นว่าการพัฒนาเว็บไซต์ เป็นเรื่องง่ายดาย ใครๆก็ทำกันได้ แต่พวกเค้าเหล่านั้นอาจจะไม่รู้เลยด้วยซ้ำว่า CSS ที่มี Property แบบ Float เอาไว้ทำอะไร Position แต่ละตัวมีความสัมพันธ์กันอย่างไร Flex-box คืออะไร หรือแม้แต่ไม่รู้วิธีที่จะ validate form HTML ให้ได้รับข้อมูลอย่างถูกต้องก่อนที่จะส่งมันไปหา Server-side Script ยิ่งเดี๋ยวนี้มี CSS Framework หรือแม้แต่ PHP Framework มากมายให้เลือกใช้งานกันด้วย เรียก class ออกมาสิได้แล้ว ไปนั่งเขียนอยู่ทำไม เรียก function ออกมาสิจะสนเงื่อนไขไปทำไม

ทีนี้ผมอยากให้คนที่เห็นข้อความนี้ได้ลองคิดดูใหม่ครับ สิ่งที่พวกคุณกำลังทำหรือคิดว่ามันถูกต้องนั้น อันที่จริงมันไม่ได้งดงามอย่างที่คิดหรอก มันค่อนข้างฉาบฉวย ประเดี๋ยว ประด๋าว และขาดประสิทธิภาพ คุณลองทำงานให้ช้าลงหน่อย เน้นมาพัฒนาตัวเองให้มากขึ้นอีกนิด เริ่มต้นกันที่เรื่องพื้นฐาน ทำความเข้าใจกับรูปแบบการทำงานของแต่ละสิ่งที่คุณเรียนรู้ ไม่ต้องถึงแก่นระดับศาสดา เอาแค่รู้ว่าคุณกำลังทำอะไร และมันมาแบบนี้ได้อย่างไร และคุณจะไปต่อได้อย่างไร ก็น่าจะเพียงพอแล้วสำหรับวันนี้ มันอาจจะเหนื่อยตอนแรกหน่อยครับ แต่ไม่นานคุณจะเห็นภาพปลายทางที่คุณเคยฝันไว้มันชัดเจนมากขึ้นกว่าเดิม

สำหรับคนที่ไม่รู้จะเริ่มอย่างไร ผมมีแนวทางเบื้องต้นสั้นๆ สำหรับคนเริ่มเดินไว้ให้พอเป็นแนวนะครับ
HTML Fundamental

  • HTML structure
  • HTML Elements
  • HTML Attributes
  • HTML Paragraphs and Text
  • HTML Lists
  • HTML Images
  • HTML Table
  • HTML Link
  • HTML Form
  • HTML Embedding
  • HTML Layout

CSS Fundamental

  • CSS Selectors
  • CSS Pseudo-class and element
  • CSS Typography
  • CSS Color
  • CSS The Box Model
  • CSS Borders
  • CSS Basic Page Layout
  • CSS Images
  • CSS Navigation
  • CSS Forms
  • CSS Tables
  • CSS Shadows
  • CSS Gradients
  • CSS Positioning & Layering
  • CSS Transforms & Animation
  • CSS Filters
  • CSS Shapes & Masks
  • CSS Print

JAVASCRIPT Fundamental

  • JS Variables
  • JS Operators
  • JS Data Types
  • JS Array again
  • JS Objects again
  • JS Functions
  • JS Events
  • JS Date
  • JS Loop
  • JS Regular Expressions
  • JS JSON
  • JS patterns

PHP Fundamental

  • PHP Install
  • PHP Code Style
  • PHP Variables
  • PHP Operators
  • PHP Date
  • PHP Loop
  • PHP Errors
  • PHP Arrays
  • PHP Includes and Requires
  • PHP File Handling
  • PHP Functions
  • PHP Filters
  • PHP Exception
  • PHP Cookies
  • PHP Sessions
  • PHP Objects
  • PHP With Database

Link: w3schools