Category: Coding

  • Remix Nested Route（嵌套路由） Explained

    Remix Nested Route（嵌套路由） Explained

    —

    by

    Gabriel JC
    in , , ,

    對剛開始學 Remix 的人，他的路由系統應該會看得很辛苦，沒關係我也是，所以就寫了這篇來記錄一下該怎麼好好的寫好這些路由。 Reference: https://remix.run/docs/en/main/components/outlet、https://remix.run/docs/en/main/file-conventions/routes解釋影片：https://www.youtube.com/watch?v=QONJCXsZt58Route Demo：https://interactive-remix-routing-v2.netlify.app Remix Route 名詞解釋 1. Route 在你的 route 裡面，長 your_route.tsx 會自動產生一個 route，可以從 /your_route 進入。在 Filing 系統中，你的檔案夾名稱就會是 route，而 Remix 會自動取得檔案夾下面的 route.tsx…

  • 2024 為什麼我開始學 REMIX 而不是 NEXT.JS？

    2024 為什麼我開始學 REMIX 而不是 NEXT.JS？

    —

    by

    Gabriel JC
    in , , , ,

    這篇會介紹 Remix 的主要特色和入門知識，包含 Loader、Action、Outlet。 Reference: https://remix.run | https://nextjs.org Why Remix? Remix 的特點就是一個檔案就可以處理全端資料，Remix 會根據 function 名稱幫你決定他該在前端還是後端。以往建立一個 Application，我們必須建立 HTML/CSS/JavaScript 的前端頁面，不論是用 React/Vue/Angular 或其他函式庫或框架，然後另外寫後端 API 讓前端 Fetch，JavaScript 提供 Node.js，Python…

  • How Simple Error Handling in RemixJS V2!

    How Simple Error Handling in RemixJS V2!

    —

    by

    Gabriel JC
    in , , , ,

    This is a note to record REMIX Error Handling. CatchBoundary in REMIX v2 no longer exists, it becomes true of isRouteErrorResponse(useRouteError()). https://remix.run/docs/en/main/route/error-boundaryhttps://remix.run/docs/en/main/start/v2#catchboundary-and-errorboundary Structure In REMIX…

  • Easy Connecting Cassandra in Docker with NodeJS

    Easy Connecting Cassandra in Docker with NodeJS

    —

    by

    Gabriel JC
    in , , ,

    Reference: https://hub.docker.com/_/cassandra Pull and Run Cassandra in Docker This will connect local port to docker container port on 7000, 7001, 7199, 9042, and 9160, which…

  • [更新] 透過 WordPress 架設電商網站，並串接管理後台

    [更新] 透過 WordPress 架設電商網站，並串接管理後台

    —

    by

    Gabriel JC
    in , , , ,

    這篇稍微更新一下半年後接觸了許多前後端跟雲端運算後的想法 參見 iThome 鐵人賽文章：https://ithelp.ithome.com.tw/articles/10316189 之前在 2023 iThome 鐵人賽寫了一系列 30 篇關於 WordPress 的文章，作為開始紀錄科技學習的起點，講述從取得網域、架設伺服器、安裝 WordPress，到將 WooCommerce 訂單 Webhook 至 Ragic! 的過程。 總之如果重來一次，我會 —————————— 使用 GCP 架設伺服器 可以使用…

  • OpenAI Whisper + Python 轉換 GoodNotes 音檔

    OpenAI Whisper + Python 轉換 GoodNotes 音檔

    —

    by

    Gabriel JC
    in , ,

    最近期末考，很多課都只是錄音沒在上課，有些老師講話又很慢，所以剛剛好來玩玩 OpenAI API Reference: https://platform.openai.com/docs/guides/speech-to-text/quickstart Whisper by OpenAI GitHub: https://github.com/GJC14/whisper Whisper 是 OpenAI API platform 的其中一個 Models，其他的還有比較知名的文字、圖像模型 (Chat)GPT、DALL·E。雖然目前也有許多團隊有自己的 Speech to text AI，像是 Google Cloud Speech-to-Text、SpeechText.AI、Descript，但因為…