Web开发 | 酷壳 - CoolShell

程序员疫苗：代码注入

2012年12月10日陈皓评论 63 条评论 77,448 人阅读

几个月在我的微博上说过要建一个程序员疫苗网站，希望大家一起来提交一些错误示例的代码，来帮助我们新入行的程序员，不要让我们的程序员一代又一代的再重复地犯一些错误。很多程序上错误就像人类世界的病毒一样，我们应该给我们的新入行的程序员注射一些疫苗，就像给新生儿打疫苗一样，希望程序员从入行时就对这些错误有抵抗力。

我的那个疫苗网站正在建议中（不好意思拖了很久），不过，我可以先写一些关于程序员疫苗性质的文章，也算是热热身。希望大家喜欢，先向大家介绍第一注疫苗——代码注入。

Shell注入

我们先来看一段perl的代码：

[perl]use CGI qw(:standard);
$name = param(‘name’);
$nslookup = "/path/to/nslookup";
print header;
if (open($fh, "$nslookup $name|")) {
while (<$fh>) {
print escapeHTML($_);
print "<br>\n";
}
close($fh);
}[/perl]

如果用户输入的参数是：

coolshell.cn%20%3B%20/bin/ls%20-l

那么，这段perl的程序就成了：

…

阅读全文 Read More

(41 人打了分，平均分： 4.07 )

一次Ajax查错的经历

2012年08月27日陈皓评论 93 条评论 63,058 人阅读

先说故事，再说想法吧。

我有一朋友做网站，用jQuery的Ajax方法从后端载入一段HTML代码然后动态插入到网页的Div元件中。这个东西太普遍了。jQuery强大的load方法可以完成这个事情。朋友的代码是这么写的：

[javascript]var tab = jQuery("#dynamic_tab");
var url = "/list_ajax/";
tab.load(url);[/javascript]

简单到不能再简单了。在Chrome，Firefox，Safari下运行一点问题也没有，只有IE不行，不管是IE7，IE8，还是IE9。问题的症壮是，使用IE访问那个Ajax的链接，没有问题，但是在jQuery的Ajax方法返回了“undefined”的respons对象。没有任何报错！

怎么搞也搞不定，只好Google了一下——“jQuery load IE”，一看，很多人都在问这个问题。于是开始了散弹枪编程方式。

排在第一的就是StackOverflow被浏览了33K次的这个问题：jQuery’s .load() not working in IE – but fine in Firefox, Chrome and Safari，答案没有被打勾（不靠谱），StackOverflow还有很多人问相似的问题，不过都没有答案。不管三七二十一，先试了一下，散弹枪嘛。试了半天都没有用。

然后上Google查，又看到有人说的IE缓存的问题，什么，要把cache设置成false，或是用下面的方法来解决：

[javascript]var tab = jQuery("#dynamic_tab");
var fuckie = Math.random();
var url = "/list_ajax/"+"?fuckie="+fuckie;
tab.load(url);[/javascript]

反正还是一样，统统不Work，几乎所有的都试了，都不Work。搞了一天的朋友恼怒道：“Microsoft应该快点倒闭吧，产品太烂了”。IE的确是太烂了。

…

阅读全文 Read More

(35 人打了分，平均分： 3.86 )

各式各样的验证码

2012年07月19日陈皓评论 64 条评论 65,925 人阅读

还记得以前那篇《超强验证码》？其实这个世界变态的验证码还有很多，下面是一个列表向像展示了各种稀奇古怪的验证码。不过本文并不单单只是收集这验证码，前面的比较恶搞，后面的会向你展示什么是有accessibility验证码。

完全看不清楚的

这是人类的字符吗？

图案中的字母是什么？

…

阅读全文 Read More

(24 人打了分，平均分： 4.08 )

Javascript 中的 var

2012年05月24日陈皓评论 48 条评论 30,531 人阅读

MelonCard发布了一篇文章——”how one missing var ruined our launch“（”少写了一个var毁了我的网站”），这篇文章是说MelonCard用Node.js做后台，因为出了一个小高峰——有50-100人注册，结果整个网站都不响应了，而且还出现了很多奇怪的问题。当他们调查到问题的要源的时候，他们发现下面的代码少写了一个var。

