Devcker天天踩坑

最近身邊的人都也開始用telegram了，但有些朋友會問我要怎麼隱藏一些頻道跟聊天，畢竟大家都有自己的隱私，我自己是沒這個需求，所以又摸了一下telegram，發現有類似的功能可以做到同樣的事情，所以我也寫了這篇文章記錄一下

另一篇有關Telegram的文章

Telegram更新了群組分類功能!!

但是這個方法網頁版的telegram並不適用，所以只有桌面應用程式跟手機app版可以用而已

手機APP Telegram

首先按住要隱藏的聊天，會有一個封存的選項直接點下去

會發現最上面會多一個聊天存檔，所有被封存的聊天跟頻道都會在這邊，但是還沒達到我們隱藏的功能，因為放在上面頻道名稱還是會跑出來

同樣的按住聊天存檔，會跑出隱藏於清單上方的選項，直接點下去，你會發現聊天存檔不見了，當你再往下滑的時候才會出來，而封存的聊天你只要把通知關掉，就算有新內容他也不會跑出來

[adinserter block=”4”] [adinserter block=”9”]

桌面版 Telegram

桌面版我因為沒有裝中文，所以介面是英文的，但是沒關係選項順序都是一樣的，一樣對著要隱藏的聊天按滑鼠右鍵，會跑出幾個選項，第一個選項我是英文版的所以是archive chat，中文應該是封存聊天之類的，直接點下去

跟手機版一樣會多出一個封存的聊天，只要點進去就可以看封存的聊天，雖然桌面版不會顯示聊天頻道名稱，但是以防萬一還是把它隱藏起來好

對著封存的聊天點滑鼠右鍵，會有一個展開跟移動到主選單，我這邊是英文版的所以是英文，不過應該都是一樣的，這邊我們點第二個讓它移動到主選單，按完之後就會發現它不見了

接著點開主選單會發現右上方會多出一個按鈕，這個按鈕就是封存聊天的捷徑，點進去一樣可以看到封存的聊天，放這裡至少別人要找就不是那麼的明顯XD

[adinserter block=”4”] [adinserter block=”9”]

Web Telegram

網頁版並沒有封存聊天的功能，或許以後會出，但現在是不能在網頁版用這樣的方法隱藏聊天的

我自己在手機上是用firefox當主要瀏覽器在使用,主要是因為在pc上我也是用firefox所以一些設定跟書籤可以用firefox帳號進行同步,雖然說是手機板app,但他也是支援插件,但可以用的插件可能就沒pc板那麼多,這篇就分享一下我在手機板firefox上裝的插件

我也有寫pc版本的firefox插件推薦，有興趣可以點進來看[傳送門]

HTTPS Everywhere

這個不用說，跟PC版一樣必裝，他會幫你把不支援SSL的網站強制加密成HTTPS，這樣瀏覽的時候就不用怕會有隱私安全上的問題

安裝連結: 點這裡

Google Search Fixer

這個插件會幫你把google搜尋的結果最佳化，因為有些內容會因為他偵測到你不是chrome瀏覽器，而吐給你比較不一樣的介面或內容，他會幫你換user agent達到騙google說你是chrome瀏覽器這樣

安裝連結: 點這裡

NoMiner - Block Coin Miners

有些惡意網站你只要點進去，你的手機就會開始執行幫別人挖礦的程式碼，挖久了手機會越來越慢，而且還是幫別人挖，根本沒有必要，裝這個插件他會幫你擋掉挖礦的程式碼，我認為也是必裝

安裝連結: 點這裡

Decentraleyes

現在很多網站都會依靠CDN去載入一些javascript或style，導致這些CDN可能追蹤到你，他會先預載一些常用的js或style，減少對CDN的載入，一方面隱私安全，一方面載入速度多少會變快一些些

安裝連結: 點這裡

User-Agent Switcher and Manager

