Quick Coding Facts

Joanna

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.

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

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.