Sagar Hani

Dynamic OG Image Generator

Sat, 22 May 2021 22:40:32 GMT

Have you noticed that when you share a link on social platforms like facebook, linkedIn or twitter, you will see a preview card of that website with few details like it's title, description and an image something like this.

This is because the Open Graph protocol enables web page to become a rich object in a social graph. Information is scrapped from the meta tags of that webisite. Meta tags are specific snippets of text and image content that provide a summary for a webpage. Often meta tag data shows up whenever someone shares a link on social media, in messaging, or in your business chat software. It helps search engines and other services (like crawlers) scan your webpage and figure out what's it is about.

I have built a tool Dynamic Open Graph Image Generator where we can dynamically generate the open graph image on the fly for the webpages. All we need to do is just add the url as a content to the og:image property of the meta tag as below :

<meta
  property="og:image"
  content="https://dynamic-og-image-generator.vercel.app/api/generate?title=YOUR_TITLE&author=AUTHOR_NAME&avatar=IMAGE_URL&websiteUrl=WEBSITE_URL&theme=THEME_NAME"
/>

and replace the placeholders with desired values.

🛠 How it is built ?

This tool is built using NextJS. The API would extract the details from the query parameters and use them to build a template. Then, this template page is opened in headless chromium with the help of puppeteer, it takes the screenshot of the page, respond the API with the image file. The theme of the template depends on the theme name passed in URL. Template page is built using Styled Components.

This website is now using https://dynamic-og-image-generator.vercel.app to generate the OG images for each and every page.

Named exports vs Default exports

Sat, 12 Dec 2020 22:40:32 GMT

Named Exports vs Default Exports

The export statement is used in javascript to export our modules which can be used in other files with the help of the import statement.

There are 2 types of exports :

- Named exports

- Default exports

We can have multiple named exports in a file. Named exports are useful when you want to export multiple things from a file. While importing, the name of the module should be the same as the module name you are exporting.