[javascript]app.all(‘/apps/:user_id/status’, function(req, res, next) {
// …
initial = extractVariables(req.body);
});[/javascript]

为什么inital少写一个var会引发这个问题呢？因为如果你不写var，这个局部的变量会被javascript当成全局变量，而这个变量又是一个函数，所以，当多用户并发的时候，这个本应该在不同用户下互不干扰的变量，成了各个用户共享的东西。试想，用户A的数据被用户B覆盖了，用户A和B的数据还没处理完，结果被新的C给搞乱了，程序的逻辑自然出现了问题。

在stackoverflow.com上有这么一个贴子说明了“有var”和“无var”的差别：

// These are both globals
var foo = 1;
bar = 2;

function test()
{
    var foo = 1; // Local
    bar = 2;     // Global

    // Execute an anonymous function
    (function()
    {
        var wibble = 1; // Local
        foo = 2; // Inherits from scope above (creating a closure)
        moo = 3; // Global
    }())
}

上面这个示例告诉我们，如果你不用var，那么这个js引擎会一层一层地向上找父作用域中的变量，如果找到了，就用，如果找不到了，就会帮你定义一个全局的变量。上面这个例子充分说明了这一点。所以，如果你想在当前的作用域用声明变量，你一定要用var。这对于一些乱写javascript代码的程序员要注意了。这里再给大家介绍一个工具——

…

阅读全文 Read More

(16 人打了分，平均分： 3.94 )

神奇的CSS形状

2012年03月24日 Neo 评论 21 条评论 29,789 人阅读

【感谢 Neo 投递本文 – 微博帐号：@_锟_ 】

在StackOverflow上有这么一个问题，有位同学在http://css-tricks.com/examples/ShapesOfCSS/ 找到一些使用CSS做的形状，其中一位同学对下面的这个形状充满了疑问。

形状是：

代码是：

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

这位同学就提问啦，为啥这么这么几句就能画出一个三角形呢？
于是呢，有高人出现，这个高人图文并茂的解释了这个三角的成因

…

阅读全文 Read More

(26 人打了分，平均分： 3.31 )

CSS 布局:40个教程、技巧、例子和最佳实践

2012年03月19日 Neo 评论 31 条评论 104,630 人阅读

【感谢 Neo 投递本文 – 微博帐号：_锟_ 】

前言： 布局是WEB开发一个重要的课题，进入XHTML/CSS后，使用TABLE布局的方式逐渐淡出，CSS布局以众多优点成为主流，本文将介绍40个基于CSS的web布局的资源和教程。文章的出处在http://www.noupe.com/css/css-layouts-40-tutorials-tips-demos-and-best-practices.html。文中的不少的例子在一本经典的CSS书籍《CCS: The Missing Manual, 2nd Edition》中都可以找到，据我所知，第二版在中国没有翻译出版。你可以从这里下载英文版（不过需要注册个用户名）

正文
基于CSS的布局能提供更灵活布局方式和更强的用户视觉体验。一些重要技巧和关键点可以帮助初学者理解CSS布局的基础和本质。这也是本文成文的原因 ——找到那些完美的布局，完全灵活的，等高栏和工作完美的布局。
因此下面这个列表就是我们整理了网络上关于基于CSS布局的一些技巧，教程和最佳实践的列表。
当然你也可能对下面这些和CSS相关的主题有兴趣：

The 7 CSS Hacks that we should use
Using CSS to Do Anything: 50+ Creative Examples and Tutorials
Using CSS to Fix Anything: 20+ Common Bugs and Fixes

…

阅读全文 Read More

(19 人打了分，平均分： 3.68 )

理解Javascript的闭包

2012年03月07日 Neo 评论 91 条评论 83,180 人阅读

【感谢 Neo 投递本文 – 微博帐号：_锟_ 】

前言：还是一篇入门文章。Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性。本文将以例子入手来介绍Javascript闭包的语言特性，并结合一点ECMAScript语言规范来使读者可以更深入的理解闭包。

