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

👩‍💻 10 лучших CSS-библиотек и фреймворков для быстрой разработки фронтенда Запутался в CSS-фреймворках? Мы собрали ТОП-10 самых крутых инструментов, которые реально экономят время на фронтенде. От тяжеловеса Bootstrap до минималистичного Milligram – разобрали плюсы каждого и объяснили, когда что использовать. Читать...

👩‍💻 Signature animation Поле для ввода подписи с интересной анимацией. Сделана на SVG, CSS и JavaScript. Открыть код...

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

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

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

Мечтаете о карьере в перспективной digital-сфере? Получите высшее образование в Московском технологическом институте и станьте востребованным специалистом. 💻 Обучение проходит 100% онлайн — идеально, чтобы совмещать с текущей работой и плавно перейти в новую профессию. Вы получите: — Диплом государственного образца — Практические знания от экспертов — Возможность учиться в комфортном для вас темпе ⚡ Специальное предложение: скидка 10% при оплате года обучения. Узнать больше #реклама 16+ mti-education.ru О рекламодателе

👩‍💻 7 советов по очистке кода React В этой статье собраны семь практических рекомендаций, помогающих создавать чистый и поддерживаемый код React. Читать...

👩‍💻 Центрирование текста внутри блока Создайте квадратный блок фиксированного размера, внутри которого текст должен быть идеально выровнен по центру, как по вертикали, так и по горизонтали. Ожидаемое поведение: • Блок имеет фиксированные размеры: 200px на 200px. • Текст находится в центре блока. Решение задачи🔽

<div class="centered-block"> Центрированный текст </div> .centered-block { width: 200px; height: 200px; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; text-align: center; border: 1px solid #ccc; }

👩‍💻 Эта информация навсегда изменит ваше отношение к коду JavaScript К концу этой статьи вы превратитесь из простого пользователя JavaScript в того, кто глубоко его понимает и кого не удивляют его уникальные возможности. Это открытие расширит ваши знания и навыки, а также позволит использовать такие "фишки" JS, которых нет в других популярных языках. Читать...

👩‍💻 Всем программистам посвящается! Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования: Выбирай своё направление: 👩‍💻 Python — t.me/python_ready 🤔 InfoSec & Хакинг — t.me/hacking_ready 🖥 SQL & Базы Данных — t.me/sql_ready 🤖 Нейросети — t.me/neuro_ready 👩‍💻 C/C++ — https://t.me/cpp_ready 👩‍💻 C# & Unity — t.me/csharp_ready 👩‍💻 Java — t.me/java_ready 👩‍💻 Linux — t.me/linux_ready 🖼️ DevOps — t.me/devops_ready 📖 IT Книги — t.me/books_ready 👩‍💻 Frontend — t.me/frontend_ready 📱 JavaScript — t.me/javascript_ready 👩‍💻 Backend — t.me/backend_ready 📱 GitHub & Git — t.me/github_ready 👩‍💻 Весь IT — t.me/it_ready 👩‍💻 Bash & Shell — t.me/bash_ready 🖥 Design — t.me/design_ready 📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

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

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

🔥 Когда код — это квест без подсказок Погружаешься в проект, а там — ни документации, ни комментариев. Читаешь код, как древний манускрипт, пытаясь понять, что вообще происходит. Итог: потраченное время и нервы. Сделай первый шаг к порядку: записывай всё, что сам понял, в понятной форме. Даже небольшие заметки спасут тебя (и команду) в будущем. Документация — это не для галочки, это ускоритель работы.

👩‍💻 Ошибки при работе с tailwindcss Рассмотрим распространенные ошибки которые допускают разработчики при работе с tailwind и пути их решения. Читать...

Как frontend-разработчику получить оффер в Bigtech? Ты уже давно в профессии, но до сих пор в компании, которая тебя не ценит. Зарплата не растёт, задачи скучные. Хочешь сменить работу, но технические собеседования всё сложнее, а на отклики на hh только отказы и тестовые? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK, Т-Банк. Хочется стабильности, интересных задач и наконец-то попасть в сильную команду...

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроиться на хорошие позиции в Bigtech и сопровождаю на испытательном сроке.

На своем канале: 👉публикую видео с решением задач, которые прямо сейчас дают крупные компании на собеседованиях 👉даю примеры по прохождению собеседований 👉разбираю резюме и докручиваю резюме подписчиков 👉И просто создаю дружелюбное, комфортное сообщество, где коллеги всегда готовы подсказать и поддержать вас 🎁В закрепе тебя ждёт подборка из 60 задач, которые сейчас дают на собеседованиях Яндекс, Т-Банк и другие крупные IT игроки. Подписывайся и получай максимум пользы, а нас уже больше 3500 🤓: frontend_punks Реклама, erid : 2W5zFGotEc8 ИП Галактионов Тихон Витальевич, ИНН 771618975809

📉 Брейншторм без ограничений — бесполезен Когда можно всё, не получается ничего конкретного. Генерить идеи без рамок — значит тонуть в абстракции. 👉 Совет: вводи ограничения. Например: решение должно поместиться в 100 строк, не трогать базу, быть протестировано за час. Жёсткие рамки рождают лучшие идеи. Удобство — во фрейме, не в хаосе.

👩‍💻 Что такое 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 упрощает создание адаптивных макетов.

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

FrontendConf 2025 - крупнейшая в России профессиональная конференция фронтенд‑разработчиков пройдет 20–21 октября 2025, Москва, Кластер «Ломоносов». Что будет на конференции: • 1000+ представителей российского фронтенд‑сообщества; • 2 дня насыщенной программы: 55 докладов в 8 ключевых секциях (AI во фронтенде, Архитектура, Производительность, Инженерный UX, Культура команд, FrontOps и др.); • Практические форматы: 2 воркшопа, 4 круглых стола, 6 кейсов‑факапов; • Ламповые дискуссии и дебаты - живой обмен мнениями; • After‑party для неформального нетворкинга и обмена опытом. Почему это выгодно вашей компании: • Конкретные решения, которые можно внедрить за недели, а не месяцы; • Меньше проблем в продакшне и быстрее релизы - экономия времени и денег; • Приоритетные предложения, план внедрения и оценка эффекта; • Повышение экспертизы команды и удержание ключевых специалистов. Присоединяйтесь 20–21 октября - два дня концентрированного опыта, полезных контактов и конкретных инструментов для развития фронтенд‑команд. Подготовьте короткую просьбу руководителю и Забронируйте билет - сайт конференции. #реклама О рекламодателе

👩‍💻 Gooey SVG Filter Button Анимированная кнопка с эффектом при наведении. Сделана на SVG, CSS и JavaScript. Открыть код...

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

<div class="card"> <img src="https://via.placeholder.com/150" alt="Placeholder Image" class="card-img"> <div class="card-text">Текст внизу карточки</div> </div> .card { width: 200px; height: 300px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .card-img { width: 100%; height: auto; max-height: 70%; /* Ограничиваем высоту изображения */ } .card-text { padding: 10px; background-color: #f9f9f9; text-align: center; }