Веб-разработка — страница 10

JQuery всё.С 2020 года я создаю сайты на Wordpress. Ещё раньше начал изучать, что такое верстка. jQuery нужен был чтоб открыть попап, сделать табы, аккордеон или слайдер через Slick slider.Про оптимизацию я тогда не думал. Главное, что сайт работает — это уже успех. В какой-то момент просто работающего сайта стало мало и я начал интересоваться, как сделать его не только работающим, но и быстрым. jQuery — одна из проблем, которая всегда появлялась в рекомендациях по улучшению скорости работы. Чтоб её решить, нужно освоить новый язык — Javascript. Но изучать я его не хотел, для меня он был непонятным и сложным. Погружаться в изучение не планировал. Меня пугало обращение к элементу, дальше я уже не лез, считая «раз к элементу так сложно обратиться, то дальше будет ещё хуже». Для примера, вот создание переменной в jQuery и в JS:const editButton = $(‘#edit-button’);const editButton = document.getElementById('edit-button');Всё изменилось, когда в сети запустили истории про ГПТ. Он легко смог переводить мой jQuery в JS. Так началось моё изучение этого языка программирования. По началу я разбирал код, который переводил мне ГПТ. Смотрел как и что написано, сравнивал со своим аналогом на jQuery. Потом что-то писал сам на JS, что-то сложное для меня писал на jQuery и давал ГПТ перевести на JS. Этот период длился не долго, я даже не заметил, как перестал это делать. Начал писать свой код на JS, а если не знал какой метод использовать, то уточнял у ГПТ какой метод сделает то, что мне нужно. К примеру: какой метод найдёт нужного родителя или как проверить, что у элемента уже есть определённый класс.В общем, так я и перешел от jQuery к Javascript. Теперь это не большой и страшный зверь.Ещё один важный элемент для оптимизации сайта — это уметь читать Network в браузере и разобраться с картинками.Помогите решить, какой следующий пост написать. 🤎 Про работу с Network (Сеть) в браузере👍 Про отложенную загрузку картинок на сайте

Как я запрогал галерею скриншотов без знаний кодаУ меня давно сидела идея завайбкодить свою галерею скриншотов — Mobbin по-русски. В один момент решил просто начать. Друзья помогли настроить Cursor как надо, чтобы он не писал хуйню.В проекте нужно было интегрировать CMS для хранения скриншотов приложений. Я выбрал Strapi. Из-за моих отношений на “Вы” с кодом я подключил MCP Context7, чтобы скормить ему доку и сделать API-интеграцию. Ëбка началась тогда, когда я понял, что у Strapi максимально багованный интерфейс — не работает селектор выбора страниц в галере изображений и через drag&drop нельзя менять порядок скриншотов в галерее и далее ― на проде. Я попробовал написать свой плагин, а в итоге курсор решил нахуй снести весь Strapi и контент. Поэтому двигаемся без плагина.За 10 минут подключил Clerk для авторизации.Для фронтенда я использовал Next + shadcn + Tailwind. Некоторые кнопки и компоненты взял у Серафима в его продукте 21st.dev.Вишенка на торте — деплой на Vercel. Думал, что это будет боль, а оказалось за 5 минут можно справиться.И вот что самое кайфовое: когда я собрал первую вменяемую версию интерфейса на локалхосте — прилетело столько дофамина, сколько никакие рилсы или шортсы не дают. Реально из разряда: «ебать, теперь я так могу?».Поэтому если ты дизайнер, пробовал учить фронт и не зашло (как у меня), самое время попробовать писать промпты и кайфануть от того, что сделал это сам (ну и чууууть аишка помогла).Особых надежд на продукт не строю, кажется, что он слишком нишевый и мало что можно придумать поверх скринов и демок приложений. Но опыт кайфовый, а главное — я наконец убрал страх что-то кодить.P.S. У Strapi на бесплатном тарифе есть cold start секунд 15, поэтому если есть желание — переходи по ссылке, подожди пока подтянутся скриншоты и потыкай:🔗 https://admin-dashboard-seven-chi.vercel.app/

#рекомендую ✨ Иногда в работе использую markdown-разметку для текстов. А когда только училась на тестировщика, то было вообще непонятно, зачем она нужна и как ею пользоваться. Освоить помог вот этот тренажер 👇https://commonmark.org/help/tutorial/ ✅ С ним реально за 10 минут можно разобраться как пользоваться маркдауном.

Так выглядел сайт группы «Кровосток» с 2005 по 2022У сайта есть анимационное интро, можно посмотреть случайные фотки участников группы и послушать демки. Весь интерфейс озвучен голосом Шила!Потыкаться сегодня можно только через вэб-архив.Приклеиться

Полезные посты о #телеграм 🔤📌Как транскрибировать текст📌Сделать запись на ретро-пластинку📌Получить статистику своего канала📌Как сделать викторину📌Как сделать свой стикер📌Мое выступление на конференции о том, как телеграм может помочь педагогу( очень много пользы за 10 минут) 📌Как быстро добавить картинку, гифку или видео📌Как быстро сделать ребус в телеграм📌Как вставить ссылку в текст📌Как сделать темы в группе📌Как сделать киномемы📌Как структурировать чаты по папкам📌Бот Откуда подписки📌Зачем педагогу вести тг-канал📌Как не потерять сообщения в телеграм

Лоханулась с новым законом о персональных данныхКороче, помните, я все говорила про свой бесплатный мини-сервис, который поможет подрядчикам и тем, кто их ищет на проекты, находить друг друга? Так вот, я его сделала, еще с месяц назад наверное (если не больше). Даже кому-то успела в личку отправить. Лого красивое поставила на аватарку 😁А название — ну вообще топ!Но я выпустила его в виде бота в ТГ. Чтобы вы понимали, в боте такая механика: ты получаешь доступ к целой базе крутых исполнителей-диджитальщиков, которых посоветовали другие крутые ребята с рынка, но для этого тебе самому нужно сначала кого-то посоветовать, оставить его ник и свой для связи. Такая биржа наоборот. И вот ровно через несколько дней вступают в силу поправки в закон, согласно которым нельзя хранить перс.данные пользователей в зарубежных сервисах. А Телеграм — зарубежный сервис, как и ники (даже без телефона) — перс.данные 😬 Короче, теперь сижу думаю, что с этим делать. Пока забить, так как я автор-малыш, и нормально уже проверить идею в бою (ибо всё сделано уже, жалко) — или пойти пилить теперь сайт на Тильде? С сайтом, конечно, будет много работы, его хотела делать, только когда бот перестанет справляться. ⭐️ Так что думаете? Выпускать бота в жизнь и пока не париться или идти пилить сайт? Памагити.

Визуальное программирование давно перестало быть игрушкой для школьников 👨‍💻Сегодня платформы, которые позволяют собирать приложения, сайты и сервисы без строчки кода, используют предприниматели, дизайнеры, маркетологи, студенты 🔥Сегодня разберём, как работают самые популярные no-code решения: от обучающего Scratch до продвинутого FlutterFlow. Для кого подойдёт каждая платформа, что на ней можно создать и с какими ограничениями придётся столкнуться 👇1️⃣ Если вы ищете способ познакомить ребёнка с IT 👨‍👧‍👦Scratch — один из самых известных сервисов визуального программирования, с которой начинают путь в ИТ миллионы школьников по всему миру, включая Россию. Сервис разработан специально для обучения программированию с нуля: здесь нет кода в привычном виде, а логика строится из цветных блоков, которые легко соединяются между собой.Здесь можно создать простую игру, анимацию, интерактивную историю. Все действия визуализированы, благодаря чему обучение проходит без страха перед «настоящим» кодом.Scratch активно используется в российских школах и на внешкольных курсах. Она бесплатна, полностью переведена на русский язык, работает в браузере и не требует установки. Он подойдёт родителям, которые хотят вовлечь ребёнка в IT, педагогам для подготовки уроков, или тем, кто делает первые шаги в цифровом творчестве.2️⃣ Для создания сайта, лендинга или портфолио 💼Tilda — популярная no-code платформа в России, ориентированная на язык визуального программирования сайтов. Здесь не нужно знать HTML или CSS: пользователь просто выбирает готовые блоки, настраивает их внешний вид и получает полноценный сайт, адаптированный под мобильные устройства.С помощью Tilda можно быстро запустить лендинг, портфолио, блог или интернет-магазин. Это особенно удобно для малого бизнеса, фрилансеров и маркетологов, которым важно запуститься быстро без расходов на разработку. Сервис полностью русифицирован, работает стабильно, а поддержка с обучающими материалами доступны на русском языке.3️⃣ Если вы хотите протестировать идею мобильного приложения 📱Это уже не начальный уровень визуального программирования, а более серьёзные no-code инструменты, которые используют стартапы и предприниматели по всему миру.Bubble язык программирования — подходит для создания сложных веб-сервисов: личные кабинеты, CRM-системы, онлайн-платформы. Здесь можно настраивать бизнес-логику, фильтры, динамические страницы, работать с API. Интерфейс визуальный, но требует базового понимания структуры данных.Adalo больше ориентирован на мобильные приложения. Подходит для запуска MVP — можно собрать интерфейс, подключить базу, опубликовать в Google Play. Несмотря на простоту, платформа позволяет реализовать авторизацию, списки, фильтры, внутренние уведомления.Обе платформы полезны тем, кто хочет создать продукт без привлечения разработчиков. Для российских пользователей доступны русскоязычные гайды или сообщества, что упрощает вхождение в no-code разработку.4️⃣ Если вам нужно визуальное программирование на уровне профессионала 🤓FlutterFlow — это платформа визуального программирования, созданная на базе языка программирования Google Flutter. В отличие от большинства no-code решений, эта среда разработки ориентирована не только на новичков, а еще на разработчиков, которым важно сэкономить время на создании интерфейса. Сервис позволяет собирать мобильные приложения для Android и iOS в визуальном редакторе, одновременно сохраняя доступ к настоящему коду.Пользователь может настраивать экраны, управлять состояниями, работать с анимациями, подключать Firebase и внешние API. Интерфейс интуитивный, но при этом не ограничивает функциональность. Возможна генерация исходного кода, что особенно актуально для тех, кто планирует дальнейшую доработку проекта вручную.Он подходит как для создания MVP, а также для разработки полноценных приложений, включая маркетплейсы, агрегаторы, системы бронирования или другие цифровые продукты.

Как переписать большой JS-проект на TypeScript и не попасть в дурку?(никак)Именно этим вопросом мы задались, когда наконец взялись за задачу, которая висела над нами годами: перенос Имперского Стражника на TypeScript.Что это нам дало?🔹 Во-первых — стабильность.Прощай, магическое “а почему тут строка вместо числа?”, “а почему undefined превратился в пустой массив?”, “а почему всё вообще сломалось?”.С TypeScript багов после обновлений стало меньше, и появилось то самое чувство уверенности в коде, которого так не хватает в JS.🔹 Во-вторых — контроль и понимание.Строгая типизация дала бонусы статического анализа, позволила чётче выстроить архитектуру и выявить уникальные случаи, которые раньше были размазаны по коду.Мы смогли ввести интерфейсы, сделать код легче и... приятнее.🔹 В-третьих — головоломки для ума.В условиях многомодального микросервиса возникали кейсы, в которых даже GPT говорила: "Я не знаю как это сделать"Но в итоге — всё реализовано. Всего один as unknown каст на весь проект. Почти честно!🔹 В-четвёртых — побочные апгрейды.Работа с типами докатилась и до других проектов: появились дженерики в rgcache, улучшены сцены в regraf, типизировано то, на что раньше не хватало мотивации.📍 Где мы сейчас?Мы прошли отметку в 50% TypeScript-кода в репозитории.Пишем утилиты, абстрактные классы, бойлерплейты на все случаи жизни.Но, пожалуй, главное счастье — утилита для маппинга телеграм-ошибок в enum, которая избавила нас от игры “угадай строку в description” и свела обработку ошибок к одной equals-проверке.🧩 Что дальше?Завершить миграцию, привести REST API в порядок (пока там лес, JS и безысходность) и, наконец, поставить в YouTrack статус - готово.

взято отсюда: открыть2025/07/04 Туннели CloudFlare.com: делаем вебсервер дома без публичного IPЖизнь постоянно меняется. Вот я, например, остался без работы. А еще переехал на другую квартиру. Нет уже того милого домика у провинциального озера с комнаткой под лестницей, грущу. Зато теперь мне 7 минут до метро. Но рассказ не об этом. Заодно сменился интернет-провайдер, и нынешний наотрез отказывается давать публичный IP, даже за деньги. Это для меня неожиданность, я привык жить с внешним IP. Но, оказалось, сегодня и это настраиваемо. И сейчас расскажу, как я настраивал. Кому техническая тема не интересна, может дальше не читать. https://lleo.me/dnevnik/2025/07/04/IMG_20250704_231823.webpКогда вы открываете мой домашний сайт в поддомене https://qs.lleo.me (там ничего интересного для посетителей нет), вы попадаете на вот эту фитюльку, которая висит на домашнем WiFi и не имеет публичного IP — ни сама, ни WiFi-роутер. Так же самая фигня, когда вы слушаете «Радио Рыбий Жир» https://lleo.me/radio — аудиовещание тоже идёт именно оттуда, хотя и кэшируется на CloudFlare. И ещё много открытых и закрытых проектов, которые висят дома на домашнем wifi и теперь работают в условиях отсутствия публичного ip. Как это возможно?Сервис cloudflare.com по праву имеет самый блатной IP-адрес: 1.1.1.1 Много лет он является центром здравомыслия, нестяжательства и главным хабом интернета. Все мои сайты проксируются через cloudflare.com Что это дает?-- защиту от DDoS-атак-- закрывает реальный IP сервера от неумных карих глаз-- автоматом снимает вопросы https и головные боли с обновлением сертификата-- кроме того, это неплохая защита от дурного глаза и порчи: блокировать сайт за cloudflare.com гораздо сложнее. Письма Роскомнадзора тоже идут на cloudflare — он просто не знает, куда их еще слать. Хотя cloudflare честно их переправляет владельцу сайта — так было у меня недавно, я выполнил требование Роскомнадзора, убрал статью о настройке VPN, и Роскомнадзор сообщил опять же cloudflare, что мой дневник выполнил требования и больше не в реестре. Итак, существует миллион причин использовать cloudflare, но речь сегодня не про них и не про VPN, а про настройку личного сервера дома.Как работает cloudflare с сайтами? Вы прописываете для своего домена записи от cloudflare (там есть инструкция), и отныне браузеры посетителей идут туда. Дальше cloudflare разбирается, какой сайт вызвал, и сам бежит к вам на сайт с клиентским запросом (в простом случае — по порту 80), а ответ вашего сайта передает клиенту. То есть, работает шлюзом. Ходит он к вам со своих IP, но IP клиента приносит в специальном заголовке CF-Connecting-IP Хорошо даже, если ваш сайт не будет вообще отвечать никому, кроме cloudflare. Но, как минимум, если вас интересуют по какой-то причине реальные IP посетителей, вы можете настроить nginx возвращать реальный IP клиента из заголовка. В nginx в секции server это делается так:[ ТЕКСТ ПОД КАТОМ: Доступен только в оригинальной заметке на сайте ]Но дело-то не в этом. Со временем умным людям пришла в головы светлая мысль: тропинка между cloudflare и вашим сервером может быть не только по порту 80 или 433, а вообще любым способом! И cloudflare предложил свой тоннель. Который отличается от беганья по порту тем, что тоннелю не нужен публичный IP вашего сайта, достаточно, чтобы ваш сервер как-то поддерживал его, например, со своей стороны, а это можно делать даже с серым IP.Итак, у вас есть Самый Обычный Домашний Интернет, без статического публичного IP, без динамического публичного IP, а просто с каким-то непубличным сереньким IP 192.168.xxx.xxx или 10.xxx.xxx.xxx, который вам присвоил провайдер. Но вы все равно хотите иметь сайт и прочие интернет-сервисы у себя в квартире. Я часто слышу хныканье, мол, у какого провайдера купить место и серверные мощности для нашей домашней странички... Чуваки, поверьте, ваша сраная домашняя страничка и даже ваш сраный корпоративный сайт, куда х... [не уместилось, окончание на сайте]

Who is guiltyСпецпроект для диджитал-специалистов о трудностях коммуникации между дизайнерами и разработчиками. Монохромный, со звуком, стилёвыми иллюстрациями и анимацией прокрутки. Это и смешно, и полезно, обязательно зацените)#иллюстрации #цветЛюдочка, референсы – идеи для веб-дизайнеров

