java jen部署_CSS布局：Jen Simmons的网格，区域和@Supports

java jen部署

In this episode of the Versioning Show, Tim and David are joined by Jen Simmons, Designer Advocate at Mozilla, award-winning podcaster and regular conference presenter. They discuss the future of CSS layouts with grids, regions and @supports, being a rebel with a cause in the workplace, and inventing French fry cheeseburgers with Houdini.

在Versioning Show的这一集中，Tim和David与Mozilla的设计师Advocate，屡获殊荣的播客和常规会议主持人Jen Simmons一同参加了会议。 他们用网格，区域和@supports讨论CSS布局的未来，成为工作场所的反叛者，并与Houdini一起发明炸薯条汉堡。

Visit the Versioning Show Home Page

访问版本控制显示主页

Subscribe on iTunes | Subscribe on Stitcher | View All Episodes

在iTunes上订阅 | 订阅Stitcher | 查看所有剧集

显示笔记 (Show Notes)

• Jen on Twitter: @jensimmons

  仁在推特上： @jensimmons

• JenSimmons.com

  JenSimmons.com

• Jen’s podcast The Web Ahead

  仁的播客未来的网络

• Jen’s Experimental Layout Lab: labs.jensimmons.com

  仁的实验版图实验室： labs.jensimmons.com

• CSS Regions

  CSS 区域

• CSS Working Group

  CSS工作组

• CSS Regions Considered Harmful

  CSS地区被认为有害

• Safari Technology Preview

  Safari技术预览

• Houdini

  胡迪尼

• Net Award for Podcast of the Year

  年度播客网络奖

• CodePen Radio

  CodePen电台

• More Twitter links: @mdavidgreen | @tevko | @versioningshow | @sitepointdotcom

  更多Twitter链接： @mdavidgreen | @tevko | @versioningshow | @sitepointdotcom

对话重点 (Conversation Highlights)

And so it felt to me like I was breaking rules. And the more I did that, the more the people around me loved me. They were like, “You’re awesome!”

因此，我觉得自己在违反规则。 而且我做得越多，周围的人就越爱我。 他们就像，“你真棒！”

I was like, “Oh, I thought I was gonna get in trouble!” But instead, I would get a promotion …

我当时想，“哦，我以为我会遇到麻烦了！” 但是相反，我会得到升职……

---

---

Look around and see what you can do. If you want to do better work, and you see an opportunity, just grab it, and hopefully you won’t get in trouble, and you will be valued for the quality of your effort, and your craftsmanship.

环顾四周，看看你能做什么。 如果您想做得更好，而您发现了机会，那就抓住它，希望您不会遇到麻烦，并且您会因其努力的质量和Craft.io而受到重视。

---

---

I forget that people, when they use the word designer, mean eye-candy specialist, because that’s not how I see a designer at all.

我忘记了人们，当使用设计师一词时，是指糖果专家，因为我根本不是这样看设计师的。

---

---

I do think at some point, if you’re really in a place where you’re miserable, and the people around you are doing crappy work, and no matter what you do you’re not able to do better work, maybe you want to quit, right?

我确实认为在某个时候，如果您真的在一个痛苦的地方，周围的人在做糟糕的工作，无论您做什么，都无法做得更好，也许您想要退出吧？

Find a team where it’s a better fit, where other people also want to do good work, and you’re able to thrive and have the people around you be better than you, and inspire you, and challenge you to do better work, instead of constantly pushing you down to do worse work.

寻找一个更合适的团队，其他人也想做好工作，并且您能够蓬勃发展，让周围的人比您更好，并激励您，并挑战您做得更好。不断压低你做更糟糕的工作。

---

---

I’m gonna invent French fry cheeseburger, I want every browser to support French fried cheeseburger, because I can do this cool thing in CSS and nobody does. So, instead of simply talking about it or writing up a spec or going to the Working Group and hoping they’ll write up the spec, I’m going to implement it using JavaScript and this Houdini API.

我要发明炸薯条汉堡，我希望每个浏览器都支持炸薯条汉堡，因为我可以用CSS做到这一点，而且没人能做到。 因此，我将不再使用讨论或编写规范或去工作组并希望他们编写规范，而是使用JavaScript和此Houdini API来实现它。

---

---

I think the CSS Working Group is amazing. I think this amazing miracle happens there, where really smart people have long conversations that take a long time to come up with a really, really good tool — and then it ships into browsers. And I don’t want that conversation to go away. I want that conversation to keep going.

我认为CSS工作组很棒。 我认为这个神奇的奇迹发生在那儿，在那里， 真正聪明的人进行了长时间的交谈，需要很长时间才能提出一个非常非常好的工具- 然后将其运送到浏览器中。 我不希望那个对话消失。 我希望谈话继续进行。

成绩单 (Transcript)

Tim: 蒂姆：

Hey, what’s up, everybody, this is Tim Evko …

嘿，大家好，我是Tim Evko……

David: 大卫：

… and this is M. David Green …

…这是大卫·格林(M. David Green)…

Tim: 蒂姆：

… and you’re listening to episode number six of the Versioning Podcast.

…，您正在收听Versioning Podcast的第六集。

David: 大卫：

This is a place where we get together to discuss the industry of the web from development to design — with some of the people making it happen today and planning where it’s headed in the next version.

在这里，我们可以聚在一起讨论从开发到设计的网络行业，其中一些人将其付诸实践，并计划下一版的发展方向。

Tim: 蒂姆：

With us today we have Jen Simmons, and we’re going to be talking all about her show, The Web Ahead, and CSS, and whatever else we can think about. So we’re going to go ahead and get this Versioning started.

今天和我们一起有Jen Simmons，我们将谈论她的节目， The Web Ahead和CSS，以及我们能想到的其他所有内容。 因此，我们将继续进行此版本控制。

Jen, thanks for joining us. How are you doing today?

仁，谢谢您加入我们。 今天过得好吗？

Jen: 仁：

Good.

好。

David: 大卫：

Great, we’re really excited to have you here. And before we get started, one of the things we like to do with all of our guests is ask a philosophical question. Since this is the Versioning Show, in your current career, what version do you think you are, and why?

太好了，很高兴您能来这里。 在我们开始之前，我们希望与所有客人一起做的一件事就是提出一个哲学问题。 由于这是版本显示，因此在您当前的职业中，您认为自己是哪个版本，为什么？

Jen: 仁：

I don’t know, version 15, 17? I don’t know, something fairly high.

我不知道，版本15、17？ 我不知道，有些高。

David: 大卫：

That’s impressive! How did you get that high?

这很让人佩服！ 你怎么这么高？

Jen: 仁：

I started a new version quite a few times.

我多次启动新版本。

Tim: 蒂姆：

Would you mind giving us an introduction into some of the things that you’re involved in?

您介意向我们介绍您所涉及的一些事情吗？

Jen: 仁：

Yeah, so these days I am a Designer Advocate at Mozilla, which means that I spend my time really teaching designers and developers — both, really — best practices around CSS, design, layout … And going to a lot of conferences, speaking at a lot of places, keeping an eye on what’s happening, and then taking a lot of the feedback from people who make websites back into Mozilla and helping to shape Firefox.

是的，所以这些天我是Mozilla的Designer Advocate，这意味着我花了很多时间真正地教设计师和开发人员-实际上，都是关于CSS，设计，布局的最佳实践……并参加了很多会议，在在很多地方，关注发生的事情，然后从使网站重新回到Mozilla并帮助塑造Firefox的人们那里获得大量反馈。

And these days — really it’s been the last three years — I’ve been focusing on layout design, page layout, what’s possible, graphic design, sort of looking at what we used to do. Kind of the history of layout design, and where it is that I think we’re going to be headed in the future.

