Posts

動工前的準備 因為昨天標題在畫面縮放的情況下會擋住放卡牌的地方，所以早上就先看CSS相關的網站學習並且如何在Vue專案中使用。 意外發現原來App.vue檔(放置卡牌區的元件)在<style scoped></style>定義的class雖然會套用到App.vue的<template>的元件中，但卻不影響App.vue內引入的GameBoard.vue<template>內使用相同class名稱的元素 修正重疊問題 關於排版的部分身為前端菜雞，就現學現賣使用將元件內部flex-wrap: wrap將包裹標題和卡牌區的main元素進行調整，如下所示: main { display: flex; flex-wrap: wrap; } 另外並且避免標題的狐狸圖太大，直接對包裹狐狸圖的header元素進行以下的配置， 採用 overflow: hidden; 這可以避免header內的元素超出限制範圍的部分進行隱藏。 header { padding: 1rem; display: flex; align-items: center; width: fit-content; max-height: 100px; text-align: center; overflow: hidden; } 顯示卡牌在牌桌 處理完之後想到今天好像約定要怎麼將卡牌一張張顯示在畫面，但腦袋不知道為什麼想到製作卡牌花色， 所以就使用線上工具vectr製作卡牌花色分別製作成svg檔案 https://vectr.com/design/editor/1dd3ff02-4dc1-4de6-84bb-17b9446450b8 因為我昨天刻的桌子似乎不太適合顯示一堆卡牌， 馬上詢問ChatGPT『能用HTML和CSS做出撲克牌桌的樣子嗎?』 複製得到的回應(HTML和CSS)渲染在瀏覽器上看看，發現它的作法花色其實是用字元表示。 我就放棄顯示svg在div元素上的想法，還有渲染出來的牌桌顏色、卡牌的外框也都採用ChatGPT的作法。 卡牌元件 每一張卡元件都會攜帶的資訊包含一個數字，使用0~51依序去表示梅花A至黑桃K。 另外使用布林值表示當前狀態是開牌/蓋牌，如下所示: // Card.vue const props = defineProps({ value: Number, isOpen: Boolean }); 另外也學到如果要在<script setup>中拿取屬性資料 defineProps() 需要先存在自訂義的變數，不能像 <template> 那麼自由直接取值 ，原本還想說怎麼白畫面且開發人員工具一直報Error跟我說『value is not defined』 // Card.vue const pokerValue = props.value; // 對應撲克花色符號，Ex: ♣A const content = PokerValuesMap[pokerValue].content; // 對應撲克顏色class const numberClass = PokerValuesMap[pokerValue].isRed ? 'card card-red' : 'card'; 卡片也實際使用到 :class 去決定要顯示指定的class，畢竟紅心/梅花是套用紅色。 Card.vue的樣板很簡單是因為把一些轉換顏色物件的部分移到我自訂義的uitls/constants.js進行map對照產生Card實際顯示的花色符號。 ...

前言 最終目標是做一個個人版的紙牌接龍，中途也會嘗試做一些延伸的紙牌遊戲。 遊戲的畫面預計會使用我不熟悉的前端框架 Vue3，若有充足的時間我也會結合後端去做整合， 此次參賽也是為了督促自己在前端的技術進步。 原本是想單純參加自我挑戰組， 因為曾在2014參賽第9天就中斷，所以接下來想先在Day 1設定一些目標讓自己可以達成， 過了9年後的我可不想在同個地方掛彩。 中短期目標 目前預計想完成的目標如下: 前期目標 可以玩牌的畫面 產生紙牌 拖曳紙牌 洗牌 中期目標 紙牌動畫移動 紙牌翻轉 使用前面的技術實現心臟病遊戲 後期目標 紙牌接龍 今日目標-建好專案 建立Vue3專案並啟動成功 npm create vue@latest cd ithelp-pokergame && npm run dev 2. 在新專案中建好git repo git init git commit -am 'initial' 在Github建好一個新的儲存庫 ithelp-pokergame 將本地的git庫跟Github的庫連上對應 git remote add origin https://github.com/kabuto412rock/ithelp-pokergame.git 決定聽從Github老大的main分支選擇，後來又比較奇怪的方式推上Github的Repo過程 # 先在本地建一個main分支 git checkout -b main # 砍了本地原始master分支 git branch -D master # 嘗試拖拉儲存庫 git pull # 設定本地main和遠端main分支對應 git branch --set-upstream-to=origin/main main # 乾脆直接把本地分支全部強推上遠端 git push -f 自己使用平板畫了一隻小狐狸，也替換到了畫面上，但畫面徹底跑版… 照理來說狐狸圖應該要上下對齊才對! 小結 記錄好自己的目標後，Vue建立專案和元件的方式跟React很像， 後面git的步驟只是記錄我是雷包，還好是因為空專案才可以放心執行git push -f ...

