發表文章

目前顯示的是有「javascript」標籤的文章

如何自動化 release 的流程？

圖片
這篇文章會介紹如何使用 semantic-release 這個工具，自動化 Node.js (or JavaScript) 專案的版本號，以及 changelog 的 release 流程。 什麼是 semantic-release？ 為什麼要用 semantic-release？ 如何使用 semantic-release？ 什麼是 semantic-release？ semantic-release 可以自動完成下列這些事： 當 code 被 push 或 merge PR 回 production branch (ex: master) 的時候 CI build 被觸發， semantic-release 會收集此次更新的所有 commit messages（需遵循 AngularJS Git Commit Message Conventions 的格式） 自動根據 semver 的規則來更新 package.json 的 version，並建立 Git tag 自動 publish 新版本的 package 到 npm registry （非必要） 自動在 GitHub releases 的頁面上，產生相對應的 changelog 所以簡單來講， semantic-release 指的就是遵循 semver 的 release 流程。 semver 的介紹和好處可以在網路上找到很多文章，這裡就不贅述了，它的概念主要就是將版本號分成： Major . Minor . Patch 例如 React 的 0.11.2、Vue.js 的 2.0.10 等，這三個數字各自代表： Major 當你的 API 不兼容前一版本時（又稱 Breaking Change），major + 1，例如：1.x.x -> 2.0.0。 Minor 當你增加新 feature 的時候，並且不影響前一版本的 API，minor + 1，例如：x.6.x -> x.7.0。 Patch 當你修復 bug 的時候，並且不影響前一版本的 API，patch + 1，例如：x.x.9 -> x.x.10。 如果專案有在執行 git-flow 的話，minor 配合的就是 feature 的 re...
張貼留言
閱讀完整內容

Amazon S3 正確處理 HTML5 History 路由問題

圖片
如果你是使用 Angular、React 或是 Vue 來開發 SPA（單頁面應用），並且放在 Amazon S3 Static Website Hosting 上的話，那麼你會碰到 URL routing 的問題。 一般 react-router 或 vue-router 都預設使用 hash 的方式來處理 SPA 的路由： http://domain.com/#!/paths 如果你不喜歡 #!/ 的顯示方式，可以使用 HTML5 的 History API ，這樣就能像一般網站那樣顯示 URL： http://domain.com/paths 但是使用 HTML5 History API 時，通常必須搭配 server 端正確的 路由配置 才能防止出現 404 Not Found 的情形。 遺憾的是，在 Amazon S3 Static Website Hosting 上，你無法更動 Apache 或 Nginx 的配置，所以需要靠其它方式來解決問題。 使用 S3 的 Redirection Rules 使用 CloudFront 的 Custom Error Response 使用 S3 的 Redirection Rules Amazon S3 Static Website Hosting 提供了 Edit Redirection Rules 的選項，我們可以輕鬆使用這段程式碼將所有 domain.com/#!/paths 所產生的 404，全部重新導向至根路徑： <RoutingRules> <RoutingRule> <Condition> <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals> </Condition> <Redirect> <HostName>你的網域（例：domain.com）</HostName> <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith> </Redirec...
張貼留言
閱讀完整內容

AngularJS + Google Spreadsheet

圖片
概要 這篇文章主要是說明如何寫 AngularJS 的 service，以類似 $resource REST 的方式來取得 Google 試算表的資料。 本文假設讀者已讀過 AngularJS Tutorial ，了解 AngularJS 基本概念。 目錄 建立試算表 Template App Module Service Controller 注意事項 參考 建立試算表 前往 https://drive.google.com 或是參考已經建立好的 試算表 。 先建立一份新的試算表： 建立 > 試算表 。 填寫資料表，以 AngularJS Tutorial 的 phones.json 為例。 將試算表權限公開： 檔案 > 共用 > 擁有存取權的使用者 > 變更 。 共用設定 > 公開在網路上 > 存取權 > 可檢視 > 儲存 。 權限公開後，發佈到網路： 檔案 > 發佈到網路 > 內容有所變更時自動更新發佈 > 開始發佈 。 發佈完成後，公開連結中會提供一組 key，可以前往 Google Data APIs 測試看看資料是否回傳正確。 接下來進入正式寫程式的階段，這裡我們會使用到 Tabletop.js 這個第三方的 library，提供 javascript 快速取得 json 格式的試算表資料。 這裡會以 AngularJS Tutorial 的 phonecatApp 為例子，說明如何實作 Tabletop.js 的 service。 Template 建立 index.html ，並加入 angular.js ， angular-route.js 和 tabletop.js 。 index.html : <!doctype html> <html ng-app="phonecatApp"> ... <div ng-view></div> ... <script src="angular.js"></script> ...
張貼留言
閱讀完整內容

