一群棒子

Vue

Vue 直接 call filter 的使用方法

使用 vue2 當中經常會用 filter 來處理資料顯示的格式，好處是不會動到原本的 data，通常都會將方法全域註冊在 vue 中，如果每個 component 都要定義一遍實在是不夠 dry 。

Nuxt

Nuxt layout import 不同的 css

突然遇到了一個比較特殊的狀況，想要將兩包 vue 檔案整合進一個 nuxt 專案，各個 vue 檔案已經有了 css 樣式，如果全部都整合進 global css 內會有樣式互相覆蓋的問題。

jQuery

jQuery prop vs attr

最近因為寫了一個套件必須更改 HTML 的狀態，所以一直在跟 jQuery 的 prop() 跟 attr()`之間打轉，以往都是需要用到才去查用法，一時之間還真的不清楚的差別在哪裡。

筆記

WordPress 上傳圖片至 S3

WordPress 透過外掛 Offload Media Lite 將既有的圖片上傳至外連空間。簡單的外掛組合技，讓你不需要花錢買外掛功能。

筆記

WordPress 搬遷至 Ghost CMS

沒錯，我們搬家了！拖了好久終於從 WordPress 搬家到 Ghost 上了，拖延了一年多沒有寫文章後終於有了新的動力。簡短說明一下原因：太多的技術債了，大部分是伺服器（都是我自己搞出來的🤡） Markdown 一直被轉存為 HTML（這個我超怒）版型懶得重寫速度有夠慢我只想好好寫部落格簡單來說，我很懶要是有人需要從 WordPress 轉到 Ghost 上，可以參考我的筆記事前準備 WordPress 安裝 Ghost 外掛安裝 Categories to Tags Converter 將分類轉為 Tag 如果你有詳細看他的外掛說明 Tags will be migrated, but not categories. If needed you

Cloudflare

Cloudflare + Heroku 部署流程

簡單的筆記如何將 Domain Name Server 託管給 Cloudflare 將網址公開對外。 Cloudflare 先建立一個專案，並且將 Domain Name Server 給 Cloudflare 託管 Heroku 在 settings 頁面建立一個 SSL Certificate 在Domains區塊建立對外的 Domain Name 回到 Cloudflare DNS 分頁建立 CNAME Name 輸入剛剛在 Heroku 建立的對外 Domain Name名稱 Content 則輸入 Heroku 自己建立的專案名稱網址 ${project_name}.herokuapp.com 打開 HTTPS 如果你有需要的話

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 $category) { add_rewrite_rule("^({$category})/(\d+

Docker

.drone.yml 設定檔範例

將.drone.yml的檔案放在專案的根目錄下，這樣 drone 的伺服器接受到 GitHub、 Gitlab時，會去讀取專案底下的.drone.yml，才知道流程該怎麼走。 .drone.yml的設定範例： pipeline: build: image: node:latest commands: - npm install - npm run build deploy: image: tmaier/docker-compose:latest commands: - docker-compose up -d --build - docker rmi $(docker images --filter "dangling=true" -q --no-trunc)

Docker

Nginx 反向代理 drone 的設定檔

server { listen 80; listen [::]:80; server_name drone.a-wei.tw; location / { proxy_set_header X-Forwarded-For $remote_addr; # 這些設定要記得加，不然資料帶不到裡面的伺服器 proxy_set_header X-Forwarded-Proto $scheme; # 這些設定要記得加，不然資料帶不到裡面的伺服器 proxy_pass http://127.0.0.1:3000; # 看 drone 服務在哪 } }

Docker

GitHub 專案跑自動化測試與部署：drone

這邊直接使用 Docker 的方式建立 drone 的環境。下方的設定檔是 docker-compose.yml 的範例： version: '2' services: drone-server: image: drone/drone:latest ports: - 3000:8000 # 外層的port：drone server 的 port - 9000:9000 volumes: - ./data:/var/lib/drone # drone 的資料庫 restart: always environment: - DRONE_OPEN=true - DRONE_HOST= {{}} # 實際對外的 HOST（

ruby

Middleman How to Localization Data Files

Middleman 是 Ruby 語言撰寫的框架，用於快速地產生靜態網頁，記錄使用 middleman 用到 data files 功能如何搭配 i18n 實現多國語言。啟用 i18n 功能 Localization (i18n) 寫到 config.rb 內開啟 i18n 功能，個人的配置如下 activate :i18n, :path => "/:locale/",:mount_at_root => :en 意思就是主語言為 en 並將對應的語言放置於自己的資料夾內，輸出資料如圖：啟用 Data Files Data Files 照官方文件使用起來也沒有太大難度，資料夾放在專案根目錄，只要重新啟動 middleman

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的程式不關閉，你的程式碼將會常駐於記憶體中。

ruby

使用 rvm 管理 Ruby 版本

對於前端開發 nvm 這個套件相信大家一定不陌生，rvm 就如同 nvm 的功能是用來管理 ruby 版本的套件，順道紀錄 macOS 如何安裝 rvm，那麼就來看看怎麼安裝他吧。安裝與使用網站 https://rvm.io/ 也有教學與使用方法。 \curl -sSL https://get.rvm.io | bash -s stable 接著可以下 rvm -v 檢查指令是否正確安裝與版本。如果出現 command not found 的話記得要去 source ~/.zshrc 或是 source ~/.bashrc 或是關掉重開終端機。 rvm list known 可以列出 ruby 版本

BEM modifier 寫 SCSS 子元素樣式的命名問題

使用 BEM 來命名 CSS Class 並且使用 SCSS 來編寫是一件多麼愉快的事情，這不僅能讓 CSS 模組化（複用行高）以外，甚至能更加語意化（乾淨的程式碼）。 BEM 的範例如下： <div class='menu'> <div class='menu__item menu__item--is-active'> <a href="#" class='menu__link'>John Doe</a> </div> </div>

筆記

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

Let\’s encrypt 是一個非常有名的數位憑證認證機構，它提供了免費的 SSL 憑證服務，就是你網址左邊的綠色鎖頭 (HTTPS)，這件事情在許多的網域商或是主機商是需要付費購買憑證的。Let\’s encrypt 雖然免費可是每次憑證的有效期限是三個月所以每到時間我們就必須去更新憑證。 certbot 是一個非常好用的機器人，他可以簡單的幫我們網站掛上 SSL 憑證，唯一缺點就是如果使用者對指令介面不熟系，可能要花一點時間去研究它了;剛剛提到的三個月就必須更新憑證這件事，身為一名高端的工程師自動的事情當然要交給程式來解決囉。安裝與放上憑證直接在官網上 https://certbot.eff.org/ 選擇你的系統跟你的 webserver 就會看到相對應的安裝方法，這個部分應該就不多贅述，網路上的教學也很完整。 ### 會遇到的問題 certbot 當然憑證不能亂簽他會去驗證網址是否歸你所有，所以他會去你的網址底下放驗證檔案來確保不被亂用，在這時候你可能會遇到驗證失敗原因為驗證網址為 403 / 404 這兩種的問題，所以我們需要去調整 webserver 的設定，如果你不熟系還是建議你不要亂動比較好。以下為 nginx 相關設定 location

筆記

禁止 Google 翻譯特定元素

紀錄如何讓 google 翻譯不要翻譯特定的元素，起因很簡單：$1234 在瀏覽器語言第一順位為英文，使用者翻譯中文很有可能會被翻譯為1234 美金，當然你也不能限制使用者如何操作為了避免不必要的麻煩還是加上會比較好。實作 <div class="notranslate" translate="no">hello</div> 恩對，就是這麼簡單，translate="no" 這個屬性未必會有作用，個人測試對 google 翻譯是沒有效果的，反倒是 class="notranslate" 效果很正常。參考資料 HTML translate Attribute

筆記

JavaScript 陣列求交集、差集

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

JavaScript

使用 Node.js 套件 Puppeteer 撰寫爬蟲

Puppeteer 是 Google 開源的網路爬蟲工具，說明文黨一開始就提到 Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. 主要是以 Chrome 當作核心個人使用起來感覺，就是使用程式去操作瀏覽器而已。範例 const puppeteer = require("puppeteer") exports.getPageTitle = async url => { const browser = await puppeteer.launch() const page = await browser.newPage(

JavaScript

JavaScript HTMLCollection / NodeList 轉 Array 的方法

如果習慣用 jQuery 的朋友某天改使用 Vanilla JS 選擇器一定會先矇一下，怎麼很多方法不能使用，錯誤訊息為.forEach is not a function 例如範例 document.getElementsByTagName('h3').forEach((el)=>{ console.log(el) }) 如果你看仔細一點其實會發現 document.getElementsByTagName 其實是 HTMLCollection 又或是 document.querySelectorAll('h3') 會給你 NodeList HTMLCollection 與 NodeList 差別那你會問兩個差別在哪？簡單來說 HTMLCollection 會是隨著 DOM 改變而一起變動，NodeList 則不一定，蛤！？舉個例子 let mainDOM

筆記

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

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

筆記

Chrome Resource Override 插件開發技巧

身為前端工程師通常都習慣在本地開發程式，大多的專案都是 HTML CSS JavaScript 三者成一組，所以在開發上本機還原也是相當簡單的，如果專案是因為環境上的因素無法在本機還原呢？像是程式必須在測試機才看得到效果、又或是使用 JSP 輸出 HTML 模板而你又無法安裝 JAVA 環境，這時在開發上就有點綁手綁腳了。 Resource Override 遇到這種情況我都會使用 chrome 的插件 Resource Override 使用起來也是非常的直觀，在你的開發面板會看到一個新的分頁，Overrides 他可以做到 URL 對 URL URL 對程式碼插入程式碼修改請求 Headers 適用情境本地端不想/無法還原，只能在線上端觀看結果組合技一開始覺得不段貼上程式碼很沒效率一直想有沒有更快的方式，其實 URL 對 URL 這個 Rules 可以接受本地端的路徑，

JavaScript

JavaScript 使用 Web Speech Recognition 語音辨識

最近工作上有實作到語音辨識輸入這功能，不過在文件上並不是那麼清楚所以寫一篇筆記來紀錄事件觸發的順序。瀏覽器支援度可以用 Can I use 這個網站看看瀏覽器的支援度，恩..基本上只有 Chrome 有辦法使用。手機更不用說了 iOS 全滅只有 Android 手機有辦法使用。判斷是否有支援語音辨識可以用以下程式碼 window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition if(!window.SpeechRecognition){ return } const recognition = new SpeechRecognition() 如果你直接 new SpeechRecognition() 就會 Uncaught ReferenceError: SpeechRecognition is not defined 事件觸發順序礙於文件上的翻譯不完全，就字面上也不太清楚何時會觸發所幸自己直接全部都盤過一遍。語音辨識正確的事件順序 onstart onaudiostart onsoundstart onspeechstart

Microsoft Office Online Video攻擊概念

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

筆記

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

相信在寫前端樣式時時常都會遇到一個問題，就是元素過寬造成出現捲動軸或是手機可以拖移至螢幕外諸如此類的問題，最土法煉鋼的除錯方式就是一層一層地慢慢下 display:none 看是哪一個元素太寬造成破版，直到最近發現有一位大神寫了一段簡短的 js code 幫助 debug。解決方案 [].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)}) 只要將上面這段 code 貼在你的 console 內就可以看到效果，馬上就可以知道是哪一個元素在搞鬼了。參考資料 108 byte CSS Layout Debugger

Gutenberg

WordPress Gutenberg 編輯器撰寫 markdown

身為一名高端的工程師一直追逐著最新的技術，這幾天默默的升級到了 5.0 直到剛剛才發現一件事情，欸我的 markdown 跑哪裡去了，新的編輯器怎麼寫 markdown ? 在網路上搜尋了一下才找到答案。圖解我一直都是使用 Jetpack 的 markdown 功能如果你不知道怎麼開啟的話請看下圖，他在 Jetpack 的設定內。 jetpack 啟用 markdown 接著進到編輯器的畫面 gutenberg 使用 makrdown 試著切換預覽模式看看預覽切換 gutenberg 編輯器算是一個很重大的改變，連我自己都還在習慣當中不過對我這種打打文章的人來說使用 markdown 格式還是最簡單的方式。