# Git - GitHub gh-pages 有時在 GitHub 上亂晃 常常發現一個問題就是有一些很有趣的前端實作, 或別人寫的一些功能沒有所謂的 demo page(當然有些是不需要 demo page) 我不知道是把 GitHub 當成備份的 codebase 或是覺得 demo 不重要所以沒放, 又或者是根本不知道要怎麼放 But 這都不重要 其實 GitHub 提供一個 gh-pages 的 branch(或者說是功能)可以讓我們這些前端攻城獅快速的建出個 demo page(但不包含後端功能)
## 如何使用? ### 1. 從 master 建出名為 gh-pages 的 branch git branch gh-pages
## 2. 切到 gh-pahes 的 branch git checkout gh-pages
## 3. 把 gh-pages git push 上 GitHub git push
因為剛建出新的 branch, 該 branch 還未在 GitHub 上所以會提示你要用 git push --set-upstream origin gh-pages
...
# gulp.js - Use Log ## Intro gulp.js
Getting Started
Grunt vs Gulp - Beyond the Numbers
## package.json version setting dependencies
## How to pipe to another task in Gulp? gulp.task('first', function() { // first task }); gulp.task('second', ['first'], function() { // this occurs after 'first' finishes }); Refer - How to pipe to another task in Gulp?
## Use Package ## Compass First, must install compass
gulp-compass
...
# 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.
...