Quick Coding Facts

Joanna

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

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

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.