COOL IT IDEAS AND STUFF

See the original english version Click here!

 

ในปัจจุบันมีตำแหน่งงานจำนวนมากที่ต้องการให้คุณทั้ง Design และ Develop Website ดังนั้น การรู้วิธีเขียน Code ในการพัฒนา Front-end ก็ถือเป็นสิ่งสำคัญในฐานะของ UX/UI Designers และบทความนี้จะมาบอกถึง 10 เคล็ดลับ HTML/CSS ที่ช่วยให้ชีวิตของ Designers ง่ายขึ้น

1. The magic setup

เคล็ดลับนี้ จะช่วยให้คุณป้องกันการเกิดปัญหาเกี่ยวกับ Layout ที่คุณอาจพบเจอได้ใน HTML

คุณอาจจะเจอปัญหากับสิ่งเหล่านี้ ไม่ว่าจะเป็น Horizontal Sliders, Position, Margins และ Padding

จากนั้น ถ้าคุณต้องการเปลี่ยนแปลงบางอย่าง ก็ให้แก้ไขเฉพาะ Items ที่ต้องการ

บางครั้ง การใช้ “display:block” ก็อาจส่งผลเสียได้ แต่โดยส่วนใหญ่ คุณอาจจะใช้ <a> และ <span> เป็น Blocksเหมือนอย่างตัวอื่น ๆ

2. Animated lines and decorations

บ่อยครั้งที่คุณต้องการสร้าง Effects ที่น่าสนใจ เช่น การขีดเส้นใต้แบบเคลื่อนไหวได้ หรือ Background ที่ปรากฏและหายไป เป็นต้น

อย่าสร้าง Element ใหม่ คุณเพียงแค่ใช้ ::after และ ::before pseudoselectors พวกมันทำงานได้ดีสำหรับสิ่งเหล่านี้

อย่าลืมที่จะ Set ค่า Content Property: หากคุณลืมทำมัน pseudo-element ก็จะไม่ถูกแสดงผล

3. Viewport height as text size

บางครั้ง คุณอาจต้องการสร้าง Responsive Texts โดยปรับให้เหมาะกับ Desktop

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

ลองมาดูตัวอย่างกัน:

3vw บน Desktop ที่มีขนาด 1920 x 1080 = 60px ซึ่งมีขนาดใหญ่เพียงพอ

3vw บน Mobile ที่มีขนาด 320 x *** = 9px ซึ่งถือว่ามีขนาดเล็กเกินไป

ดังนั้น การใช้ ความสูงของ Viewport ถือว่ามีความเสถียรกว่ามาก ระหว่าง Mobile และ Desktop

4. HTML IMG backgrounds

 

บ่อยครั้งในการ Design Web คุณต้องการสร้าง Container ที่มีรูปภาพ Background สิ่งนี้มักทำด้วย Background-Image CSS Property แต่หลายคนก็อาจมองว่า มันแย่มาก:

• ส่งผลเสียด้าน SEO
• คุณต้องแก้ไข CSS ทุกครั้ง
• คุณไม่สามารถนำ Code กลับมาใช้ซ้ำได้

ลองมาใช้ img อย่างง่าย ๆ ใน HTML แล้วแปลงมันให้เป็น Dynamic Background!

(อย่างที่คุณเห็น Relative Positioning ที่เรา Set ค่าไว้ก่อนหน้านี้ มีประโยชน์มาก ดังนั้น คุณไม่จำเป็นต้องทำมันอีก หากคุณเคย Set ค่าไว้แล้ว)

5. The overflowing text effect

Website Animation สมัยใหม่ มักจะมีการใช้ Overflowing Text โดยมันปรากฏจากด้านล่าง

นี่คือตัวอย่างที่กำลังพูดถึง:

ลองมาดู Code ที่จำเป็นต้องใช้กัน:

แน่นอนว่า คุณสามารถใช้ Transitions ได้เช่นกัน

6. Sexy hamburger menu’s logic

