Search on this site

Blog ✌️

How to create awesome og:images using React components

Published at

How to create awesome og:images using React components

Flyyer simplifies the process of creating Facebook Open Graph image tags for your web or mobile application's share metadata. I have already some time testing Flyyer which is an og-image as a service, what this service promises us is to create templates with React or Vue and use them to create images based on them.

TailwindCSS - What it is & how to get started with Visual Studio Code

Published at

TailwindCSS - What it is & how to get started with Visual Studio Code

In this blogpost you will learn what is Tailwind, what are the best VS Code extensions and how to get the most out of it. Tailwind is a CSS framework that is based on providing utility classes with which we can build any interface, make them unique and at the same time learn CSS while we are writing the classes.

A boilerplate for NextJS with TypeScript, ESLint, Prettier and TailwindCSS

Published at

A boilerplate for NextJS with TypeScript, ESLint, Prettier and TailwindCSS

We will see how to configure NextJS with TypeScript, ESLint, Prettier and TailwindCSS to generate a boilerplate ready to be used in any project. To use Next.js with TypeScript, ESLint, Prettier and TailwindCSS you have to go through several pages of documentation on various websites. But in this post I will guide you how you can do it in simple steps.

How TypeScript enforced cleaner architecture in a React App

Published at

How TypeScript enforced cleaner architecture in a React App

Are you tired of writing PropTypes all over the code? Are you looking for a better way? You have found it. The core feature of React is components. It helps us to have a true separation of concepts. We need a lot of them to build a complete UI, so we need to make them interact.

What is TailwindCSS and how to use it with create-react-app

Published at

What is TailwindCSS and how to use it with create-react-app

I have created a brief tutorial that will cover all you need to get started with create-react-app (using TailwindCSS and inline styles). TailwindCSS is a low-level, highly customizable framework that provides us with many utility classes that we can use in our HTML to perform any styling or animation we want without interfering with your CSS.

AlpineJS: a Framework for Building Fast and Functional Frontends

Published at

AlpineJS: a Framework for Building Fast and Functional Frontends

When we need to make an interactive application and React or Vue is too much for us, AlpineJS comes in to make our work faster. Basically, when we need to make an interactive application and React or Vue is too much for us (not development-wise but time-wise) we can easily use AlpineJS which uses all the features of Vue for HTML behavior.

Some tools that Chrome DevTools offers for taking screenshots

Published at

Some tools that Chrome DevTools offers for taking screenshots

When taking screenshots of websites, we usually resort to other tools, but the browser can help us to do it better. To take a screenshot, we normally use the Save-downloaded-image hotkey and just extract the image from the downloaded archive by opening it in a file manager of our choice. But now with Chrome DevTools, we can take screenshots without extracting anything 😲.

What is TailwindCSS and why you should learn It in 2020

Published at

What is TailwindCSS and why you should learn It in 2020

TailwindCSS is a wrapper around low-level CSS utilities with which to create custom designed sites without having to modify any vendor-specific styles. What does this mean? Basically, Tailwind will give us the utility classes we need to create fast and fully customizable interfaces.

Why you should ditch jQuery for native JavaScript

Published at

Why you should ditch jQuery for native JavaScript

Do you wish you could relive the days when jQuery ruled? Better get your applications on steroids if you want to stand a chance. jQuery is a cross-platform JavaScript library, initially created so that the code we wrote in Google Chrome could also work in Mozilla, Internet Explorer and all available browsers.

How to upgrade everything to Hooks?

Published at

How to upgrade everything to Hooks?

What are hooks? Hooks are the next definite step in React development. If you are new to React, you have to learn Hooks to develop apps in the future. It is well-known that the more we are writing plain JavaScript without making Babel compile so many things, our code will be much more optimized and faster.