Amo Wu's Blog

如果你是使用 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...

今天想要跟大家聊聊 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。 很遺憾，目前的瀏覽器普遍都還不支...

如果用 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"); ...