CSS *

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

- Основы создания простого приложения с использованием FastAPI.

- Основные HTTP‑запросы: POST, GET, PUT и DELETE.

- Принципы работы с Pydantic моделями и их интеграцию в FastAPI.

- Использование инструментов Alembic и SQLAlchemy для управления базой данных.

- Настройку асинхронной работы с базой данных PostgreSQL в SQLAlchemy.

- Реализацию кастомной авторизации и аутентификации в FastAPI.

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

Хабр, привет! Я снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.

Сегодня я расскажу:

• какие правила у меня есть при именовании CSS-переменных для дизайн-систем;
• на какие логические свойства вам стоит обратить внимание;
• зачем нужно делать прозрачные рамки;
• как я делаю зависимость значения одного свойства от других более явным;
• про пользу «внутренних» переменных.

Давайте посмотрим, что я вам подготовил.

В одном из проектов мне нужно было создать сложную админку для крупного клиента. Интерфейс требовал большо количества интерактивностей, а также поддержку различных тем и динамических стилей. Именно тогда я решил обратить свой взгляд на CSS‑in‑JS библиотеки, и это для меня стало большим открытием.

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

Здесь вот и приходят на помощь решения CSS‑in‑JS, объединяющие фичи JS и CSS.

Привет, друзья разработчики и геймеры!

Мы с командой разработчиков "*** Telecom" решили весело и с увлечением сопоставить языки программирования с классами из мира World of Warcraft. Почему бы не объединить наше любимое хобби с нашей профессиональной деятельностью? Давайте вместе погрузимся в этот волшебный мир и узнаем, как каждый язык программирования может быть аналогом одного из классов в WoW!

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

Сегодня мы рассмотрим следующие аспекты:

• какие сюрпризы есть при использовании свойства display;
• о чём нужно помнить при вёрстке кнопки «Показать пароль»;
• зачем нужны подсказки с помощью атрибута aria-label при разметке областей навигации;
• как можно переборщить с заголовками и какие проблемы будут.

Давайте начнём!

Хабр, привет! Я частенько пишу про работу CSS, его неизвестные возможности и влияние на доступность. Кажется, этих направлений мало для меня. Теперь я хочу показать техники вёрстки, используемые мной постоянно.

Цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.

Сегодня я расскажу:

• как избавиться от соседнего родственного комбинатора + при реализации нестандартных чекбоксов и радиокнопок;
• про свойство inset, сокращающее код на целых три строки;
• мой сниппет для расширения интерактивной области у кнопок и ссылок;
• стиль написания медиа-запросов, позволяющий сократить количество правил;
• альтернативный способ центрирования элемента без свойства transform.

Hello, Developers!! Сегодня я расскажу о новой методологии для CSS, которая поможет вам сэкономить время на чтение и редактирование CSS-файлов. Методологию я придумал сам, если будут какие-то идеи, как улучшить её, буду рад обсудить это с вами в комментариях. Давайте же начнем.

Привет! Сегодня мы поговорим про flexbox в css. Это очень важная тема, в которой должен разбираться каждый фронтенд-разработчик или верстальщик. Я покажу вам как flexbox работает на реальных примерах. А в конце статьи покажу лайфхаки, которыми сам постоянно пользуюсь на работе.

Привет, Хабр. Я продолжаю отвечать на вопросы по вёрстке из собеседований на должность фронтендера. Если я где-то ошибаюсь, вы поправляете меня в комментариях. Таким способом я учусь у вас, а вы у меня.

Сегодня я отвечу на следующий вопрос: «Как скрыть элемент с помощью CSS доступно?»

Всем привет! Продолжаю раскрывать тему простой настройки VPS, NGINX и FastApi. В прошлой части мы раскрыли следующие темы: покупка VPS сервера, покупка доменного имени и создали простое FastApi приложение, которое подгружает index.html файл с простыми стилями.

Напоминаю, что написание всего контента было в рамках темы про запуск aiogram 3.x телеграм бота с технологией вебхуков в связке с FastApi. Раскрыл тему максимально подробно, так что если для вас было проблематично работать с вебхкуками, то милости прошу к моей статье.

Небольшой дисклеймер

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

Теперь к делу. Сегодня мы:

Привет, Хабр! Недавно я писал статью о запуске Telegram-бота на aiogram 3.x с использованием веб-хуков и FastAPI. В той статье я упустил такие важные темы, как создание FastAPI приложения, настройка NGINX, настройка VPS сервера и другие детали, которые могут затруднить работу с вебхуками для новичков.

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

Привет! На связи Кристина, фронтенд-разработчик в KTS.

Большое количество графики и анимаций потребляет достаточно много ресурсов. Однако благодаря оптимизации можно сделать так, чтобы всё работало без глюков и тормозов.

Рассказываю, как создавала CSS-анимации для игры из внутреннего спецпроекта, какие SCSS-фичи использовала для оптимизации кода и как сделала CSS-анимации более производительными.

Все верстальщики рано или поздно сталкивались с болью, которая заключается в адаптиве сайта под различные устройства. Существуют разные технологии, упрощающие подгонку размеров под определённые устройства, например, clamp(). Эта функция удобна, так как позволяет минимизировать использование брейкпоинтов, но у неё есть свои недостатки:

Цель этого руководства — познакомить вас со списком новых (потрясающих) возможностей, недавно появившихся в CSS.

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

Sprite Sheet — это техника в веб-разработке, позволяющая использовать множество различных кадров анимации, хранящихся в одном изображении. Это эффективный способ уменьшить количество HTTP-запросов к серверу и ускорить загрузку веб-страницы, так как все кадры анимации загружаются одновременно. (базовое определение которое дает чатгпт)

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

Сегодня мы рассмотрим следующие аспекты:

• какие скрытые проблемы с паттерном «visually-hidden» нас ждут;
• в каких ситуациях кнопка «Закрыть» указывает на выход;
• чем вредно значение contents у свойства display;
• почему подсказка с помощью атрибута aria-label вызывает недоумение.

Давайте начнём!

Мне очень понравился пост abbeyperini, и я решил поделиться своими советами после более чем 5-летнего опыта работы разработчиком программного обеспечения.

Готовы? Давайте погрузимся 💪.

1. Освойте основы

Дом, построенный на шатком фундаменте, развалится при малейшей проблеме.

Аналогично, если у вас нет прочных основ:

Демонстрация анимаций

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

После долгих лет ожидания в CSS теперь поддерживается достаточное количество математических функций, в частности, mod(), round() и тригонометрические функции. Пришло время вернуться к анимации, основанной на времени, надеюсь, на этот раз она будет более полезной.

Программа обучения Frontend-разработке.

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

Frontend-разработчик обеспечивает взаимодействие пользователей с веб-приложением, создавая удобный, интуитивно понятный интерфейс, который обеспечивает приятный опыт использования.