注：本文是入门文章，例子素材整理于网络，如果你是高手，欢迎针对文章提出技术性建议和意见。本文讨论的是Javascript，不想做语言对比，如果您对Javascript天生不适，请自行绕道。

什么是闭包

闭包是什么?闭包是Closure，这是静态语言所不具有的一个新特性。但是闭包也不是什么复杂到不可理解的东西，简而言之，闭包就是：

闭包就是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。
闭包就是就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配
当在一个函数内定义另外一个函数就会产生闭包

上面的第二定义是第一个补充说明，抽取第一个定义的主谓宾——闭包是函数的‘局部变量’集合。只是这个局部变量是可以在函数返回后被访问。（这个不是官方定义，但是这个定义应该更有利于你理解闭包）

做为局部变量都可以被函数内的代码访问，这个和静态语言是没有差别。闭包的差别在于局部变变量可以在函数执行结束后仍然被函数外的代码访问。这意味着函数必须返回一个指向闭包的“引用”，或将这个”引用”赋值给某个外部变量，才能保证闭包中局部变量被外部代码访问。当然包含这个引用的实体应该是一个对象，因为在Javascript中除了基本类型剩下的就都是对象了。可惜的是，ECMAScript并没有提供相关的成员和方法来访问闭包中的局部变量。但是在ECMAScript中，函数对象中定义的内部函数(inner function)是可以直接访问外部函数的局部变量，通过这种机制，我们就可以以如下的方式完成对闭包的访问了。

…

阅读全文 Read More

(19 人打了分，平均分： 4.16 )

再谈javascript面向对象编程

2012年02月27日 Neo 评论 77 条评论 57,043 人阅读

前言:虽有陈皓《Javascript 面向对象编程》珠玉在前，但是我还是忍不住再画蛇添足的补上一篇文章，主要是因为javascript这门语言魅力。另外这篇文章是一篇入门文章，我也是才开始学习Javascript，有一点心得，才想写一篇这样文章，文章中难免有错误的地方，还请各位不吝吐槽指正

吐槽Javascript

初次接触Javascript，这门语言的确会让很多正规军感到诸多的不适，这种不适来自于Javascript的语法的简练和不严谨，这种不适也来自Javascript这个悲催的名称，我在想网景公司的Javascript设计者在给他起名称那天一定是脑壳进水了,让Javascript这么多年来受了这么多不白之冤，人们都认为他是Java的附属物，一个WEB玩具语言。因此才会有些人会对Javascript不屑，认为Javascript不是一门真正的语言，但是这此他们真的错了。Javascript不仅是一门语言，是一门真真正正的语言，而且他还是一门里程碑式的语言，他独创多种新的编程模式原型继承，闭包（作者注：闭包不是JS首创，应该Scheme首创，prototypal inheritance 和 dynamic objects 是self语言首创，Javascript的首创并不精彩,谢谢网友的指正。），对后来的动态语言产生了巨大的影响。做为当今最流行的语言（没有之一），看看git上提交的最多的语言类型就能明白。随着HTML5的登场，浏览器将在个人电脑上将大显身手，完全有替换OS的趋势的时候，Javascript做为浏览器上的一门唯一真真的语言，如同C之于 unix/linux，java之于JVM，Cobol之于MainFrame，我们也需要来重新的认真地认识和审视这门语言。另外Javascript的正式名称是：ECMAScript，这个名字明显比Javascript帅太多了！
…

阅读全文 Read More

(20 人打了分，平均分： 3.70 )

Javascript 面向对象编程

2012年01月09日陈皓评论 108 条评论 100,038 人阅读

Javascript是一个类C的语言，他的面向对象的东西相对于C++/Java比较奇怪，但是其的确相当的强大，在 Todd 同学的“对象的消息模型”一文中我们已经可以看到一些端倪了。这两天有个前同事总在问我Javascript面向对象的东西，所以，索性写篇文章让他看去吧，这里这篇文章主要想从一个整体的角度来说明一下Javascript的面向对象的编程。（成文比较仓促，应该有不准确或是有误的地方，请大家批评指正）

另，这篇文章主要基于 ECMAScript 5，旨在介绍新技术。关于兼容性的东西，请看最后一节。

初探

我们知道Javascript中的变量定义基本如下：

