Как стать автором
Обновить
259.35

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

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

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

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

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

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

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

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

Читать далее

Плавность как фича: сравниваем фреймворки по анимации UI на реальных кейсах

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

UI-анимации — это не только про красоту, но и про восприятие, структуру и даже скорость. В этой статье рассматриваются популярные фреймворки для создания анимаций в интерфейсах: CSS, Framer Motion, GSAP и Motion One. Сравнение проводится на реальных кейсах с кодом, примерами и субъективным мнением, где каждый инструмент показывает свои сильные и слабые стороны. В конце — небольшие выводы и неожиданные результаты.

Читать далее

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

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

Когда 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 мин
Количество просмотров2.9K

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

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

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

Читать далее

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

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

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

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

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

Читать далее

Атаки через новый OAuth flow, authorization code injection, и помогут ли HttpOnly, PKCE и BFF

Уровень сложностиСложный
Время на прочтение36 мин
Количество просмотров3.4K

В статье детально рассмотрим интересный вектор атаки на приложения, использующие OAuth/OIDC, разберем, какие предусловия для этого нужны, и увидим, что они не так недостижимы, как может показаться на первый взгляд. Затронем использование паттерна Backend-for-Frontend и способы реализации PKCE для confidential clients, попутно проверив, помогают ли они защититься от рассматриваемой атаки. Взглянем и на другие существующие рекомендации и предлагаемые лучшие практики, а также подумаем над прочими мерами защиты, которые действительно могут помочь. Все это с примерами, схемами и даже видео.

Материал будет интересен как для занимающихся разработкой приложений, так и для представляющих атакующую сторону.

Читать далее

Как заставить TS работать на вас

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

Привет! Меня зовут Дмитрий, и я уже много лет работаю с TypeScript. За это время я был частью разных команд с разным уровнем владения этим языком, в том числе тех, кто только готовился перевести проект с JavaScript. И нередко я замечал, что разработчики воспринимают TypeScript не как инструмент, упрощающий работу, а как рутинную обязанность, которая лишь замедляет процесс. В этой статье я расскажу, как сделать TypeScript своим союзником и заставить его работать на вас, а не против.

Читать далее

Биткоин — начало новой эры финансов или глобальный скам?

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

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

Расслабьтесь: я не собираюсь грузить вас сложными терминами или вдаваться в подробности алгоритмов криптографии. И уж точно не стану рассказывать очередные байки про “убийцу” Uber или про новую эпоху Web3, которую нам обещают уже который год. Нет.

Я просто хочу поделиться с вами своими мыслями — как разработчик, который непосредственно имеет дело блокчейном. Как человек, который не только разрабатывает смарт-контракты, но и занимается проектированием и математическим обоснованием экономических моделей. Хочу вместе с вами порассуждать на тему: 

Перед нами действительно технология будущего — или всё это масштабный скам, который затянул в себя весь мир?

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

Пыль в глаза.

Для начала давайте разберёмся — чем сегодня заполнено информационное пространство в криптосекторе? Чем мы вообще подпитываем свои познания в этой сфере? Что мы смотрим, читаем, на кого ориентируемся?

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

Читать далее

Тонкости работы с логгированием в Python: краткий гайд для разработчиков

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

Логирование является одним из ключевых и важнейших элементов разработки и эксплуатации приложений. Умение правильно вести журнал логов — ключ к эффективной отладке и мониторингу приложений. Оно дает ценную информацию всей цепочке заинтересованных лиц: от разработчиков и системных администраторов до руководителей бизнеса.

В статье рассмотрен де-факто стандарт логирования — модуль logging в Python. Я дам общие рекомендации по его настройке и опишу практики применения модуля, подходящие для большинства случаев.

Читать далее

ConfKeeper — хранение конфигов и паролей Ваших проектов

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

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

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

Читать далее

Как создать веб-приложение со своей картой: подключение API v3 Яндекс Карт

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

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

Если вам тоже пришлось «вшить» в свое веб-приложение карты, запаситесь терпением. В инструкции рассказываем, как это сделать и настроить тестовое окружение с IDE в облаке. Подробности под катом!
Читать дальше →

Как использовать любой CSS-фреймворк в вашем проекте. Часть 3

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

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

Если всё сделано правильно, вы сможете разрабатывать и поддерживать весь проект, используя только 6–8 основных цветов и их оттенков.

Читать далее

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

