Frequently used lines of code or terminal commands with descriptions.

Code and Terminal Snippets

These snippets are incredibly common and are useful in everyday JavaScript programming. Some of these will become so familiar that you will not even think about them anymore, others it is just easy some time to cut and paste!

***

## <span id="variable-logging" name="Variable Logging"></span>

> Console Log with Variable Name

```javascript
const myVariable = 'Hello World';
console.log({ myVariable });
```

**Function:** Logs both the variable name and value, making debugging easier than `console.log(myVariable)`.

<div
  data-component="TestItOut"
  data-title="Variable Logging"
  data-description="Change myVariable or add other variables and see what happens!"
  data-snippet-id="js-common-0-0-1"
  data-code="const myVariable = 'Hello World';
  console.log({ myVariable });">
</div>

<br/>

## <span id="array-destructuring" name="Array Destructuring"></span>

> Array Destructuring

```javascript
const [first, second, ...rest] = ['a', 'b', 'c', 'd'];
```

**Function:** Extract values from arrays into distinct variables. The rest operator captures remaining elements.

<div 
  data-component="TestItOut" 
  data-title="Array Destructuring"
  data-description="Create an array then destructure it! Try changing the array values or destructuring pattern."
  data-snippet-id="js-common-0-0-2"
  data-code="const [first, second, ...rest] = ['a', 'b', 'c', 'd'];
  console.log('First:', first);
  console.log('Second:', second);
  console.log('Rest:', rest);
  &#47;&#47; Try with numbers
  const [x, y, ...others] = [1, 2, 3, 4, 5];
  console.log('X:', x, 'Y:', y, 'Others:', others);">
</div>

<br/>

## <span id="object-desctructuring" name="Object Destructuring"></span>

> Object Destructuring with Renaming

```javascript
const { name: userName, age: userAge } = user;
```

**Function:** Extract object properties and assign them to variables with different names.

<div 
  data-component="TestItOut"
  data-title="Object Destructuring"
  data-description="Create an object then destructure it!"
  data-snippet-id="js-common-0-0-3"
  data-code="const user = { name: 'John', age: 30, city: 'New York' };
  const { name: userName, age: userAge } = user;
  console.log('User Name:', userName);
  console.log('User Age:', userAge);
  &#47;&#47; Try with more properties
  const { city: userCity = 'Unknown' } = user;
  console.log('User City:', userCity);">
</div>

<br/>

## <span id="template-literals" name="Template Literals"></span>

> Template Literals

```javascript
const message = `Hello ${name}, you are ${age} years old`;
```

**Function:** String interpolation using backticks and `${}` syntax for embedding expressions.

<div
  data-component="TestItOut"
  data-title="Template Literals"
  data-description="Practice inserting variables into the message string! Try adding calculations or function calls inside the ${} syntax."
  data-snippet-id="js-common-0-0-4"
  data-code="const name = 'World';
  const age = 25;
  const message = `Hello ${name}, you are ${age} years old`;
  console.log(message);
  &#47;&#47; Try with expressions
  const price = 19.99;
  const tax = 0.08;
  const total = `Total: $${(price * (1 + tax)).toFixed(2)}`;
  console.log(total);">
</div>

<br/>

## <span id="arrow-function" name="Arrow Function"></span>

> Arrow Function

```javascript
const add = (a, b) => a + b;
const greet = name => `Hello ${name}`;
```

**Function:** Concise function syntax. Parentheses optional for single parameters, curly braces optional for single expressions.

<div
  data-component="TestItOut"
  data-title="Arrow Function"
  data-description="Experiment with different arrow function syntaxes! Try functions with no parameters, one parameter, or multiple parameters."
  data-snippet-id="js-common-0-0-5"
  data-code="const add = (a, b) => a + b;
  const greet = name => `Hello ${name}`;\n
  console.log('5 + 3 =', add(5, 3));
  console.log(greet('Developer'));
  &#47;&#47; Try different arrow function styles
  const multiply = (x, y) => x * y;
  const square = x => x * x;
  const sayHi = () => 'Hi there!';\n
  console.log('4 * 6 =', multiply(4, 6));
  console.log('Square of 7:', square(7));
  console.log(sayHi());">
</div>

<br/>

## <span id="array-map" name="Arary Map"></span>

> Array Map

```javascript
const doubled = numbers.map(n => n * 2);
```

**Function:** Transform each element in an array and return a new array with the results.

<div
  data-component="TestItOut"
  data-title="Array Map"
  data-description="Try different transformations like squaring numbers, converting strings, or creating objects from arrays!"
  data-snippet-id="js-common-0-0-6" 
  data-code="const numbers = [1, 2, 3, 4, 5];
  const doubled = numbers.map(n => n * 2);
  console.log('Original:', numbers);
  console.log('Doubled:', doubled);
  &#47;&#47; Try different transformations
  const names = ['alice', 'bob', 'charlie'];
  const capitalized = names.map(name => name.charAt(0).toUpperCase() + name.slice(1));
  console.log('Capitalized:', capitalized); const ages = [16, 21, 30, 45];
  const ageGroups = ages.map(age => age >= 18 ? 'Adult' : 'Minor');
  console.log('Age Groups:', ageGroups);">
</div>

<br/>

## <span id="array-filter" name="Array Filter"></span>

> Array Filter

```javascript
const adults = users.filter(user => user.age >= 18);
```

**Function:** Create a new array with elements that pass a test condition.

<div
  data-component="TestItOut"
  data-title="Array Filter"
  data-description="Try different filter conditions! Filter by age, name length, or any other property you can think of."
  data-snippet-id="js-common-0-0-7"
  data-code="const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 16 },
    { name: 'Charlie', age: 30 },
    { name: 'Diana', age: 17 }
  ];
  const adults = users.filter(user => user.age >= 18);
  console.log('All users:', users);
  console.log('Adults only:', adults);
  &#47;&#47; Try different filters
  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  const evenNumbers = numbers.filter(n => n % 2 === 0);
  const bigNumbers = numbers.filter(n => n > 5);
  console.log('Even numbers:', evenNumbers);
  console.log('Numbers > 5:', bigNumbers);">
</div>

<br/>

## <span id="find-array-elements" name="Find Array Elements"></span>

> Find Element in Array

```javascript
const user = users.find(user => user.id === targetId);
```

**Function:** Returns the first element that matches the condition, or undefined if none found.

<div
  data-component="TestItOut"
  data-title="Find Array Element"
  data-description="Try searching for different IDs, names, or create your own search criteria!"
  data-snippet-id="js-common-0-0-8"
  data-code="const users = [
    { id: 1, name: 'Alice', email: 'alice@example.com' },
    { id: 2, name: 'Bob', email: 'bob@example.com' },
    { id: 3, name: 'Charlie', email: 'charlie@example.com' }
  ];
  const targetId = 2;
  const user = users.find(user => user.id === targetId);
  console.log('Found user:', user);
  &#47;&#47; Try finding by different properties
  const userByName = users.find(user => user.name === 'Alice');
  console.log('Found by name:', userByName);\n
  const userByEmail = users.find(user => user.email.includes('charlie'));
  console.log('Found by email:', userByEmail);
  &#47;&#47; What happens if not found?
  const notFound = users.find(user => user.id === 999);
  console.log('Not found:', notFound);">
</div>

<br/>

## <span id="ternary-operator" name="Ternary Operator"></span>

> Ternary Operator

```javascript
const message = age >= 18 ? 'Adult' : 'Minor';
```

**Function:** A shorthand for simple if-else statements. Condition ? valueIfTrue : valueIfFalse.

<div
  data-component="TestItOut"
  data-title="Ternary Operator"
  data-description="Try different ages and conditions! Experiment with nested ternary operators but keep them readable."
  data-snippet-id="js-common-0-0-9"
  data-code="const age = 20;
  const message = age >= 18 ? 'Adult' : 'Minor';
  console.log(`Age ${age}: ${message}`);
  &#47;&#47; Try with different ages
  const checkAge = (userAge) => {
    const status = userAge >= 18 ? 'Can vote' : 'Cannot vote yet';
    return `${userAge} years old: ${status}`;
  };\n
  console.log(checkAge(16));
  console.log(checkAge(21));
  console.log(checkAge(65));
  &#47;&#47; Nested ternary (be careful!)
  const score = 85;
  const grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 70 ? 'C' : 'F';
  console.log(`Score ${score}: Grade ${grade}`);">
</div>

<br/>

## <span id="default-parameters" name="Default Parameters"></span>

> Default Parameters

```javascript
function greet(name = 'Guest', age = 0) {
  return `Hello ${name}, age ${age}`;
}
```

**Function:** Provide default values for function parameters when no argument is passed.

<div 
  data-component="TestItOut"
  data-title="Default Parameters"
  data-description="Try calling with different parameters!"
  data-snippet-id="js-common-0-0-10"
  data-code="function greet(name = 'Guest', age = 0) {
    return `Hello ${name}, age ${age}`;
  }
  console.log(greet());
  console.log(greet('Alice'));
  console.log(greet('Bob', 25));">
</div>


Javascript

Common Snippets

These snippets aren't as common but are still very useful in everyday JavaScript programming. These snippets are necessary to know but due to their less common nature a reference is nice!

<br/>

***

<br/>

> Nullish Coalescing Operator

```javascript
const username = user.name ?? 'Anonymous';
```

**Function:** Returns the right side if left side is null or undefined (but not for falsy values like 0 or '').

<div
  data-component="TestItOut"
  data-title="Nullish"
  data-description="Compare nullish coalescing (??) with logical OR (||) - see how they handle different falsy values!"
  data-snippet-id="js-uncommon-1-0-1"
  data-code="const user1 = { name: 'Alice' };
const user2 = { name: null };
const user3 = { name: '' };
const user4 = { name: 0 };
const user5 = {};\n
console.log('With ??:');
console.log('Alice:', user1.name ?? 'Anonymous');
console.log('null:', user2.name ?? 'Anonymous');
console.log('empty string:', user3.name ?? 'Anonymous');
console.log('zero:', user4.name ?? 'Anonymous');
console.log('undefined:', user5.name ?? 'Anonymous');\n
console.log('With ||:');
console.log('Alice:', user1.name || 'Anonymous');
console.log('null:', user2.name || 'Anonymous');
console.log('empty string:', user3.name || 'Anonymous');
console.log('zero:', user4.name || 'Anonymous');
console.log('undefined:', user5.name || 'Anonymous');">
</div>

<br/>

***

<br/>

> Optional Chaining

```javascript
const city = user?.address?.city;
```

**Function:** Safely access nested object properties without throwing errors if intermediate values are null/undefined.

<div
  data-component="TestItOut"
  data-title="Optional Chaining"
  data-description="Try accessing deeply nested properties safely! See what happens with and without optional chaining."
  data-snippet-id="js-uncommon-1-0-2"
  data-code="const users = [
  { 
    name: 'Alice', 
    address: { city: 'New York', country: 'USA' },
    contacts: { phone: '123-456-7890' }
  },
  { 
    name: 'Bob', 
    address: null 
  },
  { 
    name: 'Charlie'
  }
];\n
users.forEach(user => {
  console.log(`${user.name}:`);
  console.log('  City:', user?.address?.city ?? 'Not provided');
  console.log('  Phone:', user?.contacts?.phone ?? 'Not provided');
  console.log('  Zip:', user?.address?.zip ?? 'Not provided');
});
&#47;&#47; Try with arrays too
const data = { items: [{ value: 42 }, null, { value: 99 }] };
console.log('First item value:', data?.items?.[0]?.value);
console.log('Second item value:', data?.items?.[1]?.value);
console.log('Third item value:', data?.items?.[2]?.value);">
</div>

