DEV Community: Navraj Sandhu

Is the Computer Still a Dumb Machine?

Navraj Sandhu — Tue, 06 Jan 2026 01:26:33 +0000

Is the Computer Still a Dumb Machine?

— A question I used to study in school

When I was in school, one of the first things we were taught about computers was this simple line:

“A computer is a dumb machine.”

At that time, it made perfect sense. Computers only did what we told them to do. They followed instructions, executed programs, and produced outputs. No thinking, no understanding — just logic.

But today, in the age of AI, this question feels uncomfortable to ask again:
Is the computer still a dumb machine?

The rise of AI and the illusion of intelligence

Modern AI can write code, generate art, answer questions, and even hold conversations. It feels intelligent. Sometimes, it feels more knowledgeable than humans.

Because of this, many people believe that computers can now “think”.

But if we look closely, something important becomes clear:

AI has not changed what a computer fundamentally is.

AI is a prediction machine, not a thinking one

At its core, AI works on:

Mathematics
Statistics
Probability
Linear algebra
Optimization techniques inspired by physics

When an AI generates a sentence, it is predicting the next word.
When it recognizes an image, it is predicting a label.
When it “reasons”, it is chaining together probable patterns it has seen before.

There is no understanding behind it.

No awareness.
No intention.
No meaning.

It does not know why something is correct — it only knows what is likely.
It has only changed what a computer can predict.

Why AI feels intelligent to us

AI feels intelligent because:

Language is closely tied to how humans think
We naturally anthropomorphize machines
AI reflects human knowledge back at us
Large-scale data makes predictions surprisingly accurate

But accuracy is not intelligence.

A calculator can be extremely accurate.
That doesn’t mean it understands math.

Human brain vs AI: efficiency matters

The human brain operates on roughly 20 watts of power.

With that tiny amount of energy, it can:

Learn from very little data
Generalize across domains
Handle ambiguity and uncertainty
Adapt continuously
Create meaning and purpose

AI systems, on the other hand:

Consume massive computational resources
Require enormous datasets
Are narrow in capability
Fail badly outside their training data

So when it comes to resource consumption and adaptability, the human brain is still far superior.

So… is the computer still a dumb machine?

Yes — but with an important clarification.

A computer is still dumb in the sense that:

It does not understand
It does not think
It does not have consciousness

What has changed is how powerful its pattern recognition has become.

AI doesn’t replace human intelligence.
It amplifies human capability.

The right way to think about AI

AI is not a mind.

It is a tool.
A mirror of human knowledge.
A very powerful prediction engine.

And like every tool, its value depends on how humans use it.

Final thought

The statement we learned in school was not wrong.

It was incomplete.

Computers are still dumb machines — but today, they are dumb machines doing extraordinarily smart-looking things.

And understanding this difference is important, especially for engineers, creators, and anyone building the future with AI.

Why I Migrated My Backend from Go to Elixir/Phoenix

Navraj Sandhu — Sun, 09 Nov 2025 07:03:04 +0000

As a solo developer, my biggest challenge isn't coding—it's efficiency. Every hour I spend fighting tooling or boilerplate is an hour I’m not spending on features.

Let me be clear: I embrace Go (Golang). It is an outstanding language for raw performance, systems programming, and concurrent processing.

😩 The Go Conundrum: Too Much Boilerplate, Not Enough Structure
I absolutely respect and utilize Go for performance-critical systems. It’s a phenomenal language. However, when I was building my full application, I kept running into two major roadblocks that crushed my solo velocity:

The Code Organization Headache This was my biggest source of friction. In a large Go application, there’s no official, standard framework to guide structure. I spent countless hours trying to define the “best” way to organize my code, shuffling directories, and debating architecture patterns.

The result? A codebase that, while technically correct, felt arbitrary and lacked immediate clarity. Onboarding even myself after a few weeks felt like a small mental burden.

Reinventing the Wheel For common web development tasks—like routing, authentication, and database connectivity—I was forced to write a significant amount of boilerplate code.

I needed the productivity of something like Django or Rails, but those frameworks felt too heavy, and their performance overhead was simply too high for my low-latency goals. I felt stuck between speed and developer experience.

✨ The Elixir/Phoenix Revelation: The Perfect Balance
I needed a language that offered the performance of Go but with the structure and productivity of a mature framework. Elixir, powered by the Phoenix Framework, was the answer.

