chrome – iT Blog

ค้นหาเพื่อแก้ไขใน wordpress

วันนี้เพื่อนเก่าคนหนึ่ง
ทักมาให้ช่วยหาสิ่งหนึ่ง
ใน wordpress ว่าแก้ไขตรงไหน
ปัจจุบันองค์การมากมายใช้งาน
ระบบ content management system
เพราะรองรับความต้องการได้ครบ
และถูกพัฒนาอยู่ตลอดเวลา
สรุปว่าเพื่อนเค้าก็เลือกใช้ระบบนี้ครับ
และมีสิ่งหนึ่งที่หาวิธีแก้ไขไม่พบ
.
เป็นงานฟื้นฝอยหาตะเข็บ
ว่าสิ่งที่จะแก้ไขนั้น
อยู่ตรงไหนในเมนูหลักหลังบ้าน
เพราะคลิกหาแล้วไม่พบ
มีตัวเลือกมากมาย และอยู่ลึก
เข้าไปแก้ไขข้อมูลไม่บ่อย
นานทีมีหน ถึงจะเข้าระบบหลังบ้าน
.
พอทราบความต้องการ
และสิ่งที่จะแก้ไข
ผมก็ใช้ browser เปิดดู
แล้วเปิด developer tools
จากนั้นก็ใช้ mouse ชี้ไปตำแหน่งนั้น
.
มองหาชื่อ class
พบว่าคุ้นเคยชื่อนี้มาก
แต่ก็ยังนึกไม่ออก
เพราะเป็นระบบของเพื่อน
ที่ผมก็ไม่เคยใช้งานสิ่งนี้
.
จึงนำชื่อ class
ส่งไปค้นหาในอินเทอร์เน็ต
จนพบว่านี่เป็นชื่อ plug in ตัวหนึ่ง
จึงกลับไปดูรายชื่อ plug in
ในระบบ administrator ที่อยู่หลังบ้าน
ก็พบว่าสามารถแก้ไขข้อมูลได้
ตามโจทย์ที่เพื่อนต้องการ
.
สรุปว่า ส่งข้อความไปบอกเพื่อนแล้ว
ว่าจะเข้าไปแก้ไขจากตรงไหน
มีเพื่อนก็ช่วยเพื่อน พอช่วยได้ก็ช่วยกัน
ไม่เหลือบ่ากว่าแรงก็ช่วยกันไป
ตามประสาน้ำพึ่งเรือ เสือพึ่งป่าครับ

#searching
#wordpress
#cms
#backend
#school
#coding

https://vt.tiktok.com/ZSFjMjqGK/

https://fb.watch/qeuTQsj9Xw/

บันทึกคลิปวิดีโอ สลับ scene บน fb live

การบันทึกคลิปวิดีโอด้วย Facebook live แล้ว Download มาเป็น .mp4 แล้ว Upload ไปยัง youtube.com โดยใช้เนื้อหาเรื่อง หมอพร้อม และ 7 ข้อเตรียมตัวก่อนฉีดวัคซีน ซึ่งการสลับ scene ใช้การกด alt-tab ส่วนกล้องวิดีโอใช้ Extension / Apps บน Chrome ชื่อ Camera เลือกใช้ได้ทั้ง 2 apps คือ 1) turn camera on 2) chromeos-cameraapp ใน Facebook live จะแชร์แบบ Share : Your Entire Screen และเตรียม Scene ให้เลือกใช้สลับไปมาตามเนื้อหา ดังนี้ 1) Webpage 2) Camera 3) Image บนโปรแกรม Irfan View ซึ่งการบันทึกครั้งนี้ ผลลัพธ์ดูลื่นไหล และเป็นธรรมชาติระหว่างสลับ Scene ในระดับหนึ่ง ซึ่งข้อดี คือ ไม่ต้องติดตั้งโปรแกรมสำหรับถ่ายทอดที่ควบคุมซีน หรือตัดต่อแยกออกมาจากการบันทึกอีกครั้ง

undefined ใน console ของ browser มาได้อย่างไร

เพื่อตอบคำถามว่า undefined
เมื่อสั่ง console.log(5); นั้น มาได้อย่างไร

http://www.thaiall.com/java/js01.htm

ก็คงต้องชวนอ่านเรื่อง และดูจากตัวอย่าง ต่อไปนี้

มีหลายวิธี
ในการเขียนโค้ด (code) และประมวลผล (run) การทำงานของโค้ดด้วยภาษา javascript อาทิ เขียนโค้ดแล้วบันทึกในแฟ้ม x.htm แล้วประมวลผลใน browser หรือ เขียนบน เว็บไซต์ที่บริการแบบ online หรือ เขียนโค้ดแล้วใช้ node.js เป็นตัวแปล (interpreter) หรือ เขียนใน console บน browser ซึ่งการเขียน code พื้นฐานและทดสอบใน console บน browser นั้น ถือว่าเป็นวิธีการที่ง่ายที่สุด เสมือนเขียน javascript บน IDE (Integrated Development Environment)

