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

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

การเขียน 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 เดี๋ยวเรามาลองดูตัวอย่างของการเขียนโครงสร้าง…

nth-child ใช้ยังไง

:nth-child นี้จะสามารถใช้ใน element อะไรที่นับได้ เช่น unordered lists (ul) หรือ ordered lists (ol) โดยใช้เป็น selector ที่ชี้ไปยัง (list) li (หมายเหตุ: จะใช้กับ element อื่นๆก็ได้นะครับ แต่ส่วนตัวผมไม่ค่อยได้ใช้เท่าไหร่) ตัวอย่างเช่น ซึ่งโค้ดนี้จะ select ตัวที่อยู่ใน unordered lists ตัวที่ 3, 6, 9, 12 ให้มีตัวอักษรเป็นสีเขียว ว่าแต่โค้ดนั้นมีการทำงานอย่างไร?

CSS Coding Standards (ภาษาไทย)

เราเขียนโค้ดตามรูปแบบตามมาตรฐานไปทำไม? การเขียนให้เป็นไปตามมาตรฐานนี้มันจะช่วยให้โค้ดของเรานั้นสามารถจัดการได้ง่ายขึ้น ดูเป็นระบบระเบียบมากขึ้น ทำงานร่วมกับคนอื่นเป็นทีมได้ง่ายขึ้น ลดปัญหาที่อาจจะเกิดขึ้นได้จากการอ่านโค้ด เช่น ทำให้ประสิทธิภาพการทำงานแย่ลง เนื่องจากมี cost ด้านเวลาที่สูงขึ้นจากการอ่านโค้ดที่ต้องมา maintenance รวมถึงเรื่อง performance สำหรับเว็บด้วยเช่นกัน เช่น หาก CSS ถูกเขียนขึ้นในรูปแบบ nested เยอะๆ ก็มีผลทำให้เว็บอ่านและ render ช้าลง แต่หากโค้ดที่เราเขียนขึ้นมานั้นหากเขียนถูกต้องตามมาตรฐานแล้วมันจะทำให้อ่านได้ง่ายขึ้น และนั่นก็จะช่วยให้ debugging ได้ง่ายขึ้นอีกด้วย คำว่ามาตรฐานสำหรับ CSS ในที่นี้ผมจะหมายถึงในเชิง Readable และ Semantics เป็นหลักนะครับ ส่วนเรื่อง Reusability นี่เป็นสิ่งที่ CSS ควรจะทำได้อยู่แล้ว Block Style แต่ละ selector ควรแบ่งเป็นบรรทัดของตัวเอง ถ้าต้องการประกาศหลายๆ selector ต่อกัน ควรใช้เครื่องหมาย comma (,) ปิด selector แล้วตัวต่อมาก็ขึ้นบรรทัดใหม่ Property-value ก็ควรแบ่งเป็นบรรทัดเหมือนกัน…

[How to] Level Of Detail (LOD) – X3D(OM) Language [Tutorial in Thai language]

Level Of Detail (LOD) นั้นเป็น Grouping node ตัวหนึ่งในภาษา X3D (หรือเอามาใช้กับ X3DOM ก็ได้ซึ่งใช้ภาษาในการเขียนเป็น X3D เหมือนกัน) โดย node นี้จะถูกใช้เพื่อการเพิ่มประสิทธิภาพในการเรนเดอร์วัตถุใน Scene เนื่องจากใน Scene ของเรานั้นจะมี Viewpoint อยู่อย่างน้อย node ซึ่งจะเป็นจุดกล้องของเรานั่นเอง ซึ่งมีความห่างในแกน x, y, z กับวัตถุ ซึ่งระยะห่างนี้เราสามารถกำหนดความละเอียดให้กับวัตถุที่เรามองเห็นได้ ลองนึกภาพว่าคุณมองวัตถุที่เห็นไกลๆแล้วคุณเห็นมันไม่ชัด คุณเดินเข้าไปใกล้ขึ้นเรื่อยๆ วัตถุนั้นก็จะชัดขึ้นเรื่อยๆตามลำดับ หากใครที่เคยเล่นเกมแนว 3D มาคงจะพอนึกภาพออกว่าเป็นยังไง และความละเอียดนั่นเองที่เราจะถูกถึงการเพิ่มประสิทธิภาพของการเรนเดอร์ทั้ง Scene นั้นโดยรวม โดยเฉพาะอย่างยิ่งกับ Scene ที่มีวัตถุหลายๆวัตถุ เราก็ควรจะให้ความสำคัญกับวัตถุที่เราอยู่ใกล้ที่สุด คือ ให้เรามองเห็นสิ่งนั้นชัดที่สุด ละเอียดที่สุด นั่นหมายความว่า ยิ่งความละเอียดเยอะ ยิ่งมี Polygon มาก มีจุดมากนั่นเอง ซึ่งจำนวนจุด (Point)…

Get navigation type and set point rendering by using X3DOM Runtime API

First you have to call this method: ready() It is therefore possible to execute custom action by overriding this method in your code: That’s your X3DOM scene ID is “x3dom-scene” and your default viewpoint is “showAll” This method is used to show your current navigation type and your current viewpoint in your X3DOM scene and…

How to get and set walk speed value in VRML

How to get and set walk speed value in VRML (VRML version 2.0). First, you have to create an object for call the javascript function. such as TouchSensor node. Then, create ROUTE for call the function. So if you clicked the box that DEF is setWalkSpeed_UP_TOUCH then it’ll call the script at DEF is setWalkSpeed_UP_SCRIPT….

[Mac OS X] Remove Background from photo via Preview

The easiest way to remove background from photo on a Mac. : ) 1. Your Image. 2. “Select” -> Choose “Instant Alpha” 3. Just drag on the place that you want to cut. And then press “delete” button. 4. After That, Save as PNG, PDF, TIFF or GIF file. Don’t forget to check “Alpha” 5….