<br/>

***

<br/>

> Array.from() with Mapping

```javascript
const range = Array.from({length: 5}, (_, i) => i + 1); // [1,2,3,4,5]
```

**Function:** Create arrays from array-like objects or with a mapping function for generating sequences.

<div
  data-component="TestItOut"
  data-title="Array.from()"
  data-description="Generate different number sequences and patterns! Try creating ranges, squares, or even random values."
  data-snippet-id="js-uncommon-1-0-3"
  data-code="&#47;&#47; Basic range
const range = Array.from({length: 5}, (_, i) => i + 1);
console.log('Range 1-5:', range);
&#47;&#47; Even numbers
const evens = Array.from({length: 6}, (_, i) => (i + 1) * 2);
console.log('First 6 evens:', evens);
&#47;&#47; Squares
const squares = Array.from({length: 5}, (_, i) => (i + 1) ** 2);
console.log('First 5 squares:', squares);
&#47;&#47; Alphabet
const alphabet = Array.from({length: 26}, (_, i) => String.fromCharCode(65 + i));
console.log('Alphabet:', alphabet.join(''));
&#47;&#47; Random numbers
const random = Array.from({length: 5}, () => Math.floor(Math.random() * 100));
console.log('Random numbers:', random);
&#47;&#47; From string
const letters = Array.from('Hello');
console.log('Letters from Hello:', letters);">
</div>

<br/>

***

<br/>

> Object.entries() for Iteration

```javascript
Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});
```

**Function:** Convert object to array of \[key, value] pairs for easy iteration over object properties.

<div
  data-component="TestItOut"
  data-title="Iterating an Object"
  data-description="Practice iterating over objects in different ways! Try filtering, mapping, or transforming the entries."
  data-snippet-id="js-uncommon-1-0-4"
  data-code="const student = {
  name: 'Alex',
  age: 20,
  grade: 'A',
  subjects: ['Math', 'Physics', 'Chemistry'],
  isActive: true
};\n
console.log('All properties:');
Object.entries(student).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});\n
console.log('String properties only:');
Object.entries(student)
  .filter(([key, value]) => typeof value === 'string')
  .forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
  });
&#47;&#47; Convert back to object with transformed values
const uppercased = Object.fromEntries(
  Object.entries(student).map(([key, value]) => [
    key,
    typeof value === 'string' ? value.toUpperCase() : value
  ])
);
console.log('Uppercased strings:', uppercased);
&#47;&#47; Get just the keys and values
console.log('Keys:', Object.keys(student));
console.log('Values:', Object.values(student));">
</div>

<br/>

***

<br/>

> Rest in Object Destructuring

```javascript
const {name, age, ...otherProps} = user;
```

**Function:** Extract specific properties and collect remaining properties into a new object.

<div
  data-component="TestItOut"
  data-title="Object Destructuring"
  data-description="Practice separating object properties! Try extracting different combinations of properties."
  data-snippet-id="js-uncommon-1-0-5"
  data-code="const user = {
  id: 1,
  name: 'Sarah',
  age: 28,
  email: 'sarah@example.com',
  city: 'Boston',
  country: 'USA',
  preferences: {
    theme: 'dark',
    notifications: true
  }
};
&#47;&#47; Extract name and age, rest goes to otherProps
const {name, age, ...otherProps} = user;
console.log('Name:', name);
console.log('Age:', age);
console.log('Other props:', otherProps);
&#47;&#47; Extract contact info
const {email, city, country, ...nonContactInfo} = user;
console.log('Contact:', {email, city, country});
console.log('Non-contact info:', nonContactInfo);
&#47;&#47; Useful for function parameters
function updateUser({id, ...updates}) {
  console.log(`Updating user ${id} with:`, updates);
  return {...user, ...updates};
}\n
const updatedUser = updateUser({
  id: 1,
  age: 29,
  city: 'New York'
});
console.log('Updated user:', updatedUser);">
</div>

<br/>

***

<br/>

> Computed Property Names

```javascript
const propName = 'dynamicKey';
const obj = { [propName]: 'value' };
```

**Function:** Use variables as object property names by wrapping them in square brackets.

<div
  data-component="TestItOut"
  data-title="Computed Property Names"
  data-description="Create objects with dynamic property names! Try building objects based on user input or conditions."
  data-snippet-id="js-uncommon-1-0-6"
  data-code="&#47;&#47; Basic computed property
const propName = 'dynamicKey';
const obj = { [propName]: 'value' };
console.log('Basic:', obj);
&#47;&#47; Multiple computed properties
const prefix = 'user';
const user = {
  [`${prefix}Name`]: 'John',
  [`${prefix}Age`]: 30,
  [`${prefix}Email`]: 'john@example.com'
};
console.log('User object:', user);
&#47;&#47; Function calls as property names
const getPropertyName = (type) => `data_${type}_value`;
const data = {
  [getPropertyName('string')]: 'Hello',
  [getPropertyName('number')]: 42,
  [getPropertyName('boolean')]: true
};
console.log('Data object:', data);
&#47;&#47; Building objects from arrays
const fields = ['name', 'age', 'city'];
const values = ['Alice', 25, 'Paris'];
const person = {};
fields.forEach((field, index) => {
  person[field] = values[index];
});
console.log('Person from arrays:', person);
&#47;&#47; Using expressions
const timestamp = Date.now();
const logEntry = {
  [`log_${timestamp}`]: 'Application started',
  message: 'System initialized'
};
console.log('Log entry:', logEntry);">
</div>

<br/>

***

<br/>

> Array.reduce() for Object Creation

```javascript
const lookup = items.reduce((acc, item) => {
  acc[item.id] = item;
  return acc;
}, {});
```

**Function:** Transform an array into an object, useful for creating lookup tables or grouping.

<div
  data-component="TestItOut"
  data-title="Reduce to Object"
  data-description="Transform arrays into useful objects! Try creating lookup tables, counting occurrences, or grouping data."
  data-snippet-id="js-uncommon-1-0-7"
  data-code="const items = [
  {id: 1, name: 'Apple', category: 'fruit', price: 1.20},
  {id: 2, name: 'Banana', category: 'fruit', price: 0.80},
  {id: 3, name: 'Carrot', category: 'vegetable', price: 0.50},
  {id: 4, name: 'Broccoli', category: 'vegetable', price: 2.00}
];
&#47;&#47; Create lookup table by ID
const lookup = items.reduce((acc, item) => {
  acc[item.id] = item;
  return acc;
}, {});
console.log('Lookup by ID:', lookup);
&#47;&#47; Group by category
const byCategory = items.reduce((acc, item) => {
  acc[item.category] = acc[item.category] || [];
  acc[item.category].push(item);
  return acc;
}, {});
console.log('Grouped by category:', byCategory);
&#47;&#47; Count occurrences
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const counts = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
console.log('Fruit counts:', counts);
&#47;&#47; Calculate totals by category
const totals = items.reduce((acc, item) => {
  acc[item.category] = (acc[item.category] || 0) + item.price;
  return acc;
}, {});
console.log('Price totals by category:', totals);">
</div>

<br/>

***

<br/>

> Short-circuit Assignment

```javascript
user.preferences ||= { theme: 'light' };
user.count ??= 0;
```

**Function:** Assign values only if current value is falsy (||=) or nullish (??=).

<div
  data-component="TestItOut"
  data-title="Short-circuit Assignment"
  data-description="Practice efficient conditional assignment! See how ||= and ??= behave differently with various values."
  data-snippet-id="js-uncommon-1-0-8"
  data-code="let user = { name: 'John' };\n
console.log('Initial user:', user);
&#47;&#47; Set default preferences if not exists
user.preferences ||= { theme: 'light', lang: 'en' };
console.log('After setting preferences:', user);
&#47;&#47; Try setting again (won't override)
user.preferences ||= { theme: 'dark', lang: 'fr' };
console.log('After trying to set again:', user);
&#47;&#47; Nullish assignment
user.count ??= 0;
user.score ??= 100;
user.name ??= 'Anonymous';
console.log('After nullish assignments:', user);
&#47;&#47; Compare behaviors
let test = { a: '', b: 0, c: false, d: null, e: undefined };
console.log('Before assignments:', test);
&#47;&#47; Using ||=
test.a ||= 'default';
test.b ||= 999;
test.c ||= true;
&#47;&#47; Using ??=
test.d ??= 'default';
test.e ??= 'default';
console.log('After assignments:', test);">
</div>

<br/>

***

<br/>

> Function Composition

```javascript
const pipe = (...fns) => value => fns.reduce((acc, fn) => fn(acc), value);
const process = pipe(trim, toLowerCase, capitalize);
```

**Function:** Combine multiple functions into a single function that applies them in sequence.

<div
  data-component="TestItOut"
  data-title="Function Composition"
  data-description="Build function pipelines! Create chains of transformations that process data step by step."
  data-snippet-id="js-uncommon-1-0-9"
  data-code="&#47;&#47; Helper functions
const trim = str => str.trim();
const toLowerCase = str => str.toLowerCase();
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);
const removeSpaces = str => str.replace(/\s+/g, '');
const addPrefix = prefix => str => `${prefix}${str}`;
&#47;&#47; Function composition utility
const pipe = (...fns) => value => fns.reduce((acc, fn) => fn(acc), value);
&#47;&#47; Create processing pipelines
const cleanText = pipe(trim, toLowerCase, capitalize);
const createId = pipe(trim, toLowerCase, removeSpaces, addPrefix('id_'));
&#47;&#47; Test the pipelines
const messyText = '  hello WORLD  ';
console.log('Original:', `'${messyText}'`);
console.log('Cleaned:', cleanText(messyText));
console.log('As ID:', createId(messyText));
&#47;&#47; Number processing pipeline
const double = x => x * 2;
const addTen = x => x + 10;
const square = x => x * x;
const processNumber = pipe(double, addTen, square);
console.log('Process 5:', processNumber(5));
console.log('Process 3:', processNumber(3));
&#47;&#47; Array processing
const numbers = [1, 2, 3, 4, 5];
const processArray = pipe(
  arr => arr.map(double),
  arr => arr.filter(x => x > 4),
  arr => arr.reduce((sum, x) => sum + x, 0)
);
console.log('Array result:', processArray(numbers));">
</div>

<br/>

***

<br/>

> Debounce Function

```javascript
const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func(...args), delay);
  };
};
```

**Function:** Limit function execution frequency, useful for search inputs or resize events.

<div
  data-component="TestItOut"
  data-title="Debounce Function"
  data-description="See debouncing in action! Watch how rapid function calls get controlled and delayed."
  data-snippet-id="js-uncommon-1-0-10"
  data-code="&#47;&#47; Debounce utility
const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func(...args), delay);
  };
};
&#47;&#47; Functions to debounce
const search = (query) => console.log(`Searching for: ${query}`);
const saveData = (data) => console.log(`Saving: ${data}`);
const logMessage = (msg) => console.log(`Log: ${msg} at ${new Date().toLocaleTimeString()}`);
&#47;&#47; Create debounced versions
const debouncedSearch = debounce(search, 500);
const debouncedSave = debounce(saveData, 1000);
const debouncedLog = debounce(logMessage, 300);
console.log('Simulating rapid search typing:');
debouncedSearch('a');
debouncedSearch('ap');
debouncedSearch('app');
debouncedSearch('appl');
debouncedSearch('apple');\n
console.log('Multiple save attempts:');
debouncedSave('draft 1');
debouncedSave('draft 2');
debouncedSave('final version');\n
console.log('Rapid logging (only last will show):');
debouncedLog('First message');
debouncedLog('Second message');
debouncedLog('Third message');
&#47;&#47; Compare with immediate execution
console.log('Immediate (not debounced):');
logMessage('Immediate message');">
</div>

