jimmy8646

jimmy8646

因緣際會之下接觸了 Drupal CMS 慢慢學會了寫程式,在參加了一日班之後用 Laravel Framework 找到了工程師的工作,碰上公司改組轉而成為了前端工程師,因為技術線是 Vue 所以我是 Vue 派的XD 現在公司的技術線是用 Ruby on Rails ,偶而會碰碰行銷案當個切版工。 現在覺得最難的事情是增肌,同時是個衝浪、滑板的初學者。

📍 Taipei
CSS 控制 SVG 顏色
筆記

CSS 控制 SVG 顏色

在製作網站上面,很多時候 icon 都會使用 svg 檔案來顯示,好處就是就算是放大縮小也不需要擔心失真的問題。 通常拿到 svg 檔案時,在前端使用之前都會先進行一陣加工,像是移除空白的 group 標籤 不過最常用的就是,svg 檔案,顏色隨著 parent css 一起改變,這個時候可以將 fill 與 stroke 改為 currentColor 如此一來顏色就會隨著 css color 一起改變了。

WordPress 搬遷至 Ghost CMS
筆記

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 + Heroku 部署流程
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+

Middleman How to Localization Data Files
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

使用 rvm 管理 Ruby 版本
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 版本

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

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 翻譯特定元素

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

JavaScript 陣列求交集、差集
筆記

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(

使用 Node.js 套件 Puppeteer 撰寫爬蟲
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(