On the other hand, default exports let us import the module with any name, it need not be the same name as the module name you are exporting. You can even export anonymous functions (which don't have a name at all). But, you can have only 1 default export in a file.

So, if there is a use case where you want to export only 1 module from a file, which one would you prefer ?

I like to use named export always, no matter if I'm exporting 1 module or multiple modules in a file. I prefer to use this import/no-default-export eslint rule in my projects.

Why do I prefer named export ? 🤔

Firstly, it's easy to find out where all my exported modules are being used in my code base, as in named imports we strictly need to have the same name.

If I have a named export like this :

export const calcualateAverage = (...) => {...}

// I should import it with same name in someOtherFile.js
import { calcualateAverage } from "../utils/mathOperations"
// or
import { calcualateAverage as myNewCalculateAverageName } from "../utils/mathOperations"

I can easily find calcualateAverage.

If I had used a default export and imported this elsewhere with some other name like :

export default function calculateAverage = (...) => {...}

// importing in someOtherFile.js
import calcAverage from "../utils/mathOperations"

In this case, it's hard to find out that calculateAverage function is being used in some files as the imported name is different.

Especially, in react, it's easy to find where all the common components are used if I export it as a named export.

Helps in refactoring 🛠

If I'm refactoring the calculateAverage function, say, calculateAverageForFirst10Items, I would put effort to go and rename all the named imports, or else it will start throwing errors. But, in the case of default export, one may not put effort to refactor the import names in other places as it doesn't throw an error. This will lead to a code smell. You are calculating average only for the first 10 items but your import name says calcuateAverage. The function name doesn't precisely convey what exactly it does.

Hence, named exports are always safe to use, readable, and helps in maintaining large codebases.

SagarHani v26.0.0

Tue, 04 Aug 2020 22:40:32 GMT

Today I turned 26. 🥳

This made me realize that now I'm close to 30 and away from 20. 😄

I'm myself getting upgraded to the newest version of me i.e v26.0.0

What's new in v26.0.0 ?

😇 I'm more grateful to almighty for all things I possess today. Will pray for more strength so that I can help others who are in need.

❤️ Being more kind to others, gained more ability to show empathy towards others.

🤗 The year 2020 has been a very tough time for all of us. Coronavirus pandemic is fighting hard against humanity. It's time for us to understand that all of us are in this together and make sure that humanity will gain the upper hand.

🍎 Stay Hungry. Stay Foolish. Stay Safe.

🐥 Collaborate more with duck to make the jungle and the world a better place to live.

I'm missing traveling which I loved the most last year. Read about ⏮ Rewind - 2019

Introducing Outshorts

Fri, 01 May 2020 22:40:32 GMT

Outshorts - Stay Updated

"Outshorts" is a mobile app which helps you to stay updated with the latest news. It sends you latest breaking news as a push notification so that you don't miss out important things. If you want to explore topics you are interested to know about, we have search functionality where we search for your topic from all over the internet. 🌍 If you find any interesting news, you can share them with your friends on WhatsApp seamlessly.

What's next ?

There is a lot of scope and amazing features in the pipeline.

🧠 We will use AI to summarise the entire news and give you the information in a small snippet so that you get the information at a glance.

👩🏻‍🎤 We will personalise the news feed so that you can get the articles which are more relevant to your interests.

💄Make user interface some more stylish.

How is this made ?

This mobile app is built using React Native. Back-end is built with Node + ExpressJS and it is open source (Yay! 🎉). Back-end takes care of fetching the news feed from Open Source News API, User registration, sending email and in-app notifications. Got these illustratsions from humaaans and Undraw.

Why is this made ?

Because when you put a developer in a lockdown what else he will do ? 👨🏻‍💻 I learned React Native App Development and tried this out.

Things You Can Do When You Are Learning Something New

Sun, 15 Mar 2020 22:40:32 GMT

Are you learning something new ?

Here are a few things you can do to enjoy your learning journey.

📝 Write a Blog Post

Write a blog post about something interesting you learned in that course. Some specific top you liked the most. Explain things in your way, provide examples you are very much familiar with, share your ideas on different approaches to solve the problem.

🛠 Build small projects

The best way to apply your learning is to start building small projects. It may be a todo app, calculator app, or something that you can do it in a short time. You gain more confidence on concepts you learned and will also get the ability to look up for answers when you get stuck somewhere.

🗣 Talk about it

Talk about it with your friends and colleagues or at meet-ups. By talking about things you learn with your friends and colleagues you not only motivate them also to learn but also gain their perspectives and thoughts about the concepts you learned.

🔬Look Deep

Once you have learned the basics, dig more about it by referring to various other advanced resources available. This will help you to know the internal workings of it and master them. Initially, it may be hard to understand them at the first look, go through them, again and again, you will understand. Don't hesitate to ask others if any help required.

🎩 Share some tips & tricks you discovered

Everybody likes tips & tricks. If you discover something new share them on social media so that your friends can also follow them along with you.

🎥 Make videos

If you are confident, make videos about it. Show some of the common mistakes you did while learning and you can share how you debugged the issue to fix it. This will be very useful as some people may get stuck with something that they may find hard to debug it.

"Knowledge only grows if shared" - Enjoy your learning journey. 🚂

Write Beautiful Stories

Fri, 10 Jan 2020 22:40:32 GMT

Storybook 📒

No matter how big or small the application is, everyone should have their own storybook. Storybook helps in building and maintaining the UI components seamlessly.

Are you using React ? Vue ? Angular ? It supports all of them.

Storybook acts as a tool where you can build your components in isolation, do your unit/visual testing of components and also showcase your components to the outside world. When you build a reusable component that can be used by others, please integrate them with the storybook. By doing this you can help your teammates to get an idea that such a reusable component exists and how it works.

Addons brings more power ⚡️

There are addons that you can add to your storybook to get some extra features.

For example, Knobs allow you to play with your component by passing the props dynamically. This gives a live experience of how your components behave for various kinds of input.

Docs creates a documentation page by pulling information from your stories, components, source code, and story metadata. It doesn’t require any configuration, it builds the docs page automatically. Similarly, there are various addons that improve the developer experience.

You can find some of the storybook examples here: https://storybook.js.org/docs/examples

This website is made of many reusable components. I'll share them on the storybook shortly. 😎

Destructure anything that returns an array

Sun, 13 Oct 2019 22:40:32 GMT

ES6 came with plenty of cool features. Destructuring is one of them. It became so easy to unpack values from arrays, or properties from objects and assign them to a specific variable.

Previously, we had to do this : 👎

var stack = ["JavaScript", "React", "Redux"]
var language = stack[0] // JavaScript
var library = stack[1] // React
var stateManagement = stack[2] // Redux

But with ES6 we can easily destrucutre them like this : 👌

const stack = ["JavaScript", "React", "Redux"]
const [language, library, stateManagement] = stack

Now, we can leverage this to destructure anything that returns an array : 🤟

const stack = "JavaScript-React-Redux"
const [language, library, stateManagement] = stack.split("-")

Evolving with State Management

Tue, 08 Oct 2019 22:40:32 GMT

This is a short story on how I'm evolving with State Management.

Stage I - React

When I initially started development with React I used to use only react for the state management. Sharing state with child component by passing it as props. That's cool, that's the only way to do it back then.

There were other state management tools like Redux, Flux. Didn't use them. Ask me why ? Because why to use another library when react can do it all alone. 😇

I was able to feel the pinch when our application grew bigger. Passing props from component to comoponent was hard to maintain. 😞

Decided to include external state management library

Stage II - React + Redux

We choosed to go with Redux since it had good community support and was used by some popular applications like Airbnb.

Learning redux was bit hard. First I learned only Redux, then I learned how to use redux in react applications. Creating store, reducers, actions, extracting data with mapStateToProps, dispatching Actions with mapDispatchToProps, uff that's a lot to slove the state managemet problem.

But that was totally a worth.

Once I understood it well and became familar with Redux, it was too easy to work with it. Redux thunk to handle asynchronous actions, Redux Form to handle form state was pretty much used in most of my components.

React + Redux was great until I moved to another world.

Stage III - React + Apollo GraphQL Client

I joined an organisation where they have built their entire backend system with GraphQL. I had just tried graphql in a tiny project without any library. They were using Apollo GraphQL Client to talk with GraphQL API. Apollo Client is a state management library, it helps is request only required data from graphql api as a query. It's completely different than how Redux works.

Even before learning it, I was exploring how it is used and how it works within the application. It is magical. It comes with an in-memory cache where it stores all the data which we received from the server. If the same API is called again, it won't make another request to fetch the data from server rather picks it from cache. It can be configured as per our needs and provides other benefits also.

Once you try this, you never feel like going back to redux and REST. 😁

Conclusion : Things keep evolving, we need to adopt them as per our needs. All new things come to solve some kind of problem.

Powered by Gatsby

Tue, 01 Oct 2019 22:40:32 GMT

What is Gatsby ?

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps. It is one of the greatest modern tools of the new frontend era. This website is built using Gatsby.

There are many tools out there to build a website, but why did I choose Gatsby ?

Speed ⚡️

We can pre-build pages and deploy them into a server. It will be ready to get delivered instantly to your users whenever they request for. Not all users are enjoying high speed connections, or browsing from a desktop. It’s important to make no assumptions, and serve the smallest and fastest site possible, to provide an optimal experience for wherever your users might be coming from.

Modern Tech Stack 🖥

It is composed of modern web technologies. This site uses React ⚛️, Styled Components 💅, GraphQL, Webpack 🗳 and more.

Scale and Maintenance 👨🏻‍🔧

Gatsby generates the site as static files which can be easily deployed on any web server inlcuding gh-pages. It is easy to deploy site on Netlify right from github on one click after making new commits. Adding content can be easily done by a non tech-savvy person also since it just about adding a markdown file.

PWA 📱

Gatsby is designed to provide top-notch performance out of the box. It handles code splitting, code minification, and optimizations like pre-loading in the background, image processing, etc., so that the site you build is highly performant, without any kind of manual tuning. These performance features are a big part of supporting the progressive web app approach.

Community 👫👬

Gatsby has a big community of contributors. I see on their github organisation, there are more than 2000+ contributors helping with code, documentation and other things. There are hundreds of plugins that are ready to use.

Data Sources 💾

Gatsby is powered by GraphQL which helps in pulling the data from any various sources like APIs, databases, headless CMSs, file systems and more directly to build your site pages. This page is generated from markdown file.

This website is made of many reusable components. I'll share them on storybook shortly. 😎

This will be my home for next few years. 🏠