Posted on Leave a comment

Adobe XD ออก plugin เวอร์ชั่นทดลองใช้แล้ว รองรับการส่งออกโค้ดเป็นภาษา Dart, Google Flutter

เมื่อคืนวาน ทางทีมงาน Google Flutter ได้ประกาศผ่าน medium ว่า ตอนนี้ plugin เวอร์ชั่น early access ของ Adobe XD เริ่มให้ทดลองใช้แล้ว มาดูกันครับว่าตอนนี้ตัว plugin ของ Adobe XD ทำได้แค่ไหนกัน

Adobe XD คืออะไร?

สำหรับใครที่ยังไม่เคยได้ยิน ได้เห็น Adobe XD มาก่อน มันคือโปรแกรมออกแบบด้าน UI/UX ที่สามารถสร้างต้นแบบของ websites, แอพ, เกมส์ ที่สามารถแชร์คุยกันในทีมได้ 

โค้ชพลก็เคยทำคลิปวิดีโอแนะนำไว้ที่ Youtube ของโค้ชพล สนใจคลิกดูด้านล่างได้ครับ

วิธีการ Export Flutter Code จาก Adobe XD

ส่วนเสริมที่เพิ่มตัวควบคุมการ export งานออกแบบของเราเป็น Flutter Widget

พอศึกษารายละเอียดของ Flutter Plugin ใน Adobe XD ก็ย่ิงน่าตื้นเต้นใหญ่ เพราะเราสามารถ export ตัวโค้ดในหลายระดับ เช่น

  • ระดับรูปภาพทั่วๆ ไป 
  • ระดับ Component
  • ระดับ Artboard
  • ระดับทั้งโปรเจค
ตัวอย่างโค้ดภาษา Dart ที่สร้างจาก plugin ของ Adobe XD

ซึ่งโครงการของ plugin Adobe XD to Flutter ถูกเอาไปวางไว้บน Github แบบเดียวกับของ Figma ที่พลเล่าไปตอนที่แล้วครับ สามารถดาวน์โหลดมาลองได้เลย

ติดตั้ง Plugin

หลังจากเราติดตั้ง Adobe XD ในเครื่องแล้ว ก็สามารถกดลิ้งค์ด้านล่างเพื่อติดตั้งตัว Plugin ต่อได้เลยครับ

ติดตามเรื่องดีๆ แบบนี้ได้ผ่านช่องทางด้านล่างครับ

และเริ่มเรียนรู้การสร้างแอพได้จากคอร์สที่โค้ชพลเตรียมไว้อย่างดีได้เลย

คอร์สออนไลน์เริ่มต้นสร้าง Mobile App ด้วย Google Flutter

เหมาะผู้เริ่มต้น และนักพัฒนาเว็บ, เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

อ้างอิง – Medium, Github

Posted on Leave a comment

Deno มาแล้ว! หรือนี่จะเป็น Node.js เวอร์ชั่นที่ดีกว่า ที่หลายคนตามหา?

สำหรับคนที่ใช้ Node.js นั้น เรื่องความสามารถ รวมไปถึงขีดจำกัดคงทราบดีอยู่แล้ว แต่ถ้าหากมองถึงระบบ Node.js ที่ดีกว่าที่เป็นอยู่ทุกวันนี้ หวยอาจจะมาออกที่ Deno ที่ตอนนี้ตกเป็นหัวข้อพูดคุยในชุมชน Node.js กันยกใหญ่ก็ได้

ซึ่งพลได้เอาข้อมูลของ Deno มาสรุปให้เรา ลองดูด้วยกันว่ามันจะเป็น Node.js ที่ดีกว่าจริงหรือไม่ มาดูกัน

Deno: Runtime ตัวใหม่แห่งจักรวาล Node

หากจะทำความเข้าใจกับ Deno ก็คงต้องเริ่มจากมันเป็น Runtime แบบเดียวกับ Node.js ล่ะครับ เพียงแต่ข้อแตกต่างของมันคือ

  • นอกจากรองรับ JavaScript ยังรองรับ TypeScript ในตัวด้วย
  • มี Security ในตัวด้วยระบบ Sandbox
  • ระบบ Module ที่ปรับปรุงใหม่ จัดการด้วย URL หรือ file path ก็ได้
  • สร้างด้วย V8 ที่เป็น Google Chrome Engine แบบเดียวกับ Node runtime

