Логово верстальщика

📝 HTML <dialog> — нативные модальные окна без использования JS Модальные окна — один из самых популярных элементов интерфейса, с которым часто приходится работать на фронтенде. Раньше, чтобы реализовать модалку, нам приходилось подключать внешние библиотеки или писать кастомные решения. Но в HTML5 появилась нативная поддержка модальных окон через <dialog>, что значительно упрощает задачу. ❌ Как было раньше:

<div class="modal hidden"> <p>Привет!</p> <button onclick="closeModal()">Закрыть</button> </div> <style> .hidden { display: none; } </style> <script> // Какой то JS код </script>

➕ Как стало с <dialog>:

<dialog id="myDialog"> <p>Привет!</p> <button onclick="myDialog.close()">Закрыть</button> </dialog> <button onclick="myDialog.showModal()">Открыть</button>

Для реализации модальных окон часто использовался обычный <div> с добавлением классов для отображения и скрытия, а также JavaScript для управления этим процессом. Чтобы скрыть или показать модалку, нужно было вручную изменять стили или использовать JS-функции. ℹ️ Как <dialog> упрощает работу и где полезно:

— .showModal(): открывает модалку — .close(): закрывает модалку — Улучшение доступности: <dialog> уже дружит с screen readers — Браузер сам обрабатывает фон и клавишу Esc для закрытия окна — Модальные окна (уведомления, формы, подтверждения) — Быстрые прототипы без лишнего JS

📌 Если вам не нужно сложное оформление и анимации, то <dialog> идеально подходит для реализации модальных окон с минимальными усилиями. Код при этом минималистичен. Конечно, для более сложных задач и дизайнов без дополнительных стилей и JavaScript не обойтись, но для простых задач пойдет. 🚪 Frontender's notes

Встречайте новый дата-центр SOTEL III в Москве! Это не просто ЦОД — это площадка для вашего бизнеса с максимальной надёжностью, безопасностью и выгодой. Что мы предлагаем: • Колокейшн от 1U и аренду стоек. Бронирование со спеццсловиями уже открыто. • Облачные сервисы со скидкой до 20%. • Виртуальная АТС и услуги связи. • Проектирование, монтаж и обслуживание инженерных систем. • IT- и инженерные решения: СКУД, видеонаблюдение, пожарная безопасность. Только сейчас: раннее бронирование мест в новом ЦОД на особых условиях. Скидка 10% на все услуги (кроме облака и колокейшн) по промокоду сотелбонуc для новых клиентов. Подключайтесь первыми и получите больше! Открытие запланировано в 2025 году. Узнать больше #реклама 16+ sotel.su О рекламодателе

👩‍💻 Реализация интерактивной карты Наглядный пример того, как с помощью JS API можно создавать нестандартные интерактивные карты. Яндекс Еда опубликовала исследование самых характерных блюд в городах в России и для визуализации использовала решение от API Яндекс Карт. Оно удобно тем, что позволяет легко и быстро настраивать цвета и детальность карты, убирать или добавлять нужную информацию. Читать...

🎯 Ставь цели на день через "3 приоритета" Начал день с длинного списка задач, а к вечеру понял, что толком ничего не сделал? Это классический перегруз. 👉 Совет: каждое утро выделяй три главных задачи на день — именно те, что реально сдвинут твои дела вперёд. Всё остальное — бонусы. Такая простая фокусировка помогает делать важное, а не тонуть в рутине.

Как оживить формы на сайте без фреймворков? Хотите понять, как чистый JavaScript превращает скучные поля в динамичные интерфейсы? 📅 22 сентября в 20:00 МСК на открытом уроке мы разберём, как добавить в анкету динамические поля, условия показа, счётчики и реакцию на ввод — без React и Vue. Вы увидите, как одна функция может управлять доступностью кнопки и менять структуру DOM в реальном времени. ❗️ Прямо в ходе вебинара создадим интерактивную анкету с радиокнопками, чекбоксами и текстовыми областями, освоим псевдо-отправку и научимся чистому, понятному коду. Спикер продемонстрирует лучшие практики обработки форм и покажет, как без лишнего «кода-шума» добиться гибкости. 👉 Посетите урок и получите скидку на курс «JavaScript Developer. Basic» → https://vk.cc/cPB67z Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