var name = 'Chen Hao';;
var email = 'haoel(@)hotmail.com';
var website = 'https://coolshell.cn';

如果要用对象来写的话，就是下面这个样子：

var chenhao = {
    name :'Chen Hao',
    email : 'haoel(@)hotmail.com',
    website : 'https://coolshell.cn'
};

于是，我就可以这样访问：

//以成员的方式
chenhao.name;
chenhao.email;
chenhao.website;

//以hash map的方式
chenhao["name"];
chenhao["email"];
chenhao["website"];

关于函数，我们知道Javascript的函数是这样的：

…

阅读全文 Read More

(32 人打了分，平均分： 4.19 )

Web开发中需要了解的东西

2011年12月07日陈皓评论 150 条评论 183,036 人阅读

在StackExchange上有人问了这样一个问题：What should every programmer know about web development?（关于Web开发，什么是所有程序员需要知道的？）里面给出的答案非常不错，所以，我翻译转载过来。顺便说一下，StackExchange真是非常好，大家可以对同一个答案做贡献和修订，看看这个问题的修订过程你就知道了——专业的问答网站应该怎么去做。这就是我在这篇文章中也说过真正的用户体验是什么样的。

好了，下面是正文（我对原文做了一些批注，也许不对或有误导，请大家指正）

下面的这些东西可能对于大多数人并不陌生，但是可能会有些东西你以前并没有看过，或是没有完全搞懂，甚至都没有听说过。（陈皓注：我相信当你看完这个列表后，你会觉得对于我国的Web开发有点弱了，还是那句话，表面上的东西永远是肤浅的）

接口和用户体验

小心浏览器的实现标准上的不一致，确信让你的网站能够适当地跨浏览器。至少，你的网站需要测试一下下面的浏览器：

最新的 Gecko 引擎 (Firefox)，
一个 Webkit 引擎 (Safari, Chrome, 或是其它的移动设备上的浏览器)
IE 浏览器 (测试IE的兼容性你可以使用微软IE的 Application Compatibility VPC Images)
Opera 浏览器。

最后，你可以使用一下这个工具来看看你的网页在不同的浏览器下是怎么被显示出来的（陈皓注：这个工具就是以前本站介绍过的在不同浏览器和平台上检查你的网站的兼容性）

多考虑一下人们是怎么来访问你的网站而不是那些主流的浏览器：手机，读屏软件和搜索引擎，例如：一些Accessibility的东西： WAI 和 Section508, 移动设备开发：MobiForge.

部署Staging：怎么部署网站的更新而不会影响用户的访问。 Ed Lucas的答案可以让你了解一些（陈皓注：Ed说了一些如版本控制，自动化build，备份，回滚等机制）。

千万不要直接给用户显示不友好的错误信息。

…

阅读全文 Read More

(53 人打了分，平均分： 4.23 )

酷壳 – CoolShell

享受编程和技术所带来的快乐 – Coding Your Ambition

Browsed by
分类： Web开发

程序员疫苗：代码注入

2012年12月10日陈皓评论 63 条评论 77,448 人阅读

Shell注入

一次Ajax查错的经历

2012年08月27日陈皓评论 93 条评论 63,058 人阅读

各式各样的验证码

2012年07月19日陈皓评论 64 条评论 65,925 人阅读

完全看不清楚的

Javascript 中的 var

2012年05月24日陈皓评论 48 条评论 30,531 人阅读

神奇的CSS形状

2012年03月24日 Neo 评论 21 条评论 29,789 人阅读

CSS 布局:40个教程、技巧、例子和最佳实践

2012年03月19日 Neo 评论 31 条评论 104,630 人阅读

理解Javascript的闭包

2012年03月07日 Neo 评论 91 条评论 83,180 人阅读

什么是闭包

再谈javascript面向对象编程

2012年02月27日 Neo 评论 77 条评论 57,043 人阅读

吐槽Javascript

Javascript 面向对象编程

2012年01月09日陈皓评论 108 条评论 100,038 人阅读

初探

Web开发中需要了解的东西

2011年12月07日陈皓评论 150 条评论 183,036 人阅读

接口和用户体验