Forem: Dhiraj Arya

How I Finally Made TailwindCSS Work Inside the Shadow DOM (A Real Case Study)

Dhiraj Arya — Thu, 23 Oct 2025 14:07:55 +0000

When I started building a Chrome extension using the WXT extension framework and displaying UI components, everything looked great on the demo site, and Tailwind CSS was working perfectly.

But the moment I injected my UI into website on LinkedIn...

BOOM—my entire styling look ugly and small hole UI.

Button lost their padding, text lost font family, margin reset etc.

At first, I Thought---

"This must be a path issue... maybe css not import on react index file."

But the actual reason was something deeper-

When you build UI components in the Shadow DOM feels like a perfect solution:

✅ No CSS conflicts
✅ Clean encapsulation
✅ Consistent rendering on any website

At least, that’s what I expected.

This blog is a case study of the exact problem I faced, how I solved it, and what you should do if you face the same!

But instead, I hit a strange styling bug:
some TailwindCSS utilities worked fine — while others looked broken, tiny, misaligned, or squashed.

It took real debugging to discover the actual culprit:
Tailwind’s default sizing units (rem) behave differently inside injected Shadow DOM contexts.
Switching to px fixed everything immediately.

This case study breaks down what happened and how to fix it professionally.

🧩 The Symptom

I injected a React/Tailwind UI into LinkedIn using content script:

<Button onClick={action}  disabled={Boolean(loading)}>
          {loading ? 
            <> <Loader2 className="animate-spin size-6 mr-1" /> Analyzing </> : 
            <><Search className="size-5 mr-1" /> Analyze </> }
</Button>

Inside my demo site, it looked perfect because it self build on tailwind css.

But when injected into LinkedIn using Shadow DOM:

Padding looked way smaller
Font size looked inconsistent
Border radius felt reduced
Layout spacing collapsed

I thought:

“Did Tailwind fail inside Shadow Root again?, reload my extension.”

But my styles were properly injected into the HTML style tag when checking using the inspect element.

🔍 First Debugging Try

I inspected the computed styles.

Tailwind style by default:

p-3 → 0.75rem
text-sm → 0.875rem
rounded-lg → 0.5rem

I read the official documentation, which explains that the rem value is used by default and refers to the rem of the parent. Therefore, the value depends entirely on the root element font-size.

And guess what?

The Shadow DOM inherits Linkedin html reference:

html {
  font-size: 10px;
}

from the host page.

LinkedIn overrides it globally.

So:

1rem ≠ 16px anymore

It can become:

12px
14px
or sometimes less, depending on the site component

That’s why everything looked shrunk.

Mystery solved.

🧠 Why REM is Breaking Here

REM values are relative to:

html {
  font-size: ?
}

Within the Shadow DOM, font size can be inherited from the parent DOM. Some websites set font sizes aggressively, and accessibility settings can also influence it.

So Tailwind utilities change visually depending on the website’s design.

On LinkedIn, indeed:

They apply small base font sizes internally
So your component shrinks too

💡 The Simple Fix That Worked: Switch REM → PX

By disabling Tailwind’s default REM behavior, and using px for spacing & fonts, everything instantly became:

✅ Consistent
✅ Predictable
✅ Website-independent

No more random shrinkage.

✅ How to Switch Tailwind to PX (Production-Ready)

Update your tailwind.config.js if you are using Tailwind CSS v3:

export default {
  content: ["entrypoints/**/*.jsx", "components/**/*.jsx"],
  theme: {
    fontSize: {
      'xs': '12px',
      'sm': '14px',
      'base': '16px',
      'lg': '18px',
      'xl': '20px',
      '2xl': '24px',
      '3xl': '30px',
      '4xl': '36px',
      '5xl': '48px',
      '6xl': '60px',
      '7xl': '72px',
    },
    spacing: {
      px: '1px',
      0: '0',
      0.5: '2px',
      1: '4px',
      1.5: '6px',
      2: '8px',
      2.5: '10px',
      3: '12px',
      3.5: '14px',
      4: '16px',
      5: '20px',
      6: '24px',
      7: '28px',
      8: '32px',
      9: '36px',
      10: '40px',
      11: '44px',
      12: '48px',
      14: '56px',
      16: '64px',
      20: '80px',
      24: '96px',
      28: '112px',
      32: '128px',
      36: '144px',
      40: '160px',
      44: '176px',
      48: '192px',
      52: '208px',
      56: '224px',
      60: '240px',
      64: '256px',
      72: '288px',
      80: '320px',
      96: '384px',
    },
    extend: {
      lineHeight: {
        3: '12px',
        4: '16px',
        5: '20px',
        6: '24px',
        7: '28px',
        8: '32px',
        9: '36px',
        10: '40px',
      },
    },
  },
}

Update your tailwind.css & main.css if you are using Tailwind CSS v4:

@theme inline {
 /* Font Sizes */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 60px;
  --text-7xl: 72px;

  /* Line Heights */
  --leading-3: 12px;
  --leading-4: 16px;
  --leading-5: 20px;
  --leading-6: 24px;
  --leading-7: 28px;
  --leading-8: 32px;
  --leading-9: 36px;
  --leading-10: 40px;

  /* Radius */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  /* Spacing */
  --spacing-px: 1px;
  --spacing-0: 0;
  --spacing-0\.5: 2px;
  --spacing-1: 4px;
  --spacing-1\.5: 6px;
  --spacing-2: 8px;
  --spacing-2\.5: 10px;
  --spacing-3: 12px;
  --spacing-3\.5: 14px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-72: 288px;
  --spacing-80: 320px;
  --spacing-96: 384px;
}

Now Tailwind generates pixel-based utilities instead of rem units.

After Tailwind change to Px when my Extalent UI

✅ Even Faster Option: Use Tailwind's built-in px sizing(Not Recommended)

Tailwind already supports px helpers:

<p class="text-[16px] p-[12px] rounded-[8px]">
  Shadow DOM safe styling!
</p>

These never scale with rem.

✅ Another Production Pattern (Highly Recommended)

Declare a stable base inside Shadow DOM:

shadowRoot.innerHTML = `
  <style>
    :host, * {
      font-size: 16px;
    }
  </style>
`

Now 1rem = 16px everywhere.
No host page influence.

🚫 Why You Shouldn’t Ignore This

Without this fix, your UI might:

❌ look good on localhost
❌ break on LinkedIn
❌ shrink on Indeed
❌ compress on Medium
❌ stretch on platforms with accessibility scaling

Consistency is everything for product UX.

🔥 Conclusion

Tailwind CSS is extremely powerful, but when working with Shadow DOM or injected UIs, it's important to manage sizing effectively.

I learned:

rem is influenced by host page
Shadow DOM inherits font-size by default
Website overrides can shrink your component
Pixel units remove unpredictability

Switching Tailwind utilities to px gave me:

✅ Consistent UI everywhere
✅ Perfect spacing
✅ Fixed text scaling
✅ Professional look

Now my Chrome extension UI looks identical on LinkedIn website.

🧠 Real-World Takeaway

If you’re building:

Browser extensions
Job assistant UIs
Embeddable SaaS widgets
Micro frontends
Marketing overlays

Avoid rem unless you reset base font-size manually.

Happy shipping! 🚀

Google Auth

Dhiraj Arya — Tue, 02 Sep 2025 15:09:17 +0000

Dhiraj Arya

Sep 2 '25

Google Login in Express.js using passport.js

#express #passportjs #mern #webdev

Comments

2 min read

Google Login in Express.js using passport.js

Dhiraj Arya — Tue, 02 Sep 2025 15:05:09 +0000

Almost all users have Google accounts, so most websites offer a "Login with Google" feature. It's simple and allows users to log in with just a few clicks.

In this guide, we’ll set up Google authentication in an Express app using Passport.js.

Why choose Passport.js?

There are many options for social login, such as Auth0, Firebase, and Clerk.

But Passport.js is:

✅ Simple and lightweight
✅ Supports multiple strategies (Google, GitHub, Facebook, etc.)
✅ Gives you manual control if needed

That’s why it’s a solid choice.

🚀 Let’s Start

Part 1: Get Google Client ID & Secret

Logging in with Google requires a Client ID and Client Secret (like an office ID card for authentication).

Open Google Cloud Console, search for “Create Project”, and create one.

Go to OAuth Consent Screen and configure it.

Create credentials → OAuth Client ID.

