Biblioteka snippetów

Joanna

5 sposobów na ustawienie wartości domyślnej


// 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" }

Selektory rodzeństwa w CSS (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 sposoby na zapisanie danych w przeglądarce


// 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}`;