Posted on

npm module – ioredis介紹

Redis介紹

Redis是REmote DIctionary Server(遠程字典服務器)的縮寫,它以字典結構(key-value鍵值對結構)存儲數據,並允許其他應用通過TCP協議讀寫字典中的內容。所以,redis是一個key-value存儲系統,或者說是一個key-value數據庫。

Redis的內存存儲和持久化Redis數據庫中的所有數據都存儲在內存中。由於內存的讀寫速度遠快於硬盤,因此Redis在性能上對比其他基於硬盤存儲的數據庫有非常明顯的優勢,在一臺普通的筆記本電腦上,edis可以在一秒內讀寫超過十萬個鍵值。將數據存儲在內存中也有問題,例如,程序退出後內存中的數據會丟失。不過 Redis提供了對持久化的支持,即將可以內存中的數據異步寫入到硬盤中,同時不影響繼續提供服務

ioredis介紹


ioredis是一個功能強大的功能強大的Redis客戶,已被世界上最大的在線商務公司阿里巴巴和許多其他了不起的公司所使用。
Continue reading npm module – ioredis介紹

Posted on

用Charles以本地/遠端內容取代網路回應

以本地檔案內容取代網路回應

有時我們在本地開發網頁功能時,若以API的方式去讀取資料,當我們在測試時可能會希望回傳某個固定的response。這時候就可以用Map Local的功能。

使用步驟
1、Save Response
選擇要模擬數據的接口,然後右鍵,選擇“Save Response”
Continue reading 用Charles以本地/遠端內容取代網路回應

Posted on

加解密用的模組 – yeast

模組資訊

模組介紹

yeast是唯一的ID生成器。它的主要目的是生成可用於緩存清除的唯一ID。通常的做法是使用時間戳記,但是使用時間戳記有幾個缺點。

  • 時間戳已經是13個字符了。這可能對1個請求無關緊要,但是如果您發出數百個請求,則這會迅速增加帶寬和處理時間。
  • 它不夠獨特。如果您緊接彼此生成兩個標記,則它們將是相同的,因為計時精度限制為毫秒。

yeast通過以下方式解決了這兩個問題:

  • Compressing the generated timestamp using a custom encode() function that returns a string representation of the number.
  • Seeding the id in case of collision (when the id is identical to the previous one).

模組安裝

npm install –save yeast

模組使用

加載函式庫
‘use strict’;

var yeast = require(‘yeast’);
產生惟一識別ID

console.log(yeast(), yeast(), yeast()); // outputs: KyxidwN KyxidwN.0 KyxidwN.1

setTimeout(function () {
  console.log(yeast()); // outputs: KyxidwO
});

yeast.encode(num)

yeast.encode(+new Date()); // outputs: Kyxjuo1

yeast.decode(str)

var id = yeast(); // holds the value: Kyxl1OU

yeast.decode(id); // outputs: 1439816226334
Posted on 1 Comment

WebSocket與Ajax的不同

WebSocket與Ajax的不同

WebSocket 是HTML5 開始提供的一種在單個TCP 連接上進行全雙工通訊的協議

WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單,允許服務端主動向客戶端推送數據。在WebSocket API 中,瀏覽器和服務器只需要完成一次握手,兩者之間就直接可以創建持久性的連接,並進行雙向數據傳輸。

在WebSocket API 中,瀏覽器和服務器只需要做一個握手(polling)的動作,然後,瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。

現在,很多網站為了實現推送技術,所用的技術都是Ajax 輪詢。輪詢是在特定的的時間間隔(如每1秒),由瀏覽器對服務器發出HTTP請求,然後由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點,即瀏覽器需要不斷的向服務器發出請求,然而HTTP請求可能包含較長的header,其中真正有效的數據可能只是很小的一部分,顯然這樣會浪費很多的帶寬等資源。

HTML5 定義的WebSocket 協議,能更好的節省服務器資源和帶寬,並且能夠更實時地進行通訊。

下圖是兩種方式的對比圖,我們可以看到Ajax是一直相同頻率的http request,而WebSocket在第一次的握手(http)之後就改走WebSocket的路

WebSocket 屬性

Socket.readyState: 屬性readyState表示連接狀態,可以是以下值:

  • 0 – 表示連接尚未建立。
  • 1 – 表示連接已建立,可以進行通信。
  • 2 – 表示連接正在進行關閉。
  • 3 – 表示連接已經關閉或者連接不能打開。

Socket.bufferedAmount: read only屬性bufferedAmount已被send()放入正在隊列中等待傳輸,但是還沒有發出的UTF-8文本字節數。

Posted on

使用Charles抓取手機網路使用

使用Charles抓取手機網路使用資訊

  1. 將電腦和手機連上同一個WIFI網路
  2. 輸入ifconfig(MAC電腦)取得電腦的內網IP,如下圖可得知內網IP為192.168.1.104
  3. 設置Charles上的Proxy settings

  4. 設置手機上的WIFI的PROXY
  5. 此時即可在電腦上看到手機的網路使用狀況
Posted on

Charles介紹 – 好用的封包抓取工具

軟體資訊

軟體介紹

Charles 是在電腦上常用的網路封包截取工具,在做手機APP開發時,我們為了測試與伺服器端的網路通訊,常常需要截取網絡封包來分析。除了在做手機APP開發中測試端口外,Charles也可以用於分析第三方應用的通訊協議。配合Charles 的SSL 功能,Charles 還可以分析Https 協議。

Charles 通過將自己設置成系統的網絡訪問代理服務器,使得所有的網絡訪問請求都通過它來完成,從而實現了網路封包的截取和分析。

Charles 是收費軟件,可以免費試用30 天。試用期過後,未付費的用戶仍然可以繼續使用,但是每次使用時間不能超過30 分鐘,並且啟動時將會有10 秒种的延時。因此,該付費方案對廣大用戶還是相當友好的,即使你長期不付費,也能使用完整的軟件功能。只是當你需要長時間進行封包調試時,會因為Charles 強制關閉而遇到影響。

Charles 主要的功能包括:

  • 截取Http 和Https 網絡封包。
  • 支持重發網絡請求,方便後端調試。
  • 支持修改網絡請求參數。
  • 支持網絡請求的截獲並動態修改。
  • 支持模擬慢速網絡。

軟體使用

1. 開始監聽所有連線

2. 觀看連線資訊

相關教學

Posted on

自適網頁RWD開發心得

最近大家有發現部落格的樣子隨著日子在偷偷的改變嗎?

是的!最近我在進行部落格的版面小修改!
主要訴求是要將版面改版成具有專業感、清楚、易讀,
然後呀,本部落格現在開始支援Responsive Web Design囉!(灑花~~灑花!!

其實自適網頁說穿了,只是用多組的CSS,可以在不同瀏覽環境下切換畫面的CSS,
這可以讓同一個網頁在手機以及電腦上,呈現不一樣的樣子。

RWD一般最常見是使用media queries,利用條件設定去設定裡面所設定的CSS要在何種狀況被使用。

我的開發心得

那這次的改版過程中,下面幾點是我覺得在開發RWD時要去注意的

  1. 若有需要使用JS去做網頁動態,不要將CSS直接在JS裡面加,例如
    $(".content").css("display","none");//js

    類似上面的這種的作法都要通通避免,JS一定要避免掉所有和版面有關的設定
    像上面這種寫法,應改成:

    $(".content").addClass("display-none");//js
    .display-none{display:none;}/*CSS*/

    這樣可以避免在切換為不同顯示方式時彼此互鄉干擾到。

  2. CSS選擇器的優先順序:
    因為在套用時,會有共通的、在某些解析度才要使用的CSS設定。
    假如當今天總共有四種不同瀏覽裝置有四種不同版面,其中想在某一種特別的裝置上套用一系列不同的CSS(只是改字體什麼等)。會需要更清楚的了解各種選擇方法在執行時的優先順序,才能用不同的選擇器去覆蓋原有設定。
    這邊有關於選擇器優先順序的詳細說明:如何撰寫有效率的CSS選擇器(CSS Selector)
  3. HTML格式架構:
    因為要應付多種的CSS套版,HTML的格式設計就很重要,應要能夠清楚表達各元素之間的子從關係,並且符合W3C的規範,這樣子在換CSS時才可以順利在不更改HTML的狀況下去更動顯示方式。

Media Queries設定方式

  1. 直接分成不同的CSS檔案,在HTML載入時宣告此CSS作用的對象
    		<link href="/style.css" rel="stylesheet" media="all and (color)" type="text/css" />
    
    <!--?xml-stylesheet media="all and (color)" rel="stylesheet" href="example.css" ?-->
  2. 在CSS檔裡面設定作用對象
    @import url(/style.css) all and (color);
    
    @media all and (color) {
      ⋮ one or more rule sets…
    }

條件的用法

@media [media type] and [(media feature)]

例:如果視窗最小寬度為500px,就套用這些CSS
@media screen and (min-width:500px) {.....}

例:如果視窗為直立,就套用這些CSS
@media screen and (orientation: portrait) {.....}

例:如果視窗在400px和700px之間(兩者需同時符合),就套用這些CSS
@media screen and (min-width: 400px) and (max-width: 700px)

例:如果是彩色螢幕或彩色投影機兩者之一(兩者符合一種即可),就套用這些CSS
@media screen and (color), projection and (color) {.....}

屬性和值

  1. media type類型:
    2013-12-30_175631
    比較要注意的是,handheld這個值其實並沒有辦法有效的判別是否為手持設備,現在會讀handheld的手機瀏覽器有:OpenWave, Nokia lite-web browsers, Netfront, Digia, BlackBerry browser, Opera Mini until v4, Opera Mobile until v9,Palm’s Blazer, Nokia S40 browser, IEMobile 6.x and 8.x。所以若是要判別是否是使用iPhone或Android手機,可以使用下面的判斷式:

    // target mobile devices
    @media only screen and (max-device-width: 480px) {
        body { max-width: 100%; }
    }
    
    // recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        // CSS goes here
    }
    
    // should technically achieve a similar result to the above query,
    // targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi)
    @media only screen and (min-resolution: 300dpi) {
        // CSS goes here
    }
  2. media features
    * (max-或min-)width:[數字]
    * (max-或min-)height:[數字]
    * (max-或min-)device-width:[數字]
    * (max-或min-)device-height:[數字]
    * orientation:portrait 或 landscape
    * aspect-ratio:[比值]
    * (max-或min-)device-aspect-ratio:[比值]
    * color
    * color-index
    * monochrome
    * (max-或min-)resolution:[數字]dpi
    * scan(只對tv)
    * grid
  3. 在JS裡取得螢幕的真實寬度:
    function getWindowWidth() {
    	var windowWidth = 0;
    	if (typeof(window.innerWidth) == 'number') {
    		windowWidth = window.innerWidth;
    	}
    	else {
    		if (document.documentElement &amp;&amp; document.documentElement.clientWidth) {
    			windowWidth = document.documentElement.clientWidth;
    		}
    		else {
    			if (document.body &amp;&amp; document.body.clientWidth) {
    				windowWidth = document.body.clientWidth;
    			}
    		}
    	}
    	return windowWidth;
    }

參考資料

Posted on

WordPress Plugins開發分享

wordpress簡報下載

上面的是我分享的Wordpress套版開發的PowerPoint

其內容截錄如下:

1. WordPress簡介

• 一個以PHP和MySQL為平台的自由開源的部落格軟體和內容管理系統。
• 使用者可以安裝和切換主題。主題可讓使用者不改變部落格內容和結構的情況下更改介面和WordPress站點的功能。
• WordPress非常流行的一個特性是它豐富的外掛模組架構,外掛模組能使使用者和開發者擴充功能WordPress程式的功能。當前WordPress外掛模組資料庫中有超過18000個外掛模組,包括SEO、控制項等等。

2. WordPress基本介紹

• 在WordPress裡,網頁分文章及頁面。
• 頁面: 網頁中的固定頁面,不經常更新,例如關於我們、聯絡資訊。
• 文章: 網頁中的經常性變更頁面,常更新,例如最新資訊、我的作品。
• 每一篇文章及頁面都可以設定是否開啟迴響,迴響是類似留言版的地方,會顯示在網頁的下方。
• 外掛及佈景主題皆可以在官網下載或尋找免費支援,許多免費外掛或主題也有提供功能較完整的付費版本,此為WordPress的主要營收來源。

3. WordPress的佈景檔案有

• style.css 佈景CSS樣式
• header.php 各頁共用的網頁頭部
• footer.php 各頁共用的網頁底部
• sidebar.php 邊欄模組
• index.php 首頁
• single.php 單頁文章
• page.php 網誌分頁
• comments.php 迴響模版
• functions.php 佈景設定
• archive.php 文章彙整
• 404.php 找不到頁面
• search.php 站內搜尋結果

4. 頁面層級結構

• WordPress的頁面有層級的結構存在,當12個php檔案並沒有全部都存在時,便會自動尋找前一層級的來替代。
• 一個佈景主題裡至少要有style.css及index.php
2013-07-01_143700

 

Posted on

製作WordPress的第一個Plugins開發

1. 在wp-content\plugins下隨意新增一資料夾,建立一隻php檔案,在這邊我是命名為Claire.php
2. 在Claire.php裡加入下列程式碼

<?php
/*
Plugin Name: Claire's PlugIn
Version: 0.1
Description: 小佳的第一個插件
Author: ClaireChang
Author URI: http://claire-chang.com
Plugin URI: http://claire-chang.com
*/

/* 版本檢查 */
global $wp_version;
$exit_msg='小佳的插件適用於wordpress2.5以上';
if (version_compare($wp_version,"2.5","<")){
	exit($exit_msg);
}

/*產生FB按讚連結*/
function claireLink()
{
	global $post;
	$link=urlencode(get_permalink($post->ID));
	$title=urlencode($post->post_title);
	$text=urlencode(substr(strip_tags($post->post_content),
	0, 350));

	return '<div id="fb-root"></div>
	  <script src="http://connect.facebook.net/zh_TW/all.js#appId=&amp;xfbml=1"></script>
	  <fb:like href="'.$link.'" send="false" width="450" show_faces="true" font=""></fb:like>';
}

/* 將按讚連結加至文章底下 */
function claireFilter($content){
	return $content.claireLink();
}

/* 增加hook */
add_filter('the_content', 'claireFilter');
?>

然後至後台的=>外掛,就可以看到剛剛新增的外掛的資訊了!
2013-03-29_122704
將之啟用,變可以在文章的底下,看到fb的按讚連結了!