2016-03-28 周一 天氣晴朗
出門還是有點冷，深圳的天氣就是反常，除了前一周的春雨有點春天的感覺。
早上來到公司，打開電腦，開始看博客，刷社區(qū)……
張鑫旭的博客產(chǎn)量很足，干貨很多，感覺今晚要加班加點研究完。
關于圖標的像素問題
有設計師在的時候圖標基本是由設計師來設計，因此用不到fontawsome這樣的圖標文件。
在定位圖表的時候，我采用的方法是絕對定位 + background-position去一個個定位圖標的位置，這樣定位好處在于可以設置每一個圖標的最佳位置，壞處在于代碼量很大，無法統(tǒng)一樣式。
行高的計算注意點
在CSS中，行高計算的時候，一定不要向下四舍五入，而要向上。
圖標統(tǒng)一化
博客提及到了圖標的大小統(tǒng)一化，可以讓設計師提前導出統(tǒng)一大小的圖標，也可以自己做自擴展；然后再圖標合并；
圖標于文字天然對齊
解釋如下：
如果inline-block水平元素’overflow’不是’visible’，或者里面沒有內(nèi)聯(lián)元素（圖片、文字之類），則整個元素的基線就是自身的下邊緣；否則，基線就是里面最后一行圖文元素的基線
具體可參考demo
逼真文本的效果
發(fā)現(xiàn)文本也有多種設計模式：
- 活版文本
- 描邊文本
- 發(fā)光文本
- 立體文字
博客介紹的一個檢查文本對比度的網(wǎng)站
另外mark一下本月發(fā)工資可以買的書《css secret》
這個博客還講解了很多css效果如環(huán)形文本、使用background-image定義下劃線。
關于文本截斷
文本截斷是個常常遇到的需求，但是卻不好做，因為西體和中體的寬度不一致，導致無法正確計算字符的長度，這里有很多處理的思想
關于如何實現(xiàn)一個圖片懶加載
之前寫過一個頁面，非常多的頁面和圖片，加上動畫效果很多，導致初始加載的時候非常的慢，性能非常差。
做的處理有圖片合并、圖片壓縮、監(jiān)聽滾動位置來顯示區(qū)域動畫，不顯示的區(qū)域取消動畫，現(xiàn)在可以加上圖片的懶加載，讓首屏時間加快。
前端優(yōu)化的一些指南
老生常談，mark以下，太多了，有時間回來看看。
推薦擴展的一篇：chrome開發(fā)者工具指南系列
涉及到chrome中timeline等的介紹，還有谷歌的官方文檔，原來還有專門的文檔在介紹，要一個個弄懂?。?！
中文文檔
官方文檔
移動端的viewpoint
之前看過一篇好文章，可惜忘記mark了，這一篇也不錯
2016-03-29 周二 天氣晴朗
jquery的彩蛋
打開電腦，開始看jquery的源碼，發(fā)現(xiàn)了作者隱藏的彩蛋，頓時整個人的心情都不平靜了
My hate for IE will never die!
Stupid IE, look what you made me do……
雖熱自己開發(fā)的時候不用考慮IE的兼容問題，但看到jqeury的作者這么恨IE也深有同感，希望IE趕快消失吧！
檢測IE版本
好吧，早上才因為jquery的彩蛋大笑，結果同事說他的朋友用IE打開我們網(wǎng)站發(fā)現(xiàn)完全看不了，自己默默地點開IE，發(fā)現(xiàn)可以啊，心想會不會是老版本的問題，然后調(diào)出反真器查看，從版本11一直調(diào)到8，終于網(wǎng)頁整個崩潰了，WTF……
因為首頁是很多css3的動畫效果，導致了不兼容的問題，而且網(wǎng)站設計時候就是排除了IE瀏覽器的，之前有寫一個檢測瀏覽器的腳本，后來應該是被刪除了，好吧，模仿jquery寫了一個腳本做判斷：
<pre><code>
(function(){
var b = navigator.userAgent.toLowerCase();
// Figure out what browser is being used
browser = {
safari: /webkit/.test(b),
opera: /opera/.test(b),
msie: /msie/.test(b) && !/opera/.test(b),
mozilla: /mozilla/.test(b) && !/compatible/.test(b)
};
if (browser.msie == true) {
console.log('error!');
window.location = '/SorryPleaseUseOtherBrowser';
}
})();
</code></pre>
通過檢測navigator的userAgent來判斷瀏覽器的版本。
flex布局
之前一直聽到這種新的布局模式，今天學習并實踐了一下。
總的來說，flex它不是一種css屬性，它是一種布局模式，它包含了如何在軸線上排列子元素、對齊的方式、顯示的優(yōu)先級、空間的占用等等。
具體的屬性和設置就不羅嗦了，直接看人家寫好的demo和MDN上的文檔：
不過flex布局目前也有一些奇怪的bug，例如對子元素應用visibility:collapse會是元素好像visibility：hidden的問題。
對于一些小的組件可以用，但是對于大型的頁面或網(wǎng)站，建議還是使用傳統(tǒng)布局比較保險。
HighChart的社區(qū)
可能會用到highchart，mark一下
用highchart制作中國地圖
知乎上關于echarts和highcharts
2016-03-30 周三 天氣晴朗
今天溫度有點高了，辦公室都有些熱了，多喝些水
昨天遇到了檢測瀏覽器的問題，今天發(fā)現(xiàn)IE瀏覽器沒有console.log對象，也就是昨天寫的腳本因為IE的console.log問題無法作出跳轉，把它刪除了就可以了。
2016-03-31 周四 天氣暖和
早上刷知乎日報，發(fā)現(xiàn)知乎上面有很多有趣的話題，值得推薦。
讀到關于語言的魔法，同樣的話不同的順序講會產(chǎn)生不一樣的效果
簡單的例子就是
煙鬼問神父：
祈禱的時候可不可以抽煙？
and
抽煙的時候可以不可以祈禱？
得到迥然不同的回答，這是語言的重點框架應用的效果，這和
我可不可以把愛好當工作？
and
我可不可以把工作當愛好？
類似，注意講話的順序和重點，會使得你的話有不同的效果。說到工作和愛好，能夠做自己愛做的事情并當作工作，本身就是一件很幸福的事情，所以我要做得更加專注。
圖片隱寫術
沒錯，數(shù)據(jù)加密隱藏在前端的做法
vuejs
vue 出生兩周年了，目前逐漸流行的趕腳，有時間研究一下
用vue做的一個果凍效果的動畫
2016-04-01 周五 下雪 零下十度
一大早起來外面就變成白雪的世界，整個都市供電不足，正在緊急搶修，無法上班，也是醉了，煮了一杯熱牛奶，看著下日歷，我呵呵一笑，都是騙人的。
有一句話叫做“我走過最險的路，是你的套路”，今天的套路已經(jīng)深到不可測的地步。
公司一員工用老板的頭像發(fā)布提前下班的消息，成功欺騙了剛剛午睡完的我，祝這位員工好運。。。。
使用browserify加載highcharts
highcharts目前支持了browserify加載，這樣就可以更具需要直接在js中加載所需要的圖表文件，而不需要在外部引入js文件。
<pre><code>
var Highcharts = require('highcharts');
var Highcharts_more = require('highcharts/highcharts-more')(Highcharts);
require('highcharts/modules/data')(Highcharts);
require('highcharts/modules/exporting')(Highcharts);
</code></pre>
highcharts的教程有些問題，在require的路徑中多了一個文件夾，這應該是版本目錄不同的問題。
這里要用到南丁格爾的圖表，在引用的時候需要傳入Highcharts才能引用到highcharts-more這個額外的文件。
具體的函數(shù)和例子官網(wǎng)上有詳細的文檔
詳細的highmap文檔
