必威体育下载基督教Heilmann

您目前正在浏览性能类别的存档。必威体育简介

“性能”类别的存档

伟大的实现者骗取徽章使用容易,并不使它聪明!

周二,2月12日2008

无论你如何改变它——网页设计的未来将不再围绕页面和网站,而是围绕模块。社交网络和系统为应用程序和徽章的发布提供了平台,并将持续下去。
这很酷,因为它让最终用户更能控制自己的体验。然而,它也不好,因为它意味着我们试图建立和遵循的标准,呃,9年很快就过去了。

最主要的原因是“立竿见影”和“唾手可得”的承诺,以及再一次试图利用技术使网络成为一种文化所见即所得和拖放界面。

这是我的最新发现,它让我想知道为什么我们不从过去的错误中学习——使事情易于实现和使它们易于使用是不一样的!必威体育下载

考虑一下这个工作是为第三方提供一个在他们的网站上添加徽章的机会。一点也不难——主要任务实际上是在实施层面,即。确保父方的样式不会破坏标记。

容易实现的徽章

现在,为了方便实现者,这是建议:



实现者可以在属性中选择大小和皮肤,并给出要显示的品牌名称。这很容易理解,脚本使它工作也不是巫术:


(徽章= function () {
var s = document.getElementsByTagName(' script');
(var = 0; s[我];我+ +){
if(s[i].getAttribute(‘src') 'badge.js'){
var div = document.createElement('div');
var content = s[i].firstChild.nodeValue;
div.innerHTML = '

很棒的徽章!

”;
div.appendChild (document.createTextNode(内容));
var size = s[i].getAttribute('size');
var skin = s[i].getAttribute('skin');
var坳,宽度;
开关(大小){
case 'small':width = 100;break;
大小写:宽度= 400;
默认值:宽度= 200;断裂;
}

开关(皮肤){
case 'blue':col = '#ccf';break;
case 'green:col = '#cfc';break;
默认值:坳= # ccc的;断裂;
}

div.style.background = col;
div.style.width = width + 'px';
[我].parentNode.replaceChild(div,s[我]);
}

}
})();

遍历所有脚本元素,把src和你的相比较,读取属性和元素内容,组装一个徽章,设置视觉样式并用标记替换脚本。

这使得实现变得轻而易举,甚至允许实现者为使用的每个标记选择大小和颜色。

然而,这有几个问题:

无效的HTML

不能向其添加自定义属性HTML尼利威利,因为它使你HTML无效的。这是一个很难让人理解的问题HTML验证被认为是一种美好的拥有,而不是一种真正的需要。多年来浏览器的松懈让我们对这个问题免疫。而且,实际上你可以用定制来解决这个问题DTD!

如果您想知道是否添加src和内容脚本是无效的HTML——不是。所有的建议都说用户代理应该忽略脚本当存在src属性时:

的内容中定义脚本 脚本元素或外部文件中的。如果没有设置src属性,用户代理必须将元素的内容解释为脚本。如果src有a URI值,用户代理必须忽略元素的内容,并通过 URI。注意charset属性是指src属性指定的脚本的字符编码;它与…的内容无关 脚本元素。

性能不佳。

This way of adding a badge loads the badge.js file for every instance.虽然它可能被缓存,但这仍然是一个不必要的开销。另一个问题是脚本元素使浏览器停止呈现,直到其中的脚本或与src属性链接的脚本执行为止。

文档主体中的脚本越多,你的网站会越慢!我可以肯定地说,我的大多数firefox崩溃是由于第三方JS包含(真的:广告)。作为一个真正的badge实现可以做得更多HTTP调用——大多数情况下是在呈现之后直接调用——这会增加更多的开销。

不好的可访问性和搜索引擎优化

非javascript客户端(如搜索机器人)不会找到任何带有这种标记的内容。屏幕阅读器可能会得到这个标记,但是在调用自己之后替换脚本对于任何连接到浏览器的引擎来说都是很难接受的DOM

替代方案

下面所有的建议都需要更多的实施者,但也要确保上述问题不会发生。使用渐进式增强,我们更改了一个有效的HTML结构,该结构可由搜索蜘蛛编入索引,并最终得到相同的结果。

所有的解决方案都使用一个脚本,在本例中,在文档的最后,但通过onload调整,这也可能发生在头部。这意味着HTTP开销要小得多,而且脚本不会受到每个实现的严重影响。

使用服务器端回退进行完全渐进的增强

这个解决方案只是使用到一个适当的后端解决方案的链接,这个后端解决方案将为每个品牌提供一个登录页面。这意味着适当的搜索引擎优化因为链接可以被跟踪,所以登录页面就成为了一个起点。徽章的属性是URL参数。虽然不是所有这些都必须由服务器端回退使用,但它们仍然可以。你永远不能拥有太多的数据。





剧本并不难:


(fpebadge = function(){
var div = document.getElementsByTagName(' div');
var b = [];
(var = 0;div[我];我+ +){
如果(div[我].className.indexOf (fpebadge) !1){
b.push(div[我]);
}

}
(var = 0;b[我];我+ +){
var link = b[i].getElementsByTagName(' a')[0];
如果(链接){
var urldata = link.getAttribute(' href');
var badgecfg = convertURL(urldata);
var div = buildBadge(badgecfg);
如果(div){
b[我].parentNode.replaceChild(div,b[我]);
}

}
}

函数buildBadge(badgecfg){
如果(badgecfg) {
var div = document.createElement(' div');
div.innerHTML = '

很棒的徽章!

”;
如果(badgecfg.brand){
div.appendChild(document.createTextNode(badgecfg.brand));
}

var坳,宽度;
开关(badgecfg.size){
case ' small':width = 100;break;
大小写:宽度= 400;
默认值:宽度= 200;断裂;
}

开关(badgecfg.skin) {
case ' blue':col = ' #ccf';break;
case ' green: col = ' #cfc';break;
默认值:坳= # ccc的;断裂;
}

div.style.background = col;
div.style.width = width + ‘px';
返回div;
}

}
函数convertURL(urldata){
如果(urldata.indexOf(' ? ')! = = 1){
var chunk = urldata.split(' ?')[1].split(' &');
var badgecfg = {};
(var = 0,j = chunks.length;i var vp = chunk [j].split(' =');
badgecfg[vp[0]]=[1]副总裁;
}

}
返回badgecfg;
}

})();

服务器端登录页面的逐步增强

如果你不想提供品牌登陆页面,但是只显示名称,如果您不相信您的实现者能够正确地编码&:),那么您也可以只显示一个登录页面,并将badge属性保存在类名中:




代码没有太大的不同:


(pebadge = function(){
var div = document.getElementsByTagName(' div');
var b = [];
(var = 0;div[我];我+ +){
如果(div[我].className.indexOf(landingbadge)! = = 1){
b.push(div[我]);
}

}
(var = 0;b[我];我+ +){
var badgecfg = convertClassData(b[i].className);
var link = b[i].getElementsByTagName(' a')[0];
如果(链接){
var linkdata = link.getAttribute(' href').split(' brand=')[1];
badgecfg.brand = linkdata;
}

var div = buildBadge(badgecfg);
如果(div){
b[我].parentNode.replaceChild(div,b[我]);
}

}
函数buildBadge(badgecfg){
如果(badgecfg) {
var div = document.createElement(' div');
div.innerHTML = '

很棒的徽章!

”;
如果(badgecfg.brand){
div.appendChild(document.createTextNode(badgecfg.brand));
}

var坳,宽度;
开关(badgecfg.size){
case ' small':width = 100;break;
大小写:宽度= 400;
默认值:宽度= 200;断裂;
}

开关(badgecfg.skin) {
case ' blue':col = ' #ccf';break;
case ' green: col = ' #cfc';break;
默认值:坳= # ccc的;断裂;
}

div.style.background = col;
div.style.width = width + ‘px';
返回div;
}

}
函数convertClassData©{
var chunks = c.split(' ‘);
var badgecfg = {};
(var = 0,j = chunks.length;i var vp = chunk [j].split(' -');
如果(vp[1]){
badgecfg[vp[0]]=[1]副总裁;
}

}
返回badgecfg;
}

})();

嘿,你使用类,为什么不提供一个皮肤文件?

看到最后一个选项实际上使用了类,为什么不保留样式呢CSS并提供一些实现人员可以更改的皮肤文件?这样你的徽章脚本就会非常小:


(pebadge = function(){
var div = document.getElementsByTagName(' div');
var b = [];
(var = 0;div[我];我+ +){
如果(div[我].className.indexOf(skinnedbadge)! = = 1){
b.push(div[我]);
}

}
(var = 0;b[我];我+ +){
var link = b[i].getElementsByTagName(' a')[0];
如果(链接){
var div = document.createElement(' div');
var linkdata = link.getAttribute(' href').split(' brand=')[1];
div.appendChild(document.createTextNode(linkdata));
div.innerHTML = '

很棒的徽章!

”;
b[我].parentNode.replaceChild(div,b[我]);
}

}
})();

您可以将其扩展到load和applyCSS文件需求,但将它们保存在一个文件中会更有意义,再一次削减开支HTTP开销也要用级联来产生小CSS文件。

评论?你可以去在这里尝试所有的例子

在大公司工作的乐趣和危险

星期六,2月9日,2008

这不是一个技术职位,但我已经思考了一段时间,它与我在这里看到的许多评论和电子邮件有关。我想总结一下在大公司工作的感觉,非常公开的公司,以及我的观点和影响范围。
最近我收到了很多关于这个的问题我没有一遍又一遍地重复我自己,betway体育官方网我借此机会写一篇参考文章。

在开发人员的职业生涯中,有一段时间你会在公司中晋升。大多数情况下,这是因为您的表现和对公司的奉献精神,以及您所在的更广阔的市场,以及您已经向自己证明了您是一名优秀的开发人员和团队成员。

Web开发是一个非常年轻的职业,我们确实会犯以前在其他职业中犯过的所有错误。但有一件事是肯定的:为了成功,你需要睁大眼睛,跟上市场的变化。如果你接受你的工作,并且网络是一种新媒体的事实真的很严肃,这意味着你需要检查未来的技术和想法,就像交付当前的技术和想法,以充分满足。

如果你做了这几年来,摸摸你的额头麻木运行对墙试图让这个想法通过人们的主要关心的是赚到足够的钱能够支付工资和其他公司费用你有两个选择:开一个自己的公司,咨询他人或尝试加入市场中的大玩家。

前两者都伴随着金融上的未知和巨大的压力。其次,你要决定放弃你的一些奉献,因为你不能做得过头。你咨询,你发票,你希望他们好起来,然后你去找下一份工作。你知道该怎么做,但你几乎没有机会真正实现它。

后者-面向未来,成熟的公司没有麻烦-有很多积极的方面:

  • 你所在的公司已经存在一段时间了,你知道如何对待员工,这样他们才能有所作为(这意味着人力资源问题得到了解决,薪酬也没有问题)
  • 您所在的公司已经有很多开发人员在为其工作,您不必开始理解良好it支持的价值。这包括获得足够的硬件,在需要的时候,而不是在符合预算的时候,进行正确的软件和升级。
  • 你得到了超出你最疯狂的梦想——数以百万计的用户——并学习了你从未想过的交易技巧,但那是你想为所有这些人提供一个伟大的体验的时候。必威体育下载
  • 你有机会与技能高超的人共事——你读过他们的书,想知道他们是如何想出这样的好点子的。
  • 你可以向那些你一直想要一起工作的人求婚,然后你会发现这是有预算的!
  • 你会发现公司里有些部门研究的技术和想法虽然不能立竿见影,但在未来会成为巨大的财富。你甚至会因为向他们提出一些想法而获得荣誉甚至更多。
  • 你可以从已经在这必威体育下载个联盟打了很长时间的人们的大量经验中学习。
  • 你可以得到公司的津贴(免费食物,廉价的硬件,健身房,卫生保健等等。

所有这些都会让你快乐,但也有不好的一面,了。

  • 你是个极客,甚至可能有一个“场景”的背景,你在很多人的眼里“出卖给那个人”,他们以前视你为一个平等的人。
  • 人们期望你有巨大的改变,你不得不忍受许多“被同化”的“半开玩笑”的评论,“加入母舰”等“聪明”言论。
  • 每当你谈论你公司的产品时,人们不会像你在加入公司之前说的那么认真。“你当然会说这很好,他们付钱给你。
  • 你将对你的公司所做的一切负责,无论离你的专业领域有多远,甚至地点有多远,它都会发生。
  • 评判你的标准不是发生了什么好事,而是公司生产的低质量产品——戳穿巨人并证明你可以做得更好是件有趣的事(同时忘记巨人必须支持你不必支持的依赖关系)
  • 很自然地,你会被认为对公司发生的所有事情都有深入的了解,而且很可能能说出人们想知道的任何细节。
  • 如果有人希望你为他们工作(比如在会议上发言),你的公司会很乐意为你支付旅费和住宿费,而不是希望你为他们工作的公司。
  • 你应该和公司里最富有的董事一样富有,因为所有的货物都是平均分配的,对吧?
  • 你会知道该投资什么股票,因为你的公司在华尔街是大公司
  • 你可以在你的公司给任何人找份工作,即使他们根本不知道自己真正想做什么,或者他们能带来什么。

这些都不是什么大问题,你可以耸耸肩,但令人惊讶的是,每天都有这么多这样的事情发生。

以下是我对我的公司和它的未来所做的和了解的:

  • 我是一名网络架构师,对于使用内部工具构建web站点的人来说,提供关于前端web开发的建议非常重要。
  • 我是一个团队的成员,这个团队的工作是定义交付给前端web事项的标准。
  • 我正在开发内部工具,以便更容易跨不同产品重用代码和组件。
  • 我建议人们雇佣和面试其他从事web开发工作的人
  • 我是我们开发图书馆的欧洲分部,可以提供相关信息和讨论
  • 我是一个可以谈论所有面向公众api的演讲者,我们为外部开发人员提供库和组件
  • 我是一名内部培训师,负责网络开发和人际互动(可访问性,为网络写作…)
  • 我正在审核欧洲的内部代码和产品,亚洲,有时还有美国
  • 我经常与美国的团队交谈,以确保我们的标准与他们的想法一致,并将成为全球标准
  • 我和大学谈论黑客日,挑战和其他学术事件。
  • 我留意球队在欧洲和世界各地,确保开发人员很高兴和能为他们做一份好工作——消除障碍和说话人的想法为web开发人员意味着大量的工作没有多少收获。
  • 我联系其他人在同一位置和人力资源和公关,以确保我们有一些流程,将确保我们在未来可以雇佣好人,给潜在的新开发人员了解什么是像我们这样的大型站点的开发人员。
  • 我与后端团队进行了沟通,以确保我们能够顺利地一起工作,并拥有共同工作的方法。

这是很多,它让我忙于我最关心的事情——让网络冲浪者受益的酷技术,让那些想要开发这项技术的人更有能力。

简而言之,我和开发人员谈了很多,他们的经理和外部人士对我们的技术进行了讨论,以确保我们能够交付好的产品,并乐于尝试新想法。

这就是我在公司所知道的一切。别的,我敢说你知道的比我多!

YUI上的运行加载YUI组件的需求

星期五,12月7日,2007

这是我在雅虎的演讲之一。前端工程峰会在伦敦,它处理削减规模的选择YUI库组件。已经有很多关于这个主题的文章和帖子,但是没有一个真正解释使用这个主题的想法betway体育官方网雅虎_config来按需加载组件,而不是使用YUI加载程序。

这也是我用来创建低调的flickr徽章v2