这些天-确实已经过去三年了-我一直专注于版式设计，页面版式，可能的内容，图形设计以及对我们过去所做工作的了解。 布局设计的历史，以及我认为未来的发展方向。

David: 大卫：

Well, the obvious question is: where do you think we’re going to be headed in the future?

那么，一个显而易见的问题是： 你在哪里认为我们将在未来的领导？

Jen: 仁：

At the very beginning, we didn’t really do any sort of layout on webpages; there really weren’t any tools whatsoever to do that.

从一开始，我们实际上并没有对网页进行任何布局； 确实没有任何工具可以做到这一点。

And then we started using tables for layout. Maybe some of your listeners remember the days when we would use HTML tables to position things on the page and kind of put them where we wanted them on the page. But there are good reasons to never do that. Really, we need to separate the styling from the actual content, or the stuff that is the page itself: that should be in HTML, and the styling should be in CSS.

然后我们开始使用表格进行布局。 也许您的某些听众还记得我们使用HTML表将内容放置在页面上并将它们放置在页面上所需位置的日子。 但是有充分的理由永远不要这样做。 确实，我们需要将样式与实际内容或页面本身的东西分开：应该使用HTML，而样式应该使用CSS。

And CSS got invented, and the industry started shifting to that kind of separation of concerns. We were using floats mostly to do layout, and there really were only a handful of things that we could possibly do. And we got kind of stuck in this rut of having a header and a sidebar and a footer and a main content column, and just laying out every single solitary website like it’s a blog.

CSS发明了，整个行业开始转向关注点分离。 我们主要使用浮点数进行布局，实际上只有少数几项我们可以做。 而且，我们陷入了这样的困境：拥有页眉，侧边栏，页脚和主要内容列，并且仅布置每个单独的网站(例如博客)。

Or now, these days, we do a lot of landing page designs, where you’ve got kind of a big hero graphic, three objects underneath the hero graphic, and then the next section is split into two halves. And then something further down is like four in a row.

或现在，这些天，我们进行了许多着陆页设计，在其中，您会得到一个大英雄图形，该英雄图形下方有三个对象，然后将下一部分分为两半。 然后再往下走，就像是连续四个。

And each of those is like a row where they’re lined up with a row; everything in that row is lined up with the other things in that row. And not stuff you see quite so dominant in magazine design or in poster design, or in newspaper design, or any other medium. It just seems like we have these very small number of layouts.

每一个都像一行，它们排成一行。 该行中的所有内容与该行中的其他内容对齐。 而且，在杂志设计，海报设计，报纸设计或任何其他媒介中，您所看到的东西并不是那么占主导地位。 看起来我们的布局数量很少。

But, we got that way in part because of the tools that we had. We couldn’t do a lot of the things that we wanted to do with layout, because of the limitations of CSS. But those limitations are about to change, or really they actually have already started changing.

但是，我们之所以能够做到这一点，部分原因在于我们拥有的工具。 由于CSS的局限性，我们无法做很多我们想做的事情。 但是这些限制即将改变，或者实际上它们实际上已经开始改变。

There’s a lot of new tools in CSS that are coming out this year, next year, or have come out in the last two or three years that we can use to do much more interesting page designs.

CSS的许多新工具将于今年，明年或在最近的两三年中问世，我们可以使用它们来做更多有趣的页面设计。

And I just think a lot of people haven’t heard about them. They don’t know the kinds of things you can do. So what do I think is going to come in the future? I think especially once CSS Grid is shipped, it will let us really do something very, very, very different with our page layouts.

我只是认为很多人都没有听说过它们。 他们不知道您可以做什么。 那么我认为将来会发生什么？ 我认为特别是CSS Grid交付后，它将使我们真正在页面布局方面做得非常非常不同。

David [4:08]: 大卫[4:08] ：

I know one of the things that has kept people from moving forward has been the sort of staged way that things get rolled out, from only working in one browser, only working in certain versions of browsers, only working with people who have upgraded to such and such version of Internet Explorer or whatever.

我知道，阻碍人们前进的一件事就是这种逐步推广的方式，即只能在一个浏览器中工作，只能在某些版本的浏览器中工作，仅与升级到此类浏览器的人一起工作。以及该版本的Internet Explorer或其他版本。

I’m sure that that’s one of the challenges that you see with getting these things rolled out to people.

我敢肯定，这是将这些东西推广给人们所面临的挑战之一。

Jen: 仁：

Yeah, the web has evolved over the last 25 years. It isn’t what it used to be. It’s pretty miraculous in some ways the way that it has evolved, especially HTML and CSS.

是的，网络在过去25年中得到了发展。 它不是以前的样子。 在某些方面，它是非常神奇的，特别是HTML和CSS。

Because of the nature of the languages — because they’re declarative programming languages — there’s a way in which we’re able to keep adding new syntax, new properties to those languages and have old websites still work. You don’t see that a lot in software development. If you wanted to download an iPhone app from 2009, it’s not going to run on your current 2016 iPhone. Or vice versa: you can’t take your 2016 iPhone app and run it on 2009 iPhone — or never mind run that app on an Android device, or another kind of phone. There’s a way in which each piece of software in that context is written specifically for a certain device, at a certain version number, in a certain time. And then, if you try to put it somewhere else, it just doesn’t work.

由于语言的性质(因为它们是声明性编程语言)，我们有一种方法可以继续向这些语言添加新的语法，新的属性，并使旧的网站仍然可以正常工作。 您不会在软件开发中看到很多东西。 如果您想从2009年下载iPhone应用程序，那么它将无法在当前的2016年iPhone上运行。 反之亦然：您不能将您的2016 iPhone应用程序带到2009 iPhone上运行，也别介意在Android设备或其他类型的手机上运行该应用程序。 有一种方法可以在特定时间内在特定版本中为特定设备专门编写该上下文中的每个软件。 然后，如果您尝试将其放置在其他位置，它将无法正常工作。

But the web is not like that. You can take a website from 2005 or 1995 and open it up in a web browser today, and it still works. Or you can take a website from now, and if it’s well coded — if it’s written correctly — honestly, you could open that up in a super old browser, and a lot of the parts of it might not work the way that the people who made it want it to work but, hopefully the basic purpose of the website — the reason the website exists — would totally work, and you could use it.

但是网络不是那样。 您可以使用2005年或1995年的网站，今天就可以在网络浏览器中打开它，但仍然可以使用。 或者，您也可以从现在开始访问一个网站，并且如果它的编码正确(如果书写正确)，说实话，您可以在一个超级旧的浏览器中打开它，其中的许多部分可能无法像那些使其可以正常工作，但希望网站的基本目的(网站存在的原因)可以完全正常工作，您可以使用它。

There’s a way in which, if you build your website that way, you’re going to be able to handle a plethora of different kinds of situations. Phones you’ve never heard of, if somebody’s got a brand new gaming console, and they bring it home and they’re opening up your website on their web browser on their gaming console, and you never even thought about gaming consoles when you built your website — you never tested them …

如果您以这种方式构建网站，则有一种方法可以处理多种不同情况。 您从未听说过的电话(如果有人使用了全新的游戏机)将它们带回家，并通过其游戏机上的网络浏览器打开了您的网站，而您甚至在构建游戏机时也从未想过您的网站-您从未测试过它们……

If you’ve built a good site with progressive enhancement, with HTML, CSS and JavaScript each doing their own job, and not trying to do the job of the other one, your site’s just going to work.

如果您构建了一个具有逐步增强功能的优秀网站，并且HTML，CSS和JavaScript各自完成了自己的工作，而没有尝试去完成另一个网站的工作，那么您的网站就可以正常工作。

