👩‍💻 Как работает свойство object-fit в CSS?

Свойство object-fit позволяет управлять масштабированием содержимого (например, изображений или видео) внутри контейнера, не искажая его соотношение сторон. Это особенно полезно при создании адаптивных и аккуратных галерей.

➡️ В этом примере изображение заполняет контейнер, сохраняя пропорции, благодаря значению cover:

.container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

🗣 Свойство object-fit помогает контролировать отображение изображений в контейнерах, не растягивая и не искажая их.

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

Frontend-разработчик Middle
🟢HTML, CSS, SCSS, JavaScript, Vue 3, Vuex, Vue-router, Vite, JSON RPC, I18n
🟢Уровень дохода не указан | не требуется

Middle Frontend Developer
🟢JavaScript, TypeScript, React, Redux, Next.js, TailwindCSS
🟢Уровень дохода не указан | 1–3 года

Javascript middle frontend developer
🟢JavaScript, TypeScript, Vue.js, Git, HTML, CSS
🟢от 220 000 ₽ | 3–6 лет

Middle frontend-разработчик
🟢HTML, CSS, JavaScript, TypeScript, Vue.js, Nuxt.js, WebSocket, REST, GraphQL
🟢от 150 000 до 200 000 ₽ | 3–6 лет

Junior+/middle frontend разработчик
🟢JavaScript, TypeScript, CSS, React
🟢до 160 000 ₽ | 1–3 года

👩‍💻 Использование async и defer для управления скриптами

В мире веб-разработки оптимизация времени загрузки страниц имеет решающее значение. Два мощных атрибута тега <script> — async и defer — могут существенно повлиять на производительность сайта. Использование этих атрибутов без их глубокого понимания может негативно сказаться на производительности и привести к ошибкам. Давайте начнём с основ и узнаем, что делают эти атрибуты и когда их следует использовать.

Читать...

👩‍💻 Создание анимированного переключателя темы (светлая/тёмная)

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

➡️ Пример: Переключатель переключает тему страницы между светлой и тёмной, изменяя цвета фона и текста. При смене темы фон плавно меняется за 0.3 секунды.

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

<div class="theme-toggle">
<label class="switch">
<input type="checkbox" id="theme-switcher">
<span class="slider"></span>
</label>
<p>Нажмите, чтобы переключить тему</p>
</div>

/* Переменные для тем */
:root {
--bg-color-light: #ffffff;
--bg-color-dark: #333333;
--text-color-light: #000000;
--text-color-dark: #ffffff;
--transition-duration: 0.3s;
}

/* Общие стили */
body {
background-color: var(--bg-color-light);
color: var(--text-color-light);
transition: background-color var(--transition-duration), color var(--transition-duration);
}

/* Тёмная тема */
body.dark-theme {
background-color: var(--bg-color-dark);
color: var(--text-color-dark);
}

/* Стили для переключателя */
.theme-toggle {
display: flex;
align-items: center;
gap: 10px;
margin-top: 20px;
}

.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 24px;
transition: background-color var(--transition-duration);
}

.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 4px;
bottom: 3px;
background-color: white;
border-radius: 50%;
transition: transform var(--transition-duration);
}

input:checked + .slider {
background-color: #2196F3;
}

input:checked + .slider:before {
transform: translateX(26px);
}

document.getElementById('theme-switcher').addEventListener('change', (event) => {
document.body.classList.toggle('dark-theme', event.target.checked);
});

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

• Ускоряем разработку и тестирование с DevTools: 4 новых инструмента, которые сэкономят вам время

• Управление цепочкой вызовов асинхронных функций

• Звездный рейтинг на HTML-CSS

• Svelte 5 здесь

• Глобальная настройка любого компонента в Vue

👩‍💻 Cards with inverted border-radius

Карточки товаров с интересным решением для кнопки. Сделаны на SCSS.

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

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

Разработчик Frontend (React)
🟢React, Redux, JavaScript, HTML5, CSS3, TypeScript, Git, Docker, SQL, Effector, REST API
🟢от 250 000 до 330 000 ₽ | 3–6 лет

