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

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

归档6月份,2017年

任何网站都可以成为一个PWA,但我们需要做得更好

星期二,6月27日,2017年

在他的博客上,我只要a杰里米·丁

实际上,任何网站都可以——也应该——成为一个进步的网络应用程序。别让别人告诉你。我在去年的一次活动中听到Chris Heilmann说你不应该把你的博客变成一个进步的网络应用。我不敢相信我听到的。他在视频聊天中重复了这个信息:“当某人,例如,把他们的博客变成 PWA,请我不明白你的意思。我不想在我的主页上有那个图标。这对我来说毫无意义“对不起!?仅仅因为你不想让别人的图标出现在你的主屏幕上,那个人不应该使用最先进的技术!?对不起,我的法语,但他妈的。那倒霉!
我们的想象力已经被本地移动应用程序目前的功能所限制,以至于我们无法看到过去仅仅是像一个悲伤的货运狂热者那样模仿现状。
我不希望网络与本地网络一样;我希望网络能超越它。我,首先,如果我的主屏幕上没有初创公司和符合“看门人”标准的公司的图标,那就更好了。但是主页上满是那些不需要征求任何人同意就可以发表的人的脸呢?这就是我想要的!

一句话,我不是告诉任何人不要使用great,现代技术使其最终用户受益,并使其出版方便。和组成的堆栈PWA让他们中的任何一个比现在更成功都是伟大的。

波兰JSPoland的PWA演示
我,字面上告诉世界a PWA可以是任何东西

我希望我们做得更多。我希望现代网络技术不是个人使用的东西。我想让它成为我们工作的一部分,不是为了工作,也不是指某个惊人的网络人的网络存在或一个大型网络公司的展示。

在我们控制的环境中使用任何伟大的技术,但我们需要瞄准更高的目标。我们需要去错误发生的地方,为那些陈旧的解决方案带来便利和明智的升级。我没有权力告诉任何人不要在他们的博客上使用某些东西。但我也不想有很多东西被吹捧为“PWAs”,那是一个可怕的经历。我们已经用各种包装格式做了一遍又一遍。这次我们需要把它做好,因为我们的工具从来没有这么好过。

我一遍又一遍地公开反对现有形式的商店,因为它们是进入的障碍。一个看似人为的障碍,当我们有了网络,正确的?

也许吧。事实上,新一代的人知道应用程序。没有网络。他们知道网络充斥着广告和恶意软件,你需要拦截软件。在一些网络不像我们现在这样方便的地方,人们甚至认为Facebook是网络。因为它比臃肿的网络更容易让人们使用。

当我这么说的时候,我不明白把一个博客变成一个PWA它正好触及“应用”部分的混淆点。对我来说,一个应用是一个“做”的东西,不是“读”的东西。我觉得有线电视没用,《卫报》《滚石》杂志,泰晤士报等应用。拥挤的桌面上的图标无法伸缩。我用新闻阅读器阅读新闻。我用RSS阅读博客的聚合器。我用电子书阅读器阅读书籍(或浏览器)。我用Spotify或iTunes听音乐。我没有针对每个乐队或电影的应用程序。

我已经在网上发表了好几年了。我选择使用博客,因为我不知道你是如何使用它的。我喜欢这样。我认为你的桌面上不应该有“Chris Heilmann”的图标。它应该在联系人中,它可能会显示为一个帖子或书签。你在这个博客上除了阅读什么都做不了。用让你最开心的事情去做。

我非常同意Jeremy的观点:

我不希望网络与本地网络一样;我希望网络能超越它。

当我不想博客作为一个应用程序时,这正是我的意思——不管应用程序的格式如何。我希望人们创建的PWAs不仅仅是书签——即使是离线工作的PWAs,当有新内容可用时也会给我一个通知。

这是否意味着我说您不应该使用清单和服务人员来改进web页面或博客?地狱,不。疯狂——做正确的事情。特别是做一件PWAs要求的事情:停止发布HTTP并保护您的服务器。中间人的攻击需要停止,尤其是在各国政府都很高兴成为中间人的情况下。

我希望网络在重要的地方取得成功。我希望原生应用消失。我不想下载一个应用程序来获取柏林地铁的票。我不希望我去的每个机场都有一个应用程序。我非常不希望我参加的每个活动都有一个应用程序。我不想为我经常光顾的每一家餐厅都提供应用程序。我不需要这些关系,也不需要在有限的手机空间里给他们留点空间。或者在我的桌面/启动栏。

我们需要网络打败它的可怕之处:分布和便利。我希望人们不用去商店就能做事情,下载并安装应用程序并运行它。我希望人们不用信用卡就能获得免费内容。你需要一张信用卡才能在应用商店里免费获取东西——这是一个巨大的障碍。我希望人们能找到下一班火车,预订餐厅,找个医生,找一些不需要连接和设备的东西。我想让人们拍照和分享。我不希望人们使用不安全,他们的应用程序版本过时,因为每天更新50MB太多了。我不希望人们使用手机上的东西,把浏览器作为最后的手段。为此,我们需要知名实体的伟大PWA和伟大的新玩家。

先试后买
PWA是先试试再买

我想让人们明白,一切都在他们的掌控之中。正如我上周在波兰所说,PWA正确的做法是先试后买。你去一个URL,请你喜欢你所看到的。在后来的访问中,你推广它以获得更多的访问,离线工作,甚至给你通知。

一个PWA必须赢得这种权利。这就是我们需要的例子。我已经没有Twitter了,Twitter Lite这样可以节省大量的数据和空间。我四处向人们展示这个,我看到他们把原生Twitter踢出去。这就是我们需要的。

每次我们宣传网络作为一件很酷的事情,我们都在重复同样的观点。

  • 它很容易发表
  • 每个人都可以使用它
  • 它不欠任何人的情
  • 它独立于平台,形式因素和一般邀请。

当你看到数百万人每天使用的网络时,情况就大不一样了。

每个浏览器制造商都有一个跨浏览器遵从性部门,这是很糟糕的。我们都会与大公司接触,指出他们的产品是如何破裂的,以及可以采取什么措施来修复它们。我们甚至提供开发人员资源,以避免依赖WebKit前缀。在几乎所有的情况下,我们都会被问到这样做的商业利益是什么。

肯定的是,我们有很多小的胜利,但是现在向别人展示网络是很可怕的。在我们的泡沫里,一切都很棒,令人惊叹。

那是怎么发生的?我们有技术。我们有知识。我们在数百次会谈中得到了信息,书籍和帖子。问题是我们能联系到谁。谁建立了这个可怕的网络?或者谁在家里做了很棒的东西,但在工作中却因为无法修理而感到沮丧?

当我说我不想要一个博客作为一个应用程序,我不是说你不应该给你的博客增压。我并不禁止任何人发布和使用技术。

但是,我认为这还不够。我们需要商业上的成功。我们需要击败本地应用程序的营销。我们需要通过更好的建设来揭穿本土便利的神话,基于Web的解决。

我们已经证明了web可以很好地用于自发布。现在,我们需要去那些构建iOS和Android应用程序的人那里,让他们的公司拥有更高的功能。我们需要这些人理解,网络是一种发布和让用户使用你的产品的好方法。我们认为这是常识,但事实并非如此。我们必须再次提醒人们,网络是多么伟大。使用web技术要容易得多。

为此,我们首先需要知道如何在网上大规模赚钱。我们需要找到一种方式,让人们为内容付费,而不是让出版商以更简单的方式展示大量广告。我们需要展示商业的数字和成功,现有产品。谷歌在这上面花了很多钱PWA路演。每个大型网络公司都有。我还与合作伙伴直接合作,跨浏览器修复他们的web产品,并将其转换为PWAs。还有一些很好的第一个案例研究。我们需要更多。

我希望开发人员不必在他们的个人项目上利用业余时间学习新的web技术。必威体育下载我希望公司了解PWA最重要的是,修复他们在网络上的废话,并保持维护模式。

如果你认为这些和其他PWA案例研究是偶然的,因为参与者只是喜欢网络——再想想。说服公司做“非常明显”的事情需要付出很多努力。这涉及到大量的时间和金钱成本。许多内部开发人员拿自己的职业冒险,告诉他们的上级有另一种方法,而不是交付他们想要的。我们想让它起作用,我们需要提醒人们,质量意味着努力。没有添加一个清单和一个服务工人到一个已经在维护地狱多年的现有产品。

杰里米想要一个特定的世界:

我,首先,如果我的主屏幕上没有初创公司和符合“看门人”标准的公司的图标,那就更好了。但是主页上满是那些不需要征求任何人同意就可以发表的人的脸呢?这就是我想要的!

我想要更多的。我希望商业世界和“在线”的营销炒作不是关于本地应用程序和关闭的商店。我不希望人们认为要求iPhone访问他们的内容是可以的。我不想让公司浪费金钱,当他们很容易在网上找到的时候,他们会出现在应用商店里。我想我们已经有了杰里米描述的世界。再说一遍,我不希望任何人不接受这一点,如果他们愿意或者他们认为这是一个好主意。