So, what does that mean for new CSS properties? It means that when new CSS properties come out, there is a period when that new property is not going be supported in current browsers that people are using, or the older version of the browser people are still using because they haven’t upgraded their browser yet. But, if you know how to write your code, and you do it well, it’s still going to be OK.

那么，这对于新CSS属性意味着什么呢？ 这意味着当出现新CSS属性时，有一段时间会在人们正在使用的当前浏览器中不支持该新属性，或者由于人们尚未升级浏览器而仍在使用旧版本的浏览器然而。 但是，如果您知道如何编写代码，并且做得很好，那仍然可以。

This is harder for full-page layouts. It’s easier when you’re talking about something like rounded corners. The browsers that understand rounded corners will get the rounded corner. The browsers that do not understand the rounded corners will show square corners. And if you’re OK with that … I know some people’s bosses are not OK with that, but they really should be OK with that. “Hey, you asked for a rounded corner, you’re probably going to get it, buuuut you might not get it …”

对于全页面布局而言，这更难。 当您谈论圆角之类的内容时，它会更容易。 了解圆角的浏览器将获得圆角。 不了解圆角的浏览器将显示方形角。 如果您对此表示满意，...我知道有些人的老板对此并不满意，但他们确实应该对此表示满意。 “嘿，您要求一个圆角，您可能会得到它， 但是可能您没有得到它……”

It’s OK, it’s not going to break the website: people can still book an airline ticket, they can still read the news article, they can still send a message to a friend — they just might do it with a square corner instead of a rounded corner, right?

没关系，它不会破坏网站：人们仍然可以预订机票，他们仍然可以阅读新闻文章，仍然可以向朋友发送消息-他们可以用一个方形的角而不是一个圆形的角角落吧？

So, with Grid, though — with full-page layout — you might think, “Well, what are we going to do for the entire page layout?” And I think we’re going to go through a period where we’ll be able to write fairly simple code for browsers that do not understand Grid — maybe do a single column layout, do something kind of not complicated — and then layer in Grid code for the browsers that understand, and take that code, along with any other code that needs to go with it — maybe you’re using different margins, or you’re using different kinds of topography — and wrap all of that up in a feature query.

因此，对于Grid，如果使用整页布局，您可能会想，“嗯，我们要对整个页面布局做什么？” 而且我认为我们将经历一段时期，我们将能够为不了解Grid的浏览器编写相当简单的代码-也许做单列布局，做一些不复杂的事情-然后在Grid中分层理解并接受该代码的浏览器的代码，以及需要与之配合的任何其他代码-也许您使用的是不同的边距，或者您使用的是不同的地形-并将所有这些都包装在一个功能查询。

This @supports syntax, that’s a little statement — a question in CSS — that says, “Hey, do you support this property? If so, run all of this code; if not, skip all of this code.”

这是@supports语法，这是一个小声明-CSS中的一个问题-说：“嘿，您支持此属性吗？ 如果是这样，请运行所有这些代码。 如果没有，请跳过所有这些代码。”

David [8:16]: 大卫[8:16] ：

I could see that. And since you’re coming from a designer advocacy perspective, it seems to me, historically, there have always been issues with designers thinking in a static way.

我可以看到。 而且由于您是从设计师倡导的角度出发的，所以在我看来，从历史上看，设计师始终以静态方式思考问题。

And I’m wondering if there’s a new generation of designers coming up that you’re seeing who are capable of looking at a design and seeing all of the ways that it can progressively enhance, or intelligently degrade, depending on context.

而且我想知道是否出现了新一代的设计师，您看到的是谁有能力查看设计，并根据上下文查看可以逐步增强或智能降级的所有方法。

Jen: 仁：

I believe, very deeply, that if you’re designing for the web as a medium, there is a way in which you need to understand this is how it works.

我深深地相信，如果您以网络为媒介进行设计，则需要一种方法来理解其工作原理。

Everybody’s using a different computer to go to your website. Some people aren’t even looking at the site; some people are only going to hear the site. Some people are going to read it visually, but they’re not going to get any of your styling, because they clicked a button and sent it to Instapaper or Pocket, or Read It Later, or they switched the browser into Reader mode.

每个人都在使用其他计算机访问您的网站。 有些人甚至没有看现场。 有些人只会听这个网站。 有些人将以视觉方式阅读它，但是他们并不会得到您的任何样式，因为他们单击了一个按钮并将其发送到Instapaper或Pocket，或稍后阅读，或者将浏览器切换到阅读器模式。

So they’re going to get a completely different visual styling than the one that you originally shipped the website with. We don’t control that; the user controls that. We don’t have a say as to whether somebody uses their phone, or a tablet, or a laptop, or a desktop computer, or a fancy new screen with super high-quality pixels, and tiny, tiny pixels, and high-quality color.

因此，它们将获得与您最初随附网站时完全不同的视觉样式。 我们无法控制； 由用户控制。 对于有人使用手机，平板电脑，笔记本电脑，台式机还是精美的具有超高像素，超小像素和高品质的新屏幕，我们没有任何发言权颜色。

Or they’re using some old machine that’s got giant pixels, and not nearly as many colors. It’s going to look different in every browser; it’s going to look always slightly different. So I think when people are “designing a website”, and they open up Photoshop and they start drawing pictures of what they think their website is going to look like when they’re done, that could be a handy stage.

或者他们正在使用一些旧的机器，这些机器的像素很大，而颜色却不多。 在每种浏览器中它看起来都会有所不同。 它看起来总是略有不同。 因此，我认为当人们在“设计网站”时，他们打开Photoshop并开始绘制他们认为完成后的网站外观的图片，这可能是一个方便的阶段。

It can be helpful to use that tool if you’re familiar with it. I don’t know; a lot of people like it, go for it, use it. But don’t fall under the delusion that the website will ever look like that Photoshop drawing, because it won’t. Photoshop renders fonts very differently than web browsers do.

如果您熟悉该工具，则可能会有所帮助。 我不知道; 很多人喜欢它，去使用它。 但是请不要误以为该网站看起来永远不会像该Photoshop绘图那样，因为它不会。 Photoshop呈现的字体与Web浏览器呈现的字体非常不同。

You’re probably in a different color space, especially if you forgot to put RGB in your CMYK color space or something. It’s really easy for no one — for 0% of your audience — to have the same experience as you have when you’re looking at a Photoshop document.

您可能处在不同的色彩空间中，尤其是如果您忘记将RGB放入CMYK色彩空间或其他内容中时。 没有人(对于0％的观众)来说，获得与查看Photoshop文档时相同的体验确实很容易。

And so what you’re designing is a prescription, in a way, of a whole lot of ideas of how you want it to go, but you’re not completely sure which combination any one person’s going to get.

因此，从某种意义上说，您正在设计的是关于如何实现它的很多想法的处方，但是您不能完全确定任何人将获得哪种组合。

This article’s got to have more words in the headline, and so the photo’s not going to be nearly as good as the photo in your original design. This other example over here, there’s three authors instead of one author, so what happens to the place where the authors' names get listed? Is that still going to work out when the content isn’t what you expect it to be? That’s the job of a web designer, because we’re designing for the web.

本文的标题必须有更多的用词，因此照片的质量将不及原始设计中的照片。 在这里的另一个示例中，有三位作者而不是一位作者，那么列出作者姓名的地方会怎样？ 当内容不是您期望的那样时，还是可以解决吗？ 这是Web设计师的工作，因为我们正在为Web设计。

Tim: 蒂姆：

