Forem: Narongdej Sarnsuwan

Real-world inch in CSS

Narongdej Sarnsuwan — Mon, 05 Oct 2020 17:00:00 +0000

In web development, a CSS inch is not the same across all devices. That’s because every screen has a different PPI or Pixel Per Inch.

1 inch in CSS equal 96px. That 1 inch will only be equal to 1 real-world inch that you can find in your typical ruler if your screen is exactly 96 dpi. For example, a 23” monitor with 1920 x 1080 resolution will have about 96 PPI while an iPhone 11 Pro Max with a much smaller screen, but with much higher resolution will have 456 PPI. If you draw a 1 CSS inch line or 96px, it will much shorter on the iPhone than on the 23 inch monitor.

So can you make your web display the 1 CSS inch line as a real-life inch across all devices? The answer is you can, kinda. Cause you’ll need to know the screen PPI, and the browser cannot give you the monitor PPI.

However, you can predict the PPI using the User Agent (ex. iPhone 11 Pro Max) or, just straight ask the user. To calculate the PPI, you’ll need the screen diagonal in inch and diagonal in pixel. Then divide the diagonal in pixel with diagonal an inch to get the PPI. (or just use dpi.lv)

After that, you’ll be able to adjust the line size accordingly.

var node = document.querySelector('#line')
node.style.width = (node.clientWidth / 96.0) * (<<the_screen_dpi>> / window.devicePixelRatio)

Lastly, the window.devicePixelRatio returns the size of one CSS pixel to the size of one physical pixel. For example, for the retina display, this number will be 2.

วิธีการทำ PDF Extraction ด้วย Python

Narongdej Sarnsuwan — Fri, 25 Sep 2020 17:00:00 +0000

ในยุคที่ข้อมูลเป็นสิ่งที่มีค่าสูง หากคนมีข้อมูลเยอะ คุณสามารถเอามาทำ Data Analysis เพื่อวางแผนการตลาด หรือคุณสามารถเอามาทำ Data Science เพื่อผลิตเครื่องมือใหม่ๆ แต่สิ่งที่คุณต้องมีให้ได้ก่อน นั่นคือมี Data

วันนี้ผมจะมาพูดถึงเครื่องมือการ Extract ข้อมูลจากไฟล์ PDF ที่เป็นวิธีการเก็บไฟล์ที่นิยมของหลายๆบริษัท ผมจะแค่เกริ่นสั้นๆ ถึงวิธีการ extract ต่างๆ แต่จะยังไม่ลงลึก วิธีการทำใน blog นี้ ถ้าหากคุณสนใจการ extract วิธีไหนที่กล่าวใน blog นี้ สามารถเขียน comment ทิ้งไว้ได้ครับ แล้วผมจะพยายามเขียน blog อธิบายลงลึกอีกที

Structured Data vs Non Structured Data

ก่อนอื่นเราต้องมารู้จักกับสิ่งที่เรียกว่า Structured Data กับสิ่งที่เรียกว่า Non Structured Data กันก่อน

Data สามารถแบ่งออกเป็นสองประเภทนี้

Structured Data

ข้อมูลที่เก็บใน relational database เช่น Postgres, MySQL หรือที่สามารถแสดงเป็น rows, column ได้
ข้อมูลเป็นประเภท ตัวเลข วันที่ และตัวหนังสือ

Unstructured Data

ไม่สามารถแสดงเป็น rows, column และไม่ได้เก็บอยู่ใน relational database
เป็นไฟล์จำพวก รูปภาพ คลิปเสียง วีดีโอ ไฟล์ Word, Email, Spreadsheet

ข้อเสียหลักๆของ unstructured data คือการนำออกมาใช้ยาก เพราะฉะนั้นหน้าที่หลักๆของการทำ extraction คือการแปลง unstructured data ให้กลายเป็น structured ให้ได้

Searchable and Non-Seachable

PDF หรือ Portable Document Format เป็นประเภทไฟล์ที่ Adobe สร้างขึ้น ใน PDF นั้นสามารถมี text, image, vector graphic, image และอื่นๆอีกมากมาย

ส่วนใหญ่เวลาเราทำ extraction ข้อมูลที่เราต้องการเอาออกมาก็คือ ตัวหนังสือ หรือตัวเลขที่อยู่ในไฟล์ PDF

ถ้าเราโชคดี ในไฟล์ PDF นั้น text ที่เราจะดึงออกมาจะถูกเก็บแบบเป็น “Text data” ซึ่งสามารถดึงออกมาได้ง่ายและแม่นยำ วิธีการเช็คง่ายๆ ก็ลองเปิดไฟล์ PDF และลาก text ดู ว่าสามารถ highlight text ได้ไหม ผมเรียกไฟล์เหล่านี้ว่า Searchable PDF