👨‍💻 Создание демонстрационных приложений Mesop — это отличный инструмент для быстрого создания веб-приложений на Python. ⏯ Он ориентирован на быструю разработку приложений и демонстрационных интерфейсов, при этом не требует знаний JavaScript, CSS или HTML.Установка библиотеки:pip install mesop💻 GitHub🔤 Mesop поддерживает горячую перезагрузку, что позволяет быстро настраивать и обновлять интерфейсы во время разработки, значительно упрощая процесс работы.✄┈┈┈┈┈┈┈┈┈┈┈┈┈Заметки программиста «(!?»🇨🇱 Python Tech Code

Еще и успел запаблишить себе на домен: https://game.oneweekai.comКстати очень просто:1) Репозиторий на GitHub, 2 файла: 1 с html, другой с js —с обращением в антропику2) Рега в VerselОбновлять тоже супер изи — обновляешь файл просто, заменяя код на новый с ClaudeА еще и полностью Free, только 20$ за клод, который и так былНапиши в линке комментарий Claude и кину инструкцию :)))Блог Неуспешный Неуспех

🧠 useEffect — 3 ошибки, которые совершают даже опытныеUseEffect — вроде простой хук, но я регулярно вижу, как даже сеньоры допускают одни и те же ошибки. Ловите топ-3:1. Зависимости не указаны или указаны неправильноuseEffect(() => { fetchData();}, []); // А fetchData зависит от props или state, о которых забыли📛 Проблема: stale data, гонки, баги, которые сложно поймать.✅ Решение: всегда указывайте все зависимости. Если функция создается внутри, — оберните её в useCallback.2. Эффект выполняется чаще, чем нужноuseEffect(() => { console.log('rendered');}, [obj]); // obj — это каждый раз новый объект📛 Проблема: useEffect триггерится постоянно✅ Решение: мемоизируйте объекты, используйте useMemo или храните данные в state.3. Не чистится эффектuseEffect(() => { const id = setInterval(doSomething, 1000);}, []);📛 Проблема: утечки памяти, залипшие таймеры✅ Решение: обязательно возвращайте clearInterval, removeEventListener и т.д.👉@frontend_sovet

Как организовать преиспользование компонентов в React?Наши преподаватели поделились методами организации переиспользования компонентов, которые помогут сократить время на разработку, повысить читаемость кода и упростить поддержку проектов. Данные советы будут полезны React-разработчикам любого уровня.Делитесь своими приемами в комментариях👇

Создала тренажёр для A2 на разницу "do" и "be". Можете делиться со своими учениками: https://effervescent-sprite-7a3e25.netlify.app/Создать такой можно с таким алгоритмом:1⃣генерируем код в ChatGPT (описываем ему в деталях задачку)2⃣создаём на компьютере папку с файлом index и расширением .html3⃣вставляем туда наш код4⃣загружаем папку на https://app.netlify.com/drop 5⃣если всё правильно, получаем собственный тренажёрПромпт у каждого будет индивидуальный, но можно попробовать что-то типаI'm an English teacher. I have an A1 student who wants to understand and use [TOPIC]. [RULE/EXAMPLE]I want to create a simulator on Netlify. It should start with the sentences, up to 10, using [TOPIC] in different forms. The level of the sentences should be A1-A2, there shouldn't be any difficult words or grammar exceptions. It should be a dropdown selection exercise with randomized options and only one correct answer. The key should be placed randomly in the dropdown list. If the student chooses the correct answer it should be lit green. If the student chooses the wrong one, it becomes red and the student should be able to re-choose the correct one. Then I'd like it to have a "new round" button. Clicking on it, the student will get a new set. For a new set, generate new sentences.

🗣 Автор — Несносный дед🔗 Канал — Несносный дед PRO-ДиректДля всех кто сравнивает GTM с ЯТМ.Немного истории, каким был GTM на момент релизаGoogle Tag Manager (GTM) в момент запуска в октябре 2012 года был сыроватым по сравнению с тем, что мы имеем сейчас. Ниже — список основных косяков и недоработок, которые вызывали боль у первых пользователей:🔧 1. Ограниченный набор встроенных триггеров и переменныхВ момент запуска GTM умел отслеживать разве что просмотры страниц, клики по ссылкам и отправку форм.Отслеживание прокрутки, таймеров, видимости элементов и прочего добавили только спустя годы.Даже Click Classes или Click Text не всегда нормально работали.📦 2. Отсутствие отладки (debug/preview) как мы её знаемНа старте не было полноценного режима предварительного просмотра с консолью, где видно, какие теги сработали и почему.Первая версия дебага была урезанной и неудобной: приходилось ставить console.log вручную.💣 3. Невозможно было нормально работать с версиями и откатомИстории версий в начальных релизах не было: один неправильный тег — и всё рушилось.Откатиться на прошлую рабочую версию — невозможно.Автосохранения не было — случайно удалил тег? Прощай.🔐 4. Плохая система прав и совместной работыИзначально не было разграничения прав доступа (viewer/editor/publisher).Один аккаунт = один доступ. Хочешь, чтобы коллега помог? Делитесь логином и паролем.⚙️ 5.Недокументированные баги и хакиМногие функции работали нестабильно, особенно кастомные HTML-теги.Тег с JavaScript мог вообще не сработать без объяснения причин.Отслеживание событий часто ломалось при малейшем изменении DOM.🐌 6. Очень медленный интерфейсНа запуске GTM был неповоротливым, с долгими загрузками интерфейса.Иногда интерфейс «висел» при публикации контейнера или вылетал при попытке создать тег.📚 7. Отсутствие нормальной документацииПервый год существования GTM сопровождался крайне скупой справкой.Всё приходилось узнавать методом тыка или на форумах.🧩 8. Интеграция только с Google AnalyticsВ первые релизы GTM вообще не поддерживал сторонние пиксели (Facebook, Hotjar и т.п.).Нужно было всё пихать через Custom HTML с кучей костылей.💬 ЗаключениеЗапуск GTM в 2012 был скорее «бета-версией для смелых» — инструмент явно опережал рынок, но не дотягивал по UX и стабильности. Первые пользователи были скорее бета-тестерами. Но уже к 2014 году GTM стал мощным и удобным инструментом, особенно после появления dataLayer push, debug-предпросмотра и шаблонов тегов.

Обновил сайт 2.0После справедливых комментариев я еще раз взглянул на свой сайт, взглянул на сайты конкурентов и понял, что на коне не я.Я закатал рукава и пошел нагло тырить крутые элементы из готовых UI kits.Вот частичный список, на случай если вы захотели модненькие анимации для своего сайта:1️⃣ Aceternity UI - самые приятные и топовые компоненты для лендинга.2️⃣ React Bits - куча интересных анимашек для лендинга и не только.3️⃣ Hero UI - большой красивый пак с детально продуманными компонентами для интерфейса (не в обиду shadcn).За часок удалось хорошенько накрасить губы и добавить еще одну страницу про сообщество.Кстати, в нем есть курс по Lovable, где я собрал еще больше дизайн библиотек для разработки с Lovable 😏Заценить тут - lowcoding.dev

Плагиат или нет? Многие знают сервис teleboss и даже работают в нем. В целом неплохой сервис для своих задач. Но также есть еще и сервис livedigitalА теперь попробуйте найти отличия в них. Видео выше 👆

последнее время у меня идет война с самим собой на тему наведения порядка в кодекодовая база большая, бизнес построен на б2б клиентах, все включается через multi tenancy плагин под отдельного клиента (что, кстати, интересно - разрабатываете один продукт, но фичи продаете штучно), разработчиков много, а порядка нетс чем я постоянно сталкиваюсь, так это с отсутствием инженерии как таковой в реакт коде. все начинается с PoC, до рефакторинга/тех долга мало кто доводит дело, то ли сроки жмут, то ли никто про чистый код не читает (и не знает что кривой код плохо скейлится), уж не знаю. что прям калит и хочется поменять в обозримом будущем:- бесконечные обертки мемоизации колбеков/значений с правильным или нет массивов зависимостей (наверняка, когда-то был правильный, однако со временем кто-то забывал достраивать или убирать ненужные вещи оттуда)- определение компонентов внутри рендера функции- плохая композиция компонентов (невероятно большие компоненты, части связанного кода не изолированы в кастомный хук/компонент, код абсолютно не линейный, количество пропов для компонента переваливает 7-10 и дриллится на глубину 2+)- нет дизайн системы никакой. тебе приходит задача взять что-то со страницы А, добавить то же самое на страницу Б, оказывается, ты не можешь просто взять компонент и интегрировать его, надо в 83738292 раз создавать селект, копировать стили (css in js 🙃🙃), причесывать его, так как наводим порядок в дизайне, заодно (возможно) стоит причесать и во всех других местах старые вещи. а потом я получаю на ревью комменты: «я два часа думал зачем ты трогал код двухлетней давност». иногда в этом есть смысл (смысл - не трогать), так как оказывается есть мертвый код, а-ля депрекейтед страницы короче, я уже мечтаю собирать дизайн систему и заниматься ТОЛЬКО интеграцией. рефакторить больно. еще интересно наблюдать когда проп называется useSmth, я сначала удивился, думаю, зачем кастомный хук прокидывать в компонент, а это оказывается isSmth (булева), такие же штуки бывают возвращаются из кастомных хуков, вот есть у вас const { updateSmth } = useSmth(), и вы начинаете ее в условиях вызывать не подозревая, что это кастомный хуктак что, товарищи, хорошая инженерная культура сильно экономит время вашим коллегам, больше времени - меньше сил затрачено и выше ТТМ

Вчера несколько часов ботал bolt.new, собирал фронт продуктаУ меня есть miro прототип интерфеса новых разделов продукта dashly. Обычно дальше процесс такой: - собрал прототип- сделал pbr с дизайнером и фронтендером- Отдал в дизайн, ждешь несколько дней что получится- делаешь ревью в figma- правите- принимаешь- отдаете в верстку...AI меняет работу. Сейчас у меня есть собранный прототип. Очень черновой. Есть GUI нашего продукта (в figma). Ну и есть сам продукт, GUI можно достать из него.Скармливаю в Bolt.new GUI. Даю вводные что весь фронтенд должен делаться с учетом этого гайда. Даю ему скриншоты моих прототипов. Объясняю коротко как связаны между собой страницы. Буквально два предложения. Через 5 минут получаю "готовый" собранный сверстанный раздел для админки. А дальше сижу и допиливаю детали. 1. Что-то не по прототипу или не по GUI (не все допер, что-то в прототипе у меня недодуманно было).2. Какие-то вещи потыкал, увидел как работают в живую. Не понравилось. Объясняю ему как переделать. 3. Что-то появилось нового, доп идеи. Объясняю, доделываю.Кстати. Доделываю я так: Делаю скриншот. В миро переставляю как мне нужно. Добавляю что-то, меняю тексты. Делаю скриншот. Скармливаю в Bolt.new. Объясняю, что надо поменять на основе новой версии прототипа. Готовый ли это код для продукта? НЕТ! Верстать точно будем сами. Но насколько быстрее становится понятно что верстать, как, какой пользовательский опыт будет у интерфейса. Кайф.

#вайбкодингУроки⚪️ Итак, как очень быстро сделать сайт с анимацией на фоне. Видео и ниже уже в сухом остатке по шагам:1. Регистрируемся на lovable.dev (даёт 5 запросов в день бесплатно)2. Либо выбираем уже готовый чужой проект, что нам нравится, либо создаём с нуля. Лучше с нуля.3. Пишем подробно все свои хотелки в чат (желательно структурированно и подробно, ещё лучше — иметь уже скриншот сайта, который нравится по дизайну, или Figma, но это опционально) + описание вашего желаемого стиля4. Регистрируемся на unicorn.studio (внимание, тут потребуется оплата в 18 долларов, чтобы без ограничений), но можно и без этого фона обойтись5. Выбираем нужную анимацию, копируем, как я показал в видео и вставлям в lovable с просьбой поставить это на фон, используя инструкцию, что мы ему тоже добавили6. Подключаем домен/supabase по желанию7. Отправляем код на GitHub по желаниюПрошу прощения, если было быстро — пока не понимаю, нужен ли такой видео-формат, поэтому не вкладывался в Loom или Screen Studio. Если норм, то сделаю уже более подобный урок с Lovable без спешки и ограничения в 5 минут 😉 Чтобы понять это — этого жду обратную связь)@oh_my_zen

ФНС подготовила проект изменений в порядок обмена электронными счетами-фактурамиС 1 октября 2025 года начнет действовать новый порядок обмена электронными счетами-фактурами взамен утвержденного приказом Минфина России от 05.02.2021 № 14Н «Об утверждении Порядка выставления и получения счетов-фактур в электронной форме по телекоммуникационным каналам связи с применением усиленной квалифицированной электронной подписи».По новому порядку при передаче документов через операторов ЭДО налогоплательщики будут обмениваться универсальными сообщениями, которые заменят извещение о получении документа от контрагента и уведомление об уточнении. При работе с универсальными сообщениями не нужна электронная подпись. Формат универсального сообщения будет утвержден приказом ФНС России, а также включен в технологию обмена электронными документами между операторами электронного документооборота.Форматом универсального сообщения предусмотрен классификатор причин его направления контрагенту с возможностью расширения кодификации в будущем.

Недавно разговаривали в с продуктовым дизайнером.Зашел разговор про то нужны ли сайты до сих пор и в будущем. 21 век на дворе вообще-то. Есть большие сервисы. Маркетплейсы заменили интернет магазины, сервисы заменили услуги. Почему бизнес заказывает сайт, а не приложение? Просто бизнес модели у всех разные. Маркетплейсы это про недорогой товар. Я заметила что магазины которые продавали одежду хорошего качества, не вписались в маркетплейсы с его ценовой политикой. Потому что там все конкурируют за цену. Ну кто купит платье за 20000, если можно купить 6 штук за 3000? До него просто недолистают, потому что чем больше покупают с этой конкретной карточки, тем выше она в выдаче. На маркетплейсе продать 6 платьев по 3000 руб, легче чем одно за 20 000. Поэтому магазины среднего ценового сегмента позакрывали свои страницы на маркетплейсах и продолжают продавать одежду в соцсетях и через свои интернет магазины. Если взять дизайн интерьеров, то тут приложение вообще мало кому нужно. Вот сколько квартир вы за свою жизнь сможете купить? Сколько раз в жизни вам придется выбирать напольное покрытие или плитку? Если это невысокая ценовая категория, то вы пойдете в Лемана про. Если хотите итальянский керамогранит, то пойдете в салон плитки или пойдете на их сайт. А как вы будете выбирать где искать плитку? Будете устанавливать приложение от каждого магазина? Допустим вы ищете конкретного производителя и цвет или просто ищете какая плитка хорошая. Как вы это делать будете? Конечно пойдете в Яндекс и введете поисковый запрос. Так что сайты еще не скоро вымрут, а для таких бизнесов как ниша в которой мы работаем, это случится очень не скоро. Никто в здравом уме не пойдет продавать итальянский дорогой керамогранит на Озоне, потому что покоцают, разобьют и к кому претензии тогда?И насчет куда вам лучше идти в продукт или в веб? Выбирайте по сердцу, если вам нравится эстетика, вы залипаете на красивых кейсах и сайтах, нравится работать со шрифтами, смыслами, придумывать фишечки — то однозначно вам в веб. Если вас не сильно интересует эстетика, а интересна логика — то в продукт. Зарабатывать хорошо и там и там можно. Просто путь разный

Прилетело любопытное обновление Telegram.Теперь в настройках канала можно включить «личку» — возможность отправлять автору канала личные сообщения.Это удобно: отпадает необходимость подключать ботов для обратной связи или указывать ссылку на личный аккаунт в описании канала.Интересная деталь — за такие сообщения можно брать плату в виде звёзд ⭐️. Это, если и не полноценная монетизация, то как минимум — эффективная защита от спама.P.S. Пока включить «личку» не удалось — надеюсь, она заработает в ближайшее время.

Разгоняем про выборщики на сайтах — будет полезно всем, кто связан со сферой недвижимости 💸За 7+ лет у нас было много проектов в сфере недвижимости — разные элитные жилые комплексы в России и за рубежом. И почти в каждом был выборщик квартир — тот самый интерактив, где пользователь выбирает квартиру прямо на сайте.Начнём с того, что обычно застройщики хотят влюбить покупателя в будущую квартиру прямо на сайте. И чтобы пользователь быстрее дошёл до действия, покупки, с точки зрения реализации важно сделать выбор удобным и интересным. Тут на первый план выходит UX — как пользователь ориентируется, ищет и фильтрует.Выборщики почти всегда рисуют с нуля. Кто-то делает 3D-рендер здания, где можно кликать на этаж. Кто-то добавляет галерею-слайдер или таблицу с фильтрами. Мы делали, например:• слайдер с выбором видов• выборщик с фильтрами и кастомной логикой• взаимодействие с объектами и подсветкой этажей• галерею без фильтров — просто чтобы показать атмосферуДизайн можно сделать любым, но нужно ещё подумать о реализации. Для наших клиентов мы обычно используем стандартный стэк (HTML, CSS, JS), часто с SVG или кастомной графикой. Бывает, что под каждую квартиру нужна своя адаптация, логика и точная отрисовка, особенно если сайт должен работать хорошо на всех устройствах.Как говорит наш разработчик:UX тут не менее важен, чем разработка. Если выбор удобный, то человек быстрее принимает решение, даже если это покупка квартиры в элитном ЖКСтавьте ❤️, если понравился пост и хотите больше таких разгонов

Редактор нового поколения для Action TextВ 37signals готовится важное обновление Action Text. Никаких Trix, House, Tiptap или ProseMirror. Это полноценная замена редактора, которая поднимет работу с rich text в Rails на принципиально новый уровень. Всё, что мы хотели от редактора последние годы — теперь станет реальностью.Редактор уже используется внутри нового продукта, тестируется и полируется. Совсем скоро — релиз.Главное:– Полностью совместим с текущим backend и canonical markup Action Text.– Современный WYSIWYG с поддержкой Markdown.– Полностью клиентская реализация, легко переносимая.– Улучшенный HTML-вывод при сохранении.Это не просто шаг вперёд — это новая платформа для текста в Rails. Без ограничений Trix, без компромиссов. Фундамент, на котором можно строить редактор уровня Basecamp и выше.

Слышали историю про парня, который вайбкодил SaaS, активно рассказывал про это в твиттере, а потом бросил это дело так как его проект захерачили из-за проблем с безопасностью?Много, кто говорит про проблемы с безопасностью на вайбкодовых проектах (слово то какое😃), но это не проблема вайбкодинга. Точно так же говорили и про бабл когда-то, когда кто-то не углублялся в настройки privacy rules. Нашел в твиттере пост про базовые настройки безопасности при работе в cursor/windsurf и несу их вам) Больше всего подойдет тем, кто вайбкодит на Next JS с Supabase и Vercel, но в целом под себя докрутить не проблемаИтак: 1. Ключи доступаПроблема: Жёстко закодированные ключи в кодеРешение: - NEXT_PUBLIC_* (публичные настройки) записываем в .env файл- Секреты (API keys, токены) записываем в .env.local (и добавляем в `.gitignore`) Промт для Cursor/Windsurf: Используй process.env.<VAR> для всех секретов. Если нужна новая переменная, скажи точный ключ для .env.local. Предполагай, что .env.local уже существует. Если используете Vercel, то прописывайте все секреты в Environment Variables. Как у других хз, не работал 2. Supabase: RLS (Row Level Security) Проблема: Anon Key Supabase по умолчанию читает все данные из БД. Решение: Включить RLS и политики доступа. Промт: Включи Row Level Security на всех таблицах. Создай политики через auth.uid(), чтобы пользователи видели только свои данные. Никогда не используй service_role в клиенте. Для админ-действий — только RPC + серверные вызовы. Все запросы должны быть параметризованы. Теперь вашу БД не скачают через DevTools. 3. Защита API Проблема: Любой может спамить ваши /api -роуты. Решение: - JWT в Authorization header - Валидация полей (Zod) - Rate-limiting (~5 запросов/мин на IP) - но тут, думаю, корректнее каждому самому определить нужный лимитПромт: Для каждого /api роута: - Проверяй JWT в заголовке - Отклоняй некорректные данные - Лимитируй запросы (429 при превышении) - Валидируй ввод через Zod Затем просканируй репозиторий на наличие хардкодных токенов. Теперь API под замком. 4. Итог Что мы починили: Секреты — не в GitHub Supabase — данные только для своих API — аутентификация + лимиты

