Vue Cli with webpack 在v-bind:src的路徑編譯問題

最近在使用Vue Cli寫專案練習,把一些小坑的地方紀錄一下,當用Vue.js動態產生v-bind:src中的路徑時,webpack的htmlloader 或image-loader不會自動把你的路徑編譯到static下去產生。範例如下:

這邊就可以看到原本在開發的相對路徑不會自動被編譯,npm run dev後,圖片會出不來。以下改動一個地方就搞定了~webpack裏就是甚麼是一個元件,透過require就可以拉入

再次執行npm run dev,一切就順利囉!

如何清除在MacOS 上Chrome的DNS Cache

有時候清不掉DNS cache很煩人,尤其是正在趕案子的時候,然後搜尋的怎麼清除Chrome上DNS cache,搞了半天才找出正確答案,就此紀錄一下。

  • 首先在chrome的網址列輸入 chrome://net-internals/#dns
  • 在最右上角的箭頭中按下去之後,點選

    如圖所示:

  • 最後開啟command line工具輸入以下兩個指令:
  • 搞定收工!

Let’s Encrypt 如何使用Certbot免費做https網址的ssl加密認證

自從google開始在2014年起推行了https everywhere的口號,並在搜索排名中把有https的SEO排前,現在所有的網路連線幾乎可以是沒有https不行了,尤其連遊覽器都鄙視http時,怎麼做ssl已經是必要技能了。

還好,Let’s Encrypt推出來免費的ssl的服務,造福我們這種沒錢買ssl認證的平民老百姓啊,現在就來看一下怎麼簡單做到ssl認證,並自可以自動更新憑證吧!

首先安裝certbot,先到CertBot選擇作業系統跟http服務器

以下是nginx + debain 8的範例

裝好後,就可以開始certify 你的網址了

現在做ssl的https認證加密就是這麼簡單啦,Certbot連nginx裏的設定檔都會幫你改好,還會詢問是否全部轉向https等等選項,就看自己需求了!

用GVM安裝Golang環境及版本控制

最近看了一些Golang的教程,也試著照著官方的文件安裝了golang,但是會遇到個問題,golang版本更新很快,有時候線上跑的是1.7,可是1.8已經release了,但是又想使用1.8的新feature來開發。

也發現了golang在版本上面升級也很麻煩,apt-get install 永遠都是舊的版本,所以找到了GVM (Golang Version Manager)來安裝,並控制golang使用的版本,真是大神幫忙啊!

以下為安裝指南

  1. 安裝GVM

  2. 首先得安裝go 1.4 from Binary,不然其他都會裝不進去,然後開始使用

  3. 列出所有已安裝的版本

  4. 列出所有可安裝的版本

  5. 移除gvm以及所有安裝的go版本

  6. 安裝並使用最新的golang 1.9.2版

  7. 設定開發環境path的自定義檔

對了,裝GVM之前看一下原廠文件,有一些package得先安裝完成,Okay完工,請快樂開始使用Golang吧!NodeJs大神都從Node轉到Golang了,時勢所趨啊。

  1. 後續的開發環境設定Golang的Work space請參考以下這篇:Golang Work space以及開發環境設定

  2. How to Write Go Code

  3. GVM with Go

Vue Router 怎麼去設每頁的Title

最近要研究如何用Vue & Vue Router作SPA(Single Page App),但是寫到一半發現怎麼Title都是一樣的,這樣頁面的說明性可能不夠,且在Google搜尋結果的頁面說明也不好懂,於是再看一下文件,終於發現了Vue Router的導航守衛要怎麼設定,以下就是範例:

記錄一下,免得還要重新找~

參考資料:

  1. vue及vue-router程序的title修改
  2. 导航守卫 Vue Router

Vue vs React差異的分析

最近因為一些小型網頁的需求,想說順便來研究一下react的寫法,開始把一些書跟網路教學範例都試著上手一下,一作下去,簡直是個大坑!

雖然之前已經把npm, yarn, nodejs, webpack稍微上手了!但是還是覺得react學習曲線很陡峭,很多寫法也非常不直覺!在要不要繼續往下深入時,就開始找一些文章來看,比較Vue跟React的差異,發現不少人也是因為React的寫法跟css in js and html in js的語法感到困惑或是難以上手,進而投入Vue。

一發現新大陸後,馬上轉向Vue開始研究,發現真的比React好上手很多,而且還是可以維持html css javascript三者分離並互相控制達到簡化程式邏輯的概念,不需要全部混在一起!至少在邏輯上也很清楚,而且在製作元件時,也不太需要去管怎麼雙向綁定資料或是狀態更新等等的status設定跟function重複撰寫,只要綁定後就會自己updateUI!真的很爽,感覺很像jQuery這種利器,所以Vue vs React感覺很像上一個世代的jQuery vs YUI的感覺,一個好上手,一個可以客製化很多api與事件!但是就我的目前的使用模式,基本上是好上手是最重要的,這樣比較好找人維護。而且Vue感覺是集Angular跟React各自的優點而結合,而且creater居然是中國人,中文教學資料超級多!

