Blog

วิธีไล่สีตัวอักษรด้วย CSS
ในการสร้างคอนเท้นต์ในเว็บไซต์นั้น บางทีเราต้องการไล่สีให้ตัวอักษรเพื่อความสวยงาม โดยตัวเอกของเราในครั้งนี้จะเป็น
```
background-clip: text;
-webkit-background-clip: text;
```
และสิ่งที่เราใช้ประกอบด้วยคือ การใช้พื้นหลังแบบไล่สี รวมถึงให้ตัวอักษรเราโปร่งใส
```
background: linear-gradient(to right, #40e0d0, #ff8c00, #ff0080);
color: transparent;
```
ตัวอย่างการไล่สีตัวอักษรด้วย CSS

CodePen Embed Fallback
February 18, 2022
Enable Media Replace : Plugin WordPress สำหรับแทนที่ File ที่เคย Upload ไปแล้ว
1 ในปัญหาที่ลูกค้าที่ทำเว็บไซต์ด้วย WordPress เจอ คืออยากจะอัพเดต File ที่เคย Upload ไป แต่ไม่อยากจะเปลี่ยน URL หรืออยากจะอัพเดตรูป แต่รูปนี้ใช้อยู่ในหลาย ๆ บทความ จะไปไล่อัพเดตในทุกบทความเลย ก็เสียเวลา

ผมเลยมาแนะนำ Plugin ที่ใช้สำหรับอัพเดต File ที่เคย Upload ไปแล้ว ชื่อ Enable Media Replace

Enable Media Replace : Plugin WordPress สำหรับแทนที่ File ที่เคย Upload ไปแล้ว

หลังจากที่เราติดตั้ง และเปิดใช้งานตัว Plugin นี้แล้ว ในหน้าเดี่ยวของ File ต่าง ๆ ที่อยู่ใน Media จะมีหัวข้อ Replace Media ปรากฎขึ้นมา

เมื่อเราเลือก Upload a new file แล้ว จะไปยังหน้าจัดการ File ดังรูป

File ที่จะนำไปแทนที่นั้น ต้องมีนามสกุลเดียวกับ File เดิม เช่น default.jpg ก็ต้อง Upload File ที่มีนามสกุล jpg มาแทนที่ หลังจากเลือก File ที่จะนำไปแทนที่แล้ว
- ตำแหน่งที่ 1 ให้เลือก Replace the file, use new file name and update all links
- ตำแหน่งที่ 2 นั้นเราสามารถเลือกวันที่สำหรับตัว File ได้
หลังจากกด Update ก็เสร็จสิ้น File ที่ Upload ไปก็แทนที่ File เดิมในทุกหน้าให้แล้วครับ

Link : Plugin Enable Media Replace
February 16, 2022
วิธีการใช้สีใน CSS
ในการเขียนเว็บไซต์ CSS เป็นตัวตกแต่งหน้าตาของเว็บไซต์ ซึ่งส่วนหนึ่งในนั้น ก็คือสามารถปรับเปลี่ยนสีต่าง ๆ ในเว็บไซต์ได้ด้วย CSS

โดยวิธีการใช้สีใน CSS นั้น มีอยู่หลายวิธี แต่จะขอพูดถึง 4 รูปแบบที่ใช้งานกันบ่อย ๆ ดังนี้
- ใช้ชื่อสี โดยสามารถดูรายชื่อสีได้ที่ W3C Color Keyword
- ใช้ Hex Code ตัวอย่างเช่น #FFF, #DE3D58
- ใช้ RGB ตัวอย่างเช่น rgb(255,255,255), rgb(125,90,52)
- ใช้ HSL ตัวอย่างเช่น hsl(100, 50%, 50%), hsl(240, 20%, 80%)
CodePen Embed Fallback

จะเห็นว่า ทุกรูปแบบแสดงผลสีเดียวกันทั้งหมด

วิธีการใช้สีใน CSS แบบใช้ชื่อสี

วิธีนี้ไม่ได้มีอะไรซับซ้อนมากมาย แค่เรานำชื่อสีไปใส่เพื่อใช้งาน เช่น

Black

Gray

Hotpink

Yellowgreen

วิธีการใช้สีใน CSS แบบใช้ Hex Code

โดยในการใช้ Hex Code นั้น มีวิธีการใช้งานโดยมองแยกแบบนี้
```
#RRGGBB // โดย R คือสีแดง G คือสีเขียว และ B คือสีน้ำเงิน
```
#b91c1c

#facc15

ค่าของ RGB นั้นจะมีค่าอยู่ระหว่าง 00 – FF ในเลขฐาน 16 รวมถึงใน Browser version ใหม่ ๆ นั้นจะสนับสนุนการใช้งานสีแบบกำหนดความโปร่งใสได้ด้วย
```
#RRGGBBAA // โดย A คือค่าความโปร่งใส มีค่าอยู่ระหว่าง 00 - FF
```
#b91c1c99

