Forem: Mayank Chawdhari

YT Poller — Build a fast, cache-first YouTube feed (PHP + JS)

Mayank Chawdhari — Fri, 30 Jan 2026 02:59:01 +0000

By Mayank Chawdhari — a practical guide to setup, deploy, and embed a production-ready YouTube RSS poller.

TL;DR: YT Poller fetches a YouTube channel RSS feed, parses it, stores a JSON cache (atomic writes + locking), and exposes a small HTTP API (/api/get_videos.php). A themeable frontend (index.php) and a documentation/instructions page (setup.php) make integration trivial. Use a cron job to pre-warm cache and serve instant results to visitors. This post explains why this architecture is fast and SEO-friendly, how the pieces fit together, and step-by-step instructions to get it running and hosted (including static GitHub Pages usage for the docs/UI).

Why YT Poller (short, practical reasons)

Avoids on-demand network fetches to YouTube when visitors arrive — reduced latency and increased reliability.
Pre-warmed cache + small JSON payload = fast pages and better Core Web Vitals.
No API keys required (uses YouTube RSS), so it’s easy to deploy and maintain.
The API returns JSON only (no HTML errors), so frontends behave predictably.
Easy to embed on any site: client-side snippet or server-side pre-warm via cron.

Prerequisites

PHP 7.4+ / 8.x with curl and simplexml enabled.
Web server (Apache / Nginx / PHP-FPM) or a host that runs PHP.
Ability to run cron jobs (or other scheduler).
Optional: GitHub account (for Pages), Docker (if you want containerization).

Project overview — structure & responsibilities

/
├─ index.php           # themeable UI (client)
├─ setup.php           # documentation & integration generator (keep this as your docs page)
├─ api/get_videos.php  # API gateway (validate, cache, fetch fallback)
├─ includes/
│  ├─ config.php       # settings: default TTL, cache_dir, allowed_origins, default_channel (optional)
│  ├─ cache.php        # atomic file cache helper (read/write)
│  └─ fetcher.php      # channel resolver, feed builder, fetcher, RSS parser
└─ cache/               # JSON cache files and runtime logs

How it works (brief)

Frontend requests /api/get_videos.php?channel=...&limit=...&ttl=....
API validates input and checks cache. If cache is fresh, return it.
If stale/forced, server uses fetcher.php to resolve channel (UC id), build a reliable RSS URL, fetch feed via cURL, parse with SimpleXML, then write JSON to cache atomically.
API always returns JSON; on fetch failure it falls back to previous cache (if present) or returns a clear fetch_failed error with HTTP status.
Optionally run a server-side cron (prime_cache.php) to force fetch and pre-warm cache.

Key implementation notes (you can copy these into docs or README)

`includes/cache.php` — atomic JSON writes (safe)

Sanitizes channel id for filename.
Writes to a .tmp then rename() (atomic on POSIX).
Uses flock() for exclusive lock during write.

Important behavior: robust to partial writes and concurrent access.

`includes/fetcher.php` — channel resolution + RSS parsing

Accepts many channel forms: UC..., full channel URL, @handle, /c/username etc.
Resolves to the canonical UC... id (recommended approach: use YouTube oEmbed or author_url detection server-side).
Builds RSS URL: https://www.youtube.com/feeds/videos.xml?channel_id=UC... (this is the reliable canonical RSS endpoint).
Uses cURL with sensible defaults (timeout, follow redirects, user agent) and simplexml_load_string() to parse RSS.
Extracts videoId, title, published, thumbnails, etc., into a simple array suitable for JSON.

`api/get_videos.php` — the small API gateway

Central responsibilities:
- Input validation and sanitization
- CORS header support (configured via includes/config.php)
- Cache TTL logic and server-side minimum fetch interval (throttling)
- Safe error handling (exceptions/errors converted to JSON payloads, not HTML 502 pages)
- Fallback to cached payload if fetch fails

Production tips:

Set YTPOLLER_DEV to false in production to hide stack traces.
Limit allowed_origins to your domain in includes/config.php to avoid open CORS in prod.

Quick install (5–10 minutes)

Clone repo:

git clone https://github.com/BOSS294/yt-poller.git
cd yt-poller

Ensure PHP + extensions:

php -m | grep -E "curl|simplexml"

Create and secure cache dir:

mkdir -p cache
chown www-data:www-data cache        # adapt to your server user
chmod 750 cache

Configure (optional): edit includes/config.php:

return (object)[
  'default_ttl' => 300,
  'max_ttl' => 86400,
  'cache_dir' => __DIR__ . '/../cache',
  'allowed_origins' => ['https://yourdomain.com'],
  'user_agent' => 'YT-Poller/1.0 (+https://yourdomain.example)',
  'min_fetch_interval' => 10,
  'default_limit' => 20,
  // optional default channel:
  // 'default_channel' => 'UC_xxxxxxxxxxxxx',
];

Upload to PHP host or run locally for testing:

php -S 0.0.0.0:8000
# Visit http://localhost:8000/setup.php to read the docs page and generate snippets

Recommended cron: pre-warm cache

Create cron/prime_cache.php (or use the snippet in setup.php) and add to crontab:

cron/prime_cache.php:

<?php
$channel = "UC_xxxxxxxxx";   // your channel
$api = "https://yourdomain.com/api/get_videos.php";
$url = $api.'?channel='.urlencode($channel).'&ttl=3600&limit=20&force=1';
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_exec($ch);
curl_close($ch);
echo "Done\n";

Crontab entry (every 15 minutes):

*/15 * * * * /usr/bin/php /path/to/cron/prime_cache.php >/dev/null 2>&1

Notes:

Choose TTL and cron frequency sensibly. For low-frequency channels, longer TTL (1h–24h) might be OK. For active channels, 5–15 minutes is common.
Use force=1 in cron so it bypasses TTL and fetches fresh.

GITHUB REPO : https://github.com/BOSS294/yt-poller

What developers always miss when building color schemes (and how to fix it)

Mayank Chawdhari — Sun, 18 Jan 2026 18:14:10 +0000

Color is not decoration. It’s hierarchy, affordance, accessibility, and mood — all encoded in tiny hexes. Ship a color system, not a handful of random swatches. Below is a ready-to-publish Dev.to post in Markdown you can copy, paste, and publish as-is.

