.gitattributes 的用處

git官網介紹: https://goo.gl/zqwUi1

一言以蔽之: 告訴git哪是些目錄, 子目錄或文件類型的集合 是屬於甚麼屬性

使用情境(摘自於官網):

  • 情境一 : 識別二進位檔案
    • 在Mac中的Xcode專案都會有一個.pbxproj 結尾的檔案[註1], 簡單來說這個檔案像是一個文字檔類型的小型資料庫,  當資料被兩個人修改時, 是無法進行合併, 也無法使用diff, 只有機器才能進行識別和操作, 這樣的操作不像是一個文字檔, 反而像是二進位檔案, 於是可以讓git將這類型檔案視為二進位檔案
    • 解決的做法可以將以下指令加入到.gitattributes 文件:
      • *.pbxproj -crlf -diff

    • git 1.6及之後的版本中可以用一個巨集代替 -crlf -diff :
      • *.pbxproj binary

註1: 它是由記錄設定項的 IDE 寫到磁碟的 JSON 資料集, 是一種純文字 javascript 資料類型

  • 情境二: Diffing Binary Files
    • Git 對於 MS的word檔( *.doc) 當作是binary的檔案, 於是如果想對這類型的檔案做diff時, 只會出現下方結果:
      • $ git diff
        diff --git a/chapter1.doc b/chapter1.doc
        index 88839c4..4afcb7c 100644
        Binary files a/chapter1.doc and b/chapter1.doc differ

      • 這樣的結果完全無法得知doc檔案類型修改的部分,除非人工細看, 所以gitattribute解決這樣的問題,  將以下指令加入到.gitattributes 文件:
        • *.doc diff=word

      •  這樣git 就能知道, 當要對word檔(*.doc)做diff時, git 會使用”word” 篩檢程式(filter)[註2], 把 word 文檔轉換成可讀的文字檔, 在進行diff
      • 如以下結果
          • $ git diff
            diff --git a/chapter1.doc b/chapter1.doc
            index c1c8a0a..b93c9e4 100644
            --- a/chapter1.doc
            +++ b/chapter1.doc
            @@ -128,7 +128,7 @@ and data size)
            Since its birth in 2005, Git has evolved and matured to be easy to use and yet retain these initial qualities. It’s incredibly fast, it’s very efficient with large projects, and it has an incredible branching
            -system for non-linear development.
            +system for non-linear development (See Chapter 3).

      • [註2] ”word” 篩檢程式: 必須事先設定
        • $ git config diff.word.textconv catdoc

           

        • 再到.git/config設定
        • [diff “word"] textconv = catdoc

[筆記] 網路直播 – 前端踩雷日記(我被cookie陰了)

影片網址: https://goo.gl/J5fe6U

重點筆記整理

Cookie 介紹:

  • 供開發者儲存使用者相關資訊, 以便在畫面上呈現客製化的畫面
  • 一般情況下, 設定cookie資料後, 關閉瀏覽器再打開相同網站, cookie會消失
  • 若要保存cookie, 則可設定"expires"值, 在"expires"日期之前, 關閉瀏覽器再打開相同網站時, cookie仍會存在
  • expires的日期格式須為GMT字串格式
    • EX: 設定 2018.03.30 方式為 new Date(2018, 2, 30).toGMTString()

Cookie 常用用途:

  1. 購物車
  2. 使用者排版設定

本影片介紹的地雷

※以下狀況皆在Chrome環境下容易發生

地雷狀況: 未設定expires日期, 但關閉瀏覽器後cookie仍存在

地雷發生可能的三種原因:

  1. 在Chrome的設定內有個"起始畫面"的設定, 若"起始畫面"設定成"繼續瀏覽上次開啟的網頁", 所有設定的cookie, 其exipres日期為過去日期: 1969-12-31T23:59:59.000Z, 且關閉瀏覽器後cookie仍會存在
  2. 在Chrome的設定的"系統" 有個 “Google Chrome 關閉時繼續執行背景應用程式"設定, 該設定開啟時, 關閉Chrome後, Chrome仍會在電腦背景執行, 亦即Chrome內的cookie仍會被保存, 故再次打開Chrome時, cookie仍會存在
  3. Chrome有許多plugins可以安裝下載, 有些plugins是可獨立執行的application, 如: Line, 當開啟這類的應用程式時, 即使關閉Chrome, Chrome仍在背景執行, 故再次打開Chrome時, cookie仍會存在

解決方案:

 A: sessionStorage

使用sessionStorage 不受到Chrome設定而保存cookie的地雷

缺點:

  • 不支援IE
  • 不能跨Tab ( cookie只要同一個網站, cookie都是共用 )
  • 只儲存在local, 不會隨著API Request 傳到後端server

那幾次被FF瀏覽器捅的刀(Radio 篇)

暫記:

Radio Button 最小寬度限制

Chrome: 0px

IE:

  • Win: 0px
  • Safari: 0px(寬度可變, 但圓形的外框還在)

Firefox: (坑!)

… By default, radio buttons (and checkboxes) are styled with the operating system’s native styles for those controls. By specifying appearance: none, you can remove the native styling altogether, and create your own styles for them….

Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

  • Win: 12.8px
  • Mac: 0px
  • Linux: 18px

那幾次被IE瀏覽器捅的刀(Flex 篇)

Flex:

  •   當設定一個父元素為 “display: flex" 時,  若該父元素的子元素仍還有包含子元素, 也就是如下方程式碼:

1514255578121

此時, 需要特別注意的"second_layer" 的總寬度(width+padding+border+margin)是否超過 “first_layer的寬度,  當超過first_layer的寬度時, IE與其他瀏覽器(chrome/FF) 呈現的結果不相同

測試連結: https://codepen.io/Ceall8650/pen/zpBmgQ

Chrome/FF呈現的結果:

  • first_layer(blue)“的寬度會增加, 保持 second_layer(green)永遠都在"first_layer“內
    • 1513840325887

IE呈現結果

  • first_layer(blue)“仍保持原本的寬度(或flex 自動調整的比例), 不會因"second_layer(green)“的padding/margin增加而改變寬度.
    • 1513840306196