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

贴有“javascript”标签的帖子

在温哥华的超级Vanjs回收HTML5,加拿大

星期日,1月15日,二千零一十二

我在温哥华,加拿大现在和昨天晚上超级Vanjs Meetup吸引了大约160人来看丽贝卡·墨菲,Robert NymanJim AndrewsPreet Jassi和Little Me谈论了所有关于JavaScript的事情。

我自己的谈话是当天的最后一次,是对我最近编码的一些东西的即兴介绍,这些东西被包装在一个回收请求中。HTML5作为JavaScript开发人员。这个谈话的音频在archive.org上提供:

我谈到的演示链接是这里可用以下是所涵盖内容的要点:

我首先解释了我对Supervan JS的困惑超级货车是70年代的一部恐怖电影具有非常有趣的封面后袖艺术与更棒的海报.

然后我继续解释我对HTML5.有了这个,我的意思是有很多关于HTML5使用许多实际上不是HTML5或者用一种非常简单的方式使用它。我向大家展示了在网上玩《愤怒的小鸟》是多么的烦人,以及最近的“剪断绳子”游戏看起来更流畅。我还指出,他们中没有一个真正利用网络的优势,例如,拥有反馈机制或允许级别编辑。

本质上,我希望观众考虑HTML5进入“无聊”的日常交付世界,而不仅仅是游戏和展示网站。为此,我展示了一些代码示例,并解释了它们如何从中受益HTML5特征。

我展示如何将元素移动到当前鼠标位置如何通过使用CSS翻译而不是左上使用译介(0)以触发硬件加速,即使你不去三维。然后我告诉你可以平稳地移动事物通过添加CSS3转换而不是编写JavaScript动画。

我继续介绍三维CSS制造商,用来玩的工具CSS三维为您生成代码的翻译和动画。

这个蓝色帽子制作者下一个演示如何使用拖放将图像放入浏览器并使用画布对其进行操作。

这个用画布裁剪图像演示展示了如何在不需要编写和安装扩展的情况下增强浏览器的功能。在它中,你可以通过双击(在webkit和opera中)或使用上下文菜单(在firefox中),获得一个书签来剪切浏览器中的任何图片。

然后,我继续展示了一个不那么突兀的视频覆盖的演示,演示了如何通过读取视频中的数据(属性)添加覆盖提示。HTML并读取视频的当前时间。

最后一个演示是一个简单的游戏HTML扭曲在游戏动画中使用画布,触摸,方向和键盘事件来控制游戏桨,以及如何从中读取必要的游戏数据HTML因此很容易重新包装和改变游戏。

最后,我请求尝试一下这些东西,并利用浏览器提供给我们的所有酷炫的API和钩子,而不是依赖框架和库来实现所有功能,或者构建一个单一的环境。HTML5是为开发者准备的吗?如果我们只允许市场营销人员利用它,我们会对自己造成伤害。

接下来,我将在hacks.mozilla.org上发布深入的帖子,我们还将拍摄会谈的视频,这些视频将很快发布(质量许可,因为存在一些问题)。

总之,我玩得很开心,有很多好问题,并且非常喜欢这个活动。既然温哥华离山谷只有两个小时的车程,我很有可能很快就回来了。

“javascript不可用”的情况

星期二,12月6日,二千零一十一

昨天在Twitter上的一些有趣的讨论中,我发现现在人们对Web应用程序和网站中的javascript依赖性比以往任何时候都更加困惑。这是一个永无止境的故事,但在我看来,每当我们的浏览技术飞速发展的时候,它就会变得异常活跃。

我第一次遇到这个DHTML.我们用我们可爱的动画菜单和3D徽标(当然是我们学到的东西)将浏览器推向了极限。必威体育下载不再做,对吗?)当人们告诉我们有一些环境没有可用的javascript时,我们很生气。

谁关闭了javascript?

我们需要问的第一个问题是这些环境是什么。betway体育官方网有几个选择:

  • 安全系统乔治·毛内或者过滤掉javascript的公司代理
  • 特色手机如老黑莓(我记得我的手机切换到了迷你歌剧院,至少有一个可以忍受的冲浪体验)
  • 移动环境中,运营商代理图像和脚本,有时会破坏它们
  • 交通受限或连接速度非常慢的人
  • 出于自身原因关闭javascript的人
  • 厌倦了模式弹出窗口和其他攻击性广告的人

