เปิดแอป Google Keep ก็รู้สึกว่าสร้างขยะ (คือผมชอบมานั่งจัดระเบียบมันให้สะอาดๆ น่ะ โรคจิตพอสมควร)

จะเข้าเว็บ Notepad ต่างๆ ที่ bookmark ไว้ ก็ลืมชื่อ 5555555555 รู้สึกว่ามันจะมีป้ายโฆษณาหรือปุ่มสักอย่างที่ดึงดูดความสนใจเราเกินไป

คือแค่จะจด จะร่างข้อความน่ะ พิมพ์เสร็จ ก๊อปปี้แล้วก็ไป ไม่เอาอะไรแล้ว

เอ๊ะเขียนเองก็ได้นี่หว่า! เลยเปิด Gemini (แบบฟรีด้วยนะวันนี้) พิมพ์สั่งมันไป 1 นาที ให้มันเจนโค้ดอีกครึ่งนาที เสร็จแล้ว พระเจ้า ฉันดีใจที่เกิดทันยุคนี้

ลองใช้ดู

anndo.com/n

• เว็บนี้ (ทำเป็น webapp ได้) ไม่มีอะไรเลย เป็นหน้าจอโล่งๆ สะอาดและเร็ว
• สลับ dark/light mode ได้
• มีปุ่มเคลียร์ และปุ่มก๊อปปี้ข้อความ
• ไม่ต้องล็อกอินอะไรเลย เปิดมาคราวหน้าก็ยังคงมีข้อความนี้อยู่ในเครื่อง

นึกได้ตอนเขียนบล็อกนี้ว่า เอ๊ะถ้าล็อกอินแล้วให้มันเซฟข้อความไว้ใช้ข้ามเครื่องได้ล่ะ คงดี!

แต่ก็หยุดไว้ทันที เพราะถ้าใส่อะไรเข้าไปอีก มันก็จะไม่รู้สึกเบาแล้ว เอาเท่านี้พอ

ก็เลยเกิดเป็น WP Simple Search and Replace ขึ้นมา

พอติดตั้งเสร็จ เข้าไปในเมนู Tools > Search & Replace ก็จะเจอหน้าตายังงี้

ก็กรอกไปเลยว่าจะให้ค้นอะไร แก้เป็นอะไร จากใคร

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

โดยโจทย์คือฉันจะทำตามใจตัวเองที่สุด โดยการใช้งานก็มีแค่ปั่นไปไหน จอดถ่ายรูป เก็บใส่บล็อกเอาไว้ แล้วก็ไปต่อ มันควรจะง่ายจนแทบจะไร้พิธีรีตรองใดๆ ทั้งสิ้น จึงตั้งใจทำเป็นหน้าตา Photo Blog ที่ออกมาใช้ง่าย แบบซีเรียสเลย ง่ายจริงๆ จังๆ

ซึ่งก่อนยุค เไ นี้เราพยายามหาธีมแบบ minimal มาใช้เท่าไหร่ มันก็ยังไม่ตอบโจทย์ตัวเอง เลยอัญเชิญวาทะของท่าน สส.มาร์คมาใช้ครับ “อยากได้ต้องทำเอง”

ปรับแต่ง รื้อ จูนอยู่วันนึง ก็เสร็จออกมาเป็นธีมชื่อ minimal-photoblog ครับ
และเพื่อเป็นการบูชาครู ขอ แจกให้ดาวน์โหลดได้ฟรีเช่นเคย

สอนการเพิ่มวิธีการติดตั้งหน้า Compose สำหรับคนใช้ WordPress ไม่คล่องครับ (ถ้าไม่อยากใช้ก็ไม่ต้องทำ)

1. เอาไฟล์ page-new.php ไปใส่ในโฟลเดอร์ธีม
2. เข้าไปที่หลังบ้าน WordPress Pages -> Add New Page
3. ตั้งชื่อหน้าว่าอะไรก็ได้ (เช่น Compose)
4. มองหาเมนู Template ด้านขวามือ ให้เลือกเป็น New Post แล้วกด Publish
5. เวลาจะโพสต์ ก็แค่เข้าไปที่เว็บคุณตามด้วยลิงก์ชื่อเพจนั้น (เช่น iannnnn.com/compose)

