👩‍💻 10 лучших CSS-библиотек и фреймворков для быстрой разработки фронтенда

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

Читать...

👩‍💻 Создание адаптивной карточки с изображением и текстом

Создайте карточку, которая содержит изображение сверху и текст ниже. Карточка должна быть адаптивной: на больших экранах занимать 25% ширины контейнера, а на мобильных устройствах — всю ширину.

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

• Изображение всегда занимает всю ширину карточки.
• Текст расположен под изображением.
• Карточка адаптируется к размеру экрана.

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

<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Image" class="card-image">
<div class="card-text">
<h3>Заголовок</h3>
<p>Описание карточки. Это адаптивная карточка с текстом и изображением.</p>
</div>
</div>

/* Контейнер карточки */
.card {
display: flex;
flex-direction: column;
width: 25%; /* Для больших экранов */
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}

.card:hover {
transform: scale(1.05);
}

/* Изображение в карточке */
.card-image {
width: 100%;
height: auto;
display: block;
}

/* Текст карточки */
.card-text {
padding: 16px;
text-align: center;
background-color: #f9f9f9;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
.card {
width: 100%; /* Занимает всю ширину на маленьких экранах */
}
}

🔝 Самые интересные статьи за последние дни:

• style.setProperty vs setAttribute

• Как создать архитектуру фронтенд-приложения, если ее нет от слова «совсем»

• Правильные ли у вас микрофронты?

• Рецензия на книгу “Изучаем паттерны проектирования JavaScript, 2-е издание”

• Модульные CSS-архитектуры в Next.js: BEM, SMACSS, OOCSS и их применение

👩‍💻 Idea Form

Анимированная форма для ввода с появлением при нажатии. Сделана на SCSS и TypeScript.

Открыть код...

📝 Подборка вакансий для сеньоров

Frontend-разработчик
• React.js, TypeScript, JavaScript, CSS, Sass, Webpack, Git, Docker, REST
• Уровень дохода не указан | от 3 лет

Frontend Developer (VueJS)
• Vue.js, TypeScript, JavaScript, HTML5, CSS3, SASS, SCSS, LESS, Stylus, Babel, Webpack, Npm, Yarn, Jest, Mocha, REST API
• Уровень дохода не указан | от 5 лет

Middle/Senior frontend dev
• Vue.js, Nuxt.js, TypeScript, JavaScript, CSS, SASS, Tailwind, GraphQL, REST, WebSocket, Git
• от 200 000 до 280 000 ₽ | от 3 лет

Senior Frontend Engineer
• Next.js, TypeScript, JavaScript, React.js, D3.js, Chart.js, Redux, Zustand, Jest, React Testing Library, REST API
• до 5 000 $ | от 6 лет

Frontend разработчик Angular
• Angular, JavaScript, HTML, CSS, REST API
• Уровень дохода не указан | от 3 лет

📈 Подборка статей для вашей карьеры

• Мои Red-Flags при устройстве в IT-компании: Как не стать гребцом. Часть 2

• Циничные заметки о карьере в IT от «гейткипера»

• Язык как проект: как продакт-менеджеру учить английский

• Всероссийский рейтинг IT-брендов работодателей 2024

• Моя петиция EB-1A на грин-карту талантов, одобренная с первой попытки

👩‍💻 Переходите на сторону light-dark()

Статья раскрывает современные CSS-функции для создания адаптивного темного режима, заменяющие традиционные медиа-запросы. Рассматриваются подходы, упрощающие настройку цветовых схем под предпочтения пользователя.

Читать...

⚙️ Что такое clamp() в CSS и как его использовать?

clamp() — это функция в CSS, которая задаёт значение с ограничениями: минимальное, предпочтительное и максимальное. Она позволяет адаптивно управлять размерами элементов или текстом, сохраняя их в заданных пределах.

➡️ Пример:

<div class="text">
  Адаптивный размер текста
</div>

<style>
  .text {
    font-size: clamp(1rem, 2.5vw, 2rem); /* Минимум 1rem, максимум 2rem, предпочтение — 2.5% ширины окна */
    text-align: center;
  }
</style>

🗣️ В этом примере текстовый блок изменяет размер шрифта в зависимости от ширины окна, оставаясь в пределах от 1rem до 2rem. Функция clamp() упрощает создание адаптивного дизайна без сложных медиа-запросов.

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

📝 Подборка вакансий для лидов

Senior/Lead Frontend-разработчик
• TypeScript, React, Next.js, TailwindCSS, React Query, Redux Toolkit, eCharts, React Flow
• Уровень дохода не указан | от 6 лет

Frontend Teamlead (React JS)
• TypeScript, JavaScript, React, Git
• Уровень дохода не указан | от 3 лет

FrontEnd Разработчик в стартап Bolsta (за опцион)
• React, Vue.js, HTML, CSS, JavaScript
• Уровень дохода не указан | опыт не указан

Team Lead Frontend (Управление перспективных проектов)
• React, TypeScript, HTML, CSS, SCSS, JavaScript, React Router Dom, axios, Fluent UI, final-form, i18next, Jotai, Mitt, React Query, Tanstack Table, Vite
• Уровень дохода не указан | от 4 лет

