โพสต์ URL ลง Facebook แต่ข้อมูลในส่วน Preview ไม่อัพเดท ทำยังไง?

เคยสงสัยไหมครับว่า ทำไมเวลาเราอัพเดทข้อมูลบนหน้าเว็บไซต์แล้วพอเอา URL อันเดิมมาโพสต์บนหน้า Facebook ใหม่แล้วทำไมข้อมูลที่แสดงยังเป็นข้อมูลเก่าอยู่? นั่นเป็นเพราะ Facebook ได้ทำการจัดเก็บข้อมูลที่อยู่ใน Open Graph ของหน้าเว็บนั้นๆไว้แล้วในครั้งแรกที่เราเคยโพสต์ลงไป วิธีการที่จะทำให้ Facebook จัดเก็บข้อมูลใหม่หรือตรวจสอบว่าข้อมูลที่เราอัพเดทมาจริงๆแล้วแสดงข้อมูลอะไรอยู่ สามารถตรวจสอบได้กับ Open Graph Object Debugger ที่ link นี้ครับ, Open Graph Object Debugger หลังจากเปิด Link แสดงหน้า Open Graph Object Debugger ขึ้นมาแล้ว ให้เราใส่ URL ที่ต้องการลงไป ตามภาพข้างล่างนี้ครับ แล้วกดปุ่ม “Show existing scrape information” เพื่อแสดงข้อมูลที่ถูกจัดเก็บก่อนหน้านี้ว่าเป็นยังไง หรือหากต้องการอัพเดทใหม่ ให้กดปุ่ม “Fetch new scrape information” ในกรณีนี้ ที่เราต้องการอัพเดทข้อมูลใหม่ลงไปให้ Facebook จัดเก็บ…

[CSS Preprocessor] ความแตกต่างกันระหว่าง Sass และ SCSS

สำหรับคนที่เขียน Sass หรือ SCSS บางครั้งอาจจะสับสนว่าจะบอกคนอื่นยังไงว่าเขียนอะไร จะบอกว่ามันคือ Sass หรือ SCSS ดี? น่าจะเคยมีอารมณ์นี้บ้าง สรุปง่ายๆมันคือ อย่างเดียวกัน ครับ แล้วทำไมมันถึงมีชื่อเรียก 2 ชื่อ? เริ่มแรกเดิมที Sass ถือกำเนิดขึ้นมาในปี 2007 ถูกพัฒนามาพร้อมๆกับ Haml โดย Ruby developers ผู้สร้างคนเดียวกันกับ Haml 2 คนคือ Hampton Catlin, Natalie Weizenbaum ส่วน Chris Eppstein นี่ไม่ได้ทำ Haml ด้วย ทำเฉพาะ Sass กับ Compass ที่เป็น Stylesheet Authoring Environment เป็นที่มาที่ทำให้รูปแบบ syntax ของ Sass แรกๆเลยมันเลยเหมือนๆกับ Haml เป็นแนว…

SCSS Variable Interpolation #{} / lang::ภาษาไทย

วันนี้เห็นโพสต์พี่เติ้งโพสต์ใน Facebook ว่าเจอโค้ดที่เขียนด้วย SCSS ในท่าประมาณว่า #{$fa-css-prefix}-border { …. } ว่ามันคืออะไร เลยเข้าไปตอบและถือโอกาสเขียน Blog เลย เพราะคิดว่ามันเป็นความสามารถที่สำคัญมากๆของ SCSS ถ้าได้ใช้จะจัดการโค้ด SCSS ได้ง่ายขึ้นมากเลยครับ ตัวสรุปสามารถดูในภาพข้างล่างได้เลยครับ, แล้ว Variable Interpolation คืออะไร? ความหมายตรงตัวเลยครับ มันคือการสอดแทรกตัวแปร วิธีการใช้คือ ตัวอย่างที่ 1 SCSS Compiled CSS ซึ่งการใช้งานหลักๆจะเป็นไปในรูปแบบของ text ครับ ซึ่ง operations ต่างๆจะไม่มีผลกับค่าที่อยู่ภายใน #{} เลย หากใครที่เขียน SCSS อยู่แล้วจะพอทราบว่าเราจะใช้ตัวแปร แบบ $variable เข้ามาเลย อาจจะเอาไป /, +, -, *, หรือด้วย operations ใดก็แล้วแต่ ค่าที่ได้คือมันจะคำนวณออกมา แต่หากใช้…

