Всем привет!
Пока из каждого утюга рассказывают о различных ИИ-инструментах, агентах и прочих радостях упрощающих жизнь, я хочу рассказать о 11 незаслуженно потерянных фичах в недрах Chrome Devtools. Про фишки ИИ в DevTools рассказывать не вижу смысла, так как в нашем регионе они пока не работают.
Кстати, первая часть тут - тык.
Погнали!
Всем привет! Меня зовут Максим Иванов. Сегодня я хотел бы провести небольшой исторический экскурс и объяснить, почему Document Picture-in-Picture — это не просто способ отображать видео в формате «картинка в картинке», а новое и любопытное API, которое потенциально может заменить привычный всем window.open.
Возможность выводить видео в режиме PiP появилась еще в сентябре 2018 года в Chrome 69. С тех пор прошло более семи лет активного тестирования и развития. В 2019 году подобный механизм появился в Safari, а к 2020-му — и в Firefox.
Теперь, когда почти каждый браузер умеет открывать видео в отдельном плавающем окне, возникает логичный вопрос: могут ли браузеры с той же легкостью открывать в отдельном окне интерактивный HTML-контент, а не только видео? И если да, то каким образом? Давайте поговорим об этом ниже.
Представьте ситуацию: пятница, вечер, до релиза осталось два дня. Заказчик внезапно вспоминает, что «было бы неплохо генерировать договоры в PDF». Знакомо?
Я оказался в похожей ситуации год назад. Задача казалась тривиальной: взять HTML-шаблон счёта, подставить данные и получить красивый PDF. «Часа на два работы», — подумал я. Как ошибался...
Часто в работе возникает потребность жестко выдерживать тайминг при заслушивании серии докладов: при защите проектов, программ развития, дипломных работ и прочее. Если в повестке дня какого-либо мероприятия 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.
Скрипт запускается из консоли, продолжает работать даже в неактивной вкладке и доступен в открытом репозитории.