อ้อ หน้า Compose นี่ ถ้าเรา Add to Home Screen บนมือถือ ก็จะได้เป็น “แอปโพสต์บล็อก” ที่เร็วสุดๆ 1 ตัวครับ (ใส่ favicon ได้ด้วย)

นอกจากนี้แล้ว ขอโฆษณาสิ่งที่เขียนในโปรเจกต์เดียวกันนี้เมื่อเย็นวานอีก เป็นปลั๊กอิน 3 ตัว

1. WordPress Plugin : Move from Tumblr เอาไว้ย้ายบ้านจาก Tumblr มา WordPress
2. WordPress Plugin : Delete All Post เอาไว้ลบโพสต์ทุกโพสต์หายในปุ่มเดียว (อันตรายนะเนี่ย)
3. WordPress Plugin : Convert Classic Posts to Native Blocks แปลง Classic Format เป็นระบบ Block ที่ทำให้แก้ไขปรับแต่งอะไรๆ ง่ายบน WordPress

แจกฟรีหมดเลย มีอะไรสงสัย หรือแนะนำ ทวีตมาถามได้ที่ @iannnnn

คือบางทีเวลาเรา import blog post จากที่อื่น (เช่นอย่างเราตอนนี้คือ Tumblr) จะพบว่าบางทีโค้ดมันไม่ได้มาตรฐานของ WordPress มันก็จะแสดงเป็น Classic Blocks ซึ่งอาจจะทำให้มือไม้คัน นอนไม่หลับได้

ก็ใช้ตัวนี้แปลงซะ : Convert Classic Posts to Native Blocks

กดตุ่มเดียวมันก็จะหั่นๆ ซอยๆ ให้ เป็นบล็อกแบบที่ WordPress ชอบ ทีนี้ก็กดแก้ไขอะไรๆ ง่ายละ

ต่อมา เราพบว่ามันมีปัญหานิดนึงตรงที่บางทีมันติดแท็กหรือค่าอะไรแปลกๆ มาด้วย ก็ให้คลีนซะ ด้วยการสร้างปุ่มที่ 2 ขึ้นมา

มันจะล้างค่าที่ error ให้สะอาด จบละ

กดทีเดียวแปลงทั้งเว็บเลย ถ้าไม่พอใจหรืออยากแก้ไขก็โหลดไปแก้เอาเอง เดี๋ยวนี้ เไ มันช่วยได้หมดละ

เน้นว่า “มีภาพมาด้วย” (ซึ่งการ import / export แบบปกติจะไม่ให้มา)

วิธีการคือต้องไปลงทะเบียนแอปของ Tumblr ก่อน เพื่อเอา API Key มา (ถ้าทำไม่เป็นก็เดาๆ เอา ในลิงก์ก็มีบอก)

เสร็จแล้วก็เอามากรอกในหน้าปลั๊กอินได้เลยครับ กรอกแค่ URL และ API Key แล้วก็นั่งจิบน้ำขิงรอได้เลย

อย่างของผม ย้ายบล็อกเดิม (ตีนใหม่หัดปั่น) ที่ ride.iannnnn.com ของเดิมมันจะเป็นการยิงไปที่ Tumblr แต่จะย้ายมาเป็น WordPress ที่เป็น Sub-Domain ในบล็อกนี้ซะเลย

ก็ปล้ำๆ ไปกับ Gemini จนทำเสร็จเรียบร้อย

• มันจะค่อยๆ ดูดทีละโพสต์ช้าๆ กันโดนบล็อก หรือ key เต็ม
• มีรายงานให้ดูว่าถึงไหนแล้ว
• โครงสร้างวันที่น่าจะเหมือนเดิมนะ (ตอนนี้ของผมดูดอยู่ มี 500 กว่าโพสต์ ยังไม่เสร็จ 5555)
• อย่าลืมว่าน้องดูดภาพได้ด้วยนะ! โคตรเจ๋ง!

