分類
好用軟體

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來達成自訂的聊天室樣貌:

  1. https://chatv2.septapus.com/
  2. https://chat-styles.app/
  3. http://css4obs.starfree.jp/

以 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

 

分類
懶得分類

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

分類
WebTrend

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

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

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

相關新聞:

https://technews.tw/2021/07/23/google-bookmarks-will-end-its-service/

分類
好用軟體

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)

分類
Javascript

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

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

  1. not() method ex: $(“div.item”).not(“.red”)
  2. :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

分類
程式技術

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

 

 

 

 

分類
好用軟體

可抛棄的wordpress測試實驗環境

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

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

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

這些工具都是 wordpress 開發測試時期的好幫手.

 

 

分類
Javascript

台灣寺廟地圖

想做個台灣的寺廟地圖, 我們先來找政府 opendata 資料, 可以看到在這裡有:

https://data.gov.tw/dataset/8203

內容為全國宗教資訊系統資料-寺廟

資料只有一種格式, 就是 XML, 連結在此:

https://data.moi.gov.tw/MoiOD/System/DownloadFile.aspx?DATA=78CA6206-2E8C-4688-AB54-925330B0784B

不過會被重導至一個拿不到資料的連結:

分類
好用軟體

Google Public DNS查詢

大家對於 Google DNS 解析服務器應該不陌生, Google 提供了對外服務的 8.8.8.8, 8.8.4.4 兩組 DNS解析服務.

不過網站介面的 DNS 解析可以利用以下兩組服務:

有興趣的朋友們可以玩看看.

 

分類
懶得分類

AWS AP-EAST-1 EC2/RDS Issue!

今天早上開始, AWS 位在香港的 AP-EAST-1 Region 有大量的異常, 包含了 EC2 與 RDS, 看起來還蠻嚴重的.

根據 AWS 服務狀態頁來看:

https://status.aws.amazon.com/

等看看稍晚有沒有其他訊息或新聞..

[2021/6/19 18:53]

目前看起來都恢復的差不多了, 還好終於恢復了呢.