🎨 Как скачать svg-картинки с сайта?

Бывает нужно сделать презентацию и вставить в неё иконок или логотипов для наглядности. Где их взять?

Можно пойти на соответствующий сайт и наделать скриншотов. Но тогда мы получим растровое изображение плохого качества — будет смотреться не очень.

Всегда приятно иметь дело с векторными изображениями — их можно растягивать, перекрашивать, разбирать на части.

Решение есть! Расширение SVG Export - ваш новый помощник в работе с векторными изображениями.

💪 Что оно умеет
— Вытаскивать все SVG-изображения со страницы
— Сохранять их в чистом формате SVG
— Экономить время при поиске материалов для презентаций или дизайна

⚙️ Как это работает
❶ Установите расширение
❷ Откройте нужную страницу
❸ Нажмите на иконку SVG Export
❹ Выберите нужные изображения
❺ Скачайте их одним кликом

🔗 Установить: SVG Export

💡 Подходит для браузеров на базе Chromium: Chrome, Yandex Browser и других

Больше нет необходимости использовать скриншоты или сложные способы вытягивания картинок - всё просто и удобно.

#tools #design #productivity #browsers

⚙️ Как спроектирована система, подобная Instagram*?

Сегодня мы рассмотрим схему, которая показывает, как можно спроектировать систему, похожую на Instagram. Даже если вы далеки от разработки, эта схема от ByteByteGo поможет понять основные компоненты и их взаимодействие.

❶ Пользователь совершает действие
Всё начинается с вас! Когда вы нажимаете кнопку "лайк", загружаете фото или подписываетесь на другого пользователя (стрелка 1), ваше устройство отправляет запрос в систему. Это может быть что угодно — от публикации нового поста до простого просмотра ленты.

❷ Запрос попадает на сервер
Запрос с вашего устройства отправляется через специальный "шлюз" (API) на бэкенд-сервер (стрелка 2). Этот сервер — это как "мозг" системы. Он обрабатывает ваши действия и решает, что делать дальше.

❸ Сохранение данных в базах данных
После того как сервер получил ваш запрос, он сохраняет данные в соответствующих хранилищах:
— Структурированные данные , такие как профили пользователей, комментарии и подписки, хранятся в реляционных базах данных (например, Postgres).
— Данные, требующие быстрой записи , такие как лента новостей или логи действий, могут храниться в специальных базах данных, которые работают чуть медленнее, но выдерживают большие объемы данных.

Часто запрашиваемые данные (например, популярные посты или профили) временно хранятся в кэше, чтобы их можно было быстро доставить вам.

❹ Хранение медиафайлов
Когда вы загружаете изображения или видео, они сохраняются в специальном хранилище для файлов — объектном хранилище (Object Storage) (стрелка 4). А вся информация о них (например, название файла, размер, дата загрузки) записывается в базу данных.

❺ Очередь задач
Если нужно выполнить задачу, которая не требует мгновенного ответа, например, отправить уведомление о новом лайке, эта задача помещается в очередь (Queue) (стрелка 5). Это помогает системе не перегружаться и выполнять задачи постепенно.

❻ Фоновые процессы
Фоновые рабочие процессы берут задачи из очереди и выполняют их (стрелка 6). Например, они могут отправить уведомление другому пользователю или обработать новый комментарий.

❼ Обновление данных
После выполнения задачи фоновый процесс также обновляет необходимые данные в базах данных (стрелка 7). Например, если кто-то поставил лайк вашему посту, это отразится в вашей статистике.

* — принадлежит Meta, признанной экстремистской организацией и запрещенной на территории РФ ))

#tech #Instagram #systemdesign #ByteByteGo

🔍 Поиск на стероидах. Адресная строка для поиска по разным системам

Многие используют адресную строку как поиск. Но наверняка не все знают, что искать можно не только по заданной по умолчанию поисковой системе.

📝 Как настроить поиск (в chromium браузерах)

