在更新到 0.60 之後打包 android release APK 時遇到了這樣的錯誤:Error: Duplicate resources
主要的問題是在進行 react-native bundle 指令時會重複的打包資源,因此在後續打包 APK 時出現錯誤
主要的解決方法是在 react-native library 的 react.gradle
檔案中找到 doFirst
程式區塊,並在下方加入一段 doLast
程式碼來避免重複的打包資源
node_modules/react-native/react.gradle
1 | doFirst { |
由於這個方法是直接對 node_module 進行修改,當重新安裝 node_module 時,修改過的設定就會被蓋掉,為了避免重複的修改行為,我們可以利用 script 和 postinstall 設定來自動化。
建立一個新資料夾 fixAndroid
,在資料夾新增一個檔案 android-gradle-fix
1 | doLast { |
在 fixAndroid
資料夾中再建立一個檔案 android-release-fix.js
1 | const fs = require('fs') |
修改 package.json
加入 postinstall
script
1 | ... |
postInstall 指令會在每次 node_module 安裝結束後執行
這樣就能在重新安裝 node_module 後自動重新加入修復的 doLast
程式碼
參考資源: https://gist.github.com/maiquemalmeida/2f0df4a5ab79c9d4a25dc142633ac3c1
]]>科技島讀
,主要內容為台灣的科技評論,邀請不同領域的專家一同來討論議題。
跟平常聽音樂不同,聽這種分析討論類型的 Podcast 需要更多專注力,可以在做一些無意識活動的時候來收聽,我的話會在跑步時聽。
手機與網路的普遍,加上網路平台蓬勃發展,透過現今熱門的 Facebook、Youtube .....等平台,大大地降低了一般人發佈資訊的阻力,自媒體開始出現並流行,網紅、網路創作者成為了新興的職業,傳統大宗媒體不再具有壟斷優勢。
以往的大宗媒體雖然壟斷,但組織少容易管理,且競爭少,可以專注在提供較高品質的內容,自媒體如雨後春筍出現後,由於整體的主要商業模式仍然是取得更高的用戶關注數量,透過廣告方式賺取利益,在極度競爭下,普遍腥羶色的內容更容易取得用戶的注意,且人人都是自媒體,難以規範和控管,即便是優質的內容,也需要聳動的標題來從爆炸的資訊中脫穎而出。
根據喜好推薦內容的演算法,聽起來是很棒的主意,除了解決原先少數人可以決定資訊內容的壟斷情況,還能直接提供用戶有興趣的內容。
然而慢慢也有一些問題浮出檯面,在這樣的演算法下,用戶接收到的都是相同立場的內容,更容易地將族群分化,同溫層的狀況更顯嚴重,不斷破碎化後,整理共識可能更低。透過 AI 等技術,演算法也會不斷利用人性弱點讓用戶像吸毒一般不斷地想看更多,來為企業提供更高的利益。
除了前面提到的商業模式與競爭環境導致媒體內容庸俗化,許多網紅代言等業配方式,也讓用戶對廣告的判斷越來越模糊,需要注意的是,這些廣告的內容可能不只是商品,甚至包含某些意識,也就是最近討論熱烈的中資媒體介入選舉。
在資訊爆炸的各種媒體大亂鬥時代,假新聞層出不窮,最常見的狀況是在 Line 上收到親近或熟識的朋友轉貼的訊息就完全地信任。質疑資訊可信度是每個人都必須要有的一項覺醒,並且要能利用知識或網路做更進一步查證,才能真正信任並吸收內容。
我與主播同樣認為較於以往壟斷的媒體型態,現今能有多元的聲音是更好的方向,而我相信在現今資訊與知識發展都更加快速的狀況下,整體的資訊量會越來越龐大,透過更多媒體進行領域的專業分化也是必然的結果,然後上述的問題,還需要透過更多的制度和不同的商業模式來調整。
]]>最近寫文章需要將專案的檔案目錄結構用樹狀印出,方便閱讀,所以找了一些相關資料,整理一下做個筆記
homebrew 上就有個 tree
的套件可以做到這個功能
1 | brew install tree |
安裝完成後,就可以在 terminal 直接使用 tree 這個指令啦
1 | tree |
當你用 tree 列印資料夾目錄時,可能會發現一些中文檔名會出現亂碼的情況
加上 -N
參數,就可以印出原本的字元了
1 | tree -N |
加上 -L
參數,並在後面加上層數的數字
列印一層
1 | tree -L 1 |
加上 -v
參數可以依照字母排序
1 | tree -v |
可以透過 --help
指令查詢
1 | tree --help |
這邊附上查詢得到的列表
1 | usage: tree [-acdfghilnpqrstuvxACDFJQNSUX] [-H baseHREF] [-T title ] |
第一點看到時非常不習慣,覺得只是套讓程式碼看起來更潮,裝B的開發工具 但實際試用後,發現對於程式碼的符號閱讀速度和精確度確實有不少程度的提升,看起來也更簡潔易懂
以下舉一些例子說明,左邊是 FiraCode 字型,右邊的則是一般字型的符號顯示結果
等號的比較
小於、大於符號的顯示
在 VS Code 使用快捷鍵開啟設定選單
ctrl
+ ,
cmd
+ ,
搜尋 fontFamily
,找到設定欄位,在前面加上 Fira Code
結果如下圖所示
搜尋 fontLigatures
,勾選設定為true
詳細請見下方申請網址中的申請說明
https://developer.apple.com/cn/programs/enroll/
確認一下申請說明的事項和想要申請的帳號類型
若不是組織帳戶,可以像我一樣選擇獨立開發者
若是公司或團體可以申請組織帳號,但需要更詳細的申請資料及更長的申請時間
接著在下一頁填寫帳號資訊,最後填寫付款資訊 (信用卡) 就可以完成申請
NTD $ 3400 / 年
]]>設定希望開啟 App 的 url scheme,你可以自定義一組 url 並且在安裝 App 時向裝置註冊這個 url 與 App 的綁定。例如你做了一個 ToDoApp,你可以設定開啟你ToDoApp的連結為 myToDo://blabla
,由於安裝時,會對這個 url 做註冊,當你開啟這個連結時就會跳轉到你的 App。
如果你想註冊自己的 domain 為 url ,iOS 上需要額外做 domain 的驗證,確認你是 domain 的擁有者,帶來的好處是可以達到當使用者開啟 domain 連結時,如果有安裝 mobile App 可以直接用 native App 開啟,如果沒有的話則會自動使用瀏覽器打開網站。
需要在你網站上新增一個 route ,你可以選擇直接掛在 domain 根目錄下或是多一層 .well-known
範例如下
https://<fully qualified domain>/apple-app-site-association
或是
https://<fully qualified domain>/.well-known/apple-app-site-association
接下來要讓這個 route 回傳 JSON 格式的內容 內容範例:
1 | { |
App ID 格式
1 <Team Identifier>.<Bundle Identifier>
paths 可以設定想要跳轉的 url 路徑規則
Info.plist
1
2
3
4
5
6
7
8
9
10
11<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>https://your.domain.com</string>
</array>
<key>CFBundleURLName</key>
<string></string>
</dict>
</array>
AppDelegate.m
1 |
|
1 | <intent-filter android:label="<YOUR_APP_NAME>"> |
新增監聽 UniversalLinking 函式,並在 App 進入點的 componentDidMount
執行
1 | listenUniversalLinking = () => { |
在 componentWillUnmount
事件加上移除監聽事件
1 | componentWillUnmount() { |
appWokeUp 處理
1 | appWokeUp = (event) => { |
resetStackToProperRoute 處理
1 | resetStackToProperRoute = (url) => { |
可以在裝置或模擬器上的瀏覽器輸入網址來進行測試 或是更方便的透過下列指令來直接在裝置或模擬器上開啟網址
1 | xcrun simctl openurl booted "https://domain.com/something" |
1 | adb shell am start -a android.intent.action.VIEW -d "https://domain.com/something" |
前天 (9/13) 凌晨是大家引頸期盼的 iPhone 十週年發表會,當然我也熬夜的看了直播,畢竟 iPhone 當時問世可說是劃時代的產品,顛覆了整個手機產業。而在十年之後,相信所有人都好奇,他們這次準備了哪些超乎想像的新驚喜,讓我們更接近未來。
至於發表會的內容,我想大家應該就算沒看直播,也看過許多人整理的懶人包了,大多的消息在發表會之前就都走漏,因此也少了許多新鮮感。
我個人對於發表會的內容感到失望,因為消息走漏 (外型什麼的都和傳言一模一樣,再看一次真的是很乏味的事),又缺少立即具有震撼力的功能展示。
接下來換說一些我覺得有潛力的地方:
這次 iPhone X 發表很多內容不是事先流出就是其他手機已經有的功能,像是 OLED, 無線充電....,而大多使用者可能也不覺得 Face ID 和 Android 早就有的臉部解鎖有差別,AR 和 類神經引擎的應用示範又缺少震撼力,因此完全無法呼應果粉的期待。
]]>萬萬沒想到,發表會影片一播,竟然如同傳聞的一模一樣...
接著在發表會隔天就在 Facebook 看到其他開發者的哀嚎
於是我也去找了 Xcode 測試版,下載來試看看 React Native App 在 iPhone X 上的樣子,想體驗的人可以到這個網址下載 GM 版本的 Xcode 9 (BTW, macOS High Sierra 10.13 GM 也剛剛釋出了)
下載過程不是很順利,檔案有5GB,但下載速度不快,大約只有幾百 KB/s,而且不是很穩定,前三次都下載到一半斷掉,花了好幾個小時才載完.....
由於是 beta 版,還是不建議大家直接蓋掉舊的 Xcode 可以將下載的 beta 版 Xcode 先重新命名後再放到 應用程式 資料夾
新版的 Xcode 模擬器確實有不少變化,首先是 iOS 模擬器外觀大改,去掉了傳統的 Nav,且外觀也模擬的更真實,質感 up up
在模擬器 hover 或 focus 的狀態下,底下會有一個黑色標籤裝置顯示名稱和系統版本,其中我覺得最特別的是,如果你仔細看的話會發現多出了模擬器側邊的按鈕 (Home鍵、電源鍵、音量鍵、靜音開關),現在這些實體按鈕也能夠透過點選直接操作了,而且聲音效果也有,例如:按電源鍵鎖定畫面,會有大家熟悉的鎖定音效,總之和之前相比,模擬的完成度又提高許多
真的跟 FB 上看到的一樣悲劇
專案相關套件版本
1 | { |
畫面中的 Navbar 和 TabBar 都是 react-native-router-flux 這個套件預設的樣式 ( react-native-router-flux 是一個 based on React Navigation 的場景管理套件 )
嗯.... 看來有太多要改的地方了 還是先改天吧
希望在 iPhone X 上市前,RN 會有對應的規劃
]]>首先我們先從 CodePush 服務的準備開始~~
首先我們需要安裝 CodePush CLI
$ npm install -g code-push-cli
安裝完後察看版本確認安裝成功
$ code-push -v
$ code-push register
執行後會開啟網頁讓你進行註冊,並在 terminal 要求填入 access key
可以直接透過網頁以微軟或Github帳號做第三方登入進行授權
註冊登入後頁面會給你 access key
此時複製回到 terminal 貼上
$ code-push login
$ code-push loout
$ code-push app add <appName>
新增完後透過 ls 指令確認新增成功
新增的 App 將會有兩個預設的環境
每個部署環境可以當成是 git
當中不同的 branch 概念
也能夠從 history 進行版本控制,做一些 rollback 的動作
$ code-push deployment ls <appName> -k
就能看見該 App 所有部署環境的 deplyment key
文件寫得相當詳細,Step by step 照著文件作就可以
這邊簡單說明流程
由於不同的 React Native 版本所需要做的配置略有不同
這邊以 React Native v0.41.2 為例
安裝 react-native-code-push :
$ npm install --save react-native-code-push@latest
點一下這邊 確認 RN 版本和套件支援的版本相依性
安裝完後,接下來需要 link
由於 React Native 版本在 0.27 之後,已經將 rnpm link
合併到 React Native CLI
直接使用
$ react-native link react-native-code-push
0.27 以下的版本則可以透過 $ rnpm link
設置,詳細可以參考 Setup
安裝完後還需要做兩個整合的動作 (這邊的設置方式對應不同的 RN 版本也有差異)
設定 deployment key 到專案中
Android :
編輯 android/app/src/main/java/com/<ProjectName>/MainApplication.java
1 |
|
填入 app 的 deployment key
iOS :
在 ios/<Project_Name>/info.plist
中
可以看見 CodePushDeploymentKey
欄位,在 value 欄填入 deployment key 即可
最後是整合 JS 的部分
使用 HOC (Higher Order Component) 的方式就能快速的整合到你的 App 中了
程式碼如下
1 | import codePush from "react-native-code-push"; |
release-react 是專門更新 React Native 專案的指令
會自動將目前檔案產生 bundle 並上傳更新版本到 CodePush 的雲端上
$ code-push release-react <appName> <platform> -d <deploymentName>
如果沒有給 -d 的 deploymentName
參數的話,預設將會是 Staging
說到 Free SSL 相信很多人第一個想到的就是開源的 Let's Encrypt 吧,不過很遺憾在爬文時發現,Github 似乎並不支援 Let's Encrypt ,因此只好找其他的免費 SSL 憑證了,這篇要說明如何使用 CloudFlare 幫 Github Pages 掛上的免費 SSL
註冊 CloudFlare 帳號 如果你和我一樣只是要用免費版的 SSL,註冊完不必填信用卡資訊,直接到信箱收信
由此登入 點選 Add website
新增你的域名,ex: dmoon.space
確認後會開始掃描你的域名將地區檔設定掃出來,自動設定到 CloudFlare 的 DNS 上
接著他會提供幾個他設定好的 DNS 位址給你,請你到域名提供商的館理頁面,設定為他提供給你的 DNS
設定 CloudFlare 提供的 DNS
例如我是在 gandi 上買的域名,回到 gandi 域名管理頁的右下角會看到 域名伺服器
,按下 修改伺服器
設定為 CloudFlare 提供的 DNS
等待... 等待... 再等待...
更改 DNS 需要等滿久的時間才會生效,我等了應該有四五個小時,在他生效之前我們可以繼續下一步處理一些額外的設定
請先到 CloudFlare website 管理頁面,將 Crypto / SSL 設定為 Flexible 如圖:
好奇 Flexible 意思的請點這裡 Read More...
到這邊差不多就完成囉 接下來是對網站做一些額外設定 像是在
中加上1 | <script type="text/javascript"> |
讓 http 的連線自動導向到 https
告訴搜尋引擎偏好網址 將下面加入你的 Hexo theme header template 中
1 | <link rel="canonical" href="<%= url %>" /> |
https://sheharyar.me/blog/free-ssl-for-github-pages-with-custom-domains/
]]>我們先從 custom domain 開始吧
我是在 gandi 購買的,大家可以到各域名商的網站上搜尋喜歡的域名進行購買,租期到了要記得續訂,才不會發生慘劇。
在 gandi 購買完後,進入 domain 的 管理頁面找到 編輯區域檔
的連結,進入區域檔的編輯頁面,( gandi 無法更改現正套用的設定檔,所以需要先新增一個來編輯,編輯好再選擇套用) ,總之最後設定的結果應該要長這樣
192.30.252.153
, 192.30.252.154
是 Github 的位址
第三個 CNAME 的設定,name 的地方可以填你想要的子網域(subDomain),value 則是填寫你的 github.io 網址(最後記得加上一個 . ex: kyoyadmoon.github.io.
)
需要畫面截圖參考,請點這裡
記得使用新編輯的設定!
記得使用新編輯的設定!
記得使用新編輯的設定!
等待設定更新需要一些時間,多久不一定,可能幾分鐘也可能幾小時
如果你在瀏覽器輸入你設定的子域名能夠看到 Github 的頁面(這時應該是 Github 404 頁面)表示更新生效了
在等待的時間我們可以先來設定 Github CNAME
能夠讓輸入原本 Github Pages url 時,自動導向到你的域名底下
demo:
試著開啟我的 Github Page 網址:https://kyoyadmoon.github.io/blog/
會看到自動導向到 https://blog.dmoon.space 底下
設定方法是在跟目錄底下新增一個 CNAME
檔案
1 | blog.dmoon.space |
裡面填寫你設定的域名就可以了
和我一樣是 Hexo 的使用者請看這裡!
如果直接透過 git 添加到 github 上的話,下次 hexo generate, hexo deploy 時就會被覆蓋掉
請把 CNAME 檔案放到 /source/ 底下
hexo g 就會產生對應的檔案囉
_config.yml
中將 url 設定為新的域名
設定好之後記得用 hexo g && hexo d 更新 blog
想要加上免費的 SSL 簽證,完成 HTTPS 綠色鎖頭請見 Hexo Github Pages 免費 SSL 設定
最後在 2015 年底的時候,在 MACUKNOW 上面看到官方將會針對鍍膜剝落的 Retina MacBook 提供免費維修服務,心裡的大石頭才放下了些,雖然去年十一月就看到了消息,不過因為實習的工作需要,也沒辦法將筆電送修一個禮拜之久,於是一直拖到兩個禮拜前才送修。
由於台灣並沒有 Apple 直營的維修中心,只有授權維修中心,於是爬了一些網路上的文章,覺得 STUDIO A 相對好評較多,維修門市本就較少,也不是所有維修門市業務內容都包含 MacBook,最後選擇到大安門市
送修(有提供線上預約),只需要帶著 MacBook 過去就可以了
幾點注意事項:
- 建議先做好備份 (雖然理論上只會更換螢幕,還是以防萬一)
- 或許你也有貼貼紙的習慣,如果順利更換營幕的話,貼紙是拿不回來的
- 不需要攜帶配件,填寫維修單後,他們會將電腦代送給 Apple 評估是否能免費維修。
果然一週後就接到電話通知,能夠到維修門市領取啦。
]]>在上一篇 React Native 初心者攻略 中有說明如何在實體 iPhone 上開發
透過 AppDelegate.m
這個檔案我們可以將 localhost 手動更改成電腦 ip 來達到實機測試的目的
但是這樣的開發方式有幾個缺點
- 需要經常手動去做更改,尤其當你是使用筆電,甚至是和其他人共同開發的狀況,就會常常在 merge 時衝突,除非團隊都使用 localhost 以 simulator 進行開發
- 沒辦法在實體機器上 Debug in Chrome
在開發一段時間後,實在受不了,好在找到了自動設定的方法
透過 shell script 抓取電腦的 IP 後,寫入到專案
我們需要先寫出能夠抓取電腦 IP 的指令
網路上大多使用這個指令,可以先填到 terminal 執行看看,確認 IP 是否正確
ifconfig | grep inet\ | tail -1 | cut -d " " -f 2
但是因為我們專案後端 server 有使用到 docker ,使用上面 command 抓到的是錯誤的 IP
所以我需要改成這樣
ifconfig | grep -Eo 'inet (addr:)?([0-9]*\.){3}[0-9]*' | grep -Eo '([0-9]*\.){3}[0-9]*' | grep -v '127.0.0.1' | head -1
OK 我們現在能夠拿到正確的 IP 了
再來我們需要設定在專案執行時執行一段 shell script 去抓取 IP 寫入到專案中
照著圖中藍色 focus 的地方找到 Build Phases
新增一個 Run Script 後的畫面
接下來就是填入主角 script 了
下面的 script 會在專案的 INFOPLIST 裡新增一個 SERVER_IP 的欄位,並把 IP 寫入
1 | INFOPLIST="${TARGET_BUILD_DIR}/${INFOPLIST_PATH}" |
填好之後會像這樣
AppDelegate.m
讀取 SERVER_IP打開 AppDelegate.m
將原本
1 | jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"]; |
替換成能夠動態改變 SERVER_IP 的 code
1 | NSString *serverIP = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"SERVER_IP"]; |
這時候你可以測試看看 simulator 和 real device 上是不是都能正常運作,可以的話就成功囉!
找到 RCTWebSocketExecutor.m
的 setUp
將這行
1 | NSString *URLString = [NSString stringWithFormat:@"http://localhost:%zd/debugger-proxy?role=client", port]; |
替換成
1 | NSString *serverIP = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"SERVER_IP"]; |
這邊一樣是將 localhost 改成 SERVER_IP
實體裝置就能透過 wifi 在電腦的 chrome 上進行 debug 了,趕快試試看!
http://moduscreate.com/automated-ip-configuration-for-react-native-development/
]]>由於 React 的火熱程度,身邊許多朋友都開始接觸 React ,我也推薦他們玩玩看 React Native ,我覺得 React 的入門門檻有些其實和 React 本身無關,像是 Webpack, Babel 等等都多少在無形中增加了入門的難度,且有許多範例可能還使用了 ES6 語法,雖然不是必要,但可能會造成初學者混淆、失去信心,使學習過程更不順利。
然而 React Native 完全就是一個超棒的東西,只要跟著官網的教學就可以很簡單的開始使用 React 撰寫跨平台的 App,不僅內建支援 ES6 ,還有 Live Reload , Hot Reloading 等強大功能, 甚至能在 Chrome 中 debug ,這些React Native 統統幫你包好了,省去了原先我們在 web 專案開發需要自行加入 webpack, babel 等等的處理過程。
相關環境安裝的部分跟著 官網的詳細指示 (別擔心這裡有中文版) 操作就可以了,這部分就不多敘述
$ npm install -g react-native-cli
$ react-native init AwesomeProject
安裝 Xcode 即可
有兩種方法
第一種是使用 Xcode :
開啟專案目錄下的
/ios/AwesomeProject.xcodeproj
(應該會以 Xcode 開啟), 按左上角的播放圖示按鈕就會自動開啟 iPhone 模擬器和 Packager server ,並把專案 build 成 App 到模擬器中。
另一種是開啟 terminal 切換到專案目錄
$ react-native run-ios
這個指令可以不用開啟 Xcode 做和上面同樣的事情,一個指令解決,非常簡潔
接著你就可以開始編輯專案目錄下的 index.ios.js
開始開發你的專案。
在模擬器的 RN App 中你可以用快捷鍵 cmd+D
打開開發 Menu,這邊可以設定 Debug in Chrome, Live Reload, Hot Reloading 等等功能。
若需要手動刷新可以使用熱鍵 cmd+R
另外,如果你有實體 Apple 裝置的話,也能夠直接在實體裝置上測試、開發
將 Apple 裝置用USB線連接到電腦,並和電腦連接同一個 wifi
將專案用 Xcode 開啟(上面的第一種方法)
在 Xcode 左上角播放圖示的右方應該可以看到 寫著 Apple 裝置的選項,點按後選到自己的實體裝置
打開 Xcode 左邊檔案管理的導覽列 Tree View,找到 AwesomeProject/AppDelegate.m
這個檔案打開來
可以在裡面找到這段,相信看到註解大家應該都知道要怎麼做了,把 localhost 換成電腦的 ip 就可以了
1 | /** |
按下 Xcode 左上角的播放鍵開始 Run 囉
由於目前我主要都是在 iOS 上開發, Android 部分還沒有很了解,如果有漏掉什麼還請各位大大提醒
Android 在 OS X 上的環境準備相對 iOS 來說稍微麻煩一點,但也不難 細心按照官方指示應該就能成功囉
安裝完 Android SDK 和 Genymotion 之後
先打開 Genymotion 創建一個模擬器啟動
接著開啟 terminal 切到專案目錄下
$ react-native run-android
然後就可以編輯 index.android.js
開始開發了
在模擬器中按下 menu 按鈕可以打開開發 Menu ,這邊可以設定 Debug in Chrome, Live Reload, Hot Reloading 等等功能。
我的同事 yaode 寫了一篇詳細完整的教學文章 大家可以參考看看
http://trunk-studio.com/blog/react-native-how-to-use-component/
記得有用到文章內的方法 link library 的話,是需要重新 build App 到模擬器才能正常運作的喔!(run-ios / run-android)
]]>undefined is not an object (evaluting 'navigator.userAgent.match')
找了一下解決方法 發現這個套件不能用 import ,必需用 require 另外需要 assign window.navigator.userAgent
正確設定方法如下
1 | import React, { Component } from 'react-native'; |
#Reference
http://browniefed.com/blog/2015/05/16/react-native-and-socket-dot-io/
]]>之前一直沒有嘗試過 JSHint、ESLint ,但隨著合作開發的人數越來越多,程式碼的風格和規範問題就更加明顯,加上最近看了聖經 Clean Code
,覺得寫出乾淨的程式碼真的很重要,剛好爬文發現有人推薦 Airbnb 釋出的 ESLint config 來做 js 和 React.js 規範,所以就決定來嘗試看看!
首先我要推薦 eslint-plugin-react 這個套件,這套件除了規範 React 的一些寫法,重要的是他還有寫 rules 的文件,告訴你為什麼建議這樣寫,只要把 eslint 上出現的錯誤訊息,拿去 google 就會找到 github 上用 markdown 寫的相關說明,跟著寫就有種 Level Up 的感覺,實在受益匪淺!
#Setup
安裝方法很簡單
先使用 npm 安裝 eslint 、 eslint-plugin-react、eslint-config-airbnb
npm install --save-dev eslint eslint-plugin-react eslint-config-airbnb
安裝後可以利用指令 init .eslintrc.js
eslint —init
透過 .eslintrc.js 這個檔案可以編輯 eslint 的規則
加入 extends airbnb 和 react plugin 就可以了
因為我有使用 es6 語法 所以需要多一個 babel 當 parser
1 | /* .eslintrc.js */ |
之前在設定 Koa 的 cache 時,有點小卡關,所以記錄一下
我使用的 Koa 版本是 2.0.0
搭配處理 cache 的套件 是 koa-static-cache
官方 readme 上面的範例用法長這樣
1 | app.use(staticCache(path.join(__dirname, 'public'), { |
因為使用 Koa 2.0 的關係,需要 koa-convert 套件 convert 還沒更新支援 Koa 2.0 的套件,才能使用
所以我改成這樣
1 | app.use(convert(staticCache(path.join(__dirname, 'public'), { |
不過卻沒成功
後來看了別人的 Sample 才知道 StaticCache 後,還需要 mount 到 route 上
1 | app.use(convert(mount('/public/assets/js', staticCache(path.join(__dirname, '../public/assets/js/'), {maxAge: 30 * 24 * 60 * 60})))); |
最後改成這樣終於成功啦!
]]>首先來說 GMT 和 UTC 是什麼,有什麼差別
GMT:格林威治標準時間
UTC:世界協調時間
他們都是世界標準時間,而 UTC 的算法更為嚴謹,所以比 GMT 更為精準,不過兩者的差異是極小的,所以基本上時間是可以看作相同的
當你使用 Linux 設定時區時 ,若是選用 Etc 底下的 GMT 時區,可能會發現設定的結果與你預想的不同,當你想設定台北的時區 (GMT+8) ,但設定完後,系統時間卻是 -8 的時區,和台北時間相差 16 小時,原因是因為 Etc 底下的 GMT 時區是以 格林威治
以西為正,以東為負,剛好與我們現實生活的認知相反
而原因只是因為當初 Unix 多為西方人使用,便以西為正
因此在設定的時候需要選擇正負相反的選項
Chromecast Audio 去年發表的時候就很想買了 沒想到台灣遲遲沒有開賣
感謝好朋友幫我從美國帶回來,可以提前嘗鮮!
總共有兩個接口
- 3.5mm 音源 output: 用來連接音響的
- micro USB:電源 (有附線材和充電器)
安裝方法和 Chromecast 應該是一樣的
- 使用手機或平版到 App Store 搜尋下載官方的 Chromecast App ,打開後就可以開始設定裝置
- 幫 Chromecast Audio 命名 (建議不要包含特殊字元或空白,純英數佳)
- 填入家中 WiFi 帳號密碼 (讓Chromecast 能夠連上加中的 WiFi , 之後就可以透過裝置連接家中 WiFi 來播放
Spotify 有支援能夠在 App 內選擇要在哪個裝置上播放,相信有用 Spotify 的人都知道,只要連接到 Chromecast Audio 的相同 Wifi 上,在播放裝置列表就能看見 Chromecast Audio 了
當然只在手機上使用是絕對不夠方便的,如果用電腦到一半還要去操作手機就太 low 了,好在有廣大的開發者,提供了開源的桌面應用程式
- OS X: soundcast github repo 如果 chromecast 名稱含有空白或特殊字元可能搜尋不到
- Windows: chromecast-audio-stream github repo
感恩開源,讚嘆開源
]]>從前可能需要每個檔案都自己人工 import jquery、react
現在透過 webpack 的 ProvidePlugin 可以幫你將 dependency 自動 import
不只是 react , jquery 或其他 lib 都可以使用
把 ProvidePlugin 加到 webpack.config.js 的 plugins
example
1 | new webpack.ProvidePlugin({ |
原理是 webpack 在 build bundle.js 時,如果發現 'React' 、 $ ,就會自動去 import 設定中對應的 dependency
例如 使用 React 時
1 | React.createClass() |
就會自動去 import react