Previously in Experiments, part 2,…
I set up dummy data on the backend, then created the initial set of components on the front end that consume that data.
In tonight’s installment…
It’s all about the UI. I’m going to add a few more links to the dummy set, then set up my card-based UI.
Firstly, I’m going to add 3 more links to my dataset so that I can play with the layout.
I’m extracting the static set into an atom, and then de-referencing it to grab its value inside the JSON render call. I can easily add more to this set if I need to play with bigger sets while I lay things out.
Now, I’m ready to switch the table UI to a card one.
To do that, I’m going to need to add a component. I’d like to have a group of 4 cards per row, so I need partition my set into groups of 4 and I need a
LinkGroup component to manage each partition.
Let me explain the changes. The
LinkList component is now rendering a set of
LinkGroup components. Each
LinkGroup component is rendering its own subset of
I’ve also added a class for card columns that will be leveraged below. Now, I need to modify my
Link component to suit the new layout.
The changes include ripping out
<td> elements and replacing them with
<div>s and headers and paragraphs. I like this change, because I plan on adding another aspect of each link, namely a bit of text parsed out from it. I feel this layout suits that plan better.
Refreshing the page, I see the new layout and with that, I’m done. Next up is database work.