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擴展程序或支持我的工作，可以在此處進行 。