การเขียนใน console บน browser
หากเลือกใช้ chrome browser ก็เข้าสู่ console ด้วยการกด F12 หรือ Ctrl-Shift-I หรือเลือก Developer Tools จาก Menu bar จะพบหน้าต่างที่มีบริการหลายอย่าง อาทิ การเป็น inspector เพื่อดู sources, elements หรือดูค่าที่ปรากฎใน console หรือ รับคำสั่งประมวลผลใน console ซึ่งหน้าต่าง console มักรองรับการสั่งงานด้วยคำสั่ง console.log(…); เพื่อติดตามตรวจสอบ ตัวแปรที่ต้องการติดตาม เนื่องจากเว็บเพจมี javascript ในการประมวลผล หากต้องการทราบว่าข้อมูล ณ ตำแหน่งใด มีค่าใดแล้ว การใช้ console.log(…) จะเหมาะสมอย่างยิ่ง เพราะผลของคำสั่งนี้จะไม่แสดงผลใน webpage แต่จะแสดงผลใน console window ทำให้ทราบข้อมูลที่ต้องการ

ในกรณีรับคำสั่งประมวลผลใน console
หากส่งค่าให้คำนวณ เช่น 1 + 2 + 3 ก็จะ return 6 มาตามปกติ
แต่ถ้าใช้คำสั่ง console.log(1 + 2 + 3); มักพบคำว่า undefined ปรากฎขึ้นมาอีก 1 บรรทัดเสมอ เนื่องจาก console window มีหน้าที่หลัก เป็นพื้นที่ในการรองรับการประมวลผล และ return value
หากพิมพ์คำสั่งใด ก็ต้องมีการ return value เสมอ หากไม่ return value ก็จะทำการ return undefined ต่อท้ายทุกครั้ง และคำสั่ง console.log(..); ไม่มีการ return ค่าโดยตรง แต่เป็นการส่งค่ามาแสดงผลใน console window โดยตรง ซึ่งไม่ใช่การ return value

ตัวอย่างการทำงานใน console window กับการ return ค่า
ตามภาพการใช้คำสั่ง พบว่า ตัวอย่างที่ 1, 2 และ 6 จะ return ค่าให้ console ได้ปกติ ตัวอย่างที่น่าสนใจ คือ คำสั่งที่ 8 แม้จะพิมพ์เพียง ; คือ เสมือนไม่สั่งอะไรเลย ใน console window ก็ยังแสดงคำว่า undefined เพราะไม่มีการคืนค่าใด ตัวอย่างที่ 2 เป็นการประกาศ และกำหนดค่า จะมีการคืนค่าออกมา จึงแสดงเลข 5 เป็นผลลัพธ์ แต่ ตัวอย่างที่ 3 เป็นการประกาศค่า ที่ไม่คืนค่าหลังประกาศ เนื่องจากใช้ var จึงแสดง undefined ตัวอย่างที่ 4 และ 5 แม้ใช้ console.log() แต่การพิมพ์คำสั่งนี้โดยตรงใน console จะไม่คืนค่าให้ console window แต่แสดงผลทันที หากใช้คำสั่งนี้ใน javascript ก็จะส่งค่าให้กับ console window เพื่อแสดงผลได้ปกติ ซึ่งเป็นคนละสถานการณ์ ตัวอย่างที่ 6 สามารถรับคำสั่งได้หลายคำสั่ง แล้วทำทีละคำสั่ง แต่คำสั่งสุดท้ายต้องเป็นการคืนค่าโดยตรง จะสลับให้ console.log() อยู่บรรทัดสุดท้าย ก็จะพบคำว่า undefined เช่นเดิม

ความแตกต่างของ 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>

เมื่อสปาร์ตั้นมา ไออีก็ไป (itinlife492)

โปรแกรมประเภทบราวเซอร์ของบริษัทไมโครซอฟท์ชื่ออินเทอร์เน็ตเอกซ์พลอเรอร์ (Internet Explorer) มีชื่อย่อว่าไออี (IE) โดยเปิดตัวปี 2538 ถูกใช้มานานกว่า 20 ปี ซึ่งรุ่นแรกใช้กับระบบปฏิบัติการวินโดวส์ 95 จนถึง IE11 ในวินโดวส์ 8.1 แล้วปี 2558 ก็มีข่าวว่าวินโดวส์ 10 จะใช้โปรแกรมสปาร์ตั้น (Spartan) แทนไออี และไออีก็จะหายไปในที่สุด จากผลการทดสอบในภาพรวมจากหลายแหล่ง พบว่า สปาร์ตั้นทำงานได้มีประสิทธิภาพกว่าไออีเดิมอย่างเห็นได้ชัด เมื่อเทียบกับ Chrome, Firefox, Opera หรือ Safari ก็ยังมีบางด้านที่คู่แข่งทำงานได้ดีกว่า

