Quantcast
Channel: cc :: somkiat
Viewing all 2000 articles
Browse latest View live

สวัสดี Angular 12 :: e2e test หายไปแล้ว

$
0
0

เพิ่งทำการติดตั้ง Angular 12 ไป หลังจากที่ปล่อยออกมา
พบว่ามีหลายอย่างที่น่าสนใจ ประกอบไปด้วย

  • View Engine ถูกแจ้งว่า deprecated แล้ว
  • Protreactor สำหรับการทดสอบแบบ end-to-end test เอาออกไปแล้ว โดยตอนนี้กำลังไปที่ Cypress, WebDriverIO และ TestCafe
  • ใช้งาน Nullish coalescing operator ใน component ได้
  • Strict mode by default ให้เลย
  • แจ้งเตือน IE11 deprecated แล้ว ซึ่งจะไม่สนับสนุนใน Angular 13
  • Default environment ในการ build คือ production
  • ปรับปรุงการ build ให้เร็วขึ้น

ทำการติดั้งและ update กันดูครับ

[gist id="270d6565e5f063de026169dbab9ec0a9" file="1.txt"]

ลองใช้งาน Tailwind CSS ใน Angular 12

$
0
0

จาก Angular 12 นั้น บอกว่าสามารถทำงานร่วมกับ Tailwind CSS 2.1.2 ง่ายขึ้น
นั่นคือ ไม่ต้องมา configuration อะไรมาก
จึงลองใช้งานนิดหน่อย ก็ง่ายจริง ๆ
มาดูว่า ทำอย่างไรกันบ้าง

ขั้นตอนที่ 1 สร้าง project ด้วย SCSS และติดตั้ง Tailwind

[gist id="223f99fd97fb3a277b69f692210ac7ab" file="1.txt"]

ขั้นตอนที่ 2 ทำการ initial config ของ Tailwind ใน project

จะสร้างไฟล์ tailwind.config.js

[gist id="223f99fd97fb3a277b69f692210ac7ab" file="2.txt"]

ขั้นตอนที่ 3 ทำการ import Tailwind ในไฟล์ styles.scss

[gist id="223f99fd97fb3a277b69f692210ac7ab" file="styles.scss"]

ขั้นตอนที่ 4 ลองใช้งาน Tailwind ใน component

ไป copy มาจาก web Tailwind เลย

[gist id="223f99fd97fb3a277b69f692210ac7ab" file="app.component.html"]

แสดงผลการทำงานดังนี้

เป็นอีกเรียบร้อย สำหรับการใช้งาน Tailwind CSS ใน Angular 12

ลอง Enable JIT mode ของ Tailwind CSS พบว่า มันแจ่มมาก

ขนาดของ CSS ลดลงไปจาก 2.78 MB เหลือ 2.8 KB

[gist id="223f99fd97fb3a277b69f692210ac7ab" file="3.txt"]

Tips การใช้งาน Git แบบง่าย ๆ ไหมนะ !!

$
0
0

วันนี้ทำการสรุปเรื่องการใช้งาน Git ไว้
เพื่อใช้สำหรับการทำ workshop เกี่ยวกับการจัดการ version ของ code
จึงทำให้เห็นว่ามี tip ที่น่าสนใจ และ ใช้งานบ่อย ๆ ไว้

เรื่องแรกที่มักจะบอกเสมอคือ อย่า Force Push !!

ถ้าไม่จำเป็นจริง ๆ เช่น ต้องการให้พังก็ force ไป
เพราะว่า การ force push นั้น
เป็นการเปลี่ยนแปลง history ของ commit ใน remote repository
ดังนั้นจะทำให้คนอื่น ๆ มีปัญหาไปด้วย
อาจจะมาจากการ rebase หรือ squash commit

ดังนั้นถึงระวังไว้
ยิ่งถ้าใครสาย UI จะพบว่าแค่ไป check ที่ force push ก็ไปเลยนะ !!

ถ้าจะทำจริง ๆ ทางเลือกที่เจ็บน้อยลงคือ Force with lease
ซึ่งสามารถทำการ alias จาก force push มาเป็น Force with lease ได้

เรื่องที่สอง ถ้าขี้เกียจกำหนด remote branch ก็ใช้ upstream ไป

[code] $git push -u origin your-branch [/code]

เรื่องที่สาม ตั้วชื่อ branch ให้มันรู้เรื่องและเข้าใจ ตรงกับสิ่งที่ทำ

ชื่อ branch ที่ไม่ควรมี

  • feature01, 02, 03
  • ชื่อของเราเอง !!

เพิ่มเติมคือ commit message เช่นเดียวกัน
มันมีใส่ทั้ง subject และ description นะ
ไม่ใช่มีแต่ update update update
ไม่ใช่มีแต่ fixed fixed fixed

เรื่องที่สี่ สำหรับสาย feature branch ถ้า merge ไปแล้วก็ลบทิ้งไปซะ

มาก branch มากความ
แต่หลายคนบอกว่าหลีกเลี่ยงไม่ได้
แต่เมื่อคุณทำการ merge ไปยัง branch หลักเรียบร้อย
แล้วควรลบ feature branch นั้น ๆ ไปซะ
จะเก็บไว้ทำซากอะไร !!
ยิ่งเป็น local branch ยิ่งควรลบ

หรือถ้ามีคนลบ branch จาก remote repository แล้ว
เมื่อเราทำการ fetch มา แล้วทำการลบที่ local repository เลย
ให้ทำการ config ดังนี้

[code] $git config fetch.prune true [/code]

เรื่องที่ห้า สายหลบ หรือ การ stash เพื่อเก็บการเปลี่ยนแปลงที่ local ไว้

ก่อนที่จะทำการ pull หรือเปลี่ยน branch มักจะใช้ stash
ดังนั้นการใช้งานควรใส่ชื่อหรือ stash message ที่สื่อถึงก่ีเปลี่ยนแปลงเหล่านั้นไว้ด้วย
กฎกติกาคือ ควรมี stash ได้เพียง 1 ตัวเท่านั้น

เรื่องที่หก Rebase vs Merge

ปกติแล้วนั้น git จะทำการ merge ให้อัตโนมัติ
สำหรับการ pull การเปลี่ยนแปลงมาที่ local branch repository
ซึ่งจะทำการสร้าง commit สำหรับการ merge ขึ้นมา
ทำให้หลาย ๆ คนอาจจะไม่พอได้ผลการทำงาน

ดังนั้น เพื่อความ clean ของ commit ใน branch ต่าง ๆ
แนะนำให้ใช้การ rebase แทน
แต่ก็ระวังด้วย เพราะว่า จะทำให้เกิดปัญหาในข้อหนึ่ง

สามารถเปลี่ยนค่า default ของการ pull เป็น rebase ดังนี้

[code] $git config pull.rebase true [/code]

อีกอย่าง ผมมักจะทำ squash ก่อน rebase เสมอ
เป็นการยุบหรือตกแต่ง commit ให้สวยงาม
เช่นจาก 20 commit รวมให้เหลือแค่ 5 commit
ก็ได้จะทำให้เราได้ release note สวย ๆ

สามารถกำหนดค่า default ของการ rebase ให้เป็น squash ได้เลย

[code] $git config rebase.autosquash true [/code]

เรื่องที่เจ็ด ต้องการเปลี่ยน commit message ใน commit ล่าสุดด้วย amend

[code] $git commit --amend [/code]

หรือลืม add file ใน commit ล่าสุด ก็เพิ่มเข้าไป

[code] $git add somefile $git commit --amend [/code]

เรื่องสุดท้าย ลบ file และ folder ที่ untracked ทิ้งไป ด้วย git clean -d --force

สรุปเรื่อง The software architect fallacy น่าสนใจมาก ๆ

$
0
0

วันนี้อ่านบทความเรื่อง The software architect fallacy
โดยสิ่งที่น่าสนใจคือ ภาพประกอบการอธิบายในบทความ
ซึ่งใช้การสร้างเรือมาอธิบายเรื่องของการ ออกแบบและสร้างระบบงาน
เป็นการพัฒนาเป็นรอบ ๆ ไป ตามความต้องการ
มาดูกันว่า ใครยังเป็นแบบนี้กันอยู่บ้าง ?

รอบที่ 1 ทำการสร้างเรือตกปลา ที่รองรับคนได้ 2 คนก็พอ

เป็นการสร้างให้รองรับ customer หลักก่อนเลย
จึงสร้างเรือดังภาพขึ้นมา

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

รอบที่ 2 ทีมคิดว่า ถ้าที่เก็บเป็นแบบนี้ จะไม่สามารถเก็บความเย็นได้นานเพียงพอ

ดังนั้นจึงต้องการที่ทำความเน็นได้นาน ๆ
ต้องใช้ไฟฟ้าเข้ามาด้วย
จึงต้องมีการติดตั้ง battery เข้าไปในเรือพร้อมกับตู้เย็น ดังภาพ

รอบที่ 3 เมื่อลูกค้านำไปใช้งานอีกรอบ พบว่าการออกไปตกปลาทั้งวัน ต้องเจอแดดร้อน ๆ

ดังนั้นจึงต้องการหลังคา เพื่อกันแดด
แต่ผลที่ตามมาคือ เมื่อความเร็วของเรือสูงขึ้น
หลังคาจะต้านลม ทำให้ช้าลง
รวมทั้ง motor ของเรือมันเล็กอีกด้วย

รอบที่ 4 ในการออกไปตกปลา ต้องเจอกับความมืดได้

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

รอบที่ 5 เนื่องจากมีการใช้ไฟ และ ตู้เย็น บนเรือ ผลที่ตามมาคือ battery มีขนาดเล็กไปแล้ว ไม่เพียงพอ

ดังนั้นจึงต้องทำการเพิ่มขนาดของ battery
เป็นการเพิ่ม technical debt เข้าไปเล็กน้อยใช่ไหมนะ ?

รอบที่ 6 ตอนนี้นำหนักเรือมากขึ้น ส่งผลให้ความเร็วของเรือตกลงไป ทำอย่างไรให้เร็วขึ้น ?

เริ่มเรื่องของ Make it Fast แล้ว
ง่าย ๆ ก็ขยายขนาดของ motor ให้ใหญ่ขึ้นสิ
ผลที่ตามมาคือ เมื่อเร็วขึ้น เรือจะเริ่มไม่นิ่ง

รอบที่ 7 เริ่มต้องการห้องอาบน้ำ !!

