漂亮的代码_使代码漂亮

漂亮的代码

共享代码段和截屏视频的最佳技术，将有助于推动开源项目取得成功。

动画制作： Chris Dermody的纯 CSS编码动画

创建自己的开放源代码项目可能会非常有益，但是很难打破喧嚣并让其他开发人员信任和使用您的软件。 通过遵循一些常见的最佳实践（例如包括可靠的文档，添加单元测试，与面向开源项目的CI / CD集成（例如travis-ci或circle-ci ）以及强制执行一致的样式约定），您可以获得很多基础。

我发现使开源项目真正脱颖而出的最有效，最简单的方法之一就是添加高质量的屏幕截图或动画演示 。 每当我看到对细节的关注时，不仅向我证明了作者在乎项目，而且这是传达项目实际工作的绝对最快的方法。

一张图片胜过千言万语。 -Cliche说这是手提袋相关的

包括优质的屏幕截图和演示在内，已成为我称为Developer UX的越来越重要的部分，这是准开发人员从成功地集成和将来维护到将项目添加为依赖项而一直采用的流程。

为此，我们将研究三种常见的用例，以改善带有媒体的开源项目的开发人员UX：

• 静态代码段（图像）
• 动画代码演示（GIF或SVG动画）
• 项目截屏（视频）

静态代码段

共享少量的静态代码无疑是此列表中最常见，最重要的用例。 每个开源项目的自述文件都应包括一些易于解析的示例用法摘要，因此让我们从这里开始。

GitHub上的Markdown代码片段

在最简单的范围内，GitHub允许在降价代码片段中突出显示语法 。 希望您熟悉这种嵌入样式，如果没有，我绝对建议您从这里开始。

GitHub要点

上面的代码段还提供了一种非常流行的方法，可以通过GitHub Gists共享静态代码段的示例 ，该方法具有以下优点：

• 可链接的
• 支持版本控制
• 通过评论支持讨论
• 语法高亮

碳

Markdown片段和GitHub要点都非常有用，但是如果您真的想使您的代码流行，那么Carbon就是最好的选择 。

图片来源： Carbon

Carbon是一个非常受欢迎的开源项目，它使您可以轻松创建美观的代码屏幕截图，以及大量的自定义选项和社区插件。 对于使英雄形象在自述文件中脱颖而出，增加在社交媒体上的参与度或撰写与工程相关的博客帖子（例如one）来说，这是一个很好的选择。

动画代码演示

我必须给出一个最重要的建议，其中包括快速演示项目核心用例的高质量内嵌演示。

但是，创建这些类型的演示有很多不同的方法，因此，我想在这里讨论我发现的最佳方法。

Asciinema是一个免费工具，可让您以正确的方式记录和共享终端会话。

Asciinema提供了一种基于终端的轻量级纯文本录制方法，使您可以进行无损录制，然后可以将其直接共享或呈现为SVG动画，GIF动画或视频。 令我惊讶的是，GitHub上有多少受欢迎的开源项目使用了Asciinema-我强烈建议您检查一下。

转换为GIF的示例Asciinema截屏视频（贷记： create-react-library ）请注意，此嵌入式GIF的质量比链接自述文件中的动画SVG低得多，如下所述。

动画SVG或GIF？

我们都知道GIF是一种非常低效的，有损的格式，但是让我们更深入地研究这个特殊的用例。

将以上嵌入的截屏gif与自述文件中相同的截屏动画SVG进行比较。 很难并排嵌入内联比较，但是动画SVG 明显更清晰，更小 ，为73kb，而质量较低的GIF为4.4MB。

那为什么还要讨论呢？ 好吧，您不能在中型博客文章中完全包含自定义HTML，现在可以了吗？ 因此，在很多地方都无法使用自定义动画SVG，并且在可预见的将来，GIF仍将作为这些用例的后备。 但是开源作者，请考虑为您的GitHub项目使用动画SVG和GIF！

GitHub上有一些非常受欢迎的开源项目，它们已开始使用更高效的动画SVG进行演示，例如create-react-app ，但总的来说，您会发现GIF更为常见。

重要的是要注意，在讨论动画SVG时，我们实际上是在将HTML代码片段嵌入到GitHub风格的markdown中，该链接链接到以每个帧作为SVG组编码的SVG文件以及通过CSS关键帧定义的动画（示例SVG 源 ）。

作为参考，这是我们以几种不同格式用作示例的create-react-library的截屏视频：

• 原asciicast
• 使用svg-term-cli创建的高质量动画SVG
• 使用asciicast2gif创建的低质量GIF

捕获和优化GIF

Asciinema非常适合基于终端的录制，但是如果要录制UI组件或网站怎么办？ 好吧，我在这里的第一个也是最重要的回答是，如果可能，请始终在项目旁边始终包含一个可用的演示，尤其是在前端Web项目中。 GitHub Page的免费托管非常容易上手！

如果确实要包含GIF，建议您使用GIPHY Capture或Kap记录屏幕并输出GIF。 另外，如果您有从其他来源录制的视频，我建议使用Gifski将视频转换为尽可能优化的GIF，以便于嵌入。

使用上面的代码片段在自述文件中嵌入了质量演示GIF。 （图片来源： terkelg的 提示 ）

项目截屏

如果您的项目越来越有参与性，或者您正在向更广泛的受众发起项目，那么包括演练视频的确可以帮助用户入门和支持。

屏幕流

我最喜欢的屏幕录制软件是ScreenFlow ，它的价格并不便宜，为129美元，但为您提供了许多功能强大，价格合理的工具，包括精确的矩形屏幕录制，视频和音频轨道混合，音频画外音，过渡效果以及更多。 这种屏幕录像比我们之前看过的屏幕截图和终端会话记录要复杂得多。

我在启动时使用ScreenFlow制作的产品演练示例Automagical 。

结论

Developer UX对于促进和营销您的工作非常重要，这反过来会导致非常实际的后果，因为获得开源贡献的关注绝对是获得声名狼藉并获得大量软件工程师职位的最佳方法之一。

我希望我所介绍的某些技术可以帮助您推广开源项目。 如果您发现本文很有用，并最终创建了精美的屏幕截图或动画演示，请添加评论链接到您的项目，并告诉我！

和往常一样，当然不要忘了以漂亮的编码演示形式传播❤️…！

你走之前…

如果您喜欢这篇文章，请单击下面的and，并与其他人分享，以便他们也可以欣赏。

翻译自: https://hackernoon.com/presenting-your-code-beautifully-fdbab9e6fb68

漂亮的代码