2015年8月20日 星期四

[工具] 如何讓 Chrome Dev Tool 也能 dark theme - 使用 DevTools Theme: Zero Dark Matrix 套件

身為網頁開發人員，長時間盯著開發工具鐵定是避免不了，
而螢幕預設的白底總是讓人容易眼睛酸澀...

從 Visual Studio 2012 開始便內建深色主題 (dark color theme) 的開發環境，套用後舒服多拉！


而現在最方便的前端開發工具「Chrome Developer Tools」 該如何方便的套用深色樣式呢?

以下以介紹擴充套件 DevTools Theme: Zero Dark Matrix 安裝方法：

  1. 安裝 chrome 擴充套件  DevTools Theme: Zero Dark Matrix
  2. 開啟 chrome 開發人員設定連結 -> chrome://flags/#enable-devtools-experiments，將「開發人員工具實驗性功能」啟用
  3. 在 Developer Tools Setting 裡面就會有 Experiments 選項，將 Allow custom UI themes 選取，關閉 Chrome Developer Tool 在重開就完成拉！( 撒花～

張貼者： 於 沒有留言:

[上課筆記] HTML5+CSS3跨平台網站設計進階班 Day3 - Response Design 實例演練

神奇的 @media


在 style 的 css 設定裡面，可以使用 @media 功能指定要做響應式設計的方法，

至於什麼是 css，請 google，教學很多，至於什麼是響應式(Response Design)，

簡單來說就是針對不同的瀏覽畫面 (通常是因為載具不同)，畫面自動做響應，切換到合適的
設計版面。

參考網址：http://learnwebcode.com/responsive-web-design-tutorial/

至於怎用寫 css 的 @media

撰寫方式:

@media, 要設定的條件類型，設定值
@media screen and (max-width: 900px) {
    body {
        color: red;
    }
}

以上 css 樣式指令為：當瀏覽畫面 < 900px 時，套用其中的 css 樣式設定。

這邊推薦一個中文網站，寫的詳細又不錯
小雕雕的家 -Responsive Web Design (RWD) 響應式網站開發教學與心得

另外還有一個設定方式

<!-- css -->
<link rel="stylesheet" href="css/main.css" media="screen and (max-width: 900px)" ></link>

 當滿足 media 條件時，此 link 的 css 樣式才會被套用。


思考時間：為何有的 @media 內，針對 css 類別名稱要另外定義，不直接覆寫原有的類別呢?

原因一：方便好管理，一眼就可以看出是針對某種裝置做的設定
原因二：因為 css 內容樣式已經跟類別名稱定義不符，導致樣式類別名稱會看起來很奇怪。

另外可以在 html <head> 增加以下 <meta> 標籤，告訴 browser 要支援手機樣式
<meta name="viewport" content="width=device-width, initial-scale=1">



關於針對觸控小螢幕的 css 樣式設定注意事項：
1. 不能使用 :hover，像這類的滑鼠事件，在平板or手機上是做不到的，最常見的就是 nav 導覽，滑鼠移過去就會跳出小項目，這樣的做法在觸控螢幕要改為 .click 事件
2. 可操作元素大小不可 < 0.3 公分，否則會很難觸控操作。




張貼者： 於 沒有留言:

2015年8月15日 星期六

[HTML] HTML5 Web Storage

HTML5 針對瀏覽器的本地資料儲存功能定義了多個新方法，
其中 Web Storage (localStorage & sessionStorage) 算是最簡單方便使用的，
Web Storage 跟原本地資料儲存 "cookie" 是個很類似的東西，都是 key-value的架構。

storage 與 cookie 不同的地方

  1. 傳輸，cookie 在每個 HTTP request 都會被送到 server 端, storage 僅在 js 中使用
  2. 容量，cookie 容量 4KB, web storage 至少 5MB

sessionStorage 和 localStorage 差別

  1. 壽命長短
    sessionStorage: 關閉 TAB or Browser 即清除
    localStorage: 需清除 browser cache or 手動指令清除
  2. 有效範圍
    sessionStorage: 無法跨分頁, 當然肯定無法跨瀏覽器
    localStorage: 可以跨分頁

Browser Support

各大瀏覽器包含 IE8 以上 (IE8都能用了，就放心服用吧

儲存容量

根據各家瀏覽器實現不同，預設為至少5MB，IE8為10MB

使用方法

存取

localStorage.setItem(“{key}”, “{value}”);
localStorage.getItem(“{key}”);
localStorage.{key} = “{value}”;
var retrieve = localStorage.{key};

(Storage 是 object type, 但是HTML標準只能直接擴充屬性型態為 string)

刪除

localStorage.removeItem(“{key}”);

清空

localStorage.clear();

其他



擴充使用方式

因為 localStorage 是 key-value 的架構，直接使用上會有些不方便，因此可以透過一些方法，更方便管理與使用
  1. 搭配 JSON 做操作 (JSON.stringify(), JSON.parse())
  2. 擴充 localStorage function 屬性，做出 namespace


資料來源：
其實關於 localStorage 的用法實在蠻簡單，並且資料也算好找

w3schools -> HTML5 Local Storage
http://www.w3schools.com/html/html5_webstorage.asp

Huan-Lin 學習筆記 -> HTML5 Web Storage
http://huan-lin.blogspot.com/2012/06/html5-web-storage.html

吳草兒 -> [UglyCode] 兼顧namespace機制的localStorage存取方式
http://blog.xuite.net/grassboy/Tech/60699360-%5BUglyCode%5D+%E5%85%BC%E9%A1%A7namespace%E6%A9%9F%E5%88%B6%E7%9A%84localStorage%E5%AD%98%E5%8F%96%E6%96%B9%E5%BC%8F

Alien的筆記 -> 本地存储替代cookie：qext.LocalStorage
http://www.baidufe.com/item/af0bb5872f2a1ef337ce.html
張貼者： 於 沒有留言:

2014年12月18日 星期四

[C#] 欄位與屬性命名方法


目前在工作上遇到的命名規則，基本上都是依照以下兩種命名方式

1. Pascal命名法 (大寫開頭, 命名時在不同單字間以大寫區隔)

  • Public 共用的屬性or欄位
    ex. public string FirstName { get; set; }
  • Method 方法名稱
    ex. public void GetName() { //do something... }


2. camel case 大小寫 (小寫開頭, 命名時在不同單字間以大寫區隔)

  • Private 私有屬性or欄位
    ex. private int myCount;
  • 區域變數
    ex. var itemPrice = 99;
  • Method 的參數
    ex. public void GetFirstName(string fullName) { //do something... }
     

另外，工作上有使用 StyleCop，可以自訂團隊在開發時需要共同遵守撰寫規範，
我覺得蠻不錯的，可以有效的保持程式碼最基本的乾淨。

保哥所提供關於 StyleCop 的相關資訊 ：
利用 StyleCop 撰寫一致的 C# 程式碼風格



而關於應該怎樣命名比較好，
推薦 Uncle bob 所撰寫的 The Clean Code，第二章-有意義的命名，
The Clean Code & The Clean Coder 兩本書，很適合踏入程式開發 1- 2 年的開發者，
尤其是有共同開發或者維護別人程式碼的經驗，看了會有很多的感受！
張貼者： 於 沒有留言:

2014年11月15日 星期六

[Reviews] JavaScript 與 TypeScript 開發實戰課後整理

課程資訊

《台中》前端工程訓練：JavaScript 與 TypeScript 開發實戰

簡述心得

Javascript (js) 是個邪惡的語言，好用易寫，弱型別的超彈性寫法，除了原始型別，所有東西都是物件，變數與屬性不用宣告也能用，需要用到的功能，上網查查方法抓下來再改一下參數就可以用了，寫錯也不會頁面爆黃噴掉給你看，
但...要抓蟲時只能直呼神奇了......
上完 Will 保哥的課，才知道 Js 這些眉眉角角，這些東西其實好好研究書本也是有，但就是難體會，寒窗苦熬1個月，可能不如保哥1天課，簡單的例子快速了解所謂的 JS 特性。
這邊我簡單的整理一下所吸收的東西，希望就算只有瞭了 6 成也算受益無窮了。


另外，推薦一個線上的編輯軟體 js bin，練習 heml, js 與 css 可以直接在瀏覽器上練習。

整理筆記


型別系統

js 看似都用 var 來宣告變數，且相同變數可以隨意賦值不同型別。
ex. 
var a = 123; // 宣告變數 a 並賦值 123
a = "ABC";  // 變數 a 賦值 "ABC" 不會產生型別錯誤

但其實 js 還是有型別的。

js 有兩大型別： 1. 原始型別 (Primitive Type) 2. 物件 (Object Type)

除了以下 5 個原始型別 ，其他都是物件 (Object)
  • number
  • string
  • boolean
  • null
  • undefined
稍微了解其他程式語言，像我寫過 C#，number, string, boolean 都可以理解，但為何還有 null 和 undefined，這兩個有什麼差別呢? 保哥建議 null 不要用，清空屬性或判斷請都用 undefined。

以下是我估狗查出來的一些資料，大致是說：
null 表示無值，而 undefined 表示沒有定義的變數



(此鄉民還提到 1. 布林的 falsy 2. 變數的 hoisting，下面課程也會講到)



簡述一下原始型別，特別的地方各用一句話帶過，之後或許會分別針對細節內容做分享。

1. number 
parseInt() 方法截出字串中數值，不是一個數值的數值 NaN，判斷必須用 isNaN() 。

2. string 
var a = "Sean"; // a[0] = 'S',

3. boolean
隱含比對 (==) 與明確比對 (===)，Truthy & Falsy。


以上為，五顆星之應該知道 /*物件型別*/

以下主題為未完待續...

五顆星之必須知道 /*基礎物件概念, 你所不知道的 js 程式語言特性*/
三顆星之需要知道 /*物件導向基礎(較深入的進階應用)*/
三顆星之可以知道 /*TypeScript*/
張貼者： 於 沒有留言:
訂閱： 文章 (Atom)