สมมติว่า คุณไม่ต้องการใช้ Frameworks ใด ๆ เช่น Bootstrap ซึ่งรวมอยู่ใน Navigation ไว้แล้ว

ในการสร้างตรรกะของเมนูแฮมเบอร์เกอร์บนมือถือ มันง่ายมาก: เราต้องการ JS เพียงไม่กี่บรรทัด

CSS ขั้นต่ำที่สุด ที่เราต้องการ:

คุณสามารถสร้าง Ideas ใหม่ ๆ ขึ้นได้ เช่น การใช้ Positioning ที่แน่นอนแทน Display และทำให้ Navigation ปรากฏจากด้านข้าง มันขึ้นอยู่กับคุณ

7. Splitting both HTML and CSS

นี่เป็นเคล็ดลับเกี่ยวกับ "Workflow" ซะมากกว่า ขอแนะนำให้สร้าง CSS Files ที่แตกต่างกัน (เช่น File หนึ่งสำหรับ Desktop และอีก File หนึ่งสำหรับ Mobile) ในขณะที่กำลัง Develop และสุดท้ายให้ Merge Files เหล่านั้นเข้าด้วยกันเท่านั้น ซึ่งการ Merge ด้วยกันถือเป็นสิ่งสำคัญ เนื่องจากคุณควรจะลดจำนวนของ HTTP Requests ที่เกิดขึ้นใน Website ของคุณให้ได้มากที่สุด

หลักการเดียวกันนี้ สามารถทำได้ด้วย HTML หากคุณไม่ได้ Develop ใน SPA Environments อย่าง Gatsby คุณสามารถใช้ PHP เพื่อ Merge และต้องใช้ HTML Code บางส่วน

ตัวอย่างเช่น คุณต้องการเก็บ “/modules” Folder ที่มีทั้ง Navigation Bar, Footer เป็นต้น ไว้ใน Files ต่าง ๆ ที่แยกกัน ดังนั้น หากคุณต้องการเปลี่ยนแปลงสิ่งใดสิ่งหนึ่ง คุณไม่จำเป็นต้องแก้ไขมันในทุก ๆ Page

“ยิ่งคุณสามารถแยกส่วนต่าง ๆ ให้เล็กลงได้มากเท่าไร ผลลัพธ์ก็จะยิ่งดีขึ้นมากเท่านั้น”

8. Smooth-scrolling

บ่อยครั้งที่ Website ที่ทันสมัยและสวยงาม มักมีการเลียนแบบการ Scroll แบบเดียวกับบน Mobile รวมทั้งบน Desktop ด้วย

เชื่อว่าคงมีบ่อยครั้งที่คุณอาจมองหา "Smooth Scrolling" โดยเพียงแค่ลงท้ายด้วย Standard CSS เพื่อให้ Link Anchors ทำงานได้ Smooth ขึ้น...โดยที่ไม่ต้องเลื่อน Mouse เลย

สิ่งสำคัญอยู่ที่คำว่า "Smooth" ซึ่ง Developers ชอบเรียก "Smooth-Scrolling" ว่า "Momentum Scrolling" หรือ "Inertial Scrolling"... นั่นถือเป็นคำที่เหมาะสม

แต่ปัญหาไม่ใช่แค่การค้นหาเฉพาะ Script ที่เหมาะสมเท่านั้น คุณควรหา Script ที่ทำงานร่วมกับเทคนิคการ Develop ของคุณและมักจะเป็น Website ที่สร้างไว้ล่วงหน้า

ลองมาดูสิ่งที่จะมาช่วยคุณ:

easy-scroll.js เป็น MIT License Script ที่ทำงานได้ทุกที่และค่อนข้างดีด้วย ตอนนี้มันค่อนข้างจะหายากบน Web ดังนั้น ลองดูจากที่นี่

อันต่อมาก็คือ luxy.js ซึ่งเป็นมาตรฐานที่ยอดเยี่ยมสำหรับ Momentum Scrolling และ Parallax Effects แต่มันค่อนข้างจะหนักกว่าและบางครั้งมันก็ช้าบ้าง