#facc1599

วิธีการใช้สีใน CSS แบบใช้ RGB

โดยในการใช้ RGB นั้น มีวิธีการใช้งานโดยมองแยกแบบนี้
```
rgb(255,255,255) // โดยค่าที่ใส่ลงไปจะมีค่าระหว่าง 0 - 255
rgba(255,255,255,1) // โดยตัวสุดท้ายจะใช้ค่าที่อยู่ระหว่าง 0 - 1
```
rgb(37, 99, 235)

rgb(190, 18, 60)

rgb(37, 99, 235, 0.5)

rgba(190, 18, 60, 0.5)

โดยตัวแรกจะเป็นค่าสีแดง ตัวถัดไปเป็นสีเขียว และตัวสุดท้ายเป็นสีน้ำเงิน รวมถึงใน Browser version ใหม่ เราสามารถใช้ rgb ในการใช้งานแบบโปร่งใสได้เลยแบบนี้ โดยไม่ต้องใส่ลูกน้ำ
```
rgb(255 255 255)
rgb(255 255 255 / 1) // โดยใช้ / คั่นระหว่าง 3 ค่ากับค่าของความโปร่งใส
```
rgb(21 128 61)

rgb(21 128 61 / 0.5)

วิธีการใช้สีใน CSS แบบใช้ HSL

โดยในการใช้ HSL นั้น มีวิธีการใช้งานโดยมองแยกแบบนี้
```
hsl(360, 100%, 100%)
hsla(360, 100%, 100%, 1)
```
hsl(221, 83%, 53%)

hsl(345, 83%, 41%)

hsl(221, 83%, 53%, 0.5)

hsl(345, 83%, 41%, 0.5)

โดยค่าแต่ละตัวคือ
- Hue (เนื้อสี) ค่ามีตั้งแต่ 0 – 360
- Saturation (ความอิ่ม) ค่าเป็นเปอร์เซ็นต์ตั้งแต่ 0 – 100
- Lightness (ความสว่าง) ค่าเป็นเปอร์เซ็นต์ตั้งแต่ 0 – 100
- Alpha (ค่าความโปร่งใส) ค่าอยู่ระหว่าง 0 – 1
รวมถึงใน Browser version ใหม่ เราสามารถใช้ hsl ในการใช้งานแบบโปร่งใสได้เลยแบบนี้ โดยไม่ต้องใส่ลูกน้ำ แต่ใช้ / ในการคั่น
```
hsl(360 100% 100%)
hsla(360 100% 100% / 1)
```
hsl(142 72% 29%)

hsl(142 72% 29% / 0.5)

หลายคนคงสงสัยว่า แล้วความแตกต่างของ rgb กับ hsl ว่ามันแตกต่างกันอย่างไร
- ระบบของ rgb สามารถแทนจำนวนสีได้มากกว่า hsl โดยสังเกตง่าย ๆ ว่า rgb มันสามารถแทนสีได้ 256 x 256 x 256 ซึ่งเท่ากับ 16,777,216 สี ในขณะที่ hsl นั้นแทนสีได้ 360 x 100 x 100 ซึ่งเท่ากับ 3,600,000 สี
- แต่ระบบ hsl นั้นง่ายในการสื่อสารสำหรับการปรับแต่ง เช่น ขอสีแดงที่สว่างกว่านี้ อยากได้สีน้ำเงินที่อิ่มกว่านี้ หรืออยากได้โทนสีอื่น ที่ยังสว่างแบบเดิม
February 13, 2022
3 CSS Animation ไลบารี่สำหรับนำไปใช้งาน
ในการทำเว็บไซต์นั้น หลายครั้งที่เราต้องการให้ Element นั้นมีการเคลื่อนไหว ซึ่งสามารถศึกษาเพิ่มเติมได้ที่ animation – CSS: Cascading Style Sheets | MDN

แต่มันจะง่ายขึ้นถ้าเราไม่ต้องทำเองตั้งแต่ต้น โดยใช้ไลบารี่ต่าง ๆ ที่มีคนทำไว้ให้แล้ว ผมเลยจะมาแนะนำ 3 CSS Animation ไลบารี่ เพื่อให้ทุกคนสามารถนำไปใช้งานกับงานตัวเองได้

CSS Animation ไลบารี่

Animate.css

สำหรับไลบารี่ตัวนี้ เป็นตัวที่ผมใช้บ่อยมากที่สุด โดยวิธีการใช้งานก็ไม่ได้ยาก แค่เพิ่ม CSS ตัวนี้เข้าไป
```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
```
และใส่ class animate__animated แล้วตามด้วยชื่อ animation ที่จะใช้ โดยนำหน้าด้วย animate__ เช่น animate__bounce

