Code-it 笔记：创建你自己的笔记！📝

几周前，我制作了一个原型，以帮助我更好地理解我似乎总是忘记的 JavaScript 方法。

想法很简单。创建类似便利贴的摘要，方便随时参考。一面是解释，另一面是示例。我喜欢MDN和W3Schools，但在尝试解读一段代码的工作原理时，用自己的话来解释似乎总是更好。

dev.to 上最初的帖子反馈非常积极，令人欣慰。但由于我是用 Google Slides 创建的笔记，所以设计新主题很快就变得耗时费力。便利贴的本意是快速的，但这显然不是。

本杰明·福特 • 19年3月23日

简洁、精炼、有效。请把这些内容放到网上。🙏 它们值得拥有自己的网站。💯

在收到一些令人鼓舞的评论后，我觉得值得花些时间思考如何以更灵活的格式重新创建这些笔记。发布 Google Slides 幻灯片是最简单的方法，但同样的问题仍然存在。我也尝试过 Instagram（见下文），但包含文本的图片可访问性较差，无法进一步编辑（尽管在两侧滑动效果很好）。于是，我又回到了绘图板上。

解决方案归功于 dev.to markdown 编辑器对 Liquid 标签的使用。通过在 CodePen 中构建模板并将其嵌入到 dev.to，任何人都可以 fork 该编辑器、进行 remix 并将自己的创作分享回社区（或任何其他地方）。此外，#explainlikeimfive标签似乎非常适合我想要实现的目标。选择一个编码概念，将其简化为最简单的形式并给出示例。就是这样！👌

额外的好处是，在编写 Code-it 时，你可以修改一些代码。它包含 CSS 网格、剪切路径、变量、媒体查询、过渡、基础 JavaScript 等等。不喜欢？那就把它撕下来，继续修改，直到你喜欢为止。

因此，如果您有兴趣创建自己的 Code-it 笔记，请参阅以下说明：

如何创建自己的 Code-it 笔记

1. 把笔叉起来。
2. 为你的 Code-it 确定一个主题。记住，主题越小越好（例如，一个 JavaScript 方法、一个 CSS 属性等等）。
3. 研究主题并编辑你的笔。
4. 完成后，撰写一篇新的 dev.to 帖子，用 #explainlikeimfive 标记并嵌入您的新笔。
5. 自豪地提高自己的知识，同时创建社区资源让其他人受益！

该笔包含FontAwesome CDN的链接，因此请随意使用他们的免费图标库来​​展示您的创作。

如果您有任何反馈，或者想就如何改进模板代码提出建议，我很乐意听到。