半夜里，在拜读阮一峰老师的网志的时候，看到一个美国摄影师的作品。母亲去世后，他就拍他的父亲，还写下自己的感想。我被这组作品深深地感动了。儿子对父亲的爱与不舍、以及父亲在年老之际的孤独，都在其中得到了细腻的体现，非常感人，有时候，我们需要安静下来，给生命一个思考的时间。与父亲在一起的日子作者：Phillip Toledano 译者：阮一峰 原文网址：http://www.dayswithmyfather.com这是一份日记，记录我的父亲。more我希望留下我和他在一起的日子。2006年9月4日，母亲突然过世，将照顾父亲的重担一下子留给了我。父亲患有健忘症，经常不记得几分钟前发生的事。 我带着父亲参加了母亲的葬礼。但是回家后，每隔15分钟，父亲就问我母亲去了哪里。我不得不一遍遍地解释，她死了。父亲震惊极了，问我为什么没人告诉他？为什么不让他参加葬礼？为什么他从没去医院探望她？......他全忘了。 于是，我改口说，母亲去巴黎照顾生病的舅舅了，暂时不回来。年轻时，父亲非常英俊，在好莱坞当电影演员。他不喜欢自己现在苍老的样子。 我让他看着镜子，想拍一张肖像。他看到镜中的自己，顿时变得非常不安。 你看，即使到了98岁，他还是有虚荣心。屋子里到处都是他留下的小纸条，上面写着"人都到哪里去了？"、"发生什么事了？"......这显示了他内心深处的恐慌，他从不对我说这些。父亲握着我的妻子卡拉的手。 ...继续阅读 (31)

viewport是我同事@吕哥写的实现不同场景的图片异步加载的jq插件。想象一下，当服务器返回列表的数据项（或图片）非常多，而其数据项不用在页面回应时全部加载给浏览器，可以按需加载。那么通过将列表 viewport化，你就可以设置并知道知道哪些数据项被显示出来的时机，完成数据异步加载的操作。viewport非常适合应用于海量图片的查看器（神马轮播图，相册之类的），或者瀑布流的布局当中，此插件可以被绑定到 window 对象或任意以 block 方式显示的对象上，如：$(window).viewport() 或 $("#container").viewport()。两个demo:http://www.jsbug.com/lab/samples/viewport/index.html#sample1http://www.jsbug.com/tools/wall/参数说明id：可选，字符串类型。每个容器都可以执行 viewport 方法多次，也就是说，任何容器都可以被视口化多次，且同一容器的各视口间互不影响。targets：可选，在“视口”中查找的目标元素。includeHiddens：可选，当提供 targets 时才有效。用来控制是否查找视口内的隐藏目标元素，默认为 true。threshold：可选，当提供 targets 时才有效。通过此值你可以增大或减小视口检测的阈值范围。de ...继续阅读 (29)

在JavaScript代码中，因为各浏览器之间的行为的差异，我们经常会在函数中包含了大量的if语句，以检查浏览器特性，解决不同浏览器的兼容问题。例如，我们最常见的为dom节点添加事件的函数：functionaddEvent(type,element,fun){if(element.addEventListener){element.addEventListener(type,fun,false);}elseif(element.attachEvent){element.attachEvent('on'+type,fun);}else{element['on'+type]=fun;}}每次调用addEvent函数的时候，它都要对浏览器所支持的能力进行检查，首先检查是否支持addEventListener方法，如果不支持，再检查是否支持attachEvent方法，如果还不支持，就用dom 0级的方法添加事件。这个过程，在addEvent函数每次调用的时候都要走一遍，其实，如果浏览器支持其中的一种方法，那么他就会一直支持了，就没有必要再进行其他分支的检测了，也就是说，if语句不必每次都执行，代码可以运行的更快一些。解决的方案就是称之为惰性载入的技巧。more所谓惰性载入，就是说函数的if分支只会执行一次，之后调用函数时，直接进入所支持的分支代码。有两种实现惰性载入的方式，第一种事函数在第 ...继续阅读 (31)

