https://thinkwritecode.comGatsbyJSFri, 24 Sep 2021 11:35:57 GMThttps://thinkwritecode.com/complex-global-systems-in-block-based-websites-one/https://thinkwritecode.com/complex-global-systems-in-block-based-websites-one/Mon, 02 Mar 2020 11:17:08 GMTWhat follows is an essay (i.e., an attempt) about my dives into creating systems that help build and control sites from a global vantage point. My team at <a href="https://pixelgrade.com" target="_self" rel="nofollow">Pixelgrade</a> and I haven’t explored and implemented such solutions simply for the fun of it, but as a consequence of our constant, almost pathological, drive to own design choices and decisions, so our end-users don’t have to. When it comes to smart, site-building systems, my aim is not to empower users with freedom and choice, but to liberate them from such false freedom and choices, to provide them with tools and options that are safe to use inside the agreed-upon design solution. I’ve previously tried to explain much of this ethos in the context of <a href="/the-good-wordpress-theme/">what is a good WordPress theme</a>. <h2 id="expectations" style="position:relative;"><a href="#expectations" aria-label="expectations permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Expectations</h2> Upon embarking on this journey of exposing <a href="/musings-about-building-websites-out-of-wordpress-blocks/">my thoughts</a> on the ups and downs of transitioning to a block-based WordPress ecosystem (still ongoing for the foreseeable future), through the feedback that I generously received from you, my readers, I realized there is a very wide range of expectations. Some of you want just the technicalities; some can stomach a more philosophical approach; some love while others hate reading long articles; some want just the gist of it. I respect each of your needs, but I put my own first. I’ve explained <a href="/why-i-write/">here</a> why I write, in general, but I find it useful to set some specific expectations right from the get-go. Sorry to disappoint but there will be no TL;DR. What follows is the TL;Dr of my years of experience and learning. All this is about complex systems — it’s right there in the name. It’s about abstractions, representations, linguistics, cognition, color theory, spatial theory, psychology, philosophy, computation, logic, languages, and on and on. Just about any manner of interpreting reality could be thrown in here, and it would find its place as a useful way to look at this problem. There is no final solution. There is only a sufficiently satisfactory one. There is only good enough in light of the knowledge and understanding we are capable of today. We can’t tackle complex systems with absolute certainty. We can only tread carefully, as much aware as possible of all that we don’t know and understand. I don’t want to waste your time with lengthy writings, but I will favor clarity and context over brevity. My aim is not to clock up words, but to pursue understanding, to answer my own questions — hopefully yours too. Currently, I find it easier to do so with more words rather than less. Maybe someday, with more understanding and writing experience, I will be able to express more with fewer words, while maintaining the same level of clarity (this is paramount to me). I welcome that day, but in the meantime, I will do my best today. <h2 id="limits-and-limitations" style="position:relative;"><a href="#limits-and-limitations" aria-label="limits and limitations permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Limits and limitations</h2> For the sake of the above-mentioned clarity and context, let me portray what are the use-cases of the system I have in mind. I am not after the one system to solve everything there is to solve for website building — far from it. For bespoke sites, like those you would expect to get by working with an agency, such a system might well be overkill. The “dumb” system of page builders will suffice in most instances, coupled with some custom coding when needed. In such circumstances, the final solution is “set in stone” once deployed in the hands of the end-user, and any alterations are closely vetted and controlled by the agency’s designers and developers. I am after a system that can encapsulate a certain design, as envisioned by a designer, provide a healthy degree of flexibility of styling, layout, and content types, and be resilient enough to maintain that design consistency and intent across the entire website, given the almost infinite amount of possible final states (adding up to roughly the number of style options times the number of layout options times the number of content blocks). So, this is a system that needs to be able to fend for itself in the hands of users, without constant input from its creators. The decentralized, decoupled nature of this scenario is the main reason for tackling such a problem. Software doesn’t necessarily have to exchange hands like in the case of self-hosted WordPress themes; the same applies to platforms like WordPress.com, Wix, Squarespace, or Shopify. What matters is that we aim for a scalable, self-service interaction between (mainly) content creators and the site system. I purposely will not touch on ideas such as adding machine-learning capabilities, not for lack of appeal, but in an effort to keep things focused on the fundamentals. Once a working system is in place, much can be easily added to the newborn organism. But first, we need to find a solution for the basic “building blocks of life.” <h2 id="semantics" style="position:relative;"><a href="#semantics" aria-label="semantics permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Semantics</h2> Complex systems theory is.. well.. complex. There is no shortage of sub-domains, cross-pollination from related fields (e.g., cybernetics, biology, economics), and even challenges and influences from ones farther away (anthropology, sociology, linguistics). One can easily expand complex systems to include just about everything, but that is hardly helpful, except to acknowledge the similarities and overlaps between various fields. Due to this very fluent definition of where complex systems start and end, the popular language around them is also quite hectic. As such, for a better understanding of my thinking, I should explain a few key terms that will pop-up quite often throughout this essay — bear in mind that I do not claim academic rigor. Behavior: In the context of blocks forming a complex site system, behavior is not about user interactions like hover or scroll; it’s about each block’s ability to respond to certain content types, to the presence of other blocks, to its inclusion in a different site area or as a child of a certain parent. Block behavior is about adaptability to specific contexts, thus making a certain block more widely reusable. Relation: A relation is established between two blocks whenever information gets passed between them, either directly (e.g., a value on initialization or a callback) or indirectly (e.g., parent-child relation). Relations between blocks can be either one-way as in the case of passing information from the global to the local, but never the other way around, or two-way when blocks establish feedback-loops between them. Feedback-loop: This is a way for a block to ascertain a need or desire toward another block, or group of blocks, and have the mechanisms to check the actual reality of that happening. Think of your room thermostat: you set the desired temperature; you get a beep to know the HVAC received the request (a first feedback-loop); you then see the actual air temperature in the room changing until the target one is reached. Relations that require feedback-loops are the ones where change is not immediate, or may not even be possible. Filter: This is the process by which some piece of information (e.g., a color value) gets passed from one block to another, and changed in some pre-determined way (e.g., lightened by 20%). Often, global information trickles down a set of hierarchical relations, but each block needs to have the ability to adapt it to its own needs, and that of its children. A filter might also entirely block the subsequent propagation of information if some conditions call for it. Condition: This is a logical expression that will be evaluated against the current context a block is aware of, and it will either pass or fail (true or false). Conditions can be attached to any type of entity (a relation, a filter, a block’s existence, a group of blocks, etc.). This simple mechanism of switches allows for a great deal of complex, adaptive behavior. Conditions can be grouped, nested, linked; you name it. Context: This is all the information that is available to a block at a certain moment. It is the sum of external and internal details a block “knows” to interpret and, possibly, convey to other blocks. The external context is the information the block receives about its environment, while the internal context is the information a block can deduce or receive from its siblings. Responsibility: In the context of blocks, responsibility means the ability to act on a piece of information, to behave in a certain way. The question of where to attribute responsibility is fundamental in building a system. Most often than not, there are no easy answers as there is always the choice between delegating it higher in the system (and increase cohesion) or leave it at the lowest possible level (and increase resilience). Intent: This is not about blocks, but about design, as in “design intent.” In my book, one of the fundamental benchmarks of a site system is its capability to encompass and ensure the designer’s intent is fulfilled, once in the hands of users. A system that allows for nuanced, expressive intent is a system much more likely to succeed with helping both the development process and day to day use. Option/control/field: I will use these interchangeably because I am not after the implementation details (an option is about the database, a control is about the interface). Any one of these represents a user controllable value — or set of values as in the case of fonts, that feeds into the site system. <h2 id="the-need-for-complexity" style="position:relative;"><a href="#the-need-for-complexity" aria-label="the need for complexity permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The need for complexity</h2> <blockquote> If individual blocks are to thrive and sustain dynamic sites, they need to get swinging, for a living. Blocks need to be smart enough to establish relationships, to adapt to changing environments. Otherwise, they are not much better than bricks in a wall — useful, but dumb. - From my ”<a href="/musings-about-building-websites-out-of-wordpress-blocks/">Musings About Building Websites out of (WordPress) Blocks</a>” </blockquote> I am well aware that this whole game of complex systems might come down as a goal in and of itself — me trying to apply my interest in complex systems on every problem I come across. I understand the bias of “hammers and nails,” but I can assure you this is not the case. Why would you want all this complexity? Why not just design a system that is predictable, with clear boundaries, and sufficient capabilities to satisfy the community? Exactly! That is the kind of system I am after! The trouble is you can’t have it without it being complex. For our goals, complexity is a feature, not a bug. It is something we need, in just the right amount. Without it, we might as well call it a day and build yet another page builder. For me, there isn’t anything complex about a page builder; it is a very complicated piece of software, with more options than any one person might need, but it is not complex by the yardsticks of understanding and prediction. A proper example would be comparing the English dictionary and the English language. You can learn about all the words in English from the dictionary. You can even memorize them all or account for all their various endings. Complicated, but doable. Now consider the English language with all its grammar rules and exceptions, its ways to build simple and complex sentences, ways to express infinite nuances. Complex, with no end in sight. In a real-life, design-driven scenario, while site blocks establish a hierarchical set of relations (very much in line with the DOM), they also engage in ad-hoc relations across branches (behavior). Just consider a header logo that is center-aligned when there are two menus, and left-aligned with just one. This reminds of the way Jurgen Appelo viewed organizational structure in his book <a href="https://management30.com/books/management30/" target="_self" rel="nofollow">Management 3.0</a>. Quite a faraway place from site blocks, but it remains wonderfully true, nonetheless. A further testament that, fundamentally, complex systems from various fields have much in common. <span class="gatsby-resp-image-background-image" style="padding-bottom: 56.666666666666664%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABrElEQVQoz3WS2Y7TMBhG+/6vAhcgIcEIURjUStNpmq5pQlOPE7J4zdZpFju1g7ooDJU4l7aP/sXfoHuDvtB1ndKaUzL8+I4x1jTietjf9gx6res6KduyLAkhURQhhEzTZIxRShFCeZ43jWjbU//4r3wFOLa7+1UcDnVdU0o9CBPOZdvmeU4pAy92GDn3slJKCEEpnU4mi/nc933GmG3bj8OhOX2O47goijwvxuPH0fgbY7yqqqt/lg/FAUIIANjtdgAA13XjOEYIW5bl7t0kTQmlEMIgCJMkjeIoCH5TgrVSg67Tq/XP+dx093sIoe955NzC09cP77MsBwDYlkUwFkI4jvP6euCcvwC4mZu3ynEccM4RQmEYaq2DILC3281qwRiDnmevVz6EWuskScqyMozJaPxZCHmTpTyvhBBy6RYtl8s9AFLKLMsYY0ma1k0T+L5pTAmhnLMsi24Lu45+PB49z+ecY4yt9Xo1M5qmwRgbs2cUR7I9bRczc/RD6X/i0P+z+v7lk7XZVHUtxZm6rrMsN2YPhERCyLfx0FrdhySlWJ1O3X+4FFN3CfsDnFtkukiedK8AAAAASUVORK5CYII='); background-size: cover; display: block;" > <picture> <source srcset="/static/0aefa6a124e611ab811345200dc542aa/89b46/organizational-layers-management-3-0-jurgen-appelo.webp 180w, /static/0aefa6a124e611ab811345200dc542aa/97ead/organizational-layers-management-3-0-jurgen-appelo.webp 360w, /static/0aefa6a124e611ab811345200dc542aa/fb07f/organizational-layers-management-3-0-jurgen-appelo.webp 720w, /static/0aefa6a124e611ab811345200dc542aa/64908/organizational-layers-management-3-0-jurgen-appelo.webp 1080w, /static/0aefa6a124e611ab811345200dc542aa/0323f/organizational-layers-management-3-0-jurgen-appelo.webp 1126w" sizes="(max-width: 720px) 100vw, 720px" type="image/webp" /> <source srcset="/static/0aefa6a124e611ab811345200dc542aa/96042/organizational-layers-management-3-0-jurgen-appelo.png 180w, /static/0aefa6a124e611ab811345200dc542aa/7a322/organizational-layers-management-3-0-jurgen-appelo.png 360w, /static/0aefa6a124e611ab811345200dc542aa/16546/organizational-layers-management-3-0-jurgen-appelo.png 720w, /static/0aefa6a124e611ab811345200dc542aa/6d80e/organizational-layers-management-3-0-jurgen-appelo.png 1080w, /static/0aefa6a124e611ab811345200dc542aa/dd762/organizational-layers-management-3-0-jurgen-appelo.png 1126w" sizes="(max-width: 720px) 100vw, 720px" type="image/png" /> <img class="gatsby-resp-image-image" src="/static/0aefa6a124e611ab811345200dc542aa/16546/organizational-layers-management-3-0-jurgen-appelo.png" alt="Organizational layers" title="Organizational layers" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> The two crucial organizational layers: the network for communication and the hierarchy for authorization - <a href="https://management30.com/books/management30/" target="_self" rel="nofollow">Management 3.0</a> My focus is to identify and head toward a sweet spot that has the right mix of structure and behavior. These are two axes that are fairly fundamental for grasping the dynamics of our desired system. Structure directly influences our ability to understand a system; the simpler the structure, the more we can understand and feel in control. Behavior, on the other hand, is about our ability to predict future states of the system; the more ordered the behavior, the easier it is for us to know how the system will behave in certain future situations; the more chaotic behavior gets, the less we can confidently and usefully make predictions. Since Jurgen Appelo did such a good job at digesting complex systems theory in chapter 3 of his book, I will borrow his illustration of the structure-behavior model. Both people organizations and block-based website systems seem to aim for the same balance, with the same goal in mind: grow healthy, resilient, evolving systems. <span class="gatsby-resp-image-background-image" style="padding-bottom: 49.44444444444444%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAACNElEQVQozy3Q3U/aYBgFcP/EXW4XanaxJUNnXCJR57JkcRfLLrxYJOqmTk0Q2aYyNU4+pIAVUSMoOApUoB9CS6UFCqUt5X2fjci5PMkvJzkDAIAwQgiq1TrH3TebGsaAMVgYRKVeqakWwhh6UbT2vaJoloUBHpsBAND1zl/KqzS8VG5fkLyqGZLv9owTd/14Xfav6aduPezWnCu1ZUdjxaGtf1W+zVeZQh/L1WaedVVqyzs77hNyQ4MNMzPHOcYzCxNd52Tg85i6MN54+RRsgzAypL54Vhl8Ujw7xY+4dP+QzbvY8uqm0+PzbWrgalFfvn+YeD9tn5t5M/l2uuiwP4wOVW3Dkm1YHXuuvRoqxKL9ZZ4XEzebLXPrJvWDF35qaJuNz8cWZ8nVT8TSx+DibGHpnTw12pp6XbOPdGbGNbutnEr2cLutZTJZ+u7K6DAWYsxOUe9ybSnFnxxkCU/9mkhFjtTrCAr5c1vOkucXkKG279Co1Xq41WpRVJblbwUxHfAHLy+jHVxCdfrK+9u1tnzu2wsd7TeTp2YkaESCd55tiwwZhL+YTvdxPJ5g2CSAUCgmZIUGUEw5A2xcy8aCB7st+gLTF1b4GMiwHjiq7O+agT9lmu7hbrfbaKjpdKLI3JaFXI5OpG7PU3EyGyOosyB1Hk6fEcmwNxPwMWSEi5JslKRDBJfP9w8DAMvqGrppmtaDJDMMJ4iSKFVLoqQ0VL4s8mVBaTYNhHSEDIQNhDuW9R//A/hq8GTIdCaGAAAAAElFTkSuQmCC'); background-size: cover; display: block;" > <picture> <source srcset="/static/a7b981e769ed30eb56df206fc562fc92/89b46/structure-behavior-chart-management-3-0-jurgen-appelo.webp 180w, /static/a7b981e769ed30eb56df206fc562fc92/97ead/structure-behavior-chart-management-3-0-jurgen-appelo.webp 360w, /static/a7b981e769ed30eb56df206fc562fc92/fb07f/structure-behavior-chart-management-3-0-jurgen-appelo.webp 720w, /static/a7b981e769ed30eb56df206fc562fc92/64908/structure-behavior-chart-management-3-0-jurgen-appelo.webp 1080w, /static/a7b981e769ed30eb56df206fc562fc92/dd193/structure-behavior-chart-management-3-0-jurgen-appelo.webp 1148w" sizes="(max-width: 720px) 100vw, 720px" type="image/webp" /> <source srcset="/static/a7b981e769ed30eb56df206fc562fc92/96042/structure-behavior-chart-management-3-0-jurgen-appelo.png 180w, /static/a7b981e769ed30eb56df206fc562fc92/7a322/structure-behavior-chart-management-3-0-jurgen-appelo.png 360w, /static/a7b981e769ed30eb56df206fc562fc92/16546/structure-behavior-chart-management-3-0-jurgen-appelo.png 720w, /static/a7b981e769ed30eb56df206fc562fc92/6d80e/structure-behavior-chart-management-3-0-jurgen-appelo.png 1080w, /static/a7b981e769ed30eb56df206fc562fc92/823ba/structure-behavior-chart-management-3-0-jurgen-appelo.png 1148w" sizes="(max-width: 720px) 100vw, 720px" type="image/png" /> <img class="gatsby-resp-image-image" src="/static/a7b981e769ed30eb56df206fc562fc92/16546/structure-behavior-chart-management-3-0-jurgen-appelo.png" alt="Structure-Behavior model" title="Structure-Behavior model" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> The Structure-Behavior Model - <a href="https://management30.com/books/management30/" target="_self" rel="nofollow">Management 3.0</a> HTML is a fairly simple and ordered system, making for static, predictable behaviors. The “enhanced” HTML of the Gutenberg blocks is a more complicated system, but still ordered, resulting in some dynamism, but not much. Not enough to cross into complex territory. <hr> With the hope that you are somewhat convinced of the promise of complexity, let’s dive right in and explore ways in which I believe we can cross that threshold and reap the rewards. From here on out, I will mainly refer to themes as a substitute for dynamic site-building systems. It is easier for me to do this since WordPress themes are the place where most of our experiments and evolution took place. But, make no mistake about it, WordPress themes are just a packaging choice for the much general solution. <h2 id="global-style-system" style="position:relative;"><a href="#global-style-system" aria-label="global style system permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Global style system</h2> I will first tackle the problem of predictably and consistently alter the styling of a site because that is what we’ve started with at Pixelgrade. Site blocks are not a precondition to solving this problem because HTML and CSS are suitable replacements. They already provide the needed hierarchy (structure) and expressivity (behavior). <h3 id="the-general-status-quo" style="position:relative;"><a href="#the-general-status-quo" aria-label="the general status quo permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The general status quo</h3> Ever since premium WordPress themes took off, creators wanted to offer a degree of flexibility to users, first and foremost, in terms of styling. It made sense since just about anyone can relate to colors, fonts, spacings, etc. Unfortunately, the styling options offered are just a thin layer of abstraction above basic CSS. They are very granular, allowing you to change things like headings colors and fonts, body text and background color, buttons background, text and border colors, header and footer background colors, all sorts of margins and paddings. Such controls are very much coupled to individual CSS properties and basic HTML elements. The “mighty” multipurpose theme and their page builder companion plugins (often bundled with such themes) take things to the extreme, offering nothing less than a visual programming environment for HTML and CSS. With each entity you use, you get control over much of its CSS properties. I find that disingenuous with regards to non-technical users — they get dragged into a sort of “programming without consent.” I don’t think capable, technical users are better off either since they could probably do things easier by just writing that damn CSS. <blockquote> I don’t like this status quo because it is based on false premises and promises. You, the end-user, are the designer! You, the content creator, have the experience and expertise to make design decisions! Nonsense! </blockquote> Whenever I see a padding or margin control (with media queries to boot), a button background color control (with gradients just for kicks), I feel some angel has fallen from heaven. Sadly, the Gutenberg editor is happily advancing down this path, too. <h3 id="our-status-quo" style="position:relative;"><a href="#our-status-quo" aria-label="our status quo permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Our status quo</h3> We, at Pixelgrade, went to great efforts to push against the general consensus of “more options are always better.” Since the early beginnings, we strived to offer only those styling controls that made sense in the context of a certain design. Where we felt our solution couldn’t handle a certain degree of flexibility, we defaulted to refraining from exposing yet another option just for the sake of false “perceived value”. Even with this mindset, lots of options would accompany our themes. Too many for safe, predictable styling with guaranteed good end results. About 4 or 5 years back, we started introducing Style Presets that would simply bundle up a set of colors and font options. While a step in the right direction, it felt rough, too brutal of an approach. We pushed further and introduced a new system of separate Color Palettes and Fonts Palettes that would amount to our Style Manager system. Basically, we would leave individual, granular controls available, but would do our best to help the user stay clear of them — if he or she felt the need to reach lower in the stack, we’ve failed in some way and needed to do better. <a class="gatsby-resp-image-link" href="/static/e67123c425d7c31ac2d4ca6be61fc19f/e95df/customizer-style-manager-color-palettes.png" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 214.44444444444443%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAArCAIAAAD3xz8iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAID0lEQVRIx51UaVBV5xlmpn/6q+2P/HCm6aSmjaltTKymNnUaTUwTM3HUKU4WY0Q0iQu1HaogoIiiIooBDMqi4EKChLogguwimywq3IULd1+595xz7z3LPft+ztc5FzR1OtNO+84z33zfO9/zfc/zfuc9KSAZuq5ruq4oiiTJoigJoihJsqZpoigpsiJKkrGWFUVVwb9ECgBAVjVV0wEAKIbbXV6nx+f1B+0uTwRGXF6/3e11uL3TDudjszUYjszd9D05wcuyqgEAOF5gWJZhOYblFFWd2/N0q6Zp4NlIeSpbB4BmmGgsDiHRCAyLkgT+W6Somq5quqLqsqppOtB0oAMDc/n/jBReBryk85JmQFS5JFhRZYxRYwWVkzRO0nhZ/zeAFEEBogYkAEQABABkABQA5sxpSQmKbkBQAK8Yo6A+gQJSRACoKTtSeYEeHxUa64L3B+1VF1ta2vKPHrt5qyXv0GGnxztpscoqEGWN5SVOkDhO4DjRIEsA4F29/k+2kt99I2btsNVcGNqSduJI4bLfrTiUX/Dqa689GBm929GhaEBSVIbhWI5jaYalWYM8p4RXAa8bo6gDUTWUK5qhVtaApAFR1Q3ZSZ9PPT8hK0BOGpN1IKlA0ICg6JJmLFVgnDW3R1SNg+Qk5pLzZIziEJyMETTJinMZTtajJBuneEZQxWSG5GSMFjBaQGmB5GWDzBv7QARNOHxhdxCC4iSfLCwjaoEo4YUxnBUNXwqAcMYH434E90fxaIITVJAiKTrMyGFGgRgFYpVZSkIYSVI0UdEN20addFHWREWT1fmMatRClxQ9BfyvoevPNAbLchhOYDhBUnSCJGmaiaMYzTAohpMUjeFELIZSFIXhBEEkBEF8pjEomoFgBIKjKIpDMBKLo7DRGwiMRGNxNByBoeQ8AiOzYWjuRC15ebIlSSoYCsdRDCcSsRhKEAmcSCDReIKkaIahGZZhWCJBkhRtgKTiKKYmWzh5M0nNhsIETmAohsDRBJFA4ygCI6qizLkET0zOeTYGTfu+n/+/MMgChlJTpoTFRFhMhHnSmFgtiSkLabOQUxba6WD9XsbroT1uyuOmvR7C6aRCIaAnn8pcWjy5a+vUkYO2vCzHoWzPkVzXsQL/yULfiQL3yWMPPtzYuvylnjcW31y6qHn5kv633+hcuezuhnWKKBrkyZrKSGVVfGcGM2lCZTmKYXGShFEMisV4AIKXKprS36raseHa7ve7NqzuWrni3urlHevXKoJgkEfOnQuUlkfTtzMPH4UpyuPz+2fDbr9/xuFAeSlwpWK443qTDXt8v6lx05rKpUubF7945723npCLi4a+SLPk59gKcoMlhYGSQm/Jcd+Z44GyE76yIvPuj+2PB/r8wqOhttYPVjT+6hdNi3/e/M6b82Q+isBDA+HB/ujwADoyiI4MxkeGYg8G46ND0fFhwjpBUwmYFKgEyjptlNVEmCcYj3O+2hfaH39UfHNf3b3PK+5uK2/dVt6aXt62/WxbenlbennrttKWbcXXdxQ3bTxY/05u/dr8hrdz6tNKmiVZNcgFdZ15Ne07S250jM14Q4jdB9l90LQ3bPdBM76IIwBZnEFXCOkYnfmqoffrpr6vGnqu3B1TVM0gn7s5nF3V9sJHJ9tHbBwWQcIBCkPikSCOhOGQl4hFAq5pNBoBQMfCvljQDXlmJJaal51T3bq37MaBypa6ttG24anmfvPtAevtQevtQUvzgLl5wHx70No+Mn24tj01/+qnhQ2bDtfvKb0pSopB7prwZl3oOXlt6NDlvrzantyLPXm13Xm13Tm1vbmX+nLrenMvduXUdGTXdOyr7tpf3Zl5vr24cXBethR3y/5+CRpOuAcJ97AEmbGABfeapOA4Pd3LTPdRsENh41TYyQYeyzEXEbDykB2A5OcZunc+eKNo9nqZv6/BbR1DXWNB21hw6hHhGne1VAwf3dB56ehEz7dd9aX91fttd8pun83qvlIM9GS1kfFv4LMnw2+uTdwbsAfDM1N2p8Nts9qc3jATnLafeX+keq+16ejE5WxLdfrknarO07t66s9oelJ2rK8cafwayT9IPhyKRUKw24H4XBGnDQkGEqYuT/7LjuJVrlNrvQXLLEVrpq7+9dGp1LGKTF3iDDIxejV0bSdyKzN6bRfckOGoyPCUb4cq0wJnPzcf2eIuSQ2VrofKPvCXf+i5vAe9tTt4IW3m3D6gJLuKpNUZJ+uw0zGXB3ObEbfLMUPaXSLkx6OhGB6G0NloJBSFZ3E8AuMhP+IPw1Fen3/nM/yyj8WduYmBosKxE+k9x7OrCxozNt/YvKruL6tzVr1SnvWHtLJNm/euOrDnlXWfvPzeL184/euVnbwgpwCg5VWCibob4NRawXofxvCIz87xONZ3ruej57q3LD268VDhu1tvpK8/sjo1c8lvUxev+8GCOwuXdfG8IVs7VA3MtVfA0dc5U7/FO2symb1xQZhsTBz4cSJ7oX7see/fF/0j9Tela5acWbvi9RezUxZMv/T7UY5PvnPmcebdz+Knc7qGi/cE6g+g3x2IXz+Mn18v5D4n5P2Myn2eyFow9tmPKv/4w5o//fTPizan/KRr4attvJD07If0lmHQP0oFJ/oIWx/rGGRnBqTQuDJrViCTGDZxQVPCMxGcGodmHiC2wUcPPRNTmK7P/XrdftDWDVp7wdVOpbRKKt0nHcmgd2RINzOFoi/5v+3h92dyX34h7ciQ951SS78Fl6+D7n6ga/8EUhVF9ZKIqrUAAAAASUVORK5CYII='); background-size: cover; display: block;" > <picture> <source srcset="/static/e67123c425d7c31ac2d4ca6be61fc19f/89b46/customizer-style-manager-color-palettes.webp 180w, /static/e67123c425d7c31ac2d4ca6be61fc19f/97ead/customizer-style-manager-color-palettes.webp 360w, /static/e67123c425d7c31ac2d4ca6be61fc19f/c052d/customizer-style-manager-color-palettes.webp 592w" sizes="(max-width: 592px) 100vw, 592px" type="image/webp" /> <source srcset="/static/e67123c425d7c31ac2d4ca6be61fc19f/96042/customizer-style-manager-color-palettes.png 180w, /static/e67123c425d7c31ac2d4ca6be61fc19f/7a322/customizer-style-manager-color-palettes.png 360w, /static/e67123c425d7c31ac2d4ca6be61fc19f/e95df/customizer-style-manager-color-palettes.png 592w" sizes="(max-width: 592px) 100vw, 592px" type="image/png" /> <img class="gatsby-resp-image-image" src="/static/e67123c425d7c31ac2d4ca6be61fc19f/e95df/customizer-style-manager-color-palettes.png" alt="Color Palettes interface in the WordPress Customizer" title="Color Palettes interface in the WordPress Customizer" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> Let me walk you through some of the technicalities of our current setup. <h3 id="up-up-the-abstraction-ladder" style="position:relative;"><a href="#up-up-the-abstraction-ladder" aria-label="up up the abstraction ladder permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Up, up the abstraction ladder</h3> <a class="gatsby-resp-image-link" href="/static/bc4caf9ec5cb47a07eed965f54d50977/03de4/style-manager-styling-stack.png" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 102.77777777777777%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC20lEQVQ4y5VTTU8TURTltxlXrkjYCDFqMCobAlEjRAkhaKgoidUFezYsVLZqTMQPdhKiMWhKq7R8lJlO55OZ6bzO+zjmvceUDhQSJzm979177um57830AYAQAowxBYD/F7I+qSGfPvnDOQfjDIxyrL+P8Wk5xJdXIdbehFhbiY7jSoSvr3VtdTnExocYnGszUqMjyBiHEBwpEXg5YmPyoompSybmrzRRvGnj2dUmirdstZ67bKnaxAUTi6MOBD8yxHjeoQawtU7w/WMLPz8n+Pa2pdYSP1Z1XH+na3Jd3iCQk2b9+ZHV+Z1+QpfDMRhckyHyeU8OZz0Es4TgQo0ehxSu48EyAhj7noJZd+G5PuIwVRzJPdmvBKMoQrvdPvo/Ac4ESCzgGCkOHYqgC66ZIom54khuT8EgCHKCNJUuGRyDwKwRWHsEjR0Co0rgmkTVJKcz8nmCAgLywjw3gmk6sBo+GqYH03BhGh4ODmxVkxzJzd7hnGCapqCUqgJNKGgrBUsoIitF4lK07BQth6p1bFFVkxzJPfViZwvtXcAvVGEP/4I7vgX7fhnOvTKcrqhysnbjN/xH2xDto8sU2m1fZwN9a97jbTSvbcIeLcF9UIE7UdZxsgJ36g/chxU4YyU0r2/Cm/mbE+yMnG2UcMohEgZ+SMEMAnpAQPcTjTpROVnjLaa5Xb0dwW7Las0EBOHKsRLcSVSUYoIK5Uowcaov7/CooEB5xyGz2xpNGVMwk4AHVHFyJs4aOXMoG2mtdTyudLkrx05A95Kcw3NGPr5wwQAetzXCBDwi4JHeixOffc+Rs2S4tARvZgb+kwL8whz8p/MIXhQRFJ/DX1jQuUIB3uwsDhcXIZKk98hZwpueRqO/H9bgEKyhITSHh+HcuQtnfBz27RGVswYH0RgYgDM2Bh5F5wsy0wStVkF3d5FWKhqlkka5rPayRms10HodgvPeZ3jyLHrtz3q6z/AfQc8u//wnTWYAAAAASUVORK5CYII='); background-size: cover; display: block;" > <picture> <source srcset="/static/bc4caf9ec5cb47a07eed965f54d50977/89b46/style-manager-styling-stack.webp 180w, /static/bc4caf9ec5cb47a07eed965f54d50977/97ead/style-manager-styling-stack.webp 360w, /static/bc4caf9ec5cb47a07eed965f54d50977/fb07f/style-manager-styling-stack.webp 720w, /static/bc4caf9ec5cb47a07eed965f54d50977/4c141/style-manager-styling-stack.webp 904w" sizes="(max-width: 720px) 100vw, 720px" type="image/webp" /> <source srcset="/static/bc4caf9ec5cb47a07eed965f54d50977/96042/style-manager-styling-stack.png 180w, /static/bc4caf9ec5cb47a07eed965f54d50977/7a322/style-manager-styling-stack.png 360w, /static/bc4caf9ec5cb47a07eed965f54d50977/16546/style-manager-styling-stack.png 720w, /static/bc4caf9ec5cb47a07eed965f54d50977/03de4/style-manager-styling-stack.png 904w" sizes="(max-width: 720px) 100vw, 720px" type="image/png" /> <img class="gatsby-resp-image-image" src="/static/bc4caf9ec5cb47a07eed965f54d50977/16546/style-manager-styling-stack.png" alt="The Style Manager styling stack" title="The Style Manager styling stack" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> Considering the stack above, I am going to go from the bottom to the top since that is also the direction complexity increases. The first step in departing from the granularity of HTML+CSS is to have individual color or font options control multiple HTML elements and various CSS properties. By grouping styling behavior in this way, we can reduce the number of available options, while creating a flow of information (color or font values) more aligned with each design intent. All of our (Customizer) fields are generated dynamically by the Style Manager system via a configuration. I will try to better explain this with some actual pieces of configuration from our <a href="https://pixelgrade.com/themes/blogging/gema/" target="_self" rel="nofollow">Gema WordPress theme</a>. So, rest assured, all of this is battle-tested, production-ready stuff. <div class="gatsby-highlight" data-language="php"><pre class="language-php"><code class="language-php">'main_content_body_text_color' => [ 'type' => 'color', 'label' => esc_html__( 'Body Text Color', 'gema' ), 'live' => true, 'default' => SM_DARK_SECONDARY, 'css' => [ [ 'property' => 'color', 'selector' => 'body', ], [ 'property' => 'background-color', 'selector' => 'input[type="submit"], .btn, .search-submit, div#infinite-handle span button, div#infinite-handle span button:hover, .more-link, .sticky.card--text .card__wrap:after, .sticky.card--text .card__meta, body div.sharedaddy div.sd-social-icon div.sd-content ul li[class*="share-"] a.sd-button:hover', ], [ 'property' => 'border-color', 'selector' => 'input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], select, textarea', 'callback_filter' => 'gema_color_opacity_adjust_cb' ], [ 'property' => 'border-color', 'selector' => 'body div.sharedaddy div.sd-social-icon div.sd-content ul li[class*="share-"] a.sd-button:hover', ], [ 'property' => 'border-bottom-color', 'selector' => '.singular .site-header, .attachment .site-header', 'callback_filter' => 'gema_color_opacity_adjust_cb' ], ], ],</code></pre></div> Above is the configuration for the main content body text color field. Focus on the <code class="language-text">css</code> entry that contains a list of CSS “targets” for this field. What this means is that, in the frontend of a site, this field will produce a set of CSS rules using its current value. Quite naturally, the list starts by targeting the general <code class="language-text"><body></code> color, but it soon follows with more specific <code class="language-text">background-color</code> for buttons, cards, etc., <code class="language-text">border-color</code> for buttons, input fields, etc. The last item on the list targets the border of the site header. What is different about his target is that it also has a <code class="language-text">callback_filter</code> entry, thus allowing the contextual alteration of the final color value (in this case, its opacity). This is very useful for maintaining strict visual relations like a certain color contrast between a button label and its background. One could take things much further and use callbacks to enforce certain global goals (e.g., automatic accessibility checking and adjustment). While it may seem unwieldy to define and maintain such lists, we’ve learned from experience that this is the right balance of abstraction and flexibility that allows us to closely express our intent. It is a chore to create, but you only have to do it once (if you don’t change the design). Like any configuration, this is also passed through several WordPress filters (hooks) to allow other pieces of software (theme modules or plugins) to change this styling behavior or simply add their specific targets to the list. The system can expand and adapt with ease. At one point, we’ve even considered the idea of creating a sort of scanner that would take in the output HTML and CSS of any given theme and determine the first draft of this configuration. This way, we could “bolt-in” our Style Manager to any WordPress theme, with less work on our part. It remains at the drafting stage for lack of priority. The second step we took up the abstraction ladder is aimed at establishing relations between the previously configured options/fields. This is needed because, sometimes, certain options need to either be kept in sync or one needs to control others. For Style Manager, it is the latter case: having options of a higher authority that would pass down information to their “slave” fields. We called these “connected fields.” <div class="gatsby-highlight" data-language="php"><pre class="language-php"><code class="language-php">'sm_font_primary' => [ 'connected_fields' => [ 'header_site_title_font', 'blog_item_title_font', 'main_content_page_title_font', 'main_content_heading_1_font', 'main_content_heading_2_font', 'main_content_heading_3_font', 'blog_item_meta_primary_font', ], ],</code></pre></div> Connected fields is a very simple and direct way of creating flows of information, mostly in a hierarchical (top-down) manner. Right now, the receiving field doesn’t have much of a say, simply accepting the information and making it their own. It will sanitize it to meet its sanity settings (as in the case of font sizes, weights, etc. ranges), but that’s about it. You could introduce entry filters and do all kinds of processing, but, so far, we’ve managed without. With intent-aligned individual options and higher-level, connected ones, we can create intricate scenarios that manage to control the style of a whole site in the safe, consistent manner we are after. With these fundamental systems in place, we can move up “in the clouds.” <h3 id="style-palettes" style="position:relative;"><a href="#style-palettes" aria-label="style palettes permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Style Palettes</h3> Creating a certain color scheme or font pairing implies a series of design decisions that are quite detached from the underlying system of a site. What matters more are higher-level concerns like mood, character, brand, readability, strength, courage, etc. Thus, a style palette should be as independent as possible from any one theme, trusting the underlying system to know what to do with the provided information. This sudden shift from an inward-looking to an outward-looking perspective has allowed us to imagine workflows much more in line with the “philosophical” mindset of style palettes. A separate sub-system of Style Manager that could do its own thing, with the promise of delivering its output to the rest of the system in a certain, agreed-upon way — a contract, or API if you will. We’ve resisted for quite some time to introduce such a contract for fear of lock-in, of losing adaptability. Despite our efforts, there was no getting around it: we had to decide on a static API between palettes and the base fields, one for each type of palette. In hindsight, it was a non-problem since design always thrives with the right amount of constraints. <h3 id="color-palettes" style="position:relative;"><a href="#color-palettes" aria-label="color palettes permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Color Palettes</h3> <a class="gatsby-resp-image-link" href="/static/54a2d98f47c38e21a6d240012f4a04f4/e95df/style-manager-color-palettes-list.png" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 189.44444444444446%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAmCAIAAABLWSz8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAIR0lEQVRIx02UeVCU5x3H+at/tNNOp52mOTpjM6mNia2paW3SJIUYFU1rNBqPIRIwiVira6ko1AAKHijgsRIOAUEhLALCcu6CCwssLLAnex/sfd/nu9f77r7H0y5sO5155plnnpnPfH/PZ77zZAEAHD6IozAL1Vau0sxR/G+Z/u+cXmKtXap3SPUOkcZmcgUAAFkAgK9rB/KqKUX1g6QHIxeaacWN48Xfjl1omihuHP9nZqeVNE1kn2/5zZfkt4saXv/ibv7NpwAQWSkUq2yfrHrM+LS8S6Kx2C1Gl9PpcbuMBr3L6bCYTU6HXa1SBgP+YDjCX5WuSuRcgcjp9qWT12H6rZ7ZY1UUlckFR/zhoB9NwpGgD4lDQZ8bjkEhn5tAEX8QYnOEq1IlmyOwu7yZsU/W9B6t7Pz6du+ZO/0k8jDp/tDZu4Ok+9Sz9wdJZOq5e4PnyNTzZOp7ZxreKLi77av7r+XVnrhOycBGNzQvNi5JTQsSI0usmxcbWBIDS6xniQ3zUhNLal6/N3BVNp7axlNZOUqLxuZPwwQAfn4ftNIckn6nY7aauUNB2YiSQ7dzJ0K8fuvIbT21Vssb85llqrlB82ynQzghmup2iJ6vJxO4gVbnpLTYayo8Yo7dZvVbdB6ryWc1hj1OM7Nn+dpfnz+qWB1vnmq/xuksEw0/GKg5zRpsXU9OpdxLTd7btxx7DvqFEqnWJFdqFGqdVK7WWgNR9Yy6NkfUWqTuK1e05MubPheONE5ezxdMdG0kE6a+i4auG5aGf3kY7W52n5HeY5rssU51ueaG1lpK5KSXlGVvaC5uVhW/KqzK1rQd5ZT+QUguBgSaFoYZZlLChiS/KcJuCbHbbROtXlpDhH7bP3zbNtQQYnWEZ1uiCw+DrMeQaACV9UCLnSEhPWObtkiUPQRkCiLu7xdTyAtPh9s7jc3diaHhAIMqovfz2ENz9GcrtAExs5cx3T3U3ckbZYY3YOL4hdiNW4aRB9OW0Q7TVJdm7LtV2kzz328Uv/tl2Y5DWze1l/1uV/uRQ2e3fV748rZdL+dmfe/hOx/SAcCyCBQl3QOBjlJw8VVIwRXrLHKlwh2OxRk35EXfV5399dSZvJ7jf+nKO1iVnVv+zva9b57MenFx16Hldds4XlCZWn0yGCAX+0XzOpnAIln2mPXx0YuJ0h8lSl8BVT/2Fv+M+slPGnN+fvej3/7yxftZPxC/t49LbLy5rC6Se46ormSza0+aH5O8vcVuSnG4Ox9+eBDpOAy1HvI3fbJalfv0dA71/J6reSVv75w7fYGbEYZEEb/GH1Y54goVIuInJWxkZQ4RrqAWPqpYTsoksFKTEMviYhmiUuMGFazTId5App7o+AIxxMBGZtAno3hTI9ZWhtaUJMou4rTLSF1J7MS+eO7W2Adb4r/fAe87iZypTlU1p0aY62PjWGKCh7AeYMNHYtZVk9liMelsVqPdarRo13xxGG68jBz9IfK3TUj+DqSwKFlSk6xuRvomCRzPAjgK800o5w4Y3h11SSVG45rVoPc4BWtqxZrOEkvBlJvw0c3I4Wz43S1wzsfIEVIyrzRZ/ZAgiPSb4c5nsa7+2CgtTp1MUYbhtrbozarI5dLk2NVIX22M/BFctSlx+nTqch38/n749VzkTwVIcX0GxrS25IoMlWmBSI6vrKIsdmpiCpuZxA0zuGIRky+gtuWUgouGY6jdhS4I0BUprrVmhCWt7UB9Rm1sPmVaPutYIDXVkkouXKoqr627UV5ZIlUp0tNhaCoZSKHhKEgFCRTCkunkNMw9jnE+C6nr+aqmFbeeL+Xz2AsC7pJCyis4vmeaPpiGowEs4cQSTiga8EWgABTOwCnRqaTsEi45BWT5fpNJo5Cr1QqDXhuLxb65VDQ7PZaGE2EM9mKwN5IIB+LRUCzy32T+MXRpn0N5b0TeMWqXUp+PUgd6J8YGZxljxw68z6A/AwDEo/5U3IbG7MGo3x0J+aBQRljKNgQU5WuajhKT+LKDX/G4teLKtev19U1tDd823tMZjAAAFMMIPAUAhgIiCQBKEJl6YjiRxAgcxYCRC7g0IGUCBZMQ0nHJDGFejpuZfuO028B0aGc0IpqcOyZaHFCL5ze+IZCAnImwFA7Mw8pxZLk/yuoNznYF5ijmzhJJ2RZF2w7RwG7+s71znTkdV94il7xZeeKn9y7tXK8ngcYiUQy6BaAPwtCqRGdXW0wKvU7nDXpF0+Krf1T3fqwYOywc/JTxKJfReWCQ/GFV4S8e1xzeSMYiUBAJ96HBsohfZFxTWrUyi05mtxmt8xTRze2yvl2C/t2LT3ZOtWazKPubL712veDlJ7c+w9PdBgCO+SIBq9eu9hqXwrKnAeYdD6POM3PXOPAPzchXmhmSjv2Naub8ykDhZMex1so/t1bk9DedI4h1YSkUj8HJWAKOxuFINBqNRnweu1kniEahFAECQZ/Fpjdb1W6PNRGPhaBwKByKxRMZ22Y/qvfgZj8w+VBbAHNAQOeE2jqu8XhUoWB49xe7Nu98YfuBl9rojGlNSm7HhBZ8zYWCdEkIzOwHQV9X0FEYjyqdLpfDYbDbjaFwmLvcde3cCwXn92cX7q179KCWoaudNigdgGPAFHaU2IAtfhDy1odsOeEgR7NmsJqNWrXK5fKblZNdNb9iDBSNrBiUbpxE4dLlkNwBeEZc6UA3GkYY3KjB4TU7LJ4gQpsfvvOo4m7HlTut1cyefPn4W4Khrb19N1sZuj6uTWIjhGacY8QzyeneInggggejRCQBBHL+KPPpMKOPOtFtU9OjXi7kWnI5JGZPJImCcBwPx/FgDI/C+H+E/Rt7CLj2bqyzmwAAAABJRU5ErkJggg=='); background-size: cover; display: block;" > <picture> <source srcset="/static/54a2d98f47c38e21a6d240012f4a04f4/89b46/style-manager-color-palettes-list.webp 180w, /static/54a2d98f47c38e21a6d240012f4a04f4/97ead/style-manager-color-palettes-list.webp 360w, /static/54a2d98f47c38e21a6d240012f4a04f4/c052d/style-manager-color-palettes-list.webp 592w" sizes="(max-width: 592px) 100vw, 592px" type="image/webp" /> <source srcset="/static/54a2d98f47c38e21a6d240012f4a04f4/96042/style-manager-color-palettes-list.png 180w, /static/54a2d98f47c38e21a6d240012f4a04f4/7a322/style-manager-color-palettes-list.png 360w, /static/54a2d98f47c38e21a6d240012f4a04f4/e95df/style-manager-color-palettes-list.png 592w" sizes="(max-width: 592px) 100vw, 592px" type="image/png" /> <img class="gatsby-resp-image-image" src="/static/54a2d98f47c38e21a6d240012f4a04f4/e95df/style-manager-color-palettes-list.png" alt="The Color Palettes list" title="The Color Palettes list" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> Each of our Color Palettes is just nine color values assigned to the nine entries we’ve identified as being very much sufficient for all of the use-cases we’ve encountered in our themes. The fact that, throughout the years, we’ve consistently experimented with each new theme came in quite handy. So, despite a limited portfolio of themes (20+), we covered a lot of ground. If the API we’ve settled on would withstand this amount of variation, there is a high likelihood of being just right. The nine, semantical color entries we’ve come up with are as follows: <div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">- primary - secondary - tertiary - dark primary - dark secondary - dark tertiary - light primary - light secondary - light tertiary</code></pre></div> As you can see, we have three categories (primary, secondary, tertiary), each with a main color and two dark and light complements. We’ve thought about a more nuanced naming (like foreground, background), but we’ve quickly settled on this more abstract naming since the way each theme uses these values varies quite a bit. Now, even though a Color Palette provides the nine pieces of information, a theme is allowed to decide which of them to use depending on its design needs. Rarely a theme makes use of all nine, at least not without some help from the Style Manager system. <a class="gatsby-resp-image-link" href="/static/4b9c142ed1c6c3817caa360447767f9a/e95df/style-manager-color-palettes-filters-controls.png" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 170%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAiCAIAAADQyG7qAAAACXBIWXMAAAsTAAALEwEAmpwYAAAE5ElEQVRIx61UWW9TRxT2D+kvqfrQPlbiodA+FZDaUqFW6gKVUNlp0wVKpVIKJZASCEsJ2SBpQsOSEJaQxI5ix4kJBpvE273X19d2ru82M2e2amwScMpLUY9GZ0ZnznfmzNlCmEkHsZJDMHCESA2Lqi9sH5edwPZJxcE1xG3EMJWISgQCURGAWojKkJSy5cKd1zYfX47elhNn93cVNraWN21veX3D1vd3Hntj8569VxL7+uaklIhQEjgY+ZbLln1lLiSkjDw2OkYSgWUwLTmVDm7MByMTsb4b92+FF66MTk8+XZ5MVxiXCDjCBBFaQ9zFXL0cUEm5VIa5DITkQgopuVzhdQkXMmi43bxCiEofhE8EYZJQpeQR4WFlW8kbi6gfYiYJk7h+wGwFHIBYNCrJvPm4YJZsHzMJXDoBfrKYS2c1x8dUSA/zXMlOadaiUUlplmn7hMtQI3S2DxUXV1xcCygCUXRp1sZpy3tiOktVZLh0Vcf2SdUjDbWQEOpjawgzlRLCJRESMYHYWpUGSqWKUQoAlFJCFAcAxihnjNcvGAXOFEFdCQDEiikFLlnlXL5glctmyapUqwXdKJUrRdPKF/SiWdIN0ypXrLqkaJZKVplx3gTOZPNV287lNd0wjaJZNEu5gmaWrFxeccMwNb24mMllsrl8QQegz8FCCMYY5w3vGgde3/mqnHOOMVG0xu1nMZD/mUIr0ROrnPPn5zVXdS7WvvzO7o6DHcMyPhALx75oSxw62bnh4207f+nYsvdoX9+VyXBESgkEU+T6CKoeNBx9Bm4bnLoVXpDaXCFb6H2gjz6Itl/qGxyLdA7dnZ2NL2UyKqOMMsCEMp+wtX9+BQo13L98Oz4+tyiNBUMzB2ac8Uj8cu/AyL2pgetj98fHk8knUkrKGKNAGce0+eW3vjq979SgnLkUGY++d7Sw62Drm2+v/2RHy/oPv9y9e09Xd48CE8xJgIF6qlxf+LOLiE8oACGUuZgFBGpe4GHiBtjHGBEALoBxYJwwDvyFaJcDmrWJ4VHdBcOlugNFlxouFD3FDY/pLugO0R3QHGK4kKuRkgq4DGHGCy6s23vpmzM35WzP5ETi3ePLB473rvtg2/bD5zft+q3lr0e9kZwaNZhQ5DoBrQU8a2NMeYhxoblw4lr0+nRa5OfTS8Wz4/71iUR797X+u7E/hyduJMxopkq5cDH1A1xDrOzRjI0ZF6FG9wohfS41KivAmZQ+Faw+1UCowbZMeMEhuguaS3UPij6g+tx7FrCesdmJuafSWioZ5t1YfjL6sHtoZCw8P3hnOpl8rOmaqk3OBCWMcQLNqdr8Q+eRzlFI3o/H5g9dnPr1XP/G7S3ftnZ/frB9aGhoeiYqpSQEE+T7mNgebkrVK1ZYYwuwGkGCq74lQIFShDEBqiJMVWk1WmqVmsCf/XTuZPdNOxVLzCX+6Bo5ceHqRzu+P9TWtePw6eG/r81EY8ptjHEQIEQcDzW5Pf3waTpngFO17Vo6a6Qz+alo4lE6G1tI67perVbrfa6KW01C+r90VWM739l3+96Dqp7LLmVG74Rvjoz93npqYGj44uWeSCScSqVUY1AKaoQBQrgJ/PWBH89c6NRTD+OxePvF/pNtZ7Zs/fTnI8d27f/uan9/JFKfJAAYBRgT1w9ekqp/jauXC1ej/Q8miknN2i8qgQAAAABJRU5ErkJggg=='); background-size: cover; display: block;" > <picture> <source srcset="/static/4b9c142ed1c6c3817caa360447767f9a/89b46/style-manager-color-palettes-filters-controls.webp 180w, /static/4b9c142ed1c6c3817caa360447767f9a/97ead/style-manager-color-palettes-filters-controls.webp 360w, /static/4b9c142ed1c6c3817caa360447767f9a/c052d/style-manager-color-palettes-filters-controls.webp 592w" sizes="(max-width: 592px) 100vw, 592px" type="image/webp" /> <source srcset="/static/4b9c142ed1c6c3817caa360447767f9a/96042/style-manager-color-palettes-filters-controls.png 180w, /static/4b9c142ed1c6c3817caa360447767f9a/7a322/style-manager-color-palettes-filters-controls.png 360w, /static/4b9c142ed1c6c3817caa360447767f9a/e95df/style-manager-color-palettes-filters-controls.png 592w" sizes="(max-width: 592px) 100vw, 592px" type="image/png" /> <img class="gatsby-resp-image-image" src="/static/4b9c142ed1c6c3817caa360447767f9a/e95df/style-manager-color-palettes-filters-controls.png" alt="The Color Palettes Filter controls interface" title="The Color Palettes Filter controls interface" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> As you’ve already seen in the graphic depicting the styling stack we have set up, choosing one of the 20 or so available Color Palettes is just the start. If a user wants to push the overall feeling in a certain direction, he or she can move on to Palette Filters. These are a selection of color filters that each play with the lightness and/or saturation of the color values; some are gentle, others are more dramatic. <a class="gatsby-resp-image-link" href="/static/28087b6c5656f63134b486733e3ed377/e95df/style-manager-color-palettes-customize-controls.png" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 190%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAmCAIAAABLWSz8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAE9UlEQVRIx61VW48UVRDen+PP8IUYHzTGB4PRFwNuQkKixPgAD0pAjTHxnRBJQAiQFSWiQGDBBYQILAI7zMzu3Lt7+n493T3nfjPdPQuroFkSK5VKdZ3zddWpOqdqAXNNhSI1I66I1IQrJhTlislqiQpNuMZMYaYxrxgx1SgLWuuvz9x6ZfFo1vpd3zv1xY/u7mPJh/u/2fH+R7s/P/ra4qHDv3S/vNDWWmMqKCoJhlHBM8hJA772aPL10r2Zayjj4dVWefYuXLp888iZC0vL94+eu3alE15t+0ppzCQhBBMGkCyIrDwjrrnU1Y+lRkpLVem1mCsVqypUxHTFzRGasDHXsF6gQjNRmWZUQ6ogne9AXFVIronQVFaS1HIORkwZfjqwo6ETRTmqloUGkA3saOwlADIiNKLSC1PD9i03MGw/BiWTeqGOR6UlDQEKcwQgaywzIpOCRDkqsCBcx5APw7LvZaOwHPi5kUDI9ILcPOdTUrVFqWef1Zm5LJiacV1uSi5VlW1Zk6ipUZWqZGNs1pSS8/QpqaVs/luB4yQ1rGmcpGGc+EEYRnGcpLbjJWkWhDEAue1WepSkfhClANiuL+vAKnAGgOP6QRh7QZimYGo7U9vxg7DCJ+nEtBzPt13P9f0wil0/sF2PEDIHR3HiuL7nh54XVEoQEkIY45QxLgREiBBKWUWc80aTdeQVeAYhyAsI4QzCNAMQIr09WnihVSn1EuBmt9oC2g68ApuWvdbqdLoba612rz80TavV7uRF8R8hqKdgTGlaohwRAEkGcVLitEQl4TMmCyJmTCAuZ0xgoaq7LTUWSjSlUkrFWDgATqLMiPN4hg1A9l4df/Brf++V4SfXxouXBrsu9nsJctJ84KdGlHkF8iGTSi0wqQLIrSD5ozO4vz4a2Z6RwTeXOm8sdd77eePAivHOT+s7TrfGgEz96EFv8qA37lluiAQVsi4VFSFkgKmMyBQLO8e3LXDTzFcM8JuR3TDBnWk+zQmgMmcKMBVCDqn411K9RJ1tx2uv98yp3e72+sNJq7Nh2J7UmgrJpGpY1rVrXpjamu2ynAVhXBRlnKRJkkVRMivL7XoGVIZYBpBFWCREOpB/e989eMs8fNs6dNv67Kb51R1rmOJgRqcAuSVxSxojXoG5VE5RPRHDC//sjTkXCeI7z6/vPL+x5/Jwz+Xh4sXB2+e6TkkF56vrw9X1oVbKLek824BwpyB2juyCeCU1AT75JDjy0Dv22Du25n/32D/RCsYZDiCzC1w7pwDz/yPbrh8Ylt0bjr0gsmzXnDppXm7OmjlzqUTNjfKskwRBaJqWYVi+H1iWbVnTsn4V2/KMhI6pzoXOuM65dpF0ZjyALEQiwiJCfJyRU+3gRCv4vhUcbwXH14JRhiswE9KHzE/Ag43RandouH4IWUFFVpSr66OH/UlRlnbJXj259tYP3V0X+7sv9l8/2/70+njuOUHczOAgBD0fmGk5zoiZE68kwyjvBcAtcC/B+1cmB25M6uKbB1Ym1yfZlk7yj8n2nGW7PUy9yCL/Plae3W0hqslQ91nBBX9h6+FS3XWKS6P0+iSbAIz4ZuvtDUatdnet3XnUaq896TLGt8Kakq4YYMfpJ++e39i3PBJKByVlop5Vop5JSqlmWD3Xhis5TPG+5dHHy6ODt8wpQNGMSPUy11MqRaUiXEIqmhT8Bc70VWMer2tVAAAAAElFTkSuQmCC'); background-size: cover; display: block;" > <picture> <source srcset="/static/28087b6c5656f63134b486733e3ed377/89b46/style-manager-color-palettes-customize-controls.webp 180w, /static/28087b6c5656f63134b486733e3ed377/97ead/style-manager-color-palettes-customize-controls.webp 360w, /static/28087b6c5656f63134b486733e3ed377/c052d/style-manager-color-palettes-customize-controls.webp 592w" sizes="(max-width: 592px) 100vw, 592px" type="image/webp" /> <source srcset="/static/28087b6c5656f63134b486733e3ed377/96042/style-manager-color-palettes-customize-controls.png 180w, /static/28087b6c5656f63134b486733e3ed377/7a322/style-manager-color-palettes-customize-controls.png 360w, /static/28087b6c5656f63134b486733e3ed377/e95df/style-manager-color-palettes-customize-controls.png 592w" sizes="(max-width: 592px) 100vw, 592px" type="image/png" /> <img class="gatsby-resp-image-image" src="/static/28087b6c5656f63134b486733e3ed377/e95df/style-manager-color-palettes-customize-controls.png" alt="The Color Palettes Customization controls interface" title="The Color Palettes Customization controls interface" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> If a user is still up for exploration, there are always the Palette Customization controls that allow you to interfere with the way color information from Color Palettes gets passed to the theme defined controls (through connected fields). The four controls (Coloration Level, Color Diversity, Shuffle Colors, and Dark Mode) all alter (one after another) the connected fields of the primary Color Palette controls, thus changing the destination of say the <code class="language-text">light_primary</code> color to be like the <code class="language-text">dark_primary</code>, resulting in a reverted color scheme. Think of each of these four controls as a series of prisms that each diverge, split, or converge the “beams” of color information onto their targets. With just these four “layers,” lots and lots of variations and combinations can occur. Considering you can always go back and put on a different Palette Filter, or even a totally different Color Palette, the fun is guaranteed, and safe. <span class="gatsby-resp-image-background-image" style="padding-bottom: 67.22222222222223%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAADkUlEQVQ4y0WS7VMTBBzH9390cpA87JGZyNjG0xgPhTzIg2OYiBZNHiaIE+EIMMKsI0DpgOOuwOK0pAuPF2FYGIcpluYlHULtAMWtDSEYtAFjPOzTMV/44nvfd5/7fe/zE8zPTPDg55s8vvMTc//asDsdzC7NY7XPsmIx43huZsVqxjU3iWvxGdvO55w/U0h4yOtEyUXEhEmIVkhQ7gvmLa0SwfLqCvZ5G/YFOxueVbY8q3jcLjy7veNhy7uJZ9vN6tp/uNad7LBFSWkJe/z9EEpEiKUSRGIRgUGBKJQKBCuLdh4/+YOpp5NYrVO+y2wvZpmxTDM5NcHoo/uM/z3OutuJ07XEjncDo7GQAP89yKQi5KESQmViRMIgItURCHofjtLxRStX+3q49UMfVzsbudbZwqPhG/z649e0tdRyvfcKbs8qLpcDr9fDKWMRAQF+yGRiQkMlvhYKg1DvAg3Dt+luvUh9WQEFuVlkapTIhCHUGI5iufsto9ebGRvpx725jsO5xObOBkXGQvz8XkMsDkEiEfoSEhL4Elh+9w5fXqikWp+AXC4lL1nDyVQtBn06y7/fYGGkm5UnQyysu5h1LODwrGGqrkQmkxCuCEMdqUQRccAHV6kUCHL6+qkuLeO0XktSTBiXq0roMObTXlXK5HefM9z1GWPDg7xYdzE4+5QRu5XqjxrI1mWTrddhKClCl5vjm+4Dxn71DWGKSKrejaP/Si2njiRwOllFfXkpqbp8IuLSaGrtwLWzwdCzGe7bLFTU15GWkYb+7Vz0R3PJ0mW/mqwsO0NCohbLeA83O40cTxRysTiJ9veLaThnIuVgCk2XWljeXGNgyswvdisXmhvJPJzFO4YC8k7kExeveSUlODCYOkMKrN1msPsshTlqPixOoqNWT3uFniNJ0dTU1zG7OMct8yR/LS/S0Pgx8Yla0jMPcVivIyEpnsC9/i+BGQejcTxshvE2ulpKOJGlwnQslrPHNJw3JHBIs5+aD2pZczv5c2KMuQUb5aYy5PtkqNQRREapduPdFRMbG+0VNJVmwHwPtpFPOJeXwMn0MCp1YVRlyjGlhvJemoLLlz5lxeXg3m/3+GfOQkWliXDFAWI00Wi0sURGqXljv9wbFaVCMFCZBbZuNs1d1BxPpvxNCQ/adNi/L2VuoITp3gImhrpZWF7EPD3J5rYbo7EIf/89SCVC31NLpSJvcPDeXcve/wEDs5afXvot1QAAAABJRU5ErkJggg=='); background-size: cover; display: block;" > <picture> <source srcset="/static/bbcfbe87d6d9ce928934fc65c3448e93/89b46/style-manager-color-palettes-customization-in-action-vasco.webp 180w, /static/bbcfbe87d6d9ce928934fc65c3448e93/97ead/style-manager-color-palettes-customization-in-action-vasco.webp 360w, /static/bbcfbe87d6d9ce928934fc65c3448e93/fb07f/style-manager-color-palettes-customization-in-action-vasco.webp 720w, /static/bbcfbe87d6d9ce928934fc65c3448e93/d1679/style-manager-color-palettes-customization-in-action-vasco.webp 1063w" sizes="(max-width: 720px) 100vw, 720px" type="image/webp" /> <source srcset="/static/bbcfbe87d6d9ce928934fc65c3448e93/96042/style-manager-color-palettes-customization-in-action-vasco.png 180w, /static/bbcfbe87d6d9ce928934fc65c3448e93/7a322/style-manager-color-palettes-customization-in-action-vasco.png 360w, /static/bbcfbe87d6d9ce928934fc65c3448e93/16546/style-manager-color-palettes-customization-in-action-vasco.png 720w, /static/bbcfbe87d6d9ce928934fc65c3448e93/c4a84/style-manager-color-palettes-customization-in-action-vasco.png 1063w" sizes="(max-width: 720px) 100vw, 720px" type="image/png" /> <img class="gatsby-resp-image-image" src="/static/bbcfbe87d6d9ce928934fc65c3448e93/16546/style-manager-color-palettes-customization-in-action-vasco.png" alt="Vasco theme Color Palettes Customization results" title="Vasco theme Color Palettes Customization results" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> Just some of the color differences achievable with the four Customization controls, applied on our <a href="https://pixelgrade.com/themes/blogging/vasco/" target="_self" rel="nofollow">Vasco theme</a> This is the point where we are today with the Color Palettes system part of Style Manager. General, hand-crafted individual Color Palettes, Palette Filters for whole-palette color alterations, and Palette Customization for novel explorations. We are pretty much satisfied with them, so let’s move on to a more complex problem. <h3 id="font-palettes" style="position:relative;"><a href="#font-palettes" aria-label="font palettes permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Font Palettes</h3> While Color Palettes play with simple color values, Font Palettes are orders of magnitude more challenging. This is because a font definition involves multiple values; seven to be more precise: <div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">- font-family - font-weight - font-size - line-height - letter-spacing - text-transform - text-decoration</code></pre></div> The logic of individual, base controls, and connected fields is the same as for colors. Each font control can handle all the different values, although a theme may choose to be a bit more restrictive with some of them, in line with the design intent. Some base controls may only support <code class="language-text">font-family</code>, <code class="language-text">font-weight</code>, and <code class="language-text">font-size</code>, for example. This is not an issue since everything is set up in such a way that anything not supported is simply ignored. The higher levels offer all that they can, while the lower ones use just what they need. The big difference for Font Palettes comes in the way you express the typographical design considerations behind a certain palette. We all know how much of an art form font pairings are. Well, take those simple two font-family pairs and couple them with the rest of the six values. Things get overwhelming, pretty fast. A better, smarter way would be needed to control all these possibilities. First of all, we don’t have two, but four font(-families). That is what our diverse portfolio of themes revealed it would take to make our designs happen, typography wise. So, in the order of importance: <div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">- body - primary - secondary - accent</code></pre></div> These are the four font definitions each Font Palette offers — the naming could use a little bit more work. The main workhorses are the <code class="language-text">body</code> and <code class="language-text">primary</code> ones, but more playful designs also need an additional <code class="language-text">secondary</code> font (e.g. for headings like <code class="language-text">h4</code>, <code class="language-text">h5</code>), and, quite rarely, an <code class="language-text">accent</code> font (think of drop caps, site title, some large background letters, etc.). Constraining the number of font families to four is hardly a constraint at all since most people use only two fonts. The complexity is still not reigned in. When it comes to typography, not all of the seven font sub-values have the same muscle — quite the contrary. Font-family reigns supreme. Font-size comes in a close second. The rest can be thought of as embelishments on the structure provided by these two. Thankfully, the font family poses a binary choice: you either use one or you don’t. That led us to make the font size the cornerstone of our Font Palettes system. We’ve ended up expressing the other font sub-values in relation to the font size. To properly convey intent, we’ve come up with two sub-systems: a curve for attaching <code class="language-text">font-size</code> and <code class="language-text">line-height</code>; a set of intervals for connecting <code class="language-text">font-size</code> and <code class="language-text">font-weight</code>, <code class="language-text">letter-spacing</code>, <code class="language-text">text-transform</code>, and <code class="language-text">text-decoration</code>. The need for two systems instead of just one is the result of the fundamentally different behavior of <code class="language-text">line-height</code> when compared with the rest. Line-height is much more structural in nature than the rest, and as such, it needs to be more aligned with the font-size. <div class="gatsby-highlight" data-language="php"><pre class="language-php"><code class="language-php">// Primary is used for main headings [Display, H1, H2, H3] 'sm_font_primary' => [ // Font family loaded when the palette is selected 'font_family' => 'Montserrat', // Load all these fonts weights. 'font_weights' => [ 100, 300, 700, ], // "Generate" the graph to be used for determinig line-height. 'font_size_to_line_height_points' => [ [ 17, 1.7 ], [ 48, 1.2 ], ], // Define applicable styles based on the font size. 'font_styles_intervals' => [ [ 'start' => 10, 'font_weight' => 300, 'letter_spacing' => '0.03em', 'text_transform' => 'uppercase', ], [ 'start' => 12, 'end' => 18, 'font_weight' => 700, 'letter_spacing' => '0em', 'text_transform' => 'uppercase', ], [ 'start' => 18, 'font_weight' => 100, 'letter_spacing' => '0.03em', 'text_transform' => 'uppercase', ], ], ],</code></pre></div> Above, you have the configuration for the primary font in a certain Font Palette. All the interesting stuff happens through the <code class="language-text">font_size_to_line_height_points</code> and <code class="language-text">font_styles_intervals</code> entries. The <code class="language-text">font_size_to_line_height_points</code> entry is a list of points on the plane defined by the <code class="language-text">font-size</code> and <code class="language-text">line-height</code> axes. One can define as many points as it needs to precisely describe the desired curve. The system will interpolate between these points to determine the function that will produce a <code class="language-text">line-height</code> value for any given <code class="language-text">font-size</code>. The <code class="language-text">font_styles_intervals</code> entry is an ordered list of interval definitions on the <code class="language-text">font-size</code> axis (the <code class="language-text">start</code> and optionally, <code class="language-text">end</code> sub-entries), each segment carrying a set of font style values. The system “flattens” all these intervals (latter entries have a higher priority) and ends up with non-overlapping intervals to use in determining a set of font style values for any given <code class="language-text">font-size</code> value. Through the mechanisms of these two sub-systems, we’ve managed to make Font Palettes theme agnostic, and also allow for the possibility to introduce a similar kind of filters and alterations as seen on the Color Palettes. This part is still work-in-progress since acting upon the complexity of Font Palettes requires new controls like interactive curves or interval shifters. We don’t have all the solutions yet, so I will not go into that right now. The important thing for me is that we’ve managed to have a Font Palettes system that can express the vast amounts of design decisions that are made by designers when they put their typographer hats on. <hr> Circling back to the talk about complexity, relations, behavior from the first half of this essay, I am well aware that you could be somewhat disappointed by the Global Style System I’ve just described. I agree. While quite complicated, when it comes to the complexity I’ve cheered for, the system is kind of an infant. The relations are mostly hierarchical, with mostly top-down information flows. I am glad we could get away with so little complexity in creating such a system. It is also further proof that global styling is a much more manageable problem than global site layout (with blocks). There is a nuance here, and I don’t want to shy away from it: if we would look to couple the complex behavior of blocks in terms of layout with a dynamically-defined global styling system, then I am confident the solutions I’ve just described would be insufficient. There would be a surge of bottom-up information that the current system simply couldn’t handle. Yet. It is best to choose our battles, if we can. Your mind must be pretty tired by now. I wholeheartedly appreciate all the effort you’ve put in to stay this long. Take a break, have one more cup of coffee or tea, and let all my meandering ideas sink in (or drift away). When you are ready, it would mean the world to me if you could share back some of your thoughts and experiences. Oh, and subscribe below so I can “ping” you when the second part of this essay is available. I will write about my ideas and experiences around Site Blocks Systems.https://thinkwritecode.com/the-good-wordpress-theme/https://thinkwritecode.com/the-good-wordpress-theme/Tue, 18 Feb 2020 20:42:08 GMTAfter I’ve shared <a href="/musings-about-building-websites-out-of-wordpress-blocks/">my thoughts</a> on the shortcomings and challenges of building websites out of (WordPress) blocks, a couple of people heavily involved in the process of making such a website building system a reality expressed their interest in hearing more about my views on the specifics of establishing relations between blocks, on growing inherently adaptive and resilient blocks systems. As I alluded by the end of that essay, for the past couple of years my team at <a href="https://pixelgrade.com" target="_self" rel="nofollow">Pixelgrade</a> and I have been bumping into this problem from all sorts of angles, and I am confident our hard-won lessons, partial and biased as they certainly are, could prove valuable on the long, winding road toward a satisfactory solution. As I started drafting in my mind’s notebook how to best portray our journey and findings, I found myself missing a valuable piece of this puzzle, one that precludes a thorough understanding of my points of view. I feel that without this, all would be either easily dismissible as nonsense, shortsighted, or heavily biased and narrow, or swiftly misinterpreted into false conclusions based on personal background and affinity. Neither scenario would sit well with me. Not without giving it a try first. The missing piece is a shared understanding of what a WordPress theme’s role and responsibility are, as I see them. Throughout the WordPress community, people either hold iron-clad opinions about what a theme should or should not do (focusing on the latter), or they gently toss this whole thing to the side since it doesn’t matter in the end — a nuisance best left to people with too much time on their hands. Needless to say, I find both camps lacking. I am more of a question-what-you-are-doing-so-you-don’t-end-up-in-the-wrong-place kind of guy. <h2 id="semantics" style="position:relative;"><a href="#semantics" aria-label="semantics permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Semantics</h2> There is “theme,” then there is “WordPress theme”, and then there is this other thing people actually need and want. More on that later. I am throwing “theme” left and right here because that is what people are used to, not because there is some inherently useful meaning to this word. Actually, quite the contrary. For my understanding of role and responsibility attributed to this entity, the term “theme” is a nuisance. It’s all fluffy and neutral, a subtle veneer on something of actual importance. My views couldn’t be further from this. One can’t speak about themes without inviting the “royalty” of the land: plugins. I have to hand it to plugins: their name has a certain punch, commands a level of respect, has a physicality to it. Also, plugins come in packs since you can have multiple plugins active at the same time, as opposed to themes’ lonely existence — at least they can have children. I would be delighted if, at one point, we could do away with concepts like “theme” or “plugin”, and instead call everything we bolt unto our bare WordPress installation just “module” or “add-on”. Because that is all there is to it: you get something out-of-the-box with the ability to receive and interact with lots of other third-party modules. Some of those modules will be more focused on frontend styling and layout, while others will more functionality-heavy focused on building, management, and analysis tools. We live in this world already, and I don’t see much sense in keeping up with the illusion of themes and plugins. The closest term I can come up with to capture my perspectives on what makes for a good WordPress theme is: “solution”. Let it reverberate a little bit: WordPress solutions.. Site solutions.. It has a nice ring to it, somewhat punchy, but most importantly sharp and opinionated. Just what the doctor ordered! <h2 id="late-at-the-table" style="position:relative;"><a href="#late-at-the-table" aria-label="late at the table permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Late at the table</h2> This is so passé, Vlad! Aren’t themes dead already? <video src="/2e66ff225f24885baffad0330b977952/bored-cat.mp4" autoplay="" loop="" muted="" playsinline="" onerror="this.onerror=()=>{};this.src='/2e66ff225f24885baffad0330b977952/bored-cat.mp4';"><img src="/e47859e43400f22d480a31528d78e9fd/bored-cat.gif" alt=""></video><a href="https://giphy.com/gifs/cat-ball-board-3o85xGr7NxBC4eGTte" target="_self" rel="nofollow">Source</a> With all the funeral “songs” of late, it does seem like a futile thing to talk about. My all too self-conscious radar is surely beeping about being defensive, stuck in a past best to be forgotten, protecting my livelihood, my company’s moat even. Allow me to go on record: I have no problem if WordPress themes as we know them will go extinct. In fact, if this is to happen, make it sooner rather than later. Let evolution run its course. I won’t be jumping for joy, nor will I be saddened or frustrated. I will just step back and look at how and where those scattered pieces have fallen, focusing on what comes next. But before that happens, let’s not bury our heads in blocks and, after a year or so, wonder what killed the dinosaurs. While these “dinosaurs” are still around, it’s worth understanding their function in this ecosystem, so we can better cope with and manage a world without them. <h2 id="bad-theme-bad" style="position:relative;"><a href="#bad-theme-bad" aria-label="bad theme bad permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Bad theme! Bad!</h2> Coders will be coders. They ingest and digest a problem through code. A little too much, if I may say so. The “classic” WordPress theme is now pummeled into oblivion under the banner of architectural code changes. Code that was part of a theme now gets shuffled around into the block editor, individual blocks, block patterns, block templates, block template parts, even the WordPress core (outside of the editor) is looking at a piece of the pie. The Gutenberg induced power-rush seems to be making everything up for grabs. And there is no easier target for a self-respecting, DRY-following, sprint-focused coder than those pesky themes. If you read between the make.wordpress.org posts, thousands of GitHub issue comments, and across the thousands upon thousands of Slack messages in all manner of channels, it becomes all too clear that there is something very wrong with themes as they’ve ended up after 16 years of WordPress. — They do too much. They bundle up styling, layout, and sometimes — for heaven’s sake, functionality. They use tabbed admin options pages and sections upon sections in the Customizer. They obnoxiously require and recommend plugins for things to work. They style both the frontend of your site and the editor. They lock-in user-generated content. They provide fonts and icons, slideshows and galleries, shortcodes and widgets, demo data and full-screen onboarding, notifications and pop-ups, meta boxes and.. (hyperventilating by now) They.. They no good. — Code, good code, smart code, ‘code’ code should not look like this. Code should not be organized like this. Code has come a long way, and we can code better. Code should aspire for single responsibility, for clarity of purpose. <a class="gatsby-resp-image-link" href="/static/38a5ca7f4227ebca626400d06d5470cb/10bbb/perhaps-we-should-all-be-examining-what-we-think-we-know.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 110.00000000000001%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAWABQDASIAAhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAAAAMEBQEC/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAc6T1ImaFs9Eqhf/xAAaEAACAwEBAAAAAAAAAAAAAAABAgADERIT/9oACAEBAAEFAtyOOUnAL2UBUyehD22Fm2f/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAaEAACAgMAAAAAAAAAAAAAAAAAARASETFh/9oACAEBAAY/AtGVFW2N2cWOR//EAB0QAQACAgIDAAAAAAAAAAAAAAEAETFRECFBYXH/2gAIAQEAAT8hLDaODZafXFFmauWg/se0wYUlSWh4itz/2gAMAwEAAgADAAAAEG/PQP/EABURAQEAAAAAAAAAAAAAAAAAABBB/9oACAEDAQE/ECn/xAAVEQEBAAAAAAAAAAAAAAAAAAAQQf/aAAgBAgEBPxAh/8QAGxABAQADAQEBAAAAAAAAAAAAAREAITFBkVH/2gAIAQEAAT8Qh2uCncZ07KS5x/HNu1xFdwQUcoPm5EXy5Hr6YWe7R5X3D6AkPKncQ6XzP//Z'); background-size: cover; display: block;" > <picture> <source srcset="/static/38a5ca7f4227ebca626400d06d5470cb/89b46/perhaps-we-should-all-be-examining-what-we-think-we-know.webp 180w, /static/38a5ca7f4227ebca626400d06d5470cb/97ead/perhaps-we-should-all-be-examining-what-we-think-we-know.webp 360w, /static/38a5ca7f4227ebca626400d06d5470cb/10636/perhaps-we-should-all-be-examining-what-we-think-we-know.webp 500w" sizes="(max-width: 500px) 100vw, 500px" type="image/webp" /> <source srcset="/static/38a5ca7f4227ebca626400d06d5470cb/4f3ca/perhaps-we-should-all-be-examining-what-we-think-we-know.jpg 180w, /static/38a5ca7f4227ebca626400d06d5470cb/bac16/perhaps-we-should-all-be-examining-what-we-think-we-know.jpg 360w, /static/38a5ca7f4227ebca626400d06d5470cb/10bbb/perhaps-we-should-all-be-examining-what-we-think-we-know.jpg 500w" sizes="(max-width: 500px) 100vw, 500px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/38a5ca7f4227ebca626400d06d5470cb/10bbb/perhaps-we-should-all-be-examining-what-we-think-we-know.jpg" alt="Game of Thrones scene with Daenerys Targaryen blessing Jon Snow with knowledge" title="Game of Thrones scene with Daenerys Targaryen blessing Jon Snow with knowledge" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> Always pay attention to someone with dragons - Game of Thrones TV series My first response to all of this is: you are absolutely right! Themes do all that, and then some — I don’t agree with everything they do, but they do it nonetheless. Yes, it is not the ideal environment for prestigious code. Yes, lots and lots of themes are of Frankensteinian decent (mainly multi-purpose themes). Yes, many themes haven’t aged well. My second response to all of this is: you are absolutely blind! You are blinded by your self-reinforcing appreciation — dare I say love — of code. You see code where there are actually solutions to problems you are not even aware of. You see code where actual real user needs, quirks, shortcomings, and biases are being met or mitigated. You see code where there is history, legacy, and iterative evolution. You see stagnating code where there are actually happy, calm users than go on with their lives. <h2 id="good-boy" style="position:relative;"><a href="#good-boy" aria-label="good boy permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Good boy!</h2> <span class="gatsby-resp-image-background-image" style="padding-bottom: 116.1111111111111%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAXABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQBA//EABYBAQEBAAAAAAAAAAAAAAAAAAECA//aAAwDAQACEAMQAAAB3vPmOk6hUpgbAn//xAAaEAACAwEBAAAAAAAAAAAAAAABAgMREgAQ/9oACAEBAAEFAo1tnSPxlJjszHI5myNnCgEf/8QAFREBAQAAAAAAAAAAAAAAAAAAASD/2gAIAQMBAT8BI//EABURAQEAAAAAAAAAAAAAAAAAAAEg/9oACAECAQE/AWP/xAAcEAABBAMBAAAAAAAAAAAAAAAhAAEQEQJScZH/2gAIAQEABj8CLWtXjI1RQDQPF2P/xAAbEAEAAwEBAQEAAAAAAAAAAAABACExEUFRYf/aAAgBAQABPyHaR87GCBy9jtxWFRTYd3kdv2PS9jqq9/RL4AK7UArs/9oADAMBAAIAAwAAABBgF0H/xAAYEQEBAAMAAAAAAAAAAAAAAAARAAEQQf/aAAgBAwEBPxABmLmv/8QAGBEBAAMBAAAAAAAAAAAAAAAAEQABECH/2gAIAQIBAT8QS1cYdz//xAAdEAEAAwEAAgMAAAAAAAAAAAABABExIUFhgaHB/9oACAEBAAE/EMIHhT5fRFYcVBpf2BEaOQyI0bCpyyD10nRFzTXZejPSLA24UBYsAX4+ox6o6s//2Q=='); background-size: cover; display: block;" > <picture> <source srcset="/static/558ac3b6a87bc5d7a3ca1868046a2715/89b46/good-boy-puppy.webp 180w, /static/558ac3b6a87bc5d7a3ca1868046a2715/97ead/good-boy-puppy.webp 360w, /static/558ac3b6a87bc5d7a3ca1868046a2715/72474/good-boy-puppy.webp 564w" sizes="(max-width: 564px) 100vw, 564px" type="image/webp" /> <source srcset="/static/558ac3b6a87bc5d7a3ca1868046a2715/4f3ca/good-boy-puppy.jpg 180w, /static/558ac3b6a87bc5d7a3ca1868046a2715/bac16/good-boy-puppy.jpg 360w, /static/558ac3b6a87bc5d7a3ca1868046a2715/f3619/good-boy-puppy.jpg 564w" sizes="(max-width: 564px) 100vw, 564px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/558ac3b6a87bc5d7a3ca1868046a2715/f3619/good-boy-puppy.jpg" alt="Cutest puppy winking" title="Cutest puppy winking" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> <a href="https://www.pinterest.co.uk/pin/701154235718852406/" target="_self" rel="nofollow">Source</a> It is all too easy to consider anything and everything bad — especially when we put our critical-thinking maker hat on. We even have <a href="https://en.wikipedia.org/wiki/Negativity_bias" target="_self" rel="nofollow">a bias</a> to nudge us in the “right” direction, one that I struggle with every day. Like any subject of one’s judgment, WordPress themes are neither good or bad. What is bad or good is how they make us feel, how they help or get in our way, how they bring us joy and ease of mind, or wasted hours or days. That is what is important to me, and to all the customers I’ve been talking to over the years. Code is only important when it gets in the way, when a PHP error pops up, when some JavaScript crashes your entire page or editor. Apart from these, code is like air: crucial, but invisible. So, what is the good WordPress theme? A good WordPress theme is like an onion: layers upon layers of tightly wrapped decisions and options, with a sweet, opinionated core, and some tears in your eye when you try to peel it apart. A good WordPress theme is a solution for a specific set of problems, not too many, not too few. Such a theme will not “empower” the user with every CSS property imaginable, nor will it needlessly restrict the site owner’s ability to make his site.. his. A good, solution-oriented theme will not back away when the going gets rough, but will push on with even more determination (and decisions). It will own its responsibility to take care of the shitty parts, so the site owner doesn’t have to. A good WordPress theme is a clear contract between a solutions seeker and a solutions provider. It is a partnership on the road to website Nirvana. Such a theme will not seek to give you false hopes or try to educate you into every part of the WordPress documentation. It will present you with the facts of the solution it is offering, its decisions and limitations, its ideal use case and the range of flexibility it is capable of. A good WordPress theme is a complete, integrated solution. The team behind it has taken upon itself to research and analyze the needs of site owners from a specific niche; to find a common set of needs those may have and identify the best ways to leverage the huge WordPress ecosystem to best fulfil those needs. A good theme will not be afraid to pick certain plugins and build a solution with them in mind. It will also not hide or shy away from such biased decisions. On the contrary, it is ready to explain how each choice is a step toward overcoming the overall challenge. A good WordPress theme is safe to operate. The theme makers have thought about as many scenarios as they can imagine (and have time for) and put safeguards in place to prevent you from “hurting” yourself (and your site). Where safeguards were not feasible, they have restricted or discouraged you from accessing that part. A good theme is a source of joy and accomplishment because it keeps all that could hurt you (including yourself) at bay. <h2 id="nothing-gets-lost" style="position:relative;"><a href="#nothing-gets-lost" aria-label="nothing gets lost permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Nothing gets lost</h2> As you can see, in my book, (good) themes have a lot of responsibility. It’s not an easy burden to carry, nor without its trappings and dead-ends. But it is a responsibility the end-user expects you, the creator, to take upon yourself. Life has shown me, time and time again, that whenever something goes wrong with a site, the first thing that comes to everyone’s mind is: there must be something wrong with the theme! No matter if it is obviously something related to a premium plugin that you have purchased (and got support for), no matter if the issue happens after you’ve updated some random plugin. The default is always the same: the theme is to blame. There was a time when I rebelled against this “injustice.” I would do my best to “educate” the customer in “the WordPress way”, in “the free and open-source software way.” I would pull out my common-sense wand and try and tickle one’s reasonable, rational side. To no avail. Battered by this constant tug-of-war, exhausted, and dumb-struck, I reached a low enough point where I was forced to look in the mirror. I wish I had done it sooner. What I saw in that mirror was a coder with a WordPress complex. I realized that at some point I took “the WordPress way”, made it my own, and turned it into gospel. I considered myself better than that, but there I was. I somehow managed to misinterpret what users were saying. Under “the theme is to blame” is hidden a far nicer meaning: “the theme is responsible” as in “it’s the theme’s job to take care of that.” I am hardly a customer-is-always-right kind of guy, but the customer was right this time. This is actually a gift (even if forced upon) the user is doing to any theme author. The user is basically saying: you need to take this responsibility from me, and charge me for it. Consulting agencies have always known this; it just took us a while to come around. Winding the drama knob down, what does all this have to do with WordPress themes burning and rising anew from their own ashes? — sorry, the knob seems to be broken. It has everything to do with the dismantling of themes in a block-based world. Code may be easily split and modularized or transferred to other entities, but the responsibility? Where do you begin? Is there anyone willing to take the nasty, tangled parts of this responsibility? <a class="gatsby-resp-image-link" href="/static/2d6d620f378952398a0bebee705fdb20/3ad8d/responsibility-y-u-no-take-some-meme.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 75%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAQFAf/EABUBAQEAAAAAAAAAAAAAAAAAAAIB/9oADAMBAAIQAxAAAAFKnPaQnmin/8QAGBAAAgMAAAAAAAAAAAAAAAAAAQMAAhL/2gAIAQEAAQUCqTHKxWLzptywz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAECAQE/AWf/xAAdEAAABQUAAAAAAAAAAAAAAAAAARARIQIiMTJh/9oACAEBAAY/AoaQ5GUcS/A3alP/xAAbEAEBAAIDAQAAAAAAAAAAAAABEQAxECFBUf/aAAgBAQABPyEzNj0uI6CK9eDF0efcdgIajcjn/9oADAMBAAIAAwAAABCPH//EABYRAAMAAAAAAAAAAAAAAAAAAAEQMf/aAAgBAwEBPxARf//EABURAQEAAAAAAAAAAAAAAAAAABAx/9oACAECAQE/EKP/xAAdEAEAAgICAwAAAAAAAAAAAAABABEhMUFREHGB/9oACAEBAAE/EAZpAx5a59zPYNmJdNVrfhqSvaVHpkI8KEGi5pa7+RJqp//Z'); background-size: cover; display: block;" > <picture> <source srcset="/static/2d6d620f378952398a0bebee705fdb20/89b46/responsibility-y-u-no-take-some-meme.webp 180w, /static/2d6d620f378952398a0bebee705fdb20/97ead/responsibility-y-u-no-take-some-meme.webp 360w, /static/2d6d620f378952398a0bebee705fdb20/b0544/responsibility-y-u-no-take-some-meme.webp 600w" sizes="(max-width: 600px) 100vw, 600px" type="image/webp" /> <source srcset="/static/2d6d620f378952398a0bebee705fdb20/4f3ca/responsibility-y-u-no-take-some-meme.jpg 180w, /static/2d6d620f378952398a0bebee705fdb20/bac16/responsibility-y-u-no-take-some-meme.jpg 360w, /static/2d6d620f378952398a0bebee705fdb20/3ad8d/responsibility-y-u-no-take-some-meme.jpg 600w" sizes="(max-width: 600px) 100vw, 600px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/2d6d620f378952398a0bebee705fdb20/3ad8d/responsibility-y-u-no-take-some-meme.jpg" alt="Meme about sharing responsibility" title="Meme about sharing responsibility" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> As things stand today, the responsibility that used to be in the themes’ domain is not being picked up by neither the new editor, blocks, block patterns, or what have you. Actually, the general consensus in Gutenberg is that everyone should “Embrace and enhance users being in control.” Let me translate that into layman terms: WordPress is taking a responsibility dump on the user. Not good, not good at all. <h2 id="consumer-packaged-goods" style="position:relative;"><a href="#consumer-packaged-goods" aria-label="consumer packaged goods permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Consumer packaged goods</h2> The concept of theme, as it evolved alongside WordPress itself, has another advantage that is often overlooked: the theme is a way to package the solution for users to consume. You should not discount the benefits brought forth by packaging — not in between supermaket aisles, nor in digital shops. If the new editor gets its way, this de-facto packaging standard for distributing whole site solutions to end-users will be gone. Sadly, the need for such a standard will not disappear. WordPress needs to come out with a new way, preferably a better way to bundle up a site solution and deliver it into the hands of eager clients. A swift push back against this may be done by exemplifying the themes on WordPress.org: themes that are hardly “site solutions”; focused, narrowed themes only handling styling and layout; all themes should be like that. I can only spare a few words toward such views. Looking only on WordPress.org themes is missing the point — in a grand way. Premium WordPress themes is where the real action takes place, where WordPress gets to be an adult and tackle real-life challenges. <h2 id="lord-wont-you-buy-a-washing-machine" style="position:relative;"><a href="#lord-wont-you-buy-a-washing-machine" aria-label="lord wont you buy a washing machine permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Lord, won’t you buy a.. washing machine?</h2> <span class="gatsby-resp-image-background-image" style="padding-bottom: 75%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGQAAAQUAAAAAAAAAAAAAAAAAAAECAwQF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABrDkDaIAf/8QAGhAAAgMBAQAAAAAAAAAAAAAAAgMBISIRMv/aAAgBAQABBQJvZleCDyVlTCFef//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABkQAQEBAQEBAAAAAAAAAAAAAAEAEQIhMf/aAAgBAQAGPwLyFWPdt+w5Gd9F/8QAGxAAAgIDAQAAAAAAAAAAAAAAAREAITFBYYH/2gAIAQEAAT8hWOfDGpcGidwATFizH6juMwqHvMJRptBT/9oADAMBAAIAAwAAABAc/wD/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAdEAEAAwEAAgMAAAAAAAAAAAABABEhMUFRcYHw/9oACAEBAAE/EAPbAtT1L3i9lT4d/ZLMELt1hZqgStHkX1vBel1+shUKugb8k//Z'); background-size: cover; display: block;" > <picture> <source srcset="/static/785324924994fdb38f9f6b7a94720b5d/89b46/one-of-the-first-washing-machines.webp 180w, /static/785324924994fdb38f9f6b7a94720b5d/97ead/one-of-the-first-washing-machines.webp 360w, /static/785324924994fdb38f9f6b7a94720b5d/fb07f/one-of-the-first-washing-machines.webp 720w, /static/785324924994fdb38f9f6b7a94720b5d/64908/one-of-the-first-washing-machines.webp 1080w, /static/785324924994fdb38f9f6b7a94720b5d/a0d74/one-of-the-first-washing-machines.webp 1296w" sizes="(max-width: 720px) 100vw, 720px" type="image/webp" /> <source srcset="/static/785324924994fdb38f9f6b7a94720b5d/4f3ca/one-of-the-first-washing-machines.jpg 180w, /static/785324924994fdb38f9f6b7a94720b5d/bac16/one-of-the-first-washing-machines.jpg 360w, /static/785324924994fdb38f9f6b7a94720b5d/c0c3d/one-of-the-first-washing-machines.jpg 720w, /static/785324924994fdb38f9f6b7a94720b5d/44838/one-of-the-first-washing-machines.jpg 1080w, /static/785324924994fdb38f9f6b7a94720b5d/3ea1f/one-of-the-first-washing-machines.jpg 1296w" sizes="(max-width: 720px) 100vw, 720px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/785324924994fdb38f9f6b7a94720b5d/c0c3d/one-of-the-first-washing-machines.jpg" alt="Woman reading next to one of the first washing machines" title="Woman reading next to one of the first washing machines" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> <a href="https://pin.it/y4cc2pga3urcmh" target="_self" rel="nofollow">Source</a> I have only one more thing to stress about WordPress shooting itself in the foot — and killing themes in the process. Before the new block editor came to be, a bare-bones WordPress installation was very much focused on the end-user. Despite the overly complex dashboard, you could see that everything from the “5 minutes install” wizard to the copy used throughout the WordPress admin area, all was trying to help a non-technical user get going and build a site he or she could be proud of. As one’s needs moved across the spectrum between WordPress newbies and WordPress developers, the ecosystem pitched in and provided solutions at every point. Need a simple but beautifully designed site, there is a niche, cheap theme out there. Need a portfolio, restaurant, magazine site, pick and choose from a wide variety of sources. Need a full-blown ecommerce site, no problem — bolt-on WooCommerce and 5-10 add-ons and go warp speed. Need to control transients, Redis caches, background actions, transactional emails, database queries, pick one of the many plugins or write your own. The ecosystem would unfold in accordance with your needs, always defaulting on the lowest common denominator. With the new editor, WordPress gets increasingly shaky in front of the whole spectrum of people. While the new content editing experience is much, much better than the previous one, it comes with greater complexity (thousands of blocks to chose from, each with fine-grained controls). Moving up, the design of entire pages is exposed to you, in great detail and control — very nice for designers and developers, but scary for people just looking to publish a post. More to the top, a global system of styling and layout will be (eventually) put at your disposal — again, nice for one part, cognitive-freeze for the other. WordPress is becoming more capable, which is a blessing and a curse. Imagine WordPress (with Gutenberg) is a washing machine, and you would go to some late 19th century English Lord’s mansion to sell it. You know he doesn’t walk around in dirty clothes already, so what is the value proposition that will close the sale? You bet on a timeless human trait: greed. After persuading a couple of reluctant butlers to let you have a go, you sit in front of the Lord and deliver your living-room pitch: — How would you feel if I told you could reduce 25% of your staff and replace it with a new, state-of-the-art washing machine? Fully automated, you just need to put in the laundry, throw some detergent, close the door, and your off to the races. A couple of hours later, upon your return, all your clothes are nice and clean. Just string them out to dry, a little ironing and presto! The Lord listens, politely, lets you finish, and: — Young man, your ambition is quite something. Alas, it is misplaced and wasteful of my time. But since my mood is already ruined by such lack of foresight, I will indulge you with my thinking: Your entire premise is utterly and completely without any basis in reality whatsoever. While I would not pass an opportunity to enhance my financial situation, I do not wish to do so if that means I have to work more. In fact, your proposal is far more sinister. You would have me replace my housemaids with this machine, and instead of me being the one served, you would have me become the servant, the servant of a bloody washing machine — feeding it, emptying it, cleaning it, fixing it. A clever little trick, but: I DO NOT LAUGH, MY BOY! I do not need a washing or any other cleaning machine. What I need is clean, ironed clothes, clean rooms, clean bathrooms, clean dogs, and a clean lawn. Needless to say, you can kiss your commission goodbye. Now, the situation would be entirely different if you would try to sell your washing machine to a 50’s suburban housewife. You would just mention “fully automated” and.. sold. You would even gain an order for a dryer, to boot. The fit between your prospective customer and your product is just much, much better. One thing themes have done for WordPress is they have morphed the outer shell to fit both the Lord (actually his servants, to keep up with demand), and the housewife, and the local laundromat, and kickstarted the new trend of washer-dryers. Themes, mainly premium ones, have been the integrators of the WordPress world, the hands and feet of the entire WordPress ecosystem. People at the helm of steering WordPress and Gutenberg need to remember this, or there will be no more hugging (for a lack of hands and feet). Oh Lord… <div class="gatsby-resp-iframe-wrapper" style="padding-bottom: 50%; position: relative; height: 0; overflow: hidden; margin-bottom: 1.0725rem" > <div class="embedVideo-container"> <iframe title="" src="https://www.youtube-nocookie.com/embed/PLvK8QOOZwY?rel=0" class="embedVideo-iframe" style="border:0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; " loading="eager" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"></iframe> </div> </div>https://thinkwritecode.com/musings-about-building-websites-out-of-wordpress-blocks/https://thinkwritecode.com/musings-about-building-websites-out-of-wordpress-blocks/Wed, 12 Feb 2020 10:00:08 GMTBuilding stuff is hard. Just try and make two stones stay on top of each other.. with kids playing around. Building digital stuff is even harder. Just try and make two images sit nicely beside each other.. while resizing the browser window. Building digital stuff that builds digital stuff is downright risky. Just try and make the system that generates the webpage that keeps any two images sit nicely side by side.. while using a smartphone. TL;DR: The higher we climb up the abstraction ladder, the harder and riskier things get. Self-evident, common-sense stuff, right? For example, it’s almost instinctual to consider juggling three balls in the air harder than just one or two. But what does your intuition tell you about how much harder is it, actually? If you’ve ever tried juggling, you already know the answer. But if you didn’t, you’re very likely to consider juggling three balls as 50% harder than just two — you correlate quantity with difficulty. In fact, if you’ve been training really hard, for a long time, with just two balls, you will get a boost of self-confidence — 30, 40% tops. People into cognitive sciences, behavioral economics, or risk management already know where this is going, but please bear with me a little longer. Reality of life — and science in the last decades, has shown us that we humans are very poorly equipped to deal with anything exhibiting a non-linear progression. We assume the world is behaving linearly just as night follows day, one season the next, weight or speed of stuff. We are deeply accustomed to the linearity of our own life’s time, with how heavy two gallons of soda are compared to one, with the speed a rock reaches when dropped, with how difficult a two-mile run is compared to just one. We have a well-honed sense for the physical world since it has been the only one we’ve known for the most part of our journey as a species. And the physical world, at least at the pre-industrial human scale, is a very linear world; in some aspects actually static, while in others exhibits linear growth or decay. When we focus our attention and aspirations beyond the physical, we start to work at the fringes of our natural capabilities. We have trouble, even today, getting to grips with “simple” things like gravitational acceleration, compound interest, or Ponzi schemes. We need to work hard to understand even the most basic of non-linear behaviors. Sure, one can get better with time, but it’s a constant struggle. In pre-computer times, our hunter-gatherer brains had to juggle with only two large conceptual fields: our perception/interpretation of the physical environment and our ideas and explorations of the metaphysical. An individual was either trying to get to grips with a “real” problem (build a car, a rocket, or a bigger bomb), or “just” thinking about pure ideas (the meaning of life, a better way to organize people and societies, parallel universes, etc.) You think to do stuff or you think to think stuff. The computer revolution gave birth to a third world: the digital realm. A quirky one to boot. This world is neither just an abstraction of the physical, neither a completely separate conceptual field. A large section of society is naturally equipped to link it, tightly, to everyday reality. We identify patterns, instinctively put a layer of metaphors on top, and apply them to this new medium poised on receiving anything with open arms. Since it doesn’t seem to mind or push back, we find great joy and fulfillment seeing our “original” patterns and metaphors take actual shape outside of our minds, able to effortlessly show our creations to our tribe. The end result feels physical in a way. Now that we can touch “things” through a screen-glass, even more so. Our hunter-gatherer brain is contempt. It would prefer something more down-to-earth, but this will do. There are other homo sapiens that have a knack for taking concepts further, much further. They consider the digital as a whole new way of seeing and thinking. They acknowledge its newborn purity and promise; they appreciate its neutrality with the past. These free-thinkers see this world for what it is: a fresh start bogged down with only the past we force upon it. Actual (creative) freedom is at hand — wonderful! Soon, a much, much sweeter source of dopamine comes into view: power, unlimited power. If one detaches their thinking from the mental harnesses of physicality, the digital world is keen to offer power over anything you can think of. You can build a two miles high skyscraper, an actual army of orcs, endless streams of information, or entire societies following your every command. This bottomless well of power is utterly mesmerizing, even for the most brilliant of us. The vast majority of people that seek to build something in the digital world are somewhere in between the physical and the digital purity — constantly shuffling deep instincts and rational clarity. Most often, we do this without a shred of self-awareness. This brings me back to our ability to deal with non-linear behavior. More specifically, to our capacity to comprehend and control complex behavior in the systems that we (want to) build. So, how much harder is it to juggle three balls when compared to just two? It is actually at least twice as hard. Adding another ball makes it again twice as hard. In mathematical terms, we call this an exponential progression (like this series: 1,2,4,8,16,32,..) — things get excruciatingly hard, very fast. In real life, this kind of behavior is widespread in nature. So common in fact, you would think we would have evolved with a deep understanding of it. Unfortunately, most such phenomena happen either too fast, too slow, too large, or too small for us to observe it with ease. <img src="/8cc81f28eca87019c7ac7d2b9a08a75d/E.coli-colony-growth.gif" alt="E. coli colony growth">E. coli colony growth - <a href="https://en.wikipedia.org/wiki/Exponential_growth" target="_self" rel="nofollow">Source</a> There is a second layer to our troubles of comprehending complex behavior: the more familiar we are with one stage, the more likely we are to underestimate the increase in complexity of subsequent stages. Since juggling seems to be my current theme, imagine you have mastered to perfection the art of juggling three balls. You could do it with your eyes closed. When presented with the challenge to up your game and try it with four, you are much more likely to consider it easier than it is. In fact, all your hard-won muscle memory and mental timings will make it much harder than usual for you to learn this new skill. You gained certainty and safety, but lost elasticity. Deep within our brains, there is a powerful tendency to default to what we already know and infer the needed information from that. It’s a mechanism to help us cope with new, mildly unpredictable situations. Frankly, it was meant to keep us alive and sane — I feel grateful for that. Alas, the type of complex systems we engage with in the digital world have a nasty habit of throwing a monkey wrench into our predictions. Right when you are certain that your understanding is enough to make it happen, reality kicks in. <hr> Fuck, Vlad! I thought this was about blocks and building websites.. WordPress and the like. Can we get to that? This century?! Well.. I did. Deal with it. The end. <hr> If you needed to say that, I hope it helped you vent a little bit. Now let me try and put all this “philosophizing” in the context of building systems to help users build websites. To further bring these ideas home, I will explore the currently ongoing process undertaken by WordPress, namely <a href="https://wordpress.org/gutenberg/" target="_self" rel="nofollow">Project Gutenberg</a> aka “everything is a block.” Here’s <a href="https://ma.tt/2017/08/we-called-it-gutenberg-for-a-reason/" target="_self" rel="nofollow">the overall vision</a> straight from the horse’s mouth. <a class="gatsby-resp-image-link" href="/static/c85691da78118da51db3568a8825f286/edb04/gutenberg-logo.png" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 52.77777777777778%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABx0lEQVQoz5VS/U/aUBTlv1+yj7jNzE0mriiCYEtLC2OKyDrCsIA4t2Vi9vXjokAL7QMN6btn6bM0aGa23eTlvHd7zsm57zUGgBNRtIIzY4wPbZs7zoi7rsc9xvjYdbntOKI/nU75LZ2P6/oVCzcgInDOxd5qHyGdlbGjaMgpGvKagXzBgKLpSG/v4OOnz4I35wfyEM9jCw3inAvsHp9QPCGRoupklN7QsxdrVK2ZtJ5MUSan0GnvLOIH9UfDxYSVag2ZrIyX60k0D1uw2h3UG00kpBSysgqr1fl7wkVDs97A8kocpfIehraNwWCIfn8gRn4eT6DV6f7TyBHhy2kP9x89QdNqw/M86MWyMN0/eIvVNUl8/6+EgdFupSpG+/b9By4u+uidfcWh1cbefg3dDyeR4fUV3pHQDw2rNROvNrawubUNtVDE+6YFRTMgbaQhbabROTq+O+H8lebo+z7tVg5IL5VJ1Yv08PEy3XuwREtPV0RfzhfIrDciTajj4ZjnN/7DMD7Mdw2RpmC8Fq8aYE5WoeklJFMZcSW3NWH1A0M2X0QkcDKZsvHYZa7rMsYmbDabMWc0YmPXFf3Lq6sbfAAegEsAP38DDF8lfrlR7cAAAAAASUVORK5CYII='); background-size: cover; display: block;" > <picture> <source srcset="/static/c85691da78118da51db3568a8825f286/89b46/gutenberg-logo.webp 180w, /static/c85691da78118da51db3568a8825f286/97ead/gutenberg-logo.webp 360w, /static/c85691da78118da51db3568a8825f286/fb07f/gutenberg-logo.webp 720w, /static/c85691da78118da51db3568a8825f286/64908/gutenberg-logo.webp 1080w, /static/c85691da78118da51db3568a8825f286/13cfa/gutenberg-logo.webp 1196w" sizes="(max-width: 720px) 100vw, 720px" type="image/webp" /> <source srcset="/static/c85691da78118da51db3568a8825f286/96042/gutenberg-logo.png 180w, /static/c85691da78118da51db3568a8825f286/7a322/gutenberg-logo.png 360w, /static/c85691da78118da51db3568a8825f286/16546/gutenberg-logo.png 720w, /static/c85691da78118da51db3568a8825f286/6d80e/gutenberg-logo.png 1080w, /static/c85691da78118da51db3568a8825f286/edb04/gutenberg-logo.png 1196w" sizes="(max-width: 720px) 100vw, 720px" type="image/png" /> <img class="gatsby-resp-image-image" src="/static/c85691da78118da51db3568a8825f286/16546/gutenberg-logo.png" alt="WordPress Gutenberg Logo" title="WordPress Gutenberg Logo" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> You don’t have to be familiar with the project to be able to grasp what follows. It helps, but everything concerning site builders revolves around the same concept of blocks. From the Wix or Squarespace site builder to corporate design systems. WordPress hasn’t embarked on solving a problem specific to its ecosystem. The implementation does and will have to deal with the unique forces that give WordPress its strengths and weaknesses, but many of the challenges are common throughout the digital world. <h2 id="divide-et-impera" style="position:relative;"><a href="#divide-et-impera" aria-label="divide et impera permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Divide et impera</h2> Any human that tried to solve a somewhat complicated problem has eventually resorted to this algorithm — even if unknowingly. Computer programmers have it tattooed on their hearts. It’s simple: take whatever problem you don’t have an answer to and divide it into increasingly smaller sub-problems until you feel confident you can fully grasp all the variables and relations involved. Solve each problem on a lower level, and you should be able to climb up and integrate the related sub-problems to solve the bigger ones. You have conquered (impera) the problem — and learned about recursion in the process. This algorithm is praised for its universal applicability. From cooking a meal, to manufacturing a toothbrush, solving an algebra equation, writing software to fulfill a requirement, up to societal problems like climate change and inequality. One hammer to nail anything. <a class="gatsby-resp-image-link" href="/static/6a2be5de0078aa8b3b09a5baa1623a3f/a5e48/2-stupid-dogs-isnt-that-cute-but-its-wrong.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 76.66666666666666%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAQFAgb/xAAWAQEBAQAAAAAAAAAAAAAAAAADAAH/2gAMAwEAAhADEAAAAaTHLWzx8wFf/8QAGhAAAgIDAAAAAAAAAAAAAAAAAQIAAxIkMf/aAAgBAQABBQJrQG6JkytQ+tP/xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAwEBPwGn/8QAFxEBAAMAAAAAAAAAAAAAAAAAAgEQEf/aAAgBAgEBPwFjIr//xAAaEAACAgMAAAAAAAAAAAAAAAABIRARADFh/9oACAEBAAY/AqDrclvByP/EABsQAQADAQADAAAAAAAAAAAAAAEAESExEEFR/9oACAEBAAE/IVGzdPUGh++LMPsWWNe4glb2f//aAAwDAQACAAMAAAAQ+/8A/8QAFhEAAwAAAAAAAAAAAAAAAAAAARAR/9oACAEDAQE/EBS//8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQIBAT8QEkn/xAAcEAEAAwACAwAAAAAAAAAAAAABABEhMUFhofD/2gAIAQEAAT8QN9MD0P3shgtAEnPmIME9k7sRupNkvBqFIxGXXM//2Q=='); background-size: cover; display: block;" > <picture> <source srcset="/static/6a2be5de0078aa8b3b09a5baa1623a3f/89b46/2-stupid-dogs-isnt-that-cute-but-its-wrong.webp 180w, /static/6a2be5de0078aa8b3b09a5baa1623a3f/97ead/2-stupid-dogs-isnt-that-cute-but-its-wrong.webp 360w, /static/6a2be5de0078aa8b3b09a5baa1623a3f/cdb16/2-stupid-dogs-isnt-that-cute-but-its-wrong.webp 480w" sizes="(max-width: 480px) 100vw, 480px" type="image/webp" /> <source srcset="/static/6a2be5de0078aa8b3b09a5baa1623a3f/4f3ca/2-stupid-dogs-isnt-that-cute-but-its-wrong.jpg 180w, /static/6a2be5de0078aa8b3b09a5baa1623a3f/bac16/2-stupid-dogs-isnt-that-cute-but-its-wrong.jpg 360w, /static/6a2be5de0078aa8b3b09a5baa1623a3f/a5e48/2-stupid-dogs-isnt-that-cute-but-its-wrong.jpg 480w" sizes="(max-width: 480px) 100vw, 480px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/6a2be5de0078aa8b3b09a5baa1623a3f/a5e48/2-stupid-dogs-isnt-that-cute-but-its-wrong.jpg" alt=".. But it's wrong" title=".. But it's wrong" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> 2 stupid dogs - 90’ Cartoon Network series It’s cute to have this fancy thing in your toolset.. but it’s wrong. Divide et impera was only meant to be used in situations where one is in full control, his or hers only problem being comprehension (related to our inability to hold more than 5 or 6 variables in our heads at the same time). In other words, the processes involved in solving the sub-problems would be similar to solving the parent problems, only easier. Further, integrating the results of sub-problems should not pose any new challenges, hence the necessary full control over the problem domain. So, is it website building with blocks a problem that we could nail with this hammer? I am confident it is not, not in its entirety. More importantly, not where it counts. <h2 id="first-there-was-a-block" style="position:relative;"><a href="#first-there-was-a-block" aria-label="first there was a block permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>First there was a block</h2> ..and it was fun. Endless opportunities lay ahead. Actual, palpable progress was being made. All developers are happily skiing round a snowball (effect). Solving the blocks problem seems like the obvious first step to take if you are to stand any chance of getting to the “system that builds..” part. And I agree. So did the team behind the WordPress block editor. The full-site editing problem was narrowed down to just post content editing, as a first phase. In the reduced complexity of the post content, the new block editor could germinate, overcome fundamental challenges, and grow toward a stable solution. Work done here would lay <a href="https://developer.wordpress.org/block-editor/principles/key-concepts/" target="_self" rel="nofollow">the foundation</a> for solving bigger problems. With surprising speed, for such a large undertaking, within two years of starting work, a stable solution was safe enough to be put in production (WordPress 5.0). Long before that, a working version was available to developers. People got familiar with the concepts and conventions; they appreciated the new set of tools and started building various blocks, with glee. Divide et impera and community effort at their best. Soon, almost a new ecosystem took life within the larger one. A world of blocks; beautiful, diverse, clever, powerful blocks. Competition naturally appeared, and for the better. More opportunities for end-users to find the right solution for their particular problem. On the technical/architectural side, things seem to hold just fine. Sure, one can’t foresee everything from the start, and adjustments had to be made. But, for the most part, the system is working, and thriving. I for one would have loved to see a clearer set of guidelines and APIs for handling the editor’s user interface, one more in tune with the ethos of WordPress of extensibility and adaptability. But that is not a fundamental issue that could not be improved upon further down the road, albeit with some legacy concerns. But still, manageable. <h2 id="tunnel-vision-with-glee" style="position:relative;"><a href="#tunnel-vision-with-glee" aria-label="tunnel vision with glee permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Tunnel vision with glee</h2> All this understandable excitement allowed a different kind of dynamic to take root in the system — at both ends of the contributor spectrum. Developers building with the new block editor started adding more and more features to their blocks, pushing the editor UI to breaking point. Developers and designers building the editor and its core blocks also jumped on the bandwagon and kept on boasting on each update with ever less important features: a color picker here, a gradient there. At the same time, they had to take notice of the UI challenges encountered by the community and try to come up with solutions. Lots and lots of energies were and are still being poured into the individual block and the post content editing UI and UX. While this definitely helps end-users, I can’t help but notice how the initial mantra of “everything is a block” is shifting toward “everything is just a block.” This distinction is subtle, but important in the long term. It paves the way for overconfidence. Just like the person that mastered juggling three balls to perfection. If the entire point of this journey would be limited to just the linear world of a piece of content, all would be swell. But it wasn’t, and it isn’t. <h2 id="mistaking-multiplicity-for-complexity" style="position:relative;"><a href="#mistaking-multiplicity-for-complexity" aria-label="mistaking multiplicity for complexity permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Mistaking multiplicity for complexity</h2> Our all too human inability to naturally comprehend complex systems and complex behaviors leads to all sorts of fallacies, each coupled with a healthy dose of hubris. A common one is our failure to differentiate between groups of the same kind of things, without any structure (homogeneous), and structured groups, possibly with multiple kinds of things. A mouthful, I know. A little story will help you wash it down, for sure. <span class="gatsby-resp-image-background-image" style="padding-bottom: 56.111111111111114%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDBP/EABYBAQEBAAAAAAAAAAAAAAAAAAIAA//aAAwDAQACEAMQAAABdIaM1nKCv//EABoQAAICAwAAAAAAAAAAAAAAAAACASEDEhP/2gAIAQEAAQUCSFMiX01JEtGm/wD/xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPwFH/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8Bqv/EABkQAAMAAwAAAAAAAAAAAAAAAAAQEQESMf/aAAgBAQAGPwLpSarNX//EABsQAQACAgMAAAAAAAAAAAAAAAEAESExYYGR/9oACAEBAAE/ISZweZdlHuW2I9RLlbdRRhXk/9oADAMBAAIAAwAAABDYL//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAwEBPxDBbF//xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQIBAT8QFmQr/8QAGxABAAMBAAMAAAAAAAAAAAAAAQARITFBUaH/2gAIAQEAAT8QeBXMOJWigbrSJAZHc37EEjjEKAgr4plHgv0Z/9k='); background-size: cover; display: block;" > <picture> <source srcset="/static/c83bb1853eb00d1e96b19f19c04daff0/89b46/shepher-and-sheep-in-the-alps.webp 180w, /static/c83bb1853eb00d1e96b19f19c04daff0/97ead/shepher-and-sheep-in-the-alps.webp 360w, /static/c83bb1853eb00d1e96b19f19c04daff0/fb07f/shepher-and-sheep-in-the-alps.webp 720w, /static/c83bb1853eb00d1e96b19f19c04daff0/64908/shepher-and-sheep-in-the-alps.webp 1080w, /static/c83bb1853eb00d1e96b19f19c04daff0/0b978/shepher-and-sheep-in-the-alps.webp 1400w" sizes="(max-width: 720px) 100vw, 720px" type="image/webp" /> <source srcset="/static/c83bb1853eb00d1e96b19f19c04daff0/4f3ca/shepher-and-sheep-in-the-alps.jpg 180w, /static/c83bb1853eb00d1e96b19f19c04daff0/bac16/shepher-and-sheep-in-the-alps.jpg 360w, /static/c83bb1853eb00d1e96b19f19c04daff0/c0c3d/shepher-and-sheep-in-the-alps.jpg 720w, /static/c83bb1853eb00d1e96b19f19c04daff0/44838/shepher-and-sheep-in-the-alps.jpg 1080w, /static/c83bb1853eb00d1e96b19f19c04daff0/22cab/shepher-and-sheep-in-the-alps.jpg 1400w" sizes="(max-width: 720px) 100vw, 720px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/c83bb1853eb00d1e96b19f19c04daff0/c0c3d/shepher-and-sheep-in-the-alps.jpg" alt="Shepherd and sheep doing their thing" title="Shepherd and sheep doing their thing" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> Shepherd and sheep doing their thing - <a href="https://www.flickr.com/photos/joanet/5797069081/in/photolist-9Qgw6t-9QguEV-9Qgt2P-8QzaUf" target="_self" rel="nofollow">Source</a> Meet Johann, a middle-aged, industrious shepherd from an Alpine village. He and his family run a medium-sized farm with about 200 sheep. In his youth, he started with a modest 30 sheep received from his reluctant father, as a loan — needless to say it didn’t help smooth their already fractured relationship. Armed with the grit commanded by the brutal heights he calls home, he slowly increased his flock to a respectable size, loan returned and all. Johann even added some 20 goats in the mix, just for diversity — he kinda likes their playfulness. He knows all there is to know about sheep (goats are kind of the same, in his book) and is thinking to grow his flock to about 1000. He won’t have to work much more — the sheep tend to know how to keep out of trouble and eat that darn grass. OK, maybe a couple more dogs and some extra helping hands come shearing or milking time — raising seven children just might have been worth it. A manageable undertaking, regardless. Now, meet Joseph, a middle-aged, clear-eyed mayor of a small Belorussian village, just north of Minsk. His village is home to about 900 people. Wonderful, hard-working, diligent people Joseph has come to know and respect. Every Monday morning, he goes on his “troops inspection” as he likes to call it (he comes from a long line of army men). Joseph makes his way down every street, no matter how small, and pays close attention to each household as they go about their life. Each of these Monday walks reassures him that all is well in his little village. Under his 4-terms watch, things have gone from poor to great. The thought fills him with pride and confidence. So much so, that he becomes convinced he is on to something bigger here. His way of managing this community is right. More than right.. perfect! In a foggy September Monday morning, upon finishing his “inspection,” he has a stroke of genius: how much better it would be if other, less fortunate people could enjoy this as well?! And with their help, how much better could his village get?! The sparkle in his eyes could pierce through the thickest of fogs. That very day he drafted a plan to start a PR campaign in neighboring villages with the goal of increasing the village population to 4000, preferably five or even 6000. A couple of years should be enough. Who would you trust with your life savings? Apart from those of you that dosed off by now, I reckon most would find Johann, the shepherd, as a more reasonable, trustworthy kind of guy. He deals with a homogeneous flock, and he knows it. He is well aware of the short-range of behaviors sheep exhibit in a group, and even invites some goat-driven diversity. Joseph, the mayor, on the other hand, ends up thinking about large groups of people, exhibiting a far greater range of behaviors, in pretty much the same terms as Johann, to everyone’s peril. “What works for a few will work for many.” You and I both know how such a people-management approach can go terribly wrong, fast. We see it in history, we see it in our flat corporations, in our disconnected communities and nations. Groups of people (entities with complex behavior) will develop structure whether one likes it or not. And the larger the group, the more complex and unpredictable the structure. All because each sub-group behaves quite differently from the sum of individual behaviors, even if we would consider only sane, well-behaved, law-abiding individuals. <h2 id="making-the-jump-from-content-to-sites" style="position:relative;"><a href="#making-the-jump-from-content-to-sites" aria-label="making the jump from content to sites permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Making the jump from content to sites</h2> All sheep and villagers aside, I see great peril in tackling complex systems like those involved in building entire, dynamic sites, through the lenses of a build-up of experience anchored in a linear world. Bottom-up will not do for a healthy comprehension. Alas, top-down will not do it either. Only pogo-sticking from top to bottom, and occasionally randomly in between, could allow for proper solutions to surface. Getting back to WordPress’ Project Gutenberg, I can see some early signs of the unaccounted increase in complexity lurking just outside of the post content. The first became apparent in tackling the header and the footer in a blocky way. Even in the relative safety of this narrow problem, what had seemed to work for content appeared to be insufficient. And for good reason: site menus, logos, copyright notices, or announcement bars don’t seem to have the same agenda as a paragraph or an image. Those simple groups of text, links, icons, and images seem to be from another planet. The reality is that they are, despite some shared similarities with the content “people.” The difference lies in their higher responsibility and increased connectivity to various parts of a site. These are entities with more on their minds and they can’t fulfill their “calling” without a setup/environment that allows for complex “thoughts” to be expressed. My gut tells me that things are only going to get weirder the more we venture up the abstraction ladder. One should slow down and think more at each small step. <img src="/1daffef89d227659cac514f9171a6bcc/to-boldly-go-where-no-one-has-gone-before.gif" alt="Some Star Trek training may be required">Some Star Trek training may be required - <a href="https://vulhcan.co.vu/post/114700084030" target="_self" rel="nofollow">Source</a> <h2 id="making-the-jump-but-in-vr" style="position:relative;"><a href="#making-the-jump-but-in-vr" aria-label="making the jump but in vr permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Making the jump, but in VR</h2> Keeping up with the bottom-up ethos of the WordPress block editor process, the team decided that the first thing they should tackle, on a global level, should be styling. Thus work on the <a href="https://github.com/WordPress/gutenberg/issues/19611" target="_self" rel="nofollow">Global Style System</a> started. I presume the narrowed scope of this problem seemed a great fit for a testing ground of ideas related to handling block-based websites, globally. “If we could get global styling working, we are much closer to cracking full-site editing.” I am intimately aware of the challenges posed by building up such a system through my work at Pixelgrade (we call it Style Manager). It is hard, but doable, in large part because it relies on a tried-and-tested system that tackled most of the deeper issues: CSS. It is the global styling system of the web, and all we need to do is play nice with it. That is pretty much what the Gutenberg team is aiming at. My point is that the lessons one may learn from building such a system are only marginally applicable to the more abstract scope of handling an ecosystem of blocks. Again, there is vast opportunity for gaining false confidence. A much more fertile learning scenario would involve aiming to free blocks from “the tyranny of the cascade” (the C in CSS) and allow them to be styled in relation to neighboring blocks. The same result we now need to write CSS for, by hand. Tackling the problem of establishing ad-hoc relations between blocks is the real hard nut one needs to crack for full-site editing to truly work. And the sooner it does, the faster and nicer things will coalesce into a stable, working system. And less time will be wasted on reengineering the fundamentals. <h2 id="static-versus-dynamic" style="position:relative;"><a href="#static-versus-dynamic" aria-label="static versus dynamic permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static versus dynamic</h2> Language is a bitch. The words we use are the words we think with. The more we trust words, the greater the risk of them leading our though processes astray. WordPress is an ecosystem that eats and breathes dynamism. This is what made it so wildly successful. WordPress sites are dynamic by default. You don’t start with a static scenario and start bolting on dynamic bits (like JAM stack solutions aka static site generators). This runs so deep in the ecosystem that we often take it for granted, and completely forget about it. A piece of content is not dynamic. It’s as static as things get. Sure, you can edit it, intertwine it with dynamic blocks, even aggregate pieces of it into larger structures. But, fundamentally, the actual content is still very much “set in stone” (physicality at work again). No wonder editing content is one of those site permissions we easily give to just about anyone involved in creating and maintaining a site. It is safe because of its static nature, block-based or classic wysiwyg. We rightly feel shivers running down our spines when a non-technical crew member asks us for permissions to play with the overall site structure. We know how connected things are and how fast they get messed up. We know we need to tread carefully. Alas, there is no “structure” in “full-site editing.” It’s just (content) editing on a larger scale. You feel it safe, even welcoming. I am confident this language-induced sense of safety is a false one. Real, but false. Complex systems (like a website, not individual pages) are not edited or stitched together. Complex systems are built, actually grown. How safe does “full-site growing” sound? Far less, if my intuition is any good. How about “full dynamic-site growing”? Not so confident anymore, ha? <h2 id="professional-swingers" style="position:relative;"><a href="#professional-swingers" aria-label="professional swingers permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Professional swingers</h2> If individual blocks are to thrive and sustain dynamic sites, they need to get swinging, for a living. Blocks need to be smart enough to establish relationships, to adapt to changing environments. Otherwise, they are not much better than bricks in a wall — useful, but dumb. How could a collection of blocks add up to something coherent and valuable without a way to establish relationships and describe behaviors between individual blocks? Not just visually, but also functionally. To handle the needed complex behaviors that add up to the benefits of having a more complex organism (as opposed to individual, dumb blocks), we need to “enhance” individual blocks (or homogeneous groups of them) with the ability to “sense” other blocks and interact with them, while sensing and interacting with the overall organism boundary. In WordPress’ Gutenberg editor, blocks are firmly rooted in the “dumb” HTML world, by design. And this is a problem for “full dynamic-site growing.” A minor nuisance for “content editing,” but a proverbial “spanner in the works” for anything aiming for a touch of complexity. Albeit, blocks are a higher level HTML (as <a href="https://developer.wordpress.org/block-editor/principles/key-concepts/#blocks-are-higher-level-than-html" target="_self" rel="nofollow">clearly stated</a> by the architects) meaning HTML elements “enhanced” with special HTML comments. More meaning is definitely conveyed than it would be possible with HTML’s limited grammar. But this is a static, almost decorative meaning. The fact that I have a full wardrobe of clothing to chose from (as opposed to cave dwellers), doesn’t make me into a Don Juan of socializing. It might boost my confidence and appeal, but the minute I would open my mouth.. My point is annoyingly the same: what worked for (static) content, will not work for (dynamically) describing relationships between contents. <h2 id="blocks-need-to-speak-english" style="position:relative;"><a href="#blocks-need-to-speak-english" aria-label="blocks need to speak english permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Blocks need to speak English</h2> From a language perspective, blocks/HTML elements that can only “speak” in simple attributes (key-value pairs) have about the same chance at storytelling as a caveman unable to use more than one word (or sound) at a time. ‒ Tree.. ‒ What tree? ‒ Tree tree.. (he points to it) ‒ What is it with that tree? ‒ Bad.. bad.. ‒ Did that tree do something?! ‒ Me.. Booboo.. (he is starting to get annoyed by my “stupidity”) ‒ You are not feeling fine? Can I help you with something? ‒ Tree.. Bad.. Me.. Booboo.. (and he points to his backside) ‒ Oh! You fell from that tree and hurt your ass. I feel for you, man.. of all the places one can get hurt, that’s the worst. ‒ Booboo.. (sobbing) He didn’t understand a thing I was saying, but I am pretty sure I got it, and I could be there for him — a fellow human comforting another in coccyxian pain. That is pretty much the pinnacle of “conversations” blocks can have. And that was a face to face conversation — think about how would that go over the phone. Clearly, swift, efficient, predictable relation-making is out of the question. When I say that blocks need to speak English, I meant that their interfaces (APIs) should allow for complex descriptions (layered, hierarchical, structured). Also, there should be mechanisms for feedback-loops as no relationship thrived based solely on monologues. Maybe in the form of contracts between blocks or groups of blocks. I am the first to admit that this is a very hard problem to crack. No doubt about it. Thankfully this is not a new problem, not at all restricted to website building. People have encountered it everywhere complex systems were meant to be built in a predictable, consistent manner. There are countless academic papers and PHD works that take a stab at it; sometimes in part, sometimes in full. One should leverage whatever past insights and mistakes others did, especially when tackling such a thorny problem. <hr> So, should we call it quits and forget about it? Should we focus on more “visible” endeavors that would satisfy more immediate needs? Should we just ignore all this complexity, and push right ahead hopeful of some epiphany? No, no, and no. I say this is a very worthy challenge to take on. It has all of the right ingredients to truly change things for the better. Not just in WordPress, but throughout the web and beyond. What I advocate for is to show this “enemy” its due respect by taking as much time as possible to think, deeply, to study and experiment with other’s work on similar problems, to force ourselves to try at least two or three different ways to solve each global problem, to make sure we leave room to reverse course when our hypotheses lead us into dead ends. I wrote all this because I care, and I would love to see this project reach its true potential. I also love thinking about complex systems, but that is secondary. Remember, WordPress, the web and beyond.. <hr> Since I published this essay, lots of appreciative people kept asking me about what specific experiences and ideas I can share about “blocks needing to be smart enough to establish relationships, to adapt to changing environments.” I will happily oblige to go further down this rabbit hole. As an interim step, I felt the need to first share some thoughts on what I consider to be <a href="/the-good-wordpress-theme/">the roles and responsibilities of a good WordPress theme</a>.https://thinkwritecode.com/the-state-of-the-wordpress-economy/https://thinkwritecode.com/the-state-of-the-wordpress-economy/Thu, 05 Dec 2019 01:24:08 GMTToday, the WordPress economy, a vital part of the ecosystem, is experiencing some severe growing pains. Long ignored imbalances, obsolete beliefs, and governance vacuums, to name a few, coupled with monopolistic and polarizing tendencies of the greater digital economy, threaten to completely change the nature of WordPress. Unless more of us start to consider a wider viewpoint, start discussing openly about what is happening in light of our shared values and principles, unless we find the strength to call out hypocrisies and conflicts of interest, we may very soon find ourselves looking at a WordPress ecosystem far removed from the ethos that galvanized the interest and dedication of so many. This is me doing my part. I hope it helps. <span class="gatsby-resp-image-background-image" style="padding-bottom: 70%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHbmrXDgK//xAAZEAACAwEAAAAAAAAAAAAAAAABAgAQERL/2gAIAQEAAQUCYxHaiNnNf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABgQAAIDAAAAAAAAAAAAAAAAABAhABFR/9oACAEBAAY/Ao8ssf/EABkQAQADAQEAAAAAAAAAAAAAAAEQETEhAP/aAAgBAQABPyFjhr6xb3hOGuI//9oADAMBAAIAAwAAABD3z//EABcRAAMBAAAAAAAAAAAAAAAAAAEQESH/2gAIAQMBAT8QGVf/xAAWEQEBAQAAAAAAAAAAAAAAAAABERD/2gAIAQIBAT8QVoTP/8QAHRABAAIBBQEAAAAAAAAAAAAAARExIQAQQVFxYf/aAAgBAQABPxA0rFnzj5OgmpAjFwmcybRSIk7pOtTDCLWWGzzG3//Z'); background-size: cover; display: block;" > <picture> <source srcset="/static/06f6c38147c0d89b563dcfe25dc897d9/89b46/state-of-the-wordpress-economy-chart.webp 180w, /static/06f6c38147c0d89b563dcfe25dc897d9/97ead/state-of-the-wordpress-economy-chart.webp 360w, /static/06f6c38147c0d89b563dcfe25dc897d9/fb07f/state-of-the-wordpress-economy-chart.webp 720w, /static/06f6c38147c0d89b563dcfe25dc897d9/64908/state-of-the-wordpress-economy-chart.webp 1080w, /static/06f6c38147c0d89b563dcfe25dc897d9/ff8d7/state-of-the-wordpress-economy-chart.webp 1440w, /static/06f6c38147c0d89b563dcfe25dc897d9/56b60/state-of-the-wordpress-economy-chart.webp 2000w" sizes="(max-width: 720px) 100vw, 720px" type="image/webp" /> <source srcset="/static/06f6c38147c0d89b563dcfe25dc897d9/4f3ca/state-of-the-wordpress-economy-chart.jpg 180w, /static/06f6c38147c0d89b563dcfe25dc897d9/bac16/state-of-the-wordpress-economy-chart.jpg 360w, /static/06f6c38147c0d89b563dcfe25dc897d9/c0c3d/state-of-the-wordpress-economy-chart.jpg 720w, /static/06f6c38147c0d89b563dcfe25dc897d9/44838/state-of-the-wordpress-economy-chart.jpg 1080w, /static/06f6c38147c0d89b563dcfe25dc897d9/06430/state-of-the-wordpress-economy-chart.jpg 1440w, /static/06f6c38147c0d89b563dcfe25dc897d9/9bea7/state-of-the-wordpress-economy-chart.jpg 2000w" sizes="(max-width: 720px) 100vw, 720px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/06f6c38147c0d89b563dcfe25dc897d9/c0c3d/state-of-the-wordpress-economy-chart.jpg" alt="WordPress logo restyled as a pie chart graph" title="WordPress logo restyled as a pie chart graph" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> Illustration by: <a href="https://www.instagram.com/elaolaru/" target="_self" rel="nofollow">Mihaela Olaru</a> First of all, some clues about my background so you can gauge the biases that may push me in certain directions. I’ve been working with WordPress in one form or another for the past ten years. Going back about six years, WordPress has been my primary focus through my work at <a href="https://pixelgrade.com/" target="_self" rel="nofollow">Pixelgrade</a> (co-founder and CTO), a niche maker and seller of premium WordPress themes. My exposure to the WordPress economy has been quite wide starting with custom client work, continuing with products on <a href="https://themeforest.net" target="_self" rel="nofollow">ThemeForest</a> (an Envato marketplace), then expanding to <a href="https://wordpress.com" target="_self" rel="nofollow">WordPress.com</a>, finishing with directly selling themes through a self-hosted shop at <a href="https://pixelgrade.com/" target="_self" rel="nofollow">pixelgrade.com</a> and distributing free WordPress themes through <a href="https://wordpress.org" target="_self" rel="nofollow">WordPress.org</a>. Now that you have a sense of my experience in the WordPress space, join me in an exploration of the forces, trends, and future developments of this open-source ecosystem. The open-source basis is important because I believe WordPress is a prime example of the dynamics that naturally emerge in any open-source software project. Much of what follows ultimately ties back to this. <h2 id="what-is-the-wordpress-economy" style="position:relative;"><a href="#what-is-the-wordpress-economy" aria-label="what is the wordpress economy permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>What is the WordPress economy</h2> For me, an economy is all about value, most importantly, perceived value. With this in mind, the WordPress economy is comprised of all those individuals or companies that provide to or derive value from the WordPress project. Customers that pay for a service or product are only one part of this economy. Just as important are core contributors (designers, developers, project managers, content writers, translators), community builders and advocates, legal advisers, WordCamps organizers and volunteers, meetups organizers, and the list could go on and on. On equal footing, we have the various individuals and companies that provide services around WordPress, create products to be used alongside it, and distribute those products to end-users. It matters very little if money exchanges hands. What matters is that value gets added and distributed in the ecosystem. Places like WordPress.com, ThemeForest.net are clearly part of this economy, along with various agencies and themes or plugins shops. What people are not so clear about is whether WordPress.org is part of it. In keeping with the above, WordPress.org is definitely part of the WordPress economy as the de facto free marketplace for everything WordPress. As long as they are defining admission rules regarding code quality and security, managing the review and listing of approved items, and distributing them in the form of ready-to-use products, this makes WordPress.org a clear marketplace, not simply a code repository (that is what Github does). <h2 id="a-little-thing-called-gpl" style="position:relative;"><a href="#a-little-thing-called-gpl" aria-label="a little thing called gpl permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>A little thing called GPL</h2> The cornerstone of any open-source ecosystem is its software license — think of it as a social contract or bill of rights. WordPress adopted the <a href="https://en.wikipedia.org/wiki/GNU_General_Public_License" target="_self" rel="nofollow">GNU General Public License</a> (GPL for short). This license has some very clear and powerful characteristics: <ul> <li>it’s a free and open-source software (FOSS) license meaning you don’t just have to publicly release you source code but you have to allow its redistribution;</li> <li>it’s a <a href="https://en.wikipedia.org/wiki/Copyleft" target="_self" rel="nofollow">copyleft</a> type of license meaning that any piece of software that is based on GPL-licensed code must also adopt the GPL license; many dub this as having an infectious behavior.</li> </ul> The GPL sets the stage for all those involved in WordPress. No matter how hard any of them try to push it to one side, it stubbornly finds its way back in any meaningful argument or decision. It’s not an elephant that stumbles over precious china, more like a single-minded bull that will not allow anyone to forget they are in an arena under his reign. All this is exactly how the GPL’s creator envisioned it. No accidents or surprises here. I’ve struggled a great deal in the past two years with the philosophy behind the GPL, it’s economic and community implications, and, ultimately it’s view of human nature. Today, I am firmly in the camp of <a href="https://www.linuxjournal.com/article/9911" target="_self" rel="nofollow">Eric S. Raymond</a> and <a href="https://m.signalvnoise.com/open-source-beyond-the-market/" target="_self" rel="nofollow">David Heinemeier Hansson aka DHH</a> concerning the alignment of GPL with today’s software landscape: it makes little sense for ideological and economic conditions of the 1980s (as seen by a brilliant, but <a href="https://www.wired.com/story/richard-stallmans-exit-heralds-a-new-era-in-tech/" target="_self" rel="nofollow">awfull man</a>) to shape today’s collaborations and solutions. We are now 30 years later, and in Internet time, that means a couple of centuries later. Note: If you are after a deep dive into the history, concepts, and biases behind the creation of the GPL by Richard M. Stallman and the Free Software Foundation, I highly recommend <a href="http://www.softpanorama.org/Copyright/License_classification/index.shtml" target="_self" rel="nofollow">Labyrinth of Software Freedom</a> by Nikolai Bezroukov. Try ignoring the lack-luster styling because the content is solid and quite enjoyable. <h2 id="making-a-living-in-a-gpl-world" style="position:relative;"><a href="#making-a-living-in-a-gpl-world" aria-label="making a living in a gpl world permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Making a living in a GPL world</h2> If one was to fanatically follow the license’s intent, as some do, no one could sell GPL software products. Everyone should just generously give away all the code that they produce. Replenish the commons as the 19th and 20th-century egalitarians warned. Sadly, developers are also human and need some money to get by in this capitalist world. Richard Stallman had a now-infamous solution: work at a fast-food by day and code by night. It would make for a good joke if he didn’t actually mean it and crafted a software license to match. But developers are inventive, ambitious, high-maintenance creatures. A time-intensive, low-paying job would not cut it. Along came the equally infamous solution: produce free, quality software, win a reputation, and do consulting work for clients that use it — sell services. Now, what about the folks that don’t enjoy client-work endlessly and wish to take a stab at working full-time on digital products? Well, there is a solution for this too, “the GPL loophole”: don’t distribute your GPL-licensed code, just sell access to it. The SasS (software-as-a-service) business model was the obvious tactic. Few people seem to notice the absurdity of the situation: it defeats the whole free and open-source thing, the contributing back to the commons mantra. But who cares?! There is no violation of the license — everything is just fine, at least in the minds of purists. I don’t know about you, but this all feels like having a nail and using it as a toothpick, a tool to scribble on walls, to stab others [in self-defense], anything but the obvious: get a hammer and drive it through a piece of wood. All because someone, at some point in time, had an exaggerated wood appreciation or a misplaced nail-on-wood fetish. <h2 id="selling-gpl-licensed-software-products" style="position:relative;"><a href="#selling-gpl-licensed-software-products" aria-label="selling gpl licensed software products permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Selling GPL-licensed software products</h2> Human nature, being.. well.. human nature, could not simply accept the counter-intuitive reality consequence of the GPL. People want freedom in the way they do business and value their work. Along came the split-licensed WordPress themes and plugins that pushed the whole derivatives narrative to its limits by arguing that only the PHP code qualifies as a derivative work under the terms of GPL, while the rest of the product (CSS styling, JavaScript code) is free to use other licenses. For any actual user of a plugin or theme, both parts are needed to get some value from the product. Product makers used this to enforce a stricter license that would, in effect, eliminate the free part from the “free and open-source” nature of GPL. If this is in line with the GPL is an ongoing debate with no end in sight. The vast majority of individuals and companies selling products in the WordPress space did “the right thing” (under pressure from Automattic and WordPress.org) and chose a “100% GPL” license, distributing all their code under the GPL. If you have followed along, I guess the first thing that comes to mind is: but how can they stay sustainable since, in an extreme situation, they could sell each product just once, after which that buyer would distribute it for free? The reality is that all those individuals and companies are at the mercy of decency. They simply hope that extreme scenario will not happen. They all rely on customers doing, yet again, “the right thing” and actually buy the product they wish to use. Some do, some don’t. As a precaution, product makers have reached back to the “sell services” solution: you only get product updates and, most importantly, product support (a service in disguise) if you actually buy the product — shaky, stressful way of doing business. <hr> After this whole extended introduction, a simple question begs for some answering: who does the GPL benefit since everyone seems to be fucked in one way or another? Let’s explore some possible answers. <h2 id="what-customers-havent-asked-for" style="position:relative;"><a href="#what-customers-havent-asked-for" aria-label="what customers havent asked for permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>What customers haven’t asked for</h2> Someone buying a GPL product is automatically empowered by the four freedoms, whether she knows it or not: <ul> <li>run the program as you wish, for any purpose (freedom 0);</li> <li>study how the program works, and change it so it does your computing as you wish (freedom 1);</li> <li>redistribute copies so you can help others (freedom 2);</li> <li>distribute copies of your modified versions to others (freedom 3). By doing this you can give the whole community a chance to benefit from your changes. \</li> </ul> <a href="https://www.gnu.org/philosophy/free-sw.html" target="_self" rel="nofollow">GNU - What is free software?</a> Great! More freedom to the people! If only they’ve asked for it or knew what to do with it. In the everyday reality of people that seek a solution to a problem of theirs, only the first freedom counts. The rest matter only to fellow developers. This is a classic example of coders’ self-absorbed importance and over-optimization. They tend to suffer from this quite a lot, by <a href="https://thinkwritecode.com/fixing-the-word-one-code-release-at-a-time/" target="_self" rel="nofollow">my judgment</a>. After years of interacting with customers of all kinds and helping them get the most out of their purchase, I can safely say the GPL is last on their list of concerns, if at all. It seems that the GPL, as opposed to other, friendlier, OSS licenses like <a href="https://en.wikipedia.org/wiki/MIT_License" target="_self" rel="nofollow">MIT</a>, is not making a meaningful contribution to the lives of non-technical software users. <h2 id="corporatize-the-anti-corporate" style="position:relative;"><a href="#corporatize-the-anti-corporate" aria-label="corporatize the anti corporate permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Corporatize the anti-corporate</h2> The GPL was openly aimed at messing with (preferably destroying) the big, closed-source corporations of the 80s and 90s (think Microsoft, Oracle, IBM, etc.) in an attempt to save society from their evil clutches. It’s the purest distillation of saying “Fuck you!” to a big tech corporation. A worthwhile stance, at least until the corporation, ever resourceful and farsighted, answers back with “Okay!” Corporations realized that open-source software is actually a very big opportunity for them, with benefits in all the right places. Their instinctual fear of customers taking their software and walking away was far removed from reality. Customers actually didn’t care, didn’t have the technical skills to do the walking away, or knew how to bypass licensing logic and wouldn’t give a damn about EULAs. Open-source was ticking corporate boxes with surprising ease: <ul> <li>democratic at first glance but with totalitarian tendencies when making decisions (who doesn’t like a Benevolent Dictator For Life, BDLF for short?);</li> <li>labor intensive requiring massive investments, but with plenty of free contributions;</li> <li>a badge of honor for developers on payroll with little extra motivation required;</li> <li>trustworthy security with mostly free peer-reviews;</li> <li>great public relations with free marketing and employer branding.</li> </ul> WordPress, as an open-source project, followed the same route, even picking up speed in recent years. It reached a point where the market economy is clearly leaning toward big corporations: hosting providers, Automattic (wordpress.com), and fellow large agencies serving enterprises, taking the spoils on one end, and freelancers or small teams doing consulting work, at the other end, fighting over scraps. There are few successful entities in the middle. The obvious middle players, themes and plugins shops, get acquired left and right — it’s open season for Mergers & Acquisitions (M&A, in corporate talk). Even here, the GPL lends a helping hand to bigger players looking make a purchase at the expense of makers: product companies have little bargaining power during negotiations since they can’t actually value their products (prospective buyers could just fork them), only their brand, existing customer community, and their employees. It sure seems like a far cry from “democratize publishing.” More like “corporatize publishing.” <h2 id="brand-over-code" style="position:relative;"><a href="#brand-over-code" aria-label="brand over code permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Brand over code</h2> As plainly stated by the GPL — if you look at it with your business glasses, code is only destined to be poured into that big bucket called “the commons”, creators losing all rights and most financial value. As long as the project “honors” developers with their contributor badge, all is forgiven. I find it hilarious that a software license meant to protect passionate, idealistic developers (and the world) from the onslaught of evil corporations, ends up stripping those same contributors’ work of any meaningful value. But value is like energy: it never gets lost, it only changes hands. If someone’s work is discreetly stripped of ownership and value, someone else must be the recipient of that same value. Besides the community that gets to “graze” on a replenished “commons,” a fair amount of value goes to the brand of that particular project. In today’s digital landscape, the GPL license is proving to be just right for those who are after the brand of an open-source project, not its code. In the WordPress ecosystem, the GPL is favorable only for platforms like WordPress.com and agencies banking on the trust WordPress the brand commands. Product creators benefit to some extent from the extended market size, but they have a much harder time distinguishing their work from the free WordPress core and free WordPress.org marketplace sub-brands. WordPress the brand has become much more powerful and valuable than WordPress the code. The WordPress community of developers, designers, marketers and users is a massive marketing machine for whoever is better positioned to capture brand value. By now, it should come as no surprise that Automattic has sole rights to use the WordPress trademark for <a href="http://wpandlegalstuff.com/using-wordpress-trademarks-business-product-service/" target="_self" rel="nofollow">commercial purposes</a> (it actually <a href="https://wordpressfoundation.org/2010/trademark/" target="_self" rel="nofollow">was their trademark</a> to being with). The other important entity with full rights to use the trademark is WordPress.org controlled by the CEO of Automattic through the WordPress Foundation. I don’t know about you, but to me, this game seems awfully rigged when it comes to free-market competition. If we turn our focus to WordPress the code, the balance of power is the same, despite the thin veil of community control. The WordPress core is very much stale when it comes to meaningful changes to improve extensibility and contributions, hence give everyone a fairer chance to succeed. Just look into these areas or initiatives: the WordPress dashboard, WordPress Fields API, WordPress block editor, to name a few. For those of you in the know, the WP-REST API doesn’t qualify since it is focused less on extensibility, but on data portability. Looking at the way stuff got done in recent years, a lack of interest from Automattic or enterprise-focused agencies equaled a deafening silence among core committers and, consequently, lack of effort and focus. If any of them showed keen interest, this translated, almost overnight, into a massive push to get things done. The perfect example of this state of affairs is the surprising speed and efficiency with which the new block editor (Gutenberg) came into being [in the WordPress core]. I think it is fair to say that the fortunes of WordPress are firmly in enterprise hands. <h2 id="winter-is-coming-for-wordpress-plugins" style="position:relative;"><a href="#winter-is-coming-for-wordpress-plugins" aria-label="winter is coming for wordpress plugins permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Winter is coming for WordPress plugins</h2> Premium plugins, in stark contrast to premium WordPress themes, had a good ride this past couple of years. They’ve managed to keep and even increase their projected value while experimenting with more sustainable business models: monthly or mostly yearly subscriptions. Plugins managed to increase their prices across the board, without much pushback from customers. I am afraid the good days are coming to an end for premium WordPress plugins. First, promising, platform-like plugins get scooped up and merged into the offerings of hosting services and platforms like WordPress.com. Second, many successful, functional plugins are either bought or replaced by similar solutions on platforms (hosting services are the main actors here). Third, successful page-builder plugins will only get bigger, bundling more and more functionality. That leaves only highly targeted plugins with a fighting chance of staying independent — and these are overwhelmingly technical, primarily aimed at site administrators. <h2 id="dismantling-wordpress-themes" style="position:relative;"><a href="#dismantling-wordpress-themes" aria-label="dismantling wordpress themes permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Dismantling WordPress themes</h2> Premium WordPress themes had their glory days until about three or four years back. I know this since my team and I experienced it first hand. Sadly, neither the broader community nor I saw what was just around the corner. First, the market started a race-to-the-bottom pricing war, only benefitting platforms like Envato. Some of us stayed put and refused to engage. It made little difference since the customer’s mind was hooked on ever-decreasing prices. Second, page-builders started to chip away the value-proposition of themes, cleverly incentivizing them into ever-tighter integrations. Third, the new default WordPress block editor is in the process of delivering the final blow to themes as we know them. Themes seem to be targeted from all sides. There is a good reason for this onslaught: design as a product is not aligned with the interests of large players in WordPress, and the web in general. It is getting increasingly harder to sell design, and nobody, besides themes, has any incentive to do that. The trend is to sell entire sites or solutions to specific problems. Design has become a selling vector for platforms and agencies, not a product in and of itself, despite the constant struggles of serious theme shops. The premium WordPress themes market is getting thinned out: on the low end, you have massive upsides for platforms (like WordPress.com, GoDaddy, Elementor) that don’t really need themes as products, just decoupled, standardized, preferably free designs; on the high end, you have all the tools to build complex systems (Gutenberg, WP-REST API, platform-like plugins like WooCommerce), systems that can easily bear the costs of custom design work. Once Gutenberg delivers full-site editing capabilities, and the block directory is in full swing, you can be sure themes will be reduced to merely providing a general, style-guide CSS. Few people will be willing to pay for that. Unless themes makers manage to take the initiative and do their own dismantling before the ecosystem does it for them, times ahead are pretty grim. Without a doubt, this process will take some serious creativity, effort, and preferably collaboration between like-minded theme shops. I see no other way to at least survive and possibly thrive in this new WordPress landscape. <h2 id="alternative-futures" style="position:relative;"><a href="#alternative-futures" aria-label="alternative futures permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Alternative futures</h2> I am not a fatalistic person, focused only on what is wrong with the world. I consider myself quite optimistic and fully aware that the most likely future seems inevitable as long as nothing changes. Things can change, and they should. Individual contributors, small and medium-sized companies, and well-intended customers are, in fact, the overwhelming majority of this ecosystem. We should push for a much fairer representation structure by supporting initiatives like <a href="https://wpgovernance.com/" target="_self" rel="nofollow">the WordPress Governance Project</a>. Without regaining some control over decisions processes, this economy is at the mercy of few. Each of us needs to start paying more attention to our brands through the way we communicate with our peers and our customers, through how consistent we are in our decisions on sensible topics, all the way to speaking up whenever we get the chance, with clarity and purpose. The WordPress ecosystem needs more diversity in strong brands that contribute to and influence its future. Each of us needs to embrace our ability to walk away from WordPress. It is liberating to know you can carve a destiny elsewhere if that is what you chose. It also gives added strength and importance to each of us, as we would no longer be sheep to be herded around. When it comes to alternate futures for WordPress plugins, I have little to offer today, besides the above. When considering other ways WordPress themes could contribute in the future, I have a few ideas. Themes authors <a href="https://github.com/wordpress/gutenberg/issues" target="_self" rel="nofollow">should engage</a> as much as they can with the current developments of the WordPress block editor, not so much through code, but clear arguments. At the same time, we could finally embrace what we’ve known for so long: customers want a complete site solution from us, not just a layer of styling. Don’t let the WordPress.org purists tell you otherwise. In accepting this, we may discover great bargaining power both in terms of pricing and in the overall economy. If we make the mental leap from theme authors to site solutions providers, I believe lots and lots of opportunities will open up — they were always there, but “theme authors” can’t dream about them, it’s not in their nature. Site solutions providers, on the other hand, could consider advanced, cloud-based wizards to set up a niche site, easier to understand abstractions like Colors or Fonts Palettes, adaptive, two-way design systems for agencies workers and customers, modularized offering with easy to understand pricing. I could go on and on. The crux of the matter is, despite all forces beyond our control, the only real obstacle is our ability to think clearly and freely. We are part of an open-source software project after all; clarity and freedom should be central to the game. <hr> Thank you for sticking with me this long. I’ve given it my best to make this exploration of the WordPress economy useful to everyone involved, without placing much blame on one actor or another. My goal is to understand the WordPress world for what it is while exploring what could be different. We need as much clarity in our minds and strength in our voices as possible if we are to help progress WordPress, and the web at large, in a meaningful way.https://thinkwritecode.com/fixing-the-word-one-code-release-at-a-time/https://thinkwritecode.com/fixing-the-word-one-code-release-at-a-time/Sun, 01 Dec 2019 17:24:08 GMTAsk yourself these questions: Since when someone who studied (or dropped out of) computer science can become the problem-solver of the world? Since when the God-like powers a developer feels when playing with code can be extrapolated to the greater good? Democratize publishing? Connect everyone on Earth? Organize all the world’s information and make it accessible and useful? <span class="gatsby-resp-image-background-image" style="padding-bottom: 45.55555555555556%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAJABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABQACBP/EABYBAQEBAAAAAAAAAAAAAAAAAAACA//aAAwDAQACEAMQAAAB6cmsZ0bMR//EABsQAAEEAwAAAAAAAAAAAAAAAAMAAQIhEjEz/9oACAEBAAEFAokotvhJ0FB5tr//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPwFX/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAHBAAAQMFAAAAAAAAAAAAAAAAAQAQIRExQUJR/9oACAEBAAY/Apt1SDTBC2YN/8QAGhABAAIDAQAAAAAAAAAAAAAAAQAhEEFxMf/aAAgBAQABPyEbMgFTowh5q6qacyr/2gAMAwEAAgADAAAAEKs//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8QU//EABcRAQADAAAAAAAAAAAAAAAAAAARITH/2gAIAQIBAT8Q2kP/xAAeEAACAgEFAQAAAAAAAAAAAAAAAREhMUFRcYGxof/aAAgBAQABPxBdXDxVfOiWWpSqI2WosbdZ0lSMuY9fpjP/2Q=='); background-size: cover; display: block;" > <picture> <source srcset="/static/c0e3e60d68316aa3df7d80f7d552dacc/89b46/Michelangelo_Creation_of_Adam_(cropped).webp 180w, /static/c0e3e60d68316aa3df7d80f7d552dacc/97ead/Michelangelo_Creation_of_Adam_(cropped).webp 360w, /static/c0e3e60d68316aa3df7d80f7d552dacc/fb07f/Michelangelo_Creation_of_Adam_(cropped).webp 720w, /static/c0e3e60d68316aa3df7d80f7d552dacc/64908/Michelangelo_Creation_of_Adam_(cropped).webp 1080w, /static/c0e3e60d68316aa3df7d80f7d552dacc/ff8d7/Michelangelo_Creation_of_Adam_(cropped).webp 1440w, /static/c0e3e60d68316aa3df7d80f7d552dacc/2a17b/Michelangelo_Creation_of_Adam_(cropped).webp 3524w" sizes="(max-width: 720px) 100vw, 720px" type="image/webp" /> <source srcset="/static/c0e3e60d68316aa3df7d80f7d552dacc/4f3ca/Michelangelo_Creation_of_Adam_(cropped).jpg 180w, /static/c0e3e60d68316aa3df7d80f7d552dacc/bac16/Michelangelo_Creation_of_Adam_(cropped).jpg 360w, /static/c0e3e60d68316aa3df7d80f7d552dacc/c0c3d/Michelangelo_Creation_of_Adam_(cropped).jpg 720w, /static/c0e3e60d68316aa3df7d80f7d552dacc/44838/Michelangelo_Creation_of_Adam_(cropped).jpg 1080w, /static/c0e3e60d68316aa3df7d80f7d552dacc/06430/Michelangelo_Creation_of_Adam_(cropped).jpg 1440w, /static/c0e3e60d68316aa3df7d80f7d552dacc/54522/Michelangelo_Creation_of_Adam_(cropped).jpg 3524w" sizes="(max-width: 720px) 100vw, 720px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/c0e3e60d68316aa3df7d80f7d552dacc/c0c3d/Michelangelo_Creation_of_Adam_(cropped).jpg" alt="Michelangelo's fresco painting in the Sistine Chappel titled The Creation of Adam" title="Michelangelo's fresco painting in the Sistine Chappel titled The Creation of Adam" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> <a href="https://en.wikipedia.org/wiki/The_Creation_of_Adam" target="_self" rel="nofollow">The Creation of Adam</a> fresco painting by Michelangelo Far too long developers have been playing with this world like it’s a video game. Little matters they are part of the same world. They can always hit “Reset”. Or just put on a pair of headphones and a hoodie, and call it a good day’s work. With copious amounts of passion, determination, and glee, developers have blessed us with large scale emotional, psychological and social experiments. Little thought or oversight was required since it’s only product development. My sincere, direct answer to this is: fuck developers, programmers, software engineers, and any nuance they may adhere to. I am also one of them, so fuck me too. What follows is my attempt at ringing a few, much needed alarm bells in the consciousness of any digital dweller, but primarily in the heads of those I just cursed. I hope you can stomach a little cursing when the situation calls for. <h2 id="a-different-kind-of-creator" style="position:relative;"><a href="#a-different-kind-of-creator" aria-label="a different kind of creator permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>A different kind of creator</h2> If you have a developer around, take a good look at him. You are in the vicinity of a little undercover God, regardless if he or she (but mostly he) knows it. From the tips of those fingers extremely powerful things can emerge. I am not joking or showering you in cheesy metaphors. Developers are not bound by the physical world in the way other creators are. Every day they get to create something from nothing. If this is not God then I don’t know what is. You may say that their creations are not actually real the same way a building, a plane or a smartphone is. Nothing could be further from the truth. Your three letters .com domain (if you are that lucky) is very much a valuable property just like your house or piece of land. With the difference that you’ve created it from nothing! This could be great if not for a little side effect. It is all too easy to lack any sort of feeling of responsibility to the outside world. You and your creation can develop your very own morality and ethics bubble since seemingly nothing from the outside contributed to your little love affair. As Nassim Nicholas Taleb so skillfully portrayed it in his book <a href="https://www.goodreads.com/book/show/36064445-skin-in-the-game" target="_self" rel="nofollow">Skin in the Game</a>, [developers] suffer from a severe lack of skin in the game. The same chronic condition financial workers and institutions exhibited ever since they started making money out of thin air (developers are not the only undercover Gods). Now, why would well-intentioned developers (not evil financiers) not realize this and correct course? They are clearly capable of understanding abstract, complicated things. <h2 id="the-age-of-developers" style="position:relative;"><a href="#the-age-of-developers" aria-label="the age of developers permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The age of developers</h2> No, not a mythical age of valiant nerds with hoodies. I am talking about the actual age of these undercover Gods. Despite one’s best efforts, despite his over the top ability to grasp a specific subject, despite the sheer dedication some of us exhibit since childhood, despite all this no one can jump the line to gain wisdom at a much higher rate. Yes, one can read bookshelves upon bookshelves of self-help books, dive into mountains of history books, and grasp the latest developments in cognitive or social sciences. A capable, fully committed person can absorb all this knowledge by the time they are 20. Alas, in the wicked real world, having knowledge of something does not equal understanding it. And learning only comes from combining the two. Vlad, that is easy! Just imagine a more capable, fully committed person able to absorb and understand vast sways of the human experience. To that, I ask: to what use? And you may counter with: obviously, to take on the problems of this world and come up with better solutions. History is filled with such characters and, by all accounts, they’ve taken that challenge and given it their best. So, what’s new? What is unprecedented is the age at which gifted people develop the audacity to try and conquer the world. All the people in history we would consider game changers by today’s standards had their incubation period as young adults, a few stints in their middle age, and delivered their main gift to the world in the latter part of their life. They lived a little before expecting to change the lives of others. They accumulated real-life experiences, their thoughts distilled and hardened over the years, their intuition honed through a lifetime of mistakes. That is what I call wisdom. And you can’t gain it through a book or by talking to wise people, even those close to you. You need to let time pass over you and all that you are. Now, look at where we are today in this God-ridden world. We’ve come to believe that since we have far more knowledge at our fingertips, since we can gather data about a multitude of perspectives on any given subject (hence understand it to some extent), we consequently live faster lives, at least on a mental timescale. So, we are entitled to tackle the same problems at a younger age than previously thought suitable. As Zuckerberg bluntly put it in his twenties: “Younger people are just smarter.” The median age at top tech companies <a href="https://www.payscale.com/data-packages/top-tech-companies-compared/tech-salaries" target="_self" rel="nofollow">speaks volumes</a> about this reality. Does this mean that people love or hate faster? That you are disappointed or exalted faster? That you go through different emotional states quicker? I very much doubt that, all physical, mental, and psychological health considered equal. Oh, if you are wondering where do coders go when they age (they must age, right?), there is a place made specifically for them. It’s called <a href="https://onezero.medium.com/ctrl-alt-delete-the-planned-obsolescence-of-old-coders-9c5f440ee68" target="_self" rel="nofollow">management</a>. <h2 id="a-change-of-scale" style="position:relative;"><a href="#a-change-of-scale" aria-label="a change of scale permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>A change of scale</h2> All of this would not be so worrisome if we kept the scale of previous centuries. Sure, young daredevils left their mark on our world, mainly through industry and war. But the scale and pace of their ambitions allowed the rest of society to take in the consequences (like climate change) and decide what to do about them. Sadly, society’s responses were often less than satisfactory, but we couldn’t say there weren’t ample opportunities to do something if we so wished. Now, the new techno-Gods in hoodies have ambitions and powers at an entirely different scale. The ubiquity of our new means of communication makes any solution ultimately aim for global reach. Alas, the consequences are also global. As if this wasn’t enough to complicate our reality, the areas developers are aiming to fix are much more complex in nature. We no longer play with such crude things like conquering land, gaining control of oil fields or other natural resources. We now want to fix human interaction, each of us’ self-esteem, privacy, public image, sense of identity, or even our sense of truth, the real Holy Grail (and money maker). Just consider how the top results on Google or posts in the Facebook feed are the authoritative source of truth for the majority of us. It doesn’t matter much if you don’t know anything about the person or entity portraying those truths, because in a uber-connected world how could you possibly know everyone? Given the constant time pressure, we are forced to defer responsibility and trust to the gatekeeper. I struggle with this each time I do an online search: are the reasons Google pushed this result in front of my eyes aligned with the characteristics I believe necessary for a reliable source of information? Often, I am left guessing and taking unnecessary risks. <h2 id="a-change-in-complexity" style="position:relative;"><a href="#a-change-in-complexity" aria-label="a change in complexity permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>A change in complexity</h2> One domain of CS that has seen more broad scrutiny is AI because we can relate with the idea of intelligent machines killing us all. We have Sci-Fi to thank for that. Sadly, when it comes to seemingly less apocalyptic undertakings like social experiments via social media our peril detection radars are much less attuned. Sure, an episode or two of Black Mirror comes in at times and sounds the alarm. Dystopian literary works also do their best to depict possible outcomes in chilling detail. I’m afraid this is, with annoying regularity, too little, too late. There is a disconnect between the huge leaps our technology and science have made and the adolescent understanding and appreciation we have over the consequences of our actions. Oftentimes we end up creating systems way beyond our understanding. It is quite easy for any developer on a team to create good building blocks and feel a sense of progress, of doing good work. But it is many orders of magnitude harder to understand how those blocks interact with each other and how a flaw in one impacts the whole system. Due to the almost mystic nature of computers and information, we tend to overestimate our capacity for understanding what we are building. Being the ever introverts awashed in impostor syndrome, we constantly overreach beyond our capabilities and brag about how much we have learned in doing so. That may be, but at what costs? Would we still brag about it if we saw actual people paying the price with their emotional, psychological, social, and even actual lives? Developers are raised and trained in a good learning environment where they get to make mistakes, analyze the conditions that surfaced them, make the needed adjustments and learn for the future. No harm, no foul. The problem is that the real world is anything but that. It is a wicked learning environment where the actual conditions can seldom be completely replicated, much less analyzed in all their implications. You don’t get to easily undo the consequences and try again. You don’t get a complete reality status report and formulate a sure solution. In fact, one might do more harm than good in attempting to fix a problem. A sane response to all this complexity would be to build anything of importance with resilience at its core. To protect our users from our obvious shortcomings. To shield society from the unknowns we inadvertently incorporate into our creations. That would mean a grasp of the known unknowns, and, perhaps, the unknown unknowns. More often than not, resilience is simply out of radar. Hell, it is even frowned upon since it implies we might not know everything (again that imposter syndrome). To make it even less palatable, it stinks of inefficiency, the archenemy of every self-respecting developer. <h2 id="a-change-in-preoccupations" style="position:relative;"><a href="#a-change-in-preoccupations" aria-label="a change in preoccupations permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>A change in preoccupations</h2> There is a deafening silence among the profession when it comes to humanities. As Seymour Papert put it in his awesome book <a href="https://www.goodreads.com/book/show/703532.Mindstorms" target="_self" rel="nofollow">Mindstorms</a>, there is a schizophrenic split between “humanities” and “sciences”. And for “good” reason: it is not in the job description! We are all just normal people with a knack for computers. We can’t all be expected to be polymaths. Then, why do we behave like ones? Why don’t we realize our natural limitations and bring on board people with perspectives to supplement our own? No one would demeanor us. No one would think less of our technical prowess. No one would pay us less. No one would have to suffer at the expense of us playing God. It certainly isn’t a place of comfort, certainty, or infallibility. It’s a place of constant doubt, uncertainty, and vulnerability. But then again, isn’t that how it should feel when you want to solve the problems of a world full of people? “Move fast and break things” may work to some extent for industrial exploration and expansion, but certainly not for “connecting all the people” or “democratize publishing”. <hr> The domain of this problem is vast, multifaceted, with many, many unknowns. So I will pause for now and give you time to take in my wandering thoughts, leaving you with some resemblance of solutions. I believe we should enter a period of denuclearization of the Internet and the web. We should stop this explosion of platforms we readily deploy on our society. Instead, we should peddle back a little and reconsider the initial goals computers had: helping each of us understand, think, and create better. We should focus yet again on the individual and his or her priorities and well-being.https://thinkwritecode.com/questions-with-no-answers-about-wordpress-org-themes-repo/https://thinkwritecode.com/questions-with-no-answers-about-wordpress-org-themes-repo/Mon, 10 Jun 2019 15:32:00 GMTThis post was originally a [large] reply in the WordPress.org Themes Review Slack channel. It is my attempt at raising awareness about the fundamental problems I see lurking just beneath the surface in the WordPress ecosystem (starting with themes, but not limited to them). I believe my thoughts deserved a better place than Slack, a place to breathe and refine a little. So here they are. <hr> First, disclosure and context: my background is in commercial themes (Pixelgrade). Me and my team have been hard at work for the past 5 or 6 years in building design-driven, solutions-oriented WordPress themes for creative individuals and small businesses. We deeply dislike multipurpose themes and have managed to stay clear of them, despite the obvious commercial allure. We have always strived to focus everything we do on the final user and what he or she wants to achieve with their site. Now, to get to the fundamental question: what is the mission of the WordPress.org themes repository? I would say that “providing free themes to WordPress users” is cutting it short and detrimental to WordPress users. Free, well-coded, secure, plugin-free, independent, all-style-no-functionality, accessible WordPress themes are not enough, not in 2019. This is all well and good for frameworks or starter themes, but far from enough if we want to actually help people, not just developers or agencies. People who wish to set up or maintain an online presence, either for personal pleasure or for commercial interests, have a set of needs, a vision, a set of goals they strive to achieve. They don’t really care about themes, plugins, and not even WordPress at the end of the day. They care about solutions that care about their own needs, regardless if they need to pay or get for free. I can sympathize (but not agree) with the direction developers, either working as freelancers or in an agency environment, wish to enforce and sustain: our life would be so much easier if these pesky themes stop doing anything other than styling, and leave it up to plugins to provide each functional building block – we are more than capable of choosing the right plugins for the job. If only WordPress was a project aimed at professionals. The last I heard of, it wasn’t – it was about “democratizing publishing” and making it easy for anyone to speak up and own its place on the web. <hr> The WordPress.org themes repository has an enormous advantage in the ecosystem: it is integrated into the core of every WordPress site out there, thus being the de facto place to look for a solution to style your site, in line with what you want to achieve. This advantage can be used for both good and bad. For good in setting standards of quality and ease of use (code quality is just a consequence), in protecting the (digital) rights of users (and gaining their trust in a virtuous cycle), in educating users about the many ways they can achieve their goals. For bad in setting low expectations (“the theme preview should look like crap for all themes” 🤷), in pushing people away from WordPress due to convoluted workflows, in focusing on developers instead of users, in not living up to its potential and leave it up to others (with commercial interests) to set the stage (like Envato’s influence on what people have come to think a theme should be). The WordPress.org theme repository doesn’t exist in a vacuum. It is not its own separate thing. It is an integral, core part of the WordPress ecosystem and should live up to this responsibility. The theme and plugin repositories have more in common than they think and should be aligned when making decisions about where to steer the ecosystem. While the plugin repository thinks of itself more like a code repository, the themes one is locked in a constant battle between being a de facto marketplace and a guardian of standards. The two should be closely aligned and rely on each other rather than going their separate ways. By looking down just on our own “piece of land” we only end up ruining the repo altogether - just look at how “ethically” Jetpack is picking up the slack with its very own “themes repo” right in the WordPress dashboard. Themes and plugins are two sides of the same coin: making sure that WordPress itself lives up to its own mission. Why should themes be so unfriendly towards plugins is beyond my understanding. <hr> Now to the primary debacle: upsells. It is quite prevalent [for me] that upsells are frowned upon by “true” WordPress.org believers. Everyone should be gifting some of their extra time and give [quality] code back to the community, no strings attached, out of the kindness of their heart. The GPL license certainly seems to lean that way, more so than other FOSS-friendly licenses. The last I heard, the generous 70’s didn’t save our world, or we wouldn’t be in the state we are today. I am all for actors with good intentions working towards the greater good – I consider myself and my team as such, but opinions tend to differ. Hell, I can even accommodate bad actors as long as they make meaningful contributions. But I am very much suspicious to anyone claiming that they hold no self-interest, no personal agenda, just pure, impartial kindness of the heart. Please… even I, the hopeless optimist and believer in people (those who know me will confirm), can’t swallow this – it is just too out there to be practical. I believe in pragmatic actors that are out-spoken, sincere, self-interested, with sufficiently aligned values. These groups are the real world changers, either up or down. Now back to our themes. Why should it matter if a theme has a commercial version or if someone just created it in their spare time out of sheer passion? Both can be great, and, sadly, both can be crap (coding standards followed and all). Should we focus more on preventing honest individuals or businesses from earning a living or on making sure that users have the best experience possible when they use WordPress? Isn’t the WordPress ecosystem stronger if more people are making a living off of it? I would think that 70 or 80% of a well designed, tested, maintained premium theme would be preferable, in general, to one cooked up by a developer with some spare time and passion. That is if the repo is after quality, not quantity, after user experience, not “we can’t discuss the design.” The user experience should be the first thing we discuss, in a holistic way, in line with the final goal the user has: solving a problem, not installing a theme. I agree that the upselling process should be decent, respectful, and, most of all, helpful towards the user’s needs. This should be the standard. If I “force” a user to upgrade just to make a quick buck, then I’ve not lived up to it. But if I recommend a paid solution to one or more of its problems, on top of the benefits he or she already got for free, I would consider that to be decent, respectful, and helpful. WordPress wins a satisfied user, I gain a happy customer, the open web wins a new believer. Lastly, being the author of a theme in the repo should be a badge of honor, not just a sign of being able to obediently follow a set of (often unclear) guidelines. One should be proud and willing to add it to its CV, to its social media description, T-shirts should be printed (or given away), fulfillment all around. Second lastly… At WordCamp Europe 2018, in Belgrade, many seemed to speak about the end of the “developer era,” and the start of a new cycle where the WordPress community is open to designers, marketers, community builders… you know, anyone other than developers. I was ecstatic upon seeing that fire gain strength (I am a developer). But, how could this become a reality when the most attractive thing for a large part of them – the themes aka the stuff you see – is so entrenched in the realities of the past, so resistant to making bold steps towards a more inclusive future? Just about everything floats in a sea of developer “stuff”: from SVN and Track, readme validators and theme checks, to escaping, sanitizing, i18n-ing, a11y-ing, you name it. How can one explain the fact that the WordPress.org theme presentation page is more basic and, frankly, lackluster than the plugin page? How come the one thing that someone needs to properly assess a theme before installing it – the preview site – was left unchanged (despite countless debates and proposals) for years? I can’t find a reasonable explanation for the life of me. Let’s assume you are a passionate designer, you heard of WordPress, and would like to contribute. If you sift through the latest additions to the WordPress.org themes repo, what would you think? Is this a place where your work would be appreciated and improved upon? Quite the contrary, with very few exceptions. If you scan through the WordPress.org Themes Review public Slack channel, would you feel you’ve found a welcoming place? A place where you could have a voice, where arguments from all sides are sought after and equally discussed? I think not. <hr> I am the first to admit that what I am describing here is a tall order, challenging to achieve and maintain. It will probably take years to get there (as it took us 16 years of WordPress to get here). It will take a lot of small steps in the right direction. It will take a lot of honest people and businesses to jump in and lend a hand. But if we genuinely care about the future of WordPress and that of the open web, do we really have a choice? From what I see, the alternative would be to let the repository drift away and become obsolete. Some will profit from this, but definitely not WordPress(.org) and end users. I know that I’ve only raised questions, identified flaws, complained, briefly sketched scenarios. How about solutions, Vlad? I think the WordPress ecosystem and the community that props it are at a moment where good, important questions need to be asked and agreed upon, before possible answers might be explored. Solutions to the wrong questions will only distract or even derail us. Thank you for reading through all of this. I sincerely hope my thoughts will help move things towards a better place, if only by a little bit.https://thinkwritecode.com/why-i-write/https://thinkwritecode.com/why-i-write/Mon, 03 Jun 2019 16:12:08 GMTI think people write for many reasons. None good, none bad. Just valid reasons to pick up a pen or a keyboard and dump whatever goes on in one’s head into words. Despite the countless shifts society and culture have experienced, the written word seems to stick around and even thrive. By many standards, it feels ancient (and it is), clumsy, somewhat unwieldy for now when time is <del>precious</del> short, and our attention span is the size of a swipe. Many seem to thrive in more up-to-date forms of expression like audio and video; mediums that are easier to digest in our fast-paced, connected world; content that delivers more than words; ways of expressing our fuller selves, our whole individuality, our raw, unredacted emotions. It’s a win-win for both the author and the receiver – the multiple layers of interaction, the emotional richness, the nuances, the authenticity… I do my fair share of binging documentaries, sci-fi series, drama series, movies, action-packed blockbusters, and, of course, eye-watering, heart-warming Japanese animations. Podcasts not so much. Radio in the car, video courses and recordings of conferences from time to time. Audiobooks at night when my eyes need a break after looking at screens all day. I seem to be a prime candidate for contemporary forms of expression. I understand that now, more than ever, we look for more immersive ways to learn, to be moved, to be entertained, to fill-up that off time, to make the most out of a walk or commute. While I get it, I actually don’t. I can’t remember what the documentary I saw a couple of weeks ago was about, what was the main idea in the third chapter of an audiobook I listened a month ago, what tricks a trainer shared in a video course a few days back, what words of wisdom someone shared in the fifth TED Talk I watched a couple of days ago. All I have are flashes of images/sounds mixed with my emotions and random thoughts that were going through my head – snapshots, or better yet, mindshots of fleeting moments that I am not really sure if I remember correctly. About 80% of that time (and I am being generous to myself) is wasted – went by without leaving something meaningful to bring into consciousness and make use of. The remaining 20%: I had a good time, I relaxed, I unplugged, I enjoyed something with my loved ones – time well spent and very much needed. So, while I get it, I actually don’t. What I seem to get is written stuff. To my surprise, I can remember whole scenes from fiction books I read close to 20 years ago – in all fairness, they were really awesome books but still, quite a while back. I can conjure up from somewhere in my head a pretty good summary of most books I have read in the past couple of years. At random times, parts of poems pop-up seemingly out of nowhere – I can’t really recall when I read them. For me, the written word has an almost magical stickiness to it, one that I have come to appreciate and respect the more I ingest the new mediums of our times. I guess it boils down to making good use of my time and planting seeds for my future self. <hr> Now that I painted a rough sketch about my relationship with reading, I guess it’s about time to get to the why behind my drive to write stuff. Don’t expect a clean cut, manifesto-like picture. I will do my best to be as honest and frank as I can muster right now. When I speak of writing, I am talking about any text that has some structure to it, that revolves around a central message, that has an aim to it. So it is not necessarily about length, but I certainly don’t mean short chat messages or brief replies to emails. Writing is liberating. At my core, I am an introvert, although I play a pretty good extrovert, or so I think. Through hard work, I’ve gotten better at expressing my expectations and emotions in-person, but I still can’t shake that feeling of clumsiness, that regret that I’ve held back because I couldn’t trust myself to say it all right then and there. When I write, I gain some control about the form my message is delivered in, about the context it swims in, and about the mental path I feel the reader should follow. Writing is storytelling. I love stories. I need stories to find meaning in my day to day life. I constantly refine and branch off stories in my head. Stories are the glue that holds all that I am together. Some are delusional, straight out of Fairyland, or wishful thinking just for the sake of it; some are just drafts or mashups of previously forgotten stories; some are stories I share with others in my life, stories that are no longer just my own, stories with a life of their own (this is the best kind) – my kid is such a story, my family, my friends, my company, my town are all shared stories that I chose (most of the time) to be a part of. When I write, I <del>can’t help myself not</del> try to conjure up a little story, no matter how small. Writing is no fun without it. Writing is deliberate. I don’t suddenly find myself writing something meaningful in Slack or in a Github issue. I need to have a certain message that I feel it’s important to be delivered, some sort of inner mission. Other times, I have a problem that keeps revolving in my head, that seems to bounce around without control or direction. I force myself to pause and begin to write it all down – things suddenly start to cluster, structure emerges, and conflicting ideas either gain clarity and strength or end up in the trash bin of my conscious mind. Writing is hard. I tend to write in a conversational style, the same way I (would like to) speak. Before I feel ready to write it all down, I need to have a firm grasp on the whole thing in my head. So the prequel to my writing are endless conversations with myself; arguments are being fought and lost, ideas get stripped down, buried, resurrected and/or expanded; new storylines come into view, and old ones get abandoned – all this is quite energy intensive. Fortunately, once I start writing, the words seem to flow, and things take shape rather quickly. Writing is thinking. For me, writing is an extension of my thought processes. Often I find myself stuck in vicious cycles of conflicting ideas. This is when writing it all down comes to the rescue and helps me square things with myself. Through the process of expressing my thoughts, I gain a clearer picture of the problem at hand, while also testing the validity of various arguments. I (almost) manage to detach from my own ideas and see them for what they really are. Writing is selfish. I tend to write first and foremost for myself, for my own satisfaction, pride, or problem-solving endeavors. Even when the overlap between the target audience and me is marginal, I get to decide on the presumed characteristics of my readers. I am not a professional writer, so writing needs to be fun and challenging – I dread the (rare) occasions when I need to write something that is purposely impersonal and misaligned with my values. I treat my readers with respect and interest, but I don’t make it my mission to satisfy their expectations – I try to live up to mine first. Writing is craft. After the initial deluge of thoughts that constitutes the first draft, I do a few more passes where I focus on finding the right words, the right metaphors, and comparisons. I try to find, and hopefully remove, blockages in the storyline, in the fluidity of sentences and phrases. I have a deep respect for words, for their power to help, but also get in the way – I don’t take this tool lightly, and do my best to honor it. Sometimes things seem to pop into place with ease, other times it a veritable tug of war. Writing is mysterious. I sometimes seem to tap into some vein of inspiration and end up with coherent, enjoyable stories. Other times, my writing is convoluted and strained. Sadly, there are (a few) occasions when I just suck at it, and I probably shouldn’t hit that publish button. The truth is I am seldom conscious in which of these categories I find myself in – all I can do is hope for the best and take it one step at a time. I’ll let my future self be the judge of it. I am confident he will have learned to go easy on me and appreciate me for what I am today. <hr> There you have it. I write because it liberates my mind, because it feeds my love of stories, and, ultimately, helps me think. I enjoy crafting words despite the hard work and the mysterious paths they take (me) at times.https://thinkwritecode.com/in-all-fairness-the-40-hours-work-week/https://thinkwritecode.com/in-all-fairness-the-40-hours-work-week/Sun, 28 May 2017 16:12:08 GMT <a class="gatsby-resp-image-link" href="/static/8b15120b74fa79e57b880c909381d27a/a5e48/header-the-40-hours-work-week.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 122.77777777777779%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAZABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAEDAgX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABuJpyRAlOpk0H/8QAGxABAQACAwEAAAAAAAAAAAAAAgEDMQAREjL/2gAIAQEAAQUCIMkJ7SnssvHMgNsiuNdcezo/fMev/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPwEf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAHhAAAQQCAwEAAAAAAAAAAAAAAQACESEQcQMSIjH/2gAIAQEABj8CHloEIVxo7Q6ub8uVb2UpUXeRg7X/xAAdEAEAAgICAwAAAAAAAAAAAAABACERMRCBUWFx/9oACAEBAAE/IU4UyctzN27wXO6oQ0sAJrG2A1EBNrCzyCt+oSz1W4bfeA6OA//aAAwDAQACAAMAAAAQJDmO/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPxAf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPxAf/8QAIBABAAIBBAIDAAAAAAAAAAAAAQARITFBUbFhoYGRwf/aAAgBAQABPxAC53Zum/O0cQ2LLE/MwlAApNMw11zpTiVu10iK2zUugDLvXLHhRLCUauPEE0XURu5v7ltA4RO5+z3XtntOif/Z'); background-size: cover; display: block;" > <picture> <source srcset="/static/8b15120b74fa79e57b880c909381d27a/89b46/header-the-40-hours-work-week.webp 180w, /static/8b15120b74fa79e57b880c909381d27a/97ead/header-the-40-hours-work-week.webp 360w, /static/8b15120b74fa79e57b880c909381d27a/cdb16/header-the-40-hours-work-week.webp 480w" sizes="(max-width: 480px) 100vw, 480px" type="image/webp" /> <source srcset="/static/8b15120b74fa79e57b880c909381d27a/4f3ca/header-the-40-hours-work-week.jpg 180w, /static/8b15120b74fa79e57b880c909381d27a/bac16/header-the-40-hours-work-week.jpg 360w, /static/8b15120b74fa79e57b880c909381d27a/a5e48/header-the-40-hours-work-week.jpg 480w" sizes="(max-width: 480px) 100vw, 480px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/8b15120b74fa79e57b880c909381d27a/a5e48/header-the-40-hours-work-week.jpg" alt="Woman protesting for the 40 hours work week." title="Woman protesting for the 40 hours work week." loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> I have a hard time making the 40 hours work week my friend and my ally. It and I seem to be playing a game of chicken: who gives up first. Right now, we are at a stalemate: we agree to disagree. First of all, I am only considering this in the context of “creative industries” where people are expected to dream up new things, to come up with elegant solutions to problems, to go the extra mile and deliver superior, innovative results, constantly— the exact opposite of the context where it first appeared, in the Industrial Revolution. Secondly, let me get some things off the table, right from the start. An 80 hours work week is insane, bordering on cruelty; it should only be an unfortunate exception commanded by the mother of all emergencies. 70, 60 hours per week are not very far away either — it’s 10–12 hours a day, 6 days a week; I find it hard to see how doing this on a regular basis could lead to anything but burnout and poor quality of work. Now back to our 40 hours. The tagline <a href="https://m.signalvnoise.com/80-hours-now-40-hours-later-f0b3621816e" target="_self" rel="nofollow">“40 hours a week is plenty”</a>, so rightfully portrayed by someone who I look up to and admire — Jason Fried from Basecamp, sounds so clear and full of decency: decency for work-life balance, for one’s sanity, for one’s physical and mental health, for giving time to ideas to breathe and germinate. I can’t argue with it. So why am I then at a stalemate with this idea? The real insight lies in this comment from the same Jason Fried: <blockquote> Think of 40 as a representation of a “fair’s day work” rather than exactly 40 hours. But definitely not much more. </blockquote> A fair’s day work is something I can relate with; it is much more personal and adaptable to one’s current professional state of affairs; it implies merit and results, dedication and quality, a balance between your personal perception and the one of your peers. Recently, in a documentary, I’ve heard something that really reverberated in me as it provided the key to making sense of a lot of conflicting thoughts and ideas: the origin of the word amateur as opposed to professional. Most of the time, calling another person an amateur is done (or perceived) with ill intent, with condescendence, dismissiveness, malice if you will. It turns out, the term was originally intended to depict someone who does something just for the pleasure of it. I like that a lot. All of us creative “professionals” start out as amateurs, people full of passion and desire to leave our mark on the world, people with wits and grit to tackle things way beyond our reach, people confident that with enough energy, thought and effort any problem can be solved. We are so so lucky to have this leeway. The problem is this initial state of wonderful agitation doesn’t last. That flame burns too brightly to be sustainable in the long run. We need to make small but confident steps towards being a professional, for our own sake and for our team. We need to understand ourselves better, to be more aware of our physical and mental limitations, to know when to pause and when to speed up — it’s what people call experience. But it doesn’t come simply with the passage of time. You can’t say I’ve done this work for 10 years, hence I have experience. If you haven’t developed a certain work wisdom during those 10 years, I feel sorry for you. You are probably in a worst spot professionally than someone just starting out. What do amateurs and professionals have to do with the “40 hours work week”? In my mind, a great deal. That “fair’s day work” is much closer to fairness when it comes to a true professional than it is when we talk about an amateur. That is why, for me, taking only the number of hours, sticking to them and see what you can cram in there is a fallacy, at best. A saner, more down-to-Earth approach is to be mindful of yourself, your self-expectations, weigh in the requirements of the team you are part of and find the balance that pushes you forward, today. If that sweet spot is for you 40 hours or less, I salute you — you are luckier than you realize. But if it’s 50, 55 hours a week that is ok too. Just remember to constantly reassess and don’t mistake long hours with steps towards being a professional. In certain stages of your journey, fewer hours is exactly the right thing to do; in others, no hours a.k.a. vacations are absolutely essential. <a class="gatsby-resp-image-link" href="/static/938d5ed71f6f32f3710a539fa43a7342/e8c7f/cart-before-the-horse.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 49.44444444444444%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAIBAwQF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB6lGuBhw//8QAGxABAAICAwAAAAAAAAAAAAAAAQIDABIREzH/2gAIAQEAAQUC7Vm2WbVcsHANI+f/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAcEAEAAgEFAAAAAAAAAAAAAAABAAIREiAxQYH/2gAIAQEABj8CxWqHakceQ1c7P//EABsQAQACAgMAAAAAAAAAAAAAAAEAESExUWFx/9oACAEBAAE/IU8lXSeRJopceokqcoDLUZZBZpn/2gAMAwEAAgADAAAAECPP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGxABAQADAAMAAAAAAAAAAAAAAREAITFRcaH/2gAIAQEAAT8QI4NuEOPfnJSHJBwjXvZ9wUIkhtQ7ggAMdzEcYdpXCEgM/9k='); background-size: cover; display: block;" > <picture> <source srcset="/static/938d5ed71f6f32f3710a539fa43a7342/89b46/cart-before-the-horse.webp 180w, /static/938d5ed71f6f32f3710a539fa43a7342/97ead/cart-before-the-horse.webp 360w, /static/938d5ed71f6f32f3710a539fa43a7342/61ad0/cart-before-the-horse.webp 457w" sizes="(max-width: 457px) 100vw, 457px" type="image/webp" /> <source srcset="/static/938d5ed71f6f32f3710a539fa43a7342/4f3ca/cart-before-the-horse.jpg 180w, /static/938d5ed71f6f32f3710a539fa43a7342/bac16/cart-before-the-horse.jpg 360w, /static/938d5ed71f6f32f3710a539fa43a7342/e8c7f/cart-before-the-horse.jpg 457w" sizes="(max-width: 457px) 100vw, 457px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/938d5ed71f6f32f3710a539fa43a7342/e8c7f/cart-before-the-horse.jpg" alt="Cart before the horse, victorian illustration." title="Cart before the horse, victorian illustration." loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> Just don’t put the cart before the horse and “act professionally” timewise without being there in wisdom also. You will only stall your own progress and disappoint the ones looking to work with you. Stay mindful of yourself and where you are heading, forget arbitrary numbers. This article was first published on <a href="https://medium.com/@vladpotter/in-all-fairness-the-40-hours-work-week-6004548d5154" target="_self" rel="nofollow">Medium.com</a>. I guess I also put the cart before the horse. Time to put things in order.https://thinkwritecode.com/founders-dilemma-many-hats-one-head/https://thinkwritecode.com/founders-dilemma-many-hats-one-head/Sun, 21 May 2017 16:12:08 GMT <a class="gatsby-resp-image-link" href="/static/553af2f146745b6c41187e3b15dac356/9ef8e/header-man-with-hat.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 55.00000000000001%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQCAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAACA//aAAwDAQACEAMQAAABgoy2K6hQOX//xAAcEAACAgIDAAAAAAAAAAAAAAABAgADBBESEzH/2gAIAQEAAQUCyD2QF0lQ1UvtShrtcZ//xAAXEQADAQAAAAAAAAAAAAAAAAAQERIh/9oACAEDAQE/AZxj/8QAFhEBAQEAAAAAAAAAAAAAAAAAERAh/9oACAECAQE/AXSf/8QAHBAAAgICAwAAAAAAAAAAAAAAAAECESFxEjFS/9oACAEBAAY/AqjKXF5o9ojojpGUNLo//8QAGxABAAICAwAAAAAAAAAAAAAAAQARMVFBkfD/2gAIAQEAAT8hAlqATzNQHcqkeNqVwmAdkti5/9oADAMBAAIAAwAAABCwD//EABYRAQEBAAAAAAAAAAAAAAAAAAEQEf/aAAgBAwEBPxBORP/EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAECAQE/ELD/xAAeEAEAAwABBQEAAAAAAAAAAAABABEhYTFRkaGxwf/aAAgBAQABPxDTXIGi7B2t6XDkOKMfpFTxopd0uv2eInpHgS17XQV9Y5Zsh0Ycz//Z'); background-size: cover; display: block;" > <picture> <source srcset="/static/553af2f146745b6c41187e3b15dac356/89b46/header-man-with-hat.webp 180w, /static/553af2f146745b6c41187e3b15dac356/97ead/header-man-with-hat.webp 360w, /static/553af2f146745b6c41187e3b15dac356/fb07f/header-man-with-hat.webp 720w, /static/553af2f146745b6c41187e3b15dac356/c0396/header-man-with-hat.webp 1011w" sizes="(max-width: 720px) 100vw, 720px" type="image/webp" /> <source srcset="/static/553af2f146745b6c41187e3b15dac356/4f3ca/header-man-with-hat.jpg 180w, /static/553af2f146745b6c41187e3b15dac356/bac16/header-man-with-hat.jpg 360w, /static/553af2f146745b6c41187e3b15dac356/c0c3d/header-man-with-hat.jpg 720w, /static/553af2f146745b6c41187e3b15dac356/9ef8e/header-man-with-hat.jpg 1011w" sizes="(max-width: 720px) 100vw, 720px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/553af2f146745b6c41187e3b15dac356/c0c3d/header-man-with-hat.jpg" alt="70s man with hat,thinking highly of himself, with a confident look in his eyes." title="70s man with hat,thinking highly of himself, with a confident look in his eyes." loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> Ever since I’ve deep-dived head-first no-safety-line into this adventure of co-founding Pixelgrade my life has changed, in unexpected ways. Little did I know at the time I would be taking the ride of my life, that I will be fulfilled and energized beyond my wildest dreams while being stretched and challenged to breaking point and beyond. It’s probably for the best as some things should not be known from the start. Some would think a founder brings its experience and knowledge and sets to purposely give shape to this thing we call a business. It hasn’t worked like that for me as I had no prior experience and little knowledge of what a team, let alone a business, needed to look like. Frankly, I still don’t have a turn-key solution to this day — maybe when I’m gray and old. What me and my brother George brought at the drawing table was just ourselves, two twenty so years techy guys with grit, open hearts, and clear sights. We’ve drafted this whole thing to our image. Anything else felt wrong or without meaning (sounds an awful lot like the definition of narcissism, right?). In reality, a devilish thing happened: Pixelgrade defined me just as I helped define Pixelgrade. <h2 id="the-hatless-head" style="position:relative;"><a href="#the-hatless-head" aria-label="the hatless head permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The Hatless Head</h2> In the early days, my head was a thing of beauty: perfect proportions, perfect haircut, perfect nose, perfect jaw, perfect in every single way. Then tragedy struck, and it became, almost overnight, the head I have today. Now that’s off the table, let’s focus on what was inside that (perfect) head of mine. First and foremost, there was hope and faith that everything will be just fine. It was self-confidence that I would plow through everything that might come my way. It was patience as good things happen to those who wait. There were passion and energy to last you a lifetime. I also had my fair share of foolishness or child-like playfulness to keep me fresh and on the move. There was one more thing lurking in there, the bedrock if you will: trust, in people. If it were a Buddhist monk’s head, it would babble all day long: Have faith in people! Trust people! I know it sounds like I’m exaggerating, but the reality of my beliefs was not far off. I genuinely believe in the huge potential that rests in each of us and that if only it would be given the right setting it would blossom into something worthy to behold. But what is a founder’s hatless head? The perfect place to put a hat, of course. Luckily, or unfortunately — I am still not sure, there was no shortage of hats willing to do the job. <h2 id="hat-1-the-dreamer" style="position:relative;"><a href="#hat-1-the-dreamer" aria-label="hat 1 the dreamer permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Hat #1: The Dreamer</h2> <a class="gatsby-resp-image-link" href="/static/4e8887608f42df6c83e414a3a7714317/9bea7/the-hat-of-a-dreamer.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 61.11111111111111%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIDBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAe9NwaA//8QAFxAAAwEAAAAAAAAAAAAAAAAAAAExEP/aAAgBAQABBQJxXFT/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAY/Al//xAAaEAACAgMAAAAAAAAAAAAAAAABEAARITGx/9oACAEBAAE/Ib6SxDL4L//aAAwDAQACAAMAAAAQMA//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAbEAEBAAIDAQAAAAAAAAAAAAABEQAQITFBUf/aAAgBAQABPxALkSN49xofDY96esdiBNP/2Q=='); background-size: cover; display: block;" > <picture> <source srcset="/static/4e8887608f42df6c83e414a3a7714317/89b46/the-hat-of-a-dreamer.webp 180w, /static/4e8887608f42df6c83e414a3a7714317/97ead/the-hat-of-a-dreamer.webp 360w, /static/4e8887608f42df6c83e414a3a7714317/fb07f/the-hat-of-a-dreamer.webp 720w, /static/4e8887608f42df6c83e414a3a7714317/64908/the-hat-of-a-dreamer.webp 1080w, /static/4e8887608f42df6c83e414a3a7714317/ff8d7/the-hat-of-a-dreamer.webp 1440w, /static/4e8887608f42df6c83e414a3a7714317/56b60/the-hat-of-a-dreamer.webp 2000w" sizes="(max-width: 720px) 100vw, 720px" type="image/webp" /> <source srcset="/static/4e8887608f42df6c83e414a3a7714317/4f3ca/the-hat-of-a-dreamer.jpg 180w, /static/4e8887608f42df6c83e414a3a7714317/bac16/the-hat-of-a-dreamer.jpg 360w, /static/4e8887608f42df6c83e414a3a7714317/c0c3d/the-hat-of-a-dreamer.jpg 720w, /static/4e8887608f42df6c83e414a3a7714317/44838/the-hat-of-a-dreamer.jpg 1080w, /static/4e8887608f42df6c83e414a3a7714317/06430/the-hat-of-a-dreamer.jpg 1440w, /static/4e8887608f42df6c83e414a3a7714317/9bea7/the-hat-of-a-dreamer.jpg 2000w" sizes="(max-width: 720px) 100vw, 720px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/4e8887608f42df6c83e414a3a7714317/c0c3d/the-hat-of-a-dreamer.jpg" alt="The hat of a dreamer" title="The hat of a dreamer" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> This hat suited my head just fine like it was made for me. A hopeless optimist with a love for intellectual tug-of-war and the world at large seemed to be just the right person to look ahead and guide the ship. I wear this hat with pride and joy, but also with a deep sense of responsibility as I am fully aware that everyone else is counting on my ability to spot opportunities and perils ahead. Unfortunately, there is a dark side to this hat: it can be quite lonely up there on the mast. And with loneliness comes detachment from the rest of the crew — a deeply scary thought for me. <h2 id="hat-2-the-craftsman" style="position:relative;"><a href="#hat-2-the-craftsman" aria-label="hat 2 the craftsman permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Hat #2: The Craftsman</h2> <a class="gatsby-resp-image-link" href="/static/a70b25dd9cb20e9f26fcac0b75316ecc/9bea7/the-hat-of-a-craftsman.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 61.11111111111111%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAECBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAd5VJQw//8QAFxAAAwEAAAAAAAAAAAAAAAAAAAEQQf/aAAgBAQABBQJmxKf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAY/Al//xAAYEAEBAAMAAAAAAAAAAAAAAAABEAARMf/aAAgBAQABPyHjBK0M/9oADAMBAAIAAwAAABCzD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABoQAQACAwEAAAAAAAAAAAAAAAERIQAQMUH/2gAIAQEAAT8Q65WQFaQSHAkla9df/9k='); background-size: cover; display: block;" > <picture> <source srcset="/static/a70b25dd9cb20e9f26fcac0b75316ecc/89b46/the-hat-of-a-craftsman.webp 180w, /static/a70b25dd9cb20e9f26fcac0b75316ecc/97ead/the-hat-of-a-craftsman.webp 360w, /static/a70b25dd9cb20e9f26fcac0b75316ecc/fb07f/the-hat-of-a-craftsman.webp 720w, /static/a70b25dd9cb20e9f26fcac0b75316ecc/64908/the-hat-of-a-craftsman.webp 1080w, /static/a70b25dd9cb20e9f26fcac0b75316ecc/ff8d7/the-hat-of-a-craftsman.webp 1440w, /static/a70b25dd9cb20e9f26fcac0b75316ecc/56b60/the-hat-of-a-craftsman.webp 2000w" sizes="(max-width: 720px) 100vw, 720px" type="image/webp" /> <source srcset="/static/a70b25dd9cb20e9f26fcac0b75316ecc/4f3ca/the-hat-of-a-craftsman.jpg 180w, /static/a70b25dd9cb20e9f26fcac0b75316ecc/bac16/the-hat-of-a-craftsman.jpg 360w, /static/a70b25dd9cb20e9f26fcac0b75316ecc/c0c3d/the-hat-of-a-craftsman.jpg 720w, /static/a70b25dd9cb20e9f26fcac0b75316ecc/44838/the-hat-of-a-craftsman.jpg 1080w, /static/a70b25dd9cb20e9f26fcac0b75316ecc/06430/the-hat-of-a-craftsman.jpg 1440w, /static/a70b25dd9cb20e9f26fcac0b75316ecc/9bea7/the-hat-of-a-craftsman.jpg 2000w" sizes="(max-width: 720px) 100vw, 720px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/a70b25dd9cb20e9f26fcac0b75316ecc/c0c3d/the-hat-of-a-craftsman.jpg" alt="The hat of a craftsman" title="The hat of a craftsman" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> Yet another hat that my head will gladly wear. This one is extra-special as it was shaped throughout my whole life — it’s what makes me a doer. I owe this hat to my family and to my teachers, to everyone that taught me the value of doing something from nothing, of using my creativity and perseverance to achieve meaningful results, the value of overcoming highs and lows just to see something done, properly. Understandably, it is easy and fulfilling to wear this hat. It allows me to dive deep into technical issues and pound them into submission, to explore novel, more elegant ways of solving old problems. It’s my comfort zone, where I am able to feel in control. This spell-like nature makes it dangerous if worn too often for too long. It’s too easy for me to lose myself in the doer mode while ignoring my other responsibilities towards the ones around me and the organization as a whole. <h2 id="hat-3-the-father" style="position:relative;"><a href="#hat-3-the-father" aria-label="hat 3 the father permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Hat #3: The Father</h2> <a class="gatsby-resp-image-link" href="/static/88da3c2a2016b113059188ecc3d91715/9bea7/the-hat-of-a-father.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 61.11111111111111%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIDBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAe/NQaA//8QAFhABAQEAAAAAAAAAAAAAAAAAARAA/9oACAEBAAEFAsUn/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAIP/aAAgBAQAGPwJf/8QAGBAAAwEBAAAAAAAAAAAAAAAAARAhADH/2gAIAQEAAT8hPMVYVf/aAAwDAQACAAMAAAAQMA//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAcEAEAAgEFAAAAAAAAAAAAAAABABEQITFBUWH/2gAIAQEAAT8QdO+pehC/MIJTN6q6c4//2Q=='); background-size: cover; display: block;" > <picture> <source srcset="/static/88da3c2a2016b113059188ecc3d91715/89b46/the-hat-of-a-father.webp 180w, /static/88da3c2a2016b113059188ecc3d91715/97ead/the-hat-of-a-father.webp 360w, /static/88da3c2a2016b113059188ecc3d91715/fb07f/the-hat-of-a-father.webp 720w, /static/88da3c2a2016b113059188ecc3d91715/64908/the-hat-of-a-father.webp 1080w, /static/88da3c2a2016b113059188ecc3d91715/ff8d7/the-hat-of-a-father.webp 1440w, /static/88da3c2a2016b113059188ecc3d91715/56b60/the-hat-of-a-father.webp 2000w" sizes="(max-width: 720px) 100vw, 720px" type="image/webp" /> <source srcset="/static/88da3c2a2016b113059188ecc3d91715/4f3ca/the-hat-of-a-father.jpg 180w, /static/88da3c2a2016b113059188ecc3d91715/bac16/the-hat-of-a-father.jpg 360w, /static/88da3c2a2016b113059188ecc3d91715/c0c3d/the-hat-of-a-father.jpg 720w, /static/88da3c2a2016b113059188ecc3d91715/44838/the-hat-of-a-father.jpg 1080w, /static/88da3c2a2016b113059188ecc3d91715/06430/the-hat-of-a-father.jpg 1440w, /static/88da3c2a2016b113059188ecc3d91715/9bea7/the-hat-of-a-father.jpg 2000w" sizes="(max-width: 720px) 100vw, 720px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/88da3c2a2016b113059188ecc3d91715/c0c3d/the-hat-of-a-father.jpg" alt="The hat of a father" title="The hat of a father" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> This is a hat I haven’t wished for, but somehow grew on my head. I was always under the impression that I had a flower-power-friend hat, or at least a teammate hat. But no, I actually had this paternal hat and its weight started to take its toll on me. It’s not the sexiest hat on the catwalk, it’s infused with all the wrong perfumes, it’s old-school, commands respect and authority, but of the wrong kind. I look to be respected for my merits, for the skills and insights I bring to the table, not because I take care of everyone and make sure that I keep things as easy as possible. And what authority I can muster I wish to ground it in mutual understanding that it’s for the better of all, not as a direct result of me “giving birth” to Pixelgrade. <h2 id="hat-4-the-banker" style="position:relative;"><a href="#hat-4-the-banker" aria-label="hat 4 the banker permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Hat #4: The Banker</h2> <a class="gatsby-resp-image-link" href="/static/d4da77ad69682bdb3357566b18ecac4f/9bea7/the-hat-of-a-banker.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 61.11111111111111%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHehkLAD//EABYQAQEBAAAAAAAAAAAAAAAAAAEQMf/aAAgBAQABBQJwpP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABgQAAMBAQAAAAAAAAAAAAAAAAEQIQAx/9oACAEBAAE/IemKsKv/2gAMAwEAAgADAAAAELAP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGhABAQACAwAAAAAAAAAAAAAAAREAECExYf/aAAgBAQABPxBJDuYyyATiGkpHCt81/9k='); background-size: cover; display: block;" > <picture> <source srcset="/static/d4da77ad69682bdb3357566b18ecac4f/89b46/the-hat-of-a-banker.webp 180w, /static/d4da77ad69682bdb3357566b18ecac4f/97ead/the-hat-of-a-banker.webp 360w, /static/d4da77ad69682bdb3357566b18ecac4f/fb07f/the-hat-of-a-banker.webp 720w, /static/d4da77ad69682bdb3357566b18ecac4f/64908/the-hat-of-a-banker.webp 1080w, /static/d4da77ad69682bdb3357566b18ecac4f/ff8d7/the-hat-of-a-banker.webp 1440w, /static/d4da77ad69682bdb3357566b18ecac4f/56b60/the-hat-of-a-banker.webp 2000w" sizes="(max-width: 720px) 100vw, 720px" type="image/webp" /> <source srcset="/static/d4da77ad69682bdb3357566b18ecac4f/4f3ca/the-hat-of-a-banker.jpg 180w, /static/d4da77ad69682bdb3357566b18ecac4f/bac16/the-hat-of-a-banker.jpg 360w, /static/d4da77ad69682bdb3357566b18ecac4f/c0c3d/the-hat-of-a-banker.jpg 720w, /static/d4da77ad69682bdb3357566b18ecac4f/44838/the-hat-of-a-banker.jpg 1080w, /static/d4da77ad69682bdb3357566b18ecac4f/06430/the-hat-of-a-banker.jpg 1440w, /static/d4da77ad69682bdb3357566b18ecac4f/9bea7/the-hat-of-a-banker.jpg 2000w" sizes="(max-width: 720px) 100vw, 720px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/d4da77ad69682bdb3357566b18ecac4f/c0c3d/the-hat-of-a-banker.jpg" alt="The hat of a banker" title="The hat of a banker" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> I am not the son of a financier nor did I inherited an insane amount of wealth, but nonetheless I have this weird pointy hat in my closet. I am generally OK with money: I understand them, I know their proper value, I can handle them by the truckload or in bite-sized chunks. I’m not overly impressed by them, nor do I disregard their power and meaning. So what’s the problem? Stop bitching and enjoy your pointy hat, you lucky bastard! I wish it were that simple. In reality, this hat is stuffed with unseen late-night worries, constant struggles to prioritize spending and find new ways to keep the flow going, hopefully with an upward trend. Over time I’ve learned to cope with these, to some extent. As you would expect, something else was going on under there, and it wasn’t what I wished for, again: it makes it too easy for others to stamp me with the “boss” tag. I am asked to put a price on my teammates’ work and convey my reasoning behind that. Easier said than done especially when people have such varied relationships towards money and what they stand for. The fact that, statistically, most of us believe we are above the average performance of those around us doesn’t help me either. <h2 id="hat-5-the-architect" style="position:relative;"><a href="#hat-5-the-architect" aria-label="hat 5 the architect permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Hat #5: The Architect</h2> <a class="gatsby-resp-image-link" href="/static/e8d0f031e66690e7ebac64d4800e6f89/9bea7/the-hat-of-an-architect.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 61.11111111111111%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAgAF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3iyOo//EABcQAAMBAAAAAAAAAAAAAAAAAAECEDH/2gAIAQEAAQUCOLRP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAIP/aAAgBAQAGPwJf/8QAGRAAAwADAAAAAAAAAAAAAAAAARARACEx/9oACAEBAAE/IemEabGO1//aAAwDAQACAAMAAAAQoA//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAZEAEAAwEBAAAAAAAAAAAAAAABABFBEGH/2gAIAQEAAT8QaIFtRZYYVxLEdlCfOf/Z'); background-size: cover; display: block;" > <picture> <source srcset="/static/e8d0f031e66690e7ebac64d4800e6f89/89b46/the-hat-of-an-architect.webp 180w, /static/e8d0f031e66690e7ebac64d4800e6f89/97ead/the-hat-of-an-architect.webp 360w, /static/e8d0f031e66690e7ebac64d4800e6f89/fb07f/the-hat-of-an-architect.webp 720w, /static/e8d0f031e66690e7ebac64d4800e6f89/64908/the-hat-of-an-architect.webp 1080w, /static/e8d0f031e66690e7ebac64d4800e6f89/ff8d7/the-hat-of-an-architect.webp 1440w, /static/e8d0f031e66690e7ebac64d4800e6f89/56b60/the-hat-of-an-architect.webp 2000w" sizes="(max-width: 720px) 100vw, 720px" type="image/webp" /> <source srcset="/static/e8d0f031e66690e7ebac64d4800e6f89/4f3ca/the-hat-of-an-architect.jpg 180w, /static/e8d0f031e66690e7ebac64d4800e6f89/bac16/the-hat-of-an-architect.jpg 360w, /static/e8d0f031e66690e7ebac64d4800e6f89/c0c3d/the-hat-of-an-architect.jpg 720w, /static/e8d0f031e66690e7ebac64d4800e6f89/44838/the-hat-of-an-architect.jpg 1080w, /static/e8d0f031e66690e7ebac64d4800e6f89/06430/the-hat-of-an-architect.jpg 1440w, /static/e8d0f031e66690e7ebac64d4800e6f89/9bea7/the-hat-of-an-architect.jpg 2000w" sizes="(max-width: 720px) 100vw, 720px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/e8d0f031e66690e7ebac64d4800e6f89/c0c3d/the-hat-of-an-architect.jpg" alt="The hat of an architect" title="The hat of an architect" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> This is a cool hat, right? It has such a nice ring to it. I guess this is part of the reason I graduated Architecture School. All fallacies aside, I am a systems kinda guy — I enjoy discovering the inner workings of things, their true logic and meaning. I generally try to avoid shallow observations and go beyond the first impression as I believe we live in a complex world where everything and everyone are connected. This sense of endless possibilities fuels my hope for a better future. For a long time, I’ve been delusional and foolish as I’ve underestimated the complexities and hurdles involved in managing people systems — teams. I convinced myself that a system is a system is a system. What is so different from designing the place a family lives or the way part of the city should function, and designing the way a small group of people should work wonderfully together? As it turns out, an awful lot. My first mistake was to think one can design the way a team works. Sure, you can do it in an academic setting and imagine things. But the reality is that a team just is, from the moment at least two people decide to work together towards a common goal. There is no undo button, no rewinding of time. You got to live with the consequences of all of your decisions and do the best you can today as tomorrow’s team will be different. My second mistake was to overshoot my trust in the power of good intentions: as long as each team member’s heart is in the right place all will play out just fine. So I wore this hat every so often without really owning it, with a sense of fear and shame actually as I didn’t want people to see me as a God-like creature that’s playing Sims — Business Edition. I struggle with this to this day. <h2 id="the-hatfull-head" style="position:relative;"><a href="#the-hatfull-head" aria-label="the hatfull head permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The Hatfull Head</h2> <span class="gatsby-resp-image-background-image" style="padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAABAADAQX/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAQL/2gAMAwEAAhADEAAAAX4IBrDrso8zFPYsaX//xAAcEAACAgIDAAAAAAAAAAAAAAAAAQIDBDEQEkL/2gAIAQEAAQUCK7FPnG2OxIU4KXYt16P/xAAXEQEAAwAAAAAAAAAAAAAAAAAAEBES/9oACAEDAQE/AYpl/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAEQERL/2gAIAQIBAT8BizbP/8QAGhAAAgIDAAAAAAAAAAAAAAAAECEAAQIRMf/aAAgBAQAGPwKWuHMpbND/xAAdEAADAAICAwAAAAAAAAAAAAAAAREhMRBRcYGh/9oACAEBAAE/IRyqZXCGOyfaVCutkcmBaJNHkX04/9oADAMBAAIAAwAAABBMAvH/xAAYEQADAQEAAAAAAAAAAAAAAAAAAREQIf/aAAgBAwEBPxC40XCD/8QAGBEBAAMBAAAAAAAAAAAAAAAAAQAQESH/2gAIAQIBAT8Qydg02j//xAAfEAEAAgICAgMAAAAAAAAAAAABABExYSFxQZGhsfD/2gAIAQEAAT8QRuknlWobvcoYsItMJQzWNfM2EuarFBywQZcqyLvc3vqcKf2mNep9yqXuf//Z'); background-size: cover; display: block;" > <picture> <source srcset="/static/27a693e6b0740566765f0914ce79eff3/89b46/illustration-too-many-hats-not-enough-time-j-scott-collard.webp 180w, /static/27a693e6b0740566765f0914ce79eff3/97ead/illustration-too-many-hats-not-enough-time-j-scott-collard.webp 360w, /static/27a693e6b0740566765f0914ce79eff3/7f4d9/illustration-too-many-hats-not-enough-time-j-scott-collard.webp 405w" sizes="(max-width: 405px) 100vw, 405px" type="image/webp" /> <source srcset="/static/27a693e6b0740566765f0914ce79eff3/4f3ca/illustration-too-many-hats-not-enough-time-j-scott-collard.jpg 180w, /static/27a693e6b0740566765f0914ce79eff3/bac16/illustration-too-many-hats-not-enough-time-j-scott-collard.jpg 360w, /static/27a693e6b0740566765f0914ce79eff3/338c4/illustration-too-many-hats-not-enough-time-j-scott-collard.jpg 405w" sizes="(max-width: 405px) 100vw, 405px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/27a693e6b0740566765f0914ce79eff3/338c4/illustration-too-many-hats-not-enough-time-j-scott-collard.jpg" alt="Illustration by J.Scott Collard: Too many hats not enough time" title="Illustration by J.Scott Collard: Too many hats not enough time" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> Illustration by: <a href="https://jscdesign.wordpress.com/2010/02/22/too-many-hats-not-enough-time/" target="_self" rel="nofollow">J.Scott Collard</a> The count doesn’t stop with these five hats. There are other smaller, less visible hats in my closet, some that I am not even aware of. Not to mention the hats I need to wear in my personal life: husband, father, son, brother and the list could go on. Someone is playing tricks on me. Sticking to these five hats, the reality is I can’t pick and choose when to wear them. There is always someone around that expects me to be wearing one of those hats — so I end up wearing them all, all the time, whether I like it or not. I am built to cope with many things on my plate so I should be fine, at least to some degree. The trouble is these hats demand quite different mindsets to function well. Shifting mindsets all the time is not sexy, nor is it efficient for the end result. It is also a sure way to disappoint and piss people off either because they’ve caught you with the wrong hat, you haven’t really worn that hat for a while, or you are having trouble shifting mindsets. It’s a game I for one feel that it can’t be won — and I hate losing, much less playing when I know I can’t win. <h2 id="the-sane-head" style="position:relative;"><a href="#the-sane-head" aria-label="the sane head permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The Sane Head</h2> Ideally, there would be a single hat for every head, but that is just not feasible and possible in real life situations. So there is no point in wishful thinking. What one can do is first become fully aware of its hats, their implications, their requirements and see how can they be grouped together in compatible, meaningful, fulfilling ways. Those are the hats that should be kept and cherished. Secondly, we should try and surround ourselves with people willing to wear more than one hat so we can share a closet or give away hats to them — they may very well be more capable and happier to wear them. It’s a win-win situation. Thirdly, everyone should be empowered and helped to lead from where they stand. You don’t need a special hat to make small decisions, to spot things worth improving, or to give someone your feedback. You just need to be willing to lend a helping hand and work towards the greater good — we are all in this together. This story was initially published on <a href="https://medium.com/@vladpotter/the-founders-dilemma-many-hats-one-head-7b413812792d" target="_self" rel="nofollow">Medium.com</a>, but I prefer it to live here. It think it feels more at home. 🤗https://thinkwritecode.com/up-or-out-how-i-ve-managed-to-embrace-the-elephant/https://thinkwritecode.com/up-or-out-how-i-ve-managed-to-embrace-the-elephant/Sun, 23 Apr 2017 16:12:08 GMTWe at <a href="https://pixelgrade.com" target="_self" rel="nofollow">Pixelgrade</a> have been going through some sort of an epiphany since we’ve embarked on the process to clarify who we are, why and what we are doing, what are our expectations from each other. In fancier terms, we’ve defined our core values, mission, principles, long term strategy, and last but not least, a big ass BHAG. Early on in this process I’ve been confronted with a soul shaking paradigm when it came to people: “Guys, in the end it’s Up or Out!” Say what ?!?! Just like that? You are talking about people here, about my teammates, about my second family. My first (inner) reaction was one of rejection as this elephant-idea laid siege at some of my deepest convictions. After all, these were the beliefs that saw us through the previous 4 and a half years. Have I been so wrong? To give you a little bit of context, me and my brother have started Pixelgrade with no prior business training or experience. We were two passionate, decent guys that wanted to build something meaningful. Common sense was the guiding principle: <ul> <li>we will care for and treat each team member fairly, just like we would like to be treated and cared for — we would be one happy family;</li> <li>we will trust them and give them the freedom to pursue their passions;</li> <li>we will work together towards the same goals;</li> <li>we will all share the ups and downs;</li> <li>we will not be bogged down with bureaucracy and corporate nonsense;</li> <li>we will not pursue growth for the sake of it — we will keep the team as small as possible so each could have a meaningful impact on the path ahead;</li> <li>passion and grit will prevail in the end — we will find people that share our drive and willingness to do things, beautiful things.</li> </ul> This was, and to a great extent still is, the “manifesto” that helped us stay on track. We never thought about writing it down as we knew people will hear it from us and see us living it day in and day out. That would be more than enough. In the end, it was just common sense right? How hard can it be to live by it? As it turns out, quite hard. And it was equally hard to understand why. Those pesky three little words have been nagging me for the past nine months and each time I sat down to write this story something didn’t make sense, some fundamental insight was eluding me. How could I reconcile “Up or Out” with my deep belief that people are inherently good, that given the right context each can reach new, unexpected heights? After thinking and reading plenty (maybe too much?) about management, culture, organizational logic, motivation, work environment, I feel quite confident that I’ve managed to make sense of this paradigm. It all comes down to applying personal life concepts to a professional environment without any adaptation. The hardest blockage to overcome was us being a family. We are not, at least not in the classical term. This mindset does more harm than good as it slowly, but surely, allows us to get soft, to lose our hunger for improving ourselves. We definitely want people to feel a sense of belonging, that they are surrounded by others who truly care about them, who will forgive their mistakes. But unlike a real family who is forever bound by blood, a team is bound by something much weaker and delicate: values and expectations. As a consequence, one must live by those values and meet those expectations if he is to be part of the “family”. Unlike blood, as we grow older we can shift our values, we can refocus onto new directions — and that is OK! What is not OK is to expect the team to accept that you’ve changed in incompatible ways and keep you on board. The second hurdle to overcome was the obvious one: why in the world one must go up, constantly? In the beginning, “Up or Out” got me thinking of greed, workaholism, hamster wheels, corporate ladders, perpetual insatisfaction, growth for the sake of it, and ultimately lack of happiness. I would have none of that. What I needed to come to grips was that we are not a family, but a team — and a team is a different kind of beast. A team is a complex, living, breathing organism with an intricate web of connections amongst its members — and to top it all up, on multiple layers. As part of a team, we are constantly assessing ourselves in relation to the others, we give and receive feedback (verbally and non-verbally), we have expectations towards the others (even if we don’t communicate them), we get encouraged or discouraged by our peers and their evolution. On top of all this human interaction comes the mother of all commodities: time. It’s in limited supply, has no shelf life, and we need to spend it for everything we chose to do. Just about anything can be reduced to its human-time value: from love to the pencil you scribble your thoughts with. In the context of a team, time is an overarching presence: we use it to assess work, make decisions about strategy or pricing, to set priorities and focus our efforts. But more importantly, on a personal level, we rely on time to attribute authority to our peers, to gauge their efficiency, passion, commitment and dedication. We can’t help it as time is too important to each one of us and it all comes down to merit. So, what do we expect our peers to do with the passage of time? Sure as hell we don’t expect them to waste it and stand idle. No, we expect them to improve: expand and build upon their skills, take on new responsibilities, be more experienced and share that experience for the benefit of those that lack it, have a deeper understanding of things and share their insights with those that have a hard time making sense of it all. We naturally expect them to go up! One may have lower expectations from itself, but when it comes to others we are far less lenient. It’s just the reality of human nature. So you see, I had to reconcile my common sense with the realities of life: it is crucial for the good health of the team that everyone goes Up! Anything else is a recipe for a two class system: on the one hand the achievers, the thinkers, the rock stars if you like, and on the other hand the workers, the ones that endlessly do just about the same thing. I will have none of that! It’s just wrong from every conceivable angle, especially in an environment as vibrant as the web. Each one’s life is too precious and short for that. I will leave it at that, but I am keen on hearing others’ thoughts and feelings about this. I am only human after all. This story was published first on <a href="https://medium.com/@vladpotter/up-or-out-how-ive-managed-to-embrace-the-elephant-a15acce82a0" target="_self" rel="nofollow">Medium.com</a>. I believe it needs to take it’s place here, as a witness of times gone by.