Android的Styles(样式)和Themes(主题)非常类似Web开发里的CSS，方便开发者将页面内容和布局呈现分开。Style和Theme在Android里的定义方式是完全一样的，两者只是概念上的区别：Style作用在单个视图或控件上，而Theme用于Activity或整个应用程序。由于作用范围的不同，Theme也就需要比Style包含更多的定义属性值的项目(item)。不过本文，我将Style和Theme都归为Style来称呼。
Android的Style和Web的CSS相比，有一个缺陷就是只能针对一个对象只能通过android:theme="@style/AppTheme"或style="@style/MyStyle"指定一个值。而CSS则可以通过class属性在DOM元素上定义多个样式来达到组合的效果。不过Style也有CSS没有的功能，那就是继承(Inheritance)。(当然CSS通过LESS和SASS这些工具也获得继承的能力。)
Read More →
虽然现在的工作主要是Android平台的开发，但是对于Web的兴趣总是无法割舍。只可惜因为不是日常工作的一部分，许多Web技术其实学得都不精湛，也常常会淡忘了解过的知识。好在有了Chrome这个强大的前端神器，观察页面布局、学习脚本源码、调试代码样式都变得异常自如，也让学习Web变得方便很多。
前阵子为了完成一些功能，学习了一下Chrome扩展程序(Chrome Extensions)开发的基本内容和步骤，觉得为自己的Web技术找到了新的用武之地。不用再纠结和苦恼如果设计发开出功能全面界面吸引人的应用或系统；做出一些插件来扩展喝补强当前页面功能也是很有意义的。比如常看一些网页被旁边的广告栏打扰了，可以写个插件把display设成none；如果在线看一些文档，也可以做个插件用来标记哪些内容比较重要然后呈现时做个高亮显示。
开发Chrome扩展程序也非常容易上手，只要会HTML，CSS和JavaScript就可以开始了。不需要学习新的语言，也不需要了解新的布局方式，也不用知道新的IDE，还不用编译。当然Chrome扩展程序的基本架构和组成结构还是需要额外了解的，这样才能知道每个部分要如何实现，保证扩展程序能流畅运行。
Chrome扩展程序的官方文档让人感觉有点凌乱，可能是扩展程序开发算不上热门内容，也可能是Chrome的版本升级太频繁，所以没有很好地整理文档。本文就来总结这些知识内容与大家分享,也方便自己以后回顾。
既然是开发Chrome扩展程序，自然需要Chrome浏览器，然后下载一些示例程序。一般的Chrome扩展程序是.crx文件，但实质上它只是一个压缩文件，随时可以以zip格式来解压查看里面的内容。但是为了开发方便，Chrome也支持直接上传文件夹，但是要先打开”开发模式”。启用方式很简单，只要开打Chrome浏览器，在Extensions窗口下(可通过菜单开打，也可以在地址栏里输入chrome://extensions来进入)勾选Develop mode就可以了:
这样就可以直接上传文件夹来安装在开发中的扩展程序了。如果开发完成也通过这里进行打包然后发布到Chrome商店上，不过这部分不在本文中介绍。
对比直接上传的和从商店上安装的扩展程序，可以发现几个明显的不同：
以文件夹格式上传的，会显示Loaded from项来指示扩展程序在文件系统中的位置，另外还可以通过刷新或者点击Reload链接按钮来更新修改过的扩展程序。而安装的则无法这么简单的来更新和升级了。
当然其他的内容都是一样的：名字、版本号这些接下来会介绍如何定义；权限(Permissions)的内容比较多本文也不会涉及，可以在官方文档中了解。还有ID这一项，它是Chrome指定给每个扩展程序的唯一标示，可以用它在Chrome浏览器中通过链接chrome-extension://<extensionID>/<pathToFile>打开扩展程序中的任意文件。比如Evernote的选项页面就是：chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/options.html
对于没有打包成.crx文件的扩展程序，Chrome会根据文件夹所在位置来指定生成ID；在第一次打包扩展程序时，Chrome会生成一个Private Key文件，之后就可以用同样的Key来标示同一个程序的版本升级，Chrome也就会赋予它同样的ID。之后也会介绍这个ID还有其他的用处。
Read More →
作为一名程序员，可以说有着较强的逻辑思维来编写程序代码，但是在界面设计上却常常因欠缺艺术思维而缺乏美观。在于前段开发的时候往往会碰到这样的窘境：能够用JavaScript实现功能、用CSS做好布局，但是在配色方面却显得无从下手。想要做Photoshop做一些效果图，却又不熟悉软件的使用，网上寻找到素材不是不能完全满足要求，就是有版权需要付费。作为一个公司可以聘请专业的美工人员来帮助完成这些需求，但是作为个人就只能自己想办法了。
幸好随着HTML5和CSS3标准化的一步步推进，各个浏览器对这些标准更加全面的支持和实现，许多以前靠依靠图片才能实现的效果，现在都可以通过CSS3的属性来实现。比如：让按钮看起来有立体感的阴影效果和渐变效果，以前只能放置背景图来实现，现在则可以用box-shadow和gradient来设置；以前想设计圆角边框，也得使用图片做背景，现在用border-radius就搞定了还能四个角区别设置。
在本文中将分享用CSS3设计出来的样式来呈现出关闭按钮的样子，这样以后想设计简单的对话框，就不需要求美工来帮忙画按钮的图片了。先来看看样式:
[codesyntax lang=”css” lines=”normal”]
/* basic style */
.close {
/* still bad on picking color */
background: orange;
color: red;
/* make a round button */
border-radius: 12px;
/* center text */
line-height: 20px;
text-align: center;
height: 20px;
width: 20px;
font-size: 18px;
padding: 1px;
}
/* use cross as close button */
.close::before {
content: "\2716";
}
/* place the button on top-right */
.close {
top: -10px;
right: -10px;
position: absolute;
}
[/codesyntax]Read More →
在我研究生的时候，我上了一门OpenGL的课程。我非常喜欢OpenGL，因为它让我写的程序从此不再只局限于黑白的终端界面，而变得艳丽多彩。从那么课上，我也第一次认识了“贝塞尔曲线Bézier Curve”，它是那么的神奇，仅仅用几个点通过一个公式就能表现出一条优美的曲线。
这让一直热爱数学的我无法自拔，仿佛又回到了高中，坐在课堂里听着彪哥（我的高中数学老师）给我们讲述着各种曲线方程：抛物线、椭圆、双曲线……可惜怎么就从来没有提到过贝塞尔曲线呢。好吧，不在高考考纲之中。
贝塞尔方程的优点在于可以利用较少的存储几个点就能描绘出光滑的曲线或者曲面。而方程的计算也不会消耗太多的时间，真可谓是图形学中的一把利器。虽然后来并没有继续学习和使用OpenGL，但是也在其它很多方面又再次接触到了贝塞尔曲线，比如CSS中的一些渐变方法(Timing Function)，iOS动画的时间方程。
Read More →
这个题目其实有点标题党了，其实本篇文章主要内容应该是说“代码中的美元符号(dollar sign)”。想总结一下我所看到的美元符号在代码中的起到的作用，当然了并不是说它作为格式化字符时出现在数字前当钱币单位的作用。
Read More →
每个HTML都希望自己能呈现给别人亲和的引入注目的感觉，CSS可以帮助HTML实现这样的目的。
虽然没有CSS，HTML也可以自己完成同样的修饰，但是可能会一片混乱，不像有CSS的HTML那样，让内容和修饰分开。
而仅有CSS，很多想要的效果却也无法看出。
Read More →