Bienvenido

Bienvenue

Willkommen

欢迎

환영

いらっしゃいませ

مرحباً

Vítejte

ยินดีต้อนรับ

Siyakwamukela

Добро пожаловать

𓅃𓅂𓃭𓎢𓅱𓅓𓅂

01010111 01100101 01101100 01100011 01101111 01101101 01100101

Welcome

Fàilte

is mise 

Cory

𓂜𓈖

Cory Brown

.tech

jsthings

𓂜𓈖

@uniqname

𝕏

Aumni - A JP Morgan Chase company

redacted

1stdraftdesign

Cory Brown

JS

15 years

𓂜𓈖

CSS

HTML

Cory Brown

𓂜𓈖

in theater 13

VS

1st year

Calamity!

𓂜𓈖

Code

A.I.

We do this to

𓂜𓈖

Ourselves

We must expect more of our colleagues

𓂜𓈖

more

But first we must demand more of ourselves

𓂜𓈖

ourselves

𓂜𓈖

teach

learn

share

think

question

experiment

imagine

Readability

𓂜𓈖

The degree to which something is readable.

𓂜𓈖

Readable

The ability to be read.

Read

𓂜𓈖

The past tense of read.

Read

𓂜𓈖

The act of comprehending written information.

Readability

𓂜𓈖

The degree to which some written information is able to be comprehended.

Readability

Code should be written to minimize the time it would take for someone else to understand it.

𓂜𓈖

The Fundamental Theorem of

Boswell, Dustin & Foucher, Trevor (2012). The Art of Readable Code. O'Reilly

Readability

Newspapers typically aim for an 11th grade reading level when writing articles.

𓂜𓈖

Jess Sawyer. (2024, August 8). Newspaper Reading Level. Originality.ai. https://originality.ai/blog/newspaper-reading-level

Which someone?

Readability

Why 11th grade reading level?

𓂜𓈖

Which someone?

Why not 5th?

11th

5th

3rd

or 3rd?

Readability

How do you even know what reading level something is at?

𓂜𓈖

Which someone?

Readability

𓂜𓈖

Which someone?

American College Testing

Code

Experiment

𓂜𓈖

Tha mi an docas gum bi latha math leibh!

𓂜𓈖

Y que disfrutes de mi presentación

𓂜𓈖

Et que vous appréciez ma présentation

𓂜𓈖

我还要你喜欢我的分享

𓂜𓈖

Code Readability Is Not

the ability to read code aloud and have it sound like English.

𓂜𓈖

JavaScript is not English

𓂜𓈖

Languages have grammar

𓂜𓈖

Tha mi an docas gum bi latha math leibh!

Am I the hope that will be a day good at you.

𓂜𓈖

I hope that you have a good day.

Programming Languages have grammar

𓂜𓈖

(which is not English grammar)

Readability

𓂜𓈖

Un

We know it when we see it.

obscenity!

Unreadable code is like

Experiment

𓂜𓈖

const activeUserNames = [];
for (i = 0; i < users.length; i++) {
  if (users[i].active) {
    activeUsers.push(users[i].name)
  }
}
const activeUserNames = users
  .filter(({ active }) => !!active)
  .map(({ name }) => name)

const activeUserNames = 
  users.flatMap(({ active, name }) => !!active ? name : []);

What's more

readable

?

𓂜𓈖

1

2

3

(tasks) => {
  let val;
  for (task of tasks) {
    val = await task(val);
  }
  
  return val;
}
(tasks) => tasks.reduce(
  (task, last) => last.then(task), 
  Promise.resolve()
)

What's more

readable

?

𓂜𓈖

1

2

() => {}

vs

function () {}

𓂜𓈖

🌶️ Spicy Tangent

𓂜𓈖

Better 1?

createPerson({ name: "Cory", title: "Architect", level: "Awesome" });
createPerson({
  name: "Ryan",
  title: "Engineering Manager",
  level: "Wicked Awesome",
});
createPerson({
  name: "Max",
  title: "Senior Engineer",
  level: "Freakin' Awesome",
});
createPerson({ name: "Kade", title: "Engineer", level: "Hella Awesome" });
createPerson({ name: "Richard", title: "Not Sure", level: "Kinda a bummer" });

createPerson({ name: "Cory",    title: "Architect",           level: "Awesome" });
createPerson({ name: "Ryan",    title: "Engineering Manager", level: "Wicked Awesome" });
createPerson({ name: "Max",     title: "Senior Engineer",     level: "Freakin' Awesome" });
createPerson({ name: "Kade",    title: "Engineer",            level: "Hella Awesome" });
createPerson({ name: "Richard", title: "Not Sure",            level: "Kinda a bummer" });

