DEV Community: (James) Kanin Kearpimy

3..2..1 Launch!: My journey from zero to Django Contributions

(James) Kanin Kearpimy — Fri, 15 May 2026 13:49:46 +0000

Though contribution sound big, its process require many tiny step composed up for single PR. I hope my reflection journey of Django contribution via Djangonaut program will inspire anyone who want to contribute to open source.

Introduction

When I surfed website before coding-ere. There was always a question; How was these website created? Such question was clarified during my first web-programming. We have to write HTML/CSS and Javascript. Then we plugged it to server-side application. Well, I accidentally came across open-source framework, Django, because of admin feature my client requested 5 years ago.

Contribution Challenge

As you may know, using open source and contributing to it are totally different. I thought it include: reading contribution.md, select an issue, fixing thing, open pull request, then boom! merged!!!

Well, that's 50% true. But less people talks about hidden parts. So many times there are;

Feeling nervous to select an issue because good-first-issue are occupied so quick.
No idea where to navigate, in particular large codebase software.
What if reviewer wouldn't like my PR at all?

Yeah, those are what happens when I first try to help Open Source project. Especially big project like Django, they are over hundred smart engineers around the world working on this thing. Finding your spot and starting point are surely challenging. That's why Django team has beginner-friendly program fostering new contributor, Djangonaut!

Launch Your Contribution: Djangonaut Space!

It's 8-weeks near-asynchronize program where you'll be in team, mine is Saturn. (yeah, creative space relates name tho). Each team has different project to contribute. All team has Djangonauts (you and teammate) with your Captain, and Navigator. There is team expert, my team is Django Fellow who asynchornizedly help us along the program.

It's not only Django Djangonaut contributed but also community-wide libraries in Django/Python ecosystem. (Check website for more)

My Artifacts from Saturn

Fortunately, my two PRs got merged during program. It's my pleasure to receive very helpful suggestion from Django Core team.

Coalescing JSON-primitive strings

PR: Link
This is very interesting bug. You can perform coalesce to receive not-null first value from given columns fetching. However, column's type are vary. Let imagine you coalesce Column A (string), Column B (JSON).

Technically to serve potential types, we need to wrap them with union type. In this case it's NCLOB, which can hold String and JSON. Basically database would cast type for us resulting in no problem in other database except Oracle. So, we have to handle type casting manually.

Hidden sensitive variables for Django admin panel

PR: Link

Django show sensitive data in stack trace if Debug=True is set. It's development-only and strongly recommended to disable during production. Even though even disable Debug mode, somehow it will throw sensitive information to stack trace, or worse Admin email, for default login/reset password form. This bug damage is only exposed to admin role.

The solution is straight forward, Django already provide sensitive_variables() to hide sensitive information. I have to attach it to authenticate() function for login / password reset.

How is it after two merged PRs?

Well, it's mixed feeling. My works got merged into big project. On the other hand, it clarified mystery under the iceberg.

What I always see is new PRs open, new feature updated, new version to pull. But Those are just surface of iceberg. There are below the water where;

People get stuck for a week without any progress because of codebase size.
Over 20 discussions without (yet) tangible direction for issue.
No paid for all of this << this is very serious problem in open source now.

Well, is it worth? Absolutely Though my contributions are tiny progression, at least it gradually drive project forward. I learn many thing along the way, which I believe it will help me toward my career.

Final Thought

I would like to thank all Saturn team member, Django Core Team, and Djangonaut for this valuable experience. For ones who want to join, new batch is coming soon! Please stay in touch by following Djangonaut Linkin and website.

Also, if you have any question (relating/unrelating to this post), please feel free to reach out.

[Short-Note] Data Engineering 101

(James) Kanin Kearpimy — Sat, 17 Sep 2022 07:01:01 +0000

I have been participating in Data Engineering Accelerated Program for 3 days and this is overview I perceived from program. I skipped technical aspect like coding and pipeline, another article would be better :)

Program is undergoing and the rest 5 days are waiting for me!

History of data engineering

Organization would like to utilize data such as Dashboard. To compute dashbaord, operator need to pull data from sources (on the left one), clean it, and put to dashboard for analytic user (right one)

When data source grow bigger. Manual operator is not capable. Data Engineering is come to automate the task.

Extract, Transform, Load (ETL)

"We really know how consumer use data."

Pull data from source, clean and trasnform, save in storage.

Extract, Load, Transform (ELT)

"let consumer choose"

Pull data, store in database, then let consumer choose which data they want to use and extract from our source.

It speed up time to market at some use-cases.

Whole process of data engineering in organization.

Data Engineer with ETL/ELT.

Data engineer write script (python, scala) to automate
1) pulling data from source,
2) cleaning them
3) loading them to database.

Then dashboard will use data to visualize to dashboard.

Data Warehouse and Data Lake.

Data werehouse is type of database that is optimized to store, search, query huge amount of structure, semi-structure, and (sometime) unstructure data.

Typical dashboard can only show fixed data to user. To acquire insightful one to help making decision, We need data scientist. Somehow current pipeline data can't give proper data to data scientist to explore.

We need place that store raw data, without preprocessing, and able to pull by data scientist. Its name is [[Data Lake]].

OLTP & OLAP

Online Transactional Processing

