Why 🗜️ 👈 is the one of the most powerful css function?

#css #html

Fun fact: 🗜️ is the emoji for clamp according to emojipedia

Lets talk about css `clamp()` function.

If you have ever wondered how you can define range to a css property e.g minimum, preferred or/and maximum value, then clamp is the go to function.

Here is how you can use.

clamp(MIN,PREF,MAX)

You give a minimum value, a preferred value and a maximum value.

One of the most common use of clamp() is in creating fluid/responsive typography. Your font-size will change based on the viewport size without writing any additional media queries. You can give a minimum/maximum font-size but everything in-between will be fluid if you use viewport units like vw or vh;

Here an example ( try to resize the result tab )

You can use clamp function for lengths, percentages, angles etc. You can read about it more here.

Aslam Shah

Creator of https://codedmails.com

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.