ลิงก์ : animate.css

Hint.css

สำหรับไลบารี่ตัวนี้ สำหรับใช้งาน tooltip โดยใช้แค่ CSS อย่างเดียวไม่ต้องใช้ Javascript ประกอบ วิธีการใช้งานก็เรียก hint.css ใน HTML ของเรา
```
<link rel="stylesheet" href="hint.css" />
```
และใส่ class ที่ต้องการใช้งาน รวมถึง aria-label ซึ่งภายใน aria-label จะเป็นข้อความที่แสดงผลใน tooltip
```
สวัสดีครับ, <span class="hint--bottom" aria-label="ขอบคุณครับ">เอาเม้าส์มาวางบนนี้ซิ.</span>
```
ลิงก์ : hint.css

Magic.css

สำหรับไลบารี่ตัวนี้ การเคลื่อนไหวของมันจะดูหรูหรามากขึ้นจาก animate.css โดยเพิ่ม CSS ของไลบารี่นี้เข้าไป
```
<link rel="stylesheet" href="magic.css" />
```
และใส่ class ที่ตัวไลบารี่กำหนดไว้ เช่น magic, swap, puffin

ลิงก์ : magic.css
February 9, 2022
แก้ปัญหาการแทรก tag pใน widget เมื่อใช้ gutenberg
หลังจากที่ WordPress มีการอัพเดตเป็น Version 5.8 ได้มีการนำ block ของ gutenberg มาใช้งานกับ widget แทนรูปแบบเดิมที่เคยใช้มา

ทีนี้เราดันมาเจอปัญหาว่า เวลาใช้ block ที่เป็น shortcode มันจะแทรก tag p เข้ามาอัตโนมัติ แล้วตัว shortcode ที่เราสร้างขึ้น มันดันไปตีกับตัว tag p ที่มันแทรกเข้า ทำให้ code กลายเป็นแบบนี้
```
<p>[shortcode]</p>
```
เราเลยต้องหาวิธีเอามันออกไป โดยเราไปไล่ code ที่ file
```
wp-includes/class-wp-block.php
```
แล้วก็เจอ filter ตัวนี้
```
$block_content = apply_filters( "render_block_{$this->name}", $block_content, $this->parsed_block );
```
เมื่อไปค้นต่อ เจอลิงก์นี้

render_block_{$this->name}

โดยเรานำมาปรับใช้เป็น
```
add_filter( "render_block_core/shortcode", 'custom_render_block_shortcode', 10, 2);
function custom_render_block_shortcode( $block_content, $parsed_block ) {
  $array = array (
    '<p>[' => '[', 
    ']</p>' => ']'
  );
  $block_content = strtr($block_content, $array);

  return $block_content;
}
```
July 26, 2021
วิธีปรับ Theme ของ Chrome DevTools
ในการใช้งานตัว DevTools ของ Chrome นั้น จะมี Theme ที่ Chrome เตรียมไว้ให้อยู่ 2 แบบ คือ Light และ Dark

ซึ่งปรกติผมก็จะใช้ Theme Dark อยู่เป็นปรกติ แต่ก็ยังรู้สึกว่า มันเรียบๆ ไป ไม่ค่อยชินเท่าไหร่

เพราะตัว Sublime Text หรือ Visual Studio Code ที่ผมใช้ เราก็ปรับ Theme ของมันเป็นสี เป็นฟอนต์อื่นๆ ที่เราต้องการ เวลาไปค้นว่า เราจะปรับ Theme ของ DevTools ได้อย่างไร

จนไปเจอว่า ให้เราเข้าไปที่ https://chrome.google.com/webstore/category/extensions แล้วค้นหา DevTools Theme

โดยเราเลือกเป็นตัวนี้ Material DevTools Theme Collection

หลังจากที่ Add to Chrome แล้วทำตามขั้นตอนดังนี้
- พิมพ์ chrome://flags ที่ Address Bar
- ค้นหาคำว่า “Developer Tools experiments”
- เปลี่ยนเป็น Enable แล้ว restart Chrome
- เปิด DevTools อีกครั้ง
- ไปที่ Settings > Experiments
- แล้วติ๊กที่ “Allow Custom UI Themes”
- ปิดแล้วเปิดอีกครั้ง
- อย่าลืมเปลี่ยน Theme ให้เป็น “Dark”
มองหา icon เหมือนตัว M ที่อยู่ด้านบนตรงใกล้ๆ Address Bar แล้วคลิก สามารถเลือก Theme ตามที่ให้ได้ดังรูป

เป็นอันเสร็จสิ้น
September 5, 2019