Как стать автором
Поиск
Написать публикацию
Обновить
523.25

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

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

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

Знакомство с Web Locks API

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

Представьте оживлённый перекрёсток без светофоров и знаков приоритета. Машины едут в разных направлениях, кто-то пытается проскочить первым, кто-то резко тормозит. Рано или поздно это приведёт к аварии.

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

Долгое время разработчики обходились кустарными решениями — флагами в localStorage, хитрыми setInterval и т.д. Но с появлением Web Locks API у нас наконец появился стандартный способ расставить приоритеты в этом хаосе.

Web Lock API — это механизм, позволяющий скриптам, находящимся в рамках одного orign, блокировать доступ к ресурсу, удерживать блокировку пока выполняется необходимый код, а затем разблокировать ресурс, чтобы другие части программы могли получить к нему доступ.

Читать далее

Люблю я http, и вот как я его готовлю

Уровень сложностиСредний
Время на прочтение19 мин
Количество просмотров5.1K

Я старый фуллстек-разработчик и не знаю слов любви, но около полугода назад при очередной итерации сервера почувствовал себя утомленным путником, который узрел нежную красоту wr-обработчика нативного net/http! Вот раньше всё было ужасно - а теперь красиво, приятно читать и интересно показать! За несколько месяцев я переделал свои сотни обработчиков на новый стиль - и всё еще доволен! Почистил авгиевы конюшни слоев логики - теперь там царит запах фиалок! Также у меня была возможность посмотреть как пилят http профессионалы бэкенда - далеко не как фуллстеки, о чем тоже хочется рассказать!
Для ленивых читать - пора вернуть логику в обработчики! Но я расскажу подробно о той красоте, которая скрывается за этими многими восклицательными знаками, и о том, как её можно испортить. Структура такова:
- сначала чем фуллстек отличается от нативного бэкенда,
- потом пройдемся по API-стилю а-ля РЕСТ,
- прочтем оду нативному http-модулю, расковыряем пару болячек фреймворков,
- почитаем мои слова, почему wr-обработчик хорош сразу из коробки,
- и посмотрим пример того, как превратить обработчик в простой вид "задача-дано-решение-ответ".

Внимание, это мнение. В статье поднимаю холиварные темы, при этом я могу быть не прав, но буду настаивать! И фотка из личного фотоархива на тему "Люблю лето!", потому что уже надоели сгенерированные картинки.

Читать далее

LitestarCatsCV. Тренируемся на кошках. Расширяем возможности и готовимся к продакшену. Часть 3

Уровень сложностиПростой
Время на прочтение17 мин
Количество просмотров923

Привет, котики и котолюбы! В первой части нашего кошачьего приключения мы выбрали инструменты (Litestar вместо FastAPI, Granian вместо Gunicorn, KeyDB вместо Redis), настроили uv и заложили фундамент проекта. Во второй части мы построили полноценное CRUD API для резюме котиков (или людей, если вам так ближе), подружили его с PostgreSQL через SQLAlchemy, настроили миграции с Alembic и написали тесты с Pytest. У нас уже есть стены и фундамент, но пора ставить крышу и готовиться к продакшену! 🏠

Сегодня мы сделаем наш API ещё круче: вынесем конфиги в отдельный модуль с помощью msgspec, добавим аутентификацию через встроенный JWT в Litestar, ускорим API с KeyDB, проверим покрытие тестами с coverage, упакуем всё в Docker и нарисуем резюме котиков с помощью Jinja. К концу статьи наш кошачий проект будет готов к реальной жизни — поехали! 🚀

Читать далее

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

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

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

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

Читать далее

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

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

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

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

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

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

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

Читать далее

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

Время на прочтение3 мин
Количество просмотров4.6K
Привет, Хаброжители!

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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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

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

Время на прочтение9 мин
Количество просмотров34K

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

Читать далее

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

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

В апреле 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 мин
Количество просмотров609

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

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

Читать далее

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

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

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

Читать далее

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