Uncategorized

Awesome VSCode Extension – Peacock(Color yourself)

Mostly I have multiple Projects open on multiple VSCode Editors.

I found a way where I can give different colors to different instances.

I use Peacock to change the color of the Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code’s Remote features, and you want to quickly identify your editor.

I wanted to share this with the Dev community .

It’s created by JohnPapa. There is also one article here on Dev

I am sure, you will like it.

Enjoy!

Standard
JavaScript, React

Style React component with styled-components : Part-2

In My Previous post Style React component with styled-components : Part-1 , I wrote how we can start using styled-components and we created one Spinner component with it.

Now we can see, how we can pass props to the styled component named StyledSpinner and change the color/behavior of it.

For this example, I will change the border color by passing prop. So, the styled component will show the color what we pass to it. Continue reading

Standard
HTML5, JavaScript, NodeJS

Serve static HTML files locally

Sometimes we need to serve static HTML files in localhost. And we really don’t want to add any server for a simple HTML file.

Serve static HTML files locally

Generally, we can right click on the HTML file and can say “open in browser” and it will open the file in your local browser(Chrome, Firefox, Edge, Safari) but it’s actually not exactly what we always want. rather we want something like a simple web server to serve the files from a directory.

Continue reading

Standard
JavaScript, React

Style React component with styled-components : Part-1

Styling your React component is an important part for any real world application.
We can style react components in a couple of ways. such as –
1. inline styling
2. CSS modules
3. emotion
4. styled-components

We will talk about styled-components in this article.

We are gonna create one simple animated loading spinner component.
Continue reading

Standard
JavaScript, React

ES2017 async/await with fetch in Redux (No Callback Hell anymore)

When we need to use third party API or any REST API in our web app, we need to wait for the response coming from the server.
Then in the success callback , we use that data and do other operations.And if we have more REST calls, we all know that it could end up being a Callback Hell

But if we use ES2017 async/await syntax , we can write our code as clean as possible with minimum lines of code.

Basic example of async/await is like below-

Continue reading

Standard