Delivered
Here's what we delivered in Q2 of 2023.
GA4 migration
As anyone who uses Google Analytics will know (and maybe even a few who don’t), a change has been on the horizon. Google has been in the process of sunsetting its previous version of Analytics, known as Universal Analytics (UA) in favour of moving over to its latest version known as GA4. Google had drawn a virtual line-in-the-sand some time ago, acting as a deadline for when new data would stop being processed by UA. That deadline finally arrived this July, marking the end of support for UA.
We’ve been working on migrating the various properties under the University's account for the past couple of months as well as transitioning many of the user accounts over to make sure they have access to their new GA4 properties. Alongside this migration work, we also configured GA4-compatible versions of the tags in our Google Tag Manager account. Tags work alongside analytics and allow us to measure things that analytics doesn’t allow for out-of-the-box. This means that we will be able to continue tracking the kinds of metrics that we have been in UA. We completed both the GA4 and tag manager migration in time for Google's deadline.
However, we can't take all the credit for this one. While the Development team were heavily involved with the migration, Kai Evans - Digital Supporter and Platform Trainer on the Content Team - also put in a tremendous amount of work especially on managing the user accounts. We would also like to thank Takashi Yonenaga for co-ordinating the various teams involved with the overall process.
Upgrades
Keeping our software up to date makes our systems more secure, more robust and more efficient. It also allows us to tap into the new functionalities provided by more recent versions of the tools we use. It's especially important to start updating software before the current version becomes deprecated, as by then it will stop getting security fixes, making it vulnerable to malicious exploits.
Ruby 2.7 to Ruby 3.2
We've upgraded our apps from using Ruby 2.7 to using Ruby 3.2. Ruby is the programming language we use to develop Typecase, Typecase for Courses and the URL shortener (go.bath). Ruby 3 is up to 3 times faster than Ruby 2, which should cause pages in the Typecase and Typecase for Courses backends to load faster. Moreover, Ruby 2.7 has reached "end of life" by now and should not be used in any production environment.
Ruby 3 allows us to write cleaner and more modern code. Whilst this is mostly a good thing, it also means some code that was fine in Ruby 2 no longer works in Ruby 3. Before successfully upgrading an app to Ruby 3, the lines of code that no longer work have to be discovered and rewritten by us. Luckily, we maintain extensive suites of automated tests which can tell us which features would stop working after the upgrade and which code needs to be changed to get it to work again. If it wasn't for these test suites, we would have skim through our whole code base and manually test out all of our app's features to find out which code needs updating. This would have taken us much more effort than the effort spent maintaining our test suites. It would also be less fool proof. Moments like these let us reap the benefits of the extra work we do every day to write and maintain automated tests.
Despite our high-quality test suites, there are always a few things that fall through the radar. Usually this happens because a case is so unique there was no test created specifically for it. This is an inescapable fact of software development. We did get a few bug reports of certain pages failing to be published, and we were able to fix them quite quickly after the upgrades.
The upgrade process was relatively pain-free for most of our apps, with the URL shortener being the exception. URL shortener was using a Gem (in the Ruby world a Gem is a reusable bundle of pre-packaged code) called DataMapper, which was no longer being maintained and did not support Ruby 3 at all. Usage of this Gem was prevalent throughout the code of the URL shortener because it was used for all database interactions. We had to replace this Gem with a completely different one that could fulfil the same functionality. We opted to go with one called ActiveRecord, which we were already using in our other apps. We had to rewrite all the code that was using the old Gem to use the new Gem. In addition to this issue, the URL shortener did not yet have a test suite, making it harder to guarantee that everything would still be working after the changes, so we created a test suite for it from scratch.
Ubuntu 18 to 20
The development, test, staging and production instances of the apps we develop all run on virtual machines (VMs). These virtual machines use Ubuntu as their operating system. It's important to keep the Ubuntu version up to date as using an older version could open up the virtual machine to malicious attacks. Newer versions of Ubuntu require you to have up to date software on it, which is why we had to upgrade our Ruby before we could upgrade Ubuntu.
To make sure we could catch potential issues early, we started by upgrading the least risky VMs, waiting a while to see if any issues would come up, and then continue to upgrade the riskier VMs until all of them were upgraded. This is also how we rolled out the Ruby upgrades. We started with our personal development VMs, proceeded with the staging VM and finally did the training and production VMs. Some issues came up during our upgrade of the staging VM and by learning how to prevent those issues we were able to upgrade training and production without any issues.
We maintain a VM to host GitLab, a tool to store our code and collaborate on it. With upgrading Ubuntu on this VM we also upgraded the version of GitLab itself from 13 all the way up to 16. GitLab runs our test suites before any change is deployed, to verify that everything will still work. It runs them in their own containerized virtual machines using a tool called Docker. The images used by Docker are also based on Ubuntu. We've had to upgrade all Docker images to Ubuntu 20 so they would be up to date and able to use Ruby 3. Some of the images were still using Ubuntu 16! These Docker images aren't run on GitLab's own VM, but on two other VMs called digilin-test and digilin-ci. Initially, we thought these VMs weren't used anymore, so they were deactivated and marked for decommissioning. When the GitLab testing pipelines stopped working we investigated the issue, initially thinking it was because of the GitLab upgrade. Luckily, we were able to find out it was because of the deactivated digilin-test and digilin-ci VMs, and we were able to rescue them before they were decommissioned. We then also had to upgrade Ubuntu on those two VMs.
Improved table styles on Lens pages
Typecase allows users to add tables to some pages using Markdown notation. Whilst tables are useful to show data, they have the potential to misbehave depending on the amount of data in the table and the screen width of the user. The text could become very cramped within the cells, or the table could become wider than the rest of the page. The latter is an issue especially on mobile devices, where pages are generally expected to scroll vertically but not horizontally. The browser will add white, empty space to the right of the whole page to accommodate the width of the table; not a pretty sight.
Out of the many ways to present table data in a better way on mobile, the most straightfoward approach is to make the table internally scrollable. The only downside to this is that it might not be immediately obvious to the user that there is more information to the right of the table. Mobile users tend to only scroll vertically and might not realise they can scroll the table horizontally. We've added some shadow to the scrollable edges of the table as a visual queue to the user that they are indeed able to scroll to the right to see more information.
The new table style has only been applied to Lens style pages with the knowledge that the content type that uses tables the most, Corporate information, will soon use the Lens design system.
Improved floating in-page navigation style
We've had positive feedback on the floating in-page navigation. We did notice that the active state of the navigation items — the state it shows when you are scrolled to the section respective to the item — makes them look a little bit like a button. We think that once we roll out the mobile version of the floating in-page navigation, the existing active state design will confuse some users. We went back to the drawing board and came up with a new design for the active state. This more minimalist design adds a line to the left of the item and boldens the text.
Links to the Typecase for Content manual
The Content team has published the Typecase for Content manual and has asked us to put links to relevant sections of the manual in the appropriate places to help editors find the right guidance. We will also add more prominent links to the Typecase header and to the top of the editing pages for Content items. We have done some user research to find out the best way to do that.
Ongoing
Here's what we've been working on in Q2 of 2023.
Corporate information and Legal content type iteration
We've been working on an improved version of the Corporate information page which uses the Lens design system and supports components as seen on other Typecase content types that use Lens.
Existing Corporate information pages will be divided into two content types: the improved Corporate information content type and a new Legal content type. The Legal content type will feature a box that shows information about the ownership and version of the document. Both content types will have a floating in-page navigation section and will use the new, scrollable table style.
The work for Corporate information is being reviewed right now, and development for the Legal content type is in progress. Once both are done, we will create a script that automatically transfers data from the old Corporate information pages into the new Corporate information and Legal content types, and from then on both new content types will be available for use in Typecase.
An interesting hurdle we faced when developing this was the fact that in our test suite, whenever a generic content type was needed, the test was using a Corporate information page. For all of those test cases, which are in fact not directly related to testing the functionality of Corporate information pages, we had to update the code to get the tests to succeed using the improved Corporate information content type!
Floating in-page navigation mobile
The majority of visits on our site are from mobile devices and the mobile experience of our site should be on par with the desktop experience. Since mobile screens show less of a page at a time than desktop screens, it's arguably even more important to have an always accessible navigation section available on the mobile version of the site.
We have designed 3 versions which are being prepared for user testing. The first one has a collapsible navigation at the top. Another one also collapses at the top, but shows the current section at the top even if the complete navigation section is collapsed. The third one collapses from the right and has a little floating button to open or close the navigation. We will implement the version which emerges most favourably from the user tests.
Hybrid events
Currently, event pages created in Typecase are marked either as in-person or as online. In the post-COVID era, it has become a lot more common for events to be attendable both in-person and online. We have designed a hybrid option for event locations, which will show information on how to attend in-person as well as how to join the event online. We will start implementing this soon.
Publication pages iteration
Next in line for improvement after the Corporate Information and Legal content types will be Publication pages. We've collected new requirements for these pages and we understand that there are improvements to be made in terms of its usability from within Typecase. We've been thinking about better ways to manage the attachments and have started to make designs of what that would look like.
Respond