How to convert, resize, and center image with ImageMagick

Cause (If you want to go to the method, skip this part): I have one project that I have to add product to an e-commerce website and client sent me product images in PSD file and I need to convert it into JPG or PNG file to upload to the site. So the problem is,…

How to control startup items on OS X

1. Applications/System Preferences 2. Select “Users & Groups” then click at “Login Items” and you will see startup items, so you can check/uncheck items there.

What is MDS Process that eat your CPU on Mac OS X

วันนี้ผมรู้สึกแปลกใจว่าทำไมอยู่ๆเครื่องก็ช้าจนทำงานทำการอะไรไม่ได้เลย ลาก cursor ยังกระตุก สงสัยเลยเปิดดู Activity Monitor เลยได้คำตอบว่า Process ไหนคือตัวปัญหา เลยต้องมาหาต่อว่า mds_stores นี่มันคืออะไร ทราบมาได้ว่า MDS ย่อมาจาก “Metadata Server” ครับ และ MDS นี่เป็น Process หนึ่งของ Spotlight บน Mac OS ที่มีไว้ค้นหาข้อมูล, ไฟล์ บนเครื่อง Mac OS นั่นเอง และการ Process นี้ของ MDS คือการทำ Indexing ครับ ซึ่งหากไปกดที่รูปแว่นขยาย (Spotlight) บนมุมขวาบนของจอขณะที่ทำ Indexing อยู่ จะแสดงระยะเวลาการ Process ครับ ว่าจะใช้เวลาอีกประมาณเท่าไหร่ ซึ่งการทำ Indexing ข้อมูลในเครื่องเราแบบนี้ไม่ใช่เรื่องผิดปกติอะไร ไม่มีอะไรต้องตกใจครับ (เพียงแต่ว่าวันนี้มันมาทำผิดเวลาไปหน่อย…

HAML 1st Time

ช่วงนี้กำลังคลั่งไคล้การ Optimization การทำให้ประสิทธิภาพของเว็บดีที่สุดเท่าที่จะเป็นไปได้ และการทำงานยังไงให้มันได้เร็วที่สุดด้วย สำหรับ CSS เราก็มี CSS Preprocessor ไม่ว่าจะเป็น LESS หรือ SASS มาช่วยแล้ว ซึ่งมันก็สามารถคอมไพล์และ config บอกมันให้ออกมาในรูปแบบ Compressed เลยได้ และรูปแบบการเขียนก็ง่าย สะดวกขึ้นมาก ส่วน JavaScript ก็มี CoffeeScript เข้ามาย่อยได้ (แต่เรายังไม่ได้ใช้) แล้วกับ HTML ล่ะ? เราคิดอยู่นานว่าจะยังคงรักษารูปแบบการเขียนเว็บให้เป็นไปตามมาตรฐานตาม W3C ไหม เพราะทีมของเราเคยคิดกันอยู่ว่าจะไปเขียน CoffeeScript แทนการเขียน JavaScript ปกติไหม แต่ก็ยับยั้งกันว่าไว้ว่ารอเขียน JavaScript จนรู้สึกว่าอยู่ในระดับเทวดาแล้วถึงค่อยไป CoffeeScript กัน เพราะหากยังไม่แน่นจริงเราก็เกรงว่าจะเสีย Syntax แบบเดิมไป แต่ HTML นี่เราคบกับเขามานานจนคุ้นเคยมากแล้ว แค่มองตาก็รู้ใจ แล้วเราจะทำยังไงกับเขาดี เพราะ CSS เราก็เลือกใช้ SASS…

การเขียน CSS สำหรับเว็บที่เขียนด้วย HTML5 (CSS Standards v.2)

สำหรับ Basic CSS Standards ที่เคยเขียนไปใน CSS Coding Standards (ภาษาไทย) เป็นแบบขั้นพื้นฐานจริงๆที่กล่าวถึงในเรื่องการเขียน CSS ยังไงให้อ่านง่าย (Readability), สื่อความหมาย (Semantics) ซึ่งมีผลกับเรื่องการทำ SEO ด้วย, รวมถึงในเรื่องของการนำกลับมาใช้ใหม่ (Reusability) ส่วนสำหรับโพสต์นี้เราจะมาเข้าเรื่องพื้นฐานอีกเหมือนกัน แต่รวมถึงการใช้ CSS สำหรับ HTML5 ด้วย ซึ่งอาจมีความเข้าใจที่ไม่ค่อยถูกต้องนักอยู่จากที่เคยได้ยินมาจากเพื่อนๆมา และจากการอ่าน Writing the best CSS when building with HTML5 ที่เขียนโดย Todd Motto เลยคิดว่าเราควรจะมาเขียนสรุปให้ลึกลงไปมากกว่าเรื่อง Standard อีกหน่อย เริ่มกันที่ HTML แบบธรรมดาเดิมๆก่อน หลักการใช้ HTML กับ CSS หลักๆคือการทำให้มันไม่มีเงื่อนไขมากนักครับ อย่างเช่นเรื่อง Nested การทำให้มันไม่ไปติดเงื่อนไขกับการใช้ HTML เดี๋ยวเรามาลองดูตัวอย่างของการเขียนโครงสร้าง…

display: none; กับ visibility: hidden; ใน CSS แตกต่างกันอย่างไร

ความแตกต่างระหว่าง display: none; กับ visibility: hidden; ใน CSS คืออะไร? สิ่งที่เหมือนกันของทั้งคู่คือมันจะทำให้ element ที่ใช้มันจะไม่ปรากฏขึ้นในหน้าเว็บเพจ แต่สิ่งที่แตกต่าง Layout สำหรับ visibility: hidden; นั้น element จะถูกซ่อนไป แต่จะไม่กระทบกับ layout แต่ display: none; จะกระทบกับ layout ด้วย คือมันทั้งซ่อนและทำเหมือนว่า element หรือ block นั้นไม่มีอยู่เลย ลองดูในภาพตัวอย่างข้างล่างนี้แล้วดู code ข้างล่างรูปแล้วจะเก็ทมากขึ้นครับ หรือลองเข้าไปดูที่ Display: none; and Visibility: hidden; example

การตั้งค่าและคำนวณ Box Model และการใช้ box-sizing กับขนาดของ Element ใน CSS

ใน CSS จะมีเรื่อง Box Model ซึ่งจะเกี่ยวข้องกับเรื่องการกำหนดขนาดของ Element ลองมาดูตัวอย่างโค้ดนี้กัน ลองมาดูกันที่ .box-extend ผลที่ได้จะออกมาเป็นดังภาพนี้ครับ จากขนาดความกว้างที่ตั้งไว้, width: 500px และ padding: 50px ซึ่งค่า padding นี่จะถูกบวกเพิ่มไปทั้ง บน-ขวา-ล่าง-ซ้าย ด้านละ 50px ทำให้ผลรวมความกว้างของ element หรือ class นี้เท่ากับ 600px และจาก border-width: 10px ก็คิดแปปเดียวกันกับ padding คือบวกเพิ่มเข้าไปในชั้นนอกสุดของ element บน-ขวา-ล่าง-ซ้าย อีกด้านละ 10px รวมแล้วมีความกว้างทั้งหมด 620px เช่นเดียวกันกับ .box ซึ่งก็จะมี border มาเพิ่มให้ขวาซ้ายฝั่งละ 1px ลองใช้ Inspector และดู Box Model ของ .box-extend กันครับ…

X3DOM Configuration | ภาษาไทย

ใน X3D element นั้นมี tag ที่สามารถตั้งค่าสำหรับ runtime ได้คือ param โดยจะต้องประกาศใน X3D element เช่นตัวอย่างโค้ดข้างล่างนี้ โดย options ที่สามารถตั้งค่าได้ตั้งแต่ X3DOM รุ่น 1.4 มามีดังนี้