Search
【直播筆記分享】資料視覺化的動態長條圖製作（上）：jQuery
老闆最近請小幫手協助將 Youtube 頻道的影片撰寫成筆記，第一篇是使用 jQuery 製作動態的長條圖，先暖身一下，下篇將會介紹 Vue 與 D3.js 如何實現一樣的圖表喔，對於資料視覺化入門感興趣的同學千萬不要錯過了！
筆記連結👉 https://reurl.cc/ral3Qy
課程順利上線啦，來跟 1700 位同學一起學習！
https://hahow.in/cr/creative-coding-1
老闆 來點寇汀吧。 Boss,CODING please.
https://www.instagram.com/bosscodingplease/
#dailycodingchallenge #generativeart #creativecoding #p5js #digitalart #creativecodeart #new_media_art #art #graphic #codeart #creativecodingtw
🔥 หากวันนึงคอมเสียแล้วจำเป็นต้องแก้โค้ด ณ. จุดนั้น หรือไม่อยากติดตั้งโปรแกรมให้วุ่นวาย วันนี้แอดมีของดีมาแนะนำกับ
.
🌍 "เครื่องมือให้เราเขียนโค้ด แสดงผลการทำงานแบบฟรี ๆ ผ่าน Web Browser"
.
ซึ่งแต่ละเจ้าก็มีข้อดี จุดเด่นที่แตกต่างกันออกไป เหมาะสุด ๆ ทั้งงานเฉพาะกิจ และ น้อง ๆ ที่ยังไม่อยากซื้อคอมใหม่มาเขียนโค้ด เอาเป็นว่างั้นแอดขอไม่พูดมาก มาดูพร้อม ๆ กันเลย
.
1. codesandbox.io
"ใช้งานได้ง่ายหมือน VS Code, เขียน React ก็ได้ เชื่อมกับ GitHub ก็ยังได้ มี NPM Package ให้ใช้อีก "บอกเลยว่าใครต้องการพัฒนาเว็บ หรือ ฝั่ง JS ใช้เว็บนี้ตัวเดียวจบจ้า แถมตัวฟรียังแทบไม่จำกัดฟีเจอร์หลักด้วย
📌 เข้าใช้งานได้เลยที่ https://codesandbox.io/pricing
.
2. W3Schools Online Code Editor
"จะดีแค่ไหน ถ้าเป็นได้ทั้ง Code Editor และ Tutorial ที่สอนวิธีการเขียนโค้ดไปด้วยกัน" กับ W3School ที่สอนทุกคนทำ HTML, CSS และ JavaScript ออนไลน์เห็นภาพจริงเมื่อสั่งทำงาน !
📌 เข้าใช้งานได้เลยที่ https://www.w3schools.com/tryit/
.
3. CodePen
"ให้การเขียนโค้ด HTML CSS และ JavaScript ของเรา เป็นวิทยาทานแด่ผู้คนทั่วโลก !"
เพราะทุกโค้ดสุดเจ๋งที่เรานำมาทดสอบ สามารถแชร์ไอเดียเหล่านี้ให้เพื่อนดูได้แถวยังดูไอเดียจากเพื่อน ๆ ได้อีกด้วย
📌 เข้าใช้งานได้เลยที่ https://codepen.io/
.
4. Play Code
"จะ jQuery, React, Vue หรือ JS ตัวไหนก็ไม่กลัว" เพราะ Play Code สามารถให้เรารันงานเหล่านี้ได้ง่ายจัด ๆ" ทดสอบได้ผ่านหน้าเว็บรูปแบบออนไลน์ได้เลยไม่ต้องติดตังโปรแกรมให้วุ่นวาย !
.
5. Repl.it
"มี 55 ภาษาให้เลือกเขียน โหดกว่านี้ไมมีอีกแล้ว" สำหรับใครที่ชอบ Python, C, C++,C#, Kotlin, Java และอีกกว่า 50 ภาษาต้องห้ามพลาด แถมยังมีระบบให้แชร์งาน หรือ ทำโจทย์ร่วมกับชาวบ้านอีกด้วยนะ !
📌 เข้าใช้งานได้เลยที่ https://repl.it/
.
6. Dev Lab 3
"Code Editor รูปแบบออนไลน์ที่ช่วยให้คุณได้มาฝึกสกิล พัฒนาทักษะ Algorithm แบบฟรี ๆ" เหมาะสำหรับท่านที่อยากลองของ หรือ อยากอัพสกิลด้านเขียนโปรแกรมให้เก่งยิ่งขึ้น แก้ปัญหาเขียนโค้ดไม่ออกกับเว็บนี้ได้เลย
📌 เข้าใช้งานได้เลยที่ https://www.borntodev.com/intro-devlab-3-pro/
.
ซึ่งทั้งหมดนี้เป็นเว็บไซต์ที่ให้เราเขียนโค้ดรูปแบบออนไลน์ได้ และ บางเว็บมีโจทย์ให้ลองทำกันแบบฟรี ๆ ด้วย เอาไว้อัพทักษะกันได้เลย <3
.
หากเพื่อน ๆ มีเว็บไหนที่อยากแนะนำพิมพ์ไว้ด้านล่างได้เลยคร้าบผม :D
.
#borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
#純靠北工程師3id
雖說VBA和 ASP.NET不是沒有市場,
但真的...都十年了,
angular/React/Vue/Backbone, 什麼SPA都了幾代了,
jQuery硬打,照用VBA,是不是有點老人?
👉 去 GitHub 給我們🌟用行動支持純靠北工程師 https://github.com/init-engineer/init.engineer
📢 匿名發文請至 https://kaobei.engineer/cards/create
🥙 全平台留言 https://kaobei.engineer/cards/show/4549
如何在網頁上製作圖表呢？
資料視覺化是現在網頁常用的媒材，
但選擇框架時各有優缺點，
這次直播中，會討論並示範基礎長條圖製作，
比較在Jquery / Vue / D3三種框架下，
實作互動長條圖的方法!
投影片：
https://hackmd.io/p/BJ7RDFUGW#/
動畫互動網頁特效入門，募資倒數9天：https://hahow.in/cr/monoame-webdesign2
肥宅連假超前部署宅在家沒出門在家當個聰明用路人在家閒閒沒事自學Vue.js 有人說Vue比jQuery簡單... 肥宅就試著把以前用jQuery做的糞作用Vue3改寫一 ... ... <看更多>
vue jquery 在 在Vue.js中使用JQuery Plugins | Limitless Ping 的推薦與評價
一般來說開發時最好避免混用Vue及JQuery，因為兩個框架的理念並不相同，Vue是專注在對Model的操作，而JQuery則是專注在DOM的操作，如果在Vue中 ... ... <看更多>