没有必要将您当前的web产品转换为aPWA是一种浪费。所有的步骤都对你的产品的健康和质量有好处。这是最重要的部分。但这确实意味着,应该实现某些质量目标,以避免用户因为“应用程序”的期望而得不到他们想要的东西。我们必须讨论这些质量目标,现在很多公司都在推广他们的想法。这并不意味着我们要审查网络或将人拒之门外(公司之外还有其他人在从事这方面的工作)。这意味着我们不想再看到“HTML5应用是一种糟糕的体验”。

我经营这个博客已经很久了。我学必威体育下载到了很多。太好了。但我不想让网络成为人们已经相信的东西。我希望每个人都能使用它,而不是像应用程序商店那样的竖井——尤其是商业公司。长期以来,我们一直在逃避让人们每天使用的企业和产品拥抱web的责任。目前原生/应用商店模式的消亡是一个很好的机会。我希望每个有兴趣和知识的人都参与其中。

我无法想象自己的手机里会有那么多人。这就是地址簿的作用。我的电子书阅读器(也就是我的浏览器)和我读书的方式是一样的。我没有针对每个作者的应用程序。

我喜欢有一个提要阅读器来批量检查激励我的人在做什么。我喜欢阅读搜索我的聚合器。如果我想和这些出版物背后的人交谈,我会联系他们并与他们交谈。或者——甚至更好——去见他们。

对我来说,一个应用程序就是我做的事情。这个博客是我的一个应用,但不适合其他人。你不能编辑。我甚至关掉了评论,因为我花在主持上的时间比回复上的时间还多。这就是为什么它不是aPWA。我可以把它变成一个,但我觉得,一旦你把我提升到你的主屏幕上,我应该发表更多的东西。

所以当我谈论个人博客而不是我的pwas时,这就是我的意思。对我来说,应用就是用来做事情的东西。如果我除了阅读和分享之外不能做任何事情,我不会阻止你把它作为一个PWA。但我不太可能安装它。同样,我也不下载金·卡戴珊(Kim Kardashian)或乐队的应用。

这与你的出版权无关。它是关于在有限的环境中赢得空间,那就是我们用户的主屏幕,码头和桌面。如果你很高兴有那么多朋友的博客或者你喜欢的人,那就太好了。我宁愿很快就能在商店里看到现成的手机,人们可以用它来做事情。不是那些在第一次连接时需要200MB更新而不会升级成为安全隐患的本地应用程序。我想让网络访问成为新设备的前端和中心。为了做到这一点,我们需要更高的目标,做得更好。

CSS vs。JavaScript:相信vs。控制

周三,6月21日,2017年

当哥托康要求我发言时,我认为这将是另一个机器学习或进步的网络应用程序的谈话。必威体育下载相反,组织者让我报道CSS。在他们的“编程语言”轨迹中,一种代表性不足的语言。现在,我一直很喜欢CSS从一开始。我认为参加核心发展会议的人不会那么兴奋。他们不会去看的CSS在细节。相反,我的假设是,这对他们来说更是一种必要的烦恼。所以我写了一篇关于用什么CSS方法和我们如何不使用它的优势。

这是我演讲的要点。

无聊的战斗

美国队长vs.铁人

前几天我又看了一次“美国队长:内战”。这又一次让我感到无聊,我不太明白它的概念。超级英雄被迫为他们的附带伤害负责的想法并不新鲜。要求控制它们也不是什么新鲜事。《超人特工队》在这方面做得很好。

我对所有这些超酷英雄互相战斗的前提感到更无聊。我们知道他们的力量。我们知道,他们是内心深处的朋友,无数次拯救了彼此的生命。我们知道它们的能力是匹配的。没有暴力,没有真正的驱动,在这些遭遇中没有愤怒。漫威似乎引进了太多酷酷的角色,现在试图找到一种让人们站在一边的方法。卖出更多的玩具,人工创造的戏剧。

当我们谈论使用时,我得到了同样的印象CSS或用于布局的JavaScript。两者都有各自的优点,他们都有自己的力量。这两家公司都有粉丝基础,他们随时准备挖掘最详细的信息,以支持一家胜过另一家。但我觉得这很无聊。两者的共同使用是推动web向前发展的原因。有两个巨大的阵营阻碍了我们前进。看到一头CSS作为过去的事情,在模块驱动的世界中,我们应该在脚本空间中完成所有工作。另一个看到CSS它的预处理器和构建脚本都足以完成所有工作。记得DHTML我们用JavaScript做一切的日子?还记得“CSS唯一解决方案”的反对意见吗?当我们(ab)使用复选框进行复杂的交互以避免使用任何javascript时?

吉安娜·布兰廷说得很好:

这两组可以:
CSS很简单,它甚至没有编码”
CSS太难了,我们需要用JS替换它!”
请互相谈谈?