Web Components

圖片
今天想要跟大家聊聊 Web Components 這個新玩具，說是新玩具，其實這個概念已經發展有段時間了，尤其筆者本身是玩 Flash 技術出身的，發現 Web Components 跟 Flex Component 差不多，所以就來分享一些心得。 Web Components 是什麼? 簡單來講就是你可以客制化 HTML <tag>。 <my-component></my-component> 由 W3C 提出： The component model for the Web. When used in combination, Web Components enable Web application authors to define widgets with a level of visual richness and interactivity not possible with CSS alone, and ease of composition and reuse not possible with script libraries today. 使用 Web Components 有什麼好處? 鉴于许多Web框架通过暴露JavaScript API来构建用户界面，而构建用户界面实际上就是生成一堆div和spans标记，Web 组件是原生浏览器的解决方案因此不依赖于一个完整的框架。因此，与现在的一般依赖某个Javscript框架的HTML组件相比，Web组件希望能减少碎片。 最近新起許多 MDV (Model-driven-view) 這類 template 和 data binding 開發方式的框架 (backbone, angular, ember..)， 那 Web Components 跟這些框架有什麼不同呢? 基本上就是希望藉由規格標準化，讓 Web application 的開發方式與架構更清晰。 Web Components 的瀏覽器支援情況? 尽管Web组件是一项有趣的新技术，但在浏览器们都支持它们（并且大部分用户都开始使用这些浏览器们）之前，其中的大部分功能还派不上用场。解决这个问题的一种方法是使用polyfills。 很遺憾，目前的瀏覽器普遍都還不支...
張貼留言
閱讀完整內容

Development Tools

圖片
不知不覺，這個月的文章還沒想好要寫什麼， 七月就過了... 這一篇我打算分享一些最近在關注的玩意兒。 Trello Trello 是 Joel 團隊開發，一個專案管理的工具，當然，他是雲端網頁，所以在任何地方都可以掌握團隊的專案進度。 Trello 可以使用 Google 的帳號登入，登入後可以根據專案的開發流程自訂專屬的 Board ，每個 Board 內可以貼上各個項目的 Card，並且可以和專案成員即時協作。 自己本身大概用過兩三套這種PMS的產品，Trello 簡單易用，一個人獨立開發使用也很方便，算是敏捷式開發上不可或缺的好工具。 影片介紹： 另外，Trello 也有提供 iPhone 的版本： Sublime Sublime 是一個很棒的程式碼編輯器，前一陣子在這篇  Which is the Best Code Editor? 得到很高的分數。 我用過之後也是愛不釋手，漂亮的配色，安裝容易的眾多外掛，不錯的開啟速度，總而言之，大力推薦!! 一些必不可少的Sublime Text 2插件 Sublime Text 2 实用快捷键 Cloud9 IDE C9 也是一個寫程式的好工具，可是跟 Sublime 不同的地方，它是雲端網頁版的編輯器。 C9 支援的語言也不少，甚至可以直接跑 Node.js ，並且也支援 Github 的 Repository clone。 不過這幾天用下來發現速度不理想，常常會進入 Offline 狀態。 Heroku Heroku 是一個雲端應用的 host 平台，支援的語言有  PHP Ruby Python Node.js。 Heroku 和 Facebook 合作，讓開發者開發 Facebook 應用程式的時候可以直接連結 Heroku 的空間，並且支援 Git ，目前初步試用下來感覺很不錯。 Travis CI Travis CI，顧名思義，是提供持續整合(Continuous Integration)和每日建構的服務。 不過目前還沒機會使用，所以還不是很清楚它的詳細內容。 Travis CI 可以結合 Github，讓你隨時知道專案的測試狀況。
張貼留言
閱讀完整內容

