必威体育下载克里斯蒂安·海尔曼

您当前正在浏览必威体育下载克里斯蒂安·海尔曼七月的博客必威体育简介档案,2007.

7月份存档,二千零七

正在查找内联代码编辑器

星期一,7月30日,二千零七

嗯,现在有一个有趣的任务。我被要求找到一个内联的“代码编辑器”,这意味着一个脚本或flash小部件或一个(颤栗)applet,它允许编辑代码(PHP,JavaScriptHTML,请CSS)在应用程序中。有很多内联富文本编辑器,甚至还有一些所见即所得编辑器,但是在线编辑器允许您正确地在HTML文档是密码印刷机

你遇到过别人吗?

对模块模式表达爱意

星期二,7月24日,二千零七

回到2006年2月我宣称我爱这个字面上的物体解释说这是确保脚本不干扰其他脚本的好方法,因为您向外界公开的只是一个对象名称。而不是

功能初始化(){}
功能doStuff(){}
var我的消息= oi,格洛夫!(二)

可能很容易被覆盖

我的脚本= {初始化以下内容:功能(){},请doStuff以下内容:功能(){},请我的消息以下内容:oi,格洛夫!
}

这样可以确保它们不会被覆盖或覆盖其他方法或变量。你可以用myscript。init()来访问它们,myScript.doStuff()和myScript.myMessage。我非常喜欢这个想法,当时我和我的技术编辑争论了很长时间,所以我希望我的书是基于这种脚本编写的,或者根本不是。

唯一让我恼火的是,它仍然会导致相当大的方法,因为您必须为对象内的每个变量调用使用长名称。是的,你可以用这个,但是当你使用事件处理而不使用范围修正尤伊事件您将对事件所发生的元素使用它。

我的脚本= {初始化以下内容:功能(){
    doStuff()(二)
  },请doStuff以下内容:功能(){},请我的消息以下内容:oi,格洛夫!
}

因此不一定是可能的,所以你需要使用:

我的脚本= {初始化以下内容:功能(){myScript。doStuff()(二)
  },请doStuff以下内容:功能(){},请我的消息以下内容:oi,格洛夫!
}

这个,在更复杂的脚本中,会导致大量的代码和类型(除非使用IDE)而且看起来有点臃肿。例如,我在将对象文字脚本放入书和杂志文章的80个字符代码模板时遇到了很多问题。

短代码的解决方案再一次是来自疯狂的javascript科学家的实验室道格拉斯·克罗克福德调用了模块模式。如果你想要一个非常详细和好的解释它在OO巫术方面的作用,检查易懂的Eric Miraglia对模块模式的解释尤伊博客。

模块模式在此之上的作用是使代码保持简短。我只公开那些需要公开的方法然后我可以在main对象中通过方法的名称调用它们而不是通过objectname。methodname。

我的脚本= {massivelyLongVariableProbablyGerman以下内容:1,请thisIsReallyLong以下内容:功能(n){},请doStuff以下内容:功能(n){},请初始化以下内容:功能(){myScript。doStuff(myScript。massivelyLongVariableProbablyGerman)(二)myScript。thisIsReallyLong(myScript。massivelyLongVariableProbablyGerman)(二)
  }
}myScript。初始化()(二)

就变成了

我的脚本= 功能(){
  varmassivelyLongVariableProbablyGerman= 1(二)
  功能thisIsReallyLong(n){}(二)
  功能doStuff(n){}(二)
  返回 {初始化以下内容:功能(){doStuff(massivelyLongVariableProbablyGerman)(二)thisIsReallyLong(massivelyLongVariableProbablyGerman)(二)
    }
  }(二)
}()(二)myScript。初始化()(二)

然而,仍然存在两个问题:如果您想从另一个公共方法调用一个公共方法,您仍然需要通过这条路径或通过在主对象名称前面加上前缀:

我的脚本= 功能(){
  varmassivelyLongVariableProbablyGerman= 1(二)
  功能thisIsReallyLong(n){}(二)
  功能doStuff(n){}(二)
  返回 {初始化以下内容:功能(){doStuff(massivelyLongVariableProbablyGerman)(二)thisIsReallyLong(massivelyLongVariableProbablyGerman)(二)其他公众() // < -有大量失败!
      其他公众() / / < -作品myScript。其他公众() / / < -作品},请其他公众以下内容:功能(){
    }
  }(二)
}()(二)myScript。初始化()(二)

另一个问题是,我对回报并不太满意其中包含了所有公共方法,我觉得它还是有点陌生。卡里迪·帕蒂提供这个问题的解决方案在YUIblog上只需在主对象中创建一个具有短名称的对象,该对象可以作为公共方法相互调用的快捷方式:

var我的脚本= 功能(){
  var酒吧= {}(二)
  varmassivelyLongVariableProbablyGerman= 1(二)
  功能thisIsReallyLong(n){}(二)
  功能doStuff(n){}(二)酒吧。初始化 = 功能(){doStuff(massivelyLongVariableProbablyGerman)(二)thisIsReallyLong(massivelyLongVariableProbablyGerman)(二)酒吧。其他公众()(二)
  }(二)酒吧。其他公众 = 功能(){
  }(二)
  返回酒吧(二)
}()(二)myScript。初始化()(二)

