分類: 技術分享

Json code comments

Json 為純數據，簡單來說，Json現階段沒有標準註解，但沒有註解實在很不方便，所以可以用偷吃步的方式，一樣以 Key:Value 的方式呈現資料，取個像註解的Key用雙斜線開頭而Value 就是註解的文字，用以讓程式碼忽略這個資料

這種方式註解看起來像這樣：

註解在資料裡的樣子：

https://stackoverflow.com/a/244858

[……]

閱讀更多

Apache .htaccess Rewrite homepage only , not 301

在首頁網址不變的前提下，利用 Apache .htaccess 重寫首頁頁面，指定到同站某一網頁內容，而不影響其他網頁運作

使用情境：

首頁需要改版時，但新版本頁面開發/測試時但還不能正式上線，但於準上線狀態，這時可以透過這技巧，避免停機更新，快速切換首頁顯示頁面，不更動網址所以行銷追蹤碼或廣告著陸都不會有問題

[……]

閱讀更多

Social Network Service (SNS) Share Link

Facebook

  • http://www.facebook.com/share.php?u=[URL]&t=[TITLE]&pic=[IMAGE]

Twitter

  • http://twitter.com/intent/tweet?text=[TITLE]&url=[URL]&pic=[IMAGE]

Google Plus

  • https://plus.google.com/share?url=[URL]&t=[TITLE]

Pinterest

  • https://www.pinterest.com/pin/create/button/?url=[URL]&description=[TITLE]&media=[IMAGE]

Linkedin

  • https://www.linkedin.com/sharing/share-offsite/?url=[URL]&title=[TITLE]

Delicious

  • http://del.icio.us/post?url=[URL]&title=[TITLE]

Tumblr

  • http://www.tumblr.com/share?v=3&u=[URL]&t=[TITLE]

Digg

  • http://digg.com/submit?phase=2&url=[URL]&title=[TITLE]

StumbleUpon

  • http://www.stumbleupon.com/submit?url=[URL]&title=[TITLE]

Reddit

  • http://reddit.com/submit?phase=2&url=[URL]&title=[TITLE]

新浪微博

  • http://v.t.sina.com.cn/share/share.php?title=[TITLE]+[URL]&pic=[IMAGE]

QQ 空间

  • http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=[URL]

人人网

  • http://share.renren.com/share/buttonshare.do?link=[URL]&title=[TITLE]

腾讯微博

  • http://v.t.qq.com/share/share.php?url=[URL]&title=[TITLE]

https://github.com/bradvin/social-share-urls
https://chon.io/notes/social-media-sharing-link-url/

[……]

閱讀更多

Chrome 另存圖片 .jfif to .jpg

作者：丫丫爸爸學電腦
原文：https://kknews.cc/zh-tw/news/mkgrkz2.html

瀏覽器另存圖片的時候，發現保存的圖片格式是「.jfif」，而不是常見的.jpg或.png格式，以這種格式保存下來的圖片大部分軟體都不認識。那麼「.jfif」是什麼格式呢？丫丫爸爸今天就給大家分享下在「Win10」系統中如何把默認的圖片保存格式由「jfif」格式轉化為「jpg」格式。

今天丫丫爸爸要說的就是保存網頁圖片的問題，大家有沒有發現，當你在Win10系統下瀏覽網頁，並在網絡上下載的圖片時，默認格式是「jfif」？

結果圖片保存完都成為下面的樣子了：

會發現好多軟體都不支持這種圖片格式。

解決方法

首先按鍵盤的「Win鍵+R鍵」，彈出「運行」對話框，輸入「regedit」，然後點回車進入註冊表編輯器。

然後，按照下面的路徑一步步進入相應的項目，也可以直接把下面的路徑粘貼到地址欄里：
HKEY_CLASSES_ROOT\MIME\Database\Content Type\image/jpeg

再然後，右面的列表框中有個「Extension」選項，雙擊這一行點開，在「編輯字符串」對話框中，把「jfif」改為「jpg」，最後點確定就可以了。

[……]

閱讀更多

Windows 刪除已信任的https憑證、管理憑證

游標移到左下角按右鍵，是「右鍵」喔，選執行

輸入「certmgr.msc」按確定紐

開啟憑證管理的面板，左側是憑證類別，右邊是憑證，選取憑證後可以在上方控制列按下紅色叉叉的圖標刪除，也可以點擊滑鼠右鍵選刪除，來刪除已信任的憑證

參考資料：

[……]

閱讀更多

XAMPP設定Https開發環境，一鍵openssl自簽SSL憑證，配置 Apache Localhost

開發者通常都會在本地端電腦建立一個 localhost 的伺服器來模擬遠端生產環境或測試環境的狀態，進行相關程式碼的開發、測試，而 https 安全網站目前成為主流，為盡可能接近遠端伺服器，勢必本地端伺服器也需要安裝SSL憑證，筆者本地開發環境使用的是 XAMPP，所以本文主要是議介紹 XAMPP 的 https 配置，本文主要是「方便」開發為目地，而非「安全」為目地，介紹如何開發環境中設定SSL憑證，這僅適用於開發環境，切記 ! 不適用於正式生產環境。