Stop treating color like an afterthought — a practical guide to color systems for devs

Too many apps pick a primary color, slap it on buttons, and call it a day. The result: inconsistent UIs, accessibility failures, and a product that feels half-baked. This post lays out the subtle—but high-impact—things developers routinely forget when designing color systems, plus practical rules, copy-paste tokens, and an accessibility checklist you can run before launch.

What most devs miss (quick list)

Semantic tokens, not “random hexes” — colors should represent roles (background, surface, primary, success, border), not only components.
Contrast & accessibility — color choices must work for low-vision and color-blind users, not just look pretty on a monitor.
State & scale — every semantic color needs base, hover, active, disabled, and on (text-on-color) variants.
Color-only meaning — never rely on color alone to convey status; pair with iconography, labels, or patterns.
Dark mode parity — dark theme is a first-class citizen; don’t just invert light values.
Saturation & chroma control — tame saturation for large surfaces; reserve high chroma for CTAs and micro-interactions.
Token naming & design tokens — name by role (--color-surface) not by hue (--blue-500).
Device gamut awareness — wide-gamut displays (P3) make colors pop; design defensively so things don’t blow out.
Visible focus & keyboard affordances — ensure focus rings remain legible on all backgrounds.
Testing & tooling — integrate contrast checks and color-blind simulators into QA.

Concrete rules — how to build a reliable color system

Layer your tokens

Foundational tokens: hue/saturation/lightness values for brand and feedback colors.
Semantic tokens: --color-surface, --color-primary, --color-border.
Component tokens: --btn-primary-bg references --color-primary.
1. Use HSL (or CSS color functions): tunable — changing lightness or saturation produces consistent tints/shades.
2. Provide states: for each semantic color include base, on (text), hover, active, disabled.
3. Prefer off-white / off-black: #fff and #000 are harsh. Slightly off values reduce eye strain.
4. Test contrast for real text sizes (WCAG AA as minimum for body text).
5. Don’t rely on color alone for statuses — add icons, text, or patterns.
6. Design dark mode independently — adjust saturation and lightness; don’t blindly invert.
7. Make tokens available to designers and devs (JSON/CSS exports) so both sides use the same source of truth.

Copy-paste CSS starter (semantic tokens + states)

/* 1) Base HSL tokens (role-based, tuneable) */
:root{
  /* Brand / primary in HSL */
  --primary-h: 210;
  --primary-s: 88%;
  --primary-l: 52%;

  /* Feedback hues */
  --success-h: 140;
  --success-s: 55%;
  --success-l: 38%;

  --error-h: 12;
  --error-s: 84%;
  --error-l: 48%;

  /* Neutral scale (store as H S% L% strings when helpful) */
  --neutral-0: 0 0% 100%;   /* white-ish surface */
  --neutral-1: 220 14% 96%;
  --neutral-2: 220 12% 88%;
  --neutral-3: 220 10% 72%;
  --neutral-4: 220 8% 44%;  /* text default */
  --neutral-5: 220 6% 10%;  /* near black */
}

/* 2) Derived semantic tokens */
:root{
  --color-surface: hsl(var(--neutral-1));
  --color-surface-2: hsl(var(--neutral-2));
  --color-text: hsl(var(--neutral-4));
  --color-text-strong: hsl(var(--neutral-5));

  --color-primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --color-primary-hover: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 8%));
  --color-primary-active: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 14%));
  --color-primary-on: white;

  --color-success: hsl(var(--success-h), var(--success-s), var(--success-l));
  --color-error: hsl(var(--error-h), var(--error-s), var(--error-l));

  --color-border: hsl(220 10% 85%);
}

/* 3) Component usage example */
.btn {
  background: var(--color-primary);
  color: var(--color-primary-on);
  padding: .6rem 1rem;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background .12s ease, transform .06s ease;
}
.btn:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.btn:active { background: var(--color-primary-active); transform: translateY(0); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

Quick tips & practical patterns

Elevation with alpha: use subtle alpha overlays (e.g., background: rgba() / color-mix() or linear-gradient) rather than many solid surface colors.
Reserve saturation for action: low saturation on large surfaces; higher saturation for CTAs and micro-interactions.
Icon color = text color — treat icons as text for accessibility/contrast.
Token naming rule: --color-<role> (e.g., --color-surface, --color-border, --color-primary) — makes intent obvious.
Design tokens pipeline: export tokens to JSON/CSS and import into Figma/Sketch so design and code stay in sync.
Dark mode strategy: pick a neutral dark background (not pure black), lower saturation of primaries, raise contrast for text.

Small but high-impact gotchas developers skip

Disabled states without contrast tests (users can’t read disabled labels).
Tiny icons with insufficient contrast (icons are UI text too).
Relying on red/green alone for status—fails for color-blind users.
Focus rings that disappear on colored backgrounds.
Using #000/#fff everywhere instead of pleasant off-black/off-white for better perceived contrast.

Example: focus-visible and accessible error

/* visible focus */
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 80%, white 20%);
  outline-offset: 3px;
}

/* error state with icon + label */
.input--error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 8%, transparent);
}
.error-msg {
  display: flex;
  gap: .5rem;
  align-items: center;
  color: var(--color-error);
  font-size: .9rem;
}

Conclusion

Color is not an afterthought — it’s a system. Treat it like one: define semantic tokens, plan states (hover/active/disabled/on), and design dark mode intentionally. Make accessibility (contrast, color-blind checks, visible focus) a non-negotiable part of your workflow, not an optional QA step. Small, deliberate color decisions — saturation, context, and naming — are what separate a hurried UI from a polished, inclusive product. Ship the system, not just a swatch.

CamSecure V2 – Advanced Web-Based Surveillance for Modern Security Needs

Mayank Chawdhari — Sun, 10 Aug 2025 08:47:47 +0000

Inspired by a real horror story. Built for unmatched privacy and advanced security.

The Story

Late one night, I experienced the kind of horror no security professional expects: undefined motion, chilling noises, and a sense that something dangerous was in my workspace. My standard security system didn’t react fast enough. That night inspired the creation of CamSecure V2—a surveillance system that actively detects, analyzes, and documents every unusual occurrence, giving complete control and peace of mind.

