2015年8月29日 星期六

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

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

webber0928
Responsive Web Design(RWD) 是現在網頁式設計時必須要考慮的要件,但是在開發的過程中,需要同時對於不同的 Device 檢視效果,gulp + browser-sync 是一種可以同時更新不同 Device 的 workflow,設定的步驟如下:安裝 nodeJS:npm update: npm update安裝 global gulp :  npm install -g gulp切換到 project 目錄安裝 gulp + browser-sync +
gulp + browser-sync 同步的 RWD 開發環境

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

webber0928
Responsive Web Design(RWD) 是現在網頁式設計時必須要考慮的要件,但是在開發的過程中,需要同時對於不同的 Device 檢視效果,gulp + browser-sync 是一種可以同時更新不同 Device 的 workflow,設定的步驟如下:
Vysor 讓你在 Chrome 控制你的 Android 手機

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

webber0928
vysor: http://www.vysor.io/vysor github: https://github.com/koush/vysor.io功能: 鏡射 Android 畫面到 Chrome 上,整個操作可以在電腦上進行。包含鍵盤及滑鼠的動作!雖然現在才 Beta 版, 但感覺以後開發 Android 可以更方便了 XD 

2015年8月26日 星期三

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

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

webber0928
Bootstrap 4 強勢襲來!!上面那行是廣告 XD切入主題, 要怎麼讓區塊內全部都 Disabled 的狀態呢?給他包進一個 <fieldset> tag, 然後搞定! 謝謝! 沒唬爛~  附上  飯粒連結Disabled inputDisabled select menu             Disabled select           Can't check thisSubmitCopy<form> <fieldset disabled> <div class="form-group"> <label
Bootstrap 其淫巧計- 用 fieldset 讓區塊內全部 Disabled

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

webber0928
Bootstrap 4 強勢襲來!! 上面那行是廣告 XD 切入主題, 要怎麼讓區塊內全部都 Disabled 的狀態呢? 給他包進一個 <fieldset> tag, 然後搞定!
[CSS] 改變網頁反白顏色

[CSS] 改變網頁反白顏色

webber0928
還記得小時候的實驗課, 紙用火烤一烤文字就會顯現其實網頁也可以有類似的效果喔!就是用 偽元素 ::selection 的效果,其CSS樣式如下:p {  color: #fff;}p::selection {  background: #555;  color: red;}::selection 可以改變整個網頁的反白顏色,如果在 ::selection加上標籤名稱,就代表只會生效在該標籤內,如p::selection,代表只套用在<p></p>中。Firefox瀏覽器對於::selection是不支持的,所以要用「::-moz-selection」但我覺得還是用 compass 比較好, 多個願望一次滿足!!!
[CSS] 改變網頁反白顏色

[CSS] 改變網頁反白顏色

webber0928
還記得小時候的實驗課, 紙用火烤一烤文字就會顯現 其實網頁也可以有類似的效果喔! 就是用 偽元素 ::selection 的效果,其CSS樣式如下:

2015年8月20日 星期四

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

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

webber0928
使用 google 帳號就可以直接註冊使用喔, 最近覺得 quip 可以取代 hackpad 了 lol而且速度更順暢,以及免費版就有私密文件功能~Quip 網頁版Quip Android AppQuip  iOS AppInside介紹: http://www.inside.com.tw/2014/09/24/quip電腦玩物介紹: http://www.playpcesor.com/2015/06/quip-google-docs.html網址: https://quip.com/
Quip:可取代電子郵件與共享、協作文件

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

webber0928
使用 google 帳號就可以直接註冊使用喔,  最近覺得 quip 可以取代 hackpad 了 lol 而且速度更順暢,以及免費版就有私密文件功能~

2015年8月16日 星期日

權威的前端性能指南

權威的前端性能指南

webber0928
網站性能真的重要嗎?你當然知道它很重要。所以為什麼我們還要做出速度很慢的網站,給用戶一個糟糕的體驗呢?這是一份由社區驅動的實用指南,它能幫助你讓你的網站更快。我們沒有必要再浪費時間來列舉大量需要優化性能的場景了,讓我們直接進入重點吧!網址: http://browserdiet.com/zh/
權威的前端性能指南

權威的前端性能指南

webber0928
網站性能真的重要嗎? 你當然知道它很重要。所以為什麼我們還要做出速度很慢的網站,給用戶一個糟糕的體驗 呢?這是一份由社區驅動的實用指南,它能幫助你讓你的網站更快。我們沒有必要再浪費時

Coprights @ 2016, Blogger Templates Designed By Templateism | Distributed By Gooyaabi Templates