Hey there friend,

Mads here with another Top 3 in Tech edition, so let's skip right to it with today's topics ey?

​

1. Everybody makes mistakes

Everybody has those days.

In case you didn't notice, Facebook, Instagram and WhatsApp was down this week. Something I don't recall ever happening on this scale - and the services were down for several hours! Of course we'll never know the exact monetary implications of this, but I did my own simplified calculation:

Mads Brodt @madsbrodt Facebook's annual revenue was ~$86 billion in 2020. There's ~526,000 minutes in a year. For every minute Facebook is down, they lose $163,622. October 4th 2021 89 Retweets 467 Likes

$163,622 per minute. With about 6 hours of downtime, that totals to $59,000,000. Not to mention the fallen stock price wiped billions off the total company value.

That's a lot of money.

Facebook said the culprit was changes to their underlying internet infrastructure that coordinates traffic between their data centers.

Now I'm sure we've all made mistakes before - in our personal lives, in our code and in our jobs - but I'm positive that none of our mistakes has ever led to the literal loss of millions of dollars.

Try to remember that when you screw up at work, or you find bugs in your code. If it can happen to one of the worlds largest tech companies, it can happen to you too.

But that's just how life goes. We're all human, and we're gonna make mistakes. You can't fight it.

All you can do is try your best to plan around potential mistakes. And when they inevitably do happen, just learn as much as you can from them and move on. Don't let it get you down 🔥

​

2. Lottie

Last week we talked about Gsap, a JavaScript library to animate stuff on the web. Today I wanna talk about another awesome animation tool, Lottie.

Lottie is another way to get animations on your website, but it works differently than Gsap or other animation libraries. With Lottie, you create your entire animation in Adobe After Effects, export them as a .json file, and then use Lottie to render those files as NATIVE SVG ANIMATIONS ON THE WEB! (yes I'm using both caps and bold because it's crazy)

The power this unlocks is insane - with some After Effects knowledge, you can implement iterally any animation on your website, Android or iOS app. I seriously recommend learning more about Lottie and trying it out in your projects:

​Get started with Lottie

​

3. CSS Box Model

The Box Model is perhaps the most universal part of CSS, and yet it's something we often overlook and just take for granted.

The idea is that every single element on a webpage is, essentially, just a rectangle with some content, some padding, a border and some margin. Simple when you think about it - but a proper understanding of the Box Model is the quickest way to level up your CSS skills, so check out this article on MDN to learn more:

​Introduction to the CSS basic box model​

​

​

Thanks for reading! I would really appreciate if you would share the newsletter with your friends on Twitter, Facebook, LinkedIn, by email or copy/paste the link mads.fyi/top3 on other platforms. It really helps to keep me motivated and let the newsletter grow ✌

Until next time,

Mads Brodt