他跟Google Search Fixer一樣是更改你的user agent，但是不同的是他不只是google搜尋頁，他是直接改掉所有網站的user agent，我自己由於從事相關的工作，所以常常會用這個插件來做一些實驗跟debug，是比較適合進階使用者的插件

安裝連結: 點這裡

Google Analytics Blocker

這個插件我在PC版的文章也有介紹過，是擋掉網站GA的插件，我主要用於擋掉自己網站的GA，以免GA那邊數據會不正確

安裝連結: 點這裡

封鎖內容農場

這個插件可以擋住一些內容農場網站，他會在你點進去疑似內容農場的網站時詢問你，這個網站可能是內容農場，你再決定要不要進去

安裝連結: 點這裡

自己在當四個月兵的時候，當時的單位是可以讓我們自己帶書進去看的，不過不能是漫畫書，其餘的好像都可以帶進去，分享一下我在裡面看了什麼還有別人帶了什麼書，其實在裡面看到最多的就是單字本或語言學習的書，大部分是日文跟英文，看來大家真的不想浪費時間

如果要看當兵的心得在這裡喔!!

->第一階段<- ->第二階段<-

大家的日本語 初級Ⅰ

這本是我的一個室友在看的，所以印象比較深刻，他自己是剛學日文，所以帶了這本書進來看

博客來購買連結: 點這裡

食譜

這本書我找不太到，不過一樣是我一個室友，他在外面是大廚，所以帶了一本食譜進來看，好像是怕自己忘記配方

醫學專業的書

這個是我在裡面看過最硬核的書了，有一個鄰兵是在外面是醫學專業，有一天我好奇跟他借了一本來看，想說看一下是什麼東西，結果真的有夠硬核，不但全是英文而且很厚一本，我真心尊敬學醫學的

公務員法精義

公務員法精義

還有就是有人出去是準備要考公務員的，這本只是其中一本，其他還有帶很多本考試的書進來看

博客來購買連結: 點這裡

各種日文口袋書

零基礎！日語萬用句口袋三書

口袋書應該是最多人帶的，光我看到就有四到五個人，因為可以直接塞在迷彩褲裡面，超級方便，雖然在操課的時候班長會說不能拿出來看，但是到後期根本就不會管你

博客來購買連結: 點這裡

各種英文口袋書

圖解新多益單字王(口袋書)

英文口袋書應該是我在裡面看過最多人帶的，跟日文口袋書一樣，操課的時候看很方便，我還看過有人當兵一天到晚都在背單字的

博客來購買連結: 點這裡

新日檢N3言語知識【文字‧語彙‧文法】全攻略

新日檢N3言語知識【文字‧語彙‧文法】全攻略

我自己本身也在學習日文，所以也有帶日文的書進去看，以免我看膩程式的書覺得無聊

博客來購買連結: 點這裡

JavaScript 學習手冊

JavaScript 學習手冊 JavaScript 學習手冊

這本是我第一個拿進去看的書，因為我本身是前端工程師，為了不讓自己變笨所以有帶這類的書進去看，關於這本書在這篇文章有介紹[傳送門]

博客來購買連結: 點這裡

無瑕的程式碼：敏捷軟體開發技巧守則

無瑕的程式碼：敏捷軟體開發技巧守則

這本書是在我看完上面那本之後，為了更精進自己而專門買進來看的，這本書在這篇文章有介紹[傳送門]

博客來購買連結: 點這裡

這篇文章會不定時更新自己有看過且研究過的書，主要會以前端部分為主，目前自己也在學習的路上，希望自己的經驗可以幫助到其他人

另外入門的朋友，不仿可以先看看免費的資源，我也有寫類似的文章可以參考喔

個人學習JS時 常用到的網站整理/筆記

其實很多的東西google就可以找到了，但我自己還是會想要看一些書，我會覺得書中有很多作者的經驗可以讓我參考，所以我不定期會買書來看，但不一定是跟程式有關的書

ES6標准入門

[caption id=”attachment_1000” align=”alignnone” width=”307”] ES6標准入門[/caption]

