DEV Community: Woraphol Wananiyakul

รู้จักตัว Playwright คร่าวๆกัน

Woraphol Wananiyakul — Mon, 22 Nov 2021 19:05:37 +0000

Playwright ??

Playwright เป็น end-to-end testing framework ตัวนึงนอกจากโฟกัสที่การ test แล้วยังสามารถทำพวก browser automation ได้ไม่ยากเลยครับ

ภาษาที่รองรับ

JS (TS)
Python
Java
.NET
Go

สาเหตุที่ชอบ

จากการอ่าน doc และได้ลองเล่นคร่าวๆ รู้สึกว่าเรียนรู้และใช้ง่ายไม่ยากเท่าไร

เนื่องจากยังไม่ได้ลองเล่นทุก feature ของมันแต่เท่าที่อ่านคร่าวๆแล้วรู้สึกชอบก็คือ codegen รัน script ขึ้นมาแล้วแล้วมันจะ generate code ให้เราตามที่เรา action กับตัว browser 🤩

ทีนี้ผมได้ลองเอา playwright มาใช้ใน 3 usecase คือ

web scraping -> go
generate pdf (as a server) -> ts
testing e2e (frontend) -> ts

ในบทความนี้จะขอพูดถึงแค่ตัวอย่างแรกส่วนสองกับสามจะไปในบทความถัดไป

ตัวอย่าง web scraping

โจทย์ก็แสนง่ายให้เข้าไปที่เว็บ mangaplus ค้นหา anime ที่ชื่อ onepiece
แล้วก็ไปหาว่าตอนล่าสุดตอนนี้คือ ตอนที่เท่าไรและชื่อตอนอะไร

เนื่องจากโจทย์ไม่ค่อยยากผมก็เลยเลือกภาษาที่ผมได้ลองเขียนได้ไม่นานนั่นก็คือภาษา go (ส่วนโจทย์ 2,3 จะเป็น javascript)

package main

import (
    "log"

    "github.com/mxschmitt/playwright-go"
)

func main() {
    pw, err := playwright.Run()

    if err != nil {
        log.Fatalf("could not start playwright: %v", err)
    }

    browser, err := pw.Chromium.Launch(playwright.BrowserTypeLaunchOptions{
        SlowMo:   playwright.Float(800.00),
        Headless: playwright.Bool(false),
    })

    if err != nil {
        log.Fatalf("could not launch chromium: %v", err)
    }

    page, err := browser.NewPage()

    if err != nil {
        log.Fatalf("could not create page: %v", err)
    }

    _, err = page.Goto("https://mangaplus.shueisha.co.jp/updates")

    if err != nil {
        log.Fatalf("could not goto: %v", err)

    }

    err = page.Fill(`[placeholder="ค้นหาตามชื่อเรื่องหรือผู้แต่ง"]`, "one piece")

    if err != nil {
        log.Fatalf("could not fill: %v", err)
    }

    err = page.Keyboard().Press("Enter")

    if err != nil {
        log.Fatalf("could not press: %v", err)
    }

    err = page.Click("text=วันพีซ")

    if err != nil {
        log.Fatalf("could not click: %v", err)
    }

    list, err := page.QuerySelectorAll("text=ตอนที่")

    if err != nil {
        log.Fatalf("could not query selector all: %v", err)
    }

    latestChapter, err := list[len(list)-1].TextContent()

    if err != nil {
        log.Fatalf("could not get text content: %v", err)
    }

    log.Println("-----------------------------")
    log.Printf("ตอนล่าสุด -> %v", latestChapter)
    log.Println("-----------------------------")
}

อธิบายโค้ดข้างบน

ให้ทำการเปิด browser ขึ้นมาโดยจะใช้เป็น chromium โดยตั้งค่าให้มี slow-motion หน่อยเพื่อให้เห็นการทำงานมันไม่เร็วเกินไปและตั้งค่าให้ headless เป็น false เพื่อที่จะดู ui
สร้างหน้าขึ้นมาแล้วไปเว็บ mangaplus
search onepiece ลงในช่องค้นหา
ค้นหาตอนล่าสุด