Select Web Application
Enter redirect URLs (e.g., http://localhost:5000/auth/google/callback)
Save.

Copy the Client ID and Client Secret.

Part 2: Setup Express + Passport.js

Now let’s integrate Google authentication into our Express app.

1. Install dependencies

npm install passport passport-google-oauth20

2. Configure Passport strategy (`passport-config.js`)

import passport from "passport";
import { Strategy as GoogleStrategy } from "passport-google-oauth20";

passport.use(
  new GoogleStrategy(
    {
      clientID: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      callbackURL: process.env.GOOGLE_CALLBACK_URL,
    },
    function (accessToken, refreshToken, profile, done) {
      return done(null, profile); // return raw profile info
    }
  )
);

export default passport;

3. Initialize Passport in Express

import express from "express";
import passport from "./passport-config.js";

const app = express();
app.use(passport.initialize());

4. Add Routes (`auth.routes.js`)

import { Router } from "express";
import passport from "passport";
import { googleAuth } from "../controllers/auth.controller.js";

const router = Router();

// Login with Google
router.get(
  "/google",
  passport.authenticate("google", {
    scope: ["profile", "email"],
    session: false,
  })
);

// Google callback
router.get(
  "/google/callback",
  passport.authenticate("google", {
    failureRedirect: "/login",
    session: false,
    failureMessage: "Failed to login with Google",
  }),
  googleAuth
);

export default router;

👉 We set session: false because we’ll use JWT tokens instead of in-memory sessions.

5. Google Auth Controller

export const googleAuth = async (req, res) => {
  const {
    id,
    _json: { name, picture, email },
  } = req.user;

  let user = await userModel.findOne({ googleId: id });

  if (!user) {
    user = await userModel.create({
      name,
      email,
      avatar: picture,
      googleId: id,
    });
  }

  // Generate tokens
  const { accessToken, refreshToken } = await generateToken(user);

  return res
    .status(200)
    .cookie("accessToken", accessToken, cookiesOptions)
    .cookie("refreshToken", refreshToken, cookiesOptions)
    .json({
      success: true,
      message: "User login successful",
      user,
      accessToken,
    });
};

🎯 Conclusion

That’s it! 🚀 You now have Google authentication working with Express and Passport.js.

✅ Google OAuth setup in Cloud Console
✅ Passport strategy configured
✅ Express routes + controller created
✅ JWT tokens for authentication

Next step: Secure routes and refresh tokens.

📄 How to Write a PRD (Product Requirement Document) — and Why It’s Your Project’s Best Friend

Dhiraj Arya — Sat, 09 Aug 2025 08:47:43 +0000

If you’ve ever been in a project meeting where everyone thinks they’re on the same page, but halfway through you realize you’re building totally different things… you know why a PRD matters.

A Product Requirement Document isn’t just corporate paperwork. It’s your north star. Your blueprint. Your “project Google Maps” that tells the whole team where you’re going, why you’re going there, and what the road looks like.

Let’s break it down.

🛠 Why a PRD is Important

Think of a PRD like your shopping list before going to the grocery store.
Without it:

You’ll forget important things.
You’ll pick random stuff because it “looks good”.
You’ll go over budget. …and worst of all, you’ll come home and realize you still can’t cook dinner.

In the same way, without a PRD, your project risks:

Scope creep (extra features sneak in)
Miscommunication (design thinks one thing, dev builds another)
Missed deadlines (because “we didn’t know we needed that”)

A good PRD saves time, reduces stress, and keeps the project moving in one clear direction.

✏️ How to Write a PRD (Step-by-Step)

1. Start with the “Why” — Problem Statement

Before you talk features, explain why this product or feature even exists.
Example:

“Users currently spend 10 minutes finding the settings page. This feature will make it accessible in 2 clicks.”

This keeps the team focused on solving the right problem, not just building for the sake of it.

2. Define the Goals — What Success Looks Like

Write down clear objectives:

Reduce checkout drop-off by 20%
Enable customers to track orders in real-time
Launch within 6 weeks

Goals should be measurable so you can say “yes, we nailed it” or “no, we missed it”.

3. Describe the Solution — High-Level Features

List the key features without getting lost in technical details yet.
Example:

Search bar at the top of the settings page
Auto-suggestions as user types
Mobile-friendly design

4. User Stories — Write from the User’s View

These help devs, designers, and testers stay human-focused.
Example:

“As a returning customer, I want to reorder past purchases with one click so I can save time.”

5. Technical Notes & Constraints

Here’s where you bring in reality checks:

Works with existing backend API
Must support iOS 15+
Needs to load under 2 seconds

6. Timeline & Milestones

Break the project into chunks:

Week 1–2: Design
Week 3–4: Development
Week 5: Testing
Week 6: Launch

7. Acceptance Criteria

How do you know the feature is done and ready?
Example:

Search works in < 500ms
Suggestions match at least 80% of expected queries
No critical bugs on mobile

🧰 Tools Professionals Use Daily for PRDs

You don’t need fancy tools, but the right ones make your life easier:

Google Docs / Notion — Writing & sharing the PRD
Figma — Linking designs directly inside the PRD
Jira / Trello — Breaking PRD into tasks
Slack — Quick clarifications & updates
Miro / FigJam — Brainstorming before writing

💡 Pro Tips

Keep it simple — A PRD should be clear enough for someone new to understand in 10 minutes.
Link, don’t overload — Instead of dumping wireframes inside, link to the latest version in Figma.
Update it as you go — PRDs aren’t stone tablets; if the plan changes, the PRD should too.
Use plain language — Avoid over-technical jargon. Everyone from CEO to QA should “get it”.

🚀 Final Thought

A well-written PRD doesn’t just guide your project — it protects it.
It makes sure that when your designer, developer, tester, and even your boss look at the same document, they all see the same vision.

Think of it like a contract between ideas and execution.
Write it well, and your future self (and your team) will thank you.

written by - Dhiraj Arya (Developer)

Building an AI-Powered Form Builder with Community Templates – Seeking Your Feedback!

Dhiraj Arya — Mon, 12 May 2025 02:06:40 +0000

*Hey everyone,
*
I’m working on a new SaaS product: an AI-driven form builder that not only crafts forms in seconds based on your prompts, but also lets you browse, create, and share templates in a community library. Think of it as “ChatGPT for forms,” plus a marketplace of user-made blueprints.

*🔍 What We’re Building
*

AI-Generated Forms: Describe your form’s purpose, fields, and style—and let AI do the rest.
Community Template Library: Ready-made templates for everything from event RSVPs and customer surveys to patient intake forms.
Template Creation & Sharing: Build your own templates, share them publicly (or keep them private), and earn reputation points.
Plug-and-Play Integrations: Out-of-the-box connections with CRMs (Salesforce, HubSpot), email tools (Mailchimp, SendGrid), databases (Airtable, Notion), and more.
Real-Time Analytics: Dashboard visualizations and exportable reports to turn responses into actionable insights.

*🤔 Why We Want Your Input
*
We’re still in the validation phase and want to build a tool that solves real pain points. Would you mind sharing:

Current Pain Points: What annoys you most about your existing form builder?
AI-Generated Forms: Exciting “time-saver” or too hands-off?
Community Templates: Would you use/download templates from other users? Would you contribute your own?
Must-Have Integrations: CRM, email, database, Zapier—what keeps you up at night?
Multilingual Needs: Is native support for multiple languages crucial for your use case?
“Can’t Live Without” Features: Anything else you’d love to see?

*🙏 How You Can Help
*

Drop your honest thoughts and real-world use cases below.
Share links to your favorite form builders and tell us what you love (or hate) about them.
If you’ve ever built or used public templates, let us know what made them great—or why they flopped.

Thanks in advance for your insights! Your feedback will directly shape our roadmap and help us deliver something truly valuable. 🚀

— Dhiraj Arya(Developer)

MERN stack roadmap with job ready projects

Dhiraj Arya — Wed, 26 Jun 2024 14:27:04 +0000

Month 1: Foundations

HTML & CSS

HTML Basics: Elements, attributes, headings, paragraphs, links, lists, forms.
CSS Basics: Selectors, properties, box model, flexbox, grid.
Responsive Design: Media queries, mobile-first design.
Resources: MDN Web Docs, freeCodeCamp.

JavaScript

JavaScript Fundamentals: Variables, data types, operators, control structures (loops, conditionals).
Functions: Declarations, expressions, arrow functions.
DOM Manipulation: Selecting elements, event handling, modifying elements.
ES6+ Features: let, const, arrow functions, template literals, destructuring, spread/rest operators.
Resources: Eloquent JavaScript, JavaScript.info.

Version Control

Git Basics: Initializing repositories, cloning, committing, pushing, pulling.
GitHub: Creating repositories, managing branches, pull requests, issues.
Resources: Git documentation, GitHub Learning Lab.

Month 2: Front-End Development

React

React Basics: JSX, components, props, state.
Lifecycle Methods: componentDidMount, componentDidUpdate, componentWillUnmount.
Hooks: useState, useEffect.
Routing: React Router basics, nested routes.
Resources: React documentation, freeCodeCamp React course.

Responsive Design

Flexbox: Containers, items, alignment, justification.
CSS Grid: Grid containers, grid items, areas, lines.
Responsive Units: vw, vh, %, em, rem.
Resources: MDN Web Docs, CSS-Tricks.

APIs and Fetch

Fetching Data: Using fetch API, axios library.
Async/Await: Handling asynchronous operations.
Error Handling: Try/catch blocks.
Resources: MDN Web Docs, freeCodeCamp.

Month 3: Back-End Development

Node.js & Express.js

Node.js Basics: Modules, npm, asynchronous programming.
Express.js Basics: Routing, middleware, handling requests and responses.
Building APIs: RESTful principles, creating endpoints.
Resources: Node.js documentation, Express.js documentation.

MongoDB

MongoDB Basics: Collections, documents, CRUD operations.
Mongoose: Schemas, models, validation.
Resources: MongoDB University, MongoDB documentation.

Building a Full-Stack App

Integration: Connecting front-end with back-end, API calls.
State Management: Lifting state up, context API.
Resources: Combining knowledge from previous sections.

Month 4: Advanced Topics and Soft Skills

Advanced React

Hooks: useReducer, useContext, custom hooks.
Context API: Managing global state.
React Router: Dynamic routing, protected routes.
Resources: React documentation, Advanced React tutorials.

Authentication & Security

User Authentication: JWT, OAuth.
Authorization: Role-based access control.
Security Best Practices: Sanitizing inputs, protecting endpoints.
Resources: Auth0 tutorials, JWT documentation.

Soft Skills Development

Communication: Explaining technical concepts, writing documentation.
Problem-Solving: Tackling coding challenges, debugging.
Time Management: Prioritizing tasks, setting goals.
Networking: Building a professional network, contributing to discussions.
Resources: LinkedIn Learning, HackerRank.

Advanced Projects for Interviews

Month 5: Advanced Projects

E-commerce Platform
- Features: User authentication, product listings, shopping cart, checkout process, payment integration.
- Technologies: MERN stack, Stripe API for payments.
- Example: Build a simplified version of Amazon.
Social Media App
- Features: User profiles, posts, likes, comments, real-time notifications.
- Technologies: MERN stack, WebSockets for real-time features.
- Example: Create a mini version of Twitter or Facebook.
Project Management Tool
- Features: Task creation, assignment, progress tracking, team collaboration.
- Technologies: MERN stack, drag-and-drop interfaces.
- Example: Develop a tool similar to Trello or Asana.
Blog Platform
- Features: User authentication, content management, comments, tags, search functionality.
- Technologies: MERN stack, WYSIWYG editors for content creation.
- Example: Build a platform like Medium.
Event Management System
- Features: Event creation, registration, ticketing, calendar integration.
- Technologies: MERN stack, Google Calendar API.
- Example: Create an application for managing events like Eventbrite.

Roadmap for Outstanding Projects

Planning Phase

Idea Validation: Research and validate your project idea.
Requirements Gathering: Define features, user stories, and technical requirements.
Wireframing: Create wireframes and mockups.

Development Phase

MVP Development: Build a Minimum Viable Product (MVP) with core features.
Iterative Improvement: Add features and improve functionality based on feedback.
Testing: Conduct thorough testing (unit, integration, end-to-end).

Deployment Phase

Hosting: Deploy your app on platforms like Heroku, Vercel, or AWS.
CI/CD: Implement Continuous Integration and Continuous Deployment.
Monitoring: Set up monitoring and logging to track app performance and errors.

Presentation Phase

Documentation: Write clear documentation for your project.
Portfolio: Add projects to your portfolio with detailed descriptions and screenshots.
Networking: Share your projects on GitHub, LinkedIn, and developer communities.

you'll build a strong portfolio and gain the experience needed to crack interviews and secure job opportunities. Good luck!

React Learning Roadmap

Dhiraj Arya — Mon, 24 Jun 2024 23:29:48 +0000

Learning React with a Project-Based Approach: Week-by-Week Plan to Prepare for Jobs and Freelancing

Introduction

Learning React can be a game-changer for aspiring web developers. React is a powerful library for building user interfaces and is widely used in the industry. This blog outlines a structured, week-by-week plan to learn React using a project-based approach. Additionally, we'll discuss how you can prepare yourself for job opportunities and freelancing.

Week 1: Understanding the Basics of React

Objective: Familiarize Yourself with React's Fundamentals

Day 1-2: Introduction to React

What is React?
Why use React?
Setting up the development environment.

Day 3-4: JSX and Components

Understanding JSX.
Creating functional components.
Creating class components.

Day 5-7: Props and State

Passing data using props.
Managing state within components.
Difference between props and state.

Project Task: Create a simple static website using React components, showcasing a personal portfolio.

Job Prep Tip: Start building a strong LinkedIn profile and GitHub repository to showcase your work.

Week 2: Diving Deeper into React

Objective: Gain a Deeper Understanding of React's Core Concepts

Day 1-2: Handling Events

Adding event listeners.
Handling form inputs.

Day 3-4: Conditional Rendering

Rendering elements based on conditions.
Using if, else, and ternary operators.

Day 5-7: Lists and Keys

Rendering lists in React.
Understanding the importance of keys in lists.

Project Task: Enhance your portfolio website with dynamic content and interactivity, such as a contact form.

Job Prep Tip: Begin following industry leaders and React experts on social media platforms for insights and trends.

Week 3: Working with Forms and Component Lifecycle

Objective: Master Forms and Understand the Component Lifecycle

Day 1-2: Controlled Components

Creating controlled form components.
Handling form submissions.

Day 3-4: Component Lifecycle Methods

componentDidMount, componentDidUpdate, and componentWillUnmount.
Using lifecycle methods effectively.

Day 5-7: React Hooks Introduction

Understanding the purpose of hooks.
Using useState and useEffect.

Project Task: Implement a simple to-do list application that allows adding, removing, and editing tasks.

Job Prep Tip: Start writing a technical blog or documenting your learning process. It showcases your knowledge and helps you retain concepts better.

Week 4: Advanced React Concepts

Objective: Learn Advanced React Features and State Management

Day 1-2: Context API

Understanding the Context API.
Sharing data without prop drilling.

Day 3-4: React Router

Setting up React Router.
Navigating between different pages.

Day 5-7: State Management with Redux

Introduction to Redux.
Setting up Redux in a React application.
Using actions, reducers, and the Redux store.

Project Task: Expand your to-do list application with multiple pages (e.g., a home page, about page) and global state management.

Job Prep Tip: Start applying for internships or entry-level jobs. Tailor your resume to highlight your React projects and skills.

Week 5: Building and Deploying a Real-World Project

Objective: Apply What You've Learned to a Real-World Project

Day 1-2: Project Planning

Choose a project idea (e.g., a blog application, e-commerce site).
Plan the project structure and components.

Day 3-5: Project Development

Start building your project.
Implement core features and functionalities.

Day 6-7: Testing and Deployment

Testing your application.
Deploying your application using services like Netlify or Vercel.

Project Task: Complete and deploy your real-world project.

Job Prep Tip: Update your portfolio and LinkedIn profile with your latest project. Highlight the technologies and skills used.

Week 6: Preparing for Job Interviews and Freelancing

Objective: Get Ready for Job Interviews and Freelancing Opportunities

Day 1-2: Resume and Portfolio Review

Fine-tune your resume and portfolio.
Ensure all projects are well-documented.

Day 3-4: Interview Preparation

Practice common React interview questions.
Participate in mock interviews.

Day 5-7: Freelancing Platforms

Sign up on freelancing platforms like Upwork, Freelancer, or Fiverr.
Create a compelling profile and start bidding on projects.

Project Task: Take on a small freelancing project to gain experience.

Job Prep Tip: Network with professionals in the field, attend webinars, and join online developer communities.

Additional Tips for Success

Consistency is Key: Dedicate a specific time each day for learning and practicing React.
Engage with the Community: Join React communities on platforms like GitHub, Reddit, and Stack Overflow.
Stay Updated: Follow the latest updates and trends in React development to stay ahead in the field.

By following this six-week plan, you'll not only learn React but also build impressive projects to showcase your skills. Additionally, you'll be well-prepared for job opportunities and freelancing. Remember, consistency and practice are key. Good luck on your journey to becoming a React developer!

JavaScript Learning Roadmap 🚀

Dhiraj Arya — Fri, 10 May 2024 01:49:44 +0000

Introduction:
Welcome to the comprehensive guide to learning JavaScript! Whether you're a beginner or looking to refresh your skills, this roadmap will guide you through essential JavaScript concepts step by step. Let's dive in!

Week 1: Building Foundations

Day 1: JavaScript Basics

Set up your development environment with Node.js and Visual Studio Code.
Learn about JavaScript syntax, variables (var, let, const), and basic data types (string, number, boolean).
Write and execute a simple "Hello, World!" program.

Day 2: Functions and Control Structures

Understand functions: declaration, parameters, return values, and function expressions.
Explore control structures such as if statements, switch statements, and loops (for, while).
Practice writing functions and using control structures to solve simple problems.

Day 3: Arrays and Objects

Dive into arrays: creation, accessing elements, adding/removing elements, and array methods (forEach, map, filter).
Learn about JavaScript objects: creating object literals, accessing properties, and methods.
Complete hands-on exercises with arrays and objects.

Day 4: Scope and Closures

Understand variable scope: global scope, function scope, and block scope.
Explore closures: definition, how they work, and practical examples.
Write functions to demonstrate scope and closures.

Day 5: DOM Manipulation

Understand the Document Object Model (DOM) and its structure.
Learn how to select elements using querySelector and querySelectorAll.
Explore modifying elements, changing text/content, styles, and attributes.
Add event listeners to respond to user interactions.

Week 2: Intermediate Concepts and Project Building

Day 6: Asynchronous JavaScript

Learn asynchronous programming concepts: callbacks, promises, and async/await.
Handle asynchronous tasks with setTimeout(), setInterval(), and fetching data from APIs.

Day 7: Error Handling and Debugging

Understand error handling in JavaScript: try...catch blocks, throwing and catching errors.
Explore debugging techniques using browser developer tools such as Chrome DevTools.
Debug code snippets and identify common errors.

Day 8: ES6+ Features

Discover modern JavaScript features introduced in ES6 and beyond: arrow functions, template literals, destructuring, and spread/rest operators.
Rewrite previous code using these features to practice.

Day 9: Working with Browser APIs

Explore commonly used browser APIs such as Local Storage, Fetch API for making HTTP requests, and Geolocation API.
Build a small project that utilizes one or more of these APIs.

Day 10: Introduction to Frameworks

Explore popular JavaScript frameworks/libraries: React.js, Vue.js, Angular.
Choose one framework to learn more about and complete a basic tutorial or documentation reading.

Day 11-12: Mini Project

Dedicate these two days to working on a mini project of your choice (e.g., to-do list app, weather app, or simple game). Apply what you've learned so far and challenge yourself.

Day 13-14: Review and Planning Ahead

Review concepts covered during the two weeks.
Identify areas where you need further practice or understanding.
Reflect on your progress and Certainly!

Understanding CSS Selectors: A Comprehensive Guide

Dhiraj Arya — Wed, 01 May 2024 01:56:47 +0000

Understanding CSS Selectors: A Comprehensive Guide

In website design, CSS selectors are vital. They serve as a magic wand for designers, enabling them to target and style webpage elements with precision. We will explore the different CSS selectors and their functions in detail.

CSS selectors are not limited to styling elements; they can also select elements based on attribute values, such as "href" in links or "src" in images, to apply specific styles. 🎨✨

Basic Selectors:

Universal Selector: This selector, denoted by "*", targets every single element on a webpage. It's like casting a wide net, allowing you to make sweeping changes across your entire site. For example, you can use it to reset margins or set a consistent font style.

* {
  margin: 0;
  font-family: Arial, sans-serif;
}

Type Selector: This selector targets all elements of a specific type, such as paragraphs or headings. While it's not used as frequently due to its broad nature, it can be handy for setting default styles across similar elements.

p {
  color: #333;
  font-size: 16px;
}

Class Selector: Classes are like labels that you can apply to HTML elements to group them together. The class selector, denoted by ".", allows you to target and style elements based on these labels. It's incredibly versatile and commonly used for styling reusable components, like buttons or cards.

<button class="btn btn-primary">Click me</button>

.btn {
  padding: 10px 20px;
  border-radius: 5px;
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
}

ID Selector: Similar to classes, IDs provide a unique identifier for a single element on a webpage. The ID selector, denoted by "#", allows you to target and style a specific element. However, IDs should be used sparingly, as they can lead to specificity issues and hinder scalability.

<div id="header">Welcome to our website</div>

#header {
  font-size: 24px;
  font-weight: bold;
}

Combination Selectors:

CSS selectors can also be combined to create more specific targeting rules. For example, you can use descendant selectors to style elements that are nested within other elements, or direct child selectors to target only immediate children of a parent element. These combination selectors provide granular control over styling and help avoid unintended style conflicts.

<div class="container">
  <div class="header">
    <h1>Welcome</h1>
  </div>
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>

.container .header {
  background-color: #f0f0f0;
}

.container > .content {
  margin-top: 20px;
}

Pseudo-Classes and Pseudo-Elements:

Pseudo-classes and pseudo-elements are special keywords that allow you to style elements based on their state or position in the document. For instance, you can use the ":hover" pseudo-class to change the style of a button when a user hovers over it, or the "::before" pseudo-element to insert content before an element's content. These selectors add interactivity and enhance the user experience.

<button class="btn">Hover over me</button>

.btn:hover {
  background-color: #ffcc00;
}

.btn::before {
  content: "🎉 ";
}

Attribute Selectors:

Attribute selectors enable you to target elements based on their attributes or attribute values. This is particularly useful for styling elements with specific attributes, such as links with a certain "href" value or images with a particular "alt" text. Attribute selectors provide flexibility in styling and help ensure consistency across different parts of a webpage.

<a href="https://example.com">Visit Example</a>

a[href="https://example.com"] {
  color: #007bff;
  text-decoration: none;
}