這本書其實在網路上有[傳送門]，但是他有出成書的版本，我會想去支持一下，因為我自己在接觸ES6的時候，很多時候都是上去看這邊的介紹，包含各種arrow function, 解構, async，上面都寫得很清楚，很且範例很多，所以我是很推薦這本書的，可以說是這本書帶我認識es6的世界

博客來購買連結: 點這裡

JavaScript 學習手冊

這本書是在我看ES6標准入門之前買的書，是在學程式的時候很常會看的動物書，這一本我覺得比較偏向入門，我滿推薦剛學javascript的新手來讀的，它裡面可以說是把javascript的歷史介紹了一遍，而且我個人覺得淺顯易懂，這本書如果都有讀懂，那前端這條路至少基礎是沒問題了

博客來購買連結: 點這裡

你所不知道的JS：ES6與未來發展

[caption id=”attachment_1009” align=”alignnone” width=”213”] 你所不知道的JS：ES6與未來發展[/caption]

這本跟ES6標準入門一樣有網路上的資源[傳送門]，只是一樣有出書的版本，有興趣的可以買來收藏一下

這本的話，我個人認為是比較偏研究javascript核心的部分，像是javascript的prototype還有我認為很多人會誤解的javascript內this的指向，推薦在看完上面兩本之後可以來研究一下這個，雖然說不一定用得到這些，但是多知道一些總是比較好的

博客來購買連結: 點這裡

無瑕的程式碼：敏捷軟體開發技巧守則

[caption id=”attachment_1012” align=”alignnone” width=”214”] 無瑕的程式碼：敏捷軟體開發技巧守則[/caption]

這本我覺得是學程式的人必看的書，這本其實是我當兵的時候，為了要解饞所以買的書，當初看網路上很多人都是推這本書，所以我自己就買了這本書，當兵的時候看

我認為這本書最重要的部分是設計模式以及作者的經驗，不用論各種常用設計模式的介紹，在裡面我也學習到很多不論是工作上或是自己在建立專案的時候的很多技巧

裡面最讓我印象深刻的應該是，在寫任何程式之前，先把測試的程式碼寫好，因為這樣你可以提早驗證你所想的架構，他類別的使用方法適不適合，我當初看到這邊像是覺醒一樣，這本書陪伴我的軍旅生涯，而且也讓我學習到很多之前不會想到的技巧

博客來購買連結: 點這裡

這篇文章用簡單的的js以及css簡單實作基本的手機側邊欄效果，我會介紹兩種的側邊欄效果，希望大家喜歡

基本的側邊攔

基本的側邊欄效果就是在手機上常看到的從左滑出來的效果，他會覆蓋內容，實作的想法基本上跟之前實作簡單彈出popup一樣,都是用了checkbox的checked跟~後選擇器做的

See the Pen simple slide demo1 by kami8112 (@kami25565) on CodePen.

整個設計的套路是用transform跟duration做出滑動的特效，再來就是用checkbox當作是開關，slide的部分用fixed，z-index使他浮在上層，然後讓slide預設transform是transitionX(-300px)這樣他一開始就是藏起來的狀態了

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.slide-wrap {
  min-height: 100vh;
  max-height: 100vh;
  min-width: 300px;
  max-width: 300px;
  background: #DDD;
  border-right: 1px #888 solid;
  position: fixed;
  z-index: 100;
  top: 0;
  bottom: 0;
  transform: translateX(-300px);
  transition-duration: 0.8s;
}

再來就是讓checkbox隱藏起來，設定當checkbox被勾選的時候，再讓slide跑出來

1
2
3
4
5
6
7

input.toggle {
  display: none;
}

input.toggle:checked ~ .slide-wrap {
  transform: translateX(0);
}

到了這邊應該就發現可以打開slide了，但是問題來了，因為slide把checkbox擋住了，所以會關不掉，所以這時候會需要點外面的時候把它關掉，而實現這個最簡單的方法就是點其他地方的時候讓他關掉

