As mentioned in the previous post this project is I-need-it-I-build-it driven development. Recently when publishing the News feed home page I made a mistake of putting a list of news on top of the Hero component. Which looks bad.

But there is no way of moving components up and down! Also adding components in between makes entire UI cluttered. So, prioritized!

Screenshot of new composer UI with add-hook mode buttons and move up and down buttons.

The new look

So first, let's de-clutter.

The problem was mainly with the whole "how to make people add stuff in-between with simplest UI possible".

It was not easy to figure out, but then I thought, how about modes?

This thing is still not finished, but the idea is that clicking the "+" button on top or bottom of the page, the UI will go into "adding mode". It's not yet done, but later the components list on the sidebar would turn into "adding mode" with some sort of animation, also the clicked button would animate in a same way, indicating that clicking on that sidebar would make the new component appear in a position indicated by the animated plus button.

Will it really work? Not sure now, but worth trying.

The next part was to make the moving thing working. Also not that trivial since that composer thing is the most complex code in entire codebase, but still, managed to make it work. This one's quite easy to design though as it follow established patterns.

Moving stuff

Here's the final "nirvana moment". I can finally move that Hero up on a page so it renders before the article lists.

Also later on a screencast you'll see the "add hook" mode in action. Although, again, please note it's work in progress, animations and mode indicator are not yet done.

This is how this project will continue. I will use it by myself, throw things that I need now (next one in line: add a "just media" component since this split component above doesn't work well with videos that are longer), and once everything works fine functionally, there will be some polishing UI time, maybe some redesigns and then I go private beta.

A small reminder, if you want to be invited to that private beta, you can join the waitlist.

To join the waitlist you need a special code that you will find on my Mastodon. Have to do it that way to fight bad bots.

Cheers!