Heidi-Liu

@Heidi-Liu

海底修羅場

Joined on Jun 9, 2020

  • 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 榜首。
     Like 2 Bookmark
  • hackmd-github-sync-badge 本篇為以下資源之學習筆記: Github - microsoft/TypeScript TypeScript 新手指南 Angular Tutorial for Beginners: Learn Angular & TypeScript - Programming with Mosh 什麼是 TypeScript?
     Like 22 Bookmark
  • 最近又開始用 Codewars 來練習刷題,也嘗試開一個 Repository:codewars-challenges 記錄作答結果,蠻喜歡這種能夠慢慢升級的感覺,答題結束還能參考其他人的解法,才恍然大悟原來還有更簡潔的思路。 本篇主要整理 JavaScript 常見的內建函式,列表如下: Math.floor(x):無條件捨去,回傳「小於等於」所給數字的最大整數 Bitwise NOT (~):位元反向運算子(波浪號) Math.ceil(x):無條件進位,回傳「大於等於」所給數字的最小整數 Math.round(x):四捨五入 toFixed(x):四捨六入五留雙 Math.sqrt(x):返回一個數的平方根
     Like 1 Bookmark
  • hackmd-github-sync-badge Front-End React Next.js 前言 這篇主要用來記錄 Next.js 開發過程採的坑,後續也會不定期更新: 問題一:如何修復 "Window is not defined" error 問題二:在 use client 頁面實作動態路由顯示 missing generateStaticParams() error
     Like 1 Bookmark
  • hackmd-github-sync-badge Front-End React Next.js Router i18n 前言 在開發網站時,多國語系功能(i18n)是很常見的需求,能根據使用者需求切換網站顯示的語言。這陣子在 Next.js 專案中意外踩了幾個坑,寫下學習筆記作為紀錄。 本篇分為以下幾個段落:
     Like 3 Bookmark
  • 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 兩種路由系統的差異。
     Like 3 Bookmark
  • hackmd-github-sync-badge image 前言 在認識 Next.js 之前,建議先複習 React 的相關知識,可參考過去的《[week 21] 初探 React:Component、JSX 語法、props 與 state 的不同》系列筆記。 距離上次碰 React 感覺已經是好久以前的事情了,趁著這次組內專案需求,預計導入 Next.js 框架技術,寫下這篇學習筆記做記錄。 初探 Next.js
     Like 3 Bookmark
  • hackmd-github-sync-badge 前言 在上一篇文章 Google 廣告|比較 Google Ads、AdSense、AdMob 和 Ad Manager 的區別 中,介紹幾種與 Google 廣告相關的服務。 接下來,將會介紹如何使用 Google AdSense,從申請帳號資格到實際設定廣告投放。 如何使用 Google AdSense 以下是官方 AdSense 頻道的影片介紹:
     Like  Bookmark
  • hackmd-github-sync-badge Ref: https://www.thinkwithgoogle.com/collections/products/ 前言 在網路資訊爆炸的時代,不論是創業到經營品牌,或是透過副業多媒體賺取分潤,都與廣告產業脫離不了關係。好比外食族必備的 Google 地圖上顯示的推薦店家、佔據 Facebook 等社群大半版面的贊助廣告,或是搜尋引擎名列上位的關鍵字結果等等,廣告早已深深融入我們的生活當中。 這次負責專案需要研究投放廣告的主題,剛好之前有稍微摸過 Google AdSense,有在部落格試著開通 Google AdSense 服務,雖然目前的成果還微乎其微,一方面觀察流量的同時,也期許未來能夠持續透過知識的累積,為自己賺取額外的零用錢XD 廣告主與發布商
     Like  Bookmark
  • hackmd-github-sync-badge 在最後結語部分,稍微記錄這次在翻譯時的一點心得感想,內容可分為以下幾點: 翻譯流程 文章管理 輔助翻譯工具 其他選擇 iThome 平台使用心得 結語
     Like  Bookmark
  • hackmd-github-sync-badge 各位好,我是初次參賽的海地。在 2020 年左右,透過線上課程轉職成為前端工程師,目前在一家雲端串流服務公司任職。 儘管到目前累積兩年多的工作經驗,對未來的發展卻仍感到困惑不已,深知自己需要做什麼改變,比如拓展不同領域的技術、或是挖掘現有知識的深度也好,也因為瞭解自己的個性,需要什麼動力催促自己去執行這件事。因此,決定在今年第一次挑戰鐵人賽,訂下的主題是「前端工程師在 Qiita 閱讀的雜食筆記 」。 什麼是 Qiita? Qiita 是個日本軟體開發社群,可以想成是專屬日本人的記錄與分享技術的平台。以下簡單介紹網站提供的功能,依導覽列由左到右分別如下:
     Like  Bookmark
  • hackmd-github-sync-badge 原文連結:技術に興味がなくて何が悪い? - Qiita 最後選擇這篇文章作為結尾,是自己也覺得挺有意思的主題。 作者從自身角度,說明為何不贊同「對技術不感興趣的人不適合成為工程師」這項論點;再進一步透過自身經歷,分享即使對技術不感興趣,該如何以工程師的身份面對工作。 畢竟自己對於技術本身,可能也稱不上是「充滿興趣」的那一側人種,但不可否認的是,學習也好,工作也罷,若能從中獲得成就感,仍舊是讓人樂此不疲的事情。
     Like 4 Bookmark
  • hackmd-github-sync-badge 原文連結:AWSエンジニアロードマップ2023 終於來到了這篇,其實當初在決定要報名今年鐵人賽的時候,是想要從 AWS 主題著手,但一方面沒什麼自信能夠在三十天內寫出完整架構,一方面也還在摸索學習的步調。 本篇文章將會介紹 AWS 學習指標,部分圖解和影片以日文為主,但透過 Roadmap 還有每週主題,還是能夠參考並安排自己的學習進度,架構如下所示: 第 1 週:AWS 基礎知識(AWS Basics) 第 2~3 週:網路與內容傳遞(Networking and Content Delivery)
     Like 1 Bookmark
  • hackmd-github-sync-badge 原文連結:今さら聞けないログの基本と設計指針 - Qiita 在進行程式開發時,不論是前後端,應該都對 Log(日誌)再熟悉不過。尤其是在遇到非預期性的錯誤時,通常會需要立即調閱 Log,查看是否顯示錯誤訊息;或是在改良軟體時,需要透過 Log 來分析使用者行為等等。 接下來這篇文章,將會針對 Log(日誌)主題進行介紹,從 Log 相關的基礎知識、設計方法、操作時的注意事項,再到實際應用說明。 文章架構如下:
     Like 1 Bookmark
  • hackmd-github-sync-badge 原文連結:Visual Studio Codeを使うなら絶対に入れておきたい拡張機能Top20【2022最新版】 - Qiita 這篇是 VSCode 系列,整理 2022 年擴充套件排行,本來是想比較看看是否有使用比較不一樣的工具,結果好像大部分還是有使用過XD 但還是決定當作記錄(說不定哪天要重新安裝 VSCode 用得上),也把安裝數和平均星數延續統計到 2023 年,稍微觀察變化作為參考。 那麼,以下正文開始!
     Like 1 Bookmark
  • hackmd-github-sync-badge 原文連結:プログラミングで一番難しいのは「見積もり」だと思う - Qiita 在進行程式開發之前,通常會需要經歷更重要的「工時評估」。實際在開發時,也經常會被 PM 問到「這功能需要多久時間?這個 BUG 多久可以修好?」等情況,一開始可能會不知道該如何做評估,或不小心給出太長或太短的工時。 然而,這項能力是必須練習的,一方面與「成本估算」有關,另一方面也是「自我保護」,透過動態的修正,使估算工時的過程更加準確。 以下正文開始。
     Like  Bookmark
  • hackmd-github-sync-badge 原文連結:[あるある]「詰まったら、すぐに質問してください」の克服法 - Qiita 倒數三天!不知不覺也來到第二十七天,終於快看到終點了似乎有點感概XD 接下來這篇文章,是打從自己在轉職學習程式的階段,直到現在第二份工作,有時仍是備感困擾的問題。因為不善於提問,或是希望先自己做好功課,等到萬不得已才找人求救,殊不知中間已經浪費太多時間,放在工作上也很有可能因此耽誤進度。 但是呢,這些過程其實是能夠訓練的,本文中提供面對問題時,應該如何善用「提問模板」訓練思考,並且著重於「輸出導向的輸入」,透過這些過程,將有助於改善語言表達能力,並有效提升學習的效果。
     Like  Bookmark
  • hackmd-github-sync-badge 原文連結:エンジニア歴20数年の私が、設計書を書く際に心がけていること - Qiita 上一篇主要介紹「需求定義到內部設計」的流程,接下來這篇文章,將著重於設計規格書的寫法。 先是從作者個人角度統整觀點,如何提升文件的易讀性,以及如何避免資訊混淆等;而在團隊開發中,如何制定一致的「規格書撰寫方式」,使其易於後續維護。 以下正文開始。
     Like  Bookmark
  • 原文連結:要件定義~システム設計ができる人材になれる記事 - Qiita 本篇介紹的主題是「需求定義到系統設計」,從為什麼需要需求定義,到如何進行這段流程,再接著說明基本設計的三個步驟,透過一步步解說,到最後完成系統設計圖。 文章架構如下: 需求定義的必要性需求定義的目的 確定需求定義的過程
     Like  Bookmark
  • hackmd-github-sync-badge 原文連結:えっ、まだChatGPT使ってんの? Bingは無料でGPT-4使えますよ! - Qiita 這篇文章主要是介紹 Bing Chat,和 ChatGPT Plus 同樣支援 GPT-4,卻能夠免費使用!然而,使用次數限制卻是一大硬傷,這點文中也有提及,但用作個人開發等用途,或許也不失為一種選擇。 此外,作者也舉出幾項實際導入開發使用的範例,可提供參考: 用於建立 Debug 配置 完成轉換(移植)腳本語言
     Like  Bookmark