GFT UI Beginnings

Today I got started on the UI—yay!

Testing With Cypress Continued

Well actually, first I tried to wrap up the testing stuff I started the other day. We did the basic installation of Cypress, but there’s some config to do to authenticate a user specifically for testing when using Auth0.

I spent a few hours trying to get it to work. I’m 85% convinced it’s not actually supported in the way my app has been configured with Express & Passport. Maybe I’m wrong, but I”ll leave it for another day to figure out. For now, I have the tool installed and ready to take on integration tests for a logged out user only.

UI Beginnings

Once I started working on the UI, I got overwhelmed with the number of directions to go in. I was leaning towards trying out Foundation, but did I really want to dive into something new right now? Should I just use Bootstrap? And can I make the site different enough that it doesn’t look generic if so? …Actually what am I even going for with this temp/placeholder UI? AGGGHHH!

So I just decided to start with the same theme I used for the landing page that’s been up for a few months. I know I like it, I know it works as far as responsiveness, and I have some experience using it even. The only thing was that I used Hugo to make the landing page, so had to strip all of the Hugo syntax and re-organize things a bit. I also copied most of the landing page content, so now I have a nice intro page when a user isn’t logged in. Progress!

`express-ejs-layouts` & Footer Forcing

I also implemented express-ejs-layouts. This gives the EJS templating engine the extra feature of using a single layout.ejs file to determine what to put on each page. As a result I no longer have to write header and footer includes on each .ejs file. This article filled in some of the blanks about implementation that were missing from the tool’s repo.

This also allowed me to reorganize the layout in order to force the footer to the bottom of the page: I could add a content wrapper in a way that’s more easy to follow in one file, vs. split across a few files the way I would have had to do it before. This article explains quite well how doing so will force the footer to the bottom.

Other Stuff

Been thinking quite a bit about changing the name. That was another distraction today…how can I create a UI when I don’t even know what it’s called!? Aggh, decided to keep the working name in order to keep things moving.

Up Next

Now that I have the design scaffolded, I need to implement it on the actual site pages.