React 動畫

動畫

React 提供了一個 ReactTransitionGroup 的組件元件來作為一個底層的動畫 API,以及另一個 ReactCSSTransitionGroup 來方便實作基本的 CSS 動畫。

繼續閱讀

React 附加組件介紹

附加組件(Add-ons)

官方會把一些實用的共用工具放置在 React.addons。這些工具應該暫時被視為還在實驗階段,但最後官方應該會將其整合進核心功能或者如下列共用的工具函式庫:

繼續閱讀

React 關於工具整合

工具整合

一般來說,每一個專案使用不同的建置方式,系統環境,以及部署方式。React 試著盡可能的讓一切與系統環境沒有任何相依性。
意味著官方盡可能讓所有平台都能用一樣的方式運行 React。

繼續閱讀

關於 Reactjs 的核心觀念

這篇文章為官方部落格的文章隻翻譯。原文

以觀念來說React 是一種使用 Javascript 來快速建立大型 Web 的方式,它非常容易擴展,且官方已將其使用在 Facebook 與 Instagram 上。

繼續閱讀

理解 Javascript 的 Function.prototype.bind

Function.prototype.bind 函式繫結大概是當您開始學習 Javascript 時最後關注到的議題。
通常是當您遇到一種狀況:需要在其他 Function 保留 this 的執行環境(Context)。
講執行環境可能太抽象,舉例來說就是當您需要在函式的另外一個函式中呼叫 this.action() 的時候。
(這邊如果看不懂請耐著性子看下去)
不過通常這時您可能也不知道您需要的就是 Function.prototype.bind()

繼續閱讀

Gulp 使用問題與記錄

這篇文章除了記錄一下最後只是堪用的解法,如果有高手知道更好的做法煩請賜教。

話說小弟今天要來寫一些 React 的測試專案,就想說那就搭上 Gulp 吧!原本的目的很單純就只是用 Gulp compile 一些常用的 meta language,像是 Less, Jade 外加上 Jsx。也不是什麼很大的專案所以架構上其實就是在 React 的 StartKit上面再開個自己的測試目錄。

繼續閱讀

使用 Gulp 為前端開發伺服器

因為 Gulp 這個任務執行工具最近越來越流行,所以想說試著用它來做些事情,其實它跟 Grunt 一樣可以拿來處理很多事情像是整合 Javascript 檔案,壓縮圖片等等。如果你之前從來沒聽過 Gulp 這裡建議您先閱讀 英文教學, Gulp 初體驗
在這篇文章中,我們將學習使用 Gulp 來完成一個簡單的小型伺服器以協助您平日的前端開發,當然這也支援 livereload

繼續閱讀

iOS UIScrollView 使用 Autolayout

前言

誰說你不能讓一些既有的控制項使用一些新技巧,UIScrollView 是從 iOS 一開始就存在的控制項,已經很多部落格文章, Stackflow 問題和官方文件討論如何用舊有的方式在 UIScrollView 中設定你的內容,本文將描述一些搭配 AutoLayout 的使用技巧。

繼續閱讀

關閉OSX通知時 ICON 跳跳跳的動畫

當你在 Mac 上開啓 Line 的時候,由其實開發時常常因為 Line 收到通知導致那個在 Dock 上的 Icon 一直在那邊彈跳(Dock Bouncing) 想把它關掉必須靠指令

繼續閱讀

11 種類型的程序猿

甘道夫(Gandalf)

這種類型的程式設計師看起來就像演員候選名單中負責飾演魔戒-甘道夫的人,他(或者『她』)有著長到快到膝蓋的鬍子,佩戴著一頂看起來有點蠢的帽子,他們可能會在冬天穿著斗篷或披風。對團隊而言幸運的是這個人就跟甘道夫會魔法一樣,他在工作時也像在變魔術一樣強大。不幸的是你們就時常要忍受甘道夫訴說關於他的經歷,像是他是如何上山下海為了把打洞卡送到電腦室。
甘道夫類型的程式設計師是你團隊的重砲手,不過你應該該試著讓他們留在後勤部隊,只在必要的時候呼叫他們。

殉道者

在其他職業中,『殉道者』只是單純的工作狂,但是在開發這塊領域『殉道者』已經達到另一個境界。工作狂至少還會回家洗澡睡覺。但是殉道者則以睡在桌下那些空的披薩盒堆為榮。問題是沒有人請『殉道者』做到這種境界,而且他們常常會說出類似 “OK!快下班回家吃晚餐吧!我會在今晚做完後面三週的進度” 讓團隊的其他人感到內疚。

宅宅

請注意,當他或她和你注意到你時,你蠻有可能就會被迫聽一場長達三個小時的『鋼彈W vs 七龍珠Z』的講座,或者是為什麼 PS3 Xbox 360 哪一個更好之類的分析。宅宅的工作環境充滿了海報,公仔,以及其他週邊,大部分他們喜歡的東西來自日本,宅宅不光是有點難相處,他們有時實在是花太多時間在他們的愛好上包含工作時。

Vince Neil (重金屬音樂歌手)

這個40多歲的傢伙就像是 1984 年代所有不良示範(或者很潮?)的集合體,一頭蓬鬆的長髮,故意弄破,皺摺刷白的牛仔褲外加一個印花領巾。Vince 工作的時候都會哼著像是邦喬飛和威豹樂隊的歌。如果Pour Some Sugar on Me不是那麼俱有傳染力的話,這點原本可能沒那麼糟。
一般來說跟 Vince 一起工作還挺好玩的,通常他們經驗也很豐富,不過就是童心未泯。不過當他或她想融入搖滾樂風格的生活方式時,事情變的很麻煩。你也不想跟一個每天帶解酒液的人一起上班吧。

忍者

忍者型的程式設計師通常是團隊中的 MVP,但卻沒人意識到這件事。就像那些傳說的刺客一樣,你不會知道忍者是何時執行任務的。但你總會在隔天早上開啟版控時發現證據,看到忍者在凌晨4點的時候 check in 了一份程式碼,那是你本來計劃一週完成的任務,你甚至不知道忍者怎麼知道這項任務。你看!當你還沒開完會,忍者就已經在工作了。
忍者是非常神秘的,你可能甚至不知道他們的名字,但你知道有他們在每一個專案似乎都可以進行得更順利。雖然行事謹慎不過忍者是一個孤獨的戰士,千萬不要強迫他們和普通員工組隊。

理論家

理論家知道一切關於程式設計的知識。他們可以花4個小時演講關於一個冷門語言的歷史或者指出你的 code 哪裡寫得不完美導致浪費了3奈秒。當他們開始寫 code 的時候,他的程式碼非常乾淨優美,導致我們這些凡人很難理解他們的程式碼,他們最愛用像是遞迴這類的技巧,微調每一個區塊的程式碼到極致。不過他們犧牲了時間和程式的可讀性。
理論家也是很容易分心的,一個簡單需要1個小時的任務,他們要花3個月,因為他們覺得現有的工具不夠好所以他們必須要自己打要一套新的工具來建置新的函式庫,再用它來打造整個系統以滿足他們的高標準。理論家可能是你最好的隊員之一如果你有辦法控制他們讓他們專注專案本身,而不是浪費時間在研究終極排序演算法上。

牛仔

牛仔基本上是不受控制的,他們通常是很厲害的程式設計師,通常工作速度是一般人的 2 到 3 倍,問題是有一半的時間是靠偷工減料得來的,牛仔認為把程式提交到版控很浪費時間,把設定資料存到程式外部也很浪費時間,跟其他人溝通也很浪費時間…你懂了吧。
牛仔的程式碼幾乎都是『義大利麵式碼』,因為他們從來不重構。很可能會發生的是; 7 頁的核心功能的程式碼看起來似乎就像教科書教材中『不要這麼做』範例,但這些程式碼卻神奇的能運作。牛仔肯定無法跟其他牛仔一起工作,如果你把兩個牛仔放在一個專案,那這個專案註定失敗,因為他們會互相扯對方後腿。
把牛仔放在一個只注重完成期限而不管其他事情的專案是最好的,因為他一定能在期限前完成。牛仔大概就是聒噪版的忍者。只是忍者精確地執行任務,牛仔則是往紅色三角形布一路狂衝的憤怒公牛。

傘兵

你知道那些電影中的突擊隊員,就是指揮官帶著那些被空投之後深入敵方陣營且執行秘蜜計劃的人。這些人是軟體開發中的傘兵。傘兵是你最後的手段,為了拯救那些快死的專案,你把他們送到那些專案。傘兵缺乏耐心執行那些長期的任務,但是他們不可思議的強項是快速了解不熟悉的程式包含別人的 API 等,然後快速上手。其他程式設計師也許要數週或數個月去熟悉專案以利有效率的工作。傘兵只需要數小時或幾天。傘兵也許不夠了解核心的程式碼,不過在缺乏時間,全隊可能失敗的情況下他們可能會成功。

庸才 (Mediocre Man)

堪用就是你從庸才身上拿到最好的東西,他們總是用較長的時間產生比團隊中其他人更糟的程式。穩扎穩打緩慢地完成專案可以用來形容他們。不過他們總是可以讓專案完成的剛剛好或者堪用,這也讓他們總是能有工作。
當你面試這種類型的工程師時,他們可以告訴你很多關於他們曾經參與過的專案,但不是很了解他們實際參與的項目。要知道是不是庸才是相當容易的:詢問他們所做工作的具體內容,他們會突然得到失憶症。

傳教士

不管你既有的系統環境是什麼,傳教士堅持他可以改善所有的狀況,但是你要放棄你現有的工具和流程,並且用其他東西取代。傳教士實際上是理論家的相反。傳教士是坦率的,直言不諱,他們知道有關軟體開發的可怕,但是執行專案的數量卻不夠多。
傳教士有著一顆專案經理或者部門主管的心,不過他們缺乏經驗或知識來成為管理者。所以在傳教士變成一個單純管理的角色之前,其他人不得不一直忍耐傳教士們想要徹底改革這個工作環境的嘗試。

Googler

最後一個但是不在清單中的就是 Googler,他們是那種只要不開瀏覽器搜尋就不能完成專案的類型,因為他們老是忘記基本的語法,或是根本不想記,他們看得懂這些語法主要的目的但是不能記住確切的單字拼法或語法排列。他們通常最少開三個分頁使用不同的關鍵字或排列來搜尋同一件事。
舉例來說

  • 第一個 Tab -> Get value of the first array
  • 第二個 Tab -> Get value of the array[]
  • 第三個 Tab -> Array[] get first value

他們是非常機智的不過他們寫程式的速度通常相對慢了一點,因為他們主要的時間都花在搜尋。

原文