style – iT Blog

เปลี่ยนจาก classic editor เป็น block editor

มีโอกาสเข้าไปอัพเดทเนื้อหาใน thainame . NET อยู่เสมอ พบว่า เนื้อหาที่เคยมีไว้ 178 หน้า หรือ 1546 โพสต์ เมื่อเปิด edit post จะมีการถามว่า เลือก update จาก classic editor เป็น block editor ไหม เป็นคำถามที่ จี๊ดมาก เพราะหันกลับไปมอง 1546 โพสต์นี่ หมายความว่า ผมต้องเข้าไป rewrite ทั้งหมดเลยใช่ไหม คำตอบ คือ ใช่

แล้วการเปลี่ยนครั้งนี้ ดีอย่างไร พบว่า Pavel Ciorici เขียนเมื่อ July 21, 2023
มีข้อดี 5 ข้อ

แก้ไขโค้ดได้สนุกขึ้น เพราะแบบโบราณคงไม่รองรับอนาคต
เลือกใช้ แพทเทิร์น ที่ออกแบบให้เลือกใช้ได้
ทำให้โพสต์ไม่บวม เพราะแบบใหม่ performance ดีกว่า
แบบใหม่ใช้ plugin ได้จำกัด แต่ดีกว่า
รองรับการตรวจสอบรุ่น ในอนาคต

วันนี้ได้ทดสอบ ตรวจ pagespeed กับ post ในแบบ classic กับ block เทียบกันแล้ว พบว่า แบบ classic editor ได้คะแนน performance ต่ำกว่า block editor ได้ทดสอบก่อน และหลังเปลี่ยน ได้คะแนนต่างกันชัดเจน จากการทดสอบปรับจำนวน 3 โพสต์

เมื่อหันกับไปมอง wordpress site ทั้งหมด 4 ตัวของผม ก็นั่งคิดอยู่ว่า จะไป rewrite ได้ครบได้อย่างไร แค่ thainame . NET ก็พันกว่าโพสต์แล้ว

แต่ผมกลับมีกำลังใจขึ้นมา เมื่อหันไปมองเพื่อนผู้ประกอบการ เพราะมีเพื่อนที่เค้าให้ความสำคัญกับ “เนื้อหา” เมื่อหันไปมอง ttpcargo.com , umbrella-perfect.com , ofisu.co.th , usb-perfect.com เค้าก็มีโพสต์ที่ออกมาเป็นราย weekly อย่างต่อเนื่องหลายปีติดต่อกัน ให้ได้เรียนรู้เรื่องราวเกี่ยวกับธุรกิจ สินค้า บริการต่าง ๆ ก็หาเวลาไปตามอ่านอยู่ครับ มีเนื้อหาที่น่าสนใจเยอะมาก

ตัวอย่าง CSS ใน HTML (Joom.htm)

CSS (Cascading Style Sheets) คือ ภาษาคอมพิวเตอร์สำหรับกำหนดรูปแบบในเอกสาร HTML หรือเรียกว่า สไตล์ชีต ที่ใช้กำหนดรูปแบบ (Layout) สีอักษร สีพื้น ตัวอักษร การจัดวาง ระยะห่าง เส้นขอบ เป็นต้น มีรูปแบบ Syntax เฉพาะตัว ได้รับการกำหนดมาตรฐานโดย W3C การใช้ CSS มี 3 แบบ คือ Inline, Internal และ External CSS

เรื่อง CSS : Cascading Style Sheets กลายเป็นข้อควรรู้ที่จำเป็นสำหรับนักพัฒนาเว็บไซต์อย่างหลีกเลี่ยงไม่ได้ ปัจจุบัน CSS มีถึงรุ่น 3 แล้ว ในการใช้งานจริงมักสร้าง CSS แบบ External style sheet เพราะแฟ้มอื่นเรียกใช้ได้ ส่วน Internal style sheet ก็จะเรียกใช้ได้เฉพาะในแฟ้มนั้น ส่วน Inline style ก็จะพิมพ์คำว่า style ต่อท้าย tag นั้นไปเลย ซึ่งตัวแปรหลัก 2 แบบที่กำหนดเองใน CSS มี 2 แบบคือ id กับ class
การกำหนด และการเรียกใช้ต่างกันไป ถ้าเป็น id จะขึ้นต้นด้วย # แต่เป็น class จะขึ้นต้นด้วย . ถ้าเรียกใช้ id จะใช้ properties name ว่า id ส่วนเรียกใช้ class จะใช้ properties name ว่า class

