TIL!

parseFloat works only with a decimal point

I didn't know parseFloat is not aware of browser locale. So if you happen to live in a country where a decimal separator is a comma then parseFloat is no longer your friend:

> parseFloat('25.5');
< 25.5
> parseFloat('25,5');
< 25 // parsing stops when it encounters ","

Somehow I understand why... but still, that's problematic when you support multiple locales. I will write more about it, and how to overcome the issue, in one of the next posts.

date-fns is cool!

So the other day, in my sideproject, I had to implement weekdays calendar. It's a navigator with today selected and looks like this:

To simplify things a bit let's just try to render: 8, 9, 10, 11, 12, 13, 14. With regular new Date() it can be a nightmare and you'll for sure forget about something. But date-fns gives you nice tools like startOfWeek:

const now = new Date();
const today = getDate(now);
const start = startOfWeek(now, { weekStartsOn: 1 });
const week = [];
for (let i = 0; i < 7; i++) {
  week.push(getDate(addDays(start, i)));
}

Now, we just need to iterate through week array. The numbers are there. Waiting!

You can name regex groups

Say you have a string: "I use gatsby@2.23.10. What about you?" and you want to get the gatsby version from the input. If you use a regex like this and String.match you will be able to get the version really quickly. With a great self-explanatory code!

const text = 'I use gatsby@2.23.10. What about you?';
const regex = /gatsby@(?<version>\d*.\d*.\d*)/;
text.match(regex)?.groups.version;
// output: 2.23.10

Named groups for the win!

You don't need JS for smooth scrolling

I'm still not sure if I like this effect but here's how to do it:

html {
  scroll-behavior: smooth;
}

You can add a scrolling offset to anchors

When you go to a section of a page via anchor, the header is often too close to the top edge. You can add a little bit of space there by specifying scroll-margin-top:

[id] {
  scroll-margin-top: 50px;
}