I definitely like the idea of designing for the worst-case scenario, because all too often in my work — and I imagine everybody else’s work — you get that perfect design, everything looks great, and then you implement it and the title is just ten characters too long, and everything is then weird …

我绝对喜欢针对最坏情况进行设计的想法，因为在我的工作中(我想像其他所有人的工作)时常发生，您会得到完美的设计，一切看起来都很棒，然后您实施它，标题只有十个字符太长，然后一切都变得异常…

Jen: 仁：

Yeah.

是的

Tim: 蒂姆：

Then come all those on-the-fly adjustments that we developers love so much. [Laughs]

然后，我们开发人员非常喜欢的所有这些即时调整。 [笑]

Jen: 仁：

Yeah, I think as front-end developers sometimes — especially in the days when the whole design would arrive as a PDF in an email —

是的，我认为有时作为前端开发人员-尤其是在整个设计将以PDF格式发送到电子邮件中的日子-

Tim: 蒂姆：

God!

神！

Jen: 仁：

— and you’re supposed to reverse engineer with these pictures of what it’s supposed to be; you’re supposed figure out what the website’s supposed to actually be, based on these pictures.

—并且您应该对这些应该是的图片进行逆向工程； 您应该根据这些图片弄清楚网站的实际含义。

And you start reverse engineering it, and yeah, you’re like, “Wait, you used lorem ipsum text, and you have exactly the same number of characters in every single one of these examples. What happens when it’s longer, what happens when it’s shorter, what happens when the photo’s not this aspect ratio? Are we designing a system that allows for those things, or are we designing a system that forces people to always make their photos exactly this aspect ratio?”

然后开始对其进行逆向工程，是的，就像，“等等，您使用了lorem ipsum文本，并且在这些示例中的每个示例中，您都拥有完全相同数量的字符。 较长时会发生什么，较短时会发生什么，而照片不是此长宽比时会发生什么？ 我们是在设计一种允许这些情况发生的系统，还是在设计一种迫使人们始终使他们的照片始终与此比例相同的系统？”

There’s a whole conversation to be had about the design, and I want designers involved in that part of the conversation. I don’t want it to just simply be front-end developers making decisions by themselves, without discussing it with anyone, without the client seeing the results.

关于设计 ，有一个完整的讨论，我希望设计师参与其中的那一部分。 我不希望它只是前端开发人员自己做出决定，而不与任何人讨论，而客户看不到结果。

So I think that kind of process, where everybody’s in separate rooms and working on this in separate months, and not even meeting, and the only communication is a PDF that gets emailed back and forth — that never worked. And especially in the age of all these different screen sizes, and responsive web design, and now with all the new layout technology that’s coming, it really doesn’t work now.

因此，我认为这种过程中，每个人都在不同的房间里并在不同的月份中进行此工作，甚至没有开会，并且唯一的交流是通过电子邮件来回收发电子邮件的PDF —从未奏效。 尤其是在所有这些不同的屏幕尺寸和响应式网页设计时代，以及现在即将出现的所有新版式技术的时代，它确实现在不起作用。

Tim [12:50]: 蒂姆[12:50] ：

Yeah, very true. So, speaking about design, can you go into a little bit about how you got started in this career field, as well as what it means to be a designer advocate for Mozilla?

是的，非常正确。 因此，谈到设计，您能否谈谈您在这个职业领域的起步方式，以及成为Mozilla的设计师倡导者意味着什么？

Jen: 仁：

Yeah, how did I get started. I majored in sociology in school. I was a theater (almost) major, I minored in Math, and I graduated and went into theater. So I was doing a lot of theater design, a lot of theater tech. Lights, sounds, sets, working as a carpenter, as an electrician in some of the bigger theaters, and then in some of the smaller theaters, getting a chance to do some design work.

是的， 我是如何开始的。 我在学校主修社会学。 我当时是戏剧(几乎)专业，我修读数学，然后毕业进入剧院。 所以我做了很多剧院设计，很多剧院技术。 在一些较大的剧院中，然后在一些较小的剧院中，灯光，声音，布景，作为木匠，电工的工作，都有机会进行一些设计工作。

I worked in nonprofit arts world, and did 300 shows in eight years. While I was running that particular nonprofit, I did all the graphic design work — although we didn’t call it graphic design, we called it “desktop publishing”. And it just made sense, when the web came along, for me to learn the web technology as well.

我曾在非营利性艺术界工作，并在八年中参加了300场演出。 当我经营那个非营利组织时，我完成了所有图形设计工作-尽管我们没有将其称为图形设计，但我们将其称为“桌面发布”。 当网络出现时，对我来说也学习网络技术是很有意义的。

So I built that nonprofit’s website, and really enjoyed it. I loved the combination of design and coding. I had done a lot of coding in high school, and I hadn’t done it in a while so it was cool to get back to it. And then I just kept going as I was working, and just kind of worked my way into focusing more and more and more on web design itself.

因此，我建立了该非营利组织的网站，并非常喜欢它。 我喜欢设计和编码的结合。 我在高中时做过很多编码，而且我有一段时间没有做过编码了，所以回到它上面很酷。 然后我一直在努力工作，并且越来越努力地将注意力集中在网页设计本身上。

Did some work for Google, I did a bunch of the front-end design on CERN, the new CERN websites. I don’t know, a bunch of clients, too many to remember at this moment. And then, yeah, last year I got this job at Mozilla in the Developer Relations team. So some of my colleagues call themselves “developer advocates”; “developer evangelists” sometimes is the job title.

为Google做过一些工作，我在CERN(新的CERN网站)上做了很多前端设计。 我不知道，目前有很多客户无法记住。 然后，是的，去年，我在开发人员关系团队的Mozilla担任了这份工作。 因此，我的一些同事称自己为“开发者拥护者”。 有时，“开发人员传播者”的职称是。

I like the words “advocate” better than “evangelists”, and I like being a designer advocate — because I feel, if we really want to do great work, if we really want to help people make better websites, then we want to be talking to developers, and designers, and strategists, and executives, and content folks.

我更喜欢“提倡者”而不是“讲故事的人”，而且我喜欢当设计师的拥护者。因为我觉得，如果我们真的想做出色的工作，如果我们真的想帮助人们制作更好的网站，那么我们希望成为告诉开发人员和设计师， 以及战略家和高管， 以及内容的乡亲。

Because it takes all of us doing great work to end up with a great result. You can’t only focus on engineers and expect that somehow the site’s going to be fast, when the problem is not that the engineers don’t know how to make fast code; it’s that the ad network puts all this bloat on the page, or the designer picked five fonts and so, right?

因为这需要我们所有人都做出色的工作，才能取得出色的结果。 当问题不在于工程师不知道如何编写快速代码时，您不仅可以专注于工程师并期望网站以某种方式快速发展。 是广告网络把所有这些东西都放到了页面上，还是设计师选择了五种字体，对吧？

Everybody needs to think about performance, everybody needs to be talking about any one of these topics to make it really successful.

每个人都需要考虑性能，每个人都需要谈论这些主题中的任何一个，以使其真正成功。

David: 大卫：

I agree 100%. And especially nowadays, the term “designer” is expanding so much. It used to mean you would think just a visual design, or a graphic designer. And now “designer” often gets involved in every aspect — from user experience testing, through the launch, and all the way through, making sure that a product really meets the needs of the business.

我同意100％。 尤其是在如今，“设计师”一词正在不断扩展。 它曾经意味着您会认为只是视觉设计或图形设计师。 现在，“设计师”通常涉足各个方面-从用户体验测试到发布，一直到整个过程，以确保产品真正满足业务需求。

Jen: 仁：

Yeah, I forget that people, when they use the word designer, mean eye-candy specialist, because that’s not how I see a designer at all.

