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

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

10月存档,二千零一十三

延续糟糕的JavaScript实践

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

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

点击大


              
              id=
              “左”
              >
             
  
               
               HREF=
               “javascript:无效(0);“ 
               id=
               “left_anchor” 
              
     onkeydown=“左.keydown();”>>
>

              
              id=
              “对”
              >
             
  
               
               HREF=
               “javascript:无效(0);“ 
               id=
               “right_anchor” 
              
     onkeydown=“right.keyDown();“>正确的>
>

//左锚事件处理功能左边。keyDown = 功能 () 
{ 
  var键码=事件。键码
  开关 (键码) 
  {
    案例tvKey。KEY_RIGHTJQuery(“# right_anchor”)焦点()JQuery(“右”)addClass(“焦点”)JQuery(“左”)removeClass(“焦点”)
      打破
    违约
      打破
  }
}

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

现在有一场教人们编程的巨大运动。伟大的创业公司一样CodecademyCodecombatCodewars和许多,更多的人使用网络来教人们如何为网络构建东西,如何掌握代码的概念和逻辑,以及如何编写代码。另一方面,我们有一些实现指南,它们粗暴地对待我们在最近几年学习到的所有内容,我们使用web技术是为了编写一个非常“容易理解”的hello world示例或“保持代码简短”。必威体育下载这没用,它所做的一切只是延续了一种偏见,即web不是一个专业的工作环境,相反,只要浏览器能够理解,复制粘贴一些东西并更改一些函数名就可以了。

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

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

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

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

使用错误的元素,然后让它工作?

这有什么不对吗?第一次炫目,完全无用和浮夸的错误,似乎不想死是与一个链接HREF的属性javascript:无效(0)(我在2005年对此表示betway体育官方网遗憾我们不再需要6个JavaScript特性)。

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

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

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

下一个问题是在父元素和每个按钮上使用id。定义带有ID的按钮并使其具有样式化和可访问性非常简单getElementById()querySelector()但这也意味着这在整个文档中是独一无二的。如果您希望有多个按钮支持向右导航,该怎么办?您需要添加一个不同的ID,并在代码中检查这个ID。这是一种浪费,并且限制了接口的可扩展性。

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

每个人都排队

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

如果您在。上使用内联事件处理程序HTML元素使调试更加困难,你使得重构代码变得更加困难(因为函数名需要在JS和每个JS中改变)HTML您很可能会编写在不同侦听器中重复相同功能的代码。

这实际上发生在这个例子中,就像在下一页按键方法的副本left.keyDown唯一的区别是焦点和类名的转移。

金鱼的代码

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

/*导航按钮*/varnavright=文档。querySelector(“右”)
varnavleft=文档。querySelector(“左”)
varnavup=文档。querySelector(“#”)
varnavdown=文档。querySelector(“#”)//从现在开始使用navright,navleft,navup,navdown
//这也意味着您以后可以在没有
//不得不为它们寻找所有的代码!

不必要的类转移

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

首先,如果您想在某个元素被聚焦时突出显示它,则不需要将该类设置为该元素。设置一个积极和集中的风格CSS是足够的(如图所示)。

按钮 {
    显示 
}
按钮活跃的 {
    背景 绿色
}
按钮焦点 {
    背景 绿色
}

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

var当前的= 文档。身体addEventListener(点击 功能(电动汽车) {
    如果 (电动汽车。目标tagName = = = “按钮”) {
        如果 (当前的) {电流。班级名册删除(“焦点”)
        }当前的=电动汽车。目标电流。班级名册添加(“焦点”)
    }
} )

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

结论

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

  • 不要使用任何内联处理程序或javascript: pseudo协议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模拟终端。

“只是银”,绿色公园

在这方面,我并不孤单——在大多数会议上,你看到的都是各种形式和年龄的macbook。当我开始作为一个网络开发人员时,这是不同的。带Windows操作系统的thinkpad电脑很受欢迎,而mac电脑太贵了,根本不适合使用。

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

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

所有这些都是一个问题。

西方世界的Web开发人员并不是使用Web的人。我们比我们想承认的更像是一个技术精英。在我们讨论高视网膜显示器的优点以及如何支持它们的同时,普通的全球网络用户坐在那里,使用Windows box或Linux机器,或者使用酒店的电脑,或者类似于网吧里的电脑。

其他人只在工作时间上网,在他们的IT部门幽灵般的windows盒子上,没有讨论它上面发生了什么,因为每一个未经IT认证的软件都可能是病毒。

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

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

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

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

如果我们关心标准和跨平台支持,我们应该确保我们的东西能正常工作-它不必和其他浏览器一样,但它需要发挥作用。我看到太多的解决方案积极阻止IE,以确保不需要测试。这正是那些声称“只在现代浏览器中工作”的网站所喜欢的IE6”了。我想我们已经从这里开始了。

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

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

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

明天我要飞到纽约市我在皇后区蹲了一个星期,那段时间没有演讲约会让我很难过,我在Twitter上问,瞧,他被要求在下周做两个简短的技术讲座。

齐格菲尔德

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

第二个讲座将在周四,10月24日360年,我在美洲大道32号,6日纽约,纽约10013在翠贝卡。你可以在这里报名360年我的Meetup页面360i的EventBrite页面

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

HTML5作为新的闪光被卖给了我们,但不知何故,在履行承诺方面落后了。主要的问题是那些大肆宣传的平台 HTML5未能满足其需求。在这个简短的演讲中,必威体育下载Mozilla的克里斯蒂安·海尔曼展示了什么 HTML5可以在更专用的环境中实现,以及Mozilla如何使用FirefoxOS推动标准。必威体育下载学习如何为即将到来的下一代用户和浏览器少操心,多交付

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

激情无障碍演示需要

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

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

Luz,哈维尔,马尔塔和克里斯

为什么卢茨很神奇?好,很多事情。首先,她是一名患有阅读障碍的易接近性研究者。她刚刚发表了一篇精彩的演讲阅读障碍的新解决方案“在Tedxmadrid:

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

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

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