ซึ่งความสามารถที่รองรับ TypeScript ได้ในตัวนี้ ก็ถือว่าถูกใจจนเอามาลองแล้วล่ะครับ

เดี๋ยวจะมาอธิบายเรื่องระบบ Module ที่สามารถอ้างอิงจาก URL ได้ ดูพิเศษพอตัวเลย

ไปลอง Deno ได้จาก deno.land ได้เลย

เกร็ดเล็กๆ ที่พลไปเจอมา คือผู้สร้าง Deno ตอนแรกสร้างด้วยภาษา Go แต่เปลี่ยนมาใช้ Rust ทำงานแทน เนื่องจากปัญหาด้านเทคนิคกับ V8 Engine ครับ

ติดตามความเคลื่อนไหวใหม่ๆ แบบเดียวกันนี้ ได้ตามช่องทางด้านล่างครับ

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

คอร์สออนไลน์เริ่มต้นสร้าง Mobile App ด้วย Google Flutter

เหมาะผู้เริ่มต้น และนักพัฒนาเว็บ, เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!

Posted on Leave a comment

React: วิธีลงโปรแกรมพร้อมเรียน สำหรับคนใช้ macOS

react-v1
react-v1

ในหลักสูตรอบรม React for Web ของพล จะมีการติดตั้งโปรแกรมให้พร้อมสำหรับใช้ในการเรียน สำหรับเครื่องคอมพิวเตอร์ที่ใช้ macOS มีขั้นตอนตามด้านล่างนี้ครับ

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

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

1. ติดตั้ง Node.js

กดตรงนี้เพื่อดาวน์โหลดตัวติดตั้ง Node.js ให้เลือกดาวน์โหลดแบบ LTS ไม่เอา Current นะนะนะ

และให้เปิดไฟล์ และเริ่มขั้นตอนการติดตั้งให้เรียบร้อย

หลังจากติดตั้ง Node.js เสร็จแล้ว ให้ลองเช็คการทำงาน โดยเปิดโปรแกรม Terminal และรันคำสั่งต่อไปนี้ เพื่อเช็คเวอร์ชั่นของ Node.js ในเครื่อง

node --version

น่าจะเห็นเป็นเลขเวอร์ชั่น (ขึ้นอยู่กับว่าเราติดตั้งเวอร์ชั่นอะไร อาจจะใหม่กว่าของพลก็ได้นะ)

v10.16.0

จากนั้นรันคำสั่ง

npm --version
npx --version

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

6.10.1

1.1 ติดตั้ง Yarn

การติดตั้ง Yarn จะเป็นการรันคำสั่งผ่านโปรแกรม Terminal โดยต้องมีการติดตั้งระบบที่เรียกว่า Homebrew ใน macOS ของเราก่อน ถ้ายังไม่มีก็ดูวิธีการติดตั้ง Homebrew ได้ในคลิปด้านล่าง

ถ้ามีระบบ Homebrew อยู่ในเครื่องแล้ว ก็เปิดโปรแกรม Terminal ขึ้นมา และรันคำสั่งด้านล่าง

brew install yarn

รอจนมันทำงานเสร็จ ก็ลองมาทดสอบคำสั่ง yarn ในโปรแกรม Terminal

โดยพิมพ์คำสั่งแบบด้านล่าง และกด enter

yarn

น่าจะเห็นขึ้นประมาณนี้ (เลขเวอร์ชั่นใหม่กว่าของพล ก็ไม่เป็นไร)

yarn install v1.22.0
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
✨  Done in 0.10s.

2. ติดตั้ง Git Client

โดยปกติ ระบบ macOS จะมี Git client ติดตั้งมาให้อยู่แล้ว แต่ถ้าไม่มีก็สามารถ download ได้จากที่นี่ และติดตั้งตามคลิปด้านล่าง

3. ติดตั้ง Visual Studio Code

ดาวน์โหลดและติดตั้ง Visual Studio Code

และติดตั้งส่วนเสริมจาก link ด้านล่าง

ดาวน์โหลด และติดตั้ง React Extension pack โดย Nextflow

4. เสร็จเรียบร้อย

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

คอร์สออนไลน์เริ่มต้นสร้าง Mobile App ด้วย Google Flutter

เหมาะผู้เริ่มต้น และนักพัฒนาเว็บ, เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!

Posted on Leave a comment

