DEV Community: S. Amir Mohammad Najafi

AI Brain vs. Human Mind: A Guide to How LLMs Really Work

S. Amir Mohammad Najafi — Thu, 10 Jul 2025 20:11:15 +0000

Have you ever wondered if the AI you’re chatting with thinks like you do? We see them producing poems, writing code, and answering complex questions, and it’s easy to assume their internal world is a lot like ours. As it turns out, the way a Large Language Model (LLM) “thinks” is fundamentally different from a human mind.

This guide will take you on a journey into the core differences between human and AI cognition. We’ll explore six key areas where our paths diverge, breaking down complex processes into simple, digestible explanations. By the end, you’ll have a much clearer mental model for what’s happening under the hood of an LLM.

1. Learning: Lived Experience vs. Pure Mathematics

The way we absorb information is the foundation of our intelligence. Both you and an AI learn, but the process couldn’t be more different.

How You Learn 🧠

Your brain is incredibly dynamic. It constantly rewires itself through a process called neuroplasticity. Think of your brain as a dense forest. Every time you learn something new-like riding a bike or memorizing a new command-you forge a new path. The more you use that information, the wider and clearer that path becomes.

Neuroplasticity is the brain’s ability to be easily shaped or molded. It occurs due to learning, experience, and memory formation. New experiences cause new neural pathways to strengthen, while pathways used infrequently become weak and eventually die off in a process called synaptic pruning.

This is why you can learn a powerful lesson from a single experience, like touching a hot stove once, and remember it for a lifetime. Your brain physically changes to store that memory. It’s an ongoing, adaptive process that happens with every new interaction with the world.

How AI Learns 🤖

An AI, like an LLM, learns through a much more mathematical process during a distinct “training” phase. It’s fed a colossal amount of text and data, and its learning happens through an algorithm called backpropagation.

Imagine the AI is taking a giant, multiple-choice test with billions of questions (e.g., “what word comes after ‘the cat sat on the…’?”). Initially, it guesses randomly. When it gets the answer (“mat”), it’s told how wrong its other guesses were. Backpropagation is the process of going backward and adjusting millions of internal “knobs,” or weights , ever so slightly, so the next time it’s a little less wrong. Repeat this millions of times, and the AI becomes incredibly good at predicting the next word in a sequence.

LLM Pruning: Similar to the brain’s synaptic pruning, LLM pruning is a process that simplifies a large model by selectively removing less important parts. This makes the model smaller and faster without significantly hurting its performance.

Unlike you, an LLM’s core knowledge is “frozen” after its training. It isn’t continuously learning from each new, individual conversation it has.

2. Processing: Weaving Meaning vs. Calculating Probability

Once knowledge is acquired, how is it used in the moment? Here, we see another fundamental split between interpreting meaning and performing math.

How You Process Information 🧠

Your brain is a master of parallel processing. Billions of your neurons can fire simultaneously, allowing you to handle multiple streams of information at once. When you read the word “apple,” you don’t just see letters. You might instantly:

Picture a red or green fruit.
Remember its taste and texture.
Think of Apple the company.
Recall the proverb “an apple a day…”

Your brain connects this single word to a vast, interconnected web of meaning, context, and memories almost instantly.

How AI Processes Information 🤖

An AI processes text in a much more linear, or sequential, fashion. It uses a method called tokenization to break down a sentence into pieces called tokens , which can be words or parts of words.

For an AI, “apple” is just a token. Based on its training, this token has a high mathematical probability of being associated with other tokens like “pie,” “tree,” or “iPhone.” To figure out which words are most relevant in a given sentence, it uses a powerful mechanism called “attention.”

Attention allows a model to weigh the importance of different words (tokens) in an input sequence when generating an output. This helps the model better understand context by focusing on the most relevant parts of the text.

This is an incredibly sophisticated form of pattern matching, but it lacks the rich, multi-sensory understanding that you have.

3. Memory: A Vast Library vs. A Temporary Whiteboard

Our ability to store and recall information is crucial. Here again, our approaches are worlds apart.

Your Memory System 🧠

Human memory isn’t a single thing. Psychologists often refer to the multi-store model of memory, which includes distinct systems working together:

Sensory Memory: A fleeting snapshot (less than 2 seconds) of what you just saw or heard.
Working Memory: Your mental “scratchpad.” It holds what you’re actively thinking about (around 7 items for about 15–30 seconds).
Long-Term Memory: Your vast, seemingly limitless storage for facts, experiences, and skills, which can last a lifetime.

Critically, your memory is associative. A smell can instantly trigger a childhood memory, or a song can transport you back to a specific moment. You learn and remember the relationships between unrelated items.

AI’s Memory System 🤖

An AI’s memory structure is much simpler. You can think of it in two main parts:

Long-Term Memory: This is the knowledge baked into its weights during training. It’s vast but fixed.
Working Memory: For an LLM, this is its context window.

Think of the context window as a whiteboard. It’s the space where your current conversation is written down. The AI can “see” everything on that whiteboard to inform its next response. However, this whiteboard has a fixed size. Once the conversation gets too long, the earliest parts get erased. The AI literally forgets what you talked about at the beginning of the conversation.

4. Reasoning: Applying Logic vs. Predicting Patterns

Are you a purely logical being? Is the AI truly reasoning with you? Let’s look at the difference between finding an answer and predicting what an answer should look like.

How You Reason 🧠