所以乾脆監聽slide被blur的事件，這樣他每次開完slide只要點不是slide的地方就會觸發關閉

1
2
3
4
5
6
7
8
9
10
11
12
13

var checkbox = document.getElementById("toggle")
checkbox.addEventListener("change", function() {
  var slide = document.getElementById("slide");
  // 判斷他點擊勾選才讓他focus
  // focus是為了讓他之後可以吃到blur的事件
  if(checkbox.checked) {
    slide.focus();
  }
});
// 點其他地方的時候會觸發blur 這個時候直接關掉slide
slide.addEventListener("blur", function() {
  checkbox.checked = false;
})

這樣就實作完一般的側邊欄效果

這篇是因為我自己最近有遇到類似的問題，所以才紀錄一下，自己的解決過程

我遇到的情況大概是這樣的，我自己電腦原本已經有產生公司那組帳號的SSH Key，之後因為自己的需求需要另外用一隻帳號存自己的專案，結果發現就算產生了另外一組SSH Key也無法讓他被使用到，他會一直讀到原本公司的SSH Key，後來上網找了一些文章，才終於解決這個問題

產生另一組SSH Key

Step 1 檢查SSH Key

我們先假設已經有一組原本正在使用的SSH Key,他預設位置應該會在這裡

1
2

~/.ssh/id_rsa
~/.ssh/id_rsa.pub

Step 2 開始產生另一組SSH Key

然後再產生一組自己要另外用的SSH Key

1

sshkey-gen

Step 3 設定SSH Key

之後會詢問你要放哪裡，預設位置會跟你的作業系統有關

預設都在 /.ssh/id_rsa windows如果有使用git bash的話也可以直接使用來直接代表你的家目錄

記得檔案名稱要不一樣，不然會把原本的SSH Key給蓋掉

1
2

Generating public/private rsa key pair.
Enter file in which to save the key (~/.ssh/id_rsa): ~/.ssh/<ssh key檔案名稱>

Step 4 設定密碼

再來會問你這組Key需不需要密碼

如果之後做push的時候不想打密碼這邊直接留空

1
2

Enter passphrase (empty for no passphrase):
Enter same passphrase again:

Step 5 產生完成

出現這樣的畫面代表這組key就產生完成了，他會在你剛輸入的位置產生一組公鑰跟私鑰

.pub的是公鑰，之後要放上去github或gitlab都用這個

設定ssh

Step 1 編輯config

接著進去~/.ssh，找找看有沒有一個config的檔案，如果沒有就自己建立一個空的檔案，然後直接編輯他, 以下用gitlab做示範，github也是一樣的做法

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Host gitlab.com
    HostName gitlab.com
    User git
    IdentityFile ~/.ssh/id_rsa

# 這邊可以自己動, 但是求方便都是原本的Host加上使用者名稱
Host gitlab.com-username
    HostName gitlab.com
    User git
    # 剛剛上面產生的ssh key位置 
    # 如果你上面產生的位置在 ~/.ssh/id_rsa_username
    # 那就填入~/.ssh/id_rsa_username 依照自己設定的為主
    #  這邊用~/.ssh/id_rsa_username示範
    IdentityFile ~/.ssh/id_rsa_username

分別設定兩組的SSH Key要對應的Host

Host代表是你在做ssh的時候，系統會去對的位置，想要設定不同的帳號就是要去改變這個值，預設的帳號我們就直接用原本的網域名就好

HostName跟User不用動，HostName就是系統真的會去叫的位置

IdentityFile就是你要指定給這個Host的SSH Key檔案

Step 2 設定完成後存檔

直接存檔就可以了，這邊只是設定ssh Host要去對應哪個SSH Key

複製公鑰到gitlab或github

複製公鑰

直接把剛剛產生的公鑰打開，我這邊示範預設的指令，另外產生的也是一樣

1

cat ~/.ssh/id_rsa.pub

