Pseudo Code

Avatar of Chris Coyier
Chris Coyier on

Learn Development at Frontend Masters

Yonatan Doron wrote a post on Medium not long ago called “Art of Code — Why you should write more Pseudo Code.” Love that title, as a fan of pseudo code myself. That is, writing “code” that describes something you want to do or communicate, but that isn’t of any particular language and doesn’t use any correct APIs or anything.

Taking this time to write commented pseudo code helps organize our thoughts and our motivation and plan the desired outcome code ahead. By doing so, one moment later when we venture through to start hacking we would always have this map or skeleton of our thoughts that can help us regain focus and increase our productiveness

Jeremy Keith once likened it to writing a script:

When the user submits a form, then show a modal dialogue with an acknowledgment.” I then encouraged them to write a script …but I don’t mean a script in the JavaScript sense; I mean a script in the screenwriting or theatre sense. Line by line, write out each step that you want to accomplish. Once you’ve done that, translate each line of your English (or Portuguese) script into JavaScript.

I’ve seen educators use this technique time and time again. But it isn’t just for teachers to use and students to learn from — it’s for anyone’s benefit. I find myself doing pseudo code before I write real code, sure, but I also leave it in place sometimes in code comments. Most commonly, I do it in Notion documents or in Slack conversations to get across a point.

Even simple ideas:

  stop email delivery

Anything with logic and branching or step-by-step bits benefits highly from it. Notice that code isn’t valid code. It’s not valid in any language I can think of. Sometimes, I’ll throw in some random parenthesis or a semicolon out of muscle memory. Who cares? It’s just about communicating an idea to myself or someone else.

if (grid is supported)
  use grid
  lay out things in a basic row with flexbox

It’s natural. Chances are, they won’t care about the syntax either, they’ll just get the idea.

on form submit
  if errors
     show errors;
     submit to api;
     if api success
        show ui success;
        show ui fail;

(After writing these out, it made me think of uilang. Check out how the plain language code blocks work there.)

Yonatan’s article was missing real-world pseudo code examples, so I asked around. Check out all these great examples!

I’m a little surprised at how much of it is on paper! That’s pretty cool, really. Just weird for me as I very rarely use paper for anything. I probably should.