Sinbolab

Blog

  • Debounce vs Throttle in JavaScript

    When handling user events like scrolling or typing, performance matters. Debounce and throttle are two patterns that prevent functions from running too often.

    // Debounce: runs AFTER the user stops triggering the event
function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

// Throttle: runs AT MOST once every interval
function throttle(fn, interval) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= interval) {
      fn(...args);
      last = now;
    }
  };
}

    • Debounce waits until no more events fire (great for search inputs).
    • Throttle ensures function runs at controlled intervals (great for scroll events).

  • Responsive Navbar with HTML & CSS

    A responsive navigation bar is essential for modern websites. Here’s a minimal example that adapts to mobile and desktop.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Responsive Navbar</title>
  <style>
    body { margin: 0; font-family: sans-serif; }
    nav { display: flex; justify-content: space-between; background: #333; color: white; padding: 10px; }
    ul { list-style: none; display: flex; margin: 0; padding: 0; }
    li { margin: 0 10px; }
    a { color: white; text-decoration: none; }
    @media (max-width: 600px) {
      ul { flex-direction: column; display: none; }
      ul.show { display: flex; }
    }
  </style>
</head>
<body>
  <nav>
    <div>Logo</div>
    <button onclick="menu.classList.toggle('show')">☰</button>
    <ul id="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

    • Flexbox arranges items horizontally.
    • On small screens, the menu collapses into a button.
    • Clicking toggles the mobile menu.

  • Python Script to Bulk Rename Files

    Renaming hundreds of files manually is painful. With a few lines of Python, you can batch rename files in seconds.

    import os

folder = "my_files"
for count, filename in enumerate(os.listdir(folder), start=1):
    ext = os.path.splitext(filename)[1]
    new_name = f"file_{count}{ext}"
    os.rename(os.path.join(folder, filename),
              os.path.join(folder, new_name))

    • Loop through all files in the target folder.
    • Extract the file extension.
    • Rename each file sequentially (file_1.jpg, file_2.jpg, …).

  • Build a To-Do List in 50 Lines of JavaScript

    Every beginner developer builds a to-do list at some point. The challenge is making it simple yet functional. In this article, we’ll create a working to-do list in under 50 lines of JavaScript.

    Full Source Code

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>To-Do App</title>
</head>
<body>
  <input id="taskInput" placeholder="Add a task..." />
  <button id="addBtn">Add</button>
  <ul id="taskList"></ul>

  <script>
    const input = document.querySelector("#taskInput");
    const list = document.querySelector("#taskList");
    document.querySelector("#addBtn").onclick = () => {
      if (input.value.trim()) {
        let li = document.createElement("li");
        li.textContent = input.value;
        list.appendChild(li);
        input.value = "";
      }
    };
  </script>
</body>
</html>

    Explanation

    • Grab references to the input, list, and button.
    • When the button is clicked, create a new <li>.
    • Append it to the list and reset the input.

    Extensions

    • Add delete buttons for each task.
    • Save tasks in localStorage.
    • Add a “completed” style toggle.

  • Hello world!

    Welcome to WordPress. This is your first post. Edit or delete it, then start writing!