แนะนำ

แนะนำ

ประสบการณ์ทำเว็บไซต์ให้ปลอดภัยด้วย HTTPS ไม่ยากอย่างที่คิด

สวัสดีครับบทความนี้จะเปลี่ยนไปแนวทางด้าน Infrastructure กันบ้าง ปัญหาที่ทำให้เกิดบทความนี้คือการประสบพบเจอเรื่อง security ของเว็บที่เพิ่งจะโดนสอยจน Admin Share Hosting ที่ผมใช้บริการรายปีแจ้งมาว่าเว็บนี้โดนเจาะซึ่งการที่เป็น share hosting จึงจะทำให้เว็บคนคนอื่นโดนรบกวนไปด้วยเขาจึง suspended account ของผม เครียดสิครับ เพราะมันไม่ใช่แค่ครั้งแรกที่เกิดปัญหาลักษณะนี้จำได้น่าจะสัก 4-5 ครั้งแล้วตั้งแต่ผมเช่า share hosting นี้น่าจะเกือบ 3 ปีได้

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

ถ้ามองด้านคนที่จะมาโจมตี และพยายามเจาะระบบ แน่นอนเว็บ http จะโดนเพ่งเร่งก่อนเว็บ https อย่างแน่นอน นึ่งเฉยไม่ได้แล้วหาวิธีการทำอย่างไรให้เว็บไซต์จากเดิมที่เป็น http กลายไปเป็น https ได้และมองหาที่ฟรี ก็ลองค้นหาไปเจอบทความของ www.designil.com “สอนวิธีทำ HTTPS ง่าย ๆ ฟรี ๆ ทำให้เว็บไซต์เราโหลดเร็ว ปลอดภัย SEO แรง” ต้องขอขอบคุณบทความนี้มากที่สอนการเปลี่ยน http ไปเป็น https และดีมากขึ้นไปอีกเพราะสอนวิธีการกับเว็บ CMS อย่าง WordPress นี้ด้วย แบบไม่ยากอย่างที่คิด

Cloudflare เป็นบริการที่เรียกว่า Content Delivery Network (CDN) และมีบริการทำ https ด้วย อ้าวแล้วทำไมมันต้องฟรีด้วย ใน version จ่ายเงิน ก็มีครับแต่ผมก็ไม่รู้ว่าแตกต่างกับ version free อย่างไร ในด้านการให้บริการอย่างไรบ้างคงต้องรอบทความที่อธิบายรายละเอียดเรื่องนี้ดี ๆ กันต่อไป

ก็ขอให้บทความนี้เก็บขั้นตอนการแก้ปัญหาเรื่อง account suspended พร้อมทำ https ไว้ที่นี่เลยแล้วกัน

เพราะต้องทำเวลาสักพักในการรอให้ cloundflair ตรวจสอบจัดการเรื่อง https ก็เลยมาจัดการเรื่องนี้ก่อน

  1. register clondflair ก่อน Login เข้าไป +Add Site
  2. Cloudflare จะทำการแสกนโดเมนเรา ต่อไปก็เลือก Coundflair Free Plan
  3. จากนั้นไปเปลี่ยน DNS Name Server ที่เว็บที่ไปจด Domain (อาจจะใช้เวลาสักครู่..) กรอกเปลี่ยนให้เป็นตามนี้
  4. เข้าไปหน้า Cloundflair Console Panel เลือกเมนู Crypto เปลี่ยนให้เป็นตามนี้
  5. เนื่องจาก poolsawat.com เป็นเว็บที่ใช้ wordpress ต้องติดตั้ง plugin 2 ตัวเพิ่มเข้าในเว็บ
    1. ติดตั้ง Plugin
      1. Cloudflare – ติดตั้งแล้วเปิดใช้งาน จะต้อง Log In ด้วย Username / API Key ของ Cloudflare ก่อนครับ (สามารถกดตามในหน้าล็อกอินเพื่อเอา API Key ได้เลย)
      2. Cloudflare Flexible SSL – ตัวนี้ติดตั้งแล้วเปิดไว้เฉย ๆ ไม่ต้องตั้งค่าครับ
    2. เปลี่ยน http:// ในเมนู Settings > General ช่อง WordPress Address กับ Site Address เป็น https://
  6. ทำการแจ้ง admin ที่ดูแล hosting ให้ปลดล๊อก account ของเราซะก่อนเพื่อที่จะเข้าไปดำเนินการ backup ของมูลเว็บเราไว้ก่อน
  7. เข้า direct admin เพื่อไป backup file และก็ database
  8. ต้อง restore theme ให้เป็น default และ uninstall plugin ออกจากเว็บก่อน
  9. ติดตั้ง wordpress เวอชั่นล่าสุด
  10. import database เข้า และ copy uploads folder ไปที่ hosting
  11. ทดสอบเข้าใช้งาน

