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

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

10月存档,二千零一十三

延续糟糕的javascript实践

星期四,10月31日,二千零一十三

我刚刚去了旧金山的三星开发者大会,一个东西在书袋里是一本书(纸,同样)为他们推出的令人惊叹的新型智能电视开发应用程序。令人兴奋的东西,尤其是平台HTML5以及由javascript驱动的。当我随机打开这本书时,发现了以下代码:

点击查看更大的


              
              身份证件=
              “左”
              >
             
  
               
               HREF=
               “javascript:无效(0);” 
               身份证件=
               “左锚” 
              
     打开键向下=“左.keydown();”>左边>
>

              
              身份证件=
              “对”
              >
             
  
               
               HREF=
               “javascript:无效(0);” 
               身份证件=
               “右锚” 
              
     打开键向下=“右.keydown();”>正确的>
>

//左锚事件处理函数左边。键控 = 功能  
{ 
  var键码=事件。键码
  转换 键码 
  {
    案例TVKEY。右键JQuery“右锚”.集中JQuery“右”.添加类“焦点”JQuery“左”.删除类“焦点”
      打破
    违约
      打破
  }
}

我确实理解智能电视是一个明确的环境,当你以某种方式做事时,有些事情可能会更好地工作,但我真的很难理解为什么2013年有人会写javascript和HTML就像这样,除非发生的是我们不考虑旧代码的影响而继续复制旧代码。

有一个教人们编码的巨大运动。伟大的初创企业编解码编解码器法典战争和许多,更多的人使用网络来教人们如何为网络构建东西,如何掌握代码的概念和逻辑以及如何编写代码。另一方面,我们有一些实现指南,这些指南对我们近年来学到的所有东西都进行了粗制滥造,我们使用Web技术来编写一个非常“易于理解”的Hello World示例或“保持代码简短”。必威体育下载这没用,它所做的一切都是对网络不是一个专业的工作环境的偏见,相反,只要浏览器理解它,复制粘贴一些东西并更改一些函数名就可以了。

我们进入了一个复制和粘贴解决方案的世界,这些解决方案完全不关心它们可能产生的效果。这很不幸,看到javascript如何成为一流的语言,或者像Shintech所说的那样“尊重javascript”帖子

它是我能想到的唯一一种在现代处理设备上运行的运行时语言。它无处不在,生态系统的进化超出了任何人的想象,有很多实现(Rhino,V8发动机,现在是纳索恩),它是一个非常匹配的服务器端相等的,J.N.

所以,这个代码有什么可怕的?betway体育官方网克里斯,为什么你在你的网络标准象牙塔如此傲慢的私生子惩罚那些只想快速编写代码和发布产品的人?

叫我老式,但我不喜欢浪费。我也不喜欢人们在不理解后果的情况下使用东西。我们的目标不应该是“它呈现,因此它必须是正确的“,相反,应该是“这是干净的,可扩展的,它使用各种技术,受益于它们的不同优势”。

使用错误的元素,那就开始吧?