ระหว่างรอน้องดูด ก็เขียนธีมใหม่รอไปด้วยเลย แฮ่

ปลั๊กอินนี้ทำมาแจกฟรี เป็นภาษาไทย ถ้าคุณเป็นชาวต่างชาติ ก็กดแปลภาษาเอาเอง มันใช้ได้แหละ ไม่มีอะไรซับซ้อน

ดาวน์โหลดได้ที่นี่ครับ : Tumblr Photo Migrator

From my very short and simple prompt in Gemini.

Warning: When you press “delete all posts”.
It will clear your website posts permanently. Cannot undo.

That’s it.

ล่าสุดเมื่อคืนก็เพิ่งทำเว็บอัปเดต เป็นภาคต่อที่รื้อเว็บเดิมแล้วทำใหม่เรียกว่าเกือบทั้งหมด คราวนี้ใช้ Gemini ครับ

อ้ะ ลองดูก่อนนะพี่ชาย

anndo.com/u

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

ปรากฏว่ามันเป็นเว็บแอปที่เราเองใช้บ่อยมากๆ เพราะว่างๆ กินข้าวเสร็จก็มานั่งหัดดีดเพลง ตุ๊งแหน่วๆ ทุกวัน

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

พอเมื่อวานซืนสงสัยขึ้นมา ก็เลยถามน้องเจม น้องบอกว่า เออเดี๋ยวร่างให้เลย เดี๋ยวนี้เขามี serverless cloud database อะไรงี้แล้วนะ อยู่ในชุด backend ที่ชื่อ Firebase ของกูเกิล และใช้ฟรีด้วย!

การหยุดทำเว็บมาสิบกว่าปี โลกมันไปไกลขนาดนี้เลยเหรอ

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

• ทำให้มี Google Login สามารถล็อกอินเพื่อ favorite เพลงได้
• ทั้งนี้มันจะเก็บ view count ไว้ด้วยว่าเพลงไหนเราชอบ เราเล่นบ่อย เดี๋ยวค่อยว่ากันว่าจะเอาไปพัฒนาอะไรต่อ

ไหนๆ ก็ไหนๆ เอาความรู้จากการทำเว็บทดสอบ Kerning ที่มี toolbox ลอยๆ แล้วด้านหลังเป็น canvas พ่นอะไรก็ได้ลงไป (สนุกมาก) มาปรับใช้กับเว็บนี้ ก็คือเปลี่ยนเลย์เอาต์ เปลี่ยน UX/UI ไปเลย

กลายเป็นค้นคอร์ดเพลง แล้วก็เปิดเล่นในหน้าเดียวกันได้เลย แต่ถ้าชอบโหมดคลาสสิกก็ยังคงไว้ได้อยู่

และแก้ปัญหาเรื่องการโหลดหนัก ภาระของเซิฟเวอร์ ด้วยการเอาลิสต์เพลงไปไว้บน Firebase ให้หมด ถ้าอัปเพลงใหม่ก็ใส่ “คำสั่งลับ” ลงในช่องค้นหาเท่านั้นเอง (อันนี้เราสนุกมาก เหมือนเล่นเกมแล้วมี cheat code)

นั่งทำ ยืนทำ เดินทำ กินข้าวไปก็สั่งมันไป กำกับมันไปเรื่อยๆ วนๆ งี้ทั้งวัน จนเสร็จเมื่อคืน รู้สึกว่าสมบูรณ์ละ ใช้ได้ 555555

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

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

น้องก็ฟิตจัด ทำเป็น interactive เลย โหดชิบเป๋ง

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

โดยตัวสคริปต์จะไอ้นั่น

