Hey mark. I really enjoy playing your design method games. I was wondering, would you consider creating a game that teaches pixel ratio measuring?

Mark: Hi Joel, I haven't considered a game like that, but I'm curious as to what's your idea if you'd like to share. Do you refer to pixel density or image ratios? Like "try to draw a 1:1 square or 16:9 rectangle?"

Correct!

Mark: Sounds easily vibecoded and could be made fun, I work fulltime now so I don't make any promises, but I might just take it for a spin one day.

If I may suggest this is also completely within your reach today, describe to Claude what you want and, with enough patience, it will give it to you. If you show it to me I can also help you with some prompts to take it to the next level.

Either way it's fun.

Kind regards, Mark

Thank you so much for your response. My wish is to be able to vibecode, but it's too much for me as I'm in the middle of learning a ton of other stuff. That said it's on my bucket list. Let me know if you have any progress updates, and I understand that you have other priorities. Thank you so much

Mark:

Completely understand, we can only eat as much as we can digest.

...

After writing that I decided to play around an hour to see where I would get, this is the result:

A vibecoded aspect ratio game

At some point you will have to put your learning to practice, use AI to fool around, as if there were nothing to learn about it, the sooner you get acquainted the better. It is great for putting your ideas into action, quickly. I should practice this more so thanks for the human to human prompt.

Cheers,

Today was the day I finally did it. I updated the backers page. It had been exactly one year! I’m working full-time now and I’m not as dependent on donations as I was before, but it’s still very useful: a few expenses are necessarily tied to my Mexican bank account, and transferring money every month would be a hassle. What I receive in donations covers these costs and makes me happy.

Still, I have to admit that now that I have much less time to do these tasks, so I will update every six months. Gosh I miss having all the time in the world (and yet I feel I did so little with it). Still, I’m appreciative of my current situation, I’m working with awesome people at Invopop in Madrid, Spain.

It was an eye opener to try to free myself from its grasp, the more I struggled, the tighter it held me. Finally I had to admit I had no power over it. I started reading the 12 steps of AA and then completely changed my context by moving to Madrid. Two sober months after, my month-long high in Barcelona now seems a hazy nightmare in retrospect. I’m much happier and focused now.

I’m a little bit bummed that I have yet another stale project sitting on my hard-drive. I think this one has a lot of potential, but I’ve joined a start-up as a full-time product designer (this will come in a different post), so I won’t have time to complete it.

I love saying these words to myself, because the rebel daemon within whispers “you could probably put an hour here and there, and see how it goes”. Also stacking odds in my favor is the fact that it’s winter in Spain: it’s not as cold and dark as to make me miserable (as Canada does), yet it’s cold enough to discourage me from spending my meager free time outdoors. I’ll give it a chance because it’s worth it.

Nothing looked wrong in the code, so I started implementing code to work around it. I didn’t lose too much time on this, I saw pretty quickly that it was a fools errand which would introduce a lot of complexity. I had to understand what was going wrong.

I had already given up, and was writing this work log to tell you about my frustration, but as I was writing this it occurred to me that the caret might be changing its position because its content is also changing. And this was right! When you change the value of a textfield via javascript, the caret will move to the end of the updated text value. So my objects looked something like this:

{
  "_timestamp": 1726226054029,
  "selectionStart": 0,
  "selectionEnd": 0,
  "scrollTop": 0,
  "scrollLeft": 0,
  "value": "☹︎← delete"
},

The caret position was unset because the value changed after the position was set. By changing value position within the object I got to set the caret position after the value change, which fixed the problem:

{
  "_timestamp": 1726226054029,
  "value": "☹︎← delete",
  "selectionStart": 0,
  "selectionEnd": 0,
  "scrollTop": 0,
  "scrollLeft": 0
},

So this pretty much sums today’s work, and I’m satisfied with it. I once heard about romantic relationships “every emotional injury must heal 101% as to make the relationship stronger”. The same thing goes with projects, resolving problems should give more satisfaction than the frustration they cause, because programming is a never ending source of frustration (and satisfaction).

I’m satisfied with the progress this week, tomorrow I’ll try to wrap up a mini-game of sorts (with some bleeding time into the weekend for sure) in order to have a working mini-game by the start of next week.

