rachel zhang_Rachel AndrewCSS网格，Flexbox，列，形状和区域

rachel zhang

In this episode of the Versioning Show, Tim and David are joined by Rachel Andrew, co-creator of Perch CMS and leading expert on CSS Grid Layouts. Rachel demonstrates her dancing skills as she glides from her Perch, pirouettes across CSS Grids, moonwalks along Flexbox axes, and cartwheels over CSS Box Alignments, Multi-columns, Shapes and Regions.

在Versioning Show的这一集中，Tim和David与Perch CMS的共同创始人，CSS网格布局的领先专家Rachel Andrew一同参加了会议。 Rachel从Perch滑行，在CSS Grid上旋转旋转，在Flexbox轴上沿月球行走以及在CSS Box Alignments，多列，形状和区域上的车轮显示出自己的舞蹈技巧。

Visit the Versioning Show Home Page

访问版本控制显示主页

Subscribe on iTunes | Subscribe on Stitcher | View All Episodes

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

显示笔记 (Show Notes)

• Rachel on Twitter: @rachelandrew

  雷切尔在推特上： @rachelandrew

• Rachel’s personal website: rachelandrew.co.uk

  雷切尔的个人网站： rachelandrew.co.uk

• Rachel’s CSS Grid demo site: gridbyexample.com

  RachelCSS Grid演示网站： gridbyexample.com

• Perch CMS

  鲈鱼CMS

• Perch Runway

  鲈鱼跑道

• CSS Grid Layout

  CSS网格布局

• Grid Layout status on caniuse

  在网格布局状态caniuse

• Rachel’s book Get Ready for CSS Grid Layout, published by A Book Apart

  Rachel的书《为CSS网格布局做好准备》 ，由A Book Apart出版

• Flexbox

  弹性盒

• CSS Working Group

  CSS工作组

• An Event Apart

  一个事件分开

• CSS Box Alignment

  CSS框对齐

• CSS Multi-column Layout

  CSS多列布局

• CSS Shapes

  CSS形状

• CSS Regions

  CSS区域

• Autoprefixer

  自动前缀

• Say hello on Twitter: @mdavidgreen | @tevko | @versioningshow | @sitepointdotcom

  在Twitter上问好： @mdavidgreen | @tevko | @versioningshow | @sitepointdotcom

对话重点 (Conversation Highlights)

I’ve been doing this for so long that I’m not afraid to look at something and say, Well, if I need to know about that I’ll have a look at it when I need to know about it, and not feel that I’m missing out, or that people are going to think I’m stupid because I don’t know this thing, or whatever, because there’s just too much stuff.

我这样做已经很久了，所以我不害怕看一些东西然后说， 嗯，如果我需要知道这一点，那么当我需要了解它时，我会去看看它，而不是觉得我错过了，或者人们会认为我很愚蠢，因为我不知道这件事，或者什么，因为东西太多了。

---

---

I focus on the things that I focus on. Even within CSS there are things that I have a rudimentary knowledge of. Obviously if I needed to use them, I could go and find out more, but because I don’t ever use them I don’t have a huge knowledge of them. That’s fine, because there’s so much stuff now. I think you do have to get a bit of an overview, what’s out there, what might it be useful for, and then just put it to that side and say, Well, when I have that task, I’ll go and really dive into this and figure it out, because you can’t learn everything like you could when I started.

我专注于我专注的事物。 即使在CSS中，我也有一些基本知识。 显然，如果我需要使用它们，我可以去发现更多，但是由于我从不使用它们，所以我对它们不了解很多。 很好，因为现在有很多东西。 我认为您确实需要获得一些概述，那里面有什么，有什么用处，然后放到一边说， 嗯，当我完成任务时，我会去潜水弄清楚并弄清楚，因为您无法像我刚开始时那样学习所有东西。

---

---

It doesn’t matter if you’re 18, or if you’re 65 or whatever. You’ve got things that you know, and that you can share, and you can teach. It doesn’t matter if you’ve only just started in the industry.

无论您是18岁，还是65岁，都无关紧要。 您拥有了自己知道的，可以分享的，可以教书的东西。 如果您只是刚开始从事该行业，那并不重要。

---

---

Sometimes I think, actually, people who aren’t much more than beginners can be the best teachers to people that are just one step behind.

实际上，有时候我认为，只不过是初学者而已的人就可以成为仅落后一步的人的最佳老师。

---

---

It’s kind of easy to jump over the basics part now, because you can go into one of these frameworks and they’ll hold your hand and protect you from all that stuff. There’s nothing wrong with them, but you need to understand the basics before you jump into them.

现在跳过基础部分有点容易，因为您可以进入这些框架之一，它们将帮助您并保护您不受所有这些东西的侵害。 它们没有什么问题，但是您在进入它们之前需要了解基础知识。