ผลลัพธ์

source code

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

Refs

https://playwright.dev/

ถ้าเกิดผิดพลาดไปตรงไหนขออภัยด้วยนะครับ 🙏

ทำไมเรายังไม่ Warp (terminal)

Woraphol Wananiyakul — Wed, 17 Nov 2021 12:27:43 +0000

สวัสดีครับวันนี้จะมาพูดถึง terminal ตัวใหม่ที่ผม request access ไปประมาณ 1 เดือนและได้ใช้งานมาสักพักก็เลยจะมาแชร์ประสบการณ์การใช้งานเจ้า warp กันน

Warp

คำนิยามจากตัว website ของเขา

Warp is a blazingly fast, Rust-based terminal that makes you and your team more productive at coding and DevOps

ความรู้สึก

ผมย้ายจาก iterm2 มา warp ก็ค่อนข้างประทับใจในเรื่องของหน้าตาที่ไม่คุ้นชินและก็จะมีลูกเล่นใหม่ๆเข้ามาครับ

Features

อาจจะพูดไม่หมดทุก feature เพราะคิดว่าตัวอื่นๆก็มี feature เหล่านี้อยู่แล้ว

Block

คือกลุ่มของ command, output ที่เราเรียกใช้ไปก่อนหน้านี้ครับโดยทุกคำสั่งและผลลัพธ์จะถูกแบ่งออกเป็นกลุ่มๆ

จากรูปข้างบนสังเกตก้อนที่เป็นสีฟ้านะครับจะเป็นกลุ่มของคำสั่ง ls ที่ผมเรียกใช้และจะมี output เมื่อผมใช้นะครับ

ส่วนก้อนด้านล่างคืออีกกลุ่มที่ใช้คำสั่ง date ครับ

แต่กลุ่มมี options ให้เราเรียกใช้อย่างเช่น copy command, copy output และมี option ที่ผมชอบคือแชร์ครับ เราสามารถแชร์ block ไปให้คนอื่นได้โดย warp จะสร้าง url มาให้เรานะครับ

example

Input Editor (โครตชอบ)

ในช่อง text area จะไม่เหมือนพวก terminal ทั่วไปครับแต่มันจะเหมือน text editor เลย, การ bind ปุ่มต่างๆทำให้สะดวกต่อการขยับ cursor ไปมา, สามารถทำ multiline command ได้ด้วย

Tab Completions