那么这里怎么了?第一次炫目,完全无用和膨胀的错误,似乎不想死是与HREF属性javascript:无效(0)(我在2005年为此感到betway体育官方网遗憾我们不再需要六个javascript功能

有一个链接指向一个资源。这就是我们定义它们的目的。如果你没有指向一个资源,不要使用链接。就像你不使用h1当你想定义一个输入,尽管现代的javascript和CSS完全有能力做出一个动作。但这没有意义,这就是为什么你不这么做。那么为什么使用链接HREF长的属性——从定义上讲——什么都不做?

如果你想要有焦点的东西,可以在用户与脚本交互时启动脚本,并且键盘和鼠标都可以访问,使用A纽扣元素。这就是他们的目的。

添加一个ID,那么你就可以很容易地访问它了?

下一个问题是在父元素和每个按钮上使用id。用一个ID定义一个按钮是很简单的,并且可以通过GetElementByID()。查询选择器()但这也意味着这是整个文档中的一个独特之处。如果您需要多个按钮来启用右侧导航,该怎么办?您需要添加一个不同的ID并在代码中检查该ID。这是浪费,并且限制了接口的可扩展性。

使用ID很简单,但这意味着你创建了一个具有独特功能的独特元素——你确定以后不需要重复相同的元素吗?

所有人排队

下一个重大问题是每个元素上的内联事件处理程序.这对智能电视平台来说似乎很特别美国石油学会发出一个键事件,告诉您遥控器上按下了什么键。本质上,您需要做的就是为整个文档分配一个键事件处理程序,而不是为每个控件分配大量的内联处理程序。这不仅仅是浪费和混合HTML和javascript(记住,我们在纯JavaScript环境中工作,它还意味着您很可能对每个控件反复重复相同的代码,而不是编写一个手持钥匙()可由各种控件激活的功能,具体取决于应用程序的视图。

如果在HTML使调试更加困难的元素,您使得重构代码变得更加困难(因为您的JS和每个JS中的函数名都需要更改)HTML文档),您很可能会编写在不同的侦听器中重复相同功能的代码。

这实际上发生在这个例子中,正如下一页按键方法是的副本左键向下键唯一的区别是焦点和类名的转移。

金鱼代码

接下来要担心的是,所有jquery调用都要获取对元素的引用,以设置焦点,并删除和添加类。首先,嘿,我们这里有一个jquery依赖项,为什么其余的代码没有使用jquery来处理事件?其次,为什么要重复?每次访问DOM你的应用程序速度慢了。我们知道这些元素,我们给他们身份证以确保我们了解他们。这就是为什么每次发送一个事件时,让jquery为我们再次找到它们意味着您的代码具有金鱼的内存容量(并且使用了更多的内存)。如果可以,总是缓存变量中的元素以避免另一个DOM查找。像这样的简单缓存有很长的路要走:

/*导航按钮*/var导航权=文件。查询选择器“右”
var左导航=文件。查询选择器“左”
var导航器=文件。查询选择器'向上'
var向下导航=文件。查询选择器“下”//从现在开始使用navright,左导航,导航,向下导航
//这也意味着您以后可以在没有
//必须搜索所有代码!

不必要的课程转移

最后一个明显的问题是类从左到右的转移。问题在于,如果要添加更多的按钮,则必须将它们添加到方法中,因为您现在不知道激活了哪个按钮。这意味着您需要为每个按钮添加一个“从X中移除类”行,或者在将类设置为当前类之前在所有移除类的按钮上编写一个循环。这是一个非常常见和简单的纠正错误。

首先,如果您想在某个元素被聚焦时突出显示它,则不需要将该类设置为该元素。在中设置活动和焦点样式CSS足够了(如图所示

按钮 {
    显示 
}
按钮积极的 {
    背景 绿色
}
按钮集中 {
    背景 绿色
}

但是,即使需要将类设置为当前关注的元素,根本不需要循环遍历所有其他对象。再一次,技巧是将当前元素存储在变量中,并从缓存元素中移除类:

var现在的= 无效的文件。身体.添加事件侦听器点击 功能电动汽车 {
    如果 EV。目标.标签名 = = “纽扣” {
        如果 现在的 {当前。分类表.去除“焦点”
        }现在的=EV。目标当前。分类表.添加“焦点”
    }
} 

这里的代码做了不同的事情,同意,但解决方案仍然笨重。不是在每个处理程序中重复相同的功能,写这个最好的方法是StFixCube()函数,它将要关注的新元素作为参数,并从当前元素中移除类和焦点。

总结

总而言之,我真的很失望在一本关于使用javascript的前沿技术的新书中看到这样的代码。这不是设计的,这是简单而朴素的懒惰和糟糕的编辑。Javascript已经变得非常强大,在很多情况下都用于业务关键功能。在像智能电视这样封闭的环境中,这一点都没有错。但问题是教育新开发人员编写可能需要支持的代码IE4或者网景2,甚至在那时,也是懒惰和难以维护的方式。如果你写一些指导或教程,拜托,为了下一代开发者的质量:

  • 不要使用任何内联处理程序或javascript:伪协议URL.你知道他们是一个可怕的黑客-如果你不这样做,那么就产生你的HTML在javascript中,保持它的整洁。
  • 极限DOM最小交互作用–它会减慢你的应用程序速度
  • 可以存储时不要循环–如果您需要围绕这一点转移焦点,则意味着您需要知道最后一个“活动”元素和下一个要焦点的元素。不需要循环一个组中的所有元素。
  • 扩展性是关键–如果脚本仅限于定义的元素数量,并在事件处理程序中重复这些元素,你造成了糟糕的维护代码。

飞车和更大的好处-我的火狐操作系统在360i时会说话

星期五,10月25日,二千零一十三

昨天我在360i拜访了可爱的人们激发演讲者系列说到Firefox OS,互联网的更大好处以及如何HTML5被用它构建操作系统的需求所推动。

一如既往,我录制了演示文稿的屏幕放映,您可以在YouTube上观看

滑梯台是在线可用,但并没有提供太多的视频。以下是我介绍的资源:

我很有意思地解释了我们的想法,并看到了一个前沿设计机构在新技术方面的问题。一个非常有洞察力的夜晚。

房间里闪亮的银色大象

星期四,10月17日,二千零一十三

我在我的MacBookAir上打这个。一个非常实用和伟大的机器,我使用。13英寸,很小很轻,可以在飞机上使用,8 GB皇家音乐学院,250 GB固态硬盘,使视频编辑一目了然;作品。我用Mac电脑已经5年了,我离开了Windows,因为我厌倦了使用处理器的大部分来扫描病毒。一旦切换到使用Windows的Mac,也会显得笨拙,我真的会错过使用Unix仿真的终端。

“纯银”,绿色公园

在这方面我并不孤单——在大多数会议上,你所看到的都是各种形式和年龄的MacBooks。当我开始作为一个网络开发人员时,这是不同的。带Windows的ThinkPad是个大东西,Mac电脑太贵了,不适合使用。

现在,作为一个为开源公司工作的人,使用一个非开源系统似乎是虚伪的,相信我,我有一部分人告诉我这就是事实。我在服务器上运行Linux,我有一台Linux笔记本电脑,但我只是没有感觉到温暖。很多事情,比如看电影和唱歌,都是一件麻烦事,因为编解码器没有打开,我错过了photoshop,我只是找不到我喜欢的编辑(那是很久以前的事了)。

事实上,我对这个系统很满意,它使我在我所做的和一切工作中最有效,并且是美丽的。苹果在这方面做得很好。当你呆在你选择使用的世界里时,它能确保事情的运转。为了方便起见,我们放弃了我们认为必须做的事情(比如更换电池)。我们不会拧入新硬件或更改配置,在许多情况下,这甚至是不可能的。

所有这些都是个问题。

西方世界的Web开发人员并不是使用Web的人。我们是一个技术精英,比我们想承认的要多得多。当我们讨论高视网膜显示器的优点以及如何支持它们的时候,普通的万维网冲浪者坐在那里,用一个Windows盒子或Linux机器,或者使用一台酒店电脑,或者类似网吧里电脑的东西。

其他人只在工作时冲浪,在他们的IT部门所做的视窗盒子上,由于每一个未经IT认证的软件都可能是一种病毒,所以没有讨论它的运行情况。

我们从不忍受他们的痛苦,我们只是不知道了。对我来说使用窗户现在感觉很奇怪,我不喜欢它。我喜欢我的命令行,我不想单击菜单的层和层,并找到要激活的复选框。

但这不是我们的工作对象。在桌面上,大量的人使用Windows,在未来相当一段时间内会使用Windows。这是否意味着我们必须优化Windows的功能?甚至更旧的窗口也有糟糕的IE版本?不,因为这给我们带来了浏览器战争的黑暗时代,“站点只在IE中工作”的解决方案现在让我们发疯。另一方面,这意味着尽管我们不应该错误地认为所有东西都在IE和Windows中工作,仅仅因为它在Mac上的Chrome或Firefox中工作。

最大的讽刺是,作为网络开发人员,我们一直在抱怨微软,它缺乏对我们整个生活的标准支持,既然微软确实支持我们在其他方面对前缀和测试版功能进行优化的标准,取而代之的是Mac浏览器。开发人员在支持所有酷的东西时也犯了同样的错误IE6承诺要标准化,或者我们告诉自己是“事实上的标准”,就像“每个人都有一台Windows PCIE6“那时。

我想我们必须面对这样的事实.在你的Mac上运行一个虚拟机并在IE中进行测试,这是一个非常好的测试,看看你的工作在外部的表现如何,用户的位置。对,这很令人沮丧,对,这很烦人,意味着在你的电脑上有一个虚拟机,并为每90天需要重新创建的虚拟图像放弃相当多的高清空间,但这是值得的。微软致力于为人们提供便利,如图所示现代的网站上有你需要的所有信息和下载。当然,在Mac和Linux上安装IE是最好的解决方案,但作为Windows核心的一部分,这永远不会发生。

如果我们关心标准和跨平台支持,我们应该确保我们的工作在工业工程-它不必与所有其他浏览器相同,但它需要工作。我看到太多的解决方案主动阻塞IE以确保不需要测试。这正是那些“只在现代浏览器中工作”的网站IE6“的确如此。我想我们已经从这个开始了。

我们的工作是为网络用户创造诱人而美丽的产品。仅仅因为我们可以使用电动工具并不意味着我们应该专注于他们提供的东西。让我们降低对外面事物的期望,集中精力使事情运转起来。很多我们现在认为令人惊奇的事情对我们的最终用户来说可能永远不会有任何兴趣,并且应该在幕后发生,而不是成为一个“你需要这个来看看我做了什么”。

开始传播新闻…我要来纽约,纽约

星期三,10月16日,二千零一十三

明天我要飞到纽约市我在皇后区蹲了一个星期,因为在那段时间没有一个谈话的约会我感到很难过,我在Twitter上问,瞧,被要求在下周进行两次快速的技术会谈。

齐格菲尔德

星期二我将在Flatiron Tech Talk午餐系列通过反射数据.我不一定要专注于为市场构建应用程序,而是专注于如何重用现有的Web内容,并通过FireFoxOS的应用程序搜索使其可安装和查找。

第二次会谈将在星期四举行,10月24日360I在美洲大道32号,第六FL纽约,纽约10013在TriBeCa。你可以在360我的聚会页面360i的EventBrite页面.

我将谈到“HTML5超越炒作:当前问题和近期解决方案”:

HTML5作为新的闪光被卖给了我们,但不知何故,在履行承诺方面落后了。主要的问题是那些大肆宣传的平台 HTML5未能满足其需求。在这个简短的演讲中,必威体育下载来自Mozilla的Christian Heilmann展示了 HTML5可以在一个更加专用的环境中完成,以及Mozilla如何使用FireFoxOS推动标准。必威体育下载了解如何减少忧虑,为即将到来的下一代用户和浏览器提供更多服务。

之后,我要去旧金山参加三星开发者大会。在那儿见。

激情无障碍演示需要

星期一,10月14日,二千零一十三

我很幸运,在我的工作中,我总能遇到令人惊叹的人。在某些情况下,它们需要一段时间才能从壳中出来并展示出它们的能力。其中一个是我的朋友卢兹雷洛luzrello.com网站)来自巴塞罗那。她和我的朋友在我旁边哈维尔乌索比亚加马尔塔舰队当我们在巴塞罗那见面时(她问了我一些关于在舞台上表演的问题,我很高兴地分享了这一点):

Luz哈维尔马尔塔和克里斯

为什么卢兹很神奇?好,很多事情。首先,她是一位有阅读障碍的无障碍研究者。她刚刚发表了一篇精彩的演讲”阅读困难的新解决方案“在Tedxmadrid:

现在,我不会说西班牙语,但是看到鲁兹是如何充满激情地演讲的,动作和速度让我毫不怀疑这将很快被翻译成字幕泰德以及无障碍爱好者。这让我很高兴,也让我希望无障碍性能够走出技术领域,教育和数字素养,并成为它应该成为的:内容的试金石。如果你发布的内容很容易理解,结构清晰,你会接触到很多人,很多人。在太多的情况下,最终产品的外观决定了它是如何构建的,这需要改变。

这就是我想从无障碍倡导者那里看到的那种激情,这些是我们需要的声音。不是要添加的另一个库咏叹调想得不好HTML,不是另一门将网络可访问性作为取悦屏幕阅读器或文本到语音工具的课程。我们需要有人站出来,充满激情,提供重要的信息和最新的信息。不是很久以前的指南忘记了技术的发展。像鲁兹这样的人,像你这样的人,如果你愿意接受挑战。

我毫不怀疑卢兹会在这个空间里移动很多,你猜怎么着?她确实喜欢移动它(从马达加斯加之旅)。