Web design and no-coding CMS : are we going the right way ?

I have been using WordPress as a CMS (content management system) for almost 10 years now. When I dug into it, I knew nothing about PHP, SQL, CSS, programmation and servers. That was one year after I switched from Windows Vista to Linux Ubuntu. I remember the big selling point of WordPress was its “15 min installation with no coding knowledge”. Slowly, I began hacking my WP theme with PHP template tags, because it didn’t do what I wanted. I broke my website a lot of times. I didn’t learn PHP from a course, I just observed the structure of the code, changed things, observed the changed behavior (that is, the beautiful error messages), and reverse-engineered my way until I got some sense of what I was doing. One thing lead to another, and 10 years later, I’m fluent in HTML, CSS, Python, Bash, LaTeX, good enough to be efficient with SQL, Matlab/Simulink, PHP, C/OpenCL/SSE, and I can write bits of Javascript and ARM Cortex Assembly.

What happened ? I have never been crazy about computers, technology and such. Actually, I dislike electronic gadgets, social networks and smartphones. My phone is a Blackberry Passport on which I have very few apps, and it is shut down most of the time anyway. The less electronics I own, the fewer batteries I have to charge. I learned my way into computer science because I pursued projects that required some coding knowledge, and slowly developped these abilities along. Because Linux as well as WordPress were provided with their sourcecode and lots of documentations, and you could just do it. Because it was open, transparent and possible. And because, even if I don’t like the tools, I like what I can achieve with them. I don’t like to code, but I like spending as less time as possible in front of my computer, which implies to be efficient, which implies speaking to the machine in a language she (yes, that’s a she) can understand.

WordPress is much liked for its WYSIWYG post editor, TinyMCE, written in Javascript, and looking a lot like Microsoft Word. Wait a second here… Many people don’t imagine another text processing paradigm than Word. I know people who began coding inside Word because they knew no other text editor. I learned to use it when I was like 12 or 13. Then I discovered LaTeX, at 19, when I tried to type maths equations. LaTeX is a sort of a markup language as well as a Turing-complete language which allows you to type everything with a beautiful typography and use a lot of macros to do things efficiently, like adding dynamic table of contents or references, with style templates separated from the content, so you have to compile your document to produce a PDF, but you don’t have to bother with the layout anymore. Well, for the most part.

LaTeX blew my mind, even if the learning curve is quite stiff. Now, I use it for everything, even letters, because it’s very fast since I know all the usual markup by heart, so I type without even moving my hands from the keyboard. That is a very efficient typing paradigm. Especially as I got a mouse syndrom some years ago (repetitive strain injury), doing too much computer time, I’m very sensible to ergonomics. And I began using (and learning) keyboard shortcuts a lot more.

So, back to WordPress, I began to hate TinyMCE. First of all, Javascript is a crap that makes your browser lag as hell. I often write long posts (at least 1500 words, up to 5000), with images etc. Even on a 16 GB-RAM/Intel i7 laptop, I got unacceptable delays, sometimes page crash. Then, to style things, you have to use drop-down menus, thus the mouse, but… you were typing on your keyboard. So you have to move a lot. Of course, you could use the code editor and write plain HTML. But HTML is not the most straightforward markup to use, that’s why they invented Markdown and other wiki syntaxes, and you have to remember all the classes your theme uses to style things properly.

Basically, TinyMCE lets you type rich text, but nothing complicated. To do more things, or call template functions, you can use shortcodes, which look a lot like markdown syntax, and are usually defined by plugins. But you have to remember them, and they are not always well documented, if documented at all, or sometimes the plugin that provides them can, in such a nice gesture, add a special button to crowd the TinyMCE menues so you can insert them from a click.

Then, of course, TinyMCE doesn’t allow you to do fancy layouts, such as columns, full-width containers, and so on. So they invented page builders that provide blocks you can edit from more menus and contextual properties, and load even more f** javascript. They can be found with most premium themes, and are a necessary evil to build static pages such as landing pages, homes, contact pages etc.

Why are they mandatory ? Because TinyMCE aims at being a simple no-code-required tool for dummies, and :

What happens when you want to make simple things easier is you end up making complicated things more difficult, if possible at all.

Page builders add a lot of crappy shortcodes to define content blocks, so you regular HTML page becomes illegible in everything but the page builder.

A website owner/writer belongs to the great family of creatives. A creative has to innovate to stay relevant, on the form as well as on the content. To innovate, you need some liberty. What is the liberty you get from a textfield form where everything has been standardized and predigested in order to be simple ? Being non-standard is even more complicated than before…

Allow me to digress on this, because it’s not merely a matter of tools and paradigm, it ends up affecting the way we think as individuals.

