Pseudo Code

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:

if env.dev
  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
else
  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
  validate
  if errors
     show errors;
  else
     submit to api;
     if api success
        show ui success;
     else
        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!

My whole notebook is a pseudo…

These transfer to comments before I start coding so I know what I’m doing & what I’ve done later pic.twitter.com/9vfJYfweDh

— Ruth John (@Rumyra) May 28, 2019

whiteboards are amazing for writing pseudocode as well as adding graphics to it. pic.twitter.com/56FUu4rhmU

— norom (@_norom_) May 28, 2019

Oh I used to make these, a long time ago…. pic.twitter.com/lQi4Y8RhwP

— Ben Koppenens (@bkoppenens) May 28, 2019

All the time! pic.twitter.com/YFVVNwls5M

— Bryan (@iamBryanSanders) May 28, 2019

Trying to work with JavaScript and php simultaneously can get a little tricky sometimes pic.twitter.com/Xp0bQyV86D

— frankie | webdev (@azoicx) May 29, 2019

late entry. quick map of scripts. pic.twitter.com/n1kYDxKgya

— Adam Styles (@thelibstyles) May 31, 2019

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.

The post Pseudo Code appeared first on CSS-Tricks.