Jeserlin的程式筆記

多重要素驗證 / 雙重認證 (MFA / 2FA)

歡迎到我的Blog看這篇文章～

https://myblog-jeserlin.vercel.app/tech/mfa-2fa

近來我們會發現有越來越多的網站開始支援雙重認證甚至是多重驗證，這是因為單一要素驗證 — 也就是我們常見的輸入帳號密碼的這種驗證方式，他的安全度已經遠遠不足了。

試想一下，如果駭客透過不法手段竊取了你的帳號及密碼，那麼他就可以輕易地登入你的帳號獲取你的資料，甚至是進入你的公司網路造成更大的損失。

但是這類的事情實在防不慎防，為了降低風險&提升帳號安全，開始出現了雙重認證以及多重驗證。

名詞解釋

多重驗證 (Multi-factor authentication,縮寫為MFA): 又稱為多因子認證, 多因素驗證, 多因素認證, 使用者需要透過兩種以上的認證機制才能得到授權，使用電腦資源。
雙重認證 (Two-factor authentication，縮寫為2FA): 又稱為雙重驗證, 雙因子認證, 雙因素認證或二元認證。是多重要素驗證中的一個特例，使用兩種不同的元素，合併在一起，來確認使用者的身分。

驗證機制

使用者提供的片段資訊來驗證自己的身分，目前有以下5種驗證機制：

知識驗證 (Knowledge Factor): 驗證你知道什麼， e.g. 密碼
持有驗證 (Possession Factor): 驗證是否持有， e.g. 手機， security token, OTP (一次性密碼)
固有驗證 (Inherence Factor): 驗證你的身分， e.g. 指紋， 虹膜
地域驗證 (Location Factor): 驗證你的地理位置，e.g. IP。舉例來說，平常你都是在台灣登入帳號，如果突然間登入的位置出現在美國，那麼就會視為異常登入。
時間驗證 (Time Factor): 驗證你的時間，假設對公司電腦的預期登入時間是早上9點到下午6點，如果出現了不在這個時間範圍的登入紀錄就會判定為非預期登入。

雙重認證的種類

簡訊驗證 (SMS 2FA)

優點
- 使用簡單：發送簡訊到使用者的手機，使用者只需要輸入收到的驗證碼就可以通過驗證
- 快速方便：當發生可疑活動時，只有持有綁定裝置的使用者可以驗證登入活動是否異常，是一種快速驗證身分的方式
- 普及化：簡訊驗證是最古早的雙重驗證，接受度跟普及度都很高

缺點
- 需要手機號碼：使用者的手機會暴露到第三方的軟體，會有隱私的疑慮也有可能會稱為廣告的目標。
- 需要數據網路：簡訊驗證需要可以接收簡訊的手機，如果手機壞掉，遺失或是沒有數據網路，使用者就無法收到驗證簡訊

基於時間的一次性密碼演算法 (TOTP 2FA, Time-based One-Time Password)

TOTP驗證會在使用者嘗試登入的設備上產生一組key，這組key一般會以QR code的形式呈現，使用者可以用設備掃描從authenticator獲取數字密碼(passcode)並登入。而數字密碼(passcode)會在一段時間後過期，並且在使用者下次登入時產生另一組新的數字密碼(passcode)。

優點
- 靈活性：提供了更多的彈性讓使用者可以獲取數字密碼(passcode)。相較於SMS 2FA，SMS 2FA只能透過指定的設備來接收簡訊獲取數字密碼(passcode)，而TOTP 2FA不限定設備，只要能掃描QR code就能獲取密碼。
- 改善登入流程：Mobile authenticators可以紀錄上一次登入的帳號，因此使用者可以在沒有數據網路的情況下獲取數字密碼(passcode)。

缺點
- 需要設備：TOTP 2FA需要一個能掃描QR code的設備來完成驗證。如果使用者的設備或QR code遺失或被偷走了，也許就無法再登入。

Push-Based 2FA

Push-Based 2FA可以同時透過多種驗證其實驗證使用者的身分，改善了SMS 2FA和TOTP 2FA。