So, if you hit play, you will see the cursor move and insert dots at the end of each line [I just saw that it is making some weird jumps in production, I’ll debug later]. Then you can attempt it yourself and see if you can beat me with 10 keystrokes (there may be a more efficient way to do it).

I’m happy with the progress I’m doing. The purpose of doing a simple first stage is to avoid pitfalls and understanding constraints early (I can already see I need to do something about the “tutorial”, it’s difficult to follow the caret and what’s going on in the text field). At the end of the will I will rewrite everything so that it’s clean and provides good structure from where things can grow.

The game will only cover OS wide text-editing patterns. Beginners often don’t know how to select text without using the mouse, and advanced users often have blindspots (say you type teh, now fix it with a single keystroke). It should be entertaining for everyone, how to actually accomplish that is the art.

I will share my progress here (my projects tend to go stale if I don’t! So thanks for reading). My progress for today was simple but important: I needed to record all the actions that happen within a textfield and be able replay them.

I got there kinda crudely, but it works! Tomorrow I will clean it up.

I’m travelling to Mexico City in order to legalize some document in order to obtain a work visa for Spain. I won’t bore the reader with the bureaucratic details involved, instead I will write about something that has been on my mind.

Some days ago I was listening to Rick Rubin’s interview to Steven Pressfield on Rick’s excellent podcast, Tetragrammaton. Steve mentioned that he writes every day in the direction to a particular project. I wondered if I could do this, to have a writing project to which I could contribute every day, instead of keeping this sort of journal. Which project would this be?

Another topic they touched upon is that sometimes we feel as if we had a book inside of us which needs to be expressed. Putting these two together, I came to think: if I were to write every day in the direction of a project, what would this be?

For many years I’ve been trying to build bridges between spirituality and design, which has been more tricky than one would expect. Spirituality is a loaded term which I often hesitate to define, knowledge of it comes from experience rather than an intellectual transfer of knowledge.

The conversation between Rick and Steven was spiritual in nature, even though the word spiritual wasn’t even mentioned. Rick speaks about Source while Steven speaks about the Muse, as the driving force behind the creative impulse. Us designers work very differently from artists in this regard: we research, integrate, prototype, research again, and then iterate until we reach a particular aim. Artists don’t completely do away with this methodology, but it happens in the background, and the aim is more of a theme rather than a target.

The main challenge in writing about a spiritual way of designing — as opposed to an intellectual way of designing, is to convince the reader that they possess spirit. Again, the challenge is to induce an experience of spirit rather than making an intellectual case out of it. Perhaps an abbreviated secular model of St. Ignatius Spiritual Exercises would work. But this is asking too much.

First let’s put aside the term spirit, let us imagine that we are trying to define something within us, which is not conscious, which directs our actions towards a purpose which is outside ourselves. Since it is unconscious and within us, we cannot look directly at it, we can only see its effects.

The time to board the bus is approaching and I have gotten nowhere with this stream of thought. I will take this question on the ride: “How do I demonstrate that you possess a spirit?”.

I will take full-time employment with a company in Barcelona in April. It came at just the right time—when you are despairing because you realize that the current situation is simply unsustainable. I’ve struggled through contract work of the best kind: a project that was right in my technical and creative ballpark, managed by a kind team, done for a social cause. Yet I’ve found myself struggling through it all, full of self-doubt, holding my breath as I was working, with no good explanation as to why this was happening.

The reason is partly a misunderstanding of the creative psychology. As I’ve come to fully accept myself, I’ve also accepted the voices of aversion, doubt and procrastination. I wait to feel inspired because I think I will be 10x more productive if I do so. So there are large gaps between my work sprints, and my work sprints only happen because of urgency, not because of inspiration.

I can work once urgency beats procrastination. This should have provided a clue that there was nothing wrong within except that I was believing whatever told me it wasn’t a good time to work. At the same time, I know by experience and intuition that conducting a war against yourself is folly, you will only be drained. The key to this is simply not listening. Resistance is part of the game. Listening to Pressfield talk about this so lucidly made me realize this.