is focusing on transaction in database. It's read, write, update frequently. So, it heavily rely on fast processing.

Usecase:

Banking
Shopping
Retail scanning

Online Analyltical Processing

on the other hand, focus on large volumn, high dimensional data from data warehouse.

Usecase:

Data analytic purpose.
Machine learning

_I think those are differentiated by database architecture.

Culture and Organization shifting.

Data democratization

Core concept: enable everyone in organization access to data. It impact intention of people, culture of organization, and tool for everyone to access.

Reference

Content: https://data-derp.github.io/
Image & Content: https://youtu.be/qWru-b6m030

Docker และ Containerization 101 หน้าตาประมาณไหนนะ

(James) Kanin Kearpimy — Sat, 27 Aug 2022 14:22:34 +0000

Source Code เมื่อพัฒนามากขึ้น จำเป็นต้องมี Environment ที่เหมาะสมเพื่อให้ทำงานได้ เช่น เวอร์ชั่นของ library, สิทธิของโปรแกรม, รวมถึงเรื่องอื่นๆ ทำให้หลายๆ ครั้งเราอาจจะพบกับปัญหาการทำงานร่วมกันภายในทีม เนื่องจาก Souce Code รันได้จากเครื่อง A อาจจะใช้ไม่ได้กับเครื่อง B เป็นต้น

Containerization

เกิดมาเพื่อแก้ไขปัญหาดังกล่าว โดยดึงศักยภาพบางส่วนของ Virtualization มาใช้ แต่ทำให้ขนาดเล็กลง และใช้งานได้ง่ายขึ้นเพื่อการ Automation

Docker

คือ Containerization ตัวหนึ่งที่ทำหน้าที่จำรอง environment ที่เหมาะสมให้กับ Souce Code เพื่อใช้งาน โดยตัว Docker นั้นมีโครงสร้างพื้นฐานประกอบไปด้วย 4 ส่วน ได้แก่

1) Docker Image ทำหน้าที่เป็นส่วนเก็บชุดคำสั่งสำหรับการจำรอง environment ที่เหมาะสม ซึ่งเกิดจากการลง build รายละเอียดคำสั่งจาก Dockerfile

2) Docker Container คือตัว docker image ที่ถูกนำมาเปิดใช้งาน จำรอง environment บน docker host เช่น เรามี image ที่ทำหน้าที่เป็น nginx web server เมื่อเรา build image ตัวดังกล่าว เราจะได้ container หนึ่งตัวมาใช้งานบนเครื่อง

3) Docker Host & Docker Daemon คือส่วนของเครื่องที่ติดตั้ง Docker เอาไว้ โดยตัว Deamon คือ core กลางสำคัญสำหรับการรับคำสั่งต่างๆ จากนักพัฒนา เช่น docker build, docker pull, docker run เป็นต้น

4) Docker Registry คือส่วนที่เก็บและกระจาย docker image ที่ได้จากนักพัฒนาหรือองค์กรต่างๆ ซึ่งโดยปกติเมื่อสร้าง image เสร็จบน local environment และอยากให้คนในทีมได้ใช้ image ตัวดังกล่าว จะต้องนำมาเก็บไว้บน registry

Reference & Credit:

เรามาลองใช้ Git Command ระดับกลาง (หรือสูง) กันมั้ยครับ: stash, squash, rebase

(James) Kanin Kearpimy — Wed, 02 Mar 2022 13:44:54 +0000

หากว่าเราพูดถึง git สำหรับคนเริ่มต้น คงจะหนีไม่พ้นคำสั่งต่างๆ เหล่านี้

git add . // เพิ่ม files ที่ถูกแก้เข้า staged change
git commit -m "message" // เพิ่ม staged change files เข้า commit history
git push & git pull _// syncing ระหว่าง local (เครื่องที่บ้าน) กับ remote (เครื่องบน server ของผู้ให้บริการ เช่น github)
_
วันนี้เราจะลองดูอีก 3 คำสั่งที่ใช้กันค่อนข้างบ่อย เมื่อเริ่มคุ้นชินกับการทำงานของ git มากขึ้น
git stash
git squash
git rebase

git stash

ลองนึกถึงสถานการณ์ที่พวกเรากำลังแก้ไฟล์อยู่ และทำไปได้ระดับหนึ่งแล้วแต่บังเอิญว่ามีงานด่วนเข้ามา และเราต้องหันไปทำงานนั้นทันที ปัญหาจะเกิดดังนี้ครับ
1) ยังมี change files ที่ยังไม่เสร็จ และยัง commit ไม่ได้ เพราะอาจจะเกิดผลเสียมากกว่าข้อดี
2) เราสามารถสร้าง branch ใหม่ให้เก็บ change ของเราได้ แต่ก็เปลืองอยู่ดี

ในกรณีแบบนี้ git stash จะมีประโยชน์มาก เพราะสิ่งที่ git stash ทำจะเป็นการ save ตัว change files ของเราเอาไว้ใน local แต่จะไม่ถือว่าเป็น commit ทำให้สามารถสลับไปทำงานอื่นและ syncing ข้อมูลกับ remote ได้อย่างอิสระ (เพราะอย่างไร change ก็ไม่ปนขึ้นไปด้วยอยู่ดี)

