hackmd-github-sync-badge cover GitHub - https://github.com/shadcn-ui/ui What is Shadcn UI? Shadcn UI 是基於 Tailwind CSS 底層封裝 Radix UI 的 React UI 元件集合，能夠支援 Next.js, Astro, Remix, Gatsby 等框架。 shadcn-ui/ui 專案於 2023 年 1 月發布到 GitHub，截至目前（2024 年 7 月）已有超過 65K 星星數，榮登 2023 JavaScript Rising Stars 榜首。

hackmd-github-sync-badge 本篇為以下資源之學習筆記： Github - microsoft/TypeScript TypeScript 新手指南 Angular Tutorial for Beginners: Learn Angular & TypeScript - Programming with Mosh 什麼是 TypeScript？

最近又開始用 Codewars 來練習刷題，也嘗試開一個 Repository：codewars-challenges 記錄作答結果，蠻喜歡這種能夠慢慢升級的感覺，答題結束還能參考其他人的解法，才恍然大悟原來還有更簡潔的思路。 本篇主要整理 JavaScript 常見的內建函式，列表如下： Math.floor(x)：無條件捨去，回傳「小於等於」所給數字的最大整數 Bitwise NOT (~)：位元反向運算子（波浪號） Math.ceil(x)：無條件進位，回傳「大於等於」所給數字的最小整數 Math.round(x)：四捨五入 toFixed(x)：四捨六入五留雙 Math.sqrt(x)：返回一個數的平方根

hackmd-github-sync-badge Front-End React Next.js 前言 這篇主要用來記錄 Next.js 開發過程採的坑，後續也會不定期更新： 問題一：如何修復 "Window is not defined" error 問題二：在 use client 頁面實作動態路由顯示 missing generateStaticParams() error

hackmd-github-sync-badge Front-End React Next.js Router i18n 前言 在開發網站時，多國語系功能（i18n）是很常見的需求，能根據使用者需求切換網站顯示的語言。這陣子在 Next.js 專案中意外踩了幾個坑，寫下學習筆記作為紀錄。 本篇分為以下幾個段落：

Front-End React Next.js Router hackmd-github-sync-badge Parallel Routes Ref: Next.js - Parallel Routes 前言 接續上篇文章 【學習筆記】談談 Next.js：基於 React 的 SSR 框架，初步瞭解 Next.js 這套框架的特性以及網頁渲染方式，本篇將實際建立 Next.js 專案，以及介紹 Page Router 與 APP Router 兩種路由系統的差異。

hackmd-github-sync-badge image 前言 在認識 Next.js 之前，建議先複習 React 的相關知識，可參考過去的《[week 21] 初探 React：Component、JSX 語法、props 與 state 的不同》系列筆記。 距離上次碰 React 感覺已經是好久以前的事情了，趁著這次組內專案需求，預計導入 Next.js 框架技術，寫下這篇學習筆記做記錄。 初探 Next.js

hackmd-github-sync-badge 前言 在上一篇文章 Google 廣告｜比較 Google Ads、AdSense、AdMob 和 Ad Manager 的區別 中，介紹幾種與 Google 廣告相關的服務。 接下來，將會介紹如何使用 Google AdSense，從申請帳號資格到實際設定廣告投放。 如何使用 Google AdSense 以下是官方 AdSense 頻道的影片介紹：

hackmd-github-sync-badge Ref: https://www.thinkwithgoogle.com/collections/products/ 前言 在網路資訊爆炸的時代，不論是創業到經營品牌，或是透過副業多媒體賺取分潤，都與廣告產業脫離不了關係。好比外食族必備的 Google 地圖上顯示的推薦店家、佔據 Facebook 等社群大半版面的贊助廣告，或是搜尋引擎名列上位的關鍵字結果等等，廣告早已深深融入我們的生活當中。 這次負責專案需要研究投放廣告的主題，剛好之前有稍微摸過 Google AdSense，有在部落格試著開通 Google AdSense 服務，雖然目前的成果還微乎其微，一方面觀察流量的同時，也期許未來能夠持續透過知識的累積，為自己賺取額外的零用錢XD 廣告主與發布商

hackmd-github-sync-badge 在最後結語部分，稍微記錄這次在翻譯時的一點心得感想，內容可分為以下幾點： 翻譯流程 文章管理 輔助翻譯工具 其他選擇 iThome 平台使用心得 結語

hackmd-github-sync-badge 各位好，我是初次參賽的海地。在 2020 年左右，透過線上課程轉職成為前端工程師，目前在一家雲端串流服務公司任職。 儘管到目前累積兩年多的工作經驗，對未來的發展卻仍感到困惑不已，深知自己需要做什麼改變，比如拓展不同領域的技術、或是挖掘現有知識的深度也好，也因為瞭解自己的個性，需要什麼動力催促自己去執行這件事。因此，決定在今年第一次挑戰鐵人賽，訂下的主題是「前端工程師在 Qiita 閱讀的雜食筆記 」。 什麼是 Qiita？ Qiita 是個日本軟體開發社群，可以想成是專屬日本人的記錄與分享技術的平台。以下簡單介紹網站提供的功能，依導覽列由左到右分別如下：

