Hello hello,

In today's issue of the Top 3 in Tech newsletter we discuss how to stay level headed when debugging, how to work like a lion, and why you should check out Framer Motion to animate your React projects.

Let's go:

​

1. Debugging code

A few days ago I was stuck on a bug.

One of those pesky, gnarly ones you just can't seem to get your head around.

It was a relatively simple piece of code, which made it even more frustrating that I couldn't figure out why this bug was happening.

And I'm gonna be honest: I had a hard time keeping my cool.

The problem with losing your cool and getting frustrated is that you are literally just making it harder to find the root cause of the problem. Nobody can think straight when they're too involved in their feelings. But, as is the nature of coding, you will run into difficult problems over and over again.

That's why learning how to debug issues without losing your temper is one of the most important parts of being a developer.

So when you're in these situations, try to take a pragmatic approach and look at the issue logically: The code is doing exactly what you are telling it to do. That’s the only way computers work. So if the code is not doing what you want it to do, maybe your mental model is wrong.

This often happens if you're new to a programming language or framework. But it can also be happening because you've been blindsided by your own ideas and thoughts about the problem.

Luckily there's a few, rather easy steps you can use to improve your debugging skills and find the issue:

1. Read through your code line by line. You might be overlooking a simple thing that you’re not thinking about. Go into each function and make sure it looks the way you intend.

2. Ask for a second pair of eyes. Sometimes you miss obvious things when you’re too close to the problem. Asking a co-worker or someone online for help can often point out the mistake.

3. Talk through your solution out loud. Also known as rubber-duck debugging, this technique involves forcing yourself to explain your code to an inanimate object. The act of actually speaking/articulating your solution often leads to an “aha” moment, where you realize the fault in your logic.

4. Take a break. Sometimes the most effective debugging tool is a breath of fresh air, a quick bite to eat or a good night's sleep. Give your brain time to rest, and it will continue to process the problem subconciously. And when you come back with a fresh mind, chances are you'll see important details that you missed earlier - and problems that kept you stuck for hours are suddenly solved in 5 minutes.

So, the next time you feel stuck on a frustrating coding problem, don't let it get to you.

Walk through these 4 steps instead.

I can almost guarantee you'll find the solution.

🔥

​

2. The Lion Framework

​Don't worry, this is not another JavaScript framework.

The Lion Framework is more like a methodology for creative work.

The idea is that most jobs are built around a 9-5 culture. 8 hours of ass in chair, 5 days a week, for 50 years. Aka, how a cow would do it: slowly grazing the field all day eating grass.

The idea behind the Lion framework is the opposite of that: to work like a lion instead. A lion sprints when it senses food, catches it's prey, and then rests until it's time to sprint again.

In creative work, that means to pounce on an idea when you feel inspired. Work at it intensely and until completion. Then take a break to rest, talk with people or just think until the next idea transpires.

It's not a perfect analogy, but I definitely see this way of thinking as a more productive way to get shit done. And worth considering if you can apply to your own work!

​Learn more about the "work like a lion, not like a cow" principle​

​

3. Animating React with Framer Motion

You might remember last week where I talked about Framer as a no-code tool to build websites.

Well, the same company also created a React animation library called Framer Motion - and it's awesome 🔥

They make it very easy to get started with their animating React components, and have great defaults out of the box - without limiting your flexibility.

It's a seriously impressive library, so I highly recommend checking it out if you're currently working with React and want to add some sweet sweet animations to your projects:

​Learn more about Framer Motion on their website​

​

That's it for now! See you in 2 weeks 👋

​

Did you enjoy today's newsletter?

​👍 Yes, it was amazing!​

​😐 Eh, I guess it was ok​

​👎 Not really at all​

​

​

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. See you in 2 weeks ✌

— Mads Brodt