成绩单 (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 12 of the Versioning Podcast.

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

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: 蒂姆：

Today with us we have Rachel Andrew. We’re going to talk all about some CSS stuff, and maybe some CMS stuff, and it’s going to be a very exciting episode. So let’s go ahead and get this version started. Rachel, thank you so much for joining us. How are you doing today?

今天和我们一起有Rachel Andrew。 我们将讨论所有有关CSS的内容，也许还会涉及CMS的内容，这将是非常令人兴奋的一集。 因此，让我们开始安装该版本。 雷切尔，非常感谢您加入我们。 今天过得好吗？

Rachel: 雷切尔：

Yeah, it’s great to be here. I’m good.

是的，很高兴来到这里。 我很好。

David: 大卫：

One of the things we like to do before we get started with the show, we like to ask all of our guests a philosophical question. Your philosophical question of the day is this, Rachel: in your current career, what version are you, and why?

在节目开始之前，我们想做的一件事是，我们想向所有客人问一个哲学问题。 瑞秋，您今天的哲学问题是这样的：在您目前的职业中，您是哪个版本，为什么？

Rachel: 雷切尔：

Ooh. What version am I? I don’t know. That’s a really strange question. Although, it’s made me think, which is good. I don’t know. I feel like I’m one of those releases that ends up at like, point 343, because I’ve been doing the same thing really, for a very long time, but it’s changed massively. Yet, there are all these things about what I’m doing, which are pretty much the same as I was doing 15 years ago. Yeah, I think I’m one of those versions that’s got to like 2.7968, and you’re thinking really we should go to version three. [Laughs]

哦 我是什么版本？ 我不知道。 这是一个非常奇怪的问题。 虽然，这让我思考，这很好。 我不知道。 我感觉自己是那些最终以343点告终的发行版之一，因为我很长时间以来一直在做同样的事情，但是它发生了很大的变化。 但是，关于我正在做的事情有很多事情，与我15年前所做的几乎一样。 是的，我认为我是必须达到2.7968的那些版本之一，并且您在想我们真的应该转到第三版。 [笑]

Tim: 蒂姆：

That’s actually very interesting. We never get the same answer from any of our guests. Everything is a little bit different, so there’s never any wrong answer. I’ve seen those applications where it’s like version two point six, seven, eight, nine, ten. That’s always very interesting to see. Great answer.

这实际上非常有趣。 我们从未从任何客人那里得到相同的答案。 一切都有点不同，因此永远不会有任何错误的答案。 我看过那些类似于版本2的应用程序，它们分别是第六，七，八，九，十。 看到总是很有趣的。 好答案。

David: 大卫：

Yeah. I love those applications, because they tend to be the ones that are the best maintained, and the most mature, and most resilient when you need them to do something.

是的 我喜欢这些应用程序，因为当您需要它们做某事时，它们往往是维护得最好，最成熟，最有弹性的应用程序。

Rachel: 雷切尔：

Yeah. It made me think, we’re a bit like that with Perch. We’re always like, Oh well, what actually makes the next version? You know? We just keep on adding those points.

是的 这让我想，我们与Perch有点类似。 我们一直都很喜欢， 哦，那么，下一个版本实际上是由什么组成的？ 你懂？ 我们只是继续添加这些要点。

David: 大卫：

Since you mentioned it, why don’t you tell our listeners what Perch is, and what you’ve been doing with it?

自从您提到它以来，为什么不告诉我们的听众什么是Perch，以及您在使用Perch做些什么？

Rachel: 雷切尔：

All right. Initially Perch was a small CMS product that we launched about seven years ago, as a drop-in content editor, really. We’re now seven years on with the product. We’ve now got two products. We have Perch, which it’s essentially still drop-in content editor, although it does an awful lot more than that, and we have Perch Runway, which is really a fully-featured content management system for content-based sites — sites that really want to have a lot of structured content, and also don’t want something that messes around with their markup; that leaves all that up to the designer and developer, rather than the CMS deciding that it’s going to output stuff. So that’s mainly what we do.

行。 最初，Perch是我们大约七年前推出的一款小型CMS产品，确实是一种嵌入式内容编辑器。 我们已经有7年了。 我们现在有两种产品。 我们拥有Perch，尽管它的功能远不止于此，它实际上仍是嵌入式内容编辑器，而我们拥有Perch Runway ，它实际上是针对基于内容的站点(真正想要的站点)的功能齐全的内容管理系统具有很多结构化的内容，并且也不想让它们的标记弄乱； 这一切都留给了设计人员和开发人员，而不是CMS决定将要输出的东西。 所以这主要是我们要做的。

David: 大卫：

There are certainly a lot of CMS systems out there, and there were several years ago, and there still are. What made you feel the need to build something like Perch? What need was it addressing?

肯定有很多CMS系统，而且几年前，现在仍然如此。 是什么让您感到需要构建Perch这样的东西？ 它满足什么需求？

Rachel: 雷切尔：

It really came from something that our clients were asking for. At the time, we were just a web development agency, and we were mainly working for design agencies doing that. So we were building things for design agencies. They’d come to us and say, Oh, we’ve been asked to develop this, and we don’t have the skills in house, or we don’t have time. Will you do it? They would usually do the design. We’d end up doing the development. Most of those were fairly large-scale content management system things that we built in our own framework. Then we’d also get the same agencies would have these little tiny projects, and they’d say, Well, can you recommend something that’s like your big framework but it’s just kind of like a light version? as it were.

它确实来自客户所要求的东西。 当时，我们只是一个Web开发机构，而我们主要是为设计机构工作。 因此，我们正在为设计机构构建事物。 他们会来找我们，说， 哦，我们被要求开发此程序，我们没有内部技能，或者我们没有时间。 你会做吗？ 他们通常会进行设计。 我们最终将进行开发。 其中大多数是我们在自己的框架中构建的相当大规模的内容管理系统。 然后，我们也将获得相同的代理机构来执行这些小项目，他们会说， 好吧，您能推荐像您的大型框架之类的东西，但它却像是一个简单的版本吗？ 照原样。

We didn’t have anything to recommend — nothing that took the structured content approach that we did with our framework. That’s where Perch came from — saying, Well, can we do something that templates stuff this well, but is a sort of drop-in thing, that like, any web designer could implement? That’s where it came from. There wasn’t anything like it around. We’ve just really built on that, and built from what the customers have been asking us for, really.

我们没有什么可推荐的，没有什么可以采用我们对框架所做的结构化内容方法。 这就是Perch的来历- 是的，我们可以做些模板填充得很好的事情，但是这是任何Web设计人员都可以实现的插件吗？ 那就是它的来源。 周围没有类似的东西。 我们确实是在此基础上构建的，并且确实是根据客户要求我们构建的。

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

That’s interesting. The drop-in nature of Perch, I think, is something that people might not be familiar with. How does it drop in conveniently?

那很有意思。 我认为，Perch的嵌入式特性是人们可能不熟悉的。 如何方便地插入？

Rachel: 雷切尔：

OK. If you’ve got a site that’s all a bunch of static files, the basic need was this situation where a designer — and it was probably more common seven years ago — would build a completely static site. Then their client would say, Oh, that’s brilliant, but could we just make the home page so I can edit it? Really what their option at that point was, was to rebuild the whole thing in say WordPress. That would take a whole bunch of time. You’d have to build themes and so on.

好。 如果您拥有一个包含大量静态文件的网站，则基本需求是这种情况，在这种情况下，设计师(可能更常见于七年前)将构建一个完全静态的网站。 然后他们的客户会说， 哦 ， 太好了，但是我们可以只制作主页以便编辑吗？ 当时他们真正的选择是重建整个内容，比如说WordPress。 这将花费大量时间。 您必须构建主题等等。

So Perch, then and now, basically you can stick a PHP tag on the page, reload the page, and it’ll show up in the admin, and you can then start. You can choose a template for your structured content, and then you can start editing. You really can be editing a site, really within an hour or so, going through the install and then getting going. Obviously, we do a lot more than just that now, but that basic use case still exists, and there are a lot of Perch users who really only do that. They make a static site, they make a few bits editable, and they send it off to the client.

因此，Perch，从那时到现在，基本上，您可以在页面上粘贴一个PHP标记，重新加载页面，它会显示在管理员中，然后就可以开始了。 您可以为结构化内容选择模板，然后可以开始编辑。 实际上，您真的可以在一个小时左右的时间内编辑完一个站点，然后继续进行。 显然，我们所做的不只是现在，还有很多，但是这个基本用例仍然存在，并且有很多Perch用户实际上只是这样做。 他们创建了一个静态站点，使一些位可编辑，然后将其发送给客户端。

David: 大卫：

That’s interesting, and it has a lot of implications for the designer-to-developer workflow as well.

这很有趣，并且对设计人员到开发人员的工作流程也有很多影响。

Rachel: 雷切尔：

Yeah. It does mean that people can just build things. We have customers who use all sorts of different platforms to build things, and they know that they can just drop in the Perch tag and it’s not going to effect anything else they’ve done. If they want to use Dreamweaver, or they’re using one of those web builder type tools even. We see people who have used Adobe Muse and things. Then we have right through to people who are completely, carefully, hand crafting a site, and just don’t want the CMS to mess around with it. So we have a whole range of users.

是的 这确实意味着人们可以建造东西。 我们的客户使用各种不同的平台来构建事物，他们知道他们可以放入Perch标记，而这不会影响他们所做的任何事情。 如果他们想使用Dreamweaver，或者甚至在使用那些Web构建器类型工具之一。 我们看到使用过Adobe Muse和其他东西的人。 然后，我们请那些完全，认真，手工制作站点的人，直到不想让CMS弄乱它为止。 因此，我们拥有广泛的用户。

Tim: 蒂姆：

Speaking in terms of designing inside of a CMS, one of things that I’ve noticed you also tend to focus a lot on, is CSS and CSS layout. On the Versioning Show we usually don’t talk about trending technologies, but I wanted to take a moment to talk about CSS layouts, particularly because I see the direction that it’s going — to be the future of writing for layouts in CSS. Do you want to take a minute to talk about some of the new CSS layout features that you’ve been focusing on and are excited about?

说到CMS内部的设计，我注意到您也倾向于关注很多事情，其中​​之一就是CSS和CSS布局。 在Versioning Show中，我们通常不谈论趋势技术，但我想花一点时间谈论CSS布局，特别是因为我知道它的发展方向-就是将来用CSS编写布局。 您是否想花一点时间来谈论您一直关注并兴奋的一些新CSS布局功能？

Rachel: 雷切尔：

Yeah, sure. I’ve been looking a lot at CSS Grid Layout, which is an emerging specification, to create, really for the first time, a grid-based layout system for the web. We’ve obviously had things like float and positioning and so on for a very long time. I think most listeners probably are aware of the problems of trying to create grid-like layouts using floats. We’ve now got Flexbox. Flexbox is fantastic. It’s really great, as long as what you’re trying to lay out is essentially one dimensional — so you’re trying to lay out a row or a column.

当然可以。 我一直在关注CSS Grid Layout (这是一个新兴规范)，以真正第一次创建用于Web的基于网格的布局系统。 很显然，很长一段时间以来，我们都有float和定位之类的问题。 我认为大多数听众可能已经意识到尝试使用浮点数创建类似网格的布局的问题。 现在，我们有了Flexbox 。 Flexbox太棒了。 只要您要布局的内容本质上是一维的，那真的很棒，因此您要布局一行或一列。

You see a lot of people trying to turn Flexbox into a grid system. It’s hard work, because it wasn’t designed for that. I actually replied to someone this morning and did a quick example for him, to show the difference between what Flexbox is and was Grid is, because Grid is two dimensional. So you can lay things out it both rows and columns out at the same time.

您会看到很多人试图将Flexbox变成网格系统。 这是艰苦的工作，因为它不是为此而设计的。 我实际上今天早上回答了某人，并为他做了一个简单的例子，以展示Flexbox和Grid之间的区别，因为Grid是二维的。 因此，您可以同时对行和列进行布局。

The specification’s been around for about four years I think now. It actually came from Microsoft to start with, this kind of version of it. Although, some of the ideas have existed in specs for longer than that. Microsoft implemented an early version of it in IE10, and it’s been under development as a spec ever since, and is now behind flags in Chrome, and in Firefox, and in Safari (in the developer preview version).

我认为该规范已经存在了大约四年。 它实际上是从Microsoft开始的，它是这种版本。 虽然，有些想法在规范中存在的时间比这更长。 微软在IE10中实现了它的早期版本，此后一直作为规范进行开发，现在在Chrome，Firefox，Safari和Safari(开发人员预览版)中处于落后状态。

So it’s coming. The specs are almost completed. Then there’s obviously going to be a big process of testing and making sure it’s all all right before the flags are removed and it gets out there. But there’s an awful lot of stuff that you can play with now.

所以它来了。 规格即将完成。 然后，显然将要进行很大的测试过程，并确保在删除标志并将其移到那里之前一切正常。 但是，现在有很多东西可以玩。

Tim [7:53]: 蒂姆[7:53]：

It seems like right now, on caniuse, you’re right. It’s behind a lot of flags, and Microsoft seems to have the best support for it, which is traditionally unheard of, but very exciting to see. It seems like what you’re saying is we can expect it to, not soon, but quickly, come to be usable on all the evergreen platforms.

好像现在，在caniuse上 ，您是对的。 它带有很多标志，Microsoft似乎对此提供了最好的支持，这在传统上是闻所未闻的，但是看到它却非常令人兴奋。 似乎您在说的是，我们可以期望它很快就会在所有常绿平台上可用，并且很快就会出现。

Rachel: 雷切尔：

Yeah, definitely. Probably early next year at this point, just in terms of release cycles and things like that, and where people are. If you enabled the flags in a browser, I’ve got tons of examples people can look at.

是的，当然。 大概在明年年初，就发布周期，诸如此类的事情以及人们的位置而言。 如果您在浏览器中启用了这些标志，那么我可以看到很多例子。

There’s just a lot of stuff that works. I think what we’re going to see is quite different from how Flexbox came into being. With Flexbox, it appeared behind vendor prefixes, so people could start using it. Then it changed, and then it changed again. Then everyone said, Ah, this is really buggy, and felt not very confident using it.

有很多有用的东西。 我认为我们将要看到的与Flexbox的出现有很大不同。 使用Flexbox，它出现在供应商前缀之后，因此人们可以开始使用它。 然后它改变了，然后又改变了。 然后每个人都说： 啊，这确实是越野车，并且对使用它不太自信。

It’ll be very different for Grid Layout, because all of that changing and messing around with the specification and the implementations has happened behind the flags. The only person this has really affected is me and my examples, and obviously the browser vendors who are implementing, but we haven’t got lots of websites relying on something which is experimental, essentially.

对于Grid Layout，它将有很大的不同，因为所有与规范和实现有关的更改和混乱都发生在标志的后面。 真正受此影响的唯一人是我和我的示例，以及正在实施的浏览器供应商，但实际上，我们没有很多网站依赖实验性的内容。

So I think that people will be quite surprised when it does come out, that it’s going to come out cross-browser, and fairly standard across browsers, so people will be able to use it and rely on it.

因此，我认为，当它问世时，人们会感到非常惊讶，它将跨浏览器发布，并且在所有浏览器中都相当标准，因此人们将能够使用它并依靠它。

Tim: 蒂姆：

That is a very exciting prospect. You actually wrote a book called, Get Ready for CSS Grid Layout, with A Book Apart. Is there anything interesting, or exciting, or unexpected you learned about Grid Layout while writing that?

那是一个非常令人兴奋的前景。 您实际上写了一本书，名为“为CSS网格布局做好准备” ，还有一本书。 您在编写网格布局时了解到的任何有趣，激动或意外的东西吗？

Rachel: 雷切尔：

At the point I wrote that I knew the spec pretty well. I’ve been working with the spec, really since I first spotted it in IE10. I’m now an invited expert to the CSS Working Group, and layout stuff is the thing that I look at really.

当时我写道，我对规范非常了解。 自从我第一次在IE10中发现它以来，我就一直在使用该规范。 我现在是CSS工作组的邀请专家，布局是我真正关注的东西。

So it wasn’t so much surprising. I think what I find exciting about the spec is when I present about it to the people. I mentioned at the start, I’ve been traveling a lot, and a lot of that is going and speaking at things like An Event Apart and so on, about CSS Grid Layout, and showing people the examples.

因此，这并不奇怪。 我认为，当我向人们展示该规范时，我会感到兴奋。 我在一开始就提到过，我去了很多地方，其中很多都是在关于CSS Grid Layout 的活动以及诸如Event Event等之类的话题上发表的，并向人们展示了这些示例。

People are just so excited when they see it, because it solves so many layout problems. It’s one on these things that you think, Well, why haven’t we had this before? You know? I think that’s the cool thing about it, is actually explaining it, and people see how simple it actually is to use, and getting excited about it, and looking forward to having it. That’s really cool.

人们看到它们时会感到非常兴奋，因为它解决了许多布局问题。 您认为这些只是其中之一， 那么，为什么我们以前没有这个？ 你懂？ 我认为这是很酷的事情，实际上是在对其进行解释，人们看到它实际上是多么简单，并对此感到兴奋，并期待拥有它。 太棒了。

David: 大卫：

I think developers fell in love with Flexbox as soon as they saw it, because it solved so many of the problems that existed with existing layouts, with floats, etc. Now that they’re seeing Grid, I think it’s a new opportunity to fall in love all over again. I’m curious if you see this as something that’s going to compliment Flexbox or something that’s going to replace Flexbox, and where people should be preparing for that.

我认为开发人员一见到Flexbox就爱上了它，因为它解决了现有布局，浮点等存在的许多问题。现在，他们看到Grid了，我认为这是一个新的机会再次相爱。 我很好奇，如果您认为这是对Flexbox的称赞，或者是对Flexbox的代替，以及人们应该为此做准备的地方。

Rachel: 雷切尔：

This comes up all the time. These specifications are complementary. They’re for two different things. As I mentioned, the big difference is that Flexbox is one dimensional and Grid is two dimensional. The other way of looking at it is that if you have a bunch of items — say some navigation or whatever — and all you really care about is that the layout method looks at how big they are and spaces them out nicely, well that’s a use case for Flexbox. If you want to create a grid, and then chuck items at it, and say, Now you need to comply with the lines of this grid, that’s what a Grid’s for. Flexbox is more of a content out approach, and Grid is more saying, Here’s the structure, and this stuff has to go into it, and has to fit in it.

这总是出现。 这些规范是互补的。 他们是为了两件事。 正如我提到的，最大的区别是Flexbox是一维的，而Grid是二维的。 另一种看待它的方法是，如果您有一堆项目(例如导航或其他内容)，而您真正关心的只是layout方法查看它们的大小并将它们很好地隔开，这是一个用处Flexbox的保护套。 如果要创建一个网格，然后在其上吸附项目，然后说： 现在您需要遵守该网格的线条，这就是网格的作用。 Flexbox更是一种内容输出方法，而Grid更是说， 这是结构，这些东西必须放入其中，并且必须放入其中。

What we’re going to see is people using the two together, because in your design you’re going to have some things that you want to fit into that structure, and you’re going to have other things — you’re going to want the content to space out, depending on what you’ve got in there.

我们将看到人们将两者结合在一起使用，因为在您的设计中，您将拥有一些想要放入该结构中的东西，而您将拥有其他一些东西–您将希望内容根据您所拥有的空间而扩展。

There’s a lot of similarities. There’s a spec called Box Alignment, which is essentially all the nice alignment stuff that’s in Flexbox, but taken out into a separate spec. Grid Layout uses that spec for its alignment, so the alignment properties are exactly the same across slightly different names, because obviously we haven’t got Flex containers in Grid Layout, but how they work is the same across the two layout methods.

有很多相似之处。 有一个叫做Box Alignment的规范，它本质上是Flexbox中所有不错的对齐方法，但是被带到了一个单独的规范中。 Grid Layout使用该规范进行对齐，因此对齐属性在稍有不同的名称上是完全相同的，因为显然我们在Grid Layout中没有Flex容器，但是在两种布局方法中它们的工作方式是相同的。

So I think if people know Flexbox well, they’re going to find what they understand of it is going to transfer very well to Grid. You’re just working in two dimensions.

因此，我认为如果人们对Flexbox非常了解，他们将找到他们所了解的东西，并且可以很好地转移到Grid。 您只是在二维上工作。

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

Is there any relationship between Grid Layout and CSS3 Multi-column Layout?

网格布局和CSS3 多列布局之间是否存在任何关系？

Rachel: 雷切尔：

No. Again, different layout method. That’s a different way of laying out content. There’s some similarities, and we have grid-gap in Grid Layout, which has column-gap and a row-gap properties, which works pretty much the same way as column-gap in Multi-column Layout. They’re quite different things. Multi-column does the nice thing of just flowing the content and re-flowing it depending on how many columns come in, so a slightly different way of doing things. I think these things are all going to work together, depending on the sort of layout you’re trying to achieve.

否。再次，不同的布局方法。 这是布置内容的另一种方式。 有一些相似之处，并且我们在Grid Layout中具有grid-gap ，它具有column-gap和row-gap属性，其工作方式与Multi-column Layout中的column-gap几乎相同。 他们是完全不同的东西。 多列的好处在于，仅根据输入的列数来流移内容，然后重新流送它即可，因此处理方式略有不同。 我认为这些东西都可以一起使用，具体取决于您要实现的布局类型。

Tim: 蒂姆：

That’s definitely exciting, and will certainly make my day job a lot easier.

这绝对是令人兴奋的，并且一定会使我的日常工作变得容易得多。

Rachel: 雷切尔：

Yes. It’s very cool. It’s a really exciting time to be working with this stuff. I feel very fortunate that it still is exciting, as it was for me, nearly 20 years ago when I started doing this.

是。 非常酷 处理这些东西真是令人兴奋的时刻。 我感到非常幸运，就像我20年前开始这样做时一样，它仍然令人兴奋。

David: 大卫：

I think that’s what keeps us all in the game — the fact that it keeps on changing, and new stuff constantly coming along.

我认为这就是使我们所有人参与游戏的原因–它不断变化，不断有新事物出现。

Rachel: 雷切尔：

Yeah.

是的

Tim: 蒂姆：

Speaking about long times ago, do you want to talk a little bit about how you got started in the industry?

谈到很久以前，您是否想谈谈您如何开始该行业？

Rachel: 雷切尔：

Yeah. I can do. I’m actually an ex dancer. My background, I trained to do dance, and I went to college to do dance. I eventually stopped dancing and went backstage, and was working in technical theatre. Then I got pregnant with my daughter. That daughter is now 19. She’s just gone off back to college.

是的 我可以。 我实际上是前舞蹈演员。 我的背景，我训练舞会，然后上大学跳舞。 我最终停止了跳舞，回到了后台，并在技术剧院工作。 然后我怀了女儿。 那个女儿现在19岁。她刚回到大学。

I really didn’t have anything to do with myself or anyway of earning money, because I had trained to be a dancer and worked in the theatre. That’s all I really knew. What I did know how to do was type. I thought, Well, I’ll get a word processor, because I could take in typing while I’ve got this baby, and I’ll be able to do that. That would be something I could do at home. I was sold — by a PC world employee — instead of a word processor, I was sold a computer. The computer could be connected to the internet.

我真的与自己无关，也与赚钱没有任何关系，因为我受过训练成为舞者并在剧院工作。 我只知道这些。 我确实知道该怎么做的是打字。 我以为， 嗯，我将得到一个文字处理器，因为我可以在有了这个孩子的同时进行打字，而且我将能够做到这一点。 那是我在家可以做的事情。 我被一个PC世界的雇员出售了，而不是一个文字处理器，而是被一台计算机出售了。 该计算机可以连接到互联网。

From that, I discovered the web, and the fact that you could publish stuff to the web, and in fact that you needed to build a website to put your stuff out there at the time, because there was no Facebook or anywhere to put your photos up. I just started learning this stuff because I wanted to be able to communicate. I wanted to be able to put my stuff out there online. That’s really where it all started — just teaching myself this stuff because it looked interesting.

由此，我发现了网络，并且发现了可以将内容发布到网络上的事实，并且事实上，您当时需要构建一个网站来将您的内容发布到那里，因为没有Facebook或任何地方可以放置您的网站照片了。 我刚刚开始学习这些东西，因为我希望能够交流。 我希望能够将自己的东西放到网上。 那才是真正的开始-只是自学这些东西，因为它看起来很有趣。

I was fortunate, because at that time you very quickly became the person who knew about websites. A friend who had a charity said, Oh, could you help us out and build us a website? so I did. These things led on to various low-paying bits of freelance work, but ultimately led on to being able to get a job in the industry, actually working for a dot-com company back in 2000. That was really how it all started.

我很幸运，因为那时您很快就成为了解网站的人。 有个慈善机构的朋友说， 哦，您能帮我们建立一个网站吗？ 所以我做了。 这些事情导致了各种低薪的自由职业，但最终导致了能够在该行业找到一份工作，实际上是在2000年为一家.com公司工作。这就是一切的开始。

David: 大卫：

I love that. It matches a lot of people’s stories. Everybody started off as a dancer.

我喜欢那个。 它符合很多人的故事。 每个人都从舞者开始。

[Laughter]

[笑声]

Rachel: 雷切尔：

Just a really obvious move, yeah.

是的，这是一个非常明显的举动。

David: 大卫：

Exactly. More seriously, a lot of people, we’ve found, have gotten into this industry without any formal computer science training or development background. They dove in because they had problems that they wanted to solve. I’m curious, now that you’ve been involved in things, have you gone back and gotten any training? Are you completely autodidactic at this point, just teaching yourself things as you need them?

究竟。 更严重的是，我们发现很多人没有任何正式的计算机科学培训或开发背景就进入了这个行业。 他们之所以加入，是因为他们有想要解决的问题。 我很好奇，既然您参与了很多事情，您回去接受任何培训了吗？ 在这一点上，您是否完全自言自语，只是根据需要自学东西？

Rachel: 雷切尔：

Yeah, I’ve not got any formal training. I’ve occasionally gone and done bits and pieces online. There’s things that I’ve wanted to find out about, or I’ve wanted often to fill in gaps in my knowledge, because I haven’t got a computer science background. Sometimes I’ll read something and I’ll think, Well, what does that mean? Particularly doing stuff with the CSS Working Group. I’m talking to people sometimes who are browser engineers, and they’ll say something, and I’ll be thinking, What on Earth is that?

是的，我没有接受任何正式培训。 我偶尔去网上做零散的工作。 我想了解一些事情，或者我经常想填补我的知识方面的空白，因为我没有计算机科学背景。 有时我会读一些东西，然后我会想， 那是什么意思？ 特别是CSS工作组的工作。 我正在和有时是浏览器工程师的人聊天，他们会说些什么，我会在想，那到底是什么？

It’s because I just don’t actually know what the term is, perhaps, that they’re describing, because it’s not something I’ve ever come across. I’ll often go and do some reading just to fill in those gaps in my knowledge. Then when I read I think, Oh yes, I understand that. I understand that concept, I just didn’t have the words for it, because I don’t have that formal training. That’s interesting to me. I love learning. I love learning about different things and different aspects of what we do. That’s part of what makes it fun to me.

这是因为我只是实际上不知道他们所描述的术语是什么，因为这不是我见过的东西。 我会经常去读书以填补我的知识空白。 然后，当我阅读时，我想， 哦，是的，我明白了。 我理解这个概念，但我没有这个词，因为我没有经过正式的培训。 这对我来说很有趣。 我喜欢学习。 我喜欢学习不同的事物以及我们所做工作的不同方面。 这就是让我觉得有趣的部分。

Tim [16:28]: 提姆[16:28]：

Do you find ever that it’s harder to keep up to date as the web platform picks up speeds and continues to move at an ever-growing pace?

您是否发现，随着Web平台加快速度并以不断增长的步伐不断发展，保持最新状态变得更加困难吗？

Rachel: 雷切尔：

Yeah. There’s so much. I think it must be very difficult for people coming into the industry at this point, just to know what to focus on. I think that I have a benefit. I’ve been doing this for so long that I’m not afraid to look at something and say, Well, if I need to know about that I’ll have a look at it when I need to know about it, and not feel that I’m missing out, or that people are going to think I’m stupid because I don’t know this thing, or whatever, because there’s just too much stuff.

是的 有很多。 我认为，对于现在进入该行业的人们来说，仅知道要关注的重点肯定非常困难。 我认为我有好处。 我这样做已经很久了，所以我不害怕看一些东西然后说， 嗯，如果我需要知道这一点，那么当我需要了解它时，我会去看看它，而不是觉得我错过了，或者人们会认为我很愚蠢，因为我不知道这件事，或者什么，因为东西太多了。

I focus on the things that I focus on. Even within CSS there are things that I have a rudimentary knowledge of. Obviously if I needed to use them, I could go and find out more, but because I don’t ever use them I don’t have a huge knowledge of them. That’s fine, because there’s so much stuff now. I think you do have to get a bit of an overview, what’s out there, what might it be useful for, and then just put it to that side and say, Well, when I have that task, I’ll go and really dive into this and figure it out, because you can’t learn everything like you could when I started.

我专注于我专注的事物。 即使在CSS中，我也有一些基本知识。 显然，如果我需要使用它们，我可以去发现更多，但是由于我从不使用它们，所以我对它们不了解很多。 很好，因为现在有很多东西。 我认为您确实需要获得一些概述，那里面有什么，有什么用处，然后放到一边说， 嗯，当我完成任务时，我会去潜水弄清楚并弄清楚，因为您无法像我刚开始时那样学习所有东西。

David: 大卫：

I think that it’s very difficult for some people. I know I have this problem myself when I learn something new or learn about something new, sometimes I just want to dive into it, like Grid Layout for example. It might be the sort of thing that people might think, “Oh, I’m not going to use that today, but it sounds exciting and I want to learn all about it, and it’ll take me down one of those rabbit holes.

我认为这对某些人来说非常困难。 我知道自己在学习新知识或学习新知识时遇到了这个问题，有时我只是想深入学习，例如“网格布局”。 可能是人们可能会想的一件事，“哦，我今天不打算使用它，但这听起来令人兴奋，我想学习所有这些知识，这会让我失望。 。

Rachel: 雷切尔：

Yeah. There’s loads of conference presentations, things like that. Now, people just publish them on Vimeo and YouTube, even if you can’t get to the conferences. They can be a really good way of just getting an overview — like one of my talks on Grid Layout, for example. You could watch that — watch an hour of video — and have enough of an idea that, Yeah, I know how this kind of works. I know what problems it’s going to solve, and just have a bit of an idea.

是的 有很多会议演讲，诸如此类。 现在，即使您无法参加会议，人们也可以在Vimeo和YouTube上发布它们。 它们可能是获得概述的一种非常好的方法-例如，例如我关于网格布局的演讲之一。 您可以观看-观看一个小时的视频-并有足够的主意， 是的，我知道这种工作方式。 我知道它将解决什么问题，并且有一个想法。

Some people are going to then be very interested and want to play around. Others are going to say, Well OK, I know a bit about that. I know where to go to find out now, and just put it to one side, because it’s not a focus today. Podcasts as well. I do a lot. I’m a distance runner, so I listen to industry podcasts while I’m running, and that just gives me an overview of all sorts of things. They’re just there then, in the back of my mind, for when some problem comes up. I think, Oh yeah, I heard someone talking about that, and can go and dig it up and investigate it further.

那时，有些人会变得非常有兴趣，并且想要玩转。 其他人会说， 好的，我对此有所了解。 我知道现在要去哪里查找，并将其放到一边，因为今天它不是重点。 播客也是如此。 我很多 我是一名长跑运动员，所以我跑步时会收听行业播客，这只是给我概述了所有事情。 当我出现问题时，它们就在那儿。 我认为， 哦，是的，我听到有人在谈论这个，可以去挖掘它并进行进一步调查。

David: 大卫：

That is how we tap into the group mind. I love that. One of the things I appreciate about your career, the version that you are, is that you’ve also taken the responsibility onto yourself of going out and teaching and sharing your information with other people.

这就是我们进入集体思维的方式。 我喜欢那个。 对于您的职业，我对您的职业感到满意，其中之一就是，您还承担了自己的责任，即出门在外并与他人分享知识和信息。

Rachel: 雷切尔：

Yeah. That’s always been important to me. It goes back to how I started in this. I found these various groups — usenets at the time — and a few forums and things where people were sharing their knowledge. People were learning things, and they were teaching it to everybody else. If you wanted to do something, there’d be someone who was a little bit further along, who would say, Oh yes, this is how you do that. I’ve done it; here’s some code.

是的 这对我一直都很重要。 可以追溯到我从此开始的方式。 我发现了这些不同的小组-当时是Usenet-以及一些论坛和人们共享知识的事物。 人们正在学习事物，并且正在向其他人教授事物。 如果您想做某事，可能会有人走得更远，他们会说， 哦，是的，这就是您的做法。 我已经做到了； 这是一些代码。

So the minute that I got up one step of the ladder, I felt like I needed to do that too. I needed to turn around and help the next person who was coming on and saying, Oh, how did I do this? How did you get this to work? I felt it was my responsibility almost, to give back and to help the next person to make that first step.

因此，当我爬上梯子的那一刻，我觉得我也需要这样做。 我需要转过身来，帮助下一个来的人说， 哦，我是怎么做到的？ 您是如何使它工作的？ 我觉得几乎是我的责任，回馈并帮助下一个人迈出第一步。

So that’s just what I’ve done. Along with that, I’ve learned how to teach, and I’ve learned which things work and how I can explain technical concepts to people. Really, that’s all I’m doing. I’m still taking an awful lot from other people, and learning how to do things from other people, and I’m trying to give back in the same way, the things that I’ve learned.

这就是我所做的。 除此之外，我还学会了如何教学，还学会了哪些方法有效，以及如何向人们解释技术概念。 真的，这就是我要做的。 我仍然从别人那里吸取很多东西，并从别人那里学习如何做事，而且我正尝试以同样的方式回馈我所学到的东西。

David [20:14]: 大卫[20:14]：

You don’t wait until you’re the ultimate expert on something before you go out there are start teaching what you know.

您不会等到您成为某件事的最终专家，然后再出门就开始教您所知道的东西。

Rachel: 雷切尔：

No, no, because there’s always someone who is just a step behind and needs to know the things you do. One of the really neat things about this industry is I can go along to a conference, and I’ve been in this situation where I’ve been at a speaker dinner and one of the other speakers is the same school year as my daughter. I could literally be their mother, yet they know something specific about some part of — whether it’s JavaScript, or whether it’s back-end stuff, or whether it’s design — they know something I don’t. They’re able to teach that from a stage to me and to other people. It doesn’t matter if you’re 18, or if you’re 65 or whatever. You’ve got things that you know, and that you can share, and you can teach. It doesn’t matter if you’ve only just started in the industry.

不，不，因为总会有人落后一步，并且需要知道您所做的事情。 这个行业真正有趣的事情之一是我可以参加会议，在这种情况下，我参加了一次演讲晚宴，而另外一位演讲者与我的女儿同一个学年。 我可以从字面上看是他们的母亲，但是他们知道某些特定的方面(无论是JavaScript还是后端的东西，还是设计的东西)，他们知道我不知道的东西。 他们能够从一个阶段向我和其他人教授这一点。 无论您是18岁，还是65岁，都无关紧要。 您拥有了自己知道的，可以分享的，可以教书的东西。 如果您只是刚开始从事该行业，那并不重要。

Sometimes I think beginners have a much better way of passing on knowledge to people who are just a couple of steps behind than someone like me has. You get to a point when you’re quite experienced where you think, Well, this is easy. Why doesn’t everybody know this? Because you’ve got all this knowledge behind you that you don’t realize you’re leaning on. Sometimes I think, actually, people who aren’t much more than beginners can be the best teachers to people that are just one step behind.

有时，我认为对于像与我这样的人相比，仅落后几步的人，初学者将知识传递给他们的方法要好得多。 当您相当有经验时，您会想到一个点， 嗯，这很容易。 为什么每个人都不知道呢？ 因为您已经掌握了所有这些知识，所以您没有意识到自己会依靠。 实际上，有时候我认为，只不过是初学者而已的人就可以成为仅落后一步的人的最佳老师。

Tim: 蒂姆：

That certainly is very good advice. Speaking of advice, do you have anything general that you would like to leave — I guess any advice that you’d like to give to people who are just getting started in their careers and are looking to reach the same level of success that you’ve reached in yours?

那当然是非常好的建议。 说到建议，您有什么想离开的一般建议吗？我想您想给刚开始其职业并希望达到与您相同的成功水平的人们的任何建议已经达到你的了吗？

Rachel: 雷切尔：

Learn HTML, and CSS, and JavaScript. Do that first, and then look for the tools that will help you solve the problems you encounter in using those things to build the things you want to build. It’s very easy now to jump straight into a framework, or to jump straight into Sass, for instance, or to jump into the tools rather than learn the basics. More and more, I’m seeing people who seem very competent, but seem to be missing great bits of understanding — about just how the web works, and how things go together; basic things like how HTTP works, how does a redirect work, and very straightforward bits of information that you miss if you jump over the basics part.

学习HTML，CSS和JavaScript。 首先执行该操作，然后寻找可以帮助您解决使用这些东西来构建要构建的东西时遇到的问题的工具。 现在，直接跳入框架或直接跳入Sass，或者跳入工具而不是学习基础知识，都非常容易。 我越来越多地看到似乎很称职的人，但是似乎缺少很多了解-关于网络的工作方式以及事物如何协同工作； 基本的事情，例如HTTP的工作方式，重定向的工作方式，以及跳过基础部分时会错过的非常直接的信息。

It’s kind of easy to jump over the basics part now, because you can go into one of these frameworks and they’ll hold your hand and protect you from all that stuff. There’s nothing wrong with them, but you need to understand the basics before you jump into them.

现在跳过基础部分有点容易，因为您可以进入这些框架之一，它们将帮助您并保护您不受所有这些东西的侵害。 它们没有什么问题，但是您在进入它们之前需要了解基础知识。

So for anyone who is new, make sure you actually understand how to build a simple website just using HTML, and CSS, and some JavaScript, and you understand how everything links together, because then you’ll be able to use these tools to speed up your workflow, to enhance what you’re doing, and take away all the dull, boring jobs. There won’t be patching in the lack of knowledge, which I think is where it’s a problem.

因此，对于任何新手，请确保您确实了解如何仅使用HTML，CSS和一些JavaScript来构建简单的网站，并且了解所有内容如何链接在一起，因为这样您便可以使用这些工具来加快速度改善您的工作流程，增强您的工作效率，并消除所有枯燥乏味的工作。 知识的匮乏不会修补，我认为这是一个问题。

Tim: 蒂姆：

That is very excellent advice, and definitely something that I’ve been hearing from a lot of people in the industry. Learn the basics first. It will help you so much. It’s refreshing to hear, and I think, great advice for a lot of our listeners. One to two years from now, CSS Grid Layout, everybody’s using it, everybody loves it. What’s next for you?

这是非常好的建议，而且绝对是我从业内许多人那里听到的东西。 首先学习基础知识。 它将对您有很大帮助。 听到令人耳目一新的感觉，我认为，这对我们很多听众来说都是很棒的建议。 从现在开始的一到两年，CSS Grid Layout，每个人都在使用它，每个人都喜欢它。 接下来要做什么？

Rachel [23:38]: 雷切尔[23:38]：

I think in terms of CSS, there are lots and lots of really interesting things becoming possible — and becoming possible far more quickly, and getting into browsers far more quickly due to the fact we’ve got these evergreen browsers. I think there’s probably going to be an obvious thing that I’ll end up becoming interested in as Grid gets out there.

我认为就CSS而言，由于我们拥有了这些常绿的浏览器，因此有很多非常有趣的事情变为可能，并且变得越来越快，进入浏览器的速度也更快。 我认为，随着Grid的发展，我最终将对一件显而易见的事情感兴趣。

Of course, these are Level 1 specs — Grid, and Flexbox, and so on. This is the first version of them, essentially. It may well be that we move onto looking at what goes into Level 2 of Flexbox and Grid. There are certainly things that people have discussed that may well end up in those specs.

当然，这些是1级规范-Grid和Flexbox，依此类推。 本质上，这是它们的第一个版本。 很可能我们将继续研究Flexbox和Grid的2级内容。 人们讨论的某些事情肯定会以这些规范结尾。

I’m interested in things like Shapes and Regions, and all kinds of specs that are just fascinating for doing layout and other things. I think there’s plenty in terms of CSS that’ll keep me busy, and also with our product, Perch. so I don’t think I’ll be slowing down any time soon!

我对诸如Shapes和Regions之类的东西以及对进行布局和其他事情着迷的各种规格感兴趣。 我认为有很多CSS会让我很忙，还有我们的产品Perch。 所以我认为我不会很快放慢脚步！

David: 大卫：

Since you’re putting this into application right away, you’re in a position not only to help figure out how to use these things, but also to define where they’re going to be needed next.

由于您将其立即放入应用程序中，因此您不但可以帮助弄清楚如何使用这些东西，还可以定义下一步将需要它们的位置。

Rachel: 雷切尔：

Hmm [affirmative].

嗯[肯定] 。

David: 大卫：

Where can our listeners find out more about you online and find out how to see your presentations on Grid and on other things?

我们的听众在哪里可以在线找到有关您的更多信息，以及如何在Grid和其他方面查看您的演示文稿？

Rachel: 雷切尔：

I’m @rachelandrew on Twitter. That’s generally where I tend to post things first. My website it rachelandrew.co.uk, and that’s where I blog and post things. You’ll find my presentations and so on there.

我是Twitter上的@rachelandrew 。 通常，这是我倾向于先发布内容的地方。 我的网站rachelandrew.co.uk ，这是我写博客和发布东西的地方。 您将在此处找到我的演示文稿。

There’s lots and lots of CSS Grid Layout examples at gridbyexample.com, which is my repository of Grid bits and pieces that I build as I play around with the spec.

在gridbyexample.com上有很多CSS Grid Layout示例，这是我在遵循规范时构建的Grid点和片段的存储库。

David: 大卫：

Fantastic. Thank you so much for being on the show today.

太棒了 非常感谢您参加今天的节目。

Rachel: 雷切尔：

It was great to be here.

很高兴来到这里。

---

---

David: 大卫：

It’s fascinating how many people get into this field without a background in technology, but with a background in theatre.

令人着迷的是，没有技术背景但有戏剧背景的人进入这个领域。

Tim: 蒂姆：

Yeah, not only that. It’s inspiring, because I like to hear — especially as someone who again, doesn’t have any classical training in this industry — it’s inspiring, because it reminds me that the only thing getting in my way is my desire to learn and my drive to just continue working at this. It’s not a closed-off industry, wherein you have to have a very specific degree and a pedigree before you can start doing any work.

是的，不仅如此。 这是鼓舞人心的，因为我喜欢听，尤其是作为一个再次在这个行业没有任何经典培训的人，这是鼓舞人心的，因为它提醒我，唯一阻碍我前进的是我对学习的渴望和对只需继续工作即可。 这不是一个封闭的行业，在开始任何工作之前，您必须具有非常具体的学位和血统。

David: 大卫：

Absolutely, and not only just doing the work, but going out and teaching and instructing, giving information back. Rachel is certainly one of the experts people turn to now, and she started off just saying, This is a little thing that I know that maybe some people don’t know, and I’m going to share it and put it out there. Who among us doesn’t have something that they’ve gotten into deeply enough that they could share it with the next person who just might not know as much about that one topic?

当然，不仅要完成工作，还要出去教学和指导，回馈信息。 雷切尔(Rachel)无疑是人们现在所求助的专家之一，她刚开始只是说： 这是我所知的一点，也许有些人不知道，我将与大家分享并付诸实践。 我们中间谁对他们没有足够的了解，无法与下一个可能不太了解该主题的人分享呢？

Tim: 蒂姆：

Yeah, definitely. There was very big element of humility when she was talking about how she went and there was a 19-year-old speaker just like her daughter, but she had something to learn from that, and was just all ears and excited to hear about what that speaker had to say.

是的，当然。 当她在谈论自己的去向时，谦卑感非常大，有一个19岁的演讲者就像她的女儿一样，但是她从中学到了一些东西，并且全神贯注地兴奋于听到该发言人不得不说。

I think that’s something I really enjoy about our industry. There is not this element of, O, well, you have been around since the web started, so you certainly know more than just everybody else. It seams that most people that I encounter in the industry are excited to hear from anyone who has something to say. I think that’s something we can credit to our industry for being so successful so quickly.

我认为那是我真正喜欢我们行业的东西。 自从网络启动以来，您就已经存在了，所以，您当然不仅仅拥有其他人，还拥有更多的知识。 可以肯定的是，我在行业中遇到的大多数人都很高兴听到有话要说的人。 我认为这是我们可以如此Swift成功地归功于我们行业的东西。

David: 大卫：

I was fascinated to hear what she had to say about Grid layouts. Honestly, from a practical perspective, it’s not something that I’ve really given much thought to yet, because it’s still behind browser prefixes, and I tend to be fairly conservative about what I incorporate into my code. I try not to depend on something where the spec might be changing or it might be evolving, so I tend not to do too much with things that are vendor prefixed.

听到她对网格布局所说的话，我感到非常着迷。 老实说，从实际的角度来看，这并不是我真正想过的事情，因为它仍然落后于浏览器前缀，对于合并到代码中的内容，我倾向于相当保守。 我尝试不依赖于规范可能会更改或正在发展的某些内容，因此我倾向于对带有供应商前缀的内容不做过多处理。

Tim: 蒂姆：

Yeah. I’m definitely the same way, especially working for a product that has to work on more than just the evergreen browsers. What I really need to do, I think, is just hop on CodePen, probably in Firefox or Internet Explorer, which I’ve never said before in my life, because that has the best support, and just start playing around with it. I think we both certainly know that pretty soon this is going to be the only way that you are writing layout in CSS.

是的 我绝对是同样的方式，尤其是对于必须在不只是常绿的浏览器上运行的产品而言。 What I really need to do, I think, is just hop on CodePen, probably in Firefox or Internet Explorer, which I've never said before in my life, because that has the best support, and just start playing around with it. I think we both certainly know that pretty soon this is going to be the only way that you are writing layout in CSS.

David [27:52]: David [27:52]:

I’m excited to see this one coming, and the way that it’s coming out. It sounds like for once, a new standard is emerging that is being finalized and agreed upon before it starts seeping out into the code. I hate to say that, but I think that it’s because it’s being driven by Microsoft and by Internet Explorer — something that most developers probably won’t want to try until it’s been given the credibility of being part of Chrome and Firefox.

I'm excited to see this one coming, and the way that it's coming out. It sounds like for once, a new standard is emerging that is being finalized and agreed upon before it starts seeping out into the code. I hate to say that, but I think that it's because it's being driven by Microsoft and by Internet Explorer — something that most developers probably won't want to try until it's been given the credibility of being part of Chrome and Firefox.

Tim: 蒂姆：

I do enjoy the difference with this specification. A lot of times you’ll see things getting out, and each browser has it a little bit differently, and then over a few years the standards come together, and then something is finalized, but it’s already been out there for a long time. It’s refreshing to see browser engineers and spec writers coming together to agree upon it beforehand, because I feel like that prevents a graveyard of old vendor prefixes in your code.

I do enjoy the difference with this specification. A lot of times you'll see things getting out, and each browser has it a little bit differently, and then over a few years the standards come together, and then something is finalized, but it's already been out there for a long time. It's refreshing to see browser engineers and spec writers coming together to agree upon it beforehand, because I feel like that prevents a graveyard of old vendor prefixes in your code.

David: 大卫：

I was even slow to adopt Flexbox, and it was largely because the spec was evolving as people were using it. And that squicks me, when I get into a situation like that.

I was even slow to adopt Flexbox, and it was largely because the spec was evolving as people were using it. And that squicks me, when I get into a situation like that.

Tim: 蒂姆：

Yeah. Definitely with Flexbox, especially because at some point there was almost two completely distinct syntaxes with Flexbox. I remember that. In fact, if you use Autoprefixer for CSS and you support something like three or four versions back, you write display: flex and you’ll probably get four to five different ways of saying that, with the browser prefixes and with the different — I’m pretty sure it wasn’t even flex at one point. It was just this weird way of doing it. I’m certainly happy to see that’s not going to happen with Grid.

是的 Definitely with Flexbox, especially because at some point there was almost two completely distinct syntaxes with Flexbox. 我记得那个。 In fact, if you use Autoprefixer for CSS and you support something like three or four versions back, you write display: flex and you'll probably get four to five different ways of saying that, with the browser prefixes and with the different — I'm pretty sure it wasn't even flex at one point. It was just this weird way of doing it. I'm certainly happy to see that's not going to happen with Grid.

What I’d like to see, and I’m curious if this exists, because what I hate having to do is turning on browser flags so I can just play around with something. I’d like to see if there’s a JavaScript polyfill for Grid that enables me to write what will be the Grid syntax, so that I don’t have to, in Chrome, turn on a flag before I can start using it. If that exists — I probably should have asked Rachel — but if that does exist and you, dear listener, know of it, please let us know, and we’ll certainly share it with everybody else.

What I'd like to see, and I'm curious if this exists, because what I hate having to do is turning on browser flags so I can just play around with something. I'd like to see if there's a JavaScript polyfill for Grid that enables me to write what will be the Grid syntax, so that I don't have to, in Chrome, turn on a flag before I can start using it. If that exists — I probably should have asked Rachel — but if that does exist and you, dear listener, know of it, please let us know, and we'll certainly share it with everybody else.

David: 大卫：

I wonder: JavaScript polyfills, or maybe it’s a Sass thing. I know that when I started using Flexbox, the reason I was comfortable getting started with it was because I was able to generate things and write something standard in Sass, and then have it generate out all of the prefixed and various, the ones that support the different browsers, just by having my CSS pre-processed that way.

I wonder: JavaScript polyfills, or maybe it's a Sass thing. I know that when I started using Flexbox, the reason I was comfortable getting started with it was because I was able to generate things and write something standard in Sass, and then have it generate out all of the prefixed and various, the ones that support the different browsers, just by having my CSS pre-processed that way.

Tim: 蒂姆：

Yeah, that’s true. It’s funny. I use Sass, but I use probably the least amount of features that Sass provides. I can’t remember the last time I actually wrote a function or a mixin with Sass. Mainly, I use it for nesting purposes, variables, and that’s probably it. You’re right. There are definitely ways to have those polyfills enabled without JavaScript. That’s an important distinction to make.

对，是真的。 这很有趣。 I use Sass, but I use probably the least amount of features that Sass provides. I can't remember the last time I actually wrote a function or a mixin with Sass. Mainly, I use it for nesting purposes, variables, and that's probably it. 你是对的。 There are definitely ways to have those polyfills enabled without JavaScript. That's an important distinction to make.

David: 大卫：

I was really intrigued that one of the points that Rachel made is something that, I know it’s one thing that I’ve come to personally after years of trying everything out there, was the notion that it’s very important to start with vanilla HTML, vanilla CSS, and vanilla JavaScript, before adopting all of these libraries and all of these other techniques. I think what she said, it really resonates with me, because it’s possible to become so dependent on those libraries that are much more subject to change than something that has a standards body behind it, like the vanilla standards.

I was really intrigued that one of the points that Rachel made is something that, I know it's one thing that I've come to personally after years of trying everything out there, was the notion that it's very important to start with vanilla HTML, vanilla CSS, and vanilla JavaScript, before adopting all of these libraries and all of these other techniques. I think what she said, it really resonates with me, because it's possible to become so dependent on those libraries that are much more subject to change than something that has a standards body behind it, like the vanilla standards.

Tim: 蒂姆：

Yeah, that’s certainly one of the issues that I have with a lot — and I’m not saying all, because I couldn’t possibly know this — but with a lot of boot camps when they’re teaching developers. They start with maybe a week of each HTML, CSS, JavaScript, and boom, All right, now we’re going to learn Ruby on Rails and React. It’s like, "Hold on a second, you couldn’t possibly learn all of these things enough to be able to explore intelligently, tools, libraries, and frameworks, with that little amount of time spent on each of those things. I was fortunate in that, when I started to learn HTML, CSS, and JavaScript, I didn’t really know about tools, or libraries, or frameworks. I was naïve enough to think that everybody just writes plain HTML, CSS, and JavaScript, and PHP, and that’s how the entire web works.

Yeah, that's certainly one of the issues that I have with a lot — and I'm not saying all, because I couldn't possibly know this — but with a lot of boot camps when they're teaching developers. They start with maybe a week of each HTML, CSS, JavaScript, and boom, All right, now we're going to learn Ruby on Rails and React. It's like, "Hold on a second, you couldn't possibly learn all of these things enough to be able to explore intelligently, tools, libraries, and frameworks, with that little amount of time spent on each of those things. I was fortunate in that, when I started to learn HTML, CSS, and JavaScript, I didn't really know about tools, or libraries, or frameworks. I was naïve enough to think that everybody just writes plain HTML, CSS, and JavaScript, and PHP, and that's how the entire web works.

I think a lot of developers getting started now, they hear, and certainly every time someone emails me a job offer, the first three things I hear are Redux, React, and Webpack. Throwing that out there enough, developers are going to think that this is how we build for the web, these are what these technologies are built on. When you come at it from that angle, once Redux, React, and Webpack are left behind, as all of them are, not saying they’re not good technologies, not saying that they don’t currently solve problems, but eventually new technologies take their place. If you started learning those things, it will be so much more difficult for you to move on to the next thing.

I think a lot of developers getting started now, they hear, and certainly every time someone emails me a job offer, the first three things I hear are Redux, React, and Webpack. Throwing that out there enough, developers are going to think that this is how we build for the web, these are what these technologies are built on. When you come at it from that angle, once Redux, React, and Webpack are left behind, as all of them are, not saying they're not good technologies, not saying that they don't currently solve problems, but eventually new technologies take their place. If you started learning those things, it will be so much more difficult for you to move on to the next thing.

David [33:08]: David [33:08]:

I wonder how it’s going to be for those people, like the 19-year-old who was giving a presentation that Rachel wanted to learn something from. These people, they’re like the sacrificial lambs on the alter of the new frameworks out there. I think eventually at some point in their own careers, they’re going to come to the point where they realize, Oh, you know, that framework I was an expert in last year, it’s now completely changed and it’s a different thing. Now I’m doing this new thing. What’s constant? What underlies all of these things? Then they’ll also notice that, Oh yeah, the semantic HTML, the core CSS, the vanilla JavaScript, these are the things that I need to know if I want to keep being able to adopt the next framework, the next library that’s going to help me. Honestly, these days you do need to be able to adopt those things comfortably, without forgetting the fundamentals.

I wonder how it's going to be for those people, like the 19-year-old who was giving a presentation that Rachel wanted to learn something from. These people, they're like the sacrificial lambs on the alter of the new frameworks out there. I think eventually at some point in their own careers, they're going to come to the point where they realize, Oh, you know, that framework I was an expert in last year, it's now completely changed and it's a different thing. Now I'm doing this new thing. What's constant? What underlies all of these things? Then they'll also notice that, Oh yeah, the semantic HTML, the core CSS, the vanilla JavaScript, these are the things that I need to know if I want to keep being able to adopt the next framework, the next library that's going to help me. Honestly, these days you do need to be able to adopt those things comfortably, without forgetting the fundamentals.

Tim: 蒂姆：

Yeah, it is interesting. I was thinking when Rachel was mentioning that, what is it that really causes developers to sometimes skip these fundamental steps in their knowledge? I think it’s the fact that we, in our industry, expect people, or we praise the rising stars and the young speakers. There is an element of ageism in our industry. I think that if I really wanted — I’m 18, 19 years old — someone to listen to what I have to say, and to just skip ahead to the point of having a hundred thousand followers on Twitter, and speaking at every conference, I’m going to want to learn what is being taken interest in and praised as quickly as possible.

Yeah, it is interesting. I was thinking when Rachel was mentioning that, what is it that really causes developers to sometimes skip these fundamental steps in their knowledge? I think it's the fact that we, in our industry, expect people, or we praise the rising stars and the young speakers. There is an element of ageism in our industry. I think that if I really wanted — I'm 18, 19 years old — someone to listen to what I have to say, and to just skip ahead to the point of having a hundred thousand followers on Twitter, and speaking at every conference, I'm going to want to learn what is being taken interest in and praised as quickly as possible.

I might be very motivated to skip those fundamentals and dive right into the current and most exciting technology. I would urge you, if you’ve ever felt that, it’s not worth it. This is your career that we’re talking about here. The fundamentals will never change. The most exciting and popular technology will always change. If you crave that stability and security in your career, definitely chase the fundamentals. Listen, I’m still learning the fundamentals. David, I’m sure you sometimes are still learning the fundamentals. You can always go deeper in learning how CSS, HTML, and JavaScript work.

I might be very motivated to skip those fundamentals and dive right into the current and most exciting technology. I would urge you, if you've ever felt that, it's not worth it. This is your career that we're talking about here. The fundamentals will never change. The most exciting and popular technology will always change. If you crave that stability and security in your career, definitely chase the fundamentals. Listen, I'm still learning the fundamentals. David, I'm sure you sometimes are still learning the fundamentals. You can always go deeper in learning how CSS, HTML, and JavaScript work.

David: 大卫：

Absolutely. It gives you an opportunity to refocus. It’s almost like a meditation, to go back into the basic semantic arguments: what HTML element should this be? What does it represent, and why? If you can’t answer that question intelligently, then you don’t understand your fundamentals.

绝对。 It gives you an opportunity to refocus. It's almost like a meditation, to go back into the basic semantic arguments: what HTML element should this be? What does it represent, and why? If you can't answer that question intelligently, then you don't understand your fundamentals.

Tim: 蒂姆：

I’m reminded of the parable of building your house on a foundation of sand rather than building your house on a foundation of stone. That’s what that reminds me of.

I'm reminded of the parable of building your house on a foundation of sand rather than building your house on a foundation of stone. That's what that reminds me of.

David: 大卫：

I can see that. I can see that. This has been a good show. We had an opportunity to really dive into the philosophy behind how we approach our careers. It’s great to have an opportunity to do that.

我理解了。 我理解了。 This has been a good show. We had an opportunity to really dive into the philosophy behind how we approach our careers. It's great to have an opportunity to do that.

Tim: 蒂姆：

Yes, definitely. I was excited to talk about CSS today — not because it’s a new, exciting technology, but because I really believe that from now until forever, we are going to be approaching CSS layout in a much different way than we have traditionally. I’m excited that we got to talk about that with probably the most qualified person to discuss CSS Grid Layout with. So, great episode. Hopefully our listeners have learned a lot from Rachel.

当然是。 I was excited to talk about CSS today — not because it's a new, exciting technology, but because I really believe that from now until forever, we are going to be approaching CSS layout in a much different way than we have traditionally. I'm excited that we got to talk about that with probably the most qualified person to discuss CSS Grid Layout with. So, great episode. Hopefully our listeners have learned a lot from Rachel.

---

---

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

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

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.

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 .

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-12-with-rachel-andrew/

rachel zhang