Quotes - Keep track of interesting quotes

Keep track of interesting quotes. Driven by a simple JSON file, can be used to create a widget and displayed anywhere.

Empty quotes screen

Entering a new quote

1 Like

@patdryburgh if you have comments / feedback, put them here!

Fixed the mobile styles, thanks for reporting that :wink:

First, this looks waaaay nicer than https://quotation.al, the app I made to teach myself Ruby back in 2016. Thought I would christen it with one of my favourite quotes :slight_smile:

Also, I think I used the same topographic pattern when I designed and developed the front-end for https://yesabregistry.ca (view one of the projects :smiley:).

A few bits of feedback:

Design

  1. You should consider increasing the contrast of the text colours used for the quote author and numbers as they fail to meet the WCAG 2.1 standards for colour contrast:

  2. In the quote view, you’re going to find that full justification causes a lot of issues with variable content. Justified alignment can often result in large gaps between words and ”rivers” (https://en.wikipedia.org/wiki/River_(typography)). Hyphens can help, however at the size of the type on display in the mobile app, you could find yourself with a hyphen on every line. Until you are able to adapt the size of the type (and thus the measure of each line) based on the length of the quote, I think sticking with flush left alignment will best suit the nature of the content.

  3. I haven’t been able to test this on desktop (can’t auth link yet), but I just want to make sure I mention that it’s important the buttons and fields are all accessible with proper aria attributes, labels, etc. :slight_smile:

  4. This is minor, but it feels odd that the author field is above the quote field when adding a quote, but inverted when presenting a quote. I would personally put the quote field first because it’s likely to be in my clipboard or the first thing I wish to add.

Feature Requests

  1. It would be nice to have a way to dismiss the “new quote” form if you decide against creating a new quote. On mobile, because it feels like a page view, I thought I could hit the back button, but that just took me back to the auth screen. Going forward again brought me to the “new quote” form again and the only way to dismiss it is to refresh the page.

  2. The one feature I had hoped would be the “killer feature” of Quotational was the ability to share quotes with a URL (https://quotation.al/quotes/4085072396). My design for this page is no where near as nice as what you have, but I see a lot of value in making the pages for the quotes linkable, though I also understand that may not be in your vision of this app.

I really dig the direction this is taking and would love to see it continue to be developed. Great job, team!

2 Likes

Ok, couple more since I just now saw http://quotes.icidasset.com with a lot more quotes than my one :joy:

  1. Love how you handled the hover states. Feels like you may be an iPad with trackpad user :wink:
  2. I want a random button!!

:heart:

2 Likes

You CAN auth link between mobile and desktop web. Still won’t be your “Pat” user until CLI linking is implemented.

Thanks for the feedback!

@boris Perhaps I’m misunderstanding what is meant by “auth link between mobile and desktop web” or missing an obvious step like the total n00b I am :laughing: but I’m not quite sure what to do to use the account I created on my iPhone on the MacBook :man_shrugging:

Here’s what I did:

  1. Visited https://quotes.fission.app on my iPhone.
  2. Tapped “Sign in with Fission”.
  3. Tapped “Create Account”.
  4. Created user patwww.
  5. Verified the account through my email.
  6. Was logged into https://quotes.fission.app on my iPhone with the username patwww.
  7. Visited https://quotes.fission.app on my MacBook.
  8. Clicked “Sign in with Fission”.
  9. Clicked “Sign In”.
  10. Entered patwww and clicked “Link Account”.
  11. Saw the page telling me to load https://auth.fission.codes on my iPhone and did so in the same tab that I was logged into https://quotes.fission.name with patwww
  12. Loaded https://auth.fission.codes on my iPhone per the instructions.
  13. Not sure what to do to get to https://quotes.fission.name logged in as patwww.

Will this work once CLI linking is implemented?

(we figured out that Pat already DID have a web account, I thought he was using a CLI account)

You did everything right! And documented it for me! Further testing and bug hunting required, lots of changes under the hood.

Thanks for the great feedback and kind words @patdryburgh! :relaxed:

Just a Macbook Pro with a trackpad, but thanks :stuck_out_tongue_winking_eye:

Actually, the arrow button does just that. When you click that, it’ll select a random quote you haven’t seen yet. Same thing happens when you load the app. Those numbers on the screen show how many you’ve seen and how many quotes you have. At least that’s the idea, haven’t tested it extensively yet :eyes:

Haha yes awesome, from https://www.heropatterns.com/ ?

Good point, I’ll consider it :+1:

For sure, still need to tweak the mobile styles. Text is too big, needs more spacing on the side, etc. But yeah, sometimes justification looks nice, other times it doesn’t. Will try left alignment!

I’m not sure aria attributes are that important nowadays, but yeah, definitely need to invest time into accessibility. I really need to make, or look up, a checklist for launching an app/website :thinking:

Oh, good point, will do :+1:

Makes sense, need to add some routes to this fella :eyes: There is a button at the bottom which takes you back to the quote screen though. Altough, it might not be clear enough.

That’s on the todo list for sure :100: Although I’m not entirely sure yet what form that’ll take, but we’ll see.

We’re missing some pieces in regards to our file system. Meaning, you can only load your file system on one app and one device/browser. Obviously this is not how it should work, but we’re getting there, soon!

Haha, me too! And, I suppose these also resemble the new hover states in macOS Big Sur (though I’m still stuck on Mojave due to a dependency on a 32-bit driver, but that’s another story). All of which to say this feels really modern and natural.

Ahhhh, that makes sense! That wasn’t what I thought was happening purely because the arrow suggests to me a particular linear order, but I can see how that is my personal bias.

That’s the one!

I promise this will be the last I harp :wink: Ensuring enough contrast is particularly important for people with vision impairments, including but not limited to colour blindness.

There are some really powerful tools available that help with this.

  • Contrast is a Mac app that lives in your Menu Bar and lets you pick two colours to get their contrast ratio.
  • Chrome Devtools also have a feature that lets you evaluate the contrast between two elements.
  • Stark is a plugin for Sketch, Photoshop, and Figma that does the same but also allows you to simulate various forms of colour-blindness by applying a filter overlay to your design.

I now don’t recall whether they were there yesterday or have been added since, but I now see you have labels above the fields which should be accessible by screen readers. However, you are missing the “for” attribute on the labels, and thus a screen reader like VoiceOver is unable to pick them up and instead read the text that’s in the placeholders. See the attached gif for reference (and forgive my sloppy clicking :wink:):

quotes-voiceover

There are a number of checklists available online. One you may find useful is WebAIM’s WCAG 2 Checklist which seeks to condense the WCAG 2.1 specification specifically for the purposes of implementation.

Ooooh, the quotation mark icon. Yeah, I did not guess that’s what that was.

Hope this was helpful!

1 Like

Thanks for the resources! I’ll improve this :+1:

Oh forgot those, thanks! Couldn’t watch the gif though, it’s super tiny :eyes: :mag:

Ah gotcha, I’ll see if I can find another icon.

Sorry about that. It seems Discourse must have compressed it. I probably should have shared it with IPFS :joy: