Lazy Days

Taking some time off is just as important as working hard, especially in the creative field. It gives us time to reflect and recharge, but also to come back with a fresh set of eyes and look at things from a different angle. Unfortunately, the harsh reality of deadlines means that we cannot take time off nearly as often as we would need to.

Thankfully, with the extension of the deadline of my BA project—courtesy of the global pandemic—I had the chance to do so, like I had announced in my last devlog. Nonetheless, I was still working on the project, albeit at a slower pace. Now that I feel a bit more rested, I’m ready for the home-stretch of adding the remaining missing features for the MVP before shifting over to documenting everything and tackling the theoretical part of my BA thesis.

Using Mattrbld “in the wild”

The last devlog marked the first entirely written and published with Mattrbld and since then, I’ve also written and published two posts for my personal blog entirely within Mattrbld. Obviously, there were some stumbling blocks (like the fact that rich text fields don’t support images yet), but all in all it went really well. It’s further proof to me that Mattrbld works and is already quite usable.

Since content editing and uploading media files works, I’ve also given a very rough build of the application to a friend of mine who has been using it for a project of his and he pointed out a few bugs and rough edges that I took time to look at and polish up.

Quality of Life Changes

Spinner and Clear Buttons in Inputs

One of the first points my friend brought up was that they were surprised that number inputs pretty much looked exactly like text inputs and had no way of quickly changing a number without clicking. So since then, I’ve added some brand new spinner buttons to number fields as well as a clear button to fields that should be able to be cleared quickly, like search-fields.

Errors Visible in Tabs

Mattrbld validates the content that is entered into the various fields of a Schema according to the rules of that Schema and shows these errors on the fields with invalid content.

To keep things organised, Mattrbld also allows users to split their fields into multiple tabs so the need for scrolling can be kept at a manageable level. However, this makes it easy to forget about errors in tabs that aren’t active—which is why I’ve added a little indicator to tabs that have one or more fields with an error in them.

Warn About Missing Images

In a similar vein, when editing a piece of content with image fields in it, Mattrbld will now warn the user if it detects that one of the images cannot be found at the path it’s pointed to. This should make it much easier to avoid that dreaded broken image icon on websites, or unforeseen errors during build-time because a file cannot be found.

Versioned Fields

Speaking of errors during build-time, what happens if the options and sub-fields of a (custom-)field change? It wouldn’t be feasible for Mattrbld to update every single file that references that changed field—and it might also not be desirable. That’s why fields now carry versioning information and will show a warning about being outdated to the user.

The user then has the choice whether to update the fields in the Schema they are currently editing, or whether to leave them untouched until everything is ready for the new features. Mattrbld will also ensure that all fields defined in a Schema are present in a content item (either with a value of null or with the default value of that field) that was edited within Mattrbld.

Per-Language Smart Quotes

Rich text editors in Mattrbld have an option to automatically convert second and minute marks (" and ') into typographically correct quotation marks, a feature also known as “Smart Quotes”. Since different languages have different styles of quotes and Mattrbld supports content in various languages, these smart quotes can now be set up on a per-language basis. This ensures typographically correct quotation marks in any supported language. 🎉

Don’t fret if you’d rather give the content editor full control, as with most other parts of Mattrbld, this function can be deactivated.

Smarter File Lists

When going back to the Collection / Schema settings after editing a content item or a Schema, Mattrbld will now take you back to the exact sub-folder you were in before instead of returning to the root folder of that location.

Fewer Mystery Groups

Group fields can designate an optional display field, the value of which will be shown under the label of that group when the group is collapsed. This value will now be properly converted to a string and stripped of any invisible characters (such as HTML or Markdown tags) before being displayed.

If you did not want to specify a particular display field, for example because not all fields in a group will always have a value, Mattrbld will now show the first non-null string-like field it can find within the group instead. This should make content items with a lot of groups, columns, as well as compact rows fields much more scanable.

New Fields

Speaking of fields, Mattrbld can now display and handle all built-in fields except the columns-field. That means that since the last devlog the following fields were added:

• Number

• Checkboxes

• Select / Dropdown

• Radio Group

• List

• Unique ID

• Document Reference

• File

• Link

The columns field will be added as soon as the rows field is finalised since it’s basically a horizontal variation of the rows field.

Rows Field Updates

I had to leave the rows field in a very basic state two weeks ago in order to be able to write and publish the devlog on time. Since then, I have considerably fleshed it out so that it became much more usable in a variety of situations.

The rows field is a very flexible field that can be used to create arrays of values, including objects. This makes it one of the most complex and powerful fields in Mattrbld. For example, I’m using a rows field to describe these blog articles, which can not only consist of text, but a variety of different “blocks”, such as images, highlight boxes like the one above, and of course passages of text.

As soon as a piece of content is more than a very linear sequence of a limited amount of values, a rows field is probably needed. A Schema can define exactly which fields (or groups of fields) are allowed as rows within a rows field, define a fixed amount of rows for content editors to change, or allow them to add and remove rows to their heart’s content. In short, rows (and by extension columns) fields can be used to build a website-builder interface.

I spent quite some time in the past two weeks to finalise the rows field and added support for an expanded view, which allows the rows field to display the content of each individual row in an inline-fashion. This way, everything can be edited at once without having to click down into individual rows. I’ve also added the ability to change the type of a row item while retaining compatible content, which allows content editors to experiment with different types of rows in their articles. On top of that, Mattrbld will also do its best to assign the correct type to rows in existing pieces of content—but should it ever guess wrongly or not be able to identify the correct type, the user can manually assign it.

Sometimes, there might also be the need for arrays of content. For simple cases (arrays of strings) there is a list field, but should you need an array of items of a particular type (an array of images, numbers, files, etc.), a rows field is the right choice. This flexibility allows for nearly any piece of content to be modelled and edited in Mattrbld.

Media Library Updates

Last but not least, keeping in line with the other quality of life improvements outlined earlier, I tweaked the Media Library feature a bit.

Meta Information Travels With Parent

When the advanced media library is active, metadata such as alternative text, caption, title etc. is saved alongside the image. This metadata was always located in the folder the image had originally been uploaded to and didn’t travel with it, which could cause a number of issues. Now, if the image is moved or deleted, so is the associated metadata, making for a cleaner and more predictable behaviour.

outputPath is Now Honoured

Some static site generators move images and other media assets to a different location during build-time. To be able to reflect this behaviour in Mattrbld, users can specify an outputPath for their media files, which will be prepended to the file name (or the path of the file within the media directory in case it is in a sub-folder).

Disable Advanced Library for Individual Fields

Sometimes it might be necessary or preferable to disable the functions of the advanced media library for a particular image field so that it will only store the path to the media file and not an object containing the other fields defined in the media Schema. I have added a toggle for this behaviour to image fields, which will do just that.

Coming Up: Preview and Dashboard

Once I’ve finished adding the final touches to the rows field and added the columns field, the content editing part of Mattrbld will be finished for the time being. At that point, I will implement the content preview feature that will give editors a live preview of their changes as they make them.

I already have the fundamental building blocks of that feature in place, so hopefully it shouldn’t be too hard to add—the most complex part will be the preview of local images. Once that’s done, I will turn my attention to the dashboard view that greets every member of the project as soon as they open it.

This dashboard will show all sorts of useful information, such as the latest changes, how many local changes there are waiting to be published, and so on.

Until then, thank you very much for reading and keeping up with the latest changes to my project! I hope you’ll be back in two weeks’ time for another devlog. As always, if you have any questions or comments in the meantime, feel free to reach out on Twitter.