Forem: Manoj Swami

How to Ignore .DS_Store Files Globally in Git on macOS

Manoj Swami — Sat, 31 Jan 2026 06:07:22 +0000

If you use Git on macOS, you have probably seen .DS_Store files appear in your repositories. These files are created automatically by macOS Finder and are not related to your code. They often get accidentally committed and cause unnecessary noise in pull requests.

In this post, you will learn how to ignore .DS_Store files globally in Git so you never have to worry about them again.

What Is a .DS_Store File

.DS_Store stands for Desktop Services Store. macOS uses this file to save folder settings such as:

• Icon positions
• Folder view options
• Window sizes

These files are created automatically and appear in many directories. They should never be tracked in Git repositories.

Why Ignoring .DS_Store Is Important

Ignoring .DS_Store files helps you:

• Keep your repositories clean
• Avoid unnecessary commits
• Reduce noise in code reviews
• Prevent merge conflicts

Instead of adding .DS_Store to every project’s .gitignore, it is better to ignore it globally on your machine.

Step 1. Create a Global Git Ignore File

Git allows you to define a global ignore file that applies to all repositories on your system.

Open your terminal and run:

touch ~/.gitignore_global

This creates a file named .gitignore_global in your home directory.

Step 2. Add .DS_Store to the Global Ignore File

Now add .DS_Store to this file:

echo ".DS_Store" >> ~/.gitignore_global

To confirm it was added correctly, run:

cat ~/.gitignore_global

You should see:

.DS_Store

Step 3. Tell Git to Use the Global Ignore File

Next, configure Git to use this file for all repositories:

git config --global core.excludesfile ~/.gitignore_global

This command updates your global Git configuration.

Step 4. Verify the Configuration

To make sure Git is using the global ignore file, run:

git config --global --get core.excludesfile

The output should look like this:

/Users/your-username/.gitignore_global

If you see this path, the setup is complete.

What If .DS_Store Is Already Tracked

If a .DS_Store file was already committed in a repository, the global ignore will not remove it automatically.

To remove it from a specific repository:

git rm --cached .DS_Store
git commit -m "Remove .DS_Store"

After this, Git will stop tracking the file and will ignore it in the future.

Final Thoughts

Setting up a global Git ignore file is a small change that saves a lot of time and frustration. Once configured, you never need to think about .DS_Store files again.

This approach works for any other files you want to ignore globally, such as editor backups or system files.

Clean repositories lead to better collaboration and happier developers.

Happy Coding!

JavaScript Maps vs Objects: 30 Essential Questions Every Developer Should Know

Manoj Swami — Fri, 25 Jul 2025 03:10:50 +0000

JavaScript Maps are powerful data structures that often go underutilized by developers. Unlike regular objects, Maps provide a clean way to store key-value pairs with better performance characteristics and more flexible key types. Whether you're preparing for interviews or looking to level up your JavaScript skills, this comprehensive guide will help you master Maps through 30 practical questions and detailed explanations.

What is a JavaScript Map?

A Map is a built-in object that holds key-value pairs and remembers the original insertion order of keys. Unlike objects, Maps can use any type of value as keys, including functions, objects, and primitive types.

Key Differences Between Maps and Objects

Before diving into the questions, let's understand why Maps are special:

Key Types: Maps can use any type as keys, while objects only use strings and symbols
Size: Maps have a size property, objects require Object.keys().length
Iteration: Maps are directly iterable, objects need Object.keys() or similar methods
Performance: Maps perform better for frequent additions and removals
Prototype: Maps don't have default keys, objects inherit from Object.prototype

30 Essential JavaScript Map Questions

Beginner Level (Questions 1-10)

1. How do you create a new Map?

// Empty Map
const map1 = new Map();

// Map with initial values
const map2 = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

console.log(map1); // Map(0) {}
console.log(map2); // Map(2) {'key1' => 'value1', 'key2' => 'value2'}

2. How do you add a key-value pair to a Map?

const myMap = new Map();
myMap.set('name', 'John');
myMap.set('age', 30);

console.log(myMap); // Map(2) {'name' => 'John', 'age' => 30}

3. How do you get a value from a Map?

const myMap = new Map([['city', 'New York']]);
const city = myMap.get('city');

console.log(city); // 'New York'
console.log(myMap.get('country')); // undefined

4. How do you check if a key exists in a Map?

const myMap = new Map([['active', true]]);

console.log(myMap.has('active')); // true
console.log(myMap.has('inactive')); // false

5. How do you delete a key-value pair from a Map?

const myMap = new Map([
  ['temp', 'delete me'],
  ['keep', 'important']
]);

myMap.delete('temp');
console.log(myMap); // Map(1) {'keep' => 'important'}
console.log(myMap.delete('nonexistent')); // false

6. How do you get the size of a Map?

const myMap = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

console.log(myMap.size); // 3

7. How do you clear all entries from a Map?

const myMap = new Map([['a', 1], ['b', 2]]);
console.log(myMap.size); // 2

myMap.clear();
console.log(myMap.size); // 0
console.log(myMap); // Map(0) {}

8. Can you use objects as keys in a Map?

const obj1 = { id: 1 };
const obj2 = { id: 2 };
const myMap = new Map();

myMap.set(obj1, 'First object');
myMap.set(obj2, 'Second object');

console.log(myMap.get(obj1)); // 'First object'
console.log(myMap.get({ id: 1 })); // undefined (different object reference)

9. How do you iterate over a Map using for...of?

const myMap = new Map([
  ['name', 'Alice'],
  ['age', 25],
  ['city', 'Boston']
]);

// Iterate over entries
for (const [key, value] of myMap) {
  console.log(`${key}: ${value}`);
}
// Output:
// name: Alice
// age: 25
// city: Boston

10. What's the difference between Map.prototype.set() return value and object assignment?

const myMap = new Map();
const obj = {};

// Map.set() returns the Map instance (chainable)
myMap.set('a', 1).set('b', 2).set('c', 3);

// Object assignment returns the assigned value
obj.a = 1; // returns 1
obj.b = 2; // returns 2

console.log(myMap); // Map(3) {'a' => 1, 'b' => 2, 'c' => 3}
console.log(obj); // {a: 1, b: 2}

Intermediate Level (Questions 11-20)

11. How do you convert a Map to an array?

const myMap = new Map([
  ['x', 10],
  ['y', 20],
  ['z', 30]
]);

// Convert to array of [key, value] pairs
const entriesArray = Array.from(myMap);
console.log(entriesArray); // [['x', 10], ['y', 20], ['z', 30]]

// Alternative using spread operator
const spreadArray = [...myMap];
console.log(spreadArray); // [['x', 10], ['y', 20], ['z', 30]]

12. How do you get all keys from a Map?

const myMap = new Map([
  ['first', 'A'],
  ['second', 'B'],
  ['third', 'C']
]);

const keys = Array.from(myMap.keys());
console.log(keys); // ['first', 'second', 'third']

// Or iterate directly
for (const key of myMap.keys()) {
  console.log(key);
}

13. How do you get all values from a Map?

const myMap = new Map([
  ['apple', 5],
  ['banana', 3],
  ['orange', 8]
]);

const values = Array.from(myMap.values());
console.log(values); // [5, 3, 8]

// Calculate total
const total = values.reduce((sum, val) => sum + val, 0);
console.log(total); // 16

14. How do you merge two Maps?

const map1 = new Map([
  ['a', 1],
  ['b', 2]
]);

const map2 = new Map([
  ['c', 3],
  ['d', 4]
]);

// Method 1: Using spread operator
const merged1 = new Map([...map1, ...map2]);

// Method 2: Using forEach
const merged2 = new Map(map1);
map2.forEach((value, key) => merged2.set(key, value));

console.log(merged1); // Map(4) {'a' => 1, 'b' => 2, 'c' => 3, 'd' => 4}

15. How do you use forEach with a Map?

const myMap = new Map([
  ['product1', 29.99],
  ['product2', 49.99],
  ['product3', 19.99]
]);

myMap.forEach((value, key, map) => {
  console.log(`${key}: $${value}`);
  console.log(`Map size: ${map.size}`);
});

16. How do you convert an object to a Map?

const obj = {
  name: 'Sarah',
  age: 28,
  profession: 'Developer'
};

// Method 1: Using Object.entries()
const map1 = new Map(Object.entries(obj));

// Method 2: Manual iteration
const map2 = new Map();
for (const key in obj) {
  map2.set(key, obj[key]);
}

console.log(map1); // Map(3) {'name' => 'Sarah', 'age' => 28, 'profession' => 'Developer'}

17. How do you convert a Map back to an object?

const myMap = new Map([
  ['title', 'JavaScript Guide'],
  ['author', 'Jane Doe'],
  ['pages', 350]
]);

// Method 1: Using Object.fromEntries()
const obj1 = Object.fromEntries(myMap);

// Method 2: Manual approach
const obj2 = {};
myMap.forEach((value, key) => {
  obj2[key] = value;
});

console.log(obj1); // {title: "'JavaScript Guide', author: 'Jane Doe', pages: 350}"

18. Can you use functions as keys in a Map?

function greet() { return 'Hello!'; }
function farewell() { return 'Goodbye!'; }

const functionMap = new Map();
functionMap.set(greet, 'greeting function');
functionMap.set(farewell, 'farewell function');

console.log(functionMap.get(greet)); // 'greeting function'
console.log(functionMap.size); // 2

// You can even call the function keys
functionMap.forEach((value, func) => {
  console.log(`${func.name}: ${func()}`);
});

19. How do you check if a Map is empty?

const emptyMap = new Map();
const nonEmptyMap = new Map([['key', 'value']]);

console.log(emptyMap.size === 0); // true
console.log(nonEmptyMap.size === 0); // false

// More readable helper function
function isEmpty(map) {
  return map.size === 0;
}

console.log(isEmpty(emptyMap)); // true
console.log(isEmpty(nonEmptyMap)); // false

20. How do you find a specific entry in a Map?

const users = new Map([
  [1, { name: 'Alice', role: 'admin' }],
  [2, { name: 'Bob', role: 'user' }],
  [3, { name: 'Charlie', role: 'admin' }]
]);

// Find by key
const user = users.get(2);
console.log(user); // { name: 'Bob', role: 'user' }

// Find by value property
function findUserByName(usersMap, name) {
  for (const [id, user] of usersMap) {
    if (user.name === name) {
      return { id, ...user };
    }
  }
  return null;
}

console.log(findUserByName(users, 'Charlie')); // { id: 3, name: 'Charlie', role: 'admin' }

Advanced Level (Questions 21-30)

21. How do you implement a Map-based cache with expiration?

class ExpiringMap {
  constructor() {
    this.map = new Map();
    this.timers = new Map();
  }

  set(key, value, ttl = 5000) {
    // Clear existing timer
    if (this.timers.has(key)) {
      clearTimeout(this.timers.get(key));
    }

    // Set value
    this.map.set(key, value);

    // Set expiration timer
    const timer = setTimeout(() => {
      this.delete(key);
    }, ttl);

    this.timers.set(key, timer);
    return this;
  }

  get(key) {
    return this.map.get(key);
  }

  delete(key) {
    if (this.timers.has(key)) {
      clearTimeout(this.timers.get(key));
      this.timers.delete(key);
    }
    return this.map.delete(key);
  }

  has(key) {
    return this.map.has(key);
  }

  get size() {
    return this.map.size;
  }
}

// Usage
const cache = new ExpiringMap();
cache.set('temp-data', 'This will expire', 2000);
console.log(cache.get('temp-data')); // 'This will expire'
setTimeout(() => {
  console.log(cache.get('temp-data')); // undefined (expired)
}, 3000);

22. How do you group array elements using a Map?

const students = [
  { name: 'Alice', grade: 'A', subject: 'Math' },
  { name: 'Bob', grade: 'B', subject: 'Math' },
  { name: 'Charlie', grade: 'A', subject: 'Science' },
  { name: 'David', grade: 'B', subject: 'Math' },
  { name: 'Eva', grade: 'A', subject: 'Science' }
];

function groupBy(array, keyFn) {
  const grouped = new Map();

  for (const item of array) {
    const key = keyFn(item);
    if (!grouped.has(key)) {
      grouped.set(key, []);
    }
    grouped.get(key).push(item);
  }

  return grouped;
}

const byGrade = groupBy(students, student => student.grade);
const bySubject = groupBy(students, student => student.subject);

console.log(byGrade.get('A')); // Students with grade A
console.log(bySubject.get('Math')); // Students studying Math

23. How do you implement a bidirectional Map?

