vscode常常壞掉該怎麼處理

前言

如果有寫typescript的人應該再複製貼上或使用snippets來輔助輸入的人應該很常發現貼上後莫名畫面中出現很多紅線，然後vscode的輔助開發就壞掉了，需要關掉重啟才可以

今天我心血來潮，嘗試使用指令reload window去重啟vscode，這樣確實可以達到不用關閉就可以修復編輯器的效果，但每次都要按command+shift+p 然後再輸入reload...實在有點繁瑣，心想應該可以設定個command+r的快捷鍵讓他自動重啟吧

所以我打開快捷設定，我這邊用英文版，所以我不知道中文版叫什麼名字，可以參考圖片

打開之後找到reload window發現原來已經有快捷了，而且還正好是command+r，但為什麼怎麼按都沒反應呢？後來上網查在知道原來when的這個欄位也要設定，要設定觸發情境

所以在reload window上面點右鍵選擇修改上面點右鍵選擇修改when，然後輸入editorTextFocus

因為壞掉一般都在程式編輯過程吧。設定完之後就大功告成了，再遇到壞掉直接敲快捷就搞定了。

祝大家之後都可以準時下班～啾咪～

bilibili內嵌設定

在祖國你別想說要用youtube絕對封得你不要不要，如果直接把影片放s3也不見得會比bilibili穩定，所以難免會使用到影片嵌入。

但直接使用官方給你的內遷網址範例如下

<iframe src="//player.bilibili.com/player.html?aid=10335022&bvid=BV1nx411m7bV&cid=17072810&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

然後如果你要加上自動播放等其他的功能，autoplay=1，之類的功能，你會發現根本不屌你，你上網查基本上也查不太到有用的資料。如果只是參數沒用那也就算了，safari網頁開啟竟然沒有聲音....我你個去你們家測試工程師會不會太混了一點！

終於找到這篇說明，原來bilibili有寫一個播放器，所以只要把網址稍微改一下

<iframe src="//www.bilibili.com/blackboard/html5mobileplayer.html?aid=10335022&bvid=BV1nx411m7bV&cid=17072810&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

就是//player.bilibili.com/player.html換成了//www.bilibili.com/blackboard/html5mobileplayer.html

之後其他網站叫的參數基本上就可以生效了，safari功能也正常了，交差去吧～

檢查是否有出現在畫面中可以使用IntersectionObserver

 直接附上程式碼，本程式以vue3寫法為範例

<template>

    <div>

        <div> ... </div>
        <div v-if="!checkFinished" :style="{ height: footerRef?.clientHeight + 'px' }"></div>

    <div ref="heightCheckerRef" :style="{ height: marginBottom + 'px' }" />

        <div ref="footerRef" class="px-3 py-4 fixed">

        <button class="bg-gray-500 w-full text-white rounded py-2">返回网站</button>

    </div>

    </div>

</template>

<script setup>

const footerRef = ref(null)

const heightCheckerRef = ref(null)

const checkFinished = ref(false)

const marginBottom = ref(0)

onMounted(async () => {

  // 在資料齊全後

const observer = new IntersectionObserver(([checker]) => {

if (!checker.isIntersecting) { // 是否有在畫面上

marginBottom.value = footerRef.value.offsetHeight

}

    observer.unobserve(heightCheckerRef.value) // 取消觀察

checkFinished.value = true

})

observer.observe(heightCheckerRef.value) // 放入要觀察的DOM

})

</scirpt>

畫面中情境為footer是fixed，如果有內容被footer擋住，那勢必要設個margin-bottom，可以用類似的方法去做檢查

同理，如果有scroll的情境，拉致最底需要加載資料，可以不用在那邊算高度了，也可以使用IntersectionObserver去檢查最底下區塊是否有出現在畫面中，一旦出現就加載，直到最後一頁

HD鬼故事第N集

 HD鬼故事第N集：

在公元2xxx年，一日雲端設備有些故障，某位年薪據說超過千萬的高級工程師，一頓操作猛如虎，下了重開機指令，頓時風雲變色，機器再啟之際已無過往跡象，不僅程式碼刪光，連資料庫也不見蹤跡，詢問原A場員工才得知，當初啟用機器使用的是暫存碟，也就是重啟資料就會刪得精光，且是破壞式格式化，一旦重啟神仙難救。

公司上下馬上盤點各種可能補救措施，力求把多年客戶資料給救回來，有人提出備份的資料庫（在原來硬碟一起被格式化了，至於為什麼備份的資料庫要跟資料庫放同一個硬碟，這又是另一則鬼故事了），也有人想從request的log試圖把資料補救一點回來，可惜最終依然無力回天。昨日種種譬如昨日死。

沒人知道這年薪千萬的工程師最終下場如何，只知道，做人最好不要太自負，不熟要懂得請教專業人員。

最終，今年才剛開始，希望人人都能領到下個月薪水過個好龍龍year~

免責聲明：以上都是我在翻閱九陽神功時，不小心撇見旁邊的註解文，也不知道什麼意思就轉錄出來了，如有雷同絕對是巧合

Tauri 濃縮版的Electron.js

前言

老實說我還沒開始學這塊，因為也沒什麼場景可以使用，但網路上看起來這玩意兒挺有趣的，相比起來也更輕量，未來或許有機會用到，先做一下紀錄