รอบที่ 8 ตอนนี้รู้สึกว่า เรือจะเล็กไป อยากให้รองรับคนได้มากขึ้น

ทำอย่างไรกันดี ?

รอบที่ 9 ตกปลาแล้วง่วง อยากมีที่งีบหน่อยนึง !!

มาถึงตรงนี้ คิดเห็นอย่างไรกันบ้าง ?
สำหรับ product นี้ !!

[Docker] บันทึกการใช้งาน extra hosts และ fix ip ของ container

$
0
0

ปัญหา

มี requirement น่าสนใจ เกี่ยวกับการใช้งาน Docker
เพื่อใช้ในการพัฒนาระบบงาน
โดยต้องการให้แต่ละ container มี IP ตามที่ต้องการ (Fix IP)
จากนั้นแต่ละ container จะติดต่อกันผ่าน domain ที่เรากำหนด
การทำงานแสดงดังรูป

วิธีการแก้ไขปัญหาตามที่ต้องการด้วย Docker + Docker compose

โดยใน docker และ docker compose นั้น
จะมีความสามารถในการกำหนด

  • Networks ทั้ง subnet mask และ ช่วงของ IP ที่ต้องการ
  • แต่ละ container ต้องกำหนด IP ที่ต้องการได้
  • พร้องกับเพิ่ม extra_hosts ของแต่ละ container มันคือการเพิ่ม mapping ในไฟล์ /etc/hosts ให้นั่นเอง

ตัวอย่างของ Docker compose file ที่ใช้งานแบบง่าย ๆ เป็นดังนี้

โดยใช้งานร่วมกับ NGINX ไปด้วย

[gist id="ce9e104ee867d913f46ecb1bbb546dac" file="docker-compose.yml"]

เพียงเท่านี้ก็สามารถทำงานตามที่ต้องการได้แล้ว

Apache Kafka 2.8.0 :: ให้ลองใช้งาน KIP-500 กันแล้ว (Early Access version)

$
0
0

Apache Kafka นั้นได้ปล่อย version 2.8.0 มาเมื่อวันที่ 16 เมษายน
โดยความสามารถที่น่าสนใจมีทั้ง Core, Connect และ Stream
แต่ตัวที่น่าสนใจคือ KIP-500

นั่นก็คือ การเปลี่ยนที่เก็บข้อมูลต่าง ๆ สำหรับการจัดการ (Metadata)
จาก Apache Zookeeper มาไว้ใน Apache Kafka เองเลย
เพื่อลดความซับซ้อนของระบบ
ทั้งการติดตั้งและ configuration
รวมทั้งในเรื่องของ scale และ security ของระบบ

KIP-500 แสดงง่าย ๆ ดังรูป

โดยใน version 2.8.0 นี้มีให้เราลองใช้งาน KIP-500 (Early Access)

เพื่อลองทดสอบว่าเป็นอย่างไรบ้าง
แน่นอนว่า มันคืออนาคตของ Apache Kafka
แต่ยังไม่ให้ใช้งานจริงบน production นะ

ซึ่งจาก VDO แนะนำความสามารถของ Apache Kafka 2.8.0
ได้นำเสมอความเร็วที่เพิ่มขึ้นดังนี้

ลองดูเพิ่มเติมกันดูครับ
สำหรับใครที่ใช้หรือกำลังจะใช้งานมันพลาดไม่ได้เลยนะ

Firebase Local Emulator สนับสนุน Cloud Storage แล้ว

$
0
0

พอดีติดตามเรื่องของ Cloud Storage Emulator
ซึ่งเป็นอีกหนึ่ง feature ที่มีการขอเพิ่มใน Firebase Local Emulator มาสักพักแล้ว
เมื่อคืนก่อนงาน Google I/O ทางทีมพัฒนาก็ได้มา close issue นี้
เพราะว่าจะเปิดตัวในงานนั่นเอง

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

ตัวอย่างของ Firebase Local Emulator UI ดังนี้

ทำการ upload file เข้าไปได้เลย

ลองใช้งานกันดูครับ ใช้งานง่ายดีมาก ๆ

สวัสดี Flutter 2.2

$
0
0

จากงาน Google I/O ได้ประกาศปล่อย Flutter 2.2 ออกมาให้ใช้งาน
โดยมีเป้าหมายเพื่อปรับปรุงประสิทธิภาพการทำงาน
รวมทั้งช่วยส่งมอบระบบงานที่น่าเชื่อถือมากยิ่งขึ้น ดังนี้

  • ภาษา Dart 2.13
  • Null safety เป็นค่า default แล้ว ไม่ต้องมาทำการ migrate
  • สำหรับ Flutter for web สามารถทำการ cache resource ต่าง ๆ ใน background process ด้วยการใช้งาน service worker
  • สำหรับ Flutter for Android สามารถใช้งาน Deferred component นั่นคือ การ download component ใน runtime ได้ ซึ่งช่วยลดขนาด app ที่ทำการ download
  • ปรับปรุง DevTool suite ช่วยให้ดูและวิเคราะห์การใช้งาน memory ของ app และหาปัญหาต่าง ๆ
  • มีเพิ่มและปรับปรุง plugin เพิ่มเติมทั้ง payment และ in-app purchase

ไป upgrade กัน $flutter upgrade


[Flutter] บันทึกแนวทางการจัดการเรื่อง SEO (Search Engine Optimization)

