Sign in

分享關於美股投資的學習心得

美股與台股的差異

  • 整體市值:美國是全球最大經濟體,佔全球總體經濟 23%-25%,而台灣經濟佔全球總體經濟不到 1%
  • 每日交易量:美股交易量非常大,股價幾乎不會被操控;台股特別是小型股很容易被假外資、投信操控股價
  • 下單手續費:美國券商如 TD Ameritrade (德美利證券)、Charles Schwab (嘉信證券)、Firstrade (第一證券) 等皆零手續費; …


最近換了 Github 的密碼,發生 git push 推不上去的問題,查了資料推斷或許是 git-credentials 的快取與遠端認證產生衝突,決定使用 SSH 方式重新連線 GitHub,嘗試成功後來紀錄一下 SSH 的連線步驟。

Mac 開啟 App「鑰匙圈存取」,輸入 git 查詢並刪除所有結果。


NuxtJS

Nuxt.js 是以 Vue 為基底所建構的框架,透過 Nuxt.js,我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。

在終端機輸入執行指令 npx create-nuxt-app <project-name> 後,會進入問題面板,能按照需求選擇開發上習慣使用的工具,如套件管理工具、伺服器框架、UI 框架、測試框架、渲染模式、版本控制系統等。

不過 Nuxt 還未全面支援 Sass 和 Vue3,所以如果在 Nuxt 中使用 Sass/Scss,或是 Vue3 的 Composition API,就會報錯。

Sass 的解決方案較為容易,在終端機執行以下指令即可開始使用 Sass。

npm install --save-dev sass sass-loader@10 fibers


如果想直接使用,或是觀看好讀版,可參照專案網址

最近對爬蟲感到興趣,幾天的研究發現 Puppeteer 這套由 Google 開源、使用無介面操作 Chrome 做自動化測試的 Node.js 函式庫也能用來爬取資料,因此決定使用 Node.js 搭配 Puppeteer 和 Axios (基於 promise 的 HTTP 庫),自動化將先前作品「吉卜力相簿」 上的一千多張作品劇照下載下來。

Puppeteer 可由 npm 進行安裝,如果電腦中有基於 Chromium 的瀏覽器,可下載容量較小的核心版本,之後再將啟動路徑設置為應用程式路徑即可 (範例使用 Brave 瀏覽器):

$ npm i puppeteer-core

簡単だけど、すごく良くなる 77 のルール デザイン力の基本

設計前先從調查開始,釐清目標和傳達對象後簡化傳達主旨,選定氣氛/風格/調性 (正式、隨性、黑白),依照以上內容思考策略。

要暢銷就要做好從打動人心 (共鳴) 到下單購買的動線。將感性關鍵字和視覺圖像結合,一頁一主題,視覺版面 (Viewport) 使用單一標語、單一視覺和製造留白。

只用最多兩種正規供應商字體 (fonts.com);選用無襯線體 (Gill Sans, Frutiger, Gilroy, Avenir) 和襯線體 (Palatino, Optima, Trajan) 做搭配,商業場合基本上使用可讀性高的明體黑體;差異化可使用字重 (粗細) 表現。

以願景或理念,決定色數。參考色票,依需求以順序選定:主色 (品牌故事)、底色、文字色、第一輔助色 (與主色明度相同、色相不同) 和第二輔助色 (與主色明度相同但彩度較低)。範例:主色 + 白 + 深灰 + 輔助色 (對比/協調功能)、

單色訴求是利用主色加深印象的戰略 (可口可樂);巴斯配色適用二至三種顏色做延展,活用獨特色彩組合的戰略 (FedEx);調色盤配色是由多種顏色組合而成,隨著服務或品牌的情況增減色數,商標色彩得以生動擴展,又被稱為動態識別 Dynamic Identity (Google 的各種 App 商標)。

使用照片或插圖前應做到釐清目的、調查和思考表現手法 (主視角構圖為客觀/自我帶入/想像畫面)。可使用手繪表達美味感、用大版面強調照片或插圖。採光影響九成照片品質,可在照片校正後利用濾鏡效果調色或套用藝術特效以營造風格 (親切/沈穩/悠閒)。

如果有時間和預算,建議委託創作者或代理商製作原創素材;若是使用網站上商業用途的素材,先了解是否已被大量刊登,且務必詳閱使用規範和授權條款,如果寫得不夠清楚,就盡量不要使用;若要委託繪製或拍攝,先了解自己需求類別、風格、主題和工具,備齊形象資料、繳納期限、合約、檔案類型等條件,再發案給特殊專長接案者進行委託。委託時討論由自己還是接案者保有最終決定權,並在每個階段做到共享、確認和同意。委託結束後,使用接案者的作品請標示原作者姓名。

