css tricks

by Preethi Kasireddy

通过Preethi Kasireddy

电线之间：接受CodePen和CSS-Tricks声望的Chris Coyier访谈 (Between the Wires: An interview with Chris Coyier of CodePen & CSS-Tricks fame)

I interviewed the co-founder of CodePen.io, a well-known collaboration “playground” for the front-end, and creator of CSS-Tricks, a site dedicated to teaching all things web design and development, and the co-host of Shop Talk Show, a live podcast about front end web design, development, and UX.

我采访了CodePen.io的共同创始人， CodePen.io是一个著名的前端协作“游乐场”，也是CSS-Tricks的创建者， CSS-Tricks是一个致力于教授所有网页设计和开发的网站，并且是CSS的共同主持人 Shop Talk Show ，有关前端Web设计，开发和UX的实时播客。

告诉我们一些关于您自己的信息-您在哪里长大的，您的童年时代如何？ (Tell us a little bit about yourself — where did you grow up and what was your childhood like?)

I’m a pure Midwesterner — as I sit now, I’m in Milwaukee, Wisconsin which isn’t too far from where I grew up in Madison, Wisconsin.

我是纯粹的中西部人-我现在坐在威斯康星州密尔沃基市，距离我在威斯康星州麦迪逊市长大的地方不太远。

I had a super normal (at least my version of normal) upbringing — a middle class family just living in a small town. I got a computer at a young age, my ideas were encouraged, I had an opportunity to get a good education and took it. I feel like the cards lined up for me in an interesting way. In high school, I took a programming class that excited me, and eventually I went to college for it.

我的成长过程非常正常(至少是正常情况下的版本) -一个只住在小镇上的中产阶级家庭。 我很小的时候就拥有一台计算机，我的想法受到鼓舞，我有机会接受良好的教育并接受了它。 我觉得这些卡片以一种有趣的方式排队。 在高中时，我参加了编程课，这使我兴奋，最后我上了大学。

告诉我们您的初次编程经验。 (Tell us about your first programming experience.)

It took until a high school elective for me to get legitimate programming experience. I had a teacher named Mr. Scott, who was such a positive influence. In his class, the language that I took to the most was called Turbo Pascal. Mr. Scott taught us the basics of course, but he encouraged us to get into real projects right away. I remember the very first significant product that I worked on was just a Pascal version of the Game of Life.

直到高中选修课程我才获得合法的编程经验。 我有一位名叫史考特先生的老师，他的影响力非常大。 在他的课堂上，我最常使用的语言称为Turbo Pascal。 斯科特先生当然会教我们基本知识，但他鼓励我们立即进入实际项目。 我记得我开发的第一个重要产品只是《生命游戏》的Pascal版本。

The game ended up being published in a little magazine and I was totally hooked after that.

最终，该游戏被发布在一本小杂志上，此后我完全被迷住了。

在您的播客中，您提到稍后会在大学攻读计算机科学学位，但最终转而攻读某种艺术专业。 您能告诉我们这一转变以及您的技能，兴趣和职业如何发展吗？ (In your podcast you mention later pursuing a computer science degree in college, but ultimately switching to some kind of art major. Can you tell us about that transition, and how your skills, interests, and career evolved?)

“Laziness, selfishness, and jealousy made me switch to art, but it actually turned out to be the right choice.”

“懒惰，自私和嫉妒让我转向艺术，但这实际上是正确的选择。”

After all the positive experiences I had in high school, when I went to college I knew immediately that I wanted to major in Computer Science. The degree was called Management Computer Systems, which should have been a red flag. Not surprisingly, it turned out to be more about the business-side of programming.

在高中经历了所有积极的经历之后，当我上大学时，我立即知道我想攻读计算机科学专业。 该学位被称为“ 管理计算机系统”，应该是一个危险信号。 毫不奇怪，事实证明，它更多地涉及编程的业务方面。

I was learning languages that I wasn’t interested in, and the teachers weren’t especially engaging. It was a bummer. It didn’t slaughter my dream of becoming a programmer, but I was definitely a little disenchanted with the idea. I was still a full-blown computer nerd on the side, though.

我正在学习自己不感兴趣的语言，而老师也没有特别投入。 真是可惜。 这并没有辜负我成为一名程序员的梦想，但我绝对对这个想法有些失望。 不过，我仍然是一名成熟的计算机书呆子。

In the meantime, I was living with a ceramics major and he had this great community of art students. I’d tag along with him to art parties, and I’d go hang out with him in the studio at the art building. I truly believed that his life in college was way more awesome than mine. He had found a real passion, he had found a better community. Honestly, I was pretty jealous of his college life.