$
0
0

จาก Flutter 2 ที่ออกมา โดยรองรับการพัฒนา web application ด้วย
จึงมีปัญหาหนึ่งเรื่องที่ใน community ของกันเยอะ
นั่นก็คือเรื่องของ SEO Friendly
หรือใน Flutter User Experience Research (UXR) ก็มีเช่นกัน
รวมทั้ง feature อื่น ๆ เช่น Hot Reload (ไม่ต้องมากดได้ไหม) เป็นต้น

ดังนั้นวิธีการยังไม่มีเลย

เนื่องจากจะทำการแปลงจาก Flutter/Dart มาเป็น HTML/CSS/JS ให้
ทำให้เราทำอะไรมากไม่ค่อยได้

แต่จากที่ลองทำใน project เบื้องต้น สรุปสิ่งที่พอทำได้ดังนี้

ซึ่งผลที่ออกมาก็ถือว่าน่าพอใจ และตรงกับที่ต้องการ
นั่นคือเรื่องของ SEO และการ share content
ใน Social media ต่าง ๆ ได้ง่ายและเหมาะสมขึ้น
ขั้นตอนมีดังนี้

ขั้นตอนที่ 1 ใน web app ก็มีการใช้งาน routing ปกติ

โดยจะแบ่งตามหน้ารายการ รวมทั้ง detail เช่น

  • Main page ใช้ /
  • Promotion page ใช้ #/promotion
  • ใน promotion detail page ใช้ #/promotion/1

โดยทุกหน้าสามารถเข้าถึงด้วย URL ข้างต้นได้ทั้งหมด

ขั้นตอนที่ 2 เปลี่ยนการ reference หรืออ้างถึง URL ใน page ต่าง ๆ

โดยทำการกำหนด slug หรือ URL ที่ friendly ขึ้นมาของแต่ละหน้า
โดยเฉพาะในหน้า promotion detail
ซึ่งกำหนดใหม่ให้เป็น /promotion/slug
รวมทั้งมีการ custom header ต่าง ๆ ของ page ตามที่ต้องการ
และนำข้อมูลจาก #/promotion/1 มาใช้
ขั้นตอนนี้เหมือนการทำ template นั่นเอง

ขั้นตอนที่ 3 ใช้ Puppeteer มาเพื่อสร้างหรือ generate หน้าที่ต้องการไว้

และบันทึกไว้บน server ที่สร้างไว้
และสร้าง server route เข้าถึง
ทำให้ทางฝั่งคนเรียกหรือผู้ใช้งานเข้าถึงได้ง่าย
รวมทั้งก็เอาไปใส่ sitemap และการ share ได้ง่ายขึ้น

แต่ปัญหาที่ตามมาคือ เมื่อทุกครั้ง content เพิ่มหรือเปลี่ยนแปลง
ก็ต้องมี run puppeteer ใหม่ทุกครั้ง ซึ่งกิน resource น่าดู
จึงทำการแยกส่วนงานนี้ออกไปอีกเครื่อง
รวมทั้งเรื่องการ monitoring task การทำงานนี้ตลอดเวลาด้วย
และทำให้ระบบงานทำการเริ่มซับซ้อนขึ้น

แต่ผลที่ออกมาก็เป็นที่น่าพอใจ ได้ไปต่อในตอนนี้

[Flutter] จัดการ version ด้วย FVM (Flutter Version Management)

$
0
0

ว่าง ๆ ของไปดูตัวจัดการ version ของ Flutter หน่อย
ซึ่งปกติก็จะติดตั้งและ set PATH ไป
เพราะว่า ไม่ต้องจัดการ version อะไรมากมายนัก
แต่ก็อยากรู้ว่ามีเครื่องมืออะไรมาจัดการหรือไม่
ก็ไปเจอเครื่องมือเรียกว่า FVM (Flutter Version Management)

FVM จะเข้ามาช่วยจัดการ version ของ Flutter หลายตัวในเครื่องเดียวกัน
ซึ่งการใช้งานก็ไม่ยาก
เริ่มจากการติดตั้งผ่าน pub ดังนี้

[code]$pub global activate fvm[/code]

จากนั้นสามารถดูได้ว่า Flutter มี version อะไรบ้าง
ซึ่งจะไปอ่านข้อมูลจาก URL ตาม OS
ยกตัวอย่างเช่นของ MacOS
โดยใช้คำสั่ง

[code]$fvm releases[/code]

ทำการติดตั้ง Flutter ผ่าน fvm

[code]$fvm install [/code]

เมื่อทำการติดตั้ง version ที่ต้องการแล้ว สามารถเลือก version ที่ต้องการใช้งานได้

[code]$fvm use [/code]

เพียงเท่านี้ก็สามารถจัดการ version ของ Flutter ได้แล้ว

[Dart] สรุปจาก session เรื่อง Why null safety ?

$
0
0

ใน Flutter 2.2 นั้น Null Safety จากภาษา Dart จะเป็นค่า default ให้เลย
เนื่องจากก่อนหน้านี้จะต้องทำการ migrate project ตามความต้องการ
ดังนั้นเรามาทำความเข้าใจกันว่า
ทำไมต้อง Null Safty ด้วย
มาจาก VDO ในงาน Google I/O 2021 เรื่อง Why null safety ?
เป็นอีก session ที่ชอบมาก ๆ
จึงสรุปไว้นิดหน่อย