是的，我忘记了当人们使用设计师一词时，是指糖果专家，因为我根本不是这样看设计师的。

It’s one of many things that somebody does, but it’s almost like thinking that a developer or an engineer is only in charge of the repo and deploying the repo on the live server — like the sysadmin stuff, where a developer’s doing all these other things as well.

这是某人要做的许多事情之一，但几乎就像是认为开发人员或工程师仅负责回购并在实时服务器上部署回购一样，就像sysadmin一样，开发人员在做所有其他这些事情。好。

Designers really are thinking about the audience for that site; and what do they need? What do they want? How are we going to get that to them? And part of that is, how do we communicate the story that we want to communicate by using visual graphics — through art direction, through fonts and color, and those kinds of things?

设计师确实在考虑该站点的受众。 他们需要什么？ 他们想要什么？ 我们如何将其传达给他们？ 其中的一部分是，我们如何使用视觉图形传达要传达的故事-通过艺术指导，字体和颜色以及诸如此类的东西？

Because those matter, and they tell a story, they create a feeling about the site, and they create an experience when someone goes to a site and they see that styling.

因为这些很重要，并且他们讲述了一个故事，所以他们给人一种对网站的感觉，当有人访问网站并看到这种样式时，他们就可以创造一种体验。

They get a sense of where they are based on that styling. But it’s just one tiny piece of design — the layout of the page, the content, the choices of what the content’s going to be. And the interfaces: where are the buttons? What are they? How many buttons do we have? How does the navigation work? Do we have navigation? Where is it? All of those decisions all factor into the design.

他们可以根据样式确定他们的位置。 但这只是设计的一小部分-页面的布局，内容，内容的选择。 界面：按钮在哪里？ 这些是什么？ 我们有几个按钮？ 导航如何工作？ 我们有导航吗？ 它在哪里？ 所有这些决定都将影响设计。

Tim [16:51]: 蒂姆[16:51] ：

So, you mentioned a lot of solutions to problems, like getting a PDF tossed over the fence, or getting five fonts in a PSD or Sketch file.

因此，您提到了很多解决问题的方法，例如将PDF扔到栅栏上，或者在PSD或Sketch文件中获取五种字体。

What advice would you have for developers or designers who find themselves in atmospheres or companies where those problems tend to persist?

对于那些发现自己在那些问题持续存在的氛围或公司中的开发人员或设计师，您有什么建议？

Jen: 仁：

Yeah. Any one of us has the the opportunity to cross a fence. You can even show up at a meeting that you weren’t invited to, but you could also stand up from your desk and walk over across the room and ask the person.

是的 我们每个人都有机会越过篱笆。 您甚至可以出现在没有邀请您参加的会议上，但是您也可以从办公桌上站起来，走过整个房间，问那个人。

I was working as a front-end developer on a big team, where I still to this day have no idea who designed that project, because we were never allowed to meet any of those folks. We didn’t have their emails — nothing. We just got these PDFs, and we were supposed to figure everything out.

我当时是一个大型团队的前端开发人员，至今我仍然不知道该项目的设计者，因为我们从未被允许与这些人见过面。 我们没有他们的电子邮件-没什么。 我们刚得到这些PDF，并且应该弄清楚所有内容。

And I had no authority. I wanted to get groups of people together to make decisions. And I wanted to architect our content types, and architect the naming conventions that we were using as a group of developers — and I couldn’t even get any momentum around that.

而且我没有权限。 我想让一群人一起做决定。 而且我想设计我们的内容类型，并设计我们作为一组开发人员使用的命名约定，而我什至无法获得任何动力。

But what I could do was get up from my desk, and walk over to the people who were going to be adding content to the website — because they were actually in the same floor, they were in the same building, on the same floor as we were. And I would ask them, “What do you want this to be named?”

但是我所能做的就是从办公桌上站起来，走向那些要向网站添加内容的人，因为他们实际上在同一层，同一栋大楼，在同一层我们曾经。 我会问他们，“您要如何命名？”

And I knew I was only affecting my work, and I wasn’t affecting the entire team, but I would go ask them, and I’d just be, like, “Well, this is for you all.”

而且我知道我只是在影响我的工作，并没有在影响整个团队，但我会去问他们，我只会说：“嗯，这是给你们所有人的。”

And I think we should have done this, I think we should have had a big meeting where everybody got together and did this as an overall, overarching process, having architected the whole thing.

我认为我们应该做到这一点，我认为我们应该召开一次大型会议，使每个人都聚在一起，并作为整体的总体过程来完成整个工作。

But I can at least just do this little bit, and walk over and get out from behind this wall I’m supposed to be behind. And sometimes I felt like I was really going to get in trouble; I think I got to a place where I kind of didn’t care, at that job, if I got in trouble or not.

但是我至少可以做一点点，然后走过去从我应该落后的那堵墙后面走出来。 有时我觉得我真的要惹麻烦了； 我认为我到了一个我不在乎的地方，在这份工作中，是否遇到麻烦。

I just wanted to do the best work I could. I knew I wasn’t going to be there super long, because it was kind of driving me crazy. And so it felt to me like I was breaking rules. And the more I did that, the more the people around me loved me. They were like, “You’re awesome!”

我只是想尽我所能。 我知道我不会在那里待得太久，因为那会使我发疯。 因此，我觉得自己在违反规则。 而且我做得越多，周围的人就越爱我。 他们就像，“你真棒！”

I was like, “Oh, I thought I was gonna get in trouble!” But instead, I would get a promotion, if I were in a situation where I could have gotten a promotion — which I was not, but I don’t know.

我当时想，“哦，我以为我会遇到麻烦了！” 但是，如果我处于可以得到升迁的情况下，我会得到升职，虽然我不是，但我不知道。

So that’s one thing. Look around and see what you can do. If you want to do better work, and you see an opportunity, just grab it, and hopefully you won’t get in trouble, and you will be valued for the quality of your effort, and your craftsmanship.

这是一回事。 环顾四周，看看你能做什么。 如果您想做得更好，而您发现了机会，那就抓住它，希望您不会遇到麻烦，并且您会因其努力的质量和Craft.io而受到重视。

David: 大卫：

I think that’s excellent advice.

我认为这是极好的建议。

Jen: 仁：

I do think at some point, if you’re really in a place where you’re miserable, and the people around you are doing crappy work, and no matter what you do you’re not able to do better work, maybe you want to quit, right?

我确实认为在某个时候，如果您真的在一个痛苦的地方，周围的人在做糟糕的工作，无论您做什么，都无法做得更好，也许您想要退出吧？

Find a team where it’s a better fit, where other people also want to do good work, and you’re able to thrive and have the people around you be better than you, and inspire you, and challenge you to do better work, instead of constantly pushing you down to do worse work.

寻找一个更合适的团队，其他人也想做好工作，并且您能够蓬勃发展，让周围的人比您更好，并激励您，并挑战您做得更好。不断压低你做更糟糕的工作。

David [19:54]: 大卫[19:54] ：

Well, maybe some of our listeners will be able to take inspiration from that story. I’m curious in your work nowadays, what are the challenges that you’re facing?

好吧，也许我们的一些听众将从这个故事中汲取灵感。 我对您今天的工作感到很好奇，您面临的挑战是什么？

Jen: 仁：

I feel very blessed right now. I get to sit around and make up examples. I just was doing this last night: if you go to labs.jensimmons.com, I have a whole entire pile of sketches really — and by sketches, I mean not in Photoshop or in the program Sketch, but in code, of ideas for layouts. Some of them are polished-up, simple examples of “Here’s how CSS shapes work; look, you can take your text and flow it around a circular object in a circle, instead of in a square. Look, wow, isn’t that amazing you can do that on the web.”

