Базы данных
Как сгруппировать строки SQL по двум столбцам
GROUP BY использует сочетание ключей. Разберём повторяющиеся продажи, сумму по группе и фильтрацию результата.
SmartQuery · интерфейс
Система ясного ответа
От вопроса к входным данным, коду и результату. Здесь собраны реальные элементы главной, каталога, поиска и статьи, их устройство и ограничения.
Основы: знак, цвет, ритм
16 px
32 px
48 pxСветлая тема
Фон страницы
--page: #f2f6fcПоверхность
--surface: #ffffffОсновной текст
--text: #101c2cВторичный текст
--muted: #46576eСсылка и действие
--link: #254fffГраница
--border: #6b7e99Фокус клавиатуры
--focus: #254fffОсновное действие
--solid: #254fffТекст действия
--on-solid: #ffffffВыделение результата
--accent: #d7ef54Текст результата
--on-accent: #101c2cТекст, ссылка, граница и кольцо фокуса имеют отдельные семантические роли. Ошибка объясняется словами, а не одним цветом.
Тёмная тема
Фон страницы
--page: #101722Поверхность
--surface: #182438Основной текст
--text: #edf3fcВторичный текст
--muted: #b6c5daСсылка и действие
--link: #83b6ffГраница
--border: #6f87a8Фокус клавиатуры
--focus: #d7ef54Основное действие
--solid: #83b6ffТекст действия
--on-solid: #101722Выделение результата
--accent: #d7ef54Текст результата
--on-accent: #101c2cТекст, ссылка, граница и кольцо фокуса имеют отдельные семантические роли. Ошибка объясняется словами, а не одним цветом.
Типографическая шкала
ТЕМА · МЕТКА
Вопрос становится заголовком
Пояснение читается обычным текстом: DISTINCT удаляет повторения строк; GROUP BY собирает строки в группы.
SELECT department, COUNT(*)
FROM employees
GROUP BY department;| Токен | Значение |
|---|---|
| font-body | Plex,system-ui,sans-serif |
| font-code | PlexMono,ui-monospace,monospace |
| font-size | 18px |
| font-size-small | 17px |
| line-height | 1.7 |
| prose-measure | 62ch |
| code-size | 14px |
| code-size-small | 13px |
Сетка и адаптация
| Токен | Значение |
|---|---|
| gutter | 48px |
| radius | 4px |
| space | 8px |
| gutter-small | 20px |
| max-width | 1280px |
| rail-width | 208px |
| article-rail | 224px |
| control-height | 48px |
Колонка чтения ограничивает длину строки. Каталог использует боковую навигацию и список ответов; на узком экране порядок остаётся линейным. Широкие код и таблицы прокручиваются внутри своих регионов.
Управление и навигация
Настоящие адреса каталога доступны через нативные ссылки. Tab переносит фокус, Enter открывает страницу; текущий адрес отмечен aria-current.
Оформление
Тот же компонент, что в шапке: Enter или пробел переключает Система → Светлая → Тёмная. Стрелки, Home и End выбирают режим напрямую. Выбор сохраняется между страницами.
Режимы по кругу: Система, Светлая, Тёмная. Enter или пробел переключают режим. Стрелки выбирают соседний, Home — Система, End — Тёмная.Живой поиск по справочнику
Это работающая форма с тем же поисковым индексом и скриптом, что на странице поиска. Введите вопрос, выберите тему или запрос без совпадений.
Загрузка поиска…
Анатомия ответа
Заголовок вопроса → краткий ответ → разобранный пример → детали → связанный материал. Здесь используется тот же компонент примера, что и на реальных страницах.
Разбираем на примере / PostgreSQL / GROUP BY
Три продажи. Две группы.
Исходные строки · sales
| region | product | amount |
|---|---|---|
| East | Book | 10 |
| East | Book | 20 |
| West | Book | 5 |
Операция
SELECT region, product, SUM(amount) AS total
FROM sales
GROUP BY region, product
ORDER BY region, product;Результат
Разобрать пример целиком ↗| region | product | total |
|---|---|---|
| East | Book | 30 |
| West | Book | 5 |
East / Book: 10 + 20 = 30. West / Book: одна строка, 5.
Разбираем на примере / PostgreSQL / NULL
Что вернёт LEAST(10, NULL, 5)?
Аргументы
Три аргумента: 10, NULL и 5.
Операция
SELECT LEAST(10, NULL, 5);Результат
Разобрать пример целиком ↗5
NULL игнорируется, если есть обычные значения. Если все аргументы NULL, результат тоже NULL.
Строки каталога
Языки и платформы
Byte в Kotlin: диапазон, арифметика и массивы
Где нужен восьмибитный тип и почему сумма двух Byte имеет тип Int.
Базы данных
LEAST в PostgreSQL: минимум из значений и NULL
Почему LEAST(10, NULL, 5) возвращает 5 и чем выбор значения отличается от MIN по строкам.
Числа и формулы
Byte: −27 ≤ x ≤ 27 − 1, то есть −128…127. Формула остаётся текстом и читается без изображения.
8 бит дают 256 различных битовых комбинаций. Знаковый Byte использует диапазон от −128 до 127.
Оглавление
Содержание статьи
Мобильное оглавление открывается клавишами Enter или Space; ссылки ведут к настоящим разделам этой страницы.
Состояния настоящих функций
Что опубликовано
Справочник содержит восстановленные материалы. Сведения об источниках и границах восстановления доступны на странице о проекте.
В живом поиске выше доступны загрузка индекса, количество найденных материалов, пустой результат и объяснение ошибки загрузки. Нативная кнопка недоступна до готовности индекса; повторный поиск не требует отдельного демонстрационного действия.
Изображения в статьях сохраняют альтернативный текст. При отказе загрузки появляется объяснение и кнопка повторной попытки. Открыть материал со схемой Byte.
Контракты компонентов
Подписи ниже связывают API с исходным модулем и настоящей страницей-потребителем. Это документация интерфейса; исходные Python-файлы не публикуются как файлы сайта.
Ссылка
link(href, label, css="", current=False)
Источник: src/shared/ui/primitives.py
- Анатомия
- Текст → адрес → необязательный текущий пункт.
- Варианты и состояния
- Обычная; текущая aria-current; посещённая средствами браузера.
- Клавиатура и адаптация
- Tab переносит фокус; Enter открывает адрес. Подпись переносится; адрес не заменяется обработчиком.
Кнопка
button(label, disabled=False, kind="submit")
Источник: src/shared/ui/primitives.py
- Анатомия
- Нативная button, видимая подпись, тип действия.
- Варианты и состояния
- Доступная; disabled во время загрузки индекса.
- Клавиатура и адаптация
- Tab, Enter и Space. Недоступная кнопка не принимает фокус. Не обещает выполнение кода.
Поле запроса
field(label, ident="q", name="q", value="", placeholder=...)
Источник: src/shared/ui/primitives.py
- Анатомия
- Связанные label/for и input/type=search; значение экранируется.
- Варианты и состояния
- Пустое; заполненное; focus; очистка средствами браузера.
- Клавиатура и адаптация
- Один #q на странице; Enter отправляет форму. На узком экране поле занимает доступную ширину.
Выбор темы поиска
select_field(label, ident, options)
Источник: src/shared/ui/primitives.py
- Анатомия
- Подпись → select → пары (value, text).
- Варианты и состояния
- Все темы; выбранная тема; focus.
- Клавиатура и адаптация
- Нативные стрелки, Space и Enter; без отдельной имитации меню.
Сообщение
notice(title, text, kind="warning", demo=False)
Источник: src/shared/ui/primitives.py
- Анатомия
- Секция → заголовок → объяснение. Цвет дополняет текст.
- Варианты и состояния
- Нейтральное пояснение на странице о проекте; ошибки поиска принадлежат поисковой функции.
- Клавиатура и адаптация
- Текст читается последовательно; статическое сообщение не перехватывает фокус и не изображает live alert.
C04 · Код
code_block(code, label); code_scroll(markup, label)
Источник: src/shared/ui/primitives.py
- Анатомия
- Моноширинный pre/code внутри именованного горизонтального региона.
- Варианты и состояния
- Короткий; широкий; многострочный с сохранением отступов.
- Клавиатура и адаптация
- Tab на регион; стрелки для горизонтального чтения. Страница не должна расширяться вслед за длинной строкой.
C05 · Таблица
data_table(headers, rows, caption=None); table_scroll(markup, label)
Источник: src/shared/ui/primitives.py
- Анатомия
- Подпись → заголовки колонок → строки; горизонтальная рамка.
- Варианты и состояния
- Компактная и широкая; реальные заголовки и строки данных.
- Клавиатура и адаптация
- Табличные связи сохраняются; Tab на регион и горизонтальная прокрутка. Колонки не превращаются в случайный список.
Q02, C02 · Строка ответа
answer_row(answer, number)
Источник: src/entities/answers/summary.py
- Анатомия
- Тема и заголовок → краткий ответ → ссылка на материал.
- Варианты и состояния
- Полная строка; длинный заголовок; разные предметные области.
- Клавиатура и адаптация
- Настоящая ссылка с видимым фокусом. На мобильном содержимое идёт в порядке чтения.
C01 · Разобранный пример
worked_example(example)
Источник: src/entities/answers/examples.py
- Анатомия
- Задача → входные данные → код → ожидаемый результат → объяснение.
- Варианты и состояния
- SQL GROUP BY; PostgreSQL LEAST; общая композиция главной и справочника интерфейса.
- Клавиатура и адаптация
- Код и результат доступны без запуска и без изображения текста.
N03 · Страницы
pagination(base, page, total)
Источник: src/features/navigation/__init__.py
- Анатомия
- Именованная nav → страницы → текущая aria-current.
- Варианты и состояния
- Одна страница скрывает навигацию; несколько показывают настоящие адреса.
- Клавиатура и адаптация
- Tab/Enter. Текущая страница не маскируется активной кнопкой; нет демонстрационной 404-ссылки.
F01 · Тема оформления
control(ident="site-theme"); head_script(); assets()
Источник: src/features/theme/__init__.py
- Анатомия
- Одна нативная кнопка → иконка 18px → короткое имя текущего режима; без меню и постоянной прямоугольной рамки.
- Варианты и состояния
- Системная; светлая; тёмная; недоступное хранилище.
- Клавиатура и адаптация
- Click/Enter/Space переключают Система → Светлая → Тёмная; стрелки/Home/End выбирают режим. Доступное имя сообщает текущий и следующий режим, polite-status — только пользовательское изменение. Выбор сохраняется; Система следует живой настройке ОС.
F01–F03 · Цвет, типографика и сетка
stylesheet(); token_rows(); TOKENS: dict[str, dict[str, str]]
Источник: src/shared/styles/__init__.py
- Анатомия
- Семантические переменные → типографическая шкала → отступы и колонки.
- Варианты и состояния
- Светлая/тёмная; русский текст/код/числа; узкая/широкая композиция.
- Клавиатура и адаптация
- Шрифтовый fallback и фактические переносы требуют проверки точной сборки на 320/390/1440 px.
B01, S01 · Знак и шапка
document(site: dict, title: str, body: str, path="/", description=None, page_kind="page")
Источник: src/widgets/site_shell/ui.py
- Анатомия
- Skip → бренд со ссылкой домой → главная навигация → компактная кнопка оформления.
- Варианты и состояния
- Обычная/инверсная палитра; текущий маршрут; узкая шапка; знак 16/32/48.
- Клавиатура и адаптация
- Skip ведёт к #main; Tab проходит реальные ссылки. Оптическое качество значка требует личной приёмки.
S02 · Подвал
document(...): общая композиция footer
Источник: src/widgets/site_shell/ui.py
- Анатомия
- Назначение справочника → карта → сведения → приватность → интерфейс.
- Варианты и состояния
- Широкий ряд; перенос на узком экране; visited/focus ссылок.
- Клавиатура и адаптация
- Ссылки ведут на существующие страницы, доступны Tab/Enter; адрес приватности не заменяется демо-кнопкой.
N01 · Хлебные крошки
breadcrumbs(category: str, slug: str) -> str
Источник: src/features/navigation/__init__.py
- Анатомия
- Главная → раздел темы; декоративный разделитель скрыт от чтения.
- Варианты и состояния
- Короткая тема; перенос длинного текста; focus.
- Клавиатура и адаптация
- Нативные ссылки; порядок сохраняется при переносе. Последний элемент не подменяет заголовок статьи.
N02 · Оглавление
contents(items: list[tuple[id, title, level]], mobile=False) -> str
Источник: src/features/navigation/__init__.py
- Анатомия
- Заголовки h2 → якорные ссылки → desktop aside или mobile details.
- Варианты и состояния
- Менее трёх h2: отсутствует; desktop; mobile collapsed/expanded.
- Клавиатура и адаптация
- Details открывается Enter/Space; якорь сохраняется. Автоматическое выделение текущего раздела не реализовано.
Q01–Q04 · Поисковый жизненный цикл
search_form(ident="search-form", value="", loading=False); search_filters(categories)
Источник: src/features/search/__init__.py
- Анатомия
- label/input/button → select темы → polite status → список либо empty/error.
- Варианты и состояния
- До загрузки; готов; запрос+тема; ноль; ошибка fetch; без JavaScript.
- Клавиатура и адаптация
- Единственный #q; фильтр нативный. Canonical search.js управляет теми же ID на поиске и в этой странице.
C02, C03 · Глубина вопроса и полный ответ
article_page(site, answer, articles); render_body(article)
Источник: src/pages/article/ui.py
- Анатомия
- Вопрос → lead → исходное тело → код/таблицы/формулы → продолжение.
- Варианты и состояния
- Короткий LEAST; длинный PostgreSQL; Byte с числовым диапазоном; концептуальный материал.
- Клавиатура и адаптация
- Полное тело не сокращается ради карточки; код сохраняет отступы. Переносы, anchor focus и обе темы проверяются в браузере.
C06 · Числа и формулы
render_body(article): исходные sup/sub, inline code и Unicode
Источник: src/entities/answers/body.py
- Анатомия
- Значение → оператор → диапазон → единица/тип и пояснение.
- Варианты и состояния
- −128…127; степени двойки; NULL в LEAST; inline code.
- Клавиатура и адаптация
- Текст доступен при отсутствии изображений. Общий математический движок не заявлен.
C07 · Медиа и отказ загрузки
figure_frame(markup: str, label: str); features.media assets()
Источник: src/shared/ui/primitives.py; src/features/media/client.js
- Анатомия
- Рамка → img с alt → подпись/текстовый эквивалент → объяснение при отказе.
- Варианты и состояния
- Загрузка; успешно; ошибка; повторная попытка — поведение production media feature.
- Клавиатура и адаптация
- Текст и альтернативное описание остаются доступны; точная проверка отказа и retry относится к браузерной приёмке.
C08 · Источники и продолжение
source_label(source: dict); related_articles(article: dict, articles: list[dict])
Источник: src/entities/answers/relationships.py
- Анатомия
- Понятная подпись первоисточника → смысловая связь со следующим вопросом.
- Варианты и состояния
- Источники; релевантные связи; отсутствие смысловой пары без заполнения случайной темой.
- Клавиатура и адаптация
- Нативные ссылки с понятной подписью и visited/focus; исходящие адреса проходят отдельный редакционный ledger.
Композиции реальных страниц
Полная страница собирается из общей шапки, навигации, содержимого и подвала. Ссылки открывают настоящие композиции с теми же компонентами.
Главная
Знак и поиск → ориентир по темам → вопросы и короткие ответы → следующий шаг.
Каталог
Заголовок → темы → строки ответов → страницы; адрес темы остаётся настоящей ссылкой.
Поиск
Запрос → фильтр темы → статус загрузки/количество → результаты или объяснение пустого состояния.
Статья: вопрос → доказательство → продолжение
Byte в Kotlin: диапазон, арифметика и массивы · Введение в PostgreSQL: установка, подключение и первые SQL-команды · LEAST в PostgreSQL: минимум из значений и NULL
Общая рамка: знак, поиск, кнопка оформления; затем хлебные крошки, заголовок и пояснение, содержание, тело ответа с кодом/таблицей и связанные вопросы. Примеры выше используют те же публичные функции.
Текущая ревизия источников: 83b477bd5541f2ceb00b4cfe5c6df92e37495788.