Frontend DEN
@junnot
1.2K subscribers
75 photos
294 videos
24 files
730 links
Все для веб-розробників і не тільки. Зв'язок з адміном 👉 @denyspopov_web
Download Telegram
About
Blog
Apps
Platform
Join
Frontend DEN
1.2K subscribers
Frontend DEN
🗞️ Дайджест новин та статей зі світу Frontend розробки за 11.03.2026:

🔹 Створення динамічних форм у React та Next.js - читати

🔹 Швидкий удар № 108 - читати

🔹 Випуски Node.js 25.8.1 (поточна версія) - читати
Smashing Magazine
Building Dynamic Forms In React And Next.js — Smashing Magazine
Some forms stay UI, while others quietly become rule engines. Here’s why these two different approaches exist and how to choose between them.
148 views
Frontend DEN
🗞️ Дайджест новин та статей зі світу Frontend розробки за 12.03.2026:

🔹 Примусова доступність елемента геолокації - читати

🔹 За межами border-radius: що відкриває властивість CSS corner-shape для повсякденного інтерфейсу користувача - читати

🔹 М'яка кнопка з ефектом наведення/клацання - читати

🔹 Автоматизований доступний текст із контрастним кольором() - читати
Frontend Masters
The Enforced Accessibility of the Geolocation Element
There’s a <geolocation> element in HTML now. Looks like Chrome led it up and got it into Chrome first. Now we’re in the ol’ 🤷‍♀️ state on when we’ll get it elsewhere. But the process certainly involved other browser makers, so that’s good.
146 views
Frontend DEN
🗞️ Дайджест новин та статей зі світу Frontend розробки за 13.03.2026:

🔹 Перехід з Moment.js на JS Temporal API - читати

🔹 функція contrast-color() — не тільки чорне та біле - читати
Smashing Magazine
Moving From Moment.js To The JS Temporal API — Smashing Magazine
The way JavaScript handles time has evolved significantly, from the built-in `Date` API to Moment.js and now Temporal. The new standard fills gaps in the original `Date` API while addressing limitations found in Moment and other libraries. Joe Attardi shares…
155 views
Frontend DEN
🗞️ Дайджест новин та статей зі світу Frontend розробки за 16.03.2026:

🔹 Використання користувацьких елементів, пов’язаних із формами, на практиці - читати

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

🔹 Вбудовані модулі JSON нарешті стали реальністю - читати
Frontend Masters
Form-Associated Custom Elements in Practice
I was well over three-quarters of the way through rewriting the AgnosticUI components in Lit when I realized I had a massive blind spot. My <ag-input> looked solid and fired events correctly, but it lacked Form-Associated Custom Element (FACE) support. This…
137 views
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.
130 views
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 views
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 views
Frontend DEN
🗞️ Дайджест новин та статей зі світу Frontend розробки за 18.03.2026:

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

🔹 Додайте до своїх зображень анімацію коливання - читати
CSS-Tricks
Quick Hit #111 | CSS-Tricks
Bramus announces at-rule feature queries for Chrome Canary 148.
126 views
Frontend DEN
🗞️ Дайджест новин та статей зі світу Frontend розробки за 19.03.2026:

🔹 Макет Flexbox Masonry (пояснення з використанням математики) - читати
140 views
Frontend DEN
🗞️ Дайджест новин та статей зі світу Frontend розробки за 20.03.2026:

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

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

🔹 Випущено ESLint v10.1.0 - читати
174 views
Frontend DEN
🗞️ Дайджест новин та статей зі світу Frontend розробки за 23.03.2026:

🔹 Короткі новини № 113 - читати
132 views
Frontend DEN
🗞️ Дайджест новин та статей зі світу Frontend розробки за 23.03.2026:

🔹 Короткі новини № 113 - читати
124 views
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 views
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
113 views
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 views
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 views
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 views
Frontend DEN
⏱️ Хочете точно знати, скільки триває виконання вашого коду?

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

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

Все про розробку 👉 ПІДПИСАТИСЬ
❤2
102 views
Frontend DEN
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 views
Frontend DEN
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;
}


Все про розробку 👉 ПІДПИСАТИСЬ
53 views
Frontend DEN
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;
}


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