HTML *

Часто в работе возникает потребность жестко выдерживать тайминг при заслушивании серии докладов: при защите проектов, программ развития, дипломных работ и прочее. Если в повестке дня какого-либо мероприятия 10+ докладчиков, то без строгого соблюдения регламента невозможно не выбиться из графика. Как правило, это приводит к тому, что запланированное время мероприятия увеличивается кратно. А докладчикам, выступающим последними, фактически не достаётся должного внимания.

Обычно формат подобных защит подразумевает непосредственно сам доклад, ответы на вопросы комиссии, иногда сразу обсуждение (но чаще оно проходит в закрытом формате после заслушивания всех докладов). В такой ситуации важно чётко следить за временем. Прошерстив интернет, пересмотрев десятки онлайн-таймеров и десктопных приложений, я не нашел ничего подходящего. Таймера, имеющего автоматическое следование в несколько фаз (этапов) лично мне не удалось найти. Поэтому я решил разработать его сам.

Привет, Хабр!

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

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

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

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

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

Центров этих в районе десятка по стране. И до этого года все они работали на базе общей информационной системы.

Меня попросили что-то придумать с этим. О том, что нас отключат от системы, я узнал немного заранее. Рассмотрел open-source варианты систем, которые могут выполнять подобную задачу, и пришел к выводу, что проще написать такую систему с нуля (приоритетом было, чтобы преподаватели легко перешли на новую систему). Но прикидывая, сколько моих человеко-часов уйдет на эту задачу (да ещё и бесплатно), я плавно сливался с этой темы.

Собственно, я и не собирался ничего делать, но вспомнил, что хотел испытать, на что способна ИИ-шка при написании подобных задач с нуля. Обычно я мучаю DeepSeek и пару других gpt для простеньких скриптов, фикса багов, других проблем с Легаси, и просто для тупых вопросов. Поэтому решил в DeepSeek эту задачку и закинуть. Такого, честно, я не ожидал :)

В первой части мы создавали простого бота для управления одним сервером. Во второй — учили его измерять скорость и обновляться. Казалось бы, задача решена? Как бы не так.

В этой статье я расскажу, как проект VPS Manager перерос статус «скрипта для себя» и превратился в полноценную асинхронную платформу с Web-админкой, поддержкой Docker-кластера и базой данных SQLite. Встречайте версию 1.13.0.

Этот стартовый сборка для разработки статичного сайта на Webpack5. Максимально упростил разработку: можно подключать встариваемы модули шаблонов для страниц (header/footer), использовать SASS с удобными миксинами, автоматически собирать SVG-спрайты для иконок. Для продакшна - минификация CSS/JS, удаление console.log и разделение кода на чанки для кэширования.

Ключевые части сборки: html-webpack-plugin генерирует HTML из src/html/views, raw-loader подтягивает include-фрагменты.

SCSS миксины для удобных медиа запросов, краткой их записи +r($md).

Автоматическая генерация SVG-sprite, svg-sprite-loader собирает все src/icons/*.svg в inline-спрайт — иконки затем вставляются в шаблоны через .

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

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

Казалось бы, задача простая: берёшь любую библиотеку, читаешь файл и показываешь. На практике всё оказалось гораздо интереснее.

На SOC Forum у нас стоял гоночный симулятор Assetto Corsa — и мы решили сделать его не просто развлечением, а полноценным источником аналитики.

Мы подключились к Shared Memory игры, собрали данные в реальном времени, построили дашборды и придумали ачивки.

Рассказываю, как устроена телеметрия AC, как собрать её в режиме реального времени и зачем всё это понадобилось.

Я, Алексей Борискин из команды ТехВилла, рассказываю, как мы сделали первый в России offline-first PWA для курьеров-партнеров. Теперь никакой зависимости от интернета — ваши заказы закрываются своевременно, и сотни курьеров-партнёров работают спокойно даже при полном отсутствии связи.Подробнее об этом проекте и других технических деталях — в моём канале: https://t.me/dostavka_bagov.

Введение

Обучающая программа «L'école» (см. мою статью: «Роль данных при изучении иностранного языка» – https://habr.com/ru/articles/930868/ ) предназначена для освоения иностранного языка по методу: «Запоминание руками + интерактивный звук + чтение по слогам + буквальный контекстный перевод». Саму программу и демо-данные к ней, на разных языках, можно непосредственно скачать из: https://disk.yandex.ru/d/5yjYP4JP1aVnIw .

И, если с обучающей программой, более-менее, всё понятно, то по данным (компьютерным урокам) остаются некоторые вопросы.

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

Как известно, изучение иностранного языка предполагает четыре навыка:

1. Понимание письменной речи.

2. Понимание устной речи.

3. Умение писать.

4. Умение говорить.

По сути, они, очень грубо, распадаются на две большие группы:

1. Звук и

2. Текст.

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

Экспериментируя с изучением французского языка, я пришел к выводу, что хорошо работают следующие навыки:

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

Мы продолжаем делать тултипы, которые “следуют” за своим якорем, и на этот раз поработаем с новыми позициями и изучим новые приёмы. Я буду исходить из того, что вы прочитали и поняли первые две части, поэтому не стану заново объяснять уже разобранные вещи. Сразу предупрежу: если вы их пропустили, местами можно ощутимо запутаться.

Baseline: ноябрь 2025

Обзор на браузерные API, которые стали Widely available в ноябре 2025. Раз в месяц я буду вам напоминать, что вы уже можете использовать в проде.

Каждый месяц выходят новые CSS-свойства, HTML-атрибуты, JavaScript-методы и WebAPI, но применять в проде мы их конечно же не будем.

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

Представим распространённые ситуации:

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

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

Данная статья предлагает решение данных проблем путём изменения и/или создания файлов изображений «налету» прямо перед отправкой на сервер. (Спойлер: это просто). Здесь вы найдёте исчерпывающую информацию для разработки специальных собственных скриптов, а так же готовое решение, которое можно просто подключить и пользоваться.

Видео стало неотъемлемой частью нашей жизни: мы смотрим его на смартфонах, ноутбуках и всё чаще — на телевизорах. Несмотря на то, что видеосервисы традиционно ориентировались на мобильные устройства, за длинным контентом пользователи идут именно на большие экраны, и это подтверждается ростом времени просмотра. Сегодня среднее дневное время смотрения VK Видео на Smart TV достигает 216 минут.

И тут начинается самое интересное: телевизоры — это особый мир со своими капризами и законами. Официальные спецификации обещают поддержку HLS, DASH, 4K, 60 FPS. На практике поддержка функций зависит не столько от новизны модели, сколько от того, как это реализовано у конкретного производителя. В одних устройствах всё работает корректно, в других — частично или вовсе не запускается. Новая модель при этом не всегда гарантирует лучшее воспроизведение видео.

Меня зовут Игорь Горяйнов, я программист в команде веб-технологий Единой видеоплатформы VK. Ниже расскажу, как команда прошла путь от нативных плееров к собственному веб-решению для ТВ, какие задачи пришлось решать и что это дало пользователям.

Привет, на связи Виктор Степанов, лид одной из core-команд GitVerse. Сегодня хочу поговорить о важном аспекте нашей платформы — пользовательском опыте. А именно о том, как мы разрабатывали тёмную тему для GitVerse. Это был не просто косметический апгрейд, а полноценный инженерно-дизайнерский проект, в котором переплелись эргономика, технические ограничения и, конечно, ожидания пользователей.

Обзор на браузерные API, которые стали Widely available в октябре 2025. Раз в месяц я буду вам напоминать, что вы уже можете использовать в проде.

Каждый месяц выходят новые CSS-свойства, HTML-атрибуты, JavaScript-методы и WebAPI, но применять в проде мы их конечно же не будем. 2.5 года назад также каждый месяц выходили новые фичи в браузере, а вот их уже пора начинать применять.

Всем привет. Я Артем Курочкин, frontend разработчик компании DD Planet.

Сегодня я расскажу об одном из ключевых нововведений в React, представленных на React Conf 2025. Прошу любить и жаловать ViewTransition - нативная поддержка view transition api в экосистеме реакта.

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

У меня в VK несколько тысяч друзей, и истории давно превратились в шум: много людей, с которыми я не общаюсь, старые контакты, рабочие связи.

При этом удалять всех подряд из друзей не хочется, потому что сеть полезна для проектов и продвижения.

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

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

GitHub

После работы с React/Vue/Angular захотелось вернуться к основам, но с современными возможностями. Сделал RWC — библиотеку реактивных веб-компонентов.

Ключевые преимущества:
• Совместимость — компоненты работают в любом проекте
• Производительность (сигналы для реактивности) — точечные обновления DOM
• Простота — минимальный API, легко обучать команду
• TypeScript-first — типизация из коробки без костылей

Компоненты, написанные на RWC, можно встроить в React, Vue, Angular или даже legacy jQuery-проект. Никакого vendor lock-in.

Библиотека весит <10KB, компоненты работают в любом проекте.

Пора к части второй! У нас уже есть очень хорошие функциональные тултипы с позиционированием, но они в основном «смотрели» вверх или вниз и смещались у краёв, чтобы избежать выхода за границы. Теперь мы пойдём дальше и рассмотрим четыре позиции без смещений.

Устал от однообразных каруселей? В статье показываю, как шаг за шагом собрать 3D-таймлайн-слайдер с перспективной сеткой, плавной прокруткой и переключением категорий на чистом TypeScript и CSS.