Tints and Shades

I have been planning to write a desktop app using Electron for a while. This Tints and Shades Generator is a great starting point, which it doesn't have a lot of complicated featues.

Before I started this project, the only thing on my mind was: "I am bored of writing websites, why not try making desktop apps using JavaScript! It seems cool to do everything in JavaScript!". However, after reading the documentation I discovered that Electron actually wraps Chromium as the rendering engine. That means, I am still writing websites. But this doesn't stop me from choosing Electron since I am completely new to it.

While struggling with the setup of React with Electron, I came across Litelement which helps you to create fast and lightweight web components. This makes me even more excited. And since every Electron is shipped with Chromium, it solves browser compactability problems.

LitElement isn't a very mature library with big community, so it is a bit hard to find the "best practices" on the project structure and state management across different components. While open-wc has an article explaining how to manage events in custom components, I found it hard to debug the events, and it complicates the data flow logic. In the end, the application was written in an React like approach, which the application states maintained in the "app.ts" level, and functions uses to alter application state was passed down to the component level. (I didn't choose to integrate Redux since I was considering the best practice to use web components in a microfrontend environment.)

LitElement also comes with limitations like CSS are not minified and cannot apply autoprefixer or CSS polyfills. But I guess it's still acceptable as a browser who supports web components should support most of the CSS3 syntax.

It's a pity that one of the features I originally designed cannot be completed. I planned to add an eye dropper allowing user can pick colors on screen, but I was stuck on mouse tracking in Node.js so the feature has been put aside, and replaced by the "random color" feature. I hope one day when my skills are strong enough, I can come back and complete it!