NES-style CSS Framework แนวเกมส์ Famicom

NES-style CSS Framework เล็กๆเจ้านี้คิดอยู่ซักพัก ว่าจะเอามาแชร์ให้เพื่อนๆเห็นดีไหม เพราะนอกจากจะไม่มี Document แล้วตัวงานยังเป็นภาษาญี่ปุ่นอีก(น่าจะนะครับ)

NES-style CSS Framework เล็กๆเจ้านี้คิดอยู่ซักพัก ว่าจะเอามาแชร์ให้เพื่อนๆเห็นดีไหม เพราะนอกจากจะไม่มี Document แล้วตัวงานยังเป็นภาษาญี่ปุ่นอีก(น่าจะนะครับ)

แต่ด้วยหน้าตาแล้วคิดถึงวันวานในวัยเด็ก สมัยเล่นเกมส์ Famicom เลยหยิบมาฝากให้หายคิดถึงกัน เพราะมันเป็นงาน Design แนว 8Bit ที่แสนน่ารัก มีครบทั้ง Form ทั้ง Container และมี Balloons น่ารักๆแบบ Tooltip อีกด้วย

วิธีใช้งานพอเอา CSS ไปวางแล้วก็แค่ Click ขวาแล้ว Copy จากไอ้เจ้าหน้าตัวอย่างนี่แหละไปวางครับ ก็สามารถใช้งานได้แล้ว

ตัว Design แนวนี้เอาไปทำหน้าสนุกๆอย่างกิจกรรม หรือเล่นเกมส์อะไรนี่สดใสดีนะครับ หรือใครจะเข้าไปดูวิธีคิดในการเขียน CSS ของเค้าก็ได้ เพราะเค้าใช้ SCSS เป็นหลักอยู่ครับ

Link :: https://bcrikko.github.io/NES.css/

เราจะเรียกใช้ CSS ได้อย่างไร

ตามปรกติแล้ว หนทางที่เราจะนำเข้า CSS มาสู่หน้าเพจของเรานั้นหลักๆพื้นฐานมีอยู่ 3 วิธีด้วยกันครับ เพื่อให้มันแสดงผลกับงานของเรา เราลองมาดูว่าแต่ละแบบมีวิธีอย่างไรและทำงานอย่างไรครับ

ตามปรกติแล้ว หนทางที่เราจะนำเข้า CSS มาสู่หน้าเพจของเรานั้นหลักๆพื้นฐานมีอยู่ 3 วิธีด้วยกันครับ เพื่อให้มันแสดงผลกับงานของเรา เราลองมาดูว่าแต่ละแบบมีวิธีอย่างไรและทำงานอย่างไรครับ

เริ่มต้นกันด้วย 3 วิธีที่ว่าไปเมื่อกี้มันมีอะไรกันบ้างก่อน

1. Inline style
2. Embedded style
3. External style

มาเริ่มกันที่วิธีแรกแบบ Inline กันก่อนนะครับ

Inline Style เป็นการเขียนแบบตรงไปตรงมา ระบุเจาจะงไปที่ตัว HTML Element กันเลยแบบว่า เขียนกันในส่วนของ Element เลยนั้นเอง การเขียนแบบนี้ดีต่อการเจาะจง แบบตัวใดตัวหนึ่ง ที่จะไม่ต้องการแสดงค่านั้นบ่อยๆ หรือมีการบังคับมากกว่าตัวอื่นๆ แต่วิธีแบบนี้จะยากต่อการแก้ไข และจะเป็นยากต่อการ Cahed แบบ File Static แต่ก็เป็นวิธีที่นิยมในการเขียนกับ Email อยู่

หน้าตาของ Code จะออกมาเป็นประมาณนี้

<h1 style="color: red; font-size: 12em; margin-top: 15px;">
    Why Inline CSS So Bad !!!!!!
</h1>
<div class="content">
    Inline style not attribute but is so cool!! in under 2000
</div>

กับอีกรูปแบบหนึ่งก็คือแบบ Embedded ซึ่งเป็นการฝัง Code CSS ลงไปบน HTML เลย โดยใส่ไว้ในส่วนของ head วิธีนี้ดูแลแก้ไขง่ายขึ้น เพราะมีการนำ Class, id และ element ต่างๆเข้ามาใช้ แต่ก็ยังไม่สะดวกในใช้ซ้ำ และการทำ Cache อยู่

หน้าตาของ Code จะออกมาเป็นประมาณนี้

<head>
  <title>Embedded Style</title>
  <style>
    h1 {
      color: red;
      font-size: 12em;
      margin-top: 15px;
    }
  </style>
</head>

ส่วนแบบที่ 3 จะเป็นแบบ External ที่ง่ายต่อการจัดการและแก้ไขมากกว่า โดย Code จะถูกแยกออกเป็นอีกไฟล์นามสกุล .css ไปเลย แล้วค่อยดึงกลับมาใช้ใน html ด้วยคำสั่ง Link แบบด้านล่างนี้ครับ

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

