Фронтенд Гайд

Відкрити в Telegram

Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов! Все представлено в виде готового кода, бери и юзай в своем проекте. 6ad1a2aabe82d4fbb0d6

Росія96 403 Технології та додатки16 698

6 282

Підписники

-224 години

-167 днів

-7530 день

987

Перегляди допису

~ 33524 години

~ 42248 годин

15.71%

Коефіцієнт залучення

Немає даних

Дописів на день

Ads index

beta

Архів дописів

6 282

Нужно показывать обводку только при клавиатурной навигации, но не при клике мышью. Что использовать?

Anonymous voting

6 282

👩‍💻 Abstract Login Page w/ Background Animation — Анимация для фона и формы ввода данных.

Сделано на CSS

🔗 Открыть код

6 282

⚙️ Топ 5 причин, когда JavaScript блокирует загрузку вашего сайта

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

🔗 Читать статью

6 282

Из браузера делаете CORS fetch к API; нужно, чтобы куки не отправлялись. Что выбрать?

Anonymous voting

6 282

👩‍💻 3D Cover Flow — Анимированные карточки с интересным эффектом движения.

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

🔗 Открыть код

6 282

Нужно подсветить карточку, когда её внутренняя кнопка в фокусе, без JS. Что использовать?

Anonymous voting

6 282

❓ Зачем используется метод 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(), он может добавлять сразу несколько узлов или строки текста, что делает его более гибким

6 282

👩‍💻 Futuristic 3D hover Effect — Красивый эффект главной кнопки, которая дополнительно открывает другие.

Сделано на SCSS

🔗 Открыть код

6 282

Как надёжно определить, что страница восстановлена из bfcache (а не заново загружена)?

Anonymous voting

6 282

⚙️ Делаем интерфейс дружелюбнее. Коллекция простых HTML/CSS лайфхаков

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

🔗 Читать статью

6 282

Нужно прогреть DNS+TLS к стороннему домену до запроса. Что поставить в ?

Anonymous voting

6 282

👩‍💻 Vertical menu with gooey effect — Вертикальное меню с липким эффектом наведения на вкладки.

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

🔗 Открыть код

6 282

⚙️ View Transitions API

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

🔗 Читать статью

6 282

Нужно отложить тяжёлый рендер вне экрана, но чтобы место под блок было зарезервировано и не было скачка макета (CLS). Что используешь?

Anonymous voting

6 282

⚙️ View Transitions API

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

🔗 Читать статью

6 282

👩‍💻 Card Hover Eeffect Left to right line — Анимированный эффект для карточек с появлением пояснительной информации.

Сделано на SCSS

🔗 Открыть код

6 282

В React есть огромный список (тысячи строк), но пользователю видны только ~20 в вьюпорте. Нужно снизить нагрузку на DOM и рендер.

Anonymous voting