บทความนี้มาแบ่งปัน เครื่องมือที่ใช้ทำงานพัฒนาเว็บไซต์ ที่ได้เก็บรวบรวมรายการ Software รวมถึง Resources ต่างๆ ที่ใช้ในการทำงานเป็นประจำ แต่ก็มีบางตัวที่ไม่ได้เกี่ยวข้องโดยตรงแต่ใส่เข้ามาด้วยเพราะน่าจะมีประโยชน์ ตามรายการดังนี้ครับ
Software
Development
- VS Code – Code Editor สำหรับใช้เขียนโปรแกรมเป็นหลัก ส่วน Extension เสริมที่ใช้บ่อยรวมไว้ที่นี่
- Vim — Editor สำหรับไว้ใช้เวลาต้องแก้ไฟล์ใน Terminal
- iTerm2 — ใช้เป็นตัวหลัก แต่ตัวไหน Run ค้างไว้ก็จะใช้ Terminal เดิมของ Mac
- เพิ่มความสามารถด้วย Oh My Zsh + git plugin + Powerlevel10k theme
- Chrome, Firefox, Safari, Edge — ไว้สำหรับเปิดเว็บ แต่ถ้าเอาไว้ Dev หลักๆจะใช้ Firefox และ Chrome เพราะมี Developer Tool ให้ใช้ได้ดีอยู่
- TextWrangler — เอาไว้วาง Code ชั่วคราวหรือใช้พวก Regular Expression เพื่อจัดข้อมูลปริมาณเยอะๆ
- FileZilla — ไว้สำหรับใช้งาน FTP upload ไฟล์เว็บขึ้น Server
- Postman — สำหรับ Testing API
- Git — ใช้ Command ร่วมกับ Bitbucket และ Source Tree เป็นหลัก
- Sequel Pro — สำหรับจัดการ MySQL
- Docker — ไว้จำลอง Environment พัฒนาโปรแกรม
- Adobe XD, Figma — ไว้ออกแบบ UI Mockup รวมถึง Prototyping
- Tunnelblick — ไว้ใช้งาน VPN
- Codepen, CodeSandbox — ไว้เขียน code ออนไลน์ บางครั้งต้องการทดสอบไอเดีย
- Robo 3T — GUI และ IDE สำหรับ MongoDB
- Pikka – Color Picker — ไว้ดูดสีบนหน้าจอ
- Responsively — ใช้ Preview เว็บในขนาดหน้าจอต่างๆ
Business
- Mail (ติดมากับ Mac) — อีเมล์ทุกอย่างผมจะจัดการจากที่นี่ รวมไว้ที่เดียวสะดวกดี
- Calendar (ติดมากับ Mac) — ผูกเข้ากับ Google Calendar เพื่อใช้รวมกับมือถือ Android ช่วยในการวางแผนแต่ละวัน
- Google Drive — ใช้ทุกอย่างงานเอกสารต่างๆ
- Notes (ติดมากับ Mac) — ไว้สำหรับจด Note ต่างๆและเก็บไว้บน iCloud
- Evernote — ไว้สำหรับจด Note เปิดใช้ได้ทุกที่ เพราะเป็น Cloud ใช้ร่วมกับ App บนมือถือได้
- Notion — ไว้เก็บ Knowledge เกี่ยวกับงาน Development
- LINE — ไว้สำหรับ Chat คุยงานและคุยทั่วไป
- TeamViewer — สำหรับ Remote เข้า Office บางทีเครื่องของพนักงานมีปัญหาก็ใช้เจ้านี่
- Dropbox — เป็น Cloud ไว้เก็บไฟล์เอกสารต่างๆ
- Be focused — ตัวจับเวลาทำงานใช้หลักการ Pomodoro เพื่อเพิ่ม Productivity
- Recordit — ไว้บันทึกหน้าจอ สามารถดูออนไลน์ หรือแชร์เป็นไฟล์ Gif ได้
- Trello (ร่วมกับ Goodgantt), Toggl.com, Teamgantt.com — ไว้จัดการ Task งาน และทำ Gantt Chart
- SimpleMind Lite — ไว้ทำ Mindmap
Utilities
- Dictionary (ติดมากับ Mac) — ต้องดาวน์โหลดภาษาไทยมาติดตั้งเพิ่มเติม ใช้งานได้ดีมาก
- Grammarly — ไว้ตรวจแกรมม่าภาษาอังกฤษ
- Pocket — ไว้สำหรับ Bookmark ลิงค์เว็บที่จะเอาไว้อ่านทีหลัง ข้อดีคือเปิดใช้กับ iPhone และ Android ได้ด้วย
- Feedly — สำหรับ Feed ข่าวติดตาม Blog ต่างๆ
- Keka — ไว้แตกและบีบไฟล์ Zip
- Affinity Photo, Pixelmator Pro, Photoscape X — สำหรับจัดการภาพ เช่น ตกแต่ง หรือ Resize
- Adobe Lightroom — ไว้แต่งภาพถ่าย
- Magnet — ไว้จัดหน้าต่างที่ใช้งาน เหมาะสำหรับคนเปิด App หลายตัว
Resources
Development
- miragejs.com, json-server, fakemyapi.com — ทำ API mocking
- carbon.now.sh — สร้างรูป Screenshot จาก code
- ihateregex.io, regex101.com — ตัวช่วยสร้าง Regular Expression
- crontab.guru — สร้าง Crontab
- csslayout.io — สร้าง CSS Layout แบบด่วนๆ
- webgradients.com, cssgradient.io — สร้าง Color Gradients
- gradientmagic.com — สร้าง Color Gradients หลายรูปแบบ
- mycolor.space, colorsinspo.com — Color Palettes
- brumm.af/shadows — สร้าง CSS Shadow
- 9elements.github.io/fancy-border-radius — สร้าง CSS แบบดัดรูปทรง
- keyframes.app/animate — CSS Animation
- htmlhead.dev — Guide to HTML5
<head>elements - uxarchive.com — ตัวอย่าง UX/UI Flow
- tailblocks.cc — Tailwind CSS blocks
- omatsuri.app — Frontend Tools
- free-for.dev — รวมของฟรีสำหรับนักพัฒนา
Website Performance & Speed Testing
Design
- canva.com, Adobe Spark — สร้าง Logo, Artwork
- pixabay.com, freepik.com, icons8.com, remixicon.com — Photos, Illustrations, Vectors, Icons
- freeimages.com, unsplash.com, picjumbo.com — รูปภาพฟรี
- awwwards.com, dribbble.com, behance.net, webframe.xyz — Web Design Inspiration
- generated.photos/faces — สร้างรูปใบหน้าคนจาก AI ไว้ใช้ Mockup เว็บ
- getwaves.io — สร้าง SVG คลื่น
- blobmaker.app — สร้าง SVG รูปทรงอิสระ
- skeletonreact.com — สร้าง Content Loading
- epic-spinners.epicmax.co — Loading Spinner สวยๆ
- jpeg.rocks, bulkresizephotos.com — Resize, Crop, ใส่ลายน้ำรูป
Fonts & Icons
- iconfinder.com
- flaticon.com
- fontawesome.io
- fonts.google.com/icons
- Font ที่ใช้: Sarabun New, Anakotmai, Kanit
Other
- Goodemailcopy — ข้อความในอีเมล์ที่บริษัทชั้นนำนิยมใช้
- tldrlegal.com — ดูลิขสิทธิ์ใช้ภาษาที่เข้าใจง่าย
ก็หวังว่าจะมีประโยชน์ครับ