ไฟล์อีกประเภทนึง คือไฟล์ที่เหมือนจะเป็นไฟล์ text ที่แปลงมาจากโปรแกรมอื่น แต่จริงๆแล้วเป็นไฟล์ image ที่ถูกแสกนขึ้นมา ทำให้เราไม่สามารถไปอ่าน Text Data ได้ เพราะมันคือรูปภาพ ผมเรียกไฟล์ประเภทนี้ว่า Non-Searchable PDF

⚠️ จงระวัง Fake Searchable หรือ ชื่อที่ผมใช้เรียกไฟล์ที่ถูกแปลงจาก Non-Searchable ให้กลายเป็น Searchable ด้วยโปรแกรมเช่น Acrobat Pro

เท่าที่เจอมา ข้อมูลที่ถูกแปลงมาจะนำมาใช้งานไม่ได้เลย แนะนำให้ลองลากและ copy text ออกมาดูว่า มันใช้งานได้ไหม ถ้าใช้ไม่ได้ อาจจะเป็นไฟล์แบบ Fake Searchable

Free Searchable PDF Extraction

การ Extract ข้อมูลจากไฟล์ Searchable นั้น ผมแนะนำให้ลองไปใช้

PDF Plumber

PDF Plumber สามารถ extract text, images, และแม้กระทั่งข้อมูลที่อยู่ใน format ของ table และนำออกมาเป็น DataFrame ให้ได้เลย หากข้อมูลที่ extract ไม่ถูกต้อง ให้ลองไปปรับ config ต่างๆที่อยู่ใน README ดู ผมเชื่อว่าสำหรับไฟล์ส่วนใหญ่ คุณสามารถ extract ด้วย PDF Plumber ได้เลย โดยแทบไม่ต้องทำอะไรเพิ่มเติมเลย

สำหรับไฟล์ประเภท Table ต่างๆ และใช้ PDF Plumber ก็ยังไม่เวิร์ค ผมแนะนำให้ไปลอง

Free Non-searchable PDF Extraction

สำหรับไฟล์ประเภท Non-Searchable นั่น การ extract ออกมานั้นยากกว่า Searchable เยอะเลย คุณต้องใช้ OCR (Optical Character Recognition) เพื่อแปลงตัวอักษรและตัวเลขจากภาพ ให้กลายเป็น “Text data”

สำหรับข้อมูลที่คุณต้องการเป็น paragraph คุณสามารถแยกภาพ paragraph นั้นออกมา และโยนเข้าไปในโปรแกรม OCR ได้เลย

แต่หลายๆครั้งข้อมูลที่คุณต้องการจะอยู่ใน table ถ้าคุณโยน table เข้า OCR เลย สิ่งที่คุณได้กลับมาจะเละตุ๋มเป๊ะ วิธีการที่ผมทำแล้วผมว่าเวิร์ค คือพยายามตัด text ออกออกมาเป็นเป็นกล่องๆ แล้วค่อยประกอบ table กลับมาใหม่ แต่การที่คุณจะทำอย่างนั้นได้คุณจะต้องมีความรู้เรื่อง Image Processing พอสมควร

พวกหัวข้อที่เกี่ยวข้องคือพวกการทำ Hough lines และการหา Contours สองอย่างนี้จะช่วยให้คุณหาเส้นของ table ใน image ได้ เพื่อหาว่าจุดที่คุณจะต้องเอาออกมาอยู่ตรงไหน

เครื่องมือสำหรับ Image Processing / PDF Processing

สิ่งที่สำคัญที่คุณควรจะตระหนักไว้ตลอดเวลาคือ ณ ปัจจุบัน OCR ไม่มีทางแปลงข้อมูลออกมาได้ถูก 100% เพราะฉะนั้นคุณต้องระวัง ว่าข้อมูลที่คุณต้องการนำออกมาใช้ สามารถมีการผิดได้บ้าง

คุณสามารถลองใช้ OCR program เช่น tesserocr ที่เป็น wrapper ของ Tesseract หรือถ้าไม่เวิร์คก็ลองเขียน model OCR ขึ้นมาเองก็ได้นะครับ

Commercial Tools

นอกจากการใช้ tools ฟรี นั้นก็มี tools ที่เสียตังค์และสามารถใช้งานการ extract ได้ดีมากๆอยู่สองตัวที่ผมอยากแนะนำก็คือ

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

การประเมิน Software ให้ถูกต้องแบบ Uncle Bob

Narongdej Sarnsuwan — Fri, 18 Sep 2020 17:00:00 +0000

วันนี้ผมจะมาสรุปสิ่งที่ลุง Bob พูดเกี่ยวกับการประเมินให้ถูกต้อง ในงาน YOW!2016 มาให้อ่านกันครับ สำหรับใครที่ต้องการดูวีดีโอตัวเต็มสามารถกดเข้าไปดูได้ที่นี้เลย

1. การประเมินที่ผิด จะทำให้คนไม่ไว้ใจเรา

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

2. การประเมินส่วนใหญ่ เป็นการประเมินที่แย่

เพราะการประเมินเป็นสิ่งที่ยาก โดยเฉพาะการประเมินการเขียน software เช่นถ้าให้คุณประเมินเวลาในการผูกเชือกรองเท้า คุณอาจจะประเมินว่าผูกได้ในเวลาไม่ถึง 5 วินาที และการประเมินนั้นอาจจะถูกเป๊ะๆ แต่ถ้าให้คุณประเมินการเขียนวิธีการผูกเชือกรองเท้า คุณจะประเมินผิดแน่นอน การเขียนวิธีการทำอะไรสักอย่าง คือสิ่งที่โปรแกรมเมอร์อย่างเราทำ เรามักจะประเมินผิดอย่างน้อย 3 เท่า แม้ว่าเราจะรู้อยู่แล้วว่าเราจะประเมินผิดอย่างน้อย 3 เท่า 😂

3. บางทีเราก็ประเมินสูงไป

เรามักจะประเมินอะไรที่ดูยาก และไม่รู้ว่าต้องทำยังไง ณ เวลานั้น สูงเกินไป แต่เมื่อลงมือทำจริงๆ อาจจะไม่ใช้เวลาเยอะขนาดนั้น

4. การประเมินที่ดีควรจะมีสามสิ่งนี้

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

5. การประเมินส่วนใหญ่ เป็นการโกหก

ถ้าคุณประเมินว่างานจะเสร็จวันที่ … ส่วนใหญ่คุณก็ทำไม่เสร็จวันนั้นหรอก เพราะฉะนั้นคุณโกหก หรือว่าคุณทำเสร็จไปแล้ว แต่ประเมินว่าจะเสร็จอาทิตย์ คุณโกหก สาเหตุหนึ่งที่ทำให้คุณโกหก เพราะว่าคุณประเมินจากหลังมาหน้า โปรเจ็คส่วนใหญ่คุณรู้อยู่แล้วว่า end date มันต้องอยู่วันไหน คุณถูกบีบมากว่ามันจะต้องเสร็จวันนี้ แล้วบ่อยครั้งที่ถ้าคุณประเมินให้ถูกต้องมันจะเกิน end date สิ่งที่คุณทำต่อไปก็คือโกหกว่ามันจะเสร็จ สิ่งที่คุณควรจะทำคือประเมินอย่างถูกต้อง แล้วเอามาแผ่ดูว่า features ไหนที่ตัดออกไปได้บ้าง หรืออันไหนที่ถ้าเพิ่มคนจะช่วยให้คุณทำเสร็จทัน หรือถ้ายังไงไม่เสร็จคุณก็ควรยืนกรานในสิ่งที่คุณประเมิน

6. การประเมินให้ถูกต้อง

หากคุณต้องการประเมินให้ถูกต้อง ให้ทำ Work Breakdown Structure แค่ไม่กี่ level แล้วประเมินเวลา เสร็จแล้ว คูณจำนวนวันทั้งหมดด้วย 4 - 6 เพราะว่าการประเมินภาพรวมได้ไม่แม่น หากเราต้องการประเมินให้แม่นขึ้น เราต้องใช้เวลานานมาก และเวลาคือเงิน เพราะฉะนั้นทำ Work Breakdown แค่ 3 - 4 level พอ แล้วคูณ 4 - 6 ไปดีกว่า

เพราะถ้าคุณต้องการตัวเลขที่ถูกต้องจริงๆ คุณต้องทำโปรเจ็คนั้นไปแล้วจริงๆ หน้าที่คุณก็คือต้องบอกให้ manager รู้ด้วยเช่นกัน Cost ของการประเมินให้แม่นขึ้นโต exponential แต่สิ่งได้รับกลับมาเป็น logarithm 👈

7. สูตรการประเมิน

ให้ประเมินเป็น 3 สถานการณ์

ทุกอย่างเป็นไปได้สวย ( B ) - โอกาสเกิดขึ้นแค่ 5%
ทุกอย่างพังพินาศ ( W ) - โอกาสเกิดขึ้น 95%
ทุกอย่างตามที่คาดไว้ ( N )- โอกาสเกิดขึ้น 50%

ทุกครั้งที่คุณตอบการประเมินให้บอกเป็นช่วงเวลา คุณสามารถโชว์ graph ความน่าจะเป็นได้

คุณสามารถเอาเลขที่คุณประเมินมาวาด normal distribution โดยใช้สูตรด้านล่าง เพื่อแสดงช่วงของการประเมิน

stddev = (W-B)/6
mean = (B+W+4N) / 6
ProjectMean = sum(mean)
ProjectStdDev = sqrt(sum(stddev^2))

8. หน้าที่ของ Manager คือการ Manage ความไม่แน่นอน

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

9. โปรแกรมเมอร์ไม่ชอบการเผชิญหน้า

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

Missing 'window' variable in AppDelegate - CoreData

Narongdej Sarnsuwan — Sat, 12 Sep 2020 15:32:14 +0000

If you're following along the "Setting Up a Core Data Stack" tutorial for Swift in apple website, and you got stuck on the rootVC = window?.rootViewController part, then you're not alone.

Since iOS 13 (Xcode 11) the life cycle of UIKit introduce UISceneDelegate, read more here.

Thus, you have to change use the following code instead of in the tutorial

AppDelegate.swift

class AppDelegate: UIResponder, UIApplicationDelegate {

    ...

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {        
        // Just leave it as it, don't change anything
    }

    ...
}

SceneDelegate.swift

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {

        ...

    rootVC.container = (UIApplication.shared.delegate as? AppDelegate)?.persistentContainer

        ...

}

It sure confuse the hell out of me, when I just getting start developing iOS app and following the tutorial.

วิธีการเขียน Clean Code แบบ Uncle Bob

Narongdej Sarnsuwan — Fri, 11 Sep 2020 10:05:50 +0000

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

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

ตอนนี้ทีมที่บริษัทของผมเรื่มใหญ่ ผมเริ่มเห็น Style การเขียนโค้ดที่แตกต่าง หลายคนสามารถทำโค้ดที่ไม่ซับซ้อนให้มันซับซ้อนได้เพราะวิธีการเขียน ผมเลยสนใจวิธีการเขียนโค้ดให้สะอาด

และก็ได้ไปเจอ Video ของ Uncle Bob หรือ Robert C. Martin ขณะการทำ Knowledge Sharing ของบริษัท Uncle Bob คือหนึ่งในผู้เขียน Agile Manifesto หรือสิ่งที่เราใช้ Define ว่าอะไรคือ Agile บล็อกนี้ผมจะมาเขียนสิ่งที่ผมได้เรียนรู้จากการดู Video ของ Uncle Bob

WTFs / minute

หากคุณอยากรู้ว่าโค้ดของคุณดีหรือแย่ให้นับจำนวน WTF ตอนทำ Code Review หรือตอนที่คนอื่นอ่านโค้ดของคุณ ถ้าจำนวน WTF น้อย แปลว่าโค้ดของคุณน่าจะค่อนข้างดี ถ้าเยอะก็คงจะอ่านยากแล้ว เพราะฉะนั้นเกณฑ์ในการดูว่าโค้ดของคุณดีรึยัง ให้นับจำนวน WTFs per minute 😂

ตั้งชื่อให้เหมาะสม

ชื่อเป็นสิ่งที่สำคัญสุดๆ เราต้องตั้งชื่อ Variable, Function, Argument, Class และอื่นๆอีกมากมาย แน่นอนว่าบางทีคุณก็คิดไม่ออกว่าจะตั้งชื่ออะไร ผมก็เป็น

ชื่อทุกชื่อ ควรจะบอกว่ามันมีทำไม มีเพื่ออะไร ผมเคยหลาย Project ของคนไทยตั้ง Variable ใน Class Quotation ว่า f1, f2, f3 ไล่ๆไปเรื่อยถึง f10

การตั้งชื่อ f1 - f10 ไม่ได้บอกอะไรเกี่ยวกับ Variable ตัวนั้นเลย จะดีกว่าไหมถ้าคุณตั้งชื่อเช่น

var customerName
var customerAddress
var customerPhoneNumber

เพราะฉะนั้นจงตั้งชื่อให้สื่อถึงสิ่งที่คุณต้องการให้มันทำ อย่ากลัวว่าชื่อมันจะยาว ตั้งชื่อที่มันเข้าใจง่ายดีกว่า แล้วใช้ IDE ดีๆให้มัน AutoComplete ให้คุณ

Functions

Function ควรจะสั้น บรรทัดใน Function ควรจะไม่เกิน 170 บรรทัด หาเกินกว่านั้นคุณควรจะแยก Function ให้เป็น โunction ย่อยๆ และตั้งชื่อ function เหล่านั้นให้เข้าใจว่ามันจะทำอะไร
Block ใน if else, while statement ควรมีแค่หนึ่งบรรทัด หนึ่งบรรทัดนั้นอาจจะเป็น Function call ไปที่ชื่อ Function ที่เข้าใจง่าย
ควรทำแค่อย่างเดียว ถ้า Function คุณทำหลายอย่าง ให้แยกออกเป็น Function ย่อยๆซะ จนกว่า Function นั่นจะทำแค่อย่างเดียว
Step-Down Rule เขียน Function ให้สามารถอ่านจากบนลงล่างได้ โดยเรียง Function ย่อยไว้ด้านบนและตามด้วย Function ที่เรียกใช้ Function ก่อนหน้านั้น
DRY - Don't Repeat Yourself เป็นสิ่งที่ทุกโปรแกรมเมอร์ควรจะรู้ ถ้า Function ทำสื่งที่คล้ายๆกันหรือเหมือนกัน ห้ามก็อปไปวางอีกครั้งเด็กขาด ให้เขียนเป็น Function แทน

