morkro / happy-plants Goto Github PK

It would be nice being able to reorder plants in the main view.

hello have you got any advices to self host this app which is specifically what i'm looking for to manage plants at home with my wife.

I have added a lot of plants to the app, 92 and still have to add some. But the app is extremely slow in the first load, up to a few minutes before the first image is shown. I already optimized this quite a lot by compressing all images (and creating thumbnails for the overview, and larger images for the detail pages), this saves both space and bandwith (feature 'request' 1).

The second problem is the large amount of request that are getting send to the firebase, for every plant 2 request are created. They are all executed before the first image is rendered. I don't have enough experience with firebase and/or vue.js to find the correct solution for this, but to me it seems that there must be a way to optimize this. By combining requests, or by using lazy-loading.

If you have any ideas on this, happy to help implement it

In the empty state of the app when starting it for the first time, some text explains how to proceed. That’s super nice, and I do like the inlined icons to reference the controls, however they should probably be hidden to assistive technologies to avoid any confusion.

- Later on, you can update the sorting by clicking on the view button (<svg data-v-2d5878b5="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></rect> <rect x="14" y="3" width="7" height="7" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></rect> <rect x="14" y="14" width="7" height="7" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></rect> <rect x="3" y="14" width="7" height="7" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></rect></svg>) in the lower menu
+ Later on, you can update the sorting by clicking on the view button <span aria-hidden="true">(<svg data-v-2d5878b5="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></rect> <rect x="14" y="3" width="7" height="7" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></rect> <rect x="14" y="14" width="7" height="7" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></rect> <rect x="3" y="14" width="7" height="7" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></rect></svg>)</span> in the lower menu

All visible fields should have an associated label to be accessible for assistive technologies. In the category section for instance, the label wraps the field without providing any content. Consider not wrapping the input element, and have a proper label attached to it. Feel free to visually hide the label if you think it’s getting in the way.

Edit: the water input also doesn’t have a label.

In the settings pages, each item contains a <h2> element which is un-semantic given they are not really titles since they don’t introduce any content.

In the form to add plant, each field is introduced with a <h2> element. Fields are not content, titles are inappropriate here.

Notes are only stored on focus change, but should also on close.

Also, there seems to be an issue with updating.

In V2 you added the plant type dropdown (it seems that it is not fully implemented yet? Or at least it isnt saved for me :))

I like this idea but it would be nice if I can also add custom types.

What are other ideas for this? I would really love to have an option to share plant care instructions between different plants of the same species. Currently I need to add watering details, sun preferences to every plant. Would be nice if this can be shared, even better if we can keep a database and share info also with other users, but that might be something for a v3 :)

The hidden attribute hides something both visually and from the accessibility tree, therefore should not be used to hide assisting text (as done for the settings button).

To hide an element visually while keeping it accessible in the AT, something like described in this article: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/. Or use aria-label (although it also comes with its own drawbacks).

Images created from a blob aren't cached, thus they will be created each time the view changes. This causes flickering and is bad UX.

Implement changes from here: https://github.com/vuejs-templates/pwa

Buttons (and links) suffer from design inconsistency across the application making hard to understand what kind of button performs what. It would be good to define visual consistency to easily determine if a button is:

• The main call-to-action
• A secondary action
• A destructive action
• Disabled
• A static UI control
• …

The project needs a unified icon look anyway, these are good: https://github.com/mage3k/vue-feather-icon

Warning: postcss-cssnext found a duplicate plugin ('autoprefixer') in your postcss plugins. This might be inefficient. You should remove 'autoprefixer' from your postcss plugin list since it's already included by postcss-cssnext.
Note: If, for a really specific reason, postcss-cssnext warnings are irrelevant for your use case, and you really know what you are doing, you can disable this warnings by setting 'warnForDuplicates' option of postcss-cssnext to 'false'.

Even though Autoprefixer is deactivated in PostCSS config, it still seems to be duplicated.

Landmarks FTW. :)

Feature has already been partly implemented (Google authentication), but temporarily been removed. Here is the code which has to be readded:

src/main.js

import firebase from 'firebase'
import VueFire from 'vuefire'

firebase.initializeApp({
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DATABASE_URL
})

Vue.use(VueFire)

src/app/App.vue

created () {
  firebase.auth().onAuthStateChanged(user => {
    if (user) {
      this.signInUser(user)
    } else {
      this.signOutUser()
    }
  })
},

The <main> element is not supposed to wrap the frame of an application/website, that is it should not container the header or footer, only the main content. I suggest you move the <main> element slightly deeper within the app.

