DEV Community: The Builder

Stop Searching Your Tabs: Auto-Rename Terminator Tabs with Neovim & Zsh

The Builder — Wed, 25 Mar 2026 17:51:46 +0000

If you’re like me, you usually have ten different terminal tabs open: one for the server, one for Neovim, a folder, one for the database, and maybe a few others for "vibe coding" sessions.

The problem? Terminator (and most emulators) defaults to showing the process name like zsh or nvim. It's a nightmare to find the right project!

Here is how I configured my Linux setup to automatically show the Folder Name in the tab whenever I run nvim . or move between projects.

The Goal

When I’m in /home/user/projects/project_name and I hit nvim ., I want my tab to say project_name, not nvim.

Step 1: Force Neovim to Talk to Your Terminal

Neovim is powerful enough to send "escape sequences" to your terminal emulator. We want it to set the titlestring to our current folder name on startup.

Open your Neovim config (e.g., init.lua or your custom config) and add this:

-- 1. Enable title support
vim.opt.title = true

-- 2. Create a function to grab the folder name and set the title
vim.api.nvim_create_autocmd({"VimEnter", "DirChanged"}, {
  callback = function()
    -- This gets the "tail" of the current working directory (the folder name)
    local folder_name = vim.fn.fnamemodify(vim.fn.getcwd(), ":t")
    vim.opt.titlestring = folder_name
  end,
})

-- 3. Reset the title when you quit Neovim
vim.api.nvim_create_autocmd("VimLeave", {
  callback = function()
    vim.opt.titlestring = "" 
  end,
})

Step 2: Fix Your Shell (Zsh)

What if you aren't in Neovim? You still want your tabs to be labeled correctly. Add this "hook" to your ~/.zshrc:

# Auto-rename tab to current folder name
function chpwd() {
  # This escape sequence \e]2; sets the window/tab title
  # ${PWD##*/} is a Zsh shortcut to get just the current folder name
  print -Pn "\e]2;${PWD##*/}\a"
}

# Set the title immediately when you open a new terminal
print -Pn "\e]2;${PWD##*/}\a"

Reload with source ~/.zshrc and you're good to go!

Step 3: Check Your Terminator Preferences

If it’s still not working, Terminator might be overriding your titles.

Right-click in Terminator > Preferences.
Go to Profiles > General.
Ensure "Show terminal title" is checked.
Set "Title Bar" to "Initial Title" or ensure it isn't set to a static string like "Terminal."

Is Node.js your best introduction to the Backend?

The Builder — Mon, 05 Jan 2026 19:00:03 +0000

Most new developers are told to start their backend journey with Node.js. The logic seems flawless: "You already know JavaScript from the frontend, so why learn a new language?"

But here’s the reality: learning backend development with Node.js is like learning how to drive in a Formula 1 car.

It’s incredibly fast, highly optimized, and capable of extreme performance. But it also lacks power steering, the brakes are touchy, and if you don’t know exactly what you’re doing, you’ll spin out before you even reach the first turn.

The Challenge: Speed Without Structure

Node.js (and its popular frameworks like Express) is unopinionated. This is a fancy way of saying it doesn't care how you organize your house. For a pro, that’s freedom. For a beginner, it’s a trap.

The "Wild West" Problem: Without a traditional framework to guide you, beginners often write "spaghetti code." You’re forced to decide how to handle folders, routing, and database connections from scratch.
The Async Trap: JavaScript’s non-blocking nature is its superpower, but managing "Promises" and "Async/Await" while also trying to learn how a database works is a recipe for cognitive overload.

The Alternative: The "Reliable Sedan" Approach

If you want to understand how a server actually runs, you need a stack that is challenging but understandable. You need an environment that teaches you the patterns used by professional engineers for decades.

This is why I often recommend the Python and Django stack as the "Gold Standard" for traditional learning. It isn't just about Python being easier to read (though it is); it’s about the Architectural Blueprint the framework provides.

Why Django is the Ultimate Teacher

Django is "batteries-included." It doesn't just give you a motor; it gives you the whole car, a GPS, and a manual.