Key Features Overview

Feature	Description	Visual Capture
Live Feed	Real-time video stream with instant motion highlighting	✅ All motion events
Room Scan	Detects, marks, and screenshots faces in predefined zones (entry/exit points)	✅ Faces in zones
Thermal Mode	Thermal-like view pinpoints anomalies and unusual heat signatures	✅ Anomaly screenshots
Advanced Feed	Zooms into detected people, analyzes bodies, faces, emotions, and marks threat activity	✅ Zoom/threat shots
Motion Heatmap	Shows where activity frequently occurs within the camera view over time	✅ Heatmap images
Threat Logging	Every suspicious movement, heavy motion, or threat is screenshotted and logged automatically	✅ Snapshots + logs
Simple Motion Log	Even minor motion is captured and recorded for user review	✅ Screenshots
Audio Monitoring	Optional monitoring of spikes in sound or suspicious audio patterns	—
Network & Device Health	Real-time metrics for connection and system status	—
Web Dashboard	Intuitive, multi-stream dashboard for instant switching and event management	—
Privacy-first	Local-only storage and processing; absolutely no cloud	—

Why CamSecure V2 is Different

Screenshots for Every Event:

Every heavy motion and simple movement is screenshotted and logged, so you have clear visual records—not just data.
Advanced feed zooms into people:

Detects people (bodies/faces), automatically focuses and zooms the stream for identification and incident review.
Heatmap Analytics:

Track which parts of your space are most active. Spot risks, patterns, and vulnerabilities instantly.
Instant Threat Detection:

Unusual activity—from fire or smoke to unauthorized presence—is detected, marked, and logged with severity levels.
Privacy by Design:

Nothing leaves your device. All data, images, and logs are stored locally.

Professional Technology Stack

Python & Flask: Fast, reliable web backend and API
OpenCV & NumPy: Industry-standard for vision and processing
HTML5, CSS, JavaScript: Modern, responsive web interface
DeepFace (optional): Deep learning analysis of faces/emotions
psutil, sounddevice (optional): Device and audio metrics
Secure local exports: CSV and snapshot files for review and reporting

Designed for Real Security Needs

Perfect for homes, labs, makerspaces, workshops, and professionals
4 simultaneous video feeds for flexible monitoring
Admin panel: review, export, and manage threats/logs
Network and device health monitoring—know your system is stable

What Makes CamSecure V2 Unique?

Inspired by fear, built for proof. My own unexplained experience led to a system where nothing is missed, and every threat is automatically documented.
High-quality evidence. Snapshots and logs of all suspicious activity—heavy and minor—mean you’re always in control.
Instant analytics. Heatmaps, zone-based detection, threat logs, all available in one user-friendly dashboard.
Totally local, totally secure. Your privacy is never compromised.

Your Feedback Fuels Development

Have you faced a security scare? Do you need analytics, privacy, or flexible monitoring? CamSecure V2 is evolving based on real feedback from users like you.

Share your story, suggest a feature, or ask for a demo in the comments below!

CamSecure V2 — Because the real horror is what goes unseen.

This is a private, local-only project. For more about the technology, interface, or the horror story itself, connect in the comments or DM.

Inside DebtMatePro V2: Dashboard Page

Mayank Chawdhari — Mon, 21 Apr 2025 10:10:53 +0000

Clients Dashboard

Overview:

This page serves as a comprehensive and dynamic Panel Dashboard designed to provide real-time insight into key account and system metrics. It fuses modern design elements, smooth animations, and responsive layouts to deliver an exceptional user experience.

Greeting Section:

Dynamic Greeting & Date/Time:

A greeting block dynamically updates to display a personalized welcome message ("Welcome Back, Good [Morning/Afternoon/Evening]") based on the current IST time.

The current date is shown in bold green, while the time is segmented into hours/minutes and seconds—with seconds highlighted in red—offering a clear, real-time display.

Metric Cards Section:

Data Visualization:

The dashboard leverages a grid layout to present various data cards. Each card displays a specific metric (e.g., Total Debtors, Recorded Debt, Calls over various periods, Documents, Version, API Status, Logs).
Icons from Material Icons are used alongside each metric, providing a visual cue that complements the textual information.

Interactivity & Feedback:

Every card features a subtle shadow and 3D-tilt effect upon hover, improving the tactile feel of the dashboard.
A tooltip appears when hovering over a card, offering additional details about each metric (e.g., “Outstanding balance” for Recorded Debt).
Some metrics (like Recorded Debt) are conditionally styled with specific colors (e.g., red for critical values) to attract user attention.
Panel Features Section:

Real-Time Data & Updates:

Asynchronous Fetching:

The dashboard fetches analytics data asynchronously from a backend API endpoint at regular intervals (every 6 seconds) ensuring that the displayed metrics remain up-to-date.

Scheduled Time Updates:

A JavaScript function updates the IST date and time every second, ensuring that users always see the current time without having to refresh the page.

Implementation of Folder and Image Upload System with Database Integration

Mayank Chawdhari — Mon, 10 Feb 2025 12:44:33 +0000

This is integrated in one of my projects

Overview:

Introducing a robust system for handling image uploads and folder creation with full validation, processing, and database integration. The system includes checks for user authentication, file handling (with image format conversion), folder creation, and the insertion of relevant metadata into the database. The system ensures that uploaded images are stored efficiently and the user is provided with structured feedback on success or failure.

Key Features Implemented:

