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

👩‍💻 Создание анимированного переключателя темы (светлая/тёмная) Создайте переключатель, позволяющий пользователю менять тему страницы между светлой и тёмной. При переключении должна происходить плавная анимация перехода. Реализуйте переключение тем с помощью 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); });

👨‍💻 В телеграме появился новый канал по Фронтенду Всё что нужно для Frontend-разработчика теперь в одном месте: обучающие видео, статьи, онлайн сервисы, шпаргалки и многое другое... ➡️ Перейти в канал "Фронтенд заметки"

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

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

<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; }

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

🔎 Подборка зарубежных вакансий Senior Frontend Developer (Team Lead) 🟢TypeScript, React, Redux Toolkit, Amazon IVS Broadcast SDK, hls.js, WebSocket, Formik, Yup, CSS (Sass/Scss), Swagger, Postman 🟢Уровень дохода не указан | 3–6 лет опыта PHP Developer 🟢PHP, Symfony, Laravel, SQL (MS SQL, MySQL), Git, JavaScript, HTML, CSS, AJAX, Unit Testing 🟢Уровень дохода не указан | 3–6 лет опыта PixiJS Frontend Developer 🟢PixiJS, JavaScript, Git, Unit Testing, API Integration, Game UI Development 🟢Уровень дохода не указан | 1–3 года опыта

🖇 Избегай зависимости от "чужого кода" Ты решил проблему через копипасту кода с форума или GitHub? Быстро, но опасно. 👉 Совет: всегда разбирайся, как работает решение, перед тем как внедрить его. Добавляй комментарии, чтобы объяснить себе и другим, почему этот код здесь. И не ленись дорабатывать его под нужды своего проекта.

👩‍💻 Проблема с new URL(), и как URL.parse() её решает Часто приходится анализировать множество URL-адресов. Частично для их проверки, а также для нормализации или извлечения определённых частей из URL. API URL в браузерах позволяет это делать, но его эргономика не идеальна. Читать...

📝 Подборка вакансий для лидов Руководитель группы разработки • Git, Docker, PHP, Laravel, React, CI/CD, Управление разработкой, Управление людьми, Ведение переговоров • Уровень дохода не указан | Требуемый опыт не указан Fullstack TeamLead • PHP, Laravel, Python, CI/CD, Управление разработкой • до 400 000 ₽ | от 6 лет опыта Руководитель web-разработки • Git, Docker, PHP, Laravel, React, CI/CD, Управление разработкой, Управление людьми, Ведение переговоров • Уровень дохода не указан | Требуемый опыт не указан

⚡ Новые каналы с вакансиями и стажировками для джунов Друзья, мы запустили новые каналы, где публикуются все свежие вакансии и стажировки 🔺БИГТЕХ

Вакансии и стажировки в крупнейших IT-компаниях мира: NVidia, Apple, T-банк, Яндекс, Google и т. д.

👉 ПОДПИСАТЬСЯ 🔺СТАЖИРОВКИ

Стажировки для начинающих специалистов в IT независимо от возраста!

👉 ПОДПИСАТЬСЯ 🔺 ВАКАНСИИ

Горячие вакансии с привлекательными офферами для джуниор разработчиков, аналитиков, дизайнеров и QA-специалистов

.

👉 ПОДПИСАТЬСЯ

⚙️ Как работает свойство z-index в CSS? z-index управляет тем, как элементы накладываются друг на друга в трёхмерном пространстве веб-страницы. Элементы с большим значением z-index будут отображаться поверх тех, у которых значение меньше. ➡️ В этом примере элемент с z-index: 2 будет отображаться поверх элемента с z-index: 1:

.element1 {
  position: relative;
  z-index: 1;
}

.element2 {
  position: relative;
  z-index: 2;
}

🗣 Важно помнить, что свойство z-index работает только с элементами, у которых установлено позиционирование (position: relative, absolute, fixed или sticky).

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

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

📈 Подборка статей для вашей карьеры • Названия должностей разработчиков почти потеряли свой смысл • Три рецидива синдрома самозванца: из историка в системного аналитика • 10 не самых очевидных причин, чтобы уволиться • ИТ-пенсионеры и где они обитают • Пресловутые софтскилы и карьера в IT

📝 Подборка вакансий для сеньоров Middle+ Frontend developer (React) СберНПФ • TypeScript, JavaScript, React, Webpack • Уровень дохода не указан | 2 года опыта Senior Fullstack developer • JavaScript, TypeScript, Node.js, React • Уровень дохода не указан | Senior/Lead уровень React.js Developer • React, React Native, TypeScript, Redux, Sass, CSS, HTML, REST, JSON, Node.js • от 5 000 $ | 5 лет опыта

👩‍💻 Toggle Pill Набор переключателей с разными стилями анимаций. Сделан на чистом CSS. Открыть код...

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

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

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}

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

📝 Подборка вакансий для мидлов React разработчик • TypeScript, WebSockets, React, Effector, Express • от 150 000 до 250 000 ₽ | 3 года опыта React Native разработчик • React Native, React, Redux, Flutter, PHP, Laravel, Next.js, C#, TypeScript, JavaScript • от 140 000 до 160 000 ₽ | 3 года опыта Middle Fullstack Developer • React, Vue.js, Webpack, TypeScript, Node.js, MongoDB • от 3 800 до 5 500 $ | 5 лет опыта

⚙️ Что такое debounce и как он используется в JavaScript? Debounce — это техника оптимизации, которая позволяет контролировать, как часто функция будет вызываться при повторяющихся событиях. Это полезно для обработки событий, таких как ввод текста или изменение размера окна, чтобы уменьшить нагрузку на производительность. ➡️ Пример:

function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

// Использование debounce
const handleResize = debounce(() => {
  console.log('Окно изменилось!');
}, 300);

window.addEventListener('resize', handleResize);

🗣️ В этом примере обработчик событий на родительском элементе обрабатывает клики по дочерним элементам, включая добавленные динамически. Это упрощает код и повышает производительность.

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