Nobel prize-winning psychologist Daniel Kahneman described our thinking as a tale of two systems:

System 1 is fast, intuitive, and automatic. It’s your gut reaction, like recognizing a face or answering “2+2”.
System 2 is slow, deliberate, and conscious. It’s the logical reasoning you use to solve a complex math problem or weigh the pros and cons of a big decision.

When you reason, you are consciously engaging System 2, working through a problem step-by-step and applying rules of logic to arrive at a conclusion.

How AI “Reasons” 🤖

An LLM is trained on the output of human System 2 thinking-all the logical, well-structured text on the internet. It has learned what reasoning looks like.

When you ask an AI to solve a problem, it isn’t logically thinking it through like you do. Instead, it’s generating a sequence of tokens that is statistically the most plausible “reasoning-like” text to follow your prompt. This is why it can sometimes fail at very simple logic puzzles that a child could solve. It doesn’t inherently grasp the rules of logic, only the textual patterns associated with it.

5. Errors: Filling Gaps vs. Mathematical Miscues

Both humans and AI can make things up. But the reasons why they do it reveal a key difference in their nature.

Human Error: Confabulation 🧠

When humans create false memories, it’s often a phenomenon called confabulation.

Confabulation is a memory error involving the production of fabricated, distorted, or misinterpreted memories about oneself or the world, without the conscious intention to deceive.

This isn’t intentional lying. It’s the brain’s good-faith attempt to fill in missing gaps in a memory to create a complete and coherent story. The person genuinely believes their fabricated memory is true. It’s a bug in our memory retrieval system.

AI Error: Hallucination 🤖

When an AI makes something up, it’s called a hallucination. (Though some argue confabulation is a better term).

This happens when the model, in its mathematical quest to find the most probable next token, generates text that is nonsensical or factually incorrect. It isn’t trying to fill a memory gap; it’s simply following its programming, which can sometimes lead it to produce very confident-sounding falsehoods. It’s a bug in its text-generation system.

6. Embodiment: A Lived Reality vs. A Read Reality

Finally, perhaps the biggest difference is our connection to the physical world.

Your Embodied Mind 🧠

You are an embodied being. Your thoughts and understanding are deeply shaped by the fact that you have a body and interact with the physical world. This is known as embodied cognition.

Your understanding of “heavy” comes from the experience of lifting things. Your understanding of “hot” comes from feeling warmth. This direct, first-hand experience gives you a foundation of common sense that is difficult to articulate but easy to use.

The Disembodied AI 🤖

An LLM is completely disembodied. It exists only as software on a server. It has never touched an object, felt the sun, or tasted food. Its entire knowledge of the physical world is second-hand, learned by reading descriptions written by humans who have.

This is why, despite its vast repository of facts, an AI can lack the most basic common sense about how the physical world operates.

Conclusion: Two Intelligences, One Future

Understanding these fundamental differences between human and AI cognition isn’t just academic-it’s the key to unlocking AI’s true potential. When we grasp that an LLM operates through mathematical pattern-matching rather than conscious understanding, we can better appreciate both what it excels at and where it falls short.

This comparison reveals why AI is extraordinary at tasks like processing vast amounts of information, generating creative content, and recognizing complex patterns across domains. Yet it also explains why AI struggles with common sense, physical reasoning, and tasks that require genuine understanding of lived experience.

You bring meaning, context, and embodied comprehension to every interaction. AI offers incredible speed, computational power, and access to patterns across human knowledge that no individual could ever master. The real magic happens when we stop asking whether AI thinks like us, and start leveraging these complementary strengths-using AI as a powerful thinking partner while contributing the uniquely human elements of wisdom, judgment, and genuine understanding.

From Curiosity to Craftsmanship: My Journey Through Anthropic’s Project Vend

S. Amir Mohammad Najafi — Tue, 08 Jul 2025 17:36:06 +0000

First off, I really suggest you read Anthropic’s original post if you haven’t already: Project Vend: Can Claude run a small shop? (And why does that matter?). Once you’re done, come on back. My goal here isn’t to critique their work-it was a fascinating research project, not a business plan. Instead, I want to use it as a launchpad for my own thinking, exploring how someone like me might approach building a similar system, focusing on the principles that could make it more robust.

Disclaimer: This is just a personal exploration fueled by a reading and a healthy dose of curiosity. I’m not a specialist in this field. If you have expertise and spot something I’ve misunderstood, please share your thoughts in the comments! I’d be genuinely grateful to learn.

The Core Idea That Sparked My Curiosity

Anthropic’s “Project Vend” was a fascinating experiment. They gave their AI model, Claude, a set of tools (web search, email, notes) and tasked it with running a small online shop for a month, interacting with customers through Slack. The outcome was a mixed bag. Claude managed to get some things done, but it struggled with profitability, made some logical blunders, and even seemed to have a bit of an “identity crisis,” at times believing it was a real person.

As I read through the technical details, one thought immediately popped into my head: it seemed like the whole operation was running within a single, very long conversational context. This raised a flag for me, not as a scientist, but as someone who tinkers with this technology. As that conversation history gets longer and longer, wouldn’t the model’s focus and accuracy start to drift?

This became the central question for my exploration. Let’s break down why this simple setup, perfect for an experiment, could be a real headache in a practical application.

The Limits of an Endless Dialogue

When you build an entire system on one continuous chat, you’re bumping up against some of the known limits of today’s language models. It got me thinking about three main challenges.

The Finite Context Window