เริ่มจาก code ของ Dart จะมีตัวแปร 2 แบบคือ

  • Nullable
  • Non Nullable

ตัวอย่างเช่น
ถ้าเป็น Non Nullable แต่ดันส่งค่า null เข้าไป
จะมี error ดังนี้ ซึ่งเป็น compile time error

ในทางกลับกัน ถ้ากำหนดให้เป็น Nullable แล้ว พยายามเข้าถึงค่านั้นตรง ๆ

ก็จะเกิด compile error เช่นกัน เพราว่า อาจจะเกิดปัญหาได้ เพราะว่ามีโอกาสเป็น nullดังนั้นมีโอกาสเกิด NullPointer Exception (NPE) ได้
ปล. nullable คือการใส่ ? หลังชื่อ type นั่นเอง

การทำงานนั้น ต้องการ feedback loop ที่รวดเร็ว

จึงทำการ compile change หลังจากที่แก้ไข
หรือเปลี่ยงแปลง code เลยแสดงการทำงานดังรูป

เปลี่ยนมาให้เร็วขึ้น

ส่วนพวก Type checking ยิ่งเร็วมาก ๆ
เพราะว่า Dart เป็น static type อยู่แล้ว
ทำให้การตรวจสอบง่ายและเร็วขึ้น

หลังจากมี Null Safety ขึ้นมาแล้ว

การทำงานของ compiler จะลดน้อยลง
นั่นคือการทำงานเร็วขึ้นนั่นเอง

แต่การใช้งานก็ต้องระวังด้วยเช่นกัน เพราะว่า ถ้าใช้ผิดก็เกิดปัญหาได้เช่นกัน

ยกตัวอย่างการ force cast แบบนี้

[gist id="f40f70f6cd988b559383d10823a68963" file="demo02.dart"]

ดังนั้นถ้าใครยังไม่ใช้ ก็ใช้ได้แล้วนะ

จะเจอสัญลักษณะเพิ่มมาอีก 2 ตัวคือ ? และ !
รวมทั้งตัวแปรประกาศขึ้นมา แต่ไม่ทำการ initial ค่าให้ ก็ error ด้วย
ดังนั้นลอง migrate หรือเปลี่ยนกันดูครับ
ผมเพิ่งเปลี่ยนไป 1 project สนุกสนานมาก ๆ

สวัสดี Angular DevTools

$
0
0

สวัสดี Angular DevTools ซึ่งเป็น Google Chrome Extension
แน่นอนว่ามันคือ official tool จาก Angular เลย
เพราะว่าก่อนหน้านี้ก็จะใช้ Angury จาก Rangle.io กัน
และ Angular DevTools ก็ร่วมพัฒนากับ Rangle เช่นกัน
เพื่อนำ feeback และความรู้ที่ได้รับมาช่วยกันสร้างใหม่

ความสามารถของ Angular DevTools ประกอบไปด้วย

  • ดูโครงสร้าของ component ในระบบว่าเป็นอย่างไรบ้าง
  • การส่งข้อมูลต่าง ๆ ระหว่าง component
  • พวก change detection ต่าง ๆ
  • ดู performance ว่าเป็นอย่างไร

การพัฒนาและปรับปรุงมาจาก feedback เป็นดังนี้

ตัวอย่างของ Component structure จาก Explorer

ลองใช้งานกันดู ซึ่งทางทีมพัฒนาบอกว่า
กำลังพัฒนาเพื่อเพิ่มความสามารถอื่น ๆ อย่างต่อเนื่อง

ใครเคยเจอปัญหานี้บ้าง ?

$
0
0

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

[Java] การใช้งาน Sequential และ Parallel Stream

$
0
0

ใน Java 8 ขึ้นมานั้น (นานแล้ว)
มี Stream API เพิ่มเข้ามา
ทำให้ง่ายต่อการเข้าถึงข้อมูลในรูปแบบของ collection
โดยไม่ทำการแก้ไขข้อมูลต้นทางหรือต้นฉบับ
สามารถทำซ้ำแล้วซ้ำเล่า
จะได้ผลเช่นเดิม ใน operation เดิมเสมอ
ซึ่งการใช้งานสามารถสร้าง stream ในรูปแบบของ sequential
หรือ parallel (ตาม core ของ CPU) ก็ได้

คำถามที่น่าสนใจคือ

เมื่อใดควรใช้ sequential stream ?
เมื่อใดควรใช้ parallel stream ?

ก่อนที่จะเลือกว่าจะใช้อะไรนั้น
ควรทำความเข้าใจแต่ละอย่างก่อนว่าเป็นอย่างไร ?

พื้นฐานของ Stream คือตัวหุ้มหรือ wrapper ของ data source นั่นเอง
ช่วยให้เราสามารถทำงานหรือ operation ต่าง ๆ บน data source ได้อย่างง่าย
หรือเรียกว่าการเพิ่ม operation บน data pipeline

Sequential stream คืออะไร

เป็นค่า default สำหรับ Stream นั่นเอง
โดยที่ operation ต่าง ๆ จะทำงานแบบตามลำดับอยู่แล้ว
การทำงานแบบ sequential คือ ทำงานบน main thread
ดัง code ตัวอย่าง