Comments

ผมเคยคิดว่าการ Comment เป็นสิ่งที่ดี แล้วเราควรจะเขียน Comment เกือบทุกบรรทัดในการเขียนโค้ด แต่หลังจากลองเขียน Comment จริงๆก็รู้ว่ามันเป็นอะไรที่ซ้ำซาก เช่นการเขียน Comment ให้ Variable ชื่อ customerName การที่เขียน comment เช่น // The name of the customer มันไม่จำเป็น เพราะชื่อ variable ก็บอกอยู่แล้ว

Uncle Bob จึงบอกว่าการเขียน Comment เป็นสื่งที่แสดงว่าเราเขียนโค้ดไม่ดี ถ้าเราเขียนโค้ดดี โค้ดควรจะอ่านรู้เรื่องอยู่แล้ว ไม่ว่าจะเป็นเพราะการตั้งชื่อที่ดี การเขียนในสไตล์ที่อ่านไม่ยาก คุณไม่จำเป็นต้องมี Comment เลย เพราะคนที่จะอ่านโค้ดของคุณ ก็ต้องเขียนโปรแกรมเป็นอยู่แล้ว ถ้าเขียนโค้ดดี ก็ไม่จำเป็นต้องมี Comment

แต่ในบาง case คุณก็ต้องมี comment อยู่ดีเช่น comment license หรือโค้ด ที่เข้าใจได้ยากไม่ว่าจะคุณจะ clean ยังไงก็ตามแล้ว เพราะฉะนั้น ให้ comment เป็นสิ่งสุดท้ายที่คุณทำ ถ้าคุณไม่สามารถทำความสะอาดโค้ดของคุณได้แล้ว

Test

การเขียน Test นี่เป็นเรื่องที่ผมไม่ชอบเลยเมื่อก่อน เพราะว่ามันเหมือนเราต้องเขียนโค้ดสองรอบ ทั้งๆที่เรารู้แล้วว่าโค้ดมันเวิร์คอยู่แล้ว แต่นั้นและคือสาเหตุที่เราเขียน Test เพราะว่าเราต้องการ เช็คมันสองรอบ เหมือนว่าทำไมบัญชีต้องจดทั้งรายรับ และรายจ่าย เพื่อที่จะได้รู้ว่าถ้ามันไม่ตรงกัน มันก็ต้องมีอะไรสักอย่างผิดพลาด คุณคงไม่เจอนักบัญชีที่จดแค่รายรับ แต่ไม่จดรายจ่าย

การเขียน Test ในโปรแกรมก็เหมือนกัน เพราะว่าถ้าเราหยุดเขียน Test เมื่อไหร่ เราไม่มีทางมั่นใจได้เลยว่า โค้ดของเราจะทำงานได้ถูกต้องหรือใหม่

แล้วเราต้อง Test อะไรบ้างละ? คำตอบคือ ทุกอย่าง เพราะถ้าสมมุติคุณเขียน Test แค่ 80% แปลว่าคุณกำลังบอกทุกคนว่าอีก 20% ของแอพนั้นมีโอกาสที่จะพัง

Test จะช่วยเยอะมาก หากคุณทำงานใน Team ที่คนอื่นมีโอกาสจะมาแก้ไขโค้ดของคุณ หรือถ้าคุณโค้ดคนเดียว หากคนกลับมาโค้ดโปรเจ็คที่คุณไม่ได้แตะมาแล้วสักหนึ่งปี การมี Test จะช่วยให้คุณมั่นใจว่าสิ่งที่คุณจะแก้จะไม่ทำให้ระบบคุณพัง อีกหนึ่งประโยชน์ของ Test คือ มันคือตัวอย่างการใช้งานระบบของคุณ เพราะถ้าคุณทำ Test ได้ 100% Test นั้นจะเป็นสิ่งที่บอกวิธีการใช้งานทุก Class ทุก Function ในระบบของคุณ โปรแกรมเมอร์แทบทุกคนคงเห็นด้วยว่าการอ่านโค้ดนั้น สะดวกสบายกว่าการไปอ่าน Document ยาวๆ

การที่จะเขียน Test ให้สำเร็จได้สิ่งที่คุณต้องมีก็คือวินัย ถ้าคุณขาดวินัยในการเขียน Test หรือเรื่ม Comment Test ออกเมื่อไหร่ คุณจะเลิกเขียน Test แน่นอน เพราะฉะนั้นจงเรื่มเขียน Test ให้เร็วและมีวินัย หรือถ้าทำ Test-Driven ได้ยิ่งดี

ความสำคัญของ Software

