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

Недавно давно я смотрел ничем не примечательный техническое интервью и услышал фразу от интервьюируемого: «Ну можно написать свой useReducer или useState». Мне врезалась эта фраза в голову, ибо я никогда в серьез не задумывался как они работают под капотом и в исходниках особо не копался, максимум в типах. Поэтому я решил их воссоздать с минимальным количеством зависимостей и попытался интегрировать в реакт.

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

В начале января 2025 года мне захотелось посмотреть, какие новые фишки CSS стали поддерживаться современными браузерами за прошлый год. Провести некий срез, что уже можно использовать. И тут меня посетила мысль: «А почему бы не поделиться новинками на Хабре?». Вот я и пришёл.

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

Для составления списка я использовал сайт «Can I Use». Брал те новшества, которые стали «зелёными» в 2024 году. Смотрел последние версии браузеров Chrome, FireFox, Opera, Edge, Safari, iOS Safari, Samsung Internet и Android Browser.

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

С ростом приложения и увеличением количества зависимостей, мы осознали необходимость в централизованном управлении зависимостями, выходящем за рамки React и MobX. Существующие IoC-контейнеры показались избыточными и тяжеловесными. Поэтому было создано собственное решение. В статье вы узнаете, как мы решили уравнение :-)

В этом материале мы поделимся кейсом, как DataGo! помогли команде XCOM‑SHOP связать маркетинговые расходы с доходами для более точного определения целевых бизнес-метрик: LTV в связке с САС, CPO, ROMI, а также для оптимизации эффективности рекламных кампаний, определения более конверсионного источника трафика и для повышения эффективности работы команды. 

Удивился, что про столь популярный продукт не было статьи на Хабре, срочно это исправляю. Drizzle ORM — это #2 самая желаемая ORM по опросам, и она даже вошла в top 50 JavaScript Rising Stars 2024, заняв 27 место.

Представьте, что вы создали пустую, приватную корзину (их ещё называют «бакетами» — от «bucket») AWS S3 в выбранном вами регионе. Каким будет счёт за услуги AWS на следующее утро?

Несколько недель назад я начал работу над прототипом системы индексирования документов для моего клиента. Я создал одну корзину S3 в регионе eu-west-1 и загрузил туда несколько файлов для тестирования. Через два дня я проверил мою страницу выставления счетов AWS, заглянув туда, преимущественно, для того, чтобы проверить, что то, чем я занимаюсь, нормально укладывается в лимиты бесплатного тарифного плана. Но, судя по тому, что я там увидел, ни о какой нормальности речи не шло. Мой счёт превышал $1300, а в консоли выставления счетов были видны сто миллионов PUT-запросов к корзине S3, выполненных всего за один день!

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

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

Что такое Backend-for-Frontend (BFF)?

Backend-for-Frontend (BFF) — это архитектурный паттерн, который помогает устранить разрыв между фронтендом и бэкендом. BFF выступает промежуточным слоем, который адаптирует данные и логику бэкенда под нужды конкретного фронтенда. Это позволяет фронтенд-командам работать с API сразу, а бэкенд-разработчикам подключать логику по мере готовности, что значительно ускоряет процесс разработки и снижает количество доработок.

Одной из распространенных задач в веб-приложениях является создание формы, в которую можно вводить заранее неопределённое количество элементов. Этот подход часто используется при вводе пользовательской информации, например, телефонных номеров или адресов. В примере ниже можно увидеть, как пользователь динамически добавляет дополнительные телефонные номера в форму, нажимая на кнопку "Add another".

// Смещение для корректировки кода ASCII каждого символа в строке кода ISO страны для определения соответствующего флага.
const EMOJI_CHARACTER_OFFSET = 127397;

const getEmojiForCountryCode = (countryCode: string) =>
  String.fromCodePoint(
    ...countryCode
      .toUpperCase()
      .split('')
      .map((char) => char.charCodeAt(0) + EMOJI_CHARACTER_OFFSET),
  );

// "en-US"
const currentLanguageCode = navigator.language;
// "US"
const currentCountryCode = currentLanguageCode.split("-")[1];
// "🇺🇸"
getEmojiForCountryCode(currentCountryCode);
// "🇫🇷"
getEmojiForCountryCode("FR");
// "🇸🇪"
getEmojiForCountryCode("SE");

