拍手数据集

Four years ago, I read a quote that would change my life forever.

四年前，我读到一句名言将永远改变我的生活。

I don’t remember the surrounding circumstances, but the sun was blazing hot and I was on the results page of a Google search.

我不记得周围的情况，但是烈日直射，我在Google搜索的结果页上。

A famous Pablo Picasso quote popped up, and for the next few weeks I was completely lost in it.

突然出现了著名的毕加索(Pablo Picasso)的名言，在接下来的几周里，我完全迷失了。

Good artists copy; great artists steal

优秀的艺术家复制品； 伟大的艺术家偷

— Pablo Picasso

- 巴勃罗毕加索

什么？ 他真的是那个意思吗？ (What? Did he really mean that?)

As multiple questions kept my mind spinning, I had to read more about who Pablo was.

由于有多个问题使我不安，我不得不有关帕勃罗是谁的信息。

Pablo Picasso was an artist considered one of the most influential and greatest of the 20th century. At this point, I knew he was no failure going around talking trash.

毕加索(Pablo Picasso)是一位被认为是20世纪最有影响力和最伟大的艺术家之一。 在这一点上，我知道他到处谈论垃圾并非没有失败。

I went on about my life, but that quote never left me.

我继续我的生活，但是那句话从未离开过我。

Years after, I had become an astute follower of the “steal” philosophy. It was so ingrained into my subconscious that I thought I would someday write a New York Times bestseller on the subject.

多年后，我成为“偷”哲学的精明追随者。 我的潜意识已经根深蒂固，以至于我有一天会写一篇关于《纽约时报》的畅销书。

I applied the rule to nearly everything I did.

我将规则应用于几乎所有我所做的事情。

For example, I spent hours re-writing several codepens (built by others) by hand, all in a bid to learn something by stealing. Earlier this year, I saw Dan Abramov talk about something similar.

例如，我花了几个小时手工重写了几个代码库(由他人构建)，以期通过偷窃来学习一些东西。 今年早些时候，我看到Dan Abramov在谈论类似的话题。

I wasn’t crazy after all.

毕竟我并不疯。

The steal rule appears to be a general rule for mastery.

盗窃规则似乎是精通的一般规则。

In his book, Peak: Secrets from the new science of expertise, Anders Ericsson talks about the feedback loop and how essential it is to mastery. In fact, this was the same technique Benjamin Franklin used to write incredible books. He was arguably one of the best American writers of his time.

在他的著作《 峰值：新的专业知识中的秘密》中 ，安德斯·爱立信(Anders Ericsson)谈到了反馈回路以及掌握反馈回路的必要性。 实际上，这与本杰明·富兰克林(Benjamin Franklin)用来写令人难以置信的书的技术相同。 可以说他是那个时代最好的美国作家之一。

This mindset and learning method led me to attempt to recreate the Medium clap effect.

这种思维方式和学习方法使我尝试重现中等鼓掌效果。

本实验 (The experiment)

The Medium clap was designed and built by people with at least five times the smarts as I have. But this was not the first time I recreated other people’s stuff. The Medium clap was just one of many such projects.

中号拍手是由拥有至少五倍于我的智慧的人设计和建造的。 但这不是我第一次重新创建别人的东西。 中号拍手只是许多此类项目之一。

I’ve always found the Medium clap to be so satisfying. Many times I’ve clapped after the 50 mark just to feel that satisfying animation.

我总是发现中号拍手是如此令人满意。 很多时候，我拍了50个大关才感到满意的动画。

Building the Medium clap was an interesting experiment. The goal wasn't to create an exact clone, just something that worked like it.

建立中级拍手是一个有趣的实验。 目的不是要创建一个精确的克隆，而只是创建一个类似的克隆。

我使用的技术 (Technology I used)

For content, I used good ol’ HTML and some SVG. I got a clap icon from the Noun Project.

对于内容，我使用了很好HTML和一些SVG。 我从名词项目中获得了鼓掌声。

I opened up the clap icon in Illustrator and edited it to my heart’s content. I then optimized via SVGOMG.

我在Illustrator中打开了拍手图标，并对其进行了编辑。 然后，我通过SVGOMG进行了优化。

I needed Javascript for Interactivity. So, I built the clap with vanillaJS and then forked it to rebuild via ReactJS.

我需要使用Javascript进行交互。 因此，我使用vanillaJS构建了拍手，然后将其分叉以通过ReactJS进行重建。

For animations, I chose LegoMushroom’s mo.js. It seemed to be the best for recreating the Medium clap animations. Mo.js is a pretty interesting animation library with a declarative API. I find it to be very beginner friendly, too.

对于动画，我选择了LegoMushroom的mo.js。 这似乎是重新制作中号鼓掌动画的最佳选择。 Mo.js是一个非常有趣的动画库，带有声明性API。 我发现它也非常适合初学者。

我如何开始 (How I started)

I wasn’t particularly sure where to start. I had some experience with SVG, but didn't have a lot of experience with mo.js.

我不确定从哪里开始。 我在SVG方面有一些经验，但是在mo.js方面却没有很多经验。

At this time there wasn’t any “working” Medium clap on codepen. There was nothing to learn there.

目前， codepen上没有任何“有效”的掌声 。 那里没有什么可学的。

So I stole again.

所以我又偷了。

“There must be something online I can learn from,” I said to myself. After a couple failed searches I found something.

