In this episode of the Versioning Show, Tim and David are joined by Chris Coyier, well-known creator of CSS-Tricks and co-founder of code-sharing site CodePen and the ShopTalk podcast. They discuss getting started on the web, the future of web technologies, approaches to coding projects, and least favorite things on the web.
在Versioning Show的这一集中，Tim和David与Chris Coyier一起加入了该会议，他是CSS-Tricks的著名创建者，并且是代码共享网站CodePen和ShopTalk播客的共同创始人。 他们讨论了Web入门，Web技术的未来，编码项目的方法以及Web上最不喜欢的东西。
Visit the Versioning Show Home Page
访问版本控制显示主页
Subscribe on iTunes | Subscribe on Stitcher | View All Episodes
在iTunes上订阅 | 订阅Stitcher | 查看所有剧集
Chris on Twitter: @ChrisCoyier
克里斯在推特上： @ChrisCoyier
css-tricks.com
css-tricks.com
ShopTalk Show
ShopTalk秀
codepen.io
代码库
CodePen PRO
CodePen PRO
chriscoyier.net
chriscoyier.net
Paul Lewis’s blog
保罗·刘易斯的博客
More Twitter links: @mdavidgreen | @tevko | @versioningshow | @sitepointdotcom
更多Twitter链接： @mdavidgreen | @tevko | @versioningshow | @sitepointdotcom
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 four of the Versioning Podcast. This is a place where we sit down every two weeks 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.
…，您正在收听Versioning Podcast的第四集。 在这里，我们每两周开会一次，讨论从开发到设计的网络行业-一些人使之成为现实，并计划下一版的发展方向。
David: 大卫：In this episode, we’re speaking with Chris Coyier.
在本集中，我们正在与克里斯·科耶尔(Chris Coyier)交谈。
Chris: 克里斯：What’s up everybody! Thank you for having me on — I am very excited.
大家好吗！ 谢谢您让我加入我-我感到非常兴奋。
David: 大卫：Cool. So I know that a lot of people out there are already familiar with you, but how do you introduce yourself to folks?
凉。 所以我知道外面已经有很多人与您熟悉，但是您如何向人们介绍自己呢？
Chris: 克里斯：I have three major projects that I work on, and I don’t know what my title is at them, really. I just do work, and that happens, but I write and screencast and kind of participate in the community at a site called CSS-Tricks — that’s css-tricks.com. I have a podcast of my own, called ShopTalk Show, with my friend Dave Rupert, and I work on a web app called CodePen that’s at codepen.io. And those three projects take up all of my time in the world.
我有三个主要的项目正在研究，但实际上我不知道我的头衔是什么。 我只是做工作，而且确实发生了，但是我在CSS-Tricks站点(即css-tricks.com)上撰写和截屏并加入了社区。 我和朋友Dave Rupert有一个自己的播客，称为ShopTalk Show ，我在codepen.io上开发了一个名为CodePen的Web应用程序。 这三个项目占用了我在世界上所有的时间。
David [1:11]: 大卫[1:11] ：Wow, and a lot of us are familiar with those projects.
哇，我们很多人都熟悉这些项目。
But one of the things that we like to hear on the Versioning Show before we get started — I like to ask people our philosophical question, which is —
但是，在我们开始之前，我们希望在Versioning Show上听到的一件事-我想向人们询问我们的哲学问题，即-
Chris: 克里斯：Nice!
真好！
David: 大卫：In your current career, what version are you, and why?
您目前的职业是什么版本，为什么？
Chris: 克里斯：[laughs] That’s an awesome question. What version am I?
(笑)这是一个很棒的问题。 我是什么版本？
One of the things that I do on my personal website, because I’m terrible at kind of remembering my own history and stuff — you know, like, Where were you in June of ’97? I’d be like, I was a younger man, I think. I can’t remember exactly where I worked that year. It’s hard for me to dredge up that information in my mind, so on my personal website — which is poorly maintained, but it’s chriscoyier.net — I like track it all, and I think I could probably go through that and look at years in which major things started happening to me in my career, and maybe I’d use that for my versioning system.
我在自己的个人网站上做的一件事，是因为我很想起自己的历史和东西-就像，你知道'97年6月在哪里？ 我想， 我想是个年轻人。 我不记得那一年的确切工作了。 我很难在自己的脑海中整理这些信息，因此，在我的个人网站(维护不善，但是是chriscoyier.net)上 ，我喜欢跟踪所有信息，我想我可能可以仔细研究一下在我的职业生涯中哪些重大事情开始发生，也许我会在版本控制系统中使用它。
So I’d say maybe my first web job was in 2007. We’ll call that beta Chris, you know, and then maybe 1.0 came out in like 2010, when I started doing startup stuff, you know — let’s call it like V4.
所以我想说我的第一个网络工作是在2007年。我们称它为Beta Chris ，然后大概是2010年问世，当我开始做启动工作时，就知道了–让我们称之为V4 。
Tim [2.30]: 蒂姆[2.30] ：So, one of the things we wanted to talk about today, since, Chris, you are all over the place on the web, and — especially with CSS-Tricks — going on to explain and define a lot of the new trends that are going on, I wanted to talk about where you see web development going.
因此，我们今天要谈论的一件事，因为克里斯，您无处不在，并且-特别是使用CSS-Tricks-继续解释和定义了许多新趋势接下来，我想谈谈您看到Web开发的方向。
That means, is it getting easier? Is getting harder? How have you noticed some of the trends in the industry change as you’ve been writing and speaking about the web? So, stuff like that.
就是说，变得越来越容易了吗？ 越来越难了吗？ 在撰写和谈论网络时，您如何注意到行业变化中的一些趋势？ 所以，这样的东西。
Chris: 克里斯：Yeah. Where is it going? is such a such a huge question. It’s probably — I don’t know — staying right where it is for the most part.
是的 去哪儿了 是一个如此巨大的问题。 大概-我不知道-在大多数情况下都保持正确的位置。
You see big discussions happen sometimes — Is the web doomed, is the web great, is the web whatever? It’s easy to get caught up in that, and it’s easy to think the web is doomed or something when you get caught up in a conversation like that, and you don’t really see it.
您会看到有时会进行大型讨论- 网络注定要失败，网络是否出色，网络是否有效？ 很容易陷入其中，当您陷入这样的对话中时，您很容易认为网络注定要失败，或者您并没有真正看到它。
There’s not a whole lot of evidence that there’s less websites being made, or less companies are reaching for websites. Just because one Silicon Valley company decides to not make a website, or tacobell.com’s home page says Go download this app, that the web is doomed.
没有太多的证据表明制作的网站减少，或者网站吸引的公司减少。 仅仅因为一家硅谷公司决定不建立网站，或者tacobell.com的主页说Go下载此应用程序 ，网络就注定了失败。
That stuff ends up being short-lived. And so I think the web is as big and healthy as it ever has and continues to go there. Because of some of the foundational principles of the web, like the URL is just so super duper useful, and there’s like nothing that’s kind of challenging the URL right now, that I feel just that alone will probably keep the web happy for a long time.
那东西最终是短暂的。 因此，我认为网络与以往一样庞大和健康，并将继续发展下去。 由于网络的某些基本原理，例如URL超级有用，而现在没有什么可以挑战URL了，我觉得仅此一点就能使Web长期保持幸福。
David [4:04]: 大卫[4:04] ：So it seems like the web itself is likely to hang around, but what about technologically? I mean, the way that you develop for the web has changed so dramatically — even since you started relatively recently.
因此，似乎网络本身可能会徘徊，但是技术方面呢？ 我的意思是，即使您是最近才开始开发Web的方式也已经发生了巨大变化。
Chris: 克里斯：Yeah, sure, and that’s easy to get caught up in, too. In fact, it’s almost a joke these days that there’s a new JavaScript framework every 20 days or whatever. I don’t know, there’s some kind of joke around it.
是的，当然，也很容易陷入困境。 实际上，最近每隔20天就会有一个新JavaScript框架，这几乎是一个笑话。 我不知道，周围有种玩笑。
I was at a university today, and I was talking with some students there, and one of the students expressed that exact opinion — that they felt like they learned a lot of JavaScript, and then took off for like three months to go do something else at the university or something — or had another job and kind of, like, left web development a little bit, as students do. They pop in and out of things, and came back, and they’re like, I felt useless. I feel like I didn’t know anything about JavaScript. I’m like, that’s so sad, because it’s like you totally do.
今天我在一所大学，当时我正在和那里的一些学生聊天，其中一个学生表达了确切的意见-他们觉得自己学到了很多JavaScript，然后花了三个月的时间去做其他事情在大学之类的地方–或从事另一份工作，例如像学生一样，离开了网站开发。 他们突然冒出来，又回来了，就像， 我觉得没用。 我觉得我对JavaScript一无所知。 我想，这太可悲了，因为就像您完全一样。
It sucks that they felt defeated for some reason, even though they shouldn’t, probably. The JavaScript fundamentally hasn’t changed that much in three months. Maybe there’s some other library that’s out or something. But your current knowledge is fine. In fact, please keep using it, you know. I think that’s sad when people feel defeated just because some new thing comes along.
令人遗憾的是，他们可能出于某种原因而感到失败，即使他们不应该这么做。 从根本上讲，JavaScript在三个月内没有发生太大变化。 也许还有一些其他的库没用了。 但是您当前的知识还不错。 实际上，请继续使用它。 当人们因为出现一些新事物而感到失败时，我认为这很可悲。
That said, I think I take your meaning in that, over the years — if we call that a ten-year chunk, which is like half-ish of the web being around — it feels a lot different, and sometimes it’s easy to feel sorry for somebody who’s starting now.
就是说，我认为我多年来一直是您的意思-如果我们称其为十年的一块，就像网络的一半散布-感觉很不一样，有时很容易感到对于现在开始的人感到抱歉。
Because they’re like, wow, you know, the tooling is so weird, and where do you even start? And where does your skill set fit into this very complicated skill set of doing things for the web? Which isn’t just like, I’m going to design something and then see if I can hack it together with a couple technologies and, ta-da, website. It’s like no no no, it’s databases, and security, and semantics, and content strategy, and designing for a crisis, and all these big topics that a lot of people are talking about, including on CSS-Tricks. You might go and read something about that and then be like, I’m new. How does this fit in with me? Where do I even start? What is becoming a web designer like these days? So somebody’s brand new to it, that’s just starting today in web design — what is it like for them? I bet it does feel more overwhelming than it did when I’ve started.
因为它们就像，哇，您知道，工具是如此古怪，您甚至从哪里开始呢？ 在这种非常复杂的网络服务器技能中，您的技能又适合什么地方呢？ 不仅如此，我将设计一些东西，然后看看是否可以使用几种技术和网站来破解它。 这就像不，不是，它是数据库，安全性，语义，内容策略，为危机而设计以及许多人都在谈论的所有这些大主题，包括CSS-Tricks。 您可能会去阅读有关的内容，然后变得像我一样。 这如何适合我？ 我什至从哪里开始？ 如今，如何成为一名网页设计师？ 因此，某人刚刚接触到它，这才是Web设计的今天-对他们来说是什么感觉？ 我敢打赌，它确实比起步时更让人不知所措。
Tim [6:42]: 蒂姆[6:42] ：Here’s a fun question. Let’s say that you needed to build a new website tomorrow, and it could be of any sort of simplicity or functionality. What are the types of technologies, new APIs, frameworks you would be interested in using?
这是一个有趣的问题。 假设您明天需要建立一个新网站，它可能具有任何简单性或功能性。 您有兴趣使用什么技术，新的API和框架？
Chris: 克里斯：Yeah, the boring answer is It depends! But it’s my favorite answer. I’d reach for HTML for sure. That one seems like it’s been sticking around!
是的，无聊的答案取决于情况！ 但这是我最喜欢的答案。 我肯定会接触HTML。 那似乎一直在坚持！
David [7:09]: 大卫[7:09] ：I’ve heard about that one. That’s supposed to be really good.
我听说过那个。 那应该真的很好。
Chris: 克里斯：Uh-huh, that one has really been around — it’s hung on for a long time. And there’s certainly room for specializing in HTML, I think — like really good HTML. It’s rarer than you’d think for something that’s so fundamental. I see people struggle with what to put where and what you can do with what. But anyway, that’s always involved with everything, so it would probably be always involved with anything I build.
嗯，那个真的存在了-它已经挂了很长时间了。 我认为，当然有专门研究HTML的空间-就像真正HTML一样。 它比您想像的要稀有得多。 我看到人们为放置在什么地方以及使用什么可以做什么感到苦恼。 但是无论如何，这总是涉及到所有事物，因此它可能总是与我构建的任何事物有关。
And then what? I don’t know. It’s so hard to say. You can do so much with just HTML and CSS. And I got a long way in my career by just sprinkling a little jQuery on top of that. I felt like I was uber-powerful. Sprinkle a little WordPress on top of that and you’re king of the world.
然后什么？ 我不知道。 很难说。 仅使用HTML和CSS就可以完成很多工作。 通过在其上撒些jQuery，我在事业上走了很长一段路。 我觉得自己超级强大。 在上面撒上一些WordPress，您就是世界之王。
I can do anything. I have data at my command. I have a little interactivity at my command. I can style anything. I love CSS. I kind of made my my career off really digging into CSS and understanding it and troubleshooting it. Still to this day I absolutely love taking a design that somebody else has done, and analyzing it, cutting it up and figuring out how to build it in HTML and CSS. I absolutely love that.
我什么都能做。 我掌握了数据。 我的命令有点互动性。 我可以样式化任何东西。 我喜欢CSS。 我有点使我的职业真正地去研究CSS并理解它并对其进行故障排除。 直到今天，我仍然绝对喜欢接受别人完成的设计，然后对其进行分析，分解并弄清楚如何在HTML和CSS中进行构建。 我绝对喜欢。
That’s what I would do. So if the project at hand was make a site for my sister’s new Kombucha brewing company, I’d be like, Hell yeah, I really wanna do that. I’d be like, So what’s the deal? Is it a five page site? Maybe I’ll just rock it with HTML, CSS and JavaScript.
那就是我会做的。 因此，如果手头的项目是为我姐姐的新Kombucha酿造公司提供场地，我会想， 地狱，是的，我真的很想这样做。 我想， 那是怎么回事？ 它是一个五页的网站吗？ 也许我会用HTML，CSS和JavaScript对其进行摇滚。
Oh, she wants to have just a simple blog on top of that. Maybe I’ll throw it on Jekyll, just because that seems pretty easy and it encourages writing in Markdown, which I enjoy. We don’t need that much.
哦，除此之外，她只想创建一个简单的博客。 也许我会把它扔给Jekyll，只是因为这看起来很简单，而且它鼓励我喜欢用Markdown写作。 我们不需要那么多。
And she’s like, Well, we’ll throw comments on there. And I’ll probably stay on Jekyll, maybe throw a little Disqus on top of that, kind of thing.
她就像， 嗯，我们会在那儿发表评论。 而且我可能会留在Jekyll上，也许在此之上加上一点Disqus。
Well, now she’s at different brewery events and every month, every week she’s got to hop in the website and start editing her calendar, or when she’s gonna be where and stuff.
好吧，现在她参加不同的啤酒厂活动，每个月，每个星期都要跳到网站上并开始编辑自己的日历，或者什么时候去哪里。
And you know what? I think this is database territory now, so I probably won’t hand roll something with the database, because I just don’t do that and that’s not my forte. Just being me, I’d reach right for WordPress, because I feel like that handles that. I’d find some plugin that handles scheduling and stuff, and rock that on there.
你知道吗？ 我认为这是现在的数据库领域，所以我可能不会手动使用数据库，因为我只是不这样做，而这并不是我的专长。 只是我一个人，我会正确地使用WordPress，因为我感觉可以解决这个问题。 我会找到一些可以处理计划和工作的插件，然后将其放在那里。
But it’s still HTML and CSS. I’m just using it within a PHP framework that is WordPress. And then maybe there’s some interesting JavaScript stuff that has to happen, but maybe not, who knows?
但是仍然是HTML和CSS。 我只是在WordPressPHP框架中使用它。 然后也许有一些有趣JavaScript事情发生了，但也许不是，谁知道呢？
But then if there’s something else — somebody’s like, Okay, Chris, we’re gonna build a really simple fantasy football app, or something. And there’s going to be stuff, it’s just a little more complicated. There’s a grid of stuff going on, and I can drag players from here to there, and it just feels like a very highly interactive kind of app. I’d be like, there’s a lot of state happening here. It’s really more of an application-like thing. These days, I think React is cool. I’d probably reach for a React Redux kind of situation.
但是如果还有其他事情-像克里斯，好吧，我们将构建一个非常简单的幻想足球应用程序或其他东西。 而且会有很多东西，只是稍微复杂一点。 发生了很多事情，我可以将玩家从此处拖到那里，感觉就像是一种高度互动的应用程序。 我想，这里发生了很多状态。 它实际上更像是一个应用程序类的东西。 这些天，我认为React很酷。 我可能会遇到React Redux的情况。
But that’s just today, just because it seems cool and fun, it clicks with me a little bit. There’s any number of other things that you could reach for that would get the same things done, but hopefully that answers the question a little bit.
但这只是今天，只是因为它看起来很酷而且很有趣，所以它一点点地伴随着我。 您可以完成许多其他事情来完成相同的任务，但是希望可以回答这个问题。
David [10:34]: 大卫[10:34] ：I think that that’s a good formulation. Basically looking at the project and trying to pair it down to what would be the minimal set of complex technologies I could throw at this in order to accomplish the goal. And focusing on the fundamentals first. And I love that you come back to HTML. So many people seem to neglect the importance of having a solid foundation — a solid structure behind how things are organized.
我认为这是一个很好的表述。 从根本上看项目，然后尝试将其与我可以用来实现目标的最少的复杂技术组合起来。 并首先关注基础知识。 我喜欢您回到HTML。 如此众多的人似乎忽略了拥有坚实基础的重要性-这是事物组织背后的坚实结构。
Chris: 克里斯：So what are yours? Let’s say you had to build this five-page Kombucha brewing site. What would you reach for?
那你呢 假设您必须建立这个五页的康普茶酿造场。 你会追求什么？
Tim: 蒂姆：All right, we’re doing this. I think one of the sites that I really admire — speaking in terms of simplicity — is Paul Lewis’s blog, which is literally just CSS and HTML. Quite possibly one of the fastest blogs that I’ve seen around, and I always like that approach. If I can just get the job done with that, then by all means. But knowing me, I like to throw fancy things in there when I can. And so some JavaScript would probably make its way in there.
好吧，我们正在这样做。 我认为，就简单性而言，我真正佩服的网站之一是Paul Lewis的博客 ，该博客实际上只是CSS和HTML。 我可能是最快的博客之一，我一直喜欢这种方法。 如果我能完成这项工作，那么一定可以。 但是认识我，我喜欢在可能的时候在里面扔一些花哨的东西。 因此，一些JavaScript可能会加入其中。
But as you add levels of complexity, I very much like to challenge myself and see what I can do with just vanilla HTML, CSS and JavaScript. It’s always been a challenge for me — How can I implement new design patterns here and really just learn more of the fundamentals of the language without reaching for a toolchain?
但是，当您增加复杂性级别时，我非常想挑战自我，看看仅使用原始HTML，CSS和JavaScript就能做什么。 这一直是我面临的挑战-我如何才能在这里实施新的设计模式，而实际上只是在不接触工具链的情况下学习更多语言的基础知识？
And that’s kind of just a personal quirk that I have. Every now and then there’s so much going on, you need structure, especially when there are a lot of people working on the thing. But yeah, my thing has always been standard HTML, CSS, JavaScript, and if I need a database, WordPress is right around the corner.
那只是我的一个个人怪癖。 时不时地发生很多事情，您需要结构，尤其是当有很多人在做这件事时。 但是，是的，我一直都是标准HTML，CSS，JavaScript，如果我需要数据库，WordPress指日可待。
Chris [12:23]: 克里斯[12:23] ：Yeah, so that’s what I was getting at — you’re kind of a WordPress person too. But there’s other things. That’s probably one that you and I would both be criticized for, probably, just because it’s like, Oh, you needed a calendar, so you went right to WordPress — little sledgehammer for a small problem kind of thing.
是的，这就是我的意思-您也属于WordPress。 但是还有其他事情。 这可能是您和我俩都将受到批评的原因，可能只是因为它就像， 哦，您需要一个日历，所以您就直接使用WordPress –有点问题的小铁锤。
But it’s like, fine, criticize me for it, I hear you. But also, reaching for the tools that you’re already comfortable with, I just don’t think that’s the end of the world. It seems like a silly argument to have, in a way. I’m productive with it, and I get it done, and I’ve been getting it done for a decade using that tool, and you’re still gonna criticize me? Okay, whatever.
但这很好，请批评我，我听到了。 而且，只要您已经熟悉了工具，我就认为这不是世界末日。 在某种程度上，这似乎是一个愚蠢的论点。 我的工作效率很高，我已经完成了，并且使用该工具已经完成了十年，您仍然会批评我吗？ 好吧都可以。
Tim: 蒂姆：Yeah, especially if, at the end of the day, you’ve made it something that is completely usable, and fast, and just good. Then, personally, as long as it meets those qualities and you can go edit it in the future, I don’t really care what you use. As long as you’re focusing on the user, maintainability, I think that’s a success in my book.
是的，尤其是在一天结束时，您已经使它变得完全可用，快速且良好。 然后，就个人而言，只要满足这些要求，并且您以后可以编辑它，我就真的不在乎您使用什么。 只要您专注于用户和可维护性，我认为这在我的书中是成功的。
David: 大卫：It’s a tough one, because there are new things coming up that really do add value and that take advantage of new technologies. The last thing that I did, I just pulled out an old WordPress blog and reimported it into Octopress and set it up on the back end of a Sinatra site.
这是一项艰巨的任务，因为即将出现的新事物确实可以增加价值并利用新技术。 我做的最后一件事，我只是拔出一个旧的WordPress博客，然后将其重新导入到Octopress中，并将其设置在Sinatra网站的后端。
Chris: 克里斯：Nice!
真好！
David: 大卫：And Sinatra’s been standing true for me for years and I love it. And it’s just — do a little bit of Haml and Sass and put up a Sinatra site and it handles everything you need to do.
多年来，辛纳屈(Sinatra)对我来说一直是正确的，我喜欢它。 只是-稍微做一下Haml和Sass并建立一个Sinatra网站，它可以处理您需要做的所有事情。
Chris: 克里斯：There you go. See, I get that. I’ve used those tools a little bit, I’m not afraid of them. But they’re not my go-to tools like they are for you. You just reached for those cuz they’re comfortable for you. And they’ve kind of proven themselves out over years for you, so yeah, I think that’s great. The web’s a good place, there are lots of tools.
妳去 看，我明白了。 我已经使用了一些工具，我并不害怕它们。 但是它们不是我想要的工具。 您只是想得到那些舒适的东西。 他们已经为您证明了自己多年，所以，是的，我认为那很棒。 网络是一个好地方，有很多工具。
David: 大卫：I believe that there are there are faster and better solutions on the back end than a Ruby solution — probably something with Node. And maybe something Express. I did a little bit of playing around with Go, but mostly for processing. But I’m really impressed with what it’s capable of, and I love the syntax of Go.
我相信，后端有比Ruby解决方案更快，更好的解决方案-可能是Node的解决方案。 也许是快递。 我在Go上做了一些尝试，但主要用于处理。 但是它的功能给我留下了深刻的印象，并且我喜欢Go的语法。
Tim [14:29]: 蒂姆[14:29] ：I have an article that I wrote on Go on scotch.io, and it’s basically just a tutorial with me trying to install it on Windows. It literally took me six hours to get this. It was a Friday night, I was like, I’m just gonna bang this out, and then I’m just gonna watch Netflix or something. Nope, I was up to 2 a.m. doing this thing. So, that’s all I have to offer that discussion.
我在scotch.io上在Go上写了一篇文章，而这基本上只是我试图在Windows上安装它的一个教程。 我花了六个小时才得到这个。 那是一个星期五晚上，我想， 我要把它拍出来，然后我要看Netflix之类的东西。 不，我最多2时才在做此事。 所以，这就是我要提供的所有讨论。
Chris: 克里斯：That always feels so scary to me, because even when you’ve got it, it’s like okay, that’s cool, that’s worth celebrating. You got it, I’m glad you wrote it down so other people can find it too. But it feels like it might be fragile at that point then. It was such hard work to get there. What if you’ve got to buy a new machine, because you dropped it in a puddle or something? Are you in for six hours again? Is it brittle at that point? Did you have to do weird hacky stuff to even get it? That always makes me so uncomfortable.
这总是让我感到恐惧，因为即使您掌握了它，也感觉还不错，这很酷，值得庆祝。 您知道了，很高兴您将其写下来，以便其他人也可以找到。 但是那时感觉好像很脆弱。 到达那里真是太辛苦了。 如果您因为将机器掉进水坑或其他东西而必须购买新机器怎么办？ 你又要六个小时吗？ 那时候脆吗？ 您是否必须要做怪异的hacky东西才能获得它？ 这总是让我感到不舒服。
David: 大卫：So Chris, actually, what are you playing with these days? You mentioned you’re playing with React. In terms of keeping in touch with what’s happening and new, what appeals to you, what sounds interesting?
克里斯，实际上，这些天你在玩什么？ 您提到您正在玩React。 在与正在发生的事情和新事物保持联系方面，什么吸引了您，听起来有意思吗？
Chris: 克里斯：Well, it’s true, we have a couple of new things that we’re building on CodePen that aren’t out yet. They’re just in development things, that we’ll just be like — we’re just gonna give React a shot, and Redux as well, which includes Webpack and Express and all that stuff too.
好吧，的确如此，我们在CodePen上构建了一些尚未发布的新功能。 他们只是在开发中 ，就像我们将要做的一样-我们只是要给React一个镜头，还有Redux，包括Webpack和Express以及所有这些东西。
So we’ll see how it goes. We’re maybe a month into it. It’s probably many months before hitting production. I’m excited about it.
因此，我们将看看情况如何。 我们可能要花一个月的时间。 可能要过几个月才能投入生产。 我对此感到兴奋。
For those of you that are familiar with CodePen a little bit, we have a PRO feature called Collab Mode on CodePen, and it’s a little bit like Google Docs. When you have the document open, and you’ve sent the URL to somebody else and they have the document open too, you see two cursors there and you can both type together and see what each other are doing.
对于那些稍微熟悉CodePen的人，我们在CodePen上提供了一个称为Collab Mode的PRO功能，有点像Google Docs。 当您打开文档并将URL发送给其他人并且他们也打开了文档时，您会在此处看到两个光标，并且可以一起键入并查看彼此在做什么。
That’s one of the PRO features of CodePen. Some people need it. When you need it, it’s there. You can go PRO and get it, and it works pretty good. But imagine what’s going on there behind the scenes, which I’ll get to in a minute. But there’s another feature called Professor Mode, which might even symbolize this a little bit more.
这是CodePen的PRO功能之一。 有些人需要它。 当您需要时，它就在那儿。 您可以使用PRO并获得它，并且效果很好。 但是，请想象一下幕后发生的事情，我将在一分钟之内解决。 但是还有另一个功能叫做“教授模式”，它甚至可能象征着这一点。
It’s similar to Collab, but it’s one-way only. So I’m typing, and I can send this URL to — for example — all of my students if I’m a teacher of some kind. And let’s say there’s 30 people watching you at this URL: as I type, every one of my keystrokes is being shown on their screen too, and it’s not a video, it’s like our actual interface.
它类似于Collab，但仅是单向的。 因此，我正在输入内容，如果我是某种类型的老师，则可以将此URL发送给所有学生。 假设有30个人在此URL上看着您：当我键入内容时，我的每一次击键操作也都显示在他们的屏幕上，并且它不是视频，而是我们的实际界面。
You can watch them code, but it’s not just the code: it’s like if I open a menu, the menu opens. If I change a select, the select changes; if I type into an input, that gets synced to them too. So they’re really watching like what it’s like to use this website. That’s state; everything about that is state.
您可以观看它们的代码，但不仅限于代码：就像我打开菜单一样，菜单也会打开。 如果更改选择，则选择也会更改； 如果我输入一个输入，它也会同步到它们。 因此，他们真的在看着使用此网站的感觉。 那是状态 ； 关于那的一切都是状态。
It’s like what’s open, what’s not open, what are the values of things. And we’re like, you know how we should do that? We should make it like a big JSON thing — just a blob of JSON that describes the state of … this is what we did years ago now.
就像是开放的，未开放的，事物的价值是什么。 我们就像，您知道我们应该怎么做？ 我们应该使它像一个大的JSON东西—只是描述…状态的JSON斑点……这就是我们几年前所做的。
And when something changes, we’ll have a little Pub/Sub model, so like, okay, this changed, then I’m gonna publish the fact that this changed, and I’m gonna have all these clients, these students, have an open connection — you know, a web socket connection — that are just waiting for things to be published.
当某些事情发生变化时，我们将有一个小的Pub / Sub模型，好吧，这已经发生了变化，然后我将发布这一变化的事实，然后我将拥有所有这些客户，这些学生，一个开放的连接(即Web套接字连接)，只是在等待发布内容。
They’re like, something was published, and I’m subscribed to that thing: I’m gonna see that, change my state locally, and then have the state change — like open the menu, for example, or add a new character to this input. So we wrote our own little state manager, Pub/Sub, web socket thing stitching together technologies and APIs and stuff to make that happen.
他们就像是已经发表了一些东西，而我订阅了该东西：我会看到这一点，在本地更改我的状态，然后更改状态-例如，打开菜单，或添加新角色此输入。 因此，我们编写了自己的小状态管理器Pub / Sub，Web套接字，将技术和API以及东西结合在一起以实现这一目标。
It’s totally complicated and it took a ton of work, and that’s why it’s a PRO feature of CopePen. And now you look at how React works: what is React and Redux? It’s just a big JSON object of state. Basically, it’s the same thing, only the actual framework works that way.
它非常复杂，需要大量的工作，因此这就是CopePen的PRO功能。 现在，您了解一下React的工作原理：React和Redux是什么？ 它只是状态的一个大型JSON对象。 基本上，这是同一回事，只有实际的框架才能这样工作。
When you change state in Redux, or whatever, it sprinkles through the UI and changes the state accordingly. But instead of us doing it with jQuery, and having to write our own Pub/Sub thing, and kind of faking it all — the reason I’m so interested in it is because it’s already what we’re doing.
当您在Redux或其他任何方式中更改状态时，它会散布在UI上并相应地更改状态。 但是，而不是我们使用jQuery来完成它，而不得不编写我们自己的Pub / Sub东西，并且弄虚作假了，我之所以对此感兴趣，是因为它已经在我们做的事情了。
It’s just we had to hand stitch it together, and now that we’re able to switch to this, we’re like, Wow, this feels really natural. It’s really nice.
只是我们不得不手工将其缝合在一起，现在我们能够切换到此，就像哇，这感觉很自然。 这太好了。
David [18:52]: 大卫[18:52] ：I like that you’re approaching it, because it’s something that solves the particular problem that you have, not just because it’s the next cool technology out there that people are talking about.
我喜欢您正在接近它，因为它可以解决您遇到的特定问题，而不仅仅是因为它是人们谈论的下一个炫酷技术。
Chris: 克里斯：Right, but it is a fundamentally different way to think about how to build an app than, like, the jQuery Land that I was used to, and I can see how some people feel pretty strongly about it. I’ve never heard somebody be like, This is the only way to build an app, raaah! — but I’m sure those people are out there.
是的，但是与我以前使用的jQuery Land相比，这是一种思考如何构建应用程序的根本不同的方式，我可以看到有些人对此有很强烈的感觉。 我从未听说有人会这样， 这是构建应用程序的唯一方法，哇！ -但我敢肯定那些人在那里。
I just choose not to listen to that kind of thing. But it does feel pretty smart. I can see how this could be applicable to lots of stuff. Okay, let me think about my app, and let me try to describe that app as a JSON blob essentially, and now how can I build out the UI of my site based on that state?
我只是选择不听那种事情。 但这确实很聪明。 我可以看到这如何适用于很多东西。 好的，让我考虑一下我的应用程序，让我尝试将该应用程序本质上描述为JSON Blob，现在如何基于该状态构建网站的UI？
And you can totally do it. You can pretty much do it for any website; you can think in that way and get it done. And it feels so satisfying, because then it’s just like — okay, so all I have to do is change the state and then the UI comes along for the ride, so you’re not writing as much soupy stuff that’s all interconnected. You’re just always changing that. That’s what they talk about when they talk about the single source of truth: there’s not just state happening all over the place. It happens in this one place, and then the UI just changes to reflect that one true state, which I think is so cool.
您完全可以做到。 您几乎可以在任何网站上使用它； 您可以以这种方式思考并完成。 感觉很满足，因为那样就好了，那么，我要做的就是更改状态，然后随便使用UI，因此您不必编写太多相互关联的汤匙。 您只是一直在改变它。 当他们谈论真理的单一来源时，他们就是在谈论这个问题：不仅状态发生在各处。 它发生在这一地方，然后UI发生变化以反映该真实状态，我认为这很酷。
It is not applicable to every site on the internet. There is lots of weird stuff to talk about. We’ve talked so much already about how HTML is like the thing: it is, and now you’re writing HTML and this super duper weird JSX thing, which the first time people say it, I love that they have this term for it, JSX shock.
它不适用于互联网上的每个站点。 有很多奇怪的事情要谈。 我们已经谈论了很多关于HTML的事情：它是，现在您正在编写HTML和这个超级傻瓜怪异的JSX东西，这是人们第一次说起它，我喜欢他们有这个术语，JSX震惊。
It’s just so bizarre that it’s hard to even look at, at first. [Laughs] And then you’re like, This is awesome.
太奇怪了，一开始甚至很难看。 [笑]然后您会觉得， 这太棒了。
Tim [20:49]: 蒂姆[20:49] ：So, speaking about all the good stuff about the web, there’s a question we haven’t asked before. Thought it might be interesting. Do you have a least favorite thing about the web?
因此，谈到网络上的所有好东西，我们以前没有问过一个问题。 认为这可能很有趣。 您是否对网络最不喜欢？
Chris: 克里斯：[Laughs] Well, if we’re scoping it to technology, I’m not sure, I’d have to think about it a little bit. But we’re all so familiar that what the web is, is we’re solving problems, and we’re building things for people, and people are so often the problem. We don’t have to have a big conversation about trolls or anything, but I’m sure you can all conjure that stuff up and imagine it.
[笑]好吧，如果我们将其用于技术领域，我不确定，我将不得不考虑一下。 但是我们都非常熟悉网络，是我们正在解决问题，我们正在为人们打造事物，而人们常常是问题所在。 我们不必就巨魔或其他任何东西进行激烈的交谈，但是我敢肯定，你们都可以想到这些东西并将其想象出来。
But it’s funny how so often the features of what you’re building for the web has to accommodate for that in such a way that it prevents us from building cool things. In the history of CSS-Tricks occasionally, we’ve been like — Let’s demonstrate how a database works and, to demonstrate how this database works, we’ll make a little chat client.
但是很有趣的是，您为网络构建的功能经常需要适应这种情况，以至于阻止我们构建酷炫的东西。 偶尔在CSS-Tricks的历史中，我们就像- 让我们演示一个数据库的工作方式，并且为了演示该数据库的工作方式，我们将创建一个小型的聊天客户端。
And we’ll just put up a thing where you can put a textarea and you can type in it and I’ll save what people wrote to that textarea and then the next person can come along and see it. These days, that sets off every red flag in the book, because the second you do something like that on the web, it’s abused immediately.
我们将放置一个东西，您可以在其中放置文本区域，然后键入内容，然后保存人们在该文本区域中写的内容，然后下一个人可以看到它。 这些天来，这引起了书中的每一个危险信号，因为第二次您在网络上执行类似的操作，就会立即被滥用。
Even on a really nice, good, generally well-behaved community like CSS-Tricks, there’s going to be awful words and awful things, anonymity plus the Internet, so you just can’t do that. It’s so ridiculous that we can’t have a public place for people to write things without having all kinds of security controls and people controls in place to police that kind of thing.
即使在CSS-Tricks这样非常好的，良好的，且通常行为举止良好的社区中，仍然会有可怕的词和可怕的事物，匿名性以及Internet，所以您将无法做到这一点。 太荒谬了，如果没有各种安全控制措施和人员控制措施来监管这类事情，我们就无法在公共场所为人们编写东西。
Again, that’s the job, but it’s just a bummer that that’s the case. Or if we’re working on CodePen, and we’re, like, maybe we should make public chatrooms that anybody can build, or something. That would be the same problem. Or maybe we’ll make some DM system so users can talk to each other.
再说一次，那是工作，但事实真是太糟糕了。 或者，如果我们正在使用CodePen，并且我们喜欢，则我们应该建立任何人都可以建立的公共聊天室，或者其他东西。 那将是同样的问题。 或者，也许我们将制作一些DM系统，以便用户可以彼此交谈。
The tech behind that is easy. The social implications of that are very hard and complicated, and that prevents so much stuff happening from the web. That feature would take us three times as much time to think through from an abuse and social implication, and how do we do it properly, than the tech. The tech part is just almost trivial compared to what it does to a community.
背后的技术很容易。 这样做的社会意义非常艰巨和复杂，并且可以防止网络上发生太多事情。 该功能将使我们从滥用和社会影响以及如何正确执行方面进行思考所需的时间是技术的三倍。 与对社区所做的事情相比，技术部分几乎微不足道。
David [23:14]: 大卫[23:14] ：It’s the classic UX design issue. Everything could be so much better without users.
这是经典的UX设计问题。 没有用户，一切都会变得更好。
[Laughter]
[笑声]
This has been fantastic. Chris, I want to thank you so much for joining us. Where can people find you online? You’re doing so many different things.
这真是太棒了。 克里斯，非常感谢您加入我们。 人们在哪里可以在线找到您？ 您正在做很多不同的事情。
Chris: 克里斯：Yeah, I have ChrisCoyier.net, which will point you at CodePen, CSS-Tricks and ShopTalk.
是的，我有ChrisCoyier.net，它将为您指向CodePen，CSS-Tricks和ShopTalk。
Those are my three big projects, but yeah, I’m pretty easy to find. You know my Twitter is usually my social network of choice, where I am @ChrisCoyier — C-O-Y-I-E-R is how you spell my last name. That’s just a hodgepodge of weirdness, but that will also point you to things and we can talk and converse and be friends. Social media friends.
那是我的三个大项目，但是，是的，我很容易找到。 您知道我的Twitter通常是我选择的社交网络，我在这里@ChrisCoyier -COYIER是您拼写我的姓氏的方式。 那只是怪诞的大杂烩，但这也将使您指向事物，我们可以交谈，交谈并成为朋友。 社交媒体朋友。
David: 大卫：Fantastic, keep it weird. Thank you again for joining us on the Versioning Show today.
太棒了，请保持怪异。 再次感谢您加入我们今天的Versioning Show。
Chris: 克里斯：Sure, it was a pleasure. Thanks fellas.
当然，这是一种荣幸。 谢谢伙计们。
Wow. What a powerhouse. He’s doing so many things.
哇。 多么强大。 他在做很多事情。
Tim: 蒂姆：Yeah, one of the things that I really like about Chris is there’s just so much energy. When he’s talking on a show, or in person, or if you’ve had the pleasure of seeing one of his talks at a conference, there is really just this powerhouse of energy that comes along with him, and it’s very motivating, definitely for me.
是的，我非常喜欢Chris的事情之一就是能量很大。 当他在表演中或亲自演讲时，或者如果您有幸在会议上看到他的演讲之一时，他确实伴随着这种强大的能量，这非常激励人，绝对是为了我。
David: 大卫：I know, I first discovered him back when he was doing the CSS-Tricks things, because, at that time, as he said, there really weren’t other good resources out there to find out about the ways to accomplish these tricks. And he was putting together some of the most useful information out there.
我知道，我是在他做CSS-Tricks的时候第一次发现他的，因为那时，正如他所说，当时确实没有其他好的资源来找到实现这些技巧的方法。 他正在整理一些最有用的信息。
I liked also the clarity with which he spoke about the importance of structure in a site. I’m one of those people who think back to the bones of the site as being the HTML. But he was also talking about the bones of the interactions on the site being the state that it travels through, and I like the way he visualized that.
我也很喜欢他讲清楚站点中结构的重要性。 我就是那些回想起HTML站点的人之一。 但是他还谈到了网站上交互的基本要素，即交互所经过的状态，我喜欢他将其可视化的方式。
You’re walking people through the state of something, and that is the user experience of how it happens.
您正在引导人们了解事物的状态，这就是用户对事物发生方式的体验。
Tim: 蒂姆：Yeah, and one of the things that led to, which I like a lot as well, was the simplicity first approach. You think about the basic job that I need to get done and select the technology from there.
是的，而我最喜欢的结果之一就是简单性优先方法。 您考虑一下我需要完成的基本工作，然后从中选择技术。
I like that idea, because it’s very friendly to new developers. A lot of times you’ll see — How do I get a site? You get React, Redux, Babel and Webpack, and then you start building out your thing. In reality, it’s like, look at the thing that you need to build, and if you are a beginner, then hopefully it’s something simple so you don’t go insane trying to figure this stuff out.
我喜欢这个想法，因为它对新开发人员非常友好。 很多时候您会看到- 我如何获得一个网站？ 您获得了React，Redux，Babel和Webpack，然后开始构建自己的东西。 实际上，就好像要看一下您需要构建的东西，如果您是初学者，那么希望它很简单，这样您就不会疯狂地尝试找出这些东西。
And just use the technology, and only the technology that gets that thing done. I mean, that’s definitely how I learned. It was, this is exactly what I need to do, I’m going to kind of put my blinders on and focus on exactly the job at hand. And once I feel comfortable enough, or once I actually need more, then I will go and try new technologies and try new things.
只需使用技术，仅使用完成任务的技术即可。 我的意思是，那绝对是我学到的东西。 确实，这正是我需要做的，我将把我的盲目镜放在上面，并专注于手头的工作。 一旦我感到足够舒适，或者一旦我真正需要更多，我就会去尝试新技术并尝试新事物。
But a lot of times when people email me, ask me, I need some help with my career, or, I want to get into web development, what do I do? I get a lot of questions like, Should I learn React? or Should I learn jQuery? My answer is always the same: learn the fundamentals of language, learn the basic stuff first, start small, and you won’t get burnt out.
但是很多时候人们向我发送电子邮件，问我， 我的职业需要帮助 吗 ，或者， 我想从事网络开发，我该怎么办？ 我遇到很多问题，例如， 我应该学习React吗？ 还是我应该学习jQuery？ 我的答案始终是相同的：学习语言的基础知识，先学习基础知识，从小做起，就不会被淘汰。
David [26:46]: 大卫[26:46] ：It’s a challenging thing figuring out what to start with. I think it took me years before I realized that if you want to build Basecamp, you use Rails, but if you don’t want to build Basecamp, you don’t necessarily use Rails. You use something that is more appropriate to whatever it is you want to learn.
弄清楚从什么开始是一件充满挑战的事情。 我想花了好几年的时间才意识到，如果您想构建Basecamp，就可以使用Rails，但是如果您不想构建Basecamp，就不必使用Rails。 您使用的内容更适合您想要学习的内容。
I think that it takes a certain level of skill and experience to be able to look at your project and recognize which of the technologies — there are so many — is going to be the appropriate one to support your needs. And trying to pare it down to what is the most basic thing that I could start with, and what’s the smallest piece that I could fit in that can accomplish what I need to do.
我认为，需要一定水平的技能和经验才能看清您的项目并认识到哪种技术(数量如此之多)将是适合您需求的合适技术。 并尝试将其缩减为我可以做的最基本的事情，而我可以做的最小的一件事情可以完成我需要做的事情。
Tim: 蒂姆：Yeah, sometimes for me it’s refreshing to look at a project that could take something more difficult to build and simplify it. I work on an ecommerce website, and we’re changing platforms right now, and we had a chance to pick a JavaScript framework and a very robust back end.
是的，有时对我来说，看一个可能会更难以构建和简化项目的项目令人耳目一新。 我在一个电子商务网站上工作，我们现在正在更改平台，并且有机会选择一个JavaScript框架和一个非常强大的后端。
And I settled on taking the simplicity approach first — even for that, even for an ecommerce platform, when lots of people are turning their ecommerce platforms into single page applications. And I thought to myself, let’s make this simple, let’s make this just HTTP, HTML, CSS, JavaScript first, and add functionality on there, using a progressive approach.
我决定首先采用简单方法-即便如此，甚至对于电子商务平台，当很多人都将其电子商务平台转变为单页应用程序时。 我对自己想，让我们简化一下，让我们先将其制作成HTTP，HTML，CSS，JavaScript，然后使用渐进方法在其中添加功能。
We ended up with a few kilobytes of JavaScript, a few kilobytes of CSS, every page is server rendered, and kind of bootstrapped into a richer experience from there, and it’s such a relief. It’s such a relief when something goes wrong. I know I don’t have to dive deep into something and just go on a journey.
我们最终得到了几千个JavaScript，几千个CSS，每个页面都是服务器呈现的，并且从那里引导进入了更丰富的体验，这真是一件轻松的事。 当出现问题时，这真是一种解脱。 我知道我不必深入研究某些东西，而只是去旅行。
Most of the time, it’s like, this can only be one of four things, and I just know what to expect. So I’m a fan of boring and simple.
多数情况下，这只能是四件事之一，我只知道会发生什么。 所以我很无聊和简单。
David [28:55]: 大卫[28:55] ：It sounds like you’re becoming a mature curmudgeon of an engineer yourself.
听起来您自己已经成为一名成熟的工程师。
Tim: 蒂姆：Maybe just an old man.
也许只是个老人。
David: 大卫：I liked that Chris turned the tables on us and started asking us what we do, and what we’re working on. I don’t think anybody’s asked us that before.
我喜欢克里斯反败为胜我们，开始问我们什么，我们做什么，以及我们正在努力。 我认为以前没有人问过我们。
Tim: 蒂姆：Yeah, I liked that.
是的，我喜欢那个。
David: 大卫：And it gave me a chance to find out more about what you’re working on, too.
这也使我有机会了解更多有关您正在从事的工作。
Tim: 蒂姆：Yes, very true.
是的，非常正确。
David: 大卫：This was a great show, and I really enjoyed having Chris on, and it’s so impressive all of the things that he’s doing.
这是一个很棒的节目，我真的很喜欢克里斯，而且他所做的所有事情都给我留下了深刻的印象。
It was a reminder of just how broad his effect has been on web development and then web education these days.
这使人想起了他这些天对网络开发和网络教育的影响。
Tim: 蒂姆：Yeah, in fact, the JavaScript pattern that I use today to build applications I lifted from his site — which I didn’t get a chance to say, but interesting fact.
是的，事实上，我今天使用的 JavaScript模式来构建我从他的站点提起的应用程序-我没有机会说，但很有趣。
David: 大卫：Well, he’ll find out when he hears the show.
好吧，他会在听到节目的时候找出来。
Tim: 蒂姆：Yes!
是!
Well, thank you so much for listening, everybody. We always enjoy getting to talk technology with all of you.
好，非常感谢大家的倾听。 我们总是喜欢与大家交谈技术。
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。 请随时在Twitter( @versioningshow)上向我们发送您的评论，并在iTunes上给我们评分。
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-4-with-chris-coyier/
相关资源：jdk-8u281-windows-x64.exe