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

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

8月存档,二千零一十五

快速:使用css在新创建的元素中淡入淡出

星期日,8月30日,二千零一十五

更新:我收到詹姆斯发来的电子邮件维德斯尼茨谁使用:空选择器找到了这个问题的另一个解决方案。我在文章的末尾添加了它。

作为今天JSFOO研讨会的一部分,我被要求研究一个团队不能应用的问题。CSS当您更改CSSjavascript中的设置。当我和专业人士打交道时,他们创建了一个简单的JSfiddle要显示问题:

如您所见,仅更改属性(在本例中是不透明度)不足以进行转换。有一些解决办法,如小提琴所示,同样,就像强制回流,这当然是个糟糕的主意。

我玩过这个而且找到了解决方案不要更改javascript中的属性(无论如何,这有点脏),而是将其全部保留为CSS相反。解决方案的最大部分不是使用转换,而是使用动画,并在将新创建的元素添加到DOM以下内容:

更新:如前所述凯尔·辛普森在Twitter上,有一种方法可以实现同样的转变,但你需要包装创建并将类应用到RequestAnimationFrame中调用,而这又意味着某种多填充:

更新2您还可以在中使用:空选择器CSS当你添加作为子元素的新元素以下内容:

ES6目前:模板字符串

星期五,8月28日,二千零一十五

ES6型是Javascript的未来,它已经在这里了。这是一个完成的规范,它带来了许多语言需要的特性,以保持与现在的网络需求的竞争力。不是所有的ES6型是给你的,在这一系列的文章中,我将展示一些非常方便并且已经可用的特性。

如果你看看我写的javascript代码,你会发现我总是用单引号来定义字符串,而不是双引号。javascript也可以,以下两个示例的作用完全相同:

var动物= “奶牛”(二)var动物= “奶牛”(二)

我喜欢单引号的原因是,首先,它使装配更容易HTML具有正确引用属性的字符串:

//单引号,没有必要
//转义类值周围的引号
var但是= (二)//这是一个语法错误:
var但是= 他说:“这是一个很好的选择。”他说:“这是一个很好的选择。”(二)//这项工作:
var但是= 他说:“这是一个很好的选择。”他说:“这是一个很好的选择。”(二)

你现在唯一需要逃避的时候就是在你的HTML,请这应该是一个非常罕见的场合。我唯一能想到的就是内联javascript或者CSS,请这意味着您很可能会对标记做一些不明智或绝望的事情。即使在你的短信里,你最好不要用单引号,而要用印刷体更好看。

旁白:当然,HTML是否足够宽容地省略引号或在属性周围使用单引号,但我更喜欢为人类创建可读的标记,而不是依赖于解析器的宽恕。我们制造了HTML5解析器原谅是因为过去人们写了糟糕的标记,不是继续这样做的借口。

我已经受够了DHTML公司文档.write在新的弹出窗口和其他讨厌的地方在框架集中创建文档,不要再使用转义符。有时,我们需要三个,甚至在我们的编辑中有彩色编码之前。真是一团糟。

字符串中的表达式子项?

我喜欢单引号的另一个原因是我写了很多菲律宾在我的时代,对于性能非常重要的大型网站。在菲律宾,请单引号和双引号有区别。单引号字符串中没有任何替换,双引号的有。这意味着回到菲律宾语34使用单引号的速度要快得多,因为解析器不必通过字符串来替换值。下面是一个例子,它的意思是:


            
  $动物 = “奶牛”(二)
  $声音 = “慕”(二)回声 '动物是$动物,它的声音是$声音'(二)
  //=>动物是$animal,声音是$sound回声 “动物是$动物它的声音是$声音他说:“这是一个很好的选择。”(二)
  //=>动物是牛,声音是牛叫声。
?>

javascript没有这个替换,这就是为什么我们必须连接字符串以获得相同的结果。这很不方便,因为你需要随时输入和输出报价。

var动物= “奶牛”(二)
var声音= “慕”(二)警觉的“动物是” +动物+ “它的声音是” +声音(二)
//=>“动物是牛,声音是牛的叫声”

多线混乱

这会让更长更复杂的字符串变得非常混乱,尤其是当我们组装了很多HTML.而且,最有可能的是,你迟早会用你的短绒工具抱怨行尾的+后面有空格。这是基于javascript没有多行字符串的问题:

//这个不行
var列表= 
  • 买牛奶
  • 善待熊猫
  • 忘记DRE