❶ В браузере заходим в настройки поиска:
— можно вбить в адресной строке browser://settings/searchEngines, либо
— нажать на адресной строке правой кнопкой мыши, далее в контекстном меню выбрать пункт "Управление поисковыми системами..."
❷ Жмём кнопку "Добавить" справа вверху
❸ Для поиска по Википедии заполняем поля:
— Название: Wikipedia
— Ключ: wiki
— Ссылка: https://en.wikipedia.org/w/index.php?title=Special:Search&search=%s
❹ Сохраняем
❺ ПРОФИТ! Теперь если в адресной строке вбить wiki , затем нажать пробел или tab, адресная строка переключится в режим поиска по Википедии.

Таким образом можно настроить несколько поисковых систем, указав разные ключи и подставляя параметры %s в разные ссылки вместо запроса.

При этом это не обязательно должны быть поисковые движки, можно просто быстро открывать нужные страницы передавая параметр в урле в нужном месте, например логин сотрудника или id какого-то объекта


👍 Примеры

Поиск в Яндекс Почте

https://mail.yandex.ru/?#search?request=%s

Stack Overflow

https://stackoverflow.com/search?q=%s

Github

https://github.com/search?q=%s&ref=opensearch

🕑 Техники управления временем, которые действительно работают

Наткнулся на статью Ленни Рахитски, известного эксперта в области продуктового менеджмента, — в ней он делится лайфхаками по продуктивности, которые помогают ему ежедневно не утонуть в сотне дел.

Часть из этих подходов знал, но часть оказалась вновинку. Рассказываю кратко и с примерами:

❶ Используйте календарь для задач
Не записывайте задачи в приложения — ставьте их в календарь как события.

Пример: Запланируйте «написать код для фичи X» с 10:00 до 12:00.
Если что-то помешает, просто перенесите задачу.
Почему работает : Если задача не в календаре — её часто не делают.

❷ Если задача занимает меньше 2 минут — сделайте её сейчас
Если действие можно выполнить быстро (например, ответить на письмо или исправить опечатку в коде) — не откладывайте.

❸ Ведите список «Ожидаю»
Когда просите кого-то сделать что-то — добавляйте это в список «Ожидаю».

Пример: «Жду от разработчика отчет о баге #123».
Это помогает не забывать о задачах и вовремя напомнить о них.

❹ Каждое утро записывайте 1–3 главных задачи на день
Каждое утро выбирайте 1–3 задачи, которые сделают день продуктивным.

Например: «Исправить критический баг до обеда».
Сначала делайте самое сложное («съешь лягушку»).

❺ Защищайте время глубокой работы
«Глубокая работа» — это cфокусированные, неразрывные задачи, требующие когнитивных усилий.

Планируйте 2–3 блока времени в неделю.
Отключите уведомления, используйте инструменты вроде Brain.fm.
Договоритесь с командой о запрете встреч в определённые дни.

❻ Запретите встречи до определённого времени
Не берите встречи до 15:00 или даже до 12:00. Это время для творческих задач.

❼ Включайте режим «Не беспокоить»
Отключите уведомления на всех устройствах. На Mac/PC есть встроенные инструменты для этого.

❽ Переводите встречи в асинхронный формат
Большинство встреч можно заменить письмом. Ответьте на приглашение так: «Могли бы мы обсудить это асинхронно? Что вам нужно от меня?»

Это экономит часы на встречи.

❾ Используйте виртуального ассистента
Делегируйте рутину через сервисы вроде Double или Fancy Hands.

Пример: Ассистент может оформлять отчеты или искать информацию.

❿ Чаще говорите «нет»
Большинство перегрузок из-за излишнего «да». Фильтруйте задачи через приоритеты.

❯ Подробнее в статье

#productivity #timemanagement

🧩 Как enterprise architecture (EA) помогает достигать "быстрых побед"

Интересная статья от Daniel Lambert — эксперта в области бизнес- и enterprise architecture (EA), автора книги о agile-стратегиях и партнера компании Business Architecture Info.

В статье рассказывается, как использовать знания о корпоративной архитектуре (EA) для быстрых улучшений. Хотя больше выглядит как попытка объяснить простой подход "делай вещи, которые приносят бОльшую пользу с меньшими усилиями в первую очередь" через сложный аппарат "копроративной архитектуры"