本文 XAMPP版本為：XAMPP 7.4.8 ( Windows 64bit )

openssl 自簽憑證

本文使用的 XAMPP 版本已自帶 openssl 所以無需再另外安裝 openssl

準備工作

在 XAMPP 中的 Apache 根目錄中建立一個名為 ssl 子目錄，這目錄用來存放之後產生出來的證書檔案，目錄絕對路徑可能長得像下方這樣

複製 openssl 配置檔範例

openssl 自簽憑證需要一個配置檔，熱心網友 Adrian Suter 在 Github 上已經寫好配置檔範本，我們在剛建立的 ssl目錄中，建立一個名為 cert-template.conf 的檔案，並貼上下方範本網址中的代碼

複製 make-cert.bat 範例

熱心網友 Adrian Suter 在 Github 把 openssl 簽發憑證的流程寫成 Windows bat 檔案，簡化操作流程，克服指令障礙，非常佛心，如果配置檔配置正確，Enter,Enter,Enter一鍵就可以完成指定域的SSL憑證簽發，非常方便，開啟下方連結，並於上述的 ssl 目錄中建立一個名為 make-cert.bat 的檔案，並貼上下方網址中的代碼

執行make-cert.bat

執行 make-cert.bat 前，請確保 cert-template.conf 已同一目錄

執行 make-cert.bat，要求輸入要簽發的網域( 以 example.com 為例 )
輸入 example.com 按 Enter

再來會要求填入一些相關資料，不理它直接Enter、Enter、Enter下去就好，沒有輸入會帶預設值，因為本文介紹只是方便開發用的，不是正式環境使用，所以這些資訊並不必是真實的

當看到請按任意鍵繼續的文字，代表已經完成，下圖就是完成的截圖

此時 ssl 目錄就會多一個 example.com 的子目錄

開啟 example.com 目錄，裡面應該會有 server.crt 及 server.key 這兩個檔案，這就是憑證檔案，如果看到這兩個檔案，恭喜~憑證簽發完成! 這做法非常簡單

Windows 安裝憑證

openssl 自簽憑證沒有信任組織背書，仍會被瀏覽器標示為不安全，需要在 Windows 手動安裝信任此憑證，打開 server.crt 如下圖，按下「安裝憑證」按鈕

會跳出憑證匯入精靈，存放位置選「本機電腦」，下一步

選擇「將所有憑證放入以下存放區」，按憑證存放區的「瀏覽」按鈕

選擇「受信任的根憑證授權單位」，確定

下一步

按「完成」按鈕以完成憑證匯入

看到此彈跳視窗即匯入完成

設定 httpd-vhosts.conf

檔案位置：C:\xampp\apache\conf\extra\httpd-vhosts.conf
設定 XAMPP 的虛擬主機設定

設定 Hosts

檔案位置：C:\Windows\System32\drivers\etc
在檔案最下方加入下方這一行，將網域指向本機，流量就不出站了

完成設定

完成上述動作，再來就是要測試是否可以正常運行，在這之前先完成幾個步驟

  1. Ping 網域是否正確指向 127.0.0.1
  2. 重新啟動 XAMPP
  3. 暫時關閉防毒軟體及防火牆
  4. 清除 Windows DNS快取
  5. 清除瀏覽器 DNS 快取
  6. 瀏覽器關閉後重新開啟

最後打開瀏覽器，開啟所設定的網域，正常網址前方應該是不會出現「不安全」字樣，應該會出現鎖頭圖標，點擊網址前方鎖頭圖標，會顯示「已建立安全連線」的小視窗，如果有看到代表已經設定成功囉

如果沒看到也可以再嘗試一下多清除幾次瀏覽器的快取，或關閉瀏覽器再開啟，我發現瀏覽器這部分似乎有快取，有時設定成功卻仍顯示不安全，所以可以特別去注意這部分，若還是不行就重新操作一遍，或瀏覽文章下方參考連結參考原文

檢視或刪除已信任憑證

當我們完成階段性任務，不需要再使用開發環境某一個域的憑證時，可以參考下面這篇來刪除憑證

Windows 刪除已信任的https憑證、管理憑證

參考資料

https://shellcreeper.com/how-to-create-valid-ssl-in-localhost-for-xampp/
https://a091234765.pixnet.net/blog/post/403840004
https://gist.github.com/turtlepod/3b8d8d0eef29de019951aa9d9dcba546#file-cert-conf
https://www.cnblogs.com/kidsitcn/p/10561979.html
https://odan.github.io/2017/10/29/installing-an-ssl-certificate-under-apache-xampp.html

[……]

閱讀更多

How to disable GTM debug mode

