tag:blogger.com,1999:blog-11908145135633412662024-03-13T06:25:15.865-07:00vividadada的技術筆記vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.comBlogger31125tag:blogger.com,1999:blog-1190814513563341266.post-6977928149760740422017-12-28T02:27:00.001-08:002017-12-28T02:27:08.055-08:00部落格轉到 wangchou.github.io 了<a href="http://wangchou.github.io">點我去新部落格位置</a>vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-62770900514907911812016-11-06T01:41:00.002-07:002016-11-06T01:40:07.975-08:00Redux 簡介:我終於看穿它了<pre>
Redux 把資料放在 store 中,它是個資料庫,但 Redux 不用常見的 SQL 介面,要開發者自訂指令介面。這介面有簡單的標準,他只接受 Action = {type, payload} 物件的輸入。在傳統的資料庫中,下了 SQL 資料庫就會照指令,來更新資料庫,但在 Redux 中,開發者需要自行寫一個 Reducer 來處理輸入的 Action 指令。和傳統資料庫不同的是,這個 Redux 資料庫變了之後,Redux 會 push 變動了的資料到訂閱者 (一個 Javascript 物件),行為就像是 Baas 服務 (parse, firebase) 常見的 push message。Redux 和傳統關聯式資料庫最大的不同點是,Redux 用 JS 物件或變數來儲存資料;傳統資料庫因為有大量相關的資料,所以用資料表 (data array, data table) 來儲存。這讓 Redux 的狀態樹一直呈現很難視覺化的情況,目前樹狀結構最好的視覺化就是,Browser 的 dev tool 了。如果能把 Redux state 架構轉成 html,也許會有很好的效果也不一定。 另一個選項是 D3.js 的 Simple Tree。
簡單的資料庫列表比較
</pre>
<div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-sSMTas7I6yk/WB7sjh1ylYI/AAAAAAAA45k/E5kCkDcf1F0ZYe-Xf4Yv4KGeIfnnowtUwCLcB/s1600/Screen%2BShot%2B2016-11-06%2Bat%2B4.37.19%2BPM.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://4.bp.blogspot.com/-sSMTas7I6yk/WB7sjh1ylYI/AAAAAAAA45k/E5kCkDcf1F0ZYe-Xf4Yv4KGeIfnnowtUwCLcB/s1600/Screen%2BShot%2B2016-11-06%2Bat%2B4.37.19%2BPM.jpg" /></a></div>
<pre>
Redux 和 Firebase 的資料儲存方式很相近,可以很好的一起運用整合。也許進一步把 client 的資料再切為,Server Data 和 View Data 的設定會更好。Server Data will always synced with Firebase.
另外一提,Redux 實際上就只是個資料庫 (Model),只有 input & outpt,哪有什麼 middleware… in the middle of what?Redux-middleware 實際上是一部分的 controller,跟 Redux 無關啊。React 也包含 Controller。畫成圖來表示
</pre>
<div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-iuJOF3G-YCg/WB7sNkMUYfI/AAAAAAAA45g/-T3GLN0twVwBwHN2hm9_ncod0-qlG4krQCLcB/s1600/Screen%2BShot%2B2016-11-06%2Bat%2B4.38.55%2BPM.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://3.bp.blogspot.com/-iuJOF3G-YCg/WB7sNkMUYfI/AAAAAAAA45g/-T3GLN0twVwBwHN2hm9_ncod0-qlG4krQCLcB/s1600/Screen%2BShot%2B2016-11-06%2Bat%2B4.38.55%2BPM.jpg" /></a></div>
<pre>
Flux 把傳統的 MVC 切成了上行和下行,形成了一個循環資料流,它最大的優點是有 paper 支持的 Single Source of Truth。想像一下 bug 在房間亂跑好抓還是... bug 繞著固定的圈圈跑,bug 繞圈圈跑的話,在原地等 bug 跑過來就抓到了。
總結一下,說穿了 Redux 就是一個啥功能都沒有的資料庫設計規範。也因此,他的文件很長、相關模組很多。
</pre>vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-53360310688454724672016-07-22T18:01:00.000-07:002016-07-22T18:04:46.097-07:00見樹又見林 - 書摘 & 心得<pre>
[書摘的摘要]
社會學是一種讓你看到社會現象背後,整體樣貌的工具,看清楚後就可以尋求一點一滴的改變方法。
用個人主義的方式理解世界,將無法理解社會現象。
社會學中有很多概念工具。社會體系中有文化與結構。社會文化中有符號、信念、價值觀、規範、物質環境。社會結構中有角色、與角色的關係與資源分配。
「社會文化」是社會學中的一個概念工具。文化中的「符號/概念」限制了你對現實世界的理解,我們處於文化中只能透過符號/概念在心中建構出來的真實理解,如果文化中沒有這概念,就無法理解。文化中的「信念、價值觀與規範」,是人判斷哪個選擇比較好、做或不做的依歸,形塑了社會體系中每個角色最小阻力的路。文化中的「物質環境」,像是電視機、手機、農業、工業社會,都會被文化影響、也會影響文化。人常忘了自己的文化只是眾多文化的一種,透過意識到文化盒子的存在,人可以看到自己社會體系的侷限、也可以想像在不同社會體系的世界會怎樣。
「社會結構」是社會學中的另一個概念工具。角色有天生的像是性別、後天的像是職業和情境式的像是行人。人同時會參與多個社會體系,在每個社會體系中扮演一個以上的角色。透過角色關係,每個角色有他的權力與限制,有他阻力最小的路。角色位置和佔據角色位置的人是兩個不同的概念,扮演這個角色的人可以決定要不要,這個角色在社會中被期待的方式走。所以理解一個人的行為時要,理解是結構性的原因,還是個人的選擇。每個社會體系會賦予每個「角色位置」,想要的內容(ex: 資本社會:財富),和獲得這些內容的合法機會。如果想要的和機會相差太大,這個角色就會容易陷入困境,而對社會體系有四種偏差行為,創新、反叛、退縮與脫離。
人透過行動參與社會體系,社會體系改變現實中的物質環境,物質環境影響人,形成一個循環、這就是人類的生態學。
自我和其他文化中的概念一樣,只是一個被文化符號建構出來的真實。我們是誰,不在於自己本身,而是由我們對社會體系的參與以及學習如何參與的社會化過程來決定的。
社會體系就像一齣電視劇,劇本為文化、場景為物質世界、角色為社會體系中的身份。我們就是其中的演員,大多數人從個人主義的視角看世界,忘了我們可以透過挑劇本、挑角色。如果沒有意識到社會體系的盒子,就只能一直演同個劇本、同個角色,嗯 你的演員人生入戲太深就這樣子了。自己現在的劇本、現在的角色是什麼呢?現在扮演的角色、社會體系真的存在嗎?有其他人也參與這個你想像中的社會體系嗎?還是只是你自己以為而已。透過理解社會學去理解你生活中的劇本,好好演出你的人生、改變其他人的人生。
第一次說「我愛你」不僅是取悅他人而已,而是一種邀請,一種意圖的表示,想要改變一種社會關係。
[本書介紹 p1~p7]
社會學存在的理由是我們身處的社會中總有一些無所謂的苦難的現象。碰到這個時候,我們會問:「為什麼會這樣?」這時社會學成為找到這問題答案的一個工具,幫助我們理解事情如何相互牽連,看清楚後,也就能尋求一點一滴的改變方法。社會學無法讓你全盤理解整個世界,但可以思辨如何參與在生活中的環境,像是社區、家庭和公司。
社會學提供的是一種有系統的思考方式。實踐社會學,使得我們觀察、思索、理解這個世界,改變這個我們身處其中的世界。社會學中有很多理論,都由社會學的本質核心觀念而來。這本書不介紹一大堆理論和專有名詞,但會介紹這個核心觀念,讓人能從社會學的角度來看這個世界。
[第一章 - 森林、樹群,還有那件事 p8~p42]
多元的社會中的差異會形成特權的基礎,不平等持續的現象,是因為大家都不願意討論特權。因為討論時,享有特權的人會覺得自己被攻擊、沒有特權的人害怕可能會被報復所以不討論。「享有特權的人討論時覺得自己被攻擊」的原因是他們用個人主義的方式看世界,這看法在美國尤其普遍。個人主義的問題是他們忽略了社會中的現象,除了每個個人之外也受社會中的各種關係影響。社會學要研究森林、樹、樹與樹之間的關係。我們叫我們參與的那廣大一點的世界「社會體系」。家庭、公司都是社會體系的一種。社會體系中的角色不等於佔據那個角色的人,個人主義的角度無法理解這點,所以當我們在討論特權「角色」時,他們會以為我們在攻擊「佔據這個角色的個人」。我們必須理解社會體系不同於我,我也不是社會體系本身。
社會體系中會有社會規則,形成每個人面對到最小阻力的路。如果只把社會體系的這些規則當作權威,當成人外在的系統,忘了人是社會體系的一部份、社會規則運作需要人配合,就會忘記自己是可以改變社會體系的。
人參與社會體系會發生什麼事取決於系統本身和運作規則、人在其中的作為。體系影響參與者的想法、感受和行為,靠著就是鋪陳出這些阻力最小的路,雖然任何時刻參與其中的人都有無限多種事可做,但我們通常都不這麼想,只看到體系中很有限的幾個可能性。人也許會同時參與多個體系,然後不同體系中最小阻力的路互相衝突,讓人覺得進退兩難,社會學叫這種情況「角色衝突」
個人主義對理解社會現象沒有用,因為他只看到人、沒看到社會體系。個人主義沒法解釋,不同社會間同個現象個人的差異(ex: 自殺率)。社會學會問「在 xxx 社會體系中,yyy 會覺得做 zzz 是最小阻力的路的原因是什麼?」靠這個問題來探究比自己範圍更大一點的外在情境。但要注意,我們無法只看人,就理解體系的運作;我們也無法只看體系的運作,就理解人的一舉一動。個人主義的人常會問:「是怎樣的人會做出如此殘暴的事?」。把社會現象簡化為「什麼樣的人」的緣由,忽略這些人所身處的社會體系。
在社會體系中總是會和最小阻力的路有所牽連,因為即使你不照社會規則走,其他人會照社會規則來對待你。
社會現象,和參與人有關、又跟他們無關。無關是因為並不是他們創造出這個種族歧視的社會。有關是因為,對於如何參與這種族歧視的社會,人總是還有一些選擇。
那社會中的人該如何呢?透過社會學我們可以知道,不用為社會問題感到自責,因為這不是我的錯。社會學也讓人了解到如何透過參與這個社會,讓我做的選擇如何影響這個社會體系。
個人式的解決之道,無法處理社會問題。社會學對改變社會,比起個人式採用更為複雜的模型,同時著眼社會生活的不同層次。透過體系的層次、個人的層次一起看社會問題。
社會體系影響人,人的行為影響社會體系的運作,就這樣不停循環著。每個人對同個社會體系的理解的、對同個社會體系的心理模型也不同,理解每個人的想法、理解每個體系。這就是社會學要研究的事。
簡單說:實踐社會學會問兩個問題,「人們參與之中的是什麼?」「人們又如何參與?」兩個問題相互碰撞。本書比較著重第一個問題,對於社會體系的分析。
[第二章 - 文化 — 符號、觀念和生活的種種 p43~p95]
人透過詞彙/符號,把感官經驗在心中重新建構一個真實。然後在這個詞彙建構真實的基礎上思考、判斷、做出行為。然而人沒有意識到在心中建構真實時,人也正在選擇。這選擇是一個創造性描述的過程(像是翻譯),選擇詞彙的同時也就建構出了新的真實。
詞彙從哪裡來?答案是,我所參與的社會是有文化的,那文化主要包含符號,特別是語言中的詞彙和各種想法。文化同時是物質的,像是社會生活中的「東西」、也是非物質性的,透過符號和想法來思考並且賦予任何事物意義。
當我們命名一個感官上的東西,例如「雷聲」,在最簡單的意義下,我們藉著對它的感受,創造了與它的關係。如果沒有命名,我們不會注意到它、會被人有限的注意力忽略。我們的注意力只能集中在一小部分上,唯有透過符號命名,我們才能把注意力集中在這些事物上,我們才能建構一個真實。蘇珊.朗格:『用符號去建構真實,是人類之所以能成為人類最重要的關鍵』
(os: 世界的大小由想像的範圍決定。符號像是 support vector/basis 界定了世界的邊界,用符號把真實投影在心中世界。)
語言可以建構各式各樣的真實,包括我們沒有感官經驗的真實。像是我們不能聽到、聞到或觸摸到所謂的愛。我們看到他人的行為,但行為本身不是愛,而是我們把它想成:「這行為意味著這個人愛我們。」像是大多數人沒能直接觀察到的「原子」,光是透過語言文字就足夠建構出我們視為的現實。在這個意義下,符號的力量遠遠超過它標示的東西。
對於同一件事人有不同的理解版本。每個人心中對於每個符號的意義有不同理解。
每個文化的第一個目的,是提供一種人們可以辨識什麼是真的,什麼是假的方法,這是所謂的信念。在某一意義下,符號是最簡單的信仰陳述,字典的每一個定義就是宣稱某些東西是真實存在的。當文化定義某些是真的,不管實際上是真的還是假的,都會有真實的後果。稱為「顯而易見」的,卻未必是真的,只是在某一特定文化中,被預設為無需懷疑的。(文化中大家都當真的事物...)
文化中有價值觀。價值滲透到我們生活的每個層面,因為種種價值為我們提供一個方法,以便在很多看起來都相似的事物間做選擇。價值除了影響我們怎麼選擇行動的路線之外,還影響我們怎麼看待、對待我們自己和別人。人常忘了,我們把價值當成真實本身自然而然的一部份,而不把它當成是「關於」社會如何建構真實的想法。除了人的基因中的基本偏好,大多數的偏好是來自於在某一特定文化中經由「社會化」所學來的價值。社會體系的組織方式,決定了價值的選擇。經驗過越多文化,我越意識到自己的文化只是一個文化而已,也看到自己總是從文化所提供的有限可能中選擇。
作為個人,我可以意識到文化實質存在,並且形塑我們的觀點和經驗,包括我認為我要的是什麼。我唯有藉著把我自己從我身處的文化所提供的狹隘選擇範圍解放出來,才能擴大我的「自由」。要達到這目的,我需要「跨越出」我習慣的文化框架,這樣才能看到我處的文化「框架」,其實只是很多可能的一種。
價值就像是語法原則,我們用它來解釋從未見過的句子。至於我們怎麼應用那些原則,完全看我們自己。文化中的價值有時會被轉換成規範(norm),以獎勵和懲罰的「社會後果」來要求人們遵守。若能改變他所參與的「社會體系」,在不同文化規範下就能改變他行動的社會後果。
為什麼要有規範?功能學派認為每個社會體系都有一些要求,在達到這些要求之後社會體系才能運作。如果沒有規範,社會之中的關係就會被瓦解。這關係主要包含我們對彼此的期望。規範對於界定體系的疆界也很重要,規範告訴我們區別自己人與其他人。最能獲得社群的接受並能形成影響的方法是,從一開始就接受這社群的文化。拒絕接受的話,這文化就不會接受你。
文化觀念對人們來說是在體系中應該有怎樣的角色。小孩子玩在一起一定要成立「一國」,第一件事是訂定規則,服從的人才能加入。規則本身是什麼不重要,重要的是建立一種比較大的東西,使成員感覺自己是其中一員,同時也讓成員藉此知道自己是誰。法國社會大師涂爾幹把這種集體感覺的「我們」,當成社會生活的基礎,這是唯一可以控制人們行為的方式。這就是道德,體系中一種共同分享的感覺。沒有這集體感覺,人們會失落,社會體系會瓦解。
所有規範都帶有歸屬和認定的色彩。如果道德是屬於歸屬的問題,那些被視為外人的人,會被當成違反道德準則的偏差者對待,不是因為他們做了什麼,而是因為他們就是他們。在不同形式的社會不平等和壓迫中,這扮演關鍵的角色。
功能學派的學派的觀點是有了規範社會才能運作。但這個觀點沒法看到的是:規範可以排除和壓迫社會上某些人。我們很難理解為什麼一個需要有這樣的安排,讓其中有些團體取得優勢,而讓其他成員承受痛苦。(價值的方向性?)
從社會學的衝突觀點來看,比較能理解社會中存在的有系統的排擠、剝削、宰制和濫權。優勢團體會藉著自己的權利和影響去形塑文化以利於自己的利益;包括保護自己的特權。資本主義中有資本的人有權力,他們會形塑一個文化來保護有資本的人,所以在文化中特別強調不是每個文化中有的「私有財產」的概念。價值為影響別種價值,所以看起來只是保護財產的規範,也可能維護者以特權和不平等為基礎的社會秩序。社會生活的每個面向就是:我們在容易直接了解當地看到的連結關係,其實只是冰山一角。整體理解是社會學實踐很重要的面向,能帶我們深入表層,發覺背後關係的連結。
文化的態度:文化作為感覺。信念、價值觀和規範,對我們如何認識真實,如何思考真實,言行舉止該如何,有很大的影響。他們使我們對人們(ex: 同性戀)有某些感覺。對在這文化中,這類被辨識出來的角色,社會對他們的期待是什麼,有沒有合乎社會要求。這態度主要是感情的(情緒來自大腦邊緣系統的辨識),也就是說你所感受到的情緒,沒經過大腦思考(前額葉),就直接受到你所認同的文化態度直接影響。感情、信念和價值的混合體正式文化態度的核心。
我們建構的真實是非物質的,也是物質的。物質文化之所以存在,是因為人有改變世界的能力。同時也改變了文化、改變了自己。是人改變物質世界、物質世界改變文化、文化改變人的循環。例如,紙張和印刷術的出現,讓社會團體想透過控制它,來控制訊息的傳遞。以前一段時間,要有良民證才能擁有一部打字機。資本主義下越來越有一個趨勢,那就是出版社隸屬於,一個與出版毫無關係的大財團下,以便對觀點的流通進行社會控制。
一個穩定的社會文化,一定有其存在的原因,相較於其他文化的優勢、特權,能從文化競爭中搶到更多資源。
社會控制的問題和印刷機器或電視攝影機之類的物質文化的存在與否關係較少,而是和這類物質文化在某一體系中的運用有關。如果我們忽略了物質本身和使用物質的方式,這兩者之間的不同,那我們進一步就會賦予物質文化自己的生命,以為物質文化可以完全支配我們。就像社會體系中角色和佔據角色的人的差別,物質文化中的東西和使用東西的人,是兩個不同的概念。
物質文化是社會文化的一個重要的部分,對於社會一樣。人也常忘了意識到自己所處的物質文化,也只是眾多物質文化其中之一。人是可以改變物質文化的。
我們太容易忘記,文化的總體其實是人類豐富潛能想像的產品。哲學家蘇姍朗格寫道:「我們活在觀念的網絡中,編織網絡的纖維是我們自己創造出來的。」我們就好像住在一個由文化建構的小盒子中,不論是在家庭中、在工作場所中,或是社會中都是如此。我們的視野很少能夠超越小盒子,主要的原因是... 我們連這小盒子的存在都不知道。住在盒子裡,我們看不到外面,就以為自己的文化是最好的、是唯一的文化,這就稱為「種族中心主義」。只有意識到盒子的本身,其他可能性才會開啟。
在複雜社會中,主宰的團體往往用他們建構真實的文化觀念去應用到其他人身上。
文化可以同時引導我們往兩個方向看。文化可以讓我們往內看,看到我們特殊的文化盒子的有限空間。也可以指向盒子本身,引導我們去想像:我們同時在盒子的裡面和外面。這是個充滿能量的經驗。
[第三章 - 社會生活的結構 p99~p147]
和文化一樣,社會結構的概念是一個社會學實踐的重要關鍵,因為它相當程度地決定了社會生活最令人熟悉而且可預期的樣貌。文化概念形塑的我們如何思考、如何感受。結構則將這些文化概念統整到各種連結人與人、人與體系、體系與體系之間的社會關係。
當我們在生活中經歷了某些戲劇化的變化時,我們會覺得迷失,這是因對我們在一個或多個社會體系中的結構位置改變了。自己的社會位置是什麼,這個問題意味著「我是誰、能做什麼、該做什麼、意義及目標是什麼」。找不到位置的話,也失去了定位體系,這時候我們就會感受到迷失。
社會結構有兩層意義:第一層意義是關於社會生活各層面中的社會關係是如何安排。第二層意義,社會結構指的是社會體系中各種資源的分配。分配包含每個角色的資源和權力,以及人們在角色位置的分配。
一個人的「身份地位」就是一個人在體系中所佔據的結構位置;而我們「參與」一個體系的意思就是我們在這個體系中佔據了一個以上的身份地位。在這裡「身份地位」既是位置,也是佔據這個位置的人。請注意這兩者之間的差異,任何人都可以佔據這個身份位置,不管有沒有人佔據,這個身份位置都會存在。
這種「身份位置」與「佔據此身份位置之個人」之間的區分,對於理解社會生活如何運作有關鍵的意義。如果我們混淆了這兩者的話,我們很可能會犯了企圖用個人因素來解釋社會結構現象的錯誤。
總統他們只是坐在這個位置上的人。沒有任何一個位置只賦予在位者權利而不同時加諸各種限制的;他們所居的職位和一個巨大的職位結構連在一起,這個結構不僅只有政府內部、也有政府之外的一些位置。這些關係正是限制了總統能做什麼、不能做什麼的因素。
更複雜的事,我們同時身處於各種體系之中,這表示我們同時具有許多不同的身份。有些身份是我們與生俱來的,像種族、性別、家庭中的身份。有些身份則是我們在人生過程中獲得的:學生、工人、職員、導師、伴侶、博士。不管是先天或後天獲得的身份,也不論我們是不是真的在執行、實踐這些身份,我們都「具有」這些身份。這些「身份」如影隨形,不管是我們自己或是別人,都用這些身份來認識我們。
還有一些身份是不會隨時跟著我們的,因為他們只存在特定情境之中,像是行人、巴士乘客。情境式的身份必須不斷實踐才能維持,只和我在哪裡、當時在做些什麼事有關。
佔有某個位置的身份意義是:它讓我們和各個社會體系產生關連,提供了我們經歷、參與這些體系時,一條阻力最小的路。身份提供了一整套的文化概念,這就是我們所稱的「角色」,它會在角色所有人和角色關係人身上加諸全套的信念、價值、態度與規範。
當一個人的數個角色的價值有所牴觸時,我們稱為角色衝突。像是教授和異性學生的關係,教授會有「老師」和「情人」這兩種角色。從一個結構的觀點來看,老師和學生的性關係是不可能平等的,因為那些決定了他們在體系中的角色,本質上就是不平等的,也沒有辦法被拉平。只要是老師就必然擁有些權力。由於師生戀這種結構角色所會引起的龐大衝突,一個健康的師生戀關係的機率是微乎其微的。這也是為什麼學校和企業都不鼓勵,或明令禁止類似師生戀這種涉及結構權力關係的親密關係。
人生中很多問題都來自於結構性原因。每個家庭總以為自己是特別的,但卻忘了每個家庭的生活是如此驚人的相似。許多心理治療師不會在沒有見到青少年患者的家人之前治療,因為他們知道個人的問題並不是在真空中發生的。我們的內在情緒生活絕不只侷限於我們的生活世界,他們總是發生在社會脈絡之中。
在許多相似結構的社會中,同個角色都有一樣的行為。這時看一個人行為時,重點就從「這一個人個別來說,究竟是好人還是壞人」轉移到「他們所參與的體系本身究竟乘載了多少鼓勵這個行為產生的因子」。例如:家庭暴力犯罪者都具有「男性」、「丈夫」或「父親」身份的事實,有多少是受大眾文化不斷地將控制與暴力當作「真正的男子漢」的根本標記,將控制與暴力光榮化影響呢?
這不是說所有的錯都是社會的問題,而那些家庭暴力施暴者個人都不需要負任何責任。但是要根本改變目前這種家庭暴力行為模式的話,我們必須了解這些家庭暴力模式和阻力最小的路之間的關聯,以及人們如何決定走上這條阻力最小的路。
資本主義賦予財富高度價值,給你一個價值觀:「擁有某個你現在尚未擁有的東西,幾乎是解決任何問題的答案。」
社會結構與文化價值,會給角色想要的內容和取得的能力、如果想要的內容大於其被賦予的取得能力,這個角色就會容易陷入困境。當他陷入困境,人會產生一種緊張、衝突感,想解決這個困境。方法一,壓力下合法認真的工作。方法二,放棄文化價值、跟自己說那些沒什麼了不起的。方法三,用非法的手段取得內容。方法四,反叛,挑戰現有制度及其不公平的機會分配。
價值的分佈,與滿足這些價值的合法機會分佈,兩個落差越大,偏差行為就越可能產生。但這不意味著高犯罪率是因為人們真的是缺乏他們所需要的東西;這意味著高犯罪率是因為人們缺乏那些旁人都有、而且文化價值告訴他們應該有,而他卻沒有的東西。研究顯示,不論城市的所得平均是多少,在民眾收入最不平等的城市裡,竊盜、搶劫案的發生率最高。
在結構中加入新的角色,社會體系就會劇烈變化。像是生小孩之後的家庭,會發生一些結構現象。
如果體系中的人知道結構就是設計成這樣子的話,他們可能會覺得好受一點。不會只怪罪於其他人的改變、對他的行為。
我們可以問,是體系中的哪些互動模式引起了這個社會現象。
全力是一種不管對方是否同意,權力擁有者都能控制事件、資源與人們能力;權力是一種掌控、強迫、宰制的工具。
對自己身處的社會體系問下面的問題。例如:家庭究竟是什麼?家庭為什麼重要?一個經濟體系應該為參與其中的人做些什麼?
類似文化與社會結構的概念,是我們思考社會生活的工具。讓我們聚焦在生活的不同層面上,最後再把這些東西重新拼裝成一個整體。但這個想法會讓我們把他們視為兩個獨立的事物。但兩者從來未曾獨立存在過。
結構的每一個面向都和文化象徵、文化概念有關。文化影響結構、結構中的人解釋文化,形成因果循環。
[第四章 - 人口與人類生態學]
人 - 社會體系 - 物質環境 - 人,循環。
[第五章 - 我們、它和社會互動 p177~p206]
嬰兒不能區辨世界與自己兩者的差別;對他們來說,所有事物都是以他們為中心的一個大「整體」。因此嬰兒無法認知他人是獨立存在的、有思有感的個體。嬰兒只是以事物存在的方式去聽去感覺,並不能理解我和事物的關聯,也不知道如何解釋他們。
米德提出我們是透過發現他人的內心世界,而學會思索自我的。這些認知最初發生於當人們使用語言談論自己、談論我們、談論任何他們經驗到的事實。語言是連結自我經驗和他人經驗的橋樑。藉由發現他人如何經驗自我,我們發現人類自我的可能性。我們開始意識到自己的觀點,我們以為的事實,其實只是一種觀點。之後就可以用思考其他人一樣,使用概念來思考自我。
自我如同其他建構出來的事實,也是一個建構出來的事實。從文化概念中建構出一個我們是誰的真實。透過角色關係來認識我們的不只是一般人,我們自己主要也是以這種方式來認識自己。
我們是依賴外在資訊與自我的資訊,去建構自我的概念和感覺的。外在資訊的來源主要以兩種「他人」的形式存在。一種是對我而言的重要他人(Significant others);他們像是鏡子一般反映出我們的形象,而我們透過鏡中的形象認識自己是誰。生命初期,自我的資訊都來自於家庭成員、玩伴這些重要他人。社會化之後開始能理解「一般他人」。一般他人不是特定的個人或團體,而是我們的觀念,用觀念想像一般人類會怎麼看待某個社會情境和該情境裡所屬的不同身份的人。
構成一般他人的概念是文化性的,是對身份擁有者的一組概念。
人們只看我們的外表,就認為他們知道我們所屬的身份;聯想我們是怎樣的人。就這層意義而言,我們不只以文化的意義建構真實,因為真實不論就身份、角色和一般他人而言,也全都受到結構的影響。(作者認為文化和結構是獨立的兩件事、我認為結構是文化一部份...)
我們是誰,不在於自己本身,而是由我們對社會體系的參與以及學習如何參與的社會化過程來決定的。我是誰?對誰來說?
沒有了身份和角色,從社會意義上來說,我們就不存在了。這概念並不減低我們作為人的價值;它僅僅意味著我們的存在超越了個體的範圍,個體既不是一切事物的開端,也不是其終點。有些人拒絕任何既定模式而活,反而使他們的行為符合了某種文化模式。
我們如何參與體系的關鍵在於社會互動這個概念,而社會互動的關鍵在於行動(Action)和舉止(Behavior)的區別。有意義基礎的舉止就是行動;而行動則是我們與他人互動、參與社會體系和社會生活的基石。
高夫曼:我們就都像舞台上的演員。不停地自我表演、同時也是觀眾。但我們始終都在做我們自己,即使我們不見得能自在坦然地承認自己在扮演的事實,也不喜歡承認自己用表演來影響他人對我們的觀感。這個我和拒絕承認這是「真實的我」的我,兩者都一樣是真實的「我」。
如果我們沒有辦法不斷意識到我們的自我和我們所參與的社會生活之間的高度複雜性,進而整合我們的各種角色,會是我們因為無知而參與那些會結惡果的社會體系;也會畫地自限,不企圖改變這些惡行。
我們是電視劇中的角色,有編劇寫得最小阻力的劇情,但不同的是每個演員也有自我意志去選擇人生中的行動。如果我們在劇本是壞人的角色,並不代表我們是壞人。但也不代表我們只能演出壞人。我們和體系文化之間的關係是動態的、鮮活的。我們創造了世界;世界也造就了我們。我們同時是文化的客體與主體。
我們就像即興性演出的爵士樂手,沒有學過基礎樂理就不會演奏:必須學會分辨升降記號、大小調,會彈奏不同的和弦,還要能容和節拍、旋律和音調... blah blah。樂手必須知道定義和構成爵士樂這種音樂形式的文化符號和概念;知道這些東西如何影響樂手的思考、聆聽與想像途徑。然而,爵士樂手面對音樂時所依循的社些樂理、文化形式,是他們創作的基礎;樂手可以掰紐玩弄這些「規則」,以一種既熟悉(爵士樂、音樂)又創新的方式,挑戰既有限制。
社會生活和我們的關係,就像爵士樂和爵士樂手們的關係一樣。
社會互動是由人們創造和維持一個特定的現實感所用的各種方式所構成的。社會互動透過行動和外表來進行。行動和外表互為表裡。
社會情境是透過社會真實而界定,而這社會真實也只有在人們主動形塑和維持之下才存在。
我們不斷的用我們對真實如何建構的知識,來理解外界發生了什麼;以及我們該如何扮演我們的角色,讓世界運轉下去。社會中的真實是透過某些模式的社會行動才存在的。這些維持真實的技巧總是一再重複使用,所以往往這些技巧常有儀式性質。像是兩人相愛的親密關係透過,睡前道晚安、吻、掛上電話前說我愛你,等儀式來維持。就像互動儀式中的許多層面,一直要到某方面偏離了這些固定的儀式,我們才會發現這張網上破了一個洞,少掉的那塊就是他們本來應該做、卻沒有照著做的部分。
[第六章 - 實踐社會學,思索未來p207-p238]
「我愛你」是一種有意圖的表演式語言(performative language),第一次說「我愛你」不僅是取悅他人而已,而是一種邀請,一種意圖的表示,想要改變一種社會關係。
若要解決社會問題,我們一開始就得把問題的社會面看清楚。如果這點沒做到,那麼我們對於社會問題的解釋,就會不正確,對於解決問題的方向也會有偏差。如果分配方式不改變,就算人再努力讓排列順序改變,最有錢的一部份人、和最窮的一部份人分配到的比例還是一樣的,貧窮的問題一樣不會解決。
</pre>vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-694443213491547142016-06-01T03:32:00.002-07:002016-06-01T03:36:20.831-07:00大腦超載時代的思考學 The Organized Mind: Thinking Straight in the Age of Information Overload<div class="separator" style="clear: both; text-align: center;">
<iframe width="480" height="320" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/aR1TNEHRY-U/0.jpg" src="https://www.youtube.com/embed/aR1TNEHRY-U?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />
<pre>
演講摘要:
我今天要講三個大主題:多工(Multitasking)、延伸大腦(Brain Extender)、決策(Decision Making)。
不過在開始之前我想先說一下為什麼我寫了這本書,過去十年的神經科學發現了許多「為什麼大腦對某些事情注意、而對其他事情忽略的」的原因。我相信大多數人都可以用這些資訊來更好的組織時間、家裡的事物、工作環境。
講了現代資訊過載的問題,一堆數字...。
我們可以怎麼做?大部分人想嘗試多工,不過現在的研究顯示,多工在人大腦是不存在的,大腦只能快速的在循序中切換。多工會造成釋放和壓力相關的...,幾個小時多工後會很累。大量多工的工作(航管員、同步口譯員) 都會安排中間休息的時間。根據研究,多工會降低產出。但大腦會欺騙自己多工也許是有用的,就像喝醉酒之後覺得自己很好一樣。
那我們要怎麼辦,我們可以像航管員、同步口譯員一樣中間休息一下。研究顯示這樣會讓員工有更好的生產力和更好的產出。像是每幾個小時就有15分鐘的休息。小睡一下很有用,白天小睡15分鐘有時候等於夜裡睡一個半小時的效力,能提高你的IQ 10點。小睡一下會讓大腦補充用完的 glucose;而中間休息可以讓你進入另一個不同的注意力模式。
人類大腦有兩種主要的注意力模式:中央主導模式(task positive network)、白日夢模式(default mode of brain / task negative network / mind wandering mode)。在白日夢模式你會開始覺得事物開始連結、以非線性思考的方式。所以在兩個模式交互切換是很重要的。
注意力切換(attention switching)和決策(decision making)會消耗大腦中的燃料。明確的說,會消耗讓葡萄糖(glucose),讓葡萄糖是神經元運作代謝需要的物質。而且讓葡萄糖並不能無限量供應,不管是大決定還是小決定都會消耗這個燃料。即使在挑選筆的顏色,你也在消耗人生重要決定的燃料。而切換到白日夢模式會讓你的大腦回到預設模式,讓葡萄糖(glucose)重新恢復。小睡一下、小中斷、去渡個假都很有幫助。當我說小中斷(take a break)指的並不是回電子郵件、去看個電視,這樣並不是中斷(break)。而是真正的中斷,讓你的大腦可以真正的做白日夢(really wander)。而我們每個人都有自己的方式可以開始白日夢模式。這個方式也許是,運動、在自然中散步... 像是快思慢想的作者,每天的下午都會找一段時間在史丹佛校園中散步,據他所說大部分的好想法都是那段時間產生的,這不是巧合,這是一個恢復的行為。
根據研究,那些一週工作六十小時的人的產出只有比一週工作四十小時的人的產出多七個小時。想一想是不是值得多花二十小時得到多七個小時的產出。
所以我們該怎麼辦,怎麼專注的做事情?一件專家會做的事是「強迫有生產力的時間」(enforce productivity hours)。他們會在一天中找一段時間,讓那段時間完全不會被中斷、打擾,關掉電子郵件軟體、甚至關掉手機。讓他們能進入全神貫注的狀態。如果你無法關掉電子郵件軟體,因為可能會有突發狀況進來,那試著開一個私下的帳號,告訴其他人有緊急的事才用這個郵件位置。不緊急的事請,送到那個公開不常開的帳號。 很多成功的執行長、藝術家都這樣的切分人生的時間,一次只做好一件事。
接下來我將切換到談,大腦延伸器(Brain extender)。這是一個簡單的想法。如果你想要有生產力,不要把不需要的東西放進大腦裡。像是聽到明天會下雨,與其在腦袋記著說要帶傘、要帶傘,還不如把這個資訊放到環境裡面去,像是把傘從櫃子拿出來放到門邊,然後它就會在你出門時提醒你。另一個例子是設計心理學中門的例子,為什麼人要記得門要推開還是拉開,直接用設計隱藏預設用途就好(拉的話放門把),像是廁所的門。另一個方式外部化是我們把事情寫下來。而把事情寫下來,其實比打字下來更適合,因爲寫字時的引發的神經活動是不同的,大腦會更深入的去處理這個資訊。最後一個例子是 Google,我們不用記得細節,只要記得關鍵字,就可以找到我們要的資訊。
最後我想說的是決策(Decision Making),我們現在擁有的資訊,能讓我們做出以前不能做出的決策。特別是在醫學上資訊的過載,而醫生並沒有受過大量資訊決策的訓練,像是取得和分析。我覺得我們的教育應該要開始改變,要教導資訊處理(information literacy),而不是之前教育的大量事實。教導他們要如何有創意的使用這些事實來幫助他們去解決真實世界中的問題。判斷資訊到底是否可信。舉例了醫生決策有多複雜,因為每種藥都有有效率、多種副作用的成功率。我覺得像這種判斷應該從八歲開始教。
——
29:30 開始 Q&A。
做決策的時候先把事項排優先順序,在狀態好的時候把大事情處理完。
注意力缺失症?他們的白日夢模式很強,也就是說他們創意很強,但沒法做不完事情,也許他們可以和其他過度專注的人合作,會很成功。
Motor learning怎樣會有效率?光只是重複性的運動並不是很有效,你必須有意識地、有目的的做那件事。音樂家叫這個故意練習(deliberately practice)。鋼琴家想像練習時不光只有想像手指怎麼動,還要思考音符的意義.... blah blah practice mindfully.
夜晚六到十小時的睡眠,會經過一個記憶鞏固(memory consolidation)的過程,神經元會重新重現、處理白天有過的神經活動,然後想辦法讓它進入長期記憶、連結、 儲存他們。如果你白天很努力的工作四到五個小時,取得很多的資訊。這時候小睡一下,大腦會進入睡眠階段,開啟了神經元重啟的按鈕,讓某些迴路變的放鬆,你會預先處理一些資訊讓晚上再做後續處理。
</pre>vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-90047401603980804312016-05-28T07:07:00.001-07:002016-05-28T23:30:59.579-07:00使用者故事對照/地圖演講摘要 (User Story Mapping) <div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/AorAgSrHjKM/0.jpg" frameborder="0" height="320" src="https://www.youtube.com/embed/AorAgSrHjKM?feature=player_embedded" width="480"></iframe></div>
<pre>摘要:
「使用者故事地圖」是一種資訊架構。其目的是讓人們在設計的過程中更容易「透過溝通來建立共識、對系統有全盤理解」。結構的設計讓人可以持續修改、組織、引用、溝通設計的想法,重視呈現每個想法間的相互關係。是「便利貼技巧」+「使用者中心設計」+「敏捷開發」的整合運用。
—
講者:Jeff Patton, 來自敏捷的社群、當過軟體工程師、專案經理。
在當專案經理的時候,接觸到使用者故事 (user story),當時覺得這個名字很蠢,為什麼要用這個字。過了十年之後才了解故事(story)的意義。故事地圖(story map)是一個說大故事的簡單方法、它把大故事分解成更小的部分。然後對每個部分,實作的人會加上更多的細節把產品做出來。
我從2000年就開始用故事 (story) 這個字。故事這個字從一開始就被誤解,我接下來會說明故事代表的意思。故事會解決軟體開發中兩個問題,但這兩個問題都不是寫更好的需求 (requirements)。
<b>第一個問題:寫文件沒啥用 (Documents - just don’t work)</b>
<b>第二的問題:太多東西要做 (Too much to build)</b>
想像一個簡單的電話對話。blah blah 講了光靠電話描述,麵包店做出了許多奇怪的蛋糕。類似事在軟體公司也經常發生。文件寫完之後,做出來的產品就是不對。這邊的問題是,當我們分享、同意和簽署的文件,<b>我們只能相信每個人是理解的(意指每個人其實理解的都不同)</b>。之後 Kent 就想出了解決文件問題的方法,那就是不要寫、不要交換文件。用「告訴我你的故事」取代:如果我們能直接討論這個,我們可以一起想辦法 (figure it out together)。
如果你想說什麼,寫在一張卡上。然後你會找到負責實作的人,一起討論、知道到底做出來會怎樣。用故事這個名字的原因來自「我們怎麼使用它」(how we use them) 而不是「我們怎麼寫它」。有多少人用 Scrum?backlog? 問題在現在的 Scrum 會議中,許多人來參加、許多人都在做自己的事,「故事」本來想要帶入的有效溝通早就被忽略了。常常的情況是幾個人會說話,大部分人就只是在聽、在發呆,<b>沒有相互溝通每個人理解到的是什麼。因為每個人心中的思考是無法被觀察的,只有當我們說出自己的思考、畫些圖片,我們才能察覺到每個人思考的差異,這時候我們才能真的達成共識 (really get it)。</b>如此在這個會議之後,當我們說到同樣的東西,才會代表同樣的意思、代表同樣的事情。不然會議中的共識,其實完全沒有達到共識。
光分享文件、並沒有分享理解 (Shared documents aren’t shared understanding)
透過文字、圖片的討論會讓每個人建立共同的理解。在 Atlassian,他們在牆上貼的不是工作列表,他們把那些放到 JIRA 軟體。他們貼在牆上的是一堆便利貼 / 草圖 / 線圖稿,每個都代表一個故事。他們討論故事。每個團隊,都有各自的故事們,然後做站立會議中,他們指著牆上的便利貼說,我今天做這個 JIRA Ticket。指的同時也指出了這個 JIRA Ticket 在整個大故事的位置,回憶起細節、為什麼現在要做它。那張便利貼就像一張在夏威夷的照片,<b>你可以說出照片外的細節,因為便利貼是你們一起討論出來的。</b>
<b>第一個問題的解法:我們靠說故事 (story telling) 來建造共同理解 (shared understanding)</b>
---
我們的工作不是建造軟體,我們的工作是改變這個世界。這聽起來也許有些誇張。但這邊我們講的不是世界和平、非洲的飢荒之類的事。這邊說的<b>世界指的是我們身邊、我們有能力去改變的事。</b><b>這個世界的邊界是我們的產品</b>,透過看著會使用產品的人,我們有了新的想法,產生新的需求。需求 (requirements) 的目的就是我們背後有了好想法能夠幫助用產品的人。把現在的世界畫一個圈,有產品後的新世界的畫一個圈,我們要觀察現在世界的產出(output)、新世界有這個產出後的結果 (outcome),像是產品的使用心得、影響 (Impact)。<b>先前說的想法 (idea) 的問題是「每個人都有想法」。</b>所以每個人的想法就會轉成越來越多的事情要做。我們的目標不是加快產生出垃圾(our job is not to build more crap faster),我們的目標是做更少的產出 (our goal is to build less)。當你做更少的產出,你試圖最小化產出 (output) ,同時最大化結果 (outcome) 和影響 (Impact)。
之前工作的時候,知道了下一次產品發行的需求列表後,去問他們「使用者是誰?解決了使用者什麼問題?」。得到的答案是:「這些是需求 (requirements)」,當時我就知道需求還有另外一個意思 — 那就是閉上嘴 (shut up)。他們真的以為需求列表,就真的如同字典上的意思代表了必須要做的事。實際上它們並不是... 因為不可能實作所有的需求,光只有需求沒法最小化產出、最大化結果。故事是需求 (requirements) 的解毒劑。
引用 Kent:「軟體開發已經被需求 (requirement) 這個字導入的錯誤的方向,這個字在字典裡被定義為需要做的事 (something mandatory or obligatory)。這個字帶有絕對和永久的一役、抑制了擁抱變化。需求 (requirements)這個字完全是個錯誤」
我們要說誰做什麼、怎麼做、為什麼做 (talk about who doing what and why)。討論和協作要專注在誰會用這個產品和他們拿到這個產品之後會怎麼使用它。基本上,你必須要<b>想通整件事</b>。舉了一個漂亮的嬰兒形狀蛋糕的例子,蛋糕看起來很漂亮,但要吃的時候就必須把嬰兒切開,這應該是沒有把事情想通的做法。
<b>第二個問題的答案是:透過理解產品是為了誰、做什麼、為什麼這樣做,來最小化產出。</b>
如果正確的使用故事,就可以解決這兩個問題。
但我們會碰到一個問題,很多很棒的想法,怎麼轉變成 scrum 中開發的故事裡 (1~3天可完成、可被估計、可測試、可被展示...)。這邊講一個故事,Rachel 是90年代的一個專案經理,當他去跟工程師問說每個的工作項目是為了誰、為什麼要這樣做的同時?發現工程師瞬間就開始說這個東西好像不是一定要做、也許在別的地方做會更好。很多人根本就沒把事情想通。於是,Rachel 就寫了一個聰明的溝通小卡:
標題:寫一個好的故事
As (who)<who> to (do what) <what>so that (why)<why> 的例子,當作一個容易開始討論的起點 (conversation starter)
就這樣定義出了常見使用者故事的格式(story template),但如果用這個格式當作 scrum 中的 backlog 項目,應該會覺得有些卡卡的,因為這個格式本來不是拿來這樣子用的。它本來是在探索階段,拿來引導討論那些大的好想法的,那些要被分成更多 backlog 的項目。
這邊舉了一個 Gray 用敏捷開發流程開發音樂服務網站的例子,Gray 把所有要做的代辦事項排序之後,就從最優先的事情開始做,進度一直都有進展,但一段時間過去,開始覺得事情做不完,而且無法估計什麼時候整個系統可以上線完成。Gray 這時候就問了,有沒有其他不用敏捷開發流程的方法。這是我碰到他當時的情況。我們一見面談的不是開發方法,而是討論定義想法(Frame the idea)、為什麼要做這個產品、對使用者的了解、使用者的目標是什麼。開始討論想法,寫下想法在便利貼上、移動想法、組織想法。討論使用者一整天會怎麼使用這個產品。Gray 說、然後我用便利貼紀錄下來,這是 Gray 第一次看到整個產品看起來會是怎樣子。之後才開始探索細節,分成更多步驟、替代方法、UI的設計、技術細節。之後就可大概估時間,挑出核心的部分來做,發現這些核心都是之前用待辦事項開發幾個月沒做的部分!!!之後這個產品就順利上線了~
以上是影片前55分鐘的摘要,後來開始用影片舉例子,還是直接看影片吧~
你會看到許多使用者故事地圖開發的過程和樣子。後來還有說 MVP 的概念,提早驗證、提早學會。把 MVP 分成數個階段,讓每個階段都能透過驗證來學習、改變產品方向。和一些其他秘訣... 像是油畫草稿和 protyotyping和迭代的重要性。
作者的總結:
1. 改變你工作的方式:跟別人說故事,而不只是寫故事
2. 用簡單的視覺化去代表你說的故事
3. 要把整個故事都放到地圖上,來找出最重要的部分
4. 把事情想通:減少產出、增加結果和影響
5. 建立最小可行產品測試,來學到什麼是市場中最小的和可行的
6. 用疊代和漸進的(原型 / 草稿式)的方式來建造產品
有效率的故事們能幫助每個人朝向產品成功而工作
Q & A 從一小時二十分開始
—
就結構來說是把敏捷開發流程中的待辦事項列表用一個某種可變網狀系統資訊結構取代。
</why></what></who></pre>
vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com1tag:blogger.com,1999:blog-1190814513563341266.post-84983131327443703912016-04-28T10:22:00.003-07:002016-11-11T17:20:23.087-08:00資訊架構學是什麼?<pre>
這邊試著用解構的方式來說明資訊架構 (information architecture) 這門學問。
設計活動就是在某些限制下,生出某個東西來達成某個目的的過程。
所以可以理解「設計資訊架構」的過程中,設計出來的某個東西指是「架構/結構 (architecture / structure)」、而且這個架構的改變對象是「資訊」(information),接著透過新產生的「資訊互動」達成我們的目的。
簡單說,資訊架構透過設計「結構」、讓人和「資訊」有不同的互動,來達成我們背後期望的目的。
舉例來說:
1. 程式碼的資訊架構
結構:檔案命名、目錄名稱、放的位置、如何引用、設計模式
資訊:程式碼
目的:讓程式碼容易被理解、容易修改、容易查找、容易維護
2. 網站的資訊架構
結構:搜尋列、標籤、sitemap、瀏覽列、超連結、分頁...
資訊:文章、圖片、服務、功能
目的:讓人能找到想要的資訊、讓購買率上升、讓使用者達成他想做的行為
3. 書本的資訊架構
結構:段落、內容的順序、章節、標題、註解
資訊:文字、圖
目的:讓人更能透過閱讀能理解內容
4. 愛買的資訊架構
結構:商品走道的規劃、服務台的位置、結帳的位置
資訊:商品、愛買提供的試吃服務
目的:賣出更多商品
5. 臥室的資訊架構
結構:物品的擺放位置 (櫥櫃裡、牆面)
資訊:物品
目的:主人想...
<b>資訊是相對的</b>
對不同的人,同樣的資料會是不同的資訊;在不同的環境(context)下,同樣的資料會是不同的資訊。資訊不光只有資料、在電腦科學裡,功能/函數也是資訊的一種。
<b>設計的目的是多方向的</b>
有設計者本身的目的、有對使用者的目的、有對其他關係人的目的。也就是說,只要是跟人相關的活動都要理解這些人想要的是什麼、目標是什麼。和使用者中心設計 (User-Centric Design) 一樣。
<b>設計模式 (Design Pattern / Design Principle)</b>
只要是設計就會有比較好的設計模式來增加設計的成功率。所以通常我們在資訊架構中所學的就是這些「架構的設計模式」,對不同的資訊、不同的目的、不同的人都會有不同的「架構的設計模式」。評估一個「架構的設計模式」的方式就是觀察資訊擺在這個架構下,資訊到底會有什麼不同,能達到什麼不同互動。
<b>被架構後的資訊</b>
資訊經過架構後還是資訊,資訊的不同點不外乎就這些:資訊容易不容易「理解、瀏覽、找到、關聯、傳遞、同步、容錯、不失真、記住、更新、處理、新增、刪除...」 根據不同的設計目的,設計不同結構,讓原來的資訊的這些面向變得不同,以達成我們的目的,這就是資訊架構學的使用方法。
<b>Domain Knowledge</b>
架構的設計模式太多了、資訊也太多種類、人也太多種,細節就看相關領域的書吧~ 只是時時記得,有「變動世界的架構」的選項,變動後一切就會變得不一樣。就像 google / facebook,完全改變了人們和資訊的互動方式、產生方式。
facebook的資訊架構
結構:News feed & notification 系統 & 好友列表
資訊:發文、按讚、分享、加入社群的行為、閱讀時間
目的:讓世界變得充滿萬惡的讚能量、讓人都只看到自己想看的
最後說一下,其實設計流程是結構的一種、結構也是資訊的一種,從資訊流動來看世界是不是越來越有趣了呢?下圖是資訊架構和其他領域的關係。
</pre>
<div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-i0LfHhueZE0/VyLLxBozfrI/AAAAAAAA4d0/RNN2m0bbHxY1APCUV5Rn-O9d-Th5sV0XwCKgB/s1600/IMG_3868.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://2.bp.blogspot.com/-i0LfHhueZE0/VyLLxBozfrI/AAAAAAAA4d0/RNN2m0bbHxY1APCUV5Rn-O9d-Th5sV0XwCKgB/s640/IMG_3868.JPG" /></a></div>
<pre>
在使用者經驗分層中,每層都是息息相關的,如果哪一層壞了,整個就壞了。所以從上圖我們可以知道:要做好資訊架構,我們必須做好設計研究、對內容有了解、對功能有能力去實作;要展現好的資訊架構,我們必須做好互動、介面、資訊、視覺設計,不然光只有好的架構,使用者經驗不會好。所以... 工作的時間到了。
參考:
1. Eight Principles of Information Architecture, 2010 - Dan Brown
2. Information Architecture 100, 2013 - 長谷川敦士
3. The Elements of User Experience, 2010 - Jesse James Garrett
4. Information Architecture: blueprints for the web, 2009 - Christina Wodtke and Austin Govella
</pre>vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-17674730356554469262016-04-10T00:58:00.001-07:002016-04-10T01:02:02.380-07:00”redux.js --- 可預測的狀態容器“ 的 API 使用說明<pre>
這邊只會透過理解 Redux 的 API來簡介如何使用 Redux。這邊假設讀者都知道 web 中 event / listener 的 pattern。
如果想要知道 redux 背後的實作細節、原理、動機、Flux、Design Pattern、如何和 UI App 做連結,請看 Dan 的 Redux gitbook、Redux tutorial on EggHead。
<b>redux 是一個狀態容器 (state container / state machine)</b>
狀態容器要提供幾個功能
1. 初始容器狀態 <i>by Redux.createStore(<b>reducer</b>)</i>
2. 取得現在的狀態 <i>by store.getState()</i>
3. 狀態改變時,通知相關的程式 <i>by store.subscribe(<b>listener</b>)</i>
3. 接收事件發生的通知、改變狀態 <i>by store.dispatch(<b>action</b>)</i>
4. 建立之後改變事件處理方式 <i>by store.replaceReducer(<b>reducer</b>)</i>
5. 由小的狀態容器組成全域狀態容器 <i>by 只能透過 combineReducers 來組成 root reducer,再用它來建全域狀態容器</i>
Flux 專有名詞:store、action、reducer。
store := 一個狀態容器
action := 一個像 Event 一樣有 type 屬性的 javascript object
reducer := 一個輸入 state 和 action、回傳新 state 的函數, (state, action) -> new_state
但 store 是 redux 中唯一一個狀態容器的名字。其實 API 等同於下方這樣子
1. <i>by Redux.createStore(<b>reducer</b>)</i> 等於 <i>by Redux(<b>reducer</b>)</i>
2. <i>by store.getState()</i> 等於 <i>by Redux.getState()</i>
3. <i>by store.subscribe(<b>listener</b>)</i> 等於 <i>by Redux.addListener(<b>listener</b>)</i>
3. <i>by store.dispatch(<b>action</b>)</i> 等於 <i>by Redux.dispatch(<b>action</b>)</i>
4. <i>by store.replaceReducer(<b>reducer</b>)</i> 等於 <i>by Redux.replaceReducer(<b>reducer</b>)</i>
5. <i>by 無直接 API,只能透過 combineReducers 來組成root reducer,然後用 root reducer 來建全域 store</i>
一個狀態容器 = 狀態 + reducer,但 reducer 中可以指定初始狀態、所以一個 reducer 其實可以定義一個狀態容器、等同於一個狀態容器,所以 API 等同於下方這樣子
1. <i>by Redux.initContainer(<b>reducer</b>)</i> 等於 <i>by Redux(<b>container</b>)</i>
2. <i>by Redux.getState()</i>
3. <i>by Redux.addListener(<b>listener</b>)</i>
3. <i>by Redux.dispatch(<b>action</b>)</i>
4. <i>by Redux.replaceReducer(<b>reducer</b>)</i> 等於 <i>by Redux.container.replaceReducer(<b>container.reducer</b>)</i>
5. <i>by 只能透過 combineReducers 來組成 root reducer,再用它來建全域狀態容器</i> 等於 <i>Redux.combineContainer</i>
把 combineContainer 用 addContainer 取代,API 可以改寫成這樣子
1. 初始容器狀態 <i>by Redux()</i>
2. 取得現在的狀態 <i>by Redux.getState()</i>
3. 狀態改變時,通知相關的程式 <i>by Redux.addListener(<b>listener</b>)</i>
3. 接收事件發生的通知、改變狀態 <i>by Redux.dispatch(<b>action</b>)</i>
4. 建立之後改變事件處理方式 <i>by Redux.getContainer(<b>name</b>).replaceReducer(reducer)</i>
5. 由小的狀態容器組成全域狀態容器 <i>by Redux.addContainer(<b>container</b>)</i>
6. 建立小的狀態容器 <i>by Redux.container(name, initialState, reducers)</i>
<code>
所以翻譯過後 redux api 的使用流程就會變成
let addReducer = (state, ADD_ACTION) => state++
let subtractReducer = (state, SUBTRACT_ACTION) => state--
counterContainer = Redux.container(
'counter',
0,
[addReducer, substractReducer]
)
Redux.addContainer(counterContainer)
class CounterComponent {
constructor(props) {
this.stateChangeListener = (state) => this.setState(state)
Redux.addListener(this.stateChangeListener)
}
componentWillMount() {
this.setState(Redux.getState().counter)
}
onAddButtonClick() {
Redux.dispatch(ADD_ACTION)
}
onSubtractButtonClick() {
Redux.dispatch(SUBSTRACT_ACTION)
}
...
}
</code>
總結,可以看出來 redux 最大的特點就是用 reducer 來定義 container state 的處理範圍,不能用 event callback 的概念去理解它,一個 reducer 對應到“一組” state、多個 actions。
所以在 Redux 中 reducer 差不多是 container state scope 等價。也因此在 Redux 中 sub-container / sub-store 的名字完全被省略了,你只能用 reducer 的名字來找到他們影子。只要知道這個規則大概就能夠理解 Redux 了。
reducer := (state, action) -> new_state (你找不到 container 的名字、它被省略了)
老實說,我覺得這樣子的開發者經驗很不舒服 (bad UX)
---
不知道 re-frame 的 UX 會不會比較好?
</pre>vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-18599572942447080102016-03-04T01:55:00.000-08:002016-03-05T13:32:57.700-08:00如何讓程式可維護 / 重構的方向 / 程式開發中的互動設計<pre>
要解決的問題:
I. 當要程式中增加功能、解決 bug 時,能:
1. 有概念知道「要修改的地方們」在哪
2. 能快速切換到「要修改的地方們」
3. 能在「要修改的地方們」之間快速切換
4. 「修改的地方們」很容易修改
5. 「修改的地方們」不多
II. 當程式要重構時,能:
1. 測試重構後,外部行為是否一樣
2. 輕易搬移搬動程式、不產生 bug
解法:
把程式切成小區塊,每個區塊只負責單一功能,幫這些區塊建立資訊架構,架構中設計狀態的流程管理。對應工作內容規劃工作環境。用多次微重構,代替大改。先重構、再解 bug、最後才寫新功能。在多人開發、或經常重構的專案,對穩定的外部 API 建立自動化測試。
好習慣:
<b><u>把程式切成小區塊 ( ex: 4 - 30 行的小 chunks)</u></b>
好處:
好理解、好修改、也容易增加新功能、能塞進人腦的工作記憶裡
方法:
每個程式區塊 = 一個檔案 or 一個 function or 一個 folding
每個區塊行數 (after folding),大於一個螢幕可以顯示時就要 Refactoring
<b><u>每個區塊只負責單一功能</u></b>
好處:
容易重複利用、減少 dependency、容易理解、容易找到 debug
方法:
多寫純函數 / Stateless API、良好函數/模組命名、註解輸入/輸出參數
<b><u>建立程式碼的資訊架構</u></b>
好處:
容易找到要修改的地方 (在人很有限的 short-term memory 消散之前)
方法:
把程式碼區塊分類
依功能:模組 / MVC / 前後端 / 測試 / Layout or 細節 / Stable or Develop / Web or iOS or Android
依架構:樹狀主從架構 / 分階層 / Data Layer / Rendering Layer
依時間:version
<b><u>在架構設計中使用流程管理</u></b>
好處:
增加可預測性、減少程式碼依賴
方法:
單向資料流、State Machine、Single Source of Truth
<b><u>對應的工作內容建立環境</u></b>
好處:
在程式碼區塊 / 外在環境中移動時,大腦不會 context switch
Web 互動環境設計:
1. 要規劃在下列環境簡單移動的方法 (環境一樣要有架構、資訊權重)
a. editor & browsers
b. shell / server / database / git
c. editor 中的不同檔案
d. 同個檔案中的 區塊、行、字母
e. MDN / stack overflow / Google Search / Github Search
2. IDE / shortcut switch / 多螢幕環境 / 切割螢幕畫面
3. Font / Syntax Highlight / AutoComplete / 文法檢查
<b><u>Micro-Refactoring</u></b>
好處:
一次改一點比較好測試、失敗的損失也比較低
<b><u>改程式碼的優先順序:重構 > 修 bug > 增加功能</u></b>
好處:
重構會讓修 bug 變簡單、修完 bug 會讓增加新功能變得簡單
<b><u>為不常改變行為的外部 API 建立自動化測試</u></b>
好處:
每次重構時能夠確定沒有破壞這些 API
—
Simplicity is the prerequisite for reliability — by Dijkstra.
因為我們是人類,只有相當有限的注意力、短期記憶和工作記憶空間。
</pre>vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-84988155264759753342016-02-07T22:04:00.001-08:002016-05-01T01:54:24.912-07:00從買蘋果看工程師和設計師的差別?<pre>
高中的時候,有個留級的朋友問我,你會不會覺得唸這些東西一點用都沒有。書呆子的我,帶著疑惑問:「為什麼會這樣覺得?」但現在過了 15 年,我真的很想問那時候的我,為什麼不會這樣覺得。
工程和管理的訓練是解決問題,而設計師受的訓練是發現真正的問題。
--- from 設計的心理學 by Donald A. Norman
<h3>聽到「幫我買一顆蘋果」這個問題,工程師會這樣做。</h3>
工程師:花一小時,找出一大堆的購物網站,列出各種蘋果的價格和評價,然後請你挑最好的一個。
妹子:我只是想和你見個面聊個天,為什麼我必須要看那麼多資料... 而且還要我上網訂、見不到面,還是放棄治療好了。
<h3>聽到「幫我買一顆蘋果」這個問題,設計師會這樣做。(這邊設計師不含 VD)</h3>
情況一:
問:你為什麼要買蘋果?
答: 因為想幫房間增加一點紅色。
問: 為什麼想幫房間增加一點紅色?
答: 因為想把房間變漂亮?
解: 設計師把房間的燈從冷色系換成暖色系。
情況二:
問:你為什麼要買蘋果?
答:因為我肚子餓。
問:可是你不是剛剛才吃完飯?
答:嗯,對喔。(OS: 我只是看你太閒,要給你一點事做。)
情況三:
問:你為什麼要買蘋果?
答:因為要吃。
問:你為什麼要吃?
答:我每天都要吃一顆,今天沒帶。你廢話那麼多要幹麻?(OS: 這個下屬理由很多。)
工程師和管理把問題往下展開。
設計師把問題往上展,如果找到更簡單的問題再往下展。
<h3>工程師:直接把問題往下展開:</h3>
優:能最快速找到這個問題的解法。
缺:你解決的可能根本不是重要的問題。
<h3>設計師:把問題往後回推,找新問題解</h3>
優:也許能找到真正需要解的問題、花更少的時間就能解決問題。
缺:別人會以為你不想理他在找藉口。老闆會以為你在故意質疑他。如果原來的問題本來就是對的問題,你只是在浪費時間。
<h3>理性與感性</h3>
「現階段的實際工作中,設計師們無論是在方案的設計還是方案的表達上,往往都顯得感性有餘、理性不足。」
--- by 汪方進 @ 阿里巴巴 1688用戶體驗部
一個設計師,不光只有同理心、邏輯推理能力、各種知識也很重要。沒有知識不能推理啊... 所以工程師們快和我一樣跳進來吧~~~ 當設計界的理性之光。其實就演算法的角度來看,就是兩種不同的方法,各有各的使用時機、各有各的風險報酬,如果要能解決生活中的問題,這兩個都很重要。所以也別分什麼工程、設計、商業,如果有需要就學吧。大學四年可以學一個專業,但人生有多少個四年啊... 是不是該多學幾個專業 XD
註: 把視覺設計師(VD)和程式設計師特別切出來的原因是:他們的工作都偏向在給定的問題中找解法、做的是實作中一定要做的事。但真正優秀的會去觀察使用者。(工程師的話推薦看:程序員的修煉、駭客與畫家,都有提到這點)
註:上面的對話都是我的想像舉例,別太認真。想知道真正答案的話,或是測試這個人的工程設計傾向,可以請他幫你買顆蘋果看看。
</pre>vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-81000790473282047032016-01-29T00:08:00.002-08:002016-01-29T08:58:06.121-08:00淺談函數式編程和 React<pre>
函數是有定義介面的運算單元。
介面有用的地方是抽象化,你只需要知道輸入什麼(Input)、會得到什麼輸出(Output),你不用知道它細節是怎麼做到的。其實有個超能力在背後,也沒關係。當然這是在沒有碰到 bug 和有良好文件、不需要修改它的前提之下。
再強調一次,你只需要理解輸入(input)會對應到什麼輸出(output)就夠了。
<h3><u>問題來了,怎樣的輸入和輸出的對應「介面」會容易讓人理解?</u></h3>
1. 有意義的函數名稱
2. 多寫沒有副作用的純函數
1. 有可預測性:
每次輸入得到相同的輸出、函數內部不存狀態
2. 沒有副作用:
運算過程中不會改到外界的變數,像是不改傳進來的參數、不改可以存取的全域變數。
3. 顯式(Explict):
函數和外界溝通的管道只有,傳進來的參數和回傳值。
3. 簡化參數、對資料結構的 Information Architecture 做良好設計
4. 用函數來定義函數
1. 柯里化(Currying):
透過不同給參數來產生新的函數
2. 合成(Compose):
透過 pipeline 串接函數的input和output、隱藏參數,產生新的函數。
<h3><u>函數式編程為什麼強大、有彈性?</u></h3>
1. 把每個函數切得很小,容易更新、維護、平行處理、多人共同開發、被理解
2. 透過合成(Compose)把小函數變成大函數,比用繼承有彈性的多
3. 對集合實做 Functor 介面,讓一般函數都可以對集合操作。(array, matrix, tensor)
4. 把純和不純的函數分開來管理,容易找到問題點。
<h3><u>函數式編程為什麼難寫?</u></h3>
因為函數式編程想要把程式變簡單。但大家都知道「變複雜是簡單的、變簡單是複雜的」。所以這種方式寫程式需要設計、思考,你會是一個程式「設計師」。但如果你現在的專案寫完之後沒人會看、不會再改、不用維護、規模不大,也許函數式編程並不能幫到這個專案多少。
<h3><u>寫 React 就是實踐函數式編程</u></h3>
1. 透過自定義元件,定義畫 View 的抽象化函數樹
2. 透過 JSX 語法把小函數組合成大的函數 (等同於 compose)
3. 鼓勵大家寫 dumb 元件、也就是純函數
4. 用唯讀的 props,限制大家不能改傳進來的參數、減少副作用
5. 透過導入 flux,把純和不純的函數分開來管理
1. 純的 (對資料只做讀的動作):每個元件中的 render function
2. 不純的 (對資料做讀和寫的動作):
flux中對 action 的 callback、redux 中的 reducer、父元件傳給子元件的 callback
3. glue code:元件中其他的 javascript
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-wg5mnU0UosE/VqsbPjd6AfI/AAAAAAAA4Ak/FN1MAFQndCY/s1600/unnamed.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-wg5mnU0UosE/VqsbPjd6AfI/AAAAAAAA4Ak/FN1MAFQndCY/s640/unnamed.jpg" /></a></div>
<h3><u>從函數式編程的角度看 React 的問題?</u></h3>
1. 沒有什麼高階的集合操作方法:
1. 把 lodash.js 集合操作拉進來用?
2. 用 lenses 的方式來穿透深長不露的 states?
2. 沒有簡單的 currying 語法
1. 像是傳不同參數給 html5 input 元件,生出各式各樣對數字的、email、submit、text的自定義元件。最簡單寫法應該是
2. export function NumberInput(props) { 角括弧input type=“number” {…props} /> }
3. PS: function 一定要有名字不然 debug 會很慘。
3. 雖然集中管理了不純的函數,但還是很難寫:現在透過修改 store 中的 state 來控制元件,這邊 action 觸發的都是不純的函數,如果元件架構一深,還是會很難改。有解嗎?這邊還沒找到什麼 coding guideline…
1. 多個 container smart 元件
2. flux 的多個 store
3. redux 的階層式 reducers
-----------
延伸閱讀:
<a href="https://segment.com/blog/deku-our-functional-alternative-to-react/">deku: functional alternative to react </a>
<a href="https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4#.jkarowg5n">how to use classes and sleep at night (in a functional way)</a>
</pre>
vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-46677299084256838342016-01-28T06:05:00.000-08:002016-01-28T06:05:54.766-08:00Hey Underscore, You're doing it Wrong! (介紹函數編程)<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/m3svKOdZijA/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/m3svKOdZijA?feature=player_embedded" width="320"></iframe>
</div>
<pre>
----------------------------------------------------------
Curried Function:到拿到所有需要的參數前... 一直回傳新函數的函數。
<pre style="background-color: rgba(0,0,0,0.1); padding: 10px;">
var add = function(x) {
return function(y) {
return x + y;
}
}
var add3 = add(3);
add3(4); //return 7
add(3)(4); //weird thing
</pre>
autoCurry in Wu.js will save us
<pre style="background-color: rgba(0,0,0,0.1); padding: 10px;">
var add = function(x, y) {
return x + y;
}.autoCurry();
var add3 = add(3);
add3(4) //7
add(3,5) //8 => not weird any more!!!
</pre>
但我們為什麼需要 curry?參考下面這個組成新 function getTheOdds 的例子。
有了currying,我們可以透過給予不同參數來建立新的函數。
<pre style="background-color: rgba(0,0,0,0.1); padding: 10px;">
var filter = function(f, xs) {
return xs.filter(f);
}
filter(isOdd, [1,2,3,4,5]) // [1,3,5]
var getTheOdds = filter(isOdd);
getTheOdds([1,2,3,4,5]) //[1,3,5]
</pre>
再來一個用loadash的酷例子
<pre style="background-color: rgba(0,0,0,0.1); padding: 10px;">
//沒用currying、不函數化的寫法
var firstTwoLetters = function(words){
return _.map(words, function(word){
return _.first(word, 2);
});
}
//函數化的寫法(如果underscore吃參數的方式是反過來的話)
var firstTwoLetters = _.map(_.first(2));
//更函數化的寫法
_.map(_.first(2), ['jim', 'kate']) //['ji', 'ka']
</pre>
=> Underscore.js的參數排列法讓currying變得不可能
總結currying的優點有下面四個:
1. 一般化函數、要傳的變數名消失了
2. 透過給不同參數就可以生成不同的函數
3. 更簡潔的定義
4. 讓函式的組合/合成 (composition) 變的可能
----------------------------------------------------------
組合/合成 (composition):用多個函數來組成新函數
簡單的例子,用 first() 和 reverse() 來合成 last 函數
<pre style="background-color: rgba(100,100,0,0.1); padding: 10px;">
var last = function(xs) {
var sx = reverse(xs);
return first(sx);
}
var last = compose(first, reverse);
last([1,2,3]) //3
</pre>
另一個例子,chain backwardly
<pre style="background-color: rgba(100,100,0,0.1); padding: 10px;">
var wordCount = function(str){
var words = split(' ', str);
return length(words);
}
var wordCount = compose(length, split(' '));
wordCount("There is a way to save the world") //8
</pre>
Category Theory: 多個函數組合(compose),作用域互相對應的理論。Connecting the dot.
總結組合:
1. 能從其他函數組成新函數
2. 組合過程中把參數藏起來
3. 極為高階的寫程式
4. 有數學理論在後面支持
------------------------------------------------------------------
Functors
map 打開了後面的 object 然後做一些事、再放回 object
<pre style="background-color: rgba(0,100,100,0.1); padding: 10px;">
var plus1 = function(x){ return x + 1 }
plus1([3]) //wrong!!
map(plus1, [3]) //4
</pre>
剛剛舉的例子,map 只能操作 array object、但下面試圖用 map 操作所有 object
<pre style="background-color: rgba(0,100,100,0.1); padding: 10px;">
map(plus1, MyObject(3)) //MyObject(4)
MyObject = function(val) {
this.val = val;
}
MyObject.prototype.map = function(f) {
return MyObject(f(this.val));
}
</pre>
如果對 object 定義了 map function,它就變成 functor
null check的例子、Dynamic Safety:
<pre style="background-color: rgba(0,100,100,0.1); padding: 10px;">
map(plus1, Maybe(3)) //=> Maybe(4)
map(plus1, Maybe(null)) //=> Maybe(null)
Maybe = function(val) {
this.val = val;
}
Maybe.prototype.map = function(f){
return this.val ? Maybe(f(this.val)) : Maybe(null);
}
</pre>
把 ES6 promise 變 functor 的例子
<pre style="background-color: rgba(0,100,100,0.1); padding: 10px;">
map(populateTable, $.ajax.get('/posts');
Promise.prototype.map = function(f) {
var promise = new Promise();
this.then(function(response){
promise.resolve(f(response));
});
return promise;
}
</pre>
再來一個和 html 合作的例子:對有和沒有 user_login 的情況下,更新歡迎頁面。
<pre style="background-color: rgba(0,100,100,0.1); padding: 10px;">
$div = $("#myDiv");
//dot 會把 user.name 拿出來
var getGreeting = compose(concat('Welcome '), dot('name'));
var updateGreetingHtml = compose($div.html, getGreeting);
map(updateGreetingHtml, Maybe(App.current_user));
</pre>
underscore 不讓人 extend map
總結 functor 能:
1. 改變函數的行為卻不用變動 open/closed principle
2. 不光只有 map, 還有 reduce & compose
3. 直覺且非私人的 api
4. free formulas
5. 動態型別安全/檢查
-------------------------------------------------------------
總結:underscore 能變得更加 functional。希望有更 functional 的 library
</pre>
vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-52825809858726252952015-12-31T08:43:00.001-08:002016-10-15T08:25:42.528-07:00什麼是設計?<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "georgia" , "times new roman" , serif;"><iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/z8qs5-BDXNU/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/z8qs5-BDXNU?feature=player_embedded" width="320"></iframe></span></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"> <a href="http://www.scielo.cl/pdf/arq/n49/art11.pdf">Design Q&A by Charles Eames</a> 中譯</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 你對設計的定義是什麼?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 人們可以將設計描述為安排元素來達到特定目的(purpose)的計畫。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 設計是一種藝術的表現嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 我寧願說是一種目的的表現。它可以... 如果它足夠好,之後會被判斷為藝術。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 設計是一種為了工業目的的工藝嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 不是,但是設計也許是某些工業問題的解。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 設計的限界是什麼?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 問題的限界是什麼,設計的限界就是什麼。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 設計是只關注一部份環境(environment)的學科嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 不。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 它是一種通用表達的方法嗎?(Is it a method of general expression?)</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 不,他是行動的方法。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 它是一個人的創造物嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 不,事實上每個人都會受到前人的影響。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 設計是團體的產物嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 通常是。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 有設計倫理嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 設計總是有限制,通常也包含倫理這項。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 設計意味著產品是有用處 (necessarily useful) 的嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 是的,即使用處可能很微小。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 人們可以光為了樂趣的作品合作嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 誰會說樂趣是無用的?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 設計的過程中要承認限制嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 設計和限制有很大的關係。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 什麼是限制?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 設計問題的有效關鍵:設計師能辨識出越多限制越好、他的對於這些限制一起工作的意願和熱情。限制像是金錢、大小、強度、平衡、表面材料、時間。每個問題都有它自己限制的列表。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 設計是短暫的嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 有些需求是短暫的。大部份設計是短暫的。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 該朝向短暫還是永恆的設計前進?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 如果是一般性、通用的需求和設計,會朝向永久。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 設計是為了誰?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 需求。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 你曾經被迫接受妥協嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 我從未被迫妥協,但我樂意接受限制。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 練習設計的首要條件是?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 辨認需求。(Recognition of the needs.)</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">看完影片大概知道,設計和目的、需求、問題、限制是息息相關的。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">---</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">接下來看維基百科上對 Design 的定義。定義來自這篇 paper - <a href="http://paulralph.name/files/2011/01/Ralph-and-Wand-A-Proposal-for-a-Formal-Definition-of-the-Design-Concept.pdf">A Proposal for a Formal Definition of the Design Concept</a> by Paul Ralph et. al. </span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">他提出來的定義如下</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<div class="page" title="Page 6">
<div class="layoutArea">
<div class="column">
<span style="font-weight: 700;"><span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">Design
</span></span><br />
<span style="font-style: italic;"><span style="font-family: "georgia" , "times new roman" , serif; font-size: large;"><br /></span></span>
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;"><span style="font-style: italic;">(noun) </span>a <span style="color: #990000;"><span style="font-style: italic;">specification </span>of an <span style="font-style: italic;">object</span></span>, manifested by an <span style="font-style: italic;"><span style="color: #b45f06;">agent</span></span>, intended to
accomplish <span style="font-style: italic;"><span style="color: #38761d;">goals</span></span>, in a particular <span style="font-style: italic;"><span style="color: #0b5394;">environment</span></span>, using a set of <span style="font-style: italic;"><span style="color: #351c75;">primitive
components</span></span>, satisfying a set of <span style="font-style: italic;"><span style="color: #741b47;">requirement</span></span><span style="color: #741b47;">s</span>, subject to <span style="font-style: italic;"><span style="color: #b45f06;">constraints</span></span>;
</span><br />
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;"><span style="font-style: italic;">(verb, transitive) </span>to create a design, in an environment (where the de-
signer operates) </span></div>
</div>
</div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">看了應該不知道想表達什麼,所以他畫了張圖,這樣就清楚多了。</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-K0vsaB6GQhA/VoVUNkNudHI/AAAAAAAA3-M/vXrBqNi2RSk/s1600/Screen%2BShot%2B2016-01-01%2Bat%2B12.12.58%2BAM.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "georgia" , "times new roman" , serif;"><img border="0" height="316" src="https://1.bp.blogspot.com/-K0vsaB6GQhA/VoVUNkNudHI/AAAAAAAA3-M/vXrBqNi2RSk/s640/Screen%2BShot%2B2016-01-01%2Bat%2B12.12.58%2BAM.jpg" width="640" /></span></a></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Agent 是設計的人。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">產出(Output):對某個物件的規範/規格</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">然後這個 Output,要完成某些目的 (Goals)、受到某些限制、滿足一些條件、產出在某個環境、由一些元素所組成。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">舉例來說:</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">平面設計:指的是設計的的產出位在的環境是 2D 平面。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">服務設計、字型設計、介面設計、使用者體驗設計、服裝設計:指的是它們的產出 (Specification of Object) 是什麼。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">物件導向程式設計:指的是 primitive components 是物件、產出是程式。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">使用者導向設計 (UCD):指的是設計的產出的目的 (Goal) 和使用者有關。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">作者進一步用動詞來看設計,畫了這個圖,清楚地標明什麼是設計這個動作的輸入 (Input) 和輸出 (Output)</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-mTegFAuq6xU/VoVWkm1N2pI/AAAAAAAA3-c/Djps-IbKZ2g/s1600/Screen%2BShot%2B2016-01-01%2Bat%2B12.22.32%2BAM.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "georgia" , "times new roman" , serif;"><img border="0" height="344" src="https://3.bp.blogspot.com/-mTegFAuq6xU/VoVWkm1N2pI/AAAAAAAA3-c/Djps-IbKZ2g/s640/Screen%2BShot%2B2016-01-01%2Bat%2B12.22.32%2BAM.jpg" width="640" /></span></a></div>
<span style="font-family: "georgia" , "times new roman" , serif;">最後他又把這個圖改寫成設計的新定義</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<div class="page" title="Page 23">
<div class="layoutArea">
<div class="column">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">design activity as a <span style="font-style: italic;"><span style="color: #0b5394;">process</span></span>, </span><br />
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">executed by an <span style="font-style: italic;"><span style="color: #134f5c;">agent</span></span>, </span><br />
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">for the
purpose of generating a <span style="color: #990000;"><span style="font-style: italic;">specification </span>of an </span><span style="font-style: italic;"><span style="color: #990000;">object</span> </span>based on: </span><br />
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">> the </span><span style="font-family: "georgia" , "times new roman" , serif; font-style: italic;"><span style="color: #b45f06;">environment</span> </span><span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">in
which the object will exist, </span><br />
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">> the </span><span style="font-family: "georgia" , "times new roman" , serif; font-style: italic;"><span style="color: #7f6000;">goals</span> </span><span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">ascribed to the object, </span><br />
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">> the desired structural and behavioral properties of the object (</span><span style="font-family: "georgia" , "times new roman" , serif; font-style: italic;"><span style="color: #38761d;">requirements</span></span><span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">), </span><br />
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">> a given set of
component types (</span><span style="font-family: "georgia" , "times new roman" , serif; font-style: italic;"><span style="color: #351c75;">primitives</span></span><span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">), </span><br />
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">> and </span><span style="font-family: "georgia" , "times new roman" , serif; font-style: italic;"><span style="color: #741b47;">constraints</span> </span><span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">that limit the acceptable solutions. </span><br />
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">有沒有很複雜?簡單說 「設計活動就是在某些限制下,生出某個東西來達成某個目的的過程。」</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">好像在說廢話有沒有~~~ XD</span></div>
</div>
</div>
<br />vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-24604667874916268162015-12-31T08:43:00.000-08:002016-10-15T08:25:20.063-07:00什麼是設計?<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "georgia" , "times new roman" , serif;"><iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/z8qs5-BDXNU/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/z8qs5-BDXNU?feature=player_embedded" width="320"></iframe></span></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"> <a href="http://www.scielo.cl/pdf/arq/n49/art11.pdf">Design Q&A by Charles Eames</a> 中譯</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 你對設計的定義是什麼?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 人們可以將設計描述為安排元素來達到特定目的(purpose)的計畫。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 設計是一種藝術的表現嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 我寧願說是一種目的的表現。它可以... 如果它足夠好,之後會被判斷為藝術。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 設計是一種為了工業目的的工藝嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 不是,但是設計也許是某些工業問題的解。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 設計的限界是什麼?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 問題的限界是什麼,設計的限界就是什麼。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 設計是只關注一部份環境(environment)的學科嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 不。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 它是一種通用表達的方法嗎?(Is it a method of general expression?)</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 不,他是行動的方法。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 它是一個人的創造物嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 不,事實上每個人都會受到前人的影響。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 設計是團體的產物嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 通常是。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 有設計倫理嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 設計總是有限制,通常也包含倫理這項。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 設計意味著產品是有用處 (necessarily useful) 的嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 是的,即使用處可能很微小。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 人們可以光為了樂趣的作品合作嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 誰會說樂趣是無用的?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 設計的過程中要承認限制嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 設計和限制有很大的關係。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 什麼是限制?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 設計問題的有效關鍵:設計師能辨識出越多限制越好、他的對於這些限制一起工作的意願和熱情。限制像是金錢、大小、強度、平衡、表面材料、時間。每個問題都有它自己限制的列表。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 設計是短暫的嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 有些需求是短暫的。大部份設計是短暫的。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 該朝向短暫還是永恆的設計前進?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 如果是一般性、通用的需求和設計,會朝向永久。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 設計是為了誰?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 需求。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 你曾經被迫接受妥協嗎?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 我從未被迫妥協,但我樂意接受限制。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Q: 練習設計的首要條件是?</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">A: 辨認需求。(Recognition of the needs.)</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">看完影片大概知道,設計和目的、需求、問題、限制是息息相關的。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">---</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">接下來看維基百科上對 Design 的定義。定義來自這篇 paper - <a href="http://paulralph.name/files/2011/01/Ralph-and-Wand-A-Proposal-for-a-Formal-Definition-of-the-Design-Concept.pdf">A Proposal for a Formal Definition of the Design Concept</a> by Paul Ralph et. al. </span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">他提出來的定義如下</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<div class="page" title="Page 6">
<div class="layoutArea">
<div class="column">
<span style="font-weight: 700;"><span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">Design
</span></span><br />
<span style="font-style: italic;"><span style="font-family: "georgia" , "times new roman" , serif; font-size: large;"><br /></span></span>
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;"><span style="font-style: italic;">(noun) </span>a <span style="color: #990000;"><span style="font-style: italic;">specification </span>of an <span style="font-style: italic;">object</span></span>, manifested by an <span style="font-style: italic;"><span style="color: #b45f06;">agent</span></span>, intended to
accomplish <span style="font-style: italic;"><span style="color: #38761d;">goals</span></span>, in a particular <span style="font-style: italic;"><span style="color: #0b5394;">environment</span></span>, using a set of <span style="font-style: italic;"><span style="color: #351c75;">primitive
components</span></span>, satisfying a set of <span style="font-style: italic;"><span style="color: #741b47;">requirement</span></span><span style="color: #741b47;">s</span>, subject to <span style="font-style: italic;"><span style="color: #b45f06;">constraints</span></span>;
</span><br />
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;"><span style="font-style: italic;">(verb, transitive) </span>to create a design, in an environment (where the de-
signer operates) </span></div>
</div>
</div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">看了應該不知道想表達什麼,所以他畫了張圖,這樣就清楚多了。</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-K0vsaB6GQhA/VoVUNkNudHI/AAAAAAAA3-M/vXrBqNi2RSk/s1600/Screen%2BShot%2B2016-01-01%2Bat%2B12.12.58%2BAM.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "georgia" , "times new roman" , serif;"><img border="0" height="316" src="https://1.bp.blogspot.com/-K0vsaB6GQhA/VoVUNkNudHI/AAAAAAAA3-M/vXrBqNi2RSk/s640/Screen%2BShot%2B2016-01-01%2Bat%2B12.12.58%2BAM.jpg" width="640" /></span></a></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Agent 是設計的人。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">產出(Output):對某個物件的規範/規格</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">然後這個 Output,要完成某些目的 (Goals)、受到某些限制、滿足一些條件、產出在某個環境、由一些元素所組成。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">舉例來說:</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">平面設計:指的是設計的的產出位在的環境是 2D 平面。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">服務設計、字型設計、介面設計、使用者體驗設計、服裝設計:指的是它們的產出 (Specification of Object) 是什麼。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">物件導向程式設計:指的是 primitive components 是物件、產出是程式。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">使用者導向設計 (UCD):指的是設計的產出的目的 (Goal) 和使用者有關。</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">作者進一步用動詞來看設計,畫了這個圖,清楚地標明什麼是設計這個動作的輸入 (Input) 和輸出 (Output)</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-mTegFAuq6xU/VoVWkm1N2pI/AAAAAAAA3-c/Djps-IbKZ2g/s1600/Screen%2BShot%2B2016-01-01%2Bat%2B12.22.32%2BAM.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "georgia" , "times new roman" , serif;"><img border="0" height="344" src="https://3.bp.blogspot.com/-mTegFAuq6xU/VoVWkm1N2pI/AAAAAAAA3-c/Djps-IbKZ2g/s640/Screen%2BShot%2B2016-01-01%2Bat%2B12.22.32%2BAM.jpg" width="640" /></span></a></div>
<span style="font-family: "georgia" , "times new roman" , serif;">最後他又把這個圖改寫成設計的新定義</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<div class="page" title="Page 23">
<div class="layoutArea">
<div class="column">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">design activity as a <span style="font-style: italic;"><span style="color: #0b5394;">process</span></span>, </span><br />
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">executed by an <span style="font-style: italic;"><span style="color: #134f5c;">agent</span></span>, </span><br />
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">for the
purpose of generating a <span style="color: #990000;"><span style="font-style: italic;">specification </span>of an </span><span style="font-style: italic;"><span style="color: #990000;">object</span> </span>based on: </span><br />
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">> the </span><span style="font-family: "georgia" , "times new roman" , serif; font-style: italic;"><span style="color: #b45f06;">environment</span> </span><span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">in
which the object will exist, </span><br />
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">> the </span><span style="font-family: "georgia" , "times new roman" , serif; font-style: italic;"><span style="color: #7f6000;">goals</span> </span><span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">ascribed to the object, </span><br />
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">> the desired structural and behavioral properties of the object (</span><span style="font-family: "georgia" , "times new roman" , serif; font-style: italic;"><span style="color: #38761d;">requirements</span></span><span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">), </span><br />
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">> a given set of
component types (</span><span style="font-family: "georgia" , "times new roman" , serif; font-style: italic;"><span style="color: #351c75;">primitives</span></span><span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">), </span><br />
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">> and </span><span style="font-family: "georgia" , "times new roman" , serif; font-style: italic;"><span style="color: #741b47;">constraints</span> </span><span style="font-family: "georgia" , "times new roman" , serif; font-size: large;">that limit the acceptable solutions. </span><br />
<span style="font-family: "georgia" , "times new roman" , serif; font-size: large;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">有沒有很複雜?簡單說 「設計活動就是在某些限制下,生出某個東西來達成某個目的的過程。」</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">好像在說廢話有沒有~~~ XD</span></div>
</div>
</div>
<br />vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-66643150930496355492015-12-20T06:58:00.003-08:002016-01-28T22:01:31.795-08:00台大不一樣思考社:設計思考工作坊 Day 2<u>組合虛擬人物 (CC)</u><br />
<br />
第二天一早 Recap 的方式就是,從前一天的三個人物中合成一個叫 Jessica 的虛擬的人物 ( Composite Character ),這部分是很主觀的,先基於從現有列出來的 needs 和 insight 選出覺得有發展性的點。最後再藉由腦補內容、畫使用者畫像,像是 Persona 一樣把虛擬人物立體出來,因為花了一整天生出來的人,大家其實對他很熟悉 ( 比隨意的 Persona 熟的多 )。<br />
<br />
<u>腦力激盪 (Brain Storming )</u><br />
<br />
CC有幾個 insight,最後選的 insight 是現代人會 Do something 來填補早餐的空白時間、像是滑手機,所以腦力激盪的目標變成就是想出一個「讓早餐時間不是空白時間」的方法。之後就是「不批評」「不打斷的」「不離題」的 Brain Storming 了。因為有了 Jessica,這個每個人都熟悉立體人物,<b><u>溝通</u></b>的時候變得方便很多,就像是有了使用者的原型一樣。Brain Storming 就是爽爽的啊,不過這次特別強調了「要延伸」他人想法、「要畫圖」要有「Title」等重點。<br />
<br />
發想的差不多後,用「強迫聯想」的方式做 Brain Storming,這部分也是蠻新奇的,先列出「教室」和「辦公室」裡的不相干用品,然後強迫生出可以滿足人物 insight 的想法,這邊會先卡住,然後只要有人開始分享,就會變得很多神奇的想法出來。最後再把所有的想法大概有 100 個吧,一人數票投票列出幾個、然後在二次投票,二次投票的時候才想起 Jessica,想哪一個想法比較可能滿足她。最後選擇用動的食物吸引注意力的迴轉壽司早餐。(好像是小隊輔提出來的... XD) 還有設定要驗證的幾個小想法,像是少量食物、多樣組合 blah 的<br />
<br />
<u>製作原型 (Prototyping)</u><br />
<br />
快樂的 30分鐘 maker 時間,高級的扮家家酒和演戲,多次試驗。大家都玩開了~ 我只能說大家的手做能力很強大。<br />
<br />
<u>請使用者測試 ( Testing )</u><br />
<br />
這步真的讓我看到 Prototype 的威力所在,第一個使用者就發現這個原型對使用者的感覺,雖來一進來就盯著移動中的食物,但跟我們思考的不一樣。因為迴轉壽司早餐比較像是有空閒時間才會去的地方,對想省時間的使用者。另外還有會發覺原型的問題,像是輸送列應該一開始就要有早餐在上面、最好加上文字說明。除了輸送列的早餐外,還要有菜單、送茶水的服務生不用帶位,特別強調是週末,悠閒的週六早上十點之類的情境。修一修加上演戲,原型多少有解到空白時間的問題,在第一個 iteration 應該算是不錯吧。<br />
<br />
<u>各小隊火力展示 ( Demo )</u><br />
<br />
很意外的是其他六隊都做 App,而且有試著嘗試去解我認為早就被解完的問題:「有效率地得到早餐。」本來以為台灣早餐店林立、便利商店林立,早餐不用跑很遠、更不用自己做,還會剩下什麼需求沒被滿足嗎?結果是「熱騰騰好吃的早餐店要排隊」,於是就寫個注重體驗的訂餐、捷運門口取餐的App,然後第一次實體看到 App 的 Prototype長什麼樣子,點點點、換頁之類的,想到我做網頁、寫 App 錢真的也該先做好 Prototype 找個使用者來用用啊~~~<br />
<br />
<u>結語</u><br />
這個工作坊是個團隊討論、體驗設計思考流程的好地方。本來以為價位有點高 ( 和我以前辦其他社團活動比 )。不過看到一組請三個陌生人使用者來受測、中午吃的還不錯、設計 conference 都很貴、1:2 的教練學員比,總總因素來說是 C/P 還不錯的。列一下 pros and cons:<br />
<br />
pros:<br />
<br />
<ul>
<li>可以深入的練習觀察技巧</li>
<li>思考使用者的需求和需求背後的原因</li>
<li>快樂的團隊思考、討論體驗</li>
<li>大量便利貼的利用技巧</li>
<li>得到一種完整的設計流程體驗</li>
<li>真實的和使用者接觸</li>
<li>小隊輔們還蠻用心的</li>
<li>可以碰到許多願意用溝通、用設計改變世界的人</li>
<li>小遊戲很好玩</li>
<li>一直放舞曲很High</li>
</ul>
<br />
cons:<br />
<br />
<ul>
<li>和現實真的有一段距離 (感覺 TA 是學生)</li>
<li>像「人本機構」的只鼓勵、不批評的環境讓「擁抱失敗」變成口號。</li>
<li>建立「需求」、「insight」、「CC」,的過程中用了大量的假設,推論一錯就 GG</li>
<li>完全不做現有解法的比較與調查 (像是摩斯訂餐 App)</li>
<li>不介紹失敗的例子</li>
<li>過度強調人本,但除了人的需求。技術和商業的重要性都不說明,一個好的偵探除了觀察和推理能力,對事物的知識也是很重要的。</li>
<li>只有練習三個人以上的團體技巧。</li>
</ul>
<div>
---</div>
<div>
有點小進步,不過感覺和 Design Researcher 的路還有好遠好遠。<br />
最後有點太專心討論和解題,好像沒有好好認識其他人啊,有點可惜~<br />
<br />
心理系的小隊輔一江、設計感的 Jarah、到處出現的 Boy、強大的設計師 美辰、很有主見的獸醫系 元皓、講話有趣的東璋、眼鏡很帥的財金系 軒凱、討厭心智圖但會組織演講的柏儒,這次有點忘記一期一會的決心...<br />
<br /></div>
<div>
記得感到痛苦和累的時候,稱讚一下自己吧「你努力離開舒適圈了喔 :p」</div>
vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-22221791689794619202015-12-19T10:08:00.004-08:002016-01-28T22:01:09.298-08:00台大不一樣思考社:設計思考工作坊 Day 1和藝術不同,設計是一門客觀的學問。重視觀察、基於觀察做出像偵探一樣的推論、做出像科學家一樣的假設,用同理心而不是同情心去理解這一個人的行為和需求、從使用者的角度去看這個世界。<br />
<br />
<b><u>問題是和需求是不同的:</u></b><br />
<br />
從8層樓高優雅的降落到地表不受傷是一個問題。但大多數人這輩子都不會有這樣的需求。<br />
<br />
<u><br /></u>
<u>需求要用動詞來描述而不是名詞:</u><br />
需求:「吃到好吃的早餐」 => 人自動會把行動連接成<br />
<ol>
<li>怎麼 「吃到好吃的早餐?」</li>
<li>為什麼要 「吃到好吃的早餐,原因是什麼?」</li>
</ol>
需求「好吃的早餐」 => 推理就的莫名其妙的卡住,加上 5W1H 都很不順!<br />
<br />
<br />
<br />
<br />
今天請大家解的題目是「如何提升吃早餐的經驗」。<br />
<br />
流程:<br />
1. 先用便利貼討論要訪談使用者的問題、把相近的問題Group後,針對每一類問題畫正字投票.<br />
<br />
2. 街訪:會有一個主訪、副訪和紀錄。大概十分鐘,主訪負責掌握進度、副訪負責見縫插針。<br />
<br />
3. 把數個人紀錄的資訊口述下載,每個人寫下事實 (Fact) 到便利貼上 & 分類。<br />
<br />
==== 以下開始小組討論、瘋狂的 blocking I/O 超花時間,為什麼不繼續平行計算啊 ====<br />
4. 試著從事實 (Fact) 中,推出這個人的需求 (need)<br />
5. 從這個人的需求 (need),找出洞察 (insight)<br />
<br />
[來到了 long long complain section]<br />
一人一票決定街訪問題,真是不太好,就是一種讓人膚淺思考的快速解決方式吧、然後想問題的時候,好像沒有一個比較好的想法,怎麼問會得到提升早餐經驗的資訊,不過強調 empathize 那這次就不預設立場試試吧<br />
<br />
從列需求就一直卡,用動詞描述真的很重要 ( 回家才看文章才懂 ),然後訪的幾個學生都不是很愛吃早餐,他們的簡單需求早就在這個台灣早餐文化發達、便利商店充斥的環境滿足了。還說「提升早餐體驗」是簡單題目,結果需求列完,洞察完全列不出來。需求出來就解啊,為何要落在為做「設計思考」強說洞察的陷阱裡,Inception 一定要下到第幾層嗎?不過別組有些很順利的,希望明天報告的時候能搞清楚,我們和別人不同在哪?做錯了哪一步?<br />
<br />
另外一個是「提升早餐體驗」的題目定下來了,我們不知道客戶是誰、沒有辦法詢問客戶,沒法想問題背後的問題 / 找到真正要解的問題。然後一開始也沒決定是要生產品還是服務,也沒有定好 TA。最後我們這組 TA 好像是學生,但如果要解這個問題,自身的經驗、非訪談的觀察就不能使用。<br />
<br />
然後很討厭,台上報告有事沒事後面工作人員就很 high 的附和之類的,做設計一定要這樣搞嗎?不過開始前玩小遊戲提神真的還不錯。<br />
<br />
現在的想法就只有,使用者都想跟朋友一起吃早餐,那就請宿舍早餐店提出兩人同行,第二人早餐六折的優惠,這樣所有人的體驗都會好,早餐店也會比較賺錢。<br />
<br />
---<br />
現在只能安慰自己,花了 1,600 元兩天就發覺 Design Thinking 沒啥用,也是不錯的收穫,反正還有一堆其他的設計流程。 UX 這條路 QQ 回家重看了設計的心理學的 Design Thinking 一章,特別強調不要用訪談耶...Orz<br />
<br />
<br />
Don't try to be original, just try to be good.<br />
I don't want to be interesting, I want to be good.<br />
( 不一樣思考又怎樣啊... 解問題為什麼不先 google / survey? )<br />
<br />
<br />
明天就是嘴砲的 brain storming~ to be continued.<br />
<br />
延伸閱讀:<br />
<a href="http://www.seinsights.asia/story/1434/795/2018">像福爾摩沙一樣解決社會問題 (同情心、同理心、觀察力)</a><br />
<a href="http://kenshinfujiwara.com/2011/11/problems-are-not-equal-to-needs/">Problems Are Not Equal to Needs</a><br />
<a href="http://www.logodesignlove.com/paul-rand-video">Don't try to be original, try to be good.</a>vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-40505742023607220922015-12-06T06:12:00.003-08:002016-01-28T22:01:52.463-08:00Firebase:前端工程師的神兵利器Firebase.com 像其他的「後端即服務」( Baas, backend as a service ) 一樣,不過他的 Tutorial 超簡單,你只要會用 node 的 npm 大概就夠了。<br />
<br />
<a href="https://www.firebase.com/docs/hosting/quickstart.html">Firebase官方超簡短教學</a>,看了這個我就被吸引住了。<br />
<br />
React 讓人解決 MVC 中的 View。Firebase 讓人不用建 server、遠端登入,只需要用 web user interface 就建出以 Json 為格式的即時資料庫、Rest Web API、One command deploy ( firebase deploy )、社交帳號的管理 ( Oauth 介面的 Facebook、Google、Twitter blah blah 的登入管理) ,還有靜態 CDN 資料發佈、Custom domain mapping ( 這個要花一點時間等 DNS Propagate )。<br />
<br />
Firebase.com 去年被 Google 買走、Parse.com 前年被 Facebook 買走、Apple 也推出了自家的 CloudKit,這些「後端即服務」的公司,讓你 <b><u>不用再管 Server & 資料庫</u></b>。你只需要有整理資料的能力 ( Structure Data ) 和前端設計的能力,就能當全端工程師了 :)<br />
<br />
各家都有基本的免費流量,一個月 100 GB ~ 2TB 都有,但一旦升級之後就會變很貴喔 要小心。簡單說,以後 Hackathon 不用找後端工程師了,也不要再傻傻的去 github 找看都看不懂的 Hackathon Starter Kit。<br />
<br />
---<br />
真心覺得,Startup 剛開始用 Baas 就好,省 Server 和後端工程師的錢。vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-36001158149276251522015-12-01T10:07:00.002-08:002016-01-28T22:00:44.906-08:00React UI 心得文之一<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">這週在忙著刻一個大元件,中間有包兩三個中元件、然後中元件下面又會有小元件。要記得React 是負責 UI 的啊,千萬個不該在小元件裡面存 state。存了改了兩天還是會有問題,小元件如果存了狀態,常會有那大元件重 render 的時候,設 property 卻無法更新小元件,因為小元件的 state 不一樣了。兩天之後把大中小元件全部改成 dumb component 真的快樂的不得了,程式碼變少了、邏輯也清楚了。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">刻 React 元件的方法:</span></span><br />
<ol>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">盡量刻 Dumb Component,把它當成 function 去想要提供什麼參數</span></li>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">parent component 要對 child componet 命名和設 handler(childId, value)</span></li>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">事件發生時就呼叫 parent 傳來的 handler,說你是哪個 child和發生了什麼</span></li>
</ol>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">就這樣遞迴做下去,最上層的 App component 就可以知道,哪第三個child component 的第四個 child component 發生了什麼事,然後做一些處理。</span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">客制化 React 元件外觀的方法:</span></div>
<div>
<ol>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">幫元件的各種 property 類別放置對應的className</span></li>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">用 webpack 的 css loader 幫元件建立 local 的 css scope,然後用一個 scss 檔去管理一個元件,這樣一切都會輕鬆的多。( 參考 React Toolbox )</span></li>
</ol>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">其他刻外觀小心得:</span></div>
<ol>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">多用 em, rem</span></li>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">用 css 幫背景上色的方式,快速看物件是否對齊</span></li>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">用 Mac 的放大鏡 ( ctrl + 雙指滑動 trackpad )</span></li>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">用 css trick cursor 去引導 behavior</span></li>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">用 font-weight 和 color 的 alpha channel 去做細部微調</span></li>
</ol>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">學各種 React 相關 Library的方法:一定要<b><span style="font-size: x-large;"><u>從看完官方的 Tutorial/Guide 開始</u></span></b>,網路上的介紹文章通常都挑簡單的地方說,十篇有九篇都講一樣的東西,還不如看官方的 Tutorial/Guide 把重要的東西有系統的一次學會。很重要所以特別粗體一下...</span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">使用者經驗部分:</span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">碰到客戶想要重新客製化系統的時候</span></div>
<div>
<ol>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">照他們舊有的行為,模擬跑自己刻的新系統幾次,很快就可以知道缺了什麼、哪裡會生出問題,這樣的方法比在那邊天馬行空的猜測會方便的很多。例子: 新報表系統拿舊系統的許多報表重新打一次。</span></li>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">用心智圖的方式窮舉可能的行為,不然光是用腦袋想一定會漏掉很多細節。</span></li>
</ol>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">和他人合作的部分</span></div>
</div>
</div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">一定要定時 Sync 進度,時常 commit。不要隱匿進度落後、缺失、維護 local state,想說這樣可以加班追回來。因為很多事從他人的角度來看會清楚的很多,也方便別人調整。不要裝弱、裝強,快放棄那沒用的自尊心吧。</span></div>
vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-12695812690142648392015-11-27T23:42:00.000-08:002016-01-28T22:07:15.338-08:00聊預測自己未來的能力比起預測下一期大樂透號碼的能力,這邊說的「預測未來的能力」跟「對未來的想像力」比較相關,是更日常生活相關的能力,。<br />
<br />
這個故事是我最近一個月經常發生的事,剛剛又發生了。我經常會有沒洗澡就睡覺,隔天要出門去咖啡館寫程式的情況,這時就想還是洗一下澡好了、但為了時間還是不要洗頭好。但進入浴室在熱騰騰的蒸氣中間,就會想熱水洗頭會很舒服,然後就洗頭,舒服的回到房間,吹個頭舒服的弄很久才出門。然後隔天出門時又做了一樣的規劃,嗯 洗澡但不洗頭。<br />
<br />
這故事跟個人工作能力無關,但卻大大了影響了我工作的計畫和效率。我缺乏的是清楚地理解自己在不同環境中,會受到怎樣的環境影響,就簡單地做出計畫。<br />
<br />
如果我清楚地想像就算「現在做了決定不洗頭,等下還是會洗頭」,那在趕時間時,我就會決定不洗澡就出門。如果我清楚地想像到「現在在浴室中洗了頭,會舒服到等下在房間吹頭髮、花半小時東摸摸、西摸摸」,那我可能就會忍住不洗頭。<br />
<br />
在這個小故事中影響不大。但在現實工作中,一樣會有這樣的情況。像是被問「這東西下個禮拜做得出來嗎?」腦袋中的想像是每天加班,努力工作,然後下週準時交差。但現實是,加班個兩天,發生了一些問題、或是加班三天後沒心情工作,這些都和你寫程式的能力無關,但卻會在你承諾的時間交不出東西,拖累整個團隊。<br />
<br />
<br />
對自己能力過於樂觀的估計是大忌!!! 會拖累他人進度。<br />
<br />
對自己能力過於悲觀的估計是大忌!!! 會拖累自己成長步調、不敢嘗試。<br />
<br />
這種想像力、對過去歷史的記憶力、也許是可以訓練的。再不然只對自己一定能預測正確的情況做預測,其他情況就清楚明白的放在「不知道」這個類別。<br />
<br />
俗話說得好「人貴自知,知己者明」。<br />
努力認識自己吧~ 培養自知之明。<br />
<br />
參考:《老子》第三十三章:「知人者智,自知者明;勝人者有力,自勝者強」<br />
---<br />
BTW, 這個能力是很容易被觀察的,只要看一個人有沒有準時完成他的承諾就知道了。<br />
<br />
<br />vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-22949278777378243252015-11-20T12:06:00.005-08:002016-01-28T22:02:12.591-08:00程式設計法與人生 (Programming Paradigm and Life) <div style="color: #454545; font-size: 15px; line-height: normal;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">解決問題流行的方式有兩種。</span></div>
<ol>
<li style="color: #454545; font-size: 15px; line-height: normal; margin: 0px;"><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">想出第一步要做什麼,然後開始做、做完再想下一個。</span></li>
<li style="color: #454545; font-size: 15px; line-height: normal; margin: 0px;"><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">是把大問題切成數個小問題一直切到夠小,然後再一個一個做。</span></li>
</ol>
<div style="color: #454545; font-size: 15px; line-height: normal;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">第一個<span style="line-height: normal;"> </span>叫做命令式程式設計、第二個<span style="line-height: normal;"> </span>叫做宣告式程式設計。</span></div>
<div style="color: #454545; font-size: 15px; line-height: normal;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">第一個<span style="line-height: normal;"> </span>想要回答「怎麼做」、第二個<span style="line-height: normal;"> </span>想要回答「做什麼」。</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">第一個 是工程師做的事、第二個是設計師做的事。</span></div>
<div style="color: #454545; font-size: 15px; line-height: normal;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">第一個<span style="line-height: normal;"> </span>叫做敏捷式開發流程、第二個<span style="line-height: normal;"> </span>叫做瀑布式開發流程。</span></div>
<div style="color: #454545; font-size: 15px; line-height: normal;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><span style="line-height: normal;">第一個</span> <span style="line-height: normal;">叫做</span> connecting the dots<span style="line-height: normal;">、第二個叫做</span> <span style="line-height: normal;">設計研究。</span></span></div>
<div style="color: #454545; font-size: 15px; line-height: normal;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">第一個<span style="line-height: normal;"> </span>叫貪婪演算法、第二個叫分治演算法。</span></div>
<div style="color: #454545; font-size: 15px; line-height: normal;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">第一個<span style="line-height: normal;"> </span>叫活在當下、第二個叫有遠見。</span></div>
<div style="color: #454545; font-size: 15px; line-height: normal;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">第一個 把問題序列化、第二個把問題 心智圖化。</span></div>
<div style="color: #454545; font-size: 15px; line-height: normal; min-height: 18px;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div style="color: #454545; font-size: 15px; line-height: normal;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><span style="line-height: normal;">用第一種的人想出了外掛</span> - <span style="line-height: normal;">設計模式</span> (design pattern)<span style="line-height: normal;">。</span></span></div>
<div style="color: #454545; font-size: 15px; line-height: normal;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><span style="line-height: normal;">用第二種的人想出了外掛</span> - <span style="line-height: normal;">狀態機和不變資料</span> (state machine + immutable data)<span style="line-height: normal;">。</span></span></div>
<div style="color: #454545; font-size: 15px; line-height: normal; min-height: 18px;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div style="color: #454545; font-size: 15px; line-height: normal;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">還記得大二演算法排序的作業,標準解法是先做第二個<span style="line-height: normal;"> (qsort)</span>、然後問題變小了就接第一個<span style="line-height: normal;"> (shell sort)</span>。</span></div>
<div style="color: #454545; font-size: 15px; line-height: normal; min-height: 21px;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div style="color: #454545; font-size: 15px; line-height: normal;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">各有各的使用時機,冷靜分析後我從函數式編程的信仰者回到無神論者了。</span></div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">第一個適合許多未知、經常變動的問題。</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">第二個適合有固定答案、行為可預測的問題。</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<div style="color: #454545; font-size: 15px; line-height: normal;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">嗯嗯 不過當然用 react 還是比其他好 XD</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">---</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">目標努力 iterative 的 functional programming~ </span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">=> 每次用第一個方法切一小塊問題,用第二個方法解。</span><br />
<br /></div>
vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-6372699646450129472015-11-15T07:24:00.003-08:002016-01-28T22:02:37.652-08:00參加 FB Hackathon 2015 感想<h4>
FB Hackathon 比賽篇</h4>
有點缺乏結束的感覺,這時候放下再前進的方法就是寫篇文,透過寫作把事情組織、整理好。<br />
<br />
這是我第一次參加 Hackathon,這次是 FB 和 Girls in Tech 合辦的,主題是女性和公益。先不論結果、這次真的很新鮮 ( 趕期末作業的 fu ),之前上網研究過的 Hackathon 攻略,但今天完全丟在一邊沒在管... 哈哈<br />
<br />
大家在交誼區自我介紹、聊自己的想做的主題,結果弄了很久大家有一點點熟,到一張桌子旁邊坐了下來就變成一隊!!! 然後我們這隊大部份都是做後端、資料處理的,結果就是 nodejs + java + python 各種語言混合大亂鬥,真的很酷~<br />
<br />
經過聊天,發現大家都是第一次參加、發現大家都是熱心公益的人。前面三個小時,花了長時間 Brain Stroming,一般會得獎的參賽者都是決定好要做什麼才來的,還有偷做的。在 Hackathon 跑快速 BASIC 設計流程真的很神奇,定義問題 (Briefing)、分析已有解法 (Analysis)、思考改進方法(Synthesis)、實作 (Implementaion)、傳達 (Communication)。大概流程都有跑,不過 S & I 的部分有點亂。其他合作流程都有讓人 Hack 團隊的感覺。<br />
<br />
一直看設計研究的初學者,終於有個玩的機會 XD~ 很多不熟的地方,設定 Target Audience、設計 Magic Moment ( 這個沒做... )、列出 User Story ( 這個也沒做... T.T )、設計互動 ( 光流程不算... )、紙牌分數投票法。設計師注重這問題是不是真正的問題,工程師注重的是這問題要怎麼解,Hacker 的精神在這兩個中間。但年紀大了真的開始變得比較嘴砲了... T.T<br />
<br />
我這天在工程師的部分一直撞牆,真的是... 超弱。Node & Express 才摸一週多、Facebook APP 第一次開發 ( 這個真的超多地雷限制 )、mongodb 第一次用、環境設定在 Macbook 卡一卡、在 linode linux server 卡一卡。就像馬拉松配速沒配好一樣,在經過三小時討論、五小時 Coding,我在最後的四小時完全失去戰鬥能力。壓垮我的稻草是從 Facebook 抓圖隨機一直回傳 403。<br />
<br />
真的很感謝強者隊友們,PeiPei / Gordon / Joanne / Leo / Erica,就 12 小時 sprint 的角度來看,第一次還蠻成功的,如果再 iterate 幾次、這個團隊應該會生出好產品的。今天過程真的很好玩~ 有了好同伴,就從在 Panic Zone 變成在 Learning Zone 了。<br />
<br />
會再參加嗎?喔 真的很累,想到下個月還有一場就很崩潰。<br />
<br />
<h4>
<b>Hackathon 前問題研究篇</b></h4>
因為主題是女性和公益,賽前大概花了半天看了很多議題,挑出兩個覺得適合的問題。<br />
<br />
1. 增加同理心 (empathy) & 跨出舒適圈 (Comfort Zone) 的主題:<br />
> I don't like that man. I must get to know him better. - 林肯<br />
> While nothing is easier then denounce the evil doer, nothing is more difficult than understand him. - 杜斯妥也夫斯基<br />
> Step outside of your tiny little world. And step inside of the tiny little world of somebody else. - Sam Richards<br />
> Life begins at the end of your comfort zone.<br />
> <a href="http://blog.crew.co/getting-out-of-your-comfort-zone-why-its-hard-and-why-you-should/">comfort zone / learning zone / panic zone</a><br />
> Ted影片:<a href="https://www.youtube.com/watch?v=kUEGHdQO7WA">一個關於同理心的激進實驗</a><br />
> 厚書: <a href="http://www.amazon.com/The-Righteous-Mind-Politics-Religion/dp/0307455777">好人總是自以為是:政治與宗教如何將我們四分五裂</a><br />
<br />
<br />
2. 在東亞,特別少女生走自然組:不是因為能力不同、而是因為社會期待。 ( 昨天才突然發現我修大學資工系的課時,從來沒跟女生共事過 )<br />
> <a href="https://www.youtube.com/watch?v=kUEGHdQO7WA">台灣女生不喜歡讀科學,「世界第一」帶來的驚愕與警訊</a><br />
> <a href="http://t195-240.dialup.seed.net.tw/99annuals/flying62_2.html">高中選組男女大不同?性別與高中選組之研究</a><br />
<br />
<br />
好好放下、明天再前進 Javascript 和 函數編程的世界、Full Stack Developer 之路。<br />
---<br />
延伸閱讀:<a href="http://www.appsembler.com/blog/10-tips-for-hackathon-success/">10 tips for hackathon success</a>vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-34546357094131534732015-11-10T09:11:00.000-08:002016-01-28T22:02:55.432-08:00做 Prototype 的工具 framer js<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/mqk9Fw8FKLY/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/mqk9Fw8FKLY?feature=player_embedded" width="320"></iframe></span></div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">今天逛到一個設計聚會的臉書頁面,他們投票最想學的 Prototype Framework 是 <a href="http://framerjs.com/examples/">framerjs</a>。一點進去他們網站看,就發現了學 React 一直很缺乏的 Animation 和設計感。後來也發現 React 也有人做 Animation,今年的 ReactEurope 有兩個很好的 Talk,不過先來看這個影片,進修一下、看這個影片教設計師的 prototype 的方法吧。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">framers 是一個創意設計的工具,讓你能建立互動和動畫的 prototype。為什麼要做 prototype?探索和發明新的互動、定義要設計出的感覺是什麼、做有效的概念溝通。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">對我來說最有趣的部分是當你從你的設計中建出互動的 prototype,你會發現很多全新的互動。如果你只是做靜態的 mockup,然後叫其他人做一些 Animation,你會失去跟它玩的機會... 試著反過來做、亂玩參數、試著發明東西。對我來說,這是 prototyping 中最有趣的地方,總之就是東搞西搞一些。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">另一件事是當你談到設計,除了視覺設計外還有很多東西,當你開發 App 或是網頁,更要在意的是它感覺起來怎樣,怎麼互動、怎麼流動,很多視覺設計以外的東西。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">另一件很實際的是當你在團隊中工作,prototype 能讓你很有效的其他人溝通你的新想法。今天我可在這邊給個好例子:「想像你有一個可排序的列表,被選擇的項目會放大和加陰影浮在上面。所有的項目都會對此改變它們的位置。」</span><br />
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-wrY9GHZtHaw/VkIdrOQKwNI/AAAAAAAA37I/XbVdY5o9Ycc/s1600/Screen%2BShot%2B2015-11-11%2Bat%2B12.38.42%2BAM.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><img border="0" height="155" src="http://2.bp.blogspot.com/-wrY9GHZtHaw/VkIdrOQKwNI/AAAAAAAA37I/XbVdY5o9Ycc/s320/Screen%2BShot%2B2015-11-11%2Bat%2B12.38.42%2BAM.jpg" width="320" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: small; text-align: start;">下一步你會做一堆速寫</span></td></tr>
</tbody></table>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"></span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-6rWUYBKS7k0/VkIeBoErK3I/AAAAAAAA37M/1L03PKDkH24/s1600/Screen%2BShot%2B2015-11-11%2Bat%2B12.40.18%2BAM.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><img border="0" height="161" src="http://3.bp.blogspot.com/-6rWUYBKS7k0/VkIeBoErK3I/AAAAAAAA37M/1L03PKDkH24/s320/Screen%2BShot%2B2015-11-11%2Bat%2B12.40.18%2BAM.jpg" width="320" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: small; text-align: start;">然後是精美、有陰影的 Mockup</span><span style="font-size: small; text-align: start;"> </span></span></td></tr>
</tbody></table>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"></span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"></span>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-23vmRgux73A/VkIeZZUKBeI/AAAAAAAA37U/nPxbHQSGxa4/s1600/Screen%2BShot%2B2015-11-11%2Bat%2B12.41.49%2BAM.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><img border="0" height="157" src="http://3.bp.blogspot.com/-23vmRgux73A/VkIeZZUKBeI/AAAAAAAA37U/nPxbHQSGxa4/s320/Screen%2BShot%2B2015-11-11%2Bat%2B12.41.49%2BAM.jpg" width="320" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: small;">但我們真正接下來想看到是有動畫能互動的 Prototype</span><br /><span style="font-size: small;">試著做一些操作,移動項目</span></span></td></tr>
</tbody></table>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td><a href="http://4.bp.blogspot.com/-A4eiqsrbceU/VkIfT_3IkMI/AAAAAAAA37g/Y5ANpqhC234/s1600/Screen%2BShot%2B2015-11-11%2Bat%2B12.45.44%2BAM.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><img border="0" height="177" src="http://4.bp.blogspot.com/-A4eiqsrbceU/VkIfT_3IkMI/AAAAAAAA37g/Y5ANpqhC234/s400/Screen%2BShot%2B2015-11-11%2Bat%2B12.45.44%2BAM.jpg" width="400" /></span></a></td></tr>
<tr><td class="tr-caption" style="font-size: 13px;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">animation:after effect / keynote</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">prototyping: ... 一堆,最後一個是framer</span></td></tr>
</tbody></table>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"> 我們今天想著要 prototype 什麼,它實際上就是在設計明天。從概念到執行中間大概可以分成四個階段:Paper -> Sketch / Photoshop -> Framer -> Code。以流程來說,Prototype 大概是在正中間的位置。Prototype 可以往前或往後一點。現在的產品設計流程,通常會做很多靜態的 mockup 但只做一個到兩個 Prototype,我們希望有了更好的 Prototype 工具之後,可以變成三五個 mockup 但做很多的 Prototype。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Framer js 是一個開源的程式庫,提供 Framer Studio Mac App:它提供程式碼編輯器、即時視覺回饋、可以從別的軟體 Import、展示模式。</span><br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-IshXhNK4H8I/VkImhHSiq4I/AAAAAAAA38E/0fon9gF2umI/s1600/Screen%2BShot%2B2015-11-11%2Bat%2B1.14.36%2BAM.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><img border="0" height="394" src="http://3.bp.blogspot.com/-IshXhNK4H8I/VkImhHSiq4I/AAAAAAAA38E/0fon9gF2umI/s640/Screen%2BShot%2B2015-11-11%2Bat%2B1.14.36%2BAM.jpg" width="640" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Framer Studio 可以直接從 Sketch 導入 layer、階層。</span></td></tr>
</tbody></table>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-XJVfK-0_q_w/VkIizhFLntI/AAAAAAAA37s/tffawiEgiGI/s1600/Screen%2BShot%2B2015-11-11%2Bat%2B1.00.35%2BAM.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><img border="0" height="202" src="http://1.bp.blogspot.com/-XJVfK-0_q_w/VkIizhFLntI/AAAAAAAA37s/tffawiEgiGI/s640/Screen%2BShot%2B2015-11-11%2Bat%2B1.00.35%2BAM.jpg" width="640" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Framer 提供這些功能。</span></td></tr>
</tbody></table>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Layer 就是一個 Container 可以設定大小、位置、透明度、縮放、圖片、模糊... 一堆屬性。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Animation 讓你從一組 states 過渡到另一組 states。可以設定 curve、延遲、時間長度。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">States 讓你命名一組 states,之後你就可以指定從 XXX 變成 YYY。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Events 讓你可以處理 drag、drop、click、scrolling、touchstart ...</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">開始 Demo Prototype examples & QA 從影片13分15秒。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">---</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">framer 教學影片:</span>https://www.youtube.com/watch?v=3zaxrXK7Nac<br />
<br />
從影片中可以看到,設計師是直接把一整張圖當成 Layer 來操作。然後視覺上的元件就當成自訂元件,不用管甚麼 HTML / JSX,然後就對視覺上的這個元件 ( 一張 button 的圖 ),安上click 事件,然後用動畫把另外一張圖換上來...<br />
<br />
設計師設計時用不同大小的圖片當成自訂元件,以這樣的元件視角去設計整個 Prototype,看是這張圖要不要模糊、要浮在前面還是後面、要不要讓他可以 Scroll、動畫時要如何從一個 State 變成另外一個 State。<br />
<br />
這樣子好直覺啊,一個元件就一張圖,用 sketch 畫畫就好,不像程式設計師要用 HTML / CSS / UIKit 兜好久。<br />
<br />
<br />
framer 教學影片 https://www.youtube.com/watch?v=kJYI4oYrHik<br />
他們的 script 語法好簡單,超簡潔、超適合簡單的 UI,像 Python 用 indent 代替大括號真的很棒,然後設定 Event 也太簡單。都在操作 Image 超簡單。<br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">發現那個 script 叫 coffee script 喔喔喔 看了完全不想寫 Javascript了 XD</span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com2tag:blogger.com,1999:blog-1190814513563341266.post-38510673422212419072015-11-09T02:05:00.000-08:002016-01-29T09:54:14.075-08:00函數式編程介紹 ( 1 / 2 )<h3>
<b><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">函數式編程的專有名詞篇</span></b></h3>
<div>
<b><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></b></div>
<h3>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><div style="font-family: -webkit-standard; font-weight: normal;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><a href="https://en.wikipedia.org/wiki/Pure_function">純函數 ( Pure Function )</a><span style="font-weight: normal;">:</span></span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-weight: normal;">給同樣輸入參數,就會回傳同樣結果的函數,而且沒有任何可觀察到的副作用。Pure Function 的例子:sin(x)。非 Pure Function 的例子:getChar()、random()、還有許多類別中的 member function。從數學上來理解,純函數就是一個數學函數,一個輸入會對到一個輸出。</span></div>
<div style="font-family: -webkit-standard; font-weight: normal;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">純函數的特點:</span></div>
<ol style="font-family: -webkit-standard; font-weight: normal;">
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Portable / Self-Documenting :完全是自給自足的 ( self contained ),沒有外在的依賴 (Dependency)。</span></li>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">可暫存 ( Cacheable ):把計算值暫存的技巧被稱作 memorization,可以用來避免重複計算,加速程式。</span></li>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">好測試 ( Testable ):不需要管上下文和呼叫順序就可以測試。</span></li>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">適合平行處理、純函數是線程安全的 ( thread safe )。</span></li>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><a href="http://stackoverflow.com/questions/210835/what-is-referential-transparency">引用透明 ( Referential Transparent )</a>:一個引用透明的運算式指的是 如果這個運算式可以被他的值 (回傳值) 替換而不影響整個程式的行為。簡單講就是有可交換性啦。</span></li>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">可以熱抽換 ( Hot-Loading ):因為不依賴外部的狀態。</span></li>
</ol>
<div style="font-family: -webkit-standard; font-weight: normal;">
<br /></div>
<div style="font-family: -webkit-standard; font-weight: normal;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><a href="https://en.wikipedia.org/wiki/Side_effect_(computer_science)">副作用 ( Side Effect )</a>:<span style="font-weight: normal;">如果一個函數或運算式 ( expression ) 被說有副作用,這指的是它改變了一些狀態 ( states ) 或是 跟呼叫他的函數或外在世界,有可觀察到的互動。舉例來說,一個函數可能會改變全域變數或函數的靜態變數、改變傳進來的參數、引發例外 ( exception )、列印資料到螢幕或是呼叫了其他有副作用的函數。如果有了副作用,函數的行為會受到歷史、執行順序的影響。這樣子一來,想要理解或除錯有副作用的函式會較難,因為就必須要了解他的上下文 ( Context ) 和執行歷史。</span></span></div>
<div style="font-family: -webkit-standard; font-weight: normal;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">顯式 ( Explicit ):形容函數与外界交換資料只有一個唯一管道——参數和回傳值。和顯式的相反是隱式 ( Implicit )。</span></div>
<div style="font-family: -webkit-standard; font-weight: normal;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><a href="https://en.wikipedia.org/wiki/First-class_function">一級函數( First-Class Function</a> ):<span style="font-weight: normal;">指的是語言支援把 Function 當成第一類公民,可以支援一般變數的操作,像是把 Function 當成變數傳給另外一個 Function。</span></span></div>
<div style="font-family: -webkit-standard; font-weight: normal;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><a href="https://msdn.microsoft.com/zh-tw/library/bb397687.aspx">Lambda Function</a><span style="font-weight: normal;">:Lambda 運算式是匿名函式,可用來建立委派或運算式樹狀架構類型。</span></span></div>
<div style="font-family: -webkit-standard; font-weight: normal;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><a href="https://en.wikipedia.org/wiki/Formal_system">形式系統 ( Formal System )</a><span style="font-weight: normal;">:形式系統可以的廣泛地被定義為任何基於數學模型的、良好的抽象思考的系統 ( system of abstract thought )。</span></span></div>
<div style="font-family: -webkit-standard; font-weight: normal;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><a href="https://en.wikipedia.org/wiki/Currying">Currying</a><span style="font-weight: normal;">:這個技巧能把接受多參數的函數轉換為多個連續呼叫的單一參數函數。</span></span></div>
<div style="font-family: -webkit-standard; font-weight: normal;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><a href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work">閉鎖 ( Closure )</a><span style="font-weight: normal;"> / </span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures" style="font-weight: normal;">MDN</a><span style="font-weight: normal;">:Closure 是可以使用獨立 / 自由變數的函數。換句話說,Closure 記得它</span>實體化<span style="font-weight: normal;">時的環境變數。</span></span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-weight: normal;"><br /></span></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-weight: normal;">PS:專有名詞那邊引用了很多別人的解釋,可以點前面的連結進去看完整版。</span></span></div>
</span></h3>
<h3>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">-----------------------------------------------------------------------------------------</span></h3>
<div>
<a href="https://drboolean.gitbooks.io/mostly-adequate-guide/" style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Professor Frisby's Mostly Adequate Guide to Functional Programming</a><span style="color: #333333; font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"> ( 下文是這本書的筆記 )</span></div>
<h3>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><b><br /></b></span></h3>
<h3>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><b>函數式編程簡介篇</b></span></h3>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">函數式編程的的哲學就是假設副作用 ( side effect ) 是不正確行為的主要原因。所以努力想要控制和管理副作用,經常的解法就是把純函數、單子和不純的函數 ( impure function ) 分開來管理。另外鼓勵大家多寫純函數。我們對待資料要像玩戲法般,一直傳來傳去、禁止使用狀態 ( state ) 和副作用。剛剛這段文字有提到很多專有名詞,但這樣子怎麼寫程式?這邊我開始介紹一個新工具叫 柯里化 ( currying )。</span><br />
<br />
<b><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Currying:</span></b><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Currying 把任何的函數轉換成 一連串只做單一事情的函數,各個擊破。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Curring的概念是簡單的。它讓你呼叫<span style="color: red;">函數 A</span> 時可以傳比預期還少的參數。然後這個<span style="color: red;">函數 A</span> 會回傳</span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="color: blue;">函數 B</span></span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">。<span style="color: blue;">函數 B</span> 需要的參數是先前沒傳進<span style="color: red;">函數 A</span> 的參數。所以整個流程是:</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">函數A (x, y) 可以等價於下面這段</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">-------------------------------------</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">函數B = 函數A (x)</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">函數B (y)</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">先前傳進去</span><span style="color: red; font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">函數 A</span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"> 的參數會利用閉鎖 ( Closure ) 的方式變成</span><span style="color: blue; font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">函數 B</span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"> 的環境變數。</span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">看完上面這段解說,一定會想這什麼鬼東西?來看看 <a href="https://drboolean.gitbooks.io/mostly-adequate-guide/content/ch4.html">這邊的例子</a> 會容易理解的多。</span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">利用這個技巧,就可以選擇一次傳所有參數或是把參數分幾次傳給數個函數。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><a href="https://lodash.com/docs#curry">lodash提供了把函數 curry化的工具</a>,用法:</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">var divide = <span style="color: #38761d;">function (x,y) { return x / y } </span>可以被改寫成</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">-----------------------------------------------------</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">var divide = curry( </span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="color: #38761d;">function (x,y) { return x / y }</span> );</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">之後就可以被這樣呼叫</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">divide <span style="color: red;">( x )</span> <span style="color: blue;">( y )</span>;</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">或是</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">var xDividedBy = divide ( x );</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">tenDividedBy ( y );</span><br />
<br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">PS:這工具的名字是為了紀念一個美國數學家 --- <a href="https://en.wikipedia.org/wiki/Haskell_Curry">Haskell Curry</a>,跟咖哩沒有關係。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">接下來我們看另外一個工具 代碼組成( compose )。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><b>組合 / 組成 / 合成 ( compose )</b>:</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Composition 把許多函數用管子 ( pipe ) 連接起來,變成一個新個函數。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-eFzwVuCTVaU/VkBsgOAPFuI/AAAAAAAA36k/2G6L_UmPZjI/s1600/Screen%2BShot%2B2015-11-09%2Bat%2B5.50.05%2BPM.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="235" src="http://2.bp.blogspot.com/-eFzwVuCTVaU/VkBsgOAPFuI/AAAAAAAA36k/2G6L_UmPZjI/s320/Screen%2BShot%2B2015-11-09%2Bat%2B5.50.05%2BPM.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">f, g 都是函數,x 在它們之間被傳遞。<br />注意g函數的參數是 x、f函數的參數是 g函數的回傳值。<br />較常用在 f & g 都吃同一類參數的時候 (ex: 字串)。</span></td></tr>
</tbody></table>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">例子:變大寫和去空白函數 = compose (變大寫函數, 去空白函數)</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">因為有了一級函數、Currying、組合,Pointfree 風格變得流行了起來,指的是函數呼叫時不用提到它要處理的資料。例如:</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="color: #674ea7;">var</span> snakeCase = <span style="color: #674ea7;">function</span> ( <span style="background-color: #ffd966;"><b>word</b></span> ) {</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"> <span style="color: #674ea7;"> return</span><span style="color: magenta;"> </span><span style="background-color: #ffd966;"><b>word</b></span>.toUpperCase( ).replace( <span style="color: #e06666;">/\s+/ig</span>, <span style="color: #6aa84f;">'_' </span>);</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">} </span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">可被改寫成</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">-----------------------------------------------</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="color: #674ea7;">var</span> snakeCase = compose ( </span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">replace( </span><span style="color: #e06666; font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">/\s+/ig</span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">, </span><span style="color: #6aa84f; font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">'_' </span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">), toLowerCase );</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">用組合形成新函數就不用提到資料 --- 也就是之前寫法中的 <b style="background-color: #ffd966;">word</b></span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><b style="background-color: #ffd966;"><br /></b></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Pointfree的編程風格可以讓我們移除不需要的名字 (names),讓我們保持簡潔 ( concise ) 和一般化 / 泛型 ( generic )。但要小心 Pointfree 是個雙面刃,有時會把原來的目的變得模糊。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">( 以上是書本前五章的內容,其他待續... 後面有點硬,不知道什麼時候會看。)</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="background-color: #f6f6f6; color: #333333;"><br /></span></span>
<span style="color: #333333; font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="background-color: #f6f6f6;">---</span></span><br />
<span style="color: #333333; font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="background-color: #f6f6f6;">這篇文介紹得很好 <a href="http://coolshell.cn/articles/10822.html">函數式編程</a></span></span>vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-52165291005301891002015-11-08T05:12:00.002-08:002016-01-28T22:03:59.251-08:00Javascript 中的函數式編程 (a talk @ ReactiveConf 2015)<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">影片:<a href="https://www.youtube.com/watch?v=BfzjuhX4wJ0&feature=youtu.be&t=2h16m7s">Functional Programming in Javascript By Daniel Steigerwald</a> </span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Daniel 是 google 前員工、也是 https://github.com/este/este 這個 React + Redux + immutable.js Starter Kit 的作者,在 Github 上有 1800 顆星。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">我認為函數式編程 ( Functional Programming ) 將在明年成為主流。像在 C++11 和 Java 8 中已經開始有 lambda function。我接下來聊我已經用在 Production 的東西。我認為函數式編程已經在前端的世界已經被 React 引入。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<b><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">什麼是函數式編程?</span></b><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">沒有什麼神秘的東西,到處都是純函式 ( Pure functions everywhere )、不可變的數值 ( Immutable values )、用組成而不用繼承 ( composition over inheritance )、紀錄代替類別 (records over classes)、處理好副作用 ( taming side-effects )。我覺得 functional programming 有點像是人工智慧,聽起來有點酷、有點奇怪,但當你了解了它以後,就只是無聊、很平常的寫程式而已。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><b>為什麼要函數化 ( functional )? </b></span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">因為軟體正在吃掉這個世界,它必須要做到最好。函數式編程已經被證明,比較少臭蟲 ( less bugs)、較不複雜 ( less complexity )、程式碼更可讀 ( more readable code ) 和更好的效能 ( more performance )。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><b>物件導向程式設計 ( OOP ) 有什麼問題?</b></span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">沒有問題,只是很難、常被誤用,而且有時是難以避免的。整個物件導向程式設計的模式 (paradigm) 是基於「送訊息給物件是唯一跟狀態 ( state ) 互動的方法」,因此狀態就會被分散。於是在分散式系統中狀態的一致的難度是跟世界和平一樣的 XD</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-NqF8whIlX1E/Vj9BEosEl7I/AAAAAAAA35w/csXWLMH0e3w/s1600/Screen%2BShot%2B2015-11-08%2Bat%2B8.32.45%2BPM.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><img border="0" height="339" src="http://2.bp.blogspot.com/-NqF8whIlX1E/Vj9BEosEl7I/AAAAAAAA35w/csXWLMH0e3w/s640/Screen%2BShot%2B2015-11-08%2Bat%2B8.32.45%2BPM.jpg" width="640" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">物件導向程式設計 和 函數式編程的設計模式比較</span></td></tr>
</tbody></table>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Scott Wlaschin是很好的講者,不像我鼓勵大家去聽他的演講。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">在 OOP 中,每次方法在某個實體上被呼叫其實就是副作用。副作用很難被追蹤、被理解,沒有人喜歡驚喜。驚喜在生活中是好的,但驚喜在程式碼裡面沒有任何好的地方。我們被教導要用繼承,但他是陷阱,程式碼會不夠彈性、很難之後改變。設計模式最難的是如何幫這些模式取名字,動詞偽裝成名詞。策略、工廠、Commands...</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">React 中最耀眼的原則是函式組成法 ( function composition )。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<b><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">純函數 ( pure function ) vs 髒類別 (dirty class)</span></b><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">純函數沒有任何副作用。他很難去違反只負責一件事的原則 ( single responsibility principle) 因為純函數只有一個明顯的目的 --- 把輸入轉成輸出。所以測試就變得超簡單。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">類別是髒的。互叫一個簡單的類別函式,就會改變它。誰做的?為什麼做?我們永遠不知道 ( 直到我們 debug 後)...</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">推薦這本 github 上的書<a href="https://github.com/MostlyAdequate/mostly-adequate-guide">適當的函數式編成指南</a> ( 在 github 上有 6000 顆星)</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-trYOXa5g8dY/Vj9HW1kBZYI/AAAAAAAA36A/XOIr5LVtpiI/s1600/Screen%2BShot%2B2015-11-08%2Bat%2B8.59.38%2BPM.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><img border="0" height="362" src="http://4.bp.blogspot.com/-trYOXa5g8dY/Vj9HW1kBZYI/AAAAAAAA36A/XOIr5LVtpiI/s640/Screen%2BShot%2B2015-11-08%2Bat%2B8.59.38%2BPM.jpg" width="640" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">如果你不理解這個程式,沒關係。我也不懂。在函數式編程裡它等於 ( (4 + 0) * 2) + (4 * 2)</span></td></tr>
</tbody></table>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><b>Immutable.js</b></span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">不可變資料一旦被建立就不能被改變,這使得更簡單的應用程式開發,不用預防性的回傳複製品,更可以使用間單的邏輯來達到進階的 memoization 和改變偵測。一個針對不變資料的可變 API 並不改變原來資料,而是總是產生新的資料。</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"> - 和 原生的 Javascript array 有很相似的 API</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"> - 保持永遠的不可變 (List, stack, map, orderedMap, Set, OrderedSet and Record)</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"> - 非常快</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">---</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">PS:作者講的不多,上面很多都是照投影片上大量文字打的。</span>vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-22108454294197825812015-11-07T22:58:00.002-08:002016-01-28T22:04:27.695-08:00Redux = 事件驅動系統 = 伺服器<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Redux 做的事情其實很簡單 ( <a href="https://gist.github.com/gaearon/ffd88b0e4f00b22c3159">主程式才99行</a> ),就是可客制 Event 的 Event System。這概念在別的領域已經很成熟。但因為 Redux 的目標使用者是 Flux 的使用者,套用了很多原來 Flux 裡的專有名詞,所以對非 Flux 使用者變得很難懂。這邊透過類比大家都知道的名詞,目標讓 Redux 的概念連六歲小孩都能理解。</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<h2>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
Flux:</span></h2>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Actions trigger reducer to update states in the store.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<h2>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
Redux 的行為等於事件驅動系統 ( Event-driven System ) / 有限狀態機 ( FSM ):</span></h2>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Events trigger event handler to update states in the machine.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<table class="graytable">
<tbody>
<tr>
<td><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Action</span></td>
<td><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Event | Signal | Message</span></td>
</tr>
<tr>
<td><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Reducer</span></td>
<td><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Event Handler | Finite State Machine 中的 transducer</span></td>
</tr>
</tbody></table>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<h2>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
Redux 的行為等於一個網頁伺服器:</span></h2>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">When a request came, using route table mapping to get a method to process it。 </span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<table class="graytable">
<tbody>
<tr>
<td><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Action</span></td>
<td><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Http Request</span></td>
</tr>
<tr>
<td><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Store.dispatch(Action)</span></td>
<td><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">送 Request 到 Server</span></td>
</tr>
<tr>
<td><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Reducer</span></td>
<td><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Router 把 Request 送到對應的 Router Method,更新 Database</span></td>
</tr>
<tr>
<td><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Store</span></td>
<td><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Database</span></td>
</tr>
<tr>
<td><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">UI / React</span></td>
<td><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Http Response</span></td>
</tr>
</tbody></table>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Redux的行為等於巷口那家... 哎 想不出來比較生活的說法。</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">現在有沒有覺得 Redux 很 Awesome?好像沒有啊... 但我們回到瀏覽器的環境重新看一下,因為 HTML 的元件很小,開發者會組合 HTML元件成為可重複使用的「大元件」。但問題是瀏覽器中的 「事件處理系統」 是針對 HTML 小元件的,沒有給「大元件」的。於是Redux 提供了給開發者可以自行定義事件的「大元件」事件處理系統,因為你可以控制整個事件處理系統,重播和紀錄事件都變成毫不費力的事。現在又感覺到 Redux 很 Awesome了吧!!!</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">故事到了這邊,一定會想這樣解說,哪個六歲小孩能了解啊,相信這是大家共同的疑惑,不過 「投資一定有風險,基金投資有賺有賠,申購前應詳閱公開說明書」,我會反省的...</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">---</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">延伸閱讀:</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><a href="http://rackt.org/redux/docs/Glossary.html">redux 的專有名詞解釋</a></span><br />
<a href="https://github.com/rackt/redux/issues/891"><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Redux Issue 891:Is redux conflating actions with events?</span></a><br />
<a href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work"><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">六歲小孩也能懂的 Javascript Closure 說明</span></a>vividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0tag:blogger.com,1999:blog-1190814513563341266.post-59911172736817359112015-11-06T20:35:00.003-08:002015-11-06T21:40:00.208-08:00訓練英文的閱讀能力<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/PZqXBhGR_W8/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/PZqXBhGR_W8?feature=player_embedded" width="320"></iframe></div>
<br />
最近每天就是一直上網苦苦追趕 Javascript 的 state of art。吸取資訊需要三個重要的能力:英文聽力能力、簡體中文閱讀能力、英文閱讀能力<br />
<br />
英聽:<br />
看youtube都開 1.25x 或 1.5x 的速度,聽得很順、完全可以理解。(感謝無字幕的 冰與火之歌 和 廢話很多的 ASP Surfing Championship 對我的訓練 )<br />
<br />
簡體中文閱讀:<br />
看了很多對岸的文件和字幕 XD,一下就適應了。快要和繁體一樣快。( 因為看太多小說,我對中文的閱讀速度真的很有自信 )<br />
<br />
英文閱讀能力:<br />
唯一的問題就是我的英文閱讀速度,上不去啊。想十年前 ibt 托福閱讀還拿了 29/30,還是不夠。做了這個 <a href="http://www.staples.com/sbd/cre/marketing/technology-research-centers/ereaders/speed-reader/index.html">英文閱讀能力線上測驗</a> 發現我現在的閱讀速度只有每分鐘 150 個字 ( 退化...? ),大概是美國小學生的能力。成人平均是 300 個字、大學生平均 500 個字、成績好的大學生大概是 800 個字 ( 這應該是一般部落客的水準吧 )、練過速讀大概是 1500 字。測完就知道我瓶頸在哪了。以前看論文或是教科書,完全沒問題啊,因為那時的瓶頸是理解能力。但現在 Javascript 的資訊很多是部落格,廢話跟我一樣多的部落格,英文閱讀能力就變得超重要。<br />
<br />
偷吃步的解法:一個是叫 Mac 唸給你聽... 叫 Mac 念得很快,測過快到超過我的英文閱讀速度還是聽得懂。另一個是只看程式碼,但這畢竟只是治標,今天開始尋找治本的方法。<br />
<br />
速讀的訓練的方法:<br />
1. <b>練習眼睛移動</b>:<br />
用規律的速度,拿支筆從每行的開頭,指到每行的結尾。影片剛開始建議的速度是 1.0 秒/行,然後縮減到 0.5 秒 / 行的速度。換算下來大概是每分鐘 800 個字到 1500個字。但對我這個小弱弱,剛開始每三秒一行就好,然後目標練到一秒一行就好。練習的方式是開著節拍器,跟打鼓一樣,設定它每十五分鐘從 20 bpm 加速到 60 bpm,每拍一行開個 16 分音符剛好,每個聲響移動1/4行,慢慢進步。<br />
<br />
2. 練習邊緣視覺:<br />
筆不用從開頭指到句尾。從開頭第 N 個字開始,看到結尾前第 N 個字就好,因為邊緣視覺會看見。慢慢練習 讓 N 從 0 變成 3。<br />
<br />
今天開始每天練十五分鐘,看到底管不管用、目標每分鐘 800 字。 (快五倍... 這有可能嗎?)<br />
目前能力:每分鐘 150 字 (每五秒一行)<br />
週目標:每分鐘 400 字 (每兩秒一行, 30 bpm)<br />
月目標:每分鐘 800 字<br />
<br />
好像會有個 browser extension 來訓練這種事吧,我找找...<br />
<br />
---<br />
wow... 估了一下,我國中看一本金庸大概五小時、大概每分鐘 900 個字。是我現在英文閱讀能力的六倍 T.Tvividadadahttp://www.blogger.com/profile/05205365740501217101noreply@blogger.com0