Friday Review: Week 42

Friday Review: Week 42

Focus this week has been to ready my civics app for launch status. Here’s a quick recap of what the app is about:

  • Name: Hum
  • Type: Web application
  • Description: Policies made easy
  • Purpose: Appeal audience to reflect on their political well-being
  • Technologies: Backend served with Symfony and API Platform (PHP). Frontend presentation made with React and Sass.

Hum - Policies made easy
Lighthouse improvements
Since the beginning of the project, the focus has been to make it easy to navigate and understand the content of Hum. But during this week I've worked on improving the accessibility parts that are analysed through Lighthouse. With Lighthouse it is easy to see where most of the attention needs to be put. Once I run the Lighthouse plugin in the browser the web app is analysed on performance, accessibility, best practices and SEO.

I was a bit limited in performance improvements but it up to a score about 70 (out of a hundred). What I could do was mainly to convert fonts from tff to woff format, and remove one font that was only used in one place to less of an effect.

For accessibility improvements I saw to it that each input field had a label associated to it. As for color contrasts it was already at acceptable levels. What the tests however didn't account for was the font-sized, which was apparent when I opened the app in a mobile phone. While responsive the font-size became all too small. I had to account for this and increase the size. Alas, doing this meant some work to have elements that would have a relative position adjustment needed additional adjustment. This was not all either. I have what I like to think of as a cool effect where the language toggle bar will reposition itself when scrolling down a page or when on a smaller screen. This would leave an invisible overlap from header over the content. The side-effect would be that clickable elements that would come near the (sticky) header when scrolling down a page could not be clicked. I solved this by explicitly resizing the height of the header. This didn't change the visible portion of the header but remove the invisible overhang.

For best practices and SEO improvements I saw to it that I had the correct meta-tags in the index.html and correct icons and colors referenced in the manifest.json file. Best practices was handled mostly by working out of a create-react-app boilerplate.

I'm quite pleased with the result but would love to improve performance even more.

The Hum app is made up of two parts: the visitor-facing side and the API side. The way I've built it means that I need to do
two deployments. The API side was to be the difficult deployment

Deploying the API meant that I needed to deploy a Symfony application on a shared hosting. I did a tentative look at deploying on Heroku but since I have experience of deploying on a shared hosting site before I thought that would be pretty straight forward. I was mistaken! I followed same protocol that I've used before for deploying on shared hosting: install all vendors required for production, split the codebase so public files are the only ones accessible from remote/public connections while the app logic is placed in private space. This require that the index.php can reference the logical parts on their new path. This was previously done by setting the path for a bootstrap.php file in index.php and then updating the package.json file to treat a httpd.www-folder as the public folder.

For some reason these actions wasn't enough. For one, I did not have any bootstrap.php file!

What I ended up doing was to get Composer (the package manager for PHP) onto my private area on the shared hosting. Then I fetched my repository from GitHub and installed all dependencies directly instead of moving them over through SFTP. I moved the content for the public folder onto the public area. Once this was done I created a database and ran a PHP script for Doctrine ORM to produce and insert the correct database schema.

Deploying the React app however was as simple as updating the URL for the API and set the destination URL for the App itself. Then running 'yarn build' on the local machine produced everything needed. I used SFTP to move the needed files to the destination.

Post deployment
Now what? I've been working so much on this project that I now have time for something new. I've got my eyes set on learning React with hooks. So far I've been using classes and paired React with Redux for app-wide state management. I'm also looking to learn Easy Admin 3 with Symfony to faster set up an admin interface for interacting with backend.

It's Friday and what a way to go on towards the weekend. Have a nice one!