在此期间，我正与一个陶瓷专业一起生活，他有这个伟大的艺术系学生。 我会和他一起参加艺术派对，然后和他一起在艺术大楼的工作室里闲逛。 我真的相信他在大学里的生活比我的要伟大。 他找到了真正的激情，找到了更好的社区。 老实说，我很嫉妒他的大学生活。

Eventually, I made the decision to switch from computer science to art. I had a feeling that what I studied in college didn’t matter that much, and that life would ultimately work out.

最终，我决定从计算机科学转向艺术。 我有种感觉，我在大学里学的东西没什么大不了的，生活终究会成功的。

My parents are usually very supportive of me, but when I told them I dropped Computer Science they were mad. They were worried that I was throwing away my college career. But, I just marched right into the administrative office and told them I was switching.

我的父母通常非常支持我，但是当我告诉他们我放弃计算机科学时，他们很生气。 他们担心我要放弃我的大学生涯。 但是，我刚刚走进行政办公室，告诉他们我要换班了。

The good news is that I took to it right away. I loved it. It was the best thing I ever did. I graduated with a BA in ceramics from the University of Wisconsin-Whitewater.

好消息是我马上就接受了。 我爱它。 这是我做过的最好的事情。 我毕业于威斯康星州怀特沃特大学的陶瓷学士学位。

在学习了艺术专业之后，您在毕业和开始CodePen之间做了什么？ 您之间有很多工作吗？或者您对想要做的事情有想法吗？ (After majoring in art, what did you do between graduation and starting CodePen? Did you have a bunch of jobs in between or did you have an idea of what you wanted to do?)

“It turned out to be a hard to just jump in and get hired as a designer. I didn’t have enough confidence.”

“事实证明，很难进入并被聘为设计师。 我没有足够的信心。”

Kind of. There is a decent span in there.

有点儿。 那里有一个不错的跨度。

When I left college, my fears were realized. I had no idea what I was actually going to do. I was motivated to get a job right away, and I applied to a bunch of places, but I didn’t have any experience.

当我离开大学时，我的恐惧得以实现。 我不知道我实际上要做什么。 我很想马上找到一份工作，因此我申请了很多地方，但是我没有任何经验。

It turned out to be a hard to just jump in and get hired as a designer. I didn’t have enough confidence.

事实证明，很难进入并被聘为设计师。 我没有足够的信心。

Luckily, my mom was in the printing industry and knew a lot of people around town. So I ended up going into the digital printing press after college. It was pretty technical work, and it was interesting in its own way. I’d take designs and turn them into metal plates to go on the presses. It’s a kind of art — you can think of it like the CSS of print, where you take a design and turn it into reality. So, there’s actually a connection there, between printing and programming.

幸运的是，我妈妈从事印刷业，在镇上认识很多人。 所以我大学毕业后就去了数码印刷机。 这是一项非常技术性的工作，并且以它自己的方式很有趣。 我会进行设计，然后将它们变成金属板，然后放在印刷机上。 这是一种艺术，您可以像印刷CSS一样想到它，在这里进行设计并将其变为现实。 因此，实际上在打印和编程之间存在联系。

But it wasn’t that interesting — I knew I wasn’t going to make a career out of the printing press, because I wasn’t entirely happy doing it. There isn’t a fun community around it. It was really just a job.

但这并不是那么有趣-我知道我不会从印刷机上谋职，因为我做事并不完全高兴。 周围没有一个有趣的社区。 这真的只是一项工作。

On the side, I was into music. I was playing in a Bluegrass band. One day I decided our band needed a website, and that became an excuse to make a website. That was when I began to realize how cool the web is. I wanted to jump in. Then, just through a stroke of luck, there was an opening at a really small shop for an inexperienced web designer and I snatched it up. That’s how I became a professional web designer overnight.

在一边，我喜欢音乐。 我在蓝草乐队演奏。 有一天，我决定我们的乐队需要一个网站，这成为制作网站的借口。 那是我开始意识到网络多么酷的时候。 我想跳进去。然后，碰巧的是，在一家很小的商店里有一家没有经验的Web设计师开了一家店，我把它抢了下来。 这就是我一夜之间成为专业网页设计师的方式。

您也曾被SurveyMonkey收购。 那是您决定离开威斯康星州的时候吗？ (You were also at a company that was acquired by SurveyMonkey. Was that when you decided to move away from Wisconsin?)

Right. That was the part that I skipped over. After working at the agency in Madison I ended up working for a company called Wufoo in Tampa, Florida. I moved down there to work with them, which is probably one of the best decisions I ever made.

对。 那是我跳过的部分。 在麦迪逊的代理商工作后，我最终在佛罗里达州坦帕市的一家名为Wufoo的公司工作。 我搬到那里与他们合作，这可能是我做过的最好的决定之一。

