14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#codepen дня
Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с input:checked+i. Это освобождает мозг и руки для более приятных вещей.
Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz
1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через appearance: none.
2. Я вам этого не говорил, но, технически, уже давно можно на поля ввода накладывать псевдоэлементы. Но не на select. Я всё хочу написать большой пост про реализацию select, пока вот так.
Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно: ::before, ::after, :checked::before, :checked::after... В целом, лично я бы обошёлся радиальным градиентом и одним псевдоэлементом.
3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.
Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:
label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
transform: translateY(100%);
}
#баг дня или история одного апокалипсиса
Знаете, что происходит, если в Firefox ввести в <input type="number"> что-то вроде lol?
Он позволяет.
Да, вы видите эти lol, будто это валидное число. Только вот значение value в DOM превращается в пустую строку. Ну типа «я тебе это показал, но делать с этим ничего не буду». Гениально.
Баг #1398528 в Bugzilla живёт с 2017 года. Проблему признают: Firefox нарушает спецификацию WHATWG, согласно которой input type=number должен принимать только корректные числовые строки. А на деле — буквы, кириллица, эмоджи — всё идёт в бой. Только вот под капотом — пусто. Т.е. ты видишь, что ввёл, но значение не считается валидным. UX? Ну, такое себе.
Почему не фиксят?
Ответ классический: «а что, если у нас локаль с деванагари и арабскими цифрами, и вообще — как различать запятую и точку?». Ну и правда, лучше пусть вводится вся клавиатура, чем разбираться в сепараторах.
А теперь немного цирка из Chrome:
В Chrome <input type="number"> иногда разрешает ввод e, ведь вдруг ты хочешь ввести 1e10 (научную запись). Но если ты просто набрал e, поле становится… валидным. Бинго!
Ещё веселее: 1e- — тоже "нормально", но 1ee — уже нет. Картинку с барабаном вставите сами.
А если ты вводишь 1,5 в локали, где десятичный — это точка, Chrome может забраковать это, а может и нет — зависит от версии, луны и количества кофе у разработчика.
В итоге: у Firefox можно ввести хоть «привет», и он такой: «ну окей, но это не число». Chrome вроде бы фильтрует, но делает это через лунную призму.
Что же мы делаем? Пишем код, блять!
Мораль: в 2025 году проще создать свою валидацию под конкретный случай, чем надеяться, что браузеры когда-нибудь договорятся.
А баг тем временем отмечает 8 лет жизни, всё ещё «NEW», и, судя по комментариям, будет жить
Баг-репорт: https://bugzilla.mozilla.org/show_bug.cgi?id=1398528
Подпишитесь и следите, если вы, как и мы, верите (нет) в чудеса стандартизации.
P. S. тем временем Firefox пробивает дно за дном. В англоязычном интерфейсе выдаёт мне ошибки валидации на финском языке.
P. P. S. я молчу уже о том, что <input type="number"> вообще нахер не нужен и даже вреден: /channel/htmlshit/2663
#firefox #bug #input #number
Скачайте гайды по тестированию вёрстки, сайтов и приложений для веб-студий бесплатно!
Обращаемся к тем, кто делает сайты и приложения на заказ, руководит командами коммерческой разработки 💻
❓Как думаете, есть ли секрет успеха у топовых веб-студий? Может быть, безудержный креатив? Или огромные бюджеты на продакшн? Да, не без этого, но основная причина того, что их выбирают «жирные» клиенты — это обязательное профессиональное тестирование на всех этапах.
😒Можно продолжать работать, думая, что на клиентах и пользователях тестировать дешевле. Но помните, что вы сознательно оставляете свою компанию плестись в хвосте. Согласны быть середнячком с нестабильным потоком клиентов?
🚀Если нет, то прямо сейчас скачивайте бесплатные гайды по тестированию для веб-студий через бот и переходите на новый уровень.
💻А ещё записывайтесь на консультацию по тестированию с экспертами «Лаборатории Качества». Ни к чему не обязывающая получасовая встреча абсолютно бесплатна: обсудим боли и подберём решения под конкретные сроки и бюджет.
Реклама. ООО "ЛАБОРАТОРИЯ КАЧЕСТВА". ИНН 7728697541. erid: 2W5zFGn7mCt
Бесплатный курс по PostgreSQL от практиков рынка
Присоединяйтесь к бесплатному курсу по основам PostgreSQL от Selectel и Эльбрус Буткемп. Он будет полезен Junior- и Middle-специалистам: администраторам баз данных, разработчикам, DevOps-инженерам и аналитикам.
Вы научитесь:
🔹создавать и связывать таблицы,
🔹выполнять базовые операции с данными,
🔹работать с РСУБД.
Бонусы: вы можете получить сертификат о прохождении курса, а также промокоды для практики на мощностях Selectel.
Начните обучение уже сегодня.
Реклама. АО «Селектел», ИНН 7810962785, ERID: 2Vtzqwe2h5J
#видео дня
Если вы интересовались прогрессом моего пульта на Flutter, то, собственно, вот он!
Всё работает и на Linux, и на Windows, и на macOS и, конечно же, на изначальной целевой платформе — iOS.
А вот на Android чот не могу разрешения на сеть победить, но я справлюсь.
На десктопе при этом полная поддержка горячих клавиш. Иметь пульт на ноутбуке — это гораздо сподручнее, чем кажется!
Отмечайтесь, интересно ли вам почитать, чем разработка на Flutter напоминает веб-разработку и как оно там вообще.
#flutter #mobile
#такое дня
Никак не мог вчера понять, почему в части проекта аутентификационные попапы отрабатывают нормально, а в другой — нет.
Флоу-то классический, тяжёлый, надёжный как швейцарские часы:
1. Кликнули по кнопке
2. Открылся попап аутентификации
3. Пока пользователь проходит процесс, ждём закрытия окна (а точнее, проверяем свойство closed по интервалу)
4. Как только окно закрылось — обновляем список токенов.
Так вот в некоторых проектах пункт 3 отваливался. Терялся контекст окна и всё тут. Хотя флоу и инструменты везде одни и те же.
Как оказалось, аддон koa-helmet для Koa.js когда-то давно в патч-версию вкинул заголовки CORS и COOP. И врубил их по-умолчанию.
Что такое CORS знают, в общем, все. А что такое COOP?
Это сравнительно новая штука и она устанавливает правила общения с окном, открытым через window.open. И в случае same-origin, достучаться до свойства closed уже не выйдет.
Есть same-origin-allow-popups, но оно совсем новое и мало где поддерживается.
Ну и в какой-то момент старую версию Koa обновили до поновее и получили упс.
Менять поведение в патч-версиях — это мерзко. Но мы уже не в первый раз такое наблюдаем.
P. S. Очередная серия продвижения интересных каналов! На сей раз — бакенд.
Всё, что остаётся за кадром, но без чего ничего не работает. Каналы от опытных разработчиков, которые пишут про архитектуру, логи, прод, выбор между быстротой и качеством, выгорание, рефакторинг, читаемый код, сложные конфиги и продакшен-факапы. Есть про Node, Go, Django. Добавлены пару каналов с вакансиями. Делимся с вами — забирайте!
#koa #js #backend #popup #coop
#такое дня
Я достаточно долго сидел на Ubuntu и использовал WINE для запуска Photoshop CS6 и CC до того, как Figma стала индустриальным стандартом.
Ну и игры, само собой.
Так вот, в среде линуксоидов, особенно начинающих, распространено мнение, что вирусы в WINE не запустятся, потому что то ли WINE настолько хорош, то ли настолько плох, то ли Linux-based OS настолько безопасные.
Так вот, запустятся. Знаменитый WannaCry прекрасно шифрует файлы и каталоги за пределами выделенной WINE папки. Почему?
Потому что диск Z:\ в WINE по-умолчанию замаплен на всю файловую систему Linux.
WINE не только не эмулятор, но ещё и не песочница. Так что осторожнее с этим, и, как минимум, уберите Z:\ из winecfg.
А вообще, это явно признак того, что WINE очень даже повзрослевший продукт.
Такой вот понедельник.
P. S. если кто не в курсе, Valve Proton и Apple GPTK тоже основаны на WINE.
#linux #wine
#такое дня
Не открывайте этот кодпен, если не хотите повесить ваш Chrome!
https://codepen.io/chasewackerfuss/pen/JKGrJJ
Да-да, не вкладку, а весь браузер. Закрыть-то её можно, но на MacBook на M2 Pro я смог это сделать только через минуту.
Изоляция вкладок, говорили они. Нестинг и анимации не будут влиять на производительность стилей, твердили они... Ха-ха.
У Safari, кстати, всё хорошо. А Firefox сильно тормозит, но не так и не настолько плохо, как Chrome. И весь браузер не вешается.
#codepen #css #nesting #fail
⚡️ Эти каналы реально помогают изучать программирование и IT с нуля!
Не веришь? Проверь сам:
👩💻 Easy GitHub — лучшие проекты гитхаба для практики и освоения IT.
🖥 Easy WebDev — всё о создании сайтов: Frontend, Backend и Fullstack.
🖥 Easy Python — лёгкое изучение Python и необходимого стека навыков.
🔠 Easy InfoSec — кибербезопасность, хакинг, анонимность и многое другое.
🖥 Easy Coder — а здесь вообще про всё, что нужно знать для работы в IT.
Всё бесплатно и простым языком! ❤️Читать полностью…
#ссылка дня
А как сделать кнопку? А как тулбар? А как сверстать несколько колонок с перекрытием? А если мне анимации стандартные не подходят?
Ни слова больше! Google has us covered!
https://web.dev/patterns/
От простых вещей вроде кнопки или описания кривой Безье для анимации до загрузки файлов, работы с буфером обмена и превращения сайта в PWA.
Хотелось бы больше примеров, конечно, но кому не хочется? :)
#web #app #patterns #бородач
#ссылка дня
Все знают, что в JavaScript возможны утечки памяти, вот только никто их не видел.
Погоди, в смысле, никто? Вот же, целый репозиторий: https://github.com/ufocoder/javascript.memory-leaks
Он пока небольшой, но уже есть достаточное количество примеров, от неверной проверки статуса запроса, до дырявого сервиса кеширования.
Не позволяйте памяти утечь, котаны! И дополняйте примеры :)
#javascript #memory #бородач
#шрифт дня
Microsoft выкатили Kermit — первый в своём роде шрифт, в котором каждая буква анимируется поштрихово, как будто её пишут от руки.
Сделан он студией Underware — и не просто для красоты. Этот шрифт помогает детям учиться читать и писать, показывая, как именно строятся буквы.
И, что особенно приятно — всё это работает и для
кириллицы.
В Office уже есть 4 начертания, в мае обещают добавить ещё 38. Всё это — один вариативный файл без привычного набора Regular/Bold/Italic.
📌 Презентация Kermit на microsoft.design
📌 Тест шрифта и эссе от Underware
📌 PDF со всеми стилями и "анатомией" букв
Если ты работаешь со шрифтами — обязательно посмотри. Это очень крутой пример того, на что вообще способны вариативные гарнитуры.
#font
Валера искал работу в ИТшечке, посоны. Сижу литерали часами, и вот это вот: клик, клик, клик. Короче, наст%!&ело по итогу.
А че делает разраб, когда зае@!лся? Пральна — пет-проект. Хоба-на: аппка, которая сама кликает по 200 вакансий на HH в день. Итог: 10 собесов в неделю.
Минусы: кринжевать на собесах и выбирать оффер один х@р надо самому.
Короче, вэлкам потыкать в мою поделку, если кому нада.
@hmailer
#фишка дня
Сейчас возвращается мода (и, по-моему, это правильно) на сохранение состояния вашего веб-приложения в адресной строке браузера.
Буквально — используя параметры строки запроса (query string parameters).
Ну то есть что-то вроде https://buy.that?title=Product&action=buy&config=2&amount=3, классические GET-параметры, но управляемые с фронта.
А вот как позволить клиенту обновить страницу, сохранив эти параметры? Желательно, без лишней работы и без использования JS вообще.
А очень просто!<a href="">Reload</a>
Да, вот так просто! Самое классное, что абсолютно валидно и есть в спеках: https://stackoverflow.com/questions/5637969/is-an-empty-href-valid/43340108#43340108
В спеке буквально прописано, что такая ссылка ведёт на текущий документ, со всеми его параметрами запроса.
Не пишите лишнего, котаны!
#http #html #trick #бородач
#фишка дня
В iOS Safari есть такая фишка: при удерживании пальца на, например, ссылке появляется всплывающее окошко с её предпросмотром. Но иногда это вообще не к месту, потому надо бы найти способ отключить.
Как всегда, способ этот не очень-то стандартный. Спасибо, Apple, чо.
#safari #callout #бородач
🎡 Встречаемся в Коломенском!
16 августа в Москве пройдёт ИТ-пикник — семейный open-air фестиваль для ИТ-специалистов и их близких. Организаторы: Т-Банк, CodeFest и Мельница. Здесь можно отдохнуть на природе, поговорить о технологиях с теми, кто вас точно поймёт, найти новые полезные знакомства и просто классно провести летний день!
📍 Место: музей-заповедник «Коломенское»
📅 Дата: 16 августа
Что будет:
— Лекции от руководителей продуктов, инженеров, аналитиков и исследователей
— Темы: от научпопа до платформенной инженерии
— Будет весело не только взрослым: для детей приготовят квесты, VR-зоны, игры с роботами и мастер-классы – всё, чтобы провести день так же увлекательно, как и родителям
— Живая музыка: на главной сцене выступят: тима ищет свет, Тося Чайкина, Второй Ка.
– Специальным гостем станет Диана Арбенина — впервые в живом исполнении молодых артистов пройдет ее трибьют-концерт: TRITIA, PLC, ПОЛ ПУНШ, Тося Чайкина и Лилу. И завершит вечер секретный артист.
💬 Как попасть:
Пройдите регистрацию на сайте и укажите свою специализацию (заявки будут проходить модерацию)
После этого на почту придёт письмо со ссылкой для оплаты:
→ 1500 ₽ — пожертвование в благотворительный фонд
→ 1500 ₽ — организационный взнос
Один билет даёт вход для вас, одного взрослого и до двух детей.
🔗 Зарегистрироваться и присоединиться
#доклад дня
Вот так живёшь и не знаешь, что коллега — Василий Рогин — выступил на HolyJS с докладом о том, как перенёс фанатские моду Fallout 2 — Nevada и Sonora — в браузер.
Не через стриминг или эмулятор, а с нативным кодом C/C++, собранным через Emscripten в WebAssembly.
Классика жизни.
Проект основан на fallout2-ce — декомпиляции оригинального движка. И вроде бы SDL2 + wasm = счастье, но на практике всё куда интереснее:
🧩 Основные сложности:
1. Цикл игры и цикл браузера не совпадают: приходилось выносить основной луп в requestAnimationFrame, чтобы всё работало без лагов.
2. Asyncify стал ключевым инструментом: позволил «притвориться», что WebAssembly поддерживает sleep() и обычную блокирующую логику, хотя на деле всё идёт через промисы.
3. Проблемы со звуком: в вебе нет привычных потоков, а WebAudio требует костылей вроде SDL_Sleep(1), чтобы не обгонять буфер.
4. Работа с файлами: пришлось изобретать файловую систему с подгрузкой ресурсов по запросу, Asyncfetchfs, IDBFS для сохранений, и обходить баги вроде __syscall_openat, создающего побочные эффекты.
5. Было ещё весело с WebWorker'ами, OffscreenCanvas и SharedArrayBuffer — всё поддерживается, но не вместе и не так, как хотелось бы.
Ссылка на видео доклада: https://www.youtube.com/watch?v=wYJN0pLDPRw
И на PDF: https://squidex.jugru.team/api/assets/srm/878900fe-502b-4b48-a6a9-478d526048dd/holyjs-fallout2-3-.pdf
Fallout 2 — не просто культовая игра, это важный культурный пласт. И круто, что теперь её ответвления (я так понимаю, тут сугубо проблема прав на контент) можно запускать из браузера. Васе большой респект.
А, ну и конечно же, давайте поиграем: https://fallout-nevada.ru/
#game #webassembly
#такое дня
Кто хочет поорать на монитор?
На меня не смотрите, я уже поорал.
Итак, насколько хорошо ты понимаешь даты в JavaScript?
Кто сказал Temporal API? Выйди вон из класса, дедушки разговаривают.
Итак, вашему вниманию квиз на пограничные условия в JS Date API.
Вперёд, делитесь результатами: https://jsdate.wtf/
У меня всё очень плохо 🫠
#js #date #wtf
#статья дня
Тяжело возвращаться из отпуска в нужный ритм, но, в этот раз, я решил не мучать вас бородатыми постами. Надеюсь, и вы от меня отдохнули :)
А начинаем мы новый сезон очередной статьёй Джоша Комо! Он тоже вернулся после перерыва и обратил свой взор на базу SVG: https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/
Как всегда, неважно, начинающий вы или давно в профессии: великолепные интерактивные примеры — визитная карточка Джоша.
Возможно, кто-то восполнит пробелы :)
#svg #tutorial
#фишка дня
Надоело угадывать высоту строки, чтобы текст стал высотой ровно в прописную букву? Say no more!
line-height: 1cap;
#фишка дня
Как сделать описания проектов на GitHub более явными и привлечь внимание читателя там, где это необходимо?
Использовать кастомные цитаты!
Пример: https://github.com/HTMLShit/htmlshit.github.io/blob/master/demo.md
Доступные типы: NOTE, TIP, IMPORTANT, WARNING, CAUTION.
Очевидно, это доступно и в управлении проектами на гитхабе. Для небольших задач — очень хорошо, не нужно переходить в Trello.
Пример синтаксиса:
> [!NOTE]
> Заметка о выпуске
#код дня
Ладно, стратегия взять вас на понт не получилась, ни одного лайка и, видимо, почти ни одного просмотра ссылки!
Если боитесь смотреть, код, который вешает браузер, на иллюстрации.
Такая себе рекурсия! Куча вложенных блоков, а на них ещё и нестинг. Всего-то 8 раз по 40 вложенных элементов.
Я как-то на большее рассчитывал, если честно :)
#фишка дня от Jhey
Не только лишь все знают, что в content у псевдоэлементов можно использовать переменные. Это позволяет удобно помечать, например, уведомления. Или те же бейджики на карточках.
Но ведь, как мы уже. недавно выяснили, анимировать можно вообще что угодно!
Потому... разбиваем строку на span-ы и в каждом с помощью ключевых кадров меняем переменные, отвечающие за контент:
button:hover span:after {
animation: flip 0.2s calc(var(--i) * 0.05s);
}
@keyframes flip {
20% { content: '_'; }
40% { content: var(--c1); }
60% { content: var(--c2); }
}
<span
style="--i: 0; --c1: 'x'; --c2: '$'; --c3: '≈';"
>C</span>
#фишка дня
В TypeScript получение keyof [string, number] кортежа даст не "0" | "1", а:"0" | "1" | "length" | "push" | "toString" | ...
Пу-пу-пу...
Хочешь только индексы?
type IndexKeys<T extends any[]> = Extract<keyof T, `${number}`>;
IndexKeys<[string, number]> → "0" | "1".
👩💻 Ищем JavaScript разработчиков. Релокейт, удалёнка, платим много!
Специально для Вас, собираем лучшие вакансии по JavaScript с прямыми контактами в Telegram:
👩💻 Fronted Jobs - для фронтендеров
👩💻 Node.Js Jobs - для бекендеров
Подпишись чтобы не упустить свой шанс получить лучший оффер!
12 июля в Казани, в экстрим-парке «Урам» пройдет мероприятие Сезон Кода от Т-Технологий, соберутся разработчики, аналитики, QA и продакты, чтобы поговорить о технологиях — не в переговорке, а рядом со скейт-парком и видом на мост Миллениум.
Формат — как лето этого и просит:
→ короткие, насыщенные доклады от практикующих инженеров Т-Банка
→ инженерные зоны и карьерные консультации
→ музыка, граффити, движение, нетворкинг
Темы:
— как проектировать клиентский API, чтобы не захотелось всё выкинуть через месяц
— как не сломать ничего, выкатываясь по 200 раз в день
— что такое микросервисы по-честному
— как тестить прод — и не бояться
— зачем разработчику понимать продуктовую воронку
— и почему инфраструктура — не "где-то там"
📍 Казань, экстрим-парк «Урам»
🕥 12 июля
🌐 Подробности и регистрация по ссылке
Регистрация = короткая форма + пожертвование от 1000 ₽ в один из трех благотворительных фондов.
Важно: при пожертвовании укажите ту же почту, что и в регистрации — туда придёт билет.
Приезжайте. Будет по делу — и по настроению. Не конференция, а техно-фест под открытым небом.
Реклама. АО "ТБанк", ИНН 7710140679, лицензия ЦБ РФ № 2673 от 24.03.2015 г. Erid: 2W5zFGUvVpL
#фишка дня
Раз :has уже везде, грех не воспользоваться. Тем более, некоторые селекторы получаются весьма угарными.
Например, как затемнить все элементы, кроме того, на который наведена мышь?
Вот как-то так:
main:has(article:hover) article:not(:hover) {
opacity: 0.3;
}
main:hover article:not(:hover) {
opacity: 0.3;
}
#фишка дня
Понадобилось мне тут создать список полей для функции watch (обозреватель введенных значений) в react-hook-form.
Но дело в том, что поля в форме сгруппированы по одному из параметров. Ну, условно: feature1[goods], feature1[variants], feature2[goods], feature2[variants].
А watch на вход принимает одномерный массив строк. Так что же делать?
А тут нам поможет flatMap! Это как map, но любой возвращённый массив развернёт и включит в состав возвращаемого.
Удобно? Удобно.
#js #map #flatMap #бородач
25 июня прошел второй Young Con — масштабный фест Яндекса для специалистов, студентов и школьников, которые хотят начать карьеру в IT.
8 000 участников пришли, чтобы познакомиться с инженерами и нанимающими менеджерами компании, попробовать силы в пробных собеседованиях и послушать десятки лекций о карьере, ИИ и технологиях, которые меняют нашу жизнь. А еще посетить интерактивные зоны с технологиями Яндекса, где можно было узнать, как работают лидары в автономном транспорте и увидеть робота, собирающего кубик Рубика за долю секунды — личный проект одного из сотрудников компании.
Помимо экспертов Яндекса, на фесте выступили и приглашенные спикеры. Научпоп-блогер Ян Топлес рассказал про разнообразие карьерных возможностей, а блогер и артист Денис Кукояка обсудил с Глебом Соломиным, как стать креативным продюсером собственной жизни и поговорил о том, почему важно не бояться отсутствия опыта.
Вечером на фестивале прошел финал «Баттла вузов», хедлайнером которого стала популярная музыкальная группа Tritia. Кубок и 1 млн рублей забрал студент из Факультета компьютерных наук НИУ ВШЭ. А после — гости слэмились на лайф-выступлениях от Доры и Feduk.
Подобные фестивали — не только возможность для общения, но шанс узнать про востребованные направления, понять, чем занимаются команды разных сервисов и погрузиться в технологии, которые вы сами сможете развивать в будущем.
Запись выступлений можно посмотреть на VK или YouTube.
#фишка дня
Electron так сильно пытается мимикрировать под нативные приложения, что доходит до абсурда.
Вы думали, что вендорные префиксы почти вымерли, да? Все эти -webkit-, -moz-, -ms-, -o-... А как бы не так!
Вот вам -electron-corner-smoothing!
Что это правило делает?
А оно указывает, насколько сильно применять эффект squircle (квадруг, дефолтное закругление на iOS и macOS) к вашим скруглениями границ. Короче, переопределяет поведение border-radius.
И, более того, по-умолчанию настроено на system-ui! На яблоках вы получите squircle, а на остальных системах — классическое скругление. Вы можете даже не осознавать этого.
.box {
width: 128px;
height: 128px;
background-color: cornflowerblue;
border-radius: 24px;
-electron-corner-smoothing: system-ui; /* Match the system UI design. */
}
react rerender too many times — тебе сюда.