[Перевод] Анимации CSS, основанные на времени

[Перевод] Анимации CSS, основанные на времени

Демонстрация анимаций В моем предыдущем посте Time Uniform For CSS Animation я рассказал о способе создания CSS-анимации с использованием тиков вместо ключевых кадров. Он был ограничен в применении, поскольку в CSS отсутствовала возможность выполнять сложные математические вычисления. После долгих лет ожидания в CSS теперь поддерживается достаточное количество математических функций, в частности, mod(), round() и тригонометрические функции. Пришло время вернуться к анимации, основанной

Подробнее
Путь Frontend разработчика. Как им стать? (Часть 1. Основы)

Путь Frontend разработчика. Как им стать? (Часть 1. Основы)

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

Подробнее
Рендерим таблицы с помощью Symbiote.js

Рендерим таблицы с помощью Symbiote.js

В этой статье, я хочу показать базовые приемы работы с HTML-таблицами при использовании библиотеки Symbiote.js и раскрыть на практике некоторые ее важные особенности. Читать далее

Подробнее
Как мы применяем гибкую вёрстку для адаптива страниц под большие экраны

Как мы применяем гибкую вёрстку для адаптива страниц под большие экраны

Привет! Меня зовут Оля и я расскажу о том, как мы при помощи гибкой вёрстки настроили отображение контента на широких экранах. Эта статья будет полезна разработчикам веб-сайтов и послужит примером использования CSS при разработке адаптивности сайта для экранов свыше 1921 пикселей. Читать далее

Подробнее
[Перевод] Применение ключевого слова revert-layer в CSS

[Перевод] Применение ключевого слова revert-layer в CSS

В веб-разработке не так просто добиться идеально масштабируемого дизайна для разных браузеров и устройств. Трудности могут возникать везде, от настройки стиля для экранов разных устройств до переопределения стилей, попавших в наш код неизвестно откуда. Читать дальше →

Подробнее
[Перевод] Сложнейшая проблема компьютерных наук: центрирование

[Перевод] Сложнейшая проблема компьютерных наук: центрирование

Заявляю: «Мы, как цивилизация, разучились использовать центрирование». Ну то есть мы, конечно, знаем, как это делать — очень просто: display: flex;justify-content: center; /* Горизонтальное центрирование */align-items: center; /* Вертикальное центрирование */ Не спрашивайте, почему вам нужно запомнить четыре слова вместо просто горизонтальное/вертикальное; всё равно лучше, чем было до этого. Ещё можно использовать сетку: display: grid;justify-items: center; /* Горизонтальное…

Подробнее
Путь развития (Roadmap) Frontend разработчика

Путь развития (Roadmap) Frontend разработчика

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

Подробнее
Дизайн-разбор ссылок в вёрстке

Дизайн-разбор ссылок в вёрстке

Привет! Это первая статья из серии разборов элементов веб-вёрстки для дизайнеров интерфейсов (и немного аналитиков). Разберём атрибуты разных тегов, свойства, которые можно к ним применить, поведение в разных обстоятельствах. А главное – как они влияют на то, что видит пользователь на экране (и слышит), и какие неочевидные моменты можно продумать в дизайне заранее. Начнём со ссылок, которые обозначаются в HTML тегом . Читать далее

Подробнее
[Перевод] Часы на синусах и косинусах в CSS

[Перевод] Часы на синусах и косинусах в CSS

В этой статье осторожно прикоснёмся к sin() и cos(). Есть и другие функции, в том числе tan(), зачем же останавливаться только на синусе и косинусе? Они идеальны для размещения текста по краю круга. Об этом уже рассказывалось на CSS-Tricks, когда Крис поделился подходом к размещению текста по кругу с миксинами Sass. Это было шесть лет назад [оригинал опубликован 8 марта 2023 года], поэтому поработаем с размещением чисел по-новому. Вот о чём я говорю: Читать дальше →

Подробнее
Костыли из 90-х и принцип HTML First

Костыли из 90-х и принцип HTML First

Кадр из презентации Frontmania 2022: Kilian Valkhof — Stop using JavaScript for that Недавно на Хабре публиковался перевод статьи «Вам не нужен для этого JavaScript» с примерами, где код JS легко заменить на HTML. На самом деле возврат к основам HTML, простым сайтам и читаемому коду без сложных фреймворков — довольно популярная идея. Сейчас всё больше сайтов создаётся по принципу HTML First. Читать дальше →

Подробнее
Предсказание от We Wizards: сегодня вас ждут успех в делах и новые скиллы

Предсказание от We Wizards: сегодня вас ждут успех в делах и новые скиллы

Вместе с Creative Developer We Wizards Даниилом Сарабьевым сделаем сервис, позволяющий получить случайный набор закрытых таро с возможностью вскрыть выбранные карты. Читать далее

Подробнее
Азы поисковой оптимизации для веб-разработчика: прокачиваем SEO с помощью кода и здравого смысла

Азы поисковой оптимизации для веб-разработчика: прокачиваем SEO с помощью кода и здравого смысла

Привет, Хабр! Поисковая оптимизация обычно ассоциируется только с производством контента, а роль веб-разработчиков в ней часто недооценивают. Мы с этим не согласны. В этой статье обсудим технические детали верстки оптимизированных под поисковые движки веб-страниц, а для закрепления знаний создадим по всем правилам и задеплоим на сервер небольшой сайт. Это не ультимативный гайд, а скорее шпаргалка о том, как сделать красиво, функционально и так, чтобы целевая страница попадала в топ выдачи.

Подробнее