Microsoft ออก Xamarin.Forms 4.6: เพิ่ม UI Controls มากขึ้น, ปรับวิธีการทำงาน

เมื่อสิ้นเดือนที่ผ่านมา ทีมงาน Xamarin ได้ออกเวอร์ชั่นเต็ม 4.6 ให้กับ Framework ของตัวเอง ซึ่งมีความสามารถใหม่ๆ เพิ่มขึ้นมาก มาไล่ดูทีละตัวกันเลยครับ

Visual และ Material Design

ใน Xamarin 3.6 ทางทีมพัฒนาได้ออก API มาตัวหนึ่ง ชื่อว่า Visual

ซึ่งเจ้า Visual เนี่ย จะทำให้แอพที่สร้างด้วย Xamarin สามารถสลับหน้าตาของ UI ในแอพให้ดูเหมือนแอพบน Platform นั้นๆ ได้ เช่น รันบน iOS ก็จะดูเหมือนแอพ iOS รันบน Android ก็จะหน้าตาเหมือนแอพ Android

ซึ่งการเปลี่ยนแปลงของ Visual API ในเวอร์ชั่น 4.6 เนี่ย คือเขาเพิ่ม Material Design Control ของฝั่ง Android ให้มันดูเข้ากับระบบ Android รุ่นใหม่มากขึ้นครับ

นอกเหนือจากนั้น ยังมีการเปลี่ยนแปลงในส่วนของ iOS ที่เอาลิ้งค์ของ UIWebView ออกไปด้วย (deprecated ไปแล้ว ในรุ่นใหม่ๆ จะเปลี่ยนไปใช้ WKWebView แทน)

การปรับแต่งหน้าตาของ Shell Fly-out

Shell เป็นชิ้นส่วนของแอพใน Xamarin ที่ประกอบกันเป็นเมนูในแอพรูปแบบต่างๆ ไม่ว่าจะเป็น Side-menu หรือ Tab

ในเวอร์ชั่น 4.6 เป็นต้นไป Shell สามารถกำหนด Style ได้แล้ว ซึ่งขั้นตอนนี้เกิดจากการนำ item templates มาปรับใช้ใหม่นั่นเอง

ปรับวิธีสร้าง Navigate Back ให้ง่ายขึ้น

แม้ว่าในแต่ละระบบ Platform จะมีขั้นตอนการ “ย้อนกลับ” ไปหน้าแรกของตัวเอง แต่หลายกรณีก็ทำให้เราไม่รู้ว่าจะย้อนกลับไปทาง Route ไหน

ยกตัวอย่างเช่นหน้า Sign in ที่อาจจะเปิดใช้จากหน้าอื่นๆ ในแอพพลิเคชั่นของเรา พอกดยกเลิก ก็ย้อนกลับไปยังหน้าแอพที่แล้ว

ซึ่งวิธีการกำหนดในเวอร์ชั่น 4.6 เป็นต้นไป เราสามารถกำหนด URI เป็น .. ซึ่งจะทำให้ตัวแอพเปิดกลับไปยังหน้าที่แล้วได้อย่างไม่มีปัญหา

await Shell.Current.GoToAsync("..");

Preview ตัว UI ใหม่

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

เช่น

  • C# UI Extension เขียน UI แบบใหม่ โดยไม่ใช้ XAML
  • การฝังฟ้อนท์ Font Embedding
  • Radio Button
  • Expander

โดยการเปิดทดลองใช้งานความสามารถใหม่ๆ พวกนี้ สามารถทำได้ผ่านการกำหนดค่าผ่าน App.xaml.cs ครับ

Device.SetFlags(new[] {
    "RadioButton_Experimental",
    "AppTheme_Experimental",
    "Markup_Experimental",
    "Expander_Experimental"
} );

ติดตามเรื่องอัพเดตใหม่ๆ ได้ผ่านช่องทางต่อไปนี้ รวมถึงเริ่นต้นเรียนรู้สร้างแอพได้ตามเทคโนโลยีที่สนใจด้านล่างครับ

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

คอร์สออนไลน์เริ่มต้นสร้าง Mobile App ด้วย Google Flutter

เหมาะผู้เริ่มต้น และนักพัฒนาเว็บ, เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!

อ้างอิง – Xamarin Blog

Posted on Leave a comment

Visual Studio Codespaces: พื้นที่พลังคลาวด์สำหรับนักพัฒนา สร้างและแก้บั๊กได้ทุกที่ที่ต้องการ ;D

