Путь Bubble-разработчика

Уважаемый @Zaiceffff выкатил прикольный плагин
Пользуемся, кидаем огоньки)

Всем привет, мы сделали новый плагин "Age, date, year inclination plugin", который позволит вам легко и быстро склонять возраст и временные единицы в зависимости от значения числа. Этот плагин будет полезен для всех, кто работает с данными, связанными со временем.

В плагин включены самые ходовые единицы измерения времени от года до секунды. Вы можете выбрать юнит, который вы хотите склонять, и получить на выходе 2 значения: строку с числом "19 лет" или чистую строку "лет", относящуюся к числу.

Одной из фишек этого плагина является возможность юзать его на бэкенде, это позволит вам запланировать изменение возраста с помощью API Workflows и снизить нагрузку на фронт, что в свою очередь уменьшит время загрузки страниц и улучшит производительность вашего приложения.

Мы также планируем добавить в наш плагин возможность для пользователей добавлять собственные единицы, которые они хотят склонять. Таким образом, вы сможете настроить плагин под ваши конкретные потребности и использовать его в своих проектах еще более эффективно. Но мы точно не знаем когда это сделаем))

Если у вас есть какие-то предложения по улучшению или оптимизации функционала плагина, не стесняйтесь связаться со мной @Zaiceffff.
Отдельная благодарность и восхищение @timoffeuss за готовность к написанию кода и жесткому дебагингу.
И отдельно спасибо @den_mok за вдохновение!
Юзайте на здоровье!

🔥И вместо тысячи ... расширений🔥

Привет всем, кто пользуется Windows! Владельцам MacOS тоже салют, но этот пост вам скорее всего будет не так интересен😁)

Недавно нашел шикарную служебную утилиту, которая расширяет возможности Windows 10 и 11 приятными для разработчиков функциями.

Называется PowerToys

Включает в себя:
- ColorPicker. Пипетка которая запускается сочетанием клавиш и позволяет выбрать цвет в любом месте на экране.
- TextExtractor. Позволяет сочетанием клавиш запустить распознавание и копирование текста с изображений и в других местах где его нельзя просто выделить и скопировать.
- Ruler. Просто экранная линейка с тонкими настройками)
И ещё пару тройку полезных инструментов)

Очень порадовало, что не нужно устанавливать тучу расширений и программ - все уже собрано в одном месте. Скачать и установить можно с Github, Microsoft Store и через командную строку)
Ссылка на оф. статью с сайта Microsoft: https://learn.microsoft.com/ru-ru/windows/powertoys/install

Напиши какие программы упрощают тебе разработку)
Ставь 🔥 если понравилось)

У элементов теперь можно менять прозрачность)

С новым обновлением Telegram стало возможным открывать чаты в отдельном окне. Мне эта штука показалась супер удобной, так как в моменте можно сконцентрироваться на конкретной рабочей беседе и не отвлекаться на другие чаты, группы и каналы)

Напишите, что вам помогает более эффективно расходовать рабочее время)

🔥Расширяем возможности редактора Bubble🔥

Чего мне временами не хватает в Баббл, так это темной темы😞 Смотрю на Flutterflow и только надеюсь что когда-нибудь нам перепадет такой интерфейс)
Есть расширения для Chrome, которые добавляют любому сайту темную тему, но с бабблом это работает так себе😐 Недавно исследуя вопрос создания расширений на базе Баббл случайно наткнулся на плагин Bubble.io: Editor Dark Mode. Плагин меняет стиль страницы редактора не вмешиваясь в интерфейс выбора цвета и оригинальный цвет страницы, правда как оказалось, перекрашиваются не все элементы. Интерфейс выглядит лучше чем с другими dark mode расширениями, но все равно немного куцым))

Под этим плагином в рекомендованном списке увидел плагин Zeroqode Extension for Bubble!
Он не обновлялся с сентября 2019, поэтому не стоит ожидать его полной работоспособности) Однако пару полезных фич как оказалось в нем еще есть)
Присутствует переключатель темной темы (по моему мнению, работает лучше всех, за исключением того, что не перекрашивается синий цвет, который на сером фоне выглядит просто вырвиглазно). Присутствует пару крутых фишек:
- Расширяется меню горячих клавиш. Есть настройка открытия каждой отдельной вкладки, изменение зума страницы, переключение между дизайном и респонсивностью, просмотр превью и др.
- После его установки становится доступным к копированию разная доселе недоступная инфа, типа надпись "COPY FROM LIVE TO DEVELOPMENT" при копировании БД, или redirect URL в API-коннекторе

Что думаешь об этих плагинах? Был ли опыт их использования? Напиши в комментарии
Ставь 🔥 если понравилось

❗️Напиши мне пожалуйста в личку, если уже создавал расширения на базе баббл и готов дать консультацию)

Апгрейд контекстного меню)💪💪