How to list the properties of a javascript object

筆記 本篇參考 stackoverflow 的 How to list the properties of a javascript object 要如何知道Javascript物件擁有哪些proerty? ex: var dog = { name : ' Lucky' , age : 3 , breeds : 'Shiba Inu' }; 上面是一個小狗的物件，裡面有一些自訂的屬性'name','age','breeds' 等等... 那要怎麼在程式中知道這些屬性呢? 比較新的瀏覽器(IE9, FireFox, Chrome...)可直接使用 Object.keys 這個方法 var keys = Object . keys ( dog ); 或者自己寫 var getKeys = function ( obj ){     var keys = [];     for ( var key in obj ){       keys . push ( key );     }     return keys ; } var keys = getKeys ( dog ); 這樣 keys 就會是一個有所有屬性的陣列 keys = [ "name" , "age" , "breeds" ]; 參考文章： How to list the properties of a javascript object
張貼留言
閱讀完整內容

Javascript and this

筆記一個 javascript 的特性。 通常在使用一些 method 的時候參數都帶有 Callback Function， ex: click(callbackFunction) 如果在這個 Callback Function 裡面直接使用 this 是沒有辦法的， ex: callbackFunction = function() {   this.doSomethiing(); // undefined } 必須先在在外層定義 this 為一個變數才可以， ex: var self = this; callbackFunction = function() {    self.doSomethiing(); // OK!! } 參考文章 : Javascript - 淺談this與Closure
張貼留言
閱讀完整內容

Use getPixelRatio for HTML5 on retina

如果用 HTML5 配 WebView 來作 App 的話， 在 iPhone4 跟一些 Android 手機會碰到的解析度問題 ， iPhone4 的 Retina 是 960 x 640， 但是在 WebView 底下會以 480 x 320 來顯示， 所以須要利用到 javascript 的 getPixelRatio() 來作調整， /** * Return current device resolution pixel ratio, Default is 1. * @return {number} */ function getDevicePixelRatio() { if (window.devicePixelRatio === undefined) { return 1; } return window.devicePixelRatio; } 這裡寫一支 function 來取得裝置的 PixelRatio，一般通常都 return 1， 解析度較大的手機才會回傳其他數值，例如 iPhone4 則回傳 2， 最後寫一支 initDeviceViewport 的 function 來塞值給 viewport metadata tag， 例如這裡 iPhone4 會將 viewport 的 scale 全部縮放為 0.5 倍。 /** * Initialize device viewport meta tag to full screen size. * @author http://jsway.se/?p=150 */ function initDeviceViewport() { var scale = 1; var ratio = getDevicePixelRatio(); if (ratio !== 1) { scale = 1 / ratio; scale = scale.toFixed(1); } var viewport = document.getElementById("viewport"); ...
張貼留言
閱讀完整內容

Javascript message on Facebook post feed

之前在使用Facebook API的時候碰到的問題,，筆記一下。 如果在 沒有登入Facebook 的情況下開啟 Feed Dialog 發佈訊息， 會被導到一個莫名其妙的頁面，上面只有一串 javascript 如下 <script type="text/javascript"> window.location.href="fbconnect:\/\/success? post_id=XXXXXX; </script> 這個問題我碰到兩次， 一次是在網頁版直接使用  Graph API call  的方式開啟 Feed Dialog， 一次是在 iOS Facebook SDK 中使用 Feed Dialog， iOS好像是在4.0以下才會發生，不太確定， 解決方法： 找到呼叫 Graph API 的地方 ( iOS SDK 應該在 Dialog 相關的檔案裡) 將 https:// m .facebbok.com/dialog/feed?xxxxxx 的  m  改成  www 還是不行的話就把 https 改成 http 試試，應該可以解決~ 參考： Javascript message on Facebook Connect post to feed in iPhone/iPad app undefined
張貼留言
閱讀完整內容