19 марта – 28 апреля
Экспедиция «Рэйдикс»
Нижний НовгородЕкатеринбургНовосибирскВладивостокИжевскКазаньТюменьУфаИркутскЧелябинскСамараХабаровскКрасноярскОмск
22 апреля
VK Видео Meetup 2025
МоскваОнлайн
23 апреля
Meetup DevOps 43Tech
Санкт-ПетербургОнлайн
24 апреля
VK Go Meetup 2025
Санкт-ПетербургОнлайн
25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань
14 мая
LinkMeetup
Москва
20 – 22 июня
Летняя айти-тусовка Summer Merge
Ульяновская область

Проектируем веб-страницу, отображающую миллион элементов

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

Может ли браузер справиться с миллионом элементов? Если вы когда-нибудь пробовали рендерить в браузере миллион элементов <div>, то знаете, что происходит — он вылетает, зависает и перестаёт реагировать.

Недавно мы выпустили фичу, привлёкшую большое внимание — загрузку и визуализацию до миллиона спанов на нашей странице детализации трассировок. Это вызвало любопытство у пользователей и разработчиков, поэтому многие начали задавать вопрос: как нам это удалось?

Наша мотивация ясна — пользователям нужна эта возможность. Она позволяет использовать новые процессы отладки, упрощая эффективный анализ огромных трассировок.

На нашей новой странице детализации трассировок каждая строка — это спан. В некоторых случаях для анализа трассировки необходимо загружать до тысяч или миллионов спанов.

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

Читать далее

App Store блокирует аккаунты разработчиков, а банки всё равно в сторах. Рассказываем, как они это делают

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

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

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

Читать статью

Неизвестно полезный CSS. Часть 8

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


Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.


Сегодня мы рассмотрим:

  • как можно избежать длинных значений для свойства transform;
  • можно ли побороть неоднозначность медиа-запросов;
  • малоизвестное и полезное свойство при работе с «гридами»;
  • какой нюанс вы можете не знать про свойство align-content;
  • древнейшее свойство, помогающее улучшить взаимодействие пользователя клавиатуры с интерфейсом.

Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

Читать дальше →

Прочтите это, если планируете работать с Next.js

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

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

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

Именно такие ожидания я связывал с Next.js — опенсорсным фреймворком для веб-разработки, созданным и управляемым компанией Vercel. Vercel — это облачный провайдер, предлагающий управляемый хостинг Next.js как услугу.

Читать далее

Микрофронтенд на пальцах с module federation 2.0

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

Микрофронтенд на пальцах с module federation 2.0. Как собрать микрофронты из кубиков без магии по шагам.

Читать далее

Запускаю 12 стартапов за 12 месяцев #1: Core Web Vitals Test

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

Первый проект, который мы запустили в рамках челленджа — это браузерное расширение для проверки скорости загрузки сайтов и сравнения показателей Core Web Vitals для ПК и смартфонов. В этой статье я расскажу, как мы выбрали идею, разработали продукт за 2 недели и привлекали 1600+ пользователей без вложений в маркетинг.

Читать далее

Займемся traxом? Как проводит свободное время среднестатистическая семья зумеров-айтишников

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

В свободное от работы время зумеры-айтишники пилят игру в Telegram Mini App, и нет, это не тапалка!

Про игру
 
Может быть вы помните, а может и не знали, но в 80-е была популярна элегантная стратегическая игра Trax. 

Ее придумал Дэвид Смит – дипломированный бухгалтер, семьянин, бизнесмен и даже автор песен. Он опубликовал более 20 игр, но считает Trax своей лучшей придумкой. 
Вокруг неё формировались клубы в разных странах, организовывались турниры по электронной почте и даже чемпионаты мира. Из года в год Trax стабильно входил в топы лучших игр на протяжении 80-х и получал многочисленные награды.

И вот спустя годы давно запылившаяся, но когда-то популярная игра Тракс вдруг попалась моему мужу Кириллу, точнее его другу ака одногруппнику из ИТМО, при очень интересных обстоятельствах. Как-то раз он попал на комиссию по отчислению в ИТМО, где случайным образом попадался один из двух билетов:
первый - сделать бесконечные крестики нолики, где нужно сложить диагональ в 10 крестиков (по крайней мере так запомнил мой муж), а другой бесконечный Тракс в консольном варианте. Посмеялись, поиграли и затянуло. Тогда игра была доступна только в двух вариантах: настольная и ПО на Винду. Возможности поиграть онлайн не было, за исключением изощренных способов, например транслировать экран и под диктовку выставлять ходы оппонента или через TeamViewer. И тогда в голове Кирилла появилась мысль – а почему бы не запилить веб-версию Тракса.

Кирилл изначально бэкендер, но когда мы работали в одном IT-стартапе и над своими пет-проектами он подкачал навыки фронтедера и ступил на путь фулл-стек разработчика. И вот когда ему стало хватать навыков для написания этой игры в вэбе, он принялся за дело.

Читать далее
1
23 ...