🔥 🔤🔤🔤🔤🔤 - на лету уменьшаем вес фотографий🔥

Как ускорить загрузку страницы, если на ней присутствует РГ с фотками из внутренней БД?)
Кто-то скажет, что нужно уменьшать кач-во на этапе их загрузки. Но что если в базу
уже загружено много фото? В таком случае выручит :processed with imgix 🥳

Опция добавляется к фото, и похожа она на небольшой фоторедактор: можно включить автоулучшение, эффект блюра или сепии и т.д. Среди прочих фишек, есть опция для сжатия фото (Quality 1 -100).
Фотки из БД прогоняются через сервер imgix, на выходе выдавая более лёгкую картинку. Несмотря на меньший вес, качество , как по мне, остается приемлемым)
❗️Фишка срабатывает только с фотками из базы Баббла. В купе с пагинацией imgix может существенно ускорить загрузку страницу)

Источник: https://manual.bubble.io/core-resources/data/operations-and-comparisons#processed-with-imgix

Напиши, в каких ситуациях тебя выручала эта функция😎
Ставь 🔥 если понравилось

🔥Здесь должен быть заголовок🔥

В этом посте хочу затронуть тему оборудования)

Да, мы вроде не работаем с кодом(😄кроме некоторых случаев), нам не нужна тяжелая среда разработки и крутой проц чтобы быстро компилировать сложные проекты) Но ... Баббл тоже нельзя назвать "легкой" платформой!

В последнее время на особо-сложных проектах, с сильно нагруженными страницами браузер стабильно пару раз в день выкидывает мне сообщение "Недостаточно памяти")) Ошибка вылетает сразу на всех вкладках с Бабблом, а в диспетчере в момент появления ошибки фиксируется 100-процентная загрузка проца))
Проц у меня не самый мощный, но и не аутсайдер: 6 ядер по 4 ГГц в разгоне и 16 Гб оперативки, плюсом высокоскоростной внутренний накопитель) Вроде неплохие хар-ки, но на сложных проектах ошибки все равно вылетают) Справка Chrome советует отключить в настройках аппаратное ускорение - совет на самом деле шикарный, но мне не помог)

Поэтому стало интересно узнать, а как работают подписчики канала)
Поделитесь, на чем вы работаете, как часто сталкиваетесь с такой проблемой и находили ли какие-нибудь закономерности, какой браузер предпочитаете и почему) Сравнивали ли как работается над одним и тем же проектом с винды и MacOS?)
Пока нахожусь на больничном, будет интересно почитать)

P.S. Скажу честно: если вы спокойно зарабатываете в баббл на стареньком или не шибко мощном компьютере - мое уважение, вы для меня герой (без шуток👌)
Ставь 🔥 если тоже так считаешь)

🔥Ускоряем разработку копированием🔥

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

- Reusable element. Заходим в реюзабл, в дереве элементов нажимаем правой клавишей по названию реюзабла, жмём Copy. На любой странице в другом приложении в контекстном меню выбираем Paste - откроется окно добавления нового реюзабла. Вводим имя, и новый реюзабл становится частью вашего приложения)

- Option Set. Допустим вы хотите перенести список стран, городов, штатов, названия feather icons которые уже есть в другом приложении. Например, AirDev предлагает скопировать некоторые готовые OS из своего приложения. Копируем и вставляем через ПКМ)

- Отдельные группы и связанные с ними воркфлоу. Можно копировать внутри приложения между страницами, открытыми в разных вкладках, между разными версиями одного приложения, и между разными приложениями с помощью опции "Copy/Paste with workflow".

- Если часто юзаете одни и те же JS-функции, можно оформить их в виде плагина (например приватного, если нет времени и желания на оформление для публичного использования). Потом просто указываете в нем приложения, в которых хотите его использовать, и плагин становится в них доступен для установки.

🤫НЕ РЕКОМЕНДУЮ, но скажу: есть возможность копировать функционал из прошлого - создаем точку восстановления, откатываем приложение в нужное время, копируем интерфейс, возвращаемся на последнюю точку восстановления и вставляем скопированный элемент на страницу:) Почему не рекомендую? При таких телодвижениях в конце может вывалиться куча ошибок, которые уйдут если просто перейти к каждой из них. Не очень удобно, но если готовы к этому и нет другого выхода - you are welcome)

🖊Напишите в комментариях, что еще копируете и переносите между приложениями.

🔥Оставь реакцию, если понравилось🔥

🔥Global Variable🔥

По итогам опроса:
- Самым популярным способом оказался Custom State, но это и не мудрено (не забываем что значение кс при перезагрузке страницы не сохраняется, а значит не получится фиксировать выбранную вкладку)
- Самый очевидный - действие Show/Hide. Когда элементов 1 или 2 - вполне себе удобно)
- 59% отметили параметры в адресной строке и только 6% отметили Global Variable)