It was a great team. I’m still friends with everyone. They were building something great, they thought deeply about what they were doing and how they were working. They were good to the people they worked with and their customers. They were eventually acquired by SurveyMonkey, which turned out to be a positive outcome.

这是一支很棒的团队。 我仍然是每个人的朋友。 他们正在建造一些很棒的东西，他们对自己在做什么和如何工作进行了深思。 他们对与他们一起工作的人和他们的顾客都是好事。 他们最终被SurveyMonkey收购，结果是一个积极的结果。

In fact, I met my two co-founders, Alex Vazquez, and Tim Sabat at Wufoo. We worked there together, and then at SurveyMonkey, and now they’re my co-founders at CodePen. We’ve been working together for a long time.

实际上，我在Wufoo遇到了我的两位联合创始人Alex Vazquez和Tim Sabat。 我们在那里一起工作，然后在SurveyMonkey工作，现在他们是我在CodePen的联合创始人。 我们已经合作了很长时间。

您最终如何发现要使用CodePen解决的问题？ (How did you end up discovering the problem that you wanted to solve with CodePen?)

Well, it was right at that time actually. I worked as a web developer for the agency for many years. In 2007, I decided to launch CSS-Tricks. I was learning it quickly, and I was really into it, and I just wrote down what I was learning using CSS-Tricks as the medium. It’s still around today. In fact, I published an article on CSS-Tricks this morning.

好吧，实际上是在那时。 我曾担任该机构的网络开发人员多年。 在2007年，我决定推出CSS-Tricks。 我正在快速学习它，而且我真的很喜欢它，我只是写下了使用CSS-Tricks作为媒介学习的内容。 今天仍然存在。 实际上，今天早上我在CSS-Tricks上发表了一篇文章。

For most of my work with CSS-Tricks, I would make a demo, put it in a folder, and FTP it up to the CSS-Tricks server. Then, when I wanted to show a demo, I would just link to the folder on my server. It worked fine, but it requires the person reading to view source, or use the dev tools, and dig around and find out what’s going on.

对于我使用CSS-Tricks的大部分工作，我将做一个演示，将其放在文件夹中，然后将其通过FTP传输到CSS-Tricks服务器。 然后，当我想演示一个演示时，我只需链接到服务器上的文件夹即可。 它可以正常工作，但是需要阅读的人查看源代码或使用开发工具，然后四处挖掘并找出正在发生的事情。

Eventually, tools like JSbin and JSFiddle made it possible to see the demo, look at the code, and change the code while the demo plays and changes. It was genius.

最终，像JSbin和JSFiddle这样的工具使在演示播放和更改时可以观看演示，查看代码并更改代码。 那是天才。

So at a point I thought I could do that too. It was a project that I could wrap my head around. I wanted to make my own version of those apps, and I wanted to host it myself and have control over features. That was the idea and the spark behind CodePen.

因此，我认为我也可以做到这一点。 这是一个我可以全神贯注的项目。 我想自己制作这些应用程序的版本，我想自己托管它并控制功能。 这就是CodePen的想法和背后的火花。

开始做某事时，常见的恐惧是对财务不可持续的恐惧。 我们很想知道您如何使用CodePen实现财务可持续性，以及花费了多长时间？ (A common fear when it comes to starting something, is a fear of being financially unsustainable. We’re curious to hear how you managed to become financially sustainable with CodePen, and how long that took?)

“Even if what you do fails, you learn a lot.”

“即使您的工作失败了，您也会学到很多东西。”

CSS-Tricks was making some money, and I had written a book about WordPress that was doing okay. So, it was easier for me to get started. My other two founders, Tim and Alex, also had some savings to lean back on.

CSS-Tricks赚了一些钱，我写了一本关于WordPress的书还不错。 因此，这对我来说更容易上手。 我的另外两位创始人Tim和Alex也有一些积蓄可以依靠。

To me, tech doesn’t seem particularly risky. Even if what you do fails, you learn a lot, which makes it easier to get snapped up by some other company down the line.

在我看来，技术似乎并不特别危险。 即使您的工作失败了，您也会学到很多东西，这很容易被线下的其他公司抢购。

So, we launched CodePen totally bootstrapped. Our only expenses were server costs — so that’s another advantage of tech, your cost are pretty low compared to other businesses.

因此，我们完全启动了CodePen。 我们唯一的支出就是服务器成本–因此，这是技术的另一个优势，与其他企业相比，您的成本非常低。

刚开始构建产品时，您想到的是货币化的想法吗？ 如果不是，在什么时候它对您的策略变得重要了？ (When you first starting building the product, was the idea of monetization on your mind? If not, at what point did it become important to your strategy?)

