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

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

По всем вопросам: @it_dashka
Реклама: https://telega.in/channels/frontend_dev5/card
Download Telegram
7😁1
Зачем используется свойство 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 удобно использовать для работы с формами, валидацией, автозаполнением, поиска и динамического изменения данных. Это ключевой инструмент при создании интерактивных интерфейсов.
Please open Telegram to view this post
VIEW IN TELEGRAM
1
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 SVG background animation — Медленный круговорот звёздного неба в качестве фона для вашего сайта

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


🔗 Открыть код
Please open Telegram to view this post
VIEW IN TELEGRAM
Используете <script type="module" src="app.js">. Нужно заранее подтянуть сам модуль и его импортируемые зависимости. Какой хинт выбрать?
Anonymous Quiz
27%
<link rel="modulepreload" href="app.js">
38%
<link rel="preload" as="script" href="app.js">
19%
<link rel="prefetch" href="app.js">
16%
defer на <script>
⚙️ Деструктуризация в JavaScript

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


🔗 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Steam Library App Portrait Card Effect — Очередной эффект при наведении на карточки

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


🔗 Открыть код
Please open Telegram to view this post
VIEW IN TELEGRAM
Нужно ограничить сессионный cookie точным хостом (без поддоменов) и требовать HTTPS. Как правильно его установить?
Anonymous Quiz
11%
Имя __Host-session; Secure; Path=/; HttpOnly; без Domain
20%
Обычный cookie; SameSite=Strict; Domain=.example.com; Secure
28%
Имя __Host-session; Secure; Domain=example.com; Path=/; HttpOnly
⚙️ SRE на Frontend`е

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


🔗 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Menu Animation — Заливка пунктов меню, которое появляется при нажатии на бургер-кнопку

Сделана SCSS


🔗 Открыть код
Please open Telegram to view this post
VIEW IN TELEGRAM
2
Зачем используется свойство 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-классы, а не инлайн-стили — это делает код чище и легче поддерживаемым
Please open Telegram to view this post
VIEW IN TELEGRAM
Элемент с position: sticky «не прилипает». У предка стоит overflow:auto. Относительно чего работает sticky по умолчанию?
Anonymous Quiz
16%
Всегда относительно вьюпорта
15%
Относительно корня документа
44%
Относительно ближайшего positioned-предка
26%
Относительно ближайшего скролл-контейнера (overflow ≠ visible)
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Glitch Experiment — Красивый эффект для текста

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


🔗 Открыть код
Please open Telegram to view this post
VIEW IN TELEGRAM
Проектируете CSS-библиотеку. Хотите, чтобы потребители легко переопределяли стили без !important. Что использовать в базовых селекторах?
Anonymous Quiz
23%
Оборачивать селекторы в :is(...)
39%
Повышать специфичность дублированием классов
14%
Оборачивать селекторы в :where(...)
25%
Всегда ставить !important
⚙️ Вам больше не нужен JavaScript

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


🔗 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM