👩‍💻 Hover Glyph Button

Кнопка с анимированным эффектом при наведении. Сделана на CSS, SVG и JavaScript.

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

✔️ Практические советы по доступности, которые можно внедрить сегодня

Часто, спеша завершить проект, мы создаём элементы интерфейса, не думая о доступности. Однако небольшие изменения могут значительно улучшить опыт пользователей. Доступность — это не сложная задача, а способ сделать продукт удобным для всех, независимо от их навыков и устройств.

Читать...

👩‍💻 Создание анимации орбиты с помощью CSS переменных

Давайте анимируем CSS переменные! Это мощный способ применения CSS анимации, которая в противном случае была бы утомительной или непрактичной.

Читать...

👩‍💻 Check Done SVG Animated

Красиво анимированная галочка. Сделана на SVG и SCSS.

Открыть код

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

• Bootstrap или свое решение

• Что нас ждет в Next.js 15: обзор заявленных новинок

• Valkey: миллион RPS c напёрстком дёгтя

• Откройте для себя весь потенциал AbortController

• Посмотрим на never с разных сторон?

👩‍💻 Практические советы по доступности, которые можно применить сегодня

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

Читать...

👩‍💻 Создание навигации с «плавающим» фоном ссылок на чистом CSS

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

Читать...

⬇️ Бесконечная прокрутка логотипов на чистом HTML и CSS

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

Читать...

👩‍💻 Анимация элемента dialog

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

Читать...

👩‍💻 Реализация глубокого копирования объекта

Напишите функцию 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 (изменение не повлияло на оригинальный объект

⚡️ Как развернуть Supabase в облаке Timeweb Cloud

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

Читать...

🔍 Maskito: то, что вы давно искали

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

Читать...

👩‍💻 Что, если использовать контейнерные единицы измерения для... всего

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

Читать...

👩‍💻 Тест по CSS

Какой цвет будет у текста в элементе <p>, если у родителя <div> установлен цвет color: red;, а у самого элемента <p> указано свойство color: inherit;?

<div style="color: red;">
  <p style="color: inherit;">Текст</p>
</div>

👩‍💻 Как прослушивать несколько событий в веб-компоненте

Сегодня поговорим о том, как использовать handleEvent() для обработки нескольких типов событий.

Читать...

➡️ Руководство по Convex. Часть 1

В этой серии статей я рассказываю о Convex — новом открытом и бесплатном решении BaaS (Backend as a Service — бэкенд как услуга), которое выглядит очень многообещающе и быстро набирает популярность среди разработчиков.

Читать...

👩‍💻 On-Scroll Fire Transition

Красивая анимация горения страницы при скролле. Сделана на CSS и JavaScript.

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

👩‍💻 Как использовать менеджер состояний NgRx для Angular-проектов

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

Читать...

👩‍💻 Что нового в Chrome 130?

В статье рассказывается о нововведениях в Chrome 130: улучшенные возможности управления окнами "picture-in-picture", вложенные объявления в CSS для сложных случаев и настройка декораций для элементов в несколько строк.

Читать...

👩‍💻 Современные тренды CSS: эволюция функций

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

Читать...