The MVT Pattern: Django forces you to learn the Model-View-Template pattern which is based off the well known MVC pattern. This structure teaches you exactly where data lives, how it’s processed, and how it’s displayed.
The Built-in ORM: In the JS world, you have to choose between five different libraries to talk to a database. Django has a world-class ORM built-in. It teaches you how data relationships (like "One-to-Many") work without you having to write raw SQL on day one.
The "Secret Weapon" Admin: One of the hardest parts of backend is that you can’t "see" your work. Django automatically generates a professional dashboard for your database. Being able to see your data immediately provides that "instant feedback" that turns "garbage input" into "comprehensible learning."

The Roadmap

If you want to avoid mental stagnation, stop chasing the "fastest" tool and start using the "clearest" one.

Start with the "Sedan" (Django): Let the framework teach you the rules of the road—architecture, security, and data modeling.
Graduate to the "F1 Car" (Node.js): Once you have that mental blueprint, moving to a high-speed, unopinionated environment will feel like a natural power-up rather than a confusing wreck.

In 2026, the best developers aren't the ones who know the most tools; they are the ones who understand the fundamental patterns of how software is built.

Django Tip: Why Your Static Files Disappear When DEBUG = False

The Builder — Tue, 16 Sep 2025 21:31:42 +0000

If you’ve ever been happily styling your Django project and then suddenly lost all your CSS and JavaScript after setting DEBUG = False, you’re not alone. This “disappearing static files” issue is one of the first surprises many Django developers run into when moving from development to production.

Let’s unpack why this happens, and how to fix it.

Why it works with `DEBUG = True`

When you’re building locally with DEBUG = True, Django’s runserver is designed to make your life easier. It automatically serves your static files using the django.contrib.staticfiles app. You don’t need to configure anything special — your CSS, JavaScript, and images just show up.

This is fine for development. But Django’s philosophy is that in production you should use a dedicated web server or middleware for serving static files. Why? Because web servers like Nginx or Apache (or CDNs) are optimized for serving static assets efficiently, while Django is not.

What happens when DEBUG = False

Once you flip that setting, Django stops serving static files altogether. If you haven’t set up an alternative way to serve them, you’ll instantly notice that your site is broken — no styles, no images, no scripts.

This isn’t a bug; it’s by design. It’s Django’s way of reminding you:

“In production, static file handling is your responsibility.

How to fix it (the right way)

Here’s the proper workflow once you’re ready to run with DEBUG = False:

Tell Django where to collect your static files In your settings.py, add:

STATIC_ROOT = BASE_DIR / "staticfiles"

