The Training Log - v0.1

Scaffolding out the initial create pages and layouts

Subscribe to my newsletter and never miss my upcoming articles

It's been a reasonably productive week for me in terms of building The Training Log. Last week, I did some initial file setup, sorted out the Firebase hosting and gathered together some design assets (fonts, colours, logos). This week, I have spent most of my time scaffolding out the initial screens.

After some good work on fonts and logo generation last week, I made the shrewd decision to tear a lot of that work up this week. I changed the font; opting for a new Fonseca font that was available on Envato, and in turn, this means I'll have to tweak the logos and favicon assets, which is still to be done. That said, the new logo font I am happy with. It's much cleaner and fits better with the background image and the darker colour scheme.

Screenshot 2021-02-25 at 10.01.54.png

The firebase deployment caused me some headaches. I've got my react app and functions folder within the same Firebase project. I wanted to update the Firebase configuration, so that my app would run from thetraininglog.com while my API endpoints operated off of http://thetraininglog.com/api rather than the default firebase endpoints. It took a few attempts and a bit of Googling, but I got there. In case people are interested, the below code should do the trick:

// firebase.json
// assumes that your functions index files 
// is exporting a function call app
"hosting": {
    "rewrites": [
      {
        "source": "/api{,/**}",
        "function": "app"
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "cleanUrls": true
  }

On the styling framework front, I was torn. I wanted something that would allow me to scaffold something without too much hassle. I am not a designer or a CSS-guru by any stretch. Also, I am conscious with the application I will likely need components such as calendars, data tables and a variety of inputs. As a result, I opted for Material UI. I wanted to resist it because I think it is like the Bootstrap of a decade ago. Nowadays, it feels like 90% of the web is built using some material design framework, which makes sites that use it a bit generic and naff. However, I've used it before, so I know my way around itt, and it has a feature-rich ecosystem with some nice date/time inputs and some more complex components like calendars and data tables out of the box. I looked at a few newer, slicker frameworks that were more aesthetically pleasing, but just didn't have the functionality I needed ready-made. The thing I want to avoid most is getting bogged down in styling and building custom UI components from scratch.

As a result of my Material UI research, I stumbled upon a Material UI example called Paperbase, which I thought looked really good. It's a basic mock-up of the Google Firebase UI. The navigation is perfect. It has primary navigation down the left-hand side with secondary navigation along the top, which is perfectly aligned with what I need. Many screens will have too much content to display in one view - so this secondary navigation helps to break it into chunks and navigate between the sections. Also, this will help with mobile UI as well. I've utilised this skeleton with some additional customisations and I am really happy with the layout. In an effort to make it feel more custom and less generic, I am using emojis in the left-hand navigation rather than the ubiquitous Material UI iconography. Also, I am using the Fonseca font for headings instead of Material's default Roboto font. This definitely helps to give the UI its own look and feel.

I've been going around in circles with the create activity screens. In essence, this is just a form. However, I'll have a multitude of inputs in here to deal with text, numbers, dates, time, inputs with prefixes (km/miles/kg/etc) and inputs with custom formatting and validation (hh:mm:ss). Material UI has most of these inputs out of the box, but customising them is a bit of a headache. It's been a real pain all week trying to configure these inputs correctly. You customise one aspect and the overall styling completely falls apart 🤬 I feel I have shot myself in the foot a little bit by going with a style that doesn't lend itself particularly well to the Material UI defaults. I've tried to create a feel of a real running journal. The font - Mysans - has a handwriting style to it without being in the calligraphy mould. The layout, with no margins and minimal styling, is trying to mimic a sort of tabular, almost MS Excel, data entry feel given that a lot of diaries recording this information is done using spreadsheets. That said, at this point, I can't tell whether it just looks naff and has been a waste of time 😞

I also had to go back to school regarding CSS layouts and the Material UI grid. It's been a while since I have had to comprehend grid layouts and flex rules. It's the type of thing you learn once when setting up an application and then never have to revisit again. Having not created anything in the last couple of years, I am badly in need of practice. This has slowed the scaffolding down. On the plus side, the ability to use the Material UI <Hidden /> component to carve up the UI based on the device size is a massive time saver and exactly the reason I was looking to utilise a framework for the component styling. As the week progressed, I became more familiar with how Material UI works and how you can go about manipulating it. I've added select fields and adornments to my inputs and styled these to have a consistent look and feel to the rest of the form. The painful learning curve earlier in the week was worth and I am happy with the design and feel it is coming together.

The new layout was enhanced in part by a talk I watch this week called: The Science Behind Great UI by Mark Miller. It was a short, interesting talk about design and an overview of the key principle behind improving and creating good user interfaces. In it, there was a discussion about borders being a useful device to separate information. When used they should generally be used lightly with a thin, light colouring in order to draw attention away from the key information. By default, the talk mentioned border thickness is the same thickness as text, which visually makes our brain consider the borders and text as equals. This is usually not the case. Borders or cells within tables are simply containers around the important information. They are dividers - they serve a purpose, but not the same purpose as the information we're displaying. I've tried to implement this in my project.

Screenshot 2021-02-25 at 10.01.09.png

Another area the video touched on was presenting relevant information together. I thought about this point and re-jigged my layout. Before I was grouping the inputs based on their size and type, but now I am grouping them more thematically. For example, the weather conditions text input and the temperature number selector are together and the injury notes are alongside shoes/gear field. It makes sense - and is kind of obvious when you think about it, but in the midst of building, you don't always take the time to reflect on these UI decisions.

On Thursday and Friday, I managed to scaffold the beginning of the preparation, session and recovery screens. These screens will have the same layout and will provide a place to provide some quantitive data about rest, nutrition and hydration in pre and post-activity. Quantitive data will allow insights and analytics to be richer and more meaningful. Qualitative data is useful for notes and to retrospectively look at activities, but in terms of drawing conclusions across a range of activities, it is a more messy data source. They are still a work in progress, but they're coming along nicely.

Screenshot 2021-02-26 at 09.12.27.png

My new policy of committing at least once a day to improve my productivity and keep the project moving has worked well. It has forced me to work in small, isolated pieces. I've managed to get at least one commit out every day this week. However, I was brought down to earth when I check my Github profile and saw no commits for the last 10 days! I checked that the graph was showing private repository contributions - it was 😒 The issue was that my email was not configured. I use Github for work, so have different profiles for personal projects and for work-related projects. As I had not configured my personal email for this project (and because my laptop is new and has never been associated with my personal Github account), none of these commits has been recorded 🤦‍♂️ The code is there so no work lost, but it seems Github has no way to link it back to my profile. Anyway, the problem has now been fixed! Hopefully, now the contribution graph will reflect my new productivity!

No Comments Yet