Статьи и практические материалы
Код и разработка сайтов
Статьи, инструкции и подборки: Программирование.
29 материалов
Обновлено
Меняем цвет текста и фона при клике на текст
Выбор одного из трёх текстовых вариантов с изменением фона и цвета: CSS-класс, classList и кнопки с aria-pressed без jQuery.
ЧитатьОбновлено
Рисуем график в Bootstrap
Линейный график Chart.js в сетке Bootstrap: JSON-данные, адаптивный canvas и точки по наведению. Архивный пример Chart.js 1.x и вариант API 4.x.
ЧитатьОбновлено
Меняем в Bootstrap класс у кнопки при нажатии
Переключение двух кнопок Bootstrap и сохранение выбора в localStorage. Различие btn-default в Bootstrap 3 и btn-secondary в Bootstrap 5.
ЧитатьОбновлено
Работаем с датами в JS
Работа с датами в Moment.js: форматирование, разницы, сравнение и русская локаль. Исторические результаты 2018 года и современный Intl.DateTimeFormat.
ЧитатьОбновлено
Почему JavaScript не защищает HTML от копирования
Разбор запрета выделения, перетаскивания и контекстного меню в JavaScript. Почему он не защищает текст и чем управление HTTP-кэшем отличается от запрета копирования.
ЧитатьОбновлено
Выделение всех чекбоксов одним кликом - JS
Чекбокс «Выделить всё» без перебора несуществующих ID: checked, состояние indeterminate и десять исходных пунктов с PHP-разметкой.
ЧитатьОбновлено
Вывод текста в стиле матрицы - JS
Эффект печатающегося текста на JavaScript: три фразы, задержка между символами и пауза между строками. Таймер с функцией вместо строкового выполнения.
ЧитатьОбновлено
Примеры работы с json массивами - PHP
Формирование и чтение JSON в PHP: пустой результат как массив, обработка ошибок, заголовок application/json, ограниченная выборка и безопасный HTML-вывод.
ЧитатьОбновлено
Удаляем записи из БД по выбранным чекбоксам - PHP
Удаление выбранных строк БД: POST-форма, CSRF-токен, разрешённые ID и prepared statements mysqli с проверкой владельца записи.
ЧитатьОбновлено
Удаляем символ BOM с файлов на сервере - PHP
Поиск UTF-8 BOM в текстовых файлах через PHP CLI: предварительный просмотр, ограниченный каталог, пропуск symlink и резерв перед изменением.
ЧитатьОбновлено
Почему нельзя выполнять входящий PHP-код через eval
Риск eval() с данными запроса и безопасная замена: фиксированный список разрешённых действий без исполнения пользовательского PHP-кода.
ЧитатьОбновлено
Формы обратного звонка и вопроса: отправка email на PHP
Две формы на PHP: обратный звонок в CSS-модальном окне и вопрос по email. Проверка полей, CSRF, фиксированный отправитель, экранирование HTML и обработка результата mail().
ЧитатьОбновлено
Работа со строками в PHP
Переносы строк, Unicode-фильтрация, проверка цифр, авторская транслитерация, HTML-экранирование и удаление последнего символа строки в PHP 8.
ЧитатьОбновлено
PHP и MySQL: подключение, выборка и основные операции
Подключение к MySQL через mysqli, проверка соединения, перебор истории заказов, prepared statements и ID вставленной записи. Особенности DISABLE KEYS для MyISAM.
ЧитатьОбновлено
Работаем с датами в MySQL
Unix-время и TIMESTAMP, prepared statements mysqli, разница дат и группировка звонков по календарным дням и месяцам. Таблица спецификаторов DATE_FORMAT.
ЧитатьОбновлено
Скрываем/Показываем по клику блок с текстом - JS
Раскрытие блока текста по нажатию: hidden, aria-expanded и addEventListener. Исторический пример и нативная альтернатива details/summary.
ЧитатьОбновлено
Пульсация (мерцание) текста в CSS
Пульсация текста через CSS keyframes: прозрачность, длительность и отключение анимации при prefers-reduced-motion.
ЧитатьОбновлено
Создаем меню с подкатегориями с помощью CSS
Меню с подкатегориями на CSS: вложенные списки, открытие по наведению и focus-within. Что предусмотреть для клавиатуры и сенсорного экрана.
ЧитатьОбновлено
Подсветка и выделение строки в таблице при наведении и клике - JS
Подсветка строки таблицы при наведении и выбор по нажатию. Исторический JS-пример, обработка через closest и переключение CSS-класса.
ЧитатьОбновлено
Плавно меняем цвет ссылки при наведении курсора в CSS
Плавная смена цвета ссылки в CSS с transition: длительность, задержка и состояние фокуса. Исправление опечатки в исходном фрагменте.
ЧитатьОбновлено
Делаем каждую вторую строку таблицы другого цвета - JS
Чередование цвета строк таблицы через CSS nth-child. Отличие отсчёта jQuery :even и разметка с отдельными thead и tbody.
ЧитатьОбновлено
Меняем картинку при наведении на ссылку
Переключение изображений собаки, кошки и грызуна по наведению, фокусу и нажатию. Исторический JS-пример и вариант с кнопками для клавиатуры.
ЧитатьОбновлено
Закрепляем шапку сайта с помощью CSS
Фиксированная шапка в CSS: позиция у верхней границы, ширина и отступ основного содержимого. Отличие position: fixed от sticky.
ЧитатьОбновлено
Выравниваем блоки, текст, картинки с помощью CSS
Центрирование текста, изображения и блока в CSS: вертикальное выравнивание, table-cell и современный flex. Условия работы и три исходных примера.
ЧитатьОбновлено
Выводим знак рубля (₽) на странице с помощью CSS
Как вывести знак рубля ₽ в HTML: символ Unicode U+20BD и числовая сущность. Старый CSS-вариант с перечёркнутой буквой сохранён как исторический пример.
ЧитатьОбновлено
Полезные настройки и команды Windows
Очистка локального кэша DNS в Windows командой ipconfig /flushdns. Что меняется после команды и какие проблемы браузера она не устраняет.
ЧитатьОбновлено
Рисуем карту метро Москвы с активными ссылками с помощью CSS
Исторический пример карты метро Москвы со ссылками: фон-карта и абсолютные CSS-координаты станций. Ограничения фиксированной схемы и адаптивности.
ЧитатьОбновлено
Горячие клавиши (hotkeys) для PhotoShop
Горячие клавиши Photoshop для Windows и архивный полный список из статьи 2018 года. Настройка сочетаний и отличия старых команд от текущей версии.
ЧитатьОбновлено
Удаление вирусов на сайте
Как искать вредоносные изменения на сайте: подозрительные PHP-фрагменты, сравнение с чистыми файлами, резервная копия и восстановление после проверки.
ЧитатьНичего не найдено
Попробуйте другое название или задачу.
Полезные ссылки по теме
MDN Web Docs
Справочник по HTML, CSS, JavaScript, HTTP и браузерным API с примерами применения.
developer.mozilla.orgДокументация TypeScript
Руководства по системе типов TypeScript, настройке компилятора и работе с JavaScript-проектами.
www.typescriptlang.orgДокументация Astro
Начало работы с Astro, маршрутизация, компоненты и сборка сайтов с контентом.
docs.astro.buildКурсы web.dev
Учебные материалы по HTML, CSS, JavaScript, доступности, формам и производительности сайтов.
web.devИнструменты для работы с сайтами
Сервисы для проверки, разработки и повседневных задач — в общем каталоге.