The latest articles on DEV Community by David Clarke (@david_clarke_75b673b4a1ff). https://dev.to/david_clarke_75b673b4a1ff 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%2F3525369%2F5584e1b9-ed96-4ac2-91e7-a3a9b4f89147.png https://dev.to/david_clarke_75b673b4a1ff en David Clarke Thu, 02 Oct 2025 05:36:36 +0000 https://dev.to/david_clarke_75b673b4a1ff/how-i-built-a-pc-bottleneck-calculator-and-the-lessons-learned-5dge https://dev.to/david_clarke_75b673b4a1ff/how-i-built-a-pc-bottleneck-calculator-and-the-lessons-learned-5dge <p>When I started looking into PC building, one of the most confusing topics I ran into was bottlenecks. Everyone on forums had strong opinions, but there was never a clear or simple way to check if a CPU and GPU would work well together. Some said it depends on the game, others said it is all about benchmarks, and many simply said “it depends.”<br> That confusion gave me the idea to build a simple tool: a PC Bottleneck Calculator. It lets you pick a CPU and GPU from a list and tells you the bottleneck percentage. The lower the percentage, the better the balance.</p> <h2> What is a bottleneck </h2> <p>In simple words, a bottleneck happens when one component is holding back the performance of the other.<br> • If you use a very strong GPU with a weak CPU, the GPU will sit idle because the CPU cannot process instructions fast enough.<br> • If you use a powerful CPU with a low tier GPU, the CPU will be underutilized because the GPU cannot keep up.<br> The key point is that bottlenecks are not about “bad hardware.” They are about balance. Even good parts can bottleneck each other if they are mismatched.</p> <h2> How the calculator works </h2> <p>The goal of the calculator was to give users a quick way to see whether their build was balanced without having to read through dozens of benchmarks.<br> Here is the simple logic:</p> <ol> <li> Each CPU and GPU is given a performance score.</li> <li> The scores are compared.</li> <li> The calculator shows the percentage of how much one part is limiting the other. Unlike some tools that show a “match score” where higher is better, my tool shows the bottleneck percentage, where lower is better. For example: • If the bottleneck is below 10 percent, the build is very balanced. • If it is 20-30 percent, you will notice some limitations. • If it is above 30 percent or more, one part is clearly holding back the other.</li> </ol> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnh6khqefzoyc5nhrwz73.JPG" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnh6khqefzoyc5nhrwz73.JPG" alt=" " width="800" height="458"></a></p> <h2> The core code </h2> <p>Here is a simplified version of the calculation logic:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;PC Bottleneck Calculator&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h2&gt;Check CPU and GPU Bottleneck&lt;/h2&gt; &lt;select id="cpu"&gt; &lt;option value="95"&gt;Intel Core i9-14900K&lt;/option&gt; &lt;option value="75"&gt;Ryzen 5 5600&lt;/option&gt; &lt;option value="60"&gt;Intel Core i5-10400F&lt;/option&gt; &lt;/select&gt; &lt;select id="gpu"&gt; &lt;option value="100"&gt;NVIDIA RTX 4090&lt;/option&gt; &lt;option value="85"&gt;NVIDIA RTX 4070&lt;/option&gt; &lt;option value="65"&gt;GTX 1660 Super&lt;/option&gt; &lt;/select&gt; &lt;button onclick="calculate()"&gt;Calculate&lt;/button&gt; &lt;p id="result"&gt;&lt;/p&gt; &lt;script&gt; function calculate() { const cpuScore = parseFloat(document.getElementById("cpu").value); const gpuScore = parseFloat(document.getElementById("gpu").value); const weaker = Math.min(cpuScore, gpuScore); const stronger = Math.max(cpuScore, gpuScore); const bottleneck = ((stronger - weaker) / stronger * 100).toFixed(1); document.getElementById("result").innerText = `Estimated Bottleneck: ${bottleneck}% (lower is better)`; } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> </div> <p>Open this in a browser, pick a CPU and GPU, and you will see the bottleneck percentage right away (Its demo). The <strong>real version on my site uses a much larger dataset</strong>, but the core idea is the same.</p> <h2> Challenges I faced </h2> <p>• Data accuracy: Getting performance scores that reflect real world performance is tricky. Benchmarks differ from site to site, and results vary by workload. I had to normalize scores to keep comparisons consistent.<br> • Explaining results: A percentage alone is not helpful. I added explanations to tell users whether the bottleneck is minor, noticeable, or severe.<br> • Edge cases: Older CPUs or integrated graphics sometimes broke the logic. I had to add conditions so the tool does not give misleading results.<br> What I learned<br> • You do not need a huge framework or complex backend to make something useful. This project was built with plain HTML, CSS, and JavaScript.<br> • Clear communication matters more than complex math. The hardest part was explaining what the percentage really means to an everyday PC builder.<br> • Even a small tool can save time and help people. What started as a personal experiment turned into something useful for anyone planning a new PC build.<br> Try it out<br> If you are curious, you can try the full version here: <a href="https://pcbottleneckcalculator.io" rel="noopener noreferrer">https://pcbottleneckcalculator.io</a><br> It might save you some frustration before buying parts that do not work well together.</p> webdev javascript showdev productivity David Clarke Tue, 23 Sep 2025 21:55:03 +0000 https://dev.to/david_clarke_75b673b4a1ff/how-i-built-my-first-web-tool-as-a-developer-and-what-i-learned-along-the-way-4dok https://dev.to/david_clarke_75b673b4a1ff/how-i-built-my-first-web-tool-as-a-developer-and-what-i-learned-along-the-way-4dok <p>Like most beginner web developers, I spent a lot of time following tutorials and building “to-do apps” that never made it beyond my own computer. They were good practice, but I wanted to build something real that people could actually use.<br> That’s how I ended up creating a gamepad tester a small web tool that lets you check whether your game controller is working properly right in the browser.</p> <h2> The Idea </h2> <p>The inspiration came from frustration. I plugged in my Xbox controller one day, and it just wasn’t behaving right in a game. Was it the controller, the USB cable, or the game itself?<br> I thought: Wouldn’t it be great to have a quick online tool that tells me if all buttons and sticks are responding?<br> Turns out the browser already has a neat feature for this: the HTML5 Gamepad API. That was enough to spark the project.</p> <h2> Building the Tool </h2> <p>I didn’t overcomplicate it. Just HTML, CSS, and JavaScript.<br> Here’s a simplified version of the core script that detects and displays button presses and stick movement:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="cp">&lt;!DOCTYPE html&gt;</span> <span class="nt">&lt;html&gt;</span> <span class="nt">&lt;head&gt;</span> <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">&gt;</span> <span class="nt">&lt;title&gt;</span>Gamepad Tester<span class="nt">&lt;/title&gt;</span> <span class="nt">&lt;style&gt;</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">font-family</span><span class="p">:</span> <span class="nb">sans-serif</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.button</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">5px</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="nl">line-height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#333</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.pressed</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="m">#4caf50</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span> <span class="p">}</span> <span class="nt">&lt;/style&gt;</span> <span class="nt">&lt;/head&gt;</span> <span class="nt">&lt;body&gt;</span> <span class="nt">&lt;h2&gt;</span>Press any button on your controller to start<span class="nt">&lt;/h2&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"buttons"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;script&gt;</span> <span class="kd">let</span> <span class="nx">controllers</span> <span class="o">=</span> <span class="p">{};</span> <span class="kd">function</span> <span class="nf">connectHandler</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="nf">addGamepad</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">gamepad</span><span class="p">);</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">addGamepad</span><span class="p">(</span><span class="nx">gamepad</span><span class="p">)</span> <span class="p">{</span> <span class="nx">controllers</span><span class="p">[</span><span class="nx">gamepad</span><span class="p">.</span><span class="nx">index</span><span class="p">]</span> <span class="o">=</span> <span class="nx">gamepad</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">buttonsDiv</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">buttons</span><span class="dl">"</span><span class="p">);</span> <span class="nx">buttonsDiv</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">""</span><span class="p">;</span> <span class="nx">gamepad</span><span class="p">.</span><span class="nx">buttons</span><span class="p">.</span><span class="nf">forEach</span><span class="p">((</span><span class="nx">btn</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">b</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">div</span><span class="dl">"</span><span class="p">);</span> <span class="nx">b</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">;</span> <span class="nx">b</span><span class="p">.</span><span class="nx">innerText</span> <span class="o">=</span> <span class="nx">i</span><span class="p">;</span> <span class="nx">buttonsDiv</span><span class="p">.</span><span class="nf">appendChild</span><span class="p">(</span><span class="nx">b</span><span class="p">);</span> <span class="p">});</span> <span class="nf">requestAnimationFrame</span><span class="p">(</span><span class="nx">updateStatus</span><span class="p">);</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">updateStatus</span><span class="p">()</span> <span class="p">{</span> <span class="nf">scanGamepads</span><span class="p">();</span> <span class="k">for </span><span class="p">(</span><span class="kd">let</span> <span class="nx">j</span> <span class="k">in</span> <span class="nx">controllers</span><span class="p">)</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">controller</span> <span class="o">=</span> <span class="nx">controllers</span><span class="p">[</span><span class="nx">j</span><span class="p">];</span> <span class="kd">const</span> <span class="nx">buttons</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">buttons</span><span class="dl">"</span><span class="p">).</span><span class="nx">children</span><span class="p">;</span> <span class="nx">controller</span><span class="p">.</span><span class="nx">buttons</span><span class="p">.</span><span class="nf">forEach</span><span class="p">((</span><span class="nx">btn</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="nx">btn</span><span class="p">.</span><span class="nx">pressed</span><span class="p">)</span> <span class="p">{</span> <span class="nx">buttons</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">pressed</span><span class="dl">"</span><span class="p">);</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="nx">buttons</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">pressed</span><span class="dl">"</span><span class="p">);</span> <span class="p">}</span> <span class="p">});</span> <span class="p">}</span> <span class="nf">requestAnimationFrame</span><span class="p">(</span><span class="nx">updateStatus</span><span class="p">);</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">scanGamepads</span><span class="p">()</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">gamepads</span> <span class="o">=</span> <span class="nb">navigator</span><span class="p">.</span><span class="nf">getGamepads</span><span class="p">();</span> <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">gamepads</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="nx">gamepads</span><span class="p">[</span><span class="nx">i</span><span class="p">])</span> <span class="nx">controllers</span><span class="p">[</span><span class="nx">gamepads</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">index</span><span class="p">]</span> <span class="o">=</span> <span class="nx">gamepads</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span> <span class="p">}</span> <span class="p">}</span> <span class="nb">window</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">gamepadconnected</span><span class="dl">"</span><span class="p">,</span> <span class="nx">connectHandler</span><span class="p">);</span> <span class="nt">&lt;/script&gt;</span> <span class="nt">&lt;/body&gt;</span> <span class="nt">&lt;/html&gt;</span> </code></pre> </div> <p>Open this in your browser, plug in a controller, and you will see the buttons light up when pressed. It’s a very stripped-down version of what I later turned into gamepadtest.com but the principle is the same.</p> <h2> What I Learned </h2> <p>• Start small: You don’t need React, a backend, or a database to make something useful.<br> • APIs are fun: Browsers can do more than you think. The Gamepad API was surprisingly powerful once I understood it.<br> • Feedback is gold: Friends tested it and pointed out things I never thought of, like displaying joystick axes.<br> • Shipping feels amazing: Even though it was a small project, publishing it online felt better than any tutorial app I had ever built.</p> <p>Building my first web tool taught me that it’s not about making something huge or perfect. It’s about making something useful, no matter how small.<br> If you want to try out the full version I built, check out <a href="https://rigvitals.com/gamepad-tester/" rel="noopener noreferrer">https://rigvitals.com/gamepad-tester/</a> It might save you some frustration the next time your controller acts up.</p> webdev javascript showdev beginners