Conclusion:

CSS selectors are powerful tools that allow designers to precisely target and style elements on a webpage. By understanding the different types of selectors and how they work, you can create visually appealing and consistent designs. So, experiment with various selectors, practice combining them effectively, and unleash your creativity in web design!

Forem: Dhiraj Arya

How I Finally Made TailwindCSS Work Inside the Shadow DOM (A Real Case Study)

🧩 The Symptom

🔍 First Debugging Try

And guess what?

🧠 Why REM is Breaking Here

💡 The Simple Fix That Worked: Switch REM → PX

✅ How to Switch Tailwind to PX (Production-Ready)

After Tailwind change to Px when my Extalent UI

✅ Even Faster Option: Use Tailwind's built-in px sizing(Not Recommended)

✅ Another Production Pattern (Highly Recommended)

🚫 Why You Shouldn’t Ignore This

🔥 Conclusion

🧠 Real-World Takeaway

Google Auth

Google Login in Express.js using passport.js

Google Login in Express.js using passport.js

Why choose Passport.js?

🚀 Let’s Start

Part 1: Get Google Client ID & Secret

Part 2: Setup Express + Passport.js

1. Install dependencies

2. Configure Passport strategy (passport-config.js)

3. Initialize Passport in Express

4. Add Routes (auth.routes.js)