Google Tag Manager (GTM) 提供了很多方便收集使用者行為的工具，但前端會出現如下圖的除錯小工具視窗，方便我們開啟除錯及預覽模式，但當我們測試完成後將網站投入於生產環境中，發現還是會出現這小工具視窗，即使關閉了，當刷新頁面後仍會出現，似乎關閉不了它，本篇就來處理這傢伙，教您如何關閉 Google Tag Manager (GTM) 除錯工具的小工具視窗。

開啟代碼管理工具面版 (GTM)

  • 取消勾選左下角 Include debug signal in the URL 核選方塊
  • 按 Popup 視窗右上角的叉叉關閉視窗

停止除錯模式

做到這一步基本上已經關閉了除錯模式了，這時可以到網頁上去看一下GTM除錯工具的小工具視窗是否還在，如果還在，就按下小工具視窗的右上角的叉叉，關閉這個視窗，它就不會出現囉。

參考資料：
https://support.google.com/tagmanager/answer/6107056?hl=zh-Hant
https://www.analyticsmania.com/post/4-ways-how-to-turn-off-google-tag-manager-debug-mode/

[……]

閱讀更多

設定 G Suite Email MX 記錄

申請完 G Suite 並在管理面版設定好網域，卻還不能發信，請檢查你的DNS紀錄是不是少了MX的紀錄了呢？Google G Suite 要設定五筆MX紀錄，email才能正常運作：

新增 G Suite MX 記錄

名稱/主機/別名存留時間 (TTL*)記錄類型優先順序值/回應/目的位置@ 或保留空白3600MX1ASPMX.L.GOOGLE.COM@ 或保留空白3600MX5ALT1.ASPMX.L.GOOGLE.COM@ 或保留空白3600MX5ALT2.ASPMX.L.GOOGLE.COM@ 或保留空白3600MX10ALT3.ASPMX.L.GOOGLE.COM@ 或保留空白3600MX10ALT4.ASPMX.L.GOOGLE.COMhttps://support.google.com/a/answer/140034?hl=zh-Hant

設定DNS紀錄

如果你DNS是代管在 Cloudflare 上的話只要按照下列幾個步驟就可以成功設定了

最後就是測試一下 G Suite 的 Gmail 收發可不可以通了喔

[……]

閱讀更多

常用軟體或網站改為深色模式 (持續更新)

為什麼要用黑色呢，基於下面幾點理由，我愛把所有介面改為黑色介面

  • 我爽，沒別的
  • 顧眼睛
  • 省電

顧眼睛

除了第一點以外，是我個人因素外，長時間的使用電腦的朋友都該使用暗黑模式，因為暗黑模式能減少強光對眼睛的傷害，所有我們螢幕看到的顏色都是由三原色光紅色、綠色、藍色三種色光混合而成，尤其是白色，就是紅、綠、藍三種光線累加而成，而黑色正好相反，沒有光線就是黑色。

長期光線照射眼睛會造成眼睛傷害，反之，減少光線的照射能降低長時間使用電腦對眼睛的危害。

省電

不要覺得我在唬爛，暗黑模式也能省電，筆電或手機最消耗電力的就是顯示器，光是需要電力轉換，顯示器顯示光線的原理也是同一上段使用紅、綠、藍三種光線累加混合而成，黑色則為不發光，所以暗黑模式則會減少光的輸出，也就會減少電力消耗，增加續航力。

開始越來越多軟體介面或網頁介面開始支援暗黑介面，只是每一個軟體或服務的暗黑模式名稱略有不同，有的叫深色模式、有的叫夜間模式、黑暗、深色，都一樣就是把解面變成黑嚕嚕就對了，本篇就來教大家怎麼把一些常用的軟體或網路服務改成黑嚕嚕模式

Google 網頁搜尋深色模式

Windows 10 黑暗模式

win 10 也加入暗黑模式的支援，可以讓視窗跟一些兼容Windows佈景主題的應用程式都變成暗黑模式

Chrome 黑暗模式

依照官方文件說明，Windows 10 以上版本只要跟上一段介紹的佈景主題設定為「深色」即可，必要時重新開啟 Chrome 瀏覽器

官方文件：使用深色模式或深色主題瀏覽
https://support.google.com/chrome/answer/9275525?co=GENIE.Platform%3DDesktop&hl=zh-Hant

還想更黑一點嗎？

Chrome 極致黑

https://agirls.aotter.net/post/56218

Edge 黑暗模式

Firefox 黑暗模式

最早預設就是黑色的瀏覽器，但有可能手賤設定跑掉了，可以看這邊設定回來

Facebook 黑暗模式

facebook 需要先切換至新版本才能啟用深色模式，右上角三角形典下去，選取夜間模式

Line 黑暗模式

YouTube 黑暗模式

Gmail 黑暗模式

美中不足，那撰寫按鈕是怎樣，太不合群了吧

Twitter 推特黑暗模式

XMind 2020 黑暗模式

SourceTree 黑暗模式

工具 > 選項 > Theme > Dark

Android Studio 黑暗模式

Configure > Settings
Appearance & Behavior > Appearance > Theme > High contrast

Github 黑暗模式

Setting > Appearance > Theme > Dark

[……]

閱讀更多