class BiMap {
  constructor(entries = []) {
    this.keyToValue = new Map();
    this.valueToKey = new Map();

    for (const [key, value] of entries) {
      this.set(key, value);
    }
  }

  set(key, value) {
    // Remove existing mappings
    if (this.keyToValue.has(key)) {
      const oldValue = this.keyToValue.get(key);
      this.valueToKey.delete(oldValue);
    }
    if (this.valueToKey.has(value)) {
      const oldKey = this.valueToKey.get(value);
      this.keyToValue.delete(oldKey);
    }

    // Set new mappings
    this.keyToValue.set(key, value);
    this.valueToKey.set(value, key);
    return this;
  }

  get(key) {
    return this.keyToValue.get(key);
  }

  getByValue(value) {
    return this.valueToKey.get(value);
  }

  delete(key) {
    if (this.keyToValue.has(key)) {
      const value = this.keyToValue.get(key);
      this.keyToValue.delete(key);
      this.valueToKey.delete(value);
      return true;
    }
    return false;
  }

  get size() {
    return this.keyToValue.size;
  }
}

// Usage
const biMap = new BiMap([['en', 'English'], ['es', 'Spanish']]);
console.log(biMap.get('en')); // 'English'
console.log(biMap.getByValue('Spanish')); // 'es'

24. How do you use Map with complex key comparison?

// Using objects as keys requires exact reference matching
const obj1 = { x: 1, y: 2 };
const obj2 = { x: 1, y: 2 }; // Different object, same content

const map = new Map();
map.set(obj1, 'First point');
map.set(obj2, 'Second point');

console.log(map.size); // 2 (different references)
console.log(map.get(obj1)); // 'First point'
console.log(map.get({ x: 1, y: 2 })); // undefined (new object reference)

// Custom Map with content-based key comparison
class ContentMap {
  constructor() {
    this.map = new Map();
  }

  _getKey(obj) {
    return JSON.stringify(obj);
  }

  set(key, value) {
    const serializedKey = this._getKey(key);
    this.map.set(serializedKey, { originalKey: key, value });
    return this;
  }

  get(key) {
    const serializedKey = this._getKey(key);
    const entry = this.map.get(serializedKey);
    return entry ? entry.value : undefined;
  }

  has(key) {
    return this.map.has(this._getKey(key));
  }
}

const contentMap = new ContentMap();
contentMap.set({ x: 1, y: 2 }, 'Point A');
console.log(contentMap.get({ x: 1, y: 2 })); // 'Point A' (works with content matching)

25. How do you implement Map serialization and deserialization?

class SerializableMap extends Map {
  toJSON() {
    return {
      dataType: 'Map',
      value: Array.from(this.entries())
    };
  }

  static fromJSON(jsonStr) {
    const data = typeof jsonStr === 'string' ? JSON.parse(jsonStr) : jsonStr;

    if (data.dataType === 'Map') {
      return new SerializableMap(data.value);
    }

    throw new Error('Invalid Map JSON format');
  }

  serialize() {
    return JSON.stringify(this);
  }

  static deserialize(jsonStr) {
    return SerializableMap.fromJSON(jsonStr);
  }
}

// Usage
const originalMap = new SerializableMap([
  ['user1', { name: 'Alice', active: true }],
  ['user2', { name: 'Bob', active: false }]
]);

const serialized = originalMap.serialize();
console.log(serialized); // JSON string

const deserialized = SerializableMap.deserialize(serialized);
console.log(deserialized.get('user1')); // { name: 'Alice', active: true }

26. How do you create a Map-based LRU (Least Recently Used) cache?

class LRUCache {
  constructor(capacity) {
    this.capacity = capacity;
    this.cache = new Map();
  }

  get(key) {
    if (this.cache.has(key)) {
      // Move to end (most recently used)
      const value = this.cache.get(key);
      this.cache.delete(key);
      this.cache.set(key, value);
      return value;
    }
    return undefined;
  }

  set(key, value) {
    if (this.cache.has(key)) {
      // Update existing key
      this.cache.delete(key);
    } else if (this.cache.size >= this.capacity) {
      // Remove least recently used (first entry)
      const firstKey = this.cache.keys().next().value;
      this.cache.delete(firstKey);
    }

    this.cache.set(key, value);
  }

  has(key) {
    return this.cache.has(key);
  }

  get size() {
    return this.cache.size;
  }

  clear() {
    this.cache.clear();
  }
}

// Usage
const lru = new LRUCache(3);
lru.set('a', 1);
lru.set('b', 2);
lru.set('c', 3);
lru.get('a'); // Makes 'a' most recently used
lru.set('d', 4); // Removes 'b' (least recently used)
console.log(lru.has('b')); // false
console.log(lru.has('a')); // true

27. How do you perform Map operations similar to array methods?

const scores = new Map([
  ['Alice', 95],
  ['Bob', 87],
  ['Charlie', 92],
  ['David', 78],
  ['Eva', 89]
]);

// Map equivalent of Array.filter()
function mapFilter(map, predicate) {
  const filtered = new Map();
  for (const [key, value] of map) {
    if (predicate(value, key, map)) {
      filtered.set(key, value);
    }
  }
  return filtered;
}

// Map equivalent of Array.map()
function mapMap(map, transformer) {
  const transformed = new Map();
  for (const [key, value] of map) {
    const newValue = transformer(value, key, map);
    transformed.set(key, newValue);
  }
  return transformed;
}

// Map equivalent of Array.reduce()
function mapReduce(map, reducer, initialValue) {
  let accumulator = initialValue;
  for (const [key, value] of map) {
    accumulator = reducer(accumulator, value, key, map);
  }
  return accumulator;
}

// Usage examples
const highScores = mapFilter(scores, score => score >= 90);
console.log(highScores); // Map with Alice, Charlie

const percentages = mapMap(scores, score => `${score}%`);
console.log(percentages); // Map with percentage strings

const totalScore = mapReduce(scores, (sum, score) => sum + score, 0);
console.log(totalScore); // 441

28. How do you handle Map operations with async/await?

async function fetchUserData(userId) {
  // Simulate API call
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ id: userId, name: `User${userId}`, active: true });
    }, 100);
  });
}

async function populateMapAsync(userIds) {
  const userMap = new Map();

  // Sequential processing
  for (const id of userIds) {
    const userData = await fetchUserData(id);
    userMap.set(id, userData);
  }

  return userMap;
}

async function populateMapConcurrent(userIds) {
  const userMap = new Map();

  // Concurrent processing
  const promises = userIds.map(id => fetchUserData(id));
  const results = await Promise.all(promises);

  results.forEach((userData, index) => {
    userMap.set(userIds[index], userData);
  });

  return userMap;
}

// Usage
async function demo() {
  const userIds = [1, 2, 3, 4, 5];

  console.time('Sequential');
  const map1 = await populateMapAsync(userIds);
  console.timeEnd('Sequential'); // ~500ms

  console.time('Concurrent');
  const map2 = await populateMapConcurrent(userIds);
  console.timeEnd('Concurrent'); // ~100ms

  console.log(map1.size, map2.size); // Both should be 5
}

demo();

29. How do you implement a Map-based event system?

class EventMap {
  constructor() {
    this.events = new Map();
  }

  on(eventName, callback) {
    if (!this.events.has(eventName)) {
      this.events.set(eventName, new Set());
    }
    this.events.get(eventName).add(callback);
    return this;
  }

  off(eventName, callback) {
    if (this.events.has(eventName)) {
      this.events.get(eventName).delete(callback);

      // Clean up empty event sets
      if (this.events.get(eventName).size === 0) {
        this.events.delete(eventName);
      }
    }
    return this;
  }

  emit(eventName, ...args) {
    if (this.events.has(eventName)) {
      this.events.get(eventName).forEach(callback => {
        try {
          callback(...args);
        } catch (error) {
          console.error(`Error in event handler for ${eventName}:`, error);
        }
      });
    }
    return this;
  }

  once(eventName, callback) {
    const onceWrapper = (...args) => {
      callback(...args);
      this.off(eventName, onceWrapper);
    };
    return this.on(eventName, onceWrapper);
  }

  listenerCount(eventName) {
    return this.events.has(eventName) ? this.events.get(eventName).size : 0;
  }

  eventNames() {
    return Array.from(this.events.keys());
  }
}

// Usage
const events = new EventMap();

events.on('user:login', (user) => {
  console.log(`User ${user.name} logged in`);
});

events.on('user:login', (user) => {
  console.log(`Welcome back, ${user.name}!`);
});

events.once('app:ready', () => {
  console.log('Application is ready!');
});

events.emit('user:login', { name: 'Alice' });
events.emit('app:ready');
events.emit('app:ready'); // Won't trigger (once only)

30. How do you implement deep comparison and cloning for Maps?

class DeepMap extends Map {
  // Deep clone a Map
  clone() {
    const cloned = new DeepMap();

    for (const [key, value] of this) {
      const clonedKey = this._deepClone(key);
      const clonedValue = this._deepClone(value);
      cloned.set(clonedKey, clonedValue);
    }

    return cloned;
  }

  // Deep equality comparison
  equals(other) {
    if (!(other instanceof Map) || this.size !== other.size) {
      return false;
    }

    for (const [key, value] of this) {
      if (!other.has(key) || !this._deepEquals(value, other.get(key))) {
        return false;
      }
    }

    return true;
  }

  _deepClone(obj) {
    if (obj === null || typeof obj !== 'object') {
      return obj;
    }

    if (obj instanceof Date) {
      return new Date(obj.getTime());
    }

    if (obj instanceof Array) {
      return obj.map(item => this._deepClone(item));
    }

    if (obj instanceof Map) {
      const cloned = new Map();
      for (const [key, value] of obj) {
        cloned.set(this._deepClone(key), this._deepClone(value));
      }
      return cloned;
    }

    if (typeof obj === 'object') {
      const cloned = {};
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          cloned[key] = this._deepClone(obj[key]);
        }
      }
      return cloned;
    }

    return obj;
  }

  _deepEquals(a, b) {
    if (a === b) return true;
    if (a == null || b == null) return false;
    if (typeof a !== typeof b) return false;

    if (a instanceof Date && b instanceof Date) {
      return a.getTime() === b.getTime();
    }

    if (Array.isArray(a) && Array.isArray(b)) {
      if (a.length !== b.length) return false;
      return a.every((item, index) => this._deepEquals(item, b[index]));
    }

    if (a instanceof Map && b instanceof Map) {
      if (a.size !== b.size) return false;
      for (const [key, value] of a) {
        if (!b.has(key) || !this._deepEquals(value, b.get(key))) {
          return false;
        }
      }
      return true;
    }

    if (typeof a === 'object' && typeof b === 'object') {
      const keysA = Object.keys(a);
      const keysB = Object.keys(b);

      if (keysA.length !== keysB.length) return false;

      return keysA.every(key => 
        keysB.includes(key) && this._deepEquals(a[key], b[key])
      );
    }

    return false;
  }
}

// Usage
const original = new DeepMap([
  ['user', { name: 'Alice', preferences: { theme: 'dark' } }],
  ['config', { timeout: 5000, retries: 3 }]
]);

const cloned = original.clone();
cloned.get('user').name = 'Bob'; // Modify clone

console.log(original.get('user').name); // 'Alice' (original unchanged)
console.log(cloned.get('user').name); // 'Bob'

const map2 = new DeepMap([
  ['user', { name: 'Alice', preferences: { theme: 'dark' } }],
  ['config', { timeout: 5000, retries: 3 }]
]);

console.log(original.equals(map2)); // true (deep equality)

Performance Tips and Best Practices

When to Use Maps vs Objects

Use Maps when:

You need non-string keys
Key-value pairs are frequently added/removed
You need to maintain insertion order
You need to iterate over entries frequently
The number of key-value pairs is unknown until runtime

Use Objects when:

You have a record with known string keys
You need JSON serialization (objects serialize naturally)
You're working with existing APIs that expect objects
You need property access syntax (obj.prop vs map.get('prop'))

Performance Considerations

Iteration: Maps are generally faster for frequent iterations
Key Lookup: Similar performance for both, but Maps handle edge cases better
Memory: Maps may use more memory due to their internal structure
Size: Getting the size of a Map is O(1), while objects require O(n) calculation

Conclusion

JavaScript Maps are powerful data structures that provide significant advantages over plain objects in many scenarios. They offer better performance for frequent additions and deletions, support any type of key, maintain insertion order, and provide a cleaner API for key-value operations.