สิ่งที่แตกต่างกัน คือ id จะเรียกใช้ครั้งเดียว แต่ class เรียกใช้ได้หลายครั้ง ถ้าวางแผนอย่างใจเย็นก็จะใช้ประโยชน์จาก css ได้อย่างเต็มที่ มีตัวอย่างที่ css_sample.htm และ การทำเมนู Responsive แบบ Top Nav หากจะทดสอบการปรับแต่ง css ทำได้ที่ w3schools.com

CSS คือ ภาษาคอมพิวเตอร์สำหรับกำหนดรูปแบบในเอกสาร HTML เรียกว่า สไตล์ชีต ที่ใช้กำหนดรูปแบบ สีอักษร สีพื้น ตัวอักษร การจัดวาง ระยะห่าง เส้นขอบ เป็นต้น มีรูปแบบ Syntax เฉพาะตัว ได้รับการกำหนดมาตรฐานโดย W3C การใช้ CSS มี 3 แบบ คือ Inline, Internal และ External CS จากตัวอย่างในรหัสต้นฉบับ แฟ้ม joom.htm ที่เป็นอัลบั้มแบบ static ถูกทำเครื่องหมายไว้ 6 จุด เพื่อใช้ชี้ให้เห็นในสิ่งที่น่าสนใจ ดังนี้ 1) แฟ้มเก็บ css ที่เก็บไว้ภายนอก แต่อยู่ในเครื่องบริการของตนเอง ทำให้เว็บเพจอื่นโหลดไปใช้ได้ นำเข้าได้ด้วย link tag 2) เขียน css ไว้ในเว็บเพจ และเรียกใช้ได้เฉพาะในเว็บเพจนั้น เขียนอยู่ใน style tag 3) ใน style tag สามารถกำหนด ขนาด media สำหรับเรียกใช้ css แต่ละชุดได้ เช่น mobile, desktop, notebook ก็จะแสดงผลแตกต่างกันไปตามขนาดหน้าจอ 4) มี css ที่ถูกพัฒนาให้ใช้ร่วมกับ Pure Javascript ที่ทำให้แสดงผลบนเว็บเพจแบบ dynamic และถูกใช้อย่างแพร่หลาย สามารถเรียกใช้ผ่านเครื่องบริการ CDN (Content Delivery Network) ได้ฟรี 5) การประกาศ css แบบ in-line ทำให้มีผลทันทีใน tag นั้น เช่น ประกาศบน div ใด ก็จะมีผลเฉพาะใน div นั้น หากอยู่นอกเหนือขอบเขต ก็จะไม่มีผล การประกาศใช้ที่จุดใด จึงต้องคำนึงถึงขอบเขตของการนำไปใช้ 6) การประกาศ css มักอยู่ในรูปของ class แล้ว tag ต่าง ๆ สามารถเรียกใช้ class ได้ และยังเรียกใช้หลาย class พร้อมกันได้ ซึ่งการตรวจสอบค่า css ในระหว่างแสดงผลบน browser เช่น chrome สามารถกด F12 แล้วใช้ Developer Tools เข้าไปตรวจสอบ หรือทดสอบแก้ไข แล้วการแสดงผลจะเปลี่ยนไปทันที ทำให้กลับไปแก้ไขโค้ดทำได้ง่ายขึ้น

https://www.thaiall.com/java/indexo.html

#เล่าสู่กันฟัง 63-046 ชีวิตพิชิตฝัน ของ สรรค์ชัย

