2016-03-28 周一 天气晴朗
出门还是有点冷，深圳的天气就是反常，除了前一周的春雨有点春天的感觉。
早上来到公司，打开电脑，开始看博客，刷社区……
张鑫旭的博客产量很足，干货很多，感觉今晚要加班加点研究完。
关于图标的像素问题
有设计师在的时候图标基本是由设计师来设计，因此用不到fontawsome这样的图标文件。
在定位图表的时候，我采用的方法是绝对定位 + background-position去一个个定位图标的位置，这样定位好处在于可以设置每一个图标的最佳位置，坏处在于代码量很大，无法统一样式。
行高的计算注意点
在CSS中，行高计算的时候，一定不要向下四舍五入，而要向上。
图标统一化
博客提及到了图标的大小统一化，可以让设计师提前导出统一大小的图标，也可以自己做自扩展；然后再图标合并；
图标于文字天然对齐
解释如下：
如果inline-block水平元素’overflow’不是’visible’，或者里面没有内联元素（图片、文字之类），则整个元素的基线就是自身的下边缘；否则，基线就是里面最后一行图文元素的基线
具体可参考demo
逼真文本的效果
发现文本也有多种设计模式：
- 活版文本
- 描边文本
- 发光文本
- 立体文字
博客介绍的一个检查文本对比度的网站
另外mark一下本月发工资可以买的书《css secret》
这个博客还讲解了很多css效果如环形文本、使用background-image定义下划线。
关于文本截断
文本截断是个常常遇到的需求，但是却不好做，因为西体和中体的宽度不一致，导致无法正确计算字符的长度，这里有很多处理的思想
关于如何实现一个图片懒加载
之前写过一个页面，非常多的页面和图片，加上动画效果很多，导致初始加载的时候非常的慢，性能非常差。
做的处理有图片合并、图片压缩、监听滚动位置来显示区域动画，不显示的区域取消动画，现在可以加上图片的懒加载，让首屏时间加快。
前端优化的一些指南
老生常谈，mark以下，太多了，有时间回来看看。
推荐扩展的一篇：chrome开发者工具指南系列
涉及到chrome中timeline等的介绍，还有谷歌的官方文档，原来还有专门的文档在介绍，要一个个弄懂！！！
中文文档
官方文档
移动端的viewpoint
之前看过一篇好文章，可惜忘记mark了，这一篇也不错
2016-03-29 周二 天气晴朗
jquery的彩蛋
打开电脑，开始看jquery的源码，发现了作者隐藏的彩蛋，顿时整个人的心情都不平静了
1991295141.jpg
26548752.jpg
My hate for IE will never die!
Stupid IE, look what you made me do……
虽热自己开发的时候不用考虑IE的兼容问题，但看到jqeury的作者这么恨IE也深有同感，希望IE赶快消失吧！
检测IE版本
好吧，早上才因为jquery的彩蛋大笑，结果同事说他的朋友用IE打开我们网站发现完全看不了，自己默默地点开IE，发现可以啊，心想会不会是老版本的问题，然后调出反真器查看，从版本11一直调到8，终于网页整个崩溃了，WTF……
因为首页是很多css3的动画效果，导致了不兼容的问题，而且网站设计时候就是排除了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属性，它是一种布局模式，它包含了如何在轴线上排列子元素、对齐的方式、显示的优先级、空间的占用等等。
具体的属性和设置就不罗嗦了，直接看人家写好的demo和MDN上的文档：
不过flex布局目前也有一些奇怪的bug，例如对子元素应用visibility:collapse会是元素好像visibility：hidden的问题。
对于一些小的组件可以用，但是对于大型的页面或网站，建议还是使用传统布局比较保险。
HighChart的社区
可能会用到highchart，mark一下
用highchart制作中国地图
知乎上关于echarts和highcharts
2016-03-30 周三 天气晴朗
今天温度有点高了，办公室都有些热了，多喝些水
昨天遇到了检测浏览器的问题，今天发现IE浏览器没有console.log对象，也就是昨天写的脚本因为IE的console.log问题无法作出跳转，把它删除了就可以了。
2016-03-31 周四 天气暖和
早上刷知乎日报，发现知乎上面有很多有趣的话题，值得推荐。
读到关于语言的魔法，同样的话不同的顺序讲会产生不一样的效果
简单的例子就是
烟鬼问神父：
祈祷的时候可不可以抽烟？
and
抽烟的时候可以不可以祈祷？
得到迥然不同的回答，这是语言的重点框架应用的效果，这和
我可不可以把爱好当工作？
and
我可不可以把工作当爱好？
类似，注意讲话的顺序和重点，会使得你的话有不同的效果。说到工作和爱好，能够做自己爱做的事情并当作工作，本身就是一件很幸福的事情，所以我要做得更加专注。
图片隐写术
没错，数据加密隐藏在前端的做法
vuejs
vue 出生两周年了，目前逐渐流行的赶脚，有时间研究一下
用vue做的一个果冻效果的动画
2016-04-01 周五 下雪 零下十度
一大早起来外面就变成白雪的世界，整个都市供电不足，正在紧急抢修，无法上班，也是醉了，煮了一杯热牛奶，看着下日历，我呵呵一笑，都是骗人的。
有一句话叫做“我走过最险的路，是你的套路”，今天的套路已经深到不可测的地步。
公司一员工用老板的头像发布提前下班的消息，成功欺骗了刚刚午睡完的我，祝这位员工好运。。。。
使用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这个额外的文件。
具体的函数和例子官网上有详细的文档
详细的highmap文档
网友评论