Все потоки
Поиск
Написать публикацию
Обновить
344.56

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

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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

Читать далее

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

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

Предположим, вы захотели приукрасить в 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 мин
Количество просмотров7K

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

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

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

Читать далее

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

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

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

Погнали!

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

Podster

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

Apple Podcasts 

VK Видео

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

Читать далее

Про Rust — просто. Что читать в каком порядке?

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

Друзья! Многие из вас, возможно, как и я, интересовались изучением и использованием в работе очень эффективного и востребованного языка программирования Rust но, как и я, оставляли свои попытки из-за сложности, запутанности и многослойности доступного материала и книг по этой теме.

Лично я делал не меньше 5 попыток на протяжении последних 10 лет, прорабатывая, большей частью в свободное и личное время, литературу, некоторые книги по несколько раз, в поисках ответов на простые человеческие вопросы - как свободно писать на Rust и решать, как орешки, ежедневные задачи, не страдая от головной боли и хорошо понимая, что происходит и почему простая программа не компилируется.

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

Читать далее

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

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

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

Читать далее

Хакаем любую Субару с доступом к Интернету

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

Введение


20 ноября 2024 года я и Шубхам Шах обнаружили уязвимость безопасности в сервисе автомобиля Subaru, подключённого к STARLINK. Он предоставил нам неограниченный целевой доступ ко всем автомобилям и аккаунтам пользователей в США, Канаде и Японии.

Благодаря доступу, полученному через эту уязвимость, нападающий, зная лишь фамилию и почтовый индекс жертвы, почтовый адрес, номер телефона или номерной знак, мог выполнять следующие действия:

  • Дистанционно запускать и глушить двигатель, выполнять блокировку и разблокировку, получать текущее местоположение любого автомобиля.
  • Получать полную историю местонахождения любого автомобиля за последний год с точностью до пяти метров, обновляемую при запуске двигателя.
  • Запрашивать и получать личную информацию (personally identifiable information, PII) любого покупателя, в том числе контакты для экстренной связи, авторизованных пользователей, физический адрес, платёжную информацию (например, последние четыре цифры кредитной карты) и PIN автомобиля.
  • Получать доступ к различным пользовательским данным, в том числе к истории звонков, сведениям о предыдущих владельцах, показаниям одометра, истории продаж и многому другому.

После отправки нами отчёта об уязвимости, подверженная уязвимости система была пропатчена в течение 24 часов и никогда не использовалась злонамеренно.
Читать дальше →

Одна React-задача, демонстрирующая ключевые навыки на собеседовании

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

Как всего одна небольшая React-задача помогает глубже понять уровень кандидата на собеседовании? Разбираем нюансы работы с хуками, асинхронностью, состоянием гонки и сайд-эффектами. На первый взгляд задача кажется простой - всего лишь компонент, загружающий данные по username. Но в процессе решения выявляются ключевые моменты: правильно ли кандидат управляет состоянием, учитывает ли смену пропсов, обрабатывает ошибки и предотвращает race conditions. Этот вопрос помогает не просто проверить знания, а увидеть, как кандидат рассуждает и принимает технические решения.

Читать далее

Единицы измерения в web, или Сколько попугаев во viewport'е

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

Всем привет! Меня зовут Вова я разработчик СБОЛа в web-канале.

Наверное, каждый фронтенд‑разработчик, по крайней мере на собеседовании, сталкивался с вопросами: «Какие единицы измерения существуют в CSS?» или «Какие единицы измерения ты использовал для CSS?», и т. п. Скорее всего, большинство интервьюеров удовлетворил бы ответ: «Абсолютные и относительные». И в целом, это, по‑своему, правильно. Но зададим себе вопрос: если разделить множество единиц измерения на два подмножества — абсолютные и относительные, — то будут ли внутри этих подмножеств единицы измерения действительно взаимозаменяемыми? Скорее нет, чем да. Тогда по какому признаку мы могли бы их разделить? По функциональному использованию.

Читать далее

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