Верстальщик от бога

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

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

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

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

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

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

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

align-content: Простой способ выравнивания по центру #почитать Наконец, можно центрировать/выравнивать по центру содержимое блочных макетов, не прибегая к flexbox гимнастике ⏱Читать статью

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

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

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

Переходите на сторону light-dark() #почитать

За последние несколько лет интерфейсы с темным режимом сильно изменились. Все мы знаем традиционный подход с использованием медиа-запросов, но в этой статье Sara Joy демонстрирует современные CSS-функции, благодаря которым соблюсти предпочтения пользователя в выборе цветовой схемы становится чертовски просто.

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

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

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

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

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

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

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

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

Упрощаем CSS-анимации с помощью свойств display и размеров элемента #почитать До недавнего времени далеко не все свойства CSS можно было анимировать. Например, чтобы создать эффект плавного появления или исчезновения элемента, приходилось использовать свойство opacity, а не display, поскольку display нельзя было анимировать. А проблема в том, что визуально скрытый элемент всё же оставался на странице. ⏱Читать статью

Frontend Masters: принципы SOLID в React/React Native #почитать SOLID — это группа из пяти важных правил проектирования программного обеспечения. Эти правила помогают сделать код понятным, гибким и удобным для сопровождения. ⏱Читать статью

CSS Grid Layout: Асимметричная резиновая сетка #почитать

В веб-дизайны сетки, как в Pinterest уже давно не являются чем-то новым. Но что, если нужно сделать блоки различной высоты, при этом чтобы верстка была резиновой. Оказывается, это можно сделать, используя только стандартные возможности CSS Grid Layout.

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