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

👩‍💻 Современные тренды CSS: эволюция функций Рабочая группа CSS выпустила новый модуль Values and Units Level 5: меньше кода, больше возможностей – звучит как мечта? Давайте вместе разберемся, как эти новшества изменят нашу работу и сделают веб красивее. Читать...

👩‍💻 Как использовать менеджер состояний NgRx для Angular-проектов В статье описывается, как NgRx помогает управлять состоянием приложения, работать с асинхронными операциями, улучшать производительность и упрощать масштабирование. Рассматриваются случаи, когда его внедрение наиболее оправдано. Читать...

👩‍💻 On-Scroll Fire Transition Красивая анимация горения страницы при скролле. Сделана на CSS и JavaScript. Открыть код...

👩‍💻 Что, если использовать контейнерные единицы измерения для... всего Однажды я спросил себя: а что, если использовать контейнерные единицы измерения для каждого элемента дизайна? Я задался этим вопросом, отчасти потому, что мне показалось, что ответ может быть таким: ну, тогда всё будет очень хорошо масштабироваться! Читать...

Онлайн-магистратура с IT специальностями от Яндекса Совместно с ИТМО, МИФИ, МФТИ. Онлайн-магистратура с актуальными программами и гибким графиком обучения. Получите высокооплачиваемую IT профессию, официальный диплом и практические знания. Господдержка оплаты. Совмещение с работой! Подать заявку #реклама 16+ practicum.yandex.ru О рекламодателе

🔍 Maskito: то, что вы давно искали В этой статье рассмотрим, как форматировать ввод данных в формах для удобства пользователей. Обсудим проблемы существующих библиотек маскирования и предложим более эффективное собственное решение. Читать...

Регистрируйтесь на Yandex Ecom Open Air 8 августа Море инсайтов для бизнеса, музыкальный open-air, лекции и нетворкинг. Участие бесплатно! Зарегистрироваться #реклама 18+ ecomfest.ru О рекламодателе

⚡️ Как развернуть Supabase в облаке Timeweb Cloud В статье расскажем, как Supabase — бесплатный аналог Google Firebase — помогает разработчикам быстро создавать приложения и сайты. Узнаете, как работать с базой данных, аутентификацией, хранением файлов и реальным временем, без необходимости управлять сервером. Читать...

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

const obj = { 
  name: "Alice", 
  info: { age: 25, hobbies: ["reading", "swimming"] } 
};
const copy = deepClone(obj);

console.log(copy); // { name: "Alice", info: { age: 25, hobbies: ["reading", "swimming"] } }
copy.info.age = 30;
console.log(obj.info.age); // 25 (изменение не повлияло на оригинальный объект)

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

function deepClone(obj) { if (obj === null || typeof obj !== 'object') { return obj; } if (Array.isArray(obj)) { return obj.map(deepClone); } const clone = {}; for (let key in obj) { if (obj.hasOwnProperty(key)) { clone[key] = deepClone(obj[key]); } } return clone; } // Примеры использования const obj = { name: "Alice", info: { age: 25, hobbies: ["reading", "swimming"] } }; const copy = deepClone(obj); console.log(copy); // { name: "Alice", info: { age: 25, hobbies: ["reading", "swimming"] } } copy.info.age = 30; console.log(obj.info.age); // 25 (изменение не повлияло на оригинальный объект

👩‍💻 Анимация элемента dialog Казалось бы, можно просто установить в CSS transition от 0 к 1 для opacity элемента dialog, но это не работает. Необходимо изучить @starting-style, а также ключевые слова overlay и allow-discrete. Читать...

⬇️ Бесконечная прокрутка логотипов на чистом HTML и CSS Помните HTML-элемент marquee? Он устарел, поэтому вряд ли стоит его использовать, когда понадобится что-то вроде горизонтальной автопрокрутки. Вот тут-то и приходит на помощь CSS, потому что в нём есть все необходимые инструменты для реализации этой функции. Читать...

👩‍💻 Создание навигации с «плавающим» фоном ссылок на чистом CSS Если у вас есть аккаунт на Vercel, вы, наверное, замечали, как плавно фон ссылок в панели навигации перемещается, следуя за курсором мыши. Такого эффекта несложно добиться с помощью CSS и нескольких строчек JS. Однако, интереса ради, я решил попробовать добиться похожего эффекта на чистом CSS. Читать...

🧭 Не пиши код с пустой головой Ты можешь открыть редактор, начать писать «на ходу», и через полчаса не понимать, куда вообще двигался. 👉 Совет: перед началом — сформулируй цель словами. Прямо в коде, комментарием: “эта функция должна делать X при условии Y”. Это фокусирует мышление и снижает шанс, что ты уйдёшь не туда.

👩‍💻 Практические советы по доступности, которые можно применить сегодня Иногда, спеша уложиться в сроки, мы не задумываемся о доступности. Но пара небольших изменений может значительно улучшить сайт для всех пользователей, независимо от их возможностей и устройств. Читать...

👩‍💻 Создание анимации орбиты с помощью CSS переменных Давайте анимируем CSS переменные! Это мощный способ применения CSS анимации, которая в противном случае была бы утомительной или непрактичной. Читать...

👩‍💻 7 полезных HTML-трюков для веб-разработчиков Представляем семь HTML-приемов, которые помогут вам создавать более удобные и привлекательные сайты, улучшая взаимодействие с пользователями. Читать...

📈 Подборка статей для вашей карьеры • Тримодальный характер зарплат разработчиков • Иллюзия прогресса: почему мне не удалось дать студентам-айтишникам реальный опыт • Из подземелья в QA: как и почему я перешёл в тестирование после 14 лет работы сисадмином в метрополитене • Interview copilots: как кандидаты используют ChatGPT на интервью • Моя история входа в IT: как я ломал стены своих ограничений

👩‍💻 Новый оператор безопасного присваивания в JavaScript: ?= В современной разработке на JavaScript для асинхронной работы и обработки ошибок часто применяются try-catch и async-await, что утяжеляет код. Новый оператор ?= упрощает обработку ошибок и улучшает читаемость. В статье рассматриваются его работа, особенности и преимущества. Читать...

👩‍💻 Использование CSS анимации, основанной на прокрутке, для индикации прогресса прокрутки на основе секций Индикатор прогресса прокрутки — довольно простая вещь, которую можно создать с помощью анимации, основанной на прокрутке в scroll()-стиле. Но мы создадим индикаторы для каждого раздела страницы, используя view()-стиль. Читать...

👩‍💻 Две мощные техники: CSS Reset и normalize.css В современной веб-разработке CSS сброс и нормализация — две важные техники, позволяющие добиться согласованности стилей в разных браузерах. Читать...