ขั้นตอนทั้งหมดอาจจะลืมหรือขาดขั้นตอนไหนไปก็เพราะตอนที่แก้ปัญหาไม่ได้นึกว่าจะมาเขียนบบทความนี้ แต่เมื่อแก้ปัญหาสำเร็จก็อยากจะแบ่งปันประสบการณ์เรื่องการเปลี่ยนเว็บให้ไปเป็น https ไม่ได้ยากอย่างที่คิด

Semantic UI สุดยอด CSS Framework ในใจผม

เนื่องจากได้จับงานทางสายพัฒนาเว็บไซต์มาได้สักระยะ ได้รู้จัก CSS Framework มาก็หลายตัว ทั้ง Bootstrap,UIKit,Foundation เหล่านี้ก็ได้ทดลองใช้มาหมดแล้ว (ฺBootstrap น่าจะได้ลองใช้งานเยอะสุด) ผมเองก็เป็นคนชอบทดลองใช้งานสิ่งที่แปลกใหม่ และได้มีโอกาสได้พัฒนาเว็บไซต์ที่เกี่ยวการทำระบบจัดการ Feed เนื้อหาข้อมูลคล้ายกับการ โพสต์ คอมเม้น ไลค์ เหมือนของ Facebook แต่ใช้งานภายในองค์กรและหน่วยงาน

เลยเริ่มจากการค้นหาเครื่องมือที่มองว่าตอบโจทย์ได้โดยไม่ต้องพึ่งพา template สำเร็จรูป ลองไปจนเจอ Semantic UI นี้ เวลาผมจะเลือกมาใช้งานก็จะมองเรื่อง Manual Document ก่อน และ ตัวอย่าง Component ต่าง ๆ ที่มีมาให้ลองเล่นก่อนการตัดสิ้นใจเลือกมาใช้กับงาน

สิ่งที่ Semantic UI ทำมาเพื่อรองรับการทำงานร่วมกับ Framework ตัวอื่น ๆ ได้ ตัวอย่างเช่น

  • React
  • Meteor
  • Ember
  • AngularJs

ดูตัวอย่างได้จาก http://semantic-ui.com/introduction/integrations.html

มีตัวอย่างหน้า Template Layout ให้พอเอาไปเป็นแนวทางในการพัฒนาเว็บของเราได้

ดูตัวอย่างได้จาก http://semantic-ui.com/usage/layout.html

เรื่อง component ต่าง ๆ ผมมองมามันเยอะมาก เยอะกว่า Component ของ Bootstrap ซะด้วยซ้ำ

ตัวอย่าง Component ที่แตกต่าง คือที่ Semantic UI มี แต่ Bootstrap ไม่มี

  • Divider เป็น Element ที่คล้าย Tag <hr/> มันก็คือเส้นขั้นหน้า แทรกได้ทัง Text และ Icon บริเวณกลางเส้นมีทั้งแนวตั้ง และแนวนอน ดูตัวอย่างได้จาก http://semantic-ui.com/elements/divider.html

SemanticUI-2 SemanticUI-1

  • Step เป็น Component ที่เหมาะกับการเอาไปทำระบบ Order ,Shopping Cart เพราะตัวของมันเองมีหน้าตาดูเป็นขั้นตอน (Step) ตามชื่อของมัน ดูตัวอย่างได้จาก http://semantic-ui.com/elements/step.html

SemanticUI-3

  • Card เป็น View Component อย่างหนึ่งผมว่ามันคล้าย Panel ของ Bootstrap นะ แต่มองว่ามันดีกว่า เพราะมันปรับแต่งได้เยอะกว่า ดูตัวอย่างได้จาก http://semantic-ui.com/views/card.html

SemanticUI-4SemanticUI-5

  • Comment เป็น View Component ที่ดูว่าเหมาะมากกับการทำเว็บแนว Webboard ดูตัวอย่างได้จาก http://semantic-ui.com/views/comment.html