Instant Structure and Opinionated Design
Phoenix is a breath of fresh air. It provides an opinionated, high-quality structure right out of the box, immediately solving my organization problem. I stopped spending time thinking about where to put the code and started focusing on what the code needed to do.
The Shockingly Short Learning Curve
I fully expected a complex transition to a functional programming language. To my surprise, the fundamentals of Elixir took me only about two days to grasp. The language is clean, readable, and incredibly approachable.

After that initial steep climb, I was immediately productive, writing features in Phoenix and leveraging tools like Ecto (the Elixir data mapper) that provide robust, structured data handling with minimal fuss.

Self-Documenting Code as a Side Effect This was an unexpected win for maintainability. The expressive, functional style of Elixir—where functions clearly define inputs and outputs—naturally leads to code that is self-documenting. For a solo developer, this reduces the cognitive load of navigating and maintaining a large codebase dramatically.

The Bottom Line: Exponential Velocity
The shift wasn't a lateral move; it was an exponential gain in efficiency. My development velocity quadrupled because Elixir and Phoenix removed the constant organizational battles and boilerplate writing that plagued my Go setup. I'm now writing features faster than ever, and my new codebase is a joy to work with.

If you are a solo developer constantly weighing the cost of developer speed against application performance, do yourself a favor: look at the power and structure of Elixir and Phoenix.

💬 What’s Your Take?
Have you ever migrated stacks purely for productivity reasons? What's the biggest speed bump in your current backend setup?

Let's create a tic-tac-toe with React.

Navraj Sandhu — Mon, 05 Jul 2021 08:55:35 +0000

Welcome Everybody,
In this article we are going to create a tic-tac-toe app using react and react hooks.

Before we start creating our app, You should familiar
with Javscript, React and React-hooks.

So, Without wasting any time let's move to project setup.

Project setup

In the terminal go to the directory where you want to create you react-app.
and then run the following command.

npx create-react-app tic-tac-toe

For creating our app I am using create-react-app framework.
If you wanna create it manualy you can do so.

You can delete App.test.js, setupTests.js and logo.svg.
After that clean App.js like following :


import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      Hello I am react app.
    </div>
  );
}

export default App;

Run yarn start or npm start for running dev server on localhost.

That's enough for project setup. Let's move to next one.

Let's build our app.

Breaking down our app into function.

First in src/App.js, Create a function called calculateWinner to get winner from an array.


function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ]
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i]
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a]
    }
  }
  return null
}

We are storing pattern of lines in case of a winner in lines array and if we see any of these pattern at any time of the game we will declare winner.

For calculating next turn create a function called calculateNextValue.


function calculateNextValue(squares) {
  return squares.filter(Boolean).length % 2 === 0 ? 'X' : 'O'
}

then, we can check the current status of game by creating next function.


function calculateStatus(winner, squares, nextValue) {
  return winner
    ? `Winner: ${winner}`
    : squares.every(Boolean)
    ? `Scratch: Cat's game`
    : `Next player: ${nextValue}`
}

Now in App.css let's write some styles for our game-board


.game {
  font: 14px 'Century Gothic', Futura, sans-serif;
  margin: 20px;
  min-height: 260px;
}

.game ol,
.game ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: '';
  display: table;
}

.status {
  margin-bottom: 10px;
}

.restart {
  margin-top: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
  min-width: 190px;
}

Now let's create our game-board in App.js

function Board() {
  const [squares, setSquares] = React.useState(Array(9).fill(null))

  const nextValue = calculateNextValue(squares)
  const winner = calculateWinner(squares)
  const status = calculateStatus(winner, squares, nextValue)

  function selectSquare(square) {
    if (winner || squares[square]) {
      return
    }
    const squaresCopy = [...squares]
    squaresCopy[square] = nextValue
    setSquares(squaresCopy)
  }

  function restart() {
    setSquares(Array(9).fill(null))
  }

  function renderSquare(i) {
    return (
      <button className="square" onClick={() => selectSquare(i)}>
        {squares[i]}
      </button>
    )
  }

  return (
    <div>
      <div className="status">{status}</div>
      <div className="board-row">
        {renderSquare(0)}
        {renderSquare(1)}
        {renderSquare(2)}
      </div>
      <div className="board-row">
        {renderSquare(3)}
        {renderSquare(4)}
        {renderSquare(5)}
      </div>
      <div className="board-row">
        {renderSquare(6)}
        {renderSquare(7)}
        {renderSquare(8)}
      </div>
      <button className="restart" onClick={restart}>
        restart
      </button>
    </div>
  )
}

Now create a Game() function and put our Board() Component

inside it.


