（消音）
mur & 進度紀錄

算是 clone side project 最基本的 todo list 那種，不過想試的 features 滿多的，irregular grid, link preview, i18n, dark mode....然後如果有餘力的話想試試看用 node.js 寫看看基本的 crud 或者加入 ts，沒有餘力的話也不勉強自己

總之希望每天都能做一點，在八月前能夠把最基本的畫面弄好，九月份把資料部分弄完吧～

20210823

- 今日事項：昨天各種蒐集 icon 和設定了大致的 layout，而今天則大致做了 sidemenu（hover 和伸縮的狀態未完成）、還有大致設計了卡片的佈局。

- 明日待辦：希望能夠將卡片 hover 時顯示的 footer toolbar 完成，有餘力的話研究 irregular grid 的排版。

感想：用 styled component 真的是沒事找事做，有點強迫症會想要每個層級都設定 Scomponent...然後在一些非常廢的小樣式上一般加個 utility class 就能搞定，但是在這卻顯得綁手綁腳...。

然後原版的 menu css 也太花俏，感覺復刻不太出來OTL

20210824

今日事項：把卡片底部 hover 會出現的工具列弄出來，查了 irregular grid 的關鍵字原來是 Masonry Layout

- 明日待辦：研究 contenteditable 把新增卡片的輸入框做出來，然後實踐 masonry layout（不要用library），行有餘力也寫個文章紀錄一下作法（？）

感想：今天工作上太累了，實在沒什麼心力弄這個OTL

20210829

- 今日事項：複習了一遍幾乎要忘光的 grid，也千辛萬苦用 CSS+JS 把 Masonry Layout 刻出來了

CSS Grid Tutorial #1 - Why Use CSS Grid?

Masonry style layout with CSS Grid | by Andy Barefoo...

- 明日待辦：研究 contenteditable 把 addNewCard component 做出來吧

感想有點長...

感想：
1. 平時自己寫原生 css 很少用的grid 大多是 CSS 框架才會用到，因為太少用每次都會忘記。
2. 若只是要單純設定 Masonry Layout 其實不困難（grid-row, grid-column 排排就好），但若資料量不固定、又要用 JS 抓自適應高度，因為要計算跨列的 span 所以很麻煩。
3. 上面利用 JS 計算的作法是因為強制希望排成「左至右」，但若資料不太要求順序（比如圖牆），要做「上至下」其實很簡單，使用 column-count 屬性就能達到，大部分 YT 影片也是這個作法。
4. 將教學文章改用 react 融合 SC 的作法很有趣，主要用到 useRef 取 DOM 並計算值 props 到 SC，跟使用 useEffect 進行 resize 事件的監聽。

不過看了一下，Google Keep 本身並沒有使用 grid 來做...那它到底是用什麼方式來排的呢？？？！

20210831
- 今日事項：加入了 Beautiful DnD 跟初步看了教學影片，遇到不少 ref 的麻煩

Course Introduction: Beautiful and Accessible Drag a...

how to access ref and programatically scroll in reac...

- 明日待辦：把教學影片看完，然後繼續把 DnD 功能優化吧
感想有點長...

感想：
本來照教學影片執行覺得都還好，直到使用 DnD 必用的 provided.innerRef 出了問題，因為我元件本身就已經綁定了 Ref 來取得 DOM 的資訊（主要是為了 Masonry Layout 計算 row span 用），這樣會有 duplicate props 的問題。



後來問了群組的回答是：
a. 直接在最外層再多包一層供 DnD 元件使用：這會影響到卡片的樣式，整個大跑版於是放棄這個提案。
b. 捨棄自己設定的 Ref 直接使用 DnD 提供的 Ref 也就是 provided.innerRef 的值：不知道如何把 DnD 提供的 ref 值傳到外面供其他的 function 使用。

後來爬文發現有人有同樣的問題。

於是決定採用 c 方案。

c. 使用 library 將複數個 ref 合併起來，關鍵字大概就 compose ref, merge ref, multiple ref 之類的，然後就順利解決了 ref 的問題。



但是，因為加入了 DnD 後，外層多了 div 造成在選取 DOM 的層級有了改變，於是之前寫的 rowGap 和 rowHeight 也要再往內取一層，總之就是一點麻煩的小調整。

20210912
結果這一週幾乎都在學 nodejs+mongoDB，希望之後能夠寫出簡單堪用的 CRUD，然後 OAuth 也碰了一點，雖然說在專案上沒什麼進度但是還滿充實的。

MERN - HackMD

20210916
- 今日事項：完成了 labels 和 images，總之就是各種grid的練習
- 明日待辦：完成 edit modal

感想：浪費了一堆時間在圖片的編排上，效果還是覺得沒有很還原有些差強人意，主要的問題出在google應該是使用固定寬高的比例去設定圖片的高度，目前看到比較多的兩種方式一個是使用 padding 設定比例，另一種則是使用 aspect-ratio 這個屬性。

aspect-ratio 能夠非常完美地呈現我想要的效果，可惜在 safari 還有 edge 上不支援所以忍痛放棄，所以最後來是用了 grid 的方式來製作，然後使用條件的選則要使用的styled-component，只是我覺得有點笨....但是先求有吧！然後摸了一點簡單的 extend 語法也算小有收穫吧。

然後本來想做link previw的功能，但是查了一下似乎需要靠爬蟲來爬 meta tag...可能寫到後端的時候再想吧...
雖然還是可以先切個版但就是覺得麻煩QQ
1.

WEB SCRAPING made simple with JAVASCRIPT tutorial

puppeteer

2.

metascraper

結果還是把 link preview 刻完了，各種麻煩的 footer 位置情境判定...css看起來有夠髒OTL 卡片應該差不多了明天終於可以動工modal了吧

20210917
- 今日事項：把 edit modal 做了個大概...今晚有空再處理一下伸縮的sidemenu好了
- 明日待辦：完成登入頁面，感覺可以稍微設計一下...？
感想：要開始加 redux 進來了...雖然是幾乎忘得差不多了OTL

加碼把 Grid 和 List mode 也做好了，UI-context也做了不過感覺有點亂OTL

20210923
- 今日事項：這幾天大致完成了labe, memos,auth 相關的api，目前大概除了搜尋關鍵字、JWT、OAuth、爬 meta tag、上傳圖片檔案外的後端部分都完成了...
- 明日事項：希望可以把 JWT 和 OAuth 跟相關的驗證權限搞定
感想：好累，還有一週希望能夠完成........

20210928

- 今日事項：完成 palette、tooltip、popup、link preview

- 明日事項：接api...

感想：前幾天也把 contentEditable 完成了，卡了很久，最痛苦的就是要把各種樣式去掉但是又要保留換行和 anchor 吧，以及要抓取 paste 內容的 url，結果卡了許久發現在那邊造輪子的自己實在有夠愚蠢，找對關鍵字比較重要，用了非常棒的 Autolinker 套件解決一切問題。
而 tooltip 則是使用了 tippy，一開始本來是想使用 popper 但是覺得有夠難用就果斷放棄了，畢竟要客製化的地方其實不多，tippy 就滿堪用了～

20210929

- 今日事項： 完成 tag 編輯以及 side menu 的二種模式

- 明日事項：繼續逃避，來作登入頁好ㄌ

感想：一直逃避弄 OAuth 和 JWT<

20210930 補ㄍ

- 今日事項：完成登入頁

- 明日事項...一定要把 Authentication 弄完QQ

感想：拖延症真的沒救...製作這種登入頁素材真的很重要，挑了好久w