猴子Ben不見

Nuxt3 開發者工具 / Nuxt3-Devtools前言就在二月上旬，Nuxt 大佬 antfu (Anthony Fu)，發佈了Nuxt3 開發者工具（nuxt-devtools），可以讓我們這些 Nuxt 開發者，在開發中有更好的體驗和及時的追蹤。 版本限制nuxt-devtools釋出前，nuxt 發行正式版一段時間了，所以nuxt-devtools有一些版本的限制： Nuxt DevTools requires Nuxt v3.1.0 or higher. 只要是在 Nuxt v3.1.0 以上的版本，皆可以安裝，也可以直接進行 Nuxt 更新，更新到最新的版本。若要更新，可以使用 Nuxt 內建的函式庫 Nuxi 來更新。 1npx nuxi upgrade 安裝方式簡短介紹nuxt-devtools官方文件有提供兩個方式安裝，這邊簡單的用條列式，分析一下兩個方式的差異： 使用 nuxi 指令依據各 Project 啟動1.1 使用 nuxi 指令就可以開啟1.2 是依照 Project 來執行 nuxt-devtools 的，不會因為開啟後，所有 nu ...

Vue3 v-html / Nuxt3 v-html / Css 深度選擇器Vue v-html最近在接公司前後台資訊，其中在編輯商品時，是使用CKEditor5這個套件進行編輯的，存在資料庫的內容就會是 HTML 標籤語言，如下： 1'<p><a href="/">商品描述商品描述</a></p>' 在做 Vue 前端時，就不能使用{{}}大括號在模板語言中直接使用，因為字串中包含實體字符，至於關於實體字符可以參考這篇。 那這邊馬上來實際運用一下：父元件會傳 productDetail 這個 props，定義好 props 及預設值後，我用一個 computed 先進行處理，CKEditor5 在嵌入 iframe 影片時，要做一些處理，因為 CKEditor5 轉換出來的 HTML 在前端顯示不出來。那data_processEmbedTag就是處理後的字串。 1234567891011121314<script setup l ...

Vue 實作 Google reCAPTCHA / Google 非機器人驗證前言因為工作上的需要，所以要來研究 Google reCAPTCHA，公司是用 Vue，所以會來用 Vue 來實做看看，後續看看能不能整合進去公司的 Nuxt3 的前台。最下面有本次實作的範例檔案，有需要可以直接取 XD Google reCAPTCHA因為網站安全性問題，或是要防止機器人來到你的網站，佔用你的伺服器空間，所以很多網站都會連接 Google reCAPTCHA，來讓 Google 幫你檢驗，當前使用者是不是機器人~這功能應該很常見，想必大家一定有看過一個勾勾旁邊是我不是機器人，或是一個九宮格請你選取題目指示的圖片，這些都是 Google reCAPTCHA 的實作。Google reCAPTCHA 主要有以下幾種： google reCAPTCHA v2 會有一個核取框，問你是不是機器人，在 google 的檢查機制下如果覺得你是機器人，就會出現九宮格選取框，再來依照題目的要求選取即可。 google reCAPTCHA v3 全在背景執行，google 會給當前使用者進行評 ...

For Front-End LearningHTML 行內元素&區塊元素 Css Css 預處理器 Pre-procesorCSS 選擇器 SelectorCSS 權重CSS Box ModelCSS Reset / Normalized網上推的 CSS 面試題目 每一個瀏覽器在定義每一個HTML標籤時用的style不一樣，會出現你的應用程式前端在各個瀏覽器顯示出來的結果可能不一樣，所以製作出reset.css，強制讓Browser的基本屬性變為你設定的值，讓不統一的地方一致，缺點是不彈性。所以後續解決這個問題，才多了CSS Normalize去繼承Browser原有的CSS屬性，再去做加法。 哪種CSS會被蓋掉、哪種CSS權重比較重，在同樣指定的CSS上，哪一個會被套用。簡單來說important>inline-style>id>class=attribute=psuedo-class>html-element。 html tags中的box element，由外往內有margin、border、padding和co ...

Nuxt3 簡介Nuxt3 template / Nuxt3 starter一個自製的 nuxt3 template nuxt3 stable tailwindcss pinia & pinia-plugin-persistedstate i18n(@intlify/nuxt3) and store in pinia-persist simple template for page/layout/error Description(簡述)：Nuxt3 是以 Vue3 為基礎，用來在單頁應用程式（SPA, Single Page Application）上進行伺服器渲染（SSR, Server Side Render）。專案架構打包工具支援 webpack 5 和 Vite，且使用 Vue-Router 來管理客戶端（Client Side）的路由。但目前版本還在釋出版本候補（RC, Release Candidate），代表還相對不穩定，現階段比較建議使用 Npm、Yarn，其他套件管理程式（Package Manager）的支援度還不 ...