The whole idea was to make some money at some point. So, our plan was to build it, make it super cool, and then have PRO accounts.

整个想法是在某个时候赚钱。 因此，我们的计划是建造它，使其超酷，然后拥有PRO帐户。

We launched CodePen out of beta in June 2012, starting with a freemium model and then had PRO plans by December of that year. The majority of it right now is still selling PRO plans.

我们在2012年6月推出了Beta版本之外的CodePen，首先是免费增值模式，然后在当年12月制定了PRO计划。 目前，大多数产品仍在销售PRO计划。

We also do some advertising as well, because of how many views we get. We have a job board tool too. We fully intend to continue to monetize CodePen, but hopefully it’ll remain a cool freemium product that people pay for because it provides value.

由于获得的观看次数很多，我们也做一些广告。 我们也有工作委员会工具。 我们完全打算继续通过CodePen货币化，但是希望它仍然是人们购买的一种很酷的免费增值产品，因为它可以提供价值。

您如何确定哪些功能相对于PRO是免费的？ 您如何正确保持平衡？ (How do you decide which features should be free versus PRO? How do you get that balance right?)

“Monetization is the hardest stuff to think about, period. […] In the end, how do I know for sure that we made the right choice? I don’t.”

货币化是最难思考的东西。 […]最后，我如何确定我们做出了正确的选择？ 我不。”

Monetization is the hardest stuff to think about, period. You get so much conflicting advice too. It’s crazy.

货币化是最难思考的东西。 您也会收到很多相互矛盾的建议。 这很疯狂。

The PRO features we decided to offer are the features that we felt the users needed.

我们决定提供的PRO功能是我们认为用户需要的功能。

One of our PRO features is collaboration mode. It’s similar to Google Docs where you get multiple cursors with up to six people on higher plans and you can all code simultaneously. People use it for interviewing, for working together, to teach, etc. It took a lot of effort to build and so to us, it seemed like a very obvious thing to charge for.

我们的PRO功能之一是协作模式。 它与Google文档类似，在更高级别的计划中，您最多可以容纳多达6个人的多个游标，并且可以同时进行所有编码。 人们将其用于面试，合作，教学等工作。在构建过程中花费了很多精力，因此对我们来说，收费似乎是一件非常显而易见的事情。

With some of our PRO features we look around and see what other people are charging for. With something like GitHub they charge you the minute you want something private. They figured out that privacy matters to some people, and probably validated that in some way, so that’s a feature we decided to charge for on CodePen.

借助我们的某些PRO功能，我们可以环顾四周，看看其他人需要付费。 使用GitHub之类的东西，他们会在您需要私密物品的那一刻向您收费。 他们发现隐私对某些人很重要，并可能以某种方式验证了这一点，因此我们决定在CodePen上收取此功能。

About a year ago, we did take money for CodePen. We had talked to some VCs prior to that as well a few years back. One of them was just brimming with advice and told us to forget everything, and make all PRO features free. He told us that what matters most is making CodePen the best at what it does — a premium service that everybody uses.

大约一年前，我们确实为CodePen花了钱。 在此之前和几年前，我们曾与一些风投公司进行过交谈。 其中之一只是充满建议，并告诉我们忘记一切，并免费提供所有PRO功能。 他告诉我们，最重要的是使CodePen发挥其最大作用-每个人都在使用的优质服务。

It actually seemed smart at the time. We figured he was right — if we gave away all the PRO features we could gain some serious momentum. We thought that people would use it and think about it differently.

当时似乎真的很聪明。 我们认为他是对的-如果我们放弃所有的PRO功能，我们将获得更大的动力。 我们认为人们会使用它并以不同的方式考虑它。

We had a branch ready to make private pens a free product. We were about to release it, but we got cold feet. We felt we were cannibalizing ourselves in a way. We were considering taking away one of the reasons users had to upgrade, one of the only ways we were making money.

我们有一家分支机构准备将专用笔变成免费产品。 我们本来打算发布它，但脚步冷漠。 我们觉得自己在某种程度上蚕食了自己。 我们正在考虑取消用户必须升级的原因之一，这是我们赚钱的唯一方式之一。

So, we sent out a survey to gauge why people upgraded. A lot of people said privacy.

因此，我们进行了一项调查，以评估人们为何升级。 很多人说隐私。

Our cold feet turned into killing that branch completely. If we had done it, we would have removed one of the top reasons people pay us at all.

我们的冷脚变成完全杀死了那个树枝。 如果我们做到了，我们将消除人们向我们付款的最主要原因之一。