如您所见,其中一些是针对我们的最终用户(代理我的公司或移动供应商)完成的,有些可能是临时的(功能手机),有些则是他们自己的选择。所以,没有办法说只有那些想和我们的酷网页搞混的人才会受到影响。

他们为什么关闭javascript?

如上所列,原因很多。在故意关闭javascript时,我敢打赌,主要的三个问题是安全问题,广告疲劳和连接缓慢。

安全性其实是可以理解的。几乎每一次对客户机的攻击都是使用javascript(在大多数情况下,与插件漏洞结合使用)。当然Java是目前最大的安全漏洞,但通过脆弱的网站和未受保护的浏览器和操作系统,你可以通过JavaScript来处理很多邪恶的事情。

慢速连接是一个非常有趣的连接。很讽刺——如果你考虑一下的话——因为我们使用JavaScript的主要目的是为了加快最终用户的体验。JS的第一个用例是客户端表单验证,以避免不必要的服务器往返。

现在,当你在一个非常脆弱的连接上(比如说一个免费的无线或糟糕的3G连接,或者在任何一个Web开发会议上),并且你试图使用例如google reader或gmail,你最终会得到半坏的接口。如果在第一次加载过程中捕捉到薄片,实际上会提供一个“仅HTML低版本”,这很可能会更好地工作。

两全其美

这完全没问题——它试图根据环境和连接性为最终用户提供最佳体验。这就是渐进增强的目的,真的?这并不是福音派的观点——它是简单而纯粹的实用主义。

在任何情况下,给人们提供一个不起作用的界面似乎都不是一个好计划。为了避免这种情况,让我们用它所依赖的技术生成接口。

使用以下技术事件委托这非常简单。将单击处理程序添加到父元素并写出HTML使用InnerHTML或其他,更新更快的技术。

为什么会有这样的问题?

坦率地说,我真的不知道。也许是因为我很老,喜欢我的本地主人。也许是因为我一次又一次地对浏览器和环境感到失望,并且喜欢安全地使用它。我真的不明白为什么有人会选择只使用JS的解决方案,而实际上只需要JS就可以在没有它的情况下提供增强的体验。

神话般的边缘案例应用

人们不断想到的一件大事就是“需要javascript的应用程序”。如果我们真的对自己诚实,那么这些是非常罕见的。如果被推,我只能想到浏览器中的photoshop,或任何其他编辑器(视频,集成电路设备在浏览器中,合成器)那是依赖的关于JavaScript。所有其他组件都可以退回到需要重新加载和服务器端组件的解决方案。

让我们面对现实吧——在node.js时代,服务器端解决方案可以用javascript完成,也是。两年前,雅虎的DAV Glass指出,如果一个小部件库是独立于其环境编写的,您可以重复使用相同的富窗口小部件客户端和服务器端。

“需要javascript的应用程序”的真正原因似乎不同,非技术性的。

“需要javascript的应用程序”的真正原因

就像没有javascript的原因一样,也有需要javascript并提供失败体验的应用程序的原因。

  • 你只知道JS,认为人们应该升级浏览器,不再是胆小鬼。.这很好,但这并不能使你成为你认为自己是一个有远见的人,因为它实际上是一个有限的视角。我们称之为DHTML它曾经失败过一次——也可能再次失败。
  • 您正在构建一个没有服务器端技能的团队的应用程序,并希望以较低的成本将其推出。这可以起作用,但在我看来,这些应用程序“以后添加辅助功能”,从而使实现这一目标所需的时间和金钱翻两番。为此做好计划,一切都很好。
  • 你想很快把应用程序拿出来,你知道以后你必须重新编写它。.这其实是很平常的事,尤其是当你非常成功或者被别人买的时候。祝你好运,只是不要给人留下你待在那里的印象。
  • 您的应用程序将在纯JS环境中运行.当然,这意味着没有JS就没有必要让它工作。其中一个例子就是空中应用。只要确保你在技术和环境上下赌注,这将一直是公司销售的雷达。
  • 你的应用真的需要JS来工作。如果是这样的话,只是不要把它提供给没有它的人。以一种很好的方式解释为什么和如何(并且避免告诉人们他们需要打开它,因为他们可能无法打开,而你所做的就是更让人沮丧),然后用JS重定向到你的应用程序。