หลายคนๆ แม้กระทั่ง Programmer เองคงไม่ได้ให้ความสำคัญกับโปรแกรมที่ตัวเองเขียนมากเท่าที่ควร หากคุณลองคิดดีๆ ของแทบทุกอย่างควบคุมด้วย Software เช่นรถที่คุณขับ หรือเครื่องบินที่คุณนั่ง ล้วนแต่มีแอพพลิเคชั่นเล็กๆนับพันเพื่อที่มันจะทำงานได้ถูกต้อง หากคุณเขียน Software ที่ไม่ดีและมีบัค แปลว่าคุณมีสิทธิที่จะทำให้คนอื่นเสียชีวิตได้เลยนะ

สุดท้าย เขียนโค้ดเหมือนว่าคนที่จะมารับช่วงดูแลโค้ดของคุณต่อเป็นคนโรคจิตหัวรุนแรงที่รู้ว่าบ้านคุณอยู่ไหน

หากคุณเป็นสายดูวิดีโอผมแนะนำให้ไปดู Playlist นี้ของ Uncle Bob หรือถ้าคุณเป็นสายหนังสือลองอ่านเล่มนี้ดูนะครับ Clean Code : A Handbook of Agile Software Craftsmanship (Robert C. Martin)

Bash Command ที่ควรรู้สำหรับ Data Scientist

Narongdej Sarnsuwan — Sat, 23 May 2020 17:00:00 +0000

หากคุณเคยใช้ OS อื่นไม่ใช่ Windows คงเคยได้ใช้ Bash กันมาก่อนอย่างแน่นอนไม่มากก็น้อย

Bash หรือ Bourne Again Shell เป็น default shell ในหลายๆ Linux Distribution ที่เรารู้จักกันดีเช่น Ubuntu กับบน Apple macOS (แต่หลังจาก macOS Catalina ก็เปลี่ยนมาใช้ zsh แทนแล้ว)

แต่ถึงอย่างนั้นผมก็คิดว่าเราควรเรียน Bash Scripting แบบเบื้องต้นกันไว้บ้าง เพราะมันมากับในหลายๆ OS ซึ่งจะทำให้เราสามารถใช้งานมันได้เลยโดยไม่ต้องลงอะไรเพื่มเลย

สำหรับการทำงานในสาย Data Scientist หรือ Data Engineer เราต้องทำการอ่าน Data แก้ไข ทำความเข้าไฟล์ตลอด บางทีไฟล์นั้นอาจจะไม่ได้อยู่ในเครื่องของคุณ แต่อยู่ใน Server ที่สามารถเข้าถึงได้โดยใช้ Command Line เท่านั้น มีโอกาสสูงที่โปรแกรมที่คุณเปิดเข้าไปเจอจะเป็น Bash

Basic Commands

1. การเปิด Manual

man: หรือ manual เป็นคำสั่งที่ทุกคนควรรู้ มันคือคำสั่งที่เราสามารถพิมพ์ man <ชื่อ command> เพื่อดู manual สำหรับ command นั้น ถ้าตอนนี้คุณยังไม่รู้จะพิมพ์ command อะไร ลองพิมพ์ man man เพื่อดู manual ของ command man ก่อนก็ได้

กด q เพื่อออกจาก man page และสำหรับการ search คุณสามารถพิมพ์ /<สิ่งที่ต้องการ search> เช่น /whatis โดยสามารถกด n เพื่อไปที่ match อันต่อไป หรือกด Shift+n เพื่อกลับมา match ก่อนหน้า

2. การเปลี่ยนและดูข้อมูลของ Working directory

pwd: เวลาเราอยากรู้ว่าตอนนี้เราอยู่ที่ directory (folder) ไหน คุณสามารถพิมพ์ pwd เข้าไปใน bash แล้ว bash ก็จะตอบกลับมาเป็น Full path ของ directory ที่เราอยู่

bash-3.2$ pwd
/Users/narongdejsrn

ในที่นี้ผมอยู่ใน Folder home ของ macOS ซึ่งจะเรื่มต้นด้วย /Users/ ถ้าเป็น Windows ก็จะตอบกลับประมาณ C:\Users<name>

ls: สำหรับดูว่าใน Working directory มีไฟล์อะไรบ้าง คุณสามารถพิมพ์ ls เพื่อแสดงรายชื่อของไฟล์ สำหรับดูไฟล์ให้ระเอียดมากยิ่งขึ้นสามารถพิมพ์ ls -l หรือจะพิมพ์ ls -la หากคุณต้องการแสดงไฟล์ที่เรื่มต้นด้วย . ด้วย

bash-3.2$ ls
404.html README.md _pages _sass build mermaid tag_generator.py
CNAME _config.yml _plugins _site favicon.png robots.txt tags.rb
Gemfile _includes _posts assets feed.json styles.scss
Gemfile.lock _layouts _projects atom.xml index.html tag

