Pigułka wiedzy

Joanna

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

Make your font sizes responsive with clamp()

You can make font sizes or spacing fully responsive without media queries using the clamp() function.

font-size: clamp(1rem, 2vw, 2rem);

clamp() smoothly scales values between a minimum and maximum, making layouts more flexible and predictable.

Did you know?

CSS

#Tip 023

Style Parents with :has()

You can target a parent element based on what’s happening inside it using the CSS :has() selector

.card:has(.button:hover) {
    background: #f0f0f0;
}

:has() works like a parent selector, letting you style an element based on the children it contains.

Did you know?

JavaScript

#Tip 022

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

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.