“炮轰”事件中不得不说的几点

这几天前端界可真不太平,阿里巴巴疯狂招人,几乎每个群都能看到阿里招人的帖子,这是大好事啊!还有一件事情就是最近的“炮轰”事件,和阿里招人一样的疯狂,这两天群里也到处都是。

关于炮轰事件的一些链接:

http://bbs.51js.com/viewthread.php?tid=85328&extra=&page=1

http://www.javaeye.com/topic/474725

http://bbs.blueidea.com/thread-2950318-4-1.html

给自己澄清

本来我可能和大多朋友一样,看看热闹,说说笑。但是自从《炮轰《JavaScript征途》,兼批技术社区的吹捧之风》今天在再各个群里传播之后,我的QQ收到了6个网友类似的问题:你怎么被炮轰了,这些事情是真的吗?因为我今天从9:00-晚上下班几乎都在开会中午除了吃一顿饭的时间就没看过QQ留言。很多等QQ我在线的时候那几个网友都已经不在。再这里我做一下澄清:css88(我的博客域名)和css8(《JavaScript征途》作者)没有任何关系。至于域名雷同也是纯属巧合。估计那几个朋友也是看到css88和css8很像所以误认为是我了。谢谢大家的关注,可惜我是菜鸟,才疏学浅,写书这种事情就更不敢奢望了。

css88和css8鲜为人知的故事

要说和css8一点关系也没有其实也不对,其实我们也有过一段小故事。本来这事情已经过去很久了,没必要说了,但是真好碰到这档子的炮轰事件,勾起了我的往事。大概一年前,css8在css森林群说一个“css哥德巴赫猜想”。把一个css问题和哥德巴赫猜想相比实在的让人无法接受。所以我个css8在css森林发生一些小争执。可能是他认为和我们无法沟通,就退出了css森林群。我也一直愧疚,幸好我的观点当时得到龙哥和未来的支持,所以我逃过了一劫,免于被龙哥T出。

就“炮轰”事件的几点观点

1.css8的技术和对前端做的贡献无可厚非;

2.书本出错本也没什么大不了的事情,看看《精通javascript》这本书也有很多错误,甚至还有几个错误没被勘误页面收录,但是也没见有人“炮轰”。本来指出书中的错误对作者和读者都是有好处的,但是事情发展到这个底部不得不说请各位坦诚,谦虚,放低姿态。

3.多一些真诚,多负一点责任,牛人写书评不要太商业化。做技术的RP不好挣啊。

一个DOM选择器

从一个js文件中分离出来的,还不知道作者是谁。

在指定的DOM节点context下按CSS2,CSS3选择器的定义去找出相关的DOM节点
支持的选择器:
E[att^="val"],E[att$="val"],E[att*="val"],E[att~="val"],E[att|="val"],E[att!="val"],E[att="val"]
E:enabled,E:disabled,E:checked,E:not(s)
+ E.class
> E.class
E.class
E#id
E
参数:pattern:CSS2 Selector可以通过逗号分隔多个选择器,context指定要查找的DOM节点范围
返回值:[DOM Collection]


function selector(pattern, context) {
 var re = new RegExp('([a-z]*)([\.#:]*)(.*|$)', 'ig');
 var match = re.exec(pattern);
 //alert(context);
 var conditions = []; 
 if (match[2] == '#') conditions.push(['id', match[3]]);
 else if(match[2] == '.') conditions.push(['className', match[3]]);
 else if(match[2] == ':') conditions.push(['type', match[3]]); 
 var s = match[3].replace(/\[(.*)\]/g,'$1').split(<a href="mailto:'@'">'@'</a>);
 for(var i=0; i<s.length; i++) {
  var cc = null;
  if (cc = /([\w]+)([=^%!$~]+)(.*)$/.exec(s[i])){
   conditions.push([cc[1], cc[2], cc[3]]);
  }
 }
 var list = (context || document).getElementsByTagName(match[1] || "*"); 
 if(conditions) {
  var elements = [];
  var attrMapping = {'for': 'htmlFor', 'class': 'className'};
  for(var i=0; i<list.length; i++) {
   var pass = true;
   for(var j=0; j<conditions.length; j++) {
    var attr = attrMapping[conditions[j][0]] || conditions[j][0];
    var val = list[i][attr] || (list[i].getAttribute ? list[i].getAttribute(attr) : '');
    var pattern = null;
    if(conditions[j][1] == '=') {
     pattern = new RegExp('^'+conditions[j][2]+'$', 'i');
    } else if(conditions[j][1] == '^=') {
     pattern = new RegExp('^' + conditions[j][2], 'i');
    } else if(conditions[j][1] == '$=') {
     pattern = new RegExp(conditions[j][2] + '$', 'i');
    } else if(conditions[j][1] == '%=') {
     pattern = new RegExp(conditions[j][2], 'i');
    } else if(conditions[j][1] == '~=') {
     pattern = new RegExp('(^|[ ])' + conditions[j][2] + '([ ]|$)', 'i');
    }
    if(pattern && !pattern.test(val)) {
     pass = false;
     break;
    }
   }
   if(pass) elements.push(list[i]);
  }
  return elements;
 } else {
  return list;
 }
}

绿盟科技招聘前端开发工程师

http://www.nsfocus.com
招前端开发

有意向的朋友请发简历至lvxuhui@gmail.com

周围的朋友也可以推荐一下,谢谢~

地点:北京海淀
待遇:6K左右,15.5个月薪水,五险一金
职责:
1、Web界面制作;
2、实现界面交互,增强用户体验;

用css的border属性实现三角

今天啄米鸟给我了一个冰剑的《em实现倒三角的提示效果》。仔细琢磨了一下运用的还是很巧妙的,在现实的前端开发中也很有用,至少可以减小图片的字节。

先看看应用实例吧:

11

实现的原来就是:在一个宽高为0像素的块状元素中设置border属性,例如


.box{

width:0px;

height:0;

border-bottom:50px #F00 solid;

border-left:50px #03F solid;

border-right: 50px #F90 solid;

border-top:50px #6C0 solid;

}

在浏览器中的显示如图: Read More »

高性能网站建设指南——前端工程师技能精粹(中文PDF版)下载

内容简介
本书结合Web 2.0以来Web开发领域的最新形势和特点,介绍了网站性能问题的现状、产生的原因,以及改善或解决性能问题的原则、技术技巧和最佳实践。重点关注网页的行为特征,阐释优化Ajax、CSS、JavaScript、Flash和图片处理等要素的技术,全面涵盖浏览器端性能问题的方方面面。在《高性能网站建设指南》中,作者给出了14条具体的优化原则,每一条原则都配以范例佐证,并提供了在线支持。《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复JavaScript的技巧、关闭ETags的技巧、Ajax缓存技术和最小化技术等。《高性能网站建设指南》适合Web架构师、信息架构师、 Web开发人员及产品经理阅读和参考

下载地址:http://www.css88.com/book/book1.zip(保留10天)

拼装html字符串的最快方法

原文地址:Fastest way to build an HTML string

第一种:逐个字符串相加


var arr = ['item 1', 'item 2', 'item 3', ...],
list = '';

for (var i = 0, l = arr.length; i < l; i++) {
list += '<li>' + arr[i] + '';
}

list = '<ul>' + list + '</ul>';

这种最常见的,但是效率最低!代码逻辑相对来说复杂。

第二种:逐个 push 进数组


var arr = ['item 1', 'item 2', 'item 3', ...],
list = [];

for (var i = 0, l = arr.length; i < l; i++) {
list[list.length] = '<li>' + arr[i] + '';
}

list = '<ul>' + list.join('') + '</ul>';

比上一种方法稍微快一些,但还是不够好…

第三种:直接join()


var arr = ['item 1', 'item 2', 'item 3', ...];

var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

使用原生的方法(比如 join()),不管它后面是怎么实现的,一般都比其他方法快很多,而且代码非常简洁。

浏览器性能

每种方法是使用一个长度为 130 的数组来测试,其中每个元素的长度是多种多样的,防止浏览器对一定长度的字符串做特殊的优化;每种方法测试了 1000 次;下面的结果显示,执行完这 1000 次需要的时间:

2009-09-08_124126

css中的元素旋转

先来看看这个图片:

text-rotation

这是一个日期的展现,其中2009就是通过元素旋转实现的。

原文在这里:http://snook.ca/archives/html_and_css/css-text-rotation(翻译:http://bbs.lampbrother.net/thread-13138-1-1.html

这里是html代码:


<div>
  <span>31</span>
  <span>July</span>
  <span>2009</span>
</div>

旋转的css:


-webkit-transform: rotate(-90deg);//Safari 4+,Google Chrome 1+
-moz-transform: rotate(-90deg);//Firefox 3.5+
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);//ie

虽然它目前不算是CSS3中的一部分,但Webkit已经有了它自己的一套变形属性,Mozilla也在效仿。变形包含了很多不同类型的值,不过其中最有意思也是最有用的就是旋转了包括任意的旋转角度。

Read More »

写给那些骂我的人

2个月前建了javascript森林群,专门讨论js的,人数也是暴涨,短短的一个多月就200满员了。同时也T了不少人。有几个人被T了就在我博客,QQ空间,还有加群申请信息中骂我。我也是为维护群的质量才T人的,很多人进群就是潜水一值潜到被T,有些人压根没看过别人的聊天记录,就是占着位置,还有些人就是看人家聊,看看聊天记录。群是给大家一起讨论的,不是给你来看记录和占位置的,一个月没说话我肯定要T的,包括我聊了很久的朋友。最近刚刚规定进群要发博客或者作品,或者推荐。没有js基础进来讨论有意思吗?请先有基础再来讨论这样不是更好吗。当然我当初初学的也是一样,拼命加群,可是后来发现了找一个自己合适的群非常重要,现在群了很多都是聊天的,真正讨论技术的有几个呢?群是不是越多越好。群多了也是浪费自己的时间。

有几个被T的人却要骂我,我有时候想想这有什么意思呢?望那些骂人的人自己好好想想,做事先做人!

我的群我管理的和人家不一样,我的心情每天也不要一样,加群需谨慎。

MTJS DOM部分封装基本结束

MTJS从开始到现在差不多一个月了,DOM部分封装基本结束,接下来就要封装事件了。

http://code.google.com/p/mtjs/source/browse/trunk/MT.core.js

文档页面是:

http://mtjs.googlecode.com/svn/trunk/MT.core_docs/index.html

欢迎大家提出宝贵的意见和建议!

我的婚纱照(第二季)

第一季的照片在:http://www.css88.com/photo/photo.html

今天放出第二季照片,这些照片都是做成册子的照片。

第二季的相册在:http://www.css88.com/wedding_dress_photos/

2009-08-28_2308392009-08-28_230917