เครื่องมือที่ใช้พัฒนาเว็บไซต์
บทความนี้มาแบ่งปัน เครื่องมือที่ใช้ทำงานพัฒนาเว็บไซต์ ที่ได้เก็บรวบรวมรายการ 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
- 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
- Other
- Goodemailcopy ข้อความในอีเมล์ที่บริษัทชั้นนำนิยมใช้
- https://tldrlegal.com/ ดูลิขสิทธิ์ใช้ภาษาที่เข้าใจง่าย
ก็หวังว่าจะมีประโยชน์ครับ
