phongsakornp

[phongsakornp @misterphongs]

หลังจากค้นคว้าหา broker ที่รองรับ cTrader ก็ได้ข้อสรุปว่าจะลองใช้ IC Markets หลังจากสมัครใช้เวลาอนุมัติบัญชีไม่ถึง 1 ชั่วโมง เร็วผิดคาด

https://t.co/9KmZcCyyVp

[phongsakornp @misterphongs]

“Data Wrangling” คือการตรวจสอบ แก้ไขข้อมูลที่ผิดพลาดหรือไม่สมบูรณ์ และจัดเตรียมให้อยู่ในรูปแบบที่พร้อมนำไปใช้งาน

https://t.co/Kh2NRmcyB4

[phongsakornp @misterphongs]

ดึงข้อมูลจาก Yahoo Finance ด้วย yfinance

“Yahoo Finance” เป็นแหล่งข้อมูลทางด้านการเงินที่เปิดให้ใช้ฟรี วิธีหนึ่งในการดึงข้อมูลคือใช้ “yfinance” ซึ่งเป็นโอเพนซอร์ส Python ไลบรารี

https://t.co/xf7WSM4YLD

[phongsakornp @misterphongs]

"ติดตั้ง JupyterLab ด้วย conda"

https://t.co/lf28u87qKl

[phongsakornp @misterphongs]

"3 ข้อคิดช่วยเลือก Anaconda หรือ Miniconda"

https://t.co/P9cOSD6rgO

[phongsakornp @misterphongs]

ดูโค้ด Slider ได้ที่ https://t.co/9RhqN2nmvj

ลองเล่น chatGPT ได้ที่ https://t.co/TZsDaMtt0v

[phongsakornp @misterphongs]

"สร้าง Image Slider React Component ด้วย chatGPT จาก openAI"

ตอนใช้ chatGPT ครั้งแรก ผมทำแบบเดียวกับเวลาค้นหาข้อมูลด้วย Google
พอไม่ได้อย่างที่ต้องการ��็ปรับคำค้นหาใหม่
ผลที่ได้เลยไม่ต่างกับการใช้ Google มากนัก

[phongsakornp @misterphongs]

แต่ลืมไปว่า chatGPT มันมีความสามารถจดจำบทสนทนาที่ผ่านมาได้
ลองใหม่อีกค��ั้ง คราวนี้ให้มันปรับโค้ดตามที่เราต้องการไปเรื่อย ๆ
ใช้เวลาประมาณ 5 นาที ก็ได้โค้ด Image Slider
นำไปปรับเพิ่มอีกหน่อยก็พอใช้งานได้เลย

ความสามารถใกล้เคียง Jarvis เข้าไปทุกที

[phongsakornp @misterphongs]

map และ reduce เป็นฟังก์ชันที่ใช้บ่อยเมื่อต้องการแปลงข้อมูลแบบ array

map แปลงข้อมูลโดยยังคงเป็น array ที่มีจำนวนสมาชิกเท่าเดิม

reduce แปลงข้อมูลแล้วอาจมีจำนวนสมาชิกไม่เท่าเดิม (ปกติจะลดลง) หรือเปลี่ยนชนิดไปเป็นแบบอื่นที่ไม่ใช่ array เลยก็ได้

#javascript #jsbackpack

[phongsakornp @misterphongs]

"หาผลลัพธ์ของข้อมูลแบบ array ซ้อน array"

เมื่อเราต้องการหาผลลัพธ์ของข้อมูลที่เป็น "array ซ้อน array" สิ่งแรกที่เราอาจนึกถึงคือใช้ for-loop เพื่อไล่คำนวณหาค่าผลลัพธ์จากข้อมูลแต่ละตัว หรือเราอาจมองได้อีกแบบว่ามันคือ "การแปลงรูปข้อมูลจากชุดหนึ่งไปเป็นอีกชุดหนึ่ง" -- transformation

[phongsakornp @misterphongs]

Remix เป็น React framework อีกตัวที่น่าสนใจ ใช้แล้วรู้สึกว่าตัวเองเข้าใจการทำงานของ http, javascript กับ browser มากขึ้น น่าจะ���ป็นเพราะสามารถใช้ฟังก์ชันโดยตรงกับ browser ได้มากกว่า framework อื่น ไม่ abstract มากเกินจนยุ่งไป ทำให้เรารู้หลักการทำงานพื้นฐานของ web tech. ไปในตัวด้วย

[phongsakornp @misterphongs]

"Interactive Guide to Flexbox in CSS"

อ่าน tutorial นี้แล้วทำให้เข้าใจการทำงานของ flexbox ดีขึ้นมาก โดยเฉพาะเรื่อง "flex-shrink" กับ "flex-grow" ผู้เขียน Josh Comeau ทำออกมาได้น่าสนใจจริง ๆ

เนื้อหาเกินกว่าจะเป็น tutorial เป็น mini course ได้เลย

https://t.co/hBxPamUKJw

[phongsakornp @misterphongs]

ที่สำคัญคือฟรี "yup — totally free"

แต่ถ้าอยากได้ฟังก์ชันพิเศษก็ไปโปร
จ่ายเพิ่ม $19 ต่อปี "yup, per _year_"

===
https://t.co/j4Hp07pU3P
https://t.co/rfo4PUCrOv

https://t.co/2NoDY5AV6V

[phongsakornp @misterphongs]

ลองเล่น "Carrd" สร้าง one-page เว็บไซต์

เดี๋ยวนี้มีเครื่องมือแบบ no-code ให้เราเลือกใช้หลายตัว สำหรับการสร้างเว็บไซต์แบบหน้าเดียว carrd น่าจะเป็นตัวช่วยที่ดีอีกตัว ผมลองเลือกสร้างจาก template ใช้เวลาปรับไม่นานก็มีเว็บไซต์ไว้ใช้งาน

[phongsakornp @misterphongs]

เหมาะสำหรับคนที่

- ไม่ต้องการวุ่นวายเขียนโค้ด html, css, javascript, เลือกเว็บโฮสติ้ง, ติดตั้งเว็บเซิร์ฟเวอร์, ติดตั้งฐานข้อมูล, ติดตั้งร��บบ backup, ทดสอบ responsive กับ mobile, tablet, desktop, แก้ bug, ... 😵‍💫
- ไม่ชอบคุยกับโปรแกรมเมอร์ 🥸

[phongsakornp @misterphongs]

ทดลองเล่น ๆ

จะเกิดอะไรขึ้นถ้าเราเปลี่ยนค่า `children` ใน element ตรง ๆ ?

```
setTimeout(() => {
console.log(`Hi`);
newElm.props.children = "I'm Groot again";
root.render(newElm);
}, 2000);
```

[phongsakornp @misterphongs]

React "Element" คืออะไร?

React เป็นไลบรารีที่ช่วยสร้างและจัดการ UI โดยมีส่วนประกอบที่เป็นพื้นฐานที่สุดคือ "element"

เราสามารถสร้าง element โดยใช้ฟังก์ชัน `createElement`

```
let reactElm = React.createElement("h1", {}, "I'm Groot")`;
```

#ReactJS #reactbackpack

[phongsakornp @misterphongs]

สรุป
React "element" คือจาวาสคริปต์ object ที่มีข้อมูลที่จำเป็นสำหรับ React ในการแสดงผลบนจอ