LLMs have a memory limit, which is often called the “context window.” Think of it like a person’s short-term memory. As a conversation grows, older details can get pushed out or become less important. The model might forget a key piece of information from last Tuesday, which could lead to inconsistent or just plain wrong decisions.

The Snowball Effect of Errors

Here’s a scary thought: a small mistake early on can become the faulty foundation for everything that follows. If the AI miscalculates its inventory on day one, every future decision about restocking or analyzing sales will be built on that initial error. The mistakes don’t just happen; they compound over time.

The Challenge of Finding “Why”

When something inevitably goes wrong, how do you figure out the cause? Trying to perform a root-cause analysis on a massive, unstructured chat log would be a nightmare. It’s like trying to find one specific sentence in a novel that has no chapters. This “black box” problem makes the system incredibly difficult to debug, audit, or improve.

A Different Path: From Conversation to Architecture

So, if a single, endless chat isn’t the most reliable approach, what’s a better way to think about it? The solution, it seems, is to shift from a conversational model to an architectural one.

Instead of asking the AI to remember everything, we could build a system of distinct, manageable tasks that don’t rely on a long-term memory. It’s like moving from a single brilliant-but-forgetful employee to a well-organized team. Here’s how I imagine it:

Scheduled Tasks: Instead of hoping the AI remembers to check supplier prices, we could create an automated task. Every morning at 9 AM, it would call the AI with a very specific job: “Analyze these three websites for the best price and save the result here.”
Event-Driven Actions (like reflexes): When a customer buys something, that action triggers a specific AI task. For example, “A customer just bought one block of cheddar. Update the inventory count and check if the stock is below our reorder threshold.”
A Protective Layer (like a supervisor): Before the system actually spends money or sends an important email, the proposed action has to pass through a validation layer. This supervisor double-checks the decision against a set of rules. Is the price logical? Is the quantity reasonable? Does this align with our goals?

This approach feels much more robust, predictable, and transparent. And it turns out, the AI field has a whole vocabulary for these ideas, which is incredibly helpful for learning more.

Keywords for Building Smarter AI: A Learner’s Glossary

If you, like me, are curious about building systems like this, knowing the right search terms is half the battle. Here are the keywords that opened up a world of information for me.

Core Concepts & Architecture

AI Agent / Autonomous Agent : This is the big-picture concept. An AI Agent is a system designed to perceive its environment, make its own decisions, and take actions to achieve a goal. Our theoretical shopkeeper is a perfect example of an AI Agent. IBM has a great video explanation that breaks down this concept clearly.
AI Orchestration: This is the “scheduled tasks and reflexes” idea. Orchestration is all about coordinating different tools, models, and data sources to carry out a complex workflow. It’s the conductor of the AI symphony, making sure everything happens in the right order. Frameworks like LangChain and LlamaIndex are big names in this space.
Agentic Workflows: This means designing a process where different specialized agents or tools handle different steps. Instead of one AI doing everything, you might have one agent for analyzing data, another for drafting emails, and a third for validating actions.
Multi-Agent System : This is the concept of having multiple specialized agents working together, each with its own focus and expertise.
State Management: In this architectural approach, the system’s “state” (like inventory levels or customer orders) isn’t kept in the AI’s short-term memory. It’s stored safely in an external database. State management is simply the process of how this crucial data is stored, retrieved, and updated reliably.

Execution & Internal Logic

Function Calling / Tool Use : This is how modern LLMs connect to the outside world. It’s the ability that lets you give a model a “tool,” like your inventory API or your email client, and allow it to use that tool to get things done. It’s the bridge between the AI’s brain and real-world action.
Task Decomposition : This is the skill of breaking a big, vague goal (like “make more money”) into small, concrete sub-tasks (“1. Check current inventory. 2. Find cheaper suppliers. 3. Analyze competitor prices.”). The AI Orchestrator is often in charge of this.
ReAct (Reason, Act) : A popular mental model for how an agent should operate. The model first Reasons about what it needs to do and which tool it should use, then it Acts by using the tool. It repeats this cycle until the job is done.
CoT (Chain of Thought) : This is a technique where the model explains its reasoning step-by-step before taking action. It’s like having the AI talk through its thought process, which can help catch mistakes before they happen.

Safety & Control

AI Guardrails / Output Filtering: This is the “supervisor” or “protective layer” we talked about. Guardrails are rules, filters, or even other AI models that check the primary LLM’s output before an action is taken. You’ve probably seen this in action when a chatbot starts writing a response, then suddenly clears it and says “I can’t answer this question”-that’s guardrails at work. Leading companies often use more specific terms like “AI Safety,” “AI Alignment,” or “Constitutional AI” when discussing these concepts in their research.
Output Parsing and Validation: This is a specific type of guardrail. It’s a process that makes sure the model’s output is in the correct format (e.g., proper JSON) and that the data inside makes sense (e.g., you can’t order -5 wheels of cheese).
Constitutional AI: A concept pioneered by Anthropic itself. It involves giving the LLM a core “constitution”-a set of principles it must always follow. It’s like building a moral compass directly into the agent to ensure its behavior stays aligned with its purpose.

Explore These Ideas Further

Want to dive deeper into these AI orchestration and agentic workflow concepts? I’ve created an interactive conversation about these principles using Google’s NotebookLM. You can chat with an AI about these ideas here — it’s a great way to explore questions, get clarifications, or discuss how these concepts might apply to your own projects.