整理設計風格,需要關注視線誘導、刪除不必要的元素、統一字體和外邊距,以及做到適當留白以凸顯主題。《設計是什麼?保羅.蘭德給年輕人的第一堂啟蒙課》裡提到「設計是形式與內容之間的關係。 (Design is a relationship between form and content.)」想讓人讀懂內容,排版就要簡單明瞭、注重共鳴;若希望讀者能樂在其中,編排上就盡量發揮創意。此外,也需注意設計的通用性,即能否在各種媒體尺寸上延展呈現。


掌控自我、提升成績的 18 個學習武器

意志力的總量是有限的,一整天能專注 3–4 小時算得上是相當不錯。讓人疲累的是選擇而非行動,與其想辦法讓自己專注,不如不做某些事。專注力能透過訓練強化。每次專注於一個行為,使其習慣化,就能培養出專注力。

晚上 8 點睡到早晨 4:30 為最佳睡眠作息,最好在晚上 10 點至凌晨 2 點進入深層睡眠。起床後 2 小時、早餐後 30 分鐘為黃金時段,建議養成易上手、幫助進入專注狀態的儀式。

根據人體晝夜節律,上午 10 點認知能力最高,最容易進入專注狀態,之後注意力隨著時間逐漸下降。建議早於 10 點起床,以 15 分鐘左右的運動活化大腦,讓自己流點小汗,像是慢跑、走路、伸展或游泳等;用餐採低升糖飲食:8:00 早餐、10:00 點心、12:00 午餐、15:00 點心,於 1–2 小時補充水分,並做到在早上吸收、中午輸出、晚上複習。

釐清對自己而言最重視的目標,以實現該目標為目的來佈置房間。靈感和天花板高度成正比,在天花板低的房間較能專注複雜的作業;在天花板挑高、光線昏暗的地方,較能構思出平常想不到的獨特點子。

預先做好避免為雜事做判斷的機制。例如,將筆電開著避免進行還要打開的決定、手機關機或是思考穿著等;保持桌面整潔,將分心事物收納淨空。

坐姿要端正:腰桿挺直,收下巴,頭擺正,膝蓋併攏,臀部與腰垂直,腳底平放。

重複運用短期專注,使用番茄鐘設定分段、白噪音協助專注,25 分鐘專注於單一行動上,時間到就「立刻」休息,5 分鐘短暫休息後再回到專注狀態中。可於每 15 分鐘站起來一次或者站著工作,以休息時絕不動腦、午睡不超過 20 分鐘為原則。

情緒也會影響專注。喜、樂、心流體驗能提升創造力,加快決斷時間;怒能增加行動力、解決問題的能力;哀促使冷靜、客觀判斷。可試著將情緒加入規劃。

運動習慣能強化大腦,讓大腦變得較不易疲倦。可在上午曬點太陽、在看得見大自然的地方做輕量運動;也可以做高強度間歇訓練、爬樓梯和快走;每天靜坐 3 分鐘可鍛鍊意志力,以專注在呼吸為目標,鼻子吸氣、吐氣各 7 秒為一週期。

一周留白兩天,處理未完成的事或放鬆;疲憊時可透過睡眠、對眼睛熱敷、肢體伸展、對不安情緒的覺察與紀錄來恢復;平常接觸令人振奮的話題、話語或詩可提高動力。

每一天結束,寫下一句對日常生活的幸福描述或感謝,問自己:「如果今天是人生的最後一天,我想做什麼?」並在十分鐘內做好明日「能完成」的 6 項待辦事項清單,安排上刻意加入休息和偷懶時間,隔天依順序、一次一件完成。待辦事項一開始可從簡單的事情著手,以掌握節奏和維持自信。睡前靜坐一下,睡眠環境盡量保持黑暗,別在睡前滑手機。


Why We Sleep:The New Science of Sleep and Dreams

兩個生理機制掌管睡眠:近日節律與睡眠壓力。近日節律週期接近 24 小時,使人擁有大約 15 小時清醒時間和 9 小時睡眠;睡眠壓力由腺苷造成。清醒時,腦中腺苷濃度逐漸增高,若清醒達十幾小時,高濃度的腺苷將形成睡壓,而咖啡具有干擾睡壓的能力。

近日節律和睡眠壓力各自獨立運作,只要不進行睡眠,腺苷濃度將持續增加,然而近日節律週期還是不變。

睡眠時,會先進入非快速動眼期,然後再換成快速動眼期持續交替。在非快速動眼期間,腦波活動平緩,此時無用的神經連結會被清除;在快速動眼期間,腦波活動活躍,通常會做夢,此時會加強必要的神經連結。

晚睡將減少非快速動眼期效果;早起將減弱快速動眼期效果。睡眠不足也造成腺苷清理不完全,長期睡眠不足導致愈加疲勞的惡形循環。