SemanticUI-6

  • Feed มองว่ามันคล้ายกับ Comment แตกต่างที่ว่า Content จะแทรกภาพเข้าไปได้แต่ถ้าเรื่องการเอาไปใช้งานใช้ควบคู่กันน่าจะเหมาะสมกว่า การ Post Content Data ก็เอา Feed ไปประยุกต์ใช้ ส่วนการทำ Comment ตอบโต้ ก็เอา Comment เข้าไปใช้จะดูดีเลยทีเดียว ดูตัวอย่างได้จาก http://semantic-ui.com/views/feed.html

SemanticUI-7

    • Dropdown ที่ครบถ้วนกระบวนความเรื่องการทำหน้าที่ของตัวเลือก ดูตัวอย่างได้ http://semantic-ui.com/modules/dropdown.html
      • แบบทั่วไป (selection) Option Text ธรรมดาSemanticUI-13
      • แบบทั่วไป (selection) แต่เพิ่มการแทรก icon image เข้าไปให้ Option ตัวเลือกได้SemanticUI-12
      • แบบ (search selection) สามารถค้นหาด้วยการกรอกตัวอักษรเพื่อกรองตัวเลือกSemanticUI-11
      • แบบเลือกได้มากกว่า 1 ตัวเลือก (Mutiple selection) เป็นการแสดง Option ธรรมดาแต่มีการเลือกได้มากกว่า 1 ตัวเลือกSemanticUI-10
      • แบบเลือกได้มากกว่า 1 ตัวเลือก แต่สามารถกรองตัวเลือกได้ (Mutiple Search Selection) เลือกได้มากกว่า 1 ตัวเลือกแถมยังสามรถกรองตัวเลือกได้อีกด้วยSemanticUI-9
      • แบบเลือกผ่านเมนู (Search In-Menu) ตัวเลือกที่อยู่ใน Dropdown Menu SemanticUI-8




  • Rating เป็น Mudule Component อีกตัวที่น่าสนใจเอาไปประยุกต์ใช้กับแอพที่ทำการ Review สินค้าแล้วทำการให้คะแนนเป็นลำดับขั้น  ดูตัวอย่างได้ http://semantic-ui.com/modules/rating.html
    SemanticUI-14
  • Search เป็น Component สำหรับการค้นหาข้อมูลการทำงานจะทำได้ 2 แบบคือ static data คือข้อมูลที่ถูก query มารอการเรียกใช้งานแล้ว กับ query real time data คือหลังจากการค้นหาระบบจะทำการค้นจากระบบหลังบ้านแล้วส่งผลลัพธ์กลับมาให้ ดูตัวอย่างได้จาก http://semantic-ui.com/modules/search.html
    SemanticUI-15
  • Sidebar เป็นอีกตัวที่น่าสนใจมากเนื่องจากหน้าจอบนมือถือมีพื้นที่ใช้สอยน้อย การที่จะลดพื้นที่ส่วนที่ไม่ได้ใช้งานบ่อยได้ก็ถือว่าจำเป็นอย่างมาก Sidebar นี้ก็สามารถช่วยแก้ปัญหานี้ได้เป็นอย่างดีเลยที่เดียว เพราะการทำงานของ Sidebar นี้ จะต้องมีการสั่งการตัว Sidebar มันจึงจะแสดงให้เห็น เหมาะมากสำหรับการใช้ทำเป็นเมนูของระบบ ดูตัวอย่างได้จาก http://semantic-ui.com/modules/sidebar.html
    SemanticUI-16
  • Transition เป็นตัวที่เอาไว้สำหรับปรับแต่งแอนนิเมชั่น การเคลื่อนไหวมีให้เลือกหลายแบบมาก เช่น scale,fade,horizontal flip,fly right,swing right,browse right ฯลฯ เป็นต้น ดูตัวอย่างได้จาก http://semantic-ui.com/modules/transition.html
  • Form Validation เป็น Component ใหญ่อีกตัวที่ถือว่าสำคัญมากกับการทำแอพบนเว็บไซต์ที่ต้องทำงานเกี่ยวกับ Form เพราะ Component นี้จะเอามาช่วย validate ค่าของ element input บน form ของเราก่อนที่จะส่งค่าไปที่ controller หลังบ้านทำงานต่อไป ช่วยลดการทำงานส่วนโค๊ดหลังบ้านได้อย่างมากเพราะสามารถตั้งกฏการดักจับข้อผิดพลาดได้มากกมายหลากหลายแบบมาก เช่น ค่าว่าง(Empty),email,regExpresion,จุดทศนิยม(Decimal) ฯลฯ อื่น ๆ อีกเยอะมาก ดูตัวอย่างได้จาก http://semantic-ui.com/behaviors/form.htmlSemanticUI-17
  • Visibility เป็น Behaviors Component ที่สุดยอดเลย ทำเว็บไซต์ที่ต้องมีการโหลดข้อมูลปริมาณมาก ๆ อีกทั้งยังจะมีรูปภาพมากมายอีกเป็นปัญหาอย่างมากเวลาโหลดหน้าเว็บไซต์จะนาน จนอาจจะค้างไปเลย Visibility ช่วยอะไรได้บ้างละ ดูตัวอย่างได้จาก http://semantic-ui.com/behaviors/visibility.html
    • Infinite Scroll จะจัดการเรื่องการใช้งานร่วมกับ Scrollbar เราสามรถดักจับ event ขณะ Scroll Mouse ได้ เอาไปประยุกต์กับการจัดการเนื้อหาได้เป็นอย่างดีเลย
    • Lazy Loading Images จะช่วยจัดการกับ image ได้ระบบจะยังไม่แสดงรูปภาพที่ผู้ใช้งานยังไม่เห็น มันจะยังไม่เรียก dom image มาแสดงทำให้ปัญหาการโหลดรูปภาพหมดไป เป็นการทำงานของการจัดการ HTML Dom ร่วมกับ Cache Browser
    • Sticky Headers ช่วยเลือก Fixed Layout Element บางตัวที่ต้องการให้แสดงตลอดเวลาหลังจากทำการเลื่อนเมาส์ ขึ้นลงได้

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




