酷壳 – CoolShell.cn

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

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

初探

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

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

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

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

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

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

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

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

阅读全文…

在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，备份，回滚等机制）。

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

下面是我这段时间来收集的一些有意思的东西。本站这样的文章还很多，如这个，这个，这个。

Javascript Garden，这是学习Javascript最好的网站了。http://bonsaiden.github.com/JavaScript-Garden，这个文档由两具StackOverflow的人写成, Ivo Wetzel(Writing) 和 Zhang Yi Jiang (Design)，表示敬意。

想看看Web开发有哪些技术吗？你得看看这个网站：http://stackparts.com/，他对目前几乎所有Web上用得到的技术都分了个类。下面是个抓图。

Mozilla的安全编程规范 https://wiki.mozilla.org/WebAppSec/Secure_Coding_Guidelines Downloads associated to Software development

PHP,Perl, Ruby, Python语法比较http://hyperpolyglot.org/scripting?utm_source

阅读全文…

下面是近期收录的一些文章和资源，希望对你有用。

系统方面

• 印度的电子商务网站flipkart的性能扩展（PPT） http://www.slideshare.net/sids/how-flipkart-scales-php，都是一些最基本的东西，对于初学者来说很不错。PPT做的也不错。

• Tagged.com的扩展之路 – 1亿用户，1000台服务器，50亿的PV http://highscalability.com/blog/2011/8/8/tagged-architecture-scaling-to-100-million-users-1000-server.html 还是PHP的WEB站点。另外，highscalability.com这个网站上有很多和高性能有关的文章，很不错。比如最新的：Stuff The Internet Says On Scalability For September 16, 2011

• 浏览器是怎么工作的？ http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ 相当不错的一个教程，告诉你浏览器里面是怎么搞的，很不错。如果图片看不到，可以看这里。如果你英文不是太好，你可以看看中译版，译得并不是太好。

Mozilla's Gecko rendering engine main flow

• 怎么使用epoll的示例 https://banu.com/blog/2/how-to-use-epoll-a-complete-example-in-c/

• Intel C/C++ 64位程序开发教程 http://software.intel.com/en-us/articles/lessons-on-development-of-64-bit-cc-applications/ 本站以前也介绍过一个关于64位C/C++的编程注意事项。

Web上的用户登录功能应该是最基本的功能了，可是在我看过一些站点的用户登录功能后，我觉得很有必要写一篇文章教大家怎么来做用户登录功能。下面的文章告诉大家这个功能可能并没有你所想像的那么简单，这是一个关系到用户安全的功能，希望大家能从下面的文章中能知道什么样的方法才是一个好的用户登录功能。以下内容，转载时请保持原文一致，并请注明作者和出处。

用户名和口令

首先，我们先来说说用户名和口令的事。这并不是本站第一次谈论这个事了。如何管理自己的口令让你知道怎么管理自己的口令，破解你的口令让你知道在现代这样速度的计算速度下，用穷举法破解你的口令可能会是一件很轻松的事。在这里我想告诉从开发者的角度上来做设计这个用户名和口令的事。下面一几件规则：

• 限制用户输入一些非常容易被破解的口令。如什么qwert，123456, password之类，就像twitter限制用户的口令一样做一个口令的黑名单。另外，你可以限制用户口令的长度，是否有大小写，是否有数字，你可以用你的程序做一下校验。当然，这可能会让用户感到很不爽，所以，现在很多网站都提供了UX让用户知道他的口令强度是什么样的（比如这个有趣的UX），这样可以让用户有一个选择，目的就是告诉用户——要想安全，先把口令设得好一点。

• 千万不要明文保存用户的口令。正如如何管理自己的口令所说的一样，很多时候，用户都会用相同的ID相同的口令来登录很多网站。所以，如果你的网站明文保存的话，那么，如果你的数据被你的不良员工流传出去那对用户是灾难性的。所以，用户的口令一定要加密保存，最好是用不可逆的加密，如MD5或是SHA1之类的有hash算法的不可逆的加密算法。CSDN曾明文保存过用户的口令。（另，对于国内公司的品行以及有关部门的管理方式，我不敢保证国内网站以加密的方式保存你的口令。我觉得，做为一个有良知的人，我们应该加密保存用户的口令）

霍炬近两个月前写过一篇《microblogging和微博信息架构产品差距和影响》分析了国内微博和Twitter的差距，重点就是因为信息的平等性。我也一直在观察新浪微博，以及新浪和Twitter的一些功能上的差别。发现了一些东西，想在这里和大家分享一下。我的见解达不到像霍炬那样的层次，作为一个技术人员，我只能在产品功能上做些分析。欢迎大家指正。

现实状况

国内的微博就是新浪，Sohu微博，腾讯微博，以及饭否。我们不难发现：

• 搜狐的和腾讯的就是Copy新浪的。在Following和Followed上大家都有自己所谓的“创新”
• 饭否是在Copy Twitter，这点太明显了，不过，抄在了表面，而且相当的怪。