总之–有点

总而言之,Javascript依赖性的问题远不止是技术问题。它质疑旧的最佳实践,并对可维护性产生了很大的影响(我将很快对此进行介绍)。betway体育官方网

让我们说,如果我们开始问“我们应该做什么”这个问题,我们关于它的讨论会更有成效。需要JS表示“问题”,而不是“为什么人们没有JS”。当我们的技术能够很好地适应不同的需求时,责怪人们阻止网络是没有意义的。

向人们展示你可以打开和关闭浏览器中的东西来破坏他们的东西也是没有意义的。这并不能代表当一个普通的访问者陷入我们的应用程序时会发生什么。

当node.js成熟并像现在是堆栈。我想看看。

JSCONF欧盟-社区JS重新加载-如何作为一个运动摇滚

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

几天前,我在柏林第一次在欧盟联合会议上发言。作为一个主题,我介绍了作为一个JavaScript社区,我们应该如何做更多的工作来将我们的知识传播给世界,我展示了Mozilla正在开发的一些即将推出的优秀开发工具。

这个此处提供演示幻灯片.

这个谈话录音在archive.org上提供。

jscoff太棒了,我玩得很开心,希望我能激励一些人。

用画布制作动画,用JavaScript创建CSS3动画

星期一,9月5日,二千零一十一

昨天我们去了克拉科夫的酷公园,波兰他们有各种各样的儿童物理实验(和我):

物理公园展览

一直让我着迷的事情之一是非同心圆变成三维圆锥体的视觉错觉。拍下以下照片:

非同心圆

然后转动它,你就会明白我的意思(屏幕上的视频

现在,回来后(像其他孩子一样)我想为自己重新制作这个,实际上是很容易HTML5帆布.如果你得到下面的嵌入,然后单击“播放”按钮查看结果。

检查源代码。本质上,你所要做的就是用黑白相间的颜色画一些同心圆,然后减小它们的半径。你不用保持圆心不变,而是用正弦波把圆心向后移动。

动画只需围绕中心旋转画布即可工作——无需计算循环中的旋转。

这也是让我苦恼的:因为主图像没有改变,我们只是旋转画布betway体育官方网,动画中不需要绘制循环。虽然性能似乎不错(至少在这台MacBook Air上是这样)。我很肯定没有计算圆的动画会更平滑,资源消耗更少。这就是为什么我在一个画布上绘制了这些圆,并将其作为图像复制到动画中。你可以看到这两幅油画(一幅浅灰色的油画)在这个演示中.再一次,如果你得到下面的嵌入,然后单击“播放”按钮查看结果。

下一步就是接受大家现在告诉你的建议并思考CSS动画,因为它是硬件加速和更好(需要引文,但这就是我的印象)。我所要做的就是绕着画布旋转,这样做似乎是个好主意。所以,在里面下一个动画示例CSS只能用画布作画

顺利!我喜欢它。我不喜欢的是现在它在歌剧里什么都不做。另一件让我恼火的事是CSS非常冗长,因为我必须用不同的前缀为每个浏览器重复所有动画信息和关键帧。

所以我想看看我能不能用CSS当支持动画时,动态创建动画。这是可以做到的,但不是那么容易。查看结果.

这似乎很管用,在Opera和其他浏览器中尝试它,以查看不同之处并获取使用哪种动画的信息。如果我使用变换而不是动画,那就更容易了。现在看来,你不能进入,轻松创建和更改关键帧。这篇文章有关于这个问题的更多信息乔·兰伯特又做了一个展示.让你怀疑我们是否不应该在JS和CSS动画。

明智地使用YQL——我在Yuiconf2010的第一次演讲

星期二,11月9日,二千零一十

我现在在悠悠森尼维尔会议,加利福尼亚了解很多必威体育下载玉三,Node.js和钇铝石榴石直接从马的口中。昨天我第一次谈到使用钇铝石榴石以一种明智的方式——从使用JavaScript中的WebService到使用本地存储来加速应用程序并为最终用户保持状态。

幻灯片

音频

现在我需要写下我的第二篇演讲,稍后再谈——请继续关注这篇演讲。