優點
- 防止網路釣魚：Push-Based 2FA不需要使用者自己輸入數字密碼(passcode)，取而代之的是發送一個通知到使用者的手機上。這個通知會包含：登入地點，時間，IP等等的資訊，讓使用者判斷這是否為安全的登入行為。
- 使用簡單：一旦設定好之後，之後只需要在手機上確認登入通知。
- 可擴展性：因為使用方式簡單，組織可以很容易讓成員使用。

缺點
- 需要數據網路：Push-based 2F透過數據網路發送通知到手機上，使用者的手機需要有網路才能完成驗證。
- 需要資安意識：使用者需要有足夠的資安意識來驗證通知的內容。

安全金鑰 (U2F tokens)

U2F Tokens透過實體的金鑰在使用者登入時驗證地點和身分。使用方式是將安全金鑰插入設備中，然後按金鑰上面的按鈕，啟動之後會輸入密碼(PIN)就可以完成驗證並登入了。

優點
- 防止網路釣魚：需要在將金鑰插入在設備上，因此可以防止密碼(PIN)被竊取。
- 可以備份：U2F tokens可以在多個設備上備份，而且在遺失時也支援更換取代原本的token。
- 使用簡單：只需要簡單的設定就能使用，操作方式也能輕易上手。

缺點
- 不普遍：目前算是比較新的驗證方式，因此支援度不廣。
- 需要實體金鑰：實體的物品就會有遺失跟損壞的風險。

Web 身分驗證 (WebAuthn, Web Authentication API)

WebAuthn是由W3C和FIDO 聯盟制定的官方標準，適用於各平台與瀏覽器，具備簡單和強大的認證能力，允許使用者選擇指紋識別、面部識別、虹膜識別、聲音識別、實體密鑰來登入帳戶，目標是實現無密碼登入。

優點
- 便利：使用者只需要有支援WebAuthn的瀏覽器，OS和驗證機制。
- 更加安全：WebAuthn是目前最安全的驗證機制之一，他支援透過生物辨識的方式提供獨一無二的憑證給特定的服務，也就意味著服務之間不會需要共享密碼。

缺點
- 難以恢復帳號：WebAuthn密碼是綁定於單一設備上，因此恢復帳號會有一定的難度。

資料來源

事件捕捉 &事件冒泡 (Event capturing & event bubbling)

歡迎到我的Blog看這篇文章～

https://myblog-jeserlin.vercel.app/tech/event-bubbling-event-capturing

事件捕捉 (Event capturing)

事件傳遞的順序是從上到下，由最外層的Window到Document最後到事件發起的Element。

事件冒泡 (Event bubbling)

而事件冒泡(Event bubbling)則是相反，事件傳遞的順序是從下到上，由事件發起的Element到Document最後再到Window。

事件傳遞順序

把以上兩種機制合在一起看的話，事件傳遞的順序就會是由上而下再由下而上，也就是說先捕捉後冒泡：而這是因為當年兩大龍頭 Microsoft 跟 Netscape 分別提出了不同的處理順序，最後 W3C 決定把兩種機制合在一起同時支援並且把 先捕捉後冒泡設定為預設行為。因此當一個事件發生時，他的傳遞順序會是如圖：

同樣我們也可以從事件傳遞的階段常數(Event Phase)了解到他的順序：

常數	值
none	0
capturing	1
at target	2
bubbling	3

EventTarget.addEventListener()

target.addEventListener(type, listener, useCapture)

addEventListener是大家很常使用的一個api, 但是我們很少會注意到第三個參數上：

useCapture (optional)： boolean， default是false，用來指定這個event是使用捕捉(capturing)還是冒泡(bubbling)

事件冒泡 (useCapture: false, Event bubbling)

在這個範例中，我們使用useCapture的default value，試著點擊Layer可以看到event是使用 冒泡(bubbling)機制：

事件捕捉 (useCapture: true, Event capturing)

而以下的範例是使用useCapture: true，試著點擊Layer可以看到event是使用 捕捉(capturing)機制：

Event.stopPropagation()

然而在實際的情況下，我們不一定會希望事件一層一層地被傳遞，這時候我們可以使用Event.stopPropagation()來阻止當前事件繼續進行捕捉或冒泡。

舉個例子來說，我們有一個button他的上面還有另一個 Element用來控制value是asc還是desc。我們預期的結果是點擊sort type的時候，他會切換成asc或desc但不會觸發button的event，只有在點擊button的時候才會觸發button上的event：

資料來源

【筆記】Next.js #2(Router)

歡迎到我的github.io看這篇文章～

https://jeserlin.github.io/MyTechBlog/#/nextJs2

前言

在上一篇文章中我們建立了一個Next.js的專案。Next.js有包裝好的router功能，除了能提供client-side navigation之外，還能實現server-side navigation。

新增頁面

我們只要在pages folder下新增react component並且export就完成頁面的新增了，比如說我們來建立一個about頁面：

// pages/about.js

export default function About() {
  return (
    <div>
      <p>This is the about page</p>
    </div>
  );
}

把專案run起來之後，我們就能在 http://localhost:3000/about 看到畫面了。

這個時候我們打開browser的console可以看到，這個頁面是server-side rendering。(第一行的about)

連結頁面

既然我們已經有頁面的url了那我們就可以直接用HTML的<a>來連接頁面了。但是這樣的做法會是server-side rendering，也就是說瀏覽器會去跟server要頁面然後再更新到畫面上。

為了實現client-side rendering我們要使用Next.js的Link API。首先我們要使用next/link來連結兩個頁面：

// This is the Link API
import Link from 'next/link';

const Index = () => (
  <div>
    <Link href="/about" title="About Page">
      <a>About Page</a>
    </Link>
    <p>Hello Next.js</p>
  </div>
);

export default Index;

現在我們會看到頁面中多了一個link：

點下link的時候可以從console中觀察到，about頁面不再是從server過來的而使從about.js讀取。

如果你有點client-side routing的陰影，不要擔心。這時候我們按上一頁，會回到index頁面而且也是client-side rendering。Next.js已經幫我們處理好location.history的問題的了，完全不需要再自己處理了～～

限制

next/link是一個HOC，他只接受href及少部分類似的props。如果我們需要傳遞props的話，應該要在他的chidren中傳遞。以上方的例子來說，我們應該把props寫在<a>裡面：

<Link href="/about">
  <a title="About Page">About Page</a>
</Link>

這時候你會看到<a>中多了title:

如果放在<Link>裡面則會得到unknown props的錯誤訊息：

但也不是所有的component都能夠放在next/link裡，他至少需要有onClick這個屬性。

資料來源

https://nextjs.org/learn/basics/navigate-between-pages

【筆記】Next.js #1( 建立)

歡迎到我的github.io看這篇文章～

https://jeserlin.github.io/MyTechBlog/#/nextJs1

前言

在我們建立一個React的專案時，一般都會使用官方提供的create-react-app。雖然可以快速的建立一個React的專案，但是學習曲線還是偏高。比如說設定webpack，router等等。更別說如果你需要處理SEO的話，還需要server-side render你的頁面。Next.js是一個React Framework，他提供了許多功能可以輕鬆解決剛剛提到的困擾：

Server-side rendering
Routing System
CSS-in-JS
Static Exporting
等等

建立

其實官網提供了很不錯的step by step的教學，在每完成一步之後都會得到一些點數，目前不是很清楚這些點數能幹嘛XDD，但是似乎給了一些繼續往下學習的動力lol

以下紀錄建立過程的重點（手動建立）：

mkdir hello-next
cd hello-next
npm init -y
npm install --save react react-dom next
mkdir pages

然後開啟package.json做一下的修改：

