Azole

No magic, only basic.

[imazole-blog]

謹言慎行

跟瘋子來往的風險就是有一天會被反咬，當時好意一句勸她與眾人好好相處的話，現在被她無限放大、拿來當成武器攻擊別人，對於被牽連的朋友覺得很抱歉。 有時候你在意這還有機會同桌吃飯的緣份，人家卻不一定反過來這樣想。

[imazole-blog]

Automatically and Periodically Back Up Your Web Site using Git

在網站上線後，維護的部分就變得很重要，天有不測風雲，適時的備份可以降低風險。

必須備份的資料分為兩種：(1) 程式碼、(2) 資料庫

而備份的位置也分為：local backup與remote backup

這邊介紹如何利用bash scripts進行本地端的資料壓縮與備份，然後再利用bitbucket (GitHub也可以)來進行異地備份。

1. 建立一個檔案夾backups，裡面再建立一個backup.sh跟files檔案夾

2. 編輯Backup.sh並設定執行權限

chmod +x backup.sh

#!/bin/sh THESITE="site_name" THEDB="db_name" THEDBUSER="dbuser" THEDBPW="password" THEDATE=`date +%y%m%d%H%M` mysqldump -u $THEDBUSER -p${THEDBPW} $THEDB | gzip > /PathTo/backups/files/dbbackup_${THEDB}_${THEDATE}.bak.gz tar czf /PathTo/backups/files/sitebackup_${THESITE}_${THEDATE}.tar -C / var/www/$THESITE gzip /PathTo/backups/files/sitebackup_${THESITE}_${THEDATE}.tar find /PathTo/backups/files/site* -mtime +5 -exec rm {} \; find /PathTo/backups/files/db* -mtime +5 -exec rm {} \; git add --all git commit -m "automatic backup @ $THEDATE" git push origin master

3. 在bitbucket上建立好respository，然後執行以下指令

(1) ssh-keygen –C “[email protected]”

(2) cat ~/.ssh/id_rsa.pub 

(3) 複製其內容，設定至Bitbucket: Manage account -> SSH keys -> add key

(4) 回到backups裡，執行git初始化指令

git init git add . git commit –m ‘initial repository added’ git remote add origin ssh://[email protected]/username/repository-name.git git push origin master

4. 建立排程

(1) crontab –e

(2) 設定完成後須重新啟動cron

ps aux | grep cron kill xxx # xxx為cron的執行緒名稱 /usr/sbin/cron # 重新啟動

參考資料:

Automatically back up your web site every night

Automatically back up projects or data using Git

crontab重新啟動方式

[imazole-blog]

http://blog.jobbole.com/39920/

千萬不要過度看重自己的功能。

[imazole-blog]

Learn Layout (筆記 Part 2)

float

float也是常見的布局屬性。可用來做文繞圖。

clear

clearfix hack

當我們對圖片採用float的時候，可以製造出文繞圖的效果，當文字較短時，圖片又是浮動的，就會看到圖片破版的情況。這時候可以用一種清除浮動的方式，叫做clearfix hack。

.clearfix { overflow: auto; }

如果想要支援IE6，還要加上zoom: 1

The world of clearfixing is pretty scary

float layout example

留意container上有設定clearfix

percent width

這是一種相對於包含區塊的計量單位

percent width layout

也可以用percent來做布局，但要留意當視窗被縮到很窄時，用百分比布局的區塊可能會被過度壓縮。而這個問題即使是使用min-width 也無法解決，因為右邊的欄位不會理會這個設定。範例

media queries

responsive design是一種讓網站針對不同瀏覽器和設備顯示不同效果的策略，要做到RW，media queries是很重要的工具。 (可解決用浮動布局時，視窗過窄小的問題)

@media screen and (min-width:600px) { nav { float: left; width: 25%; } section { margin-left:25%; } } @media screen and (max-width: 599px) { nav li { display: inline; } }

一些很棒的RW網站的布局

(可以學習別人如何布置RW網站)

inline-block

可以建立很多grid來填滿瀏覽器的畫面，在以往都是使用float的方式，現在用inline-block則更為簡單。inline-block很像inline，但他可以有寬跟高的設定。

讓IE6, IE7支援的方式

inline-block layout

可以使用inline-block來佈局，但要留意：

vertical-align會影響到inline-block

需要設置每一列的寬度