我现在感到非常幸运。 我坐在那里，组成例子。 我昨晚只是在做这个：如果您去labs.jensimmons.com ，我确实有一堆草图-草图，我的意思是不是在Photoshop或Sketch程序中，而是代码中的想法布局。 其中一些是经过修饰的简单示例，例如“ CSS形状的工作原理； 外观，您可以将文本放在圆形而不是正方形的圆形对象周围。 哇，您可以在网络上做到这一点并不令人惊奇。”

A lot of those are examples that I give in the talks that I present on stage, but there’s also some in there that are kind of half broken, because I’m trying to figure things out.

其中很多是我在舞台上演讲中提供的示例，但其中有些还有些破发，因为我想弄清楚。

Last night, I was working on some ideas that I’ve had for the last two years, but I hadn’t had a chance to code them until this past week. If you open up a magazine (or a newspaper), the articles are laid out in columns. And on the web, we really only ever get one column, and we have moved to this world where we’re doing layouts — you see a lot of work that looks an article in medium.com, where there’s a column of text that starts at the top of the page (because we’re speaking English, a left to right situation), centered (it doesn’t have to be centered; could be a bit off center), but basically, you don’t want the text to go super wide. So there it is, constrained, a nice line length that makes it easy to read. And you could have some big pictures or some big graphics: New York Times has done this a lot, Atlantic is doing great work too online. Some beautiful layouts, where the other things besides the text are laid out in interesting ways, and help break up the text a little bit. Simple quotes that are sort of half sticking into the text column, and some possibilities. But we’re still stuck with ooone loooong column of text.

昨晚，我正在研究过去两年中已有的一些想法，但是直到上周我才有机会对其进行编码。 如果您打开杂志(或报纸)，则文章将按列排列 。 在网络上，我们实际上只有一栏，而我们已经移至这个世界，在那里我们正在做布局–您在medium.com上看到了很多看起来像是一篇文章的工作，其中有一列文字开始在页面顶部(因为我们说的是英语，是从左到右的情况)，居中(不必居中；可以偏离中心)，但是基本上，您不希望文本去超宽。 因此，存在一定的局限性，它的行长很容易阅读。 您可能会有一些大图片或一些大图形：《纽约时报》做了很多工作，大西洋在线也在做着出色的工作。 一些漂亮的布局，其中有趣的方式布置了除文本以外的其他内容，并有助于稍微破坏文本。 简单的引号有些滞留在文本列中，还有一些可能性。 但我们还是坚持了文本的ooone过长...列。

So I’m on this quest to figure out what it will take to give us real tools so that we can do multiple columns. And you can see there (it’s hard to describe on an audio podcast) but you can see, in that exploration, some other possibilities. Multi-column layout is a great way to lay out text if you’ve got small amounts of text. You can quickly lay it out in columns, and it will work beautifully — it will reflow whenever needed.

因此，我正在努力弄清楚为我们提供真正的工具，以便我们可以做多列，将需要什么。 而且您可以在那里看到(很难在音频播客上进行描述)，但是在那次探索中您可以看到其他可能性。 如果文本量很少，多列布局是一种很好的布局文本的方法。 您可以快速将其布置在各列中，并且效果很好-必要时将进行重排。

But for a long article, I don’t now, is it really going to work? I’m not sure. So I think we need the technology that has been proposed, called “Regions”. All the browser makers haven’t agreed yet. The CSS Working Group has not agreed yet that that’s a good idea. There’s some people who think it’s a really bad way to do this kind of tool. And I’m fine with that: we may need different code, I don’t know, we need a better tool. But I think the result is we need something to be able to give us the kind of result that I was able to code up yesterday.

但是对于一篇很长的文章，我现在不了解，这真的有用吗？ 我不确定。 因此，我认为我们需要已提出的称为“ 区域 ”的技术。 所有浏览器制造商尚未达成一致。 CSS工作组尚未达成共识，这是一个好主意。 有些人认为做这种工具是一种非常糟糕的方法。 我很好：我们可能需要不同的代码，我不知道，我们需要一个更好的工具。 但是我认为结果是我们需要一些东西才能给我们带来我昨天编写的那种结果。

And the reason I coded it up is because some of these ideas about new CSS technologies are in some browsers. So the examples that I’ve made work only in Safari Technology Preview, because the folks behind Safari put Regions into Safari, and it also has Grid, which some of the other browsers don’t have. You need that combination. They’re not the only browser with Regions, but they are the only browser with both Grid and Regions.

而且我编写它的原因是因为一些想法有关新CSS技术在某些浏览器。 因此，我制作的示例仅在Safari Technology Preview中可用 ，因为Safari背后的人们将Regions放入Safari，并且还具有Grid，而其他一些浏览器则没有。 您需要这种组合。 它们不是具有区域的唯一浏览器，而是具有网格和区域的唯一浏览器。

So, anyway, that’s a long, not very succinct answer, but I used to live on the edge, where, here’s some really cool, practical stuff that you can totally do right now, that’s brand new, and I’ve pushed myself over the edge, into “OK, this is totally not practical! You can’t do this at all!” But I want to see if this is something we want, because I want to then lobby the CSS Working Group, and lobby browser makers, to invent and build these things if this is something that we really want.

因此，无论如何，这是一个漫长而又不太简洁的答案，但我过去一直生活在边缘，这里是您现在完全可以做的一些非常酷，实用的东西，这是全新的，我把自己推向了极限。边缘，进入“确定，这完全不可行！ 你根本做不到！” 但是我想看看这是否是我们想要的东西，因为我想游说CSS工作组和游说浏览器制造商，如果我们确实想要这些东西，他们可以发明并构建这些东西。

Tim [24:02]: 提姆[24:02] ：

It is quite a bit like lobbying these days, which is a very interesting challenge to get all those fun, exciting features in browsers.

这些天有点像游说，这对于在浏览器中获得所有这些有趣的，令人兴奋的功能是一个非常有趣的挑战。

Last question from me. Do you have any thoughts on the Houdini project as it relates to CSS layout?

我的最后一个问题。 您对Houdini项目是否有任何想法，因为它与CSS布局有关？

Jen: 仁：

Houdini! I’m still learning a lot about Houdini, and about what I think about Houdini. I am a bit concerned — not because of Houdini, because Houdini’s just a technology.

胡迪尼！ 我仍在学习有关Houdini的很多知识，以及对Houdini的看法。 我有点担心-不是因为Houdini，因为Houdini只是一种技术。

I think the cool thing — once Houdini is in browsers — will be that, I guess we should explain for people who don’t know. Basically it would be a way for a group, or really smart engineers to say, “Hey, I wish such and such were in: I want hamburger,” (I dunno, that’s a bad word, because we already made that) … “French fries! I want French fry cheeseburger. I’m gonna invent French fry cheeseburger, I want every browser to support French fried cheeseburger, because I can do this cool thing in CSS and nobody does. So, instead of simply talking about it or writing up a spec or going to the Working Group and hoping they’ll write up the spec, I’m going to implement it using JavaScript and this Houdini API.”

我认为，很酷的事情-一旦Houdini进入浏览器中-将会是那样，我想我们应该为不认识的人解释一下。 基本上，这是一个团队或非常聪明的工程师说的一种方式，“嘿，我希望这样的事情出现在：我想要汉堡包”(我不知道，这是一个坏词，因为我们已经做到了)……”炸薯条！ 我要炸薯条汉堡。 我要发明炸薯条汉堡，我希望每个浏览器都支持炸薯条汉堡，因为我可以用CSS做到这一点，而且没人能做到。 因此，我将不再使用简单的讨论，编写规范或进入工作组并希望他们编写规范，而是使用JavaScript和此Houdini API来实现它。”