这也为我节省了一层缩进,这意味着我可以在80个字符中容纳更多的代码。我现在会更加认真地使用它。

更新

如果你喜欢你在这里看到的,再上一个台阶揭示模块模式

计划“让我成为演讲者”活动

星期五,7月20日,二千零七

你们有些人知道,Meri Williams为那些想在峰会和活动中发言的人建立了一个维基http://www.makemeaspeaker.com/(目前垃圾邮件:-()和我是一个非常粉丝的想法(甚至皮条在我的苏格兰高地舞说话)。

然而,除了维基的一些小改动和一些关于它的帖子没有发生太多的变化,这就是为什么我要主动采取进一步行动的原因。我已经和几个人聊过了,我们很快就会在伦敦组织“让我成为演讲者”的活动。格式将非常直接:

  • 潜在的演讲者有5-10分钟的时间(取决于有多少人报名)来陈述一个可供选择的话题
  • “专家”小组(活动组织者,经验丰富的演讲者)会在演讲结束后就什么是好的,什么是需要改进的给出建议和赞扬
  • 评审团和观众都投票选出当晚的最佳表现,获胜者将获得一个小奖。

我已经从Foyles(书店)得到反馈,赞助书籍作为奖品,我正在考虑使用雅虎!考文特花园办公室,伦敦和英国广播公司在查林十字的布什家,伦敦(多亏了伊恩·福雷斯特)轮流作为活动地点。

现在剩下的就是整理出一个日期(我的日历现在已经满了),并实际判断是否有兴趣这样做。

那你怎么说?

返回HTTP开销延迟——这一次没有服务器端组件

星期二,7月10日,二千零七

昨天我发了一篇帖子,说要推迟下载头像的时间HTTP请求我想知道是否有一种无需求助于服务器端的解决方案就能做到这一点的方法。简而言之,有。

使用这个脚本非常简单,简单地包括它在你的页面,并确保包括头像图像在以下格式:


              
              SRC公司=
              “default.gif # http://avatarurl”>
             

gif是您的占位符,后跟一个散列和实数URL。脚本所做的就是遍历所有的图像,检查哪个在src属性中有散列,并删除散列之前的所有内容。如果不想遍历文档中的所有图像,您可以在脚本中更改两个变量:您可以提供元素的ID以将循环约束到parentID中,还可以提供应用于avtclass中所有avtar图像的类。该脚本是知识共享态度许可,所以疯狂地使用它吧。

这是剧本的传奇:互联网的传奇画McLellan昨天在博客上评论了这个想法的实用性,我们在午餐时间讨论了如何让它只适用于js。首先德鲁认为这是真的URL作为占位符后面的参数,但这会把缓存当成默认的.gif文件吗?FOO将被认为是一个独特的URL。然后我们考虑片段标识符,对于浏览器foo.html和foo.html_bar是相同的资源。

我们不确定a real的有效性URL作为片段标识符,由于我们懒得查阅这些资料,我查阅了步行标准百科全书,大卫Dorward得到了片段标识符的批准。在我离开办公室的路上,我把这个想法忘了。劳伦斯·卡瓦略谁认为有必要允许一个父ID和一个类来限制替换图像的数量?五站之后,在picdilly行,脚本完成了,现在我正在上传。有合适的人在你身边工作真是太好了。

思考lowsrc€“如何让网站似乎快很多

星期一,7月9日,二千零七

* ZOMG更新我们集思广益,想出了一个好主意客户端解决方案菲律宾成分这和这里详细解释的是一样的。

你们中有些人可能会记得一种被遗忘的非标准化HTML调用的属性lowsrc。它得到了Netscape浏览器的支持,允许您定义真实图片的黑白预览图片。浏览器会先加载“节食”黑白照片,然后加载“全脂”彩色照片,并一行一行地覆盖预览图片。除了渐进式JPG(先加载低质量的,然后逐步变得清晰)和交错式GIF(先加载第二行,然后再填充其余部分)之外,这是一个在56K调制解调器是奢侈品的时代加快网站速度的杀手级技巧。

为什么我们有快速的连接,但网站仍然很慢?

如今,我们大多数人的连接速度都更快了,但我们总是对某些页面需要多长时间才能完成加载感到烦恼。原因是我们嵌入了太多的资源(视频,图片,脚本)在页面中。

一般来说,浏览器似乎可以并行下载两个资源,并将其余的依赖项从加载暂停到完成加载为止。当你使用很多图像时,尤其是从不同的服务器,这会导致很长的延迟,对于这些图像,浏览器需要启动HTTP请求,转换URL到一个DNSIP和拉图像。

此外,浏览器向我们显示了一个无限旋转的轮子或进度条,并通知我们“73个资源中的10个”已经加载。虽然这并不意味着我们不能使用当前文档(浏览器这几天至少不要中途停止渲染€“除非你使用内联脚本失败)还是给了我们一个印象,事情仍然发生和文档还没有为我们准备好了。