很多关于CSS这是因为开发人员不了解它与编程的不同之处。相反,我们玩弄它,改变它。打碎东西后,我们的结论是它不够好,我们需要更换它。

我知道Open GL -我可以做梯度

这常常超出了标准。很像使用OpenGL用于简单的渐变创建我们不需要总是拿出枪来。CSS有一些技巧是我们无法与客户端脚本匹配的。它与语法或语言特性无关。这是关于分担责任。

谁该负责,谁该宽容?

CSS,请很像HTML容错。这可能会令人困惑。这意味着最终用户不应该遭受开发人员的错误。产品由CSS当开发人员出错时仍会出现。他们看起来并不完美,但是他们的工作。当ACSS解析器遇到一个它不理解的属性——它跳过它。当它遇到无法处理的值或属性不支持的值时,它会跳过它。这样我们就可以向后兼容。

一个带有背景颜色和渐变的按钮将在旧环境中显示颜色。它还在由于性能问题而不支持梯度的环境中显示。更快,更多的高保真和支持环境将显示一个梯度。

你不需要了解环境也不需要做决定。操作系统,浏览器和涉及的代理为您做出这些决定。

JavaScript是不容错。这可能是灾难性的。在使用JavaScript时,您的控制能力更强。但你也更负责任。

客户机上的JavaScript可能会因为多种原因而中断。浏览器可以是不支持的,这种连接可能是不稳定的。您的终端用户拥有的移动提供商可能会将其视为他们的工作,以便随时缩小和打包脚本。当javascript遇到一些它不理解的东西时——它会崩溃。它压缩了,没有显示任何东西,从而惩罚你的产品的用户为你的错误。或者其他人和脚本引入的错误,这些错误涉及到将代码交付给最终用户。

换句话说:

  • CSS-你运用你的风格,你希望它能奏效。
  • JavaScript-你可以控制样式,你可以也应该验证它的工作

CSS意味着拥抱网络的“无光泽”,作为Brad Frost说的。网络不是一个固定的画布,你可以在上面设置像素。很多事情都是你无法控制的:

  • 用户的浏览器
  • 决议,他们设备的像素密度和颜色设置
  • 它们的连接可靠性和速度
  • 它们的连接限制-资源阻塞是一个问题
  • 他们的字体大小和缩放需要
  • 他们机器上为您的产品提供的资源(是CPU已经燃烧了?)
  • 您的产品中的文本内容和图像大小的数量-CMS有人知道吗?

这可能会令人望而生畏,我们常常希望控制产品运行的环境——哪怕只是为了保持头脑清醒。这意味着尽管我们屏蔽了很多潜在用户。

在这个未知的环境中,我们必须决定谁来承担工作来处理其性能问题:

  • CSS-这是浏览器的工作,以执行良好,使用图形处理器资源和跳过功能。
  • JavaScript-测试支持是你的工作。为了确保渲染,油漆和回流速度很快。保持动画同步。

CSS在这方面做得非常好,浏览器制造商花了很多精力来调整界面性能。

那么我们为什么要低估CSS高估JavaScript的好处?我想有一件事要怪的是一款经典的ie浏览器。

CSS以及它坎坷的历史

CSS必须快速成长,并且没有得到浏览器的支持,浏览器需要一个可靠的工具。

CSS一开始是非常有限的,是作为视觉的替代品吗HTML和属性。离开所有的字体,告诉我们,排列,中心,人力资源和朋友。不加调试的浏览器支持和非常奇怪的错误对它没有帮助。我们知道事情不对,但我们无能为力。我们甚至不能问任何人,因为浏览器制造商无法获得反馈。

当iPhone问世时CSS这一天成了众人瞩目的焦点。“HTML5是未来”的故事需要很多额外的功能。苹果在那里发号施令,标准化花了太长时间,“只支持Webkit”。T

他的意思是加上前缀CSS再一次为不同的渲染引擎分叉。浏览器制造商进行了创新,并以前缀功能显示出了对其他浏览器的统治地位。作为开发人员,这意味着重复,并且必须为每个人选择一个支持计划。当然一个是支持老年人,过时的浏览器。这些围绕前缀的浏览器新战争引起了许多争论和混乱。

最后但并非最不重要的是直到最近CSS。相反,我们使用定位和浮动进行黑客攻击。定位,特别是在web上,绝对像素定位是不明智的。人们可以调整字体大小,内容也会重叠。使用浮动定位需要清除元素。

这不是你所说的可靠的底线,也不是如果你不是“网络原生代”就容易理解的底线

我们需要CSS不管浏览器支持如何工作

