Обновить
455.34

Веб-разработка *

Делаем веб лучше

Сначала показывать
Порог рейтинга
Уровень сложности

Разрабатываем PWA. Полная инструкция по работе с Web App Manifest и Service Worker

Уровень сложностиСредний
Время на прочтение8 мин
Охват и читатели6.6K

Привет! Меня зовут Сергей Васильев, я фронтенд-разработчик в AGIMA. Наша команда часто работает с PWA — прогрессивными веб-приложениями. Они стали особо популярны в последние три года, когда из-за санкций некоторым корпорациям пришлось отказаться от мобильных приложений. Но и раньше многие компании с интересом смотрели на это решение.

Ниже расскажу, как сделать из обычного веб-приложения прогрессивное: вместе настроим Web App Manifest и Service Worker. Если вам еще не доводилось работать с PWA — текст точно для вас.

Читать далее

Пробуем Codex CLI от OpenAI для доработки ХрюХрюКара

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели1.9K

Пару дней назад я опубликовал статью про ХрюХрюКар - телегам-бот для борьбы со стоянкой автомобилей на зелёных зонах. Проект с открытым исходным кодом.

За два дня ко мне обратилось несколько сторонников с просьбой добавить их города. Но вот незадача: у меня была возможность через админ-панель Django править данные в базе, но об этом кеш сервера не узнает (основной бекэнд на Go). В результате приходилось добавлять данные и перезагружать контейнеры с go-бекэндом вручную.

Основные серверы ХХК уже имели сторы, которые получают и обрабатывают апдейты, прилетающие через redis.

По сути, оставалось внести правки в часть django-бэкенда, чтобы обрабатывать сигналы pre_save и pre_delete, сериализовать данные и отправлять их в нужный канал редиса.

Решил поручить эту задачу Codex CLI, которую вчера OpenAI представили нам с вами. 

Читать далее

Книга: «Создание фронтенд-фреймворка с нуля»

Время на прочтение3 мин
Охват и читатели3.5K
Привет, Хаброжители!

Мы используем фронтенд-фреймворки каждый день. А понимаем ли мы, что происходит там, под капотом? Книга Анхеля Солы Орбайсеты «Создание фронтенд-фреймворка с нуля» предлагает уникальный подход к изучению этой темы — через практическое создание собственного фреймворка. Автор убежден, что лучший способ понять принципы работы фреймворков — самостоятельно реализовать их ключевые механизмы.
Читать дальше →

Вкалывают роботы, а не человек: как мы разработали ТГ-бота, который в 4 раза ускорил проведение маркетинговых акций

Уровень сложностиСредний
Время на прочтение24 мин
Охват и читатели1.4K

Привет, хабровчане! Я Алиса — тимлид в e-commerce агентстве KISLOROD. Хочу рассказать об интересном кейсе по разработке ТГ-бота, который мы интегрировали с сайтом на 1С-Битрикс.

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

Читать далее

Динозаврик по имени Джун

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели1.1K

Еще совсем недавно джуны очень ценились. Можно было вырастить преданного сотрудника, гораздо медленнее поднимать ему зарплату, и в итоге получался отличный боец, который знает все правила взаимодействия в компании и плавно перерастает в мидла. Вакансий на рынке было много. Если говорить о веб-разработке, то залететь верстальщиком было вообще плевое дело — пару недель почитать книжки по HTML/CSS, попрактиковаться с табличной версткой (да, бывалые динозавры еще помнят, когда такой подход был мейнстримом), потом перейти к блочной — и можно отправляться на собеседования. Неделя — и вы уже в руках какой-нибудь веб-студии, а там, при желании, через полгода станете полноценным фронтендером или переквалифицируетесь в бэкенд-разработчика. Хорошие времена: можно не особо напрягаясь было заработать на хлеб, клацая по клавиатуре.

Читать далее

Вайб-кодинг для продактов. Как быстро тестировать гипотезы

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели1.7K

Меня, как продакта, очень захватила идея: создавать прототипы для кастдева, проверки гипотез и вообще любой новой фичи без статьи в Confluence, груминга с командой и вороха тикетов в Jira. Сейчас на сборку прототипа у меня уходит день - и я хочу рассказать, как это устроено, готов от вас нахватать в панамку, сделать выводы и вайбить дальше, лучше и глубже!

Читать далее

Игра по своим правилам: хак лидерборда в Telegram MiniApp

