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

➡️ Frontend в 2025 году: тренды, которые изменят разработку

В этой статье мы подводим итоги 2024 года и делимся нашими прогнозами на 2025 год. Приводим мнение трех экспертов по ключевым трендам фронтенд‑разработки и фреймворков, которые будут актуальными в следующем году.

Читать...

➡️ Разбираем стандарты нейминга на примерах

Статья рассматривает случаи стандартизированного нейминга переменных и функций. Примеры сгруппированы по категориям для лучшей наглядности и помогут улучшить читаемость и согласованность кода.

Читать...

👩‍💻 Playbook CSS scroll animation w/ subgrid

Сцена с интересной реализацией анимированного скролла. Сделана на Svg, CSS и JavaScript.

Открыть код...

🤔 Народный браузер — каким он мог бы быть?

Статья раскрывает идеи и обсуждения, связанные с развитием сборки Хромиума Ultimatum. Автор стремится понять реальные запросы пользователей и обсудить востребованные функции.

Читать...

👩‍💻 Валидация формы с обратной связью

Создайте форму с одним полем ввода для имени и кнопкой "Отправить". При отправке формы выполните следующие условия:

1. Если поле пустое, отобразите сообщение об ошибке под полем.
2. Если поле заполнено, отобразите сообщение "Форма успешно отправлена!".
3. Сообщение об ошибке исчезает при вводе текста.

Решение задачи🔽

<form id="myForm">
<input type="text" id="nameInput" placeholder="Введите имя" />
<button type="submit">Отправить</button>
<p id="error" style="color: red; display: none;">Поле не должно быть пустым</p>
</form>
<p id="success" style="color: green; display: none;">Форма успешно отправлена!</p>

const form = document.getElementById('myForm');
const nameInput = document.getElementById('nameInput');
const error = document.getElementById('error');
const success = document.getElementById('success');

form.addEventListener('submit', (e) => {
e.preventDefault();
if (nameInput.value.trim() === '') {
error.style.display = 'block';
success.style.display = 'none';
} else {
error.style.display = 'none';
success.style.display = 'block';
nameInput.value = '';
}
});

nameInput.addEventListener('input', () => {
if (nameInput.value.trim() !== '') {
error.style.display = 'none';
}
});

🗓 Как написать Google Calendar на коленке? Обзор FullCallendar

Статья рассказывает о создании раздела с календарем и задачами с использованием библиотеки FullCalendar. Разбираются её возможности, преимущества и опыт интеграции для внутренних проектов.

Читать...

👩‍💻 Sphere Packing

Интерактивная сцена с шарами. Сделана на CSS и JavaScript.

Открыть код...

⚙️ Ultimatum — еще один форк хромиума, с претензией…

Статья анонсирует сборку браузера Chromium — Ultimatum. Браузер обходит техники трекинга, позволяет устанавливать расширения с любых сайтов и перехватывать сетевые запросы для их полной подмены.

Читать...

👩‍💻 Модальное окно с закрытием по кнопке и фону

Создайте модальное окно, которое открывается при клике на кнопку и закрывается при клике на кнопку закрытия или на фон вокруг модального окна.

Ожидаемое поведение:

• При клике на кнопку "Открыть модальное окно" появляется модальное окно.
• Модальное окно закрывается при клике на кнопку "Закрыть" или на затемнённый фон.
• Фон страницы не прокручивается, пока открыто модальное окно.

Решение задачи🔽

<button id="openModal">Открыть модальное окно</button>

<div id="modal" class="modal">
<div class="modal-content">
<span id="closeModal" class="close-button">&times;</span>
<p>Это модальное окно</p>
</div>
</div>

body.modal-open {
overflow: hidden;
}

.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}

.modal-content {
background: white;
padding: 20px;
border-radius: 8px;
position: relative;
}

.close-button {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
}

const openModalBtn = document.getElementById('openModal');
const closeModalBtn = document.getElementById('closeModal');
const modal = document.getElementById('modal');
const body = document.body;

openModalBtn.addEventListener('click', () => {
modal.style.display = 'flex';
body.classList.add('modal-open');
});

closeModalBtn.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => {
if (e.target === modal) closeModal();
});

function closeModal() {
modal.style.display = 'none';
body.classList.remove('modal-open');
}

👩‍💻 CSS в React: сравниваем 5 подходов к стилизации

Стилизация React-приложений может быть сложной задачей: существует множество подходов, и выбор подходящего способа влияет на удобство разработки, производительность приложения и легкость управления кодом. Разберем основные методы стилизации, их преимущества и недостатки.