Senior Frontend Developer (React + Tailwind CSS)
🟢React, Next.js, Tailwind CSS, Mantine UI
🟢от 5 000 до 6 000 $ | более 6 лет

Frontend Developer (Middle+/Senior)
🟢JavaScript, TypeScript, HTML, CSS, React, стейт-менеджеры, Docker, CI/CD
🟢от 150 000 до 200 000 ₽ | 3–6 лет

Senior frontend-разработчик
🟢HTML, CSS, JavaScript, TypeScript, React, Vue, Angular, CI/CD, Git, Docker
🟢от 200 000 до 300 000 ₽ | более 6 лет

Frontend-разработчик Middle+ / Senior
🟢JavaScript, CSS, HTML, CSS3, React, Redux, React Native, TypeScript
🟢от 150 000 до 250 000 ₽ | 1–3 года

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

• В какой момент профессия программиста свернула не туда?

• Офис Intel в Израиле отменил бесплатный кофе

• Войти в IT – в 37 и с дипломом филфака

• Путь к мастерству: Как стать успешным разработчиком

• Галера от HH или джуны по-дешевке

👩‍💻 Создание веб-компонента с нуля

Сегодня я решил, что мы создадим HTML веб-компонент с нуля. Давайте создадим компонент, показывающий и скрывающий текст при переключении кнопки.

Читать...

👩‍💻 Как работает свойство box-shadow в CSS?

Свойство box-shadow в CSS позволяет добавлять тень к элементам. Вы можете задавать смещение по оси X и Y, размытие, размер растяжения и цвет тени. Это свойство особенно полезно для создания эффектов глубины и фокусировки на важных элементах интерфейса.

➡️ Пример:

/* Пример тени с мягким размытием */
.box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}

🗣️ В этом примере тень создается с отступом в 10px по оси X и Y, с размытием 20px и полупрозрачным черным цветом. box-shadow позволяет экспериментировать с глубиной, добавляя акценты к элементам интерфейса.

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

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

Team Lead Frontend-разработчик
🟢HTML, CSS, JavaScript, React
🟢от 200 000 ₽ | 3–6 лет

Lead Frontend Developer
🟢React, TypeScript, HTML5, CSS3, Python, Node, SQL
🟢5 000–8 000 $ (до вычета налогов) | 3–6 лет

Lead Frontend
🟢React.js, Redux.js, CI/CD
🟢Уровень дохода не указан | более 6 лет

Руководитель группы разработчиков (Frontend Team Lead)
🟢Angular, AngularJS, TypeScript, RxJS, HTML, CSS, Gitlab
🟢180 000–200 000 ₽ | более 6 лет

Lead frontend-разработчик (Vue)
🟢Vue.js, TypeScript, HTML, CSS, JavaScript, Webpack, Vite
🟢Уровень дохода не указан | 3–6 лет

👩‍💻 CI/CD для начинающих: деплой React-приложения без боли

В статье показан процесс развертывания React-приложения на сервере: от упаковки кода в CI/CD до отправки его в прод. Всё на примере простого to-do приложения.

Читать...

💭 Скорость — не главный показатель успеха. Гораздо важнее — чёткое понимание, куда ты идёшь.

Многие тратят кучу энергии, чтобы везде поспеть: освоить новое, прокачать скиллы, закрыть дедлайны. Но часто за спешкой скрывается отсутствие направления. И пока ты гонишься за всем сразу, фокус на том, что действительно важно, ускользает.

🎯 Что делать: раз в месяц выдели время на анализ — какие задачи реально приближают тебя к целям, а какие тянут энергию впустую? Подумай, что можно делегировать, что автоматизировать, а от чего отказаться. Сосредоточься на главном, и почувствуешь, что каждое действие наконец работает на твой рост.

🔎 Подборка валютных вакансий

Frontend React Developer
🟢React, TypeScript, Web3 (viem, tonweb, connectkit, wagmi), tanstack, Tailwind, Vite
🟢до 1 800 $ | 3–6 лет