(二)//这样做,但是呃…… var列表=
    \
  • 买牛奶
  • \
  • 善待熊猫
  • \
  • 忘记DRE
  • \
(二)//这是最常见的方法,嗯,太… var列表=
    +
  • 买牛奶
  • +
  • 善待熊猫
  • +
  • 忘记DRE
  • +
(二)
  • 买牛奶
  • 善待熊猫
  • 忘记DRE
;但是urgh…var list='
    \
  • 买牛奶
  • \
  • 善待熊猫
  • \
  • 忘记DRE
  • \
';//这是最常见的方法,嗯,太…var list='
    “+”
  • 买牛奶
  • “+”
  • 善待熊猫
  • “+”
  • 忘记DRE
  • “+”

客户端模板化解决方案

为了解决JavaScript中字符串处理和连接的混乱问题,我们做了我们一直做的——我们写了一个图书馆。有很多HTML使用模板化库胡须.js可能是最重要的。所有这些都遵循自己的——非标准化的——语法,并在这种思维框架下工作。这有点像是说,你写下你的内容在降价,然后意识到有许多不同的想法,什么是“降价”的意思。

输入模板字符串

随着ES6型它的标准化我们现在可以高兴了,因为在处理字符串方面,javascript现在有了一个新的孩子:模板字符串.这个在当前浏览器中支持模板字符串令人鼓舞的是:铬44+,火狐38 +,Microsoft Edge和WebKit都在船上。游猎,可悲的是,不是,但它会到达那里。