In the end, how do I know for sure that we made the right choice? I don’t. I’m sure there are choices that would have made us more successful than we are right now. There are probably just as many that could have screwed it all up too. Who knows?

最后，我如何确定我们做出了正确的选择？ 我不。 我敢肯定，有一些选择会让我们比现在更成功。 可能还有很多事情可能也把它搞砸了。 谁知道？

But, the VCs idea was to build it to sell it. But we were excited about building it. None of us had even really considered selling it.

但是，风险投资家的想法是将其出售。 但是我们对构建它感到兴奋。 我们甚至没有人真正考虑过出售它。

这是业务的困难部分，尤其是免费增值业务。 免费增值业务要么成功，要么完全失败。 关键在于您是否可以确定客户最关心的是什么，以及应该支付的费用。 很少有企业能在给客户带来太多价值与过少收益之间取得适当的平衡。 (It’s a difficult part of business, especially freemium businesses. Freemium businesses are either a complete hit or a complete miss. It’s all about whether or not you can figure out what customers care about most, and what you should charge for. Very few businesses could strike the right balance between giving too much value to the customer and too little.)

Yeah, exactly. In a sense one of the cool parts of CodePen is that it’s a community. There are a million members of CodePen and they talk to each other and meet each other. We even had a couple get engaged through CodePen! We have real life meet-ups all around the world. There are freelance groups that started on CodePen, and have teams that work together, meet, and operate together on CodePen.

是的，完全正确。 从某种意义上说，CodePen的最酷的部分之一是它是一个社区。 CodePen有上百万的成员，他们彼此交谈并会面。 我们甚至通过CodePen订婚了！ 我们在世界各地都有现实生活中的聚会。 有一些自由团体从CodePen开始，并且有一些团队可以在CodePen上一起工作，聚会和合作。

It’s a community that gives us value. If somebody makes something really cool and puts it on CodePen, it’s basically free advertising for CodePen. They are proud of their work and they’re sharing it. That’s why our marketing budget is zero because people market for us.

这是一个赋予我们价值的社区。 如果有人制作出非常酷的东西并将其放在CodePen上，那么它基本上就是CodePen的免费广告。 他们为自己的工作感到自豪，并且正在分享这份工作。 这就是为什么我们的营销预算为零，因为人们为我们进行营销。

But if there are features that we work really hard on, then it just feels right to charge to for them.

但是，如果有些功能我们真的很努力，那么为它们付费就可以了。

We recently hired four people after we took funding. We’re all working really hard on a new feature that will probably be locked under PRO. There’s just too much work going into it. It requires a lot of ongoing maintenance, more servers, real costs that necessitate charging for it.

我们获得资金后，最近雇用了4个人。 我们所有人都在努力开发可能会在PRO下锁定的新功能。 有太多的工作要做。 它需要大量的日常维护，更多的服务器以及需要为此付费的实际成本。

您能带领我们度过构建CodePen的一天吗？ (Can you walk us through a day in the life of building CodePen?)

“We’re always working to do right by our existing customers.”

“我们一直在努力让现有客户做对。”

Sure. I’m sure both of you know from your own interesting backgrounds that everyday, we have no idea what’s going to happen. The only consistent thing is communication. We live in Slack, there’s always a lot of talking.

当然。 我确定你们俩都从自己有趣的背景中知道，每天我们都不知道会发生什么。 唯一一致的是沟通。 我们生活在Slack，总是有很多话题。

We also have to make sure we’re listening to our customers. Listening to them means reporting bugs, fixing bugs, that kind of work.

我们还必须确保正在听取客户的意见。 聆听它们意味着报告错误，修复错误等工作。

We have to balance our time between building new things, and maintaining what’s already there. We’re always working to do right by our existing customers.

我们必须在构建新事物和维护已有事物之间平衡时间。 我们一直在努力让现有客户做对。

I do it all. I actively work on the product. The people that we hired probably spend a lot more time in the code base than I do, but I’m in it everyday. We’re too small to have any structure. There aren’t any managers or anything, so everybody is in the code base working, talking, writing emails, writing blog posts and doing support. That’s a day in the life.

我都做 我积极致力于该产品。 我们雇用的人员可能在代码库上花费的时间比我多，但是我每天都在其中。 我们太小了，没有任何结构。 没有任何经理或任何人员，因此每个人都在代码库中工作，交谈，写电子邮件，写博客文章并提供支持。 那是生活中的一天。

您在构建CodePen时犯了什么错误，而您希望再也不会犯错？ (What’s one mistake you’ve made in building CodePen that you hope to never make again?)

“It’s hard to know if the decisions you’ve made are the right decisions. Maybe there was a decision that I made that was entirely wrong, and I don’t even know it yet.”

