无头用户界面组件 #4213

Starriers · 2018-07-28T05:25:22Z

译文翻译完成，resolve #4079

update

Update Repo

Update Repr

xunge0613 · 2018-07-28T10:25:10Z

校对认领

fanyijihua · 2018-07-28T10:25:13Z

@xunge0613 好的呢 🍺

Starriers · 2018-07-28T11:33:04Z

@xunge0613 好像有些地方翻译的有问题但是不知道怎么翻译你可以试试修改

xunge0613

校对完成 @leviding @Starriers
整体上翻译得挺好的，有一些细节要注意一下..

xunge0613 · 2018-07-28T15:17:54Z

TODO1/headless-user-interface-components.md

@@ -62,7 +62,7 @@ const CoinFlip = (
 );
 ```

-Later, a requirement emerges. “We were wondering if you could add a button to `<CoinFlip />`, but only in the application, to rerun the odds?”. Things are starting to get ugly, I can’t even look Kent C. Dodds in the eyes anymore:
+后来，出现了一个需求。“我们像知道你能否在应用程序中的 `<CoinFlip />` 只添加一个用来 odds 的按钮？”事情开始变得糟糕，以致于我不敢在直视 Kent C. Dodds 的眼睛。


“我们像知道你能否在应用程序中的 <CoinFlip /> 只添加一个用来 odds 的按钮？
=>
“我们想知道你能否只给 APP 里的 <CoinFlip /> 添加一个重掷硬币的按钮？

1 像->想
2 此处的 odds，本意是可能性、概率，而掷硬币是一个概率事件.. 所以 rerun the odds 的意思应该指重掷硬币，而且结合后文代码中有个 <button onClick={this.handleClick}>Reflip</button> reflip 就是重掷，所以这里翻译成：重掷硬币。
3 in the application ，结合上下文，有一个 in the blog post ，有一个 The marketing website code: 说明有 APP 和网站不同的平台

以致于我不敢在直视 Kent C. Dodds 的眼睛。
=>
以致于我不敢再直视 Kent C. Dodds 的眼睛。

在->再

xunge0613 · 2018-07-28T15:36:22Z

TODO1/headless-user-interface-components.md


-Suppose you had a requirement to implement a coin flip feature that performed some logic when it is rendered to emulate a coin flip! 50% of the time the component should render “Heads” and 50% of the time it should render “Tails”. You say to your product manager, “Oof that will take years of research!”, and you get to work.
+假设你现在需要实现一个硬币翻转功能，该功能在呈现模拟硬币翻转时执行一些逻辑！50% 的时间组件应该渲染 “Heads”，50% 的时间应该渲染 “Tails”。你对你的产品经理说“这需要多年的研究！”然后你继续工作。


关于 coin flip ，建议翻译成：掷硬币。
参考维基百科 https://en.wikipedia.org/wiki/Coin_flipping ，https://zh.wikipedia.org/wiki/%E6%93%B2%E7%A1%AC%E5%B9%A3
而且结合文章，50% time heads ，50% time tails 就是一半时间正面、一半时间反面，符合掷硬币的逻辑。

假设你现在需要实现一个硬币翻转功能，该功能在呈现模拟硬币翻转时执行一些逻辑！
=>
假设你现在需要实现一个掷硬币的功能，当组件渲染时模拟一次掷硬币！

that performed some logic 感觉不译句子比较通顺...

xunge0613 · 2018-07-28T15:48:33Z

TODO1/headless-user-interface-components.md


-Suppose you had a requirement to implement a coin flip feature that performed some logic when it is rendered to emulate a coin flip! 50% of the time the component should render “Heads” and 50% of the time it should render “Tails”. You say to your product manager, “Oof that will take years of research!”, and you get to work.
+假设你现在需要实现一个硬币翻转功能，该功能在呈现模拟硬币翻转时执行一些逻辑！50% 的时间组件应该渲染 “Heads”，50% 的时间应该渲染 “Tails”。你对你的产品经理说“这需要多年的研究！”然后你继续工作。


50% 的时间组件应该渲染 “Heads”，50% 的时间应该渲染 “Tails”。
=>
一半的时间组件应该渲染“正面”，一半的时间应该渲染“反面”。

heads or tails 正面或反面

xunge0613 · 2018-07-28T15:52:47Z

TODO1/headless-user-interface-components.md


 ```
 const CoinFlip = () =>
 Math.random() < 0.5 ? <div>Heads</div> : <div>Tails</div>;
 ```

-Turns out emulating coin flips is way easier than you thought so you proudly share the results. You get a response, “This is great! Could you please update it to show these cool coin images?”. No problem!
+事实证明，模仿硬币翻转比你想象的要容易得多，所以你可以自豪地分享成果。你得到了回复，“这真的是太棒了！请更新那些显示很酷的硬币的图片好么？”没问题！


事实证明，模仿硬币翻转比你想象的要容易得多，所以你可以自豪地分享成果。
=>
事实证明，模仿掷硬币比你想象的要容易得多，所以你可以自豪地分享成果。

xunge0613 · 2018-07-28T15:53:41Z

TODO1/headless-user-interface-components.md

@@ -37,7 +37,7 @@ const CoinFlip = () =>
 );
 ```