<br/>


Uncommon Snippets

These are my favorite JavaScript snippets. Some are common, others are obscure, or I just happen to use them a lot in my projects.

<br/>

***

<br/>

> Deep Clone Object

```javascript
const deepClone = obj => JSON.parse(JSON.stringify(obj));
// Or for better handling:
const deepClone = obj => structuredClone(obj);
```

**Function:** Create a complete copy of an object including nested objects. structuredClone() is newer and handles more data types.

<div
  data-component="TestItOut"
  data-title="Deep Clone"
  data-description="Compare different cloning methods! See how shallow vs deep cloning affects nested objects and arrays."
  data-snippet-id="js-favorites-2-0-1"
  data-code="const original = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    coordinates: { lat: 40.7128, lng: -74.0060 }
  },
  hobbies: ['reading', 'coding', 'hiking'],
  created: new Date('2023-01-01')
};\n
console.log('Original object:', original);
&#47;&#47; Shallow copy (only top level)
const shallow = {...original};
console.log('Shallow copy:', shallow);
&#47;&#47; Deep clone with JSON (loses some data types)
const deepJSON = JSON.parse(JSON.stringify(original));
console.log('Deep clone (JSON):', deepJSON);
console.log('Date became string:', typeof deepJSON.created);
&#47;&#47; Modify nested property in original
original.address.city = 'Boston';
original.hobbies.push('swimming');\n
console.log('After modifying original:');
console.log('Original city:', original.address.city);
console.log('Shallow copy city:', shallow.address.city);
console.log('Deep clone city:', deepJSON.address.city);\n
console.log('Original hobbies:', original.hobbies);
console.log('Shallow copy hobbies:', shallow.hobbies);
console.log('Deep clone hobbies:', deepJSON.hobbies);
&#47;&#47; Note: structuredClone() is newer and handles more types
&#47;&#47; const deepStructured = structuredClone(original);">
</div>

<br/>

***

<br/>

> Group Array by Property

```javascript
const groupBy = (array, key) => 
  array.reduce((groups, item) => {
    const group = item[key];
    groups[group] = groups[group] || [];
    groups[group].push(item);
    return groups;
  }, {});
```

**Function:** Group array elements by a specific property value. Super useful for organizing data.

<div
  data-component="TestItOut"
  data-title="Property Grouping"
  data-description="Group data in different ways! Try grouping by different properties or creating more complex grouping functions."
  data-snippet-id="js-favorites-2-0-2"
  data-code="const employees = [
  { name: 'Alice', department: 'Engineering', level: 'Senior', salary: 120000 },
  { name: 'Bob', department: 'Marketing', level: 'Junior', salary: 60000 },
  { name: 'Carol', department: 'Engineering', level: 'Junior', salary: 80000 },
  { name: 'David', department: 'Sales', level: 'Senior', salary: 90000 },
  { name: 'Eve', department: 'Marketing', level: 'Senior', salary: 100000 },
  { name: 'Frank', department: 'Engineering', level: 'Mid', salary: 95000 }
];
&#47;&#47; Group by utility function
const groupBy = (array, key) => 
  array.reduce((groups, item) => {
    const group = item[key];
    groups[group] = groups[group] || [];
    groups[group].push(item);
    return groups;
  }, {});
&#47;&#47; Group by department
const byDepartment = groupBy(employees, 'department');
console.log('By department:', byDepartment);
&#47;&#47; Group by level
const byLevel = groupBy(employees, 'level');
console.log('By level:', byLevel);
&#47;&#47; More complex grouping function
const groupByFunction = (array, fn) =>
  array.reduce((groups, item) => {
    const key = fn(item);
    groups[key] = groups[key] || [];
    groups[key].push(item);
    return groups;
  }, {});
&#47;&#47; Group by salary range
const bySalaryRange = groupByFunction(employees, emp => {
  if (emp.salary < 70000) return 'Low';
  if (emp.salary < 100000) return 'Medium';
  return 'High';
});
console.log('By salary range:', bySalaryRange);
&#47;&#47; Group by first letter of name
const byFirstLetter = groupByFunction(employees, emp => emp.name[0]);
console.log('By first letter:', byFirstLetter);">
</div>

<br/>

***

<br/>

> Retry Function with Exponential Backoff

```javascript
const retry = async (fn, retries = 3, delay = 1000) => {
  try {
    return await fn();
  } catch (error) {
    if (retries > 0) {
      await new Promise(resolve => setTimeout(resolve, delay));
      return retry(fn, retries - 1, delay * 2);
    }
    throw error;
  }
};
```

**Function:** Automatically retry failed async operations with increasing delays between attempts.

<div
  data-component="TestItOut"
  data-title="Retry with Backoff"
  data-description="Simulate network requests with failures! See how the retry mechanism would work (simulated synchronously)."
  data-snippet-id="js-favorites-2-0-3"
  data-code="&#47;&#47; Retry utility (simplified for demo)
const retry = (fn, retries = 3, delay = 1000) => {
  console.log(`Attempting operation with ${retries} retries allowed`);\n
  for (let attempt = 1; attempt <= retries + 1; attempt++) {
    try {
      console.log(`Attempt ${attempt}:`);
      const result = fn(attempt);
      console.log(`✅ Success on attempt ${attempt}:`, result);
      return result;
    } catch (error) {
      if (attempt <= retries) {
        console.log(`❌ Failed: ${error.message}`);
        console.log(`Waiting ${delay}ms before retry...`);
        delay *= 2; &#47;&#47; Exponential backoff
      } else {
        console.log(`❌ All retries exhausted: ${error.message}`);
        throw error;
      }
    }
  }
};
&#47;&#47; Simulate unreliable operation (fails first 2 times)
let attemptCount = 0;
const unreliableOperation = (currentAttempt) => {
  if (currentAttempt <= 2) {
    throw new Error(`Network timeout on attempt ${currentAttempt}`);
  }
  return { status: 'success', data: 'Important data retrieved!' };
};
&#47;&#47; Simulate reliable operation
const reliableOperation = (currentAttempt) => {
  return { status: 'success', data: 'Data retrieved immediately' };
};
&#47;&#47; Simulate broken operation
const brokenOperation = (currentAttempt) => {
  throw new Error('Service permanently unavailable');
};\n
console.log('=== Testing unreliable operation (should succeed on 3rd try) ===');
try {
  const result1 = retry(unreliableOperation, 3, 500);
  console.log('Final result:', result1);
} catch (error) {
  console.log('Operation failed completely:', error.message);
}\n
console.log('\\n=== Testing reliable operation (should succeed immediately) ===');
try {
  const result2 = retry(reliableOperation, 3, 500);
  console.log('Final result:', result2);
} catch (error) {
  console.log('Operation failed:', error.message);
}\n
console.log('\\n=== Testing broken operation (should fail after all retries) ===');
try {
  const result3 = retry(brokenOperation, 2, 250);
  console.log('Final result:', result3);
} catch (error) {
  console.log('Operation failed completely:', error.message);
}">
</div>

<br/>

***

<br/>

> Memoization for Expensive Functions

```javascript
const memoize = fn => {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
};
```

**Function:** Cache function results to avoid expensive recalculations with the same inputs.

<div
  data-component="TestItOut"
  data-title="Memoization"
  data-description="See memoization speed up repeated calculations! Compare performance with and without caching."
  data-snippet-id="js-favorites-2-0-4"
  data-code="&#47;&#47; Memoization utility
const memoize = fn => {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      console.log(`Cache hit for ${key}`);
      return cache.get(key);
    }
    console.log(`Computing ${key}`);
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
};
&#47;&#47; Expensive fibonacci function
const fibonacci = (n) => {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
};
&#47;&#47; Create memoized version
const memoizedFib = memoize(fibonacci);\n
console.log('Testing memoized fibonacci:');
console.log('fib(10):', memoizedFib(10));
console.log('fib(10) again:', memoizedFib(10)); // Cache hit!
console.log('fib(12):', memoizedFib(12));
console.log('fib(10) again:', memoizedFib(10)); // Cache hit!
&#47;&#47; Expensive calculation function
const expensiveCalculation = (x, y) => {
  console.log(`Performing calculation for ${x}, ${y}`);
  &#47;&#47; Simulate expensive operation
  let result = 0;
  for (let i = 0; i < 1000; i++) {
    result += Math.sqrt(x * y + i);
  }
  return result;
};\n
const memoizedCalc = memoize(expensiveCalculation);\n
console.log('Testing expensive calculation:');
console.log('calc(5, 10):', memoizedCalc(5, 10));
console.log('calc(5, 10) again:', memoizedCalc(5, 10)); // Cache hit!
console.log('calc(3, 7):', memoizedCalc(3, 7));
console.log('calc(5, 10) again:', memoizedCalc(5, 10)); // Cache hit!">
</div>

<br/>

***

<br/>

> Promise.allSettled() for Error Handling

```javascript
const results = await Promise.allSettled([
  fetch('/api/users'),
  fetch('/api/posts'),
  fetch('/api/comments')
]);

const successful = results
  .filter(result => result.status === 'fulfilled')
  .map(result => result.value);
```

**Function:** Run multiple promises and get all results, even if some fail. Better than Promise.all() for fault tolerance.

<div
  data-component="TestItOut"
  data-title="Promise.allSettled()"
  data-description="Handle multiple operations gracefully! See how Promise.allSettled pattern works (simulated synchronously)."
  data-snippet-id="js-favorites-2-0-5"
  data-code="&#47;&#47; Simulate API operations (synchronous for demo)
const operations = {
  fetchUsers: () => ({ status: 'success', data: ['Alice', 'Bob', 'Carol'] }),
  fetchPosts: () => { throw new Error('Posts service unavailable'); },
  fetchComments: () => ({ status: 'success', data: ['Great post!', 'Thanks for sharing'] }),
  fetchProfile: () => ({ status: 'success', data: { name: 'John', avatar: 'avatar.jpg' } })
};
&#47;&#47; Simulate Promise.allSettled behavior
const simulateAllSettled = (operationList) => {
  console.log('Starting multiple operations...');
  const results = [];\n  
  operationList.forEach((operation, index) => {
    const operationNames = ['users', 'posts', 'comments', 'profile'];
    const name = operationNames[index] || `operation${index}`;\n    
    try {
      console.log(`Executing ${name} operation...`);
      const result = operation();
      results.push({ 
        status: 'fulfilled', 
        value: result 
      });
      console.log(`✅ ${name}: Success`);
    } catch (error) {
      results.push({ 
        status: 'rejected', 
        reason: error 
      });
      console.log(`❌ ${name}: ${error.message}`);
    }
  });\n  
  return results;
};
&#47;&#47; Simulate Promise.all behavior (fails on first error)
const simulateAll = (operationList) => {
  console.log('Starting Promise.all simulation...');
  const results = [];\n
  for (let i = 0; i < operationList.length; i++) {
    const operationNames = ['users', 'posts', 'comments'];
    const name = operationNames[i] || `operation${i}`;\n    
    try {
      console.log(`Executing ${name} operation...`);
      const result = operationList[i]();
      results.push(result);
      console.log(`✅ ${name}: Success`);
    } catch (error) {
      console.log(`❌ ${name}: ${error.message}`);
      console.log('Promise.all failed - stopping all operations');
      throw error;
    }
  }\n  
  return results;
};
console.log('=== Testing allSettled pattern (handles failures gracefully) ===');
const allSettledResults = simulateAllSettled([
  operations.fetchUsers,
  operations.fetchPosts,
  operations.fetchComments,
  operations.fetchProfile
]);
console.log('\\nAll operations completed. Results:');
allSettledResults.forEach((result, index) => {
  const endpoints = ['users', 'posts', 'comments', 'profile'];\n
  if (result.status === 'fulfilled') {
    console.log(`✅ ${endpoints[index]}:`, result.value);
  } else {
    console.log(`❌ ${endpoints[index]} failed:`, result.reason.message);
  }
});
&#47;&#47; Filter successful results
const successful = allSettledResults
  .filter(result => result.status === 'fulfilled')
  .map(result => result.value);\n
