PasaComputer

คลิปสุดท้ายของ PasaComputer แล้ว ตอนนี้เปิดช่องใหม่ชื่อว่า Little Moments ใครที่ยังอยากติดตามกันต่อ สามารถไปกดติดตามที่เพจใหม่ได้เลย

ที่เปลี่ยนมาใช้ช่องใหม่นี้ เพราะอยากขยายเรื่องที่จะเล่าให้กว้างขึ้น ทั้งเรื่องการทำงานในสาย Engineering Manager, การใช้ชีวิตและการทำงานในต่างประเทศ

แต่เนื้อหาเรื่อง Programming ก็ยังมีอยู่เหมือนเดิม ไว้มาแชร์ทั้งเรื่องที่เจอในงาน และเรื่องที่กำลังฮิตอย่าง AI ด้วย

แล้วเจอกันที่ช่องใหม่ Little Moments นะครับ ขอบคุณ ทุกคนที่ติดตามกันมาตลอด 🙏

คลิปสุดท้ายของ PasaComputer 😭 ขอบคุณทุกคนมาก ๆ ที่ติดตามกันมาอย่างยาวนาน ถ้าใครอยากติดตามกันต่อ สามารถตามไป Subscribe ได้ที่: https://www.youtube.com/-Kk9Kr6K_J-dr7jK0Rc...

📝 CSS-in-JS เป็นที่นิยมอย่างมากในปัจจุบัน ช่วยให้การจัดการ CSS ทำได้ง่ายขึ้น ซึ่ง CSS-in-JS มีด้วยกันอยู่หลายตัว แต่ตัวที่เป็นที่นิยมมากที่สุดคงหนีไม่พ้น Styled Components และ Emotion ซึ่งมีลักษณะการทำงานที่คล้ายคลึงกันมาก แต่ Emotion นั้นมีขนาดที่เล็กกว่า คนจึงหันมาสนใจ Emotion กันเยอะพอสมควร ในทางกลับกัน Styled Components อยู่มานานกว่า จึงมี Community ใหญ่กว่ามาก


เพื่อนๆ เชียร์ หรือใช้ตัวไหนกันอยู่บ้างเอ่ย? ดูกราฟเต็มๆ ได้ที่ https://bit.ly/2VIHwYb


‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣❥
🔥 เรียนฟรี JavaScript for Beginner เข้าใจพื้นฐานใน 1 ชั่วโมง https://www.youtube.com/watch?v=Tz5Wk1yPlBE
🔥 คอร์สฟรี React for Everyone เรียนตั้งแต่เริ่มจนทำแอปได้ใน 1 ชั่วโมง https://www.youtube.com/watch?v=mXjxKhWNHNo

🏃‍ ระวังการใช้ Google Fonts อาจส่งผลกระทบต่อ SEO ได้


หลังจากที่ Google Chrome ออกเวอร์ชันใหม่ (v86) เมื่อเดือนตุลาคมที่ผ่านมา ซึ่งได้ยกเลิกการทำ Cross-site caching ซึ่งทำให้ผู้ใช้งานต้องโหลด Fonts ใหม่ทุกๆ รอบที่เข้าเว็บไซต์ เอ๊แล้วเจ้าตัว Cross-site caching มันคืออะไร?


Cross-site caching เป็นระบบที่ช่วยเก็บ Cache ของ Fonts เมื่อผู้ใช้งานเปิดเว็บไซต์ครั้งแรก ก็จะดาวน์โหลด Fonts ไปเก็บไว้ในเครื่อง ถ้าเปิดเว็บไซต์ครั้งถัดๆ ไป ก็จะไม่จำเป็นต้องดาวน์โหลดใหม่แล้ว เพราะสามารถดึงจาก Cache ในเครื่องมาใช้งานได้เลย


