作者: Boggy

瀏覽器bfcache

bfcache是“back/foward cache”的縮寫。當頁面「符合某些條件」的時候，當使用者按了瀏覽器的上下頁，瀏覽器可以快速回復剛剛瀏覽的頁面。且因為bfcache做cache的方式是對整個頁面做快照（包含了Javascript Heap（用來儲存變數、函式的地方）），因此會包含剛剛所做的改變，例如變更過的DOM內容、Javascript的執行結果等等。同時，因為不需要再次載入資源，所以速度超快。

因為Javascript也被緩存的關係，假設我們是用vue.js開發前端頁面，當離開頁面後再返回時，就勢必不會重新觸發fetch, data, asyncData, mounted, created…等等的Methods與Lifecycle Hooks。

閱讀全文 瀏覽器bfcache

用瀏覽器console批次移除Jenkins建置紀錄

某天公司Jenkins的容量爆了，而那天有權限進那台機器的同事剛好請假。唯一能做的只能從前端一筆一筆刪掉。但這樣刪，不知道要刪到民國幾年。於是看看他刪除是怎麼打的，然後用一個回圈批次把一個branch中的所有舊建置都刪掉。

沒權限進主機以外，懶得進主機，也可以用這個方式來刪除。原始碼如下：

閱讀全文 用瀏覽器console批次移除Jenkins建置紀錄

AI歌聲生成手把手教學

有聽了陳珊妮的「教我如何做你的愛人」了嗎？

協助這首曲子的Vocal的大功臣 AI Labs.tw 台灣人工智慧實驗室釋出了體驗平台，讓大家可以自己生成自己的創作。

這個平台有兩個模式，一般版模式比較屬於好玩的版本，只要輸入歌詞，AI會幫你作曲然後唱出來。專業模式的話，就需要一點專業能力，需要先用Midi做主旋律，然後便可以讓AI依照自己作的曲來唱出歌詞。

閱讀全文 AI歌聲生成手把手教學

[歌詞翻訳] 運命の人 – 槇原敬之

作詞：槇原敬之 作曲：槇原敬之

残念な事に君は
僕の友人に恋してて
彼の事を聞きだそうと
誘われた焼き鳥屋を出た所
帰り道が同じ方向で
送ってけるのは嬉しいけれど
家の前に来ると改まって
礼を言う君がいつも少し寂しい

很遺憾
你愛上我的朋友
你想打聽他的事情
所以約我來串燒店，出去的時候
雖然因為回家的方向一樣
可以送你回家我很開心
但來到你家門前時
突然變得很正經地向我道謝的你，總是有點落寞

閱讀全文 [歌詞翻訳] 運命の人 – 槇原敬之

[歌詞翻訳] 我がままなハイヒール – 秋元薫

作詞：秋元薫 作曲：鳥山雄司

我がままなハイヒール
気ままな方よ私
女心はきっと
秋の空より Magical
気にするのやめなさい　噂もなんでもない
危ない夜　私にかかればきっと Paradise

任性的高跟鞋
我很做自己呦
女人心一定比變化無窮的秋天的天空還魔幻
不用擔心，謠言我無所為
把危險的夜晚交給我的話，絕對是天堂

閱讀全文 [歌詞翻訳] 我がままなハイヒール – 秋元薫

[歌詞翻訳] Plastic Love – 竹内まりや

作詞：竹内まりや 作曲：竹内まりや

突然のキスや熱いまなざしで
恋のプログラムを狂わせないでね
出逢いと別れ上手に打ち込んで
時間がくれば終わる don’t hurry!

別用突然地親吻或熱烈地凝視
讓我們的戀愛遊戲（程式）走火入魔誒
熟練地輸入相遇與分手
時間到了就結束 don’t hurry!

閱讀全文 [歌詞翻訳] Plastic Love – 竹内まりや

[歌詞翻訳] 「跟拍到你家」海外版插曲 『Home』- エイティア

作詞：Ryu Matsuyama     作曲：maigoishi

Always worried about your future
And nothing goes right these days
Always searching for excuses
Only trying hard to be praised

總是擔心你的未來
最近沒有一件順心的事
總是在找藉口
只為了贏得稱讚而努力

閱讀全文 [歌詞翻訳] 「跟拍到你家」海外版插曲 『Home』- エイティア

Line Bot 串接 OpenAI API

最近很紅的ChatGPT，如果也能在Line上面使用的話，是不是感覺更方便呢？我們就來串接ChatGPT的開發公司OpenAI提供的API到Line Bot上吧！

這個範例會用Express起一個web server，建立一個method POST且path為/webhook的route作為line的webhook，用來接收line傳來的events

首先你需要先到 Line developers console 點選「Create a new channel」建立一個新的Channel，類型選擇「Messaging API」。填寫完成送出後進入Channel設定頁，複製最下方的「Channel secret」。回到上方選擇「Messaging API」頁籤，複製最下方的「Channel access token」。

用NPM安裝 openai, @line/bot-sdk, express，並在檔案中 require

閱讀全文 Line Bot 串接 OpenAI API

Ubuntu ssh 安全性設定

起一台新的機器後，為了確保機器基本上有一定的安全性，我們可以在ssh登入這個環節加入一些門檻，增加登入的難度。

預計要做的設定有：更改ssh port號 -> 更改登入帳號 -> 關閉root登入 -> 關閉密碼登入

更改ssh port號

就像改門牌地址一樣，當對方不知道門牌地址時，就要一個一個門鈴去按按看，才知道要找的人住在哪間。當不知到ssh port號，要暴力登入時，就必須要一個一個port去試。

閱讀全文 Ubuntu ssh 安全性設定

跨網域請求時什麼情況下會發送preflight request

當我們跨網域呼叫API時，瀏覽器會自動先發送一個method是OPTIONS的Preflight request，向後端確認是否允許跨網域請求，若可以才會繼續原本請求的request。但有時候明明就是跨網域請求，卻沒發送OPTIONS，到底為什麼呢？

問題就在於我們的請求必須是「非簡單請求」，才會讓瀏覽器發送 Preflight Request。那什麼是「非簡單請求」呢？定義為「只要滿足下列任一條件」就是「非簡單請求」：

閱讀全文 跨網域請求時什麼情況下會發送preflight request

SCSS calc variable error

今天遇到了一個詭異的問題。想用css variable來計算transform-origin的z軸，因此在scss中輸入：

transform-origin: 50% 50% calc(var(--board-width * -0.5));

當在dev模式中，一切沒問題，但production build時，就會噴Syntax Error。但更奇怪的是，其他地方一樣也有用到 calc(var()) 這樣的寫法，卻沒有錯。應該是dart-sass (v1.52.2)的bug吧。

最後把 calc(var(–board-width * -0.5)); 在包成一個variable，竟然就可以了。

--depth: calc(var(--board-width * -0.5));
transform-origin: 50% 50% var(--depth);