FPs

Articles by FangPeishi

基于OpenResty 的whoami.akaimai.net 实现

上次收集整理Local DNS 地址 的时候看到akamai 的whoami.akamai.net,想起之前看到agentzh 基于OpenResty实现了一个权威DNS 服务器,感觉可以用openresty 简单快速的实现。

找到agentzh 当时的 gist,第一次学习OpenResty ,决定照猫画虎。看起来要在OpenResty 里面接受dns 数据包,并且返回,需要用到stream-lua-nginx-module这个模块,这里要注意的时候,截至目前(2017-08-30) master 分支还不支持 ngx.req.udp_socket ,agentzh 当时hack 的代码都在 bloody-dns-server 分支下面。

Continue ->

獲取Local DNS 地址信息

在網頁中獲取local dns 不太方便,看看大家是怎麼做的。

阿里雲CDN 診斷工具

阿里雲CDN提供的阿里昆仑用户诊断工具
alicdn_local_dns

獲取到local dns 的這個請求:

https://123-66-35-57-122894414.dns-detect.alicdn.com/api/cdnDetectHttps?method=commitDetectHttps&detectId=122894414&cb=jQuery110102821084573750223_1503489263656&_=1503489263658

一個奇怪的域名,每次訪問都不一樣:
123-66-35-57-122894414.dns-detect.alicdn.com
設備ID :
detectId=122894414

用戶訪問一個域名,瀏覽器給按照分配的local dns 發起dns 迭代查詢,最後向域名的權威服務器名查詢,最後這一步的時候可以得到local dns 的地址。

Continue ->

給Pelican 添加Twitter Card

之前發Tweet 的時候,發現有些鏈接能夠被識別出內容,帶着一個“卡片”。

例如:

twitter_card_demo

twitter_card_demo_2

一開始以爲是Twitter 對某些網站的特殊照顧,最近喵了下某個網址的源碼,才明白是需要自己設置的。

twitter_card_meta

  • twitter:card 是類型,常見的有summary 和summary_large_image
  • twitter:site 是網站的twitter 帳號
  • twitter:title 卡片顯示的標題
  • twitter:description 卡片顯示的內容概述
  • twitter:images 卡片中的圖片

細節可以參考:Twitter Developer Documentation

對於我的個人博客來說,summary 類似的卡片就夠用了,給每篇文章找個配圖也挺累的。

博客是用Pelican 生成的,找了一下插件,果然有一個,我fork 了下,修了一個bug :twitter_card

按照插件的說明搞完之後,測試一下,可以用這個工具:Card validator

twitter_card_validator

搞定,然而並沒有什麼卵用。


Pelican插件:CDN Support

之前用WordPress 做博客的時候,用過一個WP Super Cache 的插件,
這個插件可以把WordPress 的頁面靜態化,然後用內存或者磁盤等做緩存,提升性能。

其中有個選項是開啓CDN 支持,開啓這種功能之後,插件會把所有指向本站的靜態資源(CSS,JS,各類圖片)的URL 替換爲CDN 的URL,當然填入的CDN 域名需要配置好回源。

wp-super-cache 圖片來源:keycdn.com

最近幫妹子做了一個網站(s.fangpeishi.com),想着各種優化,又想起這事。這個網站是用Pelican 生成的,所有就有了這個插件。

Continue ->

ip.fangpeishi.com

server {
    listen 80;
    server_name ip.fangpeishi.com;
    location / {
        default_type text/plain;
        return 200 "$remote_addr\n";
    }
}

获取外网IP,给自己在某些脚本里面用,没有查询地址、运营商的需求。


圖片優化筆記

這裏說的圖片優化,目標是想儘可能降低圖片大小,但又要保證質量不錯,非常矛盾。不過降低圖片大小,可以剩一大筆流量錢,降低負載,還能提升用戶體驗,值得花點功夫。

前端方面有一些關於圖片加載速度的優化,例如CSS 畫圖,CSS 合併素材,甚至用CSS 把圖片Base64 編碼(不推薦),和這份筆記關係不大。

格式選擇

不同的需求選擇不同的格式, JPEG 能夠滿足的需求沒必要選擇PNG。

format-tree

Continue ->

基於IRC 的同站聊天

circ

整理筆記發現一個大學時候的idea,那會玩IRC 的時候試用過circ這個Chrome 插件,冒出來一個想法:

基於CIRC 實現同站聊天,即在irc 上自動創建一個網站域名的頻道,瀏覽者在瀏覽網站時可以右鍵快速打開加入。

不過由於當時不熟悉JavaScipt 以及其他原因就擱置了。現在翻出來,想着把它給實現了。先找到circ 的源代碼(作者開源了),看了下有點頭大,又找了《Chrome 擴展及應用開發》這本書,看了幾章,到第六章的時候才發現circ 是一個chrome 應用,不是一個擴展,所以很多權限會受限制。我想在右鍵添加的contextMenus好像只能用於擴展,另外要獲取當前瀏覽頁面的URL,也只有擴展能拿到?

頓時信心大失,放棄了,寫一篇文章記錄下,希望有一天哪個高手看到能把這個idea 實現了。XD


htop 解釋

"Explanation of everything you can see in htop/top on Linux"

“解釋你在Linux 上htop/top 中看到的所有內容”

很長一段時間我都不清楚htop 中所有內容的意思。
我曾經以爲我的雙核機器上1.0的平均負載意味着CPU 利用率是50%。這並不完全正確。而且,爲什麼是1.0呢?

我決定查清楚,並記錄成這份文檔。

大家也都說,學習事物的最好方式是通過教別人。

Ubuntu Server 16.04 x64 上的htop

這是一張我要解釋的htop 截圖。
canyoukillit-before

Continue ->

《極客與團隊》讀書筆記

team_geek_cover

《极客与团队》這本書是在看《技术管理猪鸡-1 开篇》注意到的:

Google 的芝加哥 office 有两个技术领导:Brian Fitzpatrick 和 Ben Collins-Sussman。他们合写了一本书,叫做 Team Geek。

這本書的副標題是“软件工程师的团队生存秘笈”,畢業一年認識到和同事合作、如何更高效的推進工作也十分重要,正如作者在書一開始提到了書的宗旨:

本書旨在幫助程序員改進理解他人、與人溝通,以及與人合作的能力,進而使其在編寫軟件的過程中變的更有效率。

這本書的核心是“HRT”,即“謙虛”,“尊重”,“信任”,不算是什麼祕訣,但卻非常難做到,一遍讀,一遍想着工作中的一幕幕,感慨良多,希望能在閱讀完這本書之後,在下一份工作中有更好的表現吧。
把書中的內容要點,以及一些隨想簡單的記錄如下,方便日後查閱。
Continue ->