国内所有的这些以Twitter为蓝本干出来的这些东西，其和Twitter在核心功能上有这些差别：

• Twitter的Retweet一点信息都加不上，国内的微博的转发需要加上自己的评论，也就形自己的信息。
• Twitter的Reply只会有一个@原来的人，国内的Reply也很相似，只是勾上转发后就会把Reply的东西以“//@XXX”的方式成为自己的信息。
• 饭否的做法比较怪，转发加原文（想做成新浪的样子），回复不加原文，只有@（Twitter）的样子，可见饭否的分裂。

SNS中的上下文

这段时间，我一直在想，新浪为什么要做成这样，为什么不做成Twitter那样，或者，为什么Twitter做成那样而不是新浪这样？从表面上看上去，新浪的“回复+转发”会带被回的信息，而Twitter的回复不带上下文，Twitter上一些我fo的人的话题完全看不懂，不像新浪的还能看到上文。

老实说，在一开始，我还觉得新浪微博这种用法和技术上要比 Twitter 要强大，现在看来是我当时对Twitter并不熟悉。经过这段时间的观察。我恰恰发现新浪在转发和回复上都要带上原文其实是一件很没有技术含量的事。要说清这个事，请让我说一下评论和回复的事。

阅读全文…

下面的示例展示了使用纯CSS制作的各种图形，你可以自由地修改文中的CSS代码。这个收集的原文在这里。

经测试，IE9, Chrome, FF, Safari都可以正常显示。

阅读全文…

下面是一个Web应用的开源列表。没什么可说的，太疯狂了。尤其是Web 2.0那一堆。我不知道你怎么想，有些开源项目的源码写得挺不好的，尤其是性能方面。或许你会以为改一改他们就可以成为为自己所用，不过，改这些开源的项目还真不容易。玩玩还可以。

数字媒体

• 相册（Flickr, Picasa）

• Gallery，基于PHP + MySQL的Web相册。非常易于使用，包括一个配置向导，对于相片的操作包括自动生成缩略图、相片的大小改变、选择、排序等。
• Piwigo，基于PHP + MySQL。配备了强大的功能，发布和管理您的照片，可扩展性和智能浏览功能，如类别，标签，或年表。这是网络和照片的标准要求。扩展使Piwigo更可扩展性和可定制的。
• UberGallery，一个简单易用的相册。PHP。不需要数据库。
• Zenphoto，一个简单的web相册程序,它能够简单的展示你的图片，并含有你所需要的所有功能和特点。可以和Wordpress集成。

• 视频（YouTube）

• Flowplayer，一个用Flash开发的在Web上的视频播放器，可以很容易将它集成在任何的网页上。支持HTTP以及流媒体传输。
• Plumi，一个建立在Plone 内容管理系统上的视频分享系统，可帮助你轻松建立视频分享网站。

今天晚上（2011年6月28日），新浪微博出现了一次比较大的XSS攻击事件。大量用户自动发送诸如：“郭美美事件的一些未注意到的细节”，“建党大业中穿帮的地方”，“让女人心动的100句诗歌”，“3D肉团团高清普通话版种子”，“这是传说中的神仙眷侣啊”，“惊爆!范冰冰艳照真流出了”等等微博和私信，并自动关注一位名为hellosamy的用户。

事件的经过线索如下：

• 20:14，开始有大量带V的认证用户中招转发蠕虫
• 20:30，2kt.cn中的病毒页面无法访问
• 20:32，新浪微博中hellosamy用户无法访问
• 21:02，新浪漏洞修补完毕

新浪微博XSS事件

在这里，想和大家介绍一下XSS攻击，XSS攻击又叫跨站脚本式攻击，你Google一下可以搜到很多很多的文章。我在这里就简单地说一下。

阅读全文…

文章来源：Best “must know” open sources to build the new Web。个人感觉这个收集贴收集成相当的全。

学习HTML 5编程和设计

• ★ HTML5 Rocks : Major Feature Groups  的学习 HTML5 的资源 (HTML5 演示, 教程 ). 源码
• 很不错的 HTML5 Dashboard – Mozilla，效果很炫。
• WhatWG Developers, 一个清楚的 HTML5 技术规格说明书。
• ★ StackOverflow : 大名鼎鼎的技术问答式论坛。
• ★ Addyosmani, jQuery 和 JavaScript 文章教程
• Sohtanaka, jQuery 和 JavaScript 文章和教程
• ★ Nettuts+ 是一个面对Web开发人员和设计人员的网站，提供各种技术教程和文章，覆盖 HTML, CSS, Javascript, CMS’s, PHP 和 Ruby on Rails.
• Codrops, 教程和 web 资源
• WebAppers, 最好的开源资源
• Tutorialzine – PHP MySQL jQuery CSS 教程, 资源和赠品
• Mozilla JavaScript guide
• codes snippets, 作者自己收集的一些代码片段

阅读全文…