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

Трассировка микросервисов или когда метрик и логов недостаточно — Руслан Гайнанов / Ural Digital Weekend 2024

Опубликовали запись доклада секции «Разработка» с Ural Digital Weekend 2024.

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

Спикер рассказал, что необходимо для запуска систем трассировок на базе open-source решений, показал на простых примерах как настроить сбор трейсов с микросервисов на Python (fastapi, SQLAlchemy, httpx), как потом работать с трейсами и какую полезную информацию можно извлечь.

Ссылка на запись доклада в ВКонтакте.

Ссылка на презентацию: https://goo.su/MHEIxt

Frontend Fortified: как стать неприступным для атак — Зар Захаров / Ural Digital Weekend 2024

Опубликовали запись доклада секции «Разработка» с Ural Digital Weekend 2024.

Стратегии и практики безопасности для Frontend-разработчиков. В докладе Зар рассмотрел основные угрозы в мире frontend, обсудил ключевые аспекты безопасности при разработке web-приложений, включая защиту от XSS, CSRF и других угроз. А также способы их предотвращения.

Ссылка на запись доклада в ВКонтакте.

Ссылка на презентацию: https://goo.su/GZeAy

50 оттенков кеширования: от in memory к многоуровневому redis-кластеру — Леонид Ченский / Ural Digital Weekend 2024

Опубликовали запись доклада секции «Разработка» с Ural Digital Weekend 2024.

При разработке команда логистики часто сталкивалась с высокими нагрузками в несколько сотен тысяч rps и очень жесткими SLO времени ответа. При этом с каждым годом менялись функциональные и нефункциональные требования. В выступлении спикер рассказал, как в команде боролись с такими нагрузками, а также о том, с какими трудностями пришлось столкнуться, и какие ошибки допустили.

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

Итерация 1: in memory cache.

Итерация 2: удаленный шардированный кэш-кластер (redis vs memmcached).

Итерация 3: N-уровневый кэш.

Итерация 4: шардированно-реплицированный multi-DC кэш-кластер Redis.

В конце выступления спикер подвел итог и поговорил об альтернативах KV.

Ссылка на запись доклада в ВКонтакте.

Ссылка на презентацию: https://goo.su/2ik4N

Контекст исполнения: что это и какие виды бывают?

В девятом выпуске нашего открытого курса по JavaScript вместе с веб-разработчиком Василием Новиковым подробно разбираем Execution Context — контекст исполнения.

Из нового выпуска вы узнаете:

• как объяснить Execution Context простым языком;

• какие бывают виды контекста исполнения;

• каким образом реализуется концепция Environment Record.

Подписывайтесь на канал AvitoTech в Telegram, там мы рассказываем больше о профессиональном опыте наших инженеров, проектах и работе в Авито, а также анонсируем митапы и статьи.

AGIMA — российский интегратор цифровых решений, один из лидеров в сфере веб- и мобильной разработки по версии Tagline и RUWARD. Среди клиентов — АльфаСтрахование, Мегафон, Росбанк, World Class, Магнит и др.

Компания искала новое облако с выделенным инфраструктурным кластером, широкими каналами связи и большими ресурсами для моментального масштабирования.

За 2 месяца AGIMA развернула у нас 100 виртуальных машин с управлением через Proxmox Cluster, внутри которых размещаются DWH, Jira Dev, Keycloak, Sentry, GitLab Runner и другие внутренние сервисы.

О том, как это удалось, читайте в кейсе → 

От чего на самом деле зависит скорость загрузки сайта

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

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

Можно годами спорить о том, какой метод позволит быстрее загружать в каждом отдельно взятом случае, да оно и верно — не сидеть же сложа руки! Да и кривые оные поломают любое решение. Но на самом деле самую крупную работу в этом плане делаем вовсе не мы, рядовые, а те, кто может, например, поднять среднюю скорость интернет соединения раз в 5–10 по стране. Это не чудо, а новые технологии и оптимизации на глубоком уровне (вспомните, как развивался HTTP и WiFi).

