ปรับขนาดจอภาพรองรับ responsive web design

ทำให้ดีที่สุด เพื่อคะแนน performance / optimization หรือ user experience ที่ดีที่สุด จึงกลับไปดูหัวข้อ ขนาดจอภาพ (screen resolution) ที่ถูกบันทึกไว้ บนระบบ website tracker / counter / web stats / web analytics / usage statistics / hit stats พบว่า โลกเราเปลี่ยนไปจาก พ.ศ. 2541 อย่างมาก

ปัจจุบัน ขนาดจอภาพ ยอดนิยมเป็น 1366*768 หรือ 1920*1080 แม้จะคลาดเคลื่อนกันบ้าง แต่ห่างจากที่ผมมองไว้ ที่ 800*600 แบบไม่เห็นฝุ่น ดังนั้นการออกแบบ responsive web design แบบ fixed width เพื่อควมคุม layout ให้ผู้ใช้รู้สึกดี จึงต้องปรับชุด resolution ที่รองรับกันใหม่ แต่ปีนี้ผมยังไม่ย้ายออกจาก comfort zone ที่ width 728px นะครับ ปรับเฉพาะที่ต่ำกว่าขนาดนี้เท่านั้น

สิ่งสำคัญในการปรับเทมเพจรุ่นนี้ (9.2) คือ วิเคราะห์ front-end design อย่างละเอียด เพื่อให้ได้คะแนน 400 เต็ม จาก pagespeed insights ซึ่งปัญหาสุดท้ายที่กว่าจะแก้ได้ก็นาน คือ การยกเลิกการ load css ที่ต้นแฟ้ม แต่แยกประกาศ style ในแท็ก head เฉพาะส่วนที่จำเป็น แล้วส่วนที่เหลืออยู่ในแฟ้ม css ที่รองรับงาน responsive แยกออกเป็นแฟ้ม แล้วค่อยดึงมาใช้หลัง onload ที่เขียนโค้ดไว้หลังปิดแท็ก html และทำงานแบบ async=true

สิ่งที่แก้ไม่ได้ที่ทำให้คะแนน pagespeed ไม่เต็ม 100 มี 4 เรื่องที่แก้ไม่ได้ คือ 1) กูเกิ้ลแอด ที่เรียกโค้ดภายนอก 2) histats หรือ truehits ที่เรียกโค้ดภายนอก 3) การโหลด js และ css จาก cdn จำนวนมาก 4) ขนาด DOM ที่ใหญ่เกินไป เค้าแนะนำว่าไม่ควรเกิน 1500 nodes

ส่วนผลการตัดโค้ดที่ทำให้คะแนนลดออกไป จนทำให้เหลือเฉพาะเนื้อหาจะได้คะแนน 400 เต็ม อยู่ใน link ด้านล่างครับ สามารถนำ url ไปโยนใส่ pagespeed ดูได้ ส่วนโฮมเพจที่ใช้จริงอยู่ที่ หน้าแรก thaiall ซึ่งได้คะแนน mobile คือ 37,100,57,100 เพราะมีปัญหา ใน 4 เรื่องข้างต้น

https://thaiall.com/web2/file_pagespeed.php?file=web2main
https://thaiall.com/web2/file_pagespeed.php?file=web2main&fieldset=blank

performance ของเว็บเพจ บน pagespeed insights

เว็บเพจหน้านี้ ยกร่างโค้ดเว็บเพจขนาดเล็ก ชื่อ index90_100 เพื่อทดสอบให้ผ่านการประเมินตามเงื่อนไข Diagnose Performance Issue ของ pagespeed insights ทั้ง 4 หัวข้อ คือ Performance , Accessibility , Best practice และ SEO ไดคะแนน 100 ทั้ง 4 หัวข้อ โดยมีการปรับแก้ ดังนี้ 1) ปรับลดขนาดแฟ้ม .css ให้มีขนาดเล็กที่สุด 2) ปรับ layout แก้ปัญหา layout shift 3) ใช้ภาพ .webp แทน .jpg 4) ลดขนาดภาพ และเพิ่มความคมชัด และรักษา ratio ให้เท่าเดิม 5) ยกเลิกการโหลด font, css, js จากภายนอกทั้งหมด ซึ่งอิงกับโค้ดเดิม คือ การปรับแก้โค้ดเว็บเทมเพจเดิมในรุ่น 9.0 ที่เคยได้คะแนน 100 มาก่อน ซึ่งการลดขนาดแฟ้มและแปลงเป็น .webp เลือกใช้โปรแกรม irfanview เนื่องจากโปรแกรมมีขนาดเล็ก ทำงานได้รวดเร็ว และใช้งานง่าย

เว็บเพจหน้านี้ ประกาศ style ก่อน body
จึงเขียนโค้ดแบบ responsive web design และใช้ top bar menu แบบแยก desktop กับ mobile แล้วไม่กระทบคะแนน pagespeed

เว็บเพจหน้านี้ มีการเรียกใช้ bootstrap.min.css เมื่อส่งตรวจสอบกับ pagespeed insights พบว่า การเรียกใช้ bootstrap โดยตรงก่อนเปิด tag body จะทำให้คะแนนได้ไม่เต็ม 100 เนื่องจากต้องใช้เวลาระยะหนึ่ง ในการ Load แฟ้มจากภายนอก ซึ่งวิธีหนึ่งในการแก้ไขการ Load bootstrap คือ เขียน function ใน javascript ไว้ท้าย script เพื่อตรวจสอบ EventListener ว่าเป็น load หรือ onload มีผลให้ การแสดงผลหน้าแรก ผ่านการตรวจสอบของ pagespeed เสร็จสิ้นลง จึงจะมีการ load bootstrap ทำให้เงื่อนไขการโหลด bootstrap ไม่มีผลต่อคะแนน pagespeed insights

ส่วนการ load font .ttf นั้น เว็บเพจหน้านี้ เลือกใช้ font-display:optional; กับทุกฟอนต์ที่นำมาใช้ ซึ่งมีผลให้ ระยะเวลาในการ load font มาใช้งานนั้น แน่ใจได้ว่าจะไม่เกิดขึ้นใน 100ms แรก หรือเป็นการโหลดแบบ background with low priority ทำให้มั่นใจได้ว่า pagespeed insights จะตรวจสอบจนจบแล้ว การโหลดฟอนต์มาใช้จึงจะเกิดขึ้น ต่างกับ font-display:swap; ที่ font จะถูก render ทันทีเมื่อมีการโหลด และพร้อมแสดงฟอนต์ ทำให้เกิดปัญหา layout shift ขึ้นได้ และคะแนนส่วนนี้ก็จะไม่ได้ 100 คะแนนเต็ม

Webpage
Bootstrap

https://thaiall.com/web2/index100.htm

https://thaiall.com/web2/index90_100.htm

การใช้ php คุมการเรียก truehits บน https

เนื่องจากผมมี host ที่เรียกใช้ได้ทั้ง http และ https ตัวหนึ่ง ทำให้การทำงานกับ content ยุคปลอดภัย และไม่ปลอดภัย ในการรับส่งข้อมูลดำเนินร่วมทางกันไปแบบคู่ขนาน
..
โดยบริการของ truehits เพื่อเก็บสถิติการเข้าใช้งานเว็บเพจนั้น เปิดให้เจ้าของเว็บไซต์สมัครได้ใน 2 ประเภทหลัก คือ ฟรี และ สนับสนุน ซึ่งแบบสนับสนุน แบ่งได้ 6 แบบ โดยแบบที่ 4 ถึง 6 จะมีบริการ https
หากเป็นแบบฟรีก็ต้องเรียกใช้โค้ดผ่าน http แต่ถ้าแบบสนับสนุนแบบที่ 4 ขึ้นไป ก็จะเรียกใช้ได้ทั้ง http และ https ให้ใช้งานได้ โดยมีค่าบริการตามบริการที่เลือกไว้

/web2/index100.php


แต่การเรียกใช้ truehits แบบ http ใน  https host นั้น ระบบของ truehits ไม่ให้บริการ https สำหรับสมาชิกแบบฟรี ทำให้ค่าสถิติที่แสดงบน truehits เป็นค่าที่มาจากผู้ใช้ที่เข้าถึงเว็บไซต์แบบ http เท่านั้น ซึ่งการดู statistic การ access host นั้น มีผู้ให้บริการอยู่หลายราย แล้วเราสามารถเปรียบเทียบค่าสถิติเหล่านั้นได้
..
พบผลการประเมินของ pagespeed insights ของ Google ว่าขณะเปิดเว็บเพจแบบ https แล้วในเพจ เรียกใช้ script ของ truehits แบบ http จะมีผลประเมินในหัวข้อ Best practice ได้คะแนนลดลงมากกว่า 20 คะแนน ซึ่งได้เขียนโค้ดทดสอบ Library ต่าง ๆ ไว้ที่ /web2/index100 . php จึงรู้ถึงการลดคะแนนนี้
..
ซึ่ง host ที่บริการ php จะมี variables ดูได้จาก phpinfo() ให้เรียกใช้ได้มากมาย ดังนั้นการเรียก url แบบ http และ https จะมีตัวแปรหนึ่ง ที่ระบุว่าเรียกใช้ URL แบบใด เมื่อใช้ตัวแปร _SERVER[“HTTPS”] ทำการทดสอบด้วย isset() แล้วไปสั่งพิมพ์การแสดง JavaScript ของ truehits เพื่อเรียกเปิดการทำงานของ truehits และถ้าเป็น URL แบบ https ก็จะไม่เรียกใช้ สำหรับผู้ใช้แบบฟรี ทำให้ผล pagespeed insights ใน https ได้ 100 คะแนน เนื่องจากไม่ได้รับผลกระทบ ส่วนการเปิด URL แบบ http ยังได้คะแนนลดลงเช่นเดิม เนื่องจากในโค้ดของ truehits ยังมีการทำงานเชื่อมกับ host แบบ https ในฝั่งของ truehits
..
การเรียกใช้ truehits ยังมีวิธีอื่นที่ truehits แนะนำไว้ เช่น iframe หรือ perl ส่วนการใช้งานค่าสถิติก็มีบริการข้อมูลอีกมากมายที่นำมาใช้ประโยชน์ เพื่อพัฒนาเว็บไซต์ของตน หรือองค์กรได้

https://www.thaiall.com/web2/index.php

Truehits.net
phpinfo()

การถ่ายภาพพาโนรามาหน้าโรงเรียน

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

Panorama

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

แผนที่ประเทศไทย
สืบค้นข้อมูล

แชร์ 6 วิธีแก้ปัญหาไอโฟนเชื่อมไวไฟไม่ได้ ทำตามนี้แก้ได้ชัวร์

การใช้งานมือถืออย่างไอโฟน (iPhone) เป็นไอเทมยอดนิยมสำหรับคนรุ่นใหม่จำนวนมาก ด้วยระบบอันแสนทันสมัย ทำงานได้ทุกอย่างตามต้องการ บวกกับความมีเสน่ห์เรื่องของดีไซน์อันแสนหรูหรา มีระดับ ตอบโจทย์ทุกฟังก์ชันขนานแท้ มีฟีเจอร์ความปลอดภัยเยอะมาก อย่างไรก็ตามนอกจากการเชื่อมต่ออินเทอร์เน็ตผ่านระบบ 4G หรือ 5G ของเครือข่ายที่ใช้อยู่ประจำแล้ว การเชื่อมต่อกับไวไฟ (Wi-Fi) ก็เป็นสิ่งที่ช่วยให้การทำงานลื่นไหลมากขึ้น แถมยังไม่สิ้นเปลืองปริมาณข้อมูลอีกด้วย แต่สำหรับคนที่เจอปัญหาไอโฟนเชื่อมไวไฟไม่ได้ ลองนำเอา 6 วิธีนี้ไปแก้ไขและทำตามกันเลย

แชร์ 6 วิธีแก้ปัญหาไอโฟนเชื่อมไวไฟไม่ได้
1. รีสตาร์ท หรือ ปิดแล้วเปิดเครื่องใหม่
วิธีแรกสุดคลาสสิกสำหรับการใช้งานอุปกรณ์ไอทีที่หลายคนมักนิยมทำกันมากที่สุดไม่ใช่แค่ไอโฟนแต่มือถือระบบ Android ไปจนถึงอุปกรณ์ต่าง ๆ นั่นคือ การปิดแล้วเปิดเครื่องใหม่ หรือที่เรียกว่า การรีสตาร์ทเครื่อง สาเหตุที่แนะนำวิธีนี้ไม่ใช่เพื่อความสะดวก ง่ายดายเพียงอย่างเดียว แต่บางครั้งมือถือไอโฟนที่คุณใช้งานอยู่อาจเกิดการ Error มีความบกพร่องหรือข้อผิดพลาดบางประการที่ไม่จำเป็นต้องแก้ไขใด ๆ ให้น่าปวดหัว การแก้ปัญหาไอโฟนเชื่อมไวไฟไม่ได้ที่รวดเร็วมากสุดนั่นคือรีสตาร์ทเครื่องไปเลย จะเลือกกดจากปุ่ม Assistive Touch แล้วเลือกรีสตาร์ท หรือกดปุ่มระดับเสียงพร้อมปุ่มด้านข้างจากนั้นเลือก Slide to Restart ก็ตามสะดวก ขึ้นอยู่กับความถนัดของแต่ละคน

