🔥 "สาย Front-End ต้องแชร์ !!" กับสรุปรวมเครื่องมือ และ Framework ดี ๆ ที่ต้องบอกต่อสำหรับคนทำหน้าเว็บ <3
.
ต้องบอกว่าวันนี้แอดและทีมงานได้รวบรวมเครื่องมือเครื่องไม้ ที่จะทำให้งานยาก ๆ กลายเป็นงานง่าย ๆ ไว้ในที่เดียวให้แล้วว
.
⭐️ ใครที่กำลังเริ่มสาย Front-End หรือ ต้องการหาของดีรีบเข้ามาดูได้เลย สำหรับลิงก์ในการเข้าไปดาวน์โหลด / อ่าน Doc / วิธีการใช้งาน ดูด้านล่างได้เลยคร้าบผมมม ^__^
.
👩🎨เครื่องมือเด็ดที่คุณต้องแชร์ของสาย Frontend
.
📚 JavaScript Framework
.
Vue.js
https://vuejs.org/
.
Angular
https://angular.io/
.
React
https://reactjs.org/
.
Backbone.js
https://backbonejs.org/
.
🎨 CSS Framework
.
Bootstrap
https://getbootstrap.com/
.
Materialize
https://materializecss.com/about.html
.
Pure.css
https://purecss.io/
.
Bulma
https://bulma.io/
.
Semantic UI
https://semantic-ui.com/
.
📖 Library
.
sweetalert2 : สำหรับสร้าง Alert สวยๆได้ง่ายๆ
https://sweetalert2.github.io/
.
AlertifyJS : สร้าง Alert สวยๆเหมือนกัน
https://alertifyjs.com/
.
Chart.js : สำหรับสร้าง Chart แบบมี animation
https://www.chartjs.org/
.
jQuery : ใช้งาน JS และจัดการ DOM ได้ง่ายขึ้น
https://jquery.com/
.
DataTables : เปลี่ยน Table แบบเดิมๆให้ดูดีมี function ได้ง่ายๆ
http://fredsarmento.me/frontend-tools/
.
Quill editor : Text Editor สำหรับใส่ในเว็บเครื่องมือครบๆ
https://quilljs.com/
.
🧰 Developing & Debugging Tools
.
Chrome DevTools : เครื่องมือ Debug เว็บ เพียงแค่กด F12 เบราเซอร์อื่นๆก็มีเหมือนกัน
https://developers.google.com/web/tools/chrome-devtools
.
CodePen : Online Editor ที่สามารถจำลอง enviroment ที่เหมาะสมได้เขียนแล้วเห็นผลทันที
https://codepen.io/
.
WebStorm : Web Editor ที่รองรับ Framework ที่หลากหลาย
https://www.jetbrains.com/webstorm/
.
🍱 Other (Asset)
.
Google Fonts : font ฟรีสวยๆของ google
https://fonts.google.com/
.
awesome : Icon ฟรีสวยๆ
https://fontawesome.com/
.
figma : สำหรับออกแบบหน้าเว็บ จัดวางองค์ประกอบหรือแม้แต่สร้าง Prototype
https://www.figma.com/files/recent
.
Visual Inspector : extension chrome ที่ช่วยให้ตรวจสอบองค์ประกอบต่างๆของเว็บได้ค่อนข้างครบถ้วน
https://chrome.google.com/webstore/detail/visual-inspector/efaejpgmekdkcngpbghnpcmbpbngoclc
.
CSS Peeper : extension chromeอีกหนึ่งตัวที่ใช้ตรวจสอบองค์ประกอบเว็บ
https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk
.
" หรือถ้าใครเคยใช้ตัวไหนมาแล้ว สามารถมาแบ่งปันประสบการณ์ในการใช้งานใน Comment กับแอดได้เลยยย ใครมีตัวไหนแนะนำใส่มาได้เต็มที่เลยคร้าบผมม <3 "
.
#BorntoDev - 🦖 Coding Academy ให้การพัฒนาเทคโนโลยีเป็นเรื่องง่ายสำหรับทุกคน
javascript prototype function 在 紀老師程式教學網 Facebook 的精選貼文
[好文推薦] 30 天學會 JavaScript!免費!全中文喔!
文章連結:https://goo.gl/UN7EBZ
--------(本文開始)--------
今天推薦的是由「IT 邦幫忙」網站的一個系列文:「I Want to Know JS」。它用 30 + 2 篇幅,很完整地介紹了 JavaScript。如果想學 JavaScript 的朋友,不妨閱讀看看!
前面的 30 篇,分別是介紹 JavaScript 的正文。分別是:
01. Why Do I Want To Know JS
02. JavaScript - 原始型別概述
03. JavaScript - Built-In Objects 概述
04. JavaScript - 原始型別個別介紹
05. JavaScript - 物件 與 屬性
06. JavaScript - 變數
07. JavaScript - 參數傳遞方式 (1)
08. JavaScript - 參數傳遞方式 (2)
09. JavaScript - Function
10. JavaScript - Lexical Scope
11. JavaScript - Scope 單位 & 查找
12. JavaScript - Hoisting
13. JavaScript - Closure (1)
14. JavaScript - Closure (2)
15. JavaScript - Scope 實作建議
16. JavaScript - call,apply,bind
17. JavaScript - This (1)
18. JavaScript - This (2)
19. JavaScript - This Priority
20. JavaScript - 物件導向 (1)
21. JavaScript - 物件導向 (2) - 建立共用函式
22. JavaScript 物件導向 (3) - 繼承原型方法
23. JavaScript 物件導向 (4) - With ES6
24. JavaScript - Prototype Chain
25. JavaScript - Coding Style (1)
26. JavaScript - Coding Style (2)
27. JavaScript - 非同步執行
28. JavaScript - Promise (1)
29. JavaScript - Promise (2)
30. I Want To Know JS - 結語
後面有兩篇關於「屬性描述器(Property Descriptor)」補充:
1. JavaScript - 屬性描述器 (1)
2. JavaScript - 屬性描述器 (2)
相信整個系列讀下來,應該對各位 JavaScript 的功力進步很有幫助才是!
希望大家喜歡今天的分享!請大家多多按讚鼓勵、或追蹤我的 FB、YouTube、以及 Instagram 喔~
---------------
Facebook 粉絲頁(歡迎追蹤): https://goo.gl/N1z9JB
YouTube 頻道(歡迎訂閱): https://goo.gl/pQsdCt
Instagram 日常生活: https://goo.gl/nBHzXC
javascript prototype function 在 紀老師程式教學網 Facebook 的最讚貼文
[好文推薦] 30 天學會 JavaScript!免費!全中文喔!
文章連結:https://goo.gl/UN7EBZ
-\-\-\-\-\-\-\-\(本文開始)-\-\-\-\-\-\-\-\
今天推薦的是由「IT 邦幫忙」網站的一個系列文:「I Want to Know JS」。它用 30 + 2 篇幅,很完整地介紹了 JavaScript。如果想學 JavaScript 的朋友,不妨閱讀看看!
前面的 30 篇,分別是介紹 JavaScript 的正文。分別是:
01. Why Do I Want To Know JS
02. JavaScript - 原始型別概述
03. JavaScript - Built-In Objects 概述
04. JavaScript - 原始型別個別介紹
05. JavaScript - 物件 與 屬性
06. JavaScript - 變數
07. JavaScript - 參數傳遞方式 (1)
08. JavaScript - 參數傳遞方式 (2)
09. JavaScript - Function
10. JavaScript - Lexical Scope
11. JavaScript - Scope 單位 & 查找
12. JavaScript - Hoisting
13. JavaScript - Closure (1)
14. JavaScript - Closure (2)
15. JavaScript - Scope 實作建議
16. JavaScript - call,apply,bind
17. JavaScript - This (1)
18. JavaScript - This (2)
19. JavaScript - This Priority
20. JavaScript - 物件導向 (1)
21. JavaScript - 物件導向 (2) - 建立共用函式
22. JavaScript 物件導向 (3) - 繼承原型方法
23. JavaScript 物件導向 (4) - With ES6
24. JavaScript - Prototype Chain
25. JavaScript - Coding Style (1)
26. JavaScript - Coding Style (2)
27. JavaScript - 非同步執行
28. JavaScript - Promise (1)
29. JavaScript - Promise (2)
30. I Want To Know JS - 結語
後面有兩篇關於「屬性描述器(Property Descriptor)」補充:
1. JavaScript - 屬性描述器 (1)
2. JavaScript - 屬性描述器 (2)
相信整個系列讀下來,應該對各位 JavaScript 的功力進步很有幫助才是!
希望大家喜歡今天的分享!請大家多多按讚鼓勵、或追蹤我的 FB、YouTube、以及 Instagram 喔~
-\-\-\-\-\-\-\-\-\-\-\-\-\-\-
Facebook 粉絲頁(歡迎追蹤): https://goo.gl/N1z9JB
YouTube 頻道(歡迎訂閱): https://goo.gl/pQsdCt
Instagram 日常生活: https://goo.gl/nBHzXC