Conclusion: The Craftsmanship of AI

Exploring the “what-ifs” of Project Vend took me from a simple point of curiosity to a much richer understanding of how these systems can be built. We’re no longer just talking to a chatbot; we’re thinking about designing an AI Orchestration for an Agentic Workflow , using Function Calling to interact with the world, all while being protected by robust AI Guardrails.

This shift in perspective feels like the heart of modern craftsmanship in technology. It’s about using these incredibly powerful new tools not just to build something that kind of works, but to build it with care, intention, and foresight. The most exciting question isn’t just “What can AI do?” but “How can we build it with purpose and wisdom?”

Learning in Progress: This blog post represents my ongoing exploration of AI orchestration and agentic workflows. As I continue to learn and experiment with these concepts, I may update this post with new insights, corrections, or additional resources. Consider this a living document that reflects my evolving understanding of the field.

Originally published at https://www.njfamirm.ir.

Mastering Eleventy Folder Structures: From Default Setups to Real-World Best Practices

S. Amir Mohammad Najafi — Mon, 29 Jan 2024 15:03:36 +0000

Introduction

Welcome to the exciting world of Eleventy, a powerful and flexible static site generator based on jamstack! Whether you’re a seasoned developer or just starting out, understanding how to effectively organize your Eleventy project is crucial for efficiency and scalability. In this guide, we’ll embark on a journey from the simplicity of Eleventy’s default folder structure to the sophistication of a customized setup tailored for more complex projects.

For the complete store, read the full article on my blog 🙌🏻. 🙌🏻

In-Depth Look at Eleventy’s Basic Setup

Eleventy, known for its simplicity and flexibility, starts users off with a straightforward folder structure. This design is particularly appealing to beginners or those looking to quickly set up a static site without the complexity often associated with such setups. Let’s delve deeper into each component of this default structure:

1. Input

The input directory is denoted by a dot (.), representing the current directory where the Eleventy command is run. This approach means that all the files and subdirectories within this directory are considered part of your project's source. It simplifies the process by not requiring a specific folder for your source files, allowing Eleventy to work with your project's root directory directly.

2. Includes

The _includes directory is where Eleventy looks for templating parts - reusable pieces of your templates, like headers, footers, and navigation bars. This feature is crucial for avoiding repetition, as it allows you to maintain consistent elements across various parts of your website easily. By default, Eleventy treats this folder as the go-to place for these template snippets, helping you to organize your project better. this folder where is you can use the include tag to include a template part in another template.

3. Layouts:

In Eleventy’s default setup, layouts are often placed in the same _includes directory. Layouts are essentially templates that define the structure of a webpage. By placing layouts in the _includes folder, Eleventy offers a streamlined approach, keeping all template-related files in one location. However, as projects grow, some developers prefer to separate layouts into their own directory for clearer distinction and organization

4. Global Data

The _data folder is a powerful feature in Eleventy. It's used for storing global data files that can be accessed by any template across the site. This could include site metadata, configuration settings, or any other data that needs to be available site-wide. The data in these files can be written in various formats like JSON, JavaScript, or YAML, providing flexibility in how you manage your site's content and settings.

5. Output: _site

Finally, the _site directory is the default output location where Eleventy generates the final, built version of your site. After running Eleventy, this folder contains the HTML, CSS, JavaScript, and other assets that make up your website, ready to be deployed to a web server or CDN. This separation of source and output is critical for maintaining a clean workspace, ensuring that your development files are kept separate from the deployable, built site.

Here’s the visual representation of this structure:

├── _data # Global data files
├── _includes # Template parts and layouts
├── . # Main input directory (root of your project)
└── _site # Output directory for the built website

Understanding this default structure is key to getting started with Eleventy. It offers a balance of simplicity and organization, making it an ideal starting point for building static websites. As you grow more familiar with Eleventy, you may find ways to customize this structure to better suit the needs of more complex projects.

Implementing a Real-World Advanced Folder Structure

In the ever-evolving world of web development, Eleventy projects often outgrow their initial folder structures, revealing the need for a more sophisticated organization as they expand in complexity and size. This progression necessitates a refined approach to effectively handle a growing array of files, diverse content types, and the nuances of complex build processes. Embracing an advanced folder structure, fundamentally grounded in the Separation of Concerns (SoC) principle, becomes critical.

💡 Separation of Concerns : This pivotal design principle involves dividing a computer program into distinct sections, each focusing on a unique aspect of the software’s functionality. Applied to web development and particularly Eleventy projects, SoC means organizing files and folders to independently manage each type of file or functionality. This strategic compartmentalization significantly boosts a project’s readability, maintainability, and scalability. For a detailed exploration of SoC, Wikipedia provides extensive insights.

Crucially, in implementing this structure, remember that the essence lies in the functional separation of the folders rather than their specific names. Folder names can vary widely based on individual preferences or project requirements, underscoring the importance of a tailored approach to folder organization in Eleventy projects.

Continue reading the article on my blog 🙌🏻

Separating Commits in Git: A Guide to Streamlining Your Workflow

S. Amir Mohammad Najafi — Thu, 16 Nov 2023 18:51:29 +0000

Hi everyone,

Today I want to speak about a problem that I have in my daily work with Git when using a trunk-based deployment pattern, and how can solve it with some commands.

First, we need to know about trunk-based deployment, then I will present my problem.

Let's dive in!

What is Trunk-based deployment?

TDB, or Trunk-based pattern is a modern way for developers to work together using version control, where each developer divides their work into small batches and merges that work into the trunk at least once a day.

The key difference between this approach and git-flow workflow is scope.

Feature branches typically involve multiple developers and take days or even weeks of work. In contrast, branches in TDB typically last no more than a few hours, with many developers merging their changes into the trunk frequently.

The above paragraph was taken from the Google Cloud article about DevOps in trunk-based development, you can refer to this article for more information.

Our problem

Sometimes it happens that we want to create a feature that depends on several packages, and generally, we have to do several things together and then create a pull request.

At this time, it will be perfect to easily commit wherever we want, and after finishing the work, we can apply according to the rules of TBD pull request, and all our code can be easily reviewed and merged.

There are two git commands we need to learn for solving this problem. I'll explain briefly below, but you can skip it if you already know them.

Git rebase

Rebasing is the process of moving or combining a sequence of commits to a new base commit. changing the base of your branch from one commit to another making it appear as if you'd created your branch from a different commit. Internally, Git accomplishes this by creating new commits and applying them to the specified base.

read more about this command on the Atlassian blog.

Git cherry-pick

Cherry-pick enables arbitrary Git commits to be picked by reference and appended to the current working HEAD. Cherry picking is the act of picking a commit from a branch and applying it to another.

read more about this command on the Atlassian blog.

Solution

Now that we know about Trunk-based deployment, git rebase, and git cherry-pick commands, we can use them to solve our problem of having multiple commits from multiple packages and features in a single branch.

Let's say we have a commit history like this:

This is a bad situation because it makes the review process too long and complicated. We need to separate these commits into multiple branches, one for each feature and package.

Let's start by separating the first and last commits, which are about the package-1 feature. These two commits only change a single feature in a single package , so they are a good candidate for separation.

First, create a new branch from the trunk branch, then, we need to copy the hash of these two commits. and we can use the git cherry-pick command to copy them into a new branch called feat/package-1.

git switch -c feat/package-1 origin/next
git cherry-pick <hash of first commit>
git cherry-pick <hash of second commit>

if you have a conflict when want to cherry-pick, you must first rebase your branch with a trunk to resolve any conflict, if you still have conflict, that's occurred maybe because you don't commit correctly! you can use rebase to fix the commit issue.

Now we have a new branch with new two commits. We can create a pull request for this branch and merge it into the trunk branch.

Once the pull request is approved and merged, we can rebase the first branch with the trunk branch.

This will remove the two commits from the first branch and keep our commit history clean, then you must force push the branch.

We can use the same process to separate the other commits in our history. This will give us a nice, clean commit history with one commit per feature and package, with a full cover of the trunk-based deployment pattern.

In the end, I have shared my shell function, used by me daily for separating commits:

gsep () {
  currentBranch=$(git rev-parse --abbrev-ref HEAD) && \
  git fetch origin && \
  git switch -c feat/$1 origin/next && \
  shift && \
  git cherry-pick $@ && \
  git push -u && \
  gh pr create -a @me --base next --fill --web && \
  git switch $currentBranch;
}

This function takes the name of a feature as its argument and creates a new branch called feat/$1. It cherry-picks the specified commits into the new branch and creates a pull request for it. then switches back to the original branch.

I hope this article will help you to have a better experience with git and trunk-based deployment.

Thanks for reading!

Creating a Searchable Reading List with Strapi CMS Custom API

S. Amir Mohammad Najafi — Thu, 16 Nov 2023 18:51:29 +0000

Hi everyone!

As programmers, we are constantly learning and reading articles, blog posts, and documentation. Maybe this is the most important part of programming lifestyle!

Unfortunately, we do not keep those resource anywhere, and even if we keep them on our notes because it is not accessible through searching, we can't access them anymore.

Idea

An interesting solution for our problem is a searchable reading list that's I got this idea from the esif.dev blog.

At the end, you can setup and maintain a searchable-reading-list of valuable resources that you encounter during your programming journey!

Roadmap

Since we may read several articles in a day and need to put it in the reading-list, We needed to have a CMS, so that I could put the links there very quickly and easily and not think about anything else.

Also, our reading list page should work with the API and not need to be built statically like other pages with Eleventy. So I decided to use Strapi as a beautiful, dynamic, and easy-to-use CMS.

Preparing the environment

Before we can start building our reading-list, we need to create a new Strapi project.

yarn create strapi-app reading-list --ts

Create Content Type

First, we need to create a content-type that we can put our reading-list in, So to create a content type for our reading-list, we can use the Strapi CLI and run the following command in our project directory. This will generate a new content type with the specified name and fields.

This command will create a new content type called reading-list and generate the necessary files and fields to get started building our custom API.

yarn strapi generate

  ? Strapi Generators content-type - Generate a content type for an API
  ? Content type display name Reading List
  ? Content type singular name reading-list
  ? Content type plural name reading-lists
  ? Please choose the model type Collection Type
  ? Use draft and publish? No
  ? Do you want to add attributes? Yes
  ? Name of attribute title
  ? What type of attribute string
  ? Do you want to add another attribute? Yes
  ? Name of attribute url
  ? What type of attribute string
  ? Do you want to add another attribute? Yes
  ? Name of attribute keyword
  ? What type of attribute text
  ? Do you want to add another attribute? Yes
  ? Name of attribute description
  ? What type of attribute richtext
  ? Do you want to add another attribute? Yes
  ? Name of attribute keyword
  ? What type of attribute text
  ? Do you want to add another attribute? No
  ? Where do you want to add this model? Add model to new API
  ? Name of the new API? reading-list
  ? Bootstrap API related files? Yes
  ✔ ++ /api/reading-list/content-types/reading-list/schema.json
  ✔ +- /api/reading-list/content-types/reading-list/schema.json
  ✔ ++ /api/reading-list/controllers/reading-list.ts
  ✔ ++ /api/reading-list/services/reading-list.ts
  ✔ ++ /api/reading-list/routes/reading-list.ts

