<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Nauman Ahmad</title>
    <description>The latest articles on DEV Community by Nauman Ahmad (@nauman_ahmad_6e87936d74d6).</description>
    <link>https://dev.to/nauman_ahmad_6e87936d74d6</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2629532%2F7ed69fae-cb13-4747-bf29-1ed2338bbeff.jpg</url>
      <title>DEV Community: Nauman Ahmad</title>
      <link>https://dev.to/nauman_ahmad_6e87936d74d6</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/nauman_ahmad_6e87936d74d6"/>
    <language>en</language>
    <item>
      <title>What on Earth is "Agentic Browsing"?</title>
      <dc:creator>Nauman Ahmad</dc:creator>
      <pubDate>Wed, 17 Jun 2026 12:51:03 +0000</pubDate>
      <link>https://dev.to/nauman_ahmad_6e87936d74d6/what-on-earth-is-agentic-browsing-4j17</link>
      <guid>https://dev.to/nauman_ahmad_6e87936d74d6/what-on-earth-is-agentic-browsing-4j17</guid>
      <description>&lt;h1&gt;
  
  
  I Built a Vanilla JS Web App that Scored 100/100 Under Lighthouse’s New "Agentic Browsing" Audit. Here’s What It Means.
&lt;/h1&gt;

&lt;p&gt;If you have run a performance audit on &lt;strong&gt;PageSpeed Insights&lt;/strong&gt; or &lt;strong&gt;Lighthouse&lt;/strong&gt; recently, you might have noticed a fascinating new line item quietly slipping into the metadata report: &lt;strong&gt;Agentic Browsing&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;When I audited my free tool suite, &lt;a href="https://paktheta.com/pdf/home" rel="noopener noreferrer"&gt;Paktheta&lt;/a&gt;, I managed to hit the ultimate developer milestone—&lt;strong&gt;a perfect 100/100 across Performance, Accessibility, Best Practices, and SEO.&lt;/strong&gt; But seeing that perfect score alongside the label &lt;em&gt;"Agentic Browsing"&lt;/em&gt; got me thinking. What exactly is an AI-driven agent experiencing when it hits our sites, and why is this the new gold standard for web performance?&lt;/p&gt;

&lt;p&gt;Let's dive into what Agentic Browsing actually means for the future of optimization.&lt;/p&gt;




&lt;h2&gt;
  
  
  What on Earth is "Agentic Browsing"?
&lt;/h2&gt;

&lt;p&gt;Historically, speed tests like Lighthouse were passive. A headless browser opened your URL, waited for the page to load, recorded metrics like First Contentful Paint (FCP) and Largest Contentful Paint (LCP), and closed the tab. It was a linear, predictable, and frankly synthetic snapshot.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Agentic Browsing changes the paradigm entirely.&lt;/strong&gt; Instead of a basic static script, modern auditing platforms use autonomous, intelligent browser agents. Guided by modern AI-driven browser control (using updated instances like HeadlessChromium), these agents don't just stare at your page—they &lt;strong&gt;explore&lt;/strong&gt; it like a real human would. &lt;/p&gt;

&lt;p&gt;An agentic audit runner will:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Identify interactive buttons&lt;/strong&gt; and click them to test responsiveness.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Scan form elements&lt;/strong&gt; to see if they accept paste commands cleanly.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Intelligently look for broken layout shifts (CLS)&lt;/strong&gt; by dynamically scrolling and triggering micro-animations.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Interact with JavaScript components&lt;/strong&gt; to see if they block the main execution thread.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In short: &lt;strong&gt;It simulates real, unpredictable human behavior at lightning speed.&lt;/strong&gt; If your site relies on bloated frameworks that look fast initially but lock up the second a user tries to interact, an agentic browser will catch it instantly and tank your Interaction to Next Paint (INP) or Total Blocking Time (TBT).&lt;/p&gt;




&lt;h2&gt;
  
  
  Deconstructing the Quad-100: How We Handled the Agent
&lt;/h2&gt;

&lt;p&gt;When the agent ran through the &lt;a href="https://paktheta.com/pdf/jpg-to-pdf" rel="noopener noreferrer"&gt;Paktheta JPG to PDF Tool&lt;/a&gt;, it simulated a real mobile session (emulating a Moto G Power on a throttled 4G network). &lt;/p&gt;

&lt;p&gt;Here is how the numbers shook down, and why pure optimization still triumphs over heavy modern frameworks:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Zero Main-Thread Jank (Performance: 100)
&lt;/h3&gt;

&lt;p&gt;The agent recorded a &lt;strong&gt;Total Blocking Time (TBT) of exactly 0 ms&lt;/strong&gt;. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;The Secret:&lt;/strong&gt; Avoid heavy JavaScript frameworks for simple utility pages. By using vanilla execution architecture and optimizing DOM depth (keeping total elements down to a lean 112), the browser spent a mere 16 milliseconds evaluating scripts. There was zero framework hydration lag to slow down the agent's interactive clicks.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  2. Predictable, Static Layouts (CLS: 0)
&lt;/h3&gt;