Уровень сложностиПростой
Время на прочтение2 мин
Охват и читатели639

Игра по своим правилам. Рассказываю, как с помощью DevTools и нестандартных методов можно выйти на первое место в Telegram MiniApp.

Читать далее

Как рассказать о сайте поисковой системе 2

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели927

Доброго времени суток. В этой статье я хочу дополнить первую часть рассказа о том как же донести поисковику информацию о своём сайте. Здесь будут рассмотрены такие темы как IndexNow, security.txt, schema.org.

Читать далее

BEM vs Atomic CSS или картинка по номерам

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели1.8K

Доброго времени суток. На днях читая очередную статью о том, как повысить свою эффективность в верстке и расширить кругозор возможностей, я задумался, а что сейчас в тренде? Как вы уже поняли, я начал добывать информацию о подходах. Как итог, моему изумлению не было предела, когда я понял, что за много лет почти ничего не поменялось.  

Для начала предлагаю разобраться, о чем статья. В данной статье я попытался свести все свои знания касающиеся использования CSS и подходов (методологий) организации CSS-кода (селекторов) и нюансов использования того или иного подхода, а также провести сравнительный анализ. Как говорил Юрий Гагарин - Поехали!

Читать далее

Как мобильное приложение для ВодоходЪ вырастило средний чек на 15%

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели694

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

Читать далее

Telegram Web App: Интеграция с Flutter

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели1.8K

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

Теперь рассмотрим, как создать Telegram Web App с использованием Flutter, фреймворка для разработки кроссплатформенных приложений.

Читать далее

Заменил жену на ИИ. Мой опыт

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели4.2K

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

Читать далее

ХрюХрюКар v.2 или как я использую Go для защиты своего двора

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели10K

Почти год назад я писал про ХрюХрюКар. Это экспериментальный проект, который проработал 7 месяцев в городе Балаково Саратовской области. За это время мы «поймали» около тысячи автомобилистов, разместивших свои авто на зеленых зонах, детских/спортивных площадках и тротуарах.

В этой статье я расскажу про совершенно новую версию ХХК, которую я написал на Go. Ну и отдам сообществу все исходники проекта.

Припарковаться правильно

Ближайшие события

Наши 象: что я узнал про китайцев и китайский веб-дизайн, пока создавал сайт для мясокомбината

Время на прочтение9 мин
Охват и читатели26K

Самое мясо китайского веб-дизайна, или Как не стать лосем в Поднебесной. Путеводитель по провинциям визуального хаоса.

Читать далее

GPT‑4.1 глазами веб‑разработчика: возможности, интеграция и примеры

Уровень сложностиСредний
Время на прочтение16 мин
Охват и читатели4.4K

В апреле 2025 года OpenAI представила серию моделей GPT‑4.1 — сразу три версии: GPT‑4.1 (полноразмерная), GPT‑4.1 mini и GPT‑4.1 nano​. Все они значительно превосходят предшественников (GPT‑4.0, также называемый GPT‑4o, и GPT‑4o mini) по качеству кодирования, следованию инструкциям и работе с длинным контекстом​. Главная сенсация — поддержка контекста до 1 000 000 токенов​o. Это примерно 8 полных копий кода фреймворка React, которые теперь можно подать модели за один раз​! Для сравнения, у предыдущих GPT-4 максимальный контекст был 128 тысяч токенов. Обновился и «горизонт знаний» — GPT‑4.1 обучен на данных вплоть до июня 2024 года, что уменьшает количество ответов «не знаю» на современные вопросы.

GPT‑4.1 (основная модель) — флагман с максимальными возможностями. Она улучшила результаты на множестве бенчмарков: например, решает ~54.6% задач на SWE‑bench Verified (стандартный тест по разработке ПО), тогда как оригинальный GPT‑4o справлялся лишь с 33.2%​. Это рекордный показатель для моделей GPT и на 21% превышает результат GPT‑4o. Модель стала лучше генерировать код без лишних правок (доля «лишнего» кода снизилась с 9% до 2%​) и более строго придерживается форматов (например, может вносить правки в виде diff‑патчей, а не переписывать файл целиком​).