This is a base schema, but we can improve them by adding regex and unique to the url field and also making the title and the url required, this is result of the schema can put under api/reading-list/content-types/reading-list/schema.json:

{
  "kind": "collectionType",
  "collectionName": "reading_lists",
  "info": {
    "singularName": "reading-list",
    "pluralName": "reading-lists",
    "displayName": "Reading List",
    "description": ""
  },
  "options": {
    "draftAndPublish": false
  },
  "attributes": {
    "title": {
      "type": "string",
      "required": true
    },
    "url": {
      "type": "string",
      "regex": "https?:\\/\\/(www\\.)?[-a-zA-Z0-9@:%._\\+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_\\+.~#?&//=]*)",
      "required": true,
      "unique": true
    },
    "description": {
      "type": "richtext"
    },
    "keyword": {
      "type": "text",
      "required": false
    }
  }
}

Very good, Now we have simple reading list in strapi, let's make them searchable!

Search Custom API

In this step we'll use the strapi-generate command again to creates a custom API pure file structure.

yarn strapi generate

  ? Strapi Generators api - Generate a basic API
  ? API name reading-list-search
  ? Is this API for a plugin? No
  ✔ ++ /api/reading-list-search/routes/reading-list-search.ts
  ✔ ++ /api/reading-list-search/controllers/reading-list-search.ts
  ✔ ++ /api/reading-list-search/services/reading-list-search.ts

Now we need to fill the files with the correct codes.

Service

Services are a set of reusable functions to simplify controllers' logic. ^ReadMore

In this step, we use the service to create a function to get the reading list and filter them. The keyword parameter is used to filter the reading-list based on their keywords, and if no keyword is given, it returns all content of reading-list.

api/reading-list-search/services/reading-list-search.js:

import {errors} from '@strapi/utils';

async function search(keyword?: string) {
  try {
    const entries = await strapi.entityService.findMany('api::reading-list.reading-list', {});

    let filteredEntries = entries;
    if (keyword) {
      filteredEntries = entries.filter((entry) => {
        const keywords = entry.keyword.split('\n').map((keyword) => keyword.trim());
        return keywords.includes(keyword);
      });
    }

    return filteredEntries;
  } catch (err) {
    throw new errors.ApplicationError('Something went wrong');
  }
}

export default {search};

this function first gets reading-list with findMany and then filters them using the typescript filter function.

Controller

Controllers contain a set of methods, called actions, reached by the client according to the requested route. ^ReadMore

To write a controller for the reading-list search function, set the content of the api/reading-list-search/controllers/reading-list-search.js file something like this to pass keyword search query into search service function.

async function search(ctx) {
  try {
    return await strapi.service('api::reading-list-search.reading-list-search').search(ctx.request.query.keyword);
  } catch (err) {
    ctx.badRequest('Reading list search controller error', {detail: err});
  }
}

export default {search};

Route

Requests sent to Strapi on any URL are handled by routes. ^ReadMore

We must add this endpoint and sets the previous controller as the route handler, put this code to api/reading-list-search/routes/reading-list-search.ts:

export default {
  routes: [
    {
      method: 'GET',
      path: '/reading-list-search',
      handler: 'reading-list-search.search',
      config: {
        policies: [],
      },
    },
  ],
};

Now this route is accessible at /api/reading-list-search, of course if we do the next step 🤓!

Set Permission

By default, this API can't be accessible publicly so set the correct permission.

Result

Congratulations 🎉, we create a custom API for searching in our reading-list using Strapi CMS.

I hope this article is useful for you, and it is a step towards a society where we grow together ♥️

Thanks @derrickmehaffy for improve this article.

Lorem-ipsum.ir launched!

S. Amir Mohammad Najafi — Thu, 16 Nov 2023 18:51:29 +0000

Hi everyone 🙌🏻

Recently I was looking for a website that would simply generate lorem ipsum text to use in my project. Suddenly I realized a disaster!

A request has been sent to the backend service to generate any lorem text! Unfortunately, this was not the only case, perhaps the best of its kind. At least this website had more features.

After this, I decided to create a lorem ipsum generator website with my friends.

Why?

Many people have built such a website, yes I know!

But the claim of this project is not that we are the best or that we are something new. It has only tried to improve the same old idea, and of course, the main purpose of this project was education.

How?

We need to create a website to generate lorem text and copy them to the user's clipboard. Simply and nothing else!

