gulp + browser-sync 同步的 RWD 開發環境

Responsive Web Design(RWD) 是現在網頁式設計時必須要考慮的要件，但是在開發的過程中，需要同時對於不同的 Device 檢視效果，gulp + browser-sync 是一種可以同時更新不同 Device 的 workflow，設定的步驟如下：

1. 安裝 nodeJS:
2. npm update: npm update
3. 安裝 global gulp :  npm install -g gulp
4. 切換到 project 目錄
5. 安裝 gulp + browser-sync + gulp-sass: npm install gulp browser-sync gulp-sass --save-dev
6. 新增 gulpfile.js:內容如下
7. 執行 gulp: gulp

 依照 Browser-sync 網站的說明，gulpfile.js 內容如下：

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var sass = require('gulp-sass'); 
 
// start server
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
// process JS files and return the stream.
gulp.task('js', function () {
return gulp.src('js/*js')
.pipe(browserify())
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
// use default task to launch BrowserSync and watch JS files
gulp.task('default', ['browser-sync'], function () {
// add browserSync.reload to the tasks array to make
// all browsers reload after tasks are complete.
gulp.watch("js/*.js", ['js', browserSync.reload]);
}); 

可以再加入其他的套件如 Jade, less, minify, etc...

轉載自：http://elvishsieh.blogspot.tw/2015/07/gulp-browser-sync-rwd.html

繼續閱讀 >

gulp + browser-sync 同步的 RWD 開發環境

Responsive Web Design(RWD) 是現在網頁式設計時必須要考慮的要件，但是在開發的過程中，需要同時對於不同的 Device 檢視效果，gulp + browser-sync 是一種可以同時更新不同 Device 的 workflow，設定的步驟如下：

繼續閱讀 >

Vysor 讓你在 Chrome 控制你的 Android 手機

vysor: http://www.vysor.io/

vysor github: https://github.com/koush/vysor.io

功能: 鏡射 Android 畫面到 Chrome 上，整個操作可以在電腦上進行。包含鍵盤及滑鼠的動作！

雖然現在才 Beta 版, 但感覺以後開發 Android 可以更方便了 XD 

繼續閱讀 >

Vysor 讓你在 Chrome 控制你的 Android 手機

vysor: http://www.vysor.io/

vysor github: https://github.com/koush/vysor.io

繼續閱讀 >

Bootstrap 其淫巧計- 用 fieldset 讓區塊內全部 Disabled

Bootstrap 4 強勢襲來！！

上面那行是廣告 XD


切入主題, 要怎麼讓區塊內全部都 Disabled 的狀態呢？

給他包進一個 <fieldset> tag, 然後搞定！

謝謝！ 沒唬爛～  附上  飯粒連結

Disabled input

Disabled select menu             Disabled select           

Can't check this

Copy

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

繼續閱讀 >

Bootstrap 其淫巧計- 用 fieldset 讓區塊內全部 Disabled

Bootstrap 4 強勢襲來！！

上面那行是廣告 XD


切入主題, 要怎麼讓區塊內全部都 Disabled 的狀態呢？

給他包進一個 <fieldset> tag, 然後搞定！

繼續閱讀 >

[CSS] 改變網頁反白顏色

還記得小時候的實驗課, 紙用火烤一烤文字就會顯現

其實網頁也可以有類似的效果喔！

就是用 偽元素 ::selection 的效果，其CSS樣式如下：

p {

  color: #fff;

}

p::selection {

  background: #555;

  color: red;

}

::selection 可以改變整個網頁的反白顏色，如果在 ::selection加上標籤名稱，就代表只會生效在該標籤內，如p::selection，代表只套用在<p></p>中。

Firefox瀏覽器對於::selection是不支持的，所以要用「::-moz-selection」

但我覺得還是用 compass 比較好, 多個願望一次滿足！！！

繼續閱讀 >

[CSS] 改變網頁反白顏色

還記得小時候的實驗課, 紙用火烤一烤文字就會顯現

其實網頁也可以有類似的效果喔！

就是用 偽元素 ::selection 的效果，其CSS樣式如下：

繼續閱讀 >

Quip：可取代電子郵件與共享、協作文件

使用 google 帳號就可以直接註冊使用喔, 

最近覺得 quip 可以取代 hackpad 了 lol

而且速度更順暢，以及免費版就有私密文件功能～

Quip 網頁版
Quip Android App
Quip  iOS App

Inside介紹: http://www.inside.com.tw/2014/09/24/quip
電腦玩物介紹: http://www.playpcesor.com/2015/06/quip-google-docs.html
網址: https://quip.com/

繼續閱讀 >

Quip：可取代電子郵件與共享、協作文件

使用 google 帳號就可以直接註冊使用喔, 

最近覺得 quip 可以取代 hackpad 了 lol

而且速度更順暢，以及免費版就有私密文件功能～

繼續閱讀 >

權威的前端性能指南

網站性能真的重要嗎？

你當然知道它很重要。所以為什麼我們還要做出速度很慢的網站，給用戶一個糟糕的體驗

呢？這是一份由社區驅動的實用指南，它能幫助你讓你的網站更快。我們沒有必要再浪費時


間來列舉大量需要優化性能的場景了，讓我們直接進入重點吧！

網址: http://browserdiet.com/zh/

繼續閱讀 >

權威的前端性能指南

網站性能真的重要嗎？

你當然知道它很重要。所以為什麼我們還要做出速度很慢的網站，給用戶一個糟糕的體驗

呢？這是一份由社區驅動的實用指南，它能幫助你讓你的網站更快。我們沒有必要再浪費時

繼續閱讀 >