附上參考連結

雖然有點久了，但還是來玩一下Github Pages

前言

在小珍珠生日這天，志清哥找我討論一個案子，說教師部需要，大神都開口了當然是不能收錢拉，但我首先跟他提出一個最根本的問題，伺服器呢！！沒有伺服器我能怎麼辦呢？我還真的能怎麼辦，後來思考既然需求並不包含資料庫跟後端，那來玩一下出了很久一直沒機會碰的Github pages吧

使用Github pages很容易，開啟一個新repository，然後到setting > pages頁面 > 找到Branch這個欄位，然後選擇分支，在選擇資料夾即可（資料夾只支援/跟/docs兩個）

如果是一般前端專案，根目錄要放專案，所以可以把build出來的檔案放到docs，這邊我以vue及vite為範例

export default defineConfig({

 // 因為最後專案網址是https://{github_account}.github.io/{repository}, 不是在根目錄，所以base也要調整

base: "/{repository_name}",

build: {

target: "es6",

outDir: "docs", // <- 改這裡

},

plugins: [vue()],

resolve: {

alias: {

"@": fileURLToPath(new URL("./src", import.meta.url)),

},

},

})

這樣就每次更新，然後build完一起把檔案commit就好，一切就大功告成了。

But，把build完的檔案一起commit這看起來是件很愚蠢的事，所以我開始想看有沒有機會使用action解決，在奶綠茶大大多年前的文章中找到解法，有人已經把套件做了，我只要使用就好，但因為年代久遠，現在已經是疫情後的2024年，有些畫面已經不一樣了還是要摸索一下，要使用的是peaceiris/actions-gh-pages@v3這套

step1.
簡單說明一下首先你要到帳戶的settings(右上角頭貼) > Developer Setting > Person Access Token > Tokens(classic) > 產生一組token供action使用（產生完記得複製起來，不然頁面關掉就看不到了）

step2.
接著到repository的Settings > Secrets and variables > actions > secrets > 新增一個secrets(開頭不能是GITHUB_，其他可以隨便取，我這邊取ACTIONS_TOKEN)

step3.
最後在專案中新增/.github/workflows/main.yml，這裡也有許多參考範例

name: GitHub Pages

on:

push:

branches:

- main

jobs:

deploy:

runs-on: ubuntu-22.04

permissions:

contents: write

steps:

- uses: actions/checkout@v3

- name: Setup Node

uses: actions/setup-node@v3

with:

node-version: "20"

- name: build

run: |

yarn

yarn build

- name: Deploy

uses: peaceiris/actions-gh-pages@v3

if: github.ref == 'refs/heads/main'

with:

github_token: ${{ secrets.ACTIONS_TOKEN }}

publish_dir: ./docs

step4.
接著把所有改動都commit & push進去

你就會發現github actions開始動拉，deploy完就會發現一個新的分支gh-pages，裡面就會是編譯完的檔案，並且github actions也都幫你設定好了，等於上面那些步驟也不用自己來，可以說非常懶人及完美啊！

後記

我再到其他專案開啟pages頁面結果顯示這樣，點進去發現要付費，原來免費只讓你啟用一個，果然天下沒白吃的午餐啊～

幫女兒切完蛋糕接到大哥驗收完成電話，大哥的笑聲像中了樂透彩，應該是有免費的伺服器跟碼農內心竊喜吧～

如何再遮罩上挖個洞

前言

相信大家都有用過Modal，都有遇過背後那半透明的遮照，但如果要做到以下效果，在下方按鈕上挖一個洞，我的第一直覺應該會用圖片去做處理

實際上這是我接手同事專案後他做出來的效果，我仔細研究了一下他的程式碼，發現想法還挺有趣的直得學習一下。

因為這部分程式碼不好呈現，所以今天就用截圖代替吧，絕對不是因為我比較懶

簡單解釋，mask-info一樣左上對齊，設成fixed。

這裡使用

const { x, y, height, width } = element.getBoundingClientRect()

去取得按鈕（目標元素）的座標及大小，放到類元素:before去瞄準絕對位置跟尺寸，最後使用box-shadow讓陰影往外延伸並且設上透明度（照片中往外延伸3000px，以手機版來說也很夠用了）。

打完收工。

後記

跟以往我總是從座標0,0開始思考有點不一樣，沒想到類元素還可以這樣使用。只能說世界還是很大啊～（煙

<div class="mask-info" :style="clipPath">

...

</div>

const clipPath = computed(() => {

const { x, y, height, width } = props.data // element.getBoundingClientRect() 進來的值

return {

"--top": `${y}px`,

"--left": `${x}px`,

"--width": `${width}px`,

"--height": `${height}px`,

}

})

.mask-info {

@apply fixed left-0 right-0 top-0 bottom-0 z-[100];

&:before {

@apply absolute block rounded;

content: "";

left: var(--left);

top: var(--top);

width: var(--width);

height: var(--height);

box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.8);

}

}

另外紀錄一個點，同事使用var(--left)去取得主元素的style left值，這點也挺特別的，沒有使用vue3原生的v-bind去取
如果沒意外應該會寫成這樣
left: v-bind("clipPath['--left']")