前言俗話說的好「不聽老人言，吃虧在眼前」，物件導向程式設計的五個基本原則是早期程式開發就存在的原則，既然能套用到至今，代表一定有它的道理，那今天就是要來窺探其中的奧妙（？這些原則都同時被遵守時，它們可以使一個軟體更容易進行維護和系統的擴充變得更加彈性。那我們就來看看這些原則吧~ SOLID為物件導向的五大原則 S : Single Responsibility Principle O : Open Close Principle L : Liskov Substitution Principle I : Interface Segregation Principle D : Dependency Inversion Principle Single Responsibility Principle 單一職責原則說明一個類別（class）只能負責專一的一種職責。換句話說就是，一個類別（class）中的所有，只能對一種角色負責。 舉例來說，今天郵差要配送一個包裹： 123456789public class 郵差{ 取得聯絡資訊(){}; 撿貨()
...

前言本篇要來介紹物件導向的四大概念，那就來簡單介紹物件導向是怎麼樣的概念~物件導向是將大部分的程式碼變成像是物件的方式進行呈現，程式互相會是以物件的方式進行溝通。物件跟物件之間的溝通，可以想成是人與人進行溝通，每個人都會有姓名、性別、年齡等等，這些在物件就是屬性（Attributes）；每個人也都會有技能或是動作，在物件我們就稱它為方法（Methods）。一個物件會由屬性跟方法所組成，但這個時候你可能會有一些困惑，如果人是一個物件，但有可能我有一些事情是不想要給別人知道的，那該怎麼辦？物件的屬性和方法都有它的可視性（Visibility），可以使比較敏感的資料不被揭露，達到資料隱藏（Information Hiding）的效果。簡單的介紹完物件導向的基本後，就來介紹物件導向的四大基本概念吧~ 物件導向四大基本概念 封裝（Encapsulation） 抽象（Abstraction） 繼承（Inheritance） 多型（Polymorphism） 封裝（Encapsulation）通常一個物件會有一些讀寫的限制，像是public或是private等等的限制。封裝是對一個物件的規範，物件 ...

前言很多人前端第一個接觸的一定就是Html和CSS，那我第一次也是高中的時候，用著作業系統內建的記事本寫著Html和CSS~XD那時想知道一個新的Html Element或是想套一個新的CSS樣式，都是直接上Google找的，也很少在看書，所以學的算是零零散散的。之前別人問起相關知識時，也說不出個專有名詞或要等他描述後，我才知道，所以就想說網路上，有沒有一些挑戰或是帶入遊戲可以邊學習的網站，除了可以學習到基本知識外，還有一些簡單的解釋，且在最後做完後，還可以用這個網頁來證明說，我有這些技能XD。這篇就是介紹日前找到關於CSS的小挑戰，但其實可以當作一個學習知識的遊戲~~ 介紹開始CSS DinerCSS有很多選擇器（Selector），所以就會有很多語法。有些語法你可能看都沒有看過，但很多實務狀況就會剛好需要，在不知道這些選擇器時，你可能已經用了id或是其他方式，改了CSS的樣式。了解或學了這些選擇器，他們一定會在日後幫你的（ 誤 CSS Diner 主要分成三個區塊： 白色區塊：檢視目前題目的需求，會有正在動的元素，目標就是用CSS選擇器選取到他們~ 紅色區塊： 左邊是撰寫CS ...

前言如果有在做開發或是軟體的研究，或是研究開放的 Lib，都會有接觸到版控這件事吧！那你可能就有 Github 帳號，如果有做一些公開的 Repository，你的 Github 帳號有機會被別人看到。在你的帳號頁面(https://github.com/你的帳號)，就可以填入你自己的簡單個人資料。但如果想要分享更多資訊給別人知道該怎麼做呢？ Github 有提供一個特別的 Repository 給每個帳號，讓使用者可以自訂想要分享的資訊給大家看到。那這個 Repository 就是在自己帳號下創建一個跟帳號名字一樣的 Repository。例如：我的 Github 是 ben890524，那我的 Profile Repository 就會是ben890524/ben890524。那接下來就會有簡單的圖文來新增你自己的 Profile Repository！ 新增流程步驟一首先先到Github然後登入你的帳號。 步驟二目標是新增一個新的 Repository，所以點擊圖片中 New 的按鈕來新增新的！ 步驟三進入到新增 Repository 的設定中。在Repository name那 ...

這是一篇Hexo自動產生的文件Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new "My New Post" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment