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

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

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

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

Попытка написать свою реализацию встроенных хуков состояния в React + создание простого стейт менеджера

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

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

Читать далее

CSS в 2025: какие фишки теперь доступны?

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


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


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


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


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


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

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

Найди x: React + MobX + SSR + x = Счастье

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

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

Читать далее

Как команда DataGo! помогла крупному e-com проекту XCOM-SHOP связать маркетинговые доходы и расходы

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

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

Читать далее

Истории

Drizzle ORM — современная типизированная ORM для реляционных БД в JS/TS

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

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

Читать далее

Как пустой S3 бакет может вас обанкротить

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

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

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

Читать далее

Интеграция Vue.js в Битрикс24: Как разработать сложный фронтенд за два месяца

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

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

Читать далее

Backend-for-Frontend (BFF): решение проблемы взаимодействия фронтенда и бэкенда

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

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

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

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

Читать далее

Динамические формы с Flask

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

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

Читать далее

Почему именно в Chrome под Windows на сайтах не работают эмодзи флагов

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

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

Более того, вы даже можете легко реализовать динамическое определение иконок на основе кода региона:

// Смещение для корректировки кода 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");

Всё идёт шикарно!

Как вдруг…
Читать дальше →

Ежегодный опрос PHP-сообщества: итоги 2024 года

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

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

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

Читать далее

Пока Apple саботирует развитие PWA, мы сделали демо с контактами, пуш-уведомлениями и биометрией

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

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

Читать далее

Как PWA помогло клиентам ЮMoney продолжать получать пуши — даже без приложения

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

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

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

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

Читать далее

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

Переход на Symfony в заскорузлом Yii2 монолите: подробный разбор

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

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

Читать далее

Как использовать собственный опыт и успешные наработки для ускорения разработки

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

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

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

Читать далее

Обновление Capacitor приложений в обход сторов

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

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

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

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

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

Читать далее

Продвинутое использование библиотеки React Router v7: как упростить сложную навигацию и улучшить производительность

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

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

Погнали!

Обработка ошибок REST API: лучшие практики

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

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

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

Читать далее

GraphQL 10 лет. Пора в нем разобраться?

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

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

Читать далее

О невизуальной доступности цифровых сервисов в подкасте «Скоро будет доступно?» от Everland

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

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

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

Podster

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

Apple Podcasts 

VK Видео

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

Читать далее

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