# Youku Api & player Youku is popular video web in China.
youku(优酷)
Try use youku(优酷) api & javascript player
Create a account in 优酷开放平台
Create a application(创建应用)
You can get a client_id as a api id
Create a player 工具箱 - 优酷开放平台
Fin
...
# CSS - SASS handle index Can use var control z-index
$elements: con, slider, masthead; .masthead { /* z-index: 3 */ z-index: index($elements, masthead); } .slider { /* z-index: 2 */ z-index: index($elements, slider); } .con { /* z-index: 1 */ z-index: index($elements, con); } Refer - 使用 sass 有效控管 z-index 圖層順序
...
# HTML5 - Video Introduction 這是一篇關於如何用 web 建置一個 video player 的文章, 這裡使用 HTML5 video 與一些 open source library 來建立 player
## Some Function ### Main video pause video play video autoPlay or no-autoPlay show current video time show total video time time jump full screen ### Other keyboard control mute control volume up & down buffer handle set quality Refer - Seeking API Refer - The State of HTML5 Video
...
# Git -Tip & Note ## git pull 出現 CONFLICT 要回復到 pull 之前 git reset --hard <commit id> ## 強制 push 取代 remote git push -f ## 取消 merage (須知道 merage 前的 commit id) git reset --hard <commit id> ## 拉 remote 的新 branch 到 local(local 不存在該 branch) git checkout --track -b <local new branch> <remote branch> ## 不小心把 remote & local 的 branch 刪掉 先用 git reflog
git reflog # show # df4bb25 HEAD@{0}: checkout: moving from master to dev # df4bb25 HEAD@{1}: checkout: moving from webtv_dev to master # 9e920fb HEAD@{2}: commit: [Dev] Modify keycode to keyboard.
...
# JavaScript - handle load img fail Sometime load image from server or other place fail(404 not found), we must prepare default image.
A simple way
<img src="avatar.svg" onerror="this.src='/static/ico_default_avatar.png';this.onerror=null;">
...
# Windows 8.1 app - Introduction Develop Win 8.1 app with JavaScript.
死心吧, 請準備一台 Windows 8.1 的電腦(一直以來我都以為生為前端攻城獅只要用 Mac 就可以打天下了)
下載 Visual Studio 2013, 要下載 Visual Studio Express 的版本
開始努力地讀文件 Doc
## Notice & Tip 先了解一些限制與規範以免踩雷
Microsoft 提供 WinJS 來協助開發 Windows 8.1 app
無法使用網路的 source
無法使用 remote 的 CSS or JavaScript, 必須全部 download 下來 無法直接使用 iframe
package.appxmainifest -> 內容 URI, 把 iframe url 設成例外, 但是該 url 必須用 https 使用 x-ms-webview tag 來代替 iframe, x-ms-webview element | x-ms-webview object ### Handle AJAX 在開發 Windows 8.
...
# CSS - font-family font-family: Microsoft JhengHei, Arial, Tahoma, Geneva, sans-serif; Add use mobile device default font
font-family: Microsoft JhengHei, Heiti, Roboto, Helvetica, Arial, monospace, Tahoma, Geneva, sans-serif !important; CSS font-family 字型 - Wibibi Choosing Fonts for Your Mobile Website Common fonts to all versions of Windows & Mac equivalents CSS Web Safe Font Combinations
...
# AngularJS - $http Angular use $http handle AJAX behavior. It support method to handle rest API and basic usage. But its default Content-type is application/json
## Basic usage $http({ method: 'GET', // support GET, POST, PUT, DELETE url: '../php/response.php', params: data, // GET method query string data: data, headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, timeout: 30000, // timeout abort AJAX cache: false }). success(function(data, status, headers, config) { // this callback will be called asynchronously // when the response is available console.
...
# JavaScript - 多行文字省略 Sample code
CSS .ellipsis-mult { width: 300px; height: 5em; overflow: hidden; } p { margin: 0; } HTML <div class="ellipsis-mult"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit.
...
# AngularJS - do something after ng-repeat 在學習用 AngularJS 的過程中遇到個問題就是 ng-repeat 好厲害喔, code 變得好少喔 但我想再 ng-repeat 完移掉 loading view 要怎麼移啊? 用 setTimeout 跟白癡一樣, 又不知道時間要設多久 只好向 fb 求救 沒想到有人立馬給出解決方案 原文來源 blog
由於對 AngularJS 不是了解的很透徹, 所以在此不詳加說明(原文內有說明) 這裡只上 code
## HTML <div id='list' ng-app="testApp"> <div ng-controller="blogger" > <ul> <li ng-repeat="list in blog" on-last-repeat> {{list.title.$t}} </li> </ul> </div> </div> ## JavaScript var module = angular.module('testApp', []) .directive('onLastRepeat', function() { return function(scope, element, attrs) { if (scope.
...