廢話不多說,馬上用React跟Vue各自寫一個一樣的簡單應用元件,就知道了!

這個元件很簡單,就是以前在做表單檢核時,textarea常需要限制使用者字數,以前寫的時候累死了,要一直計算textarea onchage時,不斷去更新計算字數並顯示在user info欄位中:

React:

Vue:

以上的範例都是做到一樣的效果,這樣就知道我為什麼會只想好好用Vue了吧!XDDD

參考資料:

  1. Vue官方對於React以及Angular的比較說明

Python Crawler 初心者心得

最近開始對於爬蟲蠻有興趣的,現在網路資訊太多了,光是整理各種資訊其實就省了不少時間跟經歷,就開始研究一下怎麼寫。

一開始還是從最熟悉的php開始,寫了些簡單的爬蟲後,遇到一些網頁需要模擬登入後,才能進入到內頁開始爬的狀況,這時候php的缺點就顯現的比較大了,而且很多解法我個人覺得很不直覺外加程式碼超多的,就轉向現在最夯的網路爬蟲程式語言Python。

首先先來看一下php要用curl去抓一個網頁的範例吧:

而python使用requests(pip install request就搞定了)的範例:

一比就知道哪個語言更直覺簡單去寫crawler了,同時python對處理字串也比php更快更簡單!馬上立馬轉向python crawler的懷抱!php掰掰,你還是繼續作套版就好!

另外差異最大的還是在如何模擬登入後,取得user cookie後進行資料爬取,來看一下php要搞的多麻煩:

要自己把cookie存回file裡面,我覺得很麻煩,之後還要在開一個request(帶入cookie)去撈。

而python就相當簡便:

是不是超簡單且方便,上手也很快速!

更棒的事情是,requests module 直接內建支援Oauth!

搞定了,是不是超爽!

另外順道一提,python最好全面使用python3,對於UTF-8的支援度比較好,對於request lib的文件請參考以下連結:requests 文件

參考資料

免費的ssl憑證open source – Let’s encrypt

最近很多ssl的需求,Google開始對於https的網域進行SEO加分,進一步push整個web加入轉換成https的加密連線環境,這已經是勢不可擋的趨勢了!

而好的ssl憑證以前是要用買的而且有些十分昂貴,各大瀏覽器也不見得會完全支援,常常有花了錢卻得到破掉的盾牌這種鳥事發生,但是在去年開始,各大網路公司一起進行了一個open source program 讓大家都可以得到免費且有效的ssl憑證,而這個專案就是Let’s enscrypt!

利用Let’s enscrypt產生ssl憑證:

把整個專案拉下來

獲取ssl憑證

會進入一個畫面,基本上就是填Email跟要Agree後就會產生了。

這邊就可以看到產生了fullchain.pem和privkey.pem這兩個會需要用到的檔案

Nginx Conf 設定

剩下的就照抄之前的設定了,然後重啟nginx即可生效

Auto ReNew 憑證

這個指令可以renew憑證,所以就放入crontab去

把以下這段放進去,就會定時幫我們更新憑證了,這樣就大功告成了!Yes!

參考資料

https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-14-04

https://technologyofkevin.com/?p=470

http://www.ithome.com.tw/news/98767

https://blog.serv.idv.tw/2016/02/letsencrypt-ssl-setting/

http://laravel5-book.kejyun.com/hosting/hosting-install-lets-encrypt.html

http://technews.tw/2016/03/10/lets-encrypt-million/

最後補充一個特別的消息,本來想要讓Amazon CDN cloudfront也設定ssl for customer domain,Amazon在今年一月居然佛心來的送ssl憑證 只要使用他們家的cloudfront服務跟EC2,省了我很多事情,一鍵就搞定了!詳情看:AWS 也推出免費的 SSL Certificate 給 ELB 與 CloudFront 用了

如何設定MAC OSX 初步開發環境

1. 安裝Brew

http://brew.sh/index_zh-tw.html

2. 安裝zsh

參考:http://icarus4.logdown.com/posts/177661-from-bash-to-zsh-setup-tips

即可把bash 換成zsh

3. 安裝oh-my-zsh

設定theme

or

指令參考 https://github.com/robbyrussell/oh-my-zsh/wiki/themes

4. 安裝Vundle管理vim plugin

貼上以下這段即可開始使用

在vim 內執行 :PluginInstall 即可安裝所有的plugin

參考:

5. vim 套件安裝

internet沒什麼大道理

Switch to our desktop site