แนะนำช่องทางในการติดตามงาน Event ต่างๆ ที่ฮอตฮิตในไทย และต่างประเทศ

 

วันนี้ขอแนะนำช่องทางในการติดตามเหตุการณ์กิจกรรมต่างๆ ในไทยและต่างประเทศซึ่งแต่ละเว็บจะมีความคล้ายกันคือต้องจองตั๋วล่วงหน้า บางเว็บจะมีทั้งตั๋วฟรี และเสียค่าใช้จ่ายแล้วแต่ละกิจกรรม

EventBrite ผู้ให้บริการขายตั๋วออนไลน์ในสหรัฐฯซึ่ง ประกาศว่าสามารถทำยอดขายตั๋วเข้างานอีเวนต์มากกว่า 20 ล้านใบจาก 458,207 งานในปี 2011 ที่ผ่านมา คิดเป็นเงินมูลค่ามากกว่า 400 ล้านเหรียญสหรัฐ สามารถติตตามค้นหากิจกรรมในไทย และต่างประเทศได้ มีเวอร์ชั่น ติดตั้งบน IOS และ Android ให้ดาวน์โหลดไปติดตั้งกันด้วย

EventJoy เป็นเว็บบริการขายตั๋วออนไลน์ของต่างชาติ เช่นเดียวกับ EventBrite แต่มีการสามารถแบ่ง Section ผู้ฟังและสปอนเซอร์ให้ และสามารถ Customize หน้าเว็บไซต์ได้พอสมควร จริงๆ เรียกว่าหน้าเพจสำหรับจองตั๋วทำได้ดีทีเดียว มีเวอร์ชั่น ติดตั้งบน IOS Mobile ให้ดาวน์โหลดกันด้วย

EventPop เป็นเว็บขายตั๋วออนไลน์ของไทยที่ฮอตฮิตที่สุดในตอนนี้ สำหรับ EventPop นี้เป็นช่องทางการติดตามเหตุการณ์งานที่จัดขึ้นในประเทศไทย

Meetup เป็นเว็บไม่เชิงจะเป็นแนวทางตั๋วออนไลน์สักเท่าไหร่ จะเป็นแนวคลับหรือสมาคมของคนที่สนใจเรื่องเดียวกันซะมากกว่า  อันนี้ฝรั่งเยอะ ก็จะได้ภาษาด้วย

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

ขอขอบคุณรูปภาพประกอบจาก http://www.wildapricot.com/blogs/newsblog/2015/02/04/3-ideas-for-increasing-event-attendance

