On the 5th of June, 2020, after almost two weeks of (re)learning javascript, fixing bugs, creating new ones and of course, lots of testing, I launched Writty on ProductHunt. An open-source text editor to help anyone who is into writing to focus on what is most important: Writing!

在2020年6月5日，经过将近两个星期的(重新)学习javascript，修复bug，创建新bug以及当然进行了大量测试之后，我在ProductHunt上启动了Writty 。 开源文本编辑器，可帮助任何从事写作的人专注于最重要的内容：写作！

In less than 24 hours it became the #1 product on the platform for the whole day and it was featured in the daily digest newsletter as one of the Top 5 Hunts.

在不到24小时的时间内，它成为平台上全天候排名第一的产品，并且在每日摘要新闻通讯中被列为“最佳5大狩猎”之一。

那不是计划 (That wasn’t the plan)

To be honest, I wasn’t even planning on making it open-source, less so, releasing it and presenting it to the world. My initial idea was to build my custom-made text editor with just what I needed to focus on improving my writing.

老实说，我什至没有计划将其开源，更不用说将其发布并发布给全世界了。 我最初的想法是建立我自己定制的文本编辑器，而这正是我专注于改善写作的需要。

I have been writing and sharing articles since 2015. It started as a way to force me to work on my English — since it is not my native language — and eventually, it became my preferred way to organise and give structure to my ideas about a variety of topics. From product processes and management good practices to design and systems thinking. As per 2020, I am on a mission to continue improving my writing and take it to the next level. This is where Writty came into the scene.

自2015年以来，我一直在写作和分享文章。这最初是一种迫使我用英语工作的方法-因为它不是我的母语-最终，它成为了我组织和提出有关构想的首选方法各种各样的话题。 从产品流程和管理良好实践到设计和系统思考。 根据2020年的规定，我的任务是继续改善自己的写作并将其提高到一个新的水平。 这是Writty出现的地方。

为什么写信？ (Why Writty?)

I have spent too much time searching the internet for a writing tool that will provide me with the right amount of features I need to write. However, every app I tried always had a ‘but’, either the privacy was a concern or it was missing some key functions I needed. If I have to explain in a single sentence what exactly I was looking for it would be:

我花了太多时间在互联网上寻找一种写作工具，该工具可以为我提供所需的适当数量的功能。 但是，我尝试过的每个应用程序始终都有一个“ but”，要么是出于隐私考虑，要么就是缺少了我需要的一些关键功能。 如果我必须用一句话来解释我到底在寻找什么：

“A simple writing tool to keep me focused and save me time”

“一个简单的写作工具，可让我保持专注并节省时间”

Here is a list of the main requirements I was looking for (no less, no more):

这是我正在寻找的主要需求的列表(不少于，不再多)：

1. A very simple type hierarchy.
   一个非常简单的类型层次结构。
2. Bold, Italic, Underline and Quote styles.
   粗体，斜体，下划线和引号样式。
3. Bullet and numbered lists options.
   项目符号和编号列表选项。
4. Insert links and images.
   插入链接和图像。
5. Save in PDF or more formats.
   以PDF或更多格式保存。
6. Autosave so I can write with ease of mind.
   自动保存，因此我可以轻松编写。
7. Dark mode (I suffer from regular mild migraines so this was a must).
   暗模式(我经常患有轻微的偏头痛，所以这是必须的)。

After a few days of researching, I started to feel a bit frustrated. Having a tool that not only simplifies the tasks but that also makes me enjoy writing more was a very basic starting point for me, and I couldn’t find it. At that point, I had only two options: №1. Getting used (and probably pay) to get the closest thing to what I wanted or №2. and as my wife simply presented to me: “Why don’t you make it yourself?” -Thanks, honey!

经过几天的研究，我开始感到有些沮丧。 拥有一个不仅可以简化任务的工具，而且还使我喜欢编写更多的工具，这对我来说是一个非常基本的起点，而我找不到它。 那时，我只有两个选择：№1。 习惯于(并且可能要付钱)获得最接近我想要的东西或№2的东西。 正如我妻子简单地向我介绍的那样：“你为什么不自己做？” 谢谢你，亲爱的！

做事 (Making Writty)

Making Writty was as enjoyable as painful. I knew I had to work heavily on my -very- limited and rusty Javascript but I had a clear idea of what the interface and experience would be.

写作使人痛苦无比 。 我知道我必须在非常有限且生锈的Javascript上进行大量工作，但是我对接口和体验将有一个清晰的认识。

As you probably know if you are in the software industry, the building process never starts with building, but with researching and gathering information. First, I started searching for references I could use to help me reduce the burden of learning Javascript and building everything from scratch at the same time. For this, I checked all the open-source text editors, and deep dived in Codepen for all the pieces I needed to build my little Frankenstein.

