Get some UI

Applications with poor UI don’t work.

Of course it’s not true that apps with poor UI are buggy, but today many people only value features of apps with some nifty UI. Stack should be a nice gadget one can use every day. With some shortcuts we can open windows real quick, interact with it and close it. So we actually need some minimalistic UI, very readable and not overloaded.

The thing is, there are so many CSS themes. It’s fun to just look around and see what others do and get some inspiration. That’s exactly what I did, but soon found out that maybe we’re really leaving our comfort zone of CSS. I mostly worked with Bootstrap and I’m very familiar with the components and the grid. So again I ended up leaving everything as it is and just search for a new theme.

I stopped at the Superhero theme. That orange highlight color with blue-gray background looks awesome and I really don’t want to optimize, but just make it look a little better. Maybe we’ll change it again tomorrow …

Another cool thing are fancy lists, where items fade in and out, but it’s not that easy. I’m quite sure that there are packages for that state transition logic, but let’s implement it on ourselves, maybe refactor later.

The idea is, that handleDeleteClick will not simply setState with new array of tasks, but give that item a class fade-out for the transition. Simultaneously we start a timer that will do the final state update. Timeout should be after all transitions.

li {
  transition: transform 300ms ease-out, opacity 300ms ease-out;
}
li.fade-out {
  transform: translate(100%, 0);
  opacity: 0;
}

The implementation has many details in the TaskList component and code readability is decreased. Letting a task fade in would be even harder, since it will not control the insertion itself.

For now let’s keep it. Just a Bootstrap theme replacement and some transition logic in our list. Find the source here.