บทความนี้มาแบ่งปัน เครื่องมือที่ใช้ทำงานพัฒนาเว็บไซต์ ที่ได้เก็บรวบรวมรายการ 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 ตัวนี้เอาไว้ Coding เล่นเดียวกันแต่จะเปิดแบบเฉพาะกิจไว้วาง Code ชั่วคราวหรือใช้พวก Regular Expression เพื่อใช้จัดข้อมูลปริมาณเยอะๆ จะไม่ได้สร้าง Site Project แบบ Sublime Text
  • 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 ตรงนี้สำคัญในเรื่องการทำงาน เพราะเป็นคนชอบวางแผนไว้ว่าแต่ละวันจะทำอะไร ดังนั้น Calendar จะช่วยได้มากตรงส่วนนี้
  • Google Drive ใช้ทุกอย่างงานเอกสารต่างๆ
  • Notes (ติดมากับ Mac) ไว้สำหรับจด Note ต่างๆและเก็บไว้บน iCloud
  • Evernote ไว้สำหรับจด Note เช่นกันแต่อันนี้จะจดไว้เปิดใช้ได้ทุกที่ เพราะตัว Evernote เป็น Cloud ซึ่งตัวผมเองใช้มือถือ Android ดังนั้นจึงใช้ App Evernote มาใช้งานได้
  • Notion ไว้เก็บ Knowledge เกี่ยวกับงาน Development
  • LINE ไว้สำหรับ Chat คุยงานและคุยทั่วไปซึ่งจะเปิดๆปิดๆเพราะบางทีทำงานใช่สมาธิสูงไม่อยากให้อะไรมารบกวนช่วงเวลานั้น
  • TeamViewer สำหรับ Remote เข้า Office บางทีเครื่องของพนักงานมีปัญหาก็ใช้เจ้านี่ละ
  • Dropbox เป็น Cloud ไว้เก็บไฟล์เอกสารต่างๆ
  • Be focused เป็นตัวจับเวลาทำงานใช้หลักการ Pomodoro เพื่อเพิ่ม Productivity
  • Recordit ไว้บันทึกหน้าจอ สามารถดูออนไลน์ หรือแชร์เป็นไฟล์ Gif ได้
  • Trello (ใช้ร่วมกับ Goodgantt), Toggl.com, Teamgantt.com, Dropbox Paper ไว้จัดการ Task งาน และทำ Gantt Chart
  • SimpleMind Lite ไว้ทำ Mindmap
• Utilities
  • Dictionary (ติดมากับ Mac) แต่ภาษาไทยเราต้องไป Download มาติดตั้งเพิ่มเติม ซึ่งใช้งานได้ดีและหากไม่รู้ศัพท์คำไหนเช่นเปิดเว็บก็จิ้มเลือกศัพท์ที่ต้องการ สำหรับผมเป็น MacBook air ก็จะใช้ 3 นิ้วจิ้มมันก็จะมี popup ความหมายของคำนั้นออกมาเลย
  • Notepad เอาไว้เปิด Text File ต่างๆ และไว้เป็น Temp เวลาจะจดอะไรชั่วคราวซึ่งส่วนใหญ่จะไม่ได้ Save ไว้
  • Grammarly ไว้ตรวจแกรมม่าภาษาอังกฤษ
  • New Text File Menu Free ไว้คลิกขวาสร้างไฟล์.txt เปล่า
  • Pocket ไว้สำหรับ Bookmark  ลิงค์เว็บที่จะเอาไว้อ่านทีหลังข้อดีคือเปิดใช้กับ iPhone และ Android ได้ด้วย
  • Feedly สำหรับ Feed ข่าวติดตาม Blog ต่างๆ
  • Keka ไว้แตกและบีบไฟล์ Zip
  • Affinity Photo, Pixelmator Pro, Photoscape Xสำหรับจัดการภาพที่ถ่ายมา เช่น ตกแต่ง หรือ Resize เล็กน้อยๆ
  • Adobe Lightroom‎ ไว้แต่งภาพถ่าย
  • Magnet ไว้จัดหน้าต่างที่ใช้งาน เหมาะสำหรับคนเปิด App หลายตัว

Resources

• Development
  • https://miragejs.com/, https://github.com/typicode/json-server, https://fakemyapi.com/ ทำ API mocking
  • https://carbon.now.sh/ สร้างรูป Screenshot จาก code
  • https://ihateregex.io/, https://regex101.com/ตัวช่วยสร้าง regular expression
  • https://crontab.guru/ สร้าง crontab
  • https://csslayout.io/ สร้าง CSS Layout แบบด่วนๆ
  • https://webgradients.com/, https://cssgradient.io/ สร้าง Color Gradients
  • https://www.gradientmagic.com/ สร้าง Color Gradients หลายรูปแบบ
  • https://mycolor.space/, https://colorsinspo.com/ Color Palettes
  • https://brumm.af/shadows สร้าง CSS Shadow
  • https://9elements.github.io/fancy-border-radius/ สร้าง CSS แบบดัดรูปทรง
  • https://keyframes.app/animate/ CSS Animation
  • https://unlayer.com/templates HTML Email Templates 
  • https://lewdev.github.io/apps/meta-tag-gen/ Meta Tag Generator
  • https://htmlhead.dev/  Guide to HTML5 <head> elements
  • https://uxarchive.com ตัวอย่าง UX/UI Flow
  • https://tailblocks.cc/ Tailwind CSS blocks
  • https://omatsuri.app/ Frontend Tools
  • https://free-for.dev/ Free for Dev รวมของฟรีสำหรับนักพัฒนา
• Website Performance & Speed Testing Tools
  • Page Speed Insights
  • Test My Site
  • GTmetrix
  • Pingdom
  • Measure
• Design
  • https://www.canva.com/, Adobe Spark สร้าง Logo, Artwork
  • https://pixabay.com/, https://www.freepik.com/, https://icons8.com/, https://remixicon.com/ ขาย Photos, Illustrations, Vectors, Icons
  • https://www.freeimages.com/, https://unsplash.com/, https://picjumbo.com/ ฟรีรูปภาพ
  • https://www.awwwards.com, https://dribbble.com/, https://www.behance.net/, https://www.pinterest.com/, https://webframe.xyz web design inspiration
  • https://generated.photos/faces สร้างรูปใบหน้าคนจาก AI ไว้ใช้ Mockup เว็บ
  • https://getwaves.io/ สร้าง SVG คลื่น
  • https://www.blobmaker.app/ สร้าง SVG รูปทรงอิสระ
  • https://skeletonreact.com/ สร้าง Content Loading
  • https://epic-spinners.epicmax.co/ Loading Spinner สวยๆ
  • https://jpeg.rocks/, https://bulkresizephotos.com/en Resize, Crop, ใส่ลายน้ำรูป 
  • Design-resources-for-developers
• Fonts / Icons
  • https://www.iconfinder.com/
  • https://www.flaticon.com/
  • https://github.com/omise/banks-logo
  • http://fontawesome.io/icons/
  • http://xtoolkit.github.io/Micon/icons/
  • https://fonts.google.com/icons
  • Sarabun New, Anakotmai, Kanit  Font ที่ใช้ 
• Other
  • Goodemailcopy ข้อความในอีเมล์ที่บริษัทชั้นนำนิยมใช้
  • https://tldrlegal.com/ ดูลิขสิทธิ์ใช้ภาษาที่เข้าใจง่าย 

ก็หวังว่าจะมีประโยชน์ครับ

• Facebook
• Twitter
• Line