Те, кто знаком с JS знают, что глобальные переменные могут использоваться в любой части приложения. У плагина "Global Variable" немного похожая функциональность, но другой принцип действия - данные записываются в local storage и могут быть использованы в любой части страницы, на которой находится юзер минимальным набором действий🥳.

Элемент можно разместить на странице или внутри реюзабл, в настройках нужно указать название переменной. Использовать значение переменой можно ссылаясь на элемент. Затем действием "set a Global Variable" записываем в переменную с конкретным именем (вы можете разместить на странице несколько переменных) необходимое значение. Значение переменой автоматически перезапишется во всех местах на странице, где вы его использовали.

На гиф отражен процесс настройки и использования - значение меняется на странице, в reusable и в его дочернем reusable. После перезагрузки страницы значение переменной сохраняется. Изменяется и считывается оно быстрее аналогов. Можно юзать для навигации по странице) Области применения ограничены только вашим воображением)

Напишите, где вы уже использовали плагин, или планируете использовать.

🔥Оставь реакцию, если понравилось🔥

На днях неофициальный Telegram бот @donate открыл владельцам каналов возможность публиковать платный контент и настраивать платную подписку для приватных каналов.

🔔 Предупреждаю: платных подписок и постов в моих планах нет и в ближайшее время не предвидится🥳

Но...
для неравнодушных 😉 подписчиков думаю разместить кнопку "Пожертвовать" чтобы  дать возможность выразить благодарность за мой труд ❤️

Есть мысль пустить средства на чай с печеньками, покупку курсов, книг и консультаций, которые потом можно будет конвертировать в полезные посты на канале)

Поделитесь в комментах своими мыслями или оставьте реакцию с оценкой идеи🔥

⏺Список тем на канале:

👩‍🎓 Из документации:
• API Workflow on a list лучше...
• Массовое создание записей без цикла
• Редачим таблицу без тестовой страницы

🤓 Описание функций:
• Координаты превратить в адрес
• Изменение стиля для некликабельных элементов
• Formatted as text: сокращаем кол-во шагов в воркфлоу
• Format as text: cписок записей в виде оформленного текста
• Статичные ссылки в кликабельные
• Смена пароля без почты и старого пароля (+1 способ в комментах)
• Сжимаем фото с помощью imgix

📞 Плагины:
• Автообновление превью
• Мгновенный доступ к значению инпута
• Переменная внутри рабочего процесса
• Global Variable вместо кастом стейт и url-parameter

💪 Lifehacks/крутые практики:
• Называем страницы правильно
• Очередь на бэкенде
• Копирование между приложениями

😎 Мои эксперименты:
• Арканоид на баббл

☺️ Информационная доска
• Книга отзывов и предложений

Вот уже как год канал открывает подписчикам полезные Баббл фишки) Признаюсь, рад тому, что благодаря постам мы стали разрабатывать быстрее и правильнее, "как положено", и уверенно двигаемся в правильном направлении) Спасибо за регулярный фидбэк, ваш опыт и мнение очень ценны) Дальше будет только интереснее)

Новая кнопка в интерфейсе) открывает меню блоков, которые можно встроить в проект) Frames не установлен, судя по всему новая фича Баббла)

🔥Меняем юзеру пароль, не зная старого пароля и без отправки письма на его почту🔥

Допустим был создан аккаунт для клиента, а пароль не подходит😱 (такое иногда случается, если не юзается confirm password при регистрации!) и хочется его сменить, не тревожа клиента🙈.

Чтобы попасть на страницу восстановления пароля в обход почты пользователя:
1) Создаем API Workflow(!) с параметром user с типом User. Добавляем первым шагом "Send password reset email" для почты юзера присланного в параметре, внутри шага отмечаем "Just make token, don't send email". На втором шаге складываем результат первого шага к юзеру в филд, назовем его "reset_token".
2) На фронте рисуем РГ с пользователями, в ячейке с юзером располагаем кнопку "Сменить пароль", вешаем на нее первым шагом запуск вышеупомянутого воркфлоу, отправив в параметре user пользователя из текущей ячейки. Вторым шагом делаем паузу, чтобы токен успел сгенериться и прописаться к юзеру в БД (необязательно😊). Третьим шагом - go to page→"reset_pw" добавив в этом шаге параметр reset со значением из филда "reset_token" родительского пользователя. Все - вы уже на странице сброса пароля)

Обратите внимание, что токен генерится только на бэкенде, на фронте получите пустой результат) Вышеописанная последовательность - не каноническая, а всего лишь пример)

🔥Оставь реакцию, если понравилось🔥

🔥Превращаем статичные ссылки в кликабельные 🔥

Небольшая подсказка, ускоряющая работу с ссылками в текстовых элементах. Работает с адресами сайтов и почт.
Ставь 🔥 если понравилось)