[gist id="192fab39f7944ccb51789cda080b5a21" file="1.java"]

Parallel stream คืออะไร

เราสามารถแปลงจาก sequential มาเป็น parallel ได้เลย
โดยใช้งานผ่าน method parallelStream() หรือ parallel()
ซึ่งจะทำการแยก thread ไปทำงานตามแต่ละ core ของ CPU
และนำผลที่ได้มารวมกัน
ซึ่งใช้เทคนิคของ Fork and Join
ดัง code ตัวอย่าง

[gist id="192fab39f7944ccb51789cda080b5a21" file="2.java"]

ลองมาทำ Benchmark ด้วย JMH (Java Microbenchmark Harness) กัน

ถึงแม้ว่าการทำงานแบบ parallel จะมีประโยชน์
แต่ก็มาพร้อมกับ overhead เช่นกัน
ทั้งการจัดการ thread (Fork and Join)
ทั้งการแยกและรวมข้อมูล
ทั้งการจัดการ memory

[gist id="192fab39f7944ccb51789cda080b5a21" file="3.java"]

จะเลือกสิ่งใดต้องเข้าใจ รวมทั้งต้อง benchmark เสมอ

ว่าด้วยเรื่อง bad developer experience (DX) มันเป็นอย่างไร

$
0
0

จากรายงาน State of DevOps 2020 นั้น
มีหัวข้อหนึ่งเรื่อง Bad Developer eXperience (DX)
หรือคือประสบการณ์ในการพัฒนาที่แย่ ๆ
ซึ่งส่งผลต่อกระบวนการพัฒนา ทดสอบ และ ส่งมอบระบบงาน
ว่ามีอะไร ประกอบไปด้วยอะไรบ้าง
จึงทำการสรุปไว้นิดหน่อย

เรื่องแรกไม่มีระบบทำงานแบบ Automation

นั่นคือนักพัฒนาต้องทำงานด้วยเครื่องมือแบบ manual
ทำงานเรื่องเดิม ๆ ซ้ำ ๆ ซึ่งไม่ได้สร้างคุณค่าอะไรขึ้นมาเลย
รวมทั้งต้องทำงาน adhocs เพียบ !!
จะทำอะไรก็เป็น request และรอ approve ตลอดเวลา

สิ่งที่นักพัฒนาต้องการคือ
สามารถเพิ่มและ integrate งาน ให้ทำงานแบบอัตโนมัติได้ง่าย
รวมทั้งทำงานได้อย่างถูกต้องและน่าเชื่อถือ
ช่วยทำให้ส่งมอบระบบงานได้อย่างต่อเนื่องและมีคุณภาพที่ดี

เรื่องที่สอง การที่จะขอและเข้าถึง Hardware หรือ infrastructure ต่าง ๆ ยากมาก

เช่นเดิม process เยอะ ได้มาช้า
แถมสิ่งที่ได้มาไม่เหมือนกับ production อีก
ยิ่งทำให้ไม่สามารถทดสอบและ re-produce ปัญหาต่าง ๆ ได้
ส่งผลต่อคุณภาพของงานให้แย่ลงไปอีก
บ่อยครั้งการจะเข้าถึงหรือเข้าใช้ก็ยากอีก
หรืออาจจะต้องได้รับ licence อีก โอ้วยากไปไหน
แต่เวลาส่งมอบเหมือนเดิมนะ

เรื่องที่สาม โครงสร้างของทีมที่กระจัดกระจาย

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

เรื่องที่สี่ ขาดการแบ่งปันความรู้กัน

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

ถ้ามีทีมอื่นต้องมาทำ ก็ไปหาและเริ่มใหม่เอง
ซึ่งทำให้เสียเวลามากอีก
ไม่ควรเสียเวลามาทำซ้ำหรือไม่
ส่งผลให้งานที่ต้องส่งช้าและมีปัญหาเรื่องคุณภาพอีก
จะให้คิดเรื่องใหม่ ๆ วิธีการใหม่ ๆ ไม่มีทางเลย

ถ้าใครเจออะไรแบบนี้ น่าจะเป็นประสบการณ์ที่ไม่ดีเลย

Spotify's negative flywheel

Cloud Native คืออะไร ?

$
0
0

จากหนังสือ Cloud Native Go
เห็นการ review และแนะนำจาก facebook ของป้อมา
ก็เลยลองเข้ามาอ่านบ้างประมาณ 1 สัปดาห์
จึงทำการสรุปสิ่งที่อ่านในแต่ละบทไว้นิดหน่อย
โดยเริ่มจากบทแรกว่าด้วย Cloud Native คืออะไร ?
เป็นการอธิบายที่ดีและน่าสนใจมาก ๆ
มาเริ่มกันเลย

Cloud Native คืออะไร

จาก Cloud Native Computing Foundation (CNCF) อธิบายไว้ว่า
Cloud Native จะมีแนวคิดและ technology ช่วยให้องค์กรสร้างและ run ระบบ
ให้ scale ได้ง่ายขึ้น (Scalable)
รองรับ environment ต่าง ๆ ได้ง่ายขึ้น
เช่น public, private และ hybrid cloudหรืออาจจะเป็น on-premise ก็ได้