Paper is a flexible interface. It’s a flexible interface because you don’t have to write following the lines, you can draw where you write, you can tilt your pencil to get a greasy line, you are free to do whatever you like, painting, writing, sketching, etc. Moving a lot, I slowly stopped using paper because it’s easy to lose, it’s heavy, etc. so I used more and more digital files. Then, one year ago, I got myself a Remarkable tablet, which is essentially an E-ink notebook and reader on which you can read PDFs, ePubs, and write and sketch in handwriting, or annotate said PDFs. Well, I began to think again as a kid, out of the box, because I was free to sketch along with text and do whatever I wanted. I began to sketch things again, a lot.

That’s how I realised that I had my mind formatted in a very systematic way because of the tools I used where all rigid interfaces : forms, where I filled blanks, put images where the devs of the app allowed me to, wrote text where I was allowed to, follow the lines. Basically, I had become like all these people who ask you a “Word document” when all they want is a simple read-only text, that could be anything from a .txt to an HTML file : I was thinking of the tool first, then what it allowed me to do, instead of thinking to what I wanted to do first, and then pick-up the right tool to do it. Rigid interfaces and their systematic content organization put us in boxes where we are not creatives anymore, we are secretaries. It’s where the creativity goes to die.

What is a flexible interface, in modern computing ? Well, it’s a script editor. Wherever you can write code, you are free to organize your content and design your layout as you want, as in LaTeX, as in pure HTML, as in Python. But, for this task, you have to assist the creative to write code. IDEs such as VScode and Jetbrains suite (Pycharm, IntelliJ, etc.) have achieved a nice level of user-friendlyness, with code auto-completion, inline docstrings and so on, allowing you to be very productive with head-up display assistants.

But what is the next WordPress editor ? Gutenberg. A thing where you replace one rigid box with a lot more rigid boxes, where you have to constantly switch between keyboard and mouse, menues and editor, content and properties… Because they still want to prevent users from writing code, instead of making the coding easier for them. So you lose even more productivity, because, yes, you can make fancier design, but these boxes don’t get more flexible inside. You just get more of them. And now, the HTML is even crappier, because the blocks they add are delimited with HTML comments. And they still use HTML in-between.

This post inside the Gutenberg HTML editor. That’s not nice HTML.

But the way Automattic (the company that promotes WordPress) presents it… Wow ! They really are in love with their new baby. Their marketing is spotless and this is intended to be nothing else but the heir of Johannes Gutenberg. And now, your posts aren’t HTML anymore, but JSON serialized stuff interpreted in realtime in the browser. Very lightweight approach indeed.

It think this current fashion of preventing users to write code is perverse. First of all, there are plenty of cases when you need to access the code, because you have precise non-standard things to do, and in this case, you want this experience to be nice and efficient. Coding is the only way to unlock full flexibility in your project. I often find myself sparing time when I write a snippet of PHP or CSS rather than trying to tweak bloated plugins or browse a theme preferences page to find that goddam property.

Then, empowering users is setting them free from the software editors, thus assisting them to write code and give them nicer and easier code to use. Not preventing them to code, as if they were some sort of stupid irresponsible kids with breakable toys bought for dad’s pleasure. Yes, coding needs learning. But it’s easier to learn with guidance and when coding is actually made easy. Everyone is developping apps now. Creatives don’t need apps, they need extensible frameworks. Apps are for consumers. Stop thinking WordPress as the toy-CMS for dummies who want a self-hosted Tumblr that would have mated with Wix, build it as a core platform for something else.

Markdown has the flexibility of pure HTML without all the bulk of closing tags. Use that. Then, WordPress shortcodes are a nice way to register macros in PHP and insert them wherever you need them. Besides, they look syntaxically consistent with Markdown. So create an API where plugins can register their shortcodes, along with their arguments and docstrings, in the WP database. Finally, in the editor, add an auto-completion tool that retrieves the shortcodes from the database as you type them, and displays the docstring in an hover card (like Jetbrains or VScode IDEs). Add a contextual help triggered with F1 to search between the shortcode or markup you need. In one word, make them more capable and independent. Not more bonded to the actual developers.

2018-09-28T02:19:24+00:0028 September 2018|Categories: Non classé|0 Comments

About the Author:

Développeur d'outils logiciels de traitement d'image pour darktable. Spécialiste calcul et modélisation thermodynamique chez Cellier Domesticus. Photographe. Pianiste. Développeur spécialisé en Python pour le calcul et la modélisation. Auteur de bouquins et de blog sur les sciences et la technologie. Expériences précédentes dans la fonction publique territoriale, les moteurs électriques industriels, les voitures solaires en fibre de carbone et le non-sens académique (maths sup, DUT).

Leave A Comment

libero Curabitur et, ut dolor dictum Nullam Donec mi, Praesent Praesent leo.