之前看到一位朋友说她妈妈喜爱连连看，就想着不如把身边的朋友头像拿来做个连连看游戏吧。次连连看的特点就是不但本人头像可以连，家属，情侣之间也可以联通。寻路径算法是传统的枚举算法，原理如下，每次建立四个点，分别检查是否两两联通，如果两两联通，就说明头尾可以连。首先横向扫描，然后纵向，详细可以看注释。 DEMO：/wp-content/uploads/linkgame/linkgame.htmlmore代码如下：琼海老乡连连看body{text-align:center;}.text{text-align:center;margin-top:60px;color:#fff;}.agin{text-align:center;margin-top:60px;color:#fff;}#game-box{margin:60pxauto;position:relative;}#game-boximg{float:left;width:59px;height:59px;border:1pxsolid#000000;}#game-boximg.hover{border:1pxsolid#ffffff;}#game-boximg.active{border:1pxsolid#7fff00;}#game-boxdiv{background-color:#7fff00;position:absolute;} ...继续阅读 (42)

jQuery1.9删除了一些在1.8中已经过时的api,想要把那些不够安全的、缺乏效率的、用处不大的，以及带有误导的特性统统去掉。如果你想升级你的jquery版本，但又使用了如下被删除的api的话，可以引入Migrate迁移插件，被删除的api可以在Migrate插件中修复。.toggle(function, function, ... )toggle()方法可实现点击一个元素来执行指定函数。此方法被删除以减少混乱和提高潜在的模块化程度。jQuery.browser()jQuery.browser()通过UA信息来检测浏览器。此方法在1.3版本中已不赞成使用，并在1.9版本中被删除，jquery团队更建议通过特性检测来时您的代码兼容浏览器。.live()live()方法可以为未来生成的元素添加事件，此方法在1.7版本中已不赞成使用，并在1.9版本中被删除，您可以使用on()方法来代替。.die()die()方法可以移除live()添加的事件，此方法在1.7版本中已不赞成使用，并在1.9版本中被删除，您可以使用off()方法来代替。.sub()sub()方法可以可创建一个新的jQuery副本，不影响原有的jQuery对像，但用例的数量已经不足以证明它存在的价值。 ...继续阅读 (29)

锚链接是大家再熟悉不过的了，它允许用户通过一个链接跳转到当前页面的指定内容。一般创建一个锚链接的方法就像下面这样，用户点击a标签，浏览器将跳转的id为content的div来显示其内容。。href="#content">跳到id为content的标签id="content">存在的问题：当用户没有鼠标，而是使用tab键+回车键的方式触发锚链接时，页面焦点仍然停留在a标签，并没有相应转到上。这种情况带来的问题是：如果用户继续按tab键，焦点会转移到a标签的下一个可获取焦点的元素，这可能是挨着a标签的另一个链接，反正不是的下一个可获取焦点的元素。而屏幕可视区域就有可能回滚回其他地方。按照常理，用户更希望按下tab键，焦点应该跳转到的下一个可获取焦点的元素。more解决思路如果用户触发锚链接时候，焦点也跟着跳转到相应的目标元素，那么问题就可以解决了。在锚链接被触发时候， location.hash会储存a标签的href；这其实也就是目标元素的id，因此我们可以在onhashchange事件被触发的时候，获取相应元素，然后调用focus()方法，使其获取焦点。但是，如果获取到的是个span、div、p等非表单元素，focus()方法却不能起作用。解决的办法是在调用focus()之前，设置其tabIndex属性成一个整数，这样非表单元素也能获得焦点了。varfixedJumpLink=fun ...继续阅读 (25)

随着越来越多Retina技术的普及，越来越多的设备开始配置了Retina屏幕。w3c也在css4草案中加入了适配Retina屏幕的属性image-set，目前支持此属性的浏览器有chrome和safari。记得在今年冬天的webrebiuld交流会上，QQ的前端大湿曾经介绍过，并且在QQ.com的logo中用到了此属性。 在不支持image-set的浏览器：他会支持background-image图像，也就是说不支持image-set的浏览器下，他们解析background-image中的背景图像； 支持image-set的浏览器下：在普通显屏下，此时浏览器会选择image-set中的@1x背景图像，在Retina屏幕下，此时浏览器会选择image-set中的@2x背景图像。 写法：{background-image:url(default.png);background-image:-webkit-image-set(url(no-retina.png)1x,url(retina.png)2x);} ...继续阅读 (29)

1. Steve Jobs【1984年介绍Macintosh的演说】斯蒂夫·乔布斯，苹果CEO，无人不知的IT教父级人物，他的演说也是超一流，他很多的演说奉为经典，尤其是在运用幻灯片演说绝对的一流，就连PPT演说大师Garr对斯蒂夫·乔布斯佩服的五体投地。看看1984年的Steve Jobs是如何进行Macintonsh介绍演说的。http://video.google.com/videoplay?docid=8631701936876784775more2. Dick Hardt【2005年于OSCON关于Identity 2.0的演说】Dick Hardt在20分钟的演说时间里，运用了100多张幻灯片，通过图片传达声音，真正地将图片的作用发挥到极致。http://www.identity20.com/media/OSCON2005/3. Guy Kawasaki【2006年于TiECon关于Art of the Start的演讲】大家对Guy Kawasaki应该很熟悉，他是韩国人，著名的PPT演说家，也是The World‘s Best Presentation Contest 2008的首席评委，喜欢PPT的人应该对“Art of the Start”不会陌生，这是作者的一本书，关于该书的介绍的PPT在slidshare上受到广泛的关注，而且本论坛也上传了该PPT。 视频： ...继续阅读 (28)

ime-mode是CSS3中最新添加的属性，更准确点说，是CSS Basic User Interface Module Level 3 (CSS3 UI)规范新添加的属性，该属性可以控制文本字段的输入法编辑器的状态。IE浏览器从IE5开始就支持该属性，FireFox浏览器从FireFox3.0开始也支持该ime-mode属性。不过chrome、opera、Safari浏览器还没有开始支持该属性。名称: ime-mode 值: auto | normal | active | inactive | disabled | inherit 初始值: auto 应用元素: text fields（文本字段） 继承性: no下面是ime-mode各个值的说明：auto : 默认值，不影响当前输入法编辑器的状态 normal : 输入法编辑器的状态应该是normal，这个值可以用于用户样式表来覆盖页面的设置。IE浏览器不支持该属性 active : 输入法编辑器的状态初始时是激活的；输入将一直使用该输入法直到用户切换输入法。该属性在Linux下不支持 inactive : 输入法编辑器的状态初始时是非激活状态；除非用户激活输入法 disabled : 禁用输入法编辑器；该输入法编辑器也许不会被用户激活New Documenttype="text/css">input{ime-mode:dis ...继续阅读 (37)

许多童鞋在写CSS的时候，设置中文字体常常使用中文字符，例如font-family:"黑体"，这样我们在浏览器中看到的是什么样子的呢 ？如果不想自己写的界面在浏览器字体声明上有异常，建议在书写css样式规则的时候避免中文字符，使用Unicode编码集，对中文字符进行转码。常见的中文字符集转码如下表：中文名 UNICODE新细明体\65B0\7EC6\660E\4F53细明体\7EC6\660E\4F53标楷体\6807\6977\4F53黑体\9ED1\4F53宋体\5B8B\4F53新宋体\65B0\5B8B\4F53仿宋\4EFF\5B8B楷体\6977\4F53仿宋_GB2312\4EFF\5B8B_GB2312楷体_GB2312\6977\4F53_GB2312微软正黑体\5FAE\x8F6F\6B63\9ED1\4F53微软雅黑\5FAE\8F6F\96C5\9ED1如果你不知道某个中文字体的Unicode编码，可以使用通过JS如下方法进行转化：function toUnicode (str) {return escape(str).toLocaleLowerCase().replace(/%u/gi, '\\');} console.log(toUnicode ('微软雅黑')); // '\5fae\8f6f\96c5\9ed1' ...继续阅读 (43)

在chrome23的开发者工具中，发现了居然可以自定义user Agent，还有可视区域尺寸，这样更方便移动开发调试啦。。 妈妈再也不用担心我的移动开发！~~~ ...继续阅读 (27)

如果你的开发环境是在远程主机上，webstorm可以提供通过ftp/ftps/sftp等方式实现远程同步开发。这样我们可以就抛弃ftp、winscp等工具，通过webstorm编辑远程文件以及部署，本文基于WebStorm5.04编写， Intellij IDEA或者PHPStorm使用方法基本相同，可参考之。并且还要感谢因特里基友群群主大猫的帮助。1、首先我们来创建一个基于远程主机的project，点击file>new project from existing sources，打开了创建project的对话框，我们选择第四项，例如我们的远程主机通过ftp/sftp/ftps等方式传输文件，点击next。more2、设置project name与本地路径，deployment option这项选择custom，设置完毕next。3、设置deployment option，注意Upload changed files automatically to default server，此项可以设置本地文件上传到远程主机的时机，我选择on explicit save action(ctrl+s)，这样就可以通过快捷键ctrl+s来上传文件，然后next。4、配置远程主机，就不解释啦~ 配置好了next。5、指定远程主机的根目录，我们点击project root即可，然后next。6、配置 ...继续阅读 (47)

上周在做一个焦点图小时候遇到一个IE bug。当一个绝对定位元素在没有background，没有内容，并和一个img元素重叠的情况下，不管z-index如何设置，都会位于img下方。 此bug出现于IE中，其他浏览器均正常显示。经过反复折腾以后，发现只要设置background或者添加内容就可以。但是如果你是需要一个透明的div浮在img上面，解决方案是设置background为一张不存在的图片。比如：{background:url(about:blank);} ...继续阅读 (19)

这是一个非常酷的3D效果，基于webGL，使用three.js实现，喜欢three.js的朋友可以学习之。 webGL可以让我们在canvas上实现3D效果。而three.js是一款webGL框架，由于其易用性被广泛应用。如果你要学习webGL，抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。demo地址：http://carvisualizer.plus360degrees.com/threejs/ ...继续阅读 (45)

ctrl + shift + n: 打开工程中的文件ctrl + j: 输出模板ctrl + b: 跳到变量申明处ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation), ctrl + shift + del: 删除包裹ctrl + []: 匹配 {}[]ctrl + F12: 可以显示当前文件的结构，快速跳转到目标函数ctrl + x: 剪切行alt + left/right:标签切换ctrl + r: 替换 ctrl + shift + r: 全局替换ctrl + shift + up: 行移动shift + alt + up: 块移动ctrl + d: 行复制ctrl + shift + ]/[: 选中块代码ctrl + / : 单行注释ctrl + shift + / : 块注释ctrl + shift + i : 显示当前class,function的详细信息ctrl + p: 显示默认参数ctrl + shift + v: 可以复制多个文本shift + enter: 智能跳到下一行ctrl + k: svn 提交ctrl + shift + u: 大小写ctrl + ~ : 切换主题ctrl + F11: 添加标签 ctrl + shift + 大键盘数字键ctrl + alt + F12: file pa ...继续阅读 (36)

微软终于让IE10登录windows7了，并提供了32位和64位2个版本的下载。此版本为预览版，下面是下载链接：http://windows.microsoft.com/zh-cn/internet-explorer/downloads/ie-10/worldwide-languages ...继续阅读 (25)

1、首先需要准备的应用程序包。nginx：nginx/Windows-1.0.4php：php-5.2.16-nts-Win32-VC6-x86.zip（nginx下php是以FastCGI的方式运行，所以我们下载非线程安全也就是nts的php包）（还会用到）RunHiddenConsole：RunHiddenConsole.zip2、安装与配置。1）php的安装与配置。直接解压下载好的php包，到D盘wnmp目录（D:\wnmp），这里把解压出来的文件夹重命名成php5。进入文件夹修改php.ini-recommended文件为php.ini，并用Editplus或者Notepad++打开来。找到extension_dir = "./ext"更改为extension_dir = "D:/wnmp/php5/ext"往下看，再找到;extension=php_mysql.dll ;extension=php_mysqli.dll前面指定了php的ext路径后，只要把需要的扩展包前面所对应的“;”去掉，就可以了。这里打开php_mysql.dll和php_mysqli.dll，让php支持mysql。当然不要忘掉很重要的一步就是，把php5目录下的libmysql.dll文件复制到C:\Windows目录下，也可以在系统变量里面指定路径，当然这里我选择了更为方便的方法^_^。more ...继续阅读 (25)

今天在群里看到有朋友提出一道面试题，是如何求得2个数的最大公约数。在《Javascrit权威指南》一书曾今中有提到相关的例子,其原理是使用欧几里得算法求得。在数学中，欧几里得算法，又称辗转相除法，是求两个正整数的最大公约数的算法。辗转相除法首次出现于欧几里得的《几何原本》中，而在中国则可以追溯至东汉出现的《九章算术》。其定理为：gcd(a,b) = gcd(b,a%b)即设两数为a、b，其中a>b，a%b为a除以b以后的余数且a%b不为0，用gcd(a,b）表示a和b的最大公约数。也就是说，两个数的最大公约数=（较小的数）和（较大的数除以较小的数的余数）的最大公约数。基于上述等式，我们先来求 a=481 和 b=221 的最大公约数，解剖欧几里德算法计算过程：假设f为a和b的最大公约数 a除以b的余数 等于 481%221 等于 39 根据公式，那么f也等于221和39的公约数，我们继续求模 221除以39的余数 等于 221%39 等于 26 根据公式，f也等于39和26的公约数 ，我们继续求模 39除以26的余数数 等于 39%26 等于 13 根据公式，f 也等于26和13公约数，我们继续求模 26除以13的余数数 等于 39%26 等于 0 到这一步，26可以13被整除，说明他们的最大公约数也就是13，即f=13。通过这个等式，我们可以一步一步地缩小与原始数公约数相 ...继续阅读 (33)

ECMAScript 5中定义了9个新的数组方法，用于遍历、映射、过滤、检测、简化和搜索数组。在开始介绍之前，很有必要对这几个新增的数组方法做一个概述。首先，大多数方法的第一个参数接收一个函数，并且对数组的每个元素（或者一些元素）调用一次该函数。如果是稀疏数组，对不存在的元素不调用传递的函数。在大多数情况下，调用提供的函数使用3个参数：数组元素、数组元素的索引值和数组本身。通常，知需要第一个参数，可忽略后面2个参数。大多数ECMAScript 5数组方法的第一个参数是一个函数，第二个参数是可选的。如果有第二个参数，则第一个参数（被调用的函数）会被看做是第二个参数的方法。也就是说，第一个参数（被调用的函数）的this关键字指向的是第二个参数。被调用的函数的返回值非常重要，但是不同的方法处理返回值的方式也不一样。ECMAScript 5中的数组方法都不会修改原始数组本身，但是，方法所传递的调用函数是可以改变原始数组本身的。moreforEach()forEach()方法从头到尾遍历数组，为每个元素调用指定的函数。如上所述，调用的函数作为forEach()方法的第一个参数然后forEach()方法使用三个参数调用该函数：数组元素、数组元素的索引值和数组本身。如果你只关心数组元素的值，可编写只有一个参数的函数——额外的2个参数将被忽略：vararr=[1,2,3,4,5];//计算数组元素 ...继续阅读 (32)

最近老是换机器，每次安装Aptana时候都要网上找插件地址或者安装方法，于是记录一下，以便以后偷懒。1、汉化打开http://www.eclipse.org/babel/downloads.php，复制Babel Language Pack Update Site for Helios下面的地址，如下图中的http://download.eclipse.org/technology/babel/update-site/R0.10.0/helios。然后Help > Install New Software，粘贴，一路Next。more2、添加zen-coding插件复制http://zen-coding.ru/eclipse/updates/ 或者 http://media.chikuyonok.ru/eclipse/updates/； 然后Help > Install New Software，粘贴，一路Next。。3、添加svn插件在help菜单里点击“Install New Software”； 点击Add按钮，在Add Site窗口，name输入：SVN ，location输入：http://subclipse.tigris.org/update_1.4.x，点击ok按钮； 选择Subclipse选项下的： Subclipse – Required、 Subversion ...继续阅读 (41)

jquery中的animat方法相信大家都经常用到，它的主要功能是以渐变的方式来改变属性值可以为数字的元素属性,通过设置时间来控制动画的速度。下面分享一个自己写的动画方法，起功能也类似于jquery中的animat，欢迎大家指点：more/** 参数详解* ele：执行动画的元素* sty：样式属性（数值型属性），比如{"width":"100px","height":"500px"}* time：时间（毫秒）*/window.animat=function(ele,sty,time){for(iinsty){(function(i){//先获取元素实际属性值if(ele.style[i]&&ele.style;[i]!='auto'){ele.style[i]=ele.style[i];}elseif(ele.currentStyle){ele.style[i]=ele.currentStyle[i];}elseif(window.getComputedStyle){ele.style[i]=window.getComputedStyle(ele,null).getPropertyValue(i);}else{ele.style[i]='0';}//每100毫秒变化的透明度 or 每移动1px需要的毫秒数varspeed;if(i=='opacity'){speed=( ...继续阅读 (37)

经典的window小游戏扫雷，无聊时候用JS写了一个，支持IE9,chrome,firefox,safari,opera等现代浏览器！~IE8以下没测试~ 游戏地址：/wp-content/uploads/2012/09/minesweeping.htmlmoreJS扫雷var$=function(id){returndocument.getElementById(id)};varminesweeper={};//雷区对象varmineArray=[];//地雷组var_differendNumber=null;//生成不同位置的随机地雷varovercomeMineLenth={overcome:0,minelength:10};functionCreateBox(y,x,mine){//构造雷格对象this.position=1;//1在雷区里面，0不在this.y=y;this.x=x;this.mine=mine;//1有雷，0无this.on=0;//0未扫，1已扫，2已标记this.t_l={y:y-1,x:x-1};//左上格子坐标this.t_c={y:y-1,x:x};//上this.t_r={y:y-1,x:x+1};//右上this.b_l={y:y+1,x:x-1};//左下this.b_c={y:y+1,x:x};//下this.b_r={y:y+1,x: ...继续阅读 (36)

曾经看到有这样一个JS题： 有一组数字，从1到n，从中减少了3个数，顺序也被打乱，放在一个n-3的数组里 请找出丢失的数字，最好能有程序，最好算法比较快 假设n=10000下面我也来贴一个算法。functiongetArray(){//创建随机丢失3个数字的数组，并打乱顺序。vararr=[]for(vari=1;i<=10000;i++){arr.push(i);}vara=arr.splice(Math.floor(Math.random()*arr.length),1);varb=arr.splice(Math.floor(Math.random()*arr.length),1);varc=arr.splice(Math.floor(Math.random()*arr.length),1);arr.sort(function(){return0.5-Math.random();});console.log('丢失数字为: '+a+','+b+','+c+'\n数组元素个数: '+arr.length);returnarr;}functiongetMissMunber(arr){//寻找丢失的数字。varmis=[],obj={},len=10000;for(vari=0;i<=len;i++){if(!obj[i]){mis.push(i);}}returnmis;}vara ...继续阅读 (33)

上次提到通过IE私有滤镜让IE6 7 8支持背景透明，内容不透明效果，昨天看到有个朋友又提出这样的问题，就写了这个小工具，自动生成实现效果的CSS代码，欢迎懒人使用：/wp-content/uploads/2012/09/background-color-opacity.html实现原理：http://www.cssha.com/through-the-ie-private-filter-let-ie6-ie7-ie8-support-transparent-background ...继续阅读 (28)

在javascript函数内部，有两个特殊的对象：arguments和this。其中，arguments是一个类数组对象，它包含了传入函数中的所有参数。虽然arguments对象主要用于保存函数参数，但它还有一个名叫callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数。请看下面这个非常经典的阶乘函数。functionfactorail(n){if(n<=1){return1;}else{returnn*factorail(n-1);}}more定义阶乘一般要用到递归算法，如上代码所示，如果函数有名字，而且名字不改变得情况下，这样定义没有问题。但是，这个函数的运行与函数名factorail紧紧耦合在一起了，为了消除这种紧密耦合的现象，可以向下面这样使用arguments.callee。functionfactorail(n){if(n<=1){return1;}else{returnn*arguments.callee(n-1);}}在这个重写后的factorail()函数的函数体内，木有在引用函数名factorail，而是通过arguments.callee指向其本身。这样，无论引用函数时候使用什么函数名，都可以完成递归调用。例如：vartrueFactorail=factorail;factorail=function(){return0}alert(t ...继续阅读 (27)

就是abcde是个五位数，乘以a就等于eeeeee这个六位数，用JS求出a,b,c,d,e所代表的那个数字。 来个暴力解法法：for(vara=1;a<=9;a++){for(varb=0;b<=9;b++){for(varc=0;c<=9;c++){for(vard=0;d<=9;d++){for(vare=0;e<=9;e++){varx=a*10000+b*1000+c*100+d*10+e;vary=a;varz=e*111111;if(x*y==z){console.log(x);console.log(y);console.log(z);}}}}}} ...继续阅读 (48)

在项目整合中相信用到最多的是iframe了，下面整理了相关常用操作，作为笔记！1. 获得iframe的window对象存在跨域访问限制。chrome：iframeElement. contentWindow firefox： iframeElement.contentWindow ie6：iframeElement.contentWindow文章Iframes, onload, and document.domain中说“he iframe element object has a property called contentDocument that contains the iframe’s document object, so you can use the parentWindow property to retrieve the window object.”意思就是一些浏览器可以通过iframeElement.contentDocument.parentWindow获得iframe的window对象。但经过测试firefox、chrome的element.contentDocument对象没有parentWindow属性。more2. 获得iframe的document对象存在跨域访问限制。chrome：iframeElement.contentDocument f ...继续阅读 (21)

目前,这两个组织负责开发HTML已经决定在某种程度的分离,这意味着在未来将有两个版本的HTML5—— snapshot版本和living standard版本。万维网超文本应用技术工作组(WHATWG)是由万维网联盟(W3C)在未来的HTML推进进度缓慢而成立。当时，大多数用户想留在HTML,只不过想要它需要改进，但是事实上“W3C或多或少地放弃了在HTML而专注于XML和xhtml。自2004年以来，WHATWG接着负责将HTML标准向前推进。大约在2007年,W3C采用WHATWG的规范并取名为HTML5。这两个组织一直在名义上的共同努力指定HTML5，但是，他们在HTML5的一些方法一直存在分歧。多年来,这两个组织都倾向于更偏向他们的方法,现在这把分歧只是被形式化了。在一份WHATWG的邮件列表中，一名WHATWG标准的作者解释道：More recently, the goals of the W3C and the WHATWG on the HTML front have diverged a bit as well. The WHATWG effort is focused on developing the canonical description of HTML and related technologies, meaning fixing bugs as we ...继续阅读 (27)

转自：http://ued.taobao.com/blog/2012/06/03/debug-with-chrome-dev-tool/这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的, mac 下的应该大同小异.常规的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不涉及了.1. Beautify Javascriptjs 文件在上线前一般都会压缩下, 压缩的 javascript 几乎没有可读性, 几乎无法设定断点. 在 Scripts 面板下面有个 Pretty print 按钮(这种符号 {}), 点击会将压缩 js 文件格式化缩进规整的文件, 这时候在设定断点可读性就大大提高了.more2. 查看元素绑定了哪些事件在 Elements 面板, 选中一个元素, 然后在右侧的 Event Listeners 下面会按类型出这个元素相关的事件, 也就是在事件捕获和冒泡阶段会经过的这个节点的事件.在 Event Listeners 右侧下拉按钮中可以选择 Selected Node Only 只列出这 ...继续阅读 (30)

原文地址：http://danshipper.com/non-technical-people-cant-estimate-developmen“这个网站非常简单，所有你需要做的就是X，Y，Z。你看起来是技术很不错，所以，我相信，你不需要花费太多时间就能把它搭建起来。”我时不时的就会收到这样的Email。写这些邮件的人几乎都是跟技术不沾边的人，或正在研究他们的第一个产品。起初，当听到人们这样的话，我总是十分的恼怒。他们在跟谁辩论软件开发所需要的时间？但后来我意识到，即使我自己对自己的项目预测要花去多少开发时间，我也是一筹莫展。如果连我自己都做不好，我何必对那些人恼怒呢？真正让我郁闷的不是他们预估的错误。问题在于他们竟然认为自己可以做出正确的估计。作为开发人员，我们经常会发现，在软件开发的问题上，一个外行人会很自然的把复杂的事情估计的很简单。这并不是为我们的愤怒找借口。但这引起了另外一个有趣的问题：为什么我们天生的预测复杂性的能力在遇到编程问题时会失灵？为了回答这个问题，让我们来认识一下我们的大脑如何估计事情的。有些事情对于一些没有经验的人也很容易预估正确，但有些事情则不然。more我们来想想观看一个人弹吉他。即使你从来没有弹过吉他，在观看了一场弹奏《玛丽有只小羊羔(Mary had a Little Lamb)》的吉他表演后，你也能大概推测出这很简单，一个人不需要太高的技术就能演奏 ...继续阅读 (22)