โดยแนวคิดและเทคนิคนี้ช่วยทำให้

  • ระบบเป็นอิสระจากกันมาก (Loosely coupled)
  • สามารถ recovery จากความผิดพลาดต่าง ๆ ได้ (Resilient)
  • สามารถจัดการได้ง่าย (Manageble)
  • สามารถดูการทำงานได้ (Observable)

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

จากนั้นทำการอธิบายรายละเอียดของแต่ละเรื่องตามลำดับ

ประกอบไปด้วย

  • Scalability
  • Loosely coupled
  • Resilient
  • Manageable
  • Observable

Scalability

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

การ scale นั้นมีทั้ง

  • Vertical ทำการขยายเครื่องให้ใหญ่ขึ้นทั้ง CPU และ memory เป็นต้น
  • Horizontal ทำการเพิ่มเครื่องหรือ instance เข้ามา

ทั้งสองแบบมีทั้งข้อดีและข้อเสียเช่นกัน

Loosely coupled

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

Resilient หรือ Fault tolerance

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

สิ่งที่น่าสนใจคือ Resilient มันไม่ใช่ Reliable นะ
เนื่องจาก reliable ของระบบคือ
การที่ระบบสามารถทำงานได้ตามที่คาดหวังในช่วงเวลาที่กำหนด
โดยมักจะมาพร้อมกับคำว่า availability และ maintainability

Manageability

อธิบายถึงความง่ายในการเปลี่ยนพฤติกรรมของระบบเช่น
ทำให้ปลอดภัยมากขึ้น
ทำให้ระบบทำงานได้อย่างราบรื่นง่ายต่อการเปลี่ยนตาม requirement
แต่ยิ่งระบบมีความซับซ้อนมากเท่าไร การจัดการก็ยากขึ้นเท่านั้น

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

ยกตัวอย่างเช่น การเปลี่ยน configuration นั้น
สามารถเปลี่ยนแปลงได้ง่ายไหม
หรืออาจจะเป็นเรื่องของการเปิดหรือปิด feature ต่าง ๆ ของระบบ
หรือการ deploy หรือ upgrade/downgrade ระบบ

สิ่งที่น่าสนใจคือ Manageability มันไม่ใช่ Maintainability นะ
เนื่องจาก Maintainability ใช้อธิบายว่า
ระบบง่ายต่อการเปลี่ยน function การทำงาน (เช่น code)
นั่นคือเรื่องของ internal นั่นเอง
ส่วน Manageability คือเรื่องของ external หรือ ภายนอก

Observability

จะเน้นไปที่พฤติกรรมการทำงานของระบบว่า
ทำงานอย่างไร จนได้ output ออกมา
โดยที่เราไม่จำเป็นต้องมีความรู้ในเชิงลึกต่อระบบมากนัก
เป็นสิ่งท่ีถูกปรับปรุงมาจาก monitoring นั่นเอง
เพื่อให้สามารถนำข้อมูลต่าง ๆ ของระบบที่จัดเก็บไว้ (data)
มาแปลงให้มีค่าหรือเข้าใจง่ายมากขึ้น (information)

ตัวอย่างของระบบ Observability เช่น

  • Unstructured logging
  • Alert ในสิ่งที่เราไม่รู้
  • มี dashboard เพื่อแสดง information ต่าง ๆ ของระบบ ตาม flow การทำงานของระบบ

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

โดยรวมแล้ว คำว่าคำว่า Cloud Native ไม่ใช่แนวคิดที่ต้องประหลาดใจอะไร

เพราะว่ามันเป็นแนวทางที่หลีกเลี่ยงไม่ได้อยู่แล้ว
เพราะว่ามาเพื่อสนองต่อความต้องการ และ การพัฒนาการของเทคโนโลยี
ที่มีอย่างต่อเนื่องมากมายนั่นเอง

ไว้จะสรุปบทอื่น ๆ ต่อไป
ซึ่งจะเริ่มลง programming ด้วยภาษา Go
เป็นการขยายจากบทแรกนั่นเอง

VS Code ลบหรือปิดสิ่งที่ไม่จำเป็นไปบ้าง

$
0
0

วันนี้ทำการ clear สิ่งที่ไม่ได้ใช้งานใน VS Code ออก
เนื่องจากพบว่า VS Code มันช้าลงเรื่อย ๆ
ซึ่งส่งผลต่อการใช้งานอย่างมาก
เลยจดบันทึกสิ่งที่ clear ออกไป ดังนี้
โดยอ้างอิงจาก Make VS Code Faster

ปิด feature ที่ไม่ได้ใช้งาน ตัวอย่างเช่น

  • ปิด MiniMap ใน Settings -> Text Editor -> MiniMap
  • ปิด Suggestion ใน Settings -> Text Editor -> Suggestions
  • ปิด Telemetry ใน Setting -> Application -> Telemetry

ลบ extensions ที่ไม่ได้ใช้ออกไป

เพราะว่าผมติดตั้งเยอะไปหมด
คิดว่าหลาย ๆ คนน่าจะเป็นคล้ายกันไหมนะ ?
หรือทำการเปิดหรือปิด extension ในแต่ละ workspace เลยจะดีกว่า
ยกตัวอย่างเช่น

เพิ่งไปเจอมาว่า เราสามารถดูว่า extension แต่ละตัวใช้เวลา load/startup time เท่าไรได้ด้วย

ไปที่ View -> Command Palette .. -> Show Running Extensions