我们的解决方案是用JavaScript修补。我们可以读出条件并对它们做出反应HTML和应用样式。因为JavaScript是一种编程语言,所以我们可以完全控制正在发生的事情。我们有条件,循环,比较——程序员遗漏的所有东西CSS。这一点,在某种程度上是对CSS作为一个概念。匹配多个元素的选择器本质上是一个循环。我们甚至可以使用:nth-child()来定位集合中的元素。

在一般情况下CSS自从我们不得不使用javascript来修补它以来,它一直在飞速发展。特别是令人失望的浏览器支持是一个小得多的问题。

  • 常绿浏览器是一个东西——所有的浏览器都在一个恒定的升级路径上。我们甚至可以从浏必威体育下载览器制造商那里了解下一步该做什么。
  • 浏览器工具提供了详细的见解CSS适用于什么。我们甚至有可视化工具,如动画编辑器和颜色选择器。
    Bezier编辑器在Firefox Devtools
    火狐开发者工具有一个可视化的Bezier动画编辑器
  • CSS跨浏览器支持有很好的文档:caniuse.com是一种不可思议的资源。它不仅显示哪个浏览器和哪个环境支持什么。它还解释了实现中的错误,提供规范和bug报告的链接。它甚至有一个API将这些信息嵌入文档和开发人员工具中。
    我可以在Visual Studio代码的编辑器页脚中使用信息吗
    使用 "Can I use"分机Visual Studio代码您可以在编辑器中直接显示浏览器支持信息。当你编码必威体育下载的时候,你就知道你锁定了谁!
  • 我们支持几乎所有浏览器的通道和bug跟踪。有些甚至允许你这样做使用Twitter提交错误。浏览器开发团队在社交媒体上很活跃,也很容易联系到。
  • 预处理器萨斯是否加大了创新的力度CSS规范更快。就像今天jquery激发的javascript一样,这些会导致人们想要的功能。
  • 社区花了很多时间CSS更易于维护。类似方法面向对象的CSS通过妮可•沙利文原子设计通过布拉德·弗罗斯特已经存在很长时间了,应该有助于降低复杂性。

什么CSS能为你做什么

这里有一些惊人的事情CSS现在可以,您应该考虑使用。

计算CSS价值观

有一件事似乎总是遗漏CSS是一种计算值的方法。典型的例子是一个绝对定位的元素,它的宽度是100%,但是需要填充。在过去,我们需要通过嵌套另一个元素并对该元素应用填充来实现这一点。虽然我们可以用一段时间CSS钙()为此,应用计算宽度(100%–1em)。

计算跨浏览器很好地支持吗。使用它们不应该有任何疑虑。

媒体查询

CSS媒体查询允许您对文档视区的更改做出反应。从本质上说,它们意味着当视图满足某个条件时,应用样式表的一部分。这可以是一个至少有一定宽度或最多有一定高度的视口。您还可以检查屏幕的纵向或横向方向,或者文档是否为打印输出。
CSS媒体查询也有一个JavaScript中相等的matchMedia。这允许您按需加载内容。媒体查询的一个问题是,无论匹配与否,浏览器都以块的形式加载图像。

生成的内容

使用::之前后::伪选择器在CSS允许您创建纯可视的内容。这是一个很好的方法来确保那些出于表面原因的东西不需要自己的,空的DIV,请跨度,B或I元素。它是一种在样式表中而不是在脚本或HTML文档。你可以把它和投影配对,坡度和其他CSS创造视觉效果的功能…令人印象深刻的展示是”单人间DIV“。这个网站显示了从一个单独创建的几十个视觉效果DIV元素。

怪物的阴沉,股份有限公司。作为单个分区
这张图是单张 DIV使用生成的内容创建

动画和过渡

动画转变CSS是iPhone问世时的重大突破。转换允许您创建从一种状态到另一种状态的平滑更改。你不需要知道应该发生什么变化。您所告诉浏览器的只是要转换多长时间以及要使用什么缓动函数。动画提供了更细粒度的控制。你定义关键帧和什么应该动画如何。动画和过渡都触发事件之前,期间和之后。这允许您以可预测的方式与JavaScript交互。使用的好处CSS这是因为浏览器确保了动画的性能。这是通过在图形处理器和节流帧率,如果需要发生。这是确保用户手机电池寿命良好的重要一步。如果你用javascript制作动画,这很容易出错。

视口单元

当您想要详细定义体验时,媒体查询是有意义的。相反,您还可以使用viewport单元根据可用空间大小元素。视区宽度(vw)是整个视区宽度的百分比。在480px宽的屏幕上10vw是10%也就是48px。这和%单位不同,它是父元素的百分比,而不是viewport。嵌套百分比会变小,大众不会。视口高度(vh)是整个视口高度的百分比。您还可以使用vmin和vmax使自己独立于我的方向。这些要么取大众和vh中较小的要么取较大的。支持viewport单元的唯一一个小问题是,到目前为止Edge不支持vmin和vmax。

