Фронтенд Гайд
7K subscribers
655 photos
311 videos
339 links
Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов!

Все представлено в виде готового кода, бери и юзай в своем проекте.

По всем вопросам: @it_dashka
Реклама: https://telega.in/channels/frontend_dev5/card
Download Telegram
Нужно отложить тяжёлый рендер вне экрана, но чтобы место под блок было зарезервировано и не было скачка макета (CLS). Что используешь?
Anonymous Quiz
38%
content-visibility: auto вместе с фиксированной aspect-ratio/высотой контейнера
32%
visibility: hidden
8%
display: none до скролла
22%
opacity: 0
⚙️ View Transitions API

Полистав различные ресурсы в Интернете и просмотрев множество видео по данной теме, я решил составить наиболее полную картину по данному, не побоюсь этого слова, революционному API, чтобы вы уже сегодня могли начать использовать его в своём проекте!


🔗 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Vertical menu with gooey effect — Вертикальное меню с липким эффектом наведения на вкладки.

Сделано на SCSS и JS


🔗 Открыть код
Please open Telegram to view this post
VIEW IN TELEGRAM
1
Нужно прогреть DNS+TLS к стороннему домену до запроса. Что поставить в <head>?
Anonymous Quiz
28%
dns-prefetch
27%
prefetch
29%
preconnect
15%
preload
⚙️ Делаем интерфейс дружелюбнее. Коллекция простых HTML/CSS лайфхаков

Сегодня я решил показать вам несколько проверенных трюков. Выбрал самые лёгкие в освоении, чтобы вы смогли внедрить их уже сегодня, не отвлекаясь на сложности.


🔗 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
2
Как надёжно определить, что страница восстановлена из bfcache (а не заново загружена)?
Anonymous Quiz
49%
pageshow с event.persisted === true
3%
load
29%
DOMContentLoaded
19%
visibilitychange при document.hidden === false
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Futuristic 3D hover Effect — Красивый эффект главной кнопки, которая дополнительно открывает другие.

Сделано на SCSS


🔗 Открыть код
Please open Telegram to view this post
VIEW IN TELEGRAM
2
Зачем используется метод append() в JavaScript и когда его применять?

Метод append() добавляет один или несколько элементов или текст в конец указанного DOM-элемента. Это современный и удобный способ динамически изменять содержимое страницы.

Пример:

<ul id="list"></ul>

<script>
const list = document.getElementById("list");
const newItem = document.createElement("li");
newItem.textContent = "Новый элемент";

list.append(newItem);
</script>


📌В этом примере append() добавляет новый элемент <li> в конец списка

append() удобно использовать при генерации списков, карточек, уведомлений и других динамических компонентов. В отличие от appendChild(), он может добавлять сразу несколько узлов или строки текста, что делает его более гибким
Please open Telegram to view this post
VIEW IN TELEGRAM
Нужно подсветить карточку, когда её внутренняя кнопка в фокусе, без JS. Что использовать?
Anonymous Quiz
82%
:has(:focus)
8%
:parent
6%
:matches()
5%
Никак — только JS
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 3D Cover Flow — Анимированные карточки с интересным эффектом движения.

Сделано на SCSS и JavaScript


🔗 Открыть код
Please open Telegram to view this post
VIEW IN TELEGRAM
2
Из браузера делаете CORS fetch к API; нужно, чтобы куки не отправлялись. Что выбрать?
Anonymous Quiz
18%
credentials: "omit"
13%
SameSite=Strict
39%
Referrer-Policy: no-referrer
30%
Cache-Control: no-store
⚙️ Топ 5 причин, когда JavaScript блокирует загрузку вашего сайта

На основе наблюдений я выделил 5 самых проблемных случая, когда JavaScript блокирует загрузку сайта. В статье вы узнаете, как с ними бороться.


🔗 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Abstract Login Page w/ Background Animation — Анимация для фона и формы ввода данных.

Сделано на CSS


🔗 Открыть код
Please open Telegram to view this post
VIEW IN TELEGRAM
Нужно показывать обводку только при клавиатурной навигации, но не при клике мышью. Что использовать?
Anonymous Quiz
52%
:focus-visible
22%
:focus и outline: none
4%
Полностью убрать outline
22%
JS-класс на mousedown
⚙️ Я CSS-программист: «Магия» CSS или как превратить язык стилей в Тьюринг-полный ад

Разбираю феномен «калькуляторов на чистом CSS» — как язык оформления превратился в инструмент логики и почему иногда разработчики делают невозможное просто из любопытства.


🔗 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
Нужен единый ввод для мыши/тача/стилуса с поддержкой hover и pressure. Что выбрать?
Anonymous Quiz
29%
Mouse Events
22%
Touch Events
38%
Pointer Events
11%
Wheel Events
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Home Creative Wave Button.

Сделано на HTML и SCSS


🔗 Открыть код
Please open Telegram to view this post
VIEW IN TELEGRAM