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!
More people preferred this!
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.
Email with only Advice + challenge
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?
Should I split the newsletter into 2 emails
🦥 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.
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…
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
Open DevTools → Network tab → disable cache button
Refresh your website and see how long it takes to load.
Try again but with the cache on.
Thanks to everyone who submitted!
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 = trueHow 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.
What'd you think of today's email?
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.