打開之後會跑出很多亂碼，把這些亂碼複製起來，這些就是你的公鑰

複製到Github

先去github的設定頁，左側有一個SSH and GPG Key直接點進去

進去之後有一個new SSH key的按鈕點進去

進去之後會看到這樣的畫面，直接把剛剛複製的公鑰貼進去key的欄位裡面，title取一個自己知道的名字就可以了，完成之後直接Add SSH key

這樣github上就有你的公鑰了，github的部分就這樣設定完成

複製到Gitlab

gitlab跟github是大同小異，一樣先進去設定頁面，一樣左側選單選擇SSH keys

點進去之後就有一個key的欄位可以直接貼上你的公鑰，title一樣打上你知道的名字就好，輸入完成之後點Add key就OK了

gitlab到這邊也就設定完成

最後的步驟

最後你要做clone的時候直接把他的域名改成你的host就好，這邊假設你設定的是這樣

預設帳號的host gitlab.com 另外一組帳號的host gitlab.com-username

假設clone的指令是以下這樣，如果是用預設帳號就不用改，因為他的域名跟你設定的host是一樣的

1

git clone git@gitlab.com:xxx/xxx.git

但如果你要用另一組帳號的ssh key的話，就改成這樣就可以了

1

git clone git@gitlab.com-username:xxx/xxx.git

我自己是firefox的忠實用戶，已經用firefox好一段時間了，這篇文章分享一下我使用上都使用那些套件，順便記錄一下，免得以後自己忘記要裝什麼

另外我有寫整理書籤的文章，有興趣也可以參考一下

firefox用標籤功能來整理書籤，讓書籤更方便

Adblock Plus

1
2
3
4
5
6
7
8
9
10
11
12

第一個先推擋廣告插件，讓你瀏覽網頁的時候不會因為太多廣告影響到自己        
    安裝連結: Adblock Plus​
    HTTPS Everywhere      
這個插件是自動幫你加密HTTP，就算是沒有SSL的網站也能自動幫你加密內容，個人覺得必裝     
    安裝連結: HTTPS Everywhere
    TrafficLight      
這個算是瀏覽器上的防毒軟體，主要用途是可以避免你誤入奇怪的網站      
    安裝連結: TrafficLight
    Greasemonkey OR Tampermonkey     
這兩個是差不多的插件，主要就是可以插入腳本到特定網站，這個可以說是插件中的神器，用途太多了，解鎖特定網站，或者是直接幫你變高級會員等，只要目標網站都沒修掉，基本上就是用到爽       
    安裝連結:
                    Greasemonkey

Tampermonkey 搜尋以及安裝腳本的網站: Greasy Fork

Enhancer for YouTube

1
2
3
4
5
6
7
8
9
10
11
12
13
14

                                                                           
這個套件是強化youtube的體驗，安裝之後最直覺的變化是youtube的頁面會多出下方的工具列，還有就是你如果頁面往下滾要看留言的時候，影片會縮小到左上角，當然這些都是可調整的，它的功能不只這些，建議可以點進去安裝頁面查看更詳細的說明       
    安裝連結: Enhancer for YouTube
    Flagfox        
                                                                            
這個是套件安裝之後，網址列會多出一個國旗，這個國旗代表的是目前看的這個網站伺服器在哪一個國家，滑鼠移過去之後還可以看到更詳細的資料，例如ip、網域之類的，這個我常拿來看其他網站都是架在哪個國家，有沒有用http2之類的，點進去之後還可以看到更詳細的資訊       
    安裝連結: Flagfox
    Alexa Rank       
這個跟Flagfox一樣都是安裝了之後，會在網址列多一個工具出來，alexa是一個Amazon底下的一個網站流量排名的網站，這個套件就只是讓自己知道目前看的網站，大概排名在哪邊，有哪邊可以學習的，對架站上的學習是還不錯的       
    安裝連結: Alexa Rank
    Simple Translate        
                                                                          
                                                                            