hackmd-github-sync-badge 原文連結：技術に興味がなくて何が悪い？ - Qiita 最後選擇這篇文章作為結尾，是自己也覺得挺有意思的主題。 作者從自身角度，說明為何不贊同「對技術不感興趣的人不適合成為工程師」這項論點；再進一步透過自身經歷，分享即使對技術不感興趣，該如何以工程師的身份面對工作。 畢竟自己對於技術本身，可能也稱不上是「充滿興趣」的那一側人種，但不可否認的是，學習也好，工作也罷，若能從中獲得成就感，仍舊是讓人樂此不疲的事情。

hackmd-github-sync-badge 原文連結：AWSエンジニアロードマップ2023 終於來到了這篇，其實當初在決定要報名今年鐵人賽的時候，是想要從 AWS 主題著手，但一方面沒什麼自信能夠在三十天內寫出完整架構，一方面也還在摸索學習的步調。 本篇文章將會介紹 AWS 學習指標，部分圖解和影片以日文為主，但透過 Roadmap 還有每週主題，還是能夠參考並安排自己的學習進度，架構如下所示： 第 1 週：AWS 基礎知識（AWS Basics） 第 2～3 週：網路與內容傳遞（Networking and Content Delivery）

hackmd-github-sync-badge 原文連結：今さら聞けないログの基本と設計指針 - Qiita 在進行程式開發時，不論是前後端，應該都對 Log（日誌）再熟悉不過。尤其是在遇到非預期性的錯誤時，通常會需要立即調閱 Log，查看是否顯示錯誤訊息；或是在改良軟體時，需要透過 Log 來分析使用者行為等等。 接下來這篇文章，將會針對 Log（日誌）主題進行介紹，從 Log 相關的基礎知識、設計方法、操作時的注意事項，再到實際應用說明。 文章架構如下：

hackmd-github-sync-badge 原文連結：Visual Studio Codeを使うなら絶対に入れておきたい拡張機能Top20【2022最新版】 - Qiita 這篇是 VSCode 系列，整理 2022 年擴充套件排行，本來是想比較看看是否有使用比較不一樣的工具，結果好像大部分還是有使用過XD 但還是決定當作記錄（說不定哪天要重新安裝 VSCode 用得上），也把安裝數和平均星數延續統計到 2023 年，稍微觀察變化作為參考。 那麼，以下正文開始！

hackmd-github-sync-badge 原文連結：プログラミングで一番難しいのは「見積もり」だと思う - Qiita 在進行程式開發之前，通常會需要經歷更重要的「工時評估」。實際在開發時，也經常會被 PM 問到「這功能需要多久時間？這個 BUG 多久可以修好？」等情況，一開始可能會不知道該如何做評估，或不小心給出太長或太短的工時。 然而，這項能力是必須練習的，一方面與「成本估算」有關，另一方面也是「自我保護」，透過動態的修正，使估算工時的過程更加準確。 以下正文開始。

hackmd-github-sync-badge 原文連結：[あるある]「詰まったら、すぐに質問してください」の克服法 - Qiita 倒數三天！不知不覺也來到第二十七天，終於快看到終點了似乎有點感概XD 接下來這篇文章，是打從自己在轉職學習程式的階段，直到現在第二份工作，有時仍是備感困擾的問題。因為不善於提問，或是希望先自己做好功課，等到萬不得已才找人求救，殊不知中間已經浪費太多時間，放在工作上也很有可能因此耽誤進度。 但是呢，這些過程其實是能夠訓練的，本文中提供面對問題時，應該如何善用「提問模板」訓練思考，並且著重於「輸出導向的輸入」，透過這些過程，將有助於改善語言表達能力，並有效提升學習的效果。

hackmd-github-sync-badge 原文連結：エンジニア歴20数年の私が、設計書を書く際に心がけていること - Qiita 上一篇主要介紹「需求定義到內部設計」的流程，接下來這篇文章，將著重於設計規格書的寫法。 先是從作者個人角度統整觀點，如何提升文件的易讀性，以及如何避免資訊混淆等；而在團隊開發中，如何制定一致的「規格書撰寫方式」，使其易於後續維護。 以下正文開始。

原文連結：要件定義～システム設計ができる人材になれる記事 - Qiita 本篇介紹的主題是「需求定義到系統設計」，從為什麼需要需求定義，到如何進行這段流程，再接著說明基本設計的三個步驟，透過一步步解說，到最後完成系統設計圖。 文章架構如下： 需求定義的必要性需求定義的目的 確定需求定義的過程

hackmd-github-sync-badge 原文連結：えっ、まだChatGPT使ってんの？ Bingは無料でGPT-4使えますよ！ - Qiita 這篇文章主要是介紹 Bing Chat，和 ChatGPT Plus 同樣支援 GPT-4，卻能夠免費使用！然而，使用次數限制卻是一大硬傷，這點文中也有提及，但用作個人開發等用途，或許也不失為一種選擇。 此外，作者也舉出幾項實際導入開發使用的範例，可提供參考： 用於建立 Debug 配置 完成轉換（移植）腳本語言