feature ตัวนี้ถ้าใครไม่เคยใช้ fig จะว้าวมากๆคือมันสามารถ auto completions ให้เราได้เหมือนพวก IDE(รวมถึงพวก scripts ใน package.json, makefile เป็นต้น) โดยการกด `tab

Themes

มี build-in มาให้ซึ่งแต่ละตัวก็น่าจะรู้จักกันอยู่แล้วและเรายังสามารถ custom ได้เองอีกด้วย

Command Palette

เราสามารถเรียกใช้งานตัว command palette ได้ตลอดเวลา

Panes

หลังจากที่ผมได้เขียน post เกี่ยวกับ tmux ไปพอได้ย้ายมาตัว warp ก็ขอลอง feature นี้ซะหน่อยและรู้สึกชอบ ui มากจนคิดว่าหรือว่าจะใช้อันนี้แทน tmux ดีหรือเปล่าถถถถ หน้าตามันก็จะประมาณนี้

สรุป

เป็น terminal ที่รู้สึกว่าดีเลยทีเดียวใช้งานง่ายไม่ยากและช่วยอะไรหลายๆอย่าง

การจะใช้งานตอนนี้ต้องขอ access ผ่านตัวเว็บครับแล้วก็รองรับแค่ macos แต่ในอนาคตไปทุกที่ (linux,window,browser)

สามารถเข้าไปขอ access ได้ที่หน้าเว็บเลยครับหรือจิ้มตรงนี้

สุดท้ายนี้ happy coding ครับ 🙏

แชร์ประสบการณ์ลอง migrate จาก pnpm ไป yarn berry กัน

Woraphol Wananiyakul — Sat, 13 Nov 2021 11:33:50 +0000

เนื่องจากได้เห็นโพสต์ที่เกี่ยวกับ yarn berry แล้วเลยอยากลองที่จะ migrate จากตัวที่ใช้ pnpm ไป berry ก็เลยเกิดเป็นโพสต์นี้ครับ

ก่อนเริ่ม

จริงๆแล้วผมเคยได้ยินyarn (berry) มานานมาแล้วแต่ไม่เคยลองเพราะว่าช่วงนั้นผมเคยเห็น issue ที่ใช้แล้ว project ไม่สามารถรันได้เลยก็เลยคิดว่ารอสักพักค่อยมาลองสุดท้ายก็ลืม -.-

Timeline

ตั้งแต่เข้าสู่วงการ dev ผมก็เริ่มที่ npm -> yarn(classic) -> pnpm(ปัจจุบัน)

ขอย้อนไปตอนที่ใช้ yarn classic (หลังจากนี้จะขอย่อว่า classic) ผมใช้ feature นึงคือตัว worksapcesใช้มาประมาณ 3 ปีได้แล้วถ้านับไม่ผิด และก็เมื่อไม่นานมานี้ผมได้เห็นตัว pnpm เป็นที่พูดถึงกันก็เลยลองไปดูว่ามันเป็นยังไงมี feature ไหนบ้าง

หลังจากที่ไปดูว่าโดยรวมถือว่าโอเคเลยมีทุก feature ที่ผมใช้หลังจากนั้นโปรเจคช่วงๆหลังผมจะเป็น pnpm ทั้งหมด

ปัจจุบัน

ก่อนที่จะเข้าหัวข้อหลักคือ yarn berry มาดูตัวอย่าง structure ที่ผมใช้ pnpm แบบอย่างง่ายตาม example เลยก็ว่าได้แล้วจะแปลงเป็นในรูปแบบของ yarn berry

├── packages 
│   └── moduleA
│         └── package.json ──
│   └── moduleB              │ 
│         └── package.json   │  moduleC เรียกใช้ moduleA
│   └── moduleC              │ 
│         └── package.json __│ 
├── package.json 
├── pnpm-workspace.yaml // <- pnpm เอาไว้ใช้ประกาศ workspace

packages รวม modules ต่างๆไว้ในนี้, submodule จะเป็น typescript project ทั้งหมด

ตัวอย่างโค้ดของแบบ pnpm อยู่ repo นี้ -> example pnpm code

required nodejs >= 14.7

อธิบายเพิ่มเติมจาก code

module{A,B,C} จะเป็น typescript ทั้งหมดโดยจะให้มัน compile ออกมาเป็น esm format รวมถึง *.d.ts เผื่อให้แต่ละ module มี type ของตัวมันเอง
moduleC จะเรียกใช้ moduleA สังเกตได้จากตัว package.json และจะเรียกใช้ใน index.ts

ทั้งหมดนี้เมื่อ compile และ run จะทำงานได้ถูกต้อง

getTheBestSong จาก moduleA จะเกิด Bug ไม่ว่าเราจะใส่ parameter ให้หรือไม่ใส่มันก็จะออกแต่ strawberry moon ❤️

Yarn (Berry)

หลังจากที่ไม่ได้พูดถึงเลยก็จะขอกลับมาพูดแบบย่อสักนิด

ข้อดีคร่าวๆของตัว berry

เปลี่ยนการ resolve dependency ใหม่
เพิ่ม ecosystem ของตัวเอง (plugin) e.g. plugin-typescript
constraints e.g. ในแต่ละ workspaces ต้องมี dependencies, library, devDependencies ที่เวอร์ชั่นเท่ากัน
offline Cache

และแน่นอน workspaces

ข้อเสีย

ส่วนตัวว่า doc ยังทำความเข้าใจได้อยากอยู่และตัวอย่างน้อย

อ่านเพิ่มเติมได้ที่ doc

ปรับ pnpm ให้อยู่ในรูปแบบ berry

tools

set yarn version berry ด้วย command yarn set version berry
ลง vscode extension
run command yarn dlx @yarnpkg/sdks vscode (เพื่อให้ vscode รู้การ resolve ที่ไม่ใช่จากตัว node_module)

จากโค้ด pnpm ข้างบน

ลบ folder node_modules/ (แน่นอนจะไม่มี node_module แล้ว)
ลบ pnpm-workspace.yaml, pnpm-lock.yaml
เพิ่ม workspaces ใน package.json ใน root project
ใน moduleC เรียกใช้ workspace moduleA ใน package.json

หลังจากทำตามข้างบนเรียบร้อยแล้วไปที่ root directory run command yarn เพื่อ install dependency

หลังจากที่ install แล้วจะเห็นว่ามันจะไม่มี node_module อีกต่อไปแล้วแต่จะมาในรูปแบบของ javascript file แทน ในที่นี้คือ .pnp.cjs เปรียบเสมือน node_module นั่นเองแล้วที่นี้มันจะไปดู dependencies ที่ไหนละคำตอบก็คือในโฟลเดอร์ .yarn/cache สังเกตว่า berry จะโหลด deps มาในรูปแบบ zip

เรียบแล้วแล้วตอนนี้ project ของเราก็จะอยู่ในรูปแบบของ workspace(berry)
ทีนี้ก็ลอง build ทั้งโปรเจคโดย run command yarn workspaces foreach run build

มันจะแจ้งเตือนให้ลง plugin เพิ่ม (ecosystem อันใหม่) run command yarn plugin import workspace-tools

เมื่อลงเสร็จลอง build ใหม่ตาม command ข้างบนทีนี้ก็เป็นการเสร็จสิ้น

แต่เดี๋ยวก่อนนน...

ถ้าเกิดลองไปดูที่ moduleC จะเห็นว่ามันจะแจ้งเตือนหา moduleA ไม่เจอ ซึ่งผมก็ติดอยู่ตรงนี้แหละไม่ได้ไปต่อ ซึ่งลองไปดู issue ก็จะมีคนติดปัญหาที่คล้ายๆแบบนี้ก็เลยไม่ได้ไปลอง feature อื่นๆต่อ

แต่ถ้า project เป็น javascript ไม่ใช่ typescript สามารถทำงานได้ปกติ

โค้ดของ berry -> example berry code

สรุป

ปัญหาข้างบนเป็นในกรณีที่เราใช้ตัว workspaces แต่ถ้าไม่ได้ใช้ workspaces ตัว berry ทำงานได้ปกติ (resolve ได้ปกติ)

ทั้งหมดนี้ก็เป็นประสบการณ์ที่ผมได้เจอในการลองที่จะย้ายค่ายกลับมาใช้ yarn, ปัญหาที่เกิดขึ้นอาจจะเกิดที่ผมเซ็ตไม่ถูกต้องก็ได้ครับและถ้ามีโอกาสได้กลับมาแก้หรือมันแก้ไข้อะไรยังไงเรียบร้อยแล้วจะมาแชร์อีกทีครับ

ทั้งหมดนี้ถ้าผมสื่อสารผิดพลาดหรือทำให้งงยังไงก็ขอโทษด้วยนะครับจะพยายามปรับปรุงเรื่อยๆครับ ขอบคุณครับ 🙏

Refs

ทำไมผมถึงชอบ tmux

Woraphol Wananiyakul — Sun, 07 Nov 2021 14:04:27 +0000

สวัสดีครับวันนี้จะมาเล่าถึงเครื่องมือที่ผมใช้มาประมาณเกือบ 3 ปีได้ซึ่งตัวนั้นก็คือ tmux

tmux คืออะไร

จริงๆแล้วมันก็คือ terminal multiplexer หรือก็คือเครื่องมือที่จะจัดการหน้าต่างๆใน terminal ของเราตามรูปด้านล่าง

จากรูปข้างบนก็จะเห็นว่าเราสามารถแบ่งหน้าต่างๆออกได้มากมายตามที่เราต้องการเช่นเรารัน frontend และ backend ใน backend มีหลาย service

จริงๆแล้วมันมี tool ที่คล้ายๆแบบนี้เยอะ 1 ในนั้นก็คือที่ผมใช้มาก่อนหน้าก็คือ split pane เป็น feature หนึ่งในตัว iterm2 ครับ

เมื่อประมาณ 3 ปีที่แล้วตอนผมเริ่ม dev ใหม่ๆตอนนั้นผมใช้ macbook ส่วนตัวซึ่ง mac ตัวนั้นผมก็ลง iterm2 เอาไว้ ไอ้เจ้า iterm2 เนี่ยละครับมันมี split panes ถ้าใครอยากรู้ลองเข้าไปดูใน doc ได้เลยครับ

สังเกตว่าจะคล้ายๆรูปข้างบนเลย

ทีนี้ก้ใช้เจ้า feature นี้มาเรื่อยๆจนกระทั่งผมเรียนจบแล้วเริ่มทำงานครับทีนี้ที่ทำงานให้ notebook ที่ลง linux(popos) เอาไว้ให้เป็นครั้งแรกที่ผมใช้ linux จริงๆจังๆไม่ได้แบบทำ lab ในมหาลัยที่เป็นพวก ubuntu จนกระทั่งใช้ไปใช้มาแล้วรู้สึกหงุดหงิดมากที่ไม่สามารถทำแบบ iterm2 ได้ผมก็เลยลองหาข้อมูลดูจนไปเจอ tmux แล้วผมก็ใช้มาเรื่อยๆจนถึงปัจุบัน(ถึงจะกลับมาใช้ mac แล้วแต่ก้ไม่ได้ใช้ feature ของ iterm อีกเลย)

ข้อดีของ tmux ที่ผมชอบ

สามารถ config ได้อิสระ
สามารถใช้ได้ทุก os (mac,linux,window wsl) -> ผมชอบสุดดดด ❤️
มี ecosystem ของตัวมันเอง (theme, plugin)

ส่วนข้อเสียผมนึกไม่ออกแหะ

สรุป

ทุกคนอาจจะชอบ tool ที่แตกต่างกันออกไปหรืออาจจะชอบแบบเปิดทีละ tab ก็ได้ ขึ้นอยู่กับแต่ละคนว่าชอบแบบไหนครับ

Refs

Cancel http request when component is unmounted

Woraphol Wananiyakul — Sun, 07 Nov 2021 08:42:57 +0000

หลังจากที่ได้ย้ายจาก vue มา react ได้ประมาณ6เดือน บางปัญหาที่ไม่เคยเจอใน vue เลยมาเจอจากตัว react และบทความนี้ก็เป็น1ในปัญหาที่ผมได้เจอตอนเขียน react จริงๆจัง

ที่มาของปัญหา

เวลาเราต้องสร้าง component บางตัวแล้วเราต้องการให้มันยิง http request เพื่อไปเอาข้อมูลบางอย่างมาเราจะทำตอนที่ component นั้น mount ขึ้นมาแล้วยิงไปจังหวะนั้น ดูรวมๆแล้วก็ปกติไม่มีอะไรแต่ถ้า component นั้นถูก unmount ไปในตอนที่มันยังยิง http request ไม่เสร็จมันจะเกิด error ขึ้น

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

สาเหตุ

ปัญหาข้างบนมาจากที่ว่าเวลาเราทำการ unmouted component ไปแล้วแต่ http request มันยังคงทำงานต่อเพราะมันไม่ได้หยุด request ตัวนั้นแล้วเมื่อมันทำงานเสร็จก็จะไปเซ็ต state อันเก่า

มาลองดูตัวอย่างคร่าวๆกันดีกว่า

useEffect(() => {
 (
   async () => {
     const rawData = await fetch('/some/api')
     const data = rawData.json()
     setSomeState(data) 
   }
 )()
}, [])

จาก code ข้างบนก็ดูปกติไม่มีอะไรแต่เราเราลองเพิ่ม delay ให้มันสักหน่อยก่อนที่จะให้่ยิง http request

useEffect(() => {
 (
   async () => {
     setTimeout(async () => {
       const rawData = await fetch('/some/api')
       const data = rawData.json()
       setSomeState(data) 
     }, 2000)
   }
 )()
}, [])

ก็ยังดูปกติเมื่อ component ถูก mount ขึ้นมาจะรอ 2 วินาทีหลังจากนั้นก็ยิงเพื่อไปเอาข้อมูล แต่ช้าก่อนถ้าเกิดระหว่างนี้ component ถูก unmount ล่ะ ??

flow ข้างบนก็ยังคงดำเนินต่อไปจนจบแม้ว่า component ถูก unmounted ไปแล้ว ทีนี้ react มันไม่ให้เรา update state ตอนเมื่อ component ถูก unmounted ไปแล้วนั่นเอง

วิธีแก้

เช็คว่า component unmounted ไปยังถ้า unmounted ไปแล้วไม่ให้เซ็ต state ลงไป

useEffect(() => {
 let isUnmounted = false
 (
   async () => {
     setTimeout(async () => {
       const rawData = await fetch('/some/api')
       const data = rawData.json()

       if (isUnmounted) return;

       setSomeState(data)

     }, 2000)
   }
 )()

 () => {
   isUnmounted = true
 }
}, [])

code ข้างบนก็เป็นวิธีแก้อย่างหนึ่ง แต่การแก้ข้างบนจะแก้แค่ปัญหาที่ว่า react ไม่ให้อัพเดต state ตอน unmounted ส่วนปัญหาที่ http request ยังคงยิงไปไม่หยุดยังคงอยู่

แก้แบบยั่งยืน

ใช้ตัว AbortController ในการ cancel http request ครับ

ข้อดีของมันคือ มันสามารถที่จะยกเลิก request และก้ browser support (อมก)

ทีนี้ก็เอาตัว abortController มา implement

useEffect(() => {
 const controller = new AbortController();
 (
   async () => {
     setTimeout(async () => {
       const rawData = await fetch('/some/api', {
        signal: controller.signal
       })
       const data = rawData.json()
       setSomeState(data)

     }, 2000)
   }
 )()

 () => {
    controller.abort();
 }
}, [])

จาก code ข้างบน เราจะใช้ new AbortController() ที่นี้เมื่อ unmounted เราจะให้ abort() แล้วตัวตอน fetch ก็จะใส่ options signal ไป

signal ตัวนี้จะเปลี่ยนเมื่อเรา call abort() ทำให้ตอนที่เรายิง htttp request ไปแล้ว signal เป็น false มันจะ cancel http request นั้นทันที (เช็คได้ใน devtools ขึ้้น error หรือดูในแถบ network จะขึ้น cancel) สิ่งที่ต้องทำเพิ่มก็คือไปเขียน trycatch เพื่อดักerror ว่ามันเป็น abort

เพิ่มเติ่ม

ตัว AbortController รองรับกับ http client หลายเจ้าเพียงแค่เราใส่ตัว options ให้มันแต่จะมีบางตัวที่ใช้เราแล้วเหมือนจะเป็น bug

fetch

 const rawData = await fetch(
  "https://jsonplaceholder.typicode.com/todos/",
  { signal: controller.signal }
 );
 const data = await rawData.json();

axios

 const data = await axios.get(
   "https://jsonplaceholder.typicode.com/todos",
   { signal: controller.signal }
 );

ky(ตัวที่เป็นปัญหาถ้าผมไม่ได้ทำอะไรผิด)

const data = await ky
.get("https://jsonplaceholder.typicode.com/todos", {
   signal: controller.signal,
 }).json();

ตัวอย่างทั้งหมดนี้อยู่ใน github -> here

ถ้าเป็น vue ล่ะ

เนื่องจาก vue มี lifecycle ที่คล้ายกับตัว react แต่สุดท้ายการอัพเดต state
แตกต่างกันแต่เราสามารถใช้วิธียกเลิก http request ได้เหมือนกัน

ตัวอย่างของ vue -> here

ถ้าเกิดผมผิดพลาดตรงไหนไปก็ขอภัยด้วยครับสามารถ comment ที่ผมผิดไปหรือจะเสนอแนะอะไรได้เลยครับเนื่องจากเป็น post แรกของผมใน dev.to เลยครับขอบคุณครับ