“很难知道您做出的决定是否正确。 也许我做出的决定是完全错误的，我什至还不知道。”

A lot of people struggle with this. I’m struggling with it right now, and we talked about it earlier, but it’s hard to know if the decisions you’ve made are the right decisions. Maybe there was a decision that I made that was entirely wrong, and I don’t even know it yet. You can’t A/B test the past.

很多人为此感到挣扎。 我现在正在为此而苦苦挣扎，我们之前已经讨论过，但是很难知道您所做的决定是否是正确的决定。 也许我做出的决定是完全错误的，但我什至不知道。 您无法A / B测试过去。

That near miss of making all of our PRO features free, that feels like something I’m glad we didn’t do. But it’s hard to say.

免费提供我们所有的PRO功能几乎怀念，这让我感到很高兴我们没有做。 但是很难说。

We took VC, but maybe we’ll just be a lifestyle business, which seems like the last thing VCs want to hear. No VC one wants to hear that. Lucky for us we took money from the original two founders of Wufoo. They’re friends and we’re trying to do right by them, but they’re not down our throats pushing for epic growth.

我们选择了VC，但也许我们只是做一家生活方式企业，这似乎是VC想要听到的最后一件事。 没有VC愿意听到这一点。 对我们来说幸运的是，我们从Wufoo的最初两位创始人那里获得了钱。 他们是朋友，我们正努力与他们做对，但他们并没有竭力推动史诗般的增长。

When we talked to actual VCs, we could tell they were turned off by our trajectory. We want to grow, but we’re not interested in taking buckets of money, making everything free, and trying to be bought by a company like Adobe.

当我们与实际的风险投资商交谈时，我们可以看出它们已被我们的轨迹所关闭。 我们想成长，但我们对拿大笔钱，免费提供一切并试图被Adobe之类的公司不感兴趣。

But is that a mistake? Maybe we should have taken a bunch of VC, maybe we are well poised to do that and I’m screwing everything up by not. I don’t know.

但这是一个错误吗？ 也许我们应该学习一堆VC，也许我们已经做好了这样做的准备，但我正在搞砸一切。 我不知道。

您能否谈谈构建CodePen所经历的一两个困难时期，以及如何克服这些困难？ (Can you talk about one or two difficult periods that you had to go through in building CodePen and how you overcome those struggles?)

“You have to build a company that people care about. I think that’s important to the people we hire, work with, and like to work with. They need more than just a punch card and a promise of some options.”

“您必须建立一个人们关心的公司。 我认为这对于我们雇用，一起工作和喜欢一起工作的人很重要。 他们不仅需要一张打Kong卡和一些选择的保证。”

The struggle is real. One of our early struggles was deciding to do this at all. Some of us had families, we all had responsibilities. It’s not easy to leave a comfortable job like SurveyMonkey, especially when the company is doing so well, and the stock options are good. You roll in at 10 o’clock, and eat gummy worms all day. Why would you want to leave that?

挣扎是真的。 我们早期的斗争之一是决定完全做到这一点。 我们中有些人有家庭，我们都有责任。 留下像SurveyMonkey这样的舒适工作并不容易，尤其是在公司表现良好且股票期权很好的情况下。 您10点钟滚动进来，整天吃蠕虫。 你为什么要离开那？

But, we’re well passed that now.

但是，我们现在通过了。

If I’m being totally honest, we’re going through a hard time right now. We grew to nine people, and that’s been a big change. I’m not a manager, but I’m trying to steer the ship. It requires a very different skill set. It requires understanding our employees, and giving them what they need. Some need a lot more feedback than others, some need to be left alone. I know I’m dropping the ball on some of that stuff.

如果说实话，我们现在正处于艰难时期。 我们已经成长为9个人，这是一个很大的变化。 我不是经理，但我想操纵这艘船。 它需要非常不同的技能。 它需要了解我们的员工，并给他们所需的东西。 有些需要比其他更多的反馈，有些则需要单独处理。 我知道我会在某些东西上丢球。

You have to build a company that people care about. I think that’s important to the people we hire, work with, and like to work with. They need more than just a punch card and a promise of some options. We’re trying to figure out how to give them more purpose.

您必须建立一个人们关心的公司。 我认为这对于我们雇用，一起工作和喜欢一起工作的人很重要。 他们不仅需要一张打Kong卡和一些选择的保证。 我们正在尝试找出如何给他们更多的目的。

I’ve alluded to this big feature that’s coming out, but I can’t promise anything, or tell you anything. I don’t like to bum people out if it takes forever or doesn’t go as planned. No good comes from promising things you can’t deliver.