{   "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

設定好之後用以下指令把project run起來：

npm run dev

開啟 http://localhost:3000 你會看到404的畫面，如下：

還記得我們剛剛有建立一個pages的folder嗎？會出現以上的畫面是因為，我們沒建立任何的頁面。現在來建立一個簡單的index頁面在pages folder下：

// pages/index.js

const Index = () => (
  <div>
    <p>Hello Next.js</p>
  </div>
);

export default Index;

再次refresh頁面就會看到index頁面了！

如果你有開發過react專案的話，此時此刻一定會感受到Next.js中router的強大之處。我們只要export一個React Component然後把他放在pages folder下，就可以得到一個以檔案名一樣的固定URL，完全不需要額外的處理。不過這邊的render方式是server-side renderding，下一篇會主要紀錄server-side rendering跟client-side rendering。

資料來源

pyenv: 輕鬆切換python版本

歡迎到我的github.io看這篇文章～

https://jeserlin.github.io/MyTechBlog/#/pyenv

pyenv 是一個管理python版本的套件，在開發不同project的時候常常會遇到使用版本不同的問題。有了pyenv我們就可以輕鬆地切換不同版本的python。以下主要紀錄：

安裝pyenv / pyenv-virtualenv
安裝與設定設定python版本
建立虛擬環境
進入虛擬環境

安裝 pyenv / pyenv-virtualenv

$ brew update
$ brew install pyenv

* brew update也許會需要一點時間，要耐心等一下。

下載好之後，輸入pyenv會看到如下圖的資訊：

上圖列出了很多有用的commands，等等才會用到。接下來下載pyenv-virtualenv

$ brew install pyenv-virtualenv

裝好之後設定一下環境變數：

eval "$(pyenv init -)"
eval "$(pyenv virtualenv-init -)"

這時候使用以下指令會發現多了一些virtualenv相關的commands：

$ pyenv commands

到這邊安裝就完成嘍～！

安裝與設定python版本

接下來要下載特定版本的python，下載之前可以用以下指令來看看有哪些版本可以下載：

$ pyenv install -l

列出可以下載的版本，如圖：

接下來我們來下載python，示範下載3.4.3：

pyenv install 3.4.3

*這邊下載也需要一點時間

現在來確認一下有沒有成功：

$ pyenv versions

這個指令會列出你電腦裡面所有的pyton，我電腦裡有兩個，一個是系統預設的，一個是剛剛下載的3.4.3。

確認看到剛剛下載的版本安裝就完成啦！

建立虛擬環境

接下來就是最重要的一步了，為了有一個乾淨的開發環境。我們一般會幫每個專案建立一個虛擬環境，如此一來每個環境之間就不會互相影響了。

以下指令的意思是：建立一個使用python3.4.3的環境，並命名為env-3.4.3

$ pyenv virtualenv 3.4.3 env-3.4.3

如果不確定有沒有建立成功，可以下以下指令檢查一下現有的虛擬環境：

$ pyenv virtualenvs

進入虛擬環境

完成以上步驟之後，使用以下指令就可以進入虛擬環境了：

$ pyenv activate env-3.4.3

這邊的env-3.4.3是剛建立的虛擬環境的名字，進入之後你會看到你的機器名字前面有一個括號表示目前的虛擬環境，如圖：

完工！

整理一下這次用到的pyenv指令：

1. pyenv commands /* 列出全部可用指令 */
2. pyenv install -1 /* 列出全部可下載版本 */
3. pyenv install (version) /* 下載特定版本python */
4. pyenv versions /* 列出電腦內的全部python版本 */
5. pyenv virtualenv (version) (environment name) /* 建立虛擬環境 */
6. pyenv virtualenvs /* 列出全部虛擬環境 */
7. pyenv activate (environment name) /* 進入特定虛擬環境 */

[筆記] 在React上設定GA – Part 2

歡迎到我的github.io看這篇文章～

https://jeserlin.github.io/MyTechBlog/#/ga2

在上一篇文章中已經設定好可以在GA dashboard上看總覽人數了, 但由於我是使用react-router，在沒有多做一些處理的前提下只能抓到index的路徑。

今天這邊文章會紀錄如何讓GA能讀取react-router的路徑！

第一步：實作withTracker

react: ^16.8.5

react-router: ^4.0.0

以下code是使用react hook實作：

import React, { useEffect } from "react";

import ReactGA from "react-ga";

const withTracker = (WrappedComponent, options = {}) => {
  const trackPage = page => {
    ReactGA.set({
      page,
      ...options
    });
    ReactGA.pageview(page);
  };

  const HOC = props => {
     useEffect(() => trackPage(`MyTechBlog${props.location.pathname}`), [
      props.location.pathname
    ]);

    return <WrappedComponent {...props} />;
  };

  return HOC;
};

export default withTracker;

如果你的domain有多個page的話，為了較好地在GA上區分user瀏覽的頁面，你可以在trackPage這邊加入上一層的路徑（粗體+底線的部分）。

以上是react-ga提供的方法，可以在這邊看更多資訊：

https://github.com/react-ga/react-ga/wiki/React-Router-v4-withTracker

第二步：在router中導入withTracker

首先在App.js 中import withTracker (或者是你的index container)

import withTracker from './withTracker';

然後在route的component中把要導的頁面用withTracker包起來

<Router>
  <Route path="/" exact component={withTracker(this.index)} />
  <Route path="/ga1/" component={withTracker(this.ga1)} />
</Router>

第三步：在Dashboard上看結果

接下來開啟隨便一個router的路徑，然後到google analytics的dashboard，就可以看到成果了喔～！

從上圖我們可以看到原本顯示的是‘/MyTechBlog’，現在則是直接顯示我們在react-router中設定的路徑。如此以來我們就可以很清楚的查看user到底在瀏覽哪一頁。

設定好GA也過了3個禮拜了，雖然來的人不多但是感覺能看到實際的數字蠻有趣的。接下來的目標就是研究如何提升人數！

[筆記] 在React上設定GA – Part 1

歡迎到我的github.io看這篇文章～

https://jeserlin.github.io/MyTechBlog/#/ga1

開始在github page上建自己的blog有一小段時間了，

雖然沒幾篇文章，但是還是蠻好奇到底有沒有人來看。

第一步：GA資源設定

可以看到下圖紅色框框的地方，

追蹤ID是之後我們在code裡面初始化GA需要用的，

預設網址就輸入你要監控的website就好了。

第二步：載入react-ga

詳細的資訊可以看這邊：https://github.com/react-ga/react-ga

在你的project中加入react-ga

npm install react-ga --save

第三步：初始化GA

首先在App.js 中import react-ga (或者是你的index container)

import ReactGA from 'react-ga';

然後再初始化，記得換成自己的追蹤ID

// GA
ReactGA.initialize('追蹤ID');
ReactGA.pageview(window.location.pathname + window.location.search);

第四步：在Dashboard上看結果

接下來先開啟你剛剛設定要監控的網址，

然後到google analytics的dashboard，

選擇“即時 > 總覽”，你就可以驗證有沒有設定成功了～

目前測試下來這個設定方法只能抓到第一層路徑 (/XXX)，如果有多層的話似乎是需要更多的設定。

我的blog是用react router來做分頁的，大致上看了一下react-ga是有支援router的，就等下次再研究吧～～

[筆記] styled-components WHY & HOW

歡迎到我的github.io看這篇文章～裡面有codepen範例～

https://jeserlin.github.io/MyTechBlog/#/styledComponent

WHY?

踏入React的世界之後，在view的方面我們最常煩惱的大概就是 — 某個元素到底該不該被獨立成一個component？之後還有沒有機會再次使用？component一多的時候要怎麼管理？css class name 該如何妥善管理…根據props改變style有沒有更有效率的方法…

如果你有以上痛點也許styled-component可以解決你的問題。

使用styled-component到底有什麼優點呢：

styled-component是基於優化react component中的css寫法的結果。

Automatic critical CSS: styled-component會紀錄有哪些元件被渲染到頁面上，並自動地載入所需要的樣式（也就是說不會載入多餘的東西）。
No class name bugs: styled-component會為樣式產生unique的class name，所以我們不需要擔心style被複寫或者是拼寫錯誤。
Easier deletion of CSS: 當我們在管理css的時候會發現確認一個class name到底有沒有被使用很麻煩，但使用styled-component就可以避免這個狀況，因為每個style都是緊密的跟著他所屬的component。
Simple dynamic styling: 可以簡單並直覺地透過props或者是global主題來決定component的style。
Painless maintenance: 不需要從多份CSS file管理component的樣式。
Automatic vendor prefixing: styled=component幫我們處理了各種瀏覽器的css前綴(-webkit-/-moz-/-o-/-ms-)我們只需要寫標準的css寫法就好了。

以下是我個人對styled-component的看法：

方便：開發React的人一定會不斷地把大component切分成數個小component，希望可以提升重複使用率。但有時候有些component其實沒有太多複雜的邏輯只是多了一些樣式而已，更尷尬的是難免會有一些component無法被重複使用。這個時候如果我們用傳統的方法寫其實頗麻煩的，但如果使用styled-component就可以免掉不少麻煩。
一目了然：平常我們定義一個css class name後，我們的tag會這樣寫–
<div className="container">,但是如果使用了styled-component會變成這樣–<Container /> 。這種tag化的寫法可以讓我們的code更加的乾淨也更加的一目了然。

HOW?

首先下載styled-component：

npm install –save styled-component

接下來在js中import元件，就可以開始了！

import styled from ‘styled-components’;

以下示範一個基本的使用方式：

其中比較需要注意的是，
你的styled-component的命名第一個字母要大寫CSS
千萬記得你的styled-component要在render的外面define，
不然會在每一次render的時候都建立一個新的component，
這樣會造成無法cache而且大幅地拖慢render的速度喔。

[筆記]React-Bootstrap WHY & HOW？

歡迎到我的github.io看這篇文章～裡面有codepen範例～

https://jeserlin.github.io/MyTechBlog/#/reactBootstrap

如果你還在煩惱React APP到底怎麼建立，歡迎你看一下上一篇文章 [筆記] 建立react-app

今天的筆記主要是要來紀錄一下為什麼要用React-Bootstrap及如何使用。

WHY?

當你開始寫react之後你一定會開始很煩惱，現在html都要寫在js裡面了(JXS)，完全顛覆了以前的想法與習慣，到底可不可以繼續用bootstrap？

先別煩惱，bootstrap當然是可以繼續用的，只要我們把他import進來，一切的寫法就跟以前一樣。但是你知道react-bootstrap嗎？

既然我們可以繼續用原本的bootstrap為什麼要選擇react-bootstrap呢？

當我們要在頁面上做一些互動效果，比如：動態新增或刪除，ajax等，這些都需要操作DOM元素。然而這些動作在前端來說是很耗效能的，當然這些效能的差異都是在大量操作下才會感受的出來。為了解決這個問題，React在與DOM溝通之間增加了一層虛擬DOM。這個虛擬DOM是由javascript模擬出來的，他可以提升效能，實際上是怎麼做到的有興趣可以搜尋一下。

簡單來說，在React中我們要避免直接操作實體DOM。

如果大家還有印象的話，在bootstrap中要使用他提供的javascript元件是需要jquery的，然而jquery會直接操作實體DOM。這就是我們選擇react-bootstrap而不用bootstrap的最關鍵因素。使用react-bootstrap其實是有很多好處的：

不會直接操作DOM
直接使用component，減少程式複雜度
加快開發速度

HOW?

使用react-bootstrap需要import react-bootstrap和bootstrap v3.的css。

（現在已經有beta版支援v4嘍）

首先，加入react-bootstrap:

npm install –save react-bootstrap

再加入Bootstrap v3. 的css：

npm install bootstrap@3

當然你也可以手動地把bootstrap.css放在你的static路徑裡面，這就看個人習慣。如果是選擇用webpack的話，最後應該時會在dist裡面，可以去找找看，最後我們在index.html中讀取就ok了。

import ‘bootstrap/dist/css/bootstrap.min.css’;

如果要使用react-bootstrap中的component,也需要在jxs中載入(以下提供一個範例)：

以上！

[筆記]建立React App

如果你曾經聽過別人說，建立一個react App要自己建好多file…請不要再相信那些謠言了，讓我們一起5分鐘快速建立React App！

以下筆記為建立一個乾乾淨淨的React App，

其實官網已經寫的很清楚了，但是我還是很莫名其妙的走了很多彎路 = =…

以下是我試過成功又簡單的建立React App方式。

首先檢查一下你npm的version,

npm – – v

如果版本高於5.2.0，先恭喜你，很快就要成功了。接下來我們使用npx。其中橘色的部分，也就是"my-app"這是你專案的名稱，你可以自己訂，但是請注意：名稱不能包含大寫字母喔。

npx create-react-app my-app

接下來他會跑一下子，這個時候你可以把建立app的folder打開，你會發現一個一個file慢慢出現了，如下圖：

螢幕快照 2018-05-10 下午2.43.15

這個時候你已經擁有一個React App基本需要的東西了，讓我們來看一下package.json裡面有什麼，如下圖：

螢幕快照 2018-05-10 下午3.44.39

其中的name就是剛剛我們自己定義的app的名字，如果你的是’my-app’他就會是’my-app’，請不要care為什麼我的是’my-resume’…

那我們來run起來看看長怎樣吧！

cd my-app
npm start

最後他會啟在http://localhost:3000, 如下圖：

螢幕快照 2018-05-10 下午3.05.01

恭喜你，成功踏入react的第一步了！讓我們一起繼續加油吧！

一	二	三	四	五	六	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31