Jojoee - สอนทำเว็บ ออกแบบ HTML5 CSS3 Wordpress Web Design

Code

Apr 14, 2015 3 min read

Library VS Framework VS API VS Plugin

Library, Framework, Plugin, API ต่างเป็นคำที่เราได้ยินกันบ่อยมากครับ เรามาทำความเข้าใจของแต่ละชนิด และความแตกต่างกันครับ Library ปกติแต่ละ Library จะออกแบบมาเพื่อ 1 วัตถุประสงค์ครับ และมีลักษณะคือ เรามี Source code (Download ของเขามา สามารถปรับแต่งได้ตาม License) เราเรียกใช้เอง อย่างตัวอย่างจะเป็น PHPMailer ที่ใช้ในการส่งเมลครับ จะเห็นว่าเรา include ตัว library เข้ามาเอง ตั้งค่าและเรียกใช้เองครับ Framework ตัวนี้ค่อนข้างคลุมเครือครับ อาจจะเป็น Library ที่รวม / เก็บ Library หลายๆอย่าง ที่มีวัตถุประสงค์เดียวกัน ที่รวมส่วนๆหลายๆส่วนมารวมกัน ส่วนตัวผมให้น้ำหนักอันหลังสุด คือรวมส่วนต่างๆมารวมกัน และผมเพิ่มนิยามเข้าไปอีกด้วยว่า เราต้องทำตามระบบของเขา ยกตัวอย่างคือ PHP Framework ต่างๆครับไม่ว่าจะเป็น CodeIgniter, Laravel ซึ่งมีระบบ ที่รวมๆการทำงานต่างๆเบื่องต้นในการสร้าง Web…

Misc

Nathachai Thongniran

Apr 13, 2015 3 min read

แนะนำ Productivity Tool ครับ

เคยเป็นไหมครับ ทำงานมาทั้งวัน กลับมาดูผลงานที่ทำมา …ทำไมมันเหมือนทำไปนิดเดียวเอง และที่สำคัญ นึกไม่ออกด้วยว่า เราทำอะไรเยอะเกินไป เสียเวลาตรงไหนเยอะเกินไป ช้าอยู่ใย, มาใช้โปรแกรม ช่วยวิเคราะห์กันดีกว่าครับ ในบทความนี้จะแนะนำโปรแกรมที่ใช้งานบน Window เป็นหลักครับ) Type อันนี้ผมแบ่งเองว่า จะมี 2 รูปแบบ Manual อันนี้เราจะเห็นค่อนข้างเยอะก็คือค่อยๆใส่กันเอาเอง Automatic จะ track เราให้เลยครับ Manual หมวดนี้มีค่อนข้างเยอะครับ search ใน google นี่มาเต็มเลยแต่วันนี้ขอแนะนำ KanbanFlow คำว่า Manual ในที่นี้คือเราต้อง Add task เข้าไปเอง กดว่ามันเสร็จสิ้นแล้ว ด้วยตัวเองทั้งหมดครับ ยังงี้ก็กดว่าเสร็จแล้ว ทั้งที่จริงๆยังไม่เสร็จได้สิ ? ใช่ ครับ ระบบแบบนี้ขึ้นกับตัวเองทั้งหมด ตัวนี้ดีแถมฟรี ด้วยครับมาดู Features กันดีกว่า Visualize your work – คือภาพรวมของงานเรานั่นเองครับ…

HTML & CSS

Nathachai Thongniran

Apr 13, 2015 4 min read

LESS VS SASS

เมื่อเราได้รู้จักความสุดยอด LESS กันไปแล้ว (Part 1 และ Part 2) และบางคนอาจเคยได้ลอง SASS กันมาแล้วคงมีคำถามว่า ใช้ LESS หรือ SASS ดี ซึ่งก็ค่อนข้างตอบยากเล็กน้อยเพราะ Featured พื้นฐานของทั้งคู่นี่ก็พอกันเลยครับ แต่ ยังไงก็ยังคงต่างครับ ลองชมกันเลย ในบทความนี้เราจะเปรียบเทียบในด้านการใช้งานเท่านั้น ไม่นับด้านอื่นๆที่ไม่ค่อยเกี่ยวข้องเช่น SASS สร้างมาจาก Ruby, LESS สร้างมาจาก Javascript หรืออะไรเล็กๆน้อยๆ อย่าง Document ก็จะไม่นำมาเปรียบเทียบนะครับ, ซึ่งจริงๆแล้ว LESS กับ SASS นี่โดยพื้นฐานแล้วแทบจะเหมือนกันจะหมดครับ แต่จุดความแตกต่างนั้น ก็มีนัยสำคัญเลยละครับ LESS แพ้ SASS Mixin ของ LESS ไม่มีแบบ return ค่า (SASS มี) LESS ไม่มี Selector…

HTML & CSS