console.log('\\nSuccessful responses:', successful);\n
const failed = allSettledResults.filter(result => result.status === 'rejected');
console.log(`${successful.length} succeeded, ${failed.length} failed`);\n
console.log('\\n=== Testing Promise.all pattern (fails completely on any error) ===');
try {
  const allResults = simulateAll([
    operations.fetchUsers,
    operations.fetchPosts,
    operations.fetchComments
  ]);
  console.log('All operations succeeded:', allResults);
} catch (error) {
  console.log('Promise.all failed completely:', error.message);
}">
</div>

<br/>

***

<br/>

> Custom Hook Pattern (React-like)

```javascript
const useLocalStorage = (key, defaultValue) => {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : defaultValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
};
```

**Function:** Reusable state management pattern that syncs with localStorage. Great for persisting user preferences.

<div
  data-component="TestItOut"
  data-title="Custom Hook"
  data-description="Simulate a custom hook pattern! This shows how you might structure reusable stateful logic (without actual React)."
  data-snippet-id="js-favorites-2-0-6"
  data-code="&#47;&#47; Simulate localStorage (since we can't use real localStorage in artifacts)
const mockStorage = {};
const mockLocalStorage = {
  getItem: (key) => mockStorage[key] || null,
  setItem: (key, value) => {
    mockStorage[key] = value;
    console.log(`📱 Stored ${key}:`, value);
  },
  removeItem: (key) => {
    delete mockStorage[key];
    console.log(`🗑️ Removed ${key}`);
  }
};
&#47;&#47; Custom hook pattern (simplified without React)
const useLocalStorage = (key, defaultValue) => {
  &#47;&#47; Initialize value
  let storedValue;
  try {
    const item = mockLocalStorage.getItem(key);
    storedValue = item ? JSON.parse(item) : defaultValue;
  } catch (error) {
    storedValue = defaultValue;
  }\n
  const setValue = (value) => {
    try {
      &#47;&#47; Allow value to be a function so we have the same API as useState
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      storedValue = valueToStore;
      mockLocalStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error('Error saving to localStorage:', error);
    }
  };\n  
  return [storedValue, setValue];
};
&#47;&#47; Usage examples
console.log('Creating user preferences hook:');
const [theme, setTheme] = useLocalStorage('theme', 'light');
console.log('Current theme:', theme);\n
console.log('Changing theme to dark:');
setTheme('dark');\n
console.log('Creating counter hook:');
const [count, setCount] = useLocalStorage('count', 0);
console.log('Current count:', count);\n
console.log('Incrementing counter:');
setCount(count + 1);
setCount(count + 2);\n
console.log('Creating settings hook:');
const [settings, setSettings] = useLocalStorage('settings', { notifications: true, autoSave: false });
console.log('Current settings:', settings);\n
console.log('Updating settings:');
setSettings({ ...settings, autoSave: true, language: 'en' });\n
console.log('Mock storage contents:');
console.log(mockStorage);">
</div>

<br/>

***

<br/>

> Intersection Observer for Lazy Loading

```javascript
const observeElement = (element, callback) => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        callback(entry.target);
        observer.unobserve(entry.target);
      }
    });
  });
  
  observer.observe(element);
  return () => observer.unobserve(element);
};
```

**Function:** Efficiently detect when elements enter the viewport for lazy loading images or infinite scroll.

<div
  data-component="TestItOut"
  data-title="Intersection Observer"
  data-description="Simulate intersection observer patterns! This shows how you might implement lazy loading and viewport detection."
  data-snippet-id="js-favorites-2-0-7"
  data-code="&#47;&#47; Mock Intersection Observer (simplified simulation)
class MockIntersectionObserver {
  constructor(callback, options = {}) {
    this.callback = callback;
    this.options = options;
    this.observedElements = new Set();
  }\n
  observe(element) {
    this.observedElements.add(element);
    console.log(`👁️ Started observing:`, element);
    &#47;&#47; Simulate element becoming visible after random delay
    setTimeout(() => {
      if (this.observedElements.has(element)) {
        console.log(`✨ Element entered viewport:`, element);
        this.callback([{
          target: element,
          isIntersecting: true,
          intersectionRatio: 0.5
        }]);
      }
    }, Math.random() * 2000 + 500);
  }\n
  unobserve(element) {
    this.observedElements.delete(element);
    console.log(`👁️ Stopped observing:`, element);
  }\n
  disconnect() {
    this.observedElements.clear();
    console.log(`👁️ Observer disconnected`);
  }
}
&#47;&#47; Use mock instead of real IntersectionObserver
const IntersectionObserver = MockIntersectionObserver;
&#47;&#47; Lazy loading utility
const observeElement = (element, callback) => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        callback(entry.target);
        observer.unobserve(entry.target);
      }
    });
  });\n  
  observer.observe(element);
  return () => observer.unobserve(element);
};
&#47;&#47; Mock DOM elements
const elements = [
  { id: 'image1', src: 'placeholder.jpg', dataSrc: 'photo1.jpg' },
  { id: 'image2', src: 'placeholder.jpg', dataSrc: 'photo2.jpg' },
  { id: 'image3', src: 'placeholder.jpg', dataSrc: 'photo3.jpg' },
  { id: 'section1', text: 'Hidden content 1' },
  { id: 'section2', text: 'Hidden content 2' }
];\n
console.log('Setting up lazy loading observers:');
&#47;&#47; Lazy load images
elements.filter(el => el.src).forEach(element => {
  observeElement(element, (target) => {
    console.log(`🖼️ Loading image: ${target.id}`);
    target.src = target.dataSrc;
    console.log(`✅ Image loaded: ${target.dataSrc}`);
  });
});
&#47;&#47; Lazy load content sections
elements.filter(el => el.text).forEach(element => {
  observeElement(element, (target) => {
    console.log(`📝 Loading content: ${target.id}`);
    console.log(`✅ Content revealed: ${target.text}`);
  });
});\n
console.log('Waiting for elements to enter viewport...');">
</div>

<br/>


Personal Favorites

<br/>

These snippets are incredibly common and are useful in everyday CSS programming. Some of these will become so familiar that you will not even think about them anymore, others it is just easy some time to cut and paste!

<br/>

***

<br/>

> Flexbox Center

```css
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

**Function:** Centers content both horizontally and vertically using flexbox. Works for any content size.

<br/>

***

<br/>

> CSS Grid Center

```css
.grid-center {
  display: grid;
  place-items: center;
}
```

**Function:** Alternative centering method using CSS Grid. `place-items` is shorthand for both axes.

<br/>

***

<br/>

> Responsive Container

```css
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
```

**Function:** Creates a responsive container that centers itself and has max width with padding on smaller screens.

<br/>

***

<br/>

> Hide Element Visually but Keep for Screen Readers

```css
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
```

**Function:** Hides content visually while keeping it accessible to screen readers for better accessibility.

<br/>

***

<br/>

> Smooth Scrolling

```css
html {
  scroll-behavior: smooth;
}
```

**Function:** Enables smooth scrolling for anchor links and programmatic scrolling.

<br/>

***

<br/>

> Button Reset

```css
button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
```

**Function:** Removes default button styling to create a clean base for custom button designs.

<br/>

***

<br/>

> Aspect Ratio Box

```css
.aspect-ratio {
  aspect-ratio: 16 / 9;
  width: 100%;
}
```

**Function:** Maintains a specific aspect ratio regardless of content. Modern alternative to padding-top hack.

<br/>

***

<br/>

> Truncate Text with Ellipsis

```css
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
```

**Function:** Cuts off text that doesn't fit and adds "..." to indicate there's more content.

<br/>

***

<br/>

> Focus Visible Only

```css
button:focus {
  outline: none;
}

button:focus-visible {
  outline: 2px solid blue;
}
```

**Function:** Removes outline for mouse users but keeps it for keyboard navigation, improving both UX and accessibility.

<br/>

***

<br/>

> Disable Text Selection

```css
.no-select {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
```

**Function:** Prevents users from selecting text, useful for UI elements like buttons or interactive components.

<br/>


These snippets aren't as common but are still very useful in everyday CSS programming. These snippets are necessary to know but due to their less common nature a reference is nice!

<br/>

***

<br/>

> Clamp for Responsive Typography

```css
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
}
```

**Function:** Creates fluid typography that scales between minimum and maximum values based on viewport width.

<br/>

***

<br/>

> CSS Custom Properties with Fallbacks

```css
.theme-aware {
  color: var(--text-color, #333);
  background: var(--bg-color, white);
}
```

**Function:** Use CSS variables with fallback values for better browser compatibility and default styling.

<br/>

***

<br/>

> Container Queries

```css
.card-container {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}
```

**Function:** Apply styles based on container size rather than viewport size, enabling truly modular responsive components.

<br/>

***

<br/>

> Scroll Snap

```css
.scroll-container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
}