Or better 2?

(Rightly) Recommend in "The Art of Readable Code"

createPerson({ name: "Cory", title: "Architect", level: "Awesome" });
createPerson({
  name: "Ryan",
  title: "Engineering Manager",
  level: "Wicked Awesome",
});
createPerson({
  name: "Max",
  title: "Senior Engineer",
  level: "Freakin' Awesome",
});
createPerson({ name: "Kade", title: "Engineer", level: "Hella Awesome" });
createPerson({ name: "Richard", title: "Not Sure", level: "Kinda a bummer" });

createPerson({ name: "Cory",    title: "Architect",           level: "Awesome" });
createPerson({ name: "Ryan",    title: "Engineering Manager", level: "Wicked Awesome" });
createPerson({ name: "Max",     title: "Senior Engineer",     level: "Freakin' Awesome" });
createPerson({ name: "Kade",    title: "Engineer",            level: "Hella Awesome" });
createPerson({ name: "Richard", title: "Not Sure",            level: "Kinda a bummer" });

What Prettier does after your hard work to make things more readable.

Don't confuse

readability

familiarity

with

𓂜𓈖

Y knot tho?

Shouldn't familiarity be a part of readablity?

𓂜𓈖

𓂜𓈖

🤔

𓂜𓈖

🤨

𓂜𓈖

😎

𓂜𓈖

Familiar to whom?

Junior developers?

Senior developers?

Mid-levels?

On your team?

At your company?

In the industry?

Backend Engineers?

Frontend Engineers?

Java Engineers?

Your mom?

𓂜𓈖

𓂜𓈖

👍

👎

𓂜𓈖

𓆄𓅱

👍

👎

𓂜𓈖

𓆄𓅱

👍

👎

𓂜𓈖

be free from

Will be without

𓂜𓈖

[An] experiment exposed two groups of people to Chinese characters for short times. Participants were then told that these symbols represented adjectives and were asked to rate whether the symbols held positive or negative connotations. The symbols the participants had previously seen were consistently rated more positively than those they had not.

 

In a similar experiment, people were not asked to rate the connotations of the symbols, but to describe their mood after the experiment. Members of the group with repeated exposure to certain characters reported being in better moods than those without.

https://en.wikipedia.org/wiki/Mere-exposure_effect

𓂜𓈖

Familiarity Bias

a phenomenon in which people tend to prefer familiar options over unfamiliar ones, even when the unfamiliar options may be better.

https://www.thebehavioralscientist.com/glossary/familiarity-bias

𓂜𓈖

👍

👎

familiar

unfamiliar

🧠

teacher

student

🧑‍🏫

🧑‍🎓

This code is not readable.

This code is not readable.

This code is unfamiliar to me.

Why do you think this is better?

If you can't explain it simply, you probably don't understand it.

Someone at some point, probably not Einstein, but maybe Einstein?

Why is this more readable than that?

Is it because it's more familiar to you?

Measurability

If you want to enforce it, you need to be able to detect it.

If you think it's bad, prove it!

Scrutinize every unfamiliar thing?

For That

Got Time

Nobody

Ain't

Be open

Ask questions

Suspend judgment

Embrace (some) experimentation

Reviewer/Reader

Be ready to teach

Be ready to be taught (you will be wrong)

Receive feedback gracefully

Isolate impact

Author

You can't accurately judge until you accurately understand.

Assuming you now understand the "grammar"

Is it better

Does it clarify or obscure?

Does it hide details or hide bugs?

Can you scan or must you read?

Is it a complete encapsulation, or does it leak?

Who hurt you?

😣

I'm with Richard Feldman when he asked:

Why Isn't Functional Programming The Norm?

people say...

It's hard to read!

I'm with Eric Elliott when he said:  

Nested Ternaries Are Great!

people say...

It's hard to read!

I'm with the Authors of "The Art of Readable Code" when they advocate for flexible white line breaks and column alignment.

people say...

 jUsT uSe pReTtIeR!!!

I mean, right? This clearly better?!?!

createPerson({ name: "Cory", title: "Architect", level: "Awesome" });
createPerson({
  name: "Ryan",
  title: "Engineering Manager",
  level: "Wicked Awesome",
});
createPerson({
  name: "Max",
  title: "Senior Engineer",
  level: "Freakin' Awesome",
});
createPerson({ name: "Kade", title: "Engineer", level: "Hella Awesome" });
createPerson({ name: "Richard", title: "Not Sure", level: "Kinda a bummer" });