By working through these 30 questions, you should now have a solid understanding of Maps and be able to use them effectively in your JavaScript projects. Whether you're building caches, managing collections of data, or implementing complex data structures, Maps provide the flexibility and performance you need.

Remember to consider the specific requirements of your use case when choosing between Maps and objects. Both have their place in JavaScript development, and understanding when to use each will make you a more effective developer.

Key takeaways:

Maps preserve insertion order and support any key type
They provide better performance for frequent modifications
Maps have a rich API with methods like forEach, keys(), values(), and entries()
Advanced patterns like LRU caches and event systems can be elegantly implemented with Maps
Always consider your specific use case when choosing between Maps and objects

Common Pitfalls and How to Avoid Them

1. Forgetting Maps are Reference-Based for Object Keys

// Wrong - creates new object references
const map = new Map();
map.set({ id: 1 }, 'user1');
console.log(map.get({ id: 1 })); // undefined

// Correct - reuse object references
const userKey = { id: 1 };
map.set(userKey, 'user1');
console.log(map.get(userKey)); // 'user1'

2. Not Handling Undefined vs Non-Existent Keys

const map = new Map([['key', undefined]]);

// Wrong - can't distinguish between undefined value and missing key
if (map.get('key')) { /* won't execute even though key exists */ }

// Correct - explicitly check for key existence
if (map.has('key')) { /* will execute */ }

3. Modifying Maps During Iteration

const map = new Map([['a', 1], ['b', 2], ['c', 3]]);

// Potentially problematic - modifying during iteration
for (const [key, value] of map) {
  if (value > 1) {
    map.delete(key); // Can cause unexpected behavior
  }
}

// Better approach - collect keys first, then modify
const keysToDelete = [];
for (const [key, value] of map) {
  if (value > 1) {
    keysToDelete.push(key);
  }
}
keysToDelete.forEach(key => map.delete(key));

4. Assuming Maps are JSON Serializable

const map = new Map([['a', 1], ['b', 2]]);

// Wrong - results in empty object
console.log(JSON.stringify(map)); // "{}"

// Correct - convert to array first
console.log(JSON.stringify([...map])); // [["a",1],["b",2]]

// Or implement custom serialization
map.toJSON = function() {
  return [...this];
};
console.log(JSON.stringify(map)); // [["a",1],["b",2]]

Real-World Use Cases

1. API Response Caching

class APICache {
  constructor(ttl = 300000) { // 5 minutes default
    this.cache = new Map();
    this.timestamps = new Map();
    this.ttl = ttl;
  }

  get(url) {
    if (this.cache.has(url)) {
      const timestamp = this.timestamps.get(url);
      if (Date.now() - timestamp < this.ttl) {
        return this.cache.get(url);
      } else {
        // Expired
        this.cache.delete(url);
        this.timestamps.delete(url);
      }
    }
    return null;
  }

  set(url, data) {
    this.cache.set(url, data);
    this.timestamps.set(url, Date.now());
  }

  clear() {
    this.cache.clear();
    this.timestamps.clear();
  }
}

// Usage
const apiCache = new APICache();
apiCache.set('/api/users', [{ id: 1, name: 'Alice' }]);
console.log(apiCache.get('/api/users')); // Returns cached data

2. State Management

class StateManager {
  constructor(initialState = {}) {
    this.state = new Map(Object.entries(initialState));
    this.subscribers = new Map();
  }

  getState(key) {
    return key ? this.state.get(key) : Object.fromEntries(this.state);
  }

  setState(key, value) {
    const oldValue = this.state.get(key);
    this.state.set(key, value);

    // Notify subscribers
    if (this.subscribers.has(key)) {
      this.subscribers.get(key).forEach(callback => {
        callback(value, oldValue);
      });
    }
  }

  subscribe(key, callback) {
    if (!this.subscribers.has(key)) {
      this.subscribers.set(key, new Set());
    }
    this.subscribers.get(key).add(callback);

    // Return unsubscribe function
    return () => {
      this.subscribers.get(key).delete(callback);
      if (this.subscribers.get(key).size === 0) {
        this.subscribers.delete(key);
      }
    };
  }
}

