Code Snippets library

Joanna

Ways to Ignore Files in Git


#1. .gitignore
// Global ignore for all users (committed to repo)
// Files listed here are never tracked or added
# Example:
node_modules/
.env
.DS_Store

#2. .git/info/exclude
// Local ignore (applies only to your local repo)
// Works like .gitignore but is not shared
# Example:
vendor/swiper/
*.local.php

#3. --assume-unchanged
// Git stops checking for local changes
// File may still be overwritten by pull/merge
git update-index --assume-unchanged phpcs.xml.dist
git update-index --no-assume-unchanged phpcs.xml.dist

#4. --skip-worktree
// Ignore local changes to a tracked file
// Git won’t show or overwrite your local edits
// Ideal for environment configs
git update-index --skip-worktree .env
git update-index --no-skip-worktree .env

5 Useful git grep Commands


#1: Search your code instantly
git grep "function"
# Finds all lines containing "function" in tracked files

#2: Search within a specific branch
git grep "API_KEY" main
# Looks for "API_KEY" only in the 'main' branch

#3: Filter by file type
git grep "useEffect" -- '*.js'
# Searches only inside JavaScript files

#4: Count occurrences
git grep -c "console.log"
# Counts how many times "console.log" appears per file

#5: Search older commits
git grep "TODO" HEAD~10
# Searches for "TODO" in the code as it existed 10 commits ago

Object Destructuring in JavaScript


// 1. Basic object destructuring
const user = { name: "Alice", age: 25 };
const { name, age } = user; // name = "Alice", age = 25

// 2. Rename variables (alias)
const { name: userName } = user; // userName = "Alice"

// 3. Default values
const { city = "Warszawa" } = user; // city = "Warszawa" (if user.city is undefined)

// 4. Nested objects
const person = { info: { country: "Poland" } };
const { info: { country } } = person; // country = "Poland"

// 5. Rest operator – collect remaining keys
const employee = { id: 1, name: "Alice", role: "Admin" };
const { name: empName, ...rest } = employee; // empName = "Alice", rest = { id: 1, role: "Admin" }

// 6. Destructuring in function parameters – BEST for clean functions
function greet({ name = "John", age = 18 }) {
  console.log(`Hi ${name}, age: ${age}`);
}
greet(user); // "Hi Alice, age: 25"

// 7. Dynamic (computed) keys
const key = "age";
const { [key]: userAge } = user; // userAge = 25

5 Ways to Set Default Value


// 1. Logical OR (||) - falsy values become default
// falsy values: 0, "", false, NaN, null, undefined     
let name = inputName || "John";

// 2. Nullish coalescing (??)
// Only null and undefined are replaced
let name = inputName ?? "John";

// 3. Ternary operator
let name = typeof inputAge !== "undefined" ? name : "John";

// 4. Function parameters with defaults (ES6+) - BEST for functions
function createUser(name = "John", age = 18, isActive = true) {
    return { name, age, isActive };
}

// 5. Destructuring with defaults – GREAT for objects
const config = { firstName: "Alice" };
const { 
    firstName = "John", 
    lastName = "Doe", 
    nickname = "N/A" 
} = config;
const names = { firstName, lastName, nickname };

console.log(names)
// Output: { firstName: "Alice", lastName: "Doe", nickname: "N/A" }

Sibling Selectors


/* Next sibling (adjacent sibling) */
h1 + p { color: red; }                          /* p immediately after h1 */
.button + .button { margin-left: 10px; }        /* button after button */

/* Any following sibling (general sibling) */
h1 ~ p { color: blue; }                         /* all p elements after h1 */
.active ~ li { opacity: 0.5; }                  /* all li after .active */

/* Previous sibling (using :has()) */
p:has(+ h2) { margin-bottom: 0; }               /* p before h2 */
li:has(+ .active) { border-right: 2px solid; }  /* li before .active */

/* Sibling after element with specific child */
div:has(img) + p { font-weight: bold; }            /* p after div containing img */
.item:has(.sold) ~ .item { filter: grayscale(1); } /* all .item after .item with .sold */

3 ways to save data in the browser


// 1. LOCALSTORAGE
// Save a string
localStorage.setItem("name", "John");

// Save an array
const fruits = ["apple", "banana", "pear"];
localStorage.setItem("fruits", JSON.stringify(fruits));

// Save an object
const user = { name: "Alice", age: 25 };
localStorage.setItem("user", JSON.stringify(user));


// 2. SESSIONSTORAGE
// Save an object
sessionStorage.setItem("settings", JSON.stringify({ theme: "dark", fontSize: 14 }));


// 3. COOKIES
// Save a string (valid for 7 days)
document.cookie = "token=abc123; max-age=" + 7*24*60*60;

// Save an array
const colors = ["red", "green", "blue"];
document.cookie = `colors=${JSON.stringify(colors)}; max-age=${7*24*60*60}`;

// Save an object
const product = { id: 101, name: "Laptop", price: 2500 };
document.cookie = `product=${JSON.stringify(product)}; max-age=${7*24*60*60}`;