Оптимизация — дело правое, но на нашем уровне — весьма незначительное.

Привет, друзья! 👋

Наткнулся на интересное видео со сравнением Filament и нашего MoonShine! 🎥

https://www.youtube.com/watch?v=HOQZi8E_ED8

Всегда интересно посмотреть на свой продукт глазами других разработчиков. Особенно когда это честное сравнение, без попытки кого-то выделить или принизить. Автор очень детально разобрал оба пакета, и что меня особенно порадовало — отметил именно те моменты, на которые мы делали упор при разработке MoonShine.

Главный вывод автора — ключевое различие между пакетами в использовании Livewire. И тут я полностью согласен! Мы специально отказались от Livewire в MoonShine, чтобы добиться максимальной производительности. Например, при работе с модальными окнами мы делаем всего один запрос при первом открытии, а дальше работаем с кешированными данными.

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

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

Есть специалисты по Filamet? Давайте обсудим 💬

Готовы вывести свои веб-приложения на новый уровень? 💻

Тогда новый бесплатный курс «Веб-разработка на практике» — для вас!

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

В рамках курса

🔹Разрабатываем и разворачиваем приложение на FastAPI . 

🔹Разбираемся, как написать Docker-файл и настроить конфигурацию nginx, чтобы задеплоить веб-приложение.

🔹Показываем, как создать и настроить мини-приложение ВКонтакте для отслеживания погоды, а после — задеплоить на облачный сервер.

Переходите в Академию Selectel, чтобы ознакомиться со всеми материалами! 

gRPC-стримы на практике: к чему готовиться и где применять — Сергей Антоничев / Ural Digital Weekend 2024

Опубликовали запись доклада секции «Разработка» с Ural Digital Weekend 2024.

gRPC — штука для многих уже привычная и, казалось бы, понятная, когда дело касается простого «один запрос — один ответ». Но если этого становится мало, нужно «асинхронно», «много» или ««постоянно», есть смысл обратить внимание на gRPC-стримы. И тут-то появляются нюансы. Спикер обзорно рассказал о том, как работают gRPC-стримы, где и как их стоит применять, чтобы не сделать себе и другим больно.

Ссылка на запись доклада в ВКонтакте.

Ссылка на презентацию: https://goo.su/ZrQZZi

Проблемы конфигурирования frontend-приложений — Александр Широчкин / Ural Digital Weekend 2024

Как frontend-приложения получают конфигурации? Об этом в докладе рассказал Александр. А также он разобрал, почему "нельзя просто так взять и зачитать из env". Помог понять, почему не стоит подключать js с параметрами на этапе деплоя или модифицировать index.html. А также узнать, почему не стоит использовать деплой-скрипты с заменой шаблонных параметров в коде. Познакомил с решениями, которые одобрят самые матёрые спецы по инфобезу.

Ссылка на запись доклада в ВКонтакте.

Ссылка на презентацию: https://goo.su/0LPN6

Kubernetes «на сковородке». Простые советы и сложные рецепты — Игорь Титов / Ural Digital Weekend 2024

Опубликовали запись доклада секции «Разработка» с Ural Digital Weekend 2024.

Kubernetes для всех. Простые советы и сложные рецепты. Экосистема Kubernetes.

Ссылка на запись доклада в ВКонтакте.

Ссылка на презентацию: https://goo.su/VKYkri

Сайт, готовый ко всему — Никита Дубко / Ural Digital Weekend 2024

Опубликовали запись доклада секции «Разработка» с Ural Digital Weekend 2024.

Вспомните, где вы обычно тестируете свое веб-приложение. Скорее всего, у вас есть несколько вьюпортов, в которых вы быстро проверяете верстку и, возможно, пишете автотесты. И багов от пользователей почти нет — значит, все делаете правильно. Но как вашим сайтом пользуются на самом деле? Что нужно предусмотреть, чтобы сайт работал действительно почти везде?