前言 參賽動力 工作經歷 第一份工作-軟體工程師 第二份工作-後端工程師 現在的工作? 參賽主題方向 結論 前言 因為要參加鐵人賽，所以比賽前想先鍛鍊自己的寫作能力， 撰寫為什麼要參加比賽的原因? 同時回顧自己開始工作後的經歷 參賽動力 從大學時期就知道有鐵人賽的存在，當初覺得自己技術不強、文筆也不夠好所以就不參加， 但回頭來看只是害怕失敗和變化而已 補充: 原來我曾經參加過2014鐵人賽，但沒搞清規則是連續30天在Day 9放棄了… c++第十二天-字串是用陣列存取 這次參賽起因是查詢技術資料的時候，意外看到今年鐵人賽又要開始了， 或許是經過社會的摩擦後，這次我不想再逃避了!! 在提到參賽主題之前，我想先說明工作後的經歷 工作經歷 第一份工作-軟體工程師 第一份是在高雄軟體園區找到的，而在之前還婉拒了一家韌體相關C++的工作， 新鮮人的履歷大致就是畢業專題和各種寵物專案結合。 名為軟體工程師，但實際工作的項目就是開發Web版的系統， 開發環境就是網頁，你沒有看錯…以現在來看就是Web版的整合開發環境(StackBlitz)， 身為一個菜鳥也是個很珍貴的經驗 可以想像成用Google Blogger一樣，寫程式就是登入工程師帳號， 如同寫文章一樣方便，但話雖如此依然需要理解HTML、CSS、JavaScript。 日常的開發就是，但畫面可以使用Bootstrap和JQuery去開發， 而公司的服務核心主要是提供客戶分析的資料，所以工作中也需要理解SQL相關的語法以及如何用平台的語法連接對應的自訂義資料來源產生圖表。 當然後端平台來源再怎麼強大，也抵不過客戶更想要靈活功能的強大，而這時往往需要寫JavaScript標準化使用者的輸入，甚至手刻一個獨一無二的時間元件也都是在工作難得的經驗。 第二份工作-後端工程師 找到這份工作前也是我在猶豫的定位是前端or後端工程師，可能因為有了第一份的經驗後， 後來在Udemy買課自學用MERN架構寫了Todo-Platform 在開發的過程中讓我確定想成為後端工程師，當然這份作品也成了我第二份工作的敲門磚， 那時還被面試官問說你前端寫的還不錯，怎麼會想投後端工程師? 我還很誠實地回應是CSS框架夠好>口< 那時使用的便是 daisyUI ，官網的範例都蠻清楚的(適合喜歡撿現成美感的朋友) 話題扯遠了! 在這間後端開發是使用NodeJS的 ExpressJS，後端工程師需要先(後)寫API文件， 中期還引入Jira進行專案管理，需要工程師根據PM開的Story 開任務票、估時數。 這份經歷讓我體驗到前後端分離的開發，系統事前的規劃、後端/前端工程師/PM之間的溝通，或許是同事比上間多很多才有的分工合作，甚至還有QA的存在，這也是我在上間較小公司難以想像的! 後端部屬的部分內部是用aaPanel(江湖名稱: 寶塔)，對外部屬就不提囉，我相信很多公司都有自己的部屬方式。 畢竟我只是想分享經驗，而非洩漏機密! 這點非常重要! 技術總是層出不窮，身為工程師也只能適應變化 by 我 現在的工作? 待業，規律生活鍛鍊身體…還有學習新知?! 或許是慣性思維在後端，即使離職後我在Hahow上 Java Spring Boot課程，學習其他工程師是如何利用成熟的框架是去開發/測試API，畢竟ExpressJS的架構有點太無主見，反而需要花費更多心力在更多後端庫的結合上 參賽主題方向 在上份工作中， 身為後端工程師不太有機會去寫前端， 而是花更多時間去開發API、確認架構、資料等等， 即使撰寫網頁往往也只是利用最純粹的HTML和JavaScript做個展示 因為玩了手機App在Netflix上的接龍遊戲，想試試看我能不能用 不熟悉的語言、領域，製作Web版的我自己的接龍遊戲，若有時間也想結合後端的部分進行實作， 但這次想從前端開始著手製作小遊戲!預計會採用不熟悉的Vue3開發專案，希望也能成為下個敲門磚。 結論 打算報名主題 SideProject30 ，標題就暫定 毫無自信的開發Web遊戲接龍-成為創造龍的英雄之路 ...

前言 距離上一篇文章使用Docker建立Nodejs開發環境範本 已經有1年啦! 那時竟然還擔心部落格太多文章，Github page是否會被限制 Node.js (Express.js + MySQL Server) 建置流程(快速克隆 -> 趕時間) 直接使用git clone語法下載範例 $ git clone https://github.com/kabuto412rock/node-demo.git --branch express-mysql --single-branch 啟動服務、關閉服務 # 進到目錄底層 $ cd node-demo # 啟動Docker服務 (node-demo) $ docker-compose up -d # 停止Docker服務 (node-demo) $ docker-compose down 相對上篇文章的差異 使用sequelize-cli進行Sequelize的設定，畢竟手寫migration、seeds太累 docker-compose.yaml多加MySQL容器、Adminer容器 express-mysqldb: image: mysql:8.0 # WARNIGN:正式環境請不要直接使用原生密碼，這只是開發偷懶用 command: --default-authentication-plugin=mysql_native_password restart: always ports: - "3308:3306" environment: # root的密碼 MYSQL_ROOT_PASSWORD: PyoA2hGpSDQordaDAbuiQIIDS # 預設建立的DB名稱 MYSQL_DATABASE: mydb # DB使用者的帳號 MYSQL_USER: dbuser # DB使用者的密碼 MYSQL_PASSWORD: youiIIDSA2hGpassword my-app資料夾可以注意到config/config.json的host值與MySQL容器名稱相同，這是因為容器的hostname預設與名稱相同，其他password等設定可以參考上面對照 { "development": { "username": "dbuser", "password": "youiIIDSA2hGpassword", "database": "mydb", "host": "express-mysqldb", "dialect": "mysql" }, // 略... } 結語 還好當初有在blog的repo設定好Github Aciton和寫README備忘，才可以像現在簡單git push一下就能生成新文章。 ...

前言 因為同事目前使用動態載入資料夾內多個程式檔案時，最後由一個特定檔案輸出，但VSCode編輯引用特定檔案的程式碼時，無法看到相對應的智能提示、引用路徑 我手上的NodeJS專案也有類似的例子，比如說多個Model檔定義在一個models資料夾， 最後統一由models/index.js做查詢檔案動態載入所有Model檔案，最後使用任一Model時只需要引用index.js 好處 只要在models新增一個新Model檔，不用特別修改index.js 需要任一Model時只需要引用index.js 壞處 失去了開發時可以享受靜態引用的VSCode提示(AutoComplete、Intellisense) 所以問題是如何保持好處且消除壞處 思考路境 動態載入不會被VSCode支援提示是因為Intellisense只支援靜態分析， 若改為添加靜態引用就失去原本的動態載入的方便。 除非添加靜態引用這件事本身是自動的… 解法 使用腳本生成靜態引用，如果行得通甚至可以使用類似nodemon去watch特定資料夾內的檔案變化，達到自動生成靜態引用的功能。 範例 https://github.com/kabuto412rock/gen-static-import