Рубрика: Полезные материалы

Работа с датами: как избежать путаницы между часовыми поясами

Путаница с датами начинается, когда момент времени, календарный день и местное расписание хранят одинаковой строкой. Для начала определите, что означает поле. Момент старта онлайн-события можно показать в разных поясах. Дату рождения.

Читать далее ➞

Доступная навигация с клавиатуры в небольшом веб-приложении

Для небольшой навигации обычно достаточно ссылок и кнопки раскрытия. Роли menu и menubar не следует добавлять только из-за привычного слова «меню»: они подразумевают другой сложный контракт. Покажем простую навигацию, в которой Tab.

Читать далее ➞

Поиск по каталогу спортивного инвентаря с задержкой ввода

Задержка ввода объединяет частые изменения в один запуск после небольшой паузы. Она полезна, когда обновление действительно заметно по стоимости. Для четырёх строк задержка не нужна ради скорости; здесь она добавлена как учебный.

Читать далее ➞

Как безопасно выводить пользовательский текст на странице

Когда пользователь вводит заметку, интерфейсу чаще всего нужен обычный текст, а не HTML. Самое полезное решение — сразу выбрать текстовый способ вывода. Удалять подозрительные слова регулярным выражением, а затем всё равно передавать.

Читать далее ➞

Модальные окна: фокус, закрытие и возврат к исходной кнопке

Модальное окно — это поведение фокуса и взаимодействия, а не только прямоугольник поверх затемнения. Для простой задачи начните с нативного dialog. Он снимает часть обязанностей, которые пришлось бы вручную реализовывать у обычного.

Читать далее ➞

Пагинация и кнопка загрузки: что выбрать для списка статей

Пагинация помогает перейти к определённой странице, а кнопка «Показать ещё» продолжает текущий список. Выбор зависит от задачи читателя: вернуться к известному месту, просматривать поток или делиться конкретным результатом. Сделаем.

Читать далее ➞

Тестирование функции подсчёта результатов любительской лиги

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

Читать далее ➞

CSS-классы как состояние интерфейса: преимущества и ограничения

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

Читать далее ➞

Отладка ошибок JavaScript с помощью инструментов браузера

Хорошая отладка начинается с воспроизводимого действия и конкретного расхождения. Не меняйте несколько условий сразу в надежде, что ошибка исчезнет. В примере запись существует, но поиск возвращает undefined: числовой id сравнивается.

Читать далее ➞

Как составить README, с которым проект сможет запустить другой человек

README считается полезным, когда другой человек может запустить проект без переписки с автором. Для этого нужны точная папка, команда, адрес и ожидаемый результат. Длинное описание идеи не компенсирует пропущенный шаг запуска. Сделаем.

Читать далее ➞