更好的使用 "git checkout"

什麼是 git switch 和 git restore？

Git 版本 2.23 加入了兩個指令，他原理與 checkout 命令類似，但不完全相同。

為了更深入地理解，我們來看看他們的作用。

什麼是 checkout?

checkout : 切換分支或恢復工作樹文件

Git 2.23 做了另外兩個命令來區分其取代他。

兩個新命令

• switch：切換分支
• restore：恢復工作樹文件

您現在可以專門針對更合適的情況編寫。

如果想切換分支，可以使用:

$ git switch develop
# 與 'git checkout develop' 相同

$ git switch -c new-branch
# 同 'git checkout -b new-branch'

如果想恢復文件，也可以使用:

$ git restore README.md
# 與 'git checkout -- README.md' 相同 

$ git restore --staged README.md
# 與 'git reset HEAD README.md' 相同



現在我們可以用更語意的方式使用 GIT 了:)

參考: https://materokatti.medium.com/do-not-use-git-checkout-anymore-aa73c0a43c13

繼續閱讀 >

text-align: justify - CSS 對齊屬性

事情是這樣的，客戶問我可不可以把網頁的內容文字都對齊呢？ 當然沒問題啊！

加了 text-align: justify 一切搞定！

沒加的長這樣

加了以後！！

打完收工～

順帶一提，之前不支援的 Apple Safari 已支援。

繼續閱讀 >

Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered

 事情是這樣的，最近在網頁上一直出現這種錯誤：

Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered

只好來研究一下該如何解決，順帶一提，我是使用 Nuxt.js

錯誤訊息如下

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

後來找一找發現我碰到的問題跟這個人很類似

https://stackoverflow.com/questions/47862591/vuejs-error-the-client-side-rendered-virtual-dom-tree-is-not-matching-server-re

For me this error happened cuz get Array list in AsyncData and rendered <tr> tags by v-for, i put v-for codes in <client-only> blocks and problem solved

我試著把 v-for 包進去 <client-only> 裡面也確實獲得解決，如果有更好的解法再麻煩告知了，這是我遇到問題以及解決的方法做個紀錄。

繼續閱讀 >

nginx 設定 50x 錯誤頁面

 事情是這樣的，本人待的小公司因為沒有 load balance 的機制(成本考量)，因此在 Server 重新 build 的時候網站會呈現掛點狀態(?不意外吧)，為了解決這樣的問題，所以決定要做一個 error page 去告訴敷衍使用者 :)

需求: 當伺服器改版或錯誤時，需要做一個頁面讓使用者知道我們的服務沒有問題

nginx 設定如下

        # 升級頁面
        proxy_intercept_errors on;
        error_page   500 502 503 504  /index.html;
        location = /index.html {
            root /home/ubuntu/www/;
        }
        location ~ \.(mp3|mp4) {
                root /home/ubuntu/www/media/;
        }

接著把靜態頁面放進去www資料夾裡面，搞定！

繼續閱讀 >

網址列沒有 www 的 nginx 設定 (燦笑

 www 不是只有拿來燦笑用的，他還是網址列的開頭。那要如何把 www 隱藏起來呢 (燦笑

事情是這樣的，因為我們網站 www 跟沒有 www 的網址都可以通，但是因為 cookie 的網域不同，兩邊的帳號登入無法同步，所以要決定究竟要 www 還是不要 www。

有 www 優勢：

    我這個年代的人習慣前面有 www

沒有 www 優勢：

    品牌名字可以直接呈現在前面

有 www 跟沒有 www 都留著:

    相同內容 seo 只會選一個來做排名

好的！就決定沒有 www 了。

#nginx 設定

if ( $host != '$YOUR_DOMAIN_COM' ) {
    rewrite ^(.*)$ https://$YOUR_DOMAIN_COM$1 permanent;
}

搞定，所有 www 都會被 301 轉導到沒有 www 的網址上面。

繼續閱讀 >

2022 元滿平安箱

最近打球腳受傷，朋友說要帶東西來探望我，我就說那要買個爽的過來喔～

然後我就收到了這個…？

三小？把我當神來尊敬的意思嗎？好吧！我原諒你，裡面不爽的話我會拿拐杖教訓你喔。

打開以後，好啦～裡面也是有幾個我愛吃的餅乾，像是波的多、玉米脆餅跟鹽之花，其他倒是沒什麼在吃。

裡面總共有七包餅乾

- 野菜園

- 波的多 蚵仔煎

- 鹽之花洋芋片

- 鮮肉蝦餅

- 三角薯叔

- 空氣玉米脆餅

- 甜卡力

拿出來拍照以後，看起來的確是很有誠意呢，那我只好來當一下你的神，品嚐一下這些美食，也謝謝我的那個朋友突發奇想買了這一箱過來 XD~

叔叔當然就先來吃薯叔瞜，吃起來跟好市多的薯格格 87 分像，但感覺沒有那麼硬，而且還可以一口塞蠻爽的，這個配酒喝應該很棒～

結果我吃著吃著猛然發現一個特別的東西！

就是紅色圈起來的那個，我一開始還以為是我朋友撞到邊邊才變成這樣的，後來我去查了一下，那個地方居然是可以用來插香的！！

居然有這種方便的設計，太棒了吧！看來快要到的中元節也可以買個一箱來拜一下，讓神也可以嚐嚐這種爽快的感覺，但這箱我就先嘗鮮摟～

繼續閱讀 >

複製連結碰到的問題(Safari)

事情是這樣的，今天發現在手機上的複製連結功能沒有作用，仔細檢查一下發現是上面有個 await，只要把他隱蔽就正常了！

...?????

後來找到了這篇文章

https://juejin.cn/post/7038773190587318308

看起來是發生差不多的事情，主因是因為 window.open() 的Api 會因為使用 js 去調用的時候，如果超過某個時間就會被認定為不是使用者直接操作，而阻止程式繼續使用。

解決辦法：

所以把 await 的 api 放在最後面就可以解決這個問題。

以下為原本的 code

參考:

https://juejin.cn/post/6979763242134405128

https://zhuanlan.zhihu.com/p/122175288

繼續閱讀 >