如果html中元素之間有空白，那麼列與列之間會產生空隙

column

一種很新的css屬性，可以輕鬆實現文字布局，但不被IE9及Opera min所支援。

參考資料

flexbox

這也是一種新的布局模式，但是，各瀏覽器的支援仍然很不一。

CSS Frameworks 

資料來源：Learn Layout

[imazole-blog]

Comet - Part I: Implement comet by javascript, jquery and PHP

Comet是一個Web的應用模型，在此模型中，request會被發送到server端並保持一個很長的存活期，直到timeout或是server端有事件發生，當該次request完成後，另一個長生存期的ajax request就會被送到server端去等待另外一個事件。

以下展示幾種時作方式。

程式碼下載：Github

I. Polling (polling.html)

 --> 這不算是comet

利用javascript的setInterval，定時利用ajax或JSONP去輪詢server端是否有資料更新。

優點：容易實現，不需要特別的伺服器。

缺點：發送請求的頻率太低則資料更新不夠快速。頻率太高則浪費頻寬。

註：另外有一種叫做peggyback polling的東西，他是在client需要時才發送請求，例如客戶按下submit的時候，其實是要驗證資料，但在驗證資料後，若server端有事件/訊息要送，就一起送回來。其優點是對資源的消耗就少，但缺點就是事件會累積在server端，直到client自己發出一個請求。

II. Comet

Comet是一個Web的應用模型，在此模型中，request會被發送到server端並保持一個很長的存活期，直到timeout或是server端有事件發生，當該次request完成後，另一個長生存期的ajax request就會被送到server端去等待另外一個事件。

Comet的優點是因為client一直保持一個通道，所以server端可以即時將資訊送給client。

其實現可以分為兩類：long polling和streaming。

(i) AJAX (comet_ajax.html)

優點：即為Comet的優點。

缺點：1. php不是刷新，而是一直增加response的值。 2. 要能處理readyState=3的瀏覽器才能運作。

(ii) streaming - Forever IFrame (comet_iFrame.html)

Forever IFrame: 又名為 Forever Iframe(或者 hidden IFrame)，在頁面中藏一個iframe，這個frame的src指向返回事件的server端路徑。

優點：實現簡單，所有有支援iframe的瀏覽器都能用。

缺點：無法處理錯誤或追蹤狀態。

(iii) streaming - Multipart AJAX (comet_ajax_multipart.html)

利用有支援multi-part的瀏覽器，像是Firefox來實作。AJAX請求被發出給server，並保持連通狀態，每次有事件到來時，一個multi-part response就會被寫出。

優點：即為Comet的優點。

缺點：1. PHP每次都是重新刷出，不需要處理字串。(相較於comet_ajax.html中的方式)  2. 瀏覽器要能支援multi-part。(好像只有firefox有)

註：PHP須設定'Content-type: multipart/x-mixed-replace; boundary=endofsection'，並留意後續輸出的寫法。

(iv) Long Polling

改良式的long polling：iFrame、multipart、ajax comet等方法都屬於「永遠不會斷線」的做法，但long polling是發一個長時間等待的request，當server有response時斷掉，接著再發一個新的request。看起來跟原本的polling很像，但原本的polling是透過setInterval等定時器，也就是不管server有沒有reponse，時間到就會斷線重連，比較浪費，而且會有時間差。

優點：容易實現錯誤處理與timeout管理。可用在所有的瀏覽器上。

缺點：

參考資料：

JosephJ Browser 與 Server 持續同步的作法介紹

IBM Reverse AJAX

[imazole-blog]

[DB] Shard (筆記)

Shard 碎片  Sharding 分片 這是一種水平分割的技術，每個一個獨立的分割就稱之為shard。 資料庫的水平分割是指把資料的"列"存在不同的地方，這有別於垂直分割是把不同的"行"存在不同的地方(也就是正規化normalization)。而不同的shard可以存在不同的DB server或是不同的地方。而一個好的sharding要把相關的資料都放在一起，這樣分割才有意義(減少存取的次數)。

  水平分割：

垂直分割：

圖片資料來源：Scalable Web Site

