Frontend вдохновляет </> Александр Белькевич

Во Vue 3.5 появилась такая штука, как useId. Появилась фича давно, но мало кто знает о ней. Она есть и в React, насколько я помню. useId() - это composable, который генерирует уникальный и стабильный ID для компонента.Уверен, многие сталкивались с тем, чтобы дать уникальные ID компоненту. Особенно полезно, когда нужно компонент перерисовать по какой-либо причине. Раньше делали что-то типа const id = `input-${Math.random()}Это давало определенные проблемы. К примеру, в Nuxt можно было напороться на ошибку hydration mismatch. useId():- Генерирует детерминированный id- Он будет одинаковый как сервере, так и на клиенте- Уникальный в рамках приложения<script setup>import { useId } from 'vue'const id = useId()</script><template> <label :for="id">Email</label> <input :id="id" /></template>Принцип работы простыми словами:- ведёт счётчик компонентов при рендере- строит id на основе позиции в деревеv-0v-1v-2-1Это даёт порядок и отсутствие рандома.+1 в копилку ваших знаний, если еще не использовали.

Небольшая личная история по поводу использования AI.Прилетает мне задание на работе "Сделать админку". В принципе не сложная, дизайна нет, делай как хочешь. Главные требования - чтобы работало. Остальное без разницы. Сроки - максимально сжаты. Как можно сделать быстрее? Конечно же AI. Для помощи выделили Claude Code, который за 200$. По срокам уложился раза в 3 быстрее, чем была первоначальная оценка. Мной почти ничего не было написано руками.И тут вопрос: если все так замечательно, то неужели нас, разработчиков, заменят? Ответ: нет.1. Цель была сделать проект, который если и надо будет развивать, то очень редко и в код никто лезть не будет. Главное - работоспособность.2. За 2 недели вайбкодинга у меня ощущение, что я отупел 😃 Наш мозг очень интересно устроен и его все устраивает, в принципе. Но лично меня - нет. Поэтому параллельно делаю свои проекты, чтобы голова работала.3. Нас не заменят. Просто теперь мы можем быстрее закрывать задачи. Мне временами прилетают таски и баги, на решение которых у меня бы уходило несколько часов. Потому что пока разберись что и где смотреть, пока поправь. AI найдет за тебя нужные места. От меня нужно ревью и закрытие задачи. А потом я могу заняться чем-то более тяжелым и интересным. То есть AI избавляет от рутинных скучных задач и оставляет тебе простор для изучения чего-то нового.Но главный вывод я сделал для себя такой: разработка не станет никогда такой, какой была. Это не плохо и не хорошо. Просто наша действительность.

В продолжении вчерашнего поста.Довольно популярная статья сейчас на хабре: руководство по Chrome DevTools. Что есть внутри:- Что показывает вкладка Elements и как с её помощью править DOM и CSS на лету- Как использовать Console не только для ошибок, но и для интерактивного JS-взаимодействия- Возможности вкладки Sources: просмотр/редактирование кода, брейкпоинты, работа с локальными файлами- Работа с сетью (Network), профилирование (Performance), аудит (Lighthouse) и многое другоеТам много примеров и пояснений, которые реально пригодятся в повседневной работе. Советую к прочтению каждому.

Как запустить сайт для бизнеса в 2025 году и не получить блокировкуРоскомнадзор заблокировал сайт, что делать? Чаще всего проблема в том, что сайт запустили на коленке, забыв о базовых юридических требованиях. Рассказываем, что нужно сделать, чтобы ваш сайт не улетел в бан и не стал объектом проверок. Зарегистрируйте домен на юрлицо или ИПЕсли домен оформлен на «левую» почту и физлицо, доказывать право собственности на него будет сложно. Лучше с самого начала привязать его к компании или ИП. Политика конфиденциальности и пользовательское соглашениеРоскомнадзор и прокуратура не любят, когда на сайте нет этих документов. Даже если у вас просто лендинг с формой «оставить заявку», политика конфиденциальности обязательна. Ее лучше адаптировать под ваш бизнес, а не копировать с чужого сайта. Разберитесь с персональными даннымиОпределите, если сбор персональных данных есть. Форма, подписка или стандартные куки — это уже сбор персональных данные, значит, уведомление в Роскомнадзор нужно. Например, если сайт-визитка без сбора, то уведомление не требуется. Тут каждый случай лучше проверить отдельно. Проверьте контент на «запрещенку»Иногда блокируют сайты не из-за юридических документов, а потому что на них «вдруг» обнаруживаются запрещенные материалы, ссылки или ключевые слова. Особенно это касается ниши медицинских услуг, БАДов, крипты, финансов и т.д. Мы регулярно делаем аудит сайтов и находим мелочи, которые могут стоить блокировки. Настройте хранение логов и безопасностьДа, в 2025 году вопросы к безопасности сайтов стали еще жестче. Если на сайте была утечка данных клиентов, то прилетает не только штраф, но и репутационный удар. Ставьте SSL и защищайте формы. Обязательно укажите юридическую информациюНазвание компании, ИНН, ОГРН, контакты — это не просто «для галочки». Проверяющие органы часто начинают с этих деталей. Следите за рекламой и кукиЕсли запускаете таргет или контекст — политика обработки cookies нужна. И да, за «серую» рекламу (VPN, финуслуги без лицензии) блокируют сайты быстро и без предупреждения. Теперь за рекламу VPN будут штрафы, об этом мы писали вот тут Вывод: Чтобы сайт работал и приносил деньги, нужно соблюдать базовую гигиену: документы, уведомления, безопасность. Сделать один раз, и дальше просто обновлять. Если вам необходима помощь или консультация эксперта, свяжитесь с нами @digitalrights_bot#разблокировкасайта #блокировкасайта #персональныеданные DRC LAW: IT-юристы

transcribetextТранскрибатор (сервис для расшифровки аудио и видео в текст). Поддерживает около 100 языков, принимает MP3, MP4, WAV, M4A, WEBM. Максимальный размер файла 4 ГБ. Результат можно получить в виде обычного текста или субтитров (SRT)Бесплатное, без регистрации и ограничений. ИсточникБольше интересных сервисов вы найдете в этом канале по тэгу #онлайнсервис.@yka_yka канал про современные онлайн-инструменты

JSON-промпты убирают рандом в Veo3, или новая эпоха видео-креосов.Veo3 - это не тапалка для скуфов-левбидва, где можно бесконечно жечь токены в надежде на удачу. Одна генерация в качестве 1080p стоит прилично + лимиты, а если нужен промо-ролик из 10 сцен - косяки могут стать прям проблемой. Поэтому альфапренеры не играют в рулетку, а бьют точно в цель с первого раза.Решение я подсмотрел в твиттере, видели же хайпующий видос для рекламы IKEA? Вот он сделан именно по этой схеме. Я постоянно пишу что кормить нейронку надо .md файлами, но Veo3 надо кормить json-ами.Что за JSON и почему это работает?Вместо "сними мне эпичную сцену с танцорами под дождём", ты скармливаешь модели структурированную инструкцию:JSON`{ "shot": "extreme close-up transitioning to wide", "camera_motion": "low tracking along wet floor", "subject": "competing street dancers", "wardrobe": "casual streetwear", "lighting": "dramatic spotlights through rain", "audio": "hip-hop beats with water splashes"}`Модель перестаёт фантазировать и делает ровно то, что нужно. Консистентность выстрелов растёт в разы.Полный шаблон для максимального контроля:json`{ "shot": "описание композиции кадра", "composition": "правило третей/центральная/диагональная", "camera_motion": "движение камеры", "frame_rate": "24fps/30fps/60fps", "film_grain": "subtle/medium/heavy", "subject": { "description": "детальное описание субъекта", "wardrobe": "одежда и стиль" }, "scene": { "location": "место действия", "time_of_day": "время суток", "environment": "окружение", "visual_details": "детали обстановки" }, "action": "что происходит в кадре", "props": "реквизит и объекты", "cinematography": "стиль съёмки", "lighting": "освещение и настроение", "tone": "общий тон и атмосфера", "audio": "звуковое сопровождение", "color_palette": "цветовая гамма", "dialogue": "диалоги если есть", "subtitles": false}`Как это выглядит на практике:1. Берёшь шаблон выше2. Заполняешь под свою задачу3. Скармливаешь в Veo34. Получаешь предсказуемый результатПрикол в том, что можно копипастить чужие успешные промпты и получать почти идентичные шоты. Лайфхак для ленивых:Не хочешь руками писать JSON? Скорми Claude такой промпт:"Создай 10 сцен для промо-ролика [твоя тема] в формате JSON для Veo3. Каждая сцена 8-16 секунд. Используй этот шаблон: [вставь шаблон сверху]"AI сгенерит готовые JSON-ки, которые можно сразу кидать в Veo3.Продвинутый уровень:1. Генеришь персонажей через Flux с консистентным внешним видом2. Компонуешь их в сцену через Flux Multi3. Используешь Image-to-Video в Veo3 с JSON-промптом4. Получаешь полный контроль над результатомПочему это важно:Раньше AI-видео было лотереей. Сжёг все лимиты в подписке - может, что-то годное выпадет. Теперь это инструмент с предсказуемым результатом.Для мобильных аппок это вообще гейм-чейнджер. Можно клепать креосы под TikTok/YouTube Shorts за копейки, причём с качеством, которое раньше стоило тысячи баксов с операционным гемором.Кароч юзайте лайфхак и кайфуйте.Как всегда по братски поставьте ❤️ и перешлите другу)

Вот еще один классный сервис, который позволяет менеджерить базу данных как в ноушене.https://teable.io/Я сейчас пробую self-hosted развернуть и покликать некоторое время, но как идея мне уже нравитсяTelegram

Затестила новый мессенджер MAX за васСтало любопытно, что это такое и почему все сейчас это хают. Коротко: сейчас приложение сырое и с минимальным функционалом. Подробнее:🩵 Выглядит как телега, но более минималистичная. Дизайн довольно приятный, навигация понятная🩵 Есть встроенная нейронка GigaChat. Это кстати плюс, в той же телеге нет встроенного бесплатного ИИ, что мне кажется странным🩵 Попробовала по поиску найти каналы, на которые подписана тут, но ничего не выходит. Вообще ничего. По ключевым словам тоже. Непонятно, как должен осуществляться поиск и будет ли он вообще 🤷‍♀️Тем не менее, уже можно создать групповой чат🩵 Подгружает контакты из телефонной книги, позволяет общаться в чате и звонить — ну и на том спасибо🩵 Эмодзи доступны только стандартные, разнообразия как в телеге нет 🥴 Но может это пока 🩵 Верстка такая же, как тут, но можно делать заголовки. Что смутило сильно: под постами в канале нет комментариев. Реакции ставить можно, но только одну на выбор 🩵 Можно создавать папки, как в тгЧат с личной перепиской не тестила, не хочу пока туда никого звать 😁 Короче, пока ну такое. Хде каналы, хде авторы и контент?! Непонятно. Сейчас MAX предлагает общаться только с контактами из телефонной книги, это очень ограничивает твои возможности… Возможно, еще будут добавлять и поиск и комменты и всё остальное, но пока очень сыро, конкретно сейчас делать там нечего. Еще планируют интегрировать туда Госуслуги, платежи и т.д., но надо ждать. Пока что как-то так 🙃

Очередной пример того, как взламывают с помощью npm-библиотек, и как при этом используют поиск работы.

Про голосовых помощников банков разных цветов и пути внедрения AI в бизнес.Сегодня утром меня окончательно добил голосовой помощник одного красненького банка. Обычно, когда обращаешься в поддержку синенького, зелененького или желтенького банков и просишь перевести на оператора, чат-бот сразу переключает звонок. А вот мой случай оказался другим: голосовой бот гонял меня кругами, переспрашивая разными способами, какой именно вопрос он якобы не способен решить сам, уверяя, что справится ничуть не хуже оператора. Мы с ним в результате застряли в бесконечной дискуссии, пока связь сама собой не прервалась. Да, я, конечно, догадываюсь, что этот банк сильно сэкономил на внедрении голосового помощника (судя по доступной информации, экономия достигает примерно 80% от затрат на обычную линию поддержки), но, честно говоря, как потребитель, я разочарована.Вокруг искусственного интеллекта сейчас настоящий глобальный бум. Однако если технология реально помогает экономить деньги, почему бы ей не воспользоваться? Если посмотреть вне банков и телекоммуникаций. КамАЗ, внедряя умных голосовых помощников для технического обслуживания грузовиков, снизил простой техники аж на 15%. Schneider Electric активно пользуется голосовыми ассистентами для контроля энергосистем клиентов, экономя таким образом до 10–15% энергии.Для себя, будучи по типу «хорошо информированным оптимистом», я приняла пошаговую стратегию постепенного внедрения искусственного интеллекта в бизнес. Первый этап — изучение текущего подхода к данным. Понятно, что успех любой технологии AI зависит от качества информации, с которой надо работать. Уже сейчас полезно начинать сбор, организацию и объединение источников данных. Через простую обработку базы данных легко подсчитать количество повторяющихся типовых операций. Я обнаружила пару бизнес-процессов, где около 60% составляют элементарные рутинные задачи, которые вполне можно поручить AI.Следующий шаг — определиться с выбором модели: покупать готовое решение или разрабатывать собственное. Дискуссионный вопрос. Важно задуматься заранее над вопросами информационной безопасности и защиты корпоративных данных. Многие организации боятся запускать внешние системы AI. Некоторые всё-таки открыты к экспериментам, а третьи предпочитают приобретать готовые решения и интегрировать их внутрь компании. Здесь советовать не могу, на ваше усмотрение. Главное для себя я приняла, как могу идти.Основное же условие успеха — изменение своего понимания. Сложно переоценить важность изменения взглядов руководителей и менеджеров на роль технологий в бизнесе. Кто-то смело становится первопроходцем, а кто-то пугается перемен. Причина проста: неизвестность пугает. Мой путь — нашла толкового специалиста, который объяснил простым языком. Коллеги прошли специализированное обучение.Если кому-то нужны конкретные пароли и явки, обращайтесь в личку. На соседнем канале, кстати, стартует интересный курс.Будучи одновременно упёртой и ленивой, я снова и снова пробовала дозвониться до оператора красненького банка. К сожалению, алгоритм искусственного интеллекта держал оборону до последнего. Итогом стал личный визит расстроенной и взвинченной клиентки в отделение банка. Как повлияла эта ситуация на моё отношение к банку и помогла ли она сократить затраты банка на урегулирование конфликтов — это отдельная история.#променеджмент

🧠 Rate Limiter на Java без Spring — с нуля, по шагам, с мозгамиКогда у тебя API, бот, сервер или утилита — нужно ограничивать частоту запросов, чтобы никто не зафлудил систему.Решение — Rate Limiter. Ни Spring, ни Guava не нужны. Всё делаем на чистом Java.📁 Шаг 🔢: создаём лимитер с окном по времениИдея простая: мы храним время всех недавних запросов и выкидываем те, что вышли за окно (например, 10 секунд назад).class RateLimiter { private final int limit; private final long windowMs; private final Deque<Long> timestamps = new ArrayDeque<>(); public RateLimiter(int limit, long windowSeconds) { this.limit = limit; this.windowMs = windowSeconds * 1000; } public synchronized boolean allow() { long now = System.currentTimeMillis(); // Удаляем старые запросы while (!timestamps.isEmpty() && now - timestamps.peek() > windowMs) { timestamps.poll(); } // Проверка лимита if (timestamps.size() < limit) { timestamps.add(now); return true; } return false; }}➡️ Здесь limit — количество запросов, windowSeconds — время в секундах.Всё хранится в памяти. Работает моментально, идеально для локального контроля.📁 Шаг 🔢: подключаем к логике запросаПредставим, у тебя HTTP-сервер или обработчик:RateLimiter limiter = new RateLimiter(5, 10); // 5 запросов на 10 секpublic void handleRequest() { if (limiter.allow()) { System.out.println("✅ Запрос принят"); } else { System.out.println("❌ 429 Too Many Requests"); }}➡️ За секунду можно накидать 5 успешных запросов, шестой — будет заблокирован. Через 10 секунд — снова 5 доступных.📁 Шаг 🔢: делаем лимиты на пользователя / IP / ключЧтобы не глобально, а по каждому клиенту — оборачиваем RateLimiter в Map.Map<String, RateLimiter> userLimits = new ConcurrentHashMap<>();public boolean allowRequest(String userId) { userLimits.putIfAbsent(userId, new RateLimiter(10, 30)); return userLimits.get(userId).allow();}➡️ Теперь у каждого клиента — свой лимит. IP → лимитер, токен → лимитер, логин → лимитер.📁 Шаг 🔢: многопоточность и защитаТак как у нас ConcurrentHashMap и synchronized внутри лимитера — решение уже потокобезопасное. Можно сразу использовать в многопоточных веб-приложениях или TCP-серверах.📁 Шаг 🔢: нагрузочное тестированиеВот что будет, если послать много запросов:for (int i = 0; i < 20; i++) { boolean ok = limiter.allow(); System.out.println(i + " -> " + (ok ? "✅" : "❌")); Thread.sleep(1000);}➡️ Первые 5 — пройдут. Потом 10 ❌. Потом снова пойдут ✔️ по мере освобождения окна. Всё по-честному.🗣️ Запомни:Rate Limiter — это простая логика, но если её нет — ты труп под первым же флотом запросов.Лимиты = защита = стабильность. Не жди DDoS, внедряй заранее.

Проблемы сеошника с Chat GPT 👩‍💻В 2022: Как закрыть сайт от Chat GPT?В 2025: Как продвинуть сайт в Chat GPT?Забавно наблюдать, как при появлении Chat GPT в 2022 году - некоторые SEO-специалисты закрывали свои сайты от ИИ, а теперь идет интерес к GEO.GEO - Generative Engine Optimization, или оптимизация под ИИ ответы.Зачем продвигаться под ИИ? Если у вас появился такой вопрос - просто ответьте себе на этот: «Когда вам нужно что-то узнать - вы идете в Гугл или ИИ?». Лично я иду всегда в Chat GPT, а зачем вообще что-то гуглить и потом идти искать инфу по сайтам - если ИИ уже все собрал и может спокойно составить тебе сравнительную таблицу, например по выбору сервиса на основе подробного описания твоей задачи?Я решил изучить эту тему и выявил сигналы, которые помогут вам начать продвигаться в ИИ - поделил их на внешние и внутренние.Внешние сигналы:1. Ваш сайт должен быть подключен к Бинг Вебмастер - можно сделать импорт из GSC (это больше рекомендация, чем требование).2. Ваши страницы (которые вы хотите видеть в ИИ ответах) должны ранжироваться в ТОП-10 (чем выше - тем лучше).3. Вы должны собирать брендовый трафик (чем больше - тем лучше).4. Вам нужно использовать трастовые площадки для паразитного SEO, а также в большом их количестве (если хотите - могу сделать отдельный пост со списком таких площадок).5. Вам нужно присутствовать в тематических агрегаторах (можно использовать партнерки).6. Вам нужно иметь входящие ссылки на ваши страницы.7. Вам желательно проявлять активность в социальных сетях вашего бренда.Внутренние сигналы:1. Ваш контент должен быть четко структурирован (заголовки, списки, таблицы, графики, FAQ, пошаговые инструкции и рейтинги) - все это использует ИИ в своих ответах.2. В вашем контенте ответ на поисковый запрос в ИИ должен быть закрыт вначале абзаца.3. В вашем контенте должны быть реальные факты, цифры и отзывы.4. Вашим контентом реально захочется поделиться (гайды, чек-листы, реальная и годная инфа - что-то свежее, чего нет у конкурентов).5. Ваш контент должен быть уникальным и без воды.6. Ваш контент должен быть подкреплен трастовым источником (особенно если это какая-то статистика) - можно без ссылки на сам источник.7. Ваш контент должен регулярно обновляться.В заключении предлагаю вам составить список запросов так, как это сделал бы ваш пользователь, после чего ввести их в ИИ - и посмотреть, кого из ваших конкурентов он вам цитирует и почему.#ии

Кто тут у нас увлеченные дайвер, секущий в дайверских технологиях? Просто подумалось. Компактные эхолоты давно изобретены. Всякие технологичные дайверские маски, выводящие на экран самую разную информацию, тоже выпускаются. Кто-то ведь уже pineapple-apple-pen провернул? Скрестил эти две сущности для безопасных погружений?Чтобы если на тебя пытается напрыгнуть гигантская акула и отгрызть большую часть тебя, или скат пробует нанести стратегическую инъекцию в ногу, или мурена решила ввинтиться тебе в... в общем - куда-нибудь ввинтиться... Чтобы высокотехнологичная система тебя предупреждала и никто тебя непредсказуемо не ел, не колол и никуда не ввинчивался? А то что-то поиск вот с ходу как-то на этот вопрос мне не ответил.#быт