DEV Community: Abhi Dadhaniya

Build your own python package easily

Abhi Dadhaniya — Tue, 04 Feb 2025 18:28:29 +0000

Introduction

Have you ever wondered how developers turn their code into shareable Python packages? Maybe you've thought, "Why is packaging so complicated?" Don't worry—it’s not as scary as it sounds. In this blog, I'll guide you through the process of building and publishing a Python package using Poetry, a powerful dependency management tool.

By the end of this post, you’ll have a clear understanding of how to package your code, manage dependencies, and publish it locally or to a private repository.

Setting Up the Project

Every great package starts with a structured project setup. Here’s how you can kick things off:

Create a directory for your project:

   mkdir the-good-stuff && cd the-good-stuff

Initialize a Git repository:

   git init

Create essential files and folders:

   touch README.md
   mkdir src tests

Folder structure should look like this:

   the-good-stuff/
   ├── README.md
   ├── src/
   │   └── the_good_stuff/
   │       └── __init__.py
   └── tests/

Pro tip: Keeping your code under the src/ directory helps avoid import issues later.

Configuring Poetry

Poetry simplifies dependency management and packaging for Python projects. Here's how to get started:

Install Poetry using pip:

   pip install poetry

Initialize your package:

   poetry init

Answer the prompts to set up your project metadata such as package name, version, author, license, description, and dependencies.

Your pyproject.toml file should look something like this after setup:

   [tool.poetry]
   name = "the-good-stuff"
   version = "0.1.0"
   description = "A Python package for advanced utility functions"
   authors = ["Your Name <your.email@example.com>"]

   [tool.poetry.dependencies]
   python = "^3.9"

   [tool.poetry.group.dev.dependencies]
   pytest = "^7.0.0"

Why Poetry? It handles dependency resolution like a champ, making version conflicts a thing of the past.

Managing Dependencies

Need external libraries? Poetry makes it effortless:

To add a runtime dependency:

  poetry add requests

For development dependencies (like linters or test frameworks):

  poetry add pytest --group dev

Run all commands within a virtual environment:

poetry shell

Yep, no pip install or requirements.txt chaos here.

Writing Core Functionality

Put your magic inside the src/the_good_stuff/ folder. Let’s create a utility module with intermediate examples:

src/the_good_stuff/utils.py:

import datetime

class DateUtils:
    @staticmethod
    def current_datetime():
        """Returns the current date and time."""
        return datetime.datetime.now()

class StringUtils:
    @staticmethod
    def reverse_string(text: str) -> str:
        """Reverses the given string."""
        return text[::-1]

