rachel zhang
In this episode of the Versioning Show, Tim and David are joined by Rachel Smith, a front-end developer at CodePen. They discuss creating art with code, learning the skills of animation, the future of animation on the web, and being limitlessly creative with code.
在Versioning Show的这一集中，Tim和David与CodePen的前端开发人员Rachel Smith一同加入。 他们讨论使用代码创建艺术，学习动画技能，网络上动画的未来以及使用代码进行无限创意。
显示笔记 (Show Notes)
Rachel Smith on Twitter: @Rachsmithtweets
雷切尔·史密斯(Rachel Smith)在推特上： @Rachsmithtweets
Rachel’s GitHub AMA repo
雷切尔的GitHub AMA回购
More Twitter links: @mdavidgreen | @tevko | @versioningshow | @sitepointdotcom
更多Twitter链接： @mdavidgreen | @tevko | @versioningshow | @sitepointdotcom
成绩单 (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 five of the Versioning Podcast.
…，您正在收听Versioning Podcast的第五集。
David:
大卫：
-
This is a place where we get together to discuss the industry of the web from development to design — with some of the people making it happen today and planning where it’s headed in the next version.
在这里，我们可以聚在一起讨论从开发到设计的网络行业，其中一些人将其付诸实践，并计划下一版的发展方向。
Tim:
蒂姆：
-
So today we have with us Rachel Smith. So Rachel, thank you so much for joining us! Do you want to give us a quick intro for those of us who do not know you?
所以今天我们有了Rachel Smith。 Rachel非常感谢您加入我们！ 您想为我们中不认识您的人快速介绍一下吗？
Rachel:
雷切尔：
-
Sure, my name’s Rachel Smith. I’m an Australian web developer who lives in the US in California, and my day job is with CodePen — helping build the app that is CodePen.
当然，我叫Rachel Smith。 我是一位澳大利亚网络开发人员，住在加利福尼亚的美国，我的日常工作是在CodePen中工作 -帮助开发CodePen应用程序。
And I’m mostly a front-end developer, but I also do a little bit of back end, and I have sort of a hobby in building art with code.
而且我主要是前端开发人员，但是我也做一些后端工作，并且我在使用代码构建艺术方面有某种爱好。
David:
大卫：
-
Yes, and we’re going to be asking a lot of questions about that hobby. But, before we get started, we want to ask you our philosophical Versioning question. In your current career, what version are you, and why?
是的，我们将就该爱好提出很多问题。 但是，在开始之前，我们想向您询问我们的哲学版本控制问题。 您目前的职业是什么版本，为什么？
Rachel:
雷切尔：
-
Oooh! [Laughs] In my current career, what version am I? I would say the best version! Where I am in my career right now is kind of a place that I’ve been working towards for a while now. And this job, working for a product that I really believe in and really enjoy — being able to make that better — is kind of like my dream job scenario as far as my career is concerned.
哦！ [笑]我目前的职业是什么版本？ 我会说最好的版本！ 我现在的职业生涯是一个我一直在努力的地方。 就我的职业而言，为我真正相信并真正喜欢的产品(能够使它变得更好)工作的这份工作有点像我的理想工作场景。
So, yeah, that’s the version.
是的，就是那个版本。
Tim:
蒂姆：
-
I have to say, that’s probably the best answer we’ve gotten so far.
我不得不说，这可能是我们到目前为止获得的最佳答案。
Rachel:
雷切尔：
-
Oh, really? That’s good! [Laughs]
真的吗？ 非常好！ [笑]
Tim:
蒂姆：
-
Everyone picks a number, and goes through this “I was version 0.0 here …” You were just like, “No, best version right here.”
每个人都选择一个数字，然后经历“我在这里是0.0版...”，就像是“在这里，最好的版本。”
Rachel:
雷切尔：
-
O, right! Let’s say latest, best, stable. [Laughs]
哦，对！ 比方说最新，最好，稳定。 [笑]
Tim:
蒂姆：
-
Sounds good.
听起来不错。
David:
大卫：
-
Stable is something we can all aspire to.
稳定是我们所有人都渴望的东西。
Tim:
蒂姆：
-
So, speaking about creating art with code, it’s very interesting you mention that, because I was actually watching a YouTube video today. It’s by @mpjme I believe? (I may have butchered that.) But he does FunFunFunction, and every Monday he kind of releases a new video, and today’s topic was art and code related.
因此，谈到使用代码创建艺术，您提到这一点非常有趣，因为我今天实际上正在观看YouTube视频。 我相信是@mpjme ？ (我可能对此很怀疑 。)但是他做了FunFunFunction ，每个星期一他都会发行一个新视频， 今天的主题是与艺术和代码有关的 。
So, on the heels of that, do you want to go into a little bit more about how you create art with code?
因此，紧接着，您想进一步了解如何使用代码创建艺术吗？
Rachel:
雷切尔：
-
I like to see code — especially front end technologies — as an avenue to create visualizations that you dream up, as well as there being a practical function for it.
我喜欢将代码(尤其是前端技术)视为创建您梦dream以求的可视化效果的途径，以及它的实用功能。
I think, in the front-end sphere, we kind of obsess over whether things are necessary or practical, or what’s the best solution for a certain front-end problem. But I love it when people break out of that and use code purely as a form of artistic expression. So personally, I like to use different kinds of technologies to create different visualizations, I guess, and to explore those technologies and the effects they can create on the screen.
我认为，在前端领域，我们对某些事情是否必要或切合实际，或者对于某个前端问题的最佳解决方案有什么痴迷。 但是，当人们突破并纯粹将代码用作艺术表达形式时，我会喜欢它。 因此，我个人认为，我喜欢使用不同类型的技术来创建不同的可视化效果，并探索这些技术及其在屏幕上可以创建的效果。
David:
大卫：
-
It’s a fascinating direction to take your work in. A lot of people who do coding can relate to that notion that it feels like an artistic process. What got you started with thinking about code as art?
这是从事您工作的一个有趣的方向。许多进行编码的人都可以与这种感觉联系在一起，即感觉就像是一个艺术过程。 您是怎么开始将代码视为艺术的？
Rachel:
雷切尔：
-
I started building animated stuff out of necessity, because my career started in making Flash banners, basically for banner ads to advertise certain services in Australia.
我开始根据需要制作动画素材，因为我的职业生涯始于制作Flash横幅广告，基本上是为了制作横幅广告来宣传澳大利亚的某些服务。
It was usually like lottery banners actually — trying to sell lottery tickets — because gambling is a huge industry in Australia. So we’d make these banners that were crazy, animated, jump out at you, to try and get people to click on them. And that was with Flash.
实际上，通常就像抽奖横幅一样-试图出售彩票-因为赌博在澳大利亚是一个巨大的产业。 因此，我们将制作这些疯狂，生动的横幅广告，让您跳出来，尝试吸引人们点击它们。 那就是Flash。
And from there, I fell in love with motion design on the web. And that led me into an area where I can appreciate the abstract use of animation with — I don’t use Flash any more, but I sort of took that approach into using HTML, CSS, JavaScript to build these weird, pointless things that are pretty to look at.
从那里，我爱上了网络上的运动设计。 这使我进入了一个可以欣赏动画的抽象用途的领域-我不再使用Flash，但是我采用了这种方法来使用HTML，CSS，JavaScript来构建这些奇怪的，毫无意义的东西。好看。
David [4:24]:
大卫[4:24] ：
-
I know the technology for doing that changes rapidly, and you’re already taking us all the way back to Flash, which gives me some flashbacks as well.
我知道执行此操作的技术会Swift变化，您已经将我们带回到Flash，这也给了我一些闪回。
But what time frame did you start shifting into HTML, CSS and JavaScript for this, and how have you seen that changing?
但是您是什么时候开始转向HTML，CSS和JavaScript的呢？您如何看待这种变化？
Rachel:
雷切尔：
-
I guess my first foray into doing non-Flash animation was via CSS3 and also
canvas. So it was probably around the time that HTML5 was a massive buzzword, so I’m just thinking when this would have been. It would have been the end of 2011 and 2012, I think.我想我第一次尝试制作非Flash动画是通过CSS3和
canvas。 因此大概是在HTML5成为流行语的时候，所以我只是想知道什么时候可以做到。 我想应该是2011年底和2012年底。And this was when CSS3 and CSS animations were coming into more mainstream front-end practices, as well as HTML5 Canvas API. So that’s when I started exploring those options. In 2012, I was working as a contractor in London, and I happened to take on a couple of contract jobs in the advertising realm, where they were requiring a lot of HTML5 animation, but they wanted it to work on iPads.
这是CSS3和CSS动画以及HTML5 Canvas API进入更主流的前端实践的时候。 这就是我开始探索这些选项的时候。 2012年，我在伦敦担任承包商，当时我碰巧在广告领域承担了一些合同工作，因为他们需要很多HTML5动画，但他们希望它可以在iPad上使用。
So we were forced to do away with Flash, and really try to push the boundaries of what HTML5 technology could do. And then we ran into a lot of roadblocks and it was really hard to make anything look good with a good frame rate. And I think the main thing that’s excited me since then — since 2012 — we’ve seen a huge growth in capabilities, as far as what the browser rendering engine can do and what it can do with these animation technologies.
因此，我们被迫放弃Flash，并真正尝试超越HTML5技术的极限。 然后我们遇到了很多障碍，要想以良好的帧速率使任何东西看起来都不错，确实很难。 自2012年以来，我认为最让我兴奋的是，从浏览器渲染引擎可以做什么以及这些动画技术可以做什么方面，我们看到了功能的巨大增长。
And it’s just such better performance these days, and what you’re capable of doing — like building entire 3D environments and animating them with technologies like WebGL, which now works as far as your mobile devices —that is super exciting to me.
如今，性能如此之好，而您的能力(如构建整个3D环境并使用WebGL之类的动画对它们进行动画处理，现在可以在您的移动设备上使用)对我来说实在是太令人兴奋了。
Tim:
蒂姆：
-
So one of the things that I really enjoy about your work is that it always seems so simple the way that — especially in your CodePen blogs — you kind of break it down and explain the types of things that you’re doing.
因此，我对您的工作真正喜欢的一件事是，它看起来总是如此简单，以至于您(尤其是在CodePen博客中)将其分解并解释了您正在做的事情的类型。
In fact, one of your blog posts that I have bookmarked is lerping, which was a really cool subject for me to learn about. But speaking about that, I feel like a lot of people — myself included — are intimidated about the advance of JavaScript animations, because some of these are like 400 lines long of code.
实际上，您为我添加了书签的博客文章之一是lerping ，这对我来说是一个很酷的主题。 但是谈到这一点，我感到很多人(包括我自己在内)都对JavaScript动画的发展感到害怕，因为其中有些像400行代码长。
So how did you make that transition from CSS animations — which some people see as a little bit less complex — to these full WebGL and 3D environments?
那么，您是如何从CSS动画(有些人认为不太复杂)过渡到这些完整的WebGL和3D环境的呢？
Rachel:
雷切尔：
-
I had a sort of fortunate experience in my work within the advertising industry. I was able to work with and meet a bunch of extremely talented folks who just live and breathe this sort of hardcore animation stuff.
我在广告行业的工作中获得了一些幸运的经历。 我能够与一群非常有才华的人一起工作，并且相遇，他们只是生活和呼吸这种硬核动画。
And through working with them, I was able to get into learning more advanced JavaScript animation, and certainly work on it myself. But it is hard to teach yourself when you don’t have someone who’s more senior than you in that topic. So, I definitely had a lot of help from the people I worked with.
通过与他们的合作，我得以学习更高级JavaScript动画，并且可以自己进行开发。 但是，如果在这个话题上没有比你更高级的人，就很难自学。 因此，与我一起工作的人肯定给了我很多帮助。
But unless you’re in those agencies, working with those people, you really don’t get exposed to that information, because the advertising agency world is typically very closed, and they like to keep their cards close to their chest as far as their knowledge sharing. And it makes a lot of sense, because it’s an extremely competitive, cutthroat industry.
但是，除非您在这些代理商中，与这些人一起工作，否则您实际上不会接触到该信息，因为广告代理商的世界通常非常封闭，他们喜欢将名片尽可能靠近自己的胸口。知识共享。 这很有意义，因为它是一个极具竞争性的残酷行业。
And there’s a lot of copying, and your ability to create technically impressive projects is sort of the reason people would hire you. So you wouldn’t exactly give that information away. But the shame in that is that there’s so much innovation being made in web rendering, but it’s not really being shared. And I just felt I wanted to take a little bit of that knowledge, break it down to a beginner level, and just share it with everyone.
复制很多，而您创建技术上令人印象深刻的项目的能力就是人们雇用您的原因。 因此，您不会完全放弃这些信息。 但是遗憾的是，Web渲染中进行了很多创新，但并没有真正共享。 我只是觉得我想学习一点点知识，将其分解为初学者，然后与所有人分享。
Because the stuff that I write about, you’re not going to be an expert and suddenly making award-winning websites. But, it is an introduction that might make things seem a little bit more approachable for beginners. And then they won’t feel as intimidated heading into advanced JavaScript animation, if they see it’s like a process of smaller steps along the way.
因为我所写的东西，您不会成为专家，而是突然成为屡获殊荣的网站。 但是，这是一个入门，可能会使初学者看起来更容易上手。 然后，如果他们看到这就像是一小步的过程，那么他们就不会感到胆怯地进入高级JavaScript动画。
David [9:04]:
大卫[9:04] ：
-
Yeah, the CodePen examples are fantastic, and they break things down, and your code is always very clean and very well commented and easy to follow. It’s hard to find good examples sometimes out there, and I’m curious where do you direct people when they’re interested in learning more about this, if they don’t have the opportunity that you have to work with more advanced people?
是的，CodePen示例非常棒，并且可以分解所有内容，并且您的代码始终非常干净，注释良好且易于遵循。 有时候很难找到好的例子，而且我很好奇，如果他们没有机会与更高级的人一起工作，那么当人们有兴趣了解更多有关此方面的知识时，您应该将他们引导到哪里？
Rachel:
雷切尔：
-
There’s a couple of books I usually recommend as far as JavaScript animation goes. They’re usually my go-to recommendations. I feel like the most important thing that I share with people is that you can take some of my beginner resources and read them. And then possibly find more complicated projects on GitHub, where people have shared their code.
关于JavaScript动画，我通常推荐两本书。 它们通常是我的推荐建议。 我觉得与他人分享的最重要的事情是，您可以获取一些我的初学者资源并阅读它们。 然后可能会在人们共享代码的GitHub上找到更复杂的项目。
But this kind of work, the most important thing you can do is just practice, and try and build your own things. And constantly just mess around with it and play around with it, because you can read all you want on these things, but you’re only going to get better — particularly with animation work — if you try and build it yourself, and find your own style, and find your own way through. Just practicing, and making silly things that don’t have to be some grand vision, but just messing around with it and having fun with it. Because it is art, after all, that is the most important part.
但是，这种工作，您可以做的最重要的事情就是练习，然后尝试构建自己的东西。 不断地弄乱它并玩弄它，因为您可以阅读所有想要的东西，但是如果您尝试自己构建并找到自己的东西，那么只会变得更好，尤其是在动画作品方面。自己的风格，并找到适合自己的方式。 只是练习，做一些不必要的愚蠢的事情，而只是弄乱它并从中获得乐趣。 毕竟，因为这是艺术，所以这是最重要的部分。
David:
大卫：
-
I like that you recommend people not really worry about cross browser compatibility issues to start with, but just go in there and experiment.
我喜欢你建议人们开始时并不真正担心跨浏览器兼容性问题，而只是去尝试一下。
Rachel:
雷切尔：
-
Yeah, so I feel like the way we’ve been taught in development is often to search for the best way to do something — scour the internet, and read until we’ve found the most efficient solution to a problem.
是的，所以我觉得我们在开发中所学的方法通常是寻找做某事的最佳方法-搜寻互联网，然后阅读，直到找到解决问题的最有效方法为止。
But I feel that this sort of stuff — the way you achieve it, or obsessing over achieving the best way to learn something — isn’t the way to go about it. Stress less over implementation details, and just try some stuff out and see what is the production of that, and iterate on it. Don’t stress out over the best way to learn canvas, or the best way to learn WebGL. Learn it in a way that works for you, and helps you create the art you want to create.
但是我觉得这种东西-您实现它的方式，或者痴迷于学习某种东西的最佳方式-并不是解决问题的方式。 减轻实施细节的压力，只需尝试一些东西，看看产生了什么，然后对其进行迭代。 不要强调学习画布的最佳方法或学习WebGL的最佳方法。 以一种适合您的方式来学习它，并帮助您创建想要创作的艺术品 。
Tim:
蒂姆：
-
That’s very cool, and extremely sound advice.
这非常酷，而且建议也非常合理。
So, you mentioned earlier CodePen, and that being sort of a dream job for you, which definitely does sound amazing. Can you talk a little bit about the type of work that you do there? And how you find art in that, and what the typical standards are for the types of interactions that you build?
因此，您前面提到了CodePen，这对您来说是一个梦想的工作，这的确听起来很棒。 您能谈谈您在那里做的工作类型吗？ 以及您如何在其中找到艺术品，以及您建立的互动类型的典型标准是什么？
Rachel:
雷切尔：
-
Yes. So my work for CodePen is actually kind of funny — in the way that I don’t have a lot of creative freedom in my work on the CodePen app itself, because it needs to be a very usable website. And it needs to be usable in the sense that CodePen is sort of just like the shell, or the provider, for our users to do really exciting, creative things. So, we don’t want to try to do our own fancy stuff with CodePen itself — because you don’t need the website UI competing with the content.
是。 因此，我在CodePen上所做的工作实际上是很有趣的-在我对CodePen应用本身的工作中，我没有太多的创作自由，因为它必须是一个非常实用的网站。 而且它在某种意义上必须是可用的，因为CodePen就像外壳或提供程序一样，使我们的用户可以做一些真正令人兴奋的创意工作。 因此，我们不想尝试使用CodePen自己做自己喜欢的东西-因为您不需要网站UI与内容竞争。
If anything is going to be hogging browser resources to animate, it should be the content, rather than our site. So, I feel like with my CodePen work, it’s very functional and I have to leave my ego at the door and just focus on providing the best user experience.
如果有任何事情需要消耗浏览器资源进行动画处理，则应该是内容 ，而不是我们的网站。 因此，我感觉自己的CodePen工作非常实用，我不得不自负，只专注于提供最佳的用户体验。
But that is still my dream job, because in building this app, and making it the best kind of app we can, we are providing a space and community for people to create this really exciting fun art — which I happen to get to stare at all day while I’m working on the site.
但这仍然是我梦dream以求的工作，因为在构建此应用程序并使其成为我们可以做到的最好的应用程序时，我们正在为人们提供一个空间和社区，以创造出这种真正令人兴奋的有趣艺术，而我恰好盯着它看我整天在网站上工作。
So that, for me, is still my dream job, even if I’m dealing during the day with very banal things like form elements and fixing little UI bugs.
因此，对于我来说，即使我白天处理表单元素和修复一些UI错误等非常平庸的事情，这仍然是我的理想工作。
David [12:55]:
大卫[12:55] ：
-
I’m curious, are there any special challenges to working on a site that is intended to feature other people’s codes and other people’s projects?
我很好奇，在旨在展示其他人的代码和其他人的项目的网站上工作是否有任何特殊的挑战？
Rachel:
雷切尔：
-
O, so many challenges! When you’re letting people run code on a site, there’s obviously a lot of security issues — which I’m definitely not qualified to solve, but the other guys I work with have done a great job at dealing with those issues. But the challenge we run into a lot is, because our users are really pushing the boundaries with browser rendering capabilities — which is awesome, it’s so great — you can have a situation where, if you have eight iframes on a page, and they’re all attempting to do some crazy CSS animations, that could cause the browser to slow down. So, that’s something we’re always aware of, and that’s a constant thing we have to mitigate against.
哦， 这么多挑战！ 当您让人们在站点上运行代码时，显然存在很多安全问题-我绝对没有资格解决这些问题，但是与我一起工作的其他人在处理这些问题方面做得很好。 但是我们面临的挑战是，因为我们的用户确实在利用浏览器呈现功能来突破界限，这非常棒，它是如此之大，如果页面上有八个iframe，他们可能会遇到这样的情况：都是试图做一些疯狂CSS动画，这可能会导致浏览器变慢。 因此，这是我们一直都知道的，并且这是我们必须不断克服的问题。
Tim:
蒂姆：
-
Yeah, that definitely sounds challenging, and I can’t imagine having to think about all of those things while building something that still works well for people who are trying to build inside of it. That’s intense.
是的，这听起来确实具有挑战性，而且我无法想象必须考虑所有这些问题，同时构建对于仍试图在其中构建内容的人仍然有效的东西。 好激烈
Stepping away for a second from animation, are there other things that you typically enjoy working on, any side projects, things like that?
离开动画一秒钟，您通常喜欢进行其他工作，任何附带项目吗？
Rachel:
雷切尔：
-
As well as animation, I enjoy anything to do with data design. That’s really interesting to me, whether it’s data visualization or even just organizing data — so it can be used in an app. That is very interesting to me. I also love anything to do with typography: motion with type is my favorite, but really I just love anything hand lettered as well.
除了动画之外，我喜欢与数据设计有关的任何事情。 无论是数据可视化还是组织数据，这对我来说真的很有趣，因此可以在应用程序中使用它。 这对我来说很有趣。 我也喜欢与排版有关的一切：带字体的运动是我的最爱，但实际上我也喜欢手写的任何东西。
So they’re also side interests of mine.
因此，它们也是我的共同利益。
David:
大卫：
-
It sounds like you come at your front-end work with kind of a design background as well as a development background. Do you have a background in design?
听起来您像具有设计背景和开发背景的前端工作。 你有设计背景吗？
Rachel:
雷切尔：
-
I did actually study some design, when I went to college the second time (because the first time was a bit of a failure).
当我第二次上大学时，我确实学习了一些设计(因为第一次是一个失败)。
The second time I went, I decided I wanted to be a web designer, and this is because the first time I went, I thought I was going to be a software engineer. That didn’t go so well, because it was just too “engineering slash back end” to maintain my interest — because I’m sort of a very visual person, but I enjoy the logic.
第二次，我决定要成为一名网页设计师，这是因为第一次，我以为自己将成为一名软件工程师。 事情进展得并不顺利，因为它太“工程化”了，无法维持我的兴趣-因为我是一个非常视觉化的人，但是我喜欢逻辑。
And when I went to study web design, I didn’t realize at the time, there was a whole front-end world where you could use your design skills, but also programming skills. And it was during that web design course that we did some intro to HTML, CSS JavaScript stuff, and then I was like, “Oh, this is what I like, what I should be doing.” So …
当我学习网页设计时，当时我没有意识到，有一个整个前端世界，您可以使用自己的设计技能，也可以使用编程技能。 正是在那个网页设计课程中，我们对HTML，CSS JavaScript进行了一些介绍，然后我觉得：“哦，这就是我想要的，我应该做的。” 所以……
David:
大卫：
-
That’s exciting, and it’s great when you discover something like that.
这很令人兴奋，当您发现类似的东西时也很棒。
Rachel:
雷切尔：
-
Mm-hmm.
嗯
David:
大卫：
-
It brings up an interesting question, because the interface between designers and front-end developers is always a challenging one — especially when you’re getting into things like animation and motion design. I’m curious if you’ve come across good solutions for working with designers on animation and motion design for front-end development.
这就提出了一个有趣的问题，因为设计师和前端开发人员之间的接口始终是一个具有挑战性的工作-尤其是当您进入动画和动作设计之类的领域时。 我很好奇，如果您遇到了与设计师合作进行前端开发的动画和运动设计的好的解决方案。
Rachel [16:00]:
雷切尔[16:00] ：
-
I think the space for this sort of thing is growing, as far as the tools that people can use to prototype design. And specifically for designers to prototype design work, so they can work with their developers. There’s a couple of tools; one that comes to mind is Framer. That allows you to write quick, animated design prototypes without having hard-core dev skills.
就人们可以用来进行原型设计的工具而言，我认为这类事情的空间正在增长。 特别是为设计师提供原型设计工作，以便他们可以与开发人员一起工作。 有一些工具； 我想到的是Framer 。 这样您就可以编写快速，生动的设计原型，而无需掌握核心开发技能。
So there’s these tools that are sort of bridging the gap between traditional visual designers and developers who are able to do the coding. It’s still a very difficult problem to solve, though. Animation brings in a level of complexity that is just so much harder to communicate than just static comps — that we were designing with for the last ten years or so.
因此，这些工具在某种程度上弥合了传统视觉设计师和能够进行编码的开发人员之间的鸿沟。 但是，这仍然是一个非常困难的问题。 动画带来的复杂性比仅静态合成器要难得多，这是我们过去十年左右的设计经验。
So I think a lot of people are working on solutions now to help in that space, but I don’t think we’re 100% there yet with making that an easy transition from motion design to development.
因此，我认为现在有很多人正在致力于在该领域提供帮助的解决方案，但是我认为，要实现从运动设计到开发的轻松过渡，我们还不是100％在那里。
Tim:
蒂姆：
-
In my job, I work on an ecommerce site. That’s definitely something I find we struggle with — between getting a typical Sketch file, or a Photoshop document, and then this intermediary state: what are the interactions? And at times there are layer comps, or videos, but there’s always this difficulty with how you translate the actual feel of the thing that you’re working with. So I definitely understand that there.
在工作中，我在电子商务网站上工作。 这绝对是我发现我们遇到的困难–在获取典型的Sketch文件或Photoshop文档之间，然后是在这种中介状态之间：交互是什么？ 有时会有层合成或视频，但是如何转换所处理事物的实际感觉始终会遇到困难。 所以我绝对明白那里。
Rachel:
雷切尔：
-
Yeah, it’s a very specific skill set, and — because of how new it all is to all of us — I don’t think there’s a huge amount of people who are an expert in that skill set. Because traditional motion designers are very good at motion design, but just because you are good at motion design doesn’t mean you can design motion for interactive interfaces — because that’s like a totally different thing, as opposed to just sitting and watching something animate in front of you.
是的，这是一个非常具体的技能，而且-由于这对我们所有人来说都是新事物-我认为没有多少人是该技能的专家。 因为传统的动作设计师非常擅长于动作设计，而不仅仅是您擅长于动作设计，并不意味着您可以为交互界面设计动作-因为那是完全不同的事情，而不是仅仅坐在并观看动画中的动画。在你面前。
Having an interface animate has totally different requirements. And as developers, we haven’t had these animation technologies around for super long, so we haven’t had much time to sharpen our skills on how to even make this stuff work. So it’s hard, and I think it’s going to take some time for us all to find our way with this. But as long as we’re trying, I think within a few years we’ll be seeing some really polished animated interfaces coming out of it.
设置界面动画具有完全不同的要求。 而且作为开发人员，我们已经很长时间没有这些动画技术了，所以我们没有太多时间来提高我们的技巧，甚至使这些东西都能正常工作。 因此这很困难，我认为我们所有人都需要花费一些时间才能找到解决办法。 但是，只要我们一直在尝试，我认为在几年之内我们将会看到一些真正优美的动画界面。
David:
大卫：
-
Yeah, it’s a very exciting time, and it’s definitely at the cutting edge of what we’re trying to work on right now. So I’m curious, how can people find you online and get in touch with you?
是的，这是一个非常令人兴奋的时刻，而且绝对是我们目前正在努力的最前沿。 所以我很好奇，人们如何在网上找到您并与您取得联系？
Rachel:
雷切尔：
-
Probably the best place to find me is on Twitter. I’m pretty active on Twitter, and my Twitter handle is @Rachsmithtweets.
找到我的最佳地点可能是在Twitter上。 我在Twitter上非常活跃，我的Twitter句柄是@Rachsmithtweets 。
You can find me on CodePen obviously, codepen.io/RachSmith. I also have a website, RachSmith.com, but I don’t really publish much on there, because I put most of my blogging on my CodePen blog. I also have a GitHub “Ask me anything” repo, which is a great place for anyone to send in a question they want to ask me. I do get email, and I tend to be really bad at email and not reply. So, if you anyone has a question, I do have a GitHub repo that’s good for that.
您可以在CodePen上找到我，codepen.io / RachSmith 。 我也有一个网站RachSmith.com ，但是我在那里的发布并不多，因为我将大部分博客放在了CodePen博客上 。 我还有一个GitHub “问我什么”仓库，对于任何人发送他们想问我的问题来说都是一个好地方。 我确实收到电子邮件，而且我对电子邮件的态度很差而不回信。 因此，如果您有任何疑问，我确实有一个很好的GitHub存储库。
David:
大卫：
-
Fantastic. We’ll definitely put links to all of those in the Show Notes, and thank you so much for joining us today on the Versioning Show.
太棒了 我们肯定会将所有链接链接到“显示说明”中，并非常感谢您今天加入我们参加“版本控制显示”。
Rachel:
雷切尔：
-
Thank you for having me!
谢谢你有我！
[Musical interlude]
[音乐插曲]
Tim:
蒂姆：
-
So that was definitely very interesting. One of the reasons I wanted to have Rachel on the show is because of how great she is at putting out such clean code and easy-to-digest-and-understand demos. What did you think, David?
因此，这绝对是非常有趣的。 我之所以想让雷切尔(Rachel)参加演出，是因为她出色地发布了如此简洁的代码以及易于理解和理解的演示。 大卫，您怎么想？
David:
大卫：
-
I was really glad that you invited her, because I wasn’t familiar with her work beforehand. But now I am addicted to her CodePen demos. They’re so much fun. You can go in there and tweak and twiddle, and she’s got such great visuals and tips about how to use motion, how to use easing, and it’s so much to learn from.
我真的很高兴您邀请她，因为我之前对她的工作并不熟悉。 但是现在我沉迷于她的CodePen演示。 他们是如此有趣。 您可以进入那里进行调整和旋转，她获得了很棒的视觉效果以及关于如何使用运动，如何使用缓动的技巧，并且可以学到很多东西。
Tim:
蒂姆：
-
Yeah, it really is. Definitely great resources there. I also thought it was interesting — and this isn’t necessarily something that I hear talked about every day, but — there really is a gap between development and design when it comes to thinking through and creating complex visual animations. Have you ever had to deal with that before? If you have, what did you do to get around that space?
是的，确实如此。 那里绝对有很多资源。 我还认为这很有趣-这不一定是我每天听到的话题，但是-在思考和创建复杂的视觉动画时，开发和设计之间确实存在差距。 您以前曾经处理过吗？ 如果有的话，您是怎么做的？
David [20:22]:
大卫[20:22] ：
-
It’s a teeth-gritting kind of a situation. I’ve had to deal with it unfortunately a lot. I’ve worked at companies, and I’ve consulted for companies, that have been trying to put their interfaces online, at the very cutting edge of what the browsers are capable of. And that crossed over from, “Are we going to do Flash?” to “Are we going to do CSS?” to “Are we going to use JavaScript for our animations? What’s the most efficient for the users?”
这是一种令人伤心的情况。 不幸的是，我不得不处理很多事情。 我曾在公司工作过，也曾为公司提供咨询服务，这些公司一直试图将其界面置于在线状态，这是浏览器所能提供的最前沿的功能。 这就越过了，“我们要制作Flash吗？” 改为“我们要制作CSS吗？” 到“我们要在动画中使用JavaScript吗？ 对于用户来说，最有效的是什么？”
And then trying to get designers — who, first of all, might only be used to thinking in terms of static content — thinking about not only how animation would work on their own desktop devices, but also how to translate that into something that makes sense for a user interface.
然后试图吸引设计师-首先，他们可能只习惯于静态内容方面的思考-不仅在考虑动画如何在其自己的台式设备上工作，还考虑如何将其转化为有意义的东西用于用户界面。
It was a difficult transition for a lot of people, and I agree with Rachel, the tools just are not really there yet for designers to communicate their theories about how they want something to work and interact effectively — even those designers who understand how motion graphics work in a web interface to communicate concepts.
对于很多人来说，这是一个艰难的过渡，我同意Rachel的观点，对于设计人员来说，这些工具还没有真正用于传达他们关于如何工作和有效交互的理论，即使那些了解运动图形的设计师也是如此。在Web界面中交流概念。
Tim:
蒂姆：
-
Yes, it’s ironic, because at my job, one of the main ways that we try to communicate these interactions with each other — between development and design — is by sending around CodePen demos. Which is kind of funny, because there’s one for everything, down to, “I wanna click this search icon SVG, and have it turn into an X. And what does that look and feel like?”
是的，具有讽刺意味，因为在我的工作中，我们尝试在开发和设计之间相互交流这些交互的主要方式之一就是发送CodePen演示。 这很有趣，因为所有内容都有一个，直到“我想要单击此搜索图标SVG，然后将其变成X。它的外观和感觉如何？”
But CodePen is great for at least a piece of reference material. And if you don’t have something like that, then my next go-to is just to sit down with a designer and say, “All right, what were you thinking? Let’s prototype this out together.”
但是CodePen至少适用于一本参考资料。 如果您没有这样的东西，那么我接下来要做的就是与一位设计师坐下来说：“好吧，您在想什么？ 让我们一起将其原型化。”
David:
大卫：
-
Sometimes it really does take a pair programming situation with the designer and a developer to make it happen. One of the challenges when you’re sharing things with CodePen, for example, is designers who may know exactly what they want to happen visually, but are not actually developers; they’ll be forced to learn how to write just enough bad code in order to get something looking like they want it to look.
有时确实需要与设计人员和开发人员进行一对编程才能实现。 例如，当您与CodePen共享事物时，挑战之一就是设计师可能会确切地知道他们想在视觉上发生什么，但实际上并不是开发人员。 他们将被迫学习如何编写足够多的错误代码，以使它们看起来像他们想要的样子。
But it’s prototype code, and the confusion about whether or not this is “done” — versus actually “ready for production” — is something that engineers need to keep on top of when working with designers.
但这是原型代码，而对于是否“完成”(实际上是“准备投入生产”)的困惑，则是工程师与设计师合作时需要注意的事情。
Tim:
蒂姆：
-
Careful — that unfinished code thing you mention sounds dangerously close to what I do every day! So …
小心-您提到的未完成的代码听起来很接近我每天要做的事情！ 所以……
[Laughter]
[笑声]
David:
大卫：
-
Hey, I have faith in you. I know that you’re looking at the overall production quality code issue.
嘿，我对你有信心。 我知道您正在查看整体生产质量代码问题。
Tim:
蒂姆：
-
Well thank you very much. But yeah, there’s something to be said there, and it’s almost like there’s a book or a really good talk just waiting to be written about working on sharing difficult animation sorts of work between development and design. And I, for one, would love to see somebody step forward with some creative solutions to that problem.
好的，谢谢。 但是，是的，这里有话要说，几乎就像有一本书或一个非常好的演讲，只是在等待写关于在开发和设计之间共享困难的动画工作的写作。 我想(一个人)希望有人为该问题提供一些创造性的解决方案。
David:
大卫：
-
Maybe somebody who can communicate as well as Rachel does.
也许有人能像Rachel一样交流。
Tim:
蒂姆：
-
I think so. We should at least strongly hint that we believe Rachel should write a book about the solutions!
我认同。 我们至少应该强烈暗示我们相信Rachel应该写一本有关解决方案的书！
David:
大卫：
-
Yeah, and everybody knows how to get in touch with her now, because it’s all in the Show Notes for this episode.
是的，每个人现在都知道如何与她取得联系，因为这一切都在本集的节目注释中。
Tim:
蒂姆：
-
Yes, sorry Rachel, we may have just given you a lot more work to do.
是的，对不起，瑞秋，我们可能已经给您做了很多工作。
[Laughter]
[笑声]
David:
大卫：
-
Well, it doesn’t seem like Rachel minds that sort of thing. I love that she’s so active about sharing information and educating the community. And just reading through the questions in her AMA, it’s wonderful to see the nuggets of solid wisdom that come out in that.
好吧，似乎Rachel没想到那种事情。 我喜欢她在共享信息和教育社区方面如此积极。 只需阅读她的AMA中的问题，很高兴看到其中出现的扎实的智慧。
Tim:
蒂姆：
-
Yeah, that was another interesting and creative thing, the GitHub AMA. I would love to see more leaders in the industry do things like that — people like Paul Irish, John Resig, Chris Coyier, for example. I think there are a ton of questions a lot of us have to ask them, specifically because those are the types of people who have taught us most of what we know about.
是的，这是另一个有趣且有创意的东西，GitHub AMA。 我希望看到行业中更多的领导者能够做到这一点-例如像Paul Irish，John Resig和Chris Coyier这样的人。 我认为我们很多人必须问很多问题，特别是因为这些人已经教会了我们大多数我们所了解的知识。
I mean, for myself for example, most of what I know about JavaScript and browser performance and CSS comes from those three specifically, and it’s a good thing to do. I’m definitely thinking of copying that myself. If there’s anything anybody wants to ask me — I don’t know.
我的意思是，例如，对于我自己，我对JavaScript和浏览器性能以及CSS的大部分了解都来自这三个方面，这是一件好事。 我肯定是想复制自己。 是否有任何人想问我-我不知道。
David:
大卫：
-
I’m sure that there is, and I like the way that Rachel positions it. She says she’s bad at email. I don’t believe that she actually is, but it’s a great way to have a place to point people when they email you a question.
我确定有，并且我喜欢Rachel放置它的方式。 她说她的电子邮件不好。 我不相信她实际上是她，但是这是一个当人们向您发送电子邮件时指出他们的好方法。
You can say, I’ve already answered that, and here’s where it lives. Or, if you haven’t, you can put it up there and the next person who asks, there’s a place where they can go and look for that answer.
您可以说，我已经回答了，这里就是它的住所。 或者，如果没有，则可以将其放在那里，然后下一个问的人去，那里是一个他们可以去寻找答案的地方。
Tim:
蒂姆：
-
Yes, definitely. An excellent solution.
当然是。 一个极好的解决方案。
David:
大卫：
-
Cool. Well, I think this was a great episode, and I’m sure that our listeners learned a lot from Rachel.
凉。 好吧，我认为这是一个很棒的插曲，而且我相信我们的听众可以从瑞秋中学到很多东西。
Tim:
蒂姆：
-
Yeah, I certainly did.
是的，我当然做到了。
Thank you 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-5-with-rachel-smith/
rachel zhang
170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
