重點 — 先找到熱情所在 如果是為了這個興趣(熱情)可以赴湯蹈火，可以試著思考如何為其「變現」。 先思考這個熱愛事物，為自己帶來什麼樣的感受。哪個環節會讓自己充滿活力? 曾有什麼樣的故事? 遇到挫敗時，仍不放棄的原因是什麼? … 八維度變現九宮格: 中間填入熱愛的事物 專業服務

備註: 以下程式範例皆有javascript和python兩種語言的範例。 時間複雜度O(念作Big O，畢格歐) 複雜度取法: 省略係數 取最高的指數 範例:

1hr重點整理(一讀) + 1.5hr(二讀) 為何要整理? 雜亂=浪費 「適合自己」的工作環境 工作表現提高 外在印象變好(畢馬龍效應): 同事對你的第一印象 效率

文章類型 同一個概念/書本，依照想傳達的內容目標，分成不同形式的"媒介"，同一個主題不是只用一種文章類型就能一步到位，隨目標讀者類型、閱讀時間、閱讀用途...等，互相搭配與補足，而且撰寫的時候比較不用擔心自己在文章中可能沒辦法提到所有細節，但是我們可以在其他類型的文章中補齊。 ==一次專注一種文章就好!== 1. HackMD: 適合作為備忘錄、筆記總整理，日後快速查閱 2. 一般文章/Medium/部落格文章: 第一次的入門引導，循序漸進地介紹主題、新概念 3. 簡報: 重點更加明確，內容簡潔有力，也能用於日後複習該主題，解說時需配合文章、講稿。 4. 繪圖整理 目前自己心中最軟(?)的一塊，既害怕又期待的全景圖整理，雖然已經做了3~5個，但還是沒能掌握到手感。

4大重點 UI/UX大不同：UI(User Interface) 和 UX(User Experience) 其實是完全不同的領域 作品集：一定要用心準備!! 不管是作品集本身的編排，內容也是要精挑細選 培養美感：隨時關注最新的設計資訊，累積各種素材和美美的圖，這是作為設計師的基礎涵養 創作的習慣：不管是轉職前還是正式工作後，累積自己風格的設計非常重要，而且盡量多嘗試不同風格的設計，擴展自己的視野和領域。 專業所需能力 工具類 以下工具至少都要到"順手"的程度。

Suspense doc codesandbox 官方範例 <Suspense fallback={'loading...'}> <SomeComponent /> </Suspense> (一開始就fetch資料！) fetch data -> pending狀態 -> 組件被suspended -> Suspense看到底下組件還沒好，調用fallback的組件 -> 等組件的promise完成後 -> 渲染組件

--- tags: react, TypeScript --- # TypeScript 菜雞:chicken:小分享 在閱讀以下關於使用TypeScript的經驗時，或許你會需要先初步了解TypeScript為何物，官方網站: [TypeScript](https://www.typescriptlang.org/docs/handbook/basic-types.html) 而我偏好使用type勝於interface，因此以下大多使用type <!-- 1. 簡介 2. 環境設置 / 套件 3. with React(create react app --typescript) 4. 文件架構 5. js -> ts 使用後心得 / 問題(約二個月) 6. TypeScript work flow --> --- ## 1. 簡介 ### TypeScript: JavaScript的一個嚴格超集，簡單來講就是在JavaScript的基礎上，加上type, interface, class...等的型別定義． 因此特色是JavaScript所沒有的靜態型別，透過型

--- tags: CI --- # Drone + Semantic Release ## Drone ```typescript= //drone.yml kind: pipeline type: docker name: ibus-ts steps: - name: build image: node:12.14.0-buster environment: //environment variables commands: //npm install - npm i --silent //run semantic-release - npx semantic-release when: branch: - master ``` --- ## Semantic Release ### 1. Setting environment variables #### Authentications(for gitHub / bitbucket...)

--- title: Clean Code 乾淨的程式碼 tags: code description: clean code --- # Clean Code 乾淨的程式碼 ## 命名 * 取有意義且精準表達的名字，不帶有歧意 * 是處理用途的方法，就用動詞表達(如postForm()...)； 變量盡量表達及意(如userAccountName)； 類名(class)則以名詞短語為主(如Customer, User...) * 不要使用魔術數(使用像是DEFAULT_WIDTH，而非直接使用100) ## 函數 * 無副作用 * 短小，只做一件事 * 一元最好，二元次之，三元更次之，三元以上建議包裝為物件 * 使用標示性的名稱 * 每個函數一個抽象層級 * 錯誤處理 ## 註解 總之不要寫就對了 :) 讓函數或變數本身就可以說明自己 ## 格式 縮排 對齊 ## 數據與結構 對象曝露行為，隱藏數據 數據暴露結構，沒有明顯的行為 ## 錯誤處理 將錯誤處理分開隔離，獨立於主邏輯之外，就可以單獨處理其錯誤 ## 邊界 API邊界 尚未存在的程式邊界 #

--- title: Strapi 概念架構介紹 tags: Strapi description: Strapi brief introduction! --- # Strapi基本概念及架構(Strapi介紹-中篇) <!-- Put the link to this slide here so people can follow --> 來源: https://strapi.io/documentation/3.0.0-beta.x/concepts/concepts.html [前篇(快速入門)](https://hackmd.io/oXdEw-gBTSGheNsARMJYVg) [中篇(概念架構介紹)](https://hackmd.io/LqgfRVBXQf-OYFrvdiT7Hw) [後篇(部署及設定)](https://hackmd.io/-2zeYcrgR52aI-gssI-XFQ) :cat: 簡單介紹Strapi的概念與架構 --- ## 1. Strapi 檔案結構(僅介紹API, config檔案) ### API, config, ...

--- title: Strapi 快速入門 tags: Strapi description: Strapi quick start! --- # 用Strapi 10分鐘就建好API(Strapi介紹-前篇) <!-- Put the link to this slide here so people can follow --> 來源: https://strapi.io/documentation/3.0.0-beta.x/getting-started/quick-start.html [前篇(快速入門)](https://hackmd.io/oXdEw-gBTSGheNsARMJYVg) [中篇(概念架構介紹)](https://hackmd.io/LqgfRVBXQf-OYFrvdiT7Hw) [後篇(部署及設定)](https://hackmd.io/-2zeYcrgR52aI-gssI-XFQ) :+1: 不用設定資料庫以及接觸後端程式，用Strapi就能為你的前端網頁快速建置好API !! --- ## Step 1. 在電腦上安裝Strapi `

--- title: Strapi 部署及設定 tags: Strapi description: Strapi quick start! --- # 將Strapi 部署到網路上吧！(Strapi介紹-後篇) <!-- Put the link to this slide here so people can follow --> 來源: https://strapi.io/documentation/3.0.0-beta.x/guides/deployment.html [前篇(快速入門)](https://hackmd.io/oXdEw-gBTSGheNsARMJYVg) [中篇(概念架構介紹)](https://hackmd.io/LqgfRVBXQf-OYFrvdiT7Hw) [後篇(部署及設定)](https://hackmd.io/-2zeYcrgR52aI-gssI-XFQ) :+1: 將Strapi部署到雲端平台，隨時都可以管理你的後台資料，讓你的前端網頁輕鬆使用~ --- ## Step 1. 更改相關設定 - 更改server相關設定 將host