Читать...

🕹 Игра в дедлайны

Заметил, что работаешь быстрее, когда сроки поджимают? Это не магия — это фокусировка.

👉 Совет: попробуй метод «искусственного дедлайна». Установи себе собственные сроки на задачу, которые короче официальных. Например, если дедлайн через неделю, заверши всё за три дня. Так ты освободишь время на проверку, улучшения или форс-мажоры.

⚙️ Что такое Intersection Observer в JavaScript и зачем он используется?

Intersection Observer — это API, которое позволяет отслеживать, когда элемент появляется или исчезает из области видимости (viewport). Он полезен для ленивой загрузки изображений, бесконечной прокрутки и анимаций при прокрутке.

➡️ Пример:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Элемент видим:', entry.target);
    }
  });
});

// Наблюдаемый элемент
const target = document.querySelector('.observe-me');
observer.observe(target);

🗣️ В этом примере Intersection Observer отслеживает элемент .observe-me и выполняет код, когда элемент появляется в области видимости. Это позволяет избежать постоянного использования события scroll, улучшая производительность.

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

➡️ Выкинь свой RoadMap: что на самом деле нужно знать начинающему фронтендеру

Сколько бы раз я ни смотрел RoadMap для начинающих фронтендеров, всегда натыкаюсь на одну проблему: RoadMap, как правило, — просто свалка технологий, которую можно описать одной фразой: "Учи всё, что есть". Но так ли это? Нужно ли учить всё это в самом начале? Давайте отбросим большую схему с технологиями в сторону и поговорим начистоту.

Читать...

👩‍💻 Настройка одного набора цветов для светлого и тёмного режимов

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

Читать...

👩‍💻 Как реализовать наследование в JavaScript: 7 способов

Исчерпывающий гайд по всем существующим способам организации наследования в JavaScript. Разберем сильные и слабые стороны каждого подхода и научимся выбирать оптимальный метод для твоих задач.

Читать...

🔝 Самые интересные статьи за последние дни:

• OAuth 2.0, OpenID Connect и SSO для самых маленьких

• 250 000 товаров и миллионы характеристик: как мы скрестили Битрикс с Symfony и MongoDB

• JavaScript-фреймворки и библиотеки, на которые стоит обратить внимание в 2025 году

• Onlyoffice и Р7 офис: макросы на Javascript (туториал)

• Призываю переименовать Layers в Feature-Sliced Design методологии

👩‍💻 Эксперимент: Автоматическое включение View Transitions с MutationObserver

Вместо того чтобы добавлять document.startViewTransition в различные места JS, используйте MutationObserver, следящий за мутациями DOM. В обратном вызове Observer'а отмените исходную мутацию и примените её снова, но на этот раз обернув во View Transition.

Читать...

⚙️ Предзагрузка отзывчивых изображений

Статья объясняет, как правильно предзагружать отзывчивые изображения, чтобы ускорить загрузку страниц. Рассматривается взаимодействие предзагрузки с решениями браузера для выбора изображений под устройство.

Читать...

👩‍💻 Обзор наследования в JavaScript

Статья изучает различные шаблоны наследования в JavaScript, основанные на прототипах. Обсуждаются их преимущества и применение в зависимости от задач для оптимального управления объектными отношениями.

Читать...

👩‍💻 Реализация кнопки с таймером блокировки

Создайте кнопку, которая становится недоступной (disabled) на 5 секунд после каждого нажатия. Отображайте обратный отсчёт времени на кнопке, чтобы пользователь видел, когда её можно будет нажать снова.

Ожидаемое поведение:

• При нажатии на кнопку она становится недоступной.
• На кнопке отображается обратный отсчёт времени: 5... 4... 3....
• Через 5 секунд кнопка снова становится активной и текст возвращается в исходное состояние.

Решение задачи🔽

<button id="timer-button">Нажми меня</button>


#timer-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}

#timer-button:disabled {
background-color: #ccc;
cursor: not-allowed;
}


const button = document.getElementById('timer-button');

button.addEventListener('click', () => {
let countdown = 5;

// Деактивируем кнопку и запускаем таймер
button.disabled = true;
const interval = setInterval(() => {
button.textContent = `Ждите... ${countdown}`;
countdown--;

if (countdown < 0) {
clearInterval(interval);
button.disabled = false;
button.textContent = 'Нажми меня';
}
}, 1000);
});