Run the collectstatic command This command gathers all static files from your apps and places them into the STATIC_ROOT`folder.

python manage.py collectstatic

Serve those files with a proper solution

Web server option: Configure Nginx or Apache to serve the contents of your STATIC_ROOT.

Middleware option: Use Whitenoise, which allows Django to serve static files in production without an external server. This is a common approach for simpler deployments (like on Heroku).

Key takeaway

Django makes static files easy to work with during development, but it hands over the responsibility once you go to production. That’s why your static files vanish when you set DEBUG = False.

Understanding this behavior early on saves hours of confusion and makes your deployment process much smoother.

So next time you see your CSS disappear, don’t panic, just remember: Django doesn’t serve static files in production; you do.

Fixing XAMMP "phpMyAdmin tried to connect to the MySQL" Error: A Guide to Configuring phpMyAdmin and MySQL connection

The Builder — Thu, 25 Apr 2024 20:06:23 +0000

If you're experiencing the error "phpMyAdmin tried to connect to the MySQL server, and the server rejected the connection," there's a good chance that the issue is related to incorrect configuration settings in your MySQL server. This error can happen due to various reasons, including incorrect host, username, password, or port settings or a faulty phpMyAdmin configuration. One common solution is to ensure that MySQL is configured to use the correct port. In this article, we'll walk you through the steps to resolve this error by configuring MySQL.

Understanding the Error

Check phpMyAdmin connection

When phpMyAdmin is unable to connect to the MySQL server, it typically suggests a misconfiguration in one or more of the following areas:

Host: The MySQL server's address.
Username: The MySQL username used to connect.
Password: The corresponding password.
Port: The port number on which MySQL is listening (typically 3306).

To fix this error, we'll focus on ensuring that MySQL is listening on port 3306, which is the default port for MySQL and having a proper phpMyAdmin configuration. If this port is commented out or not correctly set in the MySQL configuration, or phpMyAdmin is not configured properly, it may fail to connect.

Step-by-Step Guide to Fix the Error

Here’s a simple step-by-step guide to resolve this connection error by configuring MySQL to use port 330##

Step 1: Access MySQL Configuration File

To start, you need to access the MySQL configuration file, which is generally located at /etc/mysql/my.cnf. You can use a text editor to open and edit this file. In this guide, we use nvim (NeoVim), but you can also use other editors like vim or nano.

Open a terminal and enter the following command to edit the configuration file in any text editor of your choice, I'm using Neovim text editor here:

sudo nvim /etc/mysql/my.cnf

Step 2: Check and Configure the Port

Once you've opened the configuration file, look for the following line:

#port = 3306

If the port setting is commented out (with a # at the beginning), it means that MySQL is using the default port but may not explicitly specify it. Uncomment this line by removing the #, ensuring that it reads as follows:

port = 3306

Step 3: Save and Restart MySQL

After making the change, save the file and exit the text editor. Then, restart the MySQL server to apply the changes:

sudo systemctl restart mysql

Step 4: Check phpMyAdmin configuration

XAMPP might need a different phpmyadmin configuration from what it comes with. Download phpmydamin separately and unzip it, and then replace the phpmyadmin folder in XAMMP with this new download. Configure the hostname, username and password as required to match and connect with you mySQL database. Restart XAMPP and the connection will be well established.

Step 5: Check phpMyAdmin Connection

With the port correctly set and MySQL restarted, try accessing phpMyadmin again to see if the error is resolved. If the connection works, you've successfully fixed the problem.

Conclusion
If you encounter the error "phpMyAdmin tried to connect to the MySQL server, and the server rejected the connection," the problem is likely due to misconfigured MySQL settings. By following the steps outlined in this guide, you can quickly resolve this issue by ensuring MySQL is listening on port 3306. With this solution, you should be able to restore phpMyAdmin's functionality and resume managing your MySQL databases without any interruptions.

And if these steps do not work, you remove the XAMPP folder completely and do a fresh stand-alone installation of XAMMP into phpmyadmin to replace the old XAMMP folder because XAMMP itself could be corrupt or just use XAMMP and MySQL by itself directly from the terminal to reach the database without ever using PHPmyAdmin.

Can't Access Files in XAMPP "public" Folder on Linux? Fix Permissions with chmod

The Builder — Wed, 17 Apr 2024 20:37:39 +0000

Having trouble accessing your website files in XAMPP on Linux? The browser might not have read permissions. A simple fix is to adjust file permissions using chmod

Understanding File Permissions: The Key to Access

Your operating system controls how users and applications interact with files and folders. These permissions dictate who can view, edit, or execute them. In the case of XAMPP on Linux, the web server process (often running as the user "apache") needs permission to access your website files.

The Fix: Granting Read Access with chmod

Here's where the chmod command comes in. It allows you to modify file permissions. To grant read access to the web server process for your website files, follow these steps:

Open a terminal window. You can find this by searching for "Terminal" in your applications menu.
Navigate to the directory containing your website files. Use the cd command to change directories. For example, if your files are in a subfolder named "public" under your XAMPP htdocs directory, you would use cd /opt/lampp/htdocs/public. (Replace the path with your actual location).
Run the chmod command. Here's the command to grant read (access) and execute (needed for some scripts) permissions for everyone (user, group, and others) on the public folder
chmod 755 public
(Replace the "public" with folder(s) name that you want to grant access).
Check for change or restart XAMPP
Open your web browser and attempt to access your website files. You should now be able to view them successfully.
Important Note: While granting 755 permissions is common for website directories, it's crucial to understand file permissions and adjust them based on your specific security requirements.

By following these steps and comprehending the role of file permissions, you can ensure your XAMPP website files are accessible on Linux.

Knowledge Ascent: A Stairway Where Plateaus Lead to Descent

The Builder — Fri, 15 Dec 2023 11:53:18 +0000

Imagine a staircase, not of wood or stone, but of knowledge. Each step represents a new concept, a deeper understanding, a climb towards mastery. As with any staircase, there are landings, moments of respite where you can pause, catch your breath, and admire the view you've ascended to. But unlike a physical staircase, this one holds a hidden trap: stagnation.

The moment you stop actively climbing, the steps beneath your feet begin to crumble. Concepts fade, connections loosen, and what was once solid ground becomes slippery sand. This isn't just a passive descent; it's an active erosion. Knowledge, like a muscle, needs constant exercise to remain strong.

Consistency, then, becomes the fuel that propels you upward. Every deliberate step, every intentional review, every moment spent actively engaging with the material, reinforces the foundation under your feet. It's not about relentless sprinting; it's about the steady rhythm of one step after another, a mindful climb that chips away at the mountain of ignorance.

Think of it like this: every time you revisit a concept, you're not just refreshing your memory, you're building a sturdier step. You're adding context, weaving connections, and anchoring the knowledge deeper into the fabric of your understanding. This constant reinforcement ensures that even when you take a break, your footing remains secure, ready to propel you further on your ascent.

So, embrace the landings, but don't linger. Use them as opportunities to reflect, to consolidate your gains, and to strategize the next leg of your climb. Remember, knowledge ascent is a journey, not a destination. The true reward lies in the continuous act of learning, of taking one step after another, of building a stairway of understanding that reaches towards the ever-expanding horizon of knowledge.

And never forget, even the smallest step, taken consistently, can lead to the greatest heights. So, climb on, learn on, and savor the breathtaking view from every step of your knowledge ascent.

Piriformis Pain and the Vim Epiphany: A Journey to Ergonomic Typing

The Builder — Wed, 13 Dec 2023 13:10:01 +0000

It all started with a nagging pain in my right hip. Turns out, it was my piriformis muscle, a deep muscle located in the buttocks that helps rotate the hip. Apparently, years of hunching over my laptop and reaching for the touchpad of my laptop had taken their toll.

This wasn't just a minor inconvenience; it was a wake-up call that my relationship with technology needed a serious overhaul. I couldn't ignore the pain, and I certainly didn't want to spend my future hunched over a keyboard, destined for a life of chronic pain.

So, I embarked on a quest for ergonomic solutions. I invested in a supportive chair, a monitor, an external mouse and keyboard. While these helped alleviate some of the discomfort, they didn't address the root cause: my reliance on the mouse and the touchpad and the constant reaching it demanded.

That's when I stumbled upon the world of Vim key bindings. Vim, a powerful text editor known for its steep learning curve, promised a different way of interacting with text. Instead of reaching for the mouse, I could navigate and manipulate text entirely with the keyboard.

Intrigued by the potential for ergonomic typing, I took the plunge into the world of Vim tutorials and cheat sheets. It wasn't easy. My fingers fumbled over unfamiliar keys, and the cryptic commands felt like another language. But with each struggle, came a small victory. I learned to move around the text with surprising agility, my fingers dancing across the keyboard.

The real revelation came when I began to feel the difference in my body. My hunched posture improved as I leaned back in my chair, no longer forced to contort myself to reach the touchpad. The pain in my hip gradually subsided, replaced by a sense of newfound freedom.

Learning Vim wasn't just about avoiding pain; it was about reclaiming control over my work environment. It forced me to be more intentional about my movements, to be mindful of my posture, and to prioritize my well-being.

This journey has taught me a valuable lesson: technology should adapt to us, not the other way around. By embracing new tools and learning new skills, we can create a more comfortable and sustainable work environment, one that prioritizes both productivity and well-being.

So, if you find yourself struggling with pain or discomfort from technology use, I encourage you to explore new possibilities. Whether it's Vim or another ergonomic solution, there's a way to work smarter, not harder, and create a future free from pain and discomfort. Your body will thank you for it.

Preventing Button Hover from Disrupting Layout in CSS: A Detailed Guide

The Builder — Mon, 27 Nov 2023 21:45:41 +0000

When building a website, ensuring a seamless and consistent user experience is paramount. Layout shifts, abrupt changes in the positioning of elements on a page, can be jarring and disruptive to the user's flow. A common culprit of layout shifts is the dynamic behaviour of elements, particularly buttons, upon hover interaction.

A frequently encountered scenario involves buttons. When a button's border style or thickness changes during hover, it can cause the button to expand slightly, disrupting the surrounding elements' layout. This can result in a flickering effect as the user interacts with the button, making the page appear unstable and unprofessional.

To effectively address this issue and prevent button hover from causing layout shifts, we can leverage CSS to maintain consistent button dimensions throughout any hover interaction. Here's a comprehensive guide to resolving this layout shift problem:

Establishing a Transparent Border as Default

Begin by defining a transparent border for the button in its default state. This ensures that the button has a defined size without affecting the surrounding elements.

button { border: 1px solid transparent; padding: 10px 20px; /* Adjust padding as needed */ }

Implementing the Desired Border on Hover

Next, apply the desired border style or thickness, such as a green border, only when the user hovers over the button. This maintains the button's consistent size while providing the visual feedback of the hover interaction.

button:hover { border: 1px solid green; }

By implementing these CSS rules, you can effectively prevent button hover interactions from causing layout shifts, ensuring a smooth and consistent user experience on your web pages. Remember, attention to detail in CSS can significantly enhance the overall user experience of your website.

JavaScript reduce method and how it works

The Builder — Wed, 21 Dec 2022 09:11:45 +0000

The reduce array method is an interesting method because unlike filter and mapthat takes one parameter during it's most basic usage, the reduce method takes two parameters. The first one is the accumulator and the other is the parameter of the current value that will be worked on.

reduceallows for items to be summed up or brought together.

Let's see a few examples on it.

Were going to try to sum up the numbers in the following array:

const nums = [1, 2, 3, 4, 5]

Solution

const sumNumbers = nums.reduce((sum, num)=> sum + num, 0)

console.log(sumNumbers)

//output is 15

Here, you will see that apart from num which is the current value parameter that we will work on according to every number in the array, the sum which is another parameter and the accumulator taken in by reduce and it is being set to an initial value of 0at the end of the reducemethod so that it can be added to the current value numand accumulated as it moves along the from one number to the other in the array.

Example 2

Apply reduce and add "-" at the end of every city in the array.

const cities = ["Lagos", "Paris", "Miami", "Mumbai" ]

Solution

const dashCities = cities.reduce((result, city)=> result + city + "-", "")

console.log(dashCities)

//output is Lagos-Paris-Miami-Mumbai-

Here we can see that the cities are brought together with dashes after them and made into a string because result which is a parameter and the accumulator has an initial value that is set to an empty string at the end of the reducemethod.

I hope you enjoyed the explanation and now understand how reduceworks now. Please like, share, comment and follow for more.

My web dev journey.

The Builder — Wed, 20 Jan 2021 12:22:25 +0000

Web development has always been more of a curiosity for me. I never thought that I would take it on up until I built an interest for it sometime in June 2020. I had just saved enough to get myself a laptop so I could learn how to edit photos because photography was my main focus at the time.

The real journey to web development began when I stumbled upon a crash course on web design on YouTube by this bald headed guy, "Bring your own laptop". The Video lasted for about 3 hours and then I was hooked! Then I thought to myself hey, I can actually do this. Fast forward to today and I just started learning JavaScript after getting access to udemy courses and just pure consistency on my part to practice almost every day, getting familiar with HTML and CSS and building a few projects, some of which are in my GitHub.

It has been quite a journey so far and I am looking forward to where this road leads. I'm open to tips from anyone who is willing to share.

DEV Community: The Builder

Stop Searching Your Tabs: Auto-Rename Terminator Tabs with Neovim & Zsh

The Goal

Step 1: Force Neovim to Talk to Your Terminal

Step 2: Fix Your Shell (Zsh)

Step 3: Check Your Terminator Preferences

Is Node.js your best introduction to the Backend?

The Challenge: Speed Without Structure

The Alternative: The "Reliable Sedan" Approach

Why Django is the Ultimate Teacher

The Roadmap

Django Tip: Why Your Static Files Disappear When DEBUG = False

Why it works with DEBUG = True

What happens when DEBUG = False

Key takeaway

Fixing XAMMP "phpMyAdmin tried to connect to the MySQL" Error: A Guide to Configuring phpMyAdmin and MySQL connection

Understanding the Error

Check phpMyAdmin connection

Step-by-Step Guide to Fix the Error

Step 1: Access MySQL Configuration File

Step 2: Check and Configure the Port

Step 3: Save and Restart MySQL

Step 4: Check phpMyAdmin configuration

Step 5: Check phpMyAdmin Connection

Can't Access Files in XAMPP "public" Folder on Linux? Fix Permissions with chmod

Understanding File Permissions: The Key to Access

The Fix: Granting Read Access with chmod

Knowledge Ascent: A Stairway Where Plateaus Lead to Descent

Piriformis Pain and the Vim Epiphany: A Journey to Ergonomic Typing

Preventing Button Hover from Disrupting Layout in CSS: A Detailed Guide

JavaScript reduce method and how it works

My web dev journey.

Why it works with `DEBUG = True`