คุณสรรค์ชัย ไชยสกุลวงศ์ รุ่นน้อง
ที่ #มหาวิทยาลัยเนชั่น
เขียนหนังสือเล่มที่ 2 เกี่ยวกับวิถีชีวิต
ในชื่อ #ชีวิตพิชิตฝัน
อ่านสารบัญ อ่านบทแรก น่าสนุกเลยครับ
“นิยามชีวิตคืออะไร
เป้าหมายชี้ชะตาอนาคต
แรงบันดาลใจพิชิตฝัน
ความสำเร็จในชีวิต
การบริหารเวลาให้มีค่า
ทำฝันให้เป็นจริง“
ตัวหนังสืออ่านง่าย ตัวใหญ่
มี 17 บรรทัดต่อหน้า
บทสุดท้าย “เข้าถึงธรรม เข้าใจธรรมชาติ“
บรรณานุกรมมีของ วิกรม กรมดิษฐ์ ด้วยครับ

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

ปีใหม่ไทย หรือสงกรานต์ นึกถึงอะไรกันนะ

สงกรานต์ในมุมมองของข้าพเจ้า

เทศกาลมหาสงกรานต์มาบรรจบ
ทำให้มีเรื่องราวมากมาย ให้คำนึง
หรือที่เราเรียกว่าส่งท้ายปีเก่าไทย ต้อนรับปีใหม่ไทย

Nomination file No. 01719
Songkran in Thailand, traditional Thai New Year festival
…
#unesco
Inscribed in 2023 on the Representative List of the Intangible Cultural Heritage of Humanity

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

1. ผู้น้อยรวมตัวกันจัดกิจกรรม
เชิญผู้เฒ่าผู้แก่มารวมกัน และรดน้ำดำหัว
หรือพากันไปหาผู้ใหญ่ที่เคารพนับถือ
เพื่อขอสุมาลาโทษ ขอศีลขอพรเพื่อความเป็นสิริมงคล

2. ทำบุญใส่บาตร หรือไปสรงน้ำพระ
ขอพรพระ เพื่อความเป็นสิริมงคล

3. ชมการแสดง มหรสพ งานรื่นเริงบันเทิงใจ
ร้องรำทำเพลง ร้องเล่นเต้นรำ

4. นั่งล้อมวง พูดคุย นาน ๆ พบพร้อมหน้าพร้อมตา
เล่าความหลังสู่กันฟัง ว่าที่ผ่านมาเป็นอย่างไร
ทำวีรกรรมอะไรตามประสาคนมีอายุ

5. ทำกิจกรรมกีฬา เชื่อมความสัมพันธ์
กีฬามหาสนุก เตะบอล แกว่งมะเขือ ชักกระเย่อยิ่งสนุก

สงกรานต์ หรือ ปีใหม่ไทย 2559
https://www.facebook.com/ajburin/media_set?set=a.10154059445893895.1073741896.814248894

สงกรานต์ หรือ ปีใหม่ไทย 2558
https://www.facebook.com/ajburin/media_set?set=a.10153180081213895.1073741855.814248894

สงกรานต์ หรือ ปีใหม่ไทย 2554 – 2557
https://www.facebook.com/ajburin/media_set?set=a.489851243894.268727.814248894

ความแตกต่างของ id และ class

CSS : Cascading Style Sheets กลายเป็นข้อควรรู้ที่จำเป็นสำหรับนักพัฒนาเว็บไซต์อย่างหลีกเลี่ยงไม่ได้

วันนี้ 11 มิ.ย.59 ว่าจะจัดการเรื่อง float:left ใน web2 ให้เรียบร้อย แต่มาใช้เวลากับการนั่งทดสอบ Developer tools ของ chrome นานไปหน่อย ติดใจเลย
ทำให้ได้เรียนรู้ว่า chrome ช่วยให้การปรับแต่งเว็บไซต์ง่ายกว่าใช้ editor ธรรมดาอย่าง editplus มาก
http://www.thaiall.com/web2
—
เรื่อง CSS : Cascading Style Sheets กลายเป็นข้อควรรู้ที่จำเป็นสำหรับนักพัฒนาเว็บไซต์อย่างหลีกเลี่ยงไม่ได้ ปัจจุบัน CSS มีถึงรุ่น 3 แล้ว ในการใช้งานจริงมักสร้าง CSS แบบ External style sheet เพราะแฟ้มอื่นเรียกใช้ได้ ส่วน Internal style sheet ก็จะเรียกใช้ได้เฉพาะในแฟ้มนั้น ส่วน Inline style ก็จะพิมพ์คำว่า style ต่อท้าย tag นั้นไปเลย ซึ่งตัวแปรหลัก 2 แบบที่กำหนดเองใน CSS มี 2 แบบคือ id กับ class