src/the_good_stuff/*init**.py:*

from .utils import DateUtils, StringUtils

__all__ = ["DateUtils", "StringUtils"]

Remember: Clear, well-documented functions make your package more developer-friendly.

Testing the Package

No package is complete without testing. Let's use pytest to validate our functionality:

tests/test_utils.py:

from the_good_stuff import DateUtils, StringUtils

def test_current_datetime():
    assert DateUtils.current_datetime() is not None

def test_reverse_string():
    assert StringUtils.reverse_string("hello") == "olleh"

Run tests with:

pytest

Bonus: Add automated tests for confidence before every release.

Packaging and Publishing

Finally, it’s time to package and publish your masterpiece!

Local Installation

Build the package:

   poetry build

Install the package locally using pip: Using absolute path:

   pip install /absolute/path/to/the-good-stuff

Using relative path:

   pip install ../path-to/the-good-stuff

⚠️ Warning: Installing the package globally is recommended to avoid potential virtual environment conflicts.

Usage of Your Masterpiece

Here’s how you can use the package after installation:

from the_good_stuff import DateUtils, StringUtils

print("Current DateTime:", DateUtils.current_datetime())
print("Reversed String:", StringUtils.reverse_string("ChatGPT"))

Publishing to a Private Repository

Configure the private repository in Poetry:

   poetry config repositories.my-private-repo https://my-repo-url.com

Publish your package:

   poetry publish --repository my-private-repo

To install a package from a specific branch of a GitHub repo:

   poetry add git+https://github.com/your-repo/the-good-stuff.git@branch-name

Tip: Always use secure repositories for sensitive or internal code.

Version Management

Poetry makes versioning simple:

Bump the patch version:

  poetry version patch

Bump the minor version:

  poetry version minor

Bump the major version:

  poetry version major

Tip: Stick to semantic versioning (MAJOR.MINOR.PATCH) for clarity.

Tips and Best Practices

Semantic Versioning: Stick to a versioning format like MAJOR.MINOR.PATCH.
Dependency Groups: Use development and production dependency groups for cleaner environments.
Documentation: Maintain a thorough README.md to help users integrate your package.
Linting: Tools like flake8 ensure your code follows best practices.
Security: Regularly audit dependencies to catch vulnerabilities.

Conclusion

We’ve walked through project setup, dependency management, testing, and publishing. Now, you have the tools to create polished, shareable Python packages. What’s next? How about refining your project or experimenting with more advanced features like custom entry points?

Got questions or ideas? Drop them in the comments below! Let’s keep learning together and help each other grow. Happy coding!

React.js Architecture: A Beginner-Friendly Guide

Abhi Dadhaniya — Thu, 11 Jan 2024 10:36:08 +0000

1. Components: The Building Blocks

In React.js, everything revolves around components. Think of a component as a reusable, self-contained piece of your user interface. Components can be as simple as a button or as complex as an entire page.

2. The Virtual DOM: Optimizing Rendering

What is the Virtual DOM?

The Virtual DOM is like a lightweight copy of the actual DOM (Document Object Model). When you make changes to your UI in React, these changes are first applied to the Virtual DOM.

Why Virtual DOM?

Manipulating the real DOM can be slow and resource-intensive. The Virtual DOM serves as a middleman, allowing React to batch and optimize changes before committing them to the actual DOM.

How Does it Work?

When you update your React app, a new Virtual DOM representation is created.
React compares this new Virtual DOM with the previous one (diffing).
Only the differences are identified (diffing algorithm), reducing the number of changes that need to be made in the actual DOM.
React then updates the real DOM efficiently, resulting in better performance.

3. State Management: Handling Component Data

What is State?

State is a way for components to keep track of data that can change over time. It's like a memory for a component, storing information that affects how it renders.

How Do Components Manage State?

Components can have their own internal state, accessible via useState hook.
Changes to state trigger a re-render, updating the Virtual DOM and subsequently the real DOM.

Common Questions about State:

Q: Why not just use variables?
- A: State enables React to manage changes efficiently, triggering updates and re-renders only when necessary.
Q: Can state be shared between components?
- A: Yes, through "lifting state up" or using advanced state management libraries like Redux.
Q: What's the difference between state and props?
- A: State is internal and controlled by the component, while props are external inputs passed to a component.

4. Component Lifecycle: The Phases of Existence

Every React component goes through a lifecycle from birth to death. Understanding these phases helps manage state and perform actions at specific times.

Mounting Phase: When a component is created and inserted into the DOM.
Updating Phase: When a component re-renders due to changes in props or state.
Unmounting Phase: When a component is removed from the DOM.

Why Does This Matter?

Understanding the lifecycle allows you to perform actions at specific moments, like fetching data when a component is first mounted.

5. React Hooks: Simplifying State and Lifecycle Management

Introduced in React 16.8, hooks like useState and useEffect simplify state management and allow functional components to use lifecycle methods.

What are Hooks?

Hooks are functions that let you use state and lifecycle features in functional components, making them more powerful and easier to read.

Example:

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

6. Conclusion: React.js, the Declarative Paradigm

React's architecture empowers developers to build user interfaces in a declarative manner. You declare what the UI should look like, and React takes care of the rest.

By mastering the Virtual DOM and understanding state management, you'll be well-equipped to create efficient, scalable, and maintainable React applications. Happy coding!

Boost Your Productivity with These 15 Flow Launcher Hacks

Abhi Dadhaniya — Wed, 26 Apr 2023 17:53:45 +0000

What is the Flow Launcher?

Flow Launcher is open-source software. Here's the Website and GitHub provided.

Here's the website, GitHub repository and you can download the software.

Using Flow Launcher you can search anything from your local files and folders, Google searches, System settings and many more by just pressing Alt + Space.

Flow Launcher has its plugin store. You can install some useful plugins from it. Follow the below process to install 3rd party plugins.

In this setting of Flow Launcher, You'll see some basic modules on the left-hand side like General, Plugins, Plugin store, Theme etc.

From the plugin store, you can install additional plugins which will useful for you. In the theme section, You can customize your search bar theme.

In the Plugins section, you can customize your specific plugin shortcut key. You can try it by yourself.

Here are 15 tricks and tips to use flow launcher and increase productivity

Calculator
Currency converter
Browser bookmarks
Clipboard history
Shell commands
Find your network IP
Plugin Manager
Manage TODO Tasks
Search URL
Kill process
Local files and folder search
Google searches
YouTube, Twitter, Wikipedia and many more searches.
Notion workspace search
VS code workspaces
GitHub quick launcher
Google search plus
Web searches

Calculator

You can simply search numbers and start your calculation.

Currency converter

You can add your shortcut like cc as a currency converter. Then, You can search like this syntax

<shortcut> {number} <1st currency> <2nd currency>

Browser bookmarks

After the shortcut key like b stands for bookmarks, then you can search for any bookmark And it'll pop up some results from your browser bookmarks.

Clipboard History

Simply by pressing ch (clipboard history), you can show your recently copied content.

Shell Commands

By just pressing > You can execute your command prompt commands. Also, you can open this shell execution by pressing "Windows + R".

Find your network IP Address

I've set the IP shortcut in the general setting of the Flow Launcher. After pressing the IP, I can see my IP Address with the connected network.

Plugin indicator

By pressing PM you can install, uninstall and update any plugin.

Manage Tasks

You can manage your to-do list inside the Flow Launcher.

Search URL

You can search URLs by pasting them in the search bar.

Kill Process

You can kill processes by kill keywords.

Search files and folders

You can directly search a file or folder name in the search bar.

Google Searches

If flow launcher doesn't find any search query from your local files, folders or system setting or somewhere else, then it'll show an option to search that in Google.

Search YouTube, GitHub, and Wikipedia

There is a popular website to direct search by typing keywords of that website. → In the plugin section of the Flow Launcher setting, you can customize it according to your need and also you can add your own.

Notion workspace search

Using the Flow Launcher, you can directly search from your notion workspaces. → To do that, you have to generate an access token of your account from the integration of your app. Create a new integration token from here.

After generating an access token, You have to add in the plugin of notion. Add your notion and set a keyword like "n" or anything else that you want to set. Don't forget to share your notion workspace page or access to created tokens like the below picture.

Open VS Code Workspaces

By simply pressing / or default : { You can search your last opened workspaces. → I've set / to search workspace of vs code. You can customize yours.

Thanks for reading this article the last thing I want to mention is, We're running up and freelance agency called Gigaweb - an agency that offers a range of digital services to help clients. With my years of experience in web design and development, We provide top-quality services to businesses and individuals.

Visit my portfolio, verify project work and read more blogs. To stay updated on my latest projects and industry insights, follow me on his social media accounts- LinkedIn, Twitter, and GitHub.

How I Automate Social Media Page using Web Scrapping, Google sheets and Figma

Abhi Dadhaniya — Mon, 17 Apr 2023 17:59:22 +0000

Recently, I was exploring AI tools from online resources and also I came across a web-scraping Chrome extension I thought what if I can scrap this data into beautiful social media

Here are the most powerful web-scraping Chrome extension

What is Web scraping

Web scraping is a powerful tool for collecting data from websites quickly and efficiently. For marketers, web scraping can be especially useful for collecting data on potential leads, target audiences, or competitors. However, manually collecting data from websites can be time-consuming and tedious, particularly when dealing with websites that have large amounts of data.

The Challenge of Data Collection

Collecting data from a large website with over 300 AI tools can be a daunting task. Manually copying and pasting the data for each tool would take hours or even days. This is where web scraping comes in handy. With a web scraping tool, it's possible to automatically collect data from a website, even if there are hundreds or thousands of pages to scrape.

How to scrap data from any website

Here's a YouTube channel to learn about how to use Bardeen to scrap data from any website.

After collecting the data in table form using the Bardeen extension, I transfer table data into google sheets by connecting my Google account.

Organizing Data with Google Sheets

Once the data was collected, I imported it into Google Sheets to organize it. Google Sheets is a powerful tool for data organization, allowing users to sort, filter, and analyze data in a variety of ways. I created separate columns for each data point and used filters to remove any unnecessary data.

Extracted data from AI tool using web scraping

Name
Description
Website link
Icon link

Here's an important phase that came up where I applied some google sheets functions to create necessary columns like,

Absolute URL path to extract the domain name
Used IMPORTXML() function to get meta image from extracted URL of AI tool

Also, we can import meta descriptions of websites using the IMPORTXML function but in my case, I had the description content of the AI tool.

Used google sheets functions

Get a domain from an absolute URL (https://abhidadhaniya.com to abhidadhaniya.com)

=REGEXREPLACE(A1,"http\:\/\/|https\:\/\/|\/.*|\?.*|\#.*","")

Import meta image using og:image property from metadata.

=IMPORTXML(A1,"//meta[@property='og:image']/@content")

After successfully fetching all data let's sync in the Figma post.

Sync data in Figma Post

I created common components in Figma to use a common structure in all posts.

I also created variants of Profile images and account info.

If I want to create a new theme and post layout, Now I can easily change the design of components and it will reflect in all posts. This is the real power of Figma 🔥

Sync data using the Google Sheets sync Figma plugin

I installed a Figma plugin called Google Sheets sync to fetch data from shared google sheets by inputting Google sheet URL.

After that plugin will pop up a table that we can connect to the respected element.

Connect the element by clicking on the respected column and the name of the element will be replaced by #ColumnName

Now, Copy and paste the 1st post by dragging next to it and click on the sync button in the pop-up of the Google Sheets sync plugin and That's it, We're Done...!

I choose a lazy person to do a hard job. Because a lazy person will find an easy way to do it.

- Bill Gates

Conclusion

Web scraping and Google Sheets are powerful tools for streamlining data collection and organization. By using a web scraping tool and Google Sheets, I was able to quickly and efficiently collect and organize data from a large website. By syncing the data with Figma, I was able to create social media posts quickly and easily.

Visit my portfolio, verify project work and read more blogs. To stay updated on my latest projects and industry insights, follow me on his social media accounts- LinkedIn, Twitter, and GitHub.

Revolutionize Your Design and Development Process with GigaResources

Abhi Dadhaniya — Sun, 02 Apr 2023 11:30:57 +0000

As a digital creator, designer, or developer, finding the right tools can be the key to success. Whether you're looking for inspiration, productivity hacks, or cutting-edge technology, having the right resources at your fingertips can help you achieve your goals.

What GigaResources is?

That's why we're excited to introduce GigaResources, a comprehensive tool that has been built by Gigaweb. GigaResources is an all-in-one resource that offers a vast collection of tools for digital creators, designers, and developers. With GigaResources, you can search for any tools and categories from the given categories at the left sidebar, making it easier for you to find what you need.

Technologies to build

We built GigaResources using next.js and server-side rendering techniques, which means that the website is lightning-fast and responsive, giving you a seamless experience every time you visit. With its intuitive design and easy-to-use interface, GigaResources is the perfect tool for anyone looking to stay up-to-date on the latest tools and resources in the digital space.

In addition to the website, we also run a weekly newsletter that shares the latest and greatest tools and resources with our subscribers. Each week, we curate a list of the most valuable and interesting tools, tips, and resources to help you stay on top of your game. By subscribing to our newsletter, you'll be the first to know about the latest and greatest tools and resources that can help you take your digital creations to the next level.

Variety of tools

At GigaResources, we are committed to making sure that our users have access to the best tools and resources available. If there is a tool that you need that isn't currently listed on our website, you can request it to be added to our website. Our team of experts is always on the lookout for new and innovative tools to add to our collection.

At GigaResources, we have organized our collection of tools and resources into several categories, including:

Design Tools: This category includes tools for graphic design, UI/UX design, and prototyping. Some popular tools in this category include Adobe Creative Suite, Sketch, and Figma.
Development Tools: This category includes tools for front-end and back-end development, including code editors, version control systems, and testing frameworks. Some popular tools in this category include Visual Studio Code, GitHub, and Selenium.
No Code Website Builders: This category includes tools that allow you to build websites and web applications without writing any code. Some popular tools in this category include Webflow, Bubble, and Carrd.
Mockup Tools: This category includes tools for creating high-fidelity mockups and prototypes of websites and applications. Some popular tools in this category include InVision, Balsamiq, and Marvel.
Icons: This category includes tools for finding and creating icons for use in your designs and websites. Some popular tools in this category include IconFinder, Flaticon, and Font Awesome.
Illustrations: This category includes tools for finding and creating illustrations for use in your designs and websites. Some popular tools in this category include UnDraw, Humaaans, and ManyPixels.

These are just a few examples of the categories we have at GigaResources. We have a wide variety of tools and resources in each category, so you can find exactly what you need to bring your digital creations to life.

Finally, we'd like to ask for your help in spreading the word about GigaResources. If you find our website helpful and valuable, please take a moment to vote for us on Product Hunt. By voting for us, you can help more people discover the power and convenience of GigaResources.

Conclusion

GigaResources is an all-in-one resource for digital creators, designers, and developers. With its vast collection of tools and resources, intuitive design, and lightning-fast performance, GigaResources is the perfect tool for anyone looking to stay up-to-date in the digital space. Don't forget to subscribe to our newsletter and help us spread the word by voting for us on Product Hunt.

Visit my portfolio, verify project work and read more blogs. To stay updated on my latest projects and industry insights, follow me on his social media accounts- LinkedIn, Twitter, and GitHub.

Powerful content management systems - Sanity vs Contentful vs Strapi

Abhi Dadhaniya — Thu, 09 Feb 2023 12:30:55 +0000

Introduction to the content management system

Nowadays, Websites are switching from no-code website builders (WordPress, Wix etc) to the latest technology stacks like React.js, Next.js, Django, Flask etc. WordPress takes too much time to load pages.

There are many alternatives for no-code website builders like webflow. You can check out the pricing plans to develop a no-code website on this platform.

There are 2 types of possible data on the website

Static Data
Dynamic Data

Let's suppose, a blog website holds static data which is not gonna change frequently. We can use a content management system to manage those data without appending static content in the code repository. That's why CMS (Content management system) came into the picture.

These 3 cms platforms are becoming powerful and these are easy to integrate with javascript frameworks.

Sanity.io

Sanity is a content management solution for a website that holds some static data in an entire website like websites of small and individual businesses, portfolio websites etc.

Pros of sanity

Sanity is a very good option to integrate with react app
Easy to setup and integrate
Sanity studio works in localhost as well as production level
Useful for client websites and full fill their requirements
The clean and beautiful user interface of sanity studio

Cons of sanity

Not so good support for rich text or you can say the content of markdown
Can not embed code because of no markdown support in rich text

Contentful

Contentful is the best solution for static websites like my blog website. I like contentful because of its simplicity and the relationship between various collections models.

Pros of Contentful

Simplicity and clean user interface
Easy to connect SDK (Software development kit) and client configuration
Works on only contentful platform (Means you have to manage content on their web app)
GraphQL API support
CDN Support
Image upload support
Markdown support in the rich text editor
Good for blogs content management

Cons of Contentful

Not supported on localhost

Strapi

Strapi is the best content management system for API development. Strapi is easy to use and set up and more time-consuming while working with a data model for backend development. Strapi is built for API development purposes

Pros of Strapi

The best solution to powerup the backend servers
Strapi is an Open-source project (GitHub Repository)

Cons of Strapi

A little bit tough to deploy the Strapi backend
Can not deploy freely

You can compare pricing plans for all of these cms at here. Sanity, Contentful, Strapi.

Conclusion

We can't compare all cms with each other. All content management systems had been made for some special purpose to solve some problems in real-world applications. Strapi is built for API development. Sanity is for website content management and Contentful is (Good for blog applications) for both but only accessible from its web app.

I also use Contentful CMS for my blog website. Do check it out at blogs.abhidadhaniya.com

Here’s how I Master Full Stack Development

Abhi Dadhaniya — Thu, 09 Feb 2023 12:29:36 +0000

Nowadays, So many freshers want to become a full-stack developers and want to jump into this field and In this post, I’ve shared my journey. Hope my journey will inspire you in your career.

Starting of journey

My journey started in 12th standard. I was curious to gain knowledge and I like to create websites using pure HTML and CSS from scratch without using any 3rd party service.

I don’t prefer any dependency on other platforms like NoCode website builder (WordPress, Wix etc..) or anything else as much as I can.

Warning: In these platforms we can’t get what we want from a design perspective I can customize my designs using CSS or tailwindcss.

Then, I learned JavaScript basic concepts from Code With Harry and Yahoo Baba youtube channels. I learned basic concepts of javascript.

Project development

Here, you can find those beginner-level projects that I’ve developed.

Then, I developed so many projects in HTML, CSS and JavaScript. Here’s the GitHub Repository that might be helpful for you.

Note: Heroku is no longer free to deploy backend apps and You can’t visit that portfolio I apologize for it.

After developing only front-end projects, I was getting bored and then I switched to the backend and choose Node.js and Express.js to learn.

I’ve also implemented some projects in EJS which is a template engine in JavaScript.

Tip: I don’t recommend you learn EJS template methods which are not useful nowadays because of React.js (we can create components).

After that, I learned database concepts in MongoDB and then I learned about Mongoose Package which helps to connect MongoDB to Node.js and Express.js server applications.

Close to becoming Full stack developer

I was only one step away to become a full stack developer and then I’d learned React.js which is in demand nowadays and then I became MERN Stack Developer.

One thing is missing in React.js for front-end applications and is SEO (Search Engine Optimization).

React is a client-side rendering technology and that’s why react.js has so many cons and one of the cons is SEO.

Then, Next.js was becoming popular in the market and I jumped into it. Next.js has some built-in functions for SEO and next.js is a powerful framework of React.js. Next.js has some amazing concepts like SSR (Server side rendering), SSG (Static site generation) etc.

Conclusion

I had so many dreams of building something big with the help of technology and that’s why I’ve started my journey as a full-stack developer.

Guide to learn React.js

Abhi Dadhaniya — Fri, 12 Aug 2022 15:24:00 +0000

React is an open source front-end javascript library to build web application and websites. React is build by Facebook in may 2013.

There are so many resources to learn react.js but here, I've shared my journey about how I learned react.js after learning javascript. Before to learn react.js, You've to learn basic javascript concepts.

Here's I've added list of concepts to learn before react.

Function Declarations and Arrow Functions
Template Literals
Short Conditionals
Three Array Methods: .map(), .filter(), .reduce()

These array methods are very useful while implementing data populating concepts where you'll fetch data from an API to your front-end interface.

The examples of those type of web applications is movie app, recipe app etc.

Object Tricks: Property Shorthand, Destructuring, Spread Operator
Promises + Async/Await Syntax
ES Modules + Import / Export syntax

Here's the blog post to refer all the things and I've list out above concepts from this article.

Learning perspectives

There are 2 learning point of views by my side.

Learn concepts by doing projects.
Learn concepts by making notes for those concepts.

Personally, I prefer 1st aspect to learn any technology. Again, there's nothing is wrong with 2nd point of view. It's also a good way to learn concepts. But 2nd way is better when if we are learning any particular programming language.

Here's, Why I prefer 1st way to learn react.js

I've noticed one thing while learning react.js or learning any framework or library implementation where every youtuber or anyone who is teaching react.js, there are directly implementing concepts of that library or framework in any project and again trust me, It's the best way to learn framework.

Quick Tip : The best way to learn any framework is from it's own documentation.

Where I've learn React.js

So, Finally came to the point, I wasn't following any particular course from youtube or udemy. I switched to many courses and tutorials and finally I've realized the one thing, which is to learn react.js by doing projects and implementing concepts in my projects.

Personal advice to learn React.js from

So, my personal advice to learn react.js is to not stick to any one course or tutorial. The best way to learn react.js is to explore blogs which is written by developers but for that you need to get an index or kind of roadmap of react.js

So, first explore react.js road map (github repository) and then go with the flow. You can also follow youtube videos for any specific concept or a topic.

Why I prefer online tutorials over books?

React.js versions update on daily bases. In current version of react@18.2.0 There are top updates and it changes some code basis of index root files. In this versions they've updated to server side rendering apis.
So, the point is when you're learning from books, it can't be update but online tutorials can be. That's why, I prefer to learn from online resources.

Creating animations with react.js

There's one of the best library to create animations with react.js is called Framer Motion.

React.js examples

Here, I'm mentioning the best websites for react examples

Web development free Resources & Tools

I and my developer friend Rohan have created free resources to master full stack web development by using this free resources.

xLinks.pro - clone of bio.link

Abhi Dadhaniya — Tue, 19 Jul 2022 04:50:47 +0000

Recently, I've build a platform xlinks.pro to link all social media links together. I've used MERN Stack technology to develop this full stack application.
I've implemented CRUD operations in REST Api. If you don't know about CRUD operations, Don't worry, I'm here to explain.

C - Create
R - Read
U - Update
D - Delete

It is the kind of database (MongoDB) operations in backend with the REST Api.

Why I build this MERN Stack Application?

Me and my developer friend Rohan K. are working on a big project where I was working on backend authentication and all kind of stuffs like that. When, I was dealing with google signin, I don't know that how can I deal with google login and even I also don't know that Can I build that functionality using client (React) or backend (Node.Js & Express.Js).

For trying purpose, I started that functionality to implement with passport.js which is a popular library for authorization in Javascript. Passport.Js has so many strategies to authenticate user. Also they've strategies for third party authentication.

Here is the difference between authorization and authentication.

After dealing with passport.js with Node.Js and Express.Js, I feel tired and hard way to implement with google login.
Then I've tried to find the answer : to implement google signin using react package and I founded packages to integrate google signin with React.Js.
There are 2 popular packages to integrate with google signin.

Both are good packages to integrate signin functionality in react application.
But I was facing some problems while installing 1st react-google-login package where it was showing that react-google-login doesn't support react > 18.
That's why I was facing some problems in build process of deployment and I couldn't found any solutions to fix these npm errors and finally at the end, I decreased versions of react, react-dom and react-scripts and I fixed all errors of my application.

Features of this MERN Stack application

Google login function on client side
Beautiful UI & UX using Tailwindcss

Dependencies

Client side

Toastify
React-google-login
Axios
React icons
React meta tags
React share : to share in twitter
Tailwindcss, Autoprefixer, Postcss

Server side

Cors
Dot env
Express
Mongoose

Purpose to develop this application

To implement CRUD operations in Api.
To create REST Api.
To implement signin functionality - integrated with google

Quick tips for terminal while installing npm packages

ctrl + c to break the terminal processes.
--force to install any packages forcessfully.
To delete file or folder In Linux terminal (or git)

rm -rf <filename or foldername>

About xlinks.pro

First of all, user have to singin in with google in this application.
After signin, User can go to dashboard and create their profile by filling their social media links data in a form and then When user click on update profile, This application takes little bit time to add userdata in database.
Then, user can share their profile in twitter where I've used react-share npm package. (where we can integrate with all social media sharing links.)

I used toastify (official website) to give better ui and ux in xlinks.pro

Conclusion

Thanks for reading this blog. Hope you understood about xlinks.pro Don't forget to create your profile in xlinks and add your profile's link your all social media account.

Increase Productivity using Flow Launcher

Abhi Dadhaniya — Sun, 29 May 2022 08:17:01 +0000

I've created a full thread on flow launcher.

You can visit it and don't forget to share and follow me.

Link of twitter thread : Click Here

Get Web Development Resources for Free

Abhi Dadhaniya — Tue, 01 Feb 2022 05:34:26 +0000

Me and my developer friend @Rohan created web development resources for developers community.

You can checkout these resources : Click Here

➡️ Before thinking anything, just open the above link...
We have compiled the web development resources. Check the link and dive into it.

✅ We strongly recommend you to learn web development using these resources.

🌟 Now, You don't have to wander or surf to learn web development. All the efficient links are attached together. You are just a click away.

🌈 Everything added in the given link is more than enough to excel web development.

🔥 We have worked very hard for this compilation and this outlines our experience in the field.

‼️ These resources are designed by two geeks. (We are web developers and currently working on freelancing . We have experience in web development for 1.5+ years)

⬇️ Checkout our websites and skills
@Abhi_Dadhaniya
@RohanKiratsata

If you found these resources helpful consider following us.

Also don't forgot to check out @Rohan

Support me by buying me a Coffee!

Tailwindcss: Most Powerful and Popular Framework of CSS

Abhi Dadhaniya — Sat, 20 Nov 2021 08:21:39 +0000

In this article, I explained to you about Tailwindcss. Which is the powerful framework of css. There are many css frameworks in the market like Bootstrap, Tailwindcss, Materialize CSS, and so on.

Tailwind is the most popular and lightweight css framework to all others.

Reasons to use Tailwindcss:

No default theme
Doesn’t impose design decisions that you have to fight to undo
Offers a head start implementing a custom design with its own identity
Comes with a menu of predesigned widgets to build your site with

You can use tailwindcss with CDN links by importing styles to your project and another way to use tailwindcss with npm installation.

CDN Link

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

There are lots of disadvantages to importing Tailwindcss Directives into your project. When you import Tailwindcss directives, you are not able to do some tailwindcss customization.

CDN takes a lot of time to interact with your website.
It takes a lot of time to import and render styles with your HTML document.
You can't remove unused styles from the main tailwindcss file.
You aren't able to use some special features of tailwindcss by importing CDN.

Tailwindcss using NPM

There are lots of benefits to using tailwindcss by installing from NPM.

You can remove unwanted css from your project to load fewer styles and it will impact on rendering documents.
You can create directives to apply to common HTML elements.
You can customize a dark and light theme using tailwindcss.config.js
You can add some special colors and fonts by customizing the config file. Personally, I recommend you to use tailwindcss using npm instead of importing styles through CDN.

Let's setup Tailwindcss using NPM

Run the following command in your folder path.

npm i tailwindcss

You have to install some more packages to remove unwanted styles from your project.

npm i autoprefixer postcss postcss-cli

Now, I will explain to you how to set up tailwindcss files and config files.

Let's create tailwind.config.js. Run the following command.

npx tailwindcss init

Now, create a postcss.config.js file by running the command

npx tailwindcss init -p

Now, create a public/css folder and create a tailwind.style name file inside css folder and add this code.

@tailwind base;
@tailwind components;
@tailwind utilities;

Add a new script in package.json to compile tailwindcss directives to styles.

"build": "postcss ./public/css/tailwind.css -o ./public/css/style.css -w"

When you run npm run build tailwindcss automatically creates a style.css inside public/css.

Before you execute the build script, you need to set JIT Compiler.

Now, the most important step is we have to define JIT Compiler in tailwind.config.js

You have to set JIT compiler like

module.exports = {
    mode: 'jit',
    purge: [
        './views/**/*.ejs',
        './views/*.ejs',
        './public/**/*.html',
        './public/*.html'
    ],
    darkMode: false,
    theme: {
        extend: {
            fontFamily: {},
            colors: {}
        }
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

In the above code, when we define purge and in that purge array, we have to define the files where we applied styles or you can say that classes on HTML elements. Thus when the build script running, postcss packages automatically remove unwanted styles from public/css/style.css and also add wanted styles.

Now, You easily run the build script

npm run build

Setup Tailwindcss using a C++ program

I have created a C++ program to generate tailwindcss with node and express project.

You can check out my Github Repository

It will save you a lot of time and also you don't have to do anything to set up all folders and files. You have to just run that program.exe file from the repository.

Tailblocks

Tailblocks is a website to grab built-in templates using tailwindcss. You can directly copy those components from the website.

Conclusion

Tailwind is the most popular framework. Tailwindcss is better than bootstrap because you can more customize your project with tailwindcss instead of bootstrap. There are lots of features than bootstrap. I strongly recommend you to use Tailwind instead of others. You can check out more features and documentation from its website.

DEV Community: Abhi Dadhaniya

Build your own python package easily

Introduction

Setting Up the Project

Configuring Poetry

Managing Dependencies

Writing Core Functionality

Testing the Package

Packaging and Publishing

Local Installation

Usage of Your Masterpiece

Publishing to a Private Repository

Version Management

Tips and Best Practices

Conclusion

React.js Architecture: A Beginner-Friendly Guide

1. Components: The Building Blocks

2. The Virtual DOM: Optimizing Rendering

3. State Management: Handling Component Data

4. Component Lifecycle: The Phases of Existence

5. React Hooks: Simplifying State and Lifecycle Management

6. Conclusion: React.js, the Declarative Paradigm

Boost Your Productivity with These 15 Flow Launcher Hacks

What is the Flow Launcher?

Calculator

Currency converter

Browser bookmarks

Clipboard History

Shell Commands

Find your network IP Address

Plugin indicator

Manage Tasks

Search URL

Kill Process

Search files and folders

Google Searches

Search YouTube, GitHub, and Wikipedia

Notion workspace search

Open VS Code Workspaces

How I Automate Social Media Page using Web Scrapping, Google sheets and Figma

What is Web scraping

The Challenge of Data Collection

How to scrap data from any website

Organizing Data with Google Sheets

Extracted data from AI tool using web scraping

Used google sheets functions

Sync data in Figma Post

Sync data using the Google Sheets sync Figma plugin

Conclusion

Revolutionize Your Design and Development Process with GigaResources

What GigaResources is?

Technologies to build

Newsletter

Variety of tools

Conclusion

Powerful content management systems - Sanity vs Contentful vs Strapi

Introduction to the content management system

Sanity.io

Contentful

Strapi

Conclusion

Here’s how I Master Full Stack Development

Starting of journey

Project development

Close to becoming Full stack developer

Conclusion

Guide to learn React.js

Here's I've added list of concepts to learn before react.

Learning perspectives

Here's, Why I prefer 1st way to learn react.js

Where I've learn React.js

Personal advice to learn React.js from

Why I prefer online tutorials over books?

Creating animations with react.js

React.js examples

Web development free Resources & Tools

xLinks.pro - clone of bio.link

Why I build this MERN Stack Application?

Features of this MERN Stack application

Dependencies