軟體開發流程必須要大家有一個共識, 要不然barry會一直用硬體的思維去思考軟體開發, 這樣會一直重工or先後順序不對 軟體界資深的朋友討論, 他們都一致認為我們公司是硬體廠思維, 沒有軟體開發思維很有問題一定要調整 帶領公司從硬體轉到軟體思維, 這會有一個陣痛期, 昨天跟資深軟體工程師討論他們公司的狀況, 不瞞你說他們是科技硬體大廠, 他們也要做軟體轉型, 他們公司投資在轉型這件事已經10年了, 他們的優勢是他們資金夠大可以慢慢調整, 但缺點是因為太大所有轉型雜音很多備受質疑, 但達翔的優勢在於公司規模為中型, 所以調整可以比大型公司較快較有彈性, 但缺點是資金要用在轉型可能資源會比大型公司來得少, 也是因為這樣我想知道barry了解這些背後資源運用跟轉型的痛點到什麼程度？還是說他了解跟實際層面的有落差 畫面的東西沒有跟RD討論就修改, 也不知道對不對的做法會有做白工與溝通上的問題不斷地產生 這點必須要跟PM溝通清楚 修改前會跟RD討論再修改 PM外出事務太多會有無法真實討論畫面問題, 需要與PM討論都找不到人, 並希望PM統一修改畫面而不是大家分著畫, 這個問題點會有多頭馬車，亂掉的問題, PM要明確列表告知RD修改的部分(分成幾點項目這樣), 可以節省掉RD要全部再重新看過設計稿修改也容易造成沒注意到的修改部分(WEI)

youtube教學 Compiling TypeScript tsc filename.ts: 將ts檔 Compiling to TypeScript, 每次修改完code都要執行一次才會重新 Compiling tsc src/filename.ts: 如果檔案不在目前terminal所在路徑, 可以再加src路徑, 作用同上 tsc filename.ts -w: 修改完code 會即時將ts檔 Compiling to TypeScript, 可console看即時更新結果 Type Basics 2~6 //string, number, boolean let name:string;

服務收費, 每月免費200美金, 超過收費, 信用卡扣款計費方式 路線: 每秒查詢 50 次, Google 地圖平台用量限制 google map aip demo 起始, 終點, 中間增加景點, 自行車模式, 匯入其他人的路徑(array), 匯入會不會有不一樣的路線, 開始導航按鈕, 導航路徑像左轉向右轉前面多遠要爬坡 爬坡路線有幾公尺 爬到一半剩幾公尺 2023/1月開始開發, 2023/6月完成 功能 點擊map取得點擊位置 標上圖釘

menu 南瓜濃湯 炒青椒 炒豆芽+胡蘿蔔 小黃瓜 馬鈴薯泥 芋頭 茄子 燙皇宮菜

HTML & CSS 什麼是 semantic HTML? 使用HTML標記向瀏覽器和開發人員描述它的含義 // non-semantic elements: Tells nothing about its content. <div> and <span> // semantic elements: Clearly defines its content. <form>, <table>, and <article>

Intro Next.js 是一個基於 React 的框架，它同時支援 SSR (Server Side Rendering) 與 SSG (Static Side Generation) 兩種方法，不需要很多的設定就可以讓網站同時有這兩種功能。 Steps npx create-next-app@latest What is your project named? › my-app 直接執行 npm run dev 就可以在 localhost:3000 啟動 Next.js 專案

Outline Muti Page Application (多頁面應用程式)-> MPA Single Page Application (單頁面應用程式)->SPA Client Side Render (客戶端渲染)->CSR Server-Side Render (伺服器端渲染)->SSR MPA v.s SPA MPA

前言 常常有些components在初始時看不到,像是lazy loading images(圖片延遲載入)、無限滾動（infinite scrolling）, 他在網頁初始的一開始看不到, 只有在使用者滑到網頁底部的時候才會get loaded. vedio 我們不需要在網頁初始時 request 所有圖片, 這樣可以減少一開始的 loading time, 我們也可以對 components 做同樣的事 可使用 js API or libraries IntersectionObserver callback 函式：當目標元素進入或離開指定外層或預設 viewport 時觸發 options：設定在哪些情況下觸發callback 函式

Flow: 小華最近升職加薪，所以決定去Stylish報復性消費一波， 先玩小遊戲->跑馬燈->競標->thomas->小遊戲->客服->Lisa-> 收藏頁面->牛仔褲->海灘帽->評論->查看評論->聯絡我們->手機的朋友 cart page資料： David dr.kuo15@gmail.com 0912345678

introduction SSR 缺點：TTFB(Time to First Byte)需要較多時間 CSR 缺點：因為JS bundle size較大，可能影響FCP(First Contentful Paint), LCP(Largest Contentful Paint) and TTI(Time to Interactive)

Intrioduction 當程式庫隨著開發越來越龐大, 保持代碼的maintainable和separated變得越來越重要 module pattern可以分割程式碼變得smaller或reusable的片段 module 可將文件中的某些值保密(private) module 裡面宣告的值, 默認 scope 就會在此 module 範圍裡, 要export特定的value,此 value 才能在 module 被使用 減少值在其他程式庫被使用時的命名衝突(name collisions), 因為此值不能用在全域(global scope) ES2015 Modules

Outline Simple call (直接的調用) As an object method (物件的調用) Arrow Functions (箭頭函式的調用) As a DOM event handler (DOM 物件調用) Strict mode (嚴格模式調用) call, apply, bind (強制綁定 this 的調用) As a constructor (建構式調用)

跟著神奇寶貝學OOP！ 任務 OOP 四大理論 抽象化 Abstraction 繼承Inheritance 多型 PolyMorphism 封裝 Encapsulation