🦥The 3 Types of Caches

Read on our website

Hello friends!

Welcome to this week’s Sloth Bytes. I hope you had a great week.

Design results

Option 1 is the winner!

I’m gonna refine it a bit and then I’ll start adding more visuals 😁 

One more thing!

Recent newsletters have been getting clipped due to the length.

So I was thinking of potentially splitting the newsletter into 2 emails.

1. Email with only Advice + challenge

2. Email with only programming news + new/useful tools

Each email would be more in-depth with the content (more news, developer tools, etc.)

What do you think?

🦥 No sponsor this week, just vibes.

But if you want to reach 50,000+ developers, founders, and tech lovers who actually open their emails — this is the place.

Learn more about sponsoring

The 3 Types of Caches

You know what’s interesting?

A cache is probably one of the easiest performance win you'll ever get.

But most developers don’t understand caching.

To be fair, a lot of tools automatically do it for you.

The problem with that is you probably don’t understand what should be cached or how it works.

Disclaimer: There’s A LOT more types of caches, but for programming & web dev, these are the most important ones for us.

Each layer caches different things at different locations.

What Is a Cache?

A cache is temporary storage for data you'll need again soon.

Instead of fetching/calculating data every time, you store it once and reuse it.

You’re trading memory/storage for speed.

It’s like when you have multiple tabs open.

You leave them open because “you might need it.”

You don’t btw. Close those tabs…

1. Browser Cache

Where is this cache: User's browser

For What: HTML, CSS, JS, images

How it works: Server tells browser what to cache via HTTP headers:

• Cache-Control: public, max-age=3153600

This says: "Cache this for 1 year (31536000 seconds). Don't ask me again."

Now next time when a user visits a website the browser checks if they have it.

• If yes, they use cache version

• If no, they download it again.

Cache Busting

Now what if the browser caches a broken version of your page.

That’s not good…

Even if you deploy a working version, it won’t be used until the cache expires!

Now you have to cache bust.

One of the most common cache busting techniques is to add a version number to the file name itself.

Change styles.css to styles.v2.css

You could also add that version number as a file path or as a query string:

• styles.css → /v2/styles.css

• https://example.com/styles.css → https://example.com/styles.css?v=2

Yeah it’s that simple.

Sloth that sounds annoying and miserable.

No it’s not? Just don’t write any mistakes.

I’m kidding, you can automate this process with a build tool.

It’ll still be annoying and have edge cases, but hey it’s automated…

Which is why you should be thankful for all the work libraries and frameworks do for you in terms of caching.

2. Memory Cache

This is the type that everyone talks about the most.

Where is this cache: Your computer’s memory.

For What: Database results, API responses, calculations

How it works: You create a data storage layer that temporarily stores frequently used data.

Without cache:

app.get('/data/:id', async (req, res) => {
  const expensiveData = await getExpensiveData(req.params.id); // Pretend this exists
  res.json(expensiveData);
});

With cache:

//Yep a cache can be this simple...
const cache = new Map();

app.get('/data/:id', async (req, res) => {
  
  const key = `user:${req.params.id}`;
  // If the cache already has the data, we don't have to fetch again
  if (cache.has(key)) {
    return res.json(cache.get(key)); // 2ms
  }
  //Not in cache so we have to fetch it
  const expensiveData = await getExpensiveData(req.params.id);
  cache.set(key, expensiveData);
  res.json(expensiveData);
});

Pretty easy to understand here. If you’re more curious about it you can read my redis post!

3. CDN Cache

Where is this cache: Servers worldwide near users

For what: Images, CSS, JS, videos

How it works: Storing copies of a website's content on a network of servers that are closer to users

It’s essentially the same as the browser cache where it uses HTTP headers.

The difference is instead of the origin server, it uses a server close to you

Without CDN: User in Australia → Server in New York = 250ms latency

With CDN: User in Australia → CDN in Sydney = 20ms

Bonus: Hardware Caches (CPU, GPU, DSPs)

It’s a bonus because I know nothing about hardware and refuse to study this right now, but you can learn about it here.

Fun cache test you can do right now

1. Open DevTools → Network tab → disable cache button

2. Refresh your website and see how long it takes to load.

3. Try again but with the cache on.

Thanks to everyone who submitted!

mkgp-dev, grcc492, ingStudiosOfficial, AspenTheRoyal, and jsjasee!

Dependable Jobs Schedule

You’re given a number of jobs and a list of dependencies.
Each job is labeled from 0 to jobs - 1.
Each dependency [a, b] means job a can only start after job b is finished.

Return true if all jobs can be finished, or false if there’s a circular dependency.

finishAll(2, [[1, 0]])
output = True

finishAll(2, [[1, 0], [0, 1]])
output = False
## job 1 depends on job 0
## job 0 also depends on job 1
## → circular dependency, cannot complete either job

finishAll(3, [[1, 0], [2, 1]])
output = True
## job 0 → job 1 → job 2
## no cycles, all jobs can be finished in order

finishAll(1, [])
output = true
## only one job (0) with no dependencies
## → can be completed immediately

finishAll(11, [[6, 10], [4, 3], [9, 2], [2, 3], [6, 1], [2, 8], [10, 1], [10, 2], [5, 3], [0, 10], [7, 4], [6, 1]])
output = true

How To Submit Answers

Reply with

• A link to your solution (github, twitter, personal blog, portfolio, replit, etc)

• or if you’re on the web version leave a comment!

• If you want to be mentioned here, I’d prefer if you sent a GitHub link or Replit!

New silly video!

That’s all from me!

Have a great week, be safe, make good choices, and have fun coding.

If I made a mistake or you have any questions, feel free to comment below or reply to the email!

See you all next week.

Want to advertise in Sloth Bytes?

If your company is interested in reaching an audience of developers and programming enthusiasts, you may want to advertise with us here.