function Game() {
  return (
    <div className="game">
      <div className="game-board">
        <Board />
      </div>
    </div>
  )
}

then render Game() function inside App().


function App() {
  return <Game />
}

At the end our App.js should look like this.


import React from 'react';
import "./App.css";

function Board() {
  const [squares, setSquares] = React.useState(Array(9).fill(null))

  const nextValue = calculateNextValue(squares)
  const winner = calculateWinner(squares)
  const status = calculateStatus(winner, squares, nextValue)

  function selectSquare(square) {
    if (winner || squares[square]) {
      return
    }
    const squaresCopy = [...squares]
    squaresCopy[square] = nextValue
    setSquares(squaresCopy)
  }

  function restart() {
    setSquares(Array(9).fill(null))
  }

  function renderSquare(i) {
    return (
      <button className="square" onClick={() => selectSquare(i)}>
        {squares[i]}
      </button>
    )
  }

  return (
    <div>
      <div className="status">{status}</div>
      <div className="board-row">
        {renderSquare(0)}
        {renderSquare(1)}
        {renderSquare(2)}
      </div>
      <div className="board-row">
        {renderSquare(3)}
        {renderSquare(4)}
        {renderSquare(5)}
      </div>
      <div className="board-row">
        {renderSquare(6)}
        {renderSquare(7)}
        {renderSquare(8)}
      </div>
      <button className="restart" onClick={restart}>
        restart
      </button>
    </div>
  )
}

function Game() {
  return (
    <div className="game">
      <div className="game-board">
        <Board />
      </div>
    </div>
  )
}

function calculateStatus(winner, squares, nextValue) {
  return winner
    ? `Winner: ${winner}`
    : squares.every(Boolean)
    ? `Scratch: Cat's game`
    : `Next player: ${nextValue}`
}

function calculateNextValue(squares) {
  return squares.filter(Boolean).length % 2 === 0 ? 'X' : 'O'
}

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ]
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i]
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a]
    }
  }
  return null
}

function App() {
  return <Game />
}

export default App

And that is it. We are done with that.

💡 Extras

You can save the game's squares to browser localhost by using the following hook:


function useLocalStorageState(
  key,
  defaultValue = '',
  {serialize = JSON.stringify, deserialize = JSON.parse} = {},
) {
  const [state, setState] = React.useState(() => {
    const valueInLocalStorage = window.localStorage.getItem(key)
    if (valueInLocalStorage) {
      return deserialize(valueInLocalStorage)
    }
    return typeof defaultValue === 'function' ? defaultValue() : defaultValue
  })

  const prevKeyRef = React.useRef(key)

  React.useEffect(() => {
    const prevKey = prevKeyRef.current
    if (prevKey !== key) {
      window.localStorage.removeItem(prevKey)
    }
    prevKeyRef.current = key
    window.localStorage.setItem(key, serialize(state))
  }, [key, state, serialize])

  return [state, setState]
}

export {useLocalStorageState}

Thanks for reading.

Happy coding 😍.

How to count lines of code you written.

Navraj Sandhu — Tue, 22 Jun 2021 05:09:12 +0000

In this short tutorial we are gonna see how to count lines of code that you've written.

Before we get started you should have node, npm, npx installed in your machine.

Let's start

Open terminal and cd to your project directory.
Run the following command

npx sloc .

or you can install sloc package globaly.

npm install -g sloc

run command with sudo if you using linux or mac.

then you can run

sloc .

If you want to exclude file or directory( Like venv or node modules) you can do like that.

sloc . -e <file>|<directory>

Example :

Here I have a django project in which i have venv folder that i wanna exclude.

Thanks for reading.

Happy coding 😎.

Important Custom React Hooks - (Part 1)

Navraj Sandhu — Sat, 19 Jun 2021 15:56:55 +0000

It’s been a while since React hooks were released, and everyone has fallen in love with them. I understand because I’m one of you too. Hooks got me hooked!.

Welcome everybody in this two part series of articles. Where we are gonna create a some custom react hooks to increase features as well as productivity of your react app.

Here's the list of hooks we are going to create a in these two parts:

Part 1 :