Senior Fullstack Software Engineer (.NET React)
🟢.NET, C#, Entity Framework, React
🟢от 24 000 000 до 38 000 000 so'm | 3–6 лет

Senior Frontend developer
🟢TypeScript, React, Next.js, JavaScript, CSS, TailwindCSS, Material UI, Headless CMS (Storyblok, Contentful, Strapi)
🟢до 3 000 $ | 3–6 лет

Backend Разработчик (JavaScript)
🟢JavaScript, Node.js, TypeScript, PostgreSQL, web3, blockchain
🟢от 4 000 $ | более 6 лет

Senior Front-End (React) разработчик
🟢React.js, Redux, CSS, REST
🟢от 4 000 до 5 000 $ | более 6 лет

👩‍💻 Создание CLI-приложения с Laravel и Docker

Хотя Laravel традиционно используется для создания веб-приложений, некоторые приложения нуждаются в надёжных командах CLI, запускаемых через Docker в продакшн-среде. Узнайте, как настроить образ Docker для запуска Artisan CLI, благодаря чему вы получите основу для распределения CLI-приложений на PHP.

Читать...

👩‍💻 Стилизация кнопки с эффектом наведения

Создайте кнопку, которая меняет цвет фона и добавляет лёгкую тень при наведении. При обычном состоянии кнопка должна иметь закруглённые углы и немного увеличиваться при наведении для визуального акцента.

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

• Основной цвет фона кнопки — синий (#007BFF).
• При наведении цвет фона становится темно-синим (#0056b3), добавляется тень, и кнопка слегка увеличивается.

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

<button class="styled-button">Нажми меня</button>

.styled-button {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.styled-button:hover {
background-color: #0056b3;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
}

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

• Отладка и мониторинг в MobX: trace, introspection и spy

• Пара шаблонов кастомизированных элементов Handlebars для Apache Superset — 2

• PHP и Laravel дайджест новостей за октябрь 2024 года

• Битва титанов: натив, кроссплатформа и PWA – ищем плюсы и минусы на каждом этапе разработки

• Внедрение методики решения проблем 8D на производственном предприятии в виде SRM/ERP-систем/Часть 1

👩‍💻 Проблема с new URL(), и как URL.parse() её решает

Часто приходится анализировать множество URL-адресов. Частично для их проверки, а также для нормализации или извлечения определённых частей из URL. API URL в браузерах позволяет это делать, но его эргономика не идеальна.

Читать...

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

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

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

• Изображение находится в верхней части карточки.
• Под изображением — заголовок и краткое описание.
• Карточка при наведении увеличивается и добавляет лёгкую тень.

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

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


.card {
width: 300px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-img {
width: 100%;
height: auto;
}

.card-title {
margin: 16px;
font-size: 1.2em;
}

.card-description {
margin: 0 16px 16px;
font-size: 0.9em;
color: #555;
}

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

Frontend-разработчик (junior/junior+)
🟢React, Mobx, SCSS, Tailwind, TypeScript, GIT (git flow)
🟢от 40 000 до 60 000 ₽ | Без опыта

Junior Frontend Developer
🟢HTML5, CSS3, JavaScript (ES6/ES7), React/Angular/Vue.js, jQuery, Bootstrap/Foundation/Bulma/Tailwind, Webpack/Parcel/Rollup, SASS/LESS/PostCSS/Stylus
🟢Уровень дохода не указан | Без опыта

Junior Frontend разработчик
🟢HTML, CSS, JavaScript, React, TypeScript, Redux toolkit
🟢от 40 000 до 70 000 ₽ | 1–3 года

Junior Frontend-разработчик
🟢React, Next.js, Tailwind CSS, React Query
🟢от 35 000 ₽ | 1–3 года

Junior Frontend (React) developer
🟢React, JavaScript, TypeScript, HTML, CSS, .NET (C#), Git
🟢Уровень дохода не указан | Без опыта

👩‍💻 Dropdown Menu Effects

Анимированное выпадающее меню с переливающимся эффектом. Сделано на SCSS и TypeScript.

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