Привет, Хабр. Я продолжаю делиться «косяками» CSS, которые могут сбить нас с толку. Мне не нравится, что многие плюются от него. Конечно, не без оснований. Я их понимаю, потому что тоже плевался.
Только мне нравится CSS. Хоть и потратил множество часов на изучение неочевидных моментов, я не хочу, чтобы у языка была слава «костыля». Подумав, как помочь другим меньше мучиться, я собираю и объясняю неочевидности CSS.
Здравствуйте, уважаемые Хабрчане и гости!
Так как моя первая статья была опубликована и получила хоть какой-то положительный отклик, решил сделать еще одну статью, которую давно хотел написать.
В данной статье пойдет речь о стилях в Qt, конкретно я буду использовать для примера PySide6.
Опять же, статья не претендует на звание супер-туториала, а скорее носит характер некого «небольшого справочника» или «мини-гайда» для тех, кто хочет приукрасить свое приложение на Qt. Тем более я не pro в CSS, и делаю на пробу, эксперементрую.
В качестве примера возьму несколько виджетов, и постараюсь схематично наглядно показать, как некоторые строки из QSS (CSS для Qt) могут преобразить виджет.
В документации по Qt приводятся некоторые примеры, но я решил немного прочитать и в других источниках, и сделать наглядный пример.
Есть несколько способов, как можно применить стили к своему приложению (которые я знаю):
Фронтенд — это то, что видит и с чем взаимодействует каждый пользователь интернета, но как он работает на самом деле?
Хабр, привет! Я снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но пожалуйста, относитесь к этому контенту, как просто к альтернативному мнению. Мои техники не являются единственными правильными решениями.
Сегодня мы рассмотрим:
height со значением auto для изображений;Давайте посмотрим, что я вам подготовил.
Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах.
Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
Сегодня мы рассмотрим:
system-ui;Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.
Сайт в наше время является визитной карточкой не только компаний, которые продают товары и оказывают услуги. Свои веб-страницы заводят рок-группы, блогеры, благотворительные фонды. Даже у животных есть свои собственные сайты. Все это говорит о том, что специалисты по созданию сайтов востребованы. И научиться этому может каждый, даже школьник без специальных навыков.
HTML и CSS — это понятия, которые многим взрослым и детям знакомы с занятий школьной информатики, с уроков html для детей. С их помощью можно самостоятельно создать свой простой первый сайт.
Обучение детей HTML, JS и CSS дает школьникам необходимую основу для того, чтобы узнать, как работает верстка, дизайн и внутреннее управление сайтами. Эти навыки станут фундаментом для будущей карьеры в сфере веб-разработки или веб-дизайна.
В этой статье мы подробно рассмотрим, как реализовать анимацию с эффектом Hover для карточек, как показано ниже.
Хабр, привет! Я снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как к просто альтернативному мнению. Мои техники не являются единственными правильными решениями.
Сегодня мы рассмотрим:
min() и max();line-height;Давайте посмотрим, что я вам подготовил.
Здравствуйте, товарищи! Меня зовут Валик и в этой статье мы поговорим про подход Atomic CSS в верстке, разработку инструментов и смежные темы.
Кратко вспомним базу - почему Atomic CSS. Рассмотрим популярные решения для работы в этом подходе и сравним их с моим изобретением - mlut. Разберем проблемы известных инструментов и посмотрим, как я решил их в своем. Будут интересные архитектурные решения, технические детали и немного хардкора.
Те, кто занимается версткой, смогут по-другому взглянуть на Atomic CSS и, возможно, взять в работу новый инструмент. А те, кто пишет системный код и тулинг - получить вдохновение и перенять нестандартный опыт.
В последнее время на Хабре я опубликовал более десяти крупных статей на тему разработки собственного API с использованием FastAPI. Однако, в основном, эти статьи были теоретическими. Сегодня я решил создать чисто практическую статью, в которой мы с нуля и максимально быстро разработаем полноценный веб-сервис с фронтендом и бэкендом.
После этого мы выполним деплой этого приложения, чтобы любой пользователь мог им воспользоваться.
Теги hreflang — это атрибуты в HTML, которые помечают язык и региональную принадлежность веб-страниц. Они важны для того, чтобы поисковики, например Google, могли определять, какую именно версию страницы показывать пользователям в зависимости от их местоположения и языковых настроек. Это особенно критично для сайтов, которые доступны на нескольких языках и предназначены для разных регионов.
Я люблю box-тени.
Четыре года назад я выяснил, что мой процессор M1 может рендерить безумное количество таких теней, поэтому решил извлечь из них максимум, и мне это удалось. Если вам интересно, как пользоваться box-тенями, чтобы создать современный стиль UX, то вы не по адресу. Но если вам нравятся творчество и эксперименты, то продолжайте чтение.
Я хочу поделиться худшими примерами того, что можно сделать при помощи box-теней в одном div. Примерами, которые не должны работать, однако почему-то работают. Но прежде чем приступить, нужно ответить на вопрос: что же такое box-тень?
Привет, Хабр! Наткнулся на интересный и, как по мне, революционный проект WebSim AI. Покопался в нем несколько дней и сейчас, как вы уже поняли, решил с вами поделиться информацией о нем.
Проект WebSim AI представляет собой мощный инструмент для создания веб-страниц с минимальными усилиями, что может значительно ускорить процесс разработки как для новичков, так и для опытных специалистов.
Друзья, приветствую. Надеюсь, что вы ждали выхода данной публикации. На текущий момент, если вы следовали моим статья, то к настоящему моменту вы уже освоили:
- Основы создания простого приложения с использованием FastAPI.
- Основные HTTP‑запросы: POST, GET, PUT и DELETE.
- Принципы работы с Pydantic моделями и их интеграцию в FastAPI.
- Использование инструментов Alembic и SQLAlchemy для управления базой данных.
- Настройку асинхронной работы с базой данных PostgreSQL в SQLAlchemy.
- Реализацию кастомной авторизации и аутентификации в FastAPI.
На данный момент мы уже умеем создавать достаточно функциональное API с приличным набором возможностей, но что дальше? Кто и в каких ситуациях ним будет пользоваться, ведь API пишется именно для этого.
Хабр, привет! Я снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.
Сегодня я расскажу:
Давайте посмотрим, что я вам подготовил.
В одном из проектов мне нужно было создать сложную админку для крупного клиента. Интерфейс требовал большо количества интерактивностей, а также поддержку различных тем и динамических стилей. Именно тогда я решил обратить свой взгляд на CSS‑in‑JS библиотеки, и это для меня стало большим открытием.
Ведь стилизация компонентов — основа для создания интуитивно понятных и эстетически приятных интерфейсов. И иногда традиционные методы стилизации, такие как CSS‑файлы или препроцессоры, имеют свои ограничения и могут усложнять сам процесс разработки, чего мы точно не хотим.
Здесь вот и приходят на помощь решения CSS‑in‑JS, объединяющие фичи JS и CSS.
Привет, друзья разработчики и геймеры!
Мы с командой разработчиков "*** Telecom" решили весело и с увлечением сопоставить языки программирования с классами из мира World of Warcraft. Почему бы не объединить наше любимое хобби с нашей профессиональной деятельностью? Давайте вместе погрузимся в этот волшебный мир и узнаем, как каждый язык программирования может быть аналогом одного из классов в WoW!
class. Оно ведь нужно для связи HTML с CSS, правда? Сейчас я расскажу о том, почему настало время отказаться от него. Имена классов — это архаичная система, используемая как неудачный посредник для примитивов UI; ещё хуже то, что они создают ужасные сочетания, приводящие к комбинаторному взрыву странных пограничных случаев. Давайте изучим этот вопрос, начав со скучного урока истории, который вы уже слышали миллион раз.
Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня мы рассмотрим следующие аспекты:
display;aria-label при разметке областей навигации;Давайте начнём!