ก่อนหน้านี้ Microsoft ได้เผยถึงระบบแก้ไขโค้ดและใช้งานผ่านหน้าเว็บในชื่อ Visual Studio Online ที่พลเอามาเล่ารอบที่แล้ว มาวันนี้ Microsoft ได้ตั้งชื่อมันอย่างเป็นทางการว่า Codespaces ครับ

Codespaces: มากกว่าแค่ Editor บนเว็บ

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

โดยเฉพาะในช่วงเวลาที่เราต้องทำงานจากที่บ้าน Work from Home กันถ้วนหน้า ความสามารถของ Codespaces นี่มองข้ามไม่ได้เลย

ซึ่งเคสการใช้งาน Codespaces ก็ยกตัวอย่างได้ เช่น

  • อยากทดสอบสร้าง Prototype ของฟีเจอร์ใหม่ ก็สามารถสร้าง Codespaces ขึ้นมาเขียนโค้ดและทดสอบรันได้
  • อยากรีวิว pull request ก็สามารถสร้าง Codespaces ใหม่ขึ้นมารีวิวได้เลย
  • ฟีเจอร์เด็ดคือ สามารถดึง Dockerfiles หรือแม้แต่ Docker Image มา Docker hub มาใช้ทันทีก็ได้ด้วย

ราคาก็คิดตามการใช้งานจริงบน Azure ซึ่งมีการปรับราคาใหม่ดังนี้

  • Linux Instance Type
    • แบบ Standard (4 cores, 8 GB RAM) จาก $0.45 ดอลลาร์ต่อชั่วโมง เป็น $0.17 ดอลลาร์ต่อชั่วโมง
    • แบบ Premium (8 cores, 16 GB RAM) จาก $0.87 ดอลลาร์ต่อชั่วโมง เป็น $0.34 ดอลลาร์ต่อชั่วโมง

หรือถ้าอยากลองของครั้งแรก ก็มีแบบ Basic ให้ด้วย

  • Basic Linux Instance Type (2 cores, 4GM RAM) จาก 0.24 ดอลลาร์ เหลือแค่ $0.08 ดอลลาร์ต่อชั่วโมง

ติดตามอัพเดตเรื่องแบบนี้ได้ ผ่านช่องทางด้านล่างครับ

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

คอร์สออนไลน์เริ่มต้นสร้าง Mobile App ด้วย Google Flutter

เหมาะผู้เริ่มต้น และนักพัฒนาเว็บ, เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!

อ้างอิง – Visual Studio Blog

Posted on Leave a comment

วิธีปลดล๊อค Powershell ให้รันสคริปต์คำสั่งโดยตรงได้บน Windows

Blog Cover - Windows Terminal by Nexftflow
Blog Cover - Windows Terminal by Nexftflow

เชื่อว่าหลายๆ คนที่ใช้ Powershell แทน Command Prompt ใน Windows 10 ช่วงหลังๆ อาจจะตกใจที่บางทีเราไม่อาจจะรันคำสั่งบางอย่างได้ และขึ้นข้อความประมาณนี้

ionic : File C:\Users\teerasejjiraphatchan\AppData\Roaming\npm\ionic.ps1 cannot be loaded because running 
scripts is disabled on this system. For more information, see about_Execution_Policies at 
https:/go.microsoft.com/fwlink/?LinkID=135170.
At line:1 char:1
+ ionic
+ ~~~~~
    + CategoryInfo          : SecurityError: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

พลก็เจอมาเหมือนกัน เลยไปหาวิธีแก้ไขมาครับ

วิธีที่ค่อนข้างง่ายที่สุด คือการรันคำสั่งปรับการตั้งค่าผ่าน Powershell โดยตรง นั่นคือให้รันคำสั่ง

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

ซึ่งการปลดล๊อคตรงนี้จะมีผลเฉพาะ User ที่เราใช้งานอยู่เท่านั้นครับ

ถ้าต้องการให้กับมา block เหมือนเดิม ก็ให้รันคำสั่งด้านล่างใน Powershell อีกทีครับ

Set-ExecutionPolicy Restricted -Scope CurrentUser

อ้างอิง – StackOverflow

Posted on Leave a comment

Figma + Google Flutter: เครื่องมือสำหรับนักออกแบบ เพิ่มส่วนการทำงานรองรับภาษา Dart พร้อมสร้าง UI สำหรับ Google Flutter