В докладе вы найдете множество интересных примеров и отсылок. Заходите посмотреть!

Ссылка на запись доклада в ВКонтакте.

Ссылка на презентацию: https://goo.su/NRS

Что необходимо учесть при поднятии переменных?

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

Из нового выпуска вы узнаете:

• что такое поднятие переменных; 

• три ключевых слова: как объявлять переменные в JavaScript;

• два вида типизаций и условия их определения.

Не забывайте заглядывать в описание к видео — там ссылки на полезные материалы по теме.

Подписывайтесь на канал AvitoTech в Telegram, там мы рассказываем больше о профессиональном опыте наших инженеров, проектах и работе в Авито, а также анонсируем митапы и статьи.

Если у вас в Vite проекте есть данные в json файлах, то иногда удобней работать с json5 (+комментарии и переносы строк, как минимум)

Для этого надо:

1. Поставить Vite плагин vite-plugin-json5

2. Поставить расширение json5 для VS Code для подсветки синтаксиса

3. Чтобы не ругался TypeScript, прописать в index.d.ts:

declare module "*.json5" {
  const value: any;
  export default value;
}

Стало намного удобней.

Бандл не меняется.

Как бы выглядел Хабр в 1993 году.

Приветствую хабравчане, сидел я вечером за ПК, пил кофе и пришла ко мне идея, как бы Хабр выглядел в 1993 году на html 1.0.

Нашел старые сайты тех лет и попытался в простом варианте воспроизвести Хабр. Вот, что получилось. Довольно забавно:)

<HEADER>
<TITLE>Хабр</TITLE>
</HEADER>
<BODY>
<H1>Хабр</H1>

 <dt>Пришли статью, стань автором! <A NAME=69 HREF="">habr.mail.ru</A></dt>
<A NAME=69 HREF="">Моя лента</A>
<A NAME=69 HREF="">Все потоки</A>
<A NAME=69 HREF="">Разработка</A>
<A NAME=69 HREF="">Администрирование</A>
<A NAME=69 HREF="">Дизайн</A>
<A NAME=69 HREF="">Менеджмент</A>
<A NAME=69 HREF="">Маркетинг</A>
<A NAME=69 HREF="">Научпоп</A>


 <dl>
  <dt><H3>Вышел Linux версии 0.2</H3></dt>
  <dd>
Привет, Хабр!
Ядро Linux набирает обороты. Я расскажу как устроено ядро и почему многие энтузиасты выбирают Linux.
   </dd>
   <dd>
   <A NAME=69 HREF="">Читать</A>
    </dd>
 </dl>

 <dl>
  <dt><H3>Ричард Столман хоронит Windows</H3></dt>
  <dd>
В данной статье я приведу 10 причин, почему windows 3.1 и последующие её версии не будут иметь успеха.
   </dd>
   <dd>
   <A NAME=69 HREF="">Читать</A>
    </dd>
 </dl>

 <dl>
  <dt><H3>В программном обеспечении всё плохо</H3></dt>
  <dd>
 Программы тормозят, новые версии требуют всё более мощного железа им уже не хватает 386 процессора на целых 20mhz.

   </dd>
   <dd>
   <A NAME=69 HREF="">Читать</A>
    </dd>
 </dl>

  <dl>
  <dt><H3>Почему С самый лучшмй языка программирования</H3></dt>
  <dd>
Всем приве

Новые курсы Яндекс Практикума для специалистов с опытом

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

«Эксплуатация и разработка в Kubernetes» — за 3 месяца освоите и примените на практике технологии оркестрации контейнеров. Программу составляли инженеры и тимлиды, которые давно работают с Kubernetes. Благодаря этому, вы будете учиться только тому, что на самом деле пригодится в работе. Ближайший старт — 17 октября.

«Apache Kafka для разработки и архитектуры» — 3-месячный курс для тех, кто хочет влиять на масштабируемость и надёжность систем. С этой технологией вы будете работать с более сложными продуктами и сможете повысить грейд. Есть бесплатная вводная часть. Ближайший старт — 21 ноября. 

