Pigułka wiedzy

Joanna

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

Master scroll-margin for Perfect Scroll Positioning

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.

Did you know?

CSS

#Tip 007

Avoid transition: all

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

Did you know?

CSS

#Tip 006

Animate Smart: Use Transform and Opacity for Better Performance

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.

Did you know?

CSS

#Tip 005

Clean Up with removeEventListener() to Prevent Memory Leaks

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);

Did you know?

JavaScript

#Tip 004

Skipping Array Elements with Destructuring

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.

Did you know?

JavaScript

#Tip 003

Event propagation

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.

Did you know?

JavaScript

#Tip 002

Falsy values

8 Falsy values that always evaluate to false:

false, null, undefined, "", 
0, -0, 0n, NaN

Remember: empty array [] is truthy!

Did you know?

JavaScript

#Tip 001

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.