And anybody can download my library, and plug it into their website, and then everybody who visits that website — suddenly their browser will support French fry cheeseburger as well. And I don’t have to wait for all those people, because waiting for people and agreeing with people is a pain in the ass. And, “Yay, we don’t ever have to agree on anything ever again. Yay, we don’t have to have these long epic fights on email, and make all these decisions with humans. Humans are annoying. Yay, I can just do whatever I want by myself.”

而且任何人都可以下载我的图书馆并将其插入其网站，然后每个访问该网站的人-突然，他们的浏览器也将支持炸薯条汉堡。 而且我不必等所有的人，因为等待人并与人达成共识是一个痛苦的过程。 而且，“是的，我们再也不必就任何事情达成共识。 是的，我们不必在电子邮件上进行这些漫长的史诗般的战斗，而不必与人类一起做出所有这些决定。 人类很烦人。 是的，我可以自己做任何想做的事情。”

I think the CSS Working Group is amazing. I think this amazing miracle happens there, where really smart people have long conversations that take a long time to come up with a really, really good tool — and then it ships into browsers. And I don’t want that conversation to go away. I want that conversation to keep going.

我认为CSS工作组很棒。 我认为这个神奇的奇迹发生在那儿，在那里， 真正聪明的人进行了长时间的交谈，需要很长时间才能提出一个非常非常好的工具- 然后将其运送到浏览器中。 我不希望那个对话消失。 我希望谈话继续进行。

I know it can be hard, I know it’s exhausting, I know it’s annoying, but really good work comes out of it.

我知道这可能很难，我知道这很累，我知道这很烦人，但是确实可以取得好成绩。

David: 大卫：

It’s good that there are people thinking through the philosophy of these things, and tracking this, and keeping us aware, because as developers we all need to be aware of these things.

最好有人思考这些事物的哲学，追踪并保持我们的意识，因为作为开发人员，我们都需要意识到这些事物。

And so I’m curious, how can our listeners find you and find out about these efforts you’re involved in?

因此，我很好奇，我们的听众如何找到您，并了解您所参与的这些工作？

Jen: 仁：

Yeah, so go to JenSimmons.com. That’s the headquarters of everything I’m working on.

是的，所以去JenSimmons.com 。 那是我正在做的所有事情的总部。

Also I have a podcast called The Web Ahead, which, if people haven’t listened to it, I’d love for you to check it out. There’s well over 100 episodes on all kinds of different technologies, where we talk about “What is that technology? How could it be used? What is it good for? What is it not good for?” Sometimes we talk more about philosophical issues of the web, and what the new technology means, and about the history of the web as well.

另外，我还有一个名为The Web Ahead的播客，如果没有人听过，我希望您能喜欢它。 有关各种不同技术的剧集超过100集，我们在其中谈论“什么是技术？ 如何使用？ 到底有什么好处呢？ 这有什么不好呢？” 有时我们会更多地讨论网络的哲学问题，新技术的含义以及网络的历史。

So that’s at the thewebahead.net, and like I said labs.jensimmons.com is the place where I’m putting all of my experiments these days. Follow me on Twitter, @jensimmons. I’m on Twitter quite a lot.

所以那是在thewebahead.net上 ，就像我说的， labs.jensimmons.com是我最近进行所有实验的地方。 在Twitter上关注我， @ jensimmons 。 我经常在Twitter上。

David: 大卫：

Very cool. Well, thank you so much for joining us on the Versioning Show. We’ll be sure to put links to those in the Show Notes as well.

很酷。 好吧，非常感谢您加入我们的Versioning Show。 我们一定也会在“显示说明”中添加指向这些链接的链接。

Jen: 仁：

Great. Thanks for having me!

大。 感谢您的款待！

[Musical interlude]

[音乐插曲]

Tim: 蒂姆：

So it’s kind of funny — one of the things that we forgot to ask Jen about was, she won the Net Award for Podcast of the Year last year. And that was going against some pretty big podcasts, like CodePen Radio and some other ones that are really good.

因此，这很有趣-我们忘了问Jen的事情之一是，她去年获得了年度播客网络奖 。 这与某些大型播客(例如CodePen Radio和其他一些非常不错的播客) 背道而驰 。

David: 大卫：

I know — she didn’t even mention that, she’s so humble about that.

我知道-她甚至都没有提到，她对此很谦虚。

Tim: 蒂姆：

Yeah, definitely. And her podcasts are just a wealth full of interesting and just fun information. So I definitely encourage any of our listeners who are interested in CSS layout and — I don’t know — designing websites for CERN [chuckles] to go check out some of those episodes.

是的，当然。 她的播客内容丰富，有趣又有趣。 因此，我绝对鼓励所有对CSS布局感兴趣的听众，并且-我不知道-为CERN (笑)设计网站来查看其中的一些情节。

David [28:00]: 大卫[28:00] ：

She goes into layout in ways that twist my head around. I’m still getting my head around flexbox, and she’s talking grids, and regions, and all sorts of things that are only in the Safari Technology Preview, pre-release version — it’s just amazing stuff.

她以扭曲我头脑的方式进入布局。 I'm still getting my head around flexbox, and she's talking grids, and regions, and all sorts of things that are only in the Safari Technology Preview, pre-release version — it's just amazing stuff.

Tim: 蒂姆：

Yeah, I asked about Houdini, and she brought up a very good point — where Houdini lets you pretty much create how the browser is going to display CSS. So you basically get to “hack” the CSS rendering engine. And that can be a little bit of a scary thing, because what’s to keep you from actually writing CSS and, you know, just keeping standards and things updated and specifications? I want to remind us all that it should be used very responsibly. Don’t skip good CSS standards altogether, because in doing so, you kind of black box any development and just further good use of the CSS standards that way. If you’re writing your own rendering engine, you’re not giving browsers much of a reason to continue to support and improve on CSS as it stands in a global space.

Yeah, I asked about Houdini, and she brought up a very good point — where Houdini lets you pretty much create how the browser is going to display CSS. So you basically get to “hack” the CSS rendering engine. And that can be a little bit of a scary thing, because what's to keep you from actually writing CSS and, you know, just keeping standards and things updated and specifications? I want to remind us all that it should be used very responsibly. Don't skip good CSS standards altogether, because in doing so, you kind of black box any development and just further good use of the CSS standards that way. If you're writing your own rendering engine, you're not giving browsers much of a reason to continue to support and improve on CSS as it stands in a global space.

David: 大卫：

Do you think that Houdini is really going to be relevant — do you think it’s really going to be the thing that takes off, or do you think that it’s sort of the flavor of the month in terms of philosophies, but not necessarily something that people are going to be thinking about a year from now?

Do you think that Houdini is really going to be relevant — do you think it's really going to be the thing that takes off, or do you think that it's sort of the flavor of the month in terms of philosophies, but not necessarily something that people are going to be thinking about a year from now?

Tim: 蒂姆：

That’s an excellent question. I think it excites some of the more intellectual and philosophical developers out there — some of the people who have actually spent time reading and working on the spec. And I think it excites them because they might be thinking of it in terms of, oh, IE — or, OK, I shouldn’t say IE anymore — Safari does this terrible thing with CSS on their Chrome browser for iOS. And so let’s overwrite how the spec works in this specific setting for this one property. Then I see some of the big players in the game, like Facebook, saying, “We want CSS to behave this way. So let’s — because we can — write our own CSS rendering engine in JavaScript to support a more React/Redux-like approach.” And that’s where I see things starting to crumble.