Senior Frontend Developer (React)
• JavaScript, TypeScript, React, Redux, React Hook Form, Vite, SCSS, CSS Modules
• Уровень дохода не указан | от 5 лет

👩‍💻 Решение головоломки судоку на JavaScript с помощью хэш-карт и рекурсий

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

Читать...

🔧 Баги — это не твой враг

Увидел баг — разозлился, потратил кучу времени, но всё равно ничего не понял? Это нормально. Баги не для того, чтобы раздражать тебя, они для того, чтобы ты учился.

✔️ Совет: раздели проблему на маленькие части и ищи, где что ломается. Включай логи, добавляй отладку, тестируй гипотезы. Это как пазл: с каждым шагом всё становится яснее.

📝 Подборка зарубежных вакансий

React Native Developer Middle
• React Native, JavaScript, TypeScript, REST API, Git
• от 1000 до 1500 $ | опыт не указан

Fullstack Developer
• React, Vue.js, Webpack, TypeScript, Node.js, MongoDB
• от 3800 до 6500 $ | от 5 лет

React.js Developer
• React.js, React Native, TypeScript, Redux, Sass, CSS, HTML, REST, JSON, Node.js
• от 5000 $ | от 5 лет

Fullstack разработчик (JavaScript, PHP, SQL), веб программист
• PHP, JavaScript, HTML, CSS, jQuery, Node.js, React, SQL
• от 1800 $ | опыт не указан

👩‍💻 Улучшение производительности с делегированием событий

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

Читать...

👩‍💻 Подсчёт частоты элементов в массиве

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

Пример:

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}

🔝 Самые интересные статьи за последние дни:

• Упрощаем CSS-анимации с помощью свойств display и размеров элемента

• 5 полезных фреймворков и библиотек для начинающего фронтенд-разработчика на конец 2024 года

• Возможности поля HTML-документа, часть 2. Внедряем CSS и JS

• Ошибки, которые я совершил, пытаясь быть «слишком правильным» в разработке

• Разработка Task Manager с нуля до полнофункционального продукта

👩‍💻 TypeScript в деталях: настраиваем tsconfig.json правильно

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

Читать...

👩‍💻 Анимация "пульсации" кнопки

Создайте кнопку, которая при наведении начинает "пульсировать" — её размер плавно увеличивается и уменьшается в течение короткого времени.

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

• Кнопка остаётся статичной, пока на неё не навели мышь.
• При наведении запускается бесконечная анимация "пульсации".
• При убирании мыши анимация прекращается.

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

<button class="pulse-button">Наведи на меня</button>

.pulse-button {
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #28a745;
border: none;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s ease;
}

.pulse-button:hover {
animation: pulse 1s infinite;
}

@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}

📝 Подборка вакансий для джунов

Junior React Разработчик
• HTML, CSS, JavaScript (ES6), Git, Redux/MobX, styled-components/Less/Sass, TypeScript, Next.js, Docker, Webpack
• от 60 000 до 90 000 ₽ | опыт не указан

Разработчик Laravel и REACT в Scrum команду
• Laravel, React, REST API, Git
• от 50 000 до 1 000 000 ₽ | опыт не указан

JavaScript Developer (NGFW)
• JavaScript, React, TypeScript, Node.js
• Уровень дохода не указан | от 2 лет

Frontend разработчик (Vue.js)
• JavaScript, TypeScript, Vue.js, SASS, Gulp, WebPack, HTML, CSS
• от 50 000 до 90 000 ₽ | опыт не указан

👩‍💻 Fluid Simulation

Сцена с интересной симуляцией жидкости с текстом. Сделана на CSS и JavaScript.

Открыть код...

⚙️ Что такое box-shadow в CSS и как оно работает?

box-shadow — это свойство CSS, которое добавляет тень к элементу. Оно позволяет задавать смещение, размытие, размер растушёвки и цвет тени.

➡️ Пример:

<div class="box">Я с тенью</div>

<style>
  .box {
    width: 200px;
    height: 100px;
    background: lightblue;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* Смещение и размытие тени */
  }
</style>

🗣️ В этом примере box-shadow добавляет мягкую тень с чётким смещением и прозрачностью. Это свойство отлично подходит для выделения элементов интерфейса.

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

📝 Подборка вакансий для джунов

Frontend разработчик (React)
• React, Redux, HTML, CSS, TypeScript, Webpack
• Уровень дохода не указан | от 3 лет

Frontend developer (Angular)
• JavaScript, Angular, TypeScript, HTML5, CSS3, REST, Git, SASS, WebPack
• Уровень дохода не указан | опыт не указан

Frontend разработчик (React)
• React, TypeScript, JavaScript, Node.js, Express, Git
• Уровень дохода не указан | опыт не указан

Frontend developer (Vue.js)
• Vue.js, Nuxt.js, JavaScript, ES6, Git, REST, SASS, LESS, WebPack, Gulp, Grunt
• от 140 000 до 180 000 ₽ | опыт не указан

Frontend разработчик (Angular)
• Angular 13+, TypeScript, JavaScript, RxJs, Git, Leaflet, Ionic, Chart.js, CI/CD
• от 120 000 ₽ | опыт не указан