2. เช็กเราเตอร์ไวไฟว่ามีความผิดปกติใด ๆ หรือไม่
วิธีต่อมาหากอุปกรณ์เครื่องอื่นไม่ว่าจะเป็นโน้ตบุ๊ก มือถือ แท็บเล็ต ฯลฯ ไม่สามารถเชื่อมต่อไวไฟได้ นั่นอาจเกิดปัญหาจากเราเตอร์ (Router) ที่ส่งสัญญาณออกมา ให้ลองไปเช็กสัญญาณที่เราเตอร์ว่าเกิดปัญหาอะไรหรือไม่ หากไฟบนเครื่องหยุดกะพริบ มีสีแปลก ๆ หรือปุ่มแปลก ๆ กะพริบขึ้นก็มีความเป็นไปได้ที่อาจเกิดขึ้นเพราะตัวเราเตอร์เอง ให้ทำการติดต่อกับเจ้าของเครือข่ายเพื่อแก้ปัญหา เพราะบ่อยครั้งอาจเกิดเหตุไม่คาดฝัน เช่น ระบบส่งสัญญาณไวไฟล่มจากเครือข่าย สายสัญญาณไวไฟเสียหาย เป็นต้น หรืออีกกรณีหากคุณอยู่ห่างจากสัญญาณที่เราเตอร์ปล่อยสัญญาณออกมามากเกินไปก็อาจไม่สามารถเชื่อมต่อสัญญาณไวไฟกับไอโฟนได้เช่นกัน

3. ปิดไวไฟบนเครื่องไอโฟนแล้วเปิดใหม่อีกครั้ง
วิธีนี้สำหรับคนที่ไม่อยากปิด-เปิดเครื่องใหม่ให้ยุ่งยากเสียเวลา ก็สามารถใช้วิธีตัวรับสัญญาณไวไฟบนไอโฟนจากนั้นก็เปิดใหม่อีกครั้งได้ วิธีคือเลื่อนแถบด้านบนลงมาแล้วกดปิดไวไฟจากนั้นค่อยเปิดใหม่ หรือจะทำการเปิดแอปการตั้งค่า แตะเลือก Wi-Fi ให้เป็น Off รอสักพักแล้วกดเปิดเป็น On เพื่อเชื่อมต่ออินเทอร์เน็ตไวไฟ แล้วลองเช็กสัญญาณว่าสามารถใช้งานได้หรือไม่

4. ลบเครือข่ายทิ้งแล้วเชื่อมต่อใหม่
อีกวิธีแก้ปัญหาไอโฟนเชื่อมไวไฟไม่ได้ อาจเกิดจากระบบของเครื่องเกิด Error บางประการ ซึ่งเป็นสิ่งที่พบเจอได้ในบางครั้งบางคราว วิธีแก้การเชื่อมต่อไวไฟบนไอโฟนไม่ได้อีกเทคนิคนั่นคือ การลบเครือข่ายดังกล่าวทิ้งไปด้วยการกดไปยังแอปการตั้งค่า เข้าไปยังหน้าเครือข่ายที่เชื่อมต่อ กดค้างบนเครือข่ายแล้วเลือก Delete จากนั้นให้ทำการปิดสัญญาณรับไวไฟเป็น Off สักครู่ แล้วค่อยเปิดให้เป็น On อีกครั้ง รอการค้นหาเครือข่ายจนเจอเครือข่ายเดิมที่ต้องการแล้วกดไปบนชื่อเพื่อให้เกิดการเชื่อมต่อ ที่สำคัญต้องไม่ลืมรหัสผ่านของเครือข่ายดังกล่าวด้วย ไม่เช่นนั้นก็ไม่สามารถเชื่อมต่อได้ไปตลอด

