https://www.ravgeet.in Full Stack Developer and Technical Content Writer - sharing insights on web development, programming, and technology. Thu, 09 Apr 2026 02:06:51 GMT https://validator.w3.org/feed/docs/rss2.html Nuxt.js Feed Module en 60 Web Development Programming Technology AI https://www.ravgeet.in/blog/building-a-real-time-power-outage-monitor-with-esp32-and-slack https://www.ravgeet.in/blog/building-a-real-time-power-outage-monitor-with-esp32-and-slack Tue, 17 Mar 2026 05:48:17 GMT ESP32 arduino hardware iot https://www.ravgeet.in/blog/debugging-and-stopping-infinite-render-loops-in-react https://www.ravgeet.in/blog/debugging-and-stopping-infinite-render-loops-in-react Mon, 02 Feb 2026 10:30:01 GMT **Renders don’t loop by accident — they loop because state changes on every render.** ## The Fastest Way to Reproduce the Bug When debugging, your first goal is **reproduction**. ### Minimal reproduction checklist Comment out everything except one state value and one reactive hook (effect/watcher). Then add a log in both render and state update. Example: ```javascript function Component() { console.log('render'); const [count, setCount] = useState(0); useEffect(() => { console.log('effect'); setCount(count + 1); }, [count]); } ``` If you see: ```plaintext render → effect → render → effect → ... ``` You’ve confirmed the loop. ## The #1 Root Cause: Unstable References Most infinite loops come from **reference instability**, not logic errors. ### Identity vs Equality ```js {} !== {} [] !== [] () => {} !== () => {} ``` Even if values *look* equal, **their identity changes** on every render. ### Example: Object in dependencies ```javascript function Component({ userId }) { const filters = { active: true, userId }; useEffect(() => { fetchData(filters); }, [filters]); // ❌ new object every render } ``` This results in the effect that runs forever. ## Stabilizing References with Memoization ### Fix with memoization ```javascript const filters = useMemo(() => ({ active: true, userId }), [userId]); ``` Now, it has the same reference, but the effect runs only when `userId` changes. A rule of thumb is that if a variable goes into the dependency array, it must be referentially stable. ## Choosing Correct Dependencies (Not Fewer) A common anti-pattern: ```javascript useEffect(() => { if (status === 'loaded') return; setStatus('loaded'); }, [status]); ``` This effect updates its own dependency once, then converges to a stable state instead of looping forever. ## Linting That Actually Helps Linting is one of the **cheapest ways** to prevent infinite render loops *before* they reach runtime — especially in React and Next.js apps. By specifying the correct React Hooks Rules, you can catch the most common causes of render loops. BY using correct linting rules, you can enable rules in your editor. For example: * `react-hooks/rules-of-hooks` * `react-hooks/exhaustive-deps` This forces correct dependency lists, exposes unstable references early, and prevents stale closures disguised as "fixes". But still, the warnings about missing dependencies are not always true. It makes sense to treat them as **design bugs**, not suggestions. ## Debugging with `why-did-you-render` + LLMs Although we are talking about this step at the very last, if time is crucial to you, then this could be the first resort. Sometimes you *know* a component is re-rendering too much, but you don’t know **what changed**. Multiple states or effects might be responsible for an infinite render loop. This is where `why-did-you-render` becomes extremely powerful — especially when paired with an LLM. ### What `why-did-you-render` does `why-did-you-render` monkey-patches React in development and logs **exact reasons** for re-renders: * Which props changed * Whether the change was by **identity** or **value** * Which hooks triggered the update Instead of guessing, you get concrete evidence. ### Basic setup ```plaintext [why-did-you-render] MyComponent re-rendered because of props changes: props.filters changed prev: { active: true, userId: 1 } next: { active: true, userId: 1 } reason: props.filters !== prev.props.filters ``` This immediately tells you: * The values are equal, but the **reference is not** * Memoization is missing ### Feeding logs to an LLM (Copilot / ChatGPT) Here’s where debugging gets *much* faster. You can save the console logs as a `.log` file and feed them to the LLM agent along with the code context that you feel might be the reason for the infinite rendering. You can use the following prompt: > "I have attached the console logs from why-did-you-render along with the code in which the infinite loop is happening. Can you find what is causing this behaviour and how do I stabilize it?" Because the logs already encode **identity vs equality**, the LLM can: * Identify unstable objects/functions * Suggest correct `useMemo` / `useCallback` placement * Detect unnecessary props drilling * Recommend architectural fixes (lifting state, memo boundaries) This removes the guesswork that usually slows humans down. ### Why this works so well with LLMs LLMs struggle with *implicit runtime behavior*. `why-did-you-render` turns runtime behavior into **explicit text**. Once behavior is textual: > Debugging becomes a reasoning problem — which LLMs are good at. Used together, they form a tight loop: 1. Reproduce the render issue 2. Capture `why-did-you-render` logs 3. Paste logs + code into an LLM 4. Apply fix 5. Verify render stability ## Final Thought Infinite render loops are not a framework flaw — they are a **signal**. They tell you that: * Data flow is unstable * Identity is misunderstood * Or side effects are misplaced Once you respect reference stability and dependency correctness, infinite loops disappear — permanently.]]> React JavaScript Next.js https://www.ravgeet.in/blog/rebuilding-my-static-blog-with-build-time-data-and-instant-search https://www.ravgeet.in/blog/rebuilding-my-static-blog-with-build-time-data-and-instant-search Thu, 29 Jan 2026 18:30:00 GMT **Move all external data fetching to build time, and treat the result as immutable static data.** Instead of fetching blogs at runtime, I introduced a build step that: 1. Fetches blogs from Hashnode 2. Fetches articles from Dev.to 3. Matches the same article across platforms 4. Aggregates view counts 5. Writes everything into a single JSON file At runtime, the site only reads from that JSON. ```plaintext Hashnode + Dev.to ↓ Build-time fetch & normalize ↓ static/blogs.json ↓ Nuxt UI (search, sort, views) ``` This one decision simplified everything else. ## Fetching and aggregating blog data ### Hashnode: canonical content Hashnode remains the source of truth for: * Title, slug, content, tags * Publish date * Cover image * Base view count I fetch all posts using Hashnode’s GraphQL API with pagination handled inside a Node.js script. ### Dev.to: distribution and extra reach Dev.to is where additional readers come from, so ignoring those views felt wrong. Using the Dev.to API (with a personal access token), I fetch all my articles and extract: * `slug` * `canonical_url` * `page_views_count` ### Matching articles across platforms This is the tricky part. Articles are matched using a layered strategy: 1. **Slug match** 2. **Canonical URL match** 3. **Title match** Once matched, the final view count becomes: ```plaintext combinedViews = hashnodeViews + devtoViews ``` The output for each blog includes: * Combined views * Platform-specific views (for debugging) * Dev.to URL (if matched) ## Writing the static data contract All processed data is written to the `static/blogs.json` file. This file is: * Generated at build time * Git-ignored * Treated as read-only by the app It also includes metadata like the last updated time and the total blog count. This JSON file effectively replaces my entire blog API. ## Replacing runtime APIs with static services Previously, `services/blogs.js` made live GraphQL calls. After the refactor: * The service dynamically imports `blogs.json` * `find`, `findOne`, and `search` all operate locally * No Axios * No pagination state * No network failures From the UI’s perspective, nothing changed - but under the hood, everything became predictable. ## Instant search and sorting Once all blog data is local, search becomes trivial. I added: * Client-side text search (title, brief, tags) * Sorting by: * Published date (recent / oldest) * View count (most / least) Because the dataset is small and static: * Search results are instant * No debouncing hacks * No loading states * Sorting is deterministic This dramatically improves discoverability without introducing a search service. ## Trade-offs and lessons learned This approach isn’t perfect: * Build time increases slightly * The JSON file grows over time * It’s not suitable for real-time analytics But for a personal blog, the trade-offs are worth it. The key takeaways from the refactor that made me realize that: * Static doesn’t mean lifeless * Build-time data pipelines are underrated * One clean data contract simplifies UI, UX, and performance If you’re curious, the full implementation lives in the [ravgeet.in repository](https://github.com/ravgeetdhillon/ravgeet-web).]]> Nuxt JavaScript Web Development website https://www.ravgeet.in/blog/my-7-aspirations-as-a-software-engineer-in-2026 https://www.ravgeet.in/blog/my-7-aspirations-as-a-software-engineer-in-2026 Sun, 25 Jan 2026 06:30:37 GMT “How do I implement this requirement?” I want my default question to be: > “How does this decision affect the system six months from now?” That means caring about: * Trade-offs * Maintainability * Operational complexity * Developer experience Good engineers ship features. Great engineers design systems that *survive change*. This shift usually happens when you’re trusted to own a product end‑to‑end, responsible not just for fixing bugs or adding features, but for the long‑term health and evolution of the entire system. ## 3\. Becoming a Strong Communicator, Not Just a Coder By 2026, I want my value to extend beyond code. This includes: * Explaining complex ideas clearly to other engineers * Writing thoughtful PR descriptions and design docs * Adding working evidence in the PRs in the form of videos and screenshots * Helping juniors build correct mental models * Disagreeing respectfully and productively Software engineering is a team sport. Clear thinking is useless if it can’t be communicated. ## 4\. Building Leverage Through Tools and Automation One of my strongest aspirations is to **build leverage**. Instead of solving the same problems repeatedly, I want to: * Automate workflows * Build internal tools * Create systems that scale my impact beyond my own output Leverage is what separates engineers who work *hard* from engineers who work *effectively*. ## 5\. Developing Taste and Judgment Technical skills can be learned. **Judgment takes time.** By 2026, I want to develop a strong engineering taste: * Knowing when *not* to over-engineer * Knowing when technical debt is acceptable * Choosing boring solutions when they’re the right ones This kind of judgment only comes from reflection, mistakes, and intentional learning. ## 6\. Staying Curious Without Burning Out Finally, I aspire to stay curious — but sustainable. Not chasing every new framework, but: * Learning deeply * Picking tools intentionally * Balancing ambition with health Longevity matters. I want a career that compounds, not one that exhausts me early. ## 7\. Launching at Least One Production-grade App By the end of 2026, I want to have launched **at least one app that real users can use** — not just a side project living on GitHub. This aspiration is less about building a startup and more about **closing the loop** as an engineer. From idea to execution to feedback, I want to experience the full lifecycle: * Identifying a real problem (even a small one) * Designing a simple, opinionated solution * Making trade-offs under real constraints * Shipping, maintaining, and iterating based on usage Building a personal app forces a different level of ownership. There is no product manager, no deadline imposed by someone else, and no ambiguity about responsibility. If something is broken, unclear, or poorly designed — it’s on me. More importantly, it sharpens judgment. You quickly learn what *actually* matters to users, which abstractions are worth the cost, and which technical decisions age poorly once real usage begins. ## Closing Thoughts My aspirations for 2026 are less about *where* I work and more about *how* I work and think. If I can be a calmer problem-solver, a clearer thinker, and an engineer who builds systems that last — I’ll consider myself on the right path. I plan to revisit this post at the end of the year to assess how closely my reality aligned with these intentions, honestly.]]> #growth software development personal development engineering leadership https://www.ravgeet.in/blog/realtime-deploy-notifications-in-nextjs-with-toasts https://www.ravgeet.in/blog/realtime-deploy-notifications-in-nextjs-with-toasts Sat, 24 Jan 2026 09:00:00 GMT Use case: Helpful for apps deployed on Vercel where static pages and edge functions make it easy to serve outdated content across sessions. ## The Stack * **Next.js 15** * **React 19** * **React-Bootstrap** * **React-Toastify** * **Vercel Edge Functions** * **Supabase Auth (optional)** ## The Concept When a new build is deployed, a unique timestamp (`NEXT_PUBLIC_BUILD_TIMESTAMP`) is injected into the environment. On the client, we **poll an API endpoint** every few minutes to check if the server's build timestamp has changed. If it has, we notify the user. ## Step-by-Step Implementation ### 1\. Add a build timestamp during build time In `next.config.ts`: ```ts const now = new Date().toISOString(); const nextConfig = { env: { NEXT_PUBLIC_BUILD_TIMESTAMP: now, }, }; export default nextConfig; ``` This ensures every build has a unique timestamp baked in at compile time. ### 2\. Create a `/api/build` route This edge function returns the current server build timestamp: ```ts import { NextRequest } from "next/server"; export const runtime = "edge"; export async function GET(request: NextRequest) { return new Response( JSON.stringify({ build: process.env.NEXT_PUBLIC_BUILD_TIMESTAMP }), { headers: { "Content-Type": "application/json" }, } ); } ``` You can also add authentication here if needed, e.g., for private dashboards. ### 3\. Build a custom hook: `useLiveBuildChecker` This hook polls the `/api/build` endpoint periodically and triggers a toast if it detects a new version: ```ts import { useEffect, useRef } from "react"; import { toast } from "react-toastify"; import axios from "axios"; export function useLiveBuildChecker(intervalMin = 5) { const currentBuild = useRef( process.env.NEXT_PUBLIC_BUILD_TIMESTAMP ); useEffect(() => { const checkForUpdate = async () => { try { const res = await axios.get("/api/build"); const { build } = res.data; if (build && build !== currentBuild.current) { toast.info("A new version of this page is available. Refresh to see the latest changes.", { autoClose: false, position: "bottom-right", }); clearInterval(interval); // stop further polling } } catch (e) { console.error("Update check failed:", e); } }; const interval = setInterval( checkForUpdate, process.env.NODE_ENV === "development" ? 5 * 1000 : intervalMin * 60 * 1000 ); return () => clearInterval(interval); }, [intervalMin]); } ``` ### 4\. Add Toast UI + Hook in Layout Update your app layout to include the `ToastContainer` and run the hook: ```tsx "use client"; import { ReactNode } from "react"; import { ToastContainer } from "react-toastify"; import { useLiveBuildChecker } from "@/hooks/useLiveBuildChecker"; import "react-toastify/dist/ReactToastify.css"; interface Props { children: ReactNode; } export default function AppLayout({ children }: Props) { useLiveBuildChecker(); // default 5-min interval return ( <> {children} ); } ``` ## Result Whenever a new version of your app is deployed, users still active in the browser will get this neat toast: > **"**A new version of this page is available. Refresh to see the latest changes.**"** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769244335784/ba5fed26-3f32-4300-8a6c-53b504f6bd0f.png align="center") ## Why This Works This approach is fully **edge-friendly**, **stateless**, and **easy to scale**. And unlike service worker-based update detection, it works great for **SSR/ISR setups** and **custom dashboards**. ## Bonus Ideas * You can trigger a background update via service workers. * You can track how long users stay on an outdated version. ## Final Thoughts Keeping users on the latest version of your app improves stability, security, and experience. With just a few lines of code, you can achieve this kind of real-time deploy awareness in any Next.js app. If you're building a dashboard, personal tool, or even a SaaS product, this is one of those *delightfully simple yet powerful* improvements.]]> React Next.js SaaS JavaScript product development https://www.ravgeet.in/blog/how-i-built-a-unified-calendar-dashboard-with-nextjs-vercel-edge-functions-and-no-database https://www.ravgeet.in/blog/how-i-built-a-unified-calendar-dashboard-with-nextjs-vercel-edge-functions-and-no-database Tue, 04 Nov 2025 12:58:35 GMT fetch("/api/events").then((res) => res.json()), }); ``` Then we categorize tasks by due date: ```ts const overdue = allTasks.filter(task => isBefore(task.dueDate, today)); const dueToday = allTasks.filter(task => isToday(task.dueDate)); const upcoming = groupByDate(allTasks.filter(...)); const noDueDate = allTasks.filter(task => !task.dueDate); ``` The dashboard also includes a "Today's Work List" feature where I can curate specific tasks from across all platforms. This has become my morning ritual - selecting what I want to focus on for the day creates clarity and intention around my daily goals. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1762259973414/af1f68b6-cb04-4746-b7f7-d9025de8ed09.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1762259962064/435daf88-ef06-490e-bdd4-15633323ec2c.png align="center") ## Deployment I deployed the app to Vercel and created a subdomain via Hostinger by: 1. Creating a subdomain DNS record 2. Adding the domain to Vercel 3. Setting env variables and password via the Vercel dashboard No secrets or tasks are stored — it's 100% live. ## What’s Next? I'm happy with the current version, but I could add the following features in the future: * Month View toggle * Desktop notifications for overdue tasks * Auto-refresh every 10 mins * Tauri or Expo wrapper for mobile ## Final Thoughts This project helped me regain clarity over my weekly tasks. I have pinned this dashboard in my browser and open it every morning to immediately see what matters. It's fast, reliable, and mine. If you're tired of hopping between 5 apps, build something simple that fits your brain.]]> General Programming app development React JavaScript https://www.ravgeet.in/blog/building-a-smart-hardware-inventory-system-that-actually-works https://www.ravgeet.in/blog/building-a-smart-hardware-inventory-system-that-actually-works Sun, 12 Oct 2025 18:30:43 GMT Productivity openai Programming Blogs https://www.ravgeet.in/blog/building-an-ai-powered-function-orchestrator https://www.ravgeet.in/blog/building-an-ai-powered-function-orchestrator Thu, 02 Oct 2025 12:30:19 GMT " } }, { "function": "sum", "args": { "a": "", "b": "" } } ] } ``` **Execution Output:** ```plaintext Step 1: power(4, 2) → 16 Step 2: multiply(2, 5) → 10 Step 3: sum(2, 10) → 12 Step 4: sum(12, 16) → 28 Final Result: 28 ``` ## The Magic: Dynamic Plan Execution This function takes the AI-generated plan and executes it step by step. The key insight is **result chaining**—each step can reference outputs from previous steps using placeholders like ``. The system automatically resolves these references, creating a dynamic pipeline where complex calculations emerge from simple function compositions. ```python def execute_plan(plan): results = {} for idx, step in enumerate(plan["steps"], start=1): func_name = step["function"] args = step["args"] # Replace placeholders with previous results for k, v in args.items(): if isinstance(v, str) and v.startswith("", "")) args[k] = results[step_idx] # Execute function dynamically func = FUNCTIONS[func_name] result = func(**args) results[idx] = result print(f"Step {idx}: {func_name}({args}) → {result}") return results[len(results)] ``` ## Why This Architecture Wins ### **Separation of Concerns** * **You write:** Pure, testable functions * **AI handles:** Complex planning and orchestration * **System manages:** Execution flow and state ### **Human-in-the-Loop Safety** ```python if "error" in plan: print("❌ Error in plan generation:") print(plan["error"]["message"]) sys.exit(1) # Safe exit on planning failures ``` For example, if a user asks *"Divide 10 by 0 and add 5"*, the AI can detect this is mathematically impossible and return an error response like: ```json { "error": { "message": "Cannot divide by zero - this operation is undefined in mathematics" } } ``` This prevents dangerous operations from executing and provides clear feedback to users. ### **Infinite Extensibility** Today, it's math functions: ```python FUNCTIONS = { "sum": sum, "multiply": multiply, "divide": divide } ``` Tomorrow it could be **anything**: ```python FUNCTIONS = { "read_file": read_file, "send_email": send_email, "query_database": query_db, "fetch_weather": weather_api, "analyze_sentiment": sentiment, } ``` ## Real-World Applications ### File Operations *"Take all .txt files in /docs, extract headings, and create a summary document"* **Required Functions:** `list_files()`, `read_file()`, `extract_headings()`, `create_document()`, `write_file()` ### API Orchestration *"Get weather for New York, if it's raining, send a Slack message to #general"* **Required Functions:** `fetch_weather()`, `check_condition()`, `send_slack_message()` ### Data Pipeline *"Load sales.csv, calculate monthly averages, generate a chart, and email it to the team"* **Required Functions:** `load_csv()`, `calculate_average()`, `group_by_month()`, `generate_chart()`, `send_email()` ### MCP Server Integration *"Query our customer database, analyze sentiment of recent feedback, and create a dashboard"* **Required Functions:** `query_database()`, `analyze_sentiment()`, `aggregate_data()`, `create_dashboard()`, `save_report()` ## The Bigger Picture This isn't just a math solver — it's a **mini AI agent framework**. The system provides: 1. **Function Library:** Atomic, reusable components 2. **AI Planner:** Intelligent request interpretation 3. **Execution Engine:** Safe, traceable function orchestration 4. **Human Oversight:** Approval and error handling ## What's Next? 1. **Add more function types** (file ops, API calls) 2. **Implement approval workflows** (show plan before execution) 3. **Add function validation** (type checking, parameter validation) 4. **Build a web interface** (make it accessible to non-developers) 5. **Integrate with MCP servers** (extend to complex business logic) **The bottom line:** Stop hardcoding business logic. Let AI handle the planning, you handle the implementation. The result? More flexible, maintainable, and extensible code that adapts to user intent rather than forcing users to adapt to your interface.]]> AI agentic AI openai Programming Blogs https://www.ravgeet.in/blog/the-ultimate-guide-to-python-logging https://www.ravgeet.in/blog/the-ultimate-guide-to-python-logging Tue, 19 Aug 2025 18:30:29 GMT Python Logs Programming Blogs General Programming Web Development https://www.ravgeet.in/blog/working-with-markdown-in-python https://www.ravgeet.in/blog/working-with-markdown-in-python Thu, 07 Aug 2025 06:30:29 GMT Python Programming Blogs markdown automation https://www.ravgeet.in/blog/handling-undo-functions-in-rich-text-editors https://www.ravgeet.in/blog/handling-undo-functions-in-rich-text-editors Tue, 29 Jul 2025 18:30:16 GMT Web Development React Frontend Development JavaScript https://www.ravgeet.in/blog/how-to-enable-in-app-notifications-using-tinymce-apis https://www.ravgeet.in/blog/how-to-enable-in-app-notifications-using-tinymce-apis Wed, 16 Jul 2025 18:30:44 GMT General Programming React Web Development Text Editors https://www.ravgeet.in/blog/introducing-ravgeek-dev-concepts-in-60-seconds https://www.ravgeet.in/blog/introducing-ravgeek-dev-concepts-in-60-seconds Wed, 09 Jul 2025 12:32:11 GMT **Make technical concepts simple, fun, and fast.** Whether it’s understanding what a REST API is, how Git works, or when to use GraphQL, each video is designed to explain core ideas in **under 60 seconds** — in a way that’s accessible to beginners and still fun for experienced devs. Here’s a video in which I explain - “What is OAuth”: %[https://www.youtube.com/watch?v=zZKV-w31W7A] You’ll see: * ⚡️ Rapid, to-the-point explanations * 🎙️ Conversational storytelling (think devs talking over chai) * 🎨 Animations, avatars, and a touch of humor This has been a passion project for me — combining my love for **coding, storytelling, and design** — and I’m excited to finally share it with the world. 👉 Check out the channel: [youtube.com/@ravgeek](https://www.youtube.com/@ravgeek) 💬 And if you like what you see, hit that subscribe button and let me know what topic you'd like me to cover next. Let’s learn, laugh, and geek out together.]]> AI personal development youtube content creation https://www.ravgeet.in/blog/building-a-smart-session-tracker-for-your-macs-menu-bar https://www.ravgeet.in/blog/building-a-smart-session-tracker-for-your-macs-menu-bar Wed, 09 Jul 2025 06:30:34 GMT /dev/null || echo "$CURRENT_TIME") # If session file doesn't exist or is older than boot time, create new session if [ ! -f "$SESSION_FILE" ]; then SESSION_START="$CURRENT_TIME" SESSION_FILE_NEEDS_UPDATE=true else STORED_TIME=$(cat "$SESSION_FILE") # Check if the stored time is valid (numeric and reasonable) if ! [[ "$STORED_TIME" =~ ^[0-9]+$ ]] || [ "$STORED_TIME" -lt 1000000000 ] || [ "$STORED_TIME" -gt $((CURRENT_TIME + 86400)) ]; then # Invalid timestamp, start new session SESSION_START="$CURRENT_TIME" SESSION_FILE_NEEDS_UPDATE=true elif [ "$STORED_TIME" -lt "$BOOT_TIME" ]; then # Session file is from before last boot, start new session SESSION_START="$CURRENT_TIME" SESSION_FILE_NEEDS_UPDATE=true else # Check if we've been asleep (gap in timestamps) LAST_CHECK_FILE="/tmp/last_session_check" if [ -f "$LAST_CHECK_FILE" ]; then LAST_CHECK=$(cat "$LAST_CHECK_FILE") TIME_GAP=$((CURRENT_TIME - LAST_CHECK)) # If gap is more than 2 minutes, assume we were asleep and start new session if [ "$TIME_GAP" -gt 120 ]; then SESSION_START="$CURRENT_TIME" SESSION_FILE_NEEDS_UPDATE=true else SESSION_START="$STORED_TIME" SESSION_FILE_NEEDS_UPDATE=false fi else SESSION_START="$STORED_TIME" SESSION_FILE_NEEDS_UPDATE=false fi fi fi # Track daily activity - check if we need to log previous session before updating files LAST_CHECK_FILE="/tmp/last_session_check" NEW_SESSION_STARTED=false # Check if we're about to start a new session and need to log the previous one if [ -f "$LAST_CHECK_FILE" ] && [ -f "$SESSION_FILE" ]; then LAST_CHECK=$(cat "$LAST_CHECK_FILE") PREV_SESSION_START=$(cat "$SESSION_FILE") TIME_GAP=$((CURRENT_TIME - LAST_CHECK)) # If gap detected and we have a valid previous session, log it before starting new session if [ "$TIME_GAP" -gt 120 ] && [ "$PREV_SESSION_START" -lt "$LAST_CHECK" ]; then PREV_SESSION_DURATION=$((LAST_CHECK - PREV_SESSION_START)) # Only log sessions longer than 1 minute if [ "$PREV_SESSION_DURATION" -gt 60 ]; then echo "$PREV_SESSION_START $LAST_CHECK $PREV_SESSION_DURATION" >> "$DAILY_LOG_FILE" fi NEW_SESSION_STARTED=true fi elif [ ! -f "$LAST_CHECK_FILE" ] && [ -f "$SESSION_FILE" ]; then # First run after boot - check if we should log a session from before reboot PREV_SESSION_START=$(cat "$SESSION_FILE") if [ "$PREV_SESSION_START" -lt "$BOOT_TIME" ]; then # Session was from before boot, try to estimate when it ended (use boot time) PREV_SESSION_DURATION=$((BOOT_TIME - PREV_SESSION_START)) if [ "$PREV_SESSION_DURATION" -gt 60 ] && [ "$PREV_SESSION_DURATION" -lt 86400 ]; then # Only log if duration seems reasonable (between 1 minute and 24 hours) echo "$PREV_SESSION_START $BOOT_TIME $PREV_SESSION_DURATION" >> "$DAILY_LOG_FILE" fi fi fi # Update session file if we're starting a new session if [ "$SESSION_FILE_NEEDS_UPDATE" = true ]; then echo "$SESSION_START" > "$SESSION_FILE" # Reset notification tracking for new session rm -f "/tmp/last_rest_notification" fi # Update the last check time echo "$CURRENT_TIME" > "/tmp/last_session_check" # Calculate the session duration in seconds SESSION_DURATION=$((CURRENT_TIME - SESSION_START)) # Check if we need to show a rest notification (every hour) NOTIFICATION_FILE="/tmp/last_rest_notification" if [ "$SESSION_DURATION" -gt 3600 ]; then # Check if we've already shown a notification for this hour CURRENT_HOUR=$((SESSION_DURATION / 3600)) if [ -f "$NOTIFICATION_FILE" ]; then LAST_NOTIFICATION_HOUR=$(cat "$NOTIFICATION_FILE") else LAST_NOTIFICATION_HOUR=0 fi # Show notification if we haven't shown one for this hour yet if [ "$CURRENT_HOUR" -gt "$LAST_NOTIFICATION_HOUR" ]; then # Check if terminal-notifier is available if command -v terminal-notifier >/dev/null 2>&1; then terminal-notifier -title "Session Tracker" -subtitle "Time for a rest" -message "You've been working for ${CURRENT_HOUR} hour(s). Consider taking a break!" -sound funk -group "session-tracker" else # Fallback to osascript if terminal-notifier is not available osascript -e "display notification \"You've been working for ${CURRENT_HOUR} hour(s). Consider taking a break!\" with title \"Session Tracker\" subtitle \"Time for a rest\" sound name \"Glass\"" fi echo "$CURRENT_HOUR" > "$NOTIFICATION_FILE" fi fi # Calculate total daily activity TOTAL_TODAY=0 if [ -f "$DAILY_LOG_FILE" ]; then while read -r start_time end_time duration; do if [ -n "$duration" ] && [ "$duration" -gt 0 ]; then TOTAL_TODAY=$((TOTAL_TODAY + duration)) fi done < "$DAILY_LOG_FILE" fi # Add current session to today's total TOTAL_TODAY=$((TOTAL_TODAY + SESSION_DURATION)) # Convert duration to human-readable format DURATION_HOURS=$((SESSION_DURATION / 3600)) DURATION_MINUTES=$(( (SESSION_DURATION % 3600) / 60 )) DURATION_SECONDS=$((SESSION_DURATION % 60)) # Convert total daily time to human-readable format TOTAL_HOURS=$((TOTAL_TODAY / 3600)) TOTAL_MINUTES=$(( (TOTAL_TODAY % 3600) / 60 )) # Format the session output if [ $DURATION_HOURS -gt 0 ]; then DURATION_STRING="${DURATION_HOURS}h ${DURATION_MINUTES}m" else DURATION_STRING="${DURATION_MINUTES}m" fi # Format the daily total output if [ $TOTAL_HOURS -gt 0 ]; then TOTAL_STRING="${TOTAL_HOURS}h ${TOTAL_MINUTES}m" else TOTAL_STRING="${TOTAL_MINUTES}m" fi # Output the session duration and daily total # Add warning indicator if session is over 1 hour if [ "$SESSION_DURATION" -gt 3600 ]; then echo "⚠️ $DURATION_STRING | size=10" else echo "🕒 $DURATION_STRING | size=10" fi echo "---" echo "📊 Current Session: $DURATION_STRING" echo "📅 Today Total: $TOTAL_STRING" # Show session breakdown if there are previous sessions if [ -f "$DAILY_LOG_FILE" ] && [ -s "$DAILY_LOG_FILE" ]; then SESSION_COUNT=$(wc -l < "$DAILY_LOG_FILE") echo "🔢 Sessions Today: $((SESSION_COUNT + 1))" fi # Add rest reminder in dropdown if session is over 1 hour if [ "$SESSION_DURATION" -gt 3600 ]; then echo "---" echo "⏰ Take a break! You've been working for over an hour | color=orange" fi ``` 4. **Make it executable**: ```bash chmod +x "~/Library/Application Support/xbar/plugins/current-session.1m.sh" ``` 5. **Start xbar and refresh**: * Launch xbar from your Applications folder * Click the xbar icon in your menu bar and select "Refresh all" ## Understanding the Code: A Gentle Journey Through Bash Land Let's break down what this script does, step by step: ### The Setup Phase ```bash SESSION_FILE="/tmp/current_session_start" DAILY_LOG_FILE="/tmp/daily_activity_$(date +%Y%m%d)" ``` We store our session data in temporary files. The daily log file includes the date, so each day gets its own log file. It's like having a new diary page for each day! ### The Detective Work ```bash UPTIME_SECONDS=$(sysctl -n kern.boottime | awk '{print $4}' | sed 's/,//') BOOT_TIME=$(date -r "$UPTIME_SECONDS" +%s 2>/dev/null || echo "$CURRENT_TIME") ``` This is where we get all CSI about when your Mac was last booted. We use this to figure out if your session file is from before a reboot. ### The Smart Session Logic The script has several scenarios it handles: 1. **First run ever**: Creates a new session 2. **File exists but invalid**: Starts fresh (protects against corrupted data) 3. **File is from before reboot**: Starts a new session post-reboot 4. **Checking for sleep gaps**: If there's a gap > 2 minutes, it assumes you were away ### The Notification System ```bash if [ "$SESSION_DURATION" -gt 3600 ]; then # Time for a break notification logic fi ``` After an hour of work, the script gently reminds you to take a break. It's like having a caring friend who's also really good at math. ## What You'll See in Action Once everything is running, you'll see: * **🕒 45m** in your menu bar (showing your current session time) * **⚠️ 1h 23m** when you've been working for over an hour (subtle hint to take a break) * A dropdown menu showing: * 📊 Current Session: 1h 23m * 📅 Today Total: 3h 45m * 🔢 Sessions Today: 4 * ⏰ Take a break! reminder (if you've been working too long) ## The Beauty of Simplicity What I love about this solution is that it's: * **Lightweight**: Uses minimal system resources * **Unobtrusive**: Sits quietly in your menu bar * **Smart**: Handles edge cases you didn't even think about * **Customizable**: Easy to modify for your specific needs ## Customization Ideas Want to make it your own? Here are some ideas: 1. **Change the break reminder interval**: Modify the `3600` seconds (1 hour) to whatever works for you 2. **Add different notification sounds**: Change the `sound funk` to `sound glass`, `sound ping`, etc. 3. **Modify the time gap detection**: Change the `120` seconds gap threshold 4. **Add more detailed logging**: Include timestamps, session names, or project tags ## The Philosophical Side: Why This Matters In our always-on world, this simple script serves a deeper purpose. It's not just about tracking time – it's about being mindful of how we spend our most precious resource. By making our work patterns visible, we can: * **Recognize unhealthy patterns** (like those 4-hour coding binges) * **Celebrate productivity** (look at all those completed sessions!) * **Build better habits** (those break reminders really do help) * **Understand our rhythms** (maybe you're most productive in the morning?) ## Wrapping Up Building this session tracker was a fun exercise in bash scripting and practical problem-solving. It started as a simple "how long have I been working?" question and evolved into a surprisingly sophisticated time-tracking system. The best part? It's taught me to actually take breaks. Turns out, when your computer politely suggests you step away from the screen, you're more likely to listen than when your back is screaming at you. So go ahead, give it a try! Your future self (and your neck) will thank you. And who knows? You might just discover that you're either more or less productive than you thought. Either way, at least you'll know for sure.]]> Productivity automation Bash Time management https://www.ravgeet.in/blog/building-a-real-time-cpu-monitor-for-macos-with-xbar https://www.ravgeet.in/blog/building-a-real-time-cpu-monitor-for-macos-with-xbar Fri, 04 Jul 2025 08:47:47 GMT "$TEMP_FILE" # Read from the temporary file while IFS= read -r line; do if [ -z "$line" ]; then continue fi cpu=$(echo "$line" | awk '{print $2}') pid=$(echo "$line" | awk '{print $1}') command=$(echo "$line" | cut -d ' ' -f3-) # Skip if CPU is not a valid number or is 0.0 if ! echo "$cpu" | grep -q '^[0-9]*\.[0-9]*$' || [ "$cpu" = "0.0" ]; then continue fi is_high=$(echo "$cpu > $CPU_THRESHOLD" | bc) if [ "$is_high" -eq 1 ]; then HIGH_CPU_FOUND=1 echo "---" echo "⚠️ High CPU ($cpu%)" echo "PID: $pid" # Get process name from command process_name=$(echo "$command" | awk '{print $1}' | xargs basename 2>/dev/null || echo "Unknown") echo "📱 Process: $process_name" # Show truncated command echo "💻 ${command:0:60}..." notification_title="From CPU Monitor" # Special handling for different process types if echo "$command" | grep -q ".vscode/extensions"; then ext=$(echo "$command" | grep -o "/Users/[^ ]*\.vscode/extensions/[^ ]*") echo "🧩 VS Code Extension: $(basename "$ext")" notification_message="High CPU: ${cpu}% by VS Code extension $(basename "$ext")" elif echo "$command" | grep -q "Code Helper"; then echo "🔧 VS Code Helper Process" notification_message="High CPU: ${cpu}% by VS Code Helper" else notification_message="High CPU: ${cpu}% by $process_name" fi # Desktop notification (macOS only) - with error handling if command -v osascript >/dev/null 2>&1; then osascript -e "display notification \"$notification_message\" with title \"$notification_title\"" 2>/dev/null || { # Fallback: try using terminal-notifier if available if command -v terminal-notifier >/dev/null 2>&1; then terminal-notifier -title "$notification_title" -message "$notification_message" 2>/dev/null fi } fi fi done < "$TEMP_FILE" # Clean up temporary file rm -f "$TEMP_FILE" if [ "$HIGH_CPU_FOUND" -eq 0 ]; then echo "---" echo "✅ All processes under ${CPU_THRESHOLD}%" fi ``` ## Key Technical Decisions ### 1\. Avoiding Subshell Issues Initially, we faced a common bash pitfall where notifications wouldn't work because the `while` loop was running in a subshell: ```bash # This doesn't work for GUI operations ps ... | while read line; do osascript -e "display notification ..." done ``` **Solution**: We use a temporary file approach to avoid the subshell: ```bash TEMP_FILE=$(mktemp) ps -Ao pid,%cpu,command > "$TEMP_FILE" while read line; do # Process data and send notifications done < "$TEMP_FILE" rm -f "$TEMP_FILE" ``` ### 2\. Robust CPU Validation We validate CPU values to ensure we're working with actual numeric data: ```bash if ! echo "$cpu" | grep -q '^[0-9]*\.[0-9]*$' || [ "$cpu" = "0.0" ]; then continue fi ``` This prevents errors from malformed process data. ### 3\. Smart Process Classification The script intelligently categorizes processes: * **VS Code Extensions**: Detected by `.vscode/extensions` in the command path * **VS Code Helpers**: Identified by "Code Helper" in the command * **General Processes**: Everything else gets generic handling ### 4\. Notification Reliability We implement a two-tier notification system: ```bash osascript -e "display notification ..." 2>/dev/null || { # Fallback to terminal-notifier if available if command -v terminal-notifier >/dev/null 2>&1; then terminal-notifier -title "..." -message "..." fi } ``` ## Installation and Setup 1. **Install xbar** if you haven't already: ```bash brew install --cask xbar ``` 2. **Create the plugin directory**: ```bash mkdir -p "$HOME/Library/Application Support/xbar/plugins" ``` 3. **Save the script** as [`vscode-ext-monitor.5m.sh`](http://vscode-ext-monitor.5m.sh) in the plugins directory 4. **Make it executable**: ```bash chmod +x "$HOME/Library/Application Support/xbar/plugins/vscode-ext-monitor.5m.sh" ``` 5. **Launch xbar** and refresh to see your new CPU monitor ## Customization Options ### Adjust the CPU Threshold Change the threshold by modifying this line: ```bash CPU_THRESHOLD=80.0 # Change to your preferred percentage ``` ### Modify the Update Frequency Rename the file to change how often it runs: * `.`[`1m.sh`](http://1m.sh) = Every minute * `.`[`30s.sh`](http://30s.sh) = Every 30 seconds * `.`[`10m.sh`](http://10m.sh) = Every 10 minutes ### Add More Process Types Extend the classification logic: ```bash elif echo "$command" | grep -q "chrome"; then echo "🌐 Chrome Process" notification_message="High CPU: ${cpu}% by Chrome" ``` ## Troubleshooting ### Notifications Not Appearing? 1. **Check System Preferences**: Ensure notifications are enabled for Terminal in System Preferences > Notifications & Focus 2. **Test manually**: ```bash osascript -e 'display notification "Test" with title "Test"' ``` 3. **Install terminal-notifier as backup**: ```bash brew install terminal-notifier ``` ### Script Not Running? 1. **Verify file permissions**: ```bash ls -la "$HOME/Library/Application Support/xbar/plugins/" ``` 2. **Check xbar is running** and refresh the menu 3. **Test the script manually**: ```bash cd "$HOME/Library/Application Support/xbar/plugins/" ./vscode-ext-monitor.5m.sh ``` ## What's Next? This CPU monitor provides a solid foundation that you can extend further: * **Memory Monitoring**: Add RAM usage alerts * **Network Activity**: Monitor processes with high network usage * **Historical Tracking**: Log high CPU events to a file * **Kill Process Feature**: Add menu options to terminate problematic processes * **Custom Thresholds**: Different thresholds for different process types ## Conclusion Building system monitoring tools doesn't require complex frameworks or heavy applications. With a simple bash script and xbar, we've created a lightweight, effective CPU monitor that: * Provides real-time visibility into system performance * Sends proactive notifications before problems escalate * Offers detailed process information for quick troubleshooting * Runs efficiently with minimal system overhead The beauty of this approach is its simplicity and customizability. You have full control over the monitoring logic, notification behavior, and display format. Plus, since it's just a bash script, you can easily modify it to suit your specific needs. *This CPU monitor has been tested on macOS Sequoia and later. The script should work on earlier versions but may require minor adjustments for notification handling.*]]> Productivity General Programming macOS https://www.ravgeet.in/blog/automate-github-stats-reporting-with-scheduled-pipelines https://www.ravgeet.in/blog/automate-github-stats-reporting-with-scheduled-pipelines Fri, 04 Jul 2025 06:30:10 GMT General Programming JavaScript Web Development automation https://www.ravgeet.in/blog/getting-the-most-out-of-github-copilot-chat-in-vs-code https://www.ravgeet.in/blog/getting-the-most-out-of-github-copilot-chat-in-vs-code Mon, 30 Jun 2025 18:30:30 GMT ✅ Tip: You can highlight a code block and then open Copilot Chat to get smarter, context-aware answers. ## How to Enable Copilot Chat in VS Code 1. Install the GitHub Copilot Chat extension from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) 2. Make sure you’re signed in to GitHub with an active Copilot plan 3. Open the Copilot Chat panel or use `Cmd/Ctrl + I` to start inline chat 4. Highlight code and right-click → **Ask Copilot** ## Final Thoughts Copilot Chat takes the promise of AI-assisted development to the next level. It’s not just about writing code faster — it’s about **thinking through problems, debugging more efficiently, and learning as you go**, all inside your editor.]]> General Programming Productivity Developer AI copilot https://www.ravgeet.in/blog/generating-dynamic-sales-quotes-with-dropbox-sign https://www.ravgeet.in/blog/generating-dynamic-sales-quotes-with-dropbox-sign Thu, 26 Jun 2025 06:30:33 GMT Web Development JavaScript General Programming https://www.ravgeet.in/blog/improve-table-speed-in-react-by-using-web-workers-for-filters https://www.ravgeet.in/blog/improve-table-speed-in-react-by-using-web-workers-for-filters Thu, 19 Jun 2025 15:33:56 GMT TL;DR: I implemented a **Web Worker–powered filtering system** in a React data table component to eliminate UI lag and improve responsiveness when working with large datasets. Here's how and why. ## The Problem: Filtering Slows the UI Our application relies heavily on a custom `` component that supports: * Nested (hierarchical) rows * Column-based filtering * Custom filters * Server-side pagination As datasets grew into the thousands of rows, filtering became noticeably sluggish. The culprit? All filtering logic ran on the **main UI thread**, blocking React’s render cycle and causing the interface to freeze temporarily. ## Goal Move heavy data-filtering logic off the main thread using **Web Workers**, without breaking existing functionality or developer experience. ## The Solution: Asynchronous Filtering with Web Workers We built a pipeline that: 1. **Serializes hierarchical data** into a flat structure 2. Sends that data to a **dedicated Web Worker** 3. Worker filters based on column & custom filters 4. Sends back the result 5. Updates the UI reactively and shows a loader while waiting ## Implementation Breakdown ### 1\. Set up `search.worker.js` We created a Web Worker dynamically using a blob: ```ts const searchWorker = () => { onmessage = async (e) => { importScripts("https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"); importScripts("https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/dayjs.min.js"); // ... logic for deep filtering, date handling, and custom filters ... postMessage({ success, result }); }; }; let code = searchWorker.toString(); code = code.substring(code.indexOf("{") + 1, code.lastIndexOf("}")); const blob = new Blob([code], { type: "application/javascript" }); const workerScript = URL.createObjectURL(blob); export default workerScript; ``` ### 2\. New Utility Function A new async utility offloads data filtering: ```ts const asyncFilterDataWithColumnAndCustomFilters = async ( data, columns, columnFilters, customFilters, setData, setIsSearching, ) => { const searchWorker = new window.Worker(searchWorkerScript); const convertedData = data.map(row => ({ id: row.id, values: columns.map(col => col.selector?.(row) ?? row[col.id]), items: (row.items || []).map(item => ({ id: item.id, values: columns.map(col => col.selector?.(item) ?? item[col.id]), })), })); searchWorker.postMessage({ data, convertedData, columns, columnFilters, customFilters }); searchWorker.onmessage = (e) => { setData(e.data.result); setIsSearching(false); searchWorker.terminate(); }; searchWorker.onerror = (err) => { console.error("Worker error", err.message); setIsSearching(false); searchWorker.terminate(); }; }; ``` ### 3\. Hook Update We extended the existing table filter hook: ```ts export const useFilterDataWithColumnAndCustomFilters = ({ data, columns, columnFilters, customFilters, setIsSearching, }) => { const [filteredData, setFilteredData] = useState({ data: [], diff: 0 }); useEffect(() => { asyncFilterDataWithColumnAndCustomFilters( data, columns, columnFilters, customFilters, setIsSearching, setFilteredData ); }, [data, columnFilters, customFilters]); return { filteredData: filteredData.data, diff: filteredData.diff }; }; ``` ### 4\. Loading Indicator We updated the table’s loading prop: ```tsx ``` ## Bonus: What the Worker Can Handle * `BOOLEAN`, `DATE`, `DATETIME`, and `NUMBER` types * Interval filters (e.g. date ranges) * Null checks: `eq: "null"` and `ne: "null"` * Multi-select picklists * Filters nested rows **and** their parents ## Benefits * **UI never freezes** during filtering * **Filters run faster**, even on large datasets * **Code is modular** and easy to maintain * **Great user experience** with real-time filtering feedback ## Key Takeaways * Use **Web Workers** to offload expensive tasks in the browser. * Normalize complex data structures before sending to the worker. * Gracefully handle worker errors and show meaningful UI states. * It's surprisingly easy to integrate with React. ## Final Thoughts Offloading filtering to a Web Worker has been one of the most impactful performance wins for our frontend in recent times. If you're working with large tables or slow filters, **give workers a shot** — your users (and frame rate) will thank you. **Want help integrating something similar into your React app?** Feel free to [connect with me](https://ravgeet.in/contact). *I wrote this blog post for my company,* [*CloudAnswers*](https://cloudanswers.com/)*.*]]> General Programming Web Development performance React JavaScript https://www.ravgeet.in/blog/how-i-use-github-copilot-and-chatgpt-together-as-a-frontend-developer https://www.ravgeet.in/blog/how-i-use-github-copilot-and-chatgpt-together-as-a-frontend-developer Mon, 16 Jun 2025 08:09:14 GMT "Create a responsive navbar with logo, links, and hamburger menu using React and Tailwind." ChatGPT usually gives me a great starting point with code, accessibility notes, and even file structure suggestions. ### Step 2: I Paste That Into VS Code and Let Copilot Take Over As I begin typing: ```js function Navbar() { return ( ``` Copilot fills in: ```js ``` It handles the obvious stuff—repetitive patterns, responsive classes, even conditional rendering—while I focus on logic. ## How I Use Them Together Every Day ### 1\. **Rapid Prototyping** * ChatGPT helps me quickly draft UI layouts. * Copilot finishes JSX, props, and common logic on the fly. ### 2\. **Debugging** * When I hit an error, I paste it into ChatGPT and ask: > "What’s wrong with this error?" * Then I fix the bug in VS Code with Copilot suggesting inline changes. ### 3\. **Writing Tests** * I ask ChatGPT to generate tests for my React components. * I then use Copilot to autocomplete the repetitive test setup or assertions. ### 4\. **Refactoring** * I send messy functions to ChatGPT to break them down and improve naming. * Back in VS Code, Copilot speeds up implementing the improved version. ### 5\. **Explaining My Code** * When I want to document my code or explain it to my team, I ask ChatGPT: > "Explain this hook and why the useEffect dependency array matters." ## My Favorite Productivity Tips ### Tip 1: Comment-Driven Prompts for Copilot ```js // Create a responsive card component with image and title ``` Copilot often gives me a complete JSX block instantly. ### Tip 2: ChatGPT for Documentation I paste a tricky function into ChatGPT and say: > "Write a JSDoc for this and suggest better variable names." ### Tip 3: Code Reviews Get Easier I now use GitHub Copilot to explain my PRs or generate commit messages. Copilot helps me fix minor issues before I even push. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1750060967446/43b291bb-9d50-484b-9c46-cfc346eb6f86.png align="center") ## Bonus Tools I Like | Tool | Why I Use It | | --- | --- | | **VS Code + Copilot** | For live code suggestions | | **ChatGPT Web + API** | For deeper analysis, ideas, and code generation | | **ChatGPT Plugins** | For testing or GitHub integrations | ## My Final Thoughts Using both GitHub Copilot and ChatGPT hasn’t just saved me time—it’s **leveled up how I think and build**. Copilot gives me instant coding speed in the editor, while ChatGPT helps me think clearly, plan ahead, and document better. Whether I’m building a component, squashing bugs, or writing docs, these two tools make the process smoother. So if you're a frontend dev like me, give this duo a try. You might never want to code alone again. ✨]]> webdev github copilot chatgpt React Productivity https://www.ravgeet.in/blog/how-to-build-an-internal-company-wiki-from-scratch https://www.ravgeet.in/blog/how-to-build-an-internal-company-wiki-from-scratch Thu, 19 Jan 2023 07:39:29 GMT General Programming cms Frontend Development Next https://www.ravgeet.in/blog/frontend-monitoring-a-complete-guide https://www.ravgeet.in/blog/frontend-monitoring-a-complete-guide Fri, 02 Dec 2022 12:20:26 GMT Frontend Development Web Development Programming Blogs https://www.ravgeet.in/blog/build-a-task-assignment-app-with-twilio-whatsapp-strapi-and-nextjs https://www.ravgeet.in/blog/build-a-task-assignment-app-with-twilio-whatsapp-strapi-and-nextjs Wed, 23 Nov 2022 04:43:54 GMT Web Development twilio Next.js Strapi Tutorial https://www.ravgeet.in/blog/how-to-setup-and-customize-tailwind-in-nuxtjs https://www.ravgeet.in/blog/how-to-setup-and-customize-tailwind-in-nuxtjs Tue, 15 Nov 2022 04:50:09 GMT Frontend Development Nuxt Tailwind CSS Web Development https://www.ravgeet.in/blog/rest-vs-soap-why-we-recommend-rest-apis-for-a2p-messaging https://www.ravgeet.in/blog/rest-vs-soap-why-we-recommend-rest-apis-for-a2p-messaging Sun, 06 Nov 2022 12:40:47 GMT APIs backend REST API https://www.ravgeet.in/blog/authoring-npm-packages-with-monorepos https://www.ravgeet.in/blog/authoring-npm-packages-with-monorepos Wed, 12 Oct 2022 05:42:16 GMT General Programming JavaScript npm development project management https://www.ravgeet.in/blog/booking-appointments-with-twilio-notion-and-fastapi https://www.ravgeet.in/blog/booking-appointments-with-twilio-notion-and-fastapi Sat, 20 Aug 2022 05:37:16 GMT General Programming notion twilio Python https://www.ravgeet.in/blog/using-python-scripts-to-take-screenshots https://www.ravgeet.in/blog/using-python-scripts-to-take-screenshots Mon, 15 Aug 2022 08:19:00 GMT General Programming Python 3 image processing automation https://www.ravgeet.in/blog/logging-in-python https://www.ravgeet.in/blog/logging-in-python Wed, 10 Aug 2022 07:21:01 GMT General Programming Python logging https://www.ravgeet.in/blog/build-client-payment-reminders-using-twilio-notion-and-python https://www.ravgeet.in/blog/build-client-payment-reminders-using-twilio-notion-and-python Thu, 04 Aug 2022 12:45:57 GMT General Programming automation Python twilio notion https://www.ravgeet.in/blog/build-and-deploy-a-nuxt3-app-to-netlify https://www.ravgeet.in/blog/build-and-deploy-a-nuxt3-app-to-netlify Thu, 07 Jul 2022 06:30:00 GMT Nuxt JavaScript Netlify automation ci-cd https://www.ravgeet.in/blog/what-is-end-to-end-testing https://www.ravgeet.in/blog/what-is-end-to-end-testing Sat, 02 Jul 2022 06:27:46 GMT Testing ci-cd automation https://www.ravgeet.in/blog/handling-undoredo-functions-in-rich-text-editors https://www.ravgeet.in/blog/handling-undoredo-functions-in-rich-text-editors Mon, 06 Jun 2022 06:30:00 GMT Text Editors JavaScript CSS HTML5 General Programming https://www.ravgeet.in/blog/the-complete-list-of-oauth-2-grants https://www.ravgeet.in/blog/the-complete-list-of-oauth-2-grants Tue, 31 May 2022 10:25:07 GMT APIs authentication Auth0 authorization https://www.ravgeet.in/blog/creating-golang-cron-jobs https://www.ravgeet.in/blog/creating-golang-cron-jobs Mon, 23 May 2022 09:07:17 GMT Go Language automation https://www.ravgeet.in/blog/handling-pagination-in-strapi-v4-with-sveltekit https://www.ravgeet.in/blog/handling-pagination-in-strapi-v4-with-sveltekit Thu, 19 May 2022 06:58:54 GMT Svelte Strapi UI Frontend Development https://www.ravgeet.in/blog/using-custom-controllers-in-strapi-to-power-a-nextjs-app https://www.ravgeet.in/blog/using-custom-controllers-in-strapi-to-power-a-nextjs-app Fri, 13 May 2022 09:53:59 GMT JavaScript React Next.js Strapi General Programming https://www.ravgeet.in/blog/build-a-chrome-extension-in-nextjs-and-notion-api https://www.ravgeet.in/blog/build-a-chrome-extension-in-nextjs-and-notion-api Fri, 15 Apr 2022 04:12:16 GMT General Programming chrome extension Next.js APIs React https://www.ravgeet.in/blog/building-a-realtime-chat-app-with-react-laravel-and-websockets https://www.ravgeet.in/blog/building-a-realtime-chat-app-with-react-laravel-and-websockets Fri, 08 Apr 2022 08:34:15 GMT General Programming React Laravel messaging Tutorial https://www.ravgeet.in/blog/starting-my-first-full-time-role-as-a-software-engineer https://www.ravgeet.in/blog/starting-my-first-full-time-role-as-a-software-engineer Mon, 07 Feb 2022 12:01:47 GMT Learning Journey jobs Career Software Engineering https://www.ravgeet.in/blog/implementing-audio-in-a-podcast-app-with-strapi https://www.ravgeet.in/blog/implementing-audio-in-a-podcast-app-with-strapi Tue, 25 Jan 2022 10:00:00 GMT headless cms Nuxt Vue.js JavaScript https://www.ravgeet.in/blog/handling-previews-in-a-headless-architecture-strapi-and-nextjs https://www.ravgeet.in/blog/handling-previews-in-a-headless-architecture-strapi-and-nextjs Thu, 06 Jan 2022 09:57:26 GMT cms Next.js JavaScript https://www.ravgeet.in/blog/creating-an-app-information-component-in-nuxt https://www.ravgeet.in/blog/creating-an-app-information-component-in-nuxt Tue, 21 Dec 2021 06:08:21 GMT JAMstack Nuxt Vue.js JavaScript https://www.ravgeet.in/blog/react-vs-vue-what-is-the-best-framework-for-your-project https://www.ravgeet.in/blog/react-vs-vue-what-is-the-best-framework-for-your-project Thu, 16 Dec 2021 06:32:22 GMT JavaScript React Vue.js https://www.ravgeet.in/blog/creating-a-balance-reminder-with-vonage-account-api-and-google-apps https://www.ravgeet.in/blog/creating-a-balance-reminder-with-vonage-account-api-and-google-apps Wed, 08 Dec 2021 10:50:02 GMT automation JavaScript https://www.ravgeet.in/blog/build-a-news-aggregator-app-using-strapi-and-nuxtjs https://www.ravgeet.in/blog/build-a-news-aggregator-app-using-strapi-and-nuxtjs Sun, 05 Dec 2021 09:13:15 GMT Nuxt Vue.js JAMstack JavaScript https://www.ravgeet.in/blog/converting-and-optimizing-images-from-the-command-line https://www.ravgeet.in/blog/converting-and-optimizing-images-from-the-command-line Sat, 27 Nov 2021 05:30:05 GMT Bash Linux images Web Perf https://www.ravgeet.in/blog/back-to-basics-conditional-logic-with-python-if-else-if https://www.ravgeet.in/blog/back-to-basics-conditional-logic-with-python-if-else-if Sat, 20 Nov 2021 06:09:28 GMT General Programming Python https://www.ravgeet.in/blog/how-to-test-your-nginx-configuration-before-screwing-it-up https://www.ravgeet.in/blog/how-to-test-your-nginx-configuration-before-screwing-it-up Thu, 18 Nov 2021 08:32:55 GMT nginx server backend https://www.ravgeet.in/blog/using-bash-sort-to-sort-files-like-a-boss https://www.ravgeet.in/blog/using-bash-sort-to-sort-files-like-a-boss Sun, 14 Nov 2021 08:56:00 GMT Bash automation Linux