New Tasks

June 15th, 2020
layout

Throw me some Work

I had 2 goals for the weekend involving my personal project. My first goal was to fix up the individual hero page. I felt like the styling was way off and it just didn't sit well with me. I had it set up to be 3 columns of information sitting next to each other. The first column had an image of the hero with their name below, the second was all of the information I wanted to include about the hero, and the last was a list of their powerstats represented as status bars. It just looked cluttered and I felt like the flow was all wrong. I decided to move the final column down to the next row and stretch it out to fill the whole row, making the status bars much bigger. Then, I added a container to everything, making it look more like a card. I gave it a nice linear gradient background, a cool box shadow, and some radius on the corners. I will probably end up tweaking it a bit more, but for now, I like the way it's looking. The second task was to get started on the filters drawer. The functionality hasn't even begun, yet, and that's going to be the biggest chunk of functionality for the entire application. Each filter is going to have it's own higher order function attached to it, and I'm probably going to have to figure out a way to abstract out as much of the functionality as I can. I'm pretty sure I can reuse the same function for quite a few of the filters, and that will be my task for tonight.

layout

Beyond that, I have one more thing I need to take some time on before I call it a day. There are some other things I could do with the application, but it'll be pretty good once I have the filters going. The last thing I will need to do is make it fully responsive. Because I'm using flexbox everywhere, this actually won't be that bad. However, I will still have to set up at least 2 different media queries for every component, of which there are about 15 to 20. It's not going to be a completely easy task, but I'm equipped with the skills to be able to do this. I wish I could use a system like we have at work in our React Native project, where you can just add a key to the styling object to represent each media query. It's a lot cleaner, in my opinion, and everything reads a lot better. If you just want to change the styling for the phone size one element, you just add the key "phoneStyle" and insert the appropriate styles. I thought a lot about using a different system for styling than just using CSS stylesheets, but in the end I decided I would just go with the old classic way of doing things. I like the concepts in CSS in JS, but from what I saw, you have to put all of the styles in backticks, and I just didn't like the looks of the syntax at all. Maybe in my next project, I'll try something else.

layout

I've been stuck in purgatory trying to get all my changes integrated in with the main branch at work in our React Native project for the past 3 days, and it has literally been purgatory. I've dealt with all kinds of issues with ScrollView that, for whatever reason, weren't popping up in my own version. I still haven't found a solution to all of them, but I was given something else to work on today that was a lot of fun. I built out a leads search page quite a while ago, but it was never going to be the final version. In fact, I've actually built this page out 3 different times and then iterated over it to make it a little better every time. My cohort came up with a new design for it today, and I really like it. So far, I only have a phone version of the design, but I was able to get pretty much everything built out today. The majority of what I had to build was just UI, with a few functional changes. In fact, I created a new reducer to manage the handling of 2 screens within the main screen. When the representative comes to this page, they are presented with a hub screen, where they can pick from some quick filters, like leads added within the last week, or leads with emails. If they click on one of these filters or start typing in the search bar, they are taken over to the leads list with the search input presented at the top of the page. It looks a lot better, and it was fun to be able to work on something else for a change.

Until tomorrow!

Created by Sam Thoyre, © 2019