- 由于当前技术仍偏向功能强化为主要思维,指令码趋向庞杂的结果,容易产生更多安全漏洞,且失去快速因应攻击调整架构的灵活性。
身 为JavaScript网路技术重要推手的雅虎(Yahoo!)架构设计师Douglas Crockford表示,现行网页开发技术思维仍偏重多媒体功能或浏览效能的提升,未来应以安全为第一优先。
Crockford 现为Yahoo!资深JavaScript架构师,负责YUI(Yahoo! User Interface)的架构设计,并且担任ECMA JavaScript 2.0技术委员会成员,为JavaScript开发社群大师级人物,此次受邀来台参加OSDC(Open Source Developer's Conference Taiwan)进行专题演讲,向国内开发者介绍ECMA JavaScript的发展。 Read More - JavaScript 是一款强大的广泛运用于现代Web站点及应用的脚本语言。作为一个技艺精湛的 Web 开发者,掌握JavaScript可以增强用户的使用体验,提供交互及富客户端等功能。
尽管JavaScript 的语法非常简单,但对于写程序而言仍然是困难重重,就是因为它的运行环境:基于Web浏览器。
以下您可以看到收集的8个实用的 JavaScript 测试及效验工具,它们都可以在不同环境下进行单元测试及校验测试您的脚本。
JSLint
JSLint是基于Web的验证JavaScript错误代码的工具。它拥有的功能及特定的设置来使用您的需求,自定义你的验证算法。 Read More - 经常我们打开外国网站的时候出现乱码,又或者打开很多非英语的外国网站的时候,显示的都是口口口口口的字符,
WordPress程序是用的UTF-8,很多cms用的是GB2312。
● 为什么有这么多编码?
● UTF-8和GB2312有什么区别?
● 我们在国内做网站是用UTF-8编码格式还是GB2312编码格式好?一. 各种编码的来历
可能很多同学一直对字符的各种编码方式懵懵懂懂,根本搞不清为什么他们有这么多编码。 Read More - 你们中有许多人可能已经听到过有关CSS3的不少传言,但是我们现在能真正用到的CSS3技巧又有哪些呢?本文,我将向你展示一些与众不同的 CSS3技巧,这些技巧在一些主要的浏览器中表现良好(如Firefox,Chrome,Safari,Opera浏览器)。这些效果会在不支持的浏览器中降级渲染(如IE浏览器)。使用浏览器特定的声明,许多提议的CSS3样式都可以马上拿来使用。

如果你不知道浏览器的特定声明是什么,你只需要记住它们都是CSS样式属性前与内核提供商有关的特定前缀。因为CSS3目前还没得到全面的支持,所以我们需要使用这些特定声明。具体的形式如下:- Mozilla/Firefox/Gecko浏览器的前缀: -moz-
- Webkit (Safari/Chrome)浏览器的前缀: -webkit- (注意:一些Wbkit的前缀只能在Safari下使用,Chrome不支持。)
你可能已经看到了,使用这些声明的有一个缺点,那就是如果我们想在Firefox,Safari和Chrome中都得到CSS3的效果,我们需要使用到上面所有这些前缀。也不用惊讶,IE浏览器不支持CSS3,因此也就不像其他主要浏览器有一个特定的前缀声明。
好了,我们已经讲的够多了,我们马上尝试一下。注意:样式声明去掉这些前缀就是W3标准的实际规范提议。关于这个页面的Demo(实例)说明
所有这些例子都是在这个页面里面,如果你不能正常查看实例的效果(或者只能查看部分),那说明你正在使用的浏览器并不支持这些CSS3效果阴影效果
阴影效果接受多个参数值。第一个是阴影的颜色,它还接受另外四个长度(lenght)值,前两的长度值分辨是X(水平)偏移量和Y(垂直)偏移量。接下一个参数是反映模糊度的数值。第四也是最后一个值是用来定义模糊的散布程度。
box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;阴影效果演示
渐变效果
CSS3的渐变样式刚开始很容易让人混淆,尤其-moz 和-webkit的渐变之间还存在不同。在-moz中,你首先需要定义渐变的方向,然后定义起始和终止的颜色。而-webkit的渐变则稍稍复杂一些,首先你需要定义渐变的类型,然后接下来两个值定义方向,最后两个值定义了渐变的起始颜色和终止颜色。
-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));:渐变效果演示实例
RGBA颜色模式
RGBA的颜色定义实际用起来没有给人的感觉那么复杂,它接受四个参数值,以此是:红色值,绿色值,蓝色值,以及透明度。我们不用hex(#)16 进制值的颜色,我们以RGB的模式来设置颜色,其中,透明度可以设置颜色的透明效果。透明度的取值范围在0到1之间,0是完全不透明,1是颜色完全透明。下面这些演示例子的透明度都是0.5,元素的透明度是50%,rgba不需要附加任何特定的浏览器前缀声明。
background-color: rgba(0, 54, 105, .5);HSL色彩模式(色调H,饱和度S ,亮度L)
除了RGBA,CSS3也支持HSL颜色模式。这给我们在颜色和色调的选择上提供了充足的余地。在HSL这种色彩模式中的H代表色调,S代表色度,L代表亮度。色调是色盘上角度值 ,而保饱和度和亮度则是颜色的百分比值。
background-color: hsl(209,41.2%, 20.6%);HSL演示实例
边框颜色
要使用这一CSS样式,你需要分别定义border-top, border-right, border-bottom, 和border-left 才能获得下面的效果。你注意到定义一个8像素的边框,然后边框又定义了8种不同的颜色。这因为边框的颜色数量必须与边框的像素宽度值相对应。
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;边框颜色演示
文本选择颜色设置
我不得不要说文本选择颜色的定义是一个相当激动人心的新功能。当我第一次在CSS技巧上看到这个是,我在觉得它非常贴心。有了::selection这对伪对象(pseudo- element),你可以在用户选一段文本元素时改变颜色和背景。如果你问的看法,我会觉得这非常漂亮。虽然::selection已经从目前的CSS3草案中移除鸟,但是我们希望稍后它在添加进来。
::selection {background: #3C0; /* Safari */color: #90C;}::-moz-selection {background: #3C0; /* Firefox */color: #90C;}文本选择颜色演示
变形
有了变形样式,你可以让元素的外观在鼠标悬停时变大。给Scale(比例)值设置一个大于1的数值,元素就会便打。反过来或,如果值小于1,元素的大小就会缩小。除了Scale比例,它还有其他许多不同的变形方式可用。你可以访问Firefox的开发者页面,查看它们所能实现的效果
-moz-transform: scale(1.15);-webkit-transform: scale(1.15);变形效果演示
多栏布局
有了这个新的多栏布局样式,你可以给文本呈现类似”报纸“排版的效果。跟在CSS2中的实现方法相比,CSS3中,我们实现这类效果要简单的多。下面,我指定鸟所需要的列数量,以及分离的规则类型,栏与栏之间的空隙有多大。用起来很简单是吧
-moz-column-count:3;-moz-column-rule: solid 1px black;-moz-column-gap: 20px;多栏布局演示
总结
我希望跟我一样,对CSS3的这些特性感到激动。他给网页设计师和开发者更多的力量,并且让许多方面都简化不少。现在,我们只需等待所有浏览器支持它。当然,我这里演示的知识CSS3新功能的冰山一角。如果你想了解更多信息,技巧和帮助,我建议你访问下面这些网站学习。
摘自:http://www.dongxi.net/b00kC 原文:101 on jQuery Selector Performance by Andreas Grabner, Nov 09, 09
上周我认真分析了一个 Web 页面,它在 onLoad 事件中处理一段定制脚本文件用了 4.8 秒。结果是其中 2.8 秒消耗在动态菜单库上(将会在博客中单独记录),剩下的 2 秒花费在 jQuery 的选择器上。分析显示多数选择器不返回任何对象,而那些会返回对象的选择器可考虑用不同的选择器来改善性能。
关于 jQuery 选择器
有大量的日志文章论述了 jQuery 选择器及它们的性能影响。正如你所知,可以通过 ID, TagName 或 ClassName 选择元素。依赖于不同的选择器, jQuery 会使用浏览器本地方法,如 通过 ID 或标签来选择元素,或者在使用类名选择时须手工从 DOM 中遍历获得元素(因为在 IE 中不存在相应的 getElementsByClssName).
分析我的页面时间中这 2 秒
在 onLoad 处理器中对页面中某些特定的元素使用 jQuery 设置为隐藏,显示或改变样式表...。这里是一个代码片断: Read More
- 作者:Klaus Komenda , 翻译:butwho
英文原文:Collection of Web Developer Tools, per Browser
原文发现:译言-Collection of Web Developer Tools for major browsers
中文译文:Web开发工具大集合——每个浏览器都有份的!
网站开发者的一大苦恼,就是有太多的浏览器要应付。幸亏世界上有一些聪明的人,能够研究出一大些方便编辑和调试网页代码的好工具。不过,要从不计其数的小工具里面找出合适的可真不容易。这篇文章列出了几个最好用的web开发工具,并指导你快速地激活、安装、使用他们。 下面是工具列表: Read More - jQuery, MooTools, Prototype 等优秀的 JavaScript 框架拥有各种强大的功能,包括绘制 Web 图表,使用这些框架以及相应插件,我们可以非常轻松地实现曲线图,圆饼图,柱状图等 Web 图表的绘制,而不必象以往那样通过复杂的 Flash 技术实现。本文介绍了9个优秀的基于 JavaScript 与 CSS 的 Web 图表框架。
jQuery, MooTools, Prototype 等优秀的 JavaScript 框架拥有各种强大的功能,包括绘制 Web 图表,使用这些框架以及相应插件,我们可以非常轻松地实现曲线图,圆饼图,柱状图等 Web 图表的绘制,而不必象以往那样通过复杂的 Flash 技术实现。本文介绍了9个优秀的基于 JavaScript 与 CSS 的 Web 图表框架。 Read More
部署一个 Web 应用到 WebSphere Application Server 中,浏览 index.jsp 页面时而正常,时而出现500错误,查看服务器输出日志可以看到以下错误,
E SRVE0026E: [Servlet Error]-[This absolute uri (http://jakarta.apache.org/struts/tags-logic) cannot be resolved in either web.xml or the jar files deployed with this application]: org.apache.jasper.JasperException: This absolute uri (http://jakarta.apache.org/struts/tags-logic) cannot be resolved in either web.xml or the jar files deployed with this application Read More