I have those moments quite frequently, I need to update my
develop branch, but I don't want to switch to it in git.
Well, I discovered a way to fetch another branch you’re working in, but you don’t need to switch.
git fetch origin develop:develop
With this command, you can continue to work in your feature branch and update the
master branch. No need to stash your current changes because you need to switch branches anymore!
It’s super easy and valuable to me. I thought It might be helpful to you as well 👍
If you want to…
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
blok is missing, we have a big problem. The page will break and the user will get an error. 🥺
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
"npm" : "7.6.3"
Sass functions like
invert() are pretty useful. I was wondering if there was something for styled-components. Well, I found the great library Polished.js.
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.
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. 👇
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:
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
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.
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 🚀
Promises to understand what they do and when you should use them.
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.
One day, I fulfill that promise. It makes you so happy that…
These years the frontend development tools are popping up like mushrooms from the ground! One is better or suits your workflow better than the other.