5. เปิดโหมดเครื่องบิน
สำหรับวิธีนี้ก็ยังคงไว้ซึ่งความง่ายดาย สะดวก และเชื่อว่ามีคนจำนวนไม่น้อยนิยมใช้อย่างมาก นั่นคือการเปิดโหมดเครื่องบิน ให้เข้าไปยังหน้าการตั้งค่าแล้วกดรูปเครื่องบิน หรือ Airplane Mode จากนั้นทุกการเชื่อมต่อของคุณจะถูกตัดสัญญาณทั้งหมดไม่ว่าจะเป็นสัญญาณ Wi-Fi สัญญาณเครือข่ายมือถือ สัญญาณ Bluetooth วิธีต่อมาให้ลองกดเปิดเฉพาะปุ่มไวไฟแล้วรอให้มีการเชื่อมต่อกับเครือข่ายที่ต้องการใช้ หากยังคงเชื่อมต่อได้ตามปกติก็ค่อยปิดโหมดเครื่องบินเท่านี้ก็เรียบร้อย แก้ปัญหาไอโฟนเชื่อมไวไฟไม่ได้ภายในเวลาไม่กี่นาที

6. รีเซตเครือข่ายไวไฟทั้งหมด
วิธีสุดท้ายสำหรับคนที่พยายามทำทุกวิถีทางแต่ก็ยังไม่สามารถเชื่อมต่อไวไฟกับไอโฟนได้สำเร็จเสียที ให้ใช้เทคนิคการรีเซตเครือข่ายไวไฟทั้งหมดดู วิธีการก็ไม่ได้ยุ่งยากทำตามได้ดังนี้

เปิดเข้าไปยังแอปการตั้งค่า – กดเลือกทั่วไป – กดเลือกถ่ายโอนหรือรีเซตไอโฟน – กดที่รีเซต – กดรีเซตการตั้งค่าเครือข่าย – ทำการใส่รหัสเครื่องที่ใช้งาน – กดยืนยันการรีเซตตั้งค่าเครือข่าย
เมื่อทำตามขั้นตอนทั้งหมดเรียบร้อยให้ทำการเปิดค้นหาเครือข่ายไวไฟแล้วลองเช็กว่าสามารถเชื่อมต่อได้หรือไม่ด้วยการกดไปยังเครือข่ายดังกล่าวแล้วใส่รหัสผ่าน

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

ขอขอบคุณข้อมูลจาก 789MB.com

แบตเตอรี่สำรอง ของต้องมี เพื่อให้
มีพลังงานไม่สะดุด

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

https://vt.tiktok.com/ZSFqRQ7bU/

Powerbank

แบตเตอรี่สำรอง
ของมันต้องมี
เพื่อให้มีพลังงานไม่สะดุด
#powerbank
#battery
#perfect
#premiumperfect
#giftset
#csr
#ของที่ระลึก
#souvenir
#brand

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

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

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

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

วันนี้ได้ทดสอบ ตรวจ 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 อย่างต่อเนื่องหลายปีติดต่อกัน ให้ได้เรียนรู้เรื่องราวเกี่ยวกับธุรกิจ สินค้า บริการต่าง ๆ ก็หาเวลาไปตามอ่านอยู่ครับ มีเนื้อหาที่น่าสนใจเยอะมาก

ttpcargo.com blog

PWA เริ่มใช้ที่รุ่น 8.2

เมื่อ 23 มี.ค.65 เริ่มปรับ /web2 และ /pwa เป็นรุ่น 8.2 มีการปรับที่สำคัญ คือ การทำให้ webpage สามารถแสดงผลเหมือนเป็น mobile app ซึ่งการใช้งาน เริ่มจากเปิด webpage ผ่าน browser บน mobile แล้วเลือก “เพิ่มไปที่ , หน้าจอหน้าแรก” จะมี icon ปรากฎบน mobile ถือเป็นการติดตั้งเรียบร้อยแล้ว ต่อจากนั้น เมื่อเริ่มใช้งาน เราสามารถคลิ๊ก icon บน mobile จะมีหน้าตาเหมือน application แต่ระบบข้างหลัง คือ browser เช่นเดิม

