vue3 在父層取得子組件的 ref DOM屬性 2022-05-31/0 評論/在： vue, 線上學習 /通過： admin我們在下面上要取得某 DOM 元素的時候，會先宣告一個 ref 常數，然後在元素的 html 上面加上 ref 屬性。 閱讀更多 https://penueling.com/wp-content/uploads/2020/11/vue.png 300 300 admin https://penueling.com/wp-content/uploads/2021/04/penueling-logo-full.png admin2022-05-31 18:21:432022-05-31 19:12:14vue3 在父層取得子組件的 ref DOM屬性
react 輪播圖套件 2022-05-28/0 評論/在： react, 線上學習 /通過： adminmaterial ui 框架沒有提供輪播圖 component，需要另外安裝套件，這邊介紹一個我常用的套件React Slick，剛好他也有出 react 版本。 閱讀更多 https://penueling.com/wp-content/uploads/2020/11/ReactNative.png 300 300 admin https://penueling.com/wp-content/uploads/2021/04/penueling-logo-full.png admin2022-05-28 13:12:522022-05-28 13:24:03react 輪播圖套件
WordPress 如何翻譯主題、外掛文字？ 2022-05-24/0 評論/在： wordpress, 線上學習 /通過： admin我們安裝的外掛很多時候會自動幫我們寫上一些文字（例如「確定」、「取消」），這些文字是外掛內部指定的，尤其是安裝國外的外掛時，這些文字都是英文並且沒有辦法修改，這時候就可以安裝 Loco Translate 外掛來幫助我們翻譯文字。 閱讀更多 https://penueling.com/wp-content/uploads/2020/11/wordpress.jpg 300 300 admin https://penueling.com/wp-content/uploads/2021/04/penueling-logo-full.png admin2022-05-24 17:05:502022-05-24 23:44:25WordPress 如何翻譯主題、外掛文字？
使用 cloud build 把網站部署到 cloud run 2022-05-17/0 評論/在： docker, gcp, 線上學習 /通過： admincloud run 是可以把你 build 好的 image 啟動，並且給你一個已經有 https 的網址輸出使用。也就是說假設你有個不論是前端靜態網站、後端服務，都可以部署到 cloud run ，並且費用非常便宜，0.幾塊美金一個月而已。 閱讀更多 https://penueling.com/wp-content/uploads/2020/11/google-cloud.jpg 300 300 admin https://penueling.com/wp-content/uploads/2021/04/penueling-logo-full.png admin2022-05-17 09:31:342022-05-17 09:48:34使用 cloud build 把網站部署到 cloud run
在 gce 中架設 wordpress 網站 2022-05-16/0 評論/在： docker, gcp, wordpress, 線上學習 /通過： admin中小企業在網站架設的解決方案上，通常會在一個主機上安裝多個網站，這篇教學使用 docker-compose + nginx 架設 wordpress 網站在 google compute engine 上。 閱讀更多 https://penueling.com/wp-content/uploads/2020/11/google-cloud.jpg 300 300 admin https://penueling.com/wp-content/uploads/2021/04/penueling-logo-full.png admin2022-05-16 14:48:032022-05-20 13:37:05在 gce 中架設 wordpress 網站
在 vm ubuntu 安裝 docker 2022-05-16/0 評論/在： docker, gcp, 線上學習 /通過： admin使用docker的目的就是可以方便在任何環境部署服務，所以不管在哪個主機都要先學會如何安裝 docker。 閱讀更多 https://penueling.com/wp-content/uploads/2020/11/docker.jpg 300 300 admin https://penueling.com/wp-content/uploads/2021/04/penueling-logo-full.png admin2022-05-16 13:32:392022-05-16 13:56:42在 vm ubuntu 安裝 docker
使用 docker 架設 wordpress 網站 2022-05-13/0 評論/在： docker, wordpress, 線上學習 /通過： adminwordpress 網站不是靜態網站，因為有部落格系統需要用到 mysql 資料庫，所以我們並不能只建立一個 container 就架設 wp 網站，當要同時啟動一個以上的 container 時，就會需要用到 docker-compose。 閱讀更多 https://penueling.com/wp-content/uploads/2020/11/docker.jpg 300 300 admin https://penueling.com/wp-content/uploads/2021/04/penueling-logo-full.png admin2022-05-13 15:37:062022-05-14 11:37:59使用 docker 架設 wordpress 網站
Material-ui Textfield select 組件搭配 react-hook-form 無法指定defaultvalue 問題 2022-05-11/0 評論/在： react, 線上學習 /通過： admin如題，使用Textfield的select組件時，我們會想預先設定已選取的項目，但是我們指定了，畫面上的input卻還是沒有選起來的樣式。 閱讀更多 https://penueling.com/wp-content/uploads/2020/11/ReactNative.png 300 300 admin https://penueling.com/wp-content/uploads/2021/04/penueling-logo-full.png admin2022-05-11 11:42:112022-05-11 11:59:48Material-ui Textfield select 組件搭配 react-hook-form 無法指定defaultvalue 問題
使用 ThirdWeb 製作自己的 NFT Mint Site 2022-05-03/0 評論/在： javascript, react, 線上學習 /通過： admin搭上NFT熱潮，發現有一些網站開始主打不用自己寫智能合約，也可以製作NFT，ThirdWeb就是其中一個。 閱讀更多 https://penueling.com/wp-content/uploads/2020/11/ReactNative.png 300 300 admin https://penueling.com/wp-content/uploads/2021/04/penueling-logo-full.png admin2022-05-03 09:16:542022-05-03 11:27:02使用 ThirdWeb 製作自己的 NFT Mint Site
小狐狸 metamask 如何領取 Rinkeby 測試用以太幣 2022-04-22/0 評論/在： blockchain, 線上學習 /通過： admin如題，我們要開發智能合約的時候，不論是要部署合約，或是修改鏈上資料，即使你是在測試鏈上操作，他還是會意思意思要扣你以太幣喔！這樣感覺比較真實，你也會知道你真實部上去之後，每一步驟或是部署時會被扣多少gas。 閱讀更多 https://penueling.com/wp-content/uploads/2022/04/metamask.png 512 512 admin https://penueling.com/wp-content/uploads/2021/04/penueling-logo-full.png admin2022-04-22 16:30:272022-04-22 20:09:34小狐狸 metamask 如何領取 Rinkeby 測試用以太幣
使用 docker 部署純 html 網站 2022-04-19/0 評論/在： docker, nginx, 線上學習 /通過： admin如題，有時候我們做簡單的網站不會用到javascript框架，但是還是可以使用docker部署。 閱讀更多 https://penueling.com/wp-content/uploads/2020/11/docker.jpg 300 300 admin https://penueling.com/wp-content/uploads/2021/04/penueling-logo-full.png admin2022-04-19 22:13:022022-04-19 22:13:29使用 docker 部署純 html 網站
react 使用 firebase 串接 facebook 或 google 登入 2022-04-15/0 評論/在： react, 線上學習 /通過： admin串接facebook或google登入，如果沒有使用firebase的話，可以直接引入js sdk。但是如果是要使用firebase整套驗證，就要在專案中安裝firebase套件。 閱讀更多 https://penueling.com/wp-content/uploads/2020/11/ReactNative.png 300 300 admin https://penueling.com/wp-content/uploads/2021/04/penueling-logo-full.png admin2022-04-15 09:52:352022-04-15 11:21:46react 使用 firebase 串接 facebook 或 google 登入
next.js 串接 google recaptcha verify2 invisible 2022-04-12/0 評論/在： react, 線上學習 /通過： admin其中v2版本又分為：checkbox（就是會有一個勾勾要打勾選我不是機器人）、invisible（從背景打api驗證送給後端） 閱讀更多 https://penueling.com/wp-content/uploads/2020/11/google-cloud.jpg 300 300 admin https://penueling.com/wp-content/uploads/2021/04/penueling-logo-full.png admin2022-04-12 09:47:562022-04-12 11:11:46next.js 串接 google recaptcha verify2 invisible
在 next.js 中使用巢狀的 layout 2022-04-07/0 評論/在： react, 線上學習 /通過： admin通常我們的網站會有Topbar、Sidebar、Footer之類的，在next.js專案中我們會把這樣的layout寫在一起： 閱讀更多 https://penueling.com/wp-content/uploads/2020/11/ReactNative.png 300 300 admin https://penueling.com/wp-content/uploads/2021/04/penueling-logo-full.png admin2022-04-07 16:13:302022-04-07 16:59:59在 next.js 中使用巢狀的 layout
使用 Doceker 打包前端 next.js 專案 2022-04-07/0 評論/在： gcp, react, 線上學習 /通過： admin使用next.js製作網站不外乎就是為了ssr這個重點，因為一般的SPA網站像是純react或vue，是沒有seo的，也就是當我們做好網站，google搜尋引擎是搜尋不到你的內容的。 閱讀更多 https://penueling.com/wp-content/uploads/2020/11/ReactNative.png 300 300 admin https://penueling.com/wp-content/uploads/2021/04/penueling-logo-full.png admin2022-04-07 15:41:292022-04-07 15:55:17使用 Doceker 打包前端 next.js 專案
使用 Doceker 打包前端 react 專案 2022-03-16/0 評論/在： react, 線上學習 /通過： admin使用create-react-app，建立Dockerfile 閱讀更多 https://penueling.com/wp-content/uploads/2020/11/docker.jpg 300 300 admin https://penueling.com/wp-content/uploads/2021/04/penueling-logo-full.png admin2022-03-16 14:18:562022-05-25 15:33:24使用 Doceker 打包前端 react 專案
前端工程師一天上班會用到的工具 2022-02-25/0 評論/在： 知識筆記, 隨便聊聊 /通過： admin但是工作這些年以來，我發現從前的擔心都是多餘的，一個人的成功與否只在於自己是否在每天都無愧於心的學習；成功轉職的人這麼多，我一定也可以。 閱讀更多 https://penueling.com/wp-content/uploads/2021/04/information.png 512 512 admin https://penueling.com/wp-content/uploads/2021/04/penueling-logo-full.png admin2022-02-25 10:43:592022-02-25 11:09:41前端工程師一天上班會用到的工具
vue3 + 純bootstrap5 打開Modal 2022-02-23/0 評論/在： vue, 線上學習 /通過： admin一個基本的範例要顯示Modal通常會搭配一顆按鈕，按鈕按下去就直接跳出Modal。但有時候我們並不想要直接按下去就顯示。 閱讀更多 https://penueling.com/wp-content/uploads/2020/11/vue.png 300 300 admin https://penueling.com/wp-content/uploads/2021/04/penueling-logo-full.png admin2022-02-23 21:19:162022-02-23 21:41:02vue3 + 純bootstrap5 打開Modal
Validate.js + vue3 表單驗證 2022-02-18/0 評論/在： vue, 線上學習 /通過： admin如果我們使用ui框架，通常都會有封裝好的form可以幫你驗證。 閱讀更多 https://penueling.com/wp-content/uploads/2020/11/vue.png 300 300 admin https://penueling.com/wp-content/uploads/2021/04/penueling-logo-full.png admin2022-02-18 09:18:142022-02-18 10:37:09Validate.js + vue3 表單驗證
[純css] bootstrap5 Dropdown 下拉選單加上動畫 2022-01-27/0 評論/在： scss, 線上學習 /通過： adminbootstrap中的dropdown menu顯示或隱藏，是使用了.show這個class來控制選單的display:none; 或 display:block;，因此我們沒有辦法直接針對display去寫動畫。 閱讀更多 https://penueling.com/wp-content/uploads/2020/10/sass.jpg 300 300 admin https://penueling.com/wp-content/uploads/2021/04/penueling-logo-full.png admin2022-01-27 16:48:052022-01-27 16:58:37[純css] bootstrap5 Dropdown 下拉選單加上動畫
vue3 在父層取得子組件的 ref DOM屬性
/0 評論/在： vue, 線上學習 /通過： admin我們在下面上要取得某 DOM 元素的時候，會先宣告一個 ref 常數，然後在元素的 html 上面加上 ref 屬性。
react 輪播圖套件
/0 評論/在： react, 線上學習 /通過： adminmaterial ui 框架沒有提供輪播圖 component，需要另外安裝套件，這邊介紹一個我常用的套件React Slick，剛好他也有出 react 版本。
WordPress 如何翻譯主題、外掛文字？
/0 評論/在： wordpress, 線上學習 /通過： admin我們安裝的外掛很多時候會自動幫我們寫上一些文字（例如「確定」、「取消」），這些文字是外掛內部指定的，尤其是安裝國外的外掛時，這些文字都是英文並且沒有辦法修改，這時候就可以安裝 Loco Translate 外掛來幫助我們翻譯文字。
使用 cloud build 把網站部署到 cloud run
/0 評論/在： docker, gcp, 線上學習 /通過： admincloud run 是可以把你 build 好的 image 啟動，並且給你一個已經有 https 的網址輸出使用。也就是說假設你有個不論是前端靜態網站、後端服務，都可以部署到 cloud run ，並且費用非常便宜，0.幾塊美金一個月而已。
在 gce 中架設 wordpress 網站
/0 評論/在： docker, gcp, wordpress, 線上學習 /通過： admin中小企業在網站架設的解決方案上，通常會在一個主機上安裝多個網站，這篇教學使用 docker-compose + nginx 架設 wordpress 網站在 google compute engine 上。
在 vm ubuntu 安裝 docker
/0 評論/在： docker, gcp, 線上學習 /通過： admin使用docker的目的就是可以方便在任何環境部署服務，所以不管在哪個主機都要先學會如何安裝 docker。
使用 docker 架設 wordpress 網站
/0 評論/在： docker, wordpress, 線上學習 /通過： adminwordpress 網站不是靜態網站，因為有部落格系統需要用到 mysql 資料庫，所以我們並不能只建立一個 container 就架設 wp 網站，當要同時啟動一個以上的 container 時，就會需要用到 docker-compose。
Material-ui Textfield select 組件搭配 react-hook-form 無法指定defaultvalue 問題
/0 評論/在： react, 線上學習 /通過： admin如題，使用Textfield的select組件時，我們會想預先設定已選取的項目，但是我們指定了，畫面上的input卻還是沒有選起來的樣式。
使用 ThirdWeb 製作自己的 NFT Mint Site
/0 評論/在： javascript, react, 線上學習 /通過： admin搭上NFT熱潮，發現有一些網站開始主打不用自己寫智能合約，也可以製作NFT，ThirdWeb就是其中一個。
小狐狸 metamask 如何領取 Rinkeby 測試用以太幣
/0 評論/在： blockchain, 線上學習 /通過： admin如題，我們要開發智能合約的時候，不論是要部署合約，或是修改鏈上資料，即使你是在測試鏈上操作，他還是會意思意思要扣你以太幣喔！這樣感覺比較真實，你也會知道你真實部上去之後，每一步驟或是部署時會被扣多少gas。
使用 docker 部署純 html 網站
/0 評論/在： docker, nginx, 線上學習 /通過： admin如題，有時候我們做簡單的網站不會用到javascript框架，但是還是可以使用docker部署。
react 使用 firebase 串接 facebook 或 google 登入
/0 評論/在： react, 線上學習 /通過： admin串接facebook或google登入，如果沒有使用firebase的話，可以直接引入js sdk。但是如果是要使用firebase整套驗證，就要在專案中安裝firebase套件。
next.js 串接 google recaptcha verify2 invisible
/0 評論/在： react, 線上學習 /通過： admin其中v2版本又分為：checkbox（就是會有一個勾勾要打勾選我不是機器人）、invisible（從背景打api驗證送給後端）
在 next.js 中使用巢狀的 layout
/0 評論/在： react, 線上學習 /通過： admin通常我們的網站會有Topbar、Sidebar、Footer之類的，在next.js專案中我們會把這樣的layout寫在一起：
使用 Doceker 打包前端 next.js 專案
/0 評論/在： gcp, react, 線上學習 /通過： admin使用next.js製作網站不外乎就是為了ssr這個重點，因為一般的SPA網站像是純react或vue，是沒有seo的，也就是當我們做好網站，google搜尋引擎是搜尋不到你的內容的。
使用 Doceker 打包前端 react 專案
/0 評論/在： react, 線上學習 /通過： admin使用create-react-app，建立Dockerfile
前端工程師一天上班會用到的工具
/0 評論/在： 知識筆記, 隨便聊聊 /通過： admin但是工作這些年以來，我發現從前的擔心都是多餘的，一個人的成功與否只在於自己是否在每天都無愧於心的學習；成功轉職的人這麼多，我一定也可以。
vue3 + 純bootstrap5 打開Modal
/0 評論/在： vue, 線上學習 /通過： admin一個基本的範例要顯示Modal通常會搭配一顆按鈕，按鈕按下去就直接跳出Modal。但有時候我們並不想要直接按下去就顯示。
Validate.js + vue3 表單驗證
/0 評論/在： vue, 線上學習 /通過： admin如果我們使用ui框架，通常都會有封裝好的form可以幫你驗證。
[純css] bootstrap5 Dropdown 下拉選單加上動畫
/0 評論/在： scss, 線上學習 /通過： adminbootstrap中的dropdown menu顯示或隱藏，是使用了.show這個class來控制選單的display:none; 或 display:block;，因此我們沒有辦法直接針對display去寫動畫。