A bunch of icons floating as red bubbles in front of a circle representing tiny tidbitsA bunch of icons floating as red bubbles in front of a circle representing tiny tidbits

devlog

Tiny Tidbits

Illustrated drawing of Amadeus Maxmimilian StadlerIllustrated drawing of Amadeus Maxmimilian Stadler

Amadeus Stadler

July 18, 2021

Let me start out by saying that I’ve been feeling pretty burnt out these past two weeks since the last devlog. Maybe it’s because of the weather flip-flopping between summer and something grey and wet more fitting for November than July, or perhaps it’s because I’ve been working on this project nearly every day for such a long time now. Whatever it is, it made it really hard to focus and stick with it—so eventually I gave up and took some time off.

Nonetheless, I still managed to make a little progress since my last post, so let’s dive right into that.

New Features

Two weeks ago, I announced that I would rework and improve some of the Git integration that ties everything together and forms the core of how Mattrbld is able to work. While I didn’t manage to make much progress in the conflict-resolution aspects of the integration, I added two features which head in the right direction.

Display Changes in a File

Since Mattrbld intentionally doesn’t sync changes to the remote Git provider automatically, it can happen that there are some local changes which aren’t synced between multiple editing sessions on one device. In this case, it would be useful to be able to quickly recap what changed locally when getting back to them after a while.

To make that possible, Mattrbld is now able to show the difference between the original (remote) file and any local changes applied to it. While this information is mostly useful to people familiar with Git “diffs”, it should still be possible for non-technical users to quickly get a sense of what is different between remote and local versions of the file.

A screenshot of the change details modal in Mattrbld showing what changed between the local version of the blog post and the one on the server. Removals are shown on a red, additions on a green backgroundA screenshot of the change details modal in Mattrbld showing what changed between the local version of the blog post and the one on the server. Removals are shown on a red, additions on a green background

This will also come in handy once there’s the option to do a manual conflict resolution in case remote and local changes cannot automatically be merged.

Discard Local Changes for a File

In the same vein, another new feature allows users to discard any local changes to a file. This can be useful after quickly testing something out and accidentally saving, or discarding unfinished content that is no longer relevant.

A confirmation dialog warning about the local changes being permanently discarded and the fact that that action cannot be undoneA confirmation dialog warning about the local changes being permanently discarded and the fact that that action cannot be undone

Since this action is destructive and cannot be undone, Mattrbld will ask for confirmation before discarding the changes. I tend to favour an “undo” option whenever possible, since people have long been trained to blindly click that “accept” button by too many confirmation dialogs (and especially cookie banners 😡 in recent history). Unfortunately, that was not possible in this case.

Eye Candy

In the last devlog, I also mentioned that I wanted to visually improve the onboarding experience of Mattrbld, which has been looking rather unfinished for a long time. Originally, I had intended on adding a complex set of animations to the empty area to the left of the form that explained some of Mattrbld’s features and core concepts while the user went through their first import and the creation of the local user profile. Unfortunately, I’m not the most experienced animator and ensuring that the animation worked on all possible screen sizes (especially on small screen devices) proved too big a challenge, so instead I opted for a simpler solution.

A screenshot of the updated onboarding experience for Mattrbld, showing the newly added interactive feature presentation on the left and the usual project import options on the rightA screenshot of the updated onboarding experience for Mattrbld, showing the newly added interactive feature presentation on the left and the usual project import options on the right

In place of the animation, there now is some text highlighting some details of Mattrbld. The surrounding circles remained, to give everything a bit of a framing as well as to create something visually interesting, since this is the first contact point of users with the application, which is supposed to feel delightful and thoughtfully designed.

To underline those attributes, both the text and the circles animate whenever the user completes a step in the onboarding process, revealing some new information and guiding them along.

Various Little Fixes

Along with these two larger changes, I’ve also continued to improve some existing features and parts of the application.

More Positive Toasts

Synchronising changes with the remote repository often takes a very short amount of time, causing the progress bar shown while syncing to only briefly appear and then disappear without giving the user any feedback that the operation was successful. To alleviate this issue, Mattrbld now shows a positive toast whenever the sync was completed successfully.

In the same vein, uploading images to the media library now also shows a toast after they have been uploaded, since they might not always appear at the top of the list depending on the sort order selected.

Limit Visibility of Sidebar Entries by Role

I have highlighted before that the sidebar in Mattrbld can be individually configured for every project and that different Collections can allow different levels of access for each role. So it seemed only natural that it should be possible to show certain entries of the sidebar only to specific roles.

With this new feature, more technical aspects of the site, such as global metadata, can be shown only to Developers, while purely content related entries can be restricted to editors. The project my university is going to use Mattrbld for, for example, has a Collection of teachers that should only be visible to them and not students, while both teachers and students should be able to edit entries in a Collection of events.

Like many others, this feature is intentionally flexible in order for users to be able to really configure Mattrbld for their specific use-cases.

Save Unfinished Drafts

To avoid invalid or unfinished content to be published on a website, Mattrbld until now refused to save content items which had errors in one or more of their fields. While useful, this behaviour also meant that drafts, which are inherently unfinished up until very close to their publishing date, could not be saved without at least providing placeholder content to all of their required fields. This could lead to some placeholder content going unnoticed and eventually being published—which obviously is not ideal.

Now, Mattrbld allows saving drafts despite some of their fields having errors, but refuses to remove them from the drafts directory until all errors have been fixed—which also means that content items will be fully validated whenever the “Draft”-toggle while editing a content item, or the “Toggle draft” function in Collections is used.

A New Idea

While taking a bit of time off of Mattrbld, I revisited an old card game I developed in 2019 and decided to create a new version of it. Since it features a lot of different cards, I need a place to manage them, while at the same time being able to quickly change things and generate a new SVG for them. For the old version, I used to have a large table-document and manually drew the SVGs for each card, but I think Mattrbld will be a perfect fit for this use-case.

I will simply have Schemas and Collections for my different card-types and use the interactive content preview system to run an SVG-generator that is able to use the data coming from Mattrbld to generate the cards. It’ll still be a while until I know for sure whether or not that works, but theoretically Mattrbld already has all the features necessary for it. I think it’s very exciting to notice all these new possibilities an application such as Mattrbld opens up. 😁 (And also, I won’t feel as bad spending time on something other than Mattrbld if I’m going to use it in the process—it’s all testing after all. 😉)

Coming Up…

It’s kind of crazy that without the extension that was granted to us due to the COVID-19 pandemic, I would’ve had to hand in this project last Friday. I could’ve done it by sticking to my initial scope—but this extension has allowed me to create a more complete product. I’m incredibly grateful for all the extra days I have to focus on it (even if on some days it’s harder than others 😉) without having to worry too much about life after uni.

That being said, I still have to write my thesis and the documentation for Mattrbld so others who are interested in the project can start testing it. I’ll keep working on the Git integration in the weeks to come, but my focus will definitely shift to the more theoretical aspects of this project—at least for now.

Just because I’ll hopefully have my degree in a couple of months doesn’t mean that I’ll abandon Mattrbld. There are too many exciting projects I want to use it for and I really do believe that it has the potential to make a lot of people’s lives easier.

Enough about the future, let me thank you once again for sticking with me and reading these posts. As always, feel free to reach out on Twitter if you have any questions and comments and if not, see you in two weeks for another Mattrbld devlog! 😊