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

Ir al canal en Telegram

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

Rusia96 466 Tecnologías y Aplicaciones16 690

6 285

Suscriptores

+124 horas

-157 días

-7330 días

955

Visitas de la publicación

~ 31024 horas

~ 43748 horas

15.20%

Tasa de compromiso

Sin datos

Mensajes por día

Ads index

beta

Archivo de publicaciones

6 285

❓ Зачем используется свойство placeholder в HTML и когда его применять? Атрибут placeholder задаёт текст-подсказку внутри поля ввода, которая исчезает, когда пользователь начинает вводить данные. Это удобно для улучшения UX и пояснения назначения поля. ✅Пример:

<input type="text" placeholder="Введите имя">
<input type="email" placeholder="Введите ваш email">

📌В этом примере подсказки помогают пользователю понять, что нужно ввести в каждое поле.

placeholder удобно использовать в формах, когда нужно кратко показать формат или пример данных. Однако он не заменяет полноценные <label> — для доступности и удобства навигации лучше использовать оба.

6 285

👩‍💻 Ubisoft Quartz Background Animation — Размытая анимация отлично подойдёт для фона на вашем сайте

Сделано на CSS

🔗 Открыть код

6 285

Хотите, чтобы при повторных запросах JSON браузер получал 304 Not Modified при неизменности. Что настроить?

Anonymous voting

6 285

⚙️ Коллекция полезных HTML и CSS фич, которые редко используются

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

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

6 285

Подключаете CSS/JS с CDN с Subresource Integrity. Что нужно, чтобы браузер не заблокировал ресурс?

Anonymous voting

6 285

👩‍💻 SVG background animation test — Разъезжающиеся фигуры произвольной формы в качестве фона

Сделано на CSS

🔗 Открыть код

6 285

⚙️ Вам больше не нужен JavaScript

Покажу, как CSS+HTML берут интерактив: вложенность, @starting-style, dvh/dvw, :has(), переходы — меньше JS, больше скорости и красоты. Примеры, гайды.

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

6 285

Проектируете CSS-библиотеку. Хотите, чтобы потребители легко переопределяли стили без !important. Что использовать в базовых селекторах?

Anonymous voting

6 285

👩‍💻 Glitch Experiment — Красивый эффект для текста

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

🔗 Открыть код

6 285

Элемент с position: sticky «не прилипает». У предка стоит overflow:auto. Относительно чего работает sticky по умолчанию?

Anonymous voting

6 285

❓ Зачем используется свойство style в JavaScript и когда его применять? Свойство style позволяет напрямую изменять инлайн-стили элемента через JavaScript. Это удобно для динамического управления внешним видом интерфейса. ✅Пример:

<div id="box">Hello</div>
<script>
  const box = document.getElementById("box");
  box.style.color = "white";
  box.style.backgroundColor = "blue";
</script>

📌В этом примере через style элементу назначаются цвет текста и фон.

style удобно использовать для изменения размеров, позиционирования, анимаций и состояния элементов. Но если требуется масштабное оформление, лучше применять CSS-классы, а не инлайн-стили — это делает код чище и легче поддерживаемым

6 285

👩‍💻 Menu Animation — Заливка пунктов меню, которое появляется при нажатии на бургер-кнопку

Сделана SCSS

🔗 Открыть код

6 285

INP высокий — интерфейс «тупит» при кликах/вводе. Что в первую очередь поможет снизить INP?

Anonymous voting

6 285

⚙️ SRE на Frontend`е

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

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

6 285

Нужно ограничить сессионный cookie точным хостом (без поддоменов) и требовать HTTPS. Как правильно его установить?

Anonymous voting

6 285

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

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

🔗 Открыть код