My Program

Youtube Live Stream Chat Embed with custom CSS

文章作者作者: tim
文章發佈日期 2021-09-22
在〈Youtube Live Stream Chat Embed with custom CSS〉中尚無留言

在 Youtube Live Stream 右邊有個 Live Chat, 有時會需要進行再嵌入回其他地方如 OBS或應用在管理上, 可以透過以下網址:

https://www.youtube.com/live_chat?v={video id}

也就是將原本的 watch 改為 live_chat 即可. 不過若是自己的直播, 則是可以直接在創作者工作室中, 聊天室右上的三個點打開 popup 即可取的網址:

https://studio.youtube.com/live_chat?is_popout=1&v={video id}

也是可以的.

另外若是需要去背在 OBS中使用, 可以利用這個網站服務的 CSS來達成自訂的聊天室樣貌:

以 lofi 頻道為例, 網址為:

https://www.youtube.com/watch?v=5qap5aO4i9A

它的 video id 為 5qap5aO4i9A, 所以聊天室連結為:

https://www.youtube.com/live_chat?v=5qap5aO4i9A

Youtube官方資料:

https://support.google.com/youtube/answer/2524549

標籤 Live Chat, Live Stream, OBS, youtube

系統技術

MacBook Air升級MacOS Big Sur 11.6後指紋解鎖消失

文章作者作者: tim
文章發佈日期 2021-09-20
在〈MacBook Air升級MacOS Big Sur 11.6後指紋解鎖消失〉中尚無留言

前兩天升級了 MacBook Air, 好一陣子發現開機沒有指紋解鎖提示, 只能用密碼解鎖, 不過也持續兩天了, 但今天在下載一個 App Store中的APP時, 發現也不能用指紋解鎖購買了, 才來檢查一下.

到左上角的「蘋果」「系統偏好設定…」「Touch ID」進入後, 果然完全沒有一隻指紋在裡面, 昏倒, 設定新指紋後, 就可以正常使用了, 不過上網查了一下, 沒有看到對應的災情耶, 真是太妙了..

PS. 和網路上查到的 SMC 異常不同, 而是在 Touch ID中的指紋消失, 但可以新增. 若是 SMC異常可以參考: https://www.dcard.tw/f/apple/p/235003423/b/26 或官方網站的這篇: https://support.apple.com/zh-tw/HT201295

標籤 MacOS, Touch ID

WebTrend

Google Bookmarks將於2021/9/30走入歷史…

文章作者作者: tim
文章發佈日期 2021-09-20
在〈Google Bookmarks將於2021/9/30走入歷史…〉中尚無留言

又一個服務將下架了, 有需要的朋友們快去匯出自己的 Google Bookmarks (雲端書籤).

若要匯出書籤, 可以利用左下角管理功能中的 [匯出書籤] 即可順利匯出.

Google雲端硬碟電腦版

文章作者作者: tim
文章發佈日期 2021-09-10
在〈Google雲端硬碟電腦版〉中尚無留言

Google雲端硬碟電腦版, 歷經多次名稱變動調整, 目前最新的版本為 “雲端硬碟電腦版”.

下載: https://www.google.com/intl/zh-TW_tw/drive/download/

在此次更新之前, 有個人版的 “備份與同步” 和企業版的 “雲端硬碟檔案串流”, 先來比較看看差異吧:

https://support.google.com/drive/answer/10309431

其中很重要的一項功能為在企業版本才有的檔案串流, 也就是說可以節省硬碟空間, 也就是檔案不常用時, 不會佔用本地空間, 是只在雲上, 而使用時, 才即時下載使用(當然也可以自行指定要在本地留存的檔案)

這個同步選項畫面可以清楚的表現這個功能.

(PS. 這個功能不知在 OneDrive 何時已被加入到該應用程式中了, dropbox也有, 不過是付費功能, 稱為智慧同步: https://www.dropbox.com/smart-sync)

閱讀全文

標籤 File Stream, Google Drive, storage

Javascript

jQuery選擇特定元素但是不含特定class (反向選擇器)

在實作 jQuery 選擇器時, 有時會用到選擇出的 elements 不含指定的 class, 有兩種方式實現:

not() method ex: $(“div.item”).not(“.red”)
:not() seudo-class ex: $(“div.item:not(.red)”)

其中 2. 為 css 原本 selector 的做法.

來看看範例吧:

其中, item 1 ~5 都有 item class, 但 item 2, 3, 4 有 red class, 兩個 button 分別使用 method 1, method 2 來進行切換沒有 red class 的 item 隱藏與顯示 (toggle method).

程式如下:

$("#m1").click(function(){
  $("div.item").not(".red").toggle();
});

$("#m2").click(function(){
  $("div.item:not(.red)").toggle();  
});

參考資料:

https://stackoverflow.com/questions/2448051/how-can-i-select-all-elements-without-a-given-class-in-jquery

標籤 class, css, jQuery, not

程式技術

css grid方法來排版網頁

利用 css 排版頁面的新方法, 除了 flex 外, 還有 css grid 排版方式, 以常見的 header, sidebar, content, footer 來看, 我們可以這樣進行:

先定義外面的 div.conatiner 為 display: grid;

再來依序在該 container 中新增 4個 div 分別為 header, sidebar, content, footer.

我們希望 siderbar 與 content 比例為 1:4 所以在 div.container 設定 grid-columns-template: 1fr 4fr; (這裡的 fr 是 fraction)

不過因為 header 與 footer 都是全寬, 所以需要指定為 column 的起始位置, 所以加上 grid-column: 1/3; (這裡是指從 line 1 ~ line 3, 因為共兩欄, 所以會有三條縱線)

來看看 example 吧: https://codepen.io/timhuang/pen/xxdayNW

目前的 modern browser 都可以支援, 可以參考 caniuse 資料:

https://caniuse.com/?search=grid-column

繼續閱讀:

https://dev.to/cenacr007_harsh/complete-introduction-to-css-grid-2ffh

標籤 css, grid

Wordpress

可抛棄的wordpress測試實驗環境

之前介紹過兩個免費代管 wordpress的服務:

DEMOSWP – https://diary.tw/archives/68 (已停止服務了)
CloudAccess – https://diary.tw/archives/71 (同時提供了 WordPress 與 Joomla 免費代管)

不過若要更快速地測試與實驗 wordpress 還有這些選擇(短時間lab應用):

https://instawp.io/ (免費可用 8小時, login user可用48小時的站台, 若有要加入會員, 可以使用我的推薦連結: https://app.instawp.io/register?ref=KoeYZn8Dvf)
https://tastewp.com/ (免費可用 48小時, login user可用7天的站台)

這兩個建立一個 wordpress 站台的速度都超快, 幾10秒的時間就完成了, 然後要測試什麼 plugin 或是 theme, 都可以很快地來達成, 不過若是想要更 geeker 一點, 可以利用 play-with-docker 來玩.