.scroll-item {
  scroll-snap-align: start;
}
```

**Function:** Creates smooth, snapping scroll behavior for carousels, galleries, or paginated content.

<br/>

***

<br/>

> CSS Subgrid

```css
.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.child-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}
```

**Function:** Allows nested grids to inherit the parent grid's track sizing for perfect alignment.

<br/>

***

<br/>

> Logical Properties

```css
.logical-spacing {
  margin-inline: 1rem;
  padding-block: 2rem;
  border-inline-start: 2px solid blue;
}
```

**Function:** Writing-mode independent spacing that adapts to different text directions (LTR/RTL) automatically.

<br/>

***

<br/>

> CSS Shapes

```css
.circle-text {
  shape-outside: circle(50%);
  float: left;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
```

**Function:** Allows text to flow around custom shapes, creating more interesting layouts than rectangular wrapping.

<br/>

***

<br/>

> Backdrop Filter

```css
.glass-effect {
  backdrop-filter: blur(10px) saturate(150%);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
```

**Function:** Creates glass morphism effects by blurring and filtering content behind an element.

<br/>

***

<br/>

> CSS Mask

```css
.masked-image {
  mask: linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask: linear-gradient(to bottom, black 0%, transparent 100%);
}
```

**Function:** Applies complex transparency effects using gradients or images as masks.

<br/>

***

<br/>

> View Transitions API

```css
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}

.fade-transition {
  view-transition-name: fade;
}
```

**Function:** Creates smooth page transitions without JavaScript using the new View Transitions API.

<br/>
```


These are my favorite CSS snippets. Some are common, others are obscure, or I just happen to use them a lot in my projects.

<br/>

***

<br/>

> Perfect Scrollbar Styling

```css
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555;
}
```

**Function:** Creates beautiful custom scrollbars that work across browsers. Much better than default ugly scrollbars.

<br/>

***

<br/>

> Dark Mode Toggle

```css
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --accent-color: #007bff;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --accent-color: #4dabf7;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}
```

**Function:** Elegant dark mode implementation using CSS custom properties and data attributes.

<br/>

***

<br/>

> Glassmorphism Card

```css
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
```

**Function:** Modern glassmorphism effect that looks amazing on any background. Perfect for cards and modals.

<br/>

***

<br/>

> Animated Loading Skeleton

```css
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 2s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 1em;
  border-radius: 4px;
  margin-bottom: 0.5em;
}
```

**Function:** Creates smooth loading skeletons that give users immediate feedback while content loads.

<br/>

***

<br/>

> Perfect Button Hover Effects

```css
.fancy-button {
  position: relative;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
  color: white;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.fancy-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.fancy-button:hover::before {
  left: 100%;
}

.fancy-button:hover {
  transform: translateY(-2px);
}
```

**Function:** Beautiful button with shine effect and lift animation. Feels premium and responsive.

<br/>

***

<br/>

> Responsive Grid Layout

```css
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.auto-grid > * {
  min-height: 200px;
}
```

**Function:** Self-adjusting grid that automatically fits columns based on available space. No media queries needed!

<br/>

***

<br/>

> Text Gradient Effect

```css
.gradient-text {
  background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: gradient-shift 3s ease-in-out infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
```

**Function:** Animated gradient text effect that creates eye-catching headings and call-to-action text.

<br/>

***

<br/>

> CSS Container with Perfect Ratios

```css
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.card {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
```

**Function:** Creates a responsive card grid with perfect aspect ratios and smooth hover animations.

<br/>


These snippets are incredibly common and are very useful in everyday PostgreSQL usage. Some of these will become so familiar that you will not even think about them anymore, others it is just easy some time to cut and paste!

<br/>

***

<br/>

> Basic SELECT with WHERE

```sql
SELECT id, name, email 
FROM users 
WHERE active = true 
  AND created_at > '2023-01-01'
ORDER BY created_at DESC
LIMIT 50;
```

**Function:** Basic query pattern with filtering, ordering, and limiting results. Most common SQL operation.

<br/>

***

<br/>

> JOIN Tables

```sql
SELECT u.name, p.title, p.created_at
FROM users u
INNER JOIN posts p ON u.id = p.user_id
WHERE u.active = true;
```

**Function:** Combine data from multiple tables using relationships. INNER JOIN only returns matching records.

<br/>

***

<br/>

> LEFT JOIN for Optional Relationships

```sql
SELECT u.name, COUNT(p.id) as post_count
FROM users u
LEFT JOIN posts p ON u.id = p.user_id
GROUP BY u.id, u.name;
```

**Function:** Include all users even if they have no posts. LEFT JOIN preserves all records from the left table.

<br/>

***

<br/>

> INSERT with RETURNING

```sql
INSERT INTO users (name, email, created_at)
VALUES ('John Doe', 'john@example.com', NOW())
RETURNING id, created_at;
```

**Function:** Insert data and immediately return specified columns, useful for getting auto-generated IDs.

<br/>

***

<br/>

> UPDATE with Conditions

```sql
UPDATE users 
SET last_login = NOW(), 
    login_count = login_count + 1
WHERE email = 'user@example.com';
```

**Function:** Modify existing records with conditions. Can update multiple columns and use expressions.

<br/>

***

<br/>

> UPSERT (INSERT ON CONFLICT)

```sql
INSERT INTO user_preferences (user_id, theme, language)
VALUES (1, 'dark', 'en')
ON CONFLICT (user_id) 
DO UPDATE SET 
  theme = EXCLUDED.theme,
  language = EXCLUDED.language;
```

**Function:** Insert if record doesn't exist, update if it does. Prevents duplicate key errors.

<br/>

***

<br/>

> Basic Aggregation

```sql
SELECT 
  COUNT(*) as total_users,
  COUNT(CASE WHEN active THEN 1 END) as active_users,
  AVG(age) as average_age
FROM users;
```

**Function:** Get summary statistics using COUNT, SUM, AVG, MIN, MAX with optional conditional counting.

<br/>

***

<br/>

> Date/Time Filtering

```sql
SELECT *
FROM orders
WHERE created_at >= CURRENT_DATE - INTERVAL '7 days'
  AND created_at < CURRENT_DATE;
```

**Function:** Filter records by date ranges using PostgreSQL's date/time functions and intervals.

<br/>

***

<br/>

> CASE Statement

```sql
SELECT 
  name,
  age,
  CASE 
    WHEN age < 18 THEN 'Minor'
    WHEN age < 65 THEN 'Adult'
    ELSE 'Senior'
  END as age_group
FROM users;
```

**Function:** Conditional logic in SELECT statements, like if-else for SQL queries.

<br/>

***

<br/>

> Common Table Expression (CTE)

```sql
WITH recent_orders AS (
  SELECT user_id, COUNT(*) as order_count
  FROM orders
  WHERE created_at > CURRENT_DATE - INTERVAL '30 days'
  GROUP BY user_id
)
SELECT u.name, ro.order_count
FROM users u
JOIN recent_orders ro ON u.id = ro.user_id;
```

**Function:** Create temporary named result set for complex queries. Makes queries more readable and reusable.

<br/>


PostgreSQL

These snippets aren't as common but are still very useful in everyday PostgreSQL usage. These snippets are necessary to know but due to their less common nature a reference is nice!

<br/>

***

<br/>

> Window Functions for Rankings

```sql
SELECT 
  name,
  salary,
  department,
  RANK() OVER (PARTITION BY department ORDER BY salary DESC) as dept_rank,
  ROW_NUMBER() OVER (ORDER BY salary DESC) as overall_rank,
  LAG(salary) OVER (PARTITION BY department ORDER BY salary DESC) as prev_salary
FROM employees;
```

**Function:** Rank records within groups or overall. Window functions don't require GROUP BY and keep all rows.

<br/>

***

<br/>

> Recursive CTE for Hierarchical Data

```sql
WITH RECURSIVE org_chart AS (
  -- Base case: top-level managers
  SELECT id, name, manager_id, 1 as level, name as path
  FROM employees 
  WHERE manager_id IS NULL
  
  UNION ALL
  
  -- Recursive case: find direct reports
  SELECT e.id, e.name, e.manager_id, oc.level + 1, oc.path || ' -> ' || e.name
  FROM employees e
  INNER JOIN org_chart oc ON e.manager_id = oc.id
)
SELECT * FROM org_chart ORDER BY level, name;
```

**Function:** Traverse hierarchical data like organization charts, category trees, or threaded comments.

<br/>

***

<br/>

> JSON Operations

```sql
-- Query JSON data
SELECT 
  data->>'name' as name, 
  (data->>'age')::int as age,
  data->'preferences'->>'theme' as theme
FROM users 
WHERE data->>'status' = 'active';

-- Update JSON fields
UPDATE users 
SET data = jsonb_set(data, '{preferences,theme}', '"dark"')
WHERE id = 1;

-- Add to JSON array
UPDATE users 
SET data = jsonb_set(data, '{tags}', (data->'tags') || '["new_tag"]'::jsonb)
WHERE id = 1;
```

**Function:** Work with JSON columns efficiently. PostgreSQL has excellent JSON support for semi-structured data.

<br/>

***

<br/>

> Advanced Aggregations

```sql
SELECT 
  department,
  COUNT(*) as total_employees,
  string_agg(name, ', ' ORDER BY name) as employee_list,
  array_agg(salary ORDER BY salary DESC) as salary_array,
  percentile_cont(0.5) WITHIN GROUP (ORDER BY salary) as median_salary,
  mode() WITHIN GROUP (ORDER BY department) as most_common_dept
FROM employees
GROUP BY department;
```

**Function:** Use advanced aggregate functions for arrays, string concatenation, and statistical calculations.

<br/>

***

<br/>

> Full-Text Search

```sql
-- Create search index
ALTER TABLE articles ADD COLUMN search_vector tsvector;
UPDATE articles SET search_vector = to_tsvector('english', title || ' ' || content);
CREATE INDEX idx_search ON articles USING GIN(search_vector);

-- Search query with ranking
SELECT 
  title, 
  ts_rank(search_vector, query) as rank,
  ts_headline('english', content, query) as snippet
FROM articles, to_tsquery('english', 'postgres & database') as query
WHERE search_vector @@ query
ORDER BY rank DESC;
```

**Function:** Implement sophisticated full-text search with ranking, stemming, and highlighted snippets.

<br/>

***

<br/>

> LATERAL Joins for Correlated Subqueries

```sql
SELECT u.name, recent_posts.title, recent_posts.created_at
FROM users u
CROSS JOIN LATERAL (
  SELECT title, created_at
  FROM posts p
  WHERE p.user_id = u.id
  ORDER BY created_at DESC
  LIMIT 3
) recent_posts
WHERE u.active = true;
```

**Function:** Get related records for each row efficiently. LATERAL allows subqueries to reference outer query columns.

<br/>

***

<br/>

> Generate Series for Missing Data

```sql
-- Fill in missing dates with zero values
SELECT 
  date_series::date as date, 
  COALESCE(daily_sales, 0) as sales
FROM generate_series('2023-01-01'::date, '2023-01-31'::date, '1 day') as date_series
LEFT JOIN (
  SELECT sale_date, SUM(amount) as daily_sales
  FROM sales
  WHERE sale_date BETWEEN '2023-01-01' AND '2023-01-31'
  GROUP BY sale_date
) s ON date_series::date = s.sale_date
ORDER BY date_series;
```

**Function:** Generate sequences of dates, numbers, or timestamps to fill gaps in data analysis.

<br/>

***

<br/>

> Table Partitioning for Performance

```sql
-- Create partitioned table
CREATE TABLE sales_partitioned (
  id SERIAL,
  sale_date DATE NOT NULL,
  amount DECIMAL(10,2),
  customer_id INTEGER
) PARTITION BY RANGE (sale_date);

-- Create partitions
CREATE TABLE sales_2023_q1 PARTITION OF sales_partitioned
FOR VALUES FROM ('2023-01-01') TO ('2023-04-01');

CREATE TABLE sales_2023_q2 PARTITION OF sales_partitioned
FOR VALUES FROM ('2023-04-01') TO ('2023-07-01');

-- Automatic partition pruning in queries
SELECT * FROM sales_partitioned 
WHERE sale_date BETWEEN '2023-01-15' AND '2023-02-15';
```

**Function:** Improve performance on large tables by splitting them into smaller, manageable partitions.

<br/>

***

<br/>

> Advisory Locks for Application Logic

```sql
-- Try to acquire lock (non-blocking)
SELECT pg_try_advisory_lock(12345) as lock_acquired;

-- Acquire lock (blocking)
SELECT pg_advisory_lock(12345);

-- Check current locks
SELECT locktype, objid, mode, granted 
FROM pg_locks 
WHERE locktype = 'advisory';

-- Release lock
SELECT pg_advisory_unlock(12345);
```

**Function:** Implement application-level locking to prevent concurrent execution of critical sections.

<br/>

***

<br/>

> Custom Aggregate Functions

```sql
-- Create a custom aggregate for concatenating with separator
CREATE OR REPLACE FUNCTION concat_ws_agg_sfunc(text, text, text)
RETURNS text AS $$
BEGIN
  IF $1 IS NULL THEN
    RETURN $3;
  ELSE
    RETURN $1 || $2 || $3;
  END IF;
END;
$$ LANGUAGE plpgsql;

CREATE AGGREGATE concat_ws_agg(text, text) (
  sfunc = concat_ws_agg_sfunc,
  stype = text
);

-- Usage
SELECT department, concat_ws_agg(', ', name) as employee_names
FROM employees
GROUP BY department;
```

**Function:** Create custom aggregate functions for specialized data processing needs.

<br/>


These are my favorite PostgreSQL snippets. Some are common, others are obscure, or I just happen to use them a lot in my projects.

<br/>

***

<br/>

> Smart Pagination with Cursor-Based Approach

```sql
-- Instead of OFFSET (slow for large offsets)
-- Use cursor-based pagination for better performance
SELECT id, name, created_at
FROM posts 
WHERE created_at < '2023-09-01 12:00:00'::timestamp
ORDER BY created_at DESC 
LIMIT 20;

-- For next page, use the last created_at from previous results
SELECT id, name, created_at
FROM posts 
WHERE created_at < '2023-08-31 10:30:00'::timestamp
ORDER BY created_at DESC 
LIMIT 20;
```

**Function:** Efficient pagination that performs well even with millions of records. Much faster than OFFSET for large datasets.

<br/>

***

<br/>

> Database Health Check Queries

```sql
-- Check table sizes and bloat
SELECT 
  schemaname,
  tablename,
  pg_size_pretty(pg_total_relation_size(schemaname||'.'||tablename)) as total_size,
  pg_size_pretty(pg_relation_size(schemaname||'.'||tablename)) as table_size,
  pg_size_pretty(pg_total_relation_size(schemaname||'.'||tablename) - pg_relation_size(schemaname||'.'||tablename)) as index_size
FROM pg_tables
WHERE schemaname = 'public'
ORDER BY pg_total_relation_size(schemaname||'.'||tablename) DESC;

-- Check slow queries (requires pg_stat_statements)
SELECT 
  query,
  calls,
  total_time,
  mean_time,
  (total_time/calls)::numeric(10,2) as avg_time_ms
FROM pg_stat_statements
ORDER BY mean_time DESC
LIMIT 10;

-- Check index usage efficiency
SELECT 
  schemaname,
  tablename,
  indexname,
  idx_tup_read,
  idx_tup_fetch,
  CASE WHEN idx_tup_read > 0 
    THEN (idx_tup_fetch::float / idx_tup_read * 100)::numeric(5,2) 
    ELSE 0 
  END as efficiency_percent
FROM pg_stat_user_indexes
ORDER BY efficiency_percent DESC;
```

**Function:** Essential queries for monitoring database performance, identifying bottlenecks, and optimizing queries.

<br/>

***

<br/>

> Safe Schema Migrations for Production

```sql
-- Add column with default safely (large tables)
BEGIN;
-- Step 1: Add column without default
ALTER TABLE users ADD COLUMN status VARCHAR(20);

-- Step 2: Update in batches to avoid long locks
DO $$
DECLARE
  batch_size INT := 1000;
  rows_updated INT;
BEGIN
  LOOP
    UPDATE users SET status = 'active' 
    WHERE status IS NULL AND id IN (
      SELECT id FROM users WHERE status IS NULL LIMIT batch_size
    );
    GET DIAGNOSTICS rows_updated = ROW_COUNT;
    EXIT WHEN rows_updated = 0;
    COMMIT;
  END LOOP;
END $$;

-- Step 3: Add NOT NULL constraint
ALTER TABLE users ALTER COLUMN status SET NOT NULL;
-- Step 4: Add default for future inserts
ALTER TABLE users ALTER COLUMN status SET DEFAULT 'active';
COMMIT;

-- Create index concurrently (doesn't block writes)
CREATE INDEX CONCURRENTLY idx_users_status_active 
ON users(status) WHERE status = 'active';
```

**Function:** Perform schema changes safely without blocking application traffic during deployments.

<br/>

***

<br/>

> Bulk Data Operations

```sql
-- Efficient bulk insert with conflict handling
INSERT INTO user_preferences (user_id, preference_key, preference_value)
SELECT user_id, 'theme', 'dark'
FROM users 
WHERE created_at > CURRENT_DATE - INTERVAL '30 days'
ON CONFLICT (user_id, preference_key) 
DO UPDATE SET 
  preference_value = EXCLUDED.preference_value,
  updated_at = NOW();

-- Bulk update using VALUES clause
UPDATE products SET 
  price = v.new_price,
  updated_at = NOW()
FROM (VALUES 
  (1, 29.99),
  (2, 49.99),
  (3, 19.99)
) AS v(product_id, new_price)
WHERE products.id = v.product_id;

-- Import CSV data efficiently
COPY products(name, price, category, description)
FROM '/path/to/products.csv'
DELIMITER ','
CSV HEADER;
```

**Function:** Handle large data imports and batch updates efficiently, much faster than row-by-row operations.

<br/>

***

<br/>

> Advanced Data Validation

```sql
-- Email validation constraint
ALTER TABLE users ADD CONSTRAINT valid_email 
CHECK (email ~* '^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$');

-- Conditional unique constraint (only for active users)
CREATE UNIQUE INDEX users_email_unique_active
ON users(email) WHERE active = true;

-- Age validation with custom error message
ALTER TABLE users ADD CONSTRAINT valid_age 
CHECK (age >= 0 AND age <= 150);

-- JSON schema validation
ALTER TABLE user_settings ADD CONSTRAINT valid_settings_json
CHECK (
  jsonb_typeof(settings) = 'object' AND
  settings ? 'theme' AND
  settings->>'theme' IN ('light', 'dark', 'auto')
);

-- Cross-table validation using triggers
CREATE OR REPLACE FUNCTION check_order_total()
RETURNS TRIGGER AS $$
BEGIN
  IF NEW.total != (
    SELECT COALESCE(SUM(quantity * price), 0)
    FROM order_items
    WHERE order_id = NEW.id
  ) THEN
    RAISE EXCEPTION 'Order total does not match sum of line items';
  END IF;
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER validate_order_total
  BEFORE INSERT OR UPDATE ON orders
  FOR EACH ROW EXECUTE FUNCTION check_order_total();
```

**Function:** Implement robust data integrity rules to prevent bad data and maintain consistency.

<br/>

***

<br/>

> Complex Date/Time Calculations

```sql
-- Business days calculation
SELECT 
  order_date,
  CASE 
    WHEN EXTRACT(dow FROM order_date) IN (0,6) THEN 'Weekend'
    WHEN EXTRACT(hour FROM order_date) BETWEEN 9 AND 17 THEN 'Business Hours'
    ELSE 'After Hours'
  END as business_period,
  -- Calculate business days between dates
  (
    SELECT COUNT(*)
    FROM generate_series(order_date::date, delivery_date::date, '1 day'::interval) as day
    WHERE EXTRACT(dow FROM day) NOT IN (0,6)
  ) as business_days_to_delivery,
  -- Age calculation
  AGE(NOW(), order_date) as order_age,
  -- Time zone conversions
  order_date AT TIME ZONE 'UTC' AT TIME ZONE 'America/New_York' as ny_time
FROM orders;

-- Find working hours overlap between time zones
WITH timezone_hours AS (
  SELECT 
    generate_series(0, 23) as hour_utc,
    (generate_series(0, 23) + 5) % 24 as hour_ny,
    (generate_series(0, 23) + 8) % 24 as hour_london
)
SELECT hour_utc, hour_ny, hour_london
FROM timezone_hours
WHERE hour_ny BETWEEN 9 AND 17  -- NY business hours
  AND hour_london BETWEEN 9 AND 17; -- London business hours
```

**Function:** Handle complex business logic involving dates, time zones, and business hours calculations.

<br/>

***

<br/>

> Performance Optimization Techniques

```sql
-- Use EXISTS instead of IN for better performance with large datasets
SELECT u.id, u.name
FROM users u
WHERE EXISTS (
  SELECT 1 FROM orders o WHERE o.user_id = u.id AND o.created_at > CURRENT_DATE - INTERVAL '30 days'
);

-- Materialized view for expensive calculations
CREATE MATERIALIZED VIEW user_analytics AS
SELECT 
  u.id,
  u.name,
  COUNT(o.id) as total_orders,
  SUM(o.total) as total_spent,
  AVG(o.total) as avg_order_value,
  MAX(o.created_at) as last_order_date,
  -- Calculate customer lifetime value
  CASE 
    WHEN COUNT(o.id) > 0 THEN 
      SUM(o.total) * (COUNT(o.id)::float / EXTRACT(days FROM AGE(NOW(), MIN(o.created_at))) * 365)
    ELSE 0 
  END as estimated_clv
FROM users u
LEFT JOIN orders o ON u.id = o.user_id
GROUP BY u.id, u.name;

-- Refresh materialized view (can be scheduled)
REFRESH MATERIALIZED VIEW CONCURRENTLY user_analytics;

-- Analyze query performance
EXPLAIN (ANALYZE, BUFFERS) 
SELECT * FROM user_analytics 
WHERE total_spent > 1000 
ORDER BY estimated_clv DESC;
```

**Function:** Optimize query performance using various PostgreSQL features and best practices.

<br/>

***

<br/>

> Data Archiving and Cleanup Strategy

```sql
-- Archive old data before deletion
CREATE TABLE orders_archive (LIKE orders INCLUDING ALL);

-- Move old orders to archive
WITH archived_orders AS (
  DELETE FROM orders 
  WHERE created_at < CURRENT_DATE - INTERVAL '2 years'
  RETURNING *
)
INSERT INTO orders_archive SELECT * FROM archived_orders;

-- Vacuum and analyze after large operations
VACUUM ANALYZE orders;

-- Set up automatic partition management
CREATE OR REPLACE FUNCTION create_monthly_partition(table_name text, start_date date)
RETURNS void AS $$
DECLARE
  partition_name text;
  end_date date;
BEGIN
  end_date := start_date + INTERVAL '1 month';
  partition_name := table_name || '_' || to_char(start_date, 'YYYY_MM');
  
  EXECUTE format('CREATE TABLE %I PARTITION OF %I 
                  FOR VALUES FROM (%L) TO (%L)',
                 partition_name, table_name, start_date, end_date);
END;
$$ LANGUAGE plpgsql;

-- Create partitions for next 12 months
SELECT create_monthly_partition('sales_partitioned', 
  generate_series(CURRENT_DATE, CURRENT_DATE + INTERVAL '12 months', INTERVAL '1 month')::date
);
```

**Function:** Implement data lifecycle management with archiving, partitioning, and automated cleanup strategies.

<br/>


These snippets aren't as common but are still very useful when writing bash scripts or utilizing the terminal. These snippets are necessary to know but due to their less common nature a reference is nice!

<br/>

***

<br/>

> Advanced Find Operations

```bash
# Find files modified in last 7 days
find . -type f -mtime -7

# Find and execute command on results
find . -name "*.log" -exec rm {} \;
find . -name "*.js" -exec grep -l "console.log" {} \;

# Find large files (>100MB)
find . -type f -size +100M -ls

# Find files by permission and fix them
find . -type f -perm 777 -exec chmod 644 {} \;

# Find empty directories and remove them
find . -type d -empty -delete
```

**Function:** Powerful file searching with conditions for size, modification time, permissions, and batch operations.

<br/>

***

<br/>

> Text Processing with awk

```bash
# Sum values in a column
awk '{sum += $3} END {print "Total:", sum}' data.txt

# Calculate average
awk '{sum += $2; count++} END {print "Average:", sum/count}' numbers.txt

# Print specific columns with custom formatting
awk '{printf "%-20s %10.2f\n", $1, $3}' data.txt

# Use custom field separator for CSV
awk -F',' '{if(NR>1) print $2, $4}' data.csv

# Filter rows and perform calculations
awk '$3 > 100 {print $1, $3, $3*1.1}' sales.txt

# Count occurrences of values
awk '{count[$1]++} END {for(i in count) print i, count[i]}' data.txt
```

**Function:** Process text files column-wise, perform calculations, and analyze data patterns efficiently.

<br/>

***

<br/>

> Advanced sed Operations

```bash
# Replace text in-place with backup
sed -i.bak 's/old_text/new_text/g' file.txt

# Delete lines matching pattern
sed '/pattern/d' file.txt

# Insert line after match
sed '/pattern/a\New line to insert' file.txt

# Print only lines between patterns
sed -n '/START/,/END/p' file.txt

# Replace entire line when pattern matches
sed '/pattern/c\Replacement line' file.txt

# Remove empty lines
sed '/^$/d' file.txt

# Add line numbers
sed = file.txt | sed 'N;s/\n/\t/'
```

**Function:** Edit files programmatically, manipulate text structure, and perform complex text transformations.

<br/>

***

<br/>

> Network Analysis and Monitoring

```bash
# Monitor network connections in real-time
watch -n 1 'netstat -tuln'

# Check which process is using a specific port
lsof -i :8080
netstat -tlnp | grep :8080

# Test network connectivity and timing
ping -c 4 google.com
traceroute google.com

# Monitor network traffic
iftop
nethogs

# Check DNS resolution
nslookup google.com
dig google.com

# Test port connectivity
nc -zv hostname 80
telnet hostname 80
```

**Function:** Diagnose network issues, monitor connections, and test connectivity between systems.

<br/>

***

<br/>

> Process Control and Monitoring

```bash
# Run command with timeout
timeout 30s long_running_command

# Retry command until it succeeds
until ping -c1 google.com; do sleep 1; done

# Run command and retry on failure with exponential backoff
retry_command() {
  local max_attempts=5
  local attempt=1
  local delay=1
  
  while [ $attempt -le $max_attempts ]; do
    if "$@"; then
      return 0
    fi
    
    echo "Attempt $attempt failed. Retrying in ${delay}s..."
    sleep $delay
    attempt=$((attempt + 1))
    delay=$((delay * 2))
  done
  
  echo "Command failed after $max_attempts attempts"
  return 1
}

# Monitor CPU usage of specific process
watch -n 1 'ps aux | grep process_name'

# Background job management
jobs -l
fg %1
bg %1
disown %1
```

**Function:** Control process execution, implement retry logic, and manage long-running tasks effectively.

<br/>

***

<br/>

> File Comparison and Synchronization

```bash
# Compare directories recursively
diff -r --brief dir1/ dir2/

# Show differences side by side
diff -y --width=200 file1.txt file2.txt

# Compare files ignoring whitespace
diff -w file1.txt file2.txt

# Synchronize directories
rsync -av --delete source/ destination/

# Find duplicate files
find . -type f -exec md5sum {} + | sort | uniq -d -w32

# Merge sorted files
sort file1.txt file2.txt | uniq > merged.txt

# Show unique lines in each file
comm -3 <(sort file1.txt) <(sort file2.txt)
```

**Function:** Compare files and directories, synchronize data, and identify duplicates or differences.

<br/>

***

<br/>

> System Resource Monitoring

```bash
# Monitor disk I/O in real-time
iostat -x 1

# Check memory usage breakdown
free -h
cat /proc/meminfo

# Monitor process tree
pstree -p

# Check system load and processes
uptime
top -c

# Monitor file system usage
df -h
du -sh */ | sort -hr

# Check open file limits
ulimit -a

# Monitor system calls
strace -p PID
```

**Function:** Monitor system performance, diagnose resource bottlenecks, and track system behavior.

<br/>

***

<br/>

> Advanced Bash Scripting Patterns

```bash
# Function with error handling and logging
log_and_run() {
  echo "[$(date '+%Y-%m-%d %H:%M:%S')] Running: $*" >&2
  if ! "$@"; then
    echo "[$(date '+%Y-%m-%d %H:%M:%S')] ERROR: Command failed: $*" >&2
    return 1
  fi
}

# Read file line by line with error handling
read_file_safely() {
  local file="$1"
  if [[ ! -f "$file" ]]; then
    echo "Error: File '$file' not found" >&2
    return 1
  fi
  
  while IFS= read -r line || [[ -n "$line" ]]; do
    echo "Processing: $line"
    # Process each line here
  done < "$file"
}

# Command line argument parsing
while getopts "hf:v" opt; do
  case $opt in
    h) echo "Usage: $0 [-h] [-f file] [-v]"; exit 0 ;;
    f) input_file="$OPTARG" ;;
    v) verbose=true ;;
    \?) echo "Invalid option: -$OPTARG" >&2; exit 1 ;;
  esac
done

# Check if required commands exist
check_dependencies() {
  local deps=("$@")
  for cmd in "${deps[@]}"; do
    if ! command -v "$cmd" >/dev/null 2>&1; then
      echo "Error: Required command '$cmd' not found" >&2
      return 1
    fi
  done
}

# Usage: check_dependencies git curl jq
```

**Function:** Write robust bash scripts with proper error handling, logging, and argument validation.

<br/>

***

<br/>

> Archive and Backup Operations

```bash
# Create timestamped backup
backup_with_timestamp() {
  local source="$1"
  local backup_dir="$2"
  local timestamp=$(date +%Y%m%d_%H%M%S)
  local basename=$(basename "$source")
  
  tar -czf "${backup_dir}/${basename}_${timestamp}.tar.gz" -C "$(dirname "$source")" "$basename"
}

# Extract various archive formats
extract() {
  if [ -f "$1" ]; then
    case $1 in
      *.tar.bz2) tar xjf "$1" ;;
      *.tar.gz)  tar xzf "$1" ;;
      *.bz2)     bunzip2 "$1" ;;
      *.rar)     unrar x "$1" ;;
      *.gz)      gunzip "$1" ;;
      *.tar)     tar xf "$1" ;;
      *.tbz2)    tar xjf "$1" ;;
      *.tgz)     tar xzf "$1" ;;
      *.zip)     unzip "$1" ;;
      *.Z)       uncompress "$1" ;;
      *.7z)      7z x "$1" ;;
      *)         echo "'$1' cannot be extracted" ;;
    esac
  else
    echo "'$1' is not a valid file"
  fi
}

# Incremental backup with rsync
incremental_backup() {
  local source="$1"
  local destination="$2"
  local link_dest="$3"  # Previous backup for hard links
  
  rsync -av --link-dest="$link_dest" "$source/" "$destination/"
}
```

**Function:** Create automated backups, handle various archive formats, and implement incremental backup strategies.

<br/>

***

<br/>

> Remote System Administration

```bash
# SSH with connection multiplexing
ssh -o ControlMaster=auto -o ControlPath=~/.ssh/master-%r@%h:%p user@server

# Execute multiple commands on remote server
ssh user@server << 'EOF'
  sudo systemctl status nginx
  df -h
  uptime
  free -m
EOF

# Copy files with progress and resume capability
rsync -avz --progress --partial user@server:/remote/path/ /local/path/

# SSH tunnel for database access
ssh -L 5432:localhost:5432 user@database-server

# Port forwarding for web development
ssh -R 8080:localhost:3000 user@server

# Execute command on multiple servers
servers=("server1" "server2" "server3")
for server in "${servers[@]}"; do
  echo "=== $server ==="
  ssh "$server" 'uptime'
done
```

**Function:** Efficiently manage remote servers, transfer files, and establish secure connections for development.

<br/>


Terminal

These are my favorite terminal snippets. Some are common, others are obscure, or I just happen to use them a lot in my development workflow.

<br/>

***

<br/>

> Git Workflow Power Commands

```bash
# My essential git aliases
alias gs='git status'
alias gp='git push'
alias gl='git log --oneline --graph --decorate --all'
alias gd='git diff'
alias ga='git add .'
alias gc='git commit -m'
alias gco='git checkout'
alias gb='git branch'

# Undo last commit but keep changes
git reset --soft HEAD~1

# Interactive rebase to clean up history
git rebase -i HEAD~5

# Stash with descriptive message
git stash push -m "WIP: implementing user authentication"

# Find commits that changed a specific file
git log --follow -p -- filename.js

# See what changed in last commit
git show --stat

# Cherry-pick a commit from another branch
git cherry-pick commit-hash

# Clean up merged branches
git branch --merged | grep -v "\*\|main\|master" | xargs -n 1 git branch -d
```

**Function:** Streamline Git workflow with powerful aliases and commands for managing code history efficiently.

<br/>

***

<br/>

> Development Server Management

```bash
# Quick HTTP server with specific port
serve_here() {
  local port=${1:-8000}
  echo "Serving current directory on http://localhost:$port"
  python3 -m http.server "$port"
}

# Kill process on specific port
kill_port() {
  local port="$1"
  local pid=$(lsof -ti:$port)
  if [ -n "$pid" ]; then
    kill -9 "$pid"
    echo "Killed process $pid on port $port"
  else
    echo "No process found on port $port"
  fi
}

# Monitor file changes and restart command
watch_and_restart() {
  local pattern="$1"
  local command="$2"
  
  if command -v entr >/dev/null 2>&1; then
    find . -name "$pattern" | entr -r sh -c "$command"
  else
    echo "Install 'entr' for file watching: brew install entr"
  fi
}

# Quick port availability check
port_check() {
  local port="$1"
  if nc -z localhost "$port" 2>/dev/null; then
    echo "Port $port is in use"
    lsof -i:$port
  else
    echo "Port $port is available"
  fi
}

# Start development environment
dev_start() {
  echo "Starting development environment..."
  kill_port 3000  # Clean up any existing processes
  npm install     # Ensure dependencies are up to date
  npm start &     # Start in background
  echo "Development server started on http://localhost:3000"
}
```

**Function:** Manage development servers efficiently, handle port conflicts, and automate common development tasks.

<br/>

***

<br/>

> File and Directory Power Tools

```bash
# Create directory and navigate to it
mkcd() {
  mkdir -p "$1" && cd "$1"
}

# Find files and open in editor
ff() {
  local files=$(find . -name "*$1*" -type f | head -10)
  if [ -n "$files" ]; then
    echo "$files"
    echo "Open first result? (y/n)"
    read -r response
    if [[ "$response" == "y" ]]; then
      echo "$files" | head -1 | xargs $EDITOR
    fi
  else
    echo "No files found matching: $1"
  fi
}

# Create timestamped backup of file
backup() {
  local file="$1"
  local backup_name="${file}.backup.$(date +%Y%m%d_%H%M%S)"
  cp "$file" "$backup_name"
  echo "Backup created: $backup_name"
}

# Quick file size check
size() {
  if [ -f "$1" ]; then
    ls -lh "$1" | awk '{print $5}'
  elif [ -d "$1" ]; then
    du -sh "$1"
  else
    echo "File or directory not found: $1"
  fi
}

# Extract path components
path_info() {
  local path="$1"
  echo "Full path: $path"
  echo "Directory: $(dirname "$path")"
  echo "Filename: $(basename "$path")"
  echo "Extension: ${path##*.}"
  echo "Name without extension: $(basename "$path" .${path##*.})"
}
```

**Function:** Enhance file and directory operations with convenient shortcuts and information extraction.

<br/>

***

<br/>

> Log Analysis and Debugging

```bash
# Tail multiple log files with labels
tail_logs() {
  if [ $# -eq 0 ]; then
    echo "Usage: tail_logs file1.log file2.log ..."
    return 1
  fi
  
  for log in "$@"; do
    if [ -f "$log" ]; then
      echo "=== Watching $log ==="
      tail -f "$log" &
    fi
  done
  wait
}

# Search logs with context and highlighting
search_logs() {
  local pattern="$1"
  local log_file="${2:-*.log}"
  
  grep -rn --color=always -A 3 -B 3 "$pattern" $log_file | less -R
}

# Extract error patterns from logs
extract_errors() {
  local log_file="$1"
  local output_file="${2:-errors_$(date +%Y%m%d_%H%M%S).txt}"
  
  grep -E "(ERROR|FATAL|Exception|Error)" "$log_file" > "$output_file"
  echo "Errors extracted to: $output_file"
  echo "Error count: $(wc -l < "$output_file")"
}

# Monitor log file for specific patterns
monitor_pattern() {
  local pattern="$1"
  local log_file="$2"
  
  echo "Monitoring $log_file for pattern: $pattern"
  tail -f "$log_file" | grep --line-buffered "$pattern" | while read -r line; do
    echo "[$(date '+%H:%M:%S')] MATCH: $line"
    # Could add notifications here (e.g., osascript for macOS notifications)
  done
}

# Log analysis summary
log_summary() {
  local log_file="$1"
  echo "=== Log Summary for $log_file ==="
  echo "Total lines: $(wc -l < "$log_file")"
  echo "Errors: $(grep -c -E "(ERROR|FATAL)" "$log_file")"
  echo "Warnings: $(grep -c "WARN" "$log_file")"
  echo "Info: $(grep -c "INFO" "$log_file")"
  echo ""
  echo "Top error messages:"
  grep -E "(ERROR|FATAL)" "$log_file" | cut -d' ' -f4- | sort | uniq -c | sort -nr | head -5
}
```

**Function:** Powerful log analysis tools for debugging applications and monitoring system health.

<br/>

***

<br/>

> System Monitoring and Performance

```bash
# Quick system health check
health_check() {
  echo "=== System Health Check ==="
  echo "Uptime: $(uptime | awk '{print $3,$4}' | sed 's/,//')"
  echo "Load: $(uptime | awk -F'load average:' '{print $2}')"
  echo "Memory: $(free -h | awk '/^Mem:/ {printf "%s/%s (%.1f%%)\n", $3, $2, $3/$2*100}')"
  echo "Disk: $(df -h / | awk 'NR==2 {printf "%s/%s (%s)\n", $3, $2, $5}')"
  echo "Processes: $(ps aux | wc -l)"
  echo ""
  echo "Top CPU processes:"
  ps aux | sort -nrk 3,3 | head -5 | awk '{printf "  %-10s %5s%% %s\n", $1, $3, $11}'
}

# Monitor specific process
watch_process() {
  local process_name="$1"
  local interval="${2:-2}"
  
  while true; do
    clear
    echo "=== Monitoring: $process_name ==="
    echo "Time: $(date)"
    echo ""
    ps aux | grep "$process_name" | grep -v grep | while read -r line; do
      echo "$line" | awk '{printf "PID: %s, CPU: %s%%, MEM: %s%%, CMD: %s\n", $2, $3, $4, $11}'
    done
    echo ""
    echo "Press Ctrl+C to stop"
    sleep "$interval"
  done
}

# Directory size analyzer
disk_usage() {
  local dir="${1:-.}"
  echo "Analyzing disk usage in: $dir"
  du -sh "$dir"/* 2>/dev/null | sort -hr | head -20
}

# Network connection monitor
net_monitor() {
  echo "=== Active Network Connections ==="
  netstat -tuln | grep LISTEN | awk '{print $1, $4}' | sort
  echo ""
  echo "=== Established Connections ==="
  netstat -tun | grep ESTABLISHED | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -nr
}
```

**Function:** Monitor system performance, track processes, and analyze resource usage efficiently.

<br/>

***

<br/>

> Docker and Container Management

```bash
# Docker cleanup utilities
docker_cleanup() {
  echo "Cleaning up Docker system..."
  docker system prune -af
  docker volume prune -f
  echo "Docker cleanup complete"
}

# Quick container shell access
dsh() {
  local container="$1"
  local shell="${2:-/bin/bash}"
  
  if docker ps | grep -q "$container"; then
    docker exec -it "$container" "$shell"
  else
    echo "Container '$container' not found or not running"
    echo "Available containers:"
    docker ps --format "table {{.Names}}\t{{.Status}}"
  fi
}

# Monitor container resources
docker_stats() {
  local container="$1"
  if [ -n "$container" ]; then
    docker stats "$container"
  else
    docker stats --format "table {{.Container}}\t{{.CPUPerc}}\t{{.MemUsage}}\t{{.NetIO}}\t{{.BlockIO}}"
  fi
}

# Container log analyzer
docker_logs() {
  local container="$1"
  local lines="${2:-100}"
  
  docker logs --tail "$lines" -f "$container" | while read -r line; do
    echo "[$(date '+%H:%M:%S')] $line"
  done
}

# Quick container info
docker_info() {
  local container="$1"
  echo "=== Container Info: $container ==="
  docker inspect "$container" | jq '.[] | {
    Name: .Name,
    State: .State.Status,
    Image: .Config.Image,
    Ports: .NetworkSettings.Ports,
    Mounts: .Mounts
  }'
}
```

**Function:** Streamline Docker workflow with container management, monitoring, and debugging utilities.

<br/>

***

<br/>

> Productivity and Automation

```bash
# Quick calculator
calc() {
  echo "scale=2; $*" | bc
}

# Generate secure passwords
genpass() {
  local length="${1:-16}"
  openssl rand -base64 "$length" | tr -d "=+/" | cut -c1-"$length"
}

# Quick QR code generation (requires qrencode)
qr() {
  local text="$1"
  if command -v qrencode >/dev/null 2>&1; then
    echo "$text" | qrencode -t ansiutf8
  else
    echo "Install qrencode: brew install qrencode"
  fi
}

# Weather in terminal (requires curl)
weather() {
  local city="${1:-}"
  curl -s "wttr.in/$city?format=3"
}

# Quick note taking
note() {
  local note_file="$HOME/.quick_notes"
  if [ $# -eq 0 ]; then
    cat "$note_file"
  else
    echo "$(date '+%Y-%m-%d %H:%M:%S'): $*" >> "$note_file"
    echo "Note saved"
  fi
}

# URL shortener (requires curl)
shorten_url() {
  local url="$1"
  curl -s "http://tinyurl.com/api-create.php?url=$url"
  echo
}

# Extract text from PDF (requires pdftotext)
pdf_text() {
  local pdf_file="$1"
  if command -v pdftotext >/dev/null 2>&1; then
    pdftotext "$pdf_file" - | less
  else
    echo "Install poppler-utils: apt-get install poppler-utils"
  fi
}

# Batch rename files
batch_rename() {
  local pattern="$1"
  local replacement="$2"
  
  for file in *"$pattern"*; do
    if [ -f "$file" ]; then
      new_name="${file/$pattern/$replacement}"
      mv "$file" "$new_name"
      echo "Renamed: $file -> $new_name"
    fi
  done
}
```

**Function:** Boost daily productivity with utilities for calculations, passwords, notes, and file management.

<br/>


These are my favorite terminal snippets. Some are common, others are obscure, or I just happen to use them a lot in my development workflow.

<br/>

***

<br/>

> Git Workflow Shortcuts

```bash
# My favorite git aliases
alias gs='git status'
alias gp='git push'
alias gl='git log --oneline --graph --decorate'
alias gd='git diff'
alias ga='git add .'
alias gc='git commit -m'

# Undo last commit (keep changes)
git reset --soft HEAD~1

# Interactive rebase for cleaning history
git rebase -i HEAD~3

# Stash with message
git stash push -m "work in progress on feature X"
```

**Function:** Speed up Git workflow with aliases and powerful commands for managing commit history and temporary changes.

<br/>

***

<br/>

> Development Server Shortcuts

```bash
# Quick HTTP server for static files
python3 -m http.server 8000
# or
npx serve .

# Find and kill process on port
lsof -ti:3000 | xargs kill -9

# Monitor file changes and restart server
find . -name "*.js" | entr -r npm start

# Quick port check
nc -zv localhost 3000
```

**Function:** Quickly serve files, manage development servers, and handle port conflicts during development.

<br/>

***

<br/>

> File and Directory Shortcuts

```bash
# Create directory and cd into it
mkcd() { mkdir -p "$1" && cd "$1"; }

# Find file and open in editor
ff() { find . -name "*$1*" -type f | head -5; }

# Quick backup of file
bak() { cp "$1" "$1.bak.$(date +%Y%m%d_%H%M%S)"; }

# Get file size in human readable format
alias du='du -h'
alias df='df -h'
```

**Function:** Convenient functions for common file operations, finding files, and creating backups.

<br/>

***

<br/>

> Log Analysis Made Easy

```bash
# Follow multiple log files
tail -f /var/log/*.log

# Search logs with context
grep -A 5 -B 5 "ERROR" app.log

# Count occurrences of patterns
grep -c "404" access.log

# Show unique IPs from access log
awk '{print $1}' access.log | sort | uniq -c | sort -nr

# Filter logs by time range
sed -n '/2023-09-06 10:00/,/2023-09-06 11:00/p' app.log
```

**Function:** Efficiently analyze log files, find errors, count patterns, and extract specific time ranges.

<br/>

***

<br/>

> System Monitoring Favorites

```bash
# Monitor disk usage and alert
watch -n 30 'df -h | grep -E "(8[0-9]|9[0-9])%"'

# Show top CPU processes
ps aux | sort -nrk 3,3 | head -5

# Memory usage by process
ps aux | sort -nrk 4,4 | head -5

# Network connections summary
ss -tuln | grep LISTEN | wc -l

# Check system load
uptime | awk '{print $NF}'
```

**Function:** Monitor system health, track resource usage, and quickly identify performance bottlenecks.

<br/>

***

<br/>

> Docker and Container Management

```bash
# Clean up Docker system
docker system prune -a

# Get shell in running container
docker exec -it container_name /bin/bash

# View container logs with timestamps
docker logs -t container_name

# Monitor container stats
docker stats

# Quick container inspection
docker inspect container_name | jq '.[0].State'
```

**Function:** Efficiently manage Docker containers, debug issues, and monitor container resource usage.

<br/>

***

<br/>

> Environment and Configuration

```bash
# Quickly edit and reload bash config
alias bashrc='vim ~/.bashrc && source ~/.bashrc'

# Show environment variables for debugging
env | grep -i node

# Quick PATH manipulation
export PATH="$HOME/.local/bin:$PATH"

# Set temporary environment for command
NODE_ENV=development npm start

# Check which command is being used
which node
type node
```

**Function:** Manage shell configuration, environment variables, and debug PATH issues during development.

<br/>

***

<br/>

> Productivity Boosters

```bash
# History search with fzf (if installed)
ctrl-r # then type to search

# Quick calculator
calc() { echo "scale=2; $*" | bc; }

# Generate random password
genpass() { openssl rand -base64 ${1:-12}; }

# Weather in terminal
curl wttr.in/your_city

# Quick notes
note() { echo "$(date): $*" >> ~/.notes; }
```

**Function:** Boost productivity with quick calculations, password generation, and note-taking directly in terminal.

<br/>


Lucas Morris

Lucas Morris

Code and Terminal Snippets