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:
people say...
It's hard to read!
I'm with Eric Elliott when he said:
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?
- If browser vendors would fully implement the standard, including tail call optimization, then proper pipelines could be inlined.
- Browser vendors concerns are supposed to come after end-user concerns and after developer concerns.
- 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
- 119