ในปัจจุบันเรานิยมเขียนกันในรูปแบบ External เป็นหลัก แต่ก็ยังมีอีกหลายๆครั้งที่มีการผสมผสานกันระหว่างหลายๆรูปแบบ แต่มันจะมีสิ่งหนึ่งที่เกี่ยวข้องหากเรามีการเขียน Code ในแบบต่างๆมากกว่า 1 ก็คือเรื่องของ Order หรือการให้ความสำคัญของมันครับ

ตามปรกติแล้ว CSS มันจะย่อมาจากคำว่า Cascading Style Sheets ซึ่งคำว่า cascade ก็น่าจะเป็นความหมายแบบเดียวกับการ “เรียงซ้อน” ไปเรื่อยๆโดยให้ลำดับความสำคัญตามลักษณะดังนี้

1. Inline Style มาก่อนเสมอ หมายถึงว่าถ้าคุณมี Code CSS ที่กำหนดค่าในจุดนี้ 3 ที่ มันจะแสดงจากจุดที่เป็น inline ก่อนนั้นเอง

2. External และ Embedded อันนี้จะมาเป็นลำดับ 2 โดยมองจากในส่วนของ Head Element ด้วยนะครับ และให้ความสำคัญจากอันบนสุดก่อนเสมอ อย่างที่เราจะเห็นว่า เวลาเรียกใช้ css จาก library หรือ framework นั้นเราต้องเอาตัวสำคัญขึ้นก่อนเช่น bootstrap ขึ้นก่อนนั้นแหละ

3. Browser Default อันนี้พูดถึงไปเมื่อวันก่อน CSS ของ Browser จะถูกกำหนดมาให้แสดงผลเป็นลำดับสุดท้ายเลย ถ้าใครไม่ได้ Reset ไว้มันก็จะยังคงมีผลอยู่นั้นเอง แต่จะออกมาเป็นลำดับสุดท้าย สิ่งที่เราเขียนไว้จะมีผลมากกกว่า

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

ChatBot เครื่องมือที่หลายๆเว็บเลือกใช้

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

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

Chat Bot คืออะไร 

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


งั้นหมายความว่า เจ้า Chat Bot นี่มันต้องฉลาดมาๆเลย แบบถามอะไรก็ตอบได้หมดแบบนั้นเลยรึเปล่า อันนี้ต้องบอกว่า ไม่ใช่แบบนั้นซะทีเดียวนะครับ เพราะว่า Chat Bot เป็นเพียง Software ที่เราเขียนขึ้นมาและ วางกฏ วางหลักการตอบคำถาม วางการรับคำถามเข้ามาไว้ก่อนแล้วนั้นเอง แบบนี้เราเรียกกันว่า Based on rules ครับ  

แต่อันที่จริง มันก็จะมีอีกแบบหนึ่งนะ ที่เป็นแนว AI หรือ Artificial Intelligence ที่มาแนวปัญญาประดิษฐ์ไปเลย คือใช้ความสามารถเรื่องของ Machine Learning เข้ามาช่วย เพื่อให้ ChatBot เข้าใจการสื่อสารของเรา ข้อความของเรา มันจะต้องบวกเข้ากับพลังทางด้าน Natural Language Processing (NLP) และ Natural Language Understanding (NLU) เพื่อให้สื่อสารได้ดีขึ้น แบบนี้ก็จะไม่ต้องขึ้นอยู่กับกฏของการตั้งไว้เท่าไหร่แล้ว

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

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

ในโลกธุรกิจใหญ่ๆ มีหลายเจ้าที่ลงมาสร้างงาน Chat Bot ไว้ให้คนนำไปศึกษา ไปใช้งานกันเยอะเลย อย่างเช่นMany Chat, ChatFuel, Botsify, SnatchBot, Gobot, InstaBot และเจ้าอื่นๆอีกเพียบ

ทีนี้ในฝากฝั่ง Opensource หรือที่ให้เราใช้งานกันได้ฟรี ไม่คิดเงินก็เห็นมี โครงการเกี่ยวกับ Chat Bot เยอะแยะเต็มไปหมดเหมือนกัน เช่น Microsoft Bot Framework, Facebook Chat Bot, BotPress, Tensorflow

หรือใครจะมองเป็นตัวภาษาที่ถนัดก็ได้นะ มีทั้ง PHP อย่าง BotMan, Program-O, Dialogflow หรือจะเป็น JavaScript(Node.js) ก็มี SuperScriptjs, BotUI, Wit.ai, Dialogflow, Pandorabots

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

ขอบคุณรูปภาพจาก
https://unsplash.com/photos/Sot0f3hQQ4Y