GSAP теперь free (ну почти)—Решили обновить сайт Сингулярити. Наш супер-верстальщик обрадовала:«Они буквально за день до того, как мы начали верстать Сингулярность сделали бесплатными все платные плюшки. Это был знак 😂»🎉 Короче, вот хорошая либа для верстальщиков с анимацией стала халявной (если не делаешь конструктор сайтов или конструктор конструкторов сайтов или фабрику фабрик фабрик)!1. все фишки + бывшие “клубные” плагины (SplitText, ScrollSmoother, MorphSVG и др.)2. бесплатно для любых личных и коммерческих проектов3. главное табу — не пихаем в визуальные конструкторы, конкурирующие с WebflowИтог: ставим GSAP, магичим анимацию, радуем глаз — жопу не надерут 😉👉 Кому нужно: gsap.com

Никогда ещё не видел столь прямого и откровенного нейминга (маркетинга) , эксплутирующего то, что даже прожженные барышни предпочитают скрывать 😂Нужно дописать, - мы за честность во всём. Ребята четко сформулировали потребность, которую они удовлетворяют.Вот это четкое утп в неймингеПотребность и услуга, которая ее удовлетворяет. Гении 😂

❓ Какие существуют HTTP-статусы из диапазона 300-399300 Multiple Choices - несколько вариантов ресурса, пользователь должен выбрать.301 Moved Permanently - ресурс перемещён навсегда, клиент должен использовать новый URL.302 Found - ресурс временно перемещён, клиент должен использовать старый URL в будущем.303 See Other - перенаправление на другой ресурс, обычно с использованием GET-запроса.304 Not Modified - ресурс не изменился с момента последнего запроса, можно использовать кэш.305 Use Proxy - запрашиваемый ресурс доступен только через прокси (редко используется).307 Temporary Redirect - временное перенаправление, метод запроса не меняется.308 Permanent Redirect - постоянное перенаправление, метод запроса сохраняется 🐸 Библиотека Go для собеса