index.json

[{"content":"重要的概念  function 是 first class，可作為參數，也可當作output immutable curry function -\u0026gt; 將multiple arity function 拆作unary function, curry 將參數變得有序，參數的優先順序會影響function 的實用程度，most specific -\u0026gt; least specific，least specific 通常像是 data pure function -\u0026gt; no side effect point free programming composition, library like lamda or lodash associative property -\u0026gt; 1 + (2 + 3) or (1 + 2) + 3 debug in composition  常見 side effect  outside the world like console.log same input, different outputs global state like use constants in the function mutable, mutate the state in the application  ","permalink":"https://lynii12.github.io/posts/functional-programming/","summary":"重要的概念  function 是 first class，可作為參數，也可當作output immutable curry function -\u0026gt; 將multiple arity function 拆作unary function, curry 將參數變得有序，參數的優先順序會影響function 的實用程度，most specific -\u0026gt; least specific，least specific 通常像是 data pure function -\u0026gt; no side effect point free programming composition, library like lamda or lodash associative property -\u0026gt; 1 + (2 + 3) or (1 + 2) + 3 debug in composition  常見 side effect  outside the world like console.log same input, different outputs global state like use constants in the function mutable, mutate the state in the application  ","title":"Functional Programming 筆記"},{"content":"搜尋參數儲存複雜的資料格式\n 用URLSearchParams API 儲存陣列  // get url const searchParams = new URLSearchParams(\u0026#39;?name=1\u0026amp;name=2\u0026amp;name=3\u0026#39;) searchParams.getAll(\u0026#39;name\u0026#39;) // [\u0026#39;1\u0026#39;, \u0026#39;2\u0026#39;, \u0026#39;3\u0026#39;, \u0026#39;4\u0026#39;]  // set url const names = [\u0026#39;1\u0026#39;, \u0026#39;2\u0026#39;, \u0026#39;3\u0026#39;, \u0026#39;4\u0026#39;] const searchParams = new URLSearchParams(names.map(name =\u0026gt; [\u0026#39;name\u0026#39;, name])) searchParams.toString() // name=1\u0026amp;name=2\u0026amp;name=3\u0026amp;name=4  用 encodeURIComponent 加上 decodeURIComponent 的組合將字串編碼  // 拿 fb 的網址作測試 // get url const searchParams = \u0026#39;name%2Cdelivery%2Ccampaign_name%2Cbid%2Cbudget%2Cactions%3Alink_click\u0026#39; decodeURIComponent(searchParams) // \u0026#39;name,delivery,campaign_name,bid,budget,actions:link_click\u0026#39;  // set url const data = \u0026#39;name,delivery,campaign_name,bid,budget,actions:link_click\u0026#39; encodeURIComponent(data) // name%2Cdelivery%2Ccampaign_name%2Cbid%2Cbudget%2Cactions%3Alink_click  附註：encodeURI 和 encodeURIComponent 的差異是後者還會對保留字元(:、/、;、?、=、\u0026amp;)作編碼，比較安全\n網址的長度限制 長度過長要考量瀏覽器支援的上限\n相關知識  網址限制 常用參數設計 url encode decode  ","permalink":"https://lynii12.github.io/posts/multiple-url-parameter/","summary":"搜尋參數儲存複雜的資料格式\n 用URLSearchParams API 儲存陣列  // get url const searchParams = new URLSearchParams(\u0026#39;?name=1\u0026amp;name=2\u0026amp;name=3\u0026#39;) searchParams.getAll(\u0026#39;name\u0026#39;) // [\u0026#39;1\u0026#39;, \u0026#39;2\u0026#39;, \u0026#39;3\u0026#39;, \u0026#39;4\u0026#39;]  // set url const names = [\u0026#39;1\u0026#39;, \u0026#39;2\u0026#39;, \u0026#39;3\u0026#39;, \u0026#39;4\u0026#39;] const searchParams = new URLSearchParams(names.map(name =\u0026gt; [\u0026#39;name\u0026#39;, name])) searchParams.toString() // name=1\u0026amp;name=2\u0026amp;name=3\u0026amp;name=4  用 encodeURIComponent 加上 decodeURIComponent 的組合將字串編碼  // 拿 fb 的網址作測試 // get url const searchParams = \u0026#39;name%2Cdelivery%2Ccampaign_name%2Cbid%2Cbudget%2Cactions%3Alink_click\u0026#39; decodeURIComponent(searchParams) // \u0026#39;name,delivery,campaign_name,bid,budget,actions:link_click\u0026#39;  // set url const data = \u0026#39;name,delivery,campaign_name,bid,budget,actions:link_click\u0026#39; encodeURIComponent(data) // name%2Cdelivery%2Ccampaign_name%2Cbid%2Cbudget%2Cactions%3Alink_click  附註：encodeURI 和 encodeURIComponent 的差異是後者還會對保留字元(:、/、;、?","title":"多個網址參數儲存方式"},{"content":"next 是hydration ssr 的框架，導轉頁面時會重新做hydration，當不同頁面有共同元件，不想要導轉時重新render 時，可以運用next 定義_app.js 的設定公版頁\n舉例專案現在有兩個頁面，一個 a 頁面，一個 b 頁面\ncd next-project touch /page/a.js touch /page/b.js const APage = () =\u0026gt; { return \u0026lt;div\u0026gt;\u0026lt;Nav /\u0026gt;A\u0026lt;/div\u0026gt; } const BPage = () =\u0026gt; { return \u0026lt;div\u0026gt;\u0026lt;Nav /\u0026gt;B\u0026lt;/div\u0026gt; } 兩個頁面都需要顯示 Nav ，透過連結跳轉頁面時會發現Nav 都會閃一下重新載入，這和想像中的行為不同，預期希望只異動頁面內容(顯示 A 或是 B)\n這種情形可以用 next 提供的 _app.js ，可以透過這個檔案作全域的設定，像是匯入全域的css 檔案，store provider 等，而公版頁也可以在這裡設定，像是\n// 移除Nav 元件 const APage = () =\u0026gt; { return \u0026lt;div\u0026gt;A\u0026lt;/div\u0026gt; } // 移除Nav 元件 const BPage = () =\u0026gt; { return \u0026lt;div\u0026gt;B\u0026lt;/div\u0026gt; } export default function MyApp(props) { return ( \u0026lt;div\u0026gt; \u0026lt;Nav /\u0026gt; \u0026lt;Component {...pageProps} /\u0026gt; \u0026lt;/div\u0026gt; ); } 現在就能達到切換 a 和 b 頁面，卻不重新render Nav 元件想要的效果了\n繼續延伸，當有巢狀的公版頁情形，舉例來說網路商城有 navbar 和footer 的公版頁，點進商品類別頁除了 navbar 和 footer 以外還有加上 sidebar 顯示類別，像是上述情形該如何設定\n可以透過建立\n# 含 navbar 和 footer touch /components/layout.js # 含 navbar\u0008 footer 和 sidebar touch /components/layout-sidebar.js 使用公版的 a 頁面\nconst APage = () =\u0026gt; { return \u0026lt;div\u0026gt;A\u0026lt;/div\u0026gt; } export default APage; APage.Layout = Layout; 使用公版的 b 頁面\nconst BPage = () =\u0026gt; { return \u0026lt;div\u0026gt;B\u0026lt;/div\u0026gt; } export default BPage; BPage.Layout = LayoutSidebar; _app.js\nexport default function MyApp(props) { const { Component, pageProps } = props; const Layout = Component.Layout || ((myAppProps) =\u0026gt; \u0026lt;\u0026gt;{myAppProps.children}\u0026lt;/\u0026gt;); return ( \u0026lt;Layout\u0026gt; \u0026lt;Component {...pageProps} /\u0026gt; \u0026lt;/Layout\u0026gt; ); } ","permalink":"https://lynii12.github.io/posts/next-layout/","summary":"next 是hydration ssr 的框架，導轉頁面時會重新做hydration，當不同頁面有共同元件，不想要導轉時重新render 時，可以運用next 定義_app.js 的設定公版頁\n舉例專案現在有兩個頁面，一個 a 頁面，一個 b 頁面\ncd next-project touch /page/a.js touch /page/b.js const APage = () =\u0026gt; { return \u0026lt;div\u0026gt;\u0026lt;Nav /\u0026gt;A\u0026lt;/div\u0026gt; } const BPage = () =\u0026gt; { return \u0026lt;div\u0026gt;\u0026lt;Nav /\u0026gt;B\u0026lt;/div\u0026gt; } 兩個頁面都需要顯示 Nav ，透過連結跳轉頁面時會發現Nav 都會閃一下重新載入，這和想像中的行為不同，預期希望只異動頁面內容(顯示 A 或是 B)\n這種情形可以用 next 提供的 _app.js ，可以透過這個檔案作全域的設定，像是匯入全域的css 檔案，store provider 等，而公版頁也可以在這裡設定，像是\n// 移除Nav 元件 const APage = () =\u0026gt; { return \u0026lt;div\u0026gt;A\u0026lt;/div\u0026gt; } // 移除Nav 元件 const BPage = () =\u0026gt; { return \u0026lt;div\u0026gt;B\u0026lt;/div\u0026gt; } export default function MyApp(props) { return ( \u0026lt;div\u0026gt; \u0026lt;Nav /\u0026gt; \u0026lt;Component {.","title":"next 設定公版頁"},{"content":"第一篇文章 ✊\n使用 hugo 建制自己的部落格，目的是希望養成書寫的習慣，順便能紀錄遇到的問題或工具\n套用的模版是 Hugo PaperMod\nsnippet 新增文章 hugo new --kind post content/posts/\u0026lt;name\u0026gt; code highlight\nconsole.log(\u0026#39;hello internet!\u0026#39;); 本機開發 hugo server -D ","permalink":"https://lynii12.github.io/posts/my-first-post/","summary":"第一篇文章 ✊\n使用 hugo 建制自己的部落格，目的是希望養成書寫的習慣，順便能紀錄遇到的問題或工具\n套用的模版是 Hugo PaperMod\nsnippet 新增文章 hugo new --kind post content/posts/\u0026lt;name\u0026gt; code highlight\nconsole.log(\u0026#39;hello internet!\u0026#39;); 本機開發 hugo server -D ","title":"my first post"}]