-Soon, they’d like to use your `<CoinFlip />` component in the marketing material to show people how cool your new feature is. “We’d like to put in the blog post, but we need the labels “Heads” & “Tails” back, for SEO and stuff.” Oh man, I guess we’ll add a flag for the marketing site?
+很快，他们会在营销材料中使用你的 `<CoinFlip />` 组件，来向人们演示你的新特性有多么炫酷。“我们想在博客上发表文章，但是我们需要标签 'Heads' 和 'Tails'，用于 SEO 和其他事情。”哦，天啊，或许我们需要在商城网站中添加一个标志？


很快，他们会在营销材料中使用你的 <CoinFlip /> 组件，来向人们演示你的新特性有多么炫酷。
=>
很快，他们会在营销材料中使用你的 <CoinFlip /> 组件，来向人们演示你的新功能有多么炫酷。

前文也有一个 feature，翻译成：功能，建议这里前后保持一致。

xunge0613 · 2018-07-29T07:12:45Z

TODO1/headless-user-interface-components.md


-For a truly exemplar non-trivial headless component, check out a project by my friend [Kent C. Dodds](https://kentcdodds.com/) over at Paypal called [downshift](https://github.com/paypal/downshift). In fact, it is downshift that ultimately inspired this post. Without providing any user interface, downshift offers sophisticated autocomplete/dropdown/select experiences that are accessible. Take a look at all the ways it can be used [here](http://downshift.netlify.com/?selectedKind=Examples&selectedStory=basic&full=0&addons=1&stories=1&panelRight=0).
+要获取一个真正的示例性非平凡无头组件，可以查看我朋友 [Kent C. Dodds](https://kentcdodds.com/) 在 Paypal 上一篇叫做 [downshift](https://github.com/paypal/downshift) 的文章。事实上，正是 downshift 给了这篇文章一些灵感。在不提供任何用户界面的情况下，downshift 提供了复杂的自动完成、下拉、选择体验，这些体验都是可以访问的。[在这里](http://downshift.netlify.com/?selectedKind=Examples&selectedStory=basic&full=0&addons=1&stories=1&panelRight=0)看看它可以使用的所以方法。


在这里看看它可以使用的所以方法。
=>
在这里看看它所有可用的方法。

所以 -> 所有

xunge0613 · 2018-07-29T07:19:05Z

TODO1/headless-user-interface-components.md


-In a world where design systems and user interface libraries are headless, your interfaces can have a high-end custom feel _and_ the durability & accessibility of a great open source library. You spend your time implementing the only part that you needed to, the part that is truly unique, the look and feel specific to your application.
+在一个设计系统和用户界面库都是无头的世界里，你的界面可以有一个高级定制感觉，**以及**优秀开源库的持久性和可访问性。你需要花费时间来实现你需要的唯一部分，真正独特的部分，以及特定于应用程序的外观和感觉。


你的界面可以有一个高级定制感觉，
=>
你的界面可以有一种高端定制的感觉，

high-end 翻译成高端吧...

xunge0613 · 2018-07-29T07:35:22Z

TODO1/headless-user-interface-components.md


-You now have two options, replying “Sorry, not much to share here.” or adding `DiceRoll` complexity into `CoinFlip` as you watch the bones of your component break under the weight of its responsibility. (Is there a market for brooding programmer poets? I’d love to pursue that craft.)
+您现在有两个选项，回复“对不起，这里没有可以分享的。”或在你看到组件的骨架超出其职责范围时，向 `CoinFlip` 中添加 `DiceRoll` 的复杂性。（是否有一个给沉思的程序员诗人的市场？我喜欢追求这种技术。）


或在你看到组件的骨架超出其职责范围时，向 CoinFlip 中添加 DiceRoll 的复杂性
=>
或着你一边向 CoinFlip 中添加 DiceRoll 的复杂功能，一边看着组件无法承受过多职责而崩溃。

感觉这两个动作翻译成同时发生可能会好一些，或者前者先发生，后者再发生

xunge0613 · 2018-07-29T07:36:28Z

TODO1/headless-user-interface-components.md


-You now have two options, replying “Sorry, not much to share here.” or adding `DiceRoll` complexity into `CoinFlip` as you watch the bones of your component break under the weight of its responsibility. (Is there a market for brooding programmer poets? I’d love to pursue that craft.)
+您现在有两个选项，回复“对不起，这里没有可以分享的。”或在你看到组件的骨架超出其职责范围时，向 `CoinFlip` 中添加 `DiceRoll` 的复杂性。（是否有一个给沉思的程序员诗人的市场？我喜欢追求这种技术。）


您现在有两个选项，回复“对不起，这里没有可以分享的。”
=>
您现在有两个选项，回复“对不起，我们不一样。”

感觉这里皮一下也可以…… 仅供参考……

嗯啊好的您我好想翻译错了全文用的好像都是你

xunge0613 · 2018-07-29T07:47:16Z

TODO1/headless-user-interface-components.md


-You now have two options, replying “Sorry, not much to share here.” or adding `DiceRoll` complexity into `CoinFlip` as you watch the bones of your component break under the weight of its responsibility. (Is there a market for brooding programmer poets? I’d love to pursue that craft.)
+您现在有两个选项，回复“对不起，这里没有可以分享的。”或在你看到组件的骨架超出其职责范围时，向 `CoinFlip` 中添加 `DiceRoll` 的复杂性。（是否有一个给沉思的程序员诗人的市场？我喜欢追求这种技术。）


（是否有一个给沉思的程序员诗人的市场？我喜欢追求这种技术。）
=>
（是否有一个给忧郁的程序员诗人的市场？我喜欢追求这种技术。）

感觉此处的程序员很无奈委屈…… 所以这里的 brooding 翻译成忧郁的？
不过我也不确定……

也行吧诗人不是都挺忧郁的感觉

xunge0613 · 2018-07-29T10:13:39Z

话说，headless 要不翻译成无渲染组件，或者无界面组件？
vue 里有个叫无渲染组件的东西： https://www.w3cplus.com/vue/renderless-components-in-vuejs.html
headless browser ，浏览器有无头浏览器，也称无界面浏览器
@Starriers

Moonliujk · 2018-07-30T01:18:53Z

@leviding 校对认领

fanyijihua · 2018-07-30T01:19:00Z

@Moonliujk 妥妥哒 🍻

Moonliujk

译者翻译很好，前校对者校对质量也很高，仅仅指出一些小的错误

Moonliujk · 2018-07-30T01:33:10Z

TODO1/headless-user-interface-components.md


-Suppose you had a requirement to implement a coin flip feature that performed some logic when it is rendered to emulate a coin flip! 50% of the time the component should render “Heads” and 50% of the time it should render “Tails”. You say to your product manager, “Oof that will take years of research!”, and you get to work.
+假设你现在需要实现一个硬币翻转功能，该功能在呈现模拟硬币翻转时执行一些逻辑！50% 的时间组件应该渲染 “Heads”，50% 的时间应该渲染 “Tails”。你对你的产品经理说“这需要多年的研究！”然后你继续工作。

 ```
 const CoinFlip = () =>


这里建议采用代码着色，使代码结构更加清晰，方法参考：代码着色

但是我不知道这些是什么语言啊

Moonliujk · 2018-07-30T02:16:19Z

TODO1/headless-user-interface-components.md

@@ -214,7 +214,7 @@ class Probability extends React.Component {
 }
 ```

-With this headless component we can swap out the implementation of `<CoinFlip />` without any changes to its consumers:
+利用这个无头组件，我们在没有对消费者进行任何更改对情况下，交换 `<CoinFlip />` 的实现：


同上，这里的 consumer 保留不翻译

Moonliujk · 2018-07-30T02:20:30Z

TODO1/headless-user-interface-components.md


-> Rule of Separation: Separate policy from mechanism; separate interfaces from engines. — Eric S. Raymond
+> 分离原则：将策略与机制分离，将接口和引擎分离 —— Eric S. Raymond


将接口和引擎分离
=>
将接口和引擎分离。
结尾添加句号

因为感觉像是引用格言所以没有加的，现在加上去

Moonliujk · 2018-07-30T02:30:03Z

TODO1/headless-user-interface-components.md


-> _Interface_ and mechanism tend to mutate on different timescales, with _interfaces_ changing much faster than mechanism. Fashions in the look and feel of GUI toolkits may come and go, but raster operations and compositing are forever.
+> **接口**和机制都倾向于在不同时间范围内变化，但**接口**的变化比机制要快得多。GUI 工具包多外观的时尚和使用感可能会变化，但是操作和组合却不会。


这里前半句对应于“接口的变化"，而后半句对应于”机制的变化“。GUI图形外观变化很快，但是内部操作逻辑，如像素的显示，对于像素的操作（文中提到的raster operations）是在很长时间内不会改变的。可以在文中添加译者注，方便读者的理解。

Moonliujk · 2018-07-30T02:35:38Z

TODO1/headless-user-interface-components.md


-1.  How long will this component live for? Is it worth deliberately preserving the mechanism aside from the interface? Perhaps to use this mechanism in another project with a different look and feel?
-2.  How frequently is our interface bound to change? Will the same mechanism have multiple interfaces?
+1.  这个组件会持续多长时间？除了界面外，是否值得刻意保留这个机制？也许在另一个外观和感觉不同的项目中可以使用这种机制？


也许在另一个外观和感觉不同的项目中可以使用这种机制？
=>
也许在另一个外观和体验不同的项目中可以使用这种机制？
前文的 feel 翻译为体验，那么这里为了统一，翻译为体验较好

Moonliujk · 2018-07-30T02:51:11Z

TODO1/headless-user-interface-components.md


-In a world where design systems and user interface libraries are headless, your interfaces can have a high-end custom feel _and_ the durability & accessibility of a great open source library. You spend your time implementing the only part that you needed to, the part that is truly unique, the look and feel specific to your application.
+在一个设计系统和用户界面库都是无头的世界里，你的界面可以有一个高级定制感觉，**以及**优秀开源库的持久性和可访问性。你需要花费时间来实现你需要的唯一部分，真正独特的部分，以及特定于应用程序的外观和感觉。


你需要花费时间来实现你需要的唯一部分，真正独特的部分，以及特定于应用程序的外观和感觉。
=>
你仅需要将时间花费在你所需要的部分 —— 一个独特的，外观及体验都只属于你APP的部分。
这里我觉得时强调了无界面组件的优势 —— 可重用性好，在自己的APP中使用时，自己的关注点就可以主要放在视图体验设计，而不是逻辑层的设计

Moonliujk · 2018-07-30T02:56:34Z

@Starriers @leviding 校对完毕

Starriers · 2018-07-30T02:57:31Z

@Moonliujk 那你觉得上一位校对者的 headless 的改法好么我觉得还可以你觉得呢 vue 不是很熟悉不过看上去还不错

Starriers · 2018-07-30T03:35:03Z

@xunge0613 @Moonliujk @leviding 校对完成，辛苦了。

Moonliujk · 2018-07-30T03:59:12Z

@Starriers 我觉得翻译为 无渲染组件 挺合适的，从文章的总体表述看，这个组件没有参与渲染的部分，只是参与逻辑层的数据处理，所以我觉得 无渲染组件 挺合适的

leviding · 2018-07-30T04:16:36Z

@Starriers 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。

掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。
专栏地址：https://zhuanlan.zhihu.com/juejinfanyi

Starriers · 2018-07-30T04:20:28Z

已经发布：https://juejin.im/post/5b5e919f51882519d3467f41

Starriers added 10 commits June 25, 2018 19:30

Merge pull request #1 from xitu/master

d060c89

update

翻译完成

33995f1

翻译自我校对：第一次

c508c2f

Update how-i-built-a-web-crawler-to-automate-my-job-search.md

d858ecc

Merge pull request #2 from xitu/master

e26920d

update

Merge pull request #3 from xitu/master

4d198a9

update

Merge pull request #4 from xitu/master

36e94a3

update

Merge pull request #5 from xitu/master

f8c3480

Update Repo

Merge pull request #6 from xitu/master

6b39dfb

Update Repr

翻译完成

8cd84db

fanyijihua added the 校对认领 label Jul 28, 2018

leviding added the 前端 label Jul 28, 2018

leviding mentioned this pull request Jul 28, 2018

无头用户界面组件 #4079

Closed

fanyijihua added the 正在校对 label Jul 28, 2018

xunge0613 reviewed Jul 29, 2018

View reviewed changes

fanyijihua removed the 校对认领 label Jul 30, 2018

Moonliujk reviewed Jul 30, 2018

View reviewed changes

Starriers added 2 commits July 30, 2018 11:32

校对完成

baa8f40

修改标题

888a2a6

Update headless-user-interface-components.md

7ba2aee

leviding approved these changes Jul 30, 2018

View reviewed changes

leviding merged commit f81083c into xitu:master Jul 30, 2018

leviding added 翻译完成 and removed 正在校对 labels Jul 30, 2018

Starriers deleted the translation/headless-user-interface-components branch July 30, 2018 04:20


		Suppose you had a requirement to implement a coin flip feature that performed some logic when it is rendered to emulate a coin flip! 50% of the time the component should render “Heads” and 50% of the time it should render “Tails”. You say to your product manager, “Oof that will take years of research!”, and you get to work.
		假设你现在需要实现一个硬币翻转功能，该功能在呈现模拟硬币翻转时执行一些逻辑！50% 的时间组件应该渲染 “Heads”，50% 的时间应该渲染 “Tails”。你对你的产品经理说“这需要多年的研究！”然后你继续工作。


		For a truly exemplar non-trivial headless component, check out a project by my friend [Kent C. Dodds](https://kentcdodds.com/) over at Paypal called [downshift](https://github.com/paypal/downshift). In fact, it is downshift that ultimately inspired this post. Without providing any user interface, downshift offers sophisticated autocomplete/dropdown/select experiences that are accessible. Take a look at all the ways it can be used [here](http://downshift.netlify.com/?selectedKind=Examples&selectedStory=basic&full=0&addons=1&stories=1&panelRight=0).
		要获取一个真正的示例性非平凡无头组件，可以查看我朋友 [Kent C. Dodds](https://kentcdodds.com/) 在 Paypal 上一篇叫做 [downshift](https://github.com/paypal/downshift) 的文章。事实上，正是 downshift 给了这篇文章一些灵感。在不提供任何用户界面的情况下，downshift 提供了复杂的自动完成、下拉、选择体验，这些体验都是可以访问的。[在这里](http://downshift.netlify.com/?selectedKind=Examples&selectedStory=basic&full=0&addons=1&stories=1&panelRight=0)看看它可以使用的所以方法。


		In a world where design systems and user interface libraries are headless, your interfaces can have a high-end custom feel _and_ the durability & accessibility of a great open source library. You spend your time implementing the only part that you needed to, the part that is truly unique, the look and feel specific to your application.
		在一个设计系统和用户界面库都是无头的世界里，你的界面可以有一个高级定制感觉，以及优秀开源库的持久性和可访问性。你需要花费时间来实现你需要的唯一部分，真正独特的部分，以及特定于应用程序的外观和感觉。


		You now have two options, replying “Sorry, not much to share here.” or adding `DiceRoll` complexity into `CoinFlip` as you watch the bones of your component break under the weight of its responsibility. (Is there a market for brooding programmer poets? I’d love to pursue that craft.)
		您现在有两个选项，回复“对不起，这里没有可以分享的。”或在你看到组件的骨架超出其职责范围时，向 `CoinFlip` 中添加 `DiceRoll` 的复杂性。（是否有一个给沉思的程序员诗人的市场？我喜欢追求这种技术。）


		> Rule of Separation: Separate policy from mechanism; separate interfaces from engines. — Eric S. Raymond
		> 分离原则：将策略与机制分离，将接口和引擎分离 —— Eric S. Raymond


		> _Interface_ and mechanism tend to mutate on different timescales, with _interfaces_ changing much faster than mechanism. Fashions in the look and feel of GUI toolkits may come and go, but raster operations and compositing are forever.
		> 接口和机制都倾向于在不同时间范围内变化，但接口的变化比机制要快得多。GUI 工具包多外观的时尚和使用感可能会变化，但是操作和组合却不会。

无头用户界面组件 #4213

无头用户界面组件 #4213

Conversation

Starriers commented Jul 28, 2018

xunge0613 commented Jul 28, 2018

fanyijihua commented Jul 28, 2018

Starriers commented Jul 28, 2018

xunge0613 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

xunge0613 commented Jul 29, 2018 • edited Loading

Moonliujk commented Jul 30, 2018

fanyijihua commented Jul 30, 2018

Moonliujk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Moonliujk commented Jul 30, 2018

Starriers commented Jul 30, 2018

Starriers commented Jul 30, 2018

Moonliujk commented Jul 30, 2018

leviding commented Jul 30, 2018

Starriers commented Jul 30, 2018

xunge0613 commented Jul 29, 2018 •

edited

Loading