其優點為： 1. 因為資料已經被切割與分散了，那每個表的總列數就變少了，這也降低了index size，能增加搜尋的效率。 2. shard可以被放到不同的硬體跟不同的機器上，也就是可以把資料庫的效能分散到很多不同的機器上，可以顯著的增進效能。 3. 如果shard能根據真實世界的資料來做分區，例如歐洲與美國的客戶分開放，這樣就更容易與更自動化的分割，查詢時也能只查相關的shard。 在實務上，sharding複雜多。 儘管它已經能透過hand-coding的方式去做到，但這通常也很沒有彈性。我們希望可以自動地分割。 缺點就是會增加很多複雜度，包括SQL語法、Failover servers、備份等等的複雜度都會增加。

參考資料：

wiki: shard

sharding vs Having multiple databases

開源數據庫Sharding技術 (share nothing)

[asingularity-blog-deactivated20]

So I have just spent the last little while navigating how Tumblr’s replying system works. Yes there is a way to leave a comment on someone’s Tumblr post. It’s wacky, weird, and not very well documented. I think all of these rules are correct but I could be wrong.

Rules for Tumblr replies.

1....

[imazole-blog]

關於Tumblr奇怪的reply的規則.....

[imazole-blog]

Learn Layout (筆記 Part 1)

the display property

不同的元素有自己對於display的預設值，通常是block或inline。 --> 雖然元素有自己的預設值，但這是允許被被override的。

block: div就是一個標準的block-level元素，一個block-level元素會擴展自己的左右兩邊到最寬(通常就是其容器能允許的寬度)。其他的block-level元素像是p、form，還有HTML5中的header, footer, section等。

inline: span是一個標準的inline元素，這類的元素可以在一個段落內被顯示而不會打壞整個段落的布局。像a就是最常被用到的inline元素。

none: 這也是一個蠻常見的預設值，像是script這個標籤就是用none當預設值。這也經常被js用來隱藏或顯示元素(就不用真的刪除跟重新建立)。留意與visibility不同的地方，displya:none不會保留這個元素原本應該要顯示的空間，而visibility:hidden會保留其原本的空間。 --> 所以設定display:none時，會觸發reflow，而visibility:hidden只會觸發repaint，reflow的成本較高。

其他的值可以參考這個list  

margin: auto

設定width可以避免block-level元素左右撐滿容器，然後再把左右的margin設成auto，這樣就可以達成水平置中。

問題：當瀏覽器視窗縮的比設定的width還要小時，瀏覽器會出現水平卷軸。

max-width

利用max-width取代width，瀏覽器視窗縮到比div設定的max-width還要小時，div就會自動縮小，這對行動裝置來說很有用。(IE7+以上都支援，善加利用。)

the box model

當我們有設定一個元素的width時，它顯示的寬度可能比設定的還要大一些，因為還要考慮這個元素的border跟padding，這兩者也會撐大這個元素。在過去，只能靠設計者自己算，那現在??

box-sizing

現在(CSS3，應該有支援到IE8+)可以用box-sizing來避免數學運算，使用box-sizing: border-box，則這個元素的padding與border就不會增加它的寬度。可以把他設定給所有的元素，selector為*。

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

  position

static: 這是預設值，表示無特殊定位。

relative: 如果只設定relative，效果就跟static一樣，除非有設定了top, right, bottom跟left。如果有設定的話，其值就是原本正常位置的偏差值，而其他元素並不會填補這個元素偏差後留下來的空隙。

fixed: 在viewport中的某個位置，當網頁被捲動時，都會停留在固定的位置(必須用top, right, bottom, left來設定)。這樣設定的元素不會保留它原本的空間。注意：移動裝置的瀏覽器對fixex的支援很差，解法參考：解法。http://bradfrostweb.com/blog/mobile/fixed-position/

absolute: 跟fixed很像，只是它是相對於最近、有被指定位置(position值非static)的祖先元素。如果都沒有有指定位置的祖先元素，那就是相對於body，而且會隨著頁面滾動而滾動。

position的例子 很棒的範例，留意footer的設定(有設background-color)，還有boder有設margin-bottom

資料來源：Learn Layout

[imazole-blog]

[F2E] 樣式之美-CSS (筆記 Part 3 CSS Hack)

CSS Hack

針對不同瀏覽器做樣式處理

常用CSS Hack

background: blue; /* all browsers */ *background: green; /* IE7, IE6 */ _background: red; /* IE6 */

Reset CSS

HTML標籤本身都有預設樣式，但每個瀏覽器又都有差別，HTML應該是結構，不應該有任何樣式 --> reset它！

Eric Meyer

