2024年6月6日 星期四

Troubleshooting ngrok Connection Issues with Local Subdomains

Problem Description

I encountered difficulties getting ngrok version 3.10.0 to connect to my local subdomain despite trying various methods found online. The issue persisted until I came across this GitHub issue: “ngrok(ver.3) doesn’t work to tunnel localhost has subdomain.”

Environment Configuration

  • ngrok version: 3.10.0
  • Ruby on Rails version: 6.0.6.1
  • Local development URL: http://data.localhost.com:3000/

The Problem

The problem seems to be specific to Rails, which explains why commands that worked for others didn’t work in my case.

Solution

To resolve the issue, I used the following command:

ngrok http --host-header=rewrite http://data.localhost.com:3000/ --request-header-add=x_forwarded_host:data.localhost.com:3000

This command successfully established the ngrok tunnel for my local subdomain. If you’re experiencing similar issues with ngrok and Rails, give this solution a try.

ngrok 3 連到 local subdomain(rails)

 ngrok version 3.10.0

試了網路數各種方法都沒辦法讓 ngrok 連到我的 local subdomain 上面

看來是 rails 引起的,難怪其他人可以正確動作的指令對我都沒用
最後要用下面這樣:

ngrok http --host-header=rewrite http://data.localhost.com:3000/ --request-header-add=x_forwarded_host:data.localhost.com:3000

2024年6月4日 星期二

Integrating Partytown without using npm

1. Download Partytown Library Files

First, you need to download the Partytown library files into your project. Use the following command to copy the library files to your desired location:


npx @builder.io/partytown copylib --no-debug /path/to/your/project/public/partytown}

Replace /path/to/your/project/public/partytown with the actual path where you want to store the Partytown library files.

2. Generate the Partytown Snippet

Next, generate the Partytown snippet using the Node.js command:


node -e "import('@builder.io/partytown/integration').then(({ partytownSnippet }) => console.log(partytownSnippet({forward:['dataLayer.push'],lib:'/partytown/'})))"

Replace /partytown/ with the correct path relative to your website’s root where the Partytown files are hosted.

3. Integrate the Snippet into Your HTML

Copy the generated snippet and paste it into the <head> section of your HTML file. Here’s an example:


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Using Partytown</title>

<script>

// Paste the generated Partytown snippet here

</script>

</head>

<body>

<script type="text/partytown" src="https://example.com/analytics.js"></script>

</body>

</html>

Summary

  1. Download Partytown library files using npx @builder.io/partytown copylib.

  2. Generate the Partytown snippet with the appropriate path using the Node.js command.

  3. Integrate the generated snippet into your HTML <head> section.

我終於可以用partytown了

 https://partytown.builder.io/html

最近想要在 GTM 上面用 partytown,但是 yarn add 馬上就卡關
因為需要 node > 18 但我專案只有 14
本來想說能不能用 CDN,在他們 github 上看到兩個答案互相矛盾的 issue
Where is partydown.js file ? 和 How can I load partytown from a pure HTML/JS website?
第一個的回答是直接說沒有 CDN link,第二個的回答是說可以用 unpkg
不過其他網站看到的也是說不能用 CDN

Note that Partytown scripts must be self-hosted on the same server as the HTML documents. Since Partytown is using a service worker, these files must be served from the same origin as your site, and cannot be hosted from a CDN.

可是看他們在 html 的說明又寫

At the lowest level, Partytown is not tied to one specific framework or build tool. Because of this, Partytown can be used in any webpage as long as the HTML is updated, and the library scripts are hosted from the origin.

看起來只要檔案在我自己這邊就算啥 tool 都沒有應該也是可以用
可是我看不懂他的說明

<head>
  <script>
    /* Inlined Partytown Snippet */
  </script>
  <script type="text/partytown" src="https://example.com/analytics.js"></script>
</head>

我就是不知道 Inlined Partytown Snippet 要寫什麼啊(抱頭)
所以我可以理解為什麼會有這個 issue # How to implement partytown in vanilla js or HTML project ? Why partytown has most confusing documentation ?


