Heyo,

Nice to see you again! This week I've got a cool exercise you can use to summarize your daily coding progress, as well as two awesome resources to help you create beautiful modern websites. Let's go:

​

1. What did you learn today?

When you're learning to code or working as a developer, it's easy to lose track of your progress. You might feel productive most days, but when you look back, not have much to show for it - and that can be incredibly disheartening.

I believe that the best way to improve as a developer is to have lots of small wins. A small win can technically be anything, but if we take learning JavaScript as an example, a win could be as simple as "made a button write something to the console on click". Small wins keep you motivated and create a feeling of progress, which is exactly what you need in this industry.

The only problem with these small wins is that they're easily forgotten. As humans we tend to focus on the negative rather than the positive, so when you're stuck on a frustrating coding problem, that's what you'll remember. Moreso than that cool feature you implemented, or that new trick you just learned.

That's why I've started performing a small reflection exercise every single day:

Write down at least one thing you learned today.

For example, today I learned about the object-position CSS property. It's a way to select the focus area of an image that's restricted in width or height, so you can choose what the user will see when an image is cropped. Very handy!

What you learned can literally be anything - the important part is to celebrate your small win. And as a secondary benefit, you're much more likely to remember something when writing it down. So this exercise will both reinforce your learning, and you'll create a backlog of small wins that you can look back on when you start doubting yourself or feel like you're not progressing enough.

Win/Win 🔥

​

2. My room in 3D

This week I came across an incredible website by Bruno Simon. Bruno is a creative developer and a wizard with the ThreeJS JavaScript library and WebGL in general.

WebGL is a technology that allows web developers to create amazing 3D scenes that look way more natural than what we're used to seeing on websites. It supports all kinds of shapes and objects, realistic lights, shadows etc. As an example, check out this demo by Bruno and be amazed:

​My room in 3D​

And if your mind isn't already blown, he actually has a course teaching you how to create stunning 3D websites so you can do the same:

​Check out the ThreeJS journey course​

​

3. The World of CSS Transforms

Now that we're in the realm of cool things the Web can do, I've got a killer article for you on CSS transforms.

Transforms are simple enough when you think about it: they allow you to modify certain properties of elements like their position, scale, rotation etc. But in this article, you'll see exactly what the different properties do and why you might use them to create cool effects and smooth transitions:

​Read the article on CSS transforms​

​

​

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 grow the newsletter and keeps me motivated to continue writing it ✌

Until next time,

Mads Brodt