YUI CSS Reset

CSS Grids

Grids是指整個網頁的排版，例如Grid Float是排版的一種做法。

不建議自己開發，有太多細節要注意，可引用穩定的Grids系統：

960gs: 將網頁限制為960pixel，依照16或12分切格子 --> 原始碼的順序沒辦法依SEO調整。 (註: 重要的內容應該要在html中早點顯示。)

YUI 3 Grids

使用Grid Builder  --> 是YUI的grid builder

SASS / Compass

更結構化的方式寫CSS

輕鬆寫CSS3

... (另開新篇筆記)

CSS3 必學屬性

background: rgba 半透明

background-image: linear-gradient 漸層

border-radius 圓角

box-shadow 盒子的陰影

text-shadow 文字的陰影

transition 換場

Twitter Bootstrap

適合用在不需要特別樣式的地方，例如CMS或Prototype，但有自定義樣式的地方，例如形象網站就不合適。 (真的嗎?? 應該還是可以採用TB的某些功能，像是responsive的部分吧。)

CSS Code Convention

絕對不以樣式命名HTML的id或class屬性，盡量以結構來命名

class與id命名採用小寫配合破折號連接

屬性按照字母順序(a-z)做排序  --> 此點存疑

選擇器後空一格放大括號開頭，大括號結尾佔一行

所有屬性皆單獨一行、以4個空白開頭

顏色碼一律採用小寫

屬性值後一律加上分號

採用HTML模組化開發，對共用的部分要小心

資料來源：前端工程開發實務 樣式之美-CSS

Tumblr好奇怪之不能回覆自己:

stanney 我完全同意你的說法呢，我覺得投影片裏頭提到的應該是指他的UI，但除了UI之外，他也還能做布局之類的功能，我覺得用BT作布局很棒，而且也可以遵循BT的開發規範，這點也很不錯。

活動網站經驗豐富的Eden來給我們解釋了：

Eden: 我來幫他說明一下為什麼”Bootstrap”不適合用來製作形象網站。當然所謂的不適合就是說，你可以用，但是不建議用。因為我現在的工作是屬於製作活動網站跟品牌官方網站的，所以有些眉角我是能理解的。通常設計師在設計這類型的網站時，是會依據這品牌的風格、產品內容來作客製，也就是說他所有的按鈕，超連結，甚至是表單都會依照一定的風格來走，這時候如果套用了一組CSS樣版，然後再寫另一組CSS來覆蓋它的話，當你的CSS層級寫得不夠深的話，是沒辦法覆蓋的，有些不是很懂CSS的設計師就會開始火大，認為它明明沒寫錯，為什麼樣式就是出不來，另外，今天為了要覆蓋模組的CSS，其實是要不斷作微調地，如此的開發時間，比單純自己寫還要花上許多，所以才會歸咎出”不適合”的結論。

感謝Eden的分享，果然是要痛過的人才知道！進一步請教Eden，如果能善用Bootstrap的customize的功能的話，是否可以避開這個問題，Eden的回答是可以的，但最基本的還是要有CSS Reset。

[imazole-blog]

[F2E] 樣式之美-CSS (筆記 Part 2)

CSS浮動

利用float="right" 或 float="left"來達成浮動的效果。

問題：float的區塊是不會占空間的，也就是其父區塊的高度不會被撐開。

解法： --> 原來如此!!!!

父節點:after { content: ''; display: block; clear: both; }

CSS背景

適當地將<img>改用CSS背景可以讓讀取更順暢。 ---> WHY??

background:[背景色][url(圖檔路徑)][x,y位置][重複];

Q. 該怎麼選擇，何時採用背景圖？何時採用img？

A: 

對於裝飾性、可有可無的圖片應採用背景圖，例如圓角、icon等，這些消失也不會影響閱讀。

對於內容的一部分，就應該使用img，圖片做成的標題、網站的logo都算是內容，都應該用img。

CSS Sprites

把多張背景圖合成一張。

優點：有效減少網路請求的數量

壞處：難以維護  --> 有軟體可以用，像是： CSS Sprites Generator

CSS位置

 Position

static 預設

absolute 絕對定位

relative 相對定位

fixed

top, right, bottom, left 

例如：在可視範圍的最下方 (IE6不支援)

position:fixed; bottom: 0;

  資料來源：前端工程師開發實務

[imazole-blog]

