CSS единицы измерения: lh и rlh

#почитать

Изучение новых относительных единиц измерения CSS основанных на высоте строки и позволяющих отказаться от угадывания вертикального ритма.

⏱Читать статью

Всего несколько строк CSS для плавных переходов между страницами

#почитать

Одна строка CSS-кода может обеспечить чёткие переходы между страницами веб-приложений (и сайтов — для тех, кто их обслуживает, есть разница), открывая новые возможности для проектирования и работы. Так что предлагаю разобрать тему переходов между представлениями (View Transitions), обсудив их актуальность и сделав первые шаги при помощи всего одной строки CSS.

⏱Читать статью

Веерное раскрытие с grid и @property

#почитать

Анимация веерное раскрытие подразумевает последовательное раскрытие элементов из стопки с эффектом подпрыгивания. Используя CSS grid, мы избавляемся от лишней работы по позиционированию.

⏱Читать статью

JavaScript: Всё ли ты знаешь о работе с асинхронностью?

#почитать

Думаете, что знаете вообще все об асинхронности в JavaScript? Уверены, что так оно и есть. Но проверить свои знания никогда не помешает — для этого как раз собрали эту небольшую викторину.

⏱Читать статью

Минималистичная JavaScript песочница

#почитать

Основное отличие этой песочницы от других — сжатие и кодирование пользовательского кода непосредственно в URL. Код не хранится на сервере или где-либо ещё. Если у вас есть ссылка, значит у вас есть код.

⏱Читать статью

Функции call, apply и bind: использование и сравнение

#почитать

В JavaScript ключевое слово this имеет решающее значение для обеспечения работы функций в определенном контексте. Чтобы эффективно определить контекст и использовать функции для различных объектов, полезными решениями являются такие методы, как call(), apply() и bind(). Рассмотрим эти методы и способы их использования.

⏱Читать статью

6 главных технологий для хранения данных в браузере

#почитать

Ведущий инженер RxDB провел комплексный анализ и сравнение шести основных технологий хранения данных в браузере – от классических Cookies до современных WASM SQLite, оценивая их функциональность, производительность и потенциал для оптимизации.

⏱Читать статью

align-content: Простой способ выравнивания по центру

#почитать

Наконец, можно центрировать/выравнивать по центру содержимое блочных макетов, не прибегая к flexbox гимнастике

⏱Читать статью

Лучший подход к SVG иконкам

#почитать

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

⏱Читать статью

Мощь CSS-масок

#почитать

Исторически сложилось, что термин «маскирование» очень широко применяется в разных сферах жизни и с кардинально разными значениями. Маска, о которой речь в статье, пришла в веб из мира дизайна. Там маскирование — весьма популярная техника, с помощью которой можно скрыть или вырезать часть изображения произвольной формы. Рассмотрим на очень упрощенном примере.

⏱Читать статью

Не раздражающая валидация формы: CSS :user-valid и :user-invalid

#почитать

Новые псевдоклассы :user-valid и :user-invalid предоставляют более умный способ стилизации состояния валидности формы в зависимости от действия пользователя.

⏱Читать статью

Кнопки с несколькими состояниями

#почитать

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

⏱Читать статью

CSS :has() — Псевдокласс, который давно ждали

#почитать

Преобразуйте свой CSS с помощью псевдокласса :has(), позволяющего стилизовать элементы на основе их дочерних элементов.

⏱Читать статью

Модули CSS раскладки — что такое и как готовить

#почитать

В 20-ом веке браузеры были гораздо менее развиты, а CSS сильно ограничен. Он подходил только для оформления простых текстов что-то вроде документов Word. Для оформления сайтов приходилось обращаться к таблицам, чтобы создавать подобие типографской сетки для раскладки элементов. Пока в 2003 году не появился CSS Zen Garden, пропагандирующий оформление сайтов с помощью CSS. В оформлении использовались хаки с флоатами и другие трюки, но технология была несовершенна. Далее, с развитием браузеров, появились инлайн-блоки. Они неплохо справлялись с расположением элементов в ряд, но тоже имели недостатки. И только в начале десятых появились новые модули раскладки: Flexbox и Grid Layout. О них и поговорим.

⏱Читать статью

Альтернатива обычным техническим иллюстрациям и визуализации данных

#почитать

Как правило, технические иллюстрации и визуализацию данных выполняли с помощью бумаги, ручек, карандашей, циркулей и линеек. Но теперь возможно всё - вы можете использовать как аналоговые, так и цифровые методы. С момента массового распространения интернета, данные (текстовые, числовые, символьные) получили широкое распространение и стали современной золотой валютой. Любой, у кого есть программное обеспечение или кто знает язык программирования, может легко научиться визуализировать данные. И сегодня подготовить технические иллюстрации стало намного проще, чем в предыдущие годы. Но это не всегда означает, что то, что делается сегодня, лучше того, что делалось раньше.

⏱Читать статью

Web Performance API: Измерьте важное

#почитать

От медленного к быстрому: Использование JavaScript Performance API для оптимизации веб-приложений

⏱Читать статью

CSS @supports

#почитать

Определение поддержки возможностей CSS и обеспечение интеллектуального отката с помощью @supports

⏱Читать статью