There are quite a few empty nodes in the DOM, which are most of the time not such a problem. However leaving empty lists <ul></ul> (see .menu-left, .menu-right) can be issue as I believe some assisting technologies could pick them up and announce them.

Hi Morkro!

The new v2 option is looking really great! Thanks for all the effort.

I would really love to be able to use the new design and the new features.

For v1 I have created some small additions for my own forked project, they were mostly designed to be only used by me because you were working on the v2 version already. So it was a good opportunity to get up and running with vue.js and the project.

One of the things I have added was an option to share your plants with others (with some small changes that they were not allowed to remove plants or tags). To 'connect' with the plants of another person I have added a unique code you have to enter to join their household.

But this is not something I want to implement in this version, mainly because it might not be that secure :)

I have a few ideas how this can be implemented:

1. Dont make the user the first collection (dont know what the correct naming is), but create a household instead (might be hard to make a migration for exiting data...). A user can than be connected to a household, an owner can be set which in turn can 'open' the household and accept or deny new members.

2. Keep the user as the main collection, and use the user document as a 'joinable entity'. This might work (I did it in my PoC), but it might be a bit of a hackish way).

Can you give your opinion about this feature? I can (help) implement this, but would like some advise :)

Hi, what do you think about the Idea to add integration to https://trefle.io? This way plant information could automatically be added.

It's currently not possible to update anything: names, photos, etc.

In v2 you added a schedule for watering. That would surely help me a lot :)

Can this schedule be expanded with other scheduled tasks. Would be nice if custom recurring or even one-time events can be added. Events which I can think of now:

• Fertilizer (can be a default one)
• Repotting
• Plant cuttings
• Plant pruning
• Spraying the plants
  Probably a lot more can be added, so custom events would be really cool.

That was the last one for now :)

Requirements:

• The user can create categories
  • Assign plants to categories
• Filter overview page by categories
• Change order of categories

Given I am offline
When I try to upload a plant with a photo
The add plant spinner spins indefinitely

The notebook view has overlapping buttons:

• I suspect the “Edit plant” button should not be there.
• I don’t think there is a need for a back button and a cross button.

I want to be able to add the watering requirements for each plant.

Requirements:

• Layout in Sketch

It would be great to have a docker image for Happy Plants. There are lots of plants management applications, but most of them have a different kind of approach (more focused on engineering aspects and automatization) so Happy Plants, being kind of unique, would be a great addition to the growing catalogue of self-hosted applications.

The current dialog implementation in use when creating a category on the fly when adding a new plant or the one to manage the modules is fundamentally inaccessible. My recommendation would be to create a thin Vue component wrapper a11y-dialog to avoid having to reimplement the underlying logic.

A few things that should happen (most of them done by a11y-dialog):

• The focus should be moved inside the dialog on open.
• The focus should be moved back where it was before opening.
• The focus should be trapped within the dialog.
• The ESC key should close the dialog.
• The main content of the page should be hidden from the accessibility tree.
• The dialog container should be present in the accessibility tree.
• The dialog should have dialog role in the accessibility tree.
• The dialog should have an associated name in the accessibility tree.

Doesn't seem to work yet.

I suggest making the transparent black background from buttons a bit darker to improve contrast, especially when they overlap an image.

The section element represents a generic document or application section… The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

When in doubt, use a <div> element.

Most buttons/links don’t have a proper focus state, or too subtly to really make a proper distinction with the rest of the content.

Looks like if I take a vertical photo of the plant with my phone, it gets then twisted when shown within the app (so basically I can only use photos that were captured horizontally if you know what I mean).

Love this project, it has huge potential. I hope you still find time to work on it!

In the Data view of the application, one button says “Download plants data”, one button says “Import data”. Consider renaming buttons so they are consistent:

• “Export plants data” (“Download plants data” also works)
• “Import plants data”

The clickable items in modules management dialog are not actual controls. They should probably be checkboxes under the hood given the type of data collected.

Edit: the sun module doesn’t use buttons while it should probably use radio controls.
Edit 2: the seasons module doesn’t use buttons either.

Not really an issue and forgive me if im asking something that you dont want to tell. I want to create something similar to your app for hobby purposes. I was wondering how you get your plant data. I see you have a database located at https://happy-plants-app.firebaseio.com but how did you populate that database with data? Did you insert it all by hand or is there some API you used?

For some reason, cssnano changes the output of calc() in a production build only. This causes the layout to break. Example:

Input:

--list-gap: calc(var(--base-gap) * 2 - var(--base-gap) / 2);

Output:

--list-gap: calc(var(--base-gap) - var(--base-gap));