Nathachai Thongniran

Apr 12, 2015 5 min read

LESS – ยุคใหม่ของ CSS – 2

จากความเดิมตอนที่แล้ว LESS – ยุคใหม่ของ CSS ไม่นึกว่าจะยาวขนาดนี้ เลยยกมาเป็น Part 2 ซะเลย มาเริ่มกันเลยดีกว่าครับ Get Started #2 4. Nested rules การเขียนเป็น ชั้นๆ Featured นี้สามารถทำให้เราเขียน CSS ได้ง่ายขึ้นมากครับ (แนะนำๆ) 5. Operations ก็เป็นการคำนวณคณิตศาสตร์ทั่วๆไปครับ 6. Color functions เป็น Function ที่ LESS มีมาให้นะครับเกี่ยวกับพวกสีต่างๆ นอกจากหมวดสีแล้วยังมี อย่างอื่นด้วยนะครับ ลองเข้าไปชมที่ Official LESS documentation ได้เลยครับ 7. Namespaces ทำไมต้องมี Namespace ด้วยสร้าง mixin แบบ ธรรมดาไม่ได้หรอ ? ประโยชน์ของ Namespace คือทำให้มันเปลี่ยนกลุ่มก้อนเดียวกันครับ จะได้เข้าใจได้ง่ายว่ามันอยู่ในหมวดอะไร…

HTML & CSS

Nathachai Thongniran

Apr 12, 2015 3 min read

LESS – ยุคใหม่ของ CSS

แนะนำง่ายๆเลยนะครับว่า LESS = CSS + Function + Variable ปกติเราจะเปลี่ยนแปลง CSS ของ Website เราเช่น Theme สี, สีของขอบ, ขนาดพื้นฐานของ Element ก็ต้องใช้ Search & Replace เอาและมาดูว่า อันที่ไหนเราหลุดไป ก็มานั่งเก็บกัน ยกตัวอย่างนะครับลองดูจากรูปนี้ (มาจาก Classic CV) ดูตรงส่วน highlight สีเหลืองๆนะครับ เวลาผมจะเปลี่ยนสีเนี่ย ผมก็ต้อง replace ปกติ แล้วก็มาไล่ดูใหม่ว่าผมพลาดอะไรรึเปล่า แต่ครั้งนี้ผมตั้งไว้แล้วโดยใช้ LESS ผมแค่เปลี่ยนค่าของตัวแปรเดียวมันก็จะเปลี่ยนสีทั้งหมดให้เลยครับ CSS Preprocessor ก็คือตัวช่วยในการเขียน CSS และ compile มาเป็น CSS อีกทีนั่นเองละครับ ซึ่งก็มีหลายตัวอยู่เหมือนกัน ดูเพิ่มเติมได้ที่นี่ ครับ ตัว Popular ก็มี…

Portfolio

Nathachai Thongniran

Apr 12, 2015 1 min read

Others

งาน freelance บางส่วนที่เคยได้ทำ งานแรก เป็นงานที่เหมาะสำหรับผู้เริ่มต้นครับ ตอนนั้นเพิ่งเริ่มเขียน code ได้ไม่นาน จึงเป็นเรื่องที่ดีมากที่มีโอกาสได้ทำ ทำให้เราพัฒนาขึ้น เมื่อติดปัญหาก็มีทีมคอยให้คำปรึกษา (ทีมมีกันอยู่ 3 คน) โดย project นี้เป็นการทำ backend ให้ บริษัทนึงโดยทำ product listing, คำนวณอะไรต่างๆ โดยอีกอย่างหนึ่งที่ได้ไม่แพ้ทักษะ programming เลยก็คือการพูด และเก็บ requirement ครับ เราต้องช่วยแนะนำเขา ว่าแบบไหนดี เสนอกัน คุยกันและหาจุดลงตัวที่ดีที่สุดให้เขา บริษัทขายประกันรถยนต์ project นี้เป็นการทำ web application ที่ยากขึ้นมาหน่อยครับมีระบบมากขึ้นและทำคนเดียว ต้องออกแบบและทำเองทั้งหมด, ที่ยากที่สุดในตอนนั้นคือการออกแบบ database ข้อมูลเริ่มมีค่อนข้างเยอะ และก็มี detail ที่เยอะมาก เช่น โปรโมชั่นนี้แบบนี้ อีกโปรโมชั่นก็อีกแบบนึง การที่เราใหม่กับการออกแบบ database และเรายังไม่เข้าใจ business, ระบบประกันรถยนต์ดีพอ ทำให้การออกแบบยากขึ้นไปอีก…

Portfolio

Nathachai Thongniran

Apr 11, 2015 1 min read

LESS Boilerplate

