Skip to content

Recent Articles

17
十二

CSS框架

CSS的框架能帮助你快速构架兼容性好的站点，各个框架的优劣可以自己比较。

  1. blueprint http://www.blueprintcss.org/
  2. malo http://code.google.com/p/malo/
  3. elements http://elements.projectdesigns.org/index.html
  4. ez-css http://www.ez-css.org/
  5. 960 http://960.gs/
14
十二

有道笔记

感觉比evernote的体验更好一些，最关键的evernote经常被墙或打开非常慢，这就已经非常影响体验，youdao note体验不错，而且轻松保存网页，空间也1G+计时增加，已在web、iphone、ipad体验，感觉良好。赞一下网易。

http://note.youdao.com

9
十二

推荐网易阅读

体验了一下网易阅读的HD版，体验的确做的很不错，更关键里面有不少的内容，科技类的也很多，订阅了很多，支持下载离线阅读，如果带上Google Reader就完美了。App地址：http://yuedu.163.com

 

1
十二

CSS hacks整理

hack是前端工程师的一把双刃剑，hack很容易解决IE的问题，但是hack不好维护，尽量少用，一些hack的用法：
条件区别样式表，单独文件管理，更好维护：

1
2
3

<!--[if IE 8]><link rel="stylesheet" href="ie8.css"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="ie7.css"><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="ie6.css"><![endif]-->

CSS代码中hack：

1
2
3
4
5
6
7

_selector{property:value;} //IE6
*selector{property:value;} //IE6 & IE7
+selector{property:value;} //IE7
selector{property:value\9;} //IE6 & IE7 & IE8 & IE9
selector{property:value\0;} //IE8 & IE9
selector{property:value\9\0;} //IE9
selector{property:value !important} //!IE6

还可以使用class：

1
2
3
4
5
6
7
8
9

<!--[if !IE]><html><![endif]--> // 非 IE 浏览器的情况，不添加任何作用类
<!--[if IE 6]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
 
.selector { color: black; }
.ie8 .selector { color: green; } /* IE8 */
.ie7 .selector { color: blue; } /* IE7 */
.ie6 .selector { color: red; } /* IE6 */
30
十一

windows phone web demo

在线体验windows phone http://m.microsoft.com/windowsphone/en-us/demo/index.html

20
十一

Html5 UI框架Kendo

Kendo UI is a framework for modern HTML UI. Engineered with the latest HTML5, CSS3, and JavaScript standards, it delivers everything needed for client-side, jQuery-powered development in one integrated, compact package.

这样除了Jquery Mobile和Sencha Touch两种主流Mobile UI框架外，又多出一种，不过Kendo是HTML5 UI框架，目前Mobile UI方面还有待提高，HTML5会是以后手机App的趋势。

附官方地址：Kendoui.com

21
九

html5+css3做出来的超炫页面

原文地址：http://superdit.com/2011/09/13/18-showcase-of-css-3d-use/

 

28
七

Nginx状态页

官方文档地址：http://wiki.nginx.org/HttpStubStatusModule#stub_status

1
2
3
4

Active connections: 291
server accepts handled requests
  16630948 16630948 31070465
Reading: 6 Writing: 179 Waiting: 106

active connections 当前所有的连接，包括keep alive的wait连接
server accepts handled requests 这三个参数分别表示到目前为止已接受的连接数、已处理的连接数、已接受的请求数，其中requests/handled即是到目前为止的连接利用率（每个连接出来多少个请求）
reading 表示在读取request的header头信息，接受请求
writing 在接受request的body信息，后台处理，返回信息，处理请求
waiting keep-alive状态下处于wait的连接

27
七

IBM发布HTML5可视化设计工具Maqetta

IBM的开源的HTML5设计工具，值得一试：

官方地址：http://maqetta.org

22
七

javascript json parse

将字符串的json数据解析为object或array有两种方法，一是使用eval函数，二编写函数解析，json.org中已经介绍两种方法http://www.json.org/js.html
一、eval，注，这种方法并不安全，eval可以执行程序，不推荐使用

1
2
3
4

function json_decode(string)
{
	return eval('(' + string + ')');
}

二、使用开源项目的解析函数 https://github.com/douglascrockford/JSON-js，json_parse.js压缩后约为3K左右，源码就不贴了。
使用方法：

1
2
3

<script src="/scripts/json_parse.js" type="text/javascript"></script>
 
var ret = json_parse(data);

三、如果你使用HTML5的浏览器，那就更简单了，JSON的支持已经纳入ECMAScript 5的标准中了

1

var ret = JSON.parse(data); console.log(ret);
« Older Entries