คนนี้มันแนะนำเทคนิค เครื่องมือ ในการประกอบ webapp น่าสนใจอยู่ เช่น Oat CSS
somsakul.com
ทดลองทำสิ่งต่างๆ ทั่วไป
ทดลองทำสิ่งต่างๆ ทั่วไป
ประหยัดเป็นเรื่องดี คนส่วนใหญ่มักประหยัดใน 4 ด้าน ได้แก่
แต่ 6 เรื่องต่อไปนี้เป็นสิ่งที่ไม่ควรประหยัดอย่างเด็ดขาด
สมมติว่าจังหวัดที่ 78 เกิดขึ้น ชื่อ จังหวัดบัวใหญ่ รถคันแรกของบัวใหญ่ จะทะเบียนดังนี้
| 1กก 9999 |
|---|
| บัวใหญ่ |
ลำดับอักษร
ก ข ค ฆ ง จ ฉ ช ฌ ญ ฎ ฐ ฒ ณ ด ต ถ ท ธ น บ ผ พ ภ ย ร ล ว ศ ษ ส ห ฬ อ ฮ
step 1: ลำดับ 1 ถึง 9999 (เปลี่ยนตัวเลข)
step 2: ขยับ อักษร 1 หลักหลัง จาก 1กก เป็น 1กข
step 3: ขยับ เลขหน้าสุด 1 หลัก จาก 1กฮ เป็น 2กก
step 4: ขยับ อักษร 1 หลักแรก จาก 9กฮ เป็น 1ขก
ตัวอย่าง
1กก9999 > 1กข1
1กฮ9999 > 2กก1
9กฮ9999 > 1ขก1
9ฮฮ9999 > จบโลกแตก
git add และ git commit เพื่อสร้าง Snapshot ของโค้ดในแต่ละช่วงเวลาได้ในเครื่องตัวเอง (เก็บในโฟลเดอร์ .git)git checkout หรือ git reset เพื่อดึงโค้ดเวอร์ชันเก่าที่เคย Commit ไว้กลับมาได้ทันที 🧹git log เพื่อดูว่าเราแก้ข้อความหรือไฟล์ไหนไปบ้าง เมื่อไหร่ อย่างละเอียดgit branch เพื่อแยกสายไปทดลองเขียนฟีเจอร์ใหม่ ๆ หรือแก้ Bug โดยไม่กระทบกับโค้ดหลักที่ทำงานได้อยู่git merge รวมกลับเข้าสู่ Branch หลัก (เช่น main/master) ได้เลยในเครื่อง ⚡git stash เพื่อแปะงานเก็บไว้ก่อน แล้วค่อยดึงกลับมาทำต่อทีหลังได้git diff เพื่อดูว่าโค้ดปัจจุบันที่เรากำลังพิมพ์อยู่ แตกต่างจากโค้ดที่ Commit ไว้ครั้งล่าสุดตรงไหนบ้าง (บรรทัดไหนเพิ่ม บรรทัดไหนลบ) ช่วยให้ตรวจทานตัวเองได้ดีมากSandbox ส่วนตัว: เหมาะมากสำหรับการทำโปรเจกต์เดี่ยว,
งาน Home Lab 🏠, หรือการพัฒนาตัวต้นแบบ (Prototype) ที่ยังไม่ต้องการเปิดเผยให้ใครเห็น
พัฒนาทักษะเชิงลึก: เป็นโอกาสดีในการฝึกฝนคำสั่ง Git ขั้นสูง เช่น rebase, cherry-pick,
หรือ amend ในสภาพแวดล้อมที่ปลอดภัย เพราะถ้าทำพัง ก็พังแค่ในเครื่องตัวเอง ไม่กระทบกับทีม
.git) ไปยัง External Drive หรือ Time Machine สม่ำเสมอ 💾git bundle create เพื่อแพ็ค Repository ทั้งหมดออกมาเป็นไฟล์เดียว แล้วก๊อปปี้ไปเก็บไว้ที่อื่นเพื่อความปลอดภัยได้ครับเป้าหมาย: สร้างจักรวาล Git ของตัวเองและบันทึกประวัติครั้งแรก
mkdir git-training
cd git-training
.git):git init
file.txtVersion 1: Start ลงไป จากนั้นสั่งดูสถานะ:git status
(คุณจะเห็นข้อความตัวสีแดงบอกว่าไฟล์นี้ยังเป็น Untracked) 🔴
git add .
git commit -m "First version"
git log --oneline
บรรลุ Rank F, 🎉 ได้เลื่อนขั้นเป็น Rank D!
เป้าหมาย: แก้ไขไฟล์ แอบดูความเปลี่ยนแปลง และย้อนเวลากลับมาเมื่อทำพัง
file.txtVersion 2: Added some features ลงไปgit diff ส่องดูว่าเราพิมพ์อะไรต่างไปจากเดิมบ้าง:git diff
git add file.txt
git commit -m "v2, add features"
จำลองสถานการณ์ทำพัง: แก้ไข file.txt
แล้วลบข้อความทั้งหมดทิ้ง พิมพ์คำว่า Oops! โค้ดพังหมดเลย
แล้วเซฟไฟล์
วิชาย้อนเวลา (Rollback): กู้คืนไฟล์ให้กลับมาสมบูรณ์เหมือนตอน Commit ครั้งล่าสุดทันที:
git checkout -- file.txt
(ลองเปิด file.txt ดูอีกครั้ง โค้ดที่พังจะหายไป และเวอร์ชัน 2 จะกลับมาอย่างปาฏิหาริย์!) 🧙♂️
🎉 เลื่อนขั้นเป็น Rank C!
เป้าหมาย: แยกสายไปลองทำสิ่งใหม่โดยไม่ให้กระทบสายหลัก
feature-x และสลับวิญญาณเข้าไปอยู่ในสายนั้น:git checkout -b feature-x
file.txt เพิ่มข้อความ [Feature X] ทดลองฟีเจอร์ลับ ลงไปในบรรทัดใหม่ แล้ว Commit ในสายนี้:git add .
git commit -m "Add feature X"
main หรือ master ขึ้นอยู่กับเครื่องของคุณ):git checkout main
(เปิด file.txt ดู จะพบว่าข้อความฟีเจอร์ลับหายไป! เพราะมันอยู่แค่ในสาย feature-x) 👻
git merge feature-x
(เปิด file.txt ดูตอนนี้ ข้อความฟีเจอร์ลับจะมาปรากฏในสายหลักแล้ว) ⚡
FAQ การ merge
กรณีเปลี่ยนใจหลังการ merge
git reset --hard ORIG_HEAD
ORIG_HEAD คือ ตำแหน่งล่าสุดของ main ก่อนจะ merge หรือ rebase
กรณีเปลี่ยนใจหลังการ merge นานแล้ว
git log --online
มองหารหัส commit ความยาว 7 หลัก
git reset --hard a1b2c3d
🎉 เลื่อนขั้นเป็น Rank B!
เป้าหมาย: แก้ไขปัญหาเมื่อโลกคู่ขนานชนกัน (เกิด Conflict)
main)file.txtMain แก้ไขตรงนี้git add file.txt
git commit -m "สายหลักอัปเดต"
feature-ygit checkout -b feature-y
file.txt ในสาย feature-yMain แก้ไขตรงนี้ ออกY เปลี่ยนเป็นแบบนี้ต่างหากgit add file.txt
git commit -m "สาย Y อัปเดต"
mainfeature-y เข้ามา:git checkout main
git merge feature-y
file.txt คุณจะเห็นเครื่องหมาย <<<<<<<, =======, >>>>>>>git add file.txt
git commit \-m "เคลียร์ Conflict เรียบร้อย"
🎉 เลื่อนขั้นเป็น Rank A!
เป้าหมาย: เก็บงานที่ยังไม่เสร็จไว้ในมิติลี้ลับชั่วคราว
file.txt พิมพ์เพิ่มไปดื้อ ๆ ว่า กำลังพิมพ์งานค้างไว้ยังไม่เสร็จ... (ห้ามกด Commit เด็ดขาด!)git stash
(ลองเปิด file.txt ดู ข้อความที่พิมพ์ค้างไว้จะหายวับไปเหมือนไม่เคยเกิดขึ้น) 🥷
git stash list
git stash pop
(ข้อความที่พิมพ์ค้างไว้จะกลับมาอยู่ใน file.txt เหมือนเดิม พร้อมลบประวัติการซ่อนทิ้งทันที) 🌟
🎉 เลื่อนขั้นเป็น Rank S!
เป้าหมาย: เขียนประวัติศาสตร์ท้องถิ่นใหม่ด้วยตัวเอง (Rewriting History)
git commit --amend -m "นี่คือชื่อ Commit ที่ถูกต้องและหล่อเท่กว่าเดิม"
(ลองใช้ git log --oneline ดู จะพบว่า Commit ล่าสุดถูกเปลี่ยนชื่อไปแล้ว) 👑
git rebase -i HEAD~3
pick เป็น squash (หรือ ย่อสั้น ๆ ว่า s)pick ไว้) จากนั้นเซฟไฟล์git log --oneline ดู...ยินดีด้วยครับ! ถ้าคุณฝึกฝนผ่านคอร์ส file.txt นี้จนครบทุก Rank คุณจะเข้าใจกลไกภายในของ Git แบบทะลุปรุโปร่ง โดยไม่ต้องพึ่งพา Internet หรือ Server ใด ๆ เลยแม้แต่น้อย
"บทฝึกเชื่อมชะตากรรมสากล: จาก Local สู่ Gitea Server"
โดยจะใช้ข้อต่อจาก file.txt ของเรามาลุยต่อครับ ทำตามขั้นตอนนี้ได้เลย! 💻🛡️
ก่อนจะไปพิมพ์คำสั่งในเครื่อง ให้คุณเปิดหน้าเว็บ Repository ที่คุณเพิ่งสร้างบน Gitea ขึ้นมา แล้วมองหา URL ของ Repo นั้น (มักจะอยู่ตรงกลางหรือมุมขวาบน มีให้เลือกแบบ HTTP/HTTPS)
https://support2.rd.go.th/gitea/username/my-project.gitเป้าหมาย: เชื่อมโปรเจกต์ในเครื่อง local เข้ากับ Gitea Server และส่งไฟล์ขึ้นไปเป็นครั้งแรก
file.txt)origin (เป็นชื่อมาตรฐานสากล):git remote add origin https://support2.rd.go.th/gitea/username/my-project.git
(เปลี่ยน URL ด้านหลังให้เป็นของ Gitea คุณจริง ๆ นะครับ) 🔗
git remote -v
(จะเห็นชื่อ origin โผล่ขึ้นมา 2 บรรทัดสำหรับ fetch และ push) 🟢
main (หรือ master) ขึ้นไปยัง Server:git push -u origin main
(หากใช้ master ให้เปลี่ยนคำว่า main เป็น master)
Username และ Password ให้คุณกรอกรหัสผ่านของ Gitea ลงไป 🔐file.txt พร้อมประวัติศาสตร์ทั้งหมดเป้าหมาย: ทำงานบนสายแยกในเครื่อง แล้วส่งสายแยกนั้นขึ้นไปเก็บบน Server
gitea-test:git checkout -b gitea-test
file.txt เพิ่มบรรทัดใหม่พิมพ์ว่า ทดสอบระบบ Gitea Server จากนั้นเซฟไฟล์แล้ว Commit ในเครื่อง:git add file.txt
git commit -m "เพิ่มบันทึกทดสอบ Gitea"
git push -u origin gitea-test
gitea-test เพิ่มขึ้นมาgit push หรือ git pullgit config --global credential.helper store
SSH Key ในเครื่องคอมพิวเตอร์ssh-keygen -t ed25519 -C "[email protected]"
# นี่คือ public key
type c:\users\somsakul\.ssh\id_ed25519.pub
My-MacBook-Air🔄 แนวทางการปรับเปลี่ยนใน Git Repo เดิม
ไปที่หน้าเว็บ Repo บน Gitea กดสลับปุ่มตรงกลางจาก HTTPS ให้เป็น SSH แล้วก๊อปปี้ URL มา
(หน้าตาจะประมาณ [email protected]:username/my-project.git)
git remote set-url origin [email protected]:username/my-project.git
# ทดสอบ
git push
ก๊อปไปวางได้เลยใน Violentmonkey
// ==UserScript==
// @name adintrend.tv
// @namespace Violentmonkey Scripts
// @icon https://www.adintrend.tv/favicon.ico
// @version 1.0.0
//
// @match https://www.adintrend.tv/hd/*
// @grant GM_addStyle
//
// @author -
// @description
// ==/UserScript==
GM_addStyle(`
a.ch-btn {
color: #888;
background: #444;
}
a.ch-btn:hover {
color: #444;
background: lime;
}
`);
const vdo = document.querySelector('iframe');
const token = document.querySelector("#SecureToken")
vdo.id = 'vdo';
// vdo wrapper
const vdoDiv = document.createElement('div');
vdoDiv.id = 'vdo-div'
vdoDiv.style = 'width:100%;text-align:center;margin-top:2em;'
vdoDiv.appendChild(vdo)
document.body.prepend(vdoDiv);
vdo.after(token);
const tvLinks = Array.from(document.querySelectorAll('a.linktv2')).map(a => {
return {
href: a.href,
text: a.textContent.trim()
};
});
const newContainer = document.createElement('div');
newContainer.className = 'my-custom-tv-list';
newContainer.style.margin = '10px 0'; // แต่ง Style ตามใจชอบ
tvLinks.forEach(item => {
const newLink = document.createElement('a');
newLink.href = item.href;
newLink.textContent = `${item.text}`; // ใส่ Emoji เพิ่มความสวยงาม
newLink.className = 'ch-btn';
newLink.style.marginRight = '5px';
newLink.style.padding = '5px 5px';
newLink.style.textDecoration = 'none';
newLink.style.borderRadius = '5px';
// ยัดปุ่มใหม่ใส่ใน Container
newContainer.appendChild(newLink);
});
// 5. เอา Container ใหม่ไปต่อท้าย Iframe ทันที!
vdo.after(newContainer);
// remove junk
document.querySelector("body > table").remove()
// auto play
const myIframe = document.querySelector('iframe#vdo');
if (myIframe) {
// รอให้ iframe โหลดเนื้อหาข้างในเสร็จก่อน
myIframe.addEventListener('load', () => {
try {
// 2. เจาะเข้าไปดึงแท็ก <video> ที่อยู่ข้างใน iframe
const iframeDocument = myIframe.contentDocument || myIframe.contentWindow.document;
const videoElement = iframeDocument.querySelector('video');
if (videoElement) {
// 3. สั่งเล่นวิดีโอทันที!
setTimeout(function(){
videoElement.play();
console.log('สั่ง Play วิดีโอใน iframe สำเร็จแล้ว! 🎬');
},200)
}
} catch (error) {
console.error('เกิดข้อผิดพลาดในการเข้าถึง iframe:', error);
}
});
}
ขั้นตอนโดยสรุป
แนะนำร้าน อร่อยอารีย์ ปากซอยอารีย์สัมพันธ์ 5
Line: @aroiari
อาหารไทย ของทอด ของผัด ราคาประมาณ 80 บาท
ฉีกทุกกฎฟิสิกส์สู่มิติใหม่แห่งเสียงดนตรี! 🎸 พบกับ ‘กีตาร์แม่เหล็กลอยได้’ นวัตกรรมสุดล้ำที่ผสานวิศวกรรมแม่เหล็กแรงดึงดูดสูงถึง 250 กิโลกรัม 🧲 ทำให้สายกีตาร์ลอยเด่นกลางอากาศอย่างมั่นคงและสง่างาม ไม่เพียงแต่เป็นทัศนียภาพที่น่าทึ่ง แต่ยังช่วยเพิ่มการสั่นสะเทือนที่กีต้าร์ทั่วไปทำไม่ได้ เกิด Sustain ของเสียงที่ยาวนานและบริสุทธิ์อย่างที่ไม่เคยมีมาก่อน! 🌌✨