User Authentication Validation:
- The script starts by ensuring the user is authenticated. If the session does not contain the aUsername variable, an error message is returned in JSON format, halting the script's execution. This ensures that only authorized users can interact with the image upload process.
Folder Creation and Validation:
- The system checks if the base upload directory (Resources/PropertiesMedia) exists. If not, the script responds with an error, indicating the missing directory.
- The folder name provided in the request is validated and sanitized to only include alphanumeric characters, dashes, and underscores. If no folder name is provided, the script returns an error indicating the missing folder name.
Folder Directory Creation:
- If the target folder doesn’t exist, the script attempts to create the folder inside the base directory using appropriate permissions (0755).
- The folder name is dynamically generated based on the sanitized input, and if folder creation fails, the script returns an error message indicating the failure.
File Upload Validation:
- The script verifies that exactly 7 files are uploaded by checking the $_FILES array. If the number of files differs from 7, the system halts and returns an error message indicating how many files were uploaded versus the expected number.
Image Processing with Conversion (WebP):
- The system checks whether the GD extension is available, enabling image conversion.
- If the GD extension is available, uploaded images are converted to WebP format (with 80% quality), making them more optimized for web usage.
- For unsupported formats or when GD is not available, the image is saved in its original format, and the process continues.
Random String Generation for Image Filenames:
- To ensure unique filenames and avoid conflicts, a helper function generates a random string (5 characters by default). This random string is appended to the file name before storing it.
File Handling:
- Each uploaded file is moved to the newly created folder. The script calculates the total size of all uploaded images and accumulates it as the total size of the folder.
- For each uploaded image, the script also collects metadata (image name, URL, quality, and size) to insert into the database.
Database Integration:
- Folder Metadata: Once the images are uploaded, metadata about the folder (name, assigned user, quality, and size) is inserted into the property_media_folders table. This creates a record of the folder and its details in the database.
- Image Metadata: For each image, metadata including the name, URL, quality, and size is inserted into the property_images table. The images are linked to the folder they were uploaded to by associating them with the folder name.
Error Handling and Feedback:
- The script contains multiple layers of error handling for various stages, including:
  - Missing or invalid folder name.
  - Incorrect number of files uploaded.
  - Unsupported image formats.
  - GD extension availability.
  - Folder creation failures.
  - Database insertion failures.
- Structured JSON responses provide clear feedback to the user, whether successful or error messages are returned.
Response Message:
- If all operations (folder creation, file uploads, and database insertions) are successful, the script returns a success message with details about the folder and the images that were processed.
- If any part of the process fails, an error message is returned, describing the issue and halting further execution.

Detailed Explanation of Each Process:

1. User Authentication:

The script verifies the session for the aUsername key. If not found, it immediately returns an error in JSON format:

   {
     "status": "ERROR",
     "message": "User not authenticated."
   }

2. Folder Validation:

The folder name is sanitized using preg_replace to ensure it only contains alphanumeric characters, dashes, and underscores.
If the base directory doesn't exist, an error response is returned:

   {
     "success": false,
     "message": "Base upload directory not found."
   }

If the folder name is missing, the script returns:

   {
     "success": false,
     "message": "Folder name is required."
   }

3. File Upload Validation:

The system checks that exactly 7 files are uploaded. If not, the script responds:

   {
     "success": false,
     "message": "Exactly 7 images must be uploaded. Received: X"
   }

4. Image Conversion:

If the GD extension is available, uploaded images are processed and converted into WebP format. The response message indicates whether the images were converted to WebP or saved in their original format.
If GD is not available, the images are simply moved to the directory without conversion.

5. Database Integration:

The folder metadata is inserted into the database with the following SQL statement:

   INSERT INTO property_media_folders (FolderID, FolderName, FolderAssignedTo, ImageQuality, Size) VALUES (:FolderID, :FolderName, :FolderAssignedTo, :ImageQuality, :Size)

Image metadata is inserted into the property_images table for each image:

   INSERT INTO property_images (Image_Name, Image_url, AssignedToFolder, ImageQuality, ImageSize) VALUES (:Image_Name, :Image_url, :AssignedToFolder, :ImageQuality, :ImageSize)

6. Response Example:

Success response with the following structure:

   {
     "success": true,
     "message": "Files uploaded successfully. Images converted to WebP.",
     "folder": "example_folder_name"
   }

Error response with an appropriate message indicating the specific issue encountered.

Conclusion:

This provides a comprehensive solution for managing image uploads and folder creation, along with robust file handling and conversion (if applicable). It integrates with a backend database to store relevant metadata and ensures proper error handling and validation throughout the process. This system is designed to be reliable, efficient, and secure, providing clear feedback to users.

Web-Scrapper-Python

Mayank Chawdhari — Tue, 04 Feb 2025 22:40:30 +0000

Overview

This project is a powerful web scraper built using Python. It is designed to efficiently extract metadata, download images, fetch links, and store the collected data in both CSV and JSON formats for further use. Additionally, the scraper features a Tkinter-based GUI that provides a user-friendly interface, making it accessible to both developers and non-programmers. With support for multithreading, the tool ensures high performance and quick data processing even on websites with a large number of links and images.

Features

Extracts Metadata:

Retrieves key information from webpages, including the page title, meta descriptions, keywords, OpenGraph tags, and Twitter metadata. This functionality is essential for tasks like SEO analysis, content research, and competitive analysis.
Downloads Images:

Automatically downloads all images found on the target website. The images are stored in structured folders based on the site name, ensuring clarity and easy access. Duplicate images are avoided to optimize storage and reduce redundant data.
Fetches All Links:

Extracts all hyperlinks present on a webpage and processes each link to gather additional metadata. This enables users to perform a comprehensive site crawl and data extraction from multiple pages.
Saves Data in CSV and JSON:

The scraped data is stored in both CSV and JSON formats inside a structured directory (SITE/{site_name}). This dual-format output facilitates seamless integration with various data analysis tools and workflows.
Multithreading for High Performance:

Leveraging Python’s multithreading capabilities, the scraper can process multiple links and download images concurrently. This significantly reduces the total execution time, making it ideal for large-scale web scraping tasks.
GUI Interface:

A modern, aesthetically pleasing Tkinter-based graphical user interface allows users to enter the URL, initiate the scraping process, and view real-time log updates. The built-in console log displays progress updates, errors, and other important messages, enhancing the user experience.
Error Handling and Logging:

The scraper is equipped with comprehensive error handling using custom logging functions that display messages in different colors based on the type of notification (e.g., errors, warnings, progress updates). This makes troubleshooting easier and improves overall usability.

Functions Explained

The project is structured into two main components: scraper_functions.py (which contains all the backend scraping logic) and main.py (which builds the GUI and manages user interaction). Below is a detailed breakdown of the functions included in the project:

