Sinbolab

Author: sinbolab

  • Debounce vs Throttle in JavaScript

    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!