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

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

<button class="ripple-button">Нажми меня</button> .ripple-button { position: relative; overflow: hidden; padding: 10px 20px; font-size: 16px; color: white; background-color: #007BFF; border: none; border-radius: 4px; cursor: pointer; } .ripple-button .ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: ripple-animation 0.6s linear; background-color: rgba(255, 255, 255, 0.6); } @keyframes ripple-animation { to { transform: scale(4); opacity: 0; } } document.querySelector('.ripple-button').addEventListener('click', function (event) { const ripple = document.createElement('span'); const rect = this.getBoundingClientRect(); ripple.style.width = ripple.style.height = `${Math.max(rect.width, rect.height)}px`; ripple.style.left = `${event.clientX - rect.left - ripple.offsetWidth / 2}px`; ripple.style.top = `${event.clientY - rect.top - ripple.offsetHeight / 2}px`; ripple.className = 'ripple'; this.appendChild(ripple); ripple.addEventListener('animationend', () => ripple.remove()); });

👩‍💻 Стрелочная функция vs. обычная функция в JavaScript Статья раскрывает ключевые отличия между стрелочными и обычными функциями в JavaScript, объясняя их влияние на выполнение кода. Рассматриваются ситуации, в которых предпочтителен каждый тип функций. Читать...

Курс «Разработчик 1С» от Яндекса. За 6 месяцев освоите один из самых простых языков программирования и пройдёте стажировку Зарегистрироваться #реклама 16+ practicum.yandex.ru О рекламодателе

🔝 Самые интересные статьи за последние дни: • DRY-фреймворк: продолжение • Как нарисовать квадрат 3 × 3 см на веб-странице* • Скучный Интернет и как «бесполезные сайты» могут спасти от этого • Простой мини-чат на FastApi: Современный интерфейс, вебсокеты и SQLAlchemy с деплоем • Как мотивировать себя на правильные вещи

👩‍💻 Динамический поиск в списке Создайте текстовое поле и список элементов. При вводе текста в поле должны отображаться только те элементы списка, которые содержат введённый текст. Ожидаемое поведение: • При вводе текста список фильтруется по введённым данным. • Поиск нечувствителен к регистру. • Если текстовое поле пустое, отображается весь список. Решение задачи🔽

<input type="text" id="searchInput" placeholder="Введите текст для поиска"> <ul id="itemList"> <li>Apple</li> <li>Banana</li> <li>Orange</li> <li>Grapes</li> <li>Peach</li> </ul> const searchInput = document.getElementById('searchInput'); const itemList = document.getElementById('itemList'); const items = itemList.getElementsByTagName('li'); searchInput.addEventListener('input', () => { const filter = searchInput.value.toLowerCase(); Array.from(items).forEach((item) => { const text = item.textContent.toLowerCase(); item.style.display = text.includes(filter) ? '' : 'none'; }); });

👩‍💻 Паттерны для эффективного манипулирования DOM с ванильным JavaScript В руководстве рассматриваются такие шаблоны работы с DOM на JavaScript, как выбор правильного querySelector, кэширование элементов и улучшение обработки событий. Читать...

VisGPT — твой личный суперпомощник! 👌😊 20+ нейросетей для любых задач: Написание текстов Создание картинок Анализ данных Помощь с кодом Генерация идей 👍 Преимущества VisGPT Всё в одном приложении Без VPN и сложных настроек Удобная оплата в рублях Доступные тарифы Поддержка 24/7 💰 Специальное предложение: Годовая подписка со скидкой 20% Начни использовать прямо сейчас: Начать #реклама 16+ ai.vis.center О рекламодателе

🔎 Подборка зарубежных вакансий Tech Lead (PHP) 🟢PHP, Symfony, Laravel, микросервисная архитектура, Golang, Python 🟢Уровень дохода не указан | более 6 лет опыта Team Lead Frontend (Vue.js / Nuxt.js) 🟢Vue.js, Nuxt.js, JavaScript, PWA, Vuetify, CSS3, HTML5, SASS, SCSS, Bootstrap, RESTful API, WebSocket, TypeScript, Webpack 🟢Уровень дохода не указан | более 6 лет опыта Junior Frontend Developer 🟢Angular 14+, TypeScript, SCSS, HTML, REST APIs, Web Components, Yarn, Webpack 🟢Уровень дохода не указан | 1–3 года опыта

🕵️ Знай систему на уровне зависимостей Работаешь с проектом, где используется миллион библиотек и фреймворков? Когда что-то ломается, найти виноватого становится задачей. 👉 Совет: выдели время, чтобы разобраться в основных зависимостях проекта. Проверь, какие библиотеки действительно нужны, а какие можно заменить или убрать. Понимание связей между компонентами сделает тебя настоящим мастером проекта.

✔️ Современные способы переключения контента В статье обсуждаются современные подходы к переключению контента в вебе. Рассматриваются нативные API, их преимущества, недостатки и неожиданные особенности, включая работу с псевдоэлементами. Читать...

Профильная Flutter-конференция 21 февраля в Москве пройдёт конференция для Flutter-разработчиков. Приглашаем участников и спикеров. 1 день и 2 потока докладов от экспертов индустрии. Кейсы от ведущих агентств. Круглый стол. Активный нетворкинг. Афтепати в завершении дня. Программа и билеты на сайте. Узнать больше #реклама flutterconf.ru О рекламодателе

⚙️ PHP 8.4: exit/die изменены из языковых конструкций в функции Ключевое слово exit и его псевдоним die — языковые конструкции, выводящие сообщение и завершающие текущий сценарий. В CLI-приложениях exit/die можно использовать для завершения работы приложения с заданным кодом выхода. Читать...

👩‍💻 Что такое Grid Layout в CSS и как он работает? CSS Grid Layout — это мощная система для создания сеточных макетов на веб-страницах. Она позволяет легко размещать элементы на странице в виде строк и столбцов с минимальным количеством кода. Grid обеспечивает точное позиционирование и гибкость, идеально подходя для сложных макетов. ➡️ Пример:

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Три равных столбца */
    gap: 10px; /* Расстояние между элементами */
  }
  .item {
    background: lightblue;
    padding: 20px;
    text-align: center;
  }
</style>

🗣️ В этом примере .grid-container создает сетку с тремя столбцами одинаковой ширины. Свойство gap добавляет отступы между элементами. Grid Layout упрощает создание адаптивных макетов.

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

👩‍💻 Всё ли ты знаешь о работе с асинхронностью? Думаете, что знаете вообще все об асинхронности в JavaScript? Уверены, что так оно и есть. Но проверить свои знания никогда не помешает — для этого как раз собрали эту небольшую викторину. Читать...

📈 Подборка статей для вашей карьеры • В какой момент профессия программиста свернула не туда? • Офис Intel в Израиле отменил бесплатный кофе • Войти в IT – в 37 и с дипломом филфака • Путь к мастерству: Как стать успешным разработчиком • Галера от HH или джуны по-дешевке

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка для вас и 3-х ваших близких 30 дней бесплатно. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте сейчас❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе

📝 Подборка вакансий для сеньоров Middle+/Senior Frontend developer (СберНПФ) • Angular, TypeScript, JavaScript, Node.js, PostgreSQL, Apache Kafka, REST • Уровень дохода не указан | от 3 лет опыта Frontend-разработчик Angular (middle+/senior) • Angular, JavaScript, HTTP, REST API, Agile, CI/CD, NGINX, Unit-тестирование • Уровень дохода не указан | от 3 лет опыта Fullstack Typescript Developer [Senior] • TypeScript, Node.js, React, SQL, Kubernetes, Docker • Уровень дохода не указан | от 4 лет опыта

👩‍💻 Scroll-Driven Dock Настраиваемая панель инструментов. Сделана на SVG, CSS и JavaScript. Открыть код...

Научим детей программировать игры на С++. Бесплатно! Мастер-класс для школьников 6-11 классов! За 1.5 часа ребёнок с нуля создаст свою первую компьютерную игру и сможет использовать полученные знания в дальнейшем! Педагоги Университета Иннополис покажут Вашему ребёнку, как можно с пользой проводить время за компьютером и как хобби в виде разработки приложений или игр может стать будущей профессией или интересной подработкой уже в школе. Регистрируйтесь на бесплатный мастер-класс. Количество мест ограничено. Не упустите шанс подарить ребенку уникальные знания от самых лучших педагогов ведущего ИТ-ВУЗа страны! Зарегистрироваться #реклама 16+ progmatica.innopolis.university О рекламодателе

👩‍💻 Масштабируемый CSS с архитектурой ITCSS Статья рассказывает об архитектуре Inverted Triangle CSS, которая помогает масштабировать и поддерживать крупные CSS проекты. Обсуждаются причины выбора, пошаговая реализация и сравнение с другими подходами. Читать...