I could clearly see a parallel between my other current passion, my body. My knee hurts. My left shoulder is inflamed. I have a strange pain that goes from my buttock to my knee. I have a knot on my trapezius. And yet, I hit the gym every day, even if I don’t feel like it, because I never question how I feel regarding if I attend the gym or not. But I also don’t force myself through a normal routine as if I were healthy. Instead of doing strength work I do rehab work, and I strengthen whatever can be strengthened (since it is not advisable to work your muscles asymmetrically, the only strength I can develop is my core). I don’t struggle with the question if I should exercise because it’s a fact that I will go to the gym.

In the same way, the way of escaping the creative struggle is not questioning wether I should work. If my mind is not sharp enough today, there’s always tweaking around with font sizes or layout issues. I know as a fact that I’ve faced this struggle before and come to the same conclusion, why is it that we forget time and time again?

So I sat down to meditate. Whoah! I could barely count to ten breaths without getting sidetracked. Through much effort, and still having loud background thoughts, I worked my way up to 60 breaths. I put myself back to work, still with great efforts at finding focus.

Something felt wrong in the effort at control. I came to realize: I’m not letting go of thoughts, my focus is being exerted in controlling attention. I know meditation is not supposed to be like this, it’s not tense, it’s relaxing.

I had to remind myself of what attention actually is. I read this chapter of Charles Eisenstein’s book, “The more beautiful world our hearts know is possible” aptly titled Attention, and through it I was reminded what attention actually is: becoming one with the observed.

When you are focused you are not thinking about work, you are work. When you are paying attention to someone, you are not thinking about the person (i.e. what is this person trying to convey? oh look he crossed his arms he’s rejecting my statement) rather you become the person and you feel what he feels.

In creative work, you become the object, and the object strives and desires to become whole. You cease to exist, and allow the object to use your body and mind to complete itself. In design work there is a place for separation between the designer and the designed, but these two modalities work in tandem, unity and separation are two faces of the same coin.

This is a theme I will continue exploring superficially. I can’t dive deep into it at this time as I have work to do.

This morning I resumed Kern Type work after multiple week hiatus because of travel.

An existential insight: I know that the best way to complete a project is to keep the ball rolling, to do a little bit every day without gaps. However, this belief causes that the gap to grow larger when there is one.

There is a difference between dropping the ball two hours, two days, two weeks, two months, or two years. How soon you find yourself “playing” with the ball after a long hiatus depends on the person and the project, so there is no universal recipe here, only a maxim:

The best time to pick up that project you are working on is now.

I chose to implement the thumbnails for each level (which is simply the word corresponding to the first stage), however, since the shapes are in SVG it would have to be a “mini rendering” of the full blown version.

After some time looking at my own code that implements the interactive SVG rendering I chose not to do it this way, getting eventListeners out of the way would be too much work.

So I opened Dev Tools and selected the SVG, copied it to the clipboard and voila! After some CSS styling I had my small thumbnails.

A good way of warming back up to the codebase.

The way it was originally implemented was very naive. It lacked elegance, it wasn’t performant, it introduced complexity for what amounts to eye candy. However, it worked, and when I found myself playing the new version I missed my transition.

This new version uses a couple of tricks to be performant (the visuals are done on DOM elements rather than SVG ones, and they use CSS transforms). The code is still inlined, but I have a clear idea of how to separate concerns so that Eye Candy does not bring her ugly sister Complexity by the hand.

Yesterday I did some of this work on the train from Montreal to Toronto. I’ll spend two weeks in Montreal with my family, and then I will fly to Victoria in the opposite coast of Canada to visit more family. Afterwards I fly to Cancún to spend a month with another kind of family (my friends). My last flight will be to go back home in Puebla in December.

It’s difficult to get any meaningful work done when I’m in nomadic mode. It’s already difficult enough when I’m sedentary. But, in the spirit of trying new things, I’m working on Kern Type in the little pockets of time between my chores. I’m framing it not as result but as process, the purpose is not to finish Kern Type, it’s to keep myself warm to the codebase so that when the conditions are good, I can make use of tailwind and work at full speed.

Only time will tell!

I also discovered that—despite all my available time—I can only put one or two hours of real work into the product. It’s like my yoga practice. Or my gym practice. Or my writing practice. All I need is to incorporate 90 minutes of programming into my day, as I do with my hobbies, instead of trying to work marathons day in and day out. I also need to be consistent about it.