[{"data":1,"prerenderedAt":1220},["ShallowReactive",2],{"recommendations-map":3,"recommendations-all-threads-zh-TW":28,"$fKm6xXf2qvzxjcoYg8BZ5q9o-6EPLQd0oXAocpDUxPPU":1152},{"bubble-tea":4,"face-mask":6,"tokyo-wide-sanpo":8,"effective-engineer-talks-at-google":9,"encounter":15,"liuyi-english-school":17,"ichigo-ichie-career":18,"recap-2025":19,"sankahakuu":20,"about":21,"cord-land":22,"reelly":25,"threadspage":27},[5],"face-mask",[7],"bubble-tea",[],[10,11,12,13,14],"encounter","liuyi-english-school","ichigo-ichie-career","recap-2025","sankahakuu",[16,11,12,13,14],"effective-engineer-talks-at-google",[16,10,12,13,14],[16,10,11,13,14],[16,10,11,12,14],[16,10,11,12,13],[],[23,24],"reelly","threadspage",[26,24],"cord-land",[26,23],[29,385,430,533,586,657,706,757,778,808,851,897,958],{"id":30,"title":31,"animated":32,"body":33,"client":366,"cover":367,"css_code":366,"description":368,"extension":369,"html_code":366,"images":370,"is_announcement":32,"is_pinned":32,"is_published":371,"key_points":366,"lang":366,"meta":372,"navigation":371,"order":366,"path":374,"photos":375,"published_at":376,"reading_time":366,"related":366,"role":366,"seo":377,"slug":16,"source_hash":366,"status":366,"stem":378,"summary":379,"tags":380,"tech_stack":366,"translation_of":366,"type":383,"url":366,"video_url":366,"__hash__":384},"threads/threads/articles/effective-engineer-talks-at-google.md","《 The Effective Engineer》作者 Edmond Lau 導讀，增加 impact！！ 矽谷工程師都在做的事。",false,{"type":34,"value":35,"toc":355},"minimark",[36,45,48,59,68,77,80,93,96,103,106,123,129,132,143,152,155,161,164,169,176,181,188,191,194,197,200,206,213,217,223,226,229,232,239,243,246,249,260,267,271,278,281,288,291,296,299,302,309,313,320,323,327,334,337,341,344,351],[37,38,39,40,44],"p",{},"在傍晚吃飯時間，看著 VSCode 上抽象再抽象的程式碼、Terminal 上惱人的錯誤訊息，這時 Slack 又跳出通知，有緊急的 Bug 票需要解決。螢幕右上角的時鐘，不知道什麼時候已經又過了一小時。明明下班時間都已經到了，今天的進度卻才剛開始沒多久。這時候你不禁感嘆，",[41,42,43],"strong",{},"上班就和爬山一樣，下班路比上班難","。",[37,46,47],{},"你是否有過這樣的時期，上班的時候事情永遠做不完，今天的進度一直往後堆積，每到禮拜五總是加班到接近12點。內心開始自我懷疑，是不是技術能力不足、效率太差，還是工作真的太多了。",[37,49,50,51,58],{},"最近發現幾個技術部落格都推薦了",[52,53,57],"a",{"href":54,"rel":55},"https://www.effectiveengineer.com/book",[56],"nofollow","《 The Effective Engineer》","這本書，說非常受用，於是我決心來好好研讀一番，期許未來自己也能夠成為一位 effective engineer。",[37,60,61,62,67],{},"我先看了作者在 ",[52,63,66],{"href":64,"rel":65},"https://www.youtube.com/watch?v=BnIz7H5ruy0",[56],"Talks at Google 的演講","，這場演講涵蓋了《 The Effective Engineer》的主要內容。本篇文章會重點摘要演講的內容，書的內容等我看完之後再另外寫文章發表。",[37,69,70,71,76],{},"作者 ",[52,72,75],{"href":73,"rel":74},"http://www.effectiveengineer.com/about",[56],"Edmond Lau"," 在許多知名的矽谷大公司（e.g. Google）和新創公司（e.g. Quora）工作過。他曾經連續 2 年每週工作 80 小時以上，並且又花了 2 年，全職研究如合成為一個 effective engineer。",[37,78,79],{},"藉由訪問 20 幾家矽谷科技巨頭以及新創公司（e.g. Facebook, Instagram, Dropbox, Etsy 等等）的 CTO 和技術大神，問他們以下 3 個問題：",[81,82,83,87,90],"ul",{},[84,85,86],"li",{},"What separates the most effective engineers you have worked with from everyone else?（什麼事情造就了有效率的工程師，使他們有別於普通的工程師？）",[84,88,89],{},"What is the most valuable lesson you have learned in the past year?（你過去一年之中，學到最寶貴的教訓是什麼？）",[84,91,92],{},"What investment you have made for your team has paid off the highest returns?（什麼投資給你的團隊帶來了最高的回報？）",[37,94,95],{},"總結出每個軟體工程師都可以學習的效率工作法。作者稱之為 leverage framework。",[37,97,98,99,102],{},"這本書裡不會有任何一行 code，書中所闡述的，是作為一名軟體工程師，如何藉由",[41,100,101],{},"執行 high-leverage activities 來最大化自己的 impact","，槓桿出自己的價值與影響力。",[37,104,105],{},"作者要我們了解一個殘酷的事實：",[107,108,113],"pre",{"className":109,"code":110,"language":111,"meta":112,"style":112},"language-javascript shiki shiki-themes github-dark","effort === impact // False\n","javascript","",[114,115,116],"code",{"__ignoreMap":112},[117,118,121],"span",{"class":119,"line":120},"line",1,[117,122,110],{},[124,125,126],"blockquote",{},[37,127,128],{},"努力不等於影響力與貢獻",[37,130,131],{},"一位 staff engineer 的產出貢獻，可能是一位 junior engineer 的 10 倍，但是前者的工時，不可能也是 10 倍。",[37,133,134,135,138,139,142],{},"作者在此給出了本書的核心概念「",[41,136,137],{},"leverage","」，它是一個放大器，可以將你的努力轉換成巨大的產值和影響力，同時也是",[41,140,141],{},"突破日常開發瑣事的施力點","。以下是 leverage 的計算公式：",[107,144,146],{"className":109,"code":145,"language":111,"meta":112,"style":112},"leverage = impactProduced / timeInvested\n",[114,147,148],{"__ignoreMap":112},[117,149,150],{"class":119,"line":120},[117,151,145],{},[37,153,154],{},"工程師的開發日常，也符合 80 / 20 法則。20% 的任務創造了 80% 的價值和影響，而 80% 的任務，只帶來了 20% 的成效。",[37,156,157,158,44],{},"作者要我們辨識那些花最少時間，卻能創造最大價值和影響力的事情，並且優先去執行它，這些影響至關重大的事情叫做 ",[41,159,160],{},"high-leverage activities",[37,162,163],{},"在演講中，作者提及了以下 5 種 high-leverage activity ，就讓我們一一來了解吧！",[165,166,168],"h3",{"id":167},"optimize-for-learning","Optimize for learning",[37,170,171,172,175],{},"第一個 high-leverage activity 是最大化自己學習能力。因為，",[41,173,174],{},"學習是有複利效果的","！所以越早開始進步的幅度越大，學習能力越好，進步得越快。",[124,177,178],{},[37,179,180],{},"Learning compounds!",[37,182,183,184,187],{},"因為學習具有複利效果，所以能力的成長曲線呈",[41,185,186],{},"指數增長","，一開始緩緩上升，幾乎是平的，但過了某一個臨界點之後，會近乎垂直地向上攀升。",[37,189,190],{},"這也滿符合事實，當要攻克一個難題時，需要累積不同面向的知識，當知識點連成線之後，就能夠兜出解法解決問題了。",[37,192,193],{},"作者舉了一個老生常談的例子，每天進步 1%，一年後，會進步 37 倍！",[37,195,196],{},"要努力學習這個大家都知道，但困難的地方是，我們常常被淹沒在日常的開發瑣事、隕石一般的 bug 轟炸之中。每天要做的事情都做不完了，要怎麼騰出時間來學習呢？",[37,198,199],{},"在書中，作者舉了一個 Google 的例子，為了提升員工的生產力與創造力，Google 實行了 20% Time，每週空出一天做自己本職工作以外的事情，研究新的技術、做自己有興趣的專案等等。例如 Gmail 就是從 20% Time 中誕生的。",[37,201,202,203,44],{},"但是身為一般公司的員工，不可能每個禮拜空出一天。於是作者建議，我們可以",[41,204,205],{},"每天預留 1 小時的工時，來實行自己的 20% Time",[37,207,208,209,212],{},"關於學習的最後一點，作者建議我們可以從自己感興趣，或是工作上面臨的問題著手研究，因為",[41,210,211],{},"動機","永遠是持續一項行動最重要的元素。",[165,214,216],{"id":215},"invest-in-iteration-speed","Invest in iteration speed",[37,218,219,220,44],{},"第二個 high-leverage activity 是加速處理重複事務的速度。這和決定是否要將一段 code 寫成一個 function 的判斷方式一樣，當一件事情重複做第二次的時候，你就應該想辦法",[41,221,222],{},"讓第三次作業能夠自動化地進行",[37,224,225],{},"在作者問了每個 CTO，什麼事情造就了有效率的工程師，使他們有別於普通的工程師的時候，他們回答：「會投資時間自己寫一些自動化小工具的工程師，往往效率都是最高的。」",[37,227,228],{},"這裡說的小工具，小到 shell script，大到整個 CI/CD 的自動化基礎建設，都包含在內。",[37,230,231],{},"作者舉例，之前他在 Quora 工作時，每天平均會部署 40～50 次，可以想見如果沒有 CI/CD 的自動化流程，會花費多麼龐大的時間。",[37,233,234,235,238],{},"許多矽谷的大公司都有專門的 team 在打造內部開發工具，像是 facebook 開發了 React.js。作者說：「",[41,236,237],{},"我們都很想成為某個新潮 framework 的作者，但其實，從每天的開發日常，就可以開始了","！」",[165,240,242],{"id":241},"validate-your-ideas-aggressively-and-iteratively","Validate your ideas aggressively and iteratively",[37,244,245],{},"第三個 high-leverage activity 是盡量在進到實作的階段之前，就先驗證 feature 的可行性，避免浪費不必要的時間以及人力。",[37,247,248],{},"舉例來說，Etsy 把產品搜尋結果頁面改成可以無限捲動。在上線之前，他們做了 A/B test，發現點擊率和轉換率各自下跌了 10% 和 25%。因此，這個功能最後根本無法上線，白白浪費了幾個月的時間和人力。",[37,250,251,252,255,256,259],{},"有了這次的經驗，Esty 在修改產品內容頁面的時候，採取",[41,253,254],{},"漸進式","的做法，先將想做的 feature 拆解成幾個",[41,257,258],{},"可以驗證的前提假設","，確認對產品有幫助之後，才真的開始開發。",[37,261,262,263,266],{},"作者說，在一個專案裡，",[41,264,265],{},"越是不確定、有風險的事情，越要在第一時間執行","，避免後續做白工。",[165,268,270],{"id":269},"minimize-operational-burden","Minimize operational burden",[37,272,273,274,277],{},"第四個 high-leverage activity 是要盡量降低日常維護的成本，作者在演講中著重在",[41,275,276],{},"複雜度 complexity"," 的討論上。",[37,279,280],{},"當 Instagram 被 facebook 收購的時候，服務著 4000 萬的使用者，員工卻只有 13 人，其中只有 5 位是工程師。無論從什麼角度來看，他們絕對是一個超級有效率的團隊。",[37,282,283,284,287],{},"作者訪問他們的 CTO，是什麼造就了這一切？CTO 的回答是：「我們",[41,285,286],{},"只採取最簡單的做法來解決問題","。工程師們互相詰問，確認不會增加後續維護的成本之後，才會進行開發。」",[37,289,290],{},"作者說複雜度的影響，從小至大都可能存在。",[124,292,293],{},[37,294,295],{},"code complexity -> system complexity -> product complexity -> organization complexity。",[37,297,298],{},"複雜的 code 會增加工程師的理解和互相溝通的成本、系統的複雜度會增加維護的成本、產品功能的複雜度越高，會讓未來開發的功能的難度增加、甚至是組織上的複雜度，都會影響到開發團隊的效率。",[37,300,301],{},"作者有一次在夏威夷休假，但是剛好有一個只有他懂的系統出問題，而火山上面沒有網路可以處理 bug，於是他就直接變成 single point of failure 了⋯⋯",[37,303,304,305,308],{},"於是作者開始重視 ",[41,306,307],{},"mentorship","，製作詳盡的 on boarding 文件和流程。原本入職三個月的工程師還在理解 code base，現在剛入職的工程師，在第一個禮拜就可以開始貢獻 production。這真的是非常巨大的效率改善！",[165,310,312],{"id":311},"building-a-great-engineering-culture","Building a great engineering culture",[37,314,315,316,319],{},"第五個 high-leverage activity 是建立良好的開發團隊文化。工程師們都想在聊好的環境中工作，",[41,317,318],{},"專注於 leverage activities，會成為一個正向循環","，讓效率推進越來越順手。",[37,321,322],{},"最後是一些 Q&A：",[165,324,326],{"id":325},"q-寫測試雖然必要但是很花時間有沒有更有效率的寫測試方法","Q: 寫測試雖然必要，但是很花時間，有沒有更有效率的寫測試方法？",[37,328,329,330,333],{},"A: 可以",[41,331,332],{},"先確保重要的環節都有測試覆蓋","，在頻繁的改動下不會出錯為目標。",[37,335,336],{},"整個系統不一定要有 100% 的 test coverage，在很少用到的地方寫測試，有時候可能是一種浪費。",[165,338,340],{"id":339},"q-你提到的例子都是新創公司或規模不大的公司關於減低複雜度有沒有在大公司也適用的方法呢","Q: 你提到的例子都是新創公司或規模不大的公司，關於減低複雜度，有沒有在大公司也適用的方法呢？",[37,342,343],{},"A: 新創公司的好處是大家容易直接溝通，但大公司也有它的優點，例如容易取得歷史數據。",[37,345,346,347,350],{},"以 Google 來說，它是一間非常 Data-driven 的公司，所以可以",[41,348,349],{},"讓數據說話，影響決策者","做出 leverage activities。",[352,353,354],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":112,"searchDepth":356,"depth":356,"links":357},2,[358,360,361,362,363,364,365],{"id":167,"depth":359,"text":168},3,{"id":215,"depth":359,"text":216},{"id":241,"depth":359,"text":242},{"id":269,"depth":359,"text":270},{"id":311,"depth":359,"text":312},{"id":325,"depth":359,"text":326},{"id":339,"depth":359,"text":340},null,"/images/effective-engineer.jpg","在傍晚吃飯時間，看著 VSCode 上抽象再抽象的程式碼、Terminal 上惱人的錯誤訊息，這時 Slack 又跳出通知，有緊急的 Bug 票需要解決。螢幕右上角的時鐘，不知道什麼時候已經又過了一小時。明明下班時間都已經到了，今天的進度卻才剛開始沒多久。這時候你不禁感嘆，上班就和爬山一樣，下班路比上班難。","md",[],true,{"readingTime":373},8,"/threads/articles/effective-engineer-talks-at-google",[],"2023-05-11",{"title":31,"description":368},"threads/articles/effective-engineer-talks-at-google","每天預留 1 小時的工時，來實行自己的 20% Time。",[381,382],"effective engineer","high leverage","article","ns_O1uYxzH24KU29S8VH6qdBCwQTjy11MmCTogKBlwo",{"id":386,"title":387,"animated":32,"body":388,"client":366,"cover":366,"css_code":366,"description":112,"extension":369,"html_code":366,"images":416,"is_announcement":32,"is_pinned":32,"is_published":371,"key_points":366,"lang":366,"meta":417,"navigation":371,"order":366,"path":418,"photos":419,"published_at":420,"reading_time":366,"related":366,"role":366,"seo":421,"slug":10,"source_hash":366,"status":366,"stem":422,"summary":423,"tags":424,"tech_stack":366,"translation_of":366,"type":383,"url":366,"video_url":428,"__hash__":429},"threads/threads/articles/encounter.md","遇見",{"type":34,"value":389,"toc":414},[390,395,398,401,404,406,408,411],[124,391,392],{},[37,393,394],{},"演奏曲沒有歌詞，但是你聽得到。",[37,396,397],{},"聽見 冬天的離開\n我在某年某月醒過來\n我想 我等 我期待\n未來卻不能因此安排",[37,399,400],{},"陰天 傍晚 車窗外\n未來有一個人在等待\n向左 向右 向前看\n愛要拐幾個彎才來?",[37,402,403],{},"我遇見誰 會有怎樣的對白?\n我等的人 他在多遠的未來?\n我聽見風 來自地鐵和人海\n我排著隊 拿著愛的號碼牌",[37,405,400],{},[37,407,403],{},[37,409,410],{},"我往前飛 飛過一片時間海\n我們也曾在愛情裡受傷害\n我看著路 夢的入口有點窄\n我遇見你是最美麗的意外",[37,412,413],{},"總有一天 我的謎底會揭開",{"title":112,"searchDepth":356,"depth":356,"links":415},[],[],{},"/threads/articles/encounter",[],"2019-09-17",{"title":387,"description":112},"threads/articles/encounter","ukulele version",[425,426,427],"ukulele","fingerstyle","cover","https://www.youtube.com/watch?v=U5YBtGQbHu4","3Cgz4DxVBPf2Wl1pQbzJ_kn_9js9-k21Tos9RnixeC4",{"id":431,"title":432,"animated":32,"body":433,"client":366,"cover":522,"css_code":366,"description":112,"extension":369,"html_code":366,"images":523,"is_announcement":32,"is_pinned":32,"is_published":371,"key_points":366,"lang":366,"meta":524,"navigation":371,"order":366,"path":525,"photos":526,"published_at":527,"reading_time":366,"related":366,"role":366,"seo":528,"slug":11,"source_hash":366,"status":366,"stem":529,"summary":530,"tags":531,"tech_stack":366,"translation_of":366,"type":383,"url":366,"video_url":366,"__hash__":532},"threads/threads/articles/liuyi-english-school.md","孩子們的南陽街與大人們的補習班",{"type":34,"value":434,"toc":520},[435,440,443,446,449,452,455,462,465,468,471,474,477,480,485,500,507],[124,436,437],{},[37,438,439],{},"「接下來的大學四年，將會是你們人生中過最爽的日子。」",[37,441,442],{},"Wayne 老師堅定的語氣，與其說是在向我們預告，更像是在回憶。「你們會發現，高中時期曾經覺得很厲害的大型成發、深刻的戀愛，原來是那麼地小兒科。在大學裡，永遠有更令你興奮的事情可以去做。你們要非常珍惜這段時光。因為，人生最爽、最無憂無慮的時候，可能真的就是大學這四年了。」",[37,444,445],{},"這是我高三的這一年中，在劉毅英文記憶最深刻的一句話。大我們 10 歲的 Wayne 老師，對高中生來說，不是一個長輩，而是同儕般的存在。他在課堂間偶爾閒談起的回憶，是我們在書堆中仰望的未來。升上大學以後，就是個大人了。自由彷彿唾手可得，那會是什麼樣的感覺呢?",[37,447,448],{},"《孩子們的南陽街與大人們的補習班》是一本記錄高中生們的青春歲月、也報導大人們的補習班事業的回憶錄。最初，我是在台下聽講的學生。本書出版後，我是該開始 ( 但拖延 ) 思考未來的大三生。再次閱讀，我已工作兩年並且轉職到理想跑到的上班族。每次閱讀本書都有不同的體驗，有種少年聽雨的感覺。",[37,450,451],{},"最大的不同，是初次閱讀時，我完全把焦點放在學生的部分，覺得這個學生好奇特、這個學生的煩惱我也有等等。而再次閱讀時，我則不由自主地關注 Wayne 老師在補習班的經歷，周旋於管理階層之間的為難。",[37,453,454],{},"同時也意識到了，當年滿心期待的每週三晚上，讓我感到能夠窺見大人自由世界的模考班解題時間，其實是扎扎實實地，經歷了許多苦練、苦澀，甚至是自我懷疑，才得以展現在我們面前。出社會工作了以後，才注意到光鮮亮麗背後的辛苦付出。",[37,456,457,458,461],{},"本書的作者 蔡世偉 ",[114,459,460],{},"@waynetsai1984"," 為補習班老師、 知名英文譯者。曾經翻譯過的書籍有：《原子習慣》、《我是GaryVee》、《麥可喬丹傳》、《曼巴精神》、《每一天的覺醒》等等。",[37,463,464],{},"本書一共分為三個部分，分別是「那些學生教我的事」、「補習班的那些事」以及隱藏版內容「課間閒談」。",[37,466,467],{},"「那些學生教我的事」是 Wayne 老師在補習班中所教到的奇葩學生，有母管嚴的森哥、熱愛山本五十六的軍事迷、考試與烘焙都臻至頂尖的北一女甜點師。每一位被提及的高中生，在努力符合學測、指考這個品管標準的，高中教育標準化製造流程下，都顯得特別的突出。突出的原因可能是有特別熱愛的興趣、特別擅長的技能，甚至是特別地聽話、不反抗。看完這部分後，不禁想到 Pink Floyd 樂團的 Another Brick In The Wall。教育究竟是讓我們變得更好，還是一種篩選機制呢?",[37,469,470],{},"「補習班的那些事」紀錄了 Wayne 老師在劉毅英文中的經歷與遭遇。從入行到成為補習班王牌老師。從光鮮亮麗的講台到下課的備課時間、再到與補習班管理層間的周旋等等。其中讓我印象最深刻的是補習班老闆劉毅曾經對 Wayne 老師說：「我討厭你！」。即便如此，Wayne 老師還是在書中表示他自己非常尊敬劉毅老師。其中最大的原因是，他被劉毅教英文的熱情所感動。劉毅曾經在講台上說過：「萬一我突然死掉了也沒有關係，我已經把講義都編好了，會有老師代替我上下去。」",[37,472,473],{},"我自己在高中補習的時候，每學期都會拿到劉毅出版社新編的單字書、文法書、句型書。雖然實際上沒有多少人看，但這種對於自己在乎的事情，展現捨我其誰的態度去做的精神，也深刻地感動到了我。",[37,475,476],{},"「課間閒談」節錄了十幾句 Wayne 老師在閱讀中深獲啟發的文字，並且加上他的人生經驗作為印證，是本書中我最喜歡的部分。日本出版社幻冬社的老闆見城徹曾經說過「重要的不是書中寫了什麼，而是自己如何感受。」在讀課間閒談時，我的腦中突然浮現了這句話。",[37,478,479],{},"Wayne 老師熱愛閱讀，並且藉由自己的人生經驗和作者們對話。閱讀《孩子們的南陽街與大人們的補習班》可以看見那些走在我們人生前面的人，反覆思索的問題與回答。同時也能知道，不是只有我一個人有這些煩惱。雖然我們必須靠自己過好自己的人生，但是我們並不孤獨。😉",[124,481,482],{},[37,483,484],{},"The reading of all good books is like conversation with the finest men of past centuries. - René Descartes\n閱讀好書，如同與過往世代的人傑們對話。 - 勒內·笛卡兒",[37,486,487,488,491,492,495,496,499],{},"電子化的浪潮席捲而來，每個人都無法置身事外。選擇讀墨帶你在文字之海中乘風破浪吧！點擊以下連結",[41,489,490],{},"註冊讀墨會員","，30 天內首購享 ",[41,493,494],{},"79 折","，60 天內單筆訂單滿額再送 ",[41,497,498],{},"$100 購書金","！",[37,501,502,503],{},"立即註冊 👉 ",[52,504,505],{"href":505,"rel":506},"http://moo.im/i/DbsBO",[56],[37,508,509,510,515,516],{},"立即購買",[52,511,514],{"href":512,"rel":513},"https://readmoo.com/book/210208251000101",[56],"《孩子們的南陽街與大人們的補習班》","喚起那些憧憬大人世界的夏日回憶 👉 ",[52,517,518],{"href":518,"rel":519},"https://moo.im/a/3fglvC",[56],{"title":112,"searchDepth":356,"depth":356,"links":521},[],"/images/wayne-english-teacher.png",[],{},"/threads/articles/liuyi-english-school",[],"2021-09-05",{"title":432,"description":112},"threads/articles/liuyi-english-school","升上大學以後，就是個大人了。自由彷彿唾手可得，那會是什麼樣的感覺呢?",[],"K2_vsCLpzdn_w9T0inU1x6Qr3kBq20C9lIe218mG3oc",{"id":534,"title":535,"animated":32,"body":536,"client":366,"cover":575,"css_code":366,"description":540,"extension":369,"html_code":366,"images":576,"is_announcement":32,"is_pinned":32,"is_published":371,"key_points":366,"lang":366,"meta":577,"navigation":371,"order":366,"path":578,"photos":579,"published_at":580,"reading_time":366,"related":366,"role":366,"seo":581,"slug":12,"source_hash":366,"status":366,"stem":582,"summary":583,"tags":584,"tech_stack":366,"translation_of":366,"type":383,"url":366,"video_url":366,"__hash__":585},"threads/threads/articles/once-in-a-lifetime.md","一期一會，第一份工作。",{"type":34,"value":537,"toc":573},[538,541,552,555,558,561,564,567,570],[37,539,540],{},"（封面圖是第一份工作離職後去學做手工吉他，超開心的！）",[124,542,543],{},[37,544,545,546,551],{},"這是我的「BlogBlog 同樂會– 2026 年 8 月 」的投稿文章。本月主題是「一期一會」，由 ",[52,547,550],{"href":548,"rel":549},"https://blog.ikukaroom.com/ichigo-ichie/",[56],"ikuka"," 主持。如果你有自己的部落格，歡迎一起來參加！",[37,553,554],{},"「一期一會」（いちごいちえ）源自日本茶道，意思是「一生只有一次的相會」。本多時候會用在「因為只有一次相遇，所以傾盡全力，不留遺憾」的心境上，但是我查了一下發現，對於不想再經歷一次的經驗（像是當兵）也可以使用一期一會。",[37,556,557],{},"我想對許多人來說，這種不想再經歷一次的一期一會，應該是第一份工作吧。升大學時因為分數落點而選的科系、沒有在學校把握轉系、學習的時光。出社會後這些後果在找第一份工作的時候一次爆炸，發現自己能選的工作都不是想要選的。只能硬著頭皮上工，然後用下班時間尋找要轉換到什麼跑道。",[37,559,560],{},"我的第一份工作是工業管理系的本科系工作 — 生產管理。派駐在中國的工廠裡每天和供應商在微信群組和用電話吵架，但是我的個性真的很不擅長和別人正面衝突，所以做得很痛苦。加上中國的生活環境實在很令人煩躁。去了之後覺得台灣真的是天堂，以前都沒感覺。（果然自我認同要在不同之中才能長出來）每天都很想離職，但是又不知道自己還能做什麼。",[37,562,563],{},"後來我轉職成爲軟體工程師，我驚訝地發現，原來有接近一半的軟體工程師都是轉職來的，來自各種不同的背景。有國文老師、美術老師、職業軍人、移民署公務員、倉管、生管，有人是日文系、有人是經濟系、有人是財經系。而大部分的人有一個共通點，就是原本的工作都很痛苦。",[37,565,566],{},"最近聽一位之前在移民署的公務員，後來轉職成為 SA（System Analyst 系統分析師）的人分享。以前為了抓住逃跑的移工，不得不拿鐵椅全力毆打他們，因為如果讓他們跑了，自己會有刑事責任。蓋抹布灌水、綁手綁腳、拿警棍威嚇等等都是他們的日常。工作內容就像在拍電影一樣，對一般人來說很脫離現實。",[37,568,569],{},"而我也被同事問過，裸辭轉職不會很擔心、焦慮嗎？我秒答：和回去做前一份工作比起來，轉職簡直太容易了。而且轉職的近一年，應該是我人生中最開心的一段時光，因為人生朝著明確的目標快步邁進。",[37,571,572],{},"好像把第一份工作說得很恐怖，但是事後回想起來，不開心的回憶慢慢淡去了，剩下的反而是感謝。無論好的壞的，都變成了我的一部份，讓我可以面對之後的挑戰，在當下給了我極強的動力去轉職，當時認識的同事，都是很厲害的人，現在都在很大的舞台上發光發熱。所以我想，第一份工作當之無愧是我人生中最深刻的一期一會。",{"title":112,"searchDepth":356,"depth":356,"links":574},[],"/images/gallery/截圖 2026-09-01 凌晨12.07.21.png",[],{},"/threads/articles/once-in-a-lifetime",[],"2026-08-31",{"title":535,"description":540},"threads/articles/once-in-a-lifetime","對於不想再經歷一次的經驗（像是當兵）也可以使用一期一會。我想對許多人來說，這種不想再經歷一次的一期一會，應該是第一份工作吧。",[],"J9JC3D4ezSN5APZ3X3hQmUUwUDi3xAa1fXkx0dPXTMw",{"id":587,"title":588,"animated":32,"body":589,"client":366,"cover":366,"css_code":366,"description":593,"extension":369,"html_code":366,"images":645,"is_announcement":32,"is_pinned":32,"is_published":371,"key_points":366,"lang":366,"meta":646,"navigation":371,"order":366,"path":647,"photos":648,"published_at":649,"reading_time":366,"related":366,"role":366,"seo":650,"slug":13,"source_hash":366,"status":366,"stem":651,"summary":652,"tags":653,"tech_stack":366,"translation_of":366,"type":383,"url":366,"video_url":366,"__hash__":656},"threads/threads/articles/recap-2025.md","2025 年的碎片",{"type":34,"value":590,"toc":643},[591,594,597,600,603,606,609,612,615,618,621,624,626,629,632,635,637,640],[37,592,593],{},"今年一整年保持著一週健身 3 天，有氧 1 小時的好習慣。規律運動、吃健康的食物真的會感受到原始的快樂！",[37,595,596],{},"腦內啡釋放和身體變得輕盈的感覺真的超好！怪不得大家都說體態是最好的名片，因為運動真的很花時間。🤣",[37,598,599],{},"10 月第一次在國外自駕之旅，去了矽谷找朋友，體驗了美國時間、美國生活。雖然花了很多特休跟錢，但我覺得超值得，因為回憶是會複利的！",[37,601,602],{},"我一直認為時間有美化回憶的能力，時間為苦澀的回憶加上濾鏡，為開心的回憶按下快門。",[37,604,605],{},"我能夠鮮明地感受到 10 年前第一次身在東京的興奮，也確定很久以後，能夠重溫這趟美國之旅的快樂。",[37,607,608],{},"/",[37,610,611],{},"從去年發現 indie hacking 這個領域之後，我嘗試獨立開發一年多了。在今年 8 月發佈了我的第一個產品，一個用 markdown 寫和弦譜的工具《和弦島》。但是太 niche 了，沒什麼人用。",[37,613,614],{},"我沒有能讓產品持續曝光的 distribution channel，只在發佈的那一個禮拜激起一陣漣漪，隔週 GA4 的線圖又恢復平靜了。",[37,616,617],{},"不過在做使用者訪談時，認識了厲害的吉他手（可以 cover Marcin 曲子的等級）也是很棒的收穫！",[37,619,620],{},"獨立開發就和學習任何事情一樣，有前人的經驗可以參考是一回事，事實上總是要自己走過一次、陷進同樣的坑裡才能真的學會一些事情。我想這就是知識和經驗之間的關係吧。",[37,622,623],{},"為了補足開發以外的技能，我攝取了好些英文書：My Indie Book, Snow Leopard, Obviously Awesome, The SaaS Playbook, The Cold Start Problem。之後的產品如果有相關的心得再寫文章分享吧！實作要緊！",[37,625,608],{},[37,627,628],{},"今年也開始跟仰慕很久的吉他老師上課，課堂上經常發現一些平時自己不會注意到的小細節，其實都埋藏著很多學問。六條弦和手臂大小的桶身裡，真的藏著一個宇宙！",[37,630,631],{},"每當這種時候總是能深刻感受到現場教學的價值。雖然現在靠 YouTube 和 AI，沒有什麼東西是不能自學的，但是經驗和「發現自己不知道什麼」的能力，還是需要老師。",[37,633,634],{},"這種時候也會覺得，辛苦上班賺錢終於有意義了，可以付學費學想學的東西。",[37,636,608],{},[37,638,639],{},"2026 年的新年新希望跟往年一樣：希望每年都可以不要許同樣的願望。",[37,641,642],{},"所以就這樣吧～💪🏻",{"title":112,"searchDepth":356,"depth":356,"links":644},[],[],{},"/threads/articles/recap-2025",[],"2025-12-31",{"title":588,"description":593},"threads/articles/recap-2025","時間有美化回憶的能力，時間為苦澀的回憶加上濾鏡，為開心的回憶按下快門。",[654,655],"2025","recap","vbudqgEWAIT97YJTFjWChUtnUCNZvX3MLGK-wzVMf-c",{"id":658,"title":659,"animated":32,"body":660,"client":366,"cover":693,"css_code":366,"description":664,"extension":369,"html_code":366,"images":694,"is_announcement":32,"is_pinned":32,"is_published":371,"key_points":366,"lang":366,"meta":695,"navigation":371,"order":366,"path":696,"photos":697,"published_at":698,"reading_time":366,"related":366,"role":366,"seo":699,"slug":14,"source_hash":366,"status":366,"stem":700,"summary":701,"tags":702,"tech_stack":366,"translation_of":366,"type":383,"url":366,"video_url":366,"__hash__":705},"threads/threads/articles/sankahakuu.md","東京散步 ｜ 両国篇",{"type":34,"value":661,"toc":691},[662,665,668,671,677,680,683,686],[37,663,664],{},"一直以來最喜歡的北齋浮世繪作品都是《神奈川沖浪裏》",[37,666,667],{},"因為那開出萬千白花的浪尖，生動得彷彿是許多小手想將單薄的小船攫走。",[37,669,670],{},"這彷彿讓我看見，北齋畫了一輩子，終於在年老時遇見了普魯士藍，得以在畫布上自由揮灑江戶的海與天空的狂喜。",[37,672,673,674,44],{},"但今天在北齋美術館，看到了《山下白雨》這幅作品。一下子也躍升為我",[41,675,676],{},"最喜歡的北齋作品",[37,678,679],{},"在《山下白雨》中，山腳下烏雲密佈、雷電交加，而富士山山頂卻穿越雲雨，聳立在晴朗的天空中。",[37,681,682],{},"在有限的畫布上，北齋為了表現出富士山的雄偉，用了天氣作為對比，襯托出立體的高度。",[37,684,685],{},"在好的作品中，這種巧思好像無處不在。文學、攝影、繪畫、音樂，都有各自的方式。",[124,687,688],{},[37,689,690],{},"我想，能將心中的想像，用手邊的工具實現的人。放在什麼時代，都是最厲害的吧！",{"title":112,"searchDepth":356,"depth":356,"links":692},[],"/images/sankahakuu.png",[],{"readingTime":373},"/threads/articles/sankahakuu",[],"2023-03-17",{"title":659,"description":664},"threads/articles/sankahakuu","我彷彿看見，北齋畫了一輩子，終於在年老時遇見了普魯士藍，得以在畫布上自由揮灑江戶的海與天空的狂喜。",[703,704],"葛飾北齋","富嶽三十六景","QDTUujuO4YttNiwcqEQuzgLHg5sk0HMrdKWTh4-Z7m8",{"id":707,"title":708,"animated":371,"body":709,"client":366,"cover":366,"css_code":741,"description":713,"extension":369,"html_code":742,"images":743,"is_announcement":32,"is_pinned":32,"is_published":371,"key_points":366,"lang":366,"meta":744,"navigation":371,"order":366,"path":745,"photos":746,"published_at":747,"reading_time":366,"related":366,"role":366,"seo":748,"slug":7,"source_hash":366,"status":366,"stem":749,"summary":750,"tags":751,"tech_stack":366,"translation_of":366,"type":755,"url":366,"video_url":366,"__hash__":756},"threads/threads/cssart/bubble-tea.md","珍珠奶茶手搖杯",{"type":34,"value":710,"toc":739},[711,714,717,728,731,734],[37,712,713],{},"Vue.js 櫻花珍珠手搖杯，現在就來為自己調一杯珍奶吧！",[37,715,716],{},"你可以：",[81,718,719,722,725],{},[84,720,721],{},"選擇杯型（保溫杯、手搖杯、咖啡杯、馬克杯）",[84,723,724],{},"調整各種成分的比例（奶蓋、牛奶、綠茶、紅茶）",[84,726,727],{},"增減珍珠數量",[37,729,730],{},"本點餐系統提供 4 種飲品、4 款杯子，供顧客自由搭配選用。",[37,732,733],{},"建議選用環保杯，因為",[124,735,736],{},[37,737,738],{},"地球已經太擁擠了，再也容不下一點塑膠！",{"title":112,"searchDepth":356,"depth":356,"links":740},[],".bubble-tea-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 200px;\n  background-color: #698474;\n  padding: 24px;\n}\n.label { color: #e5e4cc; margin-top: 12px; font-size: 14px; }\n.beverage { position: relative; margin-top: 30px; }\n.cup {\n  width: 60px; height: 100px; margin: 0 auto;\n  border: 4px solid #fff; border-top: none;\n  padding-top: 5px; position: relative;\n}\n.ingradients {\n  width: 100%; position: absolute; bottom: 0;\n  background-color: #9dab86; overflow: hidden; font-size: 0;\n}\n.thermos-height { max-height: 80px; }\n.bubbles {\n  width: 10px; height: 10px; background-color: #fbc1bc;\n  border-radius: 5px; display: inline-block;\n}\n.green-tea { width: 100%; height: 25px; background-color: #9dab86; }\n.milk { width: 100%; height: 25px; background-color: #f7d8bb; }\n.foam { width: 100%; height: 10px; background-color: #eee; }\n.black-tea { width: 100%; height: 0; background-color: #801a08; }\n.box { width: 100%; height: 10px; position: absolute; top: 0; overflow: hidden; z-index: 1; }\n.wave {\n  position: absolute; bottom: 47%; left: -147%;\n  background: #698474; width: 222px; height: 222px;\n  transform-origin: 50% 48%; border-radius: 43%;\n  animation: drift 5000ms infinite linear;\n}\n.wave.-three { animation: drift 7000ms infinite linear; }\n.wave.-two { animation: drift 9000ms infinite linear; opacity: .1; background: #f8b195; }\n@keyframes drift { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n.thermos { border-top: 4px solid #fff; border-radius: 2px; }\n.handle.top {\n  border: 4px solid #fff; width: 60px; height: 20px;\n  position: relative; left: 50%; transform: translateX(-50%); border-radius: 2px;\n}\n.handle.top::after {\n  content: \"\"; display: block; width: 10px; height: 20px;\n  border: 2px solid #fff; position: absolute; left: 60%; top: 40%; border-radius: 4px;\n}\n","\u003Cdiv class=\"bubble-tea-container\">\n  \u003Cdiv class=\"beverage\">\n    \u003Cdiv class=\"handle top\">\u003C/div>\n    \u003Cdiv class=\"cup thermos\">\n      \u003Cdiv class=\"ingradients thermos-height\">\n        \u003Cdiv class=\"box\">\n          \u003Cdiv class=\"wave -one\">\u003C/div>\n          \u003Cdiv class=\"wave -two\">\u003C/div>\n          \u003Cdiv class=\"wave -three\">\u003C/div>\n        \u003C/div>\n        \u003Cdiv class=\"foam\" style=\"height: 10px;\">\u003C/div>\n        \u003Cdiv class=\"milk\" style=\"height: 25px;\">\u003C/div>\n        \u003Cdiv class=\"green-tea\" style=\"height: 25px;\">\u003C/div>\n        \u003Cdiv class=\"black-tea\" style=\"height: 0px;\">\u003C/div>\n        \u003Cdiv class=\"bubbles\">\u003C/div>\n        \u003Cdiv class=\"bubbles\">\u003C/div>\n        \u003Cdiv class=\"bubbles\">\u003C/div>\n        \u003Cdiv class=\"bubbles\">\u003C/div>\n        \u003Cdiv class=\"bubbles\">\u003C/div>\n      \u003C/div>\n    \u003C/div>\n  \u003C/div>\n  \u003Cp class=\"label\">四季奶青加珍珠\u003C/p>\n\u003C/div>\n",[],{},"/threads/cssart/bubble-tea",[],"2019-12-31",{"title":708,"description":713},"threads/cssart/bubble-tea","Vue 3 互動式珍奶模擬器 — 調整奶蓋、牛奶、綠茶、紅茶、珍珠的比例，選擇你喜歡的杯型，調製屬於自己的一杯珍奶。",[752,753,754],"CSS Art","Vue 3","Interactive","cssart","xth75bDYQItZEPv6qNk6Xo9_cUylJLDTZ-9I1XXDU_Q",{"id":758,"title":759,"animated":371,"body":760,"client":366,"cover":366,"css_code":764,"description":112,"extension":369,"html_code":765,"images":766,"is_announcement":32,"is_pinned":32,"is_published":371,"key_points":366,"lang":366,"meta":767,"navigation":371,"order":366,"path":768,"photos":769,"published_at":770,"reading_time":366,"related":366,"role":366,"seo":771,"slug":5,"source_hash":366,"status":366,"stem":772,"summary":773,"tags":774,"tech_stack":366,"translation_of":366,"type":755,"url":366,"video_url":366,"__hash__":777},"threads/threads/cssart/face-mask.md","口罩圖鑑",{"type":34,"value":761,"toc":762},[],{"title":112,"searchDepth":356,"depth":356,"links":763},[],".mask-art * {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  text-decoration: none;\n  list-style-type: none;\n  letter-spacing: 4px;\n  font-size: 20px;\n}\n\n.mask-art {\n  background-color: #a98e7c;\n  color: #ddd;\n  padding: 20px 0;\n}\n\n.mask-art .container {\n  margin: 0 auto;\n  width: 700px;\n  max-width: 100%;\n}\n\n.mask-art .prod-wrapper {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.mask-art .prod-name {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  padding: 30px 0;\n  margin: 20px 30px;\n  width: 30%;\n}\n\n.mask-art .mask-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  padding: 30px 0;\n  margin: 20px 0;\n  width: 40%;\n}\n\n.mask-art .desc {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: left;\n  margin: 20px 0 20px 70px;\n  width: 30%;\n  font-size: 16px;\n}\n\n/* 醫療口罩 */\n.mask-art .mask {\n  position: relative;\n  width: 200px;\n  height: 90px;\n  background-color: #87f0df;\n  border: 3px dotted #eee;\n  border-top: 4px solid #eee;\n  border-radius: 2px;\n  transition: all 0.7s;\n}\n\n.mask-art .mask:hover {\n  transform: translate(0, -5px);\n  box-shadow: 0px 20px 10px rgba(0, 0, 0, 0.4);\n}\n\n.mask-art .mask .iron-line {\n  margin: 6px auto;\n  width: 190px;\n  border: 2px solid #eee;\n}\n\n.mask-art .mask .line {\n  margin: 20px auto;\n  width: 190px;\n  border: 1px solid #eee;\n}\n\n.mask-art .mask::before {\n  content: \"\";\n  display: block;\n  width: 50px;\n  height: 80px;\n  position: absolute;\n  border: 2px solid #eee;\n  border-right: 2px dotted #eee;\n  left: -50px;\n  border-radius: 40px 0px 0px 40px;\n}\n\n.mask-art .mask::after {\n  content: \"\";\n  display: block;\n  width: 50px;\n  height: 80px;\n  position: absolute;\n  border: 2px solid #eee;\n  border-left: 2px dotted #eee;\n  top: 0;\n  right: -50px;\n  border-radius: 0px 40px 40px 0px;\n}\n\n/* 活性碳口罩 */\n.mask-art .carbon-mask {\n  position: relative;\n  width: 200px;\n  height: 90px;\n  background-image: radial-gradient(#778683 70%, #aab3b2 30%);\n  background-size: 2px 2px;\n  border: 3px dotted #ddd;\n  border-top: 4px solid #ddd;\n  border-radius: 2px;\n  transition: all 0.7s;\n}\n\n.mask-art .carbon-mask:hover {\n  transform: translate(0, -5px);\n  box-shadow: 0px 20px 10px rgba(0, 0, 0, 0.4);\n}\n\n.mask-art .carbon-mask .iron-line {\n  margin: 6px auto;\n  width: 190px;\n  border: 2px solid #ddd;\n}\n\n.mask-art .carbon-mask .line {\n  margin: 20px auto;\n  width: 190px;\n  border: 1px solid #aab3b2;\n}\n\n.mask-art .carbon-mask::before {\n  content: \"\";\n  display: block;\n  width: 50px;\n  height: 80px;\n  position: absolute;\n  border: 2px solid #eee;\n  border-right: 2px dotted #eee;\n  left: -50px;\n  border-radius: 40px 0px 0px 40px;\n}\n\n.mask-art .carbon-mask::after {\n  content: \"\";\n  display: block;\n  width: 50px;\n  height: 80px;\n  position: absolute;\n  border: 2px solid #eee;\n  border-left: 2px dotted #eee;\n  top: 0;\n  right: -50px;\n  border-radius: 0px 40px 40px 0px;\n}\n\n/* N95 口罩 */\n.mask-art .n95-mask {\n  position: relative;\n  width: 150px;\n  height: 150px;\n  background-image: radial-gradient(#eee, rgb(177, 177, 177));\n  background-size: cover;\n  border: 3px solid #ccc;\n  border-radius: 75px 40px 75px 75px;\n  transform: rotate(-45deg);\n  transition: 0.7s;\n}\n\n.mask-art .n95-mask:hover {\n  transform: translate(0, -10px) rotate(-45deg);\n  box-shadow: 0px 20px 10px rgba(0, 0, 0, 0.4);\n}\n\n.mask-art .n95-mask .iron-line-left {\n  position: absolute;\n  top: 8%;\n  left: 22%;\n  margin: 6px auto;\n  width: 90px;\n  border: 2px solid #ddd;\n  transform: rotate(5deg);\n}\n\n.mask-art .n95-mask .iron-line-right {\n  position: absolute;\n  top: 42%;\n  left: 54%;\n  margin: 6px auto;\n  width: 90px;\n  border: 2px solid #ddd;\n  transform: rotate(85deg);\n}\n\n.mask-art .n95-mask .filter {\n  position: absolute;\n  top: 6px;\n  left: 16px;\n  margin: 20px auto;\n  width: 30px;\n  height: 30px;\n  background-image: radial-gradient(#ddd 60%, rgb(177, 177, 177) 40%);\n  background-size: contain;\n  border: 2px dotted #ddd;\n  border-radius: 50%;\n}\n\n.mask-art .n95-mask .mark {\n  position: absolute;\n  top: 88px;\n  left: 2%;\n  width: 90px;\n  height: 20px;\n  background-color: #ddd;\n  border: 1px dotted #aab3b2;\n  transform: rotate(45deg);\n  font-size: 10px;\n  color: #666;\n  letter-spacing: 0;\n  font-weight: 600;\n}\n\n.mask-art .n95-mask::before {\n  content: \"\";\n  display: block;\n  width: 50px;\n  height: 80px;\n  position: absolute;\n  border: 2px solid #eee;\n  border-right: 2px dotted #eee;\n  top: -32px;\n  left: -16px;\n  border-radius: 40px 0px 0px 40px;\n  transform: rotate(45deg);\n}\n\n.mask-art .n95-mask::after {\n  content: \"\";\n  display: block;\n  width: 50px;\n  height: 80px;\n  position: absolute;\n  border: 2px solid #eee;\n  border-left: 2px dotted #eee;\n  top: 87px;\n  right: -17px;\n  border-radius: 0px 40px 40px 0px;\n  transform: rotate(45deg);\n}\n\n/* 國王的口罩（買不到） */\n.mask-art .no-mask {\n  position: relative;\n  width: 200px;\n  height: 90px;\n  background-color: transparent;\n  border: 1px dotted #eee;\n  border-radius: 2px;\n  transition: all 0.7s;\n}\n\n.mask-art .no-mask:hover {\n  transform: translate(0, -5px);\n}\n\n.mask-art .no-mask .line {\n  margin: 30px auto;\n  width: 190px;\n  color: #444;\n  text-decoration: line-through;\n}\n\n.mask-art .no-mask::before {\n  content: \"\";\n  display: block;\n  width: 50px;\n  height: 80px;\n  position: absolute;\n  border: 1px dotted #eee;\n  top: 2px;\n  left: -50px;\n  border-radius: 40px 0px 0px 40px;\n}\n\n.mask-art .no-mask::after {\n  content: \"\";\n  display: block;\n  width: 50px;\n  height: 80px;\n  position: absolute;\n  border: 1px dotted #eee;\n  top: 2px;\n  right: -50px;\n  border-radius: 0px 40px 40px 0px;\n}\n\n@media (max-width: 768px) {\n  .mask-art .container {\n    width: 90%;\n  }\n\n  .mask-art .prod-wrapper {\n    flex-direction: column;\n    margin: 0 auto;\n  }\n\n  .mask-art .prod-name {\n    width: 100%;\n    margin: 20px auto 0;\n    padding: 0;\n  }\n\n  .mask-art .mask-wrapper {\n    width: 100%;\n    margin-bottom: 30px;\n    padding: 0;\n  }\n\n  .mask-art .desc {\n    width: 60%;\n    margin: 0 auto 30px;\n  }\n}\n","\u003Cdiv class=\"mask-art\">\n  \u003Cdiv class=\"container\">\n    \u003Cdiv class=\"prod-wrapper\">\n      \u003Cdiv class=\"prod-name\">醫療口罩\u003C/div>\n      \u003Cdiv class=\"mask-wrapper\">\n        \u003Cdiv class=\"mask\">\n          \u003Cdiv class=\"iron-line\">\u003C/div>\n          \u003Cdiv class=\"line\">\u003C/div>\n          \u003Cdiv class=\"line\">\u003C/div>\n          \u003Cdiv class=\"line\">\u003C/div>\n        \u003C/div>\n      \u003C/div>\n      \u003Cdiv class=\"desc\">可有效阻擋大部分飛沫，適合一般民眾配戴。\u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"prod-wrapper\">\n      \u003Cdiv class=\"prod-name\">活性碳口罩\u003C/div>\n      \u003Cdiv class=\"mask-wrapper\">\n        \u003Cdiv class=\"carbon-mask\">\n          \u003Cdiv class=\"iron-line\">\u003C/div>\n          \u003Cdiv class=\"line\">\u003C/div>\n          \u003Cdiv class=\"line\">\u003C/div>\n          \u003Cdiv class=\"line\">\u003C/div>\n        \u003C/div>\n      \u003C/div>\n      \u003Cdiv class=\"desc\">可吸附異味，大多數無法隔絕飛沫，沒有防疫效果。\u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"prod-wrapper\">\n      \u003Cdiv class=\"prod-name\">N95 口罩\u003C/div>\n      \u003Cdiv class=\"mask-wrapper\">\n        \u003Cdiv class=\"n95-mask\">\n          \u003Cdiv class=\"iron-line-left\">\u003C/div>\n          \u003Cdiv class=\"iron-line-right\">\u003C/div>\n          \u003Cdiv class=\"filter\">\u003C/div>\n          \u003Ci class=\"mark\"> Warning 3M\u003C/i>\n        \u003C/div>\n      \u003C/div>\n      \u003Cdiv class=\"desc\">可有效阻絕 95％ 以上的病毒，適合長時間接觸患者的第一線醫療人員配戴。\u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"prod-wrapper\">\n      \u003Cdiv class=\"prod-name\">國王的口罩\u003C/div>\n      \u003Cdiv class=\"mask-wrapper\">\n        \u003Cdiv class=\"no-mask\">\n          \u003Cdiv class=\"iron-line\">\u003C/div>\n          \u003Cdiv class=\"line\">買不到\u003C/div>\n        \u003C/div>\n      \u003C/div>\n      \u003Cdiv class=\"desc\">身體健康、從事戶外運動，現階段可以不用戴口罩。\u003C/div>\n    \u003C/div>\n  \u003C/div>\n\u003C/div>\n",[],{},"/threads/cssart/face-mask",[],"2020-02-06",{"title":759,"description":112},"threads/cssart/face-mask","2020 年口罩實名制上路，用純 CSS 畫下那個全民搶口罩的年代：醫療口罩、活性碳口罩、N95、還有「買不到」的國王口罩。",[752,775,776],"Pure CSS","2020","ExrxwA1mT318QSStUg-lJCJm6bvqoqtkMmq2lh48txA",{"id":779,"title":780,"animated":32,"body":781,"client":366,"cover":791,"css_code":366,"description":785,"extension":369,"html_code":366,"images":792,"is_announcement":32,"is_pinned":32,"is_published":371,"key_points":366,"lang":366,"meta":793,"navigation":371,"order":366,"path":794,"photos":795,"published_at":797,"reading_time":366,"related":366,"role":366,"seo":798,"slug":799,"source_hash":366,"status":366,"stem":800,"summary":801,"tags":802,"tech_stack":366,"translation_of":366,"type":806,"url":366,"video_url":366,"__hash__":807},"threads/threads/gallery/tokyo-wide-sanpo.md","東京廣域散步",{"type":34,"value":782,"toc":789},[783,786],[37,784,785],{},"四月的東京，上野公園的染井吉野正盛開。",[37,787,788],{},"人群與花瓣一起在風中飄散，每年此刻，這座城市都暫時把它的效率感放下。",{"title":112,"searchDepth":356,"depth":356,"links":790},[],"/images/gallery/uzawaechigo.jpeg",[],{},"/threads/gallery/tokyo-wide-sanpo",[791,796],"/images/gallery/urikamome.jpg","2023-04-21",{"title":780,"description":785},"tokyo-wide-sanpo","threads/gallery/tokyo-wide-sanpo","2023 年春季剪影",[803,804,805],"旅遊","東京","春天","gallery","Dvppaz0RPv2sCHIbs0tz3Leyp8_nylkgiC_g4drF7hk",{"id":809,"title":810,"animated":32,"body":811,"client":366,"cover":366,"css_code":366,"description":112,"extension":369,"html_code":366,"images":839,"is_announcement":32,"is_pinned":32,"is_published":371,"key_points":366,"lang":366,"meta":840,"navigation":371,"order":366,"path":841,"photos":842,"published_at":843,"reading_time":366,"related":366,"role":366,"seo":844,"slug":845,"source_hash":366,"status":366,"stem":846,"summary":847,"tags":848,"tech_stack":366,"translation_of":366,"type":849,"url":366,"video_url":366,"__hash__":850},"threads/threads/pages/about.md","關於我",{"type":34,"value":812,"toc":837},[813,820,825,828,831,834],[37,814,815],{},[816,817],"img",{"alt":818,"src":819},"Ivan Hsu","/avatar/me.jpeg",[124,821,822],{},[37,823,824],{},"Boys, be ambitious!",[37,826,827],{},"一個從面板業轉職的網頁工程師。大半時間寫著給機器看的語言，在這裡寫給人類看的文字。",[37,829,830],{},"著迷於所有使用有限的素材，卻能留下偉大遺產的事情。例如音樂與文字。當然，還有程式碼。",[37,832,833],{},"而鍵盤就像是 21 世紀的元素週期表。不論是工程師或是作家，我們所擁有的僅僅是眼前的 26 個英文字母、以及一些符號，但是我們卻有機會創造出全世界都在使用的產品。改變人們生活的樣貌、或是留下偉大的想法。",[37,835,836],{},"在 AI 氾濫的時代，我要用剛剛好的 Tech Stack，開發實用的生活小物 SaaS。",{"title":112,"searchDepth":356,"depth":356,"links":838},[],[],{},"/threads/pages/about",[],"2026-06-21",{"title":810,"description":112},"about","threads/pages/about","用剛剛好的 Tech Stack 開發實用的生活小物 SaaS。",[],"page","diQIkj7Ay9IH1cvAlWhoavd0mP2lg2A0mxi6ytsAc-U",{"id":852,"title":853,"animated":32,"body":854,"client":366,"cover":875,"css_code":366,"description":869,"extension":369,"html_code":366,"images":876,"is_announcement":32,"is_pinned":32,"is_published":371,"key_points":366,"lang":366,"meta":877,"navigation":371,"order":366,"path":882,"photos":883,"published_at":884,"reading_time":366,"related":366,"role":366,"seo":885,"slug":26,"source_hash":366,"status":886,"stem":887,"summary":888,"tags":889,"tech_stack":366,"translation_of":366,"type":894,"url":895,"video_url":366,"__hash__":896},"threads/threads/products/cord-land.md","10分鐘內編寫自己的 即時轉調 和弦譜！",{"type":34,"value":855,"toc":873},[856,870],[37,857,858,862],{},[816,859],{"alt":860,"src":861},"cord-land-mobile","/images/cord-land-mobile.png",[52,863,869],{"href":864,"target":865,"rel":866},"https://cord.land/cords/wmgkca0x82s802h","_blank",[867,868],"noopener","noreferrer","さくらんぼ - 大塚愛",[37,871,872],{},"隨心所欲編寫和弦譜、和弦圖、自訂註記。成品為純文字，會自動隨著螢幕的大小調整排版、也可以複製貼上到任何地方。",{"title":112,"searchDepth":356,"depth":356,"links":874},[],"/images/cord-land-cover.png",[],{"techStack":878},[879,880,881],"SvelteKit","PocketBase","AWS S3","/threads/products/cord-land",[],"2025-08-20",{"title":853,"description":869},"active","threads/products/cord-land","使用 ChordPro 擴展語法，以純文字編寫吉他和弦譜，即時修改、一鍵分享、自動轉調。",[890,891,892,893],"SaaS","ChordPro","Chord","Corduroy","product","https://cord.land/landing","PZGAB3HFZQVIyRgzi4nSaX9wnl5K2jtzaCZsG-ne_5U",{"id":898,"title":899,"animated":32,"body":900,"client":366,"cover":943,"css_code":366,"description":112,"extension":369,"html_code":366,"images":944,"is_announcement":32,"is_pinned":32,"is_published":371,"key_points":366,"lang":366,"meta":945,"navigation":371,"order":366,"path":948,"photos":949,"published_at":950,"reading_time":366,"related":366,"role":366,"seo":951,"slug":23,"source_hash":366,"status":886,"stem":952,"summary":953,"tags":954,"tech_stack":366,"translation_of":366,"type":894,"url":936,"video_url":366,"__hash__":957},"threads/threads/products/reelly.md","Reelly 幫你摘要 IG 美食 Reels！",{"type":34,"value":901,"toc":941},[902,907,910,913,916,919,922,925,928,931,938],[124,903,904],{},[37,905,906],{},"把想吃的店，一秒變成清單是什麼體驗？",[37,908,909],{},"下個月要去東京旅遊，存了一堆抹茶 Reels，卻懶得整理到地圖裡嗎？",[37,911,912],{},"我把這件麻煩事變簡單了！Reelly 能讀懂 IG Reels 的內容，只需要點擊「分享」，剩下的 AI 都會處理👏🏻",[37,914,915],{},"去年我要去東京前，IG 推了一堆抹茶店給我。",[37,917,918],{},"我用截圖存、用書籤存，要出發前打開來 —— 完全找不到當初看到的那間 🫠",[37,920,921],{},"於是我乾脆自己寫了一個工具，它叫做 Reelly。🍜",[37,923,924],{},"在 IG 滑到想去的店，點分享，Reelly 會自動讀懂 Reels 的內容，把店名、地址、推薦品項整理好，存進你的專屬清單。",[37,926,927],{},"下次要找，直接搜尋就好。🔍",[37,929,930],{},"日韓店家也支援，Reelly 是 Web App 不用裝 App，加入主畫面即可像 App 一樣使用。",[37,932,933,934],{},"現在完全免費，有興趣的話來試試 👉🏻 ",[52,935,936],{"href":936,"rel":937},"https://reelly.life",[56],[37,939,940],{},"（下個月要出遊的人，現在開始存剛剛好！🙌🏻）",{"title":112,"searchDepth":356,"depth":356,"links":942},[],"/images/reelly-cover.png",[],{"techStack":946},[947,880,881],"Nuxt","/threads/products/reelly",[],"2025-11-20",{"title":899,"description":112},"threads/products/reelly","🍜 看到好吃的 Reels？分享給我，幫你摘要店家清單🧾",[890,955,956],"Food","Reels","5pxg_DRJrpYkbsagkKyIBP5urxqtrkq3C092XjA7e14",{"id":959,"title":960,"animated":32,"body":961,"client":366,"cover":1137,"css_code":366,"description":112,"extension":369,"html_code":366,"images":1138,"is_announcement":371,"is_pinned":32,"is_published":371,"key_points":366,"lang":366,"meta":1139,"navigation":371,"order":366,"path":1141,"photos":1142,"published_at":1143,"reading_time":366,"related":366,"role":366,"seo":1144,"slug":24,"source_hash":366,"status":886,"stem":1145,"summary":1146,"tags":1147,"tech_stack":366,"translation_of":366,"type":894,"url":1150,"video_url":366,"__hash__":1151},"threads/threads/products/threadspage.md","Threadspage 把你的創作，變成 真正屬於你的知識主場。",{"type":34,"value":962,"toc":1135},[963,968,971,1005,1116,1119,1122,1132],[124,964,965],{},[37,966,967],{},"創作一次，讓它替你工作。",[37,969,970],{},"Threadspage 把你散落各平台的內容，收攏成一座以你為中心、還會自己長大的知識主場。",[81,972,973,981,989,997],{},[84,974,975,976],{},"YouTube 影片一鍵變文章\n",[81,977,978],{},[84,979,980],{},"你已經錄好影片了，別再重寫一次。AI 幫你把逐字稿濃縮成乾淨好讀的文章，影片自動嵌入，內容從此長在你自己的網域上。",[84,982,983,984],{},"一鍵生成多語言\n",[81,985,986],{},[84,987,988],{},"寫一篇，自動翻成英文、日文版本，各自有獨立網址可以分享與被搜尋，觸及英語圈、日語圈的讀者與學生。",[84,990,991,992],{},"會回答問題的 AI 分身\n",[81,993,994],{},[84,995,996],{},"訪客在你的網站直接發問，AI 用你的內容即時回答——就像一個 24 小時、用你的話回覆的你。",[84,998,999,1000],{},"自有網域，內容永遠是你的\n",[81,1001,1002],{},[84,1003,1004],{},"不綁平台、不看演算法臉色。程式、內容、部署全在你手上，長期累積成真正屬於你的資產。",[107,1006,1010],{"className":1007,"code":1008,"language":1009,"meta":112,"style":112},"language-bash shiki shiki-themes github-dark","# 貼上你已經錄好的影片\n$ threadspage add https://youtu.be/your-talk\n\n→ 抓取逐字稿、濃縮成文章 ✓\n→ 生成 en / ja 版本（獨立網址）✓\n→ 掛上你的 AI 分身（會答訪客問題）✓\n→ 產生結構化資料 · llms.txt · sitemap ✓\n\n# 全部長在 yourdomain.co，永遠是你的\n","bash",[114,1011,1012,1018,1034,1039,1051,1071,1085,1106,1110],{"__ignoreMap":112},[117,1013,1014],{"class":119,"line":120},[117,1015,1017],{"class":1016},"sAwPA","# 貼上你已經錄好的影片\n",[117,1019,1020,1024,1028,1031],{"class":119,"line":356},[117,1021,1023],{"class":1022},"svObZ","$",[117,1025,1027],{"class":1026},"sU2Wk"," threadspage",[117,1029,1030],{"class":1026}," add",[117,1032,1033],{"class":1026}," https://youtu.be/your-talk\n",[117,1035,1036],{"class":119,"line":359},[117,1037,1038],{"emptyLinePlaceholder":371},"\n",[117,1040,1042,1045,1048],{"class":119,"line":1041},4,[117,1043,1044],{"class":1022},"→",[117,1046,1047],{"class":1026}," 抓取逐字稿、濃縮成文章",[117,1049,1050],{"class":1026}," ✓\n",[117,1052,1054,1056,1059,1062,1065,1068],{"class":119,"line":1053},5,[117,1055,1044],{"class":1022},[117,1057,1058],{"class":1026}," 生成",[117,1060,1061],{"class":1026}," en",[117,1063,1064],{"class":1026}," /",[117,1066,1067],{"class":1026}," ja",[117,1069,1070],{"class":1026}," 版本（獨立網址）✓\n",[117,1072,1074,1076,1079,1082],{"class":119,"line":1073},6,[117,1075,1044],{"class":1022},[117,1077,1078],{"class":1026}," 掛上你的",[117,1080,1081],{"class":1026}," AI",[117,1083,1084],{"class":1026}," 分身（會答訪客問題）✓\n",[117,1086,1088,1090,1093,1096,1099,1101,1104],{"class":119,"line":1087},7,[117,1089,1044],{"class":1022},[117,1091,1092],{"class":1026}," 產生結構化資料",[117,1094,1095],{"class":1026}," ·",[117,1097,1098],{"class":1026}," llms.txt",[117,1100,1095],{"class":1026},[117,1102,1103],{"class":1026}," sitemap",[117,1105,1050],{"class":1026},[117,1107,1108],{"class":119,"line":373},[117,1109,1038],{"emptyLinePlaceholder":371},[117,1111,1113],{"class":119,"line":1112},9,[117,1114,1115],{"class":1016},"# 全部長在 yourdomain.co，永遠是你的\n",[37,1117,1118],{},"你只管創作，技術的事交給我們。",[37,1120,1121],{},"你不是工程師，你也不該為了擁有自己的內容，就得跟搬家、翻譯、串接 AI 這些技術活搏鬥。這正是 Threadspage 想替你扛下來的。",[124,1123,1124],{},[37,1125,1126,1127],{},"我已經花時間把影片錄好了，Threadspage 讓我不用再花一次時間把它重寫成文章。\n-- ",[52,1128,1131],{"href":1129,"target":865,"rel":1130},"https://huanyinliu.com",[867,868],"HuanYin",[352,1133,1134],{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":112,"searchDepth":356,"depth":356,"links":1136},[],"/images/threadspage-cover.png",[],{"techStack":1140},[947,880,881],"/threads/products/threadspage",[],"2026-06-13",{"title":960,"description":112},"threads/products/threadspage","你已經在 YouTube、IG、Threads 花了大把時間創作，心血卻鎖在別人的平台上。Threadspage 幫你把內容一鍵搬到自己的網域、自動生成多語言，還變成一個會回答訪客問題的 AI 分身。",[890,1148,1149],"YouTube-to-markdown","auto-i18n","https://threadspage.com","TPiy-4YE8NTHw6GVT2PMxcagcLUinkSlZEAyMtVFYQA",{"generatedAt":1153,"author":1154,"articles":1184,"products":1207,"projects":1214,"pages":1215,"cssarts":1217},"2026-10-09T11:58:08.636Z",{"name":1155,"handle":1156,"location":1157,"status":1158,"statusText":1159,"quote":1160,"bio":1161,"featuredLink":1165,"links":1166,"site":1181},"徐可可","ivanhsu","Taipei, Taiwan","building","踊る暇があったら発明して","寫 Code 算是文字工作者嗎？🤔",[1162,1163,1164],"用剛剛好的 Tech Stack 開發實用的生活小物 SaaS。👨🏻‍💻","```npm i inspiration && npm run dev```","看到好吃的 Reels？分享給我，幫你摘要店家清單 👇🏻","https://reelly.life/u/ivanhsu.co/tenjin-shinya-shokudou",[1167,1170,1172,1175,1178],{"type":1168,"url":1169},"email","ivanhsu.ship@gmail.com",{"type":1171,"url":936},"website",{"type":1173,"url":1174},"github","https://github.com/ivan19940106",{"type":1176,"url":1177},"twitter","https://twitter.com/ivanhsuu",{"type":1179,"url":1180},"instagram","https://www.instagram.com/ivanhsu.co",{"name":1155,"url":1182,"description":1183},"https://ivanhsu.co","千里の道も一歩から。",[1185,1188,1192,1196,1200,1204],{"title":659,"slug":14,"publishedAt":698,"tags":1186,"excerpt":701,"keyPoints":1187,"cover":693},[703,704],[],{"title":535,"slug":12,"publishedAt":1189,"tags":1190,"excerpt":583,"keyPoints":1191,"cover":575},"2026-08-31T00:00:00.000Z",[],[],{"title":588,"slug":13,"publishedAt":1193,"tags":1194,"excerpt":652,"keyPoints":1195},"2025-12-31T00:00:00.000Z",[654,655],[],{"title":432,"slug":11,"publishedAt":1197,"tags":1198,"excerpt":530,"keyPoints":1199,"cover":522},"2021-09-05T00:00:00.000Z",[],[],{"title":387,"slug":10,"publishedAt":1201,"tags":1202,"excerpt":423,"keyPoints":1203,"videoUrl":428},"2019-09-17T00:00:00.000Z",[425,426,427],[],{"title":31,"slug":16,"publishedAt":376,"tags":1205,"excerpt":379,"keyPoints":1206,"cover":367},[381,382],[],[1208,1210,1212],{"title":853,"slug":26,"excerpt":888,"tags":1209,"url":895,"status":886},[890,891,892,893],{"title":899,"slug":23,"excerpt":953,"tags":1211,"url":936,"status":886},[890,955,956],{"title":960,"slug":24,"excerpt":1146,"tags":1213,"url":1150,"status":886},[890,1148,1149],[],[1216],{"title":810,"slug":845,"excerpt":847},[1218,1219],{"title":708,"slug":7},{"title":759,"slug":5},1791547120316]