5. Google Auth Controller

🎯 Conclusion

📄 How to Write a PRD (Product Requirement Document) — and Why It’s Your Project’s Best Friend

🛠 Why a PRD is Important

✏️ How to Write a PRD (Step-by-Step)

1. Start with the “Why” — Problem Statement

2. Define the Goals — What Success Looks Like

3. Describe the Solution — High-Level Features

4. User Stories — Write from the User’s View

5. Technical Notes & Constraints

6. Timeline & Milestones

7. Acceptance Criteria

🧰 Tools Professionals Use Daily for PRDs

💡 Pro Tips

🚀 Final Thought

Building an AI-Powered Form Builder with Community Templates – Seeking Your Feedback!

MERN stack roadmap with job ready projects

Month 1: Foundations

Month 2: Front-End Development

Month 3: Back-End Development

Month 4: Advanced Topics and Soft Skills

Advanced Projects for Interviews

Month 5: Advanced Projects

Roadmap for Outstanding Projects

Planning Phase

Development Phase

Deployment Phase

Presentation Phase

React Learning Roadmap

Learning React with a Project-Based Approach: Week-by-Week Plan to Prepare for Jobs and Freelancing

Introduction

Week 1: Understanding the Basics of React

Objective: Familiarize Yourself with React's Fundamentals

Week 2: Diving Deeper into React

Objective: Gain a Deeper Understanding of React's Core Concepts

Week 3: Working with Forms and Component Lifecycle

Objective: Master Forms and Understand the Component Lifecycle

Week 4: Advanced React Concepts

Objective: Learn Advanced React Features and State Management

Week 5: Building and Deploying a Real-World Project

Objective: Apply What You've Learned to a Real-World Project

Week 6: Preparing for Job Interviews and Freelancing

Objective: Get Ready for Job Interviews and Freelancing Opportunities

Additional Tips for Success

JavaScript Learning Roadmap 🚀

Understanding CSS Selectors: A Comprehensive Guide

Understanding CSS Selectors: A Comprehensive Guide

Basic Selectors:

Combination Selectors:

Pseudo-Classes and Pseudo-Elements:

Attribute Selectors:

Conclusion:

2. Configure Passport strategy (`passport-config.js`)

4. Add Routes (`auth.routes.js`)