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

👩‍💻 Confetti Button Кнопка с вылетающими конфетти при нажатии. Сделана на CSS и JavaScript. Открыть код...

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

🚀Нужны качественные ноды для работы? 📌У нас лучшие цены на рынке! 📌Безлимитные запросы! 📌Выделенные ноды от 87$ 📌Shared - 50$ за 1шт 📌Работайте с комфортом! Бот для покупки лучших нод - @Flash_Node_bot Контакт поддежки - https://t.me/Flash_Node_support Если нужной ноды не нашлось в нашем боте - напишите в поддержку мы установим ее для вас Напишите в поддержку что вы от "xCode" и получите 30% скидку на первый заказ!

👩‍💻 Переключение видимости пароля Создайте поле для ввода пароля и кнопку "Показать/Скрыть". При нажатии на кнопку символы пароля должны переключаться между скрытым (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 ? 'Скрыть' : 'Показать'; });

Tilda + AI — бесплатный интенсив в Школе Тильды Показываем, как вместе с ИИ-помощником Тильды быстро сделать качественный лендинг от идеи до ссылки в интернете Вместе с продающией структурой, нормальным текстом и приятным дизайном. А еще навигацией, формами и всеми настройками, чтобы получать заявки. ✅ Уроки выходят с 8 по 11 сентября ✅ Все промты отдадим ✅ Будет практическое задание ✅ И поддержка кураторов в чате ✅ Это бесплатно Нажмите «Записаться», чтобы участвовать Записаться #реклама 16+ tilda.school О рекламодателе

Хотите научиться создавать привлекательные карточки товара без Bootstrap и готовых шаблонов? 📅 9 сентября в 20:00 МСК на открытом уроке мы разберём, как из базовых тегов и CSS-свойств собрать мини-проект, достойный портфолио. Вы увидите, как блок <article> превратить в интерактивную витрину: текст, изображение, кнопка «Купить» и эффекты при наведении. ❗️ Вы поймёте, какие CSS-свойства (margin, padding, background-color, border) отвечают за композицию, а :hover добавит лёгкую анимацию при наведении. В реальном времени создадим карточку, применим шрифты, цвета и узнаем, как обеспечить кросс-браузерность без библиотек и фреймворков. Урок проходит в преддверие старта курса «JavaScript Developer. Basic» и все участники получат скидку на обучение. 👉 Запишитесь на открытый урок → https://vk.cc/cPdXY6 Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

➡️ 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 переменные можно использовать, чтобы сделать цвета темнее, когда они отображаются на светлом фоне, и светлее, когда они отображаются на тёмном, что делает их более яркими в обоих случаях. Читать...