ตัวเลือกที่ 3 ที่แนะนำก็คือ Locomotive ซึ่งคุณสามารถดูได้จากที่นี่

9. Use a CSS preprocessor

เลือกสิ่งที่คุณชอบมากที่สุดระหว่าง Less, Sass, SCSS ซึ่งเชื่อว่าคงมี Developers ที่มีประสบการณ์จำนวนมากที่บอกคุณว่า Less นั้นแย่ที่สุด แต่บ่อยครั้งมันก็ดีเพียงพอที่จะใช้งาน และเรียนรู้การใช้งานมันได้ในทันที

พวกมันจะช่วยคุณ ให้สามารถ Declare ได้ทั้ง Colors, Sizes เป็นต้น ได้ในครั้งเดียว นอกจากนี้มันยังเป็นทักษะที่จำเป็นใน Portfolio ของ Developers อีกด้วย

10. Start with Gatsby.js in the first place

บ่อยครั้งที่ในแวดวงการศึกษา ครูมักจะสอนสิ่งต่าง ๆ จากมุมมองของ "Vanilla"

ตัวอย่างเช่น หากพวกเขาสอนการเขียน Code ในภาษา JAVA ให้คุณ พวกเขาจะให้คุณเปิด ECLIPSE แล้ว Run Code ที่ "ไม่มีประโยชน์" อะไรมากนักเพื่อสอนพื้นฐานให้แก่คุณ ซึ่งดูจะเป็นการเสียเวลาอย่างมาก เนื่องจากคุณสามารถเรียนรู้ได้ด้วย Framework ที่ใช้ในการทำงานได้แม้กระทั่งสำหรับผู้ที่กำลังเริ่มต้น

ในกรณีนี้ ขอแนะนำให้คุณเริ่มต้นด้วย Gatsby ก่อน คุณจะต้องเขียน Code ด้วย HTML และ CSS แต่ในขณะเดียวกัน คุณจะเข้าใจพื้นฐานของ React ด้วย

สิ่งนี้จะช่วยให้คุณสามารถได้ทดลองใช้งานมากขึ้นและเข้าถึง Animation Libraries ที่ซับซ้อนได้ เช่น Framer-Motion แต่เนื่องจาก Framer-Motion ใน Gatsby นั้นแตกต่างออกไปเล็กน้อย จึงขอแนะนำให้คณลองเรียนรู้จาก Tutorial นี้

BONUS: go the hardcore way with SSR

หากคุณต้องการเรียนรู้แบบ Hardcore คุณสามารถเรียนรู้ React หรือ Vue ใน SSR แล้ว SSR คืออะไรล่ะ? มันคือ Server-Side-Rendering

เนื่องจาก Gatsby มีข้อจำกัด คุณจึงอาจต้องการใช้ประโยชน์จาก Libraries เหล่านี้อย่างเต็มศักยภาพ

การพัฒนา SSR นั้นยากกว่าและมี Learning Curve ที่ค่อนข้างชันกว่า แต่ถ้าคุณยังเป็นมือใหม่ คุณสามารถให้โอกาสนี้ได้ แต่ถ้าคุณสามารถมีความเชี่ยวชาญมันได้อย่างรวดเร็ว แสดงว่าคุณสุดยอดมาก และเตรียมตัวท่องไปใน StackOverflow

หากคุณสนใจคำแนะนำแบบ Step-by-step ขอแนะนำให้ลองดูจากที่นี่: Enable Server-Side-Rendering in React

ที่มา:  https://uxplanet.org/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

 

บทความล่าสุด

• 3 Tools ที่ใช้ในการตรวจสอบและเพิ่มประสิทธิภาพ Linux System ของคุณ
• 7 NPM Packages ที่ Web Developer ทุกคนควรรู้จักไว้
• 7 เกม สนุก ๆ ที่แนะนำให้เล่นเพื่อฝึกฝนทักษะ Coding