# miiiTV 2.0 - F2E Dev
compress(JS, CSS, IMG) jshint Material Design? SVG replace PNG? Browser support? Tool
PURE jQuery jQuery 2.X run IE 9 up jQuery 1.X run IE 6/7/8 gulp.js gulp plugin Base CSS SlidesJS, a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 Backend
laravel Laravel 4 PHP Framework Documentation 繁體中文教學文件 1680 1440 1280 1024
...
# miiiTV - web player structure ## function loadChannel loadVideo switchChannel switchVideo playLoop initPlayer
...
# 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.
...