2024 стал насыщенным годом для русскоязычного сообщества PHP-разработки. PHP Russia 2024, релизы PHP 8.4, Symfony 7.2 и Laravel 11.

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

Хабр не раз выручал нашу команду, когда заказчик ставил задачу, которую мы никогда не делали. В недавнем кейсе по разработке демо-приложения PWA мы подсмотрели в статьях несколько полезных советов и тоже решили написать о своем опыте. Поговорим о PWA, развитие технологии и про то, кому это выгодно и не очень. Кстати, меня зовут Сергей Филатов и я веб-разработчик в R-Style Softlab. 

Привет, Хабр! Меня зовут Оля, я ведущий программист в отделе разработки интерфейсов ЮMoney. Работаю в команде «Портал» и занимаюсь главной страницей, страницами настроек, онлайн-оплаты и аналитики расходов.

В 2022 году мы, как и многие компании, столкнулись с удалением своих приложений из сторов и искали альтернативные решения. Одним из вариантов было сделать своё прогрессивное веб-приложение (Progressive Web App, PWA).

Всю вторую половину 2023 года мы превращали наш сайт в PWA-приложение, чтобы им было удобно пользоваться на устройствах iOS. Рассказываю, что из этого получилось и какие у нас планы на будущее. 🙌

Полгода назад мне посчастливилось решать интересную и нетипичную задачу по затаскиванию Symfony в Yii2 монолит. В данном материале я подробно и пошагово распишу весь процесс решения этой задачи с пояснениями, почему были выбраны именно такие решения и как это работает.

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

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

В данной статье я хочу затронуть такую интересную тему, как обновление бандла Capacitor-приложений (CodePush, live update и т.д).

Сталкивались ли Вы когда-нибудь с ситуацией, когда необходимо незначительно обновить мобильное приложение, написанное на Capacitor?

Предположим такую ситуацию: Вы выпустили релиз приложения, где все изменения не связаны с обновлением нативного кода, то есть Вы не добавляли новых библиотек в приложение, которые содержат нативный код (доступ к камере, NFC и т. д.). Или, допустим, Вы обновили пару строчек в спецификации. Даже ради таких, казалось бы, небольших изменений вам придется делать как минимум один релиз в магазин приложений (а их бывает много).

А если нужно сделать релизы во всех популярных магазинах? Google Play, RuStore, AppGallery и, конечно же, самые нерасторопные из существующих — App Store. Выпуск во всех интересующих магазинах может занять значительное время. Вы, конечно, можете автоматизировать этот процесс при помощи различных инструментов, но, так или иначе, это занимает время на одобрение модераторами.

Привет, Хабр. Я Сергей, фронтенд-разработчик в Clevertec. И сегодня поделюсь опытом использования обновленной 7-й версии React Router. Расскажу, как мы реорганизовали структуру роутинга. Покажу, как избавились от лишних «букав кода», улучшили производительность приложения, создали навигацию по страницам и еще много полезного.

Привет, Хабр! Меня зовут Екатерина Саяпина, я Product Owner платформы МТС Exolve. Коды ошибок — последнее, что хочет видеть разработчик в ответе API. И означают они одно из двух: либо есть проблема в запросе, либо что-то сломалось на стороне API.

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

Сегодня GraphQL остаётся одной из самых популярных технологий для работы с API, особенно в среде веб-разработки. В этой статье я проведу экскурс, напомню, что такое GraphQL, его ключевые особенности, как быстро настроить собственный GraphQL-сервер, какие интересные публичные API можно попробовать и что использовать для его интеграции с фронтендом. А также заглянем в будущее GraphQL в 2025 году.

Мы, Everland, помогаем людям с инвалидностью трудоустроиться, а бизнесу — внедрить инклюзивные практики и сделать услуги доступнее, 3 декабря запустили подкаст «Скоро будет доступно?». В ежемесячных выпусках мы будем говорить о проблемах, с которыми все чаще сталкиваются люди с инвалидностью из-за неадаптированных сервисов услуг компаний, и разбирать возможные варианты их решения. Гостями подкаста станут эксперты с инвалидностью, представители бизнеса, блогеры и журналисты.

Ищите «Скоро будет доступно?»  на четырех платформах:

Podster

Яндекс.Музыка 

Apple Podcasts 

VK Видео

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