CSS技巧有一篇很棒的文章视区单元有多强大。从分辨率无关的嵌入到视口相关的排版,您可以使用视口单元来创建高度灵活的接口。

Flexbox

Flexbox是一种创建元素布局的方法吗CSS。从本质上说,它是所有那些声称布局表更容易被忽略的东西CSS-还有更多。可以将元素的子元素右对齐,左,顶部或底部。你可以定义它们来填充可用空间,每一个都使用相同的量或者比其他的多。您还可以定义它们来使用彼此之间或它们周围的可用空间。它就像它在罐头上说的那样灵活。如果你想要一个可视化的编辑器,Build With React有一个很棒的flex编辑器

使用flexbox的不同设置进行播放

还有一个游戏叫Flexbox不好的。它以一种令人愉快和容易理解的方式教授概念,并且对于孩子们来说是很好的开始CSS

柔体青蛙

关于flexbox的好话是一个佐伊Gillenwater在各种活动中捐款。我最喜欢的是Zoe展示了他们是如何在制作中使用Flexbox的。例子来自booking.com并显示不支持它的浏览器的回退。

CSS网格

如果flexbox是行或列中布局元素的答案,CSS网格把它提升到一个新的层次。使用它,你可以在一个已定义的网格中以二维的方式布局元素,行和列。Grid已经酝酿了一段时间,现在终于得到了全面的支持。

一个简单的网格示例
一些设置将一系列元素转换为灵活的网格

Grid的灵活性意味着有很多选项可供选择,因此看起来可能令人生畏。到目前为止,最简单的开始方法是瑞秋安德鲁“s”网格的例子“资源。这个有复制+粘贴网格布局的例子。它们中的许多都带有不受支持的浏览器的回退。培训视频解释了他们的来龙去去,使它成为一个惊人的资源。

如果你能更好地必威体育下载接受挑战,你可以把握CSS通过播放网格CSS网格花园

CSS网格花园
必威体育下载学会给胡萝卜浇水 CSS网格花园

有一些“必须看”的谈论CSS网格在线。第一个是”CSS网格布局“蕾切尔·安德鲁。

Jen西蒙斯正在采取一种不同的方法。在她的“真正的艺术指导在网上她向我们展示了Grid的多功能性是如何帮助我们打破“框布局”思维的。

混合和匹配网格和flexbox没有问题。它可以并且应该在其电池中使用Flexbox吗。一起,这些工具允许您创建灵活的布局。允许可变内容和更改以适应可用空间的布局。网络布局。

CSS自定义属性(变量)

最需要的特征之一CSS像Sass和Less这样的预处理器长期以来都是变量。现在我们有CSS自定义属性哪件事让我最兴奋CSS。您可以在文档中定义一次可重用的设置,并在整个文档中应用它们。最常见的使用案例是定制颜色和尺寸。但是您可以更进一步,定义字体和其他排版。您还可以使用它们来嵌套计算CSS。这在以前是不可能的。一个惊人的特性是,自定义属性也可以用JavaScript动态设置。

在JavaScript中读取和设置CSS自定义属性的示例
如何读写自定义 CSS带javascript的属性–(摘自Lea Verou的演讲)

如果你想了解必威体育下载CSS自定义属性有一个您不应该错过的谈话。李维鲁“s”CSS变量:var(-subtitle)“是信息的宝库。

CSS功能查询

另一个非常受欢迎的附加CSS功能查询。这些工作很像媒体查询。通过使用@supports,可以检查当前用户代理是否支持某个特性。然后定义一个块CSS只有在有功能支持时才会应用。这可能会让人觉得奇怪,因为CSS应该已经处理好了。它的作用是给你更多的粒度控制。它还允许您在不支持使用“not”关键字的特定特性时定义回退。

CSS和JavaScript ?

CSSJavaScript协同工作是强大的,也是正确的。至于CSS已经来了,它仍然不能做所有的事情。有些情况下CSS与我们想要达到的目标形成对比。

AS克里斯蒂亚诺·拉斯泰利在他的让和平继续CSS“说话,“关注点分离”的宝贵特性并不适用于模块世界。

组件世界中的关注点分离

CSS我们把所有的视觉、感觉和行为都移走了HTML进入之内CSS和JavaScript。我们要么在文档上定义,要么在项目范围内定义。我们庆祝这一事实CSS从父元素继承。当我们构建可以一致重用的组件时,我们不希望这样。我们要他们带着他们的表情,感觉和行为不会向邻近的人或从父母那里继承。

