I’m the type of person who looks for any excuse to delay my writing. Sometimes I like to blame the text editor I’m using for my failure to write, so I have wasted an ungodly amount of time searching for an editor that doesn’t exist to magically write for me. While my writing projects lay aside collecting dust, I would say my procrastination has gifted me the knowledge of my text-editor preferences.

When I embarked this project – to create a single-page, serverless web app for note taking – I knew exactly what features I wanted tinyNote to have. While some people are attracted to minimalism and simplicity, I wanted my editor to be both practical and something that I’d enjoy using. For me that meant that tinyNote needed to support rich text, be able to save, and have a dark mode.

text editor in dark mode
tinyNote: Dark Mode by default

tinyNote uses Quill, an “open source WYSIWYG editor”, to accomplish all of the formatting. The process of adding a rich text editor made this project more time consuming that was probably expected. However, I think it was worth it in the end. When I write my class notes or when I write stories, I often use rich-text to enhance them. Bold titles make studying easier and italics are a great way to write dream sequences.

Unless a text-editor wants to say something about impermanence or the philosophy of our fleeting existence, having a save function seems like a must-have. From that idea I then decided to add a download function, but it was more as a challenge rather than a preference.

Finally, but funnily enough the first function I implemented on tinyNote, Dark Mode. I love dark mode. I don’t know what about the dark screen and light text draws me to it, but I hate when a site doesn’t offer that option. For a while I had an extension that would invert a site’s colour because of how few of the sites I visited offered that option. I followed “A Step-by-Step Guide to Dark Mode in CSS” on developerdrive to be able to achieve my goal. While I could have left dark mode as default, I also know it’s not for everyone. I want my apps to be accessible to people, so it was a fun learning experience.

tinyNote is open source, so if there is any features you’d like to add or bugs you’d like to fix, the repository can be found here.

2 thoughts on “tinyNote

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s