• หั่นภาพแนวนอนยาวๆ ให้กลายเป็นสี่เหลี่ยมจัตุรัสหลายๆ รูป เพื่อเอาไปโพสต์ลง Instagram แบบ Carousel (เลื่อนดูแล้วภาพต่อกันเนียนสนิท)
• ปรับความละเอียดของภาพเป็น 1080px (ขนาดมาตรฐาน) อัตโนมัติ
• แยกเซฟเป็นไฟล์ .jpg ให้รวดเดียวจบ
• ไม่แตะต้องไฟล์ต้นฉบับ คือตอนทำมันจะก๊อปแยกไปทำในไฟล์ใหม่น่ะ ไม่กระทบงานออริ

วิธีใช้งาน

1. โหลดไฟล์นี้ Instagram_Split.jsx
2. ทำภาพหรือเปิดภาพพาโนรามาที่ต้องการหั่นใน Photoshop
3. ไปที่เมนู File > Scripts > Browse… แล้วเลือกไฟล์ Instagram_Split.jsx ตะกี้
4. โปรแกรมจะเด้งหน้าต่างให้เลือกโฟลเดอร์ปลายทางสำหรับเซฟรูป เลือกเสร็จแล้วรอจนเสร็จ

ก็จะได้ไฟล์แบบนี้มา เอาไปโพสต์ได้เลย

ข้อแนะนำเพิ่มเติม

สคริปต์จะคำนวณจำนวนรูปจากความกว้างหารด้วยความสูง แล้ว ตัดเศษภาพตอนท้ายที่หารไม่ลงตัวทิ้งไป เพื่อให้ภาพทุกใบเป็นสี่เหลี่ยมจัตุรัสที่สมบูรณ์
ถ้าไม่อยากให้ภาพส่วนปลายหายไป แนะนำให้ครอปภาพต้นฉบับให้ได้สัดส่วนเป๊ะๆ ก่อนรันสคริปต์ (เช่น สัดส่วน 2:1 สำหรับ 2 รูป, 3:1 สำหรับ 3 รูป งงมะ) หรือไม่ก็ขยายขนาด Canvas แล้วเติมขอบเอาเองก่อนเรียกใช้

จอบอ

วันนี้พาลูกคนเล็กไปแข่งเล่นเกม 24 มาครับ ไอ้แบบที่มีเลขมาให้ 4 ตัว แล้วบวกลบคูณหาร(เท่านั้น)กันท่าไหนก็ได้ ให้ออกมาได้ 24 นั่นแหละ

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

แต่พอไปแข่งจริง ก็ถือว่า ได้เข้าร่วม 55555555555 ตกรอบแรกครับ แพ้พี่ๆ ป.6 แบบลิบลับ ตัวพ่อนั้นสงสัยว่าเด็กคนอื่นเขาติวกันมายังไงถึงเก่งกันขนาดนี้เนี่ย ส่วนคนลูกก็ไม่สลด เพราะสนุกดี เพิ่งเคยมาแข่งที่โรงเรียนอื่นดุเดือดแบบนี้

พอกลับมาบ้านเลยลองหาเว็บที่เป็นเกม 24 แบบที่อยากได้ แน่นอนครับ ไม่ถูกใจคนเรื่องมากอย่างเรา 5555

เลยทำเองขึ้นมาซะเลย

• เล่นบนมือถือหรือบนคอมพ์ก็ได้ ทำปุ่มมาให้กดแบบอ้วนๆ กดง่ายๆ แล้ว
• ถ้าบนคอมพ์ จะกดลูกศรบนล่างซ้ายขวาบังคับ cursor ได้ (เผื่อย้อนไปพิมพ์วงเล็บ), กด Enter เพื่อส่งด่วนได้
• มีจับเวลา ให้คะแนนข้อละ 100 คะแนน บวกเวลาโบนัสถ้าเล่นไม่ถึงข้อละ 30 วินาที
• มีเฉลยด้วย!
• ตั้งโจทย์เองได้ ถ้าโจทย์ไม่มีคำตอบ มันก็จะไม่ให้เล่น