還好最後我找到了這一篇有完整寫出到底該怎麼靠自己導入 partytown
因為其他很多教學雖然說自己是純靜態網站,但一開始也是用 npm 或 yarn 在裝 partytown
https://tanstaafl.0pt.jp/posts/2023/05/08/e6725aadb317/
他裡面也有寫到

導入については簡単で HTML ヘッダにスニペットとサードパーティスクリプトの呼び出しを書いておくだけである。
しかし公式での説明がちょっと不足していると感じたので簡単に手順を共有する。

對嘛對嘛不是只有一個人覺得官網說明不夠

其實步驟很簡單,只要知道該怎麼用的話 orz…


  1. 下載 @builder.io/partytown/lib 到專案裡

npx @builder.io/partytown copylib --no-debug {看你想把partytown放在哪}

  1. 生成 snippet
node -e "import('@builder.io/partytown/integration').then(({ partytownSnippet }) => console.log(partytownSnippet({forward:['dataLayer.push'],lib:'剛剛你選擇的路徑'})))"

比方我是像下面這樣

node -e "import('@builder.io/partytown/integration').then(({ partytownSnippet }) => console.log(partytownSnippet({forward:['dataLayer.push'],lib:'/public/partytown/'})))"

然後把生出來的東西貼到官網上顯示
Inlined Partytown Snippet 的地方就大功告成了

2023年1月1日 星期日

讀後memo 學會好好睡:我的失眠抗戰日誌

「「看精神科一年下來會吃好幾種藥。隨著藥越吃越多,你的大腦也會越來越像一鍋化學湯。」 化學湯是吧?我大概快淹死在裡頭了。」(『學會好好睡:我的失眠抗戰日誌 (Traditional Chinese Edition)』(米蘭達・里維(Miranda Levy), 朱怡康 著))

身為之前失眠好幾個月的人在書店看到這本書覺得很有興趣就買了,畢竟失眠十年也太驚人了😱。而且 kindle 上就有賣繁體版💯不用在那邊拿掉 drm 才能傳到 kindle。

失眠真的會把人廢掉,有些人說什麼"喝熱牛奶就睡得著了阿",如果這樣就有用通常那種只算"那段時間叫睡不好"不叫失眠,一小段時間睡不好很常見也很合理,但是真的到失眠的話,已經到就算你很累你也很難入睡,入睡也不會睡著多久的程度了,連帶你的頭腦也清醒不了,於是作者在失眠第三年被資遣了(不過公司等了她三年也真的對她很好了)。

中間她當然也各種方法都試了,但是最後為什麼會好轉連她自己也不知道,我自己其實也覺得身心科的藥頂多一開始有點用而已,之後就是個謎,而且作者都吃了好幾年了,也不太可能是過了9年藥終於起作用了,只能說大腦就是個玄學🤷‍♀️它終於想清醒了就清醒了🤷‍♀️。

2021年5月18日 星期二

克癲平

最近找到了很早前醫生開給我的剋癲平,本來想不起當初為什麼要換藥,因為我的印象中這個藥我沒有超多久我就要求要換掉,吃了以後我就發現了,因為會複視,而且持續時間很長,大概晚上一點吃,可以到隔天晚上都還沒恢復,不過如果只是看電腦的距離倒是不會有什麼感覺,看電視就很受不了。

2020年6月7日 星期日

超能奶昔

其實那個呢...最近很墮落的我因為一直看到超能奶昔的廣告就在屈臣氏買來喝看看了榛果可可。
因為我一直很好奇各種減肥奶昔喝起來是什麼感覺,反正一盒八包而已很快就可以喝完。

味道我相當可以接受,一喝就覺得味道很懷念,想一想才發現是和小時候的沖泡麥片味道很像。
不過只要流質類的東西基本上都沒飽足感啦,結果第一次是在我吃了止痛藥不舒服的時候要找東西壂胃吃的。

對我來說就是好玩買看看的,正好味道也喜歡,就嘴饞想喝東西的時候拿來喝這樣。