GPT‑4.1 mini — облегчённая модель, которая жертвует лишь небольшой долей качества ради скорости и цены. По многим заданиям mini догоняет или даже превосходит оригинальный GPT‑4.0. В тестах OpenAI «мини» не уступает GPT‑4o по интеллекту, но при этом выдаёт ответ почти вдвое быстрее и на 83% дешевле обходится по стоимости вызова​ (то есть стоимость снижена до ~17% от GPT‑4.0). Для разработчиков это означает, что многие задачи теперь можно решать «бюджетной» версией модели без ощутимой потери качества. GPT‑4.1 nano — новейшая и самая лёгкая модель в семействе, первый «нано»‑уровень от OpenAI. Nano — рекордсмен по скорости и цене: как отмечает OpenAI, это «самая быстрая и дешёвая модель за всю историю компании»​. Например, nano возвращает первый токен ответа менее чем за 5 секунд даже если запрос содержит 128k токенов контекста​. Она также поддерживает 1М контекста и показывает неплохой уровень интеллекта: ~80.1% на знаниевом тесте MMLU и 50.3% на задачах GPQA​. Хотя nano уступает «старшим братьям» в сложных размышлениях, она отлично подходит для простых и массовых задач — классификация, автодополнение кода, чат‑боты с короткими ответами​. В целом, появление mini и nano даёт веб‑разработчикам гибкость: можно выбрать мощную GPT‑4.1 для сложной логики или обработки гигантского документа, а для быстрых откликов или фоновых задач — задействовать nano с минимальными затратами.

Читать далее

Интеграция виджета обратного звонка МТС Exolve в документацию на MkDocs

Время на прочтение8 мин
Охват и читатели422

Привет, Хабр! Это Екатерина Саяпина, Product Owner платформы МТС Exolve. Сегодня покажу, как быстро добавить виджет обратного звонка на страницу, созданную с помощью MkDocs — статического генератора сайтов с уклоном в техническую документацию. Такое размещение виджета бывает нужно в справочных разделах сложных продуктов, где клиентам может потребоваться консультация или разъяснение каких-то технических моментов.

Для большей конкретики возьмем страницу с описанием S3 API вымышленного облачного провайдера — это типичный сценарий, где пользователю может потребоваться быстрая консультация специалиста.

Читать далее

Firefox против гигантов: битва за интернет

Уровень сложностиПростой
Время на прочтение11 мин
Охват и читатели3.7K

Когда Firefox только появился на рынке, монополия Internet Explorer казалась непоколебимой. IE был браузером по умолчанию для миллионов пользователей Windows. Гиганты вроде Netscape Navigator и AOL Browser пали под его натиском. Появление Firefox сначала воспринималось как попытка бунтаря бросить вызов устоявшемуся порядку. Однако этот браузер быстро завоевал доверие веб-разработчиков и пользователей. Кульминацией его успеха стал Download Day 17 июня 2008 года, когда за 24 часа было установлено 8 002 530 копий Firefox 3. Так браузер попал в Книгу рекордов Гиннесса. В этой статье мы погрузимся в историю Mozilla и расскажем, как Firefox смог изменить правила игры в мире веб-браузеров.

Читать далее

Это под силу даже веб-разработчику! Размышляю, как создать драйверы на JavaScript с API WebUSB

Уровень сложностиПростой
Время на прочтение9 мин
Охват и читатели3.8K

Привет! Я Игорь Кечайкин, руководитель группы разработки во Frontend-команде Flocktory. Недавно, решая задачу, связанную с API WebUSB для Fingerprint-атрибуции пользователя, задался совершенно не связанным теоретическим вопросом: а как создать с этим API  драйверы на JavaScript?

Чтобы разобраться, изучил спецификацию API WebUSB, а теперь принёс на Хабр выжимку самых важных элементов. В статье я расскажу о принципах работы решения и том, что с ним делать веб-разработчику, который хочет напрямую реализовать на сайт функцию, например, 3D-принтинга с пользовательских девайсов. А также вы узнаете, насколько это безопасно — для сайта, внедряющего API, и для девайсов юзера.

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

Читать далее

Обнаружение изменения положения DOM элемента с помощью IntersectionObserver

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели1.1K

Попытка создания универсального решения, которое позволяет обнаруживать изменение положения элемента на веб-странице в независимости от того, чем оно было вызвано: прокруткой, изменением размера окна или родительского контейнера, масштабированием, изменением разметки или непосредсвенно заданием координат left и top самого элемента.

Читать далее

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

Уровень сложностиПростой
Время на прочтение15 мин
Охват и читатели3.2K

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

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

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

Читать далее

Вклад авторов