2 days agoNASA API 教學 ｜使用 Python 探索宇宙。以獲得每日的太空照片為範例。✨ 目錄 - NASA API - 文件和資源 - API 的註冊和使用 - API 的查詢方式(包含回傳資料說明) - Python 程式實作 - Node.js 程式實作 - API 限制 - 結論 ✨ NASA API NASA API（National Aeronautics and Space Administration API）是 NASA 提供的一系列公開 API，可 …NASA10 min readNASA10 min read
3 days agoEdamam API 教學：輕鬆掌握食物分析的技巧。分別用 python 及 nodeJs 作範例。發現竟然沒有任何中文使用者寫 Edamam API 的教學或介紹文章，於是這篇誕生。🎉🎉🎉 （標題風格有點不一樣是因為，chatgpt 告訴我這樣下標題會比較吸引人(真的嗎( •́ω•̩̥̀ )） Edamam API Edamam API 是一個強大的食物分析工具，它可以提供食物的詳細營養成分，包括卡路里、蛋白質、脂肪、碳水化合物、纖維等。這對於健身、養生、營養師、食 …Edamam Api9 min readEdamam Api9 min read
5 days agoWindows 終端機推薦 — Windows Terminal 美化。將 Terminal 改造成你喜歡的樣子！😍Windows 終端機推薦；How to decorate Windows Terminal and edit settings. — 【前言】 之前用過前輩推薦的 Cmder，結果在 windows 上一堆 bug（回上一個指令他就會漏一堆字，或是視窗太小跑到一半他會卡死這種惱人的 bug）。 後來發現微軟內建的終端機其實就很好用了，而且客製化也很簡單，用這篇來記錄如何美化 Windows Terminal 及修改設定值。 越來越多人推薦的原因之一是，如果有安裝 Linux， 他可以直接執行 …Windows6 min readWindows6 min read
Nov 25, 20227 種在 React 引入圖片的方法。為什麼 img 的 src 無效?!為什麼 React 中，圖片的 src 沒有效果? 可能第一個要引用圖片的直覺寫法會是這樣 function App() { return ( <div> <img src='./img/pictureA.png' alt='I am A' /> </div> ) } 但這種寫法是無效的，因為 Webpack 會需要我們先將圖片引入，才 …React5 min readReact5 min read
Nov 2, 2022React 捕捉錯誤｜使用原生函式 componentDidCatch + Error Boundaries 來捕捉元件錯誤。Use React componentDidCatch and Error Boundaries to catch components’ error! — ｜前言 本篇將整理 componentDidCatch + Error Boundaries 捕捉錯誤的基本觀念及實作。(讀了官網及10篇以上的相關文章及 stackoverflow，可信度應該算高啦) 最近因為工作不得不看前人們的 code，發現大部分都以新版 react hooks 做撰寫，但發現在抓 error 的時候，會使用 class 來寫，於 …React6 min readReact6 min read
Oct 31, 2022在電腦中設定 Git 帳號及 ssh key；在一台電腦中使用多個 Git 帳號；如何更改 Git 遠端網址。多個 Git 帳號如何設定；如何更改 Git 遠端URL。 — ｜前言 在電腦中有兩個 github 帳號，一個為私人信箱，一個為公司信箱帳號，公司的 github 通常都是 private，所以就會遇到權限的問題。 最近真的被這個帳號切換的問題搞死( ´•̥̥̥ω•̥̥̥` )，明明加了 ssh key 卻還是不能 clone 專案，偷懶不想面對問題就使用 personal token 進行 clone 卻又每次都要重新登入。 Error 會長這樣: Could not read from remote repository …Git5 min readGit5 min read
Oct 6, 2022React Native 菜單｜React Navigation 底部菜單結合堆疊菜單的作法。Code for Integrating StackNavigator into BottomTabNavigator Screen.React native 同時使用底部菜單及堆疊菜單的作法。Make a react-native app with React Navigation, and combine BottomTabNavigator with StackNavigator. — 【前言 Foreword】 在 React native 最常用的套件之一 React navigation，我們可以在官網看到底部菜單的範例程式碼，也可以看到 Stack(堆疊) 菜單的範例，但如果想在同一個專案中同時使用這種兩菜單呢？ 本篇將以程式碼分段講解，大致說明需要注意的部分，懶的閱讀可以跳至最下方，將程式碼複製貼上就可以順利執行，建立最基本的菜單囉！ 【前置作業 Preparation】 建立好專案 …React10 min readReact10 min read
Oct 4, 2022React prop-types｜套件 prop-types 使用方式及應用情境。關於寫 React 不能不知道的套件 — prop-types — 【前言 Foreword】 prop-types 因為 Javascript 是弱型別的語言，在型別錯誤時不會顯示錯誤，需要藉由其他套件來處理，也就是本篇的主角 — prop-types，負責檢查 props 的值是否符合元件的規定。 而型別檢查的優點包含，有利於日後閱讀程式碼、共同協作者更快進入狀況、出現 error 時比較快找到錯誤點等。 React 在 React v15.5，prop-types 就不被包含在 …React4 min readReact4 min read
Sep 29, 2022React Native 登入登出｜實作 App 基本頁面及底部菜單。Create a basic React native App login logout page an dbottom menu. — 【前言 Foreword】 React native 的系列文章好像沒什麼人要看 ( ´•̥̥̥ω•̥̥̥` ) 這篇主要會實作 App 最基本的登入->進入主要頁面、登出 -> 回到首頁，以及結合 Context API 儲存更改用戶登入狀態。 【前置作業 Preparation】 建立完一個 React native 的專案後就可以跟著做啦，可以參考本篇 React Native 從0開始｜環境架設及建立啟動專案！ 【實作 Hands-on】 安裝相關套件 npm install @react-navigation/native @react-navigation/bottom-tabs react-native-vector-icon …React Native5 min readReact Native5 min read
Sep 28, 2022React Native + Context API｜在 React Native 中使用 useContext！use Context API in React Native in 20 lines code. — 【前言 Foreword】 這篇簡單，直接上 code! 【Code】 import React, { useState, createContext, useContext } from "react"; import { Text } from "react-native"; const FakeContext = createContext(); const FakeProvider = …React6 min readReact6 min read