เป็นไฟล์รวม mixins ของ LESS ที่น่าสนใจและใช้อยู่บ่อยๆ โดยจะแบ่งเป็น ชุด mixins เป็น 2 ชุดคือ 1. utilities.less – mixins ที่ใช้กันบ่อยๆเช่น clearfix หรือ CSS ที่ใช้คู่กับ Image Replacement Techniques 2. vendor-prefixes.less – mixins รวมพวก property ที่ต้องใช้ prefix ต่างๆ ครับเช่น border-radius, box-shadow โดยมีเสริมบางจุดเข้าไปเล็กน้อยเช่น ชื่อตัวแปรจะใช้ pattern ของ Bootstrap 3 และสีที่ใช้จะใช้ Google Material Color ครับ สามารถดูรายละเอียดเพิ่มเติมได้ที่ LESS Boilerplate Github Repository

WP Usage

Nathachai Thongniran

Mar 29, 2015 10 min read

แนะนำ WordPress Plugins น่าใช้ครับ

ในส่วนรายละเอียดจะเป็น ความคิดเห็นส่วนตัวของผมเองนะครับ ผิดพลาดยังไง หรือจะแนะนำให้เพิ่ม สามารถ comment ด้านล่างได้เลยครับ Mail ใช้ช่วยในการตั้งค่าในการส่ง email ครับ WP Mail SMTP ช่วยให้สามารถตั้งค่า SMTP เพื่อส่ง email User / Member ใช้จัดการ user ต่างๆ เช่นกำหนดสิทธิการเข้าถึง module เช่นเรามีพนักงาน post บทความก็เปิดให้เขาใช้ได้แค่ส่วนของ post User Role Editor Membership WP-Members Members Captcha เป็น plugins เสริม module captcha เข้าไปครับ สามารถใช้ร่วมกับ Plugin อื่นๆได้เช่น Contact Form 7 plugin Really Simple CAPTCHA eCommerce ขายของ…

Web

Nathachai Thongniran

Mar 29, 2015 3 min read

ทำไมเราต้องมี Website ?

ลองมาดูเหตุผลกันครับ 1. Online brochure / Great Advertising ปกติส่วนใหญ่ทุกบริษัทจะใช้งบประมาณป็นจำนวนมากในการ ประชาสัมพันธ์สินค้าหรือบริการของตัวเองให้เป็นที่รู้จัก ซึ่งแต่ละอย่างนั้นใช้งบประมาณสูงมากเช่นการ จัด event ตามสถานที่ต่างๆ แต่การทำเว็บไซต์ขึ้นมาจะมีค่าใช้จ่ายที่ถูกมากเมื่อเทียบกับประเภทอื่นๆ อีกทั้งยังส่งเสริมการประชาสัมพันธ์ประเภทอื่นๆได้อย่างดีอีกด้วยเช่น เวลา เราไปจัด event แล้วมีผู้คนเดินผ่านไปผ่านมา บางคน ไม่กล้าหรือไม่มีเวลาในการถามรายละเอียด จำได้แต่ว่า ชื่อบริษัทนี้ ทำธุรกิจแนวๆนี้ ก็สามารถค้นหาจากเราได้จาก Search Engine 2. Instant CREDIBILITY การมีเว็บไซต์ที่ดีทำให้ส่งเสริมความน่าเชื่อถือและภาพลักษณ์ได้ รวมถึงสามารถใส่ testimonials (คำรับรอง / คำติชมของลูกค้่า) เข้าไปเพื่อเพิ่มความน่าเชื่อถือของเราได้อีก 3. Accessible / 24/7 ลูกค้าสามารถเข้าถึงบริการเราได้ตลอด 24/7 265 วันอย่างกับมี 7-11 ส่วนตัว และยิ่งถ้าเรามีเว็บไซต์ที่ครบวงจรก็สามารถเพิ่มรายได้ และความสะดวกสบายให้กับลูกค้าและเราได้อย่างมากทีเดียวครับ ยกตัวอย่างเช่นเรามีว็บไซต์ ขาย Ebook ที่มีระบบชำระเงิน ลูกค้าก็จะสามารถชำระเงินและได้รับ Ebook…

Portfolio

Nathachai Thongniran

Mar 28, 2015 1 min read

XO Monster

XO Monster 4×4 match 3 – AI Game Competition (Inprogress) – project นี้เป็น project ขำๆ ที่พูดกันเล่นกับรุ่นน้อง แต่ทำจริง ฮาาาาาาา โดยเกมโดย default จะเป็นตาราง 4×4 เงื่อนไขการชนะคือ match 3 element ในทุกทิศทาง ทั้ง ตรง, นอน, เอียง รวมทั้งหมด 4 pattern (ลองนึกภาพ + ผสม x นะครับ) วิธีเล่นก็คือ เขียน function ของ AI โดยรับ input เป็น array ตารางทั้งหมด และเขียน function ให้มี output ออกมาเป็นตำแหน่งที่จะลง อยู่ในขั้นตอน…