I’ve been down the UI Rabbit Hole! In one way it feels kind of good, because I have been doing some progress. On the other side, I’ve failed at documenting and writting about the process.

Planning and habits

Even that I am doing progress, and advancing stuff, there are a lot of things in they way I work that need some improvement.

Everything is happening in a very unorganized way: no planning, just working on what I think is the next most important thing. I am afraid that with this approach I might miss the big picture, and sometimes miss what is really the next important thing.

Another bad effect of not planning is that I am not sharing my time between things that I enjoy doing (mostly the technical part), and things that are not so fun for me (like product discovery, checking how to reach to people to get feedback and so one).

I also take notes for the blog posts, but I do not find the time to convert those into a readable state. I do not expect this blog to be a very polished publication, but I don’t want either to be a collection of notes and links that make no sense at all.

I am in the middle of reading Atomic Habits by James Clear, and even I might not religiously follow everything that is in the book I think that I can apply a lot of ideas and get a better usage of my time.

Probably, once I finish the book I wil start experimenting with tools and processes to test if those make an impact.

Technical work on Frontend

I do not have an idea of how I want to the app to look, so in a way, I thought that scaffolding the UI can give me an idea of what and how it should would work.

The “product” I want to test is sendrules.com, that is designed from a backend developer point of view, based on the problems and use cases that I’ve experienced in previous companies with notifications.

Textashop’s “send rules” is the thing I want to build to use sendrules, but i cannot work on the backend part, until I know how the features will work in the fronted.

Instead of doing the full App and API design, i want to work from the UI, then I will figure out the kind of data that I need from my backend, will define the APIs, and then implement the backend that will make use of sendrules.

For that I need a fake api that is easy to manipulate and change when I find some UI interaction that feels wrong, or not easy.

Creating a fake API

So I’ve made the easy decission of just use .json files, that can be easily imported to react, and then “mock” the calls with an async function, that will just return the api data based on an api convention.

Also, in order to test how the UI would work in case of an slow connection I added the option to tweak the time it takes to return the response.

I still dont know how to remove this fake api from the production build.

I’ve been told that the propper way to handle the app state would be to use something like: SimpleR State, that can take care of caching, and sharing state between different components. In that same line, I’ve been recommended to use the Immer Produce library But I do not want to improve parts on the technical side, until I have a clearer idea of how the app should work.

Pagination

Another thing that I want to standarize for is how to paginate lists and results.

I’ve taken a look at shopify API pagination and I am happy to find that they handle the pages with cursors instead of actual “page idx” / “page size”

"pageInfo": {
        "hasPreviousPage": false,
        "hasNextPage": true,
        "startCursor": "eyJsYXN0X2lkIjoxNDIzOTgwNTI3NjM4LCJsYXN0X3ZhbHVlIjoiMjAyMC0wMS0yMCAxNDo0ODoxMS4wMDAwMDAifQ==",
        "endCursor": "eyJsYXN0X2lkIjoyMzIxMjM5MTQ2NTE4LCJsYXN0X3ZhbHVlIjoiMjAyMC0xMi0xNSAyMzowMDo0NS4wMDAwMDAifQ=="
      }

Insteresting part is that startCursor and endCursor are base64 encoded. If we decode them we get somthing like:

{"last_id":1423980527638,"last_value":"2020-01-20 14:48:11.000000"}

However, I would not rely on that information, just in case they decide to change the formats of their cursors.

For the REST API pagination, shopify uses a different format of “next” and “prev”, and provides the information in a header :

link: "<https://{shop}.myshopify.com/admin/api/{api_version}/customers.json?page_info={page_info}&limit={limit}>; rel={next}, <https://{shop}.myshopify.com/admin/api/{api_version}/customers.json?page_info={page_info}&limit={limit}>; rel={previous}"

In any case those are cursors too, so, all the components that are in polaris are ready to be used with pages that use cursors, and not page numbers.

This is what I have…

Some unknowns

Content

As you can see, at the end of the video above, there is a page where I have to display the content of the notification.

A notification can have different fields depending on the channel used to send it: for example, an SMS will have only a line, while the email, will have a subject, a text content, and HTML content.

So, here comes the question: should I provide a set of pre-made templates where the merchant can only tweak the colors and images to match their brand, or should let them provide the raw content for the notifications ?

Perhaps I will need to have them both: pre-made and “advanced” ones, where the merchant can directly edit the content or import it from files.

Providers

Another question that bothers me is: should a merchant configure their own providers ? (like, setting their own SendGrid API key), or should textashop try to send emails and SMS on behalf of the merchant.

The first option is the safest one for textashop, as I do not need to care for the reputation if the app is used to sendd spam. However, for the merchant will have less value if has to go through the process of setting other accounts, and setting up the configuration.

Cleaning up the code

I am just copy / pasting components and tweaking them for my usage, and the formatting ends up being a mess. So I found that prettier can easily format the .jsx code.

Discovering extra tools and libraries

N8N

Lately I’ve been hearing about more and more people using n8n to automate different kind of things. I do not have yet a use case for it, but that is perhaps because I haven’t had the chance to work with it. So I decided to give it a try, follow the n8n documentation and see if I can get ideas.

Going with the dockerized version

In order to just play with it in a local environment I’ve created a docker-compose file, to play with it. Perhaps at some point i can move it to my development server and access it using ssh port forwarding to avoid exposing it to internet. I can setup n8n to use my already running Postgresql database

docker pull docker.n8n.io/n8nio/n8n:latest

I didn’t feel like the opensource / free version was very polished. I managed to tunnel the ssh connection, with a valid https certificate and finally signed up

However, the most basic operations that I’ve tried, to connect to google sheets, just to test them, where failing. It didn’t detect when a workflow finished executing, even I managed to add some test rows, I didn’t feel that it was worth the time investment that I’ve put into it.

So for now, I will not continue trying to work with it, until I find a real use case where it can really help me automate required work.

mdxjs.com

This is something that came at work, that looks super interesting in order to fix the crappy documentation that I have for sendrules.

A markdown editor

This is another library that I have been pointed at to create content from our own UI: TipTap

Leads service

I am not sure how and at what point I found this Store Leads SaaS that provides information about eCommerces. After watching the recorded demo video and it looks that the basic plan at $75 is a fair price to get a good list of leads.

Might be interesting to sign up and to try to promote whatever app end up with.

References

  • MDX js : a static generator for react components

  • Store Leads: a SaaS for market research of eCommerce stores.