Frontend DEN

🗞️ Дайджест новин та статей зі світу Frontend розробки за 17.03.2026:

🔹 Коли Deno або Bun є кращим рішенням, ніж Node.js - читати

Frontendmasters

When Deno or Bun is a Better Solution than Node.js

Node.js is the default, but should it be? Bun and Deno have come a long way in compatibility and there are reasons that can make them better choices depending on the project.

140 views07:00

Frontend DEN

🗞️ Дайджест новин та статей зі світу Frontend розробки за 18.03.2026:

🔹 Короткий огляд № 111 - читати

🔹 Додайте до своїх зображень анімацію коливання - читати

CSS-Tricks

Quick Hit #111 | CSS-Tricks

Bramus announces at-rule feature queries for Chrome Canary 148.

119 views07:00

Frontend DEN

CSS-Tricks

Quick Hit #111 | CSS-Tricks

Bramus announces at-rule feature queries for Chrome Canary 148.

126 views07:00

Frontend DEN

🗞️ Дайджест новин та статей зі світу Frontend розробки за 19.03.2026:

🔹 Макет Flexbox Masonry (пояснення з використанням математики) - читати

140 views07:00

Frontend DEN

🗞️ Дайджест новин та статей зі світу Frontend розробки за 20.03.2026:

🔹 Випадаючі меню всередині прокручуваних контейнерів: чому вони не працюють і як це правильно виправити - читати

🔹 Короткі новини № 112 - читати

🔹 Випущено ESLint v10.1.0 - читати

174 views07:00

Frontend DEN

🗞️ Дайджест новин та статей зі світу Frontend розробки за 23.03.2026:

🔹 Короткі новини № 113 - читати

132 views07:00

Frontend DEN

🗞️ Дайджест новин та статей зі світу Frontend розробки за 23.03.2026:

🔹 Короткі новини № 113 - читати

124 views07:00

Frontend DEN

🗞️ Дайджест новин та статей зі світу Frontend розробки за 24.03.2026:

🔹 Галерея зображень із спливаючими вікнами та технологією AIM (Anchor-Interpolated Morph) - читати

master.dev

Image Gallery with Popovers and AIM (Anchor-Interpolated Morph)

An image gallery is a nice example of AIM, where the larger version of an image can

106 views07:00

Frontend DEN

master.dev

Image Gallery with Popovers and AIM (Anchor-Interpolated Morph)

An image gallery is a nice example of AIM, where the larger version of an image can

113 views07:00

Frontend DEN

🗞️ Дайджест новин та статей зі світу Frontend розробки за 25.03.2026:

🔹 Два кола, одна стрілка та позиціонування за допомогою якоря - читати

🔹 Короткі новини № 114 - читати

🔹 Підводний камінь використання функції counter() з контейнером - читати

🔹 Випуски Node.js 20.20.2 (LTS) - читати

🔹 Випуски Node.js 22.22.2 (LTS) - читати

🔹 Випуски Node.js 24.14.1 (LTS) - читати

🔹 Випуски Node.js 25.8.2 (поточна версія) - читати

103 views07:00

Frontend DEN

🗞️ Дайджест новин та статей зі світу Frontend розробки за 26.03.2026:

🔹 Делегування фокусу в Shadow DOM: як правильно налаштувати delegatesFocus - читати

Frontendmasters

Shadow DOM Focus Delegation: Getting delegatesFocus Right

You don't necessarily have to do focus handling yourself with shadow DOM web components. For simple wrapper components, there is an easier (and better) way.

115 views07:00

Frontend DEN

🗞️ Дайджест новин та статей зі світу Frontend розробки за 27.03.2026:

🔹 Короткі новини № 115 - читати

CSS-Tricks

Quick Hit #115 | CSS-Tricks

Firefox 149, like Chrome 133, ships popover=hint, which closes all but auto popovers.

112 views07:00

Frontend DEN

⏱️ Хочете точно знати, скільки триває виконання вашого коду?

Функції performance.mark() та performance.measure() дають змогу інструментувати JavaScript і отримувати високоточні вимірювання часу виконання.

Деталі та приклади реалізації — за посиланням:
https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark

Все про розробку 👉 ПІДПИСАТИСЬ

❤2

102 views10:21

Frontend DEN

0:20

This media is not supported in your browser

VIEW IN TELEGRAM

Як зробити градієнтний текст у CSS за кілька рядків

В основі трюку — властивість background-clip. Вона визначає, як фон (зображення або колір) обмежується межами елемента. Якщо вказати background-clip: text, фон буде «обрізано» по формі символів, тобто градієнт заповнить саме контур тексту.

Ще один важливий крок — зробити сам колір тексту прозорим, щоб було видно фон. Для цього використовується -webkit-text-fill-color: transparent (плюс додатково color: transparent для сумісності).

Приклад стилю для заголовка:

h1 {
background-image: linear-gradient(109.6deg, rgba(228, 107, 232, 1) 11.2%, rgba(87, 27, 226, 1) 96.7%);
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}

Все про розробку 👉 ПІДПИСАТИСЬ

91 views14:26

Frontend DEN

0:20

This media is not supported in your browser

VIEW IN TELEGRAM

h1 {
background-image: linear-gradient(109.6deg, rgba(228, 107, 232, 1) 11.2%, rgba(87, 27, 226, 1) 96.7%);
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}

Все про розробку 👉 ПІДПИСАТИСЬ

53 views14:28

Frontend DEN

0:20

This media is not supported in your browser

VIEW IN TELEGRAM

h1 {
background-image: linear-gradient(109.6deg, rgba(228, 107, 232, 1) 11.2%, rgba(87, 27, 226, 1) 96.7%);
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}

Все про розробку 👉 ПІДПИСАТИСЬ

39 views14:28

Frontend DEN

0:20

This media is not supported in your browser

VIEW IN TELEGRAM

h1 {
background-image: linear-gradient(109.6deg, rgba(228, 107, 232, 1) 11.2%, rgba(87, 27, 226, 1) 96.7%);
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}

Все про розробку 👉 ПІДПИСАТИСЬ

40 views14:28

Frontend DEN

0:20

This media is not supported in your browser

VIEW IN TELEGRAM

h1 {
background-image: linear-gradient(109.6deg, rgba(228, 107, 232, 1) 11.2%, rgba(87, 27, 226, 1) 96.7%);
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}

Все про розробку 👉 ПІДПИСАТИСЬ

34 views14:28

Frontend DEN

0:20

This media is not supported in your browser

VIEW IN TELEGRAM

h1 {
background-image: linear-gradient(109.6deg, rgba(228, 107, 232, 1) 11.2%, rgba(87, 27, 226, 1) 96.7%);
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}

Все про розробку 👉 ПІДПИСАТИСЬ

28 views14:28

Frontend DEN

0:20

This media is not supported in your browser

VIEW IN TELEGRAM

h1 {
background-image: linear-gradient(109.6deg, rgba(228, 107, 232, 1) 11.2%, rgba(87, 27, 226, 1) 96.7%);
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}

Все про розробку 👉 ПІДПИСАТИСЬ

26 views14:28

Frontend DEN

0:20

This media is not supported in your browser

VIEW IN TELEGRAM

h1 {
background-image: linear-gradient(109.6deg, rgba(228, 107, 232, 1) 11.2%, rgba(87, 27, 226, 1) 96.7%);
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}

Все про розробку 👉 ПІДПИСАТИСЬ

22 views14:28

About

Blog

Apps

Platform