If you’re working on a project that forces you to run all the linting before you can commit, you can sometimes feel frustrated. But most of the time, I forget to clean un-used imports in my TypoScript/JavaScript files.

Until just yet! I was so done with it 🥺. I knew that there was an option or plugin for it. But though I had it installed.

Well, this can be fixed without any plugin 😁.

If you’re working on a big React (Next.js) application, sometimes you might need to dive deep into a data structure. It’s pretty generic. The React component I’m talking about would look like this:

If any property of content or blok is missing, we have a big problem. The page will break and the user will get an error. 🥺

Improvement: Optional Chaining and Nullish Coalescing Operator

We need two JavaScript features to prevent a massive error: optional chaining and the nullish coalescing operator. Don’t worry, this all sounds more complicated than it actually is.

Optional chaining

Optional chaining looks like this: content?.content?.blok. The browser will first check if…

I think this is a pretty unknown feature in the package.json. But you can define what version a computer needs to be able to run your project.

I discovered this because I did get different error’s on a Next.js project than my team members. The issue was because we were using different versions of Node & TypeScript.

Right now, I defined this in our package.json, so everyone gets a message they have other versions. This configuration reminds people to update their Node and TypeScript.

}
//.... more configuration package.json
    "engines": {
        "tsc": "3.7.2",
        "node": "14.16.0",
        "npm" : "7.6.3"
    }
}

…

Sass functions like lighten(), darken(), complement(), invert() are pretty useful. I was wondering if there was something for styled-components. Well, I found the great library Polished.js.

The nice thing about this library is that it doesn’t matter if you use styled-components, emotion, jss, aphrodite, radium, or just inline styling in JavaScript. It works with all of them!

It is a utility library, so you only import what you need to save some bytes for the user. Do you need typings for TypeScript? They got you covered!

So let’s dive into how to use Polished.js.

Installation

Running the all-familiar command is enough…

Using React.js with TypeScript is not as straightforward for everyone when building a React application. I have quite some experience with TypeScript that I didn’t have significant issues (anymore 😅).

I’m pleased with Styled-components. But typing them was a big question for me, until now! So I want to share them with you. 😉

If you haven’t TypeScript experience yet, please check my TypeScript beginner post. 👇

TypeScript Interface and Enum

Let’s clarify what I do here.

I want to add a prop state to my component, but the value's that I want to accept in it are: sending, received, and error`. …

Just like regular CSS, you write your Media Queries in your CSS file. In Styled Components, you can include them as well.

But if you want to make it smart, you set all the sizes in an Object and create a function to call them from your styled-components in React.

Create a file breakpoints.js.

Import the file in the component where you defined your styled-components, and you can easily use your media queries without remembering your exact sizes.

I believe in making it yourself as simple as possible, so hopefully, this solution will help you further.

Happy…

Since I’m working with Next.js and Styled-components (also TypeScript, React, GraphQL, Apollo, Storybook & Storyblok CMS) I was wondering, is it possible to use CSS variable’s in Styled Components.

As you can see in the example above, it is possible and super simple, just like in normal CSS. So make sure that you CSS variable are created in a parent component. It can also be created on a page/layout level if you like.

So I hope this helps you further with building a cool Next.js or React application with Styled-components.

Happy coding 🚀

Get my weekly newsletter “Developer Underdogs” with the best developer content created by aspiring developers.

Read more

In the current age of JavaScript, Promises are the default way to handle asynchronous behavior in JavaScript. But how do they work? Why should you understand them very well?

In this article, I will dive into JavaScript Promises to understand what they do and when you should use them.

A Promise in Real Life

When I make you a promise, you take my word that I will fulfill that promise.

But I don’t tell you when that promise will be fulfilled, so life goes on…

There are two possible scenarios: fulfillment or rejection.

Fulfillment

One day, I fulfill that promise. It makes you so happy that…