Why I Chose Next.js for My Web App

Vivian Gichure — Wed, 23 Jul 2025 09:22:57 +0000

Hey everyone! Today I want to quickly talk about Next.js, the framework I used to build my recent web project — and why it’s awesome!

💡 So, What is Next.js?

Next.js is a React framework that makes building web apps faster and easier. It comes with built-in features like:

✨ File-based routing (you don’t need to manually configure routes)
⚡ Server-side rendering (SSR) for better SEO and performance
📦 API routes — yes, you can build a backend too!
🔥 Turbopack (their new bundler) — super fast during development

🔧 Why I Used It

I used it for my cat adoption app because it helped me:

Create clean, organized pages quickly
Load data from my JSON server easily
Optimize for SEO — which is great if it ever goes live!
And, it just works really well with React

🚀 Final Thoughts

If you already know React and want to take your projects to the next level, try Next.js. You’ll build faster, smarter, and cleaner apps.

Thanks for tuning in! Let me know if you want a tutorial on setting up Next.js or using API routes.

🧠Mastering the DOM: A Beginner’s Guide to Dynamic Web Pages

Vivian Gichure — Sun, 29 Jun 2025 13:07:39 +0000

When you load a webpage, what you see — buttons, images, forms — is only the surface. Behind it all is a powerful interface that lets JavaScript interact with HTML. That interface is called the DOM(Document Object Model).

Whether you're creating a simple image gallery or a full-blown web app, understanding the DOM is the key to making your pages dynamic, interactive, and alive.

In this post, I’ll break down what the DOM is, why it’s important, and how you can manipulate it using JavaScript — with beginner-friendly examples.

🌳What Is the DOM?

The DOM is a tree-like structure that represents your webpage’s HTML in memory. When your browser loads a page, it reads the HTML and builds this DOM tree.

Each HTML element like(<p>,<div>,<img>,etc.)becomes a node in this tree. JavaScript can then access and manipulate those nodes.

Here’s a simple HTML snippet:

HTML

<h1>Hello, World!</h1>

This becomes a structure like:

Document
 └── html
     └── body
         └── h1
             └── "Hello, World!"

The beauty of the DOM is that you can change or add to this structure in real-time using JavaScript.

🎯 Why Learn DOM Manipulation?

Learning how to work with the DOM allows you to:

Make your websites interactive
Update content without refreshing the page
Handle user input in real-time
Create, modify, or remove HTML elements dynamically
Build more powerful frontend apps using frameworks (React, Vue, etc.)

🧰 Accessing Elements in the DOM

To change anything in the DOM, we need to select it using JavaScript.
javascript

// Select by ID
const title = document.getElementById("main-title");

// Select using CSS selector
const button = document.querySelector(".my-button");

// Select all matching elements
const items = document.querySelectorAll(".list-item");

Once selected, we can manipulate them:
javascript

title.textContent = "New Title";
button.style.color = "blue";

✍️ Changing Content Dynamically

Let’s say your HTML has this:

<p id="status">Loading...</p>

Using JavaScript, we can change that text:

javascript

const status = document.getElementById("status");
status.textContent = "Loaded!";

No reload. Just pure DOM magic.

📦 Creating and Appending Elements

Let’s say you want to add items to a list:

javascript

const ul = document.querySelector("ul");
const li = document.createElement("li");
li.textContent = "New Task";
ul.appendChild(li);

This creates a new <li> element and adds it to the end of your <ul> list.

🧲 Handling Events

DOM + Events = interactivity. For example:
html

<button id="clickMe">Click me!</button>
<p id="output"></p>

javascript

const btn = document.getElementById("clickMe");
const output = document.getElementById("output");

btn.addEventListener("click", () => {
  output.textContent = "You clicked the button!";
});

This makes the page react to a user action — something every modern site needs.

🧪 Bonus: Toggle Visibility

Here’s how to show or hide content on click:

html

<p id="text">Toggle me!</p>
<button id="toggleBtn">Hide/Show</button>

javascript

const text = document.getElementById("text");
const toggleBtn = document.getElementById("toggleBtn");

toggleBtn.addEventListener("click", () => {
  text.style.display = text.style.display === "none" ? "block" : "none";
});

🔨 Practice Challenge: Build a Mini To-Do App

Here’s a great way to test your skills:

Create an input and a button
When the button is clicked, add the input value to a list
Allow users to click on items to mark them as done
You’ll use createElement, appendChild, addEventListener, and more — all DOM essentials.

✅ Final Thoughts

The DOM is the bridge between your JavaScript and HTML. It’s how you take a static page and breathe life into it — adding interactivity, personality, and responsiveness.

Learning DOM manipulation is a critical foundation for any web developer. Whether you're going into vanilla JavaScript or moving into frameworks like React, Vue, or Angular, this knowledge will stay with you.

Keep experimenting. Break things. Build fun projects.

Because that’s how great developers are made.

DEV Community: Vivian Gichure

Why I Chose Next.js for My Web App

🧠Mastering the DOM: A Beginner’s Guide to Dynamic Web Pages

🌳What Is the DOM?

🎯 Why Learn DOM Manipulation?

🧰 Accessing Elements in the DOM

✍️ Changing Content Dynamically

📦 Creating and Appending Elements

🧲 Handling Events

🧪 Bonus: Toggle Visibility

🔨 Practice Challenge: Build a Mini To-Do App

✅ Final Thoughts