// Usage
const stateManager = new StateManager({ count: 0 });
const unsubscribe = stateManager.subscribe('count', (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`);
});

stateManager.setState('count', 1); // Logs: Count changed from 0 to 1

3. Memoization

function memoize(fn) {
  const cache = new Map();

  return function(...args) {
    const key = JSON.stringify(args);

    if (cache.has(key)) {
      console.log('Cache hit!');
      return cache.get(key);
    }

    console.log('Computing...');
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

// Usage
const fibonacci = memoize((n) => {
  if (n < 2) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
});

console.log(fibonacci(10)); // Computes and caches intermediate results
console.log(fibonacci(10)); // Cache hit!

4. Dependency Tracking

class DependencyTracker {
  constructor() {
    this.dependencies = new Map();
    this.dependents = new Map();
  }

  addDependency(dependent, dependency) {
    // Track what this dependent depends on
    if (!this.dependencies.has(dependent)) {
      this.dependencies.set(dependent, new Set());
    }
    this.dependencies.get(dependent).add(dependency);

    // Track what depends on this dependency
    if (!this.dependents.has(dependency)) {
      this.dependents.set(dependency, new Set());
    }
    this.dependents.get(dependency).add(dependent);
  }

  getDependencies(item) {
    return Array.from(this.dependencies.get(item) || []);
  }

  getDependents(item) {
    return Array.from(this.dependents.get(item) || []);
  }

  removeDependency(dependent, dependency) {
    if (this.dependencies.has(dependent)) {
      this.dependencies.get(dependent).delete(dependency);
    }
    if (this.dependents.has(dependency)) {
      this.dependents.get(dependency).delete(dependent);
    }
  }

  // Find circular dependencies
  hasCircularDependency(item, visited = new Set()) {
    if (visited.has(item)) {
      return true;
    }

    visited.add(item);
    const dependencies = this.dependencies.get(item) || new Set();

    for (const dep of dependencies) {
      if (this.hasCircularDependency(dep, new Set(visited))) {
        return true;
      }
    }

    return false;
  }
}

// Usage
const tracker = new DependencyTracker();
tracker.addDependency('moduleA', 'moduleB');
tracker.addDependency('moduleB', 'moduleC');
tracker.addDependency('moduleC', 'moduleA'); // Creates circular dependency

console.log(tracker.hasCircularDependency('moduleA')); // true

Testing Maps: Best Practices

1. Unit Testing Map Operations

// Example using Jest
describe('Map Operations', () => {
  let testMap;

  beforeEach(() => {
    testMap = new Map([
      ['key1', 'value1'],
      ['key2', 'value2']
    ]);
  });

  test('should add new key-value pair', () => {
    testMap.set('key3', 'value3');
    expect(testMap.has('key3')).toBe(true);
    expect(testMap.get('key3')).toBe('value3');
    expect(testMap.size).toBe(3);
  });

  test('should update existing key', () => {
    testMap.set('key1', 'newValue');
    expect(testMap.get('key1')).toBe('newValue');
    expect(testMap.size).toBe(2); // Size shouldn't change
  });

  test('should delete key-value pair', () => {
    const deleted = testMap.delete('key1');
    expect(deleted).toBe(true);
    expect(testMap.has('key1')).toBe(false);
    expect(testMap.size).toBe(1);
  });

  test('should handle non-existent keys gracefully', () => {
    expect(testMap.get('nonExistent')).toBeUndefined();
    expect(testMap.has('nonExistent')).toBe(false);
    expect(testMap.delete('nonExistent')).toBe(false);
  });
});

2. Testing Custom Map Classes

describe('LRUCache', () => {
  test('should evict least recently used item', () => {
    const cache = new LRUCache(2);
    cache.set('a', 1);
    cache.set('b', 2);
    cache.set('c', 3); // Should evict 'a'

    expect(cache.has('a')).toBe(false);
    expect(cache.has('b')).toBe(true);
    expect(cache.has('c')).toBe(true);
  });

  test('should update LRU order on access', () => {
    const cache = new LRUCache(2);
    cache.set('a', 1);
    cache.set('b', 2);
    cache.get('a'); // Makes 'a' most recently used
    cache.set('c', 3); // Should evict 'b' instead of 'a'

    expect(cache.has('a')).toBe(true);
    expect(cache.has('b')).toBe(false);
    expect(cache.has('c')).toBe(true);
  });
});

Browser Compatibility and Polyfills

Maps are supported in all modern browsers, but if you need to support older environments:

IE11 Support

// Simple Map polyfill for older browsers
if (!window.Map) {
  window.Map = function() {
    this._keys = [];
    this._values = [];
    this.size = 0;
  };

  Map.prototype.set = function(key, value) {
    const index = this._keys.indexOf(key);
    if (index === -1) {
      this._keys.push(key);
      this._values.push(value);
      this.size++;
    } else {
      this._values[index] = value;
    }
    return this;
  };

  Map.prototype.get = function(key) {
    const index = this._keys.indexOf(key);
    return index === -1 ? undefined : this._values[index];
  };

  Map.prototype.has = function(key) {
    return this._keys.indexOf(key) !== -1;
  };

  Map.prototype.delete = function(key) {
    const index = this._keys.indexOf(key);
    if (index !== -1) {
      this._keys.splice(index, 1);
      this._values.splice(index, 1);
      this.size--;
      return true;
    }
    return false;
  };

  Map.prototype.clear = function() {
    this._keys = [];
    this._values = [];
    this.size = 0;
  };
}

Conclusion and Next Steps

Mastering JavaScript Maps opens up new possibilities for efficient data management in your applications. From simple key-value storage to complex caching mechanisms and state management systems, Maps provide the foundation for many advanced programming patterns.

What's Next?

Explore WeakMaps: Learn about WeakMaps for garbage collection-friendly key-value storage
Study Set Objects: Understand Sets, which are similar to Maps but store unique values only
Advanced Patterns: Investigate more complex data structures like Tries, Graphs, and Trees using Maps
Performance Analysis: Benchmark Maps vs Objects in your specific use cases
Framework Integration: Learn how Maps integrate with popular frameworks like React, Vue, and Angular

Practice Exercises

Try implementing these additional Map-based projects:

URL Router: Create a routing system using Maps for path matching
Template Engine: Build a simple template engine with Map-based variable storage
Database ORM: Design a lightweight ORM using Maps for entity management
Game State Manager: Implement a game state system with Maps for player data
Configuration Manager: Create a hierarchical configuration system

Remember, the key to mastering Maps is practice. Start with simple use cases and gradually work your way up to more complex implementations. Each project will deepen your understanding and reveal new possibilities for using Maps in your JavaScript applications.

Happy coding!

How to Fix Logitech MX Master 3S Mouse Lag on Mac: Simple Terminal Command Solution

Manoj Swami — Mon, 09 Jun 2025 07:01:44 +0000

If you’re using a Logitech MX Master 3S mouse with a MacBook M1 and suddenly experience lag or jitter, you’re not alone. This frustrating issue can appear out of nowhere—even after trying common fixes like clearing cache, rebooting, or reinstalling the Logitech Options app. I faced this problem twice in the past month, and after extensive research, I found a simple Terminal command that solved the lag instantly. Here’s a step-by-step guide in plain English, including what the command does and how you can revert it if needed.

What Causes the Logitech Mouse Lag on Mac?

The lag typically happens due to interference between Bluetooth and Wi-Fi, as both use the 2.4 GHz frequency band. On Apple Silicon Macs (like the M1), this interference can become more noticeable, especially with Bluetooth peripherals like the MX Master 3S mouse. Sometimes, uninstalling the Logitech Options app helps, but the issue can return unexpectedly.

The Ultimate Solution: Change Bluetooth Coexistence Mode

After trying various fixes, the only thing that worked for me was changing the Bluetooth coexistence mode using a Terminal command. This tweak helps your Mac manage Bluetooth and Wi-Fi signals more efficiently, reducing lag and jitter for your mouse.

Step-by-Step Fix

Open Terminal

You can find Terminal in Applications > Utilities, or search for it using Spotlight.
Run the Command

Copy and paste the following command into Terminal, then press Enter:

   sudo defaults write /Library/Preferences/com.apple.airport.bt.plist bluetoothCoexMgmt Hybrid

You’ll be prompted to enter your Mac password.

Reboot Your Mac Restart your computer for the changes to take effect.

That’s it! Your Logitech MX Master 3S mouse should now work smoothly, with no lag or jitter.

How Does This Command Work?

The command changes your Mac’s Bluetooth coexistence mode to “Hybrid.” Here’s what that means:

Performance Mode: Prioritizes Bluetooth, which can interfere with Wi-Fi.
Balanced Mode: Tries to balance Bluetooth and Wi-Fi performance.
Hybrid Mode: Prioritizes Wi-Fi, but still maintains good Bluetooth performance.

Setting the mode to “Hybrid” usually provides the best balance for most users, minimizing lag without sacrificing Wi-Fi speed.

How to Revert the Change

If you ever want to undo this tweak, run this command in Terminal:

sudo defaults delete /Library/Preferences/com.apple.airport.bt.plist bluetoothCoexMgmt

Then, reboot your Mac again.

Other Troubleshooting Tips

If the above solution doesn’t work, try these additional steps:

Reset Bluetooth Module: Open Terminal and run:

  sudo pkill bluetoothd

Then reconnect your mouse.

Use a USB Receiver:

If you have a Logi Bolt or Unifying receiver, use it instead of Bluetooth for a more stable connection[1].
Move Other Devices Away:

Keep your phone and other wireless devices away from your mouse and Mac to reduce interference[1].

Conclusion

The Bluetooth coexistence mode fix has worked perfectly for me and many others using the Logitech MX Master 3S on MacBook M1. It’s a simple, safe tweak that you can easily revert if needed. If you’re struggling with mouse lag, try this Terminal command before replacing your mouse or reinstalling macOS.

MySQL Events: Automate Database Tasks with Scheduled Jobs

Manoj Swami — Sat, 07 Jun 2025 10:20:35 +0000

MySQL Events are like scheduled tasks that run automatically at specific times or intervals. Think of them as MySQL's built-in cron job system - they can perform database operations without any external trigger.

What Are MySQL Events?

Events are stored programs that execute at scheduled times. They're perfect for:

Regular data cleanup
Generating reports
Updating statistics
Archiving old data
Sending automated notifications

Prerequisites

Before working with events, ensure the Event Scheduler is enabled:

-- Check if Event Scheduler is running
SHOW VARIABLES LIKE 'event_scheduler';

-- Enable Event Scheduler if it's OFF
SET GLOBAL event_scheduler = ON;

How to Access/View Events

1. View All Events

SHOW EVENTS;

2. View Events from Specific Database

SHOW EVENTS FROM your_database_name;

3. View Detailed Event Information

SELECT * FROM information_schema.EVENTS 
WHERE EVENT_SCHEMA = 'your_database_name';

4. View Specific Event Details

SHOW CREATE EVENT event_name;

Examples:

-- Example 1: See all events in current database
SHOW EVENTS;

-- Example 2: Check events in 'ecommerce' database
SHOW EVENTS FROM ecommerce;

-- Example 3: Get detailed info about all events
SELECT EVENT_NAME, EVENT_TYPE, EXECUTE_AT, INTERVAL_VALUE, 
       INTERVAL_FIELD, STATUS 
FROM information_schema.EVENTS;

-- Example 4: View how a specific event was created
SHOW CREATE EVENT daily_cleanup;

How to Create Events

Basic Syntax:

CREATE EVENT event_name
ON SCHEDULE schedule_type
[ON COMPLETION [NOT] PRESERVE]
[ENABLE | DISABLE]
DO
  sql_statement;

Schedule Types:

AT: Run once at specific time
EVERY: Run repeatedly at intervals

Examples:

Example 1: One-time Event

-- Delete old logs after 24 hours
CREATE EVENT delete_old_logs
ON SCHEDULE AT NOW() + INTERVAL 1 DAY
DO
  DELETE FROM activity_logs 
  WHERE created_at < DATE_SUB(NOW(), INTERVAL 30 DAY);

Example 2: Recurring Daily Event

-- Clean up expired sessions every day at 2 AM
CREATE EVENT daily_session_cleanup
ON SCHEDULE EVERY 1 DAY
STARTS '2024-01-01 02:00:00'
DO
  DELETE FROM user_sessions 
  WHERE expires_at < NOW();

Example 3: Weekly Report Generation

-- Generate weekly sales report every Monday at 9 AM
CREATE EVENT weekly_sales_report
ON SCHEDULE EVERY 1 WEEK
STARTS '2024-01-08 09:00:00'  -- Next Monday
DO
BEGIN
  INSERT INTO sales_reports (report_date, total_sales, order_count)
  SELECT 
    CURDATE() - INTERVAL 7 DAY,
    SUM(total_amount),
    COUNT(*)
  FROM orders 
  WHERE DATE(created_at) BETWEEN 
    CURDATE() - INTERVAL 14 DAY AND 
    CURDATE() - INTERVAL 7 DAY;
END;

Example 4: Archive Old Data Monthly

-- Archive orders older than 1 year, runs first day of each month
CREATE EVENT monthly_archive
ON SCHEDULE EVERY 1 MONTH
STARTS '2024-02-01 01:00:00'
DO
BEGIN
  -- Move old orders to archive table
  INSERT INTO orders_archive 
  SELECT * FROM orders 
  WHERE created_at < DATE_SUB(NOW(), INTERVAL 1 YEAR);

  -- Delete archived orders from main table
  DELETE FROM orders 
  WHERE created_at < DATE_SUB(NOW(), INTERVAL 1 YEAR);
END;

How to Update Events

Use ALTER EVENT to modify existing events:

Examples:

Example 1: Change Schedule

-- Change daily cleanup to run every 2 days
ALTER EVENT daily_session_cleanup
ON SCHEDULE EVERY 2 DAY;

Example 2: Modify Event Action

-- Update the deletion criteria
ALTER EVENT delete_old_logs
DO
  DELETE FROM activity_logs 
  WHERE created_at < DATE_SUB(NOW(), INTERVAL 60 DAY);  -- Changed from 30 to 60 days

Example 3: Enable/Disable Event

-- Temporarily disable an event
ALTER EVENT weekly_sales_report DISABLE;

-- Re-enable the event
ALTER EVENT weekly_sales_report ENABLE;

Example 4: Change Event Name and Schedule

-- Rename and reschedule event
ALTER EVENT monthly_archive
RENAME TO quarterly_archive
ON SCHEDULE EVERY 3 MONTH;

How to Delete Events

Use DROP EVENT to remove events permanently:

Examples:

Example 1: Delete Specific Event

DROP EVENT delete_old_logs;

Example 2: Delete Event if it Exists

DROP EVENT IF EXISTS daily_session_cleanup;

Example 3: Delete Multiple Events (one by one)

DROP EVENT weekly_sales_report;
DROP EVENT monthly_archive;
DROP EVENT daily_session_cleanup;

Example 4: Delete Event from Specific Database

-- First switch to the database
USE ecommerce_db;
DROP EVENT product_price_update;

Event Status and Completion Options

ON COMPLETION Options:

PRESERVE: Keep event definition after execution (for one-time events)
NOT PRESERVE: Remove event definition after execution (default)

Status Options:

ENABLE: Event is active and will execute
DISABLE: Event exists but won't execute
DISABLE ON SLAVE: For replication setups

Example with All Options:

CREATE EVENT comprehensive_cleanup
ON SCHEDULE EVERY 1 WEEK
STARTS '2024-01-15 03:00:00'
ENDS '2024-12-31 23:59:59'
ON COMPLETION PRESERVE
ENABLE
COMMENT 'Weekly cleanup of temporary data'
DO
BEGIN
  DELETE FROM temp_uploads WHERE created_at < DATE_SUB(NOW(), INTERVAL 7 DAY);
  DELETE FROM temp_cache WHERE expires_at < NOW();
  OPTIMIZE TABLE temp_uploads;
END;

Common Use Cases and Best Practices

1. Data Cleanup Events

-- Remove expired password reset tokens
CREATE EVENT cleanup_password_tokens
ON SCHEDULE EVERY 1 HOUR
DO
  DELETE FROM password_resets 
  WHERE created_at < DATE_SUB(NOW(), INTERVAL 1 HOUR);

2. Statistics Updates

-- Update user activity statistics daily
CREATE EVENT update_user_stats
ON SCHEDULE EVERY 1 DAY
STARTS '2024-01-01 01:30:00'
DO
BEGIN
  UPDATE user_profiles up
  SET last_activity_days = DATEDIFF(NOW(), 
    (SELECT MAX(login_time) FROM user_sessions 
     WHERE user_id = up.id)
  );
END;

3. Backup Triggers

-- Create daily backup indicator
CREATE EVENT daily_backup_flag
ON SCHEDULE EVERY 1 DAY
STARTS '2024-01-01 23:45:00'
DO
  INSERT INTO backup_schedule (backup_date, status) 
  VALUES (CURDATE(), 'pending');

4. Data Validation

-- Check for data inconsistencies weekly
CREATE EVENT data_validation_check
ON SCHEDULE EVERY 1 WEEK
STARTS '2024-01-07 05:00:00'
DO
BEGIN
  INSERT INTO validation_log (check_date, issue_type, count)
  SELECT NOW(), 'orphaned_orders', COUNT(*)
  FROM orders o
  LEFT JOIN customers c ON o.customer_id = c.id
  WHERE c.id IS NULL;
END;

Important Notes for Beginners

Time Zones

Events use the server's time zone. Be careful when scheduling:

-- Specify exact timestamp to avoid confusion
STARTS '2024-06-15 14:30:00'

Error Handling

Events run silently. Check the error log if they don't work:

-- Enable general log to see event execution
SET GLOBAL general_log = 'ON';

Testing Events

Test your event logic first with regular queries:

-- Test the DELETE statement before creating the event
SELECT COUNT(*) FROM activity_logs 
WHERE created_at < DATE_SUB(NOW(), INTERVAL 30 DAY);

Performance Considerations

Avoid heavy operations during peak hours
Use LIMIT for large data operations
Consider breaking big tasks into smaller chunks

Monitoring Events

-- Check when events last ran
SELECT EVENT_NAME, LAST_EXECUTED, STATUS 
FROM information_schema.EVENTS 
WHERE EVENT_SCHEMA = DATABASE();

Happy Coding!

How to Fix the ‘Cannot Lock Ref’ Git Error

Manoj Swami — Thu, 08 May 2025 05:12:02 +0000

Have you ever encountered this cryptic Git error message while trying to pull the latest code?

error: cannot lock ref 'refs/remotes/origin/build/client-changes': 'refs/remotes/origin/build' exists; cannot create 'refs/remotes/origin/build/client-changes'

If so, you're not alone. This seemingly complex error has a simple cause and solution, but it can be confusing if you don't understand Git's reference system. In this article, I'll walk you through exactly what causes this problem and how to fix it—permanently.

The Problem: Git's Reference Naming Conflict

When I encountered this error in our team's frontend repository, I was initially confused. I had just run a standard git fetch command, something I'd done hundreds of times before. But this time, Git responded with an error about not being able to "lock" a reference.

Let's break down what's happening:

Our repository had a branch called build (with the full reference path refs/remotes/origin/build)
Someone on the team created a new branch called build/client-changes
When Git tried to create refs/remotes/origin/build/client-changes, it couldn't because refs/remotes/origin/build already existed

The issue is a fundamental limitation in Git's reference storage system: Git cannot have both a file and a directory with the same name in its reference structure. It's similar to how you can't have both a file named "documents" and a folder named "documents" in the same directory on your computer.

Understanding Git References

Git stores references (like branches and tags) in a hierarchical structure. When you see a branch name like origin/master, Git is actually tracking a reference at refs/remotes/origin/master.

Git references are stored in a similar way to a filesystem:

A branch like main is stored as refs/heads/main
A remote branch like origin/feature is stored as refs/remotes/origin/feature

The problem occurs when you have:

A branch named build (stored at refs/remotes/origin/build)
And want to create a branch named build/client-changes (which would need to be stored at refs/remotes/origin/build/client-changes)

Since Git's internal storage system can't handle this conflict, it throws the error we saw.

The Solution: Steps to Fix the Error

Here's how I solved this issue in our frontend repository:

Step 1: Verify the conflicting references

First, I checked which references were causing the conflict:

git show-ref | grep origin/build

This confirmed that we had a reference at refs/remotes/origin/build.

Step 2: Backup the existing branch (optional but recommended)

If you want to be safe, create a backup of the existing branch:

git branch build-backup refs/remotes/origin/build

This creates a local branch called build-backup that points to the same commit as origin/build.

Step 3: Delete the conflicting reference

Now, remove the conflicting reference:

git update-ref -d refs/remotes/origin/build

This command deletes the reference but doesn't affect any commits or code.

Step 4: Fetch again

With the conflicting reference removed, you can now fetch again:

git fetch

This time, Git should be able to create both refs/remotes/origin/build/client-changes and recreate refs/remotes/origin/build if it still exists on the remote.

Why This Happens and How to Prevent It

This error typically occurs in teams when:

Someone creates a branch named X
Later, someone else creates a branch named X/something

To prevent this issue in the future:

Establish branch naming conventions for your team
Avoid using slashes in branch names unless you're using them as hierarchical namespaces
If you use hierarchical branch names, create the "parent" namespace first (e.g., create feature/base before creating feature)

Alternative Solutions

If you don't want to delete the existing reference, you have a few other options:

Option 1: Rename the existing branch

If build is an important branch, you could rename it instead:

git branch -m origin/build origin/build-main

Option 2: Configure Git fetch to skip the problematic reference

You can tell Git to ignore specific problematic references during fetch:

git config --add remote.origin.fetch '^refs/remotes/origin/build/client-changes'

This tells Git not to try fetching that specific reference.

Conclusion

Git's reference system is powerful but can sometimes lead to confusing errors like this one. Understanding that Git's references are stored in a hierarchical structure similar to a filesystem helps make sense of these errors.

The next time you see this error, you'll know exactly how to fix it:

Identify the conflicting references
Backup if necessary
Delete the existing reference
Fetch again

By establishing good branch naming conventions with your team, you can avoid this issue entirely and keep your Git workflow smooth and error-free.

Happy coding!

JavaScript (ES6+) Array Functions with Examples

Manoj Swami — Thu, 01 May 2025 15:46:12 +0000

Below is a detailed, up-to-date list of all standard JavaScript array methods and properties introduced up to ES6 and beyond, along with simple explanations and code examples for each. This is ideal for a technical blog post targeting developers.

Array Creation & Identification

Array.isArray() Checks if a value is an array.

  Array.isArray([1, 2, 3]); // true

Array.from() Creates a new array from an array-like or iterable object.

  Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']

Array.of() Creates a new array from arguments.

  Array.of(1, 2, 3); // [1, 2, 3]

Accessing Elements

at(index) Returns the element at the given index (supports negative indices).

  ['a', 'b', 'c'].at(-1); // 'c'

Adding/Removing Elements

push(element1, ..., elementN) Adds elements to the end, returns new length.

  const arr = [1, 2]; arr.push(3); // arr: [1, 2, 3]

pop() Removes and returns the last element.

  const arr = [1, 2, 3]; arr.pop(); // 3, arr: [1, 2]

unshift(element1, ..., elementN) Adds elements to the start, returns new length.

  const arr = [2, 3]; arr.unshift(1); // arr: [1, 2, 3]

shift() Removes and returns the first element.

  const arr = [1, 2, 3]; arr.shift(); // 1, arr: [2, 3]

splice(start, deleteCount, ...items) Adds/removes/replaces elements at any position.

  const arr = [1, 2, 3]; arr.splice(1, 1, 9); // arr: [1, 9, 3]

copyWithin(target, start, end) Copies part of array to another location in the same array.

  [1, 2, 3, 4].copyWithin(1, 2); // [1, 3, 4, 4]

fill(value, start, end) Fills elements with a static value.

  [1, 2, 3].fill(0, 1); // [1, 0, 0]

with(index, value) Returns a new array with the value at the given index replaced (immutable).

  [1, 2, 3].with(1, 9); // [1, 9, 3]

Combining & Slicing

concat(...arrays) Merges arrays and/or values into a new array.

  [1, 2].concat([3, 4]); // [1, 2, 3, 4]

slice(start, end) Returns a shallow copy of a portion of an array.

  [1, 2, 3].slice(1, 3); // [2, 3]

Iteration & Transformation

forEach(callback) Executes a function for each element.

  [1, 2, 3].forEach(x => console.log(x));

map(callback) Creates a new array by transforming each element.

  [1, 2, 3].map(x => x * 2); // [2, 4, 6]

filter(callback) Creates a new array with elements that pass the test.

  [1, 2, 3].filter(x => x > 1); // [2, 3]

reduce(callback, initialValue) Reduces array to a single value (left-to-right).

  [1, 2, 3].reduce((a, b) => a + b, 0); // 6

reduceRight(callback, initialValue) Reduces array to a single value (right-to-left).

  [1, 2, 3].reduceRight((a, b) => a - b); // 0 (3-2-1)

flat(depth = 1) Flattens nested arrays up to specified depth.

  [1, [2, [3]]].flat(2); // [1, 2, 3]

flatMap(callback) Maps and flattens the result into a new array.

  [1, 2].flatMap(x => [x, x * 2]); // [1, 2, 2, 4]

Searching & Testing

find(callback) Returns the first element matching a condition.

  [1, 2, 3].find(x => x > 1); // 2

findIndex(callback) Returns the index of the first element matching a condition.

  [1, 2, 3].findIndex(x => x > 1); // 1

findLast(callback) Returns the last element matching a condition.

  [1, 2, 3, 2].findLast(x => x === 2); // 2

findLastIndex(callback) Returns the index of the last element matching a condition.

  [1, 2, 3, 2].findLastIndex(x => x === 2); // 3

includes(value, fromIndex) Checks if array contains a value.

  [1, 2, 3].includes(2); // true

indexOf(value, fromIndex) Returns the first index of a value, or -1 if not found.

  [1, 2, 3].indexOf(2); // 1

lastIndexOf(value, fromIndex) Returns the last index of a value, or -1 if not found.

  [1, 2, 3, 2].lastIndexOf(2); // 3

some(callback) Checks if at least one element passes the test.

  [1, 2, 3].some(x => x > 2); // true

every(callback) Checks if all elements pass the test.

  [1, 2, 3].every(x => x > 0); // true

Sorting & Reversing

sort(compareFunction) Sorts array in place.

  [3, 1, 2].sort(); // [1, 2, 3]

toSorted(compareFunction) Returns a sorted copy (does not modify original).

  [3, 1, 2].toSorted(); // [1, 2, 3]

reverse() Reverses array in place.

  [1, 2, 3].reverse(); // [3, 2, 1]

toReversed() Returns a reversed copy (does not modify original).

  [1, 2, 3].toReversed(); // [3, 2, 1]

String Conversion

join(separator) Joins all elements into a string.

  [1, 2, 3].join('-'); // '1-2-3'

toString() Converts array to a comma-separated string.

  [1, 2, 3].toString(); // '1,2,3'

Iterators

entries() Returns an iterator of [index, value] pairs.

  for (const [i, v] of ['a', 'b'].entries()) { console.log(i, v); }
  // 0 'a', 1 'b'

keys() Returns an iterator of keys (indices).

  for (const k of ['a', 'b'].keys()) { console.log(k); }
  // 0, 1

values() Returns an iterator of values.

  for (const v of ['a', 'b'].values()) { console.log(v); }
  // 'a', 'b'

Immutable Array Methods (ES2023+)

toSpliced(start, deleteCount, ...items) Returns a copy with elements added/removed (original unchanged).

  [1, 2, 3].toSpliced(1, 1, 9); // [1, 9, 3]

Miscellaneous

length Returns or sets the number of elements.

  const arr = [1, 2, 3]; arr.length; // 3

valueOf() Returns the array itself (default behavior).

  [1, 2, 3].valueOf(); // [1, 2, 3]

constructor Returns the function that created the Array prototype.

  [].constructor === Array; // true

prototype Allows adding properties/methods to Array objects (advanced use).

  Array.prototype.sum = function() { return this.reduce((a, b) => a + b, 0); }
  [1, 2, 3].sum(); // 6

Git Push Failing? Fix ‘pack-objects Died of Signal 9’ with These Proven Solutions

Manoj Swami — Tue, 22 Apr 2025 11:59:06 +0000

Have you ever tried pushing your code to GitHub and encountered a frustrating error message like this?

error: pack-objects died of signal 9
error: remote unpack failed: index-pack failed

If so, you're not alone. This common Git error occurs when pushing large repositories and can be quite confusing if you don't understand what's happening. In this guide, I'll explain these errors in simple terms and provide practical solutions to get your code safely to GitHub.

What's Actually Happening?

When you see an error message containing pack-objects died of signal 9, your Git push operation was terminated by the operating system because it was consuming too much memory. Let's break down the error message:

signal 9 refers to SIGKILL - a signal sent by the operating system to forcibly terminate a process
pack-objects is the Git process responsible for compressing and preparing your files for transfer
The "remote unpack failed: index-pack failed" means the server couldn't properly receive and process your files

In plain English: Your computer ran out of memory while trying to package up your files to send to GitHub.

Common Scenarios That Cause This Error

Large repositories - Repositories with many files or large binary files
Limited RAM - Pushing from a server or computer with limited memory
Many changes - Pushing a large number of changes at once
Large binary files - Repositories containing large media files, datasets, or compiled binaries
Concurrent memory-intensive processes - Running other memory-hungry applications while pushing

Step-by-Step Solutions

Let's explore various approaches to solve this problem, from simplest to more complex:

Solution 1: Configure Git to Use Less Memory

Git can be configured to use less memory during push operations. Open your terminal and run:

git config --global pack.threads 1
git config --global pack.windowMemory 100m
git config --global pack.packSizeLimit 100m
git config --global pack.deltaCacheSize 100m

These commands:

Reduce the number of threads Git uses (less parallel processing means less memory)
Limit the amount of memory used for various packing operations to 100MB each

This approach often works well for medium-sized repositories when pushed from machines with limited memory.

Solution 2: Disable Compression Temporarily

Git compresses files when pushing, which requires additional memory. You can temporarily disable compression:

git config --global core.compression 0
git push origin <your-target-branch>

After your push completes, you might want to restore the default compression:

git config --global core.compression -1

Solution 3: Increase Available Memory

If you're working on a system where you can control resources:

Add more RAM to your computer or server if possible
Increase swap space (virtual memory)
Close other applications consuming memory

Adding Swap Space on Linux:

# Create a 2GB swap file
sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

# Make it permanent (survive reboots)
echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab

Solution 4: Push in Smaller Chunks

Break up your large push into smaller pieces:

# Instead of pushing all commits at once:
git push origin master

# Push only your most recent commit:
git push origin HEAD^:master

# Or use shallow pushing (if your remote allows it):
git push --depth=1 origin master

Solution 5: Use Git LFS for Large Files

If your repository contains large binary files (images, videos, datasets), consider using Git Large File Storage (LFS):

Install Git LFS:

   git lfs install

Track large file types:

   git lfs track "*.psd"
   git lfs track "*.zip"
   git lfs track "*.mp4"

Add the .gitattributes file:

   git add .gitattributes

Commit and push as normal:

   git add file.psd
   git commit -m "Add large design file"
   git push origin master

Solution 6: Split Your Repository

If your repository has become too large to manage effectively, consider:

Breaking it into multiple repositories based on components or modules
Using Git submodules or subtrees to manage multiple repositories together
Removing large files from history using tools like BFG Repo-Cleaner

Common Related Errors and Their Solutions

Error: "fatal: The remote end hung up unexpectedly"

This means the connection to the server was lost during the push. Possible causes:

Network instability
Server timeout due to large transfer
Memory issues similar to our main topic

Solutions:

Try a more stable internet connection
Increase Git buffer size:

  git config --global http.postBuffer 524288000

Error: "RPC failed; curl 55 SSL_write() returned SYSCALL, errno = 32"

This indicates an SSL/network failure during the push process.

Solutions:

Increase Git buffer size and timeout:

  git config --global http.postBuffer 524288000
  git config --global http.lowSpeedLimit 0
  git config --global http.lowSpeedTime 999999

Error: "fatal: pack exceeds maximum allowed size"

Some Git servers limit the maximum pack size they accept.

Solutions:

Push in smaller chunks
Contact your Git server administrator about size limits
Use Git LFS for large files

Error: "gzip: stdout: No space left on device"

Your system's temporary directory ran out of disk space during the Git operation.

Solutions:

Free up disk space
Specify an alternative temporary directory:

  GIT_TMPDIR=/path/with/space git push origin master

Prevention: Best Practices for Repository Management

Commit frequently but push strategically - More small pushes are better than infrequent large ones
Use .gitignore properly - Exclude build artifacts, dependencies, and other unnecessary files
Don't store large binary files in Git - Use Git LFS or external storage solutions
Clean your repository periodically - Remove outdated branches and unnecessary files
Monitor repository size - Use git count-objects -v to check repository size regularly

Conclusion

Git "pack-objects died of signal 9" errors are frustrating but solvable. By understanding what causes these memory issues and applying the appropriate solutions, you can successfully push even large repositories to GitHub.

Remember that Git was primarily designed for source code, not large binary files. Following best practices for repository management can help you avoid these issues in the future.

Happy Coding!

How to Clean Up Git Branches: Scripts to Delete Old, Inactive, and Unused Branches

Manoj Swami — Fri, 11 Apr 2025 03:04:51 +0000

As software development projects grow, so does the number of Git branches. Before long, your repository can become cluttered with old, inactive branches that serve no purpose. These abandoned branches aren't just digital clutter—they can make repository management more difficult, slow down Git operations, and confuse new team members.

In this comprehensive guide, I'll walk you through the process of cleaning up your Git repository by removing stale branches both locally and remotely. I'll provide ready-to-use scripts for various scenarios, with step-by-step explanations that even Git beginners can follow.

Why You Should Clean Up Old Branches

Before we dive into the technical details, let's understand why regular branch cleanup is important:

Improved Performance: Fewer branches means faster Git operations, especially for commands like git fetch and git pull.
Better Organization: A clean repository makes it easier to find relevant branches.
Reduced Confusion: New team members won't be distracted by outdated branches.
Lower Storage Requirements: While individual branches don't take up much space, they add up over time.
Cleaner CI/CD Pipelines: Many CI systems run on all branches by default, so fewer branches means fewer unnecessary builds.

Scenario 1: Deleting Inactive Branches with No Open PRs

Our first scenario addresses a common need: removing branches that haven't been active in the past 30 days and don't have open pull requests associated with them.

Here's a script that handles this task, with both local and remote branch cleanup:

#!/bin/bash

# Get current date in seconds since epoch
current_date=$(date +%s)

# Calculate date 30 days ago in seconds
thirty_days_ago=$((current_date - 30*24*60*60))

# Remote repository name (usually "origin")
remote="origin"

# Get all branches except main/master
branches=$(git branch | grep -v "^*\|main\|master" | sed 's/^[ \t]*//')

for branch in $branches; do
  # Get last commit date for branch in seconds since epoch
  last_commit_date=$(git log -1 --format=%at "$branch")

  # Skip if the branch has activity in the last 30 days
  if [ "$last_commit_date" -gt "$thirty_days_ago" ]; then
    echo "Skipping $branch - has recent activity"
    continue
  fi

  # Check for open PRs (this example uses GitHub CLI)
  if command -v gh &> /dev/null; then
    pr_count=$(gh pr list --head "$branch" --state open --json number | jq length)

    if [ "$pr_count" -gt 0 ]; then
      echo "Skipping $branch - has $pr_count open PR(s)"
      continue
    fi
  else
    echo "GitHub CLI not installed, skipping PR check for $branch"
    read -p "Do you want to delete $branch anyway? (y/n) " confirm
    if [ "$confirm" != "y" ]; then
      continue
    fi
  fi

  # Delete the local branch
  echo "Deleting local branch: $branch"
  git branch -D "$branch"

  # Check if branch exists on remote
  if git ls-remote --heads $remote | grep -q "refs/heads/$branch"; then
    echo "Deleting remote branch: $branch from $remote"
    git push $remote --delete "$branch"
  else
    echo "No remote branch found for $branch"
  fi
done

If you don't have GitHub CLI installed, here's an alternative version that will ask for manual confirmation instead:

#!/bin/bash

# Get current date in seconds since epoch
current_date=$(date +%s)

# Calculate date 30 days ago in seconds
thirty_days_ago=$((current_date - 30*24*60*60))

# Remote repository name (usually "origin")
remote="origin"

# Update remote references
git fetch $remote --prune

# Get all local branches except main/master
branches=$(git branch | grep -v "^*\|main\|master" | sed 's/^[ \t]*//')

for branch in $branches; do
  # Get last commit date for branch in seconds since epoch
  last_commit_date=$(git log -1 --format=%at "$branch")

  # Skip if the branch has activity in the last 30 days
  if [ "$last_commit_date" -gt "$thirty_days_ago" ]; then
    echo "Skipping $branch - has recent activity"
    continue
  fi

  # Manual check for PRs since we don't have GitHub CLI
  echo "Checking branch: $branch"
  echo "Please verify manually if there are any open PRs for this branch."
  read -p "Is it safe to delete $branch? (y/n) " confirm
  if [ "$confirm" != "y" ]; then
    continue
  fi

  # Delete the local branch
  echo "Deleting local branch: $branch"
  git branch -D "$branch"

  # Check if branch exists on remote
  if git ls-remote --heads $remote | grep -q "refs/heads/$branch"; then
    echo "Deleting remote branch: $branch from $remote"
    git push $remote --delete "$branch"
  else
    echo "No remote branch found for $branch"
  fi
done

Scenario 2: Keeping Only Specific Branches

Sometimes you might want to take a more drastic approach and delete all branches except a few specific ones you want to keep. This is useful for repository cleanup after completing a major milestone or version release.

Here's a script that keeps only the branches you specify and deletes everything else:

#!/bin/bash

# List of branches to keep
protected_branches=("master" "develop" "feature-x" "release-1.0" "hotfix-login")

# Remote repository name (usually "origin")
remote="origin"

# Fetch latest information from remote
echo "Fetching latest information from remote..."
git fetch --all --prune

# Get all local branches
echo "Finding branches to delete..."
all_local_branches=$(git branch | sed 's/^[ *]*//')

# Delete local branches
for branch in $all_local_branches; do
  # Check if branch is in protected list
  if [[ ! " ${protected_branches[@]} " =~ " ${branch} " ]]; then
    echo "Deleting local branch: $branch"
    git branch -D "$branch" || echo "Failed to delete local branch: $branch"
  else
    echo "Keeping protected local branch: $branch"
  fi
done

# Get all remote branches
all_remote_branches=$(git branch -r | grep -v HEAD | sed "s|$remote/||" | tr -d ' ')

# Delete remote branches
for branch in $all_remote_branches; do
  # Check if branch is in protected list
  if [[ ! " ${protected_branches[@]} " =~ " ${branch} " ]]; then
    echo "Deleting remote branch: $branch"
    git push $remote --delete "$branch" || echo "Failed to delete remote branch: $branch"
  else
    echo "Keeping protected remote branch: $branch"
  fi
done

echo "Branch cleanup complete!"

Simply replace the protected_branches array with the names of the branches you want to keep. Everything else will be deleted both locally and remotely.

How to Execute the Cleanup Scripts

To use any of these scripts, follow these simple steps:

Save the script to a file with a .sh extension, for example cleanup-inactive-branches.sh or keep-only-selected-branches.sh.
Make the script executable:

   chmod +x cleanup-inactive-branches.sh

Navigate to your Git repository:

   cd /path/to/your/repository

Run the script:

   ./cleanup-inactive-branches.sh

The script will process each branch according to the criteria defined and provide output about which branches are being kept or deleted.

Understanding the Code

Let's break down the key components of these scripts so you understand what they're doing:

For the Inactive Branches Script:

Date Calculation: The script calculates the current date and the date 30 days ago in Unix timestamp format (seconds since January 1, 1970).
Branch Listing: It retrieves all branches except the currently checked-out branch and standard branches like main or master.
Activity Check: For each branch, it gets the timestamp of the last commit and compares it to the 30-day threshold.
PR Check: It uses GitHub CLI (if available) to check if there are open pull requests for each branch.
Branch Deletion: For branches that pass all criteria (inactive and no open PRs), it deletes them both locally and remotely.

For the Keep-Only-Selected Script:

Protected Branches: You define an array of branch names that should be kept.
Branch Listing: The script gets all local and remote branches.
Comparison Logic: It checks each branch against the protected list.
Branch Deletion: Any branch not in the protected list is deleted, both locally and remotely.

Safety Precautions

Working with branch deletion can be risky, so here are some important safety measures:

Backup First: Always create a backup of your repository before running these scripts, especially in production environments. A simple way is to clone your repository to a temporary location:

   git clone https://github.com/your-username/your-repo.git backup-repo

Dry Run Mode: Consider adding a "dry run" mode to your scripts by commenting out the actual deletion commands and just printing what would be deleted:

   # echo "Would delete local branch: $branch"
   # git branch -D "$branch"

Check Current Branch: Make sure you're not deleting the branch you're currently on, which would cause errors.
Permission Check: Ensure you have the necessary permissions to delete remote branches before running the script.
Team Communication: If you're working in a team, communicate your intentions before performing mass branch deletion.

Automating Branch Cleanup

To maintain a clean repository long-term, consider automating the cleanup process:

Using Git Hooks

You can set up a Git hook to run your cleanup script at regular intervals:

Create a pre-push hook:

   touch .git/hooks/pre-push
   chmod +x .git/hooks/pre-push

Add your cleanup script to the hook:

   # .git/hooks/pre-push
   #!/bin/bash

   # Run branch cleanup
   /path/to/your/cleanup-inactive-branches.sh

Using CI/CD Pipelines

Many CI/CD systems like GitHub Actions, GitLab CI, or Jenkins can be configured to run maintenance tasks like branch cleanup on a schedule.

Here's a simple GitHub Actions workflow that runs branch cleanup monthly:

name: Branch Cleanup

on:
  schedule:
    - cron: '0 0 1 * *'  # Runs at midnight on the first day of each month

jobs:
  cleanup:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          fetch-depth: 0

      - name: Setup Git
        run: |
          git config user.name "GitHub Actions"
          git config user.email "actions@github.com"

      - name: Run cleanup script
        run: |
          chmod +x .github/scripts/cleanup-inactive-branches.sh
          .github/scripts/cleanup-inactive-branches.sh

Conclusion

Regular Git branch cleanup is an essential part of maintaining a healthy and efficient development workflow. The scripts provided in this guide give you powerful tools to automate this process according to your specific needs.

Remember that these scripts are destructive by nature—they're designed to delete branches. Always use them with caution, ensure you have proper backups, and communicate with your team before performing large-scale cleanups.

By incorporating these practices into your development workflow, you'll enjoy a cleaner, more organized Git repository that's easier to manage and navigate for everyone on your team.

Do you have any other Git maintenance scripts you find helpful? Share them in the comments below!

MacOS - Solving ZSH compinit's "Insecure Files" Warning

Manoj Swami — Tue, 25 Mar 2025 10:55:48 +0000

When using ZSH as your shell, you may occasionally encounter this frustrating warning:

zsh compinit: insecure files, run compaudit for list.
Ignore insecure files and continue [y] or abort compinit [n]?

This message appears when ZSH's completion system (compinit) detects files with permissions it considers insecure. This guide will help you understand why this happens and provide multiple solutions to fix it permanently.

Understanding the Problem

What is compinit?

compinit is the initialization function for ZSH's programmable completion system. It reads completion specifications and configures the shell to provide context-aware tab completion.

Why Are There "Insecure Files"?

ZSH considers files "insecure" when they or their parent directories are writable by users other than their owner or root. This is a security measure to prevent potential exploits where malicious code could be injected into completion files.

Common culprits include:

Package managers like Homebrew that create symlinks in ZSH completion directories
Incorrect permissions on ZSH configuration directories
Files owned by different users than your current user

Diagnosing the Issue

The first step is to identify which files ZSH considers insecure.

compaudit

This will output paths to all files and directories with problematic permissions. A more detailed approach:

ls -l $(compaudit)

This shows you the permissions, ownership, and symlink targets (if applicable) of each flagged file.

Solutions: From Simple to Comprehensive

Let's explore multiple solutions, starting with the simplest and progressing to more thorough approaches.

Solution 1: The Quick Fix (Temporary)

If you're in a hurry, you can tell ZSH to ignore the insecure files:

# Run once
compinit -u

Or add to your ~/.zshrc for a persistent but not ideal solution:

# Add to ~/.zshrc
autoload -Uz compinit && compinit -u

The -u flag tells compinit to use insecure files anyway. However, this doesn't fix the underlying permission issue.

Solution 2: Basic Permission Fix

Fix permissions on the ZSH site-functions directory and its completion files:

chmod 755 /opt/homebrew/share/zsh/site-functions
chmod 755 /opt/homebrew/share/zsh/site-functions/_*

For system-wide directories, you'll need sudo:

sudo chmod 755 /opt/homebrew/share/zsh/site-functions
sudo chmod 755 /opt/homebrew/share/zsh/site-functions/_*

Solution 3: Using compaudit to Target Specific Files

Let compaudit tell you exactly which files need fixing:

compaudit | xargs chmod g-w

With sudo if needed:

compaudit | xargs sudo chmod g-w

Solution 4: Comprehensive Fix for Symbolic Links

Many completion files are symbolic links to files installed by package managers. You need to fix both the symlinks and their targets:

for file in $(compaudit); do
  sudo chmod 755 $(readlink -f $file)
  sudo chmod 755 $file
done

Solution 5: Ultimate Fix (Addressing Parent Directories and Ownership)

The most thorough approach addresses file permissions, directory permissions, and ownership:

for file in $(compaudit); do
  sudo chmod 755 $file
  sudo chmod 755 $(dirname $file)
  sudo chown $(whoami) $file
done

This command:

Sets secure permissions (755) on each insecure file
Also sets secure permissions on the parent directory
Changes ownership of the file to your user

Solution 6: Fix for Homebrew-specific Issues

If you're using Homebrew (common on macOS), many of these insecure files are symlinks to Homebrew-managed files. Here's a targeted fix:

# Fix Homebrew's ZSH site-functions
chmod 755 /opt/homebrew/share
chmod 755 /opt/homebrew/share/zsh
chmod 755 /opt/homebrew/share/zsh/site-functions
chmod 755 /opt/homebrew/share/zsh/site-functions/_*

# Fix Homebrew Cellar directories that contain the actual completion files
find /opt/homebrew/Cellar -name "zsh" -type d | xargs chmod -R 755
find /opt/homebrew/Cellar -name "site-functions" -type d | xargs chmod -R 755

Solution 7: Fix When Nothing Else Works

If all else fails, this aggressive approach usually resolves even the most stubborn cases:

# First, back up your completion files
mkdir -p ~/zsh_compinit_backup
cp -R /opt/homebrew/share/zsh/site-functions/* ~/zsh_compinit_backup/

# Then execute this comprehensive fix
find /opt/homebrew -name "site-functions" -type d | xargs sudo find | xargs sudo chmod 755
find /opt/homebrew -name "site-functions" -type d | xargs sudo find | xargs sudo chown $(whoami)

Verifying the Fix

After applying any solution, check if it worked:

Close and reopen your terminal completely (don't just open a new tab/window)
Run compaudit again - if it returns nothing, the issue is fixed
If the warning still appears, try the next solution in the list

Preventing Future Issues

Option 1: Add Safer compinit to Your .zshrc

Instead of the default compinit initialization, use:

# Add to ~/.zshrc
autoload -Uz compinit
if [ "$(date +'%j')" != "$(stat -f '%Sm' -t '%j' ~/.zcompdump 2>/dev/null)" ]; then
  compinit
else
  compinit -C
fi

This optimizes compinit to only do a full check once per day while using cached results otherwise.

Option 2: Auto-fix Permissions on Shell Startup

Add this to your .zshrc to automatically fix permissions when you open a shell:

# Add to ~/.zshrc
# Auto-fix ZSH compinit insecure directories
function fix_compinit_insecure_dirs() {
  local insecure_dirs=$(compaudit 2>/dev/null)
  if [[ -n "$insecure_dirs" ]]; then
    echo "Fixing insecure completion directories..."
    for dir in ${(f)insecure_dirs}; do
      chmod 755 "$dir"
      chmod 755 "$(dirname $dir)"
    done
    # Reinitialize completions
    compinit
  fi
}
fix_compinit_insecure_dirs

Option 3: For Homebrew Users

If you use Homebrew and frequently update packages, add this to your .zshrc:

# Add to ~/.zshrc
# Auto-fix permissions after Homebrew updates
function brew_with_fixed_permissions() {
  command brew "$@"
  if [[ "$1" == "update" || "$1" == "upgrade" || "$1" == "install" || "$1" == "link" ]]; then
    chmod 755 /opt/homebrew/share/zsh/site-functions/_*
  fi
}
alias brew=brew_with_fixed_permissions

Common Failure Scenarios and Solutions

Scenario 1: Permissions Keep Reverting After Updates

Problem: You fix the permissions, but they revert after updating your system or packages.

Solution: Package managers often reset file permissions during updates. Use Option 3 above to automatically fix permissions after updates.

Scenario 2: Homebrew Cask Symlinks

Problem: You see Google Cloud SDK or other Cask-installed tools in your insecure files list.

Solution: These symlinks point to paths in the Caskroom. Fix with:

for file in $(compaudit | grep Caskroom); do
  sudo chmod 755 $file
  sudo chmod 755 $(readlink -f $file)
  sudo chmod 755 $(dirname $(readlink -f $file))
done

Scenario 3: Oh-My-Zsh Plugin Issues

Problem: Oh-My-Zsh plugins have insecure permissions.

Solution:

chmod -R 755 ~/.oh-my-zsh/plugins
chmod -R 755 ~/.oh-my-zsh/custom/plugins

Scenario 4: NVM, RVM, or Other Version Managers

Problem: Version managers that modify your shell environment create insecure files.

Solution:

# For NVM
chmod -R 755 $NVM_DIR

# For RVM
chmod -R 755 $rvm_path

Understanding the Permissions

For those unfamiliar with Unix permissions, here's what the numbers mean:

755 means:
- Owner can read, write, and execute (7 = 4+2+1)
- Group can read and execute (5 = 4+0+1)
- Others can read and execute (5 = 4+0+1)

This is considered secure because only the owner can modify the files.

Conclusion

Dealing with ZSH's "insecure files" warning can be frustrating, but with this comprehensive guide, you should be able to identify and fix any occurrence of this issue. The most effective approach is usually Solution 5, which addresses files, directories, and ownership in one go.

Remember that certain activities (like package manager updates) might reintroduce insecure files, so consider implementing one of the preventive measures to maintain a clean ZSH environment.

Once fixed properly, you'll enjoy a more secure and warning-free shell experience!

# The ultimate one-liner that fixes most cases:
for file in $(compaudit); do sudo chmod 755 $file sudo chmod 755 $(dirname $file) sudo chown $(whoami) $file; done

Happy coding!

Managing PM2 Logs: Preventing Performance Issues in Node.js Applications

Manoj Swami — Fri, 28 Feb 2025 14:49:06 +0000

If you're running Node.js applications in production, you've probably encountered PM2, the popular process manager that helps keep your applications running smoothly. While PM2 offers excellent features for managing and monitoring your applications, there's a potential issue that many developers overlook: log file growth.

In this article, we'll explore how large PM2 log files can impact your application's performance and provide practical solutions to manage these logs effectively.

The Problem: How Large PM2 Logs Impact Performance

When PM2 manages your Node.js applications, it creates log files to capture standard output and error streams. Over time, these logs can grow extremely large—sometimes reaching gigabytes in size. A 20GB log file isn't uncommon in busy applications that have been running for months without proper log management.

These oversized log files can cause several performance issues:

Increased Disk I/O: PM2 continuously writes to log files. When these files become enormous, write operations become more resource-intensive, competing with your application for disk access.
Memory Pressure: Managing very large files requires additional memory allocation, potentially reducing what's available for your Node.js application.
Slower File System Operations: Operations that need to seek through the file become slower as file size increases.
Backup Complications: Large log files make backups more time-consuming and storage-intensive.

Let's look at several approaches to solve this problem, from simplest to most sophisticated.

Solution 1: Manual Log Truncation

The quickest way to address an immediate issue with oversized log files is to manually truncate them. Here's how:

# Truncate all PM2 logs
pm2 flush

# Truncate a specific application's logs
truncate -s 0 ~/.pm2/logs/your-app-name-out.log
truncate -s 0 ~/.pm2/logs/your-app-name-error.log

The truncate command reduces the file size to zero without deleting the file itself, allowing PM2 to continue writing to the same file.

Solution 2: Scheduled Log Cleanup with Cron

To prevent log files from growing too large in the first place, you can set up a cron job to regularly manage your logs. Here are several approaches:

Option A: Truncate Log Files

# Add to crontab (crontab -e)
# Run at midnight every day
0 0 * * * truncate -s 0 ~/.pm2/logs/*.log

Option B: Delete Log Files

# Add to crontab (crontab -e)
# Run at midnight every day
0 0 * * * rm -f ~/.pm2/logs/*.log

Option C: Clear Log Directory Contents

# Add to crontab (crontab -e)
# Run at midnight every day
0 0 * * * rm -rf ~/.pm2/logs/* && mkdir -p ~/.pm2/logs

Option D: Delete Logs Older Than X Days

# Add to crontab (crontab -e)
# Delete logs older than 7 days
0 0 * * * find ~/.pm2/logs -type f -name "*.log" -mtime +7 -delete

Solution 3: Using PM2's Built-in Flush Command with Cron

PM2 provides a flush command that clears all application logs:

# Add to crontab (crontab -e)
0 0 * * * pm2 flush

This approach is simpler than manually truncating specific files and works across all your PM2-managed applications.

Solution 4: PM2 Logrotate Module (Recommended)

The most elegant solution is to use PM2's official log rotation module. This approach gives you the most control and follows best practices for log management.

Step 1: Install the module

pm2 install pm2-logrotate

Step 2: Configure rotation settings

# Set maximum size before rotation
pm2 set pm2-logrotate:max_size 10M

# Keep only 10 rotated files
pm2 set pm2-logrotate:retain 10

# Compress rotated logs to save space
pm2 set pm2-logrotate:compress true

# Rotate logs daily at midnight
pm2 set pm2-logrotate:rotateInterval '0 0 * * *'

# Use date-based suffixes for rotated logs
pm2 set pm2-logrotate:dateFormat YYYY-MM-DD

With these settings, your logs will automatically rotate when they reach 10MB in size or at midnight each day, whichever comes first. Only the 10 most recent log files will be kept, and they'll be compressed to save space.

Solution 5: External Logging Services

For more advanced needs, consider moving beyond local file logging altogether:

Use a dedicated logging service like Loggly, Papertrail, or ELK Stack
Implement a custom logging solution using Winston or Bunyan that sends logs to external storage
Use container orchestration logging like Kubernetes logging with Fluentd

Setting Up Time-Based Log Management for Different Time Zones

If your server runs in a different time zone than your local time, you'll need to adjust your cron schedule accordingly. For example, if you want logs to rotate at 6 AM Indian Standard Time (IST), which is UTC+5:30, you would use:

# 6 AM IST = 00:30 UTC
# Add to crontab (crontab -e)
30 0 * * * pm2 flush

Here's how to calculate this for other time zones:

Identify your target local time (e.g., 6 AM IST)
Determine the UTC offset for that time zone (IST is UTC+5:30)
Subtract the offset from your target time (6:00 - 5:30 = 00:30 UTC)
Use the resulting UTC time in your cron schedule

Best Practices

Regardless of which solution you choose, follow these best practices:

Monitor log growth: Regularly check log file sizes with du -sh ~/.pm2/logs/
Backup important logs: Before implementing any cleanup, archive logs that contain valuable information
Test your solution: Verify that your applications continue to work properly after log cleanup
Document your approach: Make sure your team knows how logs are managed
Consider compliance requirements: Some industries have specific log retention requirements

Conclusion

Large PM2 log files can significantly impact your Node.js application's performance. By implementing one of the approaches outlined in this article, you can prevent these issues and ensure your applications run smoothly.

For most production environments, the PM2 logrotate module (Solution 4) offers the best balance of simplicity and control. However, any of these methods will help prevent the performance problems associated with oversized log files.

Remember that effective log management is an essential part of maintaining healthy production applications. Taking the time to set up proper log rotation will save you from troubleshooting mysterious performance issues down the road.

Happy Coding!

MySQL ONLY_FULL_GROUP_BY Error: Easy Fixes and Best Practices

Manoj Swami — Tue, 14 Jan 2025 11:17:48 +0000

Have you ever seen this MySQL error and felt confused?

Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column which is not functionally dependent on columns in GROUP BY clause; this is incompatible with sql_mode=only_full_group_by

Don't worry! This guide will help you understand and fix this error. Whether you're new to MySQL or an experienced user, you'll find helpful solutions here.

What is ONLY_FULL_GROUP_BY?

ONLY_FULL_GROUP_BY is a MySQL setting that makes GROUP BY work in a standard way. When it's on, your SELECT statement must follow these rules:

Include all columns in the GROUP BY part
Use functions like COUNT or SUM for other columns
Only use columns that depend on the GROUP BY columns

Why Does This Error Happen?

Let's look at an example. Imagine you have a table called orders:

CREATE TABLE orders (
    id INT,
    customer_name VARCHAR(100),
    product VARCHAR(100),
    amount DECIMAL(10,2)
);

INSERT INTO orders VALUES
(1, 'John', 'Laptop', 1000),
(2, 'John', 'Mouse', 20),
(3, 'Mary', 'Keyboard', 50),
(4, 'Mary', 'Monitor', 200);

This query will cause the error:

SELECT customer_name, product, SUM(amount)
FROM orders
GROUP BY customer_name;

Why? Because we're selecting product, but it's not in the GROUP BY part. MySQL doesn't know which product to show for each customer since they might have bought multiple products.

How to Fix the Error

Fix 1: Change MySQL Settings

For a quick fix, you can turn off ONLY_FULL_GROUP_BY:

SET SESSION sql_mode=(SELECT REPLACE(@@sql_mode,'ONLY_FULL_GROUP_BY',''));

For a permanent fix:

SET GLOBAL sql_mode='STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION';

Fix 2: Change Your Queries

Method 1: Add All Columns to GROUP BY

SELECT customer_name, product, SUM(amount)
FROM orders
GROUP BY customer_name, product;

Method 2: Use Functions Like MAX or MIN

SELECT 
    customer_name,
    MAX(product) as product,
    SUM(amount) as total_amount
FROM orders
GROUP BY customer_name;

Method 3: Use Subqueries

SELECT o.*
FROM orders o
INNER JOIN (
    SELECT customer_name, SUM(amount) as total_amount
    FROM orders
    GROUP BY customer_name
) grouped ON o.customer_name = grouped.customer_name;

Real-World Examples

Example 1: Sales Report

SELECT 
    category,
    MAX(product_name) as top_product,
    COUNT(*) as total_orders,
    SUM(amount) as total_sales
FROM sales
GROUP BY category;

Example 2: Customer Analysis

SELECT 
    customer_id,
    MIN(first_name) as first_name,
    MIN(last_name) as last_name,
    COUNT(*) as total_purchases,
    SUM(purchase_amount) as total_spent,
    AVG(purchase_amount) as avg_purchase_amount
FROM customer_purchases
GROUP BY customer_id;

Common Mistakes to Avoid

Forgetting About Unique IDs

   -- Wrong
   SELECT id, customer_name, COUNT(*)
   FROM orders
   GROUP BY customer_name;

   -- Right
   SELECT MIN(id) as first_order_id, customer_name, COUNT(*)
   FROM orders
   GROUP BY customer_name;

Complex Joins with GROUP BY

   -- Wrong
   SELECT o.id, c.name, p.category, COUNT(*)
   FROM orders o
   JOIN customers c ON o.customer_id = c.id
   JOIN products p ON o.product_id = p.id
   GROUP BY c.name;

   -- Right
   SELECT 
       MIN(o.id) as order_id,
       c.name,
       GROUP_CONCAT(DISTINCT p.category) as categories,
       COUNT(*) as total_orders
   FROM orders o
   JOIN customers c ON o.customer_id = c.id
   JOIN products p ON o.product_id = p.id
   GROUP BY c.name;

Best Practices

Think about what makes sense for your data
Use functions like SUM or AVG that give useful information
Explain your choices in comments

Troubleshooting Tips

Check your current MySQL settings:

   SELECT @@sql_mode;

Make sure your changes worked:

   SHOW VARIABLES LIKE 'sql_mode';

Check what you're allowed to do:

   SHOW GRANTS;

When to Keep ONLY_FULL_GROUP_BY On

It's tempting to turn off ONLY_FULL_GROUP_BY, but consider keeping it on if:

You're starting a new project
You need to follow SQL standards
You want to avoid small mistakes in your queries

Conclusion

The ONLY_FULL_GROUP_BY error can be annoying, but it helps us write better MySQL queries. Instead of just turning it off, try to understand why it exists and how to work with it. This will make you a better developer and help you write MySQL code that's easier to maintain.

Remember:

Think about what data you really need
Use the right functions like SUM or AVG
Group by all important columns
Consider keeping ONLY_FULL_GROUP_BY on for better code

Happy Coding!

Understanding React 19 New Hooks

Manoj Swami — Tue, 07 Jan 2025 12:22:30 +0000

React 19 introduces several powerful new hooks that revolutionize how we handle forms and manage optimistic updates in our applications. In this blog, we'll explore useFormStatus, useActionState, and useOptimistic - three hooks that make our React applications more responsive and user-friendly.

useFormStatus: Enhanced Form Handling

The useFormStatus hook provides real-time information about form submissions, making it easier to create responsive and accessible forms. Let's explore how this hook improves upon React 18's form handling capabilities.

Example 1: Basic Form Loading State

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button disabled={pending}>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  );
}

function SignupForm() {
  return (
    <form action={async (formData) => {
      await submitSignupData(formData);
    }}>
      <input name="email" type="email" />
      <input name="password" type="password" />
      <SubmitButton />
    </form>
  );
}

In React 18, you'd need to manually manage loading states using useState. The new useFormStatus hook automatically handles this, reducing boilerplate code.

Example 2: Multiple Form States

function FormStatus() {
  const { pending, data, method } = useFormStatus();

  return (
    <div role="status">
      {pending && <span>Submitting via {method}...</span>}
      {!pending && data && <span>Last submission: {new Date().toLocaleString()}</span>}
    </div>
  );
}

function ContactForm() {
  return (
    <form action={async (formData) => {
      await submitContactForm(formData);
    }}>
      <textarea name="message" />
      <FormStatus />
      <SubmitButton />
    </form>
  );
}

Example 3: Form Validation Status

function ValidationStatus() {
  const { pending, validationErrors } = useFormStatus();

  return (
    <div role="alert">
      {validationErrors?.map((error, index) => (
        <p key={index} className="error">{error}</p>
      ))}
    </div>
  );
}

function RegistrationForm() {
  return (
    <form action={async (formData) => {
      const errors = validateRegistration(formData);
      if (errors.length) throw errors;
      await register(formData);
    }}>
      <input name="username" />
      <input name="email" type="email" />
      <ValidationStatus />
      <SubmitButton />
    </form>
  );
}

Example 4: Multi-Step Form Progress

function FormProgress() {
  const { pending, step, totalSteps } = useFormStatus();

  return (
    <div className="progress-bar">
      <div 
        className="progress" 
        style={{width: `${(step / totalSteps) * 100}%`}}
      />
      <span>Step {step} of {totalSteps}</span>
    </div>
  );
}

function WizardForm() {
  return (
    <form action={async (formData) => {
      await submitWizardData(formData, { steps: 3 });
    }}>
      {/* Form steps */}
      <FormProgress />
      <SubmitButton />
    </form>
  );
}

Example 5: File Upload Progress

function UploadProgress() {
  const { pending, progress } = useFormStatus();

  return (
    <div>
      {pending && progress && (
        <div className="upload-progress">
          <div 
            className="progress-bar" 
            style={{width: `${progress}%`}}
          />
          <span>{progress}% uploaded</span>
        </div>
      )}
    </div>
  );
}

function FileUploadForm() {
  return (
    <form action={async (formData) => {
      await uploadFile(formData);
    }}>
      <input type="file" name="document" />
      <UploadProgress />
      <SubmitButton />
    </form>
  );
}

useActionState: Managing Action Results

The useActionState hook provides a way to track the state of form actions and server mutations, making it easier to handle success and error states.

Example 1: Basic Action State

function SubmissionStatus() {
  const state = useActionState();

  return (
    <div>
      {state.status === 'success' && <p>Submission successful!</p>}
      {state.status === 'error' && <p>Error: {state.error.message}</p>}
    </div>
  );
}

function CommentForm() {
  return (
    <form action={async (formData) => {
      await submitComment(formData);
    }}>
      <textarea name="comment" />
      <SubmissionStatus />
      <SubmitButton />
    </form>
  );
}

Example 2: Action History

function ActionHistory() {
  const state = useActionState();

  return (
    <div>
      <h3>Recent Actions</h3>
      <ul>
        {state.history.map((action, index) => (
          <li key={index}>
            {action.type} - {action.timestamp}
            {action.status === 'error' && ` (Failed: ${action.error.message})`}
          </li>
        ))}
      </ul>
    </div>
  );
}

Example 3: Retry Mechanism

function RetryableAction() {
  const state = useActionState();

  return (
    <div>
      {state.status === 'error' && (
        <button 
          onClick={() => state.retry()}
          disabled={state.retrying}
        >
          {state.retrying ? 'Retrying...' : 'Retry'}
        </button>
      )}
    </div>
  );
}

Example 4: Action Queue

function ActionQueue() {
  const state = useActionState();

  return (
    <div>
      <h3>Pending Actions</h3>
      {state.queue.map((action, index) => (
        <div key={index}>
          {action.type} - Queued at {action.queuedAt}
          <button onClick={() => action.cancel()}>Cancel</button>
        </div>
      ))}
    </div>
  );
}

Example 5: Action Statistics

function ActionStats() {
  const state = useActionState();

  return (
    <div>
      <h3>Action Statistics</h3>
      <p>Success Rate: {state.stats.successRate}%</p>
      <p>Average Duration: {state.stats.avgDuration}ms</p>
      <p>Total Actions: {state.stats.total}</p>
    </div>
  );
}

useOptimistic: Smooth UI Updates

The useOptimistic hook enables immediate UI updates while waiting for server responses, creating a more responsive user experience.

Example 1: Optimistic Todo List

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [...state, newTodo]
  );

  async function addTodo(formData) {
    const newTodo = {
      id: Date.now(),
      text: formData.get('todo'),
      completed: false
    };

    addOptimisticTodo(newTodo);
    await saveTodo(newTodo);
  }

  return (
    <div>
      <form action={addTodo}>
        <input name="todo" />
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {optimisticTodos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

Example 2: Optimistic Like Button

function LikeButton({ postId, initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    likes,
    (state) => state + 1
  );

  async function handleLike() {
    addOptimisticLike();
    await likePost(postId);
  }

  return (
    <button onClick={handleLike}>
      {optimisticLikes} Likes
    </button>
  );
}

Example 3: Optimistic Comment Thread

function CommentThread({ postId }) {
  const [comments, setComments] = useState([]);
  const [optimisticComments, addOptimisticComment] = useOptimistic(
    comments,
    (state, newComment) => [...state, newComment]
  );

  async function submitComment(formData) {
    const comment = {
      id: Date.now(),
      text: formData.get('comment'),
      pending: true
    };

    addOptimisticComment(comment);
    await saveComment(postId, comment);
  }

  return (
    <div>
      <form action={submitComment}>
        <textarea name="comment" />
        <button type="submit">Comment</button>
      </form>
      {optimisticComments.map(comment => (
        <div key={comment.id} style={{ opacity: comment.pending ? 0.5 : 1 }}>
          {comment.text}
        </div>
      ))}
    </div>
  );
}

Example 4: Optimistic Shopping Cart

function ShoppingCart() {
  const [cart, setCart] = useState([]);
  const [optimisticCart, updateOptimisticCart] = useOptimistic(
    cart,
    (state, update) => {
      const { type, item } = update;
      switch (type) {
        case 'add':
          return [...state, item];
        case 'remove':
          return state.filter(i => i.id !== item.id);
        case 'update':
          return state.map(i => i.id === item.id ? item : i);
        default:
          return state;
      }
    }
  );

  async function updateCart(type, item) {
    updateOptimisticCart({ type, item });
    await saveCart({ type, item });
  }

  return (
    <div>
      {optimisticCart.map(item => (
        <div key={item.id}>
          {item.name} - ${item.price}
          <button onClick={() => updateCart('remove', item)}>Remove</button>
        </div>
      ))}
    </div>
  );
}

Example 5: Optimistic User Settings

function UserSettings() {
  const [settings, setSettings] = useState({});
  const [optimisticSettings, updateOptimisticSetting] = useOptimistic(
    settings,
    (state, update) => ({
      ...state,
      [update.key]: update.value
    })
  );

  async function updateSetting(key, value) {
    updateOptimisticSetting({ key, value });
    await saveSettings({ [key]: value });
  }

  return (
    <div>
      <div>
        <label>
          Theme:
          <select 
            value={optimisticSettings.theme} 
            onChange={e => updateSetting('theme', e.target.value)}
          >
            <option value="light">Light</option>
            <option value="dark">Dark</option>
          </select>
        </label>
      </div>
      <div>
        <label>
          Notifications:
          <input 
            type="checkbox"
            checked={optimisticSettings.notifications}
            onChange={e => updateSetting('notifications', e.target.checked)}
          />
        </label>
      </div>
    </div>
  );
}

Remember to check the official React documentation for the most up-to-date information and best practices when using these hooks in your applications.

Happy Coding!