TIL!

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