cd: สำหรับการเปลี่ยน folder คุณสามารถทำการ cd <fullpath> หรือทำการ cd แบบ relative ได้โดยการทำ cd ./<relative_folder> หรือ cd ../ เพื่อออกไป folder ก่อนหน้า

3. การอ่านและหาข้อมูลในไฟล์

cat: สำหรับการเปิดอ่านไฟล์ เช่น cat data.txt bash ก็จะทำการปรินต์ตัวอักษรใน data.txt ออกมา

grep: สำหรับการหาบรรทัดโดยใช้ regular expression สำหรับคนที่ไม่รู้ regular expression ให้ลองไปเล่นที่เว็บไซต์ regex101 ตัวอย่างเช่นเราต้องการหาบรรทัดที่มีคำว่า Bangkok ในไฟล์ data.txt เราสามารถทำการพิมพ์ cat data.txt | grep "Bangkok" สิ่งที่เราทำตอนนี้คืออ่าน data จากไฟล์ data.txt ผ่าน command cat และทำการ pipe (การโยนข้อมูล) เข้าไปที่ command grep

head: ถ้าเราต้องการอ่านบรรทัดแรกของไฟล์เราสามารถทำการพิมพ์ head -n <จำนวนบรรทัดที่ต้องการอ่าน> <ชื่อไฟล์> เช่น head -n 5 data.txt หรือจะ pipe เข้ามาก็ได้ cat data.txt | head -n 5

tail: เหมือน head ด้านบน แต่อ่านจากบรรทัดล่างสุด

wc: นับคำ -w นับบรรทัด -l หรือนับตัวอักษร -m เช่นหากคุณต้องการนับบรรทัดในไฟล์คุณสามารถพิมพ์ wc -l data.txt หรือจะ pipe เข้ามาเหมือนเดิมก็ได้

sed: อ่านและแก้ไขไฟล์โดยใช้ regular expression เช่นหากคุณต้องการเปลี่ยนคำว่า hi เป็น hello ในไฟล์ data คุณสามารถทำการพิมพ์ sed "s/hi/hello/g" data.txt หลังจากนั้นคุณสามารถ redirect output เข้าไฟล์ได้ด้วยการต่อท้ายด้วย sed "s/hi/hello/g" data.txt > output.txt หรือจะใช้ -i ก็ได้ sed -i "s/hi/hello/g" data.txt

สุดท้าย Bash ยังสามารถทำอะไรได้อีกเยอะ ไว้ว่างๆจะมาเขียนเรื่อง Bash Scripting ต่อนะครับ ระหว่างนี้สามารถเข้าไป Command Bash ทั้งหมดได้ที่ลิงค์นี้ครับ

Force input validation in Svelte

Narongdej Sarnsuwan — Tue, 12 May 2020 17:00:00 +0000

Svelte! Yet again another new Javascript Framework. Now without virtual dom that React introduce, we go back to a more jQuery style of actual DOM manipulation but still having all that (good?) stuff from React and Vue such as reactivity.

The website that you will create will likely include a web form. Where the value that the user input needs to be validated somehow. If you search google then you’ll likely come across this repl.

It all good and stuff, but what about when you want to reset the validation? For example, when the user submitted a form that locates inside a dialog. When the user presses a button to open that form again, you wouldn’t want those fields to already been validated.

Here how you can modify the code a bit to allow that

In validation.js

import { writable } from "svelte/store"
import { buildValidator } from "./validate"

export function createFieldValidator (...validators) {
  const { subscribe, set } = writable({ dirty: false, valid: false, message: null })
  const validator = buildValidator(validators)

  function action (node, binding) {
    function validate (value, dirty) {
      const result = validator(value, dirty)
      set(result)
    }

    validate(binding, false)

    return {
      update (value) {
        validate(value, true)
      }
    }
  }

  function reset() {
    setTimeout(() => {
      set({ dirty: false, valid: false, message: null })
    }, 500);
  }

  return [{ subscribe }, action, reset]
}

Now you can call resetValidation() to reset the validation to false. For example

const [validity, validate, resetValidation] = createFieldValidator(requiredValidator(), emailValidator())

resetValidation() // <-- call this to reset the validation

Here’s the repl

Create image upload function in Google Firebase

Narongdej Sarnsuwan — Sat, 25 Apr 2020 17:00:00 +0000

I want to start a new hobby, where I post the solution to something I can’t find 2-3 google away. If I can’t Google and find my solution in one-shot. I’ll write a short tutorial about it. So here comes the first in this blog.

If you want to create an upload image endpoint inside Google Firebase (Cloud functions), then here is one way you can do it.

import * as functions from 'firebase-functions';
import * as Busboy from 'busboy';
import { tmpdir } from 'os';
import { join } from 'path';
import { createWriteStream, unlinkSync } from 'fs';
import * as FileType from 'file-type';
import * as admin from 'firebase-admin';

admin.initializeApp(); // It will automatically authenticate

export const uploadImage = functions.https.onRequest(async (request, response) => {
  const busboy = new Busboy({
    headers: request.headers,
    limits: {
      fileSize: 2 * 1024 * 1024, // max image size to 1 MB
      files: 1 // Limit to one file upload
    }
  });

  let filepath: string = "";
  const _tmpdir = tmpdir();

  busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
    filepath = join(_tmpdir, filename);
    const writeStream = createWriteStream(filepath);
    file.pipe(writeStream);
  });

  busboy.on('finish', async () => {
    const fileType = await FileType.fromFile(filepath);
    console.log(fileType);
    if(!fileType || !(fileType.mime === "image/jpeg" || fileType.mime === "image/png")) {
      unlinkSync(filepath);
      response.status(500).send({
        'error': 'Invalid file',
        'code': 'invalid_upload_file'
      });
      return;
    }

  await admin.storage().bucket().upload(filepath, {
    // Support for HTTP requests made with `Accept-Encoding: gzip`
    gzip: true,
    metadata: {
      // Enable long-lived HTTP caching headers
      // Use only if the contents of the file will never change
      // (If the contents will change, use cacheControl: 'no-cache')
      cacheControl: 'public, max-age=31536000',
    },
  });

    response.send({
      'status': 'Upload successful'
    });
  busboy.end(request.rawBody);
});

I’m new to Google Firebase and Cloud functions, so this might not be the best way to do it, but it works

So what we did was

Process the form data using busboy
Store the image in a temp directory
Upload the image using firebase-admin storage module

But what about multiple files upload at once?

You can modify this line

    limits: {
      ...
      files: 50 // <--- or remove it to allow infinity
    }

and instead of replacing filepath you create an array of file paths instead. After that, process the filepaths array accordingly in

 busboy.on('finish', async () => {
   ...process the array
 });

Upgrading PHP to 7.3 with Ansible

Narongdej Sarnsuwan — Mon, 03 Jun 2019 13:42:51 +0000

At my company, one of our services is to develop and maintain Wordpress websites for our clients. We host our clients' website using Digitalocean and we want to separate customer environment easily so we use different droplet for each customer. However, the pre-installed version from the DigitalOcean image is 7.0.X and it was deprecated.

Save by Ansible

Ansible is an IT Automation tool by Redhat which lets you automate IT tasks with ease. And did I mention, its free

While you can do a load of things using Ansible, we will only focus on upgrading PHP on our servers. Be sure to check out what you can do with ansible afterward.

Installation

First, you gotta install Ansible control node. On a bigger scale, this would be on a server who manages other ansible nodes (other servers) through SSH. However, for our case; we will use our own computer as a control node.

Ansible works on any machine that can run Python 2 or 3, except for Windows. Use the Linux subsystem or something else if you are running Windows.

For Mac users, the preferred way is to install ansible using pip

pip install --user ansible

If you are using Ubuntu 16.04 or 18.04 run the command below

sudo apt update
sudo apt install software-properties-common
sudo apt-add-repository --yes --update ppa:ansible/ansible
sudo apt install ansible

For other distros or OS, check out the official installation tutorial

Setup your inventory

In Ansible, you identify the location of your servers in the inventory file located at /etc/ansible/hosts

Create your inventory file

[wordpress]
website-a ansible_host=122.X.X.X ansible_port=2222 ansible_user=someuser
website-b ansible_host=122.X.X.X

Above, you created a hosts group called wordpress which contains website-a and website-b

You can also set ansible_password= but I recommended you to set up the public key

Create your playbook

Next up we'll create an orchestration file to tell ansible what to do. Create a file name upgrade-php.yml

- hosts: wordpress
  vars:
    php_version: '7.3'
    php_versions_install_recommends: false
  roles:
    - role: geerlingguy.repo-remi
      when: ansible_os_family == 'RedHat'
    - geerlingguy.php-versions
    - geerlingguy.php

What happening here is we're telling ansible to run set of tasks (roles) geerlingguy.php-versions, and geerlingguy.php.

Just like NPM or pip, you need to download the package from an online repo in order to use it. Run these commands

ansible-galaxy install geerlingguy.repo-remi
ansible-galaxy install geerlingguy.php-versions
ansible-galaxy install geerlingguy.php

This awesome role by geerlingguy purge old PHP versions, add the appropriate repository, install your PHP and install all the recommendations modules. You can review what the role does here

Upgrade the server PHP

Finally, we are ready to upgrade PHP on our servers. Run this command:

ansible-playbook upgrade-php.yml

Wait for the playbook to finish and your PHP version should be upgraded to 7.3 🎉🎉🎉

Ansible has a lot more awesome features that make your sysadmin mundane tasks go away in one command. I'm new to ansible and wish to have known about it sooner. If you have any cool ansible project, then please tell me about it in the comment.