我已经暗示了即将推出的这项重要功能，但是我无法保证任何事情，也不能告诉您任何事情。 我不喜欢别人花时间或不按计划进行。 美好的东西来自无法实现的承诺。

This feature though, is a big one. It’s taken a long time to figure out and there have been blockers right and left. I think, occasionally, some moral issues have come up when we’re not making as much progress as we should. There’ve been a couple of dates that we’ve set and not made that I know have bummed people out.

但是，此功能非常重要。 我们花了很长时间才弄清楚，左右两侧都有障碍物。 我认为，有时候，当我们没有取得应有的进步时，就会出现一些道德问题。 我们已经设定了一些日期，但并没有使我知道使人们感到沮丧。

We’re not failing, people aren’t quitting. But it’s been a tough period. I suspect it’s going to work out, though.

我们没有失败，人们没有放弃。 但这是一个艰难的时期。 我怀疑这将会解决。

您认为CodePen成功的结果是什么？ (What would you consider a successful outcome for CodePen?)

“I’m absolutely stoked to keep working here, and honestly I hope we can do it forever. If it’s the last job I ever have, that’s fine by me.”

“我很高兴继续在这里工作，老实说，我希望我们能永远这样做。 如果这是我最后的工作，那对我很好。”

I hope we just get to keep on going. We don’t have the startup dream of shooting for incredible growth and selling. Typically, that doesn’t end well for the people who use the product. We’d rather keep building the product we want to exist, and adding to the community we want to be a part of.

我希望我们继续前进。 我们没有梦想实现惊人的增长和销售的创业梦想。 通常，这对于使用产品的人来说效果并不理想。 我们宁愿继续构建我们想要存在的产品，并添加到我们希望成为其中一部分的社区中。

I can imagine still working here a decade from now. I really like it. I think it’s a great idea, and we have a list of exciting ideas for the future. I like the community around CodePen too. I’m absolutely stoked to keep working here, and honestly I hope we can do it forever. If it’s the last job I ever have, that’s fine by me. That’s what I’d consider a success.

我可以想象十年后仍在这里工作。 我很喜欢。 我认为这是一个好主意，我们为未来列出了一系列令人振奋的想法。 我也喜欢CodePen周围的社区。 我很高兴继续在这里工作，老实说，我希望我们能永远做到。 如果这是我最后的工作，那对我很好。 那就是我认为成功的原因。

But, if we could sky rocket right now I’d be down with that. I wish we were killing it harder than we are, because I’d love to keep hiring. We just don’t have the money for that, though. I’d love to eventually double or triple our team. I want to be a manager. I’ve never had that opportunity, and I would love to have it one day.

但是，如果我们现在能飞上蓝天，那我会失望的。 我希望我们比现在更努力地杀死它，因为我很乐意继续招聘。 但是，我们只是没有钱。 我希望最终使我们的团队增加一倍或两倍。 我想当经理。 我从未有过这样的机会，我很想有一天。

您是否曾经历过创始人的倦怠？ (Have you ever experienced burnout as a founder?)

“The community helps me, the people around me help me…I have hobbies, I go on vacation. I have enough of a well-rounded life that I don’t think I’m a high risk for burnout.”

“社区帮助我，周围的人帮助我……我有爱好，我去度假。 我过着全面的生活，我认为自己没有倦怠的高风险。”

Not as extreme as some people have. Burnout is a hot topic these days. True burnout would be to just quit, you just don’t do anything anymore. I’ve never totally burned out.

不像某些人那样极端。 如今，倦怠是一个热门话题。 真正的精疲力尽只是退出，您什么也不会做。 我从来没有完全精疲力尽。

I think I’m lucky in that way. The community helps me, the people around me help me. I’m lucky that I have multiple projects. I have CodePen but I also work on CSS-Tricks, I have a podcast where I talk to people.

我觉得我很幸运。 社区帮助我，我周围的人帮助我。 我很幸运，我有多个项目。 我有CodePen，但我也从事CSS-Tricks的工作，我有一个播客，可以在这里与人们聊天。

I have hobbies, I go on vacation. I have enough of a well-rounded life that I don’t think I’m a high risk for burnout.

我有爱好，我去度假。 我过着充实的生活，认为自己没有倦怠的高风险。

您如何与远程团队建立文化？ (How do you build a culture with remote teams?)

“Positivity is also really important to CodePen and our team embraces it. […] It feels safe here, comfortable, and that’s how good communities are born.”

“积极性对CodePen来说也非常重要，我们的团队对此表示欢迎。 […]在这里感到安全，舒适，这就是好的社区诞生的原因。”