2020/3/21更新

最近使用上發現他會有使用上限，超過限度會出現超過服務限度之類的訊息，所以比較推薦下面介紹的翻譯插件

安裝連結: Simple Translate

Google Translate, ImTranslator, Dictionary, TTS

這個是因為Simple Translate最近一直有限制的情況下才找到的插件，使用體驗上差不多，反白文字一樣有popup可以點開翻譯，而且這款不只有google翻譯，還有像微軟的翻譯，所以就不用怕說如果有一個的額度到了，就完全不能用

安裝連結: Google Translate, ImTranslator, Dictionary, TTS

Docs Online Viewer

1
2
3
4
5
6
7
8
9
10
11
12

這個套件我覺得很方便，它可以讓你在網路上看到文件的時候可以直接打開來看，而不是下載下來，他支援的格式很多，但是對我來說主要都是看.doc .docx .odt比較多     
    安裝連結: Docs Online Viewer
    Temp Mail        
臨時郵件地址產生器，很多時候不想用自己的email去註冊某些服務的時候，這個插件就很方便，而且他是可以收信的，這點就方便很多       
    安裝連結: Temp Mail - Disposable Temporary Email
    Undo Close Tab      
雖然firefox本身就可以回復關掉的分頁，但是還是要按選項然後到收藏庫、歷史，最後才能到最近關掉的分頁，可能最後還會忘記怎麼點，有這個插件直接點開就是了      
    安裝連結: Undo Close Tab
    ShopBack      
shopback是一個購物賺返現的網站，如果你有他的會員，建議裝這個插件，他會在它支援的電商提醒你有反現的優惠，讓你購物順便省一些錢     
    安裝連結: ShopBack
[adinserter block="4"]

[adinserter block=”9”]

BigGo網購比價神器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

BigGo跟shopback一樣有返現的服務，但他的本業是商品比價，它一樣會在它支援的電商提醒你可以返現     
    安裝連結: BigGo網購比價神器
    Vimium       
Vimiun是我最愛用的插件，有用過vim的使用者，裝了vim之後馬上就會上手，因為它的操作模式跟vim差不多，裝完之後基本上就不需要滑鼠，但是對於沒有操作過vim的人來說可能就需要去適應一下，總之這個插件我極度推薦！！       
    安裝連結: Vimium
    Bookmarks Organizer       
                                                                            
瀏覽器用久了，難免書籤會變得很肥，像我自己有收藏書籤的習慣，書籤有300多個，但有時候書籤的網站可能換位置或者是已經關了，這時候我都直接用這個套件檢查，很快就可以找到已經搬家或關掉的書籤        
    安裝連結: Bookmarks Organizer
    Google Analytics Blocker      
這個插件是可以讓網頁的GA追蹤不到你，雖然火狐自己有內建擋掉追蹤器的功能，但是我裝這個插件其實只是為了讓自己網站的GA不要追蹤到自己而已，而往往這個時候不需要太複雜的功能，就只是想要擋掉GA而已        
    安裝連結: Google Analytics Blocker
    Wappalyzer     
                                                                            
Wappalyzer是一個可以讓你看這個網站有用了什麼套件，這個也有chrome的版本，我自己也有在另一篇文章介紹過，我自己是習慣會去看一下別人在用的技術，還有就是找這個網站上不知名套件的時候很好用，Wappalyzer涉略很廣，很多套件他都認得出來        
    安裝連結: Wappalyzer
    WhatRuns     
                                                                          
WhatRuns跟Wappalyzer很像，但是WhatRuns他更多的是關於背後的技術，像是一些樣板引擎，像我是用wordpress架網站，他連我用什麼套件跟主題都可以找出來，但他有時候也漏了一些資訊，這時候跟Wappalyzer一起用就可以大概補全這些資訊，我自己是兩個都有裝，WhatRuns同樣也有chrome的版本，我在另一篇文章也有介紹      
    安裝連結: WhatRuns
    G App Launcher (Google™ Shortcuts)      

