Tutorials

Articles

Web Page Speed: สรุป วิธีการ Optimise รูปภาพและวีดิโอให้โหลดเร็ว

บทความนี้เราก็จะมาคุยกันเรื่องวิธีการ Optimise รูปภาพและวีดิโอ เช่น การ บีบอัดรูป, การเปลี่ยนนามสกุลไฟล์, การทำ Lazyload ฯลฯ ซึ่งทำให้บทความ Web Page Speed ตอนนี้เป็นหัวข้อที่สำคัญมาก ๆ ไม่แพ้เรื่องอื่น ๆ


Web Page Speed: ตำราสรุป ทำยังไงให้เว็บเราโหลดเร็วสุด ๆ

ในปัจจุบันการสร้างเว็บไซต์ใหม่กลายเป็นเรื่องง่ายไปแล้ว ไม่ว่าจะใช้เครื่องมือฟรี หรือเครื่องมือเสียเงิน ไม่ว่าจะเขียนโค้ดเป็นหรือไม่ ไม่ว่าจะอยากได้บลอคหรือ E-Commerce ก็สามารถสร้างเว็บไซต์เองได้ แต่สิ่งสำคัญที่หลาย ๆ คนมองข้ามไป คือ ทำยังไงให้เว็บไซต์เร็ว? เรื่องของ การเพิ่มความเร็วในการโหลดเว็บไซต์ อาจจะดูไม่สำคัญ แต่ตอนนี้กลายเป็นเรื่องใหญ่แล้ว เพราะ Google นำความเร็วเว็บไซต์มาจัดอันดับ Search..

Figma Design Tool for Teamwork สายดีไซน์ต้องลอง!

Figma เว็บดีไซน์ที่เอาใจคนทำงานดีไซน์เป็นทีม สามารถแชร์งานออนไลน์ แก้ไขไฟล์แบบเรียลไทม์ แปลงเป็นโค้ด CSS ให้เราได้เลย เคยไหมประสบปัญหา เพื่อนไม่อัพไฟล์ แล้วต้องทำงานต่อจากเพื่อน หรือไฟล์เปิดมาฟ้อนต์กับภาพไม่มี หึหึ Figma จะทำให้คุณหมดปัญหานี้!! ถ้าให้สรุปแล้วว่า Figma คืออะไร คำตอบคือ Figma นั้นเป็น..

โฮสต์เว็บที่ไหนดี: เปรียบเทียบ Shared Hosting vs Dedicated Hosting vs Cloud Hosting

มีคนเข้ามาสอบถามแอดมินอยู่ตลอดว่า “จะใช้บริการ Hosting เว็บไซต์ของเจ้าไหนดี” ซึ่งหลังจากที่แอดได้ลองใช้มาหลายรูปแบบในเวลาหลายปีที่ผ่านมา ได้เห็นข้อดี-ข้อเสียของแต่ละแบบ ก็เลยเอามาสรุปเขียนเป็นบทความนี้ให้อ่านกันครับ ในบทความนี้เราจะเจาะลึกข้อดี – ข้อเสียของ Shared Hosting VS Dedicated Hosting (VPS) VS Cloud Hosting ที่กำลังมาแรงในขณะนี้


Serverless คืออะไร? มารู้จักการพัฒนาระบบเว็บแบบใหม่ ราคาถูก แถมไม่ล่มง่าย ๆ

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


วิธีการใช้ Variable Fonts ใน Photoshop CC 2018

สอนการใช้งาน Variable fonts ใน Photoshop CC 2018 ฟีเจอร์ใหม่ที่นำเสนอการใช้งานฟอนต์ที่มีคุณสมบัติที่ยืดหดได้ภายในตัวเดียว มีวิดีโอพร้อมภาพประกอบ นอกจากนี้ยังมีคำอธิบายตัว Properties โดยละเอียดในการใช้งานแบบภาษาไทย เข้าใจง่ายที่ Designil


30 Seconds of CSS: แจกฟรี CSS ที่ต้องใช้บ่อย โค้ดสั้น เข้าใจได้ง่าย ๆ ใน 30 วิ

วันนี้ใน Github มีคนปล่อยของดี เป็นชุดโค้ด CSS ที่เราต้องใช้บ่อย ๆ เหมาะมากกับ Frontend Developer / Designer หรือคนทำเว็บทุกคนควรมีเก็บไว้เป็นอย่างยิ่ง เช่น โค้ด CSS จัดกลางแนวตั้งแนวนอน, โค้ดทำตัวหนังสือจม, โค้ดวาดสามเหลี่ยม, โค้ด Clearfix แบบไม่รก, โค้ดเงาขาวเวลาเลื่อนอ่าน ฯลฯ


วิธีการ Embed วีดิโอ Youtube ลงในเว็บไซต์ และทำให้ Responsive ด้วย CSS ง่าย ๆ

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


Design System คืออะไร? เล่าเคสการทำงานจริงพร้อมตัวอย่างประกอบ

เล่าเรื่องของ Design System ว่าสิ่งนี้คืออะไร? รวมไปถึงข้อดีของการมีระบบแบบแผนในการออกแบบนั้นช่วยเหลือทีมเราได้อย่างไร ? ปูความรู้ให้กับผู้เริ่มต้นศึกษาไปพร้อม ๆ กันกับเรา และยังมีตัวอย่างจากแบรนด์ดังหลายเจ้าที่ทำออกมาน่าประทับใจเลยค่ะ


5 เหตุผล ทำไมคุณควรเริ่มเปิดร้านออนไลน์ด้วย WooCommerce

แนะนำทางเลือกหนึ่งในการทำเว็บไซต์ร้านค้าออนไลน์ของตัวเอง โดยใช้เครื่องมือฟรี 100% ชื่อว่า WooCommerce นั่นเองครับ มาดูไปพร้อม ๆ กันว่าข้อดีของการใช้ WooCommerce มีอะไรบ้าง