Во-первых, я просто хочу поблагодарить Майка Трикинга. Я использовал его CSS для всплывающих подсказок в нескольких проектах, и всякий раз, когда я показывал людям, что они сделали с моим пользовательским интерфейсом, они всегда были впечатлены. Если вы хотите взглянуть на то, о чем я говорю, обязательно перейдите по этой ссылке:
На прошлой неделе два моих партнера, Джошуа Смолл и Эрик Сейлер, и я работали над нашим самым первым проектом Electron. Все, что в основном делает приложение, — это извлекает API из Unsplash (сайт с фотографиями), и пользователь может выбрать, какую фотографию установить в качестве фона рабочего стола. Пользователь также может использовать наше приложение для доступа к своей веб-камере и фотографировать себя, чтобы использовать его в качестве фона.
После снижения функциональности у нас остались стили и UX/UI. Теперь, имея опыт создания выпадающих меню, я был ярым сторонником использования всплывающих плиток для создания наших меню, вроде того, как это сделал мой сторонний проект Free Degree Finder:
Итак, я взял плитки нашего проекта, которые вели либо к веб-камере, либо к фотографиям UnSplash, и превратил их в меню, состоящее из плиток, на которые можно наводить курсор.
Первое, что я обнаружил, слава богу, что инструменты разработки доступны в Electron, попытка использовать CSS без них была бы ужасной. Во-вторых, и, возможно, более важное, и мне на самом деле напомнили об этом, а не открыли, это то, что копирование и вставка чьего-то кода никогда не работает идеально. Затем я провел следующий час, к большому отчаянию моей подруги, которая могла услышать мои крики стресса, пытаясь центрировать коробку. Однако это могло занять гораздо больше времени, если бы не чистый код от Майка Трикинга.
В конце концов, я многое узнал о поиске правильных элементов div и о том, насколько важны четкие имена классов, поскольку я смог найти именно то, что мне нужно, с именами классов, данными Майком. А вот так тайл выглядит при наведении!