browser ranking http://www.w3schools.com/browsers/browsers_stats.asp

ชื่อโปรแกรมสปาร์ตั้น ไปคล้ายกับชื่อเผ่านักรบโบราณในกรีซ ที่เราเห็นความกล้าหาญในภาพยนตร์เรื่อง 300 ที่ถูกยกย่องว่ามีการฝึกฝนอย่างหนัก มีความกล้าหาญ อดทน ระเบียบวินัย และเก่งกล้าในการรบ การเปลี่ยนไปใช้ชื่อบราวเซอร์ว่าสปาร์ตั้นแทนไออีของบริษัทไมโครซอฟท์ก็คาดว่าจะหวังผลทางการตลาด ที่เคยใช้ชื่อเดิมมากกว่า 20 ปี แต่ถูกชิงบัลลังก์ความเป็นเบอร์หนึ่งไป หากจะชิงบัลลังก์คืนมาก็ต้องมีกลยุทธ์ใหม่อีกหลายอย่าง ซึ่งกลยุทธ์หนึ่งคือการเปลี่ยนชื่อ (Rebranding) สิ่งที่เปลี่ยนชัดเจนคือการใช้ Engine ใหม่ชื่อ EdgeHTML สำหรับเว็บไซต์รุ่นใหม่ แต่ถ้าเป็นเว็บไซต์เก่าก็จะใช้ MSHTML ที่เคยใช้ใน IE11

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

ranking http://internet-browser-review.toptenreviews.com/

http://hitech.sanook.com/1393789/

http://www.manager.co.th/Cyberbiz/ViewNews.aspx?NewsID=9570000149862

http://pantip.com/topic/30810184

ตัวเลขไม่ออก เลข 1 แสดงเป็น NK

พบปัญหาเมื่อเขียนเว็บเพจหน้าหนึ่ง

ที่มี code เป็นร้อยบรรทัด

แสดงผลใน chrome browser แล้วเลขไม่ออกดังคาด

ความเป็นไปได้ของปัญหา .. มีสารพัด

แต่แสดงผลใน firefox กับ ie ไม่มีปัญหา

ประเภทแฟ้ม .php กับ .html ก็ให้ผลเหมือนกันคือมีปัญหา

เมื่อคัดลอก source code ไปไว้ใน localhost ไม่พบปัญหา

ทดสอบแก้ปัญหา
โดย upgrade version ของ chrome

สรุปว่า ปัญหาหายไป เห็นตัวเลขได้ปกติ
แสดงว่า version ของ browser ที่ใช้อยู่มีปัญหา

แล้วได้ผลดังภาพประกอบ

วิธีแก้ไข คือ เปลี่ยน version ของ browser เป็นรุ่นล่าสุด

เรื่องดีดี แสดงไม่ดีกับ firefox กับ chrome

บ่นตามปาะสาคนที่เด็ก ๆ เรียกว่า “ลุง”
ผมเป็นพวกมีอดีต เห็นเรื่องดีดีทีไร .. แล้วอดกลุ่มใจไม่ได้
เพราะเตรียมสอนจาวาแก่นักศึกษา แล้วพบ tag <DD>
ที่เคยใช้สิบกว่าปีก่อนแล้ว ในเว็บเพจต่าง ๆ ที่ต้องจัดย่อหน้า
พบว่า browser : firefox กับ chrome
แสดงผลผิดเพี้ยนไป แต่ ie ก็ยัง ok
จะให้ดีก็ต้องตามแก้ ตามเวอร์ชัน ตามตามกันไป .. จนหมดแรง

มี HTML Tag จำนวนไม่น้อยที่หายไปกับกาลเวลา
ที่มาตรฐานใหม่ไม่รองรับ เช่น <DD>
ในภาษา PHP ก็เช่นฟังก์ชัน split ซึ่งการเลิกบริการอาจมีหลายคำ
เช่น DEPRECATED หรือ Not available

แล้วก็ต้องไล่ตามมาตรฐานกันเรื่อยไป
1. HTML 3
2. HTML 4.01
3. XHTML
4. HTML 5

ที่หนักสุด คือ HTML 5 ที่บอกว่ามาแล้ว (นานแล้วด้วย)
แต่ยังไม่เป็นที่สิ้นสุด ไม่เป็นมาตรฐานเดียว กำลังพัฒนาอยู่
เห็นเขาเรียกว่า ยืดหยุ่น (Flexible)
เพียงแต่ code เก่า ๆ ของผมไม่ยืดตาม ก็เลยเห็นปัญหาเป็นประจำ

