Category : javascript

javascript
Нюансы кроссплатформенной разработки на Vue и React

Этот документ — не просто список, а выжимка боли, шишек и неожиданных открытий, с которыми сталкивается почти каждый фронтендер. Неважно, Vue ты выбрал или React, если твое приложение должно работать в браузере на айфоне пятилетней давности — добро пожаловать в клуб. Здесь будет всё: от странностей с Safari до неожиданных проблем с синтетическими событиями. Нюансы мобильных браузеров и PWAiOS Safari не поддерживает Notification API без установки PWAПроблема: На iOS ты не можешь просто вызвать n…

  • вторник, 8 июля 2025 г. в 00:00:04
javascript
Магия чисел в System Design: эти формулы спасут вас от банкротства и помогут оптимизировать вашу си…

При решении реальных задач по System Design или при прохождении собеседования, обязательным этапом является расчет нагрузки и стоимости на вашу IT-Систему. Давайте разберемся что это за этап и почему он так важен?Зачем нужен расчет нагрузки?1. Определение требований к инфраструктуреСколько серверов, ядер CPU, оперативной памяти, дискового пространства и пропускной способности сети потребуется.Пример:Если система должна обрабатывать 10000 RPS, а один сервер выдерживает 1000 RPS, то нужно 10+ сер…

  • понедельник, 7 июля 2025 г. в 00:00:05
javascript
Прощай, reCAPTCHA! Как я защитил формы входа с помощью бесплатной и невидимой CAPTCHA от Cloudflare

Привет, Хабр! На связи разработчик Peakline — аналитической платформы для Strava. Сегодня я хочу поделиться опытом внедрения Cloudflare Turnstile в веб-приложение на FastAPI. Это решение позволило мне отказаться от назойливых CAPTCHA, улучшить пользовательский опыт и при этом надежно защитить формы регистрации и входа от ботов.Боль традиционных CAPTCHAКаждый, кто хоть раз вводил логин и пароль в интернете, сталкивался с ними: "Выберите все светофоры", "Введите искаженный текст",…

  • понедельник, 7 июля 2025 г. в 00:00:04
javascript
Реактивные системы: возможно ли отслеживать зависимости в асинхронном коде?

В реактивных системах существуют специальные функции, такие как watchEffect во Vue или autorun в MobX, которые умеют автоматически отслеживать зависимости и перезапускать «эффект» при их изменении. Принцип их работы следующий:Регистрация эффектаФункция принимает другую функцию (так называемый «эффект») и сразу её выполняет.Трекинг зависимостейВо время выполнения эффекта система фиксирует все обращения к реактивным свойствам и подписывается на их изменения.ПерезапускПри изменении любого наблюдае…

  • понедельник, 7 июля 2025 г. в 00:00:03
javascript
Скриншот-тестирование фронтенда: руководство по применению в 2025 году

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

  • воскресенье, 6 июля 2025 г. в 00:00:05
javascript
От магии до понятной структуры: разбираемся, как работает Change Detection в Angular

Введение: Невидимый Дирижер и Измеримая ЦенаВ Angular любое изменение в компоненте, которое отображается на экране, является результатом работы механизма отслеживания изменений (Change Detection, CD). За этим процессом стоит Zone.js, который можно представить в роли дирижера, сообщающего компонентам о необходимости обновить DOM.Zone.js не запускает CD сам. Он лишь создает контекст, в котором Angular потом может его запустить. Его задача только уведомлять Angular о завершении асинхронных операци…

  • воскресенье, 6 июля 2025 г. в 00:00:04
javascript
Магия ClientOnly: повышаем производительность и безопасность в Nuxt-приложениях

ВведениеПривет, хабровчане! 👋 Сегодня поговорим о компоненте ClientOnly в Nuxt, который я часто использую в своих проектах. И нет, это не потому что я не знаю как починить SSR-ошибки. Многие воспринимают его просто как костыль для решения проблем с SSR, но на самом деле этот инструмент может принести немало пользы с точки зрения производительности и даже безопасности. Давайте разбираться без лишней духоты и на реальных примерах!Что такое ClientOnly и зачем он нужен?ClientOnly — это встроенный к…

  • суббота, 5 июля 2025 г. в 00:00:07
javascript
System Design: Как бизнес влияет на финальный вид ИТ-Системы и выбор технологий

Представьте, вам поступает задача спроектировать абсолютно новую ИТ-Систему, которую ранее не видел свет. Вам озвучивают сроки в которые нужно уложиться и вы наполненные энтузиазмом и решительностью, приступаете как и положено с выявления требований к этой системе. Далее происходит этап отрисовки верхнеуровнего дизайна, где вы намечаете основные компоненты системы и способы их взаимодействия. Далее после получения одобрения от своих коллег, технического сектора, вы переходите на этап детальной …

  • суббота, 5 июля 2025 г. в 00:00:06
javascript
БЭМ + Tailwind: прагматичный гибрид для современного фронтенда

Введение: конец войны методологийАААААААААААА!!! 15 МИНУТ МОЕЙ ЖИЗНИ ТОЛЬКО ЧТО УШЛИ НА ПРИДУМЫВАНИЕ ИМЕНИ ГРЁБАНОМУ DIV-КОНТЕЙНЕРУ!Знакомо, да? Не я один, кто неистово бился головой о клавиатуру, пытаясь придумать, как назвать очередную обертку для обертки внутри обертки?Я УСТАЛ. Мы все устали. Устали от:Бесконечного .header__nav-container__menu-wrapper__item-list__element 😵‍💫Спора на код-ревью о том, должен ли это быть block__element или просто новый block 🤬"Не используй margin на блоке! …

  • суббота, 5 июля 2025 г. в 00:00:05