hsv-dot-beer / hsvdotbeer-nuxt Goto Github PK
View Code? Open in Web Editor NEWNuxt frontend for hsv.beer
Nuxt frontend for hsv.beer
More from the same guy as #52:
Similar to the hamburger menu, the sort button probably needs an aria-label="Sort List of Beers" and some sort of event listeners to activate via enter/spacebar. I'd also consider capturing spacebar on the navigation menu, but that all just kind of depends on implementation details
More accessibility improvements
Basically, first element of body is a screen reader only (sr-only in bootstrap unless it's changed) hyperlink that when clicked goes to the start of the page content and doesn't read the navigation/logo sections
Though it's more optional on your site because it's just one page, it's mostly meant for skipping content that's just repeated on every page of a site
On mobile, tapping the sort button a second time won't make it go away. Likewise, clicking doesn't hide on desktop.
From a friend who does VA web dev and has to deal with screen readers on a daily basis:
If you're bored, I'd consider throwing an aria-hidden=true on the logos, suppose a title works, but since the company name is already in the block it seems like it would be redundant on screen readers
Basically the beer expanded view in a full-page form; it would make tweets in hsv-dot-beer/hsvdotbeer#270 more usable.
As you can see, the color is not shown.
However, in the beer object, the color is known:
https://dev.hsv.beer/api/v1/beers/2211/
{
"id": 2211,
"manufacturer": {
"id": 47,
"name": "Sierra Nevada Brewing Company",
"url": "",
"location": "Chico, CA",
"logo_url": "https://lh3.googleusercontent.com/54I5dJ_1gfS7phJsWVQj0yrje4ZqW9xdw6riZr4bQH933kgslLeQZ8cli5nu5zCP4m5wTEoVQVhHu2oCjpeENXVHvvX5=s150",
"facebook_url": "",
"twitter_handle": "",
"instagram_handle": "",
"untappd_url": "https://untappd.com/brewery/1142",
"automatic_updates_blocked": true,
"taphunter_url": "https://www.taphunter.com/brewery/sierra-nevada-brewing-company/1102",
"taplist_io_pk": null,
"time_first_seen": "2019-05-29T15:02:19+0000"
},
"abv": null,
"color_srm": null,
"color_srm_html": "#c17a37",
"style": null,
"venues": [
{
"id": 15,
"time_zone": "America/Chicago",
"tap_list_provider_display": "The Stem & Stein's HTML",
"latitude": "34.69143300",
"longitude": "-86.78591400",
"name": "The Stem and Stein",
"address": "10871 County Line Rd, Ste. B",
"city": "Madison",
"state": "AL",
"postal_code": "35758",
"country": "US",
"website": "https://thestemandstein.com/",
"facebook_page": "https://www.facebook.com/The-Stem-Stein-244857472236858/",
"twitter_handle": "TheStemAndStein",
"instagram_handle": "",
"tap_list_provider": "stemandstein",
"untappd_url": "https://untappd.com/v/the-stem-and-stein/35784",
"email": "[email protected]",
"phone_number": "2563253779",
"logo_url": "https://thestemandstein.com/Content/logoSS.png",
"slug": "stem-and-stein",
"on_downtown_craft_beer_trail": false
}
],
"prices": [
{
"venue": "The Stem and Stein",
"serving_size": {
"name": "Pint",
"volume_oz": "16.0"
},
"price": "5.00"
}
],
"untappd_metadata": null,
"name": "Sierra Nevada Oktoberfest",
"in_production": true,
"ibu": null,
"untappd_url": null,
"beer_advocate_url": null,
"rate_beer_url": null,
"logo_url": "https://lh3.googleusercontent.com/54I5dJ_1gfS7phJsWVQj0yrje4ZqW9xdw6riZr4bQH933kgslLeQZ8cli5nu5zCP4m5wTEoVQVhHu2oCjpeENXVHvvX5=s150",
"manufacturer_url": null,
"automatic_updates_blocked": false,
"taphunter_url": null,
"stem_and_stein_pk": 367,
"taplist_io_pk": null,
"time_first_seen": "2019-08-25T12:24:10+0000"
}
Should selecting a new sort target dismiss the sort menu? I think it should, but I'm open to arguments in either direction.
The tap target seems a little small on mobile for my fat thumbs
From the same guy as #52:
Also on the "if you're bored" train, darker font color on the ratings if you want to be a little better on the contrast rating there
https://webaim.org/resources/contrastchecker/?fcolor=8F6400&bcolor=FFEDB7 is where it currently sits, as I understand it, the AA rating means it's good enough, but if it's really important to the site then AAA is where you'd want it to be
h2.beer-name
I want some sort of visual indication of the active sort direction (A->Z or Z->A or 0->100 or 100->0)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.