&lt;p&gt;The agent searched aggressively for layout shifts during its browsing loop. The result? A &lt;strong&gt;Cumulative Layout Shift (CLS) of 0&lt;/strong&gt;.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;The Secret:&lt;/strong&gt; Every button and container size is strictly calculated. Even under CSS pulse-glow animations on interactive buttons, the core layout boundaries remain rigid, ensuring the content never jumps unexpectedly while an autonomous agent or human eye is trying to read it.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  3. Immediate Time-To-First-Byte (TTFB)
&lt;/h3&gt;

&lt;p&gt;The initial network request latency clocking in at an elite &lt;strong&gt;10 ms&lt;/strong&gt;.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;The Secret:&lt;/strong&gt; Smart caching structures and an incredibly light payload (totaling only 28 KiB for the entire page transfer).&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  The Takeaway: Stop Building for Static Bots; Build for Active Agents
&lt;/h2&gt;

&lt;p&gt;The introduction of Agentic Browsing to standard web testing utilities means that trying to "game" the system with superficial tricks won't cut it anymore. Algorithms are smart enough to look for actual functional flow.&lt;/p&gt;

&lt;p&gt;If you want to achieve perfect scores in this new era:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Keep it lightweight:&lt;/strong&gt; If vanilla JS can solve the problem, let it.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Ensure interactive components are resilient:&lt;/strong&gt; If an AI agent can't focus your keyboard elements, click a button smoothly, or navigate your DOM, it will penalize your accessibility and best practices scores.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Optimize for interaction, not just the initial paint:&lt;/strong&gt; It’s no longer just about how fast your page renders; it's about how gracefully it behaves when it is pushed to perform.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Have you noticed the new agentic metrics appearing on your latest builds? Let me know in the comments how you’re optimizing your workflows to handle them!&lt;/p&gt;

</description>
      <category>googlepagespeed</category>
      <category>ai</category>
      <category>webtesting</category>
      <category>web</category>
    </item>
    <item>
      <title>How I Built a 100% Offline, Privacy-First Image to PDF Converter Using AI</title>
      <dc:creator>Nauman Ahmad</dc:creator>
      <pubDate>Fri, 29 May 2026 04:33:02 +0000</pubDate>
      <link>https://dev.to/nauman_ahmad_6e87936d74d6/how-i-built-a-100-offline-privacy-first-image-to-pdf-converter-using-ai-55bf</link>
      <guid>https://dev.to/nauman_ahmad_6e87936d74d6/how-i-built-a-100-offline-privacy-first-image-to-pdf-converter-using-ai-55bf</guid>
      <description>&lt;p&gt;Every single day, millions of people search for a quick way to convert images into PDF documents. Whether it's a student submitting an assignment, a lawyer processing legal files, or a freelancer sending an invoice, the need is massive. &lt;/p&gt;

&lt;p&gt;But as developers and tech enthusiasts, we know the dark side of most "free" online tools:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Data Security Risks:&lt;/strong&gt; They upload sensitive user documents (IDs, bank statements, passports) to remote cloud servers.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Paywalls &amp;amp; Watermarks:&lt;/strong&gt; They hit users with sudden limitations, forcing upgrades to premium versions.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Tracking &amp;amp; Cookies:&lt;/strong&gt; They track user data across the web for ad targeting.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I wanted to change that. I wanted to build a tool that gives power back to the user—a utility that is &lt;strong&gt;100% free, blisteringly fast, and completely secure&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;So, with the help of modern &lt;strong&gt;AI coding assistants&lt;/strong&gt;, I built and launched the &lt;strong&gt;&lt;a href="https://paktheta.com/pdf/jpg-to-pdf" rel="noopener noreferrer"&gt;PakTheta JPG to PDF Converter&lt;/a&gt;&lt;/strong&gt;. Here is how I designed a client-side architecture that runs entirely in the user's browser window!&lt;/p&gt;




&lt;h2&gt;
  
  
  🛠️ The Architecture: 100% Client-Side (No Servers Allowed)
&lt;/h2&gt;

&lt;p&gt;The absolute core of this project was data privacy. To guarantee that user documents remain secure, I decided that &lt;strong&gt;user files must never touch a server&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;By leveraging AI to brainstorm the best browser-side rendering libraries and vanilla JavaScript structures, we engineered a completely serverless workflow. When a user visits &lt;strong&gt;&lt;a href="https://paktheta.com/pdf/jpg-to-pdf" rel="noopener noreferrer"&gt;paktheta.com/pdf/jpg-to-pdf&lt;/a&gt;&lt;/strong&gt;, the application logic loads once. After that, they can literally turn off their internet connection, and the conversion still works flawlessly!&lt;/p&gt;

