Pigułka wiedzy

05/08/2025

Joanna

Masz 30 sekund? Super, tyle właśnie wystarczy, by nauczyć się czegoś nowego!

You can combine destructuring and rest syntax to extract what you need and keep the rest.

const { id, ...info } = { id: 1, name: "Alice", role: "Admin" };
console.log(info);      // { name: "Alice", role: "Admin" }

You can make an event listener run only once – it removes itself automatically after the first trigger.

button.addEventListener(
  'click',
  handler,
  { once: true }
);

scroll-margin lets you control where an element stops when it’s scrolled into view.

It is perfect for fixing content hidden behind sticky headers.

section {
  // Leaves 80px space above 
  // when scrolled into view
  scroll-margin-top: 80px;
}

Works with scrollIntoView() and anchor links (#id) for smooth, precise positioning.

Don’t use transition: all – it tells the browser to animate every property change, which can hurt performance and cause unwanted effects.

.element {
    transition: all 0.3s ease;
}

Instead, specify only the properties you actually want to animate:

.element {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

Always animate properties that don’t trigger reflow or repaint – like transform, opacity, or filter.

Animating layout-related properties (e.g. width, margin, top, box-shadow) forces the browser to recalculate positions and redraw the page, making animations laggy.

Always clean up listeners to avoid memory leaks – especially in components or SPA apps.

function onClick() {
  console.log('Button clicked!');
}

element.addEventListener('click', onClick);

element.removeEventListener('click', onClick);

When using destructuring, you can skip the fields you’re not interested in — but you must keep the commas, e.g.:

const [ , second ] = ["Alice", "Olivia", "Ella"];
console.log(second); // "Olivia"

This allows you to “skip” array elements without creating extra variables.

Event propagation is the way events travel through the DOM tree. There are two directions of propagation:

Capturing phase (downward) – the event moves from the document element down to the target element that triggered it.

Bubbling phase (upward) – the event moves from the target element back up the DOM tree until it reaches document.

Powyższy zestaw ciekawostek z zakresu programowania to szybka porcja wiedzy w pigułce, dla zabieganych programistów, bez lania wody, bez zbędnej teorii – tylko czyste, skondensowane info w stylu „Czy wiesz, że …”

Dostrzeżesz tu zarówno podstawy, które każdy programista wiedzieć powinien, (przynajmniej w teorii, ale bądźmy szczerzy – pamięć mamy dobrą, ale krótką i bez google albo AI momentami byłoby ciężko), jak i programistyczne „smaczki”, przyprawiające o nerwowy śmiech nawet doświadczonych developerów. Niezależnie, czy jesteś początkującym koderem, doświadczonym devem, czy po prostu lubisz klikać w rzeczy, które wyglądają mądrze – znajdziesz tu coś dla siebie.

Przygotuj się na uśmiech, przebłyski myśli: „aaa, o to chodzi!” oraz stan „ooo, dobrze wiedzieć…”

UWAGA ! Możliwe efekty uboczne: nagłe oświecenie programistyczne oraz niepohamowana chęć dzielenia się wiedzą z każdym napotkanym developerem.

Pigułka wiedzy

Masz 30 sekund? Super, tyle właśnie wystarczy, by nauczyć się czegoś nowego!

Destructure and Keep the Rest

Run an Event Listener Just Once

Master scroll-margin for Perfect Scroll Positioning

Avoid transition: all

Animate Smart: Use Transform and Opacity for Better Performance

Clean Up with removeEventListener() to Prevent Memory Leaks

Skipping Array Elements with Destructuring

Event propagation