Blog cover - Figma to Flutter
Blog cover - Figma to Flutter

อัพเดตข่าว Google Flutter กันหน่อย กับสายนักออกแบบที่สามารถแปลงงานที่สร้างบนโปรแกรม Figma ของตัวเอง ไปใช้งานในแอพพลิเคชั่นที่สร้างจาก Google Flutter ได้

โครงการนี้เป็นโครงการของชุมชนนักพัฒนา ที่สร้างตัวแปลงงานออกแบบที่สร้างบน Figma ไปเป็นโค้ดภาษา Dart ซึ่งสามารถนำไปใช้ต่อได้บนโปรเจคของ Google Flutter

นั่นหมายความว่าโครงการนี้เป็นของ 3rd Party ไม่ได้เป็นความสามารถที่ Figma ทำขึ้นมาในโปรแกรมโดยตรง ควรศึกษารายละเอียดให้ดีๆ ก่อนตัดสินใจนะครับ

ว่าแล้วใครสนใจก็คลิกไปดูโครงการและวิธีใช้ใน Github ได้เลย

นอกจากนั้น Figma ยังรองรับการ export เป็น JSON และ PDF ด้วยนะ

ติดตามอัพเดตแบบนี้ได้ผ่านช่องทางด้านล่าง

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

คอร์สออนไลน์เริ่มต้นสร้าง Mobile App ด้วย Google Flutter

เหมาะผู้เริ่มต้น และนักพัฒนาเว็บ, เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

Posted on Leave a comment

Google Flutter: วิธีแก้ปัญหาพื้นที่ฮาร์ดดิสก์เต็ม เพราะ Xcode (dyld_shared_cache เต็มเครื่อง)

อันนี้โค้ชพลเจอมากับตัวเองเลย กับที่จู่ๆ เครื่อง macOS ของพลก็มีอันพื้นที่สิ้นสูญ จาก 40 GB เหลือไม่ถึง 20 mb ไปๆ มาๆ นึกว่าเราเจอไวรัส แต่ปรากฎว่า ต้นเหตุเป็นการทำงานที่ระหว่างการทำแอพ iOS ที่ใช้ Flutter ครับ

มาดูตัวปัญหากัน

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

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

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

/private/var/folders/rc/

ด้านในมีโฟลเดอร์อะไรก็ไม่รู้เป็น 10 โฟลเดอร์ แต่ทุกอันจะตั้งชื่อเหมือนกันนั่นคือ

A Document Being Saved By xcdevice

(ค่อยๆ หันไปมอง Xcode อย่างช้าๆ…​ แกต้องเกี่ยวข้องอะไรสักอย่างแหละ ชื่อบอกขนาดนี้)

วิธีแก้ไข Cache File เจ้าปัญหา

เมื่อลองลบ และรีสตาร์ทมา 2 – 3 ครั้ง ก็พบว่าโฟลเดอร์แบ่งตัวได้พวกนี้แหละ คือตัวการ แต่ละโฟลเดอร์มีขนาดเท่ากันหมดคือ 1.7 GB เลยไปดูในเน็ทว่ามีคนเจอเหมือนกันมั้ย

ปรากฎว่า มี!

วิธีแก้ปัญหาคือ

  1. ให้เราเปิดโปรแกรม Xcode
  2. และไปที่ส่วนเมนู Windows > Devices and Simulator
  3. เลือกเครื่อง iPhone ของเรา
  4. และรอให้การทำงานที่เรียกว่า “Copying cache files from device” ทำงานจนสมบูรณ์

เท่านี้เครื่องก็จะไม่ค้าง เนื้อที่ไม่ถูกล้างผลาญแล้วครับ

เกือบแย่เหมือนกัน เลยมาเขียนไว้เผื่อมีใครเจอแบบเดียวกับพลครับ

ติดตามเรื่องราวของ Flutter และเทคโนโลยีอื่นๆ ได้ผ่านช่องทางต่อไปนี้

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

คอร์สออนไลน์เริ่มต้นสร้าง Mobile App ด้วย Google Flutter

เหมาะผู้เริ่มต้น และนักพัฒนาเว็บ, เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

อ้างอิง – StackOverflow

Posted on Leave a comment

React.StrictMode คืออะไร? มาทำความรู้จักกัน

react-v1
react-v1

