摘要：
从Editplus转到Sublime Text2的同学，不知道有没觉得它少了个很有用的功能：view in browser（ctrl+b）。平时写点小demo时，那种一秒钟切浏览器看下效果，一秒后再切回来改下代码的爽快感，是我坚守Editplus多年的一大重要原因。Editplus提供的ctrl+b功能，好用的原因有二：一是内置了webbrowser，切换时不用离开编辑器；二是对于本地调试的web站点，配置规则后自动将编辑的文件映射为URL来预览，这对预览php等服务端文件非常有用。Mac下的Coda，也有类似的预览功能，但我一直用不习惯它，暂不考虑。Sublime Text2支持用Pytho 阅读全文
随笔分类 - WEB相关
【转载】神马是websocket
2012-08-14 23:19 by @影子@, 316 阅读, 收藏, 编辑
摘要：
众所周知，HTTP是一种基于消息(message)的请求(request )/应答(response)协议。当我们在网页中点击一条链接（或者提交一个表单）的时候，浏览器给服务器发一个request message，然后服务器算啊算，答复一条response message。主动发起TCP连接的是client，接受TCP连接的是server。HTTP消息只有两种：request和response。client只能发送request message，server只能发送response message。一问一答，因此按HTTP协议本身的设计，服务器不能主动的把消息推给客户端。而像微博、网页聊天、网 阅读全文
利用canvas制作最简易的画板
2012-08-14 12:33 by @影子@, 1781 阅读, 收藏, 编辑
摘要：
HTML5 横空出世，怎能不提神奇的 canvas。还记得多年前小探 GDI 和 opengl 时的心潮澎湃，那时一心想在web中实现画板功能，但困惑于如何在 html 中嵌入 c++ 编译后的 exe 文件。后来，flash 和 flash3D 的发展让人没理由再去纠结这个问题，在 web 中嵌入一个 swf 相比 exe 要轻松多啦。直到有一天，WHATWG 的那组人向世界宣称 HTML5 添加了对脚本和布局之间的原生交互能力，他们的目标是和插件说再见。哇，这太让人激动，当禁用屏蔽安装失败的隐患消除之后，世界将变得更加和谐，于是渺小的我，从 canvas 开始，开启 Html5 的入门之旅 阅读全文
M2级遍历和范围----Range
2012-08-05 19:33 by @影子@, 297 阅读, 收藏, 编辑
摘要：
DOM中的范围DOM2在document类中定义了createRange()方法。在兼容DOM的浏览器中，这个方法属于document对象。使用hasFeature()或者直接检测该方法，都可以确定浏览器是否支持范围。var supportsRange = document.implemention.hasFeature("Range","2.0");var alsoSupportsRange = (typeof documnet.createRange == "function");如果浏览器支持range，则可以使用createR 阅读全文
DOM2级遍历和范围----NodeIterator
2012-08-05 14:03 by @影子@, 229 阅读, 收藏, 编辑
摘要：
可以用document对象的createNodeIterator()方法来创建NodeIterator对象，基本形式如下：var iterator=document.createNodeIterator(root,whatToShow,filter,entityReferanceExpansion);用到的四个参数的意义如下：root: 从树的哪个节点开始搜索whatToShow: 一个数值代码，代表哪些节点需要搜索filter: NodeFilter对象，用来决定需要忽略哪些节点entityReferanceExpansion：布尔值，表示需要扩展的实体引用whatToShow 的参数可以有 阅读全文
Study DOM
2012-07-30 10:27 by @影子@, 201 阅读, 收藏, 编辑
摘要：
DOM 层次DOM1包括2个部分，分别为Core和HTML。DOM1 core提供了一系列文档结构的基本接口，同事定义了外部XML文档的接口。HTML1 提供了比DOM1更高层的接口，使得操作文档变得更为方便，所有的属性和方法都可以直接和XML、HTML进行交互DOM2DOM2包含六个部分，分别为 Core 、Views 、Events、 Style、 Traversal、 Range 和 DOM2 HTMLMozilla支持DOM2的大部分特性DOM Level 1The DOM Level 1 specification is separated into two parts: Core 阅读全文
JavaScript中值的固有布尔属性及其比较
2012-07-19 09:24 by @影子@, 559 阅读, 收藏, 编辑
摘要：
固有的布尔属性值在js中存在一个固有的布尔值。以下的值总是false的，他们是：false0"" (空字符串)nullundefinedNaN (Not-a-Number)另外，有些值是true的，"0" (0在引号中)，"false"(false在引号中)，空函数，空数组，空对象。vara=!!(0);//variableissettofalsevarb=!!("0");//true 固有false值的比较false、 0 、"" (空字符串) 是相等的，并且可以进行比较varc=(false 阅读全文
用例子验证w3c的stack-level在不同浏览器中的显示
2012-07-17 15:29 by @影子@, 986 阅读, 收藏, 编辑
摘要：
z-index是我们非常熟悉的属性，用来确定定位元素在垂直于显示屏方向的层叠顺序 需要明确的是仅仅作用于定位元素，relative和absulute有效。没有继承性。 stack-level不同于z-index，在每一个stacking context中的每个box都有一个stack level， 值大的显示在上，值小的显示在下，同一stack-level的遵循后来居上的原则. w3c规定的stack-level规则 1、定位元素：父级的背景、边界 2、定位元素：z-index为负值的定位元素 3、非定位元素（文本流中）：block块级元素 4、非定位元素（文本流中）：flo... 阅读全文
Jquery的简写
2012-07-16 14:51 by @影子@, 1295 阅读, 收藏, 编辑
摘要：
jquery大大简化了js的dom操作。除此之外，jquery还特别的注重自身的修炼，极力推崇瘦身。于是乎有些不可不知的常用jquery简写，在此一一总结。$(docment).ready(function(){…})简化为$(function(){…})$(selector).bind('click','function(){…}')简化为$(selector).click(function(){…})另外，toggle和hover有些相通，还有一个toggleClass和前面这两个函数有点共性。看例子，自动的在moveover和moveout的时候执行： $ 阅读全文
函数式编程----stream.js
2012-07-11 16:10 by @影子@, 363 阅读, 收藏, 编辑
摘要：
http://www.aqee.net/stream-javascript-lib/http://www.aqee.net/docs/stream/http://streamjs.org/stream.js 是一个很小、完全独立的Javascript类库，它为你提供了一个新的Javascript数据结构：streams.<scriptsrc='stream-min.js'></script>下载 stream.js 2Kb minifiedstreams是什么？Streams 是一个操作简单的数据结构，很像数组或链接表，但附加了一些非凡的能力。它们有什么 阅读全文
JS创建对象的几种方法
2012-07-11 15:28 by @影子@, 2538 阅读, 收藏, 编辑
摘要：
题外话：昨天手欠，试图用alert(window.appName)到ff之下去查看浏览器版本，结果弹出的竟然是Netscape，咋不是 firefox。继而又跑去chrome下试验，又一次弹出了Netscape。baidu搜 Netscape 竟然发现js就出自Netscape公司。惭愧啊惭愧！！！研究了这么久的js都不认识祖师爷。于是又跑去找了找族谱，原来js出自Brendan Eich之手，95年他创造js时候，也不过就31岁。哎呀，真是白活了，如他一般老的我，到现在都学不会js，真是人比人气死人。。js当初设计的时候，没有想到自己能从一部打电话用的手机变成集拍照，上网，游戏，电话于一身的 阅读全文
Nicholas C. Zakas如何面试前端工程师
2012-07-10 23:59 by @影子@, 215 阅读, 收藏, 编辑
摘要：
2010年01月8日Web开发,原创,翻译Original Post：Interviewing the front-end engineerNicholas C. Zakas，2010年1月5日翻译完成：2010年1月7日，最后更新：2010年1月10日面试前端工程师对我来说是一件非常有意思的事，因为面试过程很大程度上也是自我提升的过程。无论大公司还是小公司，之所以在如何招聘到真正有能力的前端工程师方面会遇到同样的问题，就是因为负责招聘的那些人不知道自己公司需要什么样的人，结果问问题时也问不到点子上。经过这几年在行业里的摸索，我总结出了自己的一套很有效的面试前端工程的方法。有的应聘者说我不好对 阅读全文
初识python+linux最基本的操作
2012-05-30 18:28 by @影子@, 1731 阅读, 收藏, 编辑
摘要：
学习Django的网址：http://djangobook.py3k.cn/2.0/ 学习Python的网址：http://sebug.net/paper/python/pr01.html#s01对python的认识应该从url.py和views.py开始，其他的.py文件均用来封装各种各样的template。而这些.py文件又可以当作一个封装的类导入到views.py.首先需要理解的是python的工作原理，python是一门非常指着的面向对象语言，一切皆是对象，django框架基本上都是mvc的衍生物。m- modalv- views-urls.py + views.py --> t 阅读全文
jQuery-强大的jQuery选择器 (详解)[转]
2012-05-17 16:21 by @影子@, 216 阅读, 收藏, 编辑
摘要：
1. 基础选择器Basics名称说明举例#id根据元素Id选择$("divId") 选择ID为divId的元素element根据元素的名称选择,$("a") 选择所有<a>元素.class根据元素的css类选择$(".bgRed") 选择所用CSS类为bgRed的元素*选择所有元素$("*")选择页面所有元素selector1, selector2, selectorN可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容.$("#div 阅读全文
CGI小白一些漫想
2012-04-25 17:21 by @影子@, 445 阅读, 收藏, 编辑
摘要：
CGI Common Gateway Interface一种基于浏览器的输入、在Web服务器上运行的程序方法你创建客户端的 CGI脚本, 服务器端的程序用来处理用户输入, 结果返回给用户CGI脚本是什么？它是怎样工作的 CGI脚本是用下列两种方法使用的: 作为一个表单的ACTION 或 作为一个页中的直接link。 它的工作方式是从浏览器到服务器到脚本到程序 一个URL指向一个CGI脚本. 一个CGI脚本的URL能如普通的URL一样在任何地方出现。服务器接收请求, 按照那个URL指向的脚本文件(注意文件的位置和扩展名),执行脚本.脚本执行基于输入数据的操作，包括查询数据库、计算数值或... 阅读全文
sublime 使用技巧总结
2012-04-24 23:10 by @影子@, 19220 阅读, 收藏, 编辑
摘要：
对于用惯了editplus的人来说，突然接触到sublime有点无所适从，不过稍微适应一段时间后，发现会渐渐的爱上这个小黑盒子。那么sublime究竟好在啥地方呢？我看最显著的特点就是他的智能联想功能，vs ide和eclipse插件 在这个轻量级的小工具上也实现了完美呈现。另外就是sublime强大的搜索功能啦··在windows中编程有时候 会从一个文件切换到另外一个文件，难道去点开层层文件夹么？如果能实现命令行切换就方便啦。于是抽出空来，重点看看sublime是如何实现强大的文件搜索吧。1、goToAnyThing的Ctrl+P如果只会在当前文件中使用ctrl+F搜关 阅读全文
CSS 必知的7个知识点
2012-04-13 13:52 by @影子@, 2691 阅读, 收藏, 编辑
摘要：
无敌的老公昨天给俺进行了一堂css的培训~~哎，为神马老公啥都知道，我神马都不懂，自愧不如啊~~555好记性不如烂笔头，遂在此一一总结。本人小菜，从最基础的内容开始。1、width是个雷 很多页面要求宽度自适应，那么width设百分比吧，否则块元素很容易变成粘着不走的狗皮膏药 当没有定义元素宽度时，浏览器撑满整行，实际上执行的是width：auto，宽度自适应。2、IE6不认识min-height 解决办法就是_height，有时候明明不需要可变高度，如果喜欢没原则的min-height，那么记得用_height对付下IE6这个屌丝。3、float和clear float和绝对定位都会... 阅读全文
css hack
2012-04-12 14:35 by @影子@, 247 阅读, 收藏, 编辑
摘要：
1.区别IE和非IE浏览器CSS HACK代码#divcss5{ background:blue; background:red \9; }2.区别IE6,IE7,IE8,FF CSSHACK 【区别符号】：「\9」、「*」、「_」 【示例】：#divcss5{ background:blue; background:red \9; *background:black; _background:orange; }【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏 览器正确的读取到自己看得懂得CSS语法 阅读全文
转：Google Chrome浏览调试工具
2012-04-12 10:44 by @影子@, 907 阅读, 收藏, 编辑
摘要：
【原文地址：http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html】在Google Chrome浏览器出来之前，我一直使用FireFox，因为FireFox的插件非常丰富，更因为FireFox有强大的Firebug，对于前端开发可谓神器。在 Chrome出来的时候，我就喜欢上它的简洁、快速，无论是启动速度还是页面解析速度还是Javascript执行速度（现在的FireFox4也比之前 的FireFox3有很大的进步）。不过当时由于Chrome的开发者工具还不是很完善，而我又不是很熟悉，加之对于Firebug的好感和依赖，当 阅读全文
转：web开发必须知道firebug调试技巧
2012-04-12 10:24 by @影子@, 321 阅读, 收藏, 编辑
摘要：
1、使用Firebug可以找到页面中的任何内容用鼠标右键选中某个元素，然后在弹出的菜单中，选择“查看元素”，马上就会在HTML页面代码 中找到该元素对应的代码，点esc退出，如下图所示：同样，也提供了更快速的方法：只需要点Firebug插件左上方的箭头，如下图所示，则每当鼠标在页面中移动时，在Firebug控制台中就马上显示移动时经过的HTML元素的代码：2、可以使用Firebug修改HTML和CSS通过Firebug，可以直接修改HTML，增加HTML的属性，删除元素，增加CSS样式及实现更多功能，如下图：在上图的菜单中可以清楚看到，你可以对HTML元素进行各样的修改操作，方法是先点击HTM 阅读全文