我对自己说：“我必须从网上学到一些东西。” 几次搜索失败后，我发现了一些东西。

Mary Lou’s Codrops is one hell of a resource for practical frontend stuff. I searched and found some animated icons there.

Mary Lou的Codrops是实用前端资源的地狱之一。 我搜索并找到了一些动画图标 。

The icons were nothing like the Medium clap, but there was certainly something to learn there.

图标并不像中号鼓掌，但肯定有一些东西需要学习。

You know what I did, right?

你知道我做了什么，对不对？

I built the codrops animated icons from the ground up. I copied the entire codebase by hand.

我从头开始构建了codrops动画图标。 我手动复制了整个代码库。

This gave me a lot of perspective, and I knew how to go about the Medium clap afterwards.

这给了我很多见解，之后我就知道如何进行中等鼓掌了。

您如何真正快速地学习？ (How do you learn really fast?)

Other than building the codrops animated icons, I didn't have substantial experience with mo.js

除了建筑动画图标的codrops，我没有与丰富经验mo.js

That wasn’t a big deal. I had always been excited by the prospect of learning something new faster, and I had developed a system for learning stuff fast.

没什么大不了的。 我总是对更快学习新事物的前景感到兴奋，并且我开发了一个快速学习事物的系统。

In 2012, Scott Young completed all 33 courses in MIT’s fabled computer science curriculum, from Linear Algebra to Theory of Computation, in less than one year. He quickly became my inspiration.

2012年，斯科特·杨(Scott Young)在不到一年的时间内完成了MIT寓言中的计算机科学课程的全部33门课程 ，从线性代数到计算理论。 他很快成为我的灵感。

This MIT curriculum was supposed to be a four-year curriculum, but somehow he managed to systematically tame it in under 12 months.

麻省理工学院的课程原本应该是四年制课程，但是他不知何故设法在不到12个月的时间内系统地驯服了该课程。

I believe in ultra learning. It is such an important skill in today’s economy.

我相信超级学习。 这是当今经济中的一项重要技能。

So, what was the plan?

那么，计划是什么？

First off, I needed coverage. Coverage around the mo.js terrain. Like Scott says, you can’t plan an attack if you don’t have a map of the terrain.

首先，我需要覆盖。 覆盖mo.js地形。 如Scott所说，如果没有地形图，就无法计划攻击。

First, I skimmed through the official mo.js tutorials. I skipped some, to be honest. I saw a youtube video where Sarah Drasner explained how the mo.js library worked. I watch the video at 2X speed. I also read Sarah’s book, SVG Animations. There was a chapter dedicated to the mo.js library.

首先，我浏览了正式的mo.js教程。 老实说，我跳过了一些。 我看了一个YouTube 视频 ，其中Sarah Drasner解释了mo.js库的工作方式。 我以2倍的速度观看视频。 我还阅读了Sarah的书SVG Animations 。 有一章专门介绍mo.js库。

I read very fast.

我读得很快。

All I needed at this point was coverage on how the library worked and what was possible with it.

在这一点上，我所需要的只是覆盖库的工作方式以及它的可能用途。

After these, I moved on to putting my knowledge to work. It was time to build the Medium clap.

在这些之后，我继续着手运用我的知识。 现在是建立中级鼓掌的时候了。

After spending a lot of time on the animations, I ended up getting it right. Something that didn’t suck.

在花了很多时间在动画上之后，我最终弄对了。 没吸的东西。

I got stuck at some points. I made mistakes, and even spent a few days tweaking stuff. But yeah, I got it to work.

我有些时候陷入困境。 我犯了错误，甚至花了几天时间来调整内容。 但是，是的，我可以使用它。

重点是什么？ (What’s the point?)

I believe in continuously challenging myself. Pushing myself just beyond what I think I know or can do.

我相信不断挑战自我。 使自己超越我认为我知道或可以做的事情。

This was just another experiment in that regard.

这只是这方面的另一个实验。

实验失败了吗？ (Was it a failed experiment?)

I wouldn't say so.

我不会这么说。

On the 11th of October, the pen was picked, and went on to be viewed by over 2,000 people.

10月11日，笔被捡起，并被2,000多人观看。

I gave a talk at the ReactJS Summit, Lagos, on SVG and Microinteractions. There, I talked about micro interactions in the context of ReactJS apps, and got to show how to build the Medium clap effect.

我在拉各斯的ReactJS峰会上发表了有关SVG和微交互的演讲。 在那里，我谈到了ReactJS应用程序上下文中的微交互，并展示了如何构建中等拍手效果。

结论 (Conclusion)

I have come to find a new love for micro interactions, and I believe they are the little giants that make a great product.

我已经找到了对微交互的新爱，我相信它们是创造出色产品的小巨头。

In all, it was an interesting and fruitful experiment. I don’t regret it. Not at all.

总而言之，这是一个有趣而富有成果的实验。 我不后悔 一点也不。

Do I plan on recreating some more ambitious projects? Hell yeah!

我是否打算重新创建一些更宏大的项目？ 真是的！

But hey, that’s a talk for another day :)

但是，嘿，这是另一天的话题:)

Keep building, keep coding!

继续建设，继续编码！

翻译自: https://www.freecodecamp.org/news/how-i-re-built-the-medium-clap-effect-and-what-i-got-out-of-the-experiment-991672995fdf/

拍手数据集