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

👩‍💻 Fluid Simulation Сцена с интересной симуляцией жидкости с текстом. Сделана на CSS и JavaScript. Открыть код...

👩‍💻 TypeScript в деталях: настраиваем tsconfig.json правильно Один файл, который может изменить все: полное руководство по tsconfig.json. Разбираем каждый параметр и его влияние на разработку, сборку и поддержку TypeScript-проектов. Читать...

🔝 Самые интересные статьи за последние дни: • Упрощаем CSS-анимации с помощью свойств display и размеров элемента • 5 полезных фреймворков и библиотек для начинающего фронтенд-разработчика на конец 2024 года • Возможности поля HTML-документа, часть 2. Внедряем CSS и JS • Ошибки, которые я совершил, пытаясь быть «слишком правильным» в разработке • Разработка Task Manager с нуля до полнофункционального продукта

👩‍💻 Подсчёт частоты элементов в массиве Напишите функцию, которая принимает массив и возвращает объект, где ключи — это уникальные элементы массива, а значения — количество их вхождений. Пример:

const input = [1, 2, 2, 3, 4, 3, 5, 3];
const result = countFrequency(input);
console.log(result); 
// Ожидаемый результат: {1: 1, 2: 2, 3: 3, 4: 1, 5: 1}

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

function countFrequency(array) { return array.reduce((acc, item) => { acc[item] = (acc[item] || 0) + 1; return acc; }, {}); } // Пример использования: const input = [1, 2, 2, 3, 4, 3, 5, 3]; const result = countFrequency(input); console.log(result); // Ожидаемый результат: {1: 1, 2: 2, 3: 3, 4: 1, 5: 1}

👩‍💻 Улучшение производительности с делегированием событий Статья объясняет технику делегирования событий в веб-разработке, показывая, как использование одного слушателя на родительском элементе упрощает управление событиями и повышает производительность. Читать...

👩‍💻 Решение головоломки судоку на JavaScript с помощью хэш-карт и рекурсий Если вы погружены в мир судоку, то наверняка ищете варианты ускоренного решения задач по программированию. Предлагаем ознакомиться с одним из них. Использование в нем хэш-карт и рекурсий значительно ускоряет решение головоломки. Читать...

👩‍💻 Переходите на сторону light-dark() Статья раскрывает современные CSS-функции для создания адаптивного темного режима, заменяющие традиционные медиа-запросы. Рассматриваются подходы, упрощающие настройку цветовых схем под предпочтения пользователя. Читать...

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

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

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

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

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

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

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

📉 Брейншторм без ограничений — бесполезен Когда можно всё, не получается ничего конкретного. Генерить идеи без рамок — значит тонуть в абстракции. 👉 Совет: вводи ограничения. Например: решение должно поместиться в 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 упрощает создание адаптивных макетов.

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

👩‍💻 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; }

👩‍💻 8 важнейших аспектов JavaScript, которые нужно освоить до изучения React Изучение React без прочной базы JavaScript похоже на строительство дома без фундамента. В этой статье разберем 8 ключевых концепций, которые помогут тебе уверенно чувствовать себя в React-разработке и писать качественный код. Читать...

🔝 Самые интересные статьи за последние дни: • Знакомьтесь: input, output и model. Новые функции в Angular • Мой путь в мире веб-рендеринга: от статических страниц к гибридным архитектурам • Новый этап эволюции Vue — Vapor • Как сделать один плагин сразу для всех сборщиков фронтенда? • Личный опыт: добавление микроразметки на сайт