การกำหนด และการเรียกใช้ต่างกันไป
ถ้าเป็น id จะขึ้นต้นด้วย # แต่เป็น class จะขึ้นต้นด้วย . ถ้าเรียกใช้ id จะใช้ properties name ว่า id ส่วนเรียกใช้ class จะใช้ properties name ว่า class

สิ่งที่แตกต่างกัน คือ id จะเรียกใช้ครั้งเดียว แต่ class เรียกใช้ได้หลายครั้ง ถ้าวางแผนอย่างใจเย็นก็จะใช้ประโยชน์จาก css ได้อย่างเต็มที่ มีตัวอย่างที่ css_sample.htm หากจะทดสอบการปรับแต่ง css ทำได้ที่ w3schools.com

<html><head><style type=”text/css”>
#header {background:yellow;font-size:20px;}
.title-text {color:red;}
p.big { font-size:40px; }
span.small { font-size:10px; }
table, th, td { border: 1px solid black; }
.burin1 {color:red;border: 2px}
.burin2 {font-size:20px;float:left;}
.burin3 {color:blue;font-size:30px;float:left;}
</style><body id=”header” class=”title-text”>
<span style=”color:green;”>hello</span><p class=”big”>my</p>
<span class=”small”>friend</span><span class=”small”>is tom.</span>
<table class=”burin1″><tr><td>one</td></tr></table>
<table class=”burin2″><tr><td>two</td></tr></table>
<table class=”burin3″><tr><td>three</td></tr></table>
http://www.w3schools.com/css/css_table.asp
</body></html>

font-face คือ การกำหนดการเรียกใช้ฟอนต์บน CSS ที่เพิ่มช่องทางได้หลากหลาย

ต้องการผลแบบนี้ จะเขียน code อย่างไร เพราะ world เล็กไปหน่อย

เคยได้คุยกับนักศึกษาเรื่องการกำหนด font แล้วมีการทดสอบสร้างแฟ้ม .htm
ด้วย Word 2010 โดย save as แบบ Web Page, Filtered
ซึ่งปกติการใช้ font ในการเขียนเว็บเพจ มักเรียกใช้ font ที่ติดตั้งบนเครื่อง client
แต่ใน CSS (Cascading Style Sheets) เราสามารถเรียกใช้ font บน Web server
ได้มีการเพิ่ม @font-face เข้าไปใน specification ของ CSS3
โดยการอ้างอิง Font file สามารถทำได้หลากหลายผ่าน src: url();

ผลการทดสอบใช้กับ Firefox และ Chrome รุ่นใหม่แล้วโอเค
แต่ IE 11 ใช้คุณสมบัตินี้ได้ แต่มีปัญหากับ .otf ส่วน .ttf โอเค

ต.ย. 1
<html><head><title>my font</title><style>
<!–
@font-face{font-family:”WisdomScript”; src: url(‘Wisdom-Script.otf’);}
–>
</style></head><body>
<div style=’font-size:70pt;font-family:”WisdomScript”;’>
Hello world
</div>
</body></html>

ต.ย. 2
<html><head><style>
<!–
@font-face{font-family:”WisdomScript”; src: url(‘Wisdom-Script.otf’);}
body{font-family:”WisdomScript”;}
–>
</style></head><body>
Hello world
</body></html>
ต.ย. 3
<html><head><style>
<!–
@font-face{font-family:”WisdomScript”; src: url(‘Wisdom-Script.otf’);}
@font-face{font-family:”AlexBrush”; src: url(‘AlexBrush-Regular.ttf’);}
body{font-size:72pt;font-family:”arial”;}
–>
</style></head><body>
say “<span style=’font-family:”WisdomScript”;’>Hello</span>
<span style=’font-family:”AlexBrush”;’>world</span>”
</body></html>

ดาวน์โหลดฟอนต์นี้
ที่ https://github.com/codeforamerica/click_that_hood/blob/master/public/fonts/Wisdom-Script.otf
ที่ https://www.fontsquirrel.com/fonts/download/alex-brush
หรืออีกมากมาย
ที่ https://www.fontsquirrel.com/