แนะนำ Chrome App Launcher By Google ของเขาดีจริงๆ

google_web_app_lancher_0

แนะนำแอพที่พัฒนาโดย Google ที่น่าใช้งานกันหน่อย ผมได้ลองใช้แล้วชีวิตง่ายขึ้นเพิ่มไปอีก ขอแนะนำแอพที่ชื่อว่า Chrome App Launcher ที่บอกเลยว่ามันดีมาก ดีอย่างไรนะเหรอ

ปกติเราจะเข้าใช้งาน Application ต่าง ๆ ที่ดาวน์โหลดมาจาก Chrome Web Store แต่การที่จะใช้งานแอพแต่ละครั้งต้องลำบาก เพราะต้องเปิดการใช้งานผ่าน Browser Chrome ก่อนแล้วถึงจะเรียกเปิดการใช้งานแอพที่เราต้องการจะใช้งานได้ ผมก็ว่ามันลำบากเลยไม่ค่อยได้เข้าใช้งานมากนัก พอดีไปเจอแอพ Chrome App Launcher นี้มาเลยของใช้งานของเขาดู มันยอดนิหว่า การติดตั้งก็ไม่นาน แถม UI ก็สวยด้วย การเข้าใช้งานก็ง่าย คนที่ไม่ค่อยถนัดใช้งานคอมพิวเตอร์ ก็สามารถใช้งานแอพนี้ได้ โดยการใช้งานก็ไม่ได้ยากอะไรการติดตั้งก็ง่ายแสนง่ายเข้าไปโหลดเพื่อมาติดตั้งได้เลยจากลิ้งนี้ Chrome App Launcher Link Install

หลังจากติดตั้งสำเร็จเรียบร้อยก็จะเห็น Icon ตาราง 4 สี นี่ก็คือ Icon ของ Chrome App Launcher นี้

google_web_app_lancher_2

ให้เราคลิกเปิดมันขึ้นมาแล้วก็จะได้หน้าตาแอพแบบนี้

google_web_app_lancher_1

ซึ่งถ้ามองดู Icon ภายในแล้วมันก็คือแอพหลักของ Google นั้นเอง แต่การที่จะใช้งานแอพพื้นฐานที่ติดมากับ Chrome App Launcher นี้ได้ต้อง Sign In Account ของ Google ซะก่อนซึ่งถ้าใครยังไม่มี Account ของ Google ก็ไปสมัครได้เพราะไม่มีค่าใช้จ่ายใดๆ ทั้งสิ้น

ข้อดีของ Chrome App Launcher ที่ผมคิดว่ามันดีก็คือ ใช้งานง่ายขึ้น และอีกอย่างคือสามารถติดตั้งแอพ อื่นๆ ใหม่ ๆ เพิ่มได้อีกมากมาย

ตัวอย่างผมลง Chrome App Launcher แล้วผมอยากติตั้งโปรแกรมปฏิทินส่วนตัวผมก็ไปหาโปรแกรมใน Chrome Web Store ก็ไปเจอแอพนี้

google_web_app_lancher_4

ซึ่งมันดูดีเลยทีเดียว ไม่รอช้าผมก็ติดตั้งมันเข้าไป การติดตั้งก็ไม่ได้ยากอะไรคลิกเลือกปุ่มเขียว ทางขวามือบนของหน้าจอข้อมูลแอพและก็รอ เท่านี้เราก็ได้แอพ Calendar เป็นของตัวเองแล้ว สังเกตุว่า icon ของแอพ Calendar ที่เราเพิ่มขึ้นมาใหม่มันจะเพิ่มเข้ามาใน Chrome App Launcher ของเราเป็นที่เรียบร้อยแล้วการมใช้งานครั้งต่อไปเราก็เพียงเปิด Chrome App Launcher ขึ้นมา

google_web_app_lancher_3

ซึ่ง Icon ของ Chrome App Launcher มันจะอยู่ตรงแทบ Task Bar ของหน้าจอ Windown ของเราแล้วก็เลือกแอพ Calendar ที่เราเพิ่มมา

google_web_app_lancher_6

google_web_app_lancher_5

ง่ายใช้ไหมที่นี้ถ้าเราอยากจะได้แอพต่างๆ ที่ต้องการใช้งานเพิ่มเราก็ไปค้นหาจาก Chrome Web Store ได้เลย

Chrome Web Store :: Chrome Web Store Link