ก็ประมาณนี้ๆๆๆ ทำแป๊บเดียวตอนกินข้าว นอกนั้นคือจูน UI ด้วยความเรื่องมากเหมือนเดิม…

เล่นได้เลยครับ ที่นี่

anndo.com/m

ตอนนี้ตระกูล <anndo/> มีเว็บแอปที่ทำเองใช้เอง 10 ตัวแล้ว เย่

ขอบคุณการมีอยู่ของ Gemini จริงๆ นี่ใช้เวลาทำชั่วโมงเดียวก็เสร็จ (ทีแรกว่าจะนอน…) อาศัยว่าเฆี่ยนตีมันหน่อย ปรับไปปรับมา ถูกใจละ เลยเอามาบอกต่อครับ

ลองเล่นเลยยย

anndo.com/k

อัปเดตเวอร์ชัน 2.0 (ก่อนนอนนึกได้ว่าน่าทำเวอร์ชันมือถือ)

• ปรับหน้าตาและฟังก์ชันต่างๆ ให้เหมาะกับมือถือ (แต่อยากให้ใช้ในจอใหญ่ ฟินกว่า)
• รื้อโหมด Select ออก มันดูไม่สื่อสารกับผู้ใช้ ก็จะเหลือแต่โหมด Drag
• แล้วถ้าจะพิมพ์ข้อความเองล่ะ ก็เลยเปิดเป็นชุดข้อความแบบพิมพ์เอง ไรงี้

.

อัปเดตเวอร์ชัน 3.0 (พอตื่นมาแล้วมันนึกได้ เลยทำให้จบๆ)

• ปรับ UI/UX อีกเยอะเลย
• เพิ่มการจำค่า จะได้เข้ามาเจอประสบการณ์เดิมก่อนจากไป
• เนื่องจาก matrix 400×400 มันใหญ่มาก อาจทำให้คอมพ์หรือมือถือเก่าๆ ค้างได้ เลยถ้ามีตัวอักษรเกินค่าที่กำหนด จะเด้งไปโหมดพิมพ์เองเพื่อรักษาชีวิต
• เติมโหมดสนู้ปปี้ ที่เอาไว้ทดสอบสระบนล่าง + วรรณยุกต์ทั้งชั้นเดียวและสองชั้น
• ทำโหมดพิมพ์เองแบบไม่ทำให้ตัวอักษรต้องมาปะทะกันเป็น Matrix

.

อัปเดตเวอร์ชัน 4.0 (13 ม.ค.69)

• เพิ่มปุ่ม “ลอเร็ม”
  • ใส่ข้อความไว้ทดสอบการพิมพ์ โดยโหลดมาจากคลังคำศัพท์
  • คลังคำ เอามาจาก TNC: THAI NATIONAL CORPUS (Third Edition) แต่เป็นแบบ CSV สถิติของพยางค์ ในภาษาไทย
  • เขียน python ดึงคำที่ใช้บ่อยที่สุดมา 2,000 คำ แปลงเป็น text แยกคำเพื่อการแรนดอม
  • เมื่อกดลอเร็ม มันจะสุ่มคำมาแสดงตามภาพแหละ (ปุ่มอื่นจะถูกปิดการใช้งาน)
• เพิ่มโหมดตัดคำ
  • พอทำลอเร็มก็เจอปัญหาว่ามันเป็นบรรทัดเดียวยาวพรืดดดดด เลยทำโหมด Word Wrap ขึ้นมา
  • กดแล้วก็จะตัดคำให้พอดี ไม่ล้นจอ มีประโยชน์เวลาสั่งพรินต์ลงกระดาษด้วย
• นอกนั้นก็แก้ไข UI เล็กๆ น้อยๆ เช่น
  • ยุบพื้นที่แสดงชื่อฟอนต์ด้านบน รวมกับ textbox ที่ไว้กรอกชื่อฟอนต์
  • โหมดชุดคำเริ่มเยอะ เลยทำเป็นบรรทัดละ 3 ปุ่ม
    สนุกจัง!