# git hooks 和其他版本控制系統一樣，當某些重要事件發生時，Git 有方法可以觸發自訂腳本。有兩組掛鉤(hooks)：用戶端和伺服器端。用戶端掛鉤用於用戶端的操作，如提交和合併。伺服器端掛鉤用於 Git 伺服器端的操作，如接收被推送的提交。你可以為了各種不同的原因使用這些掛鉤，下面會講解其中一些。
git hooks 簡單的說就是在進行版本控管時可以再額外多做一些事
Refer - Git 客製化 - Git Hooks
在以前我們公司在前端開發上是用前輩大大寫好的 hook 做一些事 但前輩大大們陸續離開後, 架構又改了 新專案沒法用原有的 hook 所以只好跳進來寫 hook 了
## 可以用來幹嘛? ### Client side lint 檢查 coding style 檢查 完善要推的 code 做自動化測試 … ### Server side deploy code to production auto build … ## 打算用來幹嘛? 身為一隻前端攻城獅, 只要顧好 client side 就好了 預計完成
phpcs jshint image trans to png8 ? multi-lang file check ?
...
# Firefox 10 週年歡慶派對 ## Intro 身為一隻前端攻城獅, 在 Firefox 3 時就開始使用它了
所以在 facebook 上看到這消息就立馬報名了
但最近剛忙完專案, 真的覺得快倒了, 在前一天還在想要不要取消報名在家休息
但身為一隻攻城獅熱血是必要的條件, 所以還是馬不停蹄地趕來參加了
也沒想到會遇到學弟在當 Firefox 志工, 上次看到他是在 COSCUP 2014 也稍微跟他聊了一下
## Session ### 首先大致講了一下 Mozilla taiwan 與 Firefox 的發展史 因為我是從 2.x 跨 3.0 開始使用
當時的印象就是吃記憶體, 很多操作行為會卡卡, 記憶體又一直飆高, 讓我的怒氣也一直飆高
當時 Google Chrome 剛起來, 所以就憤而投向 Google 的懷抱
就把 Firefox 當成第二瀏覽器
因為 Firefox 其他功能像是附加元件、自訂工具列(這功能很早就有了)…等很方便
當時 Developer 必裝的就是 firebug
But
Firefox 也陸續把一些以前要裝附加元件才能用的好用的開發工具整進去, 真是造福開發者
### 播放介紹的影片 一些關於 Firefox 開發時的發想與秉持的概念
...
# JavaScript - handle textarea value Handle textarea string.
// jQuery var textarea = $('textarea').val().replace(/\n/g, '<br>'); // JavaScript var textarea = document.querySelector('textarea').value.replace(/\n/g, '<br>');
...
# Compass - Use transform in compass 1.0.1 On august 15, 2014 Compass release 1.0.1 Some code in scss change wording. This article provide CSS3 transform wording in scss.
I use this Mixin
@import "compass/css3"; /*simple-transform($scale, $rotate, $trans-x, $trans-y, $skew-x, $skew-y, $origin-x, $origin-y)*/ @include simple-transform(1, 45deg, 5px, -15px, 0, 0, 0, 0); /* Advance Usage */ /*@include create-transform($perspective, $scale-x, $scale-y, $scale-z, $rotate-x, $rotate-y, $rotate-z, $rotate3d, $trans-x, $trans-y, $trans-z, $skew-x, $skew-y, $origin-x, $origin-y, $origin-z, $only3d);*/ Refer - Compass Transform | Compass Documentation
...
# Web Develop - Flexible Footer Sometimes we think footer must fixed in website bottom or put it in last of content.
I provide a idea may be a good way. Content less browser view height, footer fixed in bottom. When content too much over browser view height, footer be put last of content.
## Feature flexible only use CSS ## Usage min-height: calc(100% - <footer height>);
#hd { height: 50px; background: #aaa; /*display: none;*/ } #bd { text-align: center; min-height: calc(100% - 50px); /* important */ background: #ccc; } #content { padding-bottom: 60px; } #footer { position: relative; bottom: 50px; text-align: center; height: 50px; background: #999; } 50px is footer height
...
# Mac - SSHFS SSHFS can help Mac user mount remote support SSH protocol. Intro
Usage
## It has problem in oh-my-zsh!
...
# 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
...