จะเห็นว่าช่วงหลังๆ React มีการเพิ่ม Component ใหม่เข้ามาในโปรเจค โดยเฉพาะคนที่ใช้ createi-react-app ในการสร้างโปรเจค จะเห็นเลยว่าในไฟล์ index.js มีการเพิ่ม Component ประหลาดเข้ามาชื่อ <React.StrictMode>

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

มันมีความสำคัญยังไง? ทำไมถึงเอามาครอบตั้งแต่ App Component?

มาทำความเข้าใจกับมันกันครับ

คุณครูมาตรวจแล้ว!

หน้าที่หลักของ <React.StrictMode> คือการช่วยเราตรวจสอบการใช้งาน React ที่ไม่เหมาะสมครับ คล้ายๆ กับคุณครูฝ่ายปกครองมาเดินตรวจความเรียบร้อยของพวกเรานี่แหละ

และเพื่อตรวจจับวิธีการเขียนโค้ดใน React แบบเก่าบางตัวที่ไม่เหมาะสม และแนะนำการปรับโค้ดเป็นแบบใหม่เพื่อรองรับการมาถึงของกลไกการทำงานของ React ในอนาคตอันใกล้ โดยมีการแจ้งเตือนเป็น Warning หรือ Error ขณะรันใช้งาน

React.StrictMode เป็นตัวตรวจสอบการใช้งาน code ของเราว่าเหมาะสมหรือไม่ และให้คำแนะนำ แถมทำงานเฉพาะในโหมดพัฒนา (Development Mode) และไม่ทำงานใน Production จ้า

โดยหน้าที่หลักในปัจจุบันของ <React.StrictMode> มีดังนี้

ตรวจจับการใช้งาน Context API แบบเก่า และให้คำแนะนำในการแก้ไข (ดูการใช้งาน Context API แบบใหม่ที่นี่)

ตรวจจับผลของ Side-effect ที่ไม่เหมาะสมจากการเขียนใช้งาน Lifecycle Method

แจ้งเตือน หากตรวจจับการใช้งาน findDOMNode ที่กำลังจะปลดระวางการใช้งาน และให้คำแนะนำในการแก้ไข

แจ้งเตือน หากตรวจจับการใช้งาน String Ref API แบบเก่า และให้คำแนะนำในการแก้ไข (ดูการใช้งาน createRef API แทนที่นี่)

ตรวจจับการใช้งาน Lifecycle ที่ไม่เหมาะสม

วิธีใช้ React.StrictMode

ดังนั้นหากต้องการตรวจสอบการทำงานของโค้ดเรา เพื่อปรับปรุงให้ทันสมัยขึ้น เราก็ใส่ React.StrictMode ในครอบ Component ที่เราต้องการได้ เช่น

 <React.StrictMode>
    <NextflowComponent />
  </React.StrictMode>,

หรือถ้าเกิดเราสร้างโปรเจคใหม่โดยใช้ create-react-app มันก็จะใส่มาที่ตั้งแต่ ReactDOM.render() ในไฟล์ index.js เลย

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

ติดตามเทคนิคดีๆ แบบนี้ ได้ทางช่องทางด้านล่าง และดูคอร์สเรียนโปรแกรมที่น่าสนใจได้เลยจ้า

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

คอร์สออนไลน์เริ่มต้นสร้าง Mobile App ด้วย Google Flutter

เหมาะผู้เริ่มต้น และนักพัฒนาเว็บ, เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!

อ้างอิง – React Documentation

Posted on Leave a comment

.NET Conf Focus on Xamarin: รวมวิดีโอย้อนหลังทุกเนื้อหา

อย่างที่ Microsoft ประกาศว่างาน Event ทั้งหมดจะปรับเป็นแบบ Online ทั้งหมดจนถึงปีหน้า ล่าสุดงาน .NET Conference หรือที่เรียกกันสั้นๆ ว่า .NET Conf ก็มีอีเว้นท์ที่โฟกัสในฝั่ง Xamarin โดยตรง

ซึ่งมีหัวข้อน่าสนใจหลายตัวมาก ตอนนี้มี Recap วิดีโอออกมาแล้ว เลยรวม และสรุปมาให้ชมกัน

Keynote: Xamarin all the Things

CVP ของผลิตภัณฑ์เครื่องมือฝั่งนักพัฒนา ได้ประกาศความคืบหน้าในการพัฒนาด้านเครื่องมือฝั่ง Xamarin และความสามารถใหม่ๆ เพื่อให้นักพัฒนา Mobile Application ทำงานได้เร็วขึ้น