提升睡眠品質訣竅:固定時間起床、後或黃昏可睡半小時、每晚睡眠 4–5 個 1.5 小時的週期 (每週 30–35 個週期)、睡前 1.5 小時準備入眠、保持環境昏暗低溫和心情平靜。


JavaScript 能做許多事,尤其透過瀏覽器的 API 或套件,我們得以悠游於巨量資料中,將資料轉換為與使用者溝通的介面,以下就來分享 15 個實用的 Vanilla JS 程式碼:


如何減省時間和減少錯誤

本文翻譯自 40 Tips that will change your coding skills forever。作者 Kesk 列出了一些對職業生涯有幫助的事情,很快就能讀完,但要正確應用到生活中可能需要一生的時間。Kesk 從事將近十五年的 App 開發,但有時仍不得不停下來思考軟體開發這行的重要心法。

  1. 將程式碼拆分為不同的小功能。
  2. 如果該下班時還沒有解決問題,那就關機,明天再做吧!別在想了。
  3. YAGNI 原則:除非必要,否則不添加新功能,也別預測未來,你只需要盡快做出能用的東西,只為必要的部分和當前的需求撰寫程式。
  4. 你不需要了解所有知識,也不需要了解所有框架。最重要的是你有好的基礎,在使用框架前先對程式語言深度了解,並且學習 SOLID 原則或是如何撰寫簡潔的程式碼。
  5. KISS:「愚蠢地保持簡單」或是「保持愚蠢的簡單」是一項設計原則。指出大多數系統如果保持簡單而不是搞得更複雜,效果會是最好的。儘管這合乎邏輯,但有時很難實現。
  6. 別想太多。
  7. 如果在問題或 bug 上花太多時間,先離開一陣子,通常從辦公室到洗手間的路上,最好的解決方法就會誕生。對客戶或同事感到生氣時,也建議離開一陣子,如果你還想保住飯碗的話。
  8. 學習撰寫有用的測試和做 TDD。TDD 是一個軟體開發過程,依賴重複非常短的開發週期:撰寫測試、執行所有測試、發現問題編寫程式碼、執行測試、重構程式、重複循環。
  9. 先解決問題,再撰寫程式。別在不知道該做什麼的情況下就開始寫程式。
  10. 別記程式,而是了解邏輯。
  11. 學習如何更好的使用 Stack Overflow。如果要複製貼上 Stack Overflow 的解決辦法,確保你已經理解了。
  12. 如果想學習新東西,那就練習。做一些範例並讓它們發揮功能,僅靠閱讀學習是不夠的。
  13. 閱讀他人的程式碼,也讓別人閱讀你的程式碼。組隊開發和互相審查程式碼都是不錯的主意。
  14. 別重造輪子。
  15. 你的程式碼是最好的閱讀文件。
  16. 知道如何 google 資料。這需要許多的閱讀經驗,以了解自己需要查什麼。
  17. 你的程式碼在未來可能由他人進行維護,所以在撰寫時將這點銘記於心,別總想當個最聰明的人,盡可能讓程式可以當作故事來閱讀。
  18. 使用 Google 解決錯誤最好的辦法就是複製貼上。
  19. 永遠不要放棄,不管如何,你終會解決問題。你總會有狀況不好的時候,但總會過去。
  20. 平靜、平靜、再平靜。解決問題最好的方法就是讓自己有顆安逸的心。
  21. 學習軟體設計模式。設計模式是程式設計中常見的問題解決方案,每個模式都像一個藍圖,你可以對其進行自定義,用自己的程式碼解決常見的問題(別重造輪子)。
  22. 使用整合工具,並儘可能自動化。
  23. Code Katas,它是編程中的一個練習,可以幫助工程師透過重複性和練習熟悉技能,練習範本參考這裡
  24. 讓程式碼關注於介面,而不是實現內容。依賴注入是必要的,可參閱 SOLID 原則。
  25. 重構 — 測試 — 重構。重構是藉由重組現有程式碼、更改、不透過外部行為而優化內部結構的技術。
  26. 當需要的時候尋求協助,別浪費掉時間。
  27. 熟能生巧。
  28. 雖然有時候評論可以幫到你,但別花太多心力在上面,他們很可能已經過時了。
  29. 了解你的開發環境,投資一個夠強大的,像是 IntelliJ
  30. 重複使用組件。
  31. 開發 web 應用程式時,以移動設備優先,並考慮效能和頻寬。
  32. 別過早優化和重構程式,盡快做出最小可行性產品更為重要。
  33. 永遠不要為了節省時間,選擇沒什麼效率的方式抄捷徑。每次寫程式時,都量力而為。
  34. 遵循文件標準。
  35. 使用者不是技術人員,開發使用者介面時為他們想想。
  36. 總是使用版本控制系統,如 GitHub 或是 Bitbucket,並頻繁的做小提交。
  37. 使用 log 比調試程式碼要好得多,請 log 所有關鍵的部分。
  38. 寫程式時保持一致性。如果有使用撰寫風格,就始終使用同一種;如果是和許多人協同開發,確保所有團隊成員使用同種撰寫風格。
  39. 別停止學習,不過比起新的語言和框架,還是將注意力放在軟體開發的基礎上吧。
  40. 最後,對你在做的事情保持耐心和熱愛。

