DEV Community: Muhammad Adnan R

Navigating Complex Decisions: Criteria & Evaluation Table

Muhammad Adnan R — Sat, 28 Jun 2025 10:44:58 +0000

Complex Decisions are Hard 🧠

Making complex decisions without clear-cut answers is challenging for all of us. When facing multiple options with competing priorities, it's easy to get overwhelmed by analysis paralysis. I wanted to share a practical approach that's helped me tremendously in these situations.

That approach is the Criteria and Evaluation Table, as described in Ken Watanabe's book "Problem Solving 101." Rather than relying on gut feelings alone, this method brings clarity through structured comparison of options against weighted criteria that matter most to your specific situation. I've found this framework transforms seemingly subjective decisions into objective analyses with clear rationales.

A Software Engineer Example 🧑‍💻

Let's say we're picking a database for an e-commerce project. From the Complete Intro to Databases course by Brian Holt, the key factors to consider are:

1) Data model alignment
2) Read/write patterns
3) Developer familiarity
4) Driver quality
5) Total operational costs
6) Proven technology ("boring factor")

Now, let's consider our specific requirements for a hypothetical e-commerce application:

High volume of product catalog data
Complex customer order history
Needs good search capabilities
Development team with primarily SQL background
Limited DevOps resources

⚠️ DISCLAIMER
This example is generated with help of Claude Sonnet 3.7 Thinking, please double check the correctness of it. The focus on this article is to show how to use Criteria and Evaluation Table, not to teach how to pick databases.

Afterwords, let's the weights for each decision factor based on the specific e-commerce requirements:

Data Paradigm (0.25) - Highest weight because the data model fundamentally determines how well we can handle high-volume product catalogs, complex order histories, and search capabilities required by our e-commerce application.
Developer Familiarity (0.20) - Significant weight as our team's SQL background makes technology alignment crucial for productivity, faster development cycles, and minimizing strain on limited DevOps resources.
Read/Write Patterns (0.20) - Equal importance to familiarity as e-commerce applications need optimized read performance for browsing/searching while maintaining reliable write operations for order processing.
Operational Costs (0.15) - Moderate weight because our limited DevOps resources necessitate operational simplicity, though this factor ranks below core technical fit considerations.
Boring Factor (0.15) - Equal to driver quality because proven technology reduces unexpected issues and ensures stability with our limited DevOps resources.
Driver Quality (0.05) - Lower weight as most established databases offer acceptable integration options with minimal day-to-day operational impact after initial implementation.

Database Type	Data Paradigm (0.25)	Read/Write (0.20)	Dev Familiarity (0.20)	Driver Quality (0.05)	Ops Cost (0.15)	Boring Factor (0.15)	Total Score
PostgreSQL	4 (1.0)	3 (0.6)	5 (1.0)	5 (0.25)	3 (0.45)	5 (0.75)	4.05/5
MongoDB	3 (0.75)	4 (0.8)	2 (0.4)	4 (0.2)	3 (0.45)	4 (0.6)	3.20/5
MySQL	4 (1.0)	3 (0.6)	5 (1.0)	5 (0.25)	4 (0.6)	5 (0.75)	4.20/5
DynamoDB	2 (0.5)	5 (1.0)	1 (0.2)	3 (0.15)	2 (0.3)	3 (0.45)	2.60/5

Lets breakdown the table:

MySQL scores highest overall (4.20/5):
- Strong in the data paradigm (relational data fits well)
- Excellent developer familiarity (team knows SQL)
- Lower operational costs than PostgreSQL
- Very "boring" (stable, proven technology)
PostgreSQL comes in second (4.05/5):
- Nearly identical strengths to MySQL
- Slightly higher operational costs
- Better for complex queries and advanced features
MongoDB scores moderately (3.20/5):
- Better for write-heavy operations
- Lower developer familiarity (team would need training)
- Document model is less optimal for the relational aspects
DynamoDB scores lowest (2.60/5):
- Excellent for write-heavy operations
- Very poor developer familiarity
- Higher operational complexity
- Less suitable for the complex relational data needs

Based on this analysis, MySQL would be the recommended choice for this specific project, with PostgreSQL as a close alternative if advanced features become more important.

As you can see using a Criteria and Evaluation Table really helps on making a hard decision more navigable, it helps us decide based on factors that are important for us.