Visualize Your Data (CollectionView, CarouselView, และอื่นๆ)

สมาชิกทีมงาน Xamarin.Forms ขึ้นมาสาธิตวิธีการทำงานอันหลากหลาย ในการทำงานกับข้อมูล พร้อมทั้ง Component ใหม่ๆ อย่าง RefreshView และ SwipeView

Testing Your Xamarin Apps

สาธิตวิธีการทำ Test ให้กับแอพพลิเคชั่นของเราในรูปแบบต่างๆ ตั้งแต่ source code ธรรมดา ไปจนถึง User Interface

Xamarin Productivity to the Max

แสดงฟีเจอร์และความสามารถใหม่ๆ ที่ทีม Xamarin ทำให้กับ Visual Studio เช่น Intellisense, XAML Hot Reload, Hot Restart, และอื่นๆ อีกมากมาย

Building Beautiful Apps with Xamarin.Forms

สาธิตแนวทางการสร้าง User Interface ที่สวยงามบน Xamarin.Forms ด้วยการกระเทาะแนวคิด และแสดงตัวอย่างของแอพพลิเคชั่นที่สวยงาม และสร้างด้วย Xamarin.Forms

Going Reactive with Reactive Extensions & UI

แนะนำการใช้งาน Rx แนวทางของ Reactive ที่สามารถนำมาใช้งานกับโค้ดเดิม และ User Interface ของแอพของเราได้

Spectacular Components for Xamarin Apps

แนะนำ Library เจ๋งๆ จากพาร์ทเนอร์ของ Microsoft ที่สรรค์สร้าง Component ดีๆ มาให้เราใช้งานกันในเวอร์ชั่นล่าสุดของ Xamarin

Xamarin Mobile Development for ASP.NET Developers

อธิบายเปรียบเทียบโปรเจคเว็บเดิม กับโปรเจค Mobile Application ใน Xamarin เหมาะมากสำหรับคนที่เขียนเว็บด้วย ASP.NET อยู่แล้ว

Developing Dual-screen Experiences with Xamarin

แนวทางสำหรับนักพัฒนาแอพพลิเคชั่นด้วย Xamarin เพื่อใช้งานบนอุปกรณ์หน้าจอคู่ (Dual Screen Device) และการนำแอพเดิมมาใช้ใหม่บนอุปกรณ์ที่แหวกแนวนี่สุดแห่งช่วงเวลานี้

ซึ่งโค้ชพลก็มีสรุปเอาไว้บ้างแล้ว ทั้งข้อควรรู้สำหรับการทำแอพบน Dual Screen Device และความรู้เดิมที่เอามาใช้ได้ใน Dual Screen Device

All Things Xamarin.Forms Shell

สาธิตการใช้งาน Shell ของ Xamarin.Forms ที่สามารถทำได้ทุกอย่าง

Building & Marketing Award Winning Xamarin Apps

แชร์วิธีการสร้าง จนไปถึงการทำตลาดจากประสบการณ์จริง ของนักสร้างแอพที่ได้รางวัล

Developing Accessible Xamarin Apps

สาธิตการทำ Accessibility ในแอพ Xamarin และวิธีทดสอบการทำงาน

Stitching Together a Mobile Backend for your App

วิดีโอนี้แสดงการเชื่อมตัวแอพของ Xamarin เข้ากับ Backend โดยเน้นไปที่ระบบ Cloud ของ Microsoft Azure ทั้งด้านข้อมูล (Data), ความปลอดภัย (Security) และการใช้บริการต่างๆ จาก Azure

Developing Performant Xamarin Apps

เป็นการแสดงการ test และปรัลแต่งแอพเพื่อให้ได้ประสิทธิภาพการทำงานสูงสุด เป็นแนวเคล็ดลับครับ สามารถดูได้ทั้งมือใหม่ และโปรแล้ว

ติดตามอัพเดตต่อไป ผ่านช่องทางต่อไปนี้

และเริ่มเรียนคอร์สที่น่าสนใจได้ด้านล่างครับ

คอร์สออนไลน์เริ่มต้นสร้าง Mobile App ด้วย Google Flutter

เหมาะผู้เริ่มต้น และนักพัฒนาเว็บ, เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!

อ้างอิง – Xamarin Blog