Software Animal

Kattis 練習程式解題的好所在

有貓不推嗎？ Kattis 是一個練習程式解題的網站，它是集結各種程式比賽題目的搜集站。算是一個精華懶人包的地方，加上網站設計簡潔，還支援多種程式語言解題（高達 22 種，最近很夯的 Rust 也有唷！）因為程式解題，通常都需要一個審判系統（自動批改答案，確定所提交的程式有正確執行並答案相符）所以這隻法官貓就出現啦～解題流程非常輕易上手，基本上就是題目，以及一個提交鍵就結束了！各種程式語言的解題範例可以參考這邊： Help 這邊要按照網站所用的輸入輸出的方式作答，基本上就沒問題了 PHP 讀取測試資料方式 while (fscanf(STDIN, '%d%d', $number1, $number2) === 2){ // Solve the test case and output the answer } PHP 輸出答案方式 fprintf(STDOUT, "%d\n", res); 解題結果題目所有人的解題狀態統計可以看哪個程式語言最快特定程式語言解題情況透過以上結果分析，讓自己更進步，也會發現一山還有一山高啊～但是當自己寫出來的方法又快又好的話，就會有滿滿的成就感！排名系統全世界排名還有評分 0050 前十名大學排名剛好台灣只有十所大學有人解題（排名也是總合同大學的人排名）是說實踐剛剛好第十名就上榜啦，只有一個人（就是我啦 XD) 每天看著自己慢慢解題，慢慢爬升名次很有成就感，而且會讓人有動力繼續解題下去。未來網站也會有解題的文章，有興趣的同學再多多回來討論～也歡迎交流各種題目或者解法！

Hugo 應該也要可以留幹話吧！

這裏有這麼多好文章，不用鼓勵一下嗎！現代人已經脫離不了各種社群媒體，一定要在各種時事新聞底下留言刷個存在感，或者寫一些幹話讓人會心一笑 XD Hugo 內建就有對應能用 Disqus 來做留言功能溜申請 Disqus 的方式應該不難，就自行申請溜：官網在這申請完帳號後，會得到一個 Shortname 這會用來對應 Hugo 的參數。設定 Hugo 變數 config.yml disqusShortname: xxxxxxxxxxxxxxx # 啟用留言功能 params: comments: true 設定留言板塊這邊參考官方的範例就好：Conditional Loading of Disqus Comments layouts/partials/comments.html <div id="disqus_thread"></div> <script type="text/javascript"> (function() { // Don't ever inject Disqus on localhost--it creates unwanted // discussions from 'localhost:1313' on your Disqus account... if (window.location.hostname == "localhost") return; var dsq = document....

Hugo Google Adsense

透過瀏覽廣告支持創作者 Google 就是透過廣告起家，自家的 Google Adsense 廣告服務也很成熟，設定也不難。唯獨會花一些審核時間，以及記得網站多一些內容才能順利通過審核唷。申請步驟提交網站資料至 Google 前往 Google Adsense 填寫資料新增對應廣告程式碼至網站上 layouts/partials/adsense-google.html <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client={{ .Site.Params.GoogleAdSenseClient }}" crossorigin="anonymous"></script> config.yml params: GoogleAdSenseClient: "ca-pub-0000000000000000" layouts/_default/baseof.html <head> {{- partial "head.html" . }} ... {{ if .Site.Params.GoogleAdSenseClient }} {{ partial "adsense-google.html" . }} {{ end }} ... </head> 審核通過後設定廣告投放條件 Google Adsense 會提供基本設定檔案 ads.txt...

Hugo Google Analytics 設定

Google Analytics 現代的網站基本上都必備 Google Analytics (GA) 來分析流量，Hugo 當然也都整合好了。設定 GA 變數 config.yml googleAnalytics: G-XXXXXXXXXX 加上一個重複利用的版面 layouts/partials/analytics-gtag.html  <script async src="https://www.googletagmanager.com/gtag/js?id={{ .Site.Params.GoogleAnalyticsID }}"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '{{ .Site.Params.GoogleAnalyticsID }}'); </script> 網站通用版面加上 GA 追蹤複製 Hugo 預設版面複製一份檔案，覆蓋預設值用 layouts/_default/baseof.html (路徑需要相同) 加上 GA 設定...

設定網站 Logo

Logo 是眾多分頁的識別物不知道大家都是怎麼使用瀏覽器逛網站的呢？我是都會開很多分頁啦，這樣就會因為螢幕寬幅的限制，分頁最後都只會剩下 ico (也就是網站設定的 Logo)。所以這時候一個好是別的 Logo 就能夠馬上讓我找到我要去的那個分頁啦，重要 +100 分設定方法 config.yml params: assets: favicon: "/favicons/favicon.ico" favicon16x16: "/favicons/favicon-16x16.png" favicon32x32: "/favicons/favicon-32x32.png" apple_touch_icon: "/favicons/apple-touch-icon.png" favicon: 最主要的 Logo 檔案 favicon16x16: Logo 檔案的 16x16 大小，如果設備特殊設定會讀取這個檔案 favicon32x32: Logo 檔案的 32x32 大小，如果設備特殊設定會讀取這個檔案 apple_touch_icon: 專門給蘋果產品讀取 Logo 檔，可能會出現在像是 Safari 的喜愛項目顯示

界門綱目科屬種？

分門別類，讓讀者更好找到文章透過分類，讓文章更井然有序透過標籤，可以學習到更多資訊透過清單，看看有多少寫作的日子設定頁首顯示分類三兄弟吧！ config.yml menu: main: - identifier: categories name: 文章分類 url: /categories/ weight: 10 - identifier: tags name: 特定標籤 url: /tags/ weight: 20 - identifier: archives name: 所有文章 url: /archives/ weight: 30 項目說明 identifier: 網站對應功能名稱 name: 顯示名稱 url: 網站功能要連結到哪 weight: 這是順序的意思，數字越小越前面（越左邊）所有文章（archives）這是內建沒有的功能，所以要特別設定版面新增所有文章的版面新增 content/archives....

設計一下部落格簡介吧！

部落格簡介是靈魂啊！我使用的是這個佈景主題： PaperMod ，有支援簡介功能先來設定 Hugo 基本設定因為習慣 yaml 格式，所以我的設定檔為 config.yml (另外也能用 toml) config.yml baseURL: "https://software-animal.space/" languageCode: "zh-tw" title: Software Animal theme: "PaperMod" 這些設定分別是 baseURL 部落格的網址 languageCode 預設部落格語言 title 部落格名稱 theme 部落格主題再來設定部落格簡介延續設定 config.yml params: homeInfoParams: Title: "嗨，這裡是軟體動物" Content: "這不是指什麼章魚、百變怪（？）之類的，而是在講電腦的軟體程式～ \\ 一切跟軟體有相關的東西都會在這裡，包含：程式語言、演算法... \\ 也會有軟實力的相關事務，像是敏捷開發、軟體工程師的肝苦談 XD" 這邊 \\ 作用為強制換行同場加碼：設定社群連結還是繼續設定 config.yml params: socialIcons: - name: linkedin url: "https://www....

Hugo 起步走

什麼是 Hugo ? 網路上很多介紹的文章，就不用我多贅述囉～歡迎參考 Hugo 官方網站當然現在你（妳）正在看的這個部落格就是用這個技術架起來的唷！一切非常簡單、輕鬆，三步驟就能架起來了： 1. 先用萬能的 Homebrew 安裝 Hugo brew install hugo 如果還沒有裝 Homebrew 的朋友請往這邊走：一行指令裝起 Homebrew 確認一下是否成功安裝？ hugo version # hugo v0.98.0+extended darwin/arm64 BuildDate=unknown 2. 想一個部落格資料夾名字，並且加上基本設定 hugo new site myblog # Congratulations! Your new Hugo site is created in xxx/myblog. 一切都是空白的，找一個喜歡的主題吧！ Hugo 主題這裡有 cd myblog git init git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke 讓部落格套上主題 echo theme = \"ananke\" >> config....

