Keep track of interesting quotes. Driven by a simple JSON file, can be used to create a widget and displayed anywhere.
Fixed the mobile styles, thanks for reporting that 
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 
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 
).
A few bits of feedback:
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:
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.
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.
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.
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.
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!
Ok, couple more since I just now saw http://quotes.icidasset.com with a lot more quotes than my one 
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 
but I’m not quite sure what to do to use the account I created on my iPhone on the MacBook 
Here’s what I did:
patwww.patwww.patwww and clicked “Link Account”.patwww
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! 
Just a Macbook Pro with a trackpad, but thanks 
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 
Haha yes awesome, from https://www.heropatterns.com/ ?
Good point, I’ll consider it 
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 
Oh, good point, will do
Makes sense, need to add some routes to this fella 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 
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 
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.
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 ):
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!
Thanks for the resources! I’ll improve this
Oh forgot those, thanks! Couldn’t watch the gif though, it’s super tiny 
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 