แสดงผลดังนี้
จะเห็นว่า extension 3 ตัวแรกใช้เวลา start time สูงมาก ๆ
ต้องเข้าไปตรวจสอบกันแล้วนะ ว่าทำไม ? หรือลบทิ้งไป

รวมทั้งไปดูใน Startup performance ได้อีก

จะมีข้อมูล

  • OS ที่ใช้งาน
  • Metric ต่าง ๆในเรื่องของ performance
  • รายละเอียดของ Extention
  • เรื่องของ caching data ต่าง ๆ

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

สรุปจาก NodeJS Docker Cheatsheet ของ OWASP

$
0
0

อ่านเอกสาร NodeJS Docker Cheatsheet จาก OWASP
ทำการอธิบายถึงการใช้งาน Docker กับระบบที่พัฒนาด้วย NodeJS
ไว้ว่าควรต้องทำอย่างไรบ้าง
เพื่อให้ปลอดภัยมากยิ่งขึ้น

1. ในการใช้งาน Image ให้ระบุชื่อ tag และ version ด้วย SHA256 ไปเลย (Digest)
ยกตัวอย่างเช่น node@sha256:b2da3316acdc2bec442190a1fe10dc094e7ba4121d029cb32075ff59bb27390a

2.  Install dependency เฉพาะ production เท่านั้น
นั่นคือ ตอน install ไม่สนใจ devDependenies

3.  กำหนด NODE_ENV ไว้เสมอ
โดยกำหนดไว้ที่ productionกำหนด production เป็นค่า default ไว้เลย
เพราะว่าอาจจะลืม รวมทั้ง library หลาย ๆ ตัวก็อาจจะใช้ค่านี้ด้วย

4.  ห้าม run container ด้วย user root อันตรายมาก ๆ

5.  ระบบงานที่พัฒนาต้องจัดการเรื่อง การ terminate ที่ถูกต้องรวมทั้ง Graceful shutdown ด้วย

6.  ต้องทำการ scan  image ด้วยเสมอ ในตอนนี้ buildin มาใน docker แล้ว

7.  ในการ build image ให้ใช้ multi-stage build เพื่อให้เหลือเฉพาะสิ่งที่จำเป็นเท่านั้น

8.  ไฟล์อะไรที่ไม่จำเป็น ก็ไม่ต้องเอาเข้ามาในการ build
ด้วยการกำหนดในไฟล์  .dockerignore
แต่ถ้ามีบางไฟล์ต้องใช้จริง ๆ
แนะนำให้ใช้ผ่านการ mount แบบ secret เพิ่มเข้ามา

Go 1.17 ทำการ run test แบบไม่เรียงลำดับ

$
0
0

เพิ่งเห็นว่าใน Go 1.17 ที่กำลังจะปล่อยออกมานั้น
เพิ่มความสามารถในการทดสอบ คือ
ทำการ run test แบบไม่เรียงลำดับ test case เข้ามา
ช่วยให้เรามั่นใจว่า แต่ละ test case ทำงานเป็นอิสระต่อกัน
เนื่องจากถ้าแต่ละ test case ต้องทำงานตามลำดับ
อาจจะส่งผลให้การทดสอบมีปัญหาขึ้นมาได้เยอะ
เป็นอีกความสามารถที่มีประโยชน์มาก ๆ

โดยความสามารถนี้ถูกเปิดมาตั้งแต่ปี 2005 แล้ว

การทำงานเป็นดังนี้

[gist id="aaa32f56263a182791a905238a0ac149" file="1.txt"]

ว่าง ๆ ลองมาเล่น .Net 6 Preview 4 กันหน่อย

$
0
0

ระหว่างรอดูบอล ก็ทำการ update และลองใช้งาน .NET 6 Preview 4 กันหน่อย
จาก blog เปิดตัว พบว่ามีความสามารถเยอะเลย
ดังนั้นลองมาสร้าง web application
เห็นว่ามี update เรื่อง .Net Hot Reload ด้วย
มาเริ่มกันเลย

ทำการติดตั้งและสร้าง project ง่าย ๆ กันหน่อย

สร้างแบบ empty project มี C# เพียงไฟล์เดียวเท่านั้น
ด้วยคำสั่งดังนี้

[gist id="c66e15a3a88faf2c9cbb31c7f2b46cdd" file="1.txt"]

ไฟล์ C# ที่สร้างมาคือ Program.cs เป็นไฟล์หลักของระบบงาน

[gist id="c66e15a3a88faf2c9cbb31c7f2b46cdd" file="Program.cs"]

จากนั้นทำการ run แบบ Hot Reload ได้เลย

จะทำการ detect change เฉพาะไฟล์ C# เท่านั้น
ด้วยการกดปุ่ม Control/Ctrl + R ได้เลย
ทำให้การพัฒนาสะดวกขึ้นมาพอสมควร

[gist id="c66e15a3a88faf2c9cbb31c7f2b46cdd" file="2.txt"]

ลองทำการยิง load test เบา ๆ ดูหน่อย สำหรับ Hello World

ถือว่าแจ่มเลยนะ

[gist id="c66e15a3a88faf2c9cbb31c7f2b46cdd" file="3.txt"]

ใครว่าง ๆ ลองไป Download มาเล่นกันดูครับ

Viewing all 2000 articles
Browse latest View live