createPerson({ name: "Cory",    title: "Architect",           level: "Awesome" });
createPerson({ name: "Ryan",    title: "Engineering Manager", level: "Wicked Awesome" });
createPerson({ name: "Max",     title: "Senior Engineer",     level: "Freakin' Awesome" });
createPerson({ name: "Kade",    title: "Engineer",            level: "Hella Awesome" });
createPerson({ name: "Richard", title: "Not Sure",            level: "Kinda a bummer" });

What Prettier does after you hard work to make things more readable.

Recap

Readable code and familiar code are very different things.

  • Readability is measurable
  • Familiarity is deeply contextual
    • Familiar to whom?

Recap

Come with data

Be open to data

Assert less

Ask more questions

You can't accurately judge until you accurately understand.

The Art of Readable Code

Further Reading

Boswell, Dustin & Foucher, Trevor (2012). The Art of Readable Code. O'Reilly

Moran Taing!

Cory Brown

.tech

jsthings

Nested

({ displayableStatus }) =>
      displayableStatus === 'received'
        ? 'var(--blue400)'
        : displayableStatus === 'processing'
          ? 'var(--purple400)'
          : displayableStatus === 'complete'
            ? 'var(--green300)'
            : 'var(--blue400)'

Ternaries

🤢

Nested

({ displayableStatus }) =>
    displayableStatus === 'received'   ? 'var(--blue400)'
  : displayableStatus === 'processing' ? 'var(--purple400)'
  : displayableStatus === 'complete'   ? 'var(--green300)'
  									   : 'var(--blue400)';

Ternaries

Chained

({ displayableStatus }) =>
      displayableStatus === 'received'
        ? 'var(--blue400)'
        : displayableStatus === 'processing'
          ? 'var(--purple400)'
          : displayableStatus === 'complete'
            ? 'var(--green300)'
            : 'var(--blue400)'

Prettier

🤢

({ displayableStatus }) =>
  displayableStatus === 'received'
    ? 'var(--blue400)'
    : displayableStatus === 'processing'
    ? 'var(--purple400)'
    : displayableStatus === 'complete'
    ? 'var(--green300)'
        : 'var(--blue400)';

ESLint

({ displayableStatus }) =>
  displayableStatus === 'received' ? 'var(--blue400)'
    : displayableStatus === 'processing' ? 'var(--purple400)'
    : displayableStatus === 'complete' ? 'var(--green300)'
    : 'var(--blue400)';
({ displayableStatus }) => {
  if (displayableStatus === 'received')   return 'var(--blue400)';
  if (displayableStatus === 'processing') return 'var(--purple400)';
  if (displayableStatus === 'complete')   return 'var(--green300)';
  return 'var(--blue400)'
}
({ displayableStatus }) => {
  if (displayableStatus === 'received') {
    return 'var(--blue400)';
  }
  if (displayableStatus === 'processing') {
    return 'var(--purple400)';
  }
  if (displayableStatus === 'complete') {
    return 'var(--green300)';
  } else 
  return 'var(--blue400)'
}
({ displayableStatus }) => {
  switch (displayableStatus) {
    case 'received': { return 'var(--blue400)' };
    case 'processing': { return 'var(--purple400)' };
    case 'complete': { return 'var(--green300)' };
    default: { return 'var(--blue400)' }
  }
}

ESLint

({ displayableStatus }) => {
  switch (displayableStatus) {
    case 'received': {
      return 'var(--blue400)';
    };
    case 'processing': {
      return 'var(--purple400)';
    };
    case 'complete': {
      return 'var(--green300)';
    };
    default: {
      return 'var(--blue400)'
    }
  }
}
({ displayableStatus }) => {
  switch (displayableStatus) {
    case 'received':   { return 'var(--blue400)' };
    case 'processing': { return 'var(--purple400)' };
    case 'complete':   { return 'var(--green300)' };
    default:           { return 'var(--blue400)' }
  }
}

ESLint

Any one of which I could make a decent argument are more "readable" than what Prettier does to chained ternaries.

Almost none of which will Prettier allow.

I think JavaScript deserves a proper pipeline operator where the result of the previous function gets passed as the sole argument to the next function, you know, like a normal pipeline operator.

So why do people hate them?

certain browser implementors

^

Some people are keen to steer people away from functional and point free style JavaScript becase of the "ease with which [developers] can allocate many many closures."

There are at least three problems with this.

My short answer?

  1. If browser vendors would fully implement the standard, including tail call optimization, then proper pipelines could be inlined. 
  2. Browser vendors concerns are supposed to come after end-user concerns and after developer concerns. 
  3. This proposal was proposed as a built-in for lodash/ramda style pipe functionality. It is very unlikely to have been proposed in it's current form which seems to only exist due to  sunk costs fallacy thinking. 

Don’t confuse readability with familiarity

By Cory Brown

Don’t confuse readability with familiarity

  • 122

More from Cory Brown