《寫程式的設計師》
.
去年有個不知名的網友說:
「江孟芝的作品一看就是CS背景人士做出來的成品,不會寫程式是不可能做出來的。」因此他自己「推論」我的作品一定是有其他人幫我寫的。
.
這句「這是CS背景人士做出來的」是正確的。我在美國電腦藝術(Computer Arts)研究所裡主修的是介面設計跟程式藝術,也因為電腦藝術研究所裡有大量的程式課程,被美國政府列為符合Science, Technology, Engineering and, Mathematics的標準,在畢業後享有OPT EXTENSION實習簽證長達29個月,所以我的背景完全符合這位網友所提的「CS(Computer Science)背景」。
.
他的第二句其實也沒錯「不會寫程式是不可能做出來的。」如果不會寫程式,我不僅無法做數據視覺化,更無法畢業了吧!我學習寫程式的歷程,要從我大三開始說起。
.
我大三的時候,已經認知到自己是非典型的美術系學生,對各種不同的設計領域充滿好奇,於是我大量地往外系修課,甚至跨校學習。那時我在外系接觸到了Flash網頁(Flash年代啊,遠目),也學到了初階的計算機概論,那是我認識程式的起點。
.
畢業後找工作的期間,發現網頁設計都需要具備程式的技巧,因此我開始大量買Dreamwaver、CSS、ActionScript的書籍,一行一行照個書上練習,於是我在畢業的那個暑假架設了自己人生第一個網站。
.
工作後,因為業務需求,我更專精在前端工程上,對CSS跟HTML鑽研至深,雖然那時候超級討厭大魔王 IE 6,但是每次Debug完,卻升起一種成就感,我甚至有一份完整紀錄Debug的文件,分析著今天遇到什麼問題、用什麼方法解決。也因如此,申請國外研究所的時候,我申請科系都是數位藝術、電腦藝術、資訊設計相關的領域,因為我很清楚,#自己想走程式藝術的路。
.
一般的人可能對設計師有刻板印象,直接「推論」設計師都是一群不會寫程式的人,但是美國大多的設計領域,#都強調程式的重要性,SVA、Parson、Pratt都是如此,有時候我甚至寫程式寫到我以為自己在念資工系,從前段到後端的語法,像是PHP、Html5、Javascript、Actionscript、JQuery、MySQL、Processing......等等,我都覺得十分有趣,因為在研究所大量接觸到這些語言,成為我數據視覺化作品的基石。
.
這位網友直接「假設」我不是CS背景,也不會寫程式,其實是自己先入為主的推理,導致後面產生不正確的謬論,然後在沒有事實根據的情況下就製造了一條假消息。我常常在想,當「爆料」 淪為有心人製造假新聞的農場,我們每個人是否可以有獨立思考的能力去判別事實呢?
.
下個月《我們與惡的距離》的舞台劇要演了,文宣上的標語就是:「你自以為是的正義,可能把另一個人推向地獄。」
.
我相信這個社會不是二元論,非黑即白,如同我之前所說的:「台灣並不需要更多的對立了,階級的對立、窮富的對立、政治的對立、世代的對立,我們不需要用對立去分化彼此,讓自己的力量越來越渺小。」相反的,每件事情都是有灰度的,最好的跟最惡的人都不存在,有好的壞人也有壞的好人;有會寫程式的設計師,也有會藝術創作的工程師。
.
如何化解對不同領域的偏見跟誤解,學習用擁抱跟溝通去傳遞溫暖,是我們身為人一輩子的課題。
.
.
.
IG: mengchih
jquery extension 在 BorntoDev Facebook 八卦
🔥 "สาย 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 ให้การพัฒนาเทคโนโลยีเป็นเรื่องง่ายสำหรับทุกคน
jquery extension 在 卡斯伯 Facebook 八卦
自動化的美好,每個人都可以試試看
從設計轉前端後好幾年
慢慢開始接觸到自動化
像是 Chrome extension, gulp, 後端爬蟲等等...
只要是以 Data 方式呈現的幾乎都可以自動化
#### 從瑣事上優化
我們每天在看網頁
有些地方經常會重複相同的動作
移除佔版面的廣告、搶票、填寫整面的表單、大量發送請求等等
這些其實可以寫 Chrome extension 來做
如果沒有接觸過的可能會覺得困難
那麼可以直接從範例改一次看看
https://github.com/orbitbot/chrome-extensions-examples
只要會 jQuery 就可以完成第一個自動化功能
#### 從工作上優化
剛開始工作時
我們都會要交付給後端的程式碼一一整理
複製整理壓縮的過程不但傷時費神
一不注意很容易缺少部分檔案
Gulp 這種任務管理工具
就會將上述費神的事情一次解決完
且自動化的流程可以大幅減少錯誤
接觸以後會覺得自己更像工程師
不僅省時,還會很有成就感
#每日一觀點 #35
jquery extension 在 Chrome Extension Tutorial - 7 - jQuery - YouTube 的八卦
... <看更多>