โดยเมื่อต้องการทำ git stash ให้ทำการเพิ่มทุก files ที่ต้องการเข้าสู่ staged change (git add) ก่อน จากนั้นให้พิมพ์คำสั่ง git stash เพื่อ save เก็บไว้ในเครื่อง (ตามภาพด้านล่าง)

จากนั้นเมื่อทำการ git status (หรือ gst) อีกครั้งจะเห็นได้ว่า change file ได้หายไป (ถูกเก็บเข้า stash) เรียบร้อยแล้ว ซึ่งเราสามารถสลับไปทำ features อื่นได้โดยไม่ต้องกังวลถึง change files อีก โดยสามารถเช็คได้ว่าเรามี change files ที่ stash ไว้กี่ครั้ง สามารถทำได้โดยคำสั่ง

git stash list

และเมื่อต้องการนำสิ่งที่ stash ไปกลับมาเพื่อแก้ไข พัฒนาต่อเราสามารถใช้คำสั่ง

git stash apply stash@{i} // โดย i คือตัวเลขของ stash order ซึ่ง stash ล่าสุดจะไล่จากน้อยไปมาก เช่น stash@{0} คือ stash ที่ถูกเพิ่มล่าสุด

เพียงเท่านี้ก็จะสามารถจัดการกับ change ที่เราต้องการ แต่ยังไม่อยาก commit ได้แล้ว

git squash

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

เราจะสังเกตุได้ว่า มี commits 3 ครั้งคือ

init squash
set up init config in squash.txt
modify config in squash.txt

ซึ่ง messages ทั้ง 3 ครั้งนี้ รวมถึงตัว source code เองมีความใกล้เคียงกันมาก หากเราทำงานในทีมขนาดใหญ่ การทำให้ commit history มีความกระชับและง่ายต่อการติดตาม เป็นเรื่องที่สำคัญอย่างหลีกเลี่ยงไม่ได้

และ git squash จะเข้ามาแก้ปัญหาข้างต้นครับ โดยปกติการทำกิจ squash ทักจะใช้คู่กับ git rebase หรือ git merge โดยเราจะใช้ git rebase ในตัวอย่างนี้ เพื่อ rebase squash นั้นวิธีที่ง่ายที่สุดคือใช้ interactive mode ของ git rebase โดยใช้งานคำสั่ง

git rebase [commit hash] -i // โดย hash คือตัว commit ที่เราต้องการ rebase กลับไป

จากรูปด้านบน เราจะ squash 3 commits เข้าด้วยกัน

หลังพิมพ์คำสั่ง terminal จะเปิดหน้าจอให้เราเลือกว่าจะ squash ตัวใด และตัวใดจะเป็น hash ที่รอรับการ squash ซึ่งเราเลือก hash bdfaf72 สำหรับรองรับ commit ที่กำลังจะถูก squash

s, squash คือการเลือก commit นั้นๆ ให้ถูกมัดรวม
p, pick คือการเลือก commit นั้นๆ ให้เป็นที่รองรับ squash commit

จากนั้นตัว terminal (git) จะเปิดหน้าต่างให้เราเลือก commit message ของการ squash

หลังเสร็จสิ้นการ squash เราจะสังเกตุได้ว่า commits ทั้ง 3 ตัวนั้นหายไปและมี commit ใหม่ที่เกิดจากการ squash ขึ้นมาแทนเรียบร้อยแล้ว

git rebase

เมื่อคำสั่งที่ผ่านมา เราได้ใช้ git rebase ไปบ้างแล้ว แต่จริงๆ คำสั่ง git rebase เขาเอาไว้ทำอะไรกันแน่ละ

ลองนึกถึงกรณีที่ระหว่างการพัฒนา ทีมของเรา commit code บางอย่างเข้ามาใน branch main และไม่มีใครสังเกตุ จนกระทั่งเวลาผ่านไป พึ่งรู้ว่ามีปัญหาอยู่ใน source code และต้องการแก้อย่างเร่งด่วน ประเด็นคือ เราไม่สามารถอยู่ๆ ไปไล่ลบ commit ออกได้เลย เพราะ commit ดังกล่าวก็มีคำสั่งอื่นๆ ที่จำเป็นอยู่ด้วย

โดยเราสามารถเลือกแก้ได้หลายแบบ โดยวิธีที่กำลังจะทำก็คือ

checkout กลับไปยัง commit ที่ต้องการแก้
แตก branch ใหม่ และแก้ปัญหา

เมื่อทราบ commit ที่ต้องการแก้แล้ว ให้ทำการ checkout กลับไปที่ hash ดังกล่าว

git checkout d0ec37e

จากนั้นให้ทำการแก้สิ่งที่ต้องการและแตก branch แยกออกมา

ซึ่งเมื่อสังเกตุจะเห็นได้ว่า history ของ git นั้นมีบางส่วนหายไป (อิงจากรูปด้านบน) คือ bd3b066 และ eebae51 ซึ่งกรณีนี้นั้น

หากเรา merge main branch ทันที สิ่งที่เกิดขึ้นคือ ตัว history ของเราใน branch นี้จะหายไป (ซึ่งนำไปสู่การตาม track ที่ยากขึ้น)

