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

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

• Как сделать один плагин сразу для всех сборщиков фронтенда?

• Личный опыт: добавление микроразметки на сайт

👩‍💻 Адаптивный блок с равными колонками

Создайте адаптивный блок, который содержит три колонки одинаковой ширины. На больших экранах (от 1024px) колонки должны располагаться в один ряд, на планшетах (от 768px до 1023px) — в два ряда по две и одну, а на мобильных устройствах (до 767px) — каждая колонка должна занимать всю ширину.

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

• На больших экранах: три колонки в один ряд.
• На планшетах: две колонки в первом ряду, одна во втором.
• На мобильных: каждая колонка занимает всю ширину.

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

<div class="container">
<div class="column">Колонка 1</div>
<div class="column">Колонка 2</div>
<div class="column">Колонка 3</div>
</div>

.container {
display: flex;
flex-wrap: wrap;
gap: 16px; /* Отступы между колонками */
margin: 0 auto;
max-width: 1200px;
}

.column {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
border-radius: 8px;
flex: 1 1 calc(33.333% - 16px); /* Для больших экранов */
box-sizing: border-box;
}

/* Планшеты: две колонки в первом ряду */
@media (max-width: 1023px) {
.column {
flex: 1 1 calc(50% - 16px);
}
}

/* Мобильные устройства: одна колонка в строке */
@media (max-width: 767px) {
.column {
flex: 1 1 100%;
}
}

👩‍💻 Всё ли ты знаешь о работе с асинхронностью?

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

Читать...

👩‍💻 CSS Веерное раскрытие с grid и @property

Анимация веерное раскрытие подразумевает последовательное раскрытие элементов из стопки с эффектом подпрыгивания. Используя CSS grid, мы избавляемся от лишней работы по позиционированию.

Читать...

👩‍💻 Сравнение способов отрисовки спрайтов в canvas

Статья описывает исследование различных методов отрисовки изображений в HTML5 Canvas для браузерных игр с мультиплеером. Автор делится находками по оптимизации производительности, основанными на проекте для курсовой.

Читать...

👩‍💻 Шорткаты VS Code, с которыми ввод кода напоминает игру на пианино

Застряли в замкнутом круге "клавитура-мышка", из-за которого устаете и теряете время при написании кода? Представляем вашему вниманию полезные шорткаты VS Code, которые избавят от этих проблем.

Читать...

⚡️ Запускаем крупный розыгрыш призов, где можно выиграть iPhone 17, игровые наушники, клавиатуру и мышь!

Без лишних слов, условия:

1. Подписка на:
— бизнестрендс
— Технотренды
— Блумберг
2. Нажать кнопку «Участвовать» снизу

Итоги будут опубликованы 15 ноября в 18:00 на наших каналах, желаем удачи!

👩‍💻 Создание адаптивного круга с текстом по центру

Создайте круглый элемент с текстом по центру. Круг должен адаптироваться под размер экрана: на больших экранах его размер — 200px, на планшетах — 150px, а на мобильных устройствах — 100px.

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

• Круглый элемент с текстом по центру.
• Размер круга меняется в зависимости от ширины экрана.

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

<div class="circle">Текст</div>

.circle {
display: flex;
align-items: center;
justify-content: center;
background-color: #4CAF50;
color: white;
border-radius: 50%;
text-align: center;
font-size: 1.2em;
}

/* Размер для больших экранов */
@media (min-width: 1024px) {
.circle {
width: 200px;
height: 200px;
}
}

/* Размер для планшетов */
@media (min-width: 768px) and (max-width: 1023px) {
.circle {
width: 150px;
height: 150px;
}
}

/* Размер для мобильных устройств */
@media (max-width: 767px) {
.circle {
width: 100px;
height: 100px;
}
}