use-window-dimensions(for getting window's width and height)
use-outside-click(for detecting outside click from a element)

Part 2:

use-window-positions(for detecting window's position)
use-scroll-direction(for detecting scroll(up or down))

So before we get started for those who don't know what React and React hooks are? let's have brief introduction for them.

Prerequisites.

Basic understanding of Javascript and DOM.

Basic understanding of React and React Hooks.

Project Setup

Now let's back to our main agenda.

First we are going new React App with create-react-app. I'd call it custom-react-hooks.

So, open terminal and run the following command.

npx create-react-app custom-react-hooks

Open project in favorite IDE/Text-Editor.In this tutorial I am using VSCode.

After that, go to src folder and create a new folder call hooks.

Till now, our react-app should look like this.

Now, clean src/App.js file like this:


import React from 'react';
import "./App.css";

const App = () => {
    return <div>Hello, let's start coding are custom hooks.</div>;
};

export default App;

You can also delete src/App.test.js, src/setuptest.js, src/logo.svg. I am gonna do so.

Now, that's enough. let's start coding our first custom-react-hooks

1.`use-window-dimensions`:

In src/hooks folder I'll make a new file called use-window-dimensions.js. This is the file where we'll create our use-window-dimensions hook.

import { useState, useEffect } from "react";



const getDimensions  = () => {
    const { innerWidth : width, innerHeight : height } = window;

    return { width, height }
}

const useWindowDimensions = () => {
    const [windowDimensions,setWindowDimensions] = useState(getDimensions());


    useEffect( () => {

        function handleResize(){
            setWindowDimensions(getDimensions());
        }

        window.addEventListener("resize", handleResize)
        return ( () => { window.removeEventListener("resize", handleResize) } )
    } ,[])

    return windowDimensions
}

export default useWindowDimensions;

Now let's break the code down :

getDimensions() function is simply returning window's width and height.
useWindowDimensions() function is our hook that will return window dimensions.
In useWindowDimensions() functions we've first store window's dimensions in the state.
Next we run a useEffect hook to change our state(dimensions) whenever resize event hired on window.
And then in our hook we are returning window's height and width.

Testing our hook.

We are going to test our hooks in App.js.

import React from "react";
import "./App.css";
import useWindowDimensions from "./hooks/use-window-dimensions";

const App = () => {
    const { width, height } = useWindowDimensions();

    return (
        <div>
            <h1># First custom hook:</h1>
            <p>
                Window's width is {width} and height is{height}
            </p>
        </div>
    );
};

export default App;

Run dev server on localhost:

npm start

yarn start

Now you outputs should like this:

And that it.
👍 Awesome! we made it.

Now let's move to the next hook.

2. `use-outside-click`

Like what we've done before create a new file in src/hooks folder called use-outside-click.js


import  { useEffect } from "react";

export default function useOutsideClick(ref,onClick) {
    useEffect(() => {
        if(!ref) return;
        function handleClickOutside(event) {
            if (ref.current && !ref.current.contains(event.target)) {
                onClick(event);
            }
        }

        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, [ref,onClick]);
}

useOutsideClick is hook which is taking two arguments first ref of element on which we want to detect outside click and second a function that will run when it detect outside click from element.
on every mousedown event we check whether the area we clicked on contains targeted element or not. If it contains we are running a function that we'll pass in hook as second argument.

Let's test it.

In src/App.js, let's check whether it's working or not.

import React, { useRef } from "react";
import useOutsideClick from "./hooks/use-outside-click";
import "./App.css";

const App = () => {
    const boxRef = useRef(null);

    useOutsideClick(boxRef, () => {
        console.log("clicked detected outside the box");
    });

    return (
        <div className='app'>
            <div
                ref={boxRef}
                className='box'
                style={{
                    width: "200px",
                    height: "200px",
                    backgroundColor: "lightgreen"
                }}
            >
                Hi, I am the box.
            </div>
        </div>
    );
};

export default App;

And when we clicked outside the green box the it should logged in console as following :

Amazing 😲, it's working.

Part 2 (coming soon)

Happy coding 😍.

DEV Community: Navraj Sandhu

Is the Computer Still a Dumb Machine?

The rise of AI and the illusion of intelligence

AI is a prediction machine, not a thinking one

Why AI feels intelligent to us

Human brain vs AI: efficiency matters

With that tiny amount of energy, it can:

AI systems, on the other hand:

So… is the computer still a dumb machine?

The right way to think about AI

Final thought

Why I Migrated My Backend from Go to Elixir/Phoenix

Let's create a tic-tac-toe with React.

Project setup

Let's build our app.

Breaking down our app into function.

💡 Extras

How to count lines of code you written.

Let's start

Example :

Important Custom React Hooks - (Part 1)

Prerequisites.

Project Setup

1.use-window-dimensions:

Testing our hook.

2. use-outside-click

Let's test it.

1.`use-window-dimensions`:

2. `use-outside-click`