&lt;h3&gt;
  
  
  📦 Handling the Multi-Format Nightmare
&lt;/h3&gt;

&lt;p&gt;One of the trickiest parts of client-side image processing is format compatibility. Standard HTML canvases struggle with raw image wrappers. AI helped me write robust parsing loops to support a massive matrix of extensions instantly:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Legacy &amp;amp; Web Formats:&lt;/strong&gt; &lt;code&gt;JPG&lt;/code&gt;, &lt;code&gt;JPEG&lt;/code&gt;, &lt;code&gt;PNG&lt;/code&gt;, &lt;code&gt;BMP&lt;/code&gt;, &lt;code&gt;GIF&lt;/code&gt;, &lt;code&gt;WebP&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Vector &amp;amp; Design Files:&lt;/strong&gt; &lt;code&gt;SVG&lt;/code&gt;, &lt;code&gt;TIFF&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Modern Mobile Formats:&lt;/strong&gt; High-efficiency wrappers like &lt;strong&gt;&lt;code&gt;HEIC&lt;/code&gt;&lt;/strong&gt; (iPhone photos) and &lt;strong&gt;&lt;code&gt;AVIF&lt;/code&gt;&lt;/strong&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The AI assistance was crucial in debugging binary buffer streams, ensuring that regardless of the file type uploaded, the browser decodes it smoothly without dropping pixel density or crashing the tab.&lt;/p&gt;




&lt;h2&gt;
  
  
  🌟 Premium Features We Added (With Zero Bloat)
&lt;/h2&gt;

&lt;p&gt;Thanks to rapid prototyping with AI, I didn't stop at a basic converter. We packed heavy customization options directly into the local browser UI, matching premium enterprise software features:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;📐 Complete Layout Control:&lt;/strong&gt; Users can set page sizes to standard &lt;strong&gt;A4&lt;/strong&gt;, Letter, Legal, or match the exact "Original Image Size" dynamically.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;📏 Precision Margins:&lt;/strong&gt; Adjustable Top, Bottom, Left, and Right margins measured precisely in millimeters (mm).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;📝 Rich Typography Canvas:&lt;/strong&gt; Users can stamp rich text headings and descriptions directly onto the PDF file with custom font sizes, alignments, and styles (Bold, Italic, Underline).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;🔢 Dynamic Pagination:&lt;/strong&gt; Automatic layout calculations to place page numbers (e.g., &lt;code&gt;Page 1 of {total}&lt;/code&gt;) in multiple grid structures.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;🗜️ Local Compression Engine:&lt;/strong&gt; To prevent massive file weights, we added a client-side compression slider (No Compression, Medium, High) that scales down image quality locally before compiling the PDF binary tree.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;🗂️ Bulk Download Options:&lt;/strong&gt; Users can either compile everything into a single, clean PDF file or download separate PDFs bundled inside a single &lt;code&gt;.zip&lt;/code&gt; file automatically.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🤖 The AI Collaboration Experience
&lt;/h2&gt;

&lt;p&gt;Building this alone would have taken weeks of diving into PDF binary specifications, array buffers, and stream-saving APIs. By collaborating with AI, the development cycle was cut down significantly:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Memory Optimization:&lt;/strong&gt; AI helped me optimize the JavaScript garbage collection so that converting 50+ high-res images at once doesn't trigger an out-of-memory error on mobile browser tabs.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;UI/UX Refinement:&lt;/strong&gt; We generated a clean, responsive layout that scales beautifully from a 4K desktop display down to a small mobile screen.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Zero Watermarks:&lt;/strong&gt; AI helped me ensure the compilation script outputs pure, unblemished PDF trees, making it instantly ready for professional and corporate use.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🎯 Try It Out &amp;amp; Give Feedback!
&lt;/h2&gt;

&lt;p&gt;This project taught me that when you combine a utility need with a privacy-first mindset and AI acceleration, you can build tools that truly rival paid software while respecting the user's digital rights.&lt;/p&gt;

&lt;p&gt;I would love for the Dev.to community to test the live utility, inspect the network tab (to verify zero data transmission!), and leave your valuable feedback in the comments.&lt;/p&gt;

&lt;p&gt;🔗 &lt;strong&gt;Live Tool:&lt;/strong&gt; &lt;strong&gt;&lt;a href="https://paktheta.com/pdf/jpg-to-pdf" rel="noopener noreferrer"&gt;https://paktheta.com/pdf/jpg-to-pdf&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;How do you handle client-side PDF generation in your projects? Let's discuss in the comments below!&lt;/em&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>ai</category>
      <category>privacy</category>
    </item>
  </channel>
</rss>