CSS和JavaScript一起工作在一个非组件的世界

在构建基于文档的解决方案时,没有理由不深入研究CSS。您可以并且应该使用JavaScript来提供信息CSS不能读到CSS。虽然这样做是谨慎的,以尽可能不打扰的方式。

制造的层次CSS在这个场景中,JS与另一个JS一起工作:

  • 使用CSS当你可以–使用你在这里看到的东西
  • 如果你需要沟通CSS,请考虑改变自定义属性
  • 如果这不是一个选择将类应用于父元素使用班级名册。
  • 作为最后的手段,你可以直接更改样式

将鼠标位置放入CSS的示例
这是一个很好的例子,展示了如何读取JavaScript中的鼠标位置并将其存储在其中 CSS自定义属性-(摘自Lea Verou的演讲)

当你动态改变样式时,请记住,您是在针对浏览器工作。在reflow中,每个样式更改都有相应的结果,渲染和绘画。保罗·刘易斯达斯苏尔马维护一个方便的指南称为CSS触发器。这个例子详细描述了CSS更改会导致对浏览器的惩罚。

CSS触发器
CSS触发器为您提供了不同样式更改的效果的信息

综上所述

CSS它比以前可靠多了,也没有多少不同之处。最重要的是要记住CSS不打算做JavaScript做的事情。甚至布局语言也不是这样工作的CSS满足同样的需求。这是一项非常艰巨的工作,而且做得很好。当你使用CSS,请无论最终用户的设置如何,浏览器都能帮助您满足他们的需求。这是web的一个核心原则,定义在W3C HTML设计原则:

用户高于作者,高于实现者,高于说明符,高于理论的纯粹性

我们的用户应该拥有平滑的界面,可靠,不破坏电池。所以,考虑CSS多一点。你可以偷懒,以社区的工作为基础。

激励和积极CSS要跟随的人

在研究这个话题的时候,我不断地回到由网络上优秀的人编写和维护的资源中。这里有一个简短的名单,没有特别的顺序,如果你想和你的CSS知识。我必须感谢他们每一个人。他们让网络对我们所有人来说都更容易。

我每天都受到这些人(爱别人)的鼓舞,希望你也能有同样的经历。

我的全息透镜的第一印象

周三,6月7日,2017年

克里斯·海尔曼带着全息透镜

也可在Medium上下载

我现在自豪地拥有一个HoloLens。我还没有正式接受过微软员工的培训。但我想分享设置和使用它的第一印象。

这些是我个人的印象,不是我公司的官方立场。我在这里分享我的第一个兴奋。我希望能让一些人理解这里发生的事情。

这也是一个用户观点因为我还没有开始为它开发,但这很快就会发生——承诺过。

全息透镜是独一无二的

首先,重要的是要理解全息透镜是非常独特的。每次我提到它,人们就开始把它比作神秘或生灵,但这些都不起作用。

一个精力充沛的,多摄像头移动在你的头上

HoloLens是一个你戴在头上的独立电脑。你不需要其他任何东西。它不是外围的,不需要其他计算机或服务器。这在考虑价格时很重要。很多虚拟现实耳机更便宜,但它们并不是混合现实,它们需要一台大型计算机才能运行。它甚至不需要一直连接互联网。仅仅因为你把它们戴在头上并不意味着你可以在地面上比较这些产品。

你应该像头上的手机一样计划编码CPU/GPU电源。规格很高,但它工作方式的要求是,也是。如果你为HoloLens公司建设,在你需要的资源上保持保守——你会让我高兴的。等待并不有趣,即使它是你房间里的浮动动画。

你的自然运动是一件大事

安科校准全息透镜
当你校准你的HoloLens时狗能想到的就是你拿着食物而不是花

全息透镜是一种利用头部和身体的自然运动来探索扩大空间的系统。这意味着你不会失去与现实世界的联系——你仍然可以通过设备看到它。你得到的是对周围环境和全息图的不断分析。你打开应用程序,要么在你面前使用它们漂浮,要么把它们停靠在墙上,等你看到墙的时候再使用。你把你的工作空间分配到你的生活空间——而不需要去宜家买家具。

这意味着您移动的方式和您查看的位置将成为软件可以与之交互的事件。“凝视”的姿态,“看某物”类似于鼠标悬停。“air tap”手势是点击或提交。

这样,相对于神秘或活体来说,你的视窗相对较小的尺寸就不那么重要了。当你的观察窗跟随你的头部移动时,你不会陷入其中。你不应该全盘接管。全息透镜是用来扩大世界的,而不是取代它。

你的整个身体现在是一个事件触发器。而不是学习键盘快捷键,必威体育下载你学习手必威体育下载势。或者你可以用你的声音。