🤔 Разбираемся с цветами: пространства, иллюзии и квантование Статья исследует природу цвета, его восприятие и обработку. Рассмотрим дискретизацию, цветовые модели, пространство и причины несоответствия при передаче изображений. Узнайте, что скрывается за HEX-кодами. Читать...

⚙️ Что такое AbortController в JavaScript и зачем он используется? AbortController — это API, который позволяет отменять асинхронные операции, такие как запросы fetch. Это полезно для предотвращения утечек ресурсов и отмены операций, которые больше не нужны. ➡️ Пример:

const controller = new AbortController();
const signal = controller.signal;

// Отправляем запрос с возможностью отмены
fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Запрос был отменён');
    } else {
      console.error(err);
    }
  });

// Отмена запроса через 500 мс
setTimeout(() => controller.abort(), 500);

🗣️ В этом примере AbortController отменяет запрос через 500 мс. Это позволяет избежать обработки ненужных данных, если, например, пользователь покинул страницу или отменил действие.

🖥 Подробнее тут

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

⚙️ 9 open source библиотек для вашего следующего проекта Разработчики часто сталкиваются с выбором, какие инструменты использовать для своего следующего проекта. Даже если вы серьёзно настроены на разработку продукта, проблема остаётся той же. В этой статье я расскажу о 9 библиотеках с открытым исходным кодом, которые улучшат ваш проект. Читать...

📈 Подборка статей для вашей карьеры • Как сделать резюме, которое дойдёт до работодателя. Фильтры ATS в 2025 году • Ошибайся смело: жизненные уроки из мира machine learning • Как учиться во взрослом возрасте: 7 советов, проверенных на практике • Нейросети, чат-бот и диджитал-адаптация: цифровые инструменты внутрикома • Долгосрочная стабильность vs. карьерная мобильность

⚙️ Кнопки с несколькими состояниями Как правило, кнопки либо нажаты, либо нет. Но при условии, что обеспечена доступность, можно сделать группу радиокнопок внешне похожей на кнопку с несколькими состояниями с помощью CSS-хитростей. Читать...

В канале Selectel Newsfeed новые бесплатные курсы! Наши бесплатные курсы для специалистов всех уровней помогут разобраться в темах быстро, структурно и последовательно. Вступайте в сообщество IT-специалистов в Telegram от Selectel и развивайте новые навыки📚 Смотреть #реклама 16+ О рекламодателе

👩‍💻 Простой калькулятор с динамическим вводом Создайте калькулятор, который позволяет выполнять основные арифметические операции (сложение, вычитание, умножение, деление). Пользователь вводит два числа и выбирает операцию из выпадающего списка. Результат отображается автоматически. Требования: • Два текстовых поля для ввода чисел. • Выпадающий список для выбора операции. • Динамическое отображение результата при изменении любого из входных значений. Решение задачи🔽

<div> <input type="number" id="num1" placeholder="Введите первое число"> <select id="operation"> <option value="add">+</option> <option value="subtract">-</option> <option value="multiply">×</option> <option value="divide">÷</option> </select> <input type="number" id="num2" placeholder="Введите второе число"> </div> <div> <h3>Результат: <span id="result">0</span></h3> </div> const num1 = document.getElementById('num1'); const num2 = document.getElementById('num2'); const operation = document.getElementById('operation'); const result = document.getElementById('result'); function calculate() { const value1 = parseFloat(num1.value) || 0; const value2 = parseFloat(num2.value) || 0; let res = 0; switch (operation.value) { case 'add': res = value1 + value2; break; case 'subtract': res = value1 - value2; break; case 'multiply': res = value1 * value2; break; case 'divide': res = value2 !== 0 ? value1 / value2 : 'Ошибка (деление на 0)'; break; } result.textContent = res; } [num1, num2, operation].forEach(element => { element.addEventListener('input', calculate); });

