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去寫動畫。