Даже в самом простом веб-приложении визуализация базы данных — вопрос, который встаёт ещё до запуска. Как маркетологи и менеджеры будут видеть заявки? Как посмотреть успешные оплаты? Как сделать из всего этого красивые графики на дашборде руководителя?

Для реляционных баз данных, с которыми можно общаться SQL-запросами, есть масса инструментов, в том числе уже упомянутый выше разработчик фреймворка Cube.js — онлайн-сервис Statsbot. Но вот с нереляционными базами, в частности с MongoDB, всё не так просто.

Без бубна интегрировать инструмент визуализации данных и MongoDB можно с помощью популярного Metabase (отличнейший инструмент, подходящий почти под все задачи во всех случаях — и бесплатный, рекомендую). Но всё прекрасно до тех пор, пока в базе не появятся документы с вложенными объектами.

Например, если заявка содержит информацию о покупателе не отдельными полями типа customerName, customerEmail, customerPhone, а объектом, то есть customer: { name, email, phone }. Metabase может показать только одно поле — customer, где будет { name: "Иван", email: "ivan@ya.ru", phone: "+79261112233" }. Разбить этот объект на три столбца уже не получится. В итоге работать с таким отображением просто невозможно.

Выход — это использовать специализированный сервис MongoDB Charts. Если база данных располагается в официальном сервисе MongoDB Atlas, то Charts подключается одним кликом и даёт огромные возможности для настройки визуализации, дашбордов и командной работы.

Pitch, стартап, который собирается изменить то, как мы делаем презентации, начал приглашать на бета-тестирование. Интересно, что разработка идёт уже около двух лет в закрытом режиме, и тем не менее им удаётся поднимать несколько десятков миллионов долларов от основателей успешных стартапов. Это полностью противоречит принципу максимально быстро выпустить на рынок что-то из говна и палок, но обычно в наличии нет даже палок, поэтому выпускается просто что есть. Видимо, кредит доверия и ресурсы после продажи Wunderlist позволяют так долго не начинать продажи.

Жду инвайт :)

Кому интересна разработка статичных сайтов на Vue с помощью Gridsome, заходите в чат @gridsome

Я там есть в том числе. Будут вопросы, подскажу я или другие участники.

glazestock.com — ещё один отличный банк с условно бесплатными иллюстрациями для сайтов. При использовании надо указывать автора. Если не хотите, надо заплатить $10-20 за иллюстрацию.

Плохо оптимизированные изображения на сайте — причина №1 медленной загрузки сайта и падения показателей скорости загрузки в инструментах измерения (основыне — это Lighthouse и PageSpeed Insights). Почему №1? Потому что даже для статичного сайта, который сложно сделать медленным, несколько неоптимизированных изображений могут снизить показатели скорости до среднестатистического сайта на WordPress.

80% проблемы оптимизации изображений помогает решить бесплатное приложение на Мак ImageOptim. Например, 75% сжатие файла JPG может без видимой потери качества снизить размер изображения с 500 КБ до 100 КБ.

Остальные 20% касаются правильной сборки статичного сайта. Например, для Gridsome вместо тегов <img> важно использовать тег-компонент <g-image>, который дополнительно оптимизирует изображения при сборке и делает загрузку изображения «прогрессивным», то есть при просмотре сайта в начале видно только заблюренное превью и через 0,5-1 секунду подгружается изображения.

Составил небольшой список плагинов для редактора Atom, которыми пользуюсь каждый день: https://sergeyfilimonov.com/blog/atom-plugins/

emailjs.com — сервис, который позволяет отправлять имейлы прямо с фронтенда, то есть без настройки сервера на вашей стороне, при этом не публикуя доступы к API в коде проекта.

Работает так:
1. Добавляете сервис для отправки транзакционных писем Mailgun, Mailjet, Mandrill, SendinBlue, SendGrid, Amazon SES и Postmark или сервис личной почты типа AOL, Gmail, FastMail, iCloud, Mail.ru, Outlook, Yahoo, Yandex и Zoho.
2. Настраиваете шаблоны.
3. Подключаете JS-библиотеку emailjs.
4. Настраиваете отправку письма с нужным шаблоном и контентом для нужного события.

Бесплатно даётся:
1. До 200 писем в месяц (не более 50 КБ каждое письмо).
2. До 2 собственных шаблонов.

Чего никогда нельзя делать на сайте, так это держать пользователей за дураков. На этом сайте использована явная стоковая фотография и к ней подпись «Константин, менеджер по продажам. Удвоил продажи, обучаясь в [название компании писать не буду]». Поиск фото в стоках через Яндекс занял 30 секунд: https://ru.depositphotos.com/43996869/stock-photo-black-and-white-businessmans-picture.html

