July 2015 Archives

เมื่อผมไปฟังเสวนา กสทช. พบ Blogger และชาวเน็ต #DTV4All

สวัสดีครับ วันนี้ผม ในฐานะชาวเน็ตได้เข้าร่วมงาน “กสทช. พบ Blogger และชาวเน็ต : กับดิจิตอลทีวี” จัดโดย กสทช. และ ThaiPBS ณ ห้อง SkyRoom ชั้น 17 อาคารใบหยก 2 แน่นอนครับว่า เป็นการพูดคุยถึงเรื่อง Digital TV ที่ กสทช. และ MUX หลักอย่าง ThaiPBS กำลังผลักดันให้เป็นจริงให้จงได้ นอกจากตัวผมแล้ว ยังมี Blogger ชื่อดังหลายท่านร่วมงาน ไม่ว่าจะเป็นผู้ก่อตั้ง Blognone อย่าง @lewcpe กับ @markpeak, @kafaak, คุณชายอดัม (หม่อมราชวงศ์เฉลิมชาตรี ยุคล) รวมทั้งนักข่าวหลายแห่งทั้ง Nation, สทท. อีกด้วยครับ รวม Blogger ทุกวงการมาในงานนี้ #DTV4ALL #ยามเฝ้าจอ pic.twitter.com/huxrxemyVg…

26 July 2015

what happen in my life No comments ราชศักดิ์ รักษ์กำเนิด

สร้าง Icon font ของตัวเองได้ง่ายๆ ด้วย IconMoon App

หนึ่งในองค์ประกอบหลักที่สำคัญของเว็บไซต์ที่จะขาดไปเสียไม่ได้เลยคือ icon เหตุผลหลักก็เหมือนที่มีมีคนเคยกล่าวไว้ว่า “หนึ่งภาพมีค่ายิ่งกว่าร้อยคำพูด” icon ถึงแม้จะไม่ใช่รูปภาพเสียทีเดียว แต่ด้วยความที่เป็นสื่อกลางที่คนไม่ว่าจะชาติภาษาไหนก็เข้าใจได้ง่าย หลายท่านคงอาจเคยใช้งาน icon ไม่ว่าจะเป็นรูปภาพ gif, png svg vector หรือแม้แต่ icon font ที่เป็นที่นิยมอย่างมากในปัจจุบัน (หากสงสัยว่าแล้ว icon font คืออัลไล ลองอ่านบทความของ designil นี้ดูครับ อธิบายได้ดีทีเดียว สรุปสั้นๆ คือมันเป็นฟอนต์ฟอนต์หนึ่งนี่แหละครับ แต่แทนที่จะเก็บแบบตัวอักษรก็เก็บ icon ไว้แทน ถ้านึกไม่ออกก็นึกถึงฟอนต์ Wingdings ที่มี icon แบบนี้ : ( ÿ ครับ) เพราะทั้งสะดวก ใช้งานง่าย ที่สำคัญคือมีขนาดเล็กและสวยงามดี ไม่มีอาการแตกเมื่อขยายใหญ่เข้า แล้วถ้ามี logo หรือรูป icon ที่อยากทำเป็น icon font เองล่ะจะทำอย่างไร? IconMoon Apps คือคำตอบ…

9 July 2015

ทำขอบเฉียงด้วย CSS3 Gradient

ตามที่สัญญากันไว้ครับ หลายท่านอาจเคยเห็นบางเว็บไซต์ทำขอบเฉียงๆ กันมาบ้างแล้ว อาจจะใช้คุณสมบัติของ CSS Border ทำให้ขอบบางส่วนใส หรือการดัดด้วย transform: skew, SVG element เป็นต้น แต่ด้วยข้อเสียบางอย่างของวิธีการดังกล่าว เช่น CSS Border จำเป็นต้องรู้ขนาดตายตัวเป็น pixel หรือหน่วยที่สัมพันธ์เหมือนกัน (em, rem, vh, vw เป็นต้น) หรือ transform: skew ก็ต้องดัด element นั้นจริงๆ หากต้องใส่ใน element อื่นต้องคำนวนระยะมุมด้วย เป็นต้น หลังจากที่ค้นหาข้อมูลอยู่นาน ผมก็เจอ Fiddle อันหนึ่งที่ใช้การทำขอบเฉียงด้วย CSS Gradient ซึ่งเป็นอะไรที่ถูกใจแจ้จริงๆ ก็เลยนำมาประยุกต์ใช้ครับ ลองดูตัวอย่างนี้ดูครับ มันทำได้อย่างไรกันนี่!? เทคนิค linear gradient ที่เราจะใช้ก็คือการใส่พื้นหลังแบบไล่สีง่ายๆ นี่แหละครับ ตาม syntax ของ W3C linear-gradient() ซึ่งเป็นมาตรฐานที่สรุปแน่นอนแล้ว จะสามารถใช้คำสั่ง…

6 July 2015

css tip-and-technic No comments ราชศักดิ์ รักษ์กำเนิด

(Lite) Portfolio ผมก็มีกับเค้าแล้วนะ!

สวัสดีครับท่านผู้อ่าน หลังจากที่ผมหายไปนานมาก ส่วนใหญ่ก็ไปส่องสาวอยู่ใน Facebook เอ้ย! เรียนที่ภาควิชา CPE มาครบปีกับเป็นมือปืนรับเขียน Code ให้พี่ๆ ที่ภาควิชา (ใช่ครับ ผมเริ่มรับงานมาทำแล้วครับ แต่ยังเป็นงานเล็กๆ เงินไม่มาก เอาไว้เป็นประสบการณ์เท่านั้นเองครับ) ในที่สุดหลังจากที่ผมดองแล้วดองอีก เขียนแล้วก็ลบอีก ไม่เคยได้เสร็จกับเค้าสักที ในที่สุดก็ทำสรุปผลงานของผมเสร็จแล้วครับ (ปรบมือ!) ที่บอกว่าเป็น Lite ก็เพราะว่าเป็นแค่หน้ารวบรวมผลงานกับการแข่งขันแบบสรุปจบหน้าเดียวตามยุคสมัยครับ ตัวเต็มจะมีแสดงผลงาน ประวัติผม และข้อมูลอื่นๆ ครบครันกว่านี้ เพจนี้ผมใช้ Materialize เป็นโครงหลักครับ เพราะตัวมันเองมีน้ำหนักเบากว่า Bootstrap แต่ยังมีคุณสมบัติที่จำเป็นอยู่ครบครันเลยทีเดียว รวมถึงความสามารถในการทำ responsive design สำคัญเลยคือมันนำแนวทางจาก Google material desing มาค่อนข้างครบ การออกแบบจึงไม่ค่อยสาหัสสำหรับผมที่หัวศิลป์ไม่ค่อยมีครับ เพราะตัว material design มันสวยงามแบบเรขาคณิตของมันอยู่แล้ว การทุ่มเทจึงเน้นไปที่ทำให้ตัวเองไม่ขี้เกียจ เอ้ย! การเขียน CSS กับ Javascript ในการแสดงผลงานและตกแต่งมากกว่าครับ แน่นอนครับว่าแม้จะมีหลายอย่างที่มี library…

5 July 2015

web update 1 comment ราชศักดิ์ รักษ์กำเนิด