That's an excellent question. I think it excites some of the more intellectual and philosophical developers out there — some of the people who have actually spent time reading and working on the spec. And I think it excites them because they might be thinking of it in terms of, oh, IE — or, OK, I shouldn't say IE anymore — Safari does this terrible thing with CSS on their Chrome browser for iOS. And so let's overwrite how the spec works in this specific setting for this one property. Then I see some of the big players in the game, like Facebook, saying, “We want CSS to behave this way. So let's — because we can — write our own CSS rendering engine in JavaScript to support a more React/Redux-like approach.” And that’s where I see things starting to crumble.

David: 大卫：

The thing that I think, when I think about that, is pretty much what Jen was talking about in terms of designers — or visual designers, in this case — trying to force things to be exactly what they want them to be, instead of recognizing that, as a medium, the web is about writing a prescription for how things are supposed to be presented, the way that Jen described.

The thing that I think, when I think about that, is pretty much what Jen was talking about in terms of designers — or visual designers, in this case — trying to force things to be exactly what they want them to be, instead of recognizing that, as a medium, the web is about writing a prescription for how things are supposed to be presented, the way that Jen described.

And ideally, using progressive enhancement, allowing whatever environment the user has chosen, to display what there is in the way that’s most appropriate for that environment. As opposed to going in and using tools or techniques, like this Houdini, to force that everything must follow this particular prescription.

And ideally, using progressive enhancement, allowing whatever environment the user has chosen, to display what there is in the way that's most appropriate for that environment. As opposed to going in and using tools or techniques, like this Houdini, to force that everything must follow this particular prescription.

Tim: 蒂姆：

Yeah. Because, at the end of the day, the real issue is progressive enhancement — number one, right? Progressive enhancement, because you could write your own rendering engine, and then have nothing for browsers that don’t support those APIs. And then, number two, I sort of feel like writing your own rendering engine kind of black boxes your thing on the web, wherein the web is no longer this open thing where you can see how everything’s getting done.

是的 Because, at the end of the day, the real issue is progressive enhancement — number one, right? Progressive enhancement, because you could write your own rendering engine, and then have nothing for browsers that don't support those APIs. And then, number two, I sort of feel like writing your own rendering engine kind of black boxes your thing on the web, wherein the web is no longer this open thing where you can see how everything's getting done.

It’s a lot harder to dig through, a lot harder to see what’s going on. And let’s say, for example, you do manage to write something with the Houdini API that’s amazing and wonderful, and does exactly what you and a thousand other people need. Let’s get that into the spec, let’s make that a real thing.

It's a lot harder to dig through, a lot harder to see what's going on. And let's say, for example, you do manage to write something with the Houdini API that's amazing and wonderful, and does exactly what you and a thousand other people need. Let's get that into the spec, let's make that a real thing.

Let’s not make that a library that I then have to add on to my site, increasing the overhead, slowing down the performance, all that sort of stuff. I’d rather see it get shipped with the browsers as a native feature, rather than now everyone has to, “Oh, you want this? Well, just do it yourself now, because you have the tools.”

Let's not make that a library that I then have to add on to my site, increasing the overhead, slowing down the performance, all that sort of stuff. I'd rather see it get shipped with the browsers as a native feature, rather than now everyone has to, “Oh, you want this? Well, just do it yourself now, because you have the tools.”

David: 大卫：

In this sense, it’s almost like the modern version of inserting a hack. Instead of going through and actually saying “OK, there’s a bug,” or “There’s an opportunity,” the browser makers are not recognizing and advocating for enhancements that can apply to everybody.

In this sense, it's almost like the modern version of inserting a hack. Instead of going through and actually saying “OK, there's a bug,” or “There's an opportunity,” the browser makers are not recognizing and advocating for enhancements that can apply to everybody.

Tim: 蒂姆：

To be fair, this is just about what I have read and what I’ve heard about Houdini, and it is still a very new thing. And you can’t really use it today, because it’s still such an in-development concept.

To be fair, this is just about what I have read and what I've heard about Houdini, and it is still a very new thing. And you can't really use it today, because it's still such an in-development concept.

David: 大卫：

I will also agree with you that I have very little knowledge about Houdini, other than what I’ve read and what we’ve discussed.

I will also agree with you that I have very little knowledge about Houdini, other than what I've read and what we've discussed.

So if it turns out to be our next overlord, then I gratefully bow down to our new overlords. And if it turns out to be the flavor of the month, then I’ll just applaud myself for being right.

So if it turns out to be our next overlord, then I gratefully bow down to our new overlords. And if it turns out to be the flavor of the month, then I'll just applaud myself for being right.

Tim: 蒂姆：

Sounds excellent. You can’t lose with that strategy.

Sounds excellent. You can't lose with that strategy.

David: 大卫：

Exactly!

究竟！

I was really impressed with having Jen here, and the notion that Mozilla is really putting intention behind designer advocacy, which is not something that I hear a lot about and certainly not enough about.

I was really impressed with having Jen here, and the notion that Mozilla is really putting intention behind designer advocacy, which is not something that I hear a lot about and certainly not enough about.

Tim: 蒂姆：

Yeah, as far as just being in it for the good of the open web, man, Mozilla has not lost that battle.

Yeah, as far as just being in it for the good of the open web, man, Mozilla has not lost that battle.

David: 大卫：

It’s interesting, because I used to be a big Firefox user, and now I’m primarily a Chrome user. And I’d actually be kind of curious what our listeners are doing, and making that relationship between Mozilla and Firefox, and how that is playing out for them.

It's interesting, because I used to be a big Firefox user, and now I'm primarily a Chrome user. And I'd actually be kind of curious what our listeners are doing, and making that relationship between Mozilla and Firefox, and how that is playing out for them.

Tim: 蒂姆：

Yeah, that’s a good question. You know what, for those of you listening, why not tweet us or email us, or run up to us on the street and tell us. Tell us what browser you use, why you use it, what you love about it, and maybe we’ll take some time to discuss that in one of the next episodes.

是的，这是一个好问题。 You know what, for those of you listening, why not tweet us or email us, or run up to us on the street and tell us. Tell us what browser you use, why you use it, what you love about it, and maybe we'll take some time to discuss that in one of the next episodes.

David: 大卫：

Don’t run up to us on the street. I tend to hit when I’m startled. But do tweet us @VersioningShow.

Don't run up to us on the street. I tend to hit when I'm startled. But do tweet us @VersioningShow .

Tim: 蒂姆：

Tweeting’s best.

Tweeting's best.

[Laughter]

[笑声]

David: 大卫：

All right. Well, Tim, thank you for joining me on this show. I think this was a lot of fun, and Jen was a fantastic guest.

行。 Well, Tim, thank you for joining me on this show. I think this was a lot of fun, and Jen was a fantastic guest.

---

---

Tim: 蒂姆：

Everybody, thank you so much for listening. We always enjoy getting to talk technology with all of you.

Everybody, thank you so much for listening. 我们总是喜欢与大家交谈技术。

David: 大卫：

We would also like to thank SitePoint.com, and our producers, Adam Roberts and Ophelie Lechat. Please feel free to send us your comments on Twitter — @versioningshow — and give us a rating on iTunes.

我们还要感谢SitePoint.com以及我们的制片人Adam Roberts和Ophelie Lechat。 Please feel free to send us your comments on Twitter — @versioningshow — and give us a rating on iTunes .

Let us know how we’re doing.

Let us know how we're doing.

Tim: 蒂姆：

We’ll see you next time, and we hope you enjoyed this version.

下次见，我们希望您喜欢这个版本。

翻译自: https://www.sitepoint.com/versioning-show-episode-6-with-jen-simmons/

java jen部署