做事用人 用人做事

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大狩猎”之一。

Writty in ProductHuntProductHunt中的内容

那不是计划 (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的一些有用资源，我相信将来我会继续使用：