แต่หากเราใช้ git rebase สิ่งที่เกิดขึ้นคือ git จะนำ history ของ change มาต่อส่วนหัวของ branch ที่เราต้องการ rebase ทำให้ history ไม่หายไป (และตาม track ง่ายขึ้น)

โดยเราสามารถพิมพ์คำสั่ง

git rebase [target branch name] [current branch]

git rebase main fixed-critical-001

และหากเรา git log --oneline อีกครั้ง เราจะพบว่า history ที่หายไปถูกนำมารวมกลับใน branch ใหม่แล้ว

เราจะใช้ SSH กับ Github ได้ยังไงบ้าง

(James) Kanin Kearpimy — Sun, 06 Feb 2022 08:50:01 +0000

การเข้ารหัสข้อมูลไม่ใช่เรื่องใหม่ แต่มีมานานมากแล้ว ในสมัยสมัครสงครามโลกครั้งที่ 2 นั้น นาซีเยอรมันได้ประดิษฐ์เครื่องสำหรับเข้ารหัสสื่อสารชื่อ Enigma ซึ่งในตอนท้ายถูกฝั่งอังกฤษถอดรหัสได้ด้วยการใช้เครื่อง Turing Machine อันเป็นต้นแบบคอมพิวเตอร์ยุคปัจจุบัน

ในปัจจุบันการเข้ารหัสใช้กันอย่างแพร่หลายในวงการคอมพิวเตอร์ โดยเราจะเรียกว่าการสร้างความปลอดภัยภายในการสื่อสารระหว่างกันว่า Cryptography ซึ่ง secure shell (ssh) ก็ถือเป็นหนึ่งในการทำ Cryptography อย่างหนึ่งเช่นกัน แต่มันจะทำอะไรได้บ้างนั้น เรามาลองดูกันครับ

Secure Shell and Client-Server

ก่อนเราจะเข้าใจ Secure Shell เรามาทวนเรื่อง Client-Server กันซักหน่อยก่อน

การทำงานของ Client-Server นั้นจะมี client ขอส่ง request message เข้าหา server เพื่อทำการ manipulate บางสิ่ง จากนั้น return message response กลับไปให้ client เพื่อใช้งานต่อ ซึ่งจุดสังเกตุคือ หากว่ามีคนสามารถดักเส้นการส่ง message ดังกล่าวได้ แล้วแทรก message เพื่อโจมตี server หรือ client ระหว่างการขนส่ง (communication) ก็จะสร้างความเสียหายได้

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

การทำ secure shell (ssh) เป็นการสร้างกุญแจ (key) รูปแบบ asymmetric key โดยจะมี

public key: ที่ถูกแชร์ให้กับทุกคนที่ต้องการจะระบุตัวตนของข้อความ (verify)
private key: จะถูกเก็บเอาไว้กับผู้ส่งข้อความเท่านั้น เพื่อทำการเข้ารหัส

SSH with Github

โดยการประยุกต์ใช้ ssh ที่ชัดเจนที่สุดคือการระบุตัวตนในการเข้าถึง server เช่น การ login เข้า server ผ่าน client เพื่อส่งข้อมูล ส่งไฟล์ หรือแม้แต่การ remote control

การใช้งาน git นั้นสามารถใช้ ssh เพื่อเพิ่มความปลอดภัยในการทำงานร่วมกันภายในทีมได้ ในทางปฏิบัติแล้วการใช้ ssh จะทำให้เราเข้าถึง remote server บน git ได้โดยไม่ต้องให้ username หรือ personal access token ทุกครั้ง เพราะข้อมูลเหล่านั้นถูกเก็บไว้ใน ssh key-pair หมดแล้ว

การตั้งค่า ssh และการใช้งานกับ github

เปิด Terminal และสร้าง ssh key-pair (public & private) ด้วยคำสั่ง ssh-keygen -t [algorithm] -C [comment message]

จากนั้นให้ระบุ path และชื่อไฟล์ที่ต้องการสร้าง รวมถึง password

ทำการนำ key-pair สร้างเป็น default ใน ssh config ของเครื่อง เพื่อที่ทุก ครั้งที่ request หา git จะใช้ key-pair นี้ โดยให้ใช้คำสั่งสร้าง config ใน folder .ssh ที่ root directory.

vim ~/.ssh/config

จากนั้นใส่ config ตามด้านล่างลงไปและบันทึกการเปลี่ยนแปลง

เพิ่ม public key ลงใน github account ทำการคัดลอกค่า public key เอาไว้

จากนั้นเปิด setting ของ github account และ copy ค่า public key ลงไปและบันทึก

ทดสอบความถูกต้องด้วยการลองพยายาม secure shell เข้าที่ git remote server ด้วยคำสั่ง ssh -T git@github.com หากขึ้นผลลัพท์ที่ถูกต้องจะเป็นอย่างรูปด้านล่าง

สรุป

การทำ secure shell เป็นการเพิ่มความปลอดภัยให้กับการส่งข้อมูลผ่านเครือข่าย โดยใน github เราสามารถใช้งาน ssh key-pair สำหรับการยืนยันตัวตนเพื่อทำงานร่วมกันภายใน github ได้