I probably think about this a little too much. I like to shower people with praise. I like to talk things out as a team and find those small teaching moments. Culture comes from that — from moments where you think about how to approach a situation and why, as a team. I also encourage people to pay attention to industry news, and throw their two cents in. Those are culture-building moments.

我可能对此考虑得太多了。 我喜欢赞美别人。 我喜欢以小组形式讨论问题，并从中找到一些小小的教学机会。 文化源于这一点，源于您思考团队如何应对情况以及为什么这样做的时刻。 我还鼓励人们关注行业新闻，投入2美分。这是建立文化的时刻。

Positivity is also really important to CodePen and our team embraces it. We never let off a negative vibe, we never discourage each other, especially not publicly. We have an inclusive spirit. That’s just vital to me. It feels safe here, comfortable, and that’s how good communities are born.

积极性对于CodePen来说也非常重要，我们的团队对此也非常拥护。 我们永远不会放任消极的气氛，我们永远不会互相劝阻，尤其是不会公开。 我们具有包容性精神。 这对我来说至关重要。 在这里感到安全，舒适，这就是好的社区诞生的方式。

您的编程英雄是谁？ (Who are your programming heroes?)

“It’s hard for me to look at random people in the industry and consider them programming heroes. […] My heroes are the the people I work with directly.”

“对于我来说，很难看清行业中的随机人，并不能认为他们是编程英雄。 […]我的英雄是与我直接合作的人。”

When you work directly with someone and experience their genius on a day-to-day basis, they feel like the best programmer in the world, and that’s how I feel all the time.

当您直接与某人合作并每天体验他们的天才时，他们会感觉自己是世界上最好的程序员，这就是我一直以来的感受。

It’s hard for me to look at random people in the industry and consider them programming heroes. Certainly they’re heroes in some sense. I can look at their accomplishments and be impressed, but it’s not as personal. They don’t feel as real to me as the people I work with everyday.

对于我而言，很难看清行业中的随机人员，也不认为他们是编程英雄。 从某种意义上说，他们当然是英雄。 我可以看看他们的成就并留下深刻的印象，但这并不是个人的。 他们对我而言并不像我每天与之共事的人那样真实。

Tim Holman, who we hired, came to us from Tumblr. He did amazing stuff while he was there, but was kind of CodePen famous before he even started working with us. He’s such a smart guy. He doesn’t care about technology, he just cares that the thing he builds works well. He doesn’t care if we suddenly switch to React, he just cares that what we make is cool.

我们聘用的蒂姆·霍尔曼(Tim Holman)来自Tumblr。 在他在那里的时候，他做了很多很棒的事情，但是甚至在开始与我们合作之前，他就是CodePen的一员。 他真是个聪明人。 他不在乎技术，他只是在乎他制造的东西能很好地工作。 他不在乎我们是否突然转向React，他只是在乎我们所做的事情很酷。

Rachel Smith, another recent hire, was at an incredible advertising agency. She’s just a genius. She’s like VIP on our team. It’s amazing the productivity and the struggles she can battle through. It’s admirable. She’s just an absolutely incredible programmer and person.

最近的另一位员工瑞秋·史密斯(Rachel Smith)在一家不可思议的广告公司工作。 她只是个天才。 她就像我们团队中的VIP。 她的工作效率和奋斗过程令人称奇。 令人钦佩。 她只是一个绝对不可思议的程序员和人。

Another fellow we hired named Jake Albaugh, also genius. I wish my brain worked the way his brain works.

我们聘请了另一位天才杰克·阿尔博(Jake Albaugh)。 我希望我的大脑能像他的大脑一样运作。

I struggle with that actually. Sometimes I feel like the least useful person at CodePen. I still add value in other ways, but I’m not useful in the same sense as they are.

我实际上为此感到挣扎。 有时我觉得自己在CodePen中最没用。 我仍然可以通过其他方式来增加价值，但是从他们的意义上讲，我没有用。

So yeah, my heroes are the the people I work with directly. They’re my heroes.

是的，我的英雄是与我直接合作的人。 他们是我的英雄。

Donate to support this project: https://opencollective.com/betweenthewires

捐赠以支持该项目： https : //opencollective.com/betweenthewires

This project is made possible with sponsorships from frontendmasters.com, egghead.io and Microsoft Edge.

来自frontendmasters.com ， egghead.io和Microsoft Edge的赞助使该项目成为可能。

Suggest a maker you’d like to hear from, please fill out this form.

建议您想听听的制造商，请填写此表格 。

Send feedback to betweenthewires on Twitter.

在Twitter上将反馈发送到thewires之间 。

翻译自: https://www.freecodecamp.org/news/between-the-wires-an-interview-with-chris-coyier-of-codepen-css-tricks-fame-f010517ad78e/

css tricks