API 網址這樣設定有夠棒！

網址是 API 的門面，大家使用 API 的第一步就是要看它，所以第一眼就要讓人就知道這隻 API 在做什麼？甚至因為遵循標準（目前 REST 是主流），可以類推 API 應該會有什麼功能等等。網址規劃的好，未來隨著需求變化也比較有彈性能夠修改 / 擴充。網址設定跟著這些原則走，輕鬆沒煩惱 1. 命名簡單明瞭 https://api.test.com/products/ 1234 這個網址代表是一個 api 的位置，這會取得編號 1234 的商品資料 (products) 2. 不要使用過度簡化的單詞 https://api.test.com/ p /666 這邊 p 代表是 products 嗎？還是 plan ? 3. 以小寫英文為主因為有些系統會識別大小寫英文（代表不同的東西：例如： Products vs. products 視為不同）另外，國際主流語言還是以英文為主（畢竟電腦也是美國發明的～） 4. 避免使用自定義名詞 https://api.test.com/free_choice/555 餐餐自由選？ https://api.test.com/tuango/888 團購商品？ 5. 使用複數名詞命名這個牽涉到 REST 的設計原則：如果沒有帶識別詞（例如：編號）就等同於取得列表 https://api.test.com/products 取得商品列表（一坨商品） https://api.test.com/products/1234 取得編號 1234 的商品資料（一個商品）...

API 測試 ⏤ 新功能上線更安心！

隨著各種行動裝置與各式各樣的載體出現，API 讓前後端程式開發人員能夠更快速串接新功能，又能夠在不同裝置上帶給使用者不一樣的體驗。每每當程式要上線前，總是讓開發人員既期待又怕受傷害，一方面是辛辛苦苦的孩子終於要出世了，一方面又會怕會不會有新的 BUG 出現（我養 BUG，BUG 養我）這時候測試就很重要啦，既能夠保證功能如需求完成，又能保護下次新加功能不會改 A 爛 B。好的 API 讓前端輕鬆串接，專注呈現各式各樣的體驗；後端只需要專注於保證穩定功能的輸出，大家開開心心～ API 沒寫好，輕則資料呈現錯誤，重則 APP 閃退負評滿點… API 測試從這三個地方著手，一定面面到位 1. 功能：是否完成 API 主要的目的以取得商品資料來說，輸入了商品編號作為查詢必要參數，是否有正確回應商品資料？回應的商品資料格式是否正確？是否支援像是顏色等選填參數？如果沒有此商品，API 是否有正確回應找不到商品的錯誤？或者是否有非預期的情況發生？ ⚠️ 測試通常都著重於正確的情況，但錯誤的情況也是很重要，至關使用者體驗與是否能夠透過此方式主動發現問題另外，選填參數也是常常會忽略的地方，例如：頁數、每頁幾個、日期，這些是否有符合規定？數字是否負數？起始日期是否小於結束日期？ 2.性能：是否能夠"及"時處理完？這邊特別強調是及時，因為每隻 API 對於速度的要求不一，是否能夠在容許的請求時間內回應決定在使用情境上。通常合理的要求回應時間多半低於 500 毫秒 (ms)。 3.安全性：牽涉到需要存取權限的 API 是否有驗證機制？多半而言每個人只能夠查詢自己的個人資料，別人必須無法存取。那 API 應該透過什麼方式來實現權限控管？驗證機制會是使用什麼方式？延伸說明 API 由三個部分組成 Header 通常包含常用且通用的參數：api-key, token, language … URL (Method) 存取的位置，包含取用的方法：GET, POST, PUT, DELETE … Body...