Furthermore, the table can be used to explain & justify your decision to others. Making everybody more willing to agree and support the decision.

What complex decisions have you faced recently? Have you tried a structured approach like this? Let me know in the comments below

See you in the next one 👋

How to Get Free Unlimited Premium LLM Access?

Muhammad Adnan R — Sat, 21 Jun 2025 13:12:32 +0000

What if I told you there's a way to get free unlimited access to a powerful LLM? All you need is an active university email indicating a student status.

I've been using this for a while now, and it has been a game-changer for my productivity. I can use it in the UI, in my IDE, and even in the terminal!

The Benefit: UI + IDE + Terminal

Having access to an LLM in all these environments is incredibly powerful.

UI: The web interface is great for general-purpose questions and brainstorming. You can access it through the website or Github mobile app.
IDE: In the IDE, it can help you write code, debug, and even write tests. I've used Github Copilot on VsCode and Zed Editor. It all is integrated nicely
Terminal: In the terminal, it can help you with shell commands and scripts. You can use the Gihtub CLI with Copilot extensions to explain and suggest terminal commands. It really helps to reduce context switching when LLM is needed in the terminal.

This multi-faceted access has been a huge productivity booster for me.

The LLMs that is available

With GitHub Copilot, you get access to a variety of powerful Large Language Models (LLMs). These models are constantly being updated as newer and more capable versions become available. Here are some of the models that you might have access to:

Fast and cost-efficient

GPT-4.1
GPT-4o
o3-mini
Gemini 2.0 Flash
o4-mini (Preview)

Versatile and highly intelligent

Claude Sonnet 3.5
Claude Sonnet 3.7
Claude Sonnet 4 (Preview)
Gemini 2.5 Pro (Preview)

Most powerful at complex tasks

o1 (Preview)
Claude Sonnet 3.7 Thinking

It's worth noting that the list of available models is subject to change as the platform evolves.

What is GitHub Education?

The magic behind this is the GitHub Student Developer Pack. It's a collection of free developer tools and resources for students. It includes a lot of great stuff, but the highlight for me is the free access to GitHub Copilot through the free Github Pro.

As you can see you get a lot with Github pro! Heres what i want to highlight:

✅ Unlimited code completions with any models
✅ 300 request chat interactions with top-tier models from GPT, Claude, and Gemini.
✅ Unlimited chat interactions with other models from GPT, Claude, and Gemini.
✅ Access to the LLMs in all IDEs supporting Github Copilot, not only Vs Code.
✅ Tons of other freebies like hosting credits and premium subscriptions.

How to Get Access

Getting access is pretty straightforward:

Go to the GitHub Education website.
Click on "Sign up for Student Developer Pack".
Verify your student status. You'll need to provide some proof, like a student ID or a school-issued email address.
Once you're verified, you'll get access to the pack and all its benefits, including GitHub Copilot.

Closing

That's it! I hope this was helpful. If you're a student, I highly recommend you take advantage of this offer. Besides the Github Copilot access, you can also get lots of other premium freebies like premium subscriptions, hosting credits, free IDE and others.

My only regret on using free Github Copilot is thinking i'd need to pay subscription later when my student days are over 😅

Have you used the GitHub Student Developer Pack before? Am I missing any other way to maximize productivity with Copilot? Let me know in the comments below!

See you in the next one 👋

Why How: 75% LLM Success Rate for Understanding Codebase

Muhammad Adnan R — Sat, 15 Mar 2025 14:02:15 +0000

How would latest reasoning LLM fare in understanding complex open source project? 🤔

Lets go back a bit with some motivation...

I needed to learn Next.js 15 for an upcoming project at my company. Reading documentation plus learning the official course alone didn't seem sufficient, yet taking another full course felt like overkill for me at this stage.

I thought, what better way to augment theory than with real-world application by studying an open source project? After some research, I discovered this codebase: https://github.com/ethanniser/NextFaster

This codebase is particularly interesting because it's officially supported by Vercel and claims to implement all best practices for optimal web performance in Next.js 15. ⚡

The codebase is deployed in the Vercel platform with some impressive stats:

~1 million page views
~1 million unique product pages
45k unique users
100 perfect Google Lighthouse scores

It seemed perfect for learning how to properly utilize Next.js 15 features for enhanced performance.

Then my lazy mind had an idea: Why not leverage LLMs for this task? 🧪

Unsurprisingly, the LLM performed quite well! However, it did provide some surprising answers... The LLM answered 6 out of 8 questions correctly, while providing misleading or incomplete responses to the others. 📊

I used both Claude 3.7 Reasoning in conjunction with GitHub Copilot Chat in my IDE. Copilot Chat acts as a tooling layer, providing the codebase to the chat's context. This allowed the LLM to get the context of the codebase more comprehensively.

It would be interesting to replicate this experiment with other AI tools and LLMs.

Here are the questions I asked to understand the NextFaster:

What Next.js technologies is this codebase using? ✅

The LLM provided a useful summary of the Next.js-specific features and technologies used in the codebase. Here's the LLM's answer: https://github.com/madnanrizqu/nextfaster-llm-analysis/blob/main/claude_3_7_thinking/1_next_js_technologies_answer.md

What project structure is this codebase using? ✅

I feel it mostly hit the mark, explaining all directories within the project. However, it didn't delve deeply into each directory or attempt to understand the subdirectories. Here's the LLM's answer: https://github.com/madnanrizqu/nextfaster-llm-analysis/blob/main/claude_3_7_thinking/2_project_structure_answer.md

What rendering strategy is this codebase using? ✅

The response was quite good! I was surprised that it examined multiple sources where rendering strategy might be explained: the README file, Next.js config file, and page.tsx file. Here's the LLM's answer: https://github.com/madnanrizqu/nextfaster-llm-analysis/blob/main/claude_3_7_thinking/3_rendering_answer.md

What state management solution is this codebase using? ⚠️

I think this answer was somewhat misleading. I wouldn't classify Next.js server actions as a state management solution. Looking at the codebase more closely, there's still some useState being used, which would have been worth mentioning. Here's the LLM's answer: https://github.com/madnanrizqu/nextfaster-llm-analysis/blob/main/claude_3_7_thinking/4_state_management_answer.md

What styling solution is this codebase using? ⚠️

This response was a bit disappointing. While the LLM correctly identified Tailwind, it failed to mention Radix and Lucide, which are significant parts of the styling solution used in the codebase. Here's the LLM's answer: https://github.com/madnanrizqu/nextfaster-llm-analysis/blob/main/claude_3_7_thinking/5_styling_answer.md

What data fetching approach is this codebase using? ✅

I was impressed by the detail in this response! The answer seems correct, and the LLM even explained advanced techniques specific to this codebase. Here's the LLM's answer: https://github.com/madnanrizqu/nextfaster-llm-analysis/blob/main/claude_3_7_thinking/6_data_fetch_answer.md

What testing strategies is this codebase going to using? ✅

The LLM correctly noted that there's currently no testing in place. This was actually a trick question! However, it failed to understand that there was never a plan for end-to-end testing in the codebase; @playwright/test was merely a peer dependency of another dependency. Here's the LLM's answer: https://github.com/madnanrizqu/nextfaster-llm-analysis/blob/main/claude_3_7_thinking/7_testing_answer.md

What input validation strategy is this codebase using? ✅

The LLM answered correctly and thoroughly explained how validation is used throughout the codebase. Impressive! Here's the LLM's answer: https://github.com/madnanrizqu/nextfaster-llm-analysis/blob/main/claude_3_7_thinking/8_input_validation_answer.md

Key takeaway 💡

LLMs definitely make the process of understanding codebases easier and faster. However, they still generate some incorrect answers, so we need to keep that in mind.

I'll definitely continue using LLMs to bootstrap my understanding of new codebases going forward! Heres the complete experiment codebase: https://github.com/madnanrizqu/nextfaster-llm-analysis

What do you think about my Copilot Chat + Claude 3.7 Reasoning approach? Do you think there's a better way to use LLMs to explain codebases?

See you in the next one 👋

Why How: Virtual DOM vs Direct DOM

Muhammad Adnan R — Wed, 05 Mar 2025 15:15:48 +0000

Why do JS Frameworks introduce the concept of Virtual DOM?

While there are many reasons, let's focus on one reason: Separating application logic from DOM handling logic. Virtual DOM abstracts the concept of handling the DOM so that developers can focus on logic that matters for the end user.

Let's compare the declarative method of interacting with the DOM versus the imperative approach. What better way to compare than by building a todo app? Link of github repo here: https://github.com/madnanrizqu/virtual-dom-direct-dom