這個是我覺得非常非常方便的插件，簡單來說就是把google的捷徑放到瀏覽器上面來

按一下插件icon就出現跟google有關的捷徑，也相對省了很多書籤，還可以編輯自己的捷徑，我真的覺得這個滿好用的，省得我每次都還要跑到google首頁再去點到這些地方 安裝連結: G App Launcher (Google™ Shortcuts)

今天上班的時候採了一個firebase的坑，主要是firefox沒辦法去觸發notificationonclick的問題，上網到處找，終於讓我在stackoverflow找到答案，這是一個firefox自己的問題，我寫這篇文章來防止自己忘記怎麼解

解法很簡單就是在建立messaging物件之前先監聽notificationclick的事件，主要是因為FCM他本身自己有預設的notificationclick的事件，然後firefox又因為一些自己的原因，所以會導致之後監聽的notificationclick事件無效

所以只要把監聽事件往前就可以解決

1
2

self.addEventListener('notificationclick', function(event){....})
messaging = firebase.messaging();

然後附上我找到的stackoverflow上的解法 [傳送門]

這個問題害我整個早上都在處理這個bug..

今天來用原生JS搭配CSS來實現簡易的彈出選項，大致上說明一下原理，主要是利用CSS有一個後選擇器搭配input checkbox就可以做出一個純css的開關，然後用JS去控制blur的事件使整個選單在操作上更完整

關於後選擇器的部分，網路上有很多不錯的文章可以直接過去參考，這邊就不贅述了

CSS沒有極限- Checkbox的妙用 卡斯伯Blog - 前端，沒有極限

首先第一步，我們先建構出基本的一些元件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div>
  <label for="option-btn1">
    <div>
      開啟選項菜單
    </div>
  </label>
  <input type="checkbox" id="option-btn1">
  <div class="menu">
    <span>選項1</span>
    <span>選項2</span>
    <span>選項3</span>
    <span>選項4</span>
    <span>選項5</span>
    <span>選項6</span>
  </div>
</div>

給checkbox一個id好讓label綁定在它上面，然後讓checkbox隱藏，這樣看起來就像是用按鈕去開關

1
2
3

input.option-btn {
  display: none;
}

再來就是把後選擇器的style設定上去

1
2
3
4
5
6
7

input.option-btn ~ .menu {
  display: none;
}

input.option-btn:checked ~ .menu {
  display: flex;
}

然後裝飾一下，純css的開關菜單就完成了

See the Pen Simple Option Menu Demo1 by kami8112 (@kami25565) on CodePen.

不過這個菜單只有點開關才可以去開啟關閉，我們可能希望可以讓他點外面的時候，也可以關閉菜單，所以要加上一些JS事件讓他支援這個功能

See the Pen Simple Option Menu Demo2 by kami8112 (@kami25565) on CodePen.

這邊主要是在menu加上了blur事件，但是這邊有一個地方要注意的是，div本身並不支援focus跟blur，但是只要幫div加上tabindex他就能有focus和blur事件的監聽

然後是可以看到我們checkbox有綁定一個change的事件，這邊這樣做是因為，blur的前提是你要先focus這個dom，但是我們按按鈕並不會focus到menu，所以才需要監聽checkbox被開啟的時候順便focus menu，這樣才不會按完按鈕，然後按外面卻沒有反應

再來就是我們會希望菜單是浮在上面的，而不是像上面的範例會占用到實際的位置，這邊直接加上position: absolute來補全就ok了

See the Pen Simple Option Menu Demo3 by kami8112 (@kami25565) on CodePen.

到這邊簡易的可開關彈出選單就完成了!!!

VSCode常用插件(plugin)分享，介紹我常用的插件(plugin)，我本身是網頁前端工程師,我很喜歡vscode這個編輯器，當初是從atom跳來使用vscode，我用vscode大概已經用了2年多了，期間也找了很多插件(plugin)可以分享給大家參考。

