一群棒子的技術部落格

筆記

Yes 我搬家了

沒錯,我們搬家了!拖了好久終於從 WordPress 搬家到 Ghost 上了 順手筆記一下要做的事情 事前準備 WordPress 安裝 Ghost 外掛 將分類轉為 Tag 因為 Ghost 不支援分類,只有 Tag 將圖片上傳至 S3 等外部空間,雖然 Ghost 外掛會幫你把媒體庫的圖片一起打包出來,我只是存粹想求保險一點 伺服器上安裝 Ghost cms 可以參考 How to Install Ghost CMS on Ubuntu 18.04 LTS 使用 Ghost CLI

WordPress

WordPress 使用 add_rewrite_rule 方法建立一個新的 route

在許多的網頁框架當中要建立一個 route 並不是一件困難的事情,可是在 WordPress 當中並不是很直覺,這牽扯到了 WordPress 的運行機制。那麼你會說 permalink 不能夠滿足你的需求嗎?就程式面來說確實不夠彈性,對我來說。 例如:一個 url 要顯示滿足條件的文章內容,條件來自於 acf 欄位的值,以permalink 確實沒法辦到,所以就自己寫程式解決。 程式碼 要自己開一個客製化外掛,還是寫在子版型內都可以,只要 hook 有被呼叫到就可以了。 function bonze_add_rewrite_rule() { $categories = ['classrooms', 'people', 'projects', 'reports', 'videos']; foreach ($categories as

Language

Nuxt.js SSR記憶體溢出

最近公司的產品在伺服器經常遇到當有大量的請求時,伺服器記憶體的使用量會急遽的往上提升。以正常的GC運作方式,理論上經過一段時間後,這些資源應該要立即收回,但卻發現並不是這一回事,導致伺服器經常當機。這個問題困擾了我們對於整個產品的後續維護,因此我開始著手進行問題排除,經過排除後有幾點想將它記錄下來,以免在花同樣的時間除錯。 禁止在伺服器寫下這些程式 setInterval and setTimeout 記住別在伺服器上寫下event loop,因為你沒有機會在任何地方可以取消它們,儘管你知道要取消,因為在Nuxt SSR的hook中,並沒有提供這樣的鉤子讓你解除。 在beforeMount之前所有的鉤子都會在Nuxt SSR執行,但很可惜的是之後所以的hook(destroyed)這類的,都不會在伺服器端執行,這意味著你只能做一次性的程式碼執行。 請確認插件是否必須在伺服器上運行 請確認你想要裝的插件是真的必須在伺服器做完在交給客戶端嗎?有些套件其實是可以交給客戶端自行處理的,比如像是bootstrap-vue,如果你將它放在伺服器端處理,這意味著它會在伺服器中運行,並且常駐在記憶體中。 必須確認arrow function是否有影響到global 請確保this不要指向到global,否則只要node的程式不關閉,你的程式碼將會常駐於記憶體中。

  • a65162
    a65162
Let's encrypt 使用 certbot 幫網站掛上 SSL
筆記

Let's encrypt 使用 certbot 幫網站掛上 SSL

Let\\’s encrypt 是一個非常有名的數位憑證認證機構,它提供了免費的 SSL 憑證服務,就是你網址左邊的綠色鎖頭 (HTTPS),這件事情在許多的網域商或是主機商是需要付費購買憑證的。Let\\’s encrypt 雖然免費可是每次憑證的有效期限是三個月所以每到時間我們就必須去更新憑證。 certbot 是一個非常好用的機器人,他可以簡單的幫我們網站掛上 SSL 憑證,唯一缺點就是如果使用者對指令介面不熟系,可能要花一點時間去研究它了;剛剛提到的三個月就必須更新憑證這件事,身為一名高端的工程師自動的事情當然要交給程式來解決囉。 ### 安裝與放上憑證 直接在官網上 https:

JavaScript 陣列求交集、差集
筆記

JavaScript 陣列求交集、差集

在面試題目中常遇到的題目,陣列的交集、差集、補集等這類的題目,記錄一篇解法與自己的理解以便於加深自己的印象,不囉唆直接上 code 。 使用方法 Array.filter filter() 方法會建立一個經指定之函式運算後,由原陣列中通過該函式檢驗之元素所構成的新陣列。 Set Set 物件可讓你儲存任何類型的唯一值(unique),不論是基本型別(primitive)值或物件參考(references)。 jQuery 大家的好朋友就不用多說了 交集 求出兩個陣列的交集 Array.filter let arr1 = [1,

這一年來我所看見的技術債
筆記

這一年來我所看見的技術債

到職到現在也快一年,一位前輩說過大約一年就可以看清楚一間公司的全貌,趁著放假的時間好好的整理一下一年間所看到的東西,這並不是抱怨文或什麼,只是想紀錄也以此為借鏡避免自己犯下同樣的錯誤。有一位前輩說過到哪邊都有技術債只是看你能不能接受,一個大型的專案有技術債也是很正常的事情時間上的壓力、上頭主管的決策、技術力上的不足都是導致技術債的原因,還債的也不一定是你,搞不好是後續接手專案的人。 歷史悠久的專案 我參與的專案算是很大型的電商平台系統,看程式碼上的註解時間沒 10 年有也有 5 年。既然這麼久的專案一定埋藏著許多技術債,經常你解決一個問題會延伸出兩個以上的問題。 沒有技術文件 恩對,整個專案都沒有技術文件,功能壞了要問誰?沒人知道他是幹嘛的這些事情很常發生,畢竟沒有技術文件留下來,全都是口頭的傳承或是當事人明瞭,隨著人員流動知識也消失了。 義大利麵程式碼 這個專案是:

Chrome Resource Override 插件開發技巧
筆記

Chrome Resource Override 插件開發技巧

身為前端工程師通常都習慣在本地開發程式,大多的專案都是 HTML CSS JavaScript 三者成一組,所以在開發上本機還原也是相當簡單的,如果專案是因為環境上的因素無法在本機還原呢?像是程式必須在測試機才看得到效果、又或是使用 JSP 輸出 HTML 模板而你又無法安裝 JAVA 環境,這時在開發上就有點綁手綁腳了。 Resource Override 遇到這種情況我都會使用 chrome 的插件 Resource Override 使用起來也是非常的直觀,在你的開發面板會看到一個新的分頁,Overrides 他可以做到 URL 對

JavaScript 使用 Web Speech Recognition 語音辨識
JavaScript

JavaScript 使用 Web Speech Recognition 語音辨識

最近工作上有實作到語音辨識輸入這功能,不過在文件上並不是那麼清楚所以寫一篇筆記來紀錄事件觸發的順序。  瀏覽器支援度 可以用 Can I use 這個網站看看瀏覽器的支援度,恩..基本上只有 Chrome 有辦法使用。手機更不用說了 iOS 全滅只有 Android 手機有辦法使用。 判斷是否有支援語音辨識可以用以下程式碼 window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition if(!window.SpeechRecognition){ return } const recognition

Microsoft Office Online Video攻擊概念

Microsoft Office Online Video攻擊概念

起因 最近在接觸一個要收錢的掃毒&檔案清洗的程式OPSWAT,要掃毒當然自己得要有毒才行,所以在網路上找了一個word的攻擊概念驗證的文章,來進行今天的介紹。 接下來就讓我們開始吧! 過程 首先打開一個word,切換到插入點擊線上視訊 我們這邊成功放入一個可撥放的影片。 接著我們存檔,並開始下一階段。 針對word檔做解壓縮。 接著我們進入word資料夾內編寫document.xml檔 搜尋 embeddedHtml 關鍵字,並對內容作修改,這邊我就不把我修改內容貼上了。 修改完並存檔後,我們重新壓縮這個word並重新命名 結果 接著打開檔案並點擊影片,會發現跳出一個下載提示!! 使用掃毒進去查看,眾多軟體只有一家抓到…

如何除錯元素 CSS 過寬而造成捲動軸
筆記

如何除錯元素 CSS 過寬而造成捲動軸

相信在寫前端樣式時時常都會遇到一個問題,就是元素過寬造成出現捲動軸或是手機可以拖移至螢幕外諸如此類的問題,最土法煉鋼的除錯方式就是一層一層地慢慢下 display:none 看是哪一個元素太寬造成破版,直到最近發現有一位大神寫了一段簡短的 js code 幫助 debug。 解決方案 [].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<

WordPress Gutenberg 編輯器撰寫 markdown
Gutenberg

WordPress Gutenberg 編輯器撰寫 markdown

身為一名高端的工程師一直追逐著最新的技術,這幾天默默的升級到了 5.0 直到剛剛才發現一件事情,欸我的 markdown 跑哪裡去了,新的編輯器怎麼寫 markdown ? 在網路上搜尋了一下才找到答案。 圖解 我一直都是使用 Jetpack 的 markdown 功能如果你不知道怎麼開啟的話請看下圖,他在 Jetpack 的設定內。 jetpack 啟用 markdown 接著進到編輯器的畫面 gutenberg 使用 makrdown 試著切換預覽模式看看 預覽切換 gutenberg

JavaScript 非同步大亂鬥
JavaScript

JavaScript 非同步大亂鬥

大家都知道 js 的非同步特性,這是一把雙面刃有時一些奇怪的 bug 也是因為非同步的問題,現在 es6 的語法已經讓我們可以很簡單的去操作避免掉非同步的一些問題,回過頭來還是必須要去深入理解基本功這件事情。 同步與非同步 同步(Synchronous) 與 非同步(Asynchronous) 這兩個名詞大家一定不陌生,以下用自己的認知來闡述這兩件事情,我們以一個餐廳的服務生當做例子。 非同步:餐廳內的一個服務生可以點餐完將菜單交給廚房的廚師,並且接著服務下一桌客人等到廚房將餐點準備好可以出菜時再回來將餐點送到顧客的桌上。 同步:餐廳內的一個服務生點餐完之後將菜單交給廚房,就在廚房等待廚師將餐點準備完畢將菜送到顧客桌上,才會再繼續服務下一桌的客人。 看出來了嗎?兩著的差別在於服務生點餐完之後是否有繼續服務下一桌客人,以 Node

從零開始的機器學習生活 – TensorFlow.js 學習顏色分類
筆記

從零開始的機器學習生活 – TensorFlow.js 學習顏色分類

在前面幾篇文章補足了一些基本知識之後,接著我們就可以進行一些基本的練習,本次做的是透過機器學習辨識顏色,下面將會附上程式碼以及 github page。如果你是 IOS 12 或是 Android 9 這些較新版本手機使用者,會有無法運算的 BUG 存在,只能靜待修復了。 資料 在寫程式之前,我們先談論關於資料來源這件事情,你可以自己收集資料、根據規則用程式產生資料(ex:衣服尺寸表)或是用 google 的 Dataset Search 本次的資料來源則用教學