แล้วทำไมถึงยกเลิก? Google Chrome v86 ได้เพิ่มระบบ Cache partition ซึ่งทำให้เว็บไซต์ปลอดภัยมากขึ้น และสามารถป้องกัน Cross-site search attack (รายละเอียดเยอะมาก ใครสนใจสามารถอ่านเพิ่มเติมได้ที่ https://bit.ly/2JWqlQ1)


ถ้าใช้ Google Fonts อยู่ จะทำยังไง?
ถ้าใครที่กำลังใช้ Google Fonts อยู่ สามารถดาวน์โหลด Fonts มาไว้ในโปรเจคของตัวเอง และทำ Self hosted ซึ่งให้ผลลัพธ์ที่ดีกว่า นอกจากนั้นยังสามารถนำ Content Delivery Network (CDN) มาประยุกต์ใช้ ช่วยให้ผู้ใช้งานโหลด Fonts ได้เร็วขึ้นอีกด้วย


‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣❥
🔥 เรียนฟรี JavaScript for Beginner เข้าใจพื้นฐานใน 1 ชั่วโมง https://www.youtube.com/watch?v=Tz5Wk1yPlBE
🔥 คอร์สฟรี JavaScript 21 Days Challenge สร้าง 21 โปรเจค ใน 21 วัน ไม่ใช้เฟรมเวิร์ค ไม่ใช้ไลบรารี https://www.js21.dev/

📝 Front-end Checklist อย่าลืมตรวจสอบสิ่งเหล่านี้ก่อนเปิดตัว เว็บไซต์/เว็บแอปพลิเคชันของคุณ!! ว่าแต่ลิสรายการที่ต้องตรวจสอบมีอะไรบ้าง มาดูกันเลย


1. Head
2. HTML
3. Webfonts
4. CSS
5. Images
6. JavaScript
7. Security
8. Performance
9. Accessibility
10. SEO
11. Translations


อ่านรายละเอียดเพิ่มเติม พร้อมเครื่องมือที่ใช้ในการตรวจสอบได้ที่ https://bit.ly/3mR4SXt


‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣❥
🔥 เรียนฟรี JavaScript for Beginner เข้าใจพื้นฐานใน 1 ชั่วโมง https://www.youtube.com/watch?v=Tz5Wk1yPlBE
🔥 คอร์สฟรี React for Everyone เรียนตั้งแต่เริ่มจนทำแอปได้ใน 1 ชั่วโมง https://www.youtube.com/watch?v=mXjxKhWNHNo

JavaScript อายุครบ 25 ปี เมื่อไม่กี่วันที่ผ่านมา ทุกคนใช้ JavaScript กันมากี่ปีแล้วเอ่ย

🏆 JavaScript Coding Challenge #11 ฝึกทำโจทย์ทีละนิด เพื่อชีวิตที่เก่งขึ้นในทุกวัน


🤔 โจทย์ เขียนฟังก์ชันรับค่า ตัวอักษร (characters) และคำ (word) เข้ามา โดยฟังก์ชันจะตรวจสอบว่าตัวอักษรที่รับเข้ามานั้นเพียงพอที่จะใช้สร้างคำหรือไม่


📌 ดูโจทย์เต็มๆ ได้ที่ https://codepen.io/lvarayut/pen/RwRmWNp?editors=0010


ใครทำได้แล้วคอมเม้นท์โค้ดกันเข้ามาได้เลย แล้วอย่าลืมส่งคำท้าต่อให้เพื่อน จะได้เก่งกันครบแก๊ง!!


‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣❥
- 🔥 อยากเก่ง JavaScript ต้องรู้หลักการทำงานของ Functional Programming เรียนฟรีได้ที่ https://youtu.be/NGbnxiKN9Zw

ไม่อยากตกเทรนด์ มาเป็นเพื่อนกับเราเพื่อรับข่าวสารใหม่ๆ ทุกเดือน https://lin.ee/doMvX9R

🕶 วันนี้เราจะมาโชว์ Feature ลับที่ซ่อนอยู่ใน Chrome DevTools กัน ไปดูกันเลย!!

📌 console.table()
หลายๆ คนคงคุ้นเคยกับ console.log ที่พ่นข้อมูลออกมาทาง console อยู่แล้วใช่มะ ซึ่งถ้าข้อมูลเป็นลักษณะ Array 2มิติ หรือเป็น Array ของ Object การใช้ console.log จะทำให้อ่านผลลัพธ์ลำบากอยู่สักหน่อย ลองใช้ console.table แทนซิ อ่านง่ายกว่าเดิมเยอะ


📌 Color picker
เราสามารถเรียก color picker ขึ้นมาเพื่อจิ้มสีจากตรงไหนของหน้าเว็บก็ได้ เริ่มต้นด้วยการเลือก element ที่เราจะเปลี่ยนสี จากนั้น click ช่องแสดงสี หลัง css atrribute ที่เป็นสี (เช่น color/background-color) จากนั้นก็จิ้มตรงที่สีที่เราต้องการได้เลย


📌 Find where CSS Property is Defined
เราสามารถหาว่าเจ้า css Property ถูก define จากไฟล์ไหนด้วยการกด CTRL + Click ที่ property ที่เราต้องการทราบได้เลย


📌 Design Mode
เราสามารถแก้ไขทุกๆ อย่างบนหน้าเว็บได้โดยตรงด้วย Design Mode เพียงแค่ คลิกหรือ highlight ตรงจุดที่เราต้องการและแก้ไข หรือ Copy/paste ได้เลย

ใช้คำสั่งนี้ใน console เพื่อเปิดใช้งาน Design Mode

document.designMode = "on"


📌 จำลองสถานการณ์ Internet ช้า
หลายๆ คนคุ้นเคยกับ tab Network ใน DevTools กันอยู่แล้วใช่มะ เราสามารถดูข้อมูล Request ต่างๆ ได้จากที่นี่ ซึ่งเราสามารถจำลองสถานการณ์ที่ internet ช้า ได้ด้วยละ

1 เลือก tab Network

2 กดตรงคำว่า Online เพื่อเปลี่ยนสถานการณ์การ Connect จะขึ้นตัวเลือกอื่นๆ ขึ้นมา ให้เราเลือก add

3 จากนั้นจะปรากฏหน้า Network Throttling Profiles ให้เรากดปุ่ม Add custom profile... และเพิ่ม Profile ใหม่ได้เลย


‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣❥
🔥 เรียน 9 เทคนิคการดีบัคจาวาสคริปต์ด้วย Console https://www.youtube.com/watch?v=lvZ4UsfIRG0
🔥 เรียนฟรี JavaScript for Beginner เข้าใจพื้นฐานใน 1 ชั่วโมง https://www.youtube.com/watch?v=Tz5Wk1yPlBE

ไม่อยากตกเทรนด์ มาเป็นเพื่อนกับเราเพื่อรับข่าวสารใหม่ๆ ทุกเดือน https://lin.ee/doMvX9R

🔥 เคยสงสัยไหมว่า น้องไดโนเสาร์ T-Rex ในบราวเซอร์ Chrome สร้างอย่างไร? มาแกะโค้ดพร้อมกันเลยย https://bit.ly/t-rex-pasacomputer


🦖 หลายคนคงคุ้นกับเจ้าไดโนเสาร์ T-Rex ใน Chrome ที่เราจะได้เล่นฆ่าเวลาทุกที ช่วงที่ไม่มีอินเตอร์เนต ในวิดีโอนี้เราจะมาแกะโค้ดของ Chromium เพื่อดูว่าเจ้า T-Rex นั้นสร้างมาอย่างไร เพื่อที่จะได้เรียน JavaScript อ่าน Use case จริงๆ ทั้งสนุก และได้ความรู้ในเวลาเดียวกัน มันปังๆปุริเย่ มากๆ


‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣❥
🔥 เรียนฟรี JavaScript for Beginner เข้าใจพื้นฐานใน 1 ชั่วโมง https://www.youtube.com/watch?v=Tz5Wk1yPlBE
🔥 คอร์สฟรี JavaScript 21 Days Challenge สร้าง 21 โปรเจค ใน 21 วัน ไม่ใช้เฟรมเวิร์ค ไม่ใช้ไลบรารี https://www.js21.dev/

ไม่อยากตกเทรนด์ มาเป็นเพื่อนกับเราเพื่อรับข่าวสารใหม่ๆ ทุกเดือน https://lin.ee/doMvX9R

🏆 JavaScript Coding Challenge #10 ฝึกทำโจทย์ทีละนิด เพื่อชีวิตที่เก่งขึ้นในทุกวัน


🤔 วันนี้เรามาฝึกโจทย์ที่ใช้ทดสอบความรู้การทำงานของ JavaScript ในเบื้องลึกกันบ้าง โดยโจทย์ในวันนี้เป็นโจทย์สำภาษณ์งานจริงที่ต่างประเทศ ถามว่าถ้ารันฟังก์ชัน marvel() แล้ว ผลลัพธ์ของ console.log ทั้ง 2 ตำแหน่งจะได้เป็นอะไร เพราะอะไร?


📌 ดูโจทย์เต็มๆ ได้ที่ https://codepen.io/lvarayut/pen/YzWbyKp?editors=0010


ใครทำได้แล้วคอมเม้นท์โค้ดกันเข้ามาได้เลย แล้วอย่าลืมส่งคำท้าต่อให้เพื่อน จะได้เก่งกันครบแก๊ง!!


‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣❥
- 🔥 อยากเก่ง JavaScript ต้องรู้หลักการทำงานของ Functional Programming เรียนฟรีได้ที่ https://youtu.be/NGbnxiKN9Zw

🔥 วันศุกร์นี้ Black Friday แล้ว มีอะไรลดราคาบ้างมาแชร์กัน!!