你肯定不信，阳光能透过窗户洒在床上。
白菜在ipad上玩Touchgrind。
去香港收的本土鞋，有没有很骚很文艺。
豆瓣上匡威的活动中奖得的鞋子，白菜穿上很赞。
那个红色的机器上叫掌上水中套圈游戏机，还有那个绿色的照相机你肯定也玩儿过。
我的桌子，和老娘的照片。
反正闲着也是闲着
先森，看你的内裤上的线头
某天起从杭州吹来一阵欢神的风，大家都时髦地穿上三角内裤了！
原理挺简单：利用宽高都为0的容器的边框来模拟上下左右的三角，将显现的那一边边框的样式设为solid而其它不需要显现的颜色设为透明(IE6下则利用dotted和dashed来隐藏)。
width:0;
height:0;
line-height:0;
font-size:0;
border-width:50px;
border-style:solid;
border-color:green;
border-left-color:transparent;
border-right-color:transparent;
border-top-color:transparent;
这段代码就能实现一个简单的向上的等腰直角三角箭头，当然可以根据调整border的宽度来实现不同方向不同张角的小三角，甚至还可以通过两个三角的叠加实现更华丽的效果。
但是，某天有女童鞋反应有人的失态了！毛线头从三角内裤边露出来了！咱们可是经济实用守法规范的欢神仔，这种情况当然要杜绝。经过研究发现这种不雅线头只会在某些版本的firefox下出现，出现条件还没确定，但是解决方法很简单，将不显现的边的边框样式设置为outset：
border-style:outset outset solid;
修整了三角内裤的线头后，又过了若干天某三角内裤仔浆抱罗斯在寂寞难耐的光棍儿节发现了各浏览器竟然也有跟他一样的惯用手的问题！经过专业的检查和会诊，详细的报告如下：
有女朋友陪伴的FF大哥从来不伤手的，IE9哥定力十足。谷哥一不小心就暴露了自己常年惯用左手的秘密，导致右箭头会比左箭头大一号。IE678下面小不解释，下箭头会比上箭头大一号。
IE ARGB背景半透明滤镜溢出隐藏bug
OOXX君认为找到了兼容所有浏览器背景半透明的完美解决方案：
标准浏览器下使用RGBA，而在IE系列下使用特有的渐变滤镜将起始和终点的颜色值设为一样来模拟。
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#77303030,endColorstr=#77303030)\9;
据估这个消耗会比 imageloader滤镜要小很多，比如渲染等待和内存消耗等等。在全站推广使用之前我们做了些常规测试发现IE678下都表现良好，没有出现imageloader滤镜里a标签不可点等bug。
某天ooxx君郁闷地发现使用了渐变滤镜的容器即使没有设置溢出隐藏方式在IE6/7下绝对定位溢出的元素仍旧会被隐藏，看上去就像是渐变滤镜默认地使用了overflow:hidden;
正常浏览器下黄色的绝对定位块儿会从使用了渐变滤镜的窗口里挂出去：
但是在IE6/7下会被隐藏：
解决方法也很简单，使用滤镜层的子元素作为定位层，这样即使外层使用了overflow:hidden，绝对元素的溢出隐藏取决于定位层的溢出隐藏方式而不会hidden，详情见康瑞大哥的容易被误解的overflow:hidden .
隐藏元素的子元素隐藏无效
将某元素隐藏后,对其原本显示的子元素进行display:none操作,当再把这个元素显示出来的时候,在ie678的兼容模式下会发现子元素的隐藏无效.
感谢ooxx君给找的这个DEMO页,要重现bug请使用欢乐的IE系列浏览器打开.
博主用了一个很有爱的兔子向大家展示这个神奇的魔术:
1,把容器和兔子的position都设为relative或者absolute
2,把容器的display设为none;
3,把兔子的display设为none;
4,再把容器的display设为block
(你看,IE总是会给你惊喜的对不)
在IE678的兼容模式下你仍然会看到这只兔子,尽管是你亲手给他设置的display:none,当然你也许会觉得这是什么障眼术,然后你肯定会坚持打开调试器然后手动给这个兔子重新写上display:none,但是它依旧坚挺!啊哈,这就是魔术对不.
这个bug出现的条件是:
1, IE678的兼容模式下,IE8的默认模式, Firefox3, Opera9, Safari3 on Windows, Safari 3 on Mac, Chrome都不会重现.
2,容器和子元素(上面的那只兔子代表的元素)的定位都必须不是satatic的,只能是relative,或者absolute.
3,顺序必须是先把容器隐藏,再把子元素隐藏,如果顺序不对,这个魔术就会搞砸.
4,这个bug只会发生在隐藏后的元素中,并且这是在页面完全载入后.
解决的办法
1,临时性地把子元素的 display 由 none 设为 block 然后再设回 none
2,临时性地把子元素的 position 由 relative 设为 absolute 然后再设回 relative (反之一样.)
3,临时性地子元素的 visibility 设为 hidden 然后再设回去(但是这个只发生在子元素的position为absolute的时候)
今天跟OOXX君讨论的结果是可以在将容器隐藏前就先对其子元素隐藏,这种方法或许实现起来看上去更正常一些.
The Wonderful World Of IE!
IE7图片拉伸平滑
img { -ms-interpolation-mode: bicubic; }
msInterpolationMode was introduced in Windows Internet Explorer 7.
The msInterpolationMode property applies to stretched images only. For example, if the natural width of the image is 200×200 but the page designer specifies that the height and width should be 400×400, then the image will be stretched to the new dimensions using the nearest-neighbor algorithm, unless otherwise specified.
If the zoom level of the page is 100%, the default interpolation is nearest-neighbor, otherwise bicubic mode is used.
ie7引进的一个ie私有属性，用来优化图片在被拉伸时的平滑处理(压缩不管的，囧死了)。
ivane:
ie7版本可以通过-ms-interpolation-mode。IE8貌似默认开启。Fx3.6+可以通过image-rendering 来减少图片缩放导致失真，webkit貌似是-webkit-interpolation-mode支持~
Instapaper
Instapaper是一个用来将当前来不及细读的网页和博文保存起来以后再细读的应用(痛恨中文的不利索，一个“read it later”搞了这么长)。
Instapaper到底是咋回事儿哩？
1，当你有一些东西很想好好看一下但这会儿又没时间，点那个“Read Later”.
2，等你坐在班车或公交上听着无聊的男科医院的广告的时候，不妨拿出你的iPhone5(如果你有的话)或者Kindle读你先前存档的那些有意思的文章。
3，当然你还可以在你的电脑上浏览，你的iPad,iPhone和iTouch或者其它的手持设备上都有相应的应用。（愣是没明白这儿的Paper是啥意思）
很受鄙视地没找到Android，不过别着急，都会有的，先搞个账号开始玩玩儿！
你可以更改或者导出这些数据，并且如果你觉得不爽了可以随时删除你的账号。
超级喜欢这种注册界面，一个email地址，一个密码，什么密码确认什么验证码都他妈的玩蛋去。
注册成功之后会提示把”Read Later”这个按钮直接拖到书签栏里，然后等到有你想“read later”的文章出现的时候就点下这个按钮，这篇文章就会自动添加到你在 instapaper的”reading list”里。
接着在自己的Instapaper账号就边的Unread列表里就会出现刚刚添加的文章。
在这个列表下你可以再次阅读你所收藏的文章，并且对这些文章进行归档。
看了果果同学在Kindle上的演示，顿时眼红脖子粗，想拿PSP2000一台交换并补差价未遂。。。接着，咱是穷人，玩儿不起iPhone5和kindle，搞了个android的手机还是1.5的。去电子市场上搜了一下instapaper ，我那个去，还真有：
感谢Instapaper开放的API和一群牛逼的开发者，让我们android的用户能挺胸抬头了····
那个叫 instafetch的应用挺强大的，推荐可以下来用用，但是前提是升级到PRO版，不过好像不太贵，这个软件0.99$，想想还是挺值的，不过可惜没有信用卡，就下了那个iPaper的应用。
iPaper是Instapaper的一个客户端应用，它能让你通过手机阅读你在Instapaper上保存的文章。在使用之前你需要一个Instapaper的账号。
有谁能帮我搞个app的ICON不？？？！！！（这个开发者泪奔了。）
看上去iPaper 的功能真的少极了，不过还好能满足基本的离线阅读和分享功能，回头自己研究下也写个应用去~
不过话说回来，Kindle是个非常好的东西，绝对明确的用途和非常简洁实用的功能，让阅读充满了惊喜但又不影响一个人的习惯，从这些点来看kindle很值得拥有。（泪奔了，谁要PSP速速联系~）
word-wrap和word-break
1.
word-wrap:break-word
word-wrap是用来将快到边缘的长单词整个都换行到第二行
2.
word-break:break-all
word-break是用来将快到边缘的长单词从中间截断，前部分显示在上一行，后部分显示在第二行。不过看起来ff并不支持这一属性，chrome和ie表现不错，鼓掌~
做的就是重构
1.尽量不要给body加背景色和背景图片，一旦遇到比如要在页面的顶部加另一个toolbar的时候会很郁闷。最好的方法是，给body下所有的元素用一个div.wrap包括起来，把背景图片加给这个div。
2.不要给一连串的li元素中间突然加一个与其它li元素不一样的类名，加上额外的判断会让开发同学抓狂。
3.是什么就是什么，是下载文档的连接就用a，哪怕它长得巨像一个button.
4.整理一套自己的样式命名规范和页面结构规范。
5.页面里的有些重要的结构最好加上注释，不管是开发同学还是以后其它的重构同学来维护都会很方便。
6.最好从拿到页面就开始规划所有页面的结构和样式的体系，越早把模块抽出来后面就越轻松，尽管有时候设计稿出的速度太慢。
7.永远别忘了DTD和编码格式。
8.模块和组件都尽量写成宽度自适应的。
9.ie下很多诡异的问题排查先试试zoom，然后再看看是不是由定位引起的。
10.有时候，开发同学比我们还要讨厌table.
11.给到开发同学页面之前确保页面里的文字都是正确的，他们很信任我们的。
12.给使用了背景图的按钮加一个背景色。
13.以每一个tab为一个栏目，用这个栏目的名字控制这个栏目下所有的页面，每一个二级分类的样式都以这个栏目的类名开头。
14.有时候，一些莫名其妙的对不齐和间距问题看看是不是因为空白符的原因。
先到这儿吧。
Posted in Uncategorized
Leave a comment
我不是一个文艺青年
很不幸，我不是一个文艺青年，就算是也是一个不合格的文艺青年，你看，这个本应该在去年底就写完的“关于2010年的一切”拖到了2011年。
2010年没搞什么惊天动地的大事儿，实习来了深圳，补考回了武汉，接着去了首都，路过了天安门和南锣鼓巷，再后来去了趟长沙，来来回回巔得够呛，仍然没能去西安。
2010年换了新手机，接着有了自己的笔记本，最近刚刚败了个单反，截止到今天人生的前小三样儿已经制备齐了，物质欲望前所未有的满足，这一年咱经济独立了，以后再回学校糕点房吃麻辣烫一定要吃四荤零素。
2010年跟媳妇儿处得很好，见了几次面，逛了几回街，看了两场电影，买了两双新鞋，没送花，没吵架，没搞外遇，没闹离婚，但是中国铁路把我们整惨了。
2010年过年回家终于没再跟老妈拌嘴，也没让她掉眼泪，回家给老爸换了只钱夹子，再也不管父母要钱了，开始学着给他们钱。走的时候跟爸妈商量了接来南方呆几天的事儿。
2010年进了isd，是这一年里动静最大的事儿，感谢我的贵人T总和彪叔，感谢我的导师pufen，还有大猫，ivane，神飞所有Qzone的同学，还有阿伦，小龙，小花，果子，焕义和所有一起成长的新人。
2010年看了15本书，4本关于工作，1本关于经济学，另外的全是拿来装逼耍范儿的。这些书每次看都有新发现，从另一个方面说明以前看得不够认真和仔细。
2010年大概听了30张唱片，不及以前在学校半个学期听得多。买了四张CD，都很有收藏价值。大概用一个月的时间看了50多部电影，印象深刻的是“剃头匠”和“葬礼上的死亡”。
2010年去了两次OCT，一次是因为滑板和啤酒，另一次则是因为周云蓬和小河。
2010年的理想很大，想一鸣惊人，想精通很多东西，现在看来蠢死了。这一年过得还凑合，认识了自己身上很多的臭毛病，并做着一些新的尝试。
差不多该总结了，前面都已经总经完了，就展望一下，希望2011年心静平和，不再毛毛燥燥，敢于面对，不再畏畏缩缩。
希望我所有的朋友和我挂念的人都好。
Posted in Uncategorized
Leave a comment
Hello Sprite!
最近这段时间一直在研究一些关于HTML5的东西.先前看到网上流传挺多很炫的canvas动画,让我这个土鳖看得手直痒痒,可惜大三的计算机图形学和线性代数那会儿完全荒废掉了,隐约地只记得有一个叫贝塞尔曲线和B样条曲线的东西,这些动画和图像不懂图形学还真是搞不定.
后来因为大猫在做一个打老婆的chrome插件(18岁以上不纯洁的同学请戴好耳机有感情地点击),他想把用户自定义头像的图片转成base64格式的长字符串存在本地,因为chrome对html5感情好,所以考虑是否能通过html5的某些方法实现.接着发现Firefox下能直接把表单里input type=”file”中图片的src值以base64格式输出,可是chrome下还是会输出一个不太靠谱的文件路径(当时我们甚至以为马上就可以实现网页上本地图片的预览).
很幸运地发现canvas有一个toDateurl()的方法来把canvas里的图像以base64的格式输出:
url = canvas . toDataURL( [ type, ... ])
Returns a data: URL for the image in the canvas.
所以,当时想到的就是,要是能把想转换的图片搞到canvas里就好了,这一步很简单,因为canvas有drawimage()方法:
context . drawImage(image, dx, dy)
context . drawImage(image, dx, dy, dw, dh)
context . drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
这儿的image是页面上的image()对象,dx和dy分别是把图片画到canvas里相对于左上角坐标原点的横坐标和纵坐标.
的确很容易生成图片到canvas里头,但问题来了,怎么把文件夹里头的图片搞到页面上去呢?玩儿服务器的大猫笑了,咱有服务器,搞到服务器上不就行了.当时以为这就是解决方法了,后来才反应过来,既然能把图片搞到服务器上干嘛还要拉回到页面上再用canvas这个IE全家都不认账的非主流来转换,直接在后台上转不就轻松省事儿了.
某天在我万能的google阅读器里发现了一个叫做FileReader的牛逼装备(没过四级的同学请直接跳过这段儿英文原文).
The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user’s computer, using File or Blob objects to specify the file or data to read.
web应用程序能通过FIleReader对象异步地读取存储在本地的文件(或者数据缓冲区)
为了能让操作更上流而不是面对一堆没有感情的input type=”file”,想到了html5的Drag&Drop.把文件拖到页面里,就把图片直接读成了base64,这一步实现得非常干净利落,直接把canvas给省掉了.
var dt = event.dataTransfer;
var files = dt.files;
for (var i = 0; i < files.length; i++)
{
var reader = new FileReader();
reader.onload=function(event)
{
var thedataurl=event.target.result;
};
reader.readAsDataURL(files[i]);
}
大猫的要求算是完成了,可我还没满足,既然发现了这么一大堆好玩儿的东西,就想着能不能加到一起搞个什么出来.
能通过脚本把图片画到canvas里头,canvas能把里头的图像信息保存成图片文件,那就搞一个能生成雪碧图的东东出来吧.
实现的过程是
file -> dataurl -> image() -> canvas -> file
嘿,就是现在这个小DEMO,DEMO里除了DIV+CSS IE能认识,其它上流特性对IE全家都不友好,不,是IE全家都不友好,所以请勿尝试使用IE系列牛卵器-_-打开,如果你的IE怀了这个demo的孩子我TM不负责.
=====================
V1.0 2010-12-11
=====================
1.把文件夹里的图片轻轻地拖到网页上(支持框选多个)会在网页右边的列表里显示这些图片,图片列表包含平铺图片和单个图片,图片拖动到不同的列表上就能在相应的列表上生成对应的图片预览.
2.平铺图片列表和单个图片列表之前可以互相拖动.
3.按照文本流的方式从上向下从左向右的顺序把图片列表里的图片依次生成到canvas里.
4.单击向右键头按钮,能将当前图片居右显示.当前图片后一个图片会换行显示.
5.单击折行键头按钮,将当前图片强制折行显示,当前图片后一个图片不受影响.
6.单击删除按钮,将当前图片从图片列表里删除,并在雪碧图里清除当前图片.
7.雪碧图默认宽度是图片列表里所有图片的最大宽度值,可以在输入框里自定义一个新的宽度值,单位为px.
8.雪碧图默认每个小图片间的横向间距为10px,每行小图片间的间距为10px,可以在输入框里自定义新的横向和纵向间距值,单位为px.
9.在雪碧图上单击右键”图片另存为…”,选择一个本地路径就能保存到磁盘上(目前仅Firefox支持).
=====================
V1.1 2010-12-23
=====================
1.增加了当雪碧图高度超出初始高度后自动调整的功能。
2.新加了导入模板设计稿根据雪碧图模板自动生成对应雪碧图功能（目前仅对Qzone开放此功能）
Posted in CSS3
4 Comments