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 удобно использовать для работы с формами, валидацией, автозаполнением, поиска и динамического изменения данных. Это ключевой инструмент при создании интерактивных интерфейсов.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Какой кросс-доменный запрос не вызовет CORS preflight в браузере?
Anonymous Quiz
29%
GET с заголовком X-Token: abc
22%
POST с Content-Type: application/json
41%
POST с Content-Type: application/x-www-form-urlencoded, без доп. заголовков
9%
PUT с Content-Type: text/plain
This media is not supported in your browser
VIEW IN TELEGRAM
Сделана на чистом 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>
Разберу деструктуризацию в JS на примерах: изъятие значений, пропуски, значения по умолчанию, rest/спред, частые ловушки. Коротко и практично.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Сделана на чистом CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
Нужно ограничить сессионный cookie точным хостом (без поддоменов) и требовать HTTPS. Как правильно его установить?
Anonymous Quiz
11%
Имя __Host-session; Secure; Path=/; HttpOnly; без Domain
41%
Имя __Secure-session; Secure; Domain=.example.com; Path=/; HttpOnly
20%
Обычный cookie; SameSite=Strict; Domain=.example.com; Secure
28%
Имя __Host-session; Secure; Domain=example.com; Path=/; HttpOnly
Это еще одна статья про разбор ошибок и аварий, но с точки зрения небольших фич фронта, которые вы можете внедрить самостоятельно и упростить свою работу, а также помочь отделу в целом.
Please open Telegram to view this post
VIEW IN TELEGRAM
INP высокий — интерфейс «тупит» при кликах/вводе. Что в первую очередь поможет снизить INP?
Anonymous Quiz
12%
Предзагрузка шрифтов и CSS
18%
Перевести на ESM, включить code-splitting и HTTP/2 push
14%
Сжать изображения до AVIF/WebP
56%
Дробить long tasks, делать yield/await, убирать тяжёлое из обработчиков
This media is not supported in your browser
VIEW IN TELEGRAM
Сделана 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 удобно использовать для изменения размеров, позиционирования, анимаций и состояния элементов. Но если требуется масштабное оформление, лучше применять 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)
Please open Telegram to view this post
VIEW IN TELEGRAM
Проектируете CSS-библиотеку. Хотите, чтобы потребители легко переопределяли стили без !important. Что использовать в базовых селекторах?
Anonymous Quiz
23%
Оборачивать селекторы в :is(...)
39%
Повышать специфичность дублированием классов
14%
Оборачивать селекторы в :where(...)
25%
Всегда ставить !important
Покажу, как CSS+HTML берут интерактив: вложенность, @starting-style, dvh/dvw, :has(), переходы — меньше JS, больше скорости и красоты. Примеры, гайды.
Please open Telegram to view this post
VIEW IN TELEGRAM