您可能知道，如果您属于软件行业，那么构建过程就不会从构建开始，而是从研究和收集信息开始。 首先，我开始搜索可以用来帮助我减轻学习Javascript并同时从头开始构建所有内容的负担的参考。 为此，我检查了所有开源文本编辑器，并在Codepen中深入研究了构建我的小科学怪人所需的所有内容。

Little I knew that I will end up spending over a week working on it and with five different versions (or attempts) of Writty before launching it.

我一点也不知道，我最终将花费一周多的时间来开发它，并在发布之前使用5种不同版本(或尝试)的Writty。

For the first version, my reference was a text editor that was using an iframe. After 3 days it was pretty much ready, but when I started working on the dark mode, the CSS colour variables didn’t apply to the text inside the iframe since the javascript was creating an inner HTML element with its own CSS embedded. I had to start over again.

对于第一个版本，我的参考是使用iframe的文本编辑器。 3天后，它已经准备好了很多，但是当我开始在黑暗模式下工作时，CSS颜色变量不适用于iframe内的文本，因为javascript正在创建嵌入了自己CSS的内部HTML元素。 我不得不重新开始。

Lesson learned: A ‘Textarea’ or ‘contenteditable’ div are better ways to go when it comes to building a text editor.

经验教训：在构建文本编辑器时，最好使用“ Textarea”或“ contenteditable” div。

The other three versions were the result of a mix of mistakes and solutions that took over a week and some of my hair to get into a decent shape.

其他三个版本是错误和解决方案混合使用的结果，这些错误和解决方案花费了一周多的时间，而且我的一些头发也恢复了体面的形状。

To be honest, I was about to quit a couple of times, even some friends who initially helped me with some of Writty’s bugs advised me to just go and pay for one of the text editors out there. But if struggling with bugs and my limited javascript knowledge was hard, quitting after spending more than a week of my time focused on getting Writty up and running was even harder, so I continued.

老实说，我要辞职两次，甚至一些最初帮助我解决一些Writty错误的朋友也建议我只去买一个文本编辑器。 但是，如果很难与bug搏斗并且我对JavaScript的了解有限，那么在花了一个多星期的时间专注于启动和运行Writty之后退出就更难了，所以我继续。

Learning will always be a part of the path when it comes to building something, and it won’t be easy, but at the end of the day, that’s what learning is about.

学习永远是构建事物的必经之路，这并非易事，但归根结底，这就是学习的目的。

If you are building your own product or starting in the world of front-end development, here are some useful sources I used to build Writty and I am sure I will continue using in the future:

如果您要构建自己的产品或从前端开发的世界开始，那么这里是我用来构建Writty的一些有用资源，我相信将来我会继续使用：

• W3Schools

  W3学校

  For the basics, from the main functionalities to programming best practices and examples.

  对于基础知识，从主要功能到编程最佳实践和示例。

• StackOverflow

  堆栈溢出

  A life saviour for fixing bugs, and when you are struggling with making things work. The relevance of the dev community as its best.

  修复错误以及在使工作正常进行中挣扎的救生员。 开发人员社区的重要性。

• Codepen

  码笔

  A great code and creativity repository to find those pieces you need to build your own thing.

  一个不错的代码和创造力存储库，可以找到您需要构建自己的东西的那些部分。

• CSSScript

  CSS脚本

  An excellent resources toolbox. (Writty is already featured there 😊)

  出色的资源工具箱。 (那里已经有文字rit)

• CSS-TricksBest articles and tutorials about everything CSS and more.

  CSS技巧 有关所有CSS及更多内容的最佳文章和教程。

• JQueryScript

  jQuery脚本

  A cool gallery of JQuery resources (For this project, eventually, JQuery was replaced by Vanilla JS, but it is a good starting point).

  很棒的JQuery资源库(对于这个项目，最终，JQuery被Vanilla JS取代了，但这是一个很好的起点)。

And with time and discipline, Writty was born! Everything I needed to write custom-made. I couldn’t be happier and I thought my work here was done. Then I started noticing more people would be interested in this tool since they were facing the same of similar problems. Finding a simple enough app to write or to take notes wasn’t that easy as I learned myself before. That’s when I decided to go open-source and share Writty with the world.

随着时间和纪律，Writty诞生了！ 我需要编写定制的所有内容。 我再也不能开心了，我以为我的工作已经完成了。 然后我开始注意到更多的人会对这个工具感兴趣，因为他们面临着同样的问题。 像我以前学到的那样，找到一个足够简单的应用来编写或做笔记并不容易。 那是我决定开源并与世界分享Writty的时候。

这是一个很好的决定 (It was a good decision)

I have never launched a product of my own, not without working with a full team. Neither I have worked on an open-source app before Writty so it was an unexplored ground for me.

我从来没有推出过自己的产品，除非没有与整个团队合作。 在Writty之前，我都没有从事过开源应用程序的开发，因此这对我来说是一个未开发的领域。

To make Writty available I decided to go in two directions. First, uploading it to Github for other developers to contribute. The second one was to create a Chrome extension that will use an online copy of Writty for end-users. This way, I can update Writty without having to submit a new package to Google every time.How I learned to make a Chrome extension is a different story and probably another article.

为了让Writty可用，我决定朝两个方向发展。 首先，将其上传到Github，以供其他开发人员做出贡献。 第二个是创建一个Chrome扩展程序，该扩展程序将为最终用户使用Writty的在线副本。 这样一来，我无需每次都向Google提交新软件包就可以更新Writty。我如何学习制作Chrome扩展程序是另一回事，而且可能是另一篇文章。

The response from both the end-users and the open-source community has been amazing. To put things into perspective, here are all the features I launched initially with the first version of Writty (✏️) and all the contributions made by the community as per today (💡).

最终用户和开源社区的React都是惊人的。 为了使事情更直观，这里是我最初使用Writty(✏️)的第一个版本启动的所有功能，以及今天社区(as)所做的所有贡献。

1. The most basic type hierarchy. ✏️
   最基本的类型层次结构。 ✏️
2. Bold, Italic, Underline and Quote styles. ✏️
   粗体，斜体，下划线和引号样式。 ✏️
3. Bullet and numbered lists options. ✏️
   项目符号和编号列表选项。 ✏️
4. Insert links. ✏️
   插入链接。 ✏️
5. Insert images. ✏️
   插入图像。 ✏️
6. Save in PDF. ✏️
   保存为PDF。 ✏️
7. Autosave content. ✏️
   自动保存内容。 ✏️
8. Dark mode Theme ✏️
   黑暗模式主题✏️
9. Character Counter. ✏️
   字符计数器。 ✏️
10. Changed JS from JQuery to Vanilla Javascript.💡
    将JS从JQuery更改为Vanilla Javascript。
11. RTL support and Autosave. 💡
    RTL支持和自动保存。 💡
12. Autosave theme preference. 💡
    自动保存主题首选项。 💡
13. Export in HTML and TXT formats. 💡
    以HTML和TXT格式导出。 💡
14. Export in Markdown format. 💡
    以Markdown格式导出。 💡
15. General bug fixing and code improvements. 💡
    常规错误修复和代码改进。 💡

Writty was a superb text editor when I first launched, but it was the open-source community who took it to the next level, making it-if you allow me- one of the most interesting editors out there today. I can’t be more grateful to everyone who has been part of this, either as a direct contributor or by sharing feedback and ideas on how to make it better.

当我第一次发布时，Writty是一个出色的文本编辑器，但是开源社区将它带入了一个新的高度，如果允许的话，它使它成为当今最有趣的编辑器之一。 我对参与其中的每个人都表示由衷的感谢，无论是作为直接贡献者，还是分享有关如何使之变得更好的反馈和想法。

下一步 (Next steps)

Writty is the first product I started and built on my own, but it won’t be the last one. When I started I wasn’t fully aware of the potential that simple products can have in an over-saturated and increasingly complex market. I have many ideas and things to add to Writty in the pipeline, from third-party integrations, making it an offline app so you can take it with you everywhere to adding new exciting features. But most importantly, this side project has opened the door for me to build and develop more products that could bring value to the world. I already have lots of ideas I am looking forward to making a reality, so stay tuned, because there is more to come.

Writty是我启动并自行创建的第一个产品，但不会是最后一个。 当我刚开始的时候，我还没有完全意识到简单产品在过度饱和和日益复杂的市场中的潜力。 我有很多想法和事情要从第三方集成中添加到Writty中，使其成为一个脱机应用程序，以便您随身携带它，以添加新的令人兴奋的功能。 但是最重​​要的是，这个附带项目为我打开了大门，让我可以开发和开发更多可以为世界带来价值的产品。 我已经有很多希望实现的想法，请继续关注，因为还有更多的想法。

Oh, did I mention this is my first article written with Writty? If you want to give it a try, install the Chrome/Firefox extension or support my work, you can do it here.

哦，我是否提到这是我与Writty撰写的第一篇文章？ 如果您想尝试一下，请安装Chrome / Firefox扩展程序或支持我的工作，可以在此处进行 。