👩‍💻 CSS :has() — Псевдокласс, который давно ждали Преобразуйте свой CSS с помощью псевдокласса :has(), позволяющего стилизовать элементы на основе их дочерних элементов. Читать...

REKONFA Live 6 ноября приглашаем рекламодателей, агентства и рекламные площадки обсудить технологии, маркетинговые инструменты и актуальные новинки. Ключевые участники рынка поделятся опытом и расскажут: — О ситуации на рынке рекламы — Как продвигать и продавать в интернете в 2025 году — Как бизнесу адаптироваться к меняющимся условиям Вас ждут доклады на актуальные темы, классный нетворкинг, вдохновляющая атмосфера для творчества и креатива. Встречаемся 6 ноября в Москве. Для тех, кто не сможет приехать, организуем интерактивное digital-шоу. Мероприятие бесплатное, нужно только зарегистрироваться. Зарегистрироваться #реклама 18+ ya.rekonfa.ru О рекламодателе

⚙️ В чем разница между == и === в JavaScript? В JavaScript операторы == и === используются для сравнения, но ведут себя по-разному. == выполняет нестрогое сравнение, при котором JavaScript может преобразовать типы данных для сопоставления значений. В отличие от него, === выполняет строгое сравнение, проверяя как значение, так и тип данных, без приведения типов. ➡️ Пример:

console.log(5 == '5');   // true, так как '5' преобразуется к числу
console.log(5 === '5');  // false, так как разные типы данных

console.log(null == undefined);  // true, при нестрогом сравнении они считаются равными
console.log(null === undefined); // false, строгий оператор учитывает типы данных

🗣️ Использование === рекомендуется для избегания ошибок, связанных с преобразованием типов. Это помогает сделать код более предсказуемым и читаемым.

🖥 Подробнее тут

👩‍💻 Cube & Dots Loader Анимированная загрузка в виде точек и куба. Сделана на чистом CSS. Открыть код...

👩‍💻 Таймер обратного отсчёта Создайте простую страницу с таймером обратного отсчёта. Пользователь вводит количество секунд, нажимает кнопку "Старт", и таймер начинает обратный отсчёт до нуля. После окончания таймера на экране отображается сообщение "Время вышло!". Решение задачи🔽

<input type="number" id="timeInput" placeholder="Введите секунды"> <button id="startButton">Старт</button> <div id="timer">0</div> const input = document.getElementById('timeInput'); const button = document.getElementById('startButton'); const timerDisplay = document.getElementById('timer'); let timerId; button.addEventListener('click', () => { const seconds = parseInt(input.value, 10); if (isNaN(seconds) || seconds <= 0) { timerDisplay.textContent = 'Введите корректное число!'; return; } clearInterval(timerId); let remainingTime = seconds; timerDisplay.textContent = remainingTime; timerId = setInterval(() => { remainingTime -= 1; if (remainingTime <= 0) { clearInterval(timerId); timerDisplay.textContent = 'Время вышло!'; } else { timerDisplay.textContent = remainingTime; } }, 1000); });

Бесплатный живой вебинар - "Визуал который продает" 💰Как слайды превращаются в деньги? Узнай, как дизайн презентаций помогает зарабатывать фрилансерам, экспертам и бизнесу! 📅 Старт бесплатного интенсива - 15 сентября в 16:00 по МСК ⚡ Что разберём? - Почему визуал решает — и как влияет на деньги - Как делать слайды, которые продают - Заработок на презентациях с нуля ✨ Кому подойдет? - Новичкам в дизайне - Тем, кто хочет освоить дизайн презентаций - Мечтающим о удалённой профессии - Желающим прокачать креативность 📊 Что вас ждёт? - Знакомство с дизайном слайдов - Удобный онлайн-формат - Много практики + обратная связь Не упусти шанс превратить дизайн в доход - Регистрируйся! Зарегистрироваться #реклама 16+ ed.bonnieandslide.com О рекламодателе

🛡 Парольная защита статичной HTML-страницы на JS Как защитить веб-страницы паролем без серверной поддержки? Инструменты StatiCrypt и Portable Secret помогут зашифровать HTML с использованием AES-256. Статические страницы остаются безопасными даже на публичном хостинге. Читать...