จริงๆ แล้วการทำ Cryptography ไม่ได้จำกัดเฉพาะ client-server หรือการส่งข้อมูลเพียงเท่านั้น แต่ยังสามารถใช้สำหรับงานอื่น อาทิเช่นการสร้าง transaction ใน blockchain ได้อีกด้วย ซึ่งจะเป็นอย่างไร เรามาติดตามกันต่อในบทความต่อๆ ไปครับ

Version Control คืออะไรนะ? จากความเข้าใจของ Junior Developer

(James) Kanin Kearpimy — Fri, 21 Jan 2022 14:36:36 +0000

เคยทำงานเอกสารเพื่อส่งอาจารย์ตรวจ แล้วต้องโดนแก้กลับมากันมั้ยครับ? ซักพัก ก็โดนให้ย้อนกลับไปดูเอกสารฉบับที่ส่งไปเมื่อ 3 วันก่อน ถ้าคนที่่เก็บเอกสารเก่าๆ เอาไว้ ก็จะแบ่งเอกสารเหล่านั้นเป็นเวอร์ชั่นๆ เช่น แก้-ver1 แก้-ver2 แก้-ver[x] ไปเรื่อยๆ

สิ่งนี้เองไม่ได้เกิดกับงานเอกสารเท่านั้น แต่กับงานพัฒนาซอฟต์แวร์ด้วยเช่นกัน การพัฒนาซอฟต์แวร์ สามารถเกิดการเพิ่มเติม แก้ไข เปลี่ยนแปลงตัว Source Code อยู่ตลอดเวลา

แล้วเราจะติดตามการเปลี่ยนแปลงของ Source Code กันได้อย่างไรกัน คงจะไม่ใช่การตั้งชื่อไฟล์เป็น Version กันใช่มั้ยครับ? นั้นเป็นที่มาของคำว่า Version Control

อะไรคือ Version Control ละ?

สั้นๆ Version Control คือเครื่องมือที่ทำให้ Developer ติดตามการเปลี่ยนแปลงที่เกิดขึ้นใน Source Code ของโปรเจคได้ ซึ่งเมื่อติดตามได้ มันจึงทำให้

การทำงานระหว่างกลุ่ม Developer ทำได้ง่ายขึ้น เพราะแต่ละคนก็พัฒนาของตัวเอง เมื่อต้องการจะรวมเข้ากับ Source ตรงกลาง ก็ทำการเช็คการเปลี่ยนแปลง (Change) และขอรวม Code version ของตัวเองเข้ามา (Merge)
Developer สามารถทราบถึงประวัติการเปลี่ยนแปลง (History Change) และดึง Source Code ตามประวัติกลับมา หากว่า version ปัจจุบันทำให้โปรเจคเสียหายหรือผิดพลาด
ทราบว่าใครเป็นผู้สร้างการเปลี่ยนแปลงภายใน source code ทำให้หาผู้เกี่ยวข้องได้ และสามารถช่วยกันแก้ไขปัญหาได้รวดเร็ว (Ideally)
Repository หมายถึงโปรเจคหรือที่เก็บ Source Code เอาไว้เป็นที่เดียวกัน โดยใน หนึ่ง Repository อาจจะมี Repository ย่อย (Mono-Repository) เอาไว้อีกด้วย

Version Control จะแบ่งได้ออกเป็น 2 รูปแบบใหญ่ ได้แก่

Centralized Version Control: คือการที่ Repository ถูกรวบรวมไว้ที่ server กลาง ดังนั้นการเปลี่ยนแปลงทั้งหมดจะต้องเชื่อมโยงกับ Repository บน Server เป็นหลัก ตัวอย่างเครื่องมือเช่น Subversion
Distributed Version Control: คือการที่ Repository สามารถถูกคัดลอก (copy) ลงไปแต่ละเครื่องของ Developer ได้ และคนอื่นๆ จะไม่สามารถเข้าถึง version ต่างๆ เหล่านั้นได้ จนกว่าเราจะทำการส่ง version ของเราขึ้นไปที่ Repository กลาง เครื่องมือเช่น Git

*โดยในบทความนี้ เราจะพูดถึง Distributed VC ด้วยเครื่องมือ Git เป็นหลัก

Git คืออะไร?

Git คือ Open Source สำหรับจัดการ ติดตาม การเปลี่ยนแปลงภายใน Project ตั้งแต่ขนาดเล็ก ไปจนถึงขนาดใหญ่ โดย Git จะสามารถติดตามการเปลี่ยนแปลงแบ่งเป็น Version ตามรูปด้านล่าง

โดยปกติในหนึ่งโปรเจคจะมีหลาย Features โดยเราจะนิยมเรียก features เหล่านี้ว่า branch โดยในแต่ละ branch ก็จะมี version ที่เกิดจากการพัฒนาปรับปรุงขึ้นมา

เราจะเรียก feature หลักของโปรเจคว่า master หรือ main branch โดยจะทำหน้าที่เป็นตัวหลักในการทำงาน อ้างอิง รวมไปถึงการนำไปใช้งาน (on production) ต่างๆ อีกด้วย