模板字符串的天才在于它使用了一个新的字符串分隔符,也没有用在HTML也不是在普通文本中:反勾号(`)。

使用这个,我们现在在javascript中有了字符串表达式替换:

var动物= “奶牛”(二)
var声音= “慕”(二)警觉的`动物是${动物}它的声音是${声音}`(二)
//=>“动物是牛,声音是牛的叫声”

这个${}构造可以采用任何返回值的javascript表达式,例如,你可以做计算,或访问对象的属性:

var外面的=`十乘二等于${  *  }`(二)
//=>“10乘以2等于20”var动物= {名称以下内容: “奶牛”,请伊尔克以下内容: “牛”,请前面以下内容: “慕”,请后面以下内容: '牛奶',请
}警觉的“${动物。名称}属于${动物。伊尔克}伊尔克,请一端是对于美元{动物。前面},请其他的对于美元{动物。后面}`(二)
//=
/*这头牛是牛乳,一头是驼鹿,另一个是牛奶*/

最后一个示例还向您展示了多行字符串不再是一个问题。

带标记的模板

对模板字符串可以做的另一件事是在它们前面加上一个标记,它是被调用的函数的名称,并将字符串作为参数获取。例如,您可以对URL的结果字符串进行编码,而不必求助于名字可怕的编码成分总是。

功能乌尔维战略研究 {
  返回编码成分战略研究(二)
}http以下内容://BeeDo.com;
//=>“http%3a%2f%2fbeedogs.com”乌里菲`哇$美元$%英镑^$“;//=”沃阿%24岁%C2%A3%24岁%二十五%C2%A3%5E%24岁%二十二“//嵌套也有效:var str=`foo$urlify`&&&` bar`;/=>”FOO公司%二十六%26巴他说:“这是一个很好的选择。”

这个作品,但依赖于隐式数组到字符串的强制。发送到函数的参数不是字符串,但是字符串和值的数组。如果用我在这里展示的方式,为了方便转换成字符串,但正确的方法是直接访问数组成员。

从模板字符串检索字符串和值

在tag函数中,您不仅可以获取完整的字符串,还可以获取其部分。

功能标签,请价值观 {慰问。日志(二)慰问。日志价值观(二)慰问。日志[](二)
}标签$Y${+}(二)
/*=>数组[“你”,“IT”7

还有一个原始字符串数组提供给您,这意味着你得到了字符串中的所有字符,包括控制字符。例如,如果添加一个换行符,则字符串中会有两个空格,但原始字符串中的\n字符:

功能标签,请价值观 {慰问。日志(二)慰问。日志价值观(二)慰问。日志[](二)慰问。日志字符串。未经加工的[](二)
}标签$Y${+}\nIT(二)
/*=>数组[“你”,“it”]7 it\nit*/

结论

模板字符串是在ES6型,请现在可以用。如果必须支持较旧的浏览器,你当然可以ES6型ES5型,请您可以使用类似的库对模板字符串支持进行功能测试特性测试或使用以下代码:

var模板化= 错误(二)
尝试 {
  新的 功能 “{ 2+2 }” (二)模板化= (二)
} 抓住 厄尔 {模板化= 错误(二)
}如果 模板化 {
	/…
}

关于模板字符串的更多文章:

摇滚乐,肉类,javascript–巴西JS 2015

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

巴西观众

我刚从巴西4天的旅行回来参加巴西巴西.我感到很谦虚,很高兴能在开幕式上作主旨发言,因为闭幕式是由Brendan Eich和Andreas Gal主持的——所以,没有压力。

基调

在我的基调中,我要求我们社区更加和谐,以及生产中使用JavaScript的用户对其未来的更多所有权。

主旨时间

好一阵子了,我对我们作为浏览器制造商的角色感到困惑,标准编写者和图书馆创建者。所有优秀的解决方案,我们似乎都会从某个地方的裂缝中跌落,当你看到什么是活的。

这就是为什么我想提醒观众,无论多么令人惊奇,他们在会议上听到的鼓舞人心和聪明的事情是他们要取得成果。我们在市场上有太多的挫折感,太多的尝试彼此之间,而不是试图解决问题,使解决方案容易和容易获得。这个幻灯片位于幻灯片共享上,请很快就会有一段视频。

我们能把ES6作为“现代网络”的基线吗?-巴西JS 2105 必威体育下载克里斯蒂安·海尔曼

关于巴西

当你去巴西的时候,有几件事要记住:

  • 当人们对某件事感到兴奋时,他们真的很兴奋。有很多激情。
  • 私人空间和伦敦市中心一套经济适用的公寓一样罕见——人们会亲切地接触陌生人,而且有很多肢体语言。如果那不是你的事,把它弄清楚!
  • 你会吃你的体重在惊人的肉类和食物是一个社交聚会,不仅仅是燃料。因此,给我点时间。
  • 在和你进行一次完全可以理解的谈话之前,每个人都会为他们糟糕的英语道歉。
  • 所有年龄和背景的人都喜欢重音乐(摇滚,金属,硬核…

关于活动

虚拟现实体验JavaScript的历史

巴西人试图用1300人创建最大的javascript事件,这是一个荒谬的尝试。这是一个100%的成功。我对职业精神很着迷,会场,AV设置以及为演讲者和与会者所做的所有事情。以下是发生的一些事情:

  • 有一个非常强烈的信息关于多样性和一个明智和强制的行为准则。这不应该是个惊喜,但是,当你考虑到巴西的文化和声誉(想想狂欢节)时,你需要对这些事情感到骄傲和信心,才能像组织者那样站出来支持他们。
  • AV设备很大,工作正常。音频没有故障,每一个演示文稿都是从英语到巴西葡萄牙语的实时翻译,反之亦然。翻译组做得很好,我们作为主持人应该做更多的工作来支持他们。我很快会写一篇关于这个的文章。betway体育官方网
  • 无线系统很脆弱,但在你需要的时候也可以。在一个连接不便宜的国家里,假设有一千多人使用两个设备,每个人都试图连接到一个良好的连接,这是非常荒谬的。作为主持人,我从不依赖可用性——你也不应该。
  • 总是有足够的咖啡,小吃,甚至是一个庆祝javascript的大蛋糕(由一个组织者的妈妈制作——蛋糕,不是JavaScript)
  • 整个主题是极客-尽可能的极客。组织者们打扮成护林员,在谈话间隙,我们看了90年代的动画电视剧,那里有一个虚拟现实的旅程,涵盖了用Arduinos构建的javascript的历史,还有一些老式的街机和控制台可以玩。
  • 这是一个为期两天的单轨会议,有许多高级演讲者和非常有趣的话题。
  • 作为演讲者,一切都为我安排好了。我们都坐了一辆出租的巴士往返于会场,为我们准备了午餐。
  • 会议还举办了一个少数民族/多样性奖学金项目,在该项目中,那些负担不起的人可以得到一张赞助票。这些人不是站出来的,也不是站出来的,只是成为人群的一部分。我很幸运能和几个人聊天,学到了很多东西。必威体育下载
  • 派对结束后,对我来说是一个“口交”的时刻,因为我不停地对乐队发表意见。然而,在巴西,选择一支覆盖了许多摇滚歌曲的乐队,这很管用。我从没想过我看到了包容性,在一个javascript活动中,非侵略性的mosh pit和people舞台跳水-我错了.

动作镜头
我,派对结束后在巴西的舞台表演–由@orapouso拍摄

所以,我能说的就是谢谢所有参与的人。这是一个值得纪念的会议,我遇到和交谈过的人们的热情证明了这项工作的成效。

个人/专业笔记

对我来说,巴西是一个有趣的机会,因为我想和我在国内的微软同事联系。我很惊讶于我们的参与组织得多么好,也很喜欢人们对我们的热情。即使我们的另一个扬声器不能出现,我们只是在舞台边上即兴问答。我们没有销售亭,而是有技术传道者在场,他还帮助翻译。相当多的人来到这个展台来修复他们的网站,以实现微软Edge标准的渲染。很有趣的是,当修理东西时,结果会很快。

其他简短印象:

  • 我不知道我的同事乔纳森·桑普森在台上是什么机器。他讲的葡萄牙语很有冒险精神,听众们都很紧张,而我对其结构良好的内容感到惊讶。我会缠着他把这个用英语重新录下来。
  • 朱刚·阿尔维斯(@cyberglot)给了一个伟大的,详细讨论reduce()。如果你是会议组织者,作为一个新的演讲者()选项,她现在在哥本哈根。
  • 几年后(我们一起在雅虎工作),能赶上劳里·沃斯是件很有趣的事,他能指出自己LGBT可宽延时间组邀请人们更多地了解我们社区多样性的这一必威体育下载方面。
  • 看到Mozilla巴西社区仍在踢屁股,我感到很温暖。温暖的,像你能在展台上遇到的那些深情而博学的人,这就是为什么我首先成为一个谋智人的原因。

就是这样

舞台上的组织者

谢谢大家的参与。感谢大家问了我很多技术问题,并给出了非过滤的反馈。谢谢你的展示,很多极客也可以很人性化和温暖。感谢你拥抱不懂你语言的人。我遇到了很多需要跟进的人,我甚至有一个烧烤在回家的飞机上,我遇到了两个与会者的家人。你太棒了!

总是在javascript蛋糕上下注

ES6难题——关于SitePoint的新文章

星期二,8月11日,二千零一十五

难题

我刚刚在SitePoint上发表了一篇文章,叫做这个ES6型难题.在里面,我正在讨论我们目前面临的问题ES6型以下内容:

  • 我们在野外不能安全地使用它作为ES6型是对语言的语法更改,传统的浏览器会将其视为一个javascript错误,并给我们的最终用户一个失败的体验。这违反了选区的优先权设计原则HTML5
  • 我们可以用打字机,也可以用手写体。–这意味着我们不调试我们编写的代码,而是生成代码。这也会导致大量代码膨胀。
  • 我们可以它的特性测试–这会很快变得复杂,我们不能假设对一个功能的支持意味着对其他功能的支持
  • 浏览器支持ES6型只会在内部产生影响—当我们开始时,我们从不发送任何邮件ES6型浏览器
  • 这个性能ES6型现在很糟糕这是正常的,因为我们无法在浏览器中对其进行调整和测试,它提供的复杂性比ES5型

总而言之,我们需要好好考虑一下ES6型,请在我看来,我们正处于Web开发的转折点。我会在我的betway体育官方网巴西主题演讲两周后。

阅读“ES6型SitePoint上的难题

擦除和倒带-关于开放网络营地开放网络热情的讨论

星期二,8月4日,二千零一十五

我刚从旧金山飞到西雅图,仍然遭受着后派对的折磨。开放网络阵营7,请网络爱好者的聚会持续了七年,表明你可以教书,激励和满足而不必付出很多。票价是10美元,甚至那些都是为了避免人们得到票而不来。剩下的钱都捐了为了伟大的事业.感谢所有参与的人,尤其是约翰·福利特,在追寻梦想和成功的七年中。同时,在你对自己的所作所为感到满意的时候继续前进。

我在活动上的演讲,“擦除和倒带——一个创新和不耐烦的故事”讨论了我多年来在倡导开放网络时发现的问题。我们发现的问题,我在讲故事中看到的差距,以及当智能手机成为一种新的形式因素,似乎对网络很有好处时,我们失去了注意力,但很快就成了最大的问题。

有一个YouTube上演示文稿的屏幕放映

这个幻灯片在SlideShare上可用

擦除和倒带-开放网络营2015 必威体育下载克里斯蒂安·海尔曼

我有点大喊大叫,但是我认为有一个很大的问题,那就是那些鼓吹网络伟大思想的人与那些想要创新它的人发生了冲突。现在有很多事情都想达到同样的目标,但是不断地违反别人的最佳实践。我们需要团结起来保持网络的相关性和活力。并不是说我们所做的是一种真正的方式。