Dytomate - the invisible CMS

April 2015 · Rolands Atvars

We all like invisibility..

Even if the invisible thing is your content management system. We have built an advanced system based on a light and programmer-friendly technology, called Dytomate. Dytomate is the perfect content manager for the today's standard of simplicity and beauty on your website. Continue reading to learn why.

Dytomate - the invisible CMS picture

Dytomate is a content management system that makes you forget about Control Panels, Admin Panels and every other kind of Panel with the capital P out there today. Dytomate is the new standard for the websites built in 2015.. and it's a damn good one. So make sure you don't lose time and ask your developer to implement it today.. or if you're a developer yourself, save your clients' time, and put Dytomate in your toolbox for the next web app you create.

The power of double clicking

Dytomate is simple to use. Like, really simple. Like, double-click simple. All the end user has to do, is double click on either the text or the image they want to edit within their website, and Dytomate will automagically show you an on-screen editor. No admin panels, no searching for the text you want to edit. Forget about that. That's so 2014!

Furthermore, Dytomate was built not only to be super friendly to its users but also to its developers who will have to set it up and integrate with any existing sites they or their clients might have. To achieve this, Dytomate was split into two halves.

(this is where this post is getting pretty technical)

Client side technology

First half is the client side JavaScript library. The JavaScript library is responsible for everything the site administrator will see, which is a universal double-click to edit any HTML element on the page.

While it may seem like it only has one simple task to do.. it needs to do it well, with extreme precision.. and it also has to work with any HTML element in any design and with any configuration.

Let's dive into the technology even further. So what happens when an element is double-clicked?

Well firstly Dytomate will check whether this element can be edited at all. The element can be edited if it has a `data-dytomate` attribute with a value. Luckily for us, HTML5 exists which introduces the data attributes. Data attributes are awesome for this task because they keep elements semantic and provide a simple to use API to retrieve any custom data we might need for any element. It's like it was designed just for Dytomate.

Once Dytomate knows that the element can be edited it needs to find its location and visually focus on that element. Dytomate does this by drawing a box around that element and fading everything outside it. Since changing the style of the editable part would be bad ( as that could potentially change the look of the site ), Dytomate uses several absolutely positioned (technical term) elements to achieve this look without potentially changing anything else on the site.

Now, it's the time to actually edit the text / image. Sadly the most common way of doing this is to use `contenteditable` attribute on the element and every browser will allow editing the content inside it. Seems like exactly what Dytomate needs, but unfortunately browsers' APIs for `contenteditable` are quite inconsistent and that can yield inconsistent results when editing elements. To get around that Dytomate uses Scribe which tries to patch these browser inconsistencies. Whilst being a lot better than using the native APIs it's still not ideal and we are looking at some other solutions that would fit Dytomate needs even better.

Last but not least.. Dytomate handles clicks outside the editable area to know when the request for saving has occurred. This is actually not that hard to do for a programmer. Once Dytomate knows that the content of an element needs to be saved, an AJAX request is sent to the server to persistently store the changed value. After that, the text or the image is restored to its previous, uneditable glory.

Of course, there are several other, smaller optimisations ( like allowing image upload, handling HTML content and providing everything in one JavaScript file to simplify installation ) that make up the fluid Dytomate experience but listing them all could yield a book, not a blog entry :).

Server side technology

The second half of Dytomate is the code to persistently store the data that had been requested to be changed on the client side. For the non-technical readers - by "store the data", I mean making it permanent even after reloading the site. Dytomate doesn't require any specific language or technology on the server as long as it can respond to two HTTP POST requests - one that stores textual data and another that saves base64 encoded images ( which is very similar to textual data, so you can say.. it's pretty much like responding 1.5 requests, not 2 full ones :P ).

Although it's only 2 requests, we didn't want Dytomate developers to have to write their own server application every time they wanted to use it. That would make Dytomate much harder to install, and the developers would have to waste their precious time building it. That's why there's a Dytomate PHP server side technology library. So why did we use the PHP language as our server side language? Well, because that's the most accessible language for the Web and together with MySQL (language for accessing databases), we believe it will be able to reach more developers than any other language and database combination.

When building server side application we wanted to make it both super simple to install and also very flexible to make sure the developer has everything he/she may ever need. It's main distribution path is Composer (for the non-technical readers - Composer is a method for installing programming libraries / tools like this one) which allows the dev to install this server application in just one line of code (takes 10 seconds to write).

Composer is awesome but not everyone is aware of it yet, so we wanted to make an even simpler way to access Dytomate. Consequently, we made Dytomate available in just one PHP file so that developers without Composer can only include one code file and have everything working in less that 2 minutes.

The single-file-package isn't a separate release - it's the same Composer package but all files are concatenated into a single one.. similar to how client side assets would get concatenated.

The application itself is very loosely coupled allowing anyone to replace any component with their own implementations if they wish so. All dependencies are injected and can be specified within the provided factory that allows simple configuration for all aspects of server side Dytomate.

In most cases, all the configuration Dytomate needs is just the database access details.. but the flexible implementation allows developers to highly customize the application to fit almost any web app or framework. This means you can easily make any editions to Dytomate to suit your website even better.

Dytomate is a tool for everyone

Generally speaking, you only need to understand the principle of double clicking. That's the learning curve.. seriously! That's it! And the applications of Dytomate are sooo many! In fact, even this post was written using Dytomate as the content management system.

If you want Dytomate on your website, let us know. Although we as a company only focus on advanced online strategies for startups, we'll happily connect you with our programmer friends and partners if setting up Dytomate is all you need.