🔥 "สาย 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 ให้การพัฒนาเทคโนโลยีเป็นเรื่องง่ายสำหรับทุกคน
「coding editor」的推薦目錄:
coding editor 在 新思惟國際 Facebook 的最讚貼文
Q:研究統計結果與預期相反,需要在結論中加以解釋嗎?
「因為大家現在的作法都接近,有很多東西都有所謂的治療指引,guideline,其實作法都大同小異,理論上應該不會出現這種臨床因子完全顛倒過來的,理論上這種比較不會。所以我會建議如果遇到這種狀況,可能回去看一下 raw data,是不是 coding 有亂掉。
那如果確定沒有問題,要怎麼解釋,就要看你對這個疾病的瞭解多少。譬如最近,我跟麻醉科他們在做健保資料庫,分析台灣肺癌的發生率,他們分析出來的結果,prevalence 跟 incidence,都是東部比較高,但是明明東部的 PM2.5 很低啊,為什麼它會比較高?我就說,會不會是他們的吸菸人口比例比較高?戒菸的活動在那邊不明顯,那 low dose CT screening 比例也很低,會不會是這個樣子?因為比 PM2.5 比起來,吸菸應該更嚴重。
後來他們去調國健署的 data,是,東部那邊是吸菸率台灣最高,所以變成你要去看說,如果你的 data 這樣收沒問題,它一定有原因,但是可能必須你要一個一個去找,是不是真的有什麼不一樣?因為算是比較重大的歧異啦,先從最可能出錯的地方先去挑,挑到最後如果真的有問題的話,我們再來想說怎麼回這個問題,還是說他裡面真的有什麼樣的故事,我們不知道,如果說真的有,那恭喜你,就中大獎,因為這顛覆大家的想法。」
--
課後最多校友成功發表的研究工作坊,深入淺出的課程設計、切身受用的交戰經驗。課後好評回饋,不論是初學者或進階者,都能有所收穫,滿載而歸!
🚩 2020 / 4 / 12(日)臨床研究與發表工作坊
下定決心,從零到一。為初學者量身設計的課程。
立即瞭解 │ http://clip2014.innovarad.tw/event
--
《臨床研究與發表工作坊》講者陣容
【吳昭慶】
神經外科頂尖期刊 Journal of Neurosurgery: Spine 之核心編輯成員。從素人狀態起步,歷經 author / reviewer / speaker / editor,用研究與發表,讓世界知道自己的技術與專業。
【吳青陽】
從別人眼中的小手術 port A 開始,逐步登上外科第一名期刊 Annals of Surgery,發表多項獨到研究與專利,並有肺癌手術系列研究。用 PubMed 的足跡,榮耀自己胸腔外科醫師的身份!
【蔡依橙】
原創論文被引用破百次,領導制訂亞洲心臟電腦斷層 guideline 後,希望協助每個想在國際舞台發光的年輕朋友,於是辭職創業,全心投入課程規劃,協助大量傑出校友,活出更好的人生。
--
年輕的臨床研究者,起步究竟需要什麼?我們年輕過、我們起步過、我們從什麼都沒有的狀況開始過,所以我們知道。從稿件送出,經過 editor / reviewer / revision 三關,究竟如何趨吉避凶;不講高深理論,直接從應用切入介紹統計,並實際讓你在自己的電腦上完成;初學者應該如何集中資源,避開常見誤區,我們給你務實建議。
《臨床研究與發表工作坊》最新活動
https://clip2014.innovarad.tw/event
coding editor 在 BorntoDev Facebook 的最讚貼文
<3 จาก Poll ที่แอดตั้งมาเล่น ๆ แต่มีผู้เข้าร่วมกว่า 2,000 ท่าน เรื่องการใช้ปีกกาใน condition ของ if else ว่าใช้แบบไหนกัน
.
คำตอบที่ได้ก็แตกต่างกันไปครับ บางคนบอกซ้ายมือมันระเบียบกว่า พร้อมเหตุผลมากมาย ส่วนบางคนใช้เหตุผลเดียวกันในการเลือกด้านขวามือ 5555
.
สรุปแล้วแบบไหนถูก .. คำตอบคือให้ไปดูที่ Guideline ของแต่ละภาษาครับ
.
ซึ่งถ้าเราไปเปิด Guideline หรือ Document คำตอบที่ได้คือแบบขวามือนั้นถูกใช้ใน คู่มือ คำแนะนำของภาษาส่วนใหญ่
.
การเขียนในลักษณะนี้เราจะเรียกว่า "Egyptian Brackets" ที่มีเหตุผลดี ๆ หลายอย่างรองรับมันไว้ครับ ไม่ว่าจะเป็น
.
1. จำนวนบรรทัดที่สั้นกว่า ทำให้เราโฟกัสกับตัว Logic และ การทำงานภายในได้ง่าย ทำให้เกิดประโยชน์ในการ Scroll หน้าจอของ Editor ในการตรวจสอบ นั่งอ่าน
.
2. ลดบรรทัดที่ไม่จำเป็น เพราะการที่เราใส่ { และ } ไว้บรรทัดเดี่ยว ๆ นั้นเปลืองพื้นที่ทรัพยากรมาก โดยเฉพาะ "ถ้าคุณต้องการ Print ใส่เอกสารของ Project คุณ"
.
แต่ถามว่า ถ้าไม่ใช้แบบนี้ถือว่าผิด ทำให้ประมวลผลพลาด และ เลวร้ายไหม คำตอบคือ "ไม่ครับ"
.
เพราะที่ดีที่สุดก็คงไม่พ้นที่ควรจะดูอย่างตาม Guideline ของภาษานั้น ๆ ที่เราใช้ ถ้าภาษาเราใช้แบบซ้าย ก็ใช้แบบซ้าย เช่นใน C# ถ้าภาษาเราใช้แบบขวา ก็ใช้แบบขวา
.
การทำตาม Coding Style ถือว่าเป็นสิ่งที่ดีตรงที่ เวลาเราไปดู Project ใน Community หรือ ดู Lib ต่าง ๆ ค่อนข้างดูง่าย ถ้าเขียนไปในทางเดียวกันกับเพื่อน
.
ซึ่งแอดมีข้อเน้นย้ำอยู่ 3 เรื่องคือ
.
1. เมื่อเลือกใช้ Style ใดแล้ว ควรที่จะมี "ความสม่ำเสมอ" และ "ข้อกำหนดในการใช้งานของเรา" ไม่ใช่วันนี้อยากซ้ายก็ซ้าย พรุ่งนี้เปลี่ยนใหม่ อันนี้ไม่ได้ครับ
.
2. เมื่อเลือกถ้าเป็นไปได้ในรูปแบบการพัฒนาปกติให้ใช้ตาม Guideline เพราะเพื่อนเก่า เพื่อนใหม่เข้าใจกันได้
.
3. ถ้ามีการเปลี่ยน Style บอกเพื่อนในทีมด้วยนะ
.
"สำหรับสาเหตุที่แบบขวาเรียก "Egyptian Brackets" อยู่ใน Comment เลยจ้า <3
.
#BorntoDev - 🦖 Digital Academy ให้การพัฒนาทักษะเทคโนโลยีเป็นเรื่องสนุกไปพร้อมกับเรา
coding editor 在 microsoft/monaco-editor: A browser based code editor - GitHub 的推薦與評價
A browser based code editor. Contribute to microsoft/monaco-editor development by creating an account on GitHub. ... <看更多>
coding editor 在 JavaScript Code Editors 的推薦與評價
Popular JavaScript Code Editors. To edit JavaScript source code, basically, you just need a plain text editor such as Notepad on Windows. To simplify and speed ... ... <看更多>
coding editor 在 Monaco Editor 的推薦與評價
A good page describing the code editor's features is here. It is licensed under the MIT License and supports Edge, Chrome, Firefox, Safari and Opera. The Monaco ... ... <看更多>