手势vs。语音识别

你可以用你的手来选择和互动。或者你可以说“选择”来交互,“下一步”来在菜单中移动。语音识别一直开着,Cortana就在不远处。你可以用它来打开应用程序,搜索网络,研究,各种各样的事情。和我的手机通话对我来说还是很奇怪。我在安卓上,也许Siri是一种更好的体验。在我分布在家里各处的应用程序中,与语音通话感觉更自然。

空间声音

HoloLens有很多内置扬声器,可以让你听到来自各个方向的声音。这对于像RoboRaid这样的游戏来说是非常惊人的:

在片段中更是如此:

当使用扬声器时,虽然没有太多的隐私。当你靠近戴着它的人的时候,很容易听到HoloLens说什么。

如果你想要一个键盘,你可以有一个

如果你在网站或类似的地方输入了很多文本,你也可以搭配蓝牙键盘。或遥控器,之类的。一开始,在浮动键盘中输入相当安全的密码让我很恼火。但是我越习惯HoloLens的交互作用,变得越容易。

全新的互动方式

我不太喜欢虚拟现实,因为如果帧速率不理想,我很容易恶心。我也经常晕车,所以这不是什么值得期待的。我也感到被它所限制——它让我充满了在虚拟空间中错过周围事物的恐惧。我也不喜欢眼罩和耳塞。

HoloLens给我带来的唯一不舒服就是头上顶着一公斤重的东西。但你会习惯的。刚开始的时候,你还会感到在拍击空气时手指会抽筋,肩膀会疼。这意味着你做错了。你的动作越自然,全息透镜越容易理解你。抽头不需要完全移动。考虑一下举起你的手指,指着那些东西。就像打断会议一样。

出色的入职体验

让我“哇”的是你开始和霍洛伦一家合作的方式。这个团队在那里做得非常出色。就像iPhone问世时,苹果让人们习惯使用触控设备一样。建立一个HoloLens是一种发现的体验。

你打开手机,会出现一个友好的“hello”,Cortana的声音会告诉你该怎么做。你可以根据自己的需要来调整这个设备,使其适应你的眼睛。Cortana会一步一步地告诉你如何使用手势来找到方向。每一步都充满了友好的“干得好”的信息。当你陷入困境时,系统会告诉你不要担心,以后再回来。这是一次愉快的学习经历。必威体育下载

如何使用它

把猫的全息图放在狗身上

现在,我把厨房的橱柜当作工作台。Edge是其中之一,旁边是我每天的任务列表。我在房间的另一边有一些游戏。说到全息图,我们的狗碗上有一只猫,床上有一只独角兽给我们带来美好的梦想。因为我们可以。

Skype在全息镜头方面非常出色:

我有些烦恼

重要的是要记住关于全息透镜的一些事情:

  • 它不是一个消费设备,但目前是一个B2B工具。一方面是价格高。我们关注的是如何使用它,而不是玩游戏。
  • 它不是一个外部设备。HoloLens扫描你的环境并将其转换成网格。在创建网格后,它将网格存储在“空间”中,避免了持续扫描的需要。这意味着对空间的不断重新评估。这很贵,暂时不值得。所以街上那些烦人的谷歌玻璃人不会再出现了。看着一个不知道是否拍了你的人,仍然是一种不在意。
  • 我同意很多其他人应该有一种方法可以让多个用户帐户在一个HoloLens上存储校准信息。虽然你可以与HoloLens的其他用户分享经验,这将是伟大的移交它没有重新校准,并让别人访问我的Windows帐户。
  • 应该有一种方法可以用一个命令在一个空间中擦除所有的全息图。当你让别人玩你的设备时,你最终会遇到很多老虎,太空人和你的空间里所有你需要手动删除的东西。
  • 虽然拍摄视频和拍摄你的经历很容易,分享经验是非常基础的。你可以存储到OneDrive或Facebook上。没有发送或添加Twitter的选项。也就是说,Skype对此有所帮助。

这确实是一种更高级的体验

我相信在虚拟现实/现实/磁共振空间里会有很棒的东西。许多经验可能会更加详细和高保真。然而,我被这个设备的实用性所折服。我看到合作伙伴和公司已经使用它来计划架构项目。我看到人们如何在现场用Skype从办公室获得的指令修理设备。我闪回到《星际迷航》的全息甲板——我十几岁时喜欢的东西。

能够将你的物理空间用作数字画布是非常令人信服的。你不必离开你的公寓。当你进入网络空间的时候,你不会有撞到东西的危险。它应该是一种增强。几年后,当我的网络联系人和耳塞为我做同样的事情时,我可能会在这篇文章中轻笑。但是现在,我很高兴有机会尝试一下。