โจทย์นี้ เคยมีเพื่อนต้องการให้แสดง webpage แบบ full screen บน browser ซึ่งมีกรณีศึกษาที่ดำเนินการเทียบเคียงได้กับหนังสืออีเล็กทรอนิกส์ Peter rabbit ทำให้ผมนึกถึงการทำงานของ PWA ที่เคยแกะโค้ดไว้เมื่อปี 2560 แต่เป็นคุณสมบัติการทำ Full screen ที่แตกต่างกัน แล้วเห็นว่าความสามารถของ PWA นี้น่าสนใจ จึงเริ่มต้นนำร่องปรับใช้กับ 2 โฮมเพจนี้ ซึ่งการใช้งานก็เพิ่มโค้ดไปเพียง 2 tag ในบรรทัดที่ 6 คือ 1) กำหนดค่ารายการในแฟ้ม manifest ที่ต้องปรับสำหรับแต่ละหน้า และ 2) เรียกสคลิ๊ป material.min.js ซึ่งเป็นองค์ประกอบสำหรับการออกแบบที่เรียกใช้ค่าจากแฟ้ม manifest

http://www.thaiall.com/pwa/

http://www.thaiall.com/web2/

https://github.com/kongruksiamza/PWATutorial/

ห้องเรียนจักรวาลนฤมิต

การเรียนการสอนในห้องเรียนจักรวาลนฤมิตอาจเป็นจริงในเร็ว ๆ นี้
พบว่า ในงาน MWC 2016 นั้น Mark Zuckerberg ได้แสดงให้เห็นชัดเจนว่า “VR is the Next Platform” เป็นภาพที่ถูกตั้งคำถามว่า “นี่เปรียบเสมือนมโนภาพอนาคตของเรา” (allegory = การสมมติ) ผู้ร่วมประชุมได้ใช้อุปกรณ์ Gear VR แบบสวมหัว เข้าสู่โลกเสมือนจริง (22 ก.พ.2016) ซึ่ง Facebook ได้ซื้อ Oculus (25 มี.ค.2014) ผู้นำเทคโนโลยี VR มูลค่าประมาณ 2 พันล้านเหรียญสหรัฐฯ พัฒนาต่อยอดเป็น Metaverse ให้ทุกคนเข้าไปใช้ชีวิตกันในโลกเสมือนจริงได้ใกล้กว่าที่เคย คำว่า ห้องเรียนจักรวาลนฤมิต คือ การจัดการเรียนการสอนที่ห้องเรียนจะมีสภาพแวดล้อมของโลกเสมือนจริง

ห้องประชุมจักรวาลนฤมิต

https://www.blognone.com/node/78174

https://www.cbsnews.com/news/mark-zuckerberg-vr-virtual-reality-headset-photo/

https://www.theverge.com/2016/2/22/11087890/mark-zuckerberg-mwc-picture-future-samsung

site icon ของบล็อกนี้ ปรับ ก.พ.65

WordPress มี Site icon ในหัวข้อ Site Identity ให้เลือก upload ภาพประจำไซต์ฺได้ ซึ่งบล็อกนี้เลือกใช้ Twenty Sixteen สามารถกำหนดภาพได้
ประกอบกับช่วงนี้เตรียมตัวอย่างชุดภาพที่วาดด้วย Vector โดยเลือกวาดตัวเองอย่างง่าย สวมเสื้อหลากสี ด้วย Powerpoint แล้วส่งออกเป็น png เพื่อนำไปช้งาน ซึ่งภาพใน Powerpoint กำหนด slide ไว้ 6 ซม * 6 ซม จะุได้ภาพส่งออกเป็น 227px * 227 px โดย 37.83 = 1 ซม. ดังนั้นภาพ 10 ซม. * 10 ซม. ก็จะได้ขนาด 378px * 387px ภาพนี้ชื่อ face_01 เป็น vector ถือเป็นเซตแรกที่ได้วาดภาพคน ไม่ได้สวยใส่ หล่อเหล่า จมูกโด่ง คางแหลม ๆ แต่ผมก็ชอบในแบบของผม จึงเลือกมาเป็น site icon ของบล็อกนี้ ขนาดต้นฉบับที่ส่งออกจาก powerpoint มีขนาด 227px แต่ wordpress ต้องการ 512px จึงใช้ irfanview ทำการ resize เป็น 512 px แล้วจึงอัพโหลดเข้าไปในบล็อก

face_01