Local & Remote Repository
ปกตินั้น การพัฒนาโปรเจค เราจะมีตัวเก็บ Repository หลักเอาไว้ เพื่อกระจาย อ้างอิง ให้ทุกคนภายในทีมพัฒนา เราจะเรียกว่า Remote Repository ซึ่ง repository ที่ถูกดึง (pull) ลงไปยังเครื่องของคนภายในทีมเพื่อพัฒนาต่อนั้น จะถูกเรียกว่า Local Repository

ซึ่งแต่ละคนภายในทีม จะยังไม่สามารถเห็นการเปลี่ยนแปลงของสมาชิกได้ หากการเปลี่ยนแปลง (Change) ยังอยู่ที่เครื่อง (Local) ของแต่ละคน โดยเมื่อต้องการเพิ่มเติม source code ให้โปรเจคหลัก เพื่อให้ทุกคนเห็นหรือนำไปใช้ จะต้องทำการส่ง (push) ขึ้นมาที่ Remote Repository ต่อไป

คำสั่ง Git พื้นฐานและ usecase ใช้งาน

เราจะมีพูดถึงคำสั่งพื้นฐานสำหรับการใช้งาน Git ทั้งหมด 5 คำสั่ง ได้แก่ clone, add, commit, push, pull

1.git clone : คือการดึง repository จาก remote ลงมาสู่ local โดยจะมีวิธีทำได้ 2 รูปแบบหลักๆ คือ https และ ssh (จะมีการอธิบายต่อในบทความต่อๆ ไปครับ )

2.git pull : จะเป็นการดึง code version จาก remote branch ลงมาสู่ local branch เช่นกัน แต่ความแตกต่างคือ จะมีความเจาะจงไปยัง branch มากกว่า

ตัวอย่าง: เราพัฒนา shopping cart บน local branch จากนั้น เพื่อนได้อัพเดท code บางอย่างเข้า remote branch เดียวกัน เราสามารถ pull code ลงมาเพื่อตรวจสอบหรือใช้งานได้

3.git add : เราต้องเข้าใจก่อนว่า ในการพัฒนา source code บน local branch นั้น เวลาที่มีการเปลี่ยนแปลง ตัว git จะทำงานติดตาม (track) และหากว่าเราต้องการที่จะเก็บการเปลี่ยนแปลงนั้นไว้ แต่ยังไม่แน่ใจว่าจะอัพเดทเวอร์ชั่นใหม่มั้ย เราจะเรียกพื้นที่ตรงนั้นว่า stage change โดยการใช้ git add หมายถึงการนำไฟล์ที่เปลี่ยนแปลงเข้าสู่ stage change นั้นเอง

4.git commit : จะเป็นคำสั่งที่มักใช้ต่อกับ git add กล่าวคือ เมื่อเรามั่นใจแล้วว่า ต้องการให้การเปลี่ยนแปลงใน source code นั้นอัพเดทเวอร์ชั่นแน่ๆ เราจะทำการย้าย การเปลี่ยนแปลง (change) จาก stange change เข้าสู่ branch history ด้วยการ commit

5.git push : คือการนำการเปลี่ยนแปลงที่อยู่ใน branch history บน local branch ขึ้นสู่ remote branch เพื่อให้สมาชิกในทีมได้ตรวจสอบหรือนำไปใช้งานต่อไป

สรุป

Version Control นั้นสามารถช่วยให้การติดตามการเปลี่ยนแปลงของ source กcode ภายในโปรเจคนั้นทำได้ง่าย ซึ่งก่อให้เกิดการพัฒนาเป็นทีมได้อย่างเป็นระบบ เกิดขึ้นพร้อมกันได้ ตั้งแต่โปรเจคขนาดเล็ก - ขนาดใหญ่ได้

ในบทความต่อไป เราจะมาลงมือติดตั้ง git โดยใช้ github เป็น remote repository และทดลองใช้งานคำสั่งต่างๆ จากด้านบน และที่มีเพิ่มเติมกันครับ :)

อ้างอิงและขอบคุณ (Appreciate & Reference)

[KubeOps Academy] Palindrome with Rust ทำยังไงนะ!?

(James) Kanin Kearpimy — Mon, 17 Jan 2022 13:02:57 +0000

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

อะไรคือ palindrome?

Palindrome คือ ประโยคหรือคำ ทั้งในเชิงอักษร (ABC, abc) ตัวเลข (123321) และตัวอักขระ ที่เรียงต่อกันแล้วสามารถอ่านแล้วได้ความหมายเดิม ทั้งจากหลังไปหน้า และหน้าไปหลัง

ในทางคอมพิวเตอร์ ได้มีการทำ Palindrome มาใช้สำหรับการบีบอัด (Compression) DNA อีกด้วย อ่านต่อ
Why rust?

เราจะแก้โจทย์ Palindrome ได้อย่างไร?

การแก้ Palindrome นั้นมีวิธีคิดได้หลากหลายในทางกระบวนการวิธี เช่น ตัดครึ่งคำ จากนั้นนำฝั่งซ้าย - ขวา มาทาบกัน โดยบทความนี้จะนำวิธีการ ไล่คำจากด้านหลังและด้านหน้าทีละตัวอักษรพร้อมๆ กัน เพื่อเปรียบเทียบว่าเป็น Palindrome หรือป่าว

แนวคิด

จากภาพด้านบน ให้ลองคิดว่า ให้