บางเหตุผลที่ทำให้ chrome เป็นเบอร์ 1

16 พ.ค.55 ในระบบรายงานสถิติของ truehits.net แสดงให้เห็นว่ามีผู้ใช้ chrome จำนวนมาก จากสถิติการเข้าเว็บไซต์ของ thaiall.com เมื่อพฤษภาคม 2555 พบว่ามีผู้ใช้ chrome มากเป็นอันดับ 1 ราว 46% สลับกับ IE ซึ่งใกล้เคียงกัน 45% แต่อันดับสามคือ firefox 10% .. ซึ่งผมใช้ความรู้สึกในฐานะของสาวก firefox ตัวข้อสงสัยว่าจริงหรือ .. แต่แล้วก็พบเหตุที่ทำให้เป็นเช่นนั้น
1) เมื่อเข้าใช้บริการ google doc แล้วพบข้อความว่า browser ที่คุณใช้อยู่ไม่สนับสนุนการใช้ google doc ถ้าให้ดีควร ใช้ chrome .. เพราะขณะนี้ใช้ firefox อยู่
2) ใน imobile หรือ samsung galaxy ที่ใช้ android ต่างก็ใช้ chrome เป็น default browser แม้มีหลายค่ายให้เลือก แต่คำว่า default browser นี่ชนะมานักต่อนักแล้ว

ทดสอบ Skype june 2554

25 มิ.ย.54 หลังติดตั้ง Skype ก็ต้อง Signup แล้ว Signin เมื่อเลิกใช้ก็ Signout ในการ Signup จะขึ้นหัวว่า create a new skype account ผมใช้ชื่อว่า ajarnburin (blog) การสมัครไม่ต้องยืนยันผ่าน e-mail ก็ใช้งานได้ครับ .. สรุปว่าผลการทดสอบสื่อสารระหว่าง Notebook และ PC ไม่มีปัญหา คาดว่าในอนาคตจะสื่อสารในครอบครัวด้วยวิธีนี้ เพราะในอดีตใช้ MSN ทำ Video Call ข้ามจังหวัดแล้วไม่สำเร็จ แต่ทดสอบที่บ้านไม่มีปัญหา เมื่อใดที่ออกต่างจังหวัดก็จะมีปัญหาทุกครั้งไป วันนี้ทดสอบใช้ Video Call ที่บ้าน ระหว่าง PC กับ Notebook ก็เรียบร้อยดี ไม่มีปัญหาครับ

เริ่มทดสอบก็ค้นหาคนชื่อ thaiall (blog) เมื่อพบก็กดปุ่ม Add contact แล้วก็ Send Request เมื่อกลับเข้าจอหลักของ Skype ก็พบรายชื่อเพื่อนที่เพิ่มใหม่ คลิ๊กชื่อด้านซ้าย แล้วคลิ๊กปุ่ม Call ส่วนเพื่อนที่ได้รับคำร้องขอเป็นเพื่อก็ต้องกดปุ่ม Add to Contact เพื่อรับเป็นเพื่อน .. เมื่อ thaiall ขอติดต่อกับ ajarnburin ผู้รับก็ต้องคลิ๊ก Answer หากต้องการส่ง Video ก็ต้องคลิ๊กที่ภาพ Video บนเมนูบาร์

จุดเด่นของ skype คือทำ video full screen ได้ และเป็นที่นิยมครับ
การทดสอบครั้งแรกที่ http://www.thaiall.com/blog/burin/878/

ตรวจ cache ของ browser ทั้งห้า

31 ก.ค.53 ทดสอบ browser ทั้งหมด 5 โปรแกรม คือ safari, firefox, chrome, opera และ ie พบว่าหลังติดตั้ง ie8 ต้อง restart แต่กับ 4 ตัวก่อนหน้านี้ ติดตั้งแล้วใช้งานได้ทันที ทำให้ผมไม่ทดสอบ ie8 เพราะเครื่องนี้ติดตั้ง deepfreeze และคาดว่าผลน่าจะเหมือนกับ ie6 ส่วนเรื่องการจัดการ cache ซึ่งเก็บแฟ้มที่ได้จากการ download webpage พบว่าทดสอบ download clip จาก youtube.com จะมีเพียง safari ที่ไม่เก็บ clip จากการ download ในห้อง Application Data แต่เห็นร่องรอยการ download ในห้อง Temp เหมือนกันโปรแกรมอื่น .. อาจสรุปเบื้องต้นได้ว่านอกจาก safari แล้ว browser ตัวอื่นทิ้งแฟ้ม clip ให้ผมคัดลอกออกมาจาก cache และเติมสกุล .flv ก็จะนำไปใช้ได้