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

Открыть в Telegram

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

Больше

Россия96 466 Технологии и приложения16 690

6 285

Подписчики

+124 часа

-157 дней

-7330 день

955

Просмотры поста

~ 31024 часа

~ 43748 часов

15.20%

Коэффициент вовлеченности

Нет данных

Постов в день

Ads index

beta

Архив постов

6 285

👩‍💻 Steam Library App Portrait Card Effect — Очередной эффект при наведении на карточки

Сделана на чистом CSS

🔗 Открыть код

6 285

⚙️ Деструктуризация в JavaScript

Разберу деструктуризацию в JS на примерах: изъятие значений, пропуски, значения по умолчанию, rest/спред, частые ловушки. Коротко и практично.

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

6 285

⚙️ Деструктуризация в JavaScript

Разберу деструктуризацию в JS на примерах: изъятие значений, пропуски, значения по умолчанию, rest/спред, частые ловушки. Коротко и практично.

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

6 285

Используете

Anonymous voting

6 285

👩‍💻 SVG background animation — Медленный круговорот звёздного неба в качестве фона для вашего сайта

Сделана на чистом CSS

🔗 Открыть код

6 285

Какой кросс-доменный запрос не вызовет CORS preflight в браузере?

Anonymous voting

6 285

❓ Зачем используется свойство value в JavaScript и когда его применять? Свойство value позволяет получить или изменить текущее значение элементов форм — таких как <input>, <textarea> или <select>. Это основной способ работы с пользовательским вводом на стороне фронтенда. ✅Пример:

<input id="nameInput" type="text" placeholder="Введите имя">
<script>
  const input = document.getElementById("nameInput");
  input.value = "Alice"; // Установим значение

  console.log(input.value); // Получим текущее значение ➜ "Alice"
</script>

📌В этом примере value сначала задаёт значение в поле ввода, а затем позволяет его прочитать.

value удобно использовать для работы с формами, валидацией, автозаполнением, поиска и динамического изменения данных. Это ключевой инструмент при создании интерактивных интерфейсов.

6 285

👩‍💻 Morphing Submit Button — Анимированная кнопка загрузки после нажатия на "Submit"

Сделана на CSS, SVG и JavaScript

🔗 Открыть код

6 285

Новый Service Worker установился, но пользователи видят старую версию до перезапуска вкладок. Как применить обновление сразу?

Anonymous voting

6 285

⚙️ HTML и CSS осенью 2025. Эти новые фичи я рекомендую изучить прямо сейчас

Покажу свежие фишки HTML/CSS, которые уже поддерживаются: что они чинят, где применить, на что смотреть. Короткие примеры, ссылки и мои фавориты — чтобы выбрать, что копать глубже.

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

6 285

API-ответы должны приходить сразу, можно 30 с устаревшие с фоновым обновлением; при сетевой ошибке — использовать старый до 1 ч. Какие заголовки отдать?

Anonymous voting

6 285

👩‍💻 Order button animation — Анимированная кнопка "Оформить заказ"

Сделана на CSS и JS

🔗 Открыть код

6 285

⚙️ Я запрещаю вам margin

Я показываю, почему выбраковываю margin: перехожу на gap, даю лишние обёртки ради независимости узлов. Итог — чище код и предсказуемые отступы. Будут примеры и возражения.

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

6 285

Нужно хранить аутентификацию в SPA так, чтобы токен нельзя было украсть XSS и работало на поддоменах, при этом защититься от CSRF. Что выбрать?

Anonymous voting

6 285

👩‍💻 Fancy wipe — Стильный текст с анимированным появлением

Сделан на чистом CSS

🔗 Открыть код

6 285

В Web Component с открытым Shadow DOM внутри нажали кнопку. На document висит обычный click-слушатель (не capture). Что он увидит по умолчанию?

Anonymous voting

6 285

❓ Зачем используется свойство textContent в JavaScript и когда его применять? Свойство textContent позволяет получить или изменить только текстовое содержимое элемента, игнорируя HTML-теги. Это безопасный способ отобразить данные без риска вставки вредоносного кода. ✅Пример:

<div id="message"></div>
<script>
  const box = document.getElementById("message");
  box.textContent = "<strong>Привет!</strong>";
</script>

📌В этом примере textContent выведет строку <strong>Привет!</strong> как обычный текст, без интерпретации HTML.

textContent удобно использовать для вывода пользовательского ввода, динамических данных или сообщений, где важна безопасность. В отличие от innerHTML, оно исключает XSS-уязвимости и работает быстрее при массовых изменениях текста

6 285