Custom CLI tables just got easier (ft. Lip Gloss)

I messed up in a previous tutorial video in the task Warrior clone video I really wanted to Output a static output of a table that had all of the tasks that we wanted to see the thing is is that I used the bubbles table and why this isn't idiomatic with our ecosystem is because the bubbles components are supposed to be interactive if I had wanted to be able to scroll through this table and interact with the elements in some way then the bubbles table would have made a lot of sense but in this case I just wanted a static rendering of a table populated with tasks and lip gloss would have been the ideal library for this because it's built for layouts and styling and yet there was no table element for lip gloss when I wrote the task Warrior clone but now there is so I'm going to show you how I switched from my bubbles implemented ation of the table to using lip gloss to statically render all of these tasks in a table layout one of the biggest advantages of using the lip gloss library for this is It's significantly easier to work with anyone who's worked with CSS in the past will find a certain level of familiarity with lip gloss it's also way more customizable and I'll get into that when I show you some actual examples on how you can use it now the first thing I do when working with this lip gloss table is I need to populate the table to do that I iterate over all of the tasks that we have and add those to rows I then went and created a new table and use the spread operator to carry over the values in the headers and rows we wanted to be able to provide any number of rows to your table so that's why you'll see the spread operator in the function definition as well this allows us to Define as many rows as we want either in place or as an existing 2D array of string values that you're unpacking with a spread operator now the team did such a good job of keeping the API really simple really concise and I think that makes it a lot more readable and intuitive the one thing that stuck out to me when I was trying out the lip gloss table is the style Funk it was not the most intuitive sounding function in the world so let me break down how that function works this function allows you to specify any conditional formatting given the cell contents the row number the column number anything of that nature you can see in the Pokémon example how this is used and Moss did a great job of providing a lot of different ways that you can use it now I'm someone who really likes to hear about the thought process Behind these different projects when developers are building I love the psychology aspect of it so one thing that I want to kind of sprinkle in there is one of our design decisions so some of you might be looking at the code and say why don't you just use an any data type that's a generic that's something that you can plug in any other value for but the catch is if you use a spread operator on an array of strings it won't satisfy the any data type so on the user side if they wanted to have an array of strings and use that to populate the rows that are going to get allocated they would have to iterate over the list of strings and do a type conversion for every value in that list it would essentially be pigeon ho holding us into working with inline Declarations of the values instead of being able to work with existing 2D arrays that would represent the values in the table to solve for this we ended up using the data interface you can check out the source code it's all open source I thought that would be a fun one to highlight because this was a problem that I encountered with the first iteration of this design and I love talking through these design decisions because there's always these unexpected things that come up and it's fun hearing how different developers will solve it and it was great hearing the team go back and forth on what the best implementation would be so I wanted to share that with the community a little bit as well let us know what you think about this new lip gloss extension and what you think we're going to be doing with it in the future thanks for watching we're excited to see all the creative ways that you end up using this and don't forget to pull the latest in Maine if you are using that task branch and then you can see some of the changes that I made there bye for now

Channel: Charm CLI

Views: 9,253

Keywords:

Id: ss-DOiHrEjM

Length: 4min 25sec (265 seconds)

Published: Tue Jan 16 2024