But our difference from other websites is that all the work is done in the client (user's browser), So we follow the Jamstack architecture, The core principles of Jamstack is pre-rendering, and so website need just serve static files on the CDN, without any server-side code. This means that the website is very fast.

So we use Eleventy to build our website. This is a simple, fast and customizable static site generator(SSG), and using Alwatr's 11ty starter-kit called 12fy(11ty++) for this project, This starter kit uses esbuild to build Typescript/Javascript, postcss to build CSS, and tailwindcss for styling, The combination of different build tools provides a completely optimal output.

Process

After we have decided what we can use for the project, we need to consider our needs.

On the main page, we need a toolbox to generate lorem text, which includes the following:

A segmented button for lorem type, paragraph, sentence and keyword.
A segmented button for number of lorem text.
A texture to display the lorem text.
A button to copy the text to the clipboard.

At the bottom of the page, a simple text and image to explain what Ipsum lorem is, this is good for search engine optimization.

And this is the result:

Next we need to add some JavaScript code to make the toolbox dynamic. This is where the Jamstack architecture differs. We use JSON to store lorem text in them with 3 keys, paragraph, sentence and keyword. which can be seen in this json file. This json bundled in our js code and do not additional request sent for it in client.

Then, write js code to generate the text and place it in the textarea of the toolbox, based on the user input from the segmented buttons. And at the end we add an event listener for the copy button to copy the text to the clipboard. And that's it ⚡️

Result

Is Done 🎉, and this is Page Speed result:

Check out the live version of this project at lorem-ipsum.ir and enjoy it. Also view the source code of this project on GitHub

Future

The main process of the website is done, in the next step we want to:

Add more languages, especially English
Add more lorem like text.
Lorem random text.
and more ...

All task is on Github Project and you can see them. contributing is welcome ❤️.

Thanks

You for reading this post.
Sajjad Siadati, Amir Hossein Abbasi for contributing in this website.
Jamstack for this amazing architecture.
Eleventy for this amazing static site generator.
Alwatr for this amazing starter kit.

Conclusion

I hope you enjoyed this post, if you have any questions or suggestions, please let me in twitter @njfamirm know.

Separating Commits in Git, A Guide to Streamlining Your Workflow

S. Amir Mohammad Najafi — Thu, 10 Aug 2023 20:24:22 +0000

Photo by Arnaud Mesureur on Unsplash

Hi everyone,

Today I want to speak about a problem that I have in my daily work with Git when using a trunk-based deployment pattern, and how can solve it with some commands.

First, we need to know about trunk-based deployment, then I will present my problem.

Let’s dive in!

You can read faster this post on my blog.

What is Trunk-based deployment?

source: https://launchdarkly.com/blog/git-branching-strategies-vs-trunk-based-development/

The above paragraph was taken from the Google Cloud article about DevOps in trunk-based development, you can refer to this article for more information.

Our problem

There are two git commands we need to learn for solving this problem. I’ll explain briefly below, but you can skip it if you already know them.

Git Rebase

Rebasing is the process of moving or combining a sequence of commits to a new base commit. changing the base of your branch from one commit to another making it appear as if you’d created your branch from a different commit. Internally, Git accomplishes this by creating new commits and applying them to the specified base.

source: https://www.atlassian.com/git/tutorials/rewriting-history/git-rebase

read more about this command on the Atlassian blog.

Git cherry-pick

Cherry-pick enables arbitrary Git commits to be picked by reference and appended to the current working HEAD. Cherry picking is the act of picking a commit from a branch and applying it to another.

read more about this command on the Atlassian blog.

Solution

Let’s say we have a commit history like this:

Pull request with a multi commit in separate package and feature

This is a bad situation because it makes the review process too long and complicated. We need to separate these commits into multiple branches, one for each feature and package.

Let’s start by separating the first and last commits, which are about the package-1 feature. These two commits only change a single feature in a single package , so they are a good candidate for separation.

First, create a new branch from the trunk branch, then, we need to copy the hash of these two commits. and we can use the git cherry-pick command to copy them into a new branch called feat/package-1.

git switch -c feat/package-1 origin/next
git cherry-pick <hash of first commit>
git cherry-pick <hash of second commit>

Git commits for separating commits from another branch

if you have a conflict when want to cherry-pick, you must first rebase your branch with a trunk to resolve any conflict, if you still have conflict, that’s occurred maybe because you don’t commit correctly! you can use rebase to fix the commit issue.

Rebase branch with trunk branch

This will remove the two commits from the first branch and keep our commit history clean, then you must force push the branch.

Cleaner commit history

In the end, I have shared my shell function, used by me daily for separating commits:

gsep () {
  currentBranch=$(git rev-parse --abbrev-ref HEAD) && \
  git fetch origin && \
  git switch -c feat/$1 origin/next && \
  shift && \
  git cherry-pick $@ && \
  git push -u && \
  gh pr create -a @me --base next --fill --web && \
  git switch $currentBranch;
}

This function takes the name of a feature as its argument and creates a new branch called feat/$1. It cherry-picks the specified commits into the new branch and creates a pull request for it. then switches back to the original branch.

I hope this article will help you to have a better experience with git and trunk-based deployment.

Thanks for reading and sharing 💎

A Step-by-Step Guide to Self-Hosting Decap CMS

S. Amir Mohammad Najafi — Sun, 23 Jul 2023 14:52:08 +0000

Hi everyone!
In this article, I'll show you how to host your own Decap CMS (former Netlify-CMS) backend without the need for another external service.

By the end of this article, you will be able to host Decap CMS and have a fully functional content management system that you can use to build your website or blog.

Let's start

Create OAuth Application

To create an OAuth application, you will need to:

Go to the Github OAuth settings from Settings > Developer Settings > OAuth Apps > Generate New
In the Application name field, enter a name for your application.
In the Homepage URL field, enter the URL of your website.
In the Authorization callback URL field, enter the URL that will be redirected to after authentication. This URL will depend on your Decap CMS backend. In this post, we will set the callback URL to ${siteURL}/callback.

Once you have entered all of the required information, click Create Application.

Then when the application is created, save the Client ID and create new Client secrets for use in the last step.

Add CMS to the Website

First, you must install Decap-CMS:

yarn add netlify-cms-app

Then add admin html and javascript/typescript file like below:

admin.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex" />
    <title>Website | Admin Panel</title>
  </head>
  <body>
    <script type="module" src="admin.js"></script>
  </body>
</html>

admin.js

import CMS from 'netlify-cms-app'

CMS.init()

If you're using Hugo, to add an admin panel to the /admin address, you can add admin/_index.md to the content folder and also _default/admin.html to layouts.

To speed up load time you can use a Javascript bundler to minify and treeshake the netlify-cms-app package.

Something like this in Hugo uses esbuild to minify and treeshake:

{{ $js := resources.Get "/admin.js" | fingerprint | js.Build (dict "minify" true "treeShake" true) }}
<script src="{{ $js.RelPermalink }}"></script>

Setup Backend

Based Decap-CMS documentation
you can use an external OAuth client.
I'm testing ublabs/netlify-cms-oauth with vercel and this work correctly, but our goal was to run on our own servers, not on another PaaS! so I'm rewriting this to run with NodeJS with packages I was using! and publish them to decap-cms-github-backend, this repo also publishes a docker image of Decap CMS GitHub backend to ghcr.io, so we can use this to deploy own backend!

Now you can add a docker image into your deployment process with this envs:

CMS_GITHUB_BACKEND_IMAGE='ghcr.io/njfamirm/decap-cms-github-backend:main'

OAUTH_GITHUB_CLIENT_ID=your_oauth_github_client_id
OAUTH_GITHUB_CLIENT_SECRET=000_your_oauth_github_client_id_000

# Enable debug logging
# CMS_BACKEND_DEBUG=1

and docker compose like this:

services:
  cms-backend:
    image: ${CMS_BACKEND_IMAGE}

    restart: unless-stopped

    environment:
      - OAUTH_GITHUB_CLIENT_SECRET=${OAUTH_GITHUB_CLIENT_SECRET}
      - OAUTH_GITHUB_CLIENT_ID=${OAUTH_GITHUB_CLIENT_ID}
      - ALWATR_DEBUG=${CMS_BACKEND_DEBUG-}

Setup `admin.yml` File

Amazing, almost all thing is done, just need to add Decap-CMS into the admin config.yml file like this:

backend:
  name: github
  branch: main
  repo: njfamirm/amazing-oauth
  base_url: https://auth.amazing-oauth.name/

now when you deploy the backend, can login by going to the https://amazing-oauth.name/admin page and get access to the CMS to push commit, create and merge PR in your repo!

Enjoy like a freed bird from the cage ✌🏻💎

I hope this article was useful for you!

DEV Community: S. Amir Mohammad Najafi

AI Brain vs. Human Mind: A Guide to How LLMs Really Work

1. Learning: Lived Experience vs. Pure Mathematics

How You Learn 🧠

How AI Learns 🤖

2. Processing: Weaving Meaning vs. Calculating Probability

How You Process Information 🧠

How AI Processes Information 🤖

3. Memory: A Vast Library vs. A Temporary Whiteboard

Your Memory System 🧠

AI’s Memory System 🤖

4. Reasoning: Applying Logic vs. Predicting Patterns

How You Reason 🧠

How AI “Reasons” 🤖

5. Errors: Filling Gaps vs. Mathematical Miscues

Human Error: Confabulation 🧠

AI Error: Hallucination 🤖

6. Embodiment: A Lived Reality vs. A Read Reality

Your Embodied Mind 🧠

The Disembodied AI 🤖

Conclusion: Two Intelligences, One Future

From Curiosity to Craftsmanship: My Journey Through Anthropic’s Project Vend

The Core Idea That Sparked My Curiosity

The Limits of an Endless Dialogue

The Finite Context Window

The Snowball Effect of Errors

The Challenge of Finding “Why”

A Different Path: From Conversation to Architecture

Keywords for Building Smarter AI: A Learner’s Glossary

Core Concepts & Architecture

Execution & Internal Logic

Safety & Control

Explore These Ideas Further

Conclusion: The Craftsmanship of AI

Mastering Eleventy Folder Structures: From Default Setups to Real-World Best Practices

Introduction

In-Depth Look at Eleventy’s Basic Setup

1. Input

2. Includes

3. Layouts:

4. Global Data

5. Output: _site

Implementing a Real-World Advanced Folder Structure

Separating Commits in Git: A Guide to Streamlining Your Workflow

What is Trunk-based deployment?

Our problem

Git rebase

Git cherry-pick

Solution

Creating a Searchable Reading List with Strapi CMS Custom API

Idea

Roadmap

Preparing the environment

Create Content Type

Search Custom API

Service

Controller

Route

Set Permission

Result

Lorem-ipsum.ir launched!

Why?

How?

Process

Result

Future

Thanks

Conclusion

Separating Commits in Git, A Guide to Streamlining Your Workflow

What is Trunk-based deployment?

Our problem

Git Rebase

Git cherry-pick

Solution

A Step-by-Step Guide to Self-Hosting Decap CMS

Create OAuth Application

Add CMS to the Website

Setup Backend

Setup admin.yml File

Setup `admin.yml` File