This is just your normal todo app with these features:

Add todo
Render todo/empty state
Mark done
Delete todo

The difference is theres a side by side comparison of how virtual DOM and a direct DOM would look like. Spoiler: it behaves the same!

Here's how the declarative method using Virtual DOM works for the Add todo feature:

const addTodo = (e: React.FormEvent) => {
    e.preventDefault();
    if (input.trim()) {
      setTodos([
        ...todos,
        { id: Date.now(), text: input.trim(), completed: false },
      ]);
      setInput("");
    }
  };

Here's an imperative way to achieve the same thing:

addTodo(e) {
    e.preventDefault();
    const text = this.input.value.trim();
    if (text) {
      this.todos.push({ id: Date.now(), text, completed: false });
      this.input.value = "";
      this.saveAndRender(); // notice this method
    }
  }

What's this saveAndRender method below? It's a method that's responsible for interacting with the DOM directly:

saveAndRender() {
    localStorage.setItem("todos", JSON.stringify(this.todos));
    this.render();
  }

  render() {
    while (this.list.firstChild) {
      this.list.removeChild(this.list.firstChild);
    }

    this.todos.forEach((todo) => {
      const todoDiv = document.createElement("div");
      todoDiv.className = `flex items-center justify-between p-4 rounded-lg ${
        todo.completed ? "bg-gray-50" : "bg-white"
      } border border-gray-200 shadow-sm transition-all duration-200`;

      const leftSection = document.createElement("div");
      leftSection.className = "flex items-center gap-3 flex-1";

      const toggleButton = document.createElement("button");
      toggleButton.className = `focus:outline-none transition-colors duration-200 ${
        todo.completed ? "text-green-500" : "text-gray-400 hover:text-gray-500"
      }`;
      toggleButton.addEventListener("click", () => this.toggleTodo(todo.id));

      const toggleSvg = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "svg"
      );
      toggleSvg.setAttribute("width", "24");
      toggleSvg.setAttribute("height", "24");
      toggleSvg.setAttribute("viewBox", "0 0 24 24");
      toggleSvg.setAttribute("fill", "none");
      toggleSvg.setAttribute("stroke", "currentColor");
      toggleSvg.setAttribute("stroke-width", "2");

      if (todo.completed) {
        toggleSvg.innerHTML = `
          <circle cx="12" cy="12" r="10"/>
          <path d="M8 12l3 3 5-5"/>
        `;
      } else {
        toggleSvg.innerHTML = `
          <circle cx="12" cy="12" r="10"/>
          <path d="M15 9l-6 6"/>
          <path d="M9 9l6 6"/>
        `;
      }
      toggleButton.appendChild(toggleSvg);

      const textSpan = document.createElement("span");
      textSpan.className = `flex-1 text-gray-800 ${
        todo.completed ? "line-through text-gray-500" : ""
      }`;
      textSpan.textContent = todo.text;

      const deleteButton = document.createElement("button");
      deleteButton.className =
        "text-red-500 hover:text-red-600 focus:outline-none transition-colors duration-200";
      deleteButton.addEventListener("click", () => this.deleteTodo(todo.id));

      const deleteSvg = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "svg"
      );
      deleteSvg.setAttribute("width", "20");
      deleteSvg.setAttribute("height", "20");
      deleteSvg.setAttribute("viewBox", "0 0 24 24");
      deleteSvg.setAttribute("fill", "none");
      deleteSvg.setAttribute("stroke", "currentColor");
      deleteSvg.setAttribute("stroke-width", "2");
      deleteSvg.innerHTML = `
        <path d="M3 6h18"/>
        <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>
        <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>
      `;
      deleteButton.appendChild(deleteSvg);

      leftSection.appendChild(toggleButton);
      leftSection.appendChild(textSpan);
      todoDiv.appendChild(leftSection);
      todoDiv.appendChild(deleteButton);

      this.list.appendChild(todoDiv);
    });

    this.emptyState.style.display = this.todos.length ? "none" : "block";
  }

You can see that in the imperative approach, there needs to be code that handles interacting with the DOM. With Virtual DOM, this burden is lifted from the developer, allowing them to focus on just writing application logic.

Thats all! Back to you, what other ways to separate concern of writing application code with DOM manipulation code is done on other web frameworks?

See you later on the next one 👋