เรานำปากกา 2 ด้านมาวางไว้ที่ปลายสุดของทั้งสองฝั่ง
จากนั้นให้เปรียบเทียบตัวอักษรที่ปลายของปากกาทั้งสอง
เมื่อเปรียบเทียบแล้ว ให้ขยับปากกาเข้าหากัน
เปรียบเทียบ ทำเช่นนี้ไปเรื่อยๆ 5.1 หากรอบใดที่ปลายตัวอักษรปลายปากกาไม่เท่ากัน สรุปได้ว่าคำนั้น ไม่ใช่ Palindrome 5.2 หากว่าเปรียบเทียบหมดแล้ว ตัวอักษรทุกตัวเท่านั้น สรุปได้ว่า คำนั้นคือ Palindrome

ลงมือเขียน Code กัน!!

โดยเราจะใช้ ภาษา Rust ซึ่งเป็นภาษา System Programming หนึ่งที่ค่อนข้างฝึกให้เราคิดถึง process เบื้องหลังการทำงานของ Computer

Import การจัดการ input/output ของภาษา Rust

use std::io::stdin;

ภายใน Function main ซึ่งถือเป็น function หลักของโปรแกรม เราจะแสดงข้อความออกทาง terminal ให้ผู้ใช้งานเข้าใจการทำงานคร่าวๆ และถ้าพร้อมให้ผู้ใช้พิมพ์คำที่อยากเช็ค Palindrome ลงมา

println!("Palindrome.");
    println!("If you want to exit. please type ==> :q\n");
    loop {
        let mut pre_string = String::new();
        println!("Please input your thing ==>");
        stdin().read_line(&mut pre_string).expect("Please put correct string.");

        let string: &str = &pre_string.trim().replace(" ", "");
        if string.to_uppercase() == END_GAME {
            println!("==========");
            println!("THANK YOU.");
            println!("==========");
            break;
        }
        if string == "" {
            println!("Please put correct string!\n");
            continue;
        }

        let is_palindrome: bool = check_palindrom(string);

        println!("is {} Palindrome? : {}\n", string, match is_palindrome { true => "YES", false => "NO" });
    }

โดยจะทำการ loop วนจนกว่าผู้ใช้งานพิมพ์คำว่า "END" จึงจะหยุดการทำงาน

โดยขออธิบายการทำงานของ check_palindrome function สำหรับเช็ค palindrome ตามด้านล่าง

fn check_palindrom(string: &str) -> bool {
    let mut is_palindrome: bool = true;
    for (c1, c2) in string.chars().zip(string.chars().rev()) {
        if c1 != c2 {
            is_palindrome = false;
        }
    }
    return is_palindrome;
}

วิธีการทำงานจะเหมือนแนวคิดด้านบน นั้นคือสร้าง loop ทั้งคำ จากนั้นให้มี c1 และ c2 โดยที่ c1 ชี้ที่ด้านซ้ายสุด และ c2 ชี้ด้านขวาสุด โดยใน ภาษา rust นั้นการทำ indexing ใน string จะมีความท้าทาย ทางผู้เขียนจึงใช้วิธีสร้าง string ขึ้นมา 2 ตัว โดย ชุดแรกเป็นคำเดิม แต่ ชุดที่สอง จะเป็นคำที่กลับด้าน จากนั้นให้ c1 loop ผ่านชุดแรก และ c2 loop ผ่านชุดที่สอง

และหากว่าทุกคำเท่ากัน จะถือว่าคำนั้นเป็น palindrome ด้วยการ return true ถือเป็นการจบกระบวนการเช็ค Palindrome

สรุปและต่อยอด

โดยจริงแล้ว Palindrome จะเหมาะกับการแก้ปัญหาสิ่งที่เป็น sequence ต่อกันและสามารถ map เข้าหากันได้จากด้านหน้าและด้านหลัง ซึ่งวิธีการเช็ค Palindrome ในบทความนี้ต้องการนำเสนอ แนวคิดการเช็คแบบไล่ หัว-ท้าย โดยไม่ต้องตัดคำตรงกลางทิ้ง ทุกคนคิดเห็นอย่างไรมาแบ่งปันกันได้นะครับ

KubeOps Academy คือ Long-Term Program ที่อยากสร้าง Cloud Native จาก Zero to Workforce. หากสนใจกิจกรรมอื่นๆ ที่น่าสนใจ ของ Community สามารถติดตามต่อได้ที่ KubeOps Skills ครับ

Short-Course Web-Development for none-technical people.

(James) Kanin Kearpimy — Tue, 29 Jun 2021 08:41:00 +0000

Short-Course Web-Development for none-technical people.

When we talk about web development, we might consider complex structure be-hide the scene. A lot of technical pieces of stuff like algorithms, mathematic, complex coding patterns. Yes but not at all, What if you have got challenges to incubate non-technical people for web development within 3 weeks! What do you prefer these people to learn? What do you expect them to grab out? and what does web development impact their career or daily life?

I’m going to explain and share what I and my small study group, none-technical background, got through 3 weeks of web development.

My student background

There are 5 students in my short class, Everyone has different but incredibly mixed and matched for courses.

3 of them are Project Manager who, in daily life, work on tracking, planning, and negotiate with the technical team and customer.
Another one is UX/UI Designer who experienced web-design
The rest is R&D Researcher who often involves in bringing new technology and innovation to the company.