感謝閱讀到這裡,希望這些對你有幫助。


時代在進步,技術也在進步,現代前端框架這麼多,我們該如何選擇?

「框架或工具都是因應某個需要被解決的問題而生。」在不同的時間點,就會有不同的問題需要被解決。而前端最關鍵的任務,就是將資料與狀態視覺化,除了要維護原本從後端取得的商業邏輯的狀態,還要維護 UI 元件顯示邏輯的狀態。

過去在使用原生 JavaScript 做 DOM 操作時,都必須先用一長串程式來抓取元素(如 document.getElementsByClassName(‘.el’)),才能讓網頁元素與使用者進行互動,於是 jQuery 誕生了,我們開始只需要使用 `$(‘el’)` 就能輕鬆做到一樣的事,還順便解決了惱人的跨瀏覽器問題。

接下來面臨的就是狀態管理的問題。從早期的義大利麵式程式碼 (Spaghetti Code) 把所有的東西通通往 HTML 頁面塞,到後來有人提倡關注點分離, 將 HTML、CSS 及 JavaScript 拆開來,這是表現層級上的關注點分離。而當專案的架構越來越大,人們開始把關注點從表現層移到了架構層面,也就是所謂的 MVC。

MVC 設計模式將程式分成資料邏輯層(Model)、操作介面層(View)、操作管理層(Controler),藉由先把資料和畫面顯示這兩者分開,再藉由使用者操作事件將兩者連接起來。比起將不同功能的程式放在一起,這樣的開發方式讓架構變得清楚直觀,但實際上仍不夠好維護。

所以與以往 JavaScript 框架以 DOM 做為基礎操作不同的是,Vue、Angular 使用 MVVM 的概念延伸出資料和邏輯的雙向綁定,這些框架使得開發更著重於資料狀態上,進一步地省去許多抓取元素的繁瑣和狀態更新的時間。

回顧前端技術的發展,不難發現新技術和新工具總是圍繞著問題而生。當現有的工具不夠好用,就會有人開發一套新的解法。過時的技術或工具並不是現在不能用,只是隨著時間過去,隨著技術進步,我們有更好的做法,於是舊技術慢慢退場。不過,學習為了解決不方便而創造出來的庫或框架,總會幫助我們對相應的觀念更加熟悉,比方說:學習 jQuery 讓我們在操控 DOM 元素上變得更加熟練;學習 D3 讓我們對 SVG 底層更加透徹;而學習 MV 框架則讓我們更熟悉狀態與畫面同步的觀念。

專案有它本身的複雜度,當然工具以及其生態圈也是。如果 jQuery 甚至原生的 JavaScript 就可以解決你的需求,那麼你也許並不需要使用前端框架;而如果你想建置 SPA 網站,或是你的專案資料運算邏輯重、有兩個以上不同的 API 要串接,又或是產品的生命週期長(注重載入先後順序、Template 模組化、其他 UI, API 的相依),Vue、React、Angular 這些框架都可以降低開發的難度。

三個前端框架較明顯的差異在於:Vue 著重在關注點分離(Separation of Concerns),讓程式保持整潔、平衡,並使用 HTML 寫法,在三者當中學習成本較低;React 使用 JS 擴展語法 — JSX(JavaScript XML),因此學習 React 需要較高的 JavaScript 熟悉程度,另外在開發上會較常接觸社區插件;Angular 在開發上必須使用 TypeScript,初學的學習曲線也較其他兩者陡峭,不過結構性和功能完整度不會讓你失望。

選擇哪一個前端框架除了學習成本,不會有太大差異,各自在專案上的缺點都可以被克服,所以選擇主要依照團隊喜好。快速選擇框架後,接著從小型、無長期維護需求的活動專案,或是自己的 Side Project 開始實作。你需要的是盡快投入,並把它摸得夠深。

參考資料:

一份全面的 React、Angular 和 Vue 比較指南

Vue 和 React 大比拼,你 pick 誰

Angular、Vue、React 框架選擇是個偽命題

前端工程師養成手冊

談談前端框架

Ray C

執著於好看、好用的開發設計。

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store