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

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

Читать...

⚙️ Что такое 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, улучшая производительность.

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

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

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

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

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

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

Читать...

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

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

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

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

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

<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');
}

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

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

Читать...

👩‍💻 Sphere Packing

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

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

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

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

Читать...

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

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

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';
}
});

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

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

Читать...

👩‍💻 Playbook CSS scroll animation w/ subgrid

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

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

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

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

Читать...

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

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

Читать...

👩‍💻 Переключение видимости пароля

Создайте поле для ввода пароля и кнопку "Показать/Скрыть". При нажатии на кнопку символы пароля должны переключаться между скрытым (type="password") и видимым (type="text") состоянием.

Требования:

• Кнопка переключает тип поля ввода пароля между "password" и "text".
• Текст кнопки меняется в зависимости от текущего состояния видимости пароля.

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

<input type="password" id="password" placeholder="Введите пароль">
<button id="toggleBtn">Показать</button>

const password = document.getElementById('password');
const toggleBtn = document.getElementById('toggleBtn');

toggleBtn.addEventListener('click', () => {
const isHidden = password.type === 'password';
password.type = isHidden ? 'text' : 'password';
toggleBtn.textContent = isHidden ? 'Скрыть' : 'Показать';
});

⚙️ Как устроен Next.js: разбираем ключевые особенности фреймворка на примере небольшого pet-проекта

Статья знакомит с фреймворком Next.js, рекомендованным командой React для новых проектов. На примере pet-проекта рассматриваются базовые возможности и преимущества использования Next.js.

Читать...

👩‍💻 Confetti Button

Кнопка с вылетающими конфетти при нажатии. Сделана на CSS и JavaScript.

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

⚙️ Что такое event delegation в JavaScript и зачем его использовать?

Event delegation — это техника, позволяющая обрабатывать события на родительском элементе вместо установки обработчиков на каждый дочерний элемент. Это особенно полезно, если дочерние элементы динамически добавляются или их много.

➡️ Пример:

// Родительский элемент
const parent = document.querySelector('#parent');

// Используем делегирование
parent.addEventListener('click', (event) => {
  if (event.target.matches('.child')) {
    console.log(`Клик по элементу: ${event.target.textContent}`);
  }
});

// Динамическое добавление дочерних элементов
const newChild = document.createElement('div');
newChild.className = 'child';
newChild.textContent = 'Новый элемент';
parent.appendChild(newChild);

🗣️ В этом примере обработчик событий на родительском элементе обрабатывает клики по дочерним элементам, включая добавленные динамически. Это упрощает код и повышает производительность.

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

👩‍💻 Как мы мигрируем с JQuery на React

Обсуждаем миграцию с jQuery на React. В статье — реальный опыт, причины перехода, основные шаги и способы преодоления сложностей.

Читать...

👩‍💻 Фильтрация списка через поле ввода

Создайте поле ввода и список элементов. При вводе текста в поле должны отображаться только те элементы списка, которые содержат введённый текст. Игнорируйте регистр символов.

Требования:

• При вводе текста выполняется фильтрация: сравниваем введённую строку с каждым элементом списка.
• Элементы, соответствующие фильтру, остаются видимыми, остальные скрываются.

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

<input type="text" id="filterInput" placeholder="Фильтр...">
<ul id="items">
<li>Яблоко</li>
<li>Банан</li>
<li>Апельсин</li>
<li>Груша</li>
</ul>

const input = document.getElementById('filterInput');
const listItems = document.querySelectorAll('#items li');

input.addEventListener('input', () => {
const filter = input.value.toLowerCase();
listItems.forEach(li => {
li.style.display = li.textContent.toLowerCase().includes(filter) ? '' : 'none';
});
});

👩‍💻 Новые возможности CSS за 2024 год

Центрирование без боли, улучшенный тёмный режим, анимация скрытых элементов и даже решения математических задач — меньше сложностей, больше возможностей.

Читать...

👩‍💻 Broken Glass Effect

Сцена с эффектом сломанного стекла в месте клика. Сделана на CSS и JavaScript.

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