最常见的例子是,当你在你的网站上使用虚拟人物时,会发生这种情况——描述贡献了与之相邻内容的用户的小图片。大量使用这些可以使页面看起来非常慢,如下例所示,它加载并显示来自Yahoo!答案与化身显示。

  • 用虚拟人物加载50个答案(在新窗口中打开)阿凡达

在使用Firebug__墋的网络监视器对该连接进行测试期间,总共14.92秒内加载了30个125kb的资源。

此延迟还意味着通过窗口的onload处理程序激发的脚本将被延迟,直到加载所有图像为止,这就是为什么库必须使用像这样的方法可用,请准备好了onContentReady来运行我们的脚本。

然而,如果您控制了服务器的中间层,那么有一种解决方案可以减少这种延迟对最终用户的痛苦,并且似乎可以更快地交付页面。

  • 加载50个延迟的虚拟人物答案(在新窗口中打开)avatarsdelay.php

在使用Firebug__墦s网络监视器测试此连接期间,总共12.7秒内加载了30个125kb的资源,然而,浏览器的轮子在3秒后停止转动,我得到的印象是一切都完成了。有什么区别?

php示例使用卷曲菲律宾从中加载信息雅虎答案美国石油学会。我们序列化返回值并输出HTML以下内容:

      $ url = ' http://answers.yahooapis.com/AnswersService/V1/questionSearch?appid=YahooDemo&query=sport&results=50&output=php ';
$ ch = curl_init ();
卷发($ch,卷曲的_网址,$ url);
卷发($ch,卷曲的_返回传输,1)的规定;
$result=curl_exec($ch);
curl_close (ch);
美元$输出= unserialize(结果);
foreach($output[‘questions’]作为$key=>$p){
回音
'$P['usernick']。”;
回音

'$P['主题']。

”;
回音

'$P['content']。

”;
}

? >

这就导致了HTTP请求延迟站点的用户感觉可用性。一个简单的技巧和对脚本的小更改就可以消除这种延迟。

HTTP时间轴上的开销

使用JavaScript,我们可以选择延迟加载额外的内容,“并非真正需要”的享受和可用的网站。由于阿凡达并不一定要知道答案页面的主旨,我们可以修改后端脚本来获取图像URL,并用一个占位符_€“替换所有图像,比如一张“灰人”图片。以便稍后识别图片并将其链接到收获的图片URL,请我们添加一个动态ID。

      $ url = ' http://answers.yahooapis.com/AnswersService/V1/questionSearch?appid=YahooDemo&query=sport&results=50&output=php ';
$ ch = curl_init ();
卷发($ch,卷曲的_网址,$ url);
卷发($ch,卷曲的_返回传输,1)的规定;
$result=curl_exec($ch);
curl_close (ch);
美元$输出= unserialize(结果);
foreach($output[‘questions’]作为$key=>$p){
回音
ID=“i--”。src = " http://us.i1.yimg.com/us.yimg.com/i/us/sch/gr2/nophoto3_48×48. gif”宽度= 48“高度= 48“alt = " $ p[UserNick]。”>”;
回音

'$P['主题']。

”;
回音

'$P['content']。

”;
$out[$key]=''.$p['userphotourl']'';
}

? >

当页面和所有其他资产完成加载后,我们通过用真实url替换所有占位符的src属性来加载其余图片。这个脚本应该放在文档的末尾。


     

是的,这使得你的化身依赖于JavaScript,但它对可访问性或搜索引擎优化作为替代文本的每个化身仍然是可用的。它唯一的影响是,访问者将看到从“灰色人”到用户的虚拟人物的转变,而且当大多数虚拟人物在初始视区之外或在其边界时,大多数用户对我们的小把戏“并不明智”,但他们得到的页面似乎加载得更快。

推迟大屏幕家具的交付

虽然这个技巧对第三方图像最有效,我们还可以进一步优化,并从连接缓慢的日子的技巧书中取下另一页。

当Netscape 4和其他较旧的浏览器仍然占总访问人数的很大一部分时,迎合这些浏览器和较新的浏览器的主要技巧是使用@import指令为较新的浏览器添加样式表,并有一个简单的链接要为这些旧版本添加一个:

      

(单引号也被划掉了微星5号/ Mac)

我们可以很容易地为文档做这样的事情,了。简单地创建一个更基本的样式表,例如使用背景色而不是花哨的渐变,巨大的斜面或漂亮但非常大的自然镜头。然后创建一个额外的样式表,添加所有这些背景图像。在urlCSS是一样的HTTP请求嵌入图像,thisa€™会给我们相同的利益。在文档的onload处理程序中,你需要做的就是创建一个新的链接元素,该元素指向带有图像的样式表,并将其添加到文档的头部。

      
[…]

这将在加载主文档之后添加所有花哨的图像,并替换完成此工作的背景颜色,直到页面准备好,我们可以继续,让它更漂亮。