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

🙃 Когда использовать grid, а когда flex — мои личные гайдыОдна из частых проблем у новичков — используют только flex, потому что знают только flex.Grid вроде как сложнее, страшнее и не нужен. Но это ловушка.Со временем я выработал для себя чёткий принцип:flex — для строчек, grid — для областей.Разворачиваю:🔠 Я использую flex, когда нужно:1. Расположить элементы в строку или колонку2. Управлять выравниванием по главной/перпендикулярной оси3. Разместить 2–3 элемента с простыми отступами (gap)4. Раскидать элементы с justify-content, особенно space-between, center, flex-endПример:.header { display: flex; justify-content: space-between; align-items: center; column-gap: 16px;}🔠 Я использую grid, когда нужно:1. Построить секции со сложной сеткой (например, карточки в 2–4 колонки)2. Сделать сетки с auto-fit, auto-fill и minmax()3. Управлять выравниванием и размерами ячеек независимо от друг друга4. Совместить строки и колонки в одну логику5. Упростить медиазапросы — много адаптивных штук можно решить без нихПример:.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;}🔧 Иногда я комбинируюНапример, карточки на grid, а контент внутри карточки — уже на flex.Или внешний контейнер на flex, а внутренняя часть на grid, если нужны строки и столбцы одновременно.📌 ВыводFlex — поток. Grid — структура.Чем сложнее раскладка — тем выше шанс, что Grid решит задачу элегантнее и без костылей.❓ А как вы определяете, что из flex или grid использовать? Поделитесь своими кейсами — интересно, у кого какие предпочтения.#css #flex #grid #совет_новичкам

👌 Новый подход к сегментации рейтинга веб-разработчиковПосле размышлений и разговоров с заказчиками и разработчиками у нас появилась новая идея сегментации — по типам продукта.Заказчику сложно однозначно определить, какой у него сайт/сервис — сложный, простой или средний (самое непонятное). А вот что у него — магазин, корпсайт, лендинг под рекламу, промо, портал или сервис — это намного легче.Именно это будет первым уровнем сегментации. А вот на втором уровне будет разделение по сложности, но немного не такое, как в этом году:1. Разные (те, кто умеет делать сложные и несложные)2. Сложные3. НесложныеТем, кто специализируется на сложных проектах (разработка+развитие), даром не сдались заказы на простенькие корпы или лендинги. Разве что в партнёрку закинуть.Тем, кто рубит на конвейере простые корпоративные сайты, не переварить заказ на условный портал Госуслуг или монструозный магазин на 100 000 SKU.Универсалы могут сделать разное, но заказчик имеет право выбрать специалистов. Под сегменты 1-го уровня, которые по типам продуктов, будут созданы отдельные страницы. Что во всём этом хорошо:1. Более точное попадание в потребность заказчика.2. Понятность, разговор на языке заказчика.3. Более подходящие запросы к вам. Квалифицированные, так сказать.4. Возможность приводить в основной срез и сегменты более целесообразный трафик — «разработка сайта» в основной срез, а «разработка корпоративного сайта — в сегмент.Что скажете?

Легкий веб-фреймворкBottle – это быстрый, простой и легкий микро-веб-фреймворк WSGI для Python. Он распространяется как единый файловый модуль и не имеет никаких зависимостей, кроме стандартной библиотеки Python.Несмотря на свою минималистичность, Bottle предоставляет довольно широкие возможности, которых на 100% хватает для мелких и средних проектов. Вот список основных возможностей: routing, templates, POST-routing, обработка форм, cookies и сервер.После запуска подобного примера можете перейти в браузере по адресу localhost:5000/hello/world и посмотреть на результат, полученный из всего пяти строк кода.#python #bottle

Формы на любом сайте без сервераКогда я недавно делал лэндинг, мне нужно было сделать базовую форму для обратной связи с оповещением на email. И у меня как у энтерпрайзнутого разраба в голове сразу гексагональная архитектура, микросервисы, почтовый сервер, конечно же ui клиент и мобильное приложение с пушами.Да... НОЗачем если есть совершенно бесплатный сервис formsubmit.co, который сам тебе пришлет письмо с заполненной формой на почту. А еще он настолько прост, что разберется даже твоя собака (или кошка) (или кто?)Мораль: зачем городить кучу сервисов и тратить свое время ради задачи, которая решается первой ссылкой в гугле?)

⚠ Error 404.• 4 апреля еще с 1990-х годов привлекало активных пользователей интернета как символический повод отметить день всего, что связано со Всемирной сетью. Правда, у этой даты есть могучий соперник, 17 мая — день, когда был утвержден стандарт для страниц WWW (World Wide Web), разработанный Тимоти Бернерсом-Ли. • Но что такое 404? Дело в том, что HTTP использует для выдачи сообщений об ошибках трехзначные коды. Первая цифра, 4 означает, что ошибка произошла на стороне пользователя (например, он неправильно набрал URL-адрес и набрал адрес, которого не существует). Другие две цифры, 04 — порядковый номер статуса в блоке 4хх. По умолчанию код ответа 404 сопровождается стандартным сообщением на «человеческом» языке — «Not Found» («не найдено»).• По данным SpringTrax.com, почти 75% пользователей сразу закрывают страницу с кодом ответа 404 и идут искать информацию в другом месте. Однако, кастомизировав страницу 404, вместо стандартной протокольной, можно достичь различных целей, в том числе маркетинговых.• Так как страница с кодом ответа 404 — одна из самых часто встречающихся в интернете, многие сайты превратили функциональную выдачу информации об этой ошибке в настоящие произведения искусства. Нередко там помещают бренд компании, шуточные сообщения, ссылки на альтернативные материалы и т.д. Это повышает лояльность пользователей и шансы, что они запомнят посещенный сайт и вернутся к нему однажды.• К примеру Marvel обыгрывает все в рамках своей супергеройской вселенной (на фото). У них несколько разных страниц для 404. А некоторые (раз, два) даже анимированные! Вот еще 404 от Figma, которая полностью интерактивна, ее можно править, как и в самом редакторе! И страница 404 от github, которая обыгрывает цитату из Star Wars. Вот такие дела...#Разное

Сегодня мне прислали один курс, созданный в чат-боте с WebApp. 🚀 И меня зацепил один интересный нюанс: видео в нем автоматически подгружалось в нужном формате — либо для YouTube, либо для VK Видео.У меня, например, есть небольшой сайт: https://club-help.com/kak-nauchitsya-rabotat-s-neyrosetyami-za-5-minut-prakticheskoe-rukovodstvo/. На него я просто установил плагин, и всё отлично работает. 👍А вот есть ли такое решение в GetCourse? 🤔Я поискал и не нашел подходящего варианта. Раз готового решения нет, я решил сделать его сам! 💡В комментариях я оставлю файл для импорта в ваш аккаунт GetCourse. Нужно будет только заменить ссылки на ваши — и всё заработает!В моём решении есть один небольшой нюанс. 😉 В нашем канале много опытных технических специалистов — если найдете его, обязательно напишите в комментариях! 😎п.с. на картинке (1) вариант из чат бота, вариант на моем сайте (2), вариант в GetCourse (3).

🚨 Серой аренде приходит конец.Циан вместе с Госуслугами выкатывают новый сервис — и это реально переворот.Теперь никаких «договоров на коленке». Всё в цифре, всё прозрачно. 🔑 Как это работает пошагово1️⃣ Находите квартиру на Циане.2️⃣ Жмёте «заключить онлайн-договор».3️⃣ Сервис сразу пробивает квартиру в Росреестре — есть ли собственник, нет ли арестов, ограничений.4️⃣ Арендодатель и арендатор заходят через Госуслуги: подтверждение личности через ЕСИА. Маски сняты, «сдать как Вася Пупкин» не получится.5️⃣ Шаблон договора уже готов, его проверили юристы Минцифры и Госуслуг. Никакой самодеятельности, никаких «липовых пунктов».6️⃣ Документ подписывается в один клик: через Госключ или Госуслуги. Электронная подпись = юридическая сила.7️⃣ Параллельно можно оформить временную регистрацию арендатора онлайн — без МФЦ, без беготни.8️⃣ Всё фиксируется в системе: договор хранится в Циане и Госуслугах. Никакой «потерял бумажку». ✅ Что получает арендатор* Больше не страшно, что завтра хозяин придёт и скажет: «Съезжай, я передумал».* Есть договор, есть регистрация — всё защищено законом.* Платежи «в белую», без риска, что потом скажут: «А мы тебе ничего не сдавали».✅ Что получает арендодатель* Спокойствие: арендатор верифицирован через Госуслуги.* Договор в белую = меньше шансов нарваться на мошенника или скандалиста.* Возможность показать «белый доход» — плюс к истории, если нужен кредит или ипотека. 🎯 В чём сутьДля арендатора — это почти идеал:— Легально,— Защищено,— Быстро и удобно.Но вот вопрос в другом:пойдут ли на это арендодатели, которые годами сдавали «в чёрную»,брали деньги налом или на карту, без налогов, без бумаг?Многие ещё упираются. Но государство уже завело в процесс крупнейшие площадки и Минцифру.А это значит, что схема запущена всерьёз.В следующем году белая аренда точно сдвинется с мёртвой точки.📌 Я это сравниваю с зарплатами «в конверте».Сначала тоже сопротивлялись, говорили «так дешевле».А потом рынок переломился — и теперь «в конверте» получают только в серых компаниях.С арендой будет так же.❌ Серые договоры и переводы на карту уйдут.✅ Белая аренда станет нормой.❓А вы бы согласились сдавать или снимать только через «белый» договор?Или считаете, что серый рынок ещё долго будет жить?

Это реально крутой инструмент для CSS-разработчиков Найдите сотни стильных CSS-паттернов и фонов, полностью бесплатных. Просто скопируйте код и сразу используйте в своих проектах.Идеально для:- создания ярких hero-секций- разработки современных дашбордов и приложений- улучшения портфолио с акцентом на дизайнС этим ваши проекты реально будут выделяться :)Источник: patterncraft.fun➡️ @byFrontDeveloper

Вопросы дизайна и проектирования сильнее связаны с проектированием API, чем мы привыкли думать.В конце концов, и то, и другое — это интерфейсы и взаимодействие.Проектировщик интерфейсов строит диаграмму переходов между экранами, и, как правило, на одном экране есть какое-то главное действие (+ несколько второстепенных). Изменение экранов, их состояний, переходы с одного экрана на другой — это и есть смена тех самых состояний, которые упоминаются в принципе stateless. Less — это из на сервере нет, а на клиенте они как раз есть, от них всё и проектируется. Изменяется экран — изменяется и состояние. Каждый переход — вызов API. Один и тот же артефакт служит основой и для работы дизайнера, и для работы проектировщика API.Но и это не всё. Каждый дизайнер знает про аффорданс — свойство вещи "предлагать" или "подсказывать" способ её использования. Вы возьмете молоток за рукоятку, а не за головку, потому что самой своей формой она "предлагает" вам это. В интерфейсах аффорданс играет большую роль, акцентируя внимание пользователя на элементах взаимодействия и предлагая определенные действия. Например, подчеркивание ссылок в гипертексте как бы предлагает вам нажать на них.Такое же "предложение" справедливо и для API. И — вы не поверите — называется HATEOAS, о котором писал Рой Филдинг! Почему-то на русском практически не встречается статей на эту тему, а для англоязычной аудитории это почти что общее место.Аффордансы в API — это предложения следующих действий с предоставленным ресурсом: следующий шаг в процессе, изменение свойств и состояний, удаление, в конце концов. Майк Амундсен называет проектирование вокруг аффордансов высшей точкой зрелости API. Ну а что они такое, конкретно? Да это же ссылки на действия с ресурсом из HATEOAS!Как это может выглядеть в коде:{ "user_id": "12345", "username": "johndoe", "email": "[email protected]", "_links": { "self": { "href": "/users/12345", "methods": ["GET", "PUT", "DELETE"] }, "update_profile": { "href": "/users/12345/profile", "methods": ["PUT"], "expected_fields": ["first_name", "last_name", "address"] }, "change_password": { "href": "/users/12345/password", "methods": ["PUT"], "expected_fields": ["old_password", "new_password"] } }} Так мы можем работать практически без документации! Идея пришла из простого следования HTML: там же сразу есть гиперссылки, и человек может нажимать на них, не запрашивая дополнительной информации и не обращаясь к документации. Вот бы и в API так делать! Ничего не вышло, т.к. c API работает программа, которую создает программист, и ей не требуются все эти ссылки, она сама не принимает решения ходить по ним. Это должен сделать программист. А дополнительный трафик они жрут порядочно.Но теперь у нас есть кому ходить по ссылкам — ИИ-агентам. В этой связи я бы ожидал возврата интереса к HATEOAS, но пока мы его не видим. Те же MCP и A2A построены совсем на других принципах. Возможно, эта ветка технологического развития так и не реализуется, как и многие другие перспективные, но не получившие массового применения технологии.

В Spotify завезли режим для диджеев — с помощью него можно создавать собственные переходы между треками и регулировать громкость, эквализацию и эффекты. Пока что кнопка Mix есть только в бете для подписчиков PremiumSpotify смог обогнать Apple в этом моменте, которые представили похожую функцию ещё в июне. Правда, полноценно она станет доступна только в iOS 26 🙄У Спотика много всяких функций классных, правда что рекомендации все равно лучше работают сами знаете где 🥰

Смотрел тут release notes нового Firefox и с удивлением обнаружил там крайне полезное API - URLPattern.Это своего рода фабрика для создания регулярных выражений для разбора URL по заданному шаблону. Необходимо такое в первую очередь для проверки соответствия URL шаблону для роутинга, а также извлечению из URL отдельных данных. Раньше для решения этой задачи использовались библиотеки по типу path-to-regexp.Приведу простой пример использования:const pattern = new URLPattern({ protocol: 'https', hostname: ':subdomain.example.com', pathname: '/blog/:slug'});const url = 'https://dev.example.com/blog/hello-world';if (pattern.test(url)) { const match = pattern.exec(url); console.log(match.hostname.groups.subdomain); // "dev" console.log(match.pathname.groups.slug); // "hello-world"}В Chrome данный API уже поддерживается, а в Safari поддержка ожидается в ближайшее время. Здорово, что такое теперь есть из коробки!

Frontend-фреймворки: лишь перестав выбирать, мы обретаем свободу.👉 Запись доклада тутПосмотреть:◦ Даниил Савитский, доклад «Исчезающая реальность»◦ Алексей Назаренко, доклад «Да кто такие эти ваши веб-компоненты»◦ Мой доклад про философию и обновления Ангуляра «Angular: обновить нельзя остаться»Потрогать:◦ Поиграться с синтаксисом фреймворков◦ Benchmarks#talk #доклад #presentation #презентация #фреймворки #minskjs

Так, по вайбкодингу.Lovable и ReplitЭти штуки пригодны только для фронта, лендосов с элементарной логикой и минимального оооооочень простого прототипирования.Как только упираешься в статусную модель, разные уровни доступа и админский функционал —> получаешь пи**ы от реальности. Меня сегодня, например, авторизация победила. Хочешь консистентный дизайн в развивающемся проекте? Чтобы он не превратился в неконсистентное Г через полтора экрана?Покупай шаблон с библиотекой компонентов, впихивая его в Lovable, упрашивай его действовать в этих рамках…Скармливаешь ему после этого не самое большое PRD —> эту скотину несёт хрен знает куда. И ему плевать на темлейт на Tailwind ccs и на твои ограничения. Ибо кредиты уже уплачены, а АПИ openAI сильно теребонькать не хочется…В итоге получается бедолага, которого хочется пристрелить, чтобы он не мучался. И да, про БД и всё это…Lovable из коробки через MCP проинтегрирован с Supabase, и даже если хорошо прописать бизнес-требования (и посидеть с ГПТ погонять структуру таблиц), то Ловабл эту структуру создаст в Supabase, даже, может быть, замапит с фронтом нормально... Но если нужна нормальная и секьюрная админка, то нужно идти куда-то «налево» из Lovable в какую-нибудь Headless CMS. Делать админский UI, статусные модели и дёргать Supabase.И тут очень полезны сильные навыки системного дизайна. Да и вообще очень важно понимать фронт и бэк, чтобы смотреть где эта скотина нафантазировала, растеряв весь контекст.Кажется, что единственный нормальный вариант — это самому прописывать таблицы, связывать их и кормить скриншоты таблиц в тулзу, проверять что в итоге записалось в Supabase и как отрабатывают запросы.Вышеописанное только про Lovable и подобное. По ощущению ~ Spray&Pray Обманчиво простой UX с глубокой кроличьей норой.

Снес к чертям собачьим битрикс и накатил вместо него Yii2. И, о чудо, никаких вирусов нет уже четвертый день.Совпадение?Не думаю!

Вы может не в курсе, но я заделался программистом и последние пол-года пишу свои инструменты для кодинга. Сейчас у меня сделано веб приложение, которое может работать автономно на любых чужих репозиториях и писать для них код https://t.me/gleb_pro_ai/145И я ищу ему бизнес-ценность. Разные есть идеи, сегодня пришла в голову следующая: умный помощник для wordpress инсталляций. Администрирование вордпресса это жопная жопа и нужно всегда звать мастеров (ну, по себе знаю). Неплохо бы это доверить агентам. Что можно делать: — Вы заходите на мой сайт— Коннектите свой вордпресс— Пишете, что вам там сделать, а оно делает само. Ну например сео оптимизацию, аудиты безопасности или даже новый код страничек. Может что-то еще, нужно подумать. В отличие от конструкторов все ваше остается при вас, а я даю только агентов которые умеют с этим работать. Что скажете, годно/не? Пишите что думаете в каментах.

Почему VK не мессенджер мечты?Мне не дает покоя, что раньше ВК был супер удобным и прекрасным для всего подряд. А сейчас он тормозный и раздражающий.В то же время телеграм расстраивает меня своей политикой на тему взломов аккаунтов, но при этом технически это шедевр. Но почему он настолько лучше воспринимается головой и если можно переписываться, то однозначно телега?Пошел смотреть что происходит под капотом в веб версии ВК и веб версии телеги. В ВК до сих пор очень много чего тянется через Rest обычными несжатыми сообщениями. Делается запрос вроде за "историей сообщений", но приходит невероятное количество лишней информации: участники беседы, чаты с этими людьми и, наконец, сами сообщения! Запрос получения истории на сервере занимает 130-150мс. Обычно — 200-300мс, а иногда >1000. А пока этот запрос не пройдет оно будет красиво висеть и ждать...В телеге (2 скрин)же все куда более атомарно происходит. Берется ровно то, что нужно в данный момент и ни байта больше. Потому телега такая быстрая!

ТОП нейронок для создания сайтов В первые месяцы жизни Нейроцеха одним из самых популярных вопросов был «а как сделать сайт с помощью нейросетей?»Тогда сервисы были куда глупее и мы честно говорили, что ни одна нейронка с созданием сайта не справится. Максимум, что было возможно — создать текст в ChatGPT и нарисовать картинки в Midjourney.С того момента многое изменилось и теперь есть инструменты, которые напишут сайт по одному запросу. В этом посте собрали самые популярные и крутые из них.v0 — это онлайн-сервис для генерации сайтов. Вы просто пишете, что хотите получить, например: «Сделай лендинг с обратной связью и тёмной темой» — и через пару минут получаете готовый код сайта.В v0 можно загружать картинки, проекты Figma и присылать большие промпты с задачей на разработку — сервис все проанализирует и напишет код.Lovart. Агент для дизайна. Описываете ему, что нужно создать — он продумывает концепции продукта, генерирует логотипы, креативы и все, что связано с графикой. Он не напишет код для сайта, зато по одному запросу проработает полноценный дизайн будущего ресурса. Вам останется все сохранить, прийти в любую нейронку и попросить, чтобы та перевела это в код.Gamma. Еще один отличный сервис. Здесь можно создать сайт с нуля, а можно скопировать любой другой сайт. Достаточно описать, что вы хотите получить или прислать ссылку на понравившийся ресурс — встроенная нейрона быстро сгенерирует сайт и отдаст вам код.Cursor/Windsurf. Вообще, это сервисы для вайб-кодинга. И скажу честно, с дизайном у них плохо. Зато они отлично пишут код по рефернсу: вы присылаете им картинку будущего сайта, отдаете иконки, изображения кнопок и т. д. — нейронки собирают это все в рабочий проект.#сервисы @neurozeh

новый канал трафика для малого бизнеса— в связи с весомыми ограничениями по каналам продвижения в РФ, я считаю, что нужно использовать КАЖДУЮ возможность, которая появляется на рынке!В пятницу на конфе YandexECOM ребята наконец-то публично анонсировали свою новую платформу ЯндексKIT, которая, по сути — набор инструментов размещения и продвижения в интернете: от разработки базового сайта интернет-магазина до продвижения в браузере и AI-аналитика показателей;как владелец агентсва, я понимаю, что еще какой-то пласт аудитории, кому нужны наши услуги — отвалится и от этого грустно🥲,но как предприниматель, понимаю, что это отличная возможность для микро и малого бизнеса раскрутиться на старте без больших вложений!!! (поднакопить денег и прийти к нам за нормальным сайтом😁)💔Пока можно оставить заявку на бета-тестирование: https://kit.yandex.ru/что думаете про эту платформу? будет ли она востребована среди екоммерсов?

Кстати бета-тесты показали, что переодически у кого-то может отъебывать музыкаК сожалению, это оказалось не фиксибельно, такая хуйня буквально зависит от вашего браузера, качества вашего интернета и от того, насколько хорошо вы позавтракалиТак что не ругайтесь, пожалуйста, я гуманитарий🥺

Добрый пиар №32-25 (205)1. Интересная статья на РБК про рынок настольных игр в России. За наводку спасибо Юрию Ямщикову. Студия Юры выступает продюсером моей новой игры "Письма Безумия", которую мы закончили буквально вчера и на днях напечатаем тестовый экземпляр.2. Angry bonds о статье из Ведомостей про моделирование последствий санкций и почему эти модели никому не нравятся. Спойлер: потому что модели показывают не то, что напророчили нам мироновы-гуриевы.3. "Мы начали в гараже, доросли до завода, продавали в 43 страны мира, а вот что теперь?" Слава Рюмин о производителе роботов из Перми (Habr). И такое бывает. Я тут, кстати, ездил с детьми на ВДНХ и зашёл в павильон "Робостанция". Там интересно. Мне понравился робот, который играет в настольный футбол. Надо купить. Настольный футбол.4. Тополев про создание китайских соцсетей и перспективы чебурнета. Спойлер: перспективы не очень, но если вы разработчик мессенджера Макс, то всё у вас будет хорошо. Ну, первое время. Потом, надеюсь, посадят.5. Politeconomics критикует (и правильно) немного странный взгляд на устройство российской экономики и о переходе от открытого неолиберализма к неомеркантилизму и автаркии. А был ли переход? Импортозамещение и торговый профицит - это разное.#добрыйпиар

Offline режим работы Альфа-бизнес В этом году мы по-новому посмотрели на наши инициативы роста стабильности цифровых каналов для B2B.Хочу рассказать про новую тему - оffline режим. Идея настолько очевидна, удивительно, почему это не внедряют повсеместно.Замечали, что некоторые приложения не запускаются, когда нет интернета? Бесит. А другие, наоборот, продолжают работать даже когда, казалось бы, должны упасть. Например, можно открыть Google Docs и продолжить редактировать документ в самолёте. Мой любимый таск-менеджер прекрасно открывается без инета :)Мы решили у себя раскачать эту идею по максимуму.Offline режим Альфа-бизнесЗагружать мобильное приложение и, самое главное, веб-морду, даже если какие-то бэковые системы моргнули - временно вышли из строя или вообще недоступны.Все крупные сервисы за годы разработки обрастают сотней ненужных запросов с фронта на смежные системы. Это как минимум замедляет процесс загрузки. А вообще банковские системы вообще проектировались так, что надо всегда ходить куда-то пониже - и делать 100500 проверок. "Так сложилось исторически" (c) - ответ на любой сложный вопрос, а почему так.Мы решили, что наш интернет-банк будет всегда открываться, даже если где-то внизу что-то моргнуло. Палитра задач клиента максимально разнообразна, и в большинстве кейсов он даже не узнает о том, что какая-то из внутренних систем, отвечающая за отдельный элемент его сценария, не работает. Может клиент просто хотел написать в чат?По сути это придумали workaround для маскированная ряда проблем.Как это работает? Мы в хвост и в гриву используем кэширование, чтобы сократить количество запросов к бэковым системам.Концептуальная схема работы у представлена на салфетке:1. Web cache (база, уровень сложности - обычный)Кэшируем основные данные по сессии и информации о клиенте в localStorage браузера. Работает даже без интернета на устройстве. Самый дешёвый и быстрый вариант, но данные удаляются после закрытия сессии.2. Fallback cache (уровень сложности - hard)Кэшируем данные бэка в Redis в течение длительного времени. Когда клиент делает запрос к API - мы сохраняем данные "по запросу" на неделю. Если запросов по клиенту не было - принудительно запрашиваем раз в неделю. Это решение даёт хороший прирост отказоустойчивости при адекватной стоимости. Тоже относительно дешево.3. Re-use кэша для бизнес-логики (уровень сложности - nightmare)Витрины данных - хранят копию данных с асинхронным копированием из мастер-систем. Мы уже использовали это - например, для получения суммарных остатков по всем компаниям холдинга. Сделано, чтобы не давить на мастер-систему, к которой и без нас ходят все. Это довольно распространённая практика, но мы решили использовать её не только для бизнес-логики в продуктах, а встроили прямо в цепочку получения данных с фронта - чтобы кратно сократить кейсы, когда на фронте ничего не открывается, если бэк моргнул.Понятно, что все эти слои кэширования подключаются после тотального рефакторинга и вычистки избыточных запросов.Эту схему очень круто дополняет другая концепция - асинхронные операции. Мы уже используем их, но хотим воткнуть везде. И речь не про гигантоманию - давай скупим кучу железа и везде поставим кафку. Нет. Мы проектируем изящное и экономное решение, где каждый сервис владеет своей микроочередью и ретраит при проблемах. (Но это уже история другого поста.)Офлайн и асинхрон - это лишь небольшая часть нашей новой инициативы, пересматривающей подход к стабильности цифровых каналов для юриков. Там ещё много, как мне кажется, интересных и вроде бы очевидных, но редко реализуемых идей.Это включает в себя новые подходы к измерению бесперебойной работы, изменения в релизном процессе через шлагбаумы с "бюджетом ошибок". Переосмысление архитектуры дата центров и внедрения хаос-тестирование в бою. Ну как, норм тема?🦄 Рассказать ещё про асинхрон?🌭 Рассказать про другие инициативы и концепции "Стабильность 2.0"?🗿 Слишком сложно и скучно. Давай лучше мультики с фичами

Я написал, какими бывают адреса электронной почты и как это может повлиять на опыт регистрации и входа по имейлу.— Когда человек заводит электронную почту, его имя пользователя и домен почтового сервиса становятся уникальным адресом;— Но его не обязательно указывать в точности, чтобы получать письма;— Все почтовые сервисы игнорируют регистр букв. Gmail — точки в имени пользователя. Почти все игнорируют то, что в имени пользователя указано после «+»;— Фишка с «+» описана в одном из стандартов работы электронной почты и может использоваться для борьбы со спамом и сортировки почты;— Плюс тестировщики могут так зарегистрировать несколько аккаунтов в тестируемых продуктах, не заводя множества почтовых ящиков;— Некоторые почтовики работают на нескольких доменах. Например, gmail.com и googlemail.com, yandex.ru и ya.ru;— По хорошему, сделав исключение для тестировщиков, всё это стоит учитывать при регистрации, входе и восстановлении пароля (в статье в общих чертах описан механизм), чтобы пользователи не создавали несколько аккаунтов, фактически связанных с одним ящиком;— Пользователь может забыть, с каким адресом регистрировался ранее, и по ошибке завести ещё один аккаунт;— Если посмотреть на крупные и популярные сервисы вроде ChatGPT, Notion, Amazon, они отрабатывают только кейс с регистром букв.#login #signup

Playwright – фреймворк для автоматизации тестирования веб-приложенийПозволяет контролировать браузеры через единый API, что позволяет создавать автотесты, имитирующие реальные действия пользователейФреймворк появился в январе 2020 года, когда команда разработчиков Puppeteer перешла из Google в Microsoft, цель которого создать инструмент, который решит проблемы существующих решений для автоматизации браузеров, например, Puppeteer и SeleniumЯзыки: TypeScript (90.7%), HTML (4.6%), CSS (1.7%), ...⭐️ Star 75.6k https://github.com/microsoft/playwright⚡️ @becaps

Яндекс карта (статическая)Готовый компонент для сайтов — встраивает Яндекс карту с возможностью установки метки как по координатам, так и через iframe (конструктору карт). - Поддержка подключения к базе данных- Угловой дизайна с настройками- Умный скролл: карта не мешает прокрутке страницы — активируется только при клике.

Кейс:Это меняет всё. Перенёс приложение за три вечера.Я знаю, что опоздал на вечеринку. Уже две недели пользуюсь Claude Code, пусть и с урезанным тарифом на \$100. Но всё равно, я потрясён тем, что эта технология уже умеет и как она изменит общество. Я только что перенёс целый форум на Flarum на другой (на мой вкус — более удачный) стек: Nuxt + Supabase. Только что выложил — и всё работает идеально. Ушло на это примерно три вечера.Оценка, если бы я делал всё сам, — около шести месяцев периодической работы. Claude справился за три вечера, и результат получился лучше, чем я мог мечтать.Для сравнения: команда Flarum пытается выпустить версию 2.0 уже больше года. Может, даже два? Понимаю, я сделал просто форум под свои нужды, а они строят "платформу" с экосистемой плагинов и прочим. Но всё это уже перестаёт иметь смысл. Форум, созданный с помощью Claude, великолепен, и я буду его дальше дорабатывать.Сразу после релиза Lighthouse показывает почти идеальные 4x100 (три сотни, включая производительность). У Flarum вечно были проблемы с SEO, и мой старый форум на нём, хоть и с отличным контентом, так и не набрал популярности — из-за ужасных URL, бесконечной прокрутки и прочего бардака.Claude не просто повторил то, что мне нравилось — он улучшил это. И даже помог с миграцией базы данных, что вообще-то нетривиально. И сделал это с использованием Supabase MCP. Такой уровень интеграции знаний о тулзах, базах данных, терминале — просто потрясающий.В другой вечер я на быстрой "вибрационной кодинге" сделал внутренний инструмент для продаж, включая простую, классическую CRM. Работает из коробки. И зачем мне теперь платить за CRM? Следующая цель — мой тайм-трекер. Сделаю что-то простое, под себя.Это действительно меняет всё. Будущее SaaS, будущее программирования. Конечно, нужно по-прежнему хорошо разбираться в том, как всё устроено, как всё взаимодействует, понимать UX и продукт. Например, большинство критичных багов были устранены после того, как я сам дал наводки и идеи, в чём может быть проблема. Люди всё ещё умеют мыслить креативнее ИИ.Последствия этой технологии (а напомню, сейчас мы имеем дело с её самой слабой версией) — просто феноменальны.

Как освоить тему интеграций1. Знакомство с темой интеграцииБыстро познакомиться с интеграцией можно через видео:https://vkvideo.ru/video-211773358_456239055https://vkvideo.ru/video-211773358_456239265https://vkvideo.ru/video-211773358_456239264То же в виде статей:https://systems.education/integrations-fundamentals-onehttps://systems.education/integrations-fundamentals-twoВоркшоп по Проектированию сценариев интеграции через UML Seq:https://systems.education/uml-sequence2. RESTВидео: https://vkvideo.ru/video-211773358_456239079?t=1sСтатья по видео: https://systems.education/what-is-restНаучиться проектировать REST API за 8-16 часов в группе:https://systems.education/rest-workshophttps://systems.education/api-workshophttps://nextway.pro/restapi3. Брокеры сообщенийКурсы на 8-16 часов в группе:https://systems.education/kafka-workshophttps://nextway.pro/brokers4. Проектирование интеграций в целомБолее широко и глубоко изучить тему интеграций за 24-32 часа в группе:https://systems.education/integrationshttps://nextway.pro/integration_advancedС возможностью начать уже сегодня, но учиться самостоятельно:https://stepik.org/course/175243/promohttps://stepik.org/course/176504/promo5. Портфолио по теме интеграцииПодготовить портфолио с артефактами по интеграции можно быстро с помощью плагина IDE BAS для VS CodeЧтобы было веселее и интереснее, это можно сделать в открытом учебном курсе от разработчиков IDE BAS, Analyst 3.06. Ссылки на материалыКаталог полезных ссылок по теме интеграции:https://systems-wiki.notion.site/Information-Systems-Integration-dcf955be171741979ed71190ec5aa937Каталог материалов по интеграции от SE: https://systems.education/integrationВидео по интеграции от SE:https://vkvideo.ru/playlist/-211773358_38#интеграция@denis_beskov

⬆️ТАМ НАЧАЛО⬆️«А мы прописали требования к ПО! По картинкам в своей голове» Любое ТЗ нужно составлять с объёмным пониманием всего процесса производства. Nota bene. Когда в цикле статей «Методы и средства НОТ» мы с вами доберемся до теории решения изобретательских задач (ТРИЗ), то там мы наглядно покажем, почему заказчик никогда не может написать ТЗ. По абсолютно объективным причинам.В том числе понимая, что и где может пойти не так. И в этих местах прописывать точки контроля, чёткие критерии качества и (тудум!) реальные штрафные санкции за их нарушение. Заказываете производство ПО – требуете при сдаче, например, отчёт разработчика о проведенном тестировании. И выставляете санкции за нарушение – иначе разработчик просто напишет, что код-ревью (инспекция кода) проведён, а реально может его и не сделать.  Что тогда? Вы будете сами ловить баги, составлять баг-репорты, ждать патчей. И не сможете с поставленным ПО качественно выполнять те задачи, для которых его заказали.Вот и получится в полный рост производственный брак из-за некачественного сырья, хотя само производство – вовсе даже не физическое.Едем дальше. Причины брака. Нарушение техпроцесса Опять же, с производством колбасы или автомобиля более-менее понятно: производственный процесс можно разбить на шаги, расставить точки контроля. А если компания создаёт, например, видеоролики… То происходит всё то же самое: – Процесс разбивается на шаги. Например: создание концепции, создание сценария, планирование логистики, определение бюджета и т.д. – Описываются технологии. Например: «Протокол съёмки на хромакее», цель, оборудование, шаги выполнения. – Создаются точки контроля. Например: сценарий подписан клиентом, смета утверждена, ежедневный отчёт о съёмках получен. Тут очень важно (представьте, что дальше капс): мало прописать планы или методологии. Их ещё нужно соблюдать. Видели мы компании, у которых были классные методологии, написанные по отличным стандартам (например, SOX 404). Но исполнялись они процентов на 65. А попустительство руководства по оставшимся 35% оказывалось фатальным и продукт получался дрянь.  Потому что если вместо задачи «Делать качественный продукт» решается задача «Прикрыть жопу от аудита» – техпроцесс не будет работать. Так что мало создать техпроцесс – нужно добиться, чтобы сотрудники соблюдали его. Но про это будет другая история. А в следующем посте мы расскажем ещё о двух причинах брака: необученный персонал и неисправное оборудование.

Можно удалять элементы с помощью блокирования кнопки на 5 секунд. Это спасает от случайного нажатия и позволяет избежать модального окна, которое блокирует весь интерфейс.

Как один флаг обрушил бизнес-процессНа фоне массовых инфраструктурных проблем в крупных компаниях вспомнил свой самый крупный технический косяк. Нет, к счастью, сам я не ронял инфру. Но однажды случайно убил оплату на проде.В 2018-м я ещё был руководителем группы фронтенда, и в одной из команд ребята крайне хотели быть модными и следовать трендам, а особенно горели идеей микрофронтов. Но так как тогда ещё не было ни Webpack Module Federation, ни прочих современных приблуд, мы с ребятами запилили простую кустарную реализацию: каждый виджет собирался в отдельной репе, а потом на лету подгружался в общий layout.Параллельно внедрили централизованную систему фича-флагов, чтобы управлять тем, какие микрофронты и кому показываются. Всё шло отлично, пока один из сервисов не остался на старой версии SDK для флагов. Мы включили эксперимент на 5% пользователей, и флаг рухнул в undefined. Браузер не смог получить конфигурацию и просто отказался рендерить блок с оплатой.Без единой ошибки. Просто нет кнопки «Оплатить» на проде. Мониторинг был настроен на падения и ошибки, а не на отсутствие DOM-элемента. Нам повезло узнать быстро только потому, что менеджер проекта случайно зашёл под своим аккаунтом и увидел пустоту вместо кнопки.Хотфикс сделали за 40 минут, откатили на старую версию, а после я объяснялся с бизнесом, хотя шутка про «оптимизацию конверсии до нуля» запомнилась и всё ещё кажется смешной. Потери в деньгах были копеечные, но урок остался на всю жизнь. Теперь каждый флаг я проверяю так, как будто лично заполняю анкету на подачу Шенгена.А вообще это классика жанра. Вон Глеб Михеев в своё время на полном серьёзе случайно снёс базу на проде. И выжил. И даже в подкастах об этом рассказывал. Так что да, факапы случаются, и от них, если повезёт, остаются не штрафы, а опыт.А у вас были истории, после которых хотелось на неделю спрятаться под стол, но потом вы всё же выбирались?

Там пишут РКН немного прикрыл speed test. Я им пользуюсь не всегда, так как у них очень тяжёлый сайт сам по себе, для тестов.Вот альтернативы вам:http://2ip.ruhttps://www.nperf.com/ru/https://fast.com/https://yandex.ru/internetИз комментариев:http://openspeedtest.comhttps://speed.cloudflare.com/https://orb.net/ (аппы, включая cli)https://librespeed.org/