[comment]: # "markdown: { smartypants: true }" # The 2 Hardest Things in Computer Science...

# The 2 Hardest Things in Computer Science... 1. Caching

# The 2 Hardest Things in Computer Science... 1. Caching 2. Naming Things

# The 2 Hardest Things in Computer Science... 1. Caching 2. Naming Things 3. Off-by-one Errors

AJ ONeal <br> [@\_beyondcode](https://twitter.com/@_beyondcode) <br> [twitch.tv/coolaj86](https://twitch.tv/coolaj86)

Technophobic Technologist

Technophobic Technologist Dangerous Wrong Thinker

Technophobic Technologist Dangerous Wrong Thinker Equal Opportunity Offender

oh...

# The _3_ Hardest Things in Computer Science...

(note\: not presented in alphabetical order)

# 3. Off-by-One

## Count to 10

(I'll wait)

How many numbers did you count?

How many numbers did you count? <small>(_not_ what did you count to)</small>

11

11 <small>_Right?_</small>

## Trick Q #1a How **_many_** numbers are in this range?

## Trick Q #1a How **_many_** numbers are in this range? ```rs for i in 0..10 { // ... } ```

## Trick Q #1a How **_many_** numbers are in this range? ```rs let mut count = 0; for i in 0..10 { count += 1 } println!("{}", count); ```

## Trick Q #1b **_Which_** numbers are in this range?

## Trick Q #1b **_Which_** numbers are in this range? ```rs for i in 0..10 { // ... } ```

## Trick Q #1b **_Which_** numbers are in this range? ```rs for i in 0..10 { println!("Number: {}", i) } ```

## Trick Q #1c How about **_this_** range? ```rs for i in 1..10 { // ... } ```

## Trick Q #1d Or **_this_** range? ```rs for i in 0...10 { // ... } ```

## Trick Q #2 What's the **_first_** element in this array? ```rs let fruits = vec![ "apples", "bananas", "cherries", "durians", "elderberries", // ... ]; ```

Are you sure?

Are you sure? ```rs let fruits = vec![ "apples", "bananas", "cherries", "durians", "elderberries", // ... ]; ``` ```rs println!("{}", fruits[1]) ```

Are you sure? ```rs let fruits = vec![ "apples", "bananas", "cherries", "durians", "elderberries", // ... ]; ``` ```rs println!("{}", fruits[1]) ``` ```rs "bananas" ```

So...

## Trick Q #3

## Trick Q #3 Which fruits would this range print?

## Trick Q #3 Which fruits would this range print? ```rs let fruits = vec![ "apples", "bananas", "cherries", "durians", "elderberries", // ... ]; ``` ```rs for i in 2..5 { // ... } ```

What do you get when you mix an Elephant + a Rhino? 


## Count to 10

## Count to 10 _...again_

No! Wait!

## Trick Q #4a Can you find the needle in this haystack?

## Trick Q #4a Can you find the needle in this haystack? ```js let index = "hello".indexOf("h"); ```

## Trick Q #4a Can you find the needle in this haystack? ```js let index = "hello".indexOf("h"); // 0 ```

## Trick Q #4b How about _this_ one? ```js let index = "haystack".indexOf("needle"); ```

## Trick Q #4b How about _this_ one? ```js let index = "haystack".indexOf("needle"); // -1 ```

## Trick Q #4c Which fruit will this select?

## Trick Q #4c Which fruit will this select? ```js let arr = ["apples", "bananas", "cherries"]; arr[arr.length]; ```

## Trick Q #4c And this one?

## Trick Q #4c And this one? ```js let arr = []; arr[arr.length]; ```

## Count to 10 _...one last time_

Not to mention - Octal (8) 0..7

Not to mention - Octal (8) 0..7 - Hex (16) 0-9,A-F

Not to mention - Octal (8) 0..7 - Hex (16) 0-9,A-F - Byte (256) 0..255

Or even typos ```js // empty an array arr.splice(0); // copy an array arr.slice(0); ```

Or _slightly_ different APIs ```js "foobar".substring(3, 4); // b "foobar".substr(3, 4); // bar ```

Want to _really_ understand off-by-one errors?

Want to _really_ understand off-by-one errors? Implement **Chess** in a 1-D Array.

Want to _really_ understand off-by-one errors? Implement **Chess** in a 1-D Array. <small>hint: you could use 65 board squares (instead of 64)</small>

Want to _really_ understand off-by-one errors? Implement **Chess** in a 1-D Array. <small>hint: you could use 65 board squares (instead of 64)</small> <small>though... it might not even help</small>

# 2. Naming things

To-do: - https://youtu.be/BXRgZpxjqJ0?t=600 - https://youtu.be/ELTZkbHJ-Xg?t=600

What should we call this collection of functions?

What should we call this collection of functions? - login()

What should we call this collection of functions? - login() - verify()

What should we call this collection of functions? - login() - verify() - createUser()

- Auth?

- Auth? - User?

- Auth? - User? - Session?

Probably.

How about a package with these? - map()

How about a package with these? - map() - reduce()

How about a package with these? - map() - reduce() - leftPad()

How about a package with these? - map() - reduce() - leftPad() - unique()

How about a package with these? - map() - reduce() - leftPad() - unique() - divide()

- stuff?

- stuff? - lodash?

- stuff? - lodash? - dependency hell

- stuff? - lodash? - **_dependency hell_**

### Industry Standard Terms

### Industry Standard Terms - map vs migrate vs transform

### Industry Standard Terms - token - code - secret

### Industry Standard Terms - PK is Private Key... or Public Key? - API Key or Secret Key? - Client ID vs Consumer ID

Now think back to **Chess**...

What do you call **_where the pieces go_**?

What do you call **_where the pieces go_**? - Slots?

What do you call **_where the pieces go_**? - Slots? - Places?

What do you call **_where the pieces go_**? - Slots? - Places? - Squares?

What do you call **_where the pieces go_**? - Slots? - Places? - Squares? - Cells?

What do you call **_where the pieces go_**? - Slots? - Places? - Squares? - Cells? - Spaces?

What do you call **_where the pieces go_**? - Slots? - Places? - Squares? - Cells? - Spaces? - Coords?

What do you call **_where the pieces go_**? - Slots? - Places? - Squares? - Cells? - Spaces? - Coords? - Thingies?

Oh!

Oh! How about just `b[i]`?

Oh! How about just `b[i]`? 😈

<small>(I vote `squares`.)</small>

What does this even do?

What does this even do? ```js function limit(list) { return list.filter(function (item) { return item.parts.some(function (part) { return part.complete; }); }); } ```

Story Time™ that one pull request...


...

Naming stuff is important

Naming stuff is important ... but hard

# 1. Caching & Invalidating

Trick Question #B

Ever given a girlfriend (or sibling) a key to...

Ever given a girlfriend (or sibling) a key to... - your apartment?

Ever given a girlfriend (or sibling) a key to... - your apartment? - car?

and it turns out...

and it turns out... they is CRAZY!!!

(you can't invalidate a copy you don't control)

Trick Question #8 Have you ever sat through a roll call in school?

Trick Question #8 Have you ever sat through a roll call in school? > If you're absent, raise your hand

Trick Question #2 Are you familiar with daylight savings?

How do you schedule an event 6 months in advance?

How do you schedule an event 6 months in advance? ... or 2 years in the future?

Trick Question #1

Ever tried to use a React app?

Ever tried to use a React app? - reload

Ever tried to use a React app? - reload - reload twice

Ever tried to use a React app? - reload - reload twice - clear cache

Ever tried to use a React app? - reload - reload twice - clear cache - clear cookies

Ever tried to use a React app? - reload - reload twice - clear cache - clear cookies - clear cache, cookies, & localStorage

Ever tried to use a React app? - reload - reload twice - clear cache - clear cookies - clear cache, cookies, & localStorage - turn it off and on again

Ever tried to use a React app? - reload - reload twice - clear cache - clear cookies - clear cache, cookies, & localStorage - turn it off and on again - delete and reinstall... your OS


Trick Question #10 How do you update a website?

Trick Question #10 How do you update a website? - When the content changes?

Trick Question #10 How do you update a website? - When the content changes? - When the theme is changed?

Trick Question #10 How do you update a website? - When the content changes? - When the theme is changed? - When the related articles change?

Trick Question #10 How do you update a website? - When the content changes? - When the theme is changed? - When the related articles change? - When the author info changes?

Plus...

Plus... You also have all the **off-by-one** problems too.

Plus... You also have all the **off-by-one** problems too. 😈

Or take the opposite approach:

Or take the opposite approach: Have you ever tried to use GraphQL?

<video controls autoplay loop preload="auto" muted> <source src="https://video.twimg.com/tweet_video/E_VdvegXMAgjuYS.mp4" /> </video>

# Solutions?

## Hashes

## Hashes - app.js?hash=**_abc123_**

## Hashes - app.js?hash=**_abc123_** - app.**_abc123_**.js

## TTL

## TTL - Seconds - UTC - Local + Offset + Timezone

I dunno...

I dunno... be SMART

I dunno... be SMART - Fresh - Stale - Expired

NOT Service Workers!

NOT Service Workers! 😬

# Summary

## Caching Caching is all about - the level of granularity - tolerance for error

## Naming things Naming things is part of _engineering_ that - takes billable time - reduces wasted time (mental load, outdated documentation, etc) ## Off-by-one Errors Counting is hard because... - 0-indexed vs 1-indexed - inclusive vs non-inclusive ranges We count in different ways. Edge cases and boundary conditions matter.

# Questions?

- 👍 Like - 🔔 Sub [youtube.com/coolaj86](https://youtube.com/coolaj86) - ➡️ Follow [twitch.tv/coolaj86](https://twitch.tv/coolaj86) - 🖱 Click ALL-THE-THINGS!