VS Code 的中文 (繁體) 語言套件

1
2
3
4
5
6
7

首先當然是語言的plugin，當然有繁體中文的選項        
    安裝連結: Chinese (Traditional) Language Pack for Visual Studio Code
    WakaTime - 每天記錄寫程式的時間       
                    
                                                                          WakaTime主面板
                                

你只要註冊完成之後，照他的教學連接上你的插件，你每次打開你的編輯器或瀏覽器他就會開始記錄你每天寫程式或瀏覽網頁的時間

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

                    
                                                                           WakaTime支援的IDE
                                
他不只VSCode可以裝，其他像是atom、sublime都可以裝，甚至還有瀏覽器跟console版本      
    安裝連結:  WakaTime 
                    官方網站: https://wakatime.com/
    套用Atom快捷鍵       
之前是用Atom用久了，VSCode上面沒有真的有點給他不習慣，不只是Atom的也有Sublime的，還有其他的快捷鍵都有，只要到VSCode安裝套件那邊找Keymap都能找到     
    安裝連結:  Atom Keymap
    Atom One Dark Theme        
這也是跟Atom有關的，這個佈景主題是我很喜歡的配色，整個配色很舒服，特別是從Atom跳過來用這個會比較習慣     
    安裝連結:  Atom One Dark Theme
    自動補全HTML Tag      
這個插件我大推，真的有夠方便，雖然在其他編輯器不用裝插件就有這個功能，但是VSCode上面好像沒有類似的功能     
    安裝連結: Auto Close Tag
    Discord狀態連動      
                                    
                                                   
                                    
                                                 
這個推薦給有在用Discord的朋友，這個插件安裝完之後就可以有上圖的效果，屬於增加存在感的插件     
    安裝連結: Discord Presence
    彩虹縮排        
                                    
                                                  
這個插件可以讓縮排有顏色，特別是大型的專案如果你縮排有做好，會很容易知道這個區塊屬於哪邊的區塊這樣        
                                    
                                                  
另外你的縮排如果不合規定他會用一個明顯的紅色提醒你        
    安裝連結: indent-rainbow
    重量級Git插件GitLens        
雖然這個插件有點大，但這個插件可以說是完美整合git到VSCode上，我最常用的功能應該是查看diff跟compare版本差異，還有就是查這幾行code是誰寫的時候超級方便，相關功能介紹可以直接點進連結看       
    安裝連結: GitLens — Git supercharged
    CodeSnap       
                                                                         
這個套件是可以產生程式碼片段圖片的插件，而且還是用自己的主題產生的圖片，要給別人或者上傳到網站上都非常方便        
    安裝連結: CodeSnap
    Todo Tree        
我滿喜歡這個套件的，有時候因為比較急，所以會寫一些比較髒的code先頂著，然後又常常打了TODO說之後要來處理，結果到後面都忘記了，這套件可以很簡單的管理你的TODO，很推薦給跟我一樣的TODO狂人      
    安裝連結: Todo Tree
    Trailing Spaces     
他可以顯示每一行最後面有沒有多餘的空白，對我這種強迫症來說非常好用        
    安裝連結: Trailing Spaces
    Visual Studio IntelliCode       
微軟做的自動補全工具，以我寫JS來說非常方便，連瀏覽器上的語法補全都很完整，另外他也有支援python      
    安裝連結: Visual Studio IntelliCode
    Highlight Matching Tag     
這個比起原生的高亮還要明顯多了，區塊內還會有一條線真的有夠方便，另外有裝minimap的話，你在選的時候minimap也會同步高亮，有夠方便，雖然後面在用pug的時候就比較少用到這個了     
    安裝連結: Highlight Matching Tag
    Better Comments     
                                                                         
簡單來說就是增加註解的可讀性，哪邊是TODO哪邊需要注意或要留訊息都會比較清楚，另外這個可以跟TODO Tree一起用        
    安裝連結: Better Comments