In this post, we are going to build together an online editor like Codepen.com

We will practice our JS and React skills and use some popular open-source libraries. Here is a live demo of what we are going to create.

So, let’s begin!

Creating a NextJS project

Since we would like our users to be able to save pens, we don’t want to create just a client-side project, but a full-stack one.

NextJS is an awesome framework that lets us create full-stack react applications with server-side rendering (SSR) and much more. …

Typescript, in spite of all its advantages, can be hard to swallow at first.

Readability of Typescript code, is the main reason in my opinion, for developers being reluctant to give it a real shot.

Let’s take a look at this piece of code:

I think you would agree with me that if all TS code looked like that, there were no readability issues. Javascript developers would not have to go through any kind of tutorial, because this code is self-explanatory. Considering that, the transition to TS would have become much easier.

Now, what about this?

This code…

What is this post all about?

Over the last 2–3 years I have been developing mostly in Javascript while using npm and yarn on a daily basis. Occasionally I’d come across things I didn’t know or understand. Sometimes I had the time and will to check them out, other times I didn’t. After things got piled up, I decided to take some time and learn them.

This post is a by-product of this learning, perhaps you can benefit from it. It groups important topics related to npm and Yarn, each covered in many other blog posts. …