Quick Coding Facts

Got 30 seconds? Great — that’s all you need to learn something new!

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.

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

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.

This collection of programming coding tips is a quick and easy way to learn something new – perfect for busy developers. No long explanations, no boring theory — just short, useful info in a “Did you know…” style.

You’ll find both basic things every programmer should know (at least in theory – but let’s be honest, our memory isn’t perfect and we often need Google or AI), and some funny or surprising facts that even experienced devs will enjoy.

Whether you’re just starting out, have been coding for years, or just like clicking on smart-looking stuff – there’s something here for you.

Get ready for a smile, a few “ah, now I get it!” moments, and maybe even a “good to know!”.

WARNING: Side effects may include sudden coding inspiration and a strong desire to share what you’ve learned with every developer around you.