Вот основные идеи:

Что такое «быстрые победы»?
Это небольшие проекты , которые:
— Реализуются быстро (недели, а не месяцы).
— Доставляют ощутимую пользу (сокращают затраты, улучшают процессы).
— Показывают ROI и мотивируют команду к большим изменениям.

Примеры:
Автоматизация рутинных задач.
Устранение дублирующих систем.
Оптимизация данных для быстрого доступа.

Как EA помогает их находить?
В статье предлагается шесть методов :

❶ Стратегическая выравнивание
Проверяйте, насколько проекты соответствуют целям компании.

❷ Оптимизация процессов
Используйте EA для визуализации процессов и выявления «узких мест».
Пример: сокращение этапов в цепочке поставок.

❸ Рационализация технологий
Уберите «лишние» системы.
Пример: замена нескольких CRM на одну.

❹ Управление данными
Централизуйте данные, чтобы избежать «силосов».
Пример: создание общего хранилища.

❺ Повышение эффективности
Найдите простые способы сэкономить ресурсы (например, пересмотр контрактов).

❻ Создание новых источников дохода
Используйте EA для анализа клиентских цепочек и добавления новых услуг.

Как это работает на практике?
Всё просто — классифицируйте проекты :
— Быстрые победы — низкий трудозатрат, высокая отдача.
— «Денежные дыры» — требуют много ресурсов, но не приносят ценности.

Сосредоточьтесь на первых) Profit!

#prioritization #projects #ea

🤓 Продуктовые паттерны: как решать проблему «неправильного порядка действий»

Пользователи часто совершают действия в неправильной последовательности — это приводит к ошибкам, недовольству и упущенным возможностям. Как это исправить?

Рассмотрим 7 продуктовых решений , которые помогут снизить количество таких случаев:

❶ Визуальное подсказывание порядка
Используйте визуальные элементы, чтобы подчеркнуть последовательность шагов.

Пример:
Шаги с нумерацией (например, «1. Выберите дату → 2. Введите данные»).
Анимация или цветовые акценты для текущего шага (например, подсветка активного поля в форме).
Почему работает : Пользователи интуитивно понимают, что делать дальше.

❷ Realtime-валидация
Проверяйте порядок действий на лету и блокируйте ошибки до их совершения.

Пример:
В форме регистрации запретить переход к следующему шагу, пока не заполнены обязательные поля.
Показывать ошибку, если пользователь пытается оплатить заказ до выбора доставки.
Почему работает : Сразу исправляете ошибки, не оставляя пользователя в недоумении.

❸ Уведомления и подсказки
Помогайте пользователям в момент совершения ошибки.

Примеры:
Всплывающее окно: «Вы не выбрали категорию. Это нужно сделать до сохранения».
Тултипы с пошаговыми инструкциями.
Почему работает : Фокусирует внимание на ключевых шагах без необходимости читать документацию.

❹ Автоматизация
Сделайте систему «непробиваемой» — пусть она сама корректирует действия.

Примеры:
Автозаполнение пропущенных шагов на основе данных пользователя.
Система, которая перестраивает процесс, если порядок нарушен (например, возвращает к предыдущему шагу).
Почему работает : Сокращает нагрузку на пользователя и уменьшает ошибки.

❺ Обучающие гайды и чек-листы
Встроенные руководства внутри продукта.

Примеры:
Всплывающий гид при первом входе: «Сначала выберите проект, затем добавьте задачу».
Чек-листы на экранах: «Проверьте: все поля заполнены → нажмите «Сохранить»».
Почему работает : Упрощает понимание процесса, особенно для новичков.

❻ Предотвращение шагов
Запрещайте выполнение шагов в неверной последовательности.

Примеры:
Кнопка «Далее» становится активной только после выполнения предыдущего шага.
Убрать доступ к определенным функциям до завершения предварительных условий.
Почему работает : Физически невозможно сделать ошибку.

❼ Аналитика и A/B-тесты
Используйте данные для выявления проблемных мест.

Примеры:
Следите за тем, где чаще всего нарушают порядок (например, через Session Replay).
Проводите A/B-тесты: сравните два варианта интерфейса и выберите лучший.
Почему работает : Оптимизация на основе фактов, а не гипотез.


💡 Дополнительные советы
— Упростите процесс : Если порядок сложный — переработайте его. Например, объедините шаги или сделайте их неочевидными (например, автоматическое сохранение данных).
— Обратная связь : Добавьте форму для пользователей, чтобы узнать, почему они нарушают порядок (возможно, логика процесса неочевидна).

😉 Как выбрать решение?
Для критичных ошибок (например, потеря данных): Используйте блокировку шагов или валидацию в реальном времени.
Для сложных процессов (например, настройка CRM): Внедрите обучение или чек-листы.
Для массового использования (например, форма заказа): Проверьте через A/B-тесты, что лучше работает.

😜 Итог
«Защита от дурака» — не всегда оскорбление, а инструмент, который помогает пользователям быстрее достигать цели.

Пробуйте комбинировать подходы: например, визуальные подсказки + уведомления. И помните: лучшая система та, где пользователь даже не замечает ограничений.

#product #UX #problems #path

🗳 Data Pipeline Overview: Как данные становятся ценным ресурсом

Конвейер данных — это система, которая автоматизирует движение данных от источников до конечных пользователей. Она преобразует сырые данные в полезную для бизнеса информацию.

Сегодня разберём очередную схему от ByteByteGo и посмотрим на типовые этапы конвейера:

❶ Collect (Сбор данных)
Данные собираются из разных источников:
— Data Stores : базы данных, CRM, ERP (например, записи заказов).
— Data Streams : реальные события (клики, логи серверов).
— Applications : мобильные приложения, IoT-устройства.

❷ Ingest (Загрузка данных)
Задача — загрузить данные в систему конвейера.

Инструменты :
— Apache Kafka: для потоковой передачи данных в реальном времени.
— Amazon Kinesis : обработка больших объемов данных в режиме реального времени.

Типы обработки :
— Batch Processing : обработка данных порциями (например, ежедневный отчет).
— Stream Processing : обработка данных «на лету» (например, мониторинг транзакций).

❸ Store (Хранение данных)
Где хранятся данные :
— Data Lake : Необработанные данные (например, Amazon S3, HDFS).
— Data Warehouse : структурированные данные для аналитики (Snowflake, Redshift).
— Data Lakehouse : комбинация озера и хранилища (Delta Lake, Azure Synapse)

❹ Compute (Обработка данных)
Цель —- преобразовать данные в формат, удобный для анализа.

ETL vs ELT :
— ETL : Extract → Transform → Load (преобразование до загрузки).
— ELT : Extract → Load → Transform (преобразование после загрузки).

Инструменты :
— Apache Spark - для пакетной обработки.
— Apache Flink - для потоковой обработки.

❺ Consume (Использование данных)
Как данные помогают бизнесу :
— Business Intelligence - инструменты вроде Datalens,Tableau для создания дашбордов.
— Self-Service Analytics - платформы типа Looker для самостоятельного анализа.
— ML Services - использование данных для прогнозирования (например, рекомендации товаров).
— Data Science - исследования с помощью Jupyter Notebooks.

💪 Почему это важно?
— Автоматизация : устраняет рутину (например, ручной экспорт данных).
— Качество данных : очистка и стандартизация улучшают аналитику.
— Быстрое принятие решений : доступ к актуальным данным в реальном времени.

🤓 Основные вызовы
— Сложность интеграции : разные системы могут иметь разные форматы данных.
— Безопасность : защита данных во время передачи и хранения.
— Масштабируемость : конвейер должен расти вместе с объемом данных.

Итог
Конвейеры передачи данных — это «скелет», который позволяет компании быстро переходить от сырых данных к осмысленным решениям. Без них аналитика становится медленной, а бизнес — менее гибким.

👀 См.также
— Видео от ByteByteGo на тему "What is Data Pipeline?"
— Big Data Pipeline Cheatsheet for AWS, Azure, and Google Cloud

#data #pipeline #analytics #ByteByteGo