Function	Description
`get_page_info(url)`	Purpose: Extracts metadata from a given webpage. Details: Sends an HTTP request to the URL and parses the returned HTML using BeautifulSoup. Retrieves the page title and meta tags such as description, keywords, OpenGraph, and Twitter data.
`sanitize_filename(filename)`	Purpose: Ensures file names are safe for use on any operating system. Details: Removes any invalid characters (e.g., `<>:"/\
{% raw %}`download_images(url, folder_name, downloaded_images, log_func)`	Purpose: Downloads images from a webpage. Details: Retrieves all `<img>` tags from the page, constructs absolute URLs for relative paths, and downloads each image if not already downloaded. Images are stored in a dedicated media folder.
`save_to_csv(data, site_name)`	Purpose: Saves the scraped data in CSV format. Details: Organizes data into rows and writes it into a CSV file under the directory `SITE/{site_name}`, making the data easily accessible for further analysis or reporting.
`save_to_json(data, site_name)`	Purpose: Saves the scraped data in JSON format. Details: Dumps the data into a JSON file with proper indentation and formatting, stored under `SITE/{site_name}`. This is useful for integrations with other applications or APIs.
`fetch_links(url, log_func, scraped_data, folder_name, downloaded_images)`	Purpose: Extracts and processes all hyperlinks from a webpage. Details: Uses BeautifulSoup to locate all `<a>` tags, extracts the `href` attribute, and then uses multithreading (via ThreadPoolExecutor) to process each link concurrently.
`process_link(full_url, log_func, scraped_data)`	Purpose: Processes a single hyperlink. Details: For each link, it calls `get_page_info` to retrieve metadata and logs the progress. The scraped information is then appended to the aggregated data list for later storage.
`scrape_website(url, log_func)`	Purpose: Main orchestrator of the scraping process. Details: Determines the site name from the URL, initializes data structures (for storing images and scraped data), calls functions to fetch links and download images, and finally saves the data.
`log_func(message, color)`	Purpose: Provides custom logging with colored output. Details: Displays messages to the console with specific colors to denote different types of messages (e.g., errors in red, success in green), enhancing readability during runtime.

GUI Interface

The GUI component (defined in main.py) provides a graphical layer over the scraping functions, featuring:

Input Field:

A text entry widget where users can input the URL of the website they wish to scrape.
Start Button:

Initiates the scraping process. When clicked, it disables the input field and start button to prevent multiple concurrent operations and changes the button text to indicate that scraping is in progress.
Stop Button:

Provides the ability to gracefully halt the scraping process. Once clicked, it attempts to join the scraping thread and resets the interface.
Console Log:

A scrolling text widget that displays real-time logs including information about fetched links, downloaded images, progress updates, and any error messages encountered during the scraping process.
Close Program Button:

Allows the user to exit the application gracefully.

The GUI is built using Tkinter and is enhanced with custom themes and styling from the ttkthemes package, making the user interface both modern and responsive.

Usage & Applications

This web scraper can be used in various scenarios, including:

SEO Analysis:

Extract metadata from websites to evaluate their SEO structure and performance. This is particularly useful for digital marketers and SEO specialists.
Web Archiving:

Save website content and structure in a persistent format (CSV/JSON) for archival or offline browsing purposes.
Research & Data Collection:

Collect data from multiple websites for academic research, market analysis, or competitive intelligence. The structured output can be directly imported into data analysis tools.
Image Scraping:

Automatically download images from websites for content creation, analysis, or reuse. The scraper ensures that images are organized and duplicates are avoided.
Automated Data Extraction:

Use the tool as a backend component in larger automation workflows, integrating with other systems via its CSV/JSON outputs.

How to Run

Clone the Repository:

   git clone https://github.com/BOSS294/Web-Scrapper.git
   cd Web-Scrapper

Install Dependencies:

Ensure you have Python 3 installed. Then, install the required packages:

   pip install -r requirements.txt

Run the Scraper:

Launch the application by running the main Python file:

   python main.py

The GUI window will appear, allowing you to input a URL and start scraping.

Technology Stack

Python 3: The core programming language used for scripting and application logic.
Tkinter: For creating the GUI interface.
BeautifulSoup & Requests: For web scraping and HTML parsing.
Selenium & WebDriver Manager: For handling dynamic web content (if needed).
ThreadPoolExecutor: For concurrent processing of multiple links.
CSV & JSON Modules: For structured data storage.
ttkthemes: For enhancing the look and feel of the Tkinter GUI.

Future Roadmap

Enhanced Error Handling:

Implement more robust error and exception management to handle various edge cases (e.g., network failures, unexpected HTML structures).
Progress Indicators:

Add progress bars and visual indicators within the GUI to display real-time scraping progress.
Customization Options:

Allow users to customize output directories, file naming conventions, and select specific types of data to scrape.
Support for JavaScript-Heavy Sites:

Further integrate Selenium or headless browsers to scrape sites that rely heavily on JavaScript for content loading.
Automated Scheduling:

Enable scheduled scraping tasks that can run at predefined intervals.
User Authentication:

Incorporate options to scrape data from websites that require user authentication.

Contributing

Contributions are welcome! If you have suggestions, improvements, or bug fixes, please feel free to fork the repository and submit a pull request. Here’s how you can contribute:

Fork the repository.
Create a new branch for your feature or bug fix.
Commit your changes and push the branch.
Open a pull request describing your changes.

For any major changes, please open an issue first to discuss what you would like to change.

Author

👨‍💻 Made By: Mayank Chawdhari

Feel free to reach out if you have any questions or need further assistance with the project.

Building a Real-Time User Analytics Dashboard with Chart.js: Track Active & Inactive Users Dynamically

Mayank Chawdhari — Sun, 02 Feb 2025 00:33:22 +0000

User Analytics Dashboard

Features

This User Analytics Dashboard is a real-time, interactive web application designed to track and visualize active, inactive, and total users with dynamic data updates.

Key Features:

Real-Time Data: The dashboard dynamically updates user data every 30 seconds.
User Analytics: Displays statistics on active users, inactive users, and the total number of users.
Interactive Charts: Visual representation of user data over time using interactive line charts powered by Chart.js.
Refreshing Countdown: Includes a countdown timer to indicate the next data refresh cycle.
Modern UI: Stylish and user-friendly design with smooth animations, hover effects, and modern color schemes.

Technologies Used:

HTML5: For structuring the webpage.
CSS3: For styling and layout, including flexbox and box-shadow effects.
JavaScript: For real-time data manipulation, Chart.js for chart rendering, and dynamic updates.
Chart.js: For interactive and visually appealing line charts.
Material Icons: Used for interactive elements like refresh button.

Roadmap

Current Features:

Dynamic user data update every 30 seconds.
Real-time line charts displaying active, inactive, and total users.
Visual countdown timer before data refresh.
Data statistics with styled counts in the UI.
Fully responsive layout for different screen sizes.

Upcoming Features:

User Data Source Integration: Integrate with a real backend (e.g., REST API) to fetch real user data instead of static numbers.
User Role Tracking: Add user roles (e.g., Admin, Member, Guest) to display different statistics.
Notifications: Real-time notifications for critical data changes, like a spike in inactive users.
Customizable Dashboard: Allow users to customize which metrics they want to see and how the data is visualized.

Possible Future Enhancements:

Export Data: Add the ability to export user data in CSV/JSON format.
Authentication: Implement user login/logout with role-based access control for enhanced security.
Graph Customization: Allow users to customize the type of graph (e.g., bar, pie, area chart) for user data visualization.

Installation

To get started, simply clone this repository and open the index.html file in your browser:

git clone https://github.com/BOSS294/User-Analytics-Dashboard.git
cd User-Analytics-Dashboard
open index.html

No additional setup is needed as it is a static web application with Chart.js.

Made with 💖 by Mayank Chawdhari

PROJECT-991 ( MASH AI )

Mayank Chawdhari — Wed, 18 Dec 2024 12:18:31 +0000

Project 991: Mash - Speech-Based AI using Python

Description:
Project 991, called Mash, is a groundbreaking initiative that introduces a modern-day Speech-Based AI machine, combining the power of advanced speech recognition and natural language processing techniques with the flexibility of the Python programming language. The project aims to deliver an intuitive and interactive speech-based AI experience.

Mash incorporates state-of-the-art speech recognition algorithms to accurately convert spoken language into text, facilitating effortless interaction between users and the AI. Leveraging effective natural language processing (NLP) strategies, Mash comprehends user queries, recognizes context, analyzes intent, and extracts relevant information to provide unique and context-aware responses.

Key Functions:

Created a speech recognition system using the speech_recognition library in Python.
Implemented the ability for the AI to listen to user speech input and convert it to text.
Integrated the pyttsx3 library for text-to-speech functionality.
Added support for performing mathematical calculations by evaluating user-provided mathematical expressions.
Implemented the ability for the AI to handle tasks assigned by the user, such as opening specific websites or performing searches.
Enhanced the AI's understanding of user instructions by processing and extracting relevant information from the user's speech input.
Improved error handling and providing appropriate responses in case of unrecognized speech or errors in task execution.
Incorporated the use of a voice synthesis engine to customize the voice of the AI.
Developed a command-based interaction system where the AI responds to specific commands or instructions given by the user.
Enhanced the user experience by providing voice feedback for executed tasks and mathematical calculations.
Implemented the ability for the AI to process user instructions even when provided in a sentence or paragraph format.
Integrated neural network models for natural language processing and understanding.
Enabled the AI to understand and execute tasks based on specific keywords and instructions provided by the user.
Improved the overall functionality and reliability of the MaSh AI program based on user feedback and iterative updates.
These updates have enhanced the AI's capabilities, improved its understanding of user instructions, and provided a more interactive and personalized experience.

Roadmap:

The future roadmap for Mash includes several exciting developments to further enhance its capabilities and expand its applications. The key milestones are as follows:

Enhanced Speech Recognition: Continuously improve speech recognition algorithms to enhance accuracy and support a broader range of languages and accents.
Contextual Understanding: Train Mash to better understand and maintain context, enabling deeper and more meaningful conversations.
Multi-Modal Integration: Integrate visual and auditory cues to provide a more immersive and interactive user experience, combining speech recognition with image and video analysis.
Domain-Specific Customization: Enable customization of Mash for specific industries or domains, allowing organizations to tailor the AI system to their specific requirements.
Advanced User Interface: Refine and enhance the user interface to provide additional features such as visual feedback, voice commands, and personalized settings, further improving the user experience.
Integration with IoT Devices: Adapt Mash to seamlessly integrate with Internet of Things (IoT) devices, allowing users to control their smart homes, appliances, and other connected devices using voice commands.

By leveraging the power of advanced speech recognition, natural language processing techniques, and the flexibility of Python, Mash offers exciting opportunities for developing intelligent, speech-controlled applications. The project's roadmap ensures continuous improvements, promising a more natural and immersive speech-based AI experience for both personal and business applications.

Funny-Captcha Web

Mayank Chawdhari — Wed, 18 Dec 2024 12:17:31 +0000

Welcome to the most entertaining CAPTCHA system ever! This project not only verifies if you're a human but also makes you smile, laugh, and enjoy the process. Say goodbye to boring CAPTCHAs and hello to fun and interactivity! 😄

What It Is

This project is a dynamic and amusing CAPTCHA system designed to enhance user experience. Whether you're correct or incorrect, you get a delightful response that will make you enjoy solving CAPTCHAs. It's perfect for web applications that want to add a bit of fun to their form validations.

Features 🌟

Fun Animation for Correct Answers 🎉
- When you solve the CAPTCHA correctly, a celebratory sound plays, and small papers fly from the sides of the screen!
Humorous Video for Incorrect Answers 😂
- If you get the CAPTCHA wrong, an amusing video pops up to cheer you up and make you try again with a smile.
Modern Design ✨
- The CAPTCHA form is stylish, responsive, and includes a smooth hover effect to enhance user interaction.
Interactive SweetAlert2 Popups 🍬
- Uses SweetAlert2 for delightful and customizable popup messages.
Responsive Layout 📱
- Looks great on both desktop and mobile devices, ensuring a seamless experience for all users.

How to Use

Clone the repository: git clone https://github.com/BOSS294/Funny-Captcha.git
Open the main.html file in your favorite web browser.
Enjoy the fun CAPTCHA experience! 🎊

Installation and Setup

Clone this repository: git clone https://github.com/BOSS294/Funny-Captcha.git
Navigate to the project directory: cd Funny-Captcha
Open main.html in your web browser to see the CAPTCHA in action.

Contributing 🤝

Contributions are welcome! Feel free to open issues or submit pull requests to improve the project and make it even more fun.

Acknowledgments 🙌

Special thanks to:

SweetAlert2 for their awesome popup library.
All contributors and users who make this project fun and engaging.

Created by Mayank Chawdahri. Follow me on Instagram for more updates!

Enjoy making your users smile with this funny and interactive CAPTCHA system! 😃🎈

CID-FUNNY-LOGIN

Mayank Chawdhari — Wed, 18 Dec 2024 12:16:48 +0000

CID-Themed Login System 🎬🔐

This project presents a fun, CID-themed login system where users are entertained with iconic CID meme videos upon successful login. It offers a unique and engaging user experience by integrating CID-themed elements throughout the application.

Features

🎭 CID-Themed: Enjoy the nostalgic CID series with themed memes and videos.
🔐 Credential Check: Validate login with predefined username and password.
📽️ Video Playback: Plays a specific video on successful login.
⚠️ Custom Alerts: Utilizes SweetAlert for custom, stylish pop-up messages.
🔊 Audio Control: Plays background music with an option to pause.
📋 Session Management: Manages user sessions to control video playback.
📱 Responsive Design: Fully responsive, providing a seamless experience on all devices. ## Videos
Timelaspe of CID FUNNY LOGIN CREATION :
CID FUNNY LOGIN Full Video : ## Images

Developed By

MAYANK CHAWDHARI ## Special Thanks to
Kishan Kumar
Vedant ## User Guide

Predefined Credentials

Username: Admin
Password: 12345678

Authentication and Video Playback

Enter Credentials: Input the predefined username and password.
Play Video: On successful login, a full-screen video will play.
Session Management: The user's authentication status is stored, allowing for conditional video playback.
Redirect and Audio Control: After the video ends, the user is redirected back, and any playing audio is stopped.

Changing Authentication for Specific Videos

To play different videos based on authentication:

Edit the Auth Variable: In the JavaScript code, locate the auth variable. Set its value to 1 or 0 based on the condition.

   const auth = 1; // or 0

Specify Video Source: Update the video source paths for different auth values.

   if (auth === 1) {
       fullScreenVideo.src = '2.mp4'; // Path to video for auth = 1
   } else {
       fullScreenVideo.src = '1.mp4'; // Path to video for auth = 0
   }

Implementation

Custom Pop-Up Alerts

SweetAlert: Stylish pop-up messages for user notifications.

  Swal.fire({
      text: 'Please fill out all fields!',
      position: 'top-end',
      timerProgressBar: true,
      showConfirmButton: false,
      width: '250px',
      timer: 3000,
      backdrop: false
  });

Full-Screen Video Playback

HTML Video Element:

  <video id="fullScreenVideo" autoplay controls>
      <source src="path/to/your/video-file.mp4" type="video/mp4">
      Your browser does not support the video tag.
  </video>

JavaScript to Handle Video Playback and Redirection:

  fullScreenVideo.addEventListener('ended', function() {
      stopAllAudio();
      window.location.href = 'login.html';
  });

Responsive Layout: Ensures compatibility across various devices for a seamless user experience.

Enjoy the CID-themed login system and enhance your application's user engagement with iconic CID moments! 🎉🔐

PopupPro JS Module

Mayank Chawdhari — Wed, 18 Dec 2024 12:15:37 +0000

PopupPro - Customizable Popup Library 🚀

Repository: PopupPro 🌟

Description:

PopupPro is a modern, highly customizable JavaScript library designed to enhance user interactions with versatile and stylish popups. It goes beyond traditional popup libraries with its extensive feature set, including flexible configurations, smooth animations, and rich styling options. Whether you need a simple alert or a complex modal with various buttons, PopupPro provides an intuitive way to create engaging and visually appealing popups for your web applications. ✨

Features 🌟

Customizable Options:
- Title & Message: Easily set the title and message of the popup. 📝
- Background Color & Text Color: Fully customizable colors for a tailored look. 🎨
- Size & Styling: Adjustable width, height, and border radius to match your design. 📏
- Close Button: Option to include or exclude the close button. ❌
Animation Support:
- Built-in Animations: Choose from pre-defined animations like bounce, or create custom animations. 🕺
- Animation Duration: Fine-tune animation timing for a smooth experience. ⏳
Button Configuration:
- Multiple Buttons: Support for multiple buttons with customizable text. 🔘
- Button Styling: Style buttons with different colors, borders, and hover effects. 🎨
- Button Actions: Define actions and redirection URLs for each button. 🌐
Responsive and Accessible:
- Responsive Design: Designed to work well on various screen sizes and devices. 📱💻
- Accessibility: Focus management and overlay click handling for improved accessibility. ♿
Error Handling:
- Error Reporting: In-built error handling with console logging and alerts. ⚠️

How PopupPro Stands Out 🌟

1. Extensive Customization: Unlike many popup libraries, PopupPro allows granular control over virtually every aspect of the popup, including animation types, button styles, and overall design. This level of customization ensures that your popups can be tailored to fit seamlessly into any design.

2. Animation Flexibility: While many popup modules offer basic fade-in/fade-out animations, PopupPro supports a variety of animations, including custom animations, to create engaging and dynamic user experiences. You can choose from built-in animations like bounce or define your own.

3. Versatile Button Configuration: PopupPro supports multiple buttons with diverse configurations. Each button can have its own text, style, action, and optional redirection URL, making it possible to handle complex user interactions within a single popup.

4. Focus on Accessibility: PopupPro emphasizes accessibility with features like focus management and overlay click handling, ensuring that your popups are usable by everyone, including users with disabilities.

5. Error Handling and Debugging: The library includes comprehensive error handling with console logging and alert notifications, simplifying the debugging process and improving reliability.

6. Clean and Modern Design: The default styling of PopupPro is modern and clean, providing a professional appearance out of the box. It also offers extensive styling options to match your specific design needs.

7. Responsive Design: PopupPro is designed to adapt to various screen sizes, ensuring that your popups look great on both mobile and desktop devices.

About the Developer 👨‍💻

Developer: Mayank Chawdhari 🌟

Mayank Chawdhari is a dedicated and innovative web developer with a focus on creating elegant and user-friendly web applications. With expertise in JavaScript, CSS, and PHP, Mayank brings a passion for clean code and exceptional user experiences. Known for delivering high-quality solutions and continually exploring new technologies, Mayank is committed to advancing the field of web development and enhancing user interactions. 🚀💡

Usage 📚

1. Include the Library:

Download PopupPro.js from this repository or include it directly in your project. Add the following script tag to your HTML file:

<script src="path/to/PopupPro.js"></script>

2. Basic Popup Example:

Add a button to your HTML and configure the popup with JavaScript:

<button onclick="PopupPro.show({
    title: 'Login Authentication',
    message: 'Wrong password or username, Please try again',
    backgroundColor: '#333',
    textColor: '#fff',
    width: '400px',
    borderRadius: '20px',
    buttons: [
        {
            text: 'Retry',
            style: 'default',
            onClick: function() { console.log('Retry button clicked'); }
        },
        {
            text: 'Cancel',
            style: 'default',
            onClick: function() { console.log('Cancel button clicked'); }
        }
    ]
})">Show Popup</button>

3. Configuration Options:

title: Title of the popup. 🏷️
message: Message text displayed in the popup. 🗨️
backgroundColor: Background color of the popup container. 🎨
textColor: Color of the text. 🖋️
width: Width of the popup container. 📐
height: Height of the popup container (optional). 📏
borderRadius: Border radius for rounded corners. 🧩
closeButton: Boolean value to show or hide the close button. ❌
animationDuration: Duration of the popup animation. ⏳
animation: Animation type (e.g., bounce). 🕺
buttons: Array of button configurations, including text, style, click action, and optional redirection URL. 🔘

4. Handling Button Actions:

Each button can be configured with a text, style, onClick function, and optional redirect URL. The popup will close automatically after the button is clicked unless specified otherwise. 🚪

5. Advanced Usage:

To customize the default settings, use the setOptions method:

PopupPro.setOptions({
    animationDuration: '0.5s',
    backgroundColor: '#f0f0f0',
    buttons: [{ text: 'Confirm', onClick: function() { /* custom action */ } }]
});

6. Error Handling:

If an error occurs, it will be logged to the console and displayed in an alert dialog for quick debugging. 🛠️

Contributing 🤝

Contributions are welcome! Please open issues, submit suggestions, or create pull requests. For detailed guidelines, refer to the CONTRIBUTING.md file in the repository. 📝

License 📜

This project is licensed under the MIT License. See the LICENSE file for more details. 🔓

For further support or questions, please open an issue on the GitHub repository. 💬

3D Web-Calculator with Node.js-Integration

Mayank Chawdhari — Wed, 18 Dec 2024 12:14:21 +0000

Features Added

3D UI Design 🌟:
- Modern, 3D-inspired design with pop-in animation for a visually appealing user interface.
Sound Effects 🔊:
- Click sound effects on button presses for enhanced user interaction experience.
Responsive Layout 📱:
- Flexbox-based layout ensuring the calculator is centered and responsive across different screen sizes.
Dynamic Display 🖥️:
- Real-time update of input values and results in the display field.
Error Handling ⚠️:
- Basic error handling for invalid operations with "Error" display message.
Interactive Buttons 🎨:
- Styled buttons with modern hover effects and animations for an engaging user experience.

To Be Fixed

Arithmetic Operations Not Working Properly 🛠️:
- Ensure proper handling of arithmetic operations and update the script to correctly compute and display results for all valid operations.

Forem: Mayank Chawdhari

YT Poller — Build a fast, cache-first YouTube feed (PHP + JS)

Why YT Poller (short, practical reasons)

Prerequisites

Project overview — structure & responsibilities

How it works (brief)

Key implementation notes (you can copy these into docs or README)

includes/cache.php — atomic JSON writes (safe)

includes/fetcher.php — channel resolution + RSS parsing

api/get_videos.php — the small API gateway

Quick install (5–10 minutes)

Recommended cron: pre-warm cache

What developers always miss when building color schemes (and how to fix it)

Stop treating color like an afterthought — a practical guide to color systems for devs

What most devs miss (quick list)

Concrete rules — how to build a reliable color system

Copy-paste CSS starter (semantic tokens + states)

Quick tips & practical patterns

Small but high-impact gotchas developers skip

Example: focus-visible and accessible error

Conclusion

CamSecure V2 – Advanced Web-Based Surveillance for Modern Security Needs

The Story

Key Features Overview

Why CamSecure V2 is Different

Professional Technology Stack

Designed for Real Security Needs

What Makes CamSecure V2 Unique?

Your Feedback Fuels Development

Inside DebtMatePro V2: Dashboard Page

Clients Dashboard

Overview:

Greeting Section:

Dynamic Greeting & Date/Time:

Metric Cards Section:

Data Visualization:

Interactivity & Feedback:

Real-Time Data & Updates:

Asynchronous Fetching:

Scheduled Time Updates:

Implementation of Folder and Image Upload System with Database Integration

Overview:

Key Features Implemented:

Detailed Explanation of Each Process:

1. User Authentication:

2. Folder Validation:

3. File Upload Validation:

4. Image Conversion:

5. Database Integration:

6. Response Example:

Conclusion:

Web-Scrapper-Python

Overview

Features

Functions Explained

GUI Interface

Usage & Applications

How to Run

Technology Stack

Future Roadmap

Contributing

Author

Building a Real-Time User Analytics Dashboard with Chart.js: Track Active & Inactive Users Dynamically

User Analytics Dashboard

Features

Key Features:

Technologies Used:

Roadmap

Current Features:

Upcoming Features:

Possible Future Enhancements:

Installation

PROJECT-991 ( MASH AI )

Project 991: Mash - Speech-Based AI using Python

Funny-Captcha Web

What It Is

Features 🌟

How to Use

Installation and Setup

Contributing 🤝

`includes/cache.php` — atomic JSON writes (safe)

`includes/fetcher.php` — channel resolution + RSS parsing

`api/get_videos.php` — the small API gateway