什麼是 CSS Checkbox Hack？ CSS Checkbox Hack 是一種純 CSS 技巧，利用 <input type="checkbox"> 的 :checked 偽類選擇器，搭配 CSS 的兄弟選擇器（~），在不使用任何 JavaScript 的情況下實現 toggle（切換顯示/隱藏）效果。 基本原理 核心概念是： 一個隱藏的 checkbox 輸入框 一個 <label> 標籤綁定到該 checkbox（點擊 label 等同於點擊 checkbox） 利用 :checked 選擇器搭配 ~ 兄弟選擇器控制其他元素的樣式 模擬網頁開視窗（Modal）範例 以下是用 CSS Checkbox Hack 製作彈出視窗的完整範例： 1 2 3 4 5 6 7 8 9 10 11 <!-- HTML 結構 --> <input type="checkbox" id="modal-toggle" class="modal-checkbox"> <label for="modal-toggle" class="open-btn">開啟視窗</label> <div class="modal-overlay"> <div class="modal-content"> <h2>這是彈出視窗</h2> <p>這裡是視窗內容。</p> <label for="modal-toggle" class="close-btn">關閉</label> </div> </div> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 /* 隱藏 checkbox 本身 */ .

最近在公司發現排版有問題，出現不該出現的捲軸 CSS原本以為是width:100%，應該調一下box-sizing :border-sizing 結果還是一樣有問題…. 後來發現auto，就不會有問題 不過當然要思考這兩個屬性差異 之後我認為width 沒設就是100% 但後來Google一下，發現我錯了，預設是auto (我也以為auto也是100%) ‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = width of containing block http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/ 身為英文苦手不知道寫什麼意思，後來有爬到中文文章 内容的寬度=‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ 如果’margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’比較大，就減小width的值，如果比較小呢，就增大width的值，使其滿足上面的表達式。 http://m.studyofnet.com/news/965.html 總結一下，上面意思就是width:auto後，寬度算法會'margin-left' + 'border-left-width' + 'padding-left' + 'padding-right' + 'border-right-width' + 'margin-right' >width，就會自動縮減width寬度；'margin-left' + 'border-left-width' + 'padding-left' + 'padding-right' + 'border-right-width' + 'margin-right' <width，就會自動增加width寬度

在撰寫跨瀏覽器的 JavaScript 時，事件綁定是最常遇到相容性問題的地方之一。IE 早期版本使用自己的 attachEvent，而其他符合 W3C 標準的瀏覽器則使用 addEventListener，兩者在語法與行為上有明顯差異。 事件名稱差異 W3C 標準使用不帶 on 前綴的事件名稱，而 IE 的 attachEvent 需要加上 on： 1 2 3 4 5 // W3C 標準 element.addEventListener('click', handler, false); // IE 舊版 element.attachEvent('onclick', handler); this 的指向差異 這是最常造成 bug 的地方。使用 addEventListener 時，回呼函式內的 this 指向綁定事件的元素本身；但使用 attachEvent 時，this 指向的是全域物件 window。 1 2 3 4 5 6 7 element.addEventListener('click', function() { console.log(this); // 指向 element }); element.attachEvent('onclick', function() { console.log(this); // 指向 window，不是 element！ }); 事件傳遞方向 addEventListener 第三個參數可以控制事件傳遞方向（捕獲或冒泡），attachEvent 則只支援冒泡階段。

在除錯一個版面問題時花了將近一整天，最後發現是在 <dd> 標籤內部又嵌套了另一個 <dd> 標籤，這是 HTML 規範不允許的寫法。記錄一下正確用法，避免再踩同樣的雷。 <dl>、<dt>、<dd> 的正確結構 <dl>（Description List）是 HTML 的定義列表元素，結構規則如下： <dl>：定義列表的容器 <dt>：定義術語（Definition Term） <dd>：定義描述（Definition Description），緊跟在 <dt> 之後 1 2 3 4 5 6 7 8 <!-- 正確寫法 --> <dl> <dt>HTML</dt> <dd>HyperText Markup Language，超文字標記語言</dd> <dt>CSS</dt> <dd>Cascading Style Sheets，層疊樣式表</dd> </dl> <dd> 不能包含 <dd> 根據 HTML 規範，<dd> 的內容模型（Content Model）是 Flow Content，不包含 <dt> 或 <dd> 本身。以下是錯誤的寫法： 1 2 3 4 5 6 7 8 <!-- 錯誤寫法：dd 裡面嵌套 dd --> <dl> <dt>程式語言</dt> <dd> <dd>Python</dd> <!

前幾天看到無痛爬梳自己來，用 Google Spreadsheet 爬取網頁資料
就想之前的Kimono
但現在官網要收掉這個服務
不過有官網友留下kimono desktop edition 離線版程式使用(只有MAC和Windows)
目前不知道有沒有辦法移植到Linux上面玩

	kimonolabs.com	kimono for desktop
Create APIs with Chrome Ext	v
Create APIs with Bookmarklet	v	v
Manage and configure APIs	v	v
Run APIs manually	v
Run APIs on a schedule	v
Cloud hosted API endpoints		v (w/ Firebase)
Crawling & Pagination	v	v
Get data behind a login	v	v
Kimono Apps / Blocks	v
Google sheets integration	v
Webhooks & Email alerts	v
Save scraped data to file	v	v
CSV & RSS output	v	v

當然離線版沒有這麼多功能，可惜沒有排程可以用
但發現他程式透過NodeJS去寫，好像可以透過API方式去實作
在此先記錄一下筆記