Mavo-Less

I am working on a small website for a freelance project. While all the pages are static, I would like to give my client an easy way to update the news section of the site. Implementing a content management system, such as WordPress or Kirby, just to do that is unnecessary.

Over the weekend, I spent an hour revisiting Mavo, which seems like a perfect solution for what I wanted to accomplish. Developed in the Haystack Group at MIT CSAIL and led by Lea Verou, Mavo allows an easy way to update website content with no backend database and without a single line of JavaScript. I gave it a try a few years ago, but got hung up on creating the JSON file in Github. This time, I set up the JSON file in Dropbox and it worked. I was able to make part of the web page editable. Furthermore, I added TinyMCE to give my client an easy way to update the content.

I was thrilled to see how friendly and intuitive it is to update website content with Mavo. This is something I have wanted for many years to offer to my freelance clients, but I don’t have the skill to develop myself. Unfortunately, the huge disappointment came when I viewed the source code. The content section was blank. When I turned off JavaScript, the content also disappeared on the page. I realized that the content was being injected using JavaScript.

If the main content of the page doesn’t show up when JavaScript is turned off, that is a major accessibility issue. Who has JavaScript turned off these days? I have been trying Safari on my iPhone without JavaScript and the experience has been so good that I am continuing to do so. For the website project, I am back to square one again. I should have known that Mavo is a JavaScript library; therefore, it depends on JavaScript to work. Although I can’t implement Mavo, my time spent was not wasted. It was a good learning experience.