Course commitment

This offline course occurred every weekend for 3–5 hours (2 days per week), lasted 3 weeks. Every section is divided into lectures, mini-practical projects, and mentoring sessions every week.

Outline as listed below:

Fundamental & Tool Installation

Visual Studio Code Setup
Version Control Git
Chrome Dev Tools
HTML & CSS Fundamental
Javascript Fundamental

Grid & CSS Framework

Grid System
Bootstrap
Element & Component

RESTful API and Javascript for Application

POSTMAN
Basic Network
RESTful API
JS for Application

Practical Mini-Project

Fundamental & Tool Installation

We covered tools and foundations for a web developer. Breaking them down into 2 groups:

1. Tools: (Editor, Version Control, Debugging)

Visual Studio Code: A text editor with huge supportive extensions for the developer.
Git with Github: Version Control.
Chrome Dev Tools: Debugging tool that covered necessary JS console components, HTML and CSS inspector, Network tracking, and Browser Storage.

Lesson Learn 1: The most impression for my students is element inspector (not surprised) Because they can inspect element on page and grab style and structure to modify and re-create for themselves.
Lesson Learn 2: Network tracking is quite boring at first but when it come to API session. My students really thank this tools as much. So, I prefer to underscore on how to read Request & Response while browser working on page.

2. Basic Foundation: (HTML, CSS, Javascript)

This was my first challenge because of the limitation of time, background, and complex content.

HTML (Hypertext Markup Language):

I tried to spread all tags out and teach only necessary tags and detail. Following the above picture. My student had learned 80% must-use tags of all web development in my experiences. We spent time on DIV tag first then explain it to others.

Lesson Learn 1: HTML tag is a “blank tag with build-in style”. for example, p and h1 is likely to be the same if we cut off all css style. So, We can tell them concept, and let them learn which tag to apply on project building.
Lesson Learn 2: Repeat word is quite helpful. My student got confused when I interchange between “tag attribute and tag property”. So, I changed my style to choose only one of them to express what we learn. It could reduce confusion well.

CSS (Cascading Style Sheets):

Actually, the selector is quite a challenge for the new learner if they can have the right vision on how to select elements, Other would be CSS styling. I break styles into 2 + 1 groups:

Dimension: covering all pieces of stuff that could make element change their dimension and shape such as width, height, margin, padding, and border
Position: All kinds of stuff that relate to positioning were explained here: float, display, flex, grid.
Font: I added this section because a lot of projects need font decoration to be complete.

JS (Javascript):

HTML and CSS are intuitively understandable but Javascript. JS is quite a bit different. It is a programming language and needs a logical concept. My students often failed here. I’ve noticed that if one can “see” a pattern on it, can solve it. So, I change my teaching style. instead of looking at Javascript like computers do. I tried to teach my student to look at it as “Human” do.

For example: to add an event listener to the button.

Computer:

Select button
Add function to the button
if a button clicked then …..

Human:

Move your mouse to the button
Left-click on the mouse
the button is clicked.
Your brain imagines that what would happen

After my student can look like humans do then I teach them to **map Human to Computer. **As consequence, My student can understand how to work with javascript better (but they took more time to analyze the whole logic).

Grid & CSS Framework:

After the first week, my students struggled with how to position **HTML element. They mentioned **not precise shape and position because of margin and padding. That was my intention. Because we were going to jump in the currently magical positioning style; Grid system.

Though We covered all required modern website should have: Responsive, Mobile Friendly, Reusable Component. Concentrating on Grid System was key to build up my student project.

Lesson Learn 1: Precisely positioning by pure margin and padding is really challenges for new learner. But If they did not experiences how hard it was. They would not know how useful of Grid.
Lesson Learn 2: Build grid from scratch was quite challenge as well. So, I modified content to cover all concept of grid and let my student implement it by Bootstrap Grid system instead.

Grid is about how we look at elements and break them down into rows and columns. So, We spent 50% of the lesson on analyzing current elements on popular websites. How to shape it as Grid: row and column.

Additionally, We tried to cover some elements and components of Bootstrap. So, They can utilize it instantly for mini-project.

RESTful API

In final lesson (before the final project) is about how UI (Frontend) communicates with a system (Backend). This is the most exciting because we try to track how popular websites send requests and responses (by chrome dev tool: network). My student learned how to use POSTMAN to send requests to the server.

What I designed is to build up backend API for event registration. My student has to request data from the first to last API sequentially. They must get unique data from one to use in another API.

Lesson Learn 1: Everything about data is “Key and Value” in different form. JSON is Key:Value. On the other hand, Query string is key=value. So, If my students can understand this concept, they can map it to other type of sending data via API in future.

Big Lesson Learn

It is hard to explain how computers work by computer language. If your audience is normal people. So, Use normal language. Giving examples and compare them with things relating to their experiences is useful.
When it comes to HTML and CSS. They are what we can “see and touch”. But for Javascript, it, on the other hand, is quite a blinding area. SUDO Code could help here but have to be related to the audience's experiences.
Programming language likely relies on muscle memory. Explain the concept, give the example and let do a project on and on that could strengthen those muscles.