Доверие ко всему, что написано на этом сайте дальше, где-то около нуля.

icons8 запустили генератор иллюстраций в 5 стилях: https://icons8.com/vector-creator В картинку можно добавить персонажа и объекты, чтобы создать нужную сцену и разместить это на сайте

Главный недостаток чудоприложения ImageOptim для оптимизации размера изображений до 80% — это то, что оно работает только на Маке. Для остальных платформ можно использовать онлайн-сервис https://tinypng.com/ — по эффективности сравним с ImageOptim

http://undraw.co/illustrations — ещё один конструктор иллюстраций. Хорош тем, что: 1) много сюжетов; 2) легко настроить цветовую гамму иллюстрации. Использовать лучше с десктопа.

Большая подборка сайтов/сервисов с иллюстрациями: https://vc.ru/design/98051-26-saytov-s-kachestvennymi-illyustraciyami

На этом тему готовых иллюстраций пока завершу :)

https://gradienta.io/ — генератор интересных градиентов в нескольких стилях в форматах JPG/CSS

superproof.io — 14 полезных, быстро настраиваемых типа уведомлений для сайта: 1) просто сообщение; 2) купон (со сбором лида); 3) статистика посетителей; 4) подписка (со сбором лида); 5) информация о недавней конверсии (например подписке); 6) счётчик конверсий (например покупок); 7) видео; 8) предложение поделиться; 9) отзыв; 10) оценка в виде emoji; 11) уведомления о сборе данных для аналитики; 12) предложение оценить страницу от 1 до 5; 13) сбор телефона; 14) обратный отсчёт.

В бесплатной версии — 1 кампания с настройками показа уведомлений, в ней — 10 уведомлений, для них — до 1000 срабатываний.

iconshock.com/svg-icons — окло 470 SVG-иконок с градиентом. Доступны бесплатно для личного использования и за $19 (~1200 ₽) для коммерческого.

upninja.io — сервис для автоматической проверки работоспособности вашего сервиса и отдельных частей его API. Бесплатного тарифа нет, но платный более чем доступный — $5/месяц.

According to a report from 9to5mac, Apple could be working on full cursor support for the next major version of iOS and iPadOS. The report is based on code of an early version of iOS 14 and iPadOS 14.

Источник: https://techcrunch.com/2020/03/09/apple-could-add-mouse-cursor-support-to-the-ipad/

Как-то очень давно, в 2011 году, я написал развёрнутое мнение по поводу того, куда движется Apple в отношении ноутбуков: «Так что станет с Mac? Уйдёт ли бренд Mac из-за ребрендинга ОС? 50/50. iBook может стать, как и Air, только временным решением для ввода на рынок ноутбуков, в которые заложена новая идеология, а может и полностью заменить MacBook. С настольным компьютерами iMac и Mac mini, думаю, ничего не изменится. Они дольше всего будут работать на Intel и, скорее всего, сохранят своё название. Всё же Macintosh начинался не с ноутбуков. Back to basics, знаете ли. Снова Macintosh, снова свой процессор. Apple снова на коне.»

Статья целиком: https://sergeyfilimonov.com/blog/apple-ibook/

generated.photos — сервис, машинным способом генерирующий портретные «фотографии» лиц на место аватарок. Сейчас в базе около 2 млн фотографий. Полезен, например, для прототипирования интерфейсов. Если хотите использовать сгенерированные лица в коммерческих целях, то нужно заплатить $1 за каждое такое фото.

#Airtable теперь поддерживает Markdown!

С одной стороны это просто удобно для работы с большим объёмом именно текстовой информации (как в Notion), а с другой — это возможность использовать Airtable в качестве CMS для блога.

К слову, я уже готовлю такой онлайн-курс: https://sergeyfilimonov.com/courses/airtable-cms/

В четверг провёл вебинар в Нетологии с темой «Fullstack-дизайн на примере статичных сайтов». Тема для тех, кто занимается дизайном и хочет заняться разработкой — и наоборот.

Ссылка на запись вебинара: https://netology.ru/free-lessons/fullstack-veb-dizajner-kak-zapustit-sajt-samomu

Моя заметка о fullstack-дизайне от прошлого года: https://sergeyfilimonov.com/blog/fullstack-design/

И в июне-июле в блоге Нетологии опубликую переработанную, текстовую версию вебинара с учётом вопросов, которые были заданы во время него.