[F2E] 樣式之美-CSS (筆記 Part 1 CSS基礎知識)

CSS基礎知識

行間CSS (Inline CSS): 直接在標籤內使用 --> 現在應該很不被推薦，除非是在快速做原型的時候

嵌入式CSS (Embedded CSS): 直接將CSS寫在HTML內。留意media屬性，可以指定要在哪種媒介顯示。建議放在head結束之前

外部CSS (External CSS): 建議附檔名為.css，用link標籤引入(無結尾)。

<link rel="stylesheet" href="css檔案路徑" media="顯示媒體名稱">

※ 建議99%的情況都應該使用外部CSS，原因如下：

語意: 樣式與結構能夠徹底分開

效率: 寫一次可以多次套用

效能: 外部檔案可以被cache

   例外：會被設為首頁的入口網站，這頁數少的話可以更快被顯示

資料來源：Best Practices for Speeding Up Your Web Site

常用選擇器Selector

p { /* 針對所有p標籤設定樣式 */ } #nav { /* 針對 id ="nav" 設定樣式 */ } .bd { /* 針對所有 class="bd" 設定樣式 */ } div.bd { /* 針對所有 div class="bd" 設定樣式 */ } #nav .bd { /* 只針對所有 id="nav" 下的 class="bd" 設定樣式 */ } #nav, #article { /* 同時對 id="nav" 與 id="article" 設定相同的樣式 */ }

屬性

用大括號包覆，半形冒號區隔屬性名稱與值，以分號區隔不同屬性。

Box Model

留意: 把DOCTYPE宣告清楚，才不會掉進舊IE怪異模式盒模型(width的算法跟標準的不同)。

資料來源：前端工程師開發實務

[imazole-blog]

[F2E] 基本架構-HTML (筆記 Part 2)

 HTML模組：頁是由許多模組構成，依照一個完整的結構化功能切分模組，就是所謂的膜組化開發。

一個標準的模組結構如下：

SEO

善用title標籤 （通常是本頁的標題）

妥善規劃h1~h6

愈重要的內容應該儘早出現在HTML中

適當地使用em, strong等標籤

不要用table做排版

無障礙網頁Accessibility 

資料來源：前端工程師開發實務

[imazole-blog]

[F2E] 基本架構-HTML (筆記 Part 1)

觀念1

語意網頁 Semantic: HTML必須是要有意義、可被閱讀的，使用合適的標籤、完全不管樣式。→ 有助於SEO

HTML-結構；CSS-樣式；javascript-行為

How: 徹底了解每個HTML標籤屬性的意義，鼓勵用手寫HTML

Progressive Enhancement: 一種由下而上的的設計理念

圖片來源：http://sixrevisions.com/web-development/progressive-enhancement/

HTML結構：

<!DOCTYPE html>為文件宣告，不可省略，不然會有問題。

標題 h (heading): 使用<h1>~<h6>來表示內容的標題層次，可以清楚的顯示結構，是SEO的重點之一。

段落p: 一段一段的內文

強調em (emphasize)

更強調 strong: 比em更強烈

連結 a

圖片img: 屬性alt - 破圖時的說明

無順序的清單 ul (unordered list)

有順序的清單 ol (ordered list) 

定義清單 dl (definition list): 

dl定義清單 definition list

dt定義標題 definition title

dd定義描述definition description

 表格 table, tr, th, td: 不可以用來排版，只能用來放資料

換行區塊div: 將相關的HTML做群組化，將不相關的HTML做隔離

單行區隔span: 跟div類似，但是不會換行

其他小秘訣:

Pre 保留空白與換行 preserve

code 顯示一段程式碼

利用class屬性明確定義該區塊的屬性 ==> 標籤組合+class屬性能更清楚的表達結構

撰寫時的注意事項：

標籤與屬性一律小寫

屬性值用雙引號

特定標籤不應結尾(不是XHTML): br, link, img...等

可任意空格或換行

資料來源：前端工程開發實務

[imazole-blog]

目標

「把你的眼光放遠，努力追求宏大的目標。如果想要改變世界，你總不能跟膽小如鼠的人一起工作，推出無聊的產品和服務。至少要把目標訂在比現狀好十倍的東西上。」－－Apple 前首席宣傳官 Guy Kawasaki

[imazole-blog]

My first tumblr

Hello World!

Yes, I am a software engineer... no, I am a software designer!