«Архитектура программного обеспечения» — за 6 месяцев освоите лучшие практики архитектуры и научитесь решать сложные архитектурные задачи. Есть бесплатная вводная часть. Ближайший старт — 24 октября и 28 ноября.

«Мидл Android-разработчик» — 5-месячная программа для Android-разработчиков с опытом. Курс фокусируется на углублении технических навыков, изучении передовых паттернов и технологий, а также на освоении инструментов и методов, применяемых в реальных проектах. Ближайший старт — 14 ноября.

Калькулятор финансов - теперь можете посчитать свои средства и данные сохранятся локально на устройстве)

Предтеча другого, более крупного проекта, который будет потом)

Как в нативе: эти Web API поднимут ваше веб-приложение в стратосферу

Салют, на связи Clevertec. Сейчас наша команда разрабатывает веб-версию банкинга с использованием React. С помощью Web API даем пользователям фичи, которые они привыкли получать в нативных приложениях. Отрываем от сердца список решений 😉

- Web Share API – для обмена ссылками, текстом и файлами с другими приложениями на устройстве. К примеру, удобно отправить чек об оплате в мессенджере, не покидая банковское приложение. 

- Contact Picker API позволяет делиться контактами из своего списка. Можно использовать для перевода по номеру телефона. Не нужно вводить цифры вручную – поле автоматически заполнится контактом из телефонной книги. 

- Media Capture and Streams API в нашем случае позволяет отсканировать QR-код с помощью камеры устройства. Нажимаешь на “Сканировать QR” – открывается окно с камерой, она считывает код и переводит пользователя в дерево платежей.

- Web OTP API открывает возможность автоматически вставлять код из смс. Например, для подтверждения оплаты на телефон приходит сообщение. Внизу экрана появляется модальное окно с подтверждением вставки. И после нажатия на “Разрешить” код отображается в поле ввода.

Подробнее про этот опыт использования Web API мы рассказали в отдельной статье. Что вы думаете о Web API, какие используете? Расскажите в комментариях, будем взаимно полезны друг другу.  

Объектная парадигма и всё, что нужно о ней знать

В седьмом выпуске нашего открытого курса по JavaScript вместе с веб-разработчиком Василием Новиковым рассказываем про:

• способы создания примитивов с помощью конструкторных функций и простой нотации; 

• доступ к методам строкового объекта и использование метода valueOf для получения примитивных значений; 

• концепции области видимости: глобальную, функциональную, блочную и модульную;

• введение в блочную область видимости, добавленную в ECMAScript 2016, и её применение; 

• понимание лексической среды и замыканий, которые позволяют функциям сохранять доступ к переменным родительских функций.

Не забывайте заглядывать в описание к видео — там ссылки на полезные материалы по теме.

Подписывайтесь на канал AvitoTech в Telegram, там мы рассказываем больше о профессиональном опыте наших инженеров, проектах и работе в Авито, а также анонсируем митапы и статьи.

@container запросы на основании стилей — давно забытое старое, да и сделано убого.

При взгляде на эту новую технологию вспоминается давно забывая спецификация для @extend, на которую все забили, кроме пары плагинов для PostCSS. Как и та спецификация, эта технология — чуть более сложный миксин или функция, копировать — вставить с условиями. Жаль только, что сделана настолько криво. Я конечно не ожидал от приемников создателей flex и grid чудес, но не настолько же.

1: Срабатывая неявно (достаточно иметь свойство с определённым значением), они делают код похожим на минное поле. Нужно либо помнить все свойства, что вызывают запросы, либо жёстко регулировать их применение (ещё один